/* Grundlayout */
:root {
	--p1: 0, 0, 0;
	--p3: 212, 160, 23;
	--p4: 0, 0, 0;
	--p7: 255, 255, 255;
	--p8: 0, 0, 0;
}

:root .dark {
	--p3: 255, 221, 102;
	--p4: 255, 255, 255;
	--p7: 13, 16, 23;
	--p8: 255, 255, 255;
}

.p3-color {
  color: rgba(var(--p3), 1) !important;
}

.p4-color {
  color: rgba(var(--p4), 1) !important;
}

.bg7-color {
  background-color: rgba(var(--p7), 1) !important;
}

.p8-color {
  color: rgba(var(--p8), 1) !important;
}

/* --- GLOBALE VARIABLEN --- */
:root {
  --main-bg: #ffffff;
  --main-text: #222222;
  --main-bg1: #d4d4d4;
  --main-text1: #222222;
}

/* Dark Mode überschreibt NUR die Werte der Variablen */
body.dark {
  --main-bg: #121212;
  --main-text: #ffffff;
  --main-bg1: #1e1e1e;
  --main-text1: #ffffff;
}

/* --- SEKTIONS-STYLING --- */
.bg-main {
  background-color: var(--main-bg) !important;
  color: var(--main-text) !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.bg-main1 {
  background-color: var(--main-bg1) !important;
  color: var(--main-text1) !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* --- ELEMENTE-FORCE --- */
/* Statt 'inherit' weisen wir allen generierten CMS-Elementen direkt die Text-Variable zu. */
/* Das greift garantiert im Light- UND Dark-Mode gleichermaßen. */
.bg-main,
.bg-main div,
.bg-main a,
.bg-main p,
.bg-main span,
.bg-main strong,
.bg-main ul li,
.bg-main h1,
.bg-main h2,
.bg-main h3,
.bg-main h4,
.bg-main h5,
.bg-main h6 {
  color: var(--main-text); /* Nutzt direkt die aktive Variable */
}

.bg-main1,
.bg-main1 div,
.bg-main1 p,
.bg-main1 span,
.bg-main1 strong,
.bg-main1 h1,
.bg-main1 h2,
.bg-main1 h3,
.bg-main1 h4,
.bg-main1 h5,
.bg-main1 h6 {
  color: var(--main-text1); /* Nutzt direkt die aktive Variable */
}
/* --- AUSNAHMEN FÜR ADMIN-FARBEN --- */
.bg-main [style*="color"],
.bg-main [class*="-color"],
.bg-main1 [style*="color"],
.bg-main1 [class*="-color"] {
  color: initial !important; 
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #fff;
}

/* Header */
.header {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.35s ease, height 0.35s ease;
}

.header-inner {
    background: #fff6;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
    max-width: 1400px;
    margin: auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header.scroll-up {
    top: 0px;
}

.header.scroll-up .header-inner {
    border-radius: 0 !important;
}

/* Header normale Höhe */
.header {
    height: 120px;
}

/* Header geschrumpft */
.header.shrink {
    height: 100px;
    background: #fff6; /* gleiche Farbe wie header-inner */
    backdrop-filter: blur(10px);
}

.logo img {
    height: 92px;
    transition: height 0.35s ease, transform 0.35s ease;
}

.header.shrink .logo img {
    height: 70px;
	transition: 0.3s ease;
    /*transform: translateY(-4px);*/
}

.header.shrink .logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(255, 200, 0, 0.7));
}

.header-inner {
    background: #fff6;
    transition: background 0.35s ease;
}

.header.shrink .header-inner {
	box-shadow: none;
    background: transparent;
}

.header.shrink .nav-wrapper {
    padding: 6px 18px;
    backdrop-filter: blur(6px);
}

.header.shrink {
    box-shadow: 0 0 18px rgba(255, 200, 0, 0.35);
}

/* LOGO */
.logo img {
    height: 92px;
    transition: 0.3s ease;
}

.logo:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(255, 200, 0, 0.7));
}

/* Navigation Wrapper */
.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #ffffff;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1px solid #ffb300; /* Goldene Linie oben */
    filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.7));
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 35px;
}

/* Jeder Menüpunkt */
.nav-item {
    position: relative; /* WICHTIG */
}

/* Links */
.nav a {
    text-decoration: none;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
    padding: 10px 0;
    display: flex;
    align-items: center;
    position: relative;
}

/* Caret Icon */
.nav-item > a i {
    font-size: 0.9rem;
    margin-left: 6px;
    color: #d4a017; /* Gold */
    transition: 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.nav-item:hover > a i {
    transform: translateY(2px);
}

/* Goldene Hover-Linie über dem Link */
.nav a::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #d4a017 0%, #ff4444 50%, #d4a017 100%);
    box-shadow: 0 0 2px #ff0000;
    transition: 0.3s;
    border-radius: 3px;
}

.nav-item:hover > a::after {
    width: 100%;
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    padding: 10px 0;
    flex-direction: column;

    width: max-content;
    min-width: 180px;
    max-width: 260px;

    z-index: 999;

    /* Animation Startzustand */
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    /* Animation */
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Dropdown anzeigen */
.nav-item:hover .dropdown,
.dropdown:hover {
    display: flex;
}

.nav-item:hover .dropdown,
.dropdown:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Dropdown Links */
.dropdown a {
    padding: 10px 20px;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
}

.dropdown a:hover {
    background: #f7f7f7;
    color: #d4a017;
}

/* Linie für Dropdown-Links separat */
.dropdown a::after {
    top: 0px !important;
    height: 2px;
    background: linear-gradient(90deg, #d4a017 0%, #ff4444 50%, #d4a017 100%);
    box-shadow: 0 0 2px #ff0000;
}

/* Kontakt Button – Weiß + Gold */
.kontakt-btn {
    padding: 8px 22px !important;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    color: #d4a017 !important;
    border: 2px solid #d4a017;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,240,240,0.85));
    box-shadow: 0 0 6px rgba(255,255,255,0.6) inset;
    transition: 0.3s ease;
}

/* Kontakt bekommt KEINE Linie */
.kontakt-btn::after {
    content: none !important;
}

/* Standard */
.kontakt-btn .kontakt-icon {
    display: none;
}

.kontakt-btn .kontakt-text {
    display: inline;
}

.kontakt-btn:hover {
    /*background: linear-gradient(180deg, #ffe9b3, #ffd26a);*/
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
    transform: translateY(-1px);
}

@media (max-width:580px){

    .kontakt-btn {
        width:40px;
        height:40px;
        padding:0 !important;
        border-radius:50%;

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .kontakt-btn .kontakt-text{
        display:none;
    }

    .kontakt-btn .kontakt-icon{
        display:block;
        font-size:1.3rem;
    }

}

/* Toggle & Lupe – gleiche Optik */
.toggle,
.search-icon,
.kontakt-btn.mobile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* innerer Glanz */
    box-shadow: 0 0 6px rgba(255,255,255,0.6) inset;

    transition: 0.3s ease;
}

/* Hover-Effekt */
.toggle:hover,
.search-icon:hover {
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
    transform: scale(1.05);
}

/* Lupe Symbol etwas größer */
.search-icon a {
    font-size: 1.3rem;
    color: #d4a017;
}

.toggle {
    font-size: 1.3rem;
    color: #d4a017;
}

body.dark {
    background: #000;
}

body.dark .header-inner {
    background: #252525b0;
    box-shadow: 0 0 25px rgba(255,255,255,0.1);
}

body.dark .header.shrink {
    background: #1118;
}

body.dark .header.shrink .header-inner {
    background: transparent;
}

body.dark .header.shrink .logo img {
    filter: drop-shadow(0 0 8px rgba(255,200,0,0.5));
}

body.dark .nav-wrapper {
    background: #222;
    border: 1px solid #d4a017; /* Gold */
    filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.7));
}

body.dark .nav a {
    color: #eee;
}

body.dark .nav a::after {
background: linear-gradient(90deg, #d4a017 0%, #ff4444 50%, #d4a017 100%);
box-shadow: 0 0 2px #ff0000 !important;
}

body.dark .nav-item > a i {
    color: #ffdd66;
}

body.dark .dropdown {
    background: #222;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

body.dark .dropdown a {
    color: #eee;
}

body.dark .dropdown a:hover {
    background: #333;
    color: #ffdd66;
}

.kontakt-btn,
.kontakt-btn .kontakt-text,
.kontakt-btn .kontakt-icon{
    color: inherit;
}

body.dark .kontakt-btn {
    background: linear-gradient(180deg, #333, #222);
    color: #ffdd66 !important;
    border: 2px solid #ffdd66;
    box-shadow: 0 0 6px rgba(255,255,255,0.2) inset;
}

body.dark .kontakt-btn:hover {
    /*background: linear-gradient(180deg, #d4a017, #ffdd66);*/
    color: #000;
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
}

body.dark .toggle,
body.dark .search-icon {
    background: #333;
    box-shadow: 0 0 6px rgba(255,255,255,0.2) inset;
    color: #ffdd66;
}

body.dark .toggle:hover,
body.dark .search-icon:hover {
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
}

body.dark .search-icon,
body.dark .search-icon a,
body.dark .search-icon i,
body.dark .toggle {
    color: #ffdd66;
}

@media (max-width: 500px) {

    .search-icon {
        display: none;
    }
	
    .nav-wrapper {
        gap: 8px;
    }

    .logo img {
        max-height: 70px;
    }

}

body.dark .logo img {
    filter: drop-shadow(0 0 12px rgba(255, 200, 0, 0.7));
}

.toggle i {
    transition: 0.3s ease;
}

body.dark .toggle i {
    transform: rotate(360deg);
}

@media (max-width: 1199px) {
    .nav {
        display: none;
    }
}

.mc-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eee;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    transition: 0.3s ease;
    box-shadow: 0 0 6px rgba(255,255,255,0.6) inset;
}

.mc-mobile-toggle span {
    width: 22px;
    height: 3px;
    background: #d4a017;
    border-radius: 3px;
    transition: 0.3s ease;
}

.mc-mobile-toggle:hover {
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
    transform: scale(1.05);
}

@media (max-width: 1199px) {
    .mc-mobile-toggle {
        display: flex;
    }
}

body.dark .mc-mobile-toggle {
    background: #333;
    box-shadow: 0 0 6px rgba(255,255,255,0.2) inset;
}

body.dark .mc-mobile-toggle span {
    background: #ffdd66;
}

.mc-mobile-nav {
    display: none;
    position: fixed;
    top: 120px; /* unter dem Header */
    left: 0;
    width: 100%;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 999;
}

body.dark .mc-mobile-nav {
    background: #222;
}

.mc-mobile-nav .dropdown {
    display: none;
    flex-direction: column;
    padding-left: 10px;
}

.mc-mobile-nav .dropdown.open {
    display: flex;
}

.mc-mobile-nav .nav-item i {
    transition: 0.3s ease;
}

.mc-mobile-nav .nav-item i.open {
    transform: rotate(180deg);
}

.mc-mobile-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mc-mobile-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mc-mobile-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 1199px) {

    /* Desktop-Hover-Effekte komplett deaktivieren */
    #mcMobileNav .nav-item:hover .dropdown,
    #mcMobileNav .nav-item:focus .dropdown,
    #mcMobileNav .nav-item:active .dropdown {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Desktop-Regeln überschreiben, die Dropdowns verstecken */
    #mcMobileNav .dropdown {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 1199px) {
    #mcMobileNav .dropdown {
        position: static !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        max-height: none !important;
    }

	.nav a::after {
		height: 0;
		background: none;
	}
}

