/* ==========================================================================
   Zondler Consulting — Web2
   Monochrome Bühne. Hierarchie entsteht aus Kontrast, Licht, Typografie und
   Bewegung, nicht aus Farbe. Keine externen Ressourcen, kein Tracking.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */

:root {
  /* Flächen */
  --bg:          #08090B;
  --bg-2:        #0B0C0F;
  --surface:     #111317;
  --surface-2:   #17191E;
  --surface-3:   #1E2127;

  /* Schrift. Reinweiß ist die knappste Ressource der Seite. */
  /* Die Werte in Klammern sind gegen --surface (#111317) gemessen, also
     gegen den hellsten Untergrund, auf dem die Farbe tatsächlich steht. */
  --text:        #FFFFFF;   /* 18.9:1 — nur Überschriften und aktive Zustände */
  --text-body:   #E6E8EB;   /* 15.7:1 */
  --text-dim:    #9BA3AE;   /*  7.3:1 */
  --text-faint:  #858B94;   /*  5.2:1 — Untergrenze, nur Meta */

  /* Akzent: Bernstein.
     Eine einzige Farbe, mit einer festen Aufgabe. Bernstein markiert System
     und Zustand: Nummerierung, Fortschritt, Aktivität, Verweise, die
     Hauptaktion. Weiß bleibt der inhaltlichen Hierarchie vorbehalten,
     also Überschriften. Wer eine dritte Bedeutung braucht, nimmt Grau. */
  --accent:      #D6A85C;   /* 9.1:1 auf --bg, 8.5:1 auf --surface */
  --accent-hi:   #E7C286;   /* nur beim Überfahren */
  --accent-dim:  #A8834A;   /* 5.7:1 auf --bg, ruhige Flächen */
  --accent-soft: rgba(214, 168, 92, 0.13);
  --accent-line: rgba(214, 168, 92, 0.34);
  --on-accent:   #1A1206;   /* 8.5:1 auf --accent */

  /* Linien */
  --line:        rgba(255, 255, 255, 0.07);
  --line-2:      rgba(255, 255, 255, 0.14);
  --line-3:      rgba(255, 255, 255, 0.24);

  /* Licht bleibt weiß, damit die Bühne neutral bleibt */
  --glow:        rgba(255, 255, 255, 0.10);
  --on-invert:   #08090B;

  /* Raster */
  --wrap:        1280px;
  --pad:         clamp(1.25rem, 4vw, 3rem);
  --sect-y:      clamp(5.5rem, 10vw, 9.5rem);
  --header-h:    68px;

  /* Radien: Flächen, Bedienelemente, Kleinteile, rund */
  --r-card:      16px;
  --r-ctl:       10px;
  --r-sm:         6px;   /* nur für Kleinstflächen wie das Häkchenfeld */
  --r-pill:      999px;

  /* Bewegung */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-tap:       140ms;
  --t-fast:      180ms;
  --t-mid:       260ms;
  --t-slow:      620ms;
  --t-scene:     900ms;

  /* Schriftfamilien: nur lokal vorhandene, nichts wird nachgeladen */
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, Menlo, monospace;
}

/* Registrierte Eigenschaften für die scroll-getriebenen Szenen.
   Ohne @property lassen sich Zahlen nicht animieren. */
