/* Das Aussehen von easyabschluss.de.
 *
 * BEWUSST OHNE FRAMEWORK UND OHNE EXTERNE SCHRIFTEN - der Grund hat sich mit dem
 * Umbau zur Marketingseite nicht geaendert: Diese Seiten muessen auch dann noch
 * stehen, wenn sonst nichts laeuft. Eine Pruefstelle (Microsoft, Google, ein
 * Zahlungsdienst) ruft die Datenschutz-Adresse ohne Vorwarnung ab, und ein
 * fehlgeschlagener CDN-Aufruf waere genau dort ein Ausfall. Google Fonts scheidet
 * zusaetzlich aus Datenschutzgruenden aus (Einbindung uebertraegt die IP des
 * Besuchers in die USA) - eine eigene Schrift muesste im Repo liegen, siehe README.
 *
 * DIE MARKENFARBE IST DIE DER ANWENDUNG: #087f46 / #075d33, identisch mit
 * frontend/src/thema.ts und styles.css. Website und Anwendung sollen nicht
 * auseinanderlaufen.
 *
 * AUFBAU: erst die Werte, dann Grundtypografie, dann die Kopf- und Fusszeile (auf
 * allen Seiten gleich), dann die Bausteine der Dokumentseiten (Rechtstexte,
 * Funktionen, Kontakt), zuletzt die der Startseite.
 */

/* --- Schrift ---------------------------------------------------------------------- */
/*
 * INTER, SELBST AUSGELIEFERT - nicht von Google. Die Anwendung nennt Inter seit jeher
 * an erster Stelle, laedt sie aber nirgends; faktisch lief beides auf der Systemschrift.
 * Jetzt liegt sie im Repository (schrift/, 48 kB, SIL Open Font License, Lizenztext
 * daneben) und wird vom eigenen Server ausgeliefert: kein fremder Aufruf, keine
 * IP-Uebertragung in die USA, kein Ausfall, wenn ein CDN weg ist.
 *
 * VARIABEL, UND DAS IST DER EIGENTLICHE GEWINN: Diese Seite setzt Zwischengewichte
 * (550 fuer Navigation, 650 fuer Knoepfe, 750 fuer die Wortmarke, 760 fuer die
 * Vorlaufzeile) - genau wie die Anwendung. Eine Systemschrift kennt die nicht und
 * springt auf 400 oder 700. Mit der variablen Fassung stimmen sie wirklich.
 */
@font-face {
  font-family: "Inter";
  src: url("schrift/inter-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Werte ------------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* ALLE WERTE HIER SIND DIE DER ANWENDUNG, nicht geschaetzt: uebernommen aus
     frontend/src/thema.ts, styles.css und bausteine.css (abgeglichen 10.09.2026).
     Wo die Website etwas braucht, das die Anwendung nicht hat (Dunkelmodus, grosse
     Ueberschriften), steht es als Zusatz dabei und ist als solcher gekennzeichnet. */

  /* Markengruen - die Skala aus thema.ts, Index 0 bis 9 */
  --gruen-0: #edf8f1;
  --gruen-1: #e4f5eb;
  --gruen-2: #c4e8d3;
  --gruen-3: #9dd8b7;
  --gruen-5: #3ba56a;
  --gruen: #087f46;
  --gruen-hover: #0a6f3e;
  --gruen-dunkel: #075d33;
  --gruen-tief: #103c2d;
  --gruen-schleier: #edf8f1;
  --gruen-rand: #b8ddc6;
  --gruen-rand-hover: #8dc7a6;

  /* Flaechen und Text */
  --grund: #ffffff;
  --grund-2: #f6f7f9;
  --grund-3: #f8fafb;
  --tinte: #24352b;
  --text: #1e293b;
  --gedaempft: #52616e;
  --leise: #607168;
  --linie: #e7ebef;
  --linie-stark: #d6dce2;
  --kasten: #f8fafb;

  /* Signalfarben */
  --rot: #b42318;
  --fokus: #f0b429;

  /* Form - die Radien der Anwendung: 6 Feld, 7 Knopf, 10 Karte, 999 Pille */
  --r-feld: 6px;
  --r-knopf: 7px;
  --r-karte: 10px;
  --r-gross: 14px;
  --r-rund: 999px;

  /* Schatten sind gruenstichig, nie neutrales Schwarz - so macht es die Anwendung */
  --schatten-1: 0 1px 6px rgba(11, 128, 71, 0.08);
  --schatten-2: 0 8px 28px #15221d14;
  --schatten-3: 0 18px 48px rgba(16, 32, 24, 0.22);

  /* Der Verlauf, mit dem die Anwendung besondere Bloecke auszeichnet */
  --verlauf: linear-gradient(135deg, #f4fcf7, #fff);

  /* Breiten */
  --spalte: 1050px;
  --spalte-schmal: 46rem;
  --lesebreite: 62ch;

  /* Schrift. Inter steht in der Anwendung an erster Stelle, wird dort aber nirgends
     geladen - faktisch laeuft beides auf system-ui. Eine selbst ausgelieferte Inter
     waere der naechste Schritt (siehe README), kein Bruch. */
  --schrift: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Zwischengewichte statt runder Stufen - das gibt der Oberflaeche ihren Klang */
  --gewicht-knopf: 650;
  --gewicht-nav: 550;
  --gewicht-marke: 750;
  --gewicht-vorlauf: 760;
}

/* DUNKELMODUS IST EIN ZUSATZ DER WEBSITE. Die Anwendung kennt heute nur das helle
   Schema (Kommentar in thema.ts). Die Marke bleibt dieselbe Farbe, nur heller
   gesetzt, damit sie auf dunklem Grund lesbar bleibt - eine Website kann sich dem
   Systemwunsch des Besuchers nicht verweigern, ohne billig zu wirken. */
@media (prefers-color-scheme: dark) {
  :root {
    --gruen-0: #10241b;
    --gruen-1: #14301f;
    --gruen: #34d98a;
    --gruen-hover: #4ee39a;
    --gruen-dunkel: #6be4ac;
    --gruen-tief: #0c2019;
    --gruen-schleier: #10241b;
    --gruen-rand: #1d4433;
    --gruen-rand-hover: #2a5e47;

    --grund: #0f1215;
    --grund-2: #14181c;
    --grund-3: #171c21;
    --tinte: #f2f5f7;
    --text: #e4e9ed;
    --gedaempft: #a0a9b3;
    --leise: #7b848e;
    --linie: #262c33;
    --linie-stark: #39424b;
    --kasten: #171c21;

    --rot: #f0796d;

    --verlauf: linear-gradient(135deg, #14261d, #14181c);

    --schatten-1: 0 1px 6px rgba(0, 0, 0, 0.4);
    --schatten-2: 0 8px 28px rgba(0, 0, 0, 0.45);
    --schatten-3: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}

/* --- Grundtypografie -------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--tinte);
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
}

h3 {
  font-size: 1.03rem;
  margin: 1.85rem 0 0.4rem;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.3rem;
}

a {
  color: var(--gruen);
}

a:hover {
  color: var(--gruen-dunkel);
}

strong {
  color: var(--tinte);
}

/* DER FOKUSRING IST BERNSTEIN, NICHT GRUEN - genau wie in der Anwendung, und aus
   demselben Grund: Auf gruenen Flaechen (Knopf, Kopfriegel) waere ein gruener Ring
   unsichtbar. 3px mit 2px Abstand, wie dort. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* --- Kopfzeile, auf allen Seiten dieselbe ----------------------------------------- */
/*
 * SIE KLEBT OBEN, weil die Handlungsaufforderung sonst nach dem ersten Bildschirm
 * verschwindet - auf einer Seite, die ueberzeugen soll, ist der Weg zur Anmeldung
 * immer einen Blick entfernt. Halbdurchsichtig mit Weichzeichner, damit der Inhalt
 * darunter sichtbar bleibt und die Leiste nicht wie ein Deckel wirkt.
 */

.topleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--linie);
}

.topleiste-inhalt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marke {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tinte);
  flex: none;
}

/* Wortmarke: Zeichen + zweigeteilter Name. Dieselben Klassennamen, Gewichte (400/750)
   und der Abstand (0,55rem) wie frontend/src/marke.tsx und bausteine.css der
   Anwendung - uebernommen, nicht nachgebaut. */
.marke-inhalt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.marke-inhalt svg {
  flex: none;
  color: var(--gruen);
}

.marke-wort {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
}

.marke-easy {
  font-weight: 400;
  opacity: 0.82;
}

.marke-abschluss {
  font-weight: 750;
}

nav.wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.92rem;
  margin-left: auto;
}

/* :not(.knopf) IST HIER NICHT KOSMETIK: Ohne den Ausschluss gewinnt "nav.wege a"
   (Spezifitaet 0-1-2) gegen ".knopf-haupt" (0-1-0), und der Knopf in der Kopfzeile
   bekommt graue Navigationsschrift auf gruenem Grund. Genau so ist es passiert. */
nav.wege a:not(.knopf) {
  color: var(--gedaempft);
  font-weight: var(--gewicht-nav);
  text-decoration: none;
  white-space: nowrap;
}

nav.wege a:not(.knopf):hover {
  color: var(--gruen);
}

nav.wege a[aria-current="page"] {
  color: var(--tinte);
  font-weight: 600;
}

