/* Reihenfolge: Schriften, dann Haussystem, dann Marke. Marke MUSS zuletzt stehen. */
/* Satoshi, Indian Type Foundry, ITF Free Font License 2.0: Selbsthosting
   ausdruecklich erlaubt (Lizenz liegt in assets/schriften). Lokal eingebunden,
   die alte Seite lud sie von fonts.cdnfonts.com, also von einem Fremdserver. */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url('../schriften/satoshi-variabel.woff2') format('woff2')}
/* ============================================================
   DHM-Haussystem — dunkel, grosszuegig, kontrastreich.
   Aufgebaut nach doublehmedia.de: fast schwarzer Grund, riesige
   Display-Headline, Versal-Eyebrow im Akzentton, Pill-Knopf mit
   Pfeil, Filmkorn, Sheen, Scroll-Indikator.

   Was pro Kunde wechselt, steht ausschliesslich in den Tokens
   weiter unten: --akzent, --akzent-tief, --display. Alles andere
   ist Haus.

   Keine Inline-Styles im HTML — CSP ohne unsafe-inline.
   Bewegung nur ueber transform/opacity, prefers-reduced-motion
   schaltet sie ab.
   ============================================================ */

:root {
  /* Schichten */
  --ink:        #0A0A0A;
  --layer:      #141414;
  --layer-2:    #1A1A1A;
  --cream:      #F6F4F0;
  /* Schriftfarbe auf --ink. Eigener Token, damit eine Marke das
     Haussystem umdrehen kann (helle Flaeche, dunkle Schrift), ohne
     dass 22 fest verdrahtete Werte uebrig bleiben. */
  --auf-ink:    #F6F4F0;
  --cream-tief: #E8E4DC;
  --muted:      #8A8A8A;
  --line:       color-mix(in srgb, var(--auf-ink) 10%, transparent);
  --line-stark: color-mix(in srgb, var(--auf-ink) 22%, transparent);
  --line-ink:   rgba(10, 10, 10, .12);

  /* Grundton fuer leise Abschnitte. Getrennt von --cream, weil --cream
     zugleich die Schriftfarbe auf dunklem Grund ist. Eine Marke, die das
     System umdreht (helle Flaeche, dunkle Schrift), braucht beide
     Bedeutungen getrennt, sonst wird aus dem leisen Abschnitt eine
     dunkle Flaeche mit gleichfarbiger Schrift. */
  --dunst:      var(--cream);
  --dunst-tief: var(--cream-tief);

  /* Schrift ueber Fotos. Buehne und Bildband liegen immer auf einem
     abgedunkelten Bild, auch bei einer hellen Marke. */
  --auf-bild:        var(--cream);
  --auf-bild-leise:  var(--auf-ink);
  --auf-bild-akzent: var(--akzent-hell, var(--akzent));

  /* Helle Abschnitte */
  --papier:     #FFFFFF;
  --tinte:      #0C0C0C;
  --text:       #3A3A3A;
  --text-leise: #6E6E6E;

  --weg:  cubic-bezier(.16, 1, .3, 1);
  --weg2: cubic-bezier(.22, .61, .36, 1);

  --kopf-grund:          rgba(10, 10, 10, .55);
  --kopf-grund-kompakt:  rgba(10, 10, 10, .9);

  --spur: 1240px;
  --pad: 22px;
}
@media (min-width: 700px)  { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 48px; } }

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

/* Das hidden-Attribut versteckt ueber die Browservorgabe display:none.
   Jede eigene display-Regel schlaegt das, weil sie aus dem Autoren-
   stylesheet kommt. Bei .knopf (display:inline-flex) blieben dadurch
   "Zurueck" und "Anfrage absenden" im Planer sichtbar, obwohl das
   Skript sie versteckt hatte. Deshalb hier erzwungen. */
[hidden] { display: none !important; }

/* Sprungmarke: liegt ausserhalb des Bildes und kommt erst beim
   Tastaturfokus hervor. Ohne sie muss man auf jeder Seite durch die
   komplette Navigation tabben. */
.sprungmarke {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--akzent); color: var(--knopf-schrift, #0A0A0A);
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .25s var(--weg);
}
/* Bewusst :focus statt :focus-visible. Die Sprungmarke soll bei
   jedem Fokus hervorkommen, auch wenn der Browser den Fokus nicht
   als "sichtbar" einstuft. */
.sprungmarke:focus { top: 12px; }
main:focus { outline: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.menue-offen, html.menue-offen body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--fliess), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.72;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* picture ist nur die Huelle fuer die AVIF-Auswahl. display:contents nimmt
   sie aus dem Layout heraus, damit das img weiterhin direktes Kind seines
   Elternelements bleibt. Sonst braeche jede Regel wie .buehne-bild img oder
   .galerie figure img und die absolute Positionierung der Buehne. */
picture { display: contents; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--tinte);
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(34px, 4.7vw, 68px); }

/* Deutsche Komposita sind lang: "Datenschutzerklaerung" sprengte bei
   360 px die Zeile. Das Dokument traegt lang="de", damit trennt der
   Browser korrekt. break-word ist der Notnagel, wenn kein Trennpunkt
   im Wort liegt. */
h1, h2, h3, h4, .hut, .zahl b, .schritt legend, .frage summary {
  hyphens: auto;
  overflow-wrap: break-word;
}
/* In Ueberschriften nicht: dort trennte es Woerter mitten durch
   ("Elektroin-nung", "Ei-gene Note"), was in einer Schlagzeile stoert.
   Ueberschriften brechen nur an Leerzeichen, den Notnagel break-word
   behalten sie fuer den Fall, dass ein einzelnes Wort breiter ist als
   die Spalte. */
