/* ============================================================
   kasse2.css — Guthaben und Warenkorb (techq.ch) im Stil v15, wie das
   Kundencenter. Angelegt 2026-10-04 (CrackBookAir/Fabrizio, techq-05),
   SHOP-45. Auftrag Fabrizio, 03.10.2026: «die Seiten so überarbeiten, dass
   sie mit dem neuen Design der Startseite sowie dem Kundencenter stimmen».

   WARUM EIN EIGENES BLATT
   Die zwei Seiten sind die Kasse: Karten, Formular, Zahlungsweg. Diese
   Bausteine hat sonst keine Unterseite. Sie laden nach unterseite2.css
   zusätzlich dieses Blatt. So bleiben die übrigen Seiten und ihr Cache
   unberührt.

   MESSGRUNDLAGE: my.techq.ch/guthaben, gemessen am 04.10.2026 mit Anmeldung.
   - Karte: #f5f5f7 ohne Rand, Radius 18–20 px, Polster 24/26 px.
   - Beschriftung «Aktuelles Guthaben»: 14 px, normal, grau.
   - Abschnittstitel «Betrag wählen»: 16 px, halbfett.
   - Betragsknöpfe: weiss, Rand #8a8a8e, Radius 14 px, 48 px hoch.
   - Zustimmung: weisse Fläche in der Karte, Radius 14 px, Polster 14/16 px.
   - Titel: halbfett.
   Die Farben kommen aus den Kundencenter-Marken in start2.css
   (--s15-kc-card, --s15-kc-inset …). Sie sind dieselben Werte wie --kc-* in
   kc.css und haben ihre eigene Dunkelfassung.

   NICHT ANGEFASST: Markup und Skripte des Bezahlwegs (warenkorb.js,
   guthaben.js). Gestaltet wird nur über Klassen. `:not(#_)` hebt die Regeln
   über site.css, hell-dunkel.css und den <style>-Block des Warenkorbs.
   ============================================================ */

/* ── Oberzeile ─────────────────────────────────────────────────
   Brotkrume (Guthaben) und Rückweg «Pakete» (Warenkorb) stehen wie die
   Oberzeile der übrigen Unterseiten: 17 px, halbfett, grau. Dort steht sie
   mittig über dem mittigen Titel, hier links über dem linken. Mono und
   Grossbuchstaben fallen weg, wie überall in v15. */
