/* =============================================================================
   marke.css — Farbwelt und Typografie für Jochen Schneider
   =============================================================================
   GESTALTUNGSIDEE: Das Kontoblatt.

   Die Welt eines Gesellschafter-Geschäftsführers ist die Buchführung — Soll und
   Haben, zwei Spalten, eine Mittelachse. Der Kern dieser Seite IST eine
   Gegenüberstellung zweier Wege. Also wird die Seite wie ein Kontoblatt gebaut:
   sichtbare Achse, Zahlen rechtsbündig in Spalten, Positionen statt Kacheln.

   Ausdrücklich NICHT skeuomorph: kein Leder, kein Holz, keine vergilbten Ränder.
   Nur die Logik der Buchführung, nicht ihre Oberfläche.

   VERWORFENE VORFASSUNG: warmes Creme #F4F3EC + kontrastreiche Serif +
   Terracotta-Akzent. Der Anthropic-Skill "frontend-design" führt exakt diese
   Kombination als KI-Standardlook auf, nicht als Entscheidung. Deshalb trägt
   jetzt das Waldgrün die Fläche, und Papier erscheint nur noch als Blatt.

   ⚠️ Falls die ERGO-Werbemittelprüfung die Farbwelt nicht freigibt:
   NUR die Werte im :root-Block ändern. Struktur und Layout bleiben.
   ============================================================================= */

:root {
  /* --- Träger ----------------------------------------------------------- */
  --tanne:       #2D3D3C;  /* Leitfarbe aus Jochens Sakko. Trägt jetzt die
                              FLÄCHE — Hero und Rechnung. Vorher war sie nur
                              Schriftfarbe auf hellem Grund. */
  --tiefe:       #1B2625;  /* Abgesetzte Zonen INNERHALB des Grüns, damit die
                              dunkle Fläche selbst Struktur bekommt. */
  --blatt:       #F2F3EF;  /* Papier — nur als Blatt auf dem Grün, nie als
                              Seitengrund. Leicht grünstichig (Hue 100),
                              bewusst kein warmes Creme. */
  --blatt-tief:  #E5E8E1;  /* Zweite Papierstufe: eingelegte Zeilen, Tabellen */

  /* --- Schrift ---------------------------------------------------------- */
  --tinte:       #16211F;  /* Fließtext auf Papier.        auf Blatt 14,8:1 */
  --tinte-matt:  #4E5B57;  /* Marginalien, Fußnoten.       auf Blatt  6,4:1 */
  --kreide:      #EDF0EA;  /* Text auf Grün.               auf Tanne  9,9:1 */
  --kreide-matt: #A9B5AF;  /* Sekundärtext auf Grün.       auf Tanne  5,4:1 */

  /* --- Signal ----------------------------------------------------------- */
  --zinnober:    #C23B22;  /* Prüfvermerk-Rot. EINZIGE Signalfarbe, gedacht wie
                              der Rotstift am Rand eines Abschlusses: selten,
                              und dann eindeutig. Weiß darauf 5,3:1. */
  /* WCAG-Kontrastprüfung (26.08.2026): Alle Kontrastwerte in diesem Block
     waren händisch geschätzt statt nachgerechnet. Die meisten stimmten in
     etwa, --zinnober-hell aber nicht: der Kommentar behauptete 4,8:1 auf
     Tanne, tatsächlich (relative Luminanz, WCAG 2.1) waren es nur 3,79:1 —
     unter dem AA-Minimum 4,5:1 für Fließtext. Betroffen: .kontaktband .pos
     und .weiter-karte .weiter-satz auf grünem Grund. Fix: Farbton (Koralle)
     unverändert, nur die Helligkeit angehoben (E8734F -> ED8C6E). Neuer
     Wert nachgerechnet: 4,7:1 auf Tanne, 6,4:1 auf Tiefe, 6,7:1 auf Tinte —
     überall über AA, mit kleinem Sicherheitsabstand statt auf der Kante. */
  --zinnober-hell: #ED8C6E; /* nur auf dunklem Grund.      auf Tanne  4,7:1 */

  /* NACHGEBESSERT 25.09.2026 (Haus-System /inhaber/, Kontrast-Scan): Die
     Aufklapper-Zeile eines Lösungsbausteins (.loesung .tiefe summary) steht
     IMMER auf der eigenen hellen Insel (--blatt-tief bzw. #FBF6F4 bei
     .stark), unabhängig von der Fläche der Seite darum — --zinnober (#C23B22)
     erreicht dort nur 4,30:1, unter dem AA-Minimum 4,5:1 für Fließtext.
     Dieselbe dunklere Fassung braucht die Aufklapper-Zeile auf allen vier
     Stufenseiten, nicht nur auf /inhaber/ — deshalb ein eigenes Token statt
     eines Pflasters je Seite. Das "+"-Bedienelement daneben bleibt bei
     --zinnober: als Bedienelement reicht ihm die 3:1-Grenze, die es längst
     erfüllt. Nachgerechnet: 5,62:1 auf --blatt-tief, 6,49:1 auf #FBF6F4. */
  --zinnober-dunkel: #A3311F; /* war für die helle Insel eines Bausteins; seit 30.09.2026 ungenutzt. */

  /* --- Linien ----------------------------------------------------------- */
  --linie-hell:  #D3D8CE;  /* Kontolinien auf Papier */
  --linie-dunkel:#43514E;  /* Kontolinien auf Grün */
  --linie-ui:    #7B8178;  /* Rahmen von Bedienelementen. 3,6:1 auf Blatt —
                              erfüllt WCAG 1.4.11 für Bedienelemente. */

  /* --- Maße ------------------------------------------------------------- */
  --container:   1180px;
  --measure:     62ch;
  --achse:       1px;      /* Stärke der Kontoachse */

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Eine Kurve für alles. Verschiedene Kurven auf einer Seite lesen sich
     als Zufall statt als Handschrift. */
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================================
   GRUNDLAGEN
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tanne);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--zinnober); }