/* Die Rechtslinks gehoeren in den Fuss, nicht neben die Handlungsaufforderung - oben
   stehen sie nur, solange Platz ist. */
@media (max-width: 60rem) {
  nav.wege .zweitrangig {
    display: none;
  }
}

/* --- Knoepfe ---------------------------------------------------------------------- */
/*
 * EIN PRIMAERER KNOPF, IMMER MIT DEMSELBEN WORT ("Kostenlos starten"). Wechselnde
 * Beschriftungen fuer dieselbe Handlung kosten den Leser jedes Mal eine Entscheidung.
 */

/* FORM UND GEWICHT SIND DIE DER ANWENDUNG: 7px Radius, Gewicht 650, dasselbe Gruen
   mit demselben dunkleren Hover (#0a6f3e). Wer hier klickt und drueben landet, soll
   denselben Knopf wiedererkennen. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--r-knopf);
  border: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: var(--gewicht-knopf);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out,
    border-color 120ms ease-out, color 120ms ease-out;
}

.knopf-haupt {
  background: var(--gruen);
  color: #ffffff;
  box-shadow: 0 1px 6px rgba(11, 128, 71, 0.24);
}

.knopf-haupt:hover {
  background: var(--gruen-hover);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 128, 71, 0.26);
}

@media (prefers-color-scheme: dark) {
  .knopf-haupt {
    color: #06231a;
  }

  .knopf-haupt:hover {
    color: #06231a;
  }
}

.knopf-haupt:active {
  transform: translateY(0);
}

/* Der Sekundaerknopf der Anwendung, Zeichen fuer Zeichen: weisser Grund, gruener
   Text, gruenlicher Rand, gruener Rand beim Ueberfahren. */
.knopf-leise {
  background: var(--grund);
  color: var(--gruen-dunkel);
  border-color: var(--gruen-rand);
}

.knopf-leise:hover {
  background: var(--gruen-0);
  border-color: var(--gruen);
  color: var(--gruen-dunkel);
}

.knopf-klein {
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
}

/* --- Fusszeile -------------------------------------------------------------------- */

.fussband {
  border-top: 1px solid var(--linie);
  background: var(--grund-2);
  margin-top: 5rem;
}

.fuss {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;
  color: var(--gedaempft);
  font-size: 0.92rem;
}

.fuss a {
  color: var(--gedaempft);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--gruen);
  text-decoration: underline;
}

.fuss-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 48rem) {
  .fuss-raster {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.fuss h4 {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss li {
  margin-bottom: 0.42rem;
}

.fuss-schluss {
  border-top: 1px solid var(--linie);
  padding-top: 1.5rem;
  font-size: 0.86rem;
}

/* Auf den Dokumentseiten haengt die Fusszeile ohne Band unter dem Text. */
.rahmen > footer.fuss {
  max-width: none;
  border-top: 1px solid var(--linie);
  margin-top: 3.5rem;
  padding: 1.25rem 0 0;
}

/* --- Dokumentseiten (Rechtstexte, Funktionen, Kontakt) ---------------------------- */

.rahmen {
  max-width: var(--spalte-schmal);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.rahmen h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  margin-bottom: 0.75rem;
}

.rahmen h2 {
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

.rahmen h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 2rem;
}

.stand {
  color: var(--gedaempft);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* Der eine Satz, der zaehlt - wer nur eine Zeile liest, soll die richtige lesen. */
.hinweis {
  background: var(--gruen-schleier);
  border-left: 3px solid var(--gruen);
  border-radius: 0 var(--r-feld) var(--r-feld) 0;
  padding: 1.15rem 1.35rem;
  margin: 0 0 1.5rem;
}

.hinweis p:last-child {
  margin-bottom: 0;
}

/* DREI FRAGEN, GROSS GESETZT. Die Ziffer traegt hier die Arbeit: Wer die Seite
   ueberfliegt, soll an "1 2 3" haengenbleiben und die Fragen mitnehmen, ohne den
   Absatz darunter zu lesen. Deshalb eigene Ziffern statt der Browserziffern - die
   sind zu klein und stehen zu nah. */
ol.fragenliste {
  list-style: none;
  counter-reset: frage;
  margin: 0 0 1.6rem;
  padding: 0;
}

ol.fragenliste li {
  counter-increment: frage;
  position: relative;
  padding: 0 0 0 3.1rem;
  margin-bottom: 1.1rem;
  font-size: 1.15rem;
  line-height: 1.45;
}

ol.fragenliste li::before {
  content: counter(frage);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-rund);
  background: var(--gruen-schleier);
  color: var(--gruen);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--gedaempft);
  margin: 0 0 1.75rem;
}

.raster-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin: 0 0 1.5rem;
}

@media (max-width: 34rem) {
  .raster-zwei {
    grid-template-columns: 1fr;
  }
}

.raster-zwei h3 {
  margin-top: 0;
}

.raster-zwei ul {
  margin-bottom: 0;
}

/* --- Startseite: Baender und Spalten ---------------------------------------------- */

.bereich {
  padding: 5.5rem 1.5rem;
}

.bereich-eng {
  padding: 4rem 1.5rem;
}

.bereich-getoent {
  background: var(--grund-2);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

/*
 * DAS DUNKLE BAND. Sein Gruen ist #103c2d - der Kopfriegel der Anwendung, also das
 * Erste, was ein Kunde drueben sieht. Hier traegt es den einen Abschnitt, der uns von
 * allen anderen unterscheidet: die gespeicherte Begruendung einer Buchung.
 *
 * NUR EINMAL AUF DER SEITE. Ein Blickfang, den man zweimal einsetzt, ist keiner mehr.
 */
.bereich-dunkel {
  background: var(--gruen-tief);
  color: #dbe9e1;
}

.bereich-dunkel h2,
.bereich-dunkel h3,
.bereich-dunkel strong {
  color: #ffffff;
}

/* DOPPELTE KLASSE IST HIER NOETIG, KEIN SCHMUCK: ".bereich .vorlauf" und
   ".beweis .beleg" stehen weiter unten in dieser Datei und haben dieselbe
   Spezifitaet - bei Gleichstand gewinnt die spaetere Regel. Ohne das zusaetzliche
   ".bereich" stuende die Vorlaufzeile dunkelgruen auf dunkelgruen und der Belegblock
   haette weissen Grund mit hellgrauem Text. Beides gemessen, beides unlesbar. */
.bereich.bereich-dunkel .vorlauf {
  color: #7fd4a6;
}

.bereich-dunkel .unterzeile {
  color: #b7d0c2;
}

.bereich-dunkel .karte {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.bereich-dunkel .karte:hover {
  border-color: rgba(127, 212, 166, 0.45);
  background: rgba(255, 255, 255, 0.07);
}

.bereich-dunkel .karte p {
  color: #b7d0c2;
}

.bereich-dunkel .beweis {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(127, 212, 166, 0.28);
}

.bereich-dunkel .beweis p {
  color: #cfe3d7;
}

.bereich-dunkel .beweis .beleg {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(127, 212, 166, 0.22);
  color: #a8c9b7;
}

@media (prefers-color-scheme: dark) {
  .bereich-dunkel {
    background: #0c1a14;
  }
}

.spalte {
  max-width: var(--spalte);
  margin: 0 auto;
}

.spalte-schmal {
  max-width: 44rem;
  margin: 0 auto;
}

/* H1 UND H2 SEHEN IM ABSCHNITT GLEICH AUS, und das ist Absicht: Welche Ebene
   eine Ueberschrift hat, ist eine Frage der Dokumentstruktur (fuer Vorleser,
   Suchmaschinen und Sprachmodelle) - nicht der Schriftgroesse. Die
   Funktionsseite und die Preisseite tragen ihre H1 deshalb im selben Gewand wie
   jede Abschnittsueberschrift. */
.bereich h1,
.bereich h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem);
  line-height: 1.18;
  margin: 0 0 1rem;
}

/* Die "Eyebrow"-Zeile der Anwendung, unveraendert uebernommen: Gewicht 760,
   0,73rem, 0,1em Sperrung, Markengruen. */
.bereich .vorlauf {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: var(--gewicht-vorlauf);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 0.9rem;
}

.bereich .unterzeile {
  font-size: 1.1rem;
  color: var(--gedaempft);
  max-width: 42rem;
  margin: 0 0 2.5rem;
}

/* --- Startseite: Kopfbereich ------------------------------------------------------ */
/*
 * DER HINTERGRUND ZITIERT EIN KONTENBLATT: waagerechte Linien wie liniertes Papier,
 * dazu links eine gruene Randlinie, wie sie ein Journal hat. Das ist der eine
 * gestalterische Einfall, an dem die Seite wiedererkennbar sein soll - er kostet
 * nichts, laedt nichts nach und sagt sofort, worum es geht.
 */

/*
 * DIE KONTENBLATT-LINIEN SIND RAUS. Sie sollten liniertes Papier andeuten; die erste
 * Frage beim Ansehen war "warum sind da die Streifen?". Ein gestalterischer Einfall,
 * den man erklaeren muss, ist keiner. Stattdessen ein weicher gruener Schein hinter
 * der Ueberschrift - er traegt den Blick, ohne sich zu erklaeren.
 */
.kopfbereich {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 1.5rem 4.5rem;
  background: var(--grund);
}

.kopfbereich::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -10%;
  width: 78%;
  height: 135%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--gruen) 17%, transparent),
    transparent 100%
  );
  pointer-events: none;
}

