/* ==========================================================================
   Nino Abate — Konzept „Kalibriert"
   Die Seite ist ein Messgerät: bemaßt, mit eigener Skala, und sie zeigt
   ihre eigenen Werte an.

   Handgeschrieben. Keine externen Ressourcen — Schrift und Bibliotheken
   liegen auf dem eigenen Server.

   1. Schrift
   2. Design-Tokens
   3. Reset & Grundlagen
   4. Layout
   5. Typografie
   6. Messrail
   7. Bemaßung & Rahmung
   8. Bewegung (Reveal-Zustände)
   9. Buttons
   10. Header & Navigation
   11. Footer
   12. Hero & 3D-Bühne
   13. Komponenten
   14. Formular
   15. Hilfsklassen
   ========================================================================== */

/* ---------- 1. Schrift --------------------------------------------------- */

/* Zwei Schriften, beide SIL OFL und beide von diesem Server ausgeliefert.
   Kein Google-Abruf.

   Playfair Display trägt die Überschriften: hoher Strichstärken-Kontrast,
   klassisch-elegant — die Anmutung aus der Design-Referenz.
   Archivo trägt Fließtext und Bedienelemente: neutral, gut lesbar.

   Zusammen 73 KB. Zum Vergleich: Archivo allein mit der Breiten-Achse wog
   90 KB. Die Achse wird nicht mehr gebraucht, seit die Serifenschrift die
   Display-Ebene übernimmt. */

@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin.woff2?v=2026073008') format('woff2-variations');
  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: 'Archivo Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2?v=2026073008') format('woff2-variations');
  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;
}

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

:root {
  /* Flächen. Werte aus der Design-Referenz übernommen: deren Grundton ist
     #1C1C1C, ein warmes Fast-Schwarz. Die Grundfläche liegt eine Spur
     darunter, damit erhöhte Flächen sich abheben. */
  --void:    #141312;
  --ink:     #1c1c1b;
  --ink-2:   #232221;
  --ink-3:   #2b2928;

  /* Warme Grauwerte für Linien, Beschriftungen und die 3D-Umgebung */
  --steel-1: #211f1e;
  --steel-2: #33302d;
  --steel-3: #55504c;
  /* steel-4 trägt echten Text (Brotkrumen, Fußzeilen-Überschriften,
     Paket-Hinweise, Bemaßung) und muss deshalb 4,5:1 erreichen. */
  --steel-4: #918b86;
  --steel-5: #a9a29c;

  --line:    #302d2b;
  --line-2:  #423d3a;

  /* Kupfer — die einzige Farbe. Alle Werte stammen aus der Referenz.
     Als Akzent und als Flächenfüllung dient #c5886f, nicht das dunklere
     #a96a51: Weiß auf #a96a51 erreicht nur 4,29:1 und fällt damit unter
     die WCAG-AA-Schwelle. Der hellere Ton mit dunkler Schrift kommt auf
     6,3:1 — gleiche Farbfamilie, barrierefrei. */
  --signal:     #c5886f;
  --signal-dk:  #a96a51;
  --signal-tint:#cfa390;
  --signal-dim: #4e3528;

  /* Silber — ausschließlich für Hover-Zustände von Schaltflächen.
     Leicht kühl, als bewusster Gegenpol zum warmen Kupfer. */
  --hover-silver:       #c5c9ce;
  --hover-silver-light: #d8dbde;
  --hover-silver-dark:  #9ea3a8;
  --hover-text:         #1b1a19;

  /* Text */
  --text:      #ededeb;
  --text-dim:  #b3aeaa;
  --text-mute: #918b86;

  --ok:  #7fbf8a;
  --err: #e08a7a;

  /* Fluide Typo-Skala */
  --fs-900: clamp(2.35rem, 1.25rem + 4.4vw, 4.75rem);
  --fs-800: clamp(2rem, 1.3rem + 2.9vw, 3.35rem);
  --fs-700: clamp(1.4rem, 1.12rem + 1.15vw, 1.95rem);
  --fs-600: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-500: 1.0625rem;
  --fs-400: 1rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;
  --fs-100: 0.6875rem;

  /* Abstände */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;    --s-9: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --wrap:      1240px;
  --wrap-text: 68ch;
  --radius:    3px;
  --radius-lg: 6px;

  /* Breite des Messrails. Wird unterhalb 64rem auf 0 gesetzt. */
  --rail-w: 0px;

  --font-display: 'Playfair Display Variable', Georgia, 'Times New Roman', serif;
  --font: 'Archivo Variable', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-num: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Bewegung: gedämpft, mechanisch. Ein gutes Werkzeug schwingt nicht nach. */
  --ease: cubic-bezier(0.33, 0.9, 0.2, 1);
  --dur:  0.45s;
}

