/* ==========================================================================
   AK Physiotherapie — Website im Stil der Reha-Plattform („erdig")
   Farben, Schrift und Radien kommen aus tokens.css (Kopie von
   packages/ui/src/tokens.css – bei Änderungen dort hierher übernehmen).
   Alles wird selbst ausgeliefert; die Karte lädt erst nach Klick.
   Die bisherige Fassung liegt zum Vergleich unter apps/website-alt.
   ========================================================================== */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/plus-jakarta-sans-700.woff2') format('woff2'); }

/* Farben der Tageszeit-Szene: registriert, damit der Wechsel weich überblendet. */
@property --sky-a { syntax: '<color>'; inherits: true; initial-value: #FBF3E4; }
@property --sky-b { syntax: '<color>'; inherits: true; initial-value: #FBEDD0; }
@property --sky-c { syntax: '<color>'; inherits: true; initial-value: #F6E4D8; }
@property --hill-1 { syntax: '<color>'; inherits: true; initial-value: #EADFCB; }
@property --hill-2 { syntax: '<color>'; inherits: true; initial-value: #DCE5D0; }
@property --hill-3 { syntax: '<color>'; inherits: true; initial-value: #B6C5A6; }
@property --hill-4 { syntax: '<color>'; inherits: true; initial-value: #7F9669; }
@property --hill-5 { syntax: '<color>'; inherits: true; initial-value: #5F7A4E; }
@property --sun-core { syntax: '<color>'; inherits: true; initial-value: #D9962A; }
@property --sun-glow { syntax: '<color>'; inherits: true; initial-value: rgba(217, 150, 42, 0.2); }
@property --cloud { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --hero-ink { syntax: '<color>'; inherits: true; initial-value: #2A211B; }
@property --hero-soft { syntax: '<color>'; inherits: true; initial-value: #55463C; }
@property --hero-fig { syntax: '<color>'; inherits: true; initial-value: #5B3F2E; }
@property --hero-head { syntax: '<color>'; inherits: true; initial-value: #F6E4D8; }

:root {
  --nav-h: 72px;
  --measure: 76rem;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 9vw, 8rem);
  --hills-h: clamp(56px, 9vw, 140px);  /* Hügel oben am Footer, überlappen den Inhalt */
  --foot-gap: clamp(3rem, 6vw, 5rem);   /* Luft zwischen letztem Inhalt und Hügelkante */

  --r-btn: 14px;
  --r-card: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-base: 360ms;
  --t-slow: 720ms;

  --shadow-lift: 0 2px 6px rgba(42, 33, 27, 0.05), 0 24px 48px -20px rgba(42, 33, 27, 0.26);
  --shadow-float: 0 1px 2px rgba(42, 33, 27, 0.06), 0 18px 40px -16px rgba(42, 33, 27, 0.3);

  --cream: #FBF8F3;
  --on-bark: #F3EBDF;
  --on-bark-soft: rgba(243, 235, 223, 0.74);
  --on-bark-line: rgba(243, 235, 223, 0.16);

  /* Bereichston (wie IconTile/Badge der Plattform); Standard: Rinde */
  --tone: var(--color-bark);
  --tone-deep: var(--color-bark);
  --tone-soft: var(--color-bark-soft);
}

/* Tageszeiten der Startseite (script.js setzt data-tageszeit am <html>) */
html {
  --sky-a: #FBF3E4; --sky-b: #FBEDD0; --sky-c: #F6E4D8;
  --hill-1: #EADFCB; --hill-2: #DCE5D0; --hill-3: #B6C5A6; --hill-4: #7F9669; --hill-5: #5F7A4E;
  --sun-core: #D9962A; --sun-glow: rgba(217, 150, 42, 0.2); --cloud: #FFFFFF;
  --hero-ink: #2A211B; --hero-soft: #55463C; --hero-fig: #5B3F2E; --hero-head: #F6E4D8;
  transition: --sky-a 1.6s var(--e-soft), --sky-b 1.6s var(--e-soft), --sky-c 1.6s var(--e-soft),
              --hill-1 1.6s var(--e-soft), --hill-2 1.6s var(--e-soft), --hill-3 1.6s var(--e-soft),
              --hill-4 1.6s var(--e-soft), --hill-5 1.6s var(--e-soft), --sun-core 1.6s var(--e-soft),
              --sun-glow 1.6s var(--e-soft), --cloud 1.6s var(--e-soft), --hero-ink 1.2s var(--e-soft),
              --hero-soft 1.2s var(--e-soft), --hero-fig 1.2s var(--e-soft), --hero-head 1.2s var(--e-soft);
}
html[data-tageszeit="tag"] {
  --sky-a: #D7EBEE; --sky-b: #E9F2EF; --sky-c: #FBF8F3;
  --hill-1: #E4E4D2; --hill-2: #D1DFC3; --hill-3: #A5BB91; --hill-4: #6E8A58; --hill-5: #5F7A4E;
  --sun-core: #E3A537; --sun-glow: rgba(227, 165, 55, 0.18); --cloud: #FFFFFF;
}
html[data-tageszeit="abend"] {
  --sky-a: #EFD6E0; --sky-b: #F5E2EB; --sky-c: #F8DCC6;
  --hill-1: #ECD5DD; --hill-2: #DEBDCA; --hill-3: #C497AD; --hill-4: #9C4B6E; --hill-5: #7E3A58;
  --sun-core: #C8703F; --sun-glow: rgba(200, 112, 63, 0.22); --cloud: #FBEDE0;
  --hero-fig: #46301F;
}
html[data-tageszeit="nacht"] {
  --sky-a: #1C1511; --sky-b: #2A211B; --sky-c: #46301F;
  --hill-1: #3D2E24; --hill-2: #34281F; --hill-3: #2C211A; --hill-4: #241B15; --hill-5: #1C1511;
  --sun-core: #FBEDD0; --sun-glow: rgba(251, 237, 208, 0.08); --cloud: #34281F;
  --hero-ink: #FBF8F3; --hero-soft: rgba(251, 248, 243, 0.76); --hero-fig: #F3EBDF; --hero-head: #7B6C60;
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.25rem);
  color-scheme: light;
}
body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.page-home { padding-top: 0; }
/* Hinaus-/hereinfliegende Elemente dürfen keine Querrolle erzeugen. clip statt hidden:
   kein Scroll-Container, position: sticky im Ablauf funktioniert weiter. */
main { overflow-x: clip; }
/* Platz für die Hügel am Footer, damit der letzte Block nicht darunter verschwindet
   (beim Kontaktband der Startseite läuft der Sandton unter den Hügeln weiter) */
main:not(.legal) > :last-child:not(.hero) { padding-bottom: calc(var(--hills-h) + var(--foot-gap)); }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; color: var(--color-ink); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); letter-spacing: -0.036em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0; color: var(--color-ink-soft); text-wrap: pretty; }
p + p { margin-top: 1rem; }
a { color: var(--color-clay-deep); text-decoration: none; }
a:hover { color: var(--color-ink); }
::selection { background: var(--color-clay-soft); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-x); }
.narrow { max-width: 44rem; }
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(1.05rem, 0.9vw + 0.85rem, 1.25rem); line-height: 1.55; max-width: 46ch; }
.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;
}
.skip-link {
  position: absolute; left: -999px; top: 0.75rem; z-index: 999;
  background: var(--color-bark); color: #F7F1E8; font-weight: 600;
  padding: 0.75rem 1.25rem; border-radius: var(--r-btn);
}
.skip-link:focus { left: 0.75rem; color: #F7F1E8; }

/* ---- Piktogramme (images/pikto.svg) ---- */
.pk {
  display: inline-block; flex: none;
  width: 1.25em; height: 1.25em; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}

/* ---- Bereichstöne (wie TONE_TILE der Plattform) ---- */
.tone-clay  { --tone: var(--color-clay);  --tone-deep: var(--color-clay-deep);  --tone-soft: var(--color-clay-soft); }
.tone-sun   { --tone: var(--color-sun);   --tone-deep: var(--color-sun-deep);   --tone-soft: var(--color-sun-soft); }
.tone-berry { --tone: var(--color-berry); --tone-deep: var(--color-berry-deep); --tone-soft: var(--color-berry-soft); }
.tone-sky   { --tone: var(--color-sky);   --tone-deep: var(--color-sky-deep);   --tone-soft: var(--color-sky-soft); }
.tone-moss  { --tone: var(--color-moss);  --tone-deep: var(--color-moss);       --tone-soft: var(--color-moss-soft); }
.tone-bark  { --tone: var(--color-bark);  --tone-deep: var(--color-bark);       --tone-soft: var(--color-bark-soft); }

.tile {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--tone-soft); color: var(--tone-deep);
}
.tile .pk { width: 24px; height: 24px; }
.tile-sm { width: 32px; height: 32px; border-radius: 10px; }
.tile-sm .pk { width: 18px; height: 18px; }
.tile-lg { width: 56px; height: 56px; border-radius: 18px; }
.tile-lg .pk { width: 28px; height: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.7rem; border-radius: var(--r-pill);
  background: var(--tone-soft); color: var(--tone-deep);
  font-size: 0.78rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.badge .pk { width: 15px; height: 15px; }

/* Abschnitts-Etikett: Badge mit Piktogramm (ersetzt die alten Versal-Tags) */
.eyebrow, .tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0; padding: 0.32rem 0.85rem 0.32rem 0.5rem; border-radius: var(--r-pill);
  background: var(--tone-soft); color: var(--tone-deep);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
}
.tag:not([class*="tone-"]) { --tone-soft: var(--color-clay-soft); --tone-deep: var(--color-clay-deep); }
.tag:not(:has(svg)) { padding-left: 0.85rem; }
.eyebrow .pk, .tag .pk { width: 18px; height: 18px; }
.eyebrow-on, .tag--dark { background: rgba(243, 235, 223, 0.1); color: var(--color-sun); }

.bar { height: 8px; border-radius: var(--r-pill); background: var(--color-sand); overflow: hidden; }
.bar > span {
  display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--color-clay), var(--color-sun));
  transition: width 1.1s var(--e);
}
.bar-lg { height: 10px; }

/* ==========================================================================
   Buttons – Formen der Plattform, eine Spur größer
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: translate var(--t-base) var(--e-spring), background-color var(--t-fast) var(--e),
              border-color var(--t-fast) var(--e), color var(--t-fast) var(--e), box-shadow var(--t-base) var(--e);
}
.btn .pk { width: 20px; height: 20px; }
.btn:active { translate: 0 1px; }
.btn-clay, .btn-a { background: var(--color-clay); color: #FFF7F0; }
.btn-clay:hover, .btn-a:hover { background: var(--color-clay-deep); color: #FFF7F0; box-shadow: 0 16px 30px -14px rgba(150, 80, 46, 0.6); }
.btn-bark { background: var(--color-bark); color: #F7F1E8; }
.btn-bark:hover { background: var(--color-bark-deep); color: #F7F1E8; box-shadow: 0 16px 30px -14px rgba(70, 48, 31, 0.6); }
.btn-sun { background: var(--color-sun); color: #2A211B; }
.btn-sun:hover { background: #E8AE45; color: #2A211B; box-shadow: 0 16px 34px -14px rgba(217, 150, 42, 0.6); }
.btn-ghost, .btn-b { background: rgba(255, 255, 255, 0.35); color: var(--color-ink); border-color: var(--color-line-strong); }
.btn-ghost:hover, .btn-b:hover { background: var(--color-sand); color: var(--color-ink); border-color: var(--color-line-strong); }
.btn-sm { min-height: 40px; padding: 0 1rem; font-size: 0.88rem; border-radius: 10px; }
.btn-icon {
  display: inline-grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border-radius: 9px;
  background: rgba(255, 247, 240, 0.18);
  transition: translate var(--t-base) var(--e-spring);
}
.btn-sun .btn-icon { background: rgba(42, 33, 27, 0.1); }
.btn-icon .pk { width: 18px; height: 18px; }
.btn:hover .btn-icon { translate: 3px 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.hint { font-size: 0.86rem; color: var(--color-muted); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav-wrap {
  position: fixed; inset: 0 0 auto; z-index: 60;
  transition: background-color var(--t-base) var(--e), box-shadow var(--t-base) var(--e),
              backdrop-filter var(--t-base) var(--e);
}
.nav-wrap.is-scrolled, body:not(.page-home) .nav-wrap {
  background: rgba(251, 248, 243, 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(16px); backdrop-filter: saturate(1.2) blur(16px);
  box-shadow: 0 1px 0 var(--color-line);
}
.nav {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-x);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; color: var(--color-ink); view-transition-name: brand; }
.brand:hover { color: var(--color-ink); }
.brand-tile {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--color-bark); color: #F3EBDF;
  transition: rotate var(--t-slow) var(--e-spring), scale var(--t-slow) var(--e-spring);
}
.brand-tile svg { width: 33px; height: 33px; fill: currentColor; }
.brand:hover .brand-tile { rotate: -8deg; scale: 1.06; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; transition: color var(--t-base); }
.brand-text small { font-size: 0.74rem; color: var(--color-muted); transition: color var(--t-base); }

.nav-links { display: flex; align-items: center; gap: 0.1rem; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 42px; padding: 0 0.75rem; border-radius: 10px;
  font-size: 0.92rem; font-weight: 600; color: var(--color-ink-soft);
  transition: color var(--t-fast) var(--e), background-color var(--t-fast) var(--e);
}
.nav-links a:hover { color: var(--color-ink); background: rgba(232, 220, 203, 0.55); }
.nav-links a.is-current, .nav-links a[aria-current="page"] { color: var(--tone-deep); background: var(--tone-soft); }
.nav-ico { display: none; }
.nav-login .pk { width: 17px; height: 17px; }
.nav-links .nav-login { color: var(--color-bark); }
.nav-links .nav-cta {
  margin-left: 0.4rem; padding: 0 1.1rem;
  background: var(--color-clay); color: #FFF7F0;
  transition: background-color var(--t-fast) var(--e), translate var(--t-base) var(--e-spring);
}
.nav-links .nav-cta:hover { background: var(--color-clay-deep); color: #FFF7F0; translate: 0 -1px; }
.nav-toggle {
  display: none; place-items: center; position: relative; z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 12px;
  background: var(--color-bark); cursor: pointer;
}
.nav-toggle span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin-left: -9px;
  background: #F3EBDF; border-radius: 2px;
  transition: transform var(--t-base) var(--e-spring);
}
.nav-toggle span:nth-child(1) { transform: translateY(-4px); }
.nav-toggle span:nth-child(2) { transform: translateY(4px); }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: rotate(-45deg); }

.scroll-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.scroll-meter span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--color-clay), var(--color-sun));
}

/* Nachts liegt die Navigation über dem dunklen Himmel */
html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .brand-text b { color: var(--cream); }
html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .brand-text small { color: rgba(251, 248, 243, 0.62); }
html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .brand-tile { background: #F3EBDF; color: var(--color-bark); }
html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .nav-links a:not(.nav-cta) { color: rgba(251, 248, 243, 0.82); }
html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .nav-links a:not(.nav-cta):hover { background: rgba(251, 248, 243, 0.1); color: var(--cream); }

/* ==========================================================================
   Hero – Tageszeit-Landschaft
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(660px, 100svh, 1000px);
  display: flex; align-items: flex-start;
  color: var(--hero-ink);
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 46%, var(--sky-c) 80%);
}
.hero-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 76%; z-index: 0; overflow: visible; }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--nav-h) + clamp(2.5rem, 9vh, 6.5rem)); padding-bottom: 14rem; pointer-events: none; }
.hero-copy { max-width: 37rem; pointer-events: auto; }
.js .hero-title:not(.is-split) { opacity: 0; }
.hero-copy > * { will-change: transform, opacity; }
.hero-title { margin-top: 1.25rem; color: var(--hero-ink); }
.hero-lede { margin-top: 1.4rem; color: var(--hero-soft); }

.greet {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6); color: var(--color-sun-deep);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(42, 33, 27, 0.06);
  font-size: 0.86rem; font-weight: 700;
}
.greet .pk { width: 20px; height: 20px; }
.greet span { color: var(--color-ink-soft); }
html[data-tageszeit="abend"] .greet { color: var(--color-clay-deep); }
html[data-tageszeit="nacht"] .greet { background: rgba(251, 248, 243, 0.1); color: var(--color-sun); box-shadow: inset 0 0 0 1px rgba(251, 248, 243, 0.14); }
html[data-tageszeit="nacht"] .greet span { color: rgba(251, 248, 243, 0.85); }

/* Hervorhebung mit handgezeichnetem Strich */
.hl-wrap { white-space: nowrap; }
.hl { position: relative; white-space: nowrap; color: var(--color-clay-deep); }
.hl-line { position: absolute; left: -3%; bottom: -0.16em; width: 106%; height: 0.36em; overflow: visible; pointer-events: none; }
.hl-line path { fill: none; stroke: var(--color-sun); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 205; stroke-dashoffset: 0; }
html[data-tageszeit="nacht"] .hl { color: var(--color-sun); }
html[data-tageszeit="nacht"] .hl-line path { stroke: var(--color-clay); }

.hero .btn-ghost { background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-tageszeit="nacht"] .hero .btn-ghost { background: rgba(251, 248, 243, 0.08); color: var(--cream); border-color: rgba(251, 248, 243, 0.3); }
html[data-tageszeit="nacht"] .hero .btn-ghost:hover { background: rgba(251, 248, 243, 0.16); }

.hero-trust { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--hero-soft); }
html[data-tageszeit="nacht"] .hero-trust .tile { background: rgba(251, 248, 243, 0.1); color: var(--color-sun-soft); }

/* Szene */
.stars path { fill: var(--color-sun-soft); }
.stars { opacity: 0; transition: opacity 1.4s var(--e-soft); }
html[data-tageszeit="nacht"] .stars { opacity: 1; }
.stars path:nth-child(3n) { animation: twinkle 3.2s ease-in-out infinite; }
.stars path:nth-child(3n + 1) { animation: twinkle 4.4s ease-in-out 1.1s infinite; }

.sun-pos { transform: translate(1190px, 262px); transition: transform 1.8s var(--e-soft); }
html[data-tageszeit="tag"] .sun-pos { transform: translate(1070px, 150px); }
html[data-tageszeit="abend"] .sun-pos { transform: translate(1130px, 338px); }
html[data-tageszeit="nacht"] .sun-pos { transform: translate(1200px, 190px); }
.sun-body { cursor: pointer; transition: opacity 1.2s var(--e-soft); }
.sun-core { fill: var(--sun-core); }
.sun-halo { fill: var(--sun-glow); }
.sun-halo2 { fill: var(--sun-glow); opacity: 0.45; }
.sun-rays { fill: none; stroke: var(--sun-core); stroke-width: 10; stroke-linecap: round; animation: spin 90s linear infinite; }
.moon { opacity: 0; transition: opacity 1.2s var(--e-soft); cursor: pointer; }
.moon-glow { fill: rgba(251, 237, 208, 0.07); }
.moon-body { fill: #FBEDD0; stroke: var(--color-sun); stroke-width: 8; stroke-linejoin: round; }
html[data-tageszeit="nacht"] .sun-body { opacity: 0; }
html[data-tageszeit="nacht"] .moon { opacity: 1; }

.cloud { fill: var(--cloud); opacity: 0.8; } /* Gruppen-Deckkraft: überlappende Kreise addieren sich nicht */
.cloud-1 { animation: drift 34s ease-in-out infinite alternate; }
.cloud-2 { animation: drift 46s ease-in-out -12s infinite alternate-reverse; }
.birds path { fill: none; stroke: var(--color-bark); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: flap 1.4s ease-in-out infinite; }
.birds .bird-2 { animation-delay: -0.5s; }
.birds { transition: opacity 1s; animation: glide 26s linear infinite; }
html[data-tageszeit="nacht"] .birds, html[data-tageszeit="abend"] .birds { opacity: 0; }

.hill-1 path { fill: var(--hill-1); }
.hill-2 path { fill: var(--hill-2); }
.hill-3 path { fill: var(--hill-3); }
.hill-4 > .par > path { fill: var(--hill-4); }
.hill-5 path { fill: var(--hill-5); }
.flowers path { stroke: var(--hill-5); stroke-width: 3; stroke-linecap: round; }
.flowers circle { fill: var(--color-sun); }
html[data-tageszeit="nacht"] .flowers { opacity: 0.25; }

/* Figur (vom Skript gezeichnet; gleiche Linienführung wie IlluMorgen) */
.figur { --fig: var(--color-bark); --fig-far: #8A6A55; --fig-head: var(--color-clay-soft); --fig-hand: var(--color-clay); --fig-w: 9; }
.figur path, .figur circle { vector-effect: none; }
.f-limb { fill: none; stroke: var(--fig); stroke-width: var(--fig-w); stroke-linecap: round; stroke-linejoin: round; }
.f-far { stroke: var(--fig-far); }
.f-hand { fill: none; stroke: var(--fig-hand); stroke-width: var(--fig-w); stroke-linecap: round; }
.f-head { fill: var(--fig-head); stroke: var(--fig); stroke-width: calc(var(--fig-w) * 0.8); }
.f-prop-hantel { fill: var(--color-clay-deep); stroke: none; }
.f-prop-rezept rect { fill: #FFFDF9; stroke: var(--fig); stroke-width: 4; }
.f-prop-rezept path { stroke: var(--color-clay); stroke-width: 3.5; stroke-linecap: round; }
.hero .figur { --fig: var(--hero-fig); --fig-far: color-mix(in srgb, var(--hero-fig) 72%, var(--sky-b)); --fig-head: var(--hero-head); --fig-w: 10; }
.figur-2 { --fig: var(--color-moss); --fig-far: #86A073; --fig-head: var(--color-moss-soft); --fig-hand: var(--color-moss); }

/* Schwebende App-Ausschnitte */
.hero-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.chip {
  position: absolute; left: var(--cx, -999px); top: var(--cy, -999px);
  translate: -50% -50%;
  transform: translate3d(calc(var(--dir, 1) * var(--out, 0) * 180px), calc(var(--out, 0) * -50px), 0) rotate(calc(var(--dir, 1) * var(--out, 0) * 14deg));
  opacity: calc(1 - var(--out, 0) * 1.3);
}
.chip-in {
  color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 16px; box-shadow: var(--shadow-float);
  animation: chip-pop 0.9s var(--e-spring) both, bob 6.5s ease-in-out infinite;
}
.chip-a .chip-in { animation-delay: 1.35s, 0s; }
.chip-b .chip-in { animation-delay: 1.55s, -2s; }
.chip-c .chip-in { animation-delay: 1.75s, -4s; }
.chip-badge { padding: 0.45rem; border-radius: var(--r-pill); }
.chip-badge .badge { font-size: 0.86rem; padding: 0.3rem 0.8rem; }
.chip-badge .badge .pk { width: 17px; height: 17px; }
.chip-card { padding: 0.75rem 0.9rem; min-width: 12.5rem; }
.chip-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; }
.chip-meta { display: flex; align-items: center; gap: 0.35rem; margin: 0.45rem 0 0.4rem; font-size: 0.8rem; font-weight: 500; color: var(--color-moss); }
.chip-meta .pk { width: 16px; height: 16px; }
.chip-card .bar > span { animation: bar-grow 1.4s var(--e) 2s both; }
.chip-mood { min-width: 0; padding: 0.65rem 0.8rem; }
.chip-mood b { display: block; font-size: 0.82rem; }
.chip-faces { display: flex; gap: 0.3rem; margin-top: 0.4rem; color: var(--color-bark); }
.chip-faces .pk { width: 30px; height: 30px; padding: 3px; border-radius: 9px; border: 1px solid var(--color-line); }
.chip-faces .is-on { background: var(--color-bark-soft); border-color: var(--color-bark); }

.daytime {
  position: absolute; right: var(--pad-x); top: calc(var(--nav-h) + 1rem); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 38px; padding: 0 0.85rem 0 0.6rem; border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.55); color: var(--hero-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(42, 33, 27, 0.08);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  opacity: 0.8; transition: opacity var(--t-fast), background-color var(--t-fast);
}
.daytime:hover { opacity: 1; background: rgba(255, 255, 255, 0.8); }
.daytime .pk { width: 18px; height: 18px; color: var(--color-sun-deep); }
html[data-tageszeit="nacht"] .daytime { background: rgba(251, 248, 243, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 248, 243, 0.16); }
html[data-tageszeit="nacht"] .daytime .pk { color: var(--color-sun); }


/* Auftakt: Hügel steigen, Sonne geht auf, Worte schweben ein */
.js .hero .hill-1 { animation: hill-up 1.3s var(--e) 0.05s both; }
.js .hero .hill-2 { animation: hill-up 1.3s var(--e) 0.15s both; }
.js .hero .hill-3 { animation: hill-up 1.3s var(--e) 0.25s both; }
.js .hero .hill-4 { animation: hill-up 1.3s var(--e) 0.35s both; }
.js .hero .hill-5 { animation: hill-up 1.3s var(--e) 0.45s both; }
.js .hero .sun-rise { animation: sunrise 2s var(--e) 0.3s both; }
.js .hero .fig-pop { animation: fig-pop 0.9s var(--e-spring) 0.95s both; }
.js .hero .clouds { animation: fade-in 1.6s var(--e) 0.6s both; }
.js .hero .greet { animation: rise-in 0.9s var(--e) 0.1s both; }
.js .hero-title .w { display: inline-block; animation: word-in 0.95s var(--e) both; animation-delay: calc(0.18s + var(--i, 0) * 0.055s); }
.js .hero-lede { animation: rise-in 1s var(--e) 0.7s both; }
.js .hero .hero-actions { animation: rise-in 1s var(--e) 0.85s both; }
.js .hero-trust { animation: rise-in 1s var(--e) 1s both; }
.js .hl-line path { stroke-dashoffset: 205; animation: draw 0.9s var(--e) 1.15s forwards; }
.js .daytime { animation: fade-in 1s var(--e) 1.8s both; }

@keyframes hill-up { from { transform: translateY(190px); } to { transform: none; } }
@keyframes sunrise { from { transform: translateY(280px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fig-pop { from { transform: scale(0.2, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
@keyframes glide { from { transform: translateX(-120px); } to { transform: translateX(160px); } }
@keyframes flap { 50% { transform: scaleY(0.55); } }
@keyframes twinkle { 50% { opacity: 0.35; } }
@keyframes bob { 50% { translate: 0 -9px; } }
@keyframes chip-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes bar-grow { from { width: 0; } }
@keyframes cue { 50% { transform: translateY(6px); } }
@keyframes pulse { from { transform: scale(0.6); opacity: 0.45; } to { transform: scale(2.4); opacity: 0; } }

/* ==========================================================================
   Laufbänder
   ========================================================================== */
.ribbons { position: relative; z-index: 4; height: clamp(120px, 13vw, 170px); margin-top: calc(clamp(120px, 13vw, 170px) * -0.5); pointer-events: none; overflow: hidden; }
/* Abgeschnitten wird am geraden Rahmen (.ribbons), nicht am gedrehten Band: Ein gedrehter
   Clip um die mehrere tausend Pixel breite Spur erzwang eine riesige Render-Fläche. */
.ribbon { position: absolute; left: -6%; right: -6%; top: 50%; padding: 0.95rem 0; pointer-events: auto; }
.ribbon-a { z-index: 2; background: var(--color-bark); color: var(--on-bark); transform: translateY(-50%) rotate(-2.2deg); box-shadow: 0 18px 34px -20px rgba(42, 33, 27, 0.7); }
.ribbon-b { z-index: 1; background: var(--color-sun-soft); color: var(--color-sun-deep); transform: translateY(-50%) rotate(1.6deg); }
.ribbon-track { display: flex; width: max-content; }
.ribbon-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ribbon-list li {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
.ribbon-list .pk { width: 1.25em; height: 1.25em; }
.ribbon-a .pk { color: var(--color-sun); }
.ribbon-b .pk { color: var(--color-clay); }

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.sec, main > section:not(.hero):not(.journey) { position: relative; padding: var(--sec-y) 0; }
.head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.head h2 { margin-top: 1rem; }
.head p { font-size: 1.08rem; }
.head--split { max-width: none; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.head--split p { margin-top: 0; }

/* ---- Leistungen ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.pillar {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0 1.6rem 1.8rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--e), border-color var(--t-base) var(--e), translate var(--t-slow) var(--e-spring);
}
.pillar:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--tone) 35%, transparent); }
.pillar:nth-child(2) { margin-top: 2.5rem; }
.pillar-art {
  height: 186px; margin: 0 -1.6rem 0.2rem;
  background: linear-gradient(165deg, var(--tone-soft), color-mix(in srgb, var(--tone-soft) 35%, var(--color-surface)));
  position: relative; overflow: hidden;
}
.pillar-art svg { position: absolute; left: 50%; bottom: 0; width: 220px; height: 206px; translate: -50% 0; overflow: visible; }
.pillar-sun { fill: color-mix(in srgb, var(--tone) 18%, transparent); transition: scale var(--t-slow) var(--e-spring); transform-box: fill-box; transform-origin: center; }
.pillar:hover .pillar-sun { scale: 1.08; }
.pillar-rays path { fill: none; stroke: var(--color-sun); stroke-width: 6; stroke-linecap: round; }
.pillar .tile-lg { margin-top: -2.6rem; outline: 4px solid var(--color-surface); position: relative; transition: rotate var(--t-slow) var(--e-spring); }
.pillar:hover .tile-lg { rotate: -8deg; }
.pillar h3 { font-size: 1.35rem; margin-top: 0.2rem; }
.pillar > p { font-size: 0.97rem; }
.badges { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badges li { padding: 0.28rem 0.7rem; border-radius: var(--r-pill); background: var(--tone-soft); color: var(--tone-deep); font-size: 0.78rem; font-weight: 600; }

/* ---- Einblick + Kennzahlen ---- */
.plate {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-xl); aspect-ratio: 21 / 9; background: var(--color-sand);
  box-shadow: 0 50px 100px -50px rgba(42, 33, 27, 0.5), 0 12px 30px -18px rgba(42, 33, 27, 0.25);
  transform-origin: 50% 100%;
}
.js [data-tilt] { transform: perspective(1400px) rotateX(calc((1 - var(--in, 1)) * 18deg)) scale(calc(0.9 + 0.1 * var(--in, 1))); }
.plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) sepia(0.07); transform: scale(calc(1.12 - 0.12 * var(--in, 1))); }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(251, 237, 208, 0.12), transparent 40%, rgba(42, 33, 27, 0.28)); }
.plate-chip {
  position: absolute; left: clamp(0.75rem, 3vw, 1.75rem); top: clamp(0.75rem, 3vw, 1.75rem); z-index: 2;
  display: flex; align-items: center; gap: 0.75rem; max-width: 21rem;
  padding: 0.55rem 1rem 0.55rem 0.55rem; border-radius: 16px;
  background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-float);
  font-size: 0.86rem; line-height: 1.35; color: var(--color-ink-soft);
  animation: bob 7s ease-in-out infinite;
}
.plate-chip b { font-size: 1.35rem; color: var(--color-ink); letter-spacing: -0.02em; }
.facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: -3.25rem clamp(0.75rem, 3vw, 2.5rem) 0; }
.fact { padding: 1.1rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px; box-shadow: var(--shadow-float); }
.fact b { display: block; font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--tone-deep); }
.fact > span { display: block; margin-top: 0.25rem; font-size: 0.86rem; line-height: 1.4; color: var(--color-muted); }

/* ---- Band in Rinde (Privatpraxis, Unterseiten-Bänder) ---- */
.band, .band-dark {
  width: min(var(--measure), 100% - var(--pad-x) * 2); margin-inline: auto;
  border-radius: 32px; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
.band-bark, .band-dark {
  color: var(--on-bark);
  background:
    radial-gradient(60rem 30rem at 90% -10%, rgba(217, 150, 42, 0.18), transparent 60%),
    radial-gradient(40rem 26rem at -5% 110%, rgba(181, 100, 60, 0.28), transparent 60%),
    var(--color-bark-deep);
}
.band-bark h2, .band-bark h3, .band-dark h2, .band-dark h3 { color: var(--cream); }
.band-bark p, .band-dark p { color: var(--on-bark-soft); }
.band-dark .hl, .hl-sun { color: var(--color-sun); }
.band-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.band-grid h2 { margin: 1rem 0 1.4rem; }

/* Uhr */
.clock-wrap { display: grid; justify-items: center; gap: 1.5rem; }
.clock { width: min(100%, 360px); height: auto; overflow: visible; }
.clock-face { fill: rgba(251, 248, 243, 0.04); stroke: rgba(251, 248, 243, 0.12); stroke-width: 1.5; }
.clock-ticks line { stroke: rgba(251, 248, 243, 0.24); stroke-width: 2; stroke-linecap: round; }
.clock-ticks line.major { stroke: rgba(251, 248, 243, 0.55); stroke-width: 3.5; }
.clock-track { fill: none; stroke: rgba(251, 248, 243, 0.07); stroke-width: 20; }
.clock-track--in { stroke-width: 14; }
.clock-arc { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 160px 160px; transition: opacity var(--t-base) var(--e); }
.clock-arc--ak { stroke: url(#clock-grad); stroke-width: 20; stroke-dasharray: 30 60; }
.clock-arc--range { stroke: var(--color-sun); stroke-width: 20; stroke-dasharray: 30 60; stroke-dashoffset: -30; opacity: 0.4; }
.clock-dot circle:first-child { fill: var(--color-sun); opacity: 0.28; }
.clock-dot circle:last-child { fill: var(--color-sun); }
.clock-dot { transition: opacity var(--t-base); }
.clock-num { font-family: var(--font-sans); font-size: 64px; font-weight: 700; letter-spacing: -2px; fill: var(--cream); font-variant-numeric: tabular-nums; }
.clock-unit { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.4px; fill: var(--on-bark-soft); }
.clock-legend { list-style: none; margin: 0; padding: 0; width: min(100%, 360px); display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.clock-legend li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.1rem 0.55rem;
  padding: 0.95rem 1.05rem; border-radius: 16px;
  background: rgba(251, 248, 243, 0.04); border: 1px solid var(--on-bark-line);
  transition: background-color var(--t-base) var(--e), border-color var(--t-base) var(--e), opacity var(--t-base);
}
.clock-legend li:hover { background: rgba(251, 248, 243, 0.08); }
.clock-legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.clock-legend .is-ak .sw { background: linear-gradient(135deg, var(--color-sun), var(--color-clay)); }
.cl-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-bark-soft); }
.clock-legend b { grid-column: 1 / -1; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cream); }
.clock-legend .is-ak { border-color: rgba(217, 150, 42, 0.45); background: rgba(217, 150, 42, 0.08); }
.cl-note { grid-column: 1 / -1; font-size: 0.84rem; color: var(--on-bark-soft); }

/* ==========================================================================
   Ablauf – Scroll-Geschichte mit Figur
   ========================================================================== */
.journey { position: relative; padding: var(--sec-y) 0; }
.journey-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; width: 100%; }
.journey-copy h2 { margin-top: 1rem; }
.steps-wrap { position: relative; margin-top: 1.75rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; position: relative; }
.step {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 0.8rem 1rem 0.8rem 0.8rem; border-radius: 18px;
  transition: background-color var(--t-base) var(--e), box-shadow var(--t-base) var(--e), opacity var(--t-base) var(--e);
}
.step-n { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color var(--t-base), color var(--t-base), scale var(--t-slow) var(--e-spring); }
.step h3 { font-size: 1.1rem; padding-top: 0.6rem; }
.step p { font-size: 0.95rem; margin-top: 0.3rem; }
.journey-rail { position: absolute; left: calc(0.8rem + 21px); top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 3px; background: var(--color-line); display: none; }
.journey-rail span { display: block; height: 100%; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, var(--color-sun), var(--color-clay), var(--color-moss)); }
.journey-stage { position: relative; }
.stage-svg { display: block; width: 100%; height: auto; overflow: visible; }
.stage-sun { fill: var(--stage-tone, var(--color-sun-soft)); transition: fill 0.7s var(--e); }
.journey-stage[data-tone="sky"] { --stage-tone: var(--color-sky-soft); }
.journey-stage[data-tone="berry"] { --stage-tone: var(--color-berry-soft); }
.journey-stage[data-tone="clay"] { --stage-tone: var(--color-clay-soft); }
.journey-stage[data-tone="moss"] { --stage-tone: var(--color-moss-soft); }
.stage-shadow { fill: rgba(42, 33, 27, 0.08); }
.prop { opacity: 0; }
.prop-lines path { fill: none; stroke: var(--color-moss); stroke-width: 6; stroke-linecap: round; }
.prop-bank rect { fill: var(--color-sand-deep); stroke: var(--color-bark); stroke-width: 5; }
.prop-bank path { fill: none; stroke: var(--color-bark); stroke-width: 7; stroke-linecap: round; }
.prop-marker circle { fill: var(--color-surface); stroke: var(--color-sky); stroke-width: 3.5; }
.prop-marker path { fill: none; stroke: var(--color-sky); stroke-width: 3; stroke-dasharray: 5 7; stroke-linecap: round; }
.prop-handy rect { fill: var(--color-surface); stroke: var(--color-bark); stroke-width: 5; }
.prop-handy .handy-bar { fill: none; stroke: var(--color-line-strong); stroke-width: 4; stroke-linecap: round; }
.prop-handy .handy-ok { fill: var(--color-moss-soft); stroke: var(--color-moss); stroke-width: 3; }
.prop-handy .handy-tick { fill: none; stroke: var(--color-moss); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.stage-chips { position: absolute; left: 0; right: 0; top: 2%; display: grid; justify-items: center; pointer-events: none; }
.stage-chips .badge {
  grid-area: 1 / 1; font-size: 0.9rem; padding: 0.4rem 0.95rem 0.4rem 0.7rem; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(14px) scale(0.9);
  transition: opacity var(--t-base) var(--e), transform var(--t-slow) var(--e-spring);
}
.stage-chips .badge .pk { width: 18px; height: 18px; }
.stage-chips .badge.is-on { opacity: 1; transform: none; }

/* Mit Skript: die Liste wird zur angehefteten Geschichte */
.js .journey { height: calc(100vh + 4 * 75vh); padding: 0; }
.js .journey-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-start; overflow: clip; }
/* oben ausgerichtet: Abstand zur Privatpraxis bleibt gleich, egal wie hoch der Bildschirm ist */
.js .journey-grid { padding-top: calc(var(--nav-h) + clamp(0.5rem, 3vh, 2rem)); }
#privatpraxis { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.js .journey-rail { display: block; }
.js .step { opacity: 0.55; }
.js .step.is-active { opacity: 1; background: var(--color-surface); box-shadow: var(--shadow-card); }
.js .step.is-active .step-n { background: var(--tone); color: #FFF; scale: 1.06; }
.js .step p { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-slow) var(--e), margin var(--t-base) var(--e), opacity var(--t-base) var(--e); }
.js .step.is-active p { max-height: 7rem; margin-top: 0.3rem; opacity: 1; }
.js .step h3 { padding-top: 0.6rem; }

/* ==========================================================================
   Reha-App – Handy mit Live-Demo
   ========================================================================== */
.sec-app { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-sand) 22%, var(--color-sand) 78%, var(--color-bg) 100%); overflow: clip; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.app-copy h2 { margin-top: 1rem; }
.app-copy .lede { margin-top: 1.25rem; font-size: 1.1rem; }
.features { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.features li { display: grid; grid-template-columns: auto 1fr; gap: 0.95rem; align-items: start; }
.features h3 { font-size: 1.05rem; padding-top: 0.15rem; }
.features p { font-size: 0.95rem; margin-top: 0.15rem; }
.trust { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trust li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.38rem 0.8rem; border-radius: var(--r-pill);
  background: var(--color-surface); border: 1px solid var(--color-line);
  font-size: 0.82rem; font-weight: 600; color: var(--color-ink-soft);
}
.trust .pk { width: 16px; height: 16px; color: var(--color-moss); }

.app-stage { position: relative; display: grid; justify-items: center; align-content: center; gap: 1.25rem; min-height: 700px; perspective: 1700px; }
.phone-3d {
  transform: rotateY(calc(var(--ry, 0) * 1deg)) rotateX(calc(var(--rx, 0) * 1deg)) translateY(calc(var(--py, 0) * 1px));
  transition: transform 0.25s var(--e);
  will-change: transform;
}
.phone {
  --phone-w: 300px; --phone-h: 620px; --bezel: 11px;
  position: relative; width: var(--phone-w); height: var(--phone-h);
  padding: var(--bezel); border-radius: 50px;
  background: linear-gradient(150deg, #4A3A2F, #1F1813 55%, #2E231C);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1), inset 0 0 0 5px #120D0A,
              0 70px 100px -48px rgba(42, 33, 27, 0.6), 0 30px 50px -34px rgba(42, 33, 27, 0.5);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #2E231C; }
.phone::before { right: -3px; top: 150px; height: 70px; }
.phone::after { left: -3px; top: 120px; height: 44px; box-shadow: 0 60px 0 #2E231C; }
.phone-screen {
  --screen-w: calc(var(--phone-w) - 2 * var(--bezel));
  --screen-h: calc(var(--phone-h) - 2 * var(--bezel));
  --ap-s: calc(278 / 390);
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 40px; background: var(--color-bg);
}
.demo-hint { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; font-weight: 600; color: var(--color-muted); }
.demo-hint .pk { width: 17px; height: 17px; color: var(--color-sun-deep); }
.app-chip {
  position: absolute; top: var(--y); z-index: 3; white-space: nowrap;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.95rem 0.55rem 0.55rem; border-radius: 16px;
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-float);
  font-size: 0.82rem; line-height: 1.3; pointer-events: none;
  animation: bob 7s ease-in-out infinite;
}
.app-chip:nth-child(2) { animation-delay: -2s; }
.app-chip:nth-child(3) { animation-delay: -4.5s; }
.app-chip:nth-child(4) { animation-delay: -1s; }
.app-chip b { display: block; font-size: 0.86rem; color: var(--color-ink); }
.app-chip small { color: var(--color-muted); font-size: 0.76rem; }
.app-chip[data-app-chip="-1"] { --dir: -1; left: max(-2rem, calc(50% - 300px)); }
.app-chip[data-app-chip="1"] { --dir: 1; right: max(-2rem, calc(50% - 310px)); }
.js .app-chip {
  transform: translate3d(calc(var(--dir, 1) * ((1 - var(--in, 1)) * 150px + var(--out, 0) * 170px)), 0, 0) rotate(calc(var(--dir, 1) * ((1 - var(--in, 1)) * 12deg + var(--out, 0) * 8deg)));
  opacity: calc(var(--in, 1) * (1 - var(--out, 0)));
}

/* Die App im Handy: in echter Breite (390 px) gebaut und heruntergerechnet */
.ap {
  position: absolute; left: 0; top: 0;
  width: 390px; height: calc(var(--screen-h) / var(--ap-s));
  transform: scale(var(--ap-s)); transform-origin: 0 0;
  display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-ink);
  font-size: 15px; line-height: 1.45; text-align: left;
}
.ap button { font: inherit; color: inherit; }
.ap .pk { width: 18px; height: 18px; }
.ap-status { position: relative; flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0; font-size: 15px; font-weight: 600; }
.ap-notch { position: absolute; left: 50%; top: 12px; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #16100C; }
.ap-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ap-sig i { display: block; width: 4px; border-radius: 1px; background: var(--color-ink); }
.ap-sig i:nth-child(1) { height: 5px; } .ap-sig i:nth-child(2) { height: 8px; } .ap-sig i:nth-child(3) { height: 11px; }
.ap-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; }
.ap-brand { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.ap-brand .brand-tile { width: 36px; height: 36px; border-radius: 10px; }
.ap-brand .brand-tile svg { width: 30px; height: 30px; }
.ap-brand b { display: block; font-size: 15px; font-weight: 600; }
.ap-brand small { display: block; font-size: 12px; color: var(--color-muted); }
.ap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--color-muted); }
.ap-pill .pk { width: 14px; height: 14px; }
.ap-main { position: relative; flex: 1; overflow: hidden; }
.ap-screen {
  position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 104px;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity var(--t-base) var(--e), transform var(--t-slow) var(--e);
}
.ap-screen::-webkit-scrollbar { display: none; }
.ap-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ap-screen.is-before { transform: translateX(-28px); }
.ap-hello {
  position: relative; overflow: hidden; flex: none;
  min-height: 96px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--color-line);
  background: linear-gradient(to bottom right, var(--color-sun-soft), var(--color-surface), var(--color-clay-soft));
}
.ap-hello-text { position: relative; z-index: 1; max-width: 74%; }
.ap-date { font-size: 12px; font-weight: 500; color: var(--color-muted); }
.ap-h1 { margin: 2px 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); }
.ap-hello .badge { font-size: 12px; padding: 2px 10px; }
.ap-hello .badge .pk { width: 13px; height: 13px; }
.ap-illu { position: absolute; right: -4px; bottom: 0; width: 28%; max-width: 136px; height: 100%; }
.ap-card { flex: none; padding: 20px; border-radius: 16px; border: 1px solid var(--color-line); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ap-mood { padding: 12px 16px; }
.ap-legend { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.ap-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.ap-mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px; border-radius: 10px; border: 1px solid var(--color-line); background: none;
  font-size: 11px !important; line-height: 1.2; color: var(--color-ink-soft) !important; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), scale var(--t-base) var(--e-spring);
}
.ap-mood-btn .pk { width: 30px; height: 30px; color: var(--color-bark); }
.ap-mood-btn:hover { background: var(--color-sand); }
.ap-mood-btn:active { scale: 0.95; }
.ap-mood-btn[aria-pressed="true"] { border-color: var(--color-bark); background: var(--color-bark-soft); font-weight: 600; color: var(--color-ink) !important; }
.ap-row { display: flex; align-items: center; gap: 12px; }
.ap-row-between { justify-content: space-between; }
.ap-h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.ap-h3 { font-size: 14px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.ap-muted { font-size: 14px; color: var(--color-muted); }
.ap-progress { margin-top: 16px; }
.ap-progress p { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.ap-done { display: inline-flex; align-items: center; gap: 6px; color: var(--color-moss); font-weight: 500; }
.ap-progress .bar { margin-top: 8px; }
.ap-actions { display: flex; gap: 8px; margin-top: 16px; }
.ap-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border: 0; border-radius: 10px; font-size: 14px !important; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast); }
.ap-btn-sand { background: var(--color-sand); color: var(--color-ink) !important; }
.ap-btn-sand:hover { background: var(--color-sand-deep); }
.ap-btn-berry { background: var(--color-berry); color: #FFF !important; }
.ap-wide { flex: none; width: 100%; }
.ap-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 14px !important; font-weight: 600; color: var(--tone-deep) !important; cursor: pointer; }
.ap-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ap-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--color-line); font-size: 14px; }
.ap-list li:first-child { border-top: 0; }
.ap-list b { font-weight: 500; color: var(--color-ink); }
.ap-list .ap-muted { font-size: 13px; }
.ap-val { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 6px; border-radius: 8px; background: var(--color-sand); font-size: 13px; font-weight: 600; color: var(--color-ink); }
.ap-pagehead { display: flex; align-items: center; gap: 12px; flex: none; }
.ap-pagehead .ap-h1 { margin: 0; font-size: 22px; }
.ap-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; flex: none; }
.ap-week span { padding: 8px 0; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-surface); text-align: center; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.ap-week .is-train { background: var(--color-clay-soft); border-color: transparent; color: var(--color-clay-deep); }
.ap-week .is-today { box-shadow: inset 0 0 0 2px var(--color-clay); color: var(--color-ink); }
.ap-group { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.ap-group:first-child { margin-top: 0; }
.ap-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-checks button {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-surface);
  cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast);
}
.ap-checks button:hover { border-color: var(--color-line-strong); }
.ap-checks b { display: block; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.ap-checks small { display: block; font-size: 12px; color: var(--color-muted); }
.ap-box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--color-line-strong); transition: background-color var(--t-fast), border-color var(--t-fast); }
.ap-box::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2.5px solid #FFF; border-bottom: 2.5px solid #FFF; transform: rotate(-45deg) scale(0); transition: transform var(--t-base) var(--e-spring); }
.ap-checks [aria-pressed="true"] { background: var(--color-moss-soft); border-color: transparent; }
.ap-checks [aria-pressed="true"] .ap-box { background: var(--color-moss); border-color: var(--color-moss); }
.ap-checks [aria-pressed="true"] .ap-box::after { transform: rotate(-45deg) scale(1); }
.ap-checks-sun [aria-pressed="true"] { background: var(--color-sun-soft); }
.ap-checks-sun [aria-pressed="true"] .ap-box { background: var(--color-sun-deep); border-color: var(--color-sun-deep); }
.ap-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ap-grid path { stroke: var(--color-chart-grid); stroke-width: 1; }
.ap-axis text { font-family: var(--font-sans); font-size: 10px; fill: var(--color-muted); text-anchor: end; }
.ap-line { fill: none; stroke: var(--color-chart-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 0; }
.ap-dots circle { fill: var(--color-surface); stroke: var(--color-chart-2); stroke-width: 2.5; }
.ap-screen[data-screen="tagebuch"].is-active .ap-line { animation: draw-line 1.2s var(--e) both; }
@keyframes draw-line { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.ap-note { font-size: 13px; color: var(--color-muted); text-align: center; }
.ap-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-articles li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--color-line); background: var(--color-surface); box-shadow: var(--shadow-card); font-size: 15px; font-weight: 600; }
.ap-articles li > span:nth-child(2) { flex: 1; }
.ap-articles li > .pk { color: var(--color-muted); }
.ap-plain p { display: flex; flex-direction: column; margin: 0; padding: 10px 0; border-top: 1px solid var(--color-line); font-size: 14px; }
.ap-plain p:first-child { padding-top: 0; border-top: 0; }
.ap-plain b { font-weight: 600; color: var(--color-ink); }
.ap-plain span { font-size: 13px; color: var(--color-muted); }
.ap-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 8px 0 26px; border-top: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.97);
}
.ap-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 11px !important; font-weight: 600; color: var(--color-muted) !important; cursor: pointer; transition: color var(--t-fast); }
.ap-nav button:hover { color: var(--color-ink-soft) !important; }
.ap-nav-ico { display: grid; place-items: center; width: 48px; height: 32px; border-radius: var(--r-pill); transition: background-color var(--t-base); }
.ap-nav .pk { width: 22px; height: 22px; }
.ap-nav .is-active { color: var(--tone-deep) !important; }
.ap-nav .is-active .ap-nav-ico { background: var(--tone-soft); }
.ap-nav .is-active .pk { stroke-width: 2.3; }

