/* Reihenfolge: Schriften, dann Haussystem, dann Marke. Marke MUSS zuletzt stehen. */
/* Lokal eingebundene Schriften, SIL Open Font License 1.1. Keine Anfrage an Google. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../schriften/montserrat-var.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('../schriften/nunitosans-300-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('../schriften/nunitosans-300-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   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); }
/* ============================================================
   Pflegedienst MediNah GmbH, Bergheim

   DNA der alten Seite: weisse Flaechen, ruhige Gruentoene (Astra-Palette
   #54B435 / #379237, leise Flaeche #F1F6EE), Titel in Montserrat fett.
   Das Logo ist ein Herz aus Gruen und Rot mit Aeskulapstab, darunter
   die Zeile "Medizinisch nah, Menschlich da". Gruen traegt die Seite,
   das Rot aus dem Herz bleibt fuer kleine Akzente (Pflichtsterne,
   Herzpunkt in der Hutzeile).

   Grundton hell (Tokens umgedreht wie bei Ehrenwert). Fuss und
   Gegenabschnitte laufen in tiefem Waldgruen ueber .gegen.

   Gemessen (WCAG):
     #387E11 (akzent-tief) auf Weiss     6,58:1  (Hutzeilen, Hinweise)
     #387E11 auf Dunst #F1F6EE           5,91:1
     Weiss auf Knopf #387E11             5,80:1
     #C81E26 (Pflichtstern) auf Weiss    5,72:1
     #59614F (leiser Text) auf Weiss     6,47:1, auf Dunst 5,80:1
     #FFFFFF auf Waldgruen #387E11       9,07:1  (Hutzeilen auf Gruen)
     #FFFFFF auf Waldgruen               12,8:1
   ============================================================ */
:root {
  --fliess:  'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Umkehrung: helle Flaeche, dunkle Schrift */
  --ink:        #FBF8F2;
  --layer:      #F1F6EE;
  --layer-2:    #E3EDDE;
  --cream:      #1F2A1B;
  --cream-tief: #387E11;
  --auf-ink:    #1F2A1B;
  --muted:      #59614F;
  --line:       rgba(31, 42, 27, .12);
  --line-stark: rgba(31, 42, 27, .24);
  --line-ink:   rgba(31, 42, 27, .13);

  /* Buehne und Bildband liegen immer auf abgedunkeltem Foto */
  --auf-bild:        #FFFFFF;
  --auf-bild-leise:  #FFFFFF;
  /* Hutzeile ueber dem Foto. #FFFFFF kam auf der Startseite bei 360 px
     auf 4,2:1 (95. Perzentil der echten Bildpixel unter der Abdunklung).
     #FFFFFF hebt das auf 4,9:1. */
  --auf-bild-akzent: #FFFFFF;

  --dunst:      #F1F6EE;
  --dunst-tief: #E3EDDE;

  --papier:     #FFFDF9;
  --tinte:      #1F2A1B;
  --text:       #434B3E;
  --text-leise: #59614F;

  --akzent:          #387E11;
  --akzent-hell:     #387E11;
  --akzent-tief:     #387E11;
  --akzent-dunst:    rgba(56, 126, 17, .10);
  --akzent-schatten: rgba(56, 126, 17, .40);
  --knopf-grund:       #387E11;
  --knopf-grund-hover: #387E11;
  --knopf-schrift:     #FFFFFF;
  --rot:             #C81E26;
  --rot-hell:        #E8202A;
  --rosa:            #FCF0EE;
  --rosa-tief:       #F7DEDA;
  --gruen-hell:      #D3E3CB;

  --kopf-grund:         rgba(255, 253, 249, .86);
  --kopf-grund-kompakt: rgba(255, 253, 249, .96);

  /* Wortmarke mit Zusatzzeile. Gemessen am PNG: die Zusatzzeile
     "Medizinisch nah, Menschlich da" belegt 7,9 Prozent der Logohoehe.
     Bei 104 px sind das gut 8 px, so viel wie bei ES Intensivpflege.
     Kompakt (x .64, 67 px) traegt nur noch die Wortmarke MediNah, die
     Zusatzzeile steht deshalb zusaetzlich als Text im Fuss. */
  --logo-hoehe: 104px;
  --logo-kompakt: .64;
  --logo-filter: saturate(.9);
  --logo-fuss-hoehe: 84px;
  --logo-fuss-filter: none;
  --logo-filter-hover: saturate(1) drop-shadow(0 0 14px rgba(56, 126, 17, .45));
  --buehne-lage: center 50%;
}

