/* ==========================================================================
   Struktano — Design-System „Kontor 26"
   Übertragen aus der Design-Übergabe vom 12.08.2026.
   Werte stammen aus _ds/tokens/*.css und _ds_bundle.js und sind verbindlich.

   Grundregeln, die hier eingebaut sind und nicht aufgeweicht werden dürfen:
   - keine Übergänge, kein Einblenden, kein Parallax (transition: none)
   - Eckenradius 0, keine weichen Schatten, keine Verläufe, keine Transparenz
   - keine Icons, keine Emoji, keine Unicode-Piktogramme
   - nie #FFF als Fläche, nie #000 als Text
   ========================================================================== */

@import url("fonts.css");

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Grundfarben — Fassung A (sauer) */
  --lime-500:#CCFF00; --lime-600:#B8E600; --lime-700:#8FB400; --lime-100:#EDFFA8;
  --violet-900:#241063; --violet-800:#3B14A8; --violet-700:#5A19E6; --violet-200:#C9BCF2;
  --paper-0:#FBFAF6; --paper-50:#F5F3ED; --paper-100:#EAE7DC; --paper-200:#DAD6C9;
  --ink-900:#12110D; --ink-700:#3A382F; --ink-500:#57544A; --ink-300:#8C887A;

  /* Semantische Aliase — nur diese in Bauteilen verwenden */
  --signal:var(--lime-500); --signal-shade:var(--lime-700); --signal-ink:var(--ink-900);
  --deep:var(--violet-800); --deep-shade:var(--violet-900);
  --deep-ink:var(--paper-50); --deep-muted:var(--violet-200);
  --surface-paper:var(--paper-50); --surface-paper-raised:var(--paper-0);
  --surface-signal:var(--signal); --surface-deep:var(--deep);
  --text-body:var(--ink-700); --text-heading:var(--ink-900); --text-muted:var(--ink-500);
  --text-on-deep:var(--paper-50); --text-on-signal:var(--ink-900);
  --rule:var(--paper-200); --rule-strong:var(--ink-900);
  --link:var(--ink-900); --link-hover:var(--signal-shade); --link-on-deep:var(--signal);

  /* Schrift */
  --font-display:"Archivo Black","Archivo",system-ui,sans-serif;
  --font-text:"Public Sans",system-ui,sans-serif;
  --font-display-weight:400;
  --font-display-tracking:-0.02em;

  --text-2xs:0.875rem; --text-xs:1rem; --text-sm:1.125rem; --text-base:1.1875rem;
  --text-lead:1.375rem; --text-md:1.75rem; --text-lg:2.25rem; --text-xl:3rem;
  --text-2xl:4rem; --text-3xl:5.5rem; --text-numeral:9.5rem;

  --display-1:clamp(3.125rem,5vw,5.5rem);
  --display-2:clamp(2.25rem,3.5vw,3.75rem);
  --display-3:clamp(1.625rem,2.2vw,2.5rem);

  --lh-display:1.05; --lh-heading:1.12; --lh-body:1.55; --lh-lead:1.42; --lh-flat:1;
  --track-display:var(--font-display-tracking); --track-kicker:0.16em;
  --weight-regular:400; --weight-medium:500; --weight-bold:700;
  --measure:34ch; --measure-lead:42ch;

  /* Abstände, 4px-Basis */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-11:192px;
  --gutter:clamp(24px,6vw,112px);
  --section-y:clamp(72px,9vw,160px);
  --column-text:min(50%,620px);
  --column-narrow:min(38%,460px);

  /* Kanten, Blöcke, Rahmen */
  --radius-0:0px;
  --border-hair:1px; --border-solid:2px; --border-heavy:3px;
  --block-offset:6px;
  --shadow-block:var(--block-offset) var(--block-offset) 0 var(--ink-900);
  --slant-height:clamp(56px,9vw,131px);
  --frame-band:14px;
}

/* --- Element-Grundlagen ------------------------------------------------- */

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

body {
  margin:0;
  background:var(--surface-paper);
  color:var(--text-body);
  font-family:var(--font-text);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  font-weight:var(--weight-regular);
  text-wrap:pretty;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

h1, h2, h3, h4 {
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-display-weight);
  letter-spacing:var(--track-display);
  line-height:var(--lh-heading);
  color:var(--text-heading);
  text-wrap:balance;
}
h1 { font-size:var(--display-1); line-height:var(--lh-display) }
h2 { font-size:var(--display-2); line-height:var(--lh-display) }
h3 { font-size:var(--display-3) }

p { margin:0 }
p + p { margin-top:var(--space-4) }

a {
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  text-decoration-color:var(--signal-shade);
}
a:hover { color:var(--link-hover); text-decoration-color:var(--signal) }