h1, h2, h3, .hut, .zahl b, .schritt legend, .frage summary { hyphens: manual; }
h2 { font-size: clamp(26px, 3.1vw, 44px); }
h3 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: clamp(15px, 1.1vw, 17px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent-tief); text-decoration: none; transition: color .3s var(--weg); }
a:hover { color: var(--akzent); }
.recht a, .fliess a { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------ Filmkorn ------------- */
/* Feines, langsam wanderndes Korn ueber dunklen Flaechen. Kostet nichts:
   ein einziges wiederholtes Rauschmuster als data-URI, animiert nur ueber
   transform. */
.korn {
  position: relative;
  isolation: isolate;
  /* Die Kornebene liegt mit inset:-60% bewusst ueber den Rand hinaus,
     damit die Wanderbewegung keine Kanten zeigt. Ohne overflow:hidden
     schiebt sie das Dokument breit — beim Fussbereich waren das 864 px
     Querueberlauf. */
  overflow: hidden;
}
.korn::after {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: kornWandern 8s steps(6) infinite;
  mix-blend-mode: overlay;
}
.korn > * { position: relative; z-index: 1; }
@keyframes kornWandern {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -3%); }
  60%  { transform: translate(-2%, 4%); }
  80%  { transform: translate(4%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------ Spur / Bloecke ------- */

.spur { width: 100%; max-width: var(--spur); margin: 0 auto; padding: 0 var(--pad); }
.spur-schmal { max-width: 860px; }

.block { padding: clamp(72px, 10vw, 156px) 0; background: var(--papier); }
.block-dunkel { background: var(--ink); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.block-dunkel h1, .block-dunkel h2, .block-dunkel h3, .block-dunkel h4 { color: var(--cream); }
.block-schicht { background: var(--layer); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.block-schicht h2, .block-schicht h3 { color: var(--cream); }
.block-dunst { background: var(--dunst); }

/* Nur die mittige Variante wird zentriert. Vorher schob das auto auch
   linksbuendige Ueberschriften um gut 200 Pixel nach innen, waehrend der
   Text darunter am Spurrand stand. */
.block-kopf { max-width: 760px; margin: 0 0 clamp(44px, 5vw, 74px); }
.block-kopf-mitte { text-align: center; margin-left: auto; margin-right: auto; }
.block-kopf p { font-size: clamp(17px, 1.35vw, 20px); color: var(--text-leise); margin-bottom: 0; }
.block-dunkel .block-kopf p, .block-schicht .block-kopf p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

/* ------------------------------------------------ Eyebrow -------------- */

.hut {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fliess), sans-serif;
  font-size: clamp(11px, .78vw, 12.5px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 20px;
}
.hut::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex-shrink: 0;
}
.block-kopf-mitte .hut { justify-content: center; }

/* ------------------------------------------------ Knoepfe -------------- */

.knopf {
  --sheen: rgba(255, 255, 255, .26);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--fliess), sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: background-color .35s var(--weg), color .35s var(--weg),
              box-shadow .45s var(--weg), transform .45s var(--weg);
}
.knopf::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -55%;
  width: 42%;
  background: linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform: skewX(-16deg);
  transition: left .7s var(--weg);
  z-index: -1;
}
.knopf:hover::after { left: 118%; }
.knopf .pfeil { transition: transform .45s var(--weg); }
.knopf:hover .pfeil { transform: translateX(5px); }

/* Eigener Token fuer die Knopfflaeche: bei Roth lag Weiss auf dem hellen
   Markenrot nur bei 3,6:1. Der Akzent selbst bleibt unangetastet, damit
   die Marke stimmt, nur die Flaeche unter der Schrift wird tiefer. */
.knopf-voll {
  background: var(--knopf-grund, var(--akzent));
  color: var(--knopf-schrift, #fff);
  box-shadow: 0 10px 30px -10px var(--akzent-schatten, rgba(0,0,0,.5));
}
.knopf-voll:hover {
  background: var(--knopf-grund-hover, var(--akzent-hell, var(--akzent)));
  color: var(--knopf-schrift, #fff);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px var(--akzent-schatten, rgba(0,0,0,.55));
}

/* Knopf, dessen Ziel noch fehlt. Sichtbar, aber klar nicht anklickbar,
   damit kein Verweis ins Leere laeuft. */
.knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: inset 0 0 0 1px var(--line-ink); }
.knopf:disabled:hover { transform: none; }
.knopf-linie {
  background: transparent;
  color: var(--auf-bild);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild) 26%, transparent);
  --sheen: rgba(255, 255, 255, .12);
}
.knopf-linie:hover { background: color-mix(in srgb, var(--auf-bild) 10%, transparent); color: var(--auf-bild); transform: translateY(-2px); }
.block .knopf-linie, .block-dunst .knopf-linie { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--line-ink); }
.block .knopf-linie:hover, .block-dunst .knopf-linie:hover { background: rgba(10, 10, 10, .05); color: var(--tinte); }

/* Heller Zweitknopf — fuer dunkle Buehnen, wo die Linien-Variante
   zu leise waere. */
.knopf-hell {
  background: var(--dunst);
  color: var(--tinte);
  --sheen: rgba(10, 10, 10, .12);
}
.knopf-hell:hover { background: #fff; color: var(--tinte); transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(0,0,0,.6); }

/* Knopf im Kopfbereich deutlich breiter als die uebrigen */
.kopf .knopf { padding-left: 30px; padding-right: 30px; }

/* ------------------------------------------------ Lesefortschritt ------ */

.lesefortschritt {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 200;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ------------------------------------------------ Kopfbereich ---------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--kopf-grund);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--weg), border-color .4s var(--weg);
}
.kopf.kompakt { background: var(--kopf-grund-kompakt); border-bottom-color: var(--line); }

.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  /* Die Kopfhoehe folgt dem Logo, sonst schneidet sie eine hohe
     Wortmarke unten ab. 88 Pixel bleiben die Untergrenze. */
  gap: 24px; height: max(88px, calc(var(--logo-hoehe, 40px) + 20px));
  transition: height .4s var(--weg);
}
.kopf.kompakt .kopf-innen { height: max(68px, calc(var(--logo-hoehe, 40px) * var(--logo-kompakt, .70) + 16px)); }

.marke { display: inline-flex; align-items: center; flex-shrink: 0; }
.marke img {
  height: var(--logo-hoehe, 40px); width: auto;
  filter: var(--logo-filter, none);
  transition: height .4s var(--weg), transform .5s var(--weg), filter .4s var(--weg);
}
.kopf.kompakt .marke img { height: calc(var(--logo-hoehe, 40px) * var(--logo-kompakt, .70)); }
.marke:hover img { transform: scale(1.04); filter: var(--logo-filter-hover, var(--logo-filter, none)); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav a:not(.knopf) {
  position: relative;
  font-size: 14.5px; font-weight: 500;
  color: color-mix(in srgb, var(--auf-ink) 72%, transparent);
  padding: 8px 0;
  transition: color .3s var(--weg);
}
.nav a:not(.knopf)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--akzent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--weg);
}
.nav a:not(.knopf):hover { color: var(--cream); }
.nav a:not(.knopf):hover::after, .nav a.aktiv:not(.knopf)::after { transform: scaleX(1); }
/* Der Knopf in der Navigation traegt seine eigene Flaeche und Schrift.
   Ohne :not(.knopf) faerbte .aktiv ihn in die Textfarbe und die Schrift
   verschwand auf dem Markenton. */
.nav a.aktiv:not(.knopf) { color: var(--cream); }

.nav-schalter {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
}
.nav-schalter span {
  display: block; width: 22px; height: 1.5px; margin: 5px auto;
  background: var(--cream); border-radius: 2px;
  transition: transform .4s var(--weg), opacity .3s var(--weg);
}
.nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------ Buehne --------------- */

.buehne {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(86vh, 820px);
  padding: 140px 0 clamp(60px, 7vw, 100px);
  background: var(--ink);
  overflow: hidden;
}
/* Die Unterseiten-Buehne war mit 480 px zu flach, das Bild wirkte wie ein
   Streifen. Jetzt naeher an der Startseite, aber weiterhin klar kuerzer. */
.buehne-kurz { min-height: min(72vh, 640px); padding-top: 148px; }

.buehne-bild { position: absolute; inset: -8% 0; z-index: 0; overflow: hidden; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--buehne-lage, center 45%); }
.buehne-bild::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.34) 34%, rgba(10,10,10,.88) 100%),
    linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.30) 62%, transparent 100%);
}
.buehne .spur { position: relative; z-index: 2; width: 100%; }
/* Die Eyebrow darf nicht mit umbrechen — nur Titel und Fliesstext
   werden auf Lesebreite gehalten. */
.buehne-text { max-width: 62ch; }
.buehne .hut { max-width: none; }
.buehne h1 { color: var(--auf-bild); max-width: 19ch; }
.buehne p {
  /* Ueber einem Foto liegt immer noch die Abdunklung. 78 Prozent Deckung
     lasen sich darauf grau statt hell, deshalb 92. */
  color: color-mix(in srgb, var(--auf-bild-leise) 92%, transparent);
  font-size: clamp(17px, 1.5vw, 21px);
  max-width: 48ch; margin-top: 24px;
}
.buehne .hut { color: var(--auf-bild-akzent); }
/* Auf hellen Abschnitten ist der volle Markenton zu leise: das Gold von
   La Casetta kam auf Weiss nur auf 2,2:1. Dort steht die tiefe Variante. */