/* ==========================================================================
   Rezensionen (statisch, kein Widget)
   ========================================================================== */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.review {
  margin: 0; display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1.5rem; border-radius: var(--r-card);
  background: var(--color-surface); border: 1px dashed var(--color-line-strong);
}
.review-stars { color: var(--color-sun); letter-spacing: 0.1em; line-height: 1; }
.review blockquote { margin: 0; }
.review blockquote p { color: var(--color-ink); }
.review figcaption { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline; }
.review-name { font-size: 0.88rem; font-weight: 600; color: var(--color-ink-soft); }
.review-src { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.review-foot { margin-top: 1.25rem; }
.disclaimer { font-size: 0.82rem; color: var(--color-muted); }
.disclaimer + .disclaimer { margin-top: 0.5rem; }
.placeholder {
  padding: 0.08rem 0.45rem; border-radius: 6px;
  background: var(--color-sand); border: 1px dashed var(--color-line-strong);
  font-size: 0.88em; color: var(--color-ink-soft);
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.sec-contact { background: var(--color-sand); border-radius: 44px 44px 0 0; }
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-copy h2 { margin-top: 1rem; }
.contact-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.9rem; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); }
.contact-list strong { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.contact-list div > span { display: block; font-size: 0.95rem; line-height: 1.45; color: var(--color-ink); }
.contact-list a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
.contact-list a:hover { color: var(--color-clay-deep); text-decoration-color: currentColor; }
.contact-note { margin-top: 0.9rem; font-size: 0.86rem; color: var(--color-muted); }

.map { position: relative; margin-top: 1rem; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--color-line); background: var(--color-surface); aspect-ratio: 16 / 9; min-height: 240px; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-bg { fill: #F1E8DA; }
.map-park { fill: var(--color-moss-soft); }
.map-road { fill: none; stroke: #FFFCF7; stroke-width: 11; stroke-linecap: round; }
.map-road--main { stroke: #FFF5E6; stroke-width: 18; }
.map-road--thin { stroke-width: 5; }
.map-pin path { fill: var(--color-clay); stroke: #FFF; stroke-width: 3; }
.map-pin-dot { fill: #FFF; }
.map-pulse { fill: var(--color-clay); transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.map-consent {
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  padding: 0.8rem 0.95rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-float); font-size: 0.84rem;
}
.map-consent p { color: var(--color-ink-soft); }
.map-consent b { color: var(--color-ink); }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.65rem; }
.map-ext { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.86rem; }
.map-ext .pk { width: 16px; height: 16px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded .map-art, .map.is-loaded .map-consent { display: none; }

.form {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-card);
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-lift);
}
.form-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.2rem; }
.form-head h3 { font-size: 1.25rem; }
.form-head p { font-size: 0.9rem; color: var(--color-muted); }
.form h3 { margin: 0; }
.form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--color-ink-soft); }
.form .label-text { display: block; }
.form .req { color: var(--color-clay); }
.form input, .form textarea {
  font: inherit; font-size: 1rem; font-weight: 400; min-height: 48px;
  padding: 0.7rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink);
  transition: border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--color-muted); }