/* Waldgruene Flaechen: Fuss und Gegenabschnitte. Nur Tokens, den
   Rest erledigen .block-dunkel und .fuss aus dem Haussystem. */
.gegen {
  --ink:        #387E11;
  --layer:      #387E11;
  --layer-2:    #387E11;
  --auf-ink:    #FFFFFF;
  --cream:      #FFFFFF;
  --cream-tief: #E3EDDE;
  --dunst:      #387E11;
  --dunst-tief: #387E11;
  --akzent:      #FFFFFF;
  --akzent-hell: #FFFFFF;
  --akzent-tief: #FFFFFF;
  --akzent-dunst: rgba(255, 255, 255, .14);
  --tinte:      #FFFFFF;
  --text:       #FFFFFF;
  --text-leise: #FFFFFF;
  --line:       rgba(255, 255, 255, .13);
  --line-stark: rgba(255, 255, 255, .26);
  --line-ink:   rgba(255, 255, 255, .2);
  --kopf-grund:         rgba(56, 126, 17, .9);
  --kopf-grund-kompakt: rgba(56, 126, 17, .97);
  --papier:     #387E11;
}

/* Montserrat laeuft breit. Fett wie auf der alten Seite, aber kleinere
   Grade als bei Satoshi, sonst brechen die Titel dreizeilig. */
h1, h2 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.08; }
h2 { font-size: clamp(25px, 2.9vw, 42px); line-height: 1.14; }
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: 20ch; font-size: clamp(31px, 4vw, 56px); }

/* 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: #387E11; 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); }

/* ------------------------------------------------ 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(31, 42, 27, .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: #1F2A1B; --text: #434B3E; --text-leise: #59614F;
  --akzent: #387E11; --akzent-tief: #387E11; --akzent-dunst: rgba(56, 126, 17,.09);
  --line-ink: rgba(31,42,27,.13);
  background: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.gegen .formular .feld label { color: #1F2A1B; }
.gegen .formular .feld input, .gegen .formular .feld textarea, .gegen .formular .feld select {
  background: rgba(10,10,10,.035); color: #434B3E; box-shadow: inset 0 0 0 1px rgba(31,42,27,.13);
}
.gegen .formular .pflicht { color: #387E11; }

.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; }


/* 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: #1F2A1B; }
/* 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); }


/* ============================================================
   MediNah, eigene Bausteine
   ============================================================ */