@property --sp { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --rp { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

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

/* Für Überschriften, die die Gliederung tragen, aber nicht ins Bild sollen.
   Nicht display:none — das nähme sie auch Vorleseprogrammen weg. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Schaltflächen erben die Schrift nicht von selbst, sonst greift
   die Voreinstellung des Browsers. */
button, input, select, textarea { font: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--text);
  color: var(--on-invert);
  border-radius: var(--r-ctl);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.shell {
  width: min(100% - var(--pad) * 2, var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--sect-y);
  position: relative;
}
.section-quiet { background: var(--bg-2); }
.section-quiet + .section-quiet { padding-top: 0; }

/* --------------------------------------------------------------------------
   3. Textbausteine
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
/* Die Kennzeile im Hero benennt Firma und Ort, nicht die Nummerierung.
   Sie gehört deshalb nicht zum Akzentsystem. */
.hero-eyebrow { color: var(--text-faint); }

.lead {
  color: var(--text-dim);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  max-width: 56ch;
}

.head { max-width: 68ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.head h2 + .lead { margin-top: 1.4rem; }

.head-row {
  max-width: none;
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (min-width: 900px) {
  .head-row { grid-template-columns: 1.15fr 1fr; align-items: end; }
  .head-row .lead { padding-bottom: 0.4rem; }
}

/* --------------------------------------------------------------------------
   4. Körnung und Spotlight
   -------------------------------------------------------------------------- */

/* Verhindert Farbbanding auf den großen dunklen Flächen und gibt der
   monochromen Bühne Material. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.055),
    transparent 70%
  );
}
html.js .spotlight.on { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --mx-off: 0px;
  --my-off: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.55rem;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transform: translate3d(var(--mx-off), var(--my-off), 0);
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-line {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text);
}
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--accent-hi); }
  .btn-line:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
}
.btn:active { transform: translate3d(var(--mx-off), var(--my-off), 0) scale(0.97); transition-duration: var(--t-tap); }

/* --------------------------------------------------------------------------
   6. Kopfzeile
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition:
    background-color var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    backdrop-filter var(--t-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.dense {
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.head-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--text);
}
/* ZC-Monogramm. Es kommt als Maske herein, nicht als Bild: dadurch erbt es
   die Textfarbe, lässt sich wie Text einfärben und wird nur einmal geladen.
   Die Wortmarke daneben ist echter Text, keine Grafik. */
.brand-mark {
  height: 26px;
  aspect-ratio: 81.12 / 100;
  flex: none;
  color: var(--text);
  background-color: currentColor;
  -webkit-mask: url("logo-mark.svg") center / contain no-repeat;
  mask: url("logo-mark.svg") center / contain no-repeat;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
}
.brand-text em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 0.35em;
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { color: var(--accent); transform: translateY(-2px); }
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.site-nav a {
  position: relative;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-ctl);
  font-size: 0.9375rem;
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease-out);
}
.site-nav a[aria-current="true"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--text); }
}

/* Wandernde Unterlage hinter dem aktiven Punkt */
.nav-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  width: var(--tw, 0px);
  border-radius: var(--r-ctl);
  background: var(--accent-soft);
  transform: translate3d(var(--tx, 0px), -50%, 0) scaleX(var(--ts, 1));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--t-mid) var(--ease-out),
    width var(--t-mid) var(--ease-out),
    opacity var(--t-fast) var(--ease-out);
}
.site-nav.thumb-on .nav-thumb { opacity: 1; }

.nav-cta {
  margin-left: 0.5rem;
  border: 1px solid var(--accent-line);
  color: var(--accent) !important;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { border-color: var(--accent); background: var(--accent-soft); }
}

.head-tools { display: flex; align-items: center; gap: 0.6rem; }

.lang-switch {
  position: relative;
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
}
.lang-switch button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  /* Tippziel auf 28 px bringen, WCAG 2.2 verlangt mindestens 24 px */
  padding: 0.42rem 0.65rem;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease-out);
}
.lang-switch button[aria-pressed="true"] { color: var(--on-accent); }
.lang-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: translate3d(var(--lx, 0), 0, 0);
  transition: transform var(--t-mid) var(--ease-out);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  gap: 5px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Fortschrittsbalken */
.progress {
  display: block;
  height: 1px;
  background: transparent;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progress i {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vh, 5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-light {
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(120vw, 1400px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.075), transparent 62%);
  pointer-events: none;
}
html.js .hero-light { animation: light-drift 26s linear infinite alternate; }
@keyframes light-drift {
  from { transform: translate3d(-58%, -3%, 0); }
  to   { transform: translate3d(-42%, 4%, 0); }
}

.hero-inner { position: relative; z-index: 2; width: min(100% - var(--pad) * 2, var(--wrap)); }
.hero-eyebrow { margin-bottom: clamp(1.25rem, 2.5vh, 2rem); }

.hero-title { margin-bottom: clamp(1.5rem, 3.5vh, 2.75rem); }
.hero-title .mask {
  display: block;
  overflow: hidden;
  /* Bei line-height 0.94 ragen Unterlängen (g, p, y) unter die Zeilenbox
     hinaus und wurden vom Beschnittrahmen gekappt. Das Polster gibt ihnen
     Platz, die negative Außenkante nimmt die zusätzliche Höhe wieder aus
     dem Fluss — der Zeilenabstand bleibt damit unverändert. */
  padding-bottom: 0.24em;
  margin-bottom: -0.18em;
}
.hero-title .mask-in { display: block; }

.hero-band {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-band { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); }
}