/* Fokus: 3px durchgezogen in Tinte, 3px abgesetzt. Wird nie entfernt. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline:var(--border-heavy) solid var(--ink-900);
  outline-offset:3px;
}
.deep a:focus-visible, .deep button:focus-visible, .deep summary:focus-visible {
  outline-color:var(--paper-50);
}

::selection { background:var(--signal); color:var(--signal-ink) }
img, svg { display:block; max-width:100% }
button { font:inherit; color:inherit }

/* Bewegung gibt es nicht. Das ist eine Entscheidung, kein Versehen. */
*, *::before, *::after { transition:none !important }

/* --- Rahmenband --------------------------------------------------------- */

.band { height:var(--frame-band); background:var(--signal); flex:0 0 auto }

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); flex-wrap:wrap;
  padding:var(--space-5) var(--gutter);
  border-bottom:2px solid var(--ink-900);
}
.wordmark {
  font-family:var(--font-display); font-size:var(--text-xs);
  letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-900);
  text-decoration:none;
}
.wordmark:hover { color:var(--ink-900) }
.site-nav { display:flex; align-items:flex-start; gap:var(--space-6); flex-wrap:wrap }
.site-nav a {
  font-family:var(--font-text); font-size:var(--text-2xs); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-900);
  text-decoration:none;
}
.site-nav a:hover { color:var(--signal-shade) }
/* Aktive Seite: 3px-Limettenstrich unter dem Link */
.site-nav a[aria-current="page"]::after {
  content:""; display:block; height:3px; background:var(--signal); margin-top:6px;
}

/* Das Aufklappmenü am Handy. Auslöser ist das Wort „Menü", kein Burger-Icon,
   auch kein selbstgezeichnetes: die Seite ist ohne Symbole gebaut.
   Am Rechner existiert der Knopf nicht. */
.menue-knopf {
  display:none;
  background:none; border:none; padding:0 0 4px; cursor:pointer;
  font-family:var(--font-text); font-size:var(--text-2xs); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-900);
  border-bottom:3px solid var(--signal);
}
.menue-knopf:hover { border-bottom-width:6px; padding-bottom:1px }
.menue-panel {
  background:var(--paper-100); border-bottom:2px solid var(--ink-900);
  padding:var(--space-6) var(--gutter);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5);
}
.menue-panel[hidden] { display:none }
.menue-panel a {
  font-family:var(--font-text); font-size:var(--text-sm); font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-900);
  text-decoration:none;
}
.menue-panel a:hover { color:var(--signal-shade) }
@media (max-width:760px) {
  .site-nav { display:none }
  .menue-knopf { display:inline-block }
}

main { flex:1 1 auto }

/* --- Fußzeile ----------------------------------------------------------- */

.site-footer {
  border-top:2px solid var(--ink-900);
  padding:var(--space-8) var(--gutter) var(--space-7);
}
.site-footer__grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-7); align-items:start;
}
.site-footer__claim {
  margin-top:var(--space-3); font-size:var(--text-2xs); line-height:1.6;
  color:var(--text-muted); max-width:28ch;
}
.site-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3) }
.site-footer nav a {
  font-size:var(--text-2xs); font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-900); text-decoration:none;
}
.site-footer nav a:hover { color:var(--signal-shade) }
.site-footer__contact { font-size:var(--text-2xs); line-height:1.7; color:var(--text-muted) }
.site-footer__contact a { color:inherit; text-decoration-color:var(--signal-shade) }

/* --- Surface ------------------------------------------------------------ */

.surface {
  padding:var(--section-y) var(--gutter);
  position:relative;
  background:var(--surface-paper);
  color:var(--text-body);
}
.surface.paper   { background:var(--surface-paper); color:var(--text-body) }
.surface.paper-100 { background:var(--paper-100); color:var(--text-body) }
.surface.raised  { background:var(--surface-paper-raised); color:var(--text-body) }
.surface.deep    { background:var(--surface-deep); color:var(--text-on-deep) }
.surface.nopad   { padding-top:0; padding-bottom:0 }
.surface.deep h1, .surface.deep h2, .surface.deep h3 { color:var(--paper-50) }
.surface.deep p { color:var(--deep-muted) }

/* --- Schräger Trenner --------------------------------------------------- */
/* Sektionen werden nie durch eine waagerechte Kante getrennt.
   Die Abfolge rise/fall alterniert durchgehend und darf nicht
   einzeln geändert werden, ohne die ganze Kette nachzuziehen. */

.slant { line-height:0; width:100%; background:var(--von) }
.slant svg { display:block; width:100%; height:var(--slant-height) }
.slant polygon { fill:var(--nach) }

