/* Kontrast (SHOP-22, 29.07.): --text-faint war #8A929B = 3.15:1 auf Weiss, --text-soft
   #64748B = 4.39:1 auf #F6F6F2. WCAG AA verlangt 4.5:1. Nicht aufhellen. */
/* ============================================================================
   techQ site.css — shared design system for the redesigned inner pages
   (Rollout 2026-07-18). Schrift seit dem Abend des 2026-08-30: nur noch eine —
   SF Pro, die Systemschrift der Apple-Geraete, ueber die Tokens --tq-ui,
   --tq-sans und --tq-mono aus `fonts.css`. Wer nicht auf einem Apple-Geraet
   sitzt, bekommt den Rueckfall: Inter, Instrument Sans, JetBrains Mono wie
   bisher. Light-only,
   navy accent #0B3A6E, near-black buttons — identical to index.html/pakete.html.
   Header/footer markup is copied 1:1 from pakete.html into each page; this file
   carries the shared classes those snippets and the page bodies rely on.
   NOT loaded by index.html, pakete.html or the auth family (they are
   self-contained). Legacy token aliases are kept so markup injected by
   existing JS (warenkorb.js, guthaben.js, …) keeps working without edits.
   ============================================================================ */

*{box-sizing:border-box;}
:root{
  --bg:#ffffff;--bg-alt:#F6F6F2;--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:#ECECE6;--border-strong:#E1E1DA;--border-faint:#F1F1EC;
  /* Akzent = Logo-Blau (04.08.). Vorher #0B3A6E, ein anderes und viel dunkleres
     Navy als die Wortmarke — und die steht auf JEDER Seite, oben links neben
     dem blauen Text. Fabio: „die schrift die blau ist ist nicht das gleiche
     blau wie das logo, das ist nicht gut."

     05.08.2026, Auftrag Fabio: site-weit auf #3f7fdf — das Logo-Blau der
     DUNKELvariante (Ring), bisher stand hier die Hellvariante #1E5FBF.

       Logo dunkel   #3f7fdf (Schweif #8bb2ea)   <- ab jetzt ueberall
       Logo hell     #1E5FBF (Schweif #6A97DC)   <- vorher
       alt/Navy      #0B3A6E

     WARUM ZWEI TOKEN. #3f7fdf ist heller und faellt als Textfarbe durch:
       #3f7fdf auf #ffffff   3.95:1   FAELLT (noetig 4.5)
       #3f7fdf auf #F6F6F2   3.65:1   FAELLT
       weiss auf #3f7fdf     3.95:1   FAELLT
     Fuer Flaechen, Rahmen, Symbole und Grafik reicht es (Schwelle 3.0), fuer
     Text nicht. Deshalb:
       --accent       #3f7fdf   Flaechen, Rahmen, Symbole, Verlaeufe, Punkte
       --accent-text  #1c4f9e   blauer TEXT und blaue Flaechen MIT weisser Schrift
     Gemessen: #1c4f9e auf #ffffff 7.89:1, auf #e9f0fe 6.90:1, weiss darauf 7.89:1.
     Beide Werte sind derselbe Farbton (216°), nur zwei Helligkeiten — nebeneinander
     liest es sich als eine Farbe.

     Nicht weiter aufhellen: der helle Logo-Zweiton #6A97DC kaeme auf 2.74:1 und
     faellt auch fuer grosse Schrift durch (SHOP-22, 29.07.: „Nicht aufhellen.").

     Zwei Seiten fuehren eigene Token und wurden mitgezogen: index.html und
     pakete.html (beide self-contained, laden site.css nicht). assets/styles.css
     trug ein drittes Blau (#2F80ED); es ist am 05.08. mitgezogen worden, weil
     die Datei auf my.techq.ch sehr wohl geladen wird (22 Seiten).

     --marke-blau-* sind die Verlaufstufen fuer ueberuns-exp.css. Sie standen bis
     04.08. in einer eigenen Datei ueberuns-marke.css; die ist mit dieser
     Umstellung ueberfluessig geworden und geloescht. */
  --accent:#3f7fdf;--accent-text:#1c4f9e;--accent-hover:#2267cd;--accent-soft:#e9f0fe;--row-hover:#FAFAF6;
  --marke-blau-1:#3f7fdf;--marke-blau-2:#5a92e6;--marke-blau-3:#8bb2ea;
  --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;
  /* 6px, nicht 8 (Entscheid 07.09.2026, Eintrag 4). Gemessen: der Shop nutzt
   --radius-sm GENAU EINMAL (Fokusring .k-adresse__wert auf /kontakt), beide
   angemeldeten Auftritte je zehnmal auf 6px. Die vermutete Kante zwischen
   Verkaufsseite und Arbeitsoberflaeche gab es also nicht — es war ein
   Restwert, den jeder neue Baustein weitergeerbt haette. */
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;
  --shadow-lg:0 18px 40px -20px rgba(20,24,28,0.25);
  --ring:0 0 0 3px rgba(63,127,223,0.22);
}
html,body{margin:0;padding:0;}
body{font-family:var(--tq-ui);font-feature-settings:"cv02","cv03","cv04","cv11","ss01";color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Ueberschriften standen bis 2026-08-30 auf Nunito Sans, davor auf Instrument
   Sans. Seit der Umstellung auf SF Pro tragen h1-h3 dasselbe Token wie alles
   andere; die Regel bleibt trotzdem stehen, weil sie den Rueckfall auf
   Nicht-Apple-Geraeten steuert. Die Laufweiten weiter unten sind die fuer
   Nunito Sans gemessenen (h1 -0.028em, h2 -0.02em) und wurden fuer SF Pro
   NICHT neu gemessen — wer sie anfasst, misst nach. */
h1,h2,h3{font-family:var(--tq-ui);}
a{color:var(--accent-text,#1c4f9e);text-decoration:none;}
a:hover{color:var(--accent-hover);}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--accent-text,#1c4f9e);color:#fff;}
.mono{font-family:var(--tq-mono);}
@keyframes techq-slidein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes kontoMenuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes tq-spin{to{transform:rotate(360deg);}}

/* ---- container ---- */
.container{max-width:1220px;margin:0 auto;padding:0 24px;}

/* ---- logo light/dark swap (light-only site: dark never shows) ---- */
.logo-dark{display:none;}
[data-theme="dark"] .logo-light{display:none;}
[data-theme="dark"] .logo-dark{display:block;}

/* ---- header nav (markup from pakete.html) ---- */
.nav-desktop-links{display:inline-flex;}
button.nav-hamburger{display:none;}
.nav-mobile{display:none;}
.nav-mobile.open{display:flex;flex-direction:column;}
@media(max-width:900px){
  .nav-desktop-links{display:none !important;}
  button.nav-hamburger{display:inline-flex;}
}
.hdr-link{color:var(--text-body);}
.hdr-link:hover{color:var(--accent-text,#1c4f9e);}
.nav-mobile a{color:var(--text);font-size:16px;font-weight:400;padding:13px 0;border-bottom:1px solid var(--border-faint);}
.nav-mobile a:hover{color:var(--accent-text,#1c4f9e);}

/* ---- icon buttons (hamburger + injected cart) ---- */
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);background:transparent;border-radius:8px;color:var(--text);cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;}
.icon-btn:hover{border-color:var(--text-faint);color:var(--accent-text,#1c4f9e);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:8px;border:1px solid transparent;font:500 14px/1 var(--tq-ui);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,opacity .15s;}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);}
.btn-primary:hover{background:var(--btn-bg-hover);color:var(--btn-text);}
/* Deaktiviert NICHT ueber Transparenz: `opacity` verblasst Grund UND Schrift
   zugleich — aus Schwarz auf Weiss wurde Weiss auf Mittelgrau, gemessen 3.96:1
   und damit unter der Schwelle von 4.5:1. Eigene Farben ergeben 5.24:1 und
   sehen trotzdem eindeutig unbenutzbar aus. (2026-07-31) */
.btn-primary:disabled{background:var(--border-faint);color:var(--text-muted);border-color:var(--border-strong);opacity:1;cursor:not-allowed;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--row-hover);color:var(--text);}
.btn-soft{background:var(--bg-alt);color:var(--text);border-color:var(--border);}
.btn-soft:hover{background:var(--border-faint);color:var(--text);}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(194,65,12,0.35);}
.btn-danger:hover{background:rgba(194,65,12,0.08);color:var(--danger);}
.btn-link{background:none;border:none;color:var(--text-muted);padding:6px 8px;font-weight:400;}
.btn-link:hover{color:var(--accent-text,#1c4f9e);}
.btn-sm{padding:9px 14px;font-size:13px;}
.btn-lg{padding:14px 24px;font-size:15px;}
.btn-dark{display:inline-flex;align-items:center;gap:9px;padding:16px 28px;background:var(--btn-bg);color:var(--btn-text);border-radius:9px;font-size:16px;font-weight:500;letter-spacing:-.01em;transition:background .15s;}
.btn-dark:hover{background:var(--btn-bg-hover);color:var(--btn-text);}
.btn-textlink{display:inline-flex;align-items:center;gap:9px;padding:16px 12px;color:var(--text);font-size:16px;font-weight:500;}
.btn-textlink:hover{color:var(--accent-text,#1c4f9e);}
.btn:focus-visible,.icon-btn:focus-visible,.tq-pill:focus-visible{outline:none;box-shadow:var(--ring);}

/* ---- nav-auth: cart badge + konto dropdown ---- */
.nav-auth-area{display:flex;align-items:center;}
.konto-dropdown{position:relative;display:flex;align-items:center;}
.konto-btn{display:inline-flex;align-items:center;gap:5px;}
.chev-sm{transition:transform .18s ease;flex-shrink:0;}
.konto-btn[aria-expanded="true"] .chev-sm{transform:rotate(180deg);}
.konto-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:200;animation:kontoMenuIn .12s ease;}
.konto-menu.open{display:block;}
.konto-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:400;color:var(--text-muted);text-decoration:none;cursor:pointer;font-family:inherit;background:none;border:none;width:100%;text-align:left;transition:background .12s,color .12s;}
.konto-item:hover{background:var(--row-hover);color:var(--text);}
.konto-item-danger:hover{background:rgba(194,65,12,0.10);color:var(--danger);}
.konto-sep{height:1px;background:var(--border);margin:4px 0;}
@media(max-width:900px){#dashboardBtn{display:none;}}

/* ---- footer ----
   Steht seit 12.08.2026 vollstaendig in `assets/fusszeile.css` (Namensraum
   `tqf-`). Hier lagen frueher `.f-link` und `.soc` — aber `index.html` und
   `pakete.html` laden site.css NICHT und trugen deshalb eigene Kopien davon.
   Genau daran sind acht verschiedene Fusszeilen entstanden. Nichts davon
   gehoert zurueck in diese Datei. */

/* ============================================================================
   PAGE HERO (breadcrumb + big headline, pattern from pakete.html)
   ============================================================================ */
.page-hero{border-bottom:1px solid var(--border);}
.page-hero .hero-inner{padding:clamp(34px,4.5vw,68px) 0 clamp(30px,3.6vw,46px);animation:techq-slidein .5s ease both;}
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-family:var(--tq-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;}
.breadcrumbs a{color:var(--text-faint);}
.breadcrumbs a:hover{color:var(--accent-text,#1c4f9e);}
/* Der Trenner ist Dekoration: die Struktur des Pfads steht in den Links.
   Deshalb im Markup aria-hidden (sonst liest ein Bildschirmleser
   "Start Schraegstrich AGB") und farblich auf die 3:1-Schwelle fuer
   nicht-textliche Elemente statt der 4.5:1 fuer Text. Vorher
   --border-strong = 1.31:1, praktisch unsichtbar. (SHOP-22) */
.breadcrumbs .sep{color:#8A929B;}
.breadcrumbs .now{color:var(--accent-text,#1c4f9e);}
/* `overflow-wrap`/`hyphens` (03.08.2026): unten greift 36px als Mindestgroesse,
   und "Geschaeftsbedingungen." ist bei 36px 383px breit — mehr als die 342px, die
   auf einem 390px-Telefon zwischen den Containerraendern liegen. Die AGB-Seite
   liess sich deshalb auf JEDEM Telefon seitlich verschieben (Seite 407px statt
   390px). Aufgefallen ist nur die AGB-Seite; jedes kuenftige lange Wort in einer
   H1 haette dasselbe getan. `hyphens` trennt sauber (lang="de-CH"),
   `overflow-wrap` ist die Sperre, falls die Trennung nicht greift. */
.page-hero h1{font-size:clamp(36px,5.4vw,68px);line-height:1.04;letter-spacing:-0.028em;font-weight:500;margin:22px 0 0;max-width:19ch;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;}
.page-hero .hero-sub{max-width:640px;margin:24px 0 0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;color:var(--text-muted);}

/* section eyebrow/head (also used on ueberuns pages) */
.section-tag{font-family:var(--tq-mono);font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);}
.section-head{max-width:720px;margin-bottom:clamp(28px,4vw,52px);}
.section-title{font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-0.02em;font-weight:500;margin:16px 0 0;color:var(--text);text-wrap:balance;}
.section-sub{margin:16px 0 0;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--text-muted);}

/* ---- generic card + service card (panel features, about cards) ---- */
.svc-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.4vw,30px);border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
a.svc-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,24,28,0.28);border-color:var(--text-faint);color:var(--text);}
.svc-arrow{color:var(--accent-text,#1c4f9e);font-size:22px;line-height:1;margin-top:auto;}

/* ============================================================================
   SEGMENTED PILL TOGGLES  (.tq-seg from pakete.html; .billing-toggle keeps its
   legacy class name because vergleich.js binds to it)
   ============================================================================ */
.tq-seg,.billing-toggle{display:inline-flex;gap:2px;background:#EFEFEA;padding:5px;border-radius:999px;}
.tq-pill,.billing-toggle button{padding:9px 18px;border-radius:999px;font-size:14px;font-weight:400;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:inherit;color:var(--text-muted);background:transparent;transition:color .2s ease,background .2s ease;}
.tq-pill.active,.billing-toggle button.active{font-weight:500;color:var(--text);background:#ffffff;box-shadow:0 1px 3px rgba(20,24,28,0.13);}
.tq-pill .save,.billing-toggle .save{background:rgba(63,127,223,0.12);color:var(--accent-text,#1c4f9e);padding:2px 7px;border-radius:999px;font-size:11.5px;font-weight:600;}

/* ============================================================================
   MODAL + SPINNER + ALERTS + LOADING/EMPTY STATES
   (class names expected by modal.js / warenkorb.js / guthaben.js / finder flow)
   ============================================================================ */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,0.5);display:none;align-items:center;justify-content:center;z-index:100;padding:24px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:modal-in .2s ease-out;}

.spinner{width:18px;height:18px;border:2px solid rgba(20,24,28,0.15);border-top-color:var(--accent);border-radius:50%;animation:tq-spin .6s linear infinite;display:inline-block;flex-shrink:0;}

.auth-alert{display:none;padding:12px 14px;border-radius:var(--radius-md);font-size:13.5px;line-height:1.5;border:1px solid transparent;}
.auth-alert.show{display:block;}
.auth-alert-danger{background:var(--danger-bg);color:#9A3412;border-color:var(--danger-bd);}
.auth-alert-success{background:var(--success-soft);color:var(--success);border-color:#C5E9DA;}
.auth-alert-info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd);}
.auth-alert a{color:inherit;font-weight:500;text-decoration:underline;}

.auth-loading{display:flex;align-items:center;justify-content:center;gap:11px;padding:96px 24px;min-height:38vh;color:var(--text-muted);font-size:14.5px;}
.auth-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);color:var(--text-muted);text-align:center;}
.auth-empty-state svg{color:var(--text-faint);}
.auth-empty-state p{margin:0;font-size:15px;}

/* ============================================================================
   LEGAL / PROSE PAGES (agb, datenschutz, impressum)
   ============================================================================ */
.legal{max-width:780px;padding-bottom:clamp(56px,7vw,96px);}
.legal .updated{display:inline-flex;font-family:var(--tq-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:28px;}
/* Die Fassungszeile gehoert unter den Umschalter, nicht daneben.
   `.updated` ist `inline-flex`, also inline-artig. Bis zum 01.09.2026 stand
   davor der Logo-Block («Dokumentkopf wie im PDF») mit `display:block` — der
   erzwang den Zeilenumbruch nebenbei. Als das doppelte Logo herausfiel, rutschte
   «Fassung 1.0 · Stand …» auf dieselbe Zeile wie die Pillen AGB/Datenschutz/AVV
   und klebte an ihnen (Fabrizio: «zu nahe an den Menuepunkten»).
   `display:flex` macht daraus wieder eine eigene Zeile — ein Flex-Behaelter ist
   block-artig — und der Abstand steht jetzt ausdruecklich da, statt von einem
   Bild mitgetragen zu werden, das jemand entfernen kann.
   Gilt NUR fuer die drei Seiten mit Umschalter: auf /impressum und
   /nutzungsrichtlinie ist `.updated` das erste Kind von `.legal` und bleibt
   unveraendert. Der HTML-Kommentar dazwischen bricht `+` nicht, er ist kein
   Element. */
.legal .tq-seg + .updated{display:flex;margin-top:clamp(20px,3vw,30px);}
.legal h2{font-size:clamp(21px,2.2vw,26px);line-height:1.15;letter-spacing:-0.02em;font-weight:500;margin:44px 0 14px;color:var(--text);}
.legal h3{font-size:16.5px;font-weight:500;letter-spacing:-0.01em;margin:26px 0 10px;color:var(--text);}
.legal p{font-size:15.5px;line-height:1.65;color:var(--text-body);margin:0 0 14px;}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:7px;}
.legal li{font-size:15.5px;line-height:1.6;color:var(--text-body);}
.legal strong{color:var(--text);}
.legal em{color:var(--text-muted);}
.legal-toc{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-alt);padding:clamp(20px,2.4vw,28px);margin:0 0 14px;}
/* Die Ueberschrift des Inhaltsverzeichnisses war ein h4 direkt nach der h1 —
   eine uebersprungene Ebene. Jetzt h2 mit derselben Optik. (SHOP-22) */
.legal-toc h2.toc-titel,.legal-toc h4{margin:0 0 14px;font-family:var(--tq-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:400;color:var(--text-faint);}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:36px;gap:8px;display:block;}
.legal-toc li{padding:3px 0;font-size:14.5px;break-inside:avoid;}
.legal-toc a{color:var(--text-body);font-weight:400;}
.legal-toc a:hover{color:var(--accent-text,#1c4f9e);}
@media(max-width:640px){.legal-toc ol{columns:1;}}
.warn-note{margin-top:40px;padding:18px 20px;background:var(--warn-soft);border:1px solid rgba(180,83,9,0.35);border-radius:var(--radius-lg);color:var(--text-body);font-size:14.5px;line-height:1.6;}
.warn-note strong{color:var(--warn);}

/* ============================================================================
   FORMS (kontakt + account pages) — component look ported from auth.css
   ============================================================================ */
.form-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);padding:clamp(24px,3vw,36px);}
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;position:relative;}
.form-field label{font-size:13.5px;font-weight:500;letter-spacing:-0.005em;color:var(--text);}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:12px 14px;font:400 15px/1.4 var(--tq-ui);color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;}
.form-field textarea{resize:vertical;min-height:120px;}
.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='%235B6570' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:40px;cursor:pointer;}
/* An der QUELLE, nicht als spaetere Regel: `::placeholder` allein ist (0,0,0),
   `.form-field input::placeholder` ist (0,1,1) und gewinnt. Weiter unten steht
   seit dem letzten Durchgang schon einmal `::placeholder { color:#6B7480 }` —
   die Regel hat nie gegriffen, und die Platzhalter der Registrierung standen
   weiter auf 3.15:1. Am 08.08.2026 auf der Live-Seite nachgemessen, neun
   Felder. Dieselbe Falle wie beim Bestaetigungsknopf im Adminpanel. */
.form-field input::placeholder,.form-field textarea::placeholder{color:#6B7480;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.form-error{display:none;font-size:12.5px;line-height:1.4;color:var(--danger);}
.form-error.show{display:block;}
.hint{font-size:12px;color:var(--text-faint);line-height:1.4;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--text-body);margin-bottom:8px;}
.checkbox-row input[type="checkbox"],
input[type="checkbox"]{accent-color:var(--accent);}
.checkbox-row input[type="checkbox"]{width:17px;height:17px;margin-top:2px;flex-shrink:0;}
.checkbox-row label{cursor:pointer;}
.form-success{display:none;gap:12px;align-items:flex-start;margin-top:18px;padding:16px 18px;border:1px solid #C5E9DA;background:var(--success-soft);border-radius:var(--radius-lg);color:var(--success);font-size:14px;line-height:1.5;}
.form-success.show{display:flex;}

/* info cards (kontakt right column) */
.two-col{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start;padding-bottom:clamp(56px,7vw,96px);}
@media(max-width:860px){.two-col{grid-template-columns:1fr;}}
.info-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-alt);padding:clamp(20px,2.4vw,28px);}
.info-card h2,.info-card h3{margin:0 0 16px;font-size:17px;font-weight:500;letter-spacing:-0.01em;}
.info-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-muted);}
.info-row{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border);}
.info-row:first-of-type{border-top:none;padding-top:0;}
.info-row svg{color:var(--accent-text,#1c4f9e);flex-shrink:0;margin-top:3px;}
.info-row .lab{font-family:var(--tq-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px;}
.info-row .val{font-size:14.5px;line-height:1.55;color:var(--text-body);}

/* ============================================================================
   WIZARD (paket-finder; markup classes rendered by finder.js)
   ============================================================================ */
.wizard{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);max-width:1000px;overflow:hidden;}
.wizard-head{display:flex;align-items:center;gap:18px;padding:18px clamp(20px,3vw,30px);border-bottom:1px solid var(--border);background:var(--bg-alt);}
.wizard-step-label{font-family:var(--tq-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
.wizard-progress{display:flex;gap:5px;flex:1;}
.wizard-progress .step{height:4px;flex:1;border-radius:3px;background:var(--border-strong);transition:background .25s ease;}
.wizard-progress .step.done{background:var(--accent);opacity:.45;}
.wizard-progress .step.active{background:var(--accent);}
.wizard-body{padding:clamp(24px,3.4vw,40px) clamp(20px,3vw,30px);}
.wizard-question{font-size:clamp(21px,2.4vw,27px);line-height:1.15;letter-spacing:-0.02em;font-weight:500;margin:0 0 8px;}
.wizard-hint{font-size:14.5px;line-height:1.5;color:var(--text-muted);margin:0 0 22px;}
.wizard-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.wizard-options{grid-template-columns:1fr;}}
.wizard-option{position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;padding:16px 18px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;}
.wizard-option:hover{border-color:var(--text-faint);transform:translateY(-1px);}
.wizard-option.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset;}
.wizard-option:focus-visible{outline:none;box-shadow:var(--ring);}
.wizard-option .wz-opt-icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--bg-alt);color:var(--text-muted);display:grid;place-items:center;transition:background .15s ease,color .15s ease;}
.wizard-option.selected .wz-opt-icon{background:var(--accent-text,#1c4f9e);color:#fff;}
.wizard-option .wz-opt-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wizard-option .opt-title{font-size:15.5px;font-weight:500;color:var(--text);}
.wizard-option .opt-desc{font-size:13.5px;line-height:1.45;color:var(--text-muted);}
.wizard-option .wz-opt-key{position:absolute;top:10px;right:12px;font-family:var(--tq-mono);font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:5px;padding:1px 5px;opacity:0;transition:opacity .15s ease;}
@media(hover:hover){.wizard-option:hover .wz-opt-key{opacity:1;}}
.wizard-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(20px,3vw,30px);border-top:1px solid var(--border);}

/* ============================================================================
   COMPARE TABLE (vergleich)
   ============================================================================ */
.compare-scroll-hint{display:none;font-family:var(--tq-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 12px;}
@media(max-width:980px){.compare-scroll-hint{display:block;}}
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);}
.compare{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;font-size:14px;}
.compare th,.compare td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--border);}
.compare thead th{position:sticky;top:0;background:var(--surface);z-index:2;padding:18px 16px 14px;border-bottom:1px solid var(--border-strong);vertical-align:bottom;}
.compare .plan-h{font-size:16px;font-weight:500;letter-spacing:-0.015em;color:var(--text);}
.compare .plan-h-price{display:block;margin-top:5px;font-family:var(--tq-mono);font-size:11.5px;font-weight:400;color:var(--text-muted);white-space:nowrap;}
.compare .feature-col{text-align:left;}
.compare .feature-name{text-align:left;color:var(--text-body);font-weight:400;white-space:nowrap;}
.compare .value{color:var(--text);font-variant-numeric:tabular-nums;}
.compare tr.group td{text-align:left;background:var(--bg-alt);font-family:var(--tq-mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);padding:10px 16px;}
.compare .featured-col{background:rgba(63,127,223,0.06);}
.compare thead th.featured-col{box-shadow:inset 0 3px 0 var(--accent);}
.compare tbody tr:last-child td{border-bottom:none;}
.compare .check{color:var(--accent-text,#1c4f9e);display:inline-block;vertical-align:middle;}
.compare .cross{color:var(--text-faint);}

/* ============================================================================
   ACCOUNT PAGES (guthaben, warenkorb) — sections + tabs
   ============================================================================ */
.account-page{padding:clamp(30px,3.6vw,52px) 0 clamp(56px,7vw,96px);}
.account-page h1{letter-spacing:-0.028em;}
.account-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;background:#EFEFEA;padding:5px;border-radius:999px;margin-bottom:28px;}
.account-tabs a{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:400;color:var(--text-muted);white-space:nowrap;transition:color .2s ease,background .2s ease;}
.account-tabs a:hover{color:var(--text);}
.account-tabs a.active{font-weight:500;color:var(--text);background:#ffffff;box-shadow:0 1px 3px rgba(20,24,28,0.13);}
.account-sections{display:flex;flex-direction:column;gap:20px;max-width:640px;}
.account-section{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;}
.account-section-head{padding:18px clamp(18px,2.4vw,26px) 14px;}
.account-section-head h2{margin:0 0 3px;font-size:17px;font-weight:500;letter-spacing:-0.015em;}
.account-section-head p{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.5;}
.account-section-body{padding:18px clamp(18px,2.4vw,26px) clamp(18px,2.4vw,24px);border-top:1px solid var(--border);}

/* ============================================================================
   STATUS PAGE
   ============================================================================ */
.status-summary{display:flex;gap:16px;align-items:flex-start;padding:clamp(22px,2.6vw,30px);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);}
.status-summary h2{margin:0 0 5px;font-size:clamp(19px,2vw,23px);letter-spacing:-0.02em;font-weight:500;}
.status-summary p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5;}
.status-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.status-summary.ok .status-dot{background:var(--success);box-shadow:0 0 0 5px rgba(16,130,90,0.14);animation:statusPulse 2.4s ease-in-out infinite;}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 4px rgba(16,130,90,0.10);}50%{box-shadow:0 0 0 7px rgba(16,130,90,0.18);}}
.status-list{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(18px,2.4vw,26px);border-top:1px solid var(--border);}
.status-row:first-child{border-top:none;}
.status-row .name{font-size:15px;font-weight:500;color:var(--text);letter-spacing:-0.01em;}
.status-row .desc{display:block;font-size:13px;font-weight:400;color:var(--text-muted);margin-top:3px;}
.status-row .uptime{font-family:var(--tq-mono);font-size:12.5px;font-weight:400;color:var(--success);background:var(--success-soft);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.status-note{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(20px,2.4vw,26px);margin-top:20px;}
.status-note h3{font-size:14.5px;font-weight:500;margin:0 0 8px;}
.status-note p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin:0 0 10px;}
.status-note p:last-child{margin-bottom:0;}

