/* Blitzbeleg – Gestaltung.
   Farben, Abstände und Radien stehen als Merkmale ganz oben; im Markup wird
   nie eine feste Farbe benutzt. Dunkles Erscheinungsbild schaltet sich mit
   der Einstellung des Betriebssystems oder von Hand um. */

:root {
  color-scheme: light;

  --marke-900: #14275e;
  --marke-800: #1e3a8a;
  --marke-700: #1d4ed8;
  --marke-600: #2563eb;
  --marke-500: #3b82f6;
  --marke-100: #dbeafe;
  --marke-50:  #eff6ff;
  /* Beschriftung des Feldes, in dem der Schreibzeiger steht. */
  --fokus-text: #1d4ed8;

  --akzent-600: #b45309;
  --akzent-500: #f59e0b;
  --akzent-400: #fbbf24;
  --akzent-50:  #fffbeb;

  --gruen-600: #047857;  /* dunkler als Tailwind-600: Kontrast ≥ 4,5:1 auch auf --gruen-50 */
  --gruen-50:  #ecfdf5;
  --rot-600:   #b91c1c;
  --rot-700:   #b91c1c;  /* Flächen mit weißer Schrift – bleibt auch im Dunkelmodus dunkel */
  --gruen-700: #047857;
  --link:      var(--marke-600);
  --rot-50:    #fef2f2;
  --grau-600:  #475569;

  --grund:        #f6f7fb;
  --flaeche:      #ffffff;
  --flaeche-still:#f1f5f9;
  --flaeche-hoch: #ffffff;
  --linie:        #e2e8f0;
  --linie-stark:  #cbd5e1;
  --text:         #0f172a;
  --text-still:   #56657a;  /* WCAG AA: ≥ 4,5:1 auf Weiß und --flaeche-still */
  --text-leise:   #5f6e82;

  --radius:      14px;
  --radius-klein: 9px;
  --radius-gross: 22px;
  --schatten:      0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --schatten-hoch: 0 10px 30px -12px rgba(15, 23, 42, .22), 0 2px 8px rgba(15,23,42,.05);
  --schatten-menu: 0 18px 45px -12px rgba(15, 23, 42, .3);

  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: "SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --breite-inhalt: 1240px;
}

html[data-thema="dunkel"], :root:has(#thema-dunkel:checked) { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --grund:        #0b1120;
    --flaeche:      #111a2e;
    --flaeche-still:#16203a;
    --flaeche-hoch: #16203a;
    --linie:        #1e293b;
    --linie-stark:  #334155;
    --text:         #e2e8f0;
    --text-still:   #94a3b8;
    --text-leise:   #8291a6;
    --marke-50:     #16233f;
    --fokus-text:   #7dabf8;
    --link:         #7dabf8;
    --gruen-600:    #34d399;
    --akzent-600:   #fbbf24;
    --rot-600:      #f87171;
    --marke-100:    #1d3564;
    --gruen-50:     #06281e;
    --rot-50:       #2b1113;
    --akzent-50:    #2c2109;
    --schatten:      0 1px 2px rgba(0,0,0,.4);
    --schatten-hoch: 0 14px 40px -12px rgba(0,0,0,.6);
    --schatten-menu: 0 18px 45px -12px rgba(0,0,0,.7);
  }
}
html[data-thema="dunkel"] {
  --grund: #0b1120; --flaeche: #111a2e; --flaeche-still: #16203a; --flaeche-hoch: #16203a;
  --linie: #1e293b; --linie-stark: #334155; --text: #e2e8f0; --text-still: #94a3b8;
  --text-leise: #8291a6; --marke-50: #16233f; --marke-100: #1d3564; --fokus-text: #7dabf8;
  --link: #7dabf8; --gruen-600: #34d399; --akzent-600: #fbbf24; --rot-600: #f87171;
  --gruen-50: #06281e; --rot-50: #2b1113; --akzent-50: #2c2109;
  --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten-hoch: 0 14px 40px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--schrift); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 1.85rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1.5rem 0; }
img { max-width: 100%; }

/* ---------- Bausteine ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.05rem; border-radius: var(--radius-klein); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
  background: var(--marke-600); color: #fff; box-shadow: var(--schatten);
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.knopf:hover { background: var(--marke-700); text-decoration: none; color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 2px solid var(--marke-500); outline-offset: 2px; }
.knopf[disabled], .knopf.aus { opacity: .55; pointer-events: none; }
.knopf.stil-still { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf.stil-still:hover { background: var(--flaeche-still); color: var(--text); }
.knopf.stil-leer { background: transparent; color: var(--text-still); box-shadow: none; }
.knopf.stil-leer:hover { background: var(--flaeche-still); color: var(--text); }
.knopf.stil-gefahr { background: var(--rot-700); }
.knopf.stil-gefahr:hover { background: #b91c1c; }
.knopf.stil-akzent { background: var(--akzent-500); color: #1f1300; }
.knopf.stil-akzent:hover { background: var(--akzent-400); color: #1f1300; }
.knopf.klein { padding: .38rem .7rem; font-size: .84rem; }
.knopf.gross { padding: .85rem 1.6rem; font-size: 1rem; }
.knopf.breit { width: 100%; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.karte + .karte { margin-top: 1.1rem; }
.karte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie);
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; font-size: 1rem; }
.karte-inhalt { padding: 1.25rem; }
.karte-fuss { padding: .9rem 1.25rem; border-top: 1px solid var(--linie); background: var(--flaeche-still); border-radius: 0 0 var(--radius) var(--radius); }

.marke-schild {
  display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem;
  border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  background: var(--flaeche-still); color: var(--text-still); border: 1px solid var(--linie);
}
.schild { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.schild-grau  { background: var(--flaeche-still); color: var(--text-still); }
.schild-blau  { background: var(--marke-50); color: var(--marke-700); }
.schild-gruen { background: var(--gruen-50); color: var(--gruen-600); }
.schild-rot   { background: var(--rot-50); color: var(--rot-600); }
.schild-gelb  { background: var(--akzent-50); color: var(--akzent-600); }

/* ---------- Formulare ---------- */

label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .3rem; color: var(--text); }
label .hinweis { font-weight: 400; color: var(--text-still); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=tel], input[type=url], input[type=search], input[type=time], input[type=datetime-local],
input[type=month], input[type=file], select, textarea {
  width: 100%; padding: .58rem .7rem; font: inherit; font-size: .93rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marke-600);
  background: var(--marke-50);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke-500) 26%, transparent);
}
/* Auch die Beschriftung färbt sich mit — so ist auf einen Blick klar, in
   welchem Feld man gerade steht, ohne nach dem blinkenden Strich zu suchen. */
.feld:focus-within > label,
.schalter:focus-within > label { color: var(--fokus-text); }

/* Ankreuzfelder und Schalter haben keine Flaeche, die man einfaerben koennte.
   Also faerbt sich bei ihnen die ganze Zeile — damit auch dort sichtbar ist,
   wo man gerade steht. */
.schalter:focus-within,
.kippe:focus-within {
  background: var(--marke-50);
  border-radius: var(--radius-klein);
  box-shadow: 0 0 0 4px var(--marke-50);
}
input[type=file]:focus { background: var(--marke-50); }
input[type=color] { border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); }
input[type=color]:focus {
  outline: none; border-color: var(--marke-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke-500) 26%, transparent);
}

/* Ein fehlerhaftes Feld bleibt rot, auch wenn man hineinklickt — sonst
   verschwindet der Hinweis genau dann, wenn man ihn braucht. */
input.fehler:focus, select.fehler:focus, textarea.fehler:focus {
  border-color: var(--rot-600);
  background: var(--rot-50);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rot-600) 22%, transparent);
}
.feld:focus-within > label:has(~ .fehler) { color: var(--rot-600); }
input[readonly], input[disabled], select[disabled], textarea[disabled] { background: var(--flaeche-still); color: var(--text-still); }
textarea { min-height: 90px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem;
}
.feld { margin-bottom: 1rem; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
.feld-hinweis { font-size: .8rem; color: var(--text-still); margin-top: .3rem; }
.feld-fehler { font-size: .82rem; color: var(--rot-600); margin-top: .3rem; }
input.fehler, select.fehler, textarea.fehler { border-color: var(--rot-600); }
.schalter { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.schalter input { margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--marke-600); flex: none; }
.schalter label { margin: 0; font-weight: 500; }
.zahl-feld { text-align: right; font-variant-numeric: tabular-nums; }

/* Umschalter im Stil eines Kippschalters */
.kippe { position: relative; display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; }
.kippe input { position: absolute; opacity: 0; width: 0; height: 0; }
.kippe .spur {
  width: 40px; height: 23px; border-radius: 999px; background: var(--linie-stark);
  position: relative; transition: background .18s; flex: none;
}
.kippe .spur::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.kippe input:checked + .spur { background: var(--marke-600); }
.kippe input:checked + .spur::after { transform: translateX(17px); }
.kippe input:focus-visible + .spur { outline: 2px solid var(--marke-500); outline-offset: 2px; }

/* ---------- Tabellen ---------- */

.tabelle-rahmen { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.liste th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-still); font-weight: 600; padding: .6rem .85rem; border-bottom: 1px solid var(--linie);
  white-space: nowrap; background: var(--flaeche);
}
table.liste td { padding: .7rem .85rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--flaeche-still); }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste td.eng, table.liste th.eng { width: 1%; white-space: nowrap; }
table.liste a.zeile { color: var(--text); font-weight: 600; }
table.liste a.zeile:hover { color: var(--marke-600); }

.leer-hinweis { text-align: center; padding: 3rem 1.5rem; color: var(--text-still); }
.leer-hinweis .zeichen { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .6; }
.leer-hinweis .titel { display: block; font-size: 1.05rem; font-weight: 650; color: var(--text); margin-bottom: .3rem; }
.leer-hinweis .satz { display: block; max-width: 42ch; margin: 0 auto; line-height: 1.55; }

/* ---------- Meldungen ---------- */

.meldung {
  display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--flaeche); margin-bottom: 1rem; font-size: .92rem;
}
.meldung-erfolg { background: var(--gruen-50); border-color: color-mix(in srgb, var(--gruen-600) 30%, transparent); color: var(--gruen-600); }
.meldung-fehler { background: var(--rot-50); border-color: color-mix(in srgb, var(--rot-600) 30%, transparent); color: var(--rot-600); }
.meldung-hinweis { background: var(--marke-50); border-color: color-mix(in srgb, var(--marke-600) 25%, transparent); color: var(--marke-700); }
.meldung-warnung { background: var(--akzent-50); border-color: color-mix(in srgb, var(--akzent-500) 35%, transparent); color: var(--akzent-600); }
.meldung strong { font-weight: 700; }

/* ---------- Anwendungsrahmen ---------- */

.rahmen { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.seitenleiste {
  background: var(--flaeche); border-right: 1px solid var(--linie); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenleiste .kopf { padding: 1.1rem 1.1rem .7rem; }
.seitenleiste .kopf img { height: 30px; width: auto; }
.firmenwahl {
  margin: 0 .8rem .8rem; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche-still); font-size: .85rem; display: flex; align-items: center; gap: .5rem;
}
.firmenwahl .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.hauptmenue { padding: 0 .6rem 1rem; flex: 1; }
nav.hauptmenue .gruppe { margin-top: 1.1rem; }
nav.hauptmenue .gruppe-titel {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-leise);
  font-weight: 700; padding: 0 .6rem .35rem;
}
nav.hauptmenue a {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: var(--radius-klein);
  color: var(--text-still); font-weight: 500; font-size: .92rem; margin-bottom: 1px;
}
nav.hauptmenue a:hover { background: var(--flaeche-still); color: var(--text); text-decoration: none; }
nav.hauptmenue a.aktiv { background: var(--marke-50); color: var(--marke-700); font-weight: 600; }
nav.hauptmenue a .symbol { width: 18px; height: 18px; flex: none; opacity: .85; }
nav.hauptmenue a .zaehler {
  margin-left: auto; font-size: .74rem; font-weight: 700; background: var(--rot-50); color: var(--rot-600);
  border-radius: 999px; padding: .05rem .4rem;
}
.seitenleiste .fuss { padding: .8rem; border-top: 1px solid var(--linie); font-size: .84rem; }

