/* eigen: farben umgestellt */
/* ==========================================================================
   HH Kontur – Stylesheet, Fassung 12D (Style-Sheet „12D · Outfit“: Titel Outfit 600, Text Manrope 400)
   Ein Bogen Papier (Grund #FAFAF7) liegt auf dem Schreibtisch (Fläche #ECEDEA).
   Darauf Fenster mit Dateinamen; der Editor ist das einzige dunkle Objekt.
   Apricot nur für Knöpfe, den Cursor im Editor, Hennings Zeiger, aktive Zustände und Diff-Markierungen.
   ========================================================================== */

@font-face { font-family: 'Outfit'; src: url('../fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Designstudie 12D */
  --grund: #FFFFFF;
  --kohle: #0B0D12;
  --akzent: #2557D6;
  --begleit: #5A6170;
  --flaeche: #F6F7F9;

  /* Abstufungen */
  --weiss: #FFFFFF;
  --leiste-hell: #F7F8FA;
  --stein: #D0D5DD;
  --begleit-tief: #434A57;
  --kohle-hoch: #1A1E27;
  --kohle-tief: #07080B;
  --akzent-tief: #1D46B5;
  --akzent-linie: #2557D6;
  --fehler: #A23B2A;
  --linie: rgba(16, 24, 40, .12);
  --linie-hell: rgba(255, 255, 255, .14);

  --kopf: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --text: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --rahmen: 1240px;
  --rand: clamp(20px, 5vw, 72px);
  --r-fenster: 10px;
  --r-knopf: 4px;
  --r-feld: 6px;
  --r-blatt: clamp(18px, 2vw, 28px);
  --leiste: 40px;

  --aus: cubic-bezier(.16, 1, .3, 1);
  --feder: cubic-bezier(.3, 1.14, .45, 1);
  --weich: cubic-bezier(.4, 0, .2, 1);

  --h1: clamp(2.4rem, min(1.15rem + 3.9vw, 8.2svh), 4.9rem);
  --h2: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  --h3: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --lauf: clamp(1rem, .96rem + .16vw, 1.0625rem);
  --abstand: clamp(5.5rem, 10vw, 9.5rem);

  --schatten: 0 0 0 1px rgba(16, 24, 40, .07), 0 44px 80px -46px rgba(16, 24, 40, .32), 0 16px 32px -22px rgba(16, 24, 40, .16);
  --schatten-kohle: 0 0 0 1px rgba(16, 24, 40, .3), 0 44px 80px -40px rgba(16, 24, 40, .5), 0 18px 34px -22px rgba(16, 24, 40, .3);
  --schatten-hoch: 0 0 0 1px rgba(16, 24, 40, .08), 0 58px 94px -50px rgba(16, 24, 40, .36), 0 22px 40px -24px rgba(16, 24, 40, .2);
}

/* --------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; color-scheme: light;
  background: var(--flaeche); scrollbar-color: var(--stein) var(--flaeche); accent-color: var(--kohle);
}
body {
  margin: 0; background: var(--flaeche); color: var(--kohle);
  font: 400 var(--lauf) / 1.65 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; font-feature-settings: 'kern';
}
body.menue-auf { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--kopf); font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -.025em; }
h3 { font-size: var(--h3); line-height: 1.22; letter-spacing: -.012em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
figure { margin: 0; }
strong, b { font-weight: 600; }
::selection { background: var(--akzent); color: var(--kohle); }
:focus-visible { outline: 2px solid var(--kohle); outline-offset: 3px; border-radius: 3px; }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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: fixed; left: 16px; top: -80px; z-index: 60; padding: .7em 1.1em; border-radius: var(--r-knopf);
  background: var(--akzent); color: var(--kohle); font-weight: 600; text-decoration: none; transition: top .25s var(--aus);
}
.skip:focus { top: 16px; }
.rahmen { width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; }

/* Symbole: eine Strichstärke, runde Enden */
.knopf svg, .textlink svg, .leiste svg, .frage svg, .wege svg, .nach-oben svg, .aktion-hinweis svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}


/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  --k-grund: var(--akzent); --k-schrift: var(--kohle);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 52px; padding: 0 20px 0 22px; border: 0; border-radius: var(--r-knopf);
  background-color: var(--k-grund); color: var(--k-schrift);
  font: 600 .9375rem / 1.2 var(--text); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 12px 24px -16px rgba(16, 24, 40, .45);
  transition: background-color .3s var(--weich), transform .35s var(--aus), box-shadow .3s var(--weich);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.knopf-pfeil { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; transition: translate .45s var(--aus); }
.knopf-pfeil svg { width: 16px; height: 16px; stroke-width: 1.9; }
.knopf:hover { --k-grund: var(--akzent-tief); }
.knopf:hover .knopf-pfeil { translate: 2px -2px; }
.knopf:active { transform: scale(.98); }
.knopf:disabled, .knopf[aria-busy='true'] { cursor: progress; opacity: .7; }
.knopf-tinte { --k-grund: var(--kohle); --k-schrift: var(--grund); }
.knopf-tinte:hover { --k-grund: #1F2430; }
.knopf-linie { --k-grund: transparent; --k-schrift: var(--kohle); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .32); }
.knopf-linie:hover { --k-grund: rgba(16, 24, 40, .045); }
.knopf-klein { min-height: 42px; padding: 0 15px 0 16px; gap: 12px; font-size: .875rem; }
.knopf-breit { width: 100%; }

.textlink {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  transition: text-decoration-color .25s var(--weich);
}
.textlink:hover { text-decoration-color: currentColor; }
.textlink svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- Fenster */
.fenster {
  position: relative; overflow: hidden; border-radius: var(--r-fenster);
  background: var(--weiss); color: var(--kohle); box-shadow: var(--schatten);
}
.leiste {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--leiste); padding: 7px 14px;
  background: var(--leiste-hell); color: var(--begleit-tief); box-shadow: inset 0 -1px 0 var(--linie);
}
.punkte { display: flex; gap: 7px; flex: none; }
.punkte i { width: 10px; height: 10px; border-radius: 50%; background: var(--stein); }
.datei, .adresse, .leiste-info, .reiter, .gespeichert { font: 400 .75rem / 1 var(--mono); letter-spacing: 0; white-space: nowrap; }
.datei { color: var(--kohle); }
.leiste-info { margin-left: auto; color: var(--begleit-tief); }
.adresse {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 300px; margin-inline: auto;
  padding: 7px 12px; border-radius: 6px; background: rgba(16, 24, 40, .05); color: var(--begleit-tief); overflow: hidden;
}
.adresse svg { width: 13px; height: 13px; flex: none; stroke-width: 2; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; pointer-events: none;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(var(--rand), env(safe-area-inset-right, 0px)) 0 max(var(--rand), env(safe-area-inset-left, 0px));
  transition: transform .55s var(--aus);
}
.kopf.versteckt { transform: translateY(-130%); }
.kopf-insel {
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 24px;
  max-width: var(--rahmen); height: 62px; margin-inline: auto; padding: 0 9px 0 22px; border-radius: 12px;
}
.kopf-insel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08), 0 14px 32px -20px rgba(16, 24, 40, .3);
}
.marke { display: block; flex: none; text-decoration: none; border-radius: 4px; }
.logo {
  display: block; width: 132px; aspect-ratio: 1982 / 353; background: var(--kohle);
  -webkit-mask: url('../img/logo/hh-kontur-logo.png') center / contain no-repeat;
  mask: url('../img/logo/hh-kontur-logo.png') center / contain no-repeat;
}
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; }
.nav a {
  position: relative; display: block; padding: 9px 13px; border-radius: 6px;
  font-size: .875rem; font-weight: 500; color: var(--begleit-tief); text-decoration: none;
  transition: color .25s var(--weich), background-color .25s var(--weich);
}
.nav a:hover { color: var(--kohle); background: rgba(16, 24, 40, .05); }
.nav a[aria-current] { color: var(--kohle); }
.nav a[aria-current]::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--akzent-linie);
}
.menue-knopf {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 12px; margin-left: auto;
  border: 0; border-radius: 8px; background: rgba(16, 24, 40, .06); color: var(--kohle);
  font-size: .9375rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menue-striche { position: relative; width: 18px; height: 10px; }
.menue-striche i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--aus), top .45s var(--aus); }
.menue-striche i:first-child { top: 0; }
.menue-striche i:last-child { top: 8px; }
.kopf.offen .menue-striche i:first-child { top: 4px; transform: rotate(45deg); }
.kopf.offen .menue-striche i:last-child { top: 4px; transform: rotate(-45deg); }

.menue {
  position: fixed; inset: 0; z-index: 38; overflow-y: auto;
  padding: calc(108px + env(safe-area-inset-top, 0px)) var(--rand) calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--grund); opacity: 0; transition: opacity .35s var(--weich);
}
.menue.offen { opacity: 1; }
.menue ul { list-style: none; }
.menue li a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--linie);
  font: 600 clamp(1.875rem, 7vw, 2.5rem) / 1.1 var(--kopf); letter-spacing: -.02em; color: var(--kohle); text-decoration: none;
  opacity: 0; translate: 0 18px; transition: opacity .6s var(--aus), translate .7s var(--aus);
}
.menue.offen li a { opacity: 1; translate: 0 0; }
.menue.offen li:nth-child(2) a { transition-delay: .04s; }
.menue.offen li:nth-child(3) a { transition-delay: .08s; }
.menue.offen li:nth-child(4) a { transition-delay: .12s; }
.menue.offen li:nth-child(5) a { transition-delay: .16s; }
.menue.offen li:nth-child(6) a { transition-delay: .2s; }
.menue .knopf { margin-top: 2rem; }
.menue-telefon { margin-top: 1.25rem; color: var(--begleit); }
.menue-telefon a { color: var(--kohle); font-weight: 600; }

/* ------------------------------------------------------------ Einstieg */
.held { position: relative; z-index: 0; background: var(--flaeche); }
.held-buehne {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 3.4vw, 4rem); align-items: center; min-height: 100vh; min-height: 100svh;
  padding: 128px max(var(--rand), calc((100% - var(--rahmen)) / 2)) 64px;
  transform-origin: 50% 35%;
}
/* Weiches Licht im Winkel des Zeichens (Steigung 0,4) */
.held-buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(158.2deg, transparent 28%, rgba(255, 255, 255, .42) 43%, rgba(255, 255, 255, .5) 50%, transparent 66%),
    radial-gradient(65% 60% at 76% 46%, rgba(255, 255, 255, .6), transparent 72%);
}
.held-text { position: relative; z-index: 2; }
.held-titel { font-size: var(--h1); line-height: 1.1; letter-spacing: -.03em; color: var(--kohle); }
.held-titel .zeile { display: block; }
/* „Ich mache sie sichtbar.“ tritt aus dem Blassen hervor, während die Seite entsteht */
.held-titel .licht {
  margin-top: .7em; font-size: .6em; font-weight: 600; line-height: 1.12; letter-spacing: -.024em;
  color: var(--begleit); color: color-mix(in oklab, var(--begleit) calc(var(--licht, 1) * 100%), #C4CAD4);
}
/* Farbmoment: Ist der Satz ganz da, springt der Schlusspunkt in Apricot auf und zieht sich nach links zu einem Apricot-Schild
   hinter dem Satz auf, wie der orange Punkt im Film. Das Skript setzt dafür einmal .sichtbar am Titel. */
.held-titel .satz { position: relative; display: inline-block; isolation: isolate; padding: .07em .34em .11em; margin-left: -.34em; }
.held-titel .satz::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: .22em; background: var(--akzent);
  clip-path: inset(0 0 0 100% round .22em);
}
.held-titel .punkt { position: relative; display: inline-block; width: .17em; height: .17em; margin-left: .05em; border-radius: 50%; background: currentColor; vertical-align: .01em; }
.held-titel.sichtbar .licht { color: var(--kohle); transition: color .45s var(--aus) .2s; }
.held-titel.sichtbar .punkt { background: var(--akzent); animation: punkt-auf .55s var(--feder) both, punkt-in-schild .2s linear .9s forwards; }
.held-titel.sichtbar .satz::before { animation: schild-auf .62s cubic-bezier(.7, 0, .2, 1) .42s forwards; }
/* Ohne Bewegung (oder ohne Skript) steht der Endstand gleich da */
html:not(.bewegung) .held-titel .licht { color: var(--kohle); }
html:not(.bewegung) .held-titel .satz::before { clip-path: none; }
html:not(.bewegung) .held-titel .punkt { background: var(--kohle); }
@keyframes punkt-auf { 0% { scale: .3; } 55% { scale: 1.9; } 100% { scale: 1; } }
@keyframes schild-auf { to { clip-path: inset(0 0 0 0 round .22em); } }
@keyframes punkt-in-schild { to { background: var(--kohle); } }
/* Flyer-Seite: Hinweis auf das Angebot über dem Titel, führt zur Preisliste */
.aktion-hinweis {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: clamp(1.1rem, 2.6svh, 1.75rem); padding: .55rem .9rem .55rem .8rem;
  border-radius: 99px; background: rgb(from var(--akzent) r g b / .38); color: var(--kohle); font-size: .9375rem; line-height: 1.3; text-decoration: none;
  transition: background-color .25s var(--weich);
}
.aktion-hinweis:hover { background: rgb(from var(--akzent) r g b / .62); }
.aktion-hinweis i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); }
.aktion-hinweis b { font-weight: 700; }
.aktion-hinweis svg { flex: none; width: 16px; height: 16px; transition: translate .3s var(--aus); }
.aktion-hinweis:hover svg { translate: 3px 0; }
.formular-aktion { display: flex; align-items: center; gap: .55rem; margin: -.6rem 0 1.6rem; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--kohle); }
.formular-aktion i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); }
.held-lead { margin-top: clamp(1.25rem, 3.4svh, 2rem); max-width: 31em; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; color: var(--kohle); }
.held-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: clamp(1.5rem, 3.8svh, 2.25rem); }

/* Szene: Browser mit Kundenseite, davor der Editor, später das Handy mit einer neuen Anfrage */
.szene { position: relative; height: min(660px, calc(100svh - 176px)); min-height: 420px; perspective: 1600px; }
.browser-demo {
  position: absolute; top: 0; right: 0; width: 93%; height: 72%; container-type: inline-size;
  box-shadow: var(--schatten);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-origin: 62% 50%;
  will-change: transform; transition: translate 1s var(--aus), scale 1s var(--aus);
}
.demo { display: flex; flex-direction: column; height: calc(100% - var(--leiste)); padding: 4.4cqi 5.4cqi 3.2cqi; }
.d-kopf { display: flex; align-items: center; gap: 3cqi; padding-bottom: 2.4cqi; border-bottom: 1px solid transparent; }
.d-marke { font: 600 2.5cqi / 1 var(--kopf); letter-spacing: -.015em; min-width: 1px; min-height: 1em; }
.d-links { display: flex; gap: 3cqi; margin-left: auto; font-size: 1.8cqi; font-weight: 500; color: var(--begleit); }
.d-burger { display: none; }
.d-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 4.6cqi; align-items: start; margin-top: 5cqi; }
.d-titel { min-height: 2.1em; font: 600 5.4cqi / 1.06 var(--kopf); letter-spacing: -.026em; }
.d-sub { min-height: 1.5em; margin-top: 1.8cqi; font-size: 2.15cqi; line-height: 1.45; color: var(--begleit); }
.d-knoepfe { display: flex; gap: 1.6cqi; margin-top: 4cqi; }
.d-knopf {
  position: relative; padding: 1.35cqi 2.6cqi; border-radius: .6cqi; font-size: 1.85cqi; font-weight: 600; line-height: 1.2;
  background: var(--kohle); color: var(--grund); transition: background-color .25s var(--weich), color .25s var(--weich);
}
.d-knopf.linie { background: transparent; color: var(--kohle); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .3); }
.d-knopf.gedrueckt { background: var(--akzent); color: var(--kohle); }
.d-knopf.gedrueckt::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--akzent-linie);
  animation: welle .9s var(--aus) forwards; pointer-events: none;
}
@keyframes welle { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.5; } }
.d-zeilen { margin-top: 4cqi; }
.d-zeilen i { display: block; width: 92%; height: 1.1cqi; margin-top: 1.5cqi; border-radius: 1cqi; background: currentColor; opacity: .14; }
.d-zeilen i:nth-child(2) { width: 84%; }
.d-zeilen i.kurz { width: 56%; }
.d-bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3.25; border-radius: 1cqi; background: var(--flaeche); }
.d-bild svg { width: 100%; height: 100%; }
.d-fuss { display: flex; gap: 3.4cqi; margin-top: auto; padding-top: 2.2cqi; border-top: 1px solid var(--linie); font-size: 1.6cqi; color: var(--begleit); }
.zeiger { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; opacity: 0; pointer-events: none; will-change: transform; }
.zeiger svg, .start-zeiger svg { width: 17px; height: 25px; overflow: visible; fill: var(--kohle); stroke: var(--weiss); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .35)); }
.zeiger svg { transition: scale .18s var(--weich); transform-origin: 6% 4%; }
/* Klick sichtbar machen: ein Apricot-Ring breitet sich an der Pfeilspitze aus */
.klick-ring { position: absolute; left: 1px; top: 1px; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid var(--akzent); border-radius: 50%; opacity: 0; pointer-events: none; }
.zeiger.drueckt .klick-ring { animation: klick-ring .5s var(--aus); }
@keyframes klick-ring { 0% { opacity: .95; scale: .2; } 100% { opacity: 0; scale: 1.3; } }
.zeiger.drueckt svg { scale: .84; }
.glanz {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .5) 50%, transparent 64%);
}
.browser-demo.fertig .glanz { animation: glanz 1.3s var(--aus) forwards; }
@keyframes glanz { to { transform: translateX(120%); } }

.editor {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: clamp(330px, 66%, 500px); height: 46%;
  background: var(--kohle); color: var(--grund); box-shadow: var(--schatten-kohle);
  clip-path: inset(-150px round var(--r-fenster)); transition: clip-path .8s var(--aus), translate .8s var(--aus), opacity .5s var(--aus);
}
.editor .leiste { background: var(--kohle-hoch); color: #B7BAB5; padding: 9px 12px 0 14px; box-shadow: none; }
.editor .punkte i { background: #5E6266; }
.reiter {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; padding: 9px 12px 10px;
  border-radius: 6px 6px 0 0; background: var(--kohle); color: var(--grund);
}
.reiter-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); transition: scale .4s var(--feder); }
.gespeichert { display: flex; align-items: center; gap: 6px; margin-left: 4px; padding-bottom: 9px; color: #B7BAB5; opacity: 0; translate: 0 4px; transition: opacity .5s var(--aus), translate .5s var(--aus); }
.gespeichert svg { width: 14px; height: 14px; stroke: var(--akzent); stroke-width: 2.2; }
.szene.gesichert .gespeichert { opacity: 1; translate: 0 0; }
.szene.gesichert .reiter-punkt { scale: 0; }

.code-rahmen {
  --code-gr: clamp(11px, .42vw + 6.4px, 12.5px); --zh: calc(var(--code-gr) * 1.8); --rinne: 52px;
  position: relative; height: calc(100% - var(--leiste)); overflow: hidden; padding: 14px 0;
  font: 400 var(--code-gr) / var(--zh) var(--mono);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.code-rahmen::before {
  content: ''; position: absolute; left: 0; right: 0; height: var(--zh); pointer-events: none;
  top: calc(14px + (var(--cy, 12) - var(--roll, 0)) * var(--zh)); background: rgba(255, 255, 255, .05);
  transition: top .14s var(--weich);
}
.code { position: relative; margin: 0; font: inherit; white-space: normal; transform: translateY(calc(var(--roll, 0) * var(--zh) * -1)); transition: transform .5s var(--aus); }
.code code { display: block; font: inherit; }
.z { display: block; position: relative; height: var(--zh); padding-left: var(--rinne); padding-right: 16px; white-space: pre; color: var(--grund); }
.z::before { content: attr(data-z); position: absolute; left: 0; width: calc(var(--rinne) - 22px); text-align: right; color: #6B6F72; transition: color .2s, opacity .2s; }
.z.jetzt::before { color: #D6D8D3; }
.code .k { color: #9A9EA1; }
.code .p { color: #8B9094; }
.code .t { color: #D6D8D3; }
.code .a { color: #B7BAB5; }
.code .s { color: var(--akzent); }
.code .x { color: var(--grund); }
.caret {
  position: absolute; z-index: 1; width: 2px; height: calc(var(--zh) - 7px); border-radius: 1px; background: var(--akzent);
  font: 400 var(--code-gr) / 1 var(--mono);
  left: calc(var(--rinne) + var(--cx, 38) * 1ch); top: calc(14px + 3.5px + (var(--cy, 12) - var(--roll, 0)) * var(--zh));
  animation: blinken 1.05s steps(1) infinite;
}
.code-rahmen.tippt .caret { animation: none; }
@keyframes blinken { 50% { opacity: 0; } }

/* Das Handy mit der fertigen Seite in Handy-Form und die neue Anfrage */
/* Gerät: ein unsichtbarer Rahmen trägt Handy und Mitteilung nebeneinander */
.demo-geraet {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: 29%; aspect-ratio: 9 / 18.6; container-type: inline-size;
  opacity: 0; translate: 0 56px; scale: .96; transition: opacity .6s var(--aus), translate 1s var(--feder), scale 1s var(--feder);
}
.demo-handy {
  position: absolute; inset: 0; padding: 3.8%; container-type: inline-size;
  border-radius: 16% / 7.8%; background: var(--kohle);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .25), inset 0 0 0 1.5px #45484B, 0 50px 80px -40px rgba(16, 24, 40, .55), 0 18px 30px -18px rgba(16, 24, 40, .35);
}
.demo-handy::before {
  content: ''; position: absolute; top: 2.6%; left: 50%; z-index: 2; width: 25%; height: 2.1%; translate: -50% 0;
  border-radius: 99px; background: var(--kohle);
}
.demo-handy-schirm { position: relative; height: 100%; overflow: hidden; border-radius: 13.2% / 6.1%; background: var(--weiss); }
.demo-handy .demo { position: relative; height: 100%; padding: 21cqi 7cqi 6cqi; }
/* Statusleiste oben im Handy: darunter ist Platz, in den die neue Anfrage fällt, ohne die Überschrift zu verdecken */
.d-status { display: none; }
.demo-handy .d-status {
  position: absolute; left: 8cqi; right: 8cqi; top: 4.4cqi; display: flex; align-items: center; justify-content: space-between;
  font: 600 3.6cqi / 1 var(--text); color: var(--kohle); font-variant-numeric: tabular-nums;
}
.d-akku { position: relative; width: 6.4cqi; height: 3.1cqi; border: .5cqi solid currentColor; border-radius: 1cqi; opacity: .85; }
.d-akku::after { content: ''; position: absolute; left: .45cqi; top: .45cqi; bottom: .45cqi; width: 58%; border-radius: .4cqi; background: currentColor; }
.demo-handy .d-kopf { border-bottom-color: var(--linie); }
.demo-handy .d-marke { font-size: 5.6cqi; }
.demo-handy .d-burger {
  display: block; width: 6.4cqi; height: 4.4cqi; margin-left: auto;
  background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.demo-handy .d-held { grid-template-columns: minmax(0, 1fr); gap: 6cqi; margin-top: 7cqi; }
.demo-handy .d-titel { min-height: 0; font-size: 10.5cqi; }
.demo-handy .d-sub { font-size: 4.6cqi; }
.demo-handy .d-knoepfe { gap: 3cqi; margin-top: 6cqi; }
.demo-handy .d-knopf { padding: 2.6cqi 4.6cqi; border-radius: 1.2cqi; font-size: 4.2cqi; }
.demo-handy .d-bild { aspect-ratio: 4 / 3; border-radius: 2cqi; }
.demo-handy .d-zeilen { margin-top: 0; }
.demo-handy .d-zeilen i { height: 2.4cqi; margin-top: 3.2cqi; }
.demo-handy .d-fuss { gap: 5cqi; font-size: 3.6cqi; }
.mitteilung {
  position: absolute; left: 7%; right: 7%; top: 6.3%; z-index: 4; display: grid; grid-template-columns: 11.5cqi minmax(0, 1fr);
  gap: 3.4cqi; align-items: center; padding: 3.2cqi 3.6cqi; border-radius: 5.6cqi; background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 14px 26px -12px rgba(16, 24, 40, .45);
  opacity: 0; translate: 0 -10px; scale: .94; transform-origin: 50% 0;
  transition: opacity .5s var(--aus), translate .8s var(--feder), scale .8s var(--feder);
}
.mt-app { display: grid; place-items: center; width: 11.5cqi; height: 11.5cqi; border-radius: 3cqi; background: var(--akzent); color: var(--kohle); }
.mt-app svg { width: 6.4cqi; height: 6.4cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2cqi; row-gap: .8cqi; align-items: baseline; min-width: 0; line-height: 1.2; }
.mt-text b { overflow: hidden; font-size: 5.8cqi; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mt-zeit { font-size: 4.6cqi; color: var(--begleit); }
.mt-von { grid-column: 1 / -1; overflow: hidden; font-size: 5.2cqi; color: var(--begleit-tief); white-space: nowrap; text-overflow: ellipsis; }

/* Bauzustände: nur mit Bewegung, sonst steht alles fertig da */
.bewegung .szene .z { clip-path: inset(0 calc(100% - var(--rinne) - var(--n, 99) * 1ch) 0 0); }
.bewegung .szene .z:not(.an):not(.jetzt)::before { opacity: 0; }
.bewegung .browser-demo .d-kopf { border-bottom-color: transparent; transition: border-color .5s var(--weich); }
.bewegung .browser-demo .d-kopf.da { border-bottom-color: var(--linie); }
.bewegung .browser-demo .d-links > span { opacity: 0; translate: 0 5px; transition: opacity .45s var(--aus), translate .6s var(--aus); }
.bewegung .browser-demo .d-links > span.da { opacity: 1; translate: 0 0; }
.bewegung .browser-demo .d-knoepfe, .bewegung .browser-demo .d-fuss { opacity: 0; translate: 0 10px; transition: opacity .5s var(--aus), translate .7s var(--aus); }
.bewegung .browser-demo .d-knoepfe.da, .bewegung .browser-demo .d-fuss.da { opacity: 1; translate: 0 0; }
.bewegung .browser-demo .d-zeilen i { opacity: 0; translate: 0 6px; transition: opacity .5s var(--aus), translate .6s var(--aus); }
.bewegung .browser-demo .d-zeilen.da i { opacity: .14; translate: 0 0; }
.bewegung .browser-demo .d-zeilen.da i:nth-child(2) { transition-delay: .09s; }
.bewegung .browser-demo .d-zeilen.da i:nth-child(3) { transition-delay: .18s; }
.bewegung .browser-demo .d-bild { clip-path: inset(0 100% 0 0 round 1cqi); transition: clip-path 1s var(--aus); }
.bewegung .browser-demo .d-bild.da { clip-path: inset(0 0 0 0 round 1cqi); }
.bewegung .browser-demo .d-bild svg { filter: blur(10px) saturate(.4); scale: 1.08; transition: filter 1.3s var(--aus), scale 1.8s var(--aus); }
.bewegung .browser-demo .d-bild.scharf svg { filter: none; scale: 1; }
/* Ohne Bewegung: Handy und Anfrage stehen fertig da; mit Bewegung kommen sie zum Schluss */
html:not(.bewegung) .demo-geraet, .szene.mit-handy .demo-geraet { opacity: 1; translate: 0 0; scale: 1; }
html:not(.bewegung) .mitteilung, .szene.mit-anfrage .mitteilung { opacity: 1; translate: 0 0; scale: 1; }
.bewegung .szene.mit-anfrage .demo-handy { animation: summen .5s linear .05s; }
@keyframes summen { 20% { translate: -1.2px 0; rotate: -.5deg; } 40% { translate: 1.2px 0; rotate: .5deg; } 60% { translate: -.9px 0; rotate: -.3deg; } 80% { translate: .6px 0; rotate: .2deg; } }
.szene.mit-handy .browser-demo { translate: -3% -2%; scale: .95; }



/* Auftritt beim Laden */
@keyframes aufpoppen { from { opacity: 0; translate: 0 30px; scale: .94; } }
/* Auftakt beim Laden (am Handy, wenn der Film startet): auf der leeren Bühne liegt das Programm „browser.exe“,
   der Mauszeiger fährt hin und doppelklickt, der Browser zoomt aus dem Symbol auf – noch leer. In die Adresszeile
   wird dein-betrieb.de eingetippt, nach Enter läuft die Ladelinie, das Schloss erscheint, die Seite springt auf,
   dann schiebt sich der Editor dazu. Ohne Skript werden die Fenster nach 3,5 s sichtbar. */
.bewegung .szene:not(.auftakt) :is(.browser-demo, .editor) { visibility: hidden; animation: spaet-sichtbar 0s linear 3.5s forwards; }
@keyframes spaet-sichtbar { to { visibility: visible; } }
.start-symbol, .start-zeiger { display: none; }
.bewegung .szene.auftakt .start-symbol {
  position: absolute; left: 53.5%; top: 36%; z-index: 1; display: grid; justify-items: center; gap: 8px; translate: -50% -50%; pointer-events: none;
  animation: symbol-da .5s var(--feder) .15s backwards, symbol-weg .28s var(--aus) 1.66s forwards;
}
.start-kachel { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 15px; background: var(--weiss); color: var(--kohle); box-shadow: var(--schatten); }
.start-kachel svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.start-name { padding: 3px 7px; border-radius: 4px; font: 400 .75rem / 1.2 var(--mono); color: var(--begleit-tief); }
.bewegung .szene.auftakt .start-kachel { animation: symbol-klick .38s var(--aus) 1.3s; }
.bewegung .szene.auftakt .start-name { animation: name-markiert .01s linear 1.3s forwards; }
.bewegung .szene.auftakt .start-zeiger .klick-ring { animation: klick-ring .45s var(--aus) 1.3s; }
.bewegung .szene.auftakt .start-zeiger .klick-ring.zwei { animation: klick-ring .45s var(--aus) 1.5s; }
.bewegung .szene.auftakt .start-zeiger {
  position: absolute; left: 53.5%; top: 36%; z-index: 7; display: flex; align-items: flex-start; pointer-events: none;
  animation: start-zeiger 1.9s var(--aus) .45s both;
}
.bewegung .szene.auftakt .browser-demo { animation: fenster-zoom .78s cubic-bezier(.2, .9, .25, 1) 1.62s backwards; }
.bewegung .szene.auftakt .editor { animation: editor-auf .9s var(--feder) 4.35s backwards; }
.adresse-feld { display: inline-flex; align-items: center; width: 15ch; }
.adresse-caret, .neuer-tab { display: none; }
.bewegung .szene.auftakt .adresse-caret {
  display: block; flex: none; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--kohle);
  animation: caret-blinken .5s steps(1, end) 2s, caret-weg .01s linear 3.6s forwards;
}
.bewegung .szene.auftakt .adresse svg { animation: schloss-da .3s var(--aus) 3.85s backwards; }
.bewegung .szene.auftakt .neuer-tab {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--leiste); z-index: 3; display: block; background: var(--leiste-hell); pointer-events: none;
  animation: tab-weg .32s var(--aus) 3.95s forwards;
}
.browser-demo .leiste::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--akzent); transform-origin: left center; scale: 0 1; opacity: 0;
}
.bewegung .szene.auftakt .browser-demo .leiste::after { animation: seite-laden .8s var(--aus) 3.5s; }
@keyframes symbol-da { from { opacity: 0; scale: .7; } }
@keyframes symbol-weg { to { opacity: 0; scale: .6; visibility: hidden; } }
@keyframes symbol-klick { 0%, 45%, 100% { scale: 1; } 20%, 70% { scale: .88; } }
@keyframes name-markiert { to { background: var(--akzent); color: var(--kohle); } }
@keyframes start-zeiger {
  0% { opacity: 0; translate: 170px 140px; }
  10% { opacity: 1; }
  44%, 70% { opacity: 1; translate: 3px -11px; }
  100% { opacity: 0; translate: 60px 70px; }
}
/* Der Browser wächst aus dem Symbol (Mitte des Fensters) heraus; der Versatz hält diesen Punkt beim Skalieren fest */
@keyframes fenster-zoom {
  from { opacity: 0; scale: .07; translate: -11.16% 0; filter: blur(2px); }
  25% { opacity: 1; }
  78% { scale: 1.012; translate: .144% 0; filter: blur(0); }
  to { scale: 1; translate: 0 0; }
}
@keyframes editor-auf { from { opacity: 0; translate: -18px 34px; scale: .92; filter: blur(6px); } }
@keyframes caret-blinken { 50% { opacity: 0; } }
@keyframes caret-weg { to { opacity: 0; visibility: hidden; } }
@keyframes schloss-da { from { opacity: 0; scale: .5; } }
@keyframes tab-weg { to { opacity: 0; visibility: hidden; } }
@keyframes seite-laden { 0% { opacity: 1; scale: 0 1; } 75% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } }

/* Festgesteckter Einstieg am großen Bildschirm: die Szene läuft mit dem Scrollen (280vh Weg),
   danach scrollt der Einstieg normal weg (seit 10.10.2026 ohne „Blatt schiebt sich darüber“) */
.pin-held .held { height: 380vh; }
.pin-held .held-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding-top: 112px; padding-bottom: 48px;
}

/* ------------------------------------------------------------- Das Blatt */
.blatt {
  position: relative; z-index: 2; margin: calc(var(--r-blatt) * -1) clamp(6px, 1.1vw, 16px) 0;
  border-radius: var(--r-blatt); background: var(--grund); color: var(--kohle);
  box-shadow: 0 -24px 60px -30px rgba(16, 24, 40, .22), 0 30px 60px -40px rgba(16, 24, 40, .18);
}
.blatt > .abschnitt { padding-top: var(--abstand); }
.blatt > .abschnitt:last-child { padding-bottom: var(--abstand); }
.abschnitt { position: relative; scroll-margin-top: 0; }
.lead { margin-top: 1.25rem; max-width: 36em; font-size: var(--lead); line-height: 1.6; color: var(--begleit); }
.klein { margin-top: 1.25rem; font-size: .8125rem; line-height: 1.5; color: var(--begleit); }
.tisch .lead { color: var(--begleit-tief); }

/* Fenster poppen auf, wenn sie ins Bild kommen (nur unterhalb der ersten Ansicht) */
.pop.zu { opacity: 0; translate: 0 34px; scale: .955; }
.pop.zu.auf { opacity: 1; translate: none; scale: none; transition: opacity .8s var(--aus), translate 1.1s var(--feder), scale 1.1s var(--feder), transform .5s var(--aus), box-shadow .6s var(--aus); }
/* Fenster kippen unter der Maus ganz leicht (links, rechts, vor, zurück): die Stelle unter dem Zeiger neigt sich weg.
   Nur mit Maus und erlaubter Bewegung; große Fenster kippen weniger; das Formular bleibt beim Tippen gerade.
   Der Einstieg bleibt außen vor, dort neigt sich die Szene schon mit der Maus. */
:is(.bild-fenster, .vergleich, .video-fenster, .formular) { transition: transform .5s var(--aus), box-shadow .6s var(--aus); }
.ansicht :is(.browser-gross, .handy), .verwaltung-bild :is(.vb-fenster, .vb-geraet) { transition: transform .6s var(--aus), box-shadow .6s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  /* Die Fenster stehen immer schon in einer (unsichtbaren) 3D-Lage; unter der Maus ändert sich nur der Winkel.
     So zeichnet der Browser die Schrift durchgehend gleich – sonst springt sie beim Überfahren zwischen dünn und kräftig. */
  .bewegung :is(.bild-fenster, .vergleich, .video-fenster, .formular) {
    transform: perspective(1200px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); backface-visibility: hidden; will-change: transform;
  }
  .bewegung .kippt:is(.bild-fenster, .vergleich, .video-fenster, .formular) { box-shadow: var(--schatten-hoch); }
  .bewegung .formular:focus-within { --kx: 0deg !important; --ky: 0deg !important; }
  .bewegung .video-fenster.spielt { --kx: 0deg !important; --ky: 0deg !important; }
  /* Projekte: der Browser mit der großen Beispielschrift bleibt ruhig liegen (bewegt, zeichnete der Browser seine Schrift
     beim Nutzer sichtbar neu: „erst klein, dann groß“); nur das Handy kommt dem Zeiger entgegen – so entsteht Tiefe */
  .bewegung .ansicht.kippt .browser-gross, .bewegung .verwaltung-bild.kippt .vb-fenster { box-shadow: var(--schatten-hoch); }
  .bewegung .ansicht .handy, .bewegung .verwaltung-bild .vb-geraet {
    transform: perspective(800px) translate(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 14px)) rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 6deg));
    backface-visibility: hidden; will-change: transform;
  }
}