.kopfbereich::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -18%;
  width: 62%;
  height: 120%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--gruen-5) 13%, transparent),
    transparent 100%
  );
  pointer-events: none;
}

/* DIE BILDSEITE BEKOMMT MEHR PLATZ ALS DER TEXT. Jeder Wettbewerber zeigt seine
   Oberflaeche gross (sevdesk 1154px, Papierkram 926px); ein schmales Bild neben viel
   Text sieht aus, als gaebe es nicht viel zu zeigen. */
.kopfbereich-inhalt {
  position: relative;
  max-width: var(--spalte);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 62rem) {
  .kopfbereich-inhalt {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.kopfbereich h1 {
  font-size: clamp(2.1rem, 1.15rem + 3.6vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.032em;
  margin: 0 0 1.15rem;
}

.kopfbereich h1 .betont {
  color: var(--gruen);
}

.kopfbereich .unterzeile {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--gedaempft);
  margin: 0 0 2rem;
  max-width: 34rem;
}

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem;
  border: 1px solid var(--gruen-rand);
  background: color-mix(in srgb, var(--grund) 70%, transparent);
  border-radius: var(--r-rund);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gruen-dunkel);
  margin-bottom: 1.5rem;
}

.abzeichen svg {
  flex: none;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.kleingedrucktes {
  font-size: 0.88rem;
  color: var(--leise);
  margin: 0;
}

/* Die Kennzahlenleiste steht direkt unter der Handlungsaufforderung: Wer zoegert, soll
   im selben Blick den Grund finden, es doch zu tun.
 *
 * SIE FUEHRT ZAHLEN, DIE WIR BELEGEN KOENNEN. Der ganze Wettbewerb setzt hier eine
 * Kundenzahl hin - 650.000, 170.000, 70.000, 20.000, semantisch austauschbar. Die
 * haben wir nicht, und erfinden werden wir sie nicht. Fuenf Erklaerungsarten, ein
 * Zertifikat und der Preis sind dagegen nachpruefbar. */
.kennzahlen {
  position: relative;
  max-width: var(--spalte);
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 62rem) {
  .kennzahlen {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

@media (max-width: 34rem) {
  .kennzahlen {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
}

.kennzahlen div {
  font-size: 0.92rem;
  color: var(--gedaempft);
  line-height: 1.45;
}

/* Tabellenziffern, wie ueberall in der Anwendung - hier in gross. */
.kennzahlen b {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--gruen);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}

.kennzahlen b.wort {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  padding-top: 0.4rem;
}

/* Der Verweis auf die Grenzen, gleich im Kopfbereich. Kein Wettbewerber traut sich
   das - genau deshalb steht er hier und nicht erst weiter unten. */
.ehrlich-link {
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
}

.ehrlich-link a {
  color: var(--gedaempft);
  text-decoration: none;
  border-bottom: 1px solid var(--gruen-rand);
  padding-bottom: 1px;
}

.ehrlich-link a:hover {
  color: var(--gruen);
  border-color: var(--gruen);
}

/* Der Haken als Aufzaehlungszeichen - dasselbe Zeichen wie in der Wortmarke. */
:root {
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Startseite: Ablauf-Bild ------------------------------------------------------ */

/* DER RAHMEN UM DAS BILD. Er macht aus einer freistehenden Zeichnung eine Ansicht -
   etwas, das man anschaut, statt etwas, das dekoriert. Wenn spaeter echte
   Bildschirmfotos aus dem Demo-Mandanten kommen, bleibt der Rahmen und nur der Inhalt
   wird getauscht. */
.bildrahmen {
  position: relative;
  border: 1px solid var(--gruen-rand);
  border-radius: var(--r-gross);
  background: var(--verlauf);
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(16, 60, 45, 0.13), 0 2px 8px rgba(16, 60, 45, 0.06);
}

@media (prefers-color-scheme: dark) {
  .bildrahmen {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 48rem) {
  .bildrahmen {
    padding: 1rem;
  }
}

.ablaufbild {
  display: block;
  width: 100%;
  height: auto;
}

.ablaufbild .karte {
  fill: var(--grund);
  stroke: var(--linie-stark);
}

.ablaufbild .flaeche-gruen {
  fill: var(--gruen-schleier);
  stroke: var(--gruen-rand);
}

.ablaufbild .linie {
  stroke: var(--linie-stark);
}

.ablaufbild .zeile {
  stroke: var(--linie-stark);
  stroke-linecap: round;
}

.ablaufbild .gruen {
  stroke: var(--gruen);
}

.ablaufbild .gruen-voll {
  fill: var(--gruen);
}

.ablaufbild .schrift {
  fill: var(--gedaempft);
  font-family: var(--schrift);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ablaufbild .schrift-stark {
  fill: var(--tinte);
  font-family: var(--schrift);
  font-size: 12.5px;
  font-weight: 700;
}

/* Der Fluss von links nach rechts: gestrichelte Verbindungen, die laufen. */
.ablaufbild .fluss {
  stroke: var(--gruen);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  fill: none;
  animation: fliessen 1.4s linear infinite;
}

@keyframes fliessen {
  to {
    stroke-dashoffset: -24;
  }
}

.ablaufbild .haken-zeichnen {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: haken-malen 1.1s 0.9s ease-out forwards;
}

@keyframes haken-malen {
  to {
    stroke-dashoffset: 0;
  }
}

.ablaufbild .stufe {
  opacity: 0;
  animation: auftauchen 0.55s ease-out forwards;
}

.ablaufbild .stufe-1 {
  animation-delay: 0.05s;
}
.ablaufbild .stufe-2 {
  animation-delay: 0.3s;
}
.ablaufbild .stufe-3 {
  animation-delay: 0.55s;
}
.ablaufbild .stufe-4 {
  animation-delay: 0.8s;
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Startseite: Die Kette -------------------------------------------------------- */
/*
 * DER AUFBAU IST DAS ARGUMENT. Das einzige echte Alleinstellungsmerkmal ist, dass die
 * Kette nirgends abreisst - also bildet die Seite die Kette ab, statt sie zu behaupten.
 * Jede Station gleich gebaut, dazwischen sichtbar, WAS uebergeben wird. Genau an den
 * Uebergaben scheitern die anderen: Sie koennen buchen, aber die Saldenliste geht dann
 * per Export in ein zweites Werkzeug.
 *
 * Die Linie links ist keine Verzierung - sie ist die Kette. Deshalb laeuft sie durch
 * und bricht nur an der einen Stelle, an der der Markt aufhoert.
 */
.kette {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.75rem;
  list-style: none;
}

.kette::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gruen-rand), var(--gruen));
}

@media (max-width: 44rem) {
  .kette {
    padding-left: 1.9rem;
  }

  .kette::before {
    left: 0.35rem;
  }
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2.5rem;
  align-items: center;
  padding: 0 0 2.25rem;
}

@media (max-width: 62rem) {
  .station {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Der Knoten auf der Linie. */
.station::before {
  content: "";
  position: absolute;
  left: -2.75rem;
  top: 0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.05rem;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--gruen);
}

@media (max-width: 44rem) {
  .station::before {
    left: -1.9rem;
    width: 0.85rem;
    height: 0.85rem;
  }
}

.station-wann {
  display: block;
  font-size: 0.73rem;
  font-weight: var(--gewicht-vorlauf);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 0.35rem;
}

.station h3 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}

.station p {
  color: var(--gedaempft);
  margin: 0;
}

.station-szene {
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--grund);
  box-shadow: var(--schatten-1);
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gedaempft);
}

.station-szene b {
  display: block;
  color: var(--tinte);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.station-szene .zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 0.15rem 0;
}

.station-szene .zeile span:last-child {
  color: var(--tinte);
}

/* Was von einer Station zur naechsten weitergereicht wird. */
.uebergabe {
  position: relative;
  padding: 0 0 2.25rem;
  font-size: 0.88rem;
  color: var(--leise);
}

.uebergabe::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}

@media (max-width: 44rem) {
  .uebergabe::before {
    left: -1.5rem;
  }
}

/* Die eine Stelle, an der die Kette der anderen endet. */
.bruch {
  position: relative;
  margin: 0 0 2.25rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r-karte);
  background: var(--grund-2);
  color: var(--gedaempft);
  font-size: 0.92rem;
}

.bruch strong {
  color: var(--tinte);
}

/* --- Startseite: Karten ----------------------------------------------------------- */

.karten {
  display: grid;
  gap: 1.5rem;
}

.karten-3 {
  grid-template-columns: repeat(3, 1fr);
}

.karten-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 62rem) {
  .karten-3,
  .karten-2 {
    grid-template-columns: 1fr;
  }
}

/* Die Abschnittskarte der Anwendung: 10px Radius, gruenlicher Rand #e4eae6,
   weisser Grund. Der Rand wird beim Ueberfahren gruen - dasselbe Verhalten wie bei
   den Kacheln im Arbeitsplatz (#8dc7a6). */
.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  padding: 1.5rem 1.6rem 1.35rem;
  box-shadow: var(--schatten-1);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out;
}

.karte:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
  border-color: var(--gruen-rand-hover);
}

.karte h3 {
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
}

.karte p:last-child {
  margin-bottom: 0;
}

.karte .symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-feld);
  background: var(--gruen-schleier);
  color: var(--gruen);
  margin-bottom: 1.1rem;
}

