/*
Theme Name: Eichenhof Dassendorf
Theme URI: https://www.eichenhof-dassendorf.de/
Author: Pferdesport- & Reha-Zentrum Eichenhof
Description: Auftritt des Eichenhofs Dassendorf — Pension, Rehabilitation,
 Aquatraining und Futterberatung. Erzeugt am 07.09.2026 10:19 aus dem Quellprogramm;
 nicht von Hand ändern, sondern neu erzeugen.
Version: 2026.09.07.1019
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: proprietär
Text Domain: eichenhof
*/


/* ═══════════════════════════════════════════════════════════════════════
   Eichenhof — Feldbuch

   Die Seite ist Papier, kein Bildschirm. Fotografien und gravierte Tafeln
   liegen darauf wie eingeklebte Abbildungen: mit Rand, mit Bildunterschrift,
   nie randlos über die ganze Fläche gezogen. Das ist der Unterschied zwischen
   einer Seite, die aussieht wie tausend andere, und einer, die aussieht wie
   ein Buch, das jemand gemacht hat.

   Drei Stimmen: Barlow Condensed für Überschriften, Newsreader für alles zum
   Lesen, Barlow für Beschriftungen und Bedienung. Eine Tinte, ein Papier.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Zurückhaltende, tiefe Palette. Der Terrakotta-Akzent war freundlich,
     aber er verkauft ein Café, keine Reha-Anlage. Ein Haus, das Vertrauen
     verkauft, arbeitet mit wenigen, satten Tönen und viel Ruhe dazwischen. */
  --papier:#f7f5f1; --papier-hell:#ffffff; --sand:#eae9e5; --sand-tief:#dfdedb;
  --tinte:#1b2c38; --tinte-weich:#4a5661; --tinte-leise:#5d6a74;

  --tief:#2b5672; --tief-hell:#3a6a8a; --tief-dunkel:#1e3e53;
  --messing:#7d6539; --messing-hell:#c0a271;
  --dunst:#c6d6d4;

  /* Textrollen — jede Regel unten benutzt nur diese. */
  --text:#3e4c57;
  --text-stark:#1b2c38;
  --text-ruhig:#33414c;
  --text-leise:#5d6a74;

  /* Die alten Namen zeigen auf die neuen Töne. */
  --petrol:var(--tief); --petrol-hell:var(--tief-hell);
  --terra:var(--tief); --terra-tief:var(--tief-dunkel); --terra-hell:var(--messing-hell);
  --teal:var(--tief); --teal-hell:var(--tief-hell); --teal-tief:var(--tief-dunkel);
  --salbei:#5f6b61; --salbei-hell:#93a196;
  --schiefer:var(--tief); --schiefer-tief:var(--tief-dunkel);
  --stich:var(--tief);
  --linie:#dedcd6; --linie-stark:#c4c2ba;

  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schmal:"Fraunces",Georgia,serif;
  --lese:"Figtree",system-ui,-apple-system,sans-serif;

  --rand:clamp(20px,5vw,80px);
  --breit:1320px;
  --zug:cubic-bezier(.16,1,.3,1);

  /* Präzise Kanten. Große Radien wirken freundlich-verspielt; ein Haus
     dieser Preisklasse wirkt gebaut, nicht abgerundet. */
  --rund:6px; --rund-klein:4px; --rund-gross:8px; --rund-voll:999px;

  --heben:0 1px 2px rgba(18,30,32,.05), 0 12px 30px -12px rgba(18,30,32,.13);
  --heben-stark:0 2px 4px rgba(18,30,32,.06), 0 30px 62px -24px rgba(18,30,32,.2);
}



*{box-sizing:border-box}
figure,blockquote{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--papier);color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

/* Papierkorn. Eine einzige feste Ebene, damit die Fläche lebt, ohne dass
   irgendwo ein Bild nachgeladen werden muss. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.34'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Was der Browser selbst zeichnet ─────────────────────────────────── */
::selection{background:var(--petrol);color:#fff}
:root{accent-color:var(--petrol);caret-color:var(--petrol);
  scrollbar-color:var(--linie-stark) var(--papier)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--papier)}
::-webkit-scrollbar-thumb{background:var(--linie-stark);border:3px solid var(--papier);
  border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--tinte-leise)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:1px}
.dunkel ::selection{background:var(--dunst);color:var(--schiefer-tief)}

.innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.eng{max-width:760px}

/* ── Typografie ──────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--schmal);font-weight:600;color:var(--text-stark);
  letter-spacing:-.018em;
  line-height:1.06;margin:0;text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0}
/* Die untere Schranke lag bei 42 px. „Fütterung" ist damit auf einem
   390-px-Gerät breiter als die Spalte und stand 31 px über den Rand hinaus.
   Die Schranke folgt jetzt der Gerätebreite mit. */
h1{font-size:clamp(33px,8.8vw,86px);line-height:1.0;letter-spacing:-.026em;
  overflow-wrap:break-word}
h2{font-size:clamp(30px,4.2vw,54px);line-height:1.05}
h3{font-size:clamp(20px,2.1vw,27px);line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1.05em;max-width:68ch;text-wrap:pretty}
li{text-wrap:pretty}
/* Eine Überschrift ohne eigenen Abstand bekommt einen. Vorher hing der
   Abstand an jedem einzelnen style-Attribut; wo er fehlte, klebte der Text
   an der Zeile und die einfahrende Bewegung schob sich sichtbar darüber.
   Überschriften mit eigenem style bleiben unangetastet — sonst zählte
   beides doppelt. */
h1:not([style])+*,h2:not([style])+*,h3:not([style])+*{margin-top:.5em}
/* Silbentrennung nur im Fließtext — nicht in Überschriften und Tabellen. */
.textblock p,article.beitrag p,details.frage p{hyphens:auto;-webkit-hyphens:auto}
strong{font-weight:600;color:var(--text-stark)}

/* Fließtext ist Newsreader. Die optische Größe der Variablen-Schrift wird
   mitgeführt, damit Lesetext und Vorspann unterschiedlich fein wirken. */
.textblock p,article.beitrag p,.innen.eng>p,details.frage p,.lauftext p{
  font-family:var(--lese);font-size:17.5px;line-height:1.72;color:var(--text)}
.gross{font-family:var(--lese);font-size:clamp(18.5px,1.9vw,23px);line-height:1.55;
  font-weight:400;color:var(--text-ruhig);max-width:54ch}
.klein{font-size:14px;color:var(--text-leise);font-family:var(--sans)}

/* Zahlen in Tabellen und Daten laufen mit gleicher Breite. */
table,.zahl b,.preis,time{font-variant-numeric:tabular-nums}

/* Verweise im Fließtext bekommen eine Grundlinie, die den Buchstaben ausweicht. */
.textblock a,article.beitrag a,.innen.eng p a{color:var(--petrol);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--linie-stark);transition:text-decoration-color .18s}
.textblock a:hover,article.beitrag a:hover,.innen.eng p a:hover{
  text-decoration-color:var(--petrol)}

/* Beschriftungen. Steht NIE als Kicker über einer Überschrift — nur unter
   einer Abbildung oder neben einer Angabe. */
.marke{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-leise);display:block}
.marke.hell{color:var(--text-leise)}

/* Die Zierlinie, die im Feldbuch die Abschnitte trennt. */
.regel{border:0;height:1px;background:var(--linie-stark);margin:0 0 26px;
  max-width:64px}
.dunkel .regel{background:rgba(255,255,255,.32)}

/* ── Kopfleiste ──────────────────────────────────────────────────────── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;padding:12px 0;
  background:rgba(247,245,241,.94);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:box-shadow .3s var(--zug)}
/* Die Leiste wird beim Scrollen kompakter — über die Zeilenhöhe des Inhalts,
   nicht über die Polsterung. Polsterung zu animieren zwingt den Browser in
   jedem Bild zu einer neuen Layoutrechnung. */
.kopf .innen{transition:transform .3s var(--zug)}
.kopf.fest .innen{transform:translateY(-3px)}
.kopf .innen{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.kopf.fest{box-shadow:0 1px 14px rgba(18,30,32,.09)}
/* Das Logo ist eine Bilddatei vom Hof, keine nachgebaute Schrift. Die Höhe
   steuert die Leiste; die Datei ist mit 300 px Höhe exportiert, damit sie
   auch auf einem Bildschirm mit dreifacher Punktdichte scharf bleibt. */
.logo{display:block;line-height:0;flex:none}
.logo img{height:clamp(52px,5vw,68px);width:auto;display:block}
.kopf.fest .logo img{transform:scale(.84)}
.logo img{transform-origin:left center;transition:transform .3s var(--zug)}
footer .logo img{height:72px}
.hauptnav{display:flex;gap:clamp(13px,1.5vw,23px);margin-left:auto;align-items:center}
.hauptnav a{font-size:15.5px;color:var(--tinte);padding:7px 0;position:relative;
  white-space:nowrap}
.hauptnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--petrol);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--zug)}
.hauptnav a:hover::after,.hauptnav a[aria-current]::after{transform:none}
.nav-knopf{background:var(--tief);color:#fff!important;padding:11px 22px!important;
  font-weight:600;border-radius:var(--rund)}
