/* ================= PATRICKS WELT — section styles ================= */
.eyebrow {
  display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--sage-deep); margin-bottom: 1.2rem;
}
.eyebrow--light { color: var(--sage-soft); }
.section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 0.98; color: var(--slate-deep);
}
.section-title em { font-family: var(--serif); font-style: italic; color: var(--sage-deep); }

/* ================= 2 · FILM (fixed frame-sequence overlay) ================= */
/* 6 clips x 400vh: each copy beat holds for well over a full screen of scrolling,
   so it survives several swipes instead of vanishing after one flick */
.journey { position: relative; height: 2400vh; background: var(--ink); }

/* Die Ebene, die .journey rendert. Der Ink-Boden ist Pflicht: das Mittelband von
   .film__grade ist zu 90 % durchsichtig, also sah man vorher die Seite darunter
   arbeiten — erst den ausblendenden Hero-Hintergrund, dann den cremefarbenen
   Hero, der nach dem Pin unter der fixen Ebene nach oben wegscrollte. Das war
   die harte Hell-Dunkel-Kante, die durchs Bild wanderte. Deckender Boden, gleiche
   Farbe wie .journey, und die Kante ist weg. */
.film {
  position: fixed; inset: 0; z-index: 40;
  opacity: 0; pointer-events: none; overflow: hidden;
  background: var(--ink);
}
/* the clips are stacked; each one fades in over the one below, so a dissolve
   never dips to black the way two half-opacity layers would */
.film__stack { position: absolute; inset: 0; }
.film__v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; will-change: opacity;
}
.film__grade {
  position: absolute; inset: 0; pointer-events: none;
  /* side scrims: the copy lives on the flanks now, so that's where it needs contrast */
  /* darker on the flanks where the copy sits (was 0.72) so the title clears contrast
     over the footage; the centre stays clean so the video still reads */
  background:
    linear-gradient(90deg, rgba(16,24,21,0.86), rgba(16,24,21,0.10) 44%, rgba(16,24,21,0.10) 56%, rgba(16,24,21,0.86)),
    linear-gradient(180deg, rgba(20,30,26,0.45), transparent 26%, transparent 74%, rgba(20,30,26,0.48));
}
/* copy sits on one half so the footage always reads on the other */
.film__panels { position: absolute; inset: 0; pointer-events: none; }
/* width must track the viewport, not `ch` — ch resolves against this element's own
   ~17px font, which would leave the 100px headline overflowing the column */
.fpanel {
  position: absolute; top: 50%; width: min(44vw, 620px);
  color: var(--cream); opacity: 0; will-change: transform, opacity;
}
.fpanel--l { left: 6vw; }
.fpanel--r { right: 6vw; text-align: right; }
.fpanel__no {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em;
  color: var(--sage-soft); margin-bottom: 1.2rem;
}
.fpanel__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 6.1vw, 6.6rem); line-height: 0.94;
  /* a tight halo for legibility plus the soft one for depth */
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 14px 70px rgba(0,0,0,0.55);
  hyphens: auto; overflow-wrap: break-word;
}
.fpanel__title em { font-family: var(--serif); font-style: italic; color: var(--sage-soft); }
.fpanel__text {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.6;
  color: var(--cream); text-shadow: 0 1px 10px rgba(0,0,0,0.85), 0 6px 30px rgba(0,0,0,0.6);
}
.fpanel--r .fpanel__text { margin-left: auto; }

/* ================= 3 · 3D WORLD ================= */
/* long enough for: converge → bowl dive + act 01 → kettlebell dive + act 02 */
.world { position: relative; height: 760vh; background: linear-gradient(180deg, var(--cream), var(--cream-warm)); }
/* the stage is PINNED by ScrollTrigger (CSS sticky does not work under ScrollSmoother) */
.world__stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: pan-y; }
/* Die Textspalte ist zugleich die Messlatte fuer das 3D: scene.js liest ihre
   Layoutbreite aus und stellt die Objekte rechts daneben. Deshalb darf hier keine
   ch-Breite stehen. 28ch rechnete mit der geerbten 16-px-Schrift (257px), waehrend
   die Ueberschrift darin 86px gross ist: „Ernaehrung." lief 192px aus dem Kasten
   heraus, mitten auf die Obstschale. Eine Breite in derselben Groessenordnung wie
   die Schrift haelt jedes Wort drin, auf jeder Breite. */
.world__intro {
  position: absolute; top: 20vh; left: 6vw; width: min(36vw, 470px); z-index: 2;
}
.world__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.95; color: var(--slate-deep);
}
.world__title .amp { color: var(--sage); font-family: var(--serif); font-style: italic; }
.world__title em { font-family: var(--serif); font-style: italic; color: var(--sage-deep); }
.world__lead { margin-top: 1.5rem; max-width: 34ch; line-height: 1.7; color: var(--slate); font-size: 0.95rem; }
/* Die beiden Marken standen frei in der Buehne (right: 8vw / top: 30vh) und damit
   genau dort, wo die Kettlebell durchfaehrt. Jetzt laufen sie unter der Einleitung
   mit: eine Spalte, die nie mit einem Objekt kollidieren kann. */
.world__labels { margin-top: 2.4rem; display: grid; gap: 1rem; pointer-events: none; }
.world__label {
  font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.5; color: var(--slate);
}
.world__label span { display: inline-block; font-family: var(--display); font-size: 1.4rem; color: var(--sage-deep); }
.world__label em { font-style: normal; color: var(--slate-soft); }
.world__hint {
  position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-deep);
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(107,178,155,0.4);
}

/* act panels — handed the frame by an object that just dove out of view.
   Position/opacity are driven by scroll in main.js, so no transitions here. */
