/* ==========================================================================
   Pilates Christoph Klaus — v2
   Design, Farben und Schriften sind aus der bestehenden Website übernommen
   (Outfit / Manrope / League Spartan, Terracotta #BA5C3E, Kartenfarben,
   graues Kopfband, cremefarbene Abschnitte, Pillenbuttons).
   Neu ist die Umsetzung: statisch, schnell, ohne Plugins, mobil zuerst.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, wie auf der alten Seite) ---------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/league-spartan-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  --terra:#BA5C3E;
  --terra-dark:#9E4B31;
  --terra-light:#D07C60;
  --rose:#FFF5F2;
  --cream:#F7EEE1;

  /* Kartenfarben der bestehenden Seite */
  --c-pilates:#B49070;
  --c-spiral:#DFB7AD;
  --c-ballett:#B3B3B3;
  --c-meditation:#969985;
  --c-sauerstoff:#BA5C3E;

  --band:#B5ADA8;
  --band-dark:#9F958F;
  --footer:#635A54;   /* warmes Dunkelgrau aus dem Kopfband #B5ADA8 abgeleitet;
                         weisse Schrift erreicht damit 6,7:1 statt 2,4:1 */
  --dark:#252525;
  --ink:#333333;
  --text:#7A7A7A;
  --line:#E4E0DC;
  --line-soft:#EFEBE7;
  --white:#fff;

  --head:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --logo:'League Spartan',ui-sans-serif,system-ui,sans-serif;

  --wrap:1140px;
  --wrap-wide:1320px;
  --gut:clamp(1.1rem,4.5vw,2rem);
  --sect:clamp(3.25rem,7vw,6rem);
  --r:8px;
  --r-lg:14px;
  --pill:500px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 14px 40px -22px rgba(37,37,37,.32);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.7;font-weight:500;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
@media (min-width:768px){body{font-size:15.5px}}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--head);font-weight:500;line-height:1.18;color:var(--ink)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--terra);color:#fff}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

/* ---------- Typo ---------- */
.t-hero{font-size:clamp(2rem,1.1rem + 3.9vw,3.5rem);font-weight:300;line-height:1.1;letter-spacing:-.01em}
.t-h1{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.7rem);font-weight:400;line-height:1.16}
.t-h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem);font-weight:500;line-height:1.24}
.t-h3{font-size:clamp(1.12rem,1rem + .55vw,1.35rem);font-weight:500;line-height:1.3}
.t-h4{font-size:1.03rem;font-weight:600;line-height:1.35}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.12rem);line-height:1.72;color:var(--text);font-weight:500}
.small{font-size:.875rem;line-height:1.65}
.tiny{font-size:.78rem;line-height:1.55}
.muted{color:var(--text)}
.terra{color:var(--terra)}
.center{text-align:center}

/* Terracotta-Abschnittstitel – das Leitmotiv der bestehenden Seite */
.sec-title{font-family:var(--head);color:var(--terra);font-weight:500;
  font-size:clamp(1.28rem,1.1rem + .9vw,1.7rem);line-height:1.25;margin:0 0 .35rem}
.sec-sub{color:var(--text);font-size:1rem;margin:0 0 1.75rem;max-width:62ch}
.sec-title--lg{font-size:clamp(1.7rem,1.2rem + 2.1vw,2.7rem);line-height:1.14;margin-bottom:.45rem}
.sec-lead{font-family:var(--head);font-weight:400;color:var(--ink);
  font-size:clamp(1.02rem,.96rem + .42vw,1.25rem);line-height:1.38;margin:0 0 1.1rem;max-width:34ch}