.form input:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--color-clay); box-shadow: 0 0 0 3px var(--color-clay-soft); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.field-error { margin-top: -0.45rem; font-size: 0.8rem; font-weight: 500; color: var(--color-danger); }
.field-error:empty { display: none; }
.form > .btn { width: 100%; }
.form-status { font-size: 0.88rem; font-weight: 600; color: var(--color-moss); }
.form-status:empty { display: none; }
.form-fine { font-size: 0.78rem; line-height: 1.5; color: var(--color-muted); }

/* ==========================================================================
   Footer – Hügel in der Dämmerung
   ========================================================================== */
.site-footer { position: relative; background: var(--color-bark-deep); color: var(--on-bark-soft); padding-bottom: 2rem; }
.footer-hills { display: block; width: 100%; height: var(--hills-h); margin-top: calc(-1 * var(--hills-h) + 1px); }
.fh-1 { fill: #6B4C38; }
.fh-2 { fill: var(--color-bark-deep); }
.footer-inner { max-width: var(--measure); margin: 0 auto; padding: 1.25rem var(--pad-x) 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2rem; }
.brand-on .brand-tile { background: #F3EBDF; color: var(--color-bark); }
.brand-on .brand-text b { color: var(--cream); }
.brand-on .brand-text small { color: var(--on-bark-soft); }
.site-footer p { font-size: 0.92rem; color: var(--on-bark-soft); }
.footer-brand p { margin-top: 1rem; }
.site-footer a:not(.brand) { color: var(--cream); }
.site-footer a:not(.brand):hover { color: var(--color-sun); }
.footer-h { margin-bottom: 0.5rem; font-size: 0.74rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sun) !important; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.95rem; }
.footer-app p:last-child { margin-top: 0.8rem; }
.footer-login { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: 12px; background: rgba(243, 235, 223, 0.08); border: 1px solid var(--on-bark-line); font-weight: 600; }
.footer-login .pk { width: 18px; height: 18px; color: var(--color-sun); }
.footer-meta { margin-top: 2.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--on-bark-line); font-size: 0.8rem !important; color: rgba(243, 235, 223, 0.55) !important; }
/* Unterseiten nutzen noch die schlichte Fußzeile (footer-inner mit Logo als Bild) */
.footer-logo { display: none; }
.footer-tagline { font-size: 0.74rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sun) !important; }

