/* ═══ App-Home als HTML (04.10.2026, v75: „Home statt Screenshot“ 1 + 2) ═══
   Der Home-Screen der App, Punkt fuer Punkt aus dem Code nachgebaut:
   app/(tabs)/home.tsx, KopfLockup.tsx, SuchPille.tsx, ZquadCard.tsx,
   FloatingTabBar.tsx, theme.ts (B „Kraeftig“). 1 px hier = 1 pt in der App;
   der Bildschirm ist 393 x 852 (iPhone 15/16 Pro) und wird als Ganzes per
   transform auf seinen Platz skaliert (app-home.js). Farben nur aus den
   Token unten - hell/dunkel setzt app-home.js als Klasse (.zq-dunkel). */

/* Eigene Familie fuer den Nachbau: dieselben Inter-Dateien wie die Seite (4.001,
   wie die App) plus Medium (500), das die Seite nicht laedt. So aendert sich am
   Rest der Seite nichts - dort faellt 500 weiter auf 400 zurueck.
   v115 (20.10.2026): inter-500.woff2 neu erzeugt, jetzt mit allen Namensfeldern
   samt OFL-Hinweis (werkzeug/schriften/inter500.py); Zeichen unveraendert. */
/* F „Leichter“ (v121, 24.10.2026, App-Wahl „F + G + H“, Mockup „Zquady in Matt“): jeder
   Inter-Schnitt eine Stufe leichter - dieselben Dateien, eine Stufe tiefer zugeordnet (500 →
   Regular, 600 → Medium, 700 → SemiBold, 800 → Bold), wie in der App die Zuordnung der Schnitte.
   So ziehen auch Regeln mit eigener font-Kurzschrift mit. 400 bleibt 400. */
