/* Gense Automation · Zollstock
   Farben, Schriften und Abstände als Variablen. Werte, die später im Regler-Panel
   verschoben werden sollen, stehen unter „Regler“. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --tinte: #16181C;
  --weiss: #FFFFFF;
  --flaeche: #F6F5F2;
  --linie: #E5E3DE;
  --grau: #5C5F66;
  --rot: #C2352B;
  --rot-hell: #F8E3E0;
  --hell: #F4F2EE;
  --hell-grau: #B9B7B1;      /* Nebentext auf Tinte, 9,3 : 1 */
  --hell-linie: rgba(244, 242, 238, .26);
  --tinte-weich: #2A2D33;     /* Fließtext auf Weiß und Fläche */
  --rot-auf-tinte: #E5675D;   /* Rot für kleine Schrift auf Tinte, 5,4 : 1 */
  --platzhalter: #767980;     /* Platzhalter in Feldern, 4,5 : 1 */

  --f-kopf: "Newsreader", Georgia, "Times New Roman", serif;
  --f-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Regler */
  --breite: 1280px;
  --rand: clamp(16px, 4.2vw, 56px);
  --abschnitt-abstand: clamp(84px, 11vw, 168px);
  --kopf-hoehe: 72px;
  --h1-groesse: clamp(2.45rem, 1.5rem + 3vw, 4.3rem);
  --h2-groesse: clamp(2rem, 1.25rem + 2.5vw, 3.45rem);
  --h3-groesse: clamp(1.28rem, 1.12rem + .5vw, 1.6rem);
  --text-groesse: clamp(1.03rem, .98rem + .2vw, 1.13rem);
  --einstieg-luft-oben: clamp(32px, 4vw, 60px);
  --zollstock-max: 1.18;     /* größte Skalierung des Zollstocks im Einstieg */
  --leiste: 1.5px;           /* Strichstärke der Glieder */

  /* Bewegung */
  --rasten: cubic-bezier(.3, 1.55, .55, 1);
  --gleiten: cubic-bezier(.16, 1, .3, 1);

  /* Skala: Millimeter, halbe und ganze Zentimeter */
  --skala-tinte:
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 40px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 1.5px, transparent 1.5px 80px) 0 0 / 100% 15px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 1.5px no-repeat;
  --skala-hell:
    repeating-linear-gradient(90deg, var(--hell-linie) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(244,242,238,.5) 0 1px, transparent 1px 40px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--hell) 0 1.5px, transparent 1.5px 80px) 0 0 / 100% 15px no-repeat,
    linear-gradient(var(--hell), var(--hell)) 0 0 / 100% 1.5px no-repeat;
}

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 28px); }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: var(--text-groesse);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--rot);
}
::selection { background: var(--rot); color: var(--weiss); }
html { scrollbar-color: var(--tinte) var(--flaeche); scrollbar-width: thin; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--f-kopf); font-weight: 600; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: var(--h1-groesse); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: var(--h2-groesse); line-height: 1.08; letter-spacing: -.018em; }
h3 { font-size: var(--h3-groesse); line-height: 1.22; letter-spacing: -.008em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.mono { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: var(--weiss); padding: 10px 16px; }
.skip:focus { top: 12px; }
.skip:hover { color: var(--weiss); }

/* Knöpfe und Links */
.knopf {
  --niet: var(--hell-grau);
  display: inline-flex; align-items: center; gap: .65em;
  min-height: 52px; padding: 0 22px 0 24px;
  background: var(--tinte); color: var(--weiss);
  border: var(--leiste) solid var(--tinte); border-radius: 0;
  font: 600 1rem/1.2 var(--f-text); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.knopf::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--niet); flex: none;
  transition: background-color .25s, border-color .25s, transform .45s var(--rasten);
}
.knopf:hover { color: var(--weiss); background: var(--tinte-weich); }
.knopf:hover::after { background: var(--rot); border-color: var(--rot); transform: scale(1.25); }
.knopf:active { transform: translateY(1px); }
.knopf--klein { min-height: 42px; padding: 0 16px 0 18px; font-size: .92rem; }
.knopf--hell { background: var(--hell); color: var(--tinte); border-color: var(--hell); --niet: var(--grau); }
.knopf--hell:hover { background: var(--weiss); color: var(--tinte); }
.knopf--rahmen { background: transparent; color: var(--tinte); --niet: var(--grau); }
.knopf--rahmen:hover { background: var(--flaeche); color: var(--tinte); }
.knopf--rahmen-hell { background: transparent; color: var(--hell); border-color: var(--hell); }
.knopf--rahmen-hell:hover { background: var(--hell); color: var(--tinte); }
.knopf .ico { width: 1.25em; height: 1.25em; }
.knopf[disabled] { opacity: .55; cursor: progress; }
.textlink { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.textlink .ico { width: 1em; height: 1em; }
.textlink--hell { color: var(--hell); }
.textlink--hell:hover { color: var(--weiss); text-decoration-color: var(--rot); }
.inline-link { text-decoration-color: var(--rot); }

/* Rahmen */
.einstieg, .abschnitt { padding-inline: var(--rand); }
.einstieg > *, .abschnitt > * { max-width: var(--breite); margin-inline: auto; }
.abschnitt { padding-block: calc(var(--abschnitt-abstand) * .5) calc(var(--abschnitt-abstand) * .8); position: relative; }
.dunkel { background: var(--tinte); color: var(--hell); }
.dunkel ::selection { background: var(--rot); color: var(--weiss); }

/* Abschnittsadresse: die Stelle auf dem Maß, an der der Abschnitt beginnt */
.abschnitt-mass {
  height: 40px; position: relative;
  background: var(--skala-tinte);
  margin-bottom: clamp(44px, 6vw, 88px);
}
.abschnitt-mass b {
  position: absolute; left: 0; top: 21px;
  font: 500 .8rem/1 var(--f-mono); color: var(--rot); letter-spacing: .02em;
}
.abschnitt-mass b::after { content: " cm"; color: var(--grau); font-weight: 400; }
.dunkel .abschnitt-mass { background: var(--skala-hell); }
.dunkel .abschnitt-mass b { color: var(--rot-auf-tinte); }
.dunkel .abschnitt-mass b::after { color: var(--hell-grau); }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); }
.kopf-zeile {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  height: var(--kopf-hoehe); padding-inline: var(--rand);
  display: flex; align-items: center; gap: 28px;
}
.kopf-logo { display: block; flex: none; }
.kopf-logo img { width: 206px; height: auto; }
.kopf-nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.kopf-nav a { text-decoration: none; font-size: .96rem; font-weight: 500; padding: 6px 0; position: relative; }
.kopf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--rasten); }
.kopf-nav a:hover { color: var(--tinte); }
.kopf-nav a:hover::after, .kopf-nav a[aria-current="true"]::after { transform: scaleX(1); }
.kopf-menue { display: none; width: 46px; height: 46px; margin-left: 4px; background: none; border: var(--leiste) solid var(--tinte); color: var(--tinte); align-items: center; justify-content: center; cursor: pointer; }
.kopf-menue .ico { width: 22px; height: 22px; }
.kopf-mass { position: relative; height: 16px; border-bottom: 1px solid var(--linie); overflow-x: clip; }
.kopf-mass-skala { position: absolute; inset: 0; background: var(--skala-tinte); opacity: .5; }
.kopf-mass-nadel {
  position: absolute; top: 0; bottom: -1px; left: 0; width: 2px; background: var(--rot);
  transform: translateX(calc(var(--stand, 0) * (100vw - 2px)));
}
.kopf-mass-nadel::after { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }
.kopf-mass-wert {
  position: absolute; right: var(--rand); top: 1px; padding: 0 10px;
  background: var(--weiss); font: 400 .7rem/14px var(--f-mono); color: var(--grau);
}
.kopf-mass-wert b { color: var(--rot); font-weight: 500; }

/* Einstieg */
.einstieg { padding-top: var(--einstieg-luft-oben); padding-bottom: 0; }
.einstieg-raster {
  display: grid; grid-template-columns: minmax(0, 6.3fr) minmax(0, 5.7fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  min-height: min(calc(100svh - var(--kopf-hoehe) - 16px - 132px - var(--einstieg-luft-oben)), 780px);
}
.einstieg h1 { max-width: 9.7em; text-wrap: wrap; }
.einstieg-lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem); max-width: 34em; margin-top: clamp(22px, 2.6vw, 34px); color: var(--tinte-weich); }
.einstieg-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(26px, 3vw, 40px); }

.zollstock-buehne { margin: 0; position: relative; overflow: clip; overflow-clip-margin: 6px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 360px; }
.zollstock-buehne figcaption { position: absolute; right: 0; bottom: 6px; color: var(--grau); }
.zollstock { position: absolute; left: 0; top: 0; width: 432px; height: 604px; transform-origin: 0 0; }
.zollstock-rahmen { position: relative; width: 100%; }
.glied {
  position: absolute; left: 0; top: 0; height: 70px; width: 380px;
  transform-origin: 0 50%;
  background: var(--weiss);
  border: var(--leiste) solid var(--tinte);
  will-change: transform;
}
.glied-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px 40px 0; text-align: center; }
.glied.ist-rueck .glied-inhalt { transform: rotate(180deg); }
.glied-skala {
  position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 9.5px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 19px) 0 0 / 100% 9px no-repeat;
  margin-inline: 14px;
}
.glied-skala i { position: absolute; top: 9px; transform: translateX(-50%); font: 500 9px/1 var(--f-mono); font-style: normal; color: var(--tinte); }
.glied-skala i.zehn { color: var(--rot); font-weight: 700; }
.glied-titel { font: 600 15.5px/1.25 var(--f-text); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.glied-vermerk { font: 400 12px/1.3 var(--f-mono); color: var(--grau); margin-top: 3px; white-space: nowrap; }
.glied-titel, .glied-vermerk { transition: opacity .35s, clip-path .6s var(--gleiten); }
.glied:not(.zeigt) .glied-titel, .glied:not(.zeigt) .glied-vermerk { opacity: 0; clip-path: inset(0 100% 0 0); }
.glied.zeigt .glied-titel, .glied.zeigt .glied-vermerk { opacity: 1; clip-path: inset(0 0 0 0); }
.glied-haken { width: 18px; height: 18px; stroke-width: 2.4; color: var(--grau); transition: color .3s .25s, transform .5s .25s var(--rasten); }
.glied.zeigt .glied-haken { color: var(--rot); transform: scale(1.15); }
.niet {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--weiss); border: 2px solid var(--tinte); z-index: 10;
  transition: border-color .25s, background-color .25s;
}
.niet::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--tinte); transition: background-color .25s; }
.niet.aktiv { border-color: var(--rot); }
.niet.aktiv::after { background: var(--rot); }

