/*
Theme Name: Sota Clear
Theme URI: https://sota.solutions
Author: Frank Engler
Author URI: https://sota.solutions
Description: A minimal WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sota-clear
*/

/* -------------------------------------------------------------------------------- */
/*	0. CSS Reset
/* -------------------------------------------------------------------------------- */

/* Reset basic margins, padding, and box-sizing */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-font-smoothing: antialiased;
	100vw;-moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}


html, body { 
	margin: 0;
	padding: 0; 
}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit;
	text-align: inherit;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote:before, blockquote:after { content: ""; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}



/* -------------------------------------------------------------------------------- */
/*	ROOT COLS
/* -------------------------------------------------------------------------------- */


:root {
    --primary-color: #474747;
    --secondary-color: #3381ff;
    --text-color: #333;
    --background-color: #f9f9f9;
}

.background-color {
    background-color: #f9f9f9;
}




/* -------------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------------- */


html { 
	font-size: 100%;
	scroll-behavior: smooth; 
}

body {
	background-color: #ffffff;
	border: none;
	-webkit-text-size-adjust: 100%;
}
body, h1, h2, h3, h4, p, ul {
    margin: 0;
    padding: 0;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

.hidden { display: none; visibility:hidden }
.fleft { float: left; }
.fright { float: right; }



/* -------------------------------------------------------------------------------- */
/*	2.	Element Base
/* -------------------------------------------------------------------------------- */


p,
blockquote,
ul,
ol,
address,
dl,
.wp-caption,
pre {
	line-height: 1.6;
	margin-bottom: 1.25em;
}

a {
	color: #c9002f;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* Typo ---------------------------------- */

h1, h2, h3, h4, h5, h6 { 
	margin: 35px 0 25px; 
	font-family: 'Poppins', sans-serif; 
}
h1.page-title { 
	margin: 0 0 45px; 
	font-family: 'Poppins', sans-serif; 
  
}

h1 { font-size: 2.55em; font-weight: 600; line-height: 1.2; }
h2 { font-size: 1.875em; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.5em; font-weight: 500; line-height: 1.4; }
h4 { font-size: 1.25em; font-weight: 500; line-height: 1.4; }
h5 { font-size: 1em; font-weight: 500; line-height: 1.5; }
h6 { font-size: 0.8em; font-weight: 500; line-height: 1.5; }


@media (max-width: 768px) {
	h1 { font-size: 1.875em; font-weight: 600; line-height: 1.3; }
	h2 { font-size: 1.5em; font-weight: 600; line-height: 1.4; }
	h3 { font-size: 1.25em; font-weight: 500; line-height: 1.4; }
	h4 { font-size: 1em; font-weight: 500; line-height: 1.5; }
	h5 { font-size: 0.8em; font-weight: 500; line-height: 1.5; }
	h6 { font-size: 0.7em; font-weight: 500; line-height: 1.5; }
}




.reset_h23 h2, .reset_h23 h3 {
    position: relative; /* Needed for positioning elements */
    padding-left: 0px; /* Add spacing between the border and text */
    border-left: 0px; /* Add a left border with a color */
    display: block; /* Ensure the border only spans the text width */
}

code, kbd, pre {
	font-size: 0.85em;
	background: #EEE;
	font-family: Menlo, Monaco, monospace;
}

kbd,
code {
	padding: 5px;
	border-radius: 3px;
}

dl { 
	line-height: 160%; 
}

dl dt { 
	font-weight: 700; 
}

.small  {
    font-size:13px
}

select {
	font-family: 'Poppins', sans-serif;
	}
/* Separator --------------------------------- */

hr {
	background: #ddd;
	border: none;
	height: 2px;
	margin: 3em auto;
	width: 50%;
}

/* Lists ------------------------------------- */

ul, ol {
	margin: .5em 0 .5em 1.5em;
}

li {
	margin: .5em 0;
}

address {
	padding: 20px;
	background: #f1f1f1;
}

pre {
	background: #3d3d3d;
	color: #FFF;
	font-size: 0.8em;
	line-height: 140%;
	padding: 20px;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

/* Buttons, Form & Input ------------------------------------- */

button,
input[type="button"],
input[type="submit"] {
    background-color: #5472d2;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #005177;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 1em;
    font-size: 1em;
}

textarea {
    resize: vertical;
}



/* Container and Layout Structure ------------------------------------- */

.container {
    padding-left: 25px  !important;
    padding-right: 25px !important
}

.container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}



.col {
    flex: 1;
    padding: 15px;
}

/* Responsive column classes */
.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25% }
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .col {
        flex: 1 0 100%;
    }

    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }
}