/* ---------- Layout ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*2,var(--wrap-wide));margin-inline:auto}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(2.25rem,5vw,3.5rem)}
.section--cream{background:var(--cream)}
.section--rose{background:var(--rose)}
.section--band{background:var(--band);color:#fff}
.section--dark{background:var(--dark);color:#fff}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.stack>*+*{margin-top:1rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}.mb-4{margin-bottom:2.4rem}
.maxw-60{max-width:60ch}.mx-auto{margin-inline:auto}

.grid{display:grid;gap:clamp(1.25rem,3vw,2.25rem)}
@media (min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px) and (max-width:899px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.g4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:560px) and (max-width:979px){.g4{grid-template-columns:repeat(2,1fr)}}
.split{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--main{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .split--media{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .split--center{align-items:center}
}

/* ---------- Buttons (Pillenform wie auf der bestehenden Seite) ---------- */
.btn{
  --bg:var(--terra);--fg:#fff;--bd:var(--terra);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:12px 24px;background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:var(--pill);font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:.4px;line-height:1.2;cursor:pointer;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{--bg:var(--terra-dark);--bd:var(--terra-dark);transform:translateY(-1px)}
.btn--ghost{--bg:transparent;--fg:var(--terra);--bd:var(--terra)}
.btn--ghost:hover{--bg:var(--terra);--fg:#fff}
.btn--glass{--bg:rgba(255,255,255,.28);--fg:#fff;--bd:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn--glass:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--white{--bg:#fff;--fg:var(--terra);--bd:#fff}
.btn--white:hover{--bg:var(--rose);--bd:var(--rose)}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--lg{padding:15px 32px;font-size:16px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.65rem}
.btn-row--center{justify-content:center}

.tlink{color:var(--terra);font-weight:700;display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;
  transition:gap .25s var(--ease)}
.tlink::after{content:"›";font-size:1.15em;line-height:1;transform:translateY(-1px)}
.tlink:hover{gap:.6rem;color:var(--terra-dark)}

/* ---------- Kopfbereich ---------- */
.header{position:absolute;top:0;left:0;right:0;z-index:60;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem}
@media (min-width:1080px){.header__inner{min-height:6rem}}
.header.is-solid{position:fixed;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.header.is-solid .brand__name,.header.is-solid .nav>a:not(.btn),.header.is-solid .nav__btn{color:var(--ink)}
.header.is-solid .brand__mark{color:var(--terra)}

/* Seiten ohne Kopfband (Danke, Impressum, Datenschutz, 404, Gesundheitsformular):
   dort steht die Kopfzeile auf hellem Grund. Die Umschaltung auf dunkle Schrift
   passierte bisher erst nach 40 px Scrollen - am Seitenanfang war die Wortmarke
   weiss auf weiss und damit unsichtbar. */
.header[data-overlay="false"]{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line)}
.header[data-overlay="false"] .brand__name,
.header[data-overlay="false"] .nav>a:not(.btn),
.header[data-overlay="false"] .nav__btn{color:var(--ink)}
.header[data-overlay="false"] .brand__mark{color:var(--terra)}

.brand{display:flex;align-items:center;gap:.7rem;color:#fff;flex:none}
.brand__mark{width:2.9rem;height:2.9rem;flex:none;color:#fff;opacity:.95;transition:transform .7s var(--ease)}
@media (min-width:1080px){.brand__mark{width:3.4rem;height:3.4rem}}
.brand:hover .brand__mark{transform:rotate(-20deg)}
.brand__name{font-family:var(--logo);font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  font-size:clamp(.78rem,.7rem + .35vw,1.05rem);line-height:1.1;white-space:nowrap}

.nav{display:none}
@media (min-width:1080px){
  .nav{display:flex;align-items:center;gap:.1rem}
  .nav>a:not(.btn),.nav__btn{
    display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .8rem;color:#fff;
    font-family:var(--body);font-size:.9rem;font-weight:600;background:none;border:0;cursor:pointer;
    position:relative;transition:color .25s var(--ease);
  }
  .nav>a:not(.btn)::after,.nav__btn::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.25rem;height:1.5px;
    background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
  .nav>a:not(.btn):hover::after,.nav__group:hover .nav__btn::after,.nav>a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
  .header.is-solid .nav>a:not(.btn)[aria-current="page"]{color:var(--terra)}
}
.nav__group{position:relative}
.nav__btn>svg{width:.6rem;height:.6rem;opacity:.75;transition:transform .3s var(--ease)}
.nav__group:hover .nav__btn>svg,.nav__group:focus-within .nav__btn>svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:100%;left:0;min-width:16rem;background:#fff;border-radius:var(--r);
  padding:.4rem;box-shadow:0 20px 48px -18px rgba(37,37,37,.3);border:1px solid var(--line-soft);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__group:hover .nav__menu,.nav__group:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu a{display:block;padding:.6rem .8rem;border-radius:6px;color:var(--ink);font-size:.9rem;font-weight:600;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav__menu a:hover{background:var(--rose);color:var(--terra)}

/* Rund wie die uebrigen Symbolknoepfe der Seite; die Balken fuellen den Knopf
   jetzt ausgewogen statt verloren in der Mitte zu sitzen. */
.burger{display:inline-grid;place-items:center;gap:4.5px;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--terra);border:0;cursor:pointer;padding:0;flex:none;
  box-shadow:0 1px 3px rgba(37,37,37,.16);transition:background .25s var(--ease),transform .25s var(--ease)}
.burger:hover{background:var(--terra-dark);transform:translateY(-1px)}
.burger:active{transform:none}
@media (min-width:1080px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.8px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

.mobilenav{
  position:fixed;inset:0;z-index:55;background:var(--white);padding:6rem var(--gut) 2.5rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.mobilenav.is-open{opacity:1;visibility:visible;transform:none}
@media (min-width:1080px){.mobilenav{display:none}}
.mobilenav__list>li{border-bottom:1px solid var(--line-soft)}
.mobilenav__list>li>a{display:block;padding:.95rem 0;font-family:var(--head);font-size:1.3rem;font-weight:400;color:var(--ink)}
.mobilenav__sub{padding-bottom:.9rem}
.mobilenav__sub a{display:block;padding:.4rem 0 .4rem 1rem;color:var(--text);font-size:.95rem;font-weight:600;border-left:2px solid var(--line)}
.mobilenav__sub a:hover{color:var(--terra);border-color:var(--terra)}
.mobilenav__foot{margin-top:2rem;display:grid;gap:.6rem}
.mobilenav__meta{margin-top:1.75rem;color:var(--text);font-size:.9rem;display:grid;gap:.3rem}
body.nav-open{overflow:hidden}

/* ---------- Startseiten-Hero (Vollbild-Foto wie bisher) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:6.5rem;padding-bottom:clamp(2rem,5vw,3.5rem);background:var(--band);overflow:hidden}
@media (min-width:1080px){.hero{padding-top:8.5rem;justify-content:center}}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(37,37,37,.42) 0%,rgba(37,37,37,.18) 34%,rgba(37,37,37,.10) 100%)}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__title{color:#fff;text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.35);margin-bottom:clamp(1.5rem,3.5vw,2.5rem)}
.hero__sub{color:rgba(255,255,255,.94);text-align:center;max-width:56ch;margin:0 auto clamp(1.75rem,4vw,2.5rem);
  font-size:clamp(.98rem,.93rem + .3vw,1.12rem);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero__scroll{display:none}

/* iPad und iPhone: das Foto soll als Bild wirken und die Kacheln darunter
   stehen - nicht darauf. Dafuer bekommt der Bereich mit Titel und Unterzeile
   eine eigene Buehne, das Foto fuellt nur diese. Der Vollbild-Hero bleibt
   dem Desktop vorbehalten. */
/* Auf dem Desktop bleibt die Buehne ohne eigenen Bezugsrahmen, damit das Foto
   wie bisher den ganzen Hero fuellt. */
.hero__stage{position:static}
.hero__head{position:relative;z-index:1;width:100%}
@media (max-width:1079px){
  .hero{min-height:0;padding-top:0;padding-bottom:clamp(1.75rem,5vw,2.75rem)}
  .hero__stage{position:relative;display:flex;align-items:flex-end;
    min-height:min(116vw,32rem);padding:7rem 0 clamp(1.25rem,4vw,2rem)}
  .hero__inner{margin-top:clamp(1.25rem,4vw,2rem)}
}
@media (min-width:761px) and (max-width:1079px){
  .hero__stage{min-height:min(62vw,30rem)}
}
@media (min-width:1080px){
  .hero__scroll{display:grid;place-items:center;gap:.4rem;position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
    color:rgba(255,255,255,.8);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;z-index:1}
  .hero__scroll svg{width:1rem;height:1rem;animation:bob 2.2s var(--ease) infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- Angebotskarten (Farben der bestehenden Seite, lesbarer Text) ---------- */
.offers{display:grid;gap:clamp(.8rem,1.6vw,1.1rem)}
@media (min-width:760px){.offers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){
  .offers{grid-template-columns:repeat(6,1fr)}
  .offers>*:nth-child(-n+3){grid-column:span 2}
  /* untere Reihe gleich breit wie die obere (je 2 von 6 Spalten), mittig gesetzt */
  .offers>*:nth-child(4){grid-column:2 / span 2}
  .offers>*:nth-child(5){grid-column:4 / span 2}
}
.offer{
  --tint:var(--band);--fg:#2E2A26;
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.85rem;padding:clamp(1.6rem,3vw,2.2rem) clamp(1.1rem,2.4vw,1.75rem);
  background:var(--tint);color:var(--fg);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.offer::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .35s var(--ease);pointer-events:none}
.offer:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(37,37,37,.5)}
.offer:hover::after{background:rgba(255,255,255,.14)}
.offer--pilates{--tint:var(--c-pilates)}
.offer--spiral{--tint:var(--c-spiral)}
.offer--ballett{--tint:var(--c-ballett)}
.offer--meditation{--tint:var(--c-meditation)}
.offer--sauerstoff{--tint:#B65839;--fg:#fff}
/* Die fuenf Strichicons haben sehr unterschiedliche Seitenverhaeltnisse (0,89 bis 1,74).
   Bei zentrierter Maske ergibt das ungleiche Abstaende zum Titel. Deshalb stehen sie
   auf einer gemeinsamen Grundlinie und bekommen eine einheitliche Hoehe. */
.offer__icon{width:100%;height:2.85rem;color:currentColor;display:block}
.offer__icon .i{-webkit-mask-size:auto 100%;mask-size:auto 100%;
  -webkit-mask-position:center bottom;mask-position:center bottom}
.offer h3{color:currentColor;font-size:clamp(1.15rem,1rem + .55vw,1.4rem);font-weight:500}
.offer p{color:currentColor;opacity:.88;font-size:.92rem;line-height:1.65;margin:0;flex:1;max-width:38ch}
.offer .btn{position:relative;z-index:1;margin-top:.25rem;
  --bg:transparent;--fg:#2E2A26;--bd:rgba(46,42,38,.45)}
.offer .btn:hover{--bg:#2E2A26;--fg:#fff;--bd:#2E2A26}
.offer--sauerstoff .btn{--fg:#fff;--bd:rgba(255,255,255,.6)}
.offer--sauerstoff .btn:hover{--bg:#fff;--fg:#B65839;--bd:#fff}

/* Icon-Masken */
.i{display:block;width:100%;height:100%;background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
.i--pilates{-webkit-mask-image:url(/assets/icons/pilates.svg?v=3eb3f231b6);mask-image:url(/assets/icons/pilates.svg?v=3eb3f231b6)}
.i--spiraldynamik{-webkit-mask-image:url(/assets/icons/spiraldynamik.svg?v=de5a28da2d);mask-image:url(/assets/icons/spiraldynamik.svg?v=de5a28da2d)}
.i--ballett{-webkit-mask-image:url(/assets/icons/ballett.svg?v=6c9748be2f);mask-image:url(/assets/icons/ballett.svg?v=6c9748be2f)}
.i--meditation{-webkit-mask-image:url(/assets/icons/meditation.svg?v=51538be969);mask-image:url(/assets/icons/meditation.svg?v=51538be969)}
.i--sound{-webkit-mask-image:url(/assets/icons/sound-meditation.svg?v=5cd74acc46);mask-image:url(/assets/icons/sound-meditation.svg?v=5cd74acc46)}
.i--sauerstoff{-webkit-mask-image:url(/assets/icons/sauerstoff.svg?v=4f5f5eb882);mask-image:url(/assets/icons/sauerstoff.svg?v=4f5f5eb882)}

/* ---------- Zitatband ---------- */
.quoteband{padding-block:clamp(2.5rem,6vw,4rem);text-align:center;color:#fff}
.quoteband blockquote{margin:0;font-family:var(--head);font-weight:300;
  font-size:clamp(1.1rem,.95rem + .85vw,1.6rem);line-height:1.45;max-width:48ch;margin-inline:auto;
  text-shadow:0 1px 16px rgba(0,0,0,.35)}
.quoteband cite{display:block;margin-top:.9rem;font-family:var(--body);font-style:normal;font-weight:600;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}

/* ---------- Seiten-Kopfband (Unterseiten) ---------- */
.pageband{position:relative;background:var(--band);overflow:hidden}
.pageband__inner{position:relative;display:flex;align-items:flex-end;min-height:clamp(19rem,34vw,29rem);
  padding-top:6rem;padding-bottom:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:1080px){.pageband__inner{padding-top:8rem}}
.pageband h1{color:#fff;position:relative;text-shadow:0 2px 20px rgba(0,0,0,.22)}
.pageband p{color:rgba(255,255,255,.95);max-width:48ch;margin-top:.6rem;position:relative;
  text-shadow:0 1px 14px rgba(0,0,0,.24)}
.pageband--dark{background:#1B1B1B}
.pageband--terra h1{color:var(--terra);text-shadow:none}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:rgba(255,255,255,.8);margin-bottom:.7rem;
  position:relative;font-weight:600}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}

/* Freigestelltes Bild im Kopfband */
picture.pageband__cut{
  position:absolute;right:0;bottom:0;z-index:0;
  display:flex;align-items:flex-end;justify-content:flex-end;
  height:92%;max-width:min(72%,60rem);pointer-events:none;user-select:none;
}
picture.pageband__cut img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:right bottom}
@media (max-width:899px){
  picture.pageband__cut{right:-4%;height:72%;max-width:82%;opacity:.42}
  /* Breite Montagen: auf dem Handy ueber die ganze Bandbreite, sonst sieht man sie kaum.
     Text bleibt lesbar, weil das Bild nach unten abgedunkelt wird. */
  /* Breite Montagen (2,4:1 bis 3,5:1) passen nicht ins 1,3:1-Band auf dem Handy.
     Mit cover ginge mehr als die Haelfte verloren, deshalb vollstaendig zeigen
     und oben ausrichten; der Text sitzt darunter auf der Bandfarbe. */
  /* Die Montagen sind unten angeschnitten - sie sind dafuer gemacht, auf der
     Bandkante zu stehen. Oben ausgerichtet haengt die Schnittkante frei in der
     Luft und die Figuren laufen in die Kopfzeile. Deshalb unter die Kopfzeile
     setzen und die Kante nach unten ausblenden. */
  /* Genug Hoehe, damit die Schrift unter der Montage steht statt darauf */
  .pageband--scrim:has(.pageband__cut--wide) .pageband__inner{min-height:24.5rem}
  picture.pageband__cut--wide{right:0;left:0;width:88%;max-width:none;margin-inline:auto;top:4.2rem;height:auto;
    opacity:1;align-items:flex-start}
  picture.pageband__cut--wide img{width:100%;height:auto;max-height:none;object-fit:contain;
    object-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%)}
  /* Statt das ganze Bild abzuschwaechen: Bild voll zeigen und nur hinter dem Text
     einen Verlauf legen. So bleibt das Motiv erkennbar und die Schrift lesbar. */
  .pageband--scrim::after{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 34%, transparent 62%)}
  .pageband--dark.pageband--scrim::after{
    background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.26) 36%, transparent 64%)}
}
/* Rechteckige Bandfotos (kein Freisteller): weicher Übergang in die Bandfarbe,
   damit keine harte Kante entsteht. */
picture.pageband__cut--photo{ height:100%; bottom:0; }
/* Helle Bandfotos: die transparente Kopfzeile steht sonst kontrastarm auf dem Bild.
   Deshalb ein Verlauf oben — und unten fuer Titel und Untertitel. */
.pageband--photoscrim::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
             rgba(40,34,30,.68) 0%, rgba(40,34,30,.64) 18%, rgba(40,34,30,.20) 30%,
             rgba(40,34,30,0) 42%, rgba(40,34,30,.30) 80%, rgba(40,34,30,.46) 100%)}
picture.pageband__cut--photo img{ width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 26%, #000 100%); }
@media (max-width:899px){
  picture.pageband__cut--photo img{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34%, #000 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 34%, #000 100%); }
}

/* Band über die volle Breite: Foto füllt das Band, Text liegt darüber */
picture.pageband__cut--full{ left:0; right:0; width:100%; max-width:none; height:100%;
  justify-content:center; }
picture.pageband__cut--full img{ width:100%; height:100%; object-fit:cover;
  object-position:center 34%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 100%); }
@media (max-width:899px){ picture.pageband__cut--full{ right:0; left:0; height:100%;
  max-width:none; opacity:.5 } }
/* Motiv nicht bis an die Bandkante laufen lassen (z. B. der liegende Buddha,
   dessen Fuesse sonst angeschnitten werden). */
picture.pageband__cut--inset{right:4%}
/* Hochformatiges Foto im Band. Zwei Ebenen: ein weichgezeichneter Fond aus
   demselben Bild fuellt das ganze Band, darueber das scharfe Portraet rechts
   buendig. So blendet das Foto in seine eigenen Farben statt gegen die
   Bandfarbe abzubrechen, und rechts entsteht keine Abbruchkante. */

/* Kopfband-Foto: rechtsbuendig, laeuft nach links weich ins Band aus. Der
   Hintergrund der Aufnahmen liegt auf der Bandfarbe, deshalb ist der Uebergang
   nicht zu sehen. Links bleibt Platz fuer Titel und Unterzeile. */
/* Die Kopfzeile liegt bei diesen Baendern ueber dem Foto und traf auf helle
   Stellen (Wand, Lampe, Haut): nur 1,2-1,5:1. Deshalb ein Verlauf ueber die
   obersten rund 9rem - das Foto darunter bleibt unangetastet. */
/* Das Foto beginnt unterhalb der Kopfzeile. Weil sein Hintergrund auf der
   Bandfarbe liegt, ist die Oberkante nicht zu sehen - und die Navigation steht
   auf reiner Bandfarbe statt auf hellen Bildstellen. */
/* Mehr vom Oberkoerper sichtbar, ohne die Person kleiner zu machen: der
   Ausschnitt reicht weiter nach unten, das Band waechst im gleichen Verhaeltnis.
   Gilt nur fuer die Fotobaender, /madleina und /stefania bleiben unveraendert. */
/* /kontakt zeigt ein Brustbild, dort reicht ein niedrigeres Band. */
.pageband--kompakt picture.pageband__cut--fotoband{top:5rem;bottom:0;height:auto;max-width:min(80%,62rem)}
/* Das Foto beginnt unterhalb der Kopfzeile. Weil sein Hintergrund auf der
   Bandfarbe liegt, ist die Oberkante nicht zu sehen - und die Navigation steht
   auf reiner Bandfarbe statt auf hellen Bildstellen. */
picture.pageband__cut--fotoband{right:0;top:5rem;bottom:0;height:auto;max-width:min(70%,54rem);
  /* Zweiter Verlauf auf dem umschliessenden Element statt mask-composite:
     so blendet auch die Oberkante weich aus, ohne auf Browserunterstuetzung
     fuer zusammengesetzte Masken angewiesen zu sein. */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 5%, rgba(0,0,0,.85) 10%, #000 16%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 5%, rgba(0,0,0,.85) 10%, #000 16%)}
picture.pageband__cut--fotoband img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.20) 13%, rgba(0,0,0,.42) 19%,
    rgba(0,0,0,.66) 24%, rgba(0,0,0,.85) 29%, rgba(0,0,0,.96) 33%, #000 38%);
          mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.20) 13%, rgba(0,0,0,.42) 19%,
    rgba(0,0,0,.66) 24%, rgba(0,0,0,.85) 29%, rgba(0,0,0,.96) 33%, #000 38%)}
/* /kontakt zeigt ein Brustbild und laeuft mit etwas mehr Bandhoehe. */
.pageband--portrait.pageband--kompakt .pageband__inner{min-height:clamp(23rem,42vw,38rem)}
.pageband--kompakt picture.pageband__cut--fotoband{max-width:min(80%,62rem)}

@media (max-width:899px){
  /* Im schmalen Band beschneidet cover die Seiten. Die Person steht im rechten
     Drittel der Aufnahme, deshalb den Ausschnitt dorthin verschieben. */
  picture.pageband__cut--fotoband{max-width:82%}
  picture.pageband__cut--fotoband img{object-position:78% 20%}
  /* Der Text liegt mobil zwangslaeufig auf dem Foto. Helle Stellen druecken
     den Kontrast unter den Wert der Bandfarbe - deshalb unten leicht abdunkeln. */
  .pageband:has(.pageband__cut--fotoband) .pageband__inner::before{
    content:"";position:absolute;left:0;right:0;bottom:0;top:38%;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom, rgba(40,34,30,0) 0%, rgba(40,34,30,.20) 45%, rgba(40,34,30,.30) 100%)}
}
@media (max-width:899px){picture.pageband__cut--inset{right:0}}
.pageband__inner>*{position:relative;z-index:1}

/* Porträtseiten: Person füllt das Band wie auf der bestehenden Website */
.pageband--portrait .pageband__inner{min-height:clamp(21rem,39vw,34rem)}
picture.pageband__cut--tall{height:calc(100% - 1.75rem);max-width:min(54%,42rem);right:3%}
@media (max-width:899px){
  .pageband--portrait .pageband__inner{min-height:clamp(17rem,54vw,25rem)}
  picture.pageband__cut--tall{height:calc(100% - 1rem);max-width:62%;right:-3%;opacity:.5}
}

/* ---------- Akkordeon (Leitmuster der bestehenden Seite) ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.15rem .25rem;font-family:var(--head);font-size:clamp(1rem,.95rem + .35vw,1.15rem);font-weight:500;
  color:var(--ink);transition:color .25s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--terra)}
.acc details[open] summary{color:var(--terra)}
.acc__plus{position:relative;width:14px;height:14px;flex:none;margin-top:.45rem;color:var(--terra)}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc__plus::before{left:0;right:0;top:6px;height:2px}
.acc__plus::after{top:0;bottom:0;left:6px;width:2px;transition:transform .3s var(--ease)}
.acc details[open] .acc__plus::after{transform:scaleY(0)}
.acc__body{padding:0 .25rem 1.5rem;color:var(--text)}
.acc__body>*+*{margin-top:.9rem}
.acc__body h4{color:var(--ink);font-family:var(--head);font-size:1.02rem;font-weight:600;margin-bottom:-.35rem}
.acc__body a{color:var(--terra);font-weight:700}
.acc__body a:hover{text-decoration:underline}

/* ---------- Seitenspalte ---------- */
.aside{display:grid;gap:1.75rem;position:sticky;top:6.5rem}
@media (max-width:899px){.aside{position:static}}
.aside__box{border-left:1px solid var(--line);padding-left:1.5rem}
@media (max-width:899px){.aside__box{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.5rem}}
.aside__box h3{font-family:var(--head);color:var(--terra);font-size:1.2rem;font-weight:500;margin-bottom:.65rem}
.aside__box p{color:var(--text);font-size:.92rem;line-height:1.7}

/* ---------- Listen ---------- */
.dots li{position:relative;padding-left:1.35rem;color:var(--text);margin-bottom:.6rem;line-height:1.7}
.dots li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--terra)}
.dots li:last-child{margin-bottom:0}
.dots strong{color:var(--ink);font-weight:700}

.ticks li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;line-height:1.65;color:var(--text)}
.ticks li:last-child{margin-bottom:0}
.ticks svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.33rem;color:var(--terra)}
.ticks strong{color:var(--ink);font-weight:700}
@media (min-width:760px){.ticks--2{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 2rem}}

/* Zweispaltige Aufzählung mit Pfeil (wie im Lebenslauf der alten Seite) */
.arrows{display:grid;gap:.55rem}
@media (min-width:820px){.arrows--2{grid-template-columns:repeat(2,1fr);gap:.55rem 2.5rem}}
.arrows li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.6;color:var(--text)}
.arrows li::before{content:"";flex:none;margin-top:.5rem;width:0;height:0;
  border-left:6px solid var(--terra);border-top:4px solid transparent;border-bottom:4px solid transparent}
.arrows b{color:var(--ink);font-weight:700}

/* ---------- Preistabellen ---------- */
.price{display:flex;flex-direction:column}
.price h3{font-family:var(--head);color:var(--terra);font-size:1.22rem;font-weight:500;margin-bottom:.4rem}
.price__desc{color:var(--text);font-size:.9rem;margin-bottom:1.1rem;min-height:3em}
.price__table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:100%;border-collapse:collapse}
.price__table tr+tr{border-top:1px solid var(--line)}
.price__table td{padding:.7rem .95rem;font-size:.88rem;color:var(--terra);font-weight:600;vertical-align:middle}
.price__table td:first-child{color:var(--text);border-right:1px solid var(--line);width:55%}
.price__table tr.is-best td{background:var(--rose)}
.price__table tr.is-best td:last-child{font-weight:800}
.price__foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--text)}
.price__foot b{display:block;color:var(--ink);font-weight:700;margin-bottom:.15rem}
.price--feature .price__table{border-color:var(--terra)}
/* Preisraster: Badge, Titel, Tabelle und Fusszeile aller Karten einer Zeile
   sollen auf derselben Hoehe beginnen. Subgrid uebernimmt das Ausrichten. */