/* -------------------------------------------------------------- Projekte */
.ansicht { grid-area: 1 / 1; position: relative; border-radius: var(--r-fenster); }
.ansicht:focus-visible { outline-offset: 8px; }
.browser-gross { width: 88%; aspect-ratio: 16 / 10.4; container-type: inline-size; }
.browser-gross .adresse { flex-basis: 260px; }
.handy {
  --w: 22%;
  position: absolute; right: 0; top: 31%; width: var(--w); aspect-ratio: 9 / 19; padding: calc(var(--w) * .038);
  border-radius: 18% / 8.6%; background: var(--kohle); container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .2), inset 0 0 0 1.5px #45484B, 0 40px 60px -30px rgba(16, 24, 40, .5), 0 16px 26px -18px rgba(16, 24, 40, .32);
}
.handy::before {
  content: ''; position: absolute; top: 2.6%; left: 50%; z-index: 2; width: 26%; height: 2.2%; translate: -50% 0;
  border-radius: 99px; background: var(--kohle);
}
.handy-schirm { height: 100%; overflow: hidden; border-radius: 15.4% / 7%; background: var(--weiss); }

/* Schematische Mini-Seiten, Maße relativ zur Fensterbreite */
/* Die Beispielseiten sind eigene Container. Ihr Innenabstand und ihre Abstände hängen deshalb bewusst nicht an Container-Einheiten
   des äußeren Fensters: sonst rechnete der Browser beim Überfahren die Schriften zeitweise mit falscher Breite („erst klein, dann groß“).
   Prozent beim Innenabstand bezieht sich auf dieselbe Fensterbreite; die Abstände rechnen in der eigenen Breite (3,2 % Fenster = 3,49 % Seite). */
.mini {
  display: flex; flex-direction: column; height: calc(100% - var(--leiste)); overflow: hidden;
  padding: 3% 4.2%; background: var(--weiss); color: var(--kohle); font-family: var(--text); container-type: inline-size;
}
.mini > * + * { margin-top: 3.49cqi; }
.m-nav { display: flex; align-items: center; gap: 1.6cqi; min-height: 4.6cqi; }
.m-logo { flex: none; width: 3.3cqi; height: 3.3cqi; border-radius: 50%; border: .55cqi solid currentColor; }
.m-nav b { font: 600 2.1cqi / 1 var(--kopf); letter-spacing: -.015em; }
.m-links { display: flex; gap: 2.2cqi; margin-left: auto; }
.m-links i, .m-z, .m-kachel b, .m-zeiten i { display: block; height: .9cqi; border-radius: 1cqi; background: currentColor; opacity: .16; }
.m-links i { width: 6.4cqi; }
.m-pille { display: inline-flex; align-items: center; gap: .8cqi; margin-left: 2.2cqi; padding: 1cqi 1.8cqi; border-radius: 99px; font: 600 1.4cqi / 1 var(--text); box-shadow: inset 0 0 0 .16cqi rgba(16, 24, 40, .22); white-space: nowrap; }
.m-pille i { width: .9cqi; height: .9cqi; border-radius: 50%; background: var(--akzent-linie); }
.m-burger { display: none; }
.m-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 4cqi; align-items: center; }
.m-h { margin-bottom: 2cqi; font: 600 6.6cqi / .98 var(--kopf); letter-spacing: -.028em; }
.m-z { width: 90%; height: 1cqi; margin-top: 1.4cqi; }
.m-z.kurz { width: 58%; }
.m-knopf { display: inline-block; margin-top: 3cqi; padding: 1.3cqi 2.4cqi; border-radius: .5cqi; font: 600 1.5cqi / 1 var(--text); background: var(--kohle); color: var(--grund); }
.m-bild { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1cqi; }
.m-bild svg, .m-sucher svg { width: 100%; height: 100%; }
.m-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 2cqi; align-items: start; }
.m-kachel i { display: block; aspect-ratio: 1.2; border-radius: .8cqi; }
.m-kachel b { width: 70%; margin-top: 1.3cqi; }
.m-zeiten { padding: 1.8cqi; border-radius: .8cqi; background: var(--grund); }
.m-zeiten b { display: block; margin-bottom: 1.4cqi; font: 600 1.35cqi / 1 var(--text); }
.m-zeiten i + i { margin-top: 1.2cqi; }
.m-zeiten i:nth-of-type(2) { width: 76%; }
.m-zeiten i:nth-of-type(3) { width: 58%; }


.mini-drohne { background: var(--kohle-tief); color: var(--grund); }
.mini-drohne .m-logo { border-color: var(--stein); }
.mini-drohne .m-pille { box-shadow: inset 0 0 0 .16cqi rgba(201, 203, 198, .45); }
.mini-drohne .m-held { display: block; }
.m-sucher { position: relative; overflow: hidden; aspect-ratio: 400 / 214; border-radius: 1cqi; }
.m-sucher .m-text { position: absolute; left: 4.4cqi; bottom: 3.6cqi; width: 40%; }
.mini-drohne .m-knopf { background: var(--grund); color: var(--kohle); }
.mini-drohne .m-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-drohne .m-kachel i { aspect-ratio: 1.6; background-color: var(--kohle-hoch); }

/* Gemeinsam: Kacheln mit kleinem Bild und echter Beschriftung */
.m-kachel i { overflow: hidden; }
.m-kachel i svg { display: block; width: 100%; height: 100%; }
.m-kachel .m-label { width: auto; height: auto; margin-top: 1.2cqi; border-radius: 0; background: none; opacity: 1; font: 600 1.35cqi / 1.1 var(--kopf); letter-spacing: -.005em; }
/* Hotel & Restaurant: Haus am Wasser in der Abendstimmung, warme Fenster in Apricot */
.mini-hotel { background: var(--grund); }
.mini-hotel .m-held { grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); }
.mini-hotel .m-bild { box-shadow: 0 1.4cqi 3cqi -2cqi rgba(16, 24, 40, .35); }
.mini-hotel .m-zeiten { background: var(--weiss); }
.m-pdf { display: inline-block; margin-top: 1.7cqi; padding: .55cqi 1cqi; border-radius: .35cqi; font: 700 1.05cqi / 1 var(--text); letter-spacing: .06em; background: var(--akzent); color: var(--kohle); }
/* Rohrreinigung & Sanierung: Kamerablick ins Rohr, Leistungen als Kacheln, Einsatzgebiet mit Ortssuche */
.mini-rohr .m-logo { border: 0; border-radius: .7cqi; background: radial-gradient(circle, var(--akzent) 0 30%, var(--kohle) 32%); }
.mini-rohr .m-h { font-size: 6.2cqi; }
.mini-rohr .m-bild { box-shadow: 0 1.4cqi 3cqi -2cqi rgba(16, 24, 40, .4); }
.mini-rohr .m-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
.mini-rohr .m-kachel { padding: 1.3cqi 1.3cqi 1.5cqi; border-radius: .8cqi; background: #F3F4F6; }
.mini-rohr .m-kachel i { aspect-ratio: 1.5; border-radius: 0; }
.m-karte-ort { position: relative; align-self: stretch; overflow: hidden; min-height: 12cqi; border-radius: .8cqi; background: #EEF0F3; }
.m-karte-ort svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-suche { position: absolute; left: 1.2cqi; right: 1.2cqi; top: 1.2cqi; display: flex; align-items: center; gap: .8cqi; padding: .9cqi 1.2cqi; border-radius: 99px; background: var(--weiss); font: 500 1.15cqi / 1 var(--text); color: var(--begleit); box-shadow: 0 .4cqi 1cqi rgba(16, 24, 40, .15); }
.m-suche i { flex: none; width: 1.1cqi; height: 1.1cqi; border-radius: 50%; box-shadow: inset 0 0 0 .22cqi var(--kohle); }
/* Drohnenservice: Luftbild mit Flugroute und markiertem Dach */
.mini-drohne .m-label { color: var(--grund); }

/* Handy-Fassung der Mini-Seiten */
.mini.schmal { height: 100%; padding: 17% 6% 6%; }
.mini.schmal > * + * { margin-top: 6.82cqi; }
.schmal .m-nav { gap: 3cqi; min-height: 9cqi; }
.schmal .m-logo { width: 6.6cqi; height: 6.6cqi; border-width: 1.1cqi; }
.schmal .m-nav b { font-size: 5cqi; }
.schmal .m-burger {
  display: block; width: 7cqi; height: 4.8cqi; margin-left: auto;
  background: linear-gradient(currentColor 0 0) top / 100% 1cqi no-repeat, linear-gradient(currentColor 0 0) center / 100% 1cqi no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 1cqi no-repeat;
}
.schmal .m-held { display: flex; flex-direction: column; gap: 5cqi; }
.schmal .m-h { margin-bottom: 3cqi; font-size: 13cqi; }
.schmal .m-z { height: 2cqi; margin-top: 2.6cqi; }
.schmal .m-knopf { display: block; width: fit-content; margin-top: 5cqi; padding: 3cqi 5cqi; border-radius: 1.2cqi; font-size: 3.6cqi; }
.schmal .m-pille { display: flex; width: fit-content; margin: 4.5cqi 0 0; padding: 2cqi 3.4cqi; gap: 1.8cqi; font-size: 3.2cqi; box-shadow: inset 0 0 0 .35cqi rgba(16, 24, 40, .22); }
.schmal .m-pille i { width: 2cqi; height: 2cqi; }
.schmal .m-bild { border-radius: 2cqi; }
.schmal .m-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqi; padding-top: 0; border: 0; }
.schmal .m-kachel i { border-radius: 1.6cqi; }
.schmal .m-kachel b { height: 2cqi; margin-top: 2.6cqi; }
.mini-drohne.schmal .m-sucher { aspect-ratio: 400 / 520; border-radius: 2cqi; }
.mini-drohne.schmal .m-sucher .m-text { left: 7cqi; bottom: 7cqi; width: 70%; }
.mini-drohne.schmal .m-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schmal .m-kachel .m-label { margin-top: 2.4cqi; font-size: 3.4cqi; }
.mini-rohr.schmal .m-h { font-size: 11.5cqi; }
.mini-rohr.schmal .m-kachel { padding: 2.6cqi; border-radius: 1.6cqi; }

/* ---------------------------------------------------------------- Über mich */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.ueber-raster .bild-fenster { width: 100%; max-width: 470px; justify-self: end; }
/* Porträt unten zugeschnitten (ohne Hose): gezeigt wird 1100 × 1210 vom Bild */
.bild-fenster img { width: 100%; aspect-ratio: 1100 / 1210; object-fit: cover; object-position: 50% 0; }
.ueber-text .lead { color: var(--kohle); }
.ueber-text p:not(.lead):not(.versprechen) { margin-top: 1rem; max-width: 36em; color: var(--begleit); }
.versprechen {
  margin-top: 2.25rem; padding-top: 1.75rem; max-width: 21em; border-top: 1px solid var(--linie);
  font: 600 clamp(1.3rem, 1.08rem + .8vw, 1.75rem) / 1.28 var(--kopf); letter-spacing: -.016em; color: var(--kohle);
}
.ueber-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.telefonlink { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Leistungen */
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr); }   /* seit 04.10.2026 nur noch die Überschrift, ohne Text daneben */
/* Farbklecks: Die Preisliste beginnt auf einem Apricot-Band quer über das Blatt; das Preisfenster ragt aus dem Band heraus */
.leistungen { --ueberlapp: clamp(140px, 17vw, 250px); }
.farbband { padding: var(--abstand) 0 calc(var(--ueberlapp) + clamp(2.75rem, 5.5vw, 4.25rem)); background: var(--akzent); }
.leistungen .vergleich { margin-top: calc(-1 * var(--ueberlapp)); }
/* Ein Fenster, zwei Spalten: links kontur.html, rechts motion.html mit den zusätzlichen Zeilen wie in einem Diff.
   Die Zeilen beider Spalten stehen per subgrid auf gleicher Höhe. */
.vergleich { margin-top: clamp(3rem, 6vw, 4.5rem); }
.vergleich-pfeil { flex: none; width: 15px; height: 15px; color: var(--begleit); stroke-width: 2; }
.vergleich-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); }
.paket { display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; padding: clamp(1.5rem, 3.2vw, 2.75rem); }
.paket + .paket { border-left: 1px solid var(--linie); }
.paket-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.paket-kopf h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); }
.marke-einfuehrung {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 99px;
  background: rgb(from var(--akzent) r g b / .3); font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: var(--kohle);
}
.marke-einfuehrung i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-linie); }
.preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; margin-top: 1.35rem; font-variant-numeric: tabular-nums; }
.preis-alt { position: relative; font: 500 clamp(1.5rem, 1.2rem + .9vw, 2rem) / 1 var(--kopf); letter-spacing: -.015em; color: rgba(16, 24, 40, .5); text-decoration: none; }
/* Durchgestrichen im Winkel des Zeichens (Steigung 0,4), als Verlaufslinie ohne Drehung */
.preis-alt::after {
  content: ''; position: absolute; inset: -.2em -.16em;
  background: linear-gradient(158.2deg, transparent calc(50% - 1.6px), var(--akzent-linie) calc(50% - 1.6px) calc(50% + 1.6px), transparent calc(50% + 1.6px)) left center / 100% 100% no-repeat;
}
.pop.zu .preis-alt::after { background-size: 0% 100%; }
.pop.zu.auf .preis-alt::after { background-size: 100% 100%; transition: background-size .9s var(--aus) .9s; }
.preis-neu { font: 600 clamp(3rem, 2.3rem + 2.2vw, 4.1rem) / .95 var(--kopf); letter-spacing: -.025em; }
.preis-art { font-size: .9375rem; color: var(--begleit); }
.preis-block { display: grid; gap: .8rem; margin-top: 1.35rem; }
.preis-block .preis { margin-top: 0; }
/* Ersparnis und Frist: der Moment „jetzt zuschlagen“ – ehrlich, weil der Streichpreis danach wirklich gilt */
.ersparnis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.ersparnis b {
  padding: .34em .62em .3em; border-radius: var(--r-knopf); background: var(--kohle); color: var(--akzent);
  font: 700 1.0625rem / 1.1 var(--text); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.ersparnis span { font: 600 1.1875rem / 1.3 var(--kopf); letter-spacing: -.01em; color: var(--kohle); font-variant-numeric: tabular-nums; }
.preis-frist { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--kohle); }
/* Der Punkt pulsiert kurz: Das Angebot läuft gerade */
.preis-frist::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); box-shadow: 0 0 0 0 rgb(from var(--akzent) r g b / .5); }
.bewegung .pop.auf .preis-frist::before { animation: frist-puls 1.6s var(--aus) 2.6s 4; }
@keyframes frist-puls { 0% { box-shadow: 0 0 0 0 rgb(from var(--akzent) r g b / .55); } 100% { box-shadow: 0 0 0 9px rgb(from var(--akzent) r g b / 0); } }
/* Beim Aufpoppen landet der Preis. Mit Rabatt (Flyer-Seite, .rabatt) als Abfolge: der alte Preis steht, wird gestrichen,
   der neue landet, dann springt die Ersparnis auf */
.pop.zu .preis-neu { opacity: 0; scale: 1.2; }
.pop.zu.auf .preis-neu { opacity: 1; scale: 1; transition: opacity .35s var(--aus) .45s, scale .6s var(--feder) .45s; }
.pop.zu.auf .rabatt .preis-neu { transition-delay: 1.55s; }
.pop.zu .ersparnis b { opacity: 0; scale: .5; }
.pop.zu.auf .ersparnis b { opacity: 1; scale: 1; transition: opacity .3s var(--aus) 2s, scale .55s var(--feder) 2s; }
.pop.zu :is(.ersparnis span, .preis-frist) { opacity: 0; translate: 0 6px; }
.pop.zu.auf :is(.ersparnis span, .preis-frist) { opacity: 1; translate: none; transition: opacity .4s var(--aus) 2.15s, translate .5s var(--aus) 2.15s; }
.pop.zu.auf .preis-frist { transition-delay: 2.35s; }
.paket-satz { margin-top: 1.4rem; font: 600 1.1875rem / 1.3 var(--kopf); letter-spacing: -.008em; }
/* Leitsatz der Pakete: Ist die Spalte breit genug, steht er in einer Zeile (Schrift folgt der Spaltenbreite, höchstens 19 px).
   Sonst bricht er nur zwischen ganzen Sätzen um, nie mitten im Satz; auf sehr schmalen Schirmen darf er normal umbrechen. */
.satz-feld { container: satz / inline-size; } /* eigenes Feld: ein Container auf .paket würde dessen Subgrid abschalten */
@container satz (min-width: 250px) { .paket-satz > span { white-space: nowrap; } }
@container satz (min-width: 470px) { .paket-satz { font-size: min(1.1875rem, 3.42cqi); } }
.paket-text { margin-top: .7rem; color: var(--begleit); }
.zeilen { align-self: start; margin-top: 1.6rem; list-style: none; border-top: 1px solid var(--linie); }
.zeilen li {
  display: grid; grid-template-columns: 1.5ch minmax(0, 1fr); gap: 12px; padding: 10px 12px 10px 10px;
  border-bottom: 1px solid var(--linie); font-size: .9375rem; line-height: 1.45;
}
.zm { font: 500 .9375rem / 1.45 var(--mono); text-align: center; color: var(--begleit); }
.zeilen .neu { background: rgb(from var(--akzent) r g b / .22); }
.zeilen .neu .zm { color: var(--kohle); }
.zeit { margin-top: 1.25rem; font-size: .9375rem; color: var(--begleit); }
.paket .knopf { align-self: end; justify-self: start; margin-top: 1.75rem; }
.preis-hinweis { margin-top: 1.5rem; }


/* Upgrade für beide Pakete: das Backend (im Code noch .verwaltung-bild). Links das Paket, rechts ein Bild zum Ausprobieren: das Backend im Browser
   (Reiter Hinweis, PDFs, Texte, Bewertungen wie im echten Baukasten), daneben dieselbe Seite im Handy. Reiter wählen, ändern,
   speichern: Das Handy blättert zur passenden Stelle und zeigt die Änderung. Der Hinweis-Schalter legt sich beim ersten
   Hinsehen einmal von selbst um. */
.upgrade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2.5rem, 5vw, 5rem); align-items: center; margin-top: clamp(4.5rem, 8vw, 6.5rem); }
.upgrade-text { display: flex; flex-direction: column; align-items: flex-start; }
.upgrade-text .paket-kopf { justify-content: flex-start; }
.upgrade-text .paket-kopf h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); letter-spacing: -.018em; }
.marke-upgrade {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 99px;
  background: rgba(16, 24, 40, .06); font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: var(--kohle);
}
.marke-upgrade i { width: 7px; height: 7px; border-radius: 50%; background: var(--kohle); }
.upgrade-text .preis { align-items: baseline; margin-top: 1.1rem; }
.upgrade-text .preis-neu { font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.1rem); }
.upgrade-text .zeilen { width: 100%; }
.upgrade .knopf { margin-top: 1.75rem; }

