/* FARBAUDIT 21.08.2026 (Sitzung FARBEN, Auftrag Yunus "farbliche Uebereinstimmung"): verbotene Flaechentoene auf die Systemflaeche #f6f5f3 gezogen. Aenderungen unten je Datei benannt; Rueckbau ueber .bak-farbaudit-20260821. Struktur/Selektoren unberuehrt. */
/* Geaendert:
   #faf7f2 -> #f6f5f3  (18er-Gate Panel + Inhaltsspalte (war Creme))
   #f1efec -> #e4e4e7  (18er-Gate Nein-Button Hover)
*/
/* ============================================================
   FOGSMOKE 18er-Popup — Reskin der bestehenden Altersprüfung
   (Sitzung POPUP, 20.08.2026; Markup aus fs-agegate.js)

   Freigegebene Visualisierung: zweigeteilte Karte max. 1040px,
   40% Posterfläche / 60% Info, fast eckig (2–4px), ab ≤749px
   Bottom-Sheet. Schriften: "FS Display" (Anton) + "FS Body"
   (DM Sans). Akzent #830779. Alles unter #fs-agegate bzw.
   html.fs-ag-offen gescoped — keine globalen Regeln.

   Letzter Block: blendet das Modal des Live-Plugins
   alters_ueberpruefung (#age_check) aus, dessen Logik diese
   Komponente übernimmt. Nur EIN Popup sichtbar.
   ============================================================ */

html.fs-ag-offen,
html.fs-ag-offen body {
    overflow: hidden;
}

#fs-agegate {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#fs-agegate .fs-ag-schleier {
    position: absolute;
    inset: 0;
    background: rgba(14, 12, 16, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 180ms ease-out;
}

#fs-agegate.fs-ag-an .fs-ag-schleier { opacity: 1; }
#fs-agegate.fs-ag-zu .fs-ag-schleier { opacity: 0; transition-duration: 200ms; }

#fs-agegate .fs-ag-dialog {
    position: relative;
    width: 100%;
    /* KOMPAKTER, Ansage Yunus 21.08.: "um 20-30px von allen Seiten kleiner".
       25px je Seite genommen, also -50 in Breite UND Hoehe:
       Breite  1040 -> 990   (hier)
       Hoehe    560 -> 510   (min-height der Posterflaeche, weiter unten)
       Gemessen vorher 1040x567. Die Hoehe kommt NICHT vom Inhalt: die rechte
       Spalte braucht 339px Inhalt + 48/32 Polster = 419px. Getragen wird die
       Hoehe allein von der min-height des Posters — deshalb steht die
       Hoehenaenderung dort und nicht hier. Nur Desktop; die mobilen Deckel
       (560px Sheet / 430px zentriert) sind eigene Regeln und unberuehrt. */
    max-width: 990px;
    display: grid;
    grid-template-columns: 40% 60%;
    /* KANON, Ansage Yunus 21.08.: "das Gate sollte keine Ausnahme sein".
       fs-kanon.css hat den Shop auf Radius 0 gezogen; diese Karte war die
       letzte groessere Ausnahme (Desktop 3px, mobil 2x 4px). Alle drei auf 0.
       Rund bleiben nur Dinge, die von Natur aus rund sind: der 18+-Kreis
       (border-radius:50%) und der Sheet-Griff. */
    border-radius: 0;
    overflow: hidden;
    /* KARTE WIE DIE FAMILIE (21.08.): Haarlinie, 3px-Magenta-Oberkante und
       derselbe weiche Schatten wie Cookie-Banner und Rubbellos. Vorher hatte
       das Gate als einziges gar keine Kante und einen flacheren Schatten
       (0 10px 34px). Die Oberkante MUSS nach der Kurzform `border` stehen. */
    border: 1px solid var(--brand-haar);
    border-top: 3px solid #e5169f;
    box-shadow: 0 18px 48px rgba(17, 17, 20, .28);
    /* WEISS, Entscheidung Yunus 21.08.: "alle auf #ffffff".
       Vorgeschichte, damit sie niemand rueckgaengig macht in gutem Glauben:
       Das Farbsystem vom 20.08. kennt EINEN Flaechenton #f6f5f3, und die
       Sitzung FARBEN hatte das Gate am 21.08. von Creme #faf7f2 darauf
       gezogen. Am selben Tag hat Yunus aber den Cookie-Banner ausdruecklich
       als "Haarlinie WIE DAS RUBBELLOS" freigegeben — und `.fogrl-modal`
       ist `--fogrl-card:#ffffff`. Damit standen zwei Flaechentoene
       nebeneinander. Yunus hat entschieden: alle drei Overlays auf #ffffff.
       Die Systemflaeche #f6f5f3 bleibt fuer den ganzen uebrigen Shop gueltig
       — sie gilt nur fuer diese drei Overlay-Karten nicht mehr. */
    background: #ffffff;
    opacity: 0;
    transform: translateY(12px) scale(.985);
    transition: opacity 240ms ease-out, transform 240ms ease-out;
    outline: none;
}