.hero-sub { color: var(--text-dim); max-width: 52ch; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vh, 2rem); }

/* Die Grafik ist quadratisch. Ohne Deckel auf die Höhe schiebt sie den
   Hero bei flachen Fenstern über den Bildschirmrand hinaus. */
.hero-visual { color: var(--text); display: flex; justify-content: flex-end; }
.hero-visual svg { width: auto; height: auto; max-width: 100%; max-height: min(36vh, 26rem); }
/* Bei flachen Fenstern bleibt sonst zu wenig Platz für Text und Kennzeile. */
@media (max-height: 820px) {
  .hero-visual svg { max-height: 30vh; }
}
/* Sobald der Hero einspaltig wird, steht die Zeichnung unter dem Text und
   schiebt ihn über den Bildschirmrand. Dann tragen Überschrift, Licht und
   Kennzeile allein. */
@media (max-width: 939px) {
  .hero-visual { display: none; }
}
.hv-layer { transform: translate3d(0, 0, 0); transition: transform var(--t-slow) var(--ease-out); }
.hv-grid { opacity: 0.09; }
.hv-fill { fill: rgba(255, 255, 255, 0.055); }
.hv-rule { opacity: 0.55; }
.hv-dim  { opacity: 0.3; }
.hv-tick { opacity: 0.4; }
/* Das Fadenkreuz markiert den Zielpunkt der Konstruktion. Einzige Stelle
   im Hero, an der Farbe auftaucht. */
.hv-cross { opacity: 0.85; color: var(--accent); }
.hv-node { opacity: 1; }
html.js .hv-cross { animation: cross-pulse 3.6s var(--ease-in-out) infinite; transform-origin: 267px 326px; }
@keyframes cross-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: clamp(1.75rem, 4vh, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero-meta li { display: flex; align-items: center; gap: 0.6rem; }
.hero-meta li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Auftritt der Hero-Elemente beim Laden */
html.js .hero-title .mask-in,
html.js .mask-fade {
  animation-duration: var(--t-scene);
  animation-timing-function: var(--ease-out);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
}
html.js .hero-title .mask-in { animation-name: mask-rise; }
html.js .mask-fade { animation-name: fade-rise; animation-duration: var(--t-slow); }
@keyframes mask-rise {
  from { transform: translateY(104%); }
  to   { transform: translateY(0); }
}
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

html.js .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-in 1100ms var(--ease-out) var(--d, 0ms) both;
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }

html.js .hv-fill {
  animation: fill-in 700ms var(--ease-out) var(--d, 0ms) both;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes fill-in {
  from { opacity: 0; transform: scaleY(0.7); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Haltung
   -------------------------------------------------------------------------- */

.stance { padding-block: clamp(3rem, 7vw, 6rem); }
.stance-list li {
  position: relative;
  display: grid;
  gap: 0.35rem 3rem;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
@media (min-width: 800px) {
  .stance-list li { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: baseline; }
}
.stance-list h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.028em;
}
.stance-list p { color: var(--text-dim); max-width: 60ch; }

.stance-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 60ms + 80ms);
}
.stance-list li.in .stance-rule { transform: scaleX(1); }
.stance-list li:last-child { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   9. Leistungen als gestapelte Karten
   -------------------------------------------------------------------------- */

.stack { position: relative; }

.stack-card {
  position: sticky;
  top: calc(var(--header-h) + clamp(1.5rem, 5vh, 3rem) + var(--n) * 9px);
  display: grid;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) ,
    var(--surface);
  transform-origin: 50% 0%;
  overflow: hidden;
}
.stack-card + .stack-card { margin-top: clamp(2rem, 20vh, 11rem); }

@media (min-width: 860px) {
  .stack-card {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem);
    gap: 2.5rem;
    align-items: center;
  }
}

.card-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.2rem;
}
.card-body h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: -0.03em; margin-bottom: 0.85rem; }
.card-body p { color: var(--text-dim); max-width: 54ch; }

