/* ================= LebensFEELfalt — base.css =================
   Das gemeinsame Fundament fuer JEDE Seite: Token, Reset, feste Oberflaeche
   (Korn, Cursor, Fortschritt), Nav, Kartenreihe, Fusszeile, Abschnitts-Toene.

   Alles bis zum Abschnitt "NEUE BAUSTEINE" ist woertlich aus dem Bestand
   uebernommen (css/style.css und css/sections.css), nicht neu geschrieben.
   Quelle steht ueber jedem Block. Vorlage:
   docs/superpowers/specs/2026-08-05-unterseiten-designsystem.md, Abschnitt 1.1.

   NICHT hier drin: Loader, Hero-Glows, liquid-reveal, Film, World. Das gehoert
   der Startseite und steht weiterhin in style.css.

   Ladefolge: base.css zuerst, danach seite.css (Unterseiten) beziehungsweise
   style.css + sections.css (Startseite). */


/* ---------------------------------------------------------------------------
   TOKEN — aus style.css
   --------------------------------------------------------------------------- */
:root {
  --sage: #6bb29b;
  /* --sage-deep darkened #4e9079 -> #3c7059 so it clears WCAG AA 4.5:1 on cream
     (was 3.33:1, now ~5.2:1). It is the colour of every eyebrow, tag, hint and the
     primary PDF CTA. --sage stays bright for decorative fills (progress bar, bullets). */
  --sage-deep: #3c7059;
  --sage-soft: #a7d0c1;
  --slate: #3f5064;
  --slate-deep: #2a3746;
  --slate-soft: #566880;  /* darkened from #6d7f92 (3.65:1) to clear AA on cream (~4.7:1);
                             only used for the nav sub-label and the world labels, both text */
  --cream: #f5f1e7;
  --cream-warm: #ece3d3;
  --ink: #1f2c27;         /* deep slate-green for dark sections / text */
  --paper: var(--cream);
  --glass: rgba(255, 255, 255, 0.16);
  --glass-line: rgba(255, 255, 255, 0.4);
  --shadow-soft: 0 24px 60px rgba(31, 44, 39, 0.14);
  --shadow-lift: 0 40px 90px rgba(31, 44, 39, 0.22);

  --sans: 'Archivo', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --serif: 'Fraunces Text', Georgia, serif;

  --r-sm: 4px; --r-md: 16px; --r-lg: 22px;
  --fs-body: 1.0625rem; --lh-body: 1.72; --fs-lead: 1.2rem;
}
/* shared running-text scale */
/* ABWEICHUNG von der Vorlagen-Tabelle (dort nur style.css 4–30), begruendet:
   diese Zeile kommt mit, aber gekuerzt auf die zwei Selektoren, die es auf
   Unterseiten ueberhaupt gibt. Ohne sie verliert .footer__lead seinen Lesegrad
   und die Fusszeile saehe hier anders aus als auf der Startseite. .world__lead,
   .warum__text p, .angebote__sub und .pdf__card p bleiben draussen, die
   existieren nur auf der Startseite und stehen dort in style.css. */
.offer__desc, .footer__lead {
  font-size: var(--fs-body); line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------------
   RESET, BODY, FOKUS — aus style.css
   --------------------------------------------------------------------------- */
/* visually hidden but exposed to assistive tech — carries the page's only h1 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
img, canvas, video { display: block; max-width: 100%; }
/* Zwilling zu style.css: der Deko-Punkt ersetzt den Zeiger ueberall, nur in
   Eingabefeldern nicht. Wer tippt, muss sehen, wo der Text anfaengt. */
input, textarea, select { cursor: auto; }
input[type="email"], input[type="text"], input[type="number"],
input[type="tel"], textarea { cursor: text; }
a { color: inherit; text-decoration: none; }

/* Focus. The site had NO focus rule anywhere — nothing set outline:none, so the
   UA ring survived, but it was never tuned for these backgrounds and the nav's
   hover underline had no keyboard equivalent. :focus-visible keeps it off mouse
   clicks. */
:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav__links a:focus-visible span::after { transform: scaleX(1); transform-origin: left; }

/* body{cursor:none} hides the pointer for the custom dot, and the native cursor
   is only restored under (hover:none). Links WITHOUT a [data-cursor] — the
   Impressum/Datenschutz links above all — therefore had no hover affordance at
   all for mouse users. The custom dot still draws on top of this. */
a, button, summary, label { cursor: pointer; }

/* Skip link: off-screen until focused, then pinned top-left above everything. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--slate-deep); color: var(--cream);
  padding: 0.9rem 1.3rem; border-radius: 0 0 12px 0;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
::selection { background: var(--sage); color: #fff; }

/* ---------- reusable glass panel ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ---------------------------------------------------------------------------
   FESTE OBERFLAECHE — aus style.css
   Diese drei stehen im Markup AUSSERHALB von #smooth-wrapper.
   --------------------------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 240px 240px; opacity: 0.035;
}
/* 95, not 90: .nav__mobile is also 90 and comes later in the DOM, so it won every
   tie and buried the custom dot. With body{cursor:none} and the native-cursor
   restore gated behind (hover:none), a narrow DESKTOP window with the menu open
   had no visible pointer at all. Still below .nav (100). */
.cursor { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; }
.cursor__dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sage-deep); transform: translate(-50%, -50%);
  transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.cursor.is-hover .cursor__dot { width: 68px; height: 68px; background: rgba(107,178,155,0.22); border: 1px solid var(--sage-deep); }
