/* Visitenkarte A9 (H67, 30.10.2026): eigenes Layout fuer entwurf-a9.html. Dazu kueche.css (Kitchen-Bausteine, eigener Code).
   Raster: Abstaende nur 4/8/16/24/32/40/48 px. Schrift: iOS-Textstile (Apple HIG Typography, Tabelle "Large Title ... Caption 2").
   Vorlagen je Abschnitt und Lizenzen: quellen-a9.md. Bewegung reduzieren: ganz unten, alles aus. */

@font-face { font-family: "Inter A9"; src: url("schrift/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
    --bg: #050607; --flaeche: #141617; --flaeche-druck: #202324; --linie: rgba(255, 255, 255, 0.08);
    --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93;
    --accent: #3EE08F; --auf-gruen: #04140b;
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
    --rand: 16px; --radius: 16px; --dock-h: 60px;
    --safe-oben: env(safe-area-inset-top, 0px); --safe-unten: env(safe-area-inset-bottom, 0px);
    --font: -apple-system, BlinkMacSystemFont, "Inter A9", "Segoe UI", Roboto, sans-serif;
    --aus: cubic-bezier(0.23, 1, 0.32, 1);
}
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 22px;
    letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
a, button, summary { touch-action: manipulation; font: inherit; }
button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
svg.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.rahmen { max-width: 560px; margin: 0 auto; padding: 0 var(--rand) calc(var(--dock-h) + var(--safe-unten) + var(--s4));
    padding-left: max(var(--rand), env(safe-area-inset-left, 0px)); padding-right: max(var(--rand), env(safe-area-inset-right, 0px)); }

/* ---------- Segmentschalter oben (Vorlage: KokonutUI smooth-tab, Bewegung in a9.js) ---------- */
.segment-leiste { position: sticky; top: 0; z-index: 40; margin: 0 calc(-1 * var(--rand)); padding: calc(var(--s1) + var(--safe-oben)) var(--rand) var(--s1);
    background: rgba(5, 6, 7, 0.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 transparent; transition: box-shadow 200ms linear; }
.segment-leiste.ist-gerollt { box-shadow: 0 1px 0 var(--linie); }
.segment { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border-radius: 999px;
    background: rgba(118, 118, 128, 0.24); isolation: isolate; }
.segment-pille { position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); border-radius: 999px;
    background: #3d3d41; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    will-change: transform; display: none; }
.js .segment-pille { display: block; }
.segment a { display: grid; place-items: center; min-height: 48px; padding: 0 4px; border-radius: 999px; text-align: center; white-space: nowrap;
    font-size: clamp(13px, 3.6vw, 15px); line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); transition: color 200ms linear; }
.segment a.ist-an { color: var(--text); }
.segment a:active { opacity: 0.7; }

/* ---------- Gemeinsamer Kopf: Foto ruhig (Davids Wunsch: kein Zoom, keine Blende) ---------- */
.person { display: grid; grid-template-columns: 88px 1fr; column-gap: var(--s2); align-items: center; margin-top: var(--s2); }
.foto { width: 88px; height: 110px; border-radius: 22px; overflow: hidden; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.name { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; }
.person .kc-schwung { display: block; width: 128px; height: 12px; margin: 0 0 var(--s1); --kc-schwung-dauer: 900ms; --kc-schwung-verz: 250ms; }
.rolle { font-size: 15px; line-height: 20px; color: var(--text-2); }
.logo { display: inline-flex; align-items: center; height: 26px; margin-top: var(--s1); padding: 0 var(--s1); border-radius: 6px; background: var(--accent); }
.logo img { display: block; height: 15px; width: auto; }

/* ---------- Seiten nebeneinander (mit JS); ohne JS untereinander ---------- */
.seiten { position: relative; overflow: hidden; overflow: clip; touch-action: pan-y; }
.js .spur { display: flex; align-items: flex-start; will-change: transform; }
.js .seite { flex: 0 0 100%; min-width: 0; }
.js .seite[aria-hidden="true"] { visibility: hidden; }
.seiten-titel { font-size: 22px; line-height: 28px; font-weight: 700; margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--linie); }
.js .seiten-titel { display: none; }   /* mit JS nennt der Segmentschalter die Seite; aria-labelledby liest den Titel trotzdem */

.block { margin-top: var(--s3); }
.abschnitt { margin-top: var(--s5); }
.abschnitt h3 { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }

.nutzen, .abschnitt h3 { text-wrap: balance; }
.nutzen { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; max-width: 32ch; }
.text { margin-top: var(--s1); font-size: 17px; line-height: 24px; color: var(--text-2); max-width: 36ch; }
.fakten { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: 12px; font-size: 15px; line-height: 20px; color: var(--text-2); }
.fakten span { display: inline-flex; align-items: center; gap: 6px; }
.fakten .i { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.6; }

/* ---------- Ticket Erstgespraech (kueche: kc-ticket + kc-folie + kc-glanz) ---------- */
.ticket { --kc-abriss: calc(100% - 76px); min-height: 80px; color: var(--auf-gruen); background-color: var(--accent);
    background-image: linear-gradient(135deg, #5cefa6 0%, #3EE08F 45%, #2fd182 100%); }
.ticket > .kc-folie, .gutschein > .kc-folie { position: absolute; z-index: 1; }
.ticket.kc-glanz::after { animation-iteration-count: 2; }   /* Design-Brief: Glanz 2 Durchlaeufe (WCAG 2.2.2), beim Wiederkommen neu */
.ticket-haupt { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--s2) 12px var(--s2) var(--s2); min-width: 0; }
.ticket .ticket-haupt b, .ticket .ticket-haupt span { white-space: nowrap; }
.ticket-haupt b { font-size: clamp(16px, 4.5vw, 17px); line-height: 22px; font-weight: 700; letter-spacing: -0.015em; }
.ticket-haupt span { font-size: 13px; line-height: 18px; font-weight: 600; color: #0b3a22; }
.ticket-abriss { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--s1) 4px;
    font-size: 13px; line-height: 18px; font-weight: 700; }
.ticket-abriss .i { width: 24px; height: 24px; stroke-width: 2; }
.ticket:active { transform: perspective(900px) scale(0.98); transition-duration: 90ms; }

.beleg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s1); min-height: 48px; margin-top: 4px;
    font-size: 13px; line-height: 18px; color: var(--text-2); }