/* ===================================================================
   DIE FUNKTIONSSEITE. Sie ist eine NACHSCHLAGESEITE, keine Verkaufsseite -
   der Leser sucht eine einzige Sache und will wissen, ob sie drin ist.
   Alles hier dient diesem einen Zweck.

   DER WICHTIGSTE TEIL SIND DIE MARKER. Vorher trugen die 34 Kann-Punkte und
   die 15 Kann-nicht-Punkte dasselbe graue Aufzaehlungszeichen; wer mitten in
   die Seite sprang, musste die Ueberschrift darueber suchen, um zu wissen, ob
   ein Punkt gut oder schlecht fuer ihn ist. Haken gegen Strich beantwortet das
   im Vorbeisehen.
   =================================================================== */

/* ===================================================================
   DIE WEGE-DARSTELLUNG. Sie ersetzt am 10.09.2026 die Ja/Nein-Tabelle.

   BERNHARD: "die Tabelle wirkt jetzt recht flach. ist das noch das beste
   Format?" - Nein, war es nicht. Vier Zeilen mal fuenf Spalten Ja/Nein waren
   viel Raster fuer EINE Aussage: Wie weit kommt man auf welchem Weg? Ein
   Punkteraster zeigt das als Buchhaltung, obwohl es eine STRECKE ist.

   DIE STRECKE GIBT ES AUF DIESER WEBSITE SCHON - die Kette auf der Startseite.
   Dieselbe Sprache hier noch einmal zu sprechen, kostet nichts und verbindet
   beide Seiten: Der Leser erkennt die Kette wieder und sieht sofort, wo sie
   anderswo abreisst.

   DIE ETAPPENNAMEN STEHEN NUR EINMAL, als Kopfzeile ueber allen Wegen. Sie in
   jeder Zeile zu wiederholen war der erste Entwurf und machte es wieder zur
   Tabelle. Auf schmalen Schirmen faellt die Kopfzeile weg und jeder Weg traegt
   stattdessen seinen Endpunkt im Klartext ("geht bis: Voranmeldung") - fuenf
   Beschriftungen nebeneinander sind auf dem Telefon unlesbar.
   =================================================================== */

.wege-vergleich {
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--grund);
  box-shadow: var(--schatten-1);
  overflow: hidden;
  margin: 0 0 1.2rem;
}

.weg {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 1.4rem;
  border-top: 1px solid var(--linie);
}

.weg:first-child {
  border-top: 0;
}

.weg-etappen {
  border-top: 0;
  padding-top: 1rem;
  padding-bottom: 0.4rem;
}

/* Unser Weg. Er steht bewusst ZULETZT: Die Zeilen darueber steigen in Aufwand
   und Preis, wir sind die Aufloesung. Oben stuende dasselbe wie eine Rangliste
   da, die wir ueber uns selbst geschrieben haben. */
.weg.unser {
  background: var(--gruen-schleier);
  border-top: 2px solid var(--gruen);
}

.weg-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.weg-preis {
  display: block;
  margin-top: 0.2rem;
  color: var(--gedaempft);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.weg.unser .weg-preis {
  color: var(--gruen);
  font-weight: 650;
}

.weg-bis {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--leise);
}

.etappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* SECHS, NICHT FUENF. Beim Trennen von Koerperschaft- und Gewerbesteuer habe ich
     die Balken im HTML auf sechs gebracht und diese Zahl hier vergessen - die
     sechste Etappe fiel dadurch in eine zweite Reihe, in der Kopfzeile wie in
     jedem Weg. Ein Rasterwert, der die Anzahl der Kinder doppelt, muss mit ihnen
     wandern; wer hier eine Etappe ergaenzt, aendert beides. */
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}

.etappen li {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--gedaempft);
}

/* Der Balken selbst. Er ist absichtlich kraeftig (7px) - er ist die Aussage,
   nicht die Dekoration. */
.etappen.balken li {
  height: 7px;
  border-radius: var(--r-rund);
  background: var(--grund-2);
}

.etappen.balken li.an {
  background: var(--gruen);
}

.weg.unser .etappen.balken li.an {
  background: var(--gruen);
}

/* "Teilweise" bekommt weder Gruen noch Grau, sondern einen halben Balken -
   die ehrlichste Darstellung fuer "kommt drauf an". */
.etappen.balken li.teils {
  background: linear-gradient(to right, var(--gruen) 50%, var(--grund-2) 50%);
}

@media (max-width: 60rem) {
  .weg {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .weg-etappen {
    display: none;
  }

  .weg-bis {
    display: block;
  }
}

/* ===================================================================
   DER ASSISTENT ALS GESPRAECH. Ein Chatbot laesst sich nicht behaupten, man
   muss ihn zeigen - und das Einzige, was ihn von jedem anderen unterscheidet,
   ist WAS in der Antwort steht: eine Kontonummer aus den eigenen Buechern.
   Deshalb ein nachgebautes Gespraech statt einer Aufzaehlung von Faehigkeiten.

   DIE ANTWORT IST NACHGEBAUT, nicht abfotografiert (die Anwendung zeigt echte
   Mandantendaten). Die Form folgt aber genau den Regeln aus assistent.py: der
   Verweis auf die Seite, der Grund aus den Buechern, und der wortgleiche
   Schlusssatz zur Steuerberatung, der dort vorgeschrieben ist.
   =================================================================== */

.gespraech {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  box-shadow: var(--schatten-1);
  padding: 1.4rem;
  display: grid;
  gap: 0.9rem;
}

.blase {
  border-radius: var(--r-karte);
  padding: 0.85rem 1.05rem;
  line-height: 1.5;
  max-width: 88%;
}

.blase.frage {
  background: var(--grund-2);
  justify-self: end;
  border-bottom-right-radius: 3px;
}

.blase.antwort {
  background: var(--gruen-schleier);
  justify-self: start;
  border-bottom-left-radius: 3px;
}

.blase p {
  margin: 0 0 0.6rem;
}

.blase p:last-child {
  margin-bottom: 0;
}

.blase .konto {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--gruen-dunkel, var(--gruen));
}

/* Der Pflichtsatz. Er steht in assistent.py als wortgleiche Vorschrift unter
   jeder Feldhilfe - hier deshalb genauso, und leiser gesetzt, weil er eine
   Fussnote ist und keine Pointe. */
.blase .nachsatz {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--gruen-rand, #b8ddc6);
  font-size: 0.87rem;
  color: var(--gedaempft);
}

.blase-name {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.35rem;
}

/* Der Jahresstand als Streifen. Jede Zeile traegt ihren Zustand vorn - das ist
   dieselbe Sprache wie die Haken auf der Funktionsseite. */
.stand {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.stand li {
  display: grid;
  grid-template-columns: 1.3rem 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie);
  line-height: 1.45;
}

.stand li:last-child {
  border-bottom: 0;
}

.stand li::before {
  content: "✓";
  color: var(--gruen);
  font-weight: 700;
  font-size: 0.9rem;
}

.stand li.offen::before {
  content: "○";
  color: var(--leise);
  font-weight: 400;
}

.stand .wann {
  color: var(--leise);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Seitengrenze neben der Belegzahl. Leiser gesetzt, weil sie die zweite
   Auskunft ist - wer sie braucht, findet sie; wer nur die Belege vergleicht,
   stolpert nicht darueber. Sie MUSS aber vor dem Kauf dastehen und nicht erst in
   einer Ablehnung (Hinweis von WTn_Main, 10.09.2026). */
.nebenzahl {
  color: var(--leise);
  font-size: 0.88em;
  white-space: nowrap;
}

/* Nur fuer Vorleseprogramme sichtbar. Das Suchfeld traegt sichtbar nur einen
   Platzhaltertext, und ein Platzhalter ist keine Beschriftung - er verschwindet,
   sobald jemand tippt. */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}

.sprungleiste a {
  border: 1px solid var(--linie);
  border-radius: var(--r-rund);
  padding: 0.42rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--gedaempft);
  text-decoration: none;
  transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}

.sprungleiste a:hover {
  border-color: var(--gruen-rand-hover);
  background: var(--gruen-schleier);
  color: var(--gruen);
}

/* Das Suchfeld. Es ist der eigentliche Grund, warum diese Seite jetzt schneller
   ist als vorher: Wer wissen will, ob "Organschaft" geht, tippt es, statt 49
   Punkte zu lesen - und bekommt die Antwort samt Vorzeichen. */
.suchzeile {
  position: relative;
  margin: 0 0 1.1rem;
}

.suchzeile input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--linie);
  border-radius: var(--r-feld);
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  font: inherit;
  font-size: 1.02rem;
  color: var(--text);
  background: var(--grund);
  box-shadow: var(--schatten-1);
}

.suchzeile input:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--gruen);
}

.suchzeile .lupe {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--leise);
  pointer-events: none;
  display: flex;
}

.trefferzahl {
  color: var(--gedaempft);
  font-size: 0.9rem;
  margin: 0 0 2rem;
  min-height: 1.4em;
}

/* Zwei Spalten, sobald Platz ist: Die Listen sind lang, und Laenge allein
   schreckt ab. Auf dem Telefon bleibt es eine Spalte. */
ul.merkmale {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 2rem;
}

@media (max-width: 52rem) {
  ul.merkmale {
    grid-template-columns: 1fr;
  }
}