.nav-knopf::after{display:none}
.nav-knopf:hover{background:var(--teal-hell)}
.sozial{display:flex;align-items:center;justify-content:center;
  color:var(--tinte);min-width:44px;min-height:44px}
.sozial::after{display:none}
.sozial:hover{color:var(--petrol)}
/* Ein Finger ist keine Maus. 44 px in beiden Richtungen sind das Maß, auf
   das sich Apple und Google unabhängig voneinander festgelegt haben; darunter
   trifft man daneben. Der Knopf war 31 × 34 px groß. */
.menue{display:none;margin-left:auto;background:none;border:0;color:var(--tinte);
  font-size:26px;cursor:pointer;line-height:1;
  min-width:48px;min-height:48px;align-items:center;justify-content:center}
@media(max-width:1120px){
  /* Eine Schublade, die von rechts hereinfährt — nicht der ganze Bildschirm
     voller mittig gesetzter Wörter. Links ausgerichtete Zeilen mit Haarlinie
     liest man schneller, und der Daumen findet sie, ohne zu zielen.

     Sie ist bewusst KEIN Kind der Kopfleiste mehr im gestalterischen Sinn:
     Die Leiste darf nichts beschneiden, sonst schneidet sie die geöffnete
     Schublade mit ab. Genau das ist einmal passiert. */
  .hauptnav{position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(88vw,420px);background:var(--schiefer);
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;margin:0;transform:translateX(100%);
    transition:transform .4s var(--zug),visibility 0s linear .4s;
    visibility:hidden;pointer-events:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:calc(var(--kopfhoehe,84px) + 8px) 0 32px;
    box-shadow:-24px 0 60px rgba(10,14,16,.34)}
  .hauptnav.auf{transform:none;visibility:visible;pointer-events:auto;
    transition-delay:0s,0s}
  .hauptnav a{font-size:19px;font-family:var(--sans);font-weight:500;
    letter-spacing:.01em;color:#fff!important;
    padding:0 clamp(22px,6vw,30px);min-height:58px;
    display:flex;align-items:center;justify-content:flex-start;
    border-bottom:1px solid rgba(255,255,255,.10)}
  .hauptnav a::after{display:none}
  .hauptnav a[aria-current]{background:rgba(255,255,255,.07)}
  .hauptnav a[aria-current]::before{content:"";width:3px;height:22px;
    background:var(--messing-hell);margin-right:14px;margin-left:-17px}
  .sozial{color:rgba(255,255,255,.72)!important;
    margin:14px clamp(14px,4vw,22px) 0;justify-content:flex-start;
    border-bottom:0!important;gap:12px;padding:0 8px}
  .sozial::after{display:inline;content:"Instagram";font-family:var(--sans);
    font-size:15px;letter-spacing:.01em}
  .menue{display:flex;z-index:80;position:relative}
  /* Ein backdrop-filter macht die Leiste zum Bezugsrahmen für alles, was
     darin fest positioniert ist. Die Schublade hing dadurch an der Leiste
     statt am Fenster und war 76 px hoch — abgeschnitten mitten im Wort.
     Auf schmalen Geräten hat die Leiste ohnehin einen deckenden Grund; die
     Unschärfe dahinter sieht dort niemand. */
  .kopf{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--papier)}
  /* Der wichtigste Weg in der Schublade muss auch der auffälligste sein.
     Auf dunklem Grund heißt das: heller Knopf, dunkle Schrift. */
  .nav-knopf{margin:22px clamp(22px,6vw,30px) 0;justify-content:center!important;
    border-radius:var(--rund);min-height:54px;display:flex;align-items:center;
    border-bottom:0!important;font-size:16.5px!important;font-weight:600;
    background:var(--papier)!important;color:var(--tinte)!important;
    padding:0 22px!important}
  .nav-knopf:hover{background:#fff!important}
  /* Der Schließen-Knopf sitzt über der Schublade, nicht daneben. */
  .menue{color:var(--tinte)}
  .kopf.menue-auf .menue{color:#fff}
  /* Der Vorhang schließt beim Tippen daneben. */
  .vorhang{position:fixed;inset:0;background:rgba(10,14,16,.5);
    opacity:0;visibility:hidden;transition:opacity .4s var(--zug),
    visibility 0s linear .4s;z-index:60}
  .vorhang.auf{opacity:1;visibility:visible;transition-delay:0s,0s}
  body.menue-offen{overflow:hidden}
}

/* ═══════════════════════════════════════════════════════════════════════
   Ouvertüre — vier Aufnahmen, die ineinander laufen

   Der ganze Ablauf steckt in zwei Bildfolgen. 24 Sekunden Umlauf, vier
   Aufnahmen zu je sechs Sekunden, anderthalb Sekunden Überblendung. Jede
   Aufnahme fährt während ihrer eigenen Zeit langsam heran und springt
   zurück, während sie unsichtbar ist.

   Bewegt werden ausschließlich Deckkraft und Maßstab — beides rechnet die
   Grafikkarte, nicht der Hauptprozessor. Deshalb läuft das auch auf einem
   Telefon flüssig.
   ═══════════════════════════════════════════════════════════════════════ */

.ouvertuere{position:relative;min-height:min(100svh,900px);display:flex;
  align-items:flex-end;overflow:hidden;background:#1b1814;isolation:isolate}

.ouvertuere .film{position:absolute;inset:0;z-index:0}
/* Das Bewegtbild liegt über den Standbildern. Fällt es aus — kein Netz,
   Format nicht unterstützt, Datenspar-Modus —, läuft darunter unverändert
   die Bildfolge weiter. Niemand sieht eine schwarze Fläche. */
.ouvertuere .bewegtbild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 44%;z-index:1;
  filter:saturate(1.04) contrast(1.04)}
.ouvertuere .schleier{z-index:2}
@media(prefers-reduced-motion:reduce){.ouvertuere .bewegtbild{display:none}}
.ouvertuere .aufnahme{position:absolute;inset:0;margin:0;overflow:hidden;
  opacity:0}
.ouvertuere .aufnahme img{width:100%;height:100%;object-fit:cover;
  object-position:52% 44%;transform:scale(1.03);
  filter:saturate(1.05) contrast(1.05)}

/* Erste Aufnahme steht sofort — auch ohne Bildfolge, falls etwas fehlt. */
.ouvertuere .aufnahme:first-child{opacity:1}

/* Für Aufnahmen: Der Film hält beim ersten Bild an. */
.standbild .ouvertuere .aufnahme,.standbild .ouvertuere .aufnahme img,
.standbild .marke-punkt span::after{transition:none!important}
.standbild .ouvertuere .aufnahme{opacity:0}
.standbild .ouvertuere .aufnahme:first-child{opacity:1}
.standbild .marke-punkt:first-child span::after{transform:scaleX(1)}

/* Der Wechsel läuft über Übergänge, nicht über Bildfolgen. Grund: Eine
   CSS-Bildfolge lässt sich von außen nicht ablesen — ihre Uhr steht still,
   sobald die Seite nicht gezeichnet wird, und dann kann niemand prüfen, ob
   sie überhaupt läuft. Ein Zeitgeber, der eine Klasse setzt, ist messbar.
   Fällt das Skript aus, bleibt die erste Aufnahme stehen. */
.ouvertuere .aufnahme{transition:opacity 1.6s linear}
.ouvertuere .aufnahme.an{opacity:1}
.ouvertuere .aufnahme img{transition:transform 7.6s linear}
.ouvertuere .aufnahme.an img{transform:scale(1.15)}
.ouvertuere .aufnahme.zurueck img{transition:none;transform:scale(1.03)}

@media(prefers-reduced-motion:reduce){
  .ouvertuere .aufnahme{transition:none}
  .ouvertuere .aufnahme img{transition:none;transform:scale(1.03)}
}

/* Der Schleier hält die Schrift lesbar.

   Vorher lagen hier zwei Flächen übereinander, die das ganze Bild
   gleichmäßig zugedeckt haben — auch dort, wo gar keine Schrift steht.
   Jetzt ist es eine einzige, sehr weiche Ellipse unter dem Textblock. Sie
   ist breit und flach, weil der Text breit und flach ist; eine runde Form
   müsste viel tiefer sein, um dieselbe Zeile zu decken, und würde dabei das
   halbe Bild mitnehmen. Sie hat keine Kante, also fällt sie nicht auf.

   Gemessen an der Pensions-Aufnahme: das rechte Bilddrittel wird von
   Helligkeit 67 auf 95 heller, die ganze Fläche von 39 auf 60 — und die
   Überschrift bleibt über 3:1. */
.ouvertuere .schleier{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 110% 75% at 20% 58%,
      rgba(14,11,9,.97) 0%, rgba(14,11,9,.84) 32%,
      rgba(14,11,9,.30) 60%, rgba(14,11,9,0) 85%),
    linear-gradient(180deg, rgba(14,11,9,.16) 0%, rgba(14,11,9,.03) 35%,
      rgba(14,11,9,0) 62%, rgba(14,11,9,.34) 100%),
    linear-gradient(90deg, rgba(14,11,9,.41) 0%, rgba(14,11,9,.21) 40%,
      rgba(14,11,9,.05) 72%, rgba(14,11,9,0) 100%)}
