/* Fonts: selbst gehostet, DSGVO-konform, kein CDN. Die woff2-Dateien liegen
   lokal unter vendor/fonts/ (wie vendor/gsap.min.js) und werden relativ
   referenziert - funktioniert auf Vercel wie auf der künftigen Kundendomain
   unverändert. */
/* Beide Dateien sind Variable Fonts und auf die tatsächlich benutzten Zeichen
   subsettet (erneuern: tools/schriften-subsetten.py).
   Instrument Sans lag vorher dreimal identisch als …-400-/500-/600- im Ordner -
   drei Deklarationen, drei Downloads, ein und dieselbe Datei. Jetzt eine
   Deklaration über die volle Gewichtsachse: gleiche Darstellung, ein Download. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(../vendor/fonts/fraunces-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(../vendor/fonts/instrument-sans-latin.woff2) format("woff2");
}

:root {
  --creme: #FAF5E9;
  --butter: #F6EBCB;
  --butter-tief: #F1DFA8;
  --weiss: #FFFDF6;
  --tinte: #35422F;
  --tinte-sanft: #58654E;
  --gruen: #5E7D55;
  --gruen-tief: #43603C;
  --blatt: #8CA97C;
  --sonne: #E9BE55;
  --sonne-hell: #F5DE9C;
  --gold-text: #7A611C;
  --linie: rgba(94, 125, 85, .20);
  --radius: 20px;
  --schatten: 0 10px 30px rgba(67, 96, 60, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Kein scroll-behavior:smooth - CSS-Smooth-Scroll und ScrollTrigger-Pins
   vertragen sich nicht (Pin hinkt nach, Scrub ruckelt und friert ein). */
body {
  font-family: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--creme);
  color: var(--tinte);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 560; line-height: 1.14; color: var(--tinte); }
h1 { font-size: clamp(2.4rem, 5.8vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--tinte-sanft); }
a  { color: var(--gruen-tief); }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { position: relative; }

/* Sanfte Einleitungszeile statt Eyebrow-Label: kursive Serifenzeile in Gold. */
.intro {
  display: block; font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.18rem; color: var(--gold-text); margin-bottom: 12px;
}

/* Verstecken der Animationsziele nur, wenn JS + GSAP wirklich laufen. */
.js .anim, .js .zeige, .js .karte-kipp, .js .moment { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .anim, .js .zeige, .js .karte-kipp, .js .moment { visibility: visible; }
}

/* Gekippte Karten: liegen wie Polaroids auf dem Tisch, GSAP rückt sie
   beim Hover gerade. Ohne JS trägt die CSS-Variable die Neigung. */
.karte-kipp { position: relative; transform: rotate(var(--neigung, 0deg)); }
.tape {
  position: absolute; top: -11px; left: 50%; width: 88px; height: 24px; z-index: 1;
  transform: translateX(-50%) rotate(var(--tape-rot, -3deg));
  background: var(--tape-farbe, rgba(233, 190, 85, .48));
  clip-path: polygon(2% 0, 98% 5%, 100% 94%, 0 100%);
  pointer-events: none;
}

/* ---------- Aquarell-Flecken ---------- */
.blob {
  /* 40px statt 60px: optisch praktisch nicht zu unterscheiden, aber auf
     schwachen Mobilgeräten deutlich billiger zu rastern. */
  position: absolute; pointer-events: none; filter: blur(40px); opacity: .6; z-index: 0;
  border-radius: 58% 42% 55% 45% / 52% 48% 56% 44%;
}
.blob.gruen { background: radial-gradient(circle at 40% 40%, #CFE0C0, transparent 70%); }
.blob.gold  { background: radial-gradient(circle at 60% 40%, #F4E3AE, transparent 70%); }

/* Lichtkegel (Spotlight nach Aceternity-Art, warm abgewandelt): fällt aus
   der Hero-Sonne quer über die Sektion. Liegt hinter dem Inhalt (.wrap z:1). */
.lichtkegel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- Kopf ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 245, 233, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1120px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinte); }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand b { font-family: "Fraunces", Georgia, serif; font-weight: 620; font-size: 1.12rem; line-height: 1.15; display: block; }
.brand span { font-size: .8rem; color: var(--gold-text); font-family: "Fraunces", Georgia, serif; font-style: italic; }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--tinte-sanft); }
.nav nav a:hover { color: var(--gruen-tief); }
.nav nav a[aria-current="page"] { color: var(--gruen-tief); text-decoration: underline; text-decoration-color: var(--sonne); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.knopf {
  display: inline-block; background: var(--gruen); color: #fff !important; text-decoration: none;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(67, 96, 60, .22); transition: background .16s, transform .16s, box-shadow .16s;
}
.knopf:hover { background: var(--gruen-tief); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(67, 96, 60, .28); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf.zart { background: transparent; color: var(--gruen-tief) !important; border: 1.5px solid var(--gruen); box-shadow: none; }
.knopf.zart:hover { background: rgba(94, 125, 85, .08); }
.nav-knopf {
  display: none; background: none; border: 0; cursor: pointer; padding: 13px 12px; /* Touch-Ziel ~44px */
  font: 600 .86rem/1 "Fraunces", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte);
}
.nav-knopf[aria-expanded="true"] { color: var(--gruen-tief); }
/* Mobil sichtbarer Kurz-CTA - der Haupt-CTA darf nie im Burger verschwinden. */
.cta-mobil { display: none; padding: 13px 16px; font-size: .88rem; flex: none; } /* Touch-Ziel ~44px */
/* Vertrauenszeile unter den Hero-CTAs */
.cta-hinweis { margin-top: 12px; font-size: .9rem; color: var(--tinte-sanft); }
.cta-hinweis svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }

/* ---------- Held ---------- */
.held { padding: 92px 0 104px; overflow: hidden; }
.held .wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.held h1 { margin-top: 4px; }
.held h1 .w { display: inline-block; }
.held h1 em { font-style: italic; color: var(--gruen-tief); position: relative; white-space: nowrap; }
.held h1 em .schwung {
  position: absolute; left: 0; right: 0; bottom: -.18em; width: 100%; height: .32em; overflow: visible;
}
.held h1 em .schwung path { stroke: var(--sonne); stroke-width: 7; fill: none; stroke-linecap: round; }
.held p.gross { font-size: 1.18rem; margin: 24px 0 32px; max-width: 33em; }
.held-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.werte { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.wert {
  display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .93rem; color: var(--tinte);
  background: var(--weiss); border: 1px solid rgba(201, 162, 63, .35);
  padding: 8px 16px; border-radius: 999px 999px 999px 4px;
  box-shadow: 0 3px 10px rgba(67, 96, 60, .06);
}
.wert svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .wert svg { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
  .wert:hover svg { transform: scale(1.28) rotate(-8deg); }
}

/* Illustration: Sonne hinter dem Blätter-Herz.
   TODO: sobald echte, freigegebene Fotos vorliegen, ergänzend ein warmes
   Foto (Begleiterin + Seniorin) einsetzen. */
.held-bild { position: relative; aspect-ratio: 1 / 1.02; }

/* ---------- Animiertes Logo im Held: das Herz zeichnet sich auf, das weiße
   Blatt wischt herein, der goldene Spross wächst, der Schriftzug steigt -
   danach atmet alles leise weiter. Die Pfade liegen einmal in <defs> und
   werden auch vom statischen Fuß-Logo wiederverwendet. ---------- */
.bildbuehne { position: relative; width: 100%; height: 100%; }
.logo-lala { display: block; width: 100%; height: 100%; overflow: visible; animation: lalaBreathe 6s 2.08s ease-in-out infinite; }
.held-deko { position: absolute; inset: 0; pointer-events: none; }
.logo-schein {
  position: absolute; top: 0; left: 17%; width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 154, 59, .26) 0%, rgba(199, 154, 59, .07) 50%, transparent 72%);
  filter: blur(8px); opacity: .5; animation: lalaGlow 5.5s ease-in-out infinite;
}
@keyframes lalaDraw { to { stroke-dashoffset: 0; } }
@keyframes lalaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lalaPop { 0% { opacity: 0; transform: scale(.2); } 65% { opacity: 1; transform: scale(1.16); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lalaWipe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lalaSprout { 0% { opacity: 0; transform: scale(.18); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lalaRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lalaBreathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.032) translateY(-4px); } }
@keyframes lalaInhale { 0%, 100% { opacity: .03; } 50% { opacity: .4; } }
@keyframes lalaDrift { 0% { transform: rotate(-1.8deg) translateY(1.5px); } 50% { transform: rotate(1.8deg) translateY(-2px); } 100% { transform: rotate(-1.8deg) translateY(1.5px); } }
@keyframes lalaBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes lalaRun { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes lalaGlow { 0%, 100% { opacity: .2; transform: scale(.97); } 50% { opacity: .72; transform: scale(1.1); } }
/* Reduzierte Bewegung: Aufbau-Elemente sofort zeigen, Dauer-Schmuck (Lauflicht,
   Glanz, Innenglühen) ganz weglassen. */
@media (prefers-reduced-motion: reduce) {
  .logo-lala, .logo-lala *, .logo-schein { animation: none !important; }
  .logo-lala .l-zeig { opacity: 1 !important; }
  .logo-lala .l-deko { display: none; }
}
.held-bild .karte {
  position: absolute; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px;
  padding: 12px 18px; font-size: .9rem; font-weight: 600; color: var(--tinte);
  box-shadow: var(--schatten); display: flex; gap: 9px; align-items: center;
}
.held-bild .karte small { display: block; font-weight: 400; color: var(--tinte-sanft); font-size: .8rem; }
.held-bild .karte svg { width: 22px; height: 22px; flex: none; }

/* ---------- Laufband: liegt leicht schief wie ein Washi-Tape-Streifen ---------- */
.laufband-rahmen { overflow: hidden; margin-block: -6px; }
.laufband {
  background: var(--butter); border-block: 1px solid rgba(201, 162, 63, .3);
  padding: 15px 0; overflow: hidden;
  /* Reine Deko: so landet das Band beim Kopieren der Seite nicht im Text. */
  user-select: none; -webkit-user-select: none;
  transform: rotate(-.7deg); width: 104%; margin-left: -2%;
  box-shadow: 0 4px 14px rgba(67, 96, 60, .07);
}
/* Das Band fährt per GSAP (reagiert auf Scroll-Tempo); ohne JS steht es.
   Für die Endlosschleife braucht es zwei gleiche Teile. Der zweite wird
   erst per JS geklont, damit der Spruch im Seitentext nur einmal steht. */
.laufband-spur { display: flex; width: max-content; }
.lauf-teil { display: flex; align-items: center; flex: none; }
.lauf-teil span {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.15rem;
  color: var(--gruen-tief); padding: 0 18px; white-space: nowrap;
}
.lauf-teil svg { width: 15px; height: 15px; flex: none; opacity: .9; }

/* ---------- Leistungen: der Flyer der Inhaberin sagt es selbst ---------- */
#leistungen { padding: 96px 0; }
.kopfzeile { max-width: 42em; margin-bottom: 46px; }
.kopfzeile p { margin-top: 12px; }
.flyer-raster { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 64px; align-items: center; }
.flyer-raster .kopfzeile { margin-bottom: 0; }
.kopfzeile .flyer-tipp { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: .92rem; }
.flyer-tipp svg { width: 18px; height: 18px; flex: none; }
.flyer { position: relative; }
/* Liegt wie ein angehefteter Aushang: weißer Rand, Tape, leicht schief. */
.flyer-link {
  display: block; position: relative; background: var(--weiss); padding: 10px; border-radius: 6px;
  rotate: 1.4deg; cursor: zoom-in;
  box-shadow: 0 22px 44px -22px rgba(53, 66, 47, .5), 0 4px 12px rgba(67, 96, 60, .08);
  transition: rotate .35s ease, translate .35s ease, box-shadow .35s ease;
}
.flyer-link img { display: block; width: 100%; height: auto; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .flyer-link:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 30px 54px -24px rgba(53, 66, 47, .55), 0 6px 16px rgba(67, 96, 60, .1); }
}

/* ---------- Aquarell-Deko: Farbwolken + Olivenzweige ----------
   Fertige Bilder aus tools/deko-bilder.py - zur Laufzeit wird nichts gerechnet.
   Die Wolken stehen still: große Flächen, die per JS beim Scrollen mitgezogen
   werden, haben im Galerie-Prototyp hinterhergehinkt. Nur die kleinen Zweige
   treiben leicht, und zwar per scroll-driven animation auf dem Compositor
   (kein JS, kein Nachziehen). Browser ohne das Feature zeigen sie still. */
.deko { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; z-index: 0; }
.deko img { position: absolute; display: block; max-width: none; height: auto; user-select: none; }
/* Wolken sind links satt: rechts gespiegelt, damit sie am Seitenrand kleben. */
.deko .wolke { width: clamp(220px, 27vw, 400px); }
.deko .wolke.rechts { right: 0; scale: -1 1; }
.deko .wolke.links { left: 0; }
.deko .zweig { width: clamp(120px, 15vw, 240px); opacity: .92; }
.deko .zweig.klein { width: clamp(90px, 10vw, 160px); }
.deko ~ .wrap, .deko ~ .abend { position: relative; z-index: 1; }
@keyframes zweigTreiben { from { translate: 0 26px; } to { translate: 0 -44px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Zeitleiste am Abschnitt selbst: die Abschnitte mit overflow:hidden wären
       sonst der nächste Scroll-Container, und die Zeitleiste stünde still. */
    section, footer { view-timeline: --abschnitt block; }
    .deko .zweig { animation: zweigTreiben linear both; animation-timeline: --abschnitt; }
  }
}

/* ---------- Momente: Polaroids an der Wäscheleine ---------- */
.fotos { padding: 88px 0 96px; }
.leine { position: relative; margin-top: 8px; }
.leine-schnur { position: absolute; top: 0; left: 0; width: 100%; height: 60px; overflow: visible; pointer-events: none; }
.leine-schnur path { fill: none; stroke: #8A7A55; stroke-width: 2.2; stroke-linecap: round; opacity: .6; }
.leine-reihe { list-style: none; display: flex; justify-content: space-around; align-items: flex-start; padding: 0 2% 20px; }
/* --sack: wie tief die Leine an dieser Stelle durchhängt (Kurve der .leine-schnur) */
.polaroid { position: relative; width: clamp(180px, 22vw, 250px); margin-top: var(--sack, 14px); rotate: var(--dreh, 0deg); transform-origin: 50% 0; }
.polaroid.quer { width: clamp(230px, 28vw, 330px); }
.klammer {
  position: absolute; top: -15px; left: 50%; translate: -50% 0; z-index: 1;
  width: 13px; height: 32px; border-radius: 3px;
  background: linear-gradient(180deg, #C9B487, #A88F60); box-shadow: 0 1px 2px rgba(51, 65, 42, .25);
}
.klammer::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: rgba(80, 66, 40, .45); }
.polaroid-karte {
  display: block; background: #FFFCF2; padding: 11px 11px 0; border-radius: 2px; text-decoration: none; cursor: zoom-in;
  box-shadow: 0 16px 28px -18px rgba(53, 66, 47, .6);
  transition: translate .3s ease, scale .3s ease, box-shadow .3s ease;
}
.polaroid-karte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.polaroid.quer .polaroid-karte img { aspect-ratio: 4 / 3; }
.polaroid-notiz {
  display: block; padding: 12px 6px 16px; text-align: center; line-height: 1.3;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--tinte-sanft);
}
@media (hover: hover) and (pointer: fine) {
  .polaroid-karte:hover { translate: 0 -5px; scale: 1.03; box-shadow: 0 24px 36px -20px rgba(53, 66, 47, .6); }
}
@keyframes pendeln { from { rotate: calc(var(--dreh, 0deg) - 1.4deg); } to { rotate: calc(var(--dreh, 0deg) + 1.4deg); } }
@media (prefers-reduced-motion: no-preference) {
  .polaroid { animation: pendeln var(--tempo, 6s) ease-in-out var(--versatz, 0s) infinite alternate; }
}

/* ---------- Großansicht (Flyer, Fotos) ---------- */
.gross { margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; max-width: 94vw; max-height: 94dvh; }
.gross::backdrop { background: rgba(43, 54, 38, .84); }
.gross img { display: block; max-width: min(94vw, 980px); max-height: 90dvh; width: auto; height: auto; border-radius: 4px; background: var(--weiss); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
/* z-index: das gedrehte Polaroid ist eine eigene Ebene und läge sonst über dem Knopf. */
.gross-zu {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 253, 246, .92); color: var(--tinte); font-size: 1.6rem; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.gross-bild { margin: 0; }
.gross-bild figcaption { display: none; }
/* Fotos von der Leine bleiben groß ein Polaroid: Papierrand, Notiz unten und
   die Schräglage der Karte (--dreh, halbiert - groß wirkt Schiefe stärker).
   Die Bildmaße ziehen Rand und Notiz ab, damit alles in den Bildschirm passt. */
.gross.ist-polaroid .gross-bild {
  --rand: clamp(12px, 2.4vmin, 22px);
  background: #FFFCF2; padding: var(--rand) var(--rand) 0; border-radius: 3px;
  rotate: calc(var(--dreh, 0deg) * .5);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .14);
}
.gross.ist-polaroid img {
  max-width: calc(min(94vw, 980px) - 2 * var(--rand)); max-height: calc(88dvh - var(--rand) - 5.2rem);
  border-radius: 0; box-shadow: none;
}
.gross.ist-polaroid figcaption {
  display: block; padding: .75em 8px .95em; text-align: center; line-height: 1.3;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(1.08rem, 2.6vmin, 1.45rem); color: var(--tinte-sanft);
}
@media (prefers-reduced-motion: no-preference) {
  .gross[open] { animation: grossAuf .28s ease-out; }
  /* Wie von der Leine genommen: kommt schiefer und kleiner, richtet sich auf. */
  .gross.ist-polaroid[open] .gross-bild { animation: polaroidAuf .45s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes grossAuf { from { opacity: 0; scale: .96; } }
@keyframes polaroidAuf { from { rotate: calc(var(--dreh, 0deg) * 2.5); scale: .9; translate: 0 22px; } }

/* ---------- Zitat-Band ---------- */
.band {
  background: var(--butter-tief); padding: 72px 0; text-align: center; overflow: hidden;
}
.band .ornament { width: 46px; height: 46px; margin: 0 auto 14px; display: block; }
.band blockquote {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: clamp(1.3rem, 2.7vw, 1.75rem); max-width: 28em; margin: 0 auto;
  line-height: 1.5; color: var(--gruen-tief);
}
.band cite { display: block; margin-top: 14px; font-style: italic; font-family: "Fraunces", Georgia, serif; font-size: 1rem; color: var(--gold-text); }

/* ---------- Über ---------- */
.ueber { background: var(--butter); padding: 96px 0; overflow: hidden; }
.ueber .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.zitatkarte {
  background: var(--weiss); border: 1px solid rgba(201, 162, 63, .3); border-radius: var(--radius);
  padding: 36px 32px; box-shadow: var(--schatten); position: relative; transform: rotate(-1.2deg);
}
.zitatkarte::before {
  content: "„"; position: absolute; top: -8px; left: 20px; font-family: "Fraunces", Georgia, serif;
  font-size: 5rem; color: var(--sonne); line-height: 1;
}
.zitatkarte blockquote { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.22rem; line-height: 1.55; color: var(--tinte); padding-top: 34px; }
.zitatkarte cite { display: block; margin-top: 16px; font-style: italic; font-family: "Fraunces", Georgia, serif; font-size: .98rem; color: var(--gold-text); }
.ueber-text p { margin-top: 16px; }
.insta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; text-decoration: none;
  font-weight: 600; color: var(--gruen-tief);
}
.insta svg { width: 20px; height: 20px; }

/* ---------- Ablauf ---------- */
/* ---------- Unterseiten: Knopf zurück zur Startseite ----------
   Bewusst als sichtbarer Knopf statt als kleiner Textlink: groß genug zum
   Treffen und mit Rahmen klar als "hier geht es zurück" erkennbar. */
.zurueck {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; margin: 18px 0 22px;
  padding: 0 22px 0 14px; border: 1.5px solid var(--gruen); border-radius: 999px; background: var(--weiss);
  font-weight: 600; font-size: 1.125rem; color: var(--gruen-tief); text-decoration: none;
  transition: background .16s;
}
.zurueck:hover { background: #F3F1E4; }
/* Die Leiste läuft beim Scrollen mit und rastet direkt unter der Kopfzeile
   (81px hoch) ein, sodass der Weg zurück immer sichtbar bleibt. Sie liegt als
   direktes Kind von <body>, sonst endet "sticky" mit dem kurzen Seitenkopf
   bzw. vor dem Fuß.
   Die Leiste selbst lässt Klicks durch, nur der Knopf fängt sie ab. */
.zurueck-leiste { position: sticky; top: 81px; z-index: 40; pointer-events: none; }
.zurueck-leiste .zurueck { pointer-events: auto; box-shadow: 0 6px 18px rgba(67, 96, 60, .16); }
.zurueck svg { width: 24px; height: 24px; flex: none; }

/* ---------- Wegweiser zu /leistungen und /preise ---------- */
.wegweiser { padding: 96px 0; }
.wegweiser-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.weg-karte {
  display: flex; flex-direction: column; text-decoration: none; color: var(--tinte);
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 20px 16px 22px 18px / 16px 22px 18px 24px; padding: 34px 30px 26px;
  box-shadow: var(--schatten); transition: box-shadow .2s;
}
.weg-karte:hover { box-shadow: 0 14px 34px rgba(67, 96, 60, .16); }
.weg-karte h3 { font-size: 1.4rem; }
.weg-karte p { margin-top: 10px; font-size: 1.06rem; color: var(--tinte-sanft); }
.weg-mehr { display: inline-flex; align-self: flex-start; margin-top: auto; padding-top: 12px; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 1.04rem; color: var(--gruen-tief); }
.weg-mehr svg { width: 20px; height: 20px; transition: transform .2s; }
.weg-karte:hover .weg-mehr svg { transform: translateX(4px); }
.faq-weiter { margin-top: 26px; font-size: 1.02rem; }
.faq-weiter a { color: var(--gruen-tief); font-weight: 600; }
@media (max-width: 900px) {
  .wegweiser { padding: 64px 0; }
  .wegweiser-gitter { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .wegweiser-gitter { grid-template-columns: 1fr; }
}

#ablauf { padding: 96px 0 88px; }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: schritt; position: relative; }
.schrittpfad {
  position: absolute; left: 4%; right: 4%; top: -46px; height: 90px; width: 92%;
  pointer-events: none; overflow: visible;
}
.schrittpfad path { stroke: var(--sonne); stroke-width: 3.5; fill: none; stroke-linecap: round; opacity: .85; }
.schritt { background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px 16px 22px 18px / 16px 22px 18px 24px; padding: 32px 28px; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 2.6rem; font-weight: 560;
  color: var(--sonne); display: block; margin-bottom: 10px; line-height: 1;
}
.schritt p { font-size: .95rem; margin-top: 8px; }

/* ---------- Kosten ---------- */
.kosten { padding: 88px 0 96px; }
.kosten .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.kosten ul { list-style: none; margin-top: 20px; display: grid; gap: 14px; }
/* Der Stundensatz steht als eigene Karte, nicht im Fließtext: Familien suchen
   genau diese eine Zahl, und sie sollen nicht danach lesen müssen. */
.preis {
  margin-top: 24px; padding: 20px 24px;
  background: var(--butter); border: 1px solid rgba(201, 162, 63, .34);
  border-radius: var(--radius);
}
.preis b {
  display: block; font-family: "Fraunces", Georgia, serif;
  font-size: 2rem; line-height: 1.15; color: var(--gruen-tief);
}
.preis b span { font-size: 1rem; font-style: italic; color: var(--gold-text); }
.preis p { margin-top: 10px; font-size: .96rem; }
.kosten li { display: flex; gap: 12px; align-items: flex-start; color: var(--tinte-sanft); }
.kosten li svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }

/* ---------- Budget der Pflegekasse ---------- */
/* Echte Tabelle statt Karten-Raster: fünf Pflegegrade mit denselben vier
   Feldern sind Vergleichsdaten, und Vorlesesoftware sagt in einer Tabelle bei
   jedem Wert dazu, zu welcher Spalte er gehört. Unter 820px klappt sie in
   Karten um (siehe Medienabfrage weiter unten), sonst müsste die Seite
   seitwärts scrollen - auf dem Handy für unsere Zielgruppe unbrauchbar. */
.budget { background: var(--butter); padding: 88px 0 96px; overflow: hidden; }
.budget .wrap { position: relative; z-index: 1; }
.budget .kopfzeile { max-width: 46em; margin-bottom: 38px; }
.budget .kopfzeile p + p { margin-top: 14px; }
.budget-toepfe { font-weight: 600; color: var(--tinte); }

.budget-tafel {
  background: var(--weiss); border: 1px solid rgba(201, 162, 63, .3);
  border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden; /* schneidet die grüne Kopfzeile auf den Eckradius zu */
}
.budget-tafel table { width: 100%; border-collapse: collapse; }
.budget-tafel caption {
  caption-side: top; text-align: left; padding: 22px 26px 16px;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.05rem; color: var(--gold-text);
}
.budget-tafel th, .budget-tafel td { padding: 16px 26px; text-align: left; vertical-align: middle; }
.budget-tafel thead th {
  background: var(--gruen-tief); color: #fff;
  font-family: "Instrument Sans", -apple-system, sans-serif;
  font-weight: 600; font-size: .92rem; line-height: 1.35;
}
.budget-tafel tbody tr + tr { border-top: 1px solid var(--linie); }
.budget-tafel tbody th {
  font-family: "Fraunces", Georgia, serif; font-weight: 620; font-size: 1.12rem;
  color: var(--tinte); white-space: nowrap;
}
.budget-tafel td { color: var(--tinte-sanft); }
/* Tabellenziffern: sonst tanzen die Beträge spaltenweise auseinander. */
.budget-betrag { display: block; font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; }
.budget-von { display: block; margin-top: 2px; font-size: .84rem; font-weight: 400; color: var(--tinte-sanft); }
.budget-keins { font-style: italic; }
.budget-tafel .budget-summe { background: rgba(233, 190, 85, .16); }
/* Jede Zelle trägt genau ein Kind-Element: in der Kartenansicht sitzt das
   Spaltenlabel als ::before daneben, und Flex bräuchte sonst pro Geschwister
   eine eigene Spalte. */
.budget-gesamt {
  display: block; font-family: "Fraunces", Georgia, serif; font-weight: 620;
  font-size: 1.24rem; line-height: 1.2; color: var(--gruen-tief);
  font-variant-numeric: tabular-nums;
}
.budget-gesamt small {
  display: block; margin-top: 1px; font-family: "Instrument Sans", -apple-system, sans-serif;
  font-weight: 400; font-size: .84rem; color: var(--tinte-sanft);
}

.budget-hinweis {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 26px;
  background: var(--weiss); border: 1px solid rgba(201, 162, 63, .3);
  border-radius: var(--radius); padding: 24px 26px;
}
.budget-hinweis svg { width: 24px; height: 24px; flex: none; margin-top: 3px; }
.budget-hinweis strong { color: var(--tinte); }
.budget-hinweis p + p { margin-top: 10px; }
.budget-stand { margin-top: 18px; font-size: .86rem; color: var(--tinte-sanft); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--butter); padding: 96px 0; }
.kontakt-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.kontakt-karte {
  background: var(--weiss); border: 1px solid rgba(201, 162, 63, .3); border-radius: var(--radius);
  padding: 30px 26px;
}
.kontakt-karte .zeichen {
  width: 50px; height: 50px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(233, 190, 85, .22); border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
}
.kontakt-karte .zeichen svg { width: 25px; height: 25px; }
.kontakt-karte p { font-size: .93rem; margin-top: 8px; }
.kontakt-karte .knopf { margin-top: 16px; font-size: .88rem; padding: 10px 20px; }
/* Zwei gleichwertige Wege in einer Karte (anrufen / WhatsApp) - nebeneinander,
   auf schmalen Karten umbrechend. */
.knopf-paar { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Fuß ---------- */
footer { padding: 42px 0 110px; border-top: 1px solid var(--linie); }
.fuss { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 22px; }
.fuss a { color: var(--tinte-sanft); text-decoration: none; font-size: .9rem; }
.fuss a:hover { color: var(--gruen-tief); }
.fuss small { color: var(--tinte-sanft); font-size: .85rem; }

/* ---------- Papierkorn: feines Aquarellpapier über allem (außer Chat) ---------- */
.koernung {
  position: fixed; inset: 0; pointer-events: none; z-index: 80;
  opacity: .045; /* kein mix-blend-mode: flackert in Chrome mit dem backdrop-filter des Headers */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Wellenkanten: die vorige Sektion tropft in die nächste ----------
   Die Welle sitzt IM Abschnitt (überlebt overflow:hidden) und trägt die
   Hintergrundfarbe des VORHERIGEN Abschnitts. */
.welle { position: absolute; top: 0; left: 0; width: 100%; height: 44px; display: block; pointer-events: none; z-index: 0; }

/* ---------- Ein Tag an Ihrer Seite (Scrolltelling) ---------- */
/* padding-top 44px: die Welle liegt im Polster - beim Pinnen ist sie schon aus
   dem Bild und rutscht nicht sichtbar über die fixierte Bühne. */
.tag { background: var(--creme); padding-top: 44px; }
/* Eigener Creme-Grund ist Pflicht: GSAP blendet die Hintergrundfarbe über den
   Tag. Ohne Startfarbe beginnt es bei transparentem Schwarz und läuft durch
   halbtransparentes Grau - zwischen Morgen und Mittag wurde es dann dunkel. */
.tag-buehne {
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  padding: 92px 0 64px; overflow: hidden; background-color: var(--creme);
}
/* Flache Laptops: Bühne kompakter, damit sie beim Pinnen komplett ins Bild passt. */
@media (min-width: 901px) and (max-height: 860px) {
  .tag-buehne { padding: 64px 0 36px; }
  .tag-himmel { height: 150px; margin-bottom: 18px; }
  .moment { padding: 20px 22px 18px; }
  .moment p { font-size: .9rem; }
}
.tag-buehne .wrap { position: relative; z-index: 1; width: 100%; }
.tag-licht { position: absolute; inset: 0; pointer-events: none; }
.tag-licht.morgen { background: radial-gradient(105% 80% at 10% 4%, rgba(245, 222, 156, .8), transparent 64%); }
/* Mittag HELLT AUF (fast weißes Licht von oben) - der hellste Punkt des Tages,
   nicht der dichteste. Gold gehört dem Morgen und dem Spätnachmittag. */
.tag-licht.mittag { background: radial-gradient(130% 90% at 50% 0%, rgba(255, 253, 246, .9), rgba(245, 222, 156, .28) 55%, transparent 78%); opacity: 0; }
.tag-licht.spaet  { background: radial-gradient(105% 80% at 90% 6%, rgba(233, 174, 85, .62), transparent 66%); opacity: 0; }
.tag-himmel { position: relative; height: 220px; margin: 4px auto 30px; max-width: 960px; }
.tag-himmel svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tag-marke {
  position: absolute; bottom: -4px; font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: .95rem; color: var(--gold-text);
}
.tag-marke.frueh { left: 2%; } .tag-marke.spaet { right: 2%; }
.momente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.moment {
  position: relative; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 18px 24px 16px 22px / 24px 16px 22px 18px;
  padding: 28px 26px 24px; box-shadow: 0 6px 16px rgba(67, 96, 60, .07);
}
.moment-deko { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; opacity: .95; }
.moment .zeit {
  display: inline-block; font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.02rem; color: var(--gold-text); margin-bottom: 8px;
}
.moment p { font-size: .95rem; margin-top: 8px; }

/* ---------- Fragen ---------- */
.fragen { padding: 88px 0 96px; }
.faq-liste { max-width: 46em; display: grid; gap: 14px; }
.faq-liste details {
  background: var(--weiss); border: 1px solid rgba(94, 125, 85, .18);
  border-radius: 16px 20px 14px 18px / 20px 14px 18px 16px;
  box-shadow: 0 4px 12px rgba(67, 96, 60, .05);
}
.faq-liste summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px; font-weight: 600; color: var(--tinte); font-size: 1.02rem;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary .plus {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(233, 190, 85, .22); border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  transition: transform .25s ease;
}
.faq-liste summary .plus svg { width: 15px; height: 15px; stroke: var(--gruen-tief); stroke-width: 2.4; stroke-linecap: round; }
.faq-liste details[open] summary .plus { transform: rotate(45deg); }
.faq-liste details > p {
  padding: 0 22px 20px; font-size: .96rem;
  border-top: 2px dotted rgba(201, 162, 63, .35); margin: 0 22px; padding-left: 0; padding-right: 0; padding-top: 14px;
}

/* ---------- Abend im Fuß ---------- */
footer { padding: 72px 0 110px; border-top: 0; position: relative; overflow: hidden; }
.fuss-schluss { text-align: center; position: relative; z-index: 1; }
.fuss-schluss p {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.25rem;
  color: var(--gruen-tief); margin-bottom: 22px;
}
.abend { margin: 30px 0 18px; }
.abend svg { display: block; width: 100%; height: clamp(120px, 16vw, 190px); }

:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  #leistungen, .ueber, .fotos, #ablauf, .kosten, .budget, .kontakt, .fragen { padding-top: 64px; padding-bottom: 64px; }
  .cta-mobil { display: inline-block; }
  /* Mobil: Logo links, MENÜ exakt mittig, Kennenlernen rechts. */
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .brand { grid-column: 1; justify-self: start; }
  .nav-knopf { grid-column: 2; grid-row: 1; }
  .cta-mobil { grid-column: 3; grid-row: 1; justify-self: end; }
  .tag-buehne { min-height: 0; padding: 64px 0 56px; }
  .tag-himmel { height: 150px; margin-bottom: 22px; }
  .momente { grid-template-columns: 1fr; }
  .held .wrap { grid-template-columns: 1fr; gap: 0; }
  .ueber .wrap, .kosten .wrap { grid-template-columns: 1fr; gap: 40px; }

  /* ---- Held mobil: das Logo eröffnet ----
     Das animierte Logo zeichnet sich unter der aufgehenden Sonne auf dem
     ERSTEN Screen auf (display:contents löst .held-bild auf, die Bühne
     rückt per order vor den Text), darunter steigen Headline und CTA ein;
     die zwei Info-Karten reihen sich nach dem Text in den Fluss. Die
     Intro-Zeile entfällt - der Schriftzug steht im Logo direkt darüber. */
  .held { padding: 18px 0 60px; }
  .held .wrap { display: flex; flex-direction: column; }
  .held-bild { display: contents; }
  .held-bild > .blob { display: none; }
  .bildbuehne {
    /* Kleiner als zuvor (war min(64vw,264px)): die Grafik soll nicht mehr
       ~60% der mobilen Fold-Höhe belegen, bevor Überschrift/CTA erscheinen. */
    order: -1; width: min(46vw, 190px); height: auto;
    aspect-ratio: 383 / 401; margin: 0 auto 4px;
  }
  .held-text { text-align: center; }
  /* Nicht display:none: der Wortlaut "Seniorenbetreuung ... Düsseldorf" bleibt
     crawlbar/für Screenreader erreichbar, auch wenn das Logo ihn auf Mobil
     bereits als Grafik zeigt. */
  .held-text .intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .held p.gross { font-size: 1.06rem; margin: 18px auto 26px; }
  .held-ctas { flex-direction: column; gap: 10px; }
  .held-ctas .knopf { width: 100%; text-align: center; padding: 15px 20px; }
  .cta-hinweis { text-align: center; font-size: .85rem; }
  .werte { justify-content: center; gap: 6px; margin-top: 26px; }
  .wert { padding: 6px 10px; font-size: .8rem; gap: 6px; }
  .wert svg { width: 16px; height: 16px; }
  .held-bild .karte { position: static; order: 5; margin-top: 10px; }
  .held-bild .karte:first-of-type { margin-top: 22px; }
  .schritte, .kontakt-gitter { grid-template-columns: 1fr; }
  .flyer-raster { grid-template-columns: 1fr; gap: 34px; }
  .flyer { width: 100%; max-width: 500px; margin-inline: auto; }
  .deko .zweig { opacity: .7; }
  .schrittpfad { display: none; }
  .zitatkarte { transform: none; }
  .nav nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--creme); border-bottom: 1px solid var(--linie); padding: 18px 24px; gap: 16px;
    align-items: flex-start;
  }
  .nav nav.offen { display: flex; }
  .nav-knopf { display: block; }
}
@media (max-width: 820px) {
  /* Budget-Tabelle als Karten: vier Spalten mit Beträgen passen hier nicht
     mehr nebeneinander. Statt seitwärts zu scrollen wird jede Zeile eine
     Karte, und das Spaltenlabel rückt per data-spalte vor den Wert. Die
     Tabellenstruktur bleibt im Markup erhalten, nur die Darstellung wechselt;
     der Tabellenkopf wird für das Auge versteckt, bleibt aber vorlesbar. */
  .budget-tafel { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  /* Ohne display:block zieht sich die Beschriftung neben der aufgelösten
     Tabelle auf Wortbreite zusammen und bricht nach jedem zweiten Wort um. */
  .budget-tafel caption { display: block; padding: 0 0 20px; }
  .budget-tafel thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .budget-tafel table, .budget-tafel tbody, .budget-tafel tr,
  .budget-tafel tbody th, .budget-tafel td { display: block; }
  .budget-tafel tbody tr, .budget-tafel tbody tr + tr {
    background: var(--weiss); border: 1px solid rgba(201, 162, 63, .3);
    border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 20px 22px; margin-bottom: 16px;
  }
  .budget-tafel tbody th {
    padding: 0 0 12px; margin-bottom: 14px; font-size: 1.22rem;
    border-bottom: 1px solid var(--linie);
  }
  .budget-tafel td { padding: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
  .budget-tafel td + td { margin-top: 12px; }
  /* Das Spaltenlabel gibt nach, der Betrag bleibt einzeilig: "275,60 €" und
     "von insgesamt 689 €" dürfen nicht mitten im Betrag umbrechen. Auf sehr
     schmalen Geräten trennt die Silbentrennung "Umwandlungsanspruch". */
  .budget-tafel td::before {
    content: attr(data-spalte); flex: 0 1 auto; min-width: 0;
    font-size: .92rem; color: var(--tinte-sanft);
    hyphens: auto; overflow-wrap: break-word;
  }
  .budget-tafel td > * { flex: 0 1 auto; text-align: right; white-space: nowrap; }
  /* Nur der Betrag selbst bleibt zwingend einzeilig. Die Zusatzzeile darf auf
     engen Geräten umbrechen, sonst drückt sie das Label auf Silbenbreite. */
  .budget-tafel .budget-von, .budget-gesamt small { white-space: normal; }
  .budget-tafel .budget-summe {
    background: none; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--linie); align-items: center;
  }
  .budget-tafel .budget-summe::before { color: var(--tinte); font-weight: 600; }
}
@media (max-width: 385px) {
  /* Ab hier reicht die Zeile nicht mehr für Bezeichnung und Betrag
     nebeneinander: "von insgesamt 1.463 €" und "Umwandlungsanspruch" brauchen
     zusammen rund 280px, die schmalsten Geräte lassen in der Karte keine 270.
     Beides untereinander liest sich ruhiger als zerhackte Silben. */
  .budget-tafel td { display: block; }
  .budget-tafel td::before { display: block; margin-bottom: 3px; }
  .budget-tafel td > * { text-align: left; }
  .budget-tafel .budget-summe { display: block; }
}
@media (max-width: 700px) {
  /* Leine mobil: die Polaroids hängen in einer wischbaren Reihe, die nächste
     Karte schaut schon hervor. Die Leine ist hier eine gerade Linie im
     Hintergrund der Reihe und wandert beim Wischen mit (attachment: local). */
  .leine { margin-inline: -24px; }
  .leine-schnur { display: none; }
  .leine-reihe {
    justify-content: flex-start; gap: 20px; padding: 34px 24px 26px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: linear-gradient(#B3A57F, #B3A57F) 0 20px / 100% 2px no-repeat local;
  }
  .leine-reihe::-webkit-scrollbar { display: none; }
  .polaroid, .polaroid.quer { flex: 0 0 66vw; width: auto; margin-top: 0; scroll-snap-align: center; }
  .polaroid.quer { flex-basis: 78vw; }
}
@media (max-width: 540px) {
  /* Auf schmalen Handys: Slogan-Zeile weg, Name einzeilig, kompakter CTA. */
  .brand span span { display: none; }
  .brand b { font-size: 1rem; white-space: nowrap; }
  .cta-mobil { padding: 12px 13px; font-size: .84rem; } /* Touch-Ziel ~44px */
}
@media (max-width: 680px) {
  /* Schmal: nur noch das Logo, damit MENÜ mittig bleibt - der Name steht direkt darunter im Held. */
  .brand > span { display: none; }
}
@media (max-width: 400px) {
  h1 { font-size: 2.05rem; }
}