/* Rechtstexte-CRM – Oberfläche.
   Farben und Schrift aus dem Webseiten-Design (design/assets/site.css, DESIGN.md): dunkle Seitenleiste in
   --void mit Gold als Zierlinie, heller Arbeitsbereich in kühlem Grau-Weiß, Bordeaux als Akzent auf Hell.
   Gold nie als Schrift auf Hell. Alle Schriften lokal, keine externen Anfragen.

   Klassen für die Fachmodule: .seite-kopf, .karte, .tabelle, .formular, .feld, .knopf (--haupt, --gefahr, --klein),
   .marke (--ok, --warn, --fehler, --neutral), .leiste, .reiter, .leer, .zwei-spalten.
   Zusätzlich: .kacheln/.kachel, .knopfreihe, .formular__aktionen, .feld--breit, .gedaempft, .nicht-umbrechen,
   .betrag (rechtsbündige Zahl), .liste, .blaettern, .meldung. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format("woff2")}

:root{
  --void:#0c0e11;
  --graphite:#161a1f;
  --graphite-2:#1f242a;
  --on-dark:#f2f3f1;
  --on-dark-mute:#b4bac2;
  --line-dark:rgba(255,255,255,.14);
  --paper:#f2f3f1;
  --white:#fff;
  --ink:#12151a;
  --ink-mute:#4a5159;
  --line:#d9dcd8;
  --control:#6b727b;
  --gold:#ccab44;
  --gold-hi:#f7ef8a;
  --gold-grad:linear-gradient(100deg,#ccab44 0%,#e3c964 55%,#f7ef8a 100%);
  --bordeaux:#7b1f33;
  --bordeaux-dunkel:#5f1727;
  --bordeaux-soft:#f3e4e7;
  --ok:#1d5a2c;      --ok-bg:#e1f0e4;
  --warn:#6b4c00;    --warn-bg:#fbefc8;
  --fehler:#8a1c24;  --fehler-bg:#f8dfe0;
  --neutral:#3a4048; --neutral-bg:#e4e6e8;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px;
  --r-klein:10px;
  --leiste-b:272px;
  --schatten:0 1px 2px rgba(18,21,26,.06),0 6px 20px rgba(18,21,26,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;hyphens:none;font-feature-settings:"cv11","ss03"}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
h3{font-size:1.05rem;font-weight:700;line-height:1.3}
a{color:var(--bordeaux);text-underline-offset:3px}
a:hover{color:var(--bordeaux-dunkel)}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--mono)}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px;border-radius:4px}
.seitenleiste :focus-visible,.kopfzeile :focus-visible,.auth-seite .wortmarke :focus-visible,.sprung:focus-visible{outline-color:var(--gold-hi)}
.inhalt:focus,.auth__karte:focus{outline:none}

.sprung{position:absolute;left:12px;top:-80px;z-index:100;background:var(--gold);color:#15110a;font-weight:700;
  padding:.75rem 1rem;border-radius:8px;text-decoration:none}
.sprung:focus{top:12px}
.unsichtbar{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.gedaempft{color:var(--ink-mute)}
.nicht-umbrechen{white-space:nowrap}
.betrag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ───────── Testbetrieb-Leiste ───────── */
.testleiste{background:#fff3b0;color:#3a2f00;font-size:.9rem;line-height:1.35;text-align:center;padding:.45rem 1rem;
  position:relative;z-index:40}