#fs-agegate.fs-ag-an .fs-ag-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#fs-agegate.fs-ag-zu .fs-ag-dialog {
    opacity: 0;
    transform: none;
    transition: opacity 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    #fs-agegate .fs-ag-schleier,
    #fs-agegate .fs-ag-dialog {
        transition: none;
        opacity: 1;
        transform: none;
    }
    #fs-agegate.fs-ag-zu .fs-ag-schleier,
    #fs-agegate.fs-ag-zu .fs-ag-dialog { opacity: 0; }
}

/* ---------- linke Posterfläche (randlos) ---------- */

#fs-agegate .fs-ag-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 560 -> 510. WICHTIG, sonst sucht der Naechste an der falschen Stelle:
       die Kartenhoehe ist das MAXIMUM aus dieser min-height und der rechten
       Inhaltsspalte. Vorher trug die Spalte (567) die Hoehe, das Poster (560)
       war unbeteiligt — nur das Poster zu kuerzen brachte deshalb nichts
       (gemessen: blieb bei 567). Nach dem Kuerzen der Spalte auf 517 kippte
       die Fuehrung ans Poster, und nur die Spalte zu kuerzen brachte auch
       nichts (gemessen: blieb bei 560). Es braucht BEIDE Schrauben.
       Jetzt: max(510, 517) = 517. */
    min-height: 510px;
    background:
        /* raue Print-Textur, sehr geringe Deckkraft */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        linear-gradient(160deg, #232025 0%, #121013 55%, #0a090b 100%);
    overflow: hidden;
}

#fs-agegate .fs-ag-poster-kopf,
#fs-agegate .fs-ag-poster-fuss {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .22em;
    color: #d8d5da;
    z-index: 3;
}

#fs-agegate .fs-ag-poster-kopf { top: 28px; }
#fs-agegate .fs-ag-poster-fuss { bottom: 24px; }

/* dünner Lila-Kreis um das 18+ */
#fs-agegate .fs-ag-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(72%, 300px);
    aspect-ratio: 1;
    border: 2px solid #830779;
    border-radius: 50%;
    z-index: 2;
}

#fs-agegate .fs-ag-18 {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-size: clamp(96px, 16vw, 150px);
    line-height: 1;
    color: #efedea;
    transform: translateY(2px);
}

/* breites, leicht diagonales Band im unteren Drittel */
#fs-agegate .fs-ag-poster::after {
    content: "";
    position: absolute;
    left: -12%;
    bottom: 21%;
    width: 124%;
    height: 64px;
    background: #830779;
    transform: rotate(-7deg);
    z-index: 1;
}

/* ---------- rechte Informationsfläche ---------- */

#fs-agegate .fs-ag-inhalt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* KOMPAKTER, Ansage Yunus 21.08. ("20-30px von allen Seiten").
       Die Karte war 1040x567. Breite kam ueber max-width (siehe .fs-ag-dialog).
       Die HOEHE entsteht hier: 48 Polster + 360 Inhalt + 128 Abstaende + 32
       Polster = 568. Gemessen, nicht geschaetzt — mit ausgeblendeter
       Inhaltsspalte bleibt die Karte bei 510 (Poster-min-height), mit
       ausgeblendetem Poster bei 567. Also wird hier geholt: 22px aus dem
       Polster, 28px aus den Abstaenden = 50px, wie in der Breite. */
    padding: 34px 56px 24px;
    background: #ffffff;     /* siehe Begruendung an .fs-ag-dialog */
    text-align: left;
}