.block .hut, .block-dunst .hut, .block-bildrand .hut { color: var(--akzent-tief); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.knopfreihe-mitte { justify-content: center; }

/* Scroll-Hinweis */
.scrollhinweis {
  position: absolute; left: var(--pad); bottom: 30px; z-index: 3;
  width: 22px; height: 36px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--auf-bild) 26%, transparent);
  pointer-events: none;
}
.scrollhinweis::after {
  content: '';
  position: absolute; left: 50%; top: 8px;
  width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 2px; background: var(--auf-bild-akzent);
  animation: radLauf 2.1s var(--weg) infinite;
}
@keyframes radLauf {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ------------------------------------------------ Stichworte ----------- */

.stichworte { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; }
.stichworte li {
  list-style: none;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  /* Leicht mit dem Markenton hinterlegt. Als reine Kontur ueber einem Foto
     verschwanden die Marken je nach Bildstelle. */
  background: color-mix(in srgb, var(--auf-bild-akzent) 15%, transparent);
  color: var(--auf-bild);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild-akzent) 42%, transparent);
  transition: background-color .35s var(--weg), color .35s var(--weg), box-shadow .35s var(--weg);
}
.stichworte li:hover {
  background: color-mix(in srgb, var(--auf-bild-akzent) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild-akzent) 70%, transparent);
}
.stichworte-hell li, .stichworte-dunkel li { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-ink); }
.stichworte-hell li:hover, .stichworte-dunkel li:hover { background: rgba(10, 10, 10, .04); color: var(--tinte); }

/* ------------------------------------------------ Karten --------------- */

.gitter { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.gitter-1 { grid-template-columns: 1fr; }
.gitter-2 { grid-template-columns: repeat(2, 1fr); }
.gitter-3 { grid-template-columns: repeat(3, 1fr); }

.karte {
  position: relative;
  background: var(--papier);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.karte:hover { box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 30px 60px -24px rgba(10,10,10,.4); }
.block-dunkel .karte, .block-schicht .karte {
  background: var(--layer-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: color-mix(in srgb, var(--auf-ink) 70%, transparent);
}
.block-dunkel .karte:hover, .block-schicht .karte:hover {
  box-shadow: inset 0 0 0 1px var(--line-stark), 0 30px 60px -24px rgba(0,0,0,.7);
}
a.karte { display: block; color: inherit; }
a.karte:hover { color: inherit; }

.karte-text { padding: clamp(24px, 2.2vw, 34px); }
.karte h2 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.22; margin-bottom: .5em; }
.karte h3 { margin-bottom: .5em; }
.karte p { color: var(--text-leise); margin-bottom: 0; font-size: 15.5px; }
.block-dunkel .karte p, .block-schicht .karte p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

.karte-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--layer); }
.karte-bild-hoch { aspect-ratio: 3 / 4; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weg); }
.karte:hover .karte-bild img { transform: scale(1.06); }
.karte-abstand { margin-top: 18px; }

.sinnbild {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 22px;
  border-radius: 13px;
  background: var(--akzent-dunst, rgba(0,0,0,.05));
  color: var(--akzent-tief);
  transition: background-color .45s var(--weg), color .45s var(--weg), transform .5s var(--weg);
}
.sinnbild svg { width: 22px; height: 22px; }
.karte:hover .sinnbild { background: var(--akzent); color: var(--knopf-schrift, #fff); transform: translateY(-2px); }
.block-dunkel .sinnbild, .block-schicht .sinnbild { background: color-mix(in srgb, var(--auf-ink) 7%, transparent); color: var(--akzent); }

.hinweis {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  color: var(--akzent-tief);
  transition: color .35s var(--weg);
}
.block-dunkel .hinweis, .block-schicht .hinweis { color: var(--akzent); }
.hinweis svg { width: 15px; height: 15px; transition: transform .45s var(--weg); }
a.karte:hover .hinweis svg { transform: translateX(6px); }

/* ------------------------------------------------ Stimmen -------------- */

/* Kundenstimmen sind unterschiedlich lang. In einem festen Raster bliebe bei
   fuenf Karten ein Platz leer. Spalten statt Raster: die Karten fliessen und
   es entsteht kein Loch, egal wie viele es sind. */
.stimmen-spalten { columns: 1; column-gap: clamp(16px, 1.6vw, 24px); }
@media (min-width: 700px)  { .stimmen-spalten { columns: 2; } }
@media (min-width: 1100px) { .stimmen-spalten { columns: 3; } }
.stimmen-spalten .stimme { break-inside: avoid; margin-bottom: clamp(16px, 1.6vw, 24px); }

.stimme {
  margin: 0;
  padding: clamp(26px, 2.4vw, 38px);
  border-radius: 18px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.stimme:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 30px 60px -24px rgba(10,10,10,.38); }
.block-dunkel .stimme, .block-schicht .stimme { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line); }
.stimme blockquote { margin: 0 0 18px; }
.stimme blockquote p {
  font-family: var(--display);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.55; color: var(--tinte);
}
.block-dunkel .stimme blockquote p, .block-schicht .stimme blockquote p { color: var(--cream); }
.stimme figcaption { font-size: 13.5px; color: var(--text-leise); }
.stimme cite { font-style: normal; font-weight: 600; color: var(--akzent-tief); }
.block-dunkel .stimme cite, .block-schicht .stimme cite { color: var(--akzent); }
.sterne { display: flex; gap: 3px; margin-bottom: 16px; }
.sterne svg { width: 15px; height: 15px; fill: var(--akzent); }

/* Warnkarte in unfertigen Rechtstexten — unuebersehbar */
.karte-warnung {
  background: var(--akzent-dunst);
  box-shadow: inset 0 0 0 1.5px var(--akzent);
  margin-bottom: 34px;
}
.karte-warnung h2 { margin-top: 0; font-size: clamp(18px, 1.5vw, 22px); color: var(--akzent-tief); }
.karte-warnung code { background: rgba(10,10,10,.07); padding: 1px 6px; border-radius: 4px; font-size: .92em; }

/* ------------------------------------------------ Zahlen --------------- */

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 20px); }
/* Feste Spaltenzahl passend zur Kachelzahl. Vier Spalten bei drei
   Kacheln liessen rechts einen leeren Platz stehen. */
.zahlen-drei { grid-template-columns: repeat(3, 1fr); }
.zahlen-sechs { grid-template-columns: repeat(3, 1fr); }
/* Gefuellt statt nur umrandet: als reine Kontur wirkten die Kaesten leer.
   Der Grund ist der Markenakzent in der dunklen Variante, die Schrift darauf
   creme. Kontraste je Marke nachgerechnet, siehe Markendateien. */