.beleg a { display: inline-flex; align-items: center; min-height: 48px; color: var(--text); font-weight: 600; }
.stern { color: #ffd60a; }

/* ---------- Knoepfe (tastbar: kc-taktil gross, kc-druckknopf flach) ---------- */
.knopf { display: flex; align-items: center; justify-content: center; gap: var(--s1); width: 100%; min-height: 56px; padding: 0 var(--s2);
    border-radius: var(--radius); font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; }
.knopf.haupt { color: var(--auf-gruen); }
.knopf.zweit { color: var(--accent); background-color: #1c1f20; }
.knopf.zweit.kc-taktil { --kc-flaeche: #1f2324; --kc-kante: #0b0d0d; }
.knopf + .knopf { margin-top: 12px; }
.beleg + .knopf { margin-top: 4px; }
.knopf .kc-dyn { width: 100%; }

.ig-hinweis { display: none; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.ist-instagram .ig-hinweis { display: block; }

/* ---------- Gruppierte Liste (iOS inset grouped) ---------- */
.liste { background: var(--flaeche); border-radius: var(--radius); overflow: hidden; }
.zeile { position: relative; display: grid; grid-template-columns: 40px 1fr 16px; column-gap: 12px; align-items: center; min-height: 64px;
    padding: 12px var(--s2); transition: background-color 150ms var(--aus); }
.zeile + .zeile::before { content: ""; position: absolute; top: 0; right: 0; left: 68px; height: 1px; background: var(--linie); }
a.zeile:active { background-color: var(--flaeche-druck); transition-duration: 60ms; }
.symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(62, 224, 143, 0.12); color: var(--accent); }
.symbol .i { width: 20px; height: 20px; }
.zeile-text { min-width: 0; }
.zeile-text b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.zeile-text > span { display: block; margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--text-2); }
.pfeil { width: 16px !important; height: 16px !important; color: rgba(235, 235, 245, 0.3); stroke-width: 2.4 !important; }
.fuss { margin: var(--s1) var(--s2) 0; font-size: 13px; line-height: 18px; color: var(--text-3); }

.liste.haken { list-style: none; margin: 0; padding: 0 var(--s2); }
.liste.haken li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: start; padding: 12px 0; font-size: 17px; line-height: 22px; }
.liste.haken li + li { border-top: 1px solid var(--linie); }
.liste.haken .i { width: 20px; height: 20px; margin-top: 1px; color: var(--accent); stroke-width: 2.4; }

/* ---------- Karten ---------- */
.karte { background: var(--flaeche); border-radius: var(--radius); padding: var(--s2); }
.karte p { font-size: 17px; line-height: 24px; text-wrap: pretty; }
/* Makler: Rand mit Licht von oben links (Vorlage: Magic UI shine-border, hier still statt endlos) */
.makler { border: 1px solid transparent; padding: 20px var(--s2);
    background: linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
                linear-gradient(135deg, rgba(62, 224, 143, 0.65), rgba(62, 224, 143, 0.06) 45%, rgba(255, 255, 255, 0.06)) border-box; }

.schritte { position: relative; list-style: none; margin: 0; padding: var(--s1) 0; background: var(--flaeche); border-radius: var(--radius);
    --kc-linie-x: 31px; --kc-linie-oben: 40px; --kc-linie-unten: 40px; }
.schritte li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s2); align-items: start; padding: var(--s1) var(--s2); }
.nr { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--flaeche);
    border: 1.5px solid var(--accent); color: var(--accent); font-size: 15px; font-weight: 700; }
.schritte .zeile-text { padding: 4px 0 var(--s1); }

.fragen dt { font-size: 17px; line-height: 22px; font-weight: 600; }
.fragen dd { margin: 2px 0 var(--s2); font-size: 15px; line-height: 20px; color: var(--text-2); }
.fragen dd:last-child { margin-bottom: 0; }