/* Auf dem Handy steht die Schrift nicht links, sondern über die ganze
   Breite — die Ellipse wird entsprechend breiter und flacher. Sie sitzt auf
   der Mitte des Textblocks, nicht auf seinem unteren Ende: Sonst liegt die
   kleine Kicker-Zeile ganz oben schon außerhalb, und die ist mit 12,5 px
   die empfindlichste Stelle im ganzen Kopf. */
@media(max-width:760px){
  .ouvertuere .schleier{
    background:
      radial-gradient(ellipse 150% 72% at 50% 64%,
        rgba(14,11,9,.80) 0%, rgba(14,11,9,.58) 32%,
        rgba(14,11,9,.14) 62%, rgba(14,11,9,0) 88%),
      linear-gradient(180deg, rgba(14,11,9,.06) 0%, rgba(14,11,9,0) 42%,
        rgba(14,11,9,.18) 100%)}
}
.ouvertuere .film::after{content:"";position:absolute;inset:0;opacity:.42;
  mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.4'/%3E%3C/svg%3E")}

.ouvertuere .innen{position:relative;z-index:3;width:100%;
  padding-top:clamp(120px,16vh,190px);padding-bottom:clamp(96px,13vh,168px)}
.ouvertuere .ort{font-family:var(--sans);font-size:clamp(13px,3.4vw,14px);
  letter-spacing:.2em;
  text-transform:uppercase;color:#efe6d8;margin:0 0 clamp(18px,2.2vw,28px);
  display:flex;align-items:center;gap:14px;font-weight:500}
.ouvertuere .ort::before{content:"";width:clamp(26px,4vw,56px);height:1px;
  background:var(--terra-hell)}

.ouvertuere h1{color:#fffdf9;font-size:clamp(36px,6.6vw,104px);line-height:1.0;
  letter-spacing:-.028em;max-width:15ch;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  text-shadow:0 2px 50px rgba(10,14,16,.55)}
.ouvertuere h1 span{display:block}
.ouvertuere h1 em{font-style:italic;font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.014em;
  color:var(--messing-hell)}

.ouvertuere .unter{font-family:var(--lese);font-size:clamp(17px,1.7vw,21px);
  line-height:1.55;color:#f4ede1;max-width:44ch;
  margin:clamp(22px,2.6vw,34px) 0 clamp(28px,3.2vw,40px)}
.ouvertuere .knopf.klar{border-color:rgba(255,253,249,.55);color:#fffdf9}
.ouvertuere .knopf.klar:hover{background:rgba(255,253,249,.16);
  border-color:#fffdf9}

/* Die Leiste zeigt, welche Aufnahme läuft — vier Striche, einer füllt sich. */
.filmleiste[hidden]{display:none}
.filmleiste{position:absolute;z-index:3;left:var(--rand);
  bottom:clamp(30px,4.6vh,58px);display:flex;gap:9px}
.marke-punkt{width:clamp(26px,3.4vw,44px);height:2px;padding:9px 0;border:0;
  background:none;cursor:default;position:relative;overflow:visible}
.marke-punkt span{display:block;height:2px;border-radius:2px;
  background:rgba(255,253,249,.3);position:relative;overflow:hidden}
.marke-punkt span::after{content:"";position:absolute;inset:0;
  background:#fffdf9;transform:scaleX(0);transform-origin:left}
.marke-punkt.an span::after{transform:scaleX(1);
  transition:transform 6s linear}
.marke-punkt.zurueck span::after{transition:none;transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){
  .marke-punkt span::after{transition:none}
}


.ouvertuere .weiter{position:absolute;z-index:3;
  right:clamp(30px,5.4vw,80px);bottom:clamp(30px,4.4vh,56px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:#efe6d8;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.ouvertuere .weiter::after{content:"";width:1px;height:clamp(28px,4.4vh,54px);
  background:linear-gradient(180deg,rgba(239,230,216,.8),rgba(239,230,216,0))}
.ouvertuere .weiter:hover{color:#fffdf9}
@media(max-width:700px){
  .ouvertuere .weiter{display:none}
  .filmleiste{left:50%;transform:translateX(-50%)}
}

/* Über der Eröffnung steht die Kopfleiste auf dem Film. */

/* Die Einblendung der Schrift bleibt — sie legt sich über den laufenden Film. */
@media(prefers-reduced-motion:no-preference){
  .bewegt .ouvertuere .ort,
  .bewegt .ouvertuere h1 span,
  .bewegt .ouvertuere .unter,
  .bewegt .ouvertuere .knopfzeile,
  .bewegt .ouvertuere .weiter,
  .bewegt .ouvertuere .filmleiste{opacity:0;transform:translateY(20px)}
  .bewegt .ouvertuere.laeuft .ort,
  .bewegt .ouvertuere.laeuft h1 span,
  .bewegt .ouvertuere.laeuft .unter,
  .bewegt .ouvertuere.laeuft .knopfzeile,
  .bewegt .ouvertuere.laeuft .weiter,
  .bewegt .ouvertuere.laeuft .filmleiste{opacity:1;transform:none;
    transition:opacity .9s var(--zug),transform .9s var(--zug)}
  .bewegt .ouvertuere.laeuft .ort{transition-delay:.26s}
  .bewegt .ouvertuere.laeuft h1 span:nth-child(1){transition-delay:.36s}
  .bewegt .ouvertuere.laeuft h1 span:nth-child(2){transition-delay:.46s}
  .bewegt .ouvertuere.laeuft .unter{transition-delay:.62s}
  .bewegt .ouvertuere.laeuft .knopfzeile{transition-delay:.72s}
  .bewegt .ouvertuere.laeuft .filmleiste{transition-delay:.9s}
  .bewegt .ouvertuere.laeuft .weiter{transition-delay:1s}
}

/* ── Bühne: Titelei als geschichtete Doppelseite ──────────────────────── */
/* Die Fotografie läuft nach rechts aus dem Satzspiegel heraus bis an den
   Fensterrand. Das ist der Unterschied zwischen einem Bild, das in einem
   Kasten sitzt, und einem, das die Seite trägt. */
.buehne{padding:calc(116px + clamp(24px,4.4vw,64px)) 0 clamp(48px,7vw,104px);
  position:relative;overflow-x:clip;
  --ausgleich:calc((100vw - min(var(--breit), 100vw)) / 2 + var(--rand))}
.buehne .satz{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(30px,4.6vw,78px);align-items:center}
.buehne .satzspalte{position:relative;z-index:3}
.buehne h1{max-width:13ch;position:relative}
.buehne .unter{font-family:var(--lese);font-size:clamp(18px,1.9vw,22px);
  font-variation-settings:"opsz" 28;color:#3a4045;margin:24px 0 34px;max-width:40ch}

/* Das Wappen liegt sehr blass hinter der Schrift — spürbar, nicht lesbar. */
.wasserzeichen{position:absolute;left:calc(var(--ausgleich) * -1 + var(--rand));
  top:clamp(60px,11vw,150px);width:min(560px,46vw);opacity:.055;z-index:0;
  pointer-events:none;user-select:none}
@media(max-width:940px){.wasserzeichen{opacity:.04;width:76vw;left:8vw}}

.buehne .bildwerk{position:relative;margin-right:calc(var(--ausgleich) * -1)}
.buehne .tafel.haupt{box-shadow:var(--heben-stark)}

/* Die kleine Tafel überlappt die Fotografie unten links. */
.buehne .tafel.neben{position:absolute;left:clamp(-56px,-4vw,-24px);
  bottom:clamp(-52px,-4.4vw,-26px);width:clamp(140px,15vw,206px);z-index:4;
  box-shadow:var(--heben-stark)}
.buehne .tafel.neben figcaption{display:none}
.buehne .tafel.haupt figcaption{justify-content:flex-end;padding-right:6px}
@media(max-width:940px){.buehne .tafel.haupt figcaption{justify-content:flex-start}}
@media(max-width:940px){
  .buehne .satz{grid-template-columns:1fr;gap:34px}
  .buehne h1{max-width:none}
  .buehne .bildwerk{margin-right:0}
  .buehne .tafel.neben{width:118px;left:auto;right:14px;bottom:-30px}
}

/* Die Tafel selbst: Passepartout, Haarlinie, Bildunterschrift. */
.tafel{position:relative;background:transparent;padding:0;border:0;
  box-shadow:none}
.tafel .flaeche{position:relative;overflow:hidden;background:var(--sand);
  aspect-ratio:var(--verhaeltnis, 3 / 2);border-radius:var(--rund-gross);
  box-shadow:var(--heben-stark)}
.tafel img{width:100%;height:100%;object-fit:cover;display:block}
/* Wo ein Bewegtbild vorliegt, legt es sich über die Fotografie.
   Fehlt es, bleibt die Fotografie stehen. */
.tafelvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.tafelvideo{display:none}}
.tafel figcaption{font-family:var(--sans);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-leise);padding:12px 3px 2px;
  display:flex;gap:10px;align-items:baseline}
.tafel figcaption::before{content:"";width:16px;height:1px;flex:none;
  background:var(--messing);transform:translateY(-4px)}
.buehne.klein{padding:calc(106px + clamp(18px,3.2vw,44px)) 0 clamp(26px,3.6vw,56px)}
.buehne.klein .satz{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,3.8vw,64px)}
.buehne.klein h1{font-size:clamp(42px,6.4vw,88px);max-width:14ch}
.buehne.klein .bildwerk{margin-right:0}
/* Wo die Titelei selbst eine gravierte Tafel zeigt, bleibt sie schmal und
   rechtsbündig — eine Tafel ist kein Panorama. */
.buehne.stichbuehne .tafel.haupt{max-width:380px;margin-left:auto}
.buehne+section{padding-top:clamp(46px,5.8vw,86px)}

/* Fotografien bekommen dieselbe Tinte wie die Tafeln, damit beide Bildsorten
   nebeneinander bestehen können. Sehr zurückhaltend — das Foto bleibt ein
   Foto, es wird nur in denselben Farbraum gezogen. */
.tafel .flaeche.foto img,.bildrahmen img,.leistung .bild img,.instabilder img{
  filter:saturate(.86) contrast(1.03)}
.tafel .flaeche.foto::after,.bildrahmen::after{content:"";position:absolute;
  inset:0;background:var(--stich);mix-blend-mode:soft-light;opacity:.3;
  pointer-events:none}

/* ── Messing ──────────────────────────────────────────────────────────── */
/* Ein einziger warmer Akzent, sparsam eingesetzt: Haarlinien, Zierzeichen,
   die Ziffern im Zahlenband. Nie für Text, nie für Flächen. */

/* ── Zahlenband ──────────────────────────────────────────────────────── */
.zahlenband{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:clamp(34px,4.4vw,60px) 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(24px,3vw,52px)}
.zahlenband .stelle{position:relative;padding-left:22px}
.zahlenband .stelle::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:var(--messing);opacity:.55}
.zahlenband b{font-family:var(--schmal);font-size:clamp(38px,4.4vw,58px);
  font-weight:600;display:block;line-height:.98;color:var(--tinte);
  letter-spacing:-.02em}
.zahlenband b em{font-style:normal;font-size:.5em;color:var(--messing);
  vertical-align:.5em;margin-left:.12em;letter-spacing:0}
.zahlenband span{display:block;margin-top:10px;font-size:14.5px;
  color:var(--tinte-weich);font-family:var(--lese);
  font-variation-settings:"opsz" 12;max-width:26ch}

/* ── Herausgehobener Satz im Fließtext ───────────────────────────────── */
/* Ein Satz aus dem Beitrag, groß gesetzt. Kein neuer Inhalt — eine
   Lesehilfe, die der Seite Rhythmus gibt. */
.merksatz{font-family:var(--schmal);font-size:clamp(25px,2.9vw,38px);
  font-weight:600;line-height:1.12;letter-spacing:-.012em;color:var(--tinte);
  margin:52px 0 46px;padding:26px 0 0;border-top:1px solid var(--messing);
  max-width:24ch;text-wrap:balance}
.merksatz::after{content:"";display:block;width:34px;height:1px;
  background:var(--linie-stark);margin-top:22px}

/* ── Bildpaar ────────────────────────────────────────────────────────── */
/* Zwei Abbildungen nebeneinander, bündig und gleich hoch. Der Versatz, den
   diese Regel vorher hatte, riss auf der linken Seite ein Loch — das sah
   nicht nach Absicht aus, sondern nach Fehler. */
.bildpaar{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,40px);align-items:start}
@media(max-width:820px){.bildpaar{grid-template-columns:1fr}}
.paarbild{margin:0}
.paarbild img{width:100%;aspect-ratio:var(--verh,3/2);object-fit:cover;display:block;
  border-radius:var(--rund);box-shadow:var(--heben);
  filter:saturate(.9) contrast(1.02)}
.paarbild figcaption{font-family:var(--sans);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-leise);margin-top:13px;
  display:flex;align-items:center;gap:10px}
.paarbild figcaption::before{content:"";width:16px;height:1px;flex:none;
  background:var(--messing)}

/* ── Dunkle Flächen bekommen Tiefe ───────────────────────────────────── */
.dunkel{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 18% 0%,#33525f 0%,var(--schiefer) 46%,
    var(--schiefer-tief) 100%)}