.card-art { color: var(--text); opacity: 0.5; }
.card-art svg { width: 100%; height: auto; }
@media (max-width: 859px) { .card-art { display: none; } }

/* Wandernder Randglanz bei Zeigergeräten */
@media (hover: hover) and (pointer: fine) {
  .stack-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--ang), transparent 0deg, var(--accent) 30deg, transparent 90deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease-out);
    pointer-events: none;
  }
  .stack-card:hover::after { opacity: 1; animation: ang-spin 4s linear infinite; }
}
@keyframes ang-spin { to { --ang: 360deg; } }

/* Die verdeckten Karten treten zurück. Fortschritt kommt aus einer einzigen
   scroll-getriebenen Zahl am Container, jede Karte rechnet ihren Anteil aus. */
@supports (animation-timeline: view()) {
  .stack {
    animation: stack-drive linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
  }
  @keyframes stack-drive { from { --sp: 0; } to { --sp: 1; } }

  .stack-card {
    --p: clamp(0, calc(var(--sp) * var(--count) - var(--n) - 0.2), 1);
    transform: scale(calc(1 - var(--p) * 0.045));
    opacity: calc(1 - var(--p) * 0.5);
  }
}

/* --------------------------------------------------------------------------
   10. Laufband
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.15rem;
  user-select: none;
}
.marquee-track { display: flex; width: max-content; }
html.js .marquee-track { animation: marquee 46s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   11. Muster
   Vier Belege in einem Raster. Bewusst ohne Flächen: das Muster soll wie
   ein Prüfprotokoll wirken, nicht wie eine weitere Angebotskachel.
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
}
@media (min-width: 1100px) {
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.75rem); }
}

.proof li {
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
/* Auf breiten Bildschirmen trennt die Spaltenlinie, nicht die Zeilenlinie. */
@media (min-width: 1100px) {
  .proof li { border-bottom: 0; padding-inline-end: clamp(1.5rem, 3vw, 2.75rem); }
  .proof li + li { border-left: 1px solid var(--line); padding-inline-start: clamp(1.5rem, 3vw, 2.75rem); }
}

.proof-no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 1rem;
}
.proof h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.028em;
  margin-bottom: 0.75rem;
}
.proof p:not(.proof-no) {
  color: var(--text-dim);
  font-size: 0.9688rem;
  line-height: 1.6;
  margin: 0;
}

.proof-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--text-faint);
  font-size: 0.9375rem;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   12. Ablauf
   -------------------------------------------------------------------------- */

.process { position: relative; padding-left: 3.25rem; }
@media (min-width: 900px) { .process { padding-left: 4.5rem; } }

.rail {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 7px;
  width: 1px;
  background: var(--line-2);
  overflow: hidden;
}
@media (min-width: 900px) { .rail { left: 11px; } }
.rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(var(--rp, 0));
  transform-origin: 50% 0;
}
@supports (animation-timeline: view()) {
  .process {
    animation: rail-drive linear both;
    animation-timeline: view();
    animation-range: entry 85% exit 15%;
  }
  @keyframes rail-drive { from { --rp: 0; } to { --rp: 1; } }
}

.process li { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.process li:last-child { padding-bottom: 0; }

.process .dot {
  position: absolute;
  left: -3.25rem;
  top: 0.45rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--bg-2);
  transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
@media (min-width: 900px) { .process .dot { left: -4.5rem; width: 23px; height: 23px; top: 0.25rem; } }
.process li.in .dot { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }

.step-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.process h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: -0.028em; margin-bottom: 0.7rem; }
.process p { color: var(--text-dim); max-width: 58ch; }

/* --------------------------------------------------------------------------
   13. Betrieb, seitwärts blätterbar
   -------------------------------------------------------------------------- */

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.rail-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rail-nav { display: flex; gap: 0.5rem; }
.rail-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), opacity var(--t-fast) linear;
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .rail-btn:not([disabled]):hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
}
.rail-btn:not([disabled]):active { transform: scale(0.95); transition-duration: var(--t-tap); }

/* Echtes horizontales Scrollen: Tastatur, Touch und Trackpad funktionieren
   ohne Zutun, der Scrollbalken bleibt bedienbar. */
