/* Upward — das Erscheinungsbild.
   ============================================================================
   Uebernommen aus dem Lovable-Entwurf (07.09.2026), uebersetzt von Tailwind in
   einfaches CSS. Kein Bauschritt, kein Framework, eine Datei. Jede Klasse hier
   entspricht einer Klassenkette im Entwurf; wo eine Zahl steht, ist es die Zahl
   aus dem Entwurf, nicht eine aehnliche.

   Umrechnung der Tailwind-Stufen, damit die Herkunft nachpruefbar bleibt:
     px-5 = 1.25rem · md:px-10 = 2.5rem · py-20 = 5rem · py-24 = 6rem
     gap-3 = .75rem · gap-5 = 1.25rem · gap-10 = 2.5rem · gap-12 = 3rem
     p-3 = .75rem · p-6 = 1.5rem · p-7 = 1.75rem · p-8 = 2rem
     rounded-lg = .5rem · rounded-xl = .75rem · rounded-2xl = 1rem
     sm = 640px · md = 768px · lg = 1024px
   ============================================================================ */

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
::selection { background: color-mix(in oklab, var(--clay-blue) 25%, transparent); }

a { color: inherit; transition: opacity var(--zeit) var(--kurve), background-color var(--zeit) var(--kurve); }
a:hover { opacity: .72; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--clay-blue-text);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--schrift-titel); font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Der Sprunglink. Sichtbar, sobald er den Fokus hat — vorher aus dem Weg. */
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--mist); padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-klein) 0; font-weight: 700; font-size: var(--t-klein);
}
.sprung:focus { left: 0; }

/* ---------------------------------------------------------------- Bausteine */
.huelle { margin: 0 auto; max-width: var(--seitenbreite); padding-left: var(--rand-seite); padding-right: var(--rand-seite); }
@media (min-width: 768px) { .huelle { padding-left: var(--rand-seite-md); padding-right: var(--rand-seite-md); } }

.augenmerk {
  font-size: var(--t-augenmerk); line-height: 1rem; text-transform: uppercase;
  letter-spacing: var(--lauf-augenmerk); color: var(--ink-62); margin: 0;
}
.augenmerk-hell { color: var(--mist-62); }
.augenmerk-blau { color: var(--clay-blue-text); }
.augenmerk-korall { color: var(--clay-coral-text); }

.abschnitt-titel {
  font-family: var(--schrift-titel); font-size: var(--t-h2); line-height: var(--zeile-titel);
  /* `manual` statt `auto`, derselbe Grund wie bei .anzeige weiter unten. */
  font-weight: 800; letter-spacing: 0; overflow-wrap: break-word; hyphens: manual; max-width: 100%;
}
.abschnitt-text { margin-top: 1.25rem; max-width: var(--textbreite); font-size: 1rem; line-height: 1.7; color: var(--ink-64); }

/* Die beiden Schaltflaechen des Entwurfs. min-height 44px ist unsere Zugabe:
   das Prueftor verlangt sie auf jeder tippbaren Flaeche (ADR 0013), und der
   Entwurf kommt mit .75rem Polsterung auf 43 px. Ein Pixel, den wir ergaenzen. */
.knopf-dunkel, .knopf-hell {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius-klein); padding: .75rem 1.25rem;
  font-size: var(--t-klein); font-weight: 700; text-decoration: none;
  min-height: var(--tippflaeche); cursor: pointer; font-family: inherit;
}
.knopf-dunkel { background: var(--ink); color: var(--mist); border: 1px solid var(--ink); }
.knopf-hell { border: 1px solid var(--linie-18); background: transparent; color: var(--ink); }
.knopf-dunkel:hover, .knopf-hell:hover { opacity: .72; }
.knopf-hell-auf-tinte { border-color: color-mix(in oklab, var(--mist) 30%, transparent); color: var(--mist); }
.knopf-korall { background: var(--clay-coral-text); border-color: var(--clay-coral-text); color: var(--mist); }

.knopf-dunkel svg, .knopf-hell svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* Das Raster im Hintergrund des Kopfbereichs: fuenf senkrechte Linien. */
.seitenraster {
  position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: linear-gradient(to right, var(--linie-06) 1px, transparent 1px);
  background-size: 20% 100%;
}