/* Adressleiste unter dem Einstieg */
.adressleiste { margin-top: clamp(16px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; }
.adressleiste::-webkit-scrollbar { display: none; }
.adressleiste ol {
  list-style: none; margin: 0; padding: 0; min-width: 860px;
  display: grid; grid-template-columns: repeat(10, 1fr) auto;
  background: var(--skala-tinte); padding-top: 20px; padding-bottom: 22px;
}
.adressleiste li { position: relative; }
.adressleiste a { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; font-family: var(--f-mono); font-size: .72rem; line-height: 1.2; color: var(--grau); padding-right: 8px; transform: translateX(-1px); }
.adressleiste li:first-child a { transform: none; }
.adressleiste li:last-child a { transform: translateX(-100%); text-align: right; align-items: flex-end; padding-right: 0; }
.adressleiste b { color: var(--tinte); font-weight: 600; font-size: .8rem; }
.adressleiste li:nth-child(odd) b { color: var(--rot); }
.adressleiste a:hover span { color: var(--rot); }

/* 10 cm · Zeit */
.gewinn-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px) clamp(32px, 6vw, 96px); }
.gewinn-text { max-width: 38em; padding-top: .45em; }
.gewinn-satz {
  grid-column: 1 / -1; margin: clamp(24px, 4vw, 56px) 0 0;
  font: 600 clamp(1.75rem, 1.05rem + 2.6vw, 3.4rem)/1.12 var(--f-kopf); letter-spacing: -.016em;
  max-width: 21em; text-wrap: balance;
}
.unterstrich { background: linear-gradient(var(--rot), var(--rot)) 0 92% / 100% 4px no-repeat; padding-bottom: 2px; }

/* gemeinsame Kopfzeile von Abschnitten */
.kopf-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.kopf-raster p { max-width: 34em; color: var(--tinte-weich); }

/* Erklärvideo */
.film { margin-bottom: clamp(64px, 8vw, 112px); }
.film-buehne {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--tinte); color: var(--hell);
  font-size: clamp(13px, 1.22vw, 20px);
}
.film-buehne .ico { stroke-width: 1.6; }
.film-vermerk { position: absolute; left: 5.5%; top: 6.5%; margin: 0; color: var(--hell-grau); font-size: .8em; }
.film-vermerk-text::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--rot); margin-right: .7em; vertical-align: .08em; }
.film-hinweis { position: absolute; right: 5.5%; top: 6.5%; margin: 0; color: var(--hell-grau); font-size: .75em; }
.film-text {
  position: absolute; left: 5.5%; right: 5.5%; bottom: 7%; margin: 0;
  font: 600 1.7em/1.3 var(--f-kopf); letter-spacing: -.01em; color: var(--weiss); text-wrap: balance;
  padding-top: .8em; border-top: 1px solid var(--hell-linie);
}
.film-text-inhalt { display: block; transition: opacity .3s, transform .5s var(--gleiten); }
.film-text.wechselt .film-text-inhalt { opacity: 0; transform: translateY(.35em); }
.szene {
  position: absolute; left: 5.5%; right: 5.5%; top: 15%; bottom: 25%;
  display: flex; align-items: center; justify-content: center; gap: 4%;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s;
}
.szene.ist-an { opacity: 1; visibility: visible; transition: opacity .45s; }
.szene [data-t] { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--gleiten); }
.szene [data-t].an { opacity: 1; transform: none; }

.szene-1 { align-items: center; }
.eingang { flex: 1 1 0; align-self: center; border: 1px solid var(--hell-linie); padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: .7em; min-width: 0; }
.eingang-art { display: flex; align-items: center; gap: .55em; color: var(--hell-grau); font-size: .78em; }
.eingang-betreff { font: 600 1.25em/1.2 var(--f-kopf); }
.eingang-datei { display: flex; align-items: center; gap: .5em; font: 400 .82em/1.3 var(--f-mono); border-top: 1px solid var(--hell-linie); padding-top: .8em; word-break: break-all; }
.eingang-handy { flex-basis: 0; flex-grow: 1.15; align-self: stretch; }
.eingang-zeile { font-size: .85em; color: var(--hell-grau); }
.eingang-ordnerbaum { list-style: none; margin: 0; padding: 0; font: 400 .82em/1.9 var(--f-mono); color: var(--hell-grau); }
.eingang-ordnerbaum li + li { padding-left: 1.2em; }
.eingang-foto { width: 100%; height: 0; flex: 1 1 auto; min-height: 4em; object-fit: cover; object-position: 50% 45%; border-radius: 3px; }
.eingang-ordner { justify-content: flex-start; }
.eingang-faellt { color: var(--weiss); }
.eingang-faellt[data-t] { transform: translateY(-2.2em); }
.eingang-faellt[data-t].an { transform: none; transition: opacity .3s, transform .7s var(--rasten); }
.blase { display: block; max-width: 92%; padding: .55em .8em; font-size: .88em; line-height: 1.3; }
.blase-ki { border: 1px solid var(--hell-linie); align-self: flex-start; }
.blase-ich { background: var(--hell); color: var(--tinte); align-self: flex-end; font-weight: 600; }

.scan { position: relative; height: 100%; aspect-ratio: 3 / 4; overflow: hidden; flex: none; }
.scan img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); transform-origin: 55% 47%; }
.scan-linie { position: absolute; left: 0; right: 0; top: 8%; height: 3px; background: var(--rot); }
.scan-linie::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 26px; background: linear-gradient(to top, rgba(194, 53, 43, .22), transparent); }
.szene-2.ist-an .scan-linie { animation: scannen 2.8s var(--gleiten) .2s both; }
@keyframes scannen { from { top: 8%; } to { top: 92%; } }
.scan-zeilen { list-style: none; margin: 0; padding: 0; font-size: 1.05em; line-height: 1.85; min-width: 14em; }
.scan-zeilen li { border-bottom: 1px solid var(--hell-linie); }

.szene-3 { flex-direction: column; align-items: stretch; justify-content: center; gap: 1.4em; max-width: 34em; margin-inline: auto; }
.felder { margin: 0; display: grid; gap: .2em; }
.felder div { display: grid; grid-template-columns: 9em 1fr; align-items: baseline; border-bottom: 1px solid var(--hell-linie); padding: .3em 0; position: relative; }
.felder div::after { content: ""; position: absolute; left: 9em; bottom: -1px; height: 2px; width: 0; background: var(--rot); transition: width .6s var(--gleiten) .1s; }
.felder div.an::after { width: 8em; }
.felder dt { color: var(--hell-grau); font-size: .8em; }
.felder dd { margin: 0; font: 600 1.3em/1.3 var(--f-kopf); }
.etiketten { display: flex; gap: .8em; }
.etikett { display: inline-flex; align-items: center; gap: .6em; border: 1.5px solid var(--hell); padding: .35em .9em .35em .6em; font-weight: 600; font-size: .95em; }
.etikett::before { content: ""; width: .6em; height: .6em; border-radius: 50%; border: 1.5px solid var(--hell); }
.etikett.an::before { background: var(--rot); border-color: var(--rot); }

.szene-4 { flex-direction: column; gap: 1.6em; }
.dateiname { margin: 0; position: relative; font-size: 1.35em; height: 1.5em; width: 100%; text-align: center; }
.dateiname span { position: absolute; left: 0; right: 0; transition: opacity .4s, transform .6s var(--gleiten); }
.dateiname-alt { color: var(--hell-grau); }
.szene-4.ist-an .dateiname-neu.an ~ .x, .dateiname-neu.an { transform: none; }
.dateiname:has(.dateiname-neu.an) .dateiname-alt { opacity: 0; transform: translateY(-.8em); text-decoration: line-through; }
.dateiname-neu { color: var(--weiss); }
.pfad { margin: 0; display: flex; align-items: center; gap: .3em; font-size: 1.05em; }
.pfad .ico { width: 1.4em; height: 1.4em; margin-right: .4em; color: var(--hell-grau); }
.pfad span { border: 1.5px solid var(--hell); padding: .3em .8em; position: relative; }
.pfad span + span { margin-left: .9em; }
.pfad span + span::before { content: ""; position: absolute; left: calc(-.9em - 1.5px); top: 50%; width: .9em; height: 1.5px; background: var(--hell); }
.pfad span:last-child.an { border-color: var(--rot); }

.tabelle { width: 100%; border-collapse: collapse; font-size: .9em; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font: 500 .78em/1.2 var(--f-mono); color: var(--hell-grau); padding: 0 .8em .7em 0; border-bottom: 1.5px solid var(--hell); }
.tabelle td { padding: .75em .8em .75em 0; border-bottom: 1px solid var(--hell-linie); white-space: nowrap; }
.tabelle .zahl { text-align: right; }
.tabelle tbody tr[data-t] { transform: translateX(-10px); }
.tabelle tbody tr[data-t].an { transform: none; }
.auswahl { display: inline-flex; align-items: center; gap: .6em; border: 1px solid var(--hell-linie); padding: .15em .5em; }
.auswahl::after { content: ""; width: .4em; height: .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.15em); }