.verwaltung-bild { position: relative; padding-bottom: 7%; }
.vb-fenster { width: 86%; container-type: inline-size; }
.vb-seite { display: grid; justify-items: start; gap: 3.4cqi; padding: 3cqi 17cqi 4.6cqi 4.4cqi; }
/* Reiter: echte Knöpfe, der gewählte mit Apricot-Linie */
.vb-reiter { display: flex; width: 100%; box-shadow: inset 0 -1px 0 var(--linie); }
.vb-reiter button {
  flex: 1 1 0; min-width: 0; min-height: max(6.4cqi, 26px); padding: 1.7cqi .6cqi 2cqi; border: 0; border-radius: .8cqi .8cqi 0 0; background: none;
  font: 500 2.3cqi / 1 var(--text); color: var(--begleit); white-space: nowrap; cursor: pointer;
  transition: color .2s var(--weich), background-color .2s var(--weich), box-shadow .3s var(--aus); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.vb-reiter button:hover { color: var(--kohle); background: rgba(16, 24, 40, .04); }
.vb-reiter [aria-selected='true'] { font-weight: 600; color: var(--kohle); box-shadow: inset 0 -.45cqi 0 var(--akzent-linie); }
.vb-reiter button:focus-visible { outline-offset: -2px; }
/* Die vier Bereiche liegen übereinander in einer Zelle: Das Fenster behält seine Höhe, egal welcher Reiter gewählt ist */
.vb-bereiche { display: grid; width: 100%; }
.vb-bereich { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; gap: 3cqi; min-width: 0; }
.vb-bereich:not(.an) { visibility: hidden; opacity: 0; }
.bewegung .vb-bereich { transition: opacity .18s var(--aus), visibility 0s linear .18s; }
.bewegung .vb-bereich.an { transition: opacity .35s var(--aus) .06s, visibility 0s; }
.vb-kopf { display: grid; gap: .8cqi; }
.vb-kopf b { font: 600 2.6cqi / 1.15 var(--text); }
.vb-kopf span { font-size: 2.05cqi; line-height: 1.3; color: var(--begleit-tief); }
.vb-zeile { display: flex; align-items: center; gap: 2.4cqi; }
.vb-zeile p { display: grid; gap: .9cqi; }
.vb-zeile b { font: 600 2.45cqi / 1.1 var(--text); }
.vb-zeile span { font-size: 2.05cqi; line-height: 1.2; color: var(--begleit-tief); }
/* Der Schalter ist echt: Die Fläche zum Klicken ist größer als die Spur */
.vb-schalter {
  flex: none; display: grid; margin: calc(-1 * max(1.4cqi, 6px)); padding: max(1.4cqi, 6px); border: 0; border-radius: 99px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.vb-schalter:focus-visible { border-radius: 99px; }
.vb-spur { position: relative; width: 7.6cqi; height: 4.3cqi; border-radius: 99px; background: var(--stein); transition: background-color .35s var(--weich); }
.vb-griff {
  position: absolute; left: .55cqi; top: .55cqi; width: 3.2cqi; height: 3.2cqi; border-radius: 50%;
  background: var(--weiss); box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: translate .45s var(--feder);
}
.verwaltung-bild.an .vb-spur { background: var(--akzent-linie); }
.verwaltung-bild.an .vb-griff { translate: 3.3cqi 0; }
.vb-schalter:hover .vb-spur { box-shadow: 0 0 0 .5cqi rgba(16, 24, 40, .06); }
/* Felder: echte Eingaben (am Touch-Bildschirm nur lesbar); „geändert“, solange der Wert noch nicht auf der Seite steht */
.vb-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.3cqi 3cqi; width: 100%; }
.vb-breit { grid-column: 1 / -1; }
.vb-feld { display: block; min-width: 0; }
.vb-feld > span { display: flex; align-items: center; gap: 1.4cqi; min-height: 2.6cqi; font: 500 2cqi / 1.2 var(--text); color: var(--begleit-tief); }
.vb-geaendert { display: none; padding: .3cqi 1.1cqi; border-radius: 99px; background: rgb(from var(--akzent) r g b / .38); font: normal 600 1.75cqi / 1.2 var(--text); color: var(--kohle); }
.vb-feld.ist-geaendert .vb-geaendert { display: inline-block; }
.vb-feld input {
  display: block; width: 100%; margin: 1cqi 0 0; padding: 1.5cqi 2cqi; border: 0; border-radius: .8cqi; background: rgba(16, 24, 40, .05);
  font: 400 2.3cqi / 1.25 var(--text); color: var(--kohle); font-variant-numeric: tabular-nums; transition: background-color .2s var(--weich);
}
.vb-feld input:not(:disabled):hover { background: rgba(16, 24, 40, .08); }
.vb-feld input:focus-visible { outline: 2px solid var(--kohle); outline-offset: 1px; border-radius: .8cqi; background: var(--weiss); }
.vb-feld input[aria-invalid='true'] { box-shadow: inset 0 0 0 1.5px var(--akzent-linie); }
.vb-feld input:disabled { cursor: default; opacity: 1; color: var(--kohle); -webkit-text-fill-color: var(--kohle); }
.vb-gruppe { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.vb-gruppe legend { padding: 0; font: 600 2.1cqi / 1.2 var(--text); color: var(--kohle); }
.vb-gruppe .vb-felder { margin-top: 1.6cqi; }
.vb-fehler { font: 500 2cqi / 1.3 var(--text); color: var(--kohle); }
.vb-fehler:empty { display: none; }
/* Knöpfe: Speichern dunkel, Austauschen hell */
.vb-aktion { display: flex; align-items: center; gap: 2.4cqi; }
.vb-speichern, .vb-knopf {
  flex: none; min-height: max(5.6cqi, 26px); padding: 1.5cqi 3.4cqi; border: 0; border-radius: .7cqi; font: 600 2.2cqi / 1 var(--text); cursor: pointer;
  transition: background-color .2s var(--weich), scale .2s var(--aus); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.vb-speichern { background: var(--kohle); color: var(--grund); }
.vb-speichern:hover { background: #1F2430; }
.vb-knopf { margin-left: auto; background: rgba(16, 24, 40, .07); color: var(--kohle); }
.vb-knopf:hover { background: rgba(16, 24, 40, .12); }
:is(.vb-speichern, .vb-knopf):active { scale: .96; }
.bewegung .verwaltung-bild.an #vb-p-hinweis .vb-speichern { animation: vb-druecken .5s var(--aus) .3s; }
@keyframes vb-druecken { 35% { scale: .93; background: #1F2430; } }
.vb-ok, .vb-meldung { display: inline-flex; align-items: center; gap: 1.1cqi; font: 500 2.05cqi / 1.35 var(--text); color: var(--begleit-tief); opacity: 0; transition: opacity .3s var(--aus); }
.vb-meldung { align-items: flex-start; }
:is(.vb-ok, .vb-meldung) svg { flex: none; width: 2.7cqi; height: 2.7cqi; fill: none; stroke: var(--akzent-linie); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vb-aktion.ok .vb-ok, .vb-meldung.da { opacity: 1; }
/* PDFs: je Datei Stand und Austauschen; nach dem Austauschen steht die zweite Fassung da */
.vb-dateien { width: 100%; border-top: 1px solid var(--linie); }
.vb-datei { display: flex; align-items: center; gap: 2.4cqi; padding: 2.2cqi 0; border-bottom: 1px solid var(--linie); }
.vb-datei-symbol { flex: none; width: 4.4cqi; height: 4.4cqi; fill: none; stroke: var(--begleit-tief); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vb-datei p { display: grid; gap: .7cqi; min-width: 0; }
.vb-datei b { font: 600 2.4cqi / 1.15 var(--text); }
.vb-datei p span { font: 400 1.95cqi / 1.2 var(--mono); color: var(--begleit-tief); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-datei .vb-v2, .vb-m-pdf .vb-v2, .vb-datei.v2 .vb-v1, .vb-m-pdf.v2 .vb-v1 { display: none; }
.vb-datei.v2 .vb-v2, .vb-m-pdf.v2 .vb-v2 { display: block; }

/* Unsichtbarer Geräte-Rahmen: Handy und Hinweis liegen darin nebeneinander, der Hinweis über dem Bildschirm */
.vb-geraet { position: absolute; right: 0; bottom: 0; width: 25%; aspect-ratio: 9 / 19; container-type: inline-size; }
.vb-geraet .handy { --w: 100%; top: 0; right: 0; }
.verwaltung-bild .m-h { font-size: 10.5cqi; }
.verwaltung-bild .k1 { background: #E9ECF1; }
.verwaltung-bild .k2 { background: var(--stein); }
/* Im Handy: eine längere Beispielseite, die zur passenden Stelle blättert */
.vb-mini-inhalt { position: relative; }
.vb-mini-inhalt > * + * { margin-top: 6.82cqi; }
.bewegung .vb-mini-inhalt { transition: translate .75s var(--aus); }
.vb-m-teil { padding-top: 6cqi; border-top: 1px solid var(--linie); }
.vb-m-titel { font: 600 5.4cqi / 1.1 var(--kopf); letter-spacing: -.012em; }
.vb-m-pdfs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqi; margin-top: 4cqi; }
.vb-m-pdf { position: relative; aspect-ratio: 1 / 1.3; padding: 6cqi 5cqi; border-radius: 2cqi; background: #EEF0F3; }
.vb-m-pdf b { font: 600 4.6cqi / 1.1 var(--kopf); letter-spacing: -.01em; }
.vb-m-pdf i, .vb-m-fuss i { display: block; height: 1.8cqi; margin-top: 3cqi; border-radius: 1cqi; background: currentColor; opacity: .16; }
.vb-m-pdf i.kurz { width: 62%; }
.vb-m-pdf span { position: absolute; left: 5cqi; bottom: 4.5cqi; font: 500 3.2cqi / 1 var(--mono); color: var(--begleit-tief); }
.vb-m-zeiten { margin: 3cqi 0 0; }
.vb-m-zeiten div { display: flex; justify-content: space-between; gap: 3cqi; padding: 2.6cqi 1.5cqi; border-bottom: 1px solid var(--linie); font-size: 4cqi; line-height: 1.25; }
.vb-m-zeiten dt { color: var(--begleit-tief); }
.vb-m-zeiten dd { margin: 0; font-weight: 600; text-align: right; }
/* Sterne: eine Form, fünfmal nebeneinander; gefüllt so weit, wie die Note reicht */
.vb-m-karte { overflow: hidden; aspect-ratio: 4 / 3; margin-top: 4cqi; border-radius: 2cqi; }
.vb-m-karte svg { width: 100%; height: 100%; }
.vb-m-fuss { margin-top: 10cqi; padding: 7cqi 6cqi 14cqi; border-radius: 2cqi; background: var(--kohle); color: var(--grund); }
.vb-m-fuss i { opacity: .35; }
.vb-m-fuss i:first-child { width: 45%; margin-top: 0; }
.vb-m-fuss i.kurz { width: 60%; }
/* Was sich gerade geändert hat, leuchtet im Handy kurz auf */
.bewegung .vb-neu { animation: vb-aufleuchten 1.5s var(--aus); }
@keyframes vb-aufleuchten { 0%, 30% { background-color: rgb(from var(--akzent) r g b / .6); } }
/* Der Hinweis auf der Seite, so wie ihn das Backend zeigt: Karte unten, Zeitraum mit Strich, Überschrift, Schließen */
.vb-hinweis {
  position: absolute; left: 8.5%; right: 8.5%; bottom: 5.5%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2cqi;
  padding: 5cqi 4cqi 5.4cqi 5.4cqi; border-radius: 4.4cqi; background: var(--weiss); color: var(--kohle);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 16px 26px -12px rgba(16, 24, 40, .45);
  transition: opacity .3s var(--aus), translate .35s var(--aus), visibility 0s linear .35s;
}
.vb-zeitraum { display: flex; align-items: center; gap: 2cqi; font: 500 3.6cqi / 1.2 var(--text); color: var(--begleit-tief); }
.vb-zeitraum::before { content: ''; flex: none; width: 5.6cqi; height: .8cqi; border-radius: 1cqi; background: var(--akzent-linie); }
.vb-titel { margin-top: 1.8cqi; font: 600 7.4cqi / 1.1 var(--kopf); letter-spacing: -.02em; overflow-wrap: anywhere; }
.vb-hinweis > i { display: block; width: 84%; height: 2cqi; margin-top: 2.8cqi; border-radius: 1cqi; background: currentColor; opacity: .16; }
.vb-zu {
  grid-column: 2; grid-row: 1 / span 3; width: 5.4cqi; height: 5.4cqi; opacity: .55;
  background: linear-gradient(45deg, transparent calc(50% - .45cqi), currentColor calc(50% - .45cqi) calc(50% + .45cqi), transparent calc(50% + .45cqi)),
    linear-gradient(-45deg, transparent calc(50% - .45cqi), currentColor calc(50% - .45cqi) calc(50% + .45cqi), transparent calc(50% + .45cqi));
}
.verwaltung-bild:not(.an) .vb-hinweis { opacity: 0; translate: 0 18%; visibility: hidden; }
.verwaltung-bild.an .vb-hinweis { transition: opacity .5s var(--aus) .55s, translate .75s var(--feder) .55s, visibility 0s linear .55s; }
.vb-probier { max-width: 64%; margin-top: 1.1rem; font-size: .875rem; line-height: 1.45; color: var(--begleit); }
html:not(.bewegung) :is(.vb-spur, .vb-griff, .vb-hinweis, .vb-mini-inhalt, .vb-bereich) { transition: none; }

/* Passend dazu: Drucksachen (als Papier) und Video (im Fenster), je mit Preiszeilen */
.extras { margin-top: clamp(4.5rem, 9vw, 7rem); }
.extras-kopf h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); letter-spacing: -.018em; }
.extras-kopf p { margin-top: .6rem; color: var(--begleit); }
/* Drucksachen und Video teilen sich die Zeilen (Bild, Titel, Text, Preisliste, Hinweis, Knopf) per subgrid:
   Überschriften, Listen und Knöpfe stehen auf einer Höhe, auch wenn Bild oder Liste verschieden hoch sind. */
.extras-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 clamp(2rem, 5vw, 5rem); margin-top: clamp(2.25rem, 4vw, 3rem); }
.extra { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-items: start; }
.extra > .video-fenster { align-self: end; }
.extra h4 { margin-top: 1.9rem; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.extra > p { margin-top: .55rem; max-width: 34em; color: var(--begleit); }
.preisliste { list-style: none; margin-top: 1.25rem; border-top: 1px solid var(--linie); }
.preisliste li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: .9375rem; }
.preis-anfrage { flex: none; font-size: .875rem; font-weight: 500; color: var(--begleit-tief); }
.preis-grund { margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: var(--begleit); }
.extra .knopf { justify-self: start; margin-top: 1.75rem; }
/* Drucksachen liegen als Papier direkt auf dem Blatt: Web im Fenster, Druck auf Papier */
/* Der Film im Fenster: Vorschaubild, runder Knopf in der Mitte, Zeitleiste in Apricot, Laufzeit und Vollbild in der Leiste.
   Beim Abspielen verschwindet der Knopf, bis sich die Maus bewegt; ein Klick ins Bild hält an. Vollbild zeigt den Player des Geräts. */
.video-fenster { max-width: 520px; }
.film-zeit { font-variant-numeric: tabular-nums; }
.film-vollbild {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px -7px -4px 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--begleit-tief); cursor: pointer; transition: color .25s var(--weich), background-color .25s var(--weich);
}
.film-vollbild:hover { color: var(--kohle); background: rgba(16, 24, 40, .07); }
.film-vollbild svg { width: 16px; height: 16px; }
.video-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--flaeche); }
.video-bild video { display: block; width: 100%; height: 100%; }
.video-bild.bereit video { cursor: pointer; }
.play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0;
  border: 0; border-radius: 50%; background: var(--kohle); color: var(--grund); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -12px rgba(16, 24, 40, .7); transition: opacity .4s var(--aus), scale .3s var(--feder);
}
.play:hover { scale: 1.06; }
.play:active { scale: .96; }
.play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.play.pause svg { margin-left: 0; }
.video-bild.laeuft:not(.pausiert):not(.regt) .play:not(:focus-visible) { opacity: 0; }
.video-bild.laeuft:not(.pausiert):not(.regt) video { cursor: none; }
.zeitleiste {
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(16, 24, 40, .16);
  opacity: 0; transition: opacity .4s var(--aus); pointer-events: none;
}
.video-bild.laeuft .zeitleiste { opacity: 1; }
.zeitleiste i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--akzent-linie); scale: 0 1; transform-origin: 0 50%; }

/* ------------------------------------------------------------------ Ablauf */
/* Fünf Fenster, eins je Schritt: Telefonat, Notizen, Entwurf, Vorschau mit Korrekturen, die fertige Seite. Am großen Bildschirm
   stapeln sie sich beim Scrollen (sticky, jedes 30 px tiefer), links steht der passende Schritt. Das oberste Fenster spielt einmal
   seine kleine Szene ab (Klasse „lebt“, nur mit Bewegung), die hinteren treten ein wenig zurück (--tiefe aus dem Skript). */
.ablauf h2 { max-width: 12em; }
.ablauf-raster { --ab-s: 1; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.ab-text { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: start; max-width: 32em; }
.ab-fenster + .ab-schritt { margin-top: 2.5rem; }
/* Fortschritt: die Nummer sitzt in einem Punkt; erreichte Schritte füllen sich in Apricot, der aktuelle trägt einen hellen Ring */
.schritt-nr, .fs-punkt {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--stein); color: var(--begleit);
  font: 600 .75rem / 1 var(--kopf); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  transition: background-color .45s var(--aus), box-shadow .45s var(--aus), color .45s var(--aus);
}
.schritt-nr { grid-row: 1 / span 2; }
:is(.ab-schritt, .ab-fortschritt li).erreicht :is(.schritt-nr, .fs-punkt) { background: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent-linie); color: var(--kohle); }
:is(.ab-schritt, .ab-fortschritt li).aktiv :is(.schritt-nr, .fs-punkt) { box-shadow: inset 0 0 0 1.5px var(--akzent-linie), 0 0 0 5px rgb(from var(--akzent) r g b / .35); }
.ab-fortschritt { display: none; }
.ab-text h3 { align-self: center; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.ab-text p { grid-column: 2; margin-top: .5rem; color: var(--begleit); }
.ab-fenster { width: 100%; max-width: 640px; aspect-ratio: 16 / 10.4; container-type: inline-size; }
.ab-inhalt { position: relative; height: calc(100% - var(--leiste)); overflow: hidden; }
.ab-inhalt .mini { height: 100%; }
.mini-dein .m-h { font-size: 5cqi; }
.mini-dein .k1 { background: #E9ECF1; }
.mini-dein .k2 { background: var(--stein); }
.mini-dein .k3 { background: var(--begleit); }

/* 1 Telefonat: Henning am Apparat, das Gespräch läuft als Untertitel mit */
.ab-anruf .ab-inhalt {
  display: grid; grid-template-columns: 32% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 4cqi;
  padding: 4.5cqi 5cqi 4cqi; background: linear-gradient(180deg, var(--weiss), var(--grund));
}
.ab-person { grid-row: 1 / span 2; display: grid; justify-items: center; align-content: center; text-align: center; }
.ab-bild { position: relative; width: 15cqi; aspect-ratio: 1; }
.ab-bild img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ab-bild::after { content: ''; position: absolute; inset: -1.1cqi; border-radius: 50%; box-shadow: 0 0 0 .45cqi var(--akzent); }
.ab-person b { margin-top: 2.4cqi; font: 600 calc(2.5cqi * var(--ab-s)) / 1.1 var(--text); }
.ab-person > span:not([class]) { margin-top: .6cqi; font-size: calc(1.8cqi * var(--ab-s)); color: var(--begleit-tief); }
.ab-welle { display: flex; align-items: center; gap: .7cqi; height: 3.6cqi; margin-top: 1.8cqi; }
.ab-welle i { width: .7cqi; height: 45%; border-radius: 1cqi; background: var(--akzent-linie); }
.ab-welle i:nth-child(2n) { height: 75%; }
.ab-welle i:nth-child(3) { height: 100%; }
.ab-gespraech { display: grid; align-content: center; gap: 1.6cqi; }
.ab-blase { max-width: 90%; padding: 1.5cqi 2.2cqi; border-radius: 2.2cqi; font-size: calc(1.95cqi * var(--ab-s)); line-height: 1.35; }
.ab-blase.du { justify-self: end; border-bottom-right-radius: .6cqi; background: var(--flaeche); }
.ab-blase.ich { justify-self: start; border-bottom-left-radius: .6cqi; background: var(--kohle); color: var(--grund); }
.ab-tippt { display: flex; gap: .9cqi; padding-block: 2cqi; }
.ab-tippt i { width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: var(--begleit); opacity: .6; }
.ab-knoepfe { grid-column: 2; display: flex; gap: 2.2cqi; margin-top: 2cqi; }
.ab-knoepfe span { display: grid; place-items: center; width: 6.2cqi; height: 6.2cqi; border-radius: 50%; background: var(--flaeche); color: var(--kohle); }
.ab-knoepfe svg { width: 3cqi; height: 3cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-knoepfe .auflegen { background: var(--kohle); color: var(--grund); }
.ab-knoepfe .auflegen svg { rotate: 135deg; }

/* 2 Notizen: Ziele, Wünsche, Zielgruppe abhaken, daneben der Seitenplan */
.ab-notizen .ab-inhalt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 5cqi; padding: 5cqi 5.5cqi; }
.ab-liste { display: grid; gap: 2.6cqi; }
.ab-h { font: 500 calc(2.2cqi * var(--ab-s)) / 1.2 var(--mono); color: var(--begleit-tief); }
.ab-punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2cqi; row-gap: .6cqi; }
.ab-haken { grid-row: 1 / span 2; display: grid; place-items: center; width: 3.2cqi; height: 3.2cqi; margin-top: .2cqi; border-radius: .8cqi; background: var(--akzent-linie); color: var(--weiss); }
.ab-haken svg { width: 2.4cqi; height: 2.4cqi; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ab-punkt b { font: 600 calc(2.1cqi * var(--ab-s)) / 1.2 var(--text); }
.ab-punkt > span:last-child { font-size: calc(1.95cqi * var(--ab-s)); line-height: 1.35; color: var(--begleit-tief); }
.ab-plan { width: 100%; height: auto; overflow: visible; }
.ab-linien { fill: none; stroke: var(--stein); stroke-width: 1.5; }
.ab-kasten rect { fill: var(--weiss); stroke: var(--stein); stroke-width: 1.2; }
.ab-kasten text { font: 600 9px var(--text); fill: var(--kohle); text-anchor: middle; }
.ab-start rect { fill: var(--kohle); stroke: var(--kohle); }
.ab-start text { fill: var(--grund); }
.ab-seiten rect { fill: var(--flaeche); }

/* 3 Entwurf: Ebenen links, auf der Leinwand die Seite; der Titel ist ausgewählt, das Bild noch ein Platzhalter */
.ab-entwurf .ab-inhalt { display: grid; grid-template-columns: 19% minmax(0, 1fr); background: var(--flaeche); }
.ab-ebenen {
  display: grid; align-content: start; gap: 1.3cqi; padding: 3.2cqi 2.4cqi; background: var(--weiss); box-shadow: inset -1px 0 0 var(--linie);
  font-size: calc(1.75cqi * var(--ab-s)); line-height: 1.2; color: var(--begleit-tief);
}
.ab-ebenen b { margin-bottom: .6cqi; font-weight: 600; color: var(--kohle); }
.ab-ebenen .an { margin-inline: -1cqi; padding: .5cqi 1cqi; border-radius: .6cqi; background: rgb(from var(--akzent) r g b / .32); color: var(--kohle); }
.ab-leinwand { display: grid; place-items: center; min-width: 0; padding: 4.5cqi 5cqi; }
.ab-seite { width: 100%; aspect-ratio: 16 / 10.6; overflow: hidden; border-radius: .6cqi; background: var(--weiss); }
.ab-seite .m-bild { background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9ACA7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M20.5 16l-5-5-8.5 8'/%3E%3C/svg%3E") center / 22% no-repeat; }
.ab-link, .ab-runde, .ab-status {
  display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: auto; padding: 5px 10px; border-radius: 99px;
  font: 400 .72rem / 1 var(--mono); white-space: nowrap;
}
.ab-link { background: rgba(16, 24, 40, .06); color: var(--begleit-tief); }
.ab-link svg { width: 12px; height: 12px; stroke-width: 2; }
.ab-auswahl { position: relative; }
.ab-auswahl::before { content: ''; position: absolute; inset: -1.2cqi -1.4cqi; border: .28cqi solid var(--akzent-linie); border-radius: .3cqi; pointer-events: none; }
.ab-auswahl::after {
  content: ''; position: absolute; inset: -2cqi -2.2cqi; pointer-events: none;
  background: linear-gradient(var(--akzent-linie) 0 0) 0 0 / 1.6cqi 1.6cqi no-repeat, linear-gradient(var(--akzent-linie) 0 0) 100% 0 / 1.6cqi 1.6cqi no-repeat,
    linear-gradient(var(--akzent-linie) 0 0) 0 100% / 1.6cqi 1.6cqi no-repeat, linear-gradient(var(--akzent-linie) 0 0) 100% 100% / 1.6cqi 1.6cqi no-repeat;
}
.ab-zeiger { position: absolute; right: -4.4cqi; bottom: -6cqi; width: 2.6cqi; line-height: 0; }
.ab-zeiger svg { width: 100%; height: auto; fill: var(--kohle); stroke: var(--weiss); stroke-width: 1.3; stroke-linejoin: round; }

/* 4 Vorschau: zwei Korrekturwünsche als Nadeln, die nacheinander erledigt werden */
.ab-runde { gap: 0; background: rgb(from var(--akzent) r g b / .38); font-family: var(--text); font-weight: 600; color: var(--kohle); }
.ab-fenster .adresse { flex-basis: 250px; }
.ab-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 1.2cqi; transform-origin: 0 50%; }
.ab-korrektur :is(.m-held, .m-knopf) { position: relative; }
.ab-pin.eins { left: 51%; top: 9%; }
.ab-pin.zwei { left: calc(100% + 1.6cqi); top: 50%; margin-top: -1.9cqi; }
.ab-pin b {
  position: relative; display: grid; place-items: center; width: 3.8cqi; height: 3.8cqi; border-radius: 50% 50% 50% .6cqi;
  background: var(--akzent-linie); color: var(--kohle); font: 700 calc(1.8cqi * var(--ab-s)) / 1 var(--text);
}
.ab-pin b svg { position: absolute; width: 2.4cqi; height: 2.4cqi; fill: none; stroke: var(--grund); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ab-pin em { padding: 1cqi 1.8cqi; border-radius: 1.2cqi; background: var(--kohle); color: var(--grund); font: normal 500 calc(1.75cqi * var(--ab-s)) / 1.25 var(--text); white-space: nowrap; }

/* 5 Online: Schloss, Ladelinie, „Online“ */
.ab-status { background: rgba(16, 24, 40, .06); font-family: var(--text); font-weight: 600; color: var(--kohle); }
.ab-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-linie); box-shadow: 0 0 0 3px rgb(from var(--akzent) r g b / .35); }
.ab-online .leiste::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--akzent); transform-origin: left center; scale: 0 1; opacity: 0;
}

/* Die kleinen Szenen (nur mit Bewegung; ohne stehen alle Fenster gleich im Endzustand) */
.animiert .ab-blase, .animiert .ab-pin, .animiert .ab-status, .animiert .ab-online .adresse svg, .animiert .ab-online .mini,
.animiert .ab-kasten, .animiert .ab-linien, .animiert .ab-seiten, .animiert .ab-auswahl::before, .animiert .ab-auswahl::after, .animiert .ab-zeiger,
.animiert .ab-entwurf :is(.m-bild svg, .m-kachel i, .m-zeiten) {
  transition: opacity .5s var(--aus), translate .6s var(--feder), scale .5s var(--feder);
}
.animiert .ab-anruf:not(.lebt) .ab-blase { opacity: 0; translate: 0 1.5cqi; }
.ab-anruf.lebt .ab-blase:nth-child(1) { transition-delay: .25s; }
.ab-anruf.lebt .ab-blase:nth-child(2) { transition-delay: 1.3s; }
.ab-anruf.lebt .ab-blase:nth-child(3) { transition-delay: 2.3s; }
.animiert .ab-anruf.lebt .ab-welle i { animation: ab-welle .7s var(--weich) 8 alternate; }
.animiert .ab-anruf.lebt .ab-welle i:nth-child(2n) { animation-delay: .25s; }
@keyframes ab-welle { to { height: 20%; } }
.animiert .ab-anruf.lebt .ab-tippt i { animation: ab-tippen 1.1s var(--weich) 2.6s 4; }
.animiert .ab-anruf.lebt .ab-tippt i:nth-child(2) { animation-delay: 2.75s; }
.animiert .ab-anruf.lebt .ab-tippt i:nth-child(3) { animation-delay: 2.9s; }
@keyframes ab-tippen { 30% { translate: 0 -.7cqi; opacity: 1; } 60% { translate: 0 0; } }
.animiert .ab-notizen:not(.lebt) .ab-haken { background: rgba(16, 24, 40, .1); }
.animiert .ab-notizen:not(.lebt) .ab-haken svg { opacity: 0; scale: .4; }
.animiert .ab-notizen .ab-haken { transition: background-color .3s var(--weich); }
.animiert .ab-notizen .ab-haken svg { transition: opacity .3s var(--aus), scale .45s var(--feder); }
.ab-notizen.lebt .ab-punkt:nth-child(2) :is(.ab-haken, .ab-haken svg) { transition-delay: .35s; }
.ab-notizen.lebt .ab-punkt:nth-child(3) :is(.ab-haken, .ab-haken svg) { transition-delay: .95s; }
.ab-notizen.lebt .ab-punkt:nth-child(4) :is(.ab-haken, .ab-haken svg) { transition-delay: 1.55s; }
.animiert .ab-notizen:not(.lebt) :is(.ab-kasten, .ab-linien, .ab-seiten) { opacity: 0; }
.ab-notizen.lebt .ab-start { transition-delay: 1.9s; }
.ab-notizen.lebt .ab-linien { transition-delay: 2.15s; }
.ab-notizen.lebt .ab-kasten:nth-of-type(2) { transition-delay: 2.35s; }
.ab-notizen.lebt .ab-kasten:nth-of-type(3) { transition-delay: 2.5s; }
.ab-notizen.lebt .ab-kasten:nth-of-type(4) { transition-delay: 2.65s; }
.ab-notizen.lebt .ab-seiten { transition-delay: 2.9s; }
.animiert .ab-entwurf:not(.lebt) .ab-auswahl::before, .animiert .ab-entwurf:not(.lebt) .ab-auswahl::after { opacity: 0; }
.animiert .ab-entwurf:not(.lebt) .ab-zeiger { opacity: 0; translate: 6cqi 5cqi; }
.animiert .ab-entwurf:not(.lebt) :is(.m-bild svg, .m-kachel i, .m-zeiten) { opacity: 0; }
.ab-entwurf.lebt .ab-auswahl::before, .ab-entwurf.lebt .ab-auswahl::after { transition-delay: .9s; }
.ab-entwurf.lebt .ab-zeiger { transition-delay: .3s; }
.ab-entwurf.lebt .m-bild svg { transition-delay: 1.5s; transition-duration: .9s; }
.ab-entwurf.lebt .m-kachel:nth-child(1) i { transition-delay: 2.1s; }
.ab-entwurf.lebt .m-kachel:nth-child(2) i { transition-delay: 2.25s; }
.ab-entwurf.lebt .m-kachel:nth-child(3) i { transition-delay: 2.4s; }
.ab-entwurf.lebt .m-zeiten { transition-delay: 2.55s; }
.animiert .ab-korrektur:not(.lebt) .ab-pin { opacity: 0; scale: .6; }
.ab-korrektur.lebt .ab-pin.eins { transition-delay: .3s; }
.ab-korrektur.lebt .ab-pin.zwei { transition-delay: .8s; }
.animiert .ab-korrektur.lebt .ab-pin b { animation: ab-erledigt .35s var(--aus) 2.1s forwards; }
.animiert .ab-korrektur.lebt .ab-pin b span { animation: ab-weg .25s var(--aus) 2.1s forwards; }
.animiert .ab-korrektur.lebt .ab-pin b svg { animation: ab-da .3s var(--aus) 2.2s forwards; }
.animiert .ab-korrektur.lebt .ab-pin em { animation: ab-leise .4s var(--aus) 2.2s forwards; }
.animiert .ab-korrektur.lebt .ab-pin.zwei :is(b, b span, b svg, em) { animation-delay: 2.7s; }
@keyframes ab-erledigt { to { background: var(--kohle); } }
@keyframes ab-weg { to { opacity: 0; } }
@keyframes ab-da { to { opacity: 1; } }
@keyframes ab-leise { to { opacity: .55; } }
.animiert .ab-online.lebt .leiste::after { animation: seite-laden .9s var(--aus) .15s; }
.animiert .ab-online:not(.lebt) .mini { opacity: .3; }
.ab-online.lebt .mini { transition-delay: .75s; }
.animiert .ab-online:not(.lebt) .adresse svg { opacity: 0; scale: .5; }
.ab-online.lebt .adresse svg { transition-delay: .9s; }
.animiert .ab-online:not(.lebt) .ab-status { opacity: 0; translate: 8px 0; }
.ab-online.lebt .ab-status { transition-delay: 1.25s; }