/* ============================================================================
   ÜBER UNS (hub outro + subpages; data-reveal driven by ueberuns.js)
   ============================================================================ */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal-delay="1"]{transition-delay:.06s;}
[data-reveal-delay="2"]{transition-delay:.12s;}
[data-reveal-delay="3"]{transition-delay:.18s;}
[data-reveal-delay="4"]{transition-delay:.24s;}

.about-cards-section{padding:clamp(64px,9vw,120px) 0;}
.about-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;}
.about-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.4vw,30px);border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.about-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,24,28,0.28);border-color:var(--text-faint);color:var(--text);}
.about-card .card-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text,#1c4f9e);display:grid;place-items:center;}
.about-card .card-icon svg{width:22px;height:22px;}
.about-card h3{margin:4px 0 0;font-size:clamp(19px,1.9vw,22px);font-weight:500;letter-spacing:-0.02em;}
.about-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-muted);}
.about-card .card-cta{margin-top:auto;padding-top:6px;color:var(--accent-text,#1c4f9e);font-size:14px;font-weight:500;}

.about-sub-hero{border-bottom:1px solid var(--border);}
.about-sub-hero .hero-inner{padding:clamp(38px,5vw,76px) 0 clamp(32px,4vw,52px);animation:techq-slidein .5s ease both;}
.about-sub-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--tq-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);}
.about-sub-hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.about-sub-hero h1{font-size:clamp(34px,4.8vw,60px);line-height:1.05;letter-spacing:-0.028em;font-weight:500;margin:20px 0 0;max-width:18ch;text-wrap:balance;}
.about-sub-hero h1 em{font-style:normal;color:var(--accent-text,#1c4f9e);}
.about-sub-hero .lede{max-width:620px;margin:22px 0 0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;color:var(--text-muted);}
.about-body{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px);}

.about-section{max-width:760px;padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--border);}
.about-section:first-child{border-top:none;padding-top:0;}
.about-section h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(21px,2.2vw,27px);line-height:1.15;letter-spacing:-0.02em;font-weight:500;margin:0 0 12px;}
.about-section .sec-num{font-family:var(--tq-mono);font-size:13px;font-weight:400;letter-spacing:0.1em;color:var(--accent-text,#1c4f9e);}
.about-section p{font-size:15.5px;line-height:1.65;color:var(--text-body);margin:0 0 14px;}
.quote-block{border-left:3px solid var(--accent);background:var(--bg-alt);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:14px 18px;font-size:15px;line-height:1.55;color:var(--text-muted);font-style:italic;}
.about-foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(32px,4vw,48px);padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-alt);}
.about-foot-cta h3{margin:0 0 6px;font-size:clamp(19px,2vw,23px);font-weight:500;letter-spacing:-0.02em;}
.about-foot-cta p{margin:0;font-size:14.5px;color:var(--text-muted);line-height:1.5;}

