/* ============================================================
   osteopathie-unrau.de — Designsystem (Neuauflage 08/2026)
   Petrol + Salbei-Türkis, Sand-Buttons, warmes Papierweiß.
   Display: Fraunces (variabel, opsz-Achse). Fliesstext: Karla.
   ============================================================ */

/* ---------- Fonts, selbst gehostet ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-opsz-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('../fonts/karla-normal.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('../fonts/karla-italic.woff2') format('woff2');
  font-weight:200 800;font-style:italic;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Farben in oklch, damit Helligkeit und Buntheit getrennt regelbar sind.
     Der Hex-Wert dahinter ist der gemessene Ausgangspunkt, nicht der Fallback. */
  --petrol:oklch(38.33% 0.0389 164.88);       /* #2f4a3e */
  --petrol-deep:oklch(32.65% 0.0332 164.35);  /* #243a30 */
  --teal:oklch(67.22% 0.0471 156.17);         /* #7f9f8a */
  --teal-soft:oklch(79.04% 0.0361 155.76);    /* #a9c2b1 */
  --mint:oklch(91.94% 0.0176 153.55);         /* #dce8df */
  --sand:oklch(71.18% 0.0616 70.77);          /* #bb9c78 */
  --sand-lift:oklch(76.09% 0.0594 72.76);     /* #c9ac88 */
  --sand-deep:oklch(54.80% 0.0634 67.56);     /* #8a6a48 */
  --sand-ink:oklch(32.65% 0.0332 164.35);     /* #243a30 */
  --alt:oklch(95.17% 0.0096 93.57);           /* #f1efe8 */
  --line:oklch(89.17% 0.0135 106.67);         /* #dcdcd2 */
  --ink:oklch(33.68% 0.0172 196.37);          /* #2d3a3a */
  --ink-soft:oklch(51.11% 0.0184 186.84);     /* #5b6a68 */
  --white:oklch(100% 0 0);                    /* #ffffff */
  --paper:oklch(98.18% 0.0054 95.10);         /* #faf9f5 */
  /* Salbei als Textfarbe: dunkler als --teal, damit Labels lesbar sind */
  --label:oklch(50.74% 0.0501 153.46);        /* #4f6e58 */
  /* Aliase fuer impressum/datenschutz */
  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --accent:var(--petrol);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla','Segoe UI',system-ui,sans-serif;
  --step-n1:clamp(0.950rem,0.937rem + 0.056vw,0.988rem);
  --step-0:clamp(1.063rem,1.033rem + 0.130vw,1.150rem);
  --step-1:clamp(1.238rem,1.179rem + 0.259vw,1.413rem);
  --step-2:clamp(1.444rem,1.346rem + 0.435vw,1.738rem);
  --step-3:clamp(1.688rem,1.537rem + 0.667vw,2.138rem);
  --step-4:clamp(1.969rem,1.750rem + 0.972vw,2.625rem);
  --step-5:clamp(2.294rem,1.981rem + 1.389vw,3.231rem);
  --step-6:clamp(2.675rem,2.242rem + 1.926vw,3.975rem);
  --step-7:clamp(2.900rem,2.000rem + 4.000vw,5.600rem);
  /* Zeilenlaenge in ch, damit sie mit dem jeweiligen Schriftgrad mitwaechst */
  --measure:66ch;
  --ease:cubic-bezier(.22,.9,.3,1);
  --maxw:1180px;
  --topbar:78px;
}