/* Am großen Bildschirm: Stapel. Schritt und Fenster stehen in Zeilen; jedes Fenster reicht bis zum Ende des Rasters und bleibt
   deshalb oben kleben, während die nächsten darüber gleiten. Der Text klebt nur in seiner Zeile. */
@media (min-width: 1024px) and (min-height: 620px) {
  .ablauf-raster {
    --ab-oben: 14vh; --ab-versatz: 30px; --ab-schritt: max(46vh, 360px);
    grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); column-gap: clamp(3rem, 6vw, 6rem); row-gap: 0;
    grid-template-rows: repeat(4, var(--ab-schritt)) calc(var(--ab-schritt) + 24vh);
  }
  /* Chrome misst „sticky“ an der Eltern-Box, nicht an der Rasterzelle: Darum steckt jeder Text in einer Hülle, die genau seine Zeile füllt */
  .ab-schritt { grid-column: 1; }
  .ab-fenster + .ab-schritt { margin-top: 0; }
  .ab-fenster { position: sticky; top: calc(var(--ab-oben) + var(--i) * var(--ab-versatz)); }
  /* Die Schritte stehen als Liste mit Fortschrittslinie neben dem Stapel; die einzelnen Texte bleiben nur für Screenreader */
  .ab-schritt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ab-fortschritt {
    display: grid; gap: 22px; grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky;
    top: calc(var(--ab-oben) + var(--leiste) + 1.25rem); margin: 0; padding: 0 0 0 48px; list-style: none;
  }
  .ab-fortschritt li { position: relative; }
  .fs-punkt { position: absolute; left: -48px; top: 0; }
  /* Linie zum nächsten Punkt: grau, füllt sich in Apricot, sobald der nächste Schritt erreicht ist */
  .ab-fortschritt li:not(:last-child)::before {
    content: ''; position: absolute; left: -34px; top: 32px; bottom: -20px; width: 2px; border-radius: 1px;
    background: var(--stein) linear-gradient(var(--akzent-linie), var(--akzent-linie)) top / 100% 0% no-repeat;
    transition: background-size .6s var(--aus);
  }
  .ab-fortschritt li.vorbei::before { background-size: 100% 100%; }
  .fs-titel { display: block; min-height: 30px; padding-top: 2px; font: 600 clamp(1.2rem, 1.05rem + .45vw, 1.45rem) / 1.2 var(--kopf); letter-spacing: -.012em; transition: opacity .45s var(--aus); }
  .fs-text { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--aus), opacity .45s var(--aus); }
  .fs-text > span { min-height: 0; overflow: hidden; max-width: 30em; color: var(--begleit); }
  .fs-text > span::before { content: ''; display: block; height: .45rem; }
  /* Mit Skript: nur der aktuelle Schritt zeigt seinen Text, die anderen treten zurück */
  .ablauf-raster.stapelt .ab-fortschritt li:not(.aktiv) .fs-titel { opacity: .4; }
  .ablauf-raster.stapelt .ab-fortschritt li:not(.aktiv) .fs-text { grid-template-rows: 0fr; opacity: 0; }
  /* Der Schritt zum obersten Fenster steht voll da, die anderen treten zurück */
  .ab-fenster { align-self: start; }
  .ab-fenster { grid-column: 2; grid-row-end: -1; max-width: none; transform-origin: 50% 0; scale: calc(1 - var(--tiefe, 0) * .035); transition: scale .6s var(--aus); }
  .ab-fenster::after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: var(--flaeche); opacity: calc(var(--tiefe, 0) * .14); transition: opacity .6s var(--aus);
  }
  .ablauf-raster > [data-i='0'] { --i: 0; grid-row-start: 1; }
  .ablauf-raster > [data-i='1'] { --i: 1; grid-row-start: 2; }
  .ablauf-raster > [data-i='2'] { --i: 2; grid-row-start: 3; }
  .ablauf-raster > [data-i='3'] { --i: 3; grid-row-start: 4; }
  .ablauf-raster > [data-i='4'] { --i: 4; grid-row-start: 5; }
}
/* Kleinere Bildschirme: Schritt über Fenster, die Fenster kommen, sobald sie gut zu sehen sind; Schrift darin etwas größer */
@media not all and (min-width: 1024px) and (min-height: 620px) {
  .ablauf-raster { --ab-s: 1.35; }
  .animiert .ab-fenster { transition: opacity .7s var(--aus), translate .9s var(--feder); }
  .animiert .ab-fenster:not(.lebt) { opacity: 0; translate: 0 28px; }
}
@media (max-width: 639px) {
  .ablauf-raster { --ab-s: 1.5; }
  .ab-fenster { aspect-ratio: 16 / 11.5; }
  .ab-notizen .ab-inhalt { grid-template-columns: minmax(0, 1fr); }
  .ab-plan { display: none; }
  .ab-entwurf .ab-inhalt { grid-template-columns: minmax(0, 1fr); }
  .ab-ebenen { display: none; }
  .ab-link { display: none; }
  .ab-fenster .adresse { flex-basis: auto; justify-content: flex-start; min-width: 0; }
  .chat.lebendig .chat-verlauf { min-height: 340px; }
}

/* ------------------------------------------------------------------ Fragen */
/* Ein Chat mit Henning: oben der Verlauf, unten die Fragen zum Antippen. Seine Nachrichten links weiß, deine rechts in Apricot.
   Ohne Skript steht das ganze Gespräch untereinander (Frage rechts, Antwort links). */
/* Die Überschrift des Abschnitts ist die Fensterleiste „FAQ“ */
.chat .leiste h2 { font: 400 .75rem / 1 var(--mono); letter-spacing: 0; color: var(--kohle); }
.chat { background: var(--flaeche); scroll-margin-top: 110px; }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--weiss); box-shadow: inset 0 -1px 0 var(--linie); }
.chat-kopf img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-kopf p { display: grid; line-height: 1.25; }
.chat-kopf b { font-weight: 600; }
.chat-kopf span { font-size: .8125rem; color: var(--begleit-tief); }
.chat-verlauf, .chat-fragen, .chat-paar { display: flex; flex-direction: column; gap: 10px; }
.chat-verlauf { padding: 22px 20px 12px; }
.chat-fragen { padding: 0 20px 12px; }
.blase { max-width: min(86%, 34rem); padding: 11px 15px 12px; border-radius: 16px; font-size: 1rem; line-height: 1.5; }
.blase.von-henning { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--weiss); color: var(--kohle); }
.blase.von-dir { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--akzent); color: var(--kohle); font-weight: 500; }
.chat-paar h3 { font: inherit; font-weight: 500; }
.chat-frage { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; }
.chat-ende { padding: 6px 20px 20px; font-size: .875rem; line-height: 1.5; color: var(--begleit-tief); }
.chat-ende a { font-weight: 600; color: var(--kohle); text-underline-offset: .2em; }
/* Mit Skript: Die Fragen werden zu Vorschlägen unter dem Verlauf, die Antworten kommen erst im Verlauf */
.chat.lebendig .chat-verlauf { justify-content: flex-end; min-height: 280px; }
.chat.lebendig .chat-fragen { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 16px 20px 6px; border-top: 1px solid var(--linie); }
.chat.lebendig .chat-paar { display: contents; }
.chat.lebendig .chat-antwort { display: none; }
.chat.lebendig .chat-paar h3 { max-width: none; padding: 0; border-radius: 0; background: none; }
.chat.lebendig .chat-frage {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 12px 8px 15px; border-radius: 99px; background: var(--weiss);
  font-size: .9375rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color .2s var(--weich);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Pfeil wie auf den Knöpfen der Seite: zeigt, dass man die Frage abschicken kann */
.chat-frage svg { display: none; }
.chat.lebendig .chat-frage svg { display: block; flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--aus); }
.chat.lebendig .chat-frage:hover { background: rgb(from var(--akzent) r g b / .35); }
.chat.lebendig .chat-frage:hover svg { translate: 2px -2px; }
.chat-hinweis { display: none; }
.chat.lebendig .chat-hinweis { display: flex; flex-basis: 100%; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: .8125rem; color: var(--begleit-tief); }
.chat-hinweis b { font-size: .9375rem; font-weight: 600; color: var(--kohle); }
/* Rechner: wie WhatsApp am Computer – links die Fragen als Liste, rechts das Gespräch mit Henning */
@media (min-width: 900px) {
  .chat.lebendig {
    display: grid; grid-template-columns: minmax(270px, 36%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'leiste leiste' 'fragen kopf' 'fragen verlauf' 'fragen ende';
  }
  .chat.lebendig > .leiste { grid-area: leiste; }
  .chat.lebendig .chat-kopf { grid-area: kopf; }
  .chat.lebendig .chat-verlauf { grid-area: verlauf; min-height: 360px; padding: 26px 28px 14px; }
  .chat.lebendig .chat-ende { grid-area: ende; padding: 6px 28px 22px; }
  .chat.lebendig .chat-fragen {
    grid-area: fragen; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 0 12px; border-top: 0;
    background: var(--weiss); box-shadow: inset -1px 0 0 var(--linie);
  }
  .chat.lebendig .chat-hinweis { flex: none; flex-direction: column; gap: 3px; margin: 0; padding: 18px 22px 14px; box-shadow: inset 0 -1px 0 var(--linie); }
  .chat.lebendig .chat-paar h3 { width: 100%; }
  .chat.lebendig .chat-frage {
    justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; padding: 12px 20px 12px 22px; border-radius: 0;
    background: none; box-shadow: inset 0 -1px 0 var(--linie); text-align: left;
  }
  .chat.lebendig .chat-frage:hover { background: var(--grund); }
  .chat.lebendig .chat-frage:focus-visible { outline-offset: -3px; border-radius: 4px; }
  .chat .blase { max-width: min(78%, 36rem); }
}
/* Kommt der Chat ins Bild, erscheinen die Fragen kurz nacheinander, damit man sie bemerkt */
.chat.pop.zu .chat-frage { opacity: 0; translate: 0 10px; }
.chat.pop.zu.auf .chat-frage { opacity: 1; translate: none; transition: opacity .45s var(--aus), translate .6s var(--feder), background-color .2s var(--weich); }
.chat.lebendig .chat-frage[aria-pressed='true'] { background: var(--akzent); }
.chat.lebendig .chat-frage:focus-visible { outline: 2px solid var(--kohle); outline-offset: 2px; border-radius: 99px; }
.blase.tippt { display: flex; gap: 5px; padding: 15px 16px; }
.blase.tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--begleit); opacity: .5; }
.bewegung .blase.tippt i { animation: chat-tippen 1s var(--weich) infinite; }
.bewegung .blase.tippt i:nth-child(2) { animation-delay: .15s; }
.bewegung .blase.tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-tippen { 30% { opacity: 1; translate: 0 -3px; } 60% { translate: 0 0; } }
.bewegung .blase.neu { animation: chat-rein .45s var(--aus) both; }
@keyframes chat-rein { from { opacity: 0; translate: 0 10px; } }

/* ------------------------------------------------------ Abschnitte auf dem Tisch */
.tisch { color: var(--kohle); }
.kontakt { padding-block: var(--abstand); }
/* Kontakt: links Überschrift, Text und die direkten Wege untereinander, rechts das Formular */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 6rem); align-items: start; }
.kontakt-text h2 { max-width: 11em; }
.wege { list-style: none; margin-top: 2.5rem; }
.wege li { border-top: 1px solid var(--linie); }
.wege li:last-child { border-bottom: 1px solid var(--linie); }
.wege a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: 'symbol art' 'symbol wert';
  column-gap: 16px; align-items: center; padding: 15px 0; text-decoration: none;
}
.weg-symbol {
  grid-area: symbol; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px;
  background: var(--weiss); box-shadow: 0 0 0 1px rgba(16, 24, 40, .07); transition: background-color .3s var(--weich);
}
.weg-symbol svg { width: 22px; height: 22px; }
.weg-art { grid-area: art; font-size: .8125rem; color: var(--begleit-tief); }
.weg-wert { grid-area: wert; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem) / 1.3 var(--kopf); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wege a:hover .weg-symbol { background: var(--akzent); }
.wege a:hover .weg-wert { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* „Deine bisherige Website“ erscheint erst, wenn „Bestehende Website überarbeiten“ angehakt ist (ohne :has bleibt es sichtbar) */
@supports selector(:has(*)) {
  .formular .feld.feld-website { display: none; }
  .formular:has([data-feld='website']:checked) .feld.feld-website { display: grid; }
  .bewegung .formular:has([data-feld='website']:checked) .feld-website { animation: feld-auf .35s var(--aus); }
}
@keyframes feld-auf { from { opacity: 0; translate: 0 -6px; } }
/* Worum geht es? Auswahl als Chips, gern mehrere */
.interessen { min-width: 0; margin: 0 0 1.4rem; padding: 0; border: 0; }
.interessen legend { margin-bottom: .65rem; padding: 0; font-size: .9375rem; font-weight: 600; }
.interessen legend small { font-size: .8125rem; font-weight: 400; color: var(--begleit); }
.interessen-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.interesse { position: relative; display: inline-flex; }
.interesse input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.interesse span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; border-radius: 99px;
  background: rgba(16, 24, 40, .06); font-size: .9375rem; font-weight: 500; line-height: 1.25; transition: background-color .2s var(--weich);
}
.interesse span::before {
  content: ''; flex: none; width: 0; height: 13px; background: var(--kohle); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2'/%3E%3C/svg%3E") center / 13px 13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2'/%3E%3C/svg%3E") center / 13px 13px no-repeat; transition: opacity .2s var(--aus);
}
.interesse input:hover + span { background: rgba(16, 24, 40, .11); }
.interesse input:checked + span { background: var(--akzent); }
.interesse input:checked + span::before { width: 13px; opacity: 1; }
.interesse input:focus-visible + span { outline: 2px solid var(--kohle); outline-offset: 2px; }

/* Formular im Fenster: die Titelleiste zeigt ungesendete Eingaben (Punkt) und das Senden */
.form-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-linie); scale: 0; transition: scale .4s var(--feder); }
.formular.ist-geaendert .form-punkt { scale: 1; }
.sende-status { display: flex; align-items: center; gap: 6px; margin-left: auto; font: 400 .75rem / 1 var(--mono); color: var(--begleit-tief); opacity: 0; transition: opacity .4s var(--aus); }
.sende-status svg { width: 14px; height: 14px; stroke: var(--kohle); stroke-width: 2.2; }
.formular.ist-gesendet .sende-status { opacity: 1; }
.formular-inhalt { padding: clamp(1.5rem, 3.2vw, 2.5rem); }
.formular h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); }
.formular-hinweis { margin: .6rem 0 1.6rem; font-size: .9375rem; color: var(--begleit); }
.feld { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.feld label { font-size: .9375rem; font-weight: 600; }
.feld label small { font-size: .8125rem; font-weight: 400; color: var(--begleit); }
.feld input, .feld textarea {
  width: 100%; min-width: 0; padding: .8em .95em; border: 1px solid rgba(16, 24, 40, .24); border-radius: var(--r-feld);
  background: var(--grund); color: var(--kohle); font: inherit; font-size: 1rem; caret-color: var(--kohle);
  transition: border-color .2s var(--weich), background-color .2s var(--weich);
}
.feld input:hover, .feld textarea:hover { border-color: rgba(16, 24, 40, .45); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--kohle); outline-offset: 1px; border-color: var(--kohle); background: var(--weiss); }
.feld textarea { min-height: 7.5em; resize: vertical; line-height: 1.5; }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.fehler { display: none; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--fehler); }
.feld[data-fehler] .fehler { display: block; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { margin-top: .5rem; }
.formular-status { display: none; margin-top: 1rem; padding: .85em 1em; border-radius: var(--r-feld); font-size: .9375rem; font-weight: 500; }
.formular-status.ok { display: block; background: rgb(from var(--akzent) r g b / .28); color: var(--kohle); }
.formular-status.fehlgeschlagen { display: block; background: rgba(162, 59, 42, .08); color: var(--fehler); }
.datenschutz-hinweis { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; color: var(--begleit); }
.datenschutz-hinweis a { text-underline-offset: .2em; }

/* -------------------------------------------------------------------- Fuß */
/* Der Fuß ist ein zweiter Bogen Papier: gleiche Ränder, Ecken und Schatten wie das Blatt oben, von unten ins Bild geschoben */
.fuss { padding-top: clamp(1rem, 3vw, 2rem); background: var(--flaeche); }
.fuss-blatt {
  margin: 0 clamp(6px, 1.1vw, 16px); padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.75rem;
  border-radius: var(--r-blatt) var(--r-blatt) 0 0; background: var(--grund); color: var(--begleit-tief);
  box-shadow: 0 -24px 60px -30px rgba(16, 24, 40, .22); font-size: .9375rem;
}
.fuss-raster {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: 'marke kontakt uebersicht recht' 'zeile zeile zeile zeile'; gap: 2.75rem clamp(2rem, 4vw, 4rem);
}
.fuss-marke { grid-area: marke; }
.fuss-kontakt { grid-area: kontakt; }
.fuss-uebersicht { grid-area: uebersicht; }
.fuss-recht { grid-area: recht; }
.fuss-zeile { grid-area: zeile; }
/* Übersicht in zwei Spalten, von oben nach unten gelesen wie die Seite */
.fuss-gruppe.fuss-uebersicht ul { grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 2.25rem; justify-content: start; }
.fuss .logo { width: 176px; }
.fuss-marke p { margin-top: 1.1rem; max-width: 22em; line-height: 1.6; }
.fuss-titel { font: 600 .875rem / 1.3 var(--text); letter-spacing: .005em; color: var(--kohle); }
.fuss-gruppe ul { display: grid; gap: .6rem; margin-top: 1rem; list-style: none; }
.fuss-gruppe a[href^="tel:"] { font-variant-numeric: tabular-nums; }
.fuss a { text-decoration: none; transition: color .25s var(--weich); }
.fuss a:hover, .fuss a[aria-current] { color: var(--kohle); }
.fuss-gruppe a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.fuss-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  margin-top: clamp(.5rem, 2vw, 1.5rem); padding-top: 1.5rem; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--begleit);
}
.fuss-zeile p { margin-right: auto; }
.nach-oben { display: inline-flex; align-items: center; gap: .5rem; color: var(--begleit-tief); }
.nach-oben svg { width: 16px; height: 16px; transition: translate .4s var(--aus); }
.nach-oben:hover svg { translate: 0 -3px; }