.inhalt { min-width: 0; display: flex; flex-direction: column; }
.kopfleiste {
  display: flex; align-items: center; gap: 1rem; padding: .8rem 1.6rem;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px);
}
.kopfleiste .titel { font-size: 1.05rem; font-weight: 700; margin: 0; }
.kopfleiste .rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.seite { padding: 1.6rem; max-width: var(--breite-inhalt); width: 100%; }
.seiten-kopf { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.seiten-kopf .beschreibung { color: var(--text-still); margin: .2rem 0 0; }
.seiten-kopf .werkzeuge { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.menue-knopf { display: none; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.05rem 1.2rem; box-shadow: var(--schatten); }
.kennzahl .beschriftung { font-size: .8rem; color: var(--text-still); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.kennzahl .wert { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.kennzahl .fuss { font-size: .8rem; color: var(--text-still); margin-top: .15rem; }
.kennzahl.betont { background: linear-gradient(135deg, var(--marke-800), var(--marke-600)); color: #fff; border-color: transparent; }
.kennzahl.betont .beschriftung, .kennzahl.betont .fuss { color: rgba(255,255,255,.82); }

.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; align-items: start; }
.raster-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; align-items: start; }

/* Reiter */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.2rem; overflow-x: auto; }
.reiter a {
  padding: .55rem .9rem; font-size: .9rem; font-weight: 600; color: var(--text-still);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { color: var(--marke-600); border-bottom-color: var(--marke-600); }

/* Filterzeile */
.filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter input, .filter select { width: auto; min-width: 150px; }
.filter .suche { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.filter .suche input { width: 100%; padding-left: 2.1rem; }
.filter .suche svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); opacity: .5; }

/* Ausklappmenü */
.menue { position: relative; }
.menue > .liste {
  position: absolute; right: 0; top: calc(100% + .4rem); min-width: 210px; z-index: 40;
  background: var(--flaeche-hoch); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  box-shadow: var(--schatten-menu); padding: .35rem; display: none;
}
.menue.offen > .liste { display: block; }
.menue .liste a, .menue .liste button {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .45rem .6rem; border-radius: 7px; font-size: .9rem; color: var(--text);
  background: none; border: 0; font: inherit; cursor: pointer;
}
.menue .liste a:hover, .menue .liste button:hover { background: var(--flaeche-still); text-decoration: none; }
.menue .liste .trenner { height: 1px; background: var(--linie); margin: .35rem 0; }
.menue .liste .gefahr { color: var(--rot-600); }

/* Positionsbearbeitung */
.positionen { width: 100%; border-collapse: collapse; }
.positionen th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-still);
  text-align: left; padding: .4rem .5rem; font-weight: 600;
}
.positionen td { padding: .3rem .3rem; vertical-align: top; }
.positionen input, .positionen select, .positionen textarea { font-size: .9rem; padding: .45rem .55rem; }
.positionen .griff { cursor: grab; color: var(--text-leise); padding-top: .7rem; }
.positionen tr.position { border-bottom: 1px solid var(--linie); }
.summen { margin-left: auto; width: min(360px, 100%); }
.summen .zeile { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .95rem; }
.summen .zeile.gesamt { border-top: 2px solid var(--text); margin-top: .4rem; padding-top: .6rem; font-size: 1.15rem; font-weight: 700; }
.summen .zahl { font-variant-numeric: tabular-nums; }

/* Vorschlagsliste */
.vorschlaege {
  position: absolute; z-index: 50; background: var(--flaeche-hoch); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); box-shadow: var(--schatten-menu); max-height: 260px; overflow-y: auto; min-width: 260px;
}
.vorschlaege div { padding: .5rem .7rem; cursor: pointer; font-size: .9rem; }
.vorschlaege div:hover, .vorschlaege div.aktiv { background: var(--marke-50); }
.vorschlaege .zweit { color: var(--text-still); font-size: .82rem; }

/* Fortschritt */
.balken { height: 8px; border-radius: 999px; background: var(--flaeche-still); overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--marke-600); border-radius: 999px; }

/* ---------- Öffentliche Seiten ---------- */

.oeffentlich { background: var(--flaeche); }
.oeffentlich .band { max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 1.5rem; }
header.oben {
  position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie);
}
header.oben .band { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
header.oben img.logo { height: 34px; }
header.oben nav { display: flex; gap: 1.4rem; margin-left: 1rem; }
header.oben nav a { color: var(--text-still); font-weight: 600; font-size: .93rem; }
header.oben nav a:hover { color: var(--text); text-decoration: none; }
header.oben .rechts { margin-left: auto; display: flex; align-items: center; gap: .7rem; }

.held { padding: 6.5rem 0 5rem; position: relative; overflow: hidden; }
.held::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: 0;
  background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--marke-500) 16%, transparent), transparent 70%),
              radial-gradient(45% 45% at 80% 10%, color-mix(in srgb, var(--akzent-400) 14%, transparent), transparent 70%);
}
.held .band { position: relative; z-index: 1; }
.held h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.035em; line-height: 1.03; max-width: 15ch; }
.held h1 .betont { background: linear-gradient(120deg, var(--marke-700), var(--marke-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Der Blitz sitzt auf der Grundlinie der Zeile „Blitzschnell." und wächst mit
   der Schriftgröße mit (1em), damit er auf jedem Bildschirm gleich wirkt. */
.held h1 .blitz {
  display: inline-block; vertical-align: -.06em; margin-left: .22em;
  transform: rotate(-8deg); filter: drop-shadow(0 2px 6px rgba(245, 158, 11, .35));
  animation: blitz-an .5s .25s both;
}
@keyframes blitz-an {
  from { opacity: 0; transform: rotate(-24deg) scale(.6); }
  to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .held h1 .blitz { animation: none; } }
.held .vorspann { font-size: 1.2rem; line-height: 1.6; color: var(--text-still); max-width: 52ch; margin-top: 1.4rem; }
.held .knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.held .beleg { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; color: var(--text-still); font-size: .9rem; }
.held .beleg span { display: flex; align-items: center; gap: .4rem; }

.abschnitt { padding: 5.5rem 0; }
.abschnitt.still { background: var(--grund); color: var(--text); }  /* „still" heißt hier nur: anderer Hintergrund */
.abschnitt-kopf { text-align: center; max-width: 60ch; margin: 0 auto 3.4rem; }
.abschnitt-kopf h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.025em; line-height: 1.12; }
.abschnitt-kopf p { color: var(--text-still); font-size: 1.08rem; line-height: 1.6; margin-top: .7rem; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 1.75rem; box-shadow: var(--schatten);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: color-mix(in srgb, var(--marke-500) 35%, var(--linie)); }
.kachel .symbol {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--marke-50); color: var(--marke-600);
}
.kachel h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.kachel p { color: var(--text-still); margin: 0; font-size: .95rem; line-height: 1.6; }

.preistafel { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: .9rem; align-items: stretch; }
.preistafel .preis { padding: 1.4rem 1.1rem; }
.preistafel .preis .zahl { font-size: 2.1rem; }
.preistafel .preis ul { font-size: .87rem; gap: .45rem; }
.preis {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 1.8rem 1.5rem; display: flex; flex-direction: column; box-shadow: var(--schatten); position: relative;
}
.preis.empfohlen { border-color: var(--marke-600); box-shadow: var(--schatten-hoch); }
.preis .fahne {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--marke-600); color: #fff; font-size: .74rem; font-weight: 700;
  padding: .25rem .8rem; border-radius: 999px; letter-spacing: .02em;
}
.preis h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.preis .zahl { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.preis .zahl small { font-size: .95rem; font-weight: 600; color: var(--text-still); }
.preis .beschreibung { color: var(--text-still); font-size: .93rem; min-height: 3em; }
.preis ul { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .55rem; font-size: .92rem; }
.preis li { display: flex; gap: .55rem; align-items: flex-start; }
.preis li svg { flex: none; margin-top: .2rem; color: var(--gruen-600); }
.preis .knopf { margin-top: auto; }

.fragen { max-width: 800px; margin: 0 auto; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--marke-600); font-size: 1.3rem; line-height: 1; }
.frage[open] summary::after { content: "–"; }
.frage .antwort { padding-bottom: 1.2rem; color: var(--text-still); }

footer.unten { background: var(--grund); border-top: 1px solid var(--linie); padding: 3.5rem 0 2rem; }

/* Die Spalten stehen fest — vorher stand hier `1.4fr repeat(auto-fit, …)`.
   Das ist ungültig: Neben einer auto-Wiederholung darf keine weitere
   flexible Spur stehen. Browser verwerfen dann die ganze Angabe, und aus
   vier Spalten wurde eine schmale Säule am linken Rand. */
footer.unten .spalten {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 2.5rem 2rem;
}
@media (max-width: 940px) { footer.unten .spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.unten .spalten { grid-template-columns: 1fr; gap: 1.8rem; } }

footer.unten .marke p { max-width: 34ch; }
footer.unten .fuss-titel {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise); margin-bottom: .5rem;
}
footer.unten a {
  display: block; color: var(--text-still); font-size: .92rem; padding: .22rem 0;
  width: fit-content; text-decoration: none;
}
footer.unten a:hover { color: var(--marke-600); text-decoration: underline; }
footer.unten .siegel {
  display: flex; gap: .45rem; align-items: center; margin-top: 1.1rem;
  font-size: .82rem; color: var(--text-still);
}
footer.unten .siegel svg { color: var(--gruen-600); flex: none; }
footer.unten .schluss {
  margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--linie);
  display: flex; gap: .35rem 1rem; flex-wrap: wrap; align-items: center;
  color: var(--text-leise); font-size: .86rem;
}
footer.unten .schluss .trenner { opacity: .5; }

/* Anmeldeseiten */
.tor { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: 2rem 1rem; background: var(--grund); }
.tor .kasten { width: 100%; max-width: 430px; }
.tor .kasten .karte { border-radius: var(--radius-gross); }
.tor .logo { display: block; margin: 0 auto 1.6rem; height: 42px; }
.tor .wechsel { text-align: center; margin-top: 1.2rem; color: var(--text-still); font-size: .92rem; }

/* ---------- Einrichtung in drei Schritten ----------
   Der Assistent braucht mehr Platz als das Anmeldeformular. */
.tor .kasten:has(.einrichtung) { max-width: 760px; }
.schrittleiste { margin-bottom: 1.4rem; }
.schrittleiste .zeile { display: flex; gap: .6rem; margin-bottom: .6rem; }
.schrittleiste .zeile span { flex: 1; height: 5px; border-radius: 999px; background: var(--flaeche-still); }
.schrittleiste .zeile span.aktiv { background: var(--marke-600); }
.schrittleiste .zeile span.erledigt { background: color-mix(in srgb, var(--marke-600) 45%, transparent); }
.schrittleiste .text { display: flex; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--text-still); }
.schrittleiste .text strong { color: var(--text); font-weight: 600; }

/* Die acht Stile in Schritt 2 */
.stilwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
.stilwahl label { display: block; cursor: pointer; border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein); padding: .7rem; background: var(--flaeche);
  transition: border-color .15s, box-shadow .15s; }
.stilwahl label:hover { border-color: var(--marke-500); }
.stilwahl input { position: absolute; opacity: 0; pointer-events: none; }
.stilwahl input:checked + .inhalt { color: var(--marke-600); }
.stilwahl label:has(input:checked) { border-color: var(--marke-600); box-shadow: 0 0 0 3px var(--marke-50); }
.stilwahl .streifen { display: flex; gap: 3px; margin-bottom: .5rem; }
.stilwahl .streifen i { display: block; height: 22px; flex: 1; border-radius: 4px; }
.stilwahl .name { font-weight: 600; font-size: .88rem; }
.stilwahl .was { display: block; font-size: .74rem; font-weight: 400; color: var(--text-still);
  line-height: 1.4; margin-top: .15rem; }
.stilwahl .name { display: block; }