ul.merkmale li {
  position: relative;
  padding-left: 1.95rem;
  line-height: 1.5;
}

ul.merkmale li::before {
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-rund);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

ul.merkmale.kann li::before {
  content: "✓";
  background: var(--gruen-schleier);
  color: var(--gruen);
}

/* KEIN ROT UND KEIN KREUZ. Was fehlt, ist nicht abgelehnt, sondern noch nicht
   dran - der Abschnitt darunter sagt genau das. Ein rotes X wuerde ihm
   widersprechen, bevor er gelesen wird. */
ul.merkmale.kann-nicht li::before {
  content: "–";
  background: var(--grund-2);
  color: var(--leise);
}

/* Die ELSTER-Staffel. Sie war der ehrlichste Absatz der ganzen Website und sah
   aus wie Kleingedrucktes. Jetzt tragen drei abgestufte Zeilen die Aussage:
   angekommen, geprueft, vorbereitet. */
.staffel {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}

.staffel-stufe {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: 1.2rem;
  align-items: start;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  padding: 1.1rem 1.3rem;
}

@media (max-width: 48rem) {
  .staffel-stufe {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.staffel-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: var(--r-rund);
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.staffel-marke .punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-rund);
  background: currentColor;
}

/* EINE MARKE, EIN GRUEN - fuer alle drei Stufen gleich.

   Bis zum 10.09.2026 hatten die drei Stufen drei verschiedene Gruentoene:
   volles Gruen fuer "Angekommen", heller Schleier fuer "Geprueft", Grau fuer
   "Vorbereitet". Als Rangfolge gedacht, und Bernhards erste Reaktion war die
   Frage, warum die Farben unterschiedlich sind. Genau das ist die Antwort: Wenn
   eine gestalterische Idee erklaert werden muss, traegt sie nicht.

   DIE RANGFOLGE STEHT OHNEHIN IN DEN WOERTERN - "Angekommen", "Geprueft",
   "Vorbereitet" sind eindeutig und brauchen keine Farbunterstuetzung. Dieselbe
   Ueberlegung hatte schon die gestreiften Kontozeilen gekostet.

   Die Klassen voll/halb/offen bleiben im Markup stehen: Sie beschreiben den
   Zustand, und wenn spaeter jemand doch abstufen will, ist der Haken da. */
.staffel-stufe .staffel-marke {
  background: var(--gruen-schleier);
  color: var(--gruen);
}

.staffel-stufe p {
  margin: 0;
  line-height: 1.5;
}

.staffel-stufe b {
  display: block;
  margin-bottom: 0.15rem;
}

/* Nummerierte Schritte - die Ziffer ist gross, weil sie die Reihenfolge traegt. */
.schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  counter-reset: schritt;
}

@media (max-width: 62rem) {
  .schritte {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.schritt {
  position: relative;
  padding-top: 3.2rem;
}

.schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gruen-dunkel);
  opacity: 0.32;
  letter-spacing: -0.04em;
  /* Tabellenziffern stehen in der Anwendung 41-mal - an jeder Zahl, die etwas
     bedeutet. Auf der Website gilt dasselbe. */
  font-variant-numeric: tabular-nums;
}

.schritt h3 {
  margin: 0 0 0.5rem;
  font-size: 1.14rem;
}

.schritt p {
  color: var(--gedaempft);
  margin-bottom: 0;
}

/* --- Startseite: Sorgenliste (was schiefgeht) ------------------------------------- */

.sorgen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 48rem) {
  .sorgen {
    grid-template-columns: 1fr;
  }
}

.sorgen li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--gedaempft);
  margin: 0;
}

.sorgen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
  opacity: 0.7;
}

.sorgen strong {
  display: block;
  color: var(--tinte);
}

/* --- Startseite: Zitat/Beweis-Block ----------------------------------------------- */

/* Der 135-Grad-Verlauf von fast-weissem Gruen nach Weiss ist das Kennzeichen, mit
   dem die Anwendung besondere Bloecke auszeichnet (.schuhkarton, .uebernahme).
   Hier steht der wichtigste Vertrauensbeweis, also gehoert er hierher. */
/* DAS MUSTER VOLLSTAENDIG, NICHT NUR DER VERLAUF: In der Anwendung treten diese drei
   Werte immer zusammen auf (.schuhkarton in styles.css, .uebernahme in steuern.css) -
   der Rahmen #b8ddc6 begrenzt die weiche Flaeche, ohne ihn wirkt der Verlauf anders.
   KEIN 3px-Streifen links: Der gehoert im Produkt zu Hinweisen und Warnungen. Hier
   steht kein Hinweis, sondern ein hervorgehobener Block - und auf dieser Website
   bleibt der Streifen deshalb .hinweis vorbehalten, damit er etwas bedeutet. */
.beweis {
  border: 1px solid var(--gruen-rand);
  background: var(--verlauf);
  border-radius: var(--r-karte);
  padding: 2.25rem 2.4rem 1.9rem;
}

@media (max-width: 48rem) {
  .beweis {
    padding: 1.75rem;
  }
}

.beweis h3 {
  margin-top: 0;
  font-size: 1.25rem;
}

.beweis .beleg {
  font-family: var(--schrift-fest);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: var(--grund);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--r-feld);
  padding: 0.8rem 1rem;
  color: var(--gedaempft);
  overflow-x: auto;
}

/* --- Preisstufen ------------------------------------------------------------------ */
/*
 * DREI KARTEN, DIE MITTLERE HERVORGEHOBEN - so macht es der ganze Markt, und zwar zu
 * Recht: Wer drei Preise sieht, waehlt selten den teuersten und ungern den billigsten.
 * Die Hervorhebung nimmt die Entscheidung nicht ab, sie macht sie nur leichter.
 */
/* GLEICHE HOEHE FUER ALLE VIER. Ohne stretch richtet sich jeder Kasten nach seinem
   eigenen Text, und die Knoepfe stehen auf vier verschiedenen Hoehen - das sieht
   unfertig aus und macht die Stufen schwerer vergleichbar. */
.stufen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin: 0 0 1.5rem;
}

@media (max-width: 75rem) {
  .stufen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 44rem) {
  .stufen {
    grid-template-columns: 1fr;
  }
}

.stufe-preis {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  padding: 1.75rem 1.6rem 1.6rem;
  box-shadow: var(--schatten-1);
}

/* Die Liste dehnt sich, damit der Knopf in jeder Karte unten steht. */
.stufe-preis ul {
  flex: 1 0 auto;
}

.stufe-preis .knopf {
  margin-top: auto;
}

/* Die mittlere Stufe: gruener Rand, Verlauf, und sie steht etwas heraus. */
.stufe-preis.empfohlen {
  border-color: var(--gruen);
  background: var(--verlauf);
  box-shadow: var(--schatten-2);
}

.stufe-preis h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}

/* Feste Mindesthoehe, damit der Preis in allen vier Karten auf derselben Linie
   steht - sonst rutscht er dort nach unten, wo die Beschreibung drei Zeilen braucht. */
.stufe-preis .wofuer {
  color: var(--gedaempft);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0 0 1.25rem;
  min-height: 4.35em;
}

.stufe-preis .betrag {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

.stufe-preis .betrag b {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.stufe-preis .betrag span {
  color: var(--gedaempft);
  font-size: 0.9rem;
}

.stufe-preis .jahr {
  color: var(--leise);
  font-size: 0.84rem;
  margin: 0 0 1.35rem;
}

.stufe-preis ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--linie);
  padding-top: 1.1rem;
}

.stufe-preis li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  color: var(--gedaempft);
}

.stufe-preis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--gruen);
  -webkit-mask: var(--haken) center / contain no-repeat;
  mask: var(--haken) center / contain no-repeat;
}

.stufe-preis .knopf {
  width: 100%;
}

/* DAS BAND LIEGT AUF DER KANTE, NICHT IM KASTEN. Stuende es im Textfluss, waere die
   empfohlene Karte um seine Hoehe nach unten verschoben und alle vier Preise stuenden
   wieder auf verschiedenen Linien. Absolut gesetzt ist es aus dem Fluss heraus. */
.stufen-band {
  position: absolute;
  top: -0.8rem;
  left: 1.6rem;
  background: var(--gruen);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-rund);
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .stufen-band {
    color: #06231a;
  }
}

/* --- Vergleichstabelle ------------------------------------------------------------ */
/*
 * DIE TABELLE MUSS IN IHREM EIGENEN KASTEN SCROLLEN, nicht die Seite. Sonst wandert
 * auf dem Telefon der ganze Text nach rechts, und das faellt niemandem auf, der am
 * Schreibtisch prueft.
 *
 * Kopfzeile, Linien und Zahlensatz sind die der Anwendung (styles.css): 0,74rem,
 * Grossbuchstaben, 0,04em Sperrung, Trennlinie #e7ebef, Tabellenziffern.
 */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  margin: 0 0 1.25rem;
  -webkit-overflow-scrolling: touch;
}

table.vergleich {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
}

table.vergleich th {
  color: var(--leise);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--grund-2);
  white-space: nowrap;
}

table.vergleich td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  color: var(--gedaempft);
}

table.vergleich tr:last-child td {
  border-bottom: 0;
}

table.vergleich td:first-child {
  color: var(--tinte);
  font-weight: 650;
  white-space: nowrap;
}

table.vergleich .zahl {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinte);
}