.t15.account-page .breadcrumbs:not(#_){justify-content:flex-start;}
.t15 .ck-rail-back:not(#_){
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-0.01em;
  text-transform:none;color:var(--s15-text2);
}
.t15 .ck-rail-back:not(#_):hover{color:var(--s15-text);}
.t15 .ck-steps li:not(#_){
  font-family:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--s15-text3);
}
.t15 .ck-steps li:not(#_)::after{background:var(--s15-line);}
.t15 .ck-steps .is-done:not(#_){color:var(--s15-text2);}
.t15 .ck-steps .is-now:not(#_){color:var(--s15-text);font-weight:600;}
.t15 .ck-steps .n:not(#_){
  width:22px;height:22px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  border-color:var(--s15-line);color:var(--s15-text3);
}
.t15 .ck-steps .is-done .n:not(#_){background:var(--s15-kc-tint);border-color:transparent;color:var(--s15-link);}
.t15 .ck-steps .is-now .n:not(#_){background:var(--s15-cta);border-color:transparent;color:#fff;}

/* ── Titel ──────────────────────────────────────────────────────
   Halbfett wie im Kundencenter. Der Untertitel in der Grösse des
   v15-Fliesstexts. Guthaben setzt beides im Markup gleich (Inline-Stil). */
.t15 .cart-head h1:not(#_){font-weight:600;color:var(--s15-text);}
.t15 .cart-head p:not(#_){font-size:17px;line-height:1.5;color:var(--s15-text2);}
/* Hinweis «Quittungen … im Kundencenter»: eine ruhige Zeile statt eines
   zweiten grauen Kastens über den grauen Karten. */
.t15 .gut-kontext:not(#_){padding:0;border:0;border-radius:0;background:none;}

/* ── Karten ─────────────────────────────────────────────────────
   Graue Fläche ohne Rand. Titel und Inhalt ohne Trennlinie, wie im
   Kundencenter. Linien bleiben nur zwischen Teilen eines Inhalts
   (Ausstattung, Preis). */
/* Flächen der Kasse. Hell wie das Kundencenter (Karte #f5f5f7, innen #fff). Dunkel die
   Karte von v15 (--s15-card, #161617) und innen eine Stufe heller (#2a2a2c). Die erste
   Fassung nahm die dunkle Karte des Kundencenters (#2a2a2c); darauf fielen die
   halbdurchsichtigen Meldungen unter 4.5:1 («Der Mindestbetrag beträgt CHF 3.» 4.28:1,
   vorher 5.47:1 — Code-Durchsicht 04.10.2026). Innen heller als die Karte gilt so in
   beiden Themen. Das Erfolgsfenster steht ausserhalb von <main>, darum auch dort. */
.t15.account-page,
body.t15-seite .modal{--k-karte:var(--s15-kc-card);--k-innen:var(--s15-kc-inset);}
html[data-theme="dark"] .t15.account-page,
html[data-theme="dark"] body.t15-seite .modal{--k-karte:var(--s15-card);--k-innen:var(--s15-kc-card);}
.t15 .account-sections:not(#_){max-width:720px;}
.t15 .account-section:not(#_){
  background:var(--k-karte);border:0;border-radius:20px;box-shadow:none;
}
/* Im Dunkeln ist die Karte heller als der Seitengrund (#2a2a2c auf #000). Die leise Schrift
   der alten Marke (--text-faint, #8e8e93) hatte darauf 4.39:1: «Mindestbetrag: CHF 3»,
   «Prepaid · Kein Abo …» (gemessen 04.10.2026, kontrast.mjs, 1440 und 390 px). In der Karte
   gilt deshalb die zweite Textstufe von v15 (#a1a1a6, 5.5:1). Hell bleibt die Brücke aus
   unterseite2.css (#6e6e73, 4.8:1 auf #f5f5f7). */
html[data-theme="dark"] .t15 .account-section{--text-faint:var(--s15-text2);}
.t15 .account-section-head h2:not(#_){font-size:17px;font-weight:600;letter-spacing:-0.015em;color:var(--s15-text);}
.t15 .account-section-head p:not(#_){font-size:14px;color:var(--s15-text2);}
.t15 .account-section-head + .account-section-body:not(#_){border-top:0;padding-top:6px;}
.t15 .ck-features:not(#_),
.t15 .ck-offen:not(#_),
.t15 .ck-plan-foot:not(#_),
.t15 .ck-block:not(#_),
.t15 .ck-ablauf:not(#_){border-top-color:var(--s15-kc-line);}
/* Bänder in der Karte: ohne eigene Fläche (sie wären grau auf grau). */
.t15 .ck-plan-foot:not(#_),
.t15 .ck-offen:not(#_){background:transparent;}
/* Die echte Aufgabenliste vor einem Abstieg bleibt abgesetzt (innere Fläche), die leisere
   Auskunft «Konnte nicht geprüft werden» (.unklar) nicht — so stand es im Warenkorb. */
.t15 .ck-offen:not(.unklar):not(#_){background:var(--k-innen);}
/* Mehrere Positionen (zwei Pakete, Paket + Quin+) schreibt warenkorb.js direkt
   hintereinander. Ohne Rand liefen die grauen Karten sonst zu einer zusammen. */
.t15 #cartItemSection:not(#_){display:flex;flex-direction:column;gap:14px;}
/* Innere Flächen weiss, wie die Zustimmung im Kundencenter. */
.t15 .sum-total:not(#_){
  margin:14px 0 16px;padding:16px;border:0;border-radius:14px;background:var(--k-innen);
}
.t15 .ck-balance:not(#_){border:0;border-radius:14px;background:var(--k-innen);}
.t15 .ck-terms:not(#_){padding:14px 16px;border-radius:14px;background:var(--k-innen);}
/* Eigene Regel: ein Browser ohne :has() verwirft die GANZE Selektorliste — die Zustimmung
   im Warenkorb verlöre sonst mit. */
.t15 #guthabenForm label:has(#confirmNoRefund):not(#_){padding:14px 16px;border-radius:14px;background:var(--k-innen);}

/* ── Beschriftungen und Zahlen ──────────────────────────────────
   Beschriftung 14 px, normal, grau. Abschnitt «Zahlung» als Titel
   (16 px, halbfett). Beträge in der Schrift der Seite mit gleich breiten
   Ziffern: in v15 gibt es keine Mono-Schrift. */
.t15 .ck-eyebrow:not(#_),
.t15 .ck-balance-lab:not(#_){
  font-family:inherit;font-size:14px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--s15-text2);
}
.t15 .ck-block-lab:not(#_){
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-0.01em;
  text-transform:none;color:var(--s15-text);
}
.t15 .ck-plan-name:not(#_){font-weight:600;}
.t15 .ck-plan-icon:not(#_){background:var(--k-innen);border-color:var(--s15-kc-line);}
.t15 .sum-total .lab:not(#_){font-weight:600;}
/* «für 12 Monate» stand mit 11 px unter der Untergrenze für Schrift am Telefon (11.5 px). */
.t15 .sum-total .sub:not(#_){font-size:12px;}
.t15 .sum-row .val:not(#_),
.t15 .sum-total .val:not(#_),
.t15 .sum-total .sub:not(#_),
.t15 .ck-price-sub:not(#_),
.t15 .ck-balance-val:not(#_){font-family:inherit;font-variant-numeric:tabular-nums;}
.t15 .ck-prepaid-line:not(#_){font-family:inherit;font-size:13px;letter-spacing:0;color:var(--s15-text2);}
.t15 .ck-next .n:not(#_){font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;color:var(--s15-link);}

/* ── Felder und Knöpfe ───────────────────────────────────────────
   Felder und Betragsknöpfe weiss mit dem Feldrand von v15 (--s15-feld-rand,
   3:1), Radius 14 px, 48 px hoch. */
/* background-color, nicht background: die Auswahl «Zahlungsmethode» trägt
   ihren Pfeil als Hintergrundbild. */
.t15.account-page .form-field input:not([type="checkbox"]):not(#_),
.t15.account-page .form-field select:not(#_),
.t15 #payMethod:not(#_),
.t15 .ck-voucher-input:not(#_){
  min-height:48px;border-radius:14px;border-color:var(--s15-feld-rand);background-color:var(--k-innen);
}
/* 16 px auch am Rechner: unter 16 px zoomt iOS beim Antippen in die Seite. Die Seite selbst
   setzt am Telefon 16 px; eine Regel mit 15 px hier stach sie aus (gemessen 04.10.2026). */
.t15 .ck-voucher-input:not(#_){font-family:inherit;font-size:16px;letter-spacing:0.04em;}
.t15 .ck-voucher-input:not(#_)::placeholder{letter-spacing:0;text-transform:none;color:var(--s15-text3);}
.t15 .quick-amount:not(#_){
  min-height:48px;padding:0 16px;border:1px solid var(--s15-feld-rand);border-radius:14px;
  background:var(--k-innen);color:var(--s15-text);font-size:16px;font-weight:600;
}
.t15 .quick-amount:not(#_):hover{background:var(--s15-kc-tint);border-color:var(--s15-link);}
/* Nebenknopf in der Karte («Einlösen»): grau auf grau wäre unsichtbar. */
.t15 .account-section .btn-soft:not(#_){
  border:1px solid var(--s15-feld-rand);background:var(--k-innen);color:var(--s15-text);
}
.t15 .account-section .btn-soft:not(#_):not(:disabled):hover{background:var(--s15-kc-tint);border-color:var(--s15-link);}

/* ── Laufzeit in der Paketkarte (13.10.2026, techq-e8) ──────────
   Auftrag Fabrizio: die Laufzeit im Warenkorb umstellen statt die Position zu
   entfernen und neu zu legen, «im techq design schlicht einfach». Der
   Umschalter ist der der Startseite (.s15-segment aus start2.css: Leiste
   --s15-card2, Wahl --s15-segon mit --s15-segsh, gleiche Spalten), kein neues
   Bauteil. Gleiche Spalten heissen auch: die halbfette Wahl schiebt die
   Nachbarn nicht. Hier steht nur die Zeile, in der er sitzt: Beschriftung wie
   «Ihr Guthaben» (14 px, grau), Umschalter rechts; wird es eng (Telefon), rückt
   er in voller Breite darunter. Weniger als vier Laufzeiten (Mindestlaufzeit,
   fehlender Preis): so viele Spalten wie Laufzeiten. */
.t15 .ck-laufzeit:not(#_){
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  padding:14px var(--ck-pad,22px) 16px;border-top:1px solid var(--s15-kc-line);
}
.t15 .ck-laufzeit[hidden]:not(#_){display:none;}
.t15 .ck-laufzeit-lab:not(#_){font-size:14px;color:var(--s15-text2);}
.t15 .ck-laufzeit .s15-segment:not(#_){flex:1 1 320px;max-width:440px;}
.t15 .ck-laufzeit .s15-segment.ck-lz-3:not(#_){grid-template-columns:repeat(3,minmax(0,1fr));max-width:336px;}
.t15 .ck-laufzeit .s15-segment.ck-lz-2:not(#_){grid-template-columns:repeat(2,minmax(0,1fr));max-width:228px;}
/* Fokus wie im Rest von v15. Die Regel der Startseite (.s15 :focus-visible) greift
   hier nicht: die Kasse steht in .t15. */
.t15 .ck-laufzeit .s15-segment__knopf:not(#_):focus-visible{outline:2px solid var(--s15-link);outline-offset:3px;}
/* Tippziel 44 px auch auf Tablets ohne Maus; start2.css hebt die Höhe nur bis 700 px. */
@media (hover:none){
  .t15 .ck-laufzeit .s15-segment__knopf:not(#_){height:44px;}
}
/* Am schmalen Telefon passt «12 Monate» nicht mehr in eine Lage (gemessen 13.10.2026,
   halbfett 13 px: 65 px Text; Platz bei 390 px Fensterbreite 66 px, bei 375 px 62, bei
   360 px 58). Darunter stehen in den Lagen nur die Zahlen, die Einheit steht in der
   Beschriftung («Laufzeit in Monaten»). Vorgelesen wird weiterhin «12 Monate». */
.t15 .ck-lz-einheit:not(#_){display:none;}
@media (max-width:399.98px){
  .t15 .ck-lz-wort:not(#_){display:none;}
  .t15 .ck-lz-einheit:not(#_){display:inline;}
}

/* ── Rabatt sichtbar (14.10.2026, techq-9d) ─────────────────────
   Auftrag Fabrizio: bei 12 Monaten soll klar sein, dass es 12 % Rabatt gibt,
   und ein Prozent-Gutschein zeigt seinen Satz. Das Abzeichen ist das von
   /pakete («−12%» am Knopf der Laufzeit: .t15 .tq-pill .save, unterseite2.css:346):
   Pille auf --s15-bg, Schrift --s15-link, 11.5 px halbfett (am Telefon die
   Untergrenze). Es steht in der Karte hinter «/ Monat», in der Zusammenfassung
   hinter der Laufzeit und am eingelösten Code. Beträge bleiben ungefärbt.
   Im Umschalter sitzt es an der oberen Ecke der Lage, nicht in der Zeile: die
   Spalten sind gleich breit, und «12 Monate» füllt die Lage am Telefon schon
   (gemessen 13.10., siehe oben). Absolut gesetzt ändert es keine Breite, und
   es steht in jeder Lage, nicht nur in der gewählten: kein Zustand. */
.t15 .ck-rabatt:not(#_){
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:980px;
  background:var(--s15-bg);color:var(--s15-link);
  font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:2px;
}
.t15 .ck-laufzeit .s15-segment__knopf:not(#_){position:relative;}
.t15 .ck-laufzeit .s15-segment__knopf .ck-rabatt:not(#_){
  position:absolute;top:-11px;right:-2px;margin:0;pointer-events:none;
}

/* ── Fokus (Tastatur) ───────────────────────────────────────────
   Sichtbar wie im Rest von v15: 2 px Blau mit Abstand. Der Ring aus site.css (22 %
   Deckkraft) verschwand auf der grauen Karte fast ganz. Felder behalten ihren blauen
   Rand: die eigene Randfarbe oben stach die Fokusregel von site.css sonst aus
   (gemessen 04.10.2026: Rand grau statt blau, nur der blasse Ring blieb). */
.t15.account-page .btn:not(#_):focus-visible,
.t15 .ck-rail-back:not(#_):focus-visible,
body.t15-seite .pay-bar .btn:not(#_):focus-visible,
body.t15-seite .modal .btn:not(#_):focus-visible{outline:2px solid var(--s15-link);outline-offset:3px;box-shadow:none;}
/* «Was passiert, wenn das Guthaben nicht reicht?» (Aufklapper) — sein Ring aus warenkorb.html
   (22 % Deckkraft) verschwand auf der grauen Karte wie der der Knöpfe. */
.t15 .ck-ablauf summary:not(#_):focus-visible{outline:2px solid var(--s15-link);outline-offset:3px;box-shadow:none;border-radius:6px;}
.t15.account-page .form-field input:not([type="checkbox"]):not(#_):focus,
.t15.account-page .form-field select:not(#_):focus,
.t15 #payMethod:not(#_):focus,
.t15 .ck-voucher-input:not(#_):focus{border-color:var(--s15-link);box-shadow:0 0 0 3px var(--s15-kc-tint);}

/* ── Ausserhalb von <main>: Summenleiste und Erfolgsfenster ──────
   Die feste Summenleiste am Telefon («Jetzt zu bezahlen … Zur Zahlung»)
   und das Fenster nach der Bestellung stehen neben <main>, nicht darin —
   `.t15` erreicht sie nicht (gemessen 04.10.2026: Mono-Beschriftung und
   schwarzer Knopf blieben). Dieses Blatt laden nur die zwei Kassenseiten,
   darum hier über body.t15-seite. */
body.t15-seite .pay-bar-lab:not(#_){
  font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--s15-text2);
}
body.t15-seite .pay-bar-val:not(#_){font-family:inherit;font-variant-numeric:tabular-nums;}
body.t15-seite .pay-bar .btn-primary:not(#_),
body.t15-seite .modal .btn-primary:not(#_){border-radius:980px;border-color:transparent;background:var(--s15-cta);color:#fff;}
body.t15-seite .pay-bar .btn-primary:not(#_):hover,
body.t15-seite .modal .btn-primary:not(#_):hover{background:var(--s15-ctah);color:#fff;}
body.t15-seite .modal .btn-soft:not(#_){border-radius:980px;border:1px solid var(--s15-feld-rand);background:var(--k-innen);color:var(--s15-text);}
body.t15-seite .modal .btn-soft:not(#_):not(:disabled):hover{background:var(--s15-kc-tint);border-color:var(--s15-link);color:var(--s15-text);}

/* Quins Knopf (unten rechts, z-index 900) lag am Telefon genau über «Zur
   Zahlung» der Summenleiste (gemessen 04.10.2026 bei 390 px, schon vor v15:
   quin.css kennt die Leiste nicht). Solange die Leiste steht, rückt er über
   sie. Zieht sie sich zurück (.is-hidden), kehrt er an seinen Platz zurück. */
@media (max-width:980px){
  /* Nicht bei offenem Chat (.qn-offen): das Fenster hängt unten an derselben Wurzel und
     sprang sonst um 58 px, jedes Mal, wenn die Leiste kam oder ging. */
  body.has-pay-bar:has(#payBar:not(.is-hidden):not([hidden])) .qn-wurzel:not(.qn-offen){
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
  }
  body.has-pay-bar .qn-wurzel{transition:bottom .22s ease;}
}
@media (prefers-reduced-motion:reduce){body.has-pay-bar .qn-wurzel{transition:none;}}