/* Seitenwechsel: wo der Browser es kann, blendet er die Seiten ineinander.
   Browser ohne Unterstuetzung ignorieren die Regel und springen wie bisher. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

/* ---------- Grund ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Papierkorn: nimmt den Flaechen das Digitale, ohne dass man es bewusst sieht */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 1rem)}
html,body{overflow-x:clip}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--mint);color:var(--petrol-deep)}
a{color:var(--petrol);text-decoration:none}
a:hover{color:var(--petrol-deep)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;color:var(--ink);text-wrap:balance;font-optical-sizing:auto}
/* Grosse Grade duerfen duenner und enger stehen, kleine brauchen mehr Gewicht */
h1{font-size:var(--step-6);letter-spacing:-.022em;font-variation-settings:'opsz' 144,'wght' 400}
h2{font-size:var(--step-5);letter-spacing:-.018em;margin-bottom:1.4rem;font-variation-settings:'opsz' 120,'wght' 400}
h3{font-size:var(--step-1);margin-bottom:.45rem;font-variation-settings:'opsz' 30,'wght' 500}
p{margin-bottom:1rem;text-wrap:pretty}
strong{font-weight:600}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem)}
.kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:600;margin-bottom:.7rem;text-wrap:balance}
.muted{color:var(--ink-soft)}
.small{font-size:var(--step-n1)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--petrol);color:#fff;padding:.6rem 1rem;font-weight:600}
.skip-link:focus{left:0}
/* Ueberschrift nur fuer Screenreader, haelt die h1-h2-h3-Folge lueckenlos */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.4rem .85rem 1.6rem;border-radius:4px;
  font-weight:600;font-size:.98rem;line-height:1.2;letter-spacing:.01em;border:1.5px solid transparent;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  text-align:center;
}
.btn .arrow{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
/* Hauptaktion: Sand mit weichem Schatten */
.btn-sand{background:var(--sand);color:var(--sand-ink);border-color:var(--sand);box-shadow:0 2px 8px rgba(47,74,62,.14)}
.btn-sand:hover{background:var(--sand-lift);border-color:var(--sand-lift);color:var(--sand-ink);box-shadow:0 3px 12px rgba(47,74,62,.18)}
.btn-petrol{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.btn-petrol:hover{background:var(--petrol-deep);color:#fff}
.btn-outline{background:transparent;color:var(--petrol);border-color:var(--petrol)}
.btn-outline:hover{background:var(--petrol);color:#fff}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--topbar);
  border-bottom:0;
}
/* Die Unschaerfe laeuft nach unten aus, statt an einer Kante abzubrechen.
   Sie sitzt bewusst auf einem eigenen Element: eine Maske auf .topbar selbst
   beschneidet alle Kinder auf deren Flaeche — und das Klappmenue im
   Handyformat haengt als Kind unterhalb der Kopfzeile. Es war dadurch
   unsichtbar und nicht anklickbar. */
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,249,245,.96) 55%,rgba(250,249,245,.72) 100%);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.93) 100%);
  mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.93) 100%);
}
.topbar-inner{height:100%;display:flex;align-items:center;gap:2rem}
.brand{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.brand-name{font-family:var(--display);font-size:var(--step-2);color:var(--petrol);letter-spacing:0;font-optical-sizing:auto;font-variation-settings:'opsz' 40,'wght' 400}
.brand-sub{font-size:.85rem;color:var(--ink-soft)}
.topbar .btn{opacity:0;pointer-events:none}
body.cta-static .topbar .btn{opacity:1 !important;pointer-events:auto !important}
.hero .btn{will-change:opacity}
.menu{display:flex;gap:1.8rem}
.menu a{color:var(--ink);font-weight:500;font-size:1.02rem;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
/* Burger: nur im Handy-/Tablet-Format sichtbar */
.nav-toggle{display:none;position:relative;width:44px;height:44px;margin-right:-.6rem;padding:0;border:0;background:none;color:var(--petrol);cursor:pointer}
.nav-toggle span{position:absolute;left:11px;top:21px;width:22px;height:2px;border-radius:2px;background:currentColor;transition:background .2s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
/* Typografie steht auf Papier, das Portraet sitzt in einem gesetzten Feld
   daneben, mit weichem Schatten nach rechts unten. */
.hero{
  position:relative;margin-top:var(--topbar);background:var(--paper);
  padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5.5rem);
}
.hero-inner{
  display:grid;grid-template-columns:1.18fr minmax(0,.62fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero-text{color:var(--ink);order:1}
.hero-name{font-family:var(--display);font-size:var(--step-2);color:var(--petrol);margin-bottom:.35rem;font-optical-sizing:auto}
.hero-text h1{margin-bottom:1.3rem;font-size:var(--step-7);letter-spacing:-.03em;line-height:1.02}
.hero-text .lede{font-size:var(--step-1);line-height:1.5;margin-bottom:2rem;color:var(--ink-soft);max-width:30ch}
.hero-figure{position:relative;margin:0;order:2}
.hero-figure picture{position:relative;z-index:1;display:block}
.hero-figure img{
  width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center 12%;border-radius:4px;
  box-shadow:28px 34px 70px -22px rgba(36,58,48,.42),8px 10px 20px -10px rgba(36,58,48,.18);
}

/* ---------- Vertrauenspunkte ---------- */
/* Keine Kreis-Symbole mehr. Nummer, Haarlinie, gesetzte Zeile. */
.trust{background:var(--paper);padding:clamp(3rem,6vw,5rem) 0 1rem}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(1.6rem,3vw,3rem)}
.trust-item{padding:1.4rem 0 0;border-top:1px solid var(--ink);border-left:0}
.trust-nr{
  display:block;font-family:var(--display);font-size:.9rem;color:var(--sand-deep);
  font-variation-settings:'opsz' 20,'wght' 500;margin-bottom:.9rem;letter-spacing:.06em;
}
.trust-item h3{
  font-family:var(--display);font-weight:400;font-size:var(--step-1);
  font-variation-settings:'opsz' 30,'wght' 400;color:var(--petrol);
  text-transform:none;letter-spacing:-.008em;margin-bottom:.5rem;
}
.trust-item p{color:var(--ink-soft);font-size:.98rem;margin:0;max-width:34ch}

/* ---------- Sektionen ---------- */
.section{padding:5.5rem 0}
.section-alt{background:var(--alt)}

/* Ein dunkler Abschnitt in einer hellen Seite. Die Palette kam bisher
   fast nur in Labels vor; hier traegt sie eine ganze Flaeche. */
.section-dark{background:var(--petrol-deep);color:var(--mint)}
.section-dark .kicker{color:var(--teal-soft)}
.section-dark h2,.section-dark h3,.section-dark strong{color:var(--paper)}
.section-dark p{color:var(--mint)}
.section-dark .timeline::before{background:rgba(255,255,255,.16)}
.section-dark .timeline::after{background:var(--teal-soft)}
.section-dark .timeline .dot{background:var(--petrol-deep);border-color:rgba(255,255,255,.28);color:var(--teal-soft)}
.section-dark .timeline li.on .dot{background:var(--mint);border-color:var(--mint);color:var(--petrol-deep)}
.section-dark .timeline li.on:not(.active) .dot{background:var(--teal-soft);border-color:var(--teal-soft);color:var(--petrol-deep)}
.section-dark .timeline li.active .dot{box-shadow:0 0 0 6px rgba(220,232,223,.14)}
.section-dark .timeline h3{color:var(--paper)}
.section-dark .timeline p{color:var(--teal-soft)}
/* Nicht unter .8 abblenden: --teal-soft auf --petrol-deep liegt bei .55 nur
   noch bei 3,05:1, gefordert sind 4,5:1. .8 ergibt 4,7:1 und dimmt sichtbar. */
.section-dark .timeline li:not(.on) h3,.section-dark .timeline li:not(.on) p,
.section-dark .timeline li.on:not(.active) h3,.section-dark .timeline li.on:not(.active) p{opacity:.8}

/* Der Leitgedanke bekommt eine eigene Flaeche statt einer Randnotiz */
.statement{padding:0 0 clamp(4rem,9vw,7rem)}
.statement-quote{
  font-family:var(--display);font-optical-sizing:auto;
  /* Zweizeilig: in einer Zeile waeren 24px das Maximum (44em lang bei 1084px Spalte). */
  font-size:clamp(1.2rem,2.2vw,1.8rem);font-variation-settings:'opsz' 120,'wght' 400;
  line-height:1.3;letter-spacing:-.02em;color:var(--petrol);
  max-width:46ch;margin:0;text-wrap:balance;
}
.statement-figure{margin:0}
.statement-source{margin-top:.7rem;font-size:var(--step-n1);color:var(--ink-soft)}
.intro{margin:0 0 3.4rem}
.intro h2{max-width:16ch}
.intro p{font-size:var(--step-1);line-height:1.5;max-width:56ch}
.legal-note{font-size:var(--step-n1);color:var(--ink-soft);text-align:center;max-width:var(--measure);margin:2.5rem auto 0}
.review-cta{text-align:center;margin-top:3rem}
.legal-note a,.review-link{color:var(--sand-deep);font-weight:600;white-space:nowrap}
.legal-note a::after,.review-link::after{content:"→";display:inline-block;margin-left:.35em}
.legal-note a:hover,.review-link:hover{color:var(--petrol)}
.review-link{display:table;margin:0 auto}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.2rem,3vw,3rem) 1.8rem}
/* Keine Kastenoptik: Bild, Zeile, Titel, Text. Das Papier traegt die Karte. */
.card{position:relative;display:flex;flex-direction:column}
/* Bildbehandlung: entsaettigt mit einer Spur Waerme. Das rote Schmerz-Leuchten
   der Vorlagenfotos verschwindet, die Hauttoene bleiben freundlich statt gruenstichig. */
.card-fig{margin:0 0 1.1rem;overflow:hidden;border-radius:4px;background:var(--alt);box-shadow:16px 20px 42px -14px rgba(36,58,48,.36),5px 6px 14px -7px rgba(36,58,48,.16)}
.card-fig img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  filter:grayscale(1) sepia(.16) contrast(1.05) brightness(1.02);
  transition:filter .5s var(--ease),transform .7s var(--ease);
}
.card:hover .card-fig img,.card:focus-within .card-fig img{filter:grayscale(0) sepia(0) contrast(1.02);transform:scale(1.03)}
.card-kopf{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.4rem}
.card-nr{font-family:var(--display);font-size:.95rem;color:var(--sand-deep);font-variation-settings:'opsz' 20,'wght' 500;font-feature-settings:'tnum';flex:none}
.card-sub{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:600}
.card h3{color:var(--petrol);font-size:var(--step-2);margin-bottom:.55rem;letter-spacing:-.012em}
.card h3 a{color:inherit}
/* Beim Seitenwechsel wandert genau dieses Bild an seinen Platz auf der Unterseite */
[data-bereich="ruecken"] .card-fig img{view-transition-name:bild-ruecken}
[data-bereich="nacken"] .card-fig img{view-transition-name:bild-nacken}
[data-bereich="schulter"] .card-fig img{view-transition-name:bild-schulter}
[data-bereich="huefte"] .card-fig img{view-transition-name:bild-huefte}
[data-bereich="bauch"] .card-fig img{view-transition-name:bild-bauch}
[data-bereich="stress"] .card-fig img{view-transition-name:bild-stress}
::view-transition-group(bild-ruecken),::view-transition-group(bild-nacken),
::view-transition-group(bild-schulter),::view-transition-group(bild-huefte),
::view-transition-group(bild-bauch),::view-transition-group(bild-stress){animation-duration:.5s}

