/* ══════════════════════════════════════════════════════════════════════════
   NOAH Tagespflege — Seiten-Stil
   Archetyp: Chronik / Tagesverlauf. Asymmetrisches 12-Spalten-Raster, Inhalt
   liegt konsequent links (Spalten 2–8), Bild- und Objektflächen rechts (8–12).
   Jeder Wert kommt aus assets/tokens.css — hier steht kein einziger neuer Hex.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Kein scroll-behavior:smooth — das Weichscrollen macht Lenis (assets/vendor/lenis.min.js);
   beides zusammen kämpft gegeneinander und lässt Sprungmarken danebenlanden. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-grund);
  color: var(--c-anthrazit);
  font-family: var(--font-b);
  font-size: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Tailwinds preflight ist bewusst aus (es hat die Typo-Skala überschrieben).
   Diese drei Zeilen sind das Stück davon, auf das dieses Projekt wirklich baut:
   ① Bedienelemente erben Schrift und Farbe — ohne das nimmt ein <button> die
     Farbe des Betriebssystems, und ein deaktivierter Knopf landet bei 2:1.
   ② Listen, die als Layout dienen, tragen keine Aufzählungspunkte. */
button, input, select, textarea { font: inherit; color: inherit; }
.zahlen, .schritte, .karten, .packen__waren { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-h);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--c-tief);
  margin: 0 0 .6em;
  text-wrap: balance;
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--c-anthrazit); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: inherit; }
strong { font-weight: 700; color: var(--c-tief); }
.dark strong { color: var(--c-anthrazit); }
small { font-size: var(--text-klein); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Raster ───────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
@media (max-width: 520px) { .wrap { width: calc(100% - 2rem); } }

.sektion { padding-block: var(--sp-sektion); position: relative; }
/* Seit 21.09.2026 hell: die Altseite war weiß mit Bordeaux-Akzenten, das tiefe
   Weinrot als Flächenfarbe hat die Seite zu dunkel gemacht. Der Klassenname
   bleibt, damit keine Seite umgebaut werden muss. */
.sektion--tief {
  background: var(--c-blush);
  color: var(--c-anthrazit);
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--c-trenn);
}
.sektion--ruhe { background: var(--c-rosegrau); }
/* Vor-Footer-Regel (REF-H §1): der Abschluss-Block liegt eine Spur wärmer als
   die Fußzeile darunter — sonst verschmelzen beide zu einem Block. */
.sektion--abschluss { background: var(--c-blush); }
.dark .sektion--ruhe { background: color-mix(in oklch, var(--c-rosegrau) 60%, var(--c-grund)); }

/* Das durchgehende asymmetrische 12-Spalten-Raster: Text links (2–8),
   Objekt/Bild rechts (8–12). Immer dieselbe Leserichtung, kein Zickzack. */
.raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.raster__text  { grid-column: 1 / span 7; }
.raster__bild  { grid-column: 8 / span 5; }
.raster__voll  { grid-column: 1 / span 12; }
.raster__schmal { grid-column: 1 / span 8; }
@media (max-width: 900px) {
  .raster { grid-template-columns: 1fr; gap: 2rem; }
  .raster__text, .raster__bild, .raster__schmal, .raster__voll { grid-column: 1 / -1; }
}

.blockkopf { max-width: var(--breite-text); margin-bottom: var(--sp-block); }
.blockkopf p:last-child { margin-bottom: 0; }

/* ── Der Tagesbogen: der Trenner zwischen den Sektionen ─────────────────────
   Ersetzt seit 21.09.2026 die Wellenkante (zu nah an der Arche-Seite). Ein
   gepunkteter Sonnenbogen von 8 bis 16 Uhr, eine kleine Sonne wandert darauf
   einmal über den Tag. Mechanik: die Hülle läuft linear von links nach rechts,
   die Sonne darin steigt mit quadratischem Ease-out und sinkt mit Ease-in —
   das ergibt exakt die Parabel des SVG-Bogens (Q-Kurve), ohne Skript. */
.tagesbogen {
  position: relative; display: block; width: 100%;
  height: clamp(52px, 6vw, 84px);
  pointer-events: none; overflow: hidden;
}
.tagesbogen svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tagesbogen__linie {
  fill: none; stroke: color-mix(in oklch, var(--c-bordeaux) 42%, transparent);
  stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 10;
  vector-effect: non-scaling-stroke;
}
.tagesbogen__lauf {
  position: absolute; top: 0; bottom: 0; left: 2.78%; width: 0;
  animation: tb-x 42s linear infinite;
}
.tagesbogen__sonne {
  position: absolute; left: -8px; top: 93.3%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, var(--c-sonne-hell), var(--c-sonne) 70%);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--c-sonne) 22%, transparent),
              0 0 22px 6px color-mix(in oklch, var(--c-sonne) 40%, transparent);
  animation: tb-y 42s infinite;
}
.tagesbogen:nth-of-type(even) .tagesbogen__lauf,
.tagesbogen:nth-of-type(even) .tagesbogen__sonne { animation-delay: -17s; }
@keyframes tb-x {
  0% { left: 2.78%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 97.22%; opacity: 0; }
}
@keyframes tb-y {
  0%   { top: 93.3%; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  50%  { top: 16.7%; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  100% { top: 93.3%; }
}

/* ── Die Herz-Öse als wiederkehrender Marker ──────────────────────────────── */
.liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.liste li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7em;
  max-width: 62ch;
}
.liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 15px; height: 14px;
  background-color: var(--c-bordeaux);
  -webkit-mask: var(--herz) center / contain no-repeat;
  mask: var(--herz) center / contain no-repeat;
}
:root {
  /* Die Herz-Öse aus dem Ankerauge — eine Form, überall dieselbe. */
  --herz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5C12 21.5 1.5 14.8 1.5 7.9 1.5 4.1 4.4 1.2 8 1.2c2 0 3.4 1 4 2.2.6-1.2 2-2.2 4-2.2 3.6 0 6.5 2.9 6.5 6.7 0 6.9-10.5 13.6-10.5 13.6z'/%3E%3C/svg%3E");
}

/* Link-Hover-Marker im Fließtext: die Herz-Öse wandert heran. */
.txt a:not(.knopf), .flies a:not(.knopf) {
  color: var(--c-bordeaux);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in oklch, var(--c-bordeaux) 40%, transparent);
  transition: text-decoration-color var(--d-bedien) var(--ease-out);
}
.txt a:not(.knopf):hover, .flies a:not(.knopf):hover,
.txt a:not(.knopf):focus-visible, .flies a:not(.knopf):focus-visible { text-decoration-color: currentColor; }

/* ── Knöpfe (Kontrast gerechnet: Weiß auf Bordeaux 9,98:1) ───────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-b); font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--d-mikro) var(--ease-out),
              color var(--d-mikro) var(--ease-out),
              border-color var(--d-mikro) var(--ease-out),
              transform var(--d-mikro) var(--ease-out);
}
/* Die Knopf-Farben stehen mit zwei Klassen da, damit keine Inhalts-Regel
   (.txt a, .rechtstext a, .artikel a …) die Beschriftung übertönen kann —
   genau so entstand schon einmal weiße Schrift auf weißem Knopf. */
