/* ═══ 00-marken.css ═══ */
@media screen{
/* ============================================================
   hell-dunkel.css — die dunkle Fassung aller Seiten von techq.ch, die
   nicht schon start2.css tragen. Angelegt 2026-09-28 (MacBook Air von
   Fabio). Auftrag Fabio: «dass auf der techq alle Unterseiten einen
   darkmode haben wie bei der startseite, domains und so».

   WIE ES GREIFT
   start2-thema.js (im Kopf jeder Seite, ohne defer) setzt vor dem ersten
   Bild data-theme am <html> — aus dem Schluessel 'techq-start-thema',
   denselben, den die Startseite, /domains, /panel und /ueberuns lesen.
   Standard ist hell. Den Schalter baut hell-dunkel.js.

   REGEL FUER DIESE DATEI
   Jede Regel beginnt mit html[data-theme="dark"] (bzw. :root[…]).
   Die helle Fassung aendert sich dadurch um kein Pixel — geprueft beim
   Bau per Bildvergleich aller Seiten. tools: zusammensetzen.py bricht ab,
   wenn ein Selektor ohne dieses Praefix hereinkommt. Einzige Ausnahme:
   .hd-… (Elemente, die erst hell-dunkel.js anlegt).

   FARBEN
   Die Werte der Startseite v15 (start2.css, :root[data-theme="dark"]):
   Grund #000, zweiter Grund #0b0b0c, Karte #161617, Flaeche #1d1d1f,
   Linie #2c2c2e, Schrift #f5f5f7 / #a1a1a6 / #86868b, Verweis #2997ff,
   Knopf #0071e3. Unten werden die Marken von site.css darauf gelegt;
   was fest im Blatt steht, folgt in den Abschnitten danach.
   ============================================================ */

/* ── Marken von site.css ───────────────────────────────────── */
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-alt:#0b0b0c;
  --surface:#161617;
  --bg-elev:#161617;
  --bg-soft:#1d1d1f;
  --bg-strong:#2c2c2e;
  --text:#f5f5f7;
  --text-body:#d1d1d6;
  --text-muted:#a1a1a6;
  --text-faint:#8e8e93;
  --text-soft:#98989d;
  --border:#2c2c2e;
  --border-strong:#3a3a3c;
  --border-faint:#1d1d1f;
  /* Blau: #2997ff wie --s15-link. Als TEXT 6.96:1 auf #000, 6.00:1 auf
     #161617. Als Flaeche mit weisser Schrift nur 3.02:1 — Regeln, die
     --accent-text als Grund unter weisser Schrift nehmen, bekommen weiter
     unten #0071e3 (4.70:1). */
  --accent:#2997ff;
  --accent-text:#2997ff;
  --accent-hover:#5ab0ff;
  --accent-soft:rgba(41,151,255,.14);
  --row-hover:#1d1d1f;
  /* Knoepfe: im Hellen fast schwarz mit weisser Schrift — dunkel umgekehrt,
     wie --s15-inv / --s15-invtext auf der Startseite. */
  --btn-bg:#f5f5f7;
  --btn-bg-hover:#ffffff;
  --btn-text:#000000;
  --header-bg:rgba(22,22,23,.72);
  --success:#30d158;
  --success-soft:rgba(48,209,88,.14);
  --danger:#ff6961;
  --danger-bg:rgba(255,105,97,.12);
  --danger-bd:rgba(255,105,97,.38);
  --info:#2997ff;
  --info-bg:rgba(41,151,255,.12);
  --info-bd:rgba(41,151,255,.38);
  --warn:#ff9f0a;
  --warn-soft:rgba(255,159,10,.12);
  --shadow-lg:0 18px 40px -20px rgba(0,0,0,.8);
  --ring:0 0 0 3px rgba(41,151,255,.35);
  /* Rand von Bedienelementen, Standard §4.5 (3:1) — wie --s15-feld-rand */
  --hd-feld-rand:rgba(255,255,255,.37);
  color-scheme:dark;
}
} /* Ende @media screen */

/* ═══ 10-gemeinsam.css ═══ */
/* ── Gruppe «gemeinsam»: was auf (fast) jeder Seite steht ─────────────
   Quellen: site.css Zeilen 1–290 (Knoepfe, Kopf-Navigation, Konto-Menue,
   Seitenkopf mit Brotkrumen, Umschalter, Fenster/Meldungen, Rechtstexte)
   und «Darstellungsfehler behoben 2026-07-21» bis Ende; fusszeile.css;
   shop-mobil.css; die Bausteine aus nav-auth.js und wartung.js.
   Mobilmenue und Produkte-Flaeche zeichnen nur mit Marken — dafuer steht
   hier keine Regel.

   WARUM OFT EINE MARKE AM ELEMENT STATT EINER FARBE
   Ein Selektor mit html[data-theme="dark"] ist spezifischer als :hover und
   .active der Quelle und ueberschriebe deren Zustaende still. Wo die
   Quelle ihren Rand aus einer Marke nimmt, wird darum die Marke am Element
   umgelegt; die Hover-Regeln der Quelle wirken weiter.

   WARUM @media screen
   Papier ist weiss, und ohne «Hintergrundgrafiken» (Standard beim Drucken)
   faellt jeder dunkle Grund weg: dunkel gedruckt kamen die AGB mit blassem
   Titel (#f5f5f7, vom Browser nur auf #a2a2a3 abgedunkelt, 2.55:1) und
   einem Logo ohne «tech» (#f4f5f6). Gedruckt wird darum immer hell: die
   Regeln dieses Teils gelten nur am Bildschirm, und der Druckblock am Ende
   legt die Marken, die andere Blaetter dunkel setzen, zurueck. */