.act {
  position: absolute; top: 50%; z-index: 3; width: min(36vw, 40ch);
  opacity: 0; will-change: transform, opacity;
}
.act--left  { left: 7vw; }
.act--right { right: 7vw; text-align: right; }
.act__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 0.98; color: var(--slate-deep);
  margin: 0.4rem 0 1.2rem;
}
.act__title em { font-family: var(--serif); font-style: italic; color: var(--sage-deep); }
.act__lead { color: var(--slate); font-size: var(--fs-body); line-height: var(--lh-body); }
.act__list { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.act__list li {
  font-size: 0.86rem; letter-spacing: 0.01em; color: var(--slate);
  padding-left: 1.1rem; position: relative;
}
.act--right .act__list li { padding-left: 0; padding-right: 1.1rem; }
.act__list li::before {
  content: ''; position: absolute; top: 0.55em; left: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.act--right .act__list li::before { left: auto; right: 0; }

/* ================= 4 · MANIFEST ================= */
/* dark tonal beat between the light sections */
.manifest {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16vh 8vw; background: var(--slate-deep); position: relative; overflow: hidden;
}
.manifest__text {
  max-width: 20ch; text-align: center; position: relative; z-index: 1;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.08; color: var(--cream);
}
.manifest__text .w { display: inline-block; }
.manifest__text em { font-family: var(--serif); font-style: italic; color: var(--sage-soft); }

/* ambient drifting blobs (soft always-on life behind light sections) */
/* ================= 5 · ANGEBOTE (glass cards) ================= */
.angebote { padding: 16vh 6vw; background: linear-gradient(180deg, var(--cream-warm), var(--cream)); }
.angebote__head { max-width: 46ch; margin-bottom: 8vh; }
.angebote__sub { margin-top: 1.4rem; color: var(--slate); line-height: 1.7; }
.angebote__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; }
.offer {
  position: relative; overflow: hidden; border-radius: 20px;
  min-height: 42vh; padding: 2.4rem; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--slate-deep);
  /* Ohne dies haengt das z-index:-1 des ::before daran, dass .glass per
     backdrop-filter zufaellig einen Stacking-Context aufmacht. Faellt die Klasse
     im Markup weg, rutschen alle vier Kartenbilder hinter den Sektionshintergrund. */
  isolation: isolate;
}
.offer::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* NOTE: --img is set inline in index.html as url('../img/…'), and that path is
     relative to THIS stylesheet, not to the document — a relative url() inside a
     custom property resolves against the sheet that consumes it. Plain 'img/…'
     therefore resolved to /css/img/… and 404'd, and a leading-slash '/img/…'
     broke as soon as the site was served from a subpath instead of the root. */
  background-image: var(--img); background-size: cover; background-position: center;
  opacity: 0.24; transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transform: scale(1.05);
}
/* Scrim unter der Textzone. Das Foto lief vorher ungefiltert bis unter die Schrift,
   gemessen 3,07 bis 4,11:1 fuer .offer__desc im Hover und 2,14 bis 2,86:1 fuer die
   Tag-Pille, beides unter dem 4,5:1-Minimum. Seit die Karten zusaetzlich den Preis
   tragen, steht dort echte Kaufinformation, die lesbar sein muss.
   Zweites Pseudo-Element statt Gradient im ::before, weil dieses auf opacity 0.24
   steht und den Scrim mitverblassen wuerde. ::after malt bei gleichem z-index ueber
   ::before, aber weiterhin unter dem Text. */
.offer::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 241, 231, 0) 30%, rgba(245, 241, 231, 0.80) 92%);
}
/* Hover von 0.42 gedeckelt: dort waren die Werte am schlechtesten. */
.offer:hover::before { opacity: 0.32; transform: scale(1.12); }
.offer__no { font-family: var(--display); font-size: 1.1rem; color: var(--sage-deep); }
.offer__title {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1; margin: 0.6rem 0 0.9rem;
  /* 3vw only clears the 1.6rem floor at 853px, so every phone renders these at a
     fixed 25.6px. "Ernährungsumstellung" then measures 310px inside a 264px box at
     390px wide and .offer's overflow:hidden silently cut it to "Ernährungsumstellun"
     — two of the four service names, on the majority device. lang="de" is set, so
     hyphens:auto breaks the compounds properly instead of clipping them. */
  overflow-wrap: break-word; hyphens: auto;
}
.offer__desc { font-size: 0.9rem; line-height: 1.65; color: var(--slate); max-width: 40ch; }
/* Preis steht bewusst offen auf der Karte: fast alle lokalen Wettbewerber
   verschweigen ihn, und ein sichtbarer Preis ist gleichzeitig ein Vertrauens-
   und ein Ranking-Signal. */
.offer__price {
  margin-top: 1.1rem; font-size: 0.82rem; font-weight: 600; line-height: 1.55;
  color: var(--slate-deep);
}
.offer__price + .offer__tag { margin-top: 0.9rem; }
.offer__tag {
  align-self: flex-start; margin-top: 1.4rem;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--sage-deep); padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(107,178,155,0.16); border: 1px solid rgba(107,178,155,0.3);
}

/* Vereine & Firmen — bewusst zweite Reihe. Kontur statt Bildfläche, kleinere Type,
   damit die vier Hauptangebote oben die Aufmerksamkeit behalten. Ohne Bilder legt
   dieser Block ausserdem keine weiteren Bytes auf den kritischen Ladepfad. */