#fs-agegate .fs-ag-logo {
    width: min(300px, 78%);
    height: auto;
    display: block;
}

#fs-agegate .fs-ag-linie {
    display: block;
    width: 56px;
    height: 4px;
    background: #830779;
    margin: 10px 0 8px;      /* -6px (kompakter, 21.08.) */
}

#fs-agegate .fs-ag-eyebrow {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .14em;
    color: #111114;          /* Kanon-Ink, war #17151a (21.08.) */
    margin: 0 0 14px;        /* -8px (kompakter, 21.08.) */
}

#fs-agegate .fs-ag-intro {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .18em;
    color: #830779;
    margin: 0 0 6px;
}

#fs-agegate .fs-ag-frage {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.08;
    color: #111114;          /* Kanon-Ink, war #17151a (21.08.) */
    margin: 0 0 10px;        /* -2px (kompakter, 21.08.) */
}

#fs-agegate .fs-ag-text {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #333136;
    margin: 0 0 12px;        /* -2px (kompakter, 21.08.) */
}

#fs-agegate .fs-ag-humor {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    color: #111114;          /* Kanon-Ink, war #17151a (21.08.) */
    margin: 0 0 16px;        /* -6px (kompakter, 21.08.) */
}

/* ---------- Buttons ---------- */

/* KNOPFKANTE ANGEGLICHEN — Ansage Yunus 21.08.: "beim 18er Banner die
   Button-Rahmen machen wie bei den anderen 2".
   Gemessen vorher: Kantenstaerke war mit 1px schon gleich, abgewichen ist
   allein der RADIUS — Age-Gate 2px, Cookie-Banner und Rubbellos beide 0.
   fs-kanon.css hat den Shop auf Radius 0 gezogen; die Knoepfe hier waren
   eine der letzten Ausnahmen. Der Dialog-Radius (3px Desktop / 4px mobil)
   bleibt bewusst stehen — danach war nicht gefragt.
   Ink auf #111114 (Kanon-Ton) statt #17151a, wie in fs-consent.css und
   fs-rubbellos.css. Optisch nicht unterscheidbar, aber ein Ton weniger. */
#fs-agegate .fs-ag-ja,
#fs-agegate .fs-ag-nein {
    width: 100%;
    min-height: 52px;
    border-radius: 0;
    /* KNOPFSCHRIFT, Ansage Yunus 22.08. ("zieh es einfach durch").
       Gemessen zuerst, statt die Mehrheit von dreien zu nehmen: auf der
       Startseite tragen die herausgehobenen CTAs **Anton 400 bei 15px**
       (8 Treffer, u.a. der ANMELDEN-Knopf des Newsletters). Das Rubbellos
       lag damit richtig, Gate und Consent waren die Abweichler — nicht
       umgekehrt, wie ich zuerst vermutet hatte.
       Anton hat nur EINEN Schnitt: font-weight MUSS 400 sein, sonst
       synthetisiert der Browser eine Fettung (Kanon-Regel, fs-kanon.css). */
    font-family: "FS Display", "FS Body", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    /* Kanon-Leiter fs-kanon.css Abschnitt 10: Stufe L = 52px Hoehe bei 15px
       Schrift ("herausgehoben: Primaer-CTA, Anmelden, Age-Gate"). Die Hoehe
       stimmte schon, die Schrift lag bei 16px. Jetzt tragen alle drei
       Overlays dieselbe Stufe. */
    font-size: 15px;
    letter-spacing: .06em;
    cursor: pointer;
    padding: 12px 18px;
}

/* KANON-MAGENTA, Ansage Yunus 21.08. ("das passen wir gleich endgueltig an").
   Befund: der Shop fuhr zwei Primaer-Magentas — Age-Gate #830779, Rubbellos
   #c90f88. Das Farbsystem kennt EINEN CTA-Ton: #c90f88, mit #830779 als
   Hover-/Flaechenton. Das Gate benutzte also den Hover-Ton als Grundfarbe.
   Der alte Hover #6a0562 war zudem einer der fuenf verstreuten Dunkel-
   Magentas, die im Farbaudit vom 21.08. als Drift benannt sind — faellt weg.
   Kontrast weiss auf Fuellung: 9,24:1 vorher -> 5,37:1 jetzt. Der Knopftext
   ist 16px/700, also KEIN "grosser Text" nach WCAG — Schwelle 4,5:1, gemessen
   eingehalten. Geprueft, nicht geschaetzt. */