aside {
    padding:0 25px;
}
/* -------------------------------------------------------------------------------- */
/*	3.	HEADER
/* -------------------------------------------------------------------------------- */

/* Full-width header with 60px height */
#header {
    width: 100%;
    height: 100px; /* Default height */
    background-color: #FFFFFF;
    color: #000;
    z-index: 1000;
    border-bottom: 1px solid #f2f2f2;
    transition: all 0.3s ease;
}

/* Sticky Header Modifications */
#header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Explicit height for sticky mode */
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom: none;
      z-index: 9999; /* Höherer z-index für den Header */
}

#header.sticky .container {
    height: 60px; /* Adjust container height in sticky mode */
}




#header .container{
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}


/* SMALL HEADBAR */

#small_headbar {
	background-color: #000000; /* Adjust color as needed */
	width: 100% !important;
	height: 40px;
	z-index: 100
}
ul.small_headbar {
    position: absolute;
    top: 0; /* Fügen Sie 'top' hinzu, falls nicht bereits gesetzt */
    height: 40px;
    color: #fff;
    width: auto;
    text-align: right; /* Standardwert für .small_headbar */
    margin:0px;
    padding: 0px;
}

/* Spezifische Stile für die linke Ausrichtung */
ul.small_headbar.links {
    left: 25px;
    text-align: left; /* Überschreibt den Standardwert */
}

/* Spezifische Stile für die rechte Ausrichtung */
ul.small_headbar:not(.links) {
    right: 25px;
}

/* Stile für Listenelemente */
ul.small_headbar li {
    display: inline-block;
    margin: 0px;
    margin-left: 20px;
    line-height: 40px;
    padding: 0px;
}
ul.small_headbar li.cta {
    background-color: var(--primary-color);
    margin: 0px;
    margin-left: 20px;
    line-height: 40px;
    padding: 0 10px;
}



/* Stile für Links innerhalb der Liste */
ul.small_headbar li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    display:block
}



@media (max-width: 780px) {
    ul.small_headbar li {
    margin-left: 5px;
    line-height: 35px;
    }
    
    ul.small_headbar li a {
    font-size: 18px;
    padding:0 10px;
    }
    
    ul.small_headbar li.cta a {
    font-size: 13px;
    padding:0 8px;
    }

    span.smli_txt {
        display:none;
    }
    ul.small_headbar:not(.links) {
        right: 1px;
    }

}

/* SMALL HEADBAR */



/* HEAFDER LEFT + LOGO */
.header-left {
    display: flex;
    align-items: center;
}






/* Logo adjustments for sticky mode */
#header.sticky a.custom-logo-link img{
    max-height: 50px; /* Reduce logo size in sticky mode */
}



a.custom-logo-link {
    max-width: 330px;
    }
a.custom-logo-link img {
     
        max-width: 330px !important;
        width: auto;
        height: auto; /* Ensures aspect ratio is maintained */
}

.brand-name {
    margin-left: 20px;
    font-size: 22px; /* Adjust as needed */
    color: #5f347e; /* Adjust as needed */
	font-weight: bold;
	text-transform:lowercase;
	font-family: 'Archivo Black', sans-serif;
}

/* SVG */
svg {
  width: 100%;
  height: auto;
  max-width: 80px; /* oder wie es ins Layout passt */
}

/* SVG Logo */
#header svg {
  width: 100%;
  height: auto;
  max-width: 80px; /* oder wie es ins Layout passt */
  margin-top: 7px;
}

/* SVG Logo */
#header.sticky svg {
  width: 100%;
  height: auto;
  max-width: 40px; /* oder wie es ins Layout passt */
}

@media (max-width: 980px) {
#header svg {
      width: 100%;
      height: auto;
      max-width: 49px;
      margin-top: 7px;
    }
}
/* HEAFDER LEFT + LOGO */


/* HEADER MENU */
.header-menu {
    display: flex; /* Default flex layout */
    gap: 20px; /* Space between menu items */
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative; /* Needed for submenu positioning */
}

/* Style each menu item */
.header-menu li {
    margin: 0 15px; /* Space between menu items */
    position: relative;
}