.zahl {
  padding: clamp(26px, 2.4vw, 38px) clamp(20px, 2vw, 28px);
  border-radius: 18px;
  background: var(--akzent-tief);
  color: var(--cream);
  box-shadow: none;
  transition: transform .5s var(--weg), box-shadow .5s var(--weg), background-color .4s var(--weg);
}
.zahl:hover {
  transform: translateY(-3px);
  background: var(--akzent-hell-tief, var(--akzent-tief));
  box-shadow: 0 20px 46px -22px var(--akzent-schatten);
}
.block-dunkel .zahl, .block-schicht .zahl { background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.zahl b {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1; letter-spacing: -.03em;
  color: var(--akzent-tief); margin-bottom: 10px;
}
.block-dunkel .zahl b, .block-schicht .zahl b { color: var(--akzent); }
.zahl span { font-size: 14.5px; color: var(--text-leise); }
.block-dunkel .zahl span, .block-schicht .zahl span { color: color-mix(in srgb, var(--auf-ink) 76%, transparent); }
.zahlen-wort .zahl span:first-child {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 90%, transparent); margin-bottom: 8px;
}
/* Hoehere Spezifitaet als .zahlen .zahl b weiter unten. Sonst gewinnt
   dort der Zahlgrad von 50 px und ein Wort wie "Intensivpflegekraefte"
   steht in vier getrennten Zeilen in einer 215 Pixel breiten Kachel. */
.zahlen.zahlen-wort .zahl b { font-size: clamp(18px, 1.7vw, 25px); color: var(--cream); line-height: 1.25; }
.block-dunkel .zahlen.zahlen-wort .zahl b, .block-schicht .zahlen.zahlen-wort .zahl b { color: var(--cream); }
.block-dunkel .zahlen-wort .zahl span:first-child, .block-schicht .zahlen-wort .zahl span:first-child { color: var(--akzent); }

/* ------------------------------------------------ Zweispalter ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 84px); align-items: center; }
.duo-bild { overflow: hidden; border-radius: 20px; }
.duo-bild img { width: 100%; }
.duo-bild-hoch img { aspect-ratio: 3 / 4; object-fit: cover; }

.haken { list-style: none; margin: 28px 0 0; padding: 0; }
.haken li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  font-size: 15.5px; color: inherit;
}
.haken li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
}

/* --------------------------------------------- Abschnitt mit Randbild ---
   Das Foto sitzt nicht als Karte in der Mitte, sondern laeuft rechts in den
   Abschnitt hinein und wird nach links in den Untergrund geblendet. */

.block-bildrand { position: relative; overflow: hidden; }
.bildrand-bild { position: absolute; inset: 0 0 0 auto; width: min(50%, 720px); }
.bildrand-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.bildrand-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bildrand-grund, var(--papier)) 0%,
    color-mix(in srgb, var(--bildrand-grund, var(--papier)) 55%, transparent) 34%,
    transparent 76%);
}
.block-dunst.block-bildrand { --bildrand-grund: var(--dunst); }
.bildrand-text { position: relative; z-index: 1; max-width: 46ch; }

@media (max-width: 900px) {
  .bildrand-bild {
    position: relative; inset: auto; width: 100%; height: clamp(220px, 42vw, 320px);
    margin-top: clamp(32px, 4vw, 48px); border-radius: 20px; overflow: hidden;
  }
  .bildrand-bild::after { display: none; }
  .bildrand-text { max-width: none; }
}

/* ------------------------------------------------ Bildband ------------- */

.bildband {
  position: relative; height: clamp(320px, 46vw, 520px);
  display: flex; align-items: center; overflow: hidden; background: var(--ink);
}
.bildband img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; object-position: var(--band-lage, center 50%); }
.bildband::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.3) 100%);
}
.bildband-hoch { height: clamp(400px, 56vw, 640px); }
.bildband .spur { position: relative; z-index: 2; }
.bildband h2 { color: var(--auf-bild); max-width: 18ch; }
/* Ueberschrift mit gesetztem Umbruch: die Zeilenbreite darf sie nicht
   ein zweites Mal brechen. */
.bildband h2.h2-breit { max-width: none; }
.bildband p { color: color-mix(in srgb, var(--auf-bild-leise) 88%, transparent); max-width: 50ch; margin-bottom: 0; }

/* --------------------------------------------- Reservierung ------------
   Zwei-Klick-Loesung: erst der Hinweis, nach dem Klick das Fenster des
   Anbieters. Vorher geht kein Aufruf an einen fremden Server. */

.reservierung { border-radius: 20px; overflow: hidden; }
.reservierung-hinweis {
  background: var(--dunst); border-radius: 20px;
  padding: clamp(28px, 3.4vw, 46px);
  text-align: center;
}
.block-dunkel .reservierung-hinweis, .block-schicht .reservierung-hinweis {
  background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line);
}
.reservierung-hinweis p { max-width: 56ch; margin: 0 auto 22px; color: var(--text-leise); }
.block-dunkel .reservierung-hinweis p, .block-schicht .reservierung-hinweis p { color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.reservierung-rahmen {
  display: block; width: 100%; height: clamp(620px, 78vh, 860px);
  border: 0; border-radius: 20px; background: var(--papier);
}

/* ------------------------------------------------ Speisekarte ---------- */

.karten-wahl {
  display: flex; gap: clamp(18px, 2.4vw, 36px);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line-ink);
  margin-bottom: clamp(34px, 4vw, 54px);
}
.karten-wahl::-webkit-scrollbar { display: none; }
.karten-reiter {
  flex-shrink: 0; appearance: none; background: none; border: 0;
  padding: 0 0 16px; margin-bottom: -1px; cursor: pointer;
  font-family: var(--fliess), sans-serif;
  font-size: clamp(12px, .9vw, 13.5px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);
  border-bottom: 2px solid transparent;
  transition: color .35s var(--weg), border-color .35s var(--weg);
}
.karten-reiter:hover { color: var(--tinte); }
.karten-reiter[aria-selected="true"] { color: var(--akzent-tief); border-bottom-color: var(--akzent); }

.karten-notiz { color: var(--text-leise); font-size: 15.5px; margin-bottom: clamp(24px, 2.6vw, 34px); }
.karten-notiz-mitte { text-align: center; margin-top: 18px; }

.karten-liste { list-style: none; margin: 0; padding: 0; }
.karten-liste li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line-ink);
}
.karten-liste li:last-child { border-bottom: 0; }
.karten-liste b { font-family: var(--display); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.karten-liste .gericht { display: block; }
.karten-liste .gericht span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--text-leise); }
.karten-liste .fuellung { flex: 1; height: 1px; background: var(--line-ink); transform: translateY(-3px); }
.karten-liste .preis { flex-shrink: 0; font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Galerie -------------- */

/* Vier Kacheln je Reihe, dafuer laeuft die Galerie in einer breiteren Spur. */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.1vw, 16px); }
.g-galerie .spur { max-width: 1480px; }
.galerie figure {
  margin: 0; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Der Platzhalter muss zum Abschnitt passen. Vorher stand hier --layer
     (#141414), dadurch zeigte jede noch nicht gezeichnete Kachel auf hellem
     Grund ein schwarzes Rechteck. */
  background: var(--dunst-tief);
  transition: transform .55s var(--weg);
}
.block-dunkel .galerie figure, .block-schicht .galerie figure { background: var(--layer); }
.galerie figure:hover { transform: translateY(-4px); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--weg); }
.galerie figure:hover img { transform: scale(1.07); }

/* --------------------------------------------- Namenskacheln ----------
   Ansprechpartner ohne Portraet. Flexraster statt Grid, damit eine
   angebrochene letzte Reihe mittig sitzt und keine Luecke stehen bleibt. */

