@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../schriften/hanken-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../schriften/hanken-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/plexmono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/plexmono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/plexmono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/plexmono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
   CLARATUM · Startseite „Sehprobe"
   Welt: Optiker-Prüfraum. Leuchtkasten-Weiß, Sehzeichen-Schwarz,
   dunkler Refraktionsraum. Rot und Grün nur als Duochrom-Test.
   Hanken Grotesk = Sehzeichen, IBM Plex Mono = Messwerte.
   ============================================================ */

:root {
  --wand: #E6E9E7;
  --wand-tief: #D9DDDB;
  --leucht: #FBFCFB;
  --zeichen: #0E1011;
  --text: #22282A;
  --leise: #4A5355;
  --linie: #C9CFCC;
  --linie-zart: #DCE1DE;

  --raum: #111416;
  --raum-linie: #2C3337;
  --raum-text: #E9EDEB;
  --raum-leise: #9DA8AB;

  --rot: #C42A2F;
  --rot-hell: #F06A67;
  --gruen: #10794A;
  --gruen-tief: #0B5E39;
  --gruen-hell: #4FC48A;
  --messing: #B98A3E;

  --schrift: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mess: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --rand: clamp(1rem, 4vw, 3rem);
  --breite: 1240px;
  --takt: clamp(5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kopf-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 12px);
  scrollbar-color: #8E989A var(--wand);
}

body {
  margin: 0;
  background: var(--wand);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--gruen);
}

::selection { background: var(--zeichen); color: var(--leucht); }
.raum ::selection { background: var(--raum-text); color: var(--raum); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }

:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 2px;
}
.raum :focus-visible { outline-color: var(--gruen-hell); }

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

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--zeichen); color: var(--leucht);
  padding: .6rem 1rem; text-decoration: none; font-weight: 600;
}
.sprung:focus { top: 1rem; }

.rahmen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.abschnitt { padding-block: var(--takt); }
.abschnitt + .abschnitt:not(.raum):not(.leucht) { border-top: 1px solid var(--linie-zart); }

.lesebreite { max-width: 44rem; }
.lesebreite-rechts { margin-left: auto; }

/* ---------- Typografie ---------- */