/* Header Menu Links */
.header-menu a {
    color: #000; /* Link color */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 0px 10px;
    transition: color 0.3s;
    text-transform: uppercase;
    height: 98px;
    line-height: 98px;
}

/* Change link color on hover */
.header-menu a:hover {
    color: #ddd;
}
.header-menu a:focus {
    outline: 1px solid #999; /* Beispiel für eine auffällige Fokusfarbe */
}
/* Menu link adjustments for sticky mode */
#header.sticky .header-menu a {
    line-height: 60px; /* Adjust alignment for reduced header height */
    height: 60px;
}
#header.sticky .sub-menu a {
    height: 40px !important;
    line-height: 40px !important;
}
/* Add a symbol next to menu items that have submenus */
/* Add a Font Awesome arrow icon next to menu items that have submenus */
.header-menu li.menu-item-has-children > a::after {
    content: '\f078';  /* Font Awesome chevron-down icon */
    font-family: 'Font Awesome 5 Free';  /* Specify Font Awesome font family */
    font-weight: 900;  /* Make sure the icon is bold (required for some icons) */
    font-size: 12px;
    margin-left: 8px;  /* Space between the text and the symbol */
    transition: transform 0.3s ease;  /* Smooth transition for rotation */
}

/* Optional: Rotate the arrow when the parent item is hovered */
.header-menu li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);  /* Rotate the arrow on hover */
}


/* Style for submenus (hidden by default) */
/* Style for submenus */
.sub-menu {
    display: none;  /* Hide submenus by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    padding: 0;
    list-style: none;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.sub-menu.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Style for submenu items */
.sub-menu li {
    width: 200px;
    margin-bottom:5px;
    white-space: nowrap;
}
/* Header Menu Links */
.sub-menu a {
    height: 40px;
    line-height: 40px !important;
}
/* Show submenu on hover (desktop) */
.header-menu > li:hover > .sub-menu {
    display: block !important;
}

/* Style for the links */
.header-menu li a {
    display: block;
    text-decoration: none;
    color: #333;
}

.header-menu li a:hover {
    background-color: #ffffff;
}

/* Burger menu icon for mobile */

button.burger-menu {
    padding: 0px;
}
button.burger-menu {
    background-color: transparent;
}
.burger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 25px;
    z-index: 5000;
}
/* Menu link adjustments for sticky mode */
#burger.sticky {
   top: 10px;
}
.burger-menu span {
    display: block;
    height: 4px;  /* Make the lines a bit thicker */
    width: 100%;
    background: var(--primary-color); /* Set color of the burger lines (black) */
    border-radius: 2px;
    transition: 0.3s ease;
}
/* Burger menu active state (cross animation) */
.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.burger-menu.active span:nth-child(2) {
    opacity: 0;
}
.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile-specific styles */
@media (max-width: 1150px) {
.header-menu {
    gap: 5px; /* Space between menu items */
    }
/* Style each menu item */
.header-menu li {
    margin: 0 7px; /* Space between menu items */
    position: relative;
}
 .head_cobut {
     display: none !important
}
}
@media (max-width: 1200px) {
    .burger-menu {
    top: 75px;
    }
    .header-menu-nav {
            display: none; /* Hide header menu by default */
            flex-direction: column;
            position: absolute;
            top: 110px; /* Adjust based on header height */
            right: 0;
            width: 100%;
            background-color: #fff;
            padding: 20px;
            border-bottom: 2px solid #000;
        z-index: 9999
    }
    .header-menu-nav.sticky {
            top: 61px; /* Adjust based on header height */
    }
    
    .header-menu {
        display: block; /* Default flex layout */
    }
    
    .header-menu a {
        color: #000; /* Link color */
        text-decoration: none;
        font-size: 14px;
        padding: 0px 10px;
        transition: color 0.3s;
        text-transform: uppercase;
        height: 60px;
        line-height: 60px;
    }
    /* Style each menu item */

    /* Style each menu item */
    .header-menu li {
        margin: 0 4px; /* Space between menu items */
        position: relative;
        width: 100%;
        text-align: center
    } 
    
    .sub-menu {
    width: 100%;
    }
    
    .sub-menu li {
    width: 100%;
    margin-bottom:5px;
    white-space: nowrap;
    }
    
    .burger-menu {
        display: flex; /* Show burger menu on mobile */
    }

    .header-menu-nav.show {
        display: flex; /* Show the menu when burger is clicked */
    }

    /* Optional: Show submenus on mobile */
    .header-menu li.active > .sub-menu {
        display: block;
        position: static; /* Make submenu positioning relative to the li in mobile */
    }
    
    .logo {
        width: 260px;
        height: auto;
    }
    a.custom-logo-link {
    max-width: 260px;
    }
    a.custom-logo-link img {
        max-width: 260px !important;
        width: auto;
        height: auto; /* Ensures aspect ratio is maintained */
    }
    
    




}