/* Die ganze Karte ist die Schaltflaeche, im Bedienbaum bleibt genau ein Link */
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:4px}
.card:hover h3 a{color:var(--petrol-deep)}
.card:has(a:focus-visible){outline:2px solid var(--petrol);outline-offset:6px;border-radius:4px}
.card h3 a:focus-visible{outline:none}
.card p{color:var(--ink-soft);margin:0;font-size:.98rem;max-width:40ch}

/* Ablauf */
.ablauf-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start}
.ablauf-grid p{max-width:var(--measure)}
.timeline{list-style:none;position:relative;padding-left:2.4rem;margin-top:.5rem}
.timeline::before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:var(--line)}
.timeline::after{
  content:"";position:absolute;left:12px;top:10px;width:2px;height:calc(100% - 20px);
  background:var(--petrol);transform:scaleY(var(--progress,0));transform-origin:top;
}
.timeline li{position:relative;padding-bottom:2rem}
.timeline li:last-child{padding-bottom:0}
.timeline .dot{
  position:absolute;left:calc(-2.4rem);top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:.8rem;font-weight:700;color:var(--teal);
  transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease);
}
.timeline li.on .dot{background:var(--petrol);border-color:var(--petrol);color:#fff;animation:pulse .6s var(--ease)}
.timeline li h3,.timeline li p{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.timeline li:not(.on) h3,.timeline li:not(.on) p{opacity:.38;transform:translateX(10px)}
.timeline li.on:not(.active) h3,.timeline li.on:not(.active) p{opacity:.7}
.timeline li.on:not(.active) .dot{background:var(--teal);border-color:var(--teal)}
.timeline li.active .dot{transform:scale(1.15);box-shadow:0 0 0 6px rgba(47,74,62,.12)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,74,62,.45)}100%{box-shadow:0 0 0 14px rgba(47,74,62,0)}}
.timeline h3{color:var(--petrol);margin-bottom:.2rem}
.timeline p{color:var(--ink-soft);margin:0}