:focus-visible {
  outline: 2px solid var(--zinnober);
  outline-offset: 3px;
}

/* =============================================================================
   TYPOGRAFIE

   Drei Rollen, nicht zwei. Die dritte — .pos — ist die Kontozeile: Positionen,
   Marginalien, Spaltenköpfe. Sie ist der Grund, warum die Seite nach Abschluss
   aussieht und nicht nach Broschüre.
   ============================================================================= */

h1, h2, h3 {
  font-family: var(--serif);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.011em;
  /* Silbentrennung nur im Fließtext — in Headlines erzeugt sie Brüche
     wie "erwirt-schaftet". */
  hyphens: manual; -webkit-hyphens: manual;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; color: inherit; }

h1 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.09;
  font-variation-settings: 'opsz' 44, 'wght' 480;
  max-width: 19ch;
}
h2 {
  font-size: clamp(25px, 2.8vw, 35px);
  line-height: 1.16;
  font-variation-settings: 'opsz' 32, 'wght' 500;
}
h3 {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.35;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 18, 'wght' 600;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
p, li { font-variant-numeric: proportional-nums; }
strong, b { font-variation-settings: 'wght' 600; }

/* IBM Plex Sans liegt lokal ohne Kursivschnitt — sonst würde der Browser
   synthetisch schrägstellen. Deshalb auf Newsreader Italic umleiten. */
em, i { font-family: var(--serif); font-style: italic; font-size: 1.05em; }

/* Der Vorspann traegt keine Silbentrennung. Er ist gross gesetzt und schmal
   umbrochen (44-46ch) - dort faellt ein "Sta-tik" genauso auf wie in einer
   Ueberschrift, waehrend die Trennung im normalen Fliesstext weiter hilft. */
.lead { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55;
        hyphens: manual; -webkit-hyphens: manual; }

/* Die dritte Rolle: Kontozeile. Spaltenköpfe, Positionsnummern, Marginalien. */
.pos {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinte-matt);
  margin: 0 0 16px;
}
.auf-gruen .pos, .fl-tanne .pos, .fl-tiefe .pos { color: var(--kreide-matt); }

.klein {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinte-matt);
  max-width: 60ch;
}
.auf-gruen .klein, .fl-tanne .klein, .fl-tiefe .klein { color: var(--kreide-matt); }

/* Zahlen sind immer Serif und immer tabellarisch — nur so stehen sie in
   Spalten wirklich untereinander. */
.zahl {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-style: normal;
  font-variation-settings: 'opsz' 30, 'wght' 500;
}

/* =============================================================================
   FLÄCHEN
   ============================================================================= */

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.schmal { max-width: var(--measure); }

section { padding-block: clamp(52px, 7vw, 92px); }

.fl-tanne { background: var(--tanne); color: var(--kreide); }
.fl-tiefe { background: var(--tiefe); color: var(--kreide); }
.fl-blatt { background: var(--blatt); color: var(--tinte); }

.fl-tanne h1, .fl-tanne h2, .fl-tanne h3,
.fl-tiefe h1, .fl-tiefe h2, .fl-tiefe h3 { color: var(--kreide); }
.fl-blatt h1, .fl-blatt h2, .fl-blatt h3 { color: var(--tanne); }

