/* =====================================================================================
   LeZo UI 2.0.4 – gemeinsames Designsystem aller LeZo-Produkte
   (lezo.ch, LeZo Büro, LeZo Rapport, LeZo Konto, Toolkits). Chef-Auftrag #940, 05.11.2026.
   Kanonische Quelle: websites/lezo/lezo-ui.css. Apps tragen eine UNVERÄNDERTE Kopie unter
   demselben Namen und laden sie VOR ihrer eigenen CSS. Regeln: strategie/designsystem.md.
   Änderungen nur hier, mit neuer Versionsnummer, danach Kopien in den Apps ersetzen.
   Keine Webfonts, keine externen Dateien, keine Tracker.
   Versionen:
   2.0.4 (06.11.2026, #2416/#2421): (a) Brotkrumen-Links (.brot a, z. B. «LeZo» auf 19 von 22 lezo.ch-Seiten,
         gemessen 30 x 44 px bei 360 px) mindestens 44 x 44 px (Regel 7); Text bleibt linksbündig, damit er
         mit der Überschrift fluchtet, die Tippfläche wächst nach rechts. Ersetzt den lokalen Override #1798 in style.css.
         (b) Druck: Tabellen in .tablewrap (Paketvergleich webseiten.html, Textservice) auf Satzspiegelbreite
         (width 100 %, table-layout fixed, Umbruch erlaubt, overflow sichtbar); vorher wurde die Spalte Mini-Shop
         rechts abgeschnitten (u. a. «bis»). Fusszeile im Druck bleibt ausgeblendet (Entscheid #2416, Option B).
         Apps (Büro, Rapport) nutzen weder .brot noch .tablewrap: für sie ändert sich nichts.
   2.0.3 (06.11.2026, #1501): auch die Links der unteren Fussleiste (.fuss .unten a, z. B. Changelog, Querverweise)
         und Links in Fusszeilen-Absätzen (.fuss p a, z. B. Mail-Adresse auf lezo.ch, gemessen 19 px)
         auf Touch-Geräten und bis 820 px Breite mindestens 44 px hoch (Regel 7). Ersetzt den lokalen Override
         aus #1301 in lezo-rapport/style.css und gilt damit auch für LeZo Büro und LeZo Konto.
   2.0.2 (06.11.2026, #1310 M2): Feldrahmen aus eigenem Token --feldrand (mind. 3:1 gegen Weiss und Seitenhintergrund,
         WCAG 1.4.11). Karten- und Trennlinien (--linie, --linie-stark) bleiben unverändert.
   2.0.1 (06.11.2026, #1220): Fusszeilen-Links (.fuss nav a) auf Touch-Geräten und bis 820 px
         Breite mindestens 44 px hoch (Regel 7). Ersetzt den lokalen Override in style.css.
   2.0.0 (05.11.2026, #940): erste Fassung.
   ===================================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marke (nur Logo und sparsame Akzente) */
  --marke-1:#e2231a;--marke-2:#6a4cff;--marke-3:#16c79a;
  /* Flächen und Text */
  --bg:#f7f8fa;--flaeche:#ffffff;--flaeche-2:#f1f3f7;--flaeche-3:#e8ebf1;
  --linie:#e3e6ec;--linie-stark:#c9cfdb;--feldrand:#7b8497;--feldrand-hover:#5f6a80;
  --text:#151a2d;--text-2:#475069;--text-3:#646c80;
  --ink:#0d1b3d;--ink-2:#1b2f66;
  /* Aktion (eine Akzentfarbe für alle Primäraktionen) */
  --akzent:#5b3df5;--akzent-hover:#4a2de0;--akzent-text:#4527d6;--akzent-weich:#f0edff;--akzent-rand:#cfc5ff;
  --ring:0 0 0 4px rgba(91,61,245,.18);
  /* Status */
  --ok:#0b7a5a;--ok-weich:#e6f6f0;--ok-rand:#a6e0cc;
  --warn:#7a4f00;--warn-weich:#fff5dc;--warn-rand:#f0cf8f;
  --fehler:#c4211a;--fehler-hover:#a51b15;--fehler-weich:#fdecea;--fehler-rand:#f3b5ae;
  --info:#27338a;--info-weich:#eef1ff;--info-rand:#c6d0f5;
  /* Schrift */
  --schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:.8125rem;--fs-s:.875rem;--fs-m:1rem;--fs-l:1.125rem;--fs-xl:1.375rem;
  --fs-2xl:clamp(1.375rem,1.15rem + .9vw,1.875rem);
  --fs-3xl:clamp(2rem,1.35rem + 2.6vw,3.25rem);
  /* Abstände im 4-px-Raster */
  --a1:4px;--a2:8px;--a3:12px;--a4:16px;--a5:20px;--a6:24px;--a8:32px;--a10:40px;--a12:48px;--a16:64px;--a20:80px;
  /* Radien */
  --r-s:8px;--r-m:12px;--r-l:16px;--r-xl:24px;--r-pill:999px;
  /* Schatten */
  --sch-1:0 1px 2px rgba(16,24,40,.06);
  --sch-2:0 6px 18px rgba(16,24,40,.08);
  --sch-3:0 20px 48px rgba(16,24,40,.16);
  /* Bewegung */
  --dauer:.18s;--kurve:cubic-bezier(.2,.7,.2,1);
  /* Masse */
  --breite:1120px;--breite-text:72ch;--kopf-h:64px;--tipp:44px;
  /* Kompatibilität mit älteren Namen (bis alle Produkte umgestellt sind) */
  --navy:var(--ink);--navy2:var(--ink-2);--violet:var(--akzent);--mint:var(--marke-3);--rot:var(--marke-1);
  --grau:var(--text-3);--radius:var(--r-l);
  color-scheme:light;
}
/* Dunkles Farbschema: nur für Seiten, die es ausdrücklich einschalten (<html data-schema="auto">),
   nachdem sie keine festen Farben mehr enthalten und sw-qa sie geprüft hat. */