/* =========================
   Header (Mobile)
   ========================= */
@media (max-width: 1199px) {

    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        transition: top 0.35s ease, height 0.35s ease;
    }

    .header-inner {
        max-width: 100%;
        border-radius: 0;
    }

    /* Desktop-Navigation ausblenden */
    .nav {
        display: none;
    }
}

/* =========================
   Mobile-Container (#mcMobileNav)
   ========================= */
@media (max-width: 1199px) {

    #mcMobileNav {
        position: fixed;
        left: 0;
        width: 100%;
        top: 120px;
        height: calc(100vh - 120px);   /* feste Box-Höhe */
        overflow-y: auto;              /* EIN Scrollcontainer */
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 9999;
        display: none;
    }

    body.dark #mcMobileNav {
        background: #222;
    }

    /* geschrumpfter Header */
    body.header-shrink #mcMobileNav {
        top: 92px;
        height: calc(100vh - 92px);    /* feste Box-Höhe im Shrink-Zustand */
    }
}

/* =========================
   Navigation im Mobile (#mcMobileNav .nav)
   ========================= */
@media (max-width: 1199px) {

    #mcMobileNav .nav {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 18px;
        overflow: visible !important;  /* keine eigene Scrollbox */
        max-height: none !important;
    }

    #mcMobileNav .nav > li,
    #mcMobileNav .nav-item {
        width: 100%;
    }

    #mcMobileNav .nav a {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px 0;
        font-size: 16px;
    }

    /* Hover ohne Linie */
    #mcMobileNav .nav a:hover {
        background: rgba(0,0,0,0.05);
    }

    html[data-bs-theme="dark"] #mcMobileNav .nav a:hover {
        background: rgba(255,255,255,0.08);
    }

    /* Linie aus Desktop-Navigation im Mobile komplett deaktivieren */
    #mcMobileNav .nav-link::after,
    #mcMobileNav .nav-item::after {
        content: none !important;
        display: none !important;
    }
}

/* =========================
   Dropdown im Mobile
   ========================= */
@media (max-width: 1199px) {

    #mcMobileNav .dropdown {
        position: static !important;
        display: none;
        flex-direction: column;
        gap: 6px;
        padding-left: 14px;

        /* KEINE eigene Höhe, KEIN Scrollcontainer */
        max-height: none !important;
        overflow: visible !important;

        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    #mcMobileNav .dropdown.open {
        display: flex !important;
    }
}

@media (max-width: 1199px) {
    #mcMobileNav .nav-item:hover .dropdown,
    #mcMobileNav .nav-item:focus .dropdown,
    #mcMobileNav .nav-item:active .dropdown {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #mcMobileNav .dropdown {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Light Mode */
html[data-bs-theme="light"] #mcMobileNav::-webkit-scrollbar {
    width: 8px;
}
html[data-bs-theme="light"] #mcMobileNav::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
}
html[data-bs-theme="light"] #mcMobileNav::-webkit-scrollbar-track {
    background: #f2f2f2;
}

/* Dark Mode */
html[data-bs-theme="dark"] #mcMobileNav::-webkit-scrollbar {
    width: 8px;
}
html[data-bs-theme="dark"] #mcMobileNav::-webkit-scrollbar-thumb {
    background: #39ff14;
    border-radius: 4px;
}
html[data-bs-theme="dark"] #mcMobileNav::-webkit-scrollbar-track {
    background: #000000;
}


.fs-one, h1, h1 > a {
	font-size: 20px;
	line-height: 100%;
}

.ph-thin.ph-hand-heart::before,
.ph-light.ph-hand-heart::before,
.ph.ph-hand-heart::before,
.ph-bold.ph-hand-heart::before {
	content: "\e810";
	font-size: 18px;
}

/* Gemeinsame Basis-Stile */
.hero-in-main {
  color: #000;
  background: rgba(255, 255, 255, 0.4); /* Sehr transparenter weißer Hintergrund */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* Minimaler Schatten */
  transition: background 0.35s ease;
  border-radius: 10px;
  padding: 10px;
}

/* Dark Mode Overrides */
body.dark .hero-in-main {
  color: #fff;
  background: rgba(37, 37, 37, 0.4); /* Sehr transparenter dunkler Hintergrund */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.03); /* Minimaler heller Schatten */
}

.hot-wrapper {
	display: flex;
	align-items: center;
	gap: 22px;
	background: #ffffff;
	padding: 10px 22px;
	border-radius: 50px;
	border: 1px solid #ffb300;
	filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.7));
}

body.dark .hot-wrapper {
	background: #222;
	border: 1px solid #d4a017;
	filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.7));
}

.hero_hot {
	max-width: -moz-max-content;
	max-width: max-content;
	background-color: #fff;
}

body.dark .hero_hot {
	max-width: -moz-max-content;
	max-width: max-content;
	background-color: #222;
}
/* Footer Middle */
/* Verwandelt die Footer-Links in Flex-Boxen für perfekte Ausrichtung */
.col-md-2 p, .col-md-3 p {
    display: flex;
    align-items: center;
}

/* Setzt einen eleganten, goldenen Pfeil vor jeden Link */
.col-md-2 p a::before, 
.col-md-3 p a::before {
    content: "›"; /* Edles Pfeilzeichen */
    font-size: 1.3rem;
    line-height: 1;
    margin-right: 8px;
    color: #d4a017; /* Ihre Gold/Corporate-Farbe */
    transition: transform 0.2s ease;
    display: inline-block;
}

/* Kleiner Animationseffekt: Pfeil rückt beim Drüberfahren leicht nach rechts */
.col-md-2 p a:hover::before, 
.col-md-3 p a:hover::before {
    transform: translateX(3px);
    color: #ffdd66; /* Hellere Farbe im Hover (analog zu Ihrem Code) */
}

.footer-top {
	background: #ffffff;
}

body.dark .footer-top {
	background: #222;
}

.footer-top span,
.footer-middle span,
.footer-middle h6,
.footer-middle p,
.footer-middle a {
    color: #0d1017 !important;
}

body.dark .footer-top span,
body.dark .footer-middle span,
body.dark .footer-middle h6,
body.dark .footer-middle p,
body.dark .footer-middle a {
    color: #eee !important;
}

.bg-main a:hover,
.footer-middle a:hover {
    color: #d4a017 !important;
}

body.dark .bg-main a:hover,
body.dark .footer-middle a:hover {
    color: #ffdd66 !important;
}

body.dark.footer-middle {
	background: #222;
}


.footer-middle {
	background: #ffffff;
	border-top: 1px solid #ffb300;
	filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.7));
}

body.dark .footer-middle {
	background: #222;
	border-top: 1px solid #d4a017;
	filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.7));
}

.footer-middle img,
body.dark .footer-middle img {
	max-width: 100%;
	max-height: 50px;
	width: auto;
}

/* 1. GRUNDEINSTELLUNG (Standard / Light Mode) */
/* Zeige das dunkle Logo auf weißem Grund, verstecke das helle Logo */
a.logo-dark {
    display: inline-block !important;
    background: transparent !important; /* Sicherungskopie für Transparenz */
}
a.logo-light {
    display: none !important;
}

/* 2. AUTOMATISCHE UMKEHRUNG BEI DARK MODE */
/* Wenn body die Klasse .dark hat oder Bootstrap greift: zeige helles Logo */
[data-bs-theme="dark"] a.logo-dark,
body.dark a.logo-dark,
body.dark-mode a.logo-dark {
    display: none !important;
}

[data-bs-theme="dark"] a.logo-light,
body.dark a.logo-light,
body.dark-mode a.logo-light {
    display: inline-block !important;
    background: transparent !important; /* Sicherungskopie für Transparenz */
}
  
/* Footer Bottom */
.footer-bottom span,
.footer-bottom a {
    color: #0d1017 !important;
}

body.dark .footer-bottom span,
body.dark .footer-bottom a {
    color: #eee !important;
}

.footer-bottom a:hover {
    color: #d4a017 !important;
}

body.dark .footer-bottom a:hover {
    color: #ffdd66 !important;
}

.footer-bottom {
    background: #ffffff;
	border-top: 1px solid #ffb300;
}

body.dark .footer-bottom {
    background: #0d1017;
}

.process_icon_bg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f0f0f0;
}

/* Container für die 3 Karten */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Abstand zwischen den Karten */
  justify-content: center;
  width: 100%;
}

/* Einzelne Karte */
.team-card {
  flex: 1 1 calc(33.333% - 20px); /* 3 Spalten Layout minus Gap-Anteil */
  min-width: 280px; /* Verhindert, dass Karten auf Tablets zu quetschen */
  max-width: 380px; /* Begrenzt die maximale Breite analog zu Ihrem Beispiel */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px; /* Optionale leichte Rundung der Karte */
}