/* ------------------------------------------------------------------ Bewegung */
@keyframes settle { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift  { from { transform: translateY(0) rotate(-.5deg); } to { transform: translateY(-10px) rotate(.5deg); } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bewegt-settle       { animation: settle .7s ease both; }
.bewegt-settle-spaet { animation: settle .8s ease .18s both; }
.bewegt-reveal       { animation: reveal .9s ease both; }
.bewegt-drift        { animation: drift 7s ease-in-out infinite alternate; }

/* Abschnitte, die erst beim Scrollen erscheinen. Ohne JavaScript, ueber
   animation-timeline. Browser ohne Unterstuetzung zeigen sie einfach sofort —
   kein leerer Bildschirm, kein Skript, das erst laden muss. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bewegt-auftritt {
      animation: settle .6s ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* ------------------------------------------------------------------- Kopf */
.kopf { position: relative; border-bottom: 1px solid var(--linie-10); }
.kopfleiste {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.marke { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; min-height: var(--tippflaeche); }
.marke svg { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }
.marke .wort { font-family: var(--schrift-titel); font-size: 1.125rem; font-weight: 800; }
.marke .zusatz { display: none; font-size: 10px; text-transform: uppercase; color: var(--ink-62); letter-spacing: .1em; }
@media (min-width: 640px) { .marke .zusatz { display: inline; } }

/* Der Entwurf setzt die Verweise als reinen Text mit `gap-8` (32 px) dazwischen.
   Ein dreibuchstabiger Verweis wie "Fit" ist damit 16 px breit — als Tippflaeche zu
   wenig (ADR 0013 verlangt 44 x 44). Geheilt, ohne das Bild zu veraendern: Die
   Verweise bekommen 14 px Polsterung links und rechts, der Abstand faellt von 32 px
   auf 4 px. 14 + 4 + 14 = 32 — der sichtbare Abstand zwischen zwei Woertern bleibt
   auf das Pixel gleich, die Tippflaeche waechst von 16 auf 44 px. */
.kopfleiste nav { display: none; align-items: center; gap: .25rem; font-size: var(--t-klein); color: var(--ink-68); }
.kopfleiste nav a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tippflaeche); min-width: var(--tippflaeche); padding: 0 .875rem; border-radius: var(--radius-klein); }
.seitenfuss nav { gap: .25rem; margin-left: -.875rem; }
.seitenfuss nav a { padding: 0 .875rem; min-width: var(--tippflaeche); justify-content: center; }
@media (min-width: 900px) { .kopfleiste nav { display: flex; } }

/* Unter 900 px war die Navigation komplett ausgeblendet, und damit war das
   kostenlose Kit auf dem Handy NUR ganz unten im Fuss erreichbar -- also nach
   14.000 px Scrollen. Auftrag 10.09.2026, Teil 2c: "Das Kit ist oben
   erreichbar, als Link im vorhandenen Kopfbereich wie die vorhandenen
   Navigationslinks". Genau das passiert hier: dieselbe Navigation, dieselbe
   Komponente, dieselben Tokens, dieselbe 44-px-Tippflaeche -- sichtbar bleibt
   auf schmalen Geraeten nur der eine Verweis, der etwas verschenkt. */
@media (max-width: 899px) {
  .kopfleiste nav { display: flex; }
  .kopfleiste nav a:not(.nav-immer) { display: none; }
}

/* Das Aufklapp-Muster fuer lange Listen auf schmalen Geraeten.
   `.aufklapp` sieht aus wie jedes andere <details> auf dieser Seite (Regel 464),
   nur ohne Rahmen und Polsterung, wenn es offen im Fluss steht: Auf dem Desktop
   ist es IMMER offen und soll dort gar nicht als Kasten auffallen. Zugeklappt
   wird ausschliesslich unter 900 px, und das macht os/server/startseite.mjs mit
   drei Zeilen JavaScript -- ohne JavaScript bleibt alles offen und es geht kein
   Inhalt verloren. */
.aufklapp { border: 0; background: none; border-radius: 0; }
.aufklapp > summary { display: none; }
@media (max-width: 899px) {
  .aufklapp { border: 1px solid var(--linie-10); border-radius: var(--radius); background: var(--flaeche); }
  .aufklapp > summary {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    cursor: pointer; padding: 1rem; font-weight: 700; font-size: var(--t-klein);
    min-height: var(--tippflaeche); list-style: none;
  }
  .aufklapp > summary::-webkit-details-marker { display: none; }
  .aufklapp > summary::after {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px;
    border-right: 2px solid var(--ink-48); border-bottom: 2px solid var(--ink-48);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--zeit) var(--kurve);
  }
  .aufklapp[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .aufklapp > *:not(summary) { padding: 0 1rem 1rem; }
  .band-stark .aufklapp { background: none; border-color: var(--linie-15); }
}

/* ------------------------------------------------------------------ Buehne */
.buehne { position: relative; }
.buehne-kopf {
  display: grid; gap: 2.5rem; align-items: end;
  padding-top: 1.5rem; padding-bottom: 3.5rem;
}
@media (min-width: 1024px) {
  .buehne-kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 3rem; }
  .buehne-kopf > .spalte-text { grid-column: span 7 / span 7; }
  .buehne-kopf > .spalte-bild { grid-column: span 5 / span 5; }
}
.spalte-text { min-width: 0; }
.spalte-bild { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }

.anzeige {
  margin-top: 1.5rem;
  font-family: var(--schrift-titel); font-size: var(--t-anzeige);
  font-weight: var(--gewicht-anzeige); line-height: var(--zeile-anzeige);
  /* `hyphens: manual` statt `auto` (Auftrag 13.09.2026): Wortumbrueche mitten
     im Wort sind ueberall verboten. Im uebernommenen Entwurf stand `auto`, und
     es fiel nie auf, weil kein Text lang genug war -- bis eine laengere
     Ueberschrift die Regel sichtbar machte. `overflow-wrap: break-word` bleibt:
     Es verhindert, dass ein einzelnes langes Wort ueber den Rand laeuft, und
     greift nur dann, wenn es sonst gar nicht passt. */
  overflow-wrap: break-word; hyphens: manual;
}
.anzeige .zeile { display: block; }
.anzeige .gedaempft { color: var(--ink-90); }
.buehne-kopf .vorspann {
  margin-top: 2rem; max-width: 48ch; font-size: var(--t-gross); line-height: 1.65; color: var(--ink-68);
}
@media (min-width: 768px) { .buehne-kopf .vorspann { font-size: 1.25rem; } }
.tatenreihe { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.bildflaeche { display: grid; place-items: center; min-height: 22rem; }
@media (min-width: 640px) { .bildflaeche { min-height: 30rem; } }
@media (min-width: 1024px) { .bildflaeche { min-height: 36rem; } }
.bildflaeche img { max-height: 34rem; width: 100%; object-fit: contain; filter: drop-shadow(0 20px 13px color-mix(in oklab, var(--ink) 8%, transparent)); }

.objekt { display: flex; align-items: center; justify-content: center; }
/* `pointer-events: none` seit dem 14.09.2026, und dahinter steckt ein Fehler,
   der seit der Uebernahme des Entwurfs drin war:

   `height: 100%` und `max-width: 100%` widersprechen sich hier. Bei einem
   breiten Bild gewinnt die Breitengrenze, die Hoehe wird aus dem
   Seitenverhaeltnis neu gerechnet -- und weil der Behaelter `align-items:
   center` hat, ragt das Bild oben UND unten ueber seinen Kasten hinaus.
   Gemessen am 14.09.2026 auf 390 px: Kasten 224 px hoch, Bild 350 px, also
   63 px Ueberstand nach jeder Seite.

   Sichtbar ist das nicht -- die Knete-Bilder sind freigestellt, der Ueberstand
   ist durchsichtig. Spuerbar ist es trotzdem: Jedes bedienbare Element im
   Umkreis von 63 Pixeln um ein Objekt nimmt keine Tipper mehr an, weil das
   unsichtbare Bild darueber liegt. Genau so hat der Umschalter Creator/Coach
   auf dem iPhone nicht reagiert.

   Die Bilder sind Schmuck (`alt=""`). Ein Schmuckbild darf keine Tipper
   abfangen. Das aendert keine Farbe, keine Groesse und keinen Abstand -- nur,
   wer den Tipper bekommt. */
.objekt img { height: 100%; width: auto; max-width: 100%; object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 8px color-mix(in oklab, var(--ink) 6%, transparent)); }
.objekt-56 { height: 14rem; }
.objekt-64 { height: 16rem; }
.objekt-80 { height: 20rem; }
@media (min-width: 768px) { .objekt-64 { height: 20rem; } .objekt-80 { height: 30rem; } }