.dunkel>.innen{position:relative;z-index:2}

/* Haarlinie in Messing über den Überschriften dunkler Flächen. */
.dunkel .regel{background:var(--messing);opacity:.8}

/* ── Karten bekommen Papier statt Weiß ───────────────────────────────── */
.paket{background:linear-gradient(180deg,#fbf9f3 0%,#f6f2e9 100%)}
.paket:hover{background:#fdfcf8}

/* ── Knöpfe ──────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;gap:9px;background:var(--tief);
  color:#fff;padding:15px 30px;font-size:16.5px;font-weight:600;border:0;
  cursor:pointer;font-family:var(--sans);border-radius:var(--rund);
  box-shadow:0 1px 2px rgba(34,56,70,.14);
  transition:background .2s,box-shadow .22s var(--zug),transform .16s var(--zug)}
.knopf:hover{background:var(--tief-dunkel);transform:translateY(-1.5px);
  box-shadow:0 2px 3px rgba(34,56,70,.12),0 10px 22px -10px rgba(34,56,70,.4)}
.knopf:active{transform:none;box-shadow:0 1px 2px rgba(34,56,70,.2)}
.knopf.klar{background:transparent;border:1.5px solid var(--linie-stark);
  color:var(--tinte);box-shadow:none}
.knopf.klar:hover{background:var(--sand);border-color:var(--tinte-leise);
  box-shadow:none}
.dunkel .knopf.klar{border-color:rgba(255,255,255,.45);color:#fff}
.dunkel .knopf.klar:hover{background:rgba(255,255,255,.12);border-color:#fff}
.knopf.dunkel{background:var(--schiefer)}
.knopf.dunkel:hover{background:var(--schiefer-tief)}
.knopfzeile{display:flex;gap:13px;flex-wrap:wrap}

/* ── Abschnitte ──────────────────────────────────────────────────────── */
section{padding:clamp(60px,8.4vw,124px) 0}
/* Der Browser rechnet Umbruch und Malerei für weit entfernte Abschnitte
   erst, wenn sie in die Nähe kommen. Die Größenangabe verhindert dabei,
   dass der Bildlaufbalken springt. */
@supports(content-visibility:auto){
  section:nth-of-type(n+5){content-visibility:auto;contain-intrinsic-size:auto 720px}
}
section.schmal{padding:clamp(44px,5.6vw,78px) 0}
.dunkel{background:var(--schiefer);
  --text:rgba(255,255,255,.88);
  --text-stark:#ffffff;
  --text-ruhig:rgba(255,255,255,.92);
  --text-leise:rgba(255,255,255,.74);
  color:var(--text)}
.sandgrund{background:var(--sand)}
/* Grundflächen laufen kantenbündig zusammen — eine Haarlinie trennt sie. */
.sandgrund+.sandgrund,section+section:not(.dunkel):not(.sandgrund){
  border-top:1px solid var(--linie)}

.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.6vw,82px);
  align-items:center}
.zweispalt.versetzt{grid-template-columns:.82fr 1.18fr;align-items:start}
/* Eine Überschrift darf nur dann mitlaufen, wenn sie allein in ihrer Spalte
   steht. Steht Text unter ihr, schiebt sie sich beim Scrollen über ihn —
   eine klebende Zeile nimmt dem Folgenden ja keinen Platz weg. */
.zweispalt.versetzt>div:first-child>h2:only-child{position:sticky;top:104px}
@media(max-width:880px){
  .zweispalt,.zweispalt.versetzt{grid-template-columns:1fr;gap:28px}
  .zweispalt.versetzt>div:first-child>h2:only-child{position:static}
}
.bildrahmen{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);
  box-shadow:var(--heben);border-radius:var(--rund)}
.bildrahmen img{width:100%;height:100%;object-fit:cover}
.bildrahmen.hoch{aspect-ratio:3/4}

/* ── Leistungsraster ─────────────────────────────────────────────────── */
.leistungen{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,26px);
  background:transparent;border:0}
@media(min-width:760px){.leistungen{grid-template-columns:1fr 1fr}}
.leistung{background:var(--papier-hell);position:relative;display:flex;
  flex-direction:column;border-radius:var(--rund-gross);overflow:hidden;
  box-shadow:var(--heben);
  transition:box-shadow .34s var(--zug),transform .34s var(--zug)}
.leistung:hover{box-shadow:var(--heben-stark);transform:translateY(-3px)}
.leistung .bild{aspect-ratio:3/2;overflow:hidden;background:var(--sand);
  position:relative}