.angebote__b2b { margin-top: 8vh; }
.b2b__title {
  font-family: var(--display); font-weight: 400; color: var(--slate-deep);
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1;
}
.b2b__sub {
  margin-top: 0.7rem; max-width: 54ch;
  font-size: 0.9rem; line-height: 1.7; color: var(--slate);
}
.b2b__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; margin-top: 2.6rem; }
.b2b-card {
  display: flex; flex-direction: column; padding: 1.9rem;
  border: 1px solid rgba(63, 80, 100, 0.16); border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  transition: border-color .35s ease, background .35s ease;
}
.b2b-card:hover { border-color: rgba(107, 178, 155, 0.55); background: rgba(255, 255, 255, 0.72); }
.b2b-card__title {
  font-family: var(--display); font-weight: 400; font-size: 1.28rem; line-height: 1.15;
  color: var(--slate-deep); overflow-wrap: break-word; hyphens: auto;
}
.b2b-card__desc { margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.65; color: var(--slate); }
.b2b-card__price {
  margin-top: auto; padding-top: 1.1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--sage-deep);
}

/* ================= SOFORT-CHECK (Lead-Funnel) =================
   Nutzt durchgehend die vorhandenen Tokens, damit sich das Fenster nicht wie ein
   Fremdkoerper anfuehlt. */
.chk { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 4vh 5vw; }
/* OHNE DIESE ZEILE IST DIE GANZE SEITE TOT.
   display:grid ist eine Autoren-Regel und schlaegt damit die Browser-Regel
   [hidden]{display:none}. Das hidden-Attribut im Markup blieb also wirkungslos:
   ueber der Seite lag ab dem ersten Bild ein 1440x900 grosser Kasten auf z-index
   300 mit pointer-events:auto. Unsichtbar, weil Scrim und Box auf opacity:0
   stehen, aber er hat jeden Klick geschluckt - Navigation, Buttons, alles.
   Gemessen mit elementFromPoint in der Bildmitte: dort lag P.chk__disc statt des
   Seiteninhalts. */
.chk[hidden] { display: none; }
/* OHNE DIESE ZEILEN VERSCHWINDET DER MAUSZEIGER UEBER DEM FORMULAR.
   body traegt cursor:none, weil die Seite einen eigenen Punkt zeichnet. Dieser
   Punkt (.cursor) liegt auf z-index 95, der Dialog hier auf 300. Ueber dem
   offenen Dialog ist der echte Zeiger also ausgeblendet und der Ersatz hinter
   dem Dialog gemalt: es ist gar nichts mehr zu sehen. Gemessen am 06.08.2026.
   Statt den Punkt hochzuziehen bekommt der Dialog den echten Zeiger zurueck.
   Das ist hier auch das Richtige: in einem Formular will man den Textcursor im
   Feld sehen und die Hand ueber den Knoepfen, nicht einen Deko-Punkt.
   .chk deckt den ganzen Bildschirm ab, also gilt das, solange er offen ist. */
.chk, .chk * { cursor: auto; }
.chk a, .chk button, .chk label, .chk input[type="checkbox"] { cursor: pointer; }
.chk input[type="email"], .chk input[type="text"],
.chk input[type="number"], .chk input[type="tel"] { cursor: text; }
.chk button[disabled] { cursor: not-allowed; }
.chk__scrim {
  position: absolute; inset: 0; background: rgba(31, 44, 39, 0.55);
  opacity: 0; transition: opacity .26s ease;
}
.chk.is-open .chk__scrim { opacity: 1; }
.chk__box {
  position: relative; width: min(100%, 560px); max-height: 92vh; overflow-y: auto;
  background: var(--cream); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
.chk.is-open .chk__box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .chk__scrim, .chk__box { transition: none; }
}
.chk__x {
  position: absolute; top: .6rem; right: .6rem;
  width: 44px; height: 44px; border: 0; background: none;   /* 44px Daumenziel */
  font-size: 1.6rem; line-height: 1; color: var(--slate); cursor: pointer; border-radius: 50%;
}
.chk__x:hover { background: rgba(63, 80, 100, .08); }

.chk__eyebrow {
  font-size: 0.66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep);
}
.chk__title {
  font-family: var(--display); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.5rem, 4.2vw, 2.2rem); color: var(--slate-deep); margin: .5rem 0 .2rem;
}
.chk__lead { color: var(--slate); line-height: 1.65; font-size: .95rem; }

/* ---- Fortschritt ----
   Rechts bleibt Platz fuer das Schliessen-Kreuz, sonst liefe der Balken darunter
   durch und das Kreuz saesse auf der Linie. */
.chk__prog { margin: 0 0 1.4rem; padding-right: 2.8rem; }
.chk__prog[hidden] { display: none; }
.chk__prog-rail {
  height: 4px; border-radius: 999px; background: rgba(63, 80, 100, .14); overflow: hidden;
}
.chk__prog-fill {
  height: 100%; width: 16.6667%; border-radius: 999px; background: var(--sage);
  transition: width .38s cubic-bezier(.22, 1, .36, 1);
}
.chk__prog-t {
  margin: .55rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-soft);
}

/* ---- Ein Schritt pro Bild ----
   Die eigene [hidden]-Regel muss stehen bleiben: sobald .chk__step irgendein
   display bekaeme, schlaegt die Autoren-Regel die Browser-Regel
   [hidden]{display:none} und alle sechs Schritte staenden uebereinander. */
.chk__step { animation: chkStepIn .34s cubic-bezier(.22, 1, .36, 1) both; }
.chk__step[hidden] { display: none; }
@keyframes chkStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chk__step { animation: none; }
  .chk__prog-fill { transition: none; }
}