/* --------------------------------------------------------------- Rechtstexte */
.rechtstext { padding: 92px 0 clamp(3rem, 6vw, 5rem); }
.rechtstext-blatt {
  margin: 0 clamp(6px, 1.1vw, 16px); padding-block: clamp(3.5rem, 8vw, 6.5rem); border-radius: var(--r-blatt);
  background: var(--grund); color: var(--kohle);
}
/* Gleiche linke Kante wie das Menüband und alle anderen Abschnitte; nur die Zeilen bleiben für langen Text angenehm kurz */
.rechtstext .rahmen > * { max-width: 46rem; }
.rechtstext h1 { font-size: var(--h2); line-height: 1.1; letter-spacing: -.02em; }
.rechtstext h1 + p { margin-top: 1.25rem; font-size: var(--lead); line-height: 1.6; }
.rechtstext h2 { margin-top: 2.75rem; font-size: var(--h3); letter-spacing: -.012em; }
.rechtstext p, .rechtstext li { margin-top: .75rem; color: var(--begleit); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext a:not(.knopf) { color: var(--kohle); text-underline-offset: .2em; }
.rechtstext .zurueck { margin-top: 3rem; }
.rechtstext .rueckweg { margin-top: 2rem; }
/* 404-Seite „Quellcode“: links der Text, rechts der Editor 404.html. Er schreibt die gesuchte Seite, markiert sie in Apricot,
   löscht sie und setzt den Weg zur Startseite (site.js, Abschnitt 9). Der Satz dreht „Ich mache sie sichtbar.“ um. */
.fehlerseite .rahmen.fehler-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.fehlerseite .rahmen.fehler-raster > * { max-width: none; }
.fehler-marke { font: 400 .8125rem / 1 var(--mono); color: var(--begleit-tief); }
.rechtstext.fehlerseite h1 { margin-top: 1rem; font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.fehlerseite h1 .grau { display: block; margin-top: .45em; font-size: .6em; line-height: 1.12; letter-spacing: -.024em; color: var(--begleit); }
.rechtstext.fehlerseite .fehler-lead { margin-top: 1.1rem; max-width: 30em; font-size: var(--lead); line-height: 1.6; color: var(--begleit-tief); }
.fehler-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.fehler-wege .textlink { margin-top: 0; }
.rechtstext.fehlerseite .fehler-telefon { margin-top: 1.5rem; font-size: .9375rem; }
.fehler-editor { min-width: 0; overflow: hidden; border-radius: var(--r-fenster); background: var(--kohle); color: var(--grund); box-shadow: var(--schatten-kohle); }
.fehler-editor .leiste { align-items: flex-end; padding: 9px 12px 0 14px; background: var(--kohle-hoch); color: #B7BAB5; box-shadow: none; }
.fehler-editor .punkte { align-self: center; padding-bottom: 9px; }
.fehler-editor .punkte i { background: #5E6266; }
.fehler-code { padding: 16px 0 20px; min-height: calc(6 * 1.8em + 36px); font: 400 clamp(11.5px, .38vw + 7.2px, 13px) / 1.8 var(--mono); }
.fz { display: block; position: relative; min-height: 1.8em; overflow: hidden; padding-left: 46px; padding-right: 16px; white-space: pre; text-overflow: ellipsis; color: var(--grund); }
.fz::before { content: attr(data-z); position: absolute; left: 0; width: 28px; text-align: right; color: #6B6F72; }
.fehler-code .k { color: #9A9EA1; }
.fehler-code .p { color: #8B9094; }
.fehler-code .t { color: #D6D8D3; }
.fehler-code .a { color: #B7BAB5; }
.fehler-code .s { color: var(--akzent); }
.fehler-code .x { color: var(--grund); }
.fz.markiert .fz-inhalt { background: rgb(from var(--akzent) r g b / .32); border-radius: 2px; }
.fehler-caret { display: inline-block; width: 2px; height: 1.2em; margin-left: 1px; vertical-align: -.22em; border-radius: 1px; background: var(--akzent); animation: blinken 1.05s steps(1) infinite; }
@media (max-width: 900px) {
  .fehlerseite .rahmen.fehler-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Anpassungen */
@media (max-width: 1180px) {
  .nav a { padding: 9px 10px; }
  .kopf-insel { gap: 16px; }
}
@media (max-height: 760px) and (min-width: 1024px) {
  .pin-held .held-buehne { padding-top: 100px; padding-bottom: 32px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'marke marke marke' 'kontakt uebersicht recht' 'zeile zeile zeile'; }
}
@media (max-width: 1023px) {
  .held-buehne { grid-template-columns: minmax(0, 1fr); gap: 3rem; min-height: 0; padding-top: 118px; padding-bottom: 5.5rem; }
  .held-text { max-width: 40rem; }
  .szene { display: grid; height: auto; min-height: 0; max-width: 640px; perspective: none; }
  .browser-demo { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 11; transform: none; }
  .editor { position: relative; left: auto; bottom: auto; width: calc(100% - 14px); max-width: 520px; height: auto; margin: -56px 0 0 14px; }
  .code-rahmen { --code-gr: 11px; --rinne: 44px; height: calc(8 * var(--zh) + 28px); }
  .demo-geraet { top: 26px; bottom: auto; right: -2px; width: 30%; }
  .bewegung .szene.auftakt :is(.start-symbol, .start-zeiger) { left: 50%; top: 0; margin-top: 34.375%; }
  .mitteilung { left: auto; right: 8%; top: -12%; width: 236px; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .mt-app { width: 34px; height: 34px; border-radius: 9px; }
  .mt-app svg { width: 18px; height: 18px; }
  .mt-text { column-gap: 8px; row-gap: 2px; }
  .mt-text b { font-size: .8125rem; }
  .mt-zeit { font-size: .6875rem; }
  .mt-von { font-size: .75rem; }
  .szene.mit-handy .browser-demo { translate: none; scale: none; }
  .bewegung .szene { padding-bottom: 72px; }
  .bewegung .szene.gesichert .editor { translate: 0 68px; }
  html:not(.bewegung) .editor { margin-top: 12px; } /* ruhige Fassung: gleiche Endlage wie der Film, das Handy verdeckt nichts */
  .ueber-raster, .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .ueber-raster { gap: 3rem; }
  .bild-fenster { max-width: 520px; }
}
@media (max-width: 899px) {
  .nav, .kopf-knopf { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-insel { padding: 0 8px 0 18px; height: 60px; }
  .kopfzeile, .extras-raster, .upgrade { grid-template-columns: minmax(0, 1fr); }
  .extras-raster { grid-template-rows: none; row-gap: 3.5rem; }
  .extra { display: block; grid-row: auto; }
  .verwaltung-bild { order: -1; width: 100%; max-width: 640px; }
  .vergleich-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .paket { display: flex; flex-direction: column; grid-row: auto; }
  .paket + .paket { border-left: 0; border-top: 1px solid var(--linie); }
  .paket .knopf { align-self: flex-start; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .kopf-knopf { display: inline-flex; }
}
@media (max-width: 639px) {
  :root { --leiste: 36px; }
  .held-buehne { padding-top: 104px; gap: 2.5rem; }
  .held-aktion .knopf { width: 100%; }
  .browser-gross { width: 94%; }
  .handy { --w: 26%; top: 38%; }
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .paket .knopf, .ueber-aktion .knopf, .upgrade .knopf, .extra .knopf { width: 100%; }
  /* Kleiner Bildschirm: Fenster in voller Breite mit größerer Schrift, das Handy darunter rechts, links daneben der Hinweis zum Ausprobieren */
  .verwaltung-bild { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: 6%; align-items: center; padding-bottom: 0; }
  .vb-fenster { grid-column: 1 / -1; width: 100%; }
  .vb-geraet { position: relative; grid-column: 2; grid-row: 2; width: 100%; margin-top: -8%; }
  .vb-probier { grid-column: 1; grid-row: 2; max-width: none; margin: 0; }
  .vb-seite { gap: 4cqi; padding: 3.6cqi 5cqi 5.6cqi; }
  .vb-reiter button { min-height: 32px; font-size: 3.1cqi; }
  .vb-bereich { gap: 3.8cqi; }
  .vb-kopf b, .vb-zeile b, .vb-datei b { font-size: 3.5cqi; }
  .vb-kopf span, .vb-zeile span, .vb-feld > span, .vb-ok, .vb-meldung, .vb-fehler { font-size: 2.8cqi; }
  .vb-gruppe legend { font-size: 3cqi; }
  .vb-geaendert { font-size: 2.4cqi; }
  .vb-feld input { padding: 2cqi 2.6cqi; font-size: 3.1cqi; }
  .vb-speichern, .vb-knopf { min-height: 32px; padding: 2cqi 4cqi; font-size: 3cqi; }
  .vb-datei-symbol { width: 6cqi; height: 6cqi; }
  .vb-datei p span { font-size: 2.6cqi; }
  :is(.vb-ok, .vb-meldung) svg { width: 3.6cqi; height: 3.6cqi; }
  .vb-spur { width: 10cqi; height: 5.6cqi; }
  .vb-griff { left: .7cqi; top: .7cqi; width: 4.2cqi; height: 4.2cqi; }
  .verwaltung-bild.an .vb-griff { translate: 4.4cqi 0; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'marke marke' 'kontakt uebersicht' 'recht uebersicht' 'zeile zeile'; gap: 2.5rem 1.5rem; }
  .fuss-gruppe.fuss-uebersicht ul { grid-auto-flow: row; grid-template-rows: none; }
  .fuss-zeile p { flex-basis: 100%; }
  .leiste-info { display: none; }
  .video-fenster .film-zeit { display: block; }
  .menue .knopf { width: 100%; }
  .preisliste li { align-items: flex-start; }
}
@media (max-width: 380px) {
  .logo { width: 116px; }
  .menue-knopf { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .caret { display: none; }
}
@media (forced-colors: active) {
  .logo { background: CanvasText; }
  .knopf { border: 1px solid ButtonText; }
}

/* =====================================================================================================
   Handy-Option (Pilot, Runde 2, 04.10.2026): weniger Scrollen auf dem Handy. Am Computer ändert sich nichts.
   ===================================================================================================== */
.vb-p-ende { display: none; }
/* Umschalter auf dem Handy (Pakete, Drucksachen/Video): eine Reihe gleich breiter Knöpfe */
.m-reiter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 1.5rem; padding: 4px; border-radius: 12px; background: rgba(16, 24, 40, .07); }
.m-reiter button {
  min-height: 46px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--begleit-tief);
  font: 600 .9375rem / 1.2 var(--kopf); letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--weich), color .25s var(--weich), box-shadow .25s var(--weich);
}
.m-reiter button[aria-selected='true'] { background: var(--weiss); color: var(--kohle); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 6px 14px -10px rgba(16, 24, 40, .45); }
.farbband .m-reiter { background: rgba(16, 24, 40, .1); }
.farbband .m-reiter button { color: var(--begleit-tief); }
.farbband .m-reiter button[aria-selected='true'] { color: var(--kohle); }
:is(.m-reiter, .ab-nav) button:focus-visible, .demo-schalter:focus-visible, .schnellkontakt a:focus-visible { outline: 2px solid var(--kohle); outline-offset: 2px; }
.vergleich.mit-reitern .paket:not(.gewaehlt), .extras.mit-reitern .extra:not(.gewaehlt) { display: none !important; }
.vergleich.mit-reitern .paket + .paket { border-top: 0; }
/* In der Fensterleiste steht nur die Datei des gewählten Pakets */
.vergleich.mit-reitern .vergleich-pfeil, .vergleich.mit-reitern:not(.motion-gewaehlt) .leiste > .datei:nth-child(4), .vergleich.mit-reitern.motion-gewaehlt .leiste > .datei:nth-child(2) { display: none; }
/* Backend: Schalter zum Aufklappen des Ausprobier-Bildes */
.demo-schalter {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: 100%; margin-top: 1.25rem; padding: 10px 14px 10px 10px;
  border: 0; border-radius: 12px; background: var(--weiss); color: var(--kohle); text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 10px 22px -18px rgba(16, 24, 40, .5); -webkit-tap-highlight-color: transparent;
}
.demo-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: var(--akzent); }
.demo-symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--kohle); stroke-width: 1.8; }
.demo-text b { display: block; font: 600 1rem / 1.25 var(--kopf); }
.demo-text small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--begleit-tief); }
.demo-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .35s var(--aus); }
.demo-schalter[aria-expanded='true'] .demo-pfeil svg { rotate: 180deg; }
.upgrade.demo-zu .verwaltung-bild { display: none; }
/* Ablauf: Nummernleiste über den Schritten zum Wischen */
.ab-nav { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 1.75rem 0 1.25rem; padding: 0; list-style: none; }
.ab-nav::before { content: ''; position: absolute; left: 15px; right: 15px; top: 50%; height: 1.5px; translate: 0 -50%; background: var(--stein); }
.ab-nav li { position: relative; }
.ab-nav button { display: grid; place-items: center; width: 44px; height: 44px; margin: -7px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ab-nav button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--stein);
  color: var(--begleit); font: 600 .75rem / 1 var(--kopf); font-variant-numeric: tabular-nums; transition: background-color .35s var(--aus), box-shadow .35s var(--aus), color .35s var(--aus); }
.ab-nav li.erreicht button span { background: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent-linie); color: var(--kohle); }
.ab-nav li.aktiv button span { box-shadow: inset 0 0 0 1.5px var(--akzent-linie), 0 0 0 5px rgb(from var(--akzent) r g b / .35); }
/* Feste Kontaktleiste unten auf dem Handy */
.schnellkontakt {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 16px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 18px 40px -16px rgba(16, 24, 40, .5);
  translate: 0 calc(100% + 28px); transition: translate .45s var(--aus);
}
.schnellkontakt.zeigen { translate: 0 0; }
.schnellkontakt a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; border-radius: 12px;
  color: var(--kohle); font: 600 .8125rem / 1.1 var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.schnellkontakt a:first-child { background: var(--akzent); }
.schnellkontakt a:active { background: rgba(16, 24, 40, .08); }
.schnellkontakt a:first-child:active { background: var(--akzent-tief); }
.schnellkontakt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 899px) {
  /* Ablauf zum Wischen: je Schritt eine ganze Karte (Text oben, Fenster darunter), ohne dass die nächste hereinschaut */
  .ablauf-raster.wischen {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-rows: auto auto;
    column-gap: calc(2 * var(--rand)); row-gap: 1rem; margin-top: 0; margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 1.5rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .ablauf-raster.wischen::-webkit-scrollbar { display: none; }
  .ablauf-raster.wischen > .ab-schritt { grid-row: 1; scroll-snap-align: start; scroll-snap-stop: always; }
  .ablauf-raster.wischen > .ab-fenster { grid-row: 2; max-width: none; }
  .ablauf-raster.wischen > [data-i='0'] { grid-column: 1; }
  .ablauf-raster.wischen > [data-i='1'] { grid-column: 2; }
  .ablauf-raster.wischen > [data-i='2'] { grid-column: 3; }
  .ablauf-raster.wischen > [data-i='3'] { grid-column: 4; }
  .ablauf-raster.wischen > [data-i='4'] { grid-column: 5; }
  .ablauf-raster.wischen .ab-fenster + .ab-schritt { margin-top: 0; }
  .ablauf-raster.wischen .schritt-nr { display: none; }
  .ablauf-raster.wischen .ab-text { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .ablauf-raster.wischen .ab-text p { grid-column: 1; }
  .ablauf-raster.wischen:focus-visible { outline: 2px solid var(--kohle); outline-offset: -2px; }
}

@media (max-width: 639px) {
  :root { --abstand: 4rem; }

  /* Start: Textabstände wie ursprünglich. Ohne Code-Fenster: Der Browser baut die Seite mittig auf, rückt dann nach links,
     rechts kommt das Handy dazu, und die neue Anfrage erscheint links darunter – sie verdeckt nichts */
  .editor { display: none; }
  .browser-demo { width: 84%; aspect-ratio: 16 / 11.3; margin-left: 8%; }
  .szene.mit-handy .browser-demo { translate: -9.5% 0; }
  .szene, .bewegung .szene { padding-bottom: 66px; }
  .bewegung .szene.auftakt :is(.start-symbol, .start-zeiger) { margin-top: 30%; }
  .demo-geraet { inset: 0; width: auto; aspect-ratio: auto; z-index: 4; transform-origin: 100% 100%; }
  .demo-handy { inset: auto 0 0 auto; width: 32%; aspect-ratio: 9 / 18.6; padding: 1.2%; }
  .mitteilung { inset: auto auto 0 0; width: calc(68% - 12px); translate: 0 12px; transform-origin: 0 100%; }

  /* Über mich: Der Gruß liegt unten im Foto, darunter der Text in normaler Größe; die zwei hinteren Absätze klappen
     unter „Mehr über mich“ auf. So passt vom Foto bis zur Telefonnummer alles auf einen Bildschirm */
  .ueber-raster { grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; }
  .ueber-text { display: contents; }
  .ueber-raster > .bild-fenster { grid-column: 1; grid-row: 1; max-width: none; justify-self: stretch; }
  .bild-fenster img { aspect-ratio: 4 / 3; object-position: 50% 9%; }
  .ueber-raster > .bild-fenster::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
    background: linear-gradient(to top, rgba(16, 24, 40, .88), rgba(16, 24, 40, .7) 50%, rgba(16, 24, 40, 0));
  }
  .ueber-text h2 {
    position: relative; z-index: 2; grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 0 20px 18px;
    font-size: var(--h2); line-height: 1.08; color: var(--weiss); text-shadow: 0 1px 14px rgba(16, 24, 40, .5);
    transition: opacity .8s var(--aus), translate 1.1s var(--feder);
  }
  .ueber-raster > .bild-fenster.zu:not(.auf) ~ .ueber-text h2 { opacity: 0; translate: 0 34px; }
  .ueber-text > :not(h2) { grid-column: 1; }
  .ueber-text .lead { margin-top: 1.5rem; font-size: var(--lead); line-height: 1.6; }
  .ueber-text p:not(.lead):not(.versprechen) { margin-top: 1rem; font-size: var(--lauf); line-height: 1.6; }
  .ueber-mehr { padding-bottom: .25rem; }
  .bewegung .ueber-mehr:not([hidden]) { animation: mehr-auf .45s var(--aus); }
  .versprechen { margin-top: 1.25rem; padding-top: 1.25rem; font-size: 1.3rem; }
  .ueber-aktion { margin-top: 1.25rem; gap: 1rem 1.5rem; }

  /* Projekte: kurze Namen in einer Reihe; Vorschau so hoch, dass die Inhalte ganz zu sehen sind */
  .browser-gross { aspect-ratio: 16 / 11; }
  .browser-gross .m-reihe { display: none; }
  .mini-drohne:not(.schmal) .m-sucher { aspect-ratio: 400 / 185; }

  /* Pakete: Umschalter im Band, dichter */
  .farbband .m-reiter { margin-top: 1.25rem; }
  .farbband { padding-bottom: calc(var(--ueberlapp) + 1.5rem); }
  .leistungen { --ueberlapp: 110px; }
  .zeilen li { padding-top: 9px; padding-bottom: 9px; }
  .paket-satz { margin-top: 1rem; }
  .paket .knopf { margin-top: 1.25rem; }

  /* Backend: Text, „ausprobieren“, (Bild), „Backend anfragen“; neben dem Handy eine kleine Anleitung statt Leerraum */
  .upgrade { row-gap: 0; margin-top: 3rem; }
  .upgrade-text { display: contents; }
  .demo-schalter { order: 1; }
  .verwaltung-bild { order: 2; margin-top: 1.25rem; }
  .upgrade-text > .knopf { order: 3; }
  .vb-probier { counter-reset: vb; align-self: center; font-size: 0; line-height: 0; }
  .vb-p-titel { display: block; margin-bottom: .6rem; font: 600 .9375rem / 1.3 var(--kopf); color: var(--kohle); }
  .vb-p-schritt { display: block; position: relative; min-height: 24px; margin-top: .5rem; padding-left: 2.1rem; font-size: .9375rem; line-height: 24px; color: var(--kohle); counter-increment: vb; }
  .vb-p-schritt::first-letter { text-transform: uppercase; }
  .vb-p-schritt::before { content: counter(vb); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--akzent); font: 600 .75rem / 1 var(--kopf); color: var(--kohle); }
  .vb-p-ende { display: block; margin-top: .8rem; font-size: .8125rem; line-height: 1.45; color: var(--begleit); }

  /* Drucksachen | Video */
  .extras { margin-top: 3.5rem; }
  .extras.mit-reitern .m-reiter { margin-top: 1.25rem; }
  .extras-raster { margin-top: 1.25rem; }
  .extra h4 { margin-top: 1.25rem; }

  /* FAQ auf dem Handy: aufklappbare Liste statt Chat */
  .chat.lebendig.akkordeon .chat-verlauf, .chat.lebendig.akkordeon .chat-hinweis { display: none; }
  .chat.lebendig.akkordeon .chat-fragen { display: block; padding: 2px 18px 6px; border-top: 0; }
  .chat.lebendig.akkordeon .chat-paar { display: block; border-bottom: 1px solid var(--linie); }
  .chat.lebendig.akkordeon .chat-paar:last-child { border-bottom: 0; }
  .chat.lebendig.akkordeon .chat-paar h3 { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .chat.lebendig.akkordeon .chat-frage {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 13px 0;
    border-radius: 0; background: none; font: 600 .9375rem / 1.35 var(--text); text-align: left;
  }
  .chat.lebendig.akkordeon .chat-frage[aria-pressed='true'], .chat.lebendig.akkordeon .chat-frage:hover { background: none; }
  .chat.lebendig.akkordeon .chat-frage svg { display: none; }
  .chat.lebendig.akkordeon .chat-frage::after {
    content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stein); transition: rotate .3s var(--aus), background-color .3s var(--aus);
    background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242526' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v11M6.5 12h11'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  .chat.lebendig.akkordeon .chat-paar.offen .chat-frage::after { rotate: 45deg; background-color: var(--akzent); box-shadow: none; }
  .chat.lebendig.akkordeon .chat-antwort { display: none; max-width: none; margin: -4px 0 0; padding: 0 0 16px; border-radius: 0; background: none; box-shadow: none; color: var(--begleit-tief); font-size: .9375rem; line-height: 1.55; }
  .chat.lebendig.akkordeon .chat-paar.offen .chat-antwort { display: block; }
  .chat.lebendig.akkordeon .chat-ende { padding: 8px 18px 18px; }

  /* Kontakt: Wege stehen in der festen Leiste unten; oben nur Titel, kurzer Satz, dann das Formular */
  html.mit-schnellkontakt .wege, html.mit-schnellkontakt .lead-anfang { display: none; }
  html.mit-schnellkontakt body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .kontakt-raster { gap: 1.5rem; }
  .formular-hinweis { font-size: .875rem; }
  .interessen { margin-bottom: 1.1rem; }
  .interessen-liste { gap: 6px; }
  .interesse span { min-height: 36px; padding: 7px 12px; font-size: .875rem; }
  .feld-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; align-items: end; }
  .feld { gap: .35rem; margin-bottom: .9rem; }
  .feld label { font-size: .875rem; }
  .feld input, .feld textarea { padding: .7em .8em; }
  .feld textarea { min-height: 5.2em; }

  /* Fuß: ohne Übersicht (steht im Menü), Kontakt und Rechtliches nebeneinander */
  .fuss-blatt { padding-block: 2.5rem 1.25rem; }
  .fuss-uebersicht { display: none; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'marke marke' 'kontakt recht' 'zeile zeile'; gap: 1.75rem 1.25rem; }
  .fuss .logo { width: 150px; }
  .fuss-marke p { margin-top: .75rem; }
  .fuss-gruppe ul { margin-top: .6rem; gap: .5rem; }
  .fuss-zeile { margin-top: 0; padding-top: 1rem; }
}
@keyframes mehr-auf { from { opacity: 0; translate: 0 -6px; } }

/* Runde 4 (05.10.2026): Gliederung „Bänder“ für Handy und Computer – die Kapitel wechseln über die ganze Breite zwischen hell
   und grau, die Preise sind ganz Apricot, über jeder Überschrift steht eine Kapitel-Marke mit dem Namen aus dem Menü */
.blatt { margin-inline: 0; }
.blatt > .abschnitt { padding-block: var(--abstand); }
.blatt > .leistungen { padding-top: 0; background: var(--akzent); }
.blatt > :is(.projekte, .backend-abschnitt, .ablauf) { background: var(--flaeche); --begleit: var(--begleit-tief); }   /* auf Grau ist der Begleittext dunkler: 6 : 1 statt 4,3 : 1 */
.leistungen .preis-hinweis { color: var(--begleit-tief); }
.backend-abschnitt .upgrade, .extras-abschnitt .extras { margin-top: 0; }
.kapitel { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font: 600 .8125rem / 1.3 var(--text); letter-spacing: .01em; color: var(--begleit-tief); }
.kapitel i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); }
.farbband .kapitel { color: var(--begleit-tief); }
.farbband .kapitel i { background: var(--kohle); }
.fragen .kapitel { margin-bottom: 1.5rem; }
/* Menü am Handy: der aktuelle Bereich bekommt den Apricot-Punkt wie oben in der Navigation */
.menue li a[aria-current] { display: flex; align-items: center; gap: .5em; }
.menue li a[aria-current]::after { content: ''; flex: none; width: .26em; height: .26em; border-radius: 50%; background: var(--akzent-linie); }

@media (max-width: 639px) {
  /* Titel: beide Sätze gleich groß, je eine Zeile über die ganze Breite (passt bis 8,8 vw) */
  .held-titel { font-size: min(2.4rem, 8.6vw); }
  .held-titel .zeile:not(.licht) { display: inline; }
  .held-titel .licht { margin-top: .24em; font-size: 1em; line-height: 1.1; letter-spacing: -.03em; }
  /* Über mich: Telefonnummer steht am Handy unten in der Leiste („Anrufen“); Kapitel-Marke über dem Foto */
  .ueber-aktion .telefonlink { display: none; }
  .ueber-text .kapitel { grid-column: 1; grid-row: 1; }
  .ueber-raster > .bild-fenster, .ueber-text h2 { grid-row: 2; }
}

/* Verwaltung (05.10.2026, verwaltung/web/hinweis.css): Hinweis-Karte in den Farben der Seite, unter Kopfleiste und Menü.
   Am Handy erscheint sie erst zusammen mit der Kontaktleiste und sitzt darüber, damit sie den Einstieg nicht verdeckt. */
:root {
  --vw-grund: var(--weiss); --vw-text: var(--kohle); --vw-akzent: var(--akzent-linie); --vw-linie: rgba(16, 24, 40, .08);
  --vw-schrift: var(--text); --vw-titel-schrift: var(--kopf); --vw-radius: 14px; --vw-ebene: 37;
  --vw-schatten: 0 0 0 1px rgba(16, 24, 40, .05), 0 24px 48px -22px rgba(16, 24, 40, .45), 0 6px 14px -8px rgba(16, 24, 40, .18);
}
/* hinweis.css wird nach dieser Datei geladen, deshalb hier jeweils mit body davor */
body .vw-hinweis__titel { font-weight: 600; letter-spacing: -.012em; }
/* Am Computer kommt die Karte erst, wenn der Einstieg seinen Moment hatte */
@media (min-width: 640px) {
  body .vw-hinweis.vw-hinweis--da { transition-delay: 4s; }
}
@media (max-width: 639px) {
  body .vw-hinweis { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transition: opacity .38s ease, transform .38s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .38s; }
  body:not(:has(.schnellkontakt.zeigen)) .vw-hinweis { visibility: hidden; opacity: 0; transform: translateY(14px); }
  body:has(.schnellkontakt.zeigen) .vw-hinweis { transition-delay: 0s; }
}
/* Beim Kontaktformular und im Fuß steht der Hinweis schon im Text: dort tritt die Karte zurück und verdeckt keine Kontaktwege */
html.vw-ruhe .vw-hinweis { visibility: hidden !important; opacity: 0 !important; }
/* Derselbe Hinweis beim Kontaktformular */
.auslastung { display: flex; gap: .65rem; align-items: baseline; max-width: 34em; margin-top: 1.5rem; font-size: .9375rem; line-height: 1.55; color: var(--kohle); }
.auslastung i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); translate: 0 -1px; }
.auslastung b { display: block; font-weight: 700; }
/* Referenzen aus der Verwaltung: eigene Bilder statt der gezeichneten Ansicht, eigene Namen trennen automatisch */
.ref-bild { display: block; width: 100%; object-fit: cover; object-position: top center; background: var(--weiss); }
.browser-gross .ref-bild { height: calc(100% - var(--leiste)); }
.handy-schirm .ref-bild { height: 100%; }
.vw-auto { hyphens: auto; }
/* Aktionsseite: Bricht der Satz unter dem Preis oder über dem Formular um, sitzt der Punkt an der ersten Zeile */
.preis-frist, .formular-aktion { align-items: flex-start; }
.preis-frist::before, .formular-aktion i { margin-top: calc(.7em - 4px); }
/* Hinweis-Karte auffälliger (Wunsch 05.10.2026): Die Überschrift steht auf einem Apricot-Schild wie „Ich mache sie sichtbar.“
   im Einstieg und passt so zu jeder Nachricht (Auslastung, Urlaub …). Beim Erscheinen zieht sich das Schild von rechts nach
   links auf, wie im Einstieg; ohne Bewegung steht es gleich da. */
body .vw-hinweis .vw-hinweis__titel { position: relative; display: inline-block; isolation: isolate; padding: .06em .32em .12em; margin-left: -.32em; }
body .vw-hinweis .vw-hinweis__titel::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: .22em; background: var(--akzent); }
body .vw-hinweis .vw-hinweis__text { margin-top: 9px !important; }
@keyframes hinweis-schild { from { clip-path: inset(0 0 0 100% round .22em); } to { clip-path: inset(0 0 0 0 round .22em); } }
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  body .vw-hinweis--da .vw-hinweis__titel::before { animation: hinweis-schild .62s cubic-bezier(.7, 0, .2, 1) 4.45s both; }
}
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) {
  body:has(.schnellkontakt.zeigen) .vw-hinweis--da .vw-hinweis__titel::before { animation: hinweis-schild .62s cubic-bezier(.7, 0, .2, 1) .45s both; }
}

/* --------------------------------------------------------------- Tippflächen auf Touch-Geräten (SEO/Mobil 07.10.2026)
   Mindestens 44 px hohe Ziele. Footer-Links und „Nach oben“ werden höher statt größer, das Logo im Kopf bekommt
   einen größeren Klickbereich ohne Verschiebung (negativer Außenabstand). Links mitten im Fließtext bleiben, wie sie sind. */
@media (pointer: coarse) {
  .fuss-gruppe ul { gap: 0; }
  .fuss-gruppe a, .nach-oben { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.kopf, .fuss-marke) .marke { padding-block: 12px; margin-block: -12px; }
  .interesse span { min-height: 44px; }
}

/* --------------------------------------------------------------- Unterseiten (Umbau 07.10.2026, werkstatt/neu/struktur.py)
   Startseite mit Kurzfassungen, /leistungen und /projekte als eigene Seiten. Gleiche Bänder, Fenster und Farben wie bisher. */
.unterseite .blatt { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* Seitenanfang: Platz für die schwebende Kopfleiste, Titel als H1 */
.blatt > .abschnitt.seite-start:not(.leistungen), .seite-start .farbband { padding-top: calc(var(--abstand) * .55 + 96px); }
.seite-start h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem); line-height: 1.02; letter-spacing: -.032em; max-width: 13em; }
.seite-lead { margin-top: clamp(1.1rem, 2vw, 1.5rem); max-width: 40em; font-size: var(--lead); line-height: 1.6; color: var(--kohle); }
.projekte .seite-lead { color: var(--begleit-tief); }

/* Brotkrumen über dem Titel: gleiche Machart wie die Kapitel-Marke, nur als Weg zurück zur Startseite */
.pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font: 600 .8125rem / 1.3 var(--text); color: var(--begleit-tief); }
.pfad li { display: flex; align-items: center; gap: .55rem; }
.pfad li + li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent-linie); }
.pfad a { display: inline-block; padding-block: .3rem; color: inherit; text-decoration: underline; text-decoration-color: rgba(16, 24, 40, .3); text-underline-offset: .22em; transition: color .25s var(--weich), text-decoration-color .25s var(--weich); }
.pfad a:hover { color: var(--kohle); text-decoration-color: currentColor; }
.pfad [aria-current] { color: var(--kohle); }
@media (pointer: coarse) { .pfad a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } .pfad ol { margin-top: -.6rem; margin-bottom: .5rem; } }
.farbband .pfad ol { color: var(--begleit-tief); }
.farbband .pfad li + li::before { background: var(--kohle); }

/* Startseite, Leistungen kurz: sechs Felder mit kleinen Zeichnungen auf dem Apricot-Band (Wunsch 07.10.2026: „grafisch cooler“).
   Oben die Zeichnung auf grauem Tisch, das Fenster ragt unten aus dem Bild; darunter Name, ein Satz und der Preis. */
.leistungen-kurz .farbband { padding-bottom: clamp(2rem, 4vw, 3rem); }
.lb-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); list-style: none; }
.lb { grid-column: span 2; }
.lb-kontur, .lb-motion { grid-column: span 3; }
.lb-check { grid-column: 1 / -1; }
.lb > a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: var(--grund); color: var(--kohle); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 24px 40px -30px rgba(16, 24, 40, .45); transition: transform .45s var(--aus), box-shadow .45s var(--aus);
}
.lb > a:hover, .lb > a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 34px 54px -32px rgba(16, 24, 40, .5); }
.lb > a:focus-visible { outline-offset: 3px; }
/* Seit 07.10.2026 KI-Bilder (Stil wie die Ratgeber-Titelbilder) statt gezeichneter Mini-Ansichten */
.lb-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 8.4; background: var(--flaeche); }
.lb-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--aus); }
.lb > a:hover .lb-bild img { scale: 1.035; }
.lb-backend .lb-bild, .lb-druck .lb-bild, .lb-video .lb-bild { aspect-ratio: 4 / 3; }
.lb-check > a { flex-direction: row; }
.lb-check .lb-bild { flex: 0 0 min(40%, 380px); aspect-ratio: 4 / 3; }
.lb-check .lb-text { justify-content: center; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.lb-text { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.3rem; }
.lb-text h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
.lb-text p:not(.lb-preis) { margin-top: .35rem; max-width: 34em; font-size: .9375rem; line-height: 1.5; color: var(--begleit); }
.lb-preis { margin-top: auto; padding-top: .9rem; font: 600 1.375rem / 1 var(--kopf); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(.lb-druck, .lb-video) .lb-preis { font: 600 .9375rem / 1.2 var(--text); letter-spacing: 0; color: var(--begleit-tief); }
.lb-check .lb-preis { margin-top: 1rem; padding: .35em .7em; align-self: flex-start; border-radius: 99px; background: var(--akzent); font: 600 .875rem / 1 var(--text); letter-spacing: 0; }
.lb-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.lb-fuss .klein { margin: 0; color: var(--begleit-tief); }   /* eine Zeile am Computer */
@media (max-width: 899px) {
  .lb-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb, .lb-kontur, .lb-motion { grid-column: span 1; }
  .lb-video, .lb-check { grid-column: 1 / -1; }
  .lb-video .lb-bild { aspect-ratio: 16 / 8; }
}
@media (max-width: 639px) {
  .lb-raster { grid-template-columns: minmax(0, 1fr); }
  .lb, .lb-kontur, .lb-motion, .lb-video { grid-column: 1; }
  .lb-backend .lb-bild, .lb-druck .lb-bild, .lb-video .lb-bild { aspect-ratio: 16 / 9; }
  .lb-check > a { flex-direction: column; }
  .lb-check .lb-bild { flex: none; }
  .lb-fuss .knopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lb > a:hover, .lb > a:focus-visible { transform: none; }
  .lb > a:hover .lb-bild img { scale: 1; }
}

/* Startseite, Projekte kurz: drei Fenster liegen versetzt übereinander auf dem Tisch; das berührte kommt nach vorn */
.pk-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.pk-text .knopf { margin-top: 2rem; }
.pk-stapel { display: grid; list-style: none; }
/* Versatz so gewählt, dass von den hinteren Fenstern auch der Titel der Beispielseite zu sehen ist */
.pk-stapel li { grid-area: 1 / 1; width: 64%; }
.pk-stapel li:nth-child(2) { justify-self: center; margin-top: 20%; }
.pk-stapel li:nth-child(3) { justify-self: end; margin-top: 40%; }
.pk-stapel li:has(:focus-visible) { z-index: 4; }
.pk-fenster { display: block; text-decoration: none; transition: transform .5s var(--aus), box-shadow .5s var(--aus); }
.pk-fenster .leiste { min-height: 34px; padding-block: 5px; }
.pk-fenster .adresse { flex-basis: 220px; }
.pk-bild { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; container-type: inline-size; background: var(--weiss); }
.pk-bild .mini { height: 100%; }
.pk-bild .ref-bild { height: 100%; }
.pk-fenster:focus-visible { transform: translateY(-8px); box-shadow: var(--schatten-hoch); }
.pk-fenster:focus-visible { outline-offset: 4px; }

/* /projekte: Steckbriefe unter der Projektansicht, als Textspalten ohne Kartenrahmen */
.sb-art { margin-top: .35rem; font-size: .875rem; font-weight: 600; color: var(--begleit-tief); }
.sb-text { margin-top: 1rem; max-width: 34em; color: var(--begleit); }
.sb-punkte { display: grid; gap: .55rem; margin-top: 1.25rem; list-style: none; }
.sb-punkte li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9375rem; line-height: 1.45; }
.sb-punkte svg { flex: none; width: 18px; height: 18px; margin-top: .1em; fill: none; stroke: var(--akzent-linie); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Einstieg: „Animation anhalten“ (WCAG 2.2.2), nur solange sich die Szene von selbst bewegt. Angehalten ruht auch der Cursor. */
.held-stopp {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .85rem; border: 0; border-radius: 99px;
  background: rgba(16, 24, 40, .06); color: var(--begleit-tief); font: 600 .8125rem / 1 var(--text); cursor: pointer;
  visibility: hidden; opacity: 0; transition: opacity .4s var(--weich), visibility 0s linear .4s, background-color .25s var(--weich), color .25s var(--weich);
}
.held-stopp.da { visibility: visible; opacity: 1; transition: opacity .4s var(--weich), background-color .25s var(--weich), color .25s var(--weich); }
.held-stopp:hover { background: rgba(16, 24, 40, .1); color: var(--kohle); }
.held-stopp svg { flex: none; width: 14px; height: 14px; fill: currentColor; }
.szene.angehalten, .szene.angehalten * { animation-play-state: paused !important; }

/* /leistungen, Reihenfolge der Bänder: Pakete (Apricot), Backend + Betreuung (grau), Funktionen (hell), Drucksachen/Video (grau),
   Datenschutz/Barrierefreiheit (hell), Ablauf (grau), FAQ (hell) */
.unterseite .blatt > .extras-abschnitt { background: var(--flaeche); --begleit: var(--begleit-tief); }

/* Betreuung nach dem Start: unter dem Backend, gleiche Zeilen wie die Pakete, ohne eigenes Fenster */
.betreuung {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start;
  margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linie);
}
/* Bild links über zwei Zeilen, rechts Text und Liste (Wunsch 07.10.2026: „da muss ein Bildchen rein“) */
/* Bilder ohne Kärtchen: sie werden gleich mit dem Hintergrund ihres Abschnitts erzeugt (Wunsch 07.10.2026) */
.betreuung-bild { grid-row: span 2; overflow: hidden; }
.betreuung-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Website-Check-Seite: Bilder neben der Überschrift und unter „Bezahlt wird erst nach der Übergabe“ */
.ckp-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.ck-bild { overflow: hidden; }
.ck-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ckw-bild { margin-top: 1.75rem; }
@media (max-width: 899px) {
  .betreuung-bild { grid-row: auto; max-width: 26rem; }
  .ckp-kopf { grid-template-columns: minmax(0, 1fr); }
}
.betreuung h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); }
.betreuung .paket-satz { margin-top: .9rem; }
.betreuung .paket-text { margin-top: .6rem; max-width: 36em; }
.betreuung-liste .zeilen { margin-top: 0; }
.betreuung-liste .knopf { margin-top: 1.5rem; }

