/* Visitenkarte Vorschau "Graz-Gutscheine fallen" (30.10.2026 abends, Davids Idee): statt des gruenen Tickets fallen unter
   dem Reiter "Empfehlen" drei kleine Graz-Gutschein-Scheine herunter, landen und faechern sich zu einem Stapel auf, darunter
   "300 € fuers Empfehlen". Eigene Nachzeichnung im Look von .gg-schein (a13.css), KEINE Fotos/Logos der Holding Graz.
   Reines CSS, laeuft ohne JavaScript. Kommt nach a15-leiste.css; nutzt dessen .nav-huelle (weg beim Scrollen, nicht auf
   der Seite Empfehlen). Alle Masse in em (1em = 10px), damit kleine Handys nur die Schriftgroesse aendern. */

/* ---------- Platz: rechts unter der Leiste, nie ueber dem Foto (Abstand >= 12 px) und nie ueber den Rand ---------- */
/* Oberkante der Huelle abschneiden: die Scheine kommen unter der Leiste hervor statt ueber die Reiter zu fallen */
/* Schnitt genau an der Unterkante der Leiste (30.10.2026 spaet, Davids Meldung vom iPhone: zwischen Balken und Scheinen blieb
   beim Wegfliegen ein Feld). Vorher 6 px hoeher an der Pille: die Leiste reicht 6 px tiefer und zieht mit JavaScript beim Scrollen
   eine Linie (ist-gerollt), dazwischen und unter der runden Pillen-Ecke waren die Scheine schon weg. Die Huelle fuellt die Leiste
   (inset 0), darum passt die Kante auch mit der Safe Area oben am iPhone. */
.nav-huelle { clip-path: inset(100% -60px -400px -60px); }
/* Kurz-Titel-Zeile entfernt (30.10.2026 spaet, Davids Wort: "unnoetig"): die Kante ist wieder nur die Unterkante der Leiste. */
.nav-gg { --ggn-w: 7.6em; --ggn-h: 3.7em; position: absolute; top: calc(100% + 0.2em); right: calc(var(--rand) - 6px); z-index: 1;
    width: 9.4em; display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 1;
    text-decoration: none; color: #fff; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.nav-gg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
@media (max-width: 374px) { .nav-gg { font-size: 9.2px; } }

/* ---------- Stapel: drei Scheine, gefaechert (Grundstil = Ruhezustand) ---------- */
.ggn-stapel { position: relative; width: 100%; height: 6.2em; transform-origin: 50% 100%; }
.ggn-pose { position: absolute; left: 50%; top: 1.15em; width: var(--ggn-w); height: var(--ggn-h); margin-left: calc(var(--ggn-w) / -2);
    perspective: 26em; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.ggn-p1 { --x: -0.7em; --y: -0.15em; --r: -12deg; --d: -1; z-index: 1; }
.ggn-p2 { --x: 0.05em; --y: -0.6em; --r: -2deg; --d: 1; z-index: 2; }
.ggn-p3 { --x: 0.6em; --y: 0.75em; --r: 6deg; --d: -1; z-index: 3; }
.ggn-fall { display: block; width: 100%; height: 100%; }

/* ---------- Ein Schein: Papier violett-grau mit feinen Guillochen, Innenrahmen, gruenes Feld, Uhrturm, Hologramm ---------- */
.ggn { position: relative; display: grid; grid-template-columns: 34% 1fr; width: 100%; height: 100%; overflow: hidden; border-radius: 0.25em;
    background:
        repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0 0.5px, rgba(255, 255, 255, 0) 0.5px 2.6px),
        repeating-linear-gradient(62deg, rgba(63, 62, 85, 0.10) 0 0.5px, rgba(63, 62, 85, 0) 0.5px 3.4px),
        linear-gradient(180deg, #d2cfea, #a3a1c8 62%, #8987b0);
    box-shadow: 0 0 0 0.5px rgba(36, 34, 58, 0.55), 0 0.2em 0.6em rgba(0, 0, 0, 0.45), 0 0.05em 0.15em rgba(0, 0, 0, 0.35);
    outline: 0.5px solid rgba(255, 255, 255, 0.55); outline-offset: -0.22em; isolation: isolate; }
.ggn-p1 .ggn { filter: brightness(0.8); }
.ggn-p2 .ggn { filter: brightness(0.9); }
/* Gruenes Feld links mit schraeger Kante, "10" als Umriss, "EURO" darunter */
.ggn-feld { position: relative; background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 0.5px, rgba(255, 255, 255, 0) 0.5px 2.2px),
        linear-gradient(160deg, #95c956, #6fa634);
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.ggn-feld i { position: absolute; left: 0.3em; top: 0.32em; font: 800 1.55em/1 Futura, "Avenir Next", "Century Gothic", var(--font);
    font-style: normal; letter-spacing: 0.01em; color: transparent; -webkit-text-stroke: 0.75px rgba(255, 255, 255, 0.95); }
.ggn-feld b { position: absolute; left: 0.42em; bottom: 0.42em; font: 700 0.52em/1 Futura, "Avenir Next", "Century Gothic", var(--font);
    letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.95); }
/* Bild: Uhrturm in feiner Linie auf weichem Schatten */
.ggn-bild { position: relative; background: radial-gradient(90% 85% at 38% 100%, rgba(70, 72, 92, 0.5), rgba(70, 72, 92, 0) 70%); }
.ggn-bild svg { position: absolute; left: 0.6em; top: 0.38em; width: 2.06em; height: 2.88em; fill: none; stroke: #3f3e55;
    stroke-width: 3.8; stroke-linejoin: round; stroke-linecap: round; }
/* Hologramm-Streifen am rechten Rand (schillert) */
.ggn-holo { position: absolute; top: 0; bottom: 0; right: 0.75em; width: 0.62em; opacity: 0.9; mix-blend-mode: screen;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0 0.5px, rgba(255, 255, 255, 0) 0.5px 1.6px),
        linear-gradient(180deg, #7fe0c8, #a99cff, #e7f59a, #7fd0ff, #7fe0c8, #a99cff) 0 0 / 100% 300%;
    box-shadow: -0.5px 0 0 rgba(255, 255, 255, 0.5), 0.5px 0 0 rgba(255, 255, 255, 0.5); }
/* Glanz, der einmal ueber den vorderen Schein zieht */
.ggn::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -40%; width: 30%; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); transform: skewX(-18deg); }

