/* einzug: Design-System, Version 2 „Foto zuerst“ (31.10.2026, Paul: „keine Dynamik, keine Bilder, wirkt AI-generated“)
   Echte Fotos tragen die Farbe. UI: Nacht-Schwarz und Weiß, ein Akzent (Blau) für Auswahl und „passt“.
   Hauptknopf weiß auf Dunkel bzw. schwarz auf Hell. Keine Monoschrift, keine Deko-Verläufe (nur Schleier für Lesbarkeit über Fotos),
   keine Großbuchstaben-Etiketten, keine Icon-Kacheln. Bewegung: Ken-Burns auf Fotos, Karten mit Wisch-Physik, Fotoband. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --nacht: #0c0c0d;      /* App-Grund, Hero */
  --nacht-2: #17171a;    /* Flächen im Dunkeln */
  --nacht-3: #26262b;    /* Linien, Felder im Dunkeln */
  --hell: #f6f6f4;       /* Text auf Dunkel */
  --gedimmt: #a3a3a8;    /* Nebentext auf Dunkel */
  --ink: #111112;
  --ink-2: #45454a;
  --grau: #6c6c71;
  --linie: #e6e6e3;
  --grund: #f3f3f1;
  --weiss: #ffffff;
  --blau: #1a73e8;       /* einziger Akzent: klares Blau, kein Violett-Stich */
  --blau-tief: #1257c6;
  --blau-hell: #e8f0fe;
  --gut: #16794a; --gut-hell: #e2f4ea; /* vorher #1c8a55: 3,8:1 auf --gut-hell, jetzt 4,75:1 (Barrierefreiheit) */
  --warn: #9a5800; --warn-hell: #fff0d4;
  --schlecht: #c2372d; --schlecht-hell: #fde6e3;
  --fake: #ffcf33;

  --schrift: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 13px; --t-s: 15px; --t-m: 17px; --t-l: 21px; --t-xl: 28px;
  --t-2xl: clamp(34px, 5vw, 60px);
  --t-hero: clamp(52px, 8.4vw, 108px); /* 116 px war für die Hero-Spalte am PC zu breit (3 Zeilen) */

  --r-s: 8px; --r-m: 14px; --r-l: 24px; --r-xl: 34px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
  --sh-2: 0 24px 60px rgba(0, 0, 0, .28);
  --feder: cubic-bezier(.2, .9, .25, 1.2);
  --sanft: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: var(--t-s); line-height: 1.5; color: var(--ink); background: var(--weiss); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Logo: Schlüsselanhänger, einfarbig */
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 22px; letter-spacing: -0.045em; text-decoration: none; color: inherit; }
.logo svg { width: 22px; height: 26px; flex: none; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 700; font-size: var(--t-s); text-decoration: none; cursor: pointer; background: var(--ink); color: #fff; transition: transform .18s var(--feder), background .15s, box-shadow .15s; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: scale(.96); }
.knopf.weiss { background: #fff; color: var(--ink); }
.knopf.blau { background: var(--blau); color: #fff; }
.knopf.blau:hover { background: var(--blau-tief); }
.knopf.glas { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.knopf.rand { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie); }
.knopf.rand:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.knopf.gross { min-height: 58px; padding: 0 30px; font-size: var(--t-m); }
.knopf svg { width: 18px; height: 18px; }

/* Chips (eckig) */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; line-height: 1; padding: 6px 8px; border-radius: var(--r-s); background: var(--grund); color: var(--ink-2); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.gut { background: var(--gut-hell); color: var(--gut); }
.chip.warn { background: var(--warn-hell); color: var(--warn); }
.chip.schlecht { background: var(--schlecht-hell); color: var(--schlecht); }
.chip.fake { background: var(--fake); color: var(--ink); font-weight: 700; }

/* U-Bahn-Linie in den Farben der Wiener Linien */
.linie { display: inline-grid; place-items: center; flex: none; white-space: nowrap; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 5px; background: var(--l, #555); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0; }

/* ---------- Wischkarte ---------- */
.stapel { position: relative; }
.karte { position: absolute; inset: 0; border-radius: var(--r-l); overflow: hidden; background: #222; box-shadow: var(--sh-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; color: #fff;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); will-change: transform; }
.karte.zieht { cursor: grabbing; }
.karte.federt { transition: transform .45s var(--feder); }
.karte.fliegt { transition: transform .38s cubic-bezier(.3, .6, .4, 1), opacity .38s; }
.karte.wartet { --s: calc(.93 + .07 * var(--nah, 0)); --y: calc(16px - 16px * var(--nah, 0)); filter: brightness(calc(.72 + .28 * var(--nah, 0))); transition: transform .3s var(--sanft), filter .3s; }
.karte.wartet.zwei { --s: .86; --y: 30px; filter: brightness(.5); }
.karte.kommt { animation: rein .42s var(--feder); }
@keyframes rein { from { transform: translate3d(var(--von, 0px), 30px, 0) rotate(var(--von-r, 0deg)) scale(.96); } }
.karte.wackelt { animation: wackeln 1.4s var(--sanft); }
@keyframes wackeln { 0%, 100% { transform: none; } 20% { transform: translateX(-26px) rotate(-3deg); } 45% { transform: translateX(22px) rotate(2.5deg); } 65% { transform: none; } }
.karte-fotos, .karte-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte-fotos img { object-fit: cover; opacity: 0; transition: opacity .22s ease-out; -webkit-user-drag: none; pointer-events: none; }
.karte-fotos img.an { opacity: 1; }
.karte-fotos img.hoch { object-position: center 30%; } /* Hochkant-Fotos: oberes Drittel bleibt sichtbar (karte.js) */
.karte.oben-auf .karte-fotos img.an { animation: kenburns 14s ease-out both; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.karte-balken { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
/* Story-Balken: gefüllt = gesehen, der aktuelle füllt sich in --dauer (karte.js: Ende der Animation = nächstes Foto). Ohne Auto-Lauf ist der aktuelle ganz weiß. */
.karte-balken i { position: relative; overflow: hidden; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); }
.karte-balken i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #fff; transform: scaleX(0); transform-origin: left; }
.karte-balken i.vor::after, .karte-balken i.an::after { transform: scaleX(1); }
.karte.auto .karte-balken i.an::after { transform: scaleX(0); animation: balken var(--dauer, 5s) linear var(--verz, 1s) forwards; }
@keyframes balken { to { transform: scaleX(1); } }
.karte.auto.zieht .karte-balken i.an::after, .tab-weg .karte.auto .karte-balken i.an::after, .aus-sicht .karte.auto .karte-balken i.an::after,
body.gm-offen .karte.auto .karte-balken i.an::after, body.suche-offen .karte.auto .karte-balken i.an::after, body.k-offen .karte.auto .karte-balken i.an::after { animation-play-state: paused; }
body:has(.blatt:not([hidden])) .karte.auto .karte-balken i.an::after, body:has(#treffer:not([hidden])) .karte.auto .karte-balken i.an::after { animation-play-state: paused; }
.karte.ohne-fotos .karte-balken, .karte.ohne-fotos .tippzone { display: none; }
@media (prefers-reduced-motion: reduce) { .karte.auto .karte-balken i.an::after { animation: none; transform: scaleX(1); } }
.karte-oben { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; z-index: 2; pointer-events: none; }
.weg-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; line-height: 1.2; background: rgba(12, 12, 13, .62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; padding: 5px 12px 5px 5px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.passt { --p: 50; position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blau) calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0); }
.passt::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(12, 12, 13, .78); }
.passt b { position: relative; font-size: 17px; letter-spacing: -.03em; line-height: 1; }
.passt small { position: absolute; bottom: -17px; font-size: 11px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.passt.tief { background: conic-gradient(var(--fake) calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0); }
.foto-text { position: absolute; top: 66px; left: 12px; z-index: 2; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); pointer-events: none; }
.foto-text.ki { top: auto; left: auto; right: 12px; bottom: 12px; padding: 2px 6px; font-size: 10px; letter-spacing: .02em; background: rgba(12, 12, 13, .55); color: #fff; } /* KI-Foto: klein „AI“ unten rechts */
.tippzone { position: absolute; top: 0; bottom: 0; width: 33.34%; border: 0; background: transparent; padding: 0; z-index: 1; cursor: inherit; }
.tippzone.links { left: 0; } .tippzone.rechts { right: 0; }
.karte-unten { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 18px 18px; display: grid; gap: 4px; z-index: 2; cursor: pointer;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .82)); }
.karte-preis { font-size: 34px; font-weight: 800; letter-spacing: -.045em; line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.karte-preis small { font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .82; }
.karte-unten h3 { font-size: 21px; letter-spacing: -.025em; line-height: 1.15; }
.karte-unten p { font-size: 13.5px; opacity: .88; }
.karte-warum { display: flex; align-items: center; gap: 6px; font-size: 13px !important; font-weight: 700; opacity: 1 !important; color: #c9d6ff; }
.karte-warum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 3px rgba(26, 115, 232, .3); flex: none; }
.karte-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.karte-chips .chip { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.karte-chips .chip.gut { background: rgba(226, 244, 234, .95); color: var(--gut); }
.karte-chips .chip.warn { background: rgba(255, 240, 212, .96); color: var(--warn); }
.karte-chips .chip.schlecht { background: rgba(253, 230, 227, .96); color: var(--schlecht); }
.karte-chips .chip.fake { background: var(--fake); color: var(--ink); }
.karte-chips .chip.hervor { background: #fff; color: var(--ink); font-weight: 700; backdrop-filter: none; -webkit-backdrop-filter: none; } /* bezahlte Platzierung: gut lesbar auf jedem Foto */
.karte.ist-fake { box-shadow: 0 0 0 3px var(--fake), var(--sh-2); }
/* Rückmeldung beim Ziehen */
.karte-ton { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.karte-ton.ja { opacity: var(--ja, 0); box-shadow: inset 0 0 0 4px var(--blau), inset 0 0 120px rgba(26, 115, 232, .45); border-radius: inherit; }
.karte-ton.nein { opacity: var(--nein, 0); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), inset 0 0 120px rgba(0, 0, 0, .5); border-radius: inherit; }
.stempel { position: absolute; top: 78px; z-index: 3; padding: 6px 14px; border-radius: 10px; font-weight: 800; font-size: 28px; letter-spacing: -.02em; pointer-events: none; }
.stempel.ja { left: 16px; background: var(--blau); color: #fff; transform: rotate(-10deg) scale(calc(.8 + .2 * var(--ja, 0))); opacity: var(--ja, 0); }
.stempel.nein { right: 16px; background: #fff; color: var(--ink); transform: rotate(10deg) scale(calc(.8 + .2 * var(--nein, 0))); opacity: var(--nein, 0); }
.stempel.hoch { left: 50%; top: 40%; background: #fff; color: var(--ink); transform: translateX(-50%) scale(calc(.8 + .2 * var(--hoch, 0))); opacity: var(--hoch, 0); }

/* Rund-Knöpfe unter dem Stapel */
.aktionen { display: flex; justify-content: center; align-items: center; gap: 14px; }
.rund { width: 62px; height: 62px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #fff; color: var(--ink); box-shadow: var(--sh-1); transition: transform .2s var(--feder), opacity .2s; }
.rund:hover { transform: scale(1.06); }
.rund:active, .rund.drueckt { transform: scale(.88); }
.rund svg { width: 26px; height: 26px; }
.rund.klein { width: 46px; height: 46px; }
.rund.klein svg { width: 20px; height: 20px; }
@media (max-width: 340px) { .aktionen { gap: 6px; } .rund { width: 56px; height: 56px; flex: none; } .rund.klein { width: 46px; height: 46px; } } /* 320 px: fünf Knöpfe, keiner unter 44 px breit */
.rund.ja { background: var(--blau); color: #fff; }
.rund.dunkel { background: var(--nacht-2); color: #fff; box-shadow: inset 0 0 0 1px var(--nacht-3); }
.rund:disabled { opacity: .3; cursor: default; transform: none; }

/* Erscheinen beim Scrollen (nur mit Skript, ohne Skript sofort sichtbar) */
.js .auf { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--sanft), transform .7s var(--sanft); }
.js .auf.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .auf { opacity: 1; transform: none; }
}

/* ---------- Anmelden: gemeinsamer Kasten und Fenster für alle Seiten (public/konto-ui.js) ---------- */
.k-login { display: grid; gap: 10px; color: var(--ink); }
.k-login > b { font-size: 24px; letter-spacing: -.035em; line-height: 1.15; }
.k-login > p { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.k-login [data-stufe] { display: grid; gap: 10px; }
.k-login [data-stufe][hidden], .k-form[hidden] { display: none; }
.k-meldung { margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--blau-hell); color: var(--ink); font-size: 14.5px; line-height: 1.35; font-weight: 500; }
.k-google { width: 100%; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie); }
.k-google svg { width: 20px; height: 20px; }
.k-oder { display: flex; align-items: center; gap: 10px; color: var(--grau); font-size: 13px; }
.k-oder::before, .k-oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.k-form { display: grid; gap: 10px; }
.k-form input { width: 100%; min-height: 52px; border: 0; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); }
.k-form input:focus { outline: 2px solid var(--blau); outline-offset: 0; }
.k-form input[inputmode="numeric"] { letter-spacing: .35em; font-size: 22px; font-weight: 700; text-align: center; }
.k-hinweis { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.k-links { display: grid; justify-items: start; gap: 2px; margin-top: 2px; }
.k-link { border: 0; background: none; font: inherit; font-size: 14px; color: var(--blau-tief); cursor: pointer; padding: 6px 2px; min-height: 44px; }
/* Fenster: am Handy von unten, am PC mittig; Seite dahinter abgedunkelt */
.k-fenster { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; background: rgba(12, 12, 13, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: k-dunkel .2s ease both; }
.k-fenster-in { position: relative; width: 100%; max-height: 92dvh; overflow-y: auto; background: #fff; border-radius: 26px 26px 0 0; padding: 28px 22px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: k-hoch .35s var(--sanft) both; }
.k-zu { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--grund); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.k-zu svg { width: 20px; height: 20px; }
.k-fenster .k-login > b { padding-right: 52px; }
body.k-offen { overflow: hidden; }
@keyframes k-dunkel { from { opacity: 0; } }
@keyframes k-hoch { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 600px) {
  .k-fenster { align-items: center; justify-items: center; padding: 24px; }
  .k-fenster-in { width: min(440px, 100%); border-radius: 26px; padding: 32px 28px 28px; animation-name: k-pop; }
  @keyframes k-pop { from { transform: scale(.94); opacity: 0; } }
}

/* Anmelde-Hinweis nach 4 Swipes (konto-ui.js swipeGezaehlt): ruhig, ein Herz, zwei Knöpfe */
.k-merk .k-fenster-in { text-align: center; display: grid; gap: 10px; justify-items: center; }
.k-merk-bild { width: 64px; height: 64px; border-radius: 50%; background: #e8f0fe; color: var(--blau); display: grid; place-items: center; margin-bottom: 4px; }
.k-merk-bild svg { width: 30px; height: 30px; }
.k-merk h2 { font-size: 24px; letter-spacing: -.03em; line-height: 1.15; }
.k-merk p { color: var(--ink-2); font-size: 15px; max-width: 34ch; margin: 0 0 6px; }
.k-merk .knopf { width: 100%; min-height: 50px; }
.k-merk .k-spaeter { background: var(--grund); color: var(--ink); }

/* Stempel beim Ziehen (01.11.2026, Paul: „das Nein, das liest keiner“): großer Kreis mit Symbol, die Karte tönt sich ein.
   Rechts blau (Merken/Ja), links dunkel mit ✕ (Weiter/Nein), hoch weiß (Anfragen/Egal). Gilt für Wohnungs- und Fragekarten. */
.karte-ton.ja { background: rgba(26, 115, 232, .30); box-shadow: inset 0 0 0 5px var(--blau); }
.karte-ton.nein { background: rgba(8, 8, 10, .58); box-shadow: inset 0 0 0 5px #111112; }
.karte-ton.hoch { opacity: var(--hoch, 0); background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 5px #fff; border-radius: inherit; }
.stempel-gross { position: absolute; left: 50%; top: 40%; z-index: 4; display: grid; justify-items: center; gap: 10px; pointer-events: none;
  opacity: var(--v, 0); transform: translate(-50%, -50%) rotate(var(--sr, 0deg)) scale(calc(.55 + .45 * var(--v, 0))); }
.stempel-gross i { width: min(104px, 26vw); height: min(104px, 26vw); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .38); }
.stempel-gross i svg { width: 50%; height: 50%; }
.stempel-gross b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; padding: 6px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.sg-ja { --v: var(--ja, 0); --sr: -8deg; }
.sg-ja i, .sg-ja b { background: var(--blau); color: #fff; }
.sg-nein { --v: var(--nein, 0); --sr: 8deg; }
.sg-nein i, .sg-nein b { background: #111112; color: #fff; }
.sg-nein i { box-shadow: 0 0 0 4px #fff, 0 14px 40px rgba(0, 0, 0, .38); }
.sg-egal { --v: var(--hoch, 0); top: 34%; }
.sg-egal i, .sg-egal b { background: #fff; color: var(--ink); }


/* Modus (public/modus.js): Uni-Inhalte nur für Studierende. <html data-modus="student|normal"> */
html[data-modus="normal"] .nur-student, html:not([data-modus="normal"]) .nur-normal { display: none !important; }
.modus-link { margin: 0; padding-top: 18px; text-align: center; }
.modus-link button { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linie); cursor: pointer; }
.modus-link button:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Anmelde-Fenster: Tabs, Passwort mit Auge */
.k-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .06); margin-bottom: 12px; }
.k-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.k-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.k-pw { position: relative; }
.k-pw input { padding-right: 52px; }
.k-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.k-auge svg { width: 22px; height: 22px; }
.k-auge[aria-pressed="true"] { color: var(--blau-tief); }