/* ==========================================================================
   Golchert Digital — Designsystem
   Werkstatt-Präzision, kein Startup-Glanz.
   Reihenfolge: Fonts · Tokens · Reset · Basis · Layout · Komponenten · Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften — lokal gehostet, keine externen Requests (DSGVO)
   Dateien gehören nach /assets/fonts/. Solange sie fehlen, greift der Fallback.
   -------------------------------------------------------------------------- */

/* Variable Fonts, in latin und latin-ext getrennt.
   Deutsch braucht nur latin (75 KB); latin-ext lädt der Browser nur bei Bedarf. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farbe — genau eine Signalfarbe, kein Blau, keine Verläufe */
  --c-bg:            #FAF9F6;  /* warmes Off-White */
  --c-surface:       #EFEDE8;  /* abgesetzte Sektionen */
  --c-surface-deep:  #E6E3DC;  /* Karten auf Surface, Tabellenkopf */
  --c-text:          #1A1A18;  /* fast-Schwarz, nie #000 */
  --c-text-muted:    #56564F;  /* 7.2:1 auf --c-bg */
  --c-border:        #D8D5CC;  /* dekorative Haarlinie: Karten, Trenner */
  --c-border-strong: #8A857A;  /* Bedienelemente: 3.5:1 auf --c-bg, WCAG 1.4.11 */

  --c-accent:        #0F4C4C;  /* tiefes Petrol — 9.3:1 auf --c-bg */
  --c-accent-hover:  #0A3838;
  --c-accent-tint:   #E4EDEB;  /* Flächen mit Akzentbezug */
  --c-on-accent:     #FAF9F6;

  --c-negative:      #8C2F14;  /* „Vorher“-Spalte, Zeitverlust — 6.5:1 */
  --c-negative-tint: #F5E8E3;

  /* Typografie */
  --f-sans: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;                        /* 13px — Labels, Meta */
  --fs-sm:   0.9375rem;                        /* 15px */
  --fs-base: 1.1875rem;                        /* 19px — Fließtext */
  --fs-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --fs-h4:   clamp(1.1875rem, 1.13rem + 0.3vw, 1.3125rem);
  --fs-h3:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-h2:   clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --fs-h1:   clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-display: clamp(2.5rem, 1.8rem + 3.4vw, 4.25rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  --ls-tight: -0.022em;
  --ls-wide:  0.08em;

  /* Abstände — 4px-Raster */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  /* Vertikale Rhythmik der Sektionen */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Maße */
  --w-content: 1200px;  /* maximale Inhaltsbreite */
  --w-text:    68ch;    /* max. Zeilenlänge Fließtext */
  --w-narrow:  52ch;

  /* Kanten & Tiefe — sparsam, keine Glasmorphismus-Effekte */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.06);
  --shadow-md: 0 2px 10px rgba(26, 26, 24, 0.07);

  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Basis-Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }

p { margin: 0 0 var(--s-5); max-width: var(--w-text); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--c-accent-hover); }

strong { font-weight: 600; }