/* HIER STANDEN DIE JA/NEIN-CHIPS der alten Vergleichstabelle - ein Punkt in
   Gruen oder Rot vor dem Wort. Entfernt am 10.09.2026, und zwar nicht nur, weil
   die Tabelle weg ist:

   SIE HABEN EINEN ECHTEN FEHLER VERURSACHT. Die Regel hiess schlicht ".ja,
   .nein" - ohne Element und ohne Zusammenhang. Das Ergebnisfeld des Checks
   traegt aber die Klasse "check-ergebnis ja", und griff damit dieselbe Regel ab:
   Aus dem Ergebniskasten wurde ein "inline-flex" mit "white-space: nowrap", also
   ein einzeiliger Chip von 1.856 Pixeln Breite. Die Ueberschrift wurde auf 51
   Pixel gequetscht, der Absatz lief daneben ins Nichts. Genau so sah es aus.

   LEHRE FUER DIESE DATEI: Ein Klassenname wie "ja" gehoert nie ungebunden ins
   Stylesheet. Wer so etwas wieder braucht, schreibt es an sein Element
   ("td span.ja") oder gibt ihm einen eigenen Namen. */

/* Die Zeile, auf die es ankommt. */
table.vergleich tr.summe td {
  background: var(--gruen-schleier);
  color: var(--tinte);
  font-weight: 650;
  border-top: 2px solid var(--gruen);
}

.quelle {
  font-size: 0.84rem;
  color: var(--leise);
  line-height: 1.5;
}

.quelle a {
  color: var(--leise);
}

/* --- Startseite: Warum es das gibt ------------------------------------------------ */
/*
 * DIE HERKUNFTSGESCHICHTE. Kein Wettbewerber erzaehlt, warum es seine Firma gibt -
 * sie zeigen Kundenzahlen und Testsiegel. Fuer einen kleinen Anbieter ist die
 * Geschichte die einzige gute Antwort auf "warum sollte ich euch meine Buchhaltung
 * anvertrauen", und sie erklaert zugleich die Festlegung im Abschnitt darueber: Die
 * Grenzen sind keine Luecken, sie sind die Folge davon, dass es fuer eine echte GmbH
 * gebaut wurde.
 *
 * OHNE GESICHTER UND NAMEN, ausdruecklich so gewuenscht. Traegt die Sache, nicht die
 * Person.
 */
.geschichte {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 62rem) {
  .geschichte {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.geschichte p {
  color: var(--gedaempft);
}

.geschichte h3 {
  margin-top: 2rem;
}

/* Der eine Satz, der die ganze Geschichte traegt - gross gesetzt, damit er auch dem
   auffaellt, der nur ueberfliegt. */
.zitat {
  border-left: 3px solid var(--gruen);
  background: var(--verlauf);
  border: 1px solid var(--gruen-rand);
  border-left: 3px solid var(--gruen);
  border-radius: 0 var(--r-karte) var(--r-karte) 0;
  padding: 1.85rem 2rem;
  margin: 0;
}

.zitat p {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.42;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--tinte);
  text-wrap: balance;
}

.zitat footer {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--gedaempft);
}

/* --- Startseite: "Passt es zu mir?"-Check ----------------------------------------- */
/*
 * DIE HARTE GRENZE ALS DIENSTLEISTUNG STATT ALS AUSSCHLUSS. Dieselbe Tatsache, die
 * weiter oben als Liste steht ("passt nicht"), beantwortet hier eine Frage, die der
 * Besucher tatsaechlich hat. Wer eine GbR fuehrt, erfaehrt es in zehn Sekunden statt
 * nach der Anmeldung.
 *
 * OHNE JAVASCRIPT BLEIBT DER ABSCHNITT VERBORGEN (hidden im Markup, entfernt erst
 * das Skript). Ein totes Formular ist schlechter als gar keines - die Kriterien
 * stehen ohnehin im Abschnitt darueber im Klartext.
 */

.check-frage {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}

.check-frage legend {
  padding: 0;
  margin-bottom: 0.7rem;
  font-weight: 650;
  color: var(--tinte);
}

.check-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Die Auswahl sieht aus wie die Filterpillen der Anwendung: 999px, 1px Rand,
   gruener Rand beim Ueberfahren. Das echte Eingabefeld bleibt bedienbar und fuer
   Screenreader vorhanden, es ist nur nicht sichtbar. */
.check-optionen label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-rund);
  background: var(--grund);
  font-size: 0.9rem;
  font-weight: var(--gewicht-nav);
  color: var(--gedaempft);
  cursor: pointer;
  transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}

.check-optionen label:hover {
  border-color: var(--gruen-rand-hover);
  color: var(--tinte);
}

.check-optionen input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check-optionen input:checked + span {
  color: inherit;
}

.check-optionen label:has(input:checked) {
  border-color: var(--gruen);
  background: var(--gruen-0);
  color: var(--gruen-dunkel);
  font-weight: 650;
}

.check-optionen label:has(input:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Das Ergebnis. Gruen heisst passt, bernstein heisst passt mit Einschraenkung,
   rot heisst passt nicht - und rot sagt das ohne Umschweife, weil ein
   beschoenigtes Nein hier niemandem hilft. */
.check-ergebnis {
  margin-top: 0.5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark);
  border-radius: var(--r-karte);
  background: var(--grund);
}

.check-ergebnis:empty {
  display: none;
}

.check-ergebnis h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.check-ergebnis p:last-child {
  margin-bottom: 0;
}

.check-ergebnis.ja {
  border-color: var(--gruen-rand);
  border-left-color: var(--gruen);
  background: var(--verlauf);
}

.check-ergebnis.vielleicht {
  border-color: #e6c88a;
  border-left-color: #c98a12;
  background: #fdf7e9;
}

.check-ergebnis.nein {
  border-color: #f3b8b3;
  border-left-color: var(--rot);
  background: #fffafa;
}

@media (prefers-color-scheme: dark) {
  .check-ergebnis.vielleicht {
    border-color: #4a3a18;
    background: #221c10;
  }

  .check-ergebnis.nein {
    border-color: #4d2320;
    background: #221312;
  }
}

.check-ergebnis .knopfreihe {
  margin: 1.2rem 0 0;
}

/* Der Ausweg unter dem Check. Bewusst leise: zwei stille Knoepfe, kein gruener -
   das ist ein Angebot, keine Aufforderung. */
.unklar {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}

.unklar p {
  color: var(--gedaempft);
  margin: 0 0 1rem;
}

.unklar .knopfreihe {
  margin: 0;
}

/* --- Startseite: Fragen und Antworten --------------------------------------------- */
/*
 * ALS <details>, NICHT ALS JAVASCRIPT-AKKORDEON: Es funktioniert ohne Skript, die
 * Suchmaschine liest den Antworttext trotzdem, und die Tastaturbedienung ist
 * eingebaut.
 */

.fragen {
  border-top: 1px solid var(--linie);
}

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 600;
  color: var(--tinte);
  position: relative;
  transition: color 0.15s ease;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary:hover {
  color: var(--gruen);
}

.frage summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 1.55rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.frage[open] summary::after {
  transform: rotate(-135deg);
}

.frage-antwort {
  padding: 0 0 1.4rem;
  color: var(--gedaempft);
  max-width: 46rem;
}

.frage-antwort p:last-child {
  margin-bottom: 0;
}

/* --- Startseite: Abschlussband ---------------------------------------------------- */

.schlussband {
  background: linear-gradient(135deg, var(--gruen-dunkel), var(--gruen));
  color: #ffffff;
  border-radius: var(--r-gross);
  padding: 3.5rem 3rem;
  text-align: center;
}

@media (max-width: 48rem) {
  .schlussband {
    padding: 2.5rem 1.5rem;
  }
}

.schlussband h2,
.schlussband p {
  color: #ffffff;
}

.schlussband h2 {
  margin-bottom: 0.75rem;
}