@media (min-width: 64rem) {
  :root { --rail-w: 58px; }
}

/* ---------- 3. Reset & Grundlagen --------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  color-scheme: dark;
  /* Der Platz für die Bildlaufleiste ist immer reserviert — so verschiebt
     ihr Erscheinen oder Verschwinden nie die Inhaltsbreite. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  font-size: var(--fs-400);
  font-weight: 400;
  line-height: 1.62;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Sehr dezenter Lichtabfall von oben — gibt der Fläche Tiefe, ohne dass es
     als Verlauf auffällt. Bewusst NICHT background-attachment: fixed — ein
     fixierter Verlauf zwingt den Browser, beim Scrollen die ganze Fläche neu
     zu zeichnen, und genau das macht Scrollen zäh und unruhig. */
  background-image: radial-gradient(120% 60% at 50% -10%, #221e1b 0%, var(--void) 60%);
}

img, picture, svg, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Bedienelemente: kein Doppeltipp-Zoom (spart die 300-ms-Verzögerung auf
   Mobilgeräten) und ein eigener Tipp-Effekt statt des blauen Systemkastens. */
a, button, summary, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(197 136 111 / 0.2);
}

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

::selection { background: var(--signal); color: var(--void); }

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

/* ---------- 4. Layout ---------------------------------------------------- */

/* Alles rückt um die Rail-Breite ein, damit die Skala nie über Inhalt liegt. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.25rem);
}

@media (min-width: 64rem) {
  .site-header__inner,
  .section > .wrap,
  .page-head > .wrap,
  .cta-band > .wrap,
  .site-footer > .wrap,
  .hero__inner { padding-left: calc(var(--rail-w) + clamp(1.125rem, 3vw, 2.25rem)); }
}

.wrap--narrow { max-width: 900px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

/* Erhöhte Lesefläche — für lange Textstrecken und dichte Abschnitte. */
.section--raised { background: var(--ink); border-block: 1px solid var(--line); }
.section--deep   { background: #0f0e0d; border-block: 1px solid var(--line); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 44rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 58rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
  .split--wide-left  { grid-template-columns: 1.3fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.3fr; }
}

/* ---------- 5. Typografie ------------------------------------------------ */

/* Das typografische System: Überschriften in der Serifenschrift, weich und
   hochwertig — Fließtext, Bedienelemente und alles Zahlenhafte in der
   Grotesk beziehungsweise Mono. Der Kontrast zwischen den beiden trägt den
   Auftritt. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  color: #faf8f7;
}

h1 { font-size: var(--fs-900); font-weight: 500; line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-800); font-weight: 500; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-700); font-weight: 600; line-height: 1.22; letter-spacing: -0.008em; }
h4 { font-size: var(--fs-600); font-weight: 600; line-height: 1.34; letter-spacing: -0.004em; }

p, li { text-wrap: pretty; }

.lead {
  font-size: var(--fs-600);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 58ch;
}

.prose { max-width: var(--wrap-text); color: var(--text-dim); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose strong { color: var(--text); font-weight: 700; }
.prose em { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--steel-4); }
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--signal);
  transition: color var(--dur) var(--ease);
}
.prose a:hover { color: var(--signal); }

/* Kleines Label über einer Überschrift, mit Positionsnummer. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--signal);
  flex: none;
}

.mark { background: var(--signal); color: var(--void); padding: 0 0.18em; }

/* Wort mit Signalunterlage in einer Überschrift. */
.ul-signal {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.09em;
  padding-bottom: 0.06em;
}