/* Die sechs vorkommenden Übergänge. „rise" und „fall" wechseln sich ab,
   damit jede Fläche in die andere Richtung kippt als die davor. */
.s-paper-100 { --von:var(--surface-paper); --nach:var(--paper-100) }
.s-100-paper { --von:var(--paper-100);     --nach:var(--surface-paper) }
.s-paper-deep{ --von:var(--surface-paper); --nach:var(--surface-deep) }
.s-deep-paper{ --von:var(--surface-deep);  --nach:var(--surface-paper) }
.s-100-deep  { --von:var(--paper-100);     --nach:var(--surface-deep) }
.s-deep-100  { --von:var(--surface-deep);  --nach:var(--paper-100) }

/* Hero: das Bild darf hier einmal pro Seite in den Schnitt ragen. */
.hero { padding-top:var(--space-9); padding-bottom:0; overflow:visible }

/* --- Das Fallwerk im Hero der Startseite -------------------------------- */
/* Die zweite Ausnahme von „keine Bewegung", neben dem Erscheinen der
   Handy-Leiste. Sie ist bewusst gesetzt und gilt nur für diese eine Zeile.

   Die Aussage ist das Wechseln selbst: der Platz ist beliebig füllbar.
   Wer das als „möglichst viele Aufgaben zeigen" liest, baut es falsch. */

/* Die Überschrift richtet sich nach der Breite ihrer eigenen Spalte, nicht
   nach der Fensterbreite. Sonst wächst sie über die 640px-Textspalte hinaus. */
.hero-spalte { container-type:inline-size }

.hero-titel {
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:max(3.125rem, min(5.5rem, 5vw, 9.4cqi));
  hyphens:auto; overflow-wrap:break-word;
}

/* Der Kasten schneidet nur senkrecht ab: clip-path statt overflow, sonst
   werden breite Wörter auch seitlich gekappt. Das Polster unten hält
   Unterlängen von der Schnittkante weg. */
.wechsel {
  display:grid; width:100%;
  clip-path:inset(0 -0.25em 0 -0.25em);
  padding-bottom:0.14em; margin-bottom:-0.14em;
}
/* Alle Einträge liegen in derselben Rasterzelle übereinander. Der Kasten ist
   damit automatisch so hoch wie der längste Eintrag, auf jeder Breite, und
   es springt nichts. Feste Höhen sind ausdrücklich verworfen. */
.wechsel > * { grid-area:1 / 1 }
.wechsel__wort { transform-origin:0% 50%; will-change:transform }
.wechsel__mass { visibility:hidden; pointer-events:none }

/* --- Raster und Textbreiten --------------------------------------------- */
/* Ein Textblock läuft nie über die volle Breite. Die rechte Hälfte
   bleibt leer oder trägt ein Bild, sie wird nicht aufgefüllt. */

/* 42ch ist die Untergrenze: die Spalte wird nie so schmal, dass der Text
   in Schnipsel zerfällt. Kam mit dem Durchgang „Handy-Lesbarkeit". */
.col { max-width:max(42ch, min(var(--pct,50%), var(--px,620px))) }
.col-half { --pct:50%;  --px:620px }
.col-52   { --pct:52%;  --px:660px }
.col-56   { --pct:56%;  --px:700px }
.col-58   { --pct:58%;  --px:760px }
.col-60   { --pct:60%;  --px:780px }
.col-62   { --pct:62%;  --px:800px }
.col-64   { --pct:64%;  --px:860px }
.col-66   { --pct:66%;  --px:880px }
.col-70   { --pct:70%;  --px:820px }
.col-72   { --pct:72%;  --px:980px }

.measure      { max-width:var(--measure-lead) }
.measure-34   { max-width:var(--measure) }
.measure-44   { max-width:44ch }
.measure-46   { max-width:46ch }
.measure-48   { max-width:48ch }
.measure-52   { max-width:52ch }
.measure-62   { max-width:62ch }

.ch-12 { max-width:12ch } .ch-14 { max-width:14ch } .ch-16 { max-width:16ch }
.ch-18 { max-width:18ch } .ch-20 { max-width:20ch }

.lead {
  font-size:var(--text-lead); line-height:var(--lh-lead); color:var(--text-body);
}
.surface.deep .lead { color:var(--deep-muted) }

/* --- Kicker ------------------------------------------------------------- */

.kicker { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4) }
.kicker::before {
  content:""; width:28px; height:3px; background:var(--signal); flex:0 0 auto;
}
.kicker span {
  font-family:var(--font-text); font-size:var(--text-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--track-kicker); line-height:1.2;
  color:var(--ink-500);
}
.surface.deep .kicker span { color:var(--signal) }