/* Bild-Container mit goldenem Rahmen und Schatten */
.team-card__image-wrapper {
  position: relative; /* Wichtig für den Glanz-Effekt */
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  
  /* Kräftigeres, glänzenderes Gold */
  border: 3px solid #ffd700; /* Reines Gold */
  
  /* Intensivierter Schatten für mehr Tiefe */
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
  
  /* Fix gegen das Verschwinden des Rahmens beim Hover */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Das eigentliche Bild */
.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block; /* Verhindert winzige Abstände unten */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- DER GLANZ-EFFEKT (Overlay) --- */
.team-card__image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Startet unsichtbar weit links außerhalb des Bildes */
  width: 100%;
  height: 100%;
  /* Ein schräger, weiß-transparenter Lichtstrahl */
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.4) 50%, /* Der helle Lichtreflex */
    rgba(255, 255, 255, 0.03) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); /* Schräger Lichtstrahl */
  transition: left 0.6s ease-in-out;
  pointer-events: none; /* Macht das Overlay für Klicks unsichtbar */
}

/* --- HOVER-EFFEKTE (Beim Drüberfahren) --- */

.team-card:hover .team-card__image-wrapper {
  /* Verwende translate3d statt translateY für fehlerfreies Rendering im Browser */
  transform: translate3d(0, -5px, 0);
  border-color: #fff; /* Rahmen blitzt kurz hell/weißgold auf */
  box-shadow: 0 15px 35px rgba(255, 215, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
}

.team-card:hover .team-card__image {
  transform: scale(1.04); /* Minimal sanfterer Zoom schont den Rahmen */
}

/* Aktiviert den wandernden Lichtblitz beim Hover */
.team-card:hover .team-card__image-wrapper::after {
  left: 150%; /* Schießt einmal quer nach rechts über das Bild */
}

/* Container-Liste anpassen (Zentrierung und Standardpunkte aufheben) */
.bg-main ul,
.bg-main [data-aos] ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 20px !important;
  margin: 0;
}

/* Einzelne Listenpunkte */
.bg-main ul li,
.bg-main [data-aos] ul li {
  position: relative !important;
  padding-left: 25px !important; /* Platz für den Stern */
  margin-bottom: 8px !important;
  line-height: 1.5;
  list-style: none !important;
}