/* Funktionen: vier Gruppen, darin Kacheln mit dem Symbol, das die Funktion trägt */
.fn-gruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2vw, 1.75rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); align-items: start; }
.fn-gruppe h3 { display: flex; align-items: center; gap: .55rem; font: 600 .9375rem / 1.3 var(--text); letter-spacing: .005em; color: var(--kohle); }
.fn-gruppe h3::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-linie); }
.fn-liste { display: grid; gap: .75rem; margin-top: 1rem; list-style: none; }
.fn {
  padding: 1.1rem 1.15rem 1.2rem; border-radius: var(--r-fenster); background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 14px 28px -24px rgba(16, 24, 40, .35);
}
/* Symbole als kleine Kärtchen (KI-generiert, Stil wie die Leistungsbilder, seit 07.10.2026 statt gezeichneter Strichsymbole) */
.fn-symbol { display: block; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--leiste-hell); }   /* Grau wie die Titelleisten; die Symbole sind auf genau diesem Grau erzeugt */
.fn-symbol img { width: 100%; height: 100%; }
.rt-liste .fn-symbol { margin-bottom: .8rem; }
.fn h4 { margin-top: .8rem; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.008em; hyphens: manual; }
.fn p { margin-top: .4rem; font-size: .9375rem; line-height: 1.5; color: var(--begleit); }
.fn-hinweis { margin-top: 2rem; }

/* Datenschutz und Barrierefreiheit: zwei Spalten, darunter der Website-Check als Fenster */
.rt-raster { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.rt-kopf .lead { max-width: 30em; }
.rt-bild { margin-top: 2.25rem; max-width: 380px; overflow: hidden; }
.rt-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rt-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); list-style: none; }
.rt-liste li { padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.rt-marke { display: inline-block; padding: .3em .55em; border-radius: var(--r-knopf); background: var(--flaeche); font: 500 .75rem / 1 var(--mono); color: var(--kohle); }
.rt-liste h3 { margin-top: .7rem; font-size: 1.1875rem; line-height: 1.25; }
.rt-liste p { margin-top: .45rem; font-size: .9375rem; line-height: 1.55; color: var(--begleit); }
.rt-hinweis { margin-top: 2rem; }
.rt-hinweis a { color: var(--kohle); text-underline-offset: .2em; }
@media (max-width: 899px) { .rt-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .rt-liste { grid-template-columns: minmax(0, 1fr); } }
.recht-check { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.4rem; border-top: 1px solid var(--linie); font-weight: 600; }

/* Kostenloser Website-Check: links der Weg vom Check bis zur Übergabe, rechts eine Beispiel-Auswertung als Dokument */
.ck-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ck-weg { display: grid; gap: 1.1rem; margin-top: 2rem; padding: 0; list-style: none; counter-reset: ck; }
.ck-weg li { position: relative; padding-left: 3rem; counter-increment: ck; }
.ck-weg li::before {
  content: counter(ck); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--kohle); color: var(--grund); font: 600 .875rem / 1 var(--kopf);
}
.ck-weg li:first-child::before { background: var(--akzent); color: var(--kohle); }
.ck-weg li:not(:last-child)::after { content: ''; position: absolute; left: calc(1rem - .5px); top: 2.1rem; bottom: -1rem; width: 1px; background: var(--linie); }
.ck-weg h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.008em; }
.ck-weg p { margin-top: .25rem; max-width: 34em; font-size: .9375rem; line-height: 1.5; color: var(--begleit); }
.ck-fenster { width: 100%; max-width: 480px; justify-self: end; }
.ck-blatt { padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.ck-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linie); }
.ck-kopf b { font: 600 1.1875rem / 1.2 var(--kopf); letter-spacing: -.01em; }
.ck-kopf span { font: 400 .75rem / 1 var(--mono); color: var(--begleit-tief); }
.ck-liste { list-style: none; }
.ck-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.ck-name { font-size: .9375rem; font-weight: 600; }
.ck-befund { grid-column: 1; font-size: .8125rem; line-height: 1.4; color: var(--begleit-tief); }
.ck-stufe { grid-column: 2; grid-row: 1 / span 2; padding: .35em .65em; border-radius: 99px; font: 600 .75rem / 1 var(--text); white-space: nowrap; }
.ck-gut { background: var(--flaeche); color: var(--kohle); }
.ck-ausbaufaehig { background: rgb(from var(--akzent) r g b / .35); color: var(--kohle); }
.ck-kritisch { background: var(--kohle); color: var(--grund); }
.ck-fazit { margin-top: 1rem; font-size: .875rem; color: var(--kohle); }
.ck-fazit b { font-weight: 700; }
/* Einstieg: Link zum Website-Check neben dem Hauptknopf */
@media (pointer: coarse) { .textlink { min-height: 44px; } }
/* /leistungen: Backend jetzt auf hellem Grund (zwischen Website-Check und Drucksachen, beide grau) */
.unterseite .blatt > .backend-abschnitt { background: var(--grund); --begleit: #5A6170; }

/* Startseite: Das Blatt beginnt mit dem Apricot-Band; dessen obere Ecken folgen der Rundung des Blatts */
main:not(.unterseite) .blatt > .abschnitt:first-child { border-radius: var(--r-blatt) var(--r-blatt) 0 0; }
/* Menü am Handy: sieben Einträge, alle mit gestaffeltem Einblenden */
.menue.offen li:nth-child(7) a { transition-delay: .24s; }

/* /ueber-mich: Titel als H1; am Handy liegt er wie bisher unten im Foto */
@media (max-width: 639px) {
  .ueber-text .pfad { grid-column: 1; grid-row: 1; }
  .ueber .ueber-text h1 {
    position: relative; z-index: 2; grid-column: 1; grid-row: 2; align-self: end; margin: 0; padding: 0 20px 18px;
    font-size: var(--h2); line-height: 1.08; color: var(--weiss); text-shadow: 0 1px 14px rgba(16, 24, 40, .5);
  }
}
.blatt > .fakten-abschnitt, .blatt > .ueber-ratgeber { background: var(--flaeche); --begleit: var(--begleit-tief); }
.aw-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.aw-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.aw-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); list-style: none; }
.aw-liste li { padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.aw-liste h3 { font-size: 1.1875rem; line-height: 1.25; }
.aw-liste p { margin-top: .5rem; font-size: .9375rem; line-height: 1.55; color: var(--begleit); }
.ur-raster { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.ur-raster h2 { max-width: 16em; }
@media (max-width: 899px) {
  .aw-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .aw-liste { grid-template-columns: minmax(0, 1fr); }
}

/* /leistungen: Website-Check als kurzer Hinweis (ausführlich auf /website-check) */
.blatt > .check-kurz { background: var(--flaeche); --begleit: var(--begleit-tief); }
.ck-aktion, .ckk-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ck-text > .ck-aktion { margin-top: 2rem; }

/* /website-check */
.blatt > .check-start, .blatt > .check-weg { background: var(--flaeche); --begleit: var(--begleit-tief); }
.check-start h1 { max-width: 12em; }
.ckp-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); list-style: none; }
.ckp-liste li { padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.ckp-liste h3 { margin-top: .8rem; font-size: 1.1875rem; line-height: 1.25; }
.ckp-liste p { margin-top: .45rem; max-width: 36em; font-size: .9375rem; line-height: 1.55; color: var(--begleit); }
.ckw-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }   /* Auswahl 08.10.2026: zwei gleich hohe Spalten */
.ckw-raster .ck-weg { margin-top: 0; }
@media (max-width: 899px) {
  .ckp-liste, .ckw-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Funktionen am Handy: je Gruppe eine Reihe zum Wischen statt 14 Kacheln untereinander */
@media (max-width: 639px) {
  .fn-liste {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--rand)); padding: 2px var(--rand) 1rem; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .fn-liste::-webkit-scrollbar { display: none; }
  .fn { scroll-snap-align: start; }
  .fn-gruppen { gap: 1.75rem; }
}

/* Fuß: neun Ziele in der Übersicht, zwei Spalten */
.fuss-gruppe.fuss-uebersicht ul { grid-template-rows: repeat(5, auto); }

@media (max-width: 899px) {
  .pk-raster { grid-template-columns: minmax(0, 1fr); }
  .pk-stapel li { width: 78%; }
  .fn-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .betreuung, .ck-raster { grid-template-columns: minmax(0, 1fr); }
  .ck-fenster { justify-self: start; }
}
@media (max-width: 639px) {
  .fn-gruppen { grid-template-columns: minmax(0, 1fr); }
  .betreuung-liste .knopf { width: 100%; }
}
@media (max-width: 639px) {
  .pk-stapel li { width: 84%; }
  .pk-stapel li:nth-child(2) { margin-top: 26%; }
  .pk-stapel li:nth-child(3) { margin-top: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-stapel li:hover > .pk-fenster, .pk-fenster:focus-visible { transform: none; }
}

/* /projekte: zwei weitere Projekte (Gebäudereinigung, Kfz-Werkstatt), gleiche Bausteine wie die anderen Mini-Seiten */
.mini-reinigung .m-bild, .mini-kfz .m-bild { box-shadow: 0 1.4cqi 3cqi -2cqi rgba(16, 24, 40, .35); }
.m-treffer { display: flex; align-items: center; gap: .8cqi; margin-bottom: 1.2cqi; }
.m-treffer em { padding: .45cqi .75cqi; border-radius: .4cqi; background: var(--akzent); font: 700 1.2cqi / 1 var(--text); font-style: normal; color: var(--kohle); }
.m-treffer i { flex: 1; display: block; height: .9cqi; border-radius: 1cqi; background: currentColor; opacity: .16; }
.mini-kfz .m-kachel { padding: 1.3cqi 1.3cqi 1.5cqi; border-radius: .8cqi; background: #F3F4F6; }
.mini-kfz .m-kachel i { aspect-ratio: 1.5; border-radius: 0; }
.mini-kfz.schmal .m-kachel { padding: 2.6cqi; border-radius: 1.6cqi; }

/* Knöpfe (07.10.2026): leicht abgerundete Ecken statt 4 px. Der Ton-Look für Fenster wurde getestet und wieder verworfen
   (Lesbarkeit, Zeichnungen in den Fenstern passten nicht mehr); die KI-Bilder bleiben als eigene Illustrationen in Kärtchen. */
:root { --r-knopf: 10px; }
/* /leistungen, Drucksachen: KI-Bild statt Zeichnung, gleiche Höhe wie das Video-Fenster daneben */
.extra > .druck-bild { align-self: end; overflow: hidden; max-width: 520px; }   /* ohne Rahmen: Bildgrund = Abschnittsgrau */
.druck-bild img { width: 100%; aspect-ratio: 16 / 10.4; object-fit: cover; }


/* ================================================================ Feinschliff 07.10.2026: Abstände, Kacheln, Textseiten */
/* Weniger Leerraum zwischen den Abschnitten (vorher bis 9,5rem oben und unten, das wirkte wie leere Flächen) */
:root { --abstand: clamp(4rem, 7.5vw, 6.75rem); }

/* Kacheln: Symbol links neben dem Titel, Text darunter über die volle Breite (vorher stand das Symbol allein darüber) */
.fn, .ckp-liste li, .rt-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .85rem; align-items: center; }
.fn .fn-symbol, .ckp-liste .fn-symbol, .rt-liste .fn-symbol { width: 44px; height: 44px; margin: 0; border-radius: 9px; }
.fn h4, .ckp-liste h3 { margin-top: 0; }
.fn p, .ckp-liste p, .rt-liste p { grid-column: 1 / -1; margin-top: .7rem; }
.rt-liste .fn-symbol { grid-row: 1 / span 2; }
.rt-liste .rt-marke { justify-self: start; align-self: end; }
.rt-liste h3 { align-self: start; margin-top: .3rem; }
/* Über mich: Zahl links, Symbol rechts daneben, Erklärung darunter */

/* /projekte: Fotograf (neue Website mit Galerien): großes Foto als Einstieg, darunter die Galerie */
.mini-foto { background: var(--weiss); }
.m-foto-held { flex: none; position: relative; overflow: hidden; aspect-ratio: 400 / 112; border-radius: 1cqi; }   /* flex: none, sonst drückt die Galerie das Foto auf null */
.m-foto-held svg { display: block; width: 100%; height: 100%; }
.m-foto-held .m-text { position: absolute; left: 4cqi; bottom: 3.4cqi; width: 36%; color: var(--grund); }
.m-foto-held .m-h { margin-bottom: 1.4cqi; }
.m-foto-held .m-z { opacity: .6; }
.m-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqi; min-height: 0; overflow: hidden; }
.m-galerie i { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: .6cqi; }
.m-galerie svg { display: block; width: 100%; height: 100%; }
.mini-foto.schmal .m-foto-held { aspect-ratio: 4 / 4.4; border-radius: 2cqi; }
.mini-foto.schmal .m-foto-held .m-text { left: 7cqi; bottom: 7cqi; width: 70%; }
.mini-foto.schmal .m-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6cqi; }
.mini-foto.schmal .m-galerie i { border-radius: 1.4cqi; }

/* Textseiten (Impressum, Datenschutz, Barrierefreiheit): Text links in Lesebreite, rechts eine mitlaufende Leiste
   mit Sprungmarken und Kontakt (vorher war die rechte Hälfte leer) */
