:root {
    /* MR AZIZ B2B Design Parameter 01 */
    --color-primary: #337241;
    --color-secondary: #2a9865;
    --color-tertiary: #6fd371;
    --color-dark: #0A170D;
    --color-surface: #F3F7F4;
    
    /* RGB-Werte für nahtlose Alpha-Transparenzen (rgba) */
    --color-primary-rgb: 51, 114, 65;
    --color-secondary-rgb: 42, 152, 101;
    --color-tertiary-rgb: 111, 211, 113;
    --color-dark-rgb: 10, 23, 13;
    --color-surface-rgb: 243, 247, 244;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-dark); 
    color: #FFFFFF;
    transition: background-color 0.8s ease-in-out; 
}

h1, h2 {
    font-family: 'Bodoni Moda', serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.hook-headline {
    font-family: 'Bodoni Moda', serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 80px !important;
    line-height: 1;
    color: #FFFFFF;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.light-theme {
    background-color: var(--color-surface);
    color: var(--color-dark); 
}

/* --- STARTBILDSCHIRM --- */
.gradient-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 1px;
    background: linear-gradient(to bottom, #ffffff 50%, #edb34f 50%);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
#logo-intro {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    
    /* HIER WIRD DAS HINTERGRUNDBILD GESETZT */
    background-image: url('BG02.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    transition: opacity 1.5s ease-in-out;
}

#intro-logo-img {
    height: 45vh; 
    width: auto;
    max-width: 90vw;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.9));
    transition: opacity 1.5s ease-in-out;
}

#start-btn-b2b:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(var(--color-tertiary-rgb), 0.5);
}

/* Karten als 3D-Flip-Container */
.flip-card {
    perspective: 1600px;
    position: relative;
    width: 256px !important;
    height: 256px !important;
    flex-shrink: 0;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
    border-radius: 1rem;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: inherit;
    overflow: hidden;
}

/* Animation für den metallischen Glanz (gespiegelte Diagonale) */
@keyframes metallicShine {
    0% { background-position: 0% 100%; }
    100% { background-position: 100% 0%; }
}

.flip-card-front {
    transform: rotateY(0deg);
    background: linear-gradient(45deg, #0b170e 0%, #001800 35%, #0b170e 50%, #001800 65%, #0b170e 100%);
    background-size: 300% 300%;
    animation: metallicShine 4s linear infinite alternate;
}

.flip-card-back {
    transform: rotateY(180deg);
    background-color: #cee3d4; /* Dein gewünschtes Pastellgrün */
    color: var(--color-dark);  /* Wechsel auf dunkle Schrift für perfekte Lesbarkeit */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    overflow: hidden;
}

.flip-card-back .tile-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.flip-card-back .tile-bg-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent; /* Zusätzliche dunkle Verläufe komplett deaktiviert */
    pointer-events: none;
}

.flip-card-back .tile-bg-image {
    display: none;
}

.flip-card-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent; /* Dunkles Overlay entfernt, damit das Pastellgrün klar bleibt */
    z-index: 1;
}

.card-back-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
}

.flip-card-back h3,
.flip-card-back p,
.flip-card-back button {
    position: relative;
    z-index: 2;
}

.flip-card:hover .tile-bg-image {
    transform: scale(1.05);
}

.tile-bg-image {
    background-size: cover;
    background-position: center;
}

#cinematic-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    object-fit: contain;
    object-position: center;
    background: linear-gradient(to right, #000000 50%, #33CC66 50%); 
    z-index: 1;
    transition: opacity 5.0s ease-in-out;
    will-change: opacity;
}

#cinematic-bg.fade-out { opacity: 0; }

/* --- KINO-BALKEN (SHUTTER) --- */

/* 1. Die Container: Exakt 50% der Höhe und "schneiden" alles ab, was übersteht */
.shutter {
    position: fixed; /* 'fixed' ist hier noch sicherer als 'absolute' */
    left: 0;
    width: 100vw;
    height: 50vh;
    z-index: 50;
    overflow: hidden; /* Der wichtigste Befehl: Schneidet das innere 100vh-Bild ab */
    transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#shutter-top { 
    top: 0; 
}

#shutter-bottom { 
    bottom: 0; 
}

/* 2. Die virtuellen Bilder in den Shuttern: Immer 100% Bildschirmgröße */
.shutter::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh; /* Zwingt das Bild auf die VOLLE Höhe, nicht nur auf die 50vh des Balkens */
    background-image: url('BG02.jpg');
    background-size: cover; /* Jetzt skaliert es exakt so weich wie dein erstes Bild */
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* 3. Ausrichtung der virtuellen Bilder */
#shutter-top::before {
    top: 0; /* Das obere Bild fängt ganz oben an */
}