/* Der goldene Stern vor jedem Punkt */
.bg-main ul li::before,
.bg-main [data-aos] ul li::before {
  content: "★" !important;
  position: absolute !important;
  left: 0 !important;
  top: 11px !important; /* Leicht nach unten verschoben für perfekte Zentrierung zum Text */
  color: #ffd700 !important; /* Ihr sattes Gold */
  font-size: 0.95rem !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* Zielgerichtet für alle FontAwesome-Icons innerhalb der Links der bg-main Sektion */
.bg-main a i.fas {
  margin-right: 8px !important; /* Hier können Sie den Abstand pixelgenau einstellen (z.B. 6px oder 8px) */
  margin-left: 15px !important;
  display: inline-block;
  width: 20px; /* Optional: Gibt allen Icons die gleiche Breite, damit der Text perfekt untereinander fluchtet */
}

/* 1. Die feste Hover-Zone (Das umschließende Div mit der neuen Klasse) */
.bg-main div.effect-3d {
  perspective: 1000px; /* Aktiviert den 3D-Raum */
  cursor: pointer;
}

/* 2. Standard-Einstellung für das Bild im Inneren */
.bg-main div.effect-3d img {
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

/* 3. Der zuckfreie 3D-Hover-Effekt */
.bg-main div.effect-3d:hover img {
  transform: translate3d(0, -10px, 30px) rotateX(4deg) rotateY(-6deg);
  box-shadow: -15px 25px 40px rgba(0, 0, 0, 0.25);
}

/* ===================================================
   1. STYLING FÜR DIE FILTER-BUTTONS (PROJEKTAUSWAHL)
   =================================================== */
.custom-gallery-filters {
  border: none;
}

.custom-gallery-filters .nav-link {
  background: rgba(var(--s1), 0.05) !important; /* Nutzt dezenten Hintergrund Ihres Themes */
  color: var(--main-text) !important;
  border: 1px solid rgba(var(--s1), 0.15) !important;
  border-radius: 30px !important; /* Schöne abgerundete Pill-Form */
  padding: 8px 20px !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover-Zustand der Buttons (beim Drüberfahren) */
.custom-gallery-filters .nav-link:hover {
  border-color: #ffd700 !important; /* Goldener Rand */
  color: #ffd700 !important;
}

/* Aktivierter Zustand (Das gerade ausgewählte Projekt) */
.custom-gallery-filters .nav-link.active {
  background-color: #ffd700 !important; /* Goldener Hintergrund */
  border-color: #ffd700 !important;
  color: #000000 !important; /* Schwarzer Text auf Gold für beste Lesbarkeit */
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* ===================================================
   2. SWIPER LAYOUT- & BILDER-STYLING (MIT HÖHEN-FIX)
   =================================================== */
/* --- SWIPER LAYOUT-SICHERHEIT --- */
.swiper {
  width: 100%;
  padding-top: 45px !important;
  padding-bottom: 45px !important; /* Genug Platz für die Punkte unten */
}

.swiper-wrapper {
  display: flex !important;
}

/* --- DIE BILD-BOX (Sorgt für Stabilität bei Hoch- & Querformat) --- */
.gallery-card {
  width: 100%;
  height: 350px; /* Feste Höhe des Sliders */
  background: rgba(var(--s1), 0.03); /* Ganz zarter, edler Hintergrund für leere Flächen bei Hochformaten */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- DAS EIGENTLICHE BILD --- */
.gallery-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* WICHTIG: Das Bild wird NIEMALS abgeschnitten, sondern komplett eingepasst! */
  display: block;
}

/* Hover-Effekt auf die gesamte Box */
.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* --- GOLDENE PUNKTE FÜR DIE SLIDER-NAVIGATION --- */
.swiper-pagination-bullet {
  background: var(--main-text) !important;
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  background: #ffd700 !important;
  opacity: 1 !important;
  width: 20px !important;
  border-radius: 5px !important;
}

/* ===================================================
   3. STYLING FÜR DIE NAVIGATIONS-PFEILE (AKTUALISIERT)
   =================================================== */
/* Grunddesign der Pfeil-Kreise */
.swiper-button-next,
.swiper-button-prev {
  color: #ffd700 !important; /* Goldene Pfeilspitze */
  background: rgba(0, 0, 0, 0.45) !important; /* Dunkler, transparenter Hintergrundkreis */
  width: 44px !important; /* Feste Breite des Kreises */
  height: 44px !important; /* Feste Höhe des Kreises */
  border-radius: 50% !important; /* Perfekt kreisrund */
  border: 1px solid rgba(255, 215, 0, 0.2) !important; /* Feiner goldener Rand um den Kreis */
  
  /* Starker, weicher Schatten für 3D-Effekt und Sichtbarkeit */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  /* Zentrierung auf der Y-Achse (Bildmitte) */
  top: 50% !important;
  transform: translateY(-50%) !important; /* Perfekte vertikale Mitte */
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
  z-index: 10;
}

/* Verkleinert die originale Swiper-Pfeilspitze, damit sie perfekt in den Kreis passt */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: bold;
}

/* WEITER NACH INNEN SCHIEBEN (Damit nichts abgeschnitten wird) */
.swiper-button-prev {
  left: 15px !important; /* Abstand vom linken Sektionsrand nach innen */
}
.swiper-button-next {
  right: 15px !important; /* Abstand vom rechten Sektionsrand nach innen */
}

/* HOVER-EFFEKT: Kreis leuchtet beim Drüberfahren intensiver auf */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important; /* Pfeil wird beim Hover weiß für optimalen Kontrast */
  transform: translateY(-50%) scale(1.08) !important; /* Leichtes, ruckelfreies Vergrößern */
}

/* Auf kleinen Smartphones blenden wir die Pfeile aus, da man dort bequem mit dem Finger wischt */
@media (max-width: 575px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}

/* Styling für den optionalen Text unter den Projekt-Galerien */
.gallery-project-info {
  padding: 15px 20px;
  background: rgba(var(--s1), 0.03); /* Dezenter Hintergrund */
  border-left: 4px solid #ffd700;    /* Goldener Akzentbalken links */
  border-radius: 4px;
  margin-top: 15px;
}

/* Spezifische Farbe für Text-Auszeichnungen (wie z.B. das Wort Status) */
.gallery-project-info strong {
  color: #ffd700 !important; /* Goldener Fokus auf wichtige Wörter */
}

/* Zwingt das Swiper-Band zu einer eleganten, progressiven Bewegung (Cubic-Bezier) */
.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ===================================================
   HEADER-LOGO FIX (REPARIERT DEN LIGHT/DARK-WECHSEL)
   =================================================== */

/* 1. Standard-Zustand für den Light Mode (Weißer/Heller Hintergrund) */
.logo a.dark,
footer a.dark {
  display: inline-block !important; /* Dunkles Logo anzeigen */
  background: none !important;      /* Störenden dunklen Balken entfernen */
  border: none !important;
}

.logo a.light,
footer a.light {
  display: none !important;         /* Helles Logo im Lightmode verstecken */
}

/* 2. Zustand für den Dark Mode (body.dark ist aktiv) */
body.dark .logo a.dark,
body.dark footer a.dark {
  display: none !important;         /* Dunkles Logo im Darkmode verstecken */
}

body.dark .logo a.light,
body.dark footer a.light {
  display: inline-block !important; /* Helles Logo anzeigen */
  background: none !important;      /* Hintergrund-Schutz */
  border: none !important;
}

/* Sicherheits-Fix für die Logo-Bilder selbst */
.logo a img,
footer a img {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===================================================
   KONTAKTFORMULAR & INFOBOX PREMIUM STYLING
   =================================================== */

/* Das Haupt-Formulargehäuse */
.custom-form {
  background: rgba(var(--s1), 0.01);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* Die Eingabefelder (Inputs & Textarea) */
.custom-input {
  background-color: rgba(var(--s1), 0.02) !important;
  color: var(--main-text) !important;
  border: 1px solid rgba(var(--s1), 0.95) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Fokus-Zustand (Wenn man in ein Feld klickt) */
.custom-input:focus {
  border-color: #ffd700 !important; /* Goldener Fokusrand */
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
  background-color: transparent !important;
}

/* Struktur für die Checkboxen */
.custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}
.custom-checkbox input[type="checkbox"] {
  margin-top: 4px;
  cursor: pointer;
  accent-color: #ffd700; /* Macht den Haken gold */
}
.custom-checkbox label {
  cursor: pointer;
  line-height: 1.4;
  font-size: 0.9rem;
}

/* Der Absendebutton */
.btn-submit {
  background-color: #ffd700 !important;
  color: #000000 !important;
  border: 1px solid #ffd700 !important;
  padding: 12px 30px !important;
  border-radius: 30px !important;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
}
.btn-submit:hover {
  background-color: transparent !important;
  color: #ffd700 !important; /* Invertiert zu Goldrand auf transparent beim Hover */
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
  transform: translateY(-2px);
}

/* --- RECHTE INFOBOX STYLING --- */
.contact-infobox {
  background: rgba(var(--s1), 0.03) !important; /* Dezenter Schutzhintergrund */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Die Social-Media Icons in der Infobox */
.social-box-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--s1), 0.05);
  color: var(--main-text) !important;
  border-radius: 8px;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(var(--s1), 0.1);
}
.social-box-icon:hover {
  background: #ffd700;
  color: #000000 !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* Dark Mode spezifische Optimierung für die Infobox */
body.dark .contact-infobox {
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- LABEL-FARBE ERZWINGEN (Hebt SASS-Theme auf) --- */
.bg-main .custom-form label,
.bg-main .custom-checkbox label {
  color: var(--main-text) !important; /* Nutzt die aktive Variable der Sektion */
  font-weight: 500 !important;
}

/* Dezentere Farbe für den Pflichtfeld-Hinweis im Header */
.bg-main .custom-form small {
  color: var(--main-text) !important;
  opacity: 0.6 !important;
}

/* ===================================================
   CAPTCHA-STYLING FIX (RAHMEN, BREITE & TEXTFARBE)
   =================================================== */

/* Zwingt die Tabelle, sich sauber zu verhalten */
.captcha_table {
  width: 100% !important;
  margin-top: 10px !important;
}

.captcha_table td {
  padding: 5px !important;
  vertical-align: middle !important;
  color: var(--main-text) !important; /* Richtige Textfarbe für "Bitte Text eintragen" */
}

/* Das Eingabefeld des Captchas anpassen */
.captcha_table input[type="text"][name="captcha"] {
  display: block !important;
  width: 140px !important; /* Genug Breite für alle Zeichen */
  height: 42px !important; /* Einheitliche Höhe */
  padding: 8px 12px !important;
  font-size: 0.95rem !important;
  color: var(--main-text) !important; /* Schriftfarbe in Light & Dark Mode */
  background-color: rgba(var(--s1), 0.02) !important; /* Hintergrund passend zum Formular */
  
  /* AKTUALISIERT: Spürbar dunklerer, gut sichtbarer Rahmen im Light Mode */
  border: 1px solid rgba(var(--s1), 0.95) !important;
  border-radius: 6px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Dark-Mode spezifische Anpassung für den Rahmen (falls nötig) */
body.dark .captcha_table input[type="text"][name="captcha"] {
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Zarter, heller Rahmen im Dark Mode */
}

/* Fokus-Zustand beim Reinklicken in das Captcha-Feld */
.captcha_table input[type="text"][name="captcha"]:focus {
  border-color: #ffd700 !important; /* Goldener Rahmen */
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
  outline: none !important;
  background-color: transparent !important;
}

/* Textbeschreibung neben dem Captcha-Feld */
.captcha_expl {
  font-size: 0.9rem !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
}

/* ===================================================
   PFLICHTFELD-STERNE (ROT-FIX FÜR BG-MAIN SEKTIONEN)
   =================================================== */

/* Zwingt das Sektions-CSS dazu, rote Warnfarben nicht mehr zu überschreiben */
.bg-main .text-danger,
.bg-main span.text-danger,
.bg-main label span[style*="color: rgb(255, 0, 0)"],
.bg-main label span[style*="color: red"] {
  color: #dc3545 !important; /* Bootstraps echtes, klares Signal-Rot */
}

/* ===================================================
   RESPONSIVES & MOBILE-SICHERES SUCH-STYLING
   =================================================== */

/* Der Suchschlitz (Flexibel, bricht am Handy sauber um) */
.search-field-box {
  width: 100% !important; /* Nutzt auf Handys die volle Breite des Containers */
  padding-right: 45px !important; /* Platz für die Lupe rechts */
  height: 48px !important;
  font-size: 1.05rem !important;
}

/* Das Lupe-Icon bleibt immer fest an seiner Position rechts */
.custom-search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--main-text);
  opacity: 0.4;
  pointer-events: none;
}

/* Der Suchen-Button */
.search-btn-submit {
  height: 48px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* Verhindert, dass der Buttontext umbricht */
}

/* --- RESPONSIVE ANPASSUNGEN (Für Smartphones) --- */
@media (max-width: 575px) {
  /* Das Eingabefeld und der Button stehen am Handy sauber untereinander */
  .search-input-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .search-input-group > div {
    max-width: 100% !important; /* Erlaubt volle Breite auf Smartphones */
  }

  .search-btn-submit {
    width: 100% !important; /* Button geht am Handy über die ganze Breite */
  }

  /* Die Radio-Buttons für die Suchmodi bekommen am Handy mehr Platz */
  .search-radio-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* --- STYLING DER SUCHERGEBNISSE --- */
.custom-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.custom-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ffd700;
}
.custom-radio label {
  cursor: pointer;
  color: var(--main-text) !important;
}

.search-result-item {
  background: rgba(var(--s1), 0.01);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.search-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.search-result-link {
  color: var(--main-text) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.search-result-link:hover {
  color: #ffd700 !important;
}

.result-excerpt-text .highlight {
  background-color: rgba(255, 215, 0, 0.2) !important;
  color: var(--main-text) !important;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}

/* ===================================================
   UNENDLICHES TEXT-LAUFBAND (TICKER EFFECT)
   =================================================== */

/* Der Ticker-Container erzwingt lineares, ruckelfreies Gleiten */
.gallerySwiperTicker .swiper-wrapper {
  transition-timing-function: linear !important; /* WICHTIG: Erzeugt die permanente Gleitbewegung */
  display: flex !important;
}

/* Die einzelnen Text-Slides */
.ticker-slide {
  width: auto !important; /* Passt die Breite exakt an die Textlänge an */
  white-space: nowrap !important; /* Garantiert: Der Text bleibt IMMER einzeilig */
  display: flex;
  align-items: center;
}

/* Der goldene Trennstrich zwischen den Begriffen */
.slider_line {
  display: inline-block;
  width: 50px;
  height: 4px;
  background-color: #ffd700 !important; /* Ihr sattes Gold */
  border-radius: 2px;
  margin-left: 30px; /* Abstand nach dem Text zum nächsten Wort */
  margin-right: 30px;
}

/* Responsive Schriftgrößen-Anpassung für Smartphones */
@media (max-width: 767px) {
  .gallerySwiperTicker h2 {
    font-size: 1.8rem !important; /* Verkleinert die Schrift auf Handys leicht, damit es harmonisch wirkt */
  }
  .slider_line {
    width: 30px;
    margin-left: 20px;
  }
}

.parallax {
  /* Der führende Schrägstrich "/" ersetzt die komplette Domain vollautomatisch und fehlerfrei */
  background-image: url("/media/images/xiaoyu_qian-home-2404521_1920.jpg");
  
  /* Perfekte Parallax- und Hintergrund-Einstellungen */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ===================================================
   PROJEKT-BESPRECHUNG (DISCUSS PROJECTS) STYLING
   =================================================== */

/* Zarter Hintergrund-Schleier über dem Parallax-Bild, damit der Text lesbar bleibt */
.bg-main-opaque {
  position: relative;
  background-color: var(--main-bg) !important;
  color: var(--main-text) !important;
}

/* Erzeugt ein leicht transparentes Overlay über der Parallax-Fläche */
.bg-main-opaque::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85); /* Heller Schleier im Light Mode */
  z-index: 1;
  pointer-events: none;
}

/* Im Dark Mode wird der Schleier dunkel, damit das Weiß nicht blendet */
body.dark .bg-main-opaque::before {
  background: rgba(18, 18, 18, 0.85); /* Dunkler Schleier im Dark Mode */
}

/* Stellt sicher, dass der Text über dem Schleier liegt */
.bg-main-opaque .container {
  position: relative;
  z-index: 2;
}

/* Kleine Text-Optimierungen */
.text-gold {
  color: #d4a017  !important;
}

body.dark .text-gold {
  color: #ffd700 !important;
}

/* Der Telefonlink innerhalb dieser Sektion */
.phone-discuss-link {
  color: var(--main-text) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.phone-discuss-link:hover {
  color: #ffd700 !important; /* Wird gold beim Drüberfahren */
}

/* Styling für das runde Team-Vorschaubild */
.avatar-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffd700; /* Goldener Rand ums Teambild */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spezifische Anpassung für den Termin-Button in dieser Reihe */
.discuss-btn-appointment {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- MOBILE SICHERHEIT (Paddings anpassen) --- */
@media (max-width: 991px) {
  /* Reduziert die gigantischen Abstände auf Smartphones für besseren Lesefluss */
  .container.pt-120.pb-120 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  /* Zentriert den Inhalt auf Handys für ein ruhigeres Gesamtbild */
  .discuss-content-box {
    text-align: center !important;
  }
  
  .discuss-content-box .d-flex {
    justify-content: center !important;
    width: 100%;
  }
}

/* ===================================================
   ARCHITEKTUR-HAUS STEUERUNG (MIT GOLDENEM 3D-GLOW)
   =================================================== */
.house-architecture-3d {
  /* Das Haus leuchtet im Dark Mode standardmäßig in Ihrem warmen Goldton */
  color: #ffd700 !important;
  
  /* Dreifacher Schatten-Filter für maximale 3D-Tiefe und intensiven Glow im Dunkeln */
  filter: 
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))         /* Scharfer Kernschatten für Realismus */
    drop-shadow(0 8px 20px rgba(255, 215, 0, 0.35))   /* Weicher goldener Raum-Schatten */
    drop-shadow(0 0 12px rgba(255, 215, 0, 0.25));    /* Das eigentliche goldene Glühen (Neon-Glow) */
    
  transition: color 0.35s ease, filter 0.35s ease;
}

/* --- OPTIMIERUNG FÜR DEN HELLEN ZUSTAND (LIGHT MODE) --- */
/* Da reines Gold auf hellem/weißem Parallax-Schleier blenden würde, */
/* optimieren wir den Kontrast im hellen Modus separat: */
body:not(.dark) .house-architecture-3d {
  /* Im Light Mode wird das Haus weiß gold, damit es edel wirkt */
  color: #ffffff !important;
  
  /* Im hellen Modus nutzen wir einen dunklen Kernschatten, kombiniert mit einem zarten Goldhauch */
  filter: 
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) 
    drop-shadow(0 8px 25px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 8px rgba(255, 215, 0, 0.4)); /* Dezenter goldener Kontur-Glow */
}

/* --- DYNAMISCHER HOVER-EFFEKT --- */
/* Wenn der Nutzer mit der Maus über die effect-3d Box fährt, intensiviert sich das Leuchten */
.bg-main div.effect-3d:hover .house-architecture-3d {
  color: #fff6b3 !important; /* Das Gold blitzt hell auf (Glanz-Effekt) */
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    drop-shadow(0 12px 30px rgba(255, 215, 0, 0.55)) 
    drop-shadow(0 0 20px rgba(255, 215, 0, 0.45)); /* Das Glühen dehnt sich aus */
}

/* Container für das Video (Symmetrisch und edel) */
.video-container-box {
  width: 100%;
  max-width: 960px; /* Perfekte Kinoleinwand-Breite am PC */
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  /* Goldener Schatten passend zu Ihrem Design */
  box-shadow: 0 15px 35px rgba(255, 215, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 3px solid rgba(var(--s1), 0.05);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

/* Das Video selbst füllt die Box perfekt aus */
.responsive-promo-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover-Effekt: Video-Box hebt sich leicht ab und der goldene Schatten intensiviert sich */
.video-container-box:hover {
  box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.wub_bottom {
  clear: both;
  width: 100%;
  padding-bottom: 0 !important;
}

.service_card_hover {
  padding: 20px;
}

.service_card_hover:hover {
  background-color: rgb(var(--p7));
  transition: 0.3s;
  padding: 20px;
}

/* ===================================================
   TABLET- & TOUCH-SICHERHEIT FÜR ANIMIERTE BUTTONS
   =================================================== */

/* Gilt für alle Geräte, die primär Touch nutzen (pointer: coarse) */
/* ODER deren Bildschirmbreite im typischen Tablet-Bereich liegt (unter 1024px) */
@media (max-width: 1024px), (pointer: coarse) {
  
  /* 1. Beide Text-Spans wieder sichtbar machen und nebeneinander zwingen */
  .kontakt-btn .btn-text-one,
  .kontakt-btn .btn-text-two {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    margin: 0 2px !important; /* Kleiner Abstand zwischen den Wörtern */
  }

  /* 2. Falls Ihr Theme den zweiten Text standardmäßig über absolute Positionierung versteckt */
  .kontakt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important; /* Erzwingt das Nebeneinanderstehende */
    height: auto !important;
    padding: 12px 24px !important; /* Angenehme Touch-Größe für Finger */
  }

  /* 3. Schaltet jegliche Hover-Verschiebung im Inneren des Buttons ab */
  .kontakt-btn:hover .btn-text-one {
    transform: none !important;
    opacity: 1 !important;
  }
  
  .kontakt-btn:hover .btn-text-two {
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* Zwingt den Button, flach und einzeilig zu bleiben */
  .kontakt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    
    white-space: nowrap !important; /* GARANTIERT: Der Text bricht NIEMALS in 2 Zeilen um! */
    font-size: 0.9rem !important;    /* Verkleinert die Schrift auf Tablets leicht (z.B. von 1rem) */
    width: auto !important;          /* Erlaubt dem Button, sich flexibel in die Breite zu dehnen */
    height: 46px !important;         /* Optionale feste Höhe, damit alle Buttons exakt gleich flach sind */
    padding: 0 20px !important;      /* Innenabstand links und rechts */
  }

  /* Beide Text-Teile exakt in einer Linie halten */
  .kontakt-btn .btn-text-one,
  .kontakt-btn .btn-text-two {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    line-height: 1 !important;       /* Verhindert Höhen-Verschiebungen durch die Schriftart */
    margin: 0 3px !important;        /* Perfakter Wortabstand */
  }

  .header-inner {
	border-radius: 0px;
  }
}

/* ===================================================
   RESPONSIVES STYLING FÜR DEN FOOTER (ZEILENUMBRUCH-SCHUTZ)
   =================================================== */

/* 1. Generelle Optimierung des Textflusses im mittleren Footer-Bereich */
.footer-middle p,
.footer-middle p a {
  font-size: 0.95rem !important; /* Leicht reduzierte, edle Standard-Schriftgröße */
  line-height: 1.6 !important;
  text-decoration: none !important;
}

/* 2. Gezielter Schutz ab Tablet-Größe abwärts (unter 1024px) */
@media (max-width: 1280px) {
  
  /* Verkleinert alle Texte und Links im Footer leicht für perfekten Platzgewinn */
  .footer-middle p,
  .footer-middle p a,
  .footer-middle span {
    font-size: 0.85rem !important; /* Verhindert das "Sprengen" der Spalten */
  }
  
  /* Die Überschriften in den Spalten ebenfalls anpassen */
  .footer-middle h6 {
    font-size: 0.95rem !important;
    margin-bottom: 15px !important;
  }

  /* Krisensicherer Schutz für sensible Kontakt-Zeilen */
  .footer-middle .col-md-4 p {
    white-space: nowrap !important; /* Verhindert das automatische Zerreißen von Nummern/Mails */
    overflow: hidden;
    text-overflow: ellipsis; /* Falls ein Bildschirm extrem schmal ist, wird elegant abgekürzt statt umgebrochen */
  }

  /* Sorgt dafür, dass die Icons eine feste Breite haben und der Text bündig startet */
  .footer-middle .col-md-4 p i {
    width: 20px !important;
    margin-right: 8px !important; /* Ersetzt Bootstraps me-3, falls das am Handy zu breit drückt */
    display: inline-block;
  }
}

/* 2. Gezielter Schutz ab Tablet-Größe abwärts (unter 1024px) */
@media (max-width: 1024px) {
  
  /* Verkleinert alle Texte und Links im Footer leicht für perfekten Platzgewinn */
  .footer-middle p,
  .footer-middle p a,
  .footer-middle span {
    font-size: 0.75rem !important; /* Verhindert das "Sprengen" der Spalten */
  }
  
  /* Die Überschriften in den Spalten ebenfalls anpassen */
  .footer-middle h6 {
    font-size: 0.85rem !important;
    margin-bottom: 15px !important;
  }

  /* Krisensicherer Schutz für sensible Kontakt-Zeilen */
  .footer-middle .col-md-4 p {
    white-space: nowrap !important; /* Verhindert das automatische Zerreißen von Nummern/Mails */
    overflow: hidden;
    text-overflow: ellipsis; /* Falls ein Bildschirm extrem schmal ist, wird elegant abgekürzt statt umgebrochen */
  }

  /* Sorgt dafür, dass die Icons eine feste Breite haben und der Text bündig startet */
  .footer-middle .col-md-4 p i {
    width: 20px !important;
    margin-right: 8px !important; /* Ersetzt Bootstraps me-3, falls das am Handy zu breit drückt */
    display: inline-block;
  }
}

/* 3. Feinschliff für sehr kleine Smartphones (unter 575px) */
@media (max-width: 575px) {
  /* Wenn die Spalten auf dem Handy untereinander rutschen, erlauben wir langen Texten wieder */
  /* das kontrollierte Umbrechen, reduzieren aber die Schrift noch minimal für ein sauberes Schriftbild */
  .footer-middle .col-md-4 p {
    white-space: normal !important; 
    font-size: 0.82rem !important;
    padding-left: 25px !important; /* Erzeugt einen sauberen hängenden Einzug unter dem Icon */
    text-indent: -25px !important;  /* Schiebt nur die erste Zeile mit dem Icon zurück nach links */
  }
}

/* ===================================================
   HEADER-FIX FÜR SMARTPHONES IM QUERFORMAT (LANDSCAPE)
   =================================================== */

/* Greift, wenn die Bildschirmhöhe kleiner als 480px ist (Querformat) */
/* ODER wenn die typische Smartphone-Breite im Querformat vorliegt */
@media (max-height: 480px), (max-width: 932px) and (orientation: landscape) {
  
  /* Zwingt den Header, wieder normal im Textfluss zu liegen und mitzuscrollen */
  header.header,
  .header {
    position: absolute !important; /* Nimmt die feste Fixierung komplett weg */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-shadow: none !important; /* Entfernt eventuelle Schatten im Querformat */
  }

  /* WICHTIG: Falls Ihr Hauptinhalt (z.B. body oder main) ein padding-top */
  /* für den sticky Header hat, reduzieren wir dieses hier ebenfalls, */
  /* damit kein unschönes Loch entsteht */
  body, 
  main,
  #wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ===================================================
   FALLBACK: SMARTPHONE-FIX FÜR WATER-RIPPLES
   =================================================== */

@media (max-width: 767px) {
  
  /* 1. Blendet das leere Animations-Canvas auf dem Smartphone aus */
  #canvas,
  .curtains-canvas {
    display: none !important;
    pointer-events: none !important;
  }

  /* 2. Macht das Haupt-Gehäuse zu einem stabilen, bildschirmfüllenden Container */
  #water-ripples {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important; /* Nutzt die volle Höhe des Smartphone-Bildschirms */
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
  }

  /* 3. Holt das originale Intro-Bild wieder hervor und streckt es fehlerfrei im Hintergrund */
  #water-ripples img[data-sampler="planeTexture"],
  #water-ripples img {
    opacity: 1 !important;          /* Macht das vom Skript versteckte Bild wieder sichtbar */
    display: block !important;       /* Erzwingt die Anzeige */
    position: absolute !important;   /* Löst das Bild aus dem Textfluss */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;    /* Verhindert Verzerrungen; schneidet Ränder perfekt ab */
    object-position: center !important; /* Zentriert das Motiv */
    z-index: -1 !important;          /* Schiebt das Bild hinter den Text block */
  }

  /* 4. Stellt sicher, dass der Textblock aus dem Sectionpicker absolut lesbar über dem Bild liegt */
  #water-ripples-title {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }
}

/* ===================================================
   SMARTPHONE-FIX FÜR BUTTONS (FLEXIBLE / RUNDE FORM)
   =================================================== */

@media (max-width: 575px) {
  
  /* 1. Gezielter Schutz für den KONTAKT-BUTTON im Header */
  header .kontakt-btn,
  .header .kontakt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Setzt die störenden Tablet-Eigenschaften zurück */
    height: 40px !important; /* Angenehme, quadratische Basisgröße fürs Handy */
    line-height: 1 !important;
    transform: none !important;
    
    /* Wenn NUR das Icon sichtbar ist, wird der Button perfekt kreisrund */
    width: 40px !important; 
    min-width: 40px !important;
    border-radius: 50% !important; /* Macht den Button absolut rund */
    padding: 0 !important; /* Entfernt Innenabstände, die Kreise verzerren */
  }

  /* Falls der Text "Kontakt" auf dem Smartphone ausgeblendet werden soll */
  header .kontakt-btn .kontakt-text {
    display: none !important; /* Versteckt den Text, damit nur das runde Icon bleibt */
  }

  /* Das Icon exakt im Kreis zentrieren */
  header .kontakt-btn .kontakt-icon {
    font-size: 20px !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  /* 2. ZUSATZ: Falls der Text im Button sichtbar sein soll (Wird zur Pillen-Form) */
  /* Aktivieren Sie diesen Block NUR, wenn der Button Text + Icon auf dem Handy zeigen soll: */
  /*
  header .kontakt-btn {
    width: auto !important;
    min-width: none !important;
    border-radius: 30px !important; 
    padding: 0 16px !important; 
  }
  header .kontakt-btn .kontakt-text {
    display: inline-block !important;
    margin-right: 6px !important;
  }
  */

  /* 3. Formular-Anfrage-Button im Inhalt (Pillenform / Schalter-Look) */
  .bg-main .btn-submit,
  .kontakt-btn:not(header .kontakt-btn) {
    width: auto !important;
    height: 46px !important;
    border-radius: 30px !important; /* Macht die Ecken perfekt rund (Pillen-Schalter-Look) */
    padding: 0 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* ===================================================
   RESPONSIVE OPTIMIERUNG FÜR DEN TEASER-TEXTBLOCK
   =================================================== */

/* Spezifisches Styling für das Abschlusszitat */
.border-gold {
  border-left: 4px solid #ffd700 !important;
}
.italic-quote {
  font-style: italic;
}

/* --- MOBILE WEICHE FÜR SMARTPHONES (unter 767px) --- */
@media (max-width: 767px) {
  
  /* 1. Bild-Box bricht aus dem Textfluss aus und nutzt die volle Breite */
  .bg-main div.effect-3d {
    float: none !important;        /* Hebt das seitliche Vorbeifließen komplett auf */
    max-width: 100% !important;    /* Bild dehnt sich über die volle Smartphone-Breite aus */
    margin: 20px 0 25px 0 !important; /* Entfernt negative Einzüge, schafft sauberen Platz nach oben/unten */
    display: block !important;
  }
  
  .bg-main div.effect-3d img {
    width: 100% !important;
    height: auto !important;
  }

  /* 2. Überschriften harmonisch verkleinern, damit sie auf Handys nicht umbrechen */
  .bg-main h2.fs-two {
    font-size: 1.6rem !important; /* Angenehme, lesbare Mobile-Größe für Haupttitel */
    line-height: 1.3 !important;
  }
  
  .bg-main h5.fs-five {
    font-size: 1.1rem !important; /* Angenehme Größe für den Untertitel */
  }

  /* 3. WICHTIG: Die normalen Absätze (fs-ten) bleiben absolut unberührt */
  /* Sie behalten ihre originale Größe bei und werden niemals größer als die Titel */
  .bg-main p.fs-ten {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Erkennt nun alle 5 rechts flotierten Bilder vollautomatisch auf Smartphones */
  .bg-main div.effect-3d:has(img[src*="teaserbox_4393357"]),
  .bg-main div.effect-3d:has(img[src*="teaserbox_3511067"]),
  .bg-main div.effect-3d:has(img[src*="house-coins"]),
  .bg-main div.effect-3d:has(img[src*="smiling-real-estate-agent"]),
  .bg-main div.effect-3d:has(img[src*="cache_14537367"]) { /* HIER NEU DAZUGEKOMMEN */
    float: none !important;
    max-width: 100% !important;
    margin: 15px 0 25px 0 !important;
    display: block !important;
  }

  /* Verkleinert die Google Map auf Handys in der Höhe, damit man leichter droverscrollen kann */
  iframe[src*="google.com/maps"] {
    height: 300px !important;
  }

  .contact-link-row a {
    display: inline-block !important;
    white-space: nowrap !important;   /* Text bleibt garantiert immer in einer einzigen Zeile */
    font-size: 0.92rem !important;    /* Minimale, edle Anpassung für schmale Handy-Displays */
  }
}

/* ===================================================
   SMARTPHONE-OPTIMIERUNG FÜR FOOTER-NAVIGATIONS-LINKS
   =================================================== */

@media (max-width: 767px) {
  
  /* Findet die Link-Spalten im Footer auf dem Smartphone */
  .footer-middle .col-md-2,
  .footer-middle .col-md-3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Zentriert die unsichtbare Box der Aufzählung */
    text-align: left !important;    /* Garantiert, dass der Text im Block linksbündig bleibt */
  }

  /* Richtet die Überschriften sauber mittig über dem Block aus */
  .footer-middle h6 {
    text-align: center !important;
    width: 100% !important;
  }

  /* Sorgt dafür, dass die p-Tags eine feste, kompakte Breite bekommen. */
  /* Dadurch wandert die gesamte Liste nach rechts in die Mitte, */
  /* bleibt aber untereinander perfekt linksbündig ausgerichtet! */
  .footer-middle .col-md-2 p,
  .footer-middle .col-md-3 p {
    width: 100% !important;
    /*max-width: 160px !important; *//* Schiebt die Aufzählung als Paket exakt in die optische Mitte */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important; /* Text bleibt linksbündig untereinander */
  }
}

/* ===================================================
   FOOTER-BOTTOM SMARTPHONE OPTIMIERUNG
   =================================================== */

/* Standard-Schriftgröße für den alleruntersten Bereich */
.footer-bottom {
  font-size: 0.9rem;
}
.footer-bottom a {
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* --- MOBILE WEICHE FÜR SMARTPHONES (unter 767px) --- */
@media (max-width: 1024px) {
  
  /* 1. Schriftgröße für Texte, Links und Trennstriche mobil verkleinern */
  .footer-copyright-text,
  .custom-footer-links a,
  .custom-footer-links span {
    font-size: 0.78rem !important; /* Verkleinert die Schrift, um Zeilenumbrüche zu verhindern */
    text-align: left !important;
    display: inline-block;
  }

  /* 2. Zentriert beide Elemente perfekt untereinander, wenn sie umbrechen */
  .footer-bottom .container {
    text-align: center !important;
  }

  /* 3. Verhindert, dass Impressum und Datenschutz getrennt werden */
  /* Die Links fließen kompakt im Block und brechen nur als Ganzes um */
  .custom-footer-links {
    justify-content: right !important;
    line-height: 1.4 !important;
  }
  
  /* Macht den senkrechten Trennstrich auf Handys etwas transparenter, damit es cleaner aussieht */
  .footer-divider {
    opacity: 0.4;
    margin: 0 2px !important;
  }
}

/* --- MOBILE WEICHE FÜR SMARTPHONES (unter 767px) --- */
@media (max-width: 767px) {
  
  /* 1. Schriftgröße für Texte, Links und Trennstriche mobil verkleinern */
  .footer-copyright-text,
  .custom-footer-links a,
  .custom-footer-links span {
    font-size: 0.78rem !important; /* Verkleinert die Schrift, um Zeilenumbrüche zu verhindern */
    text-align: center !important;
    display: inline-block;
  }

  /* 2. Zentriert beide Elemente perfekt untereinander, wenn sie umbrechen */
  .footer-bottom .container {
    text-align: center !important;
  }

  /* 3. Verhindert, dass Impressum und Datenschutz getrennt werden */
  /* Die Links fließen kompakt im Block und brechen nur als Ganzes um */
  .custom-footer-links {
    width: 100% !important;
    justify-content: center !important;
    line-height: 1.4 !important;
  }
  
  /* Macht den senkrechten Trennstrich auf Handys etwas transparenter, damit es cleaner aussieht */
  .footer-divider {
    opacity: 0.4;
    margin: 0 2px !important;
  }
}

/* ===================================================
   MOBILE OPTIMIERUNG FÜR DAS WEBSITEBAKER-CAPTCHA
   =================================================== */

/* --- Gilt für Smartphones (unter 767px) --- */
@media (max-width: 767px) {
  
  /* Erlaubt dem umschließenden Container, flexibel mitzuwachsen */
  .grouping.d-inline-block {
    display: block !important; /* Nimmt die starre Breite weg */
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
  }

  /* Zwingt die Tabelle, das Flex-Modell zu nutzen */
  .captcha_table, 
  .captcha_table tbody {
    display: flex !important;
    flex-direction: column !important; /* Legt alle Elemente untereinander */
    width: 100% !important;
    gap: 12px !important; /* Gleichmäßiger Abstand zwischen Bild und Eingabe */
  }

  /* Macht aus den Tabellenzellen eigenständige Blöcke */
  .captcha_table tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .captcha_table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Leere Tabellenzellen komplett ausblenden, um Platz zu sparen */
  .captcha_table td:empty {
    display: none !important;
  }

  /* Das Iframe mit dem Captcha-Code perfekt einpassen */
  .captcha_iframe {
    max-width: 100% !important; /* Verhindert das Rausragen des Bildes */
    display: block !important;
    margin: 0 auto !important; /* Zentriert das Code-Bild am Handy */
  }

  /* Das Eingabefeld auf Handys auf die volle Breite dehnen */
  .captcha_table input[type="text"][name="captcha"] {
    width: 100% !important; /* Nutzt den vollen verfügbaren Platz im Formular */
    height: 46px !important; /* Gleiche Höhe wie Ihre normalen Eingabefelder */
    box-sizing: border-box !important;
  }

  /* Den Erklärungstext dezent unter oder über das Feld setzen */
  .captcha_expl {
    font-size: 0.85rem !important;
    opacity: 0.7 !important;
    margin-top: -2px !important;
  }
}

/* ===================================================
   PREMIUM TEAM-KARTEN DESIGN MIT GOLD-GLOW & BLITZ
   =================================================== */

/* Das flexible Raster: Teilt den Platz perfekt auf */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  width: 100%;
}

/* Die einzelne Visitenkarte */
.team-card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* 1. Bild-Gehäuse mit goldenem Rahmen und weichem Schatten */
.team-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* Perfekt proportioniertes Hochformat */
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid #ffd700; /* Ihr charakteristisches Mi-Casa-Gold */
  box-shadow: 0 10px 25px rgba(255, 215, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.15);
  
  /* Zwingt die Grafikkarte zu flüssigem 3D-Rendering ohne Kantenflimmern */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Das eigentliche Foto im Rahmen */
.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. DER LACK-GLANZ-EFFEKT (Ein unsichtbarer Lichtstrahl im Hintergrund) */
.team-card__image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Startet unsichtbar weit links außerhalb des Bildes */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.4) 50%, /* Strahlend heller Lichtreflex */
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); /* Schräger Lichtstrahl */
  transition: left 0.6s ease-in-out;
  pointer-events: none;
}

/* 3. HOVER-ANIMATIONEN (NUR FÜR DESKTOP-PCS MIT PRÄZISER MAUS) */
@media (min-width: 1025px) {
  
  /* Die Karte hebt sich elegant an und das Gold fängt an zu strahlen */
  .team-card:hover .team-card__image-wrapper {
    transform: translate3d(0, -6px, 0); 
    border-color: #ffffff; /* Rahmen blitzt kurz weißgold auf */
    box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  }
  
  /* Das Bild zoomt ganz dezent im Inneren heran */
  .team-card:hover .team-card__image {
    transform: scale(1.04);
  }

  /* Schießt den Lichtblitz beim Hover einmal quer von links nach rechts über das Gesicht */
  .team-card:hover .team-card__image-wrapper::after {
    left: 150%;
  }
}

/* 4. Text-Bereich unter den Bildern */
.team-card__content {
  padding: 15px 5px;
  text-align: left;
}

.team-card__name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--main-text);
}

.team-card__role {
  font-size: 0.95rem;
  opacity: 0.75;
  margin-bottom: 0;
  color: var(--main-text);
}

/* --- TEXT-ZENTRIERUNG NUR FÜR SMARTPHONES (unter 575px) --- */
@media (max-width: 575px) {
  .team-card {
    max-width: 100% !important; /* Nutzt die volle Smartphone-Breite */
  }
  .team-card__content {
    text-align: center !important; /* Zentriert Namen und Rollen auf Handys harmonisch */
  }
}

/* ===================================================
   CANVAS-INDEXIERUNG & TOUCH-SCROLL-FREIGABE
   =================================================== */

/* 1. Das Wellen-Canvas wird ganz nach hinten verbannt */
/* Es läuft dort im Hintergrund flüssig weiter, blockiert aber keine Gesten mehr! */
#canvas,
.curtains-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important; /* Niedrige Ebene im Hintergrund */
}