/* Rechtstexte und Hilfetexte */
.fliesstext { max-width: 760px; }
.fliesstext h2 { margin-top: 2.2rem; font-size: 1.25rem; }
.fliesstext h3 { margin-top: 1.6rem; font-size: 1.02rem; }
.fliesstext ul, .fliesstext ol { padding-left: 1.2rem; }
.fliesstext li { margin-bottom: .35rem; }
.fliesstext table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.fliesstext th, .fliesstext td { border: 1px solid var(--linie); padding: .5rem .7rem; text-align: left; }

/* Hilfsklassen */
.still { color: var(--text-still); }
.leise { color: var(--text-leise); }
.klein { font-size: .85rem; }
.fett { font-weight: 700; }
.rechts { text-align: right; }
.mitte { text-align: center; }
.zahl { font-variant-numeric: tabular-nums; }
.abstand-oben { margin-top: 1.2rem; }
.abstand-unten { margin-bottom: 1.2rem; }
.reihe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.reihe.eng { gap: .35rem; }
.wachsen { flex: 1; }
.verbergen { display: none !important; }
.nur-druck { display: none; }

@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste {
    position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 60; transform: translateX(-100%);
    transition: transform .2s; box-shadow: var(--schatten-menu);
  }
  body.menue-offen .seitenleiste { transform: none; }
  body.menue-offen::after { content: ""; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 50; }
  .menue-knopf { display: inline-flex; }
  .seite { padding: 1.1rem; }
  header.oben nav { display: none; }
}

@media print {
  .seitenleiste, .kopfleiste, .werkzeuge, header.oben, footer.unten { display: none !important; }
  body { background: #fff; }
  .seite { padding: 0; }
  .nur-druck { display: block; }
}

/* Demo-Band: soll auffallen, ohne die Seite zu erschlagen. */
.demo-band { border-left: 4px solid var(--akzent-500); }

/* ── Suche über alles ────────────────────────────────────────────────────
   Ein Feld in der Kopfleiste, das Belege, Kunden, Artikel, Projekte und
   Ausgaben gleichzeitig durchsucht. Die Treffer erscheinen darunter. */
.suchfeld { position: relative; flex: 1; max-width: 380px; margin: 0 1rem; }
.suchfeld > svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; }
.suchfeld input {
  width: 100%; padding: .45rem .7rem .45rem 2.1rem; font-size: .9rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche-still);
}
.suchfeld input:focus { background: var(--flaeche); }
.suchfeld .treffer {
  position: absolute; left: 0; right: 0; top: calc(100% + .45rem); z-index: 60;
  background: var(--flaeche-hoch); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-menu); max-height: 70vh; overflow-y: auto; padding: .35rem;
}
.suchfeld .treffer h4 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-leise);
  padding: .55rem .7rem .25rem;
}
.suchfeld .treffer a {
  display: block; padding: .45rem .7rem; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; font-size: .9rem;
}
.suchfeld .treffer a:hover, .suchfeld .treffer a.aktiv { background: var(--marke-50); }
.suchfeld .treffer a .zusatz { display: block; font-size: .78rem; color: var(--text-still); }
.suchfeld .treffer .leer { padding: 1rem .7rem; color: var(--text-still); font-size: .9rem; }
@media (max-width: 900px) { .suchfeld { display: none; } }

/* ── Übersicht ───────────────────────────────────────────────────────────
   Schnellzugriff, Fortschritt der ersten Schritte und der Umsatzverlauf.
   Der Verlauf ist bewusst reines HTML: ein paar Balken brauchen keine
   Diagrammbibliothek, und die Farben folgen von allein dem dunklen Modus. */

.schnellzugriff { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

.fortschritt { height: 6px; border-radius: 999px; background: var(--flaeche-still); overflow: hidden; }
.fortschritt span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--marke-600), var(--marke-500));
  transition: width .3s;
}

ol.schritte { list-style: none; display: grid; gap: .9rem; counter-reset: schritt; }
ol.schritte li { display: flex; gap: .75rem; align-items: flex-start; }
ol.schritte .haken {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche-still); color: var(--text-leise);
}
ol.schritte li.fertig .haken { background: var(--gruen-50); color: var(--gruen-600); }
ol.schritte li.fertig > div > strong { color: var(--text-still); text-decoration: line-through; }
ol.schritte a { text-decoration: none; }
ol.schritte a:hover strong { text-decoration: underline; }

.verlauf { display: flex; gap: .7rem; }
.verlauf .achse {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: .68rem; color: var(--text-leise); padding-bottom: 1.3rem;
  height: 178px; text-align: right; white-space: nowrap;
}
.verlauf .balken { display: flex; align-items: flex-end; gap: 6px; flex: 1; height: 178px; border-radius: 0; background: none; overflow: visible; }
.verlauf .monat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.verlauf .saeule {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--linie);
}
.verlauf .saeule > div {
  width: 100%; border-radius: 5px 5px 0 0; transition: filter .15s;
  background: linear-gradient(180deg, var(--marke-500), var(--marke-700));
}
.verlauf .saeule:hover > div { filter: brightness(1.15); }
.verlauf .monat > span { font-size: .68rem; color: var(--text-leise); }

/* ── Startseite: neue Bausteine ──────────────────────────────────────────
   Augenbraue über jeder Überschrift, Normenband unter dem Kopf, nummerierte
   Schritte mit Verbindungslinie und ein Bild mit Text darüber. Alles ohne
   Fremdbibliothek — die Seite soll schnell bleiben. */

.augenbraue {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .9rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--link);
}
.abschnitt-kopf .augenbraue { justify-content: center; }

/* Normen und Siegel statt erfundener Kundenlogos. */
.normen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.2rem;
  padding: 1.6rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  color: var(--text-leise); font-size: .84rem; font-weight: 600; letter-spacing: .02em;
}
.normen span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.normen svg { color: var(--marke-500); }

/* Nummerierte Schritte mit durchgehender Linie dahinter. */
.schrittfolge { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; position: relative; }
.schrittfolge::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 26px; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--linie-stark), transparent);
}
@media (max-width: 860px) { .schrittfolge::before { display: none; } }
.schrittfolge > div { position: relative; z-index: 1; text-align: center; }
.schrittfolge .nummer {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.1rem;
  background: var(--flaeche); border: 2px solid var(--marke-500); color: var(--marke-600);
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 6px var(--grund);
}
.schrittfolge h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.schrittfolge p { color: var(--text-still); font-size: .95rem; line-height: 1.6; margin: 0; }

/* Großes Bild mit Text darüber. */
.bildband {
  position: relative; border-radius: var(--radius-gross); overflow: hidden;
  min-height: 340px; display: grid; align-items: end; box-shadow: var(--schatten-hoch);
}
.bildband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Zwei Verläufe übereinander: einer von unten, einer von links. So bleibt die
   Schrift lesbar, egal wie hell das Foto an dieser Stelle gerade ist. */
.bildband .schleier {
  position: relative; padding: 2.6rem 2.2rem 2.2rem; color: #fff;
  background:
    linear-gradient(90deg, rgba(9,15,32,.9) 0%, rgba(9,15,32,.55) 45%, rgba(9,15,32,.1) 75%),
    linear-gradient(0deg, rgba(9,15,32,.85) 0%, rgba(9,15,32,.45) 55%, rgba(9,15,32,0) 100%);
}
.bildband h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; max-width: 22ch; }
.bildband p { color: rgba(255,255,255,.86); max-width: 56ch; margin-top: .7rem; line-height: 1.6; }
.bildband .augenbraue { color: var(--akzent-400); }
.bildband .quelle {
  position: absolute; right: .7rem; top: .7rem; font-size: .68rem; color: rgba(255,255,255,.75);
  background: rgba(9,15,32,.45); padding: .15rem .5rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.bildband .quelle a { color: inherit; }

/* Bento: eine große Kachel, der Rest normal. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; }
.bento > * { grid-column: span 2; }
.bento > .weit { grid-column: span 3; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento > *, .bento > .weit { grid-column: span 2; } }
@media (max-width: 620px)  { .bento { grid-template-columns: 1fr; } .bento > *, .bento > .weit { grid-column: span 1; } }

/* Branchenstreifen auf der Startseite */
.branchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem 2rem; }
.branchen > div { display: flex; gap: .85rem; }
.branchen .symbol {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--marke-50); color: var(--marke-600);
}
.branchen h3 { font-size: 1rem; margin-bottom: .2rem; }
.branchen p { font-size: .92rem; color: var(--text-still); margin: 0; }

/* ── Startseite: Bilder und Programmfenster ──────────────────────────────
   Die „Fenster" sind reines HTML, keine Bildschirmfotos: Sie bleiben in
   jeder Aufloesung scharf, folgen dem hellen wie dem dunklen Modus und
   veralten nicht, sobald sich die Oberflaeche aendert. */

.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .held-raster { grid-template-columns: 1fr; gap: 2.5rem; } }

.fenster {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); overflow: hidden;
}
.fenster > .leiste {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
  background: var(--flaeche-still); border-bottom: 1px solid var(--linie);
}
.fenster > .leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); }
.fenster > .leiste .pfad {
  margin-left: .5rem; font-size: .75rem; color: var(--text-still);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: .12rem .7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenster > .inhalt { padding: 1.1rem 1.2rem; }
.fenster.gekippt { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
@media (max-width: 900px) { .fenster.gekippt { transform: none; } }

/* Foto mit Bildunterschrift */
figure.bild { margin: 0; }
figure.bild img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-gross);
  border: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
}
figure.bild figcaption { margin-top: .7rem; font-size: .82rem; color: var(--text-leise); }

/* Gegenueberstellung vorher/nachher */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .gegenueber { grid-template-columns: 1fr; } }
.gegenueber > div {
  border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.5rem; background: var(--flaeche);
}
.gegenueber > div.vorher { background: var(--flaeche-still); }
.gegenueber h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin-bottom: .9rem; }
.gegenueber ul { list-style: none; display: grid; gap: .55rem; }
.gegenueber li { display: flex; gap: .55rem; font-size: .93rem; color: var(--text-still); }
.gegenueber li b { color: var(--text); font-weight: 600; }
.gegenueber .vorher li::before { content: "×"; color: var(--rot-600); font-weight: 700; flex: none; width: 1rem; }
.gegenueber .nachher li::before { content: "✓"; color: var(--gruen-600); font-weight: 700; flex: none; width: 1rem; }

/* Vertrauensleiste */
.saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem 2rem; }
.saeulen > div { display: flex; gap: .8rem; }
.saeulen .symbol { color: var(--marke-600); flex: none; margin-top: .1rem; }
.saeulen h3 { font-size: .98rem; margin-bottom: .25rem; }
.saeulen p { font-size: .9rem; color: var(--text-still); margin: 0; }

/* ── Marke ───────────────────────────────────────────────────────────────
   Der Schriftzug kommt zweimal ins Dokument: einmal mit dunkler Schrift für
   helle Flächen, einmal mit heller für dunkle. Sichtbar ist immer nur einer.
   Warum nicht per JavaScript umschalten: Dann blitzt beim Laden kurz das
   falsche Logo auf. Warum am Dateiende: Die Regeln müssen die früheren
   .tor-.logo-Regeln überstimmen, und bei gleicher Gewichtung gewinnt die
   spätere. Reihenfolge hier: erst Systemvorgabe, dann die ausdrückliche
   Wahl des Nutzers — die soll gewinnen. */
.logo.logo-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .logo.logo-hell   { display: none; }
  :root:not([data-thema="hell"]) .logo.logo-dunkel { display: block; }
}

html[data-thema="dunkel"] .logo.logo-hell   { display: none; }
html[data-thema="dunkel"] .logo.logo-dunkel { display: block; }
html[data-thema="hell"]   .logo.logo-hell   { display: block; }
html[data-thema="hell"]   .logo.logo-dunkel { display: none; }

/* Im Druck immer die dunkle Schrift auf weißem Papier. */
@media print {
  .logo.logo-hell   { display: block !important; }
  .logo.logo-dunkel { display: none !important; }
}

/* ---------- Belegvorlagen: Übersicht und Editor ---------- */

/* Ein Blatt Papier: weiß, leichter Schatten, A4-Verhältnis. */
.blatt {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.25);
  overflow: hidden;
}
.blatt img { display: block; width: 100%; height: auto; }