.knopf.knopf--haupt { background: var(--c-bordeaux); color: var(--c-auf-marke); }
.knopf.knopf--haupt:hover { background: var(--c-bordeaux-hover); color: var(--c-auf-marke); }
.knopf.knopf--zweit {
  background: var(--c-grund); color: var(--c-anthrazit);
  border-color: var(--c-karte-rand);
}
.knopf.knopf--zweit:hover { border-color: var(--c-bordeaux); color: var(--c-bordeaux); }
/* Der helle Knopf sitzt auf dem Foto im Kopfbereich — seine Töne drehen deshalb
   bewusst nicht mit. Auf den (seit 21.09.2026 hellen) Akzent-Sektionen bekommt er
   einen Rand, sonst verschwindet Weiß auf Rosé. */
.knopf.knopf--hell { background: var(--c-fest-hell); color: var(--c-fest-tief); }
.knopf.knopf--hell:hover { background: var(--c-fest-rose); color: var(--c-fest-tief); }
.sektion--tief .knopf.knopf--hell { border-color: var(--c-karte-rand); }
.dark .sektion--tief .knopf.knopf--hell { background: var(--c-grund); color: var(--c-anthrazit); }
.knopf:active { transform: translateY(1px); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

/* ── Karten ───────────────────────────────────────────────────────────────── */
.karten {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  align-items: stretch;   /* Pflicht: keine Treppen-Reihen, alle Karten gleich hoch */
}
.karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Fünf Leistungen, fünf Fenster: die Karten liegen als Reihen untereinander und
   stehen damit genau auf der Höhe des Fensters, das sie im Haus-Signet meinen. */
.karten--reihe { grid-template-columns: minmax(0, 1fr); }
.karten--reihe .karte { flex-direction: row; align-items: stretch; }
.karten--reihe .karte__bild { width: 38%; max-width: 15rem; aspect-ratio: auto; height: auto; flex: none; }
.karten--reihe .karte__leib { padding: 1.2rem 1.4rem; }
@media (max-width: 560px) {
  .karten--reihe .karte { flex-direction: column; }
  .karten--reihe .karte__bild { width: 100%; max-width: none; aspect-ratio: 3 / 2; }
}
@media (max-width: 960px) { .karten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .karten--2, .karten--3 { grid-template-columns: minmax(0, 1fr); }
}

.karte {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-karte);
  border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--d-bedien) var(--ease-out),
              border-color var(--d-bedien) var(--ease-out),
              transform var(--d-bedien) var(--ease-out);
}
.karte__bild { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--c-rosegrau); }
.karte__leib { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.karte__leib h3 { margin-bottom: .45rem; }
.karte__leib p { font-size: var(--text-klein); margin-bottom: 1rem; }
.karte__mehr {
  margin-top: auto; font-weight: 700; font-size: var(--text-klein);
  color: var(--c-bordeaux); display: inline-flex; align-items: center; gap: .4rem;
}
.karte__mehr svg { transition: transform var(--d-bedien) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.karte:hover { box-shadow: var(--shadow); border-color: var(--c-bordeaux); transform: translateY(-3px); }
  a.karte:hover .karte__mehr svg { transform: translateX(4px); }
}
a.karte:focus-visible { box-shadow: var(--shadow); border-color: var(--c-bordeaux); }

/* ── Bilder: der Halbbogen, höchstens einmal je Seite ─────────────────────── */
.bogen { border-radius: var(--bogen-oben); overflow: hidden; box-shadow: var(--shadow); }
.bogen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bildrahmen { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.bildrahmen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bildrahmen svg { width: 100%; height: auto; }
.bildrahmen--hoch img { aspect-ratio: 4 / 5; }

/* ── Der Hero ─────────────────────────────────────────────────────────────── */
/* overflow:clip hält das Ken-Burns-Foto (scale 1.06) und den Fußbogen im Rahmen. */
/* Alle Hero-Bereiche (Startseite und Unterseiten) sind gleich hoch — Marcus 22.09.2026.
   Die Höhe setzt .hero, der Inhalt steht senkrecht mittig darin. */
.hero {
  position: relative; isolation: isolate; background: var(--c-tief); overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(38rem, 82svh, 46rem);
}
.hero__foto { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  animation: kenburns 28s var(--ease-in-out) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--c-fest-bordeaux) 74%, transparent) 0%,
      color-mix(in srgb, var(--c-fest-bordeaux) 46%, transparent) 46%,
      color-mix(in srgb, var(--c-fest-bordeaux) 8%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--c-fest-tief) 38%, transparent), transparent 40%);
}
.hero__inhalt {
  position: relative; z-index: 2;
  padding-block: clamp(7rem, 13vh, 8.5rem) clamp(4rem, 8vw, 5.5rem);
  color: #fff;
}
/* Linksbündig an der Inhaltskante (Marcus 22.09.2026) — nicht als Block in der Mitte.
   Die Breite der Zeilen begrenzen die Kinder, nicht der Container. */