#shutter-bottom::before {
    bottom: 0; /* Das untere Bild wird am unteren Bildschirmrand verankert */
}

/* 4. Das Öffnen (Animation) */
.shutters-open #shutter-top { transform: translateY(-100%); }
.shutters-open #shutter-bottom { transform: translateY(100%); }

/* 5. Das gesplittete Logo im Shutter */
.shutter-content {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

#shutter-top .shutter-content {
    top: 0;
}

#shutter-bottom .shutter-content {
    bottom: 0;
}

.shutter-content img {
    width: auto;
    height: 45vh;
    max-width: 90vw;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.9));
}

#video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(circle, rgba(var(--color-dark-rgb),0.3) 0%, rgba(var(--color-dark-rgb),0.0) 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}
#video-overlay.dim-active { opacity: 1; }

/* --- TEXT IM VIDEO --- */
#intro-question {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw, 177.78vh); /* Bildet exakt die 16:9-Breite des Videos ab */
    height: min(56.25vw, 100vh); /* Bildet exakt die 16:9-Höhe des Videos ab */
    transform: translate(-50%, -50%); /* Zentriert die Text-Bühne exakt auf dem Video */
    z-index: 40;
    pointer-events: none;
    opacity: 1;
    transition: opacity 5.0s ease-in-out;
}

.intro-text-container {
    position: absolute;
    /* Startet exakt zentriert in der Mitte der Video-Bühne */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center; /* Text innerhalb der Zeilen zentrieren */
    text-align: center;
    gap: 1.5vh;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); /* Aktiviert flüssiges Gleiten */
}

/* Schnellere, dynamische Verkleinerung der linken Kernfrage */
/* Wenn .shift-left aktiv wird: Ganzer Container fliegt nach oben links */
#intro-question.shift-left .intro-text-container {
    top: 6%;
    left: 6%;
    transform: translate(0, 0); /* Hebt die Zentrierung auf */
    align-items: flex-start;    /* Richtet den Text linksbündig aus */
    text-align: left;
}

/* Gleichzeitig wird die Schriftgröße wie gewünscht rasant verkleinert */
#intro-question.shift-left .intro-q-line {
    font-size: min(1.8vw, 3.2vh) !important;
    transition: font-size 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-q-line {
    display: flex;
    gap: 0.35em; 
    font-size: min(4vw, 7.11vh);
    font-weight: 900; 
    line-height: 1.1;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
    text-shadow: 0 4px 30px rgba(0,0,0,0.9);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1), color 1s ease, text-shadow 1s ease;
}

.intro-q-line.show-line {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

#intro-question.anchor-mode .intro-q-line {
    color: var(--color-dark); 
    text-shadow: none; 
}
#intro-question.anchor-mode .text-tertiary {
    color: var(--color-primary) !important; 
}

/* --- HELLE B2B OBERFLÄCHE --- */
#main-ui {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in; 
}

#main-ui.show-ui {
    opacity: 1;
    pointer-events: auto;
}

.hook-headline {
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.fade-element {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-element.show-item {
    opacity: 1;
    transform: translateX(0);
}

/* --- STAGE & PANEL ANIMATIONEN --- */
.content-panel {
    position: absolute;
    inset: 0;
    will-change: transform, filter;
}

/* 1. Formular: Liegt permanent im Hintergrund */
.panel-form {
    z-index: 10;
}

/* 1b. Weiche (Kacheln): Liegt vor Home, weicht nach links bei B2B-Wahl */
.panel-switch {
    z-index: 25;
    background: #E8EDE9;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 1c. Under Construction: Schiebt sich von rechts vor die Weiche */
.panel-construction {
    z-index: 35;
    transform: translateX(100%);
    background: #E8EDE9;
    box-shadow: -20px 0 60px rgba(0,0,0,0.15);
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 2. Home: Mittlere Ebene, schiebt sich für Formular weg, dunkelt für Info ab */
.panel-home {
    z-index: 20;
    background: #E8EDE9;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), filter 1s ease;
}

/* 3. Info: Oberste Ebene, schiebt sich von links herein */
.panel-info {
    z-index: 30;
    transform: translateX(-100%);
    box-shadow: 20px 0 60px rgba(0,0,0,0.15);
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* AKTION 0a: B2B gewählt -> Weiche nach links wegfahren */
#right-stage.hide-switch .panel-switch {
    transform: translateX(-100%);
    pointer-events: none;
}

/* AKTION 0b: Gastro gewählt -> Under Construction von rechts reinschieben */
#right-stage.show-construction .panel-construction {
    transform: translateX(0);
}

/* AKTION 1: Formular aufrufen -> Home schiebt sich nach links weg */
#right-stage.show-form .panel-home {
    transform: translateX(-100%);
    pointer-events: none;
}

/* AKTION 2: Info aufrufen -> Home bleibt stehen & dunkelt ab */
#right-stage.show-info .panel-home {
    pointer-events: none;
    filter: brightness(0.6);
}

/* Info-Panel schiebt sich von links über Home */
#right-stage.show-info .panel-info {
    transform: translateX(0);
}