/* Kleiner Kicker ohne Strich, z. B. über Zwischenüberschriften */
.eyebrow {
  font-size:var(--text-2xs); font-weight:700; letter-spacing:var(--track-kicker);
  text-transform:uppercase; color:var(--ink-500);
}
.surface.deep .eyebrow { color:var(--signal) }

/* --- Knopf -------------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-text); font-weight:var(--weight-bold);
  font-size:var(--text-xs); line-height:1; letter-spacing:0.005em;
  border-radius:var(--radius-0); text-decoration:none; cursor:pointer;
}
/* primär: Fläche in Limette, 2px Kante, harter Versatzblock dahinter */
.btn--primary {
  background:var(--signal); color:var(--signal-ink);
  border:var(--border-solid) solid var(--ink-900);
  padding:16px 26px;
  box-shadow:6px 6px 0 var(--ink-900);
}
.btn--primary:hover { box-shadow:3px 3px 0 var(--ink-900); transform:translate(3px,3px); color:var(--signal-ink) }
.btn--primary:active { box-shadow:0 0 0 var(--ink-900); transform:translate(6px,6px) }
.btn--primary.btn--lg { padding:20px 30px; font-size:var(--text-sm) }
.btn--primary.btn--sm { padding:12px 18px; font-size:var(--text-2xs) }
/* auf Violett kippt die Kante auf Papier */
.surface.deep .btn--primary { border-color:var(--paper-50); box-shadow:6px 6px 0 var(--paper-50) }
.surface.deep .btn--primary:hover { box-shadow:3px 3px 0 var(--paper-50) }
.surface.deep .btn--primary:active { box-shadow:0 0 0 var(--paper-50) }

/* sekundär: nur Text mit Unterstreichung, 3px, im Hover 6px und volle Limette */
.btn--secondary {
  background:transparent; color:var(--ink-900); border:none; padding:16px 2px;
  text-decoration:underline; text-decoration-thickness:3px;
  text-underline-offset:6px; text-decoration-color:var(--signal-shade);
}
.btn--secondary:hover {
  color:var(--ink-900); text-decoration-thickness:6px; text-decoration-color:var(--signal);
}
.btn--secondary.btn--lg { padding:20px 2px; font-size:var(--text-sm) }
.btn--secondary.btn--sm { padding:16px 2px; font-size:var(--text-2xs) }
.surface.deep .btn--secondary { color:var(--paper-50); text-decoration-color:var(--signal) }
.surface.deep .btn--secondary:hover { color:var(--paper-50) }

/* Aufruf mit Zusatzzeile darunter */
.cta { margin-top:var(--space-7); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3) }
.cta__note {
  font-size:var(--text-2xs); letter-spacing:0.06em; text-transform:uppercase;
  font-weight:700; color:var(--text-muted);
}
.surface.deep .cta__note { color:var(--deep-muted) }

/* --- Angebotskasten ----------------------------------------------------- */

.offer {
  background:var(--surface-paper-raised); color:var(--text-body);
  border:var(--border-heavy) solid var(--ink-900);
  box-shadow:var(--block-offset) var(--block-offset) 0 var(--ink-900);
  padding:var(--space-7);
}
.offer > h3 { font-size:var(--text-lg); line-height:var(--lh-heading); color:var(--text-heading) }
.offer__price {
  display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap;
  margin-top:var(--space-5); padding-top:var(--space-5);
  border-top:var(--border-solid) solid var(--ink-900);
}
.offer__price b {
  font-family:var(--font-display); font-weight:var(--font-display-weight);
  font-size:var(--text-xl); line-height:var(--lh-flat);
  letter-spacing:var(--track-display); color:var(--ink-900);
}
.offer__price span { font-size:var(--text-2xs); color:var(--text-muted) }
.offer__body { margin-top:var(--space-6) }

/* --- Aufzählung mit Limettenquadrat ------------------------------------- */
/* Kein Häkchen, kein Piktogramm. Das Quadrat ist das Aufzählungszeichen. */

.tick { list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:var(--space-4) }
.tick li {
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4); align-items:start;
  font-size:var(--text-sm); line-height:var(--lh-body);
}
.tick li::before {
  content:""; width:10px; height:10px; background:var(--signal); margin-top:10px;
}
.tick--tight { gap:var(--space-3) }
.tick--tight li { gap:var(--space-3) }
.tick--quiet li { color:var(--text-muted) }
.tick--quiet li::before { background:var(--ink-300) }
.tick--base li { font-size:var(--text-base) }
.tick--base li::before { margin-top:12px }

/* --- Faktenleiste ------------------------------------------------------- */