/* Die drei Kennzahlen unter dem Kopfbild. */
.kennzahlreihe {
  margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr);
  overflow: hidden; border-radius: .5rem; border: 1px solid var(--linie-10);
}
.kennzahlreihe > div { background: var(--mist); padding: .75rem; border-left: 1px solid var(--linie-10); }
.kennzahlreihe > div:first-child { border-left: 0; }
.kennzahlreihe .wert { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 800; line-height: 1.2; display: block; }
.kennzahlreihe .name { margin-top: .25rem; font-size: 10px; text-transform: uppercase; color: var(--ink-62); display: block; line-height: 1.3; }

/* -------------------------------------------------------------- Abschnitte */
.band { border-bottom: 1px solid var(--linie-10); }
.band-stark { background: var(--mist-strong); }
.band-tinte { background: var(--ink); color: var(--mist); }
.band > .huelle { padding-top: var(--abschnitt); padding-bottom: var(--abschnitt); }
.band.band-schluss > .huelle { padding-top: 6rem; padding-bottom: 6rem; }

.rubrik { margin-bottom: 1.5rem; display: flex; align-items: center; gap: .75rem; }
.rubrik .nr { font-family: var(--schrift-titel); font-size: 3rem; font-weight: 800; color: var(--ink-48); line-height: 1; }
.band-tinte .rubrik .nr { color: color-mix(in oklab, var(--mist) 48%, transparent); }

/* Zweispaltige Abschnitte: 4/8 und 5/7 wie im Entwurf. */
.zwei { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .zwei { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .zwei > .s4  { grid-column: span 4 / span 4; min-width: 0; }
  .zwei > .s5  { grid-column: span 5 / span 5; min-width: 0; }
  .zwei > .s7  { grid-column: span 7 / span 7; min-width: 0; }
  .zwei > .s8  { grid-column: span 8 / span 8; min-width: 0; }
  .zwei.mittig { align-items: center; }
}
.zwei > * { min-width: 0; }

/* --------------------------------------------------------- Leistungsraster */
.leistungen { display: grid; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--linie-10); }
@media (min-width: 640px)  { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .leistungen { grid-template-columns: repeat(3, 1fr); } }
.zelle {
  background: var(--mist); padding: 1.75rem; min-height: 14rem;
  border-right: 1px solid var(--linie-10); border-bottom: 1px solid var(--linie-10);
}
@media (max-width: 640px) { .zelle { min-height: auto; } }
.zelle .kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; }
.zelle .nr { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 800; }
.zelle .punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--clay-yellow); flex: 0 0 auto; margin-top: .5rem; }
.zelle h3 { margin-top: 1.75rem; font-size: var(--t-h3); font-weight: 700; }
.zelle p { margin-top: .75rem; font-size: var(--t-klein); line-height: 1.65; color: var(--ink-64); }

/* ------------------------------------------------------------- Schrittfolge */
.schrittfolge { border-top: 1px solid var(--linie-10); border-bottom: 1px solid var(--linie-10); }
.schrittfolge li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  border-bottom: 1px solid var(--linie-10); padding: 1.5rem 0;
}
@media (min-width: 560px) { .schrittfolge li { grid-template-columns: 3rem 1fr auto; } }
.schrittfolge li:last-child { border-bottom: 0; }
.schrittfolge .nr { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 800; color: var(--ink-48); line-height: 1.2; }
.schrittfolge h3 { font-size: 1.125rem; font-weight: 700; }
.schrittfolge p { margin-top: .25rem; font-size: var(--t-klein); color: var(--ink-64); }
.schrittfolge .zeit { font-size: var(--t-mikro); color: var(--ink-62); grid-column: 2; }
@media (min-width: 560px) { .schrittfolge .zeit { grid-column: 3; text-align: right; white-space: nowrap; } }

/* --------------------------------------------------------- Kontaktweg, Schritt 1 */
/* Kein <fieldset>/<legend>, sondern ein <div role="group"> mit einer Beschriftung,
   auf die aria-labelledby zeigt. Vorlesesoftware liest dieselbe Zuordnung -- die
   Frage gehoert zu den Antworten darunter.
   Warum nicht fieldset: Es bringt einen Browser-Standardrahmen mit, gemessen am
   11.09.2026 als "2px groove rgb(239,239,239)" plus 12 px seitliche Polsterung.
   Ein grauer Rahmen mitten in der Seite, aus keinem unserer Tokens.

   Richtigstellung vom 11.09.2026: An dieser Stelle standen zuerst fuenf weitere
   Regeln, die alle den waagerechten Ueberlauf von 413 px auf 390 px beheben
   sollten -- Listeneinzug, Marker, Feldbreite, Zeilenpolsterung. Keine davon hat
   ihn behoben, weil keine die Ursache war. Die Ursache lag im Markup: Die
   html-Auszeichnung dieser Seite maskiert jeden eingesetzten Wert, also stand das
   Haken-SVG als sichtbarer Text im 24-px-Kaestchen, 86 px breit und durch
   color:transparent unsichtbar. Nach der Reparatur dort wurden alle fuenf Regeln
   einzeln im Browser zurueckgenommen: scrollWidth blieb 390. Sie sind geloescht.
   Was hier steht, steht aus gestalterischem Grund, nicht als Reparatur. */
/* Abstand, Gewicht und Groesse sind nicht frei gewaehlt, sondern von dieser Seite
   uebernommen: --m6 ist der Abstand, den die Feldgruppen der alten Bewerbung
   trugen, und 600 bei --t-klein ist der Beschriftungsstil aus html.mjs. Die Frage
   IST die Beschriftung ihrer Antwortgruppe. So bleibt die Optik dieselbe, obwohl
   die Seite eine andere ist (Stil-Sperre). */
.kontaktfrage { margin: 0 0 var(--m6); }
.kontaktfrage-titel { font-weight: 600; font-size: var(--t-klein); margin: 0 0 .5rem; }
/* Die Zeile ist ein <label>, und <label> traegt hier margin-bottom. Auf der
   Startseite steht dieselbe Zeile ohne Abstand; hier wird er zurueckgenommen,
   damit die Komponente auf beiden Seiten gleich aussieht. */
.kontaktfrage .fitzeile { margin: 0; }
.kontaktfrage .fitzeile > span:first-child { flex: 1 1 auto; min-width: 0; }
/* Der Zusatz unter der Antwort. Er sieht genau aus wie ein `p.mikro`, weil er
   dasselbe ist: zweite Zeile, kleiner, gedaempft. Als <span> im Label, weil ein
   <p> in einem <label> falsche Auszeichnung waere. `font-weight: 400` neutralisiert
   das geerbte 600 aus `.buehne label`; sonst traegt dieselbe Optik zwei Gewichte. */