/* Zoom-Effekt: Fester oberer Rand, Expansion nach unten */
/* Animation für den allerersten Seitenaufruf */
@keyframes handsEntrance {
    from {
        transform: scale(0.4); /* Startgröße beim Laden (kleiner) */
        opacity: 0;            /* Start-Sichtbarkeit */
    }
    to {
        transform: scale(1) translateY(0);   /* Endgröße im Normalzustand */
        opacity: 1;            /* Voll sichtbar */
    }
}

/* Zoom-Effekt: Fester oberer Rand, Expansion nach unten */
.symbol-zoom {
    /* Fest definierter Grundzustand für weiche Übergänge */
    transform: scale(1) translateY(0);
    opacity: 1;
    
    transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
    
    /* Animation OHNE "forwards", übergibt am Ende an den Grundzustand */
    animation: handsEntrance 3.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .symbol-zoom {
    transform: scale(2.0) translateY(10px);
}

/* Statische Headline im UI */
.intro-q-line-static {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Positionierung der Spezifikations-Box im B2B Layout */
#specification-box {
    transform: translate(0px, 0px); /* Erste Zahl = Horizontal (X), Zweite Zahl = Vertikal (Y) */
}

/* Grüne Welle über dem Video inkl. Logo und Text */
#video-footer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 35vh; /* Steuert die Höhe der Welle */
    z-index: 5; /* Liegt über dem Video (1), aber unter dem Text (40) */
    pointer-events: none;
    transition: opacity 5.0s ease-in-out;
}

#video-footer-overlay.fade-out {
    opacity: 0;
}

#video-wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    max-width: none;
    height: 100%;
    object-fit: fill;
}

#video-footer-content {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw; /* Abstand zum linken und rechten Rand */
}

#video-footer-logo {
    height: 60%; /* Skaliert das Logo passend zur Welle */
    object-fit: contain;
}

#video-footer-text {
    text-align: right;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0px 2px 5px rgb(0, 0, 0);
    
    /* HIER DIE POSITION IN PIXELN ANPASSEN */
    transform: translate(-75px, 50px); /* Erste Zahl = Horizontal (X), Zweite Zahl = Vertikal (Y) */
}

#video-footer-text p:first-child {
    /* HIER DIE SCHRIFTGRÖSSE FÜR 'QUALITÄT DIE ÜBERZEUGT' ANPASSEN */
    font-size: 40px; 
    
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: 0.05em;
}

#video-footer-text p:last-child {
    /* HIER DIE SCHRIFTGRÖSSE FÜR DEN UNTERTEXT ANPASSEN */
    font-size: 24px; 
    
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- INTRO MANIFEST (Startet direkt oben links und schrumpft vor Ort) --- */

#intro-manifest {
    position: absolute;
    /* JETZT DIREKT AN DER FINALEN POSITION UNTER DER FRAGE */
    top: 19%;                  
    left: 6%;                  
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
    padding: 3vw 4vw;
    
    /* Milchglas-Effekt */
    background: rgba(var(--color-dark-rgb), 0.45); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-left: 6px solid var(--color-tertiary);
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    
    /* Der visuelle Anker: Schrumpfen orientiert sich an der oberen linken Ecke */
    transform-origin: top left;
    
    /* Startzustand: Erscheint dezent an Ort und Stelle ohne weiten Flug */
    opacity: 0;
    transform: translateY(15px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 45;
}

/* Wird bei Sekunde 28 aktiv: Box blendet sich GROSS oben links ein */
#intro-manifest.show-manifest {
    opacity: 1;
    transform: translateY(0);
}

.manifest-title {
    font-family: 'Bodoni Moda', serif !important;
    font-size: min(3.5vw, 6vh);
    font-weight: 700;
    color: var(--color-tertiary);
    margin-bottom: 1.5vh;
    letter-spacing: 0.05em;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    text-transform: uppercase;
}