@media (max-width: 800px) {
        .burger-menu {
    top: 60px;
    }
        #header {
        height: 70px;
    }
    #header .container {
        height: 70px;
    }
.logo {
        width: 170px;
        height: auto;
    }
    a.custom-logo-link {
    max-width: 170px;
    }
    a.custom-logo-link img {
        max-height: 70px;
        max-width: 170px !important;
        width: auto;
        height: auto; /* Ensures aspect ratio is maintained */
    }
}



/* Reset ::before on <a> tags and parent elements */
.menu-item > a:before,
.menu-item:before {
    content: none !important;
    display: none !important;
}

/* Ensure only <i> tags inside menu items use ::before */
.menu-item i.fa:before {
    content: "\f0ac"; /* Replace with the correct glyph code */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Required for solid icons */
    display: inline-block; /* Prevent layout issues */
}

/* Ensure icons are displayed inline */
.menu-item i[data-feather],
.menu-item i.fa {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px; /* Add spacing between icon and text */
}

/* Adjust icon size */
.menu-item i[data-feather],
.menu-item i.fa {
    width: 16px;
    height: 16px;
}

/* -------------------------------------------------------------------------------- */
/*	4.	FOOTER
/* -------------------------------------------------------------------------------- */

footer {
	width: 100%;
	text-align:center;
	padding: 40px 0;
	font-size:14px;
    background-color: #000;
	}

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    text-align: left;
    justify-content: space-between;
}

.footer-widget {
    color: #fff;
}
.footer-widget a {
    color: #fff;
}
.footer-widget-title {
    color: #fff;
    margin-bottom: 15px;
}

/* Column styling for footer widgets */
footer .col-3 {
    flex: 1 1 23% !important;
    padding: 10px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    footer .col-3 {
        flex: 1 1 48% !important;
        margin-bottom: 40px
    }
}
@media (max-width: 768px) {
    footer .col-3 {
        flex: 1 1 100% !important;
    }
    .footer-widget {
        text-align: center !important;
    }
    .footer-widget img {
        margin:0 auto !important;
    }
}



.copyright_footer {
	font-size:14px;
    color: #666;
    margin: 0 auto;
	}
.copyright_footer a {
    color: #666;
	text-decoration:none;
	}
.copyright_footer-bar p {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap; /* optional for better mobile behavior */
	}
.copyright_footer-bar-right {
  margin-left: auto;
}


/* Back to Top Button Styles */
/* Back to Top Button Styles */
.back-to-top-button {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    background-color: #000000; /* WordPress blue */
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 18px; /* Adjust font size for the icon */
    text-decoration: none;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
}

.back-to-top-button:hover {
    background-color: #999999; /* Darker blue on hover */
}

.back-to-top-button.show {
    display: block; /* Show the button when needed */
}

/* -------------------------------------------------------------------------------- */
/*	5.	CONTENT
/* -------------------------------------------------------------------------------- */

main {
	margin:0 auto;
    margin-top: 80px; 
	padding:0 20px;
	max-width:100%;
	}

#content {
   /* transition: padding-top 0.3s ease;  Smooth transition for padding */
}

.post-grid {
    display: flex; /* Use flexbox to create a responsive layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 20px; /* Space between the items */
    margin: 0 auto; /* Center the grid */
    max-width: 1200px; /* Set a max width for the grid */
    padding: 20px; /* Add some padding around the grid */
}

.post-item {
    flex: 1 1 calc(25% - 20px); /* 4 items per row (25% width minus the gap) */
    box-sizing: border-box; /* Include padding and border in width/height calculations */
    border: 1px solid #ddd; /* Optional: add a border around each item */
    padding: 10px; /* Add some padding inside each item */
    background: #fff; /* Optional: set background color */
}

/* Optional: Add some responsive design for smaller screens */
@media (max-width: 1024px) {
    .post-item {
        flex: 1 1 calc(33.33% - 20px); /* 3 items per row on medium screens */
    }
}