.kontaktfrage .fitzeile .mikro { display: block; font-weight: 400; }
.kontaktfrage .mikro { margin-top: .5rem; }

/* ------------------------------------------------------------------- Kit */
/* Das Produkt-Kit. Mobil zuerst: Jede Regel hier gilt ab 0 px, die Breiten
   kommen erst in den Medienabfragen dazu. Auf 390 px in Safari muss jede Uebung
   mit dem Daumen bedienbar sein -- deshalb 44 px Mindesthoehe an jedem Feld und
   jedem Knopf, und keine Spalte unter 100 % vor 640 px. */
.kitrahmen { max-width: 42rem; margin: 0 auto; padding-bottom: 4rem; }

/* Das Fortschrittsband. Waagerecht scrollbar auf dem Handy, damit alle fuenf
   Schritte erreichbar bleiben, ohne die Seite zu verbreitern. */
.kitband {
  display: flex; gap: .5rem; overflow-x: auto; margin: 1.5rem 0 2.5rem;
  padding-bottom: .5rem; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
/* Umbrechen statt abschneiden, sobald Platz da ist.
   Befund von Jannik am 15.09.2026, Safari auf dem Desktop: „Die Stufenleiste
   am Seitenanfang ist rechts abgeschnitten, Baustein 05 haengt halb im Bild."
   Gemessen an diesem Tag mit sieben Schritten: 497 Bildpunkte lagen ausserhalb
   des sichtbaren Bereichs auf 768 px und darueber, 819 auf 390 px.
   Ein waagerecht scrollender Streifen ohne sichtbaren Hinweis sieht aus wie ein
   Fehler, und auf dem Desktop schiebt ihn kaum jemand. Ab 720 px bricht die
   Leiste deshalb um; darunter bleibt sie ein Streifen, weil sieben Kaesten
   untereinander dort die halbe Seite fuellen wuerden. */
@media (min-width: 720px) {
  .kitband { flex-wrap: wrap; overflow-x: visible; }
}
.kitschritt {
  flex: 0 0 auto; scroll-snap-align: start; text-decoration: none;
  display: flex; flex-direction: column; gap: .125rem; justify-content: center;
  min-height: var(--tippflaeche); min-width: 8.5rem; max-width: 11rem;
  padding: .5rem .875rem;
  border: 1px solid var(--linie-15); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--ink-64);
  transition: border-color var(--zeit-schnell) var(--kurve), background var(--zeit-schnell) var(--kurve);
}
.kitschritt:hover { border-color: var(--clay-blue); }
.kitschritt .nr { font-family: var(--schrift-titel); font-size: .75rem; font-weight: 800; color: var(--ink-48); }
.kitschritt .was { font-size: var(--t-mikro); line-height: 1.25; }
.kitschritt.fertig { border-color: var(--clay-blue); }
.kitschritt.fertig .nr { color: var(--clay-blue-text); }
.kitschritt.hier { background: var(--ink); border-color: var(--ink); color: var(--mist); }
.kitschritt.hier .nr { color: var(--mist-62); }
.kitziel .nr { color: var(--clay-yellow); }