/* 2. Das Inhaltsgehäuse (#content) muss zwingend VOR dem Canvas liegen */
#content {
  position: relative !important;
  z-index: 500 !important; /* Liegt ÜBER dem Canvas (100) */
  background: transparent !important; /* Damit die Wellen perfekt durchscheinen! */
}

/* 3. Der Text und die Buttons aus Ihrem Sectionpicker */
#water-ripples-title {
  position: relative !important;
  z-index: 1000 !important; /* Höhere Ebene für Klicks und Touch-Wischen */
}

/* 4. Alle nachfolgenden Sektionen (Unter dem Hero-Bild) */
/* Wir geben ihnen einen festen Z-Index und einen Hintergrund, */
/* damit das Canvas sie nicht mehr überlagern oder schwarz färben kann! */
.bg-main,
section:not(#water-ripples) {
  position: relative !important;
  z-index: 2000 !important; /* Schiebt die restliche Seite komplett nach vorne */
  background-color: var(--main-bg) !important;
}

/* 5. Der Header bleibt wie von Ihnen gefordert an vorderster Front */
header.header,
.header {
  z-index: 9999 !important; /* Absolute Spitzenposition */
}

/* 6. Das unsichtbare Scroll-Schild */
#mc-scroll-shield {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  background: transparent !important;
  touch-action: pan-y !important; 
  z-index: 2000 !important;
  
  /* Standardmäßig (für Touch-Geräte wie das Tab S7) ist das Schild aktiv */
  display: block !important; 
}