.summen { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--skala-hell); padding-top: 2.2em; }
.summen div { padding-right: 1em; }
.summen dt { color: var(--hell-grau); font-size: .8em; margin-bottom: .4em; }
.summen dd { margin: 0; font: 600 2em/1.1 var(--f-kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe-gewinn dd { background: linear-gradient(var(--rot), var(--rot)) 0 100% / 100% 3px no-repeat; display: inline-block; padding-bottom: .1em; }

.szene-7 { flex-direction: column; align-items: stretch; gap: .9em; max-width: 30em; margin-inline: auto; }
.chat-schloss { margin: 0 0 .4em; display: flex; align-items: center; gap: .5em; color: var(--hell-grau); font-size: .8em; }
.chat-rechnet { display: inline-flex; align-items: center; gap: .5em; color: var(--hell-grau); font-size: .8em; }
.chat-rechnet .ico { animation: blinken 1s steps(2) infinite; color: var(--rot); }
@keyframes blinken { 50% { opacity: .25; } }
.szene-7 .blase { font-size: 1em; }
.szene-8 img { width: min(46%, 22em); }

.film-steuerung { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.film-knopf { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--weiss); border: var(--leiste) solid var(--tinte); color: var(--tinte); cursor: pointer; }
.film-knopf:hover { background: var(--flaeche); }
.film-knopf .ico { width: 20px; height: 20px; grid-area: 1 / 1; }
.film-knopf .ico-play { fill: currentColor; stroke: none; }
.film-knopf .ico-pause { stroke-width: 2.4; }
.film:not(.laeuft) .ico-pause, .film.laeuft .ico-play { display: none; }
.film-zeitleiste { flex: 1; display: flex; height: 26px; min-width: 0; }
.zeit-glied {
  position: relative; height: 100%; border: var(--leiste) solid var(--tinte); background: var(--weiss);
  margin-left: calc(var(--leiste) * -1); cursor: pointer;
}
.zeit-glied:first-child { margin-left: 0; }
.zeit-glied::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 12px) 6px 0 / calc(100% - 6px) 6px no-repeat; }
.zeit-glied::after { content: ""; position: absolute; left: -6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--tinte); z-index: 2; }
.zeit-glied:first-child::after { display: none; }
.zeit-glied.aktiv::after { border-color: var(--rot); background: var(--rot); transform: scale(1.3); }
.zeit-glied::after { transition: transform .5s var(--rasten), background-color .25s; }
.zeit-glied i { position: absolute; left: 0; bottom: 0; height: 9px; width: var(--fort, 0%); background: var(--rot-hell); }
.film-zeit { width: 3.5em; text-align: right; color: var(--grau); }

/* Schritte als senkrechter Zollstock */
.schritte-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.schritte { list-style: none; margin: 0; padding: 0; }
.schritt { position: relative; padding: 4px 0 clamp(36px, 4vw, 52px) 92px; max-width: 46em; }
.schritt h3 { margin-bottom: .45em; }
.schritt > p:not(.vermerk) { color: var(--tinte-weich); }
.schritt-glied {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50px;
  background:
    repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 8px) 100% 10px / 6px calc(100% - 10px) no-repeat,
    repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 40px) 100% 10px / 11px calc(100% - 10px) no-repeat,
    var(--weiss);
  border: var(--leiste) solid var(--tinte);
  transform-origin: 50% 0;
  transition: transform .8s var(--rasten);
  z-index: 1;
}
.schritt:nth-child(n) .schritt-glied { z-index: calc(20 - var(--n, 0)); }
.schritt-glied::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--weiss); border: 2px solid var(--tinte);
  box-shadow: inset 0 0 0 3px var(--weiss), inset 0 0 0 9px var(--tinte);
  transition: border-color .25s, box-shadow .25s; z-index: 2;
}
.schritt:first-child .schritt-glied::before { display: none; }
.schritt-glied.rastet::before { border-color: var(--rot); box-shadow: inset 0 0 0 3px var(--weiss), inset 0 0 0 9px var(--rot); }
.schritt-glied b { position: absolute; top: 12px; left: 6px; font: 600 10px/1 var(--f-mono); color: var(--rot); }
.schritt-glied em {
  position: absolute; left: 7px; top: 36px; writing-mode: vertical-rl;
  font: 400 11.5px/1 var(--f-mono); font-style: normal; color: var(--grau); white-space: nowrap; letter-spacing: .02em;
}
.zs-bereit .schritt:not(:first-child):not(.offen) .schritt-glied { transform: rotate(180deg); }
.vermerk { margin-top: .9em; color: var(--grau); display: flex; align-items: center; gap: .6em; }
.vermerk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grau); flex: none; transition: background-color .3s .5s; }
.zs-bereit .schritt .vermerk { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(28) .55s; }
.zs-bereit .schritt.offen .vermerk { clip-path: inset(0 0 0 0); }
.zs-bereit .schritt.offen .vermerk::before { background: var(--rot); }

.beleg-akte { position: sticky; top: calc(var(--kopf-hoehe) + 48px); }
.beleg-akte-innen { border: var(--leiste) solid var(--tinte); background: var(--weiss); }
.beleg-akte picture img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 48%; }
.beleg-protokoll { list-style: none; margin: 0; padding: 16px 18px 6px; border-top: var(--leiste) solid var(--tinte); }
.beleg-protokoll li { padding: 5px 0; border-bottom: 1px solid var(--linie); display: flex; gap: .6em; align-items: center; transition: color .4s, opacity .4s; }
.beleg-protokoll li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.zs-akte .beleg-protokoll li { opacity: .38; }
.zs-akte .beleg-protokoll li.an { opacity: 1; }
.zs-akte .beleg-protokoll li.jetzt { color: var(--rot); }
.beleg-akte-hinweis { margin: 0; padding: 8px 18px 14px; color: var(--grau); font-size: .72rem; }

.beleg-schluss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: center; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(28px, 3vw, 40px); background: var(--skala-tinte); }
.beleg-schluss p { max-width: 40em; padding-top: 14px; }
.beleg-schluss .knopf { justify-self: start; margin-top: 14px; }

/* 30 cm · Beispiele */
.beispiel-liste { border-bottom: var(--leiste) solid var(--tinte); }
.beispiel-spaltenkopf, .beispiel { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 5.4fr) minmax(0, 3.3fr); gap: clamp(20px, 3vw, 48px); }
.beispiel-spaltenkopf { margin: 0; padding-bottom: 12px; color: var(--grau); font-size: .72rem; }
.beispiel { padding: 34px 0 38px; background: var(--skala-tinte); transition: background-color .3s; }
.beispiel h3 { padding-top: 6px; }
.beispiel > p { padding-top: 8px; max-width: 38em; color: var(--tinte-weich); }
.vermerke { list-style: none; margin: 0; padding: 10px 0 0; color: var(--grau); }
.vermerke li { display: flex; gap: .6em; align-items: baseline; padding: 4px 0; }
.vermerke li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.2px solid currentColor; flex: none; transform: translateY(-1px); }
.vermerke li:last-child { color: var(--tinte); }
.vermerke li:last-child::before { background: var(--rot); border-color: var(--rot); }

/* 40 cm · Leistungen */
.leistungen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.leistungen-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 56px); }
.leistungen-kopf p { color: var(--hell-grau); margin: 1.2em 0 2em; max-width: 30em; }
.leistungen-liste { list-style: none; margin: 0; padding: 0; }
.leistungen-liste li { padding: 30px 0 34px 46px; position: relative; border-top: 1px solid var(--hell-linie); }
.leistungen-liste li:last-child { border-bottom: 1px solid var(--hell-linie); }
.leistungen-liste li::before { content: ""; position: absolute; left: 2px; top: 40px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hell); box-shadow: inset 0 0 0 2.5px var(--tinte), inset 0 0 0 7px var(--hell); }
.leistungen-liste h3 { margin-bottom: .4em; }
.leistungen-liste p { color: var(--hell-grau); max-width: 36em; }
.leistung-begleitung { background: var(--skala-hell); border-top: 0 !important; }
.leistung-begleitung h3 { font-size: calc(var(--h3-groesse) * 1.3); }
.leistung-begleitung p { color: var(--hell); }
.leistungen-liste li.leistung-begleitung::before { border-color: var(--rot); box-shadow: inset 0 0 0 2.5px var(--tinte), inset 0 0 0 7px var(--rot); top: 46px; }

/* 50 cm · Software und Daten */
.software-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px) clamp(32px, 6vw, 96px); }
.software-teil p { max-width: 34em; color: var(--tinte-weich); }
.software-teil h2 { margin-bottom: .55em; }
.datenschutz h2 { font-size: calc(var(--h2-groesse) * .82); }
.kette { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; row-gap: 30px; padding-left: 11px; padding-bottom: 6px; }
.kette-glied {
  position: relative; display: inline-flex; align-items: flex-end; height: 64px; padding: 0 22px 10px 26px;
  border: var(--leiste) solid var(--tinte); background: var(--weiss); margin-left: calc(var(--leiste) * -1);
  font: 600 1rem/1 var(--f-text); white-space: nowrap; transform-origin: 0 50%;
  background-image: repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 45px);
  background-size: calc(100% - 20px) 5px, calc(100% - 20px) 10px; background-position: 10px 0, 10px 0; background-repeat: no-repeat;
  transition: transform .75s var(--rasten);
}
.kette-glied::before { content: ""; position: absolute; left: -11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--tinte); box-shadow: inset 0 0 0 3px var(--weiss), inset 0 0 0 10px var(--tinte); z-index: 2; }
.kette-glied--neu { color: var(--rot); }
.kette-glied--neu::before { border-color: var(--rot); box-shadow: inset 0 0 0 3px var(--weiss), inset 0 0 0 10px var(--rot); }
.zs-kette .kette-glied:not(:first-child) { transform: rotate(-180deg); }
.zs-kette.offen .kette-glied { transform: none; }
.zs-kette.offen .kette-glied:nth-child(2) { transition-delay: .12s; }
.zs-kette.offen .kette-glied:nth-child(3) { transition-delay: .3s; }
.zs-kette.offen .kette-glied:nth-child(4) { transition-delay: .48s; }
.zs-kette.offen .kette-glied:nth-child(5) { transition-delay: .66s; }
.zs-kette.offen .kette-glied:nth-child(6) { transition-delay: .9s; }
.zs-kette .kette-glied:not(:first-child) { z-index: 0; }
.software .software-teil:first-child { grid-row: 1; grid-column: 1; }
.software .datenschutz { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 96px); padding-top: clamp(40px, 5vw, 64px); background: var(--skala-tinte); margin-top: clamp(16px, 3vw, 40px); }
.software .datenschutz h2 { grid-row: 1 / 3; }
.software .datenschutz p { grid-column: 2; }