.namenskacheln {
  --kachel-luecke: clamp(14px, 1.5vw, 22px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--kachel-luecke);
}
.namenskacheln li {
  flex: 0 1 calc((100% - 3 * var(--kachel-luecke)) / 4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(20px, 1.9vw, 28px);
  background: var(--papier);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.kacheln-drei li { flex-basis: calc((100% - 2 * var(--kachel-luecke)) / 3); }
.namenskacheln li:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 26px 52px -22px rgba(10,10,10,.36);
}
.block-dunkel .namenskacheln li, .block-schicht .namenskacheln li {
  background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line);
}
.namenskacheln b {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 6px;
}
.block-dunkel .namenskacheln b, .block-schicht .namenskacheln b { color: color-mix(in srgb, var(--auf-ink) 50%, transparent); }
.namenskacheln .name {
  display: block; font-family: var(--display);
  font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.25; letter-spacing: -.01em;
}
.namenskacheln a { font-weight: 500; display: inline-block; margin-top: 8px; }

/* Zwischenueberschrift ueber einer Kachelgruppe. Ohne den Strich der
   normalen Hutzeile, der stoert hier ueber mittig gesetzten Kacheln. */
.hut-abschnitt { display: flex; justify-content: center; margin: 0 0 20px; }
.hut-abschnitt::before { display: none; }
.namenskacheln + .hut-abschnitt { margin-top: clamp(34px, 3.4vw, 52px); }

@media (max-width: 1080px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: calc((100% - 2 * var(--kachel-luecke)) / 3); }
}
@media (max-width: 780px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: calc((100% - var(--kachel-luecke)) / 2); }
}
@media (max-width: 470px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: 100%; }
}

/* ------------------------------------------------ Zeilenlisten --------- */

.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line-ink);
}
.block-dunkel .zeilen li, .block-schicht .zeilen li { border-bottom-color: var(--line); }
.zeilen li:first-child { padding-top: 0; }
.zeilen li:last-child { border-bottom: 0; padding-bottom: 0; }
.marke-punkt {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent-dunst, rgba(0,0,0,.05));
}
.marke-punkt svg { width: 17px; height: 17px; fill: var(--akzent-tief); }
.block-dunkel .marke-punkt, .block-schicht .marke-punkt { background: color-mix(in srgb, var(--auf-ink) 7%, transparent); }
.block-dunkel .marke-punkt svg, .block-schicht .marke-punkt svg { fill: var(--akzent); }
.zeilen b {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 5px;
}
.block-dunkel .zeilen b, .block-schicht .zeilen b { color: color-mix(in srgb, var(--auf-ink) 50%, transparent); }
.zeilen a { font-weight: 500; }

.zeiten { list-style: none; margin: 0; padding: 0; }
.zeiten li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line-ink); font-size: 15px; }
.zeiten li:last-child { border-bottom: 0; }
.zeiten b { color: var(--tinte); font-weight: 600; }
.zeiten span { color: var(--text-leise); text-align: right; }

/* ------------------------------------------------ Formular ------------- */

.formular { background: var(--papier); border-radius: 20px; padding: clamp(26px, 3vw, 44px); box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 16px 44px -22px rgba(10,10,10,.3); }
.block-dunkel .formular, .block-schicht .formular { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--tinte); margin-bottom: 7px; }
.block-dunkel .feld label, .block-schicht .feld label { color: var(--cream); }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: 14px 16px;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(10,10,10,.035);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  transition: box-shadow .3s var(--weg), background-color .3s var(--weg);
}
.block-dunkel .feld input, .block-dunkel .feld textarea, .block-dunkel .feld select,
.block-schicht .feld input, .block-schicht .feld textarea, .block-schicht .feld select {
  background: color-mix(in srgb, var(--auf-ink) 5%, transparent); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line);
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: 0; background: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 0 4px var(--akzent-dunst, rgba(0,0,0,.06));
}
/* Der Stern stand im vollen Markenton auf Weiss bei 2,7:1. */
.pflicht { color: var(--akzent-tief); }
.block-dunkel .pflicht, .block-schicht .pflicht { color: var(--akzent); }
.feld-hinweis { font-size: 13px; color: var(--text-leise); margin-bottom: 18px; }
.zustimmung { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.zustimmung input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; accent-color: var(--akzent); }
.zustimmung label { font-size: 13.5px; font-weight: 400; color: var(--text-leise); line-height: 1.55; margin: 0; }

/* ------------------------------------------------ Fragen --------------- */

.frage { border-bottom: 1px solid var(--line-ink); }
.block-dunkel .frage, .block-schicht .frage { border-bottom-color: var(--line); }
.frage summary {
  position: relative; padding: 24px 56px 24px 0;
  font-family: var(--display); font-size: clamp(17px, 1.35vw, 21px); font-weight: 700;
  letter-spacing: -.01em; color: var(--tinte);
  cursor: pointer; list-style: none;
  transition: color .3s var(--weg);
}
.block-dunkel .frage summary, .block-schicht .frage summary { color: var(--cream); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--akzent); border-bottom: 1.5px solid var(--akzent);
  transform: rotate(45deg); transition: transform .45s var(--weg);
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.frage summary:hover { color: var(--akzent); }
.frage p { padding: 0 40px 24px 0; color: var(--text-leise); margin: 0; }
.block-dunkel .frage p, .block-schicht .frage p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

/* ------------------------------------------------ Rechtstexte ---------- */

.recht { color: var(--text); }
.recht h1 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: .6em; }
.recht h2 { font-size: clamp(20px, 1.7vw, 25px); margin-top: 2em; }
.recht h3 { margin-top: 1.6em; font-size: 17px; }
.recht ul { padding-left: 20px; }
.recht li { margin-bottom: 7px; }
.recht address { font-style: normal; margin-bottom: 1.1em; }

/* ------------------------------------------------ Fussbereich ---------- */