/* Über mich */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.about-grid p{max-width:var(--measure)}
.about-photo{margin:0}
.about-photo-frame{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;box-shadow:28px 34px 70px -22px rgba(36,58,48,.42),8px 10px 20px -10px rgba(36,58,48,.18)}
.facts{display:grid;grid-template-columns:1fr;gap:1.5rem 2.5rem;margin:1.4rem 0 1.8rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.facts h3{font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:600;margin-bottom:.6rem;font-variation-settings:normal}
.facts ul{list-style:none}
.facts li{position:relative;padding-left:1.1rem;margin-bottom:.4rem;color:var(--ink);font-size:.98rem;line-height:1.45}
.member h3{font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:600;margin-bottom:.8rem;font-variation-settings:normal}
.member-logos img.logo-dioos{height:50px}
.member-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
/* Die Logos sind aus JPGs mit weissem Grund freigestellt (PNG mit Alpha) */
.member-logos img{display:block;height:46px;width:auto}
.member-logos img+img{height:52px}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* Bewertungen */
.center{text-align:center;max-width:42rem;margin:0 auto 2.5rem}
.center p{max-width:60ch;margin-inline:auto}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.review{position:relative;background:var(--white);border:1px solid transparent;box-shadow:8px 12px 30px -16px rgba(36,58,48,.26);border-radius:4px;padding:1.9rem 1.9rem 1.6rem;margin:0;display:flex;flex-direction:column}
.review::before{content:"„";position:absolute;right:1.2rem;top:-.7rem;font-family:var(--display);font-size:4.6rem;line-height:1;color:var(--sand);opacity:.16;pointer-events:none}
.stars{color:var(--sand-deep);letter-spacing:.15em;font-size:1.05rem;margin-bottom:.8rem;position:relative}
.review blockquote{font-family:var(--display);font-size:var(--step-1);line-height:1.5;color:var(--ink);margin:0 0 1.2rem;flex:1;padding-right:.5rem;font-optical-sizing:auto;text-wrap:pretty}
.review figcaption{display:flex;flex-direction:column;line-height:1.3}
.review figcaption strong{color:var(--petrol)}
.review figcaption span{font-size:.85rem;color:var(--ink-soft)}
.faq-wrap .faq details,.section-alt .faq details{border-color:var(--line)}

/* Kosten */
.kosten-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.fee-card{
  background:var(--white);border:1px solid transparent;box-shadow:8px 12px 30px -16px rgba(36,58,48,.26);border-radius:4px;padding:2.2rem;text-align:left;
  display:flex;flex-direction:column;gap:.7rem;align-items:stretch;
}
.fee-title{font-size:var(--step-2);color:var(--petrol);margin-bottom:.2rem;font-variation-settings:'opsz' 40,'wght' 400}
.fee-card p{font-size:.98rem;color:var(--ink-soft)}

/* FAQ */
.faq-wrap{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2.4rem 1rem 0;font-weight:600;font-size:1.05rem;color:var(--ink);position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--ink-soft);padding:0 0 1.2rem;margin:0;max-width:var(--measure)}
/* Weiches Auf- und Zuklappen ohne JavaScript; wo es fehlt, springt es wie bisher */
@supports selector(::details-content){
  .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .4s var(--ease),content-visibility .4s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto;block-size:calc-size(auto,size)}
}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem}
.contact-list{list-style:none}
.contact-list li{margin-bottom:1.1rem}
.contact-list strong{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-bottom:.15rem}
.hours-title{margin-bottom:1rem;margin-top:2.6rem}
.hours{list-style:none;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hours .t{font-weight:600;color:var(--petrol)}

/* Footer */
.footer{background:var(--petrol);color:rgba(255,255,255,.85);padding:2rem 0;font-size:.92rem}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer a{color:#fff;margin-left:1.4rem}
.footer p{margin:0}

/* Mobile CTA */
.mobile-cta{display:none}

/* ---------- Bewegung ---------- */
.reveal .part{opacity:0;transform:translateY(24px)}
.stars i{font-style:normal;display:inline-block;opacity:.25;transform:scale(.6)}

/* Weg A: Browser mit Scroll-Zeitachsen rechnen es selbst, ohne JavaScript. */
@supports (animation-timeline:view()){
  .reveal .part{animation:part-in linear both;animation-timeline:view();animation-range:entry 10% entry 80%}
  .trust-grid.reveal .part{animation:none;opacity:1;transform:none}
  .stars i{animation:star-in linear both;animation-timeline:view();animation-range:entry 25% entry 95%}
}
/* Weg B: alles Uebrige bekommt die Klasse .in weiterhin per JavaScript gesetzt. */
@supports not (animation-timeline:view()){
  .reveal .part{transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in .part{opacity:1;transform:none}
  .reveal.in .part:nth-child(2){transition-delay:.08s}
  .reveal.in .part:nth-child(3){transition-delay:.16s}
  .reveal.in .part:nth-child(4){transition-delay:.24s}
  .reveal.in .part:nth-child(5){transition-delay:.32s}
  .reveal.in .part:nth-child(6){transition-delay:.4s}
  .trust-grid.reveal .part{opacity:1;transform:none;transition:none}
  .stars i{transition:opacity .35s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1)}
  .reveal.in .stars i{opacity:1;transform:scale(1)}
  .reveal.in .stars i:nth-child(1){transition-delay:.35s}
  .reveal.in .stars i:nth-child(2){transition-delay:.45s}
  .reveal.in .stars i:nth-child(3){transition-delay:.55s}
  .reveal.in .stars i:nth-child(4){transition-delay:.65s}
  .reveal.in .stars i:nth-child(5){transition-delay:.75s}
}
@keyframes part-in{to{opacity:1;transform:none}}
@keyframes star-in{to{opacity:1;transform:scale(1)}}

.hero-text > *,.hero-figure{opacity:0;transform:translateY(18px);animation:rise .8s var(--ease) forwards}
.hero-figure{animation-delay:.1s}
.hero-text > :nth-child(2){animation-delay:.12s}
.hero-text > :nth-child(3){animation-delay:.24s}
.hero-text > :nth-child(4){animation-delay:.36s}
.hero-text > :nth-child(5){animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal .part,.hero-text > *,.hero-figure,.stars i{opacity:1;transform:none;animation:none;transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .timeline::after{transition:none}
  .timeline li:not(.on) h3,.timeline li:not(.on) p,.timeline li.on:not(.active) h3,.timeline li.on:not(.active) p{opacity:1;transform:none}
  .section-dark .timeline li:not(.on) h3,.section-dark .timeline li:not(.on) p,
  .section-dark .timeline li.on:not(.active) h3,.section-dark .timeline li.on:not(.active) p{opacity:1}
  .timeline li.on .dot{animation:none}
  .btn:hover .arrow{transform:none}
  .card:hover .card-fig img{transform:none}
  .card:hover .card-more::after{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .ablauf-grid,.about-grid,.kosten-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-photo{max-width:420px}
  /* Hero einspaltig: Portraet oben, als breiterer Ausschnitt statt Hochformat */
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .hero-figure{order:-1}
  .hero-figure img{aspect-ratio:3/2;object-position:center 14%}
  .facts{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .menu{
    position:absolute;top:var(--topbar);left:0;right:0;flex-direction:column;gap:0;
    padding:.2rem clamp(1.2rem,5vw,3rem) .8rem;
    background:var(--paper);
    border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 12px 24px rgba(0,0,0,.06);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .menu a{padding:.95rem 0;font-size:1.08rem;border-bottom:1px solid var(--line)}
  .menu a:last-child{border-bottom:0}
  .menu a::after{display:none}
  body.nav-open .menu{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:720px){
  :root{--topbar:66px}
  .brand-sub{display:none}
  .topbar .btn{display:none}
  .hero{padding:2rem 0 3rem}
  .hero-text h1{letter-spacing:-.02em;line-height:1.06}
  .hero-text h1{font-size:clamp(2.4rem,11vw,3rem)}
  .trust{padding-top:2.5rem}
  .trust-grid{grid-template-columns:1fr;gap:0}
  .trust-item{padding:1.1rem 0 1.6rem}
  .trust-item:last-child{padding-bottom:0}
  .section{padding:4rem 0}
  .statement{padding-top:0}
  .cards{grid-template-columns:1fr;gap:2.6rem}
  .card p{max-width:none}
  .reviews{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
  .footer a{margin:0 1.2rem 0 0}
  body:has(.mobile-cta){padding-bottom:5rem}
  .mobile-cta{
    display:inline-flex;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:40;
    padding:1rem;font-size:1.05rem;box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0;pointer-events:none;
  }
  body.cta-static .mobile-cta{opacity:1 !important;pointer-events:auto !important}
}

.card-more{display:inline-block;margin-top:.8rem;font-size:.88rem;font-weight:600;color:var(--sand-deep);transition:color .25s var(--ease)}
.card-more::after{content:"→";display:inline-block;margin-left:.35em;transition:transform .3s var(--ease)}
.card:hover .card-more{color:var(--petrol)}
.card:hover .card-more::after{transform:translateX(4px)}