/* ---- Grosse Auswahlflaechen ---- */
.chk__opts { display: grid; gap: .7rem; margin-top: 1.3rem; }
.chk__opts--pair { grid-template-columns: 1fr 1fr; margin-top: .7rem; }
.chk__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  min-height: 60px; padding: .95rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid rgba(63, 80, 100, .18); background: rgba(255, 255, 255, .5);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.chk__opt:hover { border-color: var(--sage-deep); background: #fff; transform: translateY(-2px); }
.chk__opt:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
/* Der zuletzt gewaehlte Wert bleibt sichtbar markiert. Sonst weiss nach dem
   Zurueck-Knopf niemand mehr, was vorher dranstand. */
.chk__opt[aria-pressed="true"] {
  border-color: var(--sage-deep); background: rgba(107, 178, 155, .16);
  box-shadow: inset 0 0 0 1px var(--sage-deep);
}
.chk__opt--sm { min-height: 52px; text-align: center; padding: .85rem .8rem; }
.chk__opt-t { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--slate-deep); }
.chk__opt-s { display: block; margin-top: .25rem; font-size: .84rem; line-height: 1.45; color: var(--slate); }

/* ---- Felder ---- */
/* Der Honigtopf, ergaenzt am 20.08.2026. Gleiche Technik wie .kf__hp in
   seite.css (kontakt.html): NICHT display:none, manche Bots erkennen das und
   lassen das Feld dann bewusst leer. Aus dem Bild geschoben wirkt
   zuverlaessiger, fuer Vorleseprogramme ist es ueber aria-hidden ohnehin weg. */
.chk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chk__f { display: grid; gap: .4rem; margin-top: 1.3rem; }
.chk__f > span { font-size: .78rem; font-weight: 600; color: var(--slate); letter-spacing: .02em; }
.chk__f input, .chk__f select {
  font-family: var(--sans); font-size: 1rem; color: var(--slate-deep);
  padding: .8rem .9rem; min-height: 52px;      /* >=44px, und bei 16px zoomt iOS nicht */
  border: 1px solid rgba(63, 80, 100, .22); border-radius: var(--r-sm);
  background: #fff; width: 100%;
}
.chk__f input:focus-visible, .chk__f select:focus-visible {
  outline: 3px solid var(--sage-deep); outline-offset: 2px;
}
.chk__f-lb { margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--slate); }

/* ---- Einwilligung ----
   Kasten und Text stehen zusammen in einem <label>, damit auch der Text den Haken
   setzt. 24px Kasten plus Zeilen ergibt eine Trefferflaeche weit ueber 44px. */
.chk__ok {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start;
  margin-top: 1rem; padding: .85rem .95rem; border-radius: var(--r-md);
  border: 1px solid rgba(63, 80, 100, .16); background: rgba(255, 255, 255, .5);
  cursor: pointer; min-height: 44px;
}
.chk__ok:hover { border-color: var(--sage-deep); }
.chk__ok input {
  width: 24px; height: 24px; margin: 0; accent-color: var(--sage-deep); cursor: pointer;
}
.chk__ok input:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.chk__ok span { font-size: .8rem; line-height: 1.55; color: var(--slate); }
.chk__fine { margin: .8rem 0 0; font-size: .76rem; line-height: 1.55; color: var(--slate-soft); }
/* Der Link auf die Datenschutzerklaerung gehoert in den Satz, nicht daneben.
   Als reine Textzeile waere er 13px hoch und damit kein Daumenziel. Deshalb
   inline-block mit Polsterung auf 44px, per negativem Rand wieder aus dem
   Zeilenfluss genommen, damit die Zeilenabstaende gleich bleiben. */
.chk__fine a {
  display: inline-block; color: var(--sage-deep); text-decoration: underline;
  padding: .8rem 0; margin: -.8rem 0;
}
.chk__fine a:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }

.chk__err {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: rgba(190, 60, 60, .1); color: #8f2d2d; font-size: .85rem; line-height: 1.5;
}
.chk__err[hidden] { display: none; }

/* ---- Knopfzeile ---- */
.chk__nav {
  display: flex; align-items: center; justify-content: flex-start; gap: .8rem;
  margin-top: 1.3rem; flex-wrap: wrap;
}
.chk__go {
  min-height: 52px; padding: 0 1.9rem; border: 0; cursor: pointer;
  background: var(--slate-deep); color: var(--cream); border-radius: 999px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s ease, opacity .3s ease;
  margin-left: auto;
}
.chk__go:hover { background: var(--sage-deep); }
.chk__go:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; }
/* Ohne den Pflichthaken bleibt der Knopf tot. Sichtbar tot, nicht heimlich tot. */
.chk__go[disabled] { opacity: .42; cursor: not-allowed; background: var(--slate-deep); }
.chk__back {
  min-height: 52px; padding: 0 1.2rem; border: 0; cursor: pointer;
  background: none; color: var(--slate); border-radius: 999px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; transition: background .25s ease, color .25s ease;
}
.chk__back:hover { background: rgba(63, 80, 100, .08); color: var(--slate-deep); }
.chk__back:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.chk__note { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--slate-soft); }

/* HIER STANDEN BIS ZUM 06.08.2026 DIE ERGEBNIS-STILE.
   .chk__grid, .chk__cell*, .chk__disc, .chk__sub und .chk__tips haben die
   Zahlentabelle und die Einordnung im Fenster gebaut. Beides erscheint nicht
   mehr auf der Seite, die Auswertung gibt es nur noch per E-Mail. Damit hatten
   die Regeln null Treffer im Markup, und ungenutztes CSS, das aussieht als
   gehoere es dazu, ist die naechste Fehlerquelle. Gepruefte Streichung, nicht
   vergessene Reste. Auch .chk__dl weiter unten faellt weg: der Sofort-Download
   des PDF war der letzte Rest der alten Logik. */

/* Der ehrliche Hinweis, dass noch nichts verschickt wird. Bewusst kein roter
   Fehlerkasten und kein gruener Erfolgskasten, sondern eine sachliche Notiz. */