@media (max-width: 768px) {
    .post-item {
        flex: 1 1 calc(50% - 20px); /* 2 items per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .post-item {
        flex: 1 1 100%; /* 1 item per row on very small screens */
    }
}

.entry-thumbnail a {
    display: inline-block; /* Ensures the link is treated as a block for padding/margins */
}

.entry-thumbnail img {
    transition: transform 0.3s; /* Smooth scaling on hover */
}

.entry-thumbnail a:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}



.widget footer {
    background-color: transparent;
        padding: 10px 0;
}
/* widget search */
.wp-block-search__inside-wrapper {
  display: flex;             /* sorgt dafür, dass Input + Button nebeneinander sauber ausgerichtet sind */
  align-items: stretch;      /* beide gleich hoch */
}

input.wp-block-search__input {
  padding: 12px 14px;        /* etwas angepasster Wert */
  border: 1px solid #ccc;    /* optional: Rahmen fürs Input */
  flex: 1;                   /* Input nimmt den Platz auf */
  font-size: 1em;
  box-sizing: border-box;    /* damit Padding nicht die Höhe sprengt */
}

.wp-block-search__button {
  background-color: #5472d2;
  color: #fff;
  border: none;
  padding: 0 20px;           /* nur links/rechts padding, Höhe übernimmt Flexbox */
  cursor: pointer;
  font-size: 1em;
  display: flex;             /* Text mittig vertikal */
  align-items: center;
}


/* -------------------------------------------------------------------------------- */
/*	6.	HELPER
/* -------------------------------------------------------------------------------- */

/* HELPER */
.clearer {
	clear: both;
	height: 0;
	font-size: 0;
	line-height: 0;
	margin: 0;
	padding: 0
}
.mae_left {
	float: left
}
.mae_right {
	float: right
}
.mae_center{
	text-align:center;
    margin: 0 auto;
}
.mae_center img{
	display: inline-block;
}
.space5 {
	height: 5px;
	display: block;
    width: 100%;
	clear: both;
}
.space10 {
	height: 10px;
	display: block;
    width: 100%;
	clear: both;
}
.space15 {
	height: 15px;
	display: block;
    width: 100%;
	clear: both;
}
.space20 {
	height: 20px;
	display: block;
    width: 100%;
	clear: both;
}
.space30 {
	height: 30px;
	display: block;
    width: 100%;
	clear: both;
}
.space40 {
	height: 40px;
	display: block;
    width: 100%;
	clear: both;
}
.space50 {
	height: 50px;
	display: block;
    width: 100%;
	clear: both;
}
.space60 {
	height: 50px;
	display: block;
    width: 100%;
	clear: both;
}
.space80 {
	height: 80px;
	display: block;
    width: 100%;
	clear: both;
}
.space100 {
	height: 100px;
    display: block;
    width: 100%;
	clear: both;
}