@media (min-width:700px){
  .preisgrid>.price{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0}
  /* Kuerzere Tabellen sollen nicht auf Zeilenhoehe gedehnt werden */
  .preisgrid>.price>*{align-self:start}
}
.price__badge{display:inline-block;background:var(--terra);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--pill);margin-bottom:.55rem}
/* Der Platzhalter haelt im mehrspaltigen Raster die Badge-Zeile frei,
   damit die Titel aller Karten auf einer Linie beginnen. */
.price__badge--platz{display:none;visibility:hidden}
@media (min-width:700px){
  .price__badge--platz{display:inline-block}
  .price__badge--platz::before{content:"\00a0"}
}

/* ---------- Stundenplan ---------- */
.plan{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.plan{grid-template-columns:repeat(5,1fr)}}
.plan__day{background:#fff;padding:1.1rem .9rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.plan__day h3{font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);margin-bottom:.3rem}
.slot{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.6rem .7rem;
  background:var(--rose);border-radius:6px;font-size:.87rem;font-weight:700;color:var(--ink);
  border-left:3px solid var(--terra);font-variant-numeric:tabular-nums}
.slot span{font-size:.72rem;font-weight:600;color:var(--text);letter-spacing:.02em}
.slot--noon{background:#EEF0EA;border-left-color:var(--c-meditation)}
.slot--note{background:transparent;border-left:1px dashed var(--line);color:var(--text);font-weight:600;
  font-size:.79rem;display:block;line-height:1.5}

/* ---------- Bilder ---------- */
.fig{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--line-soft);position:relative}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fig--zoom:hover img{transform:scale(1.04)}
.fig figcaption{margin-top:.6rem;font-size:.78rem;color:var(--text)}
/* Freigestelltes Motiv: kein Kasten, keine Rundung, Sektionsfarbe scheint durch */
.fig--plain{background:transparent;border-radius:0}
.fig--plain img{object-fit:contain}
.fig--contain{background:#fff}
.fig--contain img{object-fit:contain}
/* Einzelnes Foto, das nicht ueber die volle Spaltenbreite laufen soll */
.fig--schmal{max-width:44rem;margin-inline:auto}
.fig--hochschmal{max-width:23rem;margin-inline:auto}
.ar-32{aspect-ratio:3/2}.ar-43{aspect-ratio:4/3}.ar-11{aspect-ratio:1/1}
.ar-45{aspect-ratio:4/5}.ar-23{aspect-ratio:2/3}.ar-169{aspect-ratio:16/9}.ar-219{aspect-ratio:21/9}

/* ---------- Video (Archivaufnahmen) ---------- */
.vid{margin:0;display:flex;flex-direction:column}
.vid__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:#1A1A1A;box-shadow:0 1px 2px rgba(51,51,51,.08)}
.vid__el{width:100%;height:100%;display:block;object-fit:contain;background:#1A1A1A}
.vid__play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;
  border:0;padding:0;cursor:pointer;background:rgba(26,26,26,.18);
  transition:background .25s var(--ease)}
.vid__play::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,26,26,.45),rgba(26,26,26,0) 55%)}
.vid__play svg{position:relative;width:60px;height:60px;color:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));transition:transform .25s var(--ease)}
.vid__play:hover{background:rgba(186,92,62,.28)}
.vid__play:hover svg{transform:scale(1.09)}
.vid__cap{margin-top:.7rem;font-size:.84rem;line-height:1.5;color:var(--terra);font-weight:600}
.vid__cap span{display:block;color:var(--text);font-weight:400;font-size:.78rem;margin-top:.15rem}
@media (prefers-reduced-motion:reduce){.vid__play svg{transition:none}.vid__play:hover svg{transform:none}}