.schlussband p {
  opacity: 0.92;
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

.schlussband .knopf-haupt {
  background: #ffffff;
  color: var(--gruen-dunkel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.schlussband .knopf-haupt:hover {
  background: #ffffff;
  color: var(--gruen-dunkel);
  transform: translateY(-2px);
}

.schlussband .kleingedrucktes {
  color: #ffffff;
  opacity: 0.8;
  margin-top: 1.25rem;
}

/* --- Auftauchen beim Scrollen ----------------------------------------------------- */
/*
 * Nur eine Andeutung (12 Pixel, 0,5 Sekunden). Wer Bewegung abgestellt hat, bekommt
 * sofort den Endzustand - und ohne JavaScript ist ohnehin alles sichtbar, weil die
 * Klasse erst vom Skript gesetzt wird.
 */

.zeigen {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.zeigen.da {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .zeigen,
  .zeigen.da {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ablaufbild .fluss,
  .ablaufbild .haken-zeichnen,
  .ablaufbild .stufe {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .knopf,
  .karte {
    transition: none;
  }
}

/* ===================================================================
   STRAFFUNG DER STARTSEITE (10.09.2026)

   Die Seite war 12.509 Pixel hoch - fast vierzehn Bildschirme. Bernhard fand
   das schon vorher unangenehm, und mit dem Assistenten-Abschnitt kam noch
   einmal Hoehe dazu.

   GEMESSEN STATT GERATEN: Der groesste Posten war unsichtbar. Elf Abschnitte
   mal 88 Pixel oben und unten sind 1.936 Pixel reine Luft - mehr als der
   laengste Abschnitt der Seite. Luft wegzunehmen kostet keinen einzigen Satz,
   deshalb steht sie hier zuerst.

   DIESE REGELN STEHEN AM DATEIENDE und ueberschreiben bewusst weiter oben
   Definiertes. Das ist normalerweise schlechter Stil; hier ist es der ehrliche
   Weg, weil die Straffung ein eigener, ruecknehmbarer Eingriff ist und nicht
   in zehn Regeln quer durch die Datei verteilt gehoert. Wer sie zurueckdreht,
   loescht diesen Block - und hat wieder den Stand von vorher.
   =================================================================== */

.bereich {
  padding: 3.75rem 1.5rem;
}

/* Die Kette: enger, aber nicht gedraengt. Der Abstand zwischen Station und
   Uebergabe traegt die Erzaehlung, deshalb wird er nur gekuerzt, nicht
   gestrichen. */
.station {
  padding-bottom: 1.5rem;
}

.uebergabe {
  padding-bottom: 1.5rem;
}

/* Die Vertrauenskarten sind seit der Kuerzung Einzeiler. Zwei Spalten
   verschenkten damit eine ganze Zeile Hoehe. */
@media (min-width: 62.01rem) {
  .bereich-dunkel .karten-2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================================
   DAS KONTAKTFORMULAR (10.09.2026)

   ES SENDET NICHTS. Diese Website ist statisches HTML hinter Caddy - es gibt
   keinen Server, der eine Einsendung entgegennehmen koennte. Ein Fremddienst
   waere die uebliche Abkuerzung und kam nicht in Frage: Eine Seite, die eine
   Datenschutzerklaerung veroeffentlicht und daneben den Text ihrer Besucher an
   einen fremden Anbieter schickt, widerspricht sich - dieselbe Ueberlegung wie
   bei den selbst ausgelieferten Schriften.

   WAS ES STATTDESSEN TUT: Es schreibt aus den Feldern eine fertige E-Mail und
   uebergibt sie dem Mailprogramm des Besuchers. Der Text verlaesst den Browser
   erst, wenn der Besucher selbst auf Senden drueckt - und er sieht vorher, was
   drinsteht. Fuer alle ohne eingerichtetes Mailprogramm liegt daneben ein Knopf,
   der denselben Text in die Zwischenablage legt.

   WENN SPAETER EIN ECHTES FORMULAR KOMMT, gehoert der Endpunkt in die Anwendung
   (app.easyabschluss.de), nicht zu einem Dritten.
   =================================================================== */

.formular {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 1rem;
}

.formular label {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.formular select,
.formular textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--linie);
  border-radius: var(--r-feld);
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--grund);
}

.formular textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.5;
}

.formular select:focus,
.formular textarea:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--gruen);
}

/* Die Rueckmeldung des Kopierknopfs. Sie ersetzt keinen Text, sondern tritt
   daneben - wer sie nicht sieht, verliert nichts. */
.formular-hinweis {
  color: var(--gedaempft);
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
}

.formular-hinweis.erfolg {
  color: var(--gruen);
  font-weight: 650;
}

/* ===================================================================
   DIE SPRUNGLEISTE DER STARTSEITE (10.09.2026)

   KOPFHOEHE ALS EIGENER WERT, damit die Leiste und die Sprungziele denselben
   Abstand benutzen. Wer die Kopfleiste hoeher macht und das hier vergisst,
   bekommt Ueberschriften, die unter der Leiste verschwinden - der klassische
   Fehler bei festen Kopfzeilen.
   =================================================================== */

:root {
  --kopfhoehe: 59px;
  --leistenhoehe: 46px;
}

.sprungleiste-seite {
  position: sticky;
  top: var(--kopfhoehe);
  z-index: 40; /* unter der Kopfleiste (50), ueber dem Inhalt */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}

.sprungleiste-inhalt {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--leistenhoehe);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.sprungleiste-inhalt::-webkit-scrollbar {
  display: none;
}

.sprungleiste-titel {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
  flex: none;
}

.sprungleiste-seite a {
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--gedaempft);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.sprungleiste-seite a:hover {
  color: var(--gruen);
}

/* Der gerade sichtbare Abschnitt. Wird vom Skript gesetzt; ohne Skript ist
   einfach nie etwas hervorgehoben, und die Leiste funktioniert trotzdem. */
.sprungleiste-seite a.hier {
  color: var(--gruen);
  border-bottom-color: var(--gruen);
}

/* DIE SPRUNGZIELE BRAUCHEN LUFT NACH OBEN, sonst schiebt der Sprung die
   Ueberschrift unter die klebende Kopfleiste. Das ist der Grund, warum
   Ankerlinks auf solchen Seiten so oft "danebengehen".

   DIE REGEL GALT ZUERST NUR FUER DIE SECHS ZIELE DER STARTSEITE, namentlich
   aufgezaehlt. Damit lief auf der Funktionsseite JEDER Sprung ins Verdeckte -
   sechs Ziele, alle falsch, und niemandem aufgefallen, weil die Leiste dort
   neu ist. Gemessen am 10.09.2026: Die Oberkante lag bei 0 Pixeln, also
   vollstaendig hinter der 59 Pixel hohen Kopfleiste.

   Jetzt greift sie ueber die FORM des Ziels statt ueber seinen Namen. Ein neues
   Sprungziel bekommt den Abstand damit von allein - und der naechste, der eine
   Ueberschrift mit id versieht, muss nicht wissen, dass es diese Regel gibt. */
section[id],
h2[id],
h3[id] {
  scroll-margin-top: calc(var(--kopfhoehe) + var(--leistenhoehe) + 1rem);
}

@media (max-width: 40rem) {
  .sprungleiste-titel {
    display: none;
  }

  .sprungleiste-inhalt {
    gap: 1.1rem;
  }
}

@media (prefers-color-scheme: dark) {
  .sprungleiste-seite {
    background: rgba(16, 22, 20, 0.92);
  }
}

/* AUF SCHMALEN SCHIRMEN KLEBT DIE LEISTE NICHT.

   Die Kopfleiste ist dort 167 Pixel hoch (die Navigation bricht um). Zusammen
   mit der Sprungleiste waeren das ueber 200 Pixel dauerhaft belegter Schirm -
   auf einem Telefon mehr als ein Viertel. Die Leiste steht dort deshalb als
   normales Inhaltsverzeichnis am Anfang und scrollt mit weg.

   DIE EIGENTLICHE URSACHE ist die umbrechende Kopfleiste; die gehoert
   unabhaengig davon angesehen. */
@media (max-width: 48rem) {
  .sprungleiste-seite {
    position: static;
  }
}

/* DIE FRAGE ALS VERWEIS. Sie steht im dunklen Band und muss dort weiterhin wie
   eine Ueberschrift aussehen - ein blau unterstrichener Link mitten in einem
   Beweiskasten saehe nach Fussnote aus. Erkennbar wird sie durch den Pfeil, der
   beim Ueberfahren nachrueckt: dieselbe Gebaerde wie bei den Textverweisen am
   Ende der Abschnitte. */
.beweis h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease-out;
}

.beweis h3 a::after {
  content: " →";
  font-weight: 400;
  opacity: 0.55;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  display: inline-block;
}

.beweis h3 a:hover {
  border-bottom-color: currentColor;
}

.beweis h3 a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* ===================================================================
   DIE DREI SCHRITTE, PLAKATIV (10.09.2026)

   Erste Fassung erklaerte die Erkennung in drei Textbloecken plus Merkkasten
   plus Liste. Sachlich richtig und viel zu viel: Wer auf "Warum dieser
   Vorschlag?" klickt, hat EINE Frage und will EINE Antwort, keine
   Verfahrensbeschreibung. Bernhard: "gar nicht zu sehr im Detail".

   DIE ZIFFER TRAEGT DIE AUSSAGE, nicht der Satz. Deshalb ist sie riesig und der
   Text daneben kurz genug, um im Vorbeigehen gelesen zu werden. Der dritte
   Schritt ist gruen hinterlegt - er ist der Punkt, auf den alles hinauslaeuft.
   =================================================================== */

.plakat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 0 0 2rem;
}

@media (max-width: 58rem) {
  .plakat {
    grid-template-columns: 1fr;
  }
}

.plakat-schritt {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  padding: 1.8rem 1.6rem 1.6rem;
  box-shadow: var(--schatten-1);
}

/* ALLE DREI KARTEN SEHEN GLEICH AUS.

   Die dritte war gruen hinterlegt, weil sie die Pointe traegt. Bernhard hat am
   10.09.2026 zweimal hintereinander gefragt, warum Farben unterschiedlich sind -
   einmal bei den ELSTER-Stufen, einmal hier. Zweimal dieselbe Frage zu derselben
   Idee ist ein Urteil, kein Zufall.

   DIE POINTE STEHT IM TEXT, und zwar dreifach: in der Ueberschrift ("Der letzte
   gehoert dir"), in der Karte selbst ("Ohne dich passiert nichts") und im
   Merksatz darunter. Sie braucht keinen Farbtopf.

   Die Klasse "entscheidend" bleibt im Markup - sie sagt, WELCHE Karte die
   wichtige ist, auch wenn sie im Moment nichts einfaerbt. */