.kitbaustein { margin-bottom: 3rem; }
.kitkern {
  font-family: var(--schrift-titel); font-weight: 800;
  font-size: clamp(1.625rem, 5.5vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.01em; margin: .75rem 0 2rem;
}
.kitgrafik {
  margin: 0 0 2rem; padding: 1.25rem;
  border: 1px solid var(--linie-10); border-radius: var(--radius); background: var(--flaeche-2);
  /* Die Grafiken sind 560 Einheiten breit. Auf 390 px schrumpft das auf rund
     60 Prozent, und eine 10-Einheiten-Beschriftung landet bei 6 px -- unlesbar.
     Am 11.09.2026 im Bildschirmfoto der Preisleiter gesehen.
     Deshalb behaelt die Grafik hier eine Mindestbreite und scrollt in IHREM
     Kasten, statt die ganze Seite breit zu machen. Die Seite selbst scrollt
     weiterhin nicht waagerecht -- das prueft werkzeuge/beweis-kit.mjs. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 560 px ist die natuerliche Breite der Grafiken. Bei genau dieser Breite
   entspricht eine Schrifteinheit einem Pixel, und die kleinste Beschriftung
   bleibt bei 10 px statt bei 8,6 (gemessen am 11.09.2026 mit 480 px). */
.kitgrafik svg { min-width: 560px; }
@media (min-width: 560px) { .kitgrafik svg { min-width: 0; } }
.kittext { font-size: var(--t-gross); line-height: 1.65; color: var(--ink-75); }
.kittext strong { color: var(--ink); }

/* Der Aufklapper fuer alles ueber 120 Woerter. Gleiche Bauform wie jedes andere
   <details> der Seite. */
.aufklapp-kit { margin: 2rem 0; }
.aufklapp-kit > summary {
  cursor: pointer; padding: 1rem; font-weight: 700; font-size: var(--t-klein);
  min-height: var(--tippflaeche); display: flex; align-items: center;
}
.aufklapp-kit .innen { padding: 0 1rem 1rem; font-size: var(--t-klein); line-height: 1.6; color: var(--ink-75); }
.aufklapp-kit h4 { margin: 1.25rem 0 .5rem; font-size: var(--t-text); font-weight: 700; color: var(--ink); }
.aufklapp-kit ul, .aufklapp-kit ol { margin: .5rem 0 .5rem 1.25rem; }
.aufklapp-kit li { margin-bottom: .5rem; }
.aufklapp-kit blockquote {
  margin: .75rem 0; padding: .875rem 1rem;
  border-left: 3px solid var(--clay-blue); background: var(--flaeche-2);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.aufklapp-kit table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: var(--t-mikro); }
.aufklapp-kit th, .aufklapp-kit td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0; border-top: 1px solid var(--linie-10); }

/* Die Uebung. Ein Feld je Zeile, immer. Zwei Spalten waeren auf 390 px
   unbedienbar, und auf dem Desktop liest sich eine Spalte ohnehin besser. */
.kitform { margin-top: 1rem; }
.kitfeld { margin-bottom: 1.75rem; }
.kitfeld label { display: block; font-weight: 700; font-size: var(--t-klein); margin-bottom: .5rem; }
.kitfeld .feld { width: 100%; min-height: var(--tippflaeche); font-size: 1rem; }
/* WebKit gibt einem <select> seine eigene Hoehe und ignoriert min-height, solange
   das Standardaussehen gilt. Gemessen am 15.09.2026: 27 px statt 44 auf 390 px --
   unter der Tippflaechengrenze aus ADR 0013. `appearance: none` gibt die Hoehe
   frei; Rahmen, Radius und Farbe kommen weiter aus .feld. */
.kitfeld select.feld {
  appearance: none; -webkit-appearance: none;
  height: var(--tippflaeche); padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
.kitfeld textarea.feld { min-height: 5rem; resize: vertical; line-height: 1.5; }
.kitfeld .mikro { margin-top: .375rem; color: var(--ink-62); }
.kitbeispiel { color: var(--ink-48); font-style: normal; }

/* Das Ergebnisfeld. Es ist der Moment, in dem aus Ausfuellen ein Ergebnis wird,
   und sieht deshalb anders aus als die Felder darueber. */
.kitergebnis {
  margin: 2rem 0; padding: 1.5rem;
  border-radius: var(--radius); background: var(--ink); color: var(--mist);
}
.kitergebnis .augenmerk { color: var(--mist-62); }
.kitsatz { margin: .75rem 0 1.25rem; font-size: var(--t-gross); line-height: 1.5; }
.kitergebnis .kitsatz { color: var(--mist); }
.kitpre { white-space: pre-wrap; font-family: inherit; }
.kitergebnis .knopf-hell { background: none; border-color: var(--mist-62); color: var(--mist); }

.kitweiter { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
@media (min-width: 560px) { .kitweiter { flex-direction: row; align-items: center; gap: 1.25rem; } }
.kitweiter .mikro { color: var(--ink-62); }

.kitblatt h2 { margin-top: 2.5rem; }
.kitblatt .kitsatz { color: var(--ink); }
.kitschluss { padding-top: 2rem; border-top: 1px solid var(--linie-10); }

/* Als PDF sichern: Der Druckdialog bekommt nur das Blatt, nichts drumherum. */
@media print {
  .kopf, .seitenfuss, .fuss, .kitband, .kitweiter, .kitschluss, .zustimmung { display: none !important; }
  .kitrahmen, .huelle { max-width: none; padding: 0; margin: 0; }
  .kitgrafik { border-color: #ccc; background: none; break-inside: avoid; }
  .kitbaustein { margin: 0; }
  .kitsatz { color: #000; }
  body { background: #fff; }
  h2 { break-after: avoid; }
}

/* ---------------------------------------------------------------- Kalender */
/* Die Buchungsansicht (ADR 0030). Gebaut aus denselben Tokens wie alles andere:
   --radius-klein, --linie-15, --clay-blue, --flaeche, --tippflaeche. Kein
   eigener Stil, keine neue Leiste -- die Knoepfe sind dieselbe Bauform wie die
   Fit-Kaestchen, nur nebeneinander statt untereinander. */
.kalender { margin-top: 1.5rem; }
.kaltage { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.kaltag, .kalzeit {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: var(--t-klein);
  min-height: var(--tippflaeche); padding: 0 1rem;
  border: 1px solid var(--linie-15); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--ink);
  transition: border-color var(--zeit-schnell) var(--kurve), background var(--zeit-schnell) var(--kurve);
}
.kaltag:hover, .kalzeit:hover { border-color: var(--clay-blue); }
.kaltag.gewaehlt { border-color: var(--ink); background: var(--ink); color: var(--mist); }
.kalzeit.gewaehlt { border-color: var(--clay-blue); background: var(--clay-blue); color: var(--mist); }
.kalzeiten {
  display: grid; gap: .5rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
.kalzeit { min-width: 0; padding: 0 .5rem; text-align: center; font-variant-numeric: tabular-nums; }
.kalfuss { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kalfuss .mikro { color: var(--ink-62); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------- Beweise */
.beweisreihe { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .beweisreihe { grid-template-columns: repeat(3, 1fr); } }
.beweis { border: 1px solid var(--linie-10); border-radius: var(--radius); background: var(--mist); padding: 1.75rem; }
.beweis h3 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.beweis p { margin-top: 1rem; color: var(--ink-64); }
.beweis-tinte { border-radius: var(--radius); background: var(--ink); color: var(--mist); padding: 1.75rem; border: 1px solid var(--ink); }
.beweis-tinte h3 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.beweis-tinte p { margin-top: 1rem; color: var(--mist-70); }

.grundsatz {
  margin-top: 1.25rem; display: grid; gap: 1.75rem; align-items: center;
  border-top: 1px solid var(--linie-10); border-bottom: 1px solid var(--linie-10);
  padding: 1.75rem 0;
}
@media (min-width: 768px) { .grundsatz { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); } }
.grundsatz .satz {
  margin-top: 1rem; max-width: 34ch; font-family: var(--schrift-titel);
  font-size: 1.875rem; font-weight: 700; line-height: 1.2; overflow-wrap: break-word;
}
@media (min-width: 768px) { .grundsatz .satz { font-size: 2.25rem; } }

/* ------------------------------------------------------------------ Rechner */
.rechnerkasten {
  border-radius: var(--radius-gross); background: var(--ink); color: var(--mist);
  padding: 1.5rem; box-shadow: var(--schatten-mechanisch); min-width: 0;
}
@media (min-width: 640px) { .rechnerkasten { padding: 2rem; } }
.regler { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .regler { grid-template-columns: repeat(3, 1fr); } }
.regler label { display: block; }
.regler .beschriftung { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: var(--t-klein); color: var(--mist-70); }
.regler .beschriftung strong { font-family: var(--schrift-titel); color: var(--mist); font-variant-numeric: tabular-nums; }

/* Das Zahlenfeld sieht aus wie der Wert im Entwurf — gleiche Schrift, gleiches
   Gewicht, gleiche Ausrichtung, kein Rahmen. Es IST aber ein Eingabefeld und
   deshalb 44 px hoch (ADR 0013). Der Entwurf setzt den Wert als Text, dort ist
   die Zeile 26 px. Die 18 px Unterschied faengt die Beschriftungszeile auf:
   ihr `margin-bottom: .75rem` ist entfallen, dafuer ist das Feld hoeher. */
.regler .wertfeld {
  width: 8ch; padding: 0 .25rem; border: 0; background: transparent; color: var(--mist);
  font-family: var(--schrift-titel); font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; min-height: var(--tippflaeche); font-size: 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--mist) 20%, transparent); border-radius: 0;
}
.regler .wertfeld:focus-visible { outline: 2px solid var(--clay-yellow); outline-offset: 2px; }

/* Der Schieberegler. accent-color faerbt Bahn und Griff; die Hoehe kommt von
   der Tippflaeche, nicht vom Aussehen. */
.regler input[type=range] {
  width: 100%; accent-color: var(--clay-coral); min-height: var(--tippflaeche);
  background: transparent; cursor: pointer;
}
.regler input[type=range]:focus-visible { outline: 2px solid var(--clay-yellow); outline-offset: 4px; }

.ergebnisflaeche {
  margin-top: 2rem; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--mist) 12%, transparent);
  background: color-mix(in oklab, var(--mist) 6%, transparent); padding: 1.5rem;
}
.ergebnisflaeche .betrag {
  margin-top: .5rem; font-family: var(--schrift-titel);
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; line-height: 1;
  overflow-wrap: break-word; font-variant-numeric: tabular-nums;
}
.balken { margin-top: 1.25rem; height: .5rem; overflow: hidden; border-radius: var(--pille); background: color-mix(in oklab, var(--mist) 12%, transparent); }
.balken > i { display: block; height: 100%; border-radius: var(--pille); background: var(--clay-coral); transition: width var(--zeit) var(--kurve); }
.rechnerfuss { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--t-mikro); color: var(--mist-62); }
.rechnerfuss a { color: var(--mist); text-decoration: underline; text-underline-offset: 4px; }

/* Herleitung. Im Entwurf gibt es sie nicht — sie ist Pflicht bei uns:
   keine Zahl ohne sichtbaren Rechenweg (CLAUDE.md 4). */
.herleitung { margin-top: 1.25rem; border: 1px solid color-mix(in oklab, var(--mist) 12%, transparent); border-radius: var(--radius); }
.herleitung > summary {
  cursor: pointer; padding: .75rem 1rem; font-size: var(--t-klein); font-weight: 700;
  min-height: var(--tippflaeche); display: flex; align-items: center; color: var(--mist);
}
.herleitung > .innen { padding: 0 1rem 1rem; }
.herleitung table { width: 100%; border-collapse: collapse; font-size: var(--t-mikro); }
.herleitung th, .herleitung td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0;
  border-top: 1px solid color-mix(in oklab, var(--mist) 12%, transparent); color: var(--mist-70); }
.herleitung th { color: var(--mist); font-weight: 700; white-space: nowrap; }
.herleitung .formel { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Fitliste */
.fitliste { border-top: 1px solid var(--linie-10); border-bottom: 1px solid var(--linie-10); }
.fitzeile {
  display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linie-10); padding: .75rem 0; font-size: var(--t-klein);
  min-height: var(--tippflaeche);
  /* Gewicht ausdruecklich, nicht geerbt. `.buehne label` setzt 600; damit haette
     dieselbe Zeile auf der Startseite 400 und im Kontaktweg 600 getragen. */
  font-weight: 400;
}
.fitliste li:last-child .fitzeile { border-bottom: 0; }
/* Das native Kästchen bleibt da, wo es hingehört: es liegt durchsichtig über der
   GANZEN Zeile. Damit ist die Tippfläche die ganze 44-px-Zeile statt eines
   28-px-Kreises, es funktioniert ohne JavaScript, und Tastatur wie Vorlesesoftware
   bedienen weiterhin ein echtes Ankreuzfeld. Sichtbar ist `.kasten` daneben.

   Zwei Fallen, beide am 07.09.2026 aufgelaufen:
   1. Der Wähler muss `input[type=checkbox]` enthalten. Die allgemeine Regel weiter
      unten hat dieselbe Genauigkeit und steht später — ohne den Typ gewinnt sie,
      und dann steht ein zweites, natives Kästchen neben dem gestalteten.
   2. Ein auf 1 x 1 px geschrumpftes Feld lässt sich nicht anklicken: der Text
      darüber fängt den Klick ab. Deshalb durchsichtig und ganzflächig statt klein. */
.fitzeile { position: relative; }
/* Auch fuer Radios. Der Kontaktweg (Teil 2e) benutzt dieselbe Zeile mit
   type=radio statt type=checkbox -- und ohne diese Zeile griff der allgemeine
   Formularfeld-Stil: min-width 44px, position static, also ein SICHTBARES
   natives Radio mitten im Flex-Fluss neben dem gestalteten Kaestchen. Am
   11.09.2026 gemessen. */
.fitzeile input[type=checkbox], .fitzeile input[type=radio] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-width: 0; min-height: 0; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.fitzeile > span { position: relative; pointer-events: none; }
/* Das sichtbare Kaestchen.
   Bis zum 10.09.2026 hatte `.kasten` UEBERHAUPT KEINE Grundregel: Es gab nur die
   Zeile fuer den angehakten Zustand. Gemessen im Browser (daten/beweise/stilsperre/
   vorher.json): border 0px none, background transparent, radius 0. Es war also
   nicht "dezent", es war unsichtbar -- und ein Kaestchen, das man nicht sieht,
   fordert niemanden zum Abhaken auf. Das ist die Aenderung aus Teil 2b des
   Auftrags vom 10.09.2026, gebaut ausschliesslich aus vorhandenen Tokens:
   --radius-klein, --linie-18, --clay-blue, --mist, --zeit-schnell, --kurve. */
.fitzeile .kasten {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 2px solid var(--linie-18); border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: transparent;
  transition: background var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve),
              color var(--zeit-schnell) var(--kurve);
}
.fitzeile .kasten svg { width: 14px; height: 14px; }
/* Ein Radio ist rund, ein Haken eckig. Dieselbe Groesse, dieselben Tokens. */
.fitzeile input[type=radio] ~ .kasten { border-radius: 50%; }
.fitzeile:hover .kasten { border-color: var(--clay-blue); }
.fitzeile input[type=checkbox]:checked ~ .kasten, .fitzeile input[type=radio]:checked ~ .kasten { border-color: var(--clay-blue); background: var(--clay-blue); color: var(--mist); }
.fitzeile input[type=checkbox]:focus-visible ~ .kasten, .fitzeile input[type=radio]:focus-visible ~ .kasten { outline: 2px solid var(--clay-blue-text); outline-offset: 2px; }
.fitstand {
  margin-top: 1.75rem; display: inline-flex; align-items: center; gap: .75rem;
  border-radius: var(--pille); border: 1px solid var(--linie-15); padding: .75rem 1.25rem;
  min-height: var(--tippflaeche);
}
.fitstand strong { font-family: var(--schrift-titel); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.fitstand strong span { font-size: 1rem; color: var(--ink-62); }
.fitstand .urteil { font-size: var(--t-mikro); color: var(--ink-64); }

/* ------------------------------------------------------- Der Verlustmoment */
/* Koeder-Master, Regel 2: Der Verlustmoment bekommt eine eigene Flaeche, eine
   grosse Zahl, ein echtes Datum und Ruhe drumherum. Er ist der einzige
   Abschnitt, in dem der Akzent die Flaeche traegt. */
.verlust { background: var(--ink); color: var(--mist); }
/* Auf der Tintenflaeche kehren sich alle gedaempften Textfarben um. Ohne die
   naechste Zeile stand die Rubrikzeile „Was Warten kostet" dunkel auf dunkel:
   Kontrast 1,0, also unsichtbar. Gefunden am 07.09.2026 von werkzeuge/kontrast.mjs
   — Lighthouse hatte die Stelle nicht gemeldet. */
.verlust .augenmerk, .band-tinte .augenmerk, .auf-tinte .augenmerk { color: var(--mist-62); }
.verlust .rubrik .nr { color: color-mix(in oklab, var(--mist) 48%, transparent); }
.verlust .abschnitt-titel { color: var(--mist); }
.verlust .abschnitt-text { color: var(--mist-70); }
.verlustzahl {
  font-family: var(--schrift-titel); font-weight: 800; line-height: .95;
  font-size: clamp(3rem, 11vw, 8rem); color: var(--clay-coral);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.verlustdatum { margin-top: 1rem; font-size: var(--t-gross); color: var(--mist); }
.verlustreihe { margin-top: 3rem; display: grid; overflow: hidden; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--mist) 15%, transparent); }
@media (min-width: 640px) { .verlustreihe { grid-template-columns: repeat(3, 1fr); } }
.verlustreihe > div { padding: 1.75rem; border-right: 1px solid color-mix(in oklab, var(--mist) 15%, transparent); }
.verlustreihe > div:last-child { border-right: 0; }
.verlustreihe .wert { margin-top: 1rem; font-family: var(--schrift-titel); font-size: 2.25rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.verlustreihe .was { margin-top: .5rem; font-size: var(--t-klein); color: var(--mist-70); }

/* --------------------------------------------------------------- Formulare */
label { display: block; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url],
input:not([type]), select, textarea {
  width: 100%; min-height: var(--tippflaeche); padding: .625rem .875rem;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--mist);
  border: 1px solid var(--linie-18); border-radius: var(--radius-klein);
}
.auf-tinte input[type=text], .auf-tinte input[type=email], .auf-tinte input[type=tel],
.auf-tinte input:not([type]), .auf-tinte textarea, .auf-tinte select {
  background: color-mix(in oklab, var(--mist) 8%, transparent); color: var(--mist);
  border-color: color-mix(in oklab, var(--mist) 20%, transparent);
}
input[type=checkbox], input[type=radio] {
  width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem;
  flex: 0 0 auto; accent-color: var(--clay-blue); margin: 0;
}
button, input[type=submit] { font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.pruefkasten { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0; min-height: var(--tippflaeche); cursor: pointer; }
.pruefkasten span { font-size: var(--t-klein); line-height: 1.5; }

/* ------------------------------------------------------------------- Text */
.klein  { font-size: var(--t-klein); color: var(--ink-64); }
.mikro  { font-size: var(--t-mikro); color: var(--ink-62); line-height: 1.55; }
.auf-tinte .klein, .band-tinte .klein, .verlust .klein { color: var(--mist-70); }
.auf-tinte .mikro, .band-tinte .mikro, .verlust .mikro { color: var(--mist-62); }
.zahl { font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; }
.textspalte { max-width: var(--textbreite); }
.textspalte p + p { margin-top: 1rem; }

/* Herkunftszeichen. Jede Zahl traegt es — entweder Quelle oder Annahme. */
.annahme, .quelle {
  display: inline-block; font-size: var(--t-mikro); font-weight: 700;
  border: 1px solid currentColor; border-radius: var(--pille);
  padding: 0 .5rem; vertical-align: middle; line-height: 1.5; white-space: nowrap;
}
.annahme { color: var(--clay-coral-text); }
.quelle  { color: var(--clay-blue-text); }
.verlust .annahme, .band-tinte .annahme, .auf-tinte .annahme { color: var(--clay-yellow); }
.verlust .quelle, .band-tinte .quelle, .auf-tinte .quelle { color: var(--mist); }

/* Die Bauformtabelle in Baustein 6 hat fuenf Spalten und steht in einem
   Scrollkasten. Auf 390 px lagen damit 1.496 Bildpunkte hinter einem
   Seitwaertswisch -- und dort steht der Nutzwert, die Spalte „Voraussetzung".
   Schmal wird sie deshalb gestapelt: je Bauform ein Block, die Spaltennamen
   als Beschriftung davor. Nur diese Tabelle, ueber .kitwahl; alle anderen
   Tabellen im Kit bleiben unveraendert. */
.kitwahl { min-width: 0 !important; }
@media (max-width: 640px) {
  .tabellenrahmen:has(> .kitwahl) { overflow-x: visible; }
  .kitwahl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kitwahl tr { display: block; border-bottom: 1px solid var(--linie-18); padding: .75rem 0; }
  .kitwahl td { display: block; width: auto; border-bottom: none; padding: .125rem 0; }
  .kitwahl td::before { content: attr(data-spalte) ": "; color: var(--ink-48); font-size: var(--t-mikro); }
  .kitwahl td:first-child::before { content: none; }
}

/* Die Stufentabellen im Kit sind zweispaltig und tragen ganze Saetze. Sie
   brauchen KEINEN Scrollkasten, sie brauchen Umbruch. Befund vom 15.09.2026:
   Mit .tabellenrahmen und dessen `min-width: max-content` lag auf 390 px jede
   Zeile zur Haelfte hinter einem Seitwaertswisch -- und genau dort steht der
   Nutzwert. Die erste Spalte bekommt eine feste, schmale Breite, damit die
   Beschriftung nicht umbricht und der Satz daneben den Rest bekommt. */
.kitstufe { margin: 1.25rem 0 0; table-layout: fixed; width: 100%; }
.kitstufe td:first-child, .kitstufe th:first-child { width: 8.5rem; }
@media (max-width: 480px) {
  .kitstufe { table-layout: auto; }
  /* `td:first-child` oben hat hoehere Spezifitaet als `td` hier -- und
     Medienabfragen zaehlen dabei nicht mit. Ohne den gleich spezifischen
     Selektor blieb die Stufenueberschrift auf 390 px in einem 136 px breiten
     Kasten stehen, statt ueber die ganze Breite zu laufen. */
  .kitstufe td, .kitstufe th,
  .kitstufe td:first-child, .kitstufe th:first-child { display: block; width: auto; border-bottom: none; padding: 0; }
  .kitstufe tr { display: block; border-bottom: 1px solid var(--linie-10); padding: .75rem 0; }
  .kitstufe thead tr { border-bottom: 1px solid var(--linie-18); }
  .kitstufe td:first-child { padding-bottom: .25rem; }
}

/* Tabellen scrollen in ihrem eigenen Kasten, nie die Seite. */
.tabellenrahmen { overflow-x: auto; max-width: 100%; margin: 2rem 0 0; }
.tabellenrahmen > table { min-width: max-content; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-klein); text-align: left; }
th, td { border-bottom: 1px solid var(--linie-10); padding: .75rem 1rem .75rem 0; vertical-align: top; }
th { font-weight: 700; }
caption { text-align: left; font-size: var(--t-mikro); color: var(--ink-62); padding-bottom: .5rem; }

details:not(.herleitung) { border: 1px solid var(--linie-10); border-radius: var(--radius); background: var(--mist); }
details:not(.herleitung) > summary { cursor: pointer; padding: 1rem; font-weight: 700; min-height: var(--tippflaeche); display: flex; align-items: center; font-size: var(--t-klein); }
details:not(.herleitung) > *:not(summary) { padding: 0 1rem 1rem; }
/* `.aufklapp` erbt die drei Zeilen darueber NICHT. Auf dem Desktop ist es immer
   offen und soll gar nicht als Kasten auffallen -- also kein Rahmen, kein Grund,
   keine Polsterung. Diese vier Zeilen stehen bewusst HINTER der allgemeinen
   Regel: Sie haben dieselbe Genauigkeit, und bei Gleichstand gewinnt die
   spaetere. Am 10.09.2026 von der Stil-Sperre gefunden -- das Leistungsraster
   hatte auf einmal 16 px Innenabstand, wo vorher 0 war. Der erste Anlauf stand
   weiter oben im Blatt und wurde deshalb ueberstimmt. */
details.aufklapp { border: 0; background: none; border-radius: 0; }
details.aufklapp > *:not(summary) { padding: 0; }
@media (max-width: 899px) {
  details.aufklapp { border: 1px solid var(--linie-10); border-radius: var(--radius); background: var(--flaeche); }
  details.aufklapp > *:not(summary) { padding: 0 1rem 1rem; }
  .band-stark details.aufklapp { background: none; border-color: var(--linie-15); }
}

/* ------------------------------------------------------------------- Fuss */
.seitenfuss { border-top: 1px solid var(--linie-10); }
.seitenfuss .huelle { padding-top: 2rem; padding-bottom: 2rem; }
.fussreihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.seitenfuss nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--t-klein); }
.seitenfuss nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tippflaeche); }
.seitenfuss .mikro { max-width: 80ch; margin-top: 1.25rem; }