@font-face { font-family: 'ZqInter'; font-style: normal; font-weight: 400; font-display: swap; src: url(inter-400.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ZqInter'; font-style: normal; font-weight: 500; font-display: swap; src: url(inter-400.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ZqInter'; font-style: normal; font-weight: 600; font-display: swap; src: url(inter-500.woff2?v=115) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ZqInter'; font-style: normal; font-weight: 700; font-display: swap; src: url(inter-600.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ZqInter'; font-style: normal; font-weight: 800; font-display: swap; src: url(inter-700.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Die Statusleiste (Uhr, Netz, Akku) bleibt wie iOS: eigene Familie mit der alten Zuordnung. */
@font-face { font-family: 'ZqInterIOS'; font-style: normal; font-weight: 600; font-display: swap; src: url(inter-600.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ZqInterIOS'; font-style: normal; font-weight: 700; font-display: swap; src: url(inter-700.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.zq-huelle { position: relative; overflow: hidden; }
.zq-app {
  /* theme.ts LIGHT_SURFACE */
  --seite: #F1F2EC; --karte: #FFFFFF; --karten-rand: rgba(0,0,0,0); --text: #0D0E0C; --muted: #3F423B; --dim: #63665E;
  --brand: #0D0E0C; --bg: #FFFFFF; --rund: #E4E5DD; --feld: #F1F2EC; --blatt: #F1F2EC; --oliv-text: #55672C;
  --gut: #3B7A3E; --krit: #AD4220; --linie: rgba(13,14,12,.09); --griff: rgba(0,0,0,.18); --vorhang: rgba(0,0,0,.45);
  --oliv: #A7B77A; --oliv-licht: rgba(167,183,122,.15); --muster: rgba(167,183,122,.38);
  --mono-rand: rgba(0,0,0,.08); --insel: #000000; --status: #0D0E0C;
  position: absolute; left: 0; top: 0; width: 393px; height: 852px; overflow: hidden; transform-origin: 0 0;
  background: var(--seite); color: var(--text); text-align: left;
  font-family: 'ZqInter', 'Inter', -apple-system, 'Segoe UI', sans-serif; font-weight: 400; letter-spacing: 0; line-height: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; contain: layout paint;
}
.zq-app.zq-dunkel {
  /* theme.ts DARK_SURFACE */
  --seite: #0E0E0D; --karte: #191A17; --karten-rand: rgba(255,255,255,.07); --text: #F2F2EE; --muted: #C4C6BF; --dim: #94978E;
  --brand: #F2F2EE; --bg: #151514; --rund: #262723; --feld: #232420; --blatt: #121311; --oliv-text: #b6c48f;
  --gut: #8CC084; --krit: #EE7A52; --linie: rgba(255,255,255,.08); --griff: rgba(255,255,255,.22); --vorhang: rgba(0,0,0,.70);
  --muster: rgba(167,183,122,.26); --mono-rand: rgba(255,255,255,.14); --status: #F2F2EE;
}
:where(.zq-app) *, :where(.zq-app) *::before, :where(.zq-app) *::after { box-sizing: border-box; }
:where(.zq-app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; }
:where(.zq-app) svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* G „Feiner“ (v121, 24.10.2026, App-Wahl „F + G + H“): alle Zeichen mit hoechstens 1,6 Strich
   (vorher je Zeichen 1,9 bis 2,8). Die Hoehenlinien von Cover und Ecke (path, 1) bleiben. */
.zq-app svg { stroke-width: 1.6 !important; }
/* J „Offener“ (v121, 24.10.2026, App-Wahl „J + L“, patch-rn-text v8): jede Schrift von 17 bis
   48 px mit negativer Sperrung bekommt das 0,45-Fache (gerundet wie die App), z. B. Ortsname
   -1,3 → -0,59, Kartentitel -0,45 → -0,2. Kleineres und Schauzahlen über 48 px (Tag im Cover,
   168 px, bleibt -8) bleiben; die Statusleiste bleibt iOS, Sora 700/800 (Monogramme) bleibt.
   Die Werte stehen direkt in den Regeln.
   L „Feiner“: Kartenrand 1 statt 1,5 (Karte, Live-Ring inset -1 / Ecke 25, Ecke des Musters
   innen 23 statt 22,5), Trennlinien (.zq-zeile + .zq-zeile, .zq-trenner, Kapsel-Strich) 0,5.
   M „Zarter“ (App-Wahl „M + P“): Hoehenlinien der Kartenecke --muster hell .62 → .38, dunkel
   .42 → .26; im Cover des Blatts .55 → .34 (eigener Wert, kein Token).
   P „Leiserer Pfeil“: der olive Kartenpfeil ohne Flaeche, Ring 1 statt 1,5; der schwarze bleibt. */
/* Fokusrahmen (v115, Rechtspruefung 7-6): das tiefe Oliv der App (hell #55672C,
   rund 6:1; dunkel #b6c48f) statt #A7B77A, das im Hellen nur rund 2:1 hatte. */
.zq-app button:focus-visible { outline: 2px solid var(--oliv-text); outline-offset: 2px; border-radius: 12px; }

/* ── Statusleiste + Dynamic Island (iPhone, 59 pt Sicherheitsrand) ── */
.zq-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 40; pointer-events: none; color: var(--status); }
.zq-uhr { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/22px 'ZqInterIOS', 'Inter', -apple-system, sans-serif; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.zq-insel { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; background: var(--insel); }
.zq-status-rechts { position: absolute; right: 26px; top: 21px; display: flex; align-items: center; gap: 6px; }
.zq-status-rechts svg { fill: currentColor; stroke: none; }
.zq-netz { font: 600 15px/1 'ZqInterIOS', 'Inter', sans-serif; letter-spacing: -.2px; }
.zq-akku { position: relative; width: 27px; height: 13px; }
.zq-akku-rahmen { position: absolute; inset: 0 2px 0 0; border-radius: 4px; border: 1px solid currentColor; opacity: .38; }
.zq-akku-stand { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((27px - 8px) * var(--akku, .4)); border-radius: 2px; background: currentColor; }
.zq-akku-zahl { position: absolute; inset: 0 2px 0 0; display: grid; place-items: center; font: 700 9.5px/1 'ZqInterIOS', 'Inter', sans-serif; letter-spacing: -.2px; mix-blend-mode: normal; color: var(--seite); }
.zq-akku-nase { position: absolute; right: 0; top: 4px; width: 1.5px; height: 5px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .4; }
.zq-heimbalken { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--status); z-index: 45; pointer-events: none; }

/* ── Kopf (Faltkopf): Ebene ueber der Liste, --f = 0 offen … 1 gefaltet ── */
.zq-kopf { position: absolute; left: 0; right: 0; top: 0; z-index: 20; pointer-events: none; }
.zq-kopf > * { pointer-events: auto; }
.zq-glas { position: absolute; left: 0; right: 0; top: 0; height: var(--kopf-h, 228px); pointer-events: none;
  transform: translateY(calc(var(--glas-weg, 87px) * var(--f, 0) * -1)); }
/* Kein backdrop-filter: er entkommt im Browser dem runden Zuschnitt des Telefons
   (graue Ecken). Das Glas deckt ohnehin 84 % - wie Android ohne echten Blur. */
.zq-glas-ton { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ton-oben) 0%, var(--ton-oben) 62%, var(--ton-unten) 100%); }
.zq-glas-verlauf { position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(to bottom, var(--glas84), var(--glas0));
  opacity: calc(min(1, var(--f, 0) * 3) * (1 - var(--klebt, 0))); }
.zq-kopf-inhalt { position: relative; padding: 67px 16px 12px; pointer-events: none; }
.zq-lockup { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 52px; }
.zq-lockup-text { flex: 1; min-width: 0; }
.zq-ueber { font-size: 13px; font-weight: 600; letter-spacing: -.15px; line-height: 16px; margin-bottom: 2px; white-space: nowrap;
  opacity: calc(1 - min(1, var(--f, 0) * 2.2)); transform: translateY(calc(-8px * var(--f, 0))); }
.zq-ueber .zq-oliv { color: var(--oliv-text); }
.zq-ort { display: flex; align-items: center; gap: 2px; max-width: 100%; pointer-events: auto; transform-origin: left center;
  transform: translateY(calc(-21px * var(--f, 0))) scale(calc(1 - var(--f, 0) / 3)); }
.zq-ort-text { font: 600 30px/34px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.59px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-ort svg { width: 20px; height: 20px; stroke-width: 2.4; margin-top: 3px; }
.zq-ort-rolle { position: relative; overflow: hidden; height: 34px; }
.zq-ort-rolle > span { display: block; }
.zq-aktionen { display: flex; align-items: center; gap: 8px; flex: none; pointer-events: auto; transform-origin: right center;
  transform: translateY(calc(-19px * var(--f, 0))) scale(calc(1 - 0.157895 * var(--f, 0))); }
.zq-rund { position: relative; width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; background: var(--rund); transition: transform .16s cubic-bezier(.33,1,.68,1), background-color .16s; }
.zq-rund:active { transform: scale(.88); }
.zq-rund svg { width: 20px; height: 20px; stroke-width: 2; }
.zq-rund.an { background: var(--oliv-licht); color: var(--oliv-text); }
.zq-rund.an svg { stroke-width: 2.2; }
/* S „Freie Glocke“ (v121, 24.10.2026, App-OTA): in Home steht die Glocke ohne grauen Kreis, nur
   als Zeichen; Groesse und Tippflaeche (38) bleiben, die Hervorhebung bei Neuem (.an) auch. */
.zq-aktionen .zq-rund:not(.an) { background: transparent; }
.zq-reiter { position: relative; display: flex; gap: 20px; margin-top: 10px; height: 33px; pointer-events: auto; transform: translateY(calc(-26px * var(--f, 0))); }
.zq-reiter button { display: flex; align-items: center; gap: 4px; padding: 6px 0 9px; font-size: 15px; font-weight: 500; letter-spacing: -.2px; line-height: 18px; white-space: nowrap; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-reiter button:active { transform: scale(.96); }
.zq-reiter button span { opacity: .62; }
.zq-reiter button.an span { font-weight: 700; opacity: 1; }
.zq-strich { position: absolute; left: 0; bottom: 0; height: 2.5px; border-radius: 1.25px; background: var(--text); transition: transform .26s cubic-bezier(.33,1,.68,1), width .26s cubic-bezier(.33,1,.68,1); }
.zq-such-platz { height: 54px; }

/* Die Suche: offen Pille (46) unter den Reitern, 307 breit (rechts der Karten-Knopf),
   gefaltet ein freies Zeichen links der Glocke (Lage per JS). Ihr Grund ist die
   Ebene .zq-suche-kreis: sie blendet beim Falten aus (v126, wie die App seit 24.10.). */
.zq-suche { position: absolute; left: 16px; top: 170px; width: 307px; height: 46px; border-radius: 999px; overflow: hidden; pointer-events: auto; cursor: text; }
.zq-suche-kreis { position: absolute; inset: 0; border-radius: inherit; background: var(--karte); }

/* Der Karten-Knopf (v126, 27.10.2026, App: KartenKnopf.tsx, Mockup „Weg zur Karte“ K;
   ersetzt das olive Wort am Ende der Reiter „F“ vom 06.10.): 46er-Kreis im Grund der
   Suche, 8 rechts neben ihr; gefaltet ein freies Zeichen links neben dem Such-Kreis
   (Lage, Groesse und Ausblenden per JS, wie die Suche). Auf der Karte dunkel wie
   gewaehlte Pillen; das Zeichen blendet dabei auf Hell um (160 ms, FARBE). */
.zq-kk { position: absolute; z-index: 1; left: 331px; top: 170px; width: 46px; height: 46px; border-radius: 23px; pointer-events: auto; transition: scale .16s cubic-bezier(.33,1,.68,1); }
.zq-kk:active { scale: .9; }
.zq-kk-feld, .zq-kk-an { position: absolute; inset: 0; border-radius: 23px; }
.zq-kk-feld { background: var(--karte); }
.zq-kk-an { background: var(--brand); opacity: 0; transition: opacity .16s; }
.zq-kk-zeichen { position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; color: var(--text); transition: opacity .16s; }
.zq-kk-zeichen svg { width: 20px; height: 20px; stroke-width: 2; }
.zq-kk-zeichen-an { color: var(--bg); opacity: 0; }
.zq-kk.an .zq-kk-an, .zq-kk.an .zq-kk-zeichen-an { opacity: 1; }
.zq-kk.an .zq-kk-zeichen:not(.zq-kk-zeichen-an) { opacity: 0; }
.zq-lupe { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; stroke-width: 2; color: var(--text); }
.zq-such-feld { position: absolute; left: 46px; right: 50px; top: 0; bottom: 0; display: flex; align-items: center; }
.zq-such-feld input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; padding: 0; margin: 0; font: 400 15px/20px 'ZqInter', 'Inter', sans-serif; letter-spacing: -.2px; color: var(--text); caret-color: var(--oliv); }
.zq-such-feld input::placeholder { color: var(--dim); opacity: 1; }
.zq-such-x { position: absolute; right: 50px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 11px; display: none; place-items: center; background: var(--rund); }
.zq-such-x svg { width: 13px; height: 13px; stroke-width: 2.6; }
.zq-suche.hat-text .zq-such-x { display: grid; }
.zq-suche.hat-text .zq-such-feld { right: 78px; }
.zq-regler { position: absolute; right: 5px; top: 6px; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--brand); color: var(--bg); transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-regler:active { transform: scale(.9); }
.zq-regler svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* ── Liste ── */
.zq-liste { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 0; z-index: 1; }
/* Polster als eigene Bloecke: Polster AM Scroller verschiebt die Klebe-Linie (sticky misst ab der Inhaltskante). */
.zq-liste::before { content: ""; display: block; height: var(--liste-oben, 238px); }
.zq-liste::after { content: ""; display: block; height: 104px; }
.zq-liste::-webkit-scrollbar { display: none; }
.zq-zaehl { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 12px; min-height: 29px; }
/* Unter „Dein nächstes Treffen“ (v123, App „klarer Fokus“ U, home.tsx listCountUnterKarte): 14 Luft
   nach oben (mit dem Rand der Karte 18); vor einer Ueberschrift ohne Luft nach unten - die bringt
   ihre 14 selbst mit (.zq-tag). */
.zq-zaehl.unter-karte { padding-top: 14px; }
.zq-zaehl.vor-tag { padding-bottom: 0; }
.zq-zaehl-satz { flex-shrink: 1; min-width: 0; margin-right: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; line-height: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-zaehl-satz b { font-weight: 800; color: var(--text); }
.zq-zaehl-satz .zq-oliv { color: var(--oliv-text); font-weight: 700; }
/* Was die Suche verstanden hat (v124, home.tsx verstanden): olive, die Zeile darf zweizeilig werden. */
.zq-zaehl-satz.zwei { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zq-zaehl-satz.zwei .zq-oliv { font-weight: inherit; }
/* Der Umkreis in der Ueberzeile (nur auf der Karte und bei leerer Liste), antippbar. */
.zq-ueber .zq-ueber-radius { display: inline; pointer-events: auto; color: var(--oliv-text); }
.zq-sort { display: flex; align-items: center; gap: 2px; flex: none; font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; line-height: 17px; color: var(--oliv-text); transition: opacity .15s; }
.zq-sort:active { opacity: .6; }
.zq-sort svg { width: 14px; height: 14px; stroke-width: 2.2; }
/* ── Dein nächstes Treffen (NaechstesTreffen.tsx, v84): hell Tinte mit weisser
   Schrift, dunkel hell mit Tinte; Punkt oliv (dunkel oliveText hell). ── */
.zq-nt-huelle { padding: 0 16px; margin: 6px 0 4px; }
.zq-nt { --nt-oliv: #A7B77A; --nt-leise: rgba(255,255,255,.14);
  display: block; width: 100%; border-radius: 26px; padding: 18px 18px 16px; background: var(--brand); color: var(--bg);
  transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-dunkel .zq-nt { --nt-oliv: #55672C; --nt-leise: rgba(13,14,12,.08); }
.zq-nt.gedrueckt { transform: scale(.98); }
/* Hoehenlinien in der Ecke (v125, App Runde 13 CB-b, NaechstesTreffen.tsx s.ecke + MusterEcke
   `wieCover`): dieselbe Ecke wie die Listenkarte (Kennung des Zquads, 361 x 176, Maske
   eckMaske), 1,5 von oben und rechts - die Karte ist 26 rund ohne Rand, die Linien enden
   an der 22,5er-Rundung des Musters und bleiben so in ihrer Ecke (die App: 1 pt vor dem Rand,
   ohne Zuschnitt). Ganz unten im Stapel: der Inhalt liegt darueber (position: relative).
   Der Strich folgt ihrem Grund, nicht dem Modus: hell ist die Karte Tinte - Strich wie das
   Cover (0,34); dunkel ist sie hell - wie die hellen Listenkarten (0,38). */
.zq-nt { position: relative; }
.zq-nt > :not(.zq-ecke) { position: relative; }
.zq-nt > .zq-ecke { inset: 1.5px 1.5px auto auto; width: 361px; height: 176px; overflow: visible; border-radius: 0; }
.zq-nt .zq-ecke path { stroke: rgba(167,183,122,.34); }
.zq-dunkel .zq-nt .zq-ecke path { stroke: rgba(167,183,122,.38); }
.zq-nt-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zq-nt-ueber { font-size: 13px; font-weight: 600; line-height: 16px; opacity: .7; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-nt-marke { display: flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 700; line-height: 15px; color: var(--nt-oliv); }
.zq-nt-marke i { width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.zq-nt-titel { display: block; margin-top: 6px; font-size: 18px; line-height: 21.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Passt „15:30 · Ort“ nicht neben den Countdown, rutscht es darunter, statt
   gekuerzt zu werden (wie die App, 05.10.2026). */
.zq-nt-zeit { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 2px; }
.zq-nt-uhr { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.zq-nt-teil { display: flex; align-items: flex-end; }
.zq-nt-ziffer { display: inline-block; min-width: 18px; text-align: center; font: 600 30px/36px 'Sora', 'ZqInter', sans-serif; letter-spacing: -.27px; }
.zq-nt-ziffer.kommt { animation: zq-nt-kommt .26s cubic-bezier(.455,.03,.515,.955) both; }
@keyframes zq-nt-kommt { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }
.zq-nt-einheit { font-size: 12px; font-weight: 600; line-height: 15px; opacity: .7; margin: 0 0 6px 2px; }
.zq-nt-live { flex: none; font: 600 32px/38.5px 'Sora', 'ZqInter', sans-serif; letter-spacing: -.65px; }
.zq-nt-ort { font-size: 13.5px; font-weight: 600; line-height: 17px; opacity: .7; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-nt-unten { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.zq-nt-koepfe { display: flex; align-items: center; flex: none; }
.zq-nt-kopf { position: relative; width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--brand); background: var(--brand); display: grid; place-items: center; }
.zq-nt-kopf + .zq-nt-kopf { margin-left: -9px; }
.zq-nt-dabei { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-nt-route { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 19px; background: var(--bg); color: var(--brand); font-size: 13.5px; font-weight: 700; transition: transform .12s; }
.zq-nt-route svg { width: 14px; height: 14px; stroke-width: 2.4; }
/* Chat mit Wort (v123, App „klarer Fokus“ U, chatKnopf): dieselbe Pille wie Route, im leisen Grund,
   Polster 14; die Zeichen beider Pillen fallen weg, wenn die Zeile zu schmal ist (app-home.js). */
.zq-nt-chat { position: relative; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--nt-leise); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: transform .12s; }
.zq-nt-chat svg { width: 16px; height: 16px; stroke-width: 2.2; }
/* Neu im Chat (v124, App AS, NaechstesTreffen neuMarke): die Zahl oliv wie die Marke oben,
   Ziffer und Ring (2) im Kartengrund, 22 rund, 8 ueber die Ecke - die Zeile wird nicht breiter. */
.zq-nt-neu { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; border: 2px solid var(--brand);
  background: var(--nt-oliv); color: var(--brand); display: grid; place-items: center; font: 600 11px/14px 'Sora', 'ZqInter', 'Inter', sans-serif; text-align: center; pointer-events: none; }
.zq-nt-route:active { transform: scale(.94); }
.zq-nt-chat:active { transform: scale(.94); }

.zq-radius { display: inline-flex; align-items: center; gap: 1px; color: var(--oliv-text); font-weight: 700; }
.zq-radius svg { width: 11px; height: 11px; stroke-width: 2.6; }
.zq-abschnitt { position: relative; }
.zq-tag { position: sticky; top: 139px; z-index: 5; display: flex; align-items: baseline; gap: 6px; padding: 14px 20px 8px; background: var(--seite); }
.zq-tag::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(to bottom, var(--seite), var(--seite0)); pointer-events: none; opacity: 0; transition: opacity .2s; }
.zq-tag.klebt::after { opacity: 1; }
.zq-tag b { font-size: 18px; font-weight: 700; letter-spacing: -.22px; line-height: 22px; white-space: nowrap; }
.zq-tag span { flex-shrink: 1; min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-leer { padding: 40px 32px; text-align: center; }
.zq-leer b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.4px; }
.zq-leer span { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--muted); }
/* Leere Suche (v124, EmptyState.tsx + SuchStart.tsx, App AL): mittig im freien Teil der Liste,
   weisser Kreis 64 mit der Lupe, Titel 17, Satz 15/21,5, der Schnellstart als Karte, darunter
   die Knoepfe (schwarz „Ohne „Samstag“: 3 anzeigen“ bzw. „Suche leeren“ mit Rand). */
.zq-leer-suche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 500px; padding: 40px 32px; text-align: center; }
.zq-leer-kreis { width: 64px; height: 64px; border-radius: 32px; display: grid; place-items: center; flex: none; margin-bottom: 2px; background: var(--karte); color: var(--text); }
.zq-leer-kreis svg { width: 30px; height: 30px; }
.zq-leer-titel { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.zq-leer-satz { max-width: 300px; font-size: 15px; line-height: 21.5px; }
.zq-leer-extra { align-self: stretch; margin-top: 6px; }
.zq-leer-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.zq-leer-knoepfe.nach-extra { margin-top: 2px; }
.zq-leer-cta, .zq-leer-zweit { min-height: 44px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-app .zq-leer-cta { background: var(--brand); color: var(--bg); }
.zq-app .zq-leer-zweit { background: var(--karte); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.zq-leer-cta:active, .zq-leer-zweit:active { transform: scale(.96); }
.zq-leer-suche > * { animation: zq-leer-rein .32s cubic-bezier(.22,1,.36,1) both; }
.zq-leer-suche > .zq-leer-titel { animation-delay: .12s; }
.zq-leer-suche > .zq-leer-satz { animation-delay: .18s; }
.zq-leer-suche > .zq-leer-extra { animation-delay: .21s; }
.zq-leer-suche > .zq-leer-knoepfe { animation-delay: .24s; }
@keyframes zq-leer-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zq-suchstart { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border-radius: 24px; border: 1px solid var(--karten-rand); background: var(--karte); color: var(--text); text-align: left; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-suchstart:active { transform: scale(.97); }
.zq-suchstart .zq-kreis svg { width: 18px; height: 18px; }
.zq-suchstart-text { flex: 1; min-width: 0; }
.zq-suchstart-text > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-suchstart-text small { margin-bottom: 1px; font-size: 12.5px; font-weight: 600; color: var(--oliv-text); }
.zq-suchstart-text b { font-size: 15px; font-weight: 700; letter-spacing: -.35px; line-height: 18px; }
.zq-suchstart-text span { margin-top: 1px; font-size: 12.5px; font-weight: 500; line-height: 17px; color: var(--muted); }
/* Der schwarze Pfeil-Kreis (PfeilKreis ohne „oliv“) - auch, wenn die Karten den olive tragen. */
.zq-app .zq-suchstart .zq-pfeil, .zq-app.pfeil-oliv .zq-suchstart .zq-pfeil { margin-left: 0; background: var(--brand); color: var(--bg); box-shadow: none; }

/* ── Die Lockup-Karte (ZquadCard) ── */
/* 2 pt oben (v85): der Live-Rand (.live::before, inset -1.5) ragt ueber die Karte - die klebende Ueberschrift schnitt ihn ab; dafuer .zq-tag unten 8 statt 10. */
.zq-karten { padding: 2px 16px 0; }
.zq-karte { position: relative; display: block; width: 100%; margin-bottom: 10px; border-radius: 24px; border: 1px solid var(--karten-rand); background: var(--karte); color: var(--text); text-align: left; overflow: hidden;
  transition: transform .2s cubic-bezier(.3,.6,.2,1); transform: scale(var(--druck, 1)); }
.zq-karte.gedrueckt { --druck: .972; transition-duration: .13s; transition-timing-function: cubic-bezier(.3,.7,.3,1); }
.zq-karte.live { border-color: rgba(0,0,0,0); overflow: visible; }
.zq-karte.live::before { content: ""; position: absolute; inset: -1px; border-radius: 25px; border: 1px solid var(--oliv); pointer-events: none; z-index: 2; }
.zq-karte.live .zq-ecke { border-radius: 23px; }
.zq-ecke { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 23px; }
.zq-ecke svg { position: absolute; right: 0; top: 0; width: 361px; height: 176px; }
.zq-ecke path { stroke: var(--muster); stroke-width: 1; }
.zq-karte-kopf { position: relative; padding: 14px 16px 12px 18px; }
.zq-ueberzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; }
.zq-ueber-links { display: flex; align-items: center; gap: 7px; flex-shrink: 1; min-width: 0; }
.zq-phase { font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; color: var(--oliv-text); white-space: nowrap; }
.zq-wann { display: flex; align-items: center; flex-shrink: 1; min-width: 0; white-space: nowrap; font-size: 13px; letter-spacing: -.15px; line-height: 16px; }
.zq-wann-text { font-weight: 700; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zq-ziffern { font-weight: 400; font-variant-numeric: tabular-nums; }
.zq-punkt { width: 8px; height: 8px; border-radius: 4px; margin: 0 6px; flex: none; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pr, rgba(0,0,0,0)); }
.zq-punkt.atmet { background: var(--oliv); animation: zq-atmen 2.4s ease-in-out infinite; }
@keyframes zq-atmen { 0%, 100% { box-shadow: 0 0 0 0 rgba(167,183,122,.45); } 50% { box-shadow: 0 0 0 4px rgba(167,183,122,0); } }
.zq-weg { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 10000; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zq-merk { flex: none; color: var(--text); }
.zq-merk svg { width: 12px; height: 12px; stroke-width: 2.2; fill: currentColor; }
.zq-titel-zeile { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.zq-titel { flex-shrink: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-neben { margin-top: 2px; font-size: 13.5px; font-weight: 500; letter-spacing: -.15px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-neben b { font-weight: 600; color: var(--text); }
.zq-runden { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--oliv-text); }
.zq-runden svg { width: 14px; height: 14px; stroke-width: 2.3; }
.zq-runden span { flex-shrink: 1; min-width: 0; font-size: 12.5px; font-weight: 500; letter-spacing: -.1px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-runden span b { font-weight: 600; }
.zq-unten { display: flex; align-items: center; gap: 9px; margin-top: 10px; height: 30px; }
.zq-koepfe { display: flex; align-items: center; flex: none; margin-left: -2px; }
.zq-kopf-klein { position: relative; width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--karte); background: var(--karte); display: grid; place-items: center; }
.zq-kopf-klein + .zq-kopf-klein { margin-left: -8px; }
.zq-kopf-klein.bekannt { border: 1px solid var(--oliv); padding: 0; }
.zq-kopf-klein.bekannt > .zq-mono { box-shadow: 0 0 0 1px var(--karte); }
.zq-mono { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--mo); color: var(--ms); box-shadow: inset 0 0 0 .5px var(--mono-rand);
  font: 700 8.36px/10.12px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.22px; }
.zq-dunkel .zq-mono { background: var(--moD); color: var(--msD); }
.zq-dabei { flex-shrink: 1; min-width: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -.15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-zahl { font: 500 15px/1 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.35px; color: var(--text); }
/* Die Grenze in „3 von 16 dabei“ (v124, App AI; vorher „/16“): 60 % wie die App seit der
   Durchsicht 16.10. (vorher 45 %). */
.zq-zahl.leise { opacity: .6; }
/* Knapp ohne Pille (das eigene Zquad): die Zeile sagt es in Oliv (ZquadCard dabeiKnapp). */
.zq-dabei.knapp, .zq-dabei.knapp .zq-zahl { color: var(--oliv-text); }
.zq-dabei.knapp { font-weight: 600; }
.zq-pfeil { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--brand); color: var(--bg); }
.zq-pfeil svg { width: 16px; height: 16px; stroke-width: 2.4; }
.zq-app.pfeil-oliv .zq-pfeil { background: transparent; box-shadow: inset 0 0 0 1px var(--oliv); color: var(--oliv-text); }
.zq-pille { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 15px; border: 1.5px solid var(--oliv); background: var(--oliv-licht); color: var(--oliv-text); font-size: 12px; font-weight: 700; letter-spacing: -.15px; white-space: nowrap; }
/* „Warteliste“ als Angebot (Pille 'rahmen'): Rand, ohne Flaeche, leise Schrift. */
.zq-pille.rahmen { border-color: var(--linie); background: transparent; color: var(--muted); font-weight: 600; }
.zq-karte.leise .zq-wann-text, .zq-karte.leise .zq-ziffern { color: var(--dim); font-weight: 600; }
.zq-karte.leise .zq-titel { color: var(--muted); font-weight: 600; }
.zq-karte.leise .zq-mono { background: var(--feld) !important; color: var(--dim) !important; opacity: .65; }
.zq-karte.leise .zq-pfeil { background: var(--rund); color: var(--text); box-shadow: none; }

/* ── Schwebende Tab-Pille + Plus (FloatingTabBar, LEISTE_ENG) – Lage per JS ── */
.zq-leiste-verlauf { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; z-index: 25; pointer-events: none; background: linear-gradient(to bottom, var(--seite0) 0%, var(--seite) 70.45%); }
.zq-leiste { position: absolute; left: 16px; bottom: 26px; width: 287px; height: 62px; border-radius: 31px; background: var(--brand); z-index: 30;
  box-shadow: 0 14px 28px -10px rgba(13,14,12,.2); display: flex; padding: 0 6px; transform-origin: 50% 50%; }
/* H „Ruhiger“ (v121, 24.10.2026): Tab-Leiste und Plus mit weicherem, flacherem Schatten
   (vorher hell 0 10px 16px rgba(13,14,12,.24), dunkel 0 10px 16px rgba(0,0,0,.6)). */
.zq-dunkel .zq-leiste, .zq-dunkel .zq-plus { box-shadow: 0 14px 28px -10px rgba(0,0,0,.45); }
.zq-tab { position: relative; flex: 1; color: var(--bg); transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-tab:active { transform: scale(.9); }
.zq-tab-zeichen { position: absolute; left: 50%; top: 50%; width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; opacity: .55; transform: translateY(var(--zeichen-y, -7.5px)); }
.zq-tab-zeichen svg { position: absolute; inset: 0; width: 23px; height: 23px; stroke-width: 1.9; }
.zq-tab.an .zq-tab-zeichen { opacity: 1; }
.zq-tab.an .zq-tab-zeichen svg { fill: currentColor; }
.zq-tab-wort { position: absolute; left: -10px; right: -10px; top: 50%; margin-top: 7px; height: 15px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: -.2px; line-height: 12px; opacity: .55; white-space: nowrap; }
.zq-tab.an .zq-tab-wort { font-weight: 800; opacity: 1; }
.zq-plus { position: absolute; right: 16px; bottom: 26px; width: 62px; height: 62px; border-radius: 31px; background: var(--brand); color: var(--bg); z-index: 31; display: grid; place-items: center;
  box-shadow: 0 14px 28px -10px rgba(13,14,12,.2); transition: background-color .2s; }
.zq-plus svg { width: 26px; height: 26px; stroke-width: 2.2; }
.zq-plus:active { transform: scale(.9); }

/* ── Blaetter (BottomSheet): Sortieren, Standort, Zquad ── */
.zq-vorhang { position: absolute; inset: 0; z-index: 50; background: var(--vorhang); opacity: 0; pointer-events: none; transition: opacity .3s; }
.zq-vorhang.auf { opacity: 1; pointer-events: auto; }
.zq-blatt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 51; max-height: calc(100% - 59px); display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; background: var(--blatt); transform: translateY(105%); transition: transform .42s cubic-bezier(.22,1,.36,1); }
.zq-blatt.auf { transform: none; }
.zq-griff { flex: none; height: 28px; display: grid; place-items: center; cursor: grab; }
.zq-griff i { width: 40px; height: 4px; border-radius: 2px; background: var(--griff); }
.zq-blatt-titel { margin: 0 0 12px; text-align: center; font: 600 18px/23px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.25px; }
.zq-blatt-inhalt { padding: 0 16px 42px; overflow-y: auto; scrollbar-width: none; }
.zq-blatt-inhalt::-webkit-scrollbar { display: none; }
.zq-menue { border-radius: 24px; background: var(--karte); border: 1px solid var(--karten-rand); overflow: hidden; }
.zq-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; text-align: left; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-zeile:active { transform: scale(.98); }
.zq-zeile + .zq-zeile { box-shadow: inset 0 .5px 0 var(--linie); }
.zq-kreis { width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--feld); }
.zq-kreis svg { width: 18px; height: 18px; stroke-width: 2; }
.zq-zeile.an .zq-kreis { background: var(--brand); color: var(--bg); }
.zq-zeile-text { flex: 1; min-width: 0; }
.zq-zeile-text b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.35px; line-height: 19px; }
.zq-zeile-text span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--muted); }
.zq-haken svg { width: 18px; height: 18px; stroke-width: 2.8; }

/* Zquad-Blatt (ZquadDetailSheet, vereinfacht) */
/* v121 (24.10.2026): hoechstens 80 % der Fensterhoehe wie die App (BLATT_ANTEIL
   0.8, maxHeight = round(852 x 0,8) = 682), inhaltshoch darunter. Die anderen
   Blaetter (Sortieren, Ort, Umkreis) behalten ihre Grenze; im Modus nurKarten
   gilt weiter .zq-ebene .zq-blatt (steht weiter unten). */
.zq-blatt.zq-detail { max-height: 682px; }
.zq-detail .zq-blatt-inhalt { padding: 0 16px 10px; }
.zq-cover { position: relative; height: 176px; border-radius: 22px; overflow: hidden; background: #0D0E0C; color: #F1F2EC; margin: 4px 0 16px; }
.zq-dunkel .zq-cover { background: #1B1C19; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.zq-cover svg.muster { position: absolute; inset: 0; width: 100%; height: 100%; }
.zq-cover svg.muster path { stroke: rgba(167,183,122,.34); stroke-width: 1; }
.zq-cover-oben { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; font-weight: 700; line-height: 14px; letter-spacing: 1.84px; text-transform: uppercase; color: rgba(241,242,236,.85); white-space: nowrap; }
.zq-cover-tag { position: absolute; left: 12px; bottom: -34px; font: 600 168px/1 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -8px; padding-right: 12px; white-space: nowrap; animation: zq-tag-hoch .56s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes zq-tag-hoch { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.zq-cover-unten { position: absolute; right: 18px; bottom: 16px; text-align: right; }
.zq-cover-zeit { font: 600 24px/1 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.36px; }
.zq-cover-monat { margin-top: 1px; font-size: 11.5px; font-weight: 700; line-height: 14px; letter-spacing: 1.84px; text-transform: uppercase; color: rgba(241,242,236,.85); }
.zq-d-kopf { padding: 0 4px; }
.zq-d-ueber { display: flex; align-items: center; gap: 7px; min-height: 17px; font-size: 13px; font-weight: 700; letter-spacing: -.15px; }
.zq-d-ueber > i { width: 9px; height: 9px; border-radius: 5px; flex: none; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pr, rgba(0,0,0,0)); }
.zq-d-ueber > span:not([class]) { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v124: davor die Phase (PhasePill, bald/laeuft), dahinter die Marke (Dabei, Angefragt). */
.zq-phase-pille { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--oliv-text); font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; }
.zq-phase-pille i { width: 6px; height: 6px; border-radius: 3px; background: var(--oliv-text); animation: zq-atmen 2.4s ease-in-out infinite; }
.zq-rolle { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap; }
.zq-rolle svg { width: 11px; height: 11px; }
.zq-rolle.dabei { background: var(--gut); color: #FFFFFF; }
.zq-dunkel .zq-rolle.dabei { color: #132010; }
.zq-rolle.angefragt { background: #D9E2BE; color: #3F4D26; }
.zq-dunkel .zq-rolle.angefragt { background: #3F4A2B; color: #DBE5BB; }
.zq-d-titel { margin-top: 3px; font: 600 24px/28px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.45px; }
.zq-d-neben { margin-top: 5px; font-size: 14px; font-weight: 500; letter-spacing: -.15px; line-height: 19px; }
.zq-d-neben b { font-weight: 700; }
.zq-d-aktionen { display: flex; gap: 4px; margin-top: 12px; }
.zq-d-aktion { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: -.1px; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-d-aktion:active { transform: scale(.9); }
.zq-d-aktion i { width: 42px; height: 42px; border-radius: 21px; display: grid; place-items: center; background: var(--karte); }
.zq-d-aktion svg { width: 19px; height: 19px; stroke-width: 2; }
.zq-d-aktion.an svg { fill: currentColor; }
.zq-d-karte { margin-top: 10px; padding: 12px 14px; border-radius: 24px; background: var(--karte); border: 1px solid var(--karten-rand); }
.zq-termin { color: var(--text); }
/* Termin (v124, App BS, terminSpanne.ts): EINE Zeile - die Zeitfarbe als Punkt (Terminfeld ohne
   Flaeche, App 94fe06971; live atmet er), daneben die Spanne „19:00–21:00“ in Sora 22. Wochentag,
   Tag und Beginn stehen im Cover darueber; vorher standen sie hier ein zweites Mal. */
.zq-termin.zq-spanne { display: flex; align-items: center; gap: 7px; min-height: 26px; }
.zq-spanne > i { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pr, rgba(0,0,0,0)); }
.zq-spanne > i.live { animation: zq-termin-atmen 1.6s ease-in-out infinite; }
.zq-spanne .zq-termin-datum { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes zq-termin-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.zq-klein-label { font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; }
.zq-termin-datum { font: 600 22px/26px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.36px; }
.zq-trenner { height: .5px; margin: 10px 0 2px; background: var(--linie); }
.zq-bz { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.zq-bz .zq-kreis { width: 34px; height: 34px; }
.zq-bz .zq-kreis svg { width: 17px; height: 17px; }
.zq-bz-text { flex: 1; min-width: 0; }
.zq-bz-text small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; }
.zq-bz-text b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
/* Kleine Luecken + Dauer (App abb9b2945 / 34ae0d141, 10.10.2026) */
.zq-bz-text b.satz { line-height: 19px; }
.zq-bz-text .neben { display: block; margin-top: 1px; font-size: 12.5px; line-height: 17px; font-weight: 500; letter-spacing: -.1px; color: var(--muted); }
.zq-bz-text b.oliv { color: var(--oliv-text); }
.zq-mindest { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.zq-mindest > span { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: -.15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-mindest b { font-weight: 700; color: var(--text); }
.zq-mindest b.offen { color: var(--oliv-text); }
.zq-mindest-balken { display: block; flex: none; width: 96px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--feld); }
.zq-mindest-balken > i { display: block; height: 6px; border-radius: 3px; background: var(--oliv); }
.zq-karten-titel { font-size: 15.5px; font-weight: 700; letter-spacing: -.35px; }
.zq-beschreibung { margin-top: 6px; font-size: 15px; line-height: 21px; font-weight: 500; letter-spacing: -.15px; }
.zq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.zq-tags span { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--feld); font-size: 13px; font-weight: 700; letter-spacing: -.2px; }
.zq-runde-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.zq-runde-zahl { font: 600 22px/26px 'Sora', 'ZqInter', 'Inter', sans-serif; letter-spacing: -.31px; }
.zq-runde-zahl .leise { opacity: .6; }
.zq-runde-koepfe { display: flex; align-items: center; padding-bottom: 2px; }
.zq-runde-koepfe .zq-kopf-klein { width: 32px; height: 32px; border-radius: 16px; }
.zq-runde-koepfe .zq-kopf-klein + .zq-kopf-klein { margin-left: -9px; }
.zq-runde-koepfe .zq-kopf-klein.host { border-color: var(--oliv); }
.zq-runde-koepfe .zq-mono { width: 28px; height: 28px; font-size: 10.64px; line-height: 12.9px; letter-spacing: -.28px; }
.zq-fuss { flex: none; padding: 10px 16px 30px; background: var(--blatt); }
/* Der Fuss (v124): die Pille und daneben der runde Knopf (Verwalten bzw. Melden, 52, mittig).
   BI: die Pille ist MINDESTENS 52 hoch und darf zweizeilig werden (Ecke 26, je 10 Luft + 1,5
   Rand), die Zeile streckt beide auf dieselbe Hoehe. */
.zq-fuss-zeile { display: flex; align-items: stretch; gap: 10px; }
.zq-haupt { flex: 1; min-width: 0; min-height: 52px; padding: 11.5px 15.5px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: var(--bg); font-size: 15px; font-weight: 700; letter-spacing: -.3px; line-height: 19px; text-align: center; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-haupt > span { flex-shrink: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
button.zq-haupt:active { transform: scale(.97); }
.zq-haupt svg { width: 18px; height: 18px; stroke-width: 2.2; }
.zq-haupt.angefragt { background: #D9E2BE; color: #3F4D26; }
.zq-dunkel .zq-haupt.angefragt { background: #3F4A2B; color: #DBE5BB; }
/* Dabei (App „Blatt C“): gruen „Du bist dabei · Chat“, Schrift weiss bzw. dunkel fast schwarz-gruen. */
.zq-haupt.dabei { background: var(--gut); color: #FFFFFF; }
.zq-dunkel .zq-haupt.dabei { color: #132010; }
.zq-rund-gross { width: 52px; height: 52px; border-radius: 26px; flex: none; align-self: center; display: grid; place-items: center; background: var(--karte); color: var(--text); transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-rund-gross:active { transform: scale(.9); }
.zq-rund-gross svg { width: 19px; height: 19px; }
/* „Anfrage zurückziehen“: der eine rote Nebenweg unter der Pille. */
.zq-app .zq-neben-aktion { display: block; margin: 4px auto 0; padding: 6px 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.15px; color: var(--krit); transition: opacity .15s; }
.zq-neben-aktion:active { opacity: .6; }
.zq-toast { position: absolute; left: 50%; top: 66px; z-index: 60; transform: translate(-50%, -12px); opacity: 0; display: flex; align-items: center; gap: 9px; overflow: hidden; padding: 10px 16px; border-radius: 999px; background: var(--brand); color: var(--bg); font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.22,1,.36,1); }
.zq-toast.zeigt { opacity: 1; transform: translate(-50%, 0); }
/* Mit Rueckgaengig (v124, toast.undo der App): das Wort in Oliv, ein Balken laeuft in 5 s ab. */
.zq-toast.mit-aktion.zeigt { pointer-events: auto; }
.zq-app .zq-toast-aktion { padding: 4px 0 4px 8px; margin: -4px 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; color: #A7B77A; }
.zq-toast-rest { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #A7B77A; opacity: .7; transform-origin: left; }
.zq-toast.zeigt .zq-toast-rest { animation: zq-toast-rest 5s linear both; }
@keyframes zq-toast-rest { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.zq-dunkel .zq-toast-aktion { color: #55672C; }
.zq-dunkel .zq-toast-rest { background: #55672C; }

/* Rolle (der Ort rollt): alt nach oben weg, neu von unten */
.zq-rollt-raus { animation: zq-rolle-raus .32s cubic-bezier(.4,0,.2,1) both; }
.zq-rollt-rein { animation: zq-rolle-rein .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes zq-rolle-raus { to { opacity: 0; transform: translateY(-13px); } }
@keyframes zq-rolle-rein { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
.zq-einflug { animation: zq-einflug .36s cubic-bezier(.33,1,.68,1) both; }
@keyframes zq-einflug { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .zq-app *, .zq-app *::before, .zq-app *::after { animation: none !important; transition: none !important; }
}

/* ── Nur Karten (Website „In der Liste“) und die Blatt-Ebene daneben ── */
.zq-app.zq-nur-karten { position: relative; width: 100%; height: auto; transform: none; overflow: visible; background: transparent; contain: none; }
.zq-nur-karten .zq-karten { padding: 0; }
.zq-nur-karten .zq-karte:last-child { margin-bottom: 0; }
.zq-app.zq-ebene { position: absolute; inset: 0; width: auto; height: auto; transform: none; background: transparent; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 7; contain: none; }
.zq-ebene .zq-vorhang.auf, .zq-ebene .zq-blatt { pointer-events: auto; }
.zq-ebene .zq-blatt { max-height: calc(100% - 16px); }
.zq-ebene .zq-fuss { padding-bottom: 16px; }
.zq-ebene .zq-toast { top: 14px; }
@media (hover: hover) and (pointer: fine) {
  .zq-nur-karten .zq-karte:not(.gedrueckt):hover { transform: translateY(-2px); }
}

/* ═══ Einbau Startseite (v75) ════════════════════════════════════════════
   1 · Kopf: der Bildschirm im Foto (.zq-schirm, Lage per app-home.js aus den
   Massen der held-*.webp). Die Ebenen ueber dem Foto lassen Klicks durch.
   2 · In der Liste: die App-Karten in der Buehne, das Blatt in ihr. */
.zq-schirm { position: absolute; z-index: 3; overflow: hidden; background: #000; isolation: isolate; }
.zq-glanz { position: absolute; inset: 0; z-index: 70; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 52%);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35); }
.zq-kopf-live .held-v .schleier, .zq-kopf-live .held-v .ed-kopfmuster { pointer-events: none; }
.zq-kopf-live .held-v .inhalt { pointer-events: none; }
.zq-kopf-live .held-v .inhalt > * { pointer-events: auto; }
.ed-app-karten { width: 100%; max-width: 392px; }

/* ── Kartenansicht (ZquadMap, Karte C): Bild unter dem offenen Kopf, Tropfen,
   Du-Punkt, Kapsel links unten, Lizenz rechts unten, Vorschau-Karte oben ── */
.zq-app { --land: #F4F3EE; --du-kern: #8A9C55; --du-ring: #FFFFFF; --lizenz-grund: rgba(244,243,238,.82); --lizenz-text: #8A887F; --kapsel-rand: rgba(13,14,12,.08); }
.zq-app.zq-dunkel { --land: #121311; --du-kern: #A7B77A; --du-ring: #F2F2EE; --lizenz-grund: rgba(18,19,17,.8); --lizenz-text: #7E7F77; --kapsel-rand: rgba(255,255,255,.08); }
.zq-app [hidden] { display: none !important; }
.zq-karten-flaeche { position: absolute; left: 0; right: 0; top: 228px; bottom: 0; overflow: hidden; z-index: 1; background: var(--land); cursor: grab; touch-action: pan-y; }
.zq-karten-welt { position: absolute; left: 0; top: 0; width: 393px; height: 624px; transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.zq-karten-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.zq-tropfen-ebene { position: absolute; inset: 0; pointer-events: none; }
.zq-tropfen-ebene > * { position: absolute; }
.zq-tropfen { pointer-events: auto; padding: 0; transition: left .35s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1); }
.zq-tropfen img { width: 100%; height: 100%; display: block; pointer-events: none; }
.zq-tropfen:active { transform: scale(.92); transform-origin: 50% 90%; }
.zq-glanz-tropfen { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(167,183,122,.55) 0%, rgba(167,183,122,.55) 40%, rgba(167,183,122,0) 100%); transition: left .35s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1); }
.zq-dunkel .zq-glanz-tropfen { background: radial-gradient(circle, rgba(167,183,122,.67) 0%, rgba(167,183,122,.67) 40%, rgba(167,183,122,0) 100%); }
.zq-du { width: 0; height: 0; pointer-events: none; transition: left .35s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1); }
.zq-du-hof { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: var(--du-kern); opacity: .2; }
.zq-du-kern { position: absolute; left: -9.5px; top: -9.5px; width: 19px; height: 19px; border-radius: 50%; background: var(--du-kern); box-shadow: inset 0 0 0 3px var(--du-ring); }
.zq-du b { position: absolute; left: -20px; width: 40px; top: -26px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .22px; line-height: 13px; color: var(--text);
  text-shadow: 0 0 1.6px var(--land), 0 0 1.6px var(--land), 0 0 1.6px var(--land), 0 0 1.6px var(--land); }
/* Du pulsiert leise (v78, User 04.10.2026): ein oliver Ring laeuft unter dem
   Kern hervor nach aussen und verblasst - wie me-puls der App (Radius 7 -> 34,
   Strich 2, Deckkraft 0,75 -> 0); dort einmal, hier alle 3 s (DU_PULS_MS in
   app-home.js). Groesse statt scale, damit der Strich 2 pt bleibt; ausser
   Sicht ruht er (.zq-ausser-sicht). Mit „Bewegung reduzieren“ (auch Windows
   ohne Animationseffekte) waechst nichts - der Ring steht und atmet nur. */
.zq-du-puls { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--du-kern); border-radius: 50%; opacity: 0;
  animation: zq-du-weit 3s cubic-bezier(.22,.61,.36,1) infinite, zq-du-blass 3s linear infinite; }
@keyframes zq-du-weit { 0% { left: -9px; top: -9px; width: 18px; height: 18px; } 50%, 100% { left: -36px; top: -36px; width: 72px; height: 72px; } }
@keyframes zq-du-blass { 0% { opacity: .75; } 50%, 100% { opacity: 0; } }
@keyframes zq-du-atmen { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }
.zq-ausser-sicht .zq-du-puls { animation-play-state: paused; }
/* (gegen die Sammelregel oben: .zq-app * { animation: none !important }) */
@media (prefers-reduced-motion: reduce) {
  .zq-app .zq-du-puls { left: -23px; top: -23px; width: 46px; height: 46px; animation: zq-du-atmen 3s ease-in-out infinite !important; }
  .zq-app.zq-ausser-sicht .zq-du-puls { animation-play-state: paused !important; }
}
.zq-karten-kante { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: linear-gradient(to bottom, var(--seite), var(--seite0)); pointer-events: none; }
/* „Zurück zur Liste“ (home.tsx, Pille dunkel): mittig unter dem Kopf, 32 hoch;
   die Vorschau-Karte sitzt darunter (RUECK_PILLE_UNTER 62). */
.zq-zurueck { position: absolute; left: 50%; top: 10px; z-index: 4; translate: -50% 0; display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 16px; background: var(--brand); color: var(--bg); font-size: 12.5px; font-weight: 700; letter-spacing: -.15px; white-space: nowrap;
  transition: scale .16s cubic-bezier(.33,1,.68,1); }
.zq-zurueck svg { width: 14px; height: 14px; stroke-width: 2.2; }
.zq-zurueck:active { scale: .95; }
.zq-karten-flaeche:not([hidden]) .zq-zurueck { animation: zq-zurueck-rein .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes zq-zurueck-rein { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.zq-vorschau { position: absolute; left: 16px; right: 16px; top: 62px; z-index: 3; opacity: 0; transform: translateY(-10px); transition: opacity .16s, transform .16s; pointer-events: none; }
.zq-vorschau.zeigt { opacity: 1; transform: none; transition: opacity .22s, transform .22s cubic-bezier(.22,1,.36,1); pointer-events: auto; }
.zq-vorschau .zq-karte { margin-bottom: 0; }
/* „1 von 3 an diesem Ort ›“ (v124, App AM, home.tsx stapelPille): mittig 13 unter der Vorschau,
   32 hoch, das leise Oliv deckend auf dem Kartenpapier gemischt, ein Hauch Schatten. */
.zq-stapel-zeile { display: flex; justify-content: center; margin-top: 13px; pointer-events: none; }
.zq-stapel { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: #ECEFE2; color: var(--oliv-text);
  box-shadow: 0 1px 4px rgba(13,14,12,.08); font-size: 12.5px; font-weight: 700; letter-spacing: -.15px; white-space: nowrap; transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-dunkel .zq-stapel { background: #2E3226; }
.zq-stapel:active { transform: scale(.95); }
.zq-stapel svg { width: 14px; height: 14px; }
.zq-kapsel { position: absolute; left: 16px; bottom: 104px; z-index: 3; width: 44px; border-radius: 22px; overflow: hidden; background: var(--karte); box-shadow: 0 0 0 .5px var(--kapsel-rand), 0 1px 3px rgba(0,0,0,.07); }
.zq-app .zq-kapsel button { width: 44px; height: 42px; display: grid; place-items: center; color: var(--text); transition: transform .16s cubic-bezier(.33,1,.68,1); }
.zq-kapsel button:active { transform: scale(.9); }
.zq-kapsel svg { width: 20px; height: 20px; stroke-width: 2.2; }
.zq-kapsel i { display: block; height: .5px; margin: 0 12px; background: var(--linie); }
.zq-lizenz { position: absolute; right: 10px; bottom: 104px; z-index: 3; border-radius: 7px; padding: 2px 6px; background: var(--lizenz-grund); color: var(--lizenz-text); font-size: 9.5px; font-weight: 600; letter-spacing: -.1px; line-height: 13px; pointer-events: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .zq-tropfen, .zq-du, .zq-glanz-tropfen, .zq-karten-welt { transition: none; } }

/* ── „Probier's aus“ (v79, User 04.10.2026: dass man die Telefone bedienen
   kann, erwartet niemand) ──────────────────────────────────────────────
   Schild: Pille wie der Hauptknopf der Seite (--knopf), Zeichen oliv; am Foto
   setzt app-home.js die Lage (mittig unter dem Telefon, sonst darueber;
   Tablet/Handy als Bildunterschrift unter der Fotokarte). */
.zq-probier { position: absolute; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px;
  border-radius: 999px; background: var(--knopf, #0B0C0A); color: var(--knopf-text, #FBFBF9); box-shadow: var(--knopf-schatten, 0 4px 14px rgba(0,0,0,.18));
  font-size: 13px; font-weight: 600; letter-spacing: -.1px; line-height: 1; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); opacity: 0; transition: opacity .5s ease .3s; --probier-zeichen: #A7B77A; }
.zq-probier.da { opacity: 1; }
.zq-probier svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--probier-zeichen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .zq-probier { --probier-zeichen: #5F7036; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zq-probier { --probier-zeichen: #5F7036; } }
/* Tablet/Handy: unter der Fotokarte im Fluss (Kopf: Flex-Spalte, order 5 wie
   .bild; Karte: Block) - im Foto ist neben dem Telefon kein Platz. */
.zq-probier.im-fluss { position: relative; left: auto; top: auto; transform: none; display: flex; width: max-content; max-width: calc(100% - 32px); order: 5; align-self: center; margin: 14px auto 0; }
@media (max-width: 560px) { .zq-probier { height: 30px; font-size: 13px; padding: 0 12px 0 10px; } }

/* Geister-Finger: halbdurchsichtiger Kreis mit weissem Rand (wie die
   Beruehrungs-Anzeige in Bildschirmaufnahmen), drueckt bei 34-52 % - dann
   drueckt app-home.js die Karte bzw. Nadel ein - und ein oliver Ring laeuft
   aus. Mit „Bewegung reduzieren“ nur ein Ein- und Ausblenden. */
.zq-geist-ebene { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.zq-geist { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; opacity: 0;
  background: rgba(104,106,98,.4); box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), 0 0 0 1px rgba(13,14,12,.14), 0 3px 12px rgba(0,0,0,.22); }
.zq-geist b { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #A7B77A; opacity: 0; }
.zq-geist.tippt { animation: zq-geist 1.5s cubic-bezier(.3,.7,.4,1) both; }
.zq-geist.tippt b { animation: zq-geist-ring 1.5s ease-out both; }
@keyframes zq-geist { 0% { opacity: 0; transform: scale(1.35); } 22% { opacity: 1; transform: scale(1); } 34% { transform: scale(1); } 42% { transform: scale(.82); } 52% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes zq-geist-ring { 0%, 40% { opacity: 0; transform: scale(.9); } 46% { opacity: .9; } 90%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes zq-geist-ruhig { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: .5; } 55%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .zq-app .zq-geist.tippt { animation: zq-geist-ruhig 1.6s ease-in-out both !important; }
  .zq-app .zq-geist.tippt b { animation: none !important; }
}
.zq-tropfen.gedrueckt { transform: scale(.92); transform-origin: 50% 90%; transition: transform .16s cubic-bezier(.33,1,.68,1), left .35s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1); }
/* Greifen nur, wenn es etwas zu schieben gibt (hineingezoomt). */
.zq-karten-flaeche { cursor: default; }
.zq-karten-flaeche.gezoomt { cursor: grab; }

/* 3 · Karten-Foto: der Bildschirm schraeg im Foto (Lage per matrix3d) */
.zq-schirm.zq-schirm-schraeg { left: 0; top: 0; width: 393px; height: 852px; border-radius: 55px; transform-origin: 0 0; backface-visibility: hidden; }
.zq-karte-live .karte-v .bahn { pointer-events: none; }
.zq-karte-live .karte-v .karte-text { pointer-events: auto; }