.paddbotnull {
	padding-bottom: 0px;
}
.padd5 {
	padding: 5px;
}
.padd10 {
	padding: 10px;
}
.padd15 {
	padding: 15px;
}
.padd20 {
	padding: 20px;
}
.padd30 {
	padding: 30px;
}
.padd30_left {
	padding-left: 30px;
}
.padd30_left_top {
	padding-left: 30px;
    padding-top: 30px;
}
.padd40 {
	padding: 40px !important;
}
.padd50 {
	padding: 50px;
}
.paddtono {
	padding-top: 0px !important;
}
.mar5 {
	margin: 5px;
}
.mar10 {
	margin: 10px;
}
.mar15 {
	margin: 10px;
}
.mar20 {
	margin: 20px;
}
.mar30 {
	margin: 30px;
}
.mar40 {
	margin: 40px;
}
.mar50 {
	margin: 50px;
}
.matopat_no {
    margin-top: 0px;
    padding-top: 0px
}
.mabo_no {
    margin-bottom: 0px !important;
}
.mabo_10 {
    margin-bottom: 10px !important;
}
.mabo_15 {
    margin-bottom: 15px !important;
}
.hunni {
	width: 100% !important
}
.divider {
	height: 2px;
	border-bottom: 1px solid #ededed;
	width: 100%;
	cear: both
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.hide {
    display:none;
    visibility: hidden;
}


.nono h1, .nono h2, .nono h2, .nono h4 {padding:0px; margin: 0px} 

.mae_full {
    width: 100% !important; /* Set the width to 100% of the viewport width */
    position: relative; /* Needed for positioning adjustments */

    box-sizing: border-box; /* Include padding and borders in the width calculation */
}


.mob_yes {display: none}
.mob_no {display: block}

@media (max-width: 1024px) {
.mob_yes {display: block}
.mob_no {display: none}
}

/* HELPER */
/* -------------------------------------------------------------------------------- */
/*	7.	CUSTOM BLEEPS & KLONKS
/* -------------------------------------------------------------------------------- */
h2, h3 {
    /* position: relative;  Needed for positioning elements */
    /* padding-left: 15px;  Add spacing between the border and text */
    /* border-left: 5px solid #0073aa; /* Add a left border with a color */
    /* display: inline-block; /* Ensure the border only spans the text width */
}


.video_text {min-height:50px}

.start_text {max-width:1024px; margin: 0 auto; text-align: center}
.ue_3 { margin-top:0px; margin-bottom:10px !important }
.ue_3 h3 { font-size: 1.1em; font-weight: 600; line-height: 1.1; margin-top:0px; margin-bottom:0px }

.large_header_text { font-size: 2.55em; font-weight: 700; line-height: 1.2; }
.lei_box {
    padding:30px;
    background-color: var(--background-color);
}
.lei_box h3, .lei_box h2 {margin-top:0px}

.entry-header h1,.entry-header h2 {margin: 0px 0 25px;}
.footer-widgets h2, .footer-widgets h3 {margin: 0px 0 25px;}

.white_text {color:#FFFFFF !important}

.mae-bgimg {
  /* background-image: url('http://commonsensefreiburg.de/wp-content/uploads/2025/05/para.jpg'); Replace with your image path */
  background-position: center center; /* initial position */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll; /* JS handles the movement */
  width: 100%;
  will-change: background-position;
}


a.mae_fullbut {
    padding:10px;
    text-align:center;
    display:block;
    width:100%;
    background-color: var(--primary-color);
    color:#FFF !important;
    text-decoration: none;
	
}
a.mae_fullbut:hover {
    background:#a80027;
    color:#FFF !important;
}
a.mae_fullbut:visited {
    color:#000 !important;
}
a.mae_fullbut:visited:hover {
    background:#000;
    color:#FFF !important;
}

a.mae_fullbut > span.buttontext {
    font-size: 20px;
    font-weight:600;
    color:#FFF !important;
}

a.mae_fullbut > span.buttonsubline {
    font-size: 15px;
    font-weight:400;
    color:#FFF !important;
}

.bora_5 {
    border-radius: 5px
}
/*  box  */


/* Floating button styles */
 #floatingButton {
    position: fixed;
    top: 100px;
    right: 0;
    width: 30px;
    height: auto;
    background-color: #5472d2;
    color: white;
    border: none;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: right 0.3s;
    z-index: 1000;
}

/* Expanded state */
#floatingButton.expanded {
    right: 200px; /* Adjust this value based on the width of the expanded content */
}

/* Hidden phone number container */
#phoneNumberContainer {
    position: fixed;
    top: 100px;
    right: -200px; /* Start hidden off-screen */
    width: 200px; /* Adjust width as needed */
    background-color: #5472d2;
    color: white;
    padding: 10px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    transition: right 0.3s;
    z-index: 999;
}

/* Show the phone number container when expanded */
#floatingButton.expanded + #phoneNumberContainer {
    right: 0;
}

/* Phone number link styles */
#phoneNumberContainer a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
}

.current-language-menu-item > a {
    pointer-events: none;
    cursor: default;
}



/* Popup container */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 6000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

/* Popup content */
.popup-content {
    background-color: #fff;
    margin: 10% auto; /* Center vertically */
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width:640px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.popup-content p {
    line-height: 34px !important;
}

/* Close button */
.close {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}






/* CUSTOMER RELATED */
/* -------------------------------------------------------------------------------- */
/*	8.	Kundenspezifische  CSS
/* -------------------------------------------------------------------------------- */



span.mec-label-normal {
    color:#000 !important;
    font-size:16px !important;
    font-weight:bold !important;
}

.footer-widget .wp-image-179  {
    width:100px;
}



.custom-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      list-style: none;
      padding: 0;
    }

    .custom-list li::before {
      content: "✔";
      color: green;
      margin-right: 0.5em;
    }

    .custom-list li {
      margin-bottom: 0.5em;
     font-size: 18px; font-weight: 600
    }