.cursor__label {
  position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; color: var(--slate-deep);
  opacity: 0; white-space: nowrap; text-transform: uppercase;
}
.cursor.is-hover .cursor__label { opacity: 1; }
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--sage); z-index: 80; transform-origin: 0 0; transform: scaleX(0);
}

/* ---------------------------------------------------------------------------
   NAV — aus style.css, komplett inkl. .nav__mobile, .cta-dock, .nav--light
   --------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.1rem 1.8rem;
}
.nav__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  padding: 0.7rem 0.7rem 0.7rem 1.5rem;
  border-radius: 999px;
  background: rgba(245, 241, 231, 0.86);
  border: 1px solid rgba(63, 80, 100, 0.09);
  box-shadow: 0 10px 34px rgba(31, 44, 39, 0.07);
  /* Ergaenzt am 19.08.2026: die Pille hatte nur Deckkraft, keine Weichzeichnung.
     Beim Scrollen lief Fliesstext ungebremst darunter durch und blieb an der
     Kante teils lesbar — Wort "sollst" im About-Absatz war betroffen (Beleg:
     idx-mob-sollst2.png). .nav__sub-panel und .glass loesen dieselbe
     Ueberlagerung schon per backdrop-filter, hier fehlte er nur an der Pille. */
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.nav__brand { display: flex; flex-direction: column; line-height: 1.02; }
.nav__brand-text { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; letter-spacing: 0.005em; }
.nav__brand-text em { font-style: normal; color: var(--sage-deep); }
.nav__brand-sub {
  font-size: 0.52rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--slate-soft); margin-top: 3px;
}
.nav__links {
  justify-self: center; display: flex; gap: 1.9rem;
  font-size: 0.71rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
/* 0.71rem of text gave these a 16px-tall hit area — under the 24px minimum target
   size. The padding grows the target without moving the underline, which hangs off
   the inner span. The row still sits below the 38px CTA, so the bar keeps its height. */
.nav__links a { padding: 6px 0; }
/* Zwilling zu style.css. OHNE DIESE ZEILE STEHT "ANGEBOTE" 6px HOEHER.
   "Angebote" ist der einzige Punkt mit Aufklappmenue und steckt in einem
   <div class="nav__item">, sein <a> bleibt dadurch inline. Senkrechtes Padding
   wirkt bei Inline-Elementen nicht auf die Hoehe, bei den drei blockartigen
   Geschwistern schon. Gemessen: 29px gegen 35px. Ausfuehrliche Begruendung in
   css/style.css — wer hier etwas aendert, muss es dort ebenfalls tun. */
.nav__item > a { display: block; }
.nav__links a span { position: relative; display: inline-block; padding-bottom: 3px; }
.nav__links a span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.nav__links a:hover span::after { transform: scaleX(1); transform-origin: left; }

/* ---- Aufklapp-Menue unter "Angebote" ----
   Kein Toggle-Script: das Panel oeffnet auf :hover UND :focus-within, damit es mit
   der Maus und mit der Tabulatortaste funktioniert und auch ohne JavaScript steht.
   .nav__sub ist nur die Positionsschale und traegt oben transparente Polsterung,
   damit der Weg von der Beschriftung ins Panel nicht durch eine Luecke fuehrt, in
   der :hover abreisst. Der sichtbare Kasten ist .nav__sub-panel. */
.nav__item { position: relative; }
.nav__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px; min-width: 236px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility .28s;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav__sub-panel {
  display: flex; flex-direction: column;
  padding: 0.5rem 0.4rem;
  border-radius: 18px;
  background: rgba(245, 241, 231, 0.94);
  border: 1px solid rgba(63, 80, 100, 0.09);
  box-shadow: 0 16px 40px rgba(31, 44, 39, 0.14);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transform: translateY(-6px);
  transition: transform .32s cubic-bezier(.22,1,.36,1), background .45s ease, border-color .45s ease;
}
.nav__item:hover .nav__sub-panel,
.nav__item:focus-within .nav__sub-panel { transform: translateY(0); }
/* eigene Regel, sonst erbt der Untereintrag die 6px-Polsterung der Hauptzeile und
   bleibt unter der Mindestgroesse fuer Klickflaechen */
.nav__sub-panel a {
  display: block; padding: 0.62rem 0.9rem; border-radius: 12px;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: none;
  font-weight: 500; white-space: nowrap;
  transition: background .25s ease;
}
.nav__sub-panel a:hover,
.nav__sub-panel a:focus-visible { background: rgba(107, 178, 155, 0.16); }
/* ueber den dunklen Sektionen faerbt sich die Pille um, das Panel muss mit */
.nav--light .nav__sub-panel {
  background: rgba(24, 34, 30, 0.9); border-color: rgba(245,241,231,0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.nav--light .nav__sub-panel a:hover,
.nav--light .nav__sub-panel a:focus-visible { background: rgba(245, 241, 231, 0.12); }

.nav__cta {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--slate-deep); color: var(--cream);
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.78rem 1.3rem; border-radius: 999px;
  transition: background .35s ease;
}
.nav__cta i { font-style: normal; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.nav__cta:hover { background: var(--sage-deep); }
.nav__cta:hover i { transform: translateX(4px); }

/* ---- mobile menu ---- */
.nav__toggle {
  display: none; justify-self: end; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav__toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__mobile {
  position: fixed; inset: 0; z-index: 90; background: var(--cream);
  display: flex; flex-direction: column; gap: 1.4rem; padding: 0 8vw;
  /* Im Querformat (844x390) passten die fuenf Eintraege nicht mehr in die Hoehe.
     Zentriertes Flex laeuft in BEIDE Richtungen ueber, der erste Link stand also bei
     -4px oberhalb des Overlays und war ohne overflow gar nicht erreichbar.
     `safe center` zentriert nur solange Platz ist und faellt sonst auf start zurueck. */
  justify-content: safe center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-block: 6vh;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.nav__mobile.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__mobile a {
  font-family: var(--display); font-size: clamp(1.6rem, 8vw, 2.4rem); color: var(--ink);
  padding: 0.3rem 0; letter-spacing: -0.01em;
}
/* Die fuenf Detailseiten stehen offen unter "Angebote", nicht hinter einem
   zweiten Tipp. Eigene Groesse, sonst erben sie die clamp(1.6rem, 8vw, 2.4rem)
   der Hauptzeilen und neun Eintraege dieser Groesse passen auf kein Telefon.
   Die Kante links ordnet sie sichtbar unter. */
.nav__mobile-sub {
  display: flex; flex-direction: column;
  margin: -0.5rem 0 0.2rem; padding-left: 1.05rem;
  border-left: 1px solid rgba(63, 80, 100, 0.16);
}
.nav__mobile-sub a {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--slate);
  min-height: 44px; display: flex; align-items: center; padding: 0;
}
.nav__mobile-cta {
  margin-top: 1rem; font-family: var(--sans) !important; font-size: 0.8rem !important;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep) !important;
}
@media (max-width: 900px) {
  .nav__bar { grid-template-columns: 1fr auto; }   /* brand | toggle */
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }   /* the CTA lives inside the overlay on phones */
}
/* ---- mobile booking dock ----
   Desktop already carries .nav__cta in the bar, so this is phones/tablets only.
   z-index 85 sits under .nav__mobile (90) so the open menu covers it, and under
   .nav (100). */
.cta-dock { display: none; }
/* Ergaenzt am 20.08.2026, Zwilling zu style.css: war vorher eine kleine,
   mittig schwebende Pille mit Rand auf allen Seiten — sah aus wie ein
   zufaellig auf den Inhalt geklebter Knopf, ohne Bezug zum Rest der Flaeche.
   Jetzt eine randlose Vollbreite-Leiste, die am Bildschirmrand sitzt: dieselbe
   Konstruktion wie eine Tab- oder App-Leiste, die man aus jeder mobilen App
   kennt, und genau deshalb liest sie sich als gewollter Teil der Oberflaeche
   statt als loses Element. Groesser dazu: 0.74rem/48px Mindesthoehe ->
   0.92rem/60px. */
@media (max-width: 900px) {
  .cta-dock {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    position: fixed; z-index: 85;
    left: 0; right: 0; bottom: 0;
    min-height: 60px;
    padding: 1.05rem 1.5rem calc(1.05rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    /* sage-deep statt slate-deep (20.08.2026), Zwilling zu style.css: die
       Marken-Aktionsfarbe, eigens auf 4.5:1 Kontrast zu --cream abgedunkelt
       (siehe --sage-deep oben) — kraeftiger als das neutrale Navy-Grau. */
    background: var(--sage-deep); color: var(--cream);
    font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap;   /* uppercase + tracking wrapped "Termin sichern" onto two lines */
    box-shadow: 0 -10px 28px rgba(20, 44, 34, 0.35);
    opacity: 0; pointer-events: none; transform: translateY(100%);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
  }
  .cta-dock i { font-style: normal; }
  .cta-dock.is-shown {
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
}

/* over dark sections. War 0.72 — an der Trigger-Kante (site.js, 'top 4rem') liegt
   die Ueberschrift des .sec--dark-Abschnitts direkt hinter der Pille, und ohne
   backdrop-filter schimmerte der Text durch (19.08.2026). 0.92 haelt die Pille
   deckend genug, dass darunterliegende Ueberschriften nicht mehr durchscheinen. */
.nav--light .nav__bar { background: rgba(24, 34, 30, 0.92); border-color: rgba(245,241,231,0.14); box-shadow: none; }
.nav--light { color: var(--cream); }
.nav--light .nav__brand-text em { color: var(--sage-soft); }
.nav--light .nav__brand-sub { color: rgba(245,241,231,0.55); }
.nav--light .nav__cta { background: var(--cream); color: var(--ink); }

/* ---- Nav- und Tap-Target-Regeln unter 900px — aus style.css ----
   Nur die Nav-Zeilen der beiden 900er-Bloecke. Die Hero-Zeilen daneben
   (.hero__portrait-wrap, .hero-props, .hero__meta) bleiben in style.css, sie
   gehoeren zur Startseite. */
@media (max-width: 900px) {
  .nav__links { display: none; }

  /* TAP TARGETS — measured on a 390px phone: the primary CTA "Termin sichern" was
     only 25px tall, the brand 30px and the footer legal links 26px. A thumb needs
     ~44px (Apple HIG / WCAG 2.5.8). These are the site's conversion controls, so
     being hard to hit costs real bookings. */
  /* The desktop .nav__cta is hidden on phones; the real one lives in the drawer as
     .nav__mobile-cta and measured only 25px tall — the least tappable element on the
     page was the booking button. */
  .nav__mobile-cta { min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .nav__brand { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   EYEBROW UND SEKTIONSTITEL — aus sections.css
   --------------------------------------------------------------------------- */
.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); }

/* ---------------------------------------------------------------------------
   ANGEBOTSKARTE — aus sections.css. Traegt die Kartenreihe .cards (seite.css).
   --------------------------------------------------------------------------- */
.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);
}

/* ---------------------------------------------------------------------------
   FUSSZEILE UND NACHWEISE — aus sections.css
   --------------------------------------------------------------------------- */
.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 { }
/* 19.08.2026: seite.css setzt `h2 { color: var(--slate-deep) }` als nackte
   Element-Regel (Spezifitaet 0,0,1). .footer__big legt selbst keine Farbe fest,
   verliert also die von .footer geerbte --cream und stand auf 14 von 16
   Unterseiten praktisch unsichtbar (Slate auf Ink). Ein Klassenselektor schlaegt
   einen Elementselektor unabhaengig von der Reihenfolge im Stylesheet, darum
   reicht color: inherit hier aus, ohne seite.css anzufassen. War zuvor nur auf
   personal-training.html per Inline-Style (NOTBEHELF) geflickt. */
.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;
  color: inherit;
}
.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;
}

/* ---- Fusszeilen-Regeln unter 900px — aus sections.css ---- */
@media (max-width: 900px) {
  /* 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; }
}

/* ---------------------------------------------------------------------------
   REDUZIERTE BEWEGUNG — aus sections.css
   --------------------------------------------------------------------------- */
/* 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;
  }
}


/* ===========================================================================
   NEUE BAUSTEINE — Vorlage Abschnitt 6.1 und 5.1
   Ab hier steht nichts mehr aus dem Bestand.
   =========================================================================== */

/* ---------- Abschnitts-Toene ----------
   Erlaubt sind genau diese sechs. Regel 1 der Vorlage: nie zwei benachbarte
   Abschnitte mit derselben Klasse. Der Hero ist immer .sec (cream), .sec--sage
   genau einmal je Seite fuer den CTA, .sec--dark hoechstens zweimal und nie
   direkt vor der Fusszeile. */
.sec { padding: clamp(76px, 8vw, 132px) 0; background: var(--cream); }
.sec--tint { background: var(--cream-warm); }
.sec--sage { background: linear-gradient(180deg, rgba(167,208,193,.42), rgba(167,208,193,.18)); }
.sec--fade { background: linear-gradient(180deg, var(--cream-warm), var(--cream)); }
/* .sec--wide traegt selbst keine Optik, es weitet nur die Lesespalte. Die Regel
   dazu steht bei .wrap in seite.css, damit die Spaltenbreite an genau einer
   Stelle definiert ist. */

/* Der dunkle Beat. Die Startseite hat ihn dreimal, die Unterseiten hatten ihn gar
   nicht, und genau daran erkennt man, dass sie nicht dazugehören. */
.sec--dark { background: var(--slate-deep); color: var(--cream); }
.sec--dark h2, .sec--dark h3 { color: var(--cream); }
.sec--dark .eyebrow { color: var(--sage-soft); }
.sec--dark p, .sec--dark li { color: rgba(245,241,231,.78); }
.sec--dark a { color: var(--sage-soft); }
.sec--dark strong { color: var(--cream); }
.sec--dark li::before { background: var(--sage-soft); }
.sec--dark .facts,
.sec--dark .ptable__row,
.sec--dark .quals li { background: rgba(245,241,231,.07); border-color: rgba(167,208,193,.28); }
.sec--dark .facts dt, .sec--dark .quals__y { color: var(--sage-soft); }
.sec--dark .facts dd, .sec--dark .ptable__k, .sec--dark .ptable__v { color: var(--cream); }
.sec--dark .facts__src { color: rgba(245,241,231,.7); }

/* ---------- Hero mit grosser Ueberschrift ----------
   Der einzige Baustein, der .sec--wide verlangt. Die Ueberschrift ist absichtlich
   eine Stufe kleiner als die .section-title der Startseite: 4,6 rem statt 5,5 rem.
   Das reicht fuer die Buehne und bricht in der Lesespalte darunter nicht auf fuenf
   Zeilen um. */
/* 18vh oben, damit die schwebende Nav-Pille nicht auf der Brotkrume steht */
.hero-sub { padding-top: 18vh; padding-bottom: 10vh; }
.hero-sub .crumb { padding-top: 0; margin-bottom: 2.4rem; }
.hero-sub__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.0;
  letter-spacing: -0.015em; color: var(--slate-deep);
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.hero-sub__title em { font-family: var(--serif); font-style: italic; color: var(--sage-deep); }
.hero-sub .lead { max-width: 44ch; margin-top: 2rem; font-size: var(--fs-lead); color: var(--slate); }
/* padding-bottom auf 6vh statt 10vh: der Termin-Dock ist seit dem 17.08.2026
   auf allen Unterseiten ab dem ersten Bildschirm sichtbar (siehe ctaDock() in
   site.js) und blieb dadurch auf mehreren Seiten (u.a. preise.html) genau im
   ersten Bildschirm ueber der Einleitung der naechsten Sektion liegen. Kleiner
   Puffer statt grosser Luecke schafft mehr Abstand zwischen Hero-Ende und der
   Zone, in der der Dock fix am unteren Rand steht. */
@media (max-width: 900px) { .hero-sub { padding-top: 15vh; padding-bottom: 6vh; } }