/* RAAV Therapie · Kiel — Stylesheet 2026-09, Fassung 5 „Vorlage“ (keine Fremdaufrufe)
   Geometrie nach osteopathics.de, am 30.09.2026 ausgemessen: am Desktop eine breite Kachel je Abschnitt (20 px Rand),
   das Bild hängt 128 px über den Kachelrand hinaus bis an den Bildschirmrand, abwechselnd links und rechts, eckig,
   Schatten 4px 4px 10px; Textspalte 475 px; 128 px zwischen den Abschnitten. Am Telefon keine Kachel:
   Überzeile → Überschrift → Bild bündig an einer Bildschirmkante (32 px Luft gegenüber) → Text; 32 px Randabstand.
   Farben in der B2-Dosis aus dem Designkonzept: Leinen-Grund, warmweiße Kacheln, Bone für Flächen, ein Blau
   (Logo-Blau) für Überzeilen, Punkte und Knöpfe, der alte Fuß-Verlauf als Band unter dem Video und als Fuß. */
/* Schrift: Futura, wo das System sie hat (Mac, iPhone); sonst die selbst gehostete Jost (SIL Open Font License, assets/fonts/) */
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/jost-latin-700-normal.woff2") format("woff2")}

:root{
  --blau:#0000af;              /* Logo-Blau: Überzeilen, Aufzählungspunkte, Knöpfe, Fokus */
  --blau-hover:#1717c4;
  --band-a:#0040b0; --band-b:#002058;  /* Verlauf (289°) wie der Fuß der alten Seite: Band unter dem Video, Fuß */
  --grund:#f7f4ee;             /* Leinen */
  --karte:#fffdf9;             /* warmes Weiß der Kacheln */
  --flaeche:#efe8dc;           /* Bone: Telefon-Pille, Hinweiskästen */
  --linie:#e3ddd2;
  --titel:#000;
  --text:#141414;
  --text-lauf:#4a4844;         /* Fließtext, warmes Dunkelgrau (Vorlage: #424345) */
  --text-hell:#5b5750;
  --schatten-karte:0 1px 2px rgba(0,20,58,.06),0 14px 34px -14px rgba(0,20,58,.26);   /* Tiefe (Tim, 30.09.): weich, breit, blau getönt – auf allen Geräten gleich */
  --schatten-bild:0 2px 4px rgba(0,20,58,.10),0 18px 40px -12px rgba(0,20,58,.38);
  --knopf-schatten:0 2px 6px rgba(0,0,175,.25);
  --r-karte:4px; --r-knopf:6px;
  --ueberhang:clamp(56px,10vw,128px);   /* Überhang des Bildes über die Kachel (Vorlage 128 px bei 1280) */
  --rand:32px;                          /* Randabstand am Telefon (Vorlage 32 px) */
  --schrift:"Futura PT","futura-pt",Futura,"Jost","Avenir Next","Century Gothic","Segoe UI",Helvetica,Arial,sans-serif;
  --tempo:180ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:1rem;line-height:1.625}
img,video{max-width:100%;display:block}
a{color:var(--titel);text-decoration:underline;text-decoration-color:rgba(0,0,0,.3);text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--tempo)}
a:hover{text-decoration-color:var(--titel)}
h1,h2,h3,h4{font-weight:700;line-height:1.15;margin:0;color:var(--titel);text-wrap:balance}
p,li{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:2px}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--blau);color:#fff;padding:.6rem 1rem;border-radius:var(--r-knopf);text-decoration:none;font-weight:700}
.sprung:focus{top:1rem}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--rand)}
.ueberzeile{color:var(--blau);font-size:1rem;font-weight:700;line-height:1.4;margin:0 0 .35rem}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--blau);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;line-height:1.3;padding:.9rem 1.3rem;border-radius:var(--r-knopf);border:2px solid var(--blau);box-shadow:var(--knopf-schatten);transition:background-color var(--tempo),border-color var(--tempo),transform var(--tempo);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.btn.hell{background:#fff;color:var(--blau);border-color:#fff}
.btn .nr{white-space:nowrap}
.btn.rahmen{background:transparent;color:var(--blau);border-color:var(--blau);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--blau-hover);border-color:var(--blau-hover)}
  .btn.hell:hover{background:var(--flaeche);border-color:var(--flaeche);color:var(--blau)}
  .btn.rahmen:hover{background:var(--blau);border-color:var(--blau);color:#fff}
}
@media (max-width:639px){.band .btn,.kontakt .cta-zeile .btn,.cta-box .btn{display:block;width:100%;white-space:normal;text-align:center;line-height:1.45}.band .btn svg,.kontakt .cta-zeile .btn svg,.cta-box .btn svg{display:inline-block;vertical-align:-.2em;margin-right:.35rem}}