.qr-karte { display: grid; justify-items: center; text-align: center; padding: var(--s3) var(--s2) var(--s2); }
.qr-flaeche { width: 168px; height: 168px; padding: 10px; border-radius: var(--radius); background: #fff; color: #000; }
.qr-flaeche svg { display: block; width: 100%; height: 100%; }
.qr-karte p { margin: var(--s2) 0; font-size: 15px; line-height: 20px; color: var(--text-2); }

/* ---------- Gutschein (kueche: kc-druck aus dem Schlitz, kc-stempel) ---------- */
.gutschein { --kc-abriss: 70%; min-height: 128px; color: var(--text);
    background-color: #1a1e1e; background-image: linear-gradient(140deg, #252b2b, #161a1a 60%, #121515); }
.gutschein::after { border-left-color: rgba(62, 224, 143, 0.55); }
.gutschein .kc-folie { opacity: 0.32; }
.gutschein .ticket-haupt { padding-left: 20px; gap: 0; }
.gutschein small { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.gutschein b { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.gutschein .ticket-haupt span { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }
.gutschein .ticket-abriss { color: var(--accent); }
.gutschein .kc-stempel { font-size: 13px; padding: 4px var(--s1); }
.kc-druck-schlitz { height: 12px; margin: 0 4px -6px; background: #000; box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.10), 0 -1px 0 rgba(255, 255, 255, 0.06); }

/* ---------- Fusszeile ---------- */
.fusszeile { margin-top: var(--s6); padding-top: var(--s1); border-top: 1px solid var(--linie); text-align: center; font-size: 13px; line-height: 18px; color: var(--text-3); }
.fusszeile > p { margin-top: var(--s1); }
.impressum summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; list-style: none; cursor: pointer;
    font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.impressum summary::-webkit-details-marker { display: none; }
.impressum summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--aus); }
.impressum[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.impressum div { text-align: left; padding: var(--s2); margin-bottom: var(--s1); border-radius: var(--radius); background: var(--flaeche); color: var(--text-2); }
.impressum div p + p { margin-top: var(--s1); }
.impressum div a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Dock (kueche kc-dock) ---------- */
/* Weiche Kante ueber dem Dock (wie die Scroll-Kante unter iOS-Leisten): Inhalt laeuft ins Schwarz aus, statt neben dem Dock abgeschnitten zu wirken */
.rand-unten { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: calc(var(--dock-h) + var(--safe-unten) + var(--s4)); pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 6, 7, 0), rgba(5, 6, 7, 0.88) 50%, rgba(5, 6, 7, 0.96)); }
.dock { --kc-dock: #141617; }
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 72px; min-height: 56px; padding-top: 6px;
    font-size: 11px; line-height: 13px; font-weight: 600; color: var(--text-2); }
.dock a .i { color: var(--text); }

/* ---------- Blatt (Teilen-Rueckfall) ---------- */
dialog.kc-blatt { --kc-blatt-bg: #151718; text-align: center; }
.kc-blatt h2 { font-size: 20px; line-height: 25px; font-weight: 700; margin: var(--s1) 0 var(--s2); }
.kc-blatt .qr-flaeche { margin: 0 auto var(--s2); }
.blatt-link { width: 100%; min-height: 48px; margin-bottom: var(--s2); padding: 0 var(--s2); border: 1px solid var(--linie); border-radius: 12px;
    background: #0d0f10; color: var(--text); font: 15px/20px var(--font); }
.kc-blatt form { margin-top: 12px; }

.meldung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Funken (Vorlage: Magic UI cool-mode, Teilchen mit Schwerkraft; a9.js) ---------- */
.a9-funke { position: fixed; left: 0; top: 0; z-index: 90; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }

/* ---------- Auftritt (Vorlage: Magic UI text-animate "blurInUp": 20 px, Unschaerfe 10 px, 0,3-0,4 s) ---------- */
.js .a9-auf { opacity: 0; transform: translateY(20px); filter: blur(10px); }
.js .a9-auf.schnell { filter: none; }
.js .a9-auf.ist-da { opacity: 1; transform: none; filter: none;
    transition: opacity 400ms ease-out, transform 300ms var(--aus), filter 300ms var(--aus); transition-delay: calc(var(--n, 0) * 60ms); }

/* ---------- Quer (844 x 390): Person links, Inhalt rechts ---------- */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
    .rahmen { max-width: 920px; display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: var(--s4);
        grid-template-areas: "person leiste" "person seiten" "person fuss"; align-items: start; }
    .segment-leiste { grid-area: leiste; margin: 0; padding-left: 0; padding-right: 0; }
    .person { grid-area: person; position: sticky; top: calc(var(--s2) + var(--safe-oben)); margin-top: var(--s2); }
    .seiten { grid-area: seiten; }
    .fusszeile { grid-area: fuss; }
    .block:first-child, .seite > .seiten-titel + .block { margin-top: var(--s2); }
    .nutzen { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .js .a9-auf { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .segment a, .zeile, .segment-leiste { transition: none; }
    .a9-funke { display: none; }
}