@media (prefers-color-scheme:dark){
  :root[data-schema="auto"]{
    --bg:#0f1115;--flaeche:#171a21;--flaeche-2:#1e222b;--flaeche-3:#272c37;
    --linie:#2a2f3a;--linie-stark:#3a4150;--feldrand:#8a92a3;--feldrand-hover:#b4bac6;
    --text:#e8eaf0;--text-2:#b4bac6;--text-3:#9aa1b0;
    --ink:#f2f3f7;--ink-2:#c9d0ff;
    --akzent:#8b7bff;--akzent-hover:#a194ff;--akzent-text:#b3a8ff;--akzent-weich:#25213f;--akzent-rand:#4a3fa0;
    --ok:#4fd1a5;--ok-weich:#11302a;--ok-rand:#1f5c4b;
    --warn:#f2c46b;--warn-weich:#33280f;--warn-rand:#6b5520;
    --fehler:#ff7a72;--fehler-hover:#ff958e;--fehler-weich:#3a1716;--fehler-rand:#6e2a27;
    --info:#aab6ff;--info-weich:#1c2140;--info-rand:#353f7a;
    --sch-1:0 1px 2px rgba(0,0,0,.4);--sch-2:0 6px 18px rgba(0,0,0,.4);--sch-3:0 20px 48px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* ---------- 2. Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;font-family:var(--schrift);font-size:var(--fs-m);line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas{max-width:100%}
img{height:auto}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);letter-spacing:-.025em;margin:0 0 var(--a4)}
h2{font-size:var(--fs-2xl);margin:var(--a12) 0 var(--a3)}
h3{font-size:var(--fs-l);margin:var(--a6) 0 var(--a2)}
h4{font-size:var(--fs-m);margin:var(--a4) 0 var(--a2)}
p{margin:0 0 var(--a4)}
a{color:var(--akzent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
::selection{background:var(--akzent-weich);color:var(--ink)}
hr{border:0;border-top:1px solid var(--linie);margin:var(--a8) 0}
code,kbd{font-family:var(--schrift-mono);font-size:.9em}
kbd{background:var(--flaeche-2);border:1px solid var(--linie-stark);border-bottom-width:2px;border-radius:6px;padding:0 6px}
.sr,.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
.hidden{display:none!important}
.skip{position:absolute;left:12px;top:-80px;z-index:999;background:var(--flaeche);color:var(--ink);padding:10px 16px;border-radius:var(--r-m);box-shadow:var(--sch-3);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--a5)}
.small,.hint{font-size:var(--fs-s);color:var(--text-3)}
.muted{color:var(--text-3)}
.lead{font-size:var(--fs-l);color:var(--text-2);max-width:var(--breite-text)}
.ikon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. Marke ---------- */
.marke{display:inline-flex;align-items:center;gap:10px;min-height:var(--tipp);color:var(--ink);text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;white-space:nowrap}
.marke:hover{text-decoration:none}
.marke i{display:inline-block;flex:none;width:28px;height:28px;border-radius:9px;background:conic-gradient(from 200deg,var(--marke-1),var(--marke-2),var(--marke-3),var(--marke-1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.marke .prodname{font-weight:600;font-size:1rem;color:var(--text-2);padding-left:10px;border-left:1px solid var(--linie-stark)}

/* ---------- 4. Kopfzeile (gleich in allen Produkten) ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--linie);padding-top:env(safe-area-inset-top)}
:root[data-schema="auto"] .kopf{background:color-mix(in srgb,var(--flaeche) 86%,transparent)}
.kopf .in{max-width:var(--breite);margin:0 auto;padding:0 var(--a5);min-height:var(--kopf-h);display:flex;align-items:center;gap:var(--a4)}
.kopf nav{display:flex;align-items:center;gap:2px}
.kopf nav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);color:var(--text-2);text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap;transition:background var(--dauer),color var(--dauer)}
.kopf nav a:hover{background:var(--flaeche-2);color:var(--ink)}
.kopf nav a[aria-current="page"],.kopf nav a.on{background:var(--flaeche-3);color:var(--ink);font-weight:600}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:var(--a2)}
@media (max-width:900px){
  .kopf .in{flex-wrap:wrap;padding:6px var(--a4) 0;gap:0 var(--a2)}
  .kopf nav{order:3;flex:1 0 100%;margin:0 calc(-1 * var(--a4));padding:2px var(--a4) 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kopf nav::-webkit-scrollbar{display:none}
  .kopf nav a{padding:6px 12px;min-height:36px;background:var(--flaeche-2);margin-right:6px;font-size:.9rem}
}
@media (max-width:900px) and (pointer:coarse){.kopf nav a{min-height:var(--tipp)}}

/* Runder Symbolknopf (z. B. Warenkorb, Hilfe «?») */
.ikon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--tipp);height:var(--tipp);padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--linie);background:var(--flaeche);color:var(--ink);font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:background var(--dauer),border-color var(--dauer)}
.ikon-btn:hover{background:var(--flaeche-2);border-color:var(--linie-stark);text-decoration:none}
.ikon-btn.rund{padding:0;width:var(--tipp)}
.ikon-btn .zahl{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--flaeche);font-size:.75rem;font-weight:700}
@media (max-width:520px){.ikon-btn .nur-breit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ikon-btn{padding:0 10px}}