.hrail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
  padding-block: 0.5rem 1.5rem;
  scroll-padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2));
}
.hrail::-webkit-scrollbar { height: 6px; }
.hrail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
.hrail::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

.hrail-track {
  display: flex;
  gap: 1.25rem;
  padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  width: max-content;
}

.panel {
  scroll-snap-align: start;
  /* Breit genug, dass am grossen Bildschirm tatsächlich etwas zu blättern
     bleibt und die Tafel nicht wie eine leere Karte wirkt. */
  flex: 0 0 min(86vw, 30rem);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transform-origin: 50% 50%;
}
.panel-no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.panel h3 { font-size: 1.3125rem; letter-spacing: -0.028em; margin-bottom: 1.25rem; }
.panel ul { display: grid; gap: 0.85rem; }
.panel li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-dim);
  font-size: 0.9688rem;
  line-height: 1.55;
}
.panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent-line);
}

@supports (animation-timeline: view()) {
  .panel {
    animation: panel-edge linear both;
    animation-timeline: view(x);
  }
  /* Das mittlere Band muss breit genug sein: eine Tafel, die vollständig im
     Bild steht, liegt je nach Position zwischen etwa 21 und 79 Prozent des
     cover-Bereichs. Nur was wirklich am Rand hängt, darf abblenden. */
  @keyframes panel-edge {
    0%        { opacity: 0.25; transform: scale(0.93); }
    18%, 88%  { opacity: 1;    transform: scale(1); }
    100%      { opacity: 0.25; transform: scale(0.93); }
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.cta-row p { color: var(--text-dim); max-width: 48ch; }

/* --------------------------------------------------------------------------
   14. Preise
   Zwei Blöcke, drei Stufen je Block. Der Betrag steht auf gleicher Höhe wie
   der Name der Stufe, damit sich die Spalte von oben nach unten überfliegen
   lässt. Bernstein bleibt dem Betrag vorbehalten: er ist hier der Zustand,
   auf den es ankommt.
   -------------------------------------------------------------------------- */

.prices { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
}

.price-block {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}

.price-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.price-head h3 { font-size: 1.3125rem; letter-spacing: -0.028em; }
.price-kind {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.tiers { display: grid; margin: 0; padding: 0; list-style: none; }

.tier {
  padding-block: clamp(1.25rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.tier:last-child { border-bottom: 0; padding-bottom: 0; }

.tier-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.tier-line h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.tier-price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tier p:not(.tier-price) {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 46ch;
}

.price-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--text-faint);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   15. Profil
   -------------------------------------------------------------------------- */

/* Text links, Zeichnung rechts. Der Kopf des Abschnitts steht darüber über die
   volle Breite, damit hier nicht wieder das übliche Bild-neben-Text-Raster
   entsteht. */
.profile { display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: start; }
@media (min-width: 900px) {
  .profile { grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr); }
}

/* Zwei beschriftete Zeilen: Zuständigkeit auf einen Blick, statt eines
   weiteren gleich aussehenden Absatzes. */
.duo { margin: clamp(2rem, 4vw, 2.75rem) 0 0; border-top: 1px solid var(--line); }
.duo > div {
  display: grid;
  gap: 0.4rem;
  padding-block: clamp(1.15rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .duo > div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.duo dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.duo dd { margin: 0; color: var(--text-dim); }

.profile-close {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  max-width: 68ch;
}

/* Zeichnung statt Porträt. Die Linien zeichnen sich erst, wenn der Abschnitt
   im Bild ist, deshalb hängt die Animation an .profile-media.in und nicht
   wie bei den Karten am Seitenaufbau. */
.plate {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.plate svg { width: 100%; height: auto; display: block; color: var(--text-dim); }

.plate .p-stop { stroke: var(--accent); fill: var(--accent); }

/* Schriftgröße in Nutzereinheiten: Sie skaliert mit der Zeichnung. 12 ergibt
   auf dem Telefon rund 11 Pixel und bleibt damit lesbar. */
.plate text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  fill: var(--text-dim);
}
.plate .p-field { fill: var(--text); font-size: 13px; }
.plate .p-num { fill: var(--accent); }

html.js .plate .p-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .profile-media.in .plate .p-draw {
  animation: draw-in 1000ms var(--ease-out) var(--d, 0ms) both;
}

.photo-cap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}
.photo-cap strong { color: var(--text); font-weight: 600; }
.photo-cap span { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; }

.profile-copy .lead + p,
.profile-copy p + p { margin-top: 1.25rem; color: var(--text-dim); max-width: 58ch; }

.sep { color: var(--text-faint); margin-inline: 0.5rem; }

/* --------------------------------------------------------------------------
   16. Fragen
   -------------------------------------------------------------------------- */

.faq-wrap { max-width: 62rem; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color var(--t-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover .sign { border-color: var(--accent-line); }
  .faq-item summary:hover .sign::before,
  .faq-item summary:hover .sign::after { background: var(--accent); }
}
.faq-item[open] .sign { border-color: var(--accent-line); }
.faq-item[open] .sign::before { background: var(--accent); }

.sign {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.sign::before, .sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .sign { transform: rotate(135deg); }
.faq-item[open] .sign::after { opacity: 0; }

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out);
}
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
/* Beim Schließen bleibt details kurz offen, damit die Zeile zurückfahren kann. */
.faq-item[open].closing .faq-body { grid-template-rows: 0fr; }
.faq-item[open].closing .sign { transform: none; }
.faq-item[open].closing .sign::after { opacity: 1; }
.faq-body > div { overflow: hidden; }
.faq-body p {
  padding-bottom: 1.5rem;
  padding-right: clamp(0px, 4vw, 3.5rem);
  color: var(--text-dim);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   17. Kontakt
   -------------------------------------------------------------------------- */

.contact { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
@media (min-width: 940px) {
  .contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
}

.contact-list { display: grid; gap: 1.4rem; margin-top: 2.5rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text-dim);
}
.contact-list .ico svg { width: 19px; height: 19px; }
.contact-list .body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-list .label {
  font-family: var(--font-mono);
  /* 0.75rem ist die eine Größe für alle Kleinbeschriftungen. Vorher standen
     Formular- und Fußzeilenlabels auf 0.6875rem und damit als einzige aus
     der Reihe, was besonders im Formular schlecht lesbar war. */
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-list a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
  width: fit-content;
  word-break: break-word;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover { color: var(--accent); border-color: var(--accent); }
}

/* Formular */
.contact-form {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    var(--surface);
}
.contact-form h3 { font-size: 1.25rem; letter-spacing: -0.025em; margin-bottom: 1.75rem; }

.row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { margin-bottom: 1rem; }
.row .field { margin-bottom: 0; }
.row + .row, .row + .field { margin-top: 1rem; }

/* :not(.check) — sonst greift die Label-Größe auch auf die Einwilligungszeile */
.field > label:not(.check) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  /* 0.75rem ist die eine Größe für alle Kleinbeschriftungen. Vorher standen
     Formular- und Fußzeilenlabels auf 0.6875rem und damit als einzige aus
     der Reihe, was besonders im Formular schlecht lesbar war. */
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field > label:not(.check) i { font-style: normal; color: var(--text-dim); }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--text-body);
  font-family: inherit;
  font-size: 0.9688rem;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA3AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 17px;
}
.field select option { background: var(--surface-2); color: var(--text-body); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--line-3); background: var(--surface-3); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.field ::placeholder { color: var(--text-faint); }

.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #E88; }

.err {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: #F3AFAF;
  animation: fade-rise 220ms var(--ease-out) both;
}

.field-check { margin-top: 1.25rem; }
.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.check .box svg {
  width: 13px;
  height: 13px;
  color: var(--on-accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { outline: 2px solid var(--text); outline-offset: 2px; }
.check-text a { color: var(--text); border-bottom: 1px solid var(--accent-line); }
@media (hover: hover) and (pointer: fine) { .check-text a:hover { color: var(--accent); border-color: var(--accent); } }

#cfSubmit { margin-top: 1.5rem; position: relative; }
.btn-spin {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(26, 18, 6, 0.28);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  opacity: 0;
}
#cfSubmit.busy .btn-label { opacity: 0; }
#cfSubmit.busy .btn-spin { opacity: 1; animation: spin 700ms linear infinite; }
#cfSubmit[disabled] { cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-align: center;
}
.form-note.form-error { color: #F3AFAF; }

/* Falle für automatische Ausfüller: aus dem Bild, aber nicht display:none */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-done { text-align: center; padding-block: 2.5rem; animation: fade-rise 420ms var(--ease-out) both; }
.done-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.done-mark svg { width: 24px; height: 24px; }
.form-done h3 { margin-bottom: 0.6rem; }
.form-done p { color: var(--text-dim); max-width: 40ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   18. Fußzeile
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--bg-2);
}
.foot-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr); }
}
.foot-brand p { margin-top: 1.1rem; color: var(--text-faint); font-size: 0.9375rem; max-width: 38ch; }
.foot-brand .brand { margin-right: 0; gap: 0.85rem; }
.foot-brand .brand-mark { height: 38px; }
.foot-brand .brand-text { font-size: 1.1875rem; }

.foot-nav, .foot-contact { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.foot-label {
  font-family: var(--font-mono);
  /* 0.75rem ist die eine Größe für alle Kleinbeschriftungen. Vorher standen
     Formular- und Fußzeilenlabels auf 0.6875rem und damit als einzige aus
     der Reihe, was besonders im Formular schlecht lesbar war. */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.foot-nav a, .foot-contact a, .foot-contact span {
  font-size: 0.9375rem;
  color: var(--text-dim);
  /* Tippziel nach WCAG 2.2 (2.5.8) auf mindestens 24 px bringen */
  padding-block: 0.2rem;
  transition: color var(--t-fast) var(--ease-out);
}
.foot-legal nav a { display: inline-block; padding-block: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover, .foot-contact a:hover { color: var(--accent); }
}
.foot-social { display: flex; align-items: center; }

/* Offenlegung der Erstellung. Ruhig, aber nicht versteckt: eigene Zeile
   über der Fußnotenzeile, mit Verweis auf den ausführlichen Abschnitt. */
.foot-ai {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-faint);
}
.foot-ai .ai-mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 0.18rem;
  color: var(--accent);
}
.foot-ai a {
  color: var(--text-dim);
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot-ai a:hover { color: var(--accent); border-color: var(--accent); }
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-faint);
}
.foot-ai + .foot-legal { padding-top: 1.1rem; border-top: 0; }
.site-footer-slim .foot-ai { padding-top: 0; border-top: 0; margin-bottom: 1.1rem; }
.foot-legal nav { display: flex; gap: 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .foot-legal a:hover { color: var(--accent); }
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(17, 19, 23, 0.85);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .to-top:hover { border-color: var(--accent-line); color: var(--accent); } }
.to-top:active { transform: scale(0.94); transition-duration: var(--t-tap); }