/* ---------- Referenz-Schieber ---------- */
.slider{position:relative}
.slider__viewport{overflow:hidden;border-radius:var(--r-lg)}
.slider__track{display:flex;align-items:stretch;width:100%;transition:transform .6s var(--ease);will-change:transform}
/* Eine Zuschrift nach der anderen — ruhiger als mehrere angeschnittene Karten */
.slider__slide{flex:0 0 100%;min-width:0;padding:.35rem;display:flex}
.slider .proof__item{width:100%;max-width:56rem;margin:0 auto;height:100%;
  font-size:1.02rem;padding:clamp(1.6rem,3.4vw,2.6rem);justify-content:flex-start}
.slider .proof__item blockquote{flex:0 1 auto}
.slider .proof__item figcaption{margin-top:auto;padding-top:1rem}
.slider .proof__item blockquote{font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.7}
.slider .proof__item .quotemark{width:2rem;height:2rem}

/* Variante mit mehreren Karten je Ansicht (viele kurze Zuschriften) */
@media (min-width:760px){.slider--drei .slider__slide{flex:0 0 50%}}
@media (min-width:1080px){.slider--drei .slider__slide{flex:0 0 33.3333%}}
.slider--drei .proof__item{max-width:none;font-size:.95rem;padding:clamp(1.25rem,2.2vw,1.7rem)}
.slider--drei .proof__item blockquote{font-size:.95rem;line-height:1.72}
.slider--drei .proof__item .quotemark{width:1.5rem;height:1.5rem}