/* Tastaturfokus durchgängig sichtbar (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* Monospace als technische Signatur: Zeiten, Schritte, Kennzahlen */
.mono {
  font-family: var(--f-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}
/* Direkt über dem zugehörigen Wert, z. B. Telefonnummer auf der Kontaktseite */
.eyebrow--eng { margin-bottom: var(--s-2); }

/* Selbstgebaute Prozessgrafiken. Klasse statt style-Attribut, damit die
   Content-Security-Policy ohne 'unsafe-inline' für Styles auskommt. */
.diagramm { width: 100%; height: auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: var(--w-text);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section { padding-block: var(--section-y); }
.section--surface { background: var(--c-surface); }
.section--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.section--accent h2,
.section--accent h3 { color: var(--c-on-accent); }
.section--accent .lead { color: rgba(250, 249, 246, 0.82); }
.section--accent .eyebrow { color: rgba(250, 249, 246, 0.7); }

.section__head { margin-bottom: var(--s-8); }
.section__head p { margin-top: var(--s-4); }

.stack > * + * { margin-top: var(--s-5); }
.prose { max-width: var(--w-text); }
.prose h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose > :first-child { margin-top: 0; }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Trennlinie als ruhiges Gliederungsmittel */
.rule { border: 0; border-top: 1px solid var(--c-border); margin: 0; }

/* --------------------------------------------------------------------------
   6. Komponenten
   -------------------------------------------------------------------------- */

/* 6.1 Button ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.85em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-on-accent);
}

.btn--secondary {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn--secondary:hover { border-color: var(--c-accent); color: var(--c-accent); }

.btn--onaccent {
  background: var(--c-bg);
  border-color: var(--c-bg);
  color: var(--c-accent);
}
.btn--onaccent:hover { background: #fff; border-color: #fff; color: var(--c-accent-hover); }

.btn--ghost-onaccent {
  background: transparent;
  border-color: rgba(250, 249, 246, 0.45);
  color: var(--c-on-accent);
}
.btn--ghost-onaccent:hover { border-color: var(--c-on-accent); background: rgba(250, 249, 246, 0.08); }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--t-base);
}
.link-arrow:hover::after { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

/* 6.2 Karte -------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.card:has(a:hover),
.card:has(a:focus-visible) {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-md);
}
/* Gilt für jede Überschriftenebene: welche semantisch richtig ist, hängt von der
   Seite ab (h2 in der Lösungsübersicht, h3 unter einem Sektions-h2). Die Optik
   darf davon nicht abhängen. */
.card :is(h2, h3, h4) {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  /* „Angebotsautomatisierung“ sprengt sonst die schmale Karte */
  hyphens: auto;
  overflow-wrap: break-word;
}
.card p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* Ganze Karte klickbar, Link bleibt der Fokusanker */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ''; position: absolute; inset: 0; }

.card__arrow {
  margin-top: auto;
  padding-top: var(--s-3);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.card:has(a:hover) .card__arrow { transform: translateX(3px); }
.card__arrow { transition: transform var(--t-base); }

.card--surface { background: var(--c-surface); border-color: transparent; }

/* 6.3 Vorher/Nachher — visuelles Signature-Element ----------------------- */

.compare {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .compare { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.compare__col {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}
.compare__col--before {
  background: var(--c-negative-tint);
  border-color: #E3CFC6;
}
.compare__col--after {
  background: var(--c-accent-tint);
  border-color: #C3D8D4;
}

.compare__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid currentColor;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.compare__col--before .compare__label { color: var(--c-negative); }
.compare__col--after  .compare__label { color: var(--c-accent); }

.compare__steps { list-style: none; display: grid; gap: var(--s-3); }
.compare__steps li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.compare__time {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.compare__sum {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.compare__sum .compare__time { font-size: var(--fs-sm); font-weight: 600; color: inherit; }

/* Ergebniszeile unter der Gegenüberstellung */
.compare__result {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
}
.compare__result strong {
  font-family: var(--f-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

/* 6.4 Kennzahl ----------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--s-2); }
.stat__value {
  font-family: var(--f-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  line-height: 1.1;
}
.stat__label { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.section--accent .stat__value { color: var(--c-on-accent); }
.section--accent .stat__label { color: rgba(250, 249, 246, 0.8); }

/* 6.5 Prozessschritte ---------------------------------------------------- */

.steps { list-style: none; display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
}

.steps li {
  counter-increment: step;
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-accent);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.steps h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.steps p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* 6.6 FAQ-Accordion ------------------------------------------------------ */

.accordion { border-top: 1px solid var(--c-border); max-width: 56rem; }
.accordion__item { border-bottom: 1px solid var(--c-border); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  cursor: pointer;
  color: inherit;
}
.accordion__trigger:hover { color: var(--c-accent); }

.accordion__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.35em;
  position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--c-accent);
  transition: transform var(--t-base), opacity var(--t-base);
}
.accordion__icon::before { inset: 45% 0; height: 2px; }
.accordion__icon::after  { inset: 0 45%; width: 2px; }
.accordion__trigger[aria-expanded='true'] .accordion__icon::after { transform: scaleY(0); opacity: 0; }

.accordion__panel { display: none; padding-bottom: var(--s-5); }
.accordion__panel[data-open] { display: block; }
.accordion__panel p { font-size: var(--fs-sm); color: var(--c-text-muted); max-width: var(--w-text); }

/* Ohne JS bleibt alles lesbar */
.no-js .accordion__panel { display: block; }
.no-js .accordion__icon { display: none; }

/* 6.7 CTA-Sektion -------------------------------------------------------- */

.cta { text-align: left; }
.cta h2 { max-width: 22ch; margin-bottom: var(--s-4); }
.cta .lead { margin-bottom: var(--s-6); }

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

.form { display: grid; gap: var(--s-5); max-width: 38rem; }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--c-text-muted); }

.field input,
.field textarea,
.field select {
  padding: 0.7em 0.9em;
  font-size: var(--fs-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-base);
}
.field input:hover,
.field textarea:hover { border-color: var(--c-text-muted); }
.field textarea { min-height: 8rem; resize: vertical; }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-3);
}
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.3em; accent-color: var(--c-accent); }
.field--check label { font-weight: 400; font-size: var(--fs-sm); }

/* Honeypot statt reCAPTCHA — für Menschen unsichtbar, kein externer Request */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 6.9 Kopf- und Fußzeile ------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: var(--c-on-accent); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
.site-header[data-scrolled] { border-bottom-color: var(--c-border); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-decoration: none;
}
.logo__mark { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.logo span { color: var(--c-text-muted); font-weight: 400; }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__list { display: flex; gap: var(--s-5); list-style: none; }
.nav__list a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.nav__list a[aria-current='page'] { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) clamp(1.25rem, 5vw, 3rem) var(--s-6);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
  }
  .nav[data-open] { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-base);
  }
  .nav__list a:hover { border-bottom-color: var(--c-border); }
  .nav .btn { margin-top: var(--s-5); justify-content: center; }
}

