/* ==========================================================================
   components.css — wiederverwendbare Bausteine
   Struktur und Ruhezustand. Alles Bewegte liegt in animations.css.
   ========================================================================== */

/* --- Korn --------------------------------------------------------------- */
/* Feine Körnung über der ganzen Seite. Nimmt Verläufen das Digitale. */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Schaltflächen ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* 48px Mindesthöhe — Touch-Ziel */
  min-height: 48px;
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-mid),
              color var(--dur-micro) var(--ease-mid),
              border-color var(--dur-micro) var(--ease-mid),
              transform var(--dur-micro) var(--ease-mid);
}

.btn__arrow {
  transition: transform var(--dur-state) var(--ease-out);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translate(3px, -3px);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--lime);
  color: var(--ink-900);
  border-color: var(--lime);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--fg);
  border-color: var(--fg);
}

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--ink-900);
}

.btn--bare {
  padding: 0;
  min-height: 44px;
  border: 0;
  gap: var(--space-3);
  color: var(--fg-dim);
}

.btn--bare:hover,
.btn--bare:focus-visible { color: var(--lime); }

.btn--sm { min-height: 40px; font-size: var(--step--2); }

/* Menüknopf: nur unterhalb des Navigations-Breakpoints sichtbar */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
}

.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--fg);
  transition: transform var(--dur-state) var(--ease-out),
              opacity var(--dur-micro) linear;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--bar-h) + clamp(2.5rem, 8vh, 6rem));
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

/* Licht im Raum: zwei weiche Quellen, keine Konturen. */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 74% 32%, var(--glow-violet), transparent 62%),
    radial-gradient(46% 42% at 92% 78%, var(--glow-cyan), transparent 60%),
    radial-gradient(38% 34% at 58% 88%, rgba(200, 255, 47, 0.10), transparent 65%);
}

.hero__canvas {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 66%;
  height: 100%;
  pointer-events: auto;
  /* Der Graph läuft ins Schwarz aus, statt in einer Box zu sitzen. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 26%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 26%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
  mask-composite: intersect;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__title {
  max-width: 14ch;
  margin-top: clamp(1rem, 4vh, 3rem);
}

.hero__line { display: block; overflow: hidden; }

.hero__bottom {
  display: grid;
  /* Feste Obergrenze für die Messwertspalte — mit `auto` zieht ihr
     max-content-Anspruch die Textspalte auf wenige Zeichen zusammen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--space-6) var(--space-8);
  align-items: end;
}

.hero__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Messwerte statt erfundener Erfolgszahlen: benannte Zielgrößen. */
.readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  min-width: min(340px, 100%);
}

.readout__item { display: flex; flex-direction: column; gap: 0.35rem; }

.readout__value {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.readout__unit { color: var(--fg-faint); font-size: 0.6em; }

.readout__label {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readout__note {
  grid-column: 1 / -1;
  margin-top: calc(var(--space-2) * -1);
  line-height: 1.45;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.scroll-cue__rail {
  position: relative;
  width: 52px;
  height: 1px;
  background: var(--rule-strong);
  overflow: hidden;
}

.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform-origin: left;
  animation: cue-sweep 2.4s var(--ease-mid) infinite;
}

/* --- Laufband ------------------------------------------------------------ */

.strip {
  overflow: hidden;
  padding-block: var(--space-4);
  border-block: 1px solid var(--rule);
  background: var(--ink-800);
}

.strip__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: marquee 34s linear infinite;
}

.strip__item {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.strip__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--glow-lime);
  flex: none;
}

/* --- Editorial-Liste (Diagnose, Leistungen) ------------------------------ */
/* Zeilen statt Karten. Das ist der Unterschied zwischen Redaktion und Baukasten. */

.index-list { border-top: 1px solid var(--rule); }

.index-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.3fr) 2.5rem;
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--dur-state) var(--ease-mid);
}

.index-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-heavy) var(--ease-out);
}

.index-row:hover::before,
.index-row:focus-within::before { transform: scaleX(1); }

.index-row__num {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  padding-top: 0.4rem;
}