/* ===================================================
   DIE REINE PC- & LAPTOP-WEICHE (SCHILD AUSSCHALTEN)
   =================================================== */
/* pointer: fine erkennt JEDEN Computer und LAPTOP der Welt, der mit einer */
/* echten Maus oder einem Trackpad bedient wird – völlig EGAL wie groß die Auflösung ist! */
@media (pointer: fine) {
  #mc-scroll-shield {
    display: none !important;        /* Löscht das Schild am PC vollständig */
    pointer-events: none !important; /* Maus scrollt und klickt direkt hindurch */
  }
}

/* ===================================================
   PC-SYNCHRONISATION FÜR DAS WELLEN-CANVAS
   =================================================== */

/* Gilt nur für Computer mit einer echten Maus (pointer: fine) */
@media (pointer: fine) {
  
  /* Zwingt das Canvas, starr mit der Seite mitzuscrollen */
  /* Das neutralisiert die künstliche Skript-Verzögerung am PC sofort! */
  #canvas,
  .curtains-canvas {
    position: fixed !important; /* Hält das Canvas fest im sichtbaren Fenster */
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: none !important; /* Verhindert, dass das JS das Canvas wegschiebt */
  }

  /* Sorgt dafür, dass die Intro-Sektion exakt mit dem Rest der Seite fluchtet */
  #water-ripples {
    position: relative !important;
    z-index: 200 !important;
  }
}