.facts { display:grid; grid-template-columns:1fr; gap:0; margin:0; border-top:var(--border-hair) solid var(--rule) }
.facts > div { padding:var(--space-5) var(--space-5) var(--space-5) 0; border-bottom:var(--border-hair) solid var(--rule) }
.facts dt {
  font-family:var(--font-text); font-size:var(--text-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--track-kicker);
  color:var(--ink-900); margin-bottom:var(--space-2);
}
.facts dd { margin:0; font-size:var(--text-sm); line-height:var(--lh-body); color:var(--text-muted) }

/* --- Nummerierter Block ------------------------------------------------- */
/* Die sehr große Ziffer ist die einzige „Grafik" im System. */

.numbered {
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--space-6); align-items:start;
  padding-top:var(--space-5); border-top:var(--border-solid) solid var(--ink-900);
}
.surface.deep .numbered { border-top-color:var(--violet-700) }
.numbered__n {
  font-family:var(--font-display); font-weight:var(--font-display-weight);
  font-size:var(--text-numeral); line-height:0.78;
  letter-spacing:var(--track-display); color:var(--paper-200);
  font-variant-numeric:lining-nums tabular-nums;
}
.numbered__n.ink { color:var(--ink-900) }
.numbered__n.signal { color:var(--signal) }
.numbered h3 { font-size:var(--text-md); line-height:var(--lh-heading); margin-bottom:var(--space-3) }
.numbered p { font-size:var(--text-sm); line-height:var(--lh-body); max-width:var(--measure) }
.surface.deep .numbered p { color:var(--deep-muted) }

/* --- Aufklapper --------------------------------------------------------- */
/* Zu oder auf, kein Gleiten. Zeichen ist + bzw. – als Schriftzeichen. */

.faq { border-top:var(--border-solid) solid var(--ink-900) }
.faq > summary {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-5);
  align-items:center; text-align:left; list-style:none; cursor:pointer;
  padding:var(--space-5) var(--space-3) var(--space-5) 0;
  font-family:var(--font-text); font-size:var(--text-sm);
  font-weight:var(--weight-bold); line-height:var(--lh-lead); color:var(--ink-900);
}
.faq > summary::-webkit-details-marker { display:none }
.faq > summary:hover { background:var(--paper-100) }
.faq > summary::after {
  content:"+"; font-family:var(--font-display); font-weight:var(--font-display-weight);
  font-size:var(--text-md); line-height:0.7; color:var(--signal-shade);
}
.faq[open] > summary::after { content:"\2013" }
.faq__body {
  padding:0 var(--space-3) var(--space-6) 0; max-width:var(--measure-lead);
  font-size:var(--text-sm); line-height:var(--lh-body); color:var(--text-body);
}
.faq-list { border-bottom:var(--border-solid) solid var(--ink-900) }

/* --- Antwortfläche (Selbsttest) ----------------------------------------- */
/* Ganze Fläche klickbar, mindestens 88px hoch, Buchstabe im Kästchen links.
   Ausgewählt: Fläche wird Limette. Kein Radiobutton, kein Häkchen. */

.answer {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-4);
  align-items:center; width:100%; min-height:88px; text-align:left;
  background:var(--surface-paper-raised); color:var(--ink-900);
  border:var(--border-solid) solid var(--ink-900); border-radius:var(--radius-0);
  padding:var(--space-5); cursor:pointer;
  box-shadow:5px 5px 0 var(--ink-900);
  font-family:var(--font-text); font-size:var(--text-sm);
  font-weight:var(--weight-medium); line-height:var(--lh-lead);
}
.answer:hover { box-shadow:3px 3px 0 var(--ink-900); transform:translate(2px,2px) }
.answer:active { box-shadow:0 0 0 var(--ink-900); transform:translate(5px,5px) }
.answer[aria-pressed="true"] {
  background:var(--signal); color:var(--signal-ink);
  box-shadow:3px 3px 0 var(--ink-900); transform:translate(2px,2px);
}
.answer__marker {
  width:40px; height:40px; display:grid; place-items:center;
  border:var(--border-solid) solid var(--ink-900);
  font-family:var(--font-display); font-weight:var(--font-display-weight);
  font-size:var(--text-xs); letter-spacing:0; flex:0 0 auto;
}

/* --- Fortschritt -------------------------------------------------------- */

.progress__label {
  display:flex; justify-content:space-between; gap:var(--space-4);
  font-size:var(--text-2xs); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--track-kicker); color:var(--text-muted);
  margin-bottom:var(--space-3);
}
.progress__track {
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px;
  border:var(--border-solid) solid var(--ink-900); padding:3px;
}
.progress__track span { height:14px; background:transparent }
.progress__track span.on { background:var(--signal) }