.hero__inhalt > * { max-width: 46rem; }
.hero__inhalt h1 { color: #fff; margin-bottom: .5em; }
.hero__satz { font-size: 1.1875rem; color: var(--c-auf-tief-leise); max-width: 38rem; }
/* Startseite: Titelbild oben angelegt, damit der Kopf der Betreuerin rechts zu sehen ist (Bild seit 20.10.2026). */
.hero:not(.hero--seite) .hero__foto img { object-position: center top; transform-origin: center bottom; }
.hero--seite .hero__foto img { animation-duration: 40s; }
.hero__fuss {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  pointer-events: none; line-height: 0; overflow: clip;
}
/* Der Hero endet in einem flachen Bogen (der Horizont des Tagesbogens), eine
   dünne Lichtlinie darüber atmet langsam. Keine laufende Kante mehr. */
.hero__fuss svg { width: 100%; height: clamp(40px, 5.5vw, 80px); display: block; overflow: visible; }
.hero__fuss-linie {
  stroke: var(--c-sonne-hell); stroke-width: 2; stroke-dasharray: 0 10; stroke-linecap: round;
  vector-effect: non-scaling-stroke; animation: lichtatmung-linie 9s ease-in-out infinite;
}
@keyframes lichtatmung-linie { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* Wortweiser Eintritt der H1 beim Laden (Bewegung ④). */
.wort { display: inline-block; }

/* ── Die Tagesleiste — die mutige Entscheidung (BAUAUFTRAG 2.7) ────────────
   Mechanik: [data-scroll-progress] aus reveal.js. Die Engine setzt die Füllung
   selbst auf position:fixed/top:0/height:3px und schreibt nur die Breite — das
   Gleis darunter, die acht echten Stundenmarken und das mitwandernde Anker-
   Signet sind die Beschriftung dazu. Es steht KEINE Uhrzeit als Kicker über
   einer Überschrift; die Zeit lebt hier und im Fließtext. */
.tagesleiste {
  position: fixed; left: 0; right: 0; top: 0; z-index: 84;
  height: 46px; pointer-events: none;
  /* Eigene Fläche: ohne sie schweben die Stundenmarken über dem Inhalt und
     lesen sich wie versprengter Text. */
  background: color-mix(in srgb, var(--c-grund) 90%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--c-trenn);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.tagesleiste.sichtbar { opacity: 1; }
.tagesleiste__gleis {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: color-mix(in srgb, var(--c-tief) 20%, transparent);
}
.dark .tagesleiste__gleis { background: color-mix(in srgb, var(--c-rosegrau) 30%, transparent); }
.tagesleiste__marken {
  position: absolute; left: 0; right: 0; top: 3px;
  display: flex; justify-content: space-between;
  padding-inline: clamp(.6rem, 2vw, 1.6rem);
}
.tagesleiste__marke {
  position: relative; padding-top: 7px;
  font-family: var(--font-b); font-size: 11px; font-weight: 600;
  color: color-mix(in srgb, var(--c-tief) 68%, var(--c-grund));
  letter-spacing: .04em;
}
.dark .tagesleiste__marke { color: var(--c-text-leise); }
.tagesleiste__marke::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 1px; height: 5px; background: currentColor; opacity: .5;
}
.tagesleiste__anker {
  position: absolute; top: 6px; left: 0; width: 20px; height: 12px;
  margin-left: -10px;
  will-change: transform;
}
@media (max-width: 760px) {
  .tagesleiste { height: 34px; }
  .tagesleiste__marke:nth-child(even) { display: none; }
  .tagesleiste__marke { font-size: 10px; }
  .tagesleiste__anker { width: 16px; height: 10px; margin-left: -8px; top: 5px; }
}

/* ── Der Hintergrund-Loop: das Lichtspiel ─────────────────────────────────
   Ersetzt seit 21.09.2026 die Wasserlinie. Vier weiche Lichtflecken, wie Sonne
   durch Laub, ziehen sehr langsam über die Fläche. Auf hellem Grund warm-golden,
   auf dunklem Grund (Fußzeile, Bühnen) heller. Nur transform/opacity. */
.lichtspiel {
  --licht: color-mix(in oklch, var(--c-sonne) 34%, transparent);
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.site-footer .lichtspiel, .stueck .lichtspiel { --licht: color-mix(in oklch, var(--c-sonne-hell) 16%, transparent); }
.lichtspiel i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--licht) 0%, transparent 68%);
  animation: lichtzug 46s ease-in-out infinite alternate; will-change: transform;
}
.lichtspiel i:nth-child(1) { width: 34rem; height: 34rem; left: -8rem; top: -10rem; }
.lichtspiel i:nth-child(2) { width: 26rem; height: 26rem; right: 6%; top: 20%; animation-duration: 58s; animation-delay: -21s; }
.lichtspiel i:nth-child(3) { width: 20rem; height: 20rem; left: 38%; bottom: -8rem; animation-duration: 38s; animation-delay: -9s; }
.lichtspiel i:nth-child(4) { width: 14rem; height: 14rem; left: 18%; top: 44%; animation-duration: 64s; animation-delay: -33s; opacity: .7; }
@keyframes lichtzug {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, 3rem) scale(1.12); }
  100% { transform: translate(-3vw, -2rem) scale(.94); }
}
.sektion--tief > .wrap, .sektion--tief > * { position: relative; z-index: 1; }
.sektion--tief > .lichtspiel { position: absolute; z-index: 0; }

/* Die Lichtatmung der warmen Fensterflächen. */
.atmet { animation: lichtatmung 24s ease-in-out infinite; }
@keyframes lichtatmung { 0%, 100% { opacity: .62; } 50% { opacity: .72; } }

/* Der Herz-Öse-Puls — alle 9 s ein Schlag, überall wo das Signet steht. */
.puls { transform-box: fill-box; transform-origin: 50% 50%; animation: herzpuls 9s ease-in-out infinite; }
@keyframes herzpuls {
  0%, 88%, 100% { transform: scale(1); }
  92%  { transform: scale(1.06); }
  96%  { transform: scale(1); }
}

/* ── Das Signet ───────────────────────────────────────────────────────────── */

/* ── Kopfzeile: schwebende Leiste (Mechanik aus der Vorlage, Optik eigen) ── */
.site-header {
  position: fixed; inset: 46px 0 auto 0; z-index: var(--z-header); pointer-events: none;
  padding: clamp(.55rem, 1.6vw, .9rem) clamp(.7rem, 3vw, 1.5rem);
}
@media (max-width: 760px) { .site-header { inset-block-start: 34px; } }
.site-header .nav-wrap {
  pointer-events: auto; max-width: var(--breite); margin: 0 auto;
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .6rem .5rem 1.1rem;
  border-radius: var(--radius-lg);
  color: #fff;
  background: color-mix(in srgb, var(--c-tief) 62%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: 0 10px 30px rgb(78 15 34 / .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.site-header.scrolled .nav-wrap {
  color: var(--c-anthrazit);
  background: var(--c-grund);
  border-color: var(--c-karte-rand);
  box-shadow: var(--shadow);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-h); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; text-decoration: none; color: inherit;
  white-space: nowrap; margin-right: auto; line-height: 1;
}
/* Das Original-Logo des Kunden (assets/logo/). Zwei Fassungen: weiß auf der dunklen
   Kopfleiste, Bordeaux sobald die Leiste beim Scrollen hell wird. */
.nav-logo__bild { display: block; height: 40px; width: auto; }
.nav-logo__bild--marke { display: none; }
.site-header.scrolled .nav-logo__bild--hell { display: none; }
.site-header.scrolled .nav-logo__bild--marke { display: block; }
.dark .site-header.scrolled .nav-logo__bild--hell { display: block; }
.dark .site-header.scrolled .nav-logo__bild--marke { display: none; }
@media (max-width: 520px) { .nav-logo__bild { height: 34px; } }
.nav-logo small { display: block; font-family: var(--font-b); font-weight: 500; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; opacity: .78; margin-top: 2px; }
.site-header nav { display: none; align-items: center; gap: .1rem; }
.site-header nav a {
  color: inherit; text-decoration: none; padding: .45rem .7rem;
  border-radius: var(--radius-sm); white-space: nowrap;
  font-size: .96rem; font-weight: 600;
  transition: background-color var(--d-bedien) var(--ease-out);
}
.site-header nav a:hover, .site-header nav a:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); }
.site-header nav a[aria-current="page"] { color: inherit; }
.site-header nav a[aria-current="page"]::after {
  content: ''; display: inline-block; width: 11px; height: 10px; margin-left: .4rem;
  background-color: currentColor;
  -webkit-mask: var(--herz) center / contain no-repeat;
  mask: var(--herz) center / contain no-repeat;
}
.nav-tel {
  display: none; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .45rem .7rem; text-decoration: none; color: inherit;
  font-weight: 700; font-size: .95rem; border-radius: var(--radius-sm);
}
.nav-tel:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.nav-cta {
  display: none; margin-left: .3rem; padding: .62rem 1.05rem;
  border-radius: var(--radius); background: var(--c-bordeaux); color: #fff;
  text-decoration: none; white-space: nowrap; font-weight: 700; font-size: .95rem;
  transition: background-color var(--d-mikro) var(--ease-out);
}
.nav-cta { color: var(--c-auf-marke); }
.nav-cta:hover { background: var(--c-bordeaux-hover); color: var(--c-auf-marke); }
.nav-burger {
  background: none; border: 0; color: inherit; padding: .6rem; cursor: pointer;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
  .site-header nav { display: flex; }
  .site-header .nav-cta { display: inline-block; }
  .nav-burger { display: none; }
}
@media (min-width: 1180px) { .nav-tel { display: inline-flex; } }
/* Tablet (768–1023 px): die wichtigsten Punkte stehen direkt in der Leiste (Marcus 22.09.2026).
   Telefon und „Probetag vereinbaren" bleiben ausgeblendet, Kontakt und der Rest liegen im Menü-Knopf. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header nav { display: flex; margin-right: .2rem; }
  .site-header nav > a[href="kontakt.html"] { display: none; }
  .site-header nav a { padding: .45rem .5rem; font-size: .92rem; }
  .nav-logo__bild { height: 36px; }
}

/* Untermenü: Klappe stößt direkt an, optischer Abstand nur als padding INNEN. */
.site-header .nav-item { position: relative; display: flex; align-items: center; }
.site-header .nav-item > a { display: inline-flex; align-items: center; gap: .3rem; }
.nav-chevron { flex: none; transition: transform var(--d-bedien) var(--ease-out); }
.nav-item.offen .nav-chevron, .nav-gruppe[open] .nav-chevron { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 17rem; z-index: var(--z-sub);
  padding: .85rem 0 .55rem;
  background: var(--c-grund); color: var(--c-anthrazit);
  border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.site-header .nav-item.offen > .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub a {
  display: block; padding: .55rem 1.1rem; border-radius: 0;
  font-size: .94rem; font-weight: 600;
}
.nav-sub a:hover { background: var(--c-rosegrau); color: var(--c-bordeaux); }

.nav-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit; cursor: pointer; flex: none;
  transition: background-color var(--d-mikro) var(--ease-out);
}
.nav-theme:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.nav-theme .ic-sonne { display: none; }
.dark .nav-theme .ic-sonne { display: block; }
.dark .nav-theme .ic-mond { display: none; }