.rechtstext .rahmen.text-raster { display: grid; grid-template-columns: minmax(0, 46rem) minmax(15rem, 19rem); justify-content: space-between; gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
.rechtstext .rahmen.text-raster > * { max-width: none; }
.text-spalte h2 { scroll-margin-top: 110px; }
.text-spalte > :first-child { margin-top: 0; }
.text-leiste { position: sticky; top: 112px; display: grid; gap: 1rem; margin-top: .4rem; }
.tl-block { padding: 1.15rem 1.25rem 1.25rem; border-radius: var(--r-fenster); background: var(--weiss); box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 14px 28px -24px rgba(16, 24, 40, .35); }
.text-leiste .tl-titel { margin: 0; font: 600 .875rem / 1.3 var(--text); color: var(--begleit-tief); }
.tl-inhalt ol { margin: .55rem 0 0; padding: 0; list-style: none; }
.text-leiste li { margin: 0; }
.tl-inhalt a { display: block; padding: .32rem 0; font-size: .9375rem; line-height: 1.35; color: var(--kohle); text-decoration: none; }
.tl-inhalt a:hover { text-decoration: underline; text-decoration-color: var(--akzent-linie); text-underline-offset: .2em; }
.text-leiste .tl-kontakt p:not(.tl-titel) { margin-top: .45rem; font-size: .9375rem; line-height: 1.5; color: var(--begleit-tief); }
.tl-wege { display: grid; gap: .3rem; margin-top: .7rem; }
.text-leiste .tl-wege a { font-weight: 600; font-size: .9375rem; text-underline-offset: .2em; }
@media (max-width: 1023px) {
  .rechtstext .rahmen.text-raster { grid-template-columns: minmax(0, 1fr); }
  .text-leiste { display: none; }
}

/* /leistungen, Website-Check-Band: Überschrift links über zwei Zeilen, rechts Beschreibung und Knöpfe (vorher drei kurze Zeilen und rechts leer) */
/* Band „Website-Check“ auf /leistungen: alles mittig untereinander (Henning 08.10.2026) */
.ckk-raster { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ckk-text { display: grid; justify-items: center; }
.ckk-text h2 { max-width: 18em; margin-inline: auto; }
.ckk-aktion { justify-content: center; margin-top: 1.25rem; }
.ckk-aktion > p { flex: 0 0 100%; margin: 0 0 .75rem; padding-inline: max(0px, calc((100% - 38em) / 2)); font-size: var(--lead); line-height: 1.6; color: var(--begleit); }   /* ganze Zeile, Knöpfe darunter */
.mini-foto:not(.schmal) .m-galerie i { aspect-ratio: 16 / 10; }
/* Lesbare Zeilenlängen (Prüfer 07.10.2026): Hinweise unter Rastern und Fließtext der Textseiten höchstens ~75 Zeichen */
.rt-hinweis, .preis-hinweis { max-width: 44rem; }   /* .fn-hinweis: eine Zeile */
.text-spalte > p, .text-spalte > ul { max-width: 40rem; }
.fn h4 { text-wrap: pretty; }   /* „Termin- und“ zusammen statt „Termin-“ allein in der ersten Zeile */

/* ================================================================ Bewegung, einheitlich (07.10.2026)
   Gruppen (Kacheln, Listen, Karten) erscheinen beim Hinscrollen leicht nacheinander von unten, Bilder blenden mit einer
   kleinen Vergrößerung ein (Modul 3a in site.js). Unter der Maus heben sich Kacheln an, Symbole wachsen ein wenig. */
.auftritt.zu { opacity: 0; translate: 0 22px; }
.auftritt.zu:is(.betreuung-bild, .rt-bild, .ck-bild, .ckw-bild, .druck-bild, .rg-bild) { translate: none; scale: .96; }
.auftritt.zu.auf {
  opacity: 1; translate: none; scale: none;
  transition: opacity .7s var(--aus) var(--auftritt-verzug, 0ms), translate .9s var(--feder) var(--auftritt-verzug, 0ms), scale .9s var(--aus) var(--auftritt-verzug, 0ms);
}
/* Unter der Maus hebt sich die ganze Kachel ein Stück an, Symbol und Schatten gehen mit (Henning 08.10.2026: vorher bewegte sich
   nur das Symbol und ein Rahmen tauchte auf, das wirkte unruhig). Gleicher Schatten, nur weicher und tiefer, kein neuer Rand. */
.fn, .rg-liste .rg-eintrag { transition: translate .45s var(--aus), box-shadow .45s var(--aus); }
@media (hover: hover) {
  .fn:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 26px 34px -26px rgba(16, 24, 40, .38); }
}
@media (prefers-reduced-motion: reduce) {
  .auftritt.zu { opacity: 1; translate: none; scale: none; }
  .fn:hover { translate: none; }
}

/* ================================================================ /projekte als Raster (07.10.2026)
   Zwei Reihen mit je drei Projekten: oben Computer und Handy (die Mini-Seiten rechnen in Containerbreite und
   skalieren mit), darunter der Steckbrief. Am Tablet zwei, am Handy eine Spalte. */
.prj-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.prj-karte { display: flex; flex-direction: column; scroll-margin-top: 110px; }
.prj-karte .ansicht { position: relative; padding-bottom: 7%; }
.prj-karte .browser-gross { width: 88%; }
.prj-karte .browser-gross .adresse { flex-basis: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prj-karte .handy { --w: 25%; top: 26%; }
.prj-text { flex: 1; margin-top: 1.25rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.prj-text h2 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -.012em; hyphens: manual; }
.prj-text .sb-text { margin-top: .8rem; font-size: .9375rem; line-height: 1.55; }
.prj-text .sb-punkte { margin-top: 1rem; }
.prj-hinweis { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1023px) { .prj-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .prj-raster { grid-template-columns: minmax(0, 1fr); } .prj-karte .handy { --w: 26%; } }

/* ================================================================ Über mich (Auswahl Henning 08.10.2026)
   „Auf einen Blick“: seit dem späten 08.10.2026 große Zahlen im Kreuz mit Symbolen (.fk-kreuz, weiter unten).
   „So arbeite ich“ mit den Symbolen der Seite. Ratgeber-Hinweis auf dem Apricot-Band (dunkler Knopf wie auf der Startseite). */
.fakten-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.fakten-kopf .lead { margin-top: 1rem; max-width: 22em; }
.aw-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.aw-liste .fn-symbol { width: 44px; height: 44px; border-radius: 9px; }
.aw-liste p { grid-column: 1 / -1; margin-top: .7rem; }
.blatt > .ueber-ratgeber { background: var(--akzent); --begleit: var(--begleit-tief); }
.ueber-ratgeber .lead { color: var(--begleit-tief); }
@media (max-width: 899px) { .fakten-raster { grid-template-columns: minmax(0, 1fr); } }
/* Beispiel-Auswertung (Startseite, /website-check): kippt unter der Maus wie die anderen Fenster (Modul 3b) */
.ck-fenster { transition: transform .5s var(--aus), box-shadow .6s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .bewegung .ck-fenster { transform: perspective(1200px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); backface-visibility: hidden; will-change: transform; }
  .bewegung .kippt.ck-fenster { box-shadow: var(--schatten-hoch); }
}
/* Die großen Leistungskarten der Startseite kommen deutlicher herein (nur vor dem Auftauchen: vorher blieb die Regel auch nach .auf
   stehen, die Karten waren dauerhaft 3 % kleiner und 40 px tiefer, der Website-Check rutschte auf den Knopf, 08.10.2026) */
.auftritt.zu.lb:not(.auf) { translate: 0 40px; scale: .97; }
.auftritt.zu.auf.lb-check { transition-delay: 0ms; }   /* die breite Karte steht allein in ihrer Reihe: ohne Staffel-Verzug */

/* /projekte, „Was noch dazu passt“: drei Leistungskarten nebeneinander (08.10.2026) */
.prj-dazu .lead { margin-top: 1rem; max-width: 40em; }
.prj-dazu-raster { margin-top: clamp(2rem, 4vw, 3rem); }
.prj-dazu-raster .lb { grid-column: span 2; }
.prj-dazu-raster .lb-check > a { flex-direction: column; }
.prj-dazu-raster .lb-check .lb-bild { flex: none; aspect-ratio: 16 / 8.4; }
.prj-dazu-raster .lb-check .lb-text { justify-content: flex-start; padding-inline: 1.25rem; }
.prj-dazu-raster .lb .lb-bild { aspect-ratio: 16 / 9; }
@media (max-width: 899px) { .prj-dazu-raster .lb { grid-column: 1 / -1; } }

/* Backend-Beispiel: Fotos austauschen (08.10.2026, statt Bewertungen) */
.vb-foto-mini { flex: none; width: 7.4cqi; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .9cqi; box-shadow: 0 0 0 1px var(--linie); }
.vb-foto-mini svg { display: block; width: 100%; height: 100%; }
.vb-foto-mini > span { height: 100%; }   /* .vb-v1/.vb-v2: nach dem Austauschen zeigt auch die Liste das neue Foto */
.vb-m-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqi; margin-top: 4cqi; }
.vb-m-pdf.vb-m-foto { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; }
.vb-m-foto b { height: 100%; }
.vb-m-foto svg { display: block; width: 100%; height: 100%; }
/* Ablauf (Henning 08.10.2026): Jedes Fenster soll ganz zu sehen sein, bevor das nächste darüber gleitet. Die Fenster sind etwa
   450–490 px hoch, der Scrollweg je Schritt war 46vh (bei 900 px Höhe nur 414 px): darum war das vorige schon angeschnitten. */
@media (min-width: 1024px) and (min-height: 620px) {
  .ablauf-raster { --ab-schritt: max(58vh, 560px); }
}

/* SEO-Runde 3 (08.10.2026): Titel der nicht aktiven Ablauf-Schritte mit ausreichendem Kontrast (vorher .4, etwa 2,3 : 1) */
.ablauf-raster.stapelt .ab-fortschritt li:not(.aktiv) .fs-titel { opacity: .68; }

/* ================================================================ /projekte: „Wo ich arbeite“ (Karte als Inline-SVG, 08.10.2026) */
.ek-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ek-text .lead { margin-top: 1rem; max-width: 34em; }
.ek-legende { display: grid; gap: .55rem; margin-top: 1.6rem; list-style: none; font-size: .9375rem; color: var(--begleit); }
.ek-legende li { display: flex; align-items: center; gap: .7rem; }
.ek-legende i { flex: none; display: inline-grid; place-items: center; }
.ek-l-vorort { width: 22px; height: 14px; border-radius: 3px; background: var(--flaeche); box-shadow: inset 0 0 0 1.5px var(--stein); }
.ek-l-online { width: 22px; height: 14px; border-radius: 3px; border: 1.5px dashed var(--akzent-linie); }
.ek-l-pin { width: 20px; height: 20px; border-radius: 50%; background: var(--akzent); font: 600 .75rem / 1 var(--text); font-style: normal; color: var(--kohle); }
.ek-liste-titel { margin-top: 1.8rem; font-size: 1.0625rem; }
.ek-liste { display: grid; gap: .45rem; margin-top: .7rem; list-style: none; font-size: .9375rem; line-height: 1.5; color: var(--begleit); }
.ek-liste b { color: var(--kohle); }
.ek-liste a { color: var(--kohle); text-underline-offset: .2em; text-decoration-color: var(--akzent-linie); }
.ek-karte { margin: 0; }
.ek-svg { display: block; width: 100%; height: auto; max-height: 76vh; }
.ek-karte figcaption { margin-top: .6rem; color: var(--begleit-tief); }
.ek-karte figcaption a { color: inherit; text-underline-offset: .2em; }
.ek-kreis { fill: var(--flaeche); stroke: var(--stein); stroke-width: 1.5; stroke-linejoin: round; }
.ek-ring { fill: none; stroke: var(--akzent-linie); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .7; }
.ek-ort { fill: var(--kohle); }
.ek-standort circle { fill: var(--weiss); stroke: var(--kohle); stroke-width: 2.5; }
.ek-standort .ek-kern { fill: var(--kohle); stroke: none; }
.ek-pin circle { fill: var(--akzent); stroke: var(--weiss); stroke-width: 2; }
.ek-pin text { font: 600 12px / 1 var(--text); fill: var(--kohle); }
.ek-name { font: 500 14px / 1 var(--text); fill: #1F2430; paint-order: stroke; stroke: var(--grund); stroke-width: 4px; stroke-linejoin: round; }
.ek-name-stark { font-weight: 700; fill: var(--kohle); }
.ek-online path { fill: none; stroke: var(--kohle); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ek-online text { font: 600 13px / 1 var(--text); fill: var(--kohle); paint-order: stroke; stroke: var(--grund); stroke-width: 4px; }
@media (max-width: 899px) { .ek-raster { grid-template-columns: minmax(0, 1fr); } .ek-karte { order: -1; } }
@media (max-width: 639px) {
  .ek-name { font-size: 19px; }   /* am Handy alle Orte beschriftet (SEO-Runde 5, #8), Orte mit Projekt größer */
  .ek-name-stark { font-size: 22px; }
  .ek-pin text { font-size: 15px; }
  .ek-online text { font-size: 19px; }
}
/* Tippflächen mindestens 24 px hoch (WCAG 2.5.8): Links in der Ortsliste und im Kartennachweis */
.ek-liste a, .ek-karte figcaption a { display: inline-block; padding-block: .2rem; }

/* Startseite, Wer steckt dahinter (SEO-Runde 4, 08.10.2026), ausführlich auf /ueber-mich */
.pn-raster { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(2rem, 5vw, 4rem); }
.pn-bild { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: var(--flaeche); }
.pn-text h2 { max-width: 18em; }
.pn-text .lead { max-width: 38em; }
@media (max-width: 899px) {
  .pn-raster { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .pn-raster > .knopf { grid-column: 2; justify-self: start; }
}
@media (max-width: 639px) {
  .pn-raster { grid-template-columns: minmax(0, 1fr); }
  .pn-raster > .knopf { grid-column: 1; }
  .pn-bild { width: 96px; height: 96px; }
}
/* Startseite, Website-Check (Mittelweg 08.10.2026): statt der vier Schritte ein Satz zum weiteren Weg */
.ck-danach { margin-top: 1rem; max-width: 36em; font-size: var(--lead); line-height: 1.6; color: var(--begleit); }   /* gleiche Schrift wie der Text darüber */
.ck-text > .ck-danach + .ck-aktion { margin-top: 2rem; }

/* Karte „Wo ich arbeite“, Fassung K1 „Ruhig gezeichnet“ (Henning 08.10.2026, statt Radar): Beim Erscheinen (site.js 3a setzt .auf)
   zeichnet sich die Kreisgrenze, dann kommen Ringe, Orte und Namen, zuletzt fallen die Projekt-Punkte ein. Danach steht alles still.
   Punkt unter Maus, Tastatur oder Finger: Kärtchen mit den Projekten dort (site.js), Ort in der Liste leuchtet. Ohne Bewegung: alles sofort da. */
.ek-karte { position: relative; }
.ek-pin { cursor: pointer; outline: none; transition: translate .3s var(--feder); }
.ek-pin:focus-visible circle { stroke: var(--kohle); stroke-width: 2.5; }
.ek-pin.an, .ek-pin:hover { translate: 0 -3px; }
.ek-pin.an circle { fill: var(--kohle); }
.ek-pin.an text { fill: var(--grund); }
.ek-liste li { margin-inline: -.6rem; padding: .15rem .6rem; border-radius: 8px; transition: background-color .25s var(--weich); }
.ek-liste li.an, .ek-liste li:is(:hover, :focus-within) { background: rgb(from var(--akzent) r g b / .22); }
.ek-info { position: absolute; z-index: 2; width: max-content; max-width: min(300px, 80vw); padding: .85rem 1rem .9rem; border-radius: var(--r-fenster);
  background: var(--weiss); box-shadow: var(--schatten-hoch); font-size: .9375rem; line-height: 1.4;
  translate: -50% calc(-100% - 14px); opacity: 0; scale: .96; transform-origin: 50% 100%; transition: opacity .2s var(--weich), scale .25s var(--feder); pointer-events: none; }
.ek-info:not(.offen) { visibility: hidden; transition: opacity .2s var(--weich), scale .25s var(--feder), visibility 0s .25s; }   /* geschlossen: Links nicht per Tab erreichbar */
.ek-info.offen { opacity: 1; scale: 1; pointer-events: auto; visibility: visible; }
.ek-info::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: var(--weiss); }
.ek-info b { display: block; font: 600 1.0625rem / 1.25 var(--kopf); color: var(--kohle); }
.ek-info > span { display: block; margin-top: .1rem; font-size: .8125rem; color: var(--begleit); }
.ek-info ul { display: grid; gap: .45rem; margin-top: .65rem; list-style: none; }
.ek-info a { display: inline-block; padding-block: .1rem; color: var(--kohle); font-weight: 600; text-underline-offset: .2em; text-decoration-color: var(--akzent-linie); }
.ek-info small { display: block; font-size: .8125rem; color: var(--begleit); }
@media (prefers-reduced-motion: no-preference) {
  .ek-karte.zu:not(.auf) :is(.ek-ring, .ek-ort, .ek-standort, .ek-name, .ek-pin, .ek-online) { opacity: 0; }
  .ek-karte.zu:not(.auf) .ek-kreis { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  .ek-karte.auf .ek-kreis { stroke-dasharray: 1; animation: ek-linie 1.6s var(--weich) both, ek-flaeche .8s var(--weich) 1.2s both; }
  .ek-karte.auf :is(.ek-ring, .ek-ort, .ek-standort, .ek-name, .ek-online) { animation: ek-ein .6s var(--weich) 1.5s both; }
  .ek-karte.auf .ek-pin { animation: ek-pin-ein .6s var(--feder) calc(1.9s + var(--nr) * .18s) backwards; }   /* backwards: danach wirkt das Anheben */
}
@keyframes ek-linie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ek-flaeche { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes ek-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ek-pin-ein { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }

/* Erreichbarkeit (08.10.2026): Satz unter den Kontaktwegen, Zeiten im Fuß unter der Telefonnummer */
.wege-hinweis { margin-top: 1rem; font-size: .9375rem; color: var(--begleit-tief); }
.fuss-zeiten { display: block; font-size: .8125rem; color: var(--begleit-tief); }

/* Farbwechsel statt fließender Übergänge: Startseite „Wer steckt dahinter“ -> Website-Check, /projekte Karte -> „Was noch dazu passt“ */
.blatt > .person-kurz + .check-abschnitt { background: var(--flaeche); --begleit: var(--begleit-tief); }
/* „Was noch dazu passt“ in Apricot wie die Leistungen der Startseite: Die Kartenbilder haben selbst den grauen Grund */
.blatt > .prj-dazu { background: var(--akzent); --begleit: var(--begleit-tief); }
/* Karte: Impuls aus Hespe, dreimal beim Erscheinen, dann Ruhe; ohne Bewegung unsichtbar */
.ek-puls { fill: none; stroke: var(--akzent-linie); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes ek-puls { from { scale: .08; opacity: .9; } to { scale: 1; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ek-karte.auf .ek-puls { animation: ek-puls 2.2s var(--aus) 1.6s 3; }
}

/* Henning 08.10.2026 spät ------------------------------------------------------------------------------------------------ */
/* Über mich, „Auf einen Blick“ (Fassung U2 mit Symbolen): vier große Zahlen im Kreuz, feine Linien, keine Kästen */
.fk-kreuz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; list-style: none; }
.fk { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.4rem); }
.fk:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(16, 24, 40, .14); }
.fk:nth-child(even) { padding-right: 0; }
.fk:nth-child(-n+2) { border-bottom: 1px solid rgba(16, 24, 40, .14); }
.fk .fn-symbol { width: 48px; height: 48px; margin: 0; border-radius: 10px; }
.fk-zahl { font: 600 clamp(3rem, 2.1rem + 3.2vw, 5.2rem) / .95 var(--kopf); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--kohle); }
.fk-zahl small { margin-left: .08em; font-size: .3em; letter-spacing: -.01em; }
.fk-text { grid-column: 1 / -1; max-width: 17em; font-size: 1rem; line-height: 1.45; color: var(--begleit-tief); }
@media (max-width: 479px) {
  .fk { grid-template-columns: minmax(0, 1fr); padding: 1.2rem .9rem; }
  .fk:nth-child(odd) { padding-left: 0; }
  .fk:nth-child(even) { padding-right: 0; }
  .fk .fn-symbol { width: 40px; height: 40px; }
}


/* Häufige Fragen im Chat: Die Fragen erscheinen der Reihe nach (vorher zählte der Verzug ab dem Hinweis über den Fragen und reichte
   nur bis zur sechsten Frage; auf /leistungen mit acht Fragen kamen die letzten beiden zuerst) */
.chat.pop.zu.auf .chat-paar:nth-of-type(1) .chat-frage { transition-delay: .35s, .35s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(2) .chat-frage { transition-delay: .4s, .4s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(3) .chat-frage { transition-delay: .45s, .45s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(4) .chat-frage { transition-delay: .5s, .5s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(5) .chat-frage { transition-delay: .55s, .55s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(6) .chat-frage { transition-delay: .6s, .6s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(7) .chat-frage { transition-delay: .65s, .65s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(8) .chat-frage { transition-delay: .7s, .7s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(9) .chat-frage { transition-delay: .75s, .75s, 0s; }
.chat.pop.zu.auf .chat-paar:nth-of-type(10) .chat-frage { transition-delay: .8s, .8s, 0s; }
@media (prefers-reduced-motion: reduce) { .ek-pin { transition: none; } }


/* ================================================================ Premium-Runde 09.10.2026 (Feinschliff nach Emil Kowalski)
   Alle Änderungen dieser Runde stehen gesammelt hier (Nummern wie in VORSCHLAEGE-PREMIUM.md). Gestaltung unverändert,
   nur Bewegung, Druck- und Hover-Zustände, ein Abstand. Übertrag: dieser Block nach werkstatt/struktur/struktur.css. */

/* P1 · Handy-Menü ohne Doppelbild: erst steht die Fläche (180 ms), dann kommen die Einträge (ab 120 ms, 30 ms gestaffelt).
   Zu geht schneller als auf: alles gemeinsam in 150 ms, ohne Staffel und ohne Bewegung. */
.menue { transition: opacity .18s var(--aus); }
.menue li a, .menue .knopf, .menue-telefon { opacity: 0; translate: 0 12px; transition: opacity .26s var(--aus), translate .26s var(--aus); }
.menue.offen li a, .menue.offen .knopf, .menue.offen .menue-telefon { opacity: 1; translate: 0 0; }
.menue.offen li:nth-child(1) a { transition-delay: .04s; }
.menue.offen li:nth-child(2) a { transition-delay: .065s; }
.menue.offen li:nth-child(3) a { transition-delay: .09s; }
.menue.offen li:nth-child(4) a { transition-delay: .115s; }
.menue.offen li:nth-child(5) a { transition-delay: .14s; }
.menue.offen li:nth-child(6) a { transition-delay: .165s; }
.menue.offen li:nth-child(7) a { transition-delay: .19s; }
.menue.offen .knopf, .menue.offen .menue-telefon { transition-delay: .215s; }
.menue:not(.offen) { transition-duration: .15s; }
.menue:not(.offen) :is(li a, .knopf, .menue-telefon) { transition: opacity .12s var(--aus), translate 0s linear .15s; }

/* P2 · Einstieg: „Ich mache sie sichtbar.“ beginnt blass (vorher stand er die ersten 0,15 s dunkelgrau da und sprang dann um).
   Das Skript setzt --licht direkt am Titel und überschreibt diesen Startwert. */
.bewegung .held-titel { --licht: 0; }

/* P3 · Einstieg: Der Editor kommt ohne grauen Zwischenzustand. Deckkraft in 220 ms, Bewegung 600 ms, Unschärfe nur 2 px. */
.bewegung .szene.auftakt .editor { animation: editor-auf .6s var(--feder) 4.35s backwards, editor-deck .22s var(--aus) 4.35s backwards; }
@keyframes editor-auf { from { translate: -12px 24px; scale: .96; filter: blur(2px); } }
@keyframes editor-deck { from { opacity: 0; } }

/* P4 · Nichts bewegt sich länger als 5 Sekunden von selbst: Cursor blinkt nach dem Tippen 4-mal (gut 4 s) und steht dann ruhig,
   Kartenpuls 2-mal (4,4 s), Telefon-Welle 6-mal (4,2 s), Frist-Punkt 3-mal (4,8 s) */
.caret, .fehler-caret { animation-iteration-count: 4; }
@media (prefers-reduced-motion: no-preference) { .ek-karte.auf .ek-puls { animation-iteration-count: 2; } }
.animiert .ab-anruf.lebt .ab-welle i { animation-iteration-count: 6; }
.bewegung .pop.auf .preis-frist::before { animation-iteration-count: 3; }

/* P5 · Alles, was man drücken kann, gibt nach: 97 % beim Drücken (120 ms), zurück in 200 ms. Große Flächen 98 %.
   Ganze Zeilen (FAQ-Liste am Computer, Akkordeon) schrumpfen nicht, dort reagiert der Kreis. */
.knopf { transition: background-color .2s var(--weich), transform .2s var(--aus), box-shadow .2s var(--weich); }
.knopf:active { transform: scale(.97); transition-duration: .12s; }
.lb > a, .pk-fenster, .demo-schalter, .menue-knopf, .schnellkontakt a, .held-stopp, .film-vollbild, .vb-speichern, .vb-knopf { -webkit-tap-highlight-color: transparent; }
.lb > a { transition: transform .25s var(--aus), box-shadow .25s var(--aus), scale .2s var(--aus); }
.pk-fenster { transition: transform .28s var(--aus), box-shadow .28s var(--aus), scale .2s var(--aus); }
.demo-schalter, .menue-knopf, .schnellkontakt a, .held-stopp { transition: scale .2s var(--aus), background-color .2s var(--weich), color .2s var(--weich); }
.interesse span, .m-reiter button, .ab-nav button span { transition: background-color .2s var(--weich), color .2s var(--weich), box-shadow .2s var(--weich), scale .2s var(--aus); }
:is(.lb > a, .pk-fenster, .demo-schalter):active { scale: .98; transition-duration: .12s; }
:is(.menue-knopf, .held-stopp, .m-reiter button):active, .interesse input:active + span { scale: .97; transition-duration: .12s; }
.schnellkontakt a:active, .film-vollbild:active { scale: .95; transition-duration: .12s; }
.ab-nav button:active span { scale: .9; transition-duration: .12s; }
@media (max-width: 899px) { .chat.lebendig:not(.akkordeon) .chat-frage:active { scale: .97; transition: scale .12s var(--aus); } }
.chat.lebendig.akkordeon .chat-frage { -webkit-tap-highlight-color: transparent; }
.chat.lebendig.akkordeon .chat-frage::after { transition: rotate .3s var(--aus), background-color .3s var(--aus), scale .2s var(--aus); }
.chat.lebendig.akkordeon .chat-frage:active::after { scale: .88; transition-duration: .12s; }
/* Textlinks: kurzes Abdunkeln statt des grauen Tipp-Kastens, den Android sonst darüberlegt */
:is(.textlink, .fuss a, .pfad a, .menue li a, .ek-liste a, .tl-inhalt a, .nach-oben) { -webkit-tap-highlight-color: transparent; }
:is(.textlink, .fuss a, .pfad a, .ek-liste a, .tl-inhalt a, .nach-oben):active { opacity: .6; }
.menue.offen li a:active { opacity: .6; transition-delay: 0s; }

/* P6 · Hover nur mit echter Maus: Am Handy blieb eine angetippte Karte angehoben oder ein Chip dunkel. Hier werden die
   Hover-Zustände für Finger und Stift auf den Ruhezustand zurückgesetzt (Tastatur-Fokus bleibt sichtbar). */
@media not all and (hover: hover) and (pointer: fine) {
  .knopf:hover { --k-grund: var(--akzent); }
  .knopf-tinte:hover { --k-grund: var(--kohle); }
  .knopf-linie:hover { --k-grund: transparent; }
  .knopf:hover .knopf-pfeil, .chat.lebendig .chat-frage:hover svg, .aktion-hinweis:hover svg, .nach-oben:hover svg { translate: none; }
  .lb > a:hover:not(:focus-visible) { transform: none; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 24px 40px -30px rgba(16, 24, 40, .45); }
  .lb > a:hover .lb-bild img { scale: 1; }
  .pk-fenster:hover:not(:focus-visible) { transform: none; box-shadow: var(--schatten); }
  .play:hover { scale: 1; }
  .chat.lebendig:not(.akkordeon) .chat-frage:hover:not([aria-pressed='true']) { background: var(--weiss); }
  .interesse input:hover:not(:checked) + span { background: rgba(16, 24, 40, .06); }
  .aktion-hinweis:hover { background: rgb(from var(--akzent) r g b / .38); }
  .vb-reiter button:hover { background: none; }
  .vb-reiter button:hover:not([aria-selected='true']) { color: var(--begleit); }
  .vb-speichern:hover { background: var(--kohle); }
  .vb-knopf:hover { background: rgba(16, 24, 40, .07); }
  .ek-pin:hover:not(.an) { translate: none; }
  .ek-liste li:hover:not(.an):not(:focus-within) { background: none; }
  .wege a:hover .weg-symbol { background: var(--weiss); }
  .held-stopp:hover { background: rgba(16, 24, 40, .06); color: var(--begleit-tief); }
  .rg-liste .rg-eintrag:hover { translate: none; box-shadow: none; }
}

/* P7 · Projekt-Stapel (Startseite): Das Fenster unter der Maus kommt ganz nach vorn und hebt sich 8 px */
@media (hover: hover) and (pointer: fine) {
  .pk-stapel li:hover > .pk-fenster { transform: translateY(-8px); box-shadow: var(--schatten-hoch); }
}

/* P8 · Hover kürzer (vorher 0,45–0,7 s): Was man oft sieht, muss schnell sein */
.lb-bild img { transition: scale .4s var(--aus); }
.knopf-pfeil { transition: translate .3s var(--aus); }
.nav a { transition: color .15s var(--weich), background-color .15s var(--weich); }
.kopf { transition: transform .35s var(--aus); }
.fn, .rg-liste .rg-eintrag { transition: translate .25s var(--aus), box-shadow .25s var(--aus); }
.chat.lebendig .chat-frage svg, .aktion-hinweis svg, .nach-oben svg { transition: translate .25s var(--aus); }

/* P9 · Handy-FAQ klappt weich auf (240 ms) statt zu springen, zu in 180 ms. Geschlossen ist die Antwort unsichtbar und
   für Screenreader nicht da (visibility). Jede Antwort besteht aus einem Absatz, der in der Rasterzeile schrumpft. */
@media (max-width: 639px) {
  .chat.lebendig.akkordeon .chat-antwort {
    display: grid; grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; visibility: hidden;
    transition: grid-template-rows .18s var(--aus), padding-bottom .18s var(--aus), opacity .12s var(--aus), visibility 0s linear .18s;
  }
  .chat.lebendig.akkordeon .chat-antwort > * { min-height: 0; overflow: hidden; }
  .chat.lebendig.akkordeon .chat-paar.offen .chat-antwort {
    display: grid; grid-template-rows: 1fr; padding-bottom: 16px; opacity: 1; visibility: visible;
    transition: grid-template-rows .24s var(--aus), padding-bottom .24s var(--aus), opacity .18s var(--aus) .04s, visibility 0s;
  }
}

/* P10 · Handy-Umschalter: Eine weiße Fläche gleitet zur gewählten Seite (240 ms), der Inhalt blendet in 180 ms ein.
   Das Skript setzt --wahl (0, 1, …) und --anzahl an der Leiste. */
.m-reiter { position: relative; isolation: isolate; }
.m-reiter::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px - (var(--anzahl, 2) - 1) * 4px) / var(--anzahl, 2)); border-radius: 9px;
  background: var(--weiss); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 6px 14px -10px rgba(16, 24, 40, .45);
  translate: calc(var(--wahl, 0) * (100% + 4px)) 0; transition: translate .24s var(--aus);
}
.m-reiter button[aria-selected='true'] { background: transparent; box-shadow: none; }
.bewegung :is(.vergleich, .extras).mit-reitern :is(.paket, .extra).gewaehlt { animation: tafel-ein .18s var(--aus); }
@keyframes tafel-ein { from { opacity: 0; } }

/* P12 · Auftauchen zügiger: Fenster 0,5 / 0,75 s (vorher 0,8 / 1,1 s), Kacheln 0,45 / 0,6 s (vorher 0,7 / 0,9 s). Staffel bleibt. */
.pop.zu.auf { transition: opacity .5s var(--aus), translate .75s var(--feder), scale .75s var(--feder), transform .5s var(--aus), box-shadow .6s var(--aus); }
.auftritt.zu.auf { transition: opacity .45s var(--aus) var(--auftritt-verzug, 0ms), translate .6s var(--feder) var(--auftritt-verzug, 0ms), scale .6s var(--aus) var(--auftritt-verzug, 0ms); }

/* P13 · Ablauf am Computer: weniger Leerraum nach dem letzten Fenster (letzte Zeile + 8vh statt + 24vh) */
@media (min-width: 1024px) and (min-height: 620px) {
  .ablauf-raster { grid-template-rows: repeat(4, var(--ab-schritt)) calc(var(--ab-schritt) + 8vh); }
}

/* PA · Seitenwechsel ohne Aufblitzen: Der Browser blendet die Seiten in 200 ms über, die Kopfleiste bleibt stehen.
   Browser ohne diese Technik wechseln wie bisher. Bei reduzierter Bewegung aus. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.kopf { view-transition-name: kopf; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--aus); }
::view-transition-group(kopf) { animation-duration: 0s; }

/* PB · Navigation am Computer: Eine helle Fläche gleitet unter der Maus von Punkt zu Punkt (180 ms). Beim ersten Hinzeigen
   steht sie sofort da, erst danach gleitet sie. Das Skript (Abschnitt 1) setzt Lage und Breite. */
.nav { position: relative; }
.nav-flaeche {
  position: absolute; left: 0; top: 0; z-index: 0; height: 0; border-radius: 6px; background: rgba(16, 24, 40, .05);
  opacity: 0; pointer-events: none; transition: translate .18s var(--aus), width .18s var(--aus), opacity .15s var(--weich);
}
.nav-flaeche.sofort { transition: opacity .15s var(--weich); }
.nav-flaeche.da { opacity: 1; }
.nav.mit-flaeche a:hover { background: transparent; }
.nav a { z-index: 1; }

/* PC · Einstieg am Computer: Scrollt nach dem Tippen 6 s niemand, erscheint unten ein leiser Hinweis. Der Pfeil wippt dreimal,
   danach steht er still; beim ersten Scrollen verschwindet der Hinweis für immer. */
.scroll-hinweis {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: .5rem; translate: -50% 8px;
  padding: .5rem .9rem .5rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .9); color: var(--begleit-tief);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 10px 24px -16px rgba(16, 24, 40, .45);
  font: 600 .8125rem / 1 var(--text); opacity: 0; pointer-events: none; transition: opacity .4s var(--aus), translate .4s var(--aus);
}
.scroll-hinweis.da { opacity: 1; translate: -50% 0; }
.scroll-hinweis svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hinweis.da svg { animation: hinweis-wippen 1.2s var(--weich) .4s 3; }
@keyframes hinweis-wippen { 50% { translate: 0 3px; } }

@media (prefers-reduced-motion: reduce) {
  .menue li a, .menue .knopf, .menue-telefon { translate: none; }
  :is(.lb > a, .pk-fenster, .demo-schalter, .menue-knopf, .m-reiter button, .held-stopp, .schnellkontakt a, .film-vollbild):active,
  .interesse input:active + span, .ab-nav button:active span, .knopf:active { scale: 1; transform: none; }
  .pk-stapel li:hover > .pk-fenster, .pk-fenster:focus-visible { transform: none; }
}

/* ================================================================ Eigene Interpretation 09.10.2026: Branchen-Standard
   Weiß und kühles Grau, ein Blau, Hanken Grotesk. Gleiche Inhalte, gleiche Struktur; dieser Block ändert nur das Aussehen.
   Radien: Knöpfe und Felder 10 px, Fenster und Karten 14 px, Chips rund. Blau nur für Handlung, Auswahl und Aktives. */
:root {
  --akzent-hell: #EEF3FD;                 /* Blau-Tönung für Flächen */
  --akzent-zart: #DCE6FB;                 /* Blau-Tönung für Hervorhebungen hinter Text */
  --band: #F1F5FE;                        /* die früheren Apricot-Bänder */
  --rand-linie: #E4E7EC;
  --r-fenster: 14px;
  --r-feld: 10px;
  --schatten: 0 0 0 1px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05), 0 28px 56px -28px rgba(16, 24, 40, .22);
  --schatten-hoch: 0 0 0 1px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05), 0 40px 72px -32px rgba(16, 24, 40, .28);
  --schatten-kohle: 0 0 0 1px rgba(16, 24, 40, .4), 0 28px 56px -24px rgba(16, 24, 40, .45);
  --h1: clamp(2.5rem, min(1.2rem + 3.8vw, 8svh), 4.4rem);
  --h2: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
}
body { font-size: 1.0625rem; line-height: 1.6; font-feature-settings: 'kern', 'ss01'; color: var(--kohle); }
h1, h2, h3, h4 { font-weight: 650; }
h2 { letter-spacing: -.034em; line-height: 1.06; }
h3 { letter-spacing: -.018em; }
::selection { background: var(--akzent-zart); color: var(--kohle); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
html { scrollbar-color: #C4CAD4 #FFFFFF; }
.skip { color: #fff; }

/* Kein Augenbrauen-Label über den Überschriften: die Überschrift spricht für sich */
.kapitel { display: none; }

/* ------------------------------------------------------------------ Kopfleiste: volle Breite, 64 px, Haarlinie */
.kopf { padding: env(safe-area-inset-top, 0px) 0 0; }
.kopf-insel {
  max-width: none; height: 64px; border-radius: 0; gap: 28px;
  padding: 0 max(var(--rand), calc((100% - var(--rahmen)) / 2));
}
.kopf-insel::before { background: rgba(255, 255, 255, .86); box-shadow: inset 0 -1px 0 var(--rand-linie); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.logo { width: 124px; }
.nav a { padding: 8px 12px; border-radius: 8px; font-size: .9375rem; font-weight: 500; color: #434A57; }
.nav a[aria-current] { color: var(--kohle); }
.nav a[aria-current]::after { left: 12px; right: 12px; bottom: -11px; width: auto; height: 2px; margin: 0; border-radius: 2px; background: var(--akzent); }
.nav-flaeche { background: #F2F4F7; border-radius: 8px; }
.menue-knopf { background: #F2F4F7; border-radius: 10px; }
.menue { padding-top: calc(96px + env(safe-area-inset-top, 0px)); background: #FFFFFF; }
.menue li a { font-weight: 650; letter-spacing: -.03em; border-bottom-color: var(--rand-linie); }
.menue li a[aria-current]::after { background: var(--akzent); }
@media (max-width: 899px) { .kopf-insel { height: 60px; padding: 0 8px 0 var(--rand); } }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  --k-grund: var(--akzent); --k-schrift: #FFFFFF;
  min-height: 48px; padding: 0 18px 0 20px; gap: 14px; border-radius: 10px; font-weight: 600; font-size: .96875rem; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 24, 40, .12), 0 8px 18px -10px rgb(from var(--akzent) r g b / .55);
}
.knopf:hover { --k-grund: var(--akzent-tief); }
.knopf-tinte { --k-grund: var(--kohle); --k-schrift: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, .2), 0 8px 18px -10px rgba(16, 24, 40, .5); }
.knopf-tinte:hover { --k-grund: #1F2430; }
.knopf-linie { --k-grund: #FFFFFF; --k-schrift: var(--kohle); box-shadow: inset 0 0 0 1px #D0D5DD, 0 1px 2px rgba(16, 24, 40, .05); }
.knopf-linie:hover { --k-grund: #F7F8FA; }
.knopf-klein { min-height: 40px; padding: 0 13px 0 15px; border-radius: 9px; font-size: .875rem; }
@media not all and (hover: hover) and (pointer: fine) {
  .knopf:hover { --k-grund: var(--akzent); }
  .knopf-tinte:hover { --k-grund: var(--kohle); }
  .knopf-linie:hover { --k-grund: #FFFFFF; }
}
.textlink { text-decoration-color: rgb(from var(--akzent) r g b / .45); }
.textlink:hover { color: var(--akzent); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ Fenster: weiß, feine Kante, kühler Schatten */
.leiste { background: #F9FAFB; box-shadow: inset 0 -1px 0 var(--rand-linie); color: #5A6170; }
.punkte i { width: 9px; height: 9px; background: #D5D9E0; }
.adresse { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--rand-linie); border-radius: 7px; }

/* ------------------------------------------------------------------ Einstieg */
.held { background: #FFFFFF; }
.held-buehne::before {
  background: radial-gradient(52% 58% at 74% 48%, rgb(from var(--akzent) r g b / .10), rgb(from var(--akzent) r g b / .03) 55%, transparent 75%),
    radial-gradient(40% 40% at 18% 20%, rgb(from var(--akzent) r g b / .035), transparent 70%);
}
.held-titel { letter-spacing: -.04em; line-height: 1.04; }
/* „Ich mache sie sichtbar.“: blau auf zartem Blau statt dunkel auf Apricot */
.held-titel .satz::before { background: var(--akzent-zart); border-radius: .2em; }
.held-titel.sichtbar .licht { color: var(--akzent); }
html:not(.bewegung) .held-titel .licht { color: var(--akzent); }
html:not(.bewegung) .held-titel .punkt { background: var(--akzent); }
@keyframes punkt-in-schild { to { background: var(--akzent); } }
.held-lead { color: #434A57; }
.held-stopp { background: #F2F4F7; }
.editor { background: #0B0D12; }
.editor .leiste { background: #161A22; color: #9AA3B2; }
.reiter { background: #0B0D12; }
.code .s, .fehler-code .s { color: #93B4FF; }
.gespeichert svg { stroke: #93B4FF; }
.d-knopf.gedrueckt { color: #FFFFFF; }
.mt-app { color: #FFFFFF; }
@keyframes name-markiert { to { background: var(--akzent); color: #FFFFFF; } }
.mitteilung { box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 18px 32px -14px rgba(16, 24, 40, .35); }

/* ------------------------------------------------------------------ Bänder: die Apricot-Flächen werden ein zartes Blau */
.farbband, .blatt > .leistungen, .blatt > .ueber-ratgeber, .blatt > .prj-dazu { background: var(--band); }
.blatt > .leistungen + *, .blatt > .ueber-ratgeber, .blatt > .prj-dazu { box-shadow: inset 0 1px 0 rgb(from var(--akzent) r g b / .08); }
.leistungen .preis-hinweis, .lb-fuss .klein { color: #434A57; }
.farbband .m-reiter { background: rgb(from var(--akzent) r g b / .08); }

/* Leistungskarten der Startseite: Karte mit feiner Kante, Bild bündig oben */
.lb > a { border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04), 0 20px 40px -28px rgba(16, 24, 40, .25); }
.lb > a:hover, .lb > a:focus-visible { box-shadow: 0 0 0 1px rgb(from var(--akzent) r g b / .28), 0 2px 4px rgba(16, 24, 40, .05), 0 28px 52px -28px rgb(from var(--akzent) r g b / .35); }
.lb-bild { background: #F3F5F8; }
.lb-text h3 { letter-spacing: -.022em; }
.lb-preis { font-weight: 650; letter-spacing: -.03em; }
.lb-check .lb-preis { background: var(--akzent-hell); color: var(--akzent-tief); }

/* KI-Illustrationen und Symbole: das Apricot wird zum Blau der Seite (Grautöne bleiben, nur die Farbe dreht sich) */
img[src*="/symbole/"], img[src*="/leistungen/"], .rg-bild img, .rg-eintrag img { filter: var(--bildfilter); }
.fn-symbol { background: #F3F5F8; border-radius: 10px; }

/* Bilder, die früher auf dem Abschnittsgrau „ohne Kärtchen“ lagen, bekommen eine klare Fläche */
:is(.betreuung-bild, .rt-bild, .ck-bild, .druck-bild) { border-radius: 16px; background: #F3F5F8; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06); }

/* ------------------------------------------------------------------ Pakete und Preise */
.vergleich { border-radius: 16px; }
.preis-neu { font-weight: 650; letter-spacing: -.045em; }
.preis-alt { color: rgba(16, 24, 40, .45); }
.paket-satz { font-weight: 600; letter-spacing: -.012em; }
.zeilen { border-top-color: var(--rand-linie); }
.zeilen li { border-bottom-color: var(--rand-linie); }
.zeilen .neu { background: var(--akzent-hell); }
.zeilen .neu .zm { color: var(--akzent); }
.marke-einfuehrung { background: var(--akzent-hell); color: var(--akzent-tief); }
.marke-einfuehrung i { background: var(--akzent); }
.ersparnis b { color: #FFFFFF; }

/* Funktionen: keine Kärtchen mehr, sondern ruhige Einträge mit Haarlinie (Stripe-Raster) */
.fn { padding: 1.15rem 0 .2rem; border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--rand-linie); }
.fn-liste { gap: 1.1rem; }
@media (hover: hover) { .fn:hover { translate: none; box-shadow: none; } }
@media (max-width: 639px) { .fn { padding: 1.1rem 1.1rem 1.2rem; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--rand-linie); } }

/* ------------------------------------------------------------------ Ablauf, Schritte, Zähler */
:is(.ab-schritt, .ab-fortschritt li).erreicht :is(.schritt-nr, .fs-punkt) { color: #FFFFFF; }
.ab-nav li.erreicht button span { color: #FFFFFF; }
.ab-pin b { color: #FFFFFF; }
.ck-weg li::before { background: #FFFFFF; color: var(--kohle); box-shadow: inset 0 0 0 1px #D0D5DD; }
.ck-weg li:first-child::before { background: var(--akzent); color: #FFFFFF; box-shadow: none; }
.ck-ausbaufaehig { background: var(--akzent-hell); color: var(--akzent-tief); }
.ck-gut { background: #F2F4F7; }
.ck-kritisch { background: var(--kohle); color: #FFFFFF; }

/* ------------------------------------------------------------------ Chat und FAQ */
.blase.von-dir { color: #FFFFFF; }
.chat.lebendig .chat-frage[aria-pressed='true'] { color: #FFFFFF; }
.chat.lebendig .chat-frage:hover:not([aria-pressed='true']) { background: #F2F4F7; }
@media (min-width: 900px) { .chat.lebendig .chat-frage:hover:not([aria-pressed='true']) { background: #F7F8FA; } }
.chat.lebendig.akkordeon .chat-frage[aria-pressed='true'] { color: var(--kohle); }
.chat.lebendig.akkordeon .chat-paar.offen .chat-frage::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v11M6.5 12h11'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Formular und Auswahl-Chips */
.interesse input:checked + span { color: #FFFFFF; }
.interesse input:checked + span::before { background: #FFFFFF; }
.interesse span { background: #F2F4F7; }
.feld input, .feld textarea { background: #FFFFFF; border-color: #D0D5DD; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.feld input:hover, .feld textarea:hover { border-color: #98A2B3; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid rgb(from var(--akzent) r g b / .2); outline-offset: 0; border-color: var(--akzent); }
.formular-status.ok { background: var(--akzent-hell); color: var(--akzent-tief); }
.wege a:hover .weg-symbol { color: #FFFFFF; }
.weg-symbol { border-radius: 10px; box-shadow: 0 0 0 1px var(--rand-linie); }

/* ------------------------------------------------------------------ Handy-Bausteine */
.demo-symbol { background: var(--akzent); }
.demo-symbol svg { stroke: #FFFFFF; }
.schnellkontakt a:first-child { color: #FFFFFF; }
.schnellkontakt a:first-child:active { background: var(--akzent-tief); }
.vb-p-schritt::before { color: #FFFFFF; }

/* ------------------------------------------------------------------ Karte, Mini-Seiten, Hinweis-Karte */
.ek-l-pin { color: #FFFFFF; }
.ek-pin text { fill: #FFFFFF; }
.ek-pin.an circle { fill: var(--kohle); }
.ek-ring { opacity: .45; }
.ek-name { fill: #2B313C; }
.m-pdf, .m-treffer em { color: #FFFFFF; }
body .vw-hinweis .vw-hinweis__titel::before { background: var(--akzent-zart); }

/* ------------------------------------------------------------------ Fuß */
.fuss { background: #FFFFFF; padding-top: 0; }
.fuss-blatt { margin: 0; border-radius: 0; background: #F6F7F9; box-shadow: inset 0 1px 0 var(--rand-linie); }
.fuss-titel { font-weight: 650; }

/* Unterseiten und Textseiten: Bogen ohne runde Ecken, volle Breite */
.rechtstext-blatt { margin: 0; border-radius: 0; background: #FFFFFF; }
.rechtstext { background: #FFFFFF; }
.tl-block { border-radius: 14px; box-shadow: 0 0 0 1px var(--rand-linie); }

/* Fragen im Chat: die Frage-Überschrift trägt die Klasse der Sprechblase, ihre Schrift bleibt dunkel; nur die gewählte wird weiß */
.chat-paar h3.blase { color: var(--kohle); }
.chat.lebendig .chat-frage[aria-pressed='true'] { color: #FFFFFF; }
.chat.lebendig.akkordeon .chat-frage, .chat.lebendig.akkordeon .chat-frage[aria-pressed='true'] { color: var(--kohle); }
/* Abschnitte stehen bündig untereinander: kein Bogen mit Schatten und runden Ecken */
.blatt { box-shadow: none; border-radius: 0; }
main:not(.unterseite) .blatt > .abschnitt:first-child { border-radius: 0; }

/* Zusammengesetzte Wörter in Überschriften nicht am Bindestrich trennen */
.am-stueck { white-space: nowrap; }

/* Seitentitel der Unterseiten eine Spur kleiner: Hanken läuft breiter als Outfit, so bleiben es höchstens drei Zeilen */
.seite-start h1 { font-size: clamp(2.3rem, 1.35rem + 2.6vw, 3.85rem); letter-spacing: -.038em; line-height: 1.04; }

/* ---------------------------------------------------------------- Nachbesserung nach der Schlussprüfung (09.10.2026) */
/* Gründe: nur Weiß und kühles Grau, im Wechsel. Die früheren Apricot-Bänder werden grau; wo zwei gleiche Gründe
   aufeinanderträfen, wechselt der nächste Abschnitt. Der Fuß trennt sich vom Kontakt durch seine Haarlinie. */
:root { --band: var(--flaeche); }
.blatt > .leistungen + *, .blatt > .ueber-ratgeber, .blatt > .prj-dazu { box-shadow: none; }
main:not(.unterseite) .blatt > .projekte { background: #FFFFFF; }
main:not(.unterseite) .blatt > .person-kurz { background: var(--flaeche); --begleit: var(--begleit-tief); }
main:not(.unterseite) .blatt > .person-kurz + .check-abschnitt { background: #FFFFFF; --begleit: #5A6170; }
main:has(.prj-dazu) > .kontakt, main:has(.ueber-ratgeber) > .kontakt { background: #FFFFFF; }

/* Symbole: ein Satz (Tabler Icons, MIT), eine Strichstärke, in Schriftfarbe auf grauer Kachel */
.fn-symbol { display: grid; place-items: center; color: var(--kohle); background: #F2F4F7; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .05); }
.fn-symbol .sym { width: 22px; height: 22px; }
.fk .fn-symbol .sym { width: 24px; height: 24px; }

/* Spaltenköpfe der Funktionen: echte Überschriften statt Punkt-Etikett */
.fn-gruppe h3 { font: 650 1.0625rem / 1.3 var(--kopf); letter-spacing: -.012em; color: var(--kohle); }
.fn-gruppe h3::before { display: none; }

/* Der Film (Titelbild und Video) wurde in der alten Apricot-Fassung gedreht: dieselbe Umfärbung wie die Illustrationen */
.video-bild video { filter: var(--bildfilter); }


/* ================================================================ Style Sheet Slate Blue / 01 (09.10.2026)
   Weiß #FFFFFF (Hauptflächen, Karten), Cloud #F4F6F8 (Abschnitte, ruhige Flächen), Graphite #1C2530 (Überschriften, Haupttext),
   Textgrau #596675 (Nebeninfos), Slate Blue #4C6079 (Knöpfe, Links, Akzente), Mist #EDF0F4 (dezente blaue Flächen),
   Hover #3B4C62, Linien #DFE4EA, Knopftext weiß (6,45 : 1). Outfit 600 für Überschriften, Manrope 400/600 für Text.
   „Viel Weiß. Gezieltes Blau.“ Klare Kanten, dezente Radien, sparsame Schatten. */
:root {
  --grund: #FFFFFF;
  --flaeche: #F4F6F8;
  --band: #F4F6F8;
  --kohle: #1C2530;
  --begleit: #596675;
  --begleit-tief: #4A5664;
  --akzent: #4C6079;
  --akzent-tief: #3B4C62;
  --akzent-linie: #4C6079;
  --akzent-hell: #EDF0F4;
  --akzent-zart: #EDF0F4;
  --mini-hell: #A3B0C2;
  --rand-linie: #DFE4EA;
  --linie: #DFE4EA;
  --stein: #C9D1DB;
  --leiste-hell: #F7F8FA;
  --kohle-hoch: #26303C;
  --kohle-tief: #151C25;
  --bildfilter: hue-rotate(200deg) saturate(.3);
  --kopf: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --text: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --schatten: 0 0 0 1px rgba(28, 37, 48, .06), 0 1px 2px rgba(28, 37, 48, .04), 0 24px 48px -28px rgba(28, 37, 48, .2);
  --schatten-hoch: 0 0 0 1px rgba(28, 37, 48, .07), 0 2px 4px rgba(28, 37, 48, .04), 0 34px 64px -32px rgba(28, 37, 48, .26);
}
body { font-feature-settings: 'kern'; color: var(--kohle); }
h1, h2, h3, h4 { font-weight: 600; }
h2 { letter-spacing: -.028em; }
.held-titel { letter-spacing: -.032em; }
.knopf { font-weight: 600; }
.knopf:hover { --k-grund: #3B4C62; }
.knopf-tinte { --k-grund: var(--kohle); }
.knopf-tinte:hover { --k-grund: #26303C; }
.knopf { box-shadow: 0 1px 2px rgba(28, 37, 48, .12), 0 8px 18px -12px rgba(28, 37, 48, .45); }
.nav a { color: #596675; }
.nav a[aria-current] { color: var(--kohle); }
.lb-check .lb-preis, .marke-einfuehrung, .ck-ausbaufaehig { color: var(--akzent-tief); }
.formular-status.ok { color: var(--akzent-tief); }
.feld input, .feld textarea { border-color: #C9D1DB; }
.feld input:hover, .feld textarea:hover { border-color: #8B97A6; }
/* Editor im Einstieg: Graphite statt Schwarz, Zeichenketten in hellem Slate */
.editor, .reiter { background: #1C2530; }
.editor .leiste { background: #26303C; color: #A3AEBB; }
.code .s, .fehler-code .s { color: #B7C5D8; }
.gespeichert svg { stroke: #B7C5D8; }
/* Mini-Seiten-Zeichnungen: ihre Blau-Füllungen folgen dem Slate */
[fill="#2557D6" i] { fill: var(--akzent); }
[stroke="#2557D6" i] { stroke: var(--akzent); }
[fill="#7EA2F2" i] { fill: var(--mini-hell); }
[stroke="#7EA2F2" i] { stroke: var(--mini-hell); }

/* Kernsatz wie im Style Sheet: „Ich mache sie sichtbar.“ in Graphite, nur „sichtbar.“ in Slate Blue, ohne Schild */
.held-titel .satz { padding: 0; margin-left: 0; }
.held-titel .satz::before { display: none; }
.held-titel.sichtbar .licht, html:not(.bewegung) .held-titel .licht { color: var(--kohle); }
.held-titel .wort { transition: color .45s var(--aus) .3s; }
.held-titel.sichtbar .wort, html:not(.bewegung) .held-titel .wort { color: var(--akzent); }
html:not(.bewegung) .held-titel .punkt { background: var(--akzent); }
/* Outfit läuft schmaler als Hanken: Überschriften wieder mit normaler, leicht engerer Laufweite wie im Style Sheet */
h1, h2, h3, h4 { letter-spacing: -.018em; }
.held-titel, .seite-start h1 { letter-spacing: -.022em; }
.held-titel .licht { letter-spacing: -.018em; }
.preis-neu, .lb-preis, .fk-zahl, .upgrade-text .preis-neu { letter-spacing: -.025em; }
.menue li a { letter-spacing: -.02em; }

/* ================================================================ Zurück zum ursprünglichen Blau (09.10.2026, Wunsch Henning)
   Akzent wieder #2557D6 (Hover #1D46B5, Tönungen #EEF3FD / #DCE6FB) wie in der ersten eigenen Fassung. Grund, Graphite,
   Textgrau, Linien und die Schriften Outfit + Manrope aus dem Style Sheet bleiben. Sapphire gesichert in website-eigen-sicherung-sapphire. */
:root {
  --akzent: #2557D6;
  --akzent-tief: #1D46B5;
  --akzent-linie: #2557D6;
  --akzent-hell: #EEF3FD;
  --akzent-zart: #DCE6FB;
  --mini-hell: #7EA2F2;
  --bildfilter: hue-rotate(200deg) saturate(.6);
}
.knopf:hover { --k-grund: #1D46B5; }

/* Freigestellte, neu erzeugte Illustrationen (Test 09.10.2026): stehen ohne Rahmen, ohne Fläche und ohne Schatten direkt auf dem Abschnitt */
:is(.betreuung-bild, .rt-bild, .ck-bild, .druck-bild).frei { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
:is(.betreuung-bild, .rt-bild, .ck-bild, .druck-bild).frei img { aspect-ratio: auto; object-fit: contain; }

/* ================================================================ Style Sheet Kontur Blau / Empfehlung 01 (09.10.2026)
   Abgleich mit HH-Kontur-Design-Tokens.css: Kontur Blau #2557D6, Hover #1D45AD, Eisblau #EAF0FD, Weiß, Cloud #F4F6F8,
   Graphite #1C2530, Textgrau #596675, Linien #DCE2EA (nur dekorativ), Feldbegrenzung #596675, Knopftext weiß.
   Hier nur die Abweichungen von vorher. */
:root {
  --akzent: #2557D6;
  --akzent-tief: #1D45AD;        /* vorher #1D46B5 */
  --akzent-linie: #2557D6;
  --akzent-hell: #EAF0FD;        /* Eisblau, vorher #EEF3FD */
  --akzent-zart: #EAF0FD;        /* Eisblau, vorher #DCE6FB */
  --begleit: #596675;
  --begleit-tief: #596675;       /* nur noch ein Textgrau, vorher zusätzlich #4A5664 */
  --rand-linie: #DCE2EA;         /* Linien, vorher #DFE4EA */
  --linie: #DCE2EA;
}
.knopf:hover { --k-grund: #1D45AD; }
/* Textgrau statt der früher fest eingetragenen Grautöne */
.unterseite .blatt > .backend-abschnitt, main:not(.unterseite) .blatt > .person-kurz + .check-abschnitt { --begleit: #596675; }
/* Feldbegrenzung und zweite Aktion: deutlich erkennbare Kante in Textgrau (Linienfarbe ist nur dekorativ) */
.feld input, .feld textarea { border: 1px solid #596675; }
.feld input:hover, .feld textarea:hover { border-color: #1C2530; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid #2557D6; outline-offset: 3px; border-color: #2557D6; box-shadow: none; }
.knopf-linie { box-shadow: inset 0 0 0 1px #596675; }
.knopf-linie:hover { --k-grund: #F4F6F8; }
/* Fokus: blauer Außenrahmen mit Abstand */
:focus-visible { outline: 2px solid #2557D6; outline-offset: 3px; }
/* Textlinks zusätzlich unterstrichen (Farbe nicht allein) */
.textlink { text-decoration-line: underline; }

/* Freigestellte Kachelbilder (09.10.2026): Kontur und Motion haben keinen eigenen Hintergrund mehr.
   Die Kachelfarbe kommt aus --kachel-grund (Standard Cloud #F4F6F8, alternativ Weiß oder Eisblau #EAF0FD). */
:root { --kachel-grund: #F4F6F8; }
.lb-bild { background: var(--kachel-grund); }
/* Seit dem 09.10.2026 abends sind alle sechs Kachelbilder (Kontur, Motion, Backend, Drucksachen, Video, Check) freigestellt
   und ohne Farbfilter; sie liegen in assets/img/neu/. */
.lb-bild img { object-fit: contain; }   /* freigestellt: ganz einpassen statt zuschneiden, die Kachelfarbe füllt den Rest */

/* Bilder-Runde 3 (09.10.2026): neues Video-Vorschaubild ist schon blau, der Farbfilter gilt nur noch für den laufenden (alten) Film.
   Ratgeber-Bilder kommen neu und blau aus der Verwaltung, also ohne Filter. */
.video-bild video { filter: none; }
.video-bild.laeuft video { filter: var(--bildfilter); }
.rg-bild img, .rg-eintrag img { filter: none; }
:is(.rt-bild, .ck-bild).frei { max-width: none; }
.rt-bild.frei { max-width: 420px; }

/* „Auf einen Blick“ ruhig (09.10.2026 abends): gleicher Aufbau wie „So arbeite ich“ darunter. Symbol, eine Zahl-Zeile in einer
   Größe („5 Jahre“ statt riesiger Ziffer mit kleinem Zusatz), Text darunter, feine Linie oben; kein Linienkreuz mehr. */
.fk-kreuz { gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.fk, .fk:nth-child(odd), .fk:nth-child(even) {
  grid-template-columns: 44px minmax(0, 1fr); gap: 0 .9rem; align-items: center;
  padding: 1.2rem 0 0; border: 0; border-top: 1px solid var(--linie);
}
.fk .fn-symbol { width: 44px; height: 44px; border-radius: 9px; }
.fk-zahl { font: 600 1.625rem / 1.15 var(--kopf); letter-spacing: -.02em; }
.fk-zahl small { margin-left: 0; font-size: 1em; letter-spacing: inherit; }
.fk-text { grid-column: 1 / -1; margin-top: .65rem; max-width: none; font-size: .9375rem; line-height: 1.55; color: var(--begleit); }
@media (max-width: 479px) {
  .fk, .fk:nth-child(odd), .fk:nth-child(even) { grid-template-columns: 40px minmax(0, 1fr); padding: 1rem 0 0; }
  .fk .fn-symbol { width: 40px; height: 40px; }
  .fk-zahl { font-size: 1.375rem; }
}


/* ================================================================ Emil-Kowalski-Check (09.10.2026 abends)
   Bewegungswerte, die das Skript laufend setzt, erben nicht mehr in ganze Teilbäume (nur das eigene Element rechnet neu). */
@property --kx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ky { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --mx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --my { syntax: '<number>'; inherits: false; initial-value: 0; }
/* Menü-Striche: 220 ms über translate/rotate statt 450 ms über top */
.menue-striche i { transition: translate .22s var(--aus), rotate .22s var(--aus); }
.kopf.offen .menue-striche i:first-child { top: 0; transform: none; translate: 0 4px; rotate: 45deg; }
.kopf.offen .menue-striche i:last-child { top: 8px; transform: none; translate: 0 -4px; rotate: -45deg; }
/* Hover-Rückmeldung unter 300 ms; die Kopfleiste kommt schneller zurück, als sie geht */
.lb-bild img { transition: scale .3s var(--aus); }
.kopf { transition: transform .25s var(--aus); }
.kopf:not(.versteckt) { transition-duration: .2s; }
/* Formular-Punkt: nichts erscheint aus dem Nichts */
.form-punkt { scale: .5; opacity: 0; transition: scale .25s var(--aus), opacity .25s var(--aus); }
.formular.ist-geaendert .form-punkt { scale: 1; opacity: 1; }
/* Startseite „Wer steckt dahinter“: Porträt als abgerundetes Hochformat wie die Karten (rund bleiben nur die kleinen Chat-Köpfe) */
.pn-bild { width: 168px; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(28, 37, 48, .06); }
@media (max-width: 559px) { .pn-bild { width: 112px; height: auto; } }

/* Text-Runde 09.10.2026 spät: Kaffee-Hinweis auf „Über mich“ (ruhig, wie die Symbol-Zeilen der Seite) und der Website-Check
   in der breiten Kachel der Startseite mit etwas größerem Text, damit er nicht verloren wirkt */
.kaffee { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; padding: .9rem 1.1rem .9rem .9rem; max-width: 34rem;
  border-radius: 12px; background: var(--akzent-hell); color: var(--kohle); font-size: .9375rem; line-height: 1.5; }
.kaffee .fn-symbol { flex: none; width: 44px; height: 44px; margin: 0; border-radius: 9px; background: var(--weiss); color: var(--akzent); }
.kaffee .fn-symbol .sym { width: 24px; height: 24px; }
.kaffee b { font-weight: 600; }
main:not(.unterseite) .lb-check .lb-text h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
main:not(.unterseite) .lb-check .lb-text p:not(.lb-preis) { margin-top: .5rem; max-width: 30em; font-size: 1.0625rem; line-height: 1.55; }
.ueber-text .kaffee, p.kaffee { color: var(--begleit); } p.kaffee b { color: var(--kohle); }

/* ================================================================ Über mich, Runde 2 (09.10.2026 spät)
   Porträt in voller Länge (3:4) und beim Lesen stehend; Fließtext in einer Größe (Einstieg nur dunkler), Kaffee-Kasten und
   Abschluss-Satz kleiner, damit oben nicht vier Schriftgrößen gegeneinander arbeiten. */
@media (min-width: 900px) {
  .ueber-raster { align-items: start; }
  .ueber-raster .bild-fenster { position: sticky; top: 104px; }
  .ueber-raster .bild-fenster img { aspect-ratio: 1100 / 1470; object-position: 50% 0; }
  .ueber-text { padding-top: .5rem; }
}
.ueber-text .lead, .ueber-text p:not(.versprechen) { font-size: var(--lauf); line-height: 1.7; }
.ueber-text .lead { margin-top: 1.5rem; }
.ueber-text p.kaffee { margin-top: 1.75rem; font-size: var(--lauf); line-height: 1.55; max-width: 36em; }
.versprechen { margin-top: 2rem; padding-top: 1.5rem; font-size: 1.25rem; line-height: 1.3; }
.ueber-aktion { margin-top: 1.25rem; }

/* „Auf einen Blick“, Runde 3: Überschrift oben, darunter ein ruhiges Band aus vier gleichen Feldern (weiße Fläche, feine
   Trennlinien). Alle Zahlen in einer Größe, die Einheit gleich groß, nur heller; Symbole in Eisblau wie der Kaffee-Kasten. */
.fakten-raster { display: block; }
.fakten-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.fakten-kopf .lead { margin-top: 0; }
.fk-kreuz { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 16px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(28, 37, 48, .07), 0 18px 36px -30px rgba(28, 37, 48, .35); }
.fk, .fk:nth-child(odd), .fk:nth-child(even) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 0; border-left: 1px solid var(--linie);
}
.fk:first-child { border-left: 0; }
.fk .fn-symbol { width: 40px; height: 40px; border-radius: 10px; background: var(--akzent-hell); color: var(--akzent); box-shadow: none; }
.fk .fn-symbol .sym { width: 22px; height: 22px; }
.fk-zahl { margin-top: 1.1rem; font: 600 clamp(1.75rem, 1.4rem + 1vw, 2.25rem) / 1.05 var(--kopf); letter-spacing: -.03em; }
.fk-zahl small { margin-left: .2em; font-size: 1em; color: var(--begleit); }
.fk-text { margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: var(--begleit); }
@media (max-width: 899px) {
  .fk-kreuz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk:nth-child(3) { border-left: 0; }
  .fk:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 479px) {
  .fk, .fk:nth-child(odd), .fk:nth-child(even) { padding: 1.15rem; }
  .fk-zahl { font-size: 1.5rem; }
}
/* Feinschliff: Einheit ohne Extra-Abstand (im Text steht schon ein Leerzeichen), Untertitel unter der Überschrift,
   Symbole im gleichen Stil wie „So arbeite ich“ darunter */
.fk-zahl small { margin-left: 0; }
.fakten-kopf { display: block; }
.fakten-kopf .lead { margin-top: 1rem; }
.fk .fn-symbol { width: 44px; height: 44px; border-radius: 9px; background: #F2F4F7; color: var(--kohle); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .05); }

/* Backend-Handy: der längere Spruch „Du machst gute Arbeit. Mach sie sichtbar.“ bleibt unter der Kamera-Aussparung */
.verwaltung-bild .m-h { font-size: 8.4cqi; }

/* Aktion kompakt (10.10.2026): Hinweis über dem Titel als kleine Pille in Eisblau statt breitem Band */
.aktion-hinweis { justify-self: start; width: fit-content; max-width: 100%; background: var(--akzent-hell); color: var(--kohle);
  box-shadow: inset 0 0 0 1px rgb(from var(--akzent) r g b / .14); }
.aktion-hinweis:hover { background: rgb(from var(--akzent) r g b / .14); }
@media not all and (hover: hover) and (pointer: fine) { .aktion-hinweis:hover { background: var(--akzent-hell); } }
/* Aktion gemerkt: Startseite zeigt in den Leistungskarten alten und neuen Preis */
.lb-preis s { margin-right: .35em; font-weight: 400; color: var(--begleit); text-decoration-thickness: 1.5px; }
.lb-preis .lb-aktion { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; padding: .2rem .6rem; border-radius: 99px;
  background: var(--akzent-hell); color: var(--kohle); font: 600 .75rem / 1.2 var(--text); letter-spacing: 0; vertical-align: middle; }
.lb-preis .lb-aktion::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); }

/* Selbst angelegte Projekte (Verwaltung, 10.10.2026): ohne Bild eine ruhige Fläche statt Zeichnung */
.prj-leer { height: calc(100% - var(--leiste)); background: linear-gradient(180deg, var(--flaeche), var(--akzent-hell)); }