.index-row__title {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: var(--leading-head);
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.index-row__body { color: var(--fg-dim); max-width: 56ch; }

.index-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.index-row__tags li {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-row__mark {
  justify-self: end;
  align-self: center;
  color: var(--fg-faint);
  font-size: var(--step-1);
  transition: color var(--dur-micro) var(--ease-mid),
              transform var(--dur-state) var(--ease-out);
}

.index-row:hover .index-row__mark {
  color: var(--lime);
  transform: translate(3px, -3px);
}

.section--paper .index-row:hover .index-row__mark { color: var(--violet-ink); }
.section--paper .index-row::before { background: var(--violet-ink); }

/* --- Diagnose (Positionierung) ------------------------------------------- */

.diagnosis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: var(--space-8);
  align-items: start;
}

.symptom-list { display: flex; flex-direction: column; }

.symptom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.symptom:first-child { border-top: 1px solid var(--rule); }

.symptom__mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px var(--glow-violet);
  transform: translateY(-3px);
}

.section--paper .symptom__mark { background: var(--violet-ink); box-shadow: none; }

.symptom__text { color: var(--fg-dim); }
.symptom__text b { color: var(--fg); font-weight: 500; }

.statement {
  padding: var(--space-7);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

.statement::after {
  /* Lichtquelle in der Ecke, keine leuchtende Kontur */
  content: "";
  position: absolute;
  right: -30%;
  bottom: -60%;
  width: 90%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow-lime), transparent 68%);
  pointer-events: none;
}

.statement__quote {
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-head);
  max-width: 24ch;
}

.statement__by {
  margin-top: var(--space-5);
  color: var(--fg-faint);
  font-size: var(--step--1);
}

/* --- Design-Richtungen ---------------------------------------------------- */

.direction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--rule);
}

.direction:last-child { border-bottom: 0; }

.direction--flip .direction__info { order: -1; }

.direction__info { display: flex; flex-direction: column; gap: var(--space-4); }

.direction__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--fg-faint);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.direction__title {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.direction__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.direction__spec dt {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.direction__spec dd { font-size: var(--step--1); }

/* Vorschauflächen: reine CSS-Kompositionen, keine erfundenen Kundenbilder. */
.preview {
  position: relative;
  /* Container-Kontext: Die Vorschau ist eine Miniaturseite und muss sich an
     ihrer EIGENEN Breite orientieren, nicht am Viewport. Sonst wirkt sie in
     der zweispaltigen Ansicht leer und auf Mobil überfüllt. */
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  /* Achtung: Hier KEINE cqi-Einheiten. Ein Element kann seinen eigenen
     Container nicht abfragen — cqi fiele auf den Viewport zurück und das
     Padding würde auf ein Vielfaches springen. Prozente beziehen sich hier
     auf denselben Block und ergeben denselben Wert. Erst die Nachfahren
     unten dürfen cqi verwenden. */
  padding: 7% 6%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}

.preview__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 25% 25%;
  opacity: 0.5;
}

.preview__head,
.preview__foot {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(0.5rem, 2.1cqi, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.preview__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4cqi;
}

.preview__type {
  position: relative;
  font-size: 11.5cqi;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.preview__rule {
  position: relative;
  height: 1px;
  background: var(--rule);
}

/* Richtung A — editorial, hell, streng gerastert */
.preview--editorial {
  background: var(--paper-2);
  color: var(--fg-ink);
  --rule: var(--rule-ink);
  --fg-faint: var(--fg-ink-faint);
}

.preview--editorial .preview__type span { color: var(--fg-ink-faint); }

/* Richtung B — dunkel, datengetrieben, Licht statt Farbfläche */
.preview--signal {
  background: var(--ink-800);
  color: var(--fg);
}

.preview--signal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 82%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, var(--glow-violet), transparent 58%),
    radial-gradient(circle at 62% 58%, var(--glow-cyan), transparent 52%);
  pointer-events: none;
}

.preview__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.4cqi;
  height: 22cqi;
}

.preview__bars i {
  flex: 1;
  background: linear-gradient(to top, transparent, var(--rule-strong));
  height: var(--h, 40%);
}

.preview__bars i:nth-child(7) {
  background: linear-gradient(to top, transparent, var(--lime));
  box-shadow: 0 0 26px var(--glow-lime);
}