/* ===================================================
   INTERAKTIONS-BOX OPTIMIERUNG (UMBRUCH-SCHUTZ)
   =================================================== */

/* Garantiert, dass Avatar-Bild und Telefonnummer immer fest verschweißt bleiben */
.discuss-phone-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* Verhindert das Trennen von Bild und Nummer */
  width: auto !important;
}

/* Der absolute Schutz gegen das Zerschneiden der Telefonnummer */
.phone-discuss-link.text-viewport-protect {
  white-space: nowrap !important;   /* Zwingt die gesamte Nummer in eine einzige Zeile */
  display: inline-block !important;
  word-break: keep-all !important;
}

/* --- FEINSCHLIFF FÜR SMARTPHONES (unter 575px) --- */
@media (max-width: 575px) {
  /* Wenn die Boxen untereinander stehen, zentrieren wir sie auf Handys harmonisch */
  .discuss-content-box .d-flex.flex-column {
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important; /* Angenehmer Abstand zwischen Button und Telefon-Block */
  }
  
  .discuss-phone-group {
    justify-content: center !important;
    margin-top: 5px;
  }

  /* Minimale, edle Schriftgrößen-Anpassung, damit die Nummer auf winzigen Handys nicht rechts rausragt */
  .phone-discuss-link.text-viewport-protect {
    font-size: 0.95rem !important;
  }
}

/* ===================================================
   MC CONSENT COOKIE BANNER STYLE (REPARIERT)
   =================================================== */
.mc-cookie-banner {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  max-width: 420px !important;
  width: calc(100% - 50px) !important;
  
  /* NEU: Das Banner ist standardmäßig komplett unsichtbar, */
  /* bis das neue JavaScript die Klasse ".show-banner" vergibt */
  display: none !important; 
  
  /* Da das HTML nun ganz oben nach dem <body>-Tag sitzt, */
  /* schießt dieser Z-Index unanfechtbar vor jeden Header und Footer! */
  z-index: 999999999 !important; 
  
  border: 2px solid #ffd700 !important; /* Goldener Mi-Casa-Rahmen */
  border-radius: 16px !important;
  padding: 25px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; /* Etwas dunklerer Schatten für mehr Tiefe */
  
  /* Garantiert klickbar */
  pointer-events: auto !important; 
}

/* Sobald das JavaScript merkt, dass kein Cookie da ist, schaltet diese Klasse */
/* das Banner knallhart und unübersehbar auf sichtbar! */
.mc-cookie-banner.show-banner {
  display: block !important;
}

/* Optionen-Liste */
.mc-cookie-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  padding: 15px;
  background: rgba(var(--s1), 0.04) !important;
  border-radius: 8px;
}

.mc-cookie-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-cookie-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ffd700;
  cursor: pointer;
}

.mc-cookie-checkbox label {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--main-text) !important;
}

.mc-cookie-checkbox label small {
  opacity: 0.6;
  font-size: 0.8rem;
}