/* Kopf hell: Logo steht farbig auf Weiss wie auf der alten Seite */
.kopf { box-shadow: 0 1px 0 rgba(31, 42, 27, .06); }
.nav a:not(.knopf) { color: #434B3E; }
.nav a:not(.knopf):hover, .nav a.aktiv:not(.knopf) { color: #1F2A1B; }

/* Pflichtstern im Rot des Herzens */
.pflicht, .gegen .formular .pflicht { color: var(--rot); }

/* Hutzeile: kraeftigere Linie im Markengruen */
.hut::before { width: 22px; height: 2px; border-radius: 2px; background: var(--akzent); }

/* Fussbereich: Logo in Weiss, die farbige Fassung haette auf Waldgruen
   eine graue Zusatzzeile (2,1:1). */
.fuss-marke img { height: var(--logo-fuss-hoehe); width: auto; }

/* Mitgliedschaft im bpa */
.mitglied { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.mitglied img { width: 64px; height: auto; border-radius: 10px; background: #FFFFFF; padding: 8px; }
.mitglied span { font-size: 13.5px; line-height: 1.45; color: var(--text); }

/* Hinweis zu Gesundheitsdaten im Formular */
.formular-notiz { font-size: 13.5px; line-height: 1.5; color: var(--text-leise); margin: 4px 0 18px; }

/* Ehrliches Leistungsband: was jetzt geht, was noch nicht */
.leistungsgrenze {
  margin-top: clamp(36px, 4vw, 54px);
  padding: 24px 28px; border-radius: 20px;
  background: var(--dunst); box-shadow: inset 0 0 0 1px var(--line-ink);
}
.leistungsgrenze h3 { margin-bottom: .35em; font-size: clamp(17px, 1.3vw, 20px); }
.leistungsgrenze p { margin: 0; color: var(--text); }
.block-dunst .leistungsgrenze { background: #FFFFFF; }

/* Fotos mit Haenden: Motiv liegt mittig bis rechts, Text links */
.buehne-haende { --buehne-lage: 62% 55%; }
.buehne-gehstock { --buehne-lage: 60% 45%; }
.buehne-gespraech { --buehne-lage: 58% 60%; }
.buehne-einkauf { --buehne-lage: 55% 40%; }
.buehne-halten { --buehne-lage: 60% 55%; }

/* Oeffnungszeiten als Zeilen */
.zeiten-liste { list-style: none; margin: 0; padding: 0; }
.zeiten-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-ink); }
.zeiten-liste li:last-child { border-bottom: 0; }
.zeiten-liste b { color: var(--tinte); font-weight: 600; }
.gegen .zeiten-liste li { border-bottom-color: var(--line); }

/* Wege-Kacheln auf der Kontaktseite: drei Wege, drei Spalten */
.wege .karte h3 { margin-bottom: .3em; }

/* Spam-Falle: Feld _gotcha bleibt fuer Menschen unsichtbar und ausserhalb
   der Tab-Reihenfolge. Fuellt ein Bot es aus, verwirft Formspree die
   Nachricht. Kein Captcha, also kein Google-Dienst und kein Drittland. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sechs Leistungen, drei Spalten. Darunter zwei, ganz schmal eine. */
@media (max-width: 1000px) { .gitter-3.gitter-sechs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .gitter-3.gitter-sechs { grid-template-columns: 1fr; } }

/* Fuenf Punkte: Flexraster, die angebrochene Reihe sitzt mittig */
.flex-mitte { --fl-luecke: clamp(14px, 1.4vw, 20px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fl-luecke); }
.flex-mitte > * { flex: 0 1 calc((100% - 2 * var(--fl-luecke)) / 3); }
@media (max-width: 1000px) { .flex-mitte > * { flex-basis: calc((100% - var(--fl-luecke)) / 2); } }
@media (max-width: 660px)  { .flex-mitte > * { flex-basis: 100%; } }
.punkt-karte { padding: clamp(24px, 2.4vw, 32px); }
.punkt-karte h3 { font-size: clamp(17px, 1.3vw, 20px); margin-bottom: .4em; }
.punkt-karte p { margin: 0; color: var(--text-leise); font-size: 15.5px; }

/* Leistungsabschnitt mit Anker: Kopf nicht unter dem klebenden Kopf */
[id] { scroll-margin-top: 110px; }
.leistung-liste h3 { margin-top: 0; }

/* Titel mit selbst gesetztem Umbruch: Zeilenbreite freigeben, sonst
   bricht der Browser ein zweites Mal. */
.buehne h1.frei { max-width: none; }

/* Kopf: sechs Punkte, Telefon und breiter Knopf. Die Telefonnummer
   erst ab 1521 px, darunter steht sie auf jeder Seite im Inhalt. */
@media (min-width: 1181px) and (max-width: 1520px) { .nav a.kopf-tel { display: none; } }
@media (max-width: 1180px) {
  .kopf-innen, .kopf.kompakt .kopf-innen { height: 80px; }
  .marke img, .kopf.kompakt .marke img { height: 60px; }
  .nav { inset: 80px 0 auto; max-height: calc(100vh - 80px); }
}
@media (max-width: 400px) {
  .marke img, .kopf.kompakt .marke img { height: 52px; }
}

/* Faktenkarten auf Weiss: helle Flaeche statt Vollgruen. Im Haus liegt
   die Beschriftung im leisen Textton auf dem Akzent, das waeren hier
   1,6:1 gewesen. Gemessen: #387E11 auf #F1F6EE 5,91:1, #434B3E 8,4:1. */
.block:not(.gegen) .zahl { background: var(--dunst); box-shadow: inset 0 0 0 1px var(--line-ink); text-align: center; }
.block:not(.gegen) .zahl:hover { background: #E3EDDE; box-shadow: inset 0 0 0 1px var(--line-stark), 0 20px 46px -22px var(--akzent-schatten); }
.block:not(.gegen) .zahlen .zahl b { color: var(--akzent-tief); }
.block:not(.gegen) .zahlen .zahl span { color: var(--text); }

/* Leistungskarten mit Details: Liste enger an den Text */
.leistung-detail .haken { margin-top: 18px; }
.leistung-detail .haken li { font-size: 15px; margin-bottom: 9px; }
.leistung-detail p { margin-bottom: 0; }

/* ============================================================
   Zweite Fassung (16.10.2026): mehr Waerme, mehr Bewegung.
   Rot und Gruen spielen wie im Herz des Logos zusammen: Gruen traegt,
   Rot setzt Herzpunkte. Alle Bewegungen nur ueber transform/opacity,
   prefers-reduced-motion schaltet sie am Ende dieses Blocks ab.
   Gemessen (WCAG):
     #C81E26 auf Creme #FBF8F2        5,40:1
     #C81E26 auf Rose #FCF0EE         5,05:1
     #387E11 auf Rose                 5,94:1
     #1F2A1B auf Mint #F1F6EE         13,6:1
   ============================================================ */

.block { background: var(--papier); }
.block-rosa { background: var(--rosa); }
.block-creme { background: var(--ink); }

/* Hutzeile: kleines Herz in Rot statt Linie */
.hut::before {
  width: 13px; height: 12px; border-radius: 0; opacity: 1;
  background: var(--rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.3A5.9 5.9 0 0 1 12 4.1a5.9 5.9 0 0 1 11 3.2c0 7.3-11 14.2-11 14.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.3A5.9 5.9 0 0 1 12 4.1a5.9 5.9 0 0 1 11 3.2c0 7.3-11 14.2-11 14.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gegen .hut::before { background: #FF9AA0; }
.bildband .hut::before { background: #FF9AA0; }

/* Farbige Woerter in Titeln */
.gruen { color: var(--akzent-tief); }
.rot { color: var(--rot); }
.gegen .gruen { color: #FFFFFF; }
.gegen .rot { color: #FF9AA0; }

/* Knopf: sanfter Verlauf im Markengruen */
.knopf-voll { background: linear-gradient(135deg, #387E11 0%, #387E11 100%); }
.knopf-voll:hover { background: linear-gradient(135deg, #387E11 0%, #387E11 100%); }
.knopf-rot { background: linear-gradient(135deg, #D1222B 0%, #B01820 100%); color: #FFFFFF; box-shadow: 0 10px 30px -10px rgba(200, 30, 38, .5); }
.knopf-rot:hover { background: linear-gradient(135deg, #DE2A33 0%, #C01C24 100%); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(200, 30, 38, .55); }

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

.held {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(56, 126, 17, .10) 0%, transparent 60%),
    radial-gradient(45% 55% at 12% 90%, rgba(232, 32, 42, .07) 0%, transparent 60%),
    linear-gradient(180deg, #FFFDF9 0%, #F1F6EE 100%);
  padding: clamp(36px, 5vw, 80px) 0 clamp(80px, 9vw, 130px);
  --mx: 0; --my: 0;
}
.held-gitter { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.held .hut { color: var(--akzent-tief); }
.held h1 { color: var(--tinte); font-size: clamp(36px, 4.6vw, 68px); line-height: 1.05; letter-spacing: -.03em; max-width: none; margin-bottom: .4em; }
.held-kurz h1 { font-size: clamp(34px, 4.3vw, 60px); }
.held-text > p { font-size: clamp(17px, 1.45vw, 20px); color: var(--text); max-width: 46ch; }
.held .knopfreihe { margin-top: 32px; }
.held .knopf-linie { color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--line-stark); }
.held .knopf-linie:hover { background: rgba(31, 42, 27, .05); color: var(--tinte); }

/* Vertrauensleiste unter den Knoepfen */
.vertrauen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 34px 0 0; padding: 0; list-style: none; }
.vertrauen li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--tinte); }
.vertrauen li::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6A10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Bild im Bogen, darum Ring, Punkte und schwebende Karten */
.held-bild { position: relative; justify-self: center; width: min(100%, 470px); }
.held-kurz .held-bild { width: min(100%, 430px); }
.held-rahmen {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 40px 40px;
  box-shadow: 0 50px 90px -45px rgba(31, 42, 27, .55), 0 0 0 10px #FFFFFF;
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0);
  transition: transform .6s var(--weg);
}
.held-rahmen img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--weg); }
.js .held .da .held-rahmen img, .held-rahmen:hover img { transform: scale(1); }
.held-ring {
  position: absolute; z-index: 1; inset: -6% -10% 8% 14%;
  border-radius: 999px 999px 48px 48px;
  border: 2px dashed rgba(56, 126, 17, .35);
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 18px), 0) rotate(4deg);
  transition: transform .8s var(--weg);
}
.held-flaeche {
  position: absolute; z-index: 0; width: 46%; aspect-ratio: 1; left: -12%; bottom: -8%;
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, var(--rosa-tief), #FDE7E4);
  animation: formWandel 14s ease-in-out infinite alternate;
}
.held-herz {
  position: absolute; z-index: 3; right: 4%; bottom: 22%; width: clamp(54px, 6vw, 76px);
  filter: drop-shadow(0 12px 18px rgba(200, 30, 38, .3));
  animation: herzschlag 2.6s ease-in-out infinite;
}
.held-herz img { width: 100%; height: auto; }
.schwebe {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px 13px 13px; border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 46px -22px rgba(31, 42, 27, .45), inset 0 0 0 1px rgba(31, 42, 27, .06);
  font-size: 13.5px; line-height: 1.3; color: var(--text);
  animation: schweben 6s ease-in-out infinite alternate;
}
.schwebe b { display: block; font-family: var(--display); font-size: 16px; color: var(--tinte); letter-spacing: -.01em; }
.schwebe-zeichen { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.schwebe-zeichen svg { width: 20px; height: 20px; }
.schwebe-gruen .schwebe-zeichen { background: var(--gruen-hell); color: var(--akzent-tief); }
.schwebe-rot .schwebe-zeichen { background: var(--rosa-tief); color: var(--rot); }
.schwebe-1 { left: -14%; bottom: 14%; }
.schwebe-2 { right: -10%; top: 9%; animation-delay: -3s; }
.schwebe-1 { translate: calc(var(--mx) * 22px) calc(var(--my) * 22px); }
.schwebe-2 { translate: calc(var(--mx) * -16px) calc(var(--my) * -16px); }

/* Schwung aus dem Logo: rot nach gruen, zeichnet sich von links ein */
.schwung { position: relative; display: inline-block; white-space: nowrap; }
.schwung-linie {
  position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .3em; width: 104%;
  transform-origin: 0 50%;
}
.js [data-auf="strich"] { opacity: 1; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, 0, .25, 1) .5s; }
.js [data-auf="strich"].da { transform: scaleX(1); }
.trenner-schwung { display: block; width: min(560px, 80%); height: auto; margin: 0 auto; }

/* ------------------------------------------------ Laufband ----------- */

.laufband {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #387E11, #387E11 50%, #387E11);
  padding: 20px 0;
}
.laufband-spur { display: flex; width: max-content; animation: laufen 38s linear infinite; }
.laufband ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.laufband li {
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -.01em; color: #FFFFFF; white-space: nowrap;
}
.laufband li::after {
  content: ''; width: 16px; height: 15px; background: #FF6B72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.3A5.9 5.9 0 0 1 12 4.1a5.9 5.9 0 0 1 11 3.2c0 7.3-11 14.2-11 14.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.3A5.9 5.9 0 0 1 12 4.1a5.9 5.9 0 0 1 11 3.2c0 7.3-11 14.2-11 14.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.laufband:hover .laufband-spur { animation-play-state: paused; }

/* ------------------------------------------------ Markenaussage ------ */

.aussage { text-align: center; }
.aussage h2 { font-size: clamp(34px, 5.4vw, 80px); line-height: 1.06; letter-spacing: -.035em; max-width: none; margin: 0 auto .35em; }
.aussage p { font-size: clamp(17px, 1.4vw, 20px); color: var(--text); max-width: 58ch; margin: 0 auto; }
.versprechen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(44px, 5vw, 70px); text-align: left; }
.versprechen > div {
  position: relative; padding: clamp(26px, 2.6vw, 36px); border-radius: 24px;
  background: #FFFFFF; box-shadow: 0 24px 50px -34px rgba(31, 42, 27, .4), inset 0 0 0 1px var(--line-ink);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.versprechen > div:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -36px rgba(31, 42, 27, .5), inset 0 0 0 1px var(--line-ink); }
.versprechen b { display: block; font-family: var(--display); font-size: clamp(42px, 4vw, 58px); line-height: 1; letter-spacing: -.04em; margin-bottom: 14px; }
.versprechen > div:nth-child(1) b { color: var(--akzent-tief); }
.versprechen > div:nth-child(2) b { color: var(--rot); }
.versprechen > div:nth-child(3) b { color: var(--akzent-tief); }
.versprechen h3 { font-size: clamp(18px, 1.4vw, 21px); margin-bottom: .35em; }
.versprechen p { margin: 0; color: var(--text-leise); font-size: 15.5px; text-align: left; max-width: none; }
@media (max-width: 900px) { .versprechen { grid-template-columns: 1fr; } }

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

/* Leistungskarten: Sinnbild abwechselnd gruen und rot, oben ein Streifen
   im Logoverlauf, der beim Ueberfahren einlaeuft. */
.gitter-sechs .karte, .leistung-detail { border-radius: 24px; }
.gitter-sechs > :nth-child(odd) .sinnbild, .gitter-sechs > .leistung-detail:nth-child(odd) .sinnbild { background: var(--gruen-hell); color: var(--akzent-tief); }
.gitter-sechs > :nth-child(even) .sinnbild, .gitter-sechs > .leistung-detail:nth-child(even) .sinnbild { background: var(--rosa-tief); color: var(--rot); }
.sinnbild { transition: transform .5s var(--weg); }
.karte:hover .sinnbild { transform: rotate(-8deg) scale(1.08); }
.gitter-sechs .karte::before, .wege .karte::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--rot-hell), #E8A33A 40%, var(--akzent-hell));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--weg);
}
.gitter-sechs .karte:hover::before, .wege .karte:hover::before { transform: scaleX(1); }
.punkt-karte { transition: transform .5s var(--weg), box-shadow .5s var(--weg); }
.flex-mitte .punkt-karte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(31, 42, 27, .45); }
.flex-mitte .punkt-karte h3::before {
  content: ''; display: block; width: 34px; height: 4px; border-radius: 4px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--rot-hell), var(--akzent-hell));
}

/* Schritte: Ziffern im Verlauf, Verbindungslinie waechst beim Einblenden */
.schritte li::before { background: linear-gradient(135deg, var(--akzent-hell), var(--akzent-tief)); color: #FFFFFF; }
.gegen .schritte li::before { background: linear-gradient(135deg, #E8202A, #9E1218); color: #FFFFFF; }
.schritte { position: relative; }
.schritte::before {
  content: ''; position: absolute; left: 21px; top: 44px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--rot-hell), var(--akzent-hell));
  opacity: .5; transform-origin: 50% 0;
}
.js [data-auf] .schritte::before, .js .schritte[data-auf]::before { transform: scaleY(0); transition: transform 1.4s var(--weg) .3s; }
.js .da .schritte::before, .js .schritte.da::before { transform: scaleY(1); }
.schritte li { border-bottom: 0; }

/* Faktenkarten: die Zahl im Verlauf, Rot und Gruen im Wechsel */
.block:not(.gegen) .zahlen .zahl:nth-child(even) b { color: var(--rot); }
.block:not(.gegen) .zahl:nth-child(even) { background: var(--rosa); }

/* Bilder: Vorhang gleitet beim Einblenden zur Seite */
.vorhang { position: relative; overflow: hidden; }
.vorhang::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(135deg, var(--akzent-tief), #387E11);
  transform-origin: 100% 50%; transform: scaleX(0);
}
.js [data-auf="vorhang"] { opacity: 1; transform: none; }
.js [data-auf="vorhang"]::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.77, 0, .18, 1) .15s; }
.js [data-auf="vorhang"].da::after { transform: scaleX(0); }
.js [data-auf="vorhang"] img { transform: scale(1.18); transition: transform 1.6s var(--weg) .15s; }
.js [data-auf="vorhang"].da img { transform: scale(1); }
.duo-bild.vorhang { border-radius: 28px; box-shadow: 0 40px 80px -46px rgba(31, 42, 27, .55); }
.duo-bild.vorhang img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Glut: weiche Lichtflecken auf den gruenen Flaechen */
.glut { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glut i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.glut i:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -12%; top: -30%; background: radial-gradient(circle, rgba(232, 32, 42, .55), transparent 65%); animation: glutWandern 18s ease-in-out infinite alternate; }
.glut i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; left: -10%; bottom: -35%; background: radial-gradient(circle, rgba(56, 126, 17, .6), transparent 65%); animation: glutWandern 22s ease-in-out infinite alternate-reverse; }
.gegen > .spur { position: relative; z-index: 1; }

/* Schlussband mit Herz */
.schluss {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 auto; border-radius: 36px;
  padding: clamp(40px, 6vw, 84px) clamp(26px, 5vw, 80px);
  background: linear-gradient(135deg, #387E11 0%, #387E11 70%);
  color: #FFFFFF; text-align: center;
}
.schluss h2 { color: #FFFFFF; font-size: clamp(30px, 4vw, 56px); max-width: none; }
.schluss p { color: #FFFFFF; font-size: clamp(17px, 1.4vw, 20px); max-width: 52ch; margin: 0 auto; }
.schluss .knopfreihe { justify-content: center; }
.schluss .knopf-linie { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.schluss .knopf-linie:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.schluss-herz { width: 64px; margin: 0 auto 22px; animation: herzschlag 2.6s ease-in-out infinite; filter: drop-shadow(0 10px 22px rgba(232, 32, 42, .45)); }
.schluss-herz img { width: 100%; height: auto; }
.block-schluss { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(60px, 7vw, 110px); }

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

@keyframes schweben { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
@keyframes herzschlag {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(.98); }
  36% { transform: scale(1.08); }
  50% { transform: scale(1); }
}
@keyframes formWandel { from { transform: rotate(0deg) scale(1); } to { transform: rotate(24deg) scale(1.1); } }
@keyframes laufen { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes glutWandern { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, 10%, 0) scale(1.15); } }

/* ------------------------------------------------ Schmal ------------- */

@media (max-width: 960px) {
  .held-gitter { grid-template-columns: 1fr; }
  .held-bild { width: min(86%, 420px); margin-top: 18px; }
  .held-kurz .held-bild { width: min(80%, 360px); }
  .schwebe-1 { left: -8%; }
  .schwebe-2 { right: -8%; }
}
@media (max-width: 520px) {
  .schwebe { padding: 10px 14px 10px 10px; font-size: 12.5px; }
  .schwebe b { font-size: 14px; }
  .schwebe-zeichen { width: 32px; height: 32px; }
  .schwebe-1 { left: -6%; bottom: 8%; }
  .schwebe-2 { right: -6%; top: 6%; }
  .held-herz { right: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  .schwebe, .held-herz, .held-flaeche, .laufband-spur, .glut i, .schluss-herz { animation: none !important; }
  .held-rahmen, .held-ring, .schwebe-1, .schwebe-2 { transform: none !important; translate: none !important; }
  .js [data-auf="strich"], .js [data-auf="vorhang"]::after, .js [data-auf="vorhang"] img, .js [data-auf] .schritte::before { transform: none !important; }
  .js [data-auf="vorhang"]::after { opacity: 0; }
}

/* Wort mit Schwung: die Linie liegt unter der Grundlinie. Der Kasten mit
   overflow:hidden bekommt unten Innenabstand und gibt ihn als negativen
   Aussenabstand zurueck, die Startverschiebung waechst entsprechend. */
.wort.wort-schwung { padding-bottom: .32em; margin-bottom: -.32em; }
.js [data-worte] .wort-schwung .wort-innen { transform: translate3d(0, 160%, 0); }
.js [data-worte].da .wort-schwung .wort-innen { transform: none; }

/* Farbwoerter auf dem gruenen Schlussband: helle Varianten */
.schluss .gruen { color: #FFFFFF; }
.schluss .rot { color: #FF9AA0; }

/* ============================================================
   Dritte Fassung (16.10.2026): EIN Gruen. Flaechen, Knoepfe, Laufband,
   Fuss und Akzente laufen alle in #387E11, dem hellsten Logogruen, auf
   dem weisse Schrift noch traegt. Leise Flaechen sind Aufhellungen
   genau dieses Tons (7, 14, 22 Prozent).
   Gemessen (WCAG):
     Weiss auf #387E11                5,05:1
     #387E11 auf Creme #FBF8F2        4,76:1
     #387E11 auf Mint #F1F6EE         4,60:1
   Das Haus setzt Fliesstext auf dunklen Flaechen mit 74 Prozent Deckung.
   Auf dem helleren Gruen waren das 3,54:1, deshalb volles Weiss.
   ============================================================ */
.gegen, .gegen p, .gegen li, .gegen a:not(.knopf), .gegen span:not(.hut):not(.rot),
.gegen .block-kopf p, .gegen .zeilen b { color: #FFFFFF; }
.gegen .hut { color: #FFFFFF; }
.gegen .rot { color: #FFD3D5; }
.gegen a:not(.knopf):hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* Knopf auf gruener Flaeche: weiss mit gruener Schrift, sonst verschwindet er */
.gegen .knopf-voll, .schluss .knopf-voll { background: #FFFFFF; color: #387E11; }
.gegen .knopf-voll:hover, .schluss .knopf-voll:hover { background: #F1F6EE; color: #387E11; }
.gegen .knopf-linie { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.gegen .knopf-linie:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* Lichtflecken auf Gruen: Rot mischte sich dort zu Braun. Jetzt nur
   weisses Licht, das Gruen bleibt ein Ton, nur heller und dunkler. */
.glut i:nth-child(1) { background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
.glut i:nth-child(2) { background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 65%); }
.gegen .schritte li::before { background: #FFFFFF; color: #387E11; }

/* ------------------------------------------------ Einblicke ----------
   Zwoelf eigene Fotos: vier Spalten, darunter drei, ganz schmal zwei.
   Zwoelf ist durch alle drei teilbar, es bleibt nie ein Platz leer. */
.einblicke { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 18px); }
@media (max-width: 1000px) { .einblicke { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .einblicke { grid-template-columns: repeat(2, 1fr); } }
.einblicke figure { margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 44px -30px rgba(31, 42, 27, .45); }
.einblicke img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--weg); }
.einblicke figure:hover img { transform: scale(1.06); }
.einblicke figure:nth-child(4n+2) { transform: translateY(18px); }
.einblicke figure:nth-child(4n+4) { transform: translateY(-12px); }
@media (max-width: 1000px) { .einblicke figure:nth-child(n) { transform: none; } }
.js .einblicke.da figure:nth-child(4n+2).folge-kind { transform: translateY(18px); }
.js .einblicke.da figure:nth-child(4n+4).folge-kind { transform: translateY(-12px); }
@media (max-width: 1000px) { .js .einblicke.da figure.folge-kind { transform: none; } }

/* Bildband mit eigenem Foto (Firmenwagen vor heller Hausfassade).
   Unter 900 px laeuft der Text ueber die ganze Breite, dort lag die Schrift
   mit dem Verlauf bei 2,6:1. Gleichmaessige Abdunklung, gemessen mit den
   echten Bildpixeln (95. Perzentil): 360, 768 und 900 px je 6,8:1. */
.bildband p { color: #FFFFFF; }
@media (max-width: 900px) {
  .bildband::after { background: rgba(10, 10, 10, .66); }
}

/* Beschwerde: Wahl zwischen Rueckruf und anonym, als zwei Pillen */
.wahl-art { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wahl-art legend { width: 100%; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--tinte); }
.wahl-art-feld {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; font-size: 14.5px; color: var(--tinte);
  box-shadow: inset 0 0 0 1.5px var(--line-stark); background: #FFFFFF;
  transition: box-shadow .3s var(--weg), background-color .3s var(--weg);
}
.wahl-art-feld:hover { box-shadow: inset 0 0 0 1.5px #387E11; }
.wahl-art-feld:has(input:checked) { background: #F1F6EE; box-shadow: inset 0 0 0 2px #387E11; }
.wahl-art-feld input { accent-color: #387E11; margin: 0; }
.anonym-hinweis { padding: 12px 16px; border-radius: 14px; background: var(--rosa); color: var(--tinte); }

/* Rueckmeldung nach dem Absenden */
.formular-hinweis { margin: 16px 0 0; padding: 13px 16px; border-radius: 14px; background: var(--rosa); color: var(--tinte); font-size: 14.5px; line-height: 1.5; }
.formular-hinweis.formular-gut { background: #F1F6EE; box-shadow: inset 0 0 0 1.5px #387E11; }