.vorlagen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
}
.vorlagen-kachel {
  position: relative;
  display: flex; flex-direction: column; gap: .75rem;
}
.vorlagen-kachel .blatt-rahmen {
  position: relative;
  aspect-ratio: 1 / 1.414;
  border-radius: 8px;
  overflow: hidden;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.vorlagen-kachel a.blatt-link { position: absolute; inset: 0; display: block; }
.vorlagen-kachel:hover .blatt-rahmen {
  border-color: var(--marke-500);
  box-shadow: 0 14px 34px -14px rgba(15,23,42,.4);
  transform: translateY(-2px);
}
.vorlagen-kachel .blatt-rahmen img,
.vorlagen-kachel .blatt-rahmen iframe { width: 100%; height: 100%; display: block; border: 0; }
.vorlagen-kachel .blatt-rahmen iframe { pointer-events: none; background: #fff; }
.vorlagen-kachel .marke-oben {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  box-shadow: 0 1px 4px rgba(15,23,42,.2);
}
.vorlagen-kachel .werkzeugleiste {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; gap: .3rem; padding: .5rem;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.55));
  opacity: 0; transition: opacity .18s;
}
.vorlagen-kachel:hover .werkzeugleiste,
.vorlagen-kachel:focus-within .werkzeugleiste { opacity: 1; }
.vorlagen-kachel .werkzeugleiste .knopf {
  background: rgba(255,255,255,.94); color: #0f172a; border-color: transparent;
}
.vorlagen-kachel .werkzeugleiste .knopf:hover { background: #fff; color: var(--marke-700); }
.vorlagen-kachel .name { font-weight: 700; font-size: .96rem; }
.vorlagen-kachel .merkmale { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; line-height: 1.5; }
.farbpunkt { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(15,23,42,.14); flex: none; }

.kachel-neu {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 1 / 1.414; border: 2px dashed var(--linie-stark);
  border-radius: 8px; color: var(--text-still); padding: 1rem;
  transition: border-color .18s, color .18s, background .18s;
}
.kachel-neu:hover { border-color: var(--marke-500); color: var(--marke-600); background: var(--marke-50); }

/* Editor: links einstellen, rechts sehen. */
.editor { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } }

.editor-buehne { position: sticky; top: 4.6rem; }
.editor-buehne .rahmen {
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.1rem;
  max-height: calc(100vh - 8.5rem);
  overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
}
.editor-buehne .blatt-halter {
  position: relative; flex: 0 0 auto;
  width: 560px; max-width: 100%;
  transition: width .18s;
}
.editor-buehne iframe { width: 100%; aspect-ratio: 1 / 1.414; border: 0; display: block; background: #fff; }
/* Ohne diese Zeile gewinnt display:block gegen das hidden-Merkmal. */
.editor-buehne iframe[hidden] { display: none; }
.editor-buehne .laedt {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--flaeche) 55%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.editor-buehne.arbeitet .laedt { opacity: 1; }
.kreisel {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--linie-stark); border-top-color: var(--marke-600);
  animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Reiter innerhalb des Editors */
.panel-reiter { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-reiter button {
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-still);
  border-radius: 999px; padding: .38rem .8rem; font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.panel-reiter button:hover { color: var(--text); border-color: var(--linie-stark); }
.panel-reiter button[aria-selected="true"] {
  background: var(--marke-600); border-color: var(--marke-600); color: #fff;
}

/* Umschalter mit mehreren Feldern statt Auswahlliste */
.segment { display: inline-flex; background: var(--flaeche-still); border-radius: 9px; padding: 3px; gap: 2px; }
.segment label {
  margin: 0; cursor: pointer; border-radius: 7px; padding: .34rem .7rem;
  font-size: .86rem; font-weight: 600; color: var(--text-still); display: flex; align-items: center; gap: .35rem;
}
.segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.segment label:hover { color: var(--text); }
.segment input:checked + span,
.segment label:has(input:checked) { background: var(--flaeche); color: var(--marke-700); box-shadow: var(--schatten); }
.segment label:has(input:focus-visible) { outline: 2px solid var(--marke-500); outline-offset: 1px; }

/* Farbwelten */
.paletten { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; }
.palette {
  display: block; padding: 3px; cursor: pointer; font: inherit; text-align: center;
  border: 2px solid transparent; border-radius: 10px; background: none;
}
.palette:hover { border-color: var(--linie-stark); }
.palette[aria-pressed="true"] { border-color: var(--marke-600); }
.palette .streifen { display: flex; border-radius: 6px; overflow: hidden; }
.palette .streifen > span { flex: 1; height: 26px; display: block; }
.palette .name {
  display: block; font-size: .72rem; color: var(--text-still); margin-top: .25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette[aria-pressed="true"] .name { color: var(--marke-700); font-weight: 600; }
#mehr-farben .pfeil { display: inline-flex; transition: transform .18s; }
#mehr-farben.offen .pfeil { transform: rotate(180deg); }
#farben-mehr { animation: einblenden .18s ease-out; }

/* Stilvorlagen */
.stile { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.stil {
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
  padding: .55rem; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.stil:hover { border-color: var(--marke-500); box-shadow: var(--schatten); transform: translateY(-1px); }
.stil .probe { border-radius: 5px; overflow: hidden; border: 1px solid var(--linie); background: #fff; padding: 5px; }
.stil .probe .zeile { height: 3px; border-radius: 1px; background: #e2e8f0; margin-bottom: 3px; }
.stil .probe .kopf { height: 6px; border-radius: 1px; margin-bottom: 4px; }
.stil .name { font-size: .8rem; font-weight: 600; margin-top: .4rem; display: block; }

/* Speicherleiste, die immer sichtbar bleibt */
.speicherleiste {
  position: sticky; bottom: 0; z-index: 15;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: .7rem .9rem; margin-top: 1.1rem;
  display: flex; align-items: center; gap: .7rem; box-shadow: var(--schatten-hoch);
}
.speicherleiste .hinweis-geaendert { color: var(--akzent-600); font-weight: 600; font-size: .85rem; }
.speicherleiste #stand { white-space: nowrap; }

/* Bildkacheln im Editor */
.bild-kachel {
  border: 1px solid var(--linie); border-radius: 10px; padding: .8rem;
  display: flex; flex-direction: column; gap: .55rem; background: var(--flaeche);
}
.bild-kachel .vorschau {
  height: 74px; border-radius: 7px; background: var(--flaeche-still);
  display: grid; place-items: center; overflow: hidden;
}
.bild-kachel .vorschau img { max-height: 66px; max-width: 92%; }
.ablage-feld {
  border: 2px dashed var(--linie-stark); border-radius: 9px; padding: .7rem;
  text-align: center; font-size: .84rem; color: var(--text-still);
  transition: border-color .15s, background .15s;
}
.ablage-feld.aktiv { border-color: var(--marke-500); background: var(--marke-50); }

/* Ausgewählter Stil und ausklappbare Stilgalerie */
.stil[aria-pressed="true"] {
  border-color: var(--marke-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke-500) 20%, transparent);
}
.stil[aria-pressed="true"] .name::after {
  content: " ✓"; color: var(--marke-600);
}
#mehr-stile .pfeil { display: inline-flex; transition: transform .18s; }
#mehr-stile.offen .pfeil { transform: rotate(180deg); }
#stile-mehr { animation: einblenden .18s ease-out; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Aufklapper „Weitere Angaben" im Belegformular */
.aufklapper { border: 1px dashed var(--linie-stark); }
.aufklapper:hover { border-color: var(--marke-500); color: var(--marke-600); }
.aufklapper .pfeil { display: inline-flex; margin-left: .4rem; transition: transform .18s; }
.aufklapper.offen .pfeil { transform: rotate(180deg); }
#weitere-angaben, .aufklappbereich { animation: einblenden .18s ease-out; }

/* ---------- Fragezeichen mit Kurzerklärung ----------
   Ohne JavaScript: die Blase erscheint beim Überfahren und beim Antippen
   (Tabulator setzt den Fokus, Fingertipp ebenfalls). */
.hilfe { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: .3rem; border-radius: 50%; cursor: help;
  border: 1px solid var(--linie-stark); background: var(--flaeche-still);
  color: var(--text-still); font-size: .68rem; font-weight: 700; line-height: 1;
  vertical-align: middle; }
.hilfe:hover, .hilfe:focus-visible { border-color: var(--marke-500); color: var(--marke-600); }
.hilfe .blase { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 260px; padding: .55rem .7rem; z-index: 40;
  background: var(--flaeche-hoch); color: var(--text); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); box-shadow: var(--schatten-menu);
  font-size: .78rem; font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal; opacity: 0; visibility: hidden; transition: opacity .12s; }
.hilfe:hover .blase, .hilfe:focus .blase, .hilfe:focus-within .blase { opacity: 1; visibility: visible; }
@media (max-width: 700px) { .hilfe .blase { width: min(260px, 70vw); } }

/* Positionen auf dem Handy: aus der Tabelle werden gestapelte Karten mit
   Beschriftung je Feld. Am Schreibtisch bleibt es die gewohnte Tabelle. */
@media (max-width: 720px) {
  .positionen thead { display: none; }
  .positionen, .positionen tbody, .positionen tr.position, .positionen td { display: block; width: 100%; }
  .positionen tr.position {
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    padding: .7rem .8rem 1rem; margin-bottom: .8rem; position: relative;
  }
  .positionen td { padding: .28rem 0; }
  .positionen td.griff { display: none; }               /* Ziehen ist am Touch nicht nötig */
  .positionen td[data-label] { display: flex; align-items: center; gap: .7rem; }
  .positionen td[data-label]::before {
    content: attr(data-label); flex: 0 0 40%;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-still); font-weight: 600;
  }
  .positionen td[data-label] input,
  .positionen td[data-label] select { flex: 1; width: auto; text-align: left; }
  .positionen td[data-label] .zahl-feld { text-align: left; }
  .positionen td.summe-zelle { justify-content: space-between; border-top: 1px solid var(--linie); margin-top: .3rem; padding-top: .6rem; }
  .positionen td.summe-zelle .zahl { font-weight: 700; font-size: 1rem; }
  /* Löschen-Knopf oben rechts in die Karte */
  .positionen tr.position > td:last-child { position: absolute; top: .4rem; right: .5rem; width: auto; padding: 0; }
}

/* Nur auf dem Handy sichtbar (z. B. der Kamera-Knopf für Belege). */
.nur-handy { display: none; }
@media (max-width: 720px) { .nur-handy { display: inline-flex; } }

/* Sichtbarer Fokusrahmen auch für Verweise (Tastaturbedienung). */
a:focus-visible { outline: 2px solid var(--marke-500); outline-offset: 2px; border-radius: 3px; }

/* ---------- „Das ist zu tun" auf der Startseite ---------- */
.zu-tun { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.zu-tun li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem .1rem; border-bottom: 1px solid var(--linie);
}
.zu-tun li:last-child { border-bottom: 0; }
.zu-tun .was { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.zu-tun .punkt { flex: none; margin-top: .05rem; color: var(--marke-600); display: inline-flex; }
.zu-tun .punkt.dringend { color: var(--rot-600); }
.zu-tun .text { min-width: 0; line-height: 1.35; }

/* ---------- Zahlungsblock im Kundenportal ---------- */
.zahlblock { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.zahlblock table.liste { flex: 1; min-width: 240px; }
.girocode { margin: 0; text-align: center; flex: none; }
.girocode img {
  width: 132px; height: 132px; display: block;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.girocode figcaption { margin-top: .4rem; line-height: 1.3; }

/* ---------- Angebot ablehnen im Portal (zurückhaltend) ---------- */
.ablehnen { margin-top: 1rem; }
.ablehnen > summary {
  cursor: pointer; color: var(--text-still); font-size: .9rem; padding: .3rem 0;
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
}
.ablehnen > summary::-webkit-details-marker { display: none; }
.ablehnen > summary::before { content: "▸"; color: var(--text-leise); }
.ablehnen[open] > summary::before { content: "▾"; }
.ablehnen > summary:hover { color: var(--text); }
.ablehnen textarea { width: 100%; }

/* ---------- Kundenportal: Absender-Marke im Kopf ---------- */
.portal-marke { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.portal-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; }

/* ---------- Kundenportal: Positionen auf dem Handy stapeln ---------- */
@media (max-width: 620px) {
  .portal-positionen thead { display: none; }
  .portal-positionen, .portal-positionen tbody, .portal-positionen tr, .portal-positionen td { display: block; width: 100%; }
  .portal-positionen tr {
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    padding: .6rem .8rem; margin-bottom: .7rem;
  }
  .portal-positionen tr:hover { background: transparent; }
  .portal-positionen td { border-bottom: 0; padding: .22rem 0; text-align: left; }
  .portal-positionen td[data-label="Bezeichnung"] {
    border-bottom: 1px solid var(--linie); padding-bottom: .45rem; margin-bottom: .35rem;
  }
  .portal-positionen td[data-label="Menge"],
  .portal-positionen td[data-label="Einzelpreis"],
  .portal-positionen td[data-label="Summe"] {
    display: flex; justify-content: flex-start; align-items: baseline; gap: .3rem;
  }
  .portal-positionen td[data-label="Menge"]::before,
  .portal-positionen td[data-label="Einzelpreis"]::before,
  .portal-positionen td[data-label="Summe"]::before {
    content: attr(data-label); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-still); font-weight: 600; margin-right: auto;
  }
  .portal-positionen td[data-label="Summe"] {
    border-top: 1px solid var(--linie); margin-top: .35rem; padding-top: .45rem; font-weight: 700;
  }
}

/* ---------- Skonto-Anreiz im Kundenportal ---------- */
.skonto-hinweis {
  display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.1rem;
  padding: .8rem 1rem; border-radius: var(--radius-klein); font-size: .92rem;
  background: var(--gruen-50); color: var(--gruen-600);
  border: 1px solid color-mix(in srgb, var(--gruen-600) 30%, transparent);
}
.skonto-hinweis strong { font-weight: 700; }
.skonto-hinweis .symbol { flex: none; margin-top: 1px; }

/* ---------- Kopier-Knopf (Kundenportal: IBAN, Betrag, Zweck) ---------- */
.kopieren-knopf {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  margin-left: .35rem; padding: .12rem .3rem; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--flaeche-still);
  color: var(--text-still); cursor: pointer; line-height: 1;
}
.kopieren-knopf:hover { color: var(--marke-600); border-color: var(--marke-500); }
.kopieren-knopf .symbol { width: 14px; height: 14px; }
.kopieren-knopf.kopiert { color: var(--gruen-600); border-color: color-mix(in srgb, var(--gruen-600) 45%, transparent); }
.kopieren-knopf.kopiert .symbol { display: none; }
.kopieren-knopf.kopiert::after { content: "Kopiert ✓"; font-size: .76rem; font-weight: 600; }

/* ================= Kundenportal (modern, zweispaltig) ================= */
.portal-sicher {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600;
  color: var(--gruen-600); background: var(--gruen-50); border-radius: 999px; padding: .28rem .7rem;
  margin-right: .5rem; white-space: nowrap;
}
.portal-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.portal-haupt { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.portal-seite { grid-column: 2; grid-row: 1; position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.portal-haupt > .karte, .portal-seite > .karte { margin: 0; }

/* Übersichtskarte */
.portal-status {
  border-radius: var(--radius); padding: 1.35rem 1.4rem 1.4rem; border: 1px solid var(--linie);
  background: var(--flaeche); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
  border-top: 4px solid var(--status-farbe, var(--marke-600));
}
.portal-status.ton-marke   { --status-farbe: var(--marke-600); --status-hell: var(--marke-50); }
.portal-status.ton-gruen   { --status-farbe: var(--gruen-600); --status-hell: var(--gruen-50); }
.portal-status.ton-rot     { --status-farbe: var(--rot-600);   --status-hell: var(--rot-50); }
.portal-status.ton-warnung { --status-farbe: var(--akzent-600); --status-hell: var(--akzent-50); }
.portal-status.ton-grau    { --status-farbe: var(--text-still); --status-hell: var(--flaeche-still); }
.portal-status-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.portal-art { font-size: .82rem; font-weight: 600; color: var(--text-still); letter-spacing: .01em; }
.portal-schild {
  font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2rem .65rem;
  color: var(--status-farbe); background: var(--status-hell);
}
.portal-betrag-label { margin-top: 1.1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); font-weight: 600; }
.portal-betrag { font-size: 2.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.portal-satz { margin: .45rem 0 0; color: var(--text-still); font-size: .93rem; line-height: 1.45; }
.portal-status.ton-rot .portal-satz { color: var(--rot-600); font-weight: 600; }
.portal-aktionen { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.2rem; }
.portal-aktionen form { margin: 0; }
.portal-aktionen .knopf { justify-content: center; width: 100%; }

/* Zahlung */
.portal-girocode { margin: 0 auto 1rem; text-align: center; }
.portal-girocode img { width: 148px; height: 148px; margin: 0 auto; }
.portal-bank { margin: 0; font-size: .95rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.portal-bank dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); font-weight: 600;
  padding: .55rem .8rem 0;
}
.portal-bank dd {
  margin: 0; padding: .1rem .8rem .55rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--linie); font-weight: 500;
}
.portal-bank dd:last-of-type { border-bottom: 0; }
.portal-bank .kopierwert { white-space: nowrap; overflow-wrap: anywhere; }
.portal-bank .kopieren-knopf { margin-left: .2rem; }
.portal-stripe { display: flex; gap: .45rem; align-items: flex-start; margin: 1rem 0 0; }
.portal-zahlung .skonto-hinweis { margin-bottom: 1rem; }

/* Beleg */
.portal-adressen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; font-size: .93rem; line-height: 1.5; }
.portal-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-leise); font-weight: 700; margin-bottom: .25rem; }
.portal-meta {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 1.4rem 0 0; padding: 1rem 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.portal-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); font-weight: 600; }
.portal-meta dd { margin: .15rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-rot { color: var(--rot-600); }
.portal-betreff { font-size: 1.25rem; margin: 1.4rem 0 .4rem; }
.portal-beleg .tabelle-rahmen { margin-top: 1rem; }
.portal-textzeile td { background: var(--flaeche-still); }
.summen .zeile.portal-offen { border-top: 1px solid var(--linie); margin-top: .3rem; padding-top: .55rem; }

/* Entscheidung (Angebot) */
.portal-h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.portal-annehmen .feld { max-width: 380px; }
.portal-annehmen .knopf { margin-top: .2rem; }

/* Datenschutz-Hinweis */
.portal-privat {
  display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.15rem; font-size: .88rem; line-height: 1.5;
  border-radius: var(--radius); background: var(--flaeche-still); color: var(--text-still); border: 1px solid var(--linie);
}
.portal-privat .symbol { flex: none; color: var(--gruen-600); margin-top: 2px; }

@media (max-width: 900px) {
  .portal-raster { grid-template-columns: 1fr; }
  .portal-seite, .portal-haupt { grid-column: auto; grid-row: auto; }
  .portal-seite { position: static; }
}
@media (max-width: 620px) {
  .portal-adressen { grid-template-columns: 1fr; }
  .portal-betrag { font-size: 1.85rem; }
  .portal-sicher { display: none; }
  .portal-meta { gap: .7rem 1.4rem; }
}
@media print {
  .portal-aktionen, .portal-sicher, .portal-privat, .kopieren-knopf, .portal-entscheidung { display: none !important; }
  .portal-raster { grid-template-columns: 1fr; }
  .portal-seite { position: static; }
}

/* Schloss an Bereichen außerhalb des gebuchten Tarifs */
nav.hauptmenue a .nav-schloss { margin-left: auto; display: inline-flex; color: var(--text-leise); opacity: .8; }
nav.hauptmenue a .nav-schloss .symbol { width: 13px; height: 13px; }

/* Nebeneinanderstehende Karten im Raster stehen auf einer Linie, und die
   Kennzahlen halten Abstand zur Karte darüber. */
.raster-2 > .karte + .karte, .raster-3 > .karte + .karte { margin-top: 0; }
.karte + .kennzahlen, .meldung + .kennzahlen { margin-top: 1.2rem; }
.seitenleiste .kopf .marke-link { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); }
.seitenleiste .kopf .marke-link img { height: 32px; width: 32px; }
.seitenleiste .kopf .marke-link span { font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }

/* ───────── Hilfe-Center ───────── */
.hilfe-kopf { padding: 3.2rem 0 2.4rem; background: linear-gradient(180deg, var(--marke-50), var(--grund)); text-align: center; }
.hilfe-kopf h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .6rem 0 .4rem; letter-spacing: -.02em; }
.hilfe-kopf p { color: var(--text-still); margin: 0 auto; max-width: 56ch; }
.hilfe-suche { display: flex; align-items: center; gap: .6rem; max-width: 640px; margin: 1.6rem auto 1.2rem;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 999px; padding: .2rem 1.1rem;
  box-shadow: var(--schatten); color: var(--text-leise); }