/* ==========================================================================
   Schnellkontakt
   ========================================================================== */
.quick-contact { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 70; }
.quick-contact-toggle {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--color-clay); color: #FFF7F0;
  box-shadow: 0 18px 36px -14px rgba(150, 80, 46, 0.65);
  transition: background-color var(--t-base) var(--e), translate var(--t-base) var(--e-spring), rotate var(--t-slow) var(--e-spring);
}
.quick-contact-toggle:hover { background: var(--color-clay-deep); translate: 0 -2px; rotate: -6deg; }
.quick-contact-toggle .pk { width: 26px; height: 26px; }
.quick-contact-toggle .icon-close { display: none; }
.quick-contact.open .quick-contact-toggle { background: var(--color-bark); rotate: 0deg; }
.quick-contact.open .icon-chat { display: none; }
.quick-contact.open .icon-close { display: block; }
.quick-contact-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: min(360px, calc(100vw - 2.5rem)); padding: 1.25rem;
  border-radius: var(--r-card); background: var(--color-surface); border: 1px solid var(--color-line);
  box-shadow: 0 34px 70px -24px rgba(42, 33, 27, 0.45);
  opacity: 0; translate: 0 14px; scale: 0.96; transform-origin: 100% 100%; pointer-events: none;
  transition: opacity var(--t-base) var(--e), translate var(--t-base) var(--e), scale var(--t-base) var(--e), visibility 0s var(--t-base);
  visibility: hidden;
}
.quick-contact-panel[hidden] { display: block; }
.quick-contact.open .quick-contact-panel { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; visibility: visible; transition: opacity var(--t-base) var(--e), translate var(--t-base) var(--e-spring), scale var(--t-base) var(--e-spring); }
.quick-contact-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.quick-contact-head h3 { font-size: 1.05rem; }
.quick-contact-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--color-line); background: none; color: var(--color-muted); cursor: pointer; }
.quick-contact-close:hover { color: var(--color-ink); background: var(--color-sand); }
.quick-contact-close .pk { width: 18px; height: 18px; }
.quick-contact-form.form { padding: 0; border: 0; box-shadow: none; background: none; }