.slider__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.6rem}
.slider__btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--terra);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.slider__btn svg{width:1.05rem;height:1.05rem}
.slider__btn:hover{background:var(--terra);border-color:var(--terra);color:#fff;transform:translateY(-1px)}
.slider__btn[disabled]{opacity:.35;cursor:default;transform:none;background:#fff;border-color:var(--line);color:var(--terra)}
.slider__dots{display:flex;gap:.5rem;align-items:center;min-width:6rem;justify-content:center}
.slider__dot{width:.55rem;height:.55rem;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--terra);opacity:.28;flex:none;
  transition:opacity .25s var(--ease),width .25s var(--ease),background .25s var(--ease)}
.slider__dot:hover{opacity:.6}
.slider__dot[aria-current="true"]{opacity:1;width:1.5rem;border-radius:.25rem;background:var(--terra)}
@media (prefers-reduced-motion:reduce){.slider__track{transition:none}.slider__btn{transition:none}}

/* Leitzitat auf der Startseite */
.leitzitat{margin:0 auto;max-width:44ch}
.leitzitat p{font-family:var(--head);font-weight:300;font-size:clamp(1.35rem,1rem + 1.7vw,2.1rem);
  line-height:1.3;color:var(--ink);margin:0}
.leitzitat cite{display:block;font-style:normal;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terra);font-weight:700;margin-top:1rem}