.nav-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--c-grund); color: var(--c-anthrazit);
  display: flex; flex-direction: column; gap: .1rem;
  padding: 5.5rem 1.75rem 2.5rem; overflow-y: auto;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay a { color: inherit; text-decoration: none; font-size: 1.3rem; font-weight: 600; padding: .65rem 0; }
.nav-overlay .nav-gruppe summary {
  display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 600;
  padding: .65rem 0; cursor: pointer; list-style: none;
}
.nav-overlay .nav-gruppe summary::-webkit-details-marker { display: none; }
/* Unterpunkte stehen untereinander (vorher liefen sie als Fließtext nebeneinander). */
.nav-overlay .nav-gruppe { display: block; }
.nav-overlay .nav-gruppe a {
  display: block; font-size: 1.05rem; font-weight: 500; padding: .5rem 0 .5rem 1rem; opacity: .9;
  margin-left: .2rem; border-left: 2px solid var(--c-trenn);
}
.nav-overlay .nav-gruppe a:first-of-type { margin-top: .2rem; }
.nav-overlay .nav-gruppe[open] { margin-bottom: .4rem; }
.nav-overlay > a:not(.nav-overlay__logo):not(.nav-overlay__cta), .nav-overlay .nav-gruppe summary { border-bottom: 1px solid var(--c-trenn); }
.nav-overlay__logo { position: absolute; top: 1.1rem; left: 1.75rem; padding: 0 !important; border: 0; }
.nav-overlay__logo img { display: block; height: 40px; width: auto; }
.nav-overlay__logo-hell { display: none !important; }
.dark .nav-overlay__logo-hell { display: block !important; }
.dark .nav-overlay__logo-marke { display: none !important; }
.nav-overlay a.nav-overlay__cta {
  margin-top: 1.4rem; align-self: flex-start; padding: .85rem 1.4rem; border-radius: var(--radius);
  background: var(--c-bordeaux); color: var(--c-auf-marke); font-size: 1.05rem; font-weight: 700;
}
.nav-overlay__fuss a { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-bordeaux); font-weight: 700; }
@media (min-width: 600px) { .nav-overlay { padding-inline: max(1.75rem, 10vw); } .nav-overlay__logo { left: max(1.75rem, 10vw); } }
.nav-overlay .nav-close {
  position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; color: inherit;
  font-size: 1.5rem; padding: .6rem; cursor: pointer; min-width: 44px; min-height: 44px;
}
.nav-overlay__fuss { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--c-trenn); }
.nav-overlay__fuss a { font-size: 1.05rem; }

:target, [id] { scroll-margin-top: 8.5rem; }

/* ── Der Ladeauftritt ─────────────────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: var(--z-lade);
  display: none; align-items: center; justify-content: center;
  background: var(--c-grund);   /* hell wie die Seite — kein dunkler Vorhang beim Laden */
}
html.js #preloader { display: flex; }
html.js body { /* nichts vorverstecken — der Vorhang liegt nur darüber */ }
#preloader.weg { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility .5s; }
/* Ladebild: das Bildzeichen des Original-Logos steigt weich auf. */
#preloader .lade-logo { width: clamp(120px, 20vw, 180px); height: auto; animation: ladeauftritt .9s var(--ease-out) both; }
#preloader .lade-logo--hell { display: none; }
.dark #preloader .lade-logo--marke { display: none; }
.dark #preloader .lade-logo--hell { display: block; }
@keyframes ladeauftritt { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Der Seiten-Übergang: die Doppelwelle wischt hoch ─────────────────────── */
#seitenwisch {
  position: fixed; inset: 0; z-index: var(--z-wisch); pointer-events: none;
  transform: translateY(100%); visibility: hidden;
}
#seitenwisch .wisch-flaeche { position: absolute; inset: 22% 0 0 0; background: var(--c-bordeaux); }
#seitenwisch svg { position: absolute; top: 0; left: 0; width: 100%; height: 24%; display: block; }
#seitenwisch.an { visibility: visible; transform: translateY(0); transition: transform var(--d-wisch) var(--ease-drawer); }
#seitenwisch.raus { visibility: visible; transform: translateY(-100%); transition: transform var(--d-wisch) var(--ease-drawer); }