/* --- Bildplatzhalter ---------------------------------------------------- */
/* Solange kein Foto da ist, bleibt der beschriftete Platzhalter stehen. */

.imgph {
  position:relative; aspect-ratio:4 / 5; background:var(--paper-100);
  border:var(--border-solid) solid var(--ink-900); overflow:hidden;
}
.imgph img { width:100%; height:100%; object-fit:cover }
.imgph--overlap { margin-bottom:-92px; z-index:2 }
.imgph__label {
  position:absolute; left:var(--space-4); bottom:var(--space-4);
  font-family:var(--font-text); font-size:var(--text-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--track-kicker); color:var(--ink-500);
}

/* --- Die zwei Fotos ------------------------------------------------------ */
/* Aus der Übergabe vom 17.08.: 4:5, harte 2px-Kante in Tinte, kein Radius,
   kein Filter, kein Verlauf. Wenn echte Fotos kommen, werden nur die zwei
   Dateien in bilder/ ersetzt, sonst nichts. */

.foto {
  width:100%; aspect-ratio:4 / 5;
  background-size:cover; background-position:center;
  border:var(--border-solid) solid var(--ink-900);
}
.foto--hero { background-image:url("../bilder/hero-zwei-am-bildschirm.jpg") }
/* Herangeholt: Kopf und Schulteransatz, nicht der halbe Oberkörper. */
.foto--portrait {
  background-image:url("../bilder/portrait-moritz.jpg");
  background-size:auto 132%; background-position:50% 16%;
}
/* Die KI-Kennzeichnung (Art. 50 Abs. 4 und 5 KI-VO): Bild und Unterschrift
   liegen in EINEM figure und dürfen nie getrennt gerendert werden — nicht am
   Handy, nicht bei beschnittenem Bild. Kommen echte Fotos, werden beide
   Unterschriften ersatzlos gelöscht. */
.figur { margin:0 }
.figur > figcaption {
  margin-top:10px; font-size:var(--text-2xs); font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-500);
}
/* Der eine Bildmoment der Seite: das Hero-figure (Bild samt Unterschrift)
   ragt 92px in den Schnitt. Der Überstand sitzt am figure, nicht am Bild,
   damit die Kennzeichnung mit hineinragt statt abgeschnitten zu werden. */
.figur--overlap { margin-bottom:-92px; position:relative; z-index:2 }

/* --- Kästen, Zitate, Hervorhebungen ------------------------------------- */
/* Karten sind keine Karten: Fläche mit harter Kante und Versatzblock. */

.box {
  background:var(--surface-paper); border:var(--border-heavy) solid var(--ink-900);
  box-shadow:var(--block-offset) var(--block-offset) 0 var(--ink-900);
  padding:var(--space-6);
}
.box--raised { background:var(--surface-paper-raised) }
.box--signal { background:var(--signal); color:var(--ink-900) }
.box--wide { padding:var(--space-7) }
.box--signal-block { box-shadow:var(--block-offset) var(--block-offset) 0 var(--signal) }

.quote {
  margin:0; background:var(--surface-paper-raised);
  border:var(--border-solid) solid var(--ink-900);
  box-shadow:var(--block-offset) var(--block-offset) 0 var(--ink-900);
  padding:var(--space-7);
}
.quote p { font-size:var(--text-lead); line-height:var(--lh-lead); color:var(--ink-900) }
.quote footer {
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:var(--border-hair) solid var(--rule);
  font-size:var(--text-2xs); font-weight:700; letter-spacing:var(--track-kicker);
  text-transform:uppercase; color:var(--ink-500);
}

.rule-signal { border-left:3px solid var(--signal); padding-left:var(--space-5) }
.rule-top    { border-top:var(--border-solid) solid var(--ink-900); padding-top:var(--space-4) }
.rule-top-heavy { border-top:var(--border-heavy) solid var(--ink-900); padding-top:var(--space-4) }
.rule-top-signal { border-top:var(--border-heavy) solid var(--signal); padding-top:var(--space-4) }
.rule-top-quiet  { border-top:var(--border-heavy) solid var(--ink-300); padding-top:var(--space-4) }
.surface.deep .rule-top { border-top-color:var(--violet-700) }

/* Die kleine Rechnung im Anrechnungs-Kasten */
.rechnung {
  margin-top:var(--space-5); display:flex; align-items:baseline; gap:var(--space-4);
  flex-wrap:wrap; font-family:var(--font-display);
  letter-spacing:var(--track-display); color:var(--ink-900);
}
.rechnung__kicker {
  font-size:var(--text-2xs); font-family:var(--font-text); font-weight:700;
  letter-spacing:var(--track-kicker); text-transform:uppercase;
  color:var(--ink-500); width:100%;
}
.rechnung__zahl { font-size:var(--text-md) }
.rechnung__op { font-size:var(--text-sm); color:var(--ink-300) }
.rechnung__summe { font-size:var(--text-lg); background:var(--signal); padding:2px 10px }

