@font-face{font-family:Archivo;src:url(schrift/archivo-var.woff2)
  format('woff2-variations');font-weight:100 900;font-display:swap}
:root{--grund:#FAFAF7;--flaeche:#F1F2ED;--tinte:#1B1F1C;--mut:#5C625D;
  --gruen:#2E5741;--gruen-h:#A5CFB6;--linie:#E2E3DC;
  --rand:clamp(1.15rem,4vw,2.5rem);
  /* Eigene Kurven. Die eingebauten sind zu schwach, und ein Eintritt soll
     schnell aufsetzen und auslaufen, nicht umgekehrt. */
  --aus:cubic-bezier(.23,1,.32,1);--beides:cubic-bezier(.77,0,.175,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--tinte);
  font:400 clamp(1.02rem,.5vw + .92rem,1.14rem)/1.62 Archivo,system-ui,sans-serif;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.wrap{max-width:64rem;margin:0 auto;padding-inline:var(--rand)}
.skip{position:absolute;left:-999px}
.skip:focus{left:.6rem;top:.6rem;z-index:99;background:var(--gruen);
  color:var(--grund);padding:.7rem 1rem;border-radius:3px}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;
  border-radius:2px}
.entwurf{margin:0;background:var(--gruen);color:var(--grund);
  font-size:.8rem;text-align:center;padding:.55rem var(--rand)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:rgba(250,250,247,.94);
  border-bottom:1px solid var(--linie);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* ⚠️ Der Filter liegt auf dem HEADER, das Schubfach ist deshalb SEIN
   Geschwister, nicht sein Kind. Ein backdrop-filter macht das Element sonst
   zum Bezugsrahmen fuer position:fixed-Kinder, und das Fach klappt nur als
   Streifen auf. Genau das ist im Haus schon dreimal passiert. */
.kopf__in{display:flex;align-items:center;gap:1.4rem;
  min-height:4.1rem}
.marke{font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  font-size:.94rem;text-decoration:none;color:var(--tinte);
  padding:.85rem 0;min-height:44px;display:inline-flex;align-items:center}
.nav{display:flex;gap:1.35rem;margin-left:auto;font-size:.9rem}
.nav a{color:var(--mut);text-decoration:none;padding:.9rem 0;min-height:44px;
  display:inline-flex;align-items:center;
  transition:color .2s var(--aus)}
@media (hover:hover){.nav a:hover{color:var(--tinte)}}
.nav a[aria-current]{color:var(--tinte);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;background:var(--gruen);color:var(--grund);text-decoration:none;
  font-weight:600;font-size:.94rem;padding:.85rem 1.35rem;border-radius:3px;
  min-height:44px;border:0;cursor:pointer;
  transition:transform .16s var(--aus),background .2s var(--aus)}
@media (hover:hover){.btn:hover{background:#24462F}}
.btn:active{transform:scale(.97)}
.btn--klein{font-size:.86rem;padding:.7rem 1.05rem}
.btn--hell{background:var(--grund);color:var(--gruen)}
@media (hover:hover){.btn--hell:hover{background:#fff}}
.burger{display:none;background:0;border:0;padding:.85rem .4rem;
  min-height:44px;min-width:44px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--tinte);
  margin:4px 0;transition:transform .28s var(--beides),opacity .2s}
html[data-fach] .burger span:first-child{transform:translateY(6px) rotate(45deg)}
html[data-fach] .burger span:last-child{transform:translateY(-6px) rotate(-45deg)}
.fach{position:fixed;inset:4.1rem 0 auto 0;height:calc(100svh - 4.1rem);
  background:var(--grund);z-index:39;display:flex;flex-direction:column;
  gap:.3rem;padding:1.6rem var(--rand);transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s var(--beides),visibility 0s linear .3s}
html[data-fach] .fach{transform:none;visibility:visible;transition-delay:0s}
.fach a{font-size:1.28rem;color:var(--tinte);text-decoration:none;
  padding:.85rem 0;min-height:44px;display:flex;align-items:center;
  border-bottom:1px solid var(--linie)}
.fach .btn{margin-top:1.2rem;border-bottom:0}
@media (max-width:56rem){
  .nav,.kopf .btn--klein{display:none}
  .burger{display:block;margin-left:auto}
}
@media (min-width:56.0625rem){.fach{display:none}}
html[data-fach]{overflow:hidden}

/* Abschnitte */
section{padding-block:clamp(3.2rem,6vw,5.6rem)}
.flaeche{background:var(--flaeche)}
.ey{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gruen);font-weight:600;margin:0 0 .7rem}
h1{font-size:clamp(2.1rem,5.6vw,3.5rem);line-height:1.06;margin:0 0 1.1rem;
  letter-spacing:-.022em;font-weight:600;text-wrap:balance}
h2{font-size:clamp(1.55rem,3.6vw,2.35rem);line-height:1.14;margin:0 0 .9rem;
  letter-spacing:-.016em;font-weight:600;text-wrap:balance}
h3{font-size:clamp(1.1rem,2vw,1.28rem);line-height:1.28;margin:0 0 .45rem;
  font-weight:600}
p{margin:0 0 1rem;max-width:38rem}
.vor{font-size:clamp(1.08rem,1.6vw,1.24rem);color:var(--mut);
  line-height:1.55;max-width:36rem}
.klein{font-size:.86rem;color:var(--mut);line-height:1.5}
.mitte{text-align:center}
.mitte p,.mitte .vor{margin-inline:auto}

/* Hero */
.hero{padding-block:clamp(3.4rem,7vw,6.4rem) clamp(2.6rem,5vw,4.4rem)}
/* Zweispaltiger Hero: Text links, Bild rechts. Erst ab 62rem, darunter
   steht das Bild unter dem Text und wird nicht zur Briefmarke. */
.split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:62rem){
  .split{grid-template-columns:1.05fr .95fr}
  .split .bild{aspect-ratio:4/5;height:100%}
  .split .bild img{height:100%;object-fit:cover}
}
/* 🔴 KEIN BILD OHNE TEXT. Vorher standen zwei Bilder nebeneinander in einer
   eigenen Reihe, ohne dass etwas danebenstand. Das liest sich als Deko und
   traegt nichts. Jetzt gehoert zu jedem Bild ein Textblock, und die Seite
   wechselt die Seite: Bild links, Bild rechts, Bild links.
   Bilder sind dabei deutlich KLEINER geworden (max 26rem statt volle
   Spaltenbreite), damit der Text die Hauptsache bleibt. */
.zeile{display:grid;gap:clamp(1.4rem,3.5vw,2.8rem);align-items:center;
  margin-block:clamp(2.4rem,5vw,4rem)}
@media (min-width:52rem){
  .zeile{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .zeile--links{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .zeile--links .zeile__bild{order:-1}
}
.zeile__bild{margin:0;max-width:26rem;width:100%;border-radius:4px;
  overflow:hidden;background:var(--flaeche);aspect-ratio:4/3}
.zeile__bild img{display:block;width:100%;height:100%;object-fit:cover}
.zeile h3{font-size:clamp(1.2rem,2.4vw,1.55rem);margin-bottom:.5rem}
.zeile p{color:var(--mut);margin:0}

/* ── Timeline, ans Scrollen gebunden ──────────────────────────────────────
   Die Linie waechst mit dem Scrollfortschritt, die Stationen kommen
   nacheinander. EIN Fortschrittswert fuer alles, kein Wert je Station:
   mit mehreren Beobachtern laufen sie frueher oder spaeter auseinander.
   ⚠️ RUHEZUSTAND IST DER ENDZUSTAND. `--fort` steht auf 1, ohne Skript und
   bei reduzierter Bewegung ist die Linie voll und alle Stationen sind da. */
.zeit{--fort:1;position:relative;list-style:none;margin:2.4rem 0 0;
  padding:0 0 0 2.6rem}
.zeit::before{content:"";position:absolute;left:.44rem;top:.55rem;bottom:.55rem;
  width:2px;background:var(--linie)}
.zeit::after{content:"";position:absolute;left:.44rem;top:.55rem;
  width:2px;height:calc((100% - 1.1rem) * var(--fort));
  background:var(--gruen);transform-origin:top}
.zeit li{position:relative;padding:0 0 1.9rem}
.zeit li:last-child{padding-bottom:0}
.zeit li::before{content:"";position:absolute;left:-2.6rem;top:.42rem;
  width:1.05rem;height:1.05rem;border-radius:50%;background:var(--grund);
  border:2px solid var(--linie);box-sizing:border-box}
.zeit li[data-an]::before{border-color:var(--gruen)}
.zeit li[data-reset]::before{background:var(--gruen);border-color:var(--gruen)}
.zeit .uhr{font-size:.82rem;font-weight:700;color:var(--gruen);
  letter-spacing:.04em;display:block;margin-bottom:.15rem}
.zeit h3{font-size:1.06rem;margin:0 0 .3rem}
.zeit p{margin:0;color:var(--mut);font-size:.97rem;max-width:34rem}
/* Stationen ohne RESET-Punkt treten zurueck: der Tag ist der Rahmen,
   die sechs Punkte sind die Sache. */
.zeit li:not([data-reset]) h3{font-weight:500;color:var(--mut)}
.zeit li:not([data-reset]) .uhr{color:var(--mut)}
/* ⚠️ 0,45 statt 0,25. Im Bildschirmfoto war der noch kommende Teil des
   Tages praktisch unlesbar: grauer Text bei einem Viertel Deckkraft ergibt
   auf hellem Grund unter 2:1. Bei 0,45 bleibt der Unterschied zwischen
   „schon dran" und „kommt noch" deutlich, und man kann trotzdem lesen,
   was einen erwartet. Der Effekt darf keinen Inhalt verstecken. */
html[data-auf-an] .zeit li{opacity:.45;transform:translateY(6px);
  transition:opacity .5s var(--aus),transform .5s var(--aus)}
html[data-auf-an] .zeit li[data-an]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html[data-auf-an] .zeit li{opacity:1;transform:none}
  .zeit{--fort:1}
}
.hero h1{max-width:19ch}
.hero .vor{max-width:34rem}
.tut{list-style:none;margin:1.6rem 0 2rem;padding:0;display:flex;
  flex-wrap:wrap;gap:.5rem .9rem}
.tut li{font-size:.92rem;color:var(--mut);display:flex;align-items:center;
  gap:.45rem}
.tut li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gruen);flex:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Angebotskarte auf der Startseite */
.angebot{background:var(--gruen);color:var(--grund);border-radius:5px;
  padding:clamp(1.6rem,3.5vw,2.6rem);margin-top:2.4rem}
.angebot .ey{color:var(--gruen-h)}
.angebot h2{color:var(--grund);margin-bottom:.7rem}
.angebot p{color:#DDE6DF;max-width:34rem}
.angebot .btn{margin-top:.9rem}
.plaetze{display:flex;gap:.4rem;margin:0 0 1.2rem;padding:0;list-style:none}
.plaetze li{width:2.1rem;height:.35rem;border-radius:2px;
  background:var(--gruen-h);opacity:.9}

/* Raster */
.g2,.g3{display:grid;gap:clamp(1.2rem,2.6vw,2rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.karte{background:var(--grund);border:1px solid var(--linie);border-radius:4px;
  padding:clamp(1.15rem,2.4vw,1.6rem)}
.flaeche .karte{background:#fff}
.karte p{margin:0;color:var(--mut);font-size:.96rem}
.karte .nr{font-size:.78rem;font-weight:700;color:var(--gruen);
  letter-spacing:.1em;display:block;margin-bottom:.5rem}

/* Tagesablauf */
.tag{display:grid;gap:0;margin:2rem 0 0;padding:0;list-style:none}
.tag li{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;
  padding:1.35rem 0;border-top:1px solid var(--linie);align-items:baseline}
.tag li:last-child{border-bottom:1px solid var(--linie)}
.tag .wann{font-weight:600;font-size:1.02rem;white-space:nowrap}
.tag .dauer{grid-column:1;font-size:.82rem;color:var(--gruen);
  font-weight:600}
.tag p{grid-column:2;margin:0;color:var(--mut);font-size:.98rem}
@media (max-width:34rem){
  .tag li{grid-template-columns:1fr}
  .tag .dauer,.tag p{grid-column:1}
}

/* Zitat */
.zitat{border-left:3px solid var(--gruen);padding:.2rem 0 .2rem 1.35rem;
  margin:2rem 0;max-width:34rem}
.zitat p{font-size:clamp(1.18rem,2.3vw,1.5rem);line-height:1.38;
  margin:0;font-weight:500;letter-spacing:-.012em}
.zitat cite{display:block;margin-top:.7rem;font-style:normal;
  font-size:.88rem;color:var(--mut)}

/* Bilder */
.bild{margin:0;border-radius:4px;overflow:hidden;background:var(--flaeche)}
.bild img{display:block;width:100%;height:auto}
.bild--breit{margin-block:clamp(2rem,4vw,3.2rem)}

/* Formular */
.feld{display:block;margin-bottom:1.1rem}
.feld span{display:block;font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1rem;
  padding:.75rem .85rem;border:1px solid var(--linie);border-radius:3px;
  background:var(--grund);color:var(--tinte);min-height:44px;
  transition:border-color .18s var(--aus)}
.feld textarea{min-height:6.5rem;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--gruen);outline:0;
  box-shadow:0 0 0 3px rgba(46,87,65,.13)}
.pflicht{color:var(--gruen)}
.hp{position:absolute;left:-9999px}

/* Band und Fuss */
.band{background:var(--gruen);color:var(--grund);text-align:center}
.band .ey{color:var(--gruen-h)}
.band h2{color:var(--grund);max-width:22ch;margin-inline:auto}
.band .vor{color:#DDE6DF;margin-bottom:1.5rem}
.fuss{border-top:1px solid var(--linie);
  padding:clamp(2.4rem,4vw,3.4rem) 0 2.2rem}
.fuss__in{display:flex;flex-wrap:wrap;gap:1.8rem;
  justify-content:space-between}
.marke--fuss{margin:0 0 .35rem}
.fuss__nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;align-items:center}
.fuss__nav a{color:var(--mut);text-decoration:none;font-size:.9rem;
  padding:.72rem 0;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover){.fuss__nav a:hover{color:var(--tinte)}}

/* ── Scroll-Effekte ──────────────────────────────────────────────────────
   ⚠️ RUHEZUSTAND IST SICHTBAR: ohne Skript und bei reduzierter Bewegung
   steht alles da. `data-auf` allein tut nichts, erst `data-auf-an` auf
   <html> schaltet ein, und das setzt bewegung.js erst, wenn es wirklich
   animieren kann. Genau andersherum waere der Fehler, der eine Seite
   dauerhaft leer stehen laesst.
   ⚠️ KONKRETE EIGENSCHAFTEN, nie `transition:all`. Eine Sammelangabe
   animiert auch geerbte Werte wie `visibility` und haelt den alten Zustand
   bis zum Schluss. */
html[data-auf-an] [data-auf]{opacity:0;transform:translateY(14px)}
html[data-auf-an] [data-auf][data-da]{opacity:1;transform:none;
  transition:opacity .6s var(--aus),transform .6s var(--aus)}

/* Karten in einem Raster treten NACHEINANDER ein, nicht als Block.
   70 ms Versatz: gleichzeitig sieht es nach Layout aus, nacheinander nach
   einer Geste. Mehr als sechs bekommen keinen weiteren Versatz, sonst
   wartet man am Ende zu lange. */
html[data-auf-an] .g2[data-auf] > *,
html[data-auf-an] .g3[data-auf] > *,
html[data-auf-an] .paar[data-auf] > *{opacity:0;transform:translateY(14px)}
html[data-auf-an] [data-auf][data-da] > *{opacity:1;transform:none;
  transition:opacity .6s var(--aus),transform .6s var(--aus)}
html[data-auf-an] [data-auf][data-da] > :nth-child(2){transition-delay:.07s}
html[data-auf-an] [data-auf][data-da] > :nth-child(3){transition-delay:.14s}
html[data-auf-an] [data-auf][data-da] > :nth-child(4){transition-delay:.21s}
html[data-auf-an] [data-auf][data-da] > :nth-child(5){transition-delay:.28s}
html[data-auf-an] [data-auf][data-da] > :nth-child(n+6){transition-delay:.35s}

/* Bilder legen sich frei, statt einfach aufzutauchen: die Maske zieht von
   unten auf, das Bild kommt aus 1,05 zurueck. Nichts erscheint aus dem
   Nichts, und die Bewegung laeuft in dieselbe Richtung wie das Scrollen. */
html[data-auf-an] .bild[data-auf] img{clip-path:inset(14% 0 0 0);
  transform:scale(1.05)}
html[data-auf-an] .bild[data-auf][data-da] img{clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path .85s var(--aus),transform .95s var(--aus)}

/* Die Trennlinie einer Sektion zeichnet sich von links. */
.zug{display:block;height:1px;background:var(--gruen);width:100%;
  transform-origin:left;margin:0 0 1.6rem}
html[data-auf-an] .zug[data-auf]{transform:scaleX(0);opacity:1}
html[data-auf-an] .zug[data-auf][data-da]{transform:scaleX(1);
  transition:transform .9s var(--aus)}

@media (prefers-reduced-motion:reduce){
  html[data-auf-an] [data-auf],
  html[data-auf-an] [data-auf] > *{opacity:1;transform:none}
  html[data-auf-an] .bild[data-auf] img{clip-path:none;transform:none}
  html[data-auf-an] .zug[data-auf]{transform:none}
}

/* Rechtstexte */
.recht h2{font-size:clamp(1.2rem,2.2vw,1.4rem);margin-top:2.2rem}
.recht p,.recht li{max-width:40rem}
.recht ul{padding-left:1.2rem}