/* ── Akkordeon (FAQ) ──────────────────────────────────────────────────────── */
.faq { max-width: 52rem; }
.faq__eintrag {
  background: var(--c-rosegrau);
  border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius);
  margin-bottom: .7rem;
  overflow: hidden;
}
.dark .faq__eintrag { background: color-mix(in oklch, var(--c-rosegrau) 60%, var(--c-grund)); }
.faq__frage {
  width: 100%; display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.05rem 1.25rem; min-height: 56px;
  font-family: var(--font-h); font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  color: var(--c-tief);
}
.dark .faq__frage { color: var(--c-anthrazit); }
.faq__zeichen { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--c-bordeaux);
  transition: transform var(--d-bedien) var(--ease-out); }
.faq__eintrag.offen .faq__zeichen { transform: rotate(45deg); }
.faq__antwort {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-bedien) var(--ease-out);
}
.faq__eintrag.offen .faq__antwort { grid-template-rows: 1fr; }
.faq__antwort > div { overflow: hidden; }
.faq__antwort p { padding: 0 1.25rem 1.2rem; margin: 0; font-size: 1.0625rem; }

/* ── Zeitachse (Tagesablauf) ──────────────────────────────────────────────── */
.zeitachse { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitachse::before {
  content: ''; position: absolute; left: 6.5rem; top: .6rem; bottom: .6rem; width: 2px;
  background: linear-gradient(to bottom, var(--c-bordeaux), color-mix(in oklch, var(--c-salbei) 80%, transparent));
  opacity: .35;
}
.zeitachse li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.6rem;
  padding-bottom: 1.6rem; position: relative;
}
.zeitachse li:last-child { padding-bottom: 0; }
.zeitachse__zeit {
  font-family: var(--font-h); font-weight: 700; font-size: 1.0625rem;
  color: var(--c-bordeaux); text-align: right; padding-top: .1rem; white-space: nowrap;
}
.zeitachse__was { position: relative; }
.zeitachse__was::before {
  content: ''; position: absolute; left: -1.85rem; top: .52em;
  width: 11px; height: 10px; background-color: var(--c-bordeaux);
  -webkit-mask: var(--herz) center / contain no-repeat;
  mask: var(--herz) center / contain no-repeat;
}
.zeitachse__was h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.zeitachse__was p { font-size: var(--text-klein); margin: 0; }

@media (max-width: 640px) {
  .zeitachse::before { left: .32rem; }
  .zeitachse li { grid-template-columns: 1fr; gap: .25rem; padding-left: 1.9rem; }
  .zeitachse__zeit { text-align: left; }
  .zeitachse__was::before { left: -1.63rem; }
}

/* ── Die Bühne (scrolly.js liefert sticky/Höhe, hier nur das Innenleben) ──── */
.scrolly, .stueck { background: var(--c-tief); color: var(--c-auf-tief-leise); }
/* Die Wasserlinie liegt IN der klebenden Bühne, nicht in der 350-vh-Strecke —
   sonst läge sie am Fuß der Strecke und wäre nie zu sehen. */