/* Offene Stelle, die vor dem Launch gefüllt werden muss. */
.offen { background:var(--signal); color:var(--ink-900); padding:0 4px }

/* --- Formular ----------------------------------------------------------- */

.form { margin-top:var(--space-8); max-width:520px; display:grid; gap:var(--space-6) }
.form label { display:grid; gap:var(--space-3) }
.form label span.feldname {
  font-size:var(--text-2xs); font-weight:700; letter-spacing:var(--track-kicker);
  text-transform:uppercase; color:var(--ink-900);
}
.form input[type="text"], .form input[type="email"] {
  font-family:var(--font-text); font-size:var(--text-sm); padding:14px 16px;
  background:var(--surface-paper-raised); border:var(--border-solid) solid var(--ink-900);
  border-radius:0; color:var(--ink-900); width:100%;
}
.form label.check {
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4); align-items:start; cursor:pointer;
}
.form input[type="checkbox"] { width:22px; height:22px; margin-top:2px; accent-color:var(--signal) }
.form .einwilligung { font-size:var(--text-2xs); line-height:1.65; color:var(--text-body) }

/* --- Hilfsklassen ------------------------------------------------------- */

.stack-3 { margin-top:var(--space-3) }
.stack-4 { margin-top:var(--space-4) }
.stack-5 { margin-top:var(--space-5) }
.stack-6 { margin-top:var(--space-6) }
.stack-7 { margin-top:var(--space-7) }
.stack-8 { margin-top:var(--space-8) }
.stack-9 { margin-top:var(--space-9) }
.flow-6 { display:flex; flex-direction:column; gap:var(--space-6) }
.flow-7 { display:flex; flex-direction:column; gap:var(--space-7) }
.flow-8 { display:flex; flex-direction:column; gap:var(--space-8) }
.flow-9 { display:flex; flex-direction:column; gap:var(--space-9) }
.row { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap }
.row-baseline { display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr)); gap:var(--space-9) }
.split--300 { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--space-8) }
.split--320 { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--space-8) }
.split--360 { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:var(--space-8) }
.split--380 { grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:var(--space-8) var(--space-9) }
.split--420 { grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:var(--space-9) }
.split--440 { grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:var(--space-9) }
.gross-preis {
  font-family:var(--font-display); font-size:var(--text-xl); line-height:1;
  letter-spacing:var(--track-display); color:var(--ink-900);
}
.hinweis { font-size:var(--text-2xs); color:var(--text-muted) }
.kursiv-leise { font-style:italic; color:var(--text-muted) }
.surface.deep .kursiv-leise { color:var(--deep-muted) }
.mw-1100 { max-width:1100px }
.mw-1180 { max-width:1180px }
.mw-1240 { max-width:1240px }

/* Die vier Punkte im Block „Der Unterschied": jeder mit 3px Limettenlinie
   oben, in Vorspanngröße. Rechte Spalte am Rechner, unter dem Text am Handy. */
.limettenliste { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6) }
.limettenliste li {
  border-top:var(--border-heavy) solid var(--signal); padding-top:var(--space-4);
  font-size:var(--text-lead); line-height:var(--lh-lead);
}

/* Der Test-Kasten der Startseite: Rahmen 3px, Versatzblock in Tinte,
   Überschrift in Displaygröße, primärer Knopf in klein. Der Test ist der
   Zweitweg, sichtbar, aber leiser als der Hauptaufruf im Hero. */
.testkasten {
  max-width:max(42ch,min(56%,720px));
  background:var(--surface-paper-raised);
  border:var(--border-heavy) solid var(--ink-900);
  box-shadow:var(--shadow-block);
  padding:var(--space-7);
}

/* Der Anrechnungs-Kasten der Startseite steht am Rechner rechts neben
   Karte 1. Am Handy fällt er weg, dafür kommt eine Zeile in Karte 1. */
.anrechnung-zeile { display:none }
@media (max-width:760px) {
  .anrechnung-kasten { display:none }
  .anrechnung-zeile {
    display:block; margin-top:var(--space-5); padding-top:var(--space-4);
    border-top:var(--border-solid) solid var(--ink-900);
    font-size:var(--text-sm); line-height:var(--lh-body);
  }
}

/* Sprungziel „Über mich": etwas Luft über dem Block beim Anspringen. */
#ueber-mich { scroll-margin-top:24px }
.strich { width:28px; height:3px; background:var(--signal) }
.js-only { display:none }