.leistung .bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--zug)}
.leistung:hover .bild img{transform:scale(1.04)}
.leistung .inhalt{padding:clamp(26px,2.4vw,36px) clamp(26px,2.4vw,38px)
  clamp(30px,2.6vw,40px);flex:1;display:flex;flex-direction:column}
.leistung h3{margin-bottom:10px;font-size:clamp(23px,2vw,28px)}
.leistung p{font-family:var(--lese);font-size:16.5px;color:#40454a;flex:1;
  margin-bottom:18px;font-variation-settings:"opsz" 14}
.leistung .mehr{font-size:15px;font-weight:500;color:var(--petrol);
  display:inline-flex;gap:7px;align-items:center;
  transition:gap .28s var(--zug)}
.leistung:hover .mehr{gap:13px}
.leistung .preis{font-family:var(--schmal);font-size:21px;font-weight:600;
  color:var(--tinte);margin-bottom:5px}

/* ── Instagram ───────────────────────────────────────────────────────── */
/* Instagram liefert jeden Beitrag als eigenes Fenster aus. Die Höhe steht
   fest, weil ein fremdes Fenster seine Größe nicht meldet — 470 px trägt
   Bild und die ersten Zeilen Text. */
.instabeitraege{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.instabeitraege li{margin:0;border-radius:var(--rund);overflow:hidden;
  background:var(--papier-hell);box-shadow:var(--heben);min-height:470px}
.instabeitraege iframe{width:100%;height:470px;border:0;display:block}
@media(max-width:520px){
  .instabeitraege li,.instabeitraege iframe{min-height:420px;height:420px}
}
.instablock{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,4vw,64px);
  align-items:center}
@media(max-width:880px){.instablock{grid-template-columns:1fr}}
.instabilder{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.instabilder img{aspect-ratio:1;object-fit:cover;width:100%;box-shadow:var(--heben);
  border-radius:var(--rund-klein)}

/* ── Zahlenband ──────────────────────────────────────────────────────── */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(22px,3vw,48px)}
.zahl b{font-family:var(--schmal);font-size:clamp(42px,4.8vw,66px);font-weight:600;
  display:block;line-height:1;color:var(--dunst)}
.zahl span{font-size:14.5px;color:rgba(255,255,255,.74);display:block;margin-top:8px}

/* ── Listen ──────────────────────────────────────────────────────────── */
ul.haken{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.haken li{padding-left:29px;position:relative;font-size:16.5px;
  font-family:var(--lese);color:var(--text)}
ul.haken li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:6px;
  border-left:1.5px solid var(--petrol);border-bottom:1.5px solid var(--petrol);
  transform:rotate(-45deg)}
.dunkel ul.haken li::before{border-color:var(--dunst)}
ul.zwei{grid-template-columns:1fr 1fr}
@media(max-width:640px){ul.zwei{grid-template-columns:1fr}}

/* ── Pakete ──────────────────────────────────────────────────────────── */
.pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.paket{border:1px solid var(--linie);background:var(--papier-hell);
  border-radius:var(--rund-gross);padding:32px 30px 34px;display:flex;
  flex-direction:column;
  transition:box-shadow .32s var(--zug),transform .32s var(--zug)}
.paket:hover{box-shadow:var(--heben);transform:translateY(-2px)}
.paket .dauer{font-family:var(--sans);font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-leise);font-weight:500}
.paket h3{margin:9px 0 17px}
.paket ul{flex:1}
.paket p{font-family:var(--lese);font-size:16.5px;
  font-variation-settings:"opsz" 14;color:#40454a}

/* ── Menschen: eine Reihe, kein Kachelraster ─────────────────────────── */
/* Die Porträts sind jetzt zugeordnet — die Namen der Bilddateien auf der
   bestehenden Seite geben sie eindeutig her. Eine Reihe statt eines
   Kachelrasters, weil drei Kacheln nach einer halben Mannschaft aussehen. */
.menschen{border-top:1px solid var(--linie)}
.mensch{display:grid;
  grid-template-columns:clamp(150px,17vw,230px) minmax(0,.8fr) minmax(0,1.1fr);
  gap:clamp(22px,3.2vw,54px);padding:clamp(30px,3.4vw,52px) 0;
  border-bottom:1px solid var(--linie);align-items:start}
.mensch .bild{aspect-ratio:4/5;overflow:hidden;border-radius:var(--rund);
  background:var(--sand);box-shadow:var(--heben)}
.mensch .bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02);transition:transform .7s var(--zug)}
.mensch:hover .bild img{transform:scale(1.035)}
@media(max-width:1000px){
  .mensch{grid-template-columns:clamp(130px,20vw,190px) minmax(0,1fr)}
  .mensch .was{grid-column:1 / -1}
}
@media(max-width:560px){
  .mensch{grid-template-columns:1fr;gap:16px}
  .mensch .bild{max-width:220px}
}
.mensch h3{font-size:clamp(26px,2.9vw,38px);line-height:1.08;margin-bottom:10px}
.mensch .rolle{font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--tief);margin:0 0 6px;max-width:30ch}
.mensch .qual{font-family:var(--sans);font-size:13.5px;color:var(--text-leise);
  margin:0;max-width:34ch}
.mensch .satz{font-family:var(--lese);font-size:clamp(17px,1.6vw,19.5px);
  line-height:1.6;color:var(--text-ruhig);margin:0 0 20px;max-width:46ch}
.koennen{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;
  gap:8px}
.koennen li{font-family:var(--sans);font-size:13.5px;letter-spacing:.01em;
  color:var(--tinte-weich);background:var(--sand);border-radius:var(--rund-klein);
  padding:6px 12px}
.weiterlesen{font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--tief);display:inline-flex;gap:8px;align-items:center;
  min-height:44px;transition:gap .28s var(--zug)}
.weiterlesen::after{content:"→"}
.mensch:hover .weiterlesen{gap:13px}

/* Nachweise auf der Personenseite: zweite Spalte, klar gegliedert. */
.nachweise h3{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-leise);font-weight:600;
  margin:0 0 14px!important;padding-top:20px;border-top:1px solid var(--linie)}
.nachweise>h3:first-child{padding-top:0;border-top:0}
.nachweise ul{margin-bottom:30px}
.nachweise ul.haken li{font-size:15.5px}

/* ── Offene Punkte: sichtbar, aber nicht laut ────────────────────────── */
/* Diese Marken sind eine Arbeitshilfe für den Kunden, kein Warnschild.
   Der gelbe Kasten mit gestricheltem Rand sah aus wie ein Fehler. */
.offen{display:inline-flex;align-items:baseline;gap:10px;background:none;
  border:0;border-radius:0;color:var(--tinte-weich);font-family:var(--sans);
  font-size:13px;padding:0;margin:8px 0;max-width:62ch;line-height:1.5}
.offen::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--messing);transform:translateY(-2px)}
.dunkel .offen{color:rgba(255,255,255,.72);background:none;border:0}
.dunkel .offen::before{background:var(--messing-hell)}

/* ── Fußbereich ──────────────────────────────────────────────────────── */
footer{background:var(--schiefer-tief);color:rgba(255,255,255,.8);
  padding:clamp(54px,7vw,88px) 0 32px;font-size:15.5px;position:relative}
footer .wappen{display:block;width:min(210px,42vw);margin:0 auto 44px;opacity:.5;
  mix-blend-mode:screen;filter:grayscale(1) brightness(1.7) contrast(.85)}
footer .raster{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:42px;
  padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:820px){footer .raster{grid-template-columns:1fr;gap:30px}}
footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dunst);margin:0 0 15px;font-weight:500}
footer a{text-decoration:none;color:rgba(255,255,255,.86);
  transition:color .2s}
footer a:hover{color:#fff}
/* Nur die Verweise im Fließtext bekommen eine Unterstreichung — eine Liste
   aus lauter unterstrichenen Zeilen sieht aus wie ein Rohdokument. */
footer .raster ul a{position:relative}
footer .raster ul a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--zug)}
footer .raster ul a:hover::after{transform:none}
footer .fusszeile{padding-top:26px;display:flex;gap:24px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(255,255,255,.56)}
footer .fusszeile .luecke{flex:1}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}


/* Zitat: hängendes Anführungszeichen im Rand, kein Farbbalken. */
.spruch{font-family:var(--lese);font-size:clamp(21px,2.2vw,27px);line-height:1.42;
  font-style:italic;font-variation-settings:"opsz" 36;color:#2c3236;
  margin:0 0 22px;position:relative;max-width:36ch;
  padding-left:.72em;text-indent:-.72em}
.spruch::before{content:'„';color:var(--linie-stark);font-style:normal}
.spruch::after{content:'“';color:var(--linie-stark);font-style:normal}


.rechtstitel{font-family:var(--schmal);font-size:clamp(19px,2vw,24px);font-weight:600;
  color:var(--tinte);margin:38px 0 10px;padding-top:20px;border-top:1px solid var(--linie)}