/* -------------------------------------------------------- Zustimmungsleiste */
.zustimmung {
  position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--ink); color: var(--mist);
  border-top: 1px solid color-mix(in oklab, var(--mist) 15%, transparent);
}
.zustimmung .innen {
  margin: 0 auto; max-width: var(--seitenbreite); padding: 1rem var(--rand-seite);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between;
}
.zustimmung p { font-size: var(--t-mikro); color: var(--mist-70); max-width: 70ch; line-height: 1.55; }
.zustimmung button {
  min-height: var(--tippflaeche); padding: .625rem 1.25rem; border-radius: var(--radius-klein);
  font-size: var(--t-klein); font-weight: 700; border: 1px solid var(--mist); background: var(--mist); color: var(--ink);
}
.zustimmung button.leise { background: transparent; color: var(--mist); border-color: color-mix(in oklab, var(--mist) 30%, transparent); }

/* ------------------------------------------------------------ Inhaltsseiten */
/* Impressum, Datenschutz, Fragen, Annahmen und die uebrigen Textseiten: gleiche
   Optik, ruhigere Bahn. Eine Textspalte auf derselben Buehne. */
/* `.textseite` ist selbst die Huelle: die Inhaltsseiten haengen direkt im <main>,
   ohne Zwischenkasten. Wer sie doch in eine .huelle steckt, bekommt das gleiche
   Bild -- der zweite Wähler faengt das ab. */