/* ==========================================================================
   Unterseiten
   ========================================================================== */
.page-head { position: relative; z-index: 0; padding: clamp(1rem, 3vw, 2rem) 0 clamp(1rem, 3vw, 2rem); }
.page-head .wrap {
  position: relative; overflow: hidden;
  padding-top: clamp(2.25rem, 6vw, 4.5rem); padding-bottom: clamp(2.25rem, 6vw, 4.5rem);
  padding-inline: calc(var(--pad-x) + clamp(1.25rem, 4vw, 3.5rem));
}
.page-head .wrap::before {
  content: ""; position: absolute; inset: 0 var(--pad-x); z-index: -1;
  border-radius: var(--r-xl); border: 1px solid var(--color-line);
  background: linear-gradient(to bottom right, var(--head-a, var(--color-sun-soft)), var(--color-surface) 55%, var(--head-b, var(--color-clay-soft)));
}
.page-head[data-tone="sky"] { --head-a: var(--color-sky-soft); --head-b: var(--color-sand); }
.page-head[data-tone="berry"] { --head-a: var(--color-berry-soft); --head-b: var(--color-sand); }
.page-head[data-tone="moss"] { --head-a: var(--color-moss-soft); --head-b: var(--color-sun-soft); }
.page-head[data-tone="clay"] { --head-a: var(--color-clay-soft); --head-b: var(--color-sun-soft); }
.page-head h1 { position: relative; z-index: 1; max-width: 20ch; margin-top: 1.1rem; font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.page-head .lede { position: relative; z-index: 1; margin-top: 1.1rem; max-width: 40ch; }
.page-head .tag { position: relative; z-index: 1; }
.page-art { position: absolute; right: calc(var(--pad-x) + 1px); bottom: 0; width: min(34%, 360px); height: 88%; pointer-events: none; z-index: 0; }
.page-art .figur { --fig-w: 9; }
.rule { height: 1px; max-width: calc(var(--measure) - 2 * var(--pad-x)); margin: 0 auto; background: var(--color-line); display: none; }

.hero-plate { position: relative; z-index: 2; max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-x); }
.hero-plate .plate { aspect-ratio: 21 / 9; }
.ph { width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.float-chip {
  position: absolute; right: calc(var(--pad-x) + 1.5rem); bottom: -1.5rem; z-index: 3;
  display: flex; align-items: baseline; gap: 0.6rem; padding: 0.9rem 1.2rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px; box-shadow: var(--shadow-float);
  animation: bob 7s ease-in-out infinite;
}
.float-chip b { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-clay-deep); }
.float-chip span { max-width: 10rem; font-size: 0.82rem; line-height: 1.35; color: var(--color-muted); }