.fuss { background: var(--ink); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); padding: clamp(64px, 7vw, 100px) 0 0; }
.fuss-gitter { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
.fuss h2 { color: var(--cream); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--fliess), sans-serif; font-weight: 600; }
.fuss img {
  height: var(--logo-fuss-hoehe, 40px); width: auto; margin-bottom: 22px;
  filter: var(--logo-fuss-filter, none);
  transition: filter .4s var(--weg), transform .5s var(--weg);
}
.fuss-marke:hover img {
  filter: var(--logo-filter-hover, var(--logo-fuss-filter, none));
  transform: scale(1.03);
}
.fuss p { font-size: 14.5px; max-width: 42ch; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 10px; font-size: 14.5px; }
.fuss a { color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.fuss a:hover { color: var(--akzent); }
.fuss-riegel {
  margin-top: clamp(46px, 5vw, 70px); padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px;
}
.fuss-riegel nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ------------------------------------------------ Planer --------------- */

.planer { background: var(--papier); border-radius: 20px; padding: clamp(26px, 3vw, 46px); box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 16px 44px -22px rgba(10,10,10,.3); }
.planer-kopf { margin-bottom: 30px; }
.fortschritt-zeile { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.fortschritt { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border: 0; border-radius: 999px; background: var(--line-ink); overflow: hidden; }
.fortschritt::-webkit-progress-bar { background: var(--line-ink); border-radius: 999px; }
.fortschritt::-webkit-progress-value { background: var(--akzent); border-radius: 999px; transition: width .5s var(--weg); }
.fortschritt::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.fortschritt-text { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.schritt { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.schritt + .schritt { margin-top: 40px; }
.planer-schrittweise .schritt + .schritt { margin-top: 0; }
.schritt legend { padding: 0; font-family: var(--display); font-size: clamp(20px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.015em; color: var(--tinte); line-height: 1.2; margin-bottom: 8px; }
.schritt-hinweis { color: var(--text-leise); font-size: 15px; margin-bottom: 22px; }
.wahlgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wahlgitter-3 { grid-template-columns: repeat(3, 1fr); }
.wahl { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wahl span {
  display: flex; align-items: center; min-height: 58px; padding: 14px 18px;
  border-radius: 13px; background: rgba(10,10,10,.03);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  font-size: 15px; font-weight: 500; color: var(--tinte); line-height: 1.35;
  transition: background-color .3s var(--weg), box-shadow .3s var(--weg), color .3s var(--weg);
}
.wahl:hover span { box-shadow: inset 0 0 0 1px var(--akzent); }
.wahl input:checked + span, .wahl.gewaehlt span {
  background: var(--akzent-dunst, rgba(0,0,0,.05));
  box-shadow: inset 0 0 0 1.5px var(--akzent);
  color: var(--akzent-tief);
}
.wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.planer-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-ink); }
.planer-fuss .knopf-linie { margin-right: auto; }
.planer-meldung { flex-basis: 100%; color: var(--akzent); font-weight: 600; font-size: 14px; }
.planer-meldung:empty { display: none; }
.planer-hinweis { font-size: 13.5px; color: var(--text-leise); margin-top: 20px; }

/* ------------------------------------------------ Bewegung ------------- */

.js [data-auf] { opacity: 0; transition: opacity .9s var(--weg), transform .9s var(--weg), clip-path 1s var(--weg); will-change: transform, opacity; }
.js [data-auf="hoch"]   { transform: translate3d(0, 38px, 0); }
.js [data-auf="gross"]  { transform: scale(.95); }
.js [data-auf="links"]  { transform: translate3d(-40px, 0, 0); }
.js [data-auf="rechts"] { transform: translate3d(40px, 0, 0); }
/* Der seitliche Versatz von 40 px passt nur, solange der Aussenabstand
   der Spur mindestens genauso gross ist. --pad ist 22, 32 und erst ab
   1100 px 48. Darunter ragt eine Spalte am rechten Rand heraus und das
   Dokument laesst sich querschieben, bis das Element eingeblendet ist.
   Deshalb laeuft der Versatz unterhalb von 1100 px senkrecht. */
@media (max-width: 1099px) {
  .js [data-auf="links"], .js [data-auf="rechts"] { transform: translate3d(0, 30px, 0); }
}
.js [data-auf].da { opacity: 1; transform: none; }
.js [data-auf-verzug="1"] { transition-delay: .1s; }
.js [data-auf-verzug="2"] { transition-delay: .2s; }
.js [data-auf-verzug="3"] { transition-delay: .3s; }

.js .folge-kind { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .85s var(--weg), transform .85s var(--weg); }
.js [data-auf-folge].da .folge-kind { opacity: 1; transform: none; }

/* Der Kasten schneidet fuer die Aufblendung ab. Gemessen bei noa.s:
   die Fraunces steht mit 20 Einheiten Unterlaenge in einem Zeilenkasten,
   der nur 13,2 Pixel unter der Grundlinie hat, dem g fehlten 5,9 Pixel.
   Luft rein, Aussenabstand wieder raus: das Layout bleibt gleich. */
.wort {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: .06em 0 .14em;
  margin: -.06em 0 -.14em;
}
.wort-innen { display: inline-block; }
.js [data-worte] .wort-innen { transform: translate3d(0, 126%, 0); transition: transform 1s var(--weg); }
.js [data-worte].da .wort-innen { transform: none; }

[data-tiefe] { will-change: transform; }
[data-neigung] { transform-style: preserve-3d; }
[data-schein] { position: relative; }
[data-schein]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--zx,50%) var(--zy,50%), var(--scheinfarbe, rgba(255,255,255,.5)), transparent 60%);
  opacity: 0; transition: opacity .5s var(--weg); pointer-events: none; z-index: 0;
}
[data-schein]:hover::before { opacity: 1; }
[data-schein] > * { position: relative; z-index: 1; }
.block-dunkel [data-schein], .block-schicht [data-schein] { --scheinfarbe: color-mix(in srgb, var(--auf-ink) 5.5%, transparent); }


/* ------------------------------------------------ Schmale Schirme ------ */

@media (max-width: 1240px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) {
  .gitter-3 { grid-template-columns: repeat(2, 1fr); }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .duo-bild { order: -1; }
  .fuss-gitter { grid-template-columns: 1fr 1fr; }
  .nav-schalter { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--ink); border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 26px;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .45s var(--weg), opacity .35s var(--weg), visibility .35s;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav.offen { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.knopf) { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a:not(.knopf)::after { display: none; }
  .kopf .knopf { margin-top: 18px; }
  .kopf-innen { height: 68px; }
  .buehne-text { max-width: none; }
}

@media (max-width: 660px) {
  .gitter-2, .gitter-3, .galerie, .zahlen, .feldpaar, .fuss-gitter, .wahlgitter, .wahlgitter-3 { grid-template-columns: 1fr; }
  .knopfreihe .knopf { width: 100%; }
  .planer-fuss .knopf { width: 100%; }
  .planer-fuss .knopf-linie { margin-right: 0; }
  .fuss-riegel { flex-direction: column; }
  .buehne { min-height: min(88vh, 720px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-auf], .js .folge-kind, .js [data-worte] .wort-innen { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .korn::after, .knopf::after, [data-schein]::before, .scrollhinweis { display: none; }
  }


/* ---------------------------------------------------- Personen im Team
   Feste Spaltenzahl statt auto-fit: die Anzahl der Personen ist bekannt,
   und auto-fit liesse bei ungeraden Zahlen leere Plaetze stehen. */
.personen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 34px);
}
@media (min-width: 620px)  { .personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .personen { grid-template-columns: repeat(3, 1fr); } }

.person { margin: 0; }
.person img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%;
  border-radius: 18px;
  filter: saturate(.92);
  transition: transform .6s var(--weg), filter .5s var(--weg), box-shadow .5s var(--weg);
}
.person:hover img {
  transform: translateY(-4px) scale(1.015);
  filter: saturate(1);
  box-shadow: 0 24px 56px -26px var(--akzent-schatten);
}
.person h3 {
  margin: 18px 0 2px; font-size: clamp(18px, 1.5vw, 22px);
  color: var(--cream); letter-spacing: -.01em;
}
.block .person h3, .block-dunst .person h3 { color: var(--tinte); }
.person p {
  margin: 0; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent); font-weight: 600;
}
.block .person p, .block-dunst .person p { color: var(--akzent-tief); }


/* Hinweis, solange kein Formularziel hinterlegt ist. */
.formular-hinweis {
  margin: 20px 0 0; padding: 14px 18px;
  border-radius: 12px; font-size: 14.5px; line-height: 1.6;
  background: var(--akzent-dunst);
  color: var(--akzent-tief);
  box-shadow: inset 0 0 0 1px var(--akzent-schatten);
}


/* Zahl oben, Erlaeuterung darunter. Vorher stand ein Fuellwort ueber einem
   Substantiv ("Erstklassiger Service"), das trug nichts und die Kaesten
   wirkten leer. Jetzt eine pruefbare Zahl mit einer Zeile Erklaerung. */
.zahlen .zahl b {
  display: block; font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 50px); line-height: 1;
  letter-spacing: -.03em; color: var(--cream); margin-bottom: 10px;
}
.zahlen .zahl span {
  display: block; font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
}


/* ------------------------------------------------ Stimmen als Laufband ---
   Die Karten laufen in einer Zeile durch. Der zweite Satz ist eine Kopie und
   traegt aria-hidden, damit Vorlesewerkzeuge die Zitate nicht doppelt lesen.
   Bewegt wird nur transform, es gibt also keinen Layout-Shift.

   Das Laufband haelt an, sobald der Zeiger darauf liegt oder etwas darin den
   Tastaturfokus hat. Sonst koennte man einen Text nicht zu Ende lesen. */