/* 60 cm · Ablauf */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.ablauf-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 56px); }
.ablauf-kopf p { margin: 1.1em 0 2em; max-width: 30em; color: var(--tinte-weich); }

/* 70 cm · Projekte */
.projekte h2 { margin-bottom: clamp(40px, 5vw, 72px); }
.projekt--ruhl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(56px, 7vw, 104px); }
.projekt h3 { margin-bottom: .3em; }
.projekt-etikett { color: var(--hell-grau); margin: 0 0 1.1em; }
.projekt p { color: var(--hell-grau); }
.projekt p.projekt-etikett { color: var(--rot-auf-tinte); }
.projekt-text .textlink { margin-top: .6em; }
.projekt-bilder { position: relative; padding: 0 0 13% 13%; }
.projekt-bild img { border: 1px solid var(--hell-linie); }
.projekt-bild--handy { position: absolute; left: 0; bottom: 0; width: 27%; }
.projekt-bild--handy img { border: 5px solid var(--tinte); outline: 1px solid var(--hell-linie); border-radius: 3px; }
.projekt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.projekt-paar .projekt { padding-top: 34px; background: var(--skala-hell); }
.projekte-bruecke {
  margin-top: clamp(56px, 7vw, 104px); margin-bottom: 0; max-width: var(--breite);
  padding-right: max(0px, calc(100% - 30em));
  font: 600 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.2 var(--f-kopf); letter-spacing: -.01em; color: var(--weiss);
}

/* 80 cm · Über mich */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.ueber-raster:has(.portraet.fehlt) { grid-template-columns: minmax(0, 1fr); }
.ueber-text h2 { margin-bottom: .6em; }
.ueber-lead { font: 600 clamp(1.25rem, 1.05rem + .7vw, 1.6rem)/1.35 var(--f-kopf); letter-spacing: -.005em; max-width: 26em; }
.ueber-text p:not(.ueber-lead) { max-width: 36em; color: var(--tinte-weich); }
.ueber-kontakt { margin-top: 1.6em; }
.portraet { margin: 0; position: relative; }
.portraet picture { display: block; position: relative; padding: 0 6% 0 10%; }
.portraet picture::before {
  content: ""; position: absolute; right: 0; top: 12%; bottom: 0; width: 46px;
  border: var(--leiste) solid var(--tinte); border-bottom: 0; background: var(--weiss);
  background-image: repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 8px), repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 40px);
  background-size: 6px 100%, 11px 100%; background-position: 0 0, 0 0; background-repeat: no-repeat;
}
.portraet img { position: relative; width: 100%; }
.portraet figcaption { padding-top: 12px; background: var(--skala-tinte); padding-top: 22px; color: var(--grau); }
.portraet.fehlt { display: none; }

/* 90 cm · Fragen */
.fragen { background: var(--flaeche); }
.fragen .abschnitt-mass { --tinte: #16181C; }
.fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fragen-raster h2 { position: sticky; top: calc(var(--kopf-hoehe) + 56px); }
.fragen-liste { border-bottom: var(--leiste) solid var(--tinte); }
.fragen-liste details { border-top: var(--leiste) solid var(--tinte); }
.fragen-liste summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; font: 600 clamp(1.08rem, 1rem + .3vw, 1.24rem)/1.35 var(--f-text);
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary:hover span { color: var(--rot); }
.klapp { position: relative; width: 34px; height: 34px; flex: none; }
.klapp::before { content: ""; position: absolute; left: 6px; top: 13px; width: 26px; height: 8px; border: 1.5px solid var(--tinte); background: var(--weiss); transform-origin: 3px 50%; transition: transform .6s var(--rasten); }
.klapp::after { content: ""; position: absolute; left: 3px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--tinte); box-sizing: border-box; transition: border-color .25s; }
details[open] .klapp::before { transform: rotate(90deg); }
details[open] .klapp::after { border-color: var(--rot); }
.fragen-liste details p { max-width: 44em; padding: 0 56px 26px 0; margin: 0; color: var(--tinte-weich); }

/* 100 cm · Anfrage */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.anfrage-kopf p { color: var(--hell-grau); margin: 1.1em 0 2em; max-width: 30em; }
.anfrage-mail { font-size: .95rem; }
.anfrage-mail a { color: var(--hell); }
.formular { background: var(--weiss); color: var(--tinte); padding: clamp(22px, 3.4vw, 48px); }
.formular-mass { margin-bottom: 30px; }
.formular-mass-skala { position: relative; height: 40px; background: var(--skala-tinte); background-size: auto; }
.formular-mass-skala {
  background:
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px calc(1% - .01px)) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px calc(5% - .01px)) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte) 0 1.5px, transparent 1.5px calc(10% - .01px)) 0 0 / 100% 14px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 1.5px no-repeat;
  margin-right: 1px;
}
.formular-mass-skala::before { content: ""; position: absolute; left: 0; top: 0; height: 14px; width: var(--fort, 14%); background: var(--rot-hell); z-index: -1; transition: width .8s var(--rasten); }
.formular-mass-skala { isolation: isolate; }
.formular-mass-nadel { position: absolute; top: -6px; left: var(--fort, 14%); width: 2px; height: 22px; margin-left: -1px; background: var(--rot); transition: left .8s var(--rasten); }
.formular-mass-nadel::after { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); }
.formular-mass-ziffern { position: absolute; left: 0; right: 0; top: 19px; display: flex; justify-content: space-between; font: 400 10px/1 var(--f-mono); color: var(--grau); }
.formular-mass-ziffern i { font-style: normal; width: 0; display: flex; justify-content: center; }
.formular-mass-ziffern i:first-child { justify-content: flex-start; }
.formular-mass-ziffern i:last-child { justify-content: flex-end; }
.formular-stand { margin: 8px 0 0; color: var(--grau); }
.formular-stand b { color: var(--rot); font-weight: 600; }

.f-schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-schritt legend { font: 600 clamp(1.45rem, 1.2rem + .9vw, 2rem)/1.15 var(--f-kopf); letter-spacing: -.01em; padding: 0; margin-bottom: .55em; outline: none; }
.f-hinweis { color: var(--grau); margin-bottom: 1.4em; }
.f-zeile--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 7px; }
.pflicht { color: var(--rot); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  width: 100%; font: 400 1.05rem/1.4 var(--f-text); color: var(--tinte);
  background: var(--weiss); border: var(--leiste) solid var(--tinte); border-radius: 0;
  padding: 13px 14px; min-height: 52px; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 140px; }
input::placeholder, textarea::placeholder { color: var(--platzhalter); }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px var(--rot-hell), inset 0 -3px 0 var(--rot); }
.field-error { display: none; color: var(--rot); font-size: .9rem; margin: 7px 0 0; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--rot); }
.f-wahlen { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.f-wahlen .f-wahl { border-bottom: 1px solid var(--linie); }
.f-wahl { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; cursor: pointer; font-weight: 400; font-size: 1rem; line-height: 1.45; }
.field .f-wahl { font-weight: 400; font-size: .98rem; margin: 0; }
.f-wahl input {
  appearance: none; width: 22px; height: 22px; flex: none; margin: 0; border: var(--leiste) solid var(--tinte); background: var(--weiss); cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s;
}
.f-wahl input::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--weiss); border-bottom: 2px solid var(--weiss); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .35s var(--rasten); }
.f-wahl input:checked { background: var(--tinte); }
.f-wahl input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.f-wahl input:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.f-wahl:hover input { border-color: var(--rot); }
.field.has-error .f-wahl input { border-color: var(--rot); }
.f-knoepfe { display: flex; gap: 12px; justify-content: space-between; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.f-knoepfe [data-weiter], .f-knoepfe [type="submit"] { margin-left: auto; }
.f-knoepfe [hidden] { display: none; }
.form-status { margin: 14px 0 0; font-size: .95rem; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--rot); }
.f-pflicht-hinweis { color: var(--grau); font-size: .85rem; margin-top: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#form-wrap.is-sent form, #form-wrap.is-sent .formular-mass, #form-wrap.is-sent .kanal, #form-wrap.is-sent .kanal-hinweis { display: none; }
.form-success h3 { margin-bottom: .5em; }
.form-success:focus { outline: none; }

/* Fußzeile */
.fuss { padding: 0 var(--rand) 48px; }
.fuss-skala { max-width: var(--breite); margin: 0 auto; height: 18px; background: var(--skala-tinte); }
.fuss-raster { max-width: var(--breite); margin: 26px auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 28px; font-size: .95rem; color: var(--grau); }
.fuss-raster img { width: 180px; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.fuss a { color: var(--tinte); text-decoration-color: var(--linie); }
.fuss a:hover { color: var(--rot); text-decoration-color: currentColor; }

/* Unterseiten (Danke, Impressum, Datenschutz) */
.seite { padding: clamp(48px, 7vw, 104px) var(--rand) var(--abschnitt-abstand); }
.seite > * { max-width: 920px; margin-inline: auto; }
.seite h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); margin-bottom: .55em; }
.seite h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 1.8em auto .5em; }
.seite ul { margin: 0 auto 1em; padding-left: 1.3em; list-style: square; }
.seite li { margin: .35em 0; }
.seite .schritte { margin-top: 36px; }
.seite-aktionen { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 40px; }
.seite-hinweis { border-top: var(--leiste) solid var(--tinte); padding-top: 16px; color: var(--grau); }