.story { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.story h2 { position: sticky; top: calc(var(--nav-h) + 2rem); }
.story .body p { font-size: 1.06rem; line-height: 1.72; }
.story .body p:first-child::first-letter { float: left; padding: 0.1em 0.12em 0 0; font-size: 3.5rem; font-weight: 700; line-height: 0.85; color: var(--color-clay); }

.band-dark .head { max-width: none; }
.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.compare-row {
  display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.3rem; border-radius: 18px;
  background: rgba(251, 248, 243, 0.05); border: 1px solid var(--on-bark-line);
  transition: translate var(--t-base) var(--e-spring), background-color var(--t-fast), border-color var(--t-fast);
}
.compare-row:hover { translate: 0 -3px; background: rgba(217, 150, 42, 0.08); border-color: rgba(217, 150, 42, 0.4); }
.compare-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sun); }
.compare-note { font-size: 0.95rem; color: var(--on-bark) !important; }
.compare-num { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--cream); }
.compare-unit { margin-left: 0.4rem; font-size: 0.95rem; font-weight: 500; opacity: 0.75; }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.principle {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: translate var(--t-slow) var(--e-spring), box-shadow var(--t-base);
}
.principle:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }
.principle .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-clay-soft); color: var(--color-clay-deep); font-weight: 700; font-size: 0.9rem; }
.principle:nth-child(4n + 2) .n { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.principle:nth-child(4n + 3) .n { background: var(--color-moss-soft); color: var(--color-moss); }
.principle:nth-child(4n + 4) .n { background: var(--color-sun-soft); color: var(--color-sun-deep); }
.principle h3 { font-size: 1.08rem; margin-top: 0.3rem; }
.principle p { font-size: 0.92rem; }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 3rem; }
.specs li { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.specs .k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.specs .v { color: var(--color-ink); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.card {
  display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: translate var(--t-slow) var(--e-spring), box-shadow var(--t-base);
}
.card:hover { translate: 0 -5px; box-shadow: var(--shadow-lift); }
.card p { font-size: 0.95rem; }
.card ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card li { padding: 0.28rem 0.7rem; border-radius: var(--r-pill); background: var(--color-sand); color: var(--color-ink-soft); font-size: 0.78rem; font-weight: 600; }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { margin-top: 0.75rem; max-width: 40ch; }
.cta-band .btn-a, .band-dark .btn-a { background: var(--color-sun); color: #2A211B; }
.cta-band .btn-a:hover, .band-dark .btn-a:hover { background: #E8AE45; color: #2A211B; }
.band-dark .btn-a .btn-icon { background: rgba(42, 33, 27, 0.1); }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.post {
  --tone: var(--color-clay); --tone-deep: var(--color-clay-deep); --tone-soft: var(--color-clay-soft);
  position: relative; display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: translate var(--t-slow) var(--e-spring), box-shadow var(--t-base), border-color var(--t-base);
}
a.post, a.post:hover { color: var(--color-ink); }
.post:hover { translate: 0 -5px; box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--tone) 35%, transparent); }
.post h3 { font-size: 1.15rem; transition: color var(--t-fast); }
a.post:hover h3, a.post:hover h2 { color: var(--tone-deep); }
.post p { font-size: 0.94rem; }
.post-kicker {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.7rem; border-radius: var(--r-pill);
  background: var(--tone-soft); color: var(--tone-deep) !important; font-size: 0.78rem; font-weight: 700;
}
.post-meta { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.78rem; color: var(--color-muted); }
.post--lead {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: end;
  padding: clamp(1.75rem, 4vw, 2.8rem);
  background: linear-gradient(to bottom right, var(--color-sun-soft), var(--color-surface) 60%, var(--color-clay-soft));
}
.post--lead h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 0.75rem; }
.post[data-tone="sun"], .post--lead { --tone: var(--color-sun); --tone-deep: var(--color-sun-deep); --tone-soft: var(--color-sun-soft); }
.post[data-tone="berry"] { --tone: var(--color-berry); --tone-deep: var(--color-berry-deep); --tone-soft: var(--color-berry-soft); }
.post[data-tone="sky"] { --tone: var(--color-sky); --tone-deep: var(--color-sky-deep); --tone-soft: var(--color-sky-soft); }
.post[data-tone="moss"] { --tone: var(--color-moss); --tone-deep: var(--color-moss); --tone-soft: var(--color-moss-soft); }
.note { margin-top: 2rem; padding: 1.25rem; border-radius: 16px; background: var(--color-sand); font-size: 0.88rem; color: var(--color-muted); }
.note strong { color: var(--color-ink-soft); }

/* Artikel */
.article { max-width: 46rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--pad-x) 6rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.article-meta span:first-child { color: var(--color-clay-deep); }
.article-lede { margin-top: 1.25rem; font-size: 1.18rem; line-height: 1.62; color: var(--color-ink); }
.article-body { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.article-body h2 { margin: clamp(2.2rem, 4vw, 3rem) 0 0.9rem; font-size: 1.45rem; }
.article-body h2::before { content: ""; display: block; width: 36px; height: 5px; margin-bottom: 0.9rem; border-radius: 5px; background: linear-gradient(90deg, var(--color-clay), var(--color-sun)); }
.article-body h3 { margin: 2rem 0 0.6rem; font-size: 1.1rem; }
.article-body p { font-size: 1.06rem; line-height: 1.78; }
.article-body ul { margin: 1rem 0 0; padding-left: 1.15rem; }
.article-body li { margin-bottom: 0.45rem; font-size: 1.03rem; line-height: 1.7; color: var(--color-ink-soft); }
.article-body li::marker { color: var(--color-clay); }
.article-body ul + p, .article-body p + h2 { margin-top: 1.25rem; }
.article-outro { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--color-sand); font-size: 0.9rem; color: var(--color-muted); }
.article-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.faq { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.faq details { padding: 1rem 1.2rem; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--color-ink); }
.faq summary::marker { color: var(--color-clay); }
.faq details[open] summary { margin-bottom: 0.6rem; }
.faq p { font-size: 0.98rem; }

/* Rechtstexte */
.legal { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-x) calc(var(--hills-h) + var(--foot-gap)); }
.legal h1 { margin-bottom: 1.25rem; font-size: clamp(2rem, 4vw, 2.7rem); }
.legal h2 { margin: 2.6rem 0 0.7rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--color-ink-soft); }
.legal code { padding: 0.05rem 0.35rem; border-radius: 5px; background: var(--color-sand); font-size: 0.9em; }
.legal-note { padding: 1rem 1.2rem; border-radius: 16px; background: var(--color-sun-soft); font-size: 0.9rem; color: var(--color-ink-soft); }
.legal-nav { display: flex; gap: 0.25rem; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; font-size: 0.9rem; font-weight: 600; color: var(--color-ink-soft); }