.chk__hint {
  margin-top: 1.4rem; padding: .95rem 1.1rem; border-radius: var(--r-md);
  background: rgba(107, 178, 155, .1); border: 1px solid rgba(107, 178, 155, .3);
  font-size: .84rem; line-height: 1.6; color: var(--slate);
}

/* Abschluss — genau hier verlieren die meisten Seiten den Lead */
.chk__close { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(63, 80, 100, .16); }
.chk__close-q { margin: 0; font-family: var(--display); font-size: 1.15rem; color: var(--slate-deep); }
.chk__close-s { margin: .45rem 0 1rem; font-size: .88rem; line-height: 1.6; color: var(--slate); }
.chk__close-b {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .9rem 1.7rem; border-radius: 999px;
  background: var(--sage-deep); color: var(--cream); white-space: nowrap;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s ease;
}
.chk__close-b:hover { background: var(--slate-deep); }

/* Dauerhafte Leiste.
   Bis zum 19.08.2026 trug sie Titel UND Unterzeile (zwei Zeilen, groesserer
   Text) und lag auf dem Handy direkt auf Patricks Gesicht/Schulter im Hero,
   optisch fast gleich stark wie "Termin sichern" darunter — die eigentliche
   Haupt-CTA. Jetzt bewusst durchgehend (nicht nur mobil) eine einzeilige,
   kleine, halbtransparente Pille: sichtbar und erreichbar, aber niemals lauter
   als der Termin-Knopf. */
.chk-bar {
  position: fixed; z-index: 84; left: 50%; transform: translateX(-50%);
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; cursor: pointer;
  padding: .38rem .95rem; border: 1px solid rgba(245,241,231,.4); border-radius: 999px;
  background: rgba(30, 42, 36, .74); color: var(--cream);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(20, 30, 26, .22);
}
/* Derselbe Fehler wie oben bei .chk, nur unbemerkt geblieben: display:grid ist
   eine Autoren-Regel und schlaegt [hidden]{display:none} aus dem Browser. Das
   hidden-Attribut war also wirkungslos, die Leiste stand von der ersten Sekunde
   an unter dem offenen Dialog. Gemessen: hidden=true, display=grid, sichtbar. */
.chk-bar[hidden] { display: none; }
.chk-bar__t { font-size: .68rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
/* Auf dem Handy sitzt unten schon der Termin-Dock. Zwei Leisten uebereinander waeren
   Unsinn, also weicht der Check nach oben aus. */
@media (max-width: 900px) { .chk-bar { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } }

/* Handy: jeder Schritt soll ohne Scrollen bedienbar sein. Deshalb ruecken
   Titel, Abstaende und die Auswahlflaechen zusammen, statt dass der Weiter-Knopf
   unter die Falz rutscht. Die Box scrollt trotzdem intern, falls die Schrift sehr
   gross gestellt ist. */
@media (max-width: 560px) {
  .chk { padding: 2.4vh 4vw; }
  .chk__box { padding: 1.5rem 1.25rem 1.4rem; max-height: 94vh; }
  .chk__opts { margin-top: 1rem; gap: .55rem; }
  .chk__opt { min-height: 56px; padding: .8rem .95rem; }
  .chk__opt-t { font-size: 1.02rem; }
  .chk__opt-s { font-size: .8rem; }
  .chk__f { margin-top: 1rem; }
  .chk__ok { margin-top: .7rem; padding: .7rem .8rem; }
  .chk__ok span { font-size: .76rem; }
  .chk__nav { margin-top: 1rem; }
}

/* ================= 6 · WARUM ICH ================= */
.warum {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 6vw; padding: 14vh 6vw; background: var(--cream);
}
.warum__portrait { position: relative; }
.warum__portrait img {
  width: 100%; border-radius: 20px; box-shadow: var(--shadow-lift);
  aspect-ratio: 4/5; object-fit: cover;
}
.warum__text p { margin-top: 1.4rem; line-height: 1.8; color: var(--slate); max-width: 46ch; }

/* ================= 6b · FAQ ================= */
.faq { padding: 12vh 6vw; background: var(--cream); }
.faq__head { max-width: 760px; margin: 0 auto 3.5rem; }
.faq__list { max-width: 760px; margin: 0 auto; }
.faq__item { border-top: 1px solid rgba(63, 80, 100, 0.16); }
.faq__item:last-child { border-bottom: 1px solid rgba(63, 80, 100, 0.16); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; position: relative;
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3;
  color: var(--slate-deep); transition: color .25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--sage-deep); }
/* +/− indicator that rotates into an × when open */
.faq__item summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px;
  background:
    linear-gradient(var(--sage-deep), var(--sage-deep)) center/14px 2px no-repeat,
    linear-gradient(var(--sage-deep), var(--sage-deep)) center/2px 14px no-repeat;
  transform: translateY(-50%) rotate(0deg); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__answer { padding: 0 3rem 1.6rem 0; }