.stimmen-lauf {
  overflow: hidden;
  /* Platz fuer den Schatten der Karten, sonst schneidet ihn overflow ab */
  margin: 0 calc(var(--pad) * -1);
  padding: 14px var(--pad) 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stimmen-spur {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 24px);
  width: max-content;
  animation: stimmen-zug 70s linear infinite;
}
.stimmen-lauf:hover .stimmen-spur,
.stimmen-lauf:focus-within .stimmen-spur { animation-play-state: paused; }

.stimmen-spur .stimme {
  width: min(420px, 78vw);
  flex: 0 0 auto;
  display: flex; flex-direction: column;
}
.stimmen-spur .stimme blockquote { flex: 1 1 auto; }

@keyframes stimmen-zug {
  /* Genau die halbe Strecke, dann steht der zweite Satz deckungsgleich
     ueber dem ersten und der Sprung ist unsichtbar. Die Luecke nach der
     letzten Karte muss mitgerechnet werden. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - clamp(16px, 1.6vw, 24px) / 2), 0, 0); }
}

/* Ohne Bewegungswunsch: keine Animation, dafuer von Hand schiebbar. */
@media (prefers-reduced-motion: reduce) {
  .stimmen-spur { animation: none; }
  .stimmen-lauf { overflow-x: auto; scroll-snap-type: x mandatory; }
  .stimmen-spur .stimme { scroll-snap-align: start; }
}


/* Fliesstext, der buendig unter dem Buehnentext beginnen soll, statt
   mittig in der Spur zu stehen. */
.text-links { max-width: 68ch; margin-bottom: clamp(40px, 4.4vw, 64px); }
/* ============================================================
   Ehrenwert Immobilien, Inh. Selin Yilmaz, Kerpen-Sindorf

   DNA der alten Seite: weisse Flaechen im Wechsel mit Schiefergrau
   #4E565A, Knoepfe in Magenta #E51467, Kacheln im Kitt-Ton #B2B09C.
   Die Wortmarke ist zweistufig: "ehren" haarfein im Kitt-Ton,
   "wert" fett in Magenta, darunter IMMOBILIEN in Versalien.

   Grundton hell wie bei noa.s (Tokens umgedreht). Kopf, Fuss und
   die Gegenabschnitte laufen in Schiefer ueber die Klasse .gegen,
   die die Tokens lokal dreht. So steht das Logo wie auf der alten
   Seite auf Schiefer: Kitt-Ton dort 4,67:1, auf Weiss nur 2,1:1.

   Schrift: Satoshi, wie auf der alten Seite (dort vom Fremdserver
   geladen, hier lokal). Sie passt zur geometrischen Wortmarke.

   Gemessen (WCAG):
     Magenta #E51467 auf Weiss         4,54:1  (Linien, Akzente)
     #C10F57 (akzent-tief) auf Weiss   6,05:1  (Hutzeilen, Hinweise)
     #C10F57 auf Dunst #F1F0EA         5,45:1
     Weiss auf Knopf #CC1260           5,40:1
     Kitt #CFCDBB auf Schiefer #3B4245 6,30:1  (Hutzeilen auf Schiefer)
     Creme #F5F3EE auf Schiefer        9,23:1
   ============================================================ */
:root {
  --fliess:  'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  /* Umkehrung: helle Flaeche, dunkle Schrift */
  --ink:        #F6F5F1;
  --layer:      #EEEDE7;
  --layer-2:    #E6E4DC;
  --cream:      #2F3538;
  --cream-tief: #252A2C;
  --auf-ink:    #2F3538;
  --muted:      #5D6468;
  --line:       rgba(47, 53, 56, .12);
  --line-stark: rgba(47, 53, 56, .24);
  --line-ink:   rgba(47, 53, 56, .13);

  /* Buehne und Bildband liegen immer auf abgedunkeltem Foto */
  --auf-bild:        #FFFFFF;
  --auf-bild-leise:  #FFFFFF;
  --auf-bild-akzent: #FFA6CA;

  --dunst:      #F1F0EA;
  --dunst-tief: #E6E4DC;

  --papier:     #FFFFFF;
  --tinte:      #2F3538;
  --text:       #4A5155;
  --text-leise: #5D6468;

  --akzent:          #E51467;
  --akzent-hell:     #F0468A;
  --akzent-tief:     #C10F57;
  --akzent-dunst:    rgba(229, 20, 103, .09);
  --akzent-schatten: rgba(193, 15, 87, .42);
  --knopf-grund:       #CC1260;
  --knopf-grund-hover: #E51467;
  --knopf-schrift:     #FFFFFF;

  /* Wortmarke 4,27:1. Bei 56 px ist IMMOBILIEN gut 13 px hoch,
     kompakt (x .8) noch knapp 11 px. Gemessen am SVG, nicht geschaetzt. */
  --logo-hoehe: 56px;
  --logo-kompakt: .8;
  --logo-filter: saturate(.9);
  --logo-fuss-hoehe: 48px;
  --logo-fuss-filter: saturate(.9);
  --logo-filter-hover: saturate(1) drop-shadow(0 0 14px rgba(229, 20, 103, .5));
  --buehne-lage: center 55%;
}

/* Schieferflaechen: Kopf, Fuss, Gegenabschnitte. Nur Tokens, den
   Rest erledigen .block-dunkel und .fuss aus dem Haussystem. */
.gegen {
  --ink:        #3B4245;
  --layer:      #343A3D;
  --layer-2:    #454C50;
  --auf-ink:    #F5F3EE;
  --cream:      #F5F3EE;
  --cream-tief: #E8E6DE;
  --dunst:      #454C50;
  --dunst-tief: #343A3D;
  --akzent:      #CFCDBB;
  --akzent-hell: #E2E0D2;
  --akzent-tief: #CFCDBB;
  --akzent-dunst: rgba(207, 205, 187, .14);
  --tinte:      #F5F3EE;
  --text:       #E4E2D9;
  --text-leise: #CBC9BD;
  --line:       rgba(245, 243, 238, .13);
  --line-stark: rgba(245, 243, 238, .26);
  --line-ink:   rgba(245, 243, 238, .2);
  --kopf-grund:         rgba(59, 66, 69, .9);
  --kopf-grund-kompakt: rgba(59, 66, 69, .97);
  --papier:     #454C50;
}

/* Satoshi traegt grosse Titel am besten mittelfett und eng */
h1, h2 { font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 5vw, 72px); line-height: 1.03; }
h2 { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.08; }
h3, .schritt legend, .frage summary { font-weight: 600; letter-spacing: -.02em; }
.hut { letter-spacing: .2em; font-weight: 700; }
.karte, .duo-bild, .galerie figure, .formular, .stimme, .zahl { border-radius: 20px; }

/* Haarlinie vor der Hutzeile in Magenta, wie "wert" in der Marke */
.hut::before { background: var(--akzent); opacity: 1; }
.buehne .hut::before { background: var(--auf-bild-akzent); }

/* Auf hellen Abschnitten liest sich der Hover der Fragen im vollen
   Magenta zu leise, deshalb die tiefe Stufe. */
.block .frage summary:hover, .block-dunst .frage summary:hover { color: var(--akzent-tief); }

