/* 00-tokens.css */
/* ==========================================================================
   Philippi & Bühler Digital · Tokens (Test im Stil des Brillen-Ateliers)
   Farbfamilie aus Logo und Altseite: Elektroblau #0024FC → Kobalt, Neongrün #00FC90 → Mint,
   Mint-Fläche #D6FFEF → Glasmint, graue Holztextur → Graphit-Nacht. Ein heller Grund, ein dunkler Ton, ein Akzent (Kobalt).
   ========================================================================== */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-normal-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-normal-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Optician Sans LO";
  src: url("/assets/fonts/optician-sans-lo.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --papier: #F3F2EE;
  --papier-2: #E8E6E0;
  --glas: #DDEFE7;
  --weiss: #FDFDFB;
  --tinte: #121615;
  --tinte-2: #4A514F;
  --linie: rgba(18, 22, 21, .16);
  --linie-2: rgba(18, 22, 21, .08);

  --nacht: #0F1312;
  --nacht-2: #171C1B;
  --auf-nacht: #EEF0EC;
  --auf-nacht-2: #A9B2AE;
  --linie-nacht: rgba(238, 240, 236, .16);

  --kobalt: #1D5B4D;
  --kobalt-tief: #123A31;
  --kobalt-hell: #A9D8C8;
  --mint: #7CCBAE;
  --mint-hell: #C7E8DB;

  --f-text: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-tafel: "Optician Sans LO", "Atkinson Hyperlegible Next", ui-sans-serif, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Ecken (Joah 22.10.: Knöpfe „nicht so ganz rund, sondern ein bisschen eckig“): Knöpfe, kleine Wahl-Felder, Gruppen */
  --r-knopf: 10px;     /* Knöpfe, Telefon- und Menü-Knopf, WhatsApp */
  --r-klein: 8px;      /* Wahl-Kacheln, Chips, kleine Knöpfe, Eingabefelder */
  --r-gruppe: 14px;    /* Behälter um Knöpfe (Kopf-Leiste, Logo-Glas), Abzeichen */

  --kopf-h: 88px;
  --rand: clamp(1.1rem, 4.2vw, 3.75rem);
  --max: 1480px;
  --luft: clamp(5rem, 11vw, 10.5rem);
  --spalt: clamp(1rem, 2.2vw, 2.25rem);
}
@media (max-width: 47.99em) {
  :root { --kopf-h: 72px; }
}

/* 03-einwilligung.css */
/* =========================================================================
   Einwilligung – Baustein (Cookies und externe Inhalte) · Stand 25.09.2026
   Anpassen nur über die öffentlichen Variablen --ew-* (z. B. in :root):
     --ew-bg, --ew-fg, --ew-fg-leise, --ew-linie, --ew-flaeche, --ew-akzent, --ew-akzent-fg,
     --ew-fokus, --ew-schalter-aus, --ew-radius, --ew-knopf-radius, --ew-schrift,
     --ew-breite, --ew-abstand, --ew-z, --ew-platz-bg, --ew-platz-radius, --ew-platz-min
   Schrift: erbt die Seitenschrift (oder --ew-schrift). Keine Abhängigkeiten.
   ========================================================================= */