/* Buttons anpassen */
.btn-cookie-secondary {
  background-color: transparent !important;
  color: #ffd700 !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
}
.btn-cookie-secondary:hover {
  background-color: rgba(255, 215, 0, 0.1) !important;
  color: #ffd700 !important;
}

/* Smartphone-Optimierung */
@media (max-width: 575px) {
  .mc-cookie-banner {
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .mc-cookie-buttons {
    flex-direction: column;
  }
  .mc-cookie-buttons button {
    width: 100% !important;
  }
}

/* ===================================================
   GOOGLE MAPS PRIVACY PLACEHOLDER BOX
   =================================================== */

/* Der Haupt-Container für die Karte */
.mc-maps-wrapper {
  width: 100%;
  background-color: var(--main-bg) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Die Datenschutz-Vorschau-Ebene */
.mc-maps-placeholder {
  z-index: 5 !important;
  transition: opacity 0.3s ease;
}

/* Das Live-Kartengehäuse liegt im Hintergrund bereit */
.mc-blocked-iframe-container {
  width: 100%;
  height: 100%;
}

/* Smartphone-Optimierung: Verkleinert die Box auf Handys in der Höhe */
@media (max-width: 767px) {
  .mc-maps-wrapper {
    min-height: 380px !important;
  }
  .cookie-iframe-social {
    height: 380px !important;
  }
  .mc-maps-placeholder p {
    font-size: 0.88rem !important;
    padding: 0 10px;
  }
}

/* ===================================================
   PREMIUM SOCIAL-MEDIA SCHALTER (MIT SOFT-360° & KONTRAST-FIX)
   =================================================== */

/* Die Basis des Schalters */
.social-box-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  width: 44px !important;  
  height: 44px !important;
  border-radius: 50% !important; 
  
  background-color: transparent !important;
  border: 2px solid rgba(255, 215, 0, 0.4) !important; 
  color: var(--main-text) !important; 
  
  /* WICHTIG: Die Übergangszeit (Transition) wurde von 0.6s auf 0.8s erhöht, */
  /* damit das Auffüllen und Drehen spürbar ruhiger und edler abläuft */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.5s ease, 
              box-shadow 0.5s ease, 
              background-color 0.5s ease, 
              color 0.5s ease !important;
              
  text-decoration: none !important;
}

/* Das eigentliche Icon im Inneren */
.social-box-icon i {
  font-size: 20px !important; 
  line-height: 1 !important;
  display: inline-block !important;
  color: inherit !important; /* Erbt immer die Farbe des Haupt-Schalters */
  
  /* Bremst die Drehung des Icons ab (0.8 Sekunden statt 0.6 Sekunden) */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ===================================================
   DER INTERAKTIVE HOVER-EFFEKT (NUR FÜR PC-MONITORE)
   =================================================== */
@media (min-width: 1025px) {
  .social-box-icon:hover {
    background-color: #ffd700 !important; /* Schalter füllt sich mit Gold */
    border-color: #ffd700 !important;     /* Rahmen bleibt harmonisch gold */
    
    /* DIE RETTUNG FÜR DARK MODE: */
    /* Zwingt das Icon, anthrazit/schwarz zu werden. Dadurch poppt es auf dem Gelb perfekt hervor! */
    color: #121212 !important;            
    
    /* Goldener Schein mit sanfterer Deckkraft, damit es nicht blendet */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    
    /* Minimales, edles Anheben im Raum */
    transform: translate3d(0, -4px, 0) !important;
  }
  
  /* Ruhige, majestätische 360°-Drehung */
  .social-box-icon:hover i {
    color: #121212 !important; /* Doppelte Absicherung für das Icon */
    transform: rotate(360deg) scale(1.05) !important; /* Dreht sich elegant um die eigene Achse */
  }
}

/* --- TABLET- & SMARTPHONE-SCHUTZ --- */
@media (max-width: 1024px) {
  .social-box-icon {
    width: 46px !important; 
    height: 46px !important;
    border-color: #ffd700 !important; 
  }
}

/* ===================================================
   FOOTER SOCIAL-MEDIA ICONS (KOMPAKTE KREIS-SCHALTER)
   =================================================== */

/* Die Basis des Footer-Schalters - Etwas kleiner als in der Infobox */
.footer-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  width: 36px !important;   /* Kompaktere Größe für den Footer-Streifen */
  height: 36px !important;
  border-radius: 50% !important; /* Absolut kreisrund */
  margin-right: 8px !important;  /* Ersetzt Bootstraps starres me-4 für besseren Mobile-Fluss */
  
  background-color: transparent !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important; /* Zarterer Goldrahmen */
  color: var(--main-text) !important;
  
  /* Perfekt entschleunigte Übergangszeit analog Infobox */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.5s ease, 
              box-shadow 0.5s ease, 
              background-color 0.5s ease, 
              color 0.5s ease !important;
              
  text-decoration: none !important;
}

/* Das Icon im Inneren des Footer-Schalters */
.footer-social-icon i {
  font-size: 20px !important; /* Auf Ihre gewünschten 20px hochgeschraubt! */
  line-height: 1 !important;
  display: inline-block !important;
  color: inherit !important; 
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Letztes Element braucht keinen rechten Abstand */
.footer-social-icon:last-child {
  margin-right: 0 !important;
}

/* ===================================================
   INTERAKTIVER HOVER-EFFEKT FÜR DEN FOOTER (PC)
   =================================================== */
@media (min-width: 1025px) {
  .footer-social-icon:hover {
    background-color: #ffd700 !important; /* Schalter füllt sich vollflächig mit Gold */
    border-color: #ffd700 !important;
    
    /* DER KONTRAST-FIX: Icon wird dunkel auf Gold, perfekt lesbar im Dark Mode! */
    color: #121212 !important; 
    
    /* Feiner, edler Glow im Footer-Streifen */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    
    /* Sanftes Anheben im Raum */
    transform: translate3d(0, -3px, 0) !important;
  }
  
  /* Die majestätische 360°-Rotation */
  .footer-social-icon:hover i {
    color: #121212 !important; 
    transform: rotate(360deg) scale(1.05) !important; 
  }
}

/* --- MOBILE SICHERHEIT (SMARTPHONES & TABLETS) --- */
@media (max-width: 1024px) {
  .footer-social-icon {
    width: 40px !important;  /* Mobil etwas größer für leichtere Touch-Bedienung */
    height: 40px !important;
    border-color: #ffd700 !important; /* Festes Gold für bessere mobile Sichtbarkeit */
    margin-right: 12px !important;   /* Mehr Abstand für dicke Finger */
  }
}

/* ===================================================
   BACK TO TOP BUTTON (REPARIERT & BANNER-SICHER)
   =================================================== */
#btn-back-to-top {
  position: fixed !important;
  bottom: 25px !important;
  /* HIER DIE RETTUNG: Wir schieben den Button dezent nach LINKS (80px statt 20px), */
  /* damit er am PC elegant NEBEN Ihrem neuen Cookie-Banner schwebt! */
  right: 25px !important; 
  
  display: none; /* Wird vom JavaScript gesteuert */
  
  /* Ein extrem hoher Z-Index, damit er über dem Inhalt und dem Header steht, */
  /* aber unter dem Cookie-Banner (88888888) bleibt, wenn dieses aktiv ist */
  z-index: 999999 !important; 
  
  /* Edler Mi-Casa Gold-Look passend zu Ihren restlichen Schaltern */
  background-color: #ffd700 !important;
  border: 2px solid #ffd700 !important;
  color: #121212 !important; /* Dunkles Icon auf Gold für perfekten Kontrast */
  
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important; /* Absolut kreisrund */
  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Edler Hover-Effekt am PC */
@media (min-width: 1025px) {
  #btn-back-to-top:hover {
    background-color: #121212 !important; /* Invertiert die Farbe edel */
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    transform: scale(1.1) translate3d(0, -2px, 0) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
  }
}

/* --- AUTOMATISCHE WEICHE WENN DAS COOKIE-BANNER OFFEN IST --- */
/* Wenn das Cookie-Banner die Klasse ".show-banner" hat, schieben wir */
/* den Pfeil-Button am PC weiter nach links, damit er nicht verdeckt wird! */
#mc-cookie-banner.show-banner ~ #btn-back-to-top,
#mc-cookie-banner.show-banner ~ main #btn-back-to-top,
#mc-cookie-banner.show-banner ~ #wrapper #btn-back-to-top {
  right: 460px !important; /* Schiebt sich exakt links neben das geöffnete Banner */
}

/* --- SMARTPHONE-OPTIMIERUNG (unter 575px) --- */
@media (max-width: 575px) {
  #btn-back-to-top {
    bottom: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Wenn das Banner am Handy von unten hochfährt, schieben wir den */
  /* Pfeil-Button automatisch nach OBEN über das Banner drüber! */
  #mc-cookie-banner.show-banner ~ #btn-back-to-top,
  #mc-cookie-banner.show-banner ~ main #btn-back-to-top {
    bottom: 340px !important; /* Schiebt sich über das mobile Cookie-Gehäuse */
    right: 20px !important;
  }
}

.kontakt-btn,
.anfrage-btn {
	Z-Index: 99999 !important;
}

/* --- COOKIE BANNER LOGO STEUERUNG --- */

/* 1. Standard-Zustand für den Light Mode (Heller Hintergrund) */
#mc-cookie-banner .mc-cookie-logo a.dark {
  display: inline-block !important; /* Dunkles Logo anzeigen */
  background: none !important;
  border: none !important;
}

#mc-cookie-banner .mc-cookie-logo a.light {
  display: none !important;         /* Helles Logo im Lightmode verstecken */
}

/* 2. Zustand für den Dark Mode (body.dark ist aktiv) */
body.dark #mc-cookie-banner .mc-cookie-logo a.dark {
  display: none !important;         /* Dunkles Logo im Darkmode verstecken */
}

body.dark #mc-cookie-banner .mc-cookie-logo a.light {
  display: inline-block !important; /* Helles Logo anzeigen */
  background: none !important;
  border: none !important;
}

/* Sicherheits-Fix für die Logo-Bilder im Cookiebanner */
#mc-cookie-banner .mc-cookie-logo a img {
  background: transparent !important;
  box-shadow: none !important;
}