.scrolly-buehne > .lichtspiel { z-index: 0; }
.scrolly-buehne > .buehne__innen { position: relative; z-index: 1; }
.buehne__innen {
  width: min(100% - 2.5rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.buehne__bild { position: relative; }
.buehne__bild svg { width: 100%; height: auto; max-height: 74svh; }
.buehne__seite { display: flex; flex-direction: column; gap: 1.4rem; }
.buehne__uhr {
  font-family: var(--font-h); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  color: #fff; line-height: 1; letter-spacing: -.02em;
}
/* Die Beat-Texte liegen NUR dann übereinander, wenn die Engine sie auch
   nacheinander einblenden kann. Ohne GSAP (html ohne .motion) stehen sie
   schlicht untereinander und sind alle lesbar — das ist die Fail-Safe. */
.buehne__text p { margin: 0 0 .7em; font-size: 1.1875rem; line-height: 1.5; color: var(--c-auf-tief-leise); }
/* Die Beat-Texte wandern durch ein Fenster, sie blenden nicht aus: ein Absatz,
   der am Ende auf Deckkraft 0 steht, ist von einem hängengebliebenen Reveal
   nicht zu unterscheiden — weder für einen Prüfer noch für einen Screenreader.
   Geclippt bleibt er vollwertig da und ist nur nicht im Ausschnitt. */
html.motion .buehne__text { position: relative; min-height: 7.5em; overflow: hidden; }
html.motion .buehne__text p { position: absolute; inset: 0; margin: 0; }
.buehne__wert { display: flex; align-items: baseline; gap: .6rem; }
.buehne__wert span[data-zahl] {
  font-family: var(--font-h); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.buehne__wert small { color: var(--c-rosegrau); font-size: var(--text-klein); }
@media (max-width: 900px) {
  .buehne__innen { grid-template-columns: 1fr; gap: 1.2rem; }
  .buehne__bild svg { max-height: 42svh; }
  .buehne__text { min-height: 6.5em; }
  .buehne__uhr { font-size: 1.7rem; }
}

/* ── Startseite: Ein Tag unter dem Tagesbogen — Szene über die volle Breite ──
   Seit 21.09.2026. Ebenen: Himmel (.tz-himmel) · Lichtspiel · Sonnenbogen
   (.tz-bogen, vom Skript auf Bühnenpixel gerechnet) · Garten (.tz-land) ·
   Haus (.tz-haus) · Uhr und Satz (.tz-text). Kein Kasten: alles läuft über
   die ganze Bühne. Hell wie die Altseite; im Dunkelmodus Abendtöne. */
.tagesszene { background: var(--c-himmel-frueh); color: var(--c-anthrazit); --land-h: 34svh; }
.tagesszene .scrolly-buehne, .vollszene .scrolly-buehne { isolation: isolate; }
/* Weiche Übergänge oben und unten in den Seitengrund — keine harte Kante, kein Kasten. */
.tagesszene .scrolly-buehne::before, .tagesszene .scrolly-buehne::after,
.vollszene .scrolly-buehne::before, .vollszene .scrolly-buehne::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 6; pointer-events: none;
}
.tagesszene .scrolly-buehne::before, .vollszene .scrolly-buehne::before { top: 0; height: 9svh; background: linear-gradient(var(--c-grund), transparent); }
.tagesszene .scrolly-buehne::after, .vollszene .scrolly-buehne::after { bottom: 0; height: 5svh; background: linear-gradient(transparent, var(--c-grund)); }
.tz-himmel, .tz-himmel i, .tz-bogen { position: absolute; inset: 0; pointer-events: none; }
.tz-himmel { z-index: 0; }
.tz-himmel i { display: block; }
.tz-himmel__frueh { background: linear-gradient(to bottom, var(--c-himmel-frueh), color-mix(in oklch, var(--c-himmel-frueh) 50%, var(--c-sonne-hell)) 78%); }
.tz-himmel__tag   { background: linear-gradient(to bottom, color-mix(in oklch, var(--c-himmel-tag) 88%, var(--c-rosegrau)), var(--c-himmel-tag) 70%); }
.tz-himmel__spaet { background: linear-gradient(to bottom, color-mix(in oklch, var(--c-himmel-spaet) 70%, var(--c-himmel-frueh)), var(--c-himmel-spaet) 76%); }
.tagesszene .lichtspiel, .vollszene .lichtspiel { z-index: 1; --licht: color-mix(in oklch, #fff 55%, transparent); }
.dark .tagesszene .lichtspiel, .dark .vollszene .lichtspiel { --licht: color-mix(in oklch, var(--c-sonne-hell) 10%, transparent); }

.tz-bogen { z-index: 2; width: 100%; height: 100%; overflow: visible; }
.tz-bogen__linie {
  fill: none; stroke: color-mix(in oklch, var(--c-bordeaux) 45%, transparent);
  stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 12; vector-effect: non-scaling-stroke;
}
.tz-bogen__marken circle { fill: color-mix(in oklch, var(--c-bordeaux) 55%, transparent); }
.tz-bogen__marken text {
  font-family: var(--font-b); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  fill: color-mix(in oklch, var(--c-tief) 70%, transparent);
}
.dark .tz-bogen__marken text { fill: var(--c-text-leise); }
.tz-sonne__scheibe { fill: var(--c-sonne); stroke: var(--c-sonne-hell); stroke-width: 5; }
.tz-sonne__hof { fill: var(--c-sonne-hell); opacity: .28; animation: sonnenhof 7s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.tz-sonne__hof--innen { opacity: .45; animation-delay: -3.5s; }
@keyframes sonnenhof { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.tz-land {
  position: absolute; left: -24px; right: -24px; bottom: -12px; z-index: 3;
  width: calc(100% + 48px); max-width: none; height: calc(var(--land-h) + 12px); pointer-events: none;
}
.tz-land__fern { fill: var(--c-garten-fern); }
.tz-land__nah  { fill: var(--c-garten); }
.tz-land__weg  { fill: color-mix(in oklch, var(--c-rosegrau) 70%, var(--c-grund)); }
.tz-baeume circle { fill: color-mix(in oklch, var(--c-salbei) 58%, var(--c-garten)); }
.tz-baeume rect   { fill: color-mix(in oklch, var(--c-anthrazit) 55%, var(--c-garten-fern)); }

.tz-haus {
  position: absolute; z-index: 4; right: max(1.25rem, 4vw);
  bottom: calc(var(--land-h) * .2); width: min(46vw, 104svh);
}
.tz-haus svg { width: 100%; height: auto; display: block; overflow: visible; }
.tz-haus__schatten { fill: color-mix(in oklch, var(--c-salbei) 30%, var(--c-anthrazit)); opacity: .18; }

.tz-text {
  position: absolute; z-index: 5; left: max(1.5rem, 6vw); top: clamp(8rem, 21svh, 13rem);
  width: min(30rem, 38vw);
}
/* Weicher Lichthof hinter dem Text — der Sonnenbogen läuft dahinter durch. */
.tz-text::before {
  content: ''; position: absolute; inset: -3rem -4rem; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c-himmel-tag) 80%, transparent), transparent);
}
.tagesszene .buehne__uhr { color: var(--c-tief); margin: 0 0 1rem; }
.tagesszene .buehne__text p { color: var(--c-anthrazit); font-size: 1.25rem; }
.tagesszene .buehne__wert { margin: 1.2rem 0 0; }
.tagesszene .buehne__wert span[data-zahl] { color: var(--c-bordeaux); }
.tagesszene .buehne__wert small { color: var(--c-text-leise); }
.dark .tagesszene .buehne__uhr, .dark .tagesszene .buehne__wert span[data-zahl] { color: var(--c-anthrazit); }

@media (max-width: 900px) {
  .tagesszene { --land-h: 30svh; }
  .tz-text { left: 1.25rem; right: 1.25rem; width: auto; top: clamp(6.5rem, 15svh, 8rem); }
  .tz-text::before { inset: -2rem -1rem; }
  .tagesszene .buehne__text p { font-size: 1.0625rem; }
  .tagesszene .buehne__uhr { font-size: 2rem; margin-bottom: .6rem; }
  .tagesszene .buehne__wert span[data-zahl] { font-size: 2rem; }
  .tz-haus { right: auto; left: 50%; width: min(96vw, 60svh); margin-left: calc(min(96vw, 60svh) / -2); bottom: calc(var(--land-h) * .16); }
}
@media (max-width: 900px) and (max-height: 700px) { .tagesszene .buehne__wert { display: none; } }
/* Ohne Engine (kein GSAP) steht die Szene als ganz normale Sektion da. */
html:not(.motion) .tagesszene .scrolly-buehne { min-height: 100svh; }

/* ── Set-Piece-Bühnen der Unterseiten ─────────────────────────────────────── */
.stueck .buehne__innen { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 900px) { .stueck .buehne__innen { grid-template-columns: 1fr; } }

/* ── Unterseiten: Vollbild-Bühne (seit 22.09.2026) ─────────────────────────
   Kein Kasten: die Bühne füllt den ganzen Schirm. Ruhiger heller Grund (kein
   Himmel, keine Sonne — das las sich als Sonnenuntergang), dahinter ein großer
   Rosé-Bogen wie ein Rundbogenfenster, darüber das Lichtspiel. Objekt groß
   rechts (Handy: unten), Text dunkel links (Handy: oben).
   --ar = Seitenverhältnis des Objekts (inline). */
.vollszene { background: var(--c-grund); color: var(--c-anthrazit); }
.vollszene .scrolly-buehne > .lichtspiel { --licht: color-mix(in oklch, var(--c-sonne-hell) 45%, transparent); }
.vollszene .buehne__innen::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: max(.5rem, 2vw); bottom: 0; top: 12svh;
  width: calc(min(54vw, 74svh * var(--ar, 1.6)) + 5vw);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--c-rosegrau) 70%, var(--c-grund)), var(--c-rosegrau));
}
.vollszene .buehne__innen { position: absolute; inset: 0; z-index: 4; display: block; width: auto; margin: 0; isolation: isolate; }
.vollszene .buehne__bild {
  position: absolute; right: max(1.25rem, 4vw); top: 53%; transform: translateY(-50%);
  width: min(54vw, calc(74svh * var(--ar, 1.6)));
}
.vollszene .buehne__bild svg { width: 100%; height: auto; max-height: none; overflow: visible; }
/* Weicher Bodenschatten: das Objekt steht in der Szene, es schwebt nicht in einem Rahmen. */
.vollszene .buehne__bild::before {
  content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -6%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c-tief) 16%, transparent), transparent);
}
.vollszene .buehne__seite {
  position: absolute; z-index: 5; left: max(1.5rem, 6vw); top: 50%; transform: translateY(-50%);
  width: min(28rem, 34vw);
}
.vollszene .buehne__seite::before {
  content: ''; position: absolute; inset: -3rem -4rem; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c-himmel-tag) 80%, transparent), transparent);
}
.vollszene .buehne__text p { color: var(--c-tief); font-size: 1.25rem; font-weight: 500; }
.dark .vollszene .buehne__text p { color: var(--c-anthrazit); }
/* Die Umriss-Linien der Objekte waren für dunklen Grund hell gezeichnet — auf
   dem hellen Himmel bekommen sie Bordeaux, sonst ist das Startbild unsichtbar. */