/* Breiten */
@media (max-width: 1180px) {
  .kopf-nav { gap: 16px; }
  .kopf-nav a { font-size: .9rem; }
}
@media (max-width: 1060px) {
  .kopf-menue { display: inline-flex; }
  .kopf-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--weiss);
    padding: 8px var(--rand) 24px; border-bottom: var(--leiste) solid var(--tinte);
  }
  .kopf-nav.offen { display: flex; }
  .kopf-nav a { font-size: 1.15rem; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .kopf-nav a::after { display: none; }
  .kopf .knopf--klein { margin-left: auto; }
}
@media (max-width: 960px) {
  .einstieg-raster { grid-template-columns: 1fr; min-height: 0; gap: 36px; }
  .zollstock-buehne { min-height: 0; }
  .gewinn-raster, .kopf-raster, .leistungen-raster, .ablauf-raster, .projekt--ruhl, .ueber-raster, .fragen-raster, .anfrage-raster, .beleg-schluss { grid-template-columns: 1fr; }
  .leistungen-kopf, .ablauf-kopf, .fragen-raster h2 { position: static; }
  .schritte-raster { grid-template-columns: 1fr; }
  .beleg-akte { display: none; }
  .software-raster { grid-template-columns: 1fr; }
  .software .datenschutz, .software .software-teil:first-child, .kette { grid-column: 1; grid-row: auto; }
  .software .datenschutz { grid-template-columns: 1fr; }
  .software .datenschutz h2 { grid-row: auto; }
  .software .datenschutz p { grid-column: 1; }
  .beispiel-spaltenkopf { display: none; }
  .beispiel { grid-template-columns: 1fr; gap: 6px; padding: 30px 0 32px; }
  .projekt-paar { grid-template-columns: 1fr; gap: 0; }
  .projekt-paar .projekt { padding-bottom: 36px; }
  .ueber-raster { align-items: start; }
  .portraet { max-width: 440px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .film-buehne { aspect-ratio: 3 / 4; font-size: 13.5px; }
  .szene { top: 12%; bottom: 29%; left: 6%; right: 6%; }
  .eingang-zeile, .eingang-ordnerbaum { display: none; }
  .eingang { align-self: stretch; }
  .film-text { font-size: 1.55em; left: 6%; right: 6%; bottom: 5.5%; }
  .film-vermerk, .film-hinweis { top: 5%; left: 6%; }
  .film-hinweis { left: auto; right: 6%; }
  .szene-1 { flex-direction: column; gap: 8px; }
  .eingang { padding: .7em .8em; gap: .45em; flex: none; align-self: stretch; }
  .eingang-betreff { display: none; }
  .eingang-datei { border-top: 0; padding-top: 0; }
  .eingang-handy { display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto auto 1fr; gap: 6px 10px; flex: 1 1 auto; min-height: 0; }
  .eingang-handy .eingang-art { grid-column: 1 / -1; }
  .eingang-foto { grid-row: 2 / 4; height: 100%; min-height: 0; }
  .szene-2 { flex-direction: column; gap: 10px; }
  .scan { height: 52%; }
  .scan-zeilen { font-size: .95em; line-height: 1.6; }
  .felder div { grid-template-columns: 7em 1fr; }
  .felder div::after { left: 7em; }
  .summen { grid-template-columns: 1fr 1fr; row-gap: 1.4em; }
  .summen dd { font-size: 1.7em; }
  .tabelle { font-size: .8em; }
  .tabelle th:nth-child(2), .tabelle td:nth-child(2) { display: none; }
  .pfad { flex-wrap: wrap; justify-content: center; row-gap: .8em; }
  .dateiname { font-size: 1.05em; }
  .f-zeile--zwei { grid-template-columns: 1fr; }
  .film-steuerung { gap: 10px; }
  .zeit-glied::before { background-size: calc(100% - 6px) 4px; }
}
@media (max-width: 560px) {
  :root { --kopf-hoehe: 64px; }
  .kopf-logo img { width: 168px; }
  .kopf .knopf--klein { display: none; }
  .kopf-menue { margin-left: auto; }
  .schritt { padding-left: 70px; }
  .schritt-glied { width: 42px; }
  .schritt-glied em { left: 5px; }
  .einstieg-aktionen .knopf { width: 100%; justify-content: space-between; }
  .fuss-raster { grid-template-columns: 1fr; }
  .fragen-liste details p { padding-right: 0; }
  .kette-glied { height: 56px; padding: 0 16px 9px 20px; font-size: .92rem; }
  .projekt-bilder { padding: 0 0 18% 16%; }
  .projekt-bild--handy { width: 34%; }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; }
  .zs-bereit .schritt .schritt-glied { transform: none !important; }
  .zs-bereit .schritt .vermerk { clip-path: none !important; }
  .zs-kette .kette-glied { transform: none !important; }
}

/* Unterseiten: Ergänzungen */
.seite .abschnitt-mass { max-width: 920px; }
.seite-lead { font: 600 1.3rem/1.4 var(--f-kopf); }
.schritt-titel { font-size: var(--h3-groesse) !important; margin: 0 0 .45em !important; display: flex; align-items: center; gap: .4em; }
.schritt-haken { width: 1em; height: 1em; color: var(--rot); stroke-width: 2.4; }
.seite > p, .seite > h2 { max-width: 920px; }
.field label.f-wahl { display: flex; font-weight: 400; font-size: .98rem; margin: 0; }
.f-knoepfe .knopf { white-space: nowrap; }
@media (max-width: 420px) { .f-knoepfe .knopf { padding-inline: 16px 14px; } }
.dunkel a:not(.knopf):hover { color: var(--weiss); text-decoration-color: var(--rot); }

/* Sprecher im Erklärvideo */
.film-ton .ico { stroke-width: 1.8; }
.film-ton[aria-pressed="false"] .ico-ton, .film-ton[aria-pressed="true"] .ico-stumm { display: none; }
.film-ton[aria-pressed="true"] { border-color: var(--rot); color: var(--rot); }