/* ---------- 5. Knöpfe ---------- */
.btn{--b-bg:var(--akzent);--b-fg:#fff;--b-rand:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tipp);padding:10px 20px;
  border-radius:var(--r-pill);border:1px solid var(--b-rand);background:var(--b-bg);color:var(--b-fg);
  font:inherit;font-weight:600;font-size:.95rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dauer) var(--kurve),border-color var(--dauer),box-shadow var(--dauer),transform var(--dauer)}
.btn:hover{--b-bg:var(--akzent-hover);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.alt{--b-bg:var(--flaeche);--b-fg:var(--ink);--b-rand:var(--linie-stark)}
.btn.alt:hover{--b-bg:var(--flaeche-2)}
.btn.dunkel{--b-bg:var(--ink);--b-fg:var(--flaeche)}
.btn.dunkel:hover{--b-bg:var(--ink-2)}
.btn.leise{--b-bg:transparent;--b-fg:var(--akzent-text)}
.btn.leise:hover{--b-bg:var(--akzent-weich)}
.btn.gefahr{--b-bg:var(--fehler);--b-fg:#fff}
.btn.gefahr:hover{--b-bg:var(--fehler-hover)}
.btn.gefahr.alt{--b-bg:var(--flaeche);--b-fg:var(--fehler);--b-rand:var(--fehler-rand)}
.btn.gefahr.alt:hover{--b-bg:var(--fehler-weich)}
.btn.hell{--b-bg:#fff;--b-fg:#0d1b3d}
.btn.hell:hover{--b-bg:#eceffe}
.btn.klein{min-height:36px;padding:6px 14px;font-size:var(--fs-s)}
.btn.gross{min-height:52px;padding:14px 28px;font-size:var(--fs-l)}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn.aus,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none}
@media (pointer:coarse){.btn.klein{min-height:var(--tipp)}}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--a2);align-items:center}

/* ---------- 6. Formulare: Label über dem Feld, Hilfe und Fehler darunter ---------- */
.feld{display:block;margin:0 0 var(--a4)}
.feld>label,.feld>.label{display:block;margin:0 0 6px;font-size:var(--fs-s);font-weight:600;color:var(--text)}
.feld .opt{font-weight:400;color:var(--text-3)}
.eingabe,.feld :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  display:block;width:100%;min-height:var(--tipp);padding:10px 14px;font:inherit;color:var(--text);
  background:var(--flaeche);border:1px solid var(--feldrand);border-radius:var(--r-m);
  transition:border-color var(--dauer),box-shadow var(--dauer)}