/* --- Prozess ------------------------------------------------------------- */

.steps { border-top: 1px solid var(--rule); margin-top: var(--space-8); }

.step {
  position: relative;
  display: grid;
  /* Fünfte Spalte für den Klick-Hinweis — die vier Schritte führen auf die
     zugehörige Leistungsseite. */
  grid-template-columns: 4.5rem minmax(0, 0.8fr) minmax(0, 1.2fr) auto 2rem;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-state) var(--ease-mid);
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--violet-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-heavy) var(--ease-out);
}

.step:hover::before,
.step:focus-within::before { transform: scaleX(1); }

.step:hover { background: rgba(20, 20, 26, 0.04); }

.step__mark {
  justify-self: end;
  color: var(--fg-faint);
  transition: color var(--dur-micro) var(--ease-mid),
              transform var(--dur-state) var(--ease-out);
}

.step:hover .step__mark {
  color: var(--violet-ink);
  transform: translate(3px, -3px);
}

.step:hover .step__title { color: var(--violet-ink); }

.step__title { transition: color var(--dur-micro) var(--ease-mid); }

.step__num {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.step__body { color: var(--fg-dim); max-width: 54ch; }

.step__span {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Qualitätsversprechen ------------------------------------------------- */

.pledges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  margin-top: var(--space-8);
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Ein durchgehendes Raster mit 1px-Fugen — kein Bento aus schwebenden Kacheln. */
.pledge {
  background: var(--ink-900);
  padding: var(--space-6) var(--space-5);
  display: grid;
  /* Am oberen Rand ausrichten und den Rhythmus selbst setzen. Ein
     `margin-top: auto` auf dem Fließtext reißt sonst ein totes Loch
     in die Mitte jeder Kachel. */
  align-content: start;
  gap: 0;
}

.pledge__value {
  margin-bottom: var(--space-5);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.pledge__title {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pledge__body {
  margin-top: var(--space-3);
  color: var(--fg-dim);
  font-size: var(--step--1);
}

/* --- Kontakt -------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
}

.contact__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 60% at 50% 108%, var(--glow-violet), transparent 66%),
    radial-gradient(30% 40% at 82% 12%, rgba(200, 255, 47, 0.12), transparent 62%);
}

.contact__inner { position: relative; z-index: 1; }

.contact__title { max-width: 16ch; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--rule);
  align-items: start;
}

.contact__channels { display: flex; flex-direction: column; gap: var(--space-5); }

.channel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.channel__label {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.channel__value {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  width: max-content;
  max-width: 100%;
  transition: color var(--dur-micro) var(--ease-mid);
}

a.channel__value:hover,
a.channel__value:focus-visible { color: var(--lime); }

.checklist { display: flex; flex-direction: column; gap: var(--space-3); }

.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--fg-dim);
  font-size: var(--step--1);
}

.checklist li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--glow-lime);
}

/* --- Rechtliche Unterseiten ---------------------------------------------- */
/* Reine Textseiten. Sie erben das gesamte System und brauchen deshalb nur
   Zeilenlänge, Rhythmus und einen deutlichen Hinweis auf Platzhalter. */

.doc { padding-top: calc(var(--bar-h) + var(--space-8)); }

.doc__body { max-width: 68ch; margin-top: var(--space-7); }

.doc__body h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.doc__body h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--step-0);
  font-weight: 700;
}

.doc__body p { color: var(--fg-dim); }
.doc__body p + p { margin-top: var(--space-3); }

.doc__body ul {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doc__body li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--fg-dim);
}

.doc__body li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 0.65em;
  border-radius: 50%;
  background: var(--fg-faint);
}

.doc__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc__body a:hover { color: var(--lime); }

/* Ehrlicher Hinweis statt erfundener Rechtsangaben */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--lime);
}

.notice__mark {
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--glow-lime);
}

.notice p { color: var(--fg); }
.notice p + p { margin-top: var(--space-2); color: var(--fg-dim); }

/* --- Ganzflächige Klickziele --------------------------------------------- */
/* „Stretched link“: Sichtbar bleibt der Titel als Link, klickbar ist die
   ganze Zeile bzw. Kachel. Screenreader lesen dadurch nur den Titel vor —
   ein Anker um den kompletten Block würde jedes Detail mit vorlesen. */