/* --------------------------------------------------------------------------
   19. Scroll-Reveals
   -------------------------------------------------------------------------- */

html.js .rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--t-slow) var(--ease-out) calc(var(--i, 0) * 60ms),
    transform var(--t-slow) var(--ease-out) calc(var(--i, 0) * 60ms);
}
html.js .rv.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Rechtsseiten
   -------------------------------------------------------------------------- */

.legal, .thanks {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.legal .shell { max-width: 48rem; }

.thanks { text-align: center; }
.thanks .shell { max-width: 34rem; }
.thanks .done-mark { margin-bottom: 2rem; }
.thanks h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 1rem; }
.thanks p { color: var(--text-dim); }
.thanks-actions { margin-top: 2.5rem; }

.notfound .eyebrow { margin-bottom: 1rem; }
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.notfound-links a {
  color: var(--text-dim);
  padding-block: 0.2rem;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .notfound-links a:hover { color: var(--accent); }
}
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--text-dim); margin-bottom: 1rem; }
.legal ul { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.legal ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-dim);
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--line-3);
}
.legal a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-line);
  word-break: break-word;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .legal a:hover { color: var(--accent); border-color: var(--accent); } }
.legal ul li::before { background: var(--accent-line); }

.lang-notice {
  padding: 0.85rem 1.1rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text-dim) !important;
}