/* Bildreihe: versetzt statt als starrer Block */
@media (min-width:900px){
  .bildreihe>*:nth-child(3n+2){transform:translateY(2.2rem)}
  .bildreihe>*:nth-child(3n){transform:translateY(-1.1rem)}
}
.bildreihe .fig{border-radius:var(--r-lg)}
.bildreihe figcaption{margin-top:.55rem;font-size:.8rem;color:var(--text);letter-spacing:.01em}

/* Bildmosaik: unterschiedliche Bildformate, damit sechs Fotos nicht als Block wirken.
   Die Hoehe ergibt sich aus dem Seitenverhaeltnis der Datei - nichts wird beschnitten. */
.bildmosaik{display:grid;gap:clamp(1.1rem,2.6vw,1.9rem)}
/* Ab Tablet drei Zeilen mit wechselndem Format: hoch, quer, gemischt.
   Die Seitenverhaeltnisse sind so gewaehlt, dass die Bilder je Zeile gleich
   hoch enden - dadurch entstehen keine Loecher und trotzdem kein starrer Block. */
@media (min-width:700px){
  .bildmosaik{grid-template-columns:repeat(12,1fr);align-items:start}
  .bildmosaik>*:nth-child(-n+4){grid-column:span 6}
  .bildmosaik>*:nth-child(5){grid-column:span 5}
  .bildmosaik>*:nth-child(6){grid-column:span 7}
}
.bildmosaik figure{margin:0}
.bildmosaik picture{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--line-soft)}
.bildmosaik img{display:block;width:100%;height:auto;transition:transform 1s var(--ease)}
.bildmosaik figure:hover img{transform:scale(1.04)}
.bildmosaik figcaption{margin-top:.6rem;font-size:.8rem;color:var(--text);letter-spacing:.01em}
/* Leichter Versatz, damit die unterschiedlichen Hoehen als Komposition lesbar werden */