.faq__answer p { margin: 0; line-height: 1.75; color: var(--slate); max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__answer { animation: faqReveal .4s ease; }
  @keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ================= 7 · ERNÄHRUNGSWISSEN =================
   Bis zum 19.08.2026 stand hier zusaetzlich eine .pdf__card mit eigenem
   E-Mail-Formular (Klasse .pdf, ID #pdf). Rausgenommen, siehe index.html.
   Diese Regel traegt jetzt nur noch den Wissen-Block, Name entsprechend
   angepasst, damit niemand kuenftig nach einer PDF-Karte sucht, die es nicht
   mehr gibt. */
.wissen-sec { padding: 12vh 6vw; background: linear-gradient(180deg, var(--cream), var(--sage-soft)); }

/* ---- Woechentliches Gratis-Wissen ---- */
.wissen {
  margin: 3rem auto 0; max-width: 1060px; border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.wissen__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.08; color: var(--slate-deep); margin: 0.4rem 0 0.9rem; }
.wissen__title em { font-family: var(--serif); font-style: italic; color: var(--sage-deep); }
.wissen__left p { color: var(--slate); line-height: 1.7; max-width: 52ch; }
.wissen__cta {
  display: inline-block; margin-top: 1.2rem; font-weight: 600; color: var(--sage-deep);
  border-bottom: 1px solid var(--sage); padding: 0.4rem 0 0.3rem;
}
.wissen__channels { list-style: none; display: grid; gap: 0.7rem; margin: 0; padding: 0; }
.wissen__chip {
  display: block; padding: 0.65rem 1.2rem; border-radius: 999px; text-align: center;
  border: 1px solid rgba(60, 112, 89, 0.35); color: var(--slate-deep);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  text-decoration: none; transition: background .25s, border-color .25s;
}
/* nur die verlinkten Kanaele reagieren; die WhatsApp-Gruppe ist ein span und
   soll deshalb auch nicht so tun, als koennte man sie anklicken */
a.wissen__chip:hover { background: rgba(60, 112, 89, .1); border-color: var(--sage-deep); }
span.wissen__chip { opacity: .72; }
@media (max-width: 700px) {
  .wissen { grid-template-columns: 1fr; }
  /* grid-auto-flow:column zwang alle drei Kanaele in EINE Zeile. Gemessen auf
     390px: der Facebook-Chip endete bei x=402, lag also 12px ausserhalb des
     Bildschirms und war abgeschnitten. Ein uebergeordnetes overflow hat das
     kaschiert, weshalb die Seite trotzdem keinen Scrollbalken zeigte. Flex mit
     Umbruch statt starrer Spalte. */
  .wissen__channels { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .wissen__chip { font-size: 0.74rem; padding: 0.55rem 0.9rem; }
}

/* ================= 8 · FOOTER ================= */
.footer { background: var(--ink); color: var(--cream); padding: 16vh 6vw 4vh; position: relative; overflow: hidden; }
/* Kein max-width mehr auf dem Container. 52ch loeste gegen Archivo 16px auf, also
   rund 477px, und presste damit eine 160px-Display-Serife in eine Spalte, die fuer
   Fliesstext gedacht war. Ergebnis: die im Markup als zwei Zeilen gesetzte Zeile
   "Fuehl<br>dein Leben." brach ab etwa 738px auf drei. Das Mass gehoert zum
   Fliesstext, und .footer__lead bringt mit 44ch bereits sein eigenes mit. */
.footer__inner { }
.footer__big {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 10rem); line-height: 0.92; margin: 0.4rem 0 2rem;
}
.footer__big em { font-family: var(--serif); font-style: italic; color: var(--sage-soft); }
.footer__lead { color: rgba(245,241,231,0.72); line-height: 1.8; max-width: 44ch; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; font-size: 1.1rem; }
/* real hit area — these were 23px tall, half the 44px minimum, and they are the
   site's only conversion links */
.footer__contact a { display: inline-block; border-bottom: 1px solid var(--sage); padding: 0.6rem 0 0.5rem; transition: color .3s; }
.footer__contact a:hover { color: var(--sage-soft); }
.footer__contact span { color: rgba(245,241,231,0.6); }
.footer__social { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.6rem; }
.footer__social a {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,231,0.72); border-bottom: 1px solid rgba(107,178,155,0.5);
  padding: 0.55rem 0 0.45rem; transition: color .3s, border-color .3s;
}
.footer__social a:hover { color: var(--cream); border-color: var(--sage); }
.footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: 12vh; padding-top: 2rem; border-top: 1px solid rgba(245,241,231,0.12);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,241,231,0.62);
}
/* the wordmark keeps its Binnenmajuskel — uppercasing it kills the Lebens/FEEL/falt play */
.footer__legal span:first-child { text-transform: none; letter-spacing: 0.01em; }
.footer__legal em { font-style: normal; color: var(--sage); }
/* wrap ist Pflicht, seit hier vier statt zwei Links stehen: ohne Umbruch schiebt
   die Zeile auf schmalen Geraeten ueber den Rand hinaus */
.footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__links a { padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: border-color .25s; }
.footer__links a:hover { border-color: var(--sage); }
/* Designer-Credit: dieselbe Zeile und Groesse wie die Rechtslinks, nur eine Spur
   leiser. Keine eigene Farbe, keine eigene Schrift — er soll sichtbar bleiben,
   aber nichts an sich ziehen. */
/* flex-basis: 100% setzt den Credit auf eine eigene Zeile. Ohne das haette
   .footer__legal drei Kinder statt zwei, und space-between haette aus dem
   Copyright-links/Links-rechts-Paar ploetzlich eine Dreiteilung gemacht. */
.footer__credit { flex-basis: 100%; color: inherit; opacity: 0.72; }
.footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Qualifikations-Nachweise im "Warum ich"-Block ----
   Bewusst nuechtern gesetzt: ein Nachweis wirkt, wenn er wie ein Nachweis
   aussieht, nicht wie ein Werbe-Badge. */