.plakat-schritt.entscheidend .plakat-ziffer {
  color: var(--gruen-rand);
}

.plakat-ziffer {
  display: block;
  font-size: 3.4rem;
  font-weight: 760;
  line-height: 1;
  color: var(--gruen-rand);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}

.plakat-schritt h3 {
  margin: 0 0 0.4rem;
  font-size: 1.22rem;
  line-height: 1.25;
}

.plakat-schritt p {
  margin: 0;
  color: var(--gedaempft);
  line-height: 1.5;
}

/* Der eine Satz, der nach den drei Schritten haengenbleiben soll. */
.merksatz {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.35;
  font-weight: 650;
  color: var(--tinte);
  text-wrap: balance;
  margin: 0 0 1.6rem;
}

/* Textfelder im Kontaktformular - dieselbe Anmutung wie Auswahl und Textfeld. */
.formular input[type="email"],
.formular input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--linie);
  border-radius: var(--r-feld);
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--grund);
}

.formular input[type="email"]:focus,
.formular input[type="text"]:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--gruen);
}

/* DER HONIGTOPF WIRD AUS DEM BILD GESCHOBEN, NICHT AUSGEBLENDET.

   "display: none" waere naheliegend und schwaecher: Manche Bots ueberspringen
   genau das, weil sie wissen, wozu es dient. Ein Feld, das im Fluss steht und
   nur weit links liegt, sieht fuer sie wie ein normales Feld aus.

   aria-hidden am Element und tabindex="-1" am Eingabefeld halten es von
   Vorleseprogrammen und der Tastaturreihenfolge fern - fuer Menschen existiert
   es also nicht. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-hinweis.fehler {
  color: var(--rot);
  font-weight: 650;
}

/* ===================================================================
   DER WEGWEISER auf der Funktionsseite (10.09.2026)

   Er ersetzt sechs Sprungpillen, die auf zwei Reihen umbrachen. Drei Karten
   ORDNEN die Seite, statt sie aufzuzaehlen - und ein Symbol je Karte gibt dem
   Auge einen Halt, bevor die erste Liste kommt.

   ES SIND VERWEISE, KEINE KACHELN MIT VERWEIS DARIN: Das ganze Feld ist
   anklickbar, nicht nur die Ueberschrift. Eine Karte, bei der nur ein Wort
   reagiert, ist auf dem Telefon aergerlich.
   =================================================================== */

.wegweiser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 1.6rem;
}

@media (max-width: 54rem) {
  .wegweiser {
    grid-template-columns: 1fr;
  }
}

.wegweiser-karte {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  padding: 1.3rem 1.35rem 1.2rem;
  box-shadow: var(--schatten-1);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out,
    border-color 120ms ease-out;
}

.wegweiser-karte:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
  border-color: var(--gruen-rand-hover);
}

.wegweiser-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-feld);
  background: var(--gruen-schleier);
  color: var(--gruen);
  margin-bottom: 0.9rem;
}

.wegweiser-karte b {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  color: var(--tinte);
}

.wegweiser-karte span:not(.wegweiser-symbol) {
  display: block;
  color: var(--gedaempft);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Das Suchfeld ist jetzt die ZWEITE Moeglichkeit, nicht die erste - es steht
   unter dem Wegweiser und darf deshalb leiser auftreten. */
.suchzeile input {
  font-size: 0.98rem;
}

/* ===================================================================
   DIE WEGE-BALKEN, ZWEITE FASSUNG (10.09.2026)

   Bernhard: Koerperschaft- und Gewerbesteuer trennen, das Fehlende rot, und in
   die vollen Balken einen gruenen Haken.

   DIE TRENNUNG IST MEHR ALS KOSMETIK. Als eine Spalte "Koerperschaft- &
   Gewerbesteuer" fehlte der Standardsoftware EINE von fuenf Etappen. Getrennt
   fehlen ihr DREI von sechs - und das ist die ehrlichere Darstellung, denn es
   sind ja auch zwei verschiedene Erklaerungen an zwei verschiedene Stellen.

   ROT STATT GRAU: Grau las sich wie "noch nicht dran". Es ist aber nicht
   unfertig, sondern ausserhalb dessen, was diese Art Werkzeug tut. Rot und
   Gruen sind die einzige Farbunterscheidung, die niemand erklaeren muss - und
   deshalb die einzige, die diese Website benutzt.

   DIE BALKEN SIND HOEHER GEWORDEN (7px auf 22px), weil ein Haken in sieben
   Pixel nicht hineinpasst. Sie sind damit keine Fortschrittsanzeige mehr,
   sondern Marken - und lesen sich naeher an dem, was sie sagen: kann, kann
   teilweise, kann nicht.
   =================================================================== */

.etappen.balken {
  gap: 0.5rem;
}

.etappen.balken li {
  height: 22px;
  border-radius: var(--r-feld);
  background: var(--grund-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.etappen.balken li.an {
  background: var(--gruen);
  color: #fff;
}

.etappen.balken li.an::before {
  content: "✓";
}

/* KEIN KREUZ IM ROTEN BALKEN. Ein Haken sagt "kann"; ein Kreuz daneben saehe
   aus wie eine Bewertung des fremden Produkts. Die leere rote Flaeche sagt
   dasselbe, ohne zu urteilen. */
.etappen.balken li.aus {
  background: var(--rot-schleier, #fdeceb);
  border: 1px solid var(--rot-rand, #f3b8b3);
  box-sizing: border-box;
}

.etappen.balken li.teils {
  background: linear-gradient(to right, var(--gruen) 50%, var(--rot-schleier, #fdeceb) 50%);
  border: 1px solid var(--rot-rand, #f3b8b3);
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .etappen.balken li.aus {
    background: #2a1615;
    border-color: #4d2320;
  }

  .etappen.balken li.teils {
    background: linear-gradient(to right, var(--gruen) 50%, #2a1615 50%);
    border-color: #4d2320;
  }
}

/* ===================================================================
   NACHBESSERUNG AN DEN WEGE-BALKEN (10.09.2026)

   DER HAKEN GEHOERT NUR IN UNSERE ZEILE (Bernhard: "bei den Konkurrenten keine
   Check-Haken rein"). Er hat recht, und zwar aus zwei Gruenden: Ein Haken ist
   eine Auszeichnung, und die soll nicht an fremde Produkte gehen. Und wenn ihn
   jede Zeile traegt, hebt er nichts mehr hervor - dann ist die letzte Zeile nur
   noch laenger, nicht anders. So ist sie die einzige mit sechs Haken.

   DAS ROT WAR ZU BLASS. Ein Hauch Rosa neben kraeftigem Gruen las sich wie ein
   leeres Feld statt wie eine Grenze. Jetzt traegt die Flaeche echtes Rot, hell
   genug, dass es neben dem Gruen nicht schreit - und der Rand gibt ihr Kontur.
   =================================================================== */

.etappen.balken li.an::before {
  content: none;
}

.weg.unser .etappen.balken li.an::before {
  content: "✓";
}

.etappen.balken li.aus {
  background: #f8d4d1;
  border-color: #e79b95;
}

.etappen.balken li.teils {
  background: linear-gradient(to right, var(--gruen) 50%, #f8d4d1 50%);
  border-color: #e79b95;
}

@media (prefers-color-scheme: dark) {
  .etappen.balken li.aus {
    background: #4a201d;
    border-color: #7a3630;
  }

  .etappen.balken li.teils {
    background: linear-gradient(to right, var(--gruen) 50%, #4a201d 50%);
    border-color: #7a3630;
  }
}

/* Der Satz zwischen Tabelle und Quellenangabe. Er ist kein Kleingedrucktes und
   keine Ueberschrift - er traegt eine eigene Aussage und steht deshalb dazwischen:
   groesser als die Quelle, ruhiger als eine Zwischenueberschrift. */
.teamsatz {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gruen);
}

/* Zwei Preiszeilen je Weg: einmal fuer eine Person, einmal fuer fuenf. Die
   Kopfzahl steht als fettes Kuerzel vorn, damit die Betraege untereinander
   buendig bleiben und das Auge nur eine Spalte lesen muss. */
.weg-preis {
  margin-top: 0.15rem;
}

.weg-preis b {
  display: inline-block;
  min-width: 5.6rem;
  color: var(--tinte);
  font-weight: 650;
}

/* ROT KRAEFTIGER, zweiter Durchgang. Der erste Ton (#f8d4d1) las sich neben dem
   satten Gruen immer noch wie ein leeres Feld statt wie eine Grenze - der Rand
   trug die Aussage, nicht die Flaeche. Jetzt traegt sie die Flaeche.

   NICHT WEITER ALS HIERHIN: Vollflaechiges Rot neben vollflaechigem Gruen liest
   sich als Ampel und damit als Urteil ueber fremde Produkte. Es soll eine Grenze
   zeigen, keine Bewertung. */
.etappen.balken li.aus {
  background: #f2aaa3;
  border-color: #cf6c63;
}

.etappen.balken li.teils {
  background: linear-gradient(to right, var(--gruen) 50%, #f2aaa3 50%);
  border-color: #cf6c63;
}

@media (prefers-color-scheme: dark) {
  .etappen.balken li.aus {
    background: #6b2a25;
    border-color: #9c4238;
  }

  .etappen.balken li.teils {
    background: linear-gradient(to right, var(--gruen) 50%, #6b2a25 50%);
    border-color: #9c4238;
  }
}