.site-footer {
  background: var(--c-text);
  color: rgba(250, 249, 246, 0.75);
  padding-block: var(--s-9) var(--s-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: rgba(250, 249, 246, 0.75); text-decoration: none; }
.site-footer a:hover { color: var(--c-bg); text-decoration: underline; }
.site-footer h3 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.5);
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; display: grid; gap: var(--s-3); }
.site-footer__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: var(--s-8);
}
.footer-blurb { color: rgba(250, 249, 246, 0.75); max-width: 26ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(250, 249, 246, 0.15);
  font-size: var(--fs-xs);
  color: rgba(250, 249, 246, 0.55);
}

/* 6.10 Hinweisbox — ehrliche Einordnung, „wann es sich nicht lohnt“ ------ */

.note {
  padding: var(--s-5);
  background: var(--c-surface);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note p { font-size: var(--fs-sm); }
.note__title { font-weight: 600; margin-bottom: var(--s-2); font-size: var(--fs-sm); }

/* 6.11 Split-Layout — einspaltig zuerst, zweispaltig erst ab Tablet ------ */

.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-10); }
  .split--portrait {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }
}

/* Hero */
.hero h1 { font-size: var(--fs-display); }
.hero__figure { margin: 0; }
@media (max-width: 62rem) {
  .hero__figure { max-width: 26rem; }
}

/* Porträt */
.portrait {
  border-radius: var(--r-lg);
  background: var(--c-surface);
  width: 100%;
}
.portrait-note {
  font-size: var(--fs-xs);
  margin-top: var(--s-3);
}

/* Problem-Spiegel: Überschriften eine Stufe kleiner als Sektions-H2 */
.problem h2 { font-size: var(--fs-h3); }
.problem__conclusion {
  max-width: 46ch;
  color: var(--c-text);
}

/* 6.12 Checkliste -------------------------------------------------------- */

.checklist { list-style: none; display: grid; gap: var(--s-3); max-width: var(--w-text); }
.checklist li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.checklist li::before { content: '—'; color: var(--c-accent); font-weight: 600; }
.checklist--no li::before { content: '×'; color: var(--c-negative); }

/* 6.13 Automatisierungs-Check --------------------------------------------
   Ohne JS stehen alle Fragen untereinander — dann greift .check__frage[hidden]
   nicht, weil das Attribut erst von JavaScript gesetzt wird.
   -------------------------------------------------------------------------- */