/* ───────── Grundgerüst: Seitenleiste links, Inhalt rechts ───────── */
.rahmen{display:grid;grid-template-columns:var(--leiste-b) minmax(0,1fr);min-height:100vh}
/* Breite Bildschirme: Die Testleiste bleibt oben stehen, die Seitenleiste beginnt darunter (sonst rutscht „Abmelden“ aus dem Bild). */
@media (min-width:901px){
  .testleiste{position:sticky;top:0;height:2.25rem;padding-block:0;display:flex;align-items:center;justify-content:center;gap:.3em;white-space:nowrap;overflow:hidden}
  .testleiste + .rahmen{min-height:calc(100vh - 2.25rem)}
  .testleiste + .rahmen .seitenleiste{top:2.25rem;height:calc(100vh - 2.25rem)}
}
.kopfzeile,.menue-zu{display:none}
.seitenleiste{background:var(--void);color:var(--on-dark);display:flex;flex-direction:column;gap:1.5rem;
  padding:1.75rem 1rem 1.25rem;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.seitenleiste nav{flex:1}
.wortmarke{display:block;text-decoration:none;color:var(--on-dark);padding:0 .75rem 1.25rem;position:relative}
.wortmarke::after{content:"";position:absolute;left:.75rem;bottom:0;width:44px;height:2px;background:var(--gold-grad)}
.wortmarke:hover{color:var(--on-dark)}
.wortmarke__name{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.wortmarke__zusatz{display:block;margin-top:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.nav{list-style:none;padding:0;display:grid;gap:2px}
.nav a{display:flex;align-items:center;min-height:48px;padding:.5rem .75rem;border-radius:var(--r-klein);
  color:var(--on-dark-mute);text-decoration:none;font-weight:500;border-left:3px solid transparent}
.nav a:hover{background:var(--graphite);color:var(--on-dark)}
.nav a.aktiv{background:var(--graphite-2);color:var(--on-dark);font-weight:600;border-left-color:var(--gold)}
.seitenleiste__fuss{border-top:1px solid var(--line-dark);padding-top:1rem;display:grid;gap:.75rem}
.seitenleiste__nutzer{display:block;padding:.4rem .75rem;border-radius:var(--r-klein);color:var(--on-dark);text-decoration:none;line-height:1.35}
.seitenleiste__nutzer:hover{background:var(--graphite);color:var(--on-dark)}
.seitenleiste__nutzer strong{display:block;font-weight:600}
.seitenleiste__nutzer span{font-size:.85rem;color:var(--on-dark-mute)}
.seitenleiste__fuss form{padding:0 .25rem}
.seitenleiste__fuss .knopf{width:100%}

.inhalt{min-width:0;padding:clamp(1.25rem,3vw,2.5rem) clamp(1rem,3.4vw,3rem) 4rem;max-width:1320px;width:100%}
.inhalt > * + *{margin-top:1.5rem}
.schleier{position:fixed;inset:0;background:rgba(12,14,17,.55);z-index:49}

/* ───────── Seitenkopf: Überschrift links, Aktionen rechts ───────── */
.seite-kopf{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 1.5rem}
.seite-kopf > :first-child{min-width:0;flex:1 1 320px}
.seite-kopf__unter,.seite-kopf p{color:var(--ink-mute);margin-top:.4rem;max-width:70ch}
/* Was rechts neben der Überschrift steht (ein Knopf, mehrere Knöpfe in einem div, ein Formular), bricht um statt die Seite zu sprengen. */
.seite-kopf > :not(:first-child){display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;max-width:100%;min-width:0}

/* ───────── Karte ───────── */
.karte{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,2.2vw,1.6rem);box-shadow:var(--schatten);min-width:0}
.karte > * + *{margin-top:1rem}
.karte h2{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.karte + .karte{margin-top:1.5rem}
.zwei-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}
.zwei-spalten > *{min-width:0;margin-top:0}
.zwei-spalten > .karte{margin-top:0}

/* ───────── Knöpfe ───────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem 1.15rem;
  border:1.5px solid var(--control);border-radius:var(--r-klein);background:var(--white);color:var(--ink);
  font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.knopf:hover{background:#e9ebe8;color:var(--ink);border-color:var(--ink-mute)}
.knopf--haupt{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.knopf--haupt:hover{background:var(--bordeaux-dunkel);border-color:var(--bordeaux-dunkel);color:#fff}
.knopf--gefahr{background:var(--white);border-color:var(--fehler);color:var(--fehler)}
.knopf--gefahr:hover{background:var(--fehler);border-color:var(--fehler);color:#fff}
.knopf--klein{min-height:40px;padding:.4rem .8rem;font-size:.92rem}
.knopf--breit{width:100%}
.knopf--dunkel{background:transparent;border-color:rgba(255,255,255,.35);color:var(--on-dark)}
.knopf--dunkel:hover{background:var(--graphite-2);border-color:var(--on-dark-mute);color:var(--on-dark)}
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.knopf-link{background:none;border:0;padding:.6rem 0;min-height:44px;color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.knopfreihe form{margin:0}

/* ───────── Formulare ───────── */
.formular{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem 1.25rem;align-items:start}
.formular--eine{grid-template-columns:minmax(0,1fr)}
.formular > .knopf,.formular > button{justify-self:start}
.formular > .knopf--breit{justify-self:stretch}
.formular__aktionen,.feld--breit,.formular > fieldset,.formular > h2,.formular > h3,.formular > p,.formular > .leiste{grid-column:1/-1}
.formular__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.feld{display:grid;gap:.35rem;min-width:0;align-content:start}
.feld > label,.feld > span:first-child,label.feld > span{font-weight:600;font-size:.95rem}
.feld small,.feld .hinweis{color:var(--ink-mute);font-size:.88rem;line-height:1.4}
.feld input:not([type=checkbox]):not([type=radio]):not([type=file]),.feld select,.feld textarea,
input.eingabe,select.eingabe,textarea.eingabe{width:100%;min-height:48px;padding:.6rem .8rem;background:var(--white);color:var(--ink);
  border:1.5px solid var(--control);border-radius:var(--r-klein);font-size:1rem;line-height:1.4}
.feld textarea{min-height:120px;resize:vertical}
.feld input[type=file]{width:100%;min-height:48px;padding:.5rem;border:1.5px dashed var(--control);border-radius:var(--r-klein);background:var(--white)}
.feld input[type=checkbox],.feld input[type=radio]{width:22px;height:22px;accent-color:var(--bordeaux);flex:none}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline-offset:1px;border-color:var(--bordeaux)}
.feld input[readonly]{background:#f6f7f5}
.feld input::placeholder,.feld textarea::placeholder{color:#6b727b}
.eingabe-code{font-family:var(--mono);font-size:1.35rem!important;letter-spacing:.14em;text-align:center}
.eingabe-link{font-family:var(--mono);font-size:.92rem!important}
fieldset{border:1px solid var(--line);border-radius:var(--r-klein);padding:1rem;margin:0;min-width:0}
legend{font-weight:700;padding:0 .4rem}

/* ───────── Tabellen ───────── */
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabelle{width:100%;border-collapse:collapse;font-size:.98rem}
.tabelle th,.tabelle td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabelle th{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
  border-bottom:2px solid var(--line);background:#f8f9f7}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover{background:#f8f9f7}
.tabelle td.betrag,.tabelle th.betrag{text-align:right}
.tabelle .knopfreihe{flex-wrap:nowrap}
/* Laptop-Breiten: enger setzen, damit Status und Knöpfe rechts nicht abgeschnitten werden. */
@media (min-width:901px) and (max-width:1500px){
  .tabelle{font-size:.92rem}
  .tabelle th,.tabelle td{padding:.65rem .55rem}
  .tabelle th{white-space:normal;letter-spacing:.03em}
}
/* Ohne Skript (kein .tabelle-rahmen): die Tabelle selbst wird zur wischbaren Fläche. */
@media (max-width:900px){
  :not(.tabelle-rahmen) > .tabelle{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabelle-rahmen > .tabelle{min-width:640px}
}

/* ───────── Plaketten, Leisten, Meldungen ───────── */
.marke{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;line-height:1.35;
  letter-spacing:.01em;white-space:nowrap;background:var(--neutral-bg);color:var(--neutral);vertical-align:middle}
.marke--ok{background:var(--ok-bg);color:var(--ok)}
.marke--warn{background:var(--warn-bg);color:var(--warn)}
.marke--fehler{background:var(--fehler-bg);color:var(--fehler)}
.marke--neutral{background:var(--neutral-bg);color:var(--neutral)}
.leiste{background:var(--warn-bg);color:#3a2f00;border-left:4px solid var(--gold);border-radius:var(--r-klein);padding:.85rem 1rem;line-height:1.5}
.meldungen{display:grid;gap:.6rem}
.meldung{border-radius:var(--r-klein);padding:.85rem 1rem;font-weight:500;border-left:4px solid;line-height:1.45}
.meldung--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.meldung--fehler{background:var(--fehler-bg);color:var(--fehler);border-color:var(--fehler)}
.meldung--hinweis{background:var(--warn-bg);color:#3a2f00;border-color:var(--gold)}

/* ───────── Reiter ───────── */
.reiter{display:flex;gap:.25rem;overflow-x:auto;border-bottom:2px solid var(--line);list-style:none;padding:0;-webkit-overflow-scrolling:touch}
.reiter li{display:flex;margin:0}
.reiter a,.reiter button{display:inline-flex;align-items:center;min-height:48px;padding:.5rem 1rem;margin-bottom:-2px;border:0;border-bottom:3px solid transparent;
  background:none;color:var(--ink-mute);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.reiter a:hover,.reiter button:hover{color:var(--ink);border-bottom-color:var(--control)}
.reiter .aktiv,.reiter [aria-current],.reiter [aria-selected="true"]{color:var(--bordeaux);border-bottom-color:var(--bordeaux)}

/* ───────── Leerzustand, Listen, Blättern ───────── */
.leer{background:var(--white);border:1.5px dashed var(--control);border-radius:var(--r);padding:clamp(1.5rem,4vw,3rem) 1.25rem;text-align:center;color:var(--ink-mute)}
.leer > * + *{margin-top:.75rem}
.leer h2,.leer h3,.leer strong{color:var(--ink)}
.leer p{max-width:60ch;margin-inline:auto}
.liste{padding-left:1.2rem}
.liste li + li{margin-top:.25rem}
.blaettern{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-mute);font-size:.95rem}

/* ───────── Kacheln (Übersicht, Einstellungen) ───────── */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1rem}
.kacheln--liste{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.kachel{display:flex;flex-direction:column;gap:.35rem;min-height:120px;padding:1.15rem 1.25rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--schatten);color:var(--ink);text-decoration:none;border-top:3px solid var(--bordeaux)}
a.kachel:hover{border-color:var(--bordeaux);color:var(--ink);background:#fdfbfb}
.kachel__titel{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.kacheln--liste .kachel__titel{font-size:1.1rem;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.kachel__wert{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kachel__hinweis{color:var(--ink-mute);font-size:.95rem;line-height:1.45}

/* ───────── Anmeldung und schmale Seiten ───────── */
.auth-seite{background:var(--void);background-image:radial-gradient(900px 500px at 85% -10%,rgba(204,171,68,.10),transparent 60%);min-height:100vh}
.auth{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:clamp(1.5rem,6vh,4rem) 1rem 3rem}
.wortmarke--auth{padding:0 0 1rem;text-align:center}
.wortmarke--auth::after{left:50%;transform:translateX(-50%)}
.auth__karte{width:min(100%,460px);background:var(--white);border-radius:20px;padding:clamp(1.25rem,5vw,2.25rem);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.auth__karte--breit{width:min(100%,640px)}
.auth__karte > * + *{margin-top:1rem}
.auth__schritt{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bordeaux)}
.auth__schritt + h1{margin-top:.4rem}
.auth__hilfe{color:var(--ink-mute);font-size:.95rem}
.auth__neben{margin-top:.6rem}
.auth__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.auth__fuss{color:var(--on-dark-mute);font-size:.88rem;text-align:center}
.schritte{list-style:none;padding:0;counter-reset:schritt;display:grid;gap:1.5rem}
.schritte > li{counter-increment:schritt;position:relative;padding-left:3rem;min-width:0}
.schritte > li::before{content:counter(schritt);position:absolute;left:0;top:-.15rem;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--bordeaux);color:#fff;font-weight:700;display:grid;place-items:center}
.schritte > li > * + *{margin-top:.6rem}
.schritte h2{font-size:1.08rem}
.qr{display:block;width:220px;height:220px;border:1px solid var(--line);border-radius:var(--r-klein);background:#fff}
.aufklapp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--bordeaux);font-weight:600}
.aufklapp > * + *{margin-top:.6rem}
.schluessel{font-family:var(--mono);font-size:1.05rem;letter-spacing:.06em;background:#f6f7f5;border:1px solid var(--line);border-radius:var(--r-klein);padding:.7rem .8rem;user-select:all}
.codes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem}
.codes li{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r-klein);background:#f8f9f7}
.codes code{font-size:1.1rem;letter-spacing:.06em;user-select:all;white-space:nowrap}
.codes__nr{color:var(--ink-mute);font-size:.8rem;font-variant-numeric:tabular-nums}

/* ───────── Schmale Bildschirme ───────── */
@media (max-width:900px){
  .rahmen{display:block}
  .zwei-spalten{grid-template-columns:minmax(0,1fr)}
  /* Ohne Skript steht die Navigation offen über dem Inhalt. Mit Skript (html.js) klappt sie von links ein. */
  .seitenleiste{position:static;height:auto;padding:1.25rem 1rem}
  .js .kopfzeile{display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:45;background:var(--void);color:var(--on-dark);padding:.5rem .75rem}
  .js .seitenleiste{position:fixed;inset:0 auto 0 0;z-index:50;width:min(86vw,320px);height:100%;transform:translateX(-102%);visibility:hidden;
    transition:transform .22s cubic-bezier(.22,1,.36,1),visibility 0s .22s}
  .js .menue-offen .seitenleiste{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1)}
  .menue-knopf{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem .9rem;border:1.5px solid rgba(255,255,255,.35);
    border-radius:var(--r-klein);background:transparent;color:var(--on-dark);font-weight:600;cursor:pointer}
  .js .menue-zu{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;min-height:44px;padding:.3rem .9rem;margin:-.5rem 0 -1rem;
    border:1.5px solid rgba(255,255,255,.35);border-radius:var(--r-klein);background:transparent;color:var(--on-dark);font-weight:600;cursor:pointer}
  .menue-knopf__striche{width:18px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
  .marke-klein{color:var(--on-dark);text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:1.1rem;min-height:44px;display:inline-flex;align-items:center;gap:.5rem}
  .marke-klein span{font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--gold)}
  .seite-kopf > .knopf{width:100%}
  .knopfreihe .knopf:not(.knopf--klein){flex:1 1 auto}
}
@media (max-width:520px){
  .codes{grid-template-columns:minmax(0,1fr)}
  .schritte > li{padding-left:0;padding-top:2.6rem}
  .formular__aktionen .knopf{flex:1 1 100%}
}
/* ───────── Handy, hoch und quer (bis 900 px): Tabellen als gestapelte Karten ─────────
   Jede Zeile wird eine Karte, der Tabellenkopf entfällt, die Beschriftung kommt aus data-label am <td>.
   Zellen mit .tabelle__aktionen (Knöpfe) stehen über die ganze Breite. Tabellen mit .tabelle--fest bleiben Tabellen
   (zwei schmale Spalten ohne Kopf). Nichts muss seitlich gewischt werden. Ab 640 px (Handy quer) stehen zwei Karten nebeneinander. */
@media (max-width:900px){
  .tabelle-rahmen{overflow-x:visible}
  .tabelle-rahmen > .tabelle,:not(.tabelle-rahmen) > .tabelle{min-width:0;overflow-x:visible}
  :not(.tabelle-rahmen) > .tabelle.tabelle--fest{display:table}
  .tabelle:not(.tabelle--fest),.tabelle:not(.tabelle--fest) tbody,.tabelle:not(.tabelle--fest) tfoot,
  .tabelle:not(.tabelle--fest) tr,.tabelle:not(.tabelle--fest) td{display:block}
  .tabelle:not(.tabelle--fest) thead{display:none}
  .tabelle:not(.tabelle--fest) tbody tr{background:var(--white);border:1px solid var(--line);border-radius:var(--r-klein);padding:.55rem .8rem}
  .tabelle:not(.tabelle--fest) tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.6rem;align-items:start}
  .tabelle:not(.tabelle--fest) tbody tr:hover{background:var(--white)}
  /* In einer Karte keine Karte in der Karte: dort trennt eine Linie. */
  .karte .tabelle:not(.tabelle--fest) tbody tr{border:0;border-top:1px solid var(--line);border-radius:0;padding:.7rem 0}
  .karte .tabelle:not(.tabelle--fest) tbody tr:first-child{border-top:0;padding-top:0}
  .karte .tabelle:not(.tabelle--fest) tbody{display:block}
  .tabelle:not(.tabelle--fest) td,.tabelle:not(.tabelle--fest) td.betrag{padding:.22rem 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  .tabelle:not(.tabelle--fest) td:empty{display:none}
  .tabelle:not(.tabelle--fest) td[data-label]{display:flow-root;padding-left:7.25rem}
  .tabelle:not(.tabelle--fest) td[data-label]::before{content:attr(data-label);float:left;width:6.75rem;margin-left:-7.25rem;
    font-size:.82rem;font-weight:600;line-height:1.35;padding-top:.15rem;color:var(--ink-mute);text-decoration:none;overflow-wrap:break-word;hyphens:auto}
  .tabelle:not(.tabelle--fest) td.tabelle__aktionen{padding-left:0;padding-top:.45rem}
  .tabelle:not(.tabelle--fest) td.tabelle__aktionen::before{content:none}
  .tabelle .knopfreihe{flex-wrap:wrap}
  .tabelle:not(.tabelle--fest) tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1rem 1rem;margin-top:.6rem;padding:.6rem .8rem;
    border-top:2px solid var(--line)}
  .karte .tabelle:not(.tabelle--fest) tfoot tr{padding-inline:0}
  .tabelle:not(.tabelle--fest) tfoot tr + tr{margin-top:0;border-top:0;padding-top:0}
  .tabelle:not(.tabelle--fest) tfoot td{flex:1 1 auto;padding:0;border:0}
  .tabelle:not(.tabelle--fest) tfoot td:not([data-label]):last-child{flex:0 0 auto;margin-left:auto}
  .tabelle:not(.tabelle--fest) tfoot td[data-label]{flex:1 1 100%}
}

/* ───────── Sprungziele und Felder nicht unter klebenden Leisten ───────── */
html{scroll-padding-top:1rem}
@media (max-width:900px){
  /* Mit Skript klebt die Kopfzeile oben (64 px hoch). */
  html.js{scroll-padding-top:5rem}
}
@media (min-width:901px){
  html{scroll-padding-top:3.25rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ───────── Druck (Notfallcodes, Tabellen) ───────── */
@media print{
  .seitenleiste,.kopfzeile,.testleiste,.sprung,.nicht-drucken,.meldung,.meldungen,.auth__fuss,.schleier{display:none!important}
  body,.auth-seite{background:#fff!important;color:#000}
  .rahmen{display:block}
  .auth{padding:0}
  .wortmarke--auth .wortmarke__name{color:#000}
  .wortmarke--auth .wortmarke__zusatz{color:#333}
  .auth__karte,.karte{box-shadow:none;border:0;width:100%;padding:0}
  .tabelle-rahmen{overflow:visible}
}

/* Hinweis kurz vor dem Ende der Anmeldung (crm.js) */
.sitzung-hinweis{position:fixed;left:50%;transform:translateX(-50%);top:.75rem;z-index:1000;width:min(46rem,calc(100% - 1.5rem));background:#fbf3d9;color:#1b1f24;border:2px solid #b8860b;border-radius:10px;padding:.8rem 1rem;box-shadow:0 6px 24px rgba(0,0,0,.25);line-height:1.45}
.sitzung-hinweis[hidden]{display:none}
.sitzung-hinweis a{font-weight:700}
.sitzung-hinweis .knopf{margin-left:.4rem}