/* ---------- Belege / Referenzen ---------- */
.proof{display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
@media (min-width:760px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.proof{grid-template-columns:repeat(3,1fr)}}
/* Vier Referenzen: 2x2 statt 3+1, damit keine einzelne Karte allein steht */
@media (min-width:760px){.proof--quad{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.proof--quad{grid-template-columns:repeat(2,1fr)}}
.proof__item figcaption span{color:var(--text-3, #8E8E8E);font-weight:500}
.proof__item{background:var(--rose);border-radius:var(--r-lg);padding:clamp(1.25rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;gap:.9rem}
.proof__item blockquote{margin:0;color:var(--ink);font-size:.95rem;line-height:1.72;font-weight:500;flex:1}
.proof__item figcaption{display:flex;align-items:center;gap:.6rem;color:var(--text);font-size:.84rem}
.proof__item figcaption b{color:var(--terra);font-weight:700}
.quotemark{width:1.75rem;height:1.75rem;color:var(--terra);opacity:.55}

/* ---------- Karten ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.7rem;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
a.card:hover{border-color:var(--terra);transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{font-family:var(--head);color:var(--terra);font-size:1.12rem;font-weight:500}
.card p{color:var(--text);font-size:.9rem;line-height:1.68;margin:0}
.card__icon{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:var(--terra);color:#fff;flex:none}
.card__icon svg{width:1.25rem;height:1.25rem}
.card--rose{background:var(--rose);border-color:transparent}

/* ---------- Hinweiskasten ---------- */
.note{background:var(--rose);border-left:3px solid var(--terra);border-radius:0 var(--r) var(--r) 0;
  padding:1.05rem 1.25rem;font-size:.9rem;line-height:1.7;color:var(--ink)}
.note b,.note strong{font-weight:800}
.note--grey{background:#F4F3F1;border-left-color:var(--band)}

/* ---------- Formular ---------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field label,.legend{font-size:.8rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  font-size:.93rem;font-weight:500;color:var(--ink);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:7.5rem;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--terra);box-shadow:0 0 0 3px rgba(186,92,62,.14)}
.field input::placeholder,.field textarea::placeholder{color:#B3ADA8;font-weight:500}
.field--row{display:grid;gap:1rem}
@media (min-width:600px){.field--row{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.78rem;color:var(--text);line-height:1.6}
.form__note a{color:var(--terra);font-weight:700}

/* Gesundheitsformular: lange Formulare brauchen sichtbare Abschnitte,
   sonst verliert man beim Ausfuellen den Ueberblick. */
.gf{max-width:52rem}
.gf__block{border:0;padding:0;margin:0 0 2.5rem}
.gf__legend{display:block;width:100%;font-family:var(--head);font-size:1.15rem;font-weight:500;
  color:var(--terra);padding:0 0 .6rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.gf .field{margin-bottom:1rem}
.choice--wide{align-items:flex-start;line-height:1.6}
.choice--wide span{font-weight:500;font-size:.88rem}
@media (min-width:640px){.choices--2{grid-template-columns:repeat(2,1fr)}}

.choices{display:grid;gap:.55rem}
@media (min-width:560px){.choices--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:720px){.choices--3{grid-template-columns:repeat(3,1fr)}}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:.9rem;font-weight:700;height:100%;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.choice span small{color:var(--text);font-size:.76rem;font-weight:500;line-height:1.45}
.choice span:hover{border-color:var(--band)}
.choice input:checked+span{border-color:var(--terra);background:var(--rose)}
.choice input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}

.wizard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.35rem,3vw,2.25rem)}
.wizard__bar{display:flex;gap:.35rem;margin-bottom:1.5rem}
.wizard__bar i{flex:1;height:3px;background:var(--line);border-radius:3px;transition:background .4s var(--ease)}
.wizard__bar i.is-done{background:var(--terra)}
.wizard__count{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  font-weight:700;margin-bottom:.7rem}
.wizard__step{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.wizard__step.is-active{display:grid;gap:1rem;animation:fadeUp .35s var(--ease)}
.wizard__step legend{font-family:var(--head);font-size:1.25rem;font-weight:500;color:var(--ink);padding:0;margin-bottom:.2rem}
.wizard__nav{display:flex;justify-content:space-between;gap:.7rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line-soft)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Krankenkassen ---------- */
.insurers{display:flex;flex-wrap:wrap;gap:.45rem}
.insurers li{border:1px solid var(--line);border-radius:var(--pill);padding:.35rem .85rem;font-size:.79rem;
  font-weight:700;color:var(--ink);background:#fff}

/* ---------- Laufband (wie auf der bestehenden Seite) ---------- */
.marquee{background:var(--terra-dark);color:#fff;overflow:hidden;padding:.65rem 0;position:relative}
.marquee__track{display:flex;width:max-content;gap:3rem;animation:slide 38s linear infinite}
.marquee p{margin:0;white-space:nowrap;font-size:.83rem;font-weight:600;letter-spacing:.01em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;width:auto;justify-content:center;flex-wrap:wrap;gap:1rem}
  .marquee p{white-space:normal;text-align:center}
}

/* ---------- Anfahrt ---------- */
.routes li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem;font-size:.9rem;line-height:1.6;color:var(--text)}
.routes b{color:var(--ink);font-weight:700}
.routes .badge{font-size:.68rem;font-weight:800;color:#fff;padding:.2rem .5rem;border-radius:4px;flex:none;
  margin-top:.15rem;min-width:2.5rem;text-align:center;letter-spacing:.02em}
.badge--sbb{background:#EB0000}.badge--tram{background:#1D6BB0}
.badge--bus{background:var(--c-meditation)}.badge--car{background:var(--band)}
.mapcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.mapcard iframe{width:100%;height:clamp(17rem,38vw,23rem);border:0;filter:grayscale(.25)}
.mapcard__foot{padding:1rem 1.25rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  gap:.6rem 1.25rem;justify-content:space-between;align-items:center}

/* ---------- Footer ---------- */
.footer{background:var(--footer);color:#fff;padding-block:clamp(2.75rem,6vw,4rem) clamp(2rem,4vw,2.75rem)}
.footer__grid{display:grid;gap:2.25rem}
@media (min-width:640px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer__grid{grid-template-columns:repeat(4,1fr);gap:2.5rem}}
.footer h4{font-family:var(--head);font-size:1.12rem;font-weight:500;color:#fff;margin-bottom:1.1rem}
.footer li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.75rem;font-size:.88rem;line-height:1.55;color:#fff}
.footer li:last-child{margin-bottom:0}
.footer a:hover{text-decoration:underline}
.fic{width:1.25rem;height:1.25rem;flex:none;margin-top:.1rem;opacity:.92}
.footer__bottom{background:var(--dark);color:#B9B9B9;padding-block:1.35rem}
.footer__bottom .wrap-wide{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.footer__bottom .brand__name{font-size:.76rem;color:#fff}
.footer__bottom .brand__mark{width:2.2rem;height:2.2rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.78rem}
.footer__legal a:hover{color:#fff}

/* ---------- Schwebender Studio-Knopf (wie bisher) ---------- */
.studiobtn{position:fixed;right:1rem;bottom:1rem;z-index:50;box-shadow:0 12px 30px -12px rgba(37,37,37,.55)}
@media (max-width:1079px){.studiobtn{display:none}}

/* ---------- Mobile Aktionsleiste ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:auto auto 1fr;gap:.45rem;
  padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(105%);transition:transform .4s var(--ease)}
.mobilebar.is-visible{transform:none}
@media (min-width:1080px){.mobilebar{display:none}}
body.nav-open .mobilebar{transform:translateY(105%)}
.mobilebar__icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);
  border-radius:var(--pill);color:var(--terra);background:#fff}
.mobilebar__icon svg{width:1.1rem;height:1.1rem}
@media (max-width:1079px){.footer__bottom{padding-bottom:4.75rem}}

/* ---------- Lightbox für Belege ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(37,37,37,.92);display:grid;place-items:center;padding:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:min(96vw,1100px);max-height:88vh;width:auto;border-radius:var(--r);object-fit:contain}
.lb__close{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;border-radius:50%;border:0;
  background:rgba(255,255,255,.15);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.lb__close:hover{background:rgba(255,255,255,.28)}
.zoomable{cursor:zoom-in}

/* ---------- Einblenden ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Hilfen ---------- */
.skip{position:absolute;left:.75rem;top:-4rem;z-index:200;background:var(--terra);color:#fff;padding:.7rem 1.1rem;
  border-radius:var(--r);font-size:.85rem;font-weight:700;transition:top .25s var(--ease)}
.skip:focus{top:.75rem}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media print{
  .header,.mobilenav,.mobilebar,.studiobtn,.burger,.skip,.marquee{display:none!important}
  body{font-size:11pt;color:#000}
  .pageband,.section--dark,.section--band{background:#fff!important;color:#000!important}
  .pageband h1,.pageband p{color:#000!important;text-shadow:none!important}
  .footer{background:#fff;color:#000}
}