/* Alles Zahlenhafte läuft in Mono — das ist die halbe Konzeptarbeit. */
.num, .stat__value, .plan__price b, .facts dd, .pillar__num, .rail__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Messrail -------------------------------------------------- */

/* Ab 64rem eine Skala am linken Rand wie an einem Messschieber.
   Darunter schrumpft sie zu einer Fortschrittslinie oben.
   Reine Dekoration, im Markup mit aria-hidden versehen. */

.rail {
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

/* Schmale Ansicht: Fortschrittsbalken oben */
@media (max-width: 63.99rem) {
  .rail { top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
  .rail__scale, .rail__value, .rail__marks { display: none; }
  .rail__runner {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 100%;
    background: var(--signal);
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
  }
}

/* Breite Ansicht: die eigentliche Skala */
@media (min-width: 64rem) {
  .rail {
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail-w);
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, #191716, var(--void) 18%, var(--void) 82%, #191716);
  }

  /* Teilstriche: alle 9px kurz, alle 45px lang. */
  .rail__scale {
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(180deg, var(--steel-4) 0 1px, transparent 1px 45px);
    background-size: 8px 100%, 15px 100%;
    background-position: right 12px top 0, right 12px top 0;
    background-repeat: repeat-y;
    opacity: 0.55;
  }

  /* Der Nonius: wandert mit dem Scroll. */
  .rail__runner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--signal);
    transform: translateY(var(--runner, 0px));
    will-change: transform;
  }
  .rail__runner::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border: 5px solid transparent;
    border-right-color: var(--signal);
  }

  /* Der Messwert, um 90 Grad gedreht. */
  .rail__value {
    position: absolute;
    left: 50%;
    bottom: var(--s-6);
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: var(--fs-100);
    letter-spacing: 0.18em;
    color: var(--steel-4);
    white-space: nowrap;
  }

  /* Abschnittsmarken auf der Skala */
  .rail__marks { position: absolute; inset: 0; }
  .rail__mark {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--steel-3);
    transform: translateY(-0.5px);
  }
  .rail__mark span {
    position: absolute;
    left: 6px;
    top: 3px;
    font-family: var(--font-num);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--steel-4);
  }
}

/* ---------- 7. Bemaßung & Rahmung --------------------------------------- */

/* Eckwinkel wie in einer technischen Zeichnung. Bewusst nur zwei Ecken —
   die Asymmetrie wirkt gezeichnet, nicht wie ein Rahmen. */
.framed { position: relative; }
.framed::before, .framed::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-2);
  pointer-events: none;
}
.framed::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.framed::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.framed--signal::before, .framed--signal::after { border-color: var(--signal-dim); }

/* Maßlinie mit Endanschlägen und Mono-Beschriftung.
   Sparsam einsetzen: höchstens ein bis zwei pro Bildschirm. */
.dim {
  position: relative;
  display: block;
  height: 1px;
  background: var(--steel-3);
  margin-block: var(--s-5) var(--s-6);
}
.dim::before, .dim::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--steel-3);
}
.dim::before { left: 0; }
.dim::after  { right: 0; }
.dim > span {
  position: absolute;
  top: -0.72em;
  left: 50%;
  transform: translateX(-50%);
  padding-inline: var(--s-3);
  background: var(--void);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  color: var(--steel-4);
  white-space: nowrap;
}
.section--raised .dim > span { background: var(--ink); }
.hero .dim > span { background: transparent; }

/* Vertikale Maßangabe, rechts neben einem Block. */
.dim-v {
  position: absolute;
  top: 0; bottom: 0; right: -1.6rem;
  width: 1px;
  background: var(--steel-3);
}
.dim-v > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding-block: var(--s-2);
  background: var(--void);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  color: var(--steel-4);
}

/* Positionsnummer an einem Abschnitt, wie eine Teilenummer. */
.pos {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  color: var(--steel-4);
}

/* ---------- 8. Bewegung -------------------------------------------------- */