/* ==========================================================================
   Scroll-Bewegung: script.js setzt --in (0 → 1 beim Hereinkommen) und --out
   (0 → 1 beim Hinausscrollen). Ohne Skript gelten die Endwerte.
   ========================================================================== */
.js [data-fly] {
  transform:
    translate3d(calc(var(--fx, 0px) * (1 - var(--in, 1)) + var(--ox, 0px) * var(--out, 0)),
                calc(var(--fy, 0px) * (1 - var(--in, 1)) + var(--oy, 0px) * var(--out, 0)), 0)
    rotate(calc(var(--fr, 0deg) * (1 - var(--in, 1)) + var(--or, 0deg) * var(--out, 0)))
    scale(calc(1 - (1 - var(--fs, 1)) * (1 - var(--in, 1))));
  opacity: calc((var(--f0, 0.15) + (1 - var(--f0, 0.15)) * var(--in, 1)) * (1 - var(--oo, 0) * var(--out, 0)));
}
[data-fly="left"] { --fx: -90px; --fy: 60px; --fr: -5deg; --ox: -70px; --or: -3deg; --oo: 0.55; }
[data-fly="right"] { --fx: 90px; --fy: 60px; --fr: 5deg; --ox: 70px; --or: 3deg; --oo: 0.55; }
[data-fly="up"] { --fy: 120px; --oy: -40px; --oo: 0.55; }
[data-fly="band"] { --fs: 0.9; --fy: 30px; --f0: 1; }