.feld textarea,textarea.eingabe{min-height:120px;resize:vertical}
.eingabe:hover,.feld :is(input,select,textarea):hover{border-color:var(--feldrand-hover)}
.eingabe:focus,.feld :is(input,select,textarea):focus{outline:none;border-color:var(--akzent);box-shadow:var(--ring)}
.feld [aria-invalid="true"],.eingabe[aria-invalid="true"]{border-color:var(--fehler)}
.feld .hilfe{display:block;margin-top:4px;font-size:var(--fs-s);color:var(--text-3)}
.feld .fehlertext,.fehlertext{display:block;margin-top:4px;font-size:var(--fs-s);font-weight:600;color:var(--fehler)}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tipp);color:var(--text);cursor:pointer}
.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--akzent)}

/* ---------- 7. Karten, Raster, Kennzahlen ---------- */
.card{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:var(--a6)}
.card.klickbar{transition:border-color var(--dauer),box-shadow var(--dauer),transform var(--dauer)}
.card.klickbar:hover{border-color:var(--linie-stark);box-shadow:var(--sch-2);transform:translateY(-2px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--a4)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--a3)}
.kpi{display:block;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:var(--a4);color:inherit;text-decoration:none}
.kpi b{display:block;font-size:1.375rem;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi span{font-size:var(--fs-s);color:var(--text-3)}

/* ---------- 8. Chips (Filter, Schnellwahl) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--a2)}
.chip,.chips>button,.chips>a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--flaeche-2);color:var(--ink);font:inherit;font-size:var(--fs-s);font-weight:500;text-decoration:none;cursor:pointer;transition:background var(--dauer),color var(--dauer)}
.chip:hover,.chips>button:hover,.chips>a:hover{background:var(--flaeche-3)}
.chip[aria-pressed="true"],.chip.an,.chips>button[aria-pressed="true"],.chips>a[aria-current]{background:var(--ink);color:var(--flaeche)}
@media (pointer:coarse){.chip,.chips>button,.chips>a{min-height:var(--tipp)}}

/* ---------- 9. Tags (Status) ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-pill);background:var(--flaeche-3);color:var(--text-2);font-size:.75rem;font-weight:600;white-space:nowrap}
.tag.ok{background:var(--ok-weich);color:var(--ok)}
.tag.warn{background:var(--warn-weich);color:var(--warn)}
.tag.bad,.tag.fehler{background:var(--fehler-weich);color:var(--fehler)}
.tag.info{background:var(--info-weich);color:var(--info)}
.tag.akzent,.tag.neu,.tag.demo{background:var(--akzent-weich);color:var(--akzent-text)}

/* ---------- 10. Meldungen, leere Zustände, Gespeichert-Hinweis ---------- */
.meldung{display:block;padding:12px 16px;margin:var(--a3) 0;border:1px solid var(--info-rand);border-radius:var(--r-m);background:var(--info-weich);color:var(--text);font-size:.95rem}
.meldung.ok{background:var(--ok-weich);border-color:var(--ok-rand)}
.meldung.warn{background:var(--warn-weich);border-color:var(--warn-rand)}
.meldung.fehler{background:var(--fehler-weich);border-color:var(--fehler-rand)}
.meldung>:last-child{margin-bottom:0}
.leer{text-align:center;padding:var(--a10) var(--a5);background:var(--flaeche);border:1px dashed var(--linie-stark);border-radius:var(--r-l);color:var(--text-2)}
.leer h3,.leer strong{display:block;margin:0 0 6px;color:var(--ink);font-size:var(--fs-l)}
.leer p{max-width:520px;margin:6px auto var(--a4)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:900;max-width:calc(100% - 32px);padding:10px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--flaeche);font-size:var(--fs-s);font-weight:600;box-shadow:var(--sch-3)}
.toast.bad{background:var(--fehler);color:#fff}

/* ---------- 11. Tabellen (.tabelle als Rahmen; .karten = Zeilen werden mobil zu Karten) ---------- */
.tabelle{overflow-x:auto;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l)}
.tabelle table{width:100%;border-collapse:collapse;font-size:.95rem}
.tabelle th,.tabelle td{padding:10px 14px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.tabelle thead th{position:sticky;top:0;z-index:1;background:var(--flaeche-2);color:var(--text-2);font-size:var(--fs-s);font-weight:600}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover td{background:color-mix(in srgb,var(--flaeche-2) 55%,transparent)}
.tabelle .num,.tabelle .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .tabelle.karten{border:0;background:transparent;overflow:visible}
  .tabelle.karten table,.tabelle.karten tbody{display:block}
  .tabelle.karten thead{position:absolute;left:-9999px}
  .tabelle.karten tr{display:block;margin:0 0 var(--a3);padding:6px 14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m)}
  .tabelle.karten td{display:flex;justify-content:space-between;gap:12px;padding:8px 0;text-align:right;border-bottom:1px solid var(--linie)}
  .tabelle.karten td:last-child{border-bottom:0}
  .tabelle.karten td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;color:var(--text-3);font-size:var(--fs-s)}
  .tabelle.karten td[data-label=""]::before{display:none}
}