@media (max-width: 992px) {
    .custom-list {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1rem;
      list-style: none;
      padding: 0;
    }
}

/* CUSTOMER RELATED */






/******************* TRANSLATE PRESS CSS für Popup (löchen für Menüeintrag) *********************/

/* General Reset for the Language Switcher */
.trp_language_switcher_shortcode {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between languages */
}

/* Remove dropdown container styling */
.trp-language-switcher {
    height: auto !important; /* Reset height */
    width: auto !important; /* Reset width */
    position: static !important; /* Disable relative positioning */
    border: none !important; /* Remove borders */
    background: none !important; /* Remove background */
    padding: 0 !important; /* Remove padding */
    margin: 0 auto;
}

/* Hide the current language container */
.trp-ls-shortcode-current-language {
    display: none !important; /* Hide the current language */
}

/* Ensure all languages are displayed inline */
.trp-ls-shortcode-language {
    display: flex !important; /* Force inline display */
    flex-direction: row !important; /* Ensure horizontal alignment */
    visibility: visible !important; /* Ensure visibility */
    position: static !important; /* Disable absolute positioning */
    overflow: visible !important; /* Disable overflow */
    height: auto !important; /* Reset height */
    max-height: none !important; /* Remove max-height restriction */
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    width: auto !important;
}

/* Style each language link */
.trp-ls-shortcode-language a {
    display: flex !important; /* Align flag and text horizontally */
    align-items: center; /* Center-align items vertically */
    gap: 5px; /* Add spacing between flag and text */
    text-decoration: none; /* Remove underline */
    color: #333; /* Set text color */
    font-size: 14px; /* Adjust font size */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 5px 10px; /* Add padding for better spacing */
    border-radius: 4px; /* Add rounded corners */
    background-color: #f9f9f9 !important;
    margin: 5px;
}

/* Hover effect for language links */
.trp-ls-shortcode-language a:hover {
    background-color: #f0f0f0; /* Add hover effect */
    text-decoration: underline; /* Underline on hover */
}

/* Style the flag images */
.trp-ls-shortcode-language img {
    display: inline-block !important; /* Ensure flags are visible */
    width: 16px !important; /* Standardize flag size */
    height: 16px !important; /* Standardize flag size */
    vertical-align: middle; /* Align flags with text */
    margin: 0 !important; /* Remove unnecessary margins */
    padding: 0 !important; /* Remove unnecessary padding */
    border: none !important; /* Remove borders */
}

/* Ensure inline display during hover */
.trp-language-switcher-container:hover .trp-ls-shortcode-language {
    display: flex !important; /* Override inline-block */
    flex-direction: row !important; /* Ensure horizontal alignment */
    visibility: visible !important; /* Ensure visibility */
    position: static !important; /* Disable absolute positioning */
    overflow: visible !important; /* Disable overflow */
}

/* Highlight the active language (if needed) */
.trp-ls-shortcode-disabled-language {
    font-weight: bold;
    color: #0073aa; /* Change to your desired color */
}

.trp-language-switcher > div {
    border: 0px;
    border-radius: 0px;
}

/* Highlight the active language */
.trp-ls-shortcode-disabled-language {
    font-weight: bold; /* Make the text bold */
    color: #0073aa; /* Change to your desired color */
    position: relative; /* Needed for pseudo-elements */
    padding-right: 20px; /* Add space for the arrow */
}

.trp-ls-shortcode-disabled-language:hover {
    text-decoration: none !important; /* Make the text bold */
}

/* Add an arrow indicator after the active language 
.trp-ls-shortcode-disabled-language::after {
   content: '▼';
    position: absolute;
    right: 50%; 
    top: 2px; 
    transform: translateY(-50%); 
    font-size: 18px; 
    color: #999999; 
}
*/

/* Optional: Add a border around the active language */
.trp-ls-shortcode-disabled-language {
    border: 2px solid #999; /* Add a border */
    border-radius: 4px; /* Rounded corners */
    padding: 5px 10px; /* Add padding for better spacing */
}

/* Media Query for Screens Narrower Than 600px */
@media (min-width: 100px) {
    .trp-ls-shortcode-language {
        flex-wrap: wrap !important; /* Allow languages to wrap */
        justify-content: space-between; /* Distribute languages evenly */
    }

    .trp-ls-shortcode-language a {
        flex-basis: calc(50% - 10px); /* Two languages per line with spacing */
        box-sizing: border-box; /* Include padding in width calculation */
    }
}