.link-cover { position: relative; }

.link-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Der Fokusring gehört sichtbar um die ganze Fläche, nicht nur um den Text. */
.link-cover:focus-visible { outline: none; }

.link-cover:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--r-xs);
}

/* Inhalte, die über der Klickfläche bedienbar bleiben müssen */
.above-cover { position: relative; z-index: 3; }

/* Zeilen und Richtungen reagieren als Ganzes */
.index-row,
.direction { position: relative; }

.index-row:hover { background: rgba(242, 241, 237, 0.03); }
.section--paper .index-row:hover { background: rgba(20, 20, 26, 0.04); }

.direction__title-link { transition: color var(--dur-micro) var(--ease-mid); }
.direction:hover .direction__title-link { color: var(--lime); }
.section--paper .direction:hover .direction__title-link { color: var(--violet-ink); }

.direction .preview {
  transition: transform var(--dur-heavy) var(--ease-out),
              border-color var(--dur-state) var(--ease-mid);
}

.direction:hover .preview {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
}

/* --- Weiterführung am Seitenende ------------------------------------------ */

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-8);
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.pager__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--ink-900);
  transition: background var(--dur-state) var(--ease-mid);
}

.pager__item:hover { background: var(--ink-700); }

.pager__item--next { text-align: right; align-items: flex-end; }

.pager__dir {
  color: var(--fg-faint);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.pager__title {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

/* --- Detailseiten: Kopf und Faktenspalte ---------------------------------- */

.page-hero {
  padding-top: calc(var(--bar-h) + var(--space-8));
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
  color: var(--fg-faint);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.breadcrumb a { transition: color var(--dur-micro) var(--ease-mid); }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--fg); }

.page-hero__lede { margin-top: var(--space-6); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.facts {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-5));
  border-top: 1px solid var(--rule-strong);
}

.facts__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.facts__key {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts__value { font-size: var(--step--1); text-align: right; }

/* Nummerierte Ablaufliste auf Detailseiten */
.stages { border-top: 1px solid var(--rule); margin-top: var(--space-6); }

.stage {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.stage__num {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.stage__title {
  margin-bottom: var(--space-2);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--track-head);
}

.stage__body { color: var(--fg-dim); max-width: var(--measure); }

/* Ergebnisliste */
.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  margin-top: var(--space-6);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.deliverable {
  background: var(--ink-900);
  padding: var(--space-5);
}

.section--paper .deliverable { background: var(--paper); }

.deliverable__title {
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deliverable__body { color: var(--fg-dim); font-size: var(--step--1); }

/* Breite Vorschau auf den Detailseiten */
.preview--wide { aspect-ratio: 16 / 9; }

/* Auf heller Fläche trägt der Lime-Punkt nicht — dort übernimmt Violett. */
.section--paper .checklist li::before {
  background: var(--violet-ink);
  box-shadow: none;
}

.section--paper .pager__item { background: var(--paper); }
.section--paper .pager__item:hover { background: var(--paper-3); }

/* Nur eine Weiterführung vorhanden — dann keine leere zweite Spalte */
.pager--single { grid-template-columns: minmax(0, 1fr); }

/* --- Kontaktwege ---------------------------------------------------------- */
/* Vier gleichwertige Einstiege als durchgehendes Raster mit 1px-Fugen —
   keine schwebenden Kacheln. */

.contact__lede { margin-top: var(--space-6); }

.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-8);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.channel-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--ink-900);
  transition: background var(--dur-state) var(--ease-mid);
}

.channel-card:hover { background: var(--ink-700); }

/* Der erste Weg ist der empfohlene — eine Lichtkante, kein Neonrahmen. */
.channel-card--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lime);
  box-shadow: 0 0 22px var(--glow-lime);
}

.channel-card__num {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
}