.vollszene [data-effekt="zeichnen"][stroke] { stroke: color-mix(in oklch, var(--c-bordeaux) 62%, transparent); }
.vollszene .buehne__wert span[data-zahl] { color: var(--c-bordeaux); }
.vollszene .buehne__wert small { color: var(--c-text-leise); }
.dark .vollszene .buehne__wert span[data-zahl] { color: var(--c-anthrazit); }
@media (max-width: 900px) {
  .vollszene .buehne__seite { top: clamp(6.5rem, 14svh, 8rem); left: 1.25rem; right: 1.25rem; width: auto; transform: none; }
  .vollszene .buehne__seite::before { inset: -2rem -1rem; }
  .vollszene .buehne__innen::before { right: 3vw; left: 3vw; width: auto; top: 46svh; }
  .vollszene .buehne__text p { font-size: 1.0625rem; }
  .vollszene .buehne__wert span[data-zahl] { font-size: 2rem; }
  .vollszene .buehne__bild {
    top: auto; bottom: 5svh; right: auto; left: 50%; transform: translateX(-50%);
    width: min(94vw, calc(42svh * var(--ar, 1.6)));
  }
}
@media (max-width: 900px) and (max-height: 700px) { .vollszene .buehne__wert { display: none; } }

/* ── Kennzahlen-Reihe ─────────────────────────────────────────────────────── */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
@media (max-width: 640px) { .zahlen { grid-template-columns: 1fr; } }
.zahl {
  border: 1px solid var(--c-karte-rand); border-radius: var(--radius-lg);
  background: var(--c-karte); padding: 1.4rem 1.3rem; height: 100%; container-type: inline-size;
}
.zahl__wert {
  font-family: var(--font-h); font-size: min(clamp(1.9rem, 3.6vw, 2.6rem), 31cqi); font-weight: 700;
  color: var(--c-bordeaux); line-height: 1; display: block; margin-bottom: .35rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zahl__was { font-size: var(--text-klein); color: var(--c-text-leise); margin: 0; }

/* ── Ablauf-Schritte ──────────────────────────────────────────────────────── */
.schritte { display: grid; gap: 1.1rem; align-items: stretch; counter-reset: schritt; }
.schritte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schritte--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.schritte--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .schritte--4, .schritte--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .schritte--3, .schritte--4, .schritte--5 { grid-template-columns: 1fr; } }
.schritt {
  height: 100%; padding: 1.3rem 1.25rem;
  background: var(--c-karte); border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius-lg);
}
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; margin-bottom: .8rem;
  background: var(--c-bordeaux); color: var(--c-auf-marke);
  font-family: var(--font-h); font-weight: 700; font-size: 1rem;
}
.schritt h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.schritt p { font-size: var(--text-klein); margin: 0; }

/* ── Der Pflege-Wegweiser ─────────────────────────────────────────────────── */
.wegweiser {
  background: var(--c-karte); border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.wegweiser__frage { margin-bottom: 1.6rem; }
.wegweiser__frage:last-of-type { margin-bottom: 0; }
.wegweiser__frage > p { font-family: var(--font-h); font-weight: 600; font-size: 1.0625rem;
  color: var(--c-tief); margin-bottom: .7rem; }
.dark .wegweiser__frage > p { color: var(--c-anthrazit); }
.wahl { display: flex; flex-wrap: wrap; gap: .55rem; }
.wahl button {
  min-height: 46px; padding: .6rem 1.1rem;
  border: 1px solid var(--c-karte-rand); border-radius: 999px;
  background: var(--c-grund); color: var(--c-anthrazit);
  font-family: var(--font-b); font-size: .98rem; font-weight: 600; cursor: pointer;
  transition: background-color var(--d-mikro) var(--ease-out),
              border-color var(--d-mikro) var(--ease-out),
              color var(--d-mikro) var(--ease-out);
}
.wahl button:hover { border-color: var(--c-bordeaux); }
.wahl button[aria-pressed="true"] {
  background: var(--c-salbei-text); border-color: var(--c-salbei-text); color: var(--c-auf-marke);
}
.wegweiser__ergebnis {
  margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--c-trenn);
}
.wegweiser__ergebnis[hidden] { display: none; }
.wegweiser__ergebnis h3 { font-size: 1.15rem; }

/* ── Die Packliste (Blog: Tasche für den ersten Tag) ──────────────────────── */
.packen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 800px) { .packen { grid-template-columns: 1fr; } }
.packen__waren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
@media (max-width: 480px) { .packen__waren { grid-template-columns: 1fr; } }
.packen__ware {
  display: flex; align-items: center; gap: .7rem; height: 100%;
  padding: .85rem 1rem; min-height: 56px;
  border: 1px solid var(--c-karte-rand); border-radius: var(--radius);
  background: var(--c-grund); color: var(--c-anthrazit);
  font-family: var(--font-b); font-size: .98rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background-color var(--d-mikro) var(--ease-out),
              border-color var(--d-mikro) var(--ease-out);
}
.packen__ware svg { flex: none; width: 26px; height: 26px; color: var(--c-bordeaux); }
.packen__ware[aria-pressed="true"] { background: var(--c-rosegrau); border-color: var(--c-bordeaux); }
.packen__ware[aria-pressed="true"] svg { color: var(--c-salbei-text); }

/* ── Vergleichs-Schieber (aus Vorlagen/vorher-nachher.html) ───────────────── */
.vn { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--c-karte-rand); background: var(--c-rosegrau); }
.vn__lage { position: relative; }
.vn__lage svg { display: block; width: 100%; height: auto; }
.vn__rechts { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.vn__griff {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: #fff; pointer-events: none; box-shadow: 0 0 12px rgb(78 15 34 / .4);
}
.vn__griff::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%); border-radius: 999px;
  background: #fff; box-shadow: var(--shadow);
}
.vn__regler {
  position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.vn__marke {
  position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--c-tief) 82%, transparent); color: #fff;
  font-size: var(--text-mini); font-weight: 700; letter-spacing: .02em;
}
.vn__marke--l { left: 1rem; }
.vn__marke--r { right: 1rem; }

/* ── Formulare (Farben für Vorlagen/kontakt-termin-vorlage.html) ──────────── */
.formularblock { background: var(--c-karte); border: 1px solid var(--c-karte-rand);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: var(--shadow-sm); }