.textseite, .textseite > .huelle {
  margin: 0 auto; max-width: 900px;
  padding: 4rem var(--rand-seite) var(--abschnitt);
}
.textseite > .huelle { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) { .textseite { padding-left: var(--rand-seite-md); padding-right: var(--rand-seite-md); } }
.textseite h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }
.textseite h2 { margin-top: 3rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.textseite h3 { margin-top: 2rem; font-size: 1.125rem; font-weight: 700; }
.textseite p, .textseite li { max-width: 68ch; line-height: 1.75; }
.textseite p { margin-top: 1rem; color: var(--ink-75); }
.textseite ul, .textseite ol { margin-top: 1rem; padding-left: 1.25rem; }
.textseite ul { list-style: disc; }
.textseite ol { list-style: decimal; }
.textseite li { margin-top: .5rem; color: var(--ink-75); }
.textseite a { color: var(--clay-blue-text); text-underline-offset: 3px; }
.textseite dl { margin-top: 1rem; }
.textseite dt { font-weight: 700; margin-top: 1.25rem; }
.textseite dd { margin: .25rem 0 0; color: var(--ink-75); max-width: 68ch; }

/* Frage-Antwort-Bloecke. Sie tragen die FAQ-Strukturdaten und sind zugleich das,
   was eine Antwortmaschine zitiert (GEO). Darum sichtbarer Text, kein Aufklappen
   ohne Inhalt im Quelltext. */
.fragenliste { margin-top: 2rem; border-top: 1px solid var(--linie-10); }
.fragenliste > li { border-bottom: 1px solid var(--linie-10); padding: 1.5rem 0; max-width: none; }
.fragenliste h3 { font-family: var(--schrift-titel); font-size: 1.125rem; font-weight: 700; margin: 0; max-width: 60ch; }
.fragenliste p { margin-top: .625rem; color: var(--ink-75); max-width: 68ch; }

.hinweis { border-left: 3px solid var(--clay-coral-text); padding: .25rem 0 .25rem 1rem; margin-top: 1.5rem; }
.hinweis p { margin-top: 0; }

/* -------------------------------------------------------------- Ausrichtung */
.mittig { text-align: center; }
.abstand-oben { margin-top: 2rem; }
.abstand-oben-gross { margin-top: 3rem; }
[hidden] { display: none !important; }