.site-footer-slim { padding-block: 2rem; }
.site-footer-slim .foot-legal { padding-top: 0; border-top: 0; }

/* Auf den Rechtsseiten steht nur ein Link in der Navigation. Der braucht
   kein Klappmenü und bleibt deshalb auf jeder Breite sichtbar. */
.site-nav-plain {
  position: static !important;
  flex-direction: row !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.site-nav-plain a {
  opacity: 1 !important;
  transform: none !important;
  border-bottom: 1px solid var(--line-2) !important;
  font-size: 0.9375rem !important;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   21. Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-nav a { padding: 0.55rem 0.65rem; font-size: 0.9062rem; }
}

@media (max-width: 940px) {
  :root { --header-h: 62px; }

  .nav-toggle { display: grid; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem var(--pad) 1.75rem;
    background: rgba(8, 9, 11, 0.96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--t-mid) var(--ease-drawer),
      opacity var(--t-fast) var(--ease-out),
      visibility 0s linear var(--t-mid);
  }
  .site-nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .site-nav a {
    padding: 0.8rem 0.5rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out);
  }
  .site-nav.open a {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--k, 0) * 35ms);
  }
  .nav-thumb { display: none; }
  .nav-cta {
    margin-left: 0;
    margin-top: 0.75rem;
    border-bottom: 1px solid var(--line-2) !important;
    text-align: center;
  }
}