/* ---------- "300 € fuers Empfehlen": iOS-Kachel unter dem Stapel ----------
   30.10.2026 abends, David: "dieses Kaestchen ... ein bisschen schoener ... mehr zum iOS-Teil angleichen": Milchglas wie
   iOS-Mitteilungen (dunkel, Unschaerfe dahinter, Haarlinie, weiche Ecken), "300 €" weiss, "fuers Empfehlen" im Akzent-Gruen. */
.ggn-preis { position: relative; z-index: 4; margin-top: -0.55em; display: grid; justify-items: center; gap: 0.25em;
    padding: 0.5em 0.95em 0.55em; border-radius: 1.1em; color: #fff;
    background: linear-gradient(180deg, rgba(52, 56, 60, 0.94), rgba(26, 28, 31, 0.96));
    /* ohne eigene Unschaerfe (backdrop-filter): die Leiste ist schon Milchglas; doppelte Unschaerfe flackerte in WebKit beim Scrollen */
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 0.5em 1.4em rgba(0, 0, 0, 0.55), 0 0 1.6em rgba(62, 224, 143, 0.18); }
.ggn-preis b { font-size: 2em; line-height: 1; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.ggn-preis small { font-size: 0.95em; line-height: 1.1; font-weight: 600; white-space: nowrap; letter-spacing: 0; color: var(--accent); }

/* ---------- Bewegung (nur beim ersten Laden; vom Seitenwechsel aus nur einmal Wippen) ---------- */
@media not (prefers-reduced-motion: reduce) {
    html:not([data-richtung]) .ggn-fall { animation: ggn-fall 1.55s cubic-bezier(0.37, 0, 0.63, 1) var(--t) backwards; }
    html:not([data-richtung]) .ggn-p1 { --t: 1s; }
    html:not([data-richtung]) .ggn-p2 { --t: 1.3s; }
    html:not([data-richtung]) .ggn-p3 { --t: 1.6s; }
    html:not([data-richtung]) .ggn-pose { animation: ggn-faechern 0.75s cubic-bezier(0.25, 1.45, 0.5, 1) 3.15s backwards; }
    html:not([data-richtung]) .ggn-preis { animation: ggn-preis 0.6s cubic-bezier(0.2, 1.5, 0.45, 1) 3.35s backwards; }
    html:not([data-richtung]) .ggn-p3 .ggn::after { animation: ggn-glanz 1.1s ease-in-out 4.1s 1; }
    .ggn-holo { animation: ggn-holo 3s linear 3.2s 2; }
    html:not([data-richtung]) .ggn-stapel { animation: ggn-wipp 1.8s ease-in-out 7s 1; }
    html[data-richtung] .ggn-stapel { animation: ggn-wipp 1.8s ease-in-out 0.6s 1; }
}

/* Wie ein fallender Geldschein: pendelt seitlich, kippt dabei nach vorn/hinten, landet mit kleinem Nachfedern.
   Gleiche Funktionsliste in jedem Schritt, damit der Browser sauber dazwischen rechnet. --d = Startseite. */
@keyframes ggn-fall {
    0% { opacity: 0; transform: perspective(26em) translate(calc(var(--d) * 0.65em), -7.6em) rotate(calc(var(--d) * -28deg)) rotateX(55deg); }
    9% { opacity: 1; }
    30% { transform: perspective(26em) translate(calc(var(--d) * -0.7em), -4.1em) rotate(calc(var(--d) * 20deg)) rotateX(-25deg); }
    55% { transform: perspective(26em) translate(calc(var(--d) * 0.5em), -2em) rotate(calc(var(--d) * -12deg)) rotateX(18deg); }
    78% { transform: perspective(26em) translate(calc(var(--d) * -0.3em), -0.4em) rotate(calc(var(--d) * 5deg)) rotateX(-6deg); }
    90% { transform: perspective(26em) translate(0, 0.12em) rotate(calc(var(--d) * -1deg)) rotateX(0deg); }
    100% { opacity: 1; transform: perspective(26em) translate(0, 0) rotate(0deg) rotateX(0deg); }
}
/* Gelandet liegen alle drei fast deckungsgleich; dann faechern sie sich in den Ruhezustand auf */
@keyframes ggn-faechern { from { transform: translate(0, 0.2em) rotate(calc(var(--r) * 0.25)); } }
@keyframes ggn-preis { from { opacity: 0; transform: translateY(-0.6em) scale(0.7); } 60% { opacity: 1; } }
@keyframes ggn-glanz { 0% { opacity: 1; transform: translateX(0) skewX(-18deg); } 100% { opacity: 1; transform: translateX(520%) skewX(-18deg); } }
@keyframes ggn-holo { to { background-position: 0 0, 0 100%; } }
@keyframes ggn-wipp { 0%, 100% { transform: none; } 25% { transform: rotate(3.5deg); } 55% { transform: rotate(-2.5deg); } 80% { transform: rotate(1deg); } }

/* ---------- An den Scroll gekoppelt: 3D-Stapel in die Tiefe (30.10.2026 spaet, Davids Wahl Variante C) ----------
   Ganz oben ausgefaechert. Beim Runterscrollen kippen die Scheine nacheinander in den Raum, drehen sich und fliegen nach hinten
   oben unter die Leiste (Schein 2, 1, 3, je versetzt), zuletzt faehrt "300 €" gerade hoch; beim Hochscrollen genauso zurueck.
   Vorlage: Effekt 2 aus Codrops "On-Scroll 3D Stack Motion" (github.com/codrops/3DStackMotion, MIT, (c) Codrops): Stapel gekippt,
   Karten drehen gestaffelt (rotationZ) und fliegen in die Tiefe, Kurve sine.inOut; dort GSAP, hier CSS-Scroll-Zeitachse (laeuft
   ohne JavaScript, Telegram-Vorschau). Kippung auf 35/20 Grad begrenzt (dort 55/30), damit die Schrift lesbar bleibt.
   Nur transform, Deckkraft bleibt 1; die Leiste schneidet ab (.nav-huelle clip-path). --ggn-ein (0..1 ueber 320 px) treibt die
   Kachel; ohne Scroll-Zeitachse setzt a11.js die Zahl (die Scheine stehen dann still). Gebaut als varianten_a14.py Variante C. */
@property --ggn-ein { syntax: "<number>"; inherits: true; initial-value: 0; }
.nav-gg { perspective: 1000px; perspective-origin: 50% 0; }
.ggn-pose { perspective: 1000px; perspective-origin: 50% 0; }
.ggn-fall { perspective: 1000px; perspective-origin: 50% -50%; }
.ggn-pose .ggn { --hub-v: 7em; transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ggn-p3 .ggn { --hub-v: 11em; }
/* Kachel "300 €": nur gerade hoch (kein Kippen, kein Skalieren), damit ihre Schrift scharf bleibt; weiche Kurve (Smoothstep) */
.ggn-preis { --k: clamp(0, calc((var(--ggn-ein) - 0.55) / 0.45), 1); --hub: 12em; --e: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
    transform: translateY(calc(var(--e) * var(--hub) * -1)); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
@supports (animation-timeline: scroll()) {
    .nav-gg { animation: ggn-ein linear both; animation-timeline: scroll(root); animation-range: 0px 320px; }
    .ggn-pose .ggn { animation: ggn-stapel3d linear both; animation-timeline: scroll(root); }
    /* In-App-Browser (App-Huelle, a14.css): body scrollt, Zeitachse --seite */
    html.app-huelle .nav-gg, html.app-huelle .ggn-pose .ggn { animation-timeline: --seite; }
    .ggn-p2 .ggn { animation-range: 0px 150px; }
    .ggn-p1 .ggn { animation-range: 45px 195px; }
    .ggn-p3 .ggn { animation-range: 90px 240px; }
}
@keyframes ggn-ein { from { --ggn-ein: 0; } to { --ggn-ein: 1; } }
@keyframes ggn-stapel3d {
    from { transform: translateY(0) translateZ(0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
        animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    to { transform: translateY(calc(var(--hub-v) * -1)) translateZ(-120px) rotate3d(1, 0, 0, 35deg) rotate3d(0, 1, 0, 20deg)
        rotate3d(0, 0, 1, calc(var(--d) * 90deg)); }
}
/* mit JavaScript blendete a15-leiste.css die Scheine beim kurzen Titel aus: jetzt bleiben sie */
.segment-leiste.ist-kurz .nav-huelle { opacity: 1; visibility: visible; transition: none; }

/* Schlusspruefung 30.10.2026: "10 EURO" der Scheine nur als Gestaltung (CSS-Inhalt), nicht dreimal im Seitentext
   (Vorleser, Suchmaschinen; pruefen_a9 meldete doppelte Zeilen) */
.ggn-feld i::before, .ggn-feld b::before { content: attr(data-t); }

/* ---------- Schrift scharf in Bewegung (30.10.2026 spaet, Davids Wort: Schrift "unscharf, verzerrt, flimmernd, gezackt") ----------
   Die Vorderseite eines Scheins ist ein Bild in 4-facher Aufloesung (ggn-schein-4x.webp, gerendert aus .ggn-feld + .ggn-bild,
   pruefung-ez-a14/schein_bild.py): beim Kippen wird es weich gefiltert statt neu gerastert, am iPhone (3x) nur verkleinert.
   Vorher: "10" als 0,75-px-Umrisslinie und "EURO" in 5,2 px; solche Haarlinien flimmern in 3D. Hologramm und Glanz bleiben CSS. */
.ggn { background: url("ggn-schein-4x.webp") 0 0 / 100% 100% no-repeat; outline: none; }
.ggn-feld, .ggn-bild { visibility: hidden; }
/* 2 px Ueberbreite beim Fallen (Scheine pendeln kurz ueber den rechten Rand): die Leiste schneidet seitlich ab */
.segment-leiste { overflow-x: clip; }