/* Kopfzeile: Logo, Nummer, Sprache – ohne Menü (Tims Vorgabe); klebt oben, feine Linie sobald gescrollt */
header.kopf{position:sticky;top:0;z-index:40;background:var(--grund);border-bottom:1px solid transparent;transition:border-color var(--tempo),box-shadow var(--tempo)}
header.kopf.gescrollt{border-bottom-color:var(--linie);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;max-width:1240px;margin:0 auto;padding:.35rem .75rem .35rem 1.25rem;min-height:3.5rem}
.topbar .logo a{display:flex;align-items:center;min-height:44px}
.topbar .logo img{height:2rem;width:auto}
.topbar .rechts{display:flex;align-items:center;gap:.5rem}
.topbar .tel{display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px;background:var(--flaeche);color:var(--titel);text-decoration:none;font-weight:700;white-space:nowrap;transition:background-color var(--tempo)}
.topbar .tel svg{width:1.1rem;height:1.1rem;fill:currentColor;flex:none}
.sprache{display:flex;align-items:center;color:#9a958c;white-space:nowrap}
.sprache a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--titel);text-decoration:none;font-weight:500;border-radius:6px;transition:background-color var(--tempo)}
.sprache a[aria-current]{font-weight:700;text-decoration:underline;text-decoration-color:var(--titel);text-underline-offset:.3em}
@media (hover:hover) and (pointer:fine){.topbar .tel:hover{background:#e7dfd0}.sprache a:hover{background:var(--flaeche)}}

/* Bühne: Video (oder Kopfbild) randlos in voller Breite; das tiefblaue Band liegt über dem unteren Teil und blendet
   nach oben aus, Logo und Leistungszeile in Weiß stehen auf dem laufenden Bild (Tims Wunsch 30.09.2026, wie das OG-Bild).
   Am Telefon steht das Bild hochkant (3:4), damit über dem Band genug Bild bleibt. */
.hero{position:relative;margin:0}
.hero-video,.kopfbild{position:relative;aspect-ratio:3/4;max-height:min(720px,88vh);background:var(--flaeche);overflow:hidden}
.hero-video video,.kopfbild img{width:100%;height:100%;object-fit:cover}
.hero-video .pause{position:absolute;right:.9rem;top:.9rem;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(0,20,58,.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--tempo)}
.hero-video .pause svg{width:1rem;height:1rem;fill:currentColor}
.hero-video .pause:hover{background:rgba(0,20,58,.6)}
.band{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.85rem;justify-items:start;padding:6.5rem var(--rand) 1.5rem;background:linear-gradient(to top,var(--band-b) 0%,rgba(0,32,88,.96) 26%,rgba(0,32,88,.72) 55%,rgba(0,32,88,.3) 80%,rgba(0,32,88,0) 100%);color:#fff}
.band-logo{height:2.75rem;width:auto}
.band-text{margin:0;font-weight:700;font-size:1.375rem;line-height:1.25;color:#fff;text-wrap:balance}
.band-termin{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}
.band-note{font-size:.95rem;color:#d5dcf0}
.band-tel{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.band-tel svg{width:1em;height:1em;fill:currentColor;flex:none}
.band-tel .nr{white-space:nowrap}

/* Einleitung unter dem Band: Überzeile, H1, ein Satz, Sekretariatshinweis, Bewertungen */
.intro{max-width:880px;margin:0 auto;padding:2.5rem var(--rand) 0}
.intro p{margin:0 0 .75rem;color:var(--text-lauf)}
.intro .ueberzeile{margin-bottom:.75rem}
.intro .lead{font-size:1.25rem;line-height:1.45;color:var(--titel);margin-bottom:1rem;text-wrap:balance}
.intro .hinweis strong{color:var(--titel)}
.intro p:last-child{margin:0}

/* Abschnitte (Gerüst .card-section > .card > .text-container(.title,.description) + .carousel)
   Telefon/Tablet: keine Kachel – Überzeile, Überschrift, Bild an der Kante, Text */
.card-section{padding:4rem 0 0}
.card{display:flex;flex-direction:column}
.text-container{display:contents}
.title{order:1;padding:0 var(--rand);margin:0}
.title h3{color:var(--blau);font-size:1rem;font-weight:700;line-height:1.4;margin:0 0 .35rem}
.title h2{font-size:1.875rem;margin:0}
.description{order:3;padding:0 var(--rand);margin-top:1.5rem;color:var(--text-lauf)}
.description p{margin:0 0 .85rem}
.description ul{padding-inline-start:20px;margin:.5rem 0 1rem}
.description li{margin:.2rem 0}
.description li::marker{content:"• ";color:var(--blau);font-weight:700}
.description strong{color:var(--titel)}
.description>:last-child{margin-bottom:0}
.description p>a:only-child{display:inline-block;padding:.5rem 0;margin:-.5rem 0}  /* „>“-Verweise: Tippfläche ≈ 44 px */
.carousel{order:2;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten-bild);margin:1.5rem var(--rand) 0 0;width:calc(100% - var(--rand))}
.card.image-right .carousel{margin:1.5rem 0 0 var(--rand)}
.carousel .spur{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel .spur::-webkit-scrollbar{display:none}
.carousel .spur img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.carousel .knopf{position:absolute;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--titel);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:background-color var(--tempo)}
.carousel .knopf:hover{background:#fff}
.carousel .knopf svg{width:1.1rem;height:1.1rem;fill:currentColor}
.carousel .knopf.zurueck{left:.6rem}.carousel .knopf.vor{right:.6rem}
.carousel .punkte{position:absolute;left:0;right:0;bottom:.6rem;display:flex;justify-content:center;gap:.4rem}
.carousel .punkte span{width:.45rem;height:.45rem;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.carousel .punkte span.aktiv{background:#fff}
.carousel.einzel .knopf,.carousel.einzel .punkte{display:none}

/* Leitsatz auf Schwarzweiß-Hintergrund: das Praxisfoto liegt hinten und läuft langsamer als die Seite (nur CSS) */
.statement{position:relative;overflow:hidden;overflow:clip;display:grid;place-items:center;min-height:clamp(240px,42vw,440px);margin-top:4rem;padding:3rem var(--rand);color:#fff;text-align:center;view-timeline-name:--statement}
.statement .hintergrund,.kontakt .hintergrund{position:absolute;inset:0;z-index:0;background:#c9c6bf}
.statement .hintergrund img,.kontakt .hintergrund img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover}
.statement .hintergrund::after{content:"";position:absolute;inset:0;background:rgba(0,20,58,.48)}
.statement p{position:relative;z-index:1;max-width:820px;margin:0;font-size:clamp(1.375rem,3.2vw,2.125rem);font-weight:700;line-height:1.3;text-wrap:balance}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .statement .hintergrund img{animation:drift linear both;animation-timeline:--statement;animation-range:cover 0% cover 100%}
    .kontakt .hintergrund img{animation:drift linear both;animation-timeline:--kontakt;animation-range:cover 0% cover 100%}
  }
}
@keyframes drift{from{transform:translate3d(0,-12%,0)}to{transform:translate3d(0,12%,0)}}

/* Kontakt: Angaben als Kachel auf dem Schwarzweiß-Praxisraum (Hintergrund, langsam mitlaufend) */
.kontakt{position:relative;overflow:hidden;overflow:clip;margin-top:4rem;padding:2.5rem var(--rand);view-timeline-name:--kontakt}
.kontakt .hintergrund::after{content:"";position:absolute;inset:0;background:rgba(0,20,58,.28)}
.kontakt .wrap{position:relative;z-index:1;padding:0}
.kontakt .angaben{max-width:560px;background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte);padding:1.75rem 1.5rem}
.kontakt h2{font-size:1.875rem;margin:0 0 .75rem}
.kontakt h3{color:var(--blau);font-size:1rem;font-weight:700;line-height:1.4;margin:1.5rem 0 .4rem}
.kontakt p{margin:0 0 .5rem;color:var(--text-lauf)}
.kontakt .zeiten{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.25rem;color:var(--text-lauf)}
.kontakt .zeiten span:nth-child(odd){color:var(--text-hell)}
.kontakt .nebenstandort{font-size:.95rem;color:var(--text-hell);margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--linie)}
.kontakt .cta-zeile{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.kontakt .cta-zeile .btn.hell{border-color:var(--blau)}

/* Fuß: Verlauf wie die alte Seite */
footer{margin-top:4rem;padding:3.5rem 1.25rem 0;background:linear-gradient(289deg,var(--band-a),var(--band-b));color:#fff}
main:has(.kontakt)+footer{margin-top:0}
footer .content{display:flex;flex-direction:column;align-items:center;gap:2.25rem;max-width:1200px;margin:0 auto}
footer .logo-container{display:flex;justify-content:center}
footer .logo{display:none}
footer .logo_alt{display:block;height:52px;width:auto}
footer .addresses-container{display:flex;flex-direction:column;align-items:flex-start;gap:2.25rem}
footer .address h4{font-size:1.5rem;margin:0 0 .5rem;color:#fff}
footer .address a{display:flex;align-items:center;gap:.9rem;min-height:44px;font-size:1rem;line-height:1.45;text-decoration:none;color:#fff}
footer .address a:hover{text-decoration:underline}
footer .address svg{width:1.25rem;height:1.25rem;fill:#fff;flex:none}
footer .address .phone{display:flex;align-items:center;gap:.9rem}
footer .address .klein{font-size:.9rem;color:#d5dcf0;margin:.1rem 0 0 2.15rem}
footer .links-container{display:flex;flex-wrap:wrap;justify-content:center;max-width:1200px;margin:2.5rem auto 0;padding:.75rem 0 1.25rem;border-top:1px solid rgba(255,255,255,.18)}
footer .links-container a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;color:#fff;font-size:1rem;text-decoration:none}
footer .links-container a:hover{text-decoration:underline}

/* Feste Anrufleiste (nur Telefon) */
.anrufleiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;transform:translateY(110%);transition:transform .25s ease;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(247,244,238,.96);border-top:1px solid var(--linie);box-shadow:0 -1px 3px rgba(0,0,0,.06)}
.anrufleiste.zeigen{transform:none}
.anrufleiste .btn{flex:1;justify-content:center;padding:.8rem .6rem}
.anrufleiste .btn.rahmen{flex:0 0 auto;min-width:7.5rem}
body.mit-leiste footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}

/* Textseiten (Impressum, Datenschutz, Blog, 404) und Blog-Artikel: schmale Lesespalte; ab 1024 px eine Kachel */
.statement-section{padding:2.5rem var(--rand) 0}
.statement-section .content{max-width:880px;margin:0 auto}
.statement-section .content>*,.statement-section .content .markdown>*{margin-top:0;margin-bottom:1rem}
.statement-section .content p,.statement-section .content li{color:var(--text-lauf)}
.statement-section .content li::marker{color:var(--blau)}
.statement-section .content h1{font-size:clamp(1.75rem,3vw,2.25rem);margin:.25rem 0 1rem}
.statement-section .content h2{font-size:1.5rem;margin-top:1rem}
.statement-section .content h3{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}
.statement-section .content a.btn,.statement-section .content a.btn:hover{text-decoration:none;color:#fff}
.statement-section .content a.btn.rahmen{color:var(--blau)}
@media (hover:hover) and (pointer:fine){.statement-section .content a.btn.rahmen:hover{color:#fff}}
.statement-section .content a.btn.rahmen{color:var(--blau)}
@media (hover:hover) and (pointer:fine){.statement-section .content a.btn.rahmen:hover{color:#fff}}
.statement-section .content .blog-liste{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem}
.statement-section .content .blog-liste li{margin:0}
.statement-section .content .blog-liste a{display:block;padding:1.25rem 1.25rem 1.3rem;background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte);color:inherit;text-decoration:none;transition:transform var(--tempo),box-shadow var(--tempo)}
.statement-section .content .blog-liste h2{font-size:1.3rem;margin:0 0 .4rem;transition:color var(--tempo)}
@media (hover:hover) and (pointer:fine){.statement-section .content .blog-liste a:hover{transform:translateY(-2px);box-shadow:var(--schatten-bild)}.statement-section .content .blog-liste a:hover h2{color:var(--blau)}}
.blog-liste .meta,.artikel-kopf .meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;color:var(--text-hell);font-size:.95rem}
.blog-liste .teaser{margin:.5rem 0 0;color:var(--text-lauf)}
.artikel-kopf{margin-bottom:1.5rem}
.artikel-kopf h1{font-size:clamp(1.75rem,3vw,2.25rem);margin:.5rem 0 .5rem}
.artikel-kopf .ueberzeile{font-size:1rem}
.statement-section .content .zurueck,.landing .zurueck,.abschluss .zurueck{display:inline-flex;align-items:center;min-height:44px;margin:-.4rem 0 .6rem;color:var(--titel);font-size:1rem}
.statement-section .content .stand{color:var(--text-hell);font-size:.95rem}
.statement-section .content .hinweis-box{background:var(--flaeche);box-shadow:inset 4px 0 0 var(--blau);padding:1rem 1.25rem;border-radius:var(--r-karte);color:var(--text-lauf)}
.cta-box{margin:2.5rem 0 1rem;padding:1.5rem;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:inset 4px 0 0 var(--blau)}
.cta-box h2,.statement-section .content .cta-box h2{font-size:1.25rem;margin:0 0 .5rem}
.cta-box p{margin:0 0 1rem;color:var(--text-lauf)}
.cta-box .knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:639px){.cta-box .knoepfe .btn{flex:1 1 100%}}
.statement-section .content .cta-box{margin-top:2rem}
@media (max-width:639px){.cta-box{padding:1.25rem 1.1rem}}

/* Kiel-Terminseite und Abschluss der Unterseite: schmale Spalte unter Kopfbild und Band */
.landing-karte,.abschluss{max-width:880px;margin:3rem auto 0;padding:0 var(--rand)}
.landing-karte h2{font-size:1.35rem;margin:1.75rem 0 .6rem}
.landing-karte h2:first-child{margin-top:0}
.landing-karte p{margin:0 0 .85rem;color:var(--text-lauf)}
.landing .liste{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.landing .liste li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-lauf);line-height:1.5}
.landing .liste li strong{color:var(--titel)}
.landing .liste svg{width:1.25rem;height:1.25rem;fill:var(--blau);flex:none;margin-top:.15rem}
.landing .foto{margin:3rem var(--rand) 0 0;width:calc(100% - var(--rand));aspect-ratio:3/2;overflow:hidden;box-shadow:var(--schatten-bild);background:var(--flaeche)}
.landing .foto img{width:100%;height:100%;object-fit:cover}
.abschluss .cta-box{margin-top:0}

@media (min-width:640px){
  .band-termin{flex-direction:row;align-items:center;gap:.5rem 1rem}
}
@media (min-width:768px){
  html{scroll-padding-top:5rem}
  .topbar{min-height:4.25rem;padding:.4rem 1.5rem}
  .topbar .logo img{height:2.25rem}
  .topbar .tel{display:inline-flex}
  .hero-video{aspect-ratio:16/9;max-height:min(720px,82vh)}
  .kopfbild{aspect-ratio:2/1;max-height:min(560px,70vh)}
  .band{grid-template-columns:auto 1fr;align-items:center;gap:1rem 2rem;padding:7rem 2.5rem 1.75rem}
  .band-logo{height:3.25rem}
  .band-text{font-size:1.5rem}
  .band-termin{grid-column:1/-1}
  .intro{padding:3.5rem 2rem 0}
  .card-section{padding:5rem 2rem 0}
  .card{max-width:880px;margin:0 auto}
  .title,.description{padding:0}
  .carousel{margin:1.75rem 0 0;width:100%}
  .card.image-right .carousel{margin:1.75rem 0 0}
  .title h2{font-size:2rem}
  .statement{margin-top:5rem}
  .kontakt{margin-top:5rem;padding:5rem 2rem}
  .kontakt .wrap{max-width:880px}
  .kontakt .angaben{padding:2.5rem}
  .kontakt h2{font-size:2rem}
  .statement-section{padding:3.5rem 2rem 0}
  .statement-section .content .blog-liste h2{font-size:1.45rem}
  .landing-karte,.abschluss{padding:0 2rem;margin-top:3.5rem}
  .landing .liste{grid-template-columns:1fr 1fr;gap:1.1rem 2rem}
  .landing .foto{max-width:816px;margin:3.5rem auto 0;width:auto}
  footer{margin-top:5rem;padding:5rem 2.5rem 0}
  footer .content{flex-direction:row;justify-content:space-between;align-items:flex-start}
  footer .logo-container{justify-content:flex-start}
  footer .logo_alt{height:57px}
  footer .addresses-container{flex-direction:row;gap:3rem;margin-top:4rem}
  .anrufleiste{display:none}
  body.mit-leiste footer{padding-bottom:0}
}
@media (min-width:1024px){
  body{font-size:1.125rem}
  .topbar{min-height:4.5rem;padding:.4rem 2.5rem}
  .topbar .logo img{height:2.5rem}
  .ueberzeile,.title h3,.kontakt h3,.artikel-kopf .ueberzeile{font-size:1.125rem}
  .band{grid-template-columns:auto 1fr auto;padding:8rem 3rem 2rem;gap:2.5rem}
  .band-logo{height:3.75rem}
  .band-text{font-size:1.625rem}
  .band-termin{grid-column:auto;flex-direction:column;align-items:flex-end;gap:.35rem}
  .intro{padding:5rem 2rem 0}
  .intro .lead{font-size:1.5rem}
  /* Kachel je Abschnitt wie die Vorlage: 20 px Rand, Bild hängt um --ueberhang über die Kachel bis an den Bildschirmrand */
  .card-section{padding:8rem 20px 0}
  .card{display:grid;grid-template-columns:minmax(0,585fr) minmax(0,527fr);align-items:center;max-width:none;width:calc(100% - var(--ueberhang));margin:0;padding:2rem 0;background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte)}
  .card.image-left{margin-left:var(--ueberhang)}
  .card.image-right{margin-right:var(--ueberhang);grid-template-columns:minmax(0,527fr) minmax(0,585fr)}
  .text-container{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 2.5rem 0 3.25rem}
  .card.image-right .text-container{grid-column:1;grid-row:1;padding:0 3.25rem 0 2.5rem}
  .card.image-left .text-container{grid-column:2;grid-row:1}
  .carousel{margin:0;width:auto}
  .card.image-left .carousel{grid-column:1;grid-row:1;margin-left:calc(-1 * var(--ueberhang))}
  .card.image-right .carousel{grid-column:2;grid-row:1;margin:0;margin-right:calc(-1 * var(--ueberhang))}
  .description{margin-top:1.25rem}
  .title h2{font-size:2.25rem}
  .statement{margin-top:8rem;min-height:clamp(320px,34vw,440px)}
  .kontakt{margin-top:8rem;padding:7rem 2.5rem}
  .kontakt .wrap{max-width:1240px}
  .kontakt .angaben{margin-left:calc(var(--ueberhang) - 20px)}
  .kontakt h2{font-size:2.25rem}
  .statement-section{padding:5rem 2rem 0}
  .statement-section .content{padding:2.5rem 3rem;background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte)}
  .landing-karte{padding:2.25rem 2.5rem;background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte)}
  .abschluss{margin-top:5rem}
  footer{margin-top:8rem}
  footer .logo_alt{height:80px}
  footer .addresses-container{gap:4rem;margin-top:5rem}
  footer .address h4{font-size:1.875rem}
  footer .address a{font-size:1.125rem}
  footer .links-container{margin-top:4rem}
  footer .links-container a{font-size:1.125rem}
  footer .links-container a+a::before{content:"";position:absolute;left:0;top:50%;height:1.1em;margin-top:-.55em;border-left:1px solid rgba(255,255,255,.45)}
}
@media (min-width:1280px){
  footer .logo_alt{height:85px}
}
@media (min-width:1440px){
  .band-text{font-size:1.875rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

@media print{
  .topbar .rechts,.hero-video,.anrufleiste,.carousel,.band-termin,.cta-zeile,.cta-box a,.hintergrund{display:none!important}
  header.kopf{position:static;box-shadow:none}
  body{color:#000;background:#fff}
  .band,footer{background:#fff!important;color:#000!important}
  .card,.statement-section .content,.kontakt .angaben,.landing-karte{box-shadow:none!important}
  .statement{color:#000;min-height:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}

/* Stufe 6 · Termin: Lemniscus-Formular (my/OT) als Karte auf Schwarzweiß-Bühne */
.hero-foto.kurz .kopfbild{aspect-ratio:4/3;max-height:min(520px,58vh)}
.terminseite .band-termin{gap:.25rem}
.termin-buehne{position:relative;overflow:hidden;overflow:clip;padding:2rem var(--rand) 3rem;view-timeline-name:--termin}
.termin-buehne .hintergrund{position:absolute;inset:0;z-index:0;background:#c9c6bf}
.termin-buehne .hintergrund img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover}
.termin-buehne .hintergrund::after{content:"";position:absolute;inset:0;background:rgba(0,20,58,.32)}
.termin-buehne .wrap{position:relative;z-index:1;max-width:800px;margin:0 auto}
.termin-karte{background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-karte);padding:1.5rem 1.15rem 1.5rem}
.termin-karte .ueberzeile{margin-bottom:.5rem}
.termin-karte h2{font-size:1.75rem;margin:0 0 .75rem}
.termin-karte .termin-hinweis{margin:0 0 1.25rem;color:var(--text-lauf)}
.termin-karte #pss{font-size:16px;--pss-infos-underline-color:var(--blau);--pss-tab-underline-color:var(--bone);--pss-tab-selected-underline-color:var(--blau);--pss-slots-button-selected-color:var(--blau);--pss-appname-color:var(--blau);--pss-font-family:Futura,Jost,"Century Gothic",sans-serif}
.termin-karte .pss-wrapper,.termin-karte .pss-main{margin:0 auto}
.termin-fallback{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--linie);color:var(--text-lauf);font-size:.95rem;line-height:1.5}
.termin-fallback a{color:var(--blau);font-weight:700}
.termin-fakten{max-width:880px;margin:0 auto;padding:3rem var(--rand) 0;display:grid;gap:1.5rem}
.termin-fakten h3{color:var(--blau);font-size:1rem;margin:0 0 .3rem}
.termin-fakten p{margin:0;color:var(--text-lauf)}
.termin-fakten a{color:var(--blau)}
.terminseite .abschluss{max-width:880px;margin:0 auto;padding:2rem var(--rand) 0}
@supports (animation-timeline:view()){.termin-buehne .hintergrund img{animation:drift linear both;animation-timeline:--termin;animation-range:cover 0% cover 100%}}
@media (min-width:640px){.termin-fakten{grid-template-columns:repeat(3,1fr);gap:2rem}}
@media (min-width:768px){.hero-foto.kurz .kopfbild{aspect-ratio:3/1;max-height:min(440px,52vh)}.termin-buehne{padding:4rem 2rem 5rem}.termin-karte{padding:2.5rem 2.5rem 2.25rem}.termin-karte h2{font-size:2rem}}
@media (min-width:1024px){.termin-buehne{padding:5rem 2.5rem 6rem}}

/* Stufe 6 · Bühne: feste Höhen statt Seitenverhältnis (aspect-ratio + max-height hatte die Breite begrenzt) */
.hero-video,.kopfbild{aspect-ratio:auto;height:min(133.34vw,720px,88vh)}
.hero-foto.kurz .kopfbild{aspect-ratio:auto;height:min(75vw,520px,58vh)}
@media (min-width:768px){.hero-video{height:min(56.25vw,720px,82vh)}.kopfbild{height:min(50vw,560px,70vh)}.hero-foto.kurz .kopfbild{height:min(33.34vw,440px,52vh)}}

/* Stufe 6 · Terminseite: Band gespiegelt – Motiv (Behandler, Gesicht) sitzt links im Foto, Logo und Überschrift daher rechtsbündig */
.terminseite .band{justify-items:end;text-align:right}
.terminseite .band-termin{align-items:flex-end}
@media (min-width:768px){.terminseite .band{grid-template-columns:1fr auto}.terminseite .band-text{grid-column:1;grid-row:1;justify-self:end}.terminseite .band-logo{grid-column:2;grid-row:1}.terminseite .band-termin{grid-column:1/-1;justify-content:flex-end}}
@media (min-width:1024px){.terminseite .band{grid-template-columns:auto 1fr auto}.terminseite .band-termin{grid-column:1;grid-row:1;align-items:flex-start;text-align:left;justify-self:start}.terminseite .band-text{grid-column:2}.terminseite .band-logo{grid-column:3}}

/* Stufe 6 · Terminseite: feststehender Hintergrund statt Mitlauf – die Abschnittshöhe ändert sich mit jedem Formularschritt,
   der höhenabhängige Mitlauf sprang deshalb (Tim, iPhone, 30.09.). Bild fest im Fenster, per clip-path auf den Abschnitt beschnitten. */
.termin-buehne{clip-path:inset(0)}
.termin-buehne .hintergrund img{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;object-fit:cover;animation:none!important;transform:none!important}

/* Stufe 6 · Karussell-Pfeile (Tim, 30.09.): auf Touch-Geräten weg – gewischt wird ohnehin, Punkte zeigen die Bildzahl, Bilder laufen selbst weiter;
   am Desktop kleiner und nur beim Darüberfahren oder per Tastatur sichtbar */
.carousel .knopf{width:2.25rem;height:2.25rem;opacity:0;transition:opacity var(--tempo),background-color var(--tempo)}
.carousel:hover .knopf,.carousel .knopf:focus-visible{opacity:1}
.carousel .knopf svg{width:.95rem;height:.95rem}
@media (hover:none),(pointer:coarse){.carousel .knopf{display:none}}

/* Stufe 6 · Karussell: Überblenden statt Schieben (Tim, 30.09.) – Bilder gestapelt, aktives Bild blendet ein und zoomt kaum merklich */
.carousel .spur{display:grid;overflow:hidden;scroll-snap-type:none}
.carousel .spur img{grid-area:1/1;flex:none;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform}
.carousel .spur img.aktiv{opacity:1;animation:atmen 9s ease-out both}
@keyframes atmen{from{transform:scale(1)}to{transform:scale(1.045)}}
.carousel.einzel .spur img{opacity:1;animation:none}
.carousel .punkte button{width:.45rem;height:.45rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:background-color var(--tempo),transform var(--tempo)}
.carousel .punkte button.aktiv{background:#fff;transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.carousel .spur img{transition:none;animation:none!important}}


/* Stufe 6 · Videofläche: Platzhalter statt heller Fläche, bis Vorschaubild und Video da sind (Tim, 30.09.: „weißliches Loch“ beim ersten Laden) –
   Mittelfarbe des Vorschaubilds plus 32-px-Unschärfebild als Daten-URI (kein zusätzlicher Abruf) */
.hero-video{background:#b07e6f url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYwLjMxLjEwMgD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAGQAAAwADAAAAAAAAAAAAAAAAAAMFAQIG/8QAIRAAAQQCAgMBAQAAAAAAAAAAAQACAwQREiExBRNBFDL/xAAXAQEBAQEAAAAAAAAAAAAAAAAEAwAB/8QAGxEAAQUBAQAAAAAAAAAAAAAAAAECEjFRESH/2gAMAwEAAhEDEQA/AKXlIopmGMP2bjtRfHV461vZ8gHwI/XYdE0MiLiTylW688ro8DQg5RZej4cQ7avfjZFq6QHjCnmeOSRzcZ5UMOsaaEt2x2nUmTQB7vZ7Afh+KktJozB0IGvSRb/oIQitsUptJwGn7hYh6KELr7M2j//Z") center/cover no-repeat}