/* Wichtig: versteckt wird ausschließlich, wenn JavaScript nachweislich läuft.
   Ohne JS und bei reduzierter Bewegung ist alles sofort sichtbar. */
/* Nur Überblendung, keine Verschiebung.

   Vorher starteten die Elemente 12 px unterhalb ihrer Endposition und
   wanderten beim Erscheinen nach oben. Während man scrollt, bewegt sich der
   Inhalt damit ein zweites Mal in derselben Achse — das Auge liest das
   zuverlässig als Ruckeln, selbst bei sauberen 60 Bildern pro Sekunde
   (nachgemessen: kein einziger Frame über 17 ms).

   Eine reine Überblendung hat dieses Problem nicht: Deckkraft verändert
   keine Position, der Text steht von der ersten Sekunde an exakt dort, wo
   er hingehört. */
.js .reveal { opacity: 0; }

/* Nach der Einblendung übernimmt diese Klasse. Ohne sie fiele das Element
   beim Aufräumen des Inline-Stils auf opacity: 0 zurück — der Text
   verschwände unmittelbar nach dem Erscheinen wieder. */
.js .reveal.ist-sichtbar { opacity: 1; }

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

/* Bewusst kein Vorhang über der Seite: ein Overlay, das hängenbleibt, wäre
   ein Totalausfall. Der kurze Schriftwechsel beim ersten Besuch ist der
   deutlich kleinere Preis. Die Schrift wird vorgeladen, danach liegt sie
   ein Jahr im Zwischenspeicher. */

/* ---------- 9. Buttons --------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3.125rem;
  padding: 0.8125rem 1.625rem;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Hover einheitlich in Silber: gefüllte Knöpfe wechseln auf Silbergrund mit
   dunkler Schrift, Konturknöpfe auf silberne Kontur. Dazu maximal zwei Pixel
   Hub und ein zurückhaltender Schatten. Kein Gelb — nirgends. */
.btn--primary { background: var(--signal); color: var(--void); border-color: var(--signal); }
.btn--primary:hover {
  background: var(--hover-silver);
  border-color: var(--hover-silver);
  color: var(--hover-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.35);
}

.btn--dark { background: var(--text); color: var(--void); border-color: var(--text); }
.btn--dark:hover {
  background: var(--hover-silver);
  border-color: var(--hover-silver);
  color: var(--hover-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.35);
}

/* Auf dunklem Grund die Standard-Sekundärform. */
.btn--outline,
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--steel-3);
}
.btn--outline:hover,
.btn--ghost:hover {
  background: rgb(197 201 206 / 0.07);
  border-color: var(--hover-silver);
  color: var(--hover-silver-light);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; box-shadow: none; }
}

.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 30rem) { .btn-row .btn { width: 100%; } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-300);
  text-decoration: none;
  color: var(--text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--signal);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--signal); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 10. Header & Navigation -------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--signal);
  color: var(--void);
  font-weight: 700;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #141312;
  border-bottom: 1px solid var(--line);
}

/* Bewusst kein backdrop-filter: Ein Weichzeichner hinter einer mitlaufenden
   Kopfleiste muss bei jedem gescrollten Bild neu berechnet werden und ist
   eine der häufigsten Ursachen für zähes Scrollen — auf schwächeren
   Grafikkarten auch am Desktop. Eine deckende Fläche kostet nichts und
   sieht bei diesem dunklen Grundton praktisch identisch aus. */

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

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.logo__dot { color: var(--signal); }
.logo__sub {
  display: none;
  font-family: var(--font-num);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-4);
}
@media (min-width: 62rem) { .logo__sub { display: inline; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.5rem 0.9375rem;
  background: transparent;
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--steel-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--signal); }
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 17px; height: 1px; background: currentColor; }
@media (min-width: 62rem) { .nav-toggle { display: none; } }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  font-size: var(--fs-300);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: var(--signal); }