.manifest-item {
    font-family: 'Montserrat', sans-serif;
    font-size: min(2vw, 3.5vh);
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 1vw;
    
    opacity: 0;
    transform: translateY(20px);
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.manifest-item::before {
    content: '✓';
    color: var(--color-tertiary);
    font-size: 1.4em;
    font-weight: 900;
    filter: drop-shadow(0 0 10px rgba(111, 211, 113, 0.4));
}

.manifest-item.show-item {
    opacity: 1;
    transform: translateY(0);
}

/* --- ZUSTAND: SCHRUMPFEN VOR ORT (Ab Sekunde 36) --- */

#intro-manifest.shrink-manifest {
    /* Position bleibt absolut identisch, kein Fliegen mehr! */
    top: 19%;
    left: 6%;
    transform: translateY(0); /* Verhindert das Zurückspringen in den Startzustand */
    
    /* Nur die Box-Dimensionen und Texte komprimieren sich */
    padding: 1.5vw 2vw;        
    gap: 1vh;                  
    background: rgba(var(--color-dark-rgb), 0.3); 
    border-left-width: 4px;    
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* Schriftgrößen im verkleinerten Zustand vor Ort */
#intro-manifest.shrink-manifest .manifest-title {
    font-size: min(1.4vw, 2.5vh);
    margin-bottom: 0.5vh;
}

#intro-manifest.shrink-manifest .manifest-item {
    font-size: min(1.1vw, 2vh);
    gap: 0.6vw;
}

/* --- STATISCHE UI-ÜBERSCHRIFT (Frei positionierbar) --- */

.ui-headline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.35em; /* Exakt der gleiche Zeilenabstand wie im Intro */
    white-space: nowrap; /* Verhindert das ungewollte Umbrechen des Textes */
    z-index: 50;

    /* HIER KANNST DU DIE POSITION WIEDER FREI STEUERN */
    /* Erste Zahl (X-Achse): positiv = rechts, negativ = links (z.B. -20px) */
    /* Zweite Zahl (Y-Achse): positiv = unten, negativ = oben (z.B. -10px) */
    transform: translate(0px, 0px); 
}

.ui-static-line {
    display: flex;
    gap: 0.35em; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; 
    line-height: 1.1;
    
    /* Exakt die finale Schriftgröße der fliegenden Intro-Frage */
    font-size: min(1.8vw, 3.2vh); 
    
    color: var(--color-dark); 
}

/* Übernimmt die grüne Primärfarbe für die unteren Wörter */
.ui-static-line.text-primary {
    color: var(--color-primary) !important;
}

/* Erhöhe den Z-Index der Intro-Inhalte, um sicherzugehen */
#logo-intro {
    z-index: 200 !important; /* Deutlich höher als Shutter (50) */
}

/* Sicherstellen, dass die Shutter das Logo nicht schon vorher verdecken */
.shutter {
    z-index: 50;
}

/* --- DYNAMISCHE ACTION-CARDS (RECHTE SEITE) --- */
.action-card {
    color: #FFFFFF !important; /* Globaler Text-Inversions-Erzwinger für Weiß */
    padding: 2.5rem;
    border-radius: 0.375rem;
    position: relative;
    box-shadow: 0 12px 30px rgba(10, 23, 13, 0.12);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 2px solid transparent;
}

