/* Nachzug fuer den Dunkelmodus: Kontraste und Sheets, die beim ersten Mal
   vergessen wurden. Hier stehen nur 3 der 32 Dunkel-Bloecke - die anderen 29
   stehen bei ihrer Komponente, und dort gehoert auch jeder neue hin. Diese
   Datei ist ein Nachzug, kein Sammelplatz. Teil 07 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. */
/* ===== V35: Dunkelmodus vollstaendig, Kontraste, Sheets ===== */

/* Bis hierher hatten rund fuenfzehn Komponenten einen Dunkel-Zweig, die
   Grundflaechen aber nicht: --bg, --surface und --text blieben hell. Auf
   einem Telefon im Dunkelmodus hiess das weisse Karten mit dunklen
   Eingabefeldern darin. Entweder ganz oder gar nicht - hier ganz. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f16;--surface:#151a26;--surface2:#131a28;--text:#e6e9f0;--muted:#98a2b8;
    --line:#252b3a;--shadow:0 8px 28px rgba(0,0,0,.45);
    --ink:#5fbfac;--on-ink:#08110f;
    --soft:#1d2331;--field:#0e1420;--field-line:#2a3243;
    --hairline:#1f2534;--faint:#98a2b8;
  }
  /* Flaechen, die ihre Farbe fest eingebaut hatten. */