#fs-agegate .fs-ag-ja {
    background: #c90f88;
    border: 1px solid #c90f88;
    color: #ffffff;
    margin: 0 0 10px;
}

#fs-agegate .fs-ag-ja:hover { background: #830779; border-color: #830779; }

#fs-agegate .fs-ag-nein {
    background: #ffffff;
    border: 1px solid #111114;
    color: #111114;
    margin: 0;
}

#fs-agegate .fs-ag-nein:hover { background: #e4e4e7; }

/* KLICK- UND FOKUSGESTE ANGEGLICHEN — Ansage Yunus 21.08.: "der Klickeffekt
   auf dem Button, da war beim 18er Banner aussen ein extra Rahmen".
   Das war dieser Ring: 3px SCHWARZ. Er ist korrektes Tastaturverhalten
   (das Gate fokussiert den Ja-Knopf beim Oeffnen programmatisch, deshalb
   sieht man ihn sofort) — aber er war doppelt so dick und in einer anderen
   Farbe als bei den anderen beiden Overlays:
       fs-consent.css:158   2px solid #e5169f, offset 2px
       fs-rubbellos.css:239 2px solid #e5169f, offset 3px/2px
   Jetzt derselbe Ring. NICHT entfernt: ohne sichtbaren Fokus ist das Gate
   per Tastatur unbedienbar, und das Gate ist die erste Huerde der Seite. */
#fs-agegate .fs-ag-ja:focus-visible,
#fs-agegate .fs-ag-nein:focus-visible {
    outline: 2px solid #e5169f;
    outline-offset: 2px;
}

/* Druckgeste wie .fogrl-btn (fs-rubbellos.css:238) — der Knopf gibt beim
   Klicken um 1px nach. Vorher hatte das Gate gar keine. */
#fs-agegate .fs-ag-ja:active,
#fs-agegate .fs-ag-nein:active {
    transform: translateY(1px);
}

#fs-agegate .fs-ag-zustellung {
    width: 100%;
    text-align: center;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    color: #5c5a60;
    margin: 14px 0 0;        /* -4px (kompakter, 21.08.) */
}

/* Handle nur mobil */
#fs-agegate .fs-ag-griff { display: none; }

/* ---------- Zwischenbreiten: Karte schmaler, Poster kürzer ---------- */

@media (min-width: 750px) and (max-width: 991px) {
    #fs-agegate .fs-ag-poster { min-height: 460px; }
    #fs-agegate .fs-ag-inhalt { padding: 36px 36px 26px; }
}

/* ---------- Mobile ≤749px: Bottom-Sheet ---------- */

@media (max-width: 749px) {
    #fs-agegate {
        align-items: flex-end;
        justify-content: center;
        padding: 12px;
    }

    /* Sheet nimmt ~60% der Bildschirmhöhe ein — die Seite bleibt
       dahinter leicht verschwommen sichtbar (Vorgabe Yunus, 20.08.) */
    #fs-agegate .fs-ag-dialog {
        display: flex;
        flex-direction: column;
        max-width: 560px;
        max-height: 60vh;
        max-height: 60dvh;
        border-radius: 0;
    }

    /* heller als Desktop, damit die Seite erkennbar durchscheint */
    #fs-agegate .fs-ag-schleier {
        background: rgba(14, 12, 16, .5);
    }

    #fs-agegate .fs-ag-griff {
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .55);
        z-index: 4;
    }

    /* kompakte Posterfläche: 18+, Kreis und Band bleiben sichtbar */
    #fs-agegate .fs-ag-poster {
        min-height: 0;
        height: 118px;
        flex: 0 0 auto;
    }

    #fs-agegate .fs-ag-poster-kopf {
        top: 20px;
        font-size: 10px;
    }

    #fs-agegate .fs-ag-poster-fuss {
        bottom: 10px;
        font-size: 10px;
    }

    #fs-agegate .fs-ag-kreis {
        width: 78px;
        border-width: 1.5px;
        margin-top: 2px;
    }

    #fs-agegate .fs-ag-18 { font-size: 40px; }

    #fs-agegate .fs-ag-poster-kopf { top: 14px; }
    #fs-agegate .fs-ag-poster-fuss { bottom: 7px; }

    #fs-agegate .fs-ag-poster::after {
        height: 24px;
        bottom: 18%;
    }

    /* nur der Inhalt scrollt */
    #fs-agegate .fs-ag-inhalt {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 10px;
    }

    #fs-agegate .fs-ag-logo { width: min(175px, 58%); }

    #fs-agegate .fs-ag-linie { margin: 8px 0 6px; }

    #fs-agegate .fs-ag-eyebrow { font-size: 12px; margin-bottom: 8px; }

    #fs-agegate .fs-ag-intro { font-size: 12px; margin-bottom: 4px; }

    #fs-agegate .fs-ag-frage { font-size: clamp(24px, 7vw, 30px); margin-bottom: 8px; }

    #fs-agegate .fs-ag-text { font-size: 14px; margin-bottom: 10px; }

    #fs-agegate .fs-ag-humor { font-size: 14px; margin-bottom: 10px; }

    #fs-agegate .fs-ag-zustellung { font-size: 10px; margin-top: 10px; }
}