.channel-card__title {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

/* Der Auslöser ist ein <button>, muss aber wie der Titel aussehen. */
.channel-card__action {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  color: inherit;
  transition: color var(--dur-micro) var(--ease-mid);
}

.channel-card:hover .channel-card__action { color: var(--lime); }

.channel-card__body {
  color: var(--fg-dim);
  font-size: var(--step--1);
}

.channel-card__mail { color: var(--fg); }

.channel-card__note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.channel-card__mark {
  position: absolute;
  top: var(--space-6);
  right: var(--space-5);
  color: var(--fg-faint);
  transition: color var(--dur-micro) var(--ease-mid),
              transform var(--dur-state) var(--ease-out);
}

.channel-card:hover .channel-card__mark {
  color: var(--lime);
  transform: translate(3px, -3px);
}

/* Kanal ohne hinterlegte Nummer: sichtbar, aber ehrlich als inaktiv markiert */
.channel-card__action[aria-disabled="true"] {
  color: var(--fg-faint);
  cursor: not-allowed;
}

.channel-card:has([aria-disabled="true"]) { opacity: 0.55; }
.channel-card:has([aria-disabled="true"]):hover { background: var(--ink-900); }
.channel-card:has([aria-disabled="true"]) .channel-card__mark { display: none; }

.contact__note { margin-top: var(--space-8); }

/* --- Projekt-Konfigurator -------------------------------------------------- */

.wizard {
  width: min(100% - 2rem, 720px);
  max-height: min(88svh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  color: var(--fg);
  overflow: hidden;
}

.wizard::backdrop {
  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(6px);
}

.wizard__inner {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.wizard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.wizard__head .eyebrow { margin-bottom: var(--space-2); }

.wizard__count {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
}

.wizard__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-dim);
  transition: background var(--dur-micro) var(--ease-mid),
              color var(--dur-micro) var(--ease-mid);
}

.wizard__close:hover { background: var(--fg); color: var(--ink-900); }

.wizard__progress {
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.wizard__progress i {
  display: block;
  height: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 14px var(--glow-lime);
  transition: transform var(--dur-state) var(--ease-out);
}

.wizard__body {
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wizard__question {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-head);
}

.wizard__hint {
  margin-top: var(--space-3);
  color: var(--fg-dim);
  font-size: var(--step--1);
  max-width: 56ch;
}

.wizard__eyebrow {
  color: var(--fg-faint);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.wizard__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--rule);
}

.wizard__foot .btn:only-child { margin-left: auto; }

/* Antwortmöglichkeiten */

.wizard__options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.choice,
.consent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-mid),
              background var(--dur-micro) var(--ease-mid);
}

.choice:hover,
.consent:hover { border-color: var(--rule-strong); background: rgba(242, 241, 237, 0.03); }

/* Die native Eingabe bleibt bedienbar und fokussierbar, nur unsichtbar. */
.choice input,
.consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.choice__box {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  flex: none;
  transition: background var(--dur-micro) var(--ease-mid),
              border-color var(--dur-micro) var(--ease-mid);
}

.choice input[type="radio"] + .choice__box { border-radius: 50%; }

.choice input:checked + .choice__box,
.consent input:checked + .choice__box {
  background: var(--lime);
  border-color: var(--lime);
}

.choice input:checked + .choice__box::after,
.consent input:checked + .choice__box::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: var(--ink-900);
}

.choice:has(input:checked) { border-color: var(--lime); }

/* Fokusring gehört sichtbar an die ganze Zeile, nicht an das versteckte Feld */
.choice:has(input:focus-visible),
.consent:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.choice__label { font-size: var(--step-0); }

/* Freischaltung */

.gate { display: grid; gap: var(--space-4); margin-top: var(--space-5); }

.field { display: grid; gap: var(--space-2); }

.field__label {
  color: var(--fg-faint);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; }

.field__input {
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: var(--fg);
  /* 16px verhindert den Auto-Zoom auf iOS beim Fokus */
  font-size: 1rem;
  transition: border-color var(--dur-micro) var(--ease-mid);
}

.field__input::placeholder { color: var(--fg-faint); }
.field__input:focus { border-color: var(--lime); outline: none; }

.consent { align-items: start; font-size: var(--step--1); color: var(--fg-dim); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: var(--lime); }

/* Spamfalle — für Menschen unerreichbar, für Bots sichtbar */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gate__error {
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid #ff6b5e;
  background: rgba(255, 107, 94, 0.08);
  color: #ffb3ac;
  font-size: var(--step--1);
}