/* Erklärvideo: Einstieg, Person, Vorgehen, Ergebnis, Schluss */
.film-text.lang { font-size: 1.36em; }
.szene-stapel { gap: 8%; }
.stapel { position: relative; height: 100%; aspect-ratio: 1 / 1; }
.zettel {
  position: absolute; width: 46%; height: 64%; background: var(--hell); padding: 1.2em 1em;
  display: flex; flex-direction: column; gap: .7em;
}
.zettel i { display: block; height: .45em; background: #C9C6BF; width: 80%; }
.zettel i:nth-child(2n) { width: 55%; }
.zettel i:last-child { margin-top: auto; width: 40%; background: var(--tinte); }
.zettel:nth-child(1) { left: 4%; top: 18%; transform: rotate(-9deg); }
.zettel:nth-child(2) { left: 30%; top: 4%; transform: rotate(6deg); }
.zettel:nth-child(3) { left: 16%; top: 30%; transform: rotate(-2deg); }
.zettel[data-t]:not(.an) { transform: translateY(-1.5em) rotate(0); }
.zettel[data-t].an { transition: opacity .3s, transform .6s var(--rasten); }
.zettel-foto { position: absolute; right: 2%; top: 22%; width: 38%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 45%; transform: rotate(8deg); border: 4px solid var(--hell); }
.zettel-foto[data-t]:not(.an) { transform: translateY(-1.5em) rotate(0); }
.zettel-foto[data-t].an { transform: rotate(8deg); transition: opacity .3s, transform .6s var(--rasten); }
.kalender { margin: 0; border: 1.5px solid var(--hell); padding: .6em 1.4em .9em; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kalender b { font: 600 5.2em/1 var(--f-kopf); }
.kalender .mono { color: var(--hell-grau); font-size: .85em; }

.szene-frage { flex-direction: column; gap: 1.6em; }
.rauschen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7em 1em; max-width: 34em; }
.rauschen li { border: 1px solid var(--hell-linie); padding: .35em .8em; color: var(--hell-grau); font-size: .95em; }
.rauschen li:nth-child(odd) { transform: translateY(.4em); }
.rauschen li[data-t].an:nth-child(odd) { transform: translateY(.4em); }
.frage { margin: 0; font: 600 3.4em/1 var(--f-kopf); color: var(--weiss); background: linear-gradient(var(--rot), var(--rot)) 0 100% / 100% 4px no-repeat; padding-bottom: .12em; }

.szene-heute { flex-direction: column; gap: 1.2em; }
.heute-satz { margin: 0; font: 600 3.6em/1 var(--f-kopf); color: var(--weiss); }
.heute-zeile { margin: 0; display: flex; align-items: center; gap: .7em; color: var(--hell-grau); font-size: 1em; }
.niet-klein { width: .8em; height: .8em; border-radius: 50%; border: 2px solid var(--rot); box-shadow: inset 0 0 0 2px var(--tinte), inset 0 0 0 6px var(--rot); flex: none; }

.szene-person { justify-content: center; gap: 5%; bottom: 22%; top: 9%; align-items: stretch; }
.person-foto { height: 100%; width: auto; object-fit: contain; object-position: 50% 100%; }
.person-text { align-self: center; display: flex; flex-direction: column; gap: .6em; max-width: 24em; }
.person-name { margin: 0 0 .25em; font: 600 3em/1 var(--f-kopf); color: var(--weiss); }
.person-zeile { margin: 0; color: var(--hell-grau); font-size: .95em; padding-top: .55em; border-top: 1px solid var(--hell-linie); }

.mini-zollstock { list-style: none; margin: 0; padding: 0 0 0 .6em; display: flex; width: 100%; max-width: 60em; font-size: 1.3em; }
.mini-zollstock li {
  flex: 1 1 0; position: relative; min-height: 4.8em; padding: 1.7em 1.1em .8em 1.4em; line-height: 1.32;
  border: 1.5px solid var(--hell); margin-left: -1.5px; font-weight: 600; font-size: 1.05em; color: var(--weiss);
  background: var(--tinte) repeating-linear-gradient(90deg, var(--hell) 0 1px, transparent 1px 10px) 0 0 / 100% .45em no-repeat;
  transform-origin: 0 50%;
}
.mini-zollstock li b { position: absolute; left: 1.4em; top: .75em; color: var(--rot-auf-tinte); font-size: .7em; font-weight: 600; }
.mini-zollstock li::before { content: ""; position: absolute; left: -.55em; top: 50%; width: 1em; height: 1em; margin-top: -.5em; border-radius: 50%; background: var(--tinte); border: 2px solid var(--hell); box-shadow: inset 0 0 0 2px var(--tinte), inset 0 0 0 7px var(--hell); z-index: 1; }
.mini-zollstock li[data-t]:not(.an) { transform: rotate(-180deg); opacity: 0; }
.mini-zollstock li:first-child[data-t]:not(.an) { transform: translateX(-1em); }
.mini-zollstock li[data-t].an { transform: none; opacity: 1; transition: opacity .2s, transform .75s var(--rasten); }
.mini-zollstock li.an::before { border-color: var(--rot); box-shadow: inset 0 0 0 2px var(--tinte), inset 0 0 0 7px var(--rot); transition: border-color .3s .6s, box-shadow .3s .6s; }

.ergebnis { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.ergebnis li { display: flex; align-items: center; gap: .6em; font: 600 2.7em/1.1 var(--f-kopf); color: var(--weiss); }
.ergebnis li::before { content: ""; width: .32em; height: .32em; border-radius: 50%; border: .07em solid var(--rot); box-shadow: inset 0 0 0 .05em var(--tinte), inset 0 0 0 .2em var(--rot); flex: none; }

.szene-schluss { flex-direction: column; gap: 2em; }
.szene-schluss img { width: min(42%, 21em); }
.schluss-knopf { display: inline-flex; align-items: center; gap: .7em; background: var(--hell); color: var(--tinte); font-weight: 600; font-size: 1.1em; padding: .9em 1.3em; }
.schluss-knopf::after { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--rot); }

@media (max-width: 720px) {
  .film-text.lang { font-size: 1.2em; }
  .szene-stapel { flex-direction: column; gap: 4%; }
  .stapel { height: 64%; }
  .kalender { flex-direction: row; gap: .7em; padding: .4em .9em; }
  .kalender b { font-size: 2.6em; }
  .frage, .heute-satz { font-size: 2.4em; }
  .szene-person { flex-direction: column; align-items: center; gap: 4%; bottom: 31%; }
  .person-foto { height: 58%; }
  .person-name { font-size: 2em; }
  .person-text { align-self: stretch; }
  .mini-zollstock { flex-direction: column; padding: .6em 0 0; }
  .mini-zollstock { font-size: 1.05em; }
  .mini-zollstock li { margin: -1.5px 0 0; min-height: 4em; transform-origin: 50% 0; }
  .mini-zollstock li::before { left: 50%; top: -.55em; margin: 0 0 0 -.5em; }
  .mini-zollstock li[data-t]:not(.an) { transform: rotate(180deg); }
  .mini-zollstock li:first-child[data-t]:not(.an) { transform: translateY(-1em); }
  .ergebnis li { font-size: 1.9em; }
}

.film-hinweis { transition: opacity .3s; }
.film:not(.zeigt-beispiel) .film-hinweis { opacity: 0; }

/* ============================================================
   Tiefe und Farbe (2026-11-05): farbige Abschnitte, Riesenzahlen,
   Hervorhebungen, gefüllte Glieder
   ============================================================ */
@property --fuell { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
:root {
  --rot-dunkel: #A82D24;     /* Rot für Text auf Weiß, 6,9 : 1 */
  --auf-rot: #FFFFFF;        /* Text auf Signalrot, 5,5 : 1 */
  --auf-rot-neben: #FBE9E7;  /* Nebentext auf Signalrot, 4,7 : 1 */
  --zahl-weiss: #F2F0EB;
  --zahl-flaeche: #EAE7E0;
  --zahl-tinte: #202329;
  --zahl-rot: #B9322A;
}

.abschnitt { overflow: clip; }
.abschnitt > *:not(.riesenzahl) { position: relative; z-index: 1; }
.riesenzahl {
  position: absolute; z-index: 0; right: calc(var(--rand) - .04em); top: clamp(40px, 6vw, 96px);
  font: 600 clamp(9rem, 4rem + 20vw, 25rem)/.8 var(--f-kopf); letter-spacing: -.05em;
  color: var(--zahl-weiss); pointer-events: none; user-select: none;
  transform: translate3d(0, var(--versatz, 0px), 0); will-change: transform;
}
.riesenzahl::before { content: attr(data-zahl); }
.riesenzahl::after { content: "cm"; font: 500 .09em/1 var(--f-mono); letter-spacing: 0; margin-left: .25em; vertical-align: .9em; }
.flaeche-grund { background: var(--flaeche); }
.flaeche-grund .riesenzahl, .fragen .riesenzahl { color: var(--zahl-flaeche); }
.dunkel .riesenzahl { color: var(--zahl-tinte); }

/* Signalrot als Fläche */
.rot { background: var(--rot); color: var(--auf-rot); }
.rot ::selection { background: var(--tinte); color: var(--weiss); }
.rot .riesenzahl { color: var(--zahl-rot); }
.rot .abschnitt-mass { background: var(--skala-hell); }
.rot .abschnitt-mass b { color: var(--auf-rot); }
.rot .abschnitt-mass b::after { color: var(--auf-rot-neben); }
.rot a:not(.knopf) { color: var(--auf-rot); }
.rot a:not(.knopf):hover { color: var(--weiss); text-decoration-color: var(--tinte); }
.rot :focus-visible { outline-color: var(--weiss); }
.rot .knopf--rahmen-hell { color: var(--auf-rot); border-color: var(--auf-rot); --niet: var(--auf-rot-neben); }
.rot .knopf--rahmen-hell:hover { background: var(--weiss); color: var(--tinte); }
.rot .knopf--rahmen-hell:hover::after { background: var(--rot); border-color: var(--rot); }

/* Einstieg: Fläche hinter dem Zollstock, markierte Worte */
.einstieg { position: relative; }
.einstieg-raster { position: relative; }
.einstieg-raster::before {
  content: ""; position: absolute; z-index: -1;
  top: calc(-1 * var(--einstieg-luft-oben)); bottom: -12px;
  left: calc(52% + 8px);
  right: calc(-1 * (100vw - min(var(--breite), 100vw - 2 * var(--rand))) / 2);
  background: var(--flaeche);
}
.einstieg { isolation: isolate; }
.markiert { position: relative; white-space: nowrap; }
.markiert::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .12em; background: var(--rot);
  transform-origin: left; transform: scaleX(var(--strich, 1)); transition: transform 1.1s var(--gleiten) .35s;
}
.js .markiert::after { --strich: 0; }
.js .geladen .markiert::after { --strich: 1; }

/* 10 cm · Zeit in Signalrot */
.gewinn .gewinn-text { color: var(--auf-rot-neben); }
.gewinn h2 { color: var(--auf-rot); }
.gewinn-satz { color: var(--auf-rot); font-size: clamp(2rem, 1.1rem + 3.2vw, 4.1rem); }
.gewinn-satz .wort { transition: opacity .35s; }
.gewinn-satz.zerlegt .wort { opacity: .38; }
.gewinn-satz.zerlegt .wort.an { opacity: 1; }
.gewinn .unterstrich { background: linear-gradient(var(--tinte), var(--tinte)) 0 92% / 100% .1em no-repeat; }

/* Glieder füllen sich beim Scrollen */
.schritt-glied {
  background:
    repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 8px) 100% 10px / 6px calc(100% - 10px) no-repeat,
    repeating-linear-gradient(180deg, var(--tinte) 0 1px, transparent 1px 40px) 100% 10px / 11px calc(100% - 10px) no-repeat,
    linear-gradient(var(--rot-hell), var(--rot-hell)) 0 0 / 100% var(--fuell) no-repeat,
    var(--weiss);
}
.schritt-glied b { color: var(--rot-dunkel); }

/* 20 cm · Beleg auf Fläche */
.beleg .kopf-raster p, .beleg .schritt > p:not(.vermerk) { color: var(--tinte-weich); }
.beleg .beleg-akte-innen { background: var(--weiss); }
.beleg-schluss { background: var(--skala-tinte); }

/* 30 cm · Beispiele: Zeilen leben */
.beispiel { position: relative; transition: background-color .35s; }
.beispiel::before {
  content: ""; position: absolute; left: calc(-1 * clamp(12px, 2vw, 28px)); top: 38px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--tinte); background: var(--weiss); box-shadow: inset 0 0 0 2.5px var(--weiss), inset 0 0 0 7px var(--tinte);
  transform: scale(0); transition: transform .5s var(--rasten), border-color .3s, box-shadow .3s;
}
.beispiel.sichtbar::before { transform: scale(1); }
.beispiel:hover { background-color: var(--flaeche); }
.beispiel:hover::before { border-color: var(--rot); box-shadow: inset 0 0 0 2.5px var(--weiss), inset 0 0 0 7px var(--rot); }
.beispiel:hover h3 { color: var(--rot-dunkel); }
.js .beispiel .vermerke li { clip-path: inset(0 100% 0 0); transition: clip-path .7s steps(26); }
.js .beispiel.sichtbar .vermerke li { clip-path: inset(0 0 0 0); }
.js .beispiel.sichtbar .vermerke li:nth-child(2) { transition-delay: .55s; }
.js .beispiel.sichtbar .vermerke li:nth-child(3) { transition-delay: 1.1s; }