/* Buehne: Titel auf zwei Zeilen halten */
.buehne-text { max-width: 980px; }
.buehne h1 { max-width: 16ch; }
.buehne-kurz h1 { max-width: 18ch; font-size: clamp(34px, 4.4vw, 62px); }

/* Vier Leistungen, vier Spalten. Darunter zwei, ganz schmal eine. */
.gitter-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .gitter-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .gitter-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Telefon im Kopf ----- */
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kopf-tel svg { width: 15px; height: 15px; fill: currentColor; }
.nav a.kopf-tel:not(.knopf)::after { display: none; }
@media (min-width: 1181px) and (max-width: 1360px) { .nav a.kopf-tel { display: none; } }

/* ------------------------------------------------ Navigation ----------
   Sechs Punkte, Telefon und der breite Knopf passen erst ab 1181 px in
   eine Zeile. Darunter dasselbe Klappmenue wie im Haussystem unter
   1000 px, nur frueher. Kopf dort fest 72 px, Logo 50 px. */
@media (max-width: 1180px) {
  .nav-schalter { display: block; }
  .kopf-innen, .kopf.kompakt .kopf-innen { height: 72px; }
  .marke img, .kopf.kompakt .marke img { height: 50px; }
  .nav {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--ink); border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 26px;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .45s var(--weg), opacity .35s var(--weg), visibility .35s;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav.offen { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.knopf) { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a:not(.knopf)::after { display: none; }
  .kopf .knopf { margin-top: 18px; }
}
@media (max-width: 400px) {
  .marke img, .kopf.kompakt .marke img { height: 44px; }
}

/* ------------------------------------------------ Zahlen auf Schiefer -- */
.gegen .zahl { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.gegen .zahl:hover { background: #4C5458; box-shadow: inset 0 0 0 1px var(--line-stark), 0 20px 46px -22px rgba(0,0,0,.5); }
.gegen .zahlen .zahl b { color: var(--cream); }
.gegen .zahlen .zahl span { color: var(--text); }

/* ------------------------------------------------ Angebote ------------
   Die Zahl der Inserate schwankt. Flexraster statt Grid, eine angebrochene
   Reihe sitzt mittig, es bleibt kein leerer Platz. */
.inserate {
  --inserat-luecke: clamp(14px, 1.4vw, 20px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inserat-luecke);
}
.inserate > * { flex: 0 1 calc((100% - 2 * var(--inserat-luecke)) / 3); }
@media (max-width: 1000px) { .inserate > * { flex-basis: calc((100% - var(--inserat-luecke)) / 2); } }
@media (max-width: 660px)  { .inserate > * { flex-basis: 100%; } }
.inserat .karte-bild { aspect-ratio: 4 / 3; }
.inserat h3 { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.3; margin-bottom: .6em; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--text-leise); }
.eckdaten li:first-child { color: var(--tinte); font-weight: 700; }
.inserat-art {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(47, 53, 56, .82); color: #FFFFFF;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.inserate-ersatz { flex-basis: 100%; text-align: center; }
.inserate-ersatz p { max-width: 56ch; margin: 0 auto 22px; color: var(--text-leise); }
.inserate-stand { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--text-leise); }

/* ------------------------------------------------ Portraet ------------ */
.portraet { position: relative; }
.portraet img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.portraet figcaption {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(47, 53, 56, .84); color: #FFFFFF;
  font-size: 14px; line-height: 1.45;
}
.portraet figcaption b { display: block; font-size: 16px; }

/* Schrittfolge: Nummer links, Text rechts, Zeilenliste statt Kacheln */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.schritte li {
  counter-increment: s; position: relative;
  padding: 0 0 26px 64px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line-ink);
}
.schritte li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.schritte li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent-dunst); color: var(--akzent-tief);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.schritte h3 { margin: 8px 0 .35em; font-size: clamp(18px, 1.45vw, 21px); }
.schritte p { color: var(--text-leise); margin: 0; }
.gegen .schritte li::before { background: color-mix(in srgb, var(--auf-ink) 9%, transparent); color: var(--akzent); }
.gegen .schritte p { color: var(--text); }

/* Kurzformular: drei Felder untereinander. Nebeneinander waren sie in der
   halben Spalte zu schmal, die Auswahl schnitt "Kostenlose Bewertung" ab. */
.feldreihe { display: grid; grid-template-columns: 1fr; gap: 0; }
.formular-kopf { margin-bottom: 22px; }
.formular-kopf h3 { margin-bottom: .3em; }
.formular-kopf p { color: var(--text-leise); margin: 0; font-size: 15.5px; }

/* Auf Schiefer bleibt das Formular hell, damit die Felder lesbar sind */
.gegen .formular {
  --papier: #FFFFFF; --tinte: #2F3538; --text: #4A5155; --text-leise: #5D6468;
  --akzent: #E51467; --akzent-tief: #C10F57; --akzent-dunst: rgba(229,20,103,.09);
  --line-ink: rgba(47,53,56,.13);
  background: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.gegen .formular .feld label { color: #2F3538; }
.gegen .formular .feld input, .gegen .formular .feld textarea, .gegen .formular .feld select {
  background: rgba(10,10,10,.035); color: #4A5155; box-shadow: inset 0 0 0 1px rgba(47,53,56,.13);
}
.gegen .formular .pflicht { color: #C10F57; }

.kontaktzeilen { margin-top: 30px; }
.text-mitte { text-align: center; }
.mehr-link { margin-top: 34px; }

/* Gruppentitel auf der Fragenseite */
.h2-gruppe { font-size: clamp(22px, 2vw, 30px); margin: clamp(44px, 5vw, 64px) 0 6px; }
.block-kopf + .h2-gruppe { margin-top: 0; }

/* Startbild Koeln, linksbuendig aus dem 16:9-Original geschnitten: der Dom
   steht bei 47 bis 73 Prozent der Breite (Mitte 65), rechts vom Text.
   Am Desktop (Seitenverhaeltnis ueber 1,5) bleibt die Breite ganz sichtbar.
   Auf 375 px gemessen: sichtbar sind 28 Prozent der Bildbreite (Bild
   420 x 1015 px). 52 % waagerecht legt das Fenster auf 37 bis 65 Prozent,
   die Tuerme (47 bis 55) stehen mittig, das Langhaus laeuft nach rechts.
   40 % senkrecht: bei 1440 x 800 fallen oben rund 7 Prozent weg, die
   Turmspitzen (15 Prozent) bleiben stehen. */
.buehne-dom { --buehne-lage: 52% 40%; }

/* Pfeil im Knopf: ohne feste Groesse spannt das SVG den Knopf auf */
.knopf svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Navigationspunkte und Knopf brechen nicht um */
.nav a, .knopf { white-space: nowrap; }

/* Gemessen: .block-dunkel h3 faerbte den Formulartitel im Schieferblock
   creme auf weisser Formularflaeche (1,11:1). */
.gegen .formular h3 { color: #2F3538; }
/* Links im Buehnentext: Magenta auf dem abgedunkelten Foto lag bei 2,8:1 */
.buehne p a, .bildband p a { color: var(--auf-bild); text-decoration: underline; text-underline-offset: 3px; }
.buehne p a:hover, .bildband p a:hover { color: var(--auf-bild-akzent); }
/* Gemessen auf Schiefer: Zeilenbeschriftung (Haus: 50 % Deckung) 3,63:1,
   Kartentext (60 %) 4,02:1. Volle Tokens statt Deckung. */
.gegen .zeilen b { color: var(--text-leise); }
.gegen .karte p { color: var(--text); }