/* ---------- Bestehendes Plugin-Modal unterdrücken ----------
   Das Live-Plugin alters_ueberpruefung rendert #age_check als
   Bootstrap-Modal. Diese Komponente übernimmt dessen Logik;
   das Plugin-Modal darf nie zusätzlich sichtbar werden. */

#age_check { display: none !important; }

/* Trusted-Shops-Badge (Fremd-iframe, z-index 2147483647) verdeckt sonst
   mobil den Sekundär-Button. Nur ausgeblendet, solange das Gate offen ist. */
html.fs-ag-offen div[id^="trustbadge-container-"] { display: none !important; }

/* ============================================================
   MOBIL-FEINSCHLIFF (Sitzung KONTAKT, 20.08.2026 abends,
   direkte Anweisung Yunus per Screenshot):
   1) Textgrößen kleiner, damit das Sheet OHNE Scrollen passt
   2) Inhalt in der Fläche ZENTRIERT
   BESITZER der Datei: POPUP — dieser Block ist additiv und
   überschreibt nur den ≤749px-Zustand; Rückbau = Block löschen.
   ============================================================ */
@media (max-width: 749px) {
    #fs-agegate .fs-ag-inhalt {
        align-items: center;
        text-align: center;
        padding: 12px 18px 12px;
    }
    #fs-agegate .fs-ag-logo { width: min(150px, 48%); }
    #fs-agegate .fs-ag-linie { margin: 7px auto 5px; }
    #fs-agegate .fs-ag-eyebrow { font-size: 10px; margin-bottom: 5px; letter-spacing: .16em; }
    #fs-agegate .fs-ag-intro { font-size: 10px; margin-bottom: 3px; }
    #fs-agegate .fs-ag-frage { font-size: clamp(20px, 5.5vw, 24px); margin-bottom: 6px; }
    #fs-agegate .fs-ag-text { font-size: 12.5px; line-height: 1.45; margin-bottom: 7px; }
    #fs-agegate .fs-ag-humor { font-size: 12.5px; margin-bottom: 10px; }
    #fs-agegate .fs-ag-ja,
    #fs-agegate .fs-ag-nein { min-height: 46px; font-size: 14px; padding: 10px 16px; }
    #fs-agegate .fs-ag-zustellung { font-size: 9px; margin-top: 8px; }
}

/* Lila Band (Anweisung Yunus 20.08. abends): 45°-Winkel, deutlich
   breiter, mittig durch die schwarze Fläche — bleibt HINTER dem
   18er-Icon (Band z-index 1, Kreis/18 z-index 2, unverändert).
   Additiv, übersteuert die Basisregel Z.136 und den alten
   Mobil-Override (height 24px / bottom 18%). BESITZER: POPUP. */
#fs-agegate .fs-ag-poster::after {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 200%;
    height: 120px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 749px) {
    #fs-agegate .fs-ag-poster::after {
        height: 42px;
        bottom: auto;
    }
}