.hilfe-suche:focus-within { border-color: var(--marke-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke-600) 18%, transparent); }
.hilfe-suche input { flex: 1; border: 0; background: transparent; font-size: 1.05rem; padding: .8rem 0; outline: none; box-shadow: none; color: var(--text); min-width: 0; }
.hilfe-bereiche { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hilfe-bereiche a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; }
.hilfe-bereiche a:hover { border-color: var(--marke-600); color: var(--marke-700); }
.hilfe-h2 { font-size: 1.5rem; margin: 2.4rem 0 1rem; letter-spacing: -.01em; }
.hilfe-gruppe { margin-bottom: 2rem; scroll-margin-top: 90px; }
.hilfe-gruppe h3, .hilfe-fragen h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin: 0 0 .9rem; color: var(--text); scroll-margin-top: 90px; }
.hilfe-gruppe h3 svg { color: var(--marke-600); }
.hilfe-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.hilfe-karte { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  overflow: hidden; text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s; }
.hilfe-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--marke-600); }
.hilfe-karte img { width: 100%; height: 160px; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--linie); background: var(--flaeche-still); }
.hilfe-karte-kunde img { object-position: top center; }
.hilfe-karte-text { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; }
.hilfe-karte-text > span:not(.hilfe-dauer) { color: var(--text-still); font-size: .92rem; line-height: 1.45; }
.hilfe-dauer { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-leise); font-size: .82rem; margin-top: .2rem; }
.hilfe-fragen { max-width: none; }
.hilfe-fragen > div { margin-bottom: 1.6rem; }
.hilfe-nichts { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--akzent-50); border: 1px solid var(--linie); }
.hilfe-kontakt { display: flex; gap: .9rem; align-items: flex-start; margin-top: 2.4rem; padding: 1.2rem 1.4rem;
  border-radius: var(--radius-gross); background: var(--flaeche-still); border: 1px solid var(--linie); }
.hilfe-kontakt svg { color: var(--marke-600); flex: none; margin-top: .15rem; }
[data-ausgeblendet] { display: none !important; }

.oeffentlich .band.schmal { max-width: 860px; }
.hilfe-anleitung h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -.02em; margin: .6rem 0 .5rem; }
.hilfe-anleitung .vorspann { font-size: 1.12rem; color: var(--text-still); margin: 0 0 .5rem; }
.pfadleiste { font-size: .88rem; color: var(--text-leise); }
.pfadleiste a { color: var(--text-still); }
.hilfe-schritte { list-style: none; margin: 2rem 0; padding: 0; display: flex; flex-direction: column; gap: 2.2rem; }
.hilfe-schritte > li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; }
.hilfe-schritte .nummer { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--marke-600); color: #fff; font-weight: 800; font-size: 1.05rem; }
.hilfe-schritte p { margin: .35rem 0 .9rem; font-size: 1.04rem; line-height: 1.65; }
.hilfe-bild { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); }
.hilfe-bild img { display: block; width: 100%; height: auto; }
.hilfe-bild.hoch { max-width: 300px; }
.hilfe-handys { display: flex; flex-wrap: wrap; gap: 1rem; margin: .4rem 0 1rem; }
.hilfe-handys img { width: min(240px, 46%); height: auto; border-radius: 22px; border: 6px solid var(--text); box-shadow: var(--schatten-hoch); }
.hilfe-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .6rem; }
.hilfe-liste li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.55; }
.hilfe-liste svg { flex: none; margin-top: .2rem; color: var(--gruen-600); }
.hilfe-weiter { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.hilfe-weiter h2 { font-size: 1.2rem; margin: 0 0 .7rem; }
.hilfe-weiter ul { padding-left: 1.2rem; margin: 0 0 1.4rem; line-height: 1.9; }
@media (max-width: 640px) {
  .hilfe-schritte > li { grid-template-columns: 1fr; gap: .4rem; }
  .hilfe-karte img { height: 140px; }
}

/* ───────── Startseite: echte Bildschirmfotos ───────── */
.galerie-reiter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.4rem; }
.galerie-reiter button { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 999px;
  padding: .5rem 1rem; font-weight: 600; cursor: pointer; font: inherit; font-weight: 600; }