/* --- Schmale Fenster ---------------------------------------------------- */
/* Es wird gestapelt, nicht verkleinert. Fließtext bleibt bei 19px. */

@media (max-width:900px) {
  .col { max-width:none }
  /* Archivo Black läuft sehr breit. Ein einzelnes langes Kompositum
     („Datenschutzerklärung") ist sonst breiter als das Fenster. Der
     gewollte Umbruch auf drei bis vier Zeilen bleibt davon unberührt,
     getrennt wird nur, was sonst hinausragen würde. */
  h1, h2, h3 { hyphens:auto }
  .numbered { grid-template-columns:1fr; gap:var(--space-3) }
  .numbered__n { font-size:5rem }
  .imgph--overlap { margin-bottom:-48px }
  .figur--overlap { margin-bottom:-48px }
  .offer { padding:var(--space-6) }
  .box--wide { padding:var(--space-6) }
  .quote { padding:var(--space-6) }
}

@media (max-width:640px) {
  .site-header { gap:var(--space-4) }
  .site-nav { gap:var(--space-4) }
  .answer { grid-template-columns:1fr; align-items:start; gap:var(--space-3) }
  .rechnung__summe { font-size:var(--text-md) }
}

/* --- Die Startseite am Handy -------------------------------------------- */
/* Aus dem Durchgang „Handy-Lesbarkeit" vom 12.08.2026. Am Rechner stand der
   Entwurf, am Handy las er sich als Textwand: elf gleich gewichtete Blöcke
   ohne Ankerpunkt. Der Aufbau ist unverändert, nur die Gewichtung.
   Umschaltgrenze ist 760px, und alles hier gilt ausschließlich für
   `body.startseite`. Die anderen Seiten bleiben, wie sie sind. */

/* Die mitlaufende Leiste. Sie ist da oder sie ist nicht da: kein Einblenden,
   kein Schatten, keine Animation. Am Rechner existiert sie nicht. */
.mobilleiste { display:none }
.mobilleiste__abstand { display:none }

@media (max-width:760px) {

  /* 1 · Die Fotos sind am Handy sichtbar, volle Breite, ohne den
     92px-Überstand (der ist eine Rechner-Sache). Von Moritz am 17.08.
     abends so entschieden, die Übergabe war an der Stelle widersprüchlich.
     Nur leere Platzhalter (falls je wieder einer steht) bleiben versteckt. */
  .startseite .bildspalte--nur-platzhalter { display:none }
  .startseite .bildspalte { max-width:none !important; justify-self:stretch !important }
  .startseite .bildspalte .imgph--overlap,
  .startseite .bildspalte .figur--overlap { margin-bottom:0 }

  /* 2 · Mitlaufende Leiste am unteren Rand. Seit dem 17.08. zwei Zeilen:
     oben der Hauptknopf mit Zusatz, darunter, durch eine Haarlinie
     getrennt, der Test als leiser Zweitweg. Kein violetter Knopf, den
     gibt es im System nicht. */
  .startseite .mobilleiste.sichtbar {
    display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:var(--paper-100); border-top:var(--border-solid) solid var(--ink-900);
    padding:10px var(--space-5) 12px; gap:8px;
  }
  .startseite .mobilleiste__zeile {
    display:flex; align-items:center; gap:var(--space-4);
  }
  .startseite .mobilleiste span {
    font-size:var(--text-2xs); line-height:1.35; color:var(--text-muted);
  }
  .startseite .mobilleiste__test {
    padding-top:6px; border-top:var(--border-hair) solid var(--rule);
  }
  .startseite .mobilleiste__test .btn--secondary.btn--sm { padding:4px 2px }
  .startseite .mobilleiste__abstand { display:block; height:118px }

  /* 3 · Deutlichere Blockwechsel: mehr Abstand zwischen den Blöcken als
     innerhalb. Die Abwechslung paper-50 / paper-100 und die schrägen
     Trenner bleiben unverändert. */
  .startseite .surface { padding-top:112px; padding-bottom:112px }
  .startseite .surface.hero { padding-top:var(--space-8); padding-bottom:0 }

  /* Kicker als kleines Limettenfeld statt mit dem 28x3px-Strich.
     Nicht auf der Violettfläche: dort ist die Kickerschrift selbst
     limettenfarben, ein Limettenfeld würde sie verschlucken. */
  .startseite .surface:not(.deep) .kicker {
    display:inline-flex; background:var(--signal);
    padding:8px 12px; margin-bottom:var(--space-5);
  }
  .startseite .surface:not(.deep) .kicker::before { display:none }
}