/* Ergebnis */

.wizard__result-label {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--lime);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-5);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.result-cell {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--ink-900);
}

.result-cell__key {
  color: var(--fg-faint);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-cell__value {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.wizard__disclaimer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--fg-faint);
  font-size: var(--step--2);
  line-height: 1.6;
}

/* --- Kontaktformular ------------------------------------------------------ */

/* Der Formular-Dialog braucht keine Fortschrittslogik, nur etwas mehr Breite
   für die zweispaltige Feldreihe. */
.wizard--form { width: min(100% - 2rem, 640px); }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field__input--area {
  min-height: 128px;
  padding: var(--space-4);
  line-height: 1.55;
  resize: vertical;
}

/* Bestätigung nach dem Absenden */

.done { padding-block: var(--space-4); }

.done:focus { outline: none; }

.done__mark {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 30px var(--glow-lime);
  position: relative;
}

/* Häkchen aus zwei Linien — kein Icon-Paket für ein einzelnes Zeichen. */
.done__mark::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 8px;
  height: 15px;
  border: solid var(--ink-900);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Website-Schnellcheck ------------------------------------------------ */

.wizard--check { width: min(100% - 2rem, 860px); }

.sitecheck__progress i { transform: scaleX(0); }

.wizard--check.is-running .sitecheck__progress i {
  animation: sitecheck-progress 1.35s var(--ease-mid) infinite;
}

@keyframes sitecheck-progress {
  0% { transform: translateX(-100%) scaleX(.18); transform-origin: left; }
  48% { transform: translateX(15%) scaleX(.72); transform-origin: center; }
  100% { transform: translateX(100%) scaleX(.18); transform-origin: right; }
}

.sitecheck__privacy {
  color: var(--fg-faint);
  font-size: var(--step--2);
  line-height: 1.55;
}

.sitecheck__result:focus { outline: none; }

.sitecheck__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.sitecheck__score {
  --score: 0deg;
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink-800) 61%, transparent 62%),
    conic-gradient(var(--lime) var(--score), var(--rule) 0);
  box-shadow: 0 0 38px rgba(200, 255, 47, .08);
}

.sitecheck__score strong {
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -.05em;
}

.sitecheck__score span {
  margin-top: var(--space-1);
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--2);
}

.sitecheck__categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-6);
  border: 1px solid var(--rule);
  background: var(--rule);
}

.sitecheck__category {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--ink-900);
}

.sitecheck__category-top {
  display: grid;
  gap: var(--space-2);
}

.sitecheck__category-top span {
  min-height: 2.4em;
  color: var(--fg-faint);
  font-size: var(--step--2);
  line-height: 1.2;
}

.sitecheck__category-top strong {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}

.sitecheck__bar {
  height: 2px;
  overflow: hidden;
  background: var(--rule);
}

.sitecheck__bar i {
  display: block;
  width: var(--category-score, 0%);
  height: 100%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--glow-lime);
}

.sitecheck__findings { margin-top: var(--space-7); }

.sitecheck__list {
  display: grid;
  gap: 1px;
  margin-top: var(--space-3);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.sitecheck__finding {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
  background: var(--ink-900);
}

.sitecheck__finding::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-3);
  width: 2px;
  background: var(--violet);
}

.sitecheck__finding--issue::before { background: #ff6b5e; }
.sitecheck__finding--ok::before { background: var(--lime); }

.sitecheck__finding-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.sitecheck__finding-top strong { font-size: var(--step--1); }

.sitecheck__finding-top span {
  flex: none;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: var(--step--2);
}

.sitecheck__finding p {
  margin-top: var(--space-2);
  color: var(--fg-dim);
  font-size: var(--step--1);
}

.sitecheck__limits {
  margin-top: var(--space-5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sitecheck__limits summary {
  padding: var(--space-4) 0;
  color: var(--fg-dim);
  cursor: pointer;
}

.sitecheck__limits ul {
  display: grid;
  gap: var(--space-3);
  padding: 0 0 var(--space-5) var(--space-5);
  color: var(--fg-faint);
  font-size: var(--step--1);
}

.sitecheck__limits strong { color: var(--fg-dim); }