.rechtstitel:first-of-type{border-top:0;padding-top:0;margin-top:24px}
.innen.eng p{max-width:70ch}



/* ═══════════════════════════════════════════════════════════════════════
   Bewegung

   Eine einzige Sprache: Dinge legen sich auf Papier. Sie kommen von leicht
   oben, minimal unscharf, und kommen zur Ruhe — exponentiell auslaufend,
   nie federnd, nie seitlich. Wer eine Bewegung sieht, soll denken „das Blatt
   wurde aufgelegt", nicht „da animiert etwas".

   Reihenfolge in der Titelei: Linie, Überschrift Zeile für Zeile, Vorspann,
   Knöpfe, Tafel. 70 ms Abstand — schnell genug, dass niemand wartet,
   langsam genug, dass die Folge lesbar ist.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Ruhezustände hängen an .bewegt auf dem <html>-Element. Diese Klasse
   setzt das Skript als allererstes. Fällt das Skript aus — abgeschaltetes
   JavaScript, Ladefehler, Tippfehler in einer künftigen Änderung —, wird
   nichts versteckt, und die Seite steht vollständig da. Inhalt per CSS
   auszublenden und sich darauf zu verlassen, dass ihn später jemand wieder
   einblendet, ist der teuerste Fehler in dieser Sorte Gestaltung. */
@media(prefers-reduced-motion:no-preference){

  /* Der gemeinsame Ruhezustand aller bewegten Teile. */
  .bewegt .auflegen,.bewegt .steigt,.bewegt .zieht{will-change:transform,opacity}

  .bewegt .auflegen{opacity:0;transform:translateY(20px) scale(.988);filter:blur(7px)}
  .bewegt .auflegen.liegt{opacity:1;transform:none;filter:none;
    transition:opacity .9s var(--zug),transform .9s var(--zug),filter .75s var(--zug)}

  /* Text steigt ohne Unschärfe — Buchstaben sollen nie verwaschen wirken. */
  .bewegt .steigt{opacity:0;transform:translateY(14px)}
  .bewegt .steigt.liegt{opacity:1;transform:none;
    transition:opacity .7s var(--zug),transform .7s var(--zug)}

  /* Die Zierlinie wird gezogen. */
  .bewegt .zieht{transform:scaleX(0);transform-origin:left}
  .bewegt .zieht.liegt{transform:none;transition:transform .8s var(--zug)}

  /* Verzögerung als Datenattribut, damit die Reihenfolge im Markup steht
     und nicht in einer Kette von :nth-child-Regeln. */
  [data-takt="1"]{transition-delay:.07s}
  [data-takt="2"]{transition-delay:.14s}
  [data-takt="3"]{transition-delay:.21s}
  [data-takt="4"]{transition-delay:.28s}
  [data-takt="5"]{transition-delay:.35s}
  [data-takt="6"]{transition-delay:.42s}

  /* Die Tafel in der Titelei folgt dem Bildlauf ein Stück nach. */
  .buehne .tafel{transform:translateY(var(--versatz,0px))}
  .buehne .tafel.liegt{transition:opacity .9s var(--zug),filter .75s var(--zug),
    transform .12s linear}
}

/* Ein Blatt hebt sich beim Überfahren minimal an — dieselbe Sprache. */
.wissenkarte:focus-visible{outline:2px solid var(--petrol);outline-offset:6px}
.wissenkarte:focus-visible .bild{box-shadow:var(--heben-stark)}

/* Lesefortschritt: eine Tintenlinie am oberen Rand, nur auf Beitragsseiten.
   Sie beantwortet die einzige Frage, die man bei einem langen Text hat. */
.fortschritt{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  background:var(--petrol);transform:scaleX(var(--gelesen,0));transform-origin:left;
  opacity:.85;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fortschritt{display:none}}

/* Das Verzeichnis zeigt, wo man gerade ist. */
.inhaltsverzeichnis a[aria-current]{color:var(--petrol);font-weight:500}
.inhaltsverzeichnis li[data-hier]::before{color:var(--petrol)}

/* Sprungmarke für die Tastatur. Sitzt außerhalb des Blicks, bis sie
   angesteuert wird — dann liegt sie über allem. */
.sprung{position:absolute;left:var(--rand);top:-100px;z-index:90;
  background:var(--petrol);color:#fff;padding:12px 20px;font-size:15px;
  border-radius:0 0 2px 2px;transition:top .22s var(--zug)}
.sprung:focus{top:0}

/* ── Druck ───────────────────────────────────────────────────────────── */
/* Jemand druckt den Futterplan-Beitrag aus und nimmt ihn mit in den Stall.
   Dann soll nicht die Navigation mitkommen. */