.bottom-nav{background:rgba(15,20,30,.94);border-color:var(--line)}
  .desktop-rail{background:var(--surface);border-color:var(--line)}
  .rail-item.active{background:#1d2331;color:#8fd8c8}
  .sheet{background:var(--surface)}
  .close-btn,.btn.secondary,.menu-icon,.empty-icon{background:var(--soft)}
  .btn.secondary{color:#d3d9e6}
  .icon-btn,.filter-option,.chip,.city-chip,.here-chip,.interval-option,.qr-shell,.network-result,.dupe-pair,.public-card,.feature{
    background:var(--surface);border-color:var(--line);color:var(--text);
  }
  .qr-shell,.qr-big{background:#fff}          /* ein QR braucht weissen Grund *//* Die Variante schlaegt die Grundregel.
     .network-result bekam oben einen Dunkel-Zweig, .network-result.direct
     und .bridge nicht - und die sind spezifischer. Im Dunkelmodus stand
     damit heller Text (--text) auf fast weissem Grund: Kontrast 1.2:1, also
     unlesbar. Betroffen war ausgerechnet die Netzwerksuche, dazu der
     Hinweis darueber und die Rueckmeldung zu Vorstellungen.
     Wer hier eine neue Variante ergaenzt, muss sie auch hier eintragen. */
.network-result.direct{background:#12241d;border-color:#1f5a45}
  .network-result.bridge{background:#191630;border-color:#3c327a}
  .network-hint{background:#16142b;border-color:#332c66}
  .intro-feedback{background:#191630;border-color:#3c327a}
  /* #6b7280 auf #0b0f16 kam auf 3.97:1 und lag damit unter AA. */
.qr-trust{color:var(--muted)}
  /* Ein fast weisses Feld unter einem dunklen Layout. Lesbar war es, weil
     die Schrift ihre eigene feste Farbe hatte - richtig sah es nie aus. */
.btn.danger{background:#2a1416;color:#f2a6a6}
  .chip.active,.filter-option.active,.interval-option.active{
    background:var(--ink);border-color:var(--ink);color:var(--on-ink);
  }
  .field input,.field select,.field textarea,.capture-row input,.value-row.editing input,.value-row.editing select,.value-row.editing textarea{
    background:var(--field);border-color:var(--field-line);color:var(--text);
  }
  .toggle{background:#39415a}
  .person-row,.menu-row,.toggle-row,.intro-row,.hosted-row,.reminder-item,.overlap-row,.soon-item,.recap-person{border-color:var(--hairline)}
  .stat-cell,.cleanup-person,.capture-inline,.context-note,.mutual-strip{background:var(--surface2);border-color:var(--line)}
  .avatar{background:#232a3a;border-color:var(--line)}
  .avatar.placeholder{color:#c2c9d6}
  .leaflet-container{background:#0e1420}
  /* Die farbigen Hinweiskarten: gleiche Bedeutung, dunkler Grund. */
.notice{background:#10241c;border-color:#1f5a45;color:#7fd8b6}
  .notice.error{background:#2a1416;border-color:#6b2b2f;color:#f2a6a6}
  .reminder-card{background:#241c11;border-color:#4a3618}
  .recap-card{background:#111a2e;border-color:#283a5e}
  .who-else{background:#102420;border-color:#1f5040}
  .cleanup-callout{background:#241f10;border-color:#4a3d16}
  .google-import-card{background:var(--surface)}
  .google-mark,.google-small{background:#fff}
  .pill{background:var(--soft);color:var(--text)}
  .pill.primary{background:#241d38;color:#b49ce8}
  .pill.success{background:#12291f;color:#6fc7b0}
  .pill.warn{background:#2b2010;color:#e0ab55}
  .pill.dark{background:var(--soft);color:var(--text)}
  .pill.coin{background:#2b2210;color:#e0b95c;border-color:#5a4a16}
  .relation-dot{background:#3a4356}
  .banner-edit{background:rgba(20,26,38,.9);color:var(--text)}
  .offline-bar{background:#232a3a}
  .toast{background:#232a3a;color:var(--text)}
  .guide summary{color:var(--text)}
  .search-go{background:var(--ink);color:var(--on-ink)}
  .fav-btn.on{background:#241d09;border-color:#5a4a16;color:#e6b422}
  .rec-btn{background:var(--soft);border-color:var(--line);color:var(--text)}
  .voice-play{background:var(--soft);color:var(--ink)}
  /* Dunkelgrauer Text auf dunklem Grund - beim Durchgehen jede Regel
     gesucht, die eine feste Textfarbe zwischen #17 und #57 setzt. */
.stat-cell strong{color:var(--text)}
  .stat-cell span,.stats-foot{color:var(--muted)}
  .qr-headline,.public-top,.field label,.capture-label{color:#b0bcb8}
  .section-label{color:var(--faint)}
  .overlap-when{color:#6fc7b0}
  .contact-chip{background:#1e1a33;border-color:#332c55;color:#b9a9f0}
}

/* Kontrast: die blassesten Graustufen lagen zwischen 2,2:1 und 2,6:1 und
   damit deutlich unter dem, was auf einem Telefon draussen lesbar ist.
   Der Versuch stand hier schon, hat aber sein eigenes Ziel verfehlt:
   .value-edit blieb mit #98a0ae bei 2,63:1, und beide Zeilen ueberschrieben
   weiter oben dieselben Bauteile noch einmal - vier Definitionen je Bauteil.
   Jetzt eine, ueber Tokens, und der Dunkelzweig ergibt sich daraus. */
.value-src,.capture-src,.qr-foot,.value-label{color:var(--faint)}

/* Schriftgroessen unter 11px waren auf einem Telefon nicht mehr zu lesen. */
.tiny{font-size:11.5px}
.dupe-why{font-size:11px}

/* Der Offline-Balken lag als position:fixed ueber der Kopfzeile - die
   Seite darunter hatte keinen Platz fuer ihn eingeplant. Als sticky
   nimmt er sich seine Hoehe selbst und schiebt den Inhalt nach unten. */
.offline-bar{position:sticky;top:0}/* Der schwebende Knopf verdeckte die letzte Listenzeile: die Seite polstert
   unten nur die Navigationsleiste weg, der Knopf sitzt aber darueber. */

/* Sheets als echte Dialoge: der Hintergrund scrollt nicht mehr mit, und
   der Fokus bleibt drin. Beides braucht eine Klasse am body. */
body.modal-open{overflow:hidden}

/* Mehrere Menschen am selben Ort teilen sich eine Nadel mit Zahl - vorher
   lagen sie deckungsgleich uebereinander und sahen aus wie einer. */
.map-cluster span{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:12px;font-weight:800;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(16,24,40,.3);
}

/* Die Erststart-Karte: zwei Schritte, dann ist sie weg. */
.first-run{margin-bottom:12px}
.first-run .menu-row:last-child{border-bottom:0}

/* Impressum und Datenschutz: Fliesstext, kein App-Layout. Lesbar heisst
   hier schmale Spalte, ruhige Zeilenhoehe, echte Ueberschriften. */
.legal{max-width:680px;margin:0 auto;padding:22px 18px 60px;line-height:1.65}
.legal h1{font-size:29px;letter-spacing:-.03em;margin:18px 0 6px}
.legal h2{font-size:17px;margin:30px 0 6px}
.legal h3{font-size:14px;margin:18px 0 2px;color:var(--muted)}
.legal p{margin:8px 0;color:#39415a}
.legal a{text-decoration:underline}
.legal-warn{
  background:#fff6e8;border:1px solid #f5d9a8;color:#8a5200;
  border-radius:13px;padding:12px 14px;font-size:13.5px;
}
.legal-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.legal-table th,.legal-table td{
  text-align:left;vertical-align:top;padding:9px 10px;
  border-bottom:1px solid var(--line);
}
.legal-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.legal-foot{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
@media (prefers-color-scheme: dark){
  .legal p{color:#c2c9d6}
  .legal-warn{background:#2b2010;border-color:#5a4318;color:#e0ab55}
}

/* PeopleMap Plus: sichtbar, aber nicht aufdringlich. Die Sperre wirkt
   serverseitig; diese Elemente erklaeren nur, warum ein Tipp nicht sofort
   startet. */
.plus-badge{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  padding:3px 7px;border-radius:999px;background:#fff1c7;color:#815600;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;line-height:1.2;
}
.along-link .plus-badge{margin-left:auto;margin-right:3px}
.premium-locked{background:#fffaf0;border-color:#ead9ad;color:#74531a}
.premium-locked .ico{width:17px;height:17px}
.premium-locked .plus-badge{margin-left:4px}
.plus-hero{
  display:grid;grid-template-columns:34px 1fr;column-gap:10px;row-gap:5px;
  padding:16px;border:1px solid #ead9ad;border-radius:16px;background:#fffaf0;
  color:#493914;margin-bottom:14px;
}
.plus-hero .ico{grid-row:1/3;width:28px;height:28px;color:#b77900}
.plus-hero strong{font-size:16px}
.plus-hero span{font-size:13px;line-height:1.45;color:#735e31}
.plus-hero.active{background:#effbf6;border-color:#b9e8d4;color:#165c43}
.plus-price{display:flex;align-items:baseline;gap:8px;margin:16px 2px}
.plus-price strong{font-size:22px;letter-spacing:-.03em}
.plus-price span{font-size:12px;color:var(--muted)}
.plus-list{display:grid;gap:10px;padding:0;margin:0 0 18px;list-style:none}
.plus-list li{display:flex;align-items:center;gap:9px;font-size:13.5px}
.plus-list .ico{width:18px;height:18px;color:#16805d}
@media (prefers-color-scheme: dark){
  .plus-badge{background:#3a2b08;color:#f1c65d}
  .premium-locked,.plus-hero{background:#241f10;border-color:#5a4318;color:#f0d894}
  .plus-hero span{color:#c8ad6c}
  .plus-hero.active{background:#10241c;border-color:#1f5a45;color:#7fd8b6}
}