.titel-l,
.titel-m {
  font-weight: 760;
  color: var(--zeichen);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.titel-l { font-size: clamp(2.5rem, 6.2vw, 5.25rem); }
.titel-m { font-size: clamp(2rem, 4.2vw, 3.5rem); }

.text {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--text);
  max-width: 65ch;
  text-wrap: pretty;
}
.text strong { color: var(--zeichen); font-weight: 650; }

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

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--gruen);
  color: #fff;
  font: 650 1rem/1 var(--schrift);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(8, 40, 24, .25), 0 6px 16px -6px rgba(14, 16, 17, .35);
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.knopf:hover { background: var(--gruen-tief); transform: translateY(-1px); box-shadow: 0 2px 2px rgba(8, 40, 24, .25), 0 10px 22px -8px rgba(14, 16, 17, .4); }
.knopf:active { transform: translateY(0); }
.knopf:disabled { background: #4E6E5F; cursor: progress; transform: none; box-shadow: none; }
.knopf-voll { width: 100%; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  height: var(--kopf-h);
  background: color-mix(in srgb, var(--wand) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
/* Über dem dunklen Hero: heller Kopf auf gedimmtem Raum */
.kopf.im-raum { background: var(--raum); border-bottom-color: transparent; }
.kopf.im-raum .marke { color: #fff; }
.kopf.im-raum .kopf-nav a { color: var(--raum-leise); }
.kopf.im-raum .kopf-nav a:hover { color: #fff; }
.kopf.im-raum .menue-knopf { color: #fff; }
.kopf.im-raum :focus-visible { outline-color: var(--gruen-hell); }

.kopf-innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  height: 100%;
  display: flex; align-items: center; gap: 2rem;
}

.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--zeichen); text-decoration: none;
}
.marke-wort { font-weight: 720; font-size: 1.25rem; letter-spacing: -0.02em; }

.kopf-nav { display: flex; gap: 1.75rem; margin-left: auto; }
.kopf-nav a {
  color: var(--leise); text-decoration: none; font-weight: 550; font-size: .97rem;
  padding-block: .4rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  transition: color .2s, background-size .3s var(--ease);
}
.kopf-nav a:hover { color: var(--zeichen); background-size: 100% 1.5px; }

.knopf-kopf { min-height: 2.6rem; padding: 0 1.15rem; font-size: .94rem; }
/* Der Knopf im Kopf erscheint erst, wenn der Besucher den Hero verlassen hat */
.knopf-kopf { transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background-color .25s var(--ease); }
.js .kopf:not(.zeigt-knopf) .knopf-kopf { opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; }

.menue-knopf {
  display: none;
  width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; color: var(--zeichen); cursor: pointer;
  align-items: center; justify-content: center;
}
.menue-striche { display: grid; gap: 5px; width: 22px; }
.menue-striche span { height: 2px; background: currentColor; border-radius: 2px; }

.mobil-nav {
  inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--raum); color: var(--raum-text);
}
.mobil-nav::backdrop { background: rgba(0, 0, 0, .4); }
.mobil-nav-innen { display: flex; flex-direction: column; min-height: 100%; padding: 1.1rem var(--rand) 2rem; }
.mobil-nav-kopf { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.mobil-nav-zu {
  border: 1px solid var(--raum-linie); background: none; color: var(--raum-text);
  font: 550 .95rem var(--schrift); padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
}
.mobil-nav-links { display: grid; margin-top: 2.5rem; }
.mobil-nav-links a {
  display: grid; padding: 1.1rem 0; border-bottom: 1px solid var(--raum-linie);
  text-decoration: none; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
}
.mobil-nav-links a span { font-size: .95rem; font-weight: 400; color: var(--raum-leise); letter-spacing: 0; margin-top: .2rem; }
.mobil-nav-fuss { margin-top: auto; display: grid; gap: .9rem; padding-top: 2rem; }
.mobil-nav-fuss a:not(.knopf) { color: var(--raum-leise); text-decoration: none; text-align: center; }

/* ---------- Sehtafel ---------- */

.tafel {
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
  /* Gedimmter Prüfraum: die Tafel ist die Lichtquelle und wirft Licht auf die Wand */
  background:
    radial-gradient(70% 60% at 50% 42%, #1E2427 0%, rgba(17, 20, 22, 0) 70%),
    var(--raum);
}
.tafel + .abschnitt { padding-top: clamp(3rem, 6vw, 5rem); border-top: 0; }

.tafel-kasten {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 6vw, 6rem) clamp(2rem, 3.5vw, 3.25rem);
  /* Hinterleuchtetes Feld: Mitte hell, zum Rand leichter Lichtabfall, Licht fällt auf die Wand */
  background: radial-gradient(90% 75% at 50% 45%, #FFFFFF 0%, #FFFFFF 45%, #F2F5F3 100%);
  border: 10px solid #F7F9F8;
  outline: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  box-shadow: 0 0 24px 2px rgba(255, 255, 255, .12), 0 0 70px 10px rgba(255, 255, 255, .05);
}

.tafel-zeilen { display: grid; gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.tafel-titel { display: grid; gap: clamp(.3rem, .8vw, .7rem); font-weight: inherit; }

.zeile {
  position: relative;
  display: block;
  color: var(--zeichen);
  text-align: center;
  text-wrap: balance;
  padding-inline: clamp(0rem, 9vw, 9rem);
}
.landolt { display: flex; justify-content: center; gap: clamp(.9rem, 2vw, 1.6rem); }
.landolt svg { width: clamp(1rem, 1.6vw, 1.35rem); height: auto; }
.landolt path { fill: none; stroke: var(--zeichen); stroke-width: 12.8; }
.landolt { align-items: center; margin-top: clamp(.5rem, 1.5vw, 1.25rem); }
.z5 { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 650; letter-spacing: -0.01em; line-height: 1.4; color: var(--zeichen); }

/* Letzter Ring öffnet sich nach unten und führt weiter */
.ring-weiter {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -11px;
  border-radius: 50%;
  color: var(--zeichen);
  transition: background-color .25s var(--ease);
}
.ring-weiter svg { transform: rotate(90deg); }
.landolt .ring-weiter svg { width: clamp(1.25rem, 2vw, 1.65rem); }
/* Farbe und Bewegung hängen am selben Element, damit sie nie auseinanderlaufen */
.ring-weiter svg { color: var(--zeichen); }
.landolt .ring-weiter path { stroke: currentColor; }
.ring-weiter:hover svg, .ring-weiter:focus-visible svg { color: var(--gruen) !important; }
.ring-weiter:hover { background: rgba(16, 121, 74, .1); }
.ring-weiter:hover svg, .ring-weiter:focus-visible svg { transform: rotate(90deg) translateX(3px); transition: transform .3s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .ring-weiter svg { animation: ring-nicken 3.1s linear 2.5s infinite, ring-farbe 3.1s linear 2.5s infinite; }
}
/* Farbe und Bewegung beginnen im selben Moment: der Ring wird grün und nickt sofort nach unten */
@keyframes ring-farbe {
  0%, 64.5%, 100% { color: var(--zeichen); }
  67.7%, 87.8% { color: var(--gruen); }
}
@keyframes ring-nicken {
  0%, 66% { transform: rotate(90deg) translateX(0); }
  76.2% { transform: rotate(90deg) translateX(5px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  87.8%, 100% { transform: rotate(90deg) translateX(0); }
}


.z1 { white-space: nowrap; font-size: clamp(2.1rem, 7.2vw, 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.z1b { font-size: clamp(2.2rem, 6.2vw, 5rem); }
.z2 { font-size: clamp(2rem, 5.2vw, 4.25rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.02; color: var(--gruen); } /* Pointe der Sehtafel in Klar-Grün: die einzige farbige Zeile */
.z3 { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 560; letter-spacing: -0.01em; line-height: 1.35; color: var(--text); }
.z4 { font-size: clamp(.95rem, 1.2vw, 1.05rem); font-weight: 500; line-height: 1.5; color: var(--leise); }




/* Scharfstellen: Startzustand nur mit Skript und ohne reduzierte Bewegung */
.tafel-zeilen .zeile { transition: filter .16s cubic-bezier(.3, 0, .2, 1), transform .16s cubic-bezier(.3, 0, .2, 1); }
.fokus-start .tafel-zeilen .zeile:not(.z1):not(.z-lagen) { filter: blur(11px); transform: scale(1.012); }
.tafel-zeilen.stufe-1 .zeile:not(.z1):not(.z-lagen) { filter: blur(6px); transform: scale(1.008); }
.tafel-zeilen.stufe-2 .zeile:not(.z1):not(.z-lagen) { filter: blur(2.6px); transform: scale(1.004); }
.tafel-zeilen.stufe-3 .zeile:not(.z1):not(.z-lagen) { filter: blur(0.8px); transform: scale(1.001); }
/* Ablauf: die erste Aussage steht sofort scharf, dann rastet die Pointe ein, danach der Rest */
.tafel .tafel-zeilen .zeile.pointe { filter: none; transform: none; transition-duration: .42s; transition-timing-function: var(--ease); }

/* ---------- Weg zum Auftrag: Smartphone ---------- */

.prinzip-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.weg { display: grid; justify-items: center; }

.handy {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 18.6;
  padding: 11px;
  border-radius: 46px;
  background: var(--zeichen);
  box-shadow:
    inset 0 0 0 1.5px #2C3337,
    0 2px 4px rgba(14, 16, 17, .18),
    0 40px 70px -34px rgba(14, 16, 17, .55);
  container-type: inline-size;
}

.handy-schirm {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #fff;
  color: var(--zeichen);
  font-family: var(--schrift);
}

.handy-status {
  position: absolute; inset: 0 0 auto; z-index: 3;
  height: 13cqi;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8cqi;
  font-size: 4.4cqi; font-weight: 650;
}
.handy-insel { position: absolute; left: 50%; top: 3.4cqi; width: 30cqi; height: 8.5cqi; margin-left: -15cqi; border-radius: 99px; background: var(--zeichen); }
.handy-symbole { display: flex; gap: 1.2cqi; }
.handy-symbole i { width: 3.6cqi; height: 3.6cqi; border-radius: 1cqi; background: currentColor; opacity: .8; }

.szene {
  position: absolute; inset: 13cqi 0 0;
  padding: 4cqi 6cqi;
  opacity: 0;
  transform: translateX(6%);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.handy-schirm[data-szene="1"] .szene-1,
.handy-schirm[data-szene="2"] .szene-2,
.handy-schirm[data-szene="3"] .szene-2 { opacity: 1; transform: none; }

/* Szene 1: Suche */
.such-feld {
  display: flex; align-items: center; gap: 2.6cqi;
  height: 12cqi; padding: 0 4cqi;
  border-radius: 99px; background: #EEF1EF;
  font-size: 4.6cqi; font-weight: 550;
}
.such-feld svg { width: 4.8cqi; flex: none; fill: none; stroke: var(--leise); stroke-width: 2; stroke-linecap: round; }
.cursor { width: 2px; height: 5.4cqi; margin-left: -1.6cqi; background: var(--gruen); animation: cursor-blinken 1s steps(1) infinite; }
@keyframes cursor-blinken { 50% { opacity: 0; } }

.treffer { display: grid; gap: 5cqi; margin-top: 7cqi; }
.treffer li { display: grid; gap: 1.4cqi; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.handy-schirm.zeigt-treffer .treffer li { opacity: 1; transform: none; }
.handy-schirm.zeigt-treffer .treffer li:nth-child(2) { transition-delay: .08s; }
.handy-schirm.zeigt-treffer .treffer li:nth-child(3) { transition-delay: .16s; }
.t-adresse { font: 400 3.4cqi/1.2 var(--mess); color: var(--leise); }
.t-titel { font-size: 4.9cqi; font-weight: 650; line-height: 1.25; color: #1F4E8C; }
.t-zeile { height: 2.4cqi; border-radius: 2px; background: #E3E7E5; }
.t-zeile.kurz { width: 62%; }

/* Szene 2 und 3: Webseite nach dem Claratum-Muster der Fachseiten */
.szene-2 { display: flex; flex-direction: column; padding-bottom: 0; }
.w-kopf { flex: none; display: flex; justify-content: space-between; align-items: center; padding-bottom: 3.5cqi; border-bottom: 1px solid var(--linie-zart); font-size: 4.6cqi; }
.w-menue { display: grid; gap: 1.2cqi; width: 5.5cqi; }
.w-menue i { height: 2px; background: currentColor; }
.w-fenster { position: relative; flex: 1; overflow: hidden; }
.w-inhalt { padding: 7cqi 0 10cqi; transition: transform .9s cubic-bezier(.45, 0, .2, 1); }

.w-h { font-size: 7.8cqi; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.w-h em { display: block; margin-top: 1.5cqi; font-style: normal; color: var(--gruen); }

.w-titel { font-size: 3.4cqi; font-weight: 700; color: var(--leise); }
.w-stand { margin-top: 10cqi; }
.w-lage { display: grid; gap: 2.4cqi; margin-top: 3cqi; }
.w-lage li {
  display: grid; grid-template-columns: 5cqi 1fr; gap: 2.6cqi; align-items: start;
  padding: 3cqi 3.4cqi;
  border-radius: 3cqi;
  background: #F2F4F3;
  font-size: 4.1cqi; line-height: 1.35;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.w-haken { width: 5cqi; height: 5cqi; margin-top: .3cqi; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #A9B2B4; position: relative; transition: background-color .3s, box-shadow .3s; }
.w-haken::after {
  content: ""; position: absolute; left: 1.6cqi; top: .9cqi;
  width: 1.4cqi; height: 2.6cqi;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0); transition: transform .3s var(--ease);
}
.handy-schirm.erkannt .w-treffer { background: #E3F2EA; box-shadow: inset 0 0 0 1.5px var(--gruen); }
.handy-schirm.erkannt .w-treffer .w-haken { background: var(--gruen); box-shadow: none; }
.handy-schirm.erkannt .w-treffer .w-haken::after { transform: rotate(45deg) scale(1); }

.w-entlastung { margin-top: 5cqi; font-size: 4.6cqi; font-weight: 700; line-height: 1.35; }

.w-schritt { margin-top: 9cqi; padding: 5cqi; border-radius: 4cqi; background: var(--raum); color: #fff; }
.w-schritt .w-titel { color: var(--raum-leise); }
.w-schritt-h { margin-top: 2cqi; font-size: 6cqi; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.w-schritt .w-p { margin-top: 2.6cqi; font-size: 3.9cqi; line-height: 1.5; color: #C9D1D3; }

.w-knopf {
  position: relative;
  display: grid; place-items: center;
  margin-top: 4.5cqi; height: 12cqi;
  border-radius: 99px; background: var(--gruen); color: #fff;
  font-size: 4.4cqi; font-weight: 650;
  transition: transform .2s var(--ease), background-color .3s;
}
.w-knopf > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1.8cqi; transition: opacity .3s; }
.w-knopf-fertig { opacity: 0; }
.w-knopf-fertig svg { width: 4.6cqi; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.handy-schirm.gesendet .w-knopf { background: var(--gruen-hell); color: var(--raum); }
.handy-schirm.gesendet .w-knopf-text { opacity: 0; }
.handy-schirm.gesendet .w-knopf-fertig { opacity: 1; }

/* Die Webseite baut sich auf */
.w-kopf, .w-fenster { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.handy-schirm.laedt .w-kopf { opacity: 0; transform: translateY(6px); }
/* Probe: Die Seite im Handy erscheint unscharf und stellt sich scharf, wie die Sehtafel oben */
.w-fenster { transition: opacity .35s var(--ease), filter 1.1s cubic-bezier(.3, 0, .2, 1); }
.handy-schirm.laedt .w-fenster { opacity: 0; filter: blur(7px); }
.handy-schirm:not(.laedt) .w-fenster { transition-delay: .1s, .25s; }

/* Tipp-Anzeige */
.tipp {
  position: absolute; z-index: 4;
  left: var(--tipp-x, 50%); top: var(--tipp-y, 50%);
  width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi;
  border-radius: 50%;
  background: rgba(14, 16, 17, .18);
  box-shadow: 0 0 0 2px rgba(14, 16, 17, .35);
  opacity: 0; transform: scale(.6);
  pointer-events: none;
}
.tipp.tippt { animation: tippen .7s var(--ease); }
@keyframes tippen {
  0% { opacity: 0; transform: scale(1.3); }
  35% { opacity: 1; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* Schrittleiste: Kette mit Bogen von der Webseite zur Anfrage */
.kette {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: 2.1rem auto;
  justify-content: start;
  margin-top: 2.25rem;
}
.kette-bogen {
  grid-row: 1; grid-column: 2 / 4;
  padding-left: 1.6rem;
  width: 100%; height: 100%;
  overflow: visible;
}
.kette-bogen path { fill: none; stroke: var(--gruen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 120; stroke-dashoffset: 0; }
/* Der Bogen zeichnet sich in einer ruhigen Schleife: Webseite führt zur Anfrage */
@media (prefers-reduced-motion: no-preference) {
  .kette-bogen path { animation: bogen-ziehen 3.2s ease-in-out infinite; }
}
@keyframes bogen-ziehen {
  0% { stroke-dashoffset: 100; opacity: 0; }
  6% { stroke-dashoffset: 100; opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  72% { stroke-dashoffset: 0; opacity: 1; }
  86% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

.stationen {
  grid-row: 2; grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  align-items: center;
  font-size: .9rem; font-weight: 600;
  color: var(--zeichen);
}
.stationen li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--linie);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.stationen li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9AA4A6; transition: background-color .35s; }
.stationen li.ist-linse::before, .stationen li.ist-ziel::before { background: var(--gruen); }
/* Pfeile zwischen den Schritten */
.stationen li + li { margin-left: 1.6rem; position: relative; }
.stationen li + li::after {
  content: ""; position: absolute; left: -1.15rem; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.28rem;
  border-top: 1.5px solid #9AA4A6; border-right: 1.5px solid #9AA4A6;
  transform: rotate(45deg);
}
.weg-hinweis { margin-top: .9rem; font-size: .82rem; color: var(--leise); }

.satz-gross {
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 2px solid var(--zeichen);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 780; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--zeichen);
  text-wrap: balance;
}
.satz-gross span { display: block; font-weight: 820; }

/* ---------- Refraktionsraum (dunkle Abschnitte) ---------- */

.raum {
  background: var(--raum);
  color: var(--raum-text);
}
.raum .titel-l, .raum .titel-m { color: #fff; }
.raum .text { color: var(--raum-leise); }
.raum .text strong { color: var(--raum-text); }

.frage {
  margin-block: clamp(3.5rem, 8vw, 7rem);
  font-size: clamp(2.6rem, 8.2vw, 6rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: #fff;
  text-wrap: balance;
}

/* Eine Frage, jede Branche: das Anliegen wechselt, die Frage bleibt */
.branchen-titel { max-width: 22ch; }
.frage-buehne { margin-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.frage-buehne .frage { margin-block: 0; }
.anliegen-wechsel {
  display: grid;
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
  font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em;
  color: var(--raum-leise); /* neutral: Lage des Besuchers, weder Befund (Rot) noch klar (Grün) */
}
.anliegen-wechsel span { grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .anliegen-wechsel span { animation: anliegen-tausch 12s var(--ease) infinite; }
  .anliegen-wechsel span:nth-child(2) { animation-delay: 3s; }
  .anliegen-wechsel span:nth-child(3) { animation-delay: 6s; }
  .anliegen-wechsel span:nth-child(4) { animation-delay: 9s; }
}
/* Jedes Anliegen stellt sich kurz scharf und verschwimmt wieder */
@keyframes anliegen-tausch {
  0% { opacity: 0; transform: translateY(.3em); filter: blur(6px); }
  6%, 21% { opacity: 1; transform: none; filter: blur(0); }
  27%, 100% { opacity: 0; transform: translateY(-.3em); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .anliegen-wechsel { display: flex; flex-wrap: wrap; gap: 0 .5em; }
  .anliegen-wechsel span { opacity: 1; transform: none; filter: none; }
}
.frage-nach { margin-top: 0; max-width: 34rem; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frage {
      animation: frage-scharf linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }
}
@keyframes frage-scharf {
  from { filter: blur(14px); opacity: .25; letter-spacing: -0.01em; }
  to   { filter: blur(0); opacity: 1; letter-spacing: -0.04em; }
}

/* ---------- Vorher / Nachher ---------- */

.vergleich {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.probe { display: grid; }
.probe-beispiel { color: var(--leise); }
.probe-fenster, .probe-regler { grid-area: 1 / 1; }
.probe-fenster {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(14, 16, 17, .1), 0 24px 60px -28px rgba(14, 16, 17, .4);
  container-type: inline-size;
}
.probe-leiste {
  position: absolute; inset: 0 0 auto; height: min(6.5cqi, 44px); z-index: 3;
  display: flex; align-items: center; gap: 1.1cqi; padding-inline: 2.4cqi;
  background: #EFF1F0; border-bottom: 1px solid #E0E4E2;
}
.probe-leiste span { width: min(1.4cqi, 11px); height: min(1.4cqi, 11px); border-radius: 50%; background: #CBD1CE; }
.probe-leiste b {
  margin-left: 2cqi; padding: .55cqi 2.4cqi; border-radius: 99px; background: #fff;
  font: 500 min(1.6cqi, 13px)/1.2 var(--mess); color: #6B7476;
}

.probe-glas {
  position: absolute; inset: min(6.5cqi, 44px) 0 0;
  overflow: hidden;
  isolation: isolate; /* jedes Glas ist eine eigene Ebene, der Zähler bleibt in seinem Glas */
}
.glas-1 { background: #fff; }
.glas-2 {
  background: #FFFFFF;
  clip-path: inset(0 0 0 var(--pos));
}



.probe-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem;
  font-weight: 650; font-size: .95rem; color: var(--zeichen);
}
.probe-hinweis { font-size: .85rem; font-weight: 450; color: var(--leise); text-align: center; }

.zaehler {
  position: absolute; bottom: 1rem; z-index: 2;
  display: flex; gap: .9rem;
  padding: .55rem 1rem;
  border-radius: 99px;
  background: var(--zeichen); color: #fff;
  font: 400 .85rem/1.2 var(--mess);
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay: 1.3s;
}
.zaehler b { font-weight: 500; }
.zaehler-vorher { left: 1rem; }
.zaehler-vorher span:first-child b { color: var(--rot-hell); }
.zaehler-nachher { right: 1rem; }
.zaehler-nachher span:first-child b { color: var(--gruen-hell); }
.probe.markiert .zaehler { opacity: 1; transform: none; }

/* Die echten Seiten werden in Desktop-Breite geladen und verkleinert (Maßstab setzt das Skript) */
.probe-glas iframe {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  border: 0;
  transform-origin: 0 0;
  background: #fff;
}
.probe-fenster.zieht iframe { pointer-events: none; }

/* Erst nach einem Klick scrollt das Beispiel, vorher scrollt immer die Seite.
   Die Seiten selbst nehmen nie Zeiger an: Die Sperrfläche fängt Mausrad und Wischen ab
   und das Skript reicht sie weiter. So greift das Scrollen sofort nach dem Klick. */
.probe-glas iframe { pointer-events: none; }
.probe-sperre {
  position: absolute; z-index: 3; inset: min(6.5cqi, 44px) 0 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1rem;
  border: 0; margin: 0;
  background: rgba(14, 16, 17, .14);
  cursor: pointer;
  font: inherit;
  transition: background-color .3s var(--ease), opacity .3s var(--ease), visibility .3s;
}
.probe-sperre span {
  padding: .55rem 1.1rem;
  border-radius: 99px;
  background: var(--zeichen); color: #fff;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  transform: translateY(3.6rem); /* knapp unter dem runden Griff, der in der Mitte sitzt */
  transition: transform .3s var(--ease);
}
.probe-sperre:hover { background: rgba(14, 16, 17, .24); }
.probe-sperre:hover span { transform: translateY(calc(3.6rem - 2px)); }
.probe-sperre:focus-visible { outline: none; }
.probe-sperre:focus-visible span { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gruen); }
.probe-fenster.frei .probe-sperre { background: transparent; cursor: default; touch-action: none; }
.probe-fenster.frei .probe-sperre span { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }

.probe-griff {
  position: absolute; z-index: 4; top: min(6.5cqi, 44px); bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--zeichen);
  pointer-events: none;
}
.probe-griff span {
  pointer-events: auto; cursor: ew-resize; touch-action: none;
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--zeichen);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 20px rgba(0, 0, 0, .3);
}
.probe-griff span::before, .probe-griff span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 6px solid transparent; margin-top: -6px;
}
.probe-griff span::before { left: 10px; border-right: 7px solid #fff; }
.probe-griff span::after { right: 10px; border-left: 7px solid #fff; }

.probe-regler { display: block; height: 0; overflow: hidden; }
.probe-regler input { width: 100%; margin: 0; }
.probe:has(input:focus-visible) .probe-griff span { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gruen); }

.befunde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 3vw, 3rem); }
.befunde li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 1rem; align-content: start; }
.befund-nr {
  grid-row: span 2;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rot); color: #fff;
  font: 500 .9rem/1 var(--mess);
  margin-top: .15rem;
}
.befunde h3 { font-size: 1.35rem; font-weight: 720; letter-spacing: -0.015em; color: var(--zeichen); line-height: 1.25; }
.befunde p { margin-top: .3rem; color: var(--leise); }
/* Vorher und Nachher liegen übereinander, damit beim Wechsel nichts springt */
.befund-text { display: grid; }
.befund-vorher, .befund-nachher { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.befund-nachher { opacity: 0; transform: translateY(4px); visibility: hidden; }
.befunde.ist-nachher .befund-vorher { opacity: 0; transform: translateY(-4px); visibility: hidden; }
.befunde.ist-nachher .befund-nachher { opacity: 1; transform: none; visibility: visible; }
.befund-nr { transition: background-color .35s var(--ease); }
.befunde.ist-nachher .befund-nr { background: var(--gruen); }

.kern-satz {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 2px solid var(--zeichen);
  font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.04;
  color: var(--zeichen); text-wrap: balance;
}

/* ---------- Kosten ---------- */

.leucht { background: var(--leucht); }

.kosten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 clamp(2.5rem, 6vw, 6rem); align-items: start; }
.kosten-kopf { position: static; }
.kosten-antwort {
  margin-top: 1.25rem;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 720; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--rot);
}

/* Weggabel im Kosten-Abschnitt der Startseite: Kopf oben, darunter zwei Spalten, Paare auf gleicher Höhe */
.kosten--gabel { display: block; }
.kosten--gabel .kosten-kopf { max-width: 44rem; }
.kgabel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.kgabel__kopf { grid-row: 1; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 720; letter-spacing: -0.015em; color: var(--zeichen); padding-bottom: 1rem; border-bottom: 2px solid var(--zeichen); }
.kgabel__kopf--a { grid-column: 1; color: var(--leise); border-bottom-color: var(--linie); }
.kgabel__kopf--b { grid-column: 2; border-bottom-color: var(--gruen); }
.kgabel__punkt { grid-row: var(--zeile); display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linie); }
.kgabel__punkt--a { grid-column: 1; }
.kgabel__punkt--b { grid-column: 2; }
.kgabel .befund-nr { grid-row: auto; }
.kgabel__punkt--b .befund-nr { background: var(--gruen); }
.kgabel h4 { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 740; letter-spacing: -0.02em; line-height: 1.2; color: var(--zeichen); }
.kgabel__punkt--a h4 { color: var(--text); }
.kgabel p { margin-top: .55rem; color: var(--leise); max-width: 48ch; }
@media (max-width: 1020px) {
  .kgabel { grid-template-columns: 1fr; }
  .kgabel > * { grid-column: 1 !important; grid-row: auto !important; }
  .kgabel__kopf--a { order: 1; } .kgabel__punkt--a { order: 2; }
  .kgabel__kopf--b { order: 3; margin-top: 2.5rem; } .kgabel__punkt--b { order: 4; }
}
/* Plus im Kreis zum Aufklappen */
.plus { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .35s var(--ease), color .2s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px; margin: -.75px 0 0 -.35rem; background: currentColor; }
.plus::after { transform: rotate(90deg); }

/* ---------- Die entscheidende Frage ---------- */

/* Die entscheidende Frage: eigenes Leuchtfeld im gedimmten Raum, wie die Sehtafel oben */
.buehne {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(70% 70% at 50% 50%, #1E2427 0%, rgba(17, 20, 22, 0) 70%),
    var(--raum);
}
.buehne-kasten {
  width: min(100% - 2 * var(--rand), 64rem);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4.5rem);
  text-align: center;
  background: radial-gradient(90% 75% at 50% 45%, #FFFFFF 0%, #FFFFFF 45%, #F2F5F3 100%);
  border: 10px solid #F7F9F8;
  outline: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  box-shadow: 0 0 24px 2px rgba(255, 255, 255, .12), 0 0 70px 10px rgba(255, 255, 255, .05);
}
.buehne-frage {
  font-size: clamp(2.3rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
  color: var(--zeichen); text-wrap: balance;
}
.buehne-antwort {
  max-width: 42rem; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--text);
}
.buehne-kasten .knopf { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- Methodik: Sehtafel ---------- */

.methodik-raster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.methodik-links { position: sticky; top: calc(var(--kopf-h) + 2rem); }
.methodik-links .text { font-size: 1.05rem; }
.sehtafel { border-top: 2px solid var(--zeichen); }
.sehtafel > li {
  display: grid; gap: .3rem;
  padding-block: clamp(.85rem, 1.5vw, 1.1rem);
  border-bottom: 1px solid var(--linie);
}
.sehtafel h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--zeichen); }
/* Fallende Größen wie auf der Sehtafel, ruhiger als zuvor */
.sehtafel > li:nth-child(1) h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.sehtafel > li:nth-child(2) h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.sehtafel > li:nth-child(3) h3 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
.sehtafel > li:nth-child(4) h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.sehtafel > li:nth-child(5) h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
.sehtafel p { color: var(--leise); font-size: 1rem; }

.skala { margin-top: 2.25rem; }
.skala-titel { font-size: .9rem; font-weight: 600; color: var(--leise); }
.skala-band { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: .9rem; }
.skala-band span {
  height: 2.75rem; display: grid; place-items: center;
  font: 500 .85rem var(--mess); font-variant-numeric: tabular-nums;
}
.skala-band span:first-child { border-radius: 6px 0 0 6px; }
.skala-band span:last-child { border-radius: 0 6px 6px 0; }
.skala-band .r { background: var(--rot); color: #fff; }
.skala-band .g { background: var(--wand-tief); color: var(--zeichen); }
.skala-band .k { background: var(--gruen); color: #fff; }
/* Je niedriger der Wert, desto unschärfer die Ziffer: die Skala misst Schärfe */
.skala-band b {
  font-weight: 500;
  filter: blur(calc((10 - var(--n)) * 0.24px));
  transition: filter .5s var(--ease);
}
.skala-band span:hover b { filter: blur(0); }

.skala-stufen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-top: .8rem; }
.skala-stufen div { display: flex; gap: .55rem; align-items: baseline; }
.skala-stufen dt { font: 500 .8rem var(--mess); color: var(--leise); }
.skala-stufen dd { font-weight: 650; font-size: .95rem; color: var(--zeichen); }

/* Report-Abschnitt: Kopf zweispaltig, rechts das Muster-Deckblatt als Blatt mit PDF-Marke */
.report-kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.report-kopf .text { max-width: 52ch; }
.report-muster__titel { margin-top: clamp(1.75rem, 3vw, 2.25rem); font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 740; letter-spacing: -0.02em; color: var(--zeichen); }
.report-inhalt { margin: .8rem 0 0; padding: 0; list-style: none; border-top: 2px solid var(--zeichen); max-width: 30rem; }
.report-inhalt li { padding: .6rem 0; border-bottom: 1px solid var(--linie); color: var(--text); }
.report-blatt { position: relative; margin: 0; justify-self: center; width: min(100%, 17rem); }
.report-blatt img { display: block; width: 100%; height: auto; border-radius: 2px; transform: rotate(-1.5deg); box-shadow: 0 0 0 1px rgba(14, 16, 17, .08), 0 2px 4px rgba(14, 16, 17, .06), 0 34px 60px -28px rgba(14, 16, 17, .55); }
/* klassisches PDF-Rot als Dateisymbol, nicht als Befund-Rot */
.report-blatt__marke { position: absolute; right: -.7rem; top: 62%; font: 500 .8rem/1 var(--mess); letter-spacing: .06em; color: #fff; background: #E5252A; padding: .35rem .6rem; border-radius: 3px; box-shadow: 0 6px 14px -6px rgba(120, 10, 12, .55); }
.report-blatt figcaption { margin-top: 1.4rem; text-align: center; font-size: .85rem; color: var(--leise); }
@media (max-width: 1020px) {
  .report-kopf { grid-template-columns: 1fr; }
  .report-blatt { width: min(70%, 15rem); }
}

.weiter-link {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 2.5rem;
  font-weight: 650; color: var(--zeichen);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em;
  text-decoration-color: var(--linie);
  transition: text-decoration-color .25s, gap .25s var(--ease);
}
.weiter-link:hover { text-decoration-color: var(--zeichen); gap: .85rem; }

/* ---------- Report: Weggabel ---------- */

.gabel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4rem, .55fr) minmax(0, 1.15fr);
  align-items: center;
  margin-top: clamp(3rem, 5vw, 4rem);
}
.gabel-etikett { font-size: .9rem; font-weight: 650; color: var(--leise); }

.gabel-start {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 10px;
  background: var(--raum);
  color: #fff;
  box-shadow: 0 24px 50px -30px rgba(14, 16, 17, .6);
}
.gabel-start .gabel-etikett { color: var(--raum-leise); }
.gabel-titel { margin-top: .6rem; font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.08; }

.gabel-linien { align-self: stretch; width: 100%; height: 100%; contain: size; overflow: visible; } /* richtet sich nach den Karten, nicht nach dem eigenen Seitenverhältnis */
.gabel-linien path {
  fill: none; stroke: var(--zeichen); stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

/* Die Etikett-Zeile liegt über den drei Zielen, damit die Linien genau auf die Ziele treffen */
.gabel-ziele { position: relative; align-self: stretch; display: grid; }
.gabel-ziele .gabel-etikett { position: absolute; bottom: calc(100% + .25rem); left: 0; }
.gabel-ziele ul { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; height: 100%; min-height: 15rem; }
.gabel-ziele li {
  position: relative;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--linie), 0 8px 20px -14px rgba(14, 16, 17, .35);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 650; color: var(--zeichen);
}
.gabel-ziele li::before {
  content: ""; position: absolute; left: -5px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--zeichen);
}

/* Dritter Weg als Schalter: öffnet die Erläuterung unter der Gabel */
.gabel-ziele li.gabel-schalter { padding: 0; transition: box-shadow .25s var(--ease); }
.gabel-schalter button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.gabel-schalter .plus { color: var(--leise); }
.gabel-schalter button:hover .plus { color: var(--zeichen); }
.gabel-ziele li.gabel-schalter.ist-offen { box-shadow: 0 0 0 2px var(--gruen), 0 8px 20px -14px rgba(14, 16, 17, .35); }
.gabel-schalter.ist-offen .plus { transform: rotate(45deg); color: var(--gruen); }
.gabel-mehr { margin: 1.5rem 0 0 calc(1.55 / 2.7 * 100%); max-width: 36rem; padding-left: 1.25rem; border-left: 2px solid var(--gruen); }
.gabel-mehr p { color: var(--text); line-height: 1.65; }
.gabel-mehr strong { font-weight: 700; color: var(--zeichen); }

/* Linien zeichnen sich, dann erscheinen die Ziele */
.js .gabel .gabel-linien path { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.js .gabel .gabel-ziele li { opacity: 0; transform: translateX(-8px); }
.js .gabel.an .gabel-linien path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.js .gabel.an .gabel-linien path:nth-child(2) { transition-delay: .12s; }
.js .gabel.an .gabel-linien path:nth-child(3) { transition-delay: .24s; }
.js .gabel.an .gabel-ziele li { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .gabel.an .gabel-ziele li:nth-child(1) { transition-delay: .55s; }
.js .gabel.an .gabel-ziele li:nth-child(2) { transition-delay: .7s; }
.js .gabel.an .gabel-ziele li:nth-child(3) { transition-delay: .85s; }

.schein-freiheit { margin-top: 1.75rem; font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; color: var(--zeichen); }

/* ---------- Anfrage ---------- */

.anfrage-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
/* Absender oben in der Formularkarte: rundes Porträt, Satz und Name, Haarlinie zum ersten Feld */
.karte-absender { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--linie-zart); }
.karte-absender img { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--linie); }
.karte-absender__satz { font-weight: 700; color: var(--zeichen); line-height: 1.3; }
.karte-absender__name { margin-top: .2rem; font-size: .9rem; color: var(--leise); }
.anfrage-notiz { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--raum-linie); color: var(--raum-text); font-weight: 600; max-width: 52ch; }

/* Abschluss als Klammer zum Hero: gedimmter Raum, das Formular leuchtet wie die Sehtafel */
.anfrage {
  background:
    radial-gradient(60% 70% at 75% 45%, #1E2427 0%, rgba(17, 20, 22, 0) 70%),
    var(--raum);
}
.anfrage .karte {
  outline: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 0 24px 2px rgba(255, 255, 255, .12), 0 0 70px 10px rgba(255, 255, 255, .05);
}

.ablauf { display: grid; gap: 1rem; margin-top: 2.25rem; counter-reset: schritt; max-width: 34rem; }
.ablauf li {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 1rem; align-items: baseline;
  counter-increment: schritt;
  font-size: 1.08rem; line-height: 1.5; color: var(--raum-text);
}
.ablauf li::before {
  content: counter(schritt);
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; align-self: start;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--raum-leise);
  font: 500 .9rem/1 var(--mess); color: #fff;
}
.ablauf li:last-child::before { background: var(--gruen); box-shadow: none; }

.direkt { margin-top: 1.25rem; text-align: center; color: var(--raum-leise); font-size: .98rem; }
.direkt a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .25em; }
.direkt a:hover { text-decoration-color: #fff; }
.fuss { border-top: 1px solid var(--raum-linie); }

.karte {
  display: grid; gap: 1.25rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(14, 16, 17, .08), 0 30px 70px -36px rgba(14, 16, 17, .35);
}
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feld { display: grid; gap: .45rem; }
.feld label { font-weight: 650; font-size: .95rem; color: var(--zeichen); }
.feld input {
  width: 100%; min-height: 3.25rem;
  padding: 0 1rem;
  font: 450 1.05rem var(--schrift); color: var(--zeichen);
  background: var(--leucht);
  border: 1px solid #B9C1BE; border-radius: 6px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.feld input::placeholder { color: #6A7476; }
.feld input:hover { border-color: #8C9698; }
.feld input:focus { outline: none; border-color: var(--gruen); background: #fff; box-shadow: 0 0 0 3px rgba(16, 121, 74, .18); }
.feld input:user-invalid { border-color: var(--rot); }

.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: .8rem; font-size: .9rem; line-height: 1.55; color: var(--leise); cursor: pointer; }
.zustimmung input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--gruen); }
.zustimmung a { color: var(--zeichen); text-underline-offset: .2em; }

.meldung { display: none; padding: .9rem 1rem; border-radius: 6px; font-size: .95rem; }
.meldung.is-visible { display: block; }
.meldung.is-success { background: #E3F2EA; color: var(--gruen-tief); }
.meldung.is-error { background: #FBE7E6; color: #8E1C20; }

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

.fuss { background: var(--raum); color: var(--raum-leise); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.fuss .marke { color: #fff; }
.fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.fuss-text { margin-top: 1rem; max-width: 34ch; }
.fuss-kontakt { display: grid; gap: .35rem; margin-top: 1.25rem; }
.fuss-kontakt a, .fuss-links a { text-decoration: none; transition: color .2s; }
.fuss-kontakt a:hover, .fuss-links a:hover { color: #fff; }
.fuss-titel { font-size: .9rem; font-weight: 650; color: var(--raum-text); margin-bottom: .9rem; }
.fuss-links { display: grid; gap: .5rem; }
.fuss-unten {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--raum-linie);
  font-size: .85rem; color: var(--raum-leise);
}

/* ---------- Anpassung ---------- */

@media (max-width: 1020px) {
  .vergleich, .kosten, .anfrage-raster, .prinzip-raster { grid-template-columns: 1fr; }
  .methodik-raster { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Untereinander: erst die Einleitung, dann die Tafel, danach Skala und Link */
  .methodik-links { display: contents; }
  .methodik-kopf { order: 1; }
  .methodik-raster .sehtafel { order: 2; }
  .methodik-raster .skala { order: 3; margin-top: 0; }
  .methodik-raster .weiter-link { order: 4; margin-top: -1rem; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --kopf-h: 60px; }
  .kopf-nav { display: none; }
  .knopf-kopf { display: none; } /* am Handy steht die Anfrage im Menü */
  .befunde { grid-template-columns: 1fr; }
  .stationen { font-size: .74rem; }
  .stationen li { padding: .4rem .4rem; gap: .25rem; }
  .stationen li:not(.ist-linse):not(.ist-ziel)::before { display: none; } /* am Handy nur die grünen Punkte, spart Breite */
  .kette { justify-content: stretch; }
  .stationen li { justify-content: center; }
  .stationen li + li { margin-left: .3rem; }
  .stationen li + li::after { display: none; }
  .kette-bogen { padding-left: .3rem; }
  .menue-knopf { display: inline-flex; margin-left: auto; }

  .zeile { padding-inline: 0; }
  .z1 { font-size: clamp(1.6rem, 8.2vw, 2.4rem); }
  .z1b { font-size: clamp(1.5rem, 7.4vw, 2.15rem); }
  .z2 { font-size: clamp(1.4rem, 6.6vw, 1.9rem); }

  .frage { margin-block: 3rem; }

  .probe-fenster { aspect-ratio: 4 / 6; }
  .probe-leiste { height: 10cqi; }
  .probe-leiste b { font-size: 3cqi; }
  .probe-glas, .probe-griff, .probe-sperre { top: 10cqi; }
  .probe-sperre span { font-size: .8rem; }
  /* Am Handy steht der Hinweis „erfunden“ in eigener Zeile unter Vorher und Nachher (O3) */
  .probe-zeile { flex-wrap: wrap; row-gap: .35rem; }
  .probe-hinweis { order: 3; flex-basis: 100%; }
  .zaehler { font-size: .75rem; padding: .45rem .8rem; bottom: .75rem; }


  .skala-band span { height: 2.25rem; font-size: .75rem; }
  .skala-stufen { grid-template-columns: 1fr 1fr; gap: .6rem; }

  .gabel { grid-template-columns: 1fr; }
  .gabel-linien { display: none; }
  .gabel-ziele { margin-top: 3.75rem; padding-left: 1.5rem; margin-left: 1.5rem; }
  .gabel-ziele ul { min-height: 0; gap: .75rem; grid-template-rows: none; }
  .gabel-ziele .gabel-etikett { bottom: calc(100% + 1.4rem); left: -1px; }
  /* Punkt mit Querstrich je Karte, dazu die senkrechte Linie. Sie läuft durch und endet am dritten Punkt. */
  .gabel-ziele li::before {
    left: calc(-1.5rem - 5px); width: calc(1.5rem + 5px); height: 10px; margin-top: -5px; border-radius: 0;
    background:
      radial-gradient(circle at 5px 50%, var(--zeichen) 4.5px, transparent 5px),
      linear-gradient(var(--zeichen), var(--zeichen)) 5px 50% / 100% 1.6px no-repeat;
  }
  .gabel-ziele li::after { content: ""; position: absolute; left: calc(-1.5rem - .8px); top: -.75rem; bottom: 0; border-left: 1.6px solid var(--zeichen); }
  .gabel-ziele li:first-child::after { top: -.6rem; }
  .gabel-ziele li:last-child::after { bottom: 50%; }
  .gabel-mehr { margin: 1rem 0 0 3rem; }

  .weiter-link { display: inline-block; }
  .weiter-link svg { display: inline-block; vertical-align: -3px; margin-left: .35rem; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > :first-child { grid-column: 1 / -1; }
}

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

/* ============================================================
   Neue Story (19.10.2026): Ergänzungen in derselben Bauweise
   ============================================================ */

/* 1 Einstieg: die Überschrift als ein Satz in fallenden Zeilen, darunter die Lagen als Zeile Sehzeichen.
   Grün wie die Lagen im Prinzip: erkannt. Jede Lage rastet einzeln ein (startseite.js). */
.tafel-satz .zeile { padding-inline: 0; }
.tafel-satz .z1 { font-size: clamp(2.1rem, 5.6vw, 4.75rem); }
.tafel-satz .z1b { font-size: clamp(1.9rem, 4.9vw, 4.1rem); }
.tafel-satz .z1c { font-size: clamp(1.75rem, 4.3vw, 3.6rem); }
.z-lagen { padding-inline: 0; font-size: clamp(1.2rem, 2.3vw, 1.9rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1.3; color: var(--gruen); }
.z-lagen span { display: inline-block; white-space: nowrap; margin-inline: .16em; }
.fokus-start .z-lagen span { filter: blur(11px); transform: scale(1.012); transition: filter .42s var(--ease), transform .42s var(--ease); }
.fokus-start .z-lagen span.scharf { filter: none; transform: none; }
/* Der Satz zu Claratum steht eine Stufe unter den Lagen, die Größen fallen weiter */
.z-lagen + .z3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
@media (min-width: 1021px) {
  /* Am Bildschirm stehen die fünf Lagen in einer einzigen Reihe, wie eine Zeile Sehzeichen */
  .z-lagen { white-space: nowrap; font-size: min(2vw, 1.6rem); }
}
@media (max-width: 760px) {
  /* Am Handy fließt der Satz in gleicher Größe, damit keine Zeile herausragt */
  .tafel-satz { display: block; font-size: clamp(1.7rem, 8vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; color: var(--zeichen); text-align: center; text-wrap: balance; }
  .tafel-satz .zeile, .tafel-satz .z1b, .tafel-satz .z1c { display: inline; white-space: normal; font-size: inherit; }
}

/* Sprungziel des Rings im Hero, liegt am Anfang von „Das Muster" */
.anker { display: block; height: 0; }

/* 2 Das Muster: die Überschrift allein über die ganze Breite, darunter das Bild groß und der Text daneben */
.muster-unterzeile {
  margin-top: clamp(.5rem, 1vw, .8rem);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--leise); text-wrap: balance;
}
.muster-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
}
/* Heller Rahmen wie beim Foto des Gründers: Das warme Bild wirkt so gerahmt statt aufgeklebt */
.muster-bild img {
  width: 100%; height: auto;
  border: 10px solid #F7F9F8; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(14, 16, 17, .08), 0 30px 70px -36px rgba(14, 16, 17, .35);
}
/* Erst der Satz zum Wiedererkennen, dann die Sätze aus dem Bild als schlichte Aufzählung */
.muster-text .text:first-child { margin-top: 0; color: var(--zeichen); font-weight: 600; }
.muster-saetze {
  display: grid; gap: .35rem; margin-top: 1rem; padding-left: 1.25em;
  list-style: disc; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.5; color: var(--text);
}
.muster-saetze li::marker { color: var(--leise); }
@media (max-width: 1020px) {
  .muster-raster { grid-template-columns: 1fr; }
  .muster-text { max-width: 44rem; }
}
@media (max-width: 600px) {
  .muster-raster { gap: 1.5rem; }
}

/* Beleg zu „Fast alle“: gepunktet unterstrichen, öffnet beim Zeigen, Tippen oder mit der Tastatur */
.beleg-knopf {
  font: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: help;
  text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-color: var(--leise); text-decoration-thickness: .06em; text-underline-offset: .14em;
  transition: text-decoration-color .2s var(--ease);
}
.beleg-knopf:hover, .beleg-knopf.ist-offen { text-decoration-color: var(--gruen); }
.beleg {
  width: min(22rem, calc(100vw - 24px));
  padding: 1rem 1.2rem;
  border: 0; border-radius: 8px;
  background: #fff; color: var(--text);
  box-shadow: 0 0 0 1px rgba(14, 16, 17, .08), 0 24px 50px -24px rgba(14, 16, 17, .4);
  font-size: .98rem; line-height: 1.55;
}
/* Mit Skript hängt der Beleg unter den Worten, ohne Skript steht er mittig wie ein Hinweis */
.js .beleg { position: absolute; inset: auto; margin: 0; }
.beleg:popover-open { animation: beleg-auf .22s var(--ease); }
@keyframes beleg-auf { from { opacity: 0; transform: translateY(-4px); } }


/* 3 Die Aufgabe: Bei 320 Pixeln passt die Kette nur mit etwas kleinerer Schrift und engeren Kästen.
   Die Spalte darf nie breiter werden als der Bildschirm. */
@media (max-width: 1020px) {
  .prinzip-raster { grid-template-columns: minmax(0, 1fr); }
}
/* „Mehr nicht.“ springt an wie eine Leuchtröhre im Prüfraum: erst fast aus, dann kurzes Flackern.
   Danach flackert es alle sechs Sekunden kurz nach, nur solange der Satz zu sehen ist.
   Nur mit Skript und ohne reduzierte Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .js .satz-gross .flackern { opacity: .14; }
  .js .satz-gross .flackern.an { animation: anspringen 1.4s .3s forwards, nachflackern 6s 3s infinite; }
  .js .satz-gross .flackern.ruht { animation-play-state: paused; }
}
@keyframes nachflackern {
  0% { opacity: 1; animation-timing-function: steps(1, end); }
  2% { opacity: .2; animation-timing-function: steps(1, end); }
  4% { opacity: 1; animation-timing-function: steps(1, end); }
  5.5% { opacity: .3; animation-timing-function: steps(1, end); }
  8% { opacity: 1; filter: blur(.8px); animation-timing-function: ease-out; }
  13%, 100% { opacity: 1; filter: none; }
}
@keyframes anspringen {
  0% { opacity: .14; animation-timing-function: steps(1, end); }
  8% { opacity: 1; animation-timing-function: steps(1, end); }
  13% { opacity: .2; animation-timing-function: steps(1, end); }
  24% { opacity: 1; animation-timing-function: steps(1, end); }
  29% { opacity: .35; animation-timing-function: steps(1, end); }
  42% { opacity: 1; filter: blur(.8px); animation-timing-function: ease-out; }
  100% { opacity: 1; filter: none; }
}

/* Am Bildschirm beginnt der Text oben auf Höhe des Handys, statt mittig mit leerem Raum darüber */
@media (min-width: 1021px) {
  #aufgabe .prinzip-raster { align-items: start; }
  #aufgabe .prinzip-text { padding-top: clamp(1rem, 2.5vw, 2.5rem); }
}
@media (max-width: 380px) {
  .stationen { font-size: .7rem; }
  .stationen li { padding-inline: .3rem; }
  .stationen li + li { margin-left: .2rem; }
}

/* 4 Das Prinzip: fünf Lagen im Wechsel, die drei Teile der Klarheit */
@media (prefers-reduced-motion: no-preference) {
  .anliegen-wechsel.fuenf span { animation-name: anliegen-tausch-fuenf; animation-duration: 15s; }
  .anliegen-wechsel.fuenf span:nth-child(5) { animation-delay: 12s; }
}
@keyframes anliegen-tausch-fuenf {
  0% { opacity: 0; transform: translateY(.3em); filter: blur(6px); }
  5%, 17% { opacity: 1; transform: none; filter: blur(0); }
  21%, 100% { opacity: 0; transform: translateY(-.3em); filter: blur(6px); }
}
.klarheit-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 3vw, 3rem); margin: 1.5rem 0 clamp(2rem, 4vw, 3rem); }
.klarheit-drei:last-child { margin-bottom: 0; } /* Abschnitt 4 endet mit den drei Teilen */
.klarheit-drei li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 1rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid var(--raum-linie); }
.klarheit-drei .befund-nr { background: var(--gruen); }
.klarheit-drei h3 { font-size: 1.35rem; font-weight: 720; letter-spacing: -0.015em; line-height: 1.25; color: #fff; }
.klarheit-drei p { margin-top: .3rem; color: var(--raum-leise); }

/* 5 Das Beispiel: Zählhinweis, erster Schritt */
.zaehl-hinweis { margin-top: -.75rem; font-size: .9rem; color: var(--leise); }
/* Hinweis-Karte: was nicht zum Inhalt des Abschnitts gehört, steht abgesetzt als helle Karte
   (erster Schritt in 5, Gestaltung und Methode in 7). Ein Landolt-Ring, nach vorn geöffnet, zeigt:
   Hier geht es weiter. Beim ersten Schritt grün, weil Grün die Anfrage heißt, sonst Sehzeichen-Schwarz. */
.hinweis-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(.9rem, 2vw, 1.25rem); align-items: start;
  max-width: 40rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0 auto;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(14, 16, 17, .08), 0 24px 50px -30px rgba(14, 16, 17, .35);
}
.hinweis-zeichen { width: 1.6rem; height: 1.6rem; margin-top: .25rem; }
.hinweis-zeichen path { fill: none; stroke: var(--zeichen); stroke-width: 12.8; }
.erster-schritt .hinweis-zeichen path { stroke: var(--gruen); }
.hinweis-karte .text { margin-top: 0; color: var(--zeichen); }
.hinweis-karte .text + .text { margin-top: .75rem; }
.hinweis-karte .weiter-link { margin-top: 1rem; }

/* 6 Wirkung und Kosten: der Merksatz ist die Überschrift, die Kehrseite in einer Spalte mit roten Nummern */
.kgabel--einzeln .kgabel__kopf { grid-column: 1 / -1; }
.kgabel--einzeln .kgabel__kopf--a { color: var(--zeichen); border-bottom-color: var(--rot); }
.kgabel--einzeln .kgabel__punkt { grid-column: auto; grid-row: auto; }

/* 7 Der Maßstab: die Frage zuerst, der Name des Bereichs danach */
#fragen .sehtafel > li:nth-child(1) h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
#fragen .sehtafel > li:nth-child(2) h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
#fragen .sehtafel > li:nth-child(3) h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
#fragen .sehtafel > li:nth-child(4) h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
#fragen .sehtafel > li:nth-child(5) h3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
#fragen .sehtafel p { font-size: .9rem; font-weight: 600; }

/* 6b Die Abgrenzung: eigener Abschnitt im Raum, direkt vor den fünf Fragen.
   Der zweite Satz steht in Klar-Grün, weil er die Klarheit benennt. */
.abgrenzung-titel {
  font-size: clamp(2.2rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  color: #fff; text-wrap: balance;
}
.abgrenzung-titel span { display: block; margin-top: .15em; color: var(--gruen-hell); }
.abgrenzung .text { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* 7 Der Maßstab endet mit dem Hinweis auf die offen gelegte Methode, als normaler Text */
.massstab-schluss { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.massstab-schluss .text { margin-top: 0; }
.massstab-schluss .weiter-link { margin-top: .75rem; }

/* 9 Die Selbstprüfung auf der Bühne: die drei Fragen, nach der Einladung und vor dem Formular */
.buehne-fragen { max-width: 46rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; border-top: 2px solid var(--zeichen); }
/* Die drei Fragen zum Abarbeiten: durchnummeriert, alle gleich groß, linksbündig in der Bühne.
   Grüne Nummern wie bei den drei Teilen der Klarheit in Abschnitt 4. */
.buehne-fragen { counter-reset: frage; text-align: left; }
.buehne-fragen li {
  counter-increment: frage;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: clamp(.75rem, 1.6vw, 1.1rem); align-items: start;
  padding-block: clamp(.8rem, 1.5vw, 1.05rem); border-bottom: 1px solid var(--linie);
  font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 760; letter-spacing: -0.02em; line-height: 1.2; color: var(--zeichen); text-wrap: balance;
}
.buehne-fragen li::before {
  content: counter(frage);
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--gruen); color: #fff; font: 500 .9rem/1 var(--mess); letter-spacing: 0;
  margin-top: max(0px, calc((1.2em - 2rem) / 2));
}
/* Die Bühne steht jetzt direkt vor der Anfrage: eine Raum-Linie trennt die beiden dunklen Abschnitte */
.buehne + .anfrage { border-top: 1px solid var(--raum-linie); }

/* 9 Die Einladung: Ablauf auf hellem Grund, Erläuterungen an den Zielen der Weggabel */
.report-kopf { align-items: start; }
.report-kopf .ablauf { margin-top: 1.75rem; }
.leucht .ablauf li { color: var(--text); }
.leucht .ablauf li::before { box-shadow: inset 0 0 0 1.5px var(--leise); color: var(--zeichen); }
.leucht .ablauf li:last-child::before { color: #fff; }
.gabel-start h3.gabel-etikett { font-size: .9rem; }
.gabel-ziele li small { display: block; margin-top: .35rem; font-size: .95rem; font-weight: 450; line-height: 1.5; color: var(--leise); }

/* 10 Wer dahinter steht: Foto im hellen Rahmen wie ein Leuchtfeld, das Formular mit eigenem Kopf */
.gruender .titel-m { margin-bottom: 1.75rem; }
.gruender-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border: 10px solid #F7F9F8; border-radius: 4px; outline: 1px solid rgba(255, 255, 255, .5); }
.gruender-bild figcaption { margin-top: .9rem; font-size: .95rem; font-weight: 650; color: var(--raum-text); }
.anfrage .karte { color: var(--text); }
.karte-kopf { padding-bottom: 1.4rem; border-bottom: 1px solid var(--linie-zart); }
.karte-kopf h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 760; letter-spacing: -0.02em; line-height: 1.2; color: var(--zeichen); }
.karte-kopf p { margin-top: .5rem; font-size: .98rem; line-height: 1.55; color: var(--leise); }

@media (max-width: 1020px) {
  .kgabel--einzeln { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .klarheit-drei { grid-template-columns: 1fr; }
  .hinweis-karte { margin-left: 0; }
}

/* Startseite: die Sehprobe als durchgehende Komposition.
   Auf diesen Body begrenzt; die gemeinsame Basis der Unterseiten bleibt bestehen. */
html:has(.startseite-feinschliff) { scroll-behavior: auto; }
.startseite-feinschliff {
  --rand: clamp(1.25rem, 5vw, 5rem);
  --breite: 1240px;
  --takt: clamp(4rem, 7vw, 7rem);
  --wand: #edf0ed;
  --linie-zart: #d4dad6;
}
.startseite-feinschliff .kopf-innen { gap: clamp(1rem, 3vw, 3rem); }
.startseite-feinschliff .marke-wort { font-size: 1.4rem; }
.startseite-feinschliff .knopf { box-shadow: 0 3px 8px -4px rgb(8 40 24 / 28%); }
.startseite-feinschliff .knopf:hover { box-shadow: 0 8px 18px -10px rgb(8 40 24 / 40%); }
.startseite-feinschliff .titel-m {
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  font-weight: 720;
  line-height: 1.1;
}
.startseite-feinschliff .text { line-height: 1.7; }

/* Ein prägnanter Auftakt, danach ein lesbarer Weg statt gleich hoher Bühnen. */
.startseite-feinschliff .tafel { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(3rem, 5vw, 5rem); }
.startseite-feinschliff .tafel-kasten {
  padding: clamp(2.5rem, 5.5vw, 5rem) clamp(1rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem);
  border-width: 6px;
  box-shadow: 0 18px 60px -26px rgb(0 0 0 / 45%);
}
.startseite-feinschliff .tafel-zeilen { gap: clamp(1.5rem, 3vw, 2.75rem); }
.startseite-feinschliff .tafel-satz { gap: .12em; }
.startseite-feinschliff .tafel-satz .z1 { font-size: clamp(1.9rem, 5.6vw, 4.75rem); }
.startseite-feinschliff .tafel-satz .z1b { font-size: clamp(1.8rem, 5vw, 4.2rem); }
.startseite-feinschliff .tafel-satz .z1c { font-size: clamp(1.7rem, 4.4vw, 3.7rem); }
.startseite-feinschliff .z-lagen { white-space: normal; }
.startseite-feinschliff .z-lagen + .z3 {
  width: min(100%, 46ch); margin-inline: auto; padding-inline: 0;
  font-size: clamp(1.0625rem, 1.55vw, 1.25rem); font-weight: 450; line-height: 1.6;
}
.startseite-feinschliff .z-lagen + .hero-angebot { width: min(100%, 60ch); }
.startseite-feinschliff .hero-angebot strong { display: block; margin-bottom: .5rem; font-size: 1.12em; font-weight: 650; line-height: 1.4; color: var(--zeichen); }
.startseite-feinschliff .hero-angebot > span { display: block; }
.startseite-feinschliff .hero-weiter { display: grid; justify-items: center; gap: .75rem; width: fit-content; max-width: 100%; margin-inline: auto; padding-inline: 0; text-decoration: none; }
.startseite-feinschliff .hero-weiter .landolt { margin-top: 0; }
.startseite-feinschliff .hero-weiter-hinweis { color: var(--leise); font-size: .9rem; font-weight: 500; line-height: 1.5; }
.startseite-feinschliff .hero-weiter-hinweis > span { display: inline-block; margin-left: .3rem; }
.startseite-feinschliff .hero-weiter:hover .hero-weiter-hinweis { color: var(--gruen); }
.startseite-feinschliff .hero-weiter:focus-visible { outline: 2px solid var(--gruen); outline-offset: 8px; border-radius: 3px; }
.startseite-feinschliff .muster-titel { max-width: 44ch; }
.startseite-feinschliff .muster-unterzeile { margin-top: 1rem; font-weight: 450; }
.startseite-feinschliff .muster-unterzeile > span { display: block; }
.startseite-feinschliff .muster-unterzeile > span + span { margin-top: .2em; font-size: .85em; }
.startseite-feinschliff .muster-gegenueber { margin-top: clamp(2.5rem, 4vw, 4rem); }
.startseite-feinschliff .muster-vergleich { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.startseite-feinschliff .muster-vergleich th { padding: 0 0 1rem; color: var(--leise); font-size: .9375rem; font-weight: 550; }
.startseite-feinschliff .muster-vergleich td { padding: 1.6rem 0; border-block: 1px solid var(--linie); vertical-align: middle; font-size: clamp(1.25rem, 2.1vw, 1.85rem); line-height: 1.35; letter-spacing: -.02em; text-wrap: pretty; }
.startseite-feinschliff .muster-vergleich td:first-child { padding-right: clamp(1.5rem, 4vw, 4rem); color: var(--leise); font-weight: 450; }
.startseite-feinschliff .muster-vergleich td:last-child,
.startseite-feinschliff .muster-vergleich th:last-child { padding-left: clamp(1.5rem, 4vw, 4rem); }
.startseite-feinschliff .muster-vergleich td:last-child { color: var(--zeichen); font-weight: 650; }
.startseite-feinschliff .muster-schluss { max-width: 56ch; margin-top: 1.75rem; color: var(--leise); font-size: 1.0625rem; line-height: 1.65; }
.startseite-feinschliff .muster-scrollstrecke { display: none; }
.startseite-feinschliff .muster-szenenwahl { display: none; }
.startseite-feinschliff .muster-lebt .muster-vergleich,
.startseite-feinschliff .muster-lebt .muster-schluss--statisch { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.startseite-feinschliff .muster-lebt { padding-block: var(--takt); }
.startseite-feinschliff .muster-lebt > .rahmen { position: sticky; top: calc(var(--kopf-h) + 1rem); }
.startseite-feinschliff .muster-lebt .muster-gegenueber { margin-top: clamp(1rem, 2vw, 2rem); }
.startseite-feinschliff .muster-schluss--szene { position: static; width: 100%; margin: 0; }
.startseite-feinschliff .muster-lebt .muster-scrollstrecke {
  --szene-h: min(35rem, calc(100svh - var(--kopf-h) - 2rem));
  display: block; position: relative; height: calc((var(--szene-h) + 4.75rem) * var(--muster-massstab, 1));
}
.startseite-feinschliff .muster-szene { position: relative; height: calc(var(--szene-h) + 4.75rem); width: calc(100% / var(--muster-massstab, 1)); transform: scale(var(--muster-massstab, 1)); transform-origin: top left; display: grid; grid-template-rows: minmax(0, 1fr) 2rem auto; gap: 1rem; }
.startseite-feinschliff .muster-spiel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.startseite-feinschliff .muster-etikett { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--leise); }
.startseite-feinschliff .muster-browser { overflow: hidden; background: #fafbf9; border: 1px solid #c1cbc5; border-radius: 9px; transform: rotate(-1deg); box-shadow: 0 24px 55px -30px rgb(14 16 17 / 35%); }
.startseite-feinschliff .muster-browserleiste { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1rem; background: #e1e6e2; border-bottom: 1px solid var(--linie); color: var(--leise); font: 400 .75rem/1.4 var(--mess); }
.startseite-feinschliff .muster-punkte { display: flex; gap: 5px; }
.startseite-feinschliff .muster-punkte i { width: 7px; height: 7px; border-radius: 50%; background: #b2bcb5; }
.startseite-feinschliff .muster-webkopf { display: flex; align-items: center; justify-content: space-between; margin-inline: 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--linie); }
.startseite-feinschliff .muster-webmarke { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 650; }
.startseite-feinschliff .muster-webmarke i { width: 18px; height: 18px; border: 5px solid #8b9b91; border-radius: 4px; }
.startseite-feinschliff .muster-webmenue { display: flex; gap: .5rem; }
.startseite-feinschliff .muster-webmenue i { width: 22px; height: 3px; background: #bdc7bf; }
.startseite-feinschliff .muster-webinhalt { position: relative; height: 19.5rem; }
.startseite-feinschliff .muster-fall { position: absolute; inset: 0; padding: 2rem; opacity: 0; transform: translateY(25px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.startseite-feinschliff .muster-fall.ist-aktiv { opacity: 1; transform: translateY(0); }
.startseite-feinschliff .muster-fall > p { max-width: 15ch; margin: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 650; line-height: 1.15; letter-spacing: -.025em; }
.startseite-feinschliff .muster-blindtext { display: grid; gap: .5rem; margin-top: 1.75rem; max-width: 75%; }
.startseite-feinschliff .muster-blindtext i { height: 5px; background: #d9dfda; border-radius: 2px; }
.startseite-feinschliff .muster-blindtext i:last-child { width: 65%; }
.startseite-feinschliff .muster-jubilaeum { float: right; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 0 .5rem .75rem; border: 1px solid #b4c1b8; border-radius: 50%; color: #718579; font-size: 1.75rem; font-weight: 650; line-height: 1; }
.startseite-feinschliff .muster-jubilaeum span { font-size: .6875rem; font-weight: 450; }
.startseite-feinschliff .muster-leistungen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.startseite-feinschliff .muster-leistungen span { padding: .65rem .75rem; border: 1px solid var(--linie); border-radius: 3px; color: var(--leise); font-size: .875rem; }
.startseite-feinschliff .muster-besucher { position: relative; height: 100%; min-height: 27rem; display: flex; flex-direction: column; align-items: center; }
.startseite-feinschliff .muster-besucher .muster-etikett { align-self: flex-start; }
.startseite-feinschliff .muster-denkblase { position: relative; z-index: 2; display: grid; align-items: center; width: 100%; min-height: 10.75rem; padding: 2.5rem 3.25rem; }
.startseite-feinschliff .muster-wolke { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 14px rgb(14 16 17 / 8%)); }
.startseite-feinschliff .muster-denkblase::before,
.startseite-feinschliff .muster-denkblase::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.startseite-feinschliff .muster-denkblase::before { width: 26px; height: 22px; left: 58%; bottom: -17px; }
.startseite-feinschliff .muster-denkblase::after { width: 13px; height: 12px; left: 55%; bottom: -37px; }
.startseite-feinschliff .muster-gedanke { position: relative; left: -.25em; grid-area: 1 / 1; margin: 0; text-align: center; font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 650; line-height: 1.25; letter-spacing: -.02em; opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .2s ease, transform .35s ease; }
.startseite-feinschliff .muster-gedanke.ist-aktiv { opacity: 1; transform: translateY(0) scale(1); transition-delay: .12s; }
.startseite-feinschliff .muster-figur { position: absolute; width: min(100%, 330px); height: auto; bottom: -4px; left: 50%; transform: translateX(-50%); }
.startseite-feinschliff .muster-fortschritt { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--linie); padding-top: 1rem; color: var(--leise); font-size: .8125rem; }
.startseite-feinschliff .muster-scrollhinweis span { margin-left: .5rem; }
.startseite-feinschliff .muster-takte { display: flex; gap: .4rem; }
.startseite-feinschliff .muster-takte i { width: 32px; height: 3px; background: #cbd5cd; transition: background .25s ease; }
.startseite-feinschliff .muster-takte i.ist-aktiv { background: var(--zeichen); }
.startseite-feinschliff .muster-nummer { font: 400 .8125rem/1 var(--mess); }
@media (max-width: 700px) {
  .startseite-feinschliff .muster-lebt > .rahmen { position: static; }
  .startseite-feinschliff .muster-lebt .muster-scrollstrecke { height: auto; }
  .startseite-feinschliff .muster-szene { width: 100%; height: auto; transform: none; grid-template-rows: auto auto; gap: 1.5rem; }
  .startseite-feinschliff .muster-spiel { align-items: end; }
  .startseite-feinschliff .muster-lebt .muster-besucher { height: auto; }
  .startseite-feinschliff .muster-fortschritt { display: none; }
  .startseite-feinschliff .muster-lebt .muster-szenenwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1.5rem; }
  .startseite-feinschliff .muster-szenenwahl button { min-height: 44px; padding: .6rem .3rem; border: 1px solid var(--linie); border-radius: 4px; background: transparent; color: var(--leise); font: 550 .8rem/1.3 var(--schrift); cursor: pointer; }
  .startseite-feinschliff .muster-szenenwahl button span { display: block; margin-bottom: .2rem; font: 400 .7rem/1.2 var(--mess); }
  .startseite-feinschliff .muster-szenenwahl button[aria-pressed="true"] { background: var(--zeichen); border-color: var(--zeichen); color: #fff; }
  .startseite-feinschliff .muster-szenenwahl button:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
  .startseite-feinschliff .muster-lebt .muster-titel { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .startseite-feinschliff .muster-lebt .muster-unterzeile { margin-top: .65rem; font-size: 1rem; line-height: 1.4; }
  .startseite-feinschliff .muster-lebt .muster-scrollstrecke { --szene-h: 23rem; }
  .startseite-feinschliff .muster-spiel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1rem; }
  .startseite-feinschliff .muster-etikett { margin-bottom: .6rem; font-size: .8125rem; }
  .startseite-feinschliff .muster-browserleiste { padding: .4rem .75rem; font-size: .625rem; }
  .startseite-feinschliff .muster-browserleiste > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .startseite-feinschliff .muster-punkte { flex-shrink: 0; }
  .startseite-feinschliff .muster-webkopf { margin-inline: 1rem; padding-block: .65rem; }
  .startseite-feinschliff .muster-webmarke { font-size: .625rem; gap: .35rem; }
  .startseite-feinschliff .muster-webmenue { display: none; }
  .startseite-feinschliff .muster-webmarke i { width: 14px; height: 14px; border-width: 4px; }
  .startseite-feinschliff .muster-webinhalt { height: 12rem; }
  .startseite-feinschliff .muster-fall { padding: 1rem; }
  .startseite-feinschliff .muster-fall > p { font-size: 1.0625rem; max-width: 18ch; }
  .startseite-feinschliff .muster-blindtext { margin-top: 1rem; gap: .35rem; }
  .startseite-feinschliff .muster-blindtext i { height: 4px; }
  .startseite-feinschliff .muster-jubilaeum { display: none; }
  .startseite-feinschliff .muster-leistungen { gap: .35rem; margin-top: .8rem; }
  .startseite-feinschliff .muster-leistungen span { padding: .4rem .5rem; font-size: .6875rem; }
  .startseite-feinschliff .muster-besucher { min-height: 0; justify-content: flex-end; gap: 1.25rem; }
  .startseite-feinschliff .muster-besucher .muster-etikett { display: none; }
  .startseite-feinschliff .muster-denkblase { flex: none; min-height: 7rem; padding: 1.5rem 1.25rem; width: 100%; }
  .startseite-feinschliff .muster-gedanke { font-size: 1rem; }
  .startseite-feinschliff .muster-denkblase::before { width: 19px; height: 16px; bottom: -12px; }
  .startseite-feinschliff .muster-denkblase::after { width: 10px; height: 9px; bottom: -26px; }
  .startseite-feinschliff .muster-figur { position: static; flex: none; width: min(100%, 155px); transform: none; }
  .startseite-feinschliff .muster-leistungen span { font-size: .625rem; padding: .3rem; }
  .startseite-feinschliff .muster-schluss--szene { font-size: .9375rem; line-height: 1.5; }
}
@media (max-width: 700px) {
  .startseite-feinschliff .muster-vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .startseite-feinschliff .muster-vergleich tbody { display: block; }
  .startseite-feinschliff .muster-vergleich tr { display: block; padding-block: 1.5rem; border-top: 1px solid var(--linie); }
  .startseite-feinschliff .muster-vergleich tr:last-child { border-bottom: 1px solid var(--linie); }
  .startseite-feinschliff .muster-vergleich td { display: block; width: auto; border: 0; font-size: 1.25rem; }
  .startseite-feinschliff .muster-vergleich td:first-child { padding: 0; }
  .startseite-feinschliff .muster-vergleich td:last-child { margin-top: 1.25rem; padding: 0 0 0 1rem; border-left: 2px solid var(--linie); }
  .startseite-feinschliff .muster-vergleich td::before { content: attr(data-label); display: block; margin-bottom: .4rem; font-size: .8125rem; font-weight: 450; line-height: 1.5; letter-spacing: 0; color: var(--leise); }
}
.startseite-feinschliff #aufgabe { background: var(--leucht); }
.startseite-feinschliff #aufgabe .prinzip-raster { align-items: center; }
.startseite-feinschliff #aufgabe .prinzip-text { padding-top: 0; }
.startseite-feinschliff #aufgabe .handy { width: min(100%, 250px); }
.startseite-feinschliff #aufgabe .satz-gross { max-width: 32ch; }
.startseite-feinschliff #aufgabe .aufgabe-aussage { font-weight: 780; }
.startseite-feinschliff #aufgabe .satz-gross .flackern { margin-top: 1.1rem; font-size: 1.25em; line-height: 1.1; }
@media (max-width: 700px) {
  .startseite-feinschliff #aufgabe .aufgabe-umbruch { display: none; }
}
.startseite-feinschliff #aufgabe .w-seitenbild { display: grid; place-items: center; height: 46cqi; background: #eef2ef; border-radius: 2cqi; }
.startseite-feinschliff #aufgabe .w-seitenbild svg { width: 70%; stroke: #9aada0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.startseite-feinschliff #aufgabe .w-seitenlinien { display: grid; gap: 2.5cqi; margin-block: 7cqi; }
.startseite-feinschliff #aufgabe .w-seitenlinien i { height: 2.5cqi; border-radius: 1cqi; background: #dde5df; }
.startseite-feinschliff #aufgabe .w-seitenlinien i:last-child { width: 68%; }
.startseite-feinschliff #aufgabe .w-schritt { margin-top: 5cqi; padding: 0; background: transparent; }
.startseite-feinschliff #klarheit .rahmen { display: block; }
.startseite-feinschliff #klarheit .branchen-titel { max-width: none; }
.startseite-feinschliff .klarheit-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-block: clamp(2rem, 4vw, 3.5rem) 0; }
.startseite-feinschliff .klarheit-drei li { padding-top: 1.25rem; }
.startseite-feinschliff .klarheit-drei p { color: #bdc7c3; line-height: 1.6; }
.startseite-feinschliff .muster-kontaktknopf { display: inline-block; margin-top: 1.5rem; padding: .75rem 1rem; background: #40524a; color: #fff; border-radius: 4px; font-size: .9375rem; font-weight: 550; }
@media (max-width: 900px) {
  .startseite-feinschliff .klarheit-drei { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 700px) {
  .startseite-feinschliff .muster-kontaktknopf { margin-top: 1rem; padding: .55rem .65rem; font-size: .75rem; }
}

/* Das Beispiel ist die Hauptbühne. Am Handy kommt das Bild vor der Erklärung. */
.startseite-feinschliff #beispiel { background: #fafbf9; padding-block: clamp(4.5rem, 8vw, 8rem); }
.startseite-feinschliff .beispiel-kopf {
  display: block;
}
.startseite-feinschliff .tooltip-wort { white-space: nowrap; }
.startseite-feinschliff .tooltip-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-left: .1rem; vertical-align: super;
  text-decoration: none; border-radius: 50%; color: var(--messing);
}
.startseite-feinschliff .tooltip-info:hover,
.startseite-feinschliff .tooltip-info.ist-offen { color: var(--messing); background: transparent; }
.startseite-feinschliff .beispiel-kopf .titel-m { font-size: clamp(2.3rem, 4.7vw, 4rem); }
.startseite-feinschliff .beispiel-unterzeile { margin-top: 1.25rem; font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 550; line-height: 1.45; color: var(--leise); }
.startseite-feinschliff .beispiel-kopf .text { margin-top: 0; max-width: 45ch; }
.startseite-feinschliff .vergleich {
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  align-items: start; gap: 0 clamp(2rem, 4vw, 4rem); margin-top: 3rem;
}
.startseite-feinschliff .probe { grid-column: 2; grid-row: 2; min-width: 0; gap: 0; position: static; }
.startseite-feinschliff .befunde { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 1.5rem; }
.startseite-feinschliff .befunde li { border-top: 1px solid var(--linie); padding-top: 1.25rem; column-gap: .75rem; }
.startseite-feinschliff .befunde h3 { font-size: 1.2rem; line-height: 1.25; }
.startseite-feinschliff .befunde p { margin-top: .65rem; font-size: 1rem; line-height: 1.6; }
.startseite-feinschliff .probe-bedienung {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; padding-bottom: 1rem; font-size: .9rem; font-weight: 600;
}
.startseite-feinschliff .probe-bedienung[hidden] { display: none; }
.startseite-feinschliff .probe-auswahl { display: flex; padding: 4px; gap: 2px; border: 1px solid var(--linie); border-radius: 999px; }
.startseite-feinschliff .probe-auswahl button {
  min-height: 36px; padding: .5rem .85rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--leise); font: 600 .85rem/1.2 var(--schrift); cursor: pointer;
  transition: background .2s, color .2s;
}
.startseite-feinschliff .probe-auswahl button:hover { background: #e4e8e4; color: var(--zeichen); }
.startseite-feinschliff .probe-auswahl button[aria-pressed="true"] { background: var(--raum); color: #fff; }
.startseite-feinschliff .probe-fenster {
  grid-area: auto; aspect-ratio: 4 / 3; border: 1px solid #c8ceca; border-radius: 5px;
  box-shadow: 0 20px 45px -28px rgb(14 16 17 / 40%);
}
.startseite-feinschliff .probe-fenster[data-ansicht] .glas-2 { clip-path: none; }
.startseite-feinschliff .probe-fenster[data-ansicht="vorher"] .glas-2,
.startseite-feinschliff .probe-fenster[data-ansicht="nachher"] .glas-1 { visibility: hidden; }
.startseite-feinschliff .probe-sperre span,
.startseite-feinschliff .probe-sperre:hover span { transform: none; }
.startseite-feinschliff .probe-zeile { flex-wrap: wrap; justify-content: center; row-gap: .4rem; margin-top: .75rem; font-size: .85rem; }
.startseite-feinschliff .probe-hinweis { flex: 1; min-width: 12rem; font-size: .8rem; }
.startseite-feinschliff .zaehl-hinweis { flex-basis: 100%; margin-top: 0; text-align: center; font-size: .8rem; font-weight: 450; }
.startseite-feinschliff .zaehl-hinweis mark {
  padding: .08em .22em; border-radius: 2px; white-space: nowrap;
}
.startseite-feinschliff .zaehl-wir { background: #fbe7e6; color: #8e1c20; }
.startseite-feinschliff .zaehl-sie { background: #e3f2ea; color: #0b5e39; }
.startseite-feinschliff .kern-satz {
  margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 0; border-top: 0; max-width: 32ch;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 720; line-height: 1.2;
}
.startseite-feinschliff .hinweis-karte { margin-top: 2rem; padding: 1.5rem; box-shadow: none; border: 1px solid var(--linie); }

/* Nach der dunklen Abgrenzung folgt eine helle, zusammenhängende Erklärung. */
.startseite-feinschliff .wirkung { padding-block: 0; background: var(--leucht); }
.startseite-feinschliff .wirkung > .rahmen { padding-block: var(--takt); }
.startseite-feinschliff .wirkung-gewinn {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.startseite-feinschliff .wirkung-frage {
  margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 550; line-height: 1.4; letter-spacing: -.015em;
  color: var(--leise);
}
.startseite-feinschliff .wirkung-antwort {
  max-width: 100%; margin-top: 1.5rem; font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  font-weight: 740; line-height: 1.1; letter-spacing: -.035em;
  color: var(--zeichen); text-wrap: pretty;
}
.startseite-feinschliff .wirkung-antwort span { display: block; }
.startseite-feinschliff .wirkung-erklaerung { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.startseite-feinschliff .wirkung-erklaerung .text { margin: 0; max-width: 64ch; font-size: 1.0625rem; line-height: 1.7; }
.startseite-feinschliff .wirkung-erklaerung .wirkung-empfehlung { margin: 0; }
.startseite-feinschliff .vertrauensweg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; list-style: none; }
.startseite-feinschliff .vertrauensweg li { position: relative; padding-right: 1.5rem; font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 600; line-height: 1.4; }
.startseite-feinschliff .vertrauensweg li:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: 25px; right: 14px; border-top: 1px solid #A8B5AE; }
.startseite-feinschliff .vertrauensweg li:not(:last-child)::before { content: ""; position: absolute; top: 4px; right: 14px; width: 6px; height: 6px; border-top: 1px solid #A8B5AE; border-right: 1px solid #A8B5AE; transform: rotate(45deg); }
.startseite-feinschliff .vertrauensweg-punkt { display: block; width: 15px; height: 15px; margin-bottom: 1rem; border: 1.5px solid #7C9083; border-radius: 50%; background: var(--leucht); }
.startseite-feinschliff .vertrauensweg li:last-child { color: var(--gruen); }
.startseite-feinschliff .vertrauensweg li:last-child .vertrauensweg-punkt { background: var(--gruen); border-color: var(--gruen); box-shadow: 0 0 0 5px rgb(16 121 74 / 9%); }
.startseite-feinschliff .wirkung-skizze { display: block; width: 100%; height: auto; margin-bottom: 1.75rem; }
@media (max-width: 600px) {
  .startseite-feinschliff .wirkung-erklaerung { grid-template-columns: 1fr; gap: 1.25rem; }
  .startseite-feinschliff .vertrauensweg { grid-template-columns: 1fr; gap: 1.5rem; }
  .startseite-feinschliff .vertrauensweg li { display: flex; align-items: start; gap: 1rem; padding: 0; }
  .startseite-feinschliff .vertrauensweg li br { display: none; }
  .startseite-feinschliff .vertrauensweg-punkt { flex: 0 0 15px; margin: .2rem 0 0; }
  .startseite-feinschliff .vertrauensweg li:not(:last-child)::after { top: 27px; bottom: -17px; left: 7px; right: auto; border: 0; border-left: 1px solid #A8B5AE; }
  .startseite-feinschliff .vertrauensweg li:not(:last-child)::before { display: none; }
}
.startseite-feinschliff .wirkung-ohne { margin: 0; padding-block: clamp(3rem, 5vw, 5rem); background: var(--raum); }
.startseite-feinschliff .wirkung-ohne .wirkung-frage { color: #B9C8BE; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.startseite-feinschliff .wirkung-ohne .wirkung-folgen h3 { color: var(--raum-text); }
.startseite-feinschliff .wirkung-ohne .wirkung-folgen p { color: #B9C8BE; }
.startseite-feinschliff .wirkung-ohne .wirkung-folgen li + li { border-color: var(--raum-linie); }
.startseite-feinschliff .wirkung-folgen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem); margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.startseite-feinschliff .wirkung-folgen li { padding: 0; }
.startseite-feinschliff .wirkung-folgen h3 {
  margin: 0; font-size: clamp(1.2rem, 1.65vw, 1.45rem); font-weight: 650;
  line-height: 1.3; letter-spacing: -.02em; color: var(--zeichen); text-wrap: pretty;
}
.startseite-feinschliff .wirkung-folgen p {
  margin-top: .8rem; color: var(--leise); font-size: 1rem; line-height: 1.65;
}
.startseite-feinschliff .wirkung-empfehlung {
  margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--gruen);
  color: var(--leise); font-size: .9375rem; line-height: 1.6;
}
@media (max-width: 900px) {
  .startseite-feinschliff .wirkung-gewinn,
  .startseite-feinschliff .wirkung-folgen { grid-template-columns: minmax(0, 1fr); }
  .startseite-feinschliff .wirkung-antwort { max-width: 100%; }
  .startseite-feinschliff .wirkung-folgen { gap: 1.5rem; }
  .startseite-feinschliff .wirkung-folgen li + li { padding-top: 1.5rem; border-top: 1px solid var(--linie); }
}
.startseite-feinschliff .abgrenzung { background: var(--raum); padding-block: clamp(3.5rem, 6vw, 6rem); }
.startseite-feinschliff .abgrenzung .rahmen {
  display: block;
}
.startseite-feinschliff .abgrenzung-titel { font-size: clamp(2rem, 3.7vw, 3.2rem); color: var(--raum-text); }
.startseite-feinschliff .abgrenzung-titel span { color: var(--gruen-hell); }
.startseite-feinschliff #fragen { border-top: 0; }
.startseite-feinschliff .abgrenzung .text { margin-top: 0; font-size: 1rem; }
.startseite-feinschliff .methodik-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.startseite-feinschliff #fragen .methodik-links { display: block; position: static; grid-column: 1 / -1; order: 0; }
.startseite-feinschliff #fragen .methodik-kopf { display: block; }
.startseite-feinschliff #fragen .methodik-kopf .titel-m { margin: 0; max-width: 29ch; }
.startseite-feinschliff #fragen .sehtafel { order: 1; grid-column: 1 / -1; width: 100%; counter-reset: prueffrage; border-top: 1px solid var(--linie); }
.startseite-feinschliff #fragen .sehtafel > li {
  counter-increment: prueffrage;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(10rem, 16rem);
  gap: 1rem clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding-block: 1.25rem;
}
.startseite-feinschliff #fragen .sehtafel > li::before {
  content: counter(prueffrage, decimal-leading-zero);
  align-self: center; color: #81978A;
  font: 400 clamp(1.25rem, 2vw, 1.75rem)/1 var(--mess);
  letter-spacing: -.04em;
}
.startseite-feinschliff #fragen .sehtafel > li:nth-child(n) h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem); max-width: 39ch;
  font-weight: 650; line-height: 1.3; letter-spacing: -.02em;
}
.startseite-feinschliff #fragen .sehtafel p { margin-top: .6rem; font-size: .875rem; font-weight: 450; line-height: 1.5; color: var(--leise); }
.startseite-feinschliff .prueffrage-skizze { display: block; width: 100%; height: auto; }
.startseite-feinschliff .massstab-schluss { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; border: 0; }
.startseite-feinschliff .massstab-schluss .text { margin: 0; }
.startseite-feinschliff .massstab-schluss .weiter-link { margin-top: 0; }
@media (max-width: 700px) {
  .startseite-feinschliff #fragen .methodik-kopf { grid-template-columns: 1fr; }
  .startseite-feinschliff #fragen .methodik-kopf .titel-m { max-width: 100%; }
  .startseite-feinschliff #fragen .sehtafel > li { grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding-block: 1.5rem; }
  .startseite-feinschliff #fragen .sehtafel > li::before { align-self: start; padding-top: .2rem; }
  .startseite-feinschliff #fragen .prueffrage-skizze { grid-column: 2; width: min(100%, 15rem); margin-top: .5rem; }
}
.startseite-feinschliff .report-kopf {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; gap: clamp(2.5rem, 6vw, 6rem); margin-bottom: 0;
}
.startseite-feinschliff .report-kopf .anfrage-form { position: static; }
.startseite-feinschliff .report-lieferung { margin-top: 1rem; max-width: 52ch; color: var(--leise); font-size: .95rem; line-height: 1.65; }
.startseite-feinschliff .report-einblick { margin-top: 1.75rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.startseite-feinschliff .report-einblick summary { padding-block: 1rem; cursor: pointer; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.startseite-feinschliff .report-einblick summary:focus-visible { outline: 2px solid var(--gruen); outline-offset: 4px; }
.startseite-feinschliff .report-einblick > div { padding-bottom: 1rem; color: var(--leise); font-size: .95rem; line-height: 1.65; }
.startseite-feinschliff .report-einblick p + p { margin-top: .75rem; }
.startseite-feinschliff #gruender { border-top: 1px solid var(--raum-linie); }

.startseite-feinschliff .report .karte {
  border: 1px solid var(--linie); border-radius: 4px;
  box-shadow: 0 18px 45px -30px rgb(14 16 17 / 25%);
}
.startseite-feinschliff .report .direkt { display: grid; grid-template-columns: max-content max-content; justify-content: center; justify-items: center; gap: .25rem 1.25rem; color: var(--leise); }
.startseite-feinschliff .report .direkt > span { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .startseite-feinschliff .report .direkt { grid-template-columns: minmax(0, 1fr); }
}
.startseite-feinschliff .report .direkt a { display: inline-flex; align-items: center; gap: .4rem; }
.startseite-feinschliff .direkt .whatsapp-symbol { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--gruen); }
.startseite-feinschliff .report .direkt a { color: var(--zeichen); text-decoration-color: var(--linie); white-space: nowrap; }
.startseite-feinschliff .report .direkt a:hover { text-decoration-color: var(--zeichen); }
.startseite-feinschliff .report-wege {
  display: block;
  margin-top: clamp(3rem, 6vw, 6rem); padding-top: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--linie);
}
.startseite-feinschliff .report-blatt { width: min(100%, 14rem); }
.startseite-feinschliff .report-entscheidung { min-width: 0; }
.startseite-feinschliff .report-entscheidung .gabel { margin-top: 0; grid-template-columns: minmax(0, 14rem) clamp(4rem, 16vw, 16rem) minmax(0, 1fr); }
.startseite-feinschliff .gabel-start.report-blatt {
  padding: 0; background: transparent; color: var(--text); box-shadow: none;
}
.startseite-feinschliff .gabel-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.startseite-feinschliff .gabel-option .tooltip-info { flex: 0 0 2rem; margin: 0; vertical-align: baseline; }
.startseite-feinschliff .report-entscheidung .gabel-ziele ul { gap: .75rem; grid-template-rows: repeat(3, 1fr); }
.startseite-feinschliff .gabel-start,
.startseite-feinschliff .gabel-ziele li { border-radius: 4px; }

/* Selbstprüfung und Gründer bereiten die Einladung vor. */
.startseite-feinschliff .buehne { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.startseite-feinschliff .buehne-kasten {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem 4rem; max-width: var(--breite); background: transparent;
  border: 0; outline: 0; box-shadow: none; padding: 0; text-align: left;
}
.startseite-feinschliff .buehne-frage { color: var(--raum-text); font-size: clamp(2rem, 3.5vw, 3rem); }
.startseite-feinschliff .buehne-antwort { grid-column: 1; margin: 0; color: #bdc7c3; font-size: 1.05rem; }
.startseite-feinschliff .massstab-pruefung {
  order: 2;
  grid-column: 1 / -1;
  display: grid; justify-items: start;
  gap: 1rem;
  padding-top: .5rem;
}
.startseite-feinschliff .massstab-pruefung h3 {
  margin: 0; color: var(--zeichen);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 740; line-height: 1.15; letter-spacing: -.03em;
}
.startseite-feinschliff .massstab-pruefung p {
  margin: 0; max-width: 48ch; color: var(--leise);
  font-size: 1.05rem; line-height: 1.6;
}
.startseite-feinschliff .buehne-fragen { grid-column: 2; grid-row: 1 / 3; margin: 0; border-color: var(--raum-leise); }
.startseite-feinschliff .buehne-fragen li {
  color: var(--raum-text); border-color: var(--raum-linie);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 550; line-height: 1.5; padding-block: 1rem;
}
.startseite-feinschliff .gruender-bild img { border-width: 5px; }
.startseite-feinschliff .gruender-abschluss .gruender {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.startseite-feinschliff .gruender-abschluss .titel-m { grid-column: 1 / -1; margin-bottom: 1rem; }
.startseite-feinschliff .gruender-abschluss .gruender-bild { grid-column: 1; grid-row: 2; }
.startseite-feinschliff .gruender-abschluss .text { grid-column: 2; margin-top: 0; }
.startseite-feinschliff .gruender .text { font-size: 1rem; color: #c5ceca; }
.startseite-feinschliff .gruender-profil { grid-column: 2; }
.startseite-feinschliff .gruender-profil h3 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; color: var(--raum-text); text-wrap: balance; }
.startseite-feinschliff .gruender-stationen { margin-block: 1.5rem; }
.startseite-feinschliff .gruender-stationen > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: .75rem; border-top: 1px solid var(--raum-linie); }
.startseite-feinschliff .gruender-stationen dt { font-weight: 650; color: var(--raum-text); }
.startseite-feinschliff .gruender-stationen dd { margin: 0; color: #c5ceca; }
.startseite-feinschliff .schein-freiheit { max-width: 65ch; margin: 2rem auto 0; font-size: 1rem; font-weight: 450; line-height: 1.7; letter-spacing: 0; text-align: center; color: var(--leise); }
.startseite-feinschliff .karte-kopf h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.startseite-feinschliff .feld input { min-height: 3.5rem; border-radius: 3px; }
.startseite-feinschliff .direkt { line-height: 1.8; text-wrap: balance; }
@media (max-width: 1020px) {
  .startseite-feinschliff .beispiel-kopf,
  .startseite-feinschliff .vergleich,
  .startseite-feinschliff .kosten--gabel,
  .startseite-feinschliff .abgrenzung .rahmen,
  .startseite-feinschliff .report-kopf,
  .startseite-feinschliff .report-wege,
  .startseite-feinschliff .methodik-raster { grid-template-columns: minmax(0, 1fr); }
  .startseite-feinschliff .beispiel-kopf .text { max-width: 58ch; }
  .startseite-feinschliff .probe-bedienung { grid-column: 1; grid-row: 1; }
  .startseite-feinschliff .probe { grid-column: 1; grid-row: 2; }
  .startseite-feinschliff .befunde { grid-column: 1; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
  .startseite-feinschliff #aufgabe .prinzip-raster { grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 2rem; }
  .startseite-feinschliff .buehne-kasten { column-gap: 2rem; }
}
@media (max-width: 760px) {
  .startseite-feinschliff .tafel-satz { font-size: clamp(1.8rem, 7.5vw, 3.25rem); line-height: 1.13; }
  .startseite-feinschliff .tafel-satz .zeile { font-size: inherit; }
  .startseite-feinschliff .tafel-kasten { border-width: 4px; }
  .startseite-feinschliff .z-lagen { font-size: 1.0625rem; line-height: 1.8; }
  .startseite-feinschliff .muster-raster { gap: 2rem; }
  .startseite-feinschliff #aufgabe .prinzip-raster,
  .startseite-feinschliff #klarheit .rahmen,
  .startseite-feinschliff .buehne-kasten { grid-template-columns: minmax(0, 1fr); }
  .startseite-feinschliff #aufgabe .weg { padding-block: .5rem; }
  .startseite-feinschliff #aufgabe .handy { width: 230px; }
  .startseite-feinschliff #klarheit .frage-buehne,
  .startseite-feinschliff #klarheit .rahmen > .text,
  .startseite-feinschliff .klarheit-drei,
  .startseite-feinschliff .buehne-fragen { grid-column: 1; grid-row: auto; }
  .startseite-feinschliff #klarheit .frage-buehne { margin-top: 2rem; }
  .startseite-feinschliff #klarheit .frage { font-size: clamp(2.2rem, 9vw, 3.6rem); }
  .startseite-feinschliff .vergleich { margin-top: 2rem; gap: 0; }
  .startseite-feinschliff .probe-fenster { aspect-ratio: 4 / 5; }
  .startseite-feinschliff .probe-bedienung { align-items: stretch; gap: .75rem; }
  .startseite-feinschliff .probe-bedienung > span { display: none; }
  .startseite-feinschliff .probe-auswahl { width: 100%; }
  .startseite-feinschliff .probe-auswahl button { flex: 1; min-height: 40px; padding-inline: .5rem; }
  .startseite-feinschliff .probe-hinweis { flex-basis: 100%; }
  .startseite-feinschliff .befunde { grid-template-columns: 1fr; gap: 1.5rem; }
  .startseite-feinschliff .befunde h3 { font-size: 1.2rem; }
  .startseite-feinschliff .beispiel-kopf .titel-m br { display: none; }
  .startseite-feinschliff .hinweis-karte { padding: 1.25rem; }
  .startseite-feinschliff .report-blatt { width: min(65%, 13rem); }
  .startseite-feinschliff .report-entscheidung .gabel { grid-template-columns: minmax(0, 1fr); }
  .startseite-feinschliff .report-entscheidung .gabel-ziele ul { grid-template-rows: none; }
  .startseite-feinschliff .gruender-abschluss .gruender { grid-template-columns: minmax(0, 1fr); }
  .startseite-feinschliff .gruender-abschluss .gruender-bild,
  .startseite-feinschliff .gruender-abschluss .gruender-profil,
  .startseite-feinschliff .gruender-abschluss .text { grid-column: 1; grid-row: auto; }
  .startseite-feinschliff .buehne-fragen { margin-top: .5rem; }
  .startseite-feinschliff #selbstpruefung .buehne-antwort { grid-column: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .startseite-feinschliff .satz-gross .flackern,
  .startseite-feinschliff .satz-gross .flackern.an { opacity: 1; animation: none; }
  .startseite-feinschliff .ring-weiter svg { animation-iteration-count: infinite; }
  .startseite-feinschliff .kette-bogen path { animation-iteration-count: infinite; }
  /* Die Frage ist unmittelbar lesbar; die Sehprobe trägt den Schärfeeffekt. */
  .startseite-feinschliff .frage { animation: none; }
}