@media (max-width: 61.99rem) {
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--ink-2);
    border-bottom: 1px solid var(--signal);
    box-shadow: 0 20px 40px rgb(0 0 0 / 0.6);
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { padding: var(--s-2) clamp(1.125rem, 4vw, 2.25rem) var(--s-5); }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { padding: 0.9375rem 0; font-size: var(--fs-500); }
  .nav .nav__cta { margin-top: var(--s-4); }
  .nav .nav__cta a {
    padding: 0.8125rem 1.5rem;
    background: var(--signal);
    color: var(--void);
    text-align: center;
    border-radius: var(--radius);
  }
}

@media (min-width: 62rem) {
  .nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
  .nav .nav__cta a {
    padding: 0.6875rem 1.25rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    background: var(--signal);
    color: var(--void);
    border-radius: var(--radius);
    font-weight: 700;
  }
  .nav .nav__cta a:hover { background: var(--hover-silver); color: var(--hover-text); }
}

/* ---------- 11. Footer --------------------------------------------------- */

.site-footer {
  background: #0f0e0d;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--fs-300);
}
.site-footer h3 {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-4);
  margin-bottom: var(--s-4);
}
.site-footer a { color: var(--text-dim); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--signal); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }

.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  color: var(--steel-4);
}

/* ---------- 12. Hero & 3D-Bühne ------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; }

/* Zwei echte Spalten statt eines absolut positionierten Objekts: so kann der
   Text die Bühne konstruktionsbedingt NIE überlappen — auf keiner Breite und
   bei keinem Zoom. Auf schmalen Geräten eine Spalte, zuerst der Text, dann
   die Bühne. */
.hero__grid { display: grid; gap: var(--s-7); }
.hero__text { min-width: 0; }
.hero h1 { margin-top: var(--s-3); }
.hero .lead { margin-top: var(--s-5); max-width: 560px; }

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .hero .stage { width: 100%; max-height: none; aspect-ratio: 1 / 1; }
}

/* Die Bühne: technische Zeichnung, darüber blendet das gerenderte Werkstück. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 62vh;
}
@media (max-width: 61.99rem) { .stage { max-height: 44vh; aspect-ratio: 4 / 3; } }

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.stage[data-scene="ready"] .stage__canvas { opacity: 1; }

.stage__draft {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s var(--ease);
}
.stage[data-scene="ready"] .stage__draft { opacity: 0; }

/* Beschriftung unter der Bühne. Echter Text, kein Canvas-Inhalt: markierbar,
   vorlesbar, skaliert mit der Systemschrift. */
.stage__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
}
.stage__index { color: var(--signal); flex: none; }
.stage__name  {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Lange Gewerkenamen („Garten- und Landschaftsbau") dürfen die Zeile
     nicht umbrechen — die Zeilenhöhe bliebe sonst nicht stabil. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Die gesamte Bühne ist ein Link auf die Preisseite. Bewusst ein echtes
   <a> statt eines Klick-Behandlers: damit funktionieren Tastatur, Fokusring,
   Rechtsklick, Mittelklick und Screenreader ohne eine Zeile JavaScript. */
a.stage-block {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
}
a.stage-block:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }

.stage__cta {
  margin-left: auto;
  flex: none;
  color: var(--steel-4);
  transition: color var(--dur) var(--ease);
}
.stage__cta::after { content: " \203A"; }
a.stage-block:hover .stage__cta,
a.stage-block:focus-visible .stage__cta { color: var(--hover-silver-light); }
a.stage-block:hover .stage__label { border-top-color: var(--steel-3); }
.stage__label { transition: border-color var(--dur) var(--ease); }

@media (max-width: 30rem) { .stage__cta { display: none; } }


/* Kleine ruhige Variante im Seitenkopf der Unterseiten. */
.stage--mini { aspect-ratio: 1 / 1; max-height: 190px; width: 190px; margin-inline-start: auto; }
.stage--mini + .stage__label { display: none; }
@media (max-width: 57.99rem) { .stage--mini { display: none; } }

/* Die technische Zeichnung — Sofortzustand und zugleich der Dauerzustand
   auf schmalen Geräten und bei reduzierter Bewegung. Kein Notbehelf. */
.draft-line   { fill: none; stroke: var(--steel-3); stroke-width: 1; stroke-linejoin: round; }
.draft-line--bold { stroke: var(--steel-5); stroke-width: 1.5; }
.draft-fill   { fill: #12161a; }
.draft-fill--signal { fill: var(--signal); opacity: 0.16; }
.draft-center { stroke: var(--signal-dim); stroke-width: 1; stroke-dasharray: 16 4 3 4; fill: none; }
.draft-dim    { stroke: var(--steel-3); stroke-width: 0.75; fill: none; }
.draft-txt {
  fill: var(--steel-4);
  font-family: var(--font-num);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}
.draft-txt--signal { fill: var(--signal); }
.draft-hatch { stroke: var(--steel-2); stroke-width: 0.6; }

/* Kennzahlen: drei Werte, großzügig gesetzt. Keine Trennlinien, viel Luft —
   die Zahlen tragen sich selbst. Handy einspaltig, ab Tablet zwei, ab
   Desktop drei Spalten. */
.stats {
  display: grid;
  gap: var(--s-6) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hero .stats { margin-top: var(--s-8); }

.stat__value {
  display: block;
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
}
.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-400);
  line-height: 1.4;
  color: var(--text);
}
.stat__sub {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-200);
  line-height: 1.4;
  color: var(--text-mute);
}