.creds { list-style: none; display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; }
.creds li {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 1.1rem; border-left: 2px solid var(--sage);
  background: rgba(107, 178, 155, 0.09); border-radius: 0 8px 8px 0;
}
.creds strong { font-size: 0.94rem; color: var(--slate-deep); font-weight: 600; }
.creds span { font-size: 0.8rem; color: var(--slate); letter-spacing: 0.02em; }
.creds__more {
  display: inline-block; margin-top: 1.1rem; font-size: 0.85rem; font-weight: 600;
  color: var(--sage-deep); border-bottom: 1px solid var(--sage); padding: 0.35rem 0 0.3rem;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .angebote__grid, .b2b__grid { grid-template-columns: 1fr; }
  .warum { grid-template-columns: 1fr; }
  .pdf__card { grid-template-columns: 1fr; }
  /* Auf dem Handy steht kein Objekt mehr neben dem Text, sondern darueber.
     Die Einleitung rutscht dafuer nach oben und gibt das untere Drittel frei;
     scene.js misst diese Kante und setzt die Objekte darunter. */
  .world__intro { left: 6vw; right: 6vw; width: auto; top: 11vh; }
  /* the act panels were min(36vw,40ch) = a ~140px ragged column on phones, 64% empty.
     Give them the full width and drop the decorative labels that collided with them. */
  .act, .act--left, .act--right {
    left: 6vw; right: 6vw; width: auto; text-align: left;
    /* nach unten geschoben, damit das Objekt darueber ganze Breite und echte
       Hoehe bekommt statt einer 103px-Scherbe am Bildrand */
    top: 64%;
  }
  .act--right, .act--right .act__list li { text-align: left; padding-left: 0; padding-right: 0; }
  /* ...but the desktop rule also pins this list's bullets to `right: 0`. Re-aligning
     the text without the ::before left the sage dots stranded at the far right edge,
     detached from the items they mark. Put them back on the left with the text. */
  .act--right .act__list li { padding-left: 1.1rem; }
  .act--right .act__list li::before { left: 0; right: auto; }
  .world__labels { display: none; }

  /* FILM PANELS — the worst mobile bug on the site. width:min(44vw,620px) is 171px
     on a 390px phone, so the twelve copy beats (the largest text block here) were
     squeezed into a ragged sliver with a 42px headline wrapping every word or two.
     Give them the full width, kill the right-alignment, and let the type breathe. */
  .fpanel { width: auto; left: 6vw; right: 6vw; }
  .fpanel--l, .fpanel--r { left: 6vw; right: 6vw; text-align: left; }
  .fpanel--r .fpanel__text { margin-left: 0; }
  .fpanel__title { font-size: clamp(2rem, 10.5vw, 3.2rem); }
  .fpanel__text { font-size: 1.02rem; margin-top: 1.1rem; }
  .fpanel__no { font-size: 0.78rem; }

  /* The desktop grade keeps the centre band nearly clear (0.10) because the copy
     lives on a flank. The rule above puts the copy across the FULL width, so every
     line then sat over that clear band: measured 2.36:1 on smoothie, 2.86 on kettle,
     2.91 on scatter — under the 4.5 minimum, i.e. genuinely hard to read. Flatten
     the horizontal scrim on phones; the vertical one is unchanged. */
  .film__grade {
    background:
      linear-gradient(90deg, rgba(16,24,21,0.78), rgba(16,24,21,0.72) 50%, rgba(16,24,21,0.78)),
      linear-gradient(180deg, rgba(20,30,26,0.45), transparent 26%, transparent 74%, rgba(20,30,26,0.48));
  }
  /* --sage-soft measured 1.57-1.94:1 over the bright clips and stays under the bar
     even with the scrim above, so the beat number goes cream on phones only. */
  .fpanel__no { color: rgba(245, 241, 231, 0.92); }

  /* SCROLL LENGTH — these are vh-based, so a phone's short viewport did NOT make
     them shorter in swipes: 2400vh was ~20,000px of thumb-scrolling for the film
     alone (~24 screens) and the page totalled ~40. Shorten both on phones; the
     panel/act choreography is progress-mapped, so it just paces tighter. */
  .journey { height: 1600vh; }
  .world { height: 560vh; }

  /* Impressum/Datenschutz measured 26px tall — legally-required links a thumb can
     barely hit. (This override has to live HERE, not in style.css: sections.css
     loads second, so its .footer__links a padding was winning.) */
  .footer__links a { padding: 1.05rem 0; }
  .footer__links { gap: 1.8rem; }
  /* email + phone were 38px; nudge them over the 44px thumb threshold */
  .footer__contact a { padding: 0.85rem 0 0.75rem; }
}
/* phone landscape: the intro copy and the decorative labels stack into the same
   band. Hide the labels and lift the copy. */
/* TABLET-BAND. Die Seite hatte genau EINEN Breitenumbruch (900px), also bekam ein
   iPad mit 820px exakt das Handy-Layout: Angebotskarten 722px breit einspaltig,
   Portraet 787px hoch, alles einspaltig. Diese Regeln muessen NACH dem 900er-Block
   stehen, sonst gewinnt bei gleicher Spezifitaet der frueher notierte. */
@media (min-width: 700px) and (max-width: 900px) {
  .angebote__grid, .b2b__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4vw; }
  .warum { grid-template-columns: 1.1fr 1fr; gap: 4vw; align-items: center; }
  .hero__portrait-wrap { width: min(64vw, 70vh); }
  /* Die Film-Panels duerfen auf dem Tablet wieder auf eine Haelfte, dafuer ist Platz.
     Damit liest sich die Aufnahme dahinter wieder frei, wie am Desktop gedacht. */
  .fpanel { width: min(52vw, 460px); }
  .fpanel--l { left: 6vw; right: auto; }
  .fpanel--r { right: 6vw; left: auto; text-align: right; }
  .fpanel--r .fpanel__text { margin-left: auto; }
  /* ...und weil die Panels wieder auf den Flanken sitzen, kommt der Mittelbereich
     des Scrims zurueck, sonst dunkelt das Tablet die Aufnahme unnoetig ab. */
  .film__grade {
    background:
      linear-gradient(90deg, rgba(16,24,21,0.86), rgba(16,24,21,0.22) 46%, rgba(16,24,21,0.22) 54%, rgba(16,24,21,0.86)),
      linear-gradient(180deg, rgba(20,30,26,0.45), transparent 26%, transparent 74%, rgba(20,30,26,0.48));
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .world__labels { display: none; }
  .world__intro { top: 12vh; }
  /* 13vh assumes a portrait viewport: on a 844x390 landscape phone it resolves to
     ~51px, which put "Patrick Holz" underneath the fixed nav pill (which occupies
     y 18-86). Clear the bar explicitly. */
  .hero__meta-stack { top: 96px; }
}