.js .reveal { opacity: 0; translate: 0 22px; transition: opacity var(--t-slow) var(--e), translate var(--t-slow) var(--e); }
.js .reveal.in { opacity: 1; translate: 0 0; }
.js .stagger > * { opacity: 0; translate: 0 26px; transition: opacity var(--t-slow) var(--e), translate var(--t-slow) var(--e-spring); transition-delay: calc(var(--i, 0) * 90ms); }
.js .stagger.in > * { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Piktogramm-Bewegung (pikto-motion.css) – Auslöser, die es nur hier gibt:
   ganze Karten und Listenzeilen beim Überfahren, das mobile Menü beim Öffnen,
   die Chips der Ablauf-Geschichte und der Seitenkopf in der App-Demo.
   Einblenden: script.js setzt kurz .pk-play (der Auslöser steht in pikto-motion.css).
   ========================================================================== */
:is(.pillar, .features li, .contact-list li, .trust li, .hero-trust li):hover use,
:is(.nav-links.open .nav-ico, .stage-chips .is-on, .ap-screen.is-active .ap-pagehead) use {
  animation: var(--pk-anim, none) var(--pk-dur, 0.85s) cubic-bezier(0.45, 0, 0.2, 1) var(--pk-delay, 0s) both;
}
.pk-play > * use { --pk-delay: calc(var(--i, 0) * 90ms + 150ms); }
.nav-links.open a:nth-child(1) .nav-ico use { --pk-delay: 120ms; }
.nav-links.open a:nth-child(2) .nav-ico use { --pk-delay: 170ms; }
.nav-links.open a:nth-child(3) .nav-ico use { --pk-delay: 220ms; }
.nav-links.open a:nth-child(4) .nav-ico use { --pk-delay: 270ms; }
.nav-links.open a:nth-child(5) .nav-ico use { --pk-delay: 320ms; }

/* Seitenwechsel ohne Neuaufbau-Flackern (Chrome/Edge/Safari) */
@view-transition { navigation: auto; }
.nav-wrap { view-transition-name: nav; }
::view-transition-old(root) { animation: 0.28s var(--e) both vt-out; }
::view-transition-new(root) { animation: 0.45s var(--e) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0.35rem;
    padding: calc(var(--nav-h) + 1rem) max(var(--pad-x), calc(50% - 15rem)) 2rem;
    background: var(--color-bg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-base) var(--e), visibility 0s linear var(--t-base);
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-base) var(--e), visibility 0s; }
  .nav-links a {
    min-height: 58px; padding: 0 0.75rem; gap: 0.9rem; font-size: 1.2rem; color: var(--color-ink) !important;
    opacity: 0; translate: 0 1.5rem;
    transition: translate var(--t-slow) var(--e-spring), opacity var(--t-base) var(--e), background-color var(--t-fast);
  }
  .nav-links.open a { opacity: 1; translate: 0 0; }
  .nav-links.open a:nth-child(2) { transition-delay: 40ms; }
  .nav-links.open a:nth-child(3) { transition-delay: 80ms; }
  .nav-links.open a:nth-child(4) { transition-delay: 120ms; }
  .nav-links.open a:nth-child(5) { transition-delay: 160ms; }
  .nav-links.open a:nth-child(6) { transition-delay: 200ms; }
  .nav-links.open a:nth-child(7) { transition-delay: 240ms; }
  .nav-ico { display: inline-grid; }
  .menu-open .quick-contact { display: none; }
  .nav-links .nav-login { margin-top: 0.75rem; border: 1px solid var(--color-line-strong); justify-content: center; font-size: 1.05rem; }
  .nav-links .nav-cta { margin: 0.4rem 0 0; justify-content: center; font-size: 1.05rem; color: #FFF7F0 !important; }
  html[data-tageszeit="nacht"] .page-home:not(.menu-open) .nav-wrap:not(.is-scrolled) .nav-links a:not(.nav-cta) { color: var(--color-ink) !important; }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .hero-scene { height: 60%; }
  .hero-copy { max-width: 31rem; }
  .hero-title { font-size: clamp(2.4rem, 4.4vw, 3.3rem); }
  .hero-chips .chip-a, .hero-chips .chip-c { display: none; }
}

@media (max-width: 960px) {
  .hero { min-height: auto; flex-direction: column; align-items: stretch; }
  .hero-inner { order: 1; padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: 0; }
  .hero-copy { max-width: 40rem; }
  .hero-scene { order: 2; position: relative; display: block; flex: none; height: min(100vw, 520px); margin-top: 0.5rem; }
  .hero-chips { display: none; }
  .daytime { top: auto; bottom: calc(min(100vw, 520px) - 3.5rem); }
  .head--split, .band-grid, .app-grid, .contact-grid, .story, .post--lead, .journey-grid { grid-template-columns: 1fr; }
  .pillars, .cards, .reviews { grid-template-columns: 1fr; }
  .pillar:nth-child(2) { margin-top: 0; }
  .facts { grid-template-columns: repeat(2, 1fr); margin-top: -2rem; }
  .plate { aspect-ratio: 4 / 3; }
  .story h2 { position: static; }
  .compare { grid-template-columns: 1fr; }
  .app-stage { min-height: 0; padding: 1rem 0 0; }
  .app-chip { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .page-art { display: none; }

  /* Geschichte: Bühne oben, aktiver Schritt darunter */
  .js .journey-grid { grid-template-rows: auto auto; gap: 0.5rem; padding-top: calc(var(--nav-h) + 0.5rem); }
  .js .journey-stage { order: -1; height: 42vh; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; }  /* Zeile fest, sonst greift height: 100% am SVG nicht */
  .js .stage-svg { height: 100%; width: auto; max-width: 100%; }
  .js .journey-copy h2 { font-size: 1.55rem; margin-top: 0.6rem; }
  .js .journey-copy .eyebrow { display: none; }
  .js .journey-rail { display: none; }
  .js .steps-wrap { min-height: 10.5rem; margin-top: 0.9rem; }
  .js .steps { display: block; }
  .js .step { position: absolute; inset: 0 0 auto 0; opacity: 0; translate: 0 12px; pointer-events: none; }
  .js .step.is-active { opacity: 1; translate: 0 0; pointer-events: auto; }
  .js .step p { max-height: none; opacity: 1; margin-top: 0.3rem; }
}

@media (max-width: 620px) {
  :root { --nav-h: 64px; }
  .brand-text small { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-trust { gap: 0.5rem 1rem; }
  .facts { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  .contact-list { grid-template-columns: 1fr; }
  .clock-legend { grid-template-columns: 1fr; }
  .phone { --phone-w: 270px; --phone-h: 558px; --bezel: 10px; border-radius: 44px; }
  .phone-screen { --ap-s: calc(250 / 390); border-radius: 35px; }
  .footer-top { grid-template-columns: 1fr; }
  .float-chip { position: static; margin-top: 1rem; }
  .map { aspect-ratio: auto; min-height: 300px; }
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
  }
  .js [data-fly], .js [data-tilt], .js .app-chip, .chip { transform: none !important; opacity: 1 !important; }
  .plate img { transform: none !important; }
  .js .reveal, .js .stagger > * { opacity: 1; translate: none; }
  @view-transition { navigation: none; }
}