/* 40 cm · Leistungen: Begleitung als roter Block */
.leistungen-liste li.leistung-begleitung {
  background: var(--rot); color: var(--auf-rot); border: 0 !important;
  margin-top: 26px; padding: 34px clamp(24px, 3vw, 40px) 38px calc(clamp(24px, 3vw, 40px) + 34px);
}
.leistungen-liste li.leistung-begleitung::before { left: clamp(24px, 3vw, 40px); top: 46px; border-color: var(--weiss); box-shadow: inset 0 0 0 2.5px var(--rot), inset 0 0 0 7px var(--weiss); }
.leistungen-liste li.leistung-begleitung p { color: var(--auf-rot-neben); }
.leistungen-liste li.leistung-begleitung h3 { font-size: calc(var(--h3-groesse) * 1.35); }

/* 50 cm · Datenschutz als dunkle Tafel über der Kante */
.software { padding-bottom: 0; overflow: visible; }
.software .riesenzahl { display: none; }
.software .datenschutz {
  background: var(--tinte); color: var(--hell);
  padding: clamp(32px, 4.5vw, 64px); margin-top: clamp(32px, 5vw, 72px);
  margin-bottom: calc(-1 * clamp(90px, 10vw, 150px)); z-index: 3;
}
.software .datenschutz p { color: var(--hell-grau); }
.software .datenschutz h2 { color: var(--weiss); }
.ablauf { padding-top: calc(var(--abschnitt-abstand) * .5 + clamp(90px, 10vw, 150px)); }

/* 60 cm · Ablauf: kostenlos hervorheben */

/* 80 cm · Über mich */
.portraet { isolation: isolate; }
.portraet picture::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 14%; top: 24%; bottom: 0; background: var(--flaeche);
}
.hervor { background: linear-gradient(transparent 58%, var(--rot-hell) 58%); color: inherit; padding: 0 .1em; }

/* 100 cm · Anfrage in Signalrot */
.anfrage-kopf p { color: var(--auf-rot-neben); }
.anfrage h2 { color: var(--auf-rot); }
.formular { position: relative; }

/* Fußzeile dunkel */
.fuss.dunkel { padding-top: 0; }
.fuss.dunkel .fuss-skala { background: var(--skala-hell); }
.fuss.dunkel .fuss-raster { color: var(--hell-grau); padding-top: 8px; }
.fuss.dunkel a { color: var(--hell); text-decoration-color: rgba(244, 242, 238, .35); }
.fuss.dunkel a:hover { color: var(--weiss); text-decoration-color: var(--rot); }

@media (max-width: 960px) {
  .einstieg-raster::before { left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); top: auto; height: calc(var(--buehne-hoehe, 520px) + 56px); bottom: -12px; }
  .leistungen-liste li.leistung-begleitung { margin-right: 0; }
  .riesenzahl { top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .riesenzahl { transform: none !important; }
  .gewinn-satz.zerlegt .wort { opacity: 1 !important; }
}
@media (max-width: 960px) {
  .beispiel { padding-left: 30px; }
  .beispiel::before { left: 0; top: 37px; }
}