/* Reduced motion: the JS honours the preference thoroughly, but the stylesheets had
   exactly ONE guard (the FAQ keyframe below) — every transition here still ran at
   full speed. This neutralises the decorative ones in a single pass; GSAP-driven
   motion is guarded separately in js/main.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* .chk__dl ist am 06.08.2026 entfallen. Der Knopf gab das PDF sofort im Fenster
   heraus, weil der Mailversand noch nicht stand. Genau das ist jetzt nicht mehr
   gewollt: das PDF kommt ausschliesslich per E-Mail, sonst gibt es keinen Grund,
   die Adresse ueberhaupt zu bestaetigen. Wer nur das Heft will, nimmt das
   Formular in der PDF-Sektion, das ohne Fragen auskommt. */

/* ================= KURSE auf der Startseite (21.08.2026) =================
   Zwilling zu .kplan/.khinweis in seite.css. index.html laedt seite.css NICHT
   (siehe Kommentar bei .chk__hp weiter oben), die Regeln muessen hier also
   eigenstaendig stehen. Wer eine davon aendert, aendert beide.

   Warum die Kurse ueberhaupt auf die Startseite gehoeren: sie sind mit 6 € der
   guenstigste Einstieg ins ganze Angebot und das einzige mit festen Terminen.
   Eine Karte, die nur auf kurse.html verweist, verschenkt genau die Information,
   die jemanden zum Kommen bringt — naemlich dass Dienstag um 9 etwas stattfindet.

   Heller Abschnitt mit Absicht: nav--light haengt in main.js an der festen Liste
   ['.journey', '.manifest', '.footer']. Ein dunkler Abschnitt haette die
   Nav-Pille unlesbar gemacht, ohne diese Liste mitzupflegen. Den Kontrast
   tragen stattdessen die sage-getoenten Tageskarten. */
.kurse-sec { padding: 12vh 6vw; background: var(--cream-warm); }
.kurse-sec__head { max-width: 46ch; margin-bottom: 4vh; }
.kurse-sec__head p { color: var(--slate); line-height: 1.7; margin-top: 1.1rem; }

.kplan {
  display: grid; gap: 1.1rem; margin: 0 auto;
  max-width: 1060px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kplan__day {
  padding: 1.3rem 1.4rem;
  background: rgba(107, 178, 155, .14); border: 1px solid rgba(107, 178, 155, .32);
  border-radius: var(--r-md);
}
.kplan__name {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .95rem;
}
.kplan__list { list-style: none; display: grid; gap: .85rem; margin: 0; padding: 0; }
/* Die Uhrzeit ist der Anker, nach dem man scannt: eigene Zeile, tabellarische
   Ziffern, damit 09:00 und 17:30 exakt untereinander stehen. */
.kplan__time {
  display: block; font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--slate);
}
.kplan__kurs {
  display: inline-block; font-weight: 600; color: var(--slate-deep);
  border-bottom: 1px solid transparent; transition: border-color .25s ease;
}
.kplan__kurs:hover { border-bottom-color: var(--sage-deep); }
.kplan__min { display: block; font-size: .82rem; color: var(--slate-soft); }

/* Der Vorbehalt. Steht bewusst NICHT im Kleingedruckten: solange Stadt und GEMA
   nicht freigegeben haben, ist jede Uhrzeit hier eine Absicht und keine Zusage. */
.khinweis {
  max-width: 1060px; margin: 2.2rem auto 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--sage-deep); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(107, 178, 155, .16);
  font-size: .92rem; line-height: 1.65; color: var(--slate);
}
.khinweis strong { color: var(--slate-deep); }

/* Der Buchen-Knopf (21.08.2026). Vorher stand hier nur ein kleiner
   "Alle Kurse ansehen"-Link — also ein Verweis auf noch eine Seite, aber nirgends
   die Handlung selbst. Wer den Plan gelesen hat und kommen will, braucht an genau
   dieser Stelle einen Knopf, nicht einen weiteren Klick auf dem Weg dorthin.

   Bewusst KEIN zweiter fixierter Balken: .cta-dock klebt auf dem Handy schon
   unten am Rand, und zwei gleichzeitig sichtbare Dauer-Knoepfe waren hier bereits
   einmal das Problem. Gross und fest im Abschnitt schlaegt klein und schwebend. */
.kurse-sec__cta { max-width: 1060px; margin: 2.4rem auto 0; text-align: center; }
.kurse-sec__book {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 60px; padding: 1.15rem 3rem; border-radius: 999px;
  background: var(--sage-deep); color: var(--cream);
  font-size: .92rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 14px 38px rgba(20, 44, 34, .28);
  transition: background .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.kurse-sec__book i { font-style: normal; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.kurse-sec__book:hover { background: var(--slate-deep); }
.kurse-sec__book:hover i { transform: translateX(4px); }
.kurse-sec__risk {
  margin: .9rem auto 0; max-width: 46ch;
  color: var(--slate); font-size: .82rem; line-height: 1.5; opacity: .85;
}
.kurse-sec__more { display: block; margin: 1.2rem auto 0; }
.kurse-sec__more a {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--sage-deep); text-decoration: underline; text-underline-offset: .2em;
}
.kurse-sec__more a:hover { color: var(--slate-deep); }
@media (max-width: 560px) {
  .kurse-sec__book { width: 100%; padding: 1.15rem 1.4rem; font-size: .86rem; }
}