/* Die Messwertzeile — das Leitmotiv der Seite. Läuft als Band über die volle
   Inhaltsbreite und ist von Anfang an im Layout: sie wird nicht nachträglich
   eingeblendet, weil genau das die Seite beim Lesen springen ließe. Nur die
   Zahl selbst wird gefüllt, ihr Platz ist über min-width reserviert. */
.proof-line {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  width: 100%;
  margin-top: var(--s-8);
  padding: var(--s-5) clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-num);
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--text-mute);
}
.proof-line strong {
  flex: none;
  min-width: 5ch;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}
.proof-line span { max-width: 72ch; }
@media (max-width: 40rem) {
  .proof-line { flex-direction: column; align-items: flex-start; }
}

/* ---------- 13. Komponenten ---------------------------------------------- */

.card {
  padding: var(--s-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--text-dim); }
.card > * + * { margin-top: var(--s-3); }
.card strong { color: var(--text); }

.card--ink { background: var(--ink-3); border-color: var(--line-2); }
.card--signal { background: var(--signal); color: var(--void); border-color: var(--signal); }
.card--signal h3, .card--signal p, .card--signal strong { color: var(--void); }

/* Säulen mit Positionsnummer */
.pillar {
  position: relative;
  padding: var(--s-5);
  padding-top: var(--s-6);
  background: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--signal);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: background-color var(--dur) var(--ease);
}
.pillar:hover { background: var(--ink-2); }
.pillar__num {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  color: var(--steel-4);
}
.pillar h3 { margin-bottom: var(--s-3); font-size: var(--fs-600); }
.pillar p { color: var(--text-dim); font-size: var(--fs-300); }
.pillar strong { color: var(--text); }

/* Listen */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.85rem; color: var(--text-dim); }
.checklist li + li { margin-top: var(--s-3); }
.checklist li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.7;
}
.checklist--bad li::before  { content: "\00d7"; color: var(--err); }
.checklist--good li::before { content: "\2713"; color: var(--ok); }
.card--signal .checklist li { color: var(--void); }
.card--signal .checklist li::before { color: var(--void); }

/* Ablaufschritte */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 44rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-num);
  font-size: var(--fs-200);
  letter-spacing: 0.16em;
  color: var(--signal);
}
.steps h3 { font-size: var(--fs-600); margin-bottom: var(--s-2); }
.steps p { color: var(--text-dim); font-size: var(--fs-300); }
.steps--stacked { grid-template-columns: 1fr !important; gap: var(--s-5); }

/* Preis-Pakete */
.plans { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 62rem) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan--featured { border-color: var(--signal); background: var(--ink-2); }
.plan__badge {
  position: absolute;
  top: -0.72rem;
  left: var(--s-5);
  padding: 0.22rem 0.6rem;
  background: var(--signal);
  color: var(--void);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}