/* Team-Seite: Founder-Duo. Punktraster im Platzhalter = Echo des
   Partikelfelds der Über-uns-Experience. Echtes Foto später einfach als
   <img src="…" alt="Name"> in .founder-photo legen — CSS deckt es ab. */
.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);max-width:880px;margin:0 auto;}
.founder-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;}
.founder-photo{position:relative;aspect-ratio:4/5;background-color:var(--bg-alt);background-image:radial-gradient(var(--border-strong) 1px,transparent 1.5px);background-size:14px 14px;display:grid;place-items:center;}
.founder-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.founder-monogram{font:500 clamp(56px,7vw,84px)/1 var(--tq-ui);letter-spacing:-0.04em;color:var(--accent-text,#1c4f9e);user-select:none;}
.founder-photo-tag{position:absolute;left:14px;bottom:12px;font-family:var(--tq-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 10px;}
.founder-body{display:flex;flex-direction:column;gap:7px;padding:clamp(18px,2.4vw,26px);}
.founder-role{font-family:var(--tq-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);}
.founder-name{font-size:clamp(19px,2.1vw,23px);font-weight:500;letter-spacing:-0.015em;margin:0;}
.founder-line{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0;}
.founder-mail{font-family:var(--tq-mono);font-size:12.5px;letter-spacing:0.02em;color:var(--text-muted);margin-top:4px;align-self:flex-start;border-bottom:1px solid var(--border-strong);padding-bottom:1px;transition:color .15s,border-color .15s;}
.founder-mail:hover{color:var(--accent-text,#1c4f9e);border-color:var(--accent);}
@media(max-width:720px){.founder-grid{grid-template-columns:1fr;max-width:440px;}}

/* ============================================================================
   PAKET-FINDER v3 — Fragen-Transition, Ergebnisansicht, Plan-Karte
   ============================================================================ */
.wz-anim-out{opacity:0;transform:translateX(-12px);transition:opacity .13s ease,transform .13s ease;}
.wz-anim-in{animation:wzIn .2s ease both;}
@keyframes wzIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}

.wz-loading{padding:34px 8px;text-align:center;color:var(--text-muted);font-size:15px;}
.wz-loading p{margin:14px 0 0;}
.wz-spinner{display:inline-block;width:26px;height:26px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:tq-spin .8s linear infinite;}

.wz-result{display:grid;grid-template-columns:1.08fr 0.92fr;gap:clamp(24px,3.4vw,44px);align-items:start;}
@media(max-width:840px){.wz-result{grid-template-columns:1fr;}}

.wz-res-eyebrow{font-family:var(--tq-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-text,#1c4f9e);margin-bottom:10px;}
.wz-res-title{font-size:clamp(22px,2.6vw,30px);line-height:1.12;letter-spacing:-0.02em;font-weight:500;margin:0 0 18px;text-wrap:balance;}
.wz-reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.wz-reasons li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--text-body);}
.wz-reasons li svg{flex:0 0 auto;margin-top:3px;}
.wz-tip{margin:18px 0 0;padding:13px 16px;border:1px solid var(--info-bd);background:var(--info-bg);border-radius:var(--radius-md);font-size:13.5px;line-height:1.55;color:var(--text-body);}
.wz-capnote{margin:18px 0 0;padding:13px 16px;border:1px solid var(--danger-bd);background:var(--danger-bg);border-radius:var(--radius-md);font-size:13.5px;line-height:1.55;color:var(--text-body);}

.wz-chips-wrap{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-faint);}
.wz-chips-label{font-family:var(--tq-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
.wz-chips{display:flex;flex-wrap:wrap;gap:7px;}
.wz-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font:400 12.5px/1 var(--tq-ui);color:var(--text-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.wz-chip:hover{border-color:var(--accent);color:var(--accent-text,#1c4f9e);}
.wz-chip svg{opacity:.55;}

.wz-plan-card{position:relative;border:1.5px solid var(--accent);border-radius:16px;background:var(--surface);padding:24px 22px 22px;box-shadow:0 20px 48px -30px rgba(11,58,110,0.55);}
.wz-plan-badge{position:absolute;top:-12px;left:18px;background:var(--accent-text,#1c4f9e);color:#fff;font-family:var(--tq-mono);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;}
.wz-plan-name{font-family:var(--tq-mono);font-size:14px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);}
.wz-plan-tagline{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--text-muted);}
.wz-terms{display:flex;gap:6px;margin-top:16px;}
.wz-term{flex:1;padding:7px 4px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);font:500 12.5px/1 var(--tq-ui);color:var(--text-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.wz-term:hover:not([disabled]){border-color:var(--text-faint);color:var(--text);}
.wz-term.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text,#1c4f9e);}
.wz-term[disabled]{opacity:.4;cursor:not-allowed;}
.wz-price-line{display:flex;align-items:baseline;gap:6px;margin-top:16px;}
/* `#qpPreis` startet in quin-plus.html mit `hidden` und wird von quin-abo.js
   erst freigeschaltet, wenn der Preis wirklich geladen ist — sonst stuende
   dort der Platzhalter "CHF — pro Monat".
   Gemessen am 12.08.2026: in aktuellem Chrome greift das auch ohne diese
   Regel, weil das UA-Stylesheet `[hidden]{display:none !important}` setzt und
   damit die normale Autor-Regel darueber schlaegt (nachgewiesen: eine inline
   gesetzte normale `display:flex` bleibt wirkungslos, eine mit `!important`
   gewinnt). Verlassen kann man sich darauf nicht — das `!important` kam erst
   mit `hidden="until-found"`, aeltere Engines setzen die Regel ohne.
   Die Zeile ist deshalb Absicherung, nicht Fehlerbehebung. Sie beendet
   zugleich den Dauer-Fehlalarm des Deploy-Waechters: ein Waechter, der bei
   jedem Lauf dasselbe meldet, wird irgendwann weggesehen. */
.wz-price-line[hidden]{display:none;}
.wz-price-cur{font-size:13.5px;font-weight:500;color:var(--text-faint);}
.wz-price-num{font-size:32px;font-weight:600;letter-spacing:-0.03em;color:var(--text);font-variant-numeric:tabular-nums;}
.wz-price-per{font-size:13.5px;color:var(--text-muted);}
.wz-price-sub{margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--text-faint);}
.wz-save{color:var(--accent-text,#1c4f9e);font-weight:500;}
.wz-price-na{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--text-muted);}
.wz-cta{width:100%;margin-top:18px;padding:13px 18px;font-size:14.5px;}
.wz-cta-sec{width:100%;margin-top:8px;padding:11px 18px;font-size:13.5px;}
.wz-plan-features{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border-faint);display:flex;flex-direction:column;gap:10px;}
.wz-plan-features li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text-body);}
.wz-plan-features li svg{flex:0 0 auto;margin-top:2px;}
.wz-plan-features strong{color:var(--text);font-weight:500;}
.wz-chosen-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
.wz-linkbtn{background:none;border:none;padding:0;font:inherit;font-weight:500;color:var(--accent-text,#1c4f9e);cursor:pointer;border-bottom:1px solid transparent;}
.wz-linkbtn:hover{border-bottom-color:var(--accent);}

.wz-alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:clamp(22px,3vw,32px);}
.wz-alt{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-alt);padding:16px 18px;display:flex;flex-direction:column;gap:5px;}
.wz-alt-label{font-family:var(--tq-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);}
.wz-alt-name{font-size:15.5px;font-weight:500;color:var(--text);}
.wz-alt-note{font-size:13px;line-height:1.5;color:var(--text-muted);}
.wz-alt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;}
.wz-alt-price{font-family:var(--tq-mono);font-size:11.5px;color:var(--text-muted);}

.wz-smallprint{margin:clamp(20px,2.6vw,28px) 0 4px;font-size:12.5px;line-height:1.6;color:var(--text-faint);max-width:720px;}

/* ── Direkteinstieg nach Zahlen (03.09.2026) ─────────────────────────────
   Fabrizio: «sachen wie ich will 100 postfächer haben, dann geht nur dies und
   das paket». Sieben Fragen sind fuer jemanden, der seine Zahlen schon kennt,
   sechs zu viel. Drei Felder, und die Liste sagt, welches Paket reicht und
   welches nicht — die Absage ist hier genauso wichtig wie die Zusage. */
.wzd{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-alt);padding:clamp(20px,2.6vw,28px);}
.wzd-kopf{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-0.015em;color:var(--text);}
.wzd-sub{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--text-muted);max-width:62ch;}
.wzd-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 20px;}
.wzd-feld label{display:block;margin:0 0 6px;font-size:12.5px;color:var(--text-muted);}
.wzd-feld input{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg-elev);color:var(--text);font-family:var(--tq-mono);font-variant-numeric:tabular-nums;font-size:15px;}
.wzd-feld input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.wzd-liste{display:grid;gap:0;}
/* Zeile statt Karte: fuenf Pakete als Kartenraster waren eine Wand, in der die
   eine Aussage — passt / passt nicht — unterging. */
.wzd-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--border-faint);}
.wzd-zeile:first-child{border-top:0;}
.wzd-name{font-size:15px;font-weight:500;color:var(--text);}
.wzd-daten{display:block;margin-top:3px;font-family:var(--tq-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-faint);}
.wzd-preis{font-family:var(--tq-mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-muted);white-space:nowrap;}
/* Das Urteil steht als WORT da. Eine Farbe allein ist keine Aussage. */
.wzd-urteil{font-size:12.5px;font-weight:500;white-space:nowrap;}
.wzd-zeile.passt .wzd-urteil{color:var(--success,#10825A);}
.wzd-zeile.passt-nicht .wzd-urteil{color:var(--text-faint);}
.wzd-zeile.passt-nicht .wzd-name,.wzd-zeile.passt-nicht .wzd-preis{color:var(--text-faint);}
.wzd-zeile.kleinstes{background:color-mix(in oklab,var(--accent) 6%,transparent);border-radius:10px;padding-left:12px;padding-right:12px;}
.wzd-marke{display:inline-block;margin-left:8px;font-family:var(--tq-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text,#1c4f9e);}
.wzd-fuss{margin:18px 0 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.wzd-keins{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-body);}
@media(max-width:640px){
  .wzd-zeile{grid-template-columns:minmax(0,1fr) auto;}
  .wzd-preis{grid-column:1;font-size:12.5px;}
  .wzd-fuss .btn{flex:1 1 auto;justify-content:center;}
}

@media(max-width:640px){
  .wz-plan-card{padding:22px 18px 18px;}
  .wz-terms{flex-wrap:wrap;}
  .wz-term{flex:1 1 44px;}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  [data-reveal]{opacity:1;transform:none;}
}

/* ── Darstellungsfehler behoben 2026-07-21 (gemessene Prüfung) ─────────────── */

/* Fusszeile: `.footer-grid` ist am 12.08.2026 entfallen — Raster und Markup
   stehen jetzt in `assets/fusszeile.css` bzw. `tools/fusszeile_setzen.py`.

   Die Regel hier stammte vom 21.07. und hob den Ueberlapp der Markenspalte
   auf (Spur 155px, Spalte 220px breit). Sie hat aber nur die Spurbreite
   korrigiert, nicht die Ursache: Marke und vier Linkbloecke waren FUENF
   gleichrangige Kinder EINES auto-fit-Rasters, und bei 1220px Inhaltsbreite
   ergibt auto-fit genau VIER Spuren — der fuenfte Block fiel auf jeder
   Desktop-Breite allein in eine zweite Zeile, daneben drei leere Spuren.
   Auf 1440px gemessen: 665px hohe Fusszeile, rund die Haelfte davon Loch.
   Aufgefallen ist es nie, weil der Fix von 21.07. den sichtbaren Ueberlapp
   beseitigt hatte — die Waise sah nach Absicht aus.
   Jetzt hat die Marke eine eigene Spur ausserhalb des Rasters, die vier
   Linkspalten teilen sich vier feste Spuren. Vier in vier kann nicht waisen. */

/* Laufzeit-Umschalter auf /pakete und /vergleich. `white-space:nowrap` plus
   fehlender Umbruch machten die Leiste 445px breit — bei 390px Schirm ragte sie
   79px heraus, "12 Monate −17%" war abgeschnitten und der Rabatt-Badge komplett
   unsichtbar. Ausgerechnet die günstigste Option war auf dem Handy nicht zu sehen.
   Jetzt darf die Leiste umbrechen und die Pillen dürfen schrumpfen. */
@media (max-width: 560px) {
  .tq-seg, .billing-toggle {
    display: flex; flex-wrap: wrap; justify-content: center;
    max-width: 100%; box-sizing: border-box;
  }
  .tq-pill, .billing-toggle button {
    padding: 9px 13px; font-size: 13.5px; flex: 0 1 auto; min-width: 0;
  }
  .tq-pill .save, .billing-toggle .save { font-size: 11px; padding: 2px 6px; }
}

/* Eingabefelder waren kaum als Felder erkennbar: Rahmen #E1E1DA auf weissem
   Grund = 1.31:1, nötig sind 3:1 für Bedienelemente. Der Rahmen ist die einzige
   Abgrenzung — Feldgrund und Seitengrund sind beide weiss.
   Gerechnet, nicht geschätzt: #9AA3AD ergab nur 2.56:1 (erster Versuch, verfehlt),
   #848D99 ergibt 3.36:1 und bleibt trotzdem zurückhaltend. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea {
  border-color: #848D99;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus { border-color:var(--accent); }

/* Fingerziele. Gemessen bei 390px: Punkte im Hero 9×9px (Mittelpunkte nur 19px
   auseinander, die WCAG-Abstandsausnahme greift also nicht), Einwilligungshaken
   17×17px. Beides unter den geforderten 24×24px. */
.hero-dot {
  min-width: 24px; min-height: 24px;
  background-clip: content-box; padding: 7px 0;
}
/* 24×24px ist die Untergrenze aus WCAG 2.2 für Bedienelemente. */
input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }

/* Kontrast: #8A929B lag je nach Grund bei 2.91–3.15:1. Betraf Preiszusätze
   ("CHF 11.70 einmalig für 3 Monate"), alle Platzhalter, Brotkrumen, Labels.
   #6B7480 ergibt 4.54:1 auf Weiss und bleibt optisch zurückhaltend. */
.tq-muted, .price-note, .breadcrumbs a, .section-tag { color: #6B7480; }
/* Eigene Regel: in einer Liste mit gewöhnlichen Selektoren verwerfen manche
   Browser das Ganze, weil sie ::placeholder dort nicht erkennen. */
::placeholder { color: #6B7480; opacity: 1; }

/* Trennzeichen standen auf #E1E1DA = 1.31:1 und waren praktisch unsichtbar. */
.breadcrumbs .sep, .auth-legal .sep { color: #9AA3AD; }

/* Sprunglink (SHOP-22). Fuer Tastaturbedienung: erster Tabstopp der Seite,
   springt an der Navigation vorbei zum Inhalt. Sichtbar erst im Fokus —
   sichtbar fuer alle waere er hier nur Ballast. Nicht mit display:none
   verstecken, das nimmt ihn aus der Tabreihenfolge und macht ihn nutzlos. */
.sprunglink{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--text);
  color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-size:14px;font-weight:500;
  text-decoration:none;}
.sprunglink:focus{left:0;outline:3px solid var(--accent);outline-offset:2px;}

/* Links im Fliesstext unterstreichen (SHOP-22, WCAG 1.4.1). Farbe allein
   reicht nicht: --accent hat gegen den Fliesstext nur 2.29:1, verlangt
   sind 3:1. Die Unterstreichung wirkt zusaetzlich bei Farbenblindheit
   und im Schwarzweissdruck. Nicht fuer Knoepfe, Navigation und
   Fusszeile — die heben sich durch ihre Lage ab. */
p a:not(.btn):not(.tqf-link):not(.hdr-link),
li a:not(.btn):not(.tqf-link):not(.hdr-link),
label a:not(.btn),td a:not(.btn),dd a:not(.btn),
blockquote a:not(.btn),figcaption a:not(.btn),
summary a:not(.btn),.legal-note a:not(.btn){
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.06em;text-decoration-color:currentColor;}
p a:not(.btn):hover,li a:not(.btn):hover,label a:not(.btn):hover,
td a:not(.btn):hover,dd a:not(.btn):hover{text-decoration-thickness:.12em;}

/* KC-14: Kontextzeile auf der Guthaben-Seite. Dort stand eine Reiterleiste
   "Konto-Bereiche", von deren vier Reitern DREI auf my.techq.ch absprangen —
   es sah aus wie das Kundencenter, war es aber nicht. Wer mitten im Kauf auf
   "Rechnungen" klickte, verliess den Shop und musste sich zurueckklicken. */
.gut-kontext{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 16px;margin:0 0 24px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--bg-alt);}