.galerie-reiter button[aria-selected="true"] { background: var(--marke-600); border-color: var(--marke-600); color: #fff; }
.galerie-buehne { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: end; }
.galerie-buehne .fenster { margin: 0; }
.galerie-buehne .fenster img { display: block; width: 100%; height: auto; }
.galerie-buehne .fenster img.galerie-bild[hidden] { display: none; }
.galerie-handy { width: 230px; border-radius: 30px; border: 8px solid var(--text); overflow: hidden; box-shadow: var(--schatten-hoch); background: var(--flaeche); }
.galerie-handy img { display: block; width: 100%; height: auto; }
.galerie-text { text-align: center; color: var(--text-still); margin: 1rem auto 0; max-width: 60ch; min-height: 3em; }
@media (max-width: 860px) { .galerie-buehne { grid-template-columns: 1fr; } .galerie-handy { display: none; } }

/* Kopf der öffentlichen Seiten: Zeichen plus lesbarer Schriftzug; am Handy
   rutscht die Navigation in eine eigene, wischbare Zeile statt zu verschwinden. */
header.oben .marke-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; flex: none; }
header.oben .marke-link img { width: 34px; height: 34px; }
header.oben .marke-link span { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
@media (max-width: 760px) {
  header.oben .band { height: auto; flex-wrap: wrap; row-gap: .25rem; column-gap: .6rem; padding-top: .6rem; padding-bottom: .4rem; }
  header.oben nav { display: flex; order: 3; width: 100%; margin: 0; gap: 1.2rem; overflow-x: auto; padding: .35rem 0 .2rem; }
  header.oben .rechts { gap: .4rem; }
  header.oben .rechts .nur-breit { display: none; }
  header.oben .marke-link span { font-size: 1.15rem; }
  header.oben .marke-link img { width: 30px; height: 30px; }
}
@media (max-width: 400px) { header.oben .rechts > button.knopf { display: none; } }
.hilfe-bereich { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--marke-600); }
.hilfe-karten { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hilfe-bereiche a[aria-pressed="true"] { background: var(--marke-600); border-color: var(--marke-600); color: #fff; }

/* ───────── Hilfe-Center: Erste Schritte & Beliebte Themen ───────── */
.hilfe-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: .4rem 0 1.2rem; }
body:has(#hilfe-suche:not(:placeholder-shown)) .hilfe-start { display: none; }
.hilfe-start-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.3rem 1.4rem; }
.hilfe-start-karte h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0 0 .2rem; }
.hilfe-start-karte h2 svg { color: var(--marke-600); }
.hilfe-start-karte > p { margin: 0 0 .9rem; }
.hilfe-checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.hilfe-checkliste a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--radius-klein); color: var(--text); text-decoration: none; }
.hilfe-checkliste a:hover { background: var(--marke-50); color: var(--marke-700); }
.hilfe-checkliste a > span:nth-child(2) { flex: 1; font-weight: 600; }
.hilfe-checkliste a > svg { color: var(--text-leise); flex: none; }
.hilfe-checkliste .nr { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--marke-50); color: var(--marke-700); font-weight: 800; font-size: .85rem; border: 1px solid var(--linie); }
.hilfe-beliebt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.hilfe-beliebt a { display: flex; align-items: center; gap: .6rem; padding: .75rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .93rem; line-height: 1.3; background: var(--flaeche-still); }
.hilfe-beliebt a:hover { border-color: var(--marke-600); color: var(--marke-700); }
.hilfe-beliebt svg { color: var(--marke-600); flex: none; }
@media (max-width: 420px) { .hilfe-beliebt { grid-template-columns: 1fr; } }

/* ───────── Empfehlen & verlinken (/verlinken) ───────── */
.vl-raster-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.vl-raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.vl-raster-3 > .karte + .karte, .vl-raster-2 > .karte + .karte, .vl-regeln > .karte + .karte { margin-top: 0; }
.vl-h3 { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; margin: 0 0 .4rem; }
.vl-h3 svg { color: var(--marke-600); }
.vl-h3.gruen svg { color: var(--gruen-600); } .vl-h3.rot svg { color: var(--rot-600); }
.vl-vorschau-text { padding: .7rem .9rem; border-radius: var(--radius-klein); background: var(--flaeche-still); border: 1px dashed var(--linie-stark); font-size: .92rem; word-break: break-word; }
.vl-siegel { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 .8rem; }
.vl-flaeche { display: grid; place-items: center; padding: .8rem; border-radius: var(--radius); border: 1px solid var(--linie); }
.vl-flaeche.hell { background: #fff; } /* Vorschau auf Weiß, auch im Dunkelmodus */
.vl-flaeche.dunkel { background: var(--marke-900); border-color: var(--marke-900); }
.vl-flaeche.gross { min-height: 150px; margin-bottom: .9rem; }
.vl-gruppe { font-size: 1.05rem; margin: 1.6rem 0 .7rem; color: var(--text-still); }
.vl-banner-liste { display: flex; flex-direction: column; gap: 1rem; }
.vl-banner { overflow: hidden; }
.vl-banner-bilder { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.1rem; background: var(--flaeche-still); align-items: flex-start; }
.vl-banner-bilder img { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--schatten); }
.vl-banner-bilder img[width="1200"], .vl-banner-bilder img[width="1080"] { max-width: min(100%, 460px); }
.vl-banner-bilder img[width="970"] { max-width: min(100%, 720px); }
.vl-banner-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-top: 1px solid var(--linie); }
.vl-banner-fuss .knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.vl-farben { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.vl-farbe { display: flex; gap: .8rem; align-items: center; padding: .8rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.vl-farbfeld { width: 54px; height: 54px; border-radius: 12px; flex: none; border: 1px solid var(--linie); }
.vl-marke-800 { background: var(--marke-800); } .vl-marke-600 { background: var(--marke-600); }
.vl-akzent-400 { background: var(--akzent-400); }
.vl-regeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.6rem 0 .4rem; }
.vl-regeln ul { margin: .3rem 0 0; padding-left: 1.2rem; line-height: 1.8; }
.fuss-marke { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.fuss-marke img { width: 32px; height: 32px; }
.fuss-marke span { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }

/* App-Kopfleiste am Handy: nur Zeichen statt Beschriftung, sonst ragt das
   Benutzermenü über den Rand. */
.kopfleiste .kopf-zeichen { display: none; }
@media (max-width: 640px) {
  .kopfleiste { padding: .6rem .8rem; gap: .5rem; }
  .kopfleiste .rechts { gap: .3rem; }
  .kopfleiste .kopf-text { display: none; }
  .kopfleiste .kopf-zeichen { display: inline-flex; }
  .kopfleiste .titel { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
.verlauf .balken, .verlauf .monat { min-width: 0; }
@media (max-width: 640px) { .verlauf .balken { gap: 3px; } .verlauf .monat > span { font-size: .58rem; } .verlauf { gap: .4rem; } }

/* /verlinken, schlanke Fassung */
.vl-kopf { padding: 2.4rem 0 1.8rem; }
.vl-haupt .karte-kopf h2 { font-size: 1.15rem; margin: 0; }
.vl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.vl-zeile:last-of-type { border-bottom: 0; }
.vl-zeile img { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--schatten); }
.vl-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }
.vl-liste { display: flex; flex-direction: column; gap: .8rem; }
.vl-liste > .karte + .karte { margin-top: 0; }
.vl-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; padding: 1rem 1.1rem; }
.vl-bild { flex: none; max-width: 100%; }
.vl-bild img { display: block; max-width: min(100%, 300px); height: auto; border-radius: 6px; box-shadow: var(--schatten); }
.vl-info { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 220px; }
.vl-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.vl-logos .vl-flaeche { min-height: 110px; transition: transform .15s, box-shadow .15s; }
.vl-logos .vl-flaeche:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.vl-logos img { max-width: 100%; height: auto; max-height: 64px; }
.vl-mehr { margin-top: 1.6rem; }
footer.unten a.fuss-marke { display: inline-flex; align-items: center; padding: 0; margin: 0; color: var(--text); font-size: inherit; }
footer.unten a.fuss-marke:hover { text-decoration: none; color: var(--text); }

/* ───────── Empfehlen (Fork D) ───────── */
.empf-link { display: flex; gap: .5rem; flex-wrap: wrap; }
.empf-link input { flex: 1; min-width: 220px; font-family: var(--schrift-zahl); }
.empf-schritte { margin: 0; padding-left: 1.3rem; line-height: 1.8; }

/* ───────── Benachrichtigungen (Fork B): „vom Kunden angesehen" ───────── */
.angesehen-zeichen { display: inline-flex; vertical-align: middle; margin-left: .35rem; color: var(--gruen-600); }
.angesehen-hinweis { display: inline-flex; align-items: center; gap: .25rem; color: var(--gruen-600); }

/* ───────── Kundenstimmen (Fork F): Abfrage in der App, Abschnitt auf der Startseite ───────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks-karte { position: relative; border-color: color-mix(in srgb, var(--marke-600) 25%, var(--linie)); }
.ks-weg { position: absolute; top: .6rem; right: .6rem; margin: 0; }
.ks-titel { font-size: 1.1rem; margin: 0; padding-right: 2.4rem; }
.ks-sterne-wahl { border: 0; margin: 0 0 .9rem; padding: 0; display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.ks-sterne-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ks-sterne-wahl label { font-size: 2rem; line-height: 1; cursor: pointer; color: var(--linie-stark); transition: color .1s, transform .1s; padding: 0 .05rem; }
.ks-sterne-wahl label:hover, .ks-sterne-wahl label:hover ~ label,
.ks-sterne-wahl input:checked ~ label { color: var(--akzent-400); }
.ks-sterne-wahl label:hover { transform: scale(1.12); }
.ks-sterne-wahl input:focus-visible + label { outline: 2px solid var(--marke-600); outline-offset: 2px; border-radius: 4px; }
.ks-frage-schlecht { display: none; }
.ks-form:has(#ks-1:checked, #ks-2:checked, #ks-3:checked) .ks-frage-gut { display: none; }
.ks-form:has(#ks-1:checked, #ks-2:checked, #ks-3:checked) .ks-frage-schlecht { display: inline; }
/* Ohne :has-Unterstützung bleibt einfach alles sichtbar. */
.ks-form:not(:has(input[name="sterne"]:checked)) .ks-mehr { display: none; }
.ks-form:not(:has(#ks-zustimmung:checked)) .ks-oeffentlich { display: none; }
.ks-zustimmung { display: flex; gap: .55rem; align-items: flex-start; margin: .2rem 0 .9rem; font-size: .9rem; color: var(--text-still); cursor: pointer; }
.ks-zustimmung input { margin-top: .25rem; flex: none; }
.ks-oeffentlich { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.ks-sterne { color: var(--akzent-400); letter-spacing: .05em; white-space: nowrap; }
.ks-sterne .leer { color: var(--linie-stark); }
.ks-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ks-stimme { margin: 0; padding: 1.3rem 1.4rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); display: flex; flex-direction: column; gap: .7rem; }
.ks-stimme blockquote { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-line; }
.ks-stimme figcaption { margin-top: auto; font-size: .9rem; color: var(--text-still); }
.ks-stimme figcaption strong { color: var(--text); }
.ks-zustimmung span { font-weight: 400; }

/* ───────── Werkzeuge, Ratgeber, Branchen, Status (WerkzeugeController) ───────── */
footer.unten .spalten { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1080px) { footer.unten .spalten { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { footer.unten .spalten { grid-template-columns: 1fr; gap: 1.8rem; } }
.wz-seite h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.02em; margin: .6rem 0 .5rem; }
.wz-seite .vorspann { font-size: 1.1rem; color: var(--text-still); margin: 0 0 1.4rem; }
.wz-rechner { margin: 1.2rem 0 1.6rem; }
.wz-umschalter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.wz-umschalter label { display: flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border: 1px solid var(--linie-stark);
  border-radius: 999px; cursor: pointer; background: var(--flaeche); font-size: .93rem; }
.wz-umschalter label:has(input:checked) { border-color: var(--marke-600); background: var(--marke-50); color: var(--marke-700); }
.wz-ergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; margin: .4rem 0 1rem; }
.wz-ergebnis > div { padding: .8rem 1rem; border-radius: var(--radius); background: var(--flaeche-still); border: 1px solid var(--linie); min-width: 0; }
.wz-ergebnis > div[hidden] { display: none; }
.wz-ergebnis dt { font-size: .8rem; color: var(--text-still); margin: 0 0 .2rem; }
.wz-ergebnis dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wz-ergebnis .haupt { background: var(--marke-600); border-color: var(--marke-600); }
.wz-ergebnis .haupt dt, .wz-ergebnis .haupt dd { color: #fff; }
.wz-erweitert { margin: .2rem 0 1rem; }
.wz-erweitert summary { cursor: pointer; color: var(--marke-600); font-size: .9rem; font-weight: 600; }
.wz-text { max-width: none; margin-top: .4rem; }
.wz-tabelle { border-collapse: collapse; margin: .6rem 0; min-width: 260px; }
.wz-tabelle th, .wz-tabelle td { text-align: left; padding: .35rem .9rem .35rem 0; border-bottom: 1px solid var(--linie); }
.wz-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.wz-karten.gross { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wz-karte { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-gross); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.wz-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--marke-600); text-decoration: none; }
.wz-karte > svg { color: var(--marke-600); flex: none; margin-top: .1rem; }
.wz-karte > span { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wz-karte > span > span { color: var(--text-still); font-size: .9rem; line-height: 1.45; }
.wz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; padding: 1.2rem 1.4rem; margin: 2rem 0 0;
  border-radius: var(--radius-gross); background: var(--marke-50); border: 1px solid color-mix(in srgb, var(--marke-600) 25%, transparent); }
.wz-cta > svg { color: var(--akzent-500); flex: none; }
.wz-cta > div { flex: 1; min-width: 220px; }
.wz-vorlage { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 1.6rem; align-items: start; margin: 1rem 0 1.6rem; }
.wz-vorlage-bild { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); background: #fff; }
.wz-vorlage-bild img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .wz-vorlage { grid-template-columns: 1fr; } .wz-vorlage-bild { max-width: 260px; } }
.wz-pflicht { line-height: 1.7; }
.wz-kurz { padding: 1rem 1.2rem; border-left: 4px solid var(--marke-600); background: var(--flaeche-still); border-radius: 0 var(--radius) var(--radius) 0; }
.wz-zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.wz-zeitstrahl li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.wz-jahr { font-weight: 800; color: var(--marke-600); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .wz-zeitstrahl li { grid-template-columns: 1fr; gap: .2rem; } }
.wz-ausnahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.wz-ausnahmen > .karte + .karte { margin-top: 0; }
.wz-ausnahmen strong { display: flex; gap: .4rem; align-items: center; }
.wz-ausnahmen strong svg { color: var(--marke-600); }
.wz-ausnahmen p { margin: .3rem 0 0; }
.wz-checkliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.wz-checkliste label { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; background: var(--flaeche); }
.wz-checkliste input { margin-top: .25rem; flex: none; }
.wz-checkliste label:has(input:checked) span { color: var(--text-leise); text-decoration: line-through; }
.wz-mock-tabelle { overflow-x: auto; }
.wz-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.wz-zwei > .karte + .karte { margin-top: 0; }
.wz-h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin: 0 0 .7rem; }
.wz-h3 svg { color: var(--marke-600); }
.wz-status-kopf { display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: var(--radius-gross); margin: 1rem 0 1.2rem; color: #fff; }
.wz-status-kopf > div { display: flex; flex-direction: column; }
.wz-status-kopf strong { font-size: 1.2rem; }
.wz-status-kopf.gruen { background: var(--gruen-700); } .wz-status-kopf.gelb { background: var(--akzent-500); } .wz-status-kopf.rot { background: var(--rot-700); }
.wz-status { list-style: none; padding: 0; margin: 0 0 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; background: var(--flaeche); }
.wz-status li { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.wz-status li:last-child { border-bottom: 0; }
.wz-status li > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.wz-status .punkt { display: inline-flex; color: var(--gruen-600); }
.wz-status .warnung .punkt { color: var(--akzent-500); } .wz-status .stoerung .punkt { color: var(--rot-600); } .wz-status .unbekannt .punkt { color: var(--text-leise); }
.wz-status .zustand { font-weight: 600; font-size: .92rem; }

/* Testumgebung: unübersehbar markiert */
.testumgebung-band { position: sticky; top: 0; z-index: 100; background: var(--akzent-500); color: var(--text); text-align: center; font-weight: 700; font-size: .85rem; padding: .35rem 1rem; }

/* ───────── Belege per E-Mail (/ausgaben/eingang) ───────── */
.einwurf-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.einwurf-adresse code { font-size: 1.02rem; padding: .45rem .7rem; border-radius: var(--radius-klein);
  background: var(--flaeche-still); border: 1px dashed var(--linie-stark); word-break: break-all; }
.einwurf-tipps { margin: .9rem 0 0; padding-left: 1.1rem; line-height: 1.7; }

/* ───────── Briefversand (LetterXpress) ───────── */
.brief-anschrift { font-size: 1.02rem; line-height: 1.5; padding: .9rem 1rem; border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-klein); background: var(--flaeche-still); max-width: 360px; }

/* ───────── Startseite: Branchen-Links, Werkzeuge, Vergleich (Okt. 2026) ───────── */
.branchen h3 .branchen-link { color: var(--text); text-decoration: none; }
.branchen h3 .branchen-link:hover { color: var(--marke-600); text-decoration: underline; }
.werkzeug-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.werkzeug-kachel { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-gross);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.werkzeug-kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--marke-600); text-decoration: none; }
.werkzeug-kachel .symbol { color: var(--marke-600); }
.oeffentlich .band.schmal-vergleich { max-width: 960px; }
.vergleich-tabelle table { min-width: 560px; }
.vergleich-tabelle th[scope="row"] { font-weight: 600; text-align: left; width: 26%; }
.vergleich-tabelle td { vertical-align: top; }
.vergleich-marke { display: inline-flex; align-items: center; gap: .3rem; color: var(--marke-600); font-weight: 800; }
.vergleich-ja { color: var(--gruen-600); display: inline-flex; vertical-align: -2px; }
.vergleich-spalten { margin: 1rem 0 2rem; }
.vergleich-spalten > .karte + .karte { margin-top: 0; }
.vergleich-spalten ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; line-height: 1.8; }
#sicherheit .saeulen { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vergleich-tabelle tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--text); }