.plan__name { font-size: var(--fs-700); }
.plan__for { margin-top: var(--s-2); font-size: var(--fs-300); color: var(--text-mute); }
/* flex-wrap: der Zusatz („netto, einmalig …") darf als Ganzes unter den
   Betrag rutschen — der Betrag selbst bricht nie. Ohne das nowrap stand
   das €-Zeichen auf schmalen Karten allein in der zweiten Zeile. */
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: var(--s-5) 0 var(--s-1); }
.plan__price b {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.plan__price span { font-family: var(--font-num); font-size: var(--fs-200); color: var(--text-mute); }
.plan__note { font-family: var(--font-num); font-size: var(--fs-100); letter-spacing: 0.08em; color: var(--steel-4); }
.plan ul {
  list-style: none;
  padding: var(--s-5) 0 0;
  margin: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.plan ul li { position: relative; padding-left: 1.6rem; font-size: var(--fs-300); color: var(--text-dim); }
.plan ul li + li { margin-top: var(--s-3); }
.plan ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--ok);
}
.plan ul li strong { color: var(--text); }
.plan .btn { margin-top: auto; }

/* Referenzkarten */
.ref-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ref-card:hover { border-color: var(--steel-3); transform: translateY(-2px); }
/* Echte Screenshots der vier Projekte. `contain` statt `cover`: die Aufnahmen
   sind unterschiedlich proportioniert (1,8:1 bis 2,1:1), und beschnitten
   fehlte jeweils ein Teil der Seite. Jetzt ist jeder Screenshot vollständig
   sichtbar; die dunkle Fläche dahinter fängt die Formatunterschiede ab, alle
   Karten behalten dieselbe 16:10-Höhe. Leicht entsättigt, damit die vier
   Markenfarben die Seite nicht zerreißen; beim Überfahren volle Farbe. */
.ref-card__shot {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--s-3);
  background: #0f0e0d;
  border-bottom: 1px solid var(--line);
  filter: saturate(0.72) brightness(0.88) contrast(1.05);
  transition: filter var(--dur) var(--ease);
}
.ref-card:hover .ref-card__shot { filter: none; }
.ref-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.ref-card__tag {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.ref-card h3 { margin: var(--s-3) 0; font-size: var(--fs-600); }
.ref-card p { color: var(--text-dim); font-size: var(--fs-300); }
.ref-card .link-arrow { margin-top: var(--s-5); align-self: flex-start; }

.shot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(-45deg, var(--ink-3) 0 10px, var(--ink-2) 10px 20px);
  border: 1px solid var(--line);
  color: var(--steel-4);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-4);
}

/* Kennzahlen der Fallstudien: kleine Bezeichnung, große Zahl in Kupfer,
   kurze Erklärung. Karten gleicher Höhe; drei Spalten auf Desktop, zwei auf
   Tablet, eine auf dem Handy. Qualitative Werte („Niedrig") laufen im selben
   Raster wie Zahlen — bewusst keine erfundenen Prozentangaben. */
.kpis {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
  max-width: var(--wrap-text);
}
@media (min-width: 40rem) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--signal);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.kpi__label {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-4);
}
.kpi__value {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  overflow-wrap: break-word;
}
.kpi__value--text { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.2; }
.kpi__desc { font-size: var(--fs-300); line-height: 1.5; color: var(--text-dim); }

/* Kennwerte-Leiste */
.facts {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0;
}
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts dt {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-4);
}
.facts dd { margin: var(--s-2) 0 0; font-size: var(--fs-500); font-weight: 700; color: var(--text); }

/* Zitat */
.quote {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--signal);
  color: var(--void);
  border-radius: var(--radius-lg);
}
.quote p {
  font-size: var(--fs-700);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--void);
}
.quote footer {
  margin-top: var(--s-4);
  font-family: var(--font-num);
  font-size: var(--fs-200);
  color: var(--signal-dim);
}

/* FAQ — nativ über <details>, kein JavaScript nötig */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq summary:hover { color: var(--signal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 1.5rem;
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--signal);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--signal); }
.faq__answer { padding-bottom: var(--s-5); max-width: var(--wrap-text); }
.faq__answer p { color: var(--text-dim); }
.faq__answer > * + * { margin-top: var(--s-3); }