@media (max-width: 640px) {
  /* Der Hero muss auch auf dem Telefon in den ersten Bildschirm passen. */
  .hero-eyebrow { margin-bottom: 1rem; }
  .hero-meta { gap: 0.35rem 1.25rem; line-height: 1.4; margin-top: 1.5rem; padding-top: 1rem; }

  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .foot-legal { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   22. Druck
   Rechtstexte werden regelmäßig ausgedruckt oder als PDF abgelegt. Auf
   Papier wird aus der dunklen Bühne schwarze Fläche, deshalb hier alles
   umdrehen und die Zierde weglassen.
   -------------------------------------------------------------------------- */

@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .grain, .spotlight, .hero-light, .to-top, .progress,
  .site-nav, .nav-toggle, .lang-switch, .head-tools,
  .marquee, .hero-visual, .rail-head, .skip-link { display: none !important; }

  .site-header {
    position: static !important;
    background: none !important;
    border-bottom: 1px solid #ccc !important;
    backdrop-filter: none !important;
  }
  .brand-mark { background-color: #000 !important; }
  .brand-text, .brand-text em { color: #000 !important; }

  h1, h2, h3, p, li, span, strong, a { color: #000 !important; }
  .lead, .legal p, .legal li { color: #222 !important; }

  main, .section, .legal, .thanks { padding-block: 0 !important; }
  .stack-card, .panel, .contact-form, .photo {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  .rv, .mask-in, .mask-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
  .faq-body { grid-template-rows: 1fr !important; }
  .hrail { overflow: visible !important; }
  .hrail-track { flex-wrap: wrap; width: auto !important; padding: 0 !important; }
  .panel { flex: 0 0 48%; }

  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Verweisziele mitdrucken, sonst ist das Papier ohne Nutzen */
  .legal a[href^="http"]::after,
  .legal a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

  .site-footer { border-top: 1px solid #ccc !important; background: none !important; }
}

/* --------------------------------------------------------------------------
   23. Reduzierte Bewegung
   Nicht alles aus, sondern weniger: Wege und Parallax entfallen, Übergänge
   der Deckkraft bleiben, damit Zustandswechsel verständlich bleiben.
   -------------------------------------------------------------------------- */

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

  html.js .rv,
  html.js .hero-title .mask-in,
  html.js .mask-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 200ms linear !important;
  }

  html.js .draw { stroke-dashoffset: 0; animation: none; }
  html.js .hv-fill { opacity: 1; transform: none; animation: none; }
  html.js .hv-cross,
  html.js .hero-light,
  html.js .marquee-track { animation: none; }
  .marquee-track { transform: none; }

  html.js .plate .p-draw { stroke-dashoffset: 0; animation: none; }

  .stance-rule { transform: scaleX(1); transition: none; }

  .stack-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
  }
  .stack-card + .stack-card { margin-top: 1.25rem; }
  .stack { animation: none; }

  .rail i { transform: scaleY(1); }
  .process { animation: none; }

  .panel { animation: none; opacity: 1; transform: none; }
  .hrail { scroll-behavior: auto; }

  .progress i { animation: none; transform: scaleX(0); }

  .to-top { transition: opacity 200ms linear; }
  .btn, .btn:active { transform: none !important; }
  .spotlight { display: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    scroll-behavior: auto !important;
  }
}