.ew,
.ew-platz {
  --_bg: var(--ew-bg, #f6f4ef);
  --_fg: var(--ew-fg, #1a1b1d);
  --_leise: var(--ew-fg-leise, rgba(26, 27, 29, .72));
  --_linie: var(--ew-linie, rgba(26, 27, 29, .14));
  --_flaeche: var(--ew-flaeche, rgba(26, 27, 29, .055));
  --_akzent: var(--ew-akzent, #1a1b1d);
  --_akzent-fg: var(--ew-akzent-fg, #f6f4ef);
  --_fokus: var(--ew-fokus, #2553c7);
  --_schalter-aus: var(--ew-schalter-aus, rgba(26, 27, 29, .24));
  --_radius: var(--ew-radius, 20px);
  --_knopf-radius: var(--ew-knopf-radius, 999px);
  --_abstand: var(--ew-abstand, clamp(12px, 2vw, 24px));
  --_ease: cubic-bezier(.22, 1, .36, 1);
}

.ew--dunkel {
  --_bg: var(--ew-bg, #17191c);
  --_fg: var(--ew-fg, #f3f1ec);
  --_leise: var(--ew-fg-leise, rgba(243, 241, 236, .74));
  --_linie: var(--ew-linie, rgba(243, 241, 236, .16));
  --_flaeche: var(--ew-flaeche, rgba(243, 241, 236, .07));
  --_akzent: var(--ew-akzent, #f3f1ec);
  --_akzent-fg: var(--ew-akzent-fg, #17191c);
  --_fokus: var(--ew-fokus, #9db8ff);
  --_schalter-aus: var(--ew-schalter-aus, rgba(243, 241, 236, .28));
}

/* ---------- Hinweis ---------- */
.ew {
  position: fixed;
  z-index: var(--ew-z, 9000);
  left: var(--_abstand);
  bottom: var(--_abstand);
  bottom: calc(var(--_abstand) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: calc(100% - 2 * var(--_abstand));
  max-width: var(--ew-breite, 30rem);
  max-height: calc(100vh - 2 * var(--_abstand));
  max-height: calc(100dvh - 2 * var(--_abstand));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 1.3rem 1.35rem 1.1rem;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_linie);
  border-radius: var(--_radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 28px 70px -28px rgba(0, 0, 0, .42);
  font-family: var(--ew-schrift);
  font-size: .9375rem;
  line-height: 1.55;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .45s var(--_ease), transform .6s var(--_ease);
}
.ew[hidden] { display: none !important; }
.ew--an { opacity: 1; transform: none; }
.ew--rechts { left: auto; right: var(--_abstand); }
.ew--mitte { left: 0; right: 0; margin: 0 auto; max-width: var(--ew-breite, 40rem); }

.ew *,
.ew *::before,
.ew *::after { box-sizing: border-box; }
.ew p { margin: 0; }

.ew-kopf { display: flex; flex: none; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.ew-koerper {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -1.35rem;
  padding: 0 1.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ew-koerper--mehr {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
}
.ew-koerper:focus-visible { outline-offset: -2px; }
.ew-logo { display: block; flex: none; width: auto; height: 1.75rem; }
.ew-titel {
  font-size: 1.08em;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.ew-text { font-size: .9em; color: var(--_leise); }
.ew-text p + p { margin-top: .5em; }
.ew-dienste { font-weight: 600; color: var(--_fg); }
.ew-dienste-liste { list-style: none; margin: .45em 0 .6em; padding: 0; }
.ew-dienste-liste li { position: relative; padding-left: .9em; }
.ew-dienste-liste li + li { margin-top: .15em; }
.ew-dienste-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: .32em;
  height: .32em;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.ew-dienste-liste strong { font-weight: 600; color: var(--_fg); }

.ew-stand {
  margin-top: .8rem !important;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: var(--_flaeche);
  font-size: .82em;
  line-height: 1.45;
}

/* Auswahl je Dienst */
.ew-auswahl { margin-top: .9rem; border-top: 1px solid var(--_linie); }
.ew-auswahl-hinweis { padding-top: .7rem; font-size: .82em; color: var(--_leise); }
.ew-liste { list-style: none; margin: .2rem 0 0; padding: 0; }
.ew-dienst { padding: .7rem 0; border-bottom: 1px solid var(--_linie); }
.ew-schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .92em;
}
.ew-schalter input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--_schalter-aus);
  background-image: radial-gradient(circle, var(--_bg) 0, var(--_bg) .5rem, rgba(255, 255, 255, 0) .55rem);
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: 0 50%;
  cursor: pointer;
  transition: background-position .22s var(--_ease), background-color .22s;
}
.ew-schalter input:checked { background-color: var(--_akzent); background-position: 100% 50%; }
.ew-dienst-info { margin-top: .3rem !important; font-size: .8em; color: var(--_leise); line-height: 1.45; }
.ew-notwendig { padding: .7rem 0 .1rem; font-size: .78em; color: var(--_leise); line-height: 1.45; }

/* Drei gleichwertige Knöpfe: gleiche Größe, gleiche Gestaltung */
.ew-knoepfe {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1rem;
}
.ew-knoepfe[hidden] { display: none; }
.ew-knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--_fg);
  border-radius: var(--_knopf-radius);
  background: transparent;
  color: var(--_fg);
  font: inherit;
  font-size: .86em;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s, color .2s, border-color .2s, transform .16s var(--_ease);
}
.ew-knopf:hover { background: var(--_akzent); border-color: var(--_akzent); color: var(--_akzent-fg); }
.ew-knopf:active { transform: scale(.97); }
.ew-knopf--voll { background: var(--_akzent); border-color: var(--_akzent); color: var(--_akzent-fg); }
.ew-knopf--voll:hover { background: transparent; color: var(--_fg); border-color: var(--_fg); }

.ew-fuss {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin-top: .85rem !important;
  font-size: .8em;
  color: var(--_leise);
}
.ew a,
.ew-platz a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.ew a:hover,
.ew-platz a:hover { color: var(--_fg); }
.ew-schliessen {
  margin: 0 0 0 auto;
  padding: .35rem .15rem;
  border: 0;
  background: none;
  color: var(--_fg);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.ew-schliessen[hidden] { display: none; }

/* Sichtbarer Fokus für Tastatur */
.ew :focus-visible,
.ew-platz :focus-visible { outline: 2px solid var(--_fokus); outline-offset: 2px; }
.ew-titel:focus { outline: none; }
.ew-titel:focus-visible { outline: 2px solid var(--_fokus); outline-offset: 4px; border-radius: 4px; }

/* Bei offenem Vollbildmenü ausblenden (Klasse am body oder html), sonst verdeckt er Menülinks */
.menu-open .ew,
.ew-aus .ew { visibility: hidden; }

/* Handys und niedrige Schirme: kompakt; nur der Text scrollt, Knöpfe und Links bleiben stehen */
@media (max-width: 599px), (max-height: 640px) {
  .ew {
    --_abstand: var(--ew-abstand, 10px);
    max-height: 62vh;
    max-height: 62dvh;
    padding: .95rem 1rem .85rem;
    border-radius: 16px;
    font-size: .875rem;
    line-height: 1.5;
  }
  .ew-kopf { margin-bottom: .4rem; }
  .ew-logo { height: 1.4rem; }
  .ew-koerper { margin: 0 -1rem; padding: 0 1rem; }
  .ew-text { font-size: .86em; }
  .ew-knoepfe { gap: .4rem; margin-top: .75rem; }
  .ew-knopf { padding: .45rem .4rem; font-size: .82em; }
  .ew-fuss { margin-top: .6rem !important; }
}
@media (max-width: 359px) {
  .ew-knopf { padding: .4rem .25rem; font-size: .78em; }
}

/* ---------- Zwei-Klick-Platzhalter ---------- */
.ew-platz {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ew-platz-radius, 14px);
  background: var(--ew-platz-bg, #ebe8e1);
  color: var(--_fg);
}
.ew-platz *,
.ew-platz *::before,
.ew-platz *::after { box-sizing: border-box; }
.ew-rahmen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--ew-verhaeltnis, 16 / 9);
  min-height: var(--ew-platz-min, 16rem);
}
.ew-rahmen--fest { aspect-ratio: auto; min-height: 0; }
.ew-platz--geladen .ew-rahmen { display: block; min-height: 0; }
.ew-platz--geladen .ew-rahmen--fest { aspect-ratio: auto; }
@supports not (aspect-ratio: 1 / 1) {
  .ew-platz--geladen .ew-rahmen:not(.ew-rahmen--fest) { height: 0; padding-top: var(--ew-pt, 56.25%); }
}
.ew-iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.ew-vorschau {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ew-platz--bild .ew-rahmen::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ew-platz-schleier, rgba(246, 244, 239, .88));
}
.ew-platz-inhalt {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.5;
}
.ew-platz-inhalt p { margin: 0; }
.ew-platz-symbol { display: inline-block; width: 2.4rem; height: 2.4rem; margin-bottom: .55rem; color: var(--_fg); }
.ew-platz-symbol svg { display: block; width: 100%; height: 100%; }
.ew-platz-art {
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--_leise);
}
.ew-platz-titel { margin-top: .25rem !important; font-size: 1.1em; font-weight: 650; letter-spacing: -.01em; }
.ew-platz-text { margin-top: .5rem !important; font-size: .84em; color: var(--_leise); }
.ew-platz-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.ew-platz-knoepfe .ew-knopf { flex: 0 1 auto; padding-left: 1.15rem; padding-right: 1.15rem; }
.ew-platz-direkt { display: inline-block; margin-top: .8rem; font-size: .8em; color: var(--_leise); }

@media (max-width: 479px) {
  .ew-platz-inhalt { padding: 1.1rem 1rem; font-size: .875rem; }
  .ew-platz-symbol { width: 2rem; height: 2rem; margin-bottom: .35rem; }
  .ew-platz-knoepfe .ew-knopf { flex: 1 1 100%; }
}

/* ---------- Ruhe, Kontrast, Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  .ew { transform: none; transition: none; }
  .ew-knopf,
  .ew-schalter input { transition: none; }
  .ew-knopf:active { transform: none; }
}
@media (forced-colors: active) {
  .ew { border: 2px solid CanvasText; }
  .ew-knopf { border: 1px solid ButtonText; }
  .ew-schalter input {
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    height: auto;
    background: none;
    forced-color-adjust: auto;
  }
  .ew-platz { border: 1px solid CanvasText; }
  .ew-platz--bild .ew-rahmen::after { background: Canvas; }
}
@media print {
  .ew { display: none !important; }
}

/* 10-basis.css */
/* ==========================================================================
   Basis: Reset, Typografie, Raster, Abschnitte
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--papier); color: var(--tinte);
  font-family: var(--f-text); font-size: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
}
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  min-height: 100vh; overflow-x: clip;
  font-size: 1.0625rem; line-height: 1.62; font-weight: 400;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .2em; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
strong { font-weight: 650; }
main:focus { outline: none; }
::selection { background: var(--mint-hell); color: var(--tinte); }

/* Fokusring: folgt der Ecke des Elements (Knöpfe --r-knopf, Kopf --r-klein). Die kleine Rundung für Textlinks steht in
   :where() ohne Gewicht, sonst würde sie beim Fokus die Ecken anderer Knöpfe überschreiben (z. B. im Cookie-Hinweis). */
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; }
:where(:focus-visible) { border-radius: 2px; }
[data-dunkel] :focus-visible, .abschnitt--nacht :focus-visible { outline-color: var(--mint-hell); }

.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.springen {
  position: fixed; left: 1rem; top: -4rem; z-index: 10000;
  padding: .8rem 1.1rem; border-radius: var(--r-klein); background: var(--tinte); color: var(--papier); font-weight: 600; text-decoration: none;
}
.springen:focus { top: 1rem; }
.nw { white-space: nowrap; }

/* ---------- Raster ---------- */
.huelle { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }

/* ---------- Abschnitte: ein Muster (Luft oben/unten, Kopfzeile, Inhalt) ---------- */
.abschnitt { position: relative; padding-block: var(--luft); }
.abschnitt--nacht { background: var(--nacht); color: var(--auf-nacht); }
.abschnitt--glas { background: var(--glas); }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt--knapp { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ---------- Typografie ---------- */
.tafel-titel {
  font-family: var(--f-tafel); font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  line-height: 1.14; padding-top: .06em;
}
.h-gross, .skopf__h1, .buehne__h1 {
  font-weight: 560; letter-spacing: -.022em; line-height: 1.06;
  font-size: clamp(2.25rem, 1.2rem + 3.9vw, 4.75rem);
  text-wrap: balance;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
.h-mittel {
  font-weight: 560; letter-spacing: -.016em; line-height: 1.12;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 3rem);
  text-wrap: balance;
}
.h-klein { font-weight: 640; font-size: clamp(1.18rem, 1rem + .5vw, 1.45rem); line-height: 1.25; letter-spacing: -.01em; }
.lead { font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); line-height: 1.5; color: var(--tinte-2); max-width: 38em; text-wrap: pretty; }
.abschnitt--nacht .lead, [data-dunkel] .lead { color: var(--auf-nacht-2); }
.prosa p { max-width: 38em; text-wrap: pretty; }
.prosa p + p { margin-top: 1em; }
.leise { color: var(--tinte-2); }
.abschnitt--nacht .leise { color: var(--auf-nacht-2); }

/* ---------- Textlink ---------- */
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 650; text-decoration: none; color: var(--kobalt);
}
.textlink > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); padding-bottom: 2px; }
.textlink .pfeil { display: inline-block; width: 1.05em; height: 1.05em; margin-left: .3em; vertical-align: -.16em; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover > span { background-size: 100% 1px; }
  .textlink:hover .pfeil { transform: translateX(3px); }
}
.abschnitt--nacht .textlink, [data-dunkel] .textlink { color: var(--mint-hell); }

/* ---------- Medien: randlos, ohne Rundung, ohne Schatten ---------- */
.medium { position: relative; overflow: hidden; background: var(--papier-2); }
.medium img, .medium video { width: 100%; height: 100%; object-fit: cover; }
.abschnitt--nacht .medium { background: var(--nacht-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Titel, die sich per GSAP aufbauen, bis zum Start verstecken (frueh.js setzt .js-frueh, Notfall nach 2,5 s) */
.js-frueh [data-tafel-auf], .js-frueh .skopf__h1 { visibility: hidden; }
.zeile { padding-bottom: .08em; margin-bottom: -.08em; }

/* 20-kopf.css */
/* ==========================================================================
   Kopf: Wortmarke links, rechts eine Pille mit Navigation, Telefon und Menü (Bauweise wie Schulz, eigene Gestalt).
   Links nur unser Logo ohne Blase (wechselt über dunklen Abschnitten auf hell), rechts die helle Glas-Pille.
   Ecken (Joah 22.10.: Knöpfe „ein bisschen eckig“): die Glas-Leiste --r-gruppe, alles darin --r-klein. Innen ist ungefähr
   außen minus Abstand (14 px außen, 5 px Rand, 8 px innen), so laufen die Kurven parallel.
   ========================================================================== */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 9000;
  height: var(--kopf-h);
  pointer-events: none;
  transition: transform .45s var(--ease-out);
}
.kopf.ist-weg { transform: translateY(calc(-100% - 44px)); }  /* weit genug, dass auch der Schatten der Pille verschwindet */
.kopf__leiste { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kopf__marke, .kopf__pille { pointer-events: auto; }

/* Zwei Hover-Grüns für die ganze Seite (Joah 16.10.: „Grün soll heller werden, solange man drauf ist“):
   --gruen-hover für Flächen und Zeichen (auf Papier 3,5:1), --gruen-hover-text für Schrift (5,6:1 auf Weiß, 5,1:1 auf
   Papier, 4,8:1 auf der Glas-Fläche, überall über 4,5:1), --gruen-hover-nacht für dunklen Grund. Alle drei sichtbar
   heller als das Grund-Grün #1D5B4D. */
:root {
  --gruen-hover: #2E8F73;
  --gruen-hover-text: #247358;
  --gruen-hover-nacht: #9AEBCB;
}

/* Unser Logo frei auf der Fläche, ohne Blase (Joah 16.10.): dunkel auf Papier, hell über dunklen Abschnitten.
   Überfahren oder Fokus: das grüne Teil wird heller und das Logo wächst um etwa 2 Prozent (Eigenschaft „scale“,
   damit es sich nie mit einem transform von GSAP beißt). Bei reduzierter Bewegung ändert sich nur die Farbe. */
.kopf__marke {
  --logo-b: #1D5B4D;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; min-height: 56px;
  text-decoration: none; color: #0B211B;
  transition: color .35s var(--ease-out);
}
.kopf--auf-dunkel .kopf__marke { color: #fff; --logo-b: #A9D8C8; }

/* Hat man die Seite ein Stück gescrollt und die Kopfleiste kommt beim Hochscrollen zurück, würde das freie Logo über der
   Schrift darunter liegen (Joah 17.10.: „das geht alles so drüber“). Dann bekommt es dieselbe helle Glas-Pille wie rechts,
   das Logo bleibt an seinem Platz, die Pille wächst ein Stück nach außen. Ganz oben bleibt es frei, wie gewünscht.
   Die Pille ist hell, also ist das Logo darin immer dunkel, auch über dunklen Abschnitten. */
.kopf__marke::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -.7rem; border-radius: var(--r-gruppe);
  background: rgba(253, 253, 251, .84);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .07), 0 14px 34px -20px rgba(15, 19, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.kopf--gescrollt .kopf__marke::before { opacity: 1; pointer-events: auto; }
.kopf--gescrollt .kopf__marke,
.kopf--gescrollt.kopf--auf-dunkel .kopf__marke { color: #0B211B; --logo-b: #1D5B4D; }
@media (max-width: 40em) {
  .kopf__marke::before { inset-inline: -.45rem; }
}
.kopf--gescrollt .kopf__logo { transform-origin: 50% 50%; }  /* beim Überfahren wächst das Logo gleichmäßig in der Pille */
/* Ohne JavaScript bleibt die Kopfleiste immer stehen (sie blendet nicht aus): dort hat das Logo die Pille immer */
.no-js .kopf__marke::before { opacity: 1; pointer-events: auto; }
.kopf__logo { display: inline-flex; align-items: center; gap: .7rem; transform-origin: 0 50%; }
.kopf__logo .logo-zeichen { width: 38px; height: auto; flex: none; }
.logo-zeichen__a { fill: currentColor; }
.logo-zeichen__b { fill: var(--logo-b, #1D5B4D); transition: fill .3s var(--ease-out); }
.logo-name { font-family: "Archivo", var(--f-text); font-weight: 600; font-stretch: 92%; font-size: 1.12rem; letter-spacing: -.005em; white-space: nowrap; }
.logo-name b { font-weight: 300; font-stretch: 118%; letter-spacing: .06em; text-transform: uppercase; font-size: .72em; margin-left: .3em; }
.kopf__marke:focus-visible { --logo-b: var(--gruen-hover); outline-offset: 8px; }  /* Ring außerhalb des gewachsenen Logos */
.kopf--auf-dunkel .kopf__marke:focus-visible { --logo-b: var(--gruen-hover-nacht); outline-color: var(--mint-hell); }
.kopf--gescrollt.kopf--auf-dunkel .kopf__marke:focus-visible { --logo-b: var(--gruen-hover); }
/* In der Pille folgt der Fokusring ihrer Rundung: innen dunkel, außen hell, damit er auf hellem wie dunklem Grund zu sehen ist */
.kopf--gescrollt .kopf__marke:focus-visible { outline: none; }
.kopf--gescrollt .kopf__marke:focus-visible::before { box-shadow: 0 0 0 2px #0B211B, 0 0 0 4px #FDFDFB; }
@media (max-width: 40em) {
  .kopf__marke:focus-visible { outline-offset: 4px; }  /* sonst liegt die Oberkante des Rings außerhalb des Bildschirms */
}
@media (hover: hover) and (pointer: fine) {
  .kopf__marke:hover { --logo-b: var(--gruen-hover); }
  .kopf--auf-dunkel .kopf__marke:hover { --logo-b: var(--gruen-hover-nacht); }
  .kopf--gescrollt.kopf--auf-dunkel .kopf__marke:hover { --logo-b: var(--gruen-hover); }
}
@media (prefers-reduced-motion: no-preference) {
  .kopf__logo { transition: scale .3s var(--ease-out); }
  .kopf__marke:focus-visible .kopf__logo { scale: 1.02; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .kopf__marke:hover .kopf__logo { scale: 1.02; }
}

.kopf__pille {
  display: flex; align-items: center; gap: .25rem; padding: 5px;
  background: rgba(253, 253, 251, .84);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .07), 0 14px 34px -20px rgba(15, 19, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
  border-radius: var(--r-gruppe);
}
.kopf__nav { position: relative; }
.kopf__nav > ul { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; }
.kopf__nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 1.1rem; border-radius: var(--r-klein);
  font-size: 1rem; font-weight: 600; letter-spacing: -.004em;
  text-decoration: none; color: var(--tinte-2);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kopf__nav a:hover { color: var(--tinte); background-color: rgba(18, 22, 21, .045); }
}
.kopf__nav a[aria-current="page"], .kopf__nav a.ist-aktiv { color: var(--tinte); }
@media (hover: hover) and (pointer: fine) {
  .kopf__nav a[aria-current="page"]:hover, .kopf__nav a.ist-aktiv:hover { background-color: transparent; }
}
/* Das Licht: ein Glas hinter dem aktiven Punkt, mit Lichtkante oben (Reflex wie auf einem Brillenglas) */
.kopf__licht {
  position: absolute; top: 0; left: 0; z-index: 0;
  height: 100%; width: var(--licht-b, 0px);
  border-radius: var(--r-klein);
  background: linear-gradient(180deg, rgba(174, 235, 211, .75), rgba(174, 235, 211, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(58, 151, 118, .18);
  transform: translateX(var(--licht-x, 0px));
  opacity: 0; pointer-events: none;
}
.kopf__licht::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 4px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.kopf__licht.ist-da { opacity: 1; }
.kopf__licht { transition: filter .3s var(--ease-out); }
.kopf__licht.gleitet { transition: transform .55s cubic-bezier(.34, 1.3, .64, 1), width .55s cubic-bezier(.34, 1.3, .64, 1), opacity .3s var(--ease-out), filter .3s var(--ease-out); }
/* Fährt man über den aktiven Punkt, leuchtet sein Glas ein wenig kräftiger (nur Farbe, keine Bewegung) */
@media (hover: hover) and (pointer: fine) {
  .kopf__nav:has(a[aria-current="page"]:hover, a.ist-aktiv:hover) .kopf__licht { filter: saturate(1.35) brightness(1.04); }
}

.kopf__tel {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: 0 1.15rem 0 .95rem; border-radius: var(--r-klein);
  background: var(--tinte); color: var(--papier);
  font-weight: 650; font-size: .98rem; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease-out);
}
.kopf__tel-zeichen { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(124, 203, 174, .22); }
@media (hover: hover) and (pointer: fine) { .kopf__tel:hover { background: var(--kobalt); } }

.kopf__menueknopf {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 46px; padding: 0 1.05rem 0 1.1rem;
  border: 0; border-radius: var(--r-klein); cursor: pointer; background: transparent; color: var(--tinte);
  font-size: .98rem; font-weight: 650;
  transition: background-color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .kopf__menueknopf:hover { background: rgba(18, 22, 21, .05); } }
.kopf__striche { position: relative; width: 22px; height: 10px; }
.kopf__striche span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out); }
.kopf__striche span:first-child { top: 0; }
.kopf__striche span:last-child { bottom: 0; }

/* Bis 62em: keine Pillen-Navigation, dafür der Menü-Knopf. Dazwischen (40 bis 62em) bleibt die Nummer in der Pille. */
@media (max-width: 62em) {
  .kopf__nav { display: none; }
}
/* Großer Bildschirm: Ablauf, Preise, Über uns, Kontakt und direkt die Nummer, kein Menü-Knopf (Joah 16.10.) */
@media (min-width: 62.01em) {
  .kopf__menueknopf { display: none; }
}
/* Handy: kein Telefon-Knopf, nur „Menü“ (Joah 16.10.). Die Nummer steht auf der Kontaktseite und im Fuß. */
@media (max-width: 40em) {
  .kopf__tel { display: none; }
  .kopf__logo { gap: .55rem; }
  .kopf__logo .logo-zeichen { width: 32px; }
  .logo-name { font-size: 1rem; }
  .logo-name b { display: none; }
  .kopf__menuewort { font-size: .95rem; }
}
@media (max-width: 23em) {
  .kopf__menueknopf { padding: 0 .9rem; }
  .logo-name { font-size: .92rem; }
}
.no-js .kopf__menueknopf { display: none; }
/* Ohne JavaScript gibt es keinen Menü-Knopf: dann bleibt die Nummer als Rückfall stehen, auch auf dem Handy (kompakt) */
.no-js .kopf__tel { display: inline-flex; }
@media (max-width: 40em) {
  .no-js .kopf__tel { padding: 0 .9rem 0 .8rem; gap: .45rem; font-size: .9rem; border-radius: calc(var(--r-gruppe) - 3px); }
  .no-js .kopf__pille { padding: 3px; }
}
@media (max-width: 23em) {
  .no-js .kopf__leiste { gap: .5rem; }
  .no-js .kopf__tel { padding: 0 .75rem; font-size: .8rem; }
  .no-js .kopf__tel-zeichen { display: none; }
}

/* ---------- Menü-Karte ---------- */
.menue {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15, 19, 18, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s var(--ease-out);
}
.menue.ist-offen { opacity: 1; transition-duration: .3s; }
.menue__karte {
  position: absolute; top: 10px; right: 10px; left: 10px;
  max-width: 500px; max-height: calc(100dvh - 20px); margin-left: auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .4);
  border-radius: calc(var(--r-klein) + .8rem);   /* Ecke von „Schließen“ plus sein Abstand zum Rand (vorher 28 px): die Kurven laufen parallel */
  transform-origin: top right; transform: scale(.94); opacity: 0;
  transition: transform .22s var(--ease-out), opacity .16s var(--ease-out);
  outline: none;
}
.menue.ist-offen .menue__karte { transform: none; opacity: 1; transition-duration: .34s, .24s; }
.menue__rolle { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem 1.6rem 1.3rem; }
.menue__liste { display: grid; padding-top: 2.4rem; }
.menue__liste a {
  display: flex; align-items: center; min-height: 52px; padding: .35rem 0;
  font-size: clamp(1.6rem, 6.4vw, 2.1rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.12;
  text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--linie-2);
  transition: color .25s var(--ease-out);
}
.menue__liste a[aria-current="page"] { color: var(--kobalt); }
@media (hover: hover) and (pointer: fine) { .menue__liste a:hover { color: var(--gruen-hover-text); } }
/* Kontakt am Fuß der Karte: ein ruhiger Knopf statt Nummer, Mail und Anschrift (Joah 16.10.) */
.menue__kontakt { margin-top: 1.5rem; }
.menue__kontakt .knopf { display: flex; width: 100%; min-height: 56px; padding-inline: 1rem; text-align: center; text-wrap: balance; }
@media (max-width: 26em) {
  .menue__kontakt .knopf { font-size: .95rem; padding-inline: .8rem; }
}
@media (max-width: 22em) {
  .menue__rolle { padding-inline: 1.25rem; }
  .menue__kontakt .knopf { font-size: .88rem; padding-inline: .7rem; text-wrap: wrap; }
  .menue__kontakt .knopf .knopf__ruhe, .menue__kontakt .knopf .knopf__aktiv { gap: .6rem; }
}
.menue__zu {
  position: absolute; top: .8rem; right: .8rem; z-index: 1; min-height: 44px; padding: 0 1rem;
  background: var(--papier); border: 0; border-radius: var(--r-klein); cursor: pointer; font-size: .95rem; font-weight: 650;
  transition: background-color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menue__zu:hover { background: var(--papier-2); } }
html.menue-offen { overflow: hidden; }
@media (max-height: 40em) { .menue__liste a { font-size: 1.4rem; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .menue, .menue__karte, .kopf, .kopf__licht.gleitet { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf__pille, .kopf__marke::before { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Windows-Kontrastmodus: deckender Grund mit Kante, Fokusring als Umriss (Schatten fallen dort weg) */
@media (forced-colors: active) {
  .kopf__marke::before, .kopf__pille { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid CanvasText; }
  .logo-zeichen__b { fill: LinkText; }
  .kopf--gescrollt .kopf__marke:focus-visible { outline: 2px solid Highlight; outline-offset: 4px; }
}

/* 30-bausteine.css */
/* ==========================================================================
   Bausteine: Knopf „Linse“, Seitenkopf, Film, Öffnungszeiten, Status, Formular, Fuß
   ========================================================================== */

/* ---------- Knopf „Linse“ – ein System. Vanilla-Port des 21st.dev „Interactive Hover Button“ (MIT):
   In Ruhe ein kleines Glas vor dem Text. Beim Überfahren wächst das Glas zur ganzen Fläche, der Text gleitet
   hinaus, Text + Pfeil gleiten herein. Der Knopf bewegt sich nie, kein Rand, kein Ring.
   Das Glas wächst auf das Hundertfache (11 px werden gut 1100 px): so füllt es auch breite Knöpfe (Menü-Karte bis 449 px,
   gestreckter Knopf auf dem Handy) bis in jede Ecke, der Knopf schneidet es ab.
   Form (Joah 22.10.: „nicht so ganz rund, sondern ein bisschen eckig“): Rechteck mit --r-knopf statt Pille. Das Glas selbst
   bleibt rund, die Ecken des Knopfes schneiden es zu. ---------- */
.knopf {
  --k-grund: var(--kobalt); --k-text: #fff; --k-fuell: var(--mint-hell); --k-fuell-text: var(--tinte);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 1.75rem 0 1.4rem; border-radius: var(--r-knopf);
  background: var(--k-grund); color: var(--k-text);
  font-size: 1.02rem; font-weight: 650; letter-spacing: -.003em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.knopf__ruhe { position: relative; display: inline-flex; align-items: center; gap: .75rem; }
.knopf__glas {
  position: relative; z-index: -1; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--k-fuell) 46%);
  transition: transform .55s var(--ease-out);
}
.knopf__text { display: inline-block; transition: transform .45s var(--ease-out), opacity .3s var(--ease-out); }
.knopf__aktiv {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--k-fuell-text); opacity: 0; transform: translateX(2.6rem);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.knopf .pfeil { width: 1.15em; height: 1.15em; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover .knopf__glas { transform: scale(100); }
  .knopf:hover .knopf__text { transform: translateX(2.6rem); opacity: 0; }
  .knopf:hover .knopf__aktiv { transform: none; opacity: 1; }
}
.knopf:focus-visible .knopf__glas { transform: scale(100); }
.knopf:focus-visible .knopf__text { transform: translateX(2.6rem); opacity: 0; }
.knopf:focus-visible .knopf__aktiv { transform: none; opacity: 1; }
/* zweite Wahl auf Papier */
.knopf--linie { --k-grund: var(--papier-2); --k-text: var(--tinte); --k-fuell: var(--tinte); --k-fuell-text: var(--papier); }
.knopf--linie .knopf__glas { background: radial-gradient(circle at 35% 30%, #6b7471 0 18%, var(--tinte) 46%); }
/* auf Nacht */
.knopf--hell { --k-grund: var(--papier); --k-text: var(--tinte); --k-fuell: var(--mint-hell); --k-fuell-text: var(--tinte); }
.knopf--hell .knopf__glas { background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--mint) 46%); }
.knopf--nacht { --k-grund: rgba(238, 240, 236, .1); --k-text: var(--auf-nacht); --k-fuell: var(--auf-nacht); --k-fuell-text: var(--nacht); }
.knopf--nacht .knopf__glas { background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--auf-nacht) 46%); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 26em) {
  .knopf { white-space: normal; text-align: left; padding-block: .7rem; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf__glas, .knopf__text, .knopf__aktiv { transition: none; }
  .knopf:hover .knopf__glas, .knopf:focus-visible .knopf__glas { transform: none; }
  .knopf:hover .knopf__text, .knopf:focus-visible .knopf__text { transform: none; opacity: 1; }
  .knopf:hover .knopf__aktiv, .knopf:focus-visible .knopf__aktiv { display: none; }
  .knopf:hover, .knopf:focus-visible { background: var(--k-fuell); color: var(--k-fuell-text); }
}

/* Hover-Ergänzung (Joah 16.10.): Das Grün der Seite wird beim Überfahren ein klein wenig heller, der Knopf wächst
   um gut ein Prozent (Eigenschaft „scale“, kein transform: GSAP bleibt unberührt). Die Linse oben bleibt wie sie ist.
   Bei reduzierter Bewegung gibt es kein Wachsen und keinen Übergang, dort gilt weiter die Regel direkt darüber. */
.knopf { --k-grund-hover: #28705D; }
.textlink { transition: color .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { color: var(--gruen-hover-text); }
  .abschnitt--nacht .textlink:hover, [data-dunkel] .textlink:hover { color: #E6F7F0; }
}
@media (prefers-reduced-motion: no-preference) {
  .knopf { transition: scale .4s var(--ease-out), background-color .3s var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .knopf:hover { scale: 1.012; }
  .knopf:not([class*="knopf--"]):hover { background-color: var(--k-grund-hover); }
}

/* ---------- Seitenkopf der Unterseiten: Tafel-Titel groß, h1, Einleitung, randloses Medium rechts ---------- */
.skopf { position: relative; padding-top: calc(var(--kopf-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.skopf--medium { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.skopf__zurueck { margin-bottom: 1.6rem; font-weight: 650; }
.skopf__zurueck a { text-decoration: none; color: var(--tinte-2); display: inline-flex; min-height: 44px; align-items: center; }
.skopf__tafel {
  font-size: clamp(3rem, 1rem + 9.5vw, 10.5rem); line-height: .98; letter-spacing: .12em; margin-right: -.12em;
  color: var(--tinte); margin-bottom: clamp(1.5rem, 3vw, 2.6rem); overflow-wrap: anywhere;
}
.skopf__h1 { max-width: 18ch; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }
.skopf__lead { margin-top: 1.25rem; font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; color: var(--tinte-2); max-width: 36em; }
.skopf__medium { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-2); }
.skopf__medium .film, .skopf__medium img { position: absolute; inset: 0; width: 100%; height: 100%; }
.skopf__medium img { object-fit: cover; }
/* Lange Wörter bleiben ganz: Die Schrift wird nie größer, als das Wort in seine Spalte passt (gemessen: Datenschutz 8,0 em,
   Ablauf 4,3 em, Spalte 6 von 12 = 0,488 der Breite). Die Mindestgröße von 3 rem gilt nur, solange das Wort hineinpasst. */
.re-kopf .skopf__tafel { font-size: min(clamp(3rem, 1rem + 9.5vw, 10.5rem), calc((100vw - 2 * var(--rand)) / 8.2)); }
@media (min-width: 64em) {
  .ab-kopf .skopf__tafel { font-size: min(clamp(3rem, 1rem + 9.5vw, 10.5rem), calc((100vw - 2 * var(--rand)) / 9.3)); }
}
@media (min-width: 64em) {
  .skopf--medium { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; padding-right: 0; }
  .skopf--medium .skopf__text { width: auto; margin-left: max(var(--rand), (100vw - var(--max)) / 2); margin-right: 0; }
  .skopf__medium { aspect-ratio: auto; height: min(72vh, 46rem); }
  .skopf--medium .skopf__tafel { font-size: clamp(3rem, 1rem + 6.4vw, 8.5rem); }
}

/* ---------- Film: stummes Video, Standbild als poster, Pause-Knopf ---------- */
.film { position: relative; overflow: hidden; background: var(--nacht-2); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film__pause {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-klein); cursor: pointer;
  background: rgba(15, 19, 18, .55); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: .82; transition: opacity .2s var(--ease-out), background-color .2s var(--ease-out);
}
.film__pause:hover { opacity: 1; background: rgba(15, 19, 18, .75); }
.film__pause-zeichen { width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.film__pause[aria-pressed="true"] .film__pause-zeichen { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.no-js .film__pause { display: none; }
@media (prefers-reduced-motion: reduce) { .film__pause { display: none; } }

/* Schärfe: Medien kommen beim Hineinscrollen aus der Unschärfe (GSAP setzt --scharf) */
[data-schaerfe] > * { filter: blur(calc(var(--unscharf, 0) * 14px)); transform: scale(calc(1 + var(--unscharf, 0) * .04)); }

/* ---------- Öffnungszeiten und Live-Status ---------- */
.zeiten { display: grid; gap: 0; max-width: 30rem; }
.zeiten__zeile { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.zeiten__zeile dt { font-weight: 650; white-space: nowrap; }
.zeiten__zeile dd { text-align: right; font-variant-numeric: tabular-nums; }
.abschnitt--nacht .zeiten__zeile { border-color: var(--linie-nacht); }
.status { display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 1rem 0 .85rem; border-radius: var(--r-gruppe); background: rgba(18, 22, 21, .06); font-weight: 650; font-size: .95rem; }
.status__punkt { width: 9px; height: 9px; border-radius: 50%; background: #9aa19e; }
.status.ist-offen .status__punkt { background: var(--mint); box-shadow: 0 0 0 4px rgba(124, 203, 174, .22); }
.abschnitt--nacht .status, [data-dunkel] .status { background: rgba(238, 240, 236, .08); }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.1rem; max-width: 40rem; }
.feld { display: grid; gap: .4rem; }
.feld label { font-weight: 650; }
.feld input, .feld textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  font: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid #6F7774; border-radius: var(--r-klein);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px rgba(29, 91, 77, .18); }
.feld [aria-invalid="true"] { border-color: #B3261E; }
.feld__fehler { color: #B3261E; font-weight: 600; font-size: .95rem; }
.formular__hinweis { font-size: .95rem; color: var(--tinte-2); }
.formular__meldung { padding: 1rem 1.2rem; border-radius: var(--r-gruppe); font-weight: 600; }
.formular__meldung:empty { padding: 0; }
.formular__meldung--gut { background: var(--glas); color: #0E5440; }
.formular__meldung--fehler { background: #FBE9E7; color: #8C1D18; }
.formular button.knopf { border: 0; cursor: pointer; justify-self: start; }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); color: var(--auf-nacht); padding-block: clamp(4rem, 9vw, 7.5rem) 2rem; }
.fuss a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { text-decoration: underline; } }
.fuss__tafel { display: grid; font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .16em; line-height: 1.04; color: var(--auf-nacht); margin-bottom: clamp(3rem, 7vw, 6rem); }
.fuss__tafel span:first-child { font-size: clamp(2.6rem, 1rem + 7vw, 8rem); }
.fuss__tafel span:last-child { font-size: clamp(1.3rem, .8rem + 3.2vw, 3.8rem); color: var(--mint-hell); }
.fuss__raster { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-bottom: 3rem; border-bottom: 1px solid var(--linie-nacht); }
.fuss__titel { font-size: .95rem; font-weight: 650; color: var(--auf-nacht-2); margin-bottom: .9rem; }
.fuss__spalte p + p { margin-top: .9rem; }
.fuss__spalte a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .2rem; }
.fuss__liste li a { display: inline-flex; min-height: 44px; align-items: center; }
.fzeiten { display: grid; }
.fzeiten__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; max-width: 21rem; }
.fzeiten__zeile dt { white-space: nowrap; }
.fzeiten__zeile dd { font-variant-numeric: tabular-nums; text-align: right; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.6rem; color: var(--auf-nacht-2); font-size: .95rem; }
.fuss__unten > p { margin-right: auto; }
.fuss__recht { display: flex; flex-wrap: wrap; column-gap: 1.4rem; }
.fuss__recht a { display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Profile (Joah 22.10.: „WhatsApp, Instagram und unser Google-Profil unten im Footer“): schlichte Zeichen-Knöpfe,
   leicht eckig wie alle Knöpfe, helle Linie auf Nacht, beim Überfahren Mint. Der Name steht für Screenreader im Link. ---------- */
.netz { display: flex; flex-wrap: wrap; gap: .5rem; }
.netz__link {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-knopf); color: var(--auf-nacht);
  box-shadow: inset 0 0 0 1px rgba(238, 240, 236, .22);
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.netz-zeichen { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .netz__link:hover { color: var(--gruen-hover-nacht); background-color: rgba(124, 203, 174, .1); box-shadow: inset 0 0 0 1px var(--mint); }
}
.netz__link:focus-visible { color: var(--gruen-hover-nacht); }
@media (forced-colors: active) { .netz__link { border: 1px solid LinkText; } }
.anschrift { font-style: normal; }

/* 35-whatsapp.css */
/* ==========================================================================
   WhatsApp (Joah 17.10.): dauerhafter Knopf unten rechts und der Knopf „Linse“ im WhatsApp-Look.
   Nur ein Link auf wa.me, es wird nichts von WhatsApp geladen. Auf dem Handy öffnet er die App, am Rechner WhatsApp Web
   oder die Desktop-App. Das Zeichen (Simple Icons, CC0) steht überall nur als weiße Glyphe auf WhatsApp-Grün, ohne Kreis.
   Ecken (Joah 22.10.): am Rechner ist der schwebende Knopf eine dunkle, leicht eckige Pille mit kleinem grünem App-Symbol;
   auf dem Handy wird er selbst zum eckigen App-Symbol (abgerundetes Quadrat). Beim großen Knopf auf den Seiten ist die ganze
   Fläche WhatsApp-Grün, mit derselben weißen Glyphe und derselben Eckenlogik.
   ========================================================================== */
:root { --wa-gruen: #25D366; --wa-tief: #0B211B; }

.wa-schwebe {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 8500;
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 58px; padding: 0 1.35rem 0 8px; border-radius: var(--r-knopf);
  background: var(--tinte); color: #fff; text-decoration: none;
  font-size: .98rem; font-weight: 650; letter-spacing: -.003em; white-space: nowrap;
  box-shadow: 0 16px 36px -14px rgba(15, 19, 18, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s var(--ease-out), visibility .3s, translate .3s var(--ease-out), background-color .25s var(--ease-out);
}
.wa-schwebe .wa-zeichen { width: 42px; height: 42px; padding: 9px; border-radius: calc(var(--r-knopf) - 4px); background: var(--wa-gruen); color: #fff; flex: none; }
.wa-schwebe.ist-weg { opacity: 0; visibility: hidden; pointer-events: none; translate: 0 12px; }
@media (hover: hover) and (pointer: fine) { .wa-schwebe:hover { background: #1c2422; } }
.wa-schwebe:focus-visible { outline: 3px solid var(--wa-gruen); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .wa-schwebe { animation: wa-ein .6s var(--ease-out) .9s both; }
  @keyframes wa-ein { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}
/* Handy: ein App-Symbol, nur das Zeichen (der Name steht für Screenreader im Link) */
@media (max-width: 40em) {
  .wa-schwebe { width: 56px; height: 56px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--r-gruppe); background: var(--wa-gruen); opacity: .96; }
  .wa-schwebe .wa-zeichen { width: 100%; height: 100%; padding: 14px; background: transparent; }
  .wa-schwebe__text { display: none; }
  .wa-schwebe:focus-visible { outline-color: var(--tinte); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 40em) { .wa-schwebe:hover { background: #20c05f; } }
@media print { .wa-schwebe { display: none; } }
@media (forced-colors: active) { .wa-schwebe { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }

/* Der große WhatsApp-Knopf (Joah 22.10.: „mach den ganzen Button in diesem Grün von WhatsApp, dass man vom Logo nur das Weiße
   sieht und nicht den Kreis“, einheitlich mit dem Knopf unten rechts, leicht eckig). Die ganze Fläche ist WhatsApp-Grün, auf
   hellem wie auf dunklem Grund; das Zeichen steht nur als weiße Glyphe darauf, ohne Scheibe, wie im App-Symbol unten rechts.
   Die Schrift ist dunkel: #0B211B auf #25D366 hat 8,5:1, weiße Schrift käme nur auf 2:1.
   Die Linse bleibt das Knopf-System der Seite, ist in Ruhe aber unsichtbar (scale 0) und liegt genau unter dem Zeichen: beim
   Überfahren wächst aus dem Zeichen ein etwas tieferes Grün über die Fläche (#1FBE5B, Schrift darauf 6,9:1), Text und Pfeil
   gleiten herein wie bei allen Knöpfen. Rechts etwas mehr Luft, damit Zeichen, Text und Pfeil im aktiven Zustand auf eine Zeile passen. */
:root { --wa-gruen-tief: #1FBE5B; }
.knopf--wa {
  --k-grund: var(--wa-gruen); --k-text: var(--wa-tief); --k-fuell: var(--wa-gruen-tief); --k-fuell-text: var(--wa-tief);
  padding-right: 1.95rem;
}
.knopf--wa .wa-zeichen { flex: none; width: 22px; height: 22px; color: #fff; }
.knopf--wa .knopf__ruhe { gap: .8rem; }
.knopf--wa .knopf__glas { width: 22px; height: 22px; background: var(--k-fuell); transform: scale(0); }
.knopf--wa .knopf__ruhe .wa-zeichen { position: absolute; left: 0; top: 50%; translate: 0 -50%; transition: opacity .2s var(--ease-out); }
.knopf--wa .knopf__aktiv { gap: .45rem; padding-inline: .85rem .95rem; }
/* 22 px × 50 = 1100 px, so weit wie das 11-px-Glas der anderen Knöpfe */
@media (hover: hover) and (pointer: fine) { .knopf--wa:hover .knopf__glas { transform: scale(50); } }
.knopf--wa:focus-visible .knopf__glas { transform: scale(50); }
@media (prefers-reduced-motion: no-preference) {
  .knopf--wa:focus-visible .knopf__ruhe .wa-zeichen { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .knopf--wa:hover .knopf__ruhe .wa-zeichen { opacity: 0; }
}
/* reduzierte Bewegung: nur die Fläche wird tiefer grün (Regel in 30-bausteine.css), keine Scheibe, nichts gleitet */
@media (prefers-reduced-motion: reduce) {
  .knopf--wa .knopf__glas { visibility: hidden; }
}
/* Bricht der Text am Handy um, dann in zwei gleich lange Zeilen („Schreiben Sie uns / direkt bei WhatsApp“), in Ruhe und im
   aktiven Zustand gleich, damit „WhatsApp“ nie allein steht und die Zeile beim Fokus nicht springt */
.knopf--wa .knopf__text, .knopf--wa .knopf__aktiv > span { text-wrap: balance; }
@media (forced-colors: active) { .knopf--wa { border: 1px solid LinkText; } }

/* 36-vorschau.css */
/* Live-Vorschau „So könnte Ihre Website aussehen“ (Joah 22.10.2026; 39-vorschau.js zeichnet, tools/vorschau.py gibt die
   Standard-Skizze aus). Darstellung nach Bild 3 von talvesa.de: Browser-Fenster und Handy auf dem hellen Seitengrund, ohne Fläche.
   Skizzen-Maße in Entwurfs-Pixeln: --p = 1/1200 (Fenster, Seite 1200 × 706 unter der Kopfzeile) bzw. 1/390 (Handy) der
   Bildschirmbreite (cqw). Die Fenster-Fassung heißt im Code weiter „laptop“ (PB_VORSCHAU.zeichne, 41-idee-livegang.js).
   Zwei Schriften nur für die Skizzen (OFL, lokal): Brygada 1918 (Gastronomie), Bodoni Moda (Salon). */
@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/fonts/brygada-1918-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
}

/* ---------- Abschnitt ---------- */
.vs { position: relative; background: var(--weiss); padding-block: var(--luft); }
.vs__kopf { display: grid; gap: 1rem; max-width: 50rem; margin-bottom: clamp(2.4rem, 5vw, 4.2rem); }
.vs__titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); letter-spacing: .12em; margin-right: -.12em; line-height: 1.1;
  color: var(--tinte); text-wrap: balance; overflow-wrap: break-word;
}
.vs__lead { max-width: 34em; font-size: clamp(1.08rem, 1rem + .35vw, 1.32rem); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.vs__kopf .vs__ohne-js, .vs__aktion > .vs__ohne-js { display: none; }
.no-js .vs__kopf .vs__ohne-js { display: inline; }
.no-js .vs__aktion > .vs__ohne-js { display: grid; }
.no-js .vs__mit-js, .no-js .vs__steuer { display: none; }

.vs__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 6vw, 3rem); }
.vs__steuer { display: grid; gap: 1.75rem; }
@media (min-width: 64em) {
  .vs__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2.4rem; align-items: start; }
  .vs__steuer, .vs__aktion { grid-column: 1 / span 5; }
  .vs__steuer { grid-row: 1; }
  .vs__aktion { grid-row: 2; }
  .vs__buehne { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .no-js .vs__aktion { grid-row: 1; align-self: center; }
}

/* ---------- Steuerung: Feld, Wahl-Kacheln (echte Radios), Farbkasten ---------- */
.vs__feld { display: grid; gap: .55rem; }
.vs__legende { display: block; padding: 0; font-weight: 650; font-size: 1.02rem; color: var(--tinte); }
.vs__gruppe > .vs__legende { margin-bottom: .75rem; }
.vs__legende-zusatz { display: block; margin-top: .1rem; font-weight: 400; color: var(--tinte-2); }
.vs__eingabe {
  width: 100%; min-height: 56px; padding: .8rem 1.05rem;
  font: inherit; font-size: 1.08rem; color: var(--tinte); background: var(--papier);
  border: 1px solid #6F7774; border-radius: var(--r-klein);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.vs__eingabe::placeholder { color: #646B68; opacity: 1; }
.vs__eingabe:focus-visible { outline: none; background: var(--weiss); border-color: var(--kobalt); box-shadow: 0 0 0 3px rgba(29, 91, 77, .18); }
.vs__gruppe { position: relative; min-width: 0; border: 0; padding: 0; margin: 0; }
.vs__kacheln, .vs__stile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.vs__stile { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; container-type: inline-size; }
.vs__wahl { position: relative; display: grid; }
.vs__wahl input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vs__wahl-innen {
  display: flex; align-items: center; gap: .65rem; min-height: 54px; padding: .55rem .9rem;
  border-radius: var(--r-klein); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie);
  font-weight: 600; font-size: .98rem; line-height: 1.25; color: var(--tinte);
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), color .25s var(--ease-out);
}
/* Stil: alle vier in einer Reihe; ist die Reihe schmal (Handy, Raster ab 64em), steht der Punkt über dem Wort */
.vs__wahl--stil .vs__wahl-innen { flex-direction: column; justify-content: center; gap: .3rem; padding: .55rem .3rem; font-size: .94rem; }
.vs__winkel {
  position: absolute; top: .4rem; right: .4rem; width: 11px; height: 11px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75;
  transition: transform .22s var(--ease-out);
}
.vs__wahl--stil.ist-offen .vs__winkel { transform: rotate(180deg); }
@container (min-width: 28rem) {
  .vs__wahl--stil .vs__wahl-innen { flex-direction: row; gap: .55rem; padding: .55rem .6rem; font-size: .98rem; }
  .vs__winkel { position: static; margin-left: -.2rem; }
}
.vs__icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--kobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .vs__wahl:hover .vs__wahl-innen { background: var(--glas); box-shadow: inset 0 0 0 1px rgba(29, 91, 77, .32); }
}
.vs__wahl input:checked + .vs__wahl-innen { background: var(--kobalt); color: #fff; box-shadow: inset 0 0 0 1px var(--kobalt); }
.vs__wahl input:checked + .vs__wahl-innen .vs__icon { stroke: var(--mint-hell); }
.vs__wahl input:focus-visible + .vs__wahl-innen { outline: 2px solid var(--kobalt); outline-offset: 3px; }
.vs__muster { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 22, 21, .3); }
.vs__muster--hell { background: #fff; }
.vs__muster--warm { background: #E9DCC6; }
.vs__muster--dunkel { background: #161718; }
.vs__muster--farbig { background: conic-gradient(#1F3A64 0 25%, #8E2626 0 50%, #4E5A26 0 75%, #145A66 0); }
.vs__muster--farbig.ist-gewaehlt { background: var(--c, #1F3A64); }
.vs__wahl input:checked + .vs__wahl-innen .vs__muster { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

/* Farbkasten: klappt unter den Stil-Kacheln auf (rechts, unter „Farbig“), schließt bei Wahl, Escape, Klick außerhalb */
.vs__farben {
  position: absolute; z-index: 6; right: 0; top: calc(100% + .6rem); width: min(100%, 21rem);
  padding: .95rem 1rem 1.05rem; border-radius: var(--r-gruppe); background: var(--weiss);
  box-shadow: 0 0 0 1px var(--linie-2), 0 2px 6px rgba(15, 19, 18, .06), 0 22px 44px -20px rgba(15, 19, 18, .38);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: 100% 0;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out);
}
.vs__farben.ist-offen { opacity: 1; transform: none; }
.vs__farben[hidden] { display: none; }
.vs__farben-kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; font-size: .95rem; font-weight: 650; color: var(--tinte); }
.vs__farben-name { font-weight: 600; color: var(--tinte-2); }
.vs__farbfelder { display: grid; grid-template-columns: repeat(5, 44px); justify-content: space-between; row-gap: .55rem; }
.vs__farbe {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c, #3C4855); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.vs__farbe[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--tinte); }
.vs__farbe[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 7px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -70%) rotate(-45deg);
}
.vs__farbe:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 5px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .vs__farbe:hover { transform: scale(1.07); } }

.vs__aktion { display: grid; gap: .9rem; justify-items: start; }
.vs__aktion > div { display: grid; gap: .9rem; justify-items: start; }
.vs__notiz { max-width: 31em; font-size: .95rem; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }

/* ---------- Bühne: keine Fläche, kein Rand (Joah 22.10.2026: „das zweite Bild ins dritte umwandeln“). Ein großes
   Browser-Fenster steht auf dem hellen Seitengrund, das Handy überlappt es unten rechts. Maße in Prozent der Bühnenbreite;
   die Oberkante des Handys liegt gut unter der Menüleiste im Fenster (etwa 27 % der Fensterhöhe), damit Knopf und Bild
   oben frei bleiben; Handy 26,5 % breit (bisher 27 % neben einem kleineren Laptop).
   Schmal (unter 40em): das Handy (45 %, Höhe etwa 2,1 × Breite) beginnt knapp unter der Menüleiste im Fenster, damit die
   Bühne nicht höher als nötig wird; die Karte im Fenster entfällt dort (das Handy würde sie fast ganz verdecken und zeigt
   dieselbe Karte groß). ---------- */
.vs__buehne { position: relative; aspect-ratio: 1 / 1.13; }
.vs-fenster { position: absolute; z-index: 1; left: 0; top: 0; width: 95%; }
.vs-handy { position: absolute; z-index: 2; right: 0; bottom: 0; width: 45%; container-type: inline-size; }
@media (max-width: 39.99em) {
  .vs-fenster .vs-seite .s-karte { display: none; }
}
@media (min-width: 40em) {
  .vs__buehne { aspect-ratio: 1 / .71; }
  .vs-fenster { width: 86.5%; }
  .vs-handy { width: 26.5%; }
}
/* Großer Bildschirm: die Bühne bleibt beim Durchgehen der Steuerung im Blick. Ihre Breite folgt der Bildschirmhöhe, damit sie
   unten 5,5rem frei lässt und der schwebende WhatsApp-Knopf nie auf der Browser-Leiste im Handy sitzt (1366 × 657); ab etwa
   900 px Höhe ändert sich nichts. */
@media (min-width: 64em) {
  .vs__buehne {
    position: sticky; top: calc(var(--kopf-h) + 1.25rem); justify-self: end;
    width: min(100%, calc((100vh - var(--kopf-h) - 1.25rem - 5.5rem) / .71));
    width: min(100%, calc((100svh - var(--kopf-h) - 1.25rem - 5.5rem) / .71));
  }
}

/* Fenster: heller Rahmen mit großem Radius, feine graue Kante, weicher großer Schatten (Ecken in Prozent: 26 von 1200 × 778) */
.vs-fenster {
  border-radius: 2.2% / 3.4%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 19, 18, .05), 0 1.4rem 2.6rem -1.4rem rgba(15, 19, 18, .2), 0 3.2rem 6rem -2.4rem rgba(15, 19, 18, .17);
}
.vs-fenster::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px #D5D6D2;
}
.vs-handy__rahmen {
  padding: 2.8cqw; border-radius: 15.5cqw; background: #0E1011;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(15, 19, 18, .14),
    0 1.5rem 2.6rem -1.3rem rgba(15, 19, 18, .42), 0 3.4rem 5rem -2.6rem rgba(15, 19, 18, .3);
}

/* Bildschirme: Container für die Skizze. Fenster mit Kopfzeile (drei Punkte, runde Adressleiste), Handy mit Insel oben und
   dunkler Browser-Leiste unten. Ecken in Prozent (waagrecht / senkrecht), damit sie auch in fremden Elementen stimmen. */
.vs-schirm { position: relative; overflow: hidden; container-type: inline-size; background: #fff; }
.vs-schirm--laptop { aspect-ratio: 1200 / 778; border-radius: 2.2% / 3.4%; --p: calc(100cqw / 1200); }
.vs-schirm--handy { aspect-ratio: 390 / 844; border-radius: 13.4% / 6.2%; --p: calc(100cqw / 390); }
.vs-leiste {
  position: absolute; z-index: 3; inset: 0 0 auto; height: calc(72*var(--p)); display: flex; align-items: center; gap: calc(14*var(--p));
  padding-inline: calc(29*var(--p)); background: #F3F3F1; border-bottom: max(1px, calc(1.5*var(--p))) solid #DCDCD8;
}
.vs-leiste > i { width: calc(18*var(--p)); height: calc(18*var(--p)); flex: none; border-radius: 50%; background: #C4C5C2; }
.vs-url {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--f-text); font-weight: 400; line-height: 1;
}
.vs-url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Schloss: nur noch in der Adressleiste von „Idee zum Livegang“ (SCHLOSS aus tools/vorschau.py, Größe in 37-idee-livegang.css) */
.vs-schloss { flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
.vs-leiste .vs-url {
  position: absolute; left: 50%; top: 50%; width: calc(560*var(--p)); height: calc(52*var(--p)); transform: translate(-50%, -50%);
  padding-inline: calc(26*var(--p)); border-radius: calc(26*var(--p)); background: #fff;
  box-shadow: 0 0 0 max(1px, calc(1.5*var(--p))) #D3D4D0; color: #3A3E3D; font-size: calc(23*var(--p));
}
.vs-insel {
  position: absolute; z-index: 3; left: 50%; top: calc(12*var(--p)); width: calc(112*var(--p)); height: calc(30*var(--p));
  transform: translateX(-50%); border-radius: calc(15*var(--p)); background: #0B0C0D;
}
.vs-unten {
  position: absolute; z-index: 3; inset: auto 0 0; height: calc(84*var(--p)); display: grid; align-items: center; align-content: start;
  grid-template-columns: calc(54*var(--p)) minmax(0, 1fr) calc(54*var(--p)); padding: calc(12*var(--p)) calc(6*var(--p)) 0;
  background: #151617; color: #8F9192;
}
.vs-unten > svg {
  justify-self: center; width: calc(22*var(--p)); height: calc(22*var(--p));
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.vs-unten .vs-url {
  height: calc(46*var(--p)); padding-inline: calc(18*var(--p)); border-radius: calc(23*var(--p));
  background: #2A2C2E; color: #E3E4E2; font-size: calc(19*var(--p));
}

/* ---------- Die Skizze: Grundlage, Stile, Branchenfarben ---------- */
.vs-seite {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--g); color: var(--x);
  font-family: var(--f-text); font-size: calc(16*var(--p)); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-align: left;
}
.vs-schirm--laptop > .vs-seite { top: calc(72*var(--p)); }
.vs-schirm--handy > .vs-seite { bottom: calc(84*var(--p)); padding-top: calc(50*var(--p)); }
.vs-seite--neu { opacity: 0; transition: opacity .32s var(--ease-out); }
.vs-seite--neu.ist-da { opacity: 1; }
/* --g Seite, --g2 ruhige Fläche, --gk Karte, --x Schrift, --x2 leise Schrift, --l feine Linie, --l2 Linie an Feldern */
.vs-st-hell { --g: #FFFFFF; --g2: #F1F1EF; --gk: #FFFFFF; --x: #17191A; --x2: #5A5F61; --l: rgba(23, 25, 26, .11); --l2: rgba(23, 25, 26, .2); }
.vs-st-warm { --g: #F6EFE4; --g2: #EBE1D2; --gk: #FFFBF5; --x: #2B2118; --x2: #685849; --l: rgba(43, 33, 24, .13); --l2: rgba(43, 33, 24, .24); }
.vs-st-dunkel { --g: #121314; --g2: #2A2D2F; --gk: #1C1E20; --x: #F2F0EB; --x2: #ABA9A3; --l: rgba(242, 240, 235, .13); --l2: rgba(242, 240, 235, .24); }
.vs-st-farbig { --g: #FFFFFF; --g2: color-mix(in srgb, var(--f) 9%, #fff); --gk: #FFFFFF; --x: #17191A; --x2: #5A5F61; --l: rgba(23, 25, 26, .11); --l2: rgba(23, 25, 26, .2); }
.vs-seite { --ax: #fff; --schatten: rgba(15, 19, 18, .2); }
.vs-st-dunkel { --ax: #121314; --schatten: rgba(0, 0, 0, .55); }
.vs-b-gastronomie.vs-st-hell { --a: #9C3D22; } .vs-b-gastronomie.vs-st-warm { --a: #7E4524; } .vs-b-gastronomie.vs-st-dunkel { --a: #E2AE72; }
.vs-b-handwerk.vs-st-hell { --a: #24466B; } .vs-b-handwerk.vs-st-warm { --a: #6F4A26; } .vs-b-handwerk.vs-st-dunkel { --a: #E5B53F; }
.vs-b-praxis.vs-st-hell { --a: #2C6A58; } .vs-b-praxis.vs-st-warm { --a: #4F6A4B; } .vs-b-praxis.vs-st-dunkel { --a: #93CFBC; }
.vs-b-salon.vs-st-hell { --a: #7A4A58; } .vs-b-salon.vs-st-warm { --a: #8A5A43; } .vs-b-salon.vs-st-dunkel { --a: #DDBBA0; }
.vs-b-fotografie.vs-st-hell { --a: #151515; } .vs-b-fotografie.vs-st-warm { --a: #4E3D30; } .vs-b-fotografie.vs-st-dunkel { --a: #EDEBE6; }
.vs-b-verein.vs-st-hell { --a: #1F5C3B; } .vs-b-verein.vs-st-warm { --a: #803A2C; } .vs-b-verein.vs-st-dunkel { --a: #E7C552; }
.vs-st-farbig { --a: var(--f); }
.vs-seite { --ak: var(--a); }
/* Farbig: die gewählte Farbe wird zur Fläche der Bühne (unter der Menüleiste), darauf helle Schrift; die Karte bleibt weiß */
.vs-st-farbig .s-flaeche {
  --g: var(--f); --g2: rgba(255, 255, 255, .14); --x: #fff; --x2: rgba(255, 255, 255, .84); --l: rgba(255, 255, 255, .24); --l2: rgba(255, 255, 255, .42);
  --a: #fff; --ax: var(--f); --ak: #fff; --schatten: rgba(0, 0, 0, .3); background: var(--g); color: var(--x);
}
.vs-st-farbig .s-karte {
  --g: #fff; --g2: color-mix(in srgb, var(--f) 9%, #fff); --gk: #fff; --x: #17191A; --x2: #5A5F61; --l: rgba(23, 25, 26, .11); --l2: rgba(23, 25, 26, .2);
  --a: var(--f); --ax: #fff; --ak: var(--f);
}

/* ---------- Bausteine der Skizze (Fenster: 1200 × 706 Entwurfs-Pixel unter der Kopfzeile) ---------- */
.vs-seite { --sk: var(--f-text); --sr: calc(10*var(--p)); --kr: calc(14*var(--p)); }
.vs-seite .s-nav {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: calc(38*var(--p)); height: calc(96*var(--p));
  padding-inline: calc(60*var(--p)); background: var(--g); box-shadow: inset 0 calc(-1*max(1px, calc(1.5*var(--p)))) 0 var(--l); color: var(--x);
}
.vs-seite .s-logo {
  min-width: 0; max-width: calc(430*var(--p)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--sk); font-size: calc(25*var(--p)); font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
}
.vs-seite .s-links { display: flex; gap: calc(38*var(--p)); font-size: calc(17*var(--p)); white-space: nowrap; }
.vs-seite .s-rechts { display: flex; align-items: center; margin-left: auto; }
/* Fenster: steht der Name links, rücken die Links nach rechts vor den Knopf (Bild 3); den Abstand gibt der gap der Leiste.
   Gastronomie und Salon (Links, Name in der Mitte, Knopf) bleiben, wie sie sind. */
.vs--laptop .s-logo + .s-links { margin-left: auto; }
.vs--laptop .s-logo + .s-links + .s-rechts { margin-left: 0; }
.vs-seite .s-btn {
  display: inline-flex; align-items: center; justify-content: center; height: calc(50*var(--p)); padding-inline: calc(24*var(--p));
  border-radius: var(--sr); background: var(--a); color: var(--ax); font-size: calc(17*var(--p)); font-weight: 650; white-space: nowrap;
}
.vs-seite .s-btn--linie { background: transparent; color: var(--ak); box-shadow: inset 0 0 0 calc(1.5*var(--p)) var(--ak); }
.vs-seite .s-tl {
  display: inline-flex; align-items: center; gap: calc(12*var(--p)); font-size: calc(17*var(--p)); font-weight: 600; color: var(--x); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: max(1px, calc(1.5*var(--p))); text-underline-offset: .42em;
}
.vs-seite svg:not(.s-blaetter):not(.s-straehnen) { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vs-seite .s-tl svg { width: calc(17*var(--p)); height: calc(17*var(--p)); color: var(--ak); }
.vs-seite .s-burger { display: none; width: calc(24*var(--p)); height: calc(14*var(--p)); border-block: calc(2*var(--p)) solid var(--x); }
.vs-seite .s-h1 { font-family: var(--sk); font-size: calc(56*var(--p)); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; text-wrap: balance; }
.vs-seite .s-p { font-size: calc(17*var(--p)); line-height: 1.62; color: var(--x2); text-wrap: pretty; }
.vs-seite .s-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14*var(--p)) calc(30*var(--p)); }
.vs-seite .s-klein { font-size: calc(13.5*var(--p)); line-height: 1.35; color: var(--x2); }
.vs-seite .s-bild { position: relative; overflow: hidden; }
.vs-seite .s-bild > i, .vs-seite .s-bild > svg { position: absolute; display: block; }

/* Bühne der Skizze: Text links, Bildfläche rechts bis an den Rand, Karte überlappt die Bildfläche, unten drei kleine Infos */
.vs-seite .s-held { position: relative; flex: 1 1 auto; min-height: 0; }
.vs--laptop .s-text {
  position: absolute; z-index: 1; left: calc(60*var(--p)); top: calc(74*var(--p)); width: calc(480*var(--p));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(24*var(--p));
}
.vs--laptop .s-knoepfe { margin-top: calc(6*var(--p)); }
.vs--laptop .s-held > .s-bild {
  position: absolute; left: calc(652*var(--p)); right: 0; top: calc(26*var(--p)); height: calc(340*var(--p));
  border-radius: calc(14*var(--p)) 0 0 calc(14*var(--p));
}
.vs--laptop .s-karte { position: absolute; z-index: 2; left: calc(604*var(--p)); bottom: calc(28*var(--p)); width: calc(360*var(--p)); }
.vs--laptop .s-infos { position: absolute; left: calc(60*var(--p)); bottom: calc(40*var(--p)); width: calc(500*var(--p)); }
.vs-seite .s-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(26*var(--p)); }
.vs-seite .s-punkt {
  display: grid; align-content: start; gap: calc(5*var(--p)); padding-top: calc(15*var(--p));
  box-shadow: inset 0 max(1px, calc(1.5*var(--p))) 0 var(--l2); font-size: calc(16*var(--p)); line-height: 1.38; text-wrap: balance;
}

/* Karte: Termine, Tageskarte, Leistungen, Anfrage, Galerie oder nächste Termine (je Branche) */
.vs-seite .s-karte {
  display: grid; gap: calc(14*var(--p)); padding: calc(24*var(--p)) calc(24*var(--p)) calc(20*var(--p)); border-radius: var(--kr);
  background: var(--gk); color: var(--x);
  box-shadow: 0 0 0 max(1px, calc(1*var(--p))) var(--l), 0 calc(22*var(--p)) calc(50*var(--p)) calc(-10*var(--p)) var(--schatten);
}
.vs-seite .s-karte__kopf { display: grid; gap: calc(3*var(--p)); }
.vs-seite .s-karte__titel { font-family: var(--sk); font-size: calc(19*var(--p)); font-weight: 650; line-height: 1.25; }
.vs-seite .s-karte__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12*var(--p)); margin-top: calc(2*var(--p)); padding-top: calc(14*var(--p));
  box-shadow: inset 0 max(1px, calc(1*var(--p))) 0 var(--l); font-size: calc(14*var(--p)); color: var(--x2); white-space: nowrap;
}
.vs-seite .s-mehr { display: inline-flex; align-items: center; gap: calc(5*var(--p)); color: var(--ak); font-weight: 650; }
.vs-seite .s-mehr svg { width: calc(14*var(--p)); height: calc(14*var(--p)); }
/* Praxis: Leistung, Tage, Uhrzeiten (eine gewählt, eine vergeben) */
.vs-seite .s-wahl {
  display: flex; align-items: center; justify-content: space-between; gap: calc(10*var(--p)); height: calc(46*var(--p)); padding-inline: calc(16*var(--p));
  border-radius: calc(10*var(--p)); box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2); font-size: calc(16*var(--p)); white-space: nowrap;
}
.vs-seite .s-wahl svg { width: calc(16*var(--p)); height: calc(16*var(--p)); color: var(--x2); }
.vs-seite .s-tage, .vs-seite .s-zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10*var(--p)); }
.vs-seite .s-tage > span {
  display: grid; place-content: center; justify-items: center; height: calc(58*var(--p)); border-radius: calc(10*var(--p));
  box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2); line-height: 1.15;
}
.vs-seite .s-tage small { font-size: calc(13*var(--p)); color: var(--x2); }
.vs-seite .s-tage b { font-size: calc(17*var(--p)); font-weight: 700; }
.vs-seite .s-tage .ist { background: color-mix(in srgb, var(--a) 9%, var(--gk)); box-shadow: inset 0 0 0 calc(2.5*var(--p)) var(--a); color: var(--ak); }
.vs-seite .s-tage .ist small { color: inherit; }
.vs-seite .s-zeiten > span {
  display: grid; place-items: center; height: calc(40*var(--p)); border-radius: calc(10*var(--p));
  box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2); font-size: calc(16*var(--p)); font-variant-numeric: tabular-nums;
}
.vs-seite .s-zeiten .ist { background: var(--a); color: var(--ax); box-shadow: none; font-weight: 650; }
.vs-seite .s-zeiten .weg { background: var(--g2); box-shadow: none; color: var(--x2); text-decoration: line-through; }
/* Gastronomie: Tageskarte mit Punktlinien */
.vs-seite .s-karte--liste .s-karte__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(12*var(--p)); padding-bottom: calc(12*var(--p));
  box-shadow: inset 0 calc(-1*max(1px, calc(1*var(--p)))) 0 var(--l);
}
.vs-seite .s-karte--liste .s-karte__titel { font-size: calc(21*var(--p)); font-weight: 600; }
.vs-seite .s-akzent { font-size: calc(13.5*var(--p)); font-weight: 650; color: var(--ak); white-space: nowrap; }
.vs-seite .s-karte--liste { gap: calc(11*var(--p)); }
.vs-seite .s-karte--liste .s-zeile { display: flex; align-items: baseline; gap: calc(10*var(--p)); font-size: calc(15.5*var(--p)); white-space: nowrap; }
.vs-seite .s-karte--liste .s-zeile > i { flex: 1; min-width: calc(12*var(--p)); border-bottom: calc(1.5*var(--p)) dotted var(--x2); opacity: .55; }
.vs-seite .s-karte--liste .s-zeile > span:last-child { font-weight: 650; font-variant-numeric: tabular-nums; }
/* Friseur: Leistungen mit Dauer und Preis, eine gewählt */
.vs-seite .s-karte--preise { gap: calc(8*var(--p)); }
.vs-seite .s-karte--preise .s-karte__kopf { margin-bottom: calc(6*var(--p)); }
.vs-seite .s-karte--preise .s-zeile {
  display: grid; grid-template-columns: calc(18*var(--p)) minmax(0, 1fr) auto; gap: calc(14*var(--p)); align-items: center;
  height: calc(56*var(--p)); padding-inline: calc(14*var(--p)); box-shadow: inset 0 0 0 max(1px, calc(1*var(--p))) var(--l); font-size: calc(15.5*var(--p)); white-space: nowrap;
}
.vs-seite .s-leistung { display: grid; gap: calc(1*var(--p)); min-width: 0; line-height: 1.25; }
.vs-seite .s-leistung > span { overflow: hidden; text-overflow: ellipsis; }
.vs-seite .s-karte--preise .s-zeile.ist { background: color-mix(in srgb, var(--a) 8%, var(--gk)); box-shadow: inset 0 0 0 calc(2*var(--p)) var(--a); }
.vs-seite .s-radio { width: calc(18*var(--p)); height: calc(18*var(--p)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5*var(--p)) var(--l2); }
.vs-seite .ist > .s-radio { box-shadow: inset 0 0 0 calc(5.5*var(--p)) var(--a); }
.vs-seite .s-dauer { font-size: calc(13*var(--p)); color: var(--x2); }
.vs-seite .s-preis { font-family: var(--sk); font-size: calc(17*var(--p)); font-weight: 600; text-align: right; }
/* Handwerk: Anfrage mit Auswahl, zwei Feldern und Knopf */
.vs-seite .s-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8*var(--p)); }
.vs-seite .s-chips > span {
  display: grid; place-items: center; height: calc(40*var(--p)); border-radius: var(--sr); box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2);
  font-size: calc(15*var(--p)); font-weight: 600; white-space: nowrap;
}
.vs-seite .s-chips .ist { background: var(--a); color: var(--ax); box-shadow: none; }
.vs-seite .s-feld {
  display: grid; gap: calc(2*var(--p)); padding: calc(10*var(--p)) calc(14*var(--p)); border-radius: var(--sr);
  box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2); font-size: calc(15.5*var(--p)); line-height: 1.3;
}
.vs-seite .s-feld .s-klein { font-size: calc(12.5*var(--p)); }
.vs-seite .s-karte .s-btn { width: 100%; margin-top: calc(2*var(--p)); }
/* Fotografie: Filter und kleine Galerie */
.vs-seite .s-filter { display: flex; gap: calc(6*var(--p)); white-space: nowrap; }
.vs-seite .s-filter > span { padding: calc(7*var(--p)) calc(12*var(--p)); font-size: calc(13.5*var(--p)); color: var(--x2); box-shadow: inset 0 0 0 max(1px, calc(1*var(--p))) var(--l); }
.vs-seite .s-filter .ist { background: var(--x); color: var(--gk); box-shadow: none; }
.vs-seite .s-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc(88*var(--p)); gap: calc(6*var(--p)); }
.vs-seite .s-k { position: relative; display: block; overflow: hidden; }
/* Verein: nächste Termine mit Datumskachel */
.vs-seite .s-karte--termine { gap: calc(12*var(--p)); }
.vs-seite .s-termin { display: grid; grid-template-columns: calc(58*var(--p)) minmax(0, 1fr); gap: calc(14*var(--p)); align-items: center; }
.vs-seite .s-datum {
  display: grid; justify-items: center; align-content: center; height: calc(62*var(--p)); border-radius: var(--sr);
  box-shadow: inset 0 0 0 max(1px, calc(1.5*var(--p))) var(--l2); line-height: 1.05;
}
.vs-seite .s-datum small { font-size: calc(12*var(--p)); font-weight: 600; color: var(--x2); }
.vs-seite .s-datum b { font-family: var(--sk); font-size: calc(23*var(--p)); font-weight: 800; }
.vs-seite .s-termin.ist .s-datum { background: var(--a); color: var(--ax); box-shadow: none; }
.vs-seite .s-termin.ist .s-datum small { color: inherit; }
.vs-seite .s-was { display: grid; gap: calc(2*var(--p)); min-width: 0; }
.vs-seite .s-was > span:first-child { font-size: calc(16.5*var(--p)); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Handy: dieselbe Seite schmal (Name, Menü, Überschrift, Bild, Karte, Infos) ---------- */
.vs-seite.vs--handy .s-nav { display: flex; height: calc(68*var(--p)); gap: calc(12*var(--p)); padding-inline: calc(20*var(--p)); }
.vs--handy .s-links, .vs--handy .s-nav .s-btn { display: none; }
.vs--handy .s-burger { display: block; }
.vs-seite.vs--handy .s-rechts { margin-left: auto; }
.vs--handy .s-logo { max-width: calc(300*var(--p)); font-size: calc(21*var(--p)); text-align: left; }
.vs--handy .s-held { display: flex; flex-direction: column; }
.vs--handy .s-text { display: flex; flex-direction: column; gap: calc(12*var(--p)); padding: calc(24*var(--p)) calc(20*var(--p)); }
.vs--handy .s-h1 { font-size: calc(33*var(--p)); }
.vs--handy .s-p { font-size: calc(15*var(--p)); line-height: 1.55; }
.vs--handy .s-zusatz, .vs--handy .s-knoepfe { display: none; }
.vs--handy .s-held > .s-bild { flex: none; height: calc(170*var(--p)); }
.vs--handy .s-karte { position: relative; z-index: 1; margin: calc(-88*var(--p)) calc(16*var(--p)) 0; padding: calc(18*var(--p)) calc(18*var(--p)) calc(16*var(--p)); gap: calc(12*var(--p)); }
.vs--handy .s-infos { grid-template-columns: minmax(0, 1fr); gap: 0; padding: calc(18*var(--p)) calc(20*var(--p)); }
.vs--handy .s-punkt { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12*var(--p)); padding-block: calc(11*var(--p)); font-size: calc(14*var(--p)); white-space: nowrap; }

/* ---------- Gastronomie: Brygada, Name mittig, Fensterlicht mit Tasse, Tageskarte ---------- */
.vs-b-gastronomie { --sk: "Brygada 1918", Georgia, serif; --sr: calc(3*var(--p)); --kr: calc(6*var(--p)); }
.vs-b-gastronomie .s-logo { font-size: calc(30*var(--p)); text-align: center; }
.vs-b-gastronomie.vs--laptop .s-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.vs-b-gastronomie.vs--laptop .s-rechts { justify-self: end; }
.vs-b-gastronomie .s-h1 { font-size: calc(60*var(--p)); letter-spacing: -.012em; }
.vs--handy.vs-b-gastronomie .s-logo { font-size: calc(23*var(--p)); }
.vs--handy.vs-b-gastronomie .s-h1 { font-size: calc(33*var(--p)); }
.vs-seite .s-bild--cafe {
  background:
    radial-gradient(70% 55% at 36% 30%, #FFF4E2 0, rgba(255, 244, 226, 0) 70%),
    linear-gradient(180deg, #D9C6AB 0%, #B49474 52%, #7A5940 100%);
}
.s-bild--cafe .s-fenster {
  left: 12%; top: 6%; width: 44%; height: 56%; opacity: .95; filter: blur(calc(5*var(--p)));
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(112, 82, 54, .5) 48.5% 51.5%, transparent 51.5%),
    linear-gradient(0deg, transparent 46%, rgba(112, 82, 54, .5) 46% 50%, transparent 50%),
    linear-gradient(168deg, #FFFCF6, #F3E2C7);
  box-shadow: 0 0 calc(70*var(--p)) calc(26*var(--p)) rgba(255, 240, 214, .6);
}
.s-bild--cafe .s-licht {
  inset: 0; filter: blur(calc(2.5*var(--p)));
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 228, 176, .95) 0 1.8%, rgba(255, 228, 176, 0) 3.4%),
    radial-gradient(circle at 88% 34%, rgba(255, 214, 150, .75) 0 2.4%, rgba(255, 214, 150, 0) 4.4%),
    radial-gradient(circle at 68% 44%, rgba(255, 236, 202, .7) 0 1.3%, rgba(255, 236, 202, 0) 2.8%),
    radial-gradient(circle at 93% 10%, rgba(255, 220, 162, .6) 0 3%, rgba(255, 220, 162, 0) 5.6%),
    radial-gradient(circle at 82% 52%, rgba(255, 222, 170, .5) 0 1.8%, rgba(255, 222, 170, 0) 3.6%);
}
.s-bild--cafe .s-tisch {
  left: -4%; right: -4%; bottom: 0; height: 30%; filter: blur(calc(1.2*var(--p)));
  background: linear-gradient(180deg, #A27858 0, #73503A 16%, #4E3424 100%);
  box-shadow: inset 0 calc(3*var(--p)) 0 rgba(255, 232, 205, .35);
}
.s-bild--cafe .s-tasse { position: absolute; left: 58%; bottom: 13%; width: 24%; aspect-ratio: 1 / .72; container-type: inline-size; filter: blur(.45cqw); }
.s-tasse > i { position: absolute; display: block; }
.s-tasse .s-teller {
  left: 0; right: 0; bottom: 0; height: 26%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 34%, #FFFFFF 0, #EFEAE3 44%, #C9BEB1 78%, #A3968A 100%);
  box-shadow: 0 2.5cqw 5cqw rgba(40, 24, 12, .5);
}
.s-tasse .s-koerper {
  left: 21%; width: 58%; bottom: 13%; height: 62%; border-radius: 5% 5% 46% 46% / 5% 5% 62% 62%;
  background: linear-gradient(90deg, #CDC4B8 0, #FAF7F2 28%, #FFFFFF 44%, #EAE4DC 70%, #B4AA9E 100%);
}
.s-tasse .s-kaffee {
  left: 21%; width: 58%; top: 19%; height: 13%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 62%, #74472A 0, #4D2B16 56%, #2E180A 100%);
  box-shadow: 0 0 0 1.6cqw #F7F3EE, 0 .6cqw 1.2cqw 1.4cqw rgba(0, 0, 0, .06);
}
.s-tasse .s-henkel {
  right: 7.5%; top: 34%; width: 19%; height: 30%; border-radius: 50%;
  border: 3.4cqw solid #E6DFD6; border-left-color: transparent; border-bottom-color: #CFC6BA;
}
.vs--handy .s-bild--cafe .s-fenster { left: 8%; width: 50%; height: 62%; }
.vs--handy .s-bild--cafe .s-tasse { left: 55%; width: 30%; }

/* ---------- Handwerk: Archivo kräftig, Holzwand mit Licht, Anfrage-Karte ---------- */
.vs-b-handwerk { --sk: "Archivo", "Atkinson Hyperlegible Next", sans-serif; --sr: calc(3*var(--p)); --kr: calc(4*var(--p)); }
.vs-b-handwerk .s-logo { font-size: calc(22*var(--p)); font-weight: 800; font-stretch: 112%; letter-spacing: .02em; text-transform: uppercase; }
.vs-b-handwerk .s-h1 { font-size: calc(58*var(--p)); font-weight: 800; font-stretch: 108%; line-height: 1; letter-spacing: 0; text-transform: uppercase; text-wrap: wrap; }
.vs-b-handwerk .s-karte__titel { font-weight: 800; font-stretch: 108%; text-transform: uppercase; letter-spacing: .01em; }
.vs--handy.vs-b-handwerk .s-logo { font-size: calc(19*var(--p)); }
.vs--handy.vs-b-handwerk .s-h1 { font-size: calc(34*var(--p)); }
.vs-seite .s-bild--holz {
  background:
    radial-gradient(70% 90% at 72% 10%, rgba(255, 226, 180, .5), rgba(255, 226, 180, 0) 70%),
    linear-gradient(0deg, rgba(30, 18, 8, .38), rgba(30, 18, 8, 0) 46%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 .25%, rgba(0, 0, 0, 0) .25% .9%, rgba(0, 0, 0, .05) .9% 1.2%, rgba(0, 0, 0, 0) 1.2% 1.9%),
    linear-gradient(90deg, #8A5E3A 0 12.2%, #3E2715 12.2% 12.6%, #75502F 12.6% 25%, #3E2715 25% 25.4%, #93683F 25.4% 37.6%,
      #3E2715 37.6% 38%, #6E4A2B 38% 50.2%, #3E2715 50.2% 50.6%, #86603B 50.6% 62.8%, #3E2715 62.8% 63.2%, #7A5431 63.2% 75.4%,
      #3E2715 75.4% 75.8%, #8E6440 75.8% 88%, #3E2715 88% 88.4%, #70492A 88.4% 100%);
}
.s-bild--holz .s-licht {
  inset: 0; mix-blend-mode: soft-light;
  background: radial-gradient(60% 90% at 78% 18%, rgba(255, 220, 170, .9), rgba(255, 220, 170, 0) 70%);
}
/* Wandregal mit zwei Brettern und ein paar Werkstücken */
.s-bild--holz .s-brett { left: 12%; width: 50%; height: 3.2%; background: linear-gradient(180deg, #D7B184, #A97C50); box-shadow: 0 calc(10*var(--p)) calc(16*var(--p)) rgba(20, 10, 2, .45); }
.s-bild--holz .s-brett--1 { top: 34%; }
.s-bild--holz .s-brett--2 { top: 64%; }
.s-bild--holz .s-stueck { width: 9%; background: linear-gradient(90deg, #E4C49A, #C49A68); box-shadow: inset calc(-3*var(--p)) 0 0 rgba(90, 56, 24, .35); }
.s-bild--holz .s-stueck--1 { left: 16%; top: 16%; height: 18%; }
.s-bild--holz .s-stueck--2 { left: 27%; top: 22%; height: 12%; width: 13%; background: linear-gradient(180deg, #F0DCC0, #D2AF82); }
.s-bild--holz .s-stueck--3 { left: 44%; top: 50%; height: 14%; width: 7%; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.s-bild--holz .s-stueck--4 { left: 22%; top: 46%; height: 18%; width: 16%; background: linear-gradient(180deg, #CFA676, #A77A4B); }

/* ---------- Praxis & Therapie: ruhig, Name mit Linie, Wand mit Blätterschatten, freie Termine ---------- */
.vs-b-praxis { --sr: calc(10*var(--p)); --kr: calc(16*var(--p)); }
.vs-b-praxis .s-logo { display: grid; gap: calc(3*var(--p)); padding-left: calc(18*var(--p)); box-shadow: inset calc(3*var(--p)) 0 0 var(--a); font-size: calc(23*var(--p)); font-weight: 500; line-height: 1.15; }
.vs-b-praxis .s-logo > span { overflow: hidden; text-overflow: ellipsis; }
.vs-b-praxis .s-unter { font-size: calc(14.5*var(--p)); font-weight: 400; color: var(--x2); letter-spacing: 0; }
.vs-b-praxis .s-h1 { font-size: calc(62*var(--p)); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; }
.vs-b-praxis.vs--laptop .s-h1 { max-width: calc(430*var(--p)); }
.vs-b-praxis .s-karte__titel { font-weight: 600; }
.vs--handy.vs-b-praxis .s-logo { font-size: calc(18*var(--p)); padding-left: calc(12*var(--p)); box-shadow: inset calc(2*var(--p)) 0 0 var(--a); }
.vs--handy.vs-b-praxis .s-unter { font-size: calc(12*var(--p)); }
.vs--handy.vs-b-praxis .s-h1 { font-size: calc(31*var(--p)); }
.vs-seite .s-bild--praxis {
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(120, 140, 120, .28), rgba(120, 140, 120, 0) 70%),
    linear-gradient(180deg, #E4E8DF 0%, #D3DACE 64%, #C4CCBE 100%);
}
.s-bild--praxis .s-sonne {
  left: 2%; top: 4%; width: 60%; height: 84%; transform: skewX(-14deg); filter: blur(calc(10*var(--p)));
  background: linear-gradient(160deg, rgba(255, 253, 244, .95), rgba(255, 250, 236, .6) 62%, rgba(255, 250, 236, 0));
}
.s-bild--praxis .s-blaetter { right: 0; top: 0; width: 70%; height: 100%; fill: rgba(46, 64, 50, .32); filter: blur(calc(2*var(--p))); }
.s-bild--praxis .s-stiel { fill: none; stroke: rgba(46, 64, 50, .28); stroke-width: 1.5; }
.s-bild--praxis .s-ablage { left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #D3C6B1, #BBAC93); box-shadow: 0 calc(-2*var(--p)) 0 rgba(255, 255, 255, .45); }

/* ---------- Friseur & Kosmetik: Bodoni, Name mittig, Seidenhaar, Leistungen mit Dauer ---------- */
.vs-b-salon { --sk: "Bodoni Moda", Didot, serif; --sr: 0px; --kr: calc(2*var(--p)); }
.vs-b-salon .s-logo { font-size: calc(32*var(--p)); font-weight: 500; letter-spacing: .005em; text-align: center; }
.vs-b-salon.vs--laptop .s-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.vs-b-salon.vs--laptop .s-rechts { justify-self: end; }
.vs-b-salon .s-h1 { font-size: calc(62*var(--p)); font-weight: 500; letter-spacing: -.012em; line-height: 1.03; }
.vs-b-salon .s-karte__titel { font-size: calc(21*var(--p)); font-weight: 500; }
.vs--handy.vs-b-salon .s-logo { font-size: calc(24*var(--p)); }
.vs--handy.vs-b-salon .s-h1 { font-size: calc(35*var(--p)); }
.vs--handy.vs-b-salon .s-karte--preise .s-zeile:nth-child(5) { display: none; }   /* im Handy drei Leistungen, damit die Karte ganz zu sehen ist */
.vs-seite .s-bild--haar {
  background:
    radial-gradient(70% 50% at 88% 10%, #F4E4D4, rgba(244, 228, 212, 0) 70%),
    linear-gradient(118deg, #4A2D1E 0%, #6E4630 38%, #9C6C4B 60%, #D9BBA0 82%, #EEDDCB 100%);
}
.s-bild--haar .s-straehnen { inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; filter: blur(calc(.9*var(--p))); }
.vs-seite .s-bild--haar::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: radial-gradient(50% 40% at 58% 40%, rgba(255, 244, 228, .9), rgba(255, 244, 228, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(50, 28, 16, .4));
}
.s-bild--haar .s-h1f { stroke: #3F2619; stroke-width: 5; opacity: .9; }
.s-bild--haar .s-h2f { stroke: #6E452D; stroke-width: 4; opacity: .9; }
.s-bild--haar .s-h3f { stroke: #A8774F; stroke-width: 2.6; opacity: .9; }
.s-bild--haar .s-h4f { stroke: #EBC99F; stroke-width: 1.4; opacity: .95; }

/* ---------- Fotografie & Film: Archivo breit und leicht, Abendlicht, kleine Galerie ---------- */
.vs-b-fotografie { --sk: "Archivo", "Atkinson Hyperlegible Next", sans-serif; --sr: 0px; --kr: calc(2*var(--p)); }
.vs-b-fotografie .s-logo { font-size: calc(19*var(--p)); font-weight: 500; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.vs-b-fotografie .s-h1 { font-size: calc(50*var(--p)); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.vs-b-fotografie .s-karte__titel { font-weight: 500; font-stretch: 110%; }
.vs--handy.vs-b-fotografie .s-logo { font-size: calc(16*var(--p)); letter-spacing: .1em; }
.vs--handy.vs-b-fotografie .s-h1 { font-size: calc(30*var(--p)); }
.vs-seite .s-bild--abend {
  background:
    radial-gradient(9% 16% at 60% 66%, rgba(255, 226, 170, .95), rgba(255, 226, 170, 0) 70%),
    radial-gradient(90% 46% at 14% 106%, #261F2B 0 55%, rgba(38, 31, 43, 0) 56%),
    radial-gradient(80% 42% at 92% 106%, #3A2B35 0 55%, rgba(58, 43, 53, 0) 56%),
    linear-gradient(180deg, #2A3452 0%, #6C5374 34%, #C9796A 58%, #F0B486 70%, #F6D2A2 77%);
}
/* zwei Menschen als Umriss im Gegenlicht */
.s-bild--abend .s-paar { left: 47%; bottom: 14%; width: 15%; height: 46%; filter: blur(calc(1.2*var(--p)));
  background:
    radial-gradient(18% 11% at 34% 12%, #1E1820 0 92%, rgba(30, 24, 32, 0) 100%),
    radial-gradient(17% 10% at 70% 17%, #1E1820 0 92%, rgba(30, 24, 32, 0) 100%),
    radial-gradient(30% 70% at 34% 70%, #1E1820 0 92%, rgba(30, 24, 32, 0) 100%),
    radial-gradient(28% 64% at 70% 74%, #1E1820 0 92%, rgba(30, 24, 32, 0) 100%);
}
.vs-seite .s-k2 {
  background:
    linear-gradient(180deg, rgba(226, 234, 226, .7), rgba(226, 234, 226, 0) 55%),
    repeating-linear-gradient(90deg, #1E2D24 0 4%, #2E4636 4% 9%, #17221B 9% 11%, #37533F 11% 17%, #22342A 17% 21%);
}
.vs-seite .s-k3 { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, #3A3A3C, #141415); }
.vs-seite .s-k3::before, .vs-seite .s-k3::after { content: ""; position: absolute; left: 0; right: 0; height: 12%; background: #050505; }
.vs-seite .s-k3::before { top: 0; } .vs-seite .s-k3::after { bottom: 0; }
.vs-seite .s-play { position: relative; z-index: 1; width: calc(30*var(--p)); height: calc(30*var(--p)); border-radius: 50%; background: rgba(255, 255, 255, .92); }
.vs-seite .s-play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: calc(6*var(--p)) 0 calc(6*var(--p)) calc(10*var(--p)); border-color: transparent transparent transparent #141415;
}
.vs-seite .s-k3 span { position: absolute; z-index: 1; left: calc(8*var(--p)); bottom: 15%; color: #fff; font-size: calc(11*var(--p)); font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-seite .s-k4 { background: linear-gradient(118deg, #EDEDEB 0 26%, #9C9C9A 34%, #474746 64%, #1E1E1E 100%); }
.vs-seite .s-k5 {
  background:
    radial-gradient(30% 14% at 62% 52%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #C4D6DE 0 50%, #6E92A3 50.5%, #3A5E72 76%, #2A4A5C 100%);
}
.vs-seite .s-k6 {
  background:
    radial-gradient(circle at 26% 34%, rgba(255, 246, 226, .95) 0 6%, rgba(255, 246, 226, 0) 12%),
    radial-gradient(circle at 70% 26%, rgba(255, 236, 206, .8) 0 9%, rgba(255, 236, 206, 0) 16%),
    radial-gradient(circle at 56% 70%, rgba(255, 240, 220, .7) 0 7%, rgba(255, 240, 220, 0) 13%),
    linear-gradient(160deg, #E9DED0, #C9B39C);
}
.vs-seite .s-k7 {
  background:
    radial-gradient(90% 46% at 22% 100%, #4E5B60 0 60%, rgba(78, 91, 96, 0) 61%),
    radial-gradient(100% 52% at 82% 100%, #75858A 0 60%, rgba(117, 133, 138, 0) 61%),
    radial-gradient(120% 60% at 40% 100%, #A3B0B3 0 60%, rgba(163, 176, 179, 0) 61%),
    linear-gradient(180deg, #E3E8E7, #C2CCCD);
}

/* ---------- Verein & Kultur: Archivo schmal und kräftig, Platz am Abend, nächste Termine ---------- */
.vs-b-verein { --sk: "Archivo", "Atkinson Hyperlegible Next", sans-serif; --sr: calc(8*var(--p)); --kr: calc(12*var(--p)); }
.vs-b-verein .s-logo { font-size: calc(28*var(--p)); font-weight: 800; font-stretch: 75%; letter-spacing: .01em; text-transform: uppercase; }
.vs-b-verein .s-h1 { font-size: calc(74*var(--p)); font-weight: 800; font-stretch: 75%; line-height: .95; letter-spacing: 0; text-transform: uppercase; }
.vs-b-verein .s-karte__titel { font-size: calc(21*var(--p)); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: .01em; }
.vs--handy.vs-b-verein .s-logo { font-size: calc(23*var(--p)); }
.vs--handy.vs-b-verein .s-h1 { font-size: calc(42*var(--p)); }
.vs-seite .s-bild--platz { background: #2C5236; }
.vs-seite .s-bild--platz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 12, 8, .38), rgba(6, 12, 8, 0) 46%); }
.s-bild--platz .s-himmel {
  inset: 0 0 50% 0;
  background:
    radial-gradient(circle at 14% 30%, rgba(255, 248, 225, .95) 0 1.2%, rgba(255, 248, 225, .35) 2.6%, rgba(255, 248, 225, 0) 9%),
    radial-gradient(circle at 86% 26%, rgba(255, 248, 225, .95) 0 1.2%, rgba(255, 248, 225, .35) 2.6%, rgba(255, 248, 225, 0) 9%),
    linear-gradient(180deg, #1B2638 0%, #3B4E6C 55%, #8E8C8A 100%);
}
.s-bild--platz .s-rasen, .s-bild--platz .s-linien { left: -40%; right: -40%; top: 50%; height: 120%; transform: perspective(calc(520*var(--p))) rotateX(62deg); transform-origin: 50% 0; }
.s-bild--platz .s-rasen { background: repeating-linear-gradient(90deg, #3E7A4A 0 5%, #4A8B55 5% 10%); }
.s-bild--platz .s-linien {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) calc(50% - .15%), rgba(255, 255, 255, .7) calc(50% - .15%) calc(50% + .15%), rgba(255, 255, 255, 0) 0),
    radial-gradient(9% 16% at 50% 26%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .7) 84%, rgba(255, 255, 255, 0) 88%);
  box-shadow: inset 0 calc(3*var(--p)) 0 rgba(255, 255, 255, .7);
}

/* ---------- Bewegung: nur die kurze Überblendung; bei reduzierter Bewegung alles sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  .vs__wahl-innen, .vs__icon, .vs__eingabe, .vs__farben, .vs__farbe, .vs__winkel, .vs-seite--neu { transition: none; }
  .vs__farben { transform: none; }
  .vs__farbe:hover { transform: none; }
}
@media (forced-colors: active) {
  .vs__wahl input:checked + .vs__wahl-innen { outline: 2px solid Highlight; }
  .vs__farbe { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* 37-idee-livegang.css */
/* ==========================================================================
   Von der Idee zum Livegang (Joah 22.10.2026; Mechanik nach talvesa.de, Gestaltung ganz unsere)
   Links vier Schritte (große Ziffer in der Tafel-Schrift, Titel, zwei Sätze, zwei Merkpunkte), rechts ein Browser-Fenster
   frei auf dem Weiß des Abschnitts (seit Joah 22.10. ohne Mint-Fläche, wie bei talvesa nur mit weichem neutralem Schatten),
   das beim Scrollen stehen bleibt und sich je Schritt verwandelt:
   1 Gesprächsnotiz (Zeilen haken sich ab) → 2 Drahtgitter (Kacheln bauen sich auf) → 3 halb Entwurf, halb fertig, mit einem
   Griff, den man wirklich ziehen kann (Regler darunter für Tastatur und Screenreader) → 4 fertig, mit Abzeichen.
   Die fertige Seite ist die Skizze der Live-Vorschau (36-vorschau.css), die 41-idee-livegang.js zur Laufzeit hineinzeichnet;
   das Drahtgitter ist dieselbe Skizze, deren Wörter dort zu leeren Balken werden (Abschnitt „Drahtgitter“ unten). Im HTML
   steht nur ein Platzhalter ohne Text (.il-platz). Der fertige Anteil von links steht in --il-teil (0 bis 100).
   Die Bühne gibt es nur ab 64em mit Bewegung und JavaScript (.il.ist-buehne, 41-idee-livegang.js). Sonst steht unter
   bzw. neben jedem Schritt ein eigenes kleines Fenster in seinem Endzustand.
   ========================================================================== */
.il { position: relative; background: var(--weiss); padding-block: var(--luft); }
.il__kopf { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.il__titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); letter-spacing: .12em; margin-right: -.12em; line-height: 1.1;
  color: var(--tinte); text-wrap: balance; overflow-wrap: break-word;
}
.il__lead { max-width: 34em; font-size: clamp(1.08rem, 1rem + .35vw, 1.32rem); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.il__mehr { margin-top: clamp(1.8rem, 4.5vw, 3rem); }

/* ---------- Schritte ---------- */
.il__schritte { display: grid; gap: clamp(2.8rem, 8vw, 4rem); }
.il__schritt { position: relative; display: grid; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
/* Fortschritt: auf der Trennlinie des aktiven Schritts läuft ein grüner Strich von links ein (nur auf der Bühne) */
.il__schritt::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--kobalt);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.il__inhalt { display: grid; justify-items: start; align-content: start; }
.il__nr { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.2rem); line-height: 1; letter-spacing: .08em; margin-right: -.08em; padding-top: 0; color: var(--kobalt); }
.il__name {   /* Tafel-Schrift wie alle Titel der Seite (.tafel-titel im HTML), etwas enger gesperrt wie .wb__name */
  margin-top: .85rem; margin-right: -.1em; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); letter-spacing: .1em; line-height: 1.2;
  color: var(--tinte); text-wrap: balance; overflow-wrap: break-word;
}
.il__text { margin-top: .55rem; max-width: 30em; font-size: clamp(1.04rem, 1rem + .25vw, 1.18rem); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.il__merk { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.il__merk li {
  display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .8rem; border-radius: var(--r-klein);
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-2); font-size: .93rem; font-weight: 600; line-height: 1.25; color: var(--tinte);
}
.il__klein { display: grid; gap: .5rem; min-width: 0; }
.il__buehne { display: none; }

/* Handy kompakt: Ziffer und Titel in einer Zeile, die Merkpunkte etwas kleiner, damit beide nebeneinander passen */
@media (max-width: 47.99em) {
  .il__inhalt { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: baseline; }
  .il__nr { font-size: 2.35rem; }
  .il__name { margin-top: 0; }
  .il__text, .il__merk { grid-column: 1 / -1; }
  .il__text { margin-top: .7rem; }
  .il__merk { margin-top: 1rem; gap: .4rem; }
  .il__merk li { min-height: 32px; padding: .25rem .65rem; font-size: .88rem; }
}
/* Tablet und reduzierte Bewegung am großen Bildschirm: Text links, das eigene Fenster rechts */
@media (min-width: 48em) {
  .il__schritt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; padding-top: 2rem; }
  .il__inhalt { grid-column: 1 / span 5; }
  .il__klein { grid-column: 6 / -1; }
}
@media (min-width: 64em) {
  .il__klein { grid-column: 7 / -1; }
  /* Bühne: links die Schritte (je gut ein halber Bildschirm hoch), rechts das große Fenster, das stehen bleibt */
  .il.ist-buehne .il__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .il.ist-buehne .il__schritte { grid-column: 1 / span 5; gap: 0; }
  .il.ist-buehne .il__schritt { display: block; min-height: max(30rem, 62vh); padding-top: 2.2rem; }
  .il.ist-buehne .il__schritt:last-child { min-height: max(26rem, 54vh); }
  .il.ist-buehne .il__klein { display: none; }
  .il.ist-buehne .il__buehne {
    --il-oben: calc(var(--kopf-h) + clamp(1rem, 4.5vh, 3rem));
    display: block; grid-column: 6 / -1; margin-left: clamp(0rem, 2.4vw, 2.5rem); position: sticky; top: var(--il-oben);
  }
  /* Fenster und Regler passen immer ganz in den Bildschirm (auch 1280×600, 1366×657): Das Fenster ist höchstens so
     breit, dass seine Höhe (Leiste bis 2,4rem plus Bild 706/1200 der Breite) in den Platz unter dem Kopf passt; abgezogen
     werden der Abstand oben, die Luft über und unter dem Fenster (--il-rand), die Zeile mit Strichen und Regler (4,5rem)
     und 1rem Luft unten. Ohne Fläche (Joah 22.10.) nutzt das Fenster die ganze Spaltenbreite, wie bei talvesa; wird es in
     niedrigen Fenstern schmaler, steht es links, bündig mit den Strichen und dem Regler darunter. */
  .il.ist-buehne .il__flaeche { --il-rand: clamp(.75rem, 2vh, 1.25rem); display: flex; justify-content: flex-start; padding: var(--il-rand) 0; }
  .il.ist-buehne .il-fenster--gross {
    max-width: max(20rem, calc((100vh - var(--il-oben) - 2 * var(--il-rand) - 2.4rem - 4.5rem - 1rem) * 1.7));
    max-width: max(20rem, calc((100svh - var(--il-oben) - 2 * var(--il-rand) - 2.4rem - 4.5rem - 1rem) * 1.7));
  }
  .il.ist-buehne .il__schritt.ist-aktiv::before { transform: none; }
  .il.ist-buehne .il__nr, .il.ist-buehne .il__name { transition: color .45s var(--ease-out); }
  .il.ist-buehne .il__schritt:not(.ist-aktiv) .il__nr { color: #BFC8C3; }
  .il.ist-buehne .il__schritt:not(.ist-aktiv) .il__name { color: var(--tinte-2); }
}

/* Bühne: keine eigene Fläche mehr (Joah 22.10.: kein Grün hinter Bildern). Das Fenster steht frei auf dem Weiß des
   Abschnitts, nur mit seinem Rand und einem weichen, neutralen Schatten (Vorbild talvesa). */
.il__flaeche { position: relative; }
.il__flaeche .il-fenster--gross {
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .1), 0 1px 2px rgba(15, 19, 18, .05),
    0 1.6rem 2.8rem -1.8rem rgba(15, 19, 18, .3), 0 3.4rem 6rem -2.8rem rgba(15, 19, 18, .16);
}
/* Striche und Regler stehen links beieinander; rechts unten bleibt Platz für den schwebenden WhatsApp-Knopf */
.il__unter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem clamp(1.5rem, 3vw, 2.5rem); min-height: 52px; margin-top: .75rem; }
.il__fortschritt { display: flex; gap: .45rem; }
.il__fortschritt li { width: 1.9rem; height: 3px; border-radius: 2px; background: var(--linie); transition: background-color .45s var(--ease-out); }
.il__fortschritt li.ist-erreicht { background: var(--kobalt); }
/* Der Regler der Bühne gehört zu Schritt 3; er bleibt aber per Tastatur erreichbar (Fokus zeigt ihn und das Fenster in Schritt 3) */
.il__buehne .il-regler { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); }
.il__buehne[data-il-zustand="3"] .il-regler, .il__buehne .il-regler:focus-within { opacity: 1; pointer-events: auto; }

/* ---------- Fenster ---------- */
.il-fenster {
  --il-teil: 55;
  position: relative; width: 100%; overflow: hidden; container-type: inline-size;
  border-radius: var(--r-gruppe); background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .1), 0 1px 2px rgba(15, 19, 18, .06), 0 2.2rem 3.4rem -2.4rem rgba(15, 19, 18, .4);
}
.il-fenster[data-il-zustand="1"], .il-fenster[data-il-zustand="2"] { --il-teil: 0; }
.il-fenster[data-il-zustand="4"] { --il-teil: 100; }
.il-fenster__leiste {
  position: relative; z-index: 6; display: flex; align-items: center; height: clamp(1.75rem, 6.2cqw, 2.4rem); padding-inline: clamp(.6rem, 2.6cqw, 1rem);
  background: #EDEEEB; box-shadow: inset 0 -1px 0 rgba(18, 22, 21, .08);
}
.il-fenster__punkte { display: flex; gap: clamp(4px, 1cqw, 6px); }
.il-fenster__punkte i { width: clamp(7px, 1.5cqw, 9px); aspect-ratio: 1; border-radius: 50%; background: #C8CCC8; }
.il-fenster__url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; max-width: 50%; height: 66%; padding-inline: 1em;
  border-radius: var(--r-klein); background: #fff; color: #3A403E; font: 500 clamp(.58rem, 1.9cqw, .8rem)/1 var(--f-text); white-space: nowrap;
}
.il-fenster__url .vs-schloss { width: .8em; height: .95em; }
.il-fenster__url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.il-fenster__online {
  display: inline-flex; align-items: center; gap: .45em; margin-left: auto;
  font: 650 clamp(.56rem, 1.8cqw, .78rem)/1 var(--f-text); color: var(--kobalt);
  opacity: 0; transform: translateY(3px); transition: opacity .35s var(--ease-out), transform .4s var(--ease-out);
}
.il-fenster__online i { width: .62em; aspect-ratio: 1; border-radius: 50%; background: #2E9C74; box-shadow: 0 0 0 .25em rgba(46, 156, 116, .2); }
.il-fenster[data-il-zustand="4"] .il-fenster__online { opacity: 1; transform: none; }

.il-fenster__schirm { position: relative; aspect-ratio: 1200 / 706; overflow: hidden; container-type: inline-size; background: #F6F7F5; }
/* nur dort, wo man ziehen kann, waagerechtes Wischen abfangen; senkrecht scrollen und mit zwei Fingern zoomen geht immer */
.il-fenster[data-il-zustand="3"] .il-fenster__schirm, .il-griff { touch-action: pan-y pinch-zoom; }
.il-ebene { position: absolute; inset: 0; isolation: isolate; }
.il-ebene .vs-schirm { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.il-ebene .vs-schirm--laptop > .vs-seite { top: 0; }
.il-ebene .vs-leiste { display: none; }   /* falls PB_VORSCHAU.zeichne einen eigenen Bildschirm mit Leiste anlegt */
/* der fertige Anteil liegt links, der Entwurf rechts davon */
.il-ebene--draht { z-index: 1; clip-path: inset(0 0 0 calc(var(--il-teil) * 1%)); }

/* Griff: feine grüne Linie mit runder Scheibe; die Trefferfläche ist 48 px breit */
.il-griff {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--il-teil) * 1%); width: 48px; margin-left: -24px;
  cursor: ew-resize; transition: opacity .35s var(--ease-out);
}
.il-griff::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--kobalt); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.il-griff__knopf {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(30px, 6.6cqw, 42px); aspect-ratio: 1;
  border-radius: 50%; background: var(--kobalt); color: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 8px 18px -8px rgba(15, 19, 18, .55);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.il-griff__knopf svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .il-griff:hover .il-griff__knopf { background: #28705D; } }
.il-fenster.ist-ziehen .il-griff__knopf { transform: translate(-50%, -50%) scale(1.08); }
.il-fenster.ist-ziehen, .il-fenster.ist-ziehen * { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.il__buehne:has(.il-regler__eingabe:focus-visible) .il-griff__knopf,
.il__klein:has(.il-regler__eingabe:focus-visible) .il-griff__knopf { box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 5px var(--kobalt); }
.il-fenster:not([data-il-zustand="3"]) .il-griff { opacity: 0; pointer-events: none; }
.js .il-fenster[data-il-zustand="3"] .il-fenster__schirm { cursor: ew-resize; }   /* mit der Maus springt der Griff an die geklickte Stelle */

/* ---------- 1 · Gesprächsnotiz ---------- */
.il-notiz {
  position: absolute; z-index: 5; inset: 0; display: grid; align-content: center; gap: 1.1em; padding: 5% 7%;
  background: var(--weiss); color: var(--tinte); font-size: clamp(.7rem, 2.3cqw, 1rem); line-height: 1.3;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}
.il-fenster:not([data-il-zustand="1"]) .il-notiz { opacity: 0; visibility: hidden; }
.il-fenster[data-il-zustand="1"] .il-notiz { transition-delay: 0s; }
.il-notiz__kopf { display: flex; align-items: center; gap: .7em; min-width: 0; font-size: 1.08em; font-weight: 650; }
.il-notiz__icon {
  flex: none; width: 2.1em; height: 2.1em; padding: .45em; border-radius: var(--r-klein); background: var(--kobalt);
  fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round;
}
.il-notiz__titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-notiz__trenner { color: var(--tinte-2); font-weight: 400; }
.il-notiz__liste { display: grid; gap: .6em; }
.il-notiz__zeile {
  display: grid; grid-template-columns: auto 5.2em minmax(0, 1fr); align-items: center; gap: .75em; min-height: 2.9em; padding: .55em 1em .55em .85em;
  border-radius: var(--r-klein); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-2);
}
.il-notiz__zeile b { font-weight: 700; }
.il-notiz__zeile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinte-2); }
.il-haken { width: 1.15em; height: 1.15em; overflow: visible; fill: none; stroke: var(--kobalt); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.il-haken path { stroke-dasharray: 1 2; stroke-dashoffset: var(--dash, 0); }

/* ---------- 4 · Abzeichen: eine eigene, matte Leiste unten im Fenster (wie eine Statuszeile). Sie deckt den unteren Rand
   der Skizze sauber ab, statt einzelne Zeilen halb zu verdecken. In schmalen Fenstern zwei Abzeichen, sonst drei. ---------- */
.il-abzeichen {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45em;
  padding: .7em 3.5%; font-size: clamp(.58rem, 1.8cqw, .8rem); pointer-events: none;
  background: rgba(246, 247, 244, .93); box-shadow: inset 0 1px 0 rgba(18, 22, 21, .1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.il-fenster[data-il-zustand="4"] .il-abzeichen { transform: none; }
.il-abzeichen li {
  display: inline-flex; align-items: center; gap: .5em; padding: .55em .9em .55em .72em; border-radius: var(--r-klein);
  background: var(--kobalt); color: #fff; font-weight: 650; line-height: 1.1; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 14px -8px rgba(15, 19, 18, .55);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out) .12s, transform .45s var(--ease-out) .12s;
}
.il-abzeichen li:nth-child(2) { transition-delay: .2s; }
.il-abzeichen li:nth-child(3) { transition-delay: .28s; }
.il-fenster[data-il-zustand="4"] .il-abzeichen li { opacity: 1; transform: none; }
.il-abzeichen__icon { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: var(--mint-hell); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 32rem) {
  .il-abzeichen li:first-child { display: none; }
}

/* ---------- Regler „Entwurf … Fertig“ ---------- */
.il-regler { display: flex; align-items: center; gap: .8rem; font-size: .92rem; font-weight: 650; color: var(--tinte-2); }
.il-regler__eingabe {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: clamp(8rem, 15vw, 13rem); min-width: 0; height: 44px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom;
}
.il-regler__eingabe::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--linie); }
.il-regler__eingabe::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border: 0; border-radius: 50%; background: var(--kobalt);
  box-shadow: 0 0 0 3px var(--weiss), 0 2px 7px rgba(15, 19, 18, .32);
}
.il-regler__eingabe::-moz-range-track { height: 2px; border-radius: 2px; background: var(--linie); }
.il-regler__eingabe::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--kobalt); box-shadow: 0 0 0 3px var(--weiss), 0 2px 7px rgba(15, 19, 18, .32); }
.il-regler__eingabe:focus-visible { outline: none; }
.il-regler__eingabe:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt); }
.il-regler__eingabe:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt); }
.il__klein .il-regler { justify-content: center; }
.il__klein .il-regler__eingabe { max-width: 16rem; }
.no-js .il-regler { display: none; }
.no-js .il-griff { cursor: auto; }

/* ---------- Kleine Fenster (Handy, Tablet, reduzierte Bewegung, ohne JavaScript): jedes zeigt seinen Endzustand ---------- */
.il-fenster--klein { max-width: 44rem; }
.il-fenster--klein[data-il-zustand="1"] .il-fenster__schirm { aspect-ratio: auto; }
.il-fenster--klein .il-notiz { position: relative; inset: auto; padding: 1.3em 1.2em 1.4em; font-size: clamp(.8rem, 2.6cqw, 1rem); }
.il-fenster--klein .il-notiz__zeile { grid-template-columns: auto 4.6em minmax(0, 1fr); }
.il-fenster--klein .il-notiz__zeile span, .il-fenster--klein .il-notiz__titel { white-space: normal; }
.il-fenster--klein .il-abzeichen, .il-fenster--klein .il-abzeichen li { transition: none; }

/* ---------- Platzhalter ohne Text (im HTML, bis die Skizze der Live-Vorschau gezeichnet ist; ohne JavaScript bleibt er):
   Menüleiste, Überschrift, Absatz, Knopf, Bildfeld und drei Karten als ruhige Flächen. Maße in cqw des Bildschirms. ---------- */
.il-platz {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3.4cqw; padding: 0 5cqw 4.2cqw;
  background: #FBFAF7;
}
.il-platz i { display: block; }
.il-platz__nav { display: flex; align-items: center; gap: 3cqw; height: 7.4cqw; margin-inline: -5cqw; padding-inline: 5cqw; box-shadow: inset 0 -1px 0 rgba(18, 22, 21, .08); }
.il-platz__logo { width: 13cqw; height: 1.8cqw; border-radius: .4cqw; background: var(--tinte); }
.il-platz__links { display: flex; gap: 2.2cqw; margin-left: auto; }
.il-platz__links i { width: 6cqw; height: 1cqw; border-radius: .3cqw; background: #C5CBC7; }
.il-platz__knopf { width: 13cqw; height: 3.6cqw; border-radius: .7cqw; background: var(--kobalt); }
.il-platz__held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5cqw; align-items: center; }
.il-platz__text { display: grid; gap: 1.5cqw; justify-items: start; }
.il-platz__h { width: 100%; height: 2.8cqw; border-radius: .5cqw; background: var(--tinte); }
.il-platz__h--kurz { width: 68%; }
.il-platz__p { width: 92%; height: 1.1cqw; margin-top: .5cqw; border-radius: .3cqw; background: #C5CBC7; }
.il-platz__p--kurz { width: 62%; margin-top: 0; }
.il-platz__text .il-platz__knopf { margin-top: 2cqw; }
.il-platz__bild {
  align-self: stretch; border-radius: 1.2cqw;
  background: radial-gradient(60% 55% at 70% 30%, rgba(253, 253, 251, .65), rgba(253, 253, 251, 0) 70%), linear-gradient(150deg, #E4E3DF, #CFCDC8 55%, #B9B7B1);
}
.il-platz__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.il-platz__karten i { height: 9cqw; border-radius: 1cqw; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 22, 21, .08); }

/* ---------- Drahtgitter: dieselbe Skizze als Entwurf. Die Skizze setzt viele eigene Farben und Flächen (36-vorschau.css);
   hier gilt nur das Gitter, deshalb die Vorrang-Markierungen, streng auf .il-draht begrenzt. Die Wörter sind schon leere
   Balken (il-wort, 41-idee-livegang.js), Bilder werden Felder mit Kreuz, Knöpfe gestrichelte Rahmen. Darüber ein feines
   Spaltenraster in unserem Grün (Akzent im Bildschirm, keine Fläche hinter dem Bild). ---------- */
.il-draht { --dg-grund: #F6F7F5; --dg-linie: #D3D8D4; --dg-balken: #DADFDB; --dg-bild: #ECEFEC; --dg-kreuz: #C7CEC9; }
.il-draht::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(18, 22, 21, .07) 0 1px, rgba(18, 22, 21, 0) 1px calc(100% / 12));
}
.il-draht .vs-seite { background: var(--dg-grund) !important; }
.il-draht .vs-seite *, .il-draht .vs-seite *::before, .il-draht .vs-seite *::after {
  color: transparent !important; background: none !important; box-shadow: none !important; border-color: transparent !important;
  text-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; text-decoration: none !important;
}
.il-draht .vs-seite il-wort {
  display: inline-block; width: calc(var(--w, 4) * .5em); max-width: 100%; height: .56em; vertical-align: .06em;
  border-radius: .12em; background: var(--dg-balken) !important;
}
.il-draht .vs-seite .s-btn { outline: calc(1.5 * var(--p)) dashed #B4BBB6; outline-offset: calc(-1.5 * var(--p)); }
.il-draht .vs-seite .s-btn il-wort { opacity: .7; }
.il-draht .vs-seite :is(.s-bild, .s-k), .il-draht .il-platz :is(.il-platz__bild, .il-platz__karten i) {
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0) calc(50% - .6px), var(--dg-kreuz) calc(50% - .6px) calc(50% + .6px), rgba(0, 0, 0, 0) calc(50% + .6px)),
    linear-gradient(to bottom right, rgba(0, 0, 0, 0) calc(50% - .6px), var(--dg-kreuz) calc(50% - .6px) calc(50% + .6px), rgba(0, 0, 0, 0) calc(50% + .6px)),
    var(--dg-bild) !important;
  box-shadow: inset 0 0 0 1px var(--dg-linie) !important;
}
.il-draht .vs-seite :is(.s-bild, .s-k) > * { visibility: hidden !important; }
.il-draht .vs-seite .s-nav { box-shadow: inset 0 -1px 0 var(--dg-linie) !important; }
.il-draht .vs-seite :is(.s-karte, .s-termin, .s-naechster, .s-projekt) { box-shadow: inset 0 0 0 1px var(--dg-linie) !important; }
.il-draht .vs-seite :is(.s-punkt, .s-meldung, .s-preise) { box-shadow: inset 0 1px 0 var(--dg-linie) !important; }
.il-draht .vs-seite :is(.s-tage span, .s-zeiten span, .s-filter .ist) { box-shadow: inset 0 0 0 1px var(--dg-linie) !important; }
.il-draht .vs-seite .s-zeile > i { border-bottom-color: var(--dg-kreuz) !important; opacity: 1; }
/* der Platzhalter als Entwurf */
.il-draht .il-platz { background: var(--dg-grund); }
.il-draht .il-platz__nav { box-shadow: inset 0 -1px 0 var(--dg-linie); }
.il-draht .il-platz :is(.il-platz__logo, .il-platz__links i, .il-platz__h, .il-platz__p) { background: var(--dg-balken); }
.il-draht .il-platz .il-platz__knopf { background: none; outline: 1.5px dashed #B4BBB6; outline-offset: -1.5px; }

/* ---------- Ohne Bewegung: nichts gleitet, alles steht in seinem Endzustand da ---------- */
@media (prefers-reduced-motion: reduce) {
  .il__schritt::before, .il__fortschritt li, .il-fenster__online, .il-griff, .il-griff__knopf, .il-notiz, .il-abzeichen, .il-abzeichen li, .il__buehne .il-regler { transition: none; }
}
@media (forced-colors: active) {
  .il-griff::before, .il-griff__knopf { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}

/* Fenster mit der neuen Vorschau (Browser-Rahmen, 22.10.): im Livegang weichen Infozeile und Karte den Abzeichen; im Entwurf deckt die Karte */
.il-fenster .il-ebene .vs-seite :is(.s-infos, .s-karte) { transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.il-fenster[data-il-zustand="4"] .il-ebene .vs-seite .s-infos { opacity: 0; }
.il-fenster[data-il-zustand="4"] .il-ebene .vs-seite .s-karte { transform: translateY(calc(-1 * max(64 * var(--p), 2.6rem))); }
@media (prefers-reduced-motion: reduce) { .il-fenster .il-ebene .vs-seite :is(.s-infos, .s-karte) { transition: none; } }
.il-draht .vs-seite .s-karte { background: var(--dg-grund) !important; }
.il-draht .vs-seite :is(.s-wahl, .s-chips > span, .s-feld, .s-datum, .s-karte--preise .s-zeile) { box-shadow: inset 0 0 0 1px var(--dg-linie) !important; }

/* 40-start.css */
/* ==========================================================================
   Startseite
   ========================================================================== */

/* ---------- 1 · Bühne: die Sehtafel mit dem Slogan der Altseite ---------- */
.buehne {
  position: relative; height: 100svh; min-height: 36rem;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: radial-gradient(130% 85% at 50% 38%, #FBFAF7 0, var(--papier) 55%, #E9E7E0 100%);
  overflow: clip;
}
.buehne__film { position: absolute; inset: 0; z-index: 0; }
.buehne__film .film { position: absolute; inset: 0; background: #EEECE6; }
/* Weißer Schleier: die Tafel bleibt ganz vorn, unten wird es heller für Überschrift und Text */
.buehne__film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(243, 242, 238, .3) 0%, rgba(243, 242, 238, .22) 35%, rgba(243, 242, 238, .6) 72%, rgba(243, 242, 238, .9) 100%);
}
/* Pause nur für Tastatur sichtbar (WCAG 2.2.2), sonst ruhiges Bild ohne Knopf */
.buehne__film .film__pause { top: calc(var(--kopf-h) + .6rem); right: var(--rand); bottom: auto; z-index: 3; opacity: 0; pointer-events: none; }
.buehne__film .film__pause:focus-visible { opacity: 1; pointer-events: auto; }
.buehne__feld {
  position: relative; z-index: 1; container-type: size;
  margin-top: var(--kopf-h);
}
.buehne__tafel {
  --t: min(1.18cqw, 1.8cqh);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--t) * 2.3);
  font-family: var(--f-tafel); text-transform: uppercase; line-height: 1; color: var(--tinte);
  user-select: none;
}
.buehne__tafel span { display: block; white-space: nowrap; letter-spacing: .3em; margin-right: -.3em; }
.buehne__tafel .z1 { font-size: calc(var(--t) * 21); }
.buehne__tafel .z2 { font-size: calc(var(--t) * 11.4); }
.buehne__tafel .z3 { font-size: calc(var(--t) * 6.5); }
.buehne__tafel .z4 { font-size: calc(var(--t) * 3.2); letter-spacing: .26em; margin-right: -.26em; }
.buehne__tafel .z5 { font-size: calc(var(--t) * 2.15); letter-spacing: .26em; margin-right: -.26em; }
.buehne__text {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 3rem; align-items: end;
  padding-block: clamp(1.2rem, 3vh, 2.4rem) clamp(1.6rem, 4.5vh, 3.2rem);
}
.buehne__h1 { font-size: clamp(1.75rem, 1rem + 2.5vw, 3.35rem); max-width: 17ch; }
.buehne__lead { margin-top: .9rem; max-width: 34em; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.5; color: var(--tinte-2); }
.buehne__rechts { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) {
  .buehne__text { grid-template-columns: minmax(0, 1.3fr) auto; }
  .buehne__rechts { justify-items: end; }
}
@media (max-width: 47.99em) {
  .buehne { min-height: 32rem; }
  .buehne__tafel { --t: min(1.32cqw, 2cqh); }
  .buehne__text { gap: 1rem; }
}

/* ---------- 2 · Szene: was wir tun (Film rechts, Schritte links; Handy: gestapelt) ---------- */
.szene { position: relative; background: var(--nacht); color: var(--auf-nacht); }
.szene__filme { display: none; }
.szene__kopf { padding-top: var(--luft); margin-bottom: clamp(2rem, 5vw, 3.5rem); color: var(--auf-nacht); }
.szene__schritte { display: grid; gap: clamp(3.5rem, 9vw, 6rem); padding-bottom: var(--luft); }
.szene__handyfilm { aspect-ratio: 4 / 3; margin-bottom: 1.6rem; margin-inline: calc(var(--rand) * -1); }
.szene__handyfilm .film { width: 100%; height: 100%; }
.szene__titel { font-size: min(4.6rem, calc((100vw - 2 * var(--rand)) / 10.2)); letter-spacing: .12em; margin-right: -.12em; color: var(--auf-nacht); }
.szene__text { margin-top: 1rem; max-width: 32em; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--auf-nacht-2); }
.szene .textlink { margin-top: .6rem; color: var(--mint-hell); }

@media (min-width: 64em) {
  .szene__innen { position: relative; height: 100svh; overflow: hidden; }
  .szene__filme { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 54%; }
  .szene__film { position: absolute; inset: 0; opacity: 0; }
  .szene__film:first-child { opacity: 1; }
  .szene__film .film { position: absolute; inset: 0; }
  .szene__filme::after {   /* weicher Übergang vom Film in die Nacht, keine Kante */
    content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 30%;
    background: linear-gradient(90deg, var(--nacht) 0, var(--nacht) 6%, rgba(15, 19, 18, .6) 45%, rgba(15, 19, 18, 0));
    pointer-events: none;
  }
  .szene__pause { right: 1.4rem; bottom: 1.4rem; }
  .szene__spalte { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--kopf-h) + 2rem); }
  .szene__kopf { padding-top: 0; margin-bottom: 0; max-width: 40%; }
  .szene__schritte { position: relative; padding-bottom: 0; gap: 0; max-width: 40%; }
  .szene__schritt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .szene__handyfilm { display: none; }
  .szene__titel { font-size: min(3.8rem, 3.3vw); }
  .szene.ist-gepinnt .szene__schritt { pointer-events: none; }
  .szene.ist-gepinnt .szene__schritt.ist-aktiv { pointer-events: auto; }
  .no-js .szene__innen { height: auto; }
  .no-js .szene__schritt { position: static; transform: none; margin-bottom: 4rem; }
}
@media (min-width: 64em) and (prefers-reduced-motion: reduce) {
  .szene__innen { height: auto; overflow: visible; }
  .szene__filme { display: none; }
  .szene__spalte { height: auto; padding-block: var(--luft); }
  .szene__kopf, .szene__schritte { max-width: none; }
  .szene__schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem var(--spalt); }
  .szene__schritt { position: static; transform: none; }
  .szene__handyfilm { display: block; margin-inline: 0; }
}

/* ---------- 3 · Stimme des Inhabers ---------- */
.stimme__raster { row-gap: 2.5rem; align-items: center; }
.stimme__bild { grid-column: 1 / -1; aspect-ratio: 4 / 5; max-height: 80vh; }
.stimme__text { grid-column: 1 / -1; }
.stimme__zitat p {
  font-size: clamp(1.7rem, 1.05rem + 2.3vw, 3.05rem); font-weight: 540; line-height: 1.16; letter-spacing: -.018em;
  text-wrap: balance; max-width: 22ch;
}
.stimme__prosa { margin-top: 1.8rem; color: var(--tinte-2); }
.stimme__name { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1rem; }
.stimme__portraet { width: 72px; height: 72px; flex: none; overflow: hidden; background: var(--papier-2); }
.stimme__portraet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 64em) {
  .stimme__bild { grid-column: 1 / span 5; }
  .stimme__text { grid-column: 7 / span 6; }
}

/* ---------- 4 · Fokus-Liste: die Zeile im Fokus ist scharf ---------- */
.fokus__kopf { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 64em) { .fokus__kopf { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--spalt); } }
.fokus__liste { border-top: 1px solid var(--linie); }
.fokus__liste li { border-bottom: 1px solid var(--linie); }
.fokus__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding-block: clamp(1rem, 2.4vw, 1.9rem);
  font-size: clamp(1.35rem, .6rem + 3.6vw, 4.2rem); letter-spacing: .1em;
  text-decoration: none; color: var(--tinte);
  transition: filter .5s var(--ease-out), opacity .5s var(--ease-out), color .3s var(--ease-out);
  overflow-wrap: anywhere;
}
.fokus__zeile::after {
  content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--mint) 50%);
  transform: scale(.3); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.fokus.ist-aktiv .fokus__zeile { filter: blur(1px); opacity: .62; }
.fokus.ist-aktiv .fokus__zeile.ist-scharf { filter: none; opacity: 1; color: var(--kobalt); }
.fokus.ist-aktiv .fokus__zeile.ist-scharf::after { transform: none; opacity: 1; }
.fokus__zeile:focus-visible { filter: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .fokus.ist-aktiv .fokus__zeile { filter: none; opacity: 1; }
}

/* ---------- 5 · Marken ---------- */
.marken__kopf { grid-column: 1 / -1; display: grid; gap: 1.2rem; align-content: start; margin-bottom: 2.5rem; }
.marken__liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.marken__liste li {
  padding: 1.05rem 0; border-bottom: 1px solid var(--linie);
  font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem); font-weight: 560; letter-spacing: -.01em;
}
.marken__liste li:nth-child(odd) { padding-right: 1rem; }
@media (min-width: 64em) {
  .marken__kopf { grid-column: 1 / span 4; margin-bottom: 0; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .marken__liste { grid-column: 6 / span 7; }
}

/* ---------- 6 · Besuch ---------- */
.besuch__raster { row-gap: 3rem; align-items: center; }
.besuch__text { grid-column: 1 / -1; display: grid; gap: 1.2rem; justify-items: start; }
.besuch__tafel { font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); color: var(--mint-hell); letter-spacing: .2em; }
.besuch__adresse { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; }
.besuch .zeiten { width: 100%; }
.besuch__hinweis { max-width: 32em; }
.besuch__bild { grid-column: 1 / -1; aspect-ratio: 1080 / 566; }
.besuch__unterschrift { position: absolute; left: 0; bottom: 0; padding: .7rem 1rem; background: rgba(15, 19, 18, .72); color: var(--auf-nacht); font-size: .9rem; }
@media (min-width: 64em) {
  .besuch__text { grid-column: 1 / span 5; }
  .besuch__bild { grid-column: 7 / span 6; margin-right: calc((100vw - min(100vw - 2 * var(--rand), var(--max))) / -2); aspect-ratio: auto; height: min(78vh, 44rem); }
}

/* Marken-Logos: einheitlich Graphit, gleich schwer, ruhiges Raster */
.logo-marke, .br-logo { display: block; max-width: 100%; height: auto; filter: brightness(0); opacity: .82; }
.logo-marke--text, .br-logo--text { filter: none; opacity: 1; font-size: 1.1rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); }
.marken__liste li { display: flex; align-items: center; min-height: 92px; padding-block: 1.2rem; }
@media (min-width: 64em) { .marken__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marken__liste li:nth-child(odd) { padding-right: 0; } .marken__liste li { padding-right: 1.5rem; } }
.marken__liste li > * { min-width: 0; flex: 0 1 auto; }

/* ---------- Google-Bewertung: wie man sie von Google kennt (gelbe Sterne, buntes G), echte Zahl mit Quelle.
   Form (Joah 22.10.): leicht eckig wie Knöpfe und Abzeichen der Seite (--r-gruppe) statt Pille ---------- */
.google-g { width: 20px; height: 20px; flex: none; }
.bewertung {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; min-height: 46px; padding: .45rem 1rem .45rem .7rem;
  border-radius: var(--r-gruppe); background: var(--weiss); text-decoration: none; color: var(--tinte);
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .07), 0 10px 26px -16px rgba(15, 19, 18, .45);
}
.bewertung__zahl { font-weight: 700; font-size: 1.05rem; }
.bewertung__sterne { display: inline-flex; gap: 1px; color: #FBBC05; }
.bewertung__sterne svg { width: 17px; height: 17px; }
.bewertung__text { font-weight: 600; color: var(--tinte-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--linie); }
@media (hover: hover) and (pointer: fine) { .bewertung:hover .bewertung__text { color: #1A73E8; text-decoration-color: currentColor; } }
.stimmen__raster { row-gap: 2rem; align-items: start; }
.stimmen__kopf { grid-column: 1 / -1; display: grid; gap: .5rem; align-content: start; }
.stimmen__marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; color: var(--tinte-2); }
.stimmen__marke .google-g { width: 24px; height: 24px; }
.stimmen__zahl { display: flex; align-items: center; gap: .9rem; font-family: var(--f-tafel); font-size: clamp(3.4rem, 2rem + 4vw, 5.6rem); line-height: 1; letter-spacing: .06em; }
.stimmen__gross-sterne { display: inline-flex; gap: 2px; color: #FBBC05; }
.stimmen__gross-sterne svg { width: clamp(20px, 1.2rem + .6vw, 28px); height: clamp(20px, 1.2rem + .6vw, 28px); }
.stimmen__liste { grid-column: 1 / -1; display: grid; gap: 1.6rem; }
.stimmen__zitat { display: grid; gap: .7rem; align-content: start; padding: 1.3rem 1.3rem 1.2rem; border-radius: 18px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(18, 22, 21, .06), 0 14px 30px -22px rgba(15, 19, 18, .4); }
.stimmen__sterne { display: inline-flex; gap: 2px; color: #FBBC05; }
.stimmen__sterne svg { width: 17px; height: 17px; }
.stimmen__zitat blockquote p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 560; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.stimmen__zitat figcaption { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--tinte-2); }
.stimmen__zitat figcaption .google-g { width: 16px; height: 16px; }
.stimmen.abschnitt--weiss { background: var(--papier); }
@media (min-width: 64em) {
  .stimmen__kopf { grid-column: 1 / span 4; }
  .stimmen__liste { grid-column: 5 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); }
}

/* 45-pb.css */
/* ==========================================================================
   Philippi & Bühler im Stil des Brillen-Ateliers: Wortmarke (Archivo), Preis-Chip in der Bühne,
   unser Startfilm als Szene „Was wir für Sie tun“, Probeseiten, Preise, Ablauf, Fragen
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
/* Tafel im Start (Joah 16.10.): kein Sehtest-Verlauf mehr. Der Satz „Webdesign, das Kunden bringt“ in zwei gleich
   großen Zeilen, darunter kleiner „Philippi & Bühler Digital aus Kirchzarten“. Breite über cqw begrenzt, passt überall. */
.buehne__tafel { gap: 0; }
.buehne__tafel .zk { font-size: min(calc(var(--t) * 9.4), 8cqw); letter-spacing: .16em; margin-right: -.16em; line-height: 1.08; }
.buehne__tafel .zs {
  margin-top: calc(var(--t) * 3.4); max-width: 92cqw; white-space: normal; text-align: center; line-height: 1.5;
  font-size: min(calc(var(--t) * 2.7), 2.4cqw); letter-spacing: .26em; margin-right: -.26em;
}
@media (max-width: 47.99em) {
  .buehne__tafel .zk { font-size: 9.2cqw; letter-spacing: .1em; margin-right: -.1em; }
  .buehne__tafel .zs { font-size: 3.5cqw; letter-spacing: .22em; }
}

/* Links unten: Überschrift kleiner, in derselben Tafel-Schrift; der Preis steht jetzt im Satz darunter */
.buehne__h1 { font-family: var(--f-tafel); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; line-height: 1.22;
  font-size: clamp(1.05rem, .85rem + .85vw, 1.6rem); max-width: 40ch; }
.buehne__lead { margin-top: .75rem; max-width: 40em; }
@media (max-width: 47.99em) { .buehne__lead { display: block; font-size: 1rem; } }

/* „Antwort innerhalb von 24 Stunden“ klein und ruhig unter dem Knopf, ohne Blase */
.buehne__hinweis { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--tinte-2); }
.buehne__punkt { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(124, 203, 174, .22); }
.buehne__rechts { gap: .75rem; }

/* ---------- Fragen: aufklappbar, ein Zeichen statt Pfeil ---------- */
.pb-fragen__raster { row-gap: 2.5rem; align-items: start; }
.pb-fragen__kopf { grid-column: 1 / -1; display: grid; gap: 1rem; }
.pb-fragen__kopf a { color: var(--kobalt); font-weight: 650; }
.pb-fragen__liste { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.pb-frage { border-bottom: 1px solid var(--linie); }
.pb-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; padding-block: 1.1rem;
  cursor: pointer; list-style: none; font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); font-weight: 600; letter-spacing: -.01em;
}
.pb-frage summary::-webkit-details-marker { display: none; }
.pb-frage__zeichen { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--glas); transition: background-color .3s var(--ease-out); }
.pb-frage__zeichen::before, .pb-frage__zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--kobalt); transition: transform .35s var(--ease-out); }
.pb-frage__zeichen::after { transform: rotate(90deg); }
.pb-frage[open] .pb-frage__zeichen { background: var(--mint-hell); }
.pb-frage[open] .pb-frage__zeichen::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .pb-frage summary:hover { color: var(--kobalt); } }
.pb-frage__antwort { padding-bottom: 1.4rem; max-width: 42em; color: var(--tinte-2); font-size: 1.08rem; }
.pb-frage__antwort a { color: var(--kobalt); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .pb-frage__antwort a:hover { color: var(--kobalt-tief); text-decoration-thickness: 2px; } }
/* Links in den Antworten (WhatsApp, anrufen, Kontaktformular, Über uns) als Tippfläche von mindestens 44 px Höhe auf dem Handy:
   ein unsichtbares Feld um den Link (liegt über dem Text der Nachbarzeilen, Zeilenabstand und Aussehen bleiben gleich).
   Die Links brechen nicht um, sonst fällt das Feld bei einem Link über zwei Zeilen in sich zusammen. */
.pb-frage__antwort a { position: relative; white-space: nowrap; }
.pb-frage__antwort a::after { content: ""; position: absolute; inset: -12px -4px; }
@media (min-width: 64em) {
  .pb-fragen__kopf { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .pb-fragen__liste { grid-column: 6 / span 7; }
}
@media (prefers-reduced-motion: reduce) { .pb-frage__zeichen, .pb-frage__zeichen::before, .pb-frage__zeichen::after { transition: none; } }

/* ---------- Kontakt-Abschnitt: Film statt Foto ---------- */
.besuch__bild .film { position: absolute; inset: 0; }
.ab-kopf { padding-bottom: clamp(3rem, 7vw, 6rem); }

/* Über uns: wir zwei, ohne erfundene Porträts: der Name groß in der Tafel-Schrift */
.ue-wir__liste { display: grid; gap: clamp(3rem, 7vw, 5rem) var(--spalt); }
.ue-person { display: grid; gap: .9rem; align-content: start; padding-top: 1.6rem; border-top: 1px solid var(--tinte); }
.ue-person__rolle { font-weight: 650; color: var(--kobalt); }
.ue-person__name { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.6rem); letter-spacing: .1em; line-height: 1; overflow-wrap: anywhere; }
.ue-person__text { max-width: 34em; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 56em) { .ue-wir__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ue-warum__zeichen { grid-column: 1 / span 5; color: var(--auf-nacht); --logo-b: var(--mint); }
.ue-warum__logo { width: clamp(7rem, 22vw, 15rem); height: auto; }
.ue-warum__name { align-items: center; }
@media (min-width: 64em) { .ue-warum__zeichen { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 2rem); } }
.ue-messen__lead { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Kontakt: Formular gleich oben neben der Einleitung */
.eg-kopf { padding-bottom: clamp(2rem, 5vw, 4rem); }
.eg-kopf__raster { row-gap: 2.5rem; align-items: start; }
.eg-kopf__text { grid-column: 1 / -1; }
.eg-kopf__notiz { margin-top: 1.4rem; max-width: 34em; font-size: .98rem; }
.eg-form .knopf { justify-self: start; }
.eg-form .knopf[disabled] { opacity: .6; cursor: progress; }
.eg-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eg-ziel { display: none; }
.eg-ziel:target { display: block; }
.feld input::placeholder, .feld textarea::placeholder { color: #7A817E; }
@media (min-width: 64em) {
  .eg-kopf__text { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .eg-kopf .skopf__tafel { font-size: clamp(3rem, 1rem + 6vw, 8rem); }
}
.eg-danach__tafel { font-size: clamp(1rem, .9rem + .6vw, 1.35rem); letter-spacing: .2em; color: var(--kobalt); margin-bottom: 1rem; }
.at-zeit__jahr { color: var(--kobalt); }

/* Rechtstexte von der Live-Seite: Listen und Zwischentitel */
.re-teil ul, .re-teil ol { display: grid; gap: .35rem; max-width: 42em; padding-left: 1.2em; list-style: disc; }
.re-teil ol { list-style: decimal; }
.re-teil * + ul, .re-teil * + ol, .re-teil ul + p, .re-teil ol + p { margin-top: .9em; }
.re-teil h3 { font-size: 1.1rem; font-weight: 650; margin: 1.6rem 0 .6rem; }
/* Ablauf-Kopf: die fünf Schritte als Sehtafel, jede Zeile kleiner */
.ab-kopf__raster { row-gap: 3rem; align-items: center; }
.ab-kopf__text { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .ab-kopf__text { grid-column: 1 / span 6; }
}
.ko-wege .ko-weg--gross .ko-weg__wert { white-space: nowrap; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem); overflow-wrap: normal; }

/* Google-Feld ohne Bewertungen: gleiche Bauweise wie die echte Bewertung, Sterne grau
   (Klassen entstehen in kern.google_platzhalter_html als f'{klasse}--leer') */
.bewertung--leer .bewertung__sterne { color: #CDD2CF; }
.bewertung--leer .bewertung__text { color: var(--tinte); white-space: nowrap; }
@media (max-width: 26em) { .bewertung--leer .bewertung__sterne svg { width: 14px; height: 14px; } }
@media (max-width: 22em) { .bewertung--leer .bewertung__text { white-space: normal; } .bewertung { max-width: 100%; } }

/* 46-start.css */
/* ==========================================================================
   Startseite, kurz und hell (Joah 16.10.): drei ruhige Schritte mit je einem eigenen Bild, „Alles aus einer Hand“,
   Stimme ohne Bild, „Für jede Größe“ mit Laptop, Tablet und Handy (echte Bildschirmfotos unserer Seite).
   Joah 22.10.: „Was wir für Sie bauen“ (ganz unten); Karten, Knopf-Fläche und Fenster mit den leicht eckigen Ecken der
   Seite (--r-gruppe), Knöpfe selbst kommen mit --r-knopf aus 30-bausteine.css.
   ========================================================================== */

/* ---------- Geräte-Fläche (Joah 22.10.: „dieser grüne Rand, dieser grüne Hintergrund … auf der ganzen Seite gefällt mir das
   schon nicht“, Vorbild talvesa.de): hinter Geräten und Bildern kein Mint mehr. Geräte, die ganz zu sehen sind, stehen direkt
   auf dem Grund ihres Abschnitts (nur ihr eigener weicher, neutraler Schatten). Wo ein Gerät angeschnitten ist und eine Kante
   braucht (Handy steigt von unten herein), steht es auf einem sehr hellen, neutralen Grau im Farbton des Papiers, oben rechts
   etwas heller: keine Farbe, nur Licht. Gilt für Start, Leistungen und Ablauf (eine Stelle zum Nachstellen). ---------- */
:root {
  --geraet-flaeche:
    radial-gradient(64% 58% at 78% 12%, rgba(253, 253, 251, .62), rgba(253, 253, 251, 0) 72%),
    linear-gradient(165deg, #ECEBE8 0%, #E6E5E1 62%, #E9E8E4 100%);
}

/* ---------- Geräte: schlichte dunkle Rahmen, runde Ecken, weicher Schatten auf Hell. Alle Maße in cqw,
   damit jedes Gerät in jeder Größe gleich aussieht. ---------- */
.gr-handy, .gr-tablet, .gr-laptop { position: relative; container-type: inline-size; }
.gr-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.gr-handy__rahmen {
  position: relative; padding: 3.1cqw; border-radius: 15cqw; background: #151a19;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(15, 19, 18, .12),
    0 2.4rem 3.6rem -2.2rem rgba(15, 19, 18, .42), 0 4.5rem 6rem -4rem rgba(15, 19, 18, .28);
}
/* Seitentasten, ganz flach */
.gr-handy__rahmen::before, .gr-handy__rahmen::after {
  content: ""; position: absolute; width: 1cqw; border-radius: .6cqw; background: #262c2b;
}
.gr-handy__rahmen::before { right: -.75cqw; top: 25%; height: 12%; }
.gr-handy__rahmen::after { left: -.75cqw; top: 19%; height: 7%; box-shadow: 0 10cqw 0 #262c2b; }
.gr-handy__schirm { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 12cqw; background: var(--papier); }

.gr-tablet__rahmen {
  padding: 3.4cqw; border-radius: 6.2cqw; background: #151a19;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 2px rgba(15, 19, 18, .12),
    0 2.6rem 4rem -2.4rem rgba(15, 19, 18, .4), 0 5rem 7rem -4.5rem rgba(15, 19, 18, .26);
}
.gr-tablet__schirm { position: relative; aspect-ratio: 834 / 1112; overflow: hidden; border-radius: 2.6cqw; background: var(--papier); }

.gr-laptop__deckel {
  margin-inline: 6.5%; padding: 2.1cqw 2.1cqw 2.9cqw; border-radius: 2.6cqw 2.6cqw .5cqw .5cqw; background: #151a19;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.gr-laptop__schirm { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: .4cqw; background: var(--papier); }
.gr-laptop__basis {
  position: relative; height: 2.5cqw; border-radius: .25cqw .25cqw 50% 50% / .25cqw .25cqw 100% 100%;
  background: linear-gradient(180deg, #EEEFEC 0, #D3D6D3 45%, #A7ABA8 100%);
  box-shadow: 0 1.6rem 2.6rem -1.4rem rgba(15, 19, 18, .45), 0 3.4rem 5rem -3rem rgba(15, 19, 18, .25);
}
.gr-laptop__basis::before {   /* Griffmulde */
  content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%);
  border-radius: 0 0 1.2cqw 1.2cqw; background: linear-gradient(180deg, #B9BDBA, #CFD2CF);
}

/* ---------- Drei Schritte: jeder ein eigener ruhiger Block, Text auf der einen Seite, auf der anderen eine helle
   Bildfläche mit einem Gerät (echtes Bildschirmfoto unserer Seite). Auf dem Handy das Bild oben, der Text darunter;
   ab 64em nebeneinander, im Wechsel links und rechts. Danach „Alles aus einer Hand“. ---------- */
.az { position: relative; background: var(--papier); color: var(--tinte); }
.az__huelle { display: grid; gap: var(--az-luft); padding-block: var(--luft); --az-luft: clamp(4.5rem, 10vw, 8.5rem); }
.az__schritte { display: grid; gap: var(--az-luft); }
.az__block { display: grid; gap: clamp(1.5rem, 5vw, 2.25rem); }
.az__bild { order: -1; }
.az__titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); letter-spacing: .12em; margin-right: -.12em; line-height: 1.1;
  color: var(--tinte); text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.az__text { margin-top: 1rem; max-width: 27em; font-size: clamp(1.08rem, 1rem + .35vw, 1.32rem); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }

/* Bildfläche: neutrales Hellgrau (--geraet-flaeche, oben), eckig wie die Bilder der Seite. Jeder Schritt hat seine eigene Komposition:
   1 das Handy steigt von unten in die Fläche, 2 das Handy groß und nah, 3 der Laptop mit einem kleinen Handy davor.
   Der untere Anschnitt der Handys liegt immer in einer Lücke des Bildschirmfotos, nie mitten in einer Zeile.
   Aufnahmegröße der Handy-Bildschirmfotos: 390 × 844. Block 1 (neuer Start): der Schnitt liegt bei 56 % der
   Bildschirmhöhe, mitten in der Lücke zwischen der Tafel (endet bei etwa 45 %) und dem kleinen Textblock (beginnt bei
   etwa 67 %); so zeigt das Handy die Überschrift vor dem Blätterschatten und der Schnitt trifft auch bei leicht anderer
   Aufnahmegröße keine Zeile. Block 2 (Menü): der Schnitt liegt bei 66,5 % und damit knapp unter der Menükarte (sie endet bei etwa 64 %). Rechnung: sichtbarer Anteil =
   (Flächenhöhe × (1 − oben) − 0,031 × Breite) ÷ (2,03 × Breite); Breite und oben in Prozent der Fläche, beide Werte
   unten pro Seitenverhältnis gesetzt (Breite = Flächenhöhe ÷ Flächenbreite × (1 − oben) ÷ (2,03 × Anteil + 0,031)). */
.az__bild {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; display: grid; place-items: center;
  /* Die Handys in Schritt 1 und 2 sind unten angeschnitten und brauchen eine Kante: dafür die neutrale Fläche
     (Joah 22.10.: kein Grün mehr hinter Bildern) */
  background: var(--geraet-flaeche);
}
/* Schritt 3: Laptop und Handy ganz zu sehen, also keine Fläche (wie bei talvesa). Sichtbarer Überlauf, damit der weiche
   Schatten der Geräte nicht an einer unsichtbaren Kante endet. */
.az__bild--laptop { aspect-ratio: 4 / 3; background: none; overflow: visible; }
.az__bild--handy .az__geraet { position: absolute; inset-inline: 0; top: var(--h-oben); width: var(--h-breite); margin-inline: auto; }
.az__block--1 { --h-oben: 25%; --h-breite: 64.2%; }
.az__block--2 { --h-oben: 9%; --h-breite: 65.9%; }
/* Block 3: der Laptop rechts, das kleine Handy links davor (nur vor Rahmen und Fuß, es verdeckt keinen Text) */
.az__bild--laptop .az__geraet { width: 82%; justify-self: end; margin-right: 2%; }
.az__beigeraet { position: absolute; left: 3%; bottom: 5%; width: 22%; }

.az__gross {
  font-size: clamp(2.4rem, 1rem + 8vw, 7rem); letter-spacing: .1em; margin-right: -.1em; line-height: 1.04;
  color: var(--tinte); text-wrap: balance;
}
/* Die sieben Leistungen als Karten und der Knopf: siehe „Alles aus einer Hand“ weiter unten */

/* Tablet hochkant: Bild breit oben, Text darunter */
@media (min-width: 48em) {
  .az__bild, .az__bild--laptop { aspect-ratio: 16 / 10; }
  .az__block--1 { --h-oben: 14%; --h-breite: 46%; }
  .az__block--2 { --h-oben: 9%; --h-breite: 41.2%; }
  .az__bild--laptop .az__geraet { width: 62%; margin-right: 12%; }
  .az__beigeraet { left: 14%; width: 14%; }
}

/* ab 64em: Text und Bild nebeneinander, im Wechsel. Text über fünf Spalten, das Bild über sieben. */
@media (min-width: 64em) {
  .az__block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
  .az__inhalt, .az__bild { grid-row: 1; }
  .az__inhalt { grid-column: 1 / span 5; }
  .az__bild, .az__bild--laptop { grid-column: 6 / span 7; aspect-ratio: 4 / 3; order: 0; }
  .az__block--2 .az__inhalt { grid-column: 8 / span 5; padding-left: clamp(0rem, 2.5vw, 3rem); }
  .az__block--2 .az__bild { grid-column: 1 / span 7; }
  .az__titel { font-size: min(3.6rem, 3.7vw); }
  .az__block--1 { --h-oben: 12%; --h-breite: 56.5%; }
  .az__block--2 { --h-oben: 10%; --h-breite: 48.9%; }
  .az__bild--laptop .az__geraet { width: 84%; margin-right: 4%; }
  .az__beigeraet { left: 4%; width: 17%; }
}

/* ---------- Stimme: das Zitat breit in der Tafel-Schrift, darunter Text und wir zwei mit unserem Zeichen ---------- */
.pb-stimme__raster { row-gap: clamp(2rem, 4vw, 3.2rem); align-items: start; }
.pb-stimme__zitat { grid-column: 1 / -1; }
.pb-stimme .stimme__zitat p { font-size: clamp(1.45rem, .8rem + 3vw, 4rem); letter-spacing: .07em; line-height: 1.2; max-width: none; }
.pb-stimme__prosa { grid-column: 1 / -1; margin-top: 0; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); }
.pb-stimme__wer { grid-column: 1 / -1; display: grid; gap: .6rem; justify-items: start; }
.pb-stimme__name { margin: 0; }
.pb-stimme__zeichen { display: grid; place-items: center; width: 60px; height: 60px; flex: none; color: #0B211B; --logo-b: #1D5B4D; }
.pb-stimme__logo { width: 100%; height: auto; }
@media (min-width: 64em) {
  .pb-stimme__zitat { grid-column: 1 / span 10; }
  .pb-stimme__prosa { grid-column: 1 / span 6; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
  .pb-stimme__wer { grid-column: 8 / span 5; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
}

/* ---------- Für jede Größe: unsere Seite auf drei Bildschirmen, der Größe nach wie die Zeilen einer Sehtafel ---------- */
.groessen {
  overflow: clip;
  /* Joah 22.10. (Vorbild talvesa): kein Mint mehr. Die drei Geräte stehen ganz und frei auf dem Papier, nur mit ihrem eigenen
     weichen Schatten; Papier statt Weiß trennt den Abschnitt ruhig von „Stimme“ davor und den Fragen danach (beide Weiß).
     Überschreibt .abschnitt--glas aus dem HTML. */
  background: var(--papier);
}
.groessen__kopf { display: grid; gap: 1.2rem var(--spalt); margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.groessen__links { display: grid; gap: 1.1rem; }
.groessen__rechts { display: grid; gap: .5rem; justify-items: start; }
.groessen__branchen { max-width: 32em; color: var(--tinte-2); }
.groessen__buehne { position: relative; }
@media (min-width: 64em) {
  .groessen__kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .groessen__links { grid-column: 1 / span 7; }
  .groessen__rechts { grid-column: 9 / span 4; }
}
/* Handy: ruhig ineinander gestaffelt */
@media (max-width: 47.99em) {
  .groessen__buehne { aspect-ratio: 1 / .8; }
  .groessen__buehne > * { position: absolute; }
  .groessen__laptop { left: 0; top: 0; width: 88%; }
  .groessen__tablet { right: 10%; bottom: 1.5%; width: 33%; }
  .groessen__handy { right: 0; bottom: 0; width: 16.5%; }
}
/* ab Tablet: nebeneinander auf einer Linie, von groß nach klein */
@media (min-width: 48em) {
  .groessen__buehne { display: flex; align-items: flex-end; justify-content: space-between; gap: 3%; padding-bottom: 1rem; }
  .groessen__laptop { width: 58%; }
  .groessen__tablet { width: 24%; }
  .groessen__handy { width: 11.5%; }
}
.groessen [data-gr] { will-change: transform; }

/* ---------- Kontakt-Abschnitt: Pause-Knopf nur für die Tastatur sichtbar (WCAG 2.2.2), sonst ruhiges Bild ---------- */
.besuch__bild .film__pause { opacity: 0; pointer-events: none; }
.besuch__bild .film__pause:focus-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .groessen [data-gr] { will-change: auto; }
}

/* „Webdesign für jede Größe“: ein kurzer Satz zur Branche, darunter der Ort und die Textlinks */
.groessen__branchen { font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); font-weight: 600; letter-spacing: -.01em; color: var(--tinte); }
.groessen__ort { margin-top: .6rem; max-width: 34em; color: var(--tinte-2); }
.groessen__links-zeile { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: .4rem; }


/* ==========================================================================
   Bühne (Joah 16.10.): der Preis im Satz, Handy-Aufbau
   ========================================================================== */
/* „ab 499 €“ im Satz: kräftig, Grün, mit einem mintfarbenen Markerstrich; bleibt ein Link auf die Preise */
.buehne__preis {
  color: var(--kobalt); font-weight: 700; font-size: 1.06em; text-decoration: none; white-space: nowrap;
  padding: 0 .2em; margin-inline: .14em 0; border-radius: .18em;
  background: linear-gradient(var(--mint-hell), var(--mint-hell)) 0 100% / 100% 46% no-repeat;
  transition: background-size .4s var(--ease-out), color .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .buehne__preis:hover { background-size: 100% 100%; color: var(--kobalt-tief); } }
.buehne__preis:focus-visible { background-size: 100% 100%; outline-offset: 3px; }
/* größere Tippfläche, ohne dass sich Zeilenabstand oder Markerstrich ändern (unsichtbares Feld um den Link) */
.buehne__preis { position: relative; }
.buehne__preis::after { content: ""; position: absolute; inset: -.6em -.15em; }
.buehne-streifen { display: none; }

@media (max-width: 47.99em) {
  /* Der erste Bildschirm ist die Bühne: Hintergrund, mittig die Tafel, ganz unten ein kompakter Block. */
  .buehne { height: auto; min-height: 100svh; }   /* genau ein Bildschirm; wächst nur, wenn die Schrift sehr groß gestellt ist */
  .buehne__text { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding-block: 0 clamp(1rem, 2.8svh, 1.6rem); }
  .buehne__links { display: grid; gap: .5rem; }
  .buehne__h1 { max-width: none; font-size: .72rem; letter-spacing: .12em; line-height: 1.45; color: var(--tinte); }
  .buehne__lead { display: block; margin-top: 0; max-width: none; font-size: .9rem; line-height: 1.45; }
  .buehne__lead-mehr { display: none; }
  .buehne .bewertung { display: flex; justify-content: center; width: 100%; margin-top: .3rem; gap: .5rem; padding: .4rem .85rem .4rem .65rem; }
  .buehne .bewertung__sterne, .buehne .google-g { flex: none; }
  .buehne .bewertung__text { font-size: .95rem; }
  .buehne__rechts { justify-items: stretch; }
  .buehne__rechts .knoepfe { display: block; }
  .buehne__rechts .knopf { width: 100%; }
  /* „So arbeiten wir“ und der Antwort-Hinweis kommen erst beim Scrollen: als schmaler Streifen unter der Bühne */
  .buehne__ablauf, .buehne__rechts .buehne__hinweis { display: none; }
  .buehne-streifen { display: block; background: var(--glas); }
  .buehne-streifen__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; padding-block: .35rem; }
  .buehne-streifen .buehne__hinweis { min-height: 44px; }
}
@media (min-width: 48em) {
  .buehne__lead-mehr { display: inline; }
}
/* Niedrige Fenster am Desktop (Laptops mit etwa 650 px sichtbarer Höhe): der Satz mit dem Preis bleibt stehen, nur der
   Zusatz fällt weg und die Schrift wird kleiner, damit die Tafel in der Mitte ihren Platz behält */
@media (min-width: 48em) and (max-height: 44em) {
  .buehne__lead-mehr { display: none; }
  .buehne__lead { margin-top: .5rem; font-size: .95rem; line-height: 1.45; }
  .buehne__text { padding-bottom: clamp(1.1rem, 3vh, 1.6rem); }
}
@media (max-width: 23em) {
  .buehne .bewertung { gap: .4rem; padding-inline: .6rem; }
  .buehne .bewertung__text { font-size: .88rem; }
  .buehne .bewertung--leer .bewertung__sterne svg { width: 12px; height: 12px; }
}
@media (max-width: 47.99em) {
  .buehne__feld { min-height: 10.5rem; }   /* die Tafel hat immer Platz; der Bildschirm wächst eher, als dass etwas überlappt */
}
@media (max-width: 47.99em) and (max-height: 40em) {
  /* niedrige Handys (360 × 640 und kleiner): der Satz wird kleiner, nie die Tafel */
  .buehne__lead { font-size: .84rem; line-height: 1.4; }
  .buehne__text { gap: .6rem; }
}
@media (max-width: 47.99em) and (max-height: 26em) {
  /* Handy quer: Tafel kleiner, damit sie nicht in den Block darunter ragt */
  .buehne__feld { min-height: 13rem; }
  .buehne__tafel .zk { font-size: min(9.2cqw, 2.4rem); }
  .buehne__tafel .zs { font-size: min(3.5cqw, .78rem); margin-top: 1rem; }
}

/* ==========================================================================
   Alles aus einer Hand: sieben Karten mit Linien-Icon, Titel in der Tafel-Schrift und einer Zeile.
   Beim Überfahren: Karte hebt sich 3 px, wird zu mattem Mint-Glas, die Platte füllt sich Grün und das Icon zeichnet sich nach.
   ========================================================================== */
/* Kein Mint-Hauch mehr hinter den Karten (Joah 22.10.): die Karten liegen auf dem Papier des Abschnitts */
.az__ende { position: relative; isolation: isolate; }
.az__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin-top: clamp(1.8rem, 4vw, 3rem); }
.az__karte {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.05rem; align-items: center;
  padding: .95rem 1.1rem .95rem .95rem; border-radius: var(--r-gruppe);
  background: rgba(253, 253, 251, .5);
  box-shadow: inset 0 0 0 1px var(--linie-2);
  transition: transform .5s var(--ease-out), background-color .45s var(--ease-out), box-shadow .5s var(--ease-out),
    -webkit-backdrop-filter .5s var(--ease-out), backdrop-filter .5s var(--ease-out);
}
.az__karte::before {   /* weiches Licht an der Stelle des Zeigers (Maus), sonst oben mittig */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 0%), rgba(124, 203, 174, .32), rgba(124, 203, 174, 0) 70%);
  transition: opacity .45s var(--ease-out);
}
.az__icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--glas); color: var(--kobalt);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.az__icon svg { width: 2rem; height: 2rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.az__icon path { stroke-dasharray: 1 2; stroke-dashoffset: var(--dash, 0); }   /* --dash: GSAP zeichnet beim Hereinkommen (37-start-szene.js) */
.az__icon path:nth-child(2) { --n: 1; } .az__icon path:nth-child(3) { --n: 2; }
.az__icon path:nth-child(4) { --n: 3; } .az__icon path:nth-child(5) { --n: 4; } .az__icon path:nth-child(6) { --n: 5; }
.az__karte-titel {
  align-self: end; font-size: clamp(.98rem, .88rem + .4vw, 1.25rem); letter-spacing: .1em; line-height: 1.25; color: var(--tinte);
  text-wrap: balance; overflow-wrap: break-word;
}
.az__karte-text { align-self: start; margin-top: .3rem; font-size: 1rem; line-height: 1.45; color: var(--tinte-2); text-wrap: pretty; }
/* Start bei 1,04 statt 1: die runde Strichkappe ragt sonst als Pünktchen an den Anfang, bevor der Strich dran ist */
@keyframes az-zeichnen { from { stroke-dashoffset: 1.04; } to { stroke-dashoffset: 0; } }
@media (hover: hover) and (pointer: fine) {
  .az__karte:hover {
    transform: translateY(-3px); background: rgba(158, 199, 184, .3);
    -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
    box-shadow: inset 0 0 0 1px rgba(29, 91, 77, .2), inset 0 1px 0 rgba(255, 255, 255, .45), 0 22px 36px -26px rgba(15, 19, 18, .5);
  }
  .az__karte:hover::before { opacity: 1; }
  .az__karte:hover .az__icon { background: var(--kobalt); color: var(--weiss); }
  .az__karte:hover .az__icon path { animation: az-zeichnen .95s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 90ms); }
}

/* Knopf nach den Karten (steht als letztes Feld im selben Raster, ist aber kein Listenpunkt): eine ruhige Mint-Fläche
   mit dem Satz links und dem Knopf rechts */
.az__unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 3vw, 2.4rem); border-radius: var(--r-gruppe); background: var(--glas);
}
.az__notiz { font-size: clamp(1.12rem, 1rem + .55vw, 1.45rem); font-weight: 560; letter-spacing: -.012em; line-height: 1.3; color: var(--tinte); text-wrap: balance; }

/* Ab Tablet: zwei Spalten, Icon über dem Titel; die siebte Karte steht breit, Icon links */
@media (min-width: 40em) {
  .az__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); }
  .az__karte { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; padding: clamp(1.3rem, 2.4vw, 1.8rem); }
  .az__icon { grid-row: auto; width: 3.75rem; height: 3.75rem; margin-bottom: 1.2rem; }
  .az__icon svg { width: 2.2rem; height: 2.2rem; }
  .az__karte-titel { align-self: start; }
  .az__karte:nth-child(7) { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; column-gap: 1.3rem; }
  .az__karte:nth-child(7) .az__icon { grid-row: 1 / span 2; margin-bottom: 0; }
  .az__karte:nth-child(7) .az__karte-titel { align-self: end; }
  .az__unten { grid-column: 1 / -1; }
}
/* Drei Spalten: 3 + 3, in der letzten Reihe die siebte Karte und der Knopf über zwei Spalten */
@media (min-width: 64em) {
  .az__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .az__karte:nth-child(7) { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; column-gap: 0; }
  .az__karte:nth-child(7) .az__icon { grid-row: auto; margin-bottom: 1.2rem; }
  .az__karte:nth-child(7) .az__karte-titel { align-self: start; }
  .az__unten { grid-column: span 2; }
}
/* Große Bildschirme: drei breite Karten, darunter vier, zuletzt der Knopf über die ganze Breite */
@media (min-width: 90em) {
  .az__liste { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .az__karte, .az__karte:nth-child(7) { grid-column: span 3; }
  .az__karte:nth-child(-n + 3) { grid-column: span 4; }
  .az__unten { grid-column: 1 / -1; }
}
/* Solange die Karten hereinkommen (GSAP, 37-start-szene.js), läuft kein CSS-Übergang gegen den Inline-Transform */
.az__liste.ist-einblendung .az__karte { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .az__karte, .az__karte::before, .az__icon { transition: none; }
  .az__karte:hover { transform: none; }
  .az__karte:hover .az__icon path { animation: none; }
}

/* ==========================================================================
   Fenster „Google-Profil & Sichtbarkeit“ (Liam und Joah 17.10.): steht unter „Gefunden werden“, im ersten Schritt.
   Eine helle Karte mit schlichter Titelleiste (drei Punkte). Links der Titel in der Tafel-Schrift und der Platzierungs-Satz,
   rechts die drei Zeilen mit Haken. Die Haken zeichnen sich beim Hereinkommen nach (37-start-szene.js, Variable --dash).
   ========================================================================== */
.az__fenster {
  margin-top: clamp(.25rem, 2.2vw, 1.75rem);
  overflow: hidden; border-radius: var(--r-gruppe); background: var(--weiss);
  box-shadow: 0 0 0 1px var(--linie-2), 0 1px 2px rgba(15, 19, 18, .05), 0 2.4rem 3.6rem -2.6rem rgba(15, 19, 18, .3);
}
.az__fenster-leiste {
  display: flex; align-items: center; gap: .45rem; height: 2.7rem; padding-inline: 1.15rem;
  background: var(--glas); box-shadow: inset 0 -1px 0 rgba(29, 91, 77, .1);
}
.az__fenster-leiste i { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(29, 91, 77, .2); }
.az__fenster-leiste i:first-child { background: var(--mint); }
.az__fenster-innen { display: grid; gap: clamp(1.5rem, 3.4vw, 2.2rem) var(--spalt); padding: clamp(1.3rem, 3.4vw, 2.7rem); }
.az__fenster-titel {
  font-size: clamp(1.3rem, 1rem + 1.35vw, 2.15rem); letter-spacing: .1em; line-height: 1.2; color: var(--tinte);
  text-wrap: balance; overflow-wrap: break-word;
}
.az__fenster-notiz { padding-top: 1.1rem; border-top: 1px solid var(--linie-2); font-size: .98rem; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.az__fenster-liste { display: grid; align-content: center; }
.az__fenster-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem;
  padding-block: 1.05rem; border-top: 1px solid var(--linie-2);
}
.az__fenster-zeile:first-child { padding-top: 0; border-top: 0; }
.az__fenster-zeile:last-child { padding-bottom: 0; }
.az__fenster-zeile p { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.5; color: var(--tinte); text-wrap: pretty; }
.az__haken { width: 2rem; height: 2rem; flex: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.az__haken circle { fill: var(--glas); stroke: var(--mint); stroke-width: 1.6; }
.az__haken path { stroke: var(--kobalt); stroke-width: 2.1; }
.az__haken circle, .az__haken path { stroke-dasharray: 1 2; stroke-dashoffset: var(--dash, 0); }
@media (min-width: 64em) {
  .az__fenster { grid-column: 1 / -1; grid-row: 2; }
  .az__fenster-innen { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: center; row-gap: 1rem; }
  .az__fenster-titel { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
  .az__fenster-notiz { grid-column: 1 / span 5; grid-row: 2; align-self: start; max-width: 25em; padding-top: 0; border-top: 0; }
  .az__fenster-liste { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: center; }
}

/* ==========================================================================
   „Erst bauen, dann zahlen.“ (Joah 17.10.): ein eigener, auffälliger Block im tiefen Grün der Seite. Oben die Überschrift in
   riesiger Tafel-Schrift, darunter der Satz und der Zusatz (am großen Bildschirm nebeneinander). Kein weiterer Schmuck:
   die Wirkung kommt von Farbe, Größe und Ruhe. Ohne Bewegung steht alles fertig da (37-start-szene.js blendet nur ein).
   ========================================================================== */
.ebdz {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--kobalt-tief); color: var(--auf-nacht);
}
.ebdz::before {   /* ein Lichtschein oben links, ein dunkler Rand unten rechts: kein flacher Block */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56% 90% at 10% 0%, rgba(124, 203, 174, .22), rgba(124, 203, 174, 0) 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(11, 33, 27, .75), rgba(11, 33, 27, 0) 72%);
}
/* Die Breite der Zeile „DANN ZAHLEN.“ ist rund 7,8 × die Schriftgröße; 11,3vw hält sie auf kleinen Handys (320 bis 430 px)
   in einer Zeile, damit „DANN“ nicht allein steht. Ab Tablet greift wieder der Verlauf der Schrift. */
.ebdz__titel {
  font-size: min(clamp(2.35rem, 1rem + 7.5vw, 6.9rem), 11.3vw); letter-spacing: .1em; margin-right: -.1em; line-height: 1.08;
  color: var(--weiss);
}
.ebdz__unten { display: grid; gap: 1.1rem var(--spalt); margin-top: clamp(2.2rem, 5vw, 4rem); }
.ebdz__lead {
  max-width: 21em; font-size: clamp(1.32rem, 1.05rem + 1.15vw, 2.05rem); font-weight: 560; line-height: 1.26; letter-spacing: -.016em;
  color: var(--weiss); text-wrap: balance;
}
.ebdz__klein { max-width: 31em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; color: #C9DBD3; text-wrap: pretty; }
@media (min-width: 64em) {
  .ebdz__unten { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .ebdz__lead { grid-column: 1 / span 6; }
  .ebdz__klein { grid-column: 8 / span 4; }
}

/* ==========================================================================
   Abschluss-Block: WhatsApp als erste, breite Wahl, darunter „Projekt anfragen“ und Anrufen
   ========================================================================== */
.besuch__wege { display: grid; gap: .75rem; justify-items: start; margin-top: .4rem; }
.besuch__wa .knopf { min-height: 62px; padding-right: 2.1rem; font-size: 1.08rem; }
@media (max-width: 26em) { .besuch__wa, .besuch__wa .knopf { width: 100%; } }

/* ==========================================================================
   Der schwebende WhatsApp-Knopf (unten rechts, 35-whatsapp.css) darf in der Bühne nichts verdecken:
   Am großen Bildschirm steht der rechte Block (Knopf, „So arbeiten wir“, Antwort-Hinweis) über ihm,
   auf dem Handy endet der Knopf „Projekt anfragen“ links vom runden Zeichen.
   ========================================================================== */
@media (min-width: 48em) { .buehne__rechts { margin-bottom: 4.6rem; } }
@media (max-width: 47.99em) { .buehne__rechts .knopf { width: calc(100% - 4.6rem); } }

/* Abschluss-Block: der Text bekommt sechs Spalten, damit „Projekt anfragen“ und Anrufen nebeneinander passen */
@media (min-width: 64em) { .besuch__text { grid-column: 1 / span 6; padding-right: clamp(1rem, 3vw, 3rem); } }
/* WhatsApp als bevorzugter Weg: die einzige grüne Fläche im Block. Grün, weiße Glyphe und Überfahren kommen aus 35-whatsapp.css
   (überall gleich, auch auf dunklem Grund); hier gilt nur die etwas größere Zeile weiter oben (.besuch__wa .knopf). */
/* kleine Handys (360 px): der Knopf neben dem runden WhatsApp-Zeichen bleibt einzeilig */
@media (min-width: 22.01em) and (max-width: 24em) {
  .buehne__rechts .knopf { padding: 0 1rem 0 .9rem; font-size: .96rem; white-space: nowrap; }
  .buehne__rechts .knopf__ruhe { gap: .55rem; }
}
/* niedrige Fenster am Desktop: der Satz mit dem Preis darf etwas breiter laufen, damit „ab 499 €.“ nicht allein in der letzten Zeile steht */
@media (min-width: 48em) and (max-height: 44em) { .buehne__lead { max-width: 46em; } }

/* ==========================================================================
   Was wir für Sie bauen (Joah 22.10.): vier Spalten zwischen feinen Linien, keine Karten-Kästen (die hat „Alles aus einer
   Hand“). Handy: untereinander, Icon neben dem Titel. Ab 40em zwei mal zwei, ab 72em vier nebeneinander, Icon über dem
   Titel. Die Glas-Kachel des Icons füllt sich beim Überfahren der Spalte grün, die Linie zeichnet sich nach (wie die Karten).
   Unten keine eigene Luft: der folgende Abschnitt (gleiches Papier) bringt sie mit.
   ========================================================================== */
.wb { position: relative; background: var(--papier); padding-top: var(--luft); }
.wb__kopfzeile { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.75rem); }
.wb__titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); letter-spacing: .12em; margin-right: -.12em; line-height: 1.1;
  color: var(--tinte); text-wrap: balance; overflow-wrap: break-word;
}
.wb__lead { max-width: 34em; font-size: clamp(1.08rem, 1rem + .35vw, 1.32rem); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.wb__liste { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--linie); }
.wb__spalte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-block: 1.7rem 1.4rem; }
.wb__spalte + .wb__spalte { border-top: 1px solid var(--linie); }
.wb__kopf { display: flex; align-items: center; gap: 1rem; }
.wb__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-gruppe);
  background: var(--glas); color: var(--kobalt); transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.wb__icon svg { width: 1.85rem; height: 1.85rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb__icon path { stroke-dasharray: 1 2; stroke-dashoffset: var(--dash, 0); }   /* --dash: GSAP zeichnet beim Hereinkommen (37-start-szene.js) */
.wb__icon path:nth-child(2) { --n: 1; } .wb__icon path:nth-child(3) { --n: 2; } .wb__icon path:nth-child(4) { --n: 3; } .wb__icon path:nth-child(5) { --n: 4; }
.wb__name { font-size: clamp(1.02rem, .9rem + .45vw, 1.3rem); letter-spacing: .1em; line-height: 1.25; color: var(--tinte); text-wrap: balance; overflow-wrap: break-word; }
.wb__text { margin-top: 1rem; max-width: 34em; font-size: 1.02rem; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.wb__punkte { display: grid; gap: .45rem; align-self: stretch; margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--linie-2); }
.wb__punkte li { position: relative; padding-left: 1.25rem; font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--tinte); }
.wb__punkte li::before {   /* kleiner Haken in unserem Grün (gezeichnet, kein Schriftzeichen) */
  content: ""; position: absolute; left: .1em; top: .36em; width: .62em; height: .34em;
  border-left: 2px solid var(--kobalt); border-bottom: 2px solid var(--kobalt); transform: rotate(-45deg);
}
.wb__link { margin-top: auto; padding-top: .7rem; }
@media (hover: hover) and (pointer: fine) {
  .wb__spalte:hover .wb__icon { background: var(--kobalt); color: var(--weiss); }
  .wb__spalte:hover .wb__icon path { animation: az-zeichnen .95s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 90ms); }
}
@media (max-width: 39.99em) {
  .wb__spalte { padding-block: 1.5rem 1.1rem; }
  .wb__icon { width: 2.75rem; height: 2.75rem; }
  .wb__icon svg { width: 1.7rem; height: 1.7rem; }
  .wb__text { margin-top: .85rem; }
  .wb__punkte { margin-top: .95rem; padding-top: .9rem; gap: .35rem; }
  .wb__link { padding-top: .35rem; }
}
@media (min-width: 40em) {
  .wb__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb__spalte { padding-block: 2rem 1.6rem; }
  .wb__spalte + .wb__spalte { border-top: 0; }
  .wb__spalte:nth-child(odd) { padding-right: var(--spalt); }
  .wb__spalte:nth-child(even) { padding-left: var(--spalt); border-left: 1px solid var(--linie); }
  .wb__spalte:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
@media (min-width: 72em) {
  .wb__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wb__spalte, .wb__spalte:nth-child(odd), .wb__spalte:nth-child(even) { padding: 2.3rem clamp(1.1rem, 1.9vw, 2rem) 1.8rem; border-top: 0; border-left: 1px solid var(--linie); }
  .wb__spalte:first-child { padding-left: 0; border-left: 0; }
  .wb__spalte:last-child { padding-right: 0; }
  .wb__kopf { flex-direction: column; align-items: flex-start; gap: 1.35rem; }
  /* gleiche Zeilen über alle vier Spalten (Kopf, Text, Stichpunkte, Link), damit Linien und Listen auf einer Höhe stehen */
  @supports (grid-template-rows: subgrid) {
    .wb__liste { grid-template-rows: repeat(4, auto); }
    .wb__spalte { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: start; }
    .wb__punkte { align-self: start; }
    .wb__link { align-self: end; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb__icon { transition: none; }
  .wb__spalte:hover .wb__icon path { animation: none; }
}

/* Google-Rezensionen (Joah 22.10.): Kopf mit großer Note links, rechts zwei Karten und darunter die Quelle */
.pb-stimmen__titel { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); letter-spacing: .1em; line-height: 1.15; margin-bottom: .6rem; }
.pb-stimmen .stimmen__zahl { margin-top: .4rem; }
.pb-stimmen__link { margin-top: .4rem; }
.pb-stimmen__rechts { grid-column: 1 / -1; display: grid; gap: 1.2rem; align-content: start; }
.pb-stimmen .stimmen__liste { grid-column: auto; }
.pb-stimmen .stimmen__zitat { border-radius: var(--r-gruppe); height: 100%; }
.pb-stimmen__liste > li { display: grid; }
.pb-stimmen__stand { font-size: .88rem; max-width: 52rem; }
@media (min-width: 48em) { .pb-stimmen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); } }
@media (min-width: 64em) {
  .pb-stimmen__rechts { grid-column: 5 / -1; }
  .pb-stimmen .stimmen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 47-ablauf.css */
/* ==========================================================================
   Ablauf (Joah 16.10., zweite Runde): kein KI-Film, keine gepinnte Szene, kein Verschwimmen.
   Kopf: die fünf Schritte als ruhige Liste, alle gleich groß, jeder Punkt springt zu seinem Schritt.
   Darunter fünf ruhige Blöcke im Wechsel links und rechts: große grüne Ziffer, Titel, Text und je ein eigenes Bild
   (seit Joah 22.10. ohne Mint: Schritt 1 auf der hellgrauen Geräte-Fläche, 2 bis 5 frei auf dem Papier; Geräte wie auf
   der Startseite, Rahmen und --geraet-flaeche aus 46-start.css, dazu ein Seitenplan und ein
   Graustufen-Entwurf, beide in HTML gesetzt). Kein gesperrtes Etikett über dem Titel. Mobil: Bild oben, randlos,
   Text darunter.
   Alle Maße in den Bildern in cqw der Fläche, damit jedes Bild in jeder Breite gleich aussieht.
   ========================================================================== */

/* ---------- Kopf: die fünf Schritte als Liste, jeder Punkt springt zu seinem Schritt ---------- */
.ab-kopf { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.ab-kopf__raster { row-gap: clamp(2.5rem, 6vw, 3.5rem); align-items: end; }
.ab-kopf .ab-kopf__text { grid-column: 1 / -1; }
.ab-liste { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.ab-liste li { border-bottom: 1px solid var(--linie); }
.ab-liste__punkt {
  display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; column-gap: .3em;
  min-height: 52px; padding-block: clamp(.7rem, 1.3vw, 1.05rem);
  font-size: clamp(1.1rem, .92rem + .85vw, 1.65rem); color: var(--tinte); text-decoration: none;
}
.ab-kopf .ab-liste__nr, .ab-kopf .ab-liste__wort { padding-top: 0; line-height: 1.1; }
.ab-kopf .ab-liste__nr { color: var(--kobalt); letter-spacing: 0; }
.ab-kopf .ab-liste__wort { letter-spacing: .16em; overflow-wrap: anywhere; }
.ab-liste__punkt .pfeil {
  width: 1.15rem; height: 1.15rem; color: var(--tinte-2); transform: rotate(90deg);
  transition: transform .35s var(--ease-out), color .25s var(--ease-out);
}
.ab-liste__punkt:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .ab-liste__punkt { transition: color .25s var(--ease-out); }
  .ab-liste__punkt:hover { color: var(--kobalt); }
  .ab-liste__punkt:hover .pfeil { color: var(--kobalt); transform: rotate(90deg) translateX(3px); }
}
@media (min-width: 64em) {
  .ab-kopf .ab-kopf__text { grid-column: 1 / span 6; }
  .ab-liste { grid-column: 8 / -1; }
}

/* ---------- Die fünf Schritte ---------- */
.ab-schritte {
  --ab-schatten: 0 1px 2px rgba(15, 19, 18, .1), 0 1.6rem 2.6rem -1.6rem rgba(15, 19, 18, .32), 0 3.2rem 4.8rem -3.4rem rgba(15, 19, 18, .22);
  --ab-balken: rgba(18, 22, 21, .1);
  background: var(--papier); color: var(--tinte); padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 8vw, 6.5rem);
}
/* Sprung aus der Liste: der Kopf weicht beim Abwärtsscrollen, darum landet der Block 1rem unter der Fensterkante
   (scroll-padding-top des Dokuments minus Kopfhöhe; Browser und Lenis rechnen beides gleich), sein Innenabstand gibt Luft */
.ab-schritt { padding-block: clamp(2.5rem, 5.5vw, 4.25rem); scroll-margin-top: calc(-1 * var(--kopf-h)); }
.ab-schritt:focus { outline: none; }
.ab-schritt:focus-visible .ab-schritt__text { outline: 2px solid var(--kobalt); outline-offset: 12px; }
/* geteilter Link mit #schritt-3: Chrome fokussiert den Block beim Laden, das ist kein Tastatur-Sprung */
.ab-schritt:target:focus-visible .ab-schritt__text { outline: none; }
.ab-schritt__raster { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.9rem, 5vw, 2.75rem); align-items: center; }

/* Text: Ziffer, Titel, Absatz */
.ab-schritt__text { min-width: 0; }
.ab-schritte .ab-schritt__nr {
  padding-top: 0; margin-left: -.05em; font-size: clamp(4.6rem, 3rem + 6.4vw, 9.5rem); line-height: .76;
  letter-spacing: 0; color: var(--kobalt);
}
.ab-schritt__titel {
  margin-top: clamp(1.3rem, 3vw, 2.2rem); max-width: 16ch;
  font-family: var(--f-tafel); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; line-height: 1.14;
  font-size: clamp(1.55rem, 1rem + 1.75vw, 2.7rem); color: var(--tinte);
  text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
/* erster Absatz groß und dunkel (Lead), der zweite ruhiger darunter, die Zeilen nie länger als etwa 32em */
.ab-schritt__lead {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem); max-width: 32em; font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  line-height: 1.48; color: var(--tinte); text-wrap: pretty;
}
.ab-schritt__absatz {
  margin-top: clamp(.9rem, 1.8vw, 1.2rem); max-width: 32em; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  line-height: 1.6; color: var(--tinte-2); text-wrap: pretty;
}
/* Merkliste: feine Linien, Tafel-Schrift, ein kleiner grüner Punkt als Aufzählungszeichen */
.ab-merk { margin-top: clamp(1.4rem, 3vw, 2rem); max-width: 28em; border-top: 1px solid var(--linie); }
.ab-merk li {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: .72rem 0 .72rem 1.5rem;
  border-bottom: 1px solid var(--linie);
  font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .1em; line-height: 1.3;
  font-size: clamp(.84rem, .79rem + .22vw, .98rem); color: var(--tinte); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.ab-merk li::before {
  content: ""; position: absolute; left: .1rem; top: 50%; width: .42rem; height: .42rem; margin-top: -.21rem;
  border-radius: 50%; background: var(--kobalt);
}

/* Bild (Joah 22.10.: kein Grün hinter Bildern, Vorbild talvesa): nur Schritt 1 steht auf der neutralen Geräte-Fläche der
   Startseite (--geraet-flaeche in 46-start.css), weil das Handy dort von unten hereinsteigt und eine Kante braucht. Die
   Schritte 2 bis 5 zeigen ihre Teile ganz und stehen direkt auf dem Papier des Abschnitts, nur mit ihrem eigenen weichen
   Schatten; sichtbarer Überlauf, damit der Schatten nicht an einer unsichtbaren Kante endet. Mobil randlos. */
.ab-bild { margin: 0; min-width: 0; }
.ab-bild__flaeche {
  position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 1 / 1;
  background: var(--geraet-flaeche);
}
.ab-bild:not(.ab-bild--gespraech) .ab-bild__flaeche { background: none; overflow: visible; }
.ab-bild__flaeche > * { position: absolute; }
@media (max-width: 39.99em) {
  .ab-bild { margin-inline: calc(-1 * var(--rand)); }
}
@media (min-width: 40em) {
  .ab-bild__flaeche { aspect-ratio: 4 / 3; }
}
/* zwei Spalten im Wechsel: ungerade Schritte Text links, gerade Schritte Text rechts */
@media (min-width: 56em) {
  .ab-schritt__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .ab-schritt .ab-bild { grid-column: 6 / -1; grid-row: 1; }
  .ab-schritt .ab-schritt__text { grid-column: 1 / span 5; grid-row: 1; padding-right: clamp(0rem, 2vw, 2rem); }
  .ab-schritt:nth-child(even) .ab-bild { grid-column: 1 / span 7; }
  .ab-schritt:nth-child(even) .ab-schritt__text { grid-column: 8 / -1; padding-right: 0; padding-left: clamp(0rem, 2vw, 2rem); }
}
/* schmale Textspalte neben dem Bild (56 bis 80em): etwas kleinere Schrift, damit der Text nicht viel höher wird als das Bild */
@media (min-width: 56em) and (max-width: 79.99em) {
  .ab-schritt__lead { font-size: 1.16rem; line-height: 1.45; }
  .ab-schritt__absatz { font-size: 1.02rem; line-height: 1.55; }
  .ab-merk { margin-top: 1.25rem; }
  .ab-merk li { padding-block: .6rem; font-size: .82rem; }
}
@media (min-width: 80em) {
  .ab-schritt .ab-schritt__text { padding-right: clamp(2rem, 3.2vw, 4rem); }
  .ab-schritt:nth-child(even) .ab-schritt__text { padding-right: 0; padding-left: clamp(2rem, 3.2vw, 4rem); }
}


/* Schatten aller Teile auf der Fläche (die Gerätrahmen bringen ihren eigenen mit) */
.ab-karte, .ab-plan, .ab-muster { background: var(--weiss); box-shadow: var(--ab-schatten); }

/* ---------- 1 Gespräch: Handy mit unserer Kontaktseite, daneben das Kärtchen mit Telefon und E-Mail ----------
   Das Handy steigt von unten in die Fläche. Aufnahme: /erstgespraech/ bei 390x844, ganz oben (Kontakt, WhatsApp-Karte,
   dann das Formular). Der Anschnitt liegt in der leeren Lücke zwischen der WhatsApp-Karte (endet bei 615 Pixeln) und dem
   Formular (beginnt bei 654): 635 von 844 Pixeln, Anteil 0,752 des Bildschirmfotos. Ändert sich die Kontaktseite oben,
   die Lücke neu messen und die Werte nachziehen. Rechnung wie auf der Startseite:
   sichtbarer Anteil = (Flächenhöhe − oben − 0,031 × Breite) ÷ (2,03 × Breite), alles in cqw der Fläche.
   Mobil (Fläche 100 hoch): Breite 49, oben 23,7. Ab 40em (Fläche 75 hoch): Breite 38, oben 15,8. */
.ab-g1__handy { left: 47cqw; top: 23.7cqw; width: 49cqw; }
.ab-g1__karte { left: 4cqw; top: 31cqw; width: 44cqw; z-index: 2; }
.ab-karte { display: grid; gap: 3cqw; padding: 4.2cqw 4cqw 4.4cqw; border-radius: 1.2cqw; }
.ab-karte__kopf { display: flex; align-items: center; gap: 2cqw; padding-bottom: 2.8cqw; border-bottom: 1px solid var(--linie-2); }
.ab-karte__logo { width: 5.6cqw; height: auto; flex: none; color: var(--tinte); --logo-b: var(--kobalt); }
.ab-karte__marke { font-weight: 650; font-size: 3cqw; letter-spacing: -.01em; color: var(--tinte); white-space: nowrap; }
.ab-karte__zeile { display: grid; gap: .8cqw; }
.ab-karte__art { font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .2em; font-size: 2.3cqw; line-height: 1.2; color: var(--tinte-2); }
.ab-karte__wert { font-weight: 600; font-size: 3.9cqw; line-height: 1.2; letter-spacing: .01em; color: var(--tinte); white-space: nowrap; }
.ab-karte__wert--mail { font-size: 3.55cqw; color: var(--kobalt); }
@media (min-width: 40em) {
  .ab-g1__handy { left: 53cqw; top: 15.8cqw; width: 38cqw; }
  .ab-g1__karte { left: 9cqw; top: 25cqw; width: 40cqw; }
  .ab-karte { gap: 2.4cqw; padding: 3.4cqw 3.6cqw 3.8cqw; border-radius: .9cqw; }
  .ab-karte__kopf { gap: 1.6cqw; padding-bottom: 2.3cqw; }
  .ab-karte__logo { width: 4.6cqw; }
  .ab-karte__marke { font-size: max(.72rem, 2.3cqw); }
  .ab-karte__zeile { gap: .7cqw; }
  .ab-karte__art { font-size: max(.6rem, 1.7cqw); }
  .ab-karte__wert { font-size: max(.9rem, 3.2cqw); }
  .ab-karte__wert--mail { font-size: max(.82rem, 2.85cqw); }
}

/* ---------- 2 Konzept: der Seitenplan unserer Website, Start oben, die vier Bereiche am Stamm ---------- */
.ab-bild--plan .ab-bild__flaeche { aspect-ratio: auto; padding: 9cqw 6cqw; }
.ab-bild--plan .ab-bild__flaeche > .ab-plan { position: relative; }
.ab-plan {
  --zh: 10.5cqw;                  /* Höhe einer Zeile */
  --zg: 2.6cqw;                   /* Abstand der Zeilen */
  --einzug: 9cqw;                 /* Einzug der Bereiche */
  --stamm: 3.6cqw;                /* Lage des Stamms */
  --kw: 34cqw;                    /* Breite der Kästen */
  padding: 5.4cqw 5.4cqw 6cqw; border-radius: 1cqw;
}
.ab-plan__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 3.4cqw; margin-bottom: 5cqw; border-bottom: 1px solid var(--linie-2);
}
.ab-plan__titel { font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .22em; font-size: 2.9cqw; line-height: 1.2; color: var(--tinte-2); }
.ab-plan__logo { width: 6cqw; height: auto; flex: none; color: var(--tinte); --logo-b: var(--kobalt); }
.ab-plan__zeile { position: relative; display: flex; align-items: center; gap: 3.4cqw; height: var(--zh); }
.ab-plan__kasten {
  display: flex; align-items: center; flex: none; width: var(--kw); height: 100%; padding-inline: 3cqw;
  border: 1px solid var(--linie); border-radius: .9cqw; background: var(--papier);
  font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .1em; font-size: 3.15cqw; line-height: 1;
  color: var(--tinte); white-space: nowrap;
}
.ab-plan__kasten--start { border-color: var(--kobalt); background: var(--kobalt); color: #fff; }
.ab-plan__inhalt { display: flex; flex-wrap: wrap; align-content: center; gap: 1.6cqw 1.8cqw; flex: 1 1 auto; min-width: 0; }
.ab-plan__inhalt i { display: block; height: 2cqw; border-radius: 1cqw; background: var(--ab-balken); }
.ab-plan__inhalt i:nth-child(4n + 1) { width: 30%; }
.ab-plan__inhalt i:nth-child(4n + 2) { width: 22%; }
.ab-plan__inhalt i:nth-child(4n + 3) { width: 34%; }
.ab-plan__inhalt i:nth-child(4n + 4) { width: 18%; }
.ab-plan__zeile--start .ab-plan__inhalt i { background: rgba(29, 91, 77, .16); }
.ab-plan__seiten { position: relative; display: grid; row-gap: var(--zg); padding-top: var(--zg); padding-left: var(--einzug); }
/* Stamm: von der Startseite bis zur Mitte des letzten Bereichs; Zweige vom Stamm zu jedem Kasten */
.ab-plan__stamm {
  position: absolute; left: var(--stamm); top: 0; bottom: calc(var(--zh) / 2); width: 1px;
  background: rgba(18, 22, 21, .32); transform-origin: 50% 0;
}
.ab-plan__zweig {
  position: absolute; top: 50%; left: calc(var(--stamm) - var(--einzug)); width: calc(var(--einzug) - var(--stamm)); height: 1px;
  background: rgba(18, 22, 21, .32); transform-origin: 0 50%;
}
@media (min-width: 40em) {
  .ab-bild--plan .ab-bild__flaeche { aspect-ratio: 4 / 3; padding: 0; display: grid; place-items: center; }
  .ab-bild--plan .ab-bild__flaeche > .ab-plan { width: 80cqw; }
  .ab-plan { --zh: 6.6cqw; --zg: 1.9cqw; --einzug: 6.2cqw; --stamm: 2.5cqw; --kw: 21cqw; padding: 3.6cqw 4cqw 4.2cqw; border-radius: .7cqw; }
  .ab-plan__kopf { padding-bottom: 2.3cqw; margin-bottom: 3.2cqw; }
  .ab-plan__titel { font-size: max(.62rem, 1.75cqw); }
  .ab-plan__logo { width: 3.8cqw; }
  .ab-plan__zeile { gap: 2.4cqw; }
  .ab-plan__kasten { padding-inline: 2cqw; font-size: max(.68rem, 1.95cqw); border-radius: .6cqw; }
  .ab-plan__inhalt { gap: 1.1cqw 1.3cqw; }
  .ab-plan__inhalt i { height: 1.3cqw; }
}

/* ---------- 3 Entwurf: Graustufen-Entwurf unserer Startseite auf dem Tablet, daneben das Musterblatt ---------- */
.ab-g3__tablet { left: 7cqw; top: 11cqw; width: 58cqw; }
.ab-g3__muster { left: 55cqw; top: 41cqw; width: 39cqw; z-index: 2; }
@media (min-width: 40em) {
  .ab-g3__tablet { left: 17cqw; top: 9.5cqw; width: 42cqw; }   /* Ränder links und rechts je 17cqw */
  .ab-g3__muster { left: 53cqw; top: 31cqw; width: 30cqw; }
}
/* der Entwurf: Spaltenraster in Mint, darüber graue Flächen wie im Kopf unserer Startseite. Kopfleiste, Knöpfe und das
   Google-Abzeichen mit leicht eckigen Ecken wie auf der echten Seite (Joah 22.10.: --r-gruppe 14 px, --r-knopf 10 px), hier
   im Verhältnis zur Höhe in cqw umgerechnet: Leiste und Abzeichen etwa ein Viertel der Höhe, Knopf etwa ein Fünftel, der
   dunkle Knopf in der Leiste konzentrisch (Ecke der Leiste minus Abstand). */
.ab-wf { position: absolute; inset: 0; container-type: inline-size; background: #F7F7F4; }
.ab-wf i, .ab-wf b { display: block; }
.ab-wf__raster { position: absolute; inset: 0 4.5cqw; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 3cqw; }
.ab-wf__raster i { background: rgba(18, 22, 21, .045); }
.ab-wf__kopf { position: absolute; left: 4.5cqw; right: 4.5cqw; top: 4.2cqw; display: flex; align-items: center; height: 7cqw; }
.ab-wf__logo { width: 4.6cqw; height: 4.6cqw; border-radius: 1cqw; background: #2C3231; }
.ab-wf__marke { width: 22cqw; height: 1.9cqw; margin-left: 1.8cqw; border-radius: 1cqw; background: #A2A8A6; }
.ab-wf__pille {
  position: relative; width: 38cqw; height: 7cqw; margin-left: auto; border-radius: 1.7cqw; background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 22, 21, .12);
}
.ab-wf__pille b { position: absolute; left: .9cqw; top: .9cqw; bottom: .9cqw; width: 23cqw; border-radius: .8cqw; background: #2C3231; }
.ab-wf__tafel { position: absolute; left: 0; right: 0; top: 40cqw; display: grid; justify-items: center; row-gap: 3.6cqw; }
.ab-wf__tafel i { width: 76cqw; height: 6cqw; border-radius: .6cqw; background: #3A4140; }
.ab-wf__tafel i:nth-child(2) { width: 68cqw; }
.ab-wf__tafel .ab-wf__unter { width: 62cqw; height: 1.7cqw; margin-top: 2.2cqw; background: #8F9694; }
.ab-wf__unten { position: absolute; left: 4.5cqw; bottom: 10cqw; width: 70cqw; display: grid; justify-items: start; row-gap: 2cqw; }
.ab-wf__h { width: 50cqw; height: 2.8cqw; border-radius: .5cqw; background: #3D4442; }
.ab-wf__h--2 { width: 58cqw; margin-bottom: 1.4cqw; }
.ab-wf__z { width: 70cqw; height: 1.7cqw; border-radius: 1cqw; background: #B3B8B6; }
.ab-wf__z--2 { width: 54cqw; margin-bottom: 1.8cqw; }
.ab-wf__google { width: 40cqw; height: 6.4cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(18, 22, 21, .16); }
.ab-wf__knopf { width: 38cqw; height: 7.4cqw; margin-top: 1cqw; border-radius: 1.4cqw; background: var(--kobalt); }
/* Musterblatt: unsere zwei Schriften (Tafel und Atkinson) und unsere Farben */
.ab-muster { display: grid; gap: 4cqw; padding: 5cqw 5.4cqw 5.6cqw; border-radius: 1.2cqw; }
.ab-muster__schrift { display: flex; align-items: baseline; gap: .06em; font-size: 17cqw; line-height: .8; color: var(--tinte); }
.ab-muster__tafel { font-family: var(--f-tafel); }
.ab-muster__text { font-family: var(--f-text); font-weight: 500; }
.ab-muster__farben { display: flex; gap: 1.8cqw; padding-top: 4cqw; border-top: 1px solid var(--linie-2); }
.ab-muster__farbe { display: block; flex: none; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 22, 21, .14); }
.ab-muster__farbe--papier { background: var(--papier); }
.ab-muster__farbe--tinte { background: var(--tinte); }
.ab-muster__farbe--gruen { background: var(--kobalt); }
.ab-muster__farbe--mint { background: var(--mint); }
@media (min-width: 40em) {
  .ab-muster { gap: 2.8cqw; padding: 3.6cqw 3.8cqw 4cqw; border-radius: .9cqw; }
  .ab-muster__schrift { font-size: 12.5cqw; }
  .ab-muster__farben { gap: 1.3cqw; padding-top: 2.8cqw; }
  .ab-muster__farbe { width: 4.2cqw; height: 4.2cqw; }
}

/* ---------- 4 Aufbau: der Laptop allein, ganz zu sehen und mittig, mit „Alles aus einer Hand“ ----------
   Höhe des Laptops etwa 0,59 × Breite (Deckel 0,5675, Fuß 0,025). Mobil ist das Bild ohne Fläche nur so hoch wie der
   Laptop plus etwa 10cqw Luft oben und 12cqw unten (für den Schatten), sonst stünde eine leere Lücke über dem Gerät. */
.ab-g4__laptop { left: 4cqw; bottom: 12cqw; width: 92cqw; }
@media (max-width: 39.99em) {
  .ab-bild--aufbau .ab-bild__flaeche { aspect-ratio: 100 / 76; }
}
@media (min-width: 40em) {
  .ab-g4__laptop { left: 8cqw; bottom: 12.5cqw; width: 84cqw; }
}

/* ---------- 5 Abnahme: Tablet quer und Handy nebeneinander auf einer Linie, das Tablet mit dem Kopf von „Über uns“,
   das Handy mit der Vorstellung von Joah und Liam ----------
   Das Tablet quer: Bildschirm 1112 zu 834 (Aufnahme 1112x834), Rand und Ecken auf die größere Breite umgerechnet
   (wie das Tablet in Schritt 3, nur gedreht). Höhe Tablet etwa 0,76 × Breite, Handy etwa 2,09 × Breite. Mobil wie
   Schritt 4: das Bild nur so hoch wie das Handy plus etwa 10cqw Luft oben und 12cqw unten. */
.ab-quer .gr-tablet__rahmen { padding: 2.55cqw; border-radius: 4.65cqw; }
.ab-quer .gr-tablet__schirm { aspect-ratio: 1112 / 834; border-radius: 1.95cqw; }
.ab-g5__tablet { left: 4cqw; bottom: 12cqw; width: 62cqw; }
.ab-g5__handy { left: 69cqw; bottom: 12cqw; width: 27cqw; }
@media (max-width: 39.99em) {
  .ab-bild--abnahme .ab-bild__flaeche { aspect-ratio: 100 / 78; }
}
@media (min-width: 40em) {
  .ab-g5__tablet { left: 9cqw; bottom: 14.5cqw; width: 60cqw; }
  .ab-g5__handy { left: 72cqw; bottom: 14.5cqw; width: 19cqw; }
}

/* ---------- Abschluss: Knöpfe. Der WhatsApp-Knopf bricht auf schmalen Handys um; dann in zwei gleich lange Zeilen ---------- */
.ab-danach .knopf__text { text-wrap: balance; }
.ab-schritt__absatz strong { font-weight: 650; color: var(--tinte); }

/* Bewegung macht 38-ablauf.js (GSAP, nur Deckkraft und Lage, keine Unschärfe, nur ohne reduzierte Bewegung) */

/* 48-ueber-kontakt.css */
/* ==========================================================================
   Über uns (ue-) und Kontakt (eg-), Joah 16.10.2026:
   Über uns: Bühne wie der Start (derselbe Blätterschatten-Film über die ganze Breite, heller Schleier, groß die Tafel),
   wir zwei mit Porträt-Platzhalter. Kontakt: Standard-Formular auf weißem Blatt (Textrunde 17.10.2026: kein Brief mit Lücken mehr),
   dazu die Wahl „bei WhatsApp schreiben“. Runde 22.10.2026: Formular nach dem Ablauf von talvesa.de/kontakt in unserem Design
   (Wahl-Kacheln, Budget-Regler, Rückruf, Einwilligung, Ideen-Karte aus der Vorschau), Ecken leicht eckig (--r-knopf, --r-klein,
   --r-gruppe). Lädt nach 45-pb.css und überschreibt dort die alten ue-/eg-Regeln; 55/60/90 laden danach.
   ========================================================================== */

/* ---------- Über uns · Bühne ---------- */
.ue-buehne {
  position: relative; height: 100svh; min-height: 38rem;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: radial-gradient(130% 85% at 50% 38%, #FBFAF7 0, var(--papier) 55%, #E9E7E0 100%);
  overflow: clip;
}
.ue-buehne__film { position: absolute; inset: 0; z-index: 0; }
.ue-buehne__film .film { position: absolute; inset: 0; background: #EEECE6; }
/* derselbe helle Schleier wie im Start: oben fast frei, unten heller für Überschrift und Text */
.ue-buehne__film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 242, 238, .3) 0%, rgba(243, 242, 238, .22) 35%, rgba(243, 242, 238, .6) 72%, rgba(243, 242, 238, .9) 100%);
}
/* Pause nur für Tastatur sichtbar (WCAG 2.2.2), sonst ruhiges Bild ohne Knopf */
.ue-buehne__film .film__pause { top: calc(var(--kopf-h) + .6rem); right: var(--rand); bottom: auto; z-index: 3; opacity: 0; pointer-events: none; }
.ue-buehne__film .film__pause:focus-visible { opacity: 1; pointer-events: auto; }

.ue-buehne__feld { position: relative; z-index: 1; container-type: size; margin-top: var(--kopf-h); }
/* „Wer sind wir?“ groß in der Tafel-Schrift, mittig, immer einzeilig; Größe nach Breite und Höhe der freien Fläche
   (Zeile mit Sperrung etwa 8,2 em breit: am Desktop rund 86 % der Breite, auf sehr breiten Bildschirmen höchstens so
   breit wie die Inhaltsspalte; am Handy genau so breit wie die Textspalte darunter). padding-left gleicht die Sperrung hinter dem letzten Buchstaben aus.
   Beim Laden stellt sich die Tafel scharf (CSS, ohne Sperrungs-Animation, damit nichts springt). */
.ue-buehne__tafel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 0 .12em;
  font-size: min(10.4cqw, 28cqh, calc(min(100cqw - 2 * var(--rand), var(--max)) / 8.2)); line-height: 1; letter-spacing: .12em;
  white-space: nowrap; color: var(--tinte); user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ue-buehne__tafel { animation: ue-scharf 1.6s var(--ease-out) .1s both; }
}
@keyframes ue-scharf { from { filter: blur(14px); opacity: .25; } to { filter: blur(0); opacity: 1; } }
.ue-buehne__text {
  position: relative; z-index: 2;
  display: grid; gap: 1.4rem 3rem; align-items: end;
  /* unten Platz für den dauerhaften WhatsApp-Knopf (rund 60 px hoch, 1 rem vom Rand): Hinweis und Knopf bleiben frei */
  padding-block: clamp(1.2rem, 3vh, 2.4rem) max(clamp(1.6rem, 4.5vh, 3.2rem), 5.6rem);
}
.ue-buehne .ue-buehne__h1 { font-size: clamp(1.2rem, .85rem + 1.15vw, 1.95rem); line-height: 1.22; letter-spacing: .07em; max-width: 24ch; }
.ue-buehne__lead { margin-top: .85rem; max-width: 36em; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.ue-buehne__rechts { display: grid; gap: .75rem; justify-items: start; }
.ue-buehne__hinweis { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--tinte-2); }
.ue-buehne__punkt { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(124, 203, 174, .22); }
@media (min-width: 64em) {
  .ue-buehne__text { grid-template-columns: minmax(0, 1.3fr) auto; }
  .ue-buehne__rechts { justify-items: end; }
}
@media (max-width: 47.99em) {
  .ue-buehne { min-height: 40rem; }
  .ue-buehne__tafel { font-size: min(calc((100cqw - 2 * var(--rand)) / 8.2), 26cqh); }
  .ue-buehne__text { gap: 1.2rem; }
}

/* ---------- Über uns · wir zwei: Porträt-Platzhalter, darunter Rolle, Name, Text ---------- */
.ue-wir__liste { display: grid; gap: clamp(3.5rem, 8vw, 5rem) var(--spalt); }
.ue-person { display: grid; gap: .85rem; align-content: start; padding-top: 0; border-top: 0; container-type: inline-size; }
.ue-person__bild {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; max-width: 18rem;
  margin-bottom: .75rem; background: var(--papier-2);
}
.ue-person__silhouette { position: absolute; inset: 0; width: 100%; height: 100%; fill: #CAD3CE; }
/* Name immer in einer Zeile, so breit wie die Spalte es erlaubt (beide Namen gleich groß) */
.ue-person__name { font-size: clamp(1.6rem, 12.2cqi, 3.2rem); letter-spacing: .1em; line-height: 1.05; overflow-wrap: normal; text-wrap: balance; }
/* einspaltig (Handy): Bild höchstens 18rem, Text höchstens 26rem, damit beide zusammen ein ruhiger Block bleiben */
.ue-person__text { max-width: 26rem; }
@media (min-width: 40em) {
  .ue-wir__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-person__bild { max-width: none; }
  .ue-person__text { max-width: 34em; }
}
@media (min-width: 64em) {
  .ue-wir__liste { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ue-person { grid-column: 1 / span 4; }
  .ue-person + .ue-person { grid-column: 7 / span 4; }
}

/* ---------- Über uns · Warum es uns gibt: dunkle Bühne, links unser Zeichen, rechts die Geschichte in drei Kapiteln ----------
   Überschrift und große Zeile kommen aus 55/90 (at-ich); hier nur das, was die längere Erzählung braucht: je Kapitel eine
   feine Linie, Tafel-Überschrift in Mint, Fließtext gut lesbar (hell auf Nacht, rund 62 Zeichen je Zeile).
   Selektoren mit .ue-warum, damit sie die später geladenen Größen aus 55 und 90 sicher überstimmen. */
.ue-warum .at-ich__auftakt { max-width: none; }   /* jeder Satz eine Zeile (<br>), nur am schmalen Handy bricht er um */
/* kleine Handys: so groß, dass der längste Satz („Ohne überteuerte Preise.“) noch in eine Zeile passt (360 px: 5,9 vw) */
@media (max-width: 26em) { .ue-warum .at-ich__auftakt { font-size: min(1.45rem, 5.9vw); } }
/* Das Zeichen hat im Rahmen (viewBox 300 × 304) rund 25 Einheiten Leerraum links; ihn ausgleichen (25 von 300 = 8,33 % der
   Zeichenbreite), damit die sichtbare Form mit der Überschrift darüber fluchtet */
.ue-warum__zeichen { --zw: clamp(7rem, 22vw, 15rem); }
.ue-warum__logo { width: var(--zw); margin-left: calc(var(--zw) * -.0833); }
.ue-geschichte__text { display: grid; gap: clamp(2.2rem, 5vw, 3.2rem); }
.ue-kapitel { padding-top: 1.35rem; border-top: 1px solid var(--linie-nacht); }
.ue-warum .ue-kapitel__titel {
  margin-bottom: 1.1rem;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: .08em; line-height: 1.25; color: var(--mint-hell);
}
.ue-kapitel p { max-width: 36em; font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem); line-height: 1.65; color: #CDD4D0; text-wrap: pretty; }
.ue-kapitel p + p { margin-top: 1em; }
.ue-geschichte .at-ich__name { margin-top: clamp(2.2rem, 5vw, 3.2rem); }

/* ---------- Kontakt · Einleitung links, das Formular rechts ---------- */
/* Tafel „Kontakt“ immer einzeilig: Größe nach der Spaltenbreite (KONTAKT mit Sperrung etwa 5,8 em breit).
   Stellt sich beim Laden per CSS scharf, ohne Sperrungs-Animation; Sperrung überall .12em wie ohne Bewegung. */
.eg-kopf__text { container-type: inline-size; }
.eg-kopf .eg-kopf__tafel { font-size: min(clamp(3rem, 1rem + 9.5vw, 10.5rem), 18cqi); white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 64em) { .eg-kopf .eg-kopf__tafel { font-size: min(clamp(3rem, 1rem + 6vw, 8rem), 18cqi); } }
@media (prefers-reduced-motion: no-preference) {
  .eg-kopf__tafel { animation: ue-scharf 1.6s var(--ease-out) .1s both; }
}
/* Sprungziel /erstgespraech/#anfrage (aus der Vorschau): das Blatt steht knapp unter dem Kopf */
.eg-brief { grid-column: 1 / -1; position: relative; scroll-margin-top: calc(var(--kopf-h) + 1rem); }
@media (min-width: 64em) { .eg-brief { grid-column: 7 / -1; } }
.eg-brief__blatt {
  position: relative;
  padding: clamp(1.3rem, 3.2vw, 2.9rem) clamp(1.15rem, 3.2vw, 2.9rem) clamp(1.4rem, 3vw, 2.5rem);
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 0 0 1px var(--linie-2), 0 34px 60px -46px rgba(15, 19, 18, .42);
}
.eg-brief__blatt ::selection { background: var(--mint-hell); }

/* Die Wahl „bei WhatsApp schreiben“ unter der Einleitung: unser bevorzugter Weg, ruhig auf mintfarbener Fläche
   (Behälter um einen Knopf: Ecke --r-gruppe) */
.eg-kopf__text .skopf__lead { max-width: 30em; }
.eg-wa {
  display: grid; gap: .55rem; justify-items: start;
  max-width: 31rem; margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  padding: clamp(1.15rem, 2.6vw, 1.6rem); border-radius: var(--r-gruppe); background: var(--glas);
}
.eg-wa__titel { font-size: .92rem; letter-spacing: .18em; line-height: 1.3; color: var(--kobalt); }
.eg-wa__text { font-size: 1.05rem; line-height: 1.45; color: var(--tinte); }
.eg-wa__knopf { max-width: 100%; margin-top: .35rem; }
.eg-wa__knopf .knopf { max-width: 100%; white-space: normal; text-align: left; padding-block: .7rem; }
/* umbrochener Text: Zeichen und Pfeil halten Abstand zur Kante (Luft dafür in 35-whatsapp.css, .knopf--wa .knopf__aktiv) */
.eg-wa__klein { font-size: .88rem; line-height: 1.45; color: var(--tinte-2); }
.eg-wa__klein a { color: var(--kobalt); }

/* Blattkopf: „Ihre Anfrage“ links, unser Zeichen rechts, feine Linie darunter; darunter ein Satz zu den Pflichtfeldern */
.eg-brief__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--linie);
}
.eg-brief__titel { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: .14em; line-height: 1.2; color: var(--kobalt); }
.eg-brief__zeichen { width: 34px; height: auto; flex: none; color: var(--tinte); --logo-b: var(--kobalt); }
.eg-brief__intro { max-width: 34em; font-size: .95rem; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }

/* ---------- Formular: Abschnitte und Fragen ----------
   Ein Muster für jede Frage: Titel (fett, etwas größer), darunter die Antwort. Zwei Abschnitte, getrennt von einer feinen Linie:
   das Vorhaben (Worum, Budget, Wann, Nachricht) und „Wie erreichen wir Sie?“; danach Einwilligung und Knopf.
   fieldset ohne Rahmen; die Legende schwebt (float), damit sie sich wie eine normale Zeile verhält und Abstände greifen. */
.eg-brief fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.eg-brief legend { float: left; width: 100%; padding: 0; }
.eg-brief legend + * { clear: both; }
.eg-teil { display: grid; gap: clamp(1.7rem, 3.6vw, 2.2rem); margin-top: clamp(1.6rem, 3.4vw, 2.1rem); }
.eg-brief .eg-teil--kontakt { display: block; margin-top: clamp(1.9rem, 4vw, 2.5rem); padding-top: clamp(1.6rem, 3.4vw, 2.1rem); border-top: 1px solid var(--linie-2); }
.eg-frage { min-width: 0; }
.eg-frage__titel { display: block; margin-bottom: .75rem; font-size: 1.06rem; font-weight: 650; line-height: 1.3; color: var(--tinte); }
.eg-frage.eg-feld { gap: 0; }
.eg-frage.eg-feld .eg-feld__fehler { margin-top: .4rem; }
.eg-pflicht { margin-left: .1em; color: var(--kobalt); font-weight: 650; }

/* Felder: Beschriftung sichtbar darüber, Fehlermeldung direkt darunter. Je zwei nebeneinander, sobald die Spalte breit genug
   ist, sonst untereinander (flex-wrap, keine Abfrage nötig). Ecken der Eingaben --r-klein. */
.eg-felder { display: flex; flex-wrap: wrap; gap: 1.15rem 1rem; }
.eg-brief { --feld-rand: #7F8683; --kachel-rand: rgba(18, 22, 21, .2); --rot: #B3261E; }
.eg-feld { flex: 1 1 100%; display: grid; gap: .4rem; align-content: start; min-width: 0; }
.eg-feld--halb { flex-basis: 13.5rem; }
.eg-feld__label { font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--tinte); cursor: pointer; }
.eg-brief .eg-feld__eingabe {
  display: block; width: 100%; min-height: 50px; padding: .7rem .9rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--tinte);
  background: #fff; border: 1px solid var(--feld-rand); border-radius: var(--r-klein);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.eg-brief .eg-feld__eingabe::placeholder { color: #6B7370; opacity: 1; }
.eg-brief .eg-feld__eingabe:focus-visible { border-color: var(--kobalt); outline: none; box-shadow: 0 0 0 3px rgba(29, 91, 77, .2); }
@media (hover: hover) and (pointer: fine) { .eg-brief .eg-feld__eingabe:hover { border-color: var(--tinte); } }
.eg-brief textarea.eg-feld__eingabe { min-height: 9rem; resize: vertical; line-height: 1.5; }
.eg-brief .eg-feld__eingabe[aria-invalid="true"] { border-color: var(--rot); background: #FBEFED; }
.eg-brief .eg-feld__eingabe[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }
.eg-feld__fehler { font-size: .9rem; font-weight: 650; line-height: 1.35; color: var(--rot); }
.eg-feld__fehler[hidden] { display: none; }
.eg-brief :is(.eg-feld__eingabe, .eg-kachel__eingabe, .eg-haken__feld, .eg-budget__regler) { scroll-margin-top: calc(var(--kopf-h) + 2.5rem); }

/* ---------- Wahl-Kacheln (Worum geht es? Wann soll es losgehen?) ----------
   Echte Radio-Schaltflächen, unsichtbar über der ganzen Kachel (die ganze Fläche ist die Klickfläche, Pfeiltasten wechseln).
   Ruhe: weiße Kachel mit feiner Kante, runder Punkt. Gewählt: Kante und Punkt in Grün, Fläche zartes Mint. Fokus: Ring um
   die Kachel. Der Punkt bleibt rund (kein Knopf). Ohne :has() zeigt der Punkt allein die Wahl. */
/* beide Gruppen im selben Raster: drei Spalten, sobald die Spalte breit genug ist (die Kacheln stehen genau übereinander),
   sonst eine Liste untereinander, nie zwei plus eine einzelne */
.eg-wahl { container-type: inline-size; }
.eg-wahl__liste { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 32rem) { .eg-wahl__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eg-kachel {
  position: relative; display: flex; align-items: flex-start; gap: .6rem;
  min-height: 52px; padding: .85rem .8rem .9rem .8rem; border-radius: var(--r-klein);
  background: #fff; box-shadow: inset 0 0 0 1px var(--kachel-rand);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.eg-wahl--knapp .eg-kachel { align-items: center; padding-block: .75rem; }
.eg-kachel__eingabe {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.eg-kachel__punkt {
  flex: none; width: 19px; height: 19px; margin-top: .05rem; border-radius: 50%;
  border: 1.5px solid var(--feld-rand); background: #fff;
  transition: border-width .18s var(--ease-out), border-color .18s var(--ease-out);
}
.eg-wahl--knapp .eg-kachel__punkt { margin-top: 0; }
.eg-kachel__text { display: grid; gap: .15rem; min-width: 0; }
.eg-kachel__titel { font-size: 1rem; font-weight: 650; line-height: 1.3; color: var(--tinte); }
.eg-kachel__unter { font-size: .9rem; line-height: 1.35; color: var(--tinte-2); text-wrap: pretty; }
.eg-kachel__eingabe:checked + .eg-kachel__punkt { border: 6px solid var(--kobalt); }
.eg-kachel:has(.eg-kachel__eingabe:checked) { background: #F0F7F4; box-shadow: inset 0 0 0 1.5px var(--kobalt); }
.eg-kachel:has(.eg-kachel__eingabe:focus-visible) { outline: 2px solid var(--kobalt); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .eg-kachel:hover { box-shadow: inset 0 0 0 1px var(--tinte-2); }
  .eg-kachel:hover .eg-kachel__punkt { border-color: var(--tinte-2); }
  .eg-kachel:has(.eg-kachel__eingabe:checked):hover { box-shadow: inset 0 0 0 1.5px var(--kobalt); }
  .eg-kachel:hover .eg-kachel__eingabe:checked + .eg-kachel__punkt { border-color: var(--kobalt); }
}
@media (prefers-reduced-motion: no-preference) {
  .eg-kachel { transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out), scale .16s var(--ease-out); }
  .eg-kachel:active { scale: .985; }
}

/* ---------- Budget: ein Regler von 499 bis 1.999 € (100er-Schritte) ----------
   Gestaltet wie die Preislinie der Seite „Preise“: feine Spur, grüne Füllung bis zum Griff, runder weißer Griff mit grünem
   Ring und mintfarbenem Hof. Solange nichts gewählt ist: Griff neutral grau, keine Füllung, „Noch nicht angegeben“.
   Der Wert steht groß in der Tafel-Schrift darüber. --p (0 bis 1) setzt 70-formular.js per setProperty. 44 px hohe
   Fläche zum Greifen; darunter 16 feine Striche, je einer pro Stufe (unter dem Griff verdeckt). */
.no-js .eg-budget { display: none; }
.eg-budget { --daumen: 28px; }
.eg-budget .eg-frage__titel { margin-bottom: .2rem; }
.eg-budget__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 2.75rem; }
.eg-budget__wert { font-size: 1rem; line-height: 1.3; color: var(--tinte-2); }
.eg-budget__zahl { font-family: var(--f-tafel); font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); letter-spacing: .06em; line-height: 1.1; color: var(--kobalt); font-variant-numeric: tabular-nums; }
.eg-budget__mehr { margin-left: .1em; font-size: 1rem; font-weight: 600; color: var(--kobalt); }
.eg-budget__zurueck {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; margin-right: -.2rem;
  border: 0; background: none; cursor: pointer;
  font-size: .92rem; font-weight: 600; color: var(--kobalt);
  text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .22em;
}
.eg-budget__zurueck[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .eg-budget__zurueck:hover { color: var(--kobalt-tief); } }

.eg-budget__bahn { position: relative; }
.eg-budget__regler {
  --p: 0;
  display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
}
.eg-budget__regler:focus-visible { outline: none; }
/* Spur und Füllung (Chrome, Safari, Edge): die Füllung reicht genau bis zur Mitte des Griffs */
.eg-budget__regler::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: rgba(18, 22, 21, .12);
}
.eg-budget.ist-gesetzt .eg-budget__regler::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, var(--kobalt) 0%, var(--mint) 100%) 0 0 / calc(var(--daumen) / 2 + var(--p) * (100% - var(--daumen))) 100% no-repeat,
    rgba(18, 22, 21, .12);
}
.eg-budget__regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--daumen); height: var(--daumen); margin-top: calc((6px - var(--daumen)) / 2);
  border-radius: 50%; border: 2px solid var(--feld-rand); background: var(--weiss);
  box-shadow: 0 1px 3px rgba(15, 19, 18, .2);
  transition: border-width .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .25s var(--ease-out);
}
.eg-budget.ist-gesetzt .eg-budget__regler::-webkit-slider-thumb { border: 6px solid var(--kobalt); box-shadow: 0 0 0 6px rgba(124, 203, 174, .3); }
.eg-budget.ist-gesetzt .eg-budget__regler:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(124, 203, 174, .34); }
.eg-budget__regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt); }
/* Firefox */
.eg-budget__regler::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(18, 22, 21, .12); }
.eg-budget__regler::-moz-range-progress { height: 6px; border-radius: 3px; background: transparent; }
.eg-budget.ist-gesetzt .eg-budget__regler::-moz-range-progress { background: linear-gradient(90deg, var(--kobalt) 0%, var(--mint) 100%); }
.eg-budget__regler::-moz-range-thumb {
  box-sizing: border-box; width: var(--daumen); height: var(--daumen);
  border-radius: 50%; border: 2px solid var(--feld-rand); background: var(--weiss);
  box-shadow: 0 1px 3px rgba(15, 19, 18, .2);
  transition: border-width .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .25s var(--ease-out);
}
.eg-budget.ist-gesetzt .eg-budget__regler::-moz-range-thumb { border: 6px solid var(--kobalt); box-shadow: 0 0 0 6px rgba(124, 203, 174, .3); }
.eg-budget__regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt); }
/* Fokus mit gesetztem Budget: Ring plus Hof (gleiche Spezifität wie :active, steht danach und gewinnt) */
.eg-budget.ist-gesetzt .eg-budget__regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt), 0 0 0 10px rgba(124, 203, 174, .3); }
.eg-budget.ist-gesetzt .eg-budget__regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--kobalt), 0 0 0 10px rgba(124, 203, 174, .3); }
/* Striche: von Griffmitte zu Griffmitte, je einer pro Stufe */
.eg-budget__striche {
  position: absolute; left: calc(var(--daumen) / 2); right: calc(var(--daumen) / 2); top: calc(50% + 7px); height: 5px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.eg-budget__striche i { width: 1px; height: 100%; background: rgba(18, 22, 21, .22); }
.eg-budget__enden { display: flex; justify-content: space-between; gap: 1rem; margin-top: .1rem; font-size: .88rem; line-height: 1.35; color: var(--tinte-2); }
.eg-budget__enden span:last-child { text-align: right; }
.eg-budget__hinweis {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r-klein); background: var(--papier);
  font-size: .92rem; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .eg-budget__regler::-webkit-slider-thumb { transition: none; }
  .eg-budget__regler::-moz-range-thumb { transition: none; }
}
@media (forced-colors: active) {
  .eg-budget__regler { -webkit-appearance: auto; appearance: auto; }
  .eg-budget__regler::-webkit-slider-thumb { -webkit-appearance: auto; appearance: auto; }
  .eg-budget__striche { display: none; }
}

/* ---------- Häkchen (Rückruf, Einwilligung) ----------
   Eigenes Kästchen (24 px, leicht eckig), gewählt grün mit weißem Haken. Die Beschriftung reicht per ::after über die ganze
   Zeile: Klick auf Text oder Fläche setzt den Haken; Links darin liegen darüber und bleiben klickbar. */
.eg-haken { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; }
.eg-haken__feld {
  position: relative; z-index: 1; flex: none;
  display: grid; place-content: center; width: 24px; height: 24px; margin: 0;
  border: 1.5px solid var(--feld-rand); border-radius: 6px; background: #fff; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.eg-haken__feld::before {
  content: ""; width: 13px; height: 13px; background: #fff;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
  transform: scale(0); transition: transform .18s var(--ease-out);
}
.eg-haken__feld:checked { background: var(--kobalt); border-color: var(--kobalt); }
.eg-haken__feld:checked::before { transform: scale(1); }
.eg-haken__feld:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; border-radius: 6px; }
.eg-haken__feld[aria-invalid="true"] { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
@media (hover: hover) and (pointer: fine) { .eg-haken:hover .eg-haken__feld:not(:checked) { border-color: var(--tinte); } }
.eg-haken__text { min-width: 0; padding-top: .1rem; }
.eg-haken__label { font-weight: 650; line-height: 1.4; color: var(--tinte); cursor: pointer; }
.eg-haken__label::after { content: ""; position: absolute; inset: -.4rem; }
.eg-haken__klein { margin-top: .2rem; font-size: .92rem; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.eg-haken__label--fliess { font-weight: 400; line-height: 1.5; }
.eg-haken__mehr { display: block; margin-top: .15rem; line-height: 1.5; color: var(--tinte-2); }
.eg-haken__mehr a { position: relative; z-index: 1; color: var(--kobalt); }
.eg-haken .eg-feld__fehler { position: relative; z-index: 1; margin-top: .45rem; }
@media (prefers-reduced-motion: reduce) { .eg-haken__feld, .eg-haken__feld::before { transition: none; } }
@media (forced-colors: active) { .eg-haken__feld { -webkit-appearance: auto; appearance: auto; } .eg-haken__feld::before { display: none; } }

/* Rückruf: kleine Fläche wie im Papier; mit Haken (ist-an) erscheint darunter die Telefonnummer. Ohne JavaScript steht sie
   immer da (freiwillig, ohne Stern). */
.eg-rueckruf { margin-top: 1.4rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-gruppe); background: var(--papier); }
.eg-rueckruf__tel { margin-top: 1rem; padding-left: calc(24px + .85rem); }
.js .eg-rueckruf:not(.ist-an) .eg-rueckruf__tel { display: none; }
.no-js .eg-pflicht--rueckruf { display: none; }
.eg-feld__nojs { font-weight: 400; color: var(--tinte-2); }
.js .eg-feld__nojs { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .eg-rueckruf.ist-an .eg-rueckruf__tel { animation: eg-auf .32s var(--ease-out) both; }
}
@keyframes eg-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 26em) { .eg-rueckruf__tel { padding-left: 0; } }

/* Einwilligung: eigene Zeile über dem Knopf, durch eine feine Linie abgesetzt */
.eg-einwilligung { margin-top: clamp(1.6rem, 3.4vw, 2.1rem); padding-top: clamp(1.4rem, 3vw, 1.8rem); border-top: 1px solid var(--linie-2); }

/* ---------- Ideen-Karte aus der Vorschau (sessionStorage „pb_idee“): kleines Fenster im gewählten Stil, Text, Entfernen ---------- */
.eg-idee {
  --idee-grund: #FDFDFB; --idee-strich: rgba(18, 22, 21, .55); --idee-strich-2: rgba(18, 22, 21, .2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  margin-top: 1.25rem; padding: .65rem .45rem .65rem .8rem; border-radius: var(--r-gruppe); background: var(--glas);
}
.eg-idee[hidden] { display: none; }
.eg-idee[data-stil="warm"] { --idee-grund: #EFE6D6; --idee-strich: rgba(60, 44, 28, .6); --idee-strich-2: rgba(60, 44, 28, .22); }
.eg-idee[data-stil="dunkel"] { --idee-grund: #161A19; --idee-strich: rgba(238, 240, 236, .8); --idee-strich-2: rgba(238, 240, 236, .28); }
.eg-idee[data-stil="farbig"] { --idee-strich: rgba(255, 255, 255, .85); --idee-strich-2: rgba(255, 255, 255, .35); }
.eg-idee__muster {
  position: relative; width: 48px; height: 36px; border-radius: 5px; overflow: hidden;
  background: var(--idee-grund); box-shadow: inset 0 0 0 1px rgba(18, 22, 21, .16), 0 1px 2px rgba(15, 19, 18, .12);
}
.eg-idee__muster span {
  position: absolute; left: 7px; top: 9px; width: 22px; height: 4px; border-radius: 2px; background: var(--idee-strich);
  box-shadow: 0 8px 0 0 var(--idee-strich-2), 10px 8px 0 0 var(--idee-strich-2), 0 15px 0 0 var(--idee-strich-2);
}
.eg-idee__text { min-width: 0; line-height: 1.35; }
.eg-idee__titel { display: block; font-size: .85rem; color: var(--tinte-2); }
.eg-idee__wert { display: block; font-weight: 650; color: var(--tinte); overflow-wrap: anywhere; }
.eg-idee__weg {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-klein); background: transparent; color: var(--tinte-2); cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.eg-idee__weg svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .eg-idee__weg:hover { background: rgba(18, 22, 21, .07); color: var(--tinte); } }
.eg-idee__weg:focus-visible { outline-offset: -2px; border-radius: var(--r-klein); }
@media (prefers-reduced-motion: no-preference) { .eg-idee:not([hidden]) { animation: eg-auf .45s var(--ease-out) both; } }

/* Knopf und Antwortzeit: „Kostenlos und unverbindlich. Wir melden uns innerhalb von 24 Stunden.“ neben dem Knopf
   (darunter, wenn es eng wird) */
.eg-brief__schluss { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: clamp(1.4rem, 3vw, 1.8rem); }
.eg-brief__antwort { flex: 1 1 13rem; font-size: .95rem; line-height: 1.45; color: var(--tinte-2); text-wrap: pretty; }
.eg-brief button.knopf { border: 0; cursor: pointer; }
.eg-brief .knopf[disabled] { opacity: .6; cursor: progress; }

/* Hinweis „Erst bauen, dann zahlen“: sichtbar, aber ruhig, auf mintfarbener Fläche */
.eg-brief__vorab {
  display: grid; gap: .4rem; margin-top: clamp(1.4rem, 3vw, 1.9rem); padding: 1rem 1.2rem 1.1rem;
  border-radius: var(--r-gruppe); background: var(--glas);
}
.eg-brief__vorab-titel { font-size: .82rem; letter-spacing: .18em; line-height: 1.3; color: var(--kobalt-tief); }
.eg-brief__vorab p:not(.eg-brief__vorab-titel) { font-size: .98rem; line-height: 1.5; color: var(--tinte); text-wrap: pretty; }

/* Fußnoten im Ton der Seite: Datenschutz, darunter der Vertragssatz */
.eg-brief__datenschutz { margin-top: clamp(1.4rem, 3vw, 1.9rem); padding-top: 1rem; border-top: 1px solid var(--linie-2); font-size: .92rem; line-height: 1.55; }
.eg-brief__datenschutz a { color: var(--kobalt); }
.eg-brief__vertrag { margin-top: .6rem; font-size: .92rem; line-height: 1.55; text-wrap: pretty; }
.eg-brief .formular__meldung:not(:empty) { margin-top: 1rem; }
.eg-brief .formular__meldung a { color: inherit; }
/* Falle für Bots: wie nur-sr unsichtbar im Formular (nicht mehr 9999 px links außerhalb) */
.eg-brief .eg-falle { left: 0; top: 0; }
@media (prefers-reduced-motion: reduce) {
  .eg-brief .eg-feld__eingabe, .eg-kachel, .eg-kachel__punkt, .eg-idee__weg { transition: none; }
}
/* „Wird gesendet“ nur für Screenreader (sichtbar steht es im Knopf) */
.eg-brief .formular__meldung--leise {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (forced-colors: active) {
  .eg-kachel { border: 1px solid CanvasText; }
  .eg-kachel__eingabe:checked + .eg-kachel__punkt { border-color: Highlight; }
}

/* Telefon und E-Mail unter dem Formular: Antippfläche mindestens 44 px hoch (die Datei 60 setzt nur die Schriftgröße;
   der Selektor ist spezifischer, damit er sie sicher überstimmt) */
.ko-wege a.ko-weg__wert { display: inline-flex; align-items: center; min-height: 44px; }
/* Telefon und WhatsApp teilen sich eine Nummer: der Link zum Chat steht ruhig darunter */
.ko-weg__wa { margin-top: .1rem; }

/* Der schwebende WhatsApp-Knopf (global) tritt zurück, solange das Formular hinter seiner Stelle im Bild liegt
   (70-formular.js setzt wa-weicht auf <html>) und solange die Karte nach dem Absenden offen ist: so deckt er weder Felder
   noch die Karte ab und fängt kein Antippen ab. Auf allen anderen Seiten und davor/danach auf dieser Seite bleibt er da. */
.wa-weicht .wa-schwebe,
body:has(.eg-brief[data-karte-offen]) .wa-schwebe { opacity: 0; visibility: hidden; pointer-events: none; translate: 0 12px; }

/* ---------- Kontakt · Karte nach dem Absenden (Joah 16.10.2026: „zu fancy … ganz simpel … in einem matten Liquid-Glas-Ton
   und nicht in diesem Weißen. Das Verschwimmen im Hintergrund finde ich schön.“) ----------
   Das Blatt verschwimmt (Endzustand hier, die Bewegung macht GSAP), darüber eine schlichte Karte aus mattem Milchglas:
   halbtransparentes, leicht grünlich-graues Papier-/Mint-Grau (kein Weiß), Weichzeichner im Hintergrund, feine helle Kante,
   weicher Schatten. Text dunkel (Tinte auf rund #D3E0D8: über 11:1, Nebentext über 6:1, auch über dem verschwommenen Blatt).
   Ohne backdrop-filter oder bei „weniger Transparenz“: gedeckter, matt grüner Grund. Die Karte klebt (sticky) mittig im
   sichtbaren Teil des Blatts; die Höhe unter dem Kopf setzt 70-formular.js als --karte-oben, die größte Höhe als --karte-max.
   Der grüne Knopf „Anfrage senden“ tritt dahinter fast ganz zurück, damit kein zweiter Knopf neben der Karte leuchtet. */
.eg-brief[data-karte-offen] .eg-brief__blatt { filter: blur(8px) saturate(.85); opacity: .5; user-select: none; }
.eg-brief[data-karte-offen] .eg-brief__senden { opacity: .18; }
.eg-karte {
  --glas-matt-oben: rgba(207, 224, 215, .74);
  --glas-matt-unten: rgba(185, 205, 195, .7);
  --glas-matt-fest: #CDDBD3;              /* Rückfall: gedeckter, matt grüner Grund */
  --karte-text-2: #36413D;                /* Nebentext, dunkler als --tinte-2 für sicheren Kontrast auf Glas */
  --karte-flaeche: rgba(255, 255, 255, .3);
  --karte-kante: rgba(255, 255, 255, .42);
  position: absolute; inset: 0; z-index: 3;
  display: grid; justify-items: center; align-items: start;
  padding: .75rem;
}
.eg-karte[hidden], .eg-karte__teil[hidden] { display: none; }
/* Fenster: Form, Milchglas und Schatten. Gescrollt wird nur die Rolle darin und nur, wenn die Karte wirklich nicht ins Bild
   passt (dann setzt 70-formular.js ist-voll, unten blendet der Inhalt weich aus, bis das Ende erreicht ist). Ohne
   overscroll contain und ohne data-lenis-prevent gehen Wischen und Mausrad über der Karte an die Seite weiter. */
.eg-karte__fenster {
  position: sticky; top: var(--karte-oben, calc(var(--kopf-h) + 1rem));
  display: flex; flex-direction: column;
  width: min(100%, 26rem); max-height: var(--karte-max, none); overflow: hidden;
  border-radius: calc(var(--r-gruppe) + 6px);   /* leicht eckig wie die Knöpfe (Joah 22.10.), vorher 26 px */
  background: linear-gradient(160deg, var(--glas-matt-oben) 0%, var(--glas-matt-unten) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    inset 0 0 0 1px var(--karte-kante),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 3px rgba(15, 19, 18, .07),
    0 26px 50px -24px rgba(15, 19, 18, .3);
  text-align: center; color: var(--tinte);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .eg-karte__fenster { background: var(--glas-matt-fest); }
}
/* kommt der Kopf zurück oder geht der Cookie-Hinweis auf, gleitet die offene Karte an ihren neuen Platz */
.eg-karte__fenster.gleitet { transition: top .45s var(--ease-out); }
.eg-karte__rolle {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  padding: clamp(1.6rem, 4.5vw, 2.1rem) clamp(1.25rem, 4vw, 1.9rem) clamp(1.1rem, 3vw, 1.4rem);
}
.eg-karte__fenster.ist-voll:not(.ist-ende) .eg-karte__rolle {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.25rem), rgba(0, 0, 0, .12) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 3.25rem), rgba(0, 0, 0, .12) 100%);
}
/* Das Fenster bekommt den Fokus nur per Skript (Screenreader lesen die Karte vor); keinen zweiten Ring um die Karte
   zeichnen, die Knöpfe und Links darin haben ihre eigenen Fokusringe */
.eg-karte__fenster:focus, .eg-karte__fenster:focus-visible { outline: none; }

/* Zeichen oben: grüner Kreis mit Häkchen (zeichnet sich dezent), neutral und Brief auf hellem Glas */
.eg-karte__marke {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%;
}
.eg-karte__marke svg { width: 100%; height: 100%; }
.eg-karte__marke--gut { background: var(--kobalt); color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .3); }
.eg-karte__marke--neutral { background: rgba(255, 255, 255, .48); color: var(--karte-text-2); }
.eg-karte__marke--mail { background: rgba(255, 255, 255, .48); color: var(--kobalt); }
.eg-karte__strich { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eg-karte__linie { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.eg-karte__titel {
  font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); letter-spacing: .08em; line-height: 1.22;
  color: var(--tinte); text-wrap: balance;
}
.eg-karte__lead { margin: .65rem auto 0; max-width: 30em; font-size: 1rem; line-height: 1.5; color: var(--karte-text-2); text-wrap: balance; }

/* WhatsApp, Telefon und E-Mail als gruppierte Liste auf hellerer Glasfläche */
.eg-karte__wege { margin-top: 1.15rem; padding: .25rem; border-radius: var(--r-gruppe); background: var(--karte-flaeche); box-shadow: inset 0 0 0 1px var(--karte-kante); text-align: left; }
.eg-karte__wege li { position: relative; }
.eg-karte__wege li + li::before { content: ""; position: absolute; top: 0; left: .9rem; right: .9rem; height: 1px; background: rgba(18, 22, 21, .12); }
.eg-karte__weg {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 50px; padding: .6rem .9rem; border-radius: var(--r-knopf);
  text-decoration: none; color: var(--tinte);
  transition: background-color .2s var(--ease-out);
}
.eg-karte__weg-art { font-size: .92rem; color: var(--karte-text-2); }
.eg-karte__weg-wert { font-weight: 650; color: var(--kobalt-tief); text-align: right; overflow-wrap: anywhere; }
.eg-karte__weg:focus-visible { outline-offset: -2px; border-radius: var(--r-knopf); }
@media (hover: hover) and (pointer: fine) { .eg-karte__weg:hover { background: rgba(255, 255, 255, .4); } }

.eg-karte__aktionen { display: grid; justify-items: center; gap: .3rem; margin-top: 1.3rem; }
.eg-karte__aktionen .knopf { width: 100%; }
.eg-karte button.knopf { border: 0; cursor: pointer; }
.eg-karte__link { justify-content: center; color: var(--kobalt-tief); }

/* niedrige Bildschirme (kleine Handys, quer): dichter, damit „Fertig“ ohne Scrollen in der Karte sichtbar bleibt */
@media (max-height: 44em) {
  .eg-karte__rolle { padding-block: 1.25rem 1rem; }
  .eg-karte__marke { width: 46px; height: 46px; margin-bottom: .75rem; }
  .eg-karte__marke--gut { box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }
  .eg-karte__lead { margin-top: .5rem; }
  .eg-karte__wege { margin-top: .9rem; }
  .eg-karte__weg { min-height: 46px; }
  .eg-karte__aktionen { margin-top: 1rem; gap: 0; }
}
/* Handy quer (rund 390 px hoch): Zeichen kleiner, Titel und Wege enger; was dann noch fehlt, scrollt in der Karte */
@media (max-height: 30em) {
  .eg-karte__rolle { padding: 1rem 1.25rem .75rem; }
  .eg-karte__marke { width: 38px; height: 38px; margin-bottom: .5rem; }
  .eg-karte__marke--gut { box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); }
  .eg-karte__titel { font-size: 1.2rem; }
  .eg-karte__lead { margin-top: .35rem; font-size: .95rem; }
  .eg-karte__wege { margin-top: .7rem; }
  .eg-karte__weg { min-height: 44px; padding-block: .45rem; }
  .eg-karte__aktionen { margin-top: .75rem; }
}
/* quer ist Breite da: die Karte wird breiter, Titel und Wege brauchen weniger Zeilen */
@media (max-height: 30em) and (min-width: 40em) {
  .eg-karte__fenster { width: min(100%, 36rem); }
  .eg-karte__aktionen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1.25rem; }
}
/* weniger Transparenz gewünscht: gedeckter, matt grüner Grund statt Milchglas */
@media (prefers-reduced-transparency: reduce) {
  .eg-karte__fenster { background: var(--glas-matt-fest); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .eg-karte__fenster { border: 1px solid CanvasText; }
  .eg-brief[data-karte-offen] .eg-brief__blatt { filter: none; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-karte__weg, .eg-karte__fenster.gleitet { transition: none; }
}

/* 49-einwilligung-pb.css */
/* Einwilligungs-Hinweis in unserer Gestaltung: Papierweiß, Grün als Akzent, Titel in der Tafel-Schrift */
:root {
  --ew-bg: var(--weiss); --ew-fg: var(--tinte); --ew-fg-leise: var(--tinte-2); --ew-linie: var(--linie);
  --ew-flaeche: rgba(29, 91, 77, .06); --ew-akzent: var(--kobalt); --ew-akzent-fg: #fff; --ew-fokus: var(--kobalt);
  --ew-radius: 22px; --ew-schrift: var(--f-text); --ew-z: 9600;
  --ew-knopf-radius: var(--r-klein);   /* Knöpfe leicht eckig wie überall (Joah 22.10.), statt Pille */
}
.ew-titel { font-family: var(--f-tafel); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.ew-logo { width: 34px; height: auto; }
/* Menü offen: Hinweis ausblenden, sonst verdeckt er Menülinks */
html.menue-offen .ew { visibility: hidden; }

/* Touch-Ziele mindestens 44 px. Schalterzeile: die ganze Zeile ist das Label. */
.ew-schalter { min-height: 2.75rem; }
/* Fußlinks und „Schließen“: unsichtbare Trefferfläche von 44 px Höhe, ohne dass der Hinweis höher wird.
   Sie reicht genau bis an die Knöpfe darüber und den Rand darunter, überdeckt also nichts. */
.ew-fuss a,
.ew-schliessen { position: relative; }
.ew-fuss a::after,
.ew-schliessen::after {
  content: "";
  position: absolute;
  left: -.25rem;
  right: -.25rem;
  top: 50%;
  height: 2.75rem;
  margin-top: -1.375rem;
}
@media (max-width: 599px), (max-height: 640px) {
  /* Abstand zu den Knöpfen so groß wie die halbe Trefferfläche (vorher .6rem, die Fläche hätte die Knöpfe berührt) */
  .ew-fuss { margin-top: .875rem !important; }
}

/* Touch-Geräte: kein hängender Hover. Sonst wirkt nach dem Tipp auf „Auswählen“ der Knopf „Auswahl speichern“
   grün hervorgehoben, obwohl die drei Knöpfe gleichwertig sind. */
@media (hover: none) {
  .ew-knopf:hover { background: transparent; border-color: var(--_fg); color: var(--_fg); }
}

/* 50-leistungen.css */
/* ==========================================================================
   Leistungen (/leistungen/), Joah 16.10.2026: ruhig und typografisch, ohne Film, ohne Pinning.
   Kopf: Tafel-Titel „Leistungen“ über die ganze Breite (einzeilig, Größe nach der Spaltenbreite), darunter H1, Einleitung
   und „Auf einen Blick“. Dann ein Block mit Handy-Bildschirmfoto, fünf Leistungen als Zeilen (Titel links, Text rechts,
   je eine feine Linie), Für wen / Was wir brauchen, Preis auf Glas-Mint, „Projekt anfragen“ (Joah 22.10.2026).
   Knöpfe kommen aus 30-bausteine.css (leicht eckig, --r-knopf); hier gibt es keine eigenen runden Knöpfe oder Chips.
   Titel und Zahlen in der Tafel-Schrift, Fließtext in Atkinson. Alle Gerätemaße in cqw (Rahmen aus 46-start.css).
   ========================================================================== */

/* ---------- Kopf ---------- */
.le-kopf { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.le-kopf__huelle { container-type: inline-size; }
/* „LEISTUNGEN“ mit Sperrung ist etwa 6,9 em breit: einzeilig, mit 13,4 cqi füllt es auf jedem Bildschirm rund 92 % der Hülle */
.le-kopf .le-kopf__tafel { font-size: min(13.4cqi, 11rem); white-space: nowrap; overflow-wrap: normal; }
.le-kopf__raster { row-gap: clamp(2.5rem, 6vw, 3.5rem); align-items: end; }
.le-kopf__text { grid-column: 1 / -1; }
.le-kopf .skopf__h1 { font-size: clamp(1.45rem, .95rem + 1.55vw, 2.15rem); max-width: 26ch; hyphens: manual; -webkit-hyphens: manual; }   /* „Kirchzarten“ nie trennen */
.le-kopf__knoepfe { margin-top: clamp(1.4rem, 3vw, 2rem); column-gap: 1.6rem; row-gap: .4rem; }

/* Auf einen Blick: Bezeichnung klein in der Tafel-Schrift, daneben die Angabe, feine Linien */
.le-fakten { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.le-fakten__zeile { display: grid; gap: .3rem 1.2rem; padding-block: clamp(.85rem, 1.6vw, 1.1rem); border-bottom: 1px solid var(--linie); }
.le-fakten__art { font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; line-height: 1.5; color: var(--tinte-2); }
.le-fakten__wert { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.45; font-weight: 560; color: var(--tinte); text-wrap: pretty; }
@media (min-width: 40em) {
  .le-fakten__zeile { grid-template-columns: 6.6rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 64em) {
  .le-kopf__text { grid-column: 1 / span 6; }
  .le-fakten { grid-column: 8 / -1; }
}

/* ---------- Titel und Texte aller Zeilen ---------- */
.le-titel {
  font-family: var(--f-tafel); font-weight: 400; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1.2; color: var(--tinte);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);   /* mobil deutlich über dem Kernsatz (17 px), damit die Überschrift führt */
  text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.le-kern { font-size: clamp(1.06rem, .98rem + .45vw, 1.34rem); line-height: 1.45; font-weight: 560; letter-spacing: -.004em; color: var(--tinte); max-width: 30em; text-wrap: pretty; }
.le-absatz { margin-top: .95rem; max-width: 34em; font-size: clamp(1.04rem, 1rem + .2vw, 1.15rem); line-height: 1.62; color: var(--tinte-2); text-wrap: pretty; }
.le-kern + .le-absatz { margin-top: 1rem; }

/* ---------- Was Ihre Website können soll: Text links, rechts das Handy auf heller Fläche ---------- */
.le-eins { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 9vw, 7.5rem); }
.le-eins__raster { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 5vw, 2.75rem); align-items: center; }
.le-eins__text { min-width: 0; }
.le-eins__text .le-kern { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }
/* Bild: dieselbe neutrale Geräte-Fläche wie auf der Startseite (Joah 22.10.: kein Grün hinter Bildern; --geraet-flaeche in
   46-start.css), randlos auf dem Handy. Das Handy steigt von unten herein und braucht darum die Kante der Fläche; sein
   Anschnitt liegt direkt unter der Menükarte (62 % des Bildschirmfotos): Breite 72, oben 7, alles in cqw der Fläche. */
.le-bild { margin: 0 calc(-1 * var(--rand)); min-width: 0; }
.le-bild__flaeche {
  position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 1 / 1;
  background: var(--geraet-flaeche);
}
.le-bild__handy { position: absolute; left: 14cqw; top: 7cqw; width: 72cqw; }
@media (min-width: 48em) {
  .le-eins__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .le-eins__text { grid-column: 1 / span 7; grid-row: 1; padding-right: clamp(0rem, 3vw, 3rem); }
  .le-bild { grid-column: 8 / -1; grid-row: 1; margin-inline: 0; }
}

/* ---------- Zeilen: je Leistung eine feine Linie, links der Titel, rechts der Text ---------- */
.le-liste { padding-block: clamp(2.25rem, 5vw, 4.5rem); }
.le-zeile { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; padding-block: clamp(2.1rem, 4.6vw, 3.5rem); border-top: 1px solid var(--linie); }
.le-zeile__titel { min-width: 0; }
.le-zeile__text { min-width: 0; }
.le-zeile__link { margin-top: .5rem; }
.le-zeile__link .textlink { min-height: 44px; }
@media (min-width: 48em) {
  .le-titel { font-size: clamp(1.3rem, .9rem + 1vw, 1.85rem); }   /* schmale Titelspalte: „KONTAKTFORMULAR“ passt bei 768 px noch ungetrennt */
  .le-zeile { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 0; }
  .le-zeile__titel { grid-column: 1 / span 5; padding-right: 1rem; }
  .le-zeile__text { grid-column: 6 / -1; }
}
@media (min-width: 64em) {
  .le-zeile__text { grid-column: 7 / -1; }
}

/* Branchen: eine ruhige Liste mit feinen Linien, wie die Leistungsliste der Startseite, in zwei Spalten */
.le-branchen { display: grid; margin-block: 1.5rem 1.4rem; border-top: 1px solid var(--linie); }
.le-branchen li {
  display: flex; align-items: center; min-height: 3rem; padding-block: .5rem; border-bottom: 1px solid var(--linie);
  font-family: var(--f-tafel); text-transform: uppercase; letter-spacing: .12em; line-height: 1.25;
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); color: var(--tinte); overflow-wrap: anywhere;
}
@media (min-width: 40em) {
  .le-branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--spalt); }
}

/* ---------- Was kostet das: auf Glas-Mint, „Ab 499 €“ groß in der Tafel-Schrift ---------- */
.le-kosten { padding-block: clamp(1.5rem, 4vw, 3rem); }
.le-kosten .le-zeile { border-top: 0; padding-block: clamp(2.25rem, 5vw, 4rem); }
.le-kosten__text { container-type: inline-size; }
.le-kosten__zahl {
  font-size: min(10.6cqi, 5.2rem); letter-spacing: .1em; margin-right: -.1em; line-height: 1.05;
  white-space: nowrap; color: var(--tinte); margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
}
.le-kosten .le-absatz { margin-top: 0; }

/* ---------- Projekt anfragen: Titel links, Text und Knöpfe rechts ---------- */
.le-schluss { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.le-schluss__raster { row-gap: 1.6rem; align-items: end; }
.le-schluss__titel { grid-column: 1 / -1; }
.le-schluss__text { grid-column: 1 / -1; display: grid; gap: 1.3rem; justify-items: start; }
@media (min-width: 64em) {
  .le-schluss__titel { grid-column: 1 / span 6; }
  .le-schluss__text { grid-column: 7 / -1; }
}

/* 51-preise.css */
/* ==========================================================================
   Preise (pr-), Joah 17.10.2026: nur noch „ab 499 €“.
   Bühne wie „Über uns“ (eigene Klassen, eigener Code): Blätterschatten-Film über die ganze Fläche, heller Schleier, groß die
   Tafel „Preise“ mit „Ab 499 €“ darunter. Danach der Preis (EIN großer Preis, Linie mit Marker, die weich ausläuft; Bewegung in
   38-preise.js), Abschnitte in zwei Spalten (links Überschrift, am Desktop mitlaufend, rechts Inhalt), drei Faktoren und
   darunter „Monatlich“, „Erst bauen, dann zahlen.“ groß, eine dunkle Fläche „Fair statt überteuert“, Preisfragen, „Projekt anfragen“.
   Knöpfe (aus 30-bausteine.css) mit leicht eckigen Ecken (--r-knopf); runde Punkte und der Marker der Linie bleiben rund.
   Alles Wiederverwendete (abschnitt, h-mittel, h-klein, textlink, knoepfe, at-besuch, film) kommt aus den Dateien davor.
   ========================================================================== */

/* ---------- Bühne ---------- */
.pr-buehne {
  position: relative; height: 100svh; min-height: 38rem;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: radial-gradient(130% 85% at 50% 38%, #FBFAF7 0, var(--papier) 55%, #E9E7E0 100%);
  overflow: clip;
}
.pr-buehne__film { position: absolute; inset: 0; z-index: 0; }
.pr-buehne__film .film { position: absolute; inset: 0; background: #EEECE6; }
/* heller Schleier: oben fast frei, unten heller für Überschrift und Text */
.pr-buehne__film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 242, 238, .3) 0%, rgba(243, 242, 238, .22) 35%, rgba(243, 242, 238, .6) 72%, rgba(243, 242, 238, .9) 100%);
}
/* Pause nur für Tastatur sichtbar (WCAG 2.2.2), sonst ruhiges Bild ohne Knopf */
.pr-buehne__film .film__pause { top: calc(var(--kopf-h) + .6rem); right: var(--rand); bottom: auto; z-index: 3; opacity: 0; pointer-events: none; }
.pr-buehne__film .film__pause:focus-visible { opacity: 1; pointer-events: auto; }

.pr-buehne__feld { position: relative; z-index: 1; container-type: size; margin-top: var(--kopf-h); }
/* „PREISE“ groß in der Tafel-Schrift, mittig und einzeilig, darunter „AB 499 €“ in Grün. Das Wort mit Sperrung ist rund 3,9 em
   breit: die Größe richtet sich nach der Breite der Hülle und nach der Höhe der freien Fläche. padding-left gleicht die
   Sperrung hinter dem letzten Buchstaben aus. Beim Laden stellt sich alles scharf (CSS). */
.pr-buehne__mitte {
  --g: min(calc(min(100cqw - 2 * var(--rand), var(--max)) / 4.3), 33cqh);
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; row-gap: calc(var(--g) * .1);
  text-align: center;
}
.pr-buehne__tafel, .pr-buehne__ab { white-space: nowrap; user-select: none; line-height: 1; padding: 0 0 0 .12em; letter-spacing: .12em; }
.pr-buehne__tafel { font-size: var(--g); color: var(--tinte); }
.pr-buehne__ab { font-size: calc(var(--g) * .4); color: var(--kobalt); letter-spacing: .1em; padding-left: .1em; }
@media (prefers-reduced-motion: no-preference) {
  .pr-buehne__tafel { animation: pr-scharf 1.6s var(--ease-out) .1s both; }
  .pr-buehne__ab { animation: pr-scharf 1.6s var(--ease-out) .5s both; }
}
@keyframes pr-scharf { from { filter: blur(14px); opacity: .25; } to { filter: blur(0); opacity: 1; } }

.pr-buehne__text {
  position: relative; z-index: 2;
  display: grid; gap: 1.4rem 3rem; align-items: end;
  padding-block: clamp(1.2rem, 3vh, 2.4rem) clamp(1.6rem, 4.5vh, 3.2rem);
}
.pr-buehne .pr-buehne__h1 { font-size: clamp(1.2rem, .85rem + 1.15vw, 1.95rem); line-height: 1.22; letter-spacing: .07em; max-width: 24ch; }
.pr-buehne__lead { margin-top: .85rem; max-width: 36em; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.pr-buehne__rechts { display: grid; gap: .75rem; justify-items: start; }
.pr-buehne__hinweis { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--tinte-2); }
.pr-buehne__punkt { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(124, 203, 174, .22); }
@media (min-width: 64em) {
  /* Der dauerhafte WhatsApp-Knopf (58 px hoch, 16 px über dem Rand) sitzt unten rechts, genau unter der rechten Spalte:
     6 rem Abstand nach unten halten Knopf und Hinweis „Antwort innerhalb von 24 Stunden“ auf jeder Fensterhöhe frei voneinander. */
  .pr-buehne__text { grid-template-columns: minmax(0, 1.3fr) auto; padding-bottom: max(6rem, clamp(1.6rem, 4.5vh, 3.2rem)); }
  .pr-buehne__rechts { justify-items: end; }
}
@media (max-width: 47.99em) {
  .pr-buehne { min-height: 40rem; }
  .pr-buehne__text { gap: 1.2rem; }
}

/* ---------- Der Preis: eine große Zahl, darunter eine Linie, die vom Marker aus nach rechts aufgeht und ausläuft ---------- */
.pr-strahl { padding-block: clamp(3.5rem, 8vw, 7rem); }
.pr-strahl .huelle { container-type: inline-size; }
.pr-bahn__kopf { display: grid; gap: clamp(1rem, 3vw, 1.6rem); align-items: end; }
.pr-preis { display: grid; gap: .1em; justify-items: start; margin: 0; font-weight: 400; }
.pr-preis__ab { padding-top: 0; font-size: clamp(.9rem, .78rem + .45vw, 1.2rem); letter-spacing: .26em; line-height: 1.2; color: var(--tinte-2); }
/* Zahl: nach der Breite der Hülle, mobil rund 34 %, am Rechner begrenzt; der Endwert („mass“) hält die Breite frei, damit beim Zählen nichts springt */
.pr-preis__zahl {
  position: relative; display: inline-grid; padding-top: 0;
  font-size: min(35cqi, 8rem); line-height: 1; letter-spacing: .04em; color: var(--kobalt);
  font-variant-numeric: lining-nums;
}
.pr-preis__mass, .pr-preis__live { grid-area: 1 / 1; white-space: nowrap; }
.pr-preis__mass { visibility: hidden; }
.pr-bahn__lead { max-width: 20em; font-size: clamp(1.12rem, 1.02rem + .5vw, 1.45rem); line-height: 1.4; font-weight: 560; letter-spacing: -.008em; color: var(--tinte); text-wrap: balance; }

/* Linie: Spur (kaum sichtbar, läuft nach rechts aus), Füllung (Mint-Grün-Verlauf), Marker links. --p (0 bis 1) steuert die Füllung, GSAP fährt sie.
   Die Maske macht die Spitze beim Aufgehen weich und lässt die Linie am Ende ausfaden: sie endet offen, ohne Anschlag. */
.pr-latte { position: relative; height: 28px; margin-top: clamp(1.6rem, 4.5vw, 3rem); --p: 1; }
.pr-latte__spur, .pr-latte__fuell { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.pr-latte__spur {
  background: rgba(18, 22, 21, .1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
.pr-latte__fuell {
  background: linear-gradient(90deg, var(--kobalt) 0%, var(--mint) 70%, var(--mint-hell) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--p) * 55%), transparent calc(var(--p) * 100%));
  mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--p) * 55%), transparent calc(var(--p) * 100%));
}
.pr-latte__marker {
  position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin: -14px 0 0;
  border-radius: 50%; background: var(--weiss); border: 6px solid var(--kobalt);
  box-shadow: 0 0 0 7px rgba(124, 203, 174, .28);
}
@media (min-width: 48em) {
  .pr-bahn__kopf { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 6vw, 5rem); }
  .pr-preis__zahl { font-size: min(20cqi, 14rem); }
  .pr-bahn__lead { justify-self: end; max-width: 16em; padding-bottom: .55em; text-align: right; }
  .pr-latte { height: 32px; }
  .pr-latte__marker { width: 32px; height: 32px; margin-top: -16px; }
}

/* ---------- Zwei Spalten: links Überschrift, rechts Inhalt ---------- */
.pr-teil__raster { row-gap: clamp(1.75rem, 5vw, 3rem); align-items: start; }
.pr-teil__kopf { grid-column: 1 / -1; display: grid; gap: 1.1rem; justify-items: start; align-content: start; }
.pr-teil__inhalt { grid-column: 1 / -1; display: grid; justify-items: start; align-content: start; min-width: 0; }
/* Überschriften links: nicht trennen (KOMPLETTE bleibt ganz), im Notfall bricht es trotzdem im Wort */
.pr-teil__kopf .h-mittel { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
.pr-text { max-width: 36em; font-size: clamp(1.06rem, 1rem + .25vw, 1.2rem); line-height: 1.62; text-wrap: pretty; }
.pr-text + .pr-text { margin-top: 1em; }
.pr-text + .textlink { margin-top: .4rem; }
.pr-text--nach { margin-top: clamp(1.5rem, 3vw, 2rem); color: var(--tinte-2); }
@media (min-width: 64em) {
  .pr-teil__kopf { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .pr-teil__inhalt { grid-column: 7 / -1; }
}

/* Liste „Was bei jeder Website dabei ist“ und die Preisfragen: Linien, Begriff in der Tafel-Schrift, Erklärung darunter */
.pr-liste { width: 100%; border-top: 1px solid var(--linie); }
.pr-zeile, .pr-frage { display: grid; gap: .4rem; padding-block: clamp(1.1rem, 2.6vw, 1.55rem); border-bottom: 1px solid var(--linie); }
.pr-zeile__titel { letter-spacing: .08em; color: var(--tinte); }
.pr-zeile__text, .pr-frage__a { max-width: 34em; color: var(--tinte-2); text-wrap: pretty; }
.pr-frage__q { max-width: 28em; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 650; line-height: 1.3; letter-spacing: -.008em; color: var(--tinte); text-wrap: balance; }
.pr-frage__a { color: var(--tinte); }
.pr-liste--fragen .pr-frage { gap: .6rem; padding-block: clamp(1.35rem, 3vw, 1.9rem); }

/* ---------- Wovon der Preis abhängt: drei Spalten auf Glas-Mint ---------- */
.pr-abhaengig__kopf { display: grid; gap: 1.1rem; max-width: 42em; }
.pr-faktoren { display: grid; margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid rgba(18, 22, 21, .22); }
.pr-faktor { padding-block: clamp(1.4rem, 3.6vw, 2rem); border-bottom: 1px solid rgba(18, 22, 21, .22); }
.pr-faktor .pr-faktor__titel { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.15; letter-spacing: .08em; color: var(--kobalt); }
.pr-faktor__text { margin-top: .8rem; max-width: 30em; color: var(--tinte); text-wrap: pretty; }
@media (min-width: 64em) {
  .pr-faktoren { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); border-top: 0; }
  .pr-faktor { padding-block: 1.5rem 0; border-bottom: 0; border-top: 1px solid var(--tinte); }
}

/* Monatlich (Joah 22.10.): eine eigene Zeile unter den drei Faktoren, abgesetzt durch eine dunkle Linie. Titel wie die
   Faktoren (Tafel-Schrift, Grün), der Betrag in derselben Größe in Tinte daneben, darunter der Text. Am Rechner steht der
   Titel in der ersten Faktor-Spalte, Betrag und Text über den zwei anderen, Titel und Betrag auf einer Grundlinie. */
.pr-monat { margin-top: clamp(1.75rem, 5vw, 4rem); }
.pr-monat__zeile { display: grid; row-gap: .7rem; padding-top: clamp(1.4rem, 3.6vw, 1.5rem); border-top: 1px solid var(--tinte); }
.pr-monat .pr-monat__titel { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.15; letter-spacing: .08em; color: var(--kobalt); }
.pr-monat__inhalt { min-width: 0; }
.pr-monat__betrag {
  padding-top: 0; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.15; letter-spacing: .08em;
  color: var(--tinte); font-variant-numeric: lining-nums; text-wrap: balance;
}
.pr-monat__text { margin-top: .8rem; max-width: 38em; color: var(--tinte); text-wrap: pretty; }
.pr-monat__betrag + .pr-monat__text { margin-top: clamp(.9rem, 2vw, 1.2rem); }
.pr-monat__text + .pr-monat__text { margin-top: .6rem; color: var(--tinte-2); }
.pr-monat__titel, .pr-monat__betrag { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
/* Handy und Tablet: die Faktoren stehen untereinander zwischen hellen Linien. Die helle Linie unter dem letzten Faktor
   entfällt, damit über „Monatlich“ nur die eine dunkle Linie steht (keine Doppellinie), im selben Takt wie die Faktoren. */
@media (max-width: 63.99em) {
  .pr-faktor:last-child { border-bottom: 0; }
  .pr-monat { margin-top: 0; }
}
@media (min-width: 64em) {
  .pr-monat__zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); align-items: baseline; }
  .pr-monat__inhalt { grid-column: 2 / -1; }
}

/* ---------- Erst bauen, dann zahlen: groß, zweizeilig in der Tafel-Schrift, darunter Linie von Punkt zu Punkt, rechts der Text ---------- */
.pr-erst { padding-block: clamp(4.5rem, 10vw, 9rem); }
.pr-erst__huelle { container-type: inline-size; }
/* „DANN ZAHLEN.“ ist mit Sperrung rund 7,3 em breit: 12,6 cqi füllt rund 92 % der Hülle. Jede Zeile ist eine Maske, aus der das Wort aufsteigt. */
.pr-erst__titel { font-size: min(12.6cqi, 12rem); line-height: .96; letter-spacing: .06em; color: var(--tinte); }
.pr-erst__zeile { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; white-space: nowrap; }
.pr-erst__wort { display: block; will-change: transform; }
.pr-erst__zeile--zwei .pr-erst__wort { color: var(--kobalt); }
/* Spur: Linie von einem gefüllten zu einem leeren Punkt; der zweite Punkt füllt sich, wenn die Linie ankommt (--p, GSAP) */
.pr-erst__spur { position: relative; height: 22px; margin-top: clamp(1.6rem, 4.5vw, 3rem); --p: 1; }
.pr-erst__linie { position: absolute; left: 11px; right: 11px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--linie); }
.pr-erst__linie::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--kobalt);
  transform-origin: 0 50%; transform: scaleX(var(--p));
}
.pr-erst__punkt { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 4px solid var(--kobalt); background: var(--papier); box-sizing: border-box; }
.pr-erst__punkt--von { left: 0; background: var(--kobalt); box-shadow: 0 0 0 5px rgba(124, 203, 174, .3); }
.pr-erst__punkt--bis { right: 0; background: var(--kobalt); background: color-mix(in srgb, var(--kobalt) calc(var(--p) * 100%), var(--papier)); }
.pr-erst__raster { margin-top: clamp(2rem, 5vw, 3.5rem); }
.pr-erst__text { grid-column: 1 / -1; display: grid; gap: 1rem; justify-items: start; max-width: 36em; }
.pr-erst__lead { font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem); line-height: 1.38; font-weight: 560; letter-spacing: -.01em; color: var(--tinte); text-wrap: pretty; }
.pr-erst__notiz { font-size: clamp(1.06rem, 1rem + .25vw, 1.2rem); line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 64em) {
  .pr-erst__text { grid-column: 7 / -1; max-width: none; }
}

/* ---------- Fair statt überteuert: dunkle Fläche ---------- */
.pr-fair { padding-block: clamp(4.5rem, 10vw, 9rem); }
.pr-fair__raster { row-gap: clamp(2rem, 5vw, 3rem); align-items: start; }
.pr-fair__kopf, .pr-fair__text { grid-column: 1 / -1; }
.pr-fair__zeichen { margin-top: clamp(1.5rem, 4vw, 3rem); color: var(--auf-nacht); --logo-b: var(--mint); }
.pr-fair__logo { width: clamp(4.5rem, 12vw, 8rem); height: auto; }
.pr-fair__text { display: grid; gap: 1.15rem; justify-items: start; max-width: 38em; }
.pr-fair__text p { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.62; color: var(--auf-nacht-2); text-wrap: pretty; }
.pr-fair__text .pr-fair__stark { color: var(--auf-nacht); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.65rem); line-height: 1.45; font-weight: 560; }
.pr-fair__name { margin-top: .6rem; font-size: 1.02rem !important; line-height: 1.5 !important; color: var(--auf-nacht) !important; }
.pr-fair__name .leise { color: var(--auf-nacht-2); }
@media (min-width: 64em) {
  .pr-fair__kopf { grid-column: 1 / span 6; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .pr-fair__text { grid-column: 8 / -1; }
}

/* Titel in Versalien: Umbruch nur zwischen Wörtern, nie mitten im Wort; nur im Notfall (sehr schmal) bricht ein Wort, statt seitlich hinauszuragen */
.pr-zeile__titel, .pr-faktor__titel { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }

/* 52-fragen.css */
/* ==========================================================================
   Fragen und Antworten (/fragen/): Kopf mit großer Tafel „Fragen“ und „Auf einen Blick“, links ein klebriges
   Inhaltsverzeichnis, rechts die vier Themen mit aufklappbaren Fragen, am Ende „Ihre Frage ist nicht dabei?“.
   Die Fragen selbst (.pb-frage, Zeichen, Antwort) kommen aus 45-pb.css; hier nur Layout und Feinheiten.
   Mobil alles untereinander; ab 64em Verzeichnis links (4 Spalten) und Fragen rechts (7 Spalten) wie auf der Startseite.
   ========================================================================== */

/* ---------- Kopf: Tafel über die ganze Breite, darunter H1 und Einleitung, rechts „Auf einen Blick“ ---------- */
.fg-kopf { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.fg-kopf__raster { row-gap: clamp(2rem, 5vw, 3rem); align-items: end; }
.fg-kopf__text, .fg-blick { grid-column: 1 / -1; }
.fg-kopf .skopf__lead { max-width: 38em; text-wrap: pretty; }

.fg-blick__titel { padding-top: 0; margin-bottom: .75rem; font-size: .95rem; letter-spacing: .2em; line-height: 1.2; color: var(--kobalt); }
.fg-blick__liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--spalt); border-top: 1px solid var(--linie); }
.fg-blick__zeile { display: grid; align-content: start; gap: .3rem; padding-block: .95rem; border-bottom: 1px solid var(--linie); }
.fg-blick__zeile dt { padding-top: 0; font-size: .78rem; letter-spacing: .18em; line-height: 1.25; color: var(--tinte-2); }
.fg-blick__zeile dd { font-size: 1rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
@media (min-width: 40em) {
  .fg-blick__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .fg-kopf__text { grid-column: 1 / span 7; }
  .fg-blick { grid-column: 8 / -1; }
  .fg-blick__liste { grid-template-columns: minmax(0, 1fr); }
  .fg-blick__zeile { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; gap: 0 1rem; padding-block: .85rem; border-bottom: 1px solid var(--linie); }
}

/* ---------- Fragen: Verzeichnis und Themen ---------- */
.fg { padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 8rem); }
.fg__raster { row-gap: clamp(2.5rem, 6vw, 3.5rem); align-items: start; }
.fg-inhalt, .fg__themen { grid-column: 1 / -1; }
.fg__themen { display: grid; gap: clamp(3.5rem, 8vw, 6rem); min-width: 0; }
@media (min-width: 64em) {
  .fg-inhalt { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .fg__themen { grid-column: 6 / span 7; }
}

/* Verzeichnis: Ziffer, Thema mit Zahl der Fragen, Pfeil nach unten; jeder Punkt springt zu seinem Thema */
.fg-inhalt__titel { padding-top: 0; margin-bottom: .75rem; font-size: .95rem; letter-spacing: .2em; line-height: 1.2; color: var(--kobalt); }
.fg-inhalt__liste { border-top: 1px solid var(--linie); }
.fg-inhalt__liste li { border-bottom: 1px solid var(--linie); }
.fg-inhalt__punkt {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .4rem;
  min-height: 60px; padding-block: .8rem; text-decoration: none; color: var(--tinte);
}
.fg-inhalt__nr { padding-top: 0; font-size: 1.55rem; line-height: 1; letter-spacing: 0; color: var(--kobalt); }
.fg-inhalt__text { display: grid; gap: .1rem; min-width: 0; }
.fg-inhalt__wort { font-size: 1.08rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
.fg-inhalt__zahl { font-size: .9rem; line-height: 1.3; color: var(--tinte-2); }
.fg-inhalt__punkt .pfeil {
  width: 1.15rem; height: 1.15rem; color: var(--tinte-2); transform: rotate(90deg);
  transition: transform .35s var(--ease-out), color .25s var(--ease-out);
}
.fg-inhalt__punkt:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .fg-inhalt__punkt { transition: color .25s var(--ease-out); }
  .fg-inhalt__punkt:hover { color: var(--kobalt); }
  .fg-inhalt__punkt:hover .pfeil { color: var(--kobalt); transform: rotate(90deg) translateX(3px); }
}

/* Thema: Ziffer und Titel in einer Zeile (gleiche Schrift, gleiche Größe), darunter die Fragen zwischen feinen Linien */
.fg-thema__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: .55em;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
}
.fg-thema__nr { padding-top: 0; font-size: clamp(1.4rem, .95rem + 1.7vw, 2.45rem); line-height: 1.16; letter-spacing: 0; color: var(--kobalt); }
.fg-thema__titel { min-width: 0; }
.fg-thema__liste { border-top: 1px solid var(--tinte); }

/* Frage als Überschrift im Aufklapp-Kopf: erbt Größe und Gewicht von 45-pb.css */
.fg-frage__q { flex: 1 1 auto; min-width: 0; font: inherit; letter-spacing: inherit; text-wrap: balance; }
/* Der Aufklapp-Kopf reicht links und rechts .7rem über die Spalte hinaus (Text und Zeichen bleiben bündig), damit der
   Tastaturfokus einen Rand um Text und Zeichen hat und nicht an der Schrift klebt */
.fg-frage summary { padding-inline: .7rem; margin-inline: -.7rem; border-radius: var(--r-knopf); }
.fg-frage summary:focus-visible { outline-offset: -2px; border-radius: var(--r-knopf); }
@media (hover: hover) and (pointer: fine) { .fg-frage[open] summary:hover { color: var(--kobalt); } }
.fg-frage[open] > summary { color: var(--kobalt); }

/* Antwort: ruhige Absätze, Links in Grün, Aufzählung mit Mint-Punkt */
.fg-antwort { padding-bottom: 1.6rem; }
.fg-antwort > * + * { margin-top: .85em; }
.fg-antwort p { text-wrap: pretty; }
.fg-antwort a { color: var(--kobalt); font-weight: 650; text-decoration-thickness: .07em; text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .fg-antwort a:hover { text-decoration-thickness: .14em; } }
.fg-liste { display: grid; gap: .45rem; }
.fg-liste li { position: relative; padding-left: 1.5rem; }
.fg-liste li::before {
  content: ""; position: absolute; left: .2rem; top: .62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 3px rgba(124, 203, 174, .24);
}

/* Aufklappen sanft, wo der Browser es kann (Höhe von 0 auf Inhalt); sonst springt es auf, das ist genauso gut */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .fg-frage { interpolate-size: allow-keywords; }
    .fg-frage::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size .42s var(--ease-out), content-visibility .42s allow-discrete;
    }
    .fg-frage[open]::details-content { block-size: auto; }
  }
}

/* ---------- Ende: „Ihre Frage ist nicht dabei?“ auf Glas-Mint, links Satz, rechts Telefon, Mail und Knopf ---------- */
.fg-ende { padding-block: clamp(4rem, 8vw, 7rem); }
.fg-ende__raster { row-gap: clamp(2rem, 5vw, 3rem); align-items: end; }
.fg-ende__kopf { grid-column: 1 / -1; display: grid; gap: 1.2rem; align-content: start; }
.fg-ende__wege { grid-column: 1 / -1; display: grid; gap: 1.6rem; justify-items: start; }
.fg-ende__knoepfe { row-gap: .9rem; }
.fg-wege { width: 100%; border-top: 1px solid var(--linie); }
.fg-weg { display: grid; gap: .1rem; padding-block: .9rem; border-bottom: 1px solid var(--linie); }
.fg-weg__art { padding-top: 0; font-size: .78rem; letter-spacing: .2em; line-height: 1.25; color: var(--tinte-2); }
.fg-weg__wert {
  display: inline-flex; align-items: center; justify-self: start; min-height: 44px;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 650; line-height: 1.2; letter-spacing: -.005em;
  color: var(--kobalt); text-decoration: none; overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) { .fg-weg__wert:hover { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .2em; } }
/* Der WhatsApp-Knopf ist lang (eine Zeile): die rechte Spalte bekommt sechs Spalten, damit er bei 1024 px nicht hinausragt */
@media (min-width: 64em) {
  .fg-ende__kopf { grid-column: 1 / span 6; }
  .fg-ende__wege { grid-column: 7 / -1; }
}
.fg-ende__knoepfe .knopf { max-width: 100%; }

/* 55-service-atelier.css */
/* ==========================================================================
   Service & Sehtest (sv-) · Atelier & Team (at-)
   Bänder: Bild randlos bis an den Bildschirmrand, Text daneben, Seiten wechseln. Keine Karten, keine Schatten.
   --anschnitt = Abstand von der Hülle bis zum Bildschirmrand (für randlose Bilder neben dem Raster).
   ========================================================================== */
.sv-sehtest, .sv-band, .sv-werkstatt { --anschnitt: calc((100vw - min(100vw - 2 * var(--rand), var(--max))) / 2); }

/* ---------- Service: gemeinsame Typografie ---------- */
.sv-titel {
  font-size: clamp(2rem, 9.2vw, 4.6rem);
  letter-spacing: .12em; margin-right: -.12em; line-height: .98;
  color: var(--tinte);
}
.abschnitt--nacht .sv-titel { color: var(--auf-nacht); }
@media (min-width: 64em) { .sv-titel { font-size: min(3.9vw, 4rem); } }
.sv-lead {
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem); max-width: 22em;
  font-size: clamp(1.2rem, 1rem + .75vw, 1.65rem); font-weight: 560; line-height: 1.28; letter-spacing: -.01em;
  text-wrap: balance;
}
.sv-prosa { margin-top: 1rem; color: var(--tinte-2); }
.abschnitt--nacht .sv-prosa { color: var(--auf-nacht-2); }
.sv-text > .textlink { margin-top: .9rem; }
.sv-unterschrift, .at-unterschrift { margin-top: .75rem; font-size: .92rem; line-height: 1.45; color: var(--tinte-2); }
.abschnitt--nacht .at-unterschrift { color: var(--auf-nacht-2); }

/* ---------- Sehtest: dunkle Szene, großes Phoropter-Bild rechts, Messbrille klein, Termin-Hinweis ---------- */
.sv-sehtest__raster { row-gap: clamp(2rem, 5vw, 3.5rem); }
.sv-sehtest__text { grid-column: 1 / -1; }
.sv-sehtest__gross { grid-column: 1 / -1; margin-inline: calc(var(--rand) * -1); aspect-ratio: 4 / 3; }
.sv-sehtest__klein { grid-column: 4 / -1; aspect-ratio: 3 / 2; margin-top: calc(clamp(2rem, 5vw, 3.5rem) * -.4); }
.sv-termin {
  display: grid; gap: 1.8rem;
  margin-top: clamp(4rem, 9vw, 8rem); padding-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--linie-nacht);
}
.sv-termin__satz {
  max-width: 24ch;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.6rem); font-weight: 540; line-height: 1.12; letter-spacing: -.02em;
  color: var(--auf-nacht); text-wrap: balance;
}
.sv-termin__aktion { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) {
  .sv-sehtest__raster { grid-template-rows: auto auto; }
  .sv-sehtest__text { grid-column: 1 / span 5; grid-row: 1; align-self: start; padding-top: 2vh; }
  .sv-sehtest__gross {
    grid-column: 7 / -1; grid-row: 1 / span 2;
    margin: 0 calc(var(--anschnitt) * -1) 0 0; aspect-ratio: auto; height: min(90vh, 56rem);
  }
  .sv-sehtest__klein { grid-column: 2 / span 4; grid-row: 2; align-self: end; margin-top: 0; }
  .sv-termin { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 4rem; }
  .sv-termin__aktion { justify-items: end; }
}

/* ---------- Kontaktlinsen: Film randlos links, Text rechts ---------- */
.sv-band__raster { row-gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.sv-band__text { grid-column: 1 / -1; }
.sv-band__medium { grid-column: 1 / -1; margin-inline: calc(var(--rand) * -1); aspect-ratio: 4 / 3; }
.sv-band__medium .film { position: absolute; inset: 0; }
.sv-partner__titel { margin-top: 2.2rem; font-size: 1rem; font-weight: 650; color: var(--tinte-2); }
.sv-partner { margin-top: .7rem; border-top: 1px solid var(--linie); max-width: 34rem; }
.sv-partner li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--linie);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 560; letter-spacing: -.008em;
}
.sv-partner .leise { font-size: .95rem; font-weight: 400; letter-spacing: 0; }
@media (min-width: 64em) {
  .sv-band__medium {
    grid-column: 1 / span 6; grid-row: 1;
    margin: 0 0 0 calc(var(--anschnitt) * -1); aspect-ratio: auto; height: min(84vh, 50rem);
  }
  .sv-band__text { grid-column: 8 / -1; grid-row: 1; }
}

/* ---------- Sportbrillen, Kinderbrillen, Sehhilfen: eigene Bänder, Bild abwechselnd rechts ---------- */
.sv-band { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
@media (min-width: 64em) {
  .sv-band--rechts .sv-band__medium { grid-column: 7 / -1; margin: 0 calc(var(--anschnitt) * -1) 0 0; }
  .sv-band--rechts .sv-band__text { grid-column: 1 / span 5; }
}

/* ---------- Werkstatt: Foto randlos links, Text rechts, Dragan am Schleifautomaten mittelgroß ---------- */
.sv-werkstatt__raster { row-gap: clamp(2rem, 5vw, 3rem); }
.sv-werkstatt__text { grid-column: 1 / -1; }
.sv-werkstatt__gross { grid-column: 1 / -1; margin-inline: calc(var(--rand) * -1); aspect-ratio: 4 / 3; }
.sv-werkstatt__klein { grid-column: 1 / span 8; max-width: 20rem; }
.sv-werkstatt__klein .medium { aspect-ratio: 3 / 4; }
.sv-werkstatt__klein img { object-position: 35% 30%; }
@media (min-width: 40em) { .sv-werkstatt__klein { grid-column: 1 / span 5; } }
@media (min-width: 64em) {
  .sv-werkstatt__raster { grid-template-rows: auto 1fr; }
  .sv-werkstatt__gross {
    grid-column: 1 / span 6; grid-row: 1 / span 2;
    margin: 0 0 0 calc(var(--anschnitt) * -1); aspect-ratio: auto; height: min(88vh, 54rem);
  }
  .sv-werkstatt__text { grid-column: 8 / -1; grid-row: 1; }
  .sv-werkstatt__klein { grid-column: 8 / span 3; grid-row: 2; align-self: end; max-width: none; }
}

/* ---------- Service: Termin am Ende ---------- */
.sv-schluss__raster { row-gap: 2.8rem; align-items: end; }
.sv-schluss__text { grid-column: 1 / -1; display: grid; gap: 1.3rem; justify-items: start; }
.sv-schluss__text .knoepfe { margin-top: .6rem; }
.sv-schluss__zeiten { grid-column: 1 / -1; }
.sv-schluss__zeiten .h-klein { margin-bottom: .5rem; }
@media (min-width: 64em) {
  .sv-schluss__text { grid-column: 1 / span 6; }
  .sv-schluss__zeiten { grid-column: 8 / -1; }
}

/* ==========================================================================
   Atelier & Team
   ========================================================================== */

/* ---------- Wie ich die Brille sehe: dunkler Brief, großer Auftakt ---------- */
.at-ich__titel { font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); font-weight: 640; line-height: 1.25; letter-spacing: -.01em; color: var(--mint-hell); }
.at-ich__auftakt {
  margin-top: clamp(1.4rem, 3vw, 2.4rem); max-width: 21ch;
  font-size: clamp(2rem, 1rem + 3.7vw, 5.1rem); font-weight: 540; line-height: 1.06; letter-spacing: -.026em;
  color: var(--auf-nacht); text-wrap: balance;
}
.at-ich__raster { margin-top: clamp(3rem, 8vw, 6.5rem); row-gap: 2.6rem; align-items: start; }
.at-ich__rom { grid-column: 1 / span 9; }
.at-ich__rom .medium { aspect-ratio: 3 / 4; }
.at-ich__brief { grid-column: 1 / -1; }
.at-ich__prosa p { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.62; color: var(--auf-nacht-2); }
.at-ich__prosa p:first-child { color: var(--auf-nacht); }
.at-ich__name {
  display: flex; align-items: flex-end; gap: 1.2rem;
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linie-nacht);
}
.at-ich__name p { line-height: 1.45; }
.at-ich__name .leise { color: var(--auf-nacht-2); }
.at-ich__portraet { width: 96px; aspect-ratio: 3 / 4; flex: none; }
.at-ich__portraet img { object-position: 50% 20%; }
@media (min-width: 40em) { .at-ich__rom { grid-column: 1 / span 6; } }
@media (min-width: 64em) {
  .at-ich__rom { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .at-ich__brief { grid-column: 6 / span 6; }
  .at-ich__portraet { width: 112px; }
}

/* ---------- Geschichte: Zitat links, Chronik rechts ---------- */
.at-zeit__raster { row-gap: clamp(2.5rem, 6vw, 4rem); }
.at-zeit__kopf { grid-column: 1 / -1; }
.at-zitat { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.at-zitat p {
  max-width: 21ch;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.6rem); font-weight: 540; line-height: 1.18; letter-spacing: -.016em;
  text-wrap: balance;
}
.at-zitat footer { margin-top: 1.1rem; font-size: .98rem; color: var(--tinte-2); }
.at-zeit__liste { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.at-zeit__eintrag { display: grid; gap: .55rem; padding-block: clamp(1.8rem, 4vw, 2.8rem); border-bottom: 1px solid var(--linie); }
.at-zeit__jahr { font-size: clamp(2.8rem, 1.4rem + 4.6vw, 5.6rem); letter-spacing: .1em; line-height: .9; margin-bottom: .5rem; }
.at-zeit__text { max-width: 34em; color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 64em) {
  .at-zeit__kopf { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-h) + 2rem); align-self: start; }
  .at-zeit__liste { grid-column: 7 / -1; }
}

/* ---------- Team: gleicher Bildausschnitt, randlos, mittelgroß ---------- */
.at-team__kopf { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.at-team__liste { display: grid; gap: 2.2rem; }
.at-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; align-items: start; align-content: start; }
.at-person__bild { aspect-ratio: 4 / 5; }
.at-person__bild .at-person__img { object-position: 50% 22%; }
.at-person__bild .at-person__img--paar { object-position: 50% 4%; }
.at-person__bild .at-person__img--dragan { object-position: 30% 12%; }
.at-person__wer + .at-person__wer { margin-top: 1.4rem; }
.at-person__name { font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem); font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.at-person__titel { margin-top: .35rem; font-size: .96rem; line-height: 1.45; color: var(--tinte-2); }
.at-person__rolle { margin-top: .45rem; font-size: .96rem; line-height: 1.45; font-weight: 600; }
@media (min-width: 40em) {
  .at-team__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--spalt); }
  .at-person { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .at-team__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: var(--spalt); }
  .at-team__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Blick ins Atelier: drei mittelgroße Fotos im Wechselrhythmus ---------- */
.at-rundgang__raster { row-gap: clamp(2rem, 5vw, 3.5rem); }
.at-rundgang__kopf { grid-column: 1 / -1; display: grid; gap: 1rem; }
.at-laden--innen { grid-column: 1 / -1; }
.at-laden--innen .medium { aspect-ratio: 4 / 3; }
.at-laden--theke { grid-column: 4 / -1; }
.at-laden--theke .medium { aspect-ratio: 3 / 4; }
.at-laden--etui { grid-column: 1 / span 10; }
.at-laden--etui .medium { aspect-ratio: 4 / 3; }
@media (min-width: 40em) {
  .at-laden--innen { grid-column: 1 / span 10; }
  .at-laden--theke { grid-column: 6 / -1; }
  .at-laden--etui { grid-column: 2 / span 7; }
}
@media (min-width: 64em) {
  .at-rundgang__kopf { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
  .at-laden--innen { grid-column: 1 / span 6; grid-row: 2; }
  .at-laden--theke { grid-column: 8 / span 4; grid-row: 1 / span 2; align-self: end; }
  .at-laden--etui { grid-column: 4 / span 5; grid-row: 3; margin-top: clamp(1rem, 3vw, 2.5rem); }
}

/* ---------- Engagement: Sehtafel-Zeile, darunter drei Spalten mit Linie ---------- */
.at-region__titel { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); container-type: inline-size; }
.at-region__tafel { display: block; font-size: clamp(2.1rem, 8.4cqi, 7.2rem); letter-spacing: .1em; line-height: 1; color: var(--tinte); }
.at-region__unter { display: block; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; color: var(--tinte-2); }
.at-region__liste { display: grid; border-top: 1px solid var(--linie); }
.at-region__punkt { padding-block: clamp(1.5rem, 4vw, 2rem); border-bottom: 1px solid var(--linie); }
.at-region__punkt p { margin-top: .6rem; max-width: 34em; color: var(--tinte-2); text-wrap: pretty; }
@media (min-width: 64em) {
  .at-region__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); border-top: 0; }
  .at-region__punkt { padding-block: 1.5rem 0; border-bottom: 0; border-top: 1px solid var(--tinte); }
}

/* ---------- Besuch ---------- */
.at-besuch__raster { row-gap: 1.6rem; align-items: end; }
.at-besuch__titel { grid-column: 1 / -1; }
.at-besuch__text { grid-column: 1 / -1; display: grid; gap: 1.3rem; justify-items: start; }
@media (min-width: 64em) {
  .at-besuch__titel { grid-column: 1 / span 6; }
  .at-besuch__text { grid-column: 7 / -1; }
}

/* Prüf-Funde 14.10.2026: lange Wörter in schmalen Spalten trennen */
.at-person__rolle { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.at-region__titel { letter-spacing: .1em; overflow-wrap: anywhere; }
/* Produktfoto auf reinem Weiß: Weiß wird zum Tafelweiß der Seite, keine Kastenkante */
.sv-band__medium:has(.bild--weiss) { background: transparent; }
.bild--weiss { mix-blend-mode: multiply; }
.sv-band__medium:has(.bild--weiss) img { object-fit: contain; padding: clamp(.5rem, 3vw, 2.5rem); }

/* 60-kontakt-recht.css */
/* ==========================================================================
   Kontakt, Rechtsseiten, 404
   ========================================================================== */
.ko-wege__liste { display: grid; gap: 2.5rem var(--spalt); border-top: 1px solid var(--linie); padding-top: 2.2rem; }
@media (min-width: 56em) { .ko-wege__liste { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } }
.ko-weg { display: grid; gap: .4rem; justify-items: start; }
.ko-weg__art { font-weight: 650; color: var(--tinte-2); }
.ko-weg__wert { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 560; letter-spacing: -.01em; line-height: 1.25; text-decoration: none; color: var(--tinte); overflow-wrap: anywhere; }
.ko-weg--gross .ko-weg__wert { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); letter-spacing: -.02em; color: var(--kobalt); }
.ko-weg__wert--klein { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
@media (hover: hover) and (pointer: fine) { a.ko-weg__wert:hover { text-decoration: underline; text-decoration-thickness: .06em; } }
.ko-zeiten__raster { row-gap: 2.5rem; align-items: start; }
.ko-zeiten__kopf { grid-column: 1 / -1; display: grid; gap: 1.2rem; justify-items: start; }
.ko-zeiten__titel { font-size: clamp(1.9rem, 1rem + 3.4vw, 3.6rem); letter-spacing: .12em; color: var(--auf-nacht); }
.ko-zeiten__tabelle { grid-column: 1 / -1; }
.ko-zeiten .zeiten { max-width: none; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
@media (min-width: 64em) {
  .ko-zeiten__kopf { grid-column: 1 / span 5; }
  .ko-zeiten__tabelle { grid-column: 7 / span 6; }
}
.ko-anfahrt__raster { row-gap: 2.5rem; align-items: center; }
.ko-anfahrt__bild { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.ko-anfahrt__text { grid-column: 1 / -1; display: grid; gap: 1.2rem; justify-items: start; }
.ko-anfahrt__hinweis { font-size: .95rem; max-width: 34em; }
@media (min-width: 64em) {
  .ko-anfahrt__bild { grid-column: 1 / span 6; }
  .ko-anfahrt__text { grid-column: 8 / span 5; }
}
.ko-form__raster { row-gap: 2.5rem; }
.ko-form__kopf { grid-column: 1 / -1; display: grid; gap: 1rem; align-content: start; }
.ko-form__formular { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .ko-form__kopf { grid-column: 1 / span 5; }
  .ko-form__formular { grid-column: 7 / span 6; }
}
.ko-sozial__innen { display: grid; gap: .6rem; justify-items: start; padding-top: 1rem; border-top: 1px solid var(--linie); }

/* Rechtsseiten */
.re-kopf { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.re__huelle { max-width: 52rem; margin-left: max(var(--rand), (100vw - var(--max)) / 2); }
.re-teil { padding-block: 2rem; border-top: 1px solid var(--linie); }
.re-teil p, .re-liste { max-width: 42em; }
.re-teil p + p, .re-teil p + .re-liste, .re-liste + p { margin-top: .9em; }
.re-titel { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); font-weight: 650; letter-spacing: -.01em; margin-bottom: .9rem; }
.re-unter { font-size: 1.1rem; font-weight: 650; margin: 1.6rem 0 .6rem; }
.re-liste { display: grid; gap: .35rem; padding-left: 1.2em; list-style: disc; }
.re-hervor { margin-top: 1.4rem; padding: 1.2rem 1.4rem; background: var(--glas); }
.re a { color: var(--kobalt); overflow-wrap: anywhere; }

/* 404 */
.nf { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--kopf-h) + 3rem) 4rem; }
.nf__innen { display: grid; gap: 1.4rem; justify-items: start; }
.nf__tafel { display: grid; justify-items: start; gap: .5rem; line-height: 1; margin-bottom: 1rem; }
.nf__z1 { font-size: clamp(5rem, 2rem + 14vw, 13rem); letter-spacing: .2em; }
.nf__z2 { font-size: clamp(1.6rem, 1rem + 3vw, 3.4rem); letter-spacing: .3em; filter: blur(2px); opacity: .7; }
.nf__z3 { font-size: clamp(.9rem, .8rem + .6vw, 1.3rem); letter-spacing: .3em; filter: blur(3.5px); opacity: .55; }

/* 90-pb-schrift.css */
/* ==========================================================================
   Überschriften in der Tafel-Schrift (Joah 16.10.: „ändere einfach überall die Schriftart so ein bisschen dazu“).
   Gilt für alle Titel und Zitate; Fließtext, Einleitungen, Knöpfe, Menü und Formular bleiben in Atkinson.
   Lange deutsche Wörter in Versalien: Silbentrennung erlaubt, im Notfall Umbruch im Wort (nie seitlich hinaus).
   Diese Datei lädt zuletzt und überschreibt die Größen der Vorlage.
   ========================================================================== */
.h-gross, .h-mittel, .h-klein, .skopf__h1, .stimme__zitat p, .at-ich__auftakt, .at-zitat p, .at-besuch__titel,
.re-titel, .at-person__name, .at-region__unter, .pbkap__schritt {
  font-family: var(--f-tafel); font-weight: 400; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1.16; text-wrap: balance;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.h-gross, .at-besuch__titel { font-size: clamp(1.75rem, 1rem + 2.9vw, 3.7rem); }
.h-mittel { font-size: clamp(1.4rem, .95rem + 1.7vw, 2.45rem); }
.h-klein { font-size: clamp(1rem, .92rem + .4vw, 1.25rem); letter-spacing: .06em; line-height: 1.3; }
.skopf__h1 { font-size: clamp(1.4rem, .95rem + 1.9vw, 2.6rem); max-width: 24ch; }
.stimme__zitat p, .at-ich__auftakt { font-size: clamp(1.45rem, .9rem + 2.2vw, 3rem); letter-spacing: .07em; line-height: 1.2; max-width: 26ch; }
.at-zitat p { font-size: clamp(1.25rem, .9rem + 1.4vw, 2.1rem); }
.re-titel { font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); letter-spacing: .06em; line-height: 1.3; }
.at-region__unter { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); letter-spacing: .1em; }
.at-person__name { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: .06em; }
@media (max-width: 26em) {
  .h-gross, .h-mittel, .skopf__h1 { letter-spacing: .05em; }
}