@media screen{

/* Markierung: Weiss auf #2997ff waere 3.02:1 — wie start2.css. Bis 06.10.2026
   blieb Quin (.qn-wurzel) hell und war hier ausgenommen; seither ist es dunkel
   (quin.css) und markiert wie die Seite. */
html[data-theme="dark"] ::selection{background:rgba(41,151,255,.35);color:inherit;}

/* ── Knoepfe ── */
/* .btn-primary/.btn-dark nehmen --btn-bg (nie --accent-text). Umgekehrt
   (#f5f5f7, Schrift #000) waere das eine grelle Flaeche auf Schwarz; wie
   der Hauptknopf der Startseite (.s15-knopf) und «Anmelden» in der
   Kopfzeile stehen sie auf #0071e3 (4.70:1), nie auf #2997ff (3.02:1).
   So auch .k-knopf--stark (/kontakt) und .kap-schluss .btn-dark (hilfe).
   Die Marke wird am Knopf umgelegt: :hover und :disabled der Quelle
   greifen weiter. Hover #0077ed wie Startseite und Kopfzeile (hell wie
   dunkel) — Weiss darauf 4.32:1; offen beim Auftraggeber, siehe Bericht. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-dark{--btn-bg:#0071e3;--btn-bg-hover:#0077ed;--btn-text:#fff;}
/* Deaktiviert: Grund --border-faint (#1d1d1f) hebt sich von Schwarz kaum ab,
   der Rand --border-strong waere 1.8:1 — der Knopf verschwaende. */
html[data-theme="dark"] .btn-primary:disabled{--border-strong:var(--hd-feld-rand);}
/* Nebenknoepfe: Rand aus --border-strong waere #3a3a3c = 1.8:1 auf Schwarz.
   Rand der Bedienelemente 3:1 wie --s15-feld-rand. Die Symbolknoepfe der
   Fusszeile (E-Mail, Instagram, Discord) gleich wie .icon-btn: dort
   #3a3a3c auf #0b0b0c = 1.73:1. Ihr Hover (--text-faint) bleibt heller. */
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .tqf-soc a{--border-strong:var(--hd-feld-rand);}
/* .btn-soft stand auf --bg-alt: dunkel #0b0b0c, auf Schwarz unsichtbar.
   Grund und Hover eine Stufe hoeher (hell: --bg-alt, Hover --border-faint). */
html[data-theme="dark"] .btn-soft{--bg-alt:var(--bg-soft);--border-faint:#2c2c2e;--border:var(--hd-feld-rand);}
/* Roter Nebenknopf («Entfernen» im Warenkorb): der Rand ist fest
   rgba(194,65,12,.35), auf Schwarz 1.3:1. */
html[data-theme="dark"] .btn-danger{border-color:var(--hd-feld-rand);}
html[data-theme="dark"] .btn-danger:hover{background:var(--danger-bg);}
/* Sprunglink: Grund --text wird dunkel #f5f5f7, die Schrift ist fest Weiss
   (1.1:1). Wie die Hauptknoepfe auf #0071e3 statt einer grellen Flaeche.
   `a.` ist Absicht: pakete.html setzt am Ende seines Blocks (nach diesem
   Blatt) `.sprunglink{color:#000}` fuer einen hellen Grund — auf #0071e3
   waere das 4.47:1. */
html[data-theme="dark"] a.sprunglink{background:#0071e3;color:#fff;}

/* ── Konto-Menue und Warenkorb-Zaehler (nav-auth.js) ── */
/* kopfzeile.css setzt den Hover von «Abmelden» fest auf #C2410C —
   auf der dunklen Karte 3.1:1. */
html[data-theme="dark"] body > header .konto-item-danger:hover{background:var(--danger-bg);color:var(--danger);}
html[data-theme="dark"] .konto-item-danger:hover{background:var(--danger-bg);}
/* «Konto» (angemeldet): Rand --kz-trenner ist dunkel #3a3a3c = 1.7:1 auf der
   Leiste. kopfzeile.css setzt ihn mit !important — darum die Marke am Knopf
   umlegen; ihr Hover (--kz-ink) bleibt. */
html[data-theme="dark"] body > header #kontoBtn{--kz-trenner:var(--hd-feld-rand);}
/* Der Zaehler steht inline auf var(--danger) mit weisser Schrift; dunkel
   ist --danger #ff6961 und Weiss darauf 2.8:1. Darum !important, und der
   Wert der dunklen Startseite (die --danger nicht umlegt): 5.2:1. */
html[data-theme="dark"] #cartBadge{background:#C2410C !important;}

/* ── Seitenkopf: Brotkrumen, Ueberzeilen ── */
/* Fest #6B7480 (site.css «Kontrast»): auf Schwarz 4.44:1. */
html[data-theme="dark"] .tq-muted,
html[data-theme="dark"] .price-note,
html[data-theme="dark"] .breadcrumbs a,
html[data-theme="dark"] .section-tag{color:var(--text-faint);}
/* Die Regel oben ist spezifischer als der Hover der Quelle. */
html[data-theme="dark"] .breadcrumbs a:hover{color:var(--accent-text);}
/* Trenner fest #9AA3AD: dunkel heller als die Verweise daneben. Eine Stufe
   leiser als sie, gemessen wird er trotzdem als Text (5.8:1). */
html[data-theme="dark"] .breadcrumbs .sep,
html[data-theme="dark"] .auth-legal .sep{color:#86868b;}

/* ── Karten ── */
html[data-theme="dark"] a.svc-card:hover{box-shadow:0 18px 40px -24px rgba(0,0,0,.6);}

/* ── Umschalter (.tq-seg, .billing-toggle) ── */
/* Fest #EDEDED/#fff. Dunkel wie der Segmentschalter der Startseite
   (.s15-segment: Leiste #1d1d1f, gewaehlt --s15-segon #636366 mit
   --s15-segsh) — so auch .account-tabs (Teil konto). Mit #3a3a3c sah man die
   Wahl kaum (1.48:1 gegen die Leiste, Startseite 2.81:1). Schrift darauf
   5.7:1. */
html[data-theme="dark"] .tq-seg,
html[data-theme="dark"] .billing-toggle{background:#1d1d1f;}
html[data-theme="dark"] .tq-pill.active,
html[data-theme="dark"] .billing-toggle button.active{color:var(--text);background:#636366;box-shadow:0 1px 2px rgba(0,0,0,.3);}
/* «−12%»: Blau auf der Toenung ueber #1d1d1f 4.58:1, im gewaehlten Knopf
   (#636366) nur 2.1:1 — dort bekommt das Schild den Grund der Leiste. */
html[data-theme="dark"] .tq-pill .save,
html[data-theme="dark"] .billing-toggle .save{background:var(--accent-soft);color:var(--accent-text);}
html[data-theme="dark"] .tq-pill.active .save,
html[data-theme="dark"] .billing-toggle button.active .save{background:#1d1d1f;}

/* ── Fenster, Drehkreis, Meldungen ── */
html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.6);}
/* Der Ring ist fest schwarz mit 15 % — auf Schwarz unsichtbar. */
html[data-theme="dark"] .spinner{border-color:rgba(255,255,255,.15);border-top-color:var(--accent);}
html[data-theme="dark"] .auth-alert-danger{color:var(--danger);}
html[data-theme="dark"] .auth-alert-success{border-color:rgba(48,209,88,.38);}

/* ── Rechtstexte ── */
html[data-theme="dark"] .warn-note{border-color:rgba(255,159,10,.38);}
/* Kasten «Inhalt»: hell --bg-alt mit Rand wie die Schlusskaesten der
   anderen Seiten (.kap-schluss, .hlf-cta, .lp-schluss, .k-adresse). Die stehen
   dunkel auf dem Kartenton — mit --bg-alt (#0b0b0c) hob sich dieser als
   einziger kaum von Schwarz ab (1.07:1). */
html[data-theme="dark"] .legal-toc{--bg-alt:var(--surface);}

/* ── Eingabefelder (site.css «Darstellungsfehler behoben») ── */
/* Fest #848D99 fuer alle Felder: dunkel ein Blaugrau, das auf der
   Startseite nirgends vorkommt. Rand wie dort (3:1).
   Das Praefix hebt `select`/`textarea` von (0,0,1) auf (0,1,2) — ueber
   Klassenregeln, die hell gewinnen. Gemessen auf allen Seiten mit Feldern
   (faq, guthaben, mail, paket-finder, warenkorb): betroffen waren nur
   #payMethod (hell --border-strong, dunkel waere das 1.8:1) und das
   Quin-Feld — Quin ist ausgenommen: seine Felder regelt quin.css selbst,
   seit 06.10.2026 auch dunkel (Rand rgba(255,255,255,.37), Fokus #2997ff). */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.qn-wurzel *),
html[data-theme="dark"] select:not(.qn-wurzel *),
html[data-theme="dark"] textarea:not(.qn-wurzel *){border-color:var(--hd-feld-rand);}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not(.qn-wurzel *):focus,
html[data-theme="dark"] select:not(.qn-wurzel *):focus,
html[data-theme="dark"] textarea:not(.qn-wurzel *):focus{border-color:var(--accent);}
/* Platzhalter fest #6B7480: auf #161617 3.8:1. */
html[data-theme="dark"] input:not(.qn-wurzel *)::placeholder,
html[data-theme="dark"] textarea:not(.qn-wurzel *)::placeholder{color:var(--text-faint);}

} /* Ende @media screen */

/* ── Druck: immer hell ── */
/* Die hellen Werte aus site.css (:root) und kopfzeile.css (:root) — wer
   dort einen Wert aendert, zieht ihn hier nach. Sie muessen hier stehen,
   weil 00-marken und kopfzeile.css ihre dunklen Marken ohne Medienangabe
   setzen. --hd-feld-rand gibt es hell nicht; im Druck der helle Feldrand
   #848D99 (site.css «Darstellungsfehler behoben»). Die Logos schalten
   site.css und kopfzeile.css (dort mit !important) nach data-theme um. */
@media print{
:root[data-theme="dark"]{
  --bg:#ffffff;--bg-alt:#F5F5F5;--surface:#ffffff;
  --bg-elev:#ffffff;--bg-soft:#F4F6F9;--bg-strong:#ECEFF4;
  --text:#14181C;--text-body:#3A424B;--text-muted:#5B6570;--text-faint:#68717A;--text-soft:#627288;
  --border:#EAEAEA;--border-strong:#DFDFDF;--border-faint:#EFEFEF;
  --accent:#3f7fdf;--accent-text:#1c4f9e;--accent-hover:#2267cd;--accent-soft:#e9f0fe;--row-hover:#F9F9F9;
  --btn-bg:#14181C;--btn-bg-hover:#000000;--btn-text:#ffffff;
  --header-bg:rgba(255,255,255,0.85);
  --success:#10825A;--success-soft:#E8F6F0;
  --danger:#C2410C;--danger-bg:#FDF1EB;--danger-bd:#F3D6C6;
  --info:#1c4f9e;--info-bg:#e9f0fe;--info-bd:#cfe0f7;
  --warn:#B45309;--warn-soft:#FBF1E6;
  --shadow-lg:0 18px 40px -20px rgba(20,24,28,0.25);
  --ring:0 0 0 3px rgba(63,127,223,0.22);
  --hd-feld-rand:#848D99;
  color-scheme:light;
}
html[data-theme="dark"]{
  --kz-ink:#1d1d1f;--kz-leise:#6e6e73;--kz-linie:rgba(0,0,0,.08);
  --kz-trenner:#d2d2d7;--kz-flaeche:#e8e8ed;--kz-fokus:#0066cc;
  --kz-grund:rgba(255,255,255,.72);--kz-fly-grund:rgba(255,255,255,.96);
  --kz-menue-trenner:#d2d2d7;--kz-badge-rand:#fff;--kz-karte:#fff;
  --kz-karte-linie:#E3E3E3;--kz-karte-text:#3A424B;--kz-karte-hover:#F5F5F5;
}
html[data-theme="dark"] .logo-light{display:block;}
html[data-theme="dark"] .logo-dark{display:none;}
html[data-theme="dark"] body > header .logo-light{display:block !important;}
html[data-theme="dark"] body > header .logo-dark{display:none !important;}
}

/* ═══ 20-hilfe.css ═══ */
@media screen{
/* ── Gruppe «hilfe»: hilfe.css (162 Seiten unter /hilfe/) und
   ueberuns-kapitel.css (/ueberuns/infrastruktur, dazu /kontakt) ──────────
   Beide Blaetter zeichnen fast nur mit den Marken von site.css; die dunkle
   Fassung kommt darum schon aus 00-marken.css. Hier steht nur, was die
   Marken nicht so treffen, wie die Startseite v15 es zeigt.
   ueberuns-kapitel.js setzt nur Klassen (.zeichnet, .ist-da, .ist-offen),
   keine Farben — dafuer braucht es keine Regel. */

/* ── hilfe.css ───────────────────────────────────────────────────────── */

/* «Noch nicht beantwortet?»: hell --bg-alt auf Weiss, also eine Karte.
   Dunkel waere --bg-alt #0b0b0c auf #000 fast unsichtbar und gleich der
   Fusszeile gleich darunter; Karten stehen auf der Startseite auf #161617.
   Schrift darauf: #a1a1a6 7.0:1, Verweise #2997ff 6.0:1. */
html[data-theme="dark"] .hlf-cta{background:var(--surface);}

/* ── ueberuns-kapitel.css ────────────────────────────────────────────── */

/* Beleg, «Was wir nicht tun» und Schlusskasten: dieselbe Ueberlegung wie
   bei .hlf-cta. Die Zeilen der Negativliste muessen mit, sonst stuenden
   sie als schwarze Loecher in der Karte (die 1-px-Fugen dazwischen sind
   der Grund der Liste, --border). */
html[data-theme="dark"] .kap-beleg,
html[data-theme="dark"] .kap-nicht,
html[data-theme="dark"] .kap-nicht__liste li,
html[data-theme="dark"] .kap-schluss{background:var(--surface);}

/* Hauptknopf im Schlusskasten («Zur Statusseite», auf /kontakt «Haeufige
   Fragen»): .btn-dark aus site.css kehrt sich dunkel auf #f5f5f7 um — eine
   grelle Flaeche mitten in der Karte. Wie «Pakete ansehen» auf der
   Startseite und .k-knopf--stark auf /kontakt steht er auf #0071e3
   (4.70:1 mit weisser Schrift), nie auf #2997ff (3.02:1). Nur im Kasten:
   .btn-dark traegt auf anderen Seiten eine eigene Gestalt. */
html[data-theme="dark"] .kap-schluss .btn-dark{background:#0071e3;color:#fff;}
html[data-theme="dark"] .kap-schluss .btn-dark:hover{background:#0077ed;color:#fff;}

/* Nebenknopf daneben: hell weiss (--bg) auf der Karte #F5F5F5, also
   erhoben. Dunkel wird --bg zu #000 und stuende als schwarzes Loch in der
   Karte #161617 — darum durchsichtig, wie .k-knopf («Adresse kopieren»)
   auf /kontakt. Rand --border-strong waere #3a3a3c (1.6:1) — Rand der
   Nebenknoepfe, 3.46:1 auf der Karte. Der Hover muss neu stehen: diese
   Regel ist spezifischer als `.kap-schluss .btn-hell:hover` und
   ueberstimmte ihn. Gleiches gilt oben fuer `.btn-dark:hover`. */
html[data-theme="dark"] .kap-schluss .btn-hell{background:transparent;border-color:var(--hd-feld-rand);}
html[data-theme="dark"] .kap-schluss .btn-hell:hover{border-color:var(--text-faint);color:var(--accent-text);}

/* Strichzeichnungen: die zarten Linien sind hell --marke-blau-3 (#8bb2ea),
   blasser als der Hauptstrich. Dunkel waere #8bb2ea HELLER als der
   Hauptstrich #2997ff und kehrte die Rangfolge um. Das Knopfblau #0071e3
   tritt zurueck und haelt 4.47:1 auf #000 (Grafik braucht 3:1). */
html[data-theme="dark"] .kap-svg .li--zart{stroke:#0071e3;}
} /* Ende @media screen */

/* ═══ 30-seiten.css ═══ */
@media screen{
/* ── Gruppe «seiten»: Landeseiten, /kontakt, /faq und die Formular-Bausteine
   aus site.css (FORMS, Zeilen 291–332) ─────────────────────────────────────
   landeseite.css (die sieben erzeugten Landeseiten) zeichnet mit Marken —
   hier steht nur der Schlusskasten (unten bei den Kaesten). Nachgemessen
   dunkel bei 1440 und 390, mit offenen Fragen (details); Pseudo-Elemente
   (Schrittnummer 4.97:1, «+» der Fragen 6.44:1) von Hand gerechnet, die
   Messung sieht sie nicht. */

/* ── Kaesten «--bg-alt mit Rand» ─────────────────────────────────────── */

/* «Ihre Frage steht nicht hier?» (/faq) und der
   Schlusskasten der Landeseiten sind in der Quelle gleich gebaut wie
   .hlf-cta (/hilfe) und .kap-schluss (/kontakt): --bg-alt mit Rand, hell
   alle #f5f5f5. Die beiden stehen dunkel auf #161617 (Teil hilfe); mit
   #0b0b0c haette derselbe Kasten dunkel zwei Farben, die hell eine ist —
   .hfr-help und .hlf-cta sind sogar derselbe Baustein, und /faq verweist
   110-mal nach /hilfe. Auf /faq stand der Kasten zudem dunkler als die
   Fragenliste (#161617) direkt darueber. Schrift darauf: Titel 16.6:1,
   --text-muted 7.0:1; Rand der Nebenknoepfe 3.45:1. */
html[data-theme="dark"] .hfr-help,
html[data-theme="dark"] .lp-schluss{background:var(--surface);}

/* ── faq-shop.css ────────────────────────────────────────────────────── */

/* Trenner zwischen den Fragen: --border-faint ist dunkel #1d1d1f auf der
   Karte #161617 (1.08:1) — die 110 Zeilen liefen zu einem Block zusammen.
   Die Fragen der Startseite trennt --s15-line (#2c2c2e); dieselbe Linie. */
html[data-theme="dark"] .hfr-eintrag{border-top-color:var(--border);}

/* ── site.css, FORMS (Zeilen 291–332) ────────────────────────────────── */

/* Rand und Platzhalter der Felder brauchen hier keine Regel: die Feldregeln
   am Ende von site.css (#848D99, ::placeholder #6B7480) sind spezifischer
   als dieser Abschnitt bzw. gleich stark und spaeter, und ihre dunkle
   Fassung steht in 10-gemeinsam (Rand 3:1, Platzhalter --text-faint).
   Nachgemessen an einem Musterformular aus allen Bausteinen. */

/* Pfeil der Auswahlfelder: als SVG-Bild fest in #5B6570 gezeichnet
   (3.05:1 auf #161617, knapp am Rand). Dunkel in #a1a1a6 wie die leise
   Schrift der Startseite (7.03:1). Nur das Bild — Lage und Wiederholung
   bleiben aus site.css. */
html[data-theme="dark"] .form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");}

/* Erfolgsmeldung: Rand fest #C5E9DA (hellgruen) — dunkel ein heller Strich
   um die gruene Hinterlegung. Gruen mit derselben Deckkraft wie
   --danger-bd/--info-bd der Marken. */
html[data-theme="dark"] .form-success{border-color:rgba(48,209,88,.38);}
} /* Ende @media screen */

/* ═══ 40-entdecken.css ═══ */
@media screen{
/* ── /entdecken (entdecken.css, entdecken.js) ─────────────────
   entdecken.css hatte keinen Dunkel-Zweig: die Seite setzte hell fest.
   Fast alles laeuft ueber die zehn --w-Marken an .wsp — die werden hier
   auf die Werte der Startseite v15 gelegt. Was im Blatt fest steht
   (#fff-Schrift auf den dunklen Knoepfen, #000 als Hover, die Leiste,
   die Schatten), folgt danach einzeln. entdecken.js setzt nur Lagen und
   Zahlen (Custom Properties, left/width der Klammer), keine Farben. */
html[data-theme="dark"] .wsp{
  --w-papier:#000000;
  --w-nebel:#0b0b0c;
  --w-tinte:#f5f5f7;
  /* graphit ist der Fliesstext, leise das Kleingedruckte — wie
     --s15-text2 / --s15-text3. leise haelt 4.63:1 noch auf #1d1d1f. */
  --w-graphit:#a1a1a6;
  --w-leise:#86868b;
  --w-linie:#2c2c2e;
  --w-linie-f:#1d1d1f;
  /* Hell gibt es zwei Blau (Flaeche/Strich gegen Text). Dunkel traegt
     #2997ff beides; wo es Grund unter weisser Schrift ist (das Band),
     steht unten #0071e3. */
  --w-blau:#2997ff;
  --w-blau-t:#2997ff;
  --w-blau-h:rgba(41,151,255,.14);
}

/* Karten liegen hell weiss auf Nebel — dunkel #161617 auf #0b0b0c.
   Ueber die Marke, damit die Trennlinien darin mitgehen. */
html[data-theme="dark"] .wsp-karte,
html[data-theme="dark"] .wsp-tipp{
  --w-papier:#161617;
  --w-linie-f:#2c2c2e;
}
html[data-theme="dark"] .wsp-karte{box-shadow:0 26px 60px -42px rgba(0,0,0,.6);}
html[data-theme="dark"] .wsp-tipp:hover{box-shadow:0 28px 56px -40px rgba(0,0,0,.6);}

/* Bedienelemente mit Haarlinie (Massstab-Pillen, Wahlschalter, Neben-
   knoepfe): Rand 3:1 wie --s15-feld-rand. Als Marke am Element gesetzt,
   nicht als border-color — so behalten :hover (graphit) und die Wahl
   (blau) aus entdecken.css ihren Vorrang. Ihr Hover-Grund (hell Nebel)
   wird die Hover-Flaeche #1d1d1f; #0b0b0c laege dunkler als die Karte. */
html[data-theme="dark"] .wsp-mass__stopp,
html[data-theme="dark"] .wsp-seq__schalter button,
html[data-theme="dark"] .wsp-knopf--leise,
html[data-theme="dark"] .wsp-tab__knopf{
  --w-linie:var(--hd-feld-rand);
  --w-nebel:#1d1d1f;
}
html[data-theme="dark"] .wsp-tab thead th{--w-nebel:#1d1d1f;}

/* Die Leiste: hell Papier mit Alpha, dunkel wie die Kopfzeile der
   Startseite (--kz-grund). Unterwegs dichter, wie hell .78 -> .86. */
html[data-theme="dark"] .wsp-leiste{background:rgba(22,22,23,.72);}
html[data-theme="dark"] .wsp-leiste.ist-unterwegs{background:rgba(22,22,23,.86);}
/* Pillen in der Leiste: hell Papier auf fast weisser Leiste, nur die
   Haarlinie zeichnet. Mit Papier #000 stuenden sie als schwarze Loecher in
   der Leiste (~#131314) — darum ihr Grundton #161617, wie hell #fff unter
   .86-Weiss. Unter 700 px haengen die Pillen (44 px aus shop-mobil.css)
   unter der Leiste ueber dem Inhalt; die Wahl-Hinterlegung ist dunkel
   durchscheinend, der Titel schiene durch die gewaehlte Pille. Darum
   deckend: #192837 = rgba(41,151,255,.14) auf #161617 (hell auch deckend,
   #EDF3FD). */
html[data-theme="dark"] .wsp-mass--leiste .wsp-mass__stopp{
  --w-papier:#161617;
  --w-blau-h:#192837;
}

/* Die dunklen Knoepfe (hell --w-tinte mit fester #fff-Schrift): «Bestellen»
   in der Leiste, auf der Karte und im Schluss, «S» in der Tabelle und die
   Blase «Groesse antippen», die dasselbe Idiom traegt («hier passiert
   etwas»). Umgekehrt auf #f5f5f7 (so die Tabelle im Auftrag) stuenden
   fuenf grelle Flaechen auf der Seite, und die Messung meldet jede als
   «flaeche». Wie .btn-primary/.btn-dark in 10-gemeinsam.css darum #0071e3,
   weiss darauf 4.70:1 — so sehen die Knoepfe hier aus wie auf den uebrigen
   Unterseiten. (Die Startseite selbst dreht ihren einzigen fast schwarzen
   Knopf um; der Entscheid fuer den ganzen Auftritt liegt bei Fabio.) Die
   Marke am Element, damit
   Rand und Pfeil der Blase (::after) mitgehen; der leise Knopf teilt die
   Klasse .wsp-knopf und nimmt --w-tinte als Schrift, darum :not(). Der
   Hover der Quelle ist fest #000. */
html[data-theme="dark"] .wsp-leiste__cta,
html[data-theme="dark"] .wsp-knopf:not(.wsp-knopf--leise),
html[data-theme="dark"] .wsp-tab__knopf--empfohlen,
html[data-theme="dark"] .wsp-mass__wink-blase{--w-tinte:#0071e3;}
/* Die Schrift im Hover ausdruecklich #fff: `a:hover` aus site.css (0,1,1)
   schlaegt die Knopfklasse (0,1,0) und faerbt sie --accent-hover — dunkel
   #5ab0ff auf #0077ed, 1.96:1. (Hell steht dort #2267cd auf Schwarz.) */
html[data-theme="dark"] .wsp-leiste__cta:hover,
html[data-theme="dark"] .wsp-knopf:not(.wsp-knopf--leise):hover{background:#0077ed;color:#fff;}
html[data-theme="dark"] .wsp-tab__knopf--empfohlen:hover{background:#0077ed;border-color:#0077ed;color:#fff;}

/* Das Band «Unsere Empfehlung»: weisse 10-px-Schrift auf #2997ff haette
   3.02:1 — der Knopf-Blau haelt 4.70:1. */
html[data-theme="dark"] .wsp-karte__band{background:#0071e3;}
} /* Ende @media screen */

/* ═══ 50-shop.css ═══ */
@media screen{
/* ── Gruppe shop: /paket-finder, /mail, /vergleich ──────────────────────
   Quellen: site.css WIZARD + COMPARE TABLE, PAKET-FINDER v3, Direkteinstieg,
   Konfigurator-Zeile (.wzd-*), DAS ERGEBNIS, Offene Abschnitte (.mail-*);
   vergleich2.css. Das meiste traegt schon 00-marken.css.

   WARUM OFT EINE MARKE STATT EINER FARBE
   Wo ein Bedienelement seinen Rand aus --border-strong nimmt, wird hier die
   Marke AM ELEMENT umgelegt, nicht border-color gesetzt. Ein Selektor mit
   html[data-theme="dark"] waere spezifischer als :hover, .selected,
   .active und [aria-pressed] der Quelle und wuerde deren Rahmen still
   ueberschreiben; die umgelegte Marke laesst diese Zustaende wirken.

   BLAU ALS GRUND UNTER WEISSER SCHRIFT
   Die Quelle nimmt --accent-text als Flaeche (Empfohlen-Pille, Kaufknopf,
   gewaehltes Symbol). Dunkel ist das #2997ff — mit Weiss nur 3.02:1. Diese
   Flaechen bekommen #0071e3 (4.70:1), Hover #0077ed. */

/* ── Paket-Finder: Fragen ─────────────────────────────────────────────── */
/* Antwortkarte, Antwort-Chips im Ergebnis, Laufzeitknoepfe: Rand eines
   Bedienelements, 3:1 wie --s15-feld-rand. #3a3a3c waere 1.59:1. */
html[data-theme="dark"] .wizard-option,
html[data-theme="dark"] .wz-chip,
html[data-theme="dark"] .wz-term{--border-strong:var(--hd-feld-rand);}
html[data-theme="dark"] .wizard-option.selected .wz-opt-icon{background:#0071e3;color:#fff;}

/* ── Paket-Finder: Ergebnis ───────────────────────────────────────────── */
/* Der navyblaue Schatten der Quelle leuchtet auf Schwarz als Schein. */
html[data-theme="dark"] .wz-plan-card{box-shadow:0 20px 48px -30px rgba(0,0,0,.6);}
html[data-theme="dark"] .wz-plan-badge{background:#0071e3;}

/* ── Vergleichstabelle ─────────────────────────────────────────────────── */
/* Hervorgehobene Spalte: dasselbe Blau wie der Verweis, gleich zart. */
html[data-theme="dark"] .compare .featured-col{background:rgba(41,151,255,.06);}

/* ── Konfigurator-Zeile (/mail): Zahlenfeld mit Pfeilen ──────────────── */
/* Rahmen und die zwei Trennlinien der Pfeile aus derselben Marke, damit das
   Feld als EIN Bedienteil liest. Hover der Pfeile nimmt --bg-alt: dunkel
   #0b0b0c, also DUNKLER als das Feld — hier auf die Hover-Flaeche gelegt. */
html[data-theme="dark"] .wzd-stepper{
  --border-strong:var(--hd-feld-rand);
  --border:var(--hd-feld-rand);
  --bg-alt:var(--row-hover);
}

/* Schieber: der Griff steht hell wie auf iOS. In der Quelle ist er weiss auf
   weisser Karte und traegt sich durch Rand und Schatten; dunkel waere er
   #161617 auf #161617 und nur noch als duenner Ring zu sehen. Die Marke wird
   am Eingabefeld umgelegt, weil die Pseudo-Elemente sie erben (wie --fuell). */
html[data-theme="dark"] .wzd-schieber{--bg-elev:#f5f5f7;}
html[data-theme="dark"] .wzd-schieber::-webkit-slider-thumb{box-shadow:0 1px 3px rgba(0,0,0,.6);}
html[data-theme="dark"] .wzd-schieber::-moz-range-thumb{box-shadow:0 1px 3px rgba(0,0,0,.6);}

/* Laufzeit-Chips: Rand 3:1; gewaehlt setzt die Quelle --accent-text selbst. */
html[data-theme="dark"] .wzd-chip{--border-strong:var(--hd-feld-rand);}

/* Kaufknopf: blaue Flaeche mit weisser Schrift (siehe oben). Als Marke am
   Knopf, damit :hover und [disabled] der Quelle weiter greifen. */
html[data-theme="dark"] .wzd-kaufen{--accent-text:#0071e3;--accent-hover:#0077ed;}
/* Gesperrt ist der Knopf heute IMMER («Bald verfügbar»). Mit .72 der Quelle
   hielte die Schrift dunkel nur 3.80:1, hell 4.0:1; .8 bringt dunkel auf 4.09
   und laesst ihn sichtbar gedaempft. */
html[data-theme="dark"] .wzd-kaufen[disabled]{opacity:.8;}

/* Brotkrume auf /mail steht als style-Attribut im Markup (color:var(--border-
   strong)). Die Marke am Element umgelegt, statt mit !important zu ueberstimmen;
   #86868b bleibt leiser als «Start» (#8e8e93). Auf /mail begrenzt ueber den
   Rechner #konfig — /pakete traegt dieselbe Zeile und gehoert nicht hierher. */
html[data-theme="dark"] section:has(> #konfig) span[style*="color:var(--border-strong)"]{--border-strong:#86868b;}

/* ── /vergleich: die zwei Karten (vergleich2.css) ─────────────────────── */
/* Der Rand steht in der Quelle als fester Wert (#8e8e8e) im Schatten, nicht
   als Marke. Darum hier ausgeschrieben — und Hover und Wahl gleich mit, in
   derselben Reihenfolge wie die Quelle, sonst schluege diese Regel beide. */
html[data-theme="dark"] .vg-karte{box-shadow:inset 0 0 0 1px var(--hd-feld-rand);}
html[data-theme="dark"] .vg-karte:hover{box-shadow:inset 0 0 0 1px var(--text);}
/* Gewaehlt: die Toenung der Quelle liegt hell ueber Weiss. Dunkel ersetzte
   eine durchscheinende Farbe den Kartengrund, darunter laege Schwarz — die
   gewaehlte Karte wirkte eingesunken (#02090f gegen #161617). Darum ueber
   --surface gemischt, gleich stark wie --accent-soft: #192837 wie
   .wizard-option.selected. Als Volltonfarbe, damit der Uebergang der Quelle
   (background-color .2s) weiter laeuft. */
/* #192837 = 14 % #2997ff ueber #161617, als fester Wert: color-mix() fehlt in
   Safari bis 16.1 und Firefox bis 112 — dort sank die gewaehlte Karte sonst
   unter die anderen. */
html[data-theme="dark"] .vg-karte[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--accent);background:#192837;}
html[data-theme="dark"] .vg-karte__zeichen{background:rgba(41,151,255,.14);}
/* «bald verfügbar»: Orange der Startseite statt Rostbraun auf Schwarz (2.03:1). */
html[data-theme="dark"] .vg-bald{color:#ff9f0a;background:rgba(255,159,10,.12);}

/* Flaechen IN einer Karte (hell --bg-alt in Weiss): dunkel eine Stufe ueber
   der Karte (#1d1d1f), nie darunter — wie auf der Startseite, /panel und in
   den Teilen pakete/konto (.qpk-kopf, .founder-photo). Mit --bg-alt (#0b0b0c)
   wurden Kopf des Paket-Finders, Symbolkacheln, Alternativen und die
   Gruppenzeilen der Vergleichstabellen zu Loechern. Marke am Element: die
   gewaehlte Kachel (.selected, #0071e3) bleibt, wie sie ist. */
html[data-theme="dark"] .wizard-head,
html[data-theme="dark"] .wz-opt-icon,
html[data-theme="dark"] .wz-alt,
html[data-theme="dark"] .compare tr.group td{--bg-alt:var(--bg-soft);}
/* Empfohlenes Paket: Rand im Blau des Schilds (wie auf /pakete), nicht zwei
   Blautoene uebereinander. #0071e3 auf #161617 3.85:1. */
html[data-theme="dark"] .wz-plan-card{border-color:#0071e3;}
} /* Ende @media screen */

/* ═══ 60-pakete.css ═══ */
@media screen{
/* ── Gruppe «pakete»: /pakete, /quin-plus, /reseller und der
   Warenkorb-Hinweis (cart-toast.js, auch auf /mail und /paket-finder) ──
   Was nur im <style>-Block von quin-plus.html und reseller.html steht, hat
   seine dunklen Regeln am Ende dieses Blocks; ebenso die Knopf-Marken von
   pakete.html (die Seite laedt kein site.css und hat eigene Marken). Hier
   steht, was Skripte oder das Markup inline setzen. */

/* ── /pakete: Laufzeit- und Art-Umschalter ──
   Grund, gewaehlter Knopf und «−12%» kommen aus der Regel fuer .tq-seg im
   Teil «gemeinsam» (gleiche Werte fuer alle Umschalter). Hier nur der
   Fokusring: pakete.html laedt kein site.css und bringt seinen eigenen mit,
   dunkelblau (rgba(11,58,110,.35)) — auf Schwarz unsichtbar. */
html[data-theme="dark"] #billingToggle .tq-pill:focus-visible,
html[data-theme="dark"] #typeToggle .tq-pill:focus-visible{box-shadow:var(--ring);}

/* ── /pakete: Paketkarten (pakete.js baut sie mit Inline-Stilen) ──
   Deshalb Attributselektoren und !important: ein Inline-Stil schlaegt jede
   Regel ohne. */
/* «Unsere Empfehlung» / «Nur auf Anfrage»: --accent ist dunkel #2997ff, mit
   weisser Schrift nur 3.02:1. #0071e3 hat 4.70:1. */
html[data-theme="dark"] #plansGrid span[style*="background:var(--accent)"]{background:#0071e3 !important;}
/* Der Rand derselben Karte bleibt sonst #2997ff, und das Schild sitzt genau
   auf der Linie: zwei Blautoene nebeneinander. Hell sind beide --accent. Als
   Kartenrand hat #0071e3 auf #161617 noch 3.85:1. */
html[data-theme="dark"] #plansGrid [style*="solid var(--accent)"]{border-color:#0071e3 !important;}
/* Der blaue Schatten unter der empfohlenen Karte und der Managed-Karte
   (rgba(11,58,110,.55)) wird auf Schwarz zu einem Leuchten. Gesucht ohne
   Komma, weil zusammensetzen.py Selektorlisten am Komma trennt. Nicht
   waehrend des Aufleuchtens (unten): ein !important schlaegt auch die
   Animation, der Ring bliebe auf der empfohlenen Karte aus. */
html[data-theme="dark"] #plansGrid [style*="box-shadow:0 20px 48px"]:not(.tq-rec-highlight){box-shadow:none !important;}
/* Umriss-Knoepfe der uebrigen Karten: --border-strong (#3a3a3c) hat auf der
   Karte nur 1.59:1, verlangt sind 3:1 fuer die Grenze eines Bedienelements. */
html[data-theme="dark"] #plansGrid button[style*="border:1px solid var(--border-strong)"]{border-color:var(--hd-feld-rand) !important;}
/* «Nicht buchbar» (Laufzeit 1 Monat): derselbe Rand, sonst bleibt vom
   abgeschalteten Knopf nur die Schrift. Die leise Schrift sagt «aus». */
html[data-theme="dark"] #plansGrid button[disabled][style*="border:1px solid var(--border)"]{border-color:var(--hd-feld-rand) !important;}

/* ── /pakete: Breadcrumb ──
   Der Trenner «/» steht inline auf --border-strong: hell #DFDFDF, dunkel
   #3a3a3c auf Schwarz 1.85:1. Nur auf /pakete (:has(#plansGrid)): /mail
   traegt dieselbe Zeile unter demselben #inhalt und gehoert «shop». */
html[data-theme="dark"] #inhalt:has(#plansGrid) span[style*="color:var(--border-strong)"]{color:#86868b !important;}

/* ── /pakete: Buchungs-Fenster (#bookModal) ──
   Schleier (.modal-backdrop) und «Abbrechen» (.btn-soft) faerbt der Teil
   «gemeinsam»; die Karte zeichnet nur mit Marken. */

/* ── /pakete?rec=… : Empfehlungs-Fenster (pakete.js, inline) ──
   Die Karte steht hell auf --bg (weiss). Dunkel waere das Schwarz auf dem
   abgedunkelten Schwarz — erhoben wie jede Karte: #161617. */
html[data-theme="dark"] #recModal > div{background:#161617 !important;}
html[data-theme="dark"] #recModal span[style*="background:var(--accent)"]{background:#0071e3 !important;}
/* Kasten «Empfohlen»: Rand wie das Schild darauf, aus demselben Grund wie
   bei den Paketkarten oben. */
html[data-theme="dark"] #recModal [style*="solid var(--accent)"]{border-color:#0071e3 !important;}
html[data-theme="dark"] #recModal button[data-tq="empfehlung-zu"][style*="border:1px solid var(--border)"]{border-color:var(--hd-feld-rand) !important;}
/* Das Aufleuchten der empfohlenen Karte nach dem Schliessen: der Ring bleibt,
   der blaue Hof (0 0 28px) faellt weg — dunkel kein Leuchten. Der Ring hat
   die Farbe des Kartenrands (hell beide --accent). Die helle Regel kommt aus
   pakete.js und traegt !important; hier gewinnt die hoehere Spezifitaet. */
@keyframes hdPaketRing{
  0%,20%,40%,70%{box-shadow:0 0 0 4px #0071e3;}
  10%,30%{box-shadow:0 0 0 0 rgba(0,113,227,0);}
  100%{box-shadow:0 0 0 0 rgba(0,113,227,0);}
}
html[data-theme="dark"] #plansGrid .tq-rec-highlight{animation:hdPaketRing 3.2s ease-out forwards !important;}
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"] #plansGrid .tq-rec-highlight{animation:none !important;box-shadow:0 0 0 4px #0071e3 !important;}
}

/* ── Warenkorb-Hinweis unten rechts (#cartToast) ──
   Traegt nur Marken und ist damit schon dunkel. Einzig die Absage: das Skript
   setzt var(--danger-soft, rgba(200,60,60,.12)) inline — die Marke gibt es
   nirgends, also gilt der helle Rueckfall. */
html[data-theme="dark"] #cartToastIcon[style*="danger-soft"]{background:rgba(255,105,97,.12) !important;}
} /* Ende @media screen */

/* ═══ 70-konto.css ═══ */
@media screen{
/* ── Konto, Status, Über uns (Gruppe «konto») ──────────────────
   Quellen: site.css ACCOUNT PAGES / STATUS PAGE / ÜBER UNS, dazu die
   Inline-Stile, die guthaben.html im Markup und warenkorb-domain.js per
   Skript setzen. Klassen, die nur im <style>-Block von warenkorb.html,
   status.html und ueberuns/partner.html stehen, bekommen ihre dunklen
   Regeln am Ende des jeweiligen Blocks. */

/* Reiterleiste der Kontoseiten: Grund und aktiver Reiter sind im Blatt
   fest hell (#EDEDED / #fff), nicht ueber Marken. Dunkel wie der
   Segmentschalter der Startseite: Flaeche #1d1d1f, gewaehlt #636366 (wie
   .tq-pill.active, Teil gemeinsam). */
html[data-theme="dark"] .account-tabs{background:var(--bg-soft);}
html[data-theme="dark"] .account-tabs a.active{background:#636366;box-shadow:0 1px 2px rgba(0,0,0,.3);}
/* Schlusskasten der Ueber-uns-Seiten («Direkter Draht zu den Gruendern»):
   hell --bg-alt mit Rand wie die Schlusskaesten der anderen Seiten, die
   dunkel auf dem Kartenton stehen — nicht fast schwarz auf Schwarz. */
html[data-theme="dark"] .about-foot-cta{--bg-alt:var(--surface);}

/* Status: der Ring um den gruenen Punkt ist im Blatt ein festes Dunkelgruen
   mit eigener Keyframe-Animation — dunkel das Gruen der Startseite. */
html[data-theme="dark"] .status-summary.ok .status-dot{box-shadow:0 0 0 5px rgba(48,209,88,.14);animation-name:hd-status-puls;}
@keyframes hd-status-puls{0%,100%{box-shadow:0 0 0 4px rgba(48,209,88,.10);}50%{box-shadow:0 0 0 7px rgba(48,209,88,.18);}}

/* Über-uns-Karten: der Hover-Schatten ist ein festes Blaugrau, das auf
   Schwarz nur als schmutziger Rand erscheint. Wie auf der Startseite: kein
   Leuchten, die Karte hebt sich ueber die Randfarbe. */
html[data-theme="dark"] .about-card:hover{box-shadow:0 18px 40px -24px rgba(0,0,0,.6);}

/* Team: die Portraetflaeche liegt oben in der Karte und traegt --bg-alt —
   dunkel #0b0b0c, ein Loch unter der Karte (#161617). Wie die uebrigen
   Flaechen in Karten eine Stufe darueber; das Punktraster bleibt sichtbar. */
html[data-theme="dark"] .founder-photo{background-color:var(--bg-soft);}

/* ── Guthaben (Inline-Stile im Markup von guthaben.html) ────────
   Der Hinweis «nicht auszahlbar» traegt seinen Rand als festes Braun im
   style-Attribut; dunkel der Orange-Ton der Tabelle wie --danger-bd. */
html[data-theme="dark"] #guthabenForm div[style*="--warn-soft"]{border-color:rgba(255,159,10,.38)!important;}

/* ── Domain-Kasse (Inline-Stile aus warenkorb-domain.js) ───────
   Auth-Code-Feld und Paketwahl setzen ihren Rand im style-Attribut auf
   --border-strong (1.6:1 auf der Karte). Bedienelemente brauchen 3:1 —
   darum !important gegen das Skript, Wert wie --s15-feld-rand. */
html[data-theme="dark"] #domAuth,
html[data-theme="dark"] #inklWahl{border-color:var(--hd-feld-rand)!important;}

/* Lade-Kreisel im Aufladeknopf: inline mit weisser Spitze. Er erscheint nur
   am gesperrten Knopf (dunkel #1d1d1f); dort wie alle Kreisel der Seite
   (.spinner) mit blauer Spitze statt einer grellweissen Linie. */
html[data-theme="dark"] #guthabenSpinner{border-color:rgba(255,255,255,.15)!important;border-top-color:var(--accent)!important;}

/* ── techQ-Dialog (tq-dialog.js haengt sein Blatt selbst ein) ─────
   Der feste Knopf liest --btn-bg schon an .tqd-fenster (dunkel #f5f5f7),
   die Schrift steht im Blatt fest auf #fff — 1.1:1. Dunkel wie .btn-primary
   (Teil «gemeinsam»): #0071e3 mit Weiss, 4.70:1. Die Marke gilt auch fuer
   den Fokusring. */
html[data-theme="dark"] .tqd-fenster{--tqd-fest:#0071e3;}
/* «Loeschen»-Knopf: tq-dialog.js fuellt ihn dunkel mit --danger (#ff6961)
   und dunkler Tinte — eine grelle rote Flaeche auf Schwarz. Dunkel wie der
   rote Nebenknopf der Seite: zarte Hinterlegung, rote Schrift, roter Rand. */
html[data-theme="dark"] .tqd-gefahr{background:var(--danger-bg);color:var(--danger);border-color:var(--danger);}
/* «Abbrechen» und das Eingabefeld grenzen sich nur ueber den Rand ab
   (--border, 1.3:1). Bedienelemente brauchen 3:1. */
html[data-theme="dark"] .tqd-still,
html[data-theme="dark"] .tqd-feld input,
html[data-theme="dark"] .tqd-feld textarea{border-color:var(--hd-feld-rand);}
/* Das Feld nimmt im Blatt --bg: hell gleich wie das Fenster (#fff), dunkel
   ein schwarzes Loch im Fenster (#161617). Wie die uebrigen Felder der
   Seiten auf dem Kartenton. */
html[data-theme="dark"] .tqd-feld input,
html[data-theme="dark"] .tqd-feld textarea{background:var(--surface);}

/* Erfolgsfenster im Warenkorb: der Kasten «Die ersten drei Schritte» traegt
   --bg-alt im style-Attribut — dunkel ein Loch im Fenster (#161617). Wie
   die Flaechen in den Karten eine Stufe darueber. */
html[data-theme="dark"] #orderSuccessSteps{background:var(--bg-soft)!important;}
/* Der Ring hinter dem Symbol kommt als style-Attribut mit festem Rotbraun
   bzw. Gruen zu 10 % — auf #161617 nur ein Schatten. Dunkel die zarten
   Hinterlegungen der Tabelle. */
html[data-theme="dark"] .tqd-ring[style*="rgba(194"]{background:var(--danger-bg)!important;}
html[data-theme="dark"] .tqd-ring[style*="rgba(21"]{background:var(--success-soft)!important;}
} /* Ende @media screen */

/* ═══ 90-webmail.css ═══ */
@media screen{
/* ── /webmail — startseite.css, gestaltung.css, tqz-animation.css ──────────
   Die drei Blaetter laedt nur webmail.html. Ihre Marken stehen an `:root`
   (0,1,0) und verlieren im Dunkeln gegen die Marken oben; was sie FEST in
   Weiss oder im Akzent als Grund zeichnen, folgt hier.
   Jede Regel haengt an `.fw-wrap`/`.fw-abschnitt` (nur auf /webmail): Namen
   wie `.btn-dark` tragen auch 500, 404, quin-plus … mit eigener Gestalt aus
   site.css — ohne die Klammer faerbte diese Datei deren Knoepfe mit.
   tqz-animation.css zeichnet auf /webmail nichts (kein tqz-Baustein, kein
   tqz-animation.js) — darum steht dafuer keine Regel hier. */

/* Blauer Pillenknopf: gestaltung.css nimmt --accent als Grund unter
   weisser Schrift. Dunkel ist --accent #2997ff (3.02:1) — wie auf der
   Startseite v15 (--s15-cta) steht der Knopf auf #0071e3 (4.70:1). */
html[data-theme="dark"] .fw-wrap .btn-dark{background:#0071e3;border-color:#0071e3;color:#fff;}
html[data-theme="dark"] .fw-wrap .btn-dark:hover{background:#0077ed;border-color:#0077ed;color:#fff;}

/* Schwarzes Vollbreitband: auf dem schwarzen Seitengrund loeste es sich
   auf und lief ohne Kante in «Anmelden» hinein. Als erhobene Flaeche
   (#161617) bleibt es ein Band; seine Schrift (Weiss mit Deckkraft) steht
   darauf unveraendert — 10:1 fuer den Satz, 7:1 fuer die Ueberzeile. */
html[data-theme="dark"] .fw-abschnitt.fw-schwarz-band{background:var(--surface);}

/* Die zwei Anmeldetafeln stehen hell fest auf #fff. */
html[data-theme="dark"] .fw-wrap .wm-tafel{background:var(--surface);}

/* «Weitere Fragen»: startseite.css gibt der Pille #fff als Grund. Dunkel
   durchsichtig mit dem Rand der Nebenknoepfe (3:1). Der Hover muss neu
   stehen, weil die Grundregel hier spezifischer ist als der von
   gestaltung.css (0,3,0) und seinen Rand sonst ueberstimmte. */
html[data-theme="dark"] .fw-wrap .tqs-btn{background:transparent;border-color:var(--hd-feld-rand);color:var(--text);}
html[data-theme="dark"] .fw-wrap .tqs-btn:hover{border-color:var(--text);color:var(--text);}
} /* Ende @media screen */