/* ============================================================
   MOBIL: BOTTOM-SHEET -> ZENTRIERTE KARTE
   (Sitzung POPUP, 20.08.2026 nachts, direkte Anweisung Yunus:
   "leg den banner zentriert mittig ueber die startseite")

   Grund: Das Sheet war auf 60dvh gedeckelt; der Inhalt passte
   auch nach der Schriftverkleinerung nicht hinein und musste
   geschoben werden. Mittig liegend darf die Karte ihre
   natuerliche Hoehe einnehmen (Deckel nur noch als Notbremse
   bei 92dvh), damit KEIN Scrollen mehr noetig ist.

   Additiv: uebersteuert nur den <=749px-Zustand weiter oben.
   BESITZER der Datei: POPUP. Rueckbau = diesen Block loeschen.
   ============================================================ */
@media (max-width: 749px) {
    #fs-agegate {
        align-items: center;
        justify-content: center;
        padding: 14px;
    }

    #fs-agegate .fs-ag-dialog {
        max-width: 430px;
        /* Hoehe folgt dem Inhalt; Deckel greift nur auf sehr
           flachen Geraeten (z.B. Querformat) */
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 0;
    }

    /* Der Griff war die Geste des Bottom-Sheets - mittig sinnlos */
    #fs-agegate .fs-ag-griff { display: none; }

    /* Posterflaeche etwas kompakter, damit auch kleine Geraete
       (568-667px hoch) ohne Scrollen auskommen */
    #fs-agegate .fs-ag-poster { height: 104px; }
    #fs-agegate .fs-ag-kreis { width: 70px; }
    #fs-agegate .fs-ag-18 { font-size: 36px; }
    #fs-agegate .fs-ag-poster-kopf { top: 12px; }
    #fs-agegate .fs-ag-poster-fuss { bottom: 6px; }

    #fs-agegate .fs-ag-inhalt { padding: 14px 18px 14px; }
}

/* ---------- Flache Geraete (Handy im Querformat) ----------
   Hochkant passt die zentrierte Karte ohne Scrollen; bei
   Hoehen unter 500px reicht die Hoehe nicht. Dort zurueck auf
   die zweispaltige Anordnung (Poster links, Info rechts) mit
   kompakten Abstaenden - das halbiert die Bauhoehe.
   BESITZER: POPUP. */
@media (max-width: 749px) and (max-height: 500px) {
    #fs-agegate { padding: 8px; }

    #fs-agegate .fs-ag-dialog {
        display: grid;
        grid-template-columns: 34% 66%;
        max-width: 640px;
        max-height: 96vh;
        max-height: 96dvh;
    }

    #fs-agegate .fs-ag-poster {
        height: auto;
        min-height: 0;
    }

    #fs-agegate .fs-ag-kreis { width: min(70%, 96px); }
    #fs-agegate .fs-ag-18 { font-size: 34px; }
    #fs-agegate .fs-ag-poster-kopf { top: 10px; font-size: 9px; }
    #fs-agegate .fs-ag-poster-fuss { bottom: 8px; font-size: 9px; }
    #fs-agegate .fs-ag-poster::after { height: 34px; }

    #fs-agegate .fs-ag-inhalt { padding: 10px 16px 10px; }
    #fs-agegate .fs-ag-logo { width: min(130px, 44%); }
    #fs-agegate .fs-ag-linie { margin: 5px auto 4px; }
    #fs-agegate .fs-ag-eyebrow { font-size: 9px; margin-bottom: 4px; }
    #fs-agegate .fs-ag-intro { font-size: 9px; margin-bottom: 2px; }
    #fs-agegate .fs-ag-frage { font-size: 20px; margin-bottom: 4px; }
    #fs-agegate .fs-ag-text { font-size: 11.5px; line-height: 1.4; margin-bottom: 5px; }
    #fs-agegate .fs-ag-humor { font-size: 11.5px; margin-bottom: 7px; }
    #fs-agegate .fs-ag-ja,
    #fs-agegate .fs-ag-nein { min-height: 40px; font-size: 13px; padding: 8px 14px; }
    #fs-agegate .fs-ag-ja { margin-bottom: 7px; }
    #fs-agegate .fs-ag-zustellung { font-size: 8px; margin-top: 6px; }
}