/* Projektfotos, Kontaktlinks, Links im Formular */
.projekt-foto { margin: 0 0 22px; }
.projekt-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hell-linie); }
.projekt-foto figcaption { color: var(--hell-grau); font-size: .7rem; margin-top: 8px; }
.projekt-paar .projekt { padding-top: 0; background: none; }
.ueber-kontakt { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.formular a:not(.knopf) { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.formular a:not(.knopf):hover { color: var(--rot-dunkel); }
.rot .formular :focus-visible { outline-color: var(--rot); }

/* Kanalwahl im Formular */
.kanal { border: 0; margin: 0 0 22px; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanal legend { float: left; margin-right: 6px; color: var(--grau); font-size: .75rem; padding: 0; }
.kanal-wahl { position: relative; cursor: pointer; }
.kanal-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kanal-wahl span { display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: 0 16px; border: var(--leiste) solid var(--tinte); font-weight: 600; font-size: .95rem; transition: background-color .2s, color .2s; }
.kanal-wahl input:checked + span { background: var(--tinte); color: var(--weiss); }
.kanal-wahl input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }
.kanal-wahl:hover span { border-color: var(--rot); }
.kanal-hinweis { background: var(--rot-hell); padding: 12px 14px; font-size: .95rem; margin: -6px 0 24px; }
@media (max-width: 560px) {
  .kanal legend { float: none; width: 100%; margin-bottom: 8px; }
  .kanal-wahl { flex: 1 1 0; }
  .kanal-wahl span { width: 100%; justify-content: center; }
}

/* Prüfer-Befunde (Phase 6) */
/* 4: Riesenzahl im Ablauf unter die überhängende Datenschutz-Tafel setzen */
.ablauf .riesenzahl { top: calc(clamp(40px, 6vw, 96px) + clamp(90px, 10vw, 150px)); }
/* 2: Glieder im Vorgehen wachsen mit dem Text, mobil mit Fuge und Niete auf der Fuge */
.mini-zollstock li { height: auto; min-height: 4.8em; padding-bottom: 1em; }
@media (max-width: 720px) {
  .mini-zollstock li { flex: none; margin: 0; min-height: 0; padding: 1.5em 1em .8em 1.2em; }
  .mini-zollstock li + li { margin-top: 1.1em; }
  .mini-zollstock li::before { top: -.6em; }
  .mini-zollstock li:first-child::before { display: none; }
}
/* 7: Adressleiste mobil ohne Abschneiden, nur jede zweite Marke */
@media (max-width: 560px) {
  .adressleiste { overflow: visible; }
  .adressleiste ol { min-width: 0; grid-template-columns: repeat(4, 1fr); }
  .adressleiste a { font-size: .72rem; white-space: nowrap; padding-right: 6px; }
  .adressleiste b { font-size: .8rem; }
  .adressleiste li:last-child a { transform: none; text-align: left; align-items: flex-start; }
  .adressleiste li { display: none; }
  .adressleiste li:nth-child(1), .adressleiste li:nth-child(4), .adressleiste li:nth-child(7), .adressleiste li:nth-child(11) { display: block; }
}
/* 8: Messwert oben links im Film */
.film-vermerk-text { font-variant-numeric: tabular-nums; }

/* 30 cm · Beispiele: Motion Graphic je Ablauf */
.beispiel { grid-template-rows: auto 1fr; }
.beispiel h3 { grid-column: 1; grid-row: 1; }
.beispiel > p { grid-column: 2; grid-row: 1 / span 2; }
.beispiel .vermerke { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.beispiel-bild { grid-column: 1; grid-row: 2; margin: 16px 0 0; align-self: start; container-type: inline-size; }
@media (max-width: 960px) {
  .beispiel { grid-template-rows: none; }
  .beispiel h3, .beispiel > p, .beispiel .vermerke, .beispiel-bild { grid-column: 1; grid-row: auto; }
  .beispiel-bild { margin: 10px 0 8px; max-width: 520px; }
}

.mg {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; color: var(--tinte);
  border: var(--leiste) solid var(--tinte); background-color: var(--weiss);
  background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 10% 15%; background-position: -1px -1px;
  font: 400 clamp(9px, 3.7cqw, 18px) / 1.25 var(--f-text);
}
.beispiel:hover .mg { background-color: var(--flaeche); }
:where(.mg) p { margin: 0; padding: 0; max-width: none; }
.mg .ico { width: 1.05em; height: 1.05em; stroke-width: 2; }
.mg > * { position: absolute; }
.mg-karte { background: var(--weiss); border: var(--leiste) solid var(--tinte); padding: .55em .65em .65em; }
.mg-kopf { display: flex; align-items: center; gap: .4em; font: 600 .72em/1.2 var(--f-mono); letter-spacing: .01em; padding-bottom: .45em; border-bottom: 1px solid var(--linie); margin-bottom: .2em !important; }
.mg-kopf .mg-grau, .mg-kopf .mg-rot { margin-left: auto; }
.mg-grau { color: var(--grau); font-weight: 400; }
.mg-rot { color: var(--rot-dunkel); }
.mg-balken { display: block; height: .38em; background: var(--linie); margin-top: .5em; }
.mg-balken.kurz { width: 58%; }
.mg-balken.dick { height: .8em; width: 80%; background: var(--tinte); opacity: .85; }
.mg-zeit { left: 5%; top: 5%; font: 600 .66em/1 var(--f-mono); color: var(--rot-dunkel); }
.mg-marke { display: inline-flex; align-items: center; gap: .35em; padding: .42em .6em; font: 600 .66em/1 var(--f-mono); background: var(--rot); color: var(--weiss); white-space: nowrap; }
.mg-marke--tinte { background: var(--tinte); }
.mg-marke--umbruch { white-space: normal; line-height: 1.25; }
.mg-blase { padding: .45em .65em; font-size: .7em; line-height: 1.3; background: var(--weiss); border: var(--leiste) solid var(--tinte); border-radius: .9em .9em .9em .2em; }
.mg-blase--raus { background: var(--tinte); color: var(--weiss); border-radius: .9em .9em .2em .9em; }
.mg-blase .ico { vertical-align: -.2em; }
.mg > .mg-blase { display: flex; align-items: center; gap: .45em; }
.mg-glocke .ico, .mg > .mg-blase .ico { flex: none; }
.mg-ok { color: inherit; }
.mg-fotos { display: flex; gap: .35em; }
.mg-foto { display: block; width: 2.1em; aspect-ratio: 1; border: 1px solid var(--tinte);
  background: radial-gradient(circle at 70% 30%, var(--rot) 0 12%, transparent 13%), linear-gradient(160deg, transparent 58%, var(--grau) 59%), var(--linie); }

/* Linien und Pfeile */
.mg-linie { height: var(--leiste); background: var(--tinte); transform-origin: left center; }
.mg-linie--pfeil::after { content: ""; position: absolute; right: -1px; top: 50%; width: .45em; height: .45em; border: solid var(--tinte); border-width: var(--leiste) var(--leiste) 0 0; transform: translateY(-50%) rotate(45deg); }
.mg-linie--strich { background: repeating-linear-gradient(90deg, var(--tinte) 0 5px, transparent 5px 9px); }
.mg-punkt { position: absolute; left: 0; top: 50%; width: .55em; height: .55em; margin: -.275em 0 0 -.275em; border-radius: 50%; background: var(--rot); opacity: 0; }
.mg-linie.an .mg-punkt { animation: mg-wandern 1.6s .5s var(--gleiten) infinite; }
@keyframes mg-wandern { 0% { left: 0; opacity: 1; } 85% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Angebot */
.mg-pos { display: flex; align-items: center; gap: .5em; margin-top: .48em !important; }
.mg-pos i { display: block; height: .36em; width: 55%; background: var(--linie); }
.mg-pos b { display: block; height: .36em; width: 18%; margin-left: auto; background: var(--grau); }
.mg-pos--summe { border-top: var(--leiste) solid var(--tinte); padding-top: .4em !important; font: 600 .62em/1 var(--f-mono); }
.mg-pos--summe b { height: .55em; width: 26%; background: var(--tinte); }

/* Termine */
.mg-kal { display: grid; grid-template-columns: 1.8em repeat(5, 1fr); grid-template-rows: 1.5em repeat(4, 1fr); background: var(--weiss); border: var(--leiste) solid var(--tinte); }
.mg-kal > span { border-left: 1px solid var(--linie); border-top: 1px solid var(--linie); }
.mg-kal-tag { grid-row: 1; display: grid; place-items: center; font: 600 .6em/1 var(--f-mono); border-top: 0 !important; }
.mg-kal-std { grid-column: 1; font: 400 .55em/1 var(--f-mono); color: var(--grau); padding: .35em 0 0 .3em; border-left: 0 !important; }
.mg-kal-belegt { background: repeating-linear-gradient(135deg, var(--linie) 0 3px, transparent 3px 6px); margin: 2px; }
.mg-kal-neu, .mg-kal-vorschlag { margin: 2px; display: grid; place-items: center; font: 600 .55em/1 var(--f-mono); overflow: hidden; }
.mg-kal-vorschlag { font-size: .5em; }
.mg-kal-neu { background: var(--rot); color: var(--weiss); border: 0 !important; }
.mg-kal-vorschlag { border: 1.5px dashed var(--rot) !important; color: var(--rot-dunkel); background: var(--rot-hell); }
.mg-glocke.an .ico { animation: mg-wackeln .7s .25s 2; transform-origin: 50% 10%; }
@keyframes mg-wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }

/* Baustelle */
.mg-handy { background: var(--weiss); border: calc(var(--leiste) * 1.6) solid var(--tinte); border-radius: 1em; padding: .9em .55em .5em; }
.mg-handy::before { content: ""; position: absolute; left: 50%; top: .35em; width: 28%; height: .25em; margin-left: -14%; border-radius: 1em; background: var(--tinte); }
.mg-fotos--raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; margin: .45em 0 .3em; }
.mg-fotos--raster .mg-foto { width: 100%; }
.mg-feld { display: flex; align-items: center; justify-content: space-between; font: 400 .6em/1 var(--f-mono); padding: .5em 0 .1em !important; border-bottom: 1px solid var(--linie); }
.mg-feld b { font-weight: 700; }
.mg-feld .ico { color: var(--rot); }
.mg-senden { position: absolute; left: .55em; right: .55em; bottom: .6em; display: flex; align-items: center; justify-content: center; gap: .3em; padding: .45em 0; background: var(--rot); color: var(--weiss); font: 600 .58em/1 var(--f-mono); }
.mg-liste { display: flex; align-items: center; gap: .35em; font: 400 .62em/1 var(--f-mono); padding-top: .65em !important; }

/* Postfach */
.mg-mail { display: flex; align-items: center; gap: .45em; padding: .48em 0 .42em !important; border-bottom: 1px solid var(--linie); }
.mg-mail .ico { color: var(--grau); }
.mg-mail .mg-balken { margin: 0; flex: 1; }
.mg-chip { font: 600 .55em/1 var(--f-mono); padding: .35em .5em; background: var(--tinte); color: var(--weiss); white-space: nowrap; }
.mg-chip.grau { background: var(--grau); }
.mg-chip.rot { background: var(--rot); }
.mg-datei { display: flex; align-items: center; gap: .4em; padding: .45em .55em; font: 600 .6em/1 var(--f-mono); background: var(--weiss); border: var(--leiste) solid var(--tinte); }
.mg-datei--ziel { background: var(--tinte); color: var(--weiss); }

/* Kundenservice */
.mg-browser { background: var(--weiss); border: var(--leiste) solid var(--tinte); }
.mg-browser-leiste { display: flex; align-items: center; gap: .3em; padding: .4em .55em !important; border-bottom: var(--leiste) solid var(--tinte); font: 400 .55em/1 var(--f-mono); color: var(--grau); }
.mg-browser-leiste i { width: .6em; height: .6em; border-radius: 50%; border: 1px solid var(--grau); }
.mg-browser-leiste span { margin-left: .6em; }
.mg-seite { position: absolute; left: 5%; top: 24%; width: 36%; }
.mg-knopf-attrappe { display: block; width: 50%; height: 1.1em; margin-top: .9em; background: var(--rot); }
.mg-chat { position: absolute; right: 4%; top: 17%; bottom: 6%; width: 52%; padding: .45em .5em; border: var(--leiste) solid var(--tinte); background: var(--weiss); display: flex; flex-direction: column; gap: .4em; box-shadow: .35em .35em 0 var(--linie); }
.mg-chat .mg-blase { position: static; font-size: .62em; max-width: 92%; }
.mg-blase--frage { align-self: flex-end; border-radius: .9em .9em .2em .9em; }
.mg-chat .mg-blase--raus { align-self: flex-start; border-radius: .9em .9em .9em .2em; }
.mg-tippt { display: flex; gap: .25em; padding: .1em .2em !important; align-self: flex-start; }
.mg-tippt i { width: .4em; height: .4em; border-radius: 50%; background: var(--grau); animation: mg-tippen 1s infinite; }
.mg-tippt i:nth-child(2) { animation-delay: .15s; } .mg-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes mg-tippen { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.25em); } }
.mg-marke--fluss { position: static; align-self: flex-start; margin-top: auto !important; }

/* Bewertung */
.mg-knoten { top: 24%; width: 0; }
.mg-gelenk { position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--weiss); border: var(--leiste) solid var(--tinte); box-shadow: inset 0 0 0 .18em var(--weiss), inset 0 0 0 .5em var(--rot); }
.mg-knoten p { position: absolute; top: .9em; left: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; font: 400 .58em/1.35 var(--f-mono); }
.mg-knoten:first-of-type p { transform: translateX(-1.1em); text-align: left; }
.mg-knoten--rechts p { transform: translateX(calc(-100% + 1.1em)); text-align: right; }
.mg-knoten b { display: block; font-weight: 700; color: var(--rot-dunkel); }
.mg-bewertung { text-align: center; padding: .6em .6em .7em; }
.mg-frage { font-size: .66em; }
.mg-sterne { display: flex; justify-content: center; gap: .3em; margin-top: .45em !important; }
.mg-stern .ico { width: 1.35em; height: 1.35em; fill: var(--rot); stroke: var(--rot); }

/* Beispiel Rechnung per Sprachnotiz: Sprachnachricht in Signalrot mit Wellenform */
.mg-sprach { display: flex; align-items: center; gap: .5em; padding: .5em .6em; background: var(--rot); color: var(--weiss); border: var(--leiste) solid var(--rot); }
.mg-sprach .ico { flex: none; width: 1.5em; height: 1.5em; fill: currentColor; stroke: none; }
.mg-wellen { display: flex; align-items: center; gap: .16em; flex: 1; height: 1.8em; }
.mg-wellen i { display: block; flex: 1; min-width: 2px; background: currentColor; }
.mg-sprach b { flex: none; font: 600 .6em/1 var(--f-mono); }
.mg-sprach.an .mg-wellen i { animation: mg-welle .9s ease-in-out infinite alternate; }
.mg-sprach.an .mg-wellen i:nth-child(3n) { animation-delay: .15s; }
.mg-sprach.an .mg-wellen i:nth-child(3n+1) { animation-delay: .3s; }
@keyframes mg-welle { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.beispiel > p .textlink { margin-top: .8em; }

/* Ablauf: Schritte nach data-s */
.mg [data-s] { opacity: 0; transform: translateY(.7em); transition: opacity .35s ease, transform .55s var(--rasten); }
.mg [data-art="pop"] { transform: scale(.4); }
.mg [data-art="fallen"] { transform: translateY(-140%); }
.mg [data-art="links"] { transform: translateX(-1.6em); }
.mg [data-art="wachsen"] { opacity: 1; transform: scaleX(0); transition: transform .7s var(--gleiten); }
.mg [data-s].an { opacity: 1; transform: none; }
.mg.leert [data-s] { transition-duration: .4s; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .mg [data-s] { transition: none !important; }
  .mg .mg-punkt, .mg .mg-tippt i, .mg-glocke .ico, .mg-wellen i { animation: none !important; }
}