.check { max-width: 44rem; }

.check__fortschritt {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-5);
}

.check__frage {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-8);
}
.js .check__frage { margin-bottom: var(--s-6); }

.check__frage legend {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-5);
  max-width: 26ch;
}

.check__nr {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}

.check__hinweis {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: calc(var(--s-5) * -1 + var(--s-2));
  margin-bottom: var(--s-5);
}

.check__optionen { display: grid; gap: var(--s-3); }

/* Die ganze Zeile ist das Ziel — auf dem Handy zählt jede Trefferfläche */
.check__option {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.check__option:hover { border-color: var(--c-accent); }
.check__option input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--c-accent); }
.check__option:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}
.check__option:has(input:focus-visible) {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

.check__steuerung { margin-top: var(--s-6); }
.check__steuerung button[disabled] { opacity: 0.4; cursor: not-allowed; }

.check__meldung {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  min-height: 1.5em;
}

/* Ergebnis */
.ergebnis { max-width: var(--w-content); }
.ergebnis:focus { outline: none; }
.ergebnis h2 { margin-bottom: var(--s-4); }
.ergebnis h3 { font-size: var(--fs-h4); }

.ergebnis__zahl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-lg);
  max-width: none;
}
.ergebnis__zahl strong {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

/* Zeitangabe auf den Empfehlungskarten — begründet die Reihenfolge */
.card__zeit {
  font-size: var(--fs-xs) !important;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent) !important;
}

.ergebnis__hinweis {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  border-left: 3px solid var(--c-border-strong);
  padding-left: var(--s-5);
}

/* 6.14 Beispielblock — nummerierte Fälle auf den Branchenseiten ---------- */

.beispiel {
  display: grid;
  gap: var(--s-3) var(--s-5);
  grid-template-columns: 1fr;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.beispiel:first-child { padding-top: 0; border-top: 0; }

@media (min-width: 48rem) {
  .beispiel { grid-template-columns: 3rem 1fr; gap: var(--s-6); }
}

.beispiel__nr {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  margin: 0;
  padding-top: 0.35em;
}

.beispiel h3 {
  font-size: var(--fs-h3);
  max-width: 28ch;
  margin-bottom: var(--s-4);
}
.beispiel p { font-size: var(--fs-base); }

/* Die beteiligten Systeme — bewusst technisch gesetzt, das ist der Beleg */
.beispiel__tools {
  margin: var(--s-4) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  max-width: var(--w-text);
}
.section--surface .beispiel__tools { background: var(--c-surface-deep); }

/* 6.15 Brotkrumen — sichtbar, passend zum BreadcrumbList-Schema ---------- */

.brotkrumen { margin-bottom: var(--s-6); }
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  list-style: none;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.brotkrumen li + li::before {
  content: '/';
  margin-right: var(--s-3);
  color: var(--c-border-strong);
}
.brotkrumen a { color: var(--c-text-muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--c-accent); text-decoration: underline; }
.brotkrumen [aria-current='page'] { color: var(--c-text); }

/* 6.16 Redaktionsmarker --------------------------------------------------
   Nur für den Prototyp. Vor dem Livegang darf keine .todo-Box mehr existieren:
   grep -r 'class="todo' prototype/ muss leer ausgehen.
   -------------------------------------------------------------------------- */

.todo {
  padding: var(--s-5);
  margin-block: var(--s-5);
  max-width: var(--w-text);
  background: var(--c-negative-tint);
  border: 2px dashed var(--c-negative);
  border-radius: var(--r-md);
}
.todo::before {
  content: 'Noch auszufüllen';
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-negative);
  margin-bottom: var(--s-3);
}
.todo p, .todo li { font-size: var(--fs-sm); }
.todo ul { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.todo li { display: grid; grid-template-columns: 1.25rem 1fr; }
.todo li::before { content: '?'; color: var(--c-negative); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Scroll-Reveal — dezent, sonst nichts
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.js .reveal[data-visible] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--c-text-muted); }
.narrow { max-width: var(--w-narrow); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

@media print {
  .site-header, .site-footer, .btn { display: none; }
  body { background: #fff; font-size: 11pt; }
}