.fl-tanne p, .fl-tiefe p { color: var(--kreide-matt); }
.fl-tanne strong, .fl-tiefe strong { color: var(--kreide); }

/* Bis 30.09.2026 standen hier Regeln für die „hellen Inseln" .loesung und
   .bausteine div. Seit Variante B stehen beide ohne eigene Fläche direkt auf
   Tanne und erben die helle Schrift — die Sonderregel ist deshalb weg. */

/* NACHGEBESSERT 25.09.2026 (Haus-System /haftung/, Kontrast-Scan): Derselbe
   Fall wie oben bei .loesung — der Befund (.befund) bringt mit #FBF6F4
   ebenfalls seine EIGENE helle Fläche mit, unabhängig davon, auf welcher
   Sektion er gerade steht. `.fl-tanne p` (Klasse+Element, Spezifität 0,1,1)
   schlägt sonst `.befund` (nur Klasse, 0,1,0) und vererbt die helle
   Kreide-Schrift der Tanne-Fläche auf die helle Insel — helle Schrift auf
   hellem Grund. */
.fl-tanne .befund, .fl-tanne .befund strong { color: var(--tinte); }

/* =============================================================================
   DIE KONTOACHSE — das Strukturprinzip

   Eine durchgehende senkrechte Linie, an der Inhalte andocken. Sie ist der
   Grund, warum Weißraum hier nicht als Loch liest: jede Fläche hat eine Kante.
   ============================================================================= */

.konto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 880px) {
  .konto {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* Die rechte Spalte trägt die Achse als linke Kante. */
  .konto > * + * {
    border-left: var(--achse) solid var(--linie-hell);
    padding-left: 46px;
  }
  .konto > :first-child { padding-right: 46px; }
  .fl-tanne .konto > * + *,
  .fl-tiefe .konto > * + * { border-left-color: var(--linie-dunkel); }
}

/* Kontozeile: Position links, Betrag rechtsbündig — wie im Abschluss. */
.zeile {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie-hell);
}
.zeile:first-of-type { border-top: 1px solid var(--linie-hell); }
.fl-tanne .zeile, .fl-tiefe .zeile { border-color: var(--linie-dunkel); }

.zeile-text { flex: 1; min-width: 0; }
.zeile-wert { margin-left: auto; text-align: right; white-space: nowrap; }

/* Führungspunkte wie im Inhaltsverzeichnis eines Abschlusses. */
.zeile-fuehrung {
  flex: 1;
  border-bottom: 1px dotted var(--linie-hell);
  transform: translateY(-4px);
  min-width: 20px;
}
.fl-tanne .zeile-fuehrung, .fl-tiefe .zeile-fuehrung { border-color: var(--linie-dunkel); }

/* =============================================================================
   AKTION
   Auf Grün ist die Handlungsfläche hell — ein Blatt, das man anfasst.
   Zinnober bleibt dem Prüfvermerk vorbehalten und erscheint nur an den
   Stellen, an denen etwas WIRKLICH markiert werden soll.
   ============================================================================= */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blatt);
  color: var(--tanne);
  font-family: var(--sans);
  font-size: 16px;
  font-variation-settings: 'wght' 600;
  padding: 15px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms var(--kurve), color 180ms var(--kurve);
}
.cta:hover { background: #fff; color: var(--tiefe); }

/* Auf hellem Grund kehrt sich das um. */
.fl-blatt .cta { background: var(--tanne); color: var(--blatt); }
.fl-blatt .cta:hover { background: var(--tiefe); color: #fff; }

.cta[disabled] { opacity: .35; cursor: not-allowed; }
.cta-zeile { font-size: 13.5px; color: var(--kreide-matt); margin-top: 12px; }
.fl-blatt .cta-zeile { color: var(--tinte-matt); }

.cta-still {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 15px;
  font-variation-settings: 'wght' 500;
  color: inherit; padding: 12px 2px;
  text-decoration: underline; text-underline-offset: 4px;
}
.cta-still:hover { color: var(--zinnober); }

/* =============================================================================
   BEWEGUNG — ein orchestrierter Moment, keine verstreuten Effekte
   ============================================================================= */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 620ms var(--kurve), transform 620ms var(--kurve); }
.reveal.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Failsafe: Ohne JavaScript blieb die Vorgängerseite leer, weil alles per
   Scroll-Reveal eingeblendet wurde. */
.no-js .reveal { opacity: 1; transform: none; }