@media print{
  .kopf,footer,.fortschritt,.sprung,.knopfzeile,.inhaltsverzeichnis,
  body::before{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .buehne{padding:0 0 12mm}
  .buehne .satz{grid-template-columns:1fr}
  .tafel{box-shadow:none;border:1px solid #999;break-inside:avoid}
  section{padding:8mm 0;break-inside:auto}
  h1{font-size:26pt}h2{font-size:15pt;break-after:avoid}
  h2,h3{break-after:avoid}
  p,li{orphans:3;widows:3}
  article.beitrag{display:block;max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .auflegen,.steigt,.zieht{opacity:1!important;transform:none!important;
    filter:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
 Bewegung beim Scrollen

 Bis hierher war die Seite ein Stapel ruhiger Abschnitte: Überschrift
 links, Text rechts, weiter. Sauber, aber es passierte nichts. Ab jetzt
 arbeitet der Bildlauf mit: Ein Bild bleibt stehen und wechselt, während
 der Text daran vorbeizieht. Eine Aussage füllt die ganze Fläche. Zahlen
 zählen sich hoch. Bilder lassen sich ziehen.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── Aussage: eine Zeile, so groß wie sie verträgt ───────────────────── */
.aussage{padding:clamp(80px,12vw,180px) 0}
.riesig{font-size:clamp(32px,6.4vw,96px);line-height:1.0;letter-spacing:-.03em;
max-width:16ch;margin-bottom:clamp(24px,3vw,44px)}
.riesig.hell{color:#fffdf9}
.aussage .gross{max-width:56ch}

/* Wortweise Enthüllung. Nur für die großen Zeilen — überall wäre es Unruhe. */
/* Der Zuschlag unten ist kein Schönheitswert: Bei line-height 1.0 ragt die
   Zeile eines Fraunces-Schnitts rund 0,4 em unter den Kasten. Ohne ihn
   schneidet die Maske jedes g, j, p, q und y an der Grundlinie ab. Das
   Wort startet entsprechend tiefer, sonst lugt es vorher schon hervor. */
.wort{display:inline-block;overflow:hidden;vertical-align:top;
padding-bottom:.42em;margin-bottom:-.42em}
.wort>i{display:inline-block;font-style:inherit;transform:translateY(155%);
transition:transform .82s var(--zug)}
.bewegt .zeigt .wort>i{transform:none}
@media(prefers-reduced-motion:reduce){.wort>i{transform:none!important}}

/* ── Angeheftete Leistungsfolge ──────────────────────────────────────── */
.folge{padding:0 0 clamp(60px,8vw,120px)}
.folge-raster{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
gap:clamp(30px,5vw,86px);align-items:start}
.folge-bilder{position:sticky;top:clamp(92px,12vh,132px);
height:min(74vh,660px);border-radius:var(--rund-gross);overflow:hidden;
background:var(--sand);box-shadow:var(--heben-stark)}
.fb{position:absolute;inset:0;margin:0;opacity:0;overflow:hidden;
transition:opacity .75s var(--zug),transform 1.4s var(--zug)}
.fb img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
transition:transform 1.6s var(--zug)}
.fb.an{opacity:1}
.fb.an img{transform:none}
/* Vier Striche zeigen, an welcher Stelle der Folge man ist. */
.fb-leiste{position:absolute;left:22px;bottom:22px;display:flex;gap:7px;z-index:2}
.fb-leiste i{width:40px;height:2px;border-radius:2px;background:rgba(255,255,255,.4);
  transform:scaleX(.65);transform-origin:left;
  transition:background .4s var(--zug),transform .4s var(--zug)}
.fb-leiste i.an{background:#fff;transform:none}

.folge-texte{display:grid}
.ft{min-height:min(82vh,700px);display:flex;flex-direction:column;
justify-content:center;padding:clamp(30px,4vw,60px) 0;
opacity:.35;transition:opacity .6s var(--zug)}
.ft.an{opacity:1}
.ft .ziffer{font-family:var(--schmal);font-size:14px;font-weight:600;
color:var(--messing);letter-spacing:.06em;margin-bottom:16px;
font-variant-numeric:tabular-nums}
.ft h3{font-size:clamp(26px,3.4vw,46px);line-height:1.04;margin-bottom:14px}
.ft .preis{font-family:var(--schmal);font-size:20px;font-weight:600;
color:var(--tief);margin:0 0 12px}
.ft p{font-family:var(--lese);font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.62;
color:var(--text);max-width:44ch;margin-bottom:22px}
@media(max-width:900px){
.folge-raster{grid-template-columns:1fr;gap:0}
.folge-bilder{height:52vh;top:84px;margin-bottom:26px}
.ft{min-height:0;opacity:1;padding:26px 0}
}

/* ── Band: Bild über die ganze Fläche, Text darauf ───────────────────── */
.band{position:relative;overflow:hidden;isolation:isolate;
padding:clamp(96px,15vw,220px) 0;color:#fffdf9}
.band-bild{position:absolute;inset:-12% 0;z-index:0}
.band-bild img{width:100%;height:100%;object-fit:cover;
transform:translateY(var(--schub,0px));will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(16,20,20,.9) 0%,rgba(16,20,20,.66) 42%,
  rgba(16,20,20,.24) 78%,rgba(16,20,20,.4) 100%)}
.band>.innen{position:relative;z-index:2}
.band .gross{color:rgba(255,253,249,.92);max-width:50ch}
.band .knopfzeile{margin-top:clamp(26px,3vw,40px)}
.band .knopf.klar{border-color:rgba(255,253,249,.55);color:#fffdf9}
.band .knopf.klar:hover{background:rgba(255,253,249,.16);border-color:#fffdf9}

/* ── Zahlen, die sich hochzählen ─────────────────────────────────────── */
.gross-zahlen b{font-size:clamp(48px,6vw,86px);display:inline-block;
font-variant-numeric:tabular-nums}
.gross-zahlen b.mal,.gross-zahlen b.einheit{font-size:.5em;color:var(--messing);
padding:0 .12em;vertical-align:.22em}
.gross-zahlen span{margin-top:14px}

/* Ein Bild über die volle Satzbreite — dort, wo eine Seite Luft braucht. */
.breitbild{margin:0}
.breitbild img{width:100%;height:auto;display:block;border-radius:var(--rund);
  box-shadow:var(--heben);filter:saturate(.9) contrast(1.02)}
.breitbild figcaption{font-family:var(--sans);font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-leise);margin-top:14px;
  display:flex;align-items:center;gap:11px}
.breitbild figcaption::before{content:"";width:20px;height:1px;flex:none;
  background:var(--messing)}

/* ── Blog ────────────────────────────────────────────────────────────── */
/* Ein Beitrag, den Nele schreibt, soll aussehen wie der Rest der Seite. Er
   nutzt deshalb dieselben Bausteine wie der Wissensbereich; eigene Gestaltung
   bekommt er nur dort, wo WordPress eigene Elemente mitbringt. */
.karte-bild{margin:-4px -4px 18px;border-radius:var(--rund) var(--rund) 0 0;
  overflow:hidden;aspect-ratio:3/2;background:var(--sand)}
.karte-bild img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.02)}
.blaettern{margin-top:clamp(34px,4vw,58px);display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center}
.blaettern .page-numbers{font-family:var(--sans);font-size:15px;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 14px;border:1px solid var(--linie-stark);
  border-radius:var(--rund-klein);color:var(--text-ruhig);text-decoration:none}
.blaettern .page-numbers.current{background:var(--tief);color:#fff;
  border-color:var(--tief)}
.blaettern .page-numbers:hover{border-color:var(--tief);color:var(--tief)}
.blaettern .page-numbers.current:hover{color:#fff}
/* Was der WordPress-Editor an Blöcken ausgibt, muss mitspielen. */
.lauftext .wp-block-image{margin:clamp(26px,3vw,44px) 0}
.lauftext .wp-block-image img{width:100%;height:auto;border-radius:var(--rund);
  box-shadow:var(--heben)}
.lauftext figcaption{font-family:var(--sans);font-size:13px;color:var(--text-leise);
  margin-top:10px}
.lauftext .wp-block-quote{border-left:2px solid var(--messing);padding-left:22px;
  margin:clamp(26px,3vw,40px) 0;font-family:var(--lese);font-size:19px;
  line-height:1.6;color:var(--text-ruhig)}
.lauftext ul,.lauftext ol{margin:0 0 1.05em 1.2em}
.lauftext li{margin-bottom:.4em}

/* Der Hinweiskasten des Kundenportals, solange es nicht angebunden ist. */
.portalhinweis{border:1px solid var(--linie-stark);border-radius:var(--rund);
  padding:clamp(26px,3.4vw,44px);background:var(--papier-hell);
  box-shadow:var(--heben)}
.portalhinweis .gross{margin-bottom:16px}
.portalhinweis p{max-width:60ch}

/* ── Bildstrecke zum Ziehen ──────────────────────────────────────────── */
.strecke{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;
scroll-snap-type:x mandatory;padding:4px var(--rand) 22px;
-webkit-overflow-scrolling:touch;cursor:grab;
scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent}
.strecke.zieht{cursor:grabbing;scroll-snap-type:none}
.strecke::-webkit-scrollbar{height:6px}
.strecke::-webkit-scrollbar-thumb{background:var(--linie-stark);border-radius:6px}
.strecke figure{margin:0;flex:0 0 auto;width:min(62vw,520px);scroll-snap-align:start}
.strecke img{width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:var(--rund-gross);box-shadow:var(--heben);
-webkit-user-drag:none;user-select:none}
.strecke figcaption{font-family:var(--sans);font-size:13px;letter-spacing:.12em;
text-transform:uppercase;color:var(--text-leise);padding:13px 3px 0;
display:flex;gap:10px;align-items:baseline}
.strecke figcaption::before{content:"";width:16px;height:1px;flex:none;
background:var(--messing);transform:translateY(-4px)}
.strecke:focus-visible{outline:2px solid var(--tief);outline-offset:4px}

.fragen{border-top:1px solid var(--linie)}
details.frage{border-bottom:1px solid var(--linie)}
details.frage summary{padding:20px 44px 20px 0;cursor:pointer;list-style:none;
  font-family:var(--schmal);font-size:clamp(19px,2vw,23px);font-weight:600;
  position:relative;line-height:1.25}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"";position:absolute;right:8px;top:29px;
  width:11px;height:11px;border-right:2px solid var(--petrol);
  border-bottom:2px solid var(--petrol);transform:rotate(45deg);
  transition:transform .2s}
details.frage[open] summary::after{transform:rotate(-135deg);top:33px}
details.frage summary:hover{color:var(--petrol)}
details.frage p{padding:0 0 22px;margin:0;font-size:16.5px;max-width:68ch;
  color:var(--grau)}
.textblock h3{font-family:var(--schmal);font-size:clamp(21px,2.3vw,28px);
  font-weight:600;color:var(--tinte);margin:34px 0 12px}
.textblock h3:first-child{margin-top:0}
.textblock p{font-size:17px;line-height:1.68}
.dunkel .textblock h3{color:#fff}
.zweispalt-text{column-count:2;column-gap:52px}
@media(max-width:820px){.zweispalt-text{column-count:1}}


/* ── Wissensbereich: Text statt Bild ─────────────────────────────────── */
/* Zu einem Beitrag über den Calciumbedarf gibt es kein ehrliches Foto, und
   eine Zeichnung dazu wäre Dekoration. Also trägt hier die Typografie —
   so, wie es Fachpublikationen halten. */
.wissenraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--linie);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.wissenkarte{background:var(--papier);display:flex;flex-direction:column;
  padding:clamp(26px,2.4vw,38px) clamp(24px,2.2vw,34px) clamp(24px,2.2vw,32px);
  transition:background .3s var(--zug)}
.wissenkarte:hover{background:var(--papier-hell)}
.wissenkarte .kopfzeile{display:flex;justify-content:space-between;
  align-items:baseline;margin-bottom:clamp(24px,2.6vw,42px)}
.wissenkarte .nr{font-family:var(--schmal);font-size:15px;font-weight:600;
  color:var(--messing);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.wissenkarte .dauer{font-family:var(--sans);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-leise);font-weight:500}
.wissenkarte h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2;
  margin-bottom:12px;max-width:22ch}
.wissenkarte:hover h3{color:var(--tief)}
.wissenkarte p{font-family:var(--lese);font-size:16px;line-height:1.6;
  color:var(--text);flex:1;margin-bottom:clamp(20px,2vw,30px);max-width:38ch}
.wissenkarte .fuss{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;border-top:1px solid var(--linie)}
.wissenkarte .mehr{font-size:14.5px;font-weight:600;color:var(--tief);
  display:inline-flex;gap:8px;align-items:center;transition:gap .28s var(--zug)}
.wissenkarte .mehr::after{content:"→"}
.wissenkarte:hover .mehr{gap:13px}
.wissenkarte .belege{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-leise)}

/* ── Titelei einer Textseite ─────────────────────────────────────────── */
.titelei{padding:calc(112px + clamp(30px,5vw,72px)) 0 clamp(24px,3.4vw,52px);
  border-bottom:1px solid var(--linie)}
.titelei h1{max-width:19ch}
.titelei .unter{font-family:var(--lese);font-size:clamp(18px,1.8vw,22px);
  line-height:1.55;color:var(--text-ruhig);max-width:52ch;margin:22px 0 0}
.titelei+section{padding-top:clamp(34px,4.4vw,64px)}

.beitragsteil{padding-top:clamp(26px,3.4vw,48px)}
/* Ein Rückverweis ist ein Tippziel, kein Textstück — 23 px hoch trifft man
   auf dem Handy nicht zuverlässig. */
.rueck{font-size:14.5px;color:var(--tinte-weich);display:inline-flex;gap:8px;
  align-items:center;margin-bottom:12px;min-height:44px;padding:4px 0}
.rueck::before{content:"";width:26px;height:1px;background:var(--linie-stark);
  transform:scaleX(.62);transform-origin:right;
  transition:transform .28s var(--zug),background .28s var(--zug)}
.rueck:hover{color:var(--petrol)}
.rueck:hover::before{transform:none;background:var(--petrol)}
.lesedauer{font-family:var(--sans)!important;font-size:13px!important;
  letter-spacing:.06em;color:var(--tinte-leise);margin:22px 0 0!important;
  padding-top:15px;border-top:1px solid var(--linie);max-width:48ch}
article.beitrag{max-width:none;display:grid;
  grid-template-columns:minmax(0,68ch) minmax(0,1fr);
  column-gap:clamp(30px,5vw,80px);row-gap:0;align-items:start}
article.beitrag>*{grid-column:1}
article.beitrag h2{font-size:clamp(27px,3.2vw,42px);margin:56px 0 16px}
article.beitrag h2:first-of-type{margin-top:0}
article.beitrag p{font-family:var(--lese);font-size:19px;line-height:1.7;
  margin-bottom:1.05em;font-variation-settings:"opsz" 16;color:#33383c;max-width:68ch}
article.beitrag strong{font-weight:600;color:var(--tinte)}
/* Das Verzeichnis wandert bei Platz in die Randspalte und läuft mit. */
@media(min-width:1080px){
  article.beitrag .inhaltsverzeichnis{grid-column:2;grid-row:1 / span 60;
    position:sticky;top:104px;margin:0}
}
.quellenblock{border-top:1px solid var(--linie-stark);padding-top:24px;
  margin-top:60px;font-size:14.5px;color:var(--tinte-weich);max-width:68ch}
.quellenblock h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-leise);margin-bottom:16px;font-weight:500}
.quellenblock ol{padding-left:18px;margin:0;display:grid;gap:9px}
.quellenblock li{font-family:var(--lese);font-size:15px;line-height:1.5;
  font-variation-settings:"opsz" 12}
.quellenblock p{font-family:var(--lese);font-size:15px!important}
.beitragskopf{display:none}
.inhaltsverzeichnis{border-top:1px solid var(--linie-stark);padding:16px 0 0;
  margin:0 0 40px}
.inhaltsverzeichnis h3{font-family:var(--sans);font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-leise);margin-bottom:14px;font-weight:500}
.inhaltsverzeichnis ol{margin:0;padding:0;display:grid;gap:9px;
  counter-reset:tv;list-style:none}
.inhaltsverzeichnis li{counter-increment:tv;display:flex;gap:12px;
  font-size:15.5px;line-height:1.34}
.inhaltsverzeichnis li::before{content:counter(tv,upper-roman);
  font-family:var(--sans);font-size:12px;color:var(--tinte-leise);
  min-width:24px;padding-top:2px;letter-spacing:.06em}
.inhaltsverzeichnis a{color:var(--tinte-weich);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  display:inline-block;padding:6px 0}
.inhaltsverzeichnis a:hover{color:var(--petrol);border-bottom-color:var(--petrol)}
article.beitrag h2{scroll-margin-top:96px}


.portalkopf{background:var(--schiefer);color:#fff;padding:104px 0 0}
.portalkopf .innen{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:0}
.portalkopf h1{color:#fff;font-size:clamp(34px,4.4vw,54px);margin-bottom:6px}
.portalkopf .wer{color:var(--dunst);font-size:15px;margin:0 0 22px}
.portalnav{display:flex;gap:4px;overflow-x:auto;margin-top:14px;width:100%;
  scrollbar-width:none}
.portalnav::-webkit-scrollbar{display:none}
.portalnav a{padding:12px 18px;color:rgba(255,255,255,.72);font-size:15px;
  border-bottom:3px solid transparent;white-space:nowrap}
.portalnav a:hover{color:#fff}
.portalnav a.an{color:#fff;border-bottom-color:var(--dunst);font-weight:500}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.kachel{border:1px solid var(--linie);background:#fff;padding:26px 28px}
.kachel h3{font-size:21px;margin-bottom:12px}
.kachel .zahl{font-family:var(--schmal);font-size:46px;font-weight:600;line-height:1;
  color:var(--petrol)}
.kachel .zeile{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--linie);font-size:15px}
.kachel .zeile:last-child{border-bottom:none}

.terminkarte{border:1px solid var(--linie);background:#fff;padding:22px 26px;
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  margin-bottom:12px}
@media(max-width:700px){.terminkarte{grid-template-columns:1fr;gap:12px}}
.terminkarte .datum{text-align:center;min-width:74px}
.terminkarte .datum b{font-family:var(--schmal);font-size:38px;font-weight:600;
  display:block;line-height:1;color:var(--petrol)}
.terminkarte .datum span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau)}
.terminkarte h4{margin:0 0 3px;font-size:19px;font-family:var(--schmal);font-weight:600}
.terminkarte .zusatz{font-size:14.5px;color:var(--grau)}
.terminkarte.vergangen{opacity:.62}

.leistungswahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2px;background:var(--linie);border:1px solid var(--linie)}
.leistungswahl a{background:#fff;padding:26px 28px;display:block}
.leistungswahl a:hover{background:var(--sand)}
.leistungswahl h3{font-size:20px;margin-bottom:7px}
.leistungswahl p{font-size:14.5px;color:var(--grau);margin-bottom:12px}
.leistungswahl .preis{font-family:var(--schmal);font-size:19px;font-weight:600;
  color:var(--petrol)}

.tagwahl{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:26px;
  scrollbar-width:none}
.tagwahl::-webkit-scrollbar{display:none}
.tag{border:1px solid var(--linie);background:#fff;padding:12px 16px;text-align:center;
  min-width:82px;flex:none}
.tag.an{background:var(--schiefer);border-color:var(--schiefer);color:#fff}
.tag.zu{opacity:.4;cursor:not-allowed}
.tag b{font-family:var(--schmal);font-size:24px;font-weight:600;display:block;
  line-height:1.1}
.tag span{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.tag em{font-size:11.5px;font-style:normal;display:block;margin-top:4px;opacity:.7}

.zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px}
.zeit{border:1.5px solid var(--linie);background:#fff;padding:13px 6px;
  text-align:center;font-family:var(--sans);font-size:18px;font-weight:600;
  cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.zeit:hover{border-color:var(--petrol);color:var(--petrol)}
.zeit input{position:absolute;opacity:0;width:0;height:0}
/* Die gewählte Zeit muss sichtbar sein. :has() erspart JavaScript. */
.zeit:has(input:checked){background:var(--petrol);border-color:var(--petrol);color:#fff}
.zeit:focus-within{outline:2.5px solid var(--petrol);outline-offset:2px}

.feldblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin:26px 0}
.feld label{display:block;font-size:13.5px;font-weight:600;color:var(--grau);
  margin-bottom:6px}
.feld input,.feld select,.feld textarea{width:100%;padding:12px 13px;font-size:16px;
  border:1px solid var(--linie);background:#fff;font-family:var(--sans);
  color:var(--tinte);border-radius:2px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;
  border-color:var(--petrol);box-shadow:0 0 0 3px rgba(37,101,120,.13)}
.spanne{grid-column:1/-1}

.meldung{padding:14px 18px 14px 46px;margin-bottom:24px;position:relative;
  border:1px solid rgba(37,101,120,.28);background:#eef4f6;font-size:15px;
  border-radius:2px}
.meldung::before{content:"";position:absolute;left:18px;top:18px;width:13px;
  height:13px;border:1.5px solid currentColor;border-radius:50%;opacity:.7}
.meldung.fehler{border-color:rgba(176,65,62,.34);background:#fbeceb;color:#8a2f2c}
.meldung.fehler::before{border-radius:0;transform:rotate(45deg);
  border-width:0 1.5px 1.5px 0;height:9px;width:9px;top:20px}
.meldung.gut{border-color:rgba(63,125,90,.34);background:#eef5f1;color:#2f5e43}
.meldung.gut::before{border-radius:0;border-width:0 0 1.5px 1.5px;height:7px;
  width:12px;transform:rotate(-45deg);top:19px}

.anmeldung{max-width:440px;margin:0 auto;background:#fff;border:1px solid var(--linie);
  padding:40px 38px}
.hinweiskasten{border:1px dashed #d8b169;background:#fdf5e6;color:#7a5712;
  padding:14px 18px;font-size:14px;margin-top:26px}
.leer{text-align:center;padding:52px 20px;color:var(--grau);border:1px dashed var(--linie)}