/* Abschluss-Band */
.cta-band {
  position: relative;
  padding-block: var(--section-y);
  background: var(--ink);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta-band h2 { max-width: 24ch; }
.cta-band p { color: var(--text-dim); margin-top: var(--s-4); max-width: 56ch; }

/* Kontaktwege */
.contact-ways { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .contact-ways { grid-template-columns: repeat(3, 1fr); } }
.way {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}
.way:hover { border-color: var(--signal); }
.way__label {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.way__value {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-size: var(--fs-600);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.way__value:hover { color: var(--signal); }
.way__hint { font-size: var(--fs-300); color: var(--text-mute); }

/* Hinweisbox */
.note {
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-300);
  color: var(--text-dim);
}
.note--warn { border-left-color: var(--err); }
.note strong { display: block; margin-bottom: var(--s-2); color: var(--text); }
.section--raised .note { background: var(--ink-2); }

/* Platzhalter, der auffällt, solange Daten fehlen. */
.todo {
  background: var(--signal-dim);
  color: var(--signal-tint);
  padding: 0.05em 0.35em;
  font-family: var(--font-num);
  font-size: 0.88em;
  border-bottom: 1px dotted var(--signal);
}

/* Kopfbereich einer Unterseite */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 58rem) { .page-head__grid { grid-template-columns: 1fr auto; } }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-top: var(--s-4); }

.crumbs {
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  color: var(--steel-4);
  margin-bottom: var(--s-4);
}
.crumbs a { color: var(--steel-4); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }

/* ---------- 14. Formular ------------------------------------------------- */

.form { max-width: 40rem; }
.form > * + * { margin-top: var(--s-5); }

.field { display: grid; gap: var(--s-2); }
.field > label { font-weight: 700; font-size: var(--fs-300); color: var(--text); }
.field__hint { font-size: var(--fs-200); color: var(--text-mute); }

.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.75rem 0.9375rem;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--steel-3); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--steel-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  background: var(--ink-2);
  border-color: var(--signal);
  outline: 1px solid var(--signal);
  outline-offset: 0;
}
.field input:required:invalid:not(:placeholder-shown) { border-color: var(--err); }

/* Honeypot: für Menschen unsichtbar, für Bots ein Köder.
   Kein display:none — manche Bots ignorieren ausgeblendete Felder. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-300);
  color: var(--text-dim);
}
.consent input { width: 1.375rem; height: 1.375rem; min-height: 0; margin-top: 0.15rem; accent-color: var(--signal); }
.consent a { color: var(--text); text-decoration-color: var(--signal); }

.alert {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-left: 2px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-300);
  color: var(--text-dim);
}
.alert--ok  { background: #0d1a12; border-left-color: var(--ok); }
.alert--err { background: #1a0f0e; border-left-color: var(--err); }
.alert strong { display: block; margin-bottom: var(--s-2); color: var(--text); }

/* ---------- 15. Hilfsklassen --------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

.text-center { text-align: center; }
.center-block { margin-inline: auto; }
.max-text { max-width: var(--wrap-text); }
.relative { position: relative; }

.card-link { text-decoration: none; display: block; }
.card-link:hover { border-color: var(--signal); }
.card-link h3 { color: var(--text); }
.card-link:hover h3 { color: var(--signal); }

.portrait-placeholder { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }

/* Portrait: leicht entsättigt und warm getönt, damit es sich in die
   Kupfer-Palette einfügt, statt als Fremdkörper zu wirken. */
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  filter: saturate(0.78) contrast(1.04) brightness(0.94) sepia(0.1);
}
.portrait__caption {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-family: var(--font-num);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-4);
}
.portrait__caption .num { color: var(--signal); }

@media print {
  .site-header, .site-footer, .cta-band, .btn-row, .rail, .stage { display: none; }
  body { color: #000; background: #fff; background-image: none; }
  h1, h2, h3, h4 { color: #000; }
}