/* Optimierte, kontraststarke Textgestaltung für perfekte Lesbarkeit */
.action-card h3 {
    color: var(--color-dark) !important; /* Wechsel auf edles Dunkelgrün */
    font-size: 1.35rem !important;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.action-card p {
    color: var(--color-dark) !important; /* Wechsel auf edles Dunkelgrün */
    font-weight: 500; /* Subtil reduziert, damit die Buchstaben nicht zulaufen */
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Aktivierender Button am Fuß */
.action-card .card-action-btn {
    width: 100%;
    color: #FFFFFF;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    padding: 1.15rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.25rem;
    margin-top: auto;
    transition: all 0.4s ease;
    border: none;
}

/* Variante B2B: Startet im freundlichen Hellgrün, dunkelt beim Hovern saftig ab */
.action-card.card-b2b {
    background-color: #DCEFE2; /* Das freundliche, helle Grün von Anfang an */
    border: 2px solid rgba(51, 114, 65, 0.3);
}
.action-card.card-b2b .card-action-btn {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.action-card.card-b2b:hover {
    transform: translateY(-8px);
    background-color: #B2DFBF; /* Wird beim Mouseover knackig und satt dunkler */
    box-shadow: 0 20px 40px rgba(51, 114, 65, 0.15);
}
.action-card.card-b2b:hover .card-action-btn {
    background-color: var(--color-dark);
}

/* Variante Gastro: Startet im frischen Minz-Smaragd, dunkelt beim Hovern ab */
.action-card.card-gastro {
    background-color: #D6F5E6; /* Das vitale, frische Hellgrün von Anfang an */
    border: 2px solid rgba(42, 152, 101, 0.3);
}
.action-card.card-gastro .card-action-btn {
    background-color: var(--color-secondary);
    color: #FFFFFF;
}
.action-card.card-gastro:hover {
    transform: translateY(-8px);
    background-color: #1E6E49; /* Wechsel auf dunkleres Grün im Hover für perfekten Weiß-Kontrast */
    box-shadow: 0 20px 40px rgba(42, 152, 101, 0.3);
}
.action-card.card-gastro:hover h3,
.action-card.card-gastro:hover p {
    color: #FFFFFF !important; /* Text schaltet bei Mouseover auf reines Weiß */
}
.action-card.card-gastro:hover .card-action-btn {
    background-color: var(--color-dark);
}

/* --- STYLING FÜR DIE INFO-KACHELN (LINKE SEITE) --- */
.info-tile {
    background-color: #EBF3ED; 
    border: 2px solid rgba(51, 114, 65, 0.15);
    border-left: 6px solid var(--color-primary);
    padding: 1.15rem 1.25rem; /* Kompakterer Innenabstand für ein schlankes Design */
    border-radius: 0.375rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-tile h3 {
    color: var(--color-dark) !important;
    font-size: 1.0rem !important; /* Modifiziert: Leicht verkleinert für perfekten Zeilenfluss langer Wörter */
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.info-tile p {
    color: var(--color-dark) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important; /* Optimierte Lesegröße für Fließtext in kompakten Boxen */
    line-height: 1.5;
    transition: color 0.4s ease;
}

/* Hover-Inversion für Info-Kacheln */
.info-tile:hover {
    transform: translateY(-4px);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 12px 24px rgba(51, 114, 65, 0.12);
}

.info-tile:hover h3,
.info-tile:hover p {
    color: #FFFFFF !important; 
}

/* --- STYLING FÜR DIE REPLAY-SONDERKACHEL --- */
#btn-replay-intro-panel {
    /* Bild-Hintergrund mit integriertem, hellem Farbfilter für perfekte Typo-Lesbarkeit */
    background-image: linear-gradient(rgba(214, 245, 230, 0.85), rgba(214, 245, 230, 0.85)), url('intropic.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(42, 152, 101, 0.2);
    border-left: 6px solid var(--color-secondary);
    border-radius: 0.375rem;
    padding: 1.15rem 1.25rem; /* Absolut synchron zu den Info-Kacheln */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#btn-replay-intro-panel h3 {
    color: var(--color-dark) !important;
    font-size: 1.0rem !important; /* Synchron herabgesetzt für einheitliche Optik */
    transition: color 0.4s ease;
}

#btn-replay-intro-panel p {
    color: var(--color-dark) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: color 0.4s ease;
}

#btn-replay-intro-panel i {
    color: var(--color-secondary);
    transition: all 0.4s ease;
}

/* Hover-Inversion für Replay-Kachel mit Abdunklung des Bild-Hintergrunds */
#btn-replay-intro-panel:hover {
    transform: translateY(-4px);
    background-image: linear-gradient(rgba(42, 152, 101, 0.9), rgba(42, 152, 101, 0.9)), url('intropic.jpg');
    border-color: var(--color-secondary);
    box-shadow: 0 12px 24px rgba(42, 152, 101, 0.12);
}

#btn-replay-intro-panel:hover h3,
#btn-replay-intro-panel:hover p,
#btn-replay-intro-panel:hover i {
    color: #FFFFFF !important;
}

/* --- ERWEITERUNG: SYNCHRONISATION PANELS & SIZES --- */

/* Isolierter Offset für den Text im Detail-Slide (beeinflusst keine Nachbar-Container) */
.detail-text-offset {
    margin-top: clamp(2rem, 8.8vh, 10rem);
}

/* Schiebe-Animation für das Kachel-Detail-Panel */
#right-stage.show-info-detail .panel-info-detail {
    transform: translateX(0);
    z-index: 50;
}
#right-stage.show-info-detail .panel-info {
    filter: brightness(0.6);
    pointer-events: none;
}

/* Schiebe-Animation für das neue Fragen-Formular */
#right-stage.show-questions-form .panel-questions-form {
    transform: translateX(0);
    z-index: 55;
}

/* SYSTEM-SCHUTZ: Viewport Blocker bei verkleinertem Browserfenster */
#viewport-guard {
    display: none;
}

/* Aktivierung sobald das Fenster unter 1024px Breite ODER unter 740px Höhe fällt */
@media (max-width: 1023px), (max-height: 740px) {
    #viewport-guard {
        display: flex !important;
    }
}