/* ---------- 12. Dialog (Rückfrage) ---------- */
.dialog-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--a4);background:rgba(13,27,61,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dialog,dialog.dialog{width:100%;max-width:480px;max-height:90vh;overflow:auto;padding:var(--a6);border:0;border-radius:var(--r-xl);background:var(--flaeche);color:var(--text);box-shadow:var(--sch-3)}
dialog.dialog::backdrop{background:rgba(13,27,61,.5)}
.dialog h2{margin:0 0 var(--a2);font-size:var(--fs-xl)}
.dialog .knopfreihe,.dialog-btns{display:flex;flex-wrap:wrap;gap:var(--a2);justify-content:flex-end;margin-top:var(--a5)}

/* ---------- 13. Häufige Fragen (details) ---------- */
.faq details{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);margin:0 0 var(--a2);transition:border-color var(--dauer)}
.faq details[open]{border-color:var(--linie-stark)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--a4);min-height:var(--tipp);padding:12px 18px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translateY(-2px);transition:transform var(--dauer)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details>:not(summary){margin:0;padding:0 18px 16px;color:var(--text-2)}

/* ---------- 14. Fusszeile (gleich in allen Produkten) ---------- */
.fuss{margin-top:var(--a16);background:var(--flaeche);border-top:1px solid var(--linie);color:var(--text-2);font-size:var(--fs-s)}
.fuss .in{max-width:var(--breite);margin:0 auto;padding:var(--a10) var(--a5) var(--a6);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--a8)}
.fuss .marke{font-size:1.05rem}
.fuss .marke i{width:24px;height:24px;border-radius:8px}
.fuss p{margin:var(--a2) 0 0;max-width:34ch}
.fuss nav{display:flex;flex-direction:column;gap:2px}
.fuss .titel{margin:0 0 var(--a2);font-weight:600;color:var(--ink);font-size:var(--fs-s)}
.fuss nav a{color:var(--text-2);text-decoration:none;padding:4px 0}
.fuss nav a:hover{color:var(--ink);text-decoration:underline}
@media (pointer:coarse),(max-width:820px){.fuss nav{gap:0}.fuss nav a{display:flex;align-items:center;min-height:var(--tipp);padding:0}.fuss .unten a,.fuss p a{display:inline-flex;align-items:center;min-height:var(--tipp)}}
.fuss .unten{max-width:var(--breite);margin:0 auto;padding:var(--a4) var(--a5) calc(var(--a6) + env(safe-area-inset-bottom));border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--a2);color:var(--text-3);font-size:var(--fs-xs)}
@media (max-width:820px){.fuss .in{grid-template-columns:1fr 1fr}.fuss .in>:first-child{grid-column:1/-1}}
@media (max-width:420px){.fuss .in{grid-template-columns:1fr}}

/* Brotkrumen (2.0.4, #2416): jeder Link mindestens 44 x 44 px, Text linksbündig und vertikal zentriert */
.brot a{display:inline-flex;align-items:center;min-width:var(--tipp);min-height:var(--tipp)}

/* ---------- 15. Druck und reduzierte Bewegung ---------- */
@media print{
  .kopf,.fuss,.skip,.noprint,.toast{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000}
  /* 2.0.4 (#2416): Tabellen nie über den Satzspiegel hinaus (vorher Spalte rechts abgeschnitten) */
  .tablewrap{overflow:visible!important}
  .tablewrap>table{width:100%!important;min-width:0!important;table-layout:fixed}
  .tablewrap>table :is(th,td){overflow-wrap:break-word;hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}