/* ── Fußzeile ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-fest-bordeaux); color: var(--c-auf-tief-leise);
  padding-block: clamp(3.5rem, 7vw, 5rem) 1.6rem;
  position: relative; overflow: clip;
}
.site-footer h2, .site-footer p.spaltenkopf { color: #fff; }
.footer__raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.6rem, 3.5vw, 3rem); align-items: stretch;
}
@media (max-width: 1000px) { .footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__raster { grid-template-columns: 1fr; } }
.footer__marke { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer__logo { display: block; width: min(220px, 70%); height: auto; }
.spaltenkopf {
  font-family: var(--font-h); font-weight: 700; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-rosegrau); margin: 0 0 .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--c-auf-tief-leise); text-decoration: none; font-size: var(--text-klein); }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer p { font-size: var(--text-klein); color: var(--c-auf-tief-leise); }
.footer__partner p { margin-bottom: .9rem; }
.footer__schluss {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between;
  margin-top: clamp(2.2rem, 5vw, 3.2rem); padding-top: 1.6rem; padding-bottom: 18px;
  border-top: 1px solid var(--c-rand-auf-tief);
}
.footer__rechts { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ── Dienst-Kacheln mit Foto + Signet-Kopplung (Startseite Sektion 4) ────── */
.leistungsblock { display: grid; grid-template-columns: 1fr 22rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 1080px) {
  .leistungsblock { grid-template-columns: 1fr; }
  .hauszeichen { display: none; }
}
.hauszeichen { position: sticky; top: 8.5rem; }
.hauszeichen svg { width: 100%; height: auto; }
.hauszeichen__fenster { transition: opacity var(--d-bedien) var(--ease-out), fill var(--d-bedien) var(--ease-out); }

/* ── Anfahrt / Kontaktangaben ─────────────────────────────────────────────── */
.angaben { list-style: none; margin: 0; padding: 0; }
.angaben li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.angaben svg { flex: none; width: 26px; height: 26px; color: var(--c-bordeaux); margin-top: .1rem; }
.angaben .akzent { color: var(--c-salbei-text); }
.angaben b { display: block; font-weight: 700; font-size: var(--text-klein); color: var(--c-tief); }
.dark .angaben b { color: var(--c-anthrazit); }
.angaben span { display: block; font-size: 1.0625rem; }
.angaben a { color: var(--c-bordeaux); text-decoration: none; font-weight: 700; }
.angaben a:hover { text-decoration: underline; }


.telefonruf {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-h); font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700;
  color: var(--c-bordeaux); text-decoration: none; letter-spacing: -.01em;
}
.telefonruf:hover { text-decoration: underline; }
.telefonruf svg { width: 32px; height: 32px; flex: none; }

/* ── Karte / Anfahrtsskizze ───────────────────────────────────────────────── */
.skizze { border: 1px solid var(--c-karte-rand); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--c-rosegrau); box-shadow: var(--shadow-sm); }
.skizze svg { width: 100%; height: auto; display: block; }

/* ── Ratgeber-Artikel ─────────────────────────────────────────────────────── */
.artikel { max-width: 44rem; }
.artikel h2 { margin-top: 2.4rem; }
.artikel h3 { margin-top: 1.8rem; }
.artikel > p:first-of-type { font-size: 1.22rem; line-height: 1.55; color: var(--c-tief); }
.dark .artikel > p:first-of-type { color: var(--c-anthrazit); }
.artikel__kopf { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  font-size: var(--text-klein); color: var(--c-text-leise); margin-bottom: 1.6rem; }
.artikel__kopf span { display: inline-flex; align-items: center; gap: .4rem; }
.artikel__kopf svg { width: 18px; height: 18px; flex: none; }

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────── */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2.4rem; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.rechtstext address { font-style: normal; margin-bottom: 1.1em; }
.rechtstext ul { padding-left: 1.2rem; margin-bottom: 1.1em; }
.rechtstext li { margin-bottom: .4em; }
.rechtstext a { color: var(--c-bordeaux); }

.telefonruf-zeile { margin: 1.6rem 0 0; }

/* ── Kleinkram ────────────────────────────────────────────────────────────── */
.merke {
  border-left: 3px solid var(--c-salbei); background: var(--c-rosegrau);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem; margin: 1.8rem 0;
}
.dark .merke { background: color-mix(in oklch, var(--c-rosegrau) 60%, var(--c-grund)); }
.merke p:last-child { margin-bottom: 0; }
.merke strong { color: var(--c-salbei-text); }

.hinweis { font-size: var(--text-klein); color: var(--c-text-leise); }

/* ── Bewegung dämpfen, nicht abschalten ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Der Ambient-Hintergrund lebt langsam weiter — NICHT none, sonst wirkt die Seite tot. */
  .lichtspiel i, .hero__fuss-linie, .tz-sonne__hof, .atmet, .puls, .hero__foto img {
    animation-duration: 90s !important;
  }
  .tagesbogen__lauf, .tagesbogen__sonne { animation-duration: 120s !important; }
  .site-header, .site-header .nav-wrap, .nav-sub, .nav-chevron { transition-duration: .01ms; }
}

/* ── Über uns · Das Haus: ein Tag in vier Bildern (13.10.2026) ────────────── */
.haus-tag { margin-top: clamp(2rem, 4vw, 3rem); }
.haus-tag figure { margin: 0; }
.haus-tag__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .haus-tag__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .haus-tag__liste { grid-template-columns: minmax(0, 1fr); } }
.haus-tag__zeit { margin: .8rem 0 .1rem; font-weight: 700; color: var(--c-bordeaux); font-size: var(--text-klein); }
.haus-tag__was { margin: 0; color: var(--c-anthrazit); }

/* Ein Tag bei uns · Uhr: Digitalanzeige läuft mit dem Zeiger (19.10.2026) */
.buehne__wert span[data-uhr-digital] {
  font-family: var(--font-h); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700;
  color: var(--c-bordeaux); line-height: 1; font-variant-numeric: tabular-nums;
}
.dark .buehne__wert span[data-uhr-digital] { color: var(--c-anthrazit); }
@media (max-width: 900px) { .buehne__wert span[data-uhr-digital] { font-size: 2rem; } }

/* KI-Kennzeichnung (EU-KI-Verordnung Art. 50 Abs. 4, gilt seit 02.08.2026): Jedes mit KI
   erzeugte Bild trägt sichtbar „KI-generiert“, ohne dass etwas darüber liegt. */
.bogen, .bildrahmen { position: relative; }
.ki-marke {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2; pointer-events: none;
  /* Nur weißer Text im Bild, ohne Grund und ohne Schatten (Marcus, 19.10.2026). */
  padding: 0; background: none; color: #fff; text-shadow: none; opacity: .75;   /* 75 % deckend (Marcus, 19.10.2026) */
  font-family: var(--font-b, system-ui, sans-serif); font-size: .6rem; font-weight: 600;
  line-height: 1.3; letter-spacing: .01em;
}
/* Titelbild: wie überall .6rem vom Bildrand; unten zählt der Rand des weißen Bogens (rechts gut ein Viertel seiner Höhe). */
.ki-marke--hero { z-index: 4; right: .6rem; bottom: calc(clamp(40px, 5.5vw, 80px) * .28 + .6rem); }
@media print { .ki-marke { background: #fff; color: #000; border: 1px solid #000; } }
/* Vorschaukarten (Firmen-Identität): der Hinweis steht unter dem Bild auf weißem Grund, darum dunkel. */
.ki-marke--karte { color: var(--c-text-leise, #6b5d62); right: .7rem; bottom: .45rem; }