/* Erklärvideo (views/public/_video.php) */
.erklaervideo { margin: 0 auto; max-width: 960px; }
.erklaervideo video { display: block; width: 100%; height: auto; border-radius: var(--radius-gross); border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); background: var(--flaeche-still); }
.erklaervideo figcaption { text-align: center; color: var(--text-leise); font-size: .88rem; margin-top: .6rem; }

/* Fehlerseite 404: Suche und Wege zurück. */
.fehler-suche { display: flex; gap: .5rem; }
.fehler-suche input { flex: 1; min-width: 0; }
.fehler-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-top: 1.1rem; font-size: .93rem; }

/* Hilfe-FAQ: Verweis auf die passende bebilderte Anleitung. */
.frage-anleitung { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-weight: 600; font-size: .92rem; }

/* ── Startseite 10/2026 ─────────────────────────────────────────── */
/* Geräte im Kopfbereich: Laptop mit Übersicht, davor das Handy. */
.geraete { position: relative; padding: 0 0 2.2rem 0; }
.laptop-schirm {
  background: #0f172a; border-radius: 14px 14px 4px 4px; padding: 10px 10px 12px;
  box-shadow: var(--schatten-hoch), 0 30px 60px -30px rgba(15, 23, 42, .45);
}
.laptop-schirm img { display: block; width: 100%; height: auto; border-radius: 4px; }
.laptop-fuss {
  height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px;
  background: linear-gradient(#cbd5e1, #94a3b8); position: relative;
}
.laptop-fuss::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: #64748b; }
.handy-rahmen {
  position: absolute; right: -2%; bottom: 0; width: 27%; background: #0f172a; border-radius: 22px; padding: 6px;
  box-shadow: 0 24px 50px -18px rgba(15, 23, 42, .55); transform: rotate(3deg);
}
.handy-rahmen img { display: block; width: 100%; height: auto; border-radius: 17px; }
.geraete-schild {
  position: absolute; left: -3%; bottom: 3.2rem; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 999px;
  padding: .5rem .9rem; font-size: .85rem; font-weight: 600; box-shadow: var(--schatten-hoch);
}
.geraete-schild svg { color: var(--erfolg-600); }
@media (max-width: 900px) { .handy-rahmen { right: 0; } .geraete-schild { left: 0; } }

/* Vertrauensleiste unter dem Kopfbereich. */
.vertrauen {
  list-style: none; margin: 0; padding: 1.5rem 0; display: grid; gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.vertrauen li { display: flex; align-items: center; gap: .7rem; }
.vertrauen .symbol {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--marke-50); color: var(--marke-600);
}
.vertrauen strong { display: block; font-size: .92rem; line-height: 1.25; }
.vertrauen small { display: block; color: var(--text-leise); font-size: .8rem; }

/* „Funktioniert mit" – Schriftzüge statt fremder Logos. */
.partner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem;
  padding: 2rem 0; border-bottom: 1px solid var(--linie);
}
.partner-titel { width: 100%; text-align: center; color: var(--text-leise); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.partner-name { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: var(--text-still); }
.partner-name small { font-weight: 500; font-size: .74rem; color: var(--text-leise); letter-spacing: 0; }

/* Kompakter Dreier-Block (Sicherheit, Vergleich, Werkzeuge). */
.dreier { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.dreier h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.08rem; margin-bottom: .8rem; }
.dreier h3 svg { color: var(--marke-600); }
.haken-liste, .link-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.haken-liste li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--text-still); line-height: 1.5; }
.haken-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--marke-600); font-weight: 800; }
.link-liste li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.link-liste li:last-child { border-bottom: 0; }

/* Abschluss-Band. */
.schluss-band {
  padding: 4.5rem 0; text-align: center; color: #fff;
  background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .14), transparent 40%),
              linear-gradient(120deg, var(--marke-800), var(--marke-600));
}
.schluss-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.025em; color: #fff; max-width: 24ch; margin: 0 auto; }
.schluss-band p { color: rgba(255, 255, 255, .85); margin: .9rem auto 0; max-width: 56ch; font-size: 1.08rem; }
.schluss-band .knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }
.knopf.stil-hell { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.knopf.stil-hell:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* Fester Knopf am Handy. */
.handy-cta { display: none; }
@media (max-width: 700px) {
  .handy-cta:not([hidden]) {
    display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom)); background: var(--flaeche);
    border-top: 1px solid var(--linie); box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .25);
  }
  .handy-cta .knopf { width: 100%; justify-content: center; }
  .handy-cta > a { flex: 2; } .handy-cta form { flex: 1; display: flex; }
  body.mit-handy-cta footer.unten { padding-bottom: 5rem; }
}

/* ── Umstieg, Steuerberater, Was ist neu (10/2026) ─────────────── */
.wz-zeitstrahl.wz-schritte li { grid-template-columns: 2.4rem 1fr; }
.wz-schritte .wz-jahr {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--marke-50); font-size: .9rem;
}
@media (max-width: 520px) { .wz-zeitstrahl.wz-schritte li { grid-template-columns: 2.4rem 1fr; gap: .6rem; } }
.st-zitat {
  margin: .8rem 0 1rem; padding: .9rem 1.1rem; border-left: 4px solid var(--marke-600);
  background: var(--flaeche-still); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); line-height: 1.6;
}
.neu-liste { list-style: none; margin: 0; padding: 0; }
.neu-liste > li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.neu-liste time { font-weight: 800; color: var(--marke-600); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.neu-eintrag + .neu-eintrag { margin-top: 1rem; }
.neu-eintrag h2 { font-size: 1.08rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.neu-eintrag p { margin: 0; line-height: 1.6; }
@media (max-width: 560px) { .neu-liste > li { grid-template-columns: 1fr; gap: .4rem; } }

/* ── Rechnungs-Generator (/rechnung-erstellen) ─────────────────── */
.re-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.6rem; align-items: start; margin-top: 1rem; }
@media (max-width: 980px) { .re-raster { grid-template-columns: 1fr; } }
.re-formular fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.re-formular legend { float: left; width: 100%; font-weight: 700; font-size: 1.02rem; margin-bottom: .7rem; padding: 0; }
.re-formular .feld { margin-bottom: .7rem; clear: both; }
.re-formular .feld label, .re-pos-name { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .25rem; color: var(--text-still); }
.re-formular input:not([type="checkbox"]), .re-formular textarea, .re-formular select { width: 100%; box-sizing: border-box; }
.re-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; clear: both; }
@media (max-width: 520px) { .re-zwei { grid-template-columns: 1fr; } }
.re-haken { display: flex; gap: .5rem; align-items: center; font-size: .92rem; clear: both; }
.re-positionen { clear: both; }
.re-pos { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(4.8rem, 1fr) auto; gap: .5rem; align-items: end;
  padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--linie); }
.re-pos label { margin: 0; min-width: 0; }
.re-pos-weg { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-still); border-radius: var(--radius); width: 2.3rem; height: 2.4rem; font-size: 1.2rem; cursor: pointer; }
.re-pos-weg:hover { color: var(--rot-600); border-color: currentColor; }
@media (max-width: 620px) {
  .re-pos { grid-template-columns: 1fr 1fr; }
  .re-pos .re-pos-text { grid-column: 1 / -1; }
  .re-pos-weg { justify-self: end; }
}
.re-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .6rem; }
.re-rechts { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
@media (max-width: 980px) { .re-rechts { position: static; } }
.re-blatt-rahmen { background: var(--flaeche-still); border-radius: var(--radius-gross); padding: 1rem; }
/* Das Blatt bleibt bewusst papierweiß – auch im dunklen Modus, wie der Ausdruck. */
.re-blatt {
  background: #fff; color: #111827; box-shadow: var(--schatten-hoch); border-radius: 4px;
  min-height: 0; aspect-ratio: 210 / 297; padding: 7% 7.5% 5%; font-size: 11px; line-height: 1.45;
  display: flex; flex-direction: column; overflow: hidden;
}
.re-blatt p { margin: .5em 0; }
.re-b-kopf { display: flex; justify-content: flex-end; text-align: right; margin-bottom: 2.2em; }
.re-b-absender strong { font-size: 1.25em; }
.re-b-zeile-klein { font-size: .78em; color: #6b7280; border-bottom: 1px solid #d1d5db; padding-bottom: .2em; margin-bottom: .5em; max-width: 60%; }
.re-b-empfaenger { min-height: 6em; }
.re-b-meta { display: flex; flex-wrap: wrap; gap: .4em 1.6em; justify-content: flex-end; margin: 1em 0 .4em; font-size: .9em; }
.re-b-meta span { display: block; color: #6b7280; font-size: .85em; }
.re-b-titel { font-size: 1.6em; margin: .6em 0 .7em; color: #111827; letter-spacing: -.01em; }
.re-b-tabelle { width: 100%; border-collapse: collapse; }
.re-b-tabelle th { text-align: left; font-size: .82em; color: #6b7280; border-bottom: 1.5px solid #111827; padding: .35em .3em; font-weight: 600; }
.re-b-tabelle td { padding: .45em .3em; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.re-b-tabelle .zahl { text-align: right; white-space: nowrap; }
.re-b-text { word-break: break-word; }
.re-b-leer { color: #6b7280; text-align: center; padding: 1.4em 0 !important; }
.re-b-summen { margin: .8em 0 .6em auto; width: 62%; }
.re-b-summen > div { display: flex; justify-content: space-between; gap: 1em; padding: .2em 0; }
.re-b-summen > div span:last-child { white-space: nowrap; }
.re-b-gesamt { border-top: 1.5px solid #111827; margin-top: .2em; padding-top: .35em !important; font-weight: 700; font-size: 1.12em; }
.re-b-hinweis { font-style: italic; }
.re-b-fuss { margin-top: auto; padding-top: 1em; border-top: 1px solid #d1d5db; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; font-size: .78em; color: #4b5563; }
.re-pflicht h2 { font-size: 1rem; margin: 0 0 .6rem; }
.re-pflicht ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.re-pflicht li { display: flex; gap: .5rem; color: var(--text-still); }
.re-pflicht li.ok { color: var(--text); }
.re-pflicht-zeichen { width: 1.1rem; font-weight: 800; color: var(--text-leise); }
.re-pflicht li.ok .re-pflicht-zeichen { color: var(--erfolg-600); }
.re-hinweise { display: grid; gap: 1rem; margin: 2rem 0 1rem; }
@media (max-width: 560px) { .re-blatt { aspect-ratio: auto; min-height: 120vw; font-size: 9.5px; } }
/* Drucken: nur das Blatt. Alles andere fällt per display:none weg, damit
   keine leeren Folgeseiten entstehen. */
@media print {
  body:has(.re-blatt) > *:not(:has(.re-blatt)),
  body:has(.re-blatt) .re-seite .band > *:not(.re-raster),
  body:has(.re-blatt) .re-formular, body:has(.re-blatt) .re-pflicht { display: none !important; }
  body:has(.re-blatt) .re-seite { padding: 0; }
  body:has(.re-blatt) .re-seite .band { max-width: none; padding: 0; }
  body:has(.re-blatt) .re-raster, body:has(.re-blatt) .re-rechts { display: block; margin: 0; position: static; }
  body:has(.re-blatt) .re-blatt-rahmen { padding: 0; background: none; }
  body:has(.re-blatt) .re-blatt {
    aspect-ratio: auto; min-height: 0; box-shadow: none; border-radius: 0; padding: 0; font-size: 10.5pt; overflow: visible;
  }
  body:has(.re-blatt) .re-b-fuss { margin-top: 3em; }
}

/* ── Preise: Tarif-Finder ── */
.tf-finder { max-width: 860px; margin: 0 auto 2rem; }
.tf-finder h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin: 0 0 .2rem; }
.tf-finder h2 svg { color: var(--marke-600); }
.tf-fragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tf-fragen fieldset { border: 0; background: var(--flaeche-still); border-radius: var(--radius); padding: .9rem 1rem; margin: 0; min-width: 0; }
.tf-fragen legend { float: left; width: 100%; font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .2rem; }
.tf-fragen legend + label { clear: both; }
.tf-fragen label { display: flex; gap: .45rem; align-items: center; font-size: .92rem; margin-top: .45rem; cursor: pointer; }
.tf-ergebnis { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--marke-50); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.tf-name { font-size: 1.35rem; color: var(--marke-700); }
.tf-preis { font-weight: 600; }
.tf-text { flex-basis: 100%; margin: 0; }
.preis.tf-treffer { outline: 3px solid var(--akzent-500); outline-offset: 3px; }

/* Barrierefreiheit: Links im Fließtext nicht nur an der Farbe erkennbar (WCAG 1.4.1). */
p a:not(.knopf), .antwort a:not(.knopf), .meldung a:not(.knopf), .pfadleiste a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.re-raster[hidden], .tf-finder[hidden], .tf-ergebnis[hidden] { display: none; }
/* Sprunglink für Tastatur und Bildschirmleser – erscheint erst beim Fokus. */
.sprunglink { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--marke-600); color: #fff; padding: .6rem 1rem; border-radius: var(--radius); font-weight: 700; }
.sprunglink:focus { top: 1rem; color: #fff; }

/* ── Startseite: Mitmachen, Effekte (10/2026) ─────────────────────── */
a.marke-schild { color: var(--text-still); text-decoration: none; }
a.marke-schild:hover { color: var(--text); border-color: var(--marke-500); }
a.marke-schild strong { color: var(--link); }

.mitmachen-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .mitmachen-raster { grid-template-columns: 1fr; } }
.mitmachen input[type="text"] { width: 100%; margin: .5rem 0 1.1rem; }
.mm-blatt { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.3rem; background: var(--flaeche); box-shadow: var(--schatten-hoch); }
.mm-kopf { display: flex; align-items: center; gap: .8rem; padding-bottom: .9rem; border-bottom: 2px solid var(--marke-600); }
.mm-kopf strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.mm-kopf .klein { color: var(--text-still); }
.mm-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
  color: #fff; background: linear-gradient(135deg, var(--marke-600), var(--marke-800)); transition: transform .25s ease; }
.mm-logo.neu { transform: scale(1.12) rotate(-6deg); }
.mm-titel { font-weight: 800; font-size: 1.15rem; margin: .9rem 0 .4rem; }
.mm-fuss { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .8rem; color: var(--text-still); }
.mm-regler { display: flex; align-items: center; gap: 1rem; margin: .8rem 0 1.4rem; }
.mm-regler input { flex: 1; accent-color: var(--marke-600); }
.mm-regler output { min-width: 3ch; font-weight: 800; font-size: 1.3rem; color: var(--link); text-align: right; }
.mm-ergebnis { display: flex; flex-direction: column; gap: .2rem; padding: 1.2rem; border-radius: var(--radius); background: var(--marke-50); }
.mm-zahl { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; color: var(--link); line-height: 1.1; }
.mm-annahmen { margin-top: 1rem; }
.mm-annahmen summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--link); }

.kein-lockpreis { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1rem !important; padding: .5rem 1rem; border-radius: var(--radius); font-size: .95rem !important;
  background: var(--gruen-50); color: var(--gruen-600) !important; }

.michael-video { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--radius); margin: 1.2rem 0; background: #000; }

/* Sanftes Einblenden beim Scrollen – nur mit JavaScript und ohne „weniger Bewegung". */
.ein-vor { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ein-vor.ein-da { opacity: 1; transform: none; }

/* Blitz-Effekt: ein Lichtstreif huscht über „Kostenlos starten". */
a.knopf[href="/registrieren"] { position: relative; overflow: hidden; }
a.knopf[href="/registrieren"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
}
a.knopf[href="/registrieren"]:hover::after { animation: blitz-streif .7s ease; }
@keyframes blitz-streif { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .ein-vor { opacity: 1; transform: none; transition: none; }
  a.knopf[href="/registrieren"]:hover::after { animation: none; }
}
@media print { .ein-vor { opacity: 1 !important; transform: none !important; } }

/* ── Beispielbelege zum Herunterladen (E-Rechnung, Funktionen) ── */
.beispiele {
  display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: center; margin: 2.5rem 0;
  padding: 1.6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); box-shadow: var(--schatten);
}
.beispiele-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 6px; box-shadow: var(--schatten-hoch); transform: rotate(-2deg); transition: transform .18s ease; }
.beispiele-bild:hover img { transform: rotate(0deg) scale(1.02); }
.beispiele h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.beispiele-liste { list-style: none; margin: 1rem 0; padding: 0; }
.beispiele-liste li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.beispiele-liste li:last-child { border-bottom: 0; }
.beispiele-liste a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
@media (max-width: 700px) { .beispiele { grid-template-columns: 1fr; } .beispiele-bild { max-width: 200px; margin: 0 auto; } }

/* ── Startseite: kurze Filme in den Funktions-Kacheln ───────────── */
.kachel.mit-clip { display: flex; flex-direction: column; }
.kachel-clip {
  margin: -.6rem -.6rem 1.1rem; border-radius: calc(var(--radius-gross) - 6px); overflow: hidden;
  border: 1px solid var(--linie); background: var(--flaeche-still); aspect-ratio: 16 / 10;
}
.kachel-clip video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.kachel.mit-clip > .symbol { display: none; }
.kontakt-zusatz { display: block; margin-top: .35rem; }