@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url('/villa-zeltweg/assets/fonts/bodoni-moda-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('/villa-zeltweg/assets/fonts/bodoni-moda-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url('/villa-zeltweg/assets/fonts/bodoni-moda-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url('/villa-zeltweg/assets/fonts/source-sans-3-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/villa-zeltweg/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/villa-zeltweg/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2')}

/* Jost selbst gehostet (fontsource 5.3.0, SIL Open Font License) */





/* Villa Zeltweg. Derma Longevity, Zürich.
   Palette: Leinen #F5F2EF (Grund), Schiefer #22292F (Text), Villa-Blau #1E3A5F (Vertrauen),
   Champagner #A28776 (Akzent, sparsam), Nebel #EEF2F5 (Flächen), Haarlinie #E4E7EA. */

:root{
  --bg:#F5F2EF; --ink:#22292F; --muted:#5E6873; --blue:#1E3A5F; --blue-deep:#16304F;
  --gold:#A28776; --gold-soft:#E9DCC0; --surface:#EEF2F5; --line:#E4E7EA; --white:#FFFFFF;
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3','Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --wrap:1160px; --radius:6px; --shadow:0 12px 40px rgba(30,58,95,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;font-weight:400}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Typografie */
h1,h2,h3,.display{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.005em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem)}
p{margin:0 0 1.1em}
.lead{font-size:1.25rem;line-height:1.55;color:var(--ink);max-width:36em}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px;display:block}
.small{font-size:.92rem}
.prose{max-width:68ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.35em}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:14px 24px;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--surface)}
.btn-link{color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-link::after{content:"→";transition:transform .2s}
.btn-link:hover::after{transform:translateX(3px)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(252,251,248,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;position:relative}
.brand{display:flex;flex-direction:column;line-height:1.05;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .name{font-family:var(--display);font-size:1.65rem;font-weight:600;letter-spacing:.01em}
.brand .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-top:4px;font-weight:600;white-space:nowrap}
.nav{display:flex;align-items:center;gap:6px}
.nav > li{list-style:none}
.nav{margin:0;padding:0}
.nav a.top{display:inline-block;padding:12px 12px;color:var(--ink);font-weight:600;font-size:.96rem;border-radius:6px;white-space:nowrap}
.nav a.top:hover{text-decoration:none;background:var(--surface)}
.nav .has-mega:hover > a.top,.nav .has-mega:focus-within > a.top{background:var(--surface)}
.mega{position:absolute;left:0;right:0;top:100%;padding-top:10px;display:none}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
.mega-inner{background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:28px 32px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:32px}
.mega h4{font-family:var(--body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;font-weight:600}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:.98rem}
.mega li a > span:first-child{white-space:nowrap}
.mega li a:hover{text-decoration:none;color:var(--blue)}
.mega li a .price{color:var(--muted);font-size:.82rem;text-align:right;line-height:1.3}
.mega .mega-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-cta{margin-left:8px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}
.mobile-nav{display:none}
@media (max-width:1100px){
  .nav,.nav-cta{display:none}
  .burger{display:block}
  .mobile-nav{display:none;border-top:1px solid var(--line);background:var(--white)}
  .mobile-nav.open{display:block}
  .mobile-nav details{border-bottom:1px solid var(--line)}
  .mobile-nav summary{padding:14px 24px;font-weight:600;cursor:pointer;list-style:none}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav ul{list-style:none;margin:0;padding:0 24px 12px}
  .mobile-nav li a{display:block;padding:8px 0;color:var(--ink)}
  .mobile-nav .plain{display:block;padding:14px 24px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
  .mobile-nav .cta-row{padding:16px 24px}
}

/* Sections */
.section{padding:96px 0}
.section-tight{padding:64px 0}
.section-surface{background:var(--surface)}
.section-white{background:var(--white)}
@media (max-width:760px){.section{padding:60px 0}.section-tight{padding:44px 0}}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:980px){.grid-2{grid-template-columns:1fr;gap:36px}.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-4{grid-template-columns:1fr}}
.center{text-align:center}
.intro{max-width:44em;margin:0 auto}

/* Hero */
.hero{padding:88px 0 72px}
@media (max-width:760px){.hero{padding:48px 0 40px}}
.hero h1{margin-bottom:.35em}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.ph{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#E9EEF3 0%,#D6DFE8 55%,#C9D5E1 100%);aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:flex-start;padding:22px;color:var(--blue);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 10%,rgba(255,255,255,.55),transparent 60%)}
.ph span{position:relative}
.ph-wide{aspect-ratio:16/9}
.ph-square{aspect-ratio:1/1}
.ph-portrait{aspect-ratio:3/4}
.fade-up{animation:fadeUp .8s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Verlaufskarte (Signatur) */
.verlauf{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 30px;box-shadow:var(--shadow);max-width:520px}
.verlauf .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.verlauf .head strong{font-family:var(--display);font-size:1.4rem;font-weight:600}
.verlauf .head span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.verlauf .row{display:grid;grid-template-columns:120px 1fr 48px;gap:14px;align-items:center;margin:12px 0;font-size:.95rem}
.verlauf .bar{height:8px;background:var(--surface);border-radius:999px;overflow:hidden}
.verlauf .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#4E77A8);border-radius:999px;width:var(--w,50%);transform-origin:left;animation:grow 1.2s ease both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.verlauf .row em{font-style:normal;color:var(--muted);font-size:.85rem;text-align:right}
.verlauf .foot{border-top:1px solid var(--line);padding-top:12px;margin-top:16px;font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.verlauf .dots{display:flex;gap:6px;align-items:center}
.verlauf .dots b{width:8px;height:8px;border-radius:50%;background:var(--gold-soft);display:inline-block}
.verlauf .dots b.on{background:var(--gold)}

/* Verlaufslinie (Prozess) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;margin-top:36px}
.steps::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:1px;background:var(--gold)}
.step{position:relative;padding-top:34px}
.step::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.step h3{margin-bottom:.35em}
.step .time{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:24px}.steps::before{left:7px;right:auto;top:12px;bottom:12px;width:1px;height:auto}.step{padding-top:0;padding-left:34px}.step::before{left:0}}

/* Karten */
.card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s;color:var(--ink)}
a.card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{margin:0}
.card p{margin:0;color:var(--muted)}
.card .price{margin-top:auto;padding-top:14px;font-weight:600;color:var(--blue);display:flex;justify-content:space-between;align-items:center}
.card .price::after{content:"→"}
.pillar{padding:0}
.pillar h3{margin-bottom:.3em}
.pillar h3::before{content:"";display:block;width:36px;height:1px;background:var(--gold);margin-bottom:16px}
.quote{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:28px}
.quote p{font-family:var(--display);font-size:1.35rem;line-height:1.4;margin:0 0 14px}
.quote cite{font-style:normal;color:var(--muted);font-size:.92rem}

/* Qualifikation */
.qual{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.qual{grid-template-columns:1fr}}
.qual ul{list-style:none;margin:0;padding:0}
.qual li{padding:14px 0 14px 28px;border-bottom:1px solid var(--line);position:relative}
.qual li::before{content:"";position:absolute;left:0;top:26px;width:14px;height:1px;background:var(--gold)}
.qual li strong{display:block}

/* Innenseiten */
.page-head{padding:72px 0 40px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.page-head{padding:40px 0 28px}}
.page-head h1{margin-bottom:.3em}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start;padding:56px 0 96px}
@media (max-width:980px){.layout{grid-template-columns:1fr;gap:40px;padding:40px 0 64px}}
.aside{position:sticky;top:100px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.aside h3{font-family:var(--display);margin-bottom:.4em}
.aside .price{font-size:1.4rem;font-family:var(--display);font-weight:600;color:var(--blue);margin:6px 0 14px}
.aside .btn{width:100%;justify-content:center}
.aside .tel{display:block;text-align:center;margin-top:12px;color:var(--muted);font-size:.92rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 28px}
@media (max-width:640px){.facts{grid-template-columns:1fr 1fr}}
.fact{background:var(--surface);border-radius:8px;padding:16px}
.fact b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--blue)}
.fact span{font-size:.85rem;color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted)}
.cta-band{background:var(--blue);color:#fff;padding:72px 0}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.85)}
.cta-band .btn-primary{background:#fff;color:var(--blue);border-color:#fff}
.cta-band .btn-primary:hover{background:var(--gold-soft)}

/* Tabellen, Glossar, Formular */
table{width:100%;border-collapse:collapse;margin:8px 0 28px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.glossar-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.glossar-nav a{padding:6px 10px;border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:.9rem}
.glossar dt{font-family:var(--display);font-size:1.5rem;font-weight:600;margin-top:28px}
.glossar dd{margin:6px 0 0;color:var(--ink);max-width:68ch}
.glossar .letter{font-family:var(--display);font-size:2.2rem;color:var(--gold);border-bottom:1px solid var(--line);margin-top:48px;padding-bottom:6px}
form.form{display:grid;gap:18px;max-width:640px}
.form label{display:block;font-weight:600;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--white);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(30,58,95,.12)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.note{background:var(--surface);border-left:2px solid var(--gold);padding:14px 18px;border-radius:0 8px 8px 0;font-size:.95rem}

/* Footer */
.footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--white);font-size:.95rem}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .cols{grid-template-columns:1fr}}
.footer h4{font-family:var(--body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:6px 0}
.footer a{color:var(--ink)}
.footer .bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.footer .brand .name{font-size:1.5rem}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tags span{font-size:.8rem;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.journal-list article{border-bottom:1px solid var(--line);padding:28px 0}
.journal-list h3{margin-bottom:.3em}

/* ===================== v2: Übergänge, Musterung, Interaktion ===================== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.pattern{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24h48M24 0v48' stroke='%23B9975B' stroke-opacity='.10' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.2' fill='%23B9975B' fill-opacity='.22'/%3E%3C/svg%3E")}
.pattern-soft{background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0 32h64M32 0v64' stroke='%231E3A5F' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E")}
.header{transition:box-shadow .3s,background .3s}
.header.scrolled{box-shadow:0 6px 24px rgba(30,58,95,.06);background:rgba(252,251,248,.98)}

/* Hero v2 */
.hero2{position:relative;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden;background:linear-gradient(120deg,#E7EDF2 0%,#D3DDE7 45%,#BFCFDD 100%)}
.hero2 .bg{position:absolute;inset:0;background:radial-gradient(90% 70% at 75% 20%,rgba(255,255,255,.65),transparent 60%),linear-gradient(180deg,rgba(252,251,248,0) 40%,rgba(252,251,248,.92) 100%);pointer-events:none}
.hero2 .bg-img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;transform:scale(1.04);animation:kenburns 14s ease-out both}
@keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.hero2 .bg-img{animation:none;transform:none}}
.hero2 .wrap{position:relative;padding-top:120px;padding-bottom:64px}
.hero2 h1{max-width:12ch;font-size:clamp(2.8rem,6.4vw,5.2rem);letter-spacing:-.01em}
.hero2 .lead{max-width:40em}
.hero2 .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero2 .slot{position:absolute;right:24px;top:24px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);opacity:.7}

/* Behandlungsfinder */
.finder{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px 30px;margin-top:-56px;position:relative;z-index:2}
@media (max-width:760px){.finder{margin-top:-24px;padding:22px}}
.finder .chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:10px 16px;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;transition:all .2s}
.chip:hover,.chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.finder .result{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:20px;align-items:center}
.finder .result.show{display:grid}
@media (max-width:640px){.finder .result.show{grid-template-columns:1fr}}
.finder .result h3{margin:0 0 4px}
.finder .result p{margin:0;color:var(--muted)}

/* Drei Türen */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.doors{grid-template-columns:1fr}}
.door{position:relative;border-radius:14px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:var(--ink);background:linear-gradient(160deg,#EEF2F5,#D9E2EA);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.door:hover{transform:translateY(-6px);box-shadow:var(--shadow);text-decoration:none}
.door .eyebrow{margin-bottom:8px}
.door h3{font-size:2rem;margin-bottom:.3em}
.door p{color:var(--muted);margin:0 0 14px}
.door .go{font-weight:600;color:var(--blue)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(252,251,248,.95) 100%);z-index:0}
.door > *{position:relative;z-index:1}

/* Leistungs-Karten mit Bildslot */
.svc{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);text-decoration:none}
.svc .img{aspect-ratio:4/3;background:linear-gradient(150deg,#E9EEF3,#CFDAE4);display:flex;align-items:flex-end;padding:14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);overflow:hidden}
.svc .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.svc:hover .img img{transform:scale(1.05)}
.svc .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px}
.svc .body p{margin:0;color:var(--muted)}
.svc .meta{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;font-weight:600;color:var(--blue)}

/* Stapel-Story (Derma Longevity) */
.stack{display:grid;gap:24px}
.stack .panel{position:sticky;top:96px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;box-shadow:var(--shadow)}
.stack .panel:nth-child(2){top:116px}
.stack .panel:nth-child(3){top:136px}
@media (max-width:900px){.stack .panel{grid-template-columns:1fr;position:static;padding:28px}}
.stack .panel .ph{aspect-ratio:4/3}

/* Zertifikatskarte */
.cert{background:var(--white);border:1px solid var(--gold-soft);border-radius:14px;padding:32px;position:relative;box-shadow:var(--shadow)}
.cert::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold-soft);border-radius:10px;pointer-events:none}
.cert .eyebrow{margin-bottom:8px}
.cert h3{font-size:1.7rem;margin-bottom:.2em}
.cert .meta{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.cert ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:640px){.cert ul{grid-template-columns:1fr}}
.cert li{padding-left:18px;position:relative;font-size:.95rem}
.cert li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--gold)}
.cert .foot{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;font-size:.85rem;color:var(--muted)}
.logos{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:center;margin-top:36px}
.logos span{font-family:var(--display);font-size:1.35rem;letter-spacing:.06em;color:var(--muted);opacity:.85;transition:color .25s,opacity .25s}
.logos span:hover{color:var(--blue);opacity:1}
.logos img{height:28px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.logos img:hover{filter:none;opacity:1}

/* Preis-Umschalter */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;background:var(--white);margin-bottom:18px}
.toggle button{border:0;background:transparent;font:inherit;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--blue);color:#fff}
table.prices td.serie,table.prices th.serie{display:none}
table.prices.show-serie td.serie,table.prices.show-serie th.serie{display:table-cell}
table.prices.show-serie td.einzel,table.prices.show-serie th.einzel{display:none}

/* Hauttyp-Check */
.quiz{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.quiz .q{display:none}
.quiz .q.active{display:block}
.quiz .opts{display:grid;gap:10px;margin:16px 0}
.quiz .opts button{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer;transition:all .2s}
.quiz .opts button:hover{border-color:var(--blue);background:var(--white)}
.quiz .progress{height:4px;background:var(--surface);border-radius:999px;overflow:hidden;margin-bottom:18px}
.quiz .progress i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s}
.quiz .res{display:none}
.quiz .res.show{display:block}

/* Assistent */
.assist-btn{position:fixed;right:22px;bottom:22px;z-index:90;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:14px 20px;font:inherit;font-weight:600;box-shadow:0 12px 30px rgba(30,58,95,.28);cursor:pointer;display:flex;align-items:center;gap:10px}
.assist-btn:hover{background:var(--blue-deep)}
.assist-btn .k{font-size:.7rem;opacity:.7;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:1px 6px}
.assist{position:fixed;inset:auto 22px 82px auto;width:min(440px,calc(100vw - 44px));max-height:min(70vh,640px);background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(30,58,95,.22);z-index:95;display:none;flex-direction:column;overflow:hidden;transform:translateY(12px);opacity:0;transition:opacity .25s,transform .25s}
.assist.open{display:flex;opacity:1;transform:none}
.assist header{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.assist header strong{font-family:var(--display);font-size:1.25rem}
.assist header button{border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--muted)}
.assist .in{padding:14px 18px;border-bottom:1px solid var(--line)}
.assist input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.assist .chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 0}
.assist .chips button{font-size:.85rem;padding:7px 12px}
.assist .out{overflow:auto;padding:12px 18px 18px;display:grid;gap:10px}
.assist .hit{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink)}
.assist .hit:hover{border-color:var(--blue);text-decoration:none}
.assist .hit b{display:block;font-weight:600}
.assist .hit small{color:var(--muted);display:block;margin-top:4px;line-height:1.45}
.assist .hit em{font-style:normal;background:var(--gold-soft)}
.assist .ans{background:var(--surface);border-radius:10px;padding:12px 14px;font-size:.95rem}
.assist .foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
@media (max-width:640px){.assist{inset:auto 12px 76px 12px;width:auto}.assist-btn{right:12px;bottom:12px}}


/* Monogramm VZ */
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;perspective:600px}
.footer .brand{flex-direction:row}
.brand .wm{display:flex;flex-direction:column;line-height:1.05}
.mono{width:42px;height:42px;flex:none;overflow:visible;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mono path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:170;stroke-dashoffset:170;animation:draw 1.3s cubic-bezier(.2,.7,.2,1) forwards}
.mono .v{stroke:var(--blue)}
.mono .z{stroke:var(--gold);animation-delay:.3s}
@keyframes draw{to{stroke-dashoffset:0}}
.brand:hover .mono{transform:rotate(-8deg) scale(1.06)}
.mono.redraw .z{animation:draw .9s cubic-bezier(.2,.7,.2,1) forwards}
.mono.spin{animation:monospin .9s cubic-bezier(.65,0,.35,1)}
@keyframes monospin{0%{transform:rotateY(0) rotate(0)}50%{transform:rotateY(180deg) rotate(-10deg)}100%{transform:rotateY(360deg) rotate(0)}}
@media (prefers-reduced-motion:reduce){.mono path{animation:none;stroke-dashoffset:0}.mono.spin,.mono.redraw .z{animation:none}.brand:hover .mono{transform:none}}
.footer .mono{width:36px;height:36px}

/* Lexikon */
.lexikon .lx{display:contents}
.lexikon .lx.hide{display:none}
.lexikon dt .cat{font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-left:10px;vertical-align:middle;font-weight:600}
.lexikon dd .more{white-space:nowrap;font-weight:600}
#lx-filter .chip{background:var(--white)}
#lx-filter .chip[aria-pressed="true"],#lx-filter .chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Bilder */
.ph.has-img{padding:0;background:var(--surface)}
.ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.has-img::before{display:none}
.svc .img.has-img{padding:0;background:var(--white)}
.svc .img.has-img img{width:100%;height:100%;object-fit:cover}
.door.has-img{background-size:cover;background-position:center;color:var(--ink)}
.door.has-img::after{background:linear-gradient(180deg,rgba(252,251,248,0) 25%,rgba(252,251,248,.96) 72%)}
.hero2 .bg{background:linear-gradient(90deg,rgba(252,251,248,.9) 0%,rgba(252,251,248,.7) 40%,rgba(252,251,248,.1) 100%),linear-gradient(180deg,rgba(252,251,248,0) 55%,rgba(252,251,248,.96) 100%);z-index:1}
.hero2 .bg-img{z-index:0}
.hero2 .wrap{z-index:2}
.ph-portrait.has-img{max-width:420px}
.logos img{height:34px}
.logos img[alt^="SGMK"]{height:56px}
.videoband{position:relative;background:#0e1418;overflow:hidden}
.videoband video{width:100%;height:min(62vh,620px);object-fit:cover;display:block;opacity:.92}
.videoband .vb-text{position:absolute;left:0;right:0;bottom:0;padding:28px max(24px,calc((100% - 1160px)/2 + 24px));color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55))}
.videoband .vb-text p{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);max-width:30em;margin:0}
.videoband .eyebrow{color:var(--gold-soft)}
@media (prefers-reduced-motion:reduce){.videoband video{display:none}.videoband{background:url(/villa-zeltweg/assets/img/behandlung-poster.jpg) center/cover;min-height:360px}}

/* Assistent: dezenter */
.assist-btn{background:rgba(30,58,95,.92);padding:11px 16px;font-size:.92rem;box-shadow:0 8px 22px rgba(30,58,95,.18);opacity:.9;transition:opacity .25s,background .25s,transform .25s}
.assist-btn:hover{opacity:1;background:var(--blue);transform:translateY(-1px)}
.assist-btn .k{display:none}
@media (max-width:640px){.assist-btn{padding:10px 14px;font-size:.86rem}}

.assist header strong::after{content:''}

/* ===================== Apple Clear ===================== */
:root{--bg:#FFFFFF;--bg2:#F5F5F7;--surface:#F5F5F7;--ink:#1D1D1F;--muted:#6E6E73;--line:rgba(0,0,0,.08);--blue:#0066CC;--link:#0066CC;--navy:#1D1D1F;--dark:#000;--dark2:#1D1D1F;--gold:#A28776;--gold-soft:#D6C6BB;
  --display:'Inter','SF Pro Display','Helvetica Neue',Arial,sans-serif;--body:'Inter','SF Pro Text','Helvetica Neue',Arial,sans-serif;--radius:18px}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.55;letter-spacing:-.008em;color:var(--ink);background:var(--bg)}
p{color:var(--ink)}
.muted{color:var(--muted)}
a{color:var(--link)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.06;color:var(--ink)}
h1{font-size:clamp(2.9rem,6.4vw,5.6rem);letter-spacing:-.035em}
h2{font-size:clamp(2rem,3.9vw,3.3rem);margin-bottom:.4em}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.018em}
h1 em,h2 em,.statement p em{font-style:normal;color:var(--muted)}
.lead{font-family:var(--body);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.38;letter-spacing:-.014em;color:var(--muted)}
.eyebrow{font-family:var(--body);font-size:.8rem;letter-spacing:.02em;text-transform:none;color:var(--muted);font-weight:500;margin-bottom:12px}
.eyebrow::before,.center .eyebrow::before,.center .eyebrow::after{display:none}
.center .intro,.intro{max-width:44em}
.center .lead{margin:0 auto}
.section{padding:120px 0}
.section-tight{padding:56px 0}
@media (max-width:760px){.section{padding:72px 0}}
.pattern,.pattern-soft,.section-surface{background:var(--bg2)}
.section-white{background:#fff}

/* Buttons und Links */
.btn{font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:-.01em;text-transform:none;padding:12px 24px;border-radius:980px;border:1px solid transparent;transition:background .2s,color .2s,transform .2s}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:none}
.btn-primary:hover{background:#0071E3;border-color:#0071E3;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-link{font-family:var(--body);font-weight:400;font-size:1.05rem;letter-spacing:-.01em;text-transform:none;color:var(--link);gap:6px}
.btn-link::after{content:"›";color:var(--link);font-size:1.3em;line-height:0;margin-top:-2px}
.btn-link:hover{text-decoration:underline;color:var(--link)}

/* Kopfzeile: Milchglas, klein, ruhig */
.header{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.header.scrolled{background:rgba(255,255,255,.86);box-shadow:none}
.topbar{height:64px;gap:18px}
.brand{gap:10px}
.brand .name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;font-weight:600;letter-spacing:.04em;text-transform:none;white-space:nowrap;color:var(--ink)}
.brand .tag{display:none}
.mono{width:34px;height:34px}
.mono .ring{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1.4s ease forwards .1s}
.mono path{stroke-width:2.8}
.mono .v{stroke:var(--ink)}
.brand:hover .mono{transform:scale(1.04)}
.nav a.top{font-family:var(--body);font-weight:400;font-size:.9rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);padding:10px 11px;border-radius:0;opacity:.85}
.nav a.top:hover,.nav .has-mega:hover > a.top{background:transparent;opacity:1}
.nav a.top::after{display:none}
.nav a.top.lang{color:var(--muted);padding-left:6px;padding-right:6px}
.nav-cta .btn{padding:8px 16px;font-size:.9rem}
.mega-inner{border-radius:18px;border:0;box-shadow:0 30px 80px rgba(0,0,0,.14);background:#fff}
.mega h4{letter-spacing:0;text-transform:none;font-size:.8rem;color:var(--muted)}
.mega li a{font-family:var(--body);font-size:.95rem;border-bottom:1px solid rgba(0,0,0,.05)}
.mega li a .price{font-size:.82rem;letter-spacing:0;color:var(--muted)}
.mega-note{color:var(--muted)}
.mobile-nav summary,.mobile-nav .plain{font-size:1rem;letter-spacing:-.01em;text-transform:none}

/* Hero: zentriert, Bild darunter, gross */
.hero-maison{padding:96px 0 48px;text-align:center}
.hero-maison .grid{display:block}
.hero-maison h1{margin:.1em auto .35em;max-width:14ch}
.hero-maison .lead{max-width:36em;margin:0 auto}
.hero-maison .actions{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;margin:26px 0 56px}
.hero-maison .visual{max-width:1400px;margin:0 auto;padding:0}
.hero-maison .visual::before{display:none}
.hero-maison .visual img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:24px;display:block;transition:none}
.hero-maison .visual:hover img{transform:none}
.hero-maison .caption{justify-content:center;gap:28px;font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:16px}
.hero-maison .marks{border:0;margin:40px auto 0;gap:32px}
.hero-maison .marks span{flex:0 1 auto;padding:0;border:0!important;font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400}
.hero-maison .marks span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:10px;vertical-align:middle}
@media (max-width:760px){.hero-maison{padding-top:56px}.hero-maison .visual img{aspect-ratio:4/3;border-radius:16px}.hero-maison .marks{flex-direction:column;gap:10px}}

/* Aussage */
.statement{padding:96px 0 24px;text-align:center}
.statement .rule{display:none}
.statement p{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.15;max-width:22em;margin:0 auto;color:var(--ink)}

/* Türen: Kacheln wie Produktkarten */
.doors{gap:20px}
.door,.door.has-img{border-radius:24px;border:0;background-color:var(--bg2);background-size:0 0!important;background-repeat:no-repeat;overflow:hidden;box-shadow:none;padding:0;min-height:0;justify-content:flex-start}
.door::before,.door.has-img::before{content:"";position:relative;display:block;aspect-ratio:4/3;height:auto;border-radius:0;background:inherit;background-size:cover!important;background-position:center;background-color:transparent}
.door::after,.door.has-img::after{display:none}
.door > *{position:relative}
.door h3,.door p,.door .eyebrow,.door .go{margin-left:28px;margin-right:28px}
.door .eyebrow{margin-top:26px}
.door h3{font-size:1.7rem;letter-spacing:-.025em}
.door p{color:var(--muted);font-weight:400}
.door .go{font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--link);margin-bottom:28px}
.door .go::after{content:none}
.door:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.10)}

/* Bildbänder */
.band{min-height:min(60vh,600px)}
.band::before{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
.band .inner{max-width:26em}
.band p{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.1}
.band .eyebrow{color:rgba(255,255,255,.75)}

/* Dunkle Produktschiene */
.section-dark{background:var(--dark);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lead,.section-dark p{color:#A1A1A6}
.section-dark .eyebrow{color:#8E8E93}
.rail{gap:20px}
.rail > *{flex-basis:min(330px,76vw)}
.svc,.section-dark .svc{border-radius:20px;border:0;background:var(--dark2);color:#fff;transition:transform .35s,box-shadow .35s}
.section-white .svc,.pattern .svc,.section-surface .svc{background:#fff;color:var(--ink)}
.svc .img{aspect-ratio:1/1;background:#fff;border-radius:0}
.svc .img.has-img{background:#fff}
.svc .body{padding:22px 24px 24px}
.svc .eyebrow{letter-spacing:0;text-transform:none;font-size:.8rem;color:#8E8E93}
.section-white .svc .eyebrow{color:var(--muted)}
.svc h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.section-dark .svc .body p{color:#A1A1A6}
.section-white .svc .body p{color:var(--muted)}
.svc .meta,.section-dark .svc .meta{font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;border-top:1px solid rgba(255,255,255,.12);color:#fff}
.section-white .svc .meta{border-top-color:rgba(0,0,0,.08);color:var(--ink)}
.svc:hover,.section-dark .svc:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.25);border-color:transparent}

/* Karten */
.card,.quote,.aside,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact{border:0;border-radius:20px;box-shadow:none;background:var(--bg2)}
.section-surface .card,.pattern .card,.pattern-soft .card,.section-surface .fact,.pattern .aside{background:#fff}
a.card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.08);border-color:transparent}
.card{padding:30px}
.card .eyebrow{font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.card h3{margin-top:2px;font-size:1.5rem}
.card p{color:var(--muted);font-weight:400}
.card .price{font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;border-top:1px solid rgba(0,0,0,.08);padding-top:16px}
.card .price::after{color:var(--link)}
.fact{padding:20px 18px;border-radius:16px}
.fact b{font-family:var(--display);font-weight:700;font-size:1.9rem;letter-spacing:-.035em;color:var(--ink)}
.fact span{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.aside h3{font-family:var(--display);font-weight:600}
.aside .eyebrow{font-size:.8rem;letter-spacing:0;text-transform:none}
.aside .price{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.035em;color:var(--ink)}
.aside .btn{border-radius:980px}
.verlauf .head strong,.cert h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.verlauf .head::after{display:none}
.verlauf .bar{background:rgba(0,0,0,.06)}
.verlauf .bar i{background:var(--blue)}
.verlauf .dots b.on{background:var(--blue)}
.cert{border:0;background:#fff}
.cert::before{display:none}
.cert li::before{color:var(--blue)}
.quote p{font-family:var(--display);font-weight:500;font-style:normal;font-size:1.2rem;letter-spacing:-.015em}
.chip{border-radius:980px;border:1px solid rgba(0,0,0,.14);background:#fff;font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:400;padding:9px 16px;color:var(--ink)}
.chip:hover,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#lx-filter .chip{background:#fff}
#lx-filter .chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.finder{border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.finder h2{font-size:1.6rem}
.pillar h3::before{display:none}
.pillar h3{font-size:1.5rem}
.pillar p{color:var(--muted)}
.steps::before{background:rgba(0,0,0,.1)}
.step::before{background:var(--ink);border:0;width:10px;height:10px;top:8px}
.step .time{color:var(--muted);letter-spacing:0;text-transform:none;font-size:.85rem}
.step p{color:var(--muted)}
table th{letter-spacing:0;text-transform:none;font-size:.85rem;color:var(--muted)}
table td{font-weight:400}
.toggle{border-radius:980px;border:1px solid rgba(0,0,0,.1);background:var(--bg2)}
.toggle button{border-radius:980px;font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:500}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.faq summary{font-weight:500}
.faq summary::after{color:var(--muted)}
.note{background:var(--bg2);border:0;border-radius:16px}
.form input,.form select,.form textarea{border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.14)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,102,204,.15)}
.form label{font-size:.85rem;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
.quiz .opts button{border-radius:12px}
.glossar .letter{color:var(--muted);font-weight:600}
.glossar dt{font-weight:600}
.lexikon dt .cat{letter-spacing:0;text-transform:none;font-size:.78rem;color:var(--muted);font-weight:500}
.journal-list article{border-radius:20px;background:var(--bg2);border:0}

/* Bilder: rund, ohne Rahmen */
.ph.has-img,.svc .img.has-img,.stack .panel .ph{border-radius:20px;outline:0;outline-offset:0}
.ph.has-img img{transition:none}
.ph.has-img:hover img{transform:none}
.svc .img.has-img img{transition:none}
.svc:hover .img.has-img img{transform:none}
.videoband{border-radius:0}
.videoband .vb-text p{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.videoband .eyebrow{color:rgba(255,255,255,.75)}

/* Standards */
.standards{border:0;gap:20px}
.standards > div{background:var(--bg2);border-radius:20px;padding:34px 30px}
.standards > div + div{border:0}
.standards svg{stroke:var(--ink);width:30px;height:30px;stroke-width:1.4}
.standards h3{font-size:1.4rem}
.standards p{color:var(--muted)}
@media (max-width:900px){.standards > div + div{border:0}}

/* Seitenköpfe, Layout, Abschluss, Footer, Suche, Logos */
.page-head{padding:88px 0 24px;text-align:center;border:0;background:transparent}
.page-head .wrap{max-width:860px}
.page-head h1{max-width:18ch;margin-left:auto;margin-right:auto;font-size:clamp(2.6rem,5.4vw,4.4rem)}
.page-head .breadcrumb{font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:18px}
.page-head .lead{margin:0 auto}
.prose h2{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.prose p,.prose li{font-weight:400}
.layout{padding-top:32px}
.cta-band{background:var(--bg2);padding:96px 0;color:var(--ink)}
.cta-band h2{color:var(--ink)}
.cta-band .lead{color:var(--muted)}
.cta-band .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.cta-band .btn-ghost{color:var(--ink)!important;border-color:rgba(0,0,0,.2)!important}
.cta-band .btn-ghost:hover{background:transparent}
.footer{background:#fff;border-top:1px solid rgba(0,0,0,.08);color:var(--muted);font-size:.85rem}
.footer .brand .name{font-size:1.2rem}
.footer h4{color:var(--ink);letter-spacing:0;text-transform:none;font-size:.85rem;font-weight:600}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer .bottom{font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--muted);border-top:1px solid rgba(0,0,0,.08);padding-top:22px}
.assist-btn{background:rgba(29,29,31,.9);border-radius:980px;font-family:var(--body);font-size:.92rem;letter-spacing:0;text-transform:none;padding:11px 18px;opacity:.95}
.assist{border-radius:20px;border:0;box-shadow:0 30px 80px rgba(0,0,0,.18)}
.assist header strong{font-family:var(--display);font-weight:600}
.assist input{border-radius:12px}
.assist .hit{border-radius:12px}
.logos{border-top:0;gap:28px 40px}
.logos img{filter:grayscale(1);opacity:.5;height:28px;mix-blend-mode:multiply}
.logos img:hover{opacity:1;filter:none}
.logos img[alt^="SGMK"]{height:48px}
.section + .section-white,.section-white + .section{border-top:0}
.section-tight .finder{margin-top:0}

/* Strukturregeln (Schiene, Bildband, Standards, Hero-Details) */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 28px;margin:0 -24px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start;flex:0 0 min(330px,76vw)}
.band{position:relative;min-height:min(60vh,600px);display:grid;place-items:center;text-align:center;color:#fff;background-size:cover;background-position:center;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
.band .inner{position:relative;padding:72px 24px;max-width:26em}
.band p{margin:0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
@media (prefers-reduced-motion:no-preference){.band{background-attachment:fixed}}
@media (max-width:900px){.band{background-attachment:scroll;min-height:360px}}
.standards{display:grid;grid-template-columns:repeat(3,1fr)}
.standards svg{display:block;fill:none}
@media (max-width:900px){.standards{grid-template-columns:1fr}}
.hero-maison .marks{display:flex;justify-content:center;flex-wrap:wrap;max-width:1160px}
.hero-maison .caption{display:flex}
.statement p{margin:0 auto}
.mobile-nav .cta-row .btn{border-radius:980px}

/* ===================== Bewegung und Illustration ===================== */
.illus{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.illus{grid-template-columns:1fr}}
.illu-card{background:var(--bg2);border-radius:20px;padding:22px 26px 28px}
.illu-card h3{margin:14px 0 8px}
.illu-card p{color:var(--muted);margin-bottom:12px}
.illu-wrap{background:#fff;border-radius:16px;padding:10px;overflow:hidden}
.illu-lead{margin:0 0 28px;background:var(--bg2)}
.illu{width:100%;height:auto;display:block}
.illu .d{fill:none;stroke:#1D1D1F;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.illu .curve{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1) .2s}
.illu .beam,.illu .wave,.illu .pulse,.illu .dots,.illu .bars{opacity:0;transform:translateY(8px);transition:opacity .8s ease .9s,transform .8s ease .9s}
.illu .lbl{opacity:0;transition:opacity .8s ease 1.2s}
.in .illu .d,.in .illu .curve{stroke-dashoffset:0}
.in .illu .beam,.in .illu .wave,.in .illu .pulse,.in .illu .dots,.in .illu .bars,.in .illu .lbl{opacity:1;transform:none}
@keyframes beamPulse{0%,100%{opacity:.5}50%{opacity:1}}
.in .illu .beam{animation:beamPulse 1.6s ease-in-out 2s infinite}
@keyframes waveShift{0%{transform:translateX(0)}100%{transform:translateX(-8px)}}
.in .illu .wave path{animation:waveShift 1.4s ease-in-out 2s infinite alternate}
@keyframes barBeat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
.in .illu .pulse rect{transform-origin:center bottom;animation:barBeat 1.2s ease-in-out infinite}
.in .illu .pulse rect:nth-child(2){animation-delay:.15s}.in .illu .pulse rect:nth-child(3){animation-delay:.3s}.in .illu .pulse rect:nth-child(4){animation-delay:.45s}.in .illu .pulse rect:nth-child(5){animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.illu .d,.illu .curve{stroke-dashoffset:0;transition:none}.illu .beam,.illu .wave,.illu .pulse,.illu .dots,.illu .bars,.illu .lbl{opacity:1;transform:none;animation:none!important}}
.reveal .grid-2 > *,.reveal .grid-3 > *,.reveal .grid-4 > *,.reveal .doors > *,.reveal .illus > *,.reveal .standards > *,.reveal .rail > *{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in .grid-2 > *,.reveal.in .grid-3 > *,.reveal.in .grid-4 > *,.reveal.in .doors > *,.reveal.in .illus > *,.reveal.in .standards > *,.reveal.in .rail > *{opacity:1;transform:none}
.reveal.in > .wrap > * > :nth-child(2){transition-delay:.12s}.reveal.in > .wrap > * > :nth-child(3){transition-delay:.24s}.reveal.in > .wrap > * > :nth-child(4){transition-delay:.36s}.reveal.in > .wrap > * > :nth-child(5){transition-delay:.48s}.reveal.in > .wrap > * > :nth-child(6){transition-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-maison .eyebrow{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-maison h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) .1s both}
.hero-maison .lead{animation:rise .9s cubic-bezier(.2,.7,.2,1) .25s both}
.hero-maison .actions{animation:rise .9s cubic-bezier(.2,.7,.2,1) .4s both}
.hero-maison .visual{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
.hero-maison .visual img{transform:scale(1.03);transition:transform 2.4s cubic-bezier(.2,.7,.2,1) .5s}
.loaded .hero-maison .visual img{transform:scale(1)}
.hero-maison .marks,.hero-maison .caption{animation:rise 1s ease .8s both}
.verlauf .bar i{width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.in .verlauf .bar i,.verlauf.in .bar i{width:var(--w)}
.verlauf .row:nth-child(3) .bar i{transition-delay:.45s}.verlauf .row:nth-child(4) .bar i{transition-delay:.6s}.verlauf .row:nth-child(5) .bar i{transition-delay:.75s}
.statement p .w{opacity:.22;transition:opacity .35s ease}
.statement p .w.on{opacity:1}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.hero-maison *{animation:none!important}.reveal .grid-2 > *,.reveal .grid-3 > *,.reveal .grid-4 > *,.reveal .doors > *,.reveal .illus > *,.reveal .standards > *,.reveal .rail > *{opacity:1;transform:none}}
.illu-lead{background:#fff;border:1px solid var(--line)}
.aside .price{font-size:1.9rem;line-height:1.1}

/* Feinschliff v15 */
.hero-maison h1{max-width:13ch}
.hero-maison .lead{max-width:34em;font-size:clamp(1.15rem,1.6vw,1.4rem)}
.hero-maison .visual img{aspect-ratio:16/7.2}
.statement p{font-size:clamp(1.6rem,3vw,2.6rem);max-width:24em}
.section{padding:112px 0}
.center .intro .lead{max-width:38em}
.doors{gap:24px}
.door h3{font-size:1.75rem}
.card h3{font-size:1.45rem}
.band{min-height:min(56vh,560px)}
.svc .body{padding:22px 22px 22px}
.hero-maison h1{max-width:16ch}

/* Seitenbilder, Vorschaubilder */
.page-visual{margin:8px auto 48px}
.page-visual img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:24px;display:block}
@media (max-width:760px){.page-visual img{aspect-ratio:4/3;border-radius:16px}}
.thumb{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fff;margin-bottom:18px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.journal-list article{padding:20px 20px 24px}
.card-img{padding:16px 16px 26px}
.card-img .thumb{margin-bottom:16px}
.card-img .eyebrow,.card-img h3,.card-img p,.card-img .price{margin-left:10px;margin-right:10px}

/* ===================== Patek-Schicht: Farbe, Typografie, Ruhe ===================== */
:root{--bg:#F5F2EF;--bg2:#EAE5E0;--surface:#EAE5E0;--ink:#14212E;--muted:#6B6F76;--line:rgba(20,33,46,.10);--blue:#0B2A4A;--link:#0B2A4A;--navy:#0B1F3A;--dark:#0B1F3A;--dark2:#12294A;--gold:#A28776;--gold-soft:#D6C6BB;
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;--body:'Inter','Helvetica Neue',Arial,sans-serif}
body{background:var(--bg);color:var(--ink);letter-spacing:0;line-height:1.62;font-size:1.05rem}
p{color:#2A3541}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.005em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(3rem,6.4vw,5.8rem);letter-spacing:-.012em}
h2{font-size:clamp(2.1rem,3.9vw,3.4rem);letter-spacing:-.01em;margin-bottom:.4em}
h3{font-size:clamp(1.35rem,1.9vw,1.7rem);letter-spacing:0}
h1 em,h2 em,.statement p em{font-style:italic;font-weight:500;color:var(--gold)}
.lead{font-family:var(--body);font-weight:400;font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.6;letter-spacing:0;color:#4A535D}
.eyebrow{font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:14px}
.card .eyebrow,.svc .eyebrow,.door .eyebrow,.aside .eyebrow,.illu-card .eyebrow{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.section-white{background:#fff}
.pattern,.pattern-soft,.section-surface{background:var(--bg2)}

/* Buttons: ruhig, dunkel, Versalien mit leichter Sperrung */
.btn{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;border-radius:4px;border:1px solid var(--blue)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#143B66;border-color:#143B66}
.btn-ghost{color:var(--ink);border-color:rgba(20,33,46,.35);background:transparent}
.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-link{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);gap:10px}
.btn-link::after{content:"→";color:var(--gold);font-size:1em;line-height:1;margin:0}
.btn-link:hover{text-decoration:none;color:var(--gold)}
.nav-cta .btn{padding:11px 18px;font-size:.72rem;letter-spacing:.12em}
.mobile-nav .cta-row .btn{border-radius:4px}
.aside .btn{border-radius:4px}
.hero-maison .actions{gap:30px}

/* Kopfzeile, Aktion, Mega */
.header{background:rgba(245,242,239,.86);border-bottom:1px solid var(--line)}
.header.scrolled{background:rgba(245,242,239,.94)}
.topbar{height:72px}
.brand .name{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.brand .tag{display:block;font-family:var(--body);font-size:.58rem;letter-spacing:.28em;color:var(--gold);font-weight:500}
.mono{width:40px;height:40px}
.nav a.top{font-size:.8rem;letter-spacing:.06em;color:var(--ink);opacity:.9;padding:10px 10px}
.nav a.top.lang{color:var(--gold)}
.mega-inner{background:#fff;border-radius:6px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(20,33,46,.12)}
.mega h4{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mega li a .price{color:var(--muted)}
.mega-note{color:var(--muted)}

/* Hero, Aussage, Bildlegende */
.hero-maison{padding:88px 0 40px}
.hero-maison h1{max-width:16ch}
.hero-maison .visual img{border-radius:6px;aspect-ratio:16/7.2}
.hero-maison .caption{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-maison .marks span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hero-maison .marks span::before{background:var(--gold)}
.statement p{font-family:var(--display);font-weight:500;letter-spacing:-.005em;font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.28;max-width:26em;color:var(--ink)}
.statement p .w{opacity:.28}

/* Flächen und Karten: leichte Rundung, warme Töne */
.card,.quote,.aside,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact,.illu-card,.journal-list article,.standards > div,.note{border-radius:8px;background:#fff;border:1px solid var(--line)}
.section-surface .card,.pattern .card,.pattern-soft .card{background:#fff}
.section-white .card,.section-white .journal-list article{background:var(--bg2);border-color:transparent}
a.card:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(20,33,46,.10);border-color:var(--gold-soft)}
.card .price{font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:500}
.card .price::after{color:var(--gold)}
.fact b{font-family:var(--display);font-weight:600;font-size:2.1rem;letter-spacing:0}
.fact span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.aside{background:#fff}
.aside .price{font-family:var(--display);font-weight:600;font-size:2.1rem}
.thumb,.svc .img,.svc .img.has-img,.ph.has-img,.page-visual img,.door::before,.door.has-img::before{border-radius:6px}
.door,.door.has-img{border-radius:8px;background-color:#fff;border:1px solid var(--line)}
.section-surface .door,.pattern .door{background-color:#fff}
.door:hover{box-shadow:0 20px 50px rgba(20,33,46,.10);border-color:var(--gold-soft)}
.door .go{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.door .go::after{content:" →";color:var(--gold)}
.door p{color:#4A535D}
.doors{gap:24px}
.svc,.section-dark .svc{border-radius:8px}
.section-dark{background:var(--navy)}
.section-dark .lead,.section-dark p{color:rgba(255,255,255,.72)}
.section-dark .eyebrow{color:var(--gold-soft)}
.section-dark .svc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.section-dark .svc .meta{color:var(--gold-soft)}
.section-dark .svc .body p{color:rgba(255,255,255,.7)}
.section-dark .svc:hover{border-color:var(--gold)}
.svc .meta,.section-white .svc .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.band::before{background:linear-gradient(180deg,rgba(11,31,58,.22),rgba(11,31,58,.62))}
.band p{font-family:var(--display);font-weight:500;letter-spacing:0;font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.12}
.band .eyebrow{color:var(--gold-soft)}
.standards > div{background:#fff}
.standards svg{stroke:var(--gold)}
.standards p{color:#4A535D}
.verlauf .bar i{background:var(--ink)}
.verlauf .dots b.on{background:var(--gold)}
.verlauf .head strong,.cert h3{font-family:var(--display);font-weight:600}
.cert{border-color:var(--gold-soft)}
.cert li::before{color:var(--gold)}
.chip{border-radius:4px;border-color:rgba(20,33,46,.18);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:11px 16px}
.chip:hover,.chip[aria-pressed="true"],#lx-filter .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.finder{border-radius:8px}
.finder h2{font-size:1.9rem}
.toggle,.toggle button{border-radius:4px}
.toggle button{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.steps::before{background:var(--gold-soft)}
.step::before{background:var(--gold);width:10px;height:10px}
.step .time{color:var(--gold);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.step p{color:#4A535D}
.pillar h3::before{content:"";display:block;width:26px;height:1px;background:var(--gold);margin-bottom:18px}
.pillar p{color:#4A535D}
table th{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
th{border-bottom-color:rgba(20,33,46,.18)}
.faq summary::after{color:var(--gold)}
.form input,.form select,.form textarea{border-radius:4px;border-color:rgba(20,33,46,.18)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink);box-shadow:none}
.form label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quiz .opts button{border-radius:4px}
.page-head{padding:88px 0 20px}
.page-head .breadcrumb{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.page-visual img{border-radius:6px}
.cta-band{background:var(--navy);color:#fff;padding:100px 0}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.75)}
.cta-band .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.cta-band .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.footer{background:var(--bg);border-top:1px solid var(--line);color:var(--muted)}
.footer .brand .name{font-size:1.3rem}
.footer h4{color:var(--gold);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.footer a{color:var(--ink)}
.footer .bottom{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.assist-btn{background:var(--ink);border-radius:4px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:13px 18px}
.assist{border-radius:8px;border:1px solid var(--line)}
.assist header strong{font-family:var(--display);font-weight:600}
.assist input,.assist .hit{border-radius:4px}
.logos img{opacity:.55}
.glossar .letter{color:var(--gold);font-family:var(--display);font-weight:500;font-size:2rem}
.lexikon dt .cat{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.videoband .vb-text p{font-family:var(--display);font-weight:500}
.videoband .eyebrow{color:var(--gold-soft)}
@media (max-width:1240px){.nav,.nav-cta{display:none}.burger{display:block}}
.door .go::after{content:none}
.door .go{color:var(--ink)}
.door .go:hover{color:var(--gold)}

/* ===================== Kennzahlen: Sticky-Zähler ===================== */
.scrollstats{position:relative;background:var(--navy);color:#fff}
.ss-panel{position:sticky;top:0;height:100vh;display:grid;align-content:center;padding:0 max(24px,calc((100% - 1160px)/2 + 24px));border-top:1px solid rgba(255,255,255,.08);background:var(--navy);overflow:hidden}
.ss-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 20% 30%,rgba(176,141,87,.16),transparent 65%);opacity:0;transition:opacity 1.2s ease}
.ss-panel.on::before{opacity:1}
.ss-num{font-family:var(--display);font-weight:500;font-size:clamp(6rem,19vw,18rem);line-height:.86;letter-spacing:-.03em;color:#fff;position:relative;font-variant-numeric:tabular-nums}
.ss-num .suf{font-size:.26em;letter-spacing:.02em;margin-left:.08em;color:var(--gold-soft)}
.ss-label{position:relative;font-family:var(--body);font-size:clamp(1.1rem,2vw,1.9rem);font-weight:500;letter-spacing:-.01em;margin-top:.35em;color:#fff}
.ss-note{position:relative;font-family:var(--body);font-size:1rem;color:rgba(255,255,255,.62);max-width:34em;margin-top:.7em}
.ss-rule{position:relative;width:0;height:1px;background:var(--gold);margin:26px 0 0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.ss-panel.on .ss-rule{width:min(420px,60%)}
.ss-index{position:absolute;top:32px;right:max(24px,calc((100% - 1160px)/2 + 24px));font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:760px){.ss-panel{height:88vh}.ss-num{font-size:clamp(4.5rem,26vw,9rem)}}
@media (prefers-reduced-motion:reduce){.ss-panel{height:auto;position:relative;padding-top:72px;padding-bottom:72px}.ss-panel::before{opacity:1}.ss-panel .ss-rule{width:min(420px,60%)}}

/* Grosstypografie und Bildkraft */
.hero-maison h1{font-size:clamp(3.2rem,7.4vw,6.8rem);line-height:1.02;max-width:15ch}
.hero-maison .visual img{aspect-ratio:16/8;border-radius:8px}
.statement{padding:120px 0 40px}
.statement p{font-size:clamp(1.9rem,3.5vw,3.1rem);max-width:22em;line-height:1.22}
.band{min-height:min(76vh,740px)}
.band p{font-size:clamp(2.3rem,5.2vw,4.4rem)}
.band .inner{max-width:24em}
.band .inner::after{content:"";display:block;width:64px;height:1px;background:var(--gold-soft);margin:28px auto 0}
.sec-num{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.24em;color:var(--gold);margin-bottom:10px}
.door::before,.door.has-img::before{aspect-ratio:3/4}
.svc .img{aspect-ratio:4/5}
.ss-panel{padding-top:0;padding-bottom:0}
.ss-index{top:auto;bottom:40px;right:max(24px,calc((100% - 1160px)/2 + 24px))}
.ss-num{font-size:clamp(5rem,15vw,13rem)}
.ss-note{display:block}
.scrollstats + .band,.scrollstats + section{border-top:0}


/* ===================== Editorial-Hero, Kursiv-Signatur ===================== */
.hero-full{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#0B1F3A;color:#fff;display:flex;align-items:center}
.hero-full .hf-media{position:absolute;inset:0}
.hero-full .hf-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:hfZoom 2.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes hfZoom{to{transform:scale(1)}}
.hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,58,.62) 0%,rgba(11,31,58,.34) 38%,rgba(11,31,58,.78) 100%)}
.hero-full > *:not(.hf-media){position:relative;z-index:2}
.hf-inner{width:100%;padding:0 max(24px,calc((100% - 1160px)/2 + 24px))}
.hero-full h1{font-family:var(--display);font-weight:500;font-size:clamp(3rem,7.4vw,7rem);line-height:1.03;letter-spacing:-.012em;color:#fff;max-width:16ch;margin:0}
.hero-full h1 em{font-style:italic;font-weight:400;color:var(--gold-soft)}
.hf-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:34px}
.hero-full .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.hero-full .btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.btn-link.light{color:#fff}
.btn-link.light::after{color:var(--gold-soft)}
.btn-link.light:hover{color:var(--gold-soft)}
.hf-side{position:absolute;left:max(24px,calc((100% - 1160px)/2 + 24px));top:112px;font-family:var(--body);font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.78);letter-spacing:.01em}
.hf-foot{position:absolute;left:0;right:0;bottom:36px;padding:0 max(24px,calc((100% - 1160px)/2 + 24px));display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hf-foot p{max-width:46ch;color:rgba(255,255,255,.8);font-size:.95rem;margin:0}
.hf-scroll{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.hf-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--gold-soft),transparent);display:inline-block;animation:hfLine 1.8s ease-in-out infinite}
@keyframes hfLine{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}
.hero-full .hf-side,.hero-full h1,.hf-actions,.hf-foot{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero-full h1{animation-delay:.15s}.hf-actions{animation-delay:.35s}.hf-foot{animation-delay:.5s}.hf-side{animation-delay:.6s}
@media (max-width:900px){.hero-full{height:auto;min-height:0;padding:120px 0 40px}.hf-side{display:none}.hf-foot{position:static;padding:32px max(24px,calc((100% - 1160px)/2 + 24px)) 0;flex-direction:column;align-items:flex-start}}
.header{position:sticky}
body:has(.hero-full) .header{background:rgba(245,242,239,.9)}

/* Kursive Signatur in Überschriften */
h2 em,h3 em,.band p em,.ss-label em{font-style:italic;font-weight:400;color:var(--gold)}
.section-dark h2 em,.band p em{color:var(--gold-soft)}
.statement p em{font-style:italic;color:var(--gold)}

/* Journal- und Konzeptkarten mit Etiketten wie im Vorbild */
.card .tagline{display:flex;gap:10px;align-items:center;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--muted);margin-bottom:10px}
.card .tagline i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
/* Hero-Feinschliff */
.hero-full{align-items:flex-end;padding-bottom:0}
.hf-inner{padding-bottom:210px}
.hero-full h1{max-width:18ch;font-size:clamp(2.8rem,6.2vw,5.8rem)}
.hf-side{top:auto;bottom:210px;left:auto;right:max(24px,calc((100% - 1160px)/2 + 24px));text-align:right;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.9;color:rgba(255,255,255,.72)}
.hf-foot{bottom:40px;align-items:flex-end}
.hf-foot p{max-width:52ch;font-size:.92rem;line-height:1.55}
@media (max-width:900px){.hero-full{align-items:flex-start;padding:104px 0 32px}.hf-inner{padding-bottom:0}.hf-side{display:none}}
/* Hero: Fusszeile fest, Text nicht überlappend */
.hero-full{height:100svh;min-height:680px}
.hf-inner{padding-bottom:250px}
.hf-foot{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;bottom:34px}
.hf-foot p{max-width:60ch}
.hf-side{bottom:250px}
@media (max-width:1100px){.hf-side{display:none}.hf-foot p{max-width:100%}}
/* Hero: klare Zonen, kein Umbruch-Chaos */
.hero-full{display:grid;grid-template-rows:1fr auto;align-items:end;height:100svh;min-height:700px}
.hf-inner{padding-bottom:56px;align-self:end}
.hf-actions{flex-wrap:nowrap}
.hf-foot{position:static;padding:0 max(24px,calc((100% - 1160px)/2 + 24px)) 40px;border-top:0}
.hf-foot p{max-width:64ch;font-size:.9rem}
.hf-side{display:none}
@media (max-width:760px){.hero-full{min-height:0;padding:104px 0 28px;grid-template-rows:auto auto}.hf-inner{padding-bottom:28px}.hf-actions{flex-wrap:wrap;gap:18px}.hf-foot{padding-bottom:8px}}

/* ===================== Riviera-Schicht: Nachtgraphit, Porzellan, Platin, Eisblau ===================== */
:root{--bg:#281432;--bg2:#281432;--surface:#281432;--ink:#EDF1F4;--muted:#98A2AB;--line:rgba(237,241,244,.14);
  --blue:#281432;--link:#BFD3DD;--navy:#1B0D2E;--dark:#1B0D2E;--dark2:#1B0D2E;--gold:#AFC7D2;--gold-soft:#8FA9B6;--rot:#B0332B}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink)}
p,.prose p,.prose li,.door p,.card p,.svc .body p,.step p,.standards p,.pillar p{color:#C9D1D8}
h1,h2,h3,h4,.brand .name{color:var(--ink)}
.lead{color:#AAB4BD}
.muted,.small.muted,.breadcrumb{color:var(--muted)}
.eyebrow,.card .eyebrow,.svc .eyebrow,.door .eyebrow,.aside .eyebrow,.footer h4,.sec-num,.step .time,.lexikon dt .cat{color:var(--gold)}
h1 em,h2 em,h3 em,.statement p em,.band p em{color:var(--gold)}
a{color:var(--link)}

/* Flächen */
.section-white,.pattern,.pattern-soft,.section-surface{background:var(--bg)}
.section + .section-white,.section-white + .section{border-top:1px solid var(--line)}
.card,.quote,.aside,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact,.illu-card,.journal-list article,.standards > div,.note,.datasheet{background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.section-white .card,.section-white .journal-list article,.section-surface .card,.pattern .card,.pattern-soft .card,.section-surface .fact,.pattern .aside{background:var(--bg2);border-color:var(--line)}
a.card:hover,.door:hover,.svc:hover,.section-dark .svc:hover{box-shadow:0 30px 80px rgba(0,0,0,.5);border-color:var(--gold-soft)}
.door,.door.has-img{background-color:var(--bg2);border:1px solid var(--line)}
.door .go{color:var(--ink)}
.door .go:hover{color:var(--gold)}
.section-dark{background:var(--dark)}
.svc,.section-dark .svc{background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.section-white .svc .meta{color:var(--ink);border-top-color:var(--line)}
.svc .img,.svc .img.has-img,.illu-wrap,.thumb{background:#FFFFFF}
.card .price{color:var(--ink);border-top-color:var(--line)}
.card .price::after,.btn-link::after,.btn-link.light::after{color:var(--gold)}
.fact b,.aside .price{color:var(--ink)}
.verlauf .bar{background:rgba(237,241,244,.12)}
.verlauf .bar i{background:var(--gold)}
.verlauf .dots b{background:rgba(237,241,244,.25)}
.verlauf .dots b.on{background:var(--gold)}
.cert{border-color:var(--gold-soft)}
.cert li::before{color:var(--gold)}
.steps::before{background:rgba(237,241,244,.18)}
.step::before{background:var(--gold)}
.pillar h3::before{background:var(--gold)}

/* Typo-Feinheit im Stil des Vorbilds: Labels gesperrt, Titel ruhig */
.eyebrow{letter-spacing:.26em}
.btn,.btn-link,.chip,.toggle button,.assist-btn,.door .go,.svc .meta,.card .price{letter-spacing:.16em}
h2{font-weight:500}
.statement p{color:var(--ink)}
.statement p .w{opacity:.18}

/* Kopfzeile und Aktion */
.header{background:rgba(27,13,46,.72);backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--line)}
.header.scrolled{background:rgba(27,13,46,.9)}
.nav a.top{color:var(--ink);opacity:.85}
.nav a.top:hover{opacity:1}
.nav a.top.lang{color:var(--gold)}
.brand .tag{color:var(--gold)}
.mono .ring{stroke:var(--gold)}
.mono .v{stroke:#fff}
.mono .z{stroke:var(--gold)}
.burger span{background:var(--ink)}
.mobile-nav{background:var(--bg);border-top:1px solid var(--line)}
.mobile-nav summary,.mobile-nav .plain,.mobile-nav a{color:var(--ink)}
.mega-inner{background:#1B0D2E;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.mega li a{color:var(--ink);border-bottom:1px solid rgba(237,241,244,.08)}
.mega li a:hover{color:var(--gold)}
.mega h4{color:var(--gold)}
.mega-note,.mega li a .price{color:var(--muted)}

/* Buttons: Rolls-Royce-Duktus, Kontur, Füllung bei Berührung */
.btn{border-radius:2px;padding:15px 30px;font-size:.78rem}
.btn-primary{background:transparent;color:var(--ink);border:1px solid rgba(237,241,244,.55)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:#281432}
.cta-band .btn-primary,.hero-full .btn-primary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn-primary:hover,.hero-full .btn-primary:hover{background:#fff;border-color:#fff;color:#281432}
.btn-ghost{color:var(--ink);border-color:rgba(237,241,244,.35)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-link{color:var(--ink)}
.btn-link:hover{color:var(--gold)}
.nav-cta .btn{border-color:rgba(237,241,244,.55)}
.chip{background:transparent;border-color:rgba(237,241,244,.3);color:var(--ink);border-radius:2px}
.chip:hover,.chip[aria-pressed="true"],#lx-filter .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#281432}
.toggle{background:var(--bg2);border-color:var(--line);border-radius:2px}
.toggle button{border-radius:2px;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#281432}

/* Hero */
.hero-full{background:#1B0D2E}
.hero-full::after{background:linear-gradient(180deg,rgba(27,13,46,.55) 0%,rgba(27,13,46,.25) 40%,rgba(27,13,46,.86) 100%)}
.hero-full h1 em{color:var(--gold)}
.hf-scroll::after{background:linear-gradient(180deg,var(--gold),transparent)}
.hf-foot p{color:#B9C2CA}

/* Kennzahlen */
.ss-panel{background:#1B0D2E;border-top:1px solid var(--line)}
.ss-panel::before{background:radial-gradient(60% 60% at 20% 30%,rgba(175,199,210,.10),transparent 65%)}
.ss-panel::after{background-image:linear-gradient(90deg,rgba(237,241,244,.04) 1px,transparent 1px)}
.ss-num{color:var(--ink)}
.ss-num .suf,.ss-rule{color:var(--gold)}
.ss-rule{background:var(--gold)}
.ss-label{color:var(--ink)}
.ss-note{color:#9AA3AC}

/* Bänder, Video, Abschluss */
.band::before{background:linear-gradient(180deg,rgba(27,13,46,.35),rgba(27,13,46,.72))}
.band .inner::after{background:var(--gold)}
.videoband .vb-text{background:linear-gradient(0deg,rgba(27,13,46,.8),transparent)}
.cta-band{background:#1B0D2E;border-top:1px solid var(--line)}
.cta-band .lead{color:#AAB4BD}
.cta-band .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.45)!important}

/* Tabellen, Formulare, FAQ, Suche, Footer */
table th{color:var(--muted);border-bottom:1px solid rgba(237,241,244,.25)}
table td{border-bottom:1px solid var(--line);color:var(--ink)}
.prices .serie,.prices .einzel{color:var(--ink)}
.note{color:#C9D1D8}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{color:var(--ink)}
.faq summary::after{color:var(--gold)}
.form input,.form select,.form textarea{background:#1B0D2E;border:1px solid rgba(237,241,244,.25);color:var(--ink);border-radius:2px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form label{color:var(--muted)}
.form ::placeholder{color:#6E7883}
.quiz .opts button{background:transparent;border:1px solid rgba(237,241,244,.3);color:var(--ink);border-radius:2px}
.quiz .opts button:hover,.quiz .opts button.sel{background:var(--ink);color:#281432;border-color:var(--ink)}
.quiz .progress{background:rgba(237,241,244,.15)}
.quiz .progress i{background:var(--gold)}
.glossar .letter{color:var(--gold)}
.glossar dt{color:var(--ink)}
.glossar dd{color:#C9D1D8}
.glossar-nav a{color:var(--muted)}
.glossar-nav a:hover{color:var(--gold)}
.assist-btn{background:var(--ink);color:#281432;border-radius:2px}
.assist-btn .k{background:rgba(27,13,46,.15);color:#281432}
.assist{background:#1B0D2E;border:1px solid var(--line);color:var(--ink)}
.assist input{background:#1B0D2E;border:1px solid rgba(237,241,244,.25);color:var(--ink)}
.assist .hit{background:#1B0D2E}
.assist .hit:hover{border-color:var(--gold)}
.assist .foot{color:var(--muted)}
.footer{background:#1B0D2E;border-top:1px solid var(--line);color:var(--muted)}
.footer a{color:#C9D1D8}
.footer a:hover{color:var(--gold)}
.footer .bottom{color:var(--muted)}
.logos{filter:invert(1) hue-rotate(180deg)}
.logos img{mix-blend-mode:screen;opacity:.7}
.logos img:hover{opacity:1}
.page-visual img,.ph.has-img,.thumb,.door::before,.door.has-img::before{border-radius:2px}
.hero-full .hf-media img{border-radius:0}
.card,.aside,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact,.illu-card,.journal-list article,.standards > div,.note,.svc,.door,.door.has-img,.mega-inner,.assist{border-radius:2px}
.skip{background:var(--ink);color:#281432}
::selection{background:var(--gold);color:#281432}
/* Nacht-Feinschliff */
:root{color-scheme:dark}
body:has(.hero-full) .header{background:rgba(27,13,46,.72)}
select,option{background:#1B0D2E;color:var(--ink)}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.hero-full .btn-link.light{color:#fff}
.videoband{background:#1B0D2E}
.illu-wrap.illu-lead{background:#fff}
img{color-scheme:light}

/* ===================== Technik-Schicht: Vorhang, Parallaxe, Cursor, Zug ===================== */
/* Vorhang beim ersten Laden */
.loader{position:fixed;inset:0;z-index:200;background:#1B0D2E;display:grid;place-items:center;transition:transform 1s cubic-bezier(.76,0,.24,1) .15s;will-change:transform}
.ld-inner{display:grid;justify-items:center;gap:18px}
.loader svg{width:64px;height:64px}
.loader .ring{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1s ease forwards .1s}
.loader .v,.loader .z{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.8;opacity:0;animation:ldIn .5s ease forwards .5s}
.loader .v{stroke:#fff}.loader .z{stroke:var(--gold)}
.loader span{font-family:var(--body);font-size:.64rem;letter-spacing:.5em;color:#C9D1D8;padding-left:.5em;opacity:0;animation:ldIn .6s ease forwards .7s}
@keyframes ldIn{to{opacity:1}}
html:not(.ld) .loader{display:none}
html.ld-done .loader{transform:translateY(-100%)}
html.ld-skip .loader{display:none}
html.ld:not(.ld-skip):not(.ld-done) body{overflow:hidden}

/* Bild-Enthüllung: sanftes Auszoomen beim Eintreten */
.ph.has-img,.page-visual,.thumb,.svc .img{overflow:hidden}
.ph.has-img img,.page-visual img,.thumb img,.svc .img img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.imgin .ph.has-img img,.ph.has-img.imgin img,.page-visual.imgin img,.thumb.imgin img,.svc .img.imgin img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.ph.has-img img,.page-visual img,.thumb img,.svc .img img{transform:none;transition:none}}

/* Hero-Zeilen: Maskenlauf */
.hero-full h1 .line{display:block;overflow:hidden}
.hero-full h1 .line > span{display:block;transform:translateY(112%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.ld-done .hero-full h1 .line > span,html.ld-skip .hero-full h1 .line > span{transform:translateY(0)}
.hero-full h1 .line:nth-child(2) > span{transition-delay:.12s}

/* Kopfzeile: taucht beim Hinunterscrollen ab */
.header{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .35s ease}
.header.hidden{transform:translateY(-100%)}

/* Zug-Schiene */
.rail{cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging a{pointer-events:none}
.rail-hint{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.rail-hint::before{content:"";width:34px;height:1px;background:var(--gold)}

/* Eigener Zeiger (nur feine Zeiger, ohne Bewegung reduziert) */
@media (pointer:fine){
  html.cur, html.cur a, html.cur button{cursor:none}
  .cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .3s}
  .cursor.o{width:38px;height:38px;background:transparent;border:1px solid var(--gold)}
  .cursor.hide{opacity:0}
}
@media (prefers-reduced-motion:reduce){.loader{transition:none}.hero-full h1 .line > span{transform:none;transition:none}}

/* ===================== Kapitel und Vollbild-Menü (Duktus des Vorbilds) ===================== */
/* Kopfzeile: Menü links, Marke mittig, Aktion rechts */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topbar .brand{justify-self:center;grid-column:2}
.topbar .nav{display:none!important}
.topbar .nav-cta-solo{justify-self:end}
.menu-btn{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:var(--ink);font-family:var(--body);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:10px 0}
.menu-btn i{display:inline-grid;gap:5px;width:26px}
.menu-btn i span{display:block;height:1px;background:var(--ink);transition:transform .4s,opacity .4s,width .4s}
.menu-btn i span:last-child{width:70%}
.menu-btn:hover i span:last-child{width:100%}
html.mm-open .menu-btn i span:first-child{transform:translateY(3px) rotate(45deg)}
html.mm-open .menu-btn i span:last-child{width:100%;transform:translateY(-3px) rotate(-45deg)}
.topbar .burger{display:none!important}
.topbar::after{content:"";grid-column:3;justify-self:end}
.topbar .nav ~ .burger{display:none}
.topbar > .btn,.topbar .cta-solo{grid-column:3;justify-self:end}
@media (max-width:760px){.menu-btn{font-size:.66rem;letter-spacing:.2em}.topbar .brand .name{font-size:1.15rem}}

/* Vollbild-Menü */
.megamenu{position:fixed;inset:0;z-index:150;background:#1B0D2E;color:var(--ink);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
html.mm-open .megamenu{opacity:1;visibility:visible;transition:opacity .5s ease}
html.mm-open{overflow:hidden}
.mm-inner{height:100%;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;padding:120px max(24px,calc((100% - 1160px)/2 + 24px)) 64px}
.mm-nav ul{list-style:none;margin:0;padding:0}
.mm-nav li{overflow:hidden}
.mm-nav a{display:inline-block;font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.28;color:var(--ink);text-decoration:none;transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 45ms),color .3s}
html.mm-open .mm-nav a{transform:translateY(0)}
.mm-nav a:hover{color:var(--gold);font-style:italic}
.mm-side{display:grid;gap:28px;justify-items:start;align-content:center;opacity:0;transform:translateY(14px);transition:opacity .6s ease .35s,transform .6s ease .35s}
html.mm-open .mm-side{opacity:1;transform:none}
.mm-aux{display:grid;gap:10px}
.mm-aux a{color:#AAB4BD;font-size:.86rem;letter-spacing:.06em;text-decoration:none}
.mm-aux a:hover{color:var(--gold)}
.mm-contact{display:grid;gap:6px;font-size:.9rem;color:#C9D1D8}
.mm-contact a{color:var(--ink);text-decoration:none}
.mm-contact a:hover{color:var(--gold)}
@media (max-width:900px){.mm-inner{grid-template-columns:1fr;align-content:start;gap:40px;overflow:auto;padding-top:110px}.mm-nav a{font-size:1.7rem;line-height:1.5}}

/* Kapitel */
.chapter{position:relative;height:100vh;min-height:620px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#1B0D2E}
.ch-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
video.ch-media{width:100%;height:100%;object-fit:cover}
.chapter.in .ch-media{transform:scale(1)}
.chapter::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,13,46,.25) 0%,rgba(27,13,46,.1) 40%,rgba(27,13,46,.82) 100%)}
.ch-inner{position:relative;z-index:2;padding:0 max(24px,calc((100% - 1160px)/2 + 24px)) 72px;max-width:820px;opacity:0;transform:translateY(26px);transition:opacity .9s ease .15s,transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.chapter.in .ch-inner{opacity:1;transform:none}
.chapter h2{color:#fff;font-size:clamp(2.2rem,4.6vw,4rem);margin:.2em 0 .3em}
.chapter p{color:rgba(255,255,255,.82);max-width:52ch}
.chapter .eyebrow{color:var(--gold)}
.discover{display:inline-flex;align-items:center;gap:14px;margin-top:22px;color:#fff;text-decoration:none;font-family:var(--body);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase}
.discover::after{content:"";width:44px;height:1px;background:var(--gold);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.discover:hover{color:var(--gold)}
.discover:hover::after{width:74px}
@media (max-width:760px){.chapter{min-height:540px}.ch-inner{padding-bottom:52px}}
@media (prefers-reduced-motion:reduce){.ch-media,.chapter.in .ch-media{transform:none;transition:none}.ch-inner{opacity:1;transform:none}}
.header{z-index:210}
.megamenu{z-index:190}
.cta-solo{grid-column:3;justify-self:end;padding:11px 18px;font-size:.7rem}
@media (max-width:900px){.cta-solo{display:none}}
html.mm-open .header{background:transparent;border-bottom-color:transparent}

/* ===================== Vorbild-Schicht: Farben, Schrift, Architektur des Originals ===================== */
:root{--bg:#281432;--bg2:#1B0D2E;--surface:#1B0D2E;--dark:#1B0D2E;--dark2:#1B0D2E;--navy:#1B0D2E;--blue:#281432;
  --ink:#FFFFFF;--muted:#A79EB8;--line:rgba(255,255,255,.16);--gold:#8FA3BF;--gold-soft:#73859F;--link:#FFFFFF;
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;--body:'Source Sans 3','Helvetica Neue',Arial,sans-serif}
body{font-weight:300;letter-spacing:.02em;font-size:1.02rem;line-height:1.7}
p,.prose p,.prose li,.door p,.card p,.svc .body p,.step p,.standards p,.pillar p,.lead{font-weight:300}
strong,b{font-weight:500}

/* Titel: Versalien, leicht, gesperrt, wie beim Original (70px, ls 2.5px, Gewicht 300) */
h1,h2{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.055em;line-height:1.12}
h1{font-size:clamp(2.4rem,5vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,3rem)}
h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.98rem,1.4vw,1.25rem)}
h1 em,h2 em,h3 em,.statement p em,.band p em,.chapter h2 em{font-style:normal;font-weight:inherit;color:inherit}
.hero-full h1{font-weight:200;letter-spacing:.06em;font-size:clamp(2.4rem,5.2vw,4.6rem);max-width:none}
.hero-full h1 em{color:#fff}
.statement p{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.5;max-width:34em}
.statement p em{color:var(--gold)}
.band p{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.7rem,3.6vw,3rem)}
.chapter h2{font-size:clamp(1.9rem,3.8vw,3.4rem)}
.ss-num{font-family:var(--display);font-weight:200;letter-spacing:0}
.ss-label{text-transform:uppercase;letter-spacing:.14em;font-weight:400;font-size:clamp(.95rem,1.5vw,1.3rem)}
.brand .name{font-family:var(--display);font-weight:400;letter-spacing:.32em;font-size:1.02rem;text-transform:uppercase}
.brand .tag{letter-spacing:.34em;color:var(--muted)}
.fact b,.aside .price,.verlauf .head strong,.cert h3,.assist header strong,.glossar .letter{font-family:var(--display);font-weight:300}
.aside .price{letter-spacing:.04em}
.card h3,.door h3,.svc h3,.pillar h3,.standards h3,.illu-card h3{font-weight:400;letter-spacing:.1em;font-size:1rem}
.mm-nav a{font-family:var(--display);font-weight:200;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.5rem,3.6vw,2.6rem)}
.mm-nav a:hover{font-style:normal;color:var(--gold)}
.footer h4{letter-spacing:.26em}
.hf-side{display:none}

/* Kicker-Linie über Überschriften, wie die feinen Regeln des Originals */
.eyebrow{color:var(--gold);letter-spacing:.32em;font-weight:400;font-size:.66rem}
.center .eyebrow::before{content:"";display:block;width:36px;height:1px;background:var(--gold-soft);margin:0 auto 14px}
.ch-inner .eyebrow::before{content:"";display:block;width:36px;height:1px;background:var(--gold-soft);margin:0 0 14px}

/* Aktionen: Textzeilen in Versalien mit Unterlinie (statt Rahmen), wie «Discover» */
.btn,.btn-primary,.btn-ghost{background:transparent!important;border:0!important;border-radius:0;padding:6px 0 10px;color:#fff!important;font-weight:400;font-size:.74rem;letter-spacing:.24em;position:relative;box-shadow:none!important}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(255,255,255,.55);transition:background .3s}
.btn:hover{transform:none!important;color:var(--gold)!important}
.btn:hover::after{background:var(--gold)}
.cta-solo{padding:6px 0 10px}
.nav-cta .btn{padding:6px 0 10px}
.mobile-nav .cta-row .btn{border-radius:0}
.discover{letter-spacing:.28em;font-size:.72rem}
.discover::after{background:rgba(255,255,255,.55)}
.discover:hover::after{background:var(--gold)}
.btn-link{font-weight:400;color:#fff}
.assist-btn{background:transparent;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.55);border-radius:0;letter-spacing:.24em}
.assist-btn:hover{color:var(--gold);border-color:var(--gold);transform:none}
.assist-btn .k{display:none}

/* Formulare behalten feine Rahmen */
.form input,.form select,.form textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;padding-left:0}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#fff}
.chip{border-radius:0;border:0;border-bottom:1px solid transparent;padding:8px 2px;color:var(--muted)}
.chip:hover,.chip[aria-pressed="true"],#lx-filter .chip[aria-pressed="true"]{background:transparent;color:#fff;border-bottom-color:var(--gold)}
.toggle{border:0;background:transparent;gap:18px}
.toggle button{border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:8px 2px}
.toggle button[aria-pressed="true"]{background:transparent;color:#fff;border-bottom-color:var(--gold)}

/* Flächen im tiefen Nachtviolett des Originals */
.card,.quote,.aside,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact,.illu-card,.journal-list article,.standards > div,.note,.datasheet,.svc,.section-dark .svc,.mega-inner,.assist{background:var(--bg2);border:1px solid var(--line);border-radius:0}
.door,.door.has-img{background-color:var(--bg2);border:1px solid var(--line);border-radius:0}
.thumb,.svc .img,.ph.has-img,.page-visual img,.door::before,.door.has-img::before,.illu-wrap{border-radius:0}
.header{background:rgba(27,13,46,.6);backdrop-filter:saturate(160%) blur(18px)}
.header.scrolled{background:rgba(27,13,46,.88)}
.megamenu{background:#1B0D2E}
.loader{background:#1B0D2E}
.loader span{letter-spacing:.5em}
.loader .v{stroke:#fff}.loader .z{stroke:var(--gold)}
.mono .v{stroke:#fff}.mono .z{stroke:var(--gold)}.mono .ring{stroke:var(--gold)}
.ss-panel{background:#1B0D2E}
.cta-band{background:#1B0D2E}
.footer{background:#1B0D2E}
.hero-full{background:#1B0D2E}
.hero-full::after{background:linear-gradient(180deg,rgba(27,13,46,.55) 0%,rgba(27,13,46,.22) 40%,rgba(27,13,46,.86) 100%)}
.chapter{background:#1B0D2E}
.chapter::after{background:linear-gradient(180deg,rgba(27,13,46,.22) 0%,rgba(27,13,46,.08) 40%,rgba(27,13,46,.82) 100%)}
.band::before{background:linear-gradient(180deg,rgba(27,13,46,.35),rgba(27,13,46,.72))}
.videoband{background:#1B0D2E}
::selection{background:var(--gold);color:#1B0D2E}
.hf-scroll::after{background:linear-gradient(180deg,var(--gold),transparent)}
.cursor{background:var(--gold)}
.cursor.o{border-color:var(--gold);background:transparent}
/* Kursive endgültig neutralisiert (Original kennt keine) */
.hero-full h1 em,.chapter h2 em,.statement p em,.band p em,h1 em,h2 em,h3 em{font-style:normal!important}

/* ===================== Mobil-Perfektion ===================== */
/* Seitenränder der zweispaltigen Layouts wiederhergestellt (Formulare, Behandlungsseiten) */
.layout{padding-left:24px;padding-right:24px}

/* Kapitel: kräftigerer Schleier, damit weisse Schrift auf hellen Bildern immer lesbar ist */
.chapter::after{background:linear-gradient(180deg,rgba(27,13,46,.55) 0%,rgba(27,13,46,.38) 45%,rgba(27,13,46,.94) 100%)}
.ch-inner{text-shadow:0 2px 34px rgba(27,13,46,.65)}
.hero-full::after{background:linear-gradient(180deg,rgba(27,13,46,.6) 0%,rgba(27,13,46,.32) 40%,rgba(27,13,46,.9) 100%)}

/* Dunkle Restfarben auf dunklem Grund korrigiert */
.verlauf .head strong,.cert h3,.quote p,.glossar dt,.faq summary,.step strong,.assist header strong{color:var(--ink)}
.mega li a{color:var(--ink)}
table td{color:var(--ink)}

/* Kopfzeile mobil: kompakte Marke, nichts läuft über */
@media (max-width:760px){
  .brand .name{font-size:.7rem;letter-spacing:.22em}
  .brand .tag{display:none}
  .mono{width:30px;height:30px}
  .menu-btn{font-size:.6rem;letter-spacing:.18em;gap:8px}
  .menu-btn i{width:20px}
  .topbar{height:60px;gap:8px}
  .assist-btn{padding:9px 12px;font-size:.6rem;letter-spacing:.18em}
  .hf-foot{padding-bottom:64px}
  h1{letter-spacing:.04em}
  .statement p{letter-spacing:.06em}
}

/* Eingaben: dunkles Autofill, keine weissen Systemkästen */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #1B0D2E inset;-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 99999s}

/* ===================== Concierge, Direktzugriffe, Kapitel-Doppellink ===================== */
.assist-cta{display:block;margin:10px 0 4px;padding:10px 0;color:#fff;text-decoration:none;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.35)}
.assist-cta:hover{color:var(--gold);border-color:var(--gold)}
.mm-direct{display:grid;gap:9px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mm-direct span{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.mm-direct a{color:#D8D2E4;font-size:.92rem;letter-spacing:.04em;text-decoration:none}
.mm-direct a:hover{color:var(--gold)}
.ch-links{display:flex;gap:34px;align-items:center;flex-wrap:wrap;margin-top:22px}
.ch-links .discover{margin-top:0}
.discover.book{color:var(--gold)}
.discover.book::after{background:var(--gold)}
.logos a{display:inline-flex}
.logos img[alt^="Even Realities"]{height:34px}
.er-tile{display:block;margin:14px 0 4px;border:1px solid var(--line);max-width:420px}
.er-tile img{display:block;width:100%;height:auto}
.er-tile:hover{border-color:var(--gold)}
.trudon-band{margin:26px 0 8px}
.trudon-band img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.trudon-band figcaption{margin-top:10px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* Apple-Aussage: sichtbarer Grundton, Goldwörter, längerer Lauf */
.statement{padding:150px 0 90px}
.statement p .w{opacity:.3;transition:opacity .5s ease}
.statement p .w.on{opacity:1}
.statement p .w.em{color:var(--gold)}

/* ===================== Icon-Sprache: feine Linien in Schieferblau ===================== */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:10px;color:var(--gold);flex:none}
h2 .ic{width:24px;height:24px;vertical-align:-4px;margin-right:14px}
h3 .ic{width:17px;height:17px;margin-right:9px}
.mm-contact .ic{width:15px;height:15px;margin-right:8px;vertical-align:-2px}
.reveal.in .ic use, .in .ic use{transform-origin:center}
.reveal .ic{opacity:0;transform:scale(.6);transition:opacity .5s ease .2s,transform .5s cubic-bezier(.2,.9,.3,1.4) .2s}
.reveal.in .ic{opacity:1;transform:scale(1)}
h2 .ic{transition-delay:.05s}
@media (prefers-reduced-motion:reduce){.reveal .ic{opacity:1;transform:none;transition:none}}

/* ===================== Deutlichkeit: Kontrast, Gewicht, Maximen ===================== */
body{font-weight:400;font-size:1.04rem}
p,.prose p,.prose li,.door p,.card p,.svc .body p,.step p,.standards p,.pillar p,.lead{color:#DCE1E8;font-weight:400}
.lead{color:#C5CCD6;font-size:1.08rem}
.muted,.small.muted,.breadcrumb,.ss-note,.hf-foot p{color:#B4ACC6}
:root{--muted:#B4ACC6;--line:rgba(237,241,244,.22)}
.eyebrow,.sec-num{color:#A9BDD6}
h1,h2{letter-spacing:.05em}
strong,b{color:#fff}
table td{color:#E9ECF2}
.btn,.assist-btn{font-size:.78rem}
.btn-primary{border:1px solid rgba(255,255,255,.7)!important;padding:14px 26px;border-radius:2px}
.btn-primary::after{content:none}
.btn-primary:hover{background:#fff!important;color:#1B0D2E!important;border-color:#fff!important}
.discover{font-size:.76rem;color:#fff}
.discover::after{background:rgba(255,255,255,.7)}
.chapter p{color:rgba(255,255,255,.92);font-size:1.06rem}
.ch-inner .eyebrow{color:#BCD0E4}
.mm-aux a,.mm-direct a{color:#E4E0EE}
.footer a{color:#DCE1E8}

/* Maxime: die Patek-Zeile */
.maxim{padding:110px 0 40px;text-align:center}
.maxim p.tr{overflow:hidden}
.maxim p.tr > .tr-in{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.maxim p.tr.on > .tr-in{transform:translateY(0)}
.maxim p{font-family:var(--display);font-weight:200;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0}
.maxim p em{font-style:normal;color:var(--gold)}
.maxim .wrap::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:34px auto 0}
@media (max-width:760px){.maxim{padding:80px 0 24px}}
.footer .bottom{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.er-foot{color:var(--muted);font-size:.8rem}
.er-foot a{color:#DCE1E8}
.er-foot a:hover{color:var(--gold)}

/* ===================== Veredelungsschicht v26: die Profi-Politur ===================== */
/* 1. Rhythmus: ein Takt für alle Abschnitte */
.section{padding:120px 0}
.section-tight{padding:96px 0}
.maxim{padding:120px 0 36px}
.wrap{padding:0 32px}
.layout{padding-left:32px;padding-right:32px}
.page-head{padding:150px 0 44px}
.page-head .breadcrumb{margin-bottom:18px}
h2{margin:0 0 .55em}
.center.intro{margin-bottom:56px}
@media (max-width:760px){.section{padding:76px 0}.section-tight{padding:60px 0}.page-head{padding:120px 0 32px}.wrap{padding:0 22px}.layout{padding-left:22px;padding-right:22px}}

/* 2. Typografie: gross, ruhig, weniger gesperrt */
h1{font-weight:200;letter-spacing:.02em;font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.06}
h2{font-weight:300;letter-spacing:.025em;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.14}
.hero-full h1{font-size:clamp(2.6rem,5.6vw,5rem);letter-spacing:.03em}
.maxim p.tr{overflow:hidden}
.maxim p.tr > .tr-in{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.maxim p.tr.on > .tr-in{transform:translateY(0)}
.maxim p{font-weight:200;letter-spacing:.03em;font-size:clamp(1.6rem,3.4vw,2.7rem)}
.statement p{font-weight:300;letter-spacing:.06em}
.lead{line-height:1.75}
.prose p{line-height:1.85}

/* 3. Bildveredelung: ein Farbklima für alle Fotos */
.page-visual img,.thumb img,.svc .img img,.ph.has-img img,.door::before,.door.has-img::before,.trudon-band img{filter:saturate(.8) contrast(1.06) brightness(.95)}
.ch-media,video.ch-media{filter:saturate(.78) contrast(1.05) brightness(.92)}
.hero-full .hf-media img{filter:saturate(.75) contrast(1.06) brightness(.9)}
.page-visual{position:relative}
.page-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(40,20,50,.18),rgba(40,20,50,0) 30%,rgba(40,20,50,0) 70%,rgba(40,20,50,.28));mix-blend-mode:multiply}
.page-visual{overflow:hidden}

/* 4. Flächen: flach, präzise, keine Streuschatten */
.card,.aside,.svc,.door,.quote,.finder,.verlauf,.cert,.stack .panel,.quiz,.fact,.illu-card,.journal-list article,.standards > div,.note{box-shadow:none!important}
a.card:hover,.door:hover,.svc:hover{box-shadow:none;border-color:var(--gold);transform:translateY(-3px)}
.card,.svc,.door{transition:border-color .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.fact{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 4px 0}
.fact b{font-size:2.1rem;font-weight:200;color:#fff}
.fact span{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-size:.64rem}
.facts{gap:28px}

/* 5. Trennlinien und Kicker als System */
.center .eyebrow::before{width:44px;background:var(--gold)}
.section + .section,.section-tight + .section,.section + .section-tight{border-top:1px solid rgba(237,241,244,.08)}
.maxim + .section,.maxim + .section-tight,.page-head + .maxim{border-top:0}

/* 6. Tabellen und Formulare fein */
table th{font-size:.66rem;letter-spacing:.22em}
table td{padding:18px 14px}
tbody tr{transition:background .25s}
tbody tr:hover{background:rgba(255,255,255,.03)}
.form input,.form select,.form textarea{padding:12px 0;font-size:1rem}
.form label{margin-bottom:2px}

/* 7. Filmkorn: kaum sichtbar, macht Flächen lebendig */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.header,.megamenu,.assist,.loader,.cursor{z-index:210}
.megamenu{z-index:190}

/* 8. Lesefortschritt als Goldfaden */
.progressbar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),#B9C6D9);z-index:260;transition:width .15s linear}

/* 9. Rollbalken und Auswahl */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#1B0D2E}
::-webkit-scrollbar-thumb{background:#3A2150;border-radius:6px;border:2px solid #1B0D2E}
::-webkit-scrollbar-thumb:hover{background:var(--gold-soft)}

/* Sprite sicher unsichtbar */
svg[hidden]{display:none!important}

/* ===================== Bildverschmelzung: Ton und Übergang statt harter Kasten ===================== */
/* Grosse Seitenbilder: schmelzen oben und unten in den Grund, violetter Ton */
.page-visual{position:relative;overflow:hidden}
.page-visual img{display:block;filter:saturate(.72) contrast(1.05) brightness(.88)}
.page-visual::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(40,20,50,0) 16%,rgba(40,20,50,0) 84%,var(--bg) 100%),
             linear-gradient(90deg,rgba(40,20,50,.55) 0%,rgba(40,20,50,0) 12%,rgba(40,20,50,0) 88%,rgba(40,20,50,.55) 100%)}
.page-visual::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:#32194A;mix-blend-mode:soft-light;opacity:.55}

/* Held und Kapitel: weiche Kanten zum nächsten Abschnitt */
.hero-full::before{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(40,20,50,0),var(--bg))}
.chapter{isolation:isolate}
.chapter .ch-fade-top{position:absolute;left:0;right:0;top:0;height:140px;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--bg),rgba(40,20,50,0))}
.chapter .ch-fade-bot{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--bg),rgba(40,20,50,0))}
.chapter::after{z-index:1}
.ch-inner{z-index:3}

/* Produktbilder auf Weiss: verschmelzen mit der violetten Karte */
.svc .img,.thumb,.illu-wrap,.illu-wrap.illu-lead{background:var(--bg2)}
.svc .img img,.thumb img,.illu-wrap img{mix-blend-mode:multiply;filter:saturate(.85) contrast(1.08)}
.door::before,.door.has-img::before{background-color:#1B0D2E;background-blend-mode:multiply}

/* Trudon-Band und Brillen-Kachel: gleicher Schmelzrand */
.trudon-band{position:relative;overflow:hidden}
.trudon-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(40,20,50,0) 22%,rgba(40,20,50,0) 78%,var(--bg) 100%);opacity:.9}
.trudon-band img{filter:saturate(.8) contrast(1.05) brightness(.92)}
.er-tile{border:0}
/* Korrektur der Verschmelzung: Waschung weg, Produktteller statt Multiplikation */
.page-visual::after{content:none}
.page-visual::before{background:linear-gradient(180deg,var(--bg) 0%,rgba(40,20,50,0) 14%,rgba(40,20,50,0) 86%,var(--bg) 100%),linear-gradient(90deg,rgba(40,20,50,.35) 0%,rgba(40,20,50,0) 9%,rgba(40,20,50,0) 91%,rgba(40,20,50,.35) 100%)}
.svc .img img,.thumb img,.illu-wrap img{mix-blend-mode:normal;filter:saturate(.9) contrast(1.03)}
.svc .img,.thumb,.illu-wrap,.illu-wrap.illu-lead{background:#F2EFF6}
.door::before,.door.has-img::before{background-color:transparent;background-blend-mode:normal}

/* ===================== Preisverdächtig: Galerie, Wortmarke, Zeilenmasken, Clip ===================== */
/* Horizontale Anliegen-Galerie */
.hscroll{position:relative;background:var(--dark)}
.hs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hs-head{padding:0 max(24px,calc((100% - 1160px)/2 + 24px));margin-bottom:34px}
.hs-track{display:flex;gap:26px;padding:0 max(24px,calc((100% - 1160px)/2 + 24px));will-change:transform}
.hs-item{flex:0 0 auto;width:min(420px,78vw);border:1px solid var(--line);padding:34px 30px 28px;display:flex;flex-direction:column;min-height:340px;text-decoration:none;color:#fff;background:var(--dark);transition:border-color .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.hs-item:hover{border-color:var(--gold);transform:translateY(-4px)}
.hs-num{font-family:var(--display);font-weight:200;font-size:3rem;color:var(--gold);letter-spacing:.02em}
.hs-item h3{margin:.5em 0 .4em;font-size:1.5rem;letter-spacing:.06em}
.hs-item p{color:#CFC7DD;margin:0 0 auto}
.hs-go{margin-top:26px;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:12px}
.hs-go::after{content:"";width:38px;height:1px;background:var(--gold);transition:width .4s}
.hs-item:hover .hs-go::after{width:64px}
.hs-all{justify-content:center;text-align:center;border-style:dashed}
.hs-all h3{font-size:1.9rem}
.hs-bar{height:1px;background:rgba(255,255,255,.14);margin:40px max(24px,calc((100% - 1160px)/2 + 24px)) 0}
.hs-bar i{display:block;height:1px;width:0;background:var(--gold)}
@media (max-width:900px){
  .hscroll{height:auto!important}
  .hs-sticky{position:static;height:auto;padding:70px 0}
  .hs-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;transform:none!important}
  .hs-item{scroll-snap-align:start;min-height:300px}
  .hs-bar{display:none}
}
@media (prefers-reduced-motion:reduce){.hs-sticky{position:static;height:auto;padding:70px 0}.hs-track{overflow-x:auto;transform:none!important}.hscroll{height:auto!important}}

/* Riesige Wortmarke über dem Footer */
.foot-word{font-family:var(--display);font-weight:200;text-transform:uppercase;letter-spacing:.06em;text-align:center;font-size:clamp(3rem,11vw,10.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(143,163,191,.28);padding:110px 12px 0;background:var(--bg);user-select:none}
.foot-word + .footer{border-top:0;margin-top:-8px}

/* Zeilenmasken für Überschriften */
h2.tr{overflow:hidden}
h2.tr > .tr-in{display:block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.7,.2,1) .08s}
h2.tr.on > .tr-in{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){h2.tr > .tr-in{transform:none;transition:none}}

/* Bild-Clip-Enthüllung */
.page-visual img{clip-path:inset(7% 5% 7% 5%);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1),filter .6s}
.page-visual.imgin img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.page-visual img{clip-path:none;transition:none}}

/* ===================== Weiss als Rhythmus: Porzellan-Abschnitte ===================== */
.light{background:#F2EEEA;color:#1B0D2E}
.light .eyebrow{color:#73859F}
.statement.light{padding:170px 0 110px}
.statement.light p{color:#1B0D2E}
.statement.light p .w{opacity:.14}
.statement.light p .w.on{opacity:1}
.statement.light p .w.em{color:#73859F}
.maxim.light{padding:130px 0 96px}
.maxim.light p{color:#1B0D2E}
.maxim.light p em{color:#73859F}
.maxim.light .wrap::after{background:#73859F}
.light + .section,.light + .section-tight{border-top:0}
.hero-full + .statement.light{margin-top:0}
.maxim.light + .page-visual,.maxim.light + .wrap{margin-top:96px}
@media (max-width:760px){.statement.light{padding:110px 0 76px}.maxim.light{padding:90px 0 64px}}

/* ================= FRISCHE: Porzellan-Lesemodus für Inhaltsseiten ================= */
body.light-page{background:#F2EEEA;color:#241B2F}
.light-page .page-head{background:#F2EEEA;color:#241B2F;padding-top:150px}
.light-page .page-head h1,.light-page .page-head h2{color:#241B2F}
.light-page .page-head .lead,.light-page .lead{color:#5C5266}
.light-page .breadcrumb,.light-page .breadcrumb a{color:#8A7F95}
.light-page .eyebrow{color:var(--area,#A28776)}
.light-page .center .eyebrow::before,.light-page .eyebrow::before{background:var(--area,#A28776)}
.light-page main{background:#F2EEEA}
.light-page .prose{color:#332941}
.light-page .prose p,.light-page .prose li{color:#4A4055}
.light-page .prose h2,.light-page .prose h3{color:#241B2F}
.light-page .prose strong,.light-page .prose b{color:#241B2F}
.light-page .prose a{color:#241B2F;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--area,#A28776)}
.light-page .fact{border-top-color:rgba(36,27,47,.18)}
.light-page .fact b{color:#241B2F}
.light-page .fact span{color:#776E85}
.light-page .steps .step{border-color:rgba(36,27,47,.14);background:#FCFAF8}
.light-page .step h3{color:#241B2F}
.light-page .step p{color:#4A4055}
.light-page .step .time{color:var(--area,#A28776)}
.light-page .faq details{border-color:rgba(36,27,47,.14);background:#FCFAF8}
.light-page .faq summary{color:#241B2F}
.light-page .faq p{color:#4A4055}
.light-page .note{background:#FCFAF8;border-left:3px solid var(--area,#A28776);padding:18px 22px;color:#4A4055}
.light-page .aside{background:#FCFAF8;border:1px solid rgba(36,27,47,.14);color:#241B2F}
.light-page .aside h3{color:#241B2F}
.light-page .aside .price{color:#241B2F}
.light-page .aside .small,.light-page .aside .muted{color:#776E85}
.light-page .aside .tel{color:#241B2F}
.light-page .btn-primary{background:var(--area,#A28776)!important;border-color:var(--area,#A28776)!important;color:#fff!important}
.light-page .btn-primary:hover{background:#241B2F!important;border-color:#241B2F!important;color:#fff!important}
.light-page .btn-link{color:#241B2F}
.light-page table td{color:#332941;border-color:rgba(36,27,47,.12)}
.light-page table th{color:#776E85}
.light-page tbody tr:hover{background:rgba(36,27,47,.03)}
.light-page .card,.light-page .svc,.light-page .door{background:#FCFAF8;border-color:rgba(36,27,47,.14)}
.light-page .card h3,.light-page .svc h3{color:#241B2F}
.light-page .card p,.light-page .svc p{color:#4A4055}
.light-page .card:hover,.light-page .svc:hover{border-color:var(--area,#A28776)}
.light-page .section + .section,.light-page .section-tight + .section{border-top-color:rgba(36,27,47,.1)}
.light-page .page-visual::before{background:linear-gradient(180deg,#F2EEEA 0%,rgba(242,238,234,0) 14%,rgba(242,238,234,0) 86%,#F2EEEA 100%)}
.light-page .maxim{background:#F2EEEA}
.light-page .maxim p{color:#241B2F}
.light-page .maxim p em{color:var(--area,#A28776)}
.light-page .maxim .wrap::after{background:var(--area,#A28776)}
.light-page .statement.light{background:#EAE3DD}
.light-page body::before{opacity:.03}
/* Kopfzeile im hellen Kontext */
.light-page .header{background:rgba(242,238,234,.94);color:#241B2F}
.light-page .header a,.light-page .header .menu-btn{color:#241B2F}
.light-page .header .btn{border-color:#241B2F;color:#241B2F}
.light-page .header .btn:hover{background:#241B2F;color:#F2EEEA}
/* Dunkle Bänder bleiben dunkel */
.light-page .cta-band,.light-page .chapter,.light-page .footer,.light-page .foot-word,.light-page .megamenu,.light-page .assist-panel{background:var(--night,#281432)}
.light-page .cta-band h2,.light-page .cta-band .lead{color:#fff}

/* ================= BEREICHSFARBEN ================= */
body.area-haut{--area:#A28776}       /* Haut & Laser: Messing */
body.area-longevity{--area:#6F9C8B}  /* Derma Longevity: Salbei */
body.area-integrativ{--area:#B0785A} /* Integrative Medizin: Terrakotta */
body.area-service{--area:#73859F}    /* Service & Haus: Schiefer */
.light-page .page-head{border-top:3px solid var(--area,#A28776)}
/* Korrekturen heller Modus */
.light-page .header .brand,.light-page .header .brand *{color:#241B2F!important}
.light-page .header .brand .tag{color:#776E85!important}
.light-page .header .logo circle,.light-page .header svg circle{stroke:var(--area,#A28776)}
.light-page .header .logo path,.light-page .header svg path{stroke:#241B2F}
.light-page .header{border-bottom:1px solid rgba(36,27,47,.1)}
.light-page .header .btn,.light-page .header .btn-primary{background:var(--area,#A28776)!important;border-color:var(--area,#A28776)!important;color:#fff!important}
.light-page .header .btn:hover{background:#241B2F!important;border-color:#241B2F!important}
.light-page .page-head h1{letter-spacing:.02em}
.light-page .assist-btn{background:#241B2F;color:#fff}
.light-page .price-old,.light-page .aside s{color:#A79DB3}
/* Heller Modus: dunkle Restflächen aufhellen */
.light-page,.light-page main,.light-page .section,.light-page .section-tight,.light-page .layout,.light-page .page-visual,.light-page .statement{background-color:#F2EEEA}
.light-page .statement.light{background:#EAE3DD}
.light-page main > section:not(.cta-band):not(.chapter),.light-page main > div{background-color:#F2EEEA}
.light-page .maxim.light{background:#EAE3DD}
.light-page .prose blockquote{background:#FCFAF8;border-left:3px solid var(--area,#A28776)}
.light-page .pattern,.light-page .pattern::before,.light-page .pattern::after{background-color:#F2EEEA!important;background-image:none!important}
.light-page .page-head.pattern{border-top:3px solid var(--area,#A28776)}
/* Behandlungsfinder */
.finder{background:#FCFAF8;border:1px solid rgba(36,27,47,.14);padding:44px 40px;margin:0 0 20px}
.finder h2{margin:.3em 0 1em;font-size:clamp(1.5rem,2.6vw,2.2rem)}
.bf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.bf-o{font:inherit;font-size:.95rem;text-align:left;padding:18px 20px;background:#F2EEEA;border:1px solid rgba(36,27,47,.16);color:#241B2F;cursor:pointer;transition:border-color .3s,background .3s,transform .3s}
.bf-o:hover{border-color:var(--area,#A28776);background:#fff;transform:translateY(-2px)}
.bf-res h2{color:#241B2F}
.bf-res p{color:#4A4055}
.bf-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.bf-act .btn-ghost{border:1px solid #241B2F;color:#241B2F;background:none;cursor:pointer;padding:15px 26px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.bf-act .btn-ghost:hover{background:#241B2F;color:#F2EEEA}
.tablewrap{overflow-x:auto;margin:0 0 28px}
.tablewrap table{width:100%;min-width:680px;border-collapse:collapse}
.light-page .tablewrap th{text-align:left;padding:14px;border-bottom:1px solid rgba(36,27,47,.2);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#776E85}
.light-page .tablewrap td{padding:16px 14px;border-bottom:1px solid rgba(36,27,47,.1);color:#332941;font-size:.95rem}

/* ============ Ablauf-Karten im hellen Modus: sauber statt Punkte ============ */
.light-page .steps{counter-reset:st;gap:20px;margin-top:32px}
.light-page .steps::before{display:none}
.light-page .step{padding:26px 26px 24px;border:1px solid rgba(36,27,47,.13);background:#FCFAF8;border-top:2px solid var(--area,#A28776);position:relative;transition:transform .4s var(--e,cubic-bezier(.2,.7,.2,1)),border-color .3s}
.light-page .step::before{content:counter(st,decimal-leading-zero);counter-increment:st;position:static;display:block;width:auto;height:auto;border:0;border-radius:0;background:none;font-family:var(--display);font-weight:200;font-size:1.9rem;line-height:1;color:var(--area,#A28776);margin-bottom:14px}
.light-page .step:hover{transform:translateY(-3px)}
.light-page .step .time{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#8A7F95;margin-bottom:6px}
.light-page .step h3{font-size:1.15rem;letter-spacing:.03em;margin:0 0 .4em;text-transform:none}
.light-page .step p{font-size:.95rem;line-height:1.65;margin:0}

/* Überschriften: kräftiger, weniger gesperrt, dunkler */
.light-page .prose h2{font-weight:300;letter-spacing:.01em;text-transform:none;font-size:clamp(1.5rem,2.4vw,2.05rem);margin:2.2em 0 .55em;color:#241B2F}
.light-page .prose h2:first-child{margin-top:0}
.light-page .page-head h1{text-transform:none;font-weight:300;letter-spacing:-.005em}
.light-page .prose h3{text-transform:none;letter-spacing:.01em}
.light-page .prose p{font-size:1.02rem;line-height:1.78}

/* Kennzahlen-Reihe kompakter */
.light-page .facts{gap:20px;margin-bottom:8px}
.light-page .fact{border-top:2px solid var(--area,#A28776);padding-top:14px}
.light-page .fact b{font-size:1.7rem;font-weight:300}
.light-page .fact span{font-size:.6rem;letter-spacing:.2em}

/* FAQ-Zeilen als Karten */
.light-page .faq details{border:1px solid rgba(36,27,47,.13);background:#FCFAF8;margin:0 0 10px;border-radius:0}
.light-page .faq summary{padding:18px 22px;font-size:1rem;font-weight:400}
.light-page .faq details[open]{border-color:var(--area,#A28776)}
.light-page .faq details p{padding:0 22px 20px}

/* Terminkarte */
.light-page .aside{border-top:3px solid var(--area,#A28776);padding:32px 30px}
.light-page .aside h3{text-transform:none;font-size:1.15rem;letter-spacing:.02em}
.light-page .aside .price{font-weight:300;font-size:2.1rem;letter-spacing:-.01em}
.light-page .aside s,.light-page .aside .old{color:#A79DB3;font-size:1rem}
/* Feinschliff hell: Textspalte breiter, FAQ kompakter, Abstände ruhiger */
.light-page .layout{grid-template-columns:minmax(0,1fr) 340px;gap:64px}
.light-page .prose{max-width:none}
.light-page .faq summary{padding:16px 20px}
.light-page .faq details{margin:0 0 8px}
.light-page .prose h2{margin:1.9em 0 .5em}
.light-page .steps{grid-template-columns:repeat(3,1fr)}
.light-page .step p{font-size:.92rem}
.light-page .btn-link{font-size:.68rem;letter-spacing:.2em}
@media(max-width:980px){.light-page .layout{grid-template-columns:1fr;gap:40px}}

/* ============ Wortmarke über dem Footer: klarer, mit Aufbau-Animation ============ */
.foot-word{
  font-family:var(--display);font-weight:200;text-transform:uppercase;
  letter-spacing:.11em;text-align:center;line-height:1.02;
  font-size:clamp(2.1rem,7.6vw,7.4rem);
  padding:96px 24px 12px;background:var(--night,#281432);user-select:none;
  color:transparent;-webkit-text-stroke:1.4px rgba(169,141,95,.55);
  overflow:hidden;position:relative
}
.foot-word .fw-line{display:block;overflow:hidden}
.foot-word .fw-in{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform 1.15s cubic-bezier(.2,.75,.2,1),opacity .8s ease, -webkit-text-stroke-color 1s ease .4s}
.foot-word.on .fw-in{transform:translateY(0);opacity:1}
.foot-word.on{-webkit-text-stroke-color:rgba(169,141,95,.62)}
.foot-word::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:1px;background:linear-gradient(90deg,transparent,rgba(169,141,95,.9),transparent);
  transition:width 1.4s cubic-bezier(.2,.75,.2,1) .35s}
.foot-word.on::after{width:min(560px,72%)}
@media (max-width:760px){.foot-word{letter-spacing:.08em;padding:64px 18px 10px;-webkit-text-stroke-width:1px}}
@media (prefers-reduced-motion:reduce){.foot-word .fw-in{transform:none;opacity:1;transition:none}.foot-word::after{width:min(560px,72%);transition:none}}
/* Footer: fünf Spalten, kompaktere Listen */
.footer .cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:36px}
.footer li{margin:6px 0;font-size:.9rem}
.footer h4{margin-bottom:12px}
@media(max-width:1200px){.footer .cols{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.footer .cols{grid-template-columns:1fr 1fr}}
.er-tile{display:block;overflow:hidden;position:relative;border:1px solid rgba(36,27,47,.14)}
.er-tile img{width:100%;height:auto;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.er-tile:hover img{transform:scale(1.03)}

/* ============ Lesbarkeit im hellen Modus: Links, Formular, Randspalte ============ */
.light-page .aside p,.light-page .aside li,.light-page .aside span{color:#4A4055}
.light-page .aside a,.light-page .aside a:visited{color:#241B2F;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--area,#A28776)}
.light-page .aside a:hover{color:var(--area,#A28776)}
.light-page .aside .tel{color:#241B2F;font-weight:500;text-decoration:none;font-size:1.05rem}
.light-page .aside h3{font-size:1.05rem;font-weight:500;display:flex;align-items:center;gap:10px}
.light-page .aside .eyebrow{color:var(--area,#A28776)}
.light-page .aside .ic{color:var(--area,#A28776)}
.light-page .aside .small.muted,.light-page .aside .muted{color:#5C5266}

/* Formular hell */
.light-page .form label{color:#5C5266;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.light-page .form input,.light-page .form select,.light-page .form textarea{
  background:#FCFAF8;border:1px solid rgba(36,27,47,.2);border-bottom:1px solid rgba(36,27,47,.35);
  color:#241B2F;padding:13px 14px;border-radius:2px;font-size:1rem}
.light-page .form input:focus,.light-page .form select:focus,.light-page .form textarea:focus{
  outline:none;border-color:var(--area,#A28776);box-shadow:0 0 0 3px rgba(169,141,95,.14)}
.light-page .form input::placeholder,.light-page .form textarea::placeholder{color:#9A91A6}
.light-page .form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#5C5266 50%),linear-gradient(135deg,#5C5266 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.light-page .form .btn-primary{padding:16px 34px}
.light-page .page-head h1{color:#241B2F}
.light-page h1,.light-page h2,.light-page h3{color:#241B2F}
.light-page .hp{display:none}

/* ============ Wortmarke: kräftiger, mit Buchstaben-Aufbau ============ */
.foot-word{-webkit-text-stroke:2px rgba(169,141,95,.75);letter-spacing:.13em;
  font-size:clamp(2.3rem,8.2vw,8rem);padding:104px 24px 14px}
.foot-word .fw-ch{display:inline-block;transform:translateY(115%) rotate(2deg);opacity:0;
  transition:transform 1s cubic-bezier(.2,.8,.25,1),opacity .7s ease}
.foot-word.on .fw-ch{transform:none;opacity:1}
.foot-word .fw-sp{display:inline-block;width:.42em}
.foot-word::after{height:2px;background:linear-gradient(90deg,transparent,rgba(169,141,95,1),transparent)}
@media (max-width:760px){.foot-word{-webkit-text-stroke-width:1.4px;letter-spacing:.09em}}
@media (prefers-reduced-motion:reduce){.foot-word .fw-ch{transform:none;opacity:1;transition:none}}

/* ============ Menü: scrollbar, mehr Einträge, sauberer Abschluss ============ */
.megamenu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mm-inner{height:auto;min-height:100%;align-items:start;padding:120px max(24px,calc((100% - 1160px)/2 + 24px)) 96px}
.mm-nav a{font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.24}
.mm-nav li{margin:0}
.mm-side{align-self:start}
.mm-direct a,.mm-aux a{display:block;padding:5px 0;font-size:.98rem}
.megamenu::-webkit-scrollbar{width:10px}
.megamenu::-webkit-scrollbar-track{background:#1B0D2E}
.megamenu::-webkit-scrollbar-thumb{background:#4A3763;border-radius:6px;border:2px solid #1B0D2E}
@media (max-width:900px){
  .mm-inner{grid-template-columns:1fr;gap:28px;padding:100px 22px 80px}
  .mm-nav a{font-size:1.45rem}
  .mm-side{border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
}
@media (max-height:820px){
  .mm-inner{padding-top:96px;padding-bottom:80px}
  .mm-nav a{font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.2}
  .mm-direct a,.mm-aux a{padding:3px 0;font-size:.92rem}
}

/* ============ Weisses Manifest: sichtbar und lesbar ============ */
.statement.light{background:#F2EEEA;padding:150px 0 120px}
.statement.light p{color:#241B2F;font-weight:300;letter-spacing:.02em;font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.5;max-width:26em;margin:0 auto}
.statement.light p .w{opacity:.2;transition:opacity .5s ease}
.statement.light p .w.on{opacity:1}
.statement.light p .w.em,.statement.light p em{color:#A28776;font-style:normal}
/* Menü: Inhalt beginnt unter der Kopfzeile, nichts überlappt */
.mm-inner{padding-top:150px}
@media (max-height:820px){.mm-inner{padding-top:132px}}
@media (max-width:900px){.mm-inner{padding-top:120px}}
.megamenu{padding-top:0}
html.mm-open .header{background:transparent!important;box-shadow:none}
/* Kopfzeile im offenen Menü: eigener Grund, damit nichts durchscheint */
html.mm-open .header{background:#1B0D2E!important;border-bottom:1px solid rgba(255,255,255,.12)}
.megamenu{scroll-padding-top:150px}

/* ============ Dunkle Panels im hellen Modus: Überschriften lesbar ============ */
.light-page .panel,.light-page .stack .panel{background:#241536;color:#fff;border:0}
.light-page .panel h2,.light-page .panel h3{color:#fff!important}
.light-page .panel p,.light-page .panel li{color:rgba(255,255,255,.9)!important}
.light-page .panel .eyebrow{color:#D6C6BB!important}
.light-page .panel .eyebrow::before{background:#A28776}
.light-page .panel .btn-link{color:#fff!important;border-bottom-color:rgba(255,255,255,.5)}
.light-page .panel .btn-link:hover{color:#D6C6BB!important}
.light-page .panel a{color:#fff;text-decoration-color:#A28776}
.light-page .panel strong,.light-page .panel b{color:#fff}
.light-page .panel .fact b{color:#fff}
.light-page .panel .fact span{color:rgba(255,255,255,.72)}
.light-page .panel table td{color:rgba(255,255,255,.92)}
.light-page .panel table th{color:#D6C6BB}
/* Panel: Knopfzeile nicht überlappen */
.light-page .panel .btn-link{display:inline-block;margin-top:22px;padding-bottom:4px}
.light-page .panel > div{padding:56px 46px}
.light-page .panel{margin-bottom:26px;overflow:hidden}
@media(max-width:900px){.light-page .panel > div{padding:40px 26px}}

/* ============ Universelle Lesbarkeit im hellen Modus ============ */
.light-page .section p,.light-page .section li,.light-page .grid-2 p,.light-page .center p{color:#4A4055}
.light-page .section h2,.light-page .section h3,.light-page .grid-2 h2,.light-page .center h2{color:#241B2F}
.light-page .section strong,.light-page .section b,.light-page .grid-2 strong{color:#241B2F;font-weight:500}
.light-page .section-surface,.light-page .section-white{background:#EAE3DD}
.light-page .section-surface p,.light-page .section-surface li{color:#4A4055}
.light-page .section-surface h2,.light-page .section-surface h3{color:#241B2F}
.light-page .section-surface .eyebrow,.light-page .section .eyebrow,.light-page .center .eyebrow{color:var(--area,#A28776)}
.light-page .lead{color:#5C5266}
.light-page .verlauf{background:#FCFAF8;border:1px solid rgba(36,27,47,.14)}
.light-page .verlauf strong,.light-page .verlauf span,.light-page .verlauf em{color:#241B2F}
.light-page .verlauf .foot span{color:#776E85}
.light-page .verlauf .bar{background:rgba(36,27,47,.1)}
.light-page .verlauf .bar i{background:var(--area,#A28776)}
.light-page .ph,.light-page .thumb{background:#EAE3DD}
.light-page .quote,.light-page blockquote{color:#241B2F}
.light-page .door p,.light-page .door h3{color:#241B2F}
.light-page .journal-list article p{color:#4A4055}
.light-page .journal-list article h3,.light-page .journal-list article h2{color:#241B2F}
.light-page .standards p,.light-page .pillar p{color:#4A4055}
.light-page .standards h3,.light-page .pillar h3{color:#241B2F}
.light-page dt,.light-page dd{color:#332941}
.light-page .lexikon dt{color:#241B2F}

/* ============ Kontrast-Korrekturen (systematisch) ============ */
/* 1. Weisse Schrift auf hellem Grund abfangen */
.light-page .card,.light-page .svc,.light-page .door,.light-page .price-card,.light-page .plan,.light-page .verlauf,
.light-page .card *,.light-page .svc *,.light-page .door *,.light-page .price-card *,.light-page .plan *{color:#332941}
.light-page .card h2,.light-page .card h3,.light-page .svc h3,.light-page .door h3,.light-page .price-card h3,.light-page .plan h3{color:#241B2F}
.light-page .card .eyebrow,.light-page .svc .eyebrow,.light-page .door .eyebrow,.light-page .price-card .eyebrow{color:#8B7364}
.light-page .card .more,.light-page .svc .more{color:#241B2F}
.light-page .price,.light-page .price-card .price,.light-page .plan .price{color:#241B2F}
.light-page s,.light-page del,.light-page .price s{color:#8A7F95}

/* 2. Bereichsfarben dunkler für Text (Kontrast), Flächen bleiben wie sie sind */
body.area-haut{--area:#A28776;--area-text:#7A6356}
body.area-longevity{--area:#6F9C8B;--area-text:#3F6656}
body.area-integrativ{--area:#B0785A;--area-text:#80503A}
body.area-service{--area:#73859F;--area-text:#4A5A72}
.light-page .eyebrow,.light-page .prose .eyebrow,.light-page .section .eyebrow,.light-page .aside .eyebrow,
.light-page .step .time,.light-page .maxim p em,.light-page .statement.light p .w.em{color:var(--area-text,#7A6356)!important}
.light-page .btn-primary{background:var(--area-text,#7A6356)!important;border-color:var(--area-text,#7A6356)!important;color:#fff!important}
.light-page .header .btn{background:var(--area-text,#7A6356)!important;border-color:var(--area-text,#7A6356)!important}
.light-page .prose a{text-decoration-color:var(--area-text,#7A6356)}

/* 3. Dunkle Bänder: Text immer hell */
.light-page .cta-band,.light-page .cta-band *,.light-page .chapter,.light-page .chapter *{color:#fff!important}
.light-page .cta-band .btn-primary{background:#fff!important;color:#241B2F!important;border-color:#fff!important}
.light-page .cta-band .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.6)!important}
.light-page .footer,.light-page .footer *{color:rgba(255,255,255,.85)}
.light-page .footer h4{color:#D6C6BB}
.light-page .footer a:hover{color:#D6C6BB}
.light-page .stack .panel *,.light-page .panel *{color:#fff}
.light-page .panel .eyebrow{color:#D6C6BB!important}
.light-page .cert,.light-page .cert *{color:#fff}
/* Restliche Kontrastlücken */
.light-page .verlauf,.light-page .verlauf *{color:#241B2F!important}
.light-page .verlauf .foot span,.light-page .verlauf .head span{color:#776E85!important}
.light-page .price-row,.light-page .price-row *,.light-page .pricing *,.light-page table *{color:#332941}
.light-page .price-row .price,.light-page .pricing .price{color:#241B2F}
.light-page .price-row s,.light-page .pricing s,.light-page .old{color:#8A7F95!important}
.light-page .form .small,.light-page .form .muted,.light-page .small.muted{color:#5C5266!important}
.light-page .form a,.light-page .small a{color:#241B2F!important;text-decoration:underline}
.light-page .band,.light-page .band *{color:#fff}
.light-page .quote,.light-page .quote *{color:#241B2F}
.light-page .cert,.light-page .cert *,.light-page .standards > div,.light-page .standards *{color:#fff}
.light-page .prose .note *{color:#4A4055}
/* Bildbänder und Preiszeilen */
.light-page .band,.light-page .band *,.light-page .band .eyebrow{color:#fff!important}
.light-page .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,13,46,.35),rgba(27,13,46,.55));z-index:0}
.light-page .band .inner{position:relative;z-index:1}
.light-page .prices .price,.light-page .price{color:#241B2F!important}
.light-page .prices .price s,.light-page .price s,.light-page .prices s{color:#8A7F95!important}
.light-page .footer p,.light-page .footer li,.light-page .footer span{color:rgba(255,255,255,.82)!important}
/* Letzte Kontrastlücken: Footer-Öffnungszeiten, Megamenü-Preise, Zertifikatsblock, Preistabelle */
.footer .cols p,.footer .cols li,.footer .cols span,.footer .cols a{color:rgba(255,255,255,.88)!important}
.light-page .mega,.light-page .mega *{color:#241B2F}
.light-page .mega .price{color:#7A6356!important}
.light-page .mega h4{color:#8A7F95}
.light-page .cert,.light-page .cert *,.light-page .cert li{color:#fff!important}
.light-page .cert .eyebrow{color:#D6C6BB!important}
.light-page .prices tr td,.light-page .prices td{color:#332941!important}
.light-page .prices td .price,.light-page td .price{color:#241B2F!important}
.light-page td s,.light-page .prices s,.light-page .price s{color:#8A7F95!important}
/* Footer-Zeile Öffnungszeiten und Rechtslinks */
.footer .cols > div:first-child p,.footer .cols > div:first-child span{color:rgba(255,255,255,.9)!important}
.footer .bottom,.footer .bottom *{color:rgba(255,255,255,.78)!important}
.footer .bottom a{color:rgba(255,255,255,.9)!important}
.light-page .footer .cols li a{color:rgba(255,255,255,.88)!important}
/* Bandtexte über Bildern */
.light-page .band p,.light-page .band .eyebrow,.band p,.band .eyebrow{color:#fff!important;text-shadow:0 2px 24px rgba(20,10,32,.65)}

/* ============ Hauttyp-Check im hellen Modus ============ */
.light-page .quiz{background:#241536;border:0;padding:40px 38px;border-radius:2px}
.light-page .quiz,.light-page .quiz *{color:#fff}
.light-page .quiz h3{color:#fff!important;font-size:1.25rem;font-weight:400;text-transform:none;letter-spacing:.02em;margin:0 0 22px}
.light-page .quiz .opts button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:16px 20px;text-align:left;font:inherit;font-size:1rem;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;width:100%;margin:0 0 10px}
.light-page .quiz .opts button:hover{background:rgba(255,255,255,.14);border-color:#D6C6BB;transform:translateY(-2px)}
.light-page .quiz .progress{background:rgba(255,255,255,.18);height:2px}
.light-page .quiz .progress i{background:#D6C6BB;height:2px;display:block}
.light-page .quiz .res,.light-page .quiz .res *{color:#fff}
.light-page .quiz .btn-primary{background:#fff!important;color:#241B2F!important;border-color:#fff!important}
.light-page .pattern-soft{background:#F2EEEA!important;background-image:none!important}
.light-page .pattern-soft h2,.light-page .pattern-soft .center h2{color:#241B2F}
.light-page .pattern-soft .lead,.light-page .pattern-soft p{color:#5C5266}
/* Letzte Runde: Filterknöpfe, Journal-Karten, Hero-Textlink, Quiz-Buttons */
.light-page .quiz .opts button{background:#32204A}
.light-page .filter button,.light-page .filters button,.light-page .tabs button,.light-page .chip{
  background:#FCFAF8!important;border:1px solid rgba(36,27,47,.2)!important;color:#332941!important}
.light-page .filter button.active,.light-page .filters button.active,.light-page .tabs button.active,.light-page .chip.active{
  background:var(--area-text,#7A6356)!important;border-color:var(--area-text,#7A6356)!important;color:#fff!important}
.light-page .journal-list article,.light-page .journal-list a,.light-page .post-card{background:#FCFAF8!important;border:1px solid rgba(36,27,47,.14)}
.light-page .journal-list article *,.light-page .post-card *{color:#332941!important}
.light-page .journal-list h2,.light-page .journal-list h3,.light-page .post-card h3{color:#241B2F!important}
.light-page .journal-list .eyebrow,.light-page .post-card .eyebrow,.light-page .meta{color:#7A6356!important}
.light-page .lexikon dt,.light-page .lexikon .cat{color:#241B2F!important}
.light-page .lexikon .cat{color:#7A6356!important}
.light-page .muted,.light-page .small{color:#5C5266!important}
.hero .tlink,.hero .discover,.hero .btn-link,.hero-full .tlink{color:#fff!important}
.light-page .hero .tlink,.light-page .hero-full .tlink,.light-page .hero-full .btn-link{color:#fff!important}
.statement.light p .w.em{color:#7A6356!important}
/* Wirklich letzte Lücken: Navigationsleiste, Lexikon-Links, Tabellenköpfe */
.light-page .header .nav a.top,.light-page .header .nav .top{color:#241B2F!important}
.light-page .nav a.top:hover{color:var(--area-text,#7A6356)!important}
.light-page .lexikon .more,.light-page dd .more,.light-page a.more{color:#241B2F!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--area-text,#7A6356)}
.light-page .lead,.light-page .page-head .lead{color:#5C5266!important}
.light-page .maxim.light p,.light-page .maxim p{color:#241B2F!important}
.light-page table th,.light-page .prices th{color:#5C5266!important}
.light-page .hero .tlink,.hero .tlink,.hero-full .tlink,.hero-full .btn-link,.hero-full .discover{color:#fff!important}
/* Abschlussband: Lead-Text hell genug */
.cta-band .lead,.light-page .cta-band .lead,.cta-band p{color:rgba(255,255,255,.92)!important}
.light-page .cta-band .lead{color:rgba(255,255,255,.92)!important}
/* Preisseite: Spaltenköpfe und Zeilen */
.light-page .prices td:first-child,.light-page td strong{color:#241B2F!important}
.light-page .prices .col,.light-page .prices thead th,.light-page .prices td span{color:#5C5266!important}
.light-page .bottom a,.light-page .footer .bottom a{color:rgba(255,255,255,.9)!important}

/* ============ Lexikon im hellen Modus ============ */
.light-page .glossar,.light-page .lexikon{color:#332941}
.light-page .glossar dt,.light-page .lexikon dt{color:#241B2F!important;font-weight:500;font-size:1.15rem}
.light-page .glossar dd,.light-page .lexikon dd{color:#4A4055!important}
.light-page .lexikon .cat,.light-page .glossar .cat{color:#7A6356!important;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.light-page .letter{color:#241B2F!important;opacity:.35;font-weight:200}
.light-page .glossar-nav a{color:#5C5266!important;padding:6px 9px;border-radius:2px}
.light-page .glossar-nav a:hover{color:#fff!important;background:var(--area-text,#4A5A72)}
.light-page .lx{border-bottom:1px solid rgba(36,27,47,.1);padding:18px 0}
.light-page .chip,.light-page .chips button{background:#FCFAF8!important;border:1px solid rgba(36,27,47,.22)!important;color:#332941!important;padding:9px 16px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.light-page .chip[aria-pressed="true"],.light-page .chip.active{background:#4A5A72!important;border-color:#4A5A72!important;color:#fff!important}
.light-page .chip:hover{border-color:#4A5A72!important}
.light-page .more{color:#241B2F!important}

/* ============ Footer: Even-Realities-Zeile dezent ============ */
.footer .bottom{align-items:baseline}
.er-foot{order:2;font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.55)!important;text-transform:none}
.er-foot a{color:rgba(255,255,255,.75)!important;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.er-foot a:hover{color:#D6C6BB!important;border-color:#D6C6BB}
/* Journal-Schlagwörter, Preis-Lead, Rechtslinks */
.light-page .tags span,.light-page .tag{background:#EAE3DD!important;color:#4A4055!important;border:1px solid rgba(36,27,47,.14);padding:6px 12px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.light-page .page-head .lead,.light-page .lead{color:#5C5266!important}
.light-page .footer .bottom a,.light-page .footer li a{color:rgba(255,255,255,.88)!important}
.light-page .prices .lead,.light-page .prices p{color:#4A4055!important}
/* Marken-Untertitel in der Kopfzeile */
.light-page .brand .tag,.light-page .header .tag{color:#6A6076!important}
.light-page .footer .brand .tag{color:rgba(255,255,255,.65)!important}
/* Preisseite: Spaltenüberschriften */
.light-page th,.light-page .prices th,.light-page thead th{color:#4A4055!important;font-weight:500}
/* Marken-Untertitel: dunkler für sicheren Kontrast */
.light-page .brand .tag,.light-page .wm .tag,.light-page .header .wm .tag{color:#5C5266!important}
.light-page .footer .wm .tag,.light-page .footer .brand .tag{color:rgba(255,255,255,.75)!important}
/* Umschalter Einzelsitzung/Serie und Hinweisbox */
.light-page .toggle button{background:#FCFAF8!important;border:1px solid rgba(36,27,47,.22)!important;color:#332941!important;padding:11px 22px;cursor:pointer}
.light-page .toggle button[aria-pressed="true"],.light-page .toggle button.active{background:#4A5A72!important;border-color:#4A5A72!important;color:#fff!important}
.light-page .note,.light-page .note *{color:#4A4055!important}
.light-page .note a{color:#241B2F!important;text-decoration:underline;text-underline-offset:3px}
.light-page .loader,.light-page .loader *{color:#fff!important}

/* ============ KORREKTUR: Menü darf nie von den Hell-Regeln getroffen werden ============ */
.megamenu,.megamenu *{color:#fff!important}
.megamenu .mm-nav a,.megamenu nav a,.megamenu a{color:#fff!important;background:none!important}
.megamenu .mm-nav a:hover,.megamenu a:hover{color:#D6C6BB!important}
.megamenu .mm-small,.megamenu .eyebrow,.megamenu h4{color:#D6C6BB!important}
.megamenu .mm-aux a,.megamenu .mm-direct a{color:rgba(255,255,255,.92)!important}
.megamenu .btn,.megamenu .btn-primary{background:transparent!important;border:1px solid rgba(255,255,255,.7)!important;color:#fff!important}
.megamenu .btn:hover{background:#fff!important;color:#241B2F!important}
/* Kopfzeile bei offenem Menü immer hell auf dunkel */
html.mm-open .header,html.mm-open .header *{color:#fff!important}
html.mm-open .header .brand .tag,html.mm-open .brand .tag,html.mm-open .wm .tag{color:rgba(255,255,255,.7)!important;background:none!important}
html.mm-open .header .btn,html.mm-open .header .hd-cta{background:transparent!important;border:1px solid rgba(255,255,255,.7)!important;color:#fff!important}
html.mm-open .header .btn:hover{background:#fff!important;color:#241B2F!important}
html.mm-open .header .mono .v,html.mm-open .header svg path{stroke:#fff!important}
/* Hell-Regeln nie im Menü anwenden */
.light-page .megamenu .brand .tag,.light-page .megamenu .tag{color:rgba(255,255,255,.7)!important}
/* Kopfzeile im offenen Menü: Marke und Menütext klar sichtbar */
html.mm-open .header{background:#1B0D2E!important}
html.mm-open .brand .name,html.mm-open .brand .wm,html.mm-open .header .name{color:#fff!important;opacity:1!important}
html.mm-open .menu-btn,html.mm-open .menu-btn *{color:#fff!important}
html.mm-open .header .mono .ring,html.mm-open .header svg circle{stroke:#D6C6BB!important}
.mm-inner{padding-top:158px}
/* Marken-Container im offenen Menü ohne eigenen hellen Grund */
html.mm-open .header .brand,html.mm-open .header .wm,html.mm-open .brand *{background:none!important;color:#fff!important}
html.mm-open .header .wm .tag,html.mm-open .brand .tag{color:rgba(255,255,255,.72)!important}

/* ============================================================
   v28 Mobil-Korrektur (06.09.2026)
   Behebt den horizontalen Überlauf auf allen Seiten:
   1fr-Rasterspalten setzen als Minimum die Min-Content-Breite
   ihres Inhalts. Dadurch wuchsen Inhaltsspalte, Kennzahlen,
   Ablaufschritte und Tabellen über die Bildschirmbreite hinaus.
   ============================================================ */
html,body{max-width:100%}
.layout,.light-page .layout{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:980px){
  .layout,.light-page .layout{grid-template-columns:minmax(0,1fr)}
}
.layout>*,.wrap>*,.prose,.prose>*{min-width:0}
.prose{max-width:100%;overflow-wrap:break-word}

/* Kennzahlen-Kacheln: auf schmalen Geräten untereinander */
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.facts{grid-template-columns:minmax(0,1fr)}}
.facts .fact{min-width:0}
.facts .fact b{overflow-wrap:break-word;hyphens:auto}

/* Ablaufschritte */
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps .step{min-width:0}

/* Tabellen: eigener Scrollbereich statt Seitenüberlauf */
table{max-width:100%}
@media (max-width:900px){
  table.prices,.prose table,.layout table,main table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.prices thead,.prose table thead,main table thead{white-space:nowrap}
}

/* Geschlossenes Vollbild-Menü und Mega-Menü dürfen die Seite nicht verbreitern */
.megamenu,.mega,.mm,.mm-inner,#megamenu{max-width:100vw}
.megamenu{pointer-events:none}
html.mm-open .megamenu{pointer-events:auto}
.mega:not(.open){pointer-events:none}
@media (max-width:900px){
  .mega{overflow:hidden}
  .mega-inner{grid-template-columns:minmax(0,1fr)}
}

/* Horizontale Anliegen-Galerie clippt sauber */
.hs,.hs-rail{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
/* .hscroll darf KEINEN eigenen Scroll-Kontext bilden, sonst verliert .hs-sticky die Haftung */
.hscroll{max-width:100%;overflow:visible}
.ch-media{max-width:100%}

/* Preistabellen auf dem Handy vollständig lesbar */
@media (max-width:900px){
  table.prices{font-size:.82rem}
  table.prices th,table.prices td{padding:12px 8px}
  table.prices td:first-child,table.prices th:first-child{min-width:120px}
  .table-hint{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:0 0 10px}
}
.table-hint{display:none}

/* Footer-Spalten: 1fr setzt sonst die Min-Content-Breite der Linkliste als Minimum */
.footer .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.footer .cols>*{min-width:0}
.footer .cols a,.footer .cols li{overflow-wrap:break-word}
@media (max-width:1200px){.footer .cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer .cols{grid-template-columns:minmax(0,1fr)}}

/* Restüberläufe: lange Wortmarken, breite Buttons, Tabellenköpfe */
.btn,.btn-primary,.btn-ghost{max-width:100%;overflow-wrap:break-word}
@media (max-width:560px){.btn,.btn-primary,.btn-ghost{white-space:normal}}
@media (max-width:900px){table.prices thead,table.prices tbody{white-space:normal}}
.foot-word,.fw-in{max-width:100vw;overflow:hidden}
.prose,.prose p,.prose li,.prose h1,.prose h2,.prose h3,.lead,h1,h2,h3{overflow-wrap:break-word}

/* Schwesterpraxis-Zeile im Footer */
.footer .sister{border-top:1px solid var(--line,rgba(255,255,255,.14));margin-top:28px;padding-top:20px}
.footer .sister p{margin:0;font-size:.92rem;line-height:1.6;max-width:70ch}
.footer .sister a{text-decoration:underline;text-underline-offset:3px}
.review-cta,.cross{margin:18px 0 0}
.cross a{text-decoration:underline;text-underline-offset:3px}

/* Aktionen über dem Hero-Bild bleiben auf jedem Bildausschnitt lesbar */
.hero .btn,.hero2 .btn,.hero-actions .btn{text-shadow:0 1px 10px rgba(20,10,32,.55)}
.hero .btn-ghost,.hero2 .btn-ghost{background:rgba(27,13,46,.28);backdrop-filter:blur(2px)}

/* ============================================================
   v28.1 Handy-Darstellung
   ============================================================ */
@media (max-width:760px){
  /* Einleitung unter dem Hero: eine Spalte statt zwei */
  .hf-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;grid-template-columns:none}
  .hf-foot p{max-width:100%;font-size:.95rem;line-height:1.65}
  .hf-scroll{opacity:.75}

  /* Aussage-Abschnitt: ruhigere Grösse (Wort-Enthuellung siehe v41.0) */
  .statement p,.statement.light p{font-size:clamp(1.15rem,5.2vw,1.6rem);line-height:1.55;max-width:22em;letter-spacing:.01em}
  .statement,.statement.light{padding:72px 0 56px}

  /* Kennzahlen: gestapelte Tafeln statt übereinander schiebender Vollbilder */
  .scrollstats{height:auto}
  .ss-panel{position:static;height:auto;min-height:0;padding-top:64px;padding-bottom:64px}
  .ss-panel::before{opacity:1}
  .ss-panel .ss-rule{width:min(420px,60%)}
  .ss-num{font-size:clamp(3.6rem,20vw,6rem);line-height:.95}
  .ss-label{font-size:1.05rem}
  .ss-note{font-size:.95rem;max-width:100%}

  /* Kapitel: Höhe nach Inhalt statt volle Bildschirmhöhe */
  .chapter{height:auto;min-height:0;padding-top:180px}
  .ch-inner{padding-bottom:44px}
  .chapter h2{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .chapter p{max-width:100%}
}

/* Sicherheitsnetz: Kapiteltexte bleiben sichtbar, auch wenn die
   Einblend-Beobachtung nicht auslöst (Adressleiste, Zurück-Navigation) */
.ch-inner{opacity:1}
.chapter:not(.in) .ch-inner{opacity:1;transform:none}
.chapter.in .ch-inner{opacity:1;transform:none}

/* Zeilenmaske schnitt die Unterlängen der letzten Zeile ab */
h2.tr,.maxim p.tr{padding-bottom:.18em;margin-bottom:.14em}
.chapter h2.tr{margin:.2em 0 .16em}

/* Ablaufkarten auf hellen Seiten: untereinander statt drei schmale Spalten */
@media (max-width:760px){
  .light-page .steps,.steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .light-page .steps .step,.steps .step{min-width:0}
  .light-page .steps .step h3,.steps .step h3{overflow-wrap:break-word}
}

/* Vollbild-Menü auf dem Handy: Aktionsleiste ausblenden, damit der
   erste Menüpunkt nicht hinter der Kopfzeile verschwindet */
@media (max-width:900px){
  .mm-inner{padding-top:132px}
  html.mm-open .header .brand{margin-left:12px}
  html.mm-open .header .wm .name{font-size:.98rem}
}
@media (max-width:430px){
  html.mm-open .header .wm .tag{display:none}
  .mm-nav a{font-size:1.5rem;line-height:1.5}
}

/* Assistent-Knopf verdeckt auf dem Handy keine Inhalte mehr */
@media (max-width:560px){
  .assist-btn{right:14px;bottom:14px;padding:11px 15px;font-size:.82rem;letter-spacing:.1em}
  .assist-btn .k{display:none}
  main{padding-bottom:64px}
}

/* Vollbild-Menü: senkrecht scrollbar, waagrecht geklippt */
.megamenu{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mm-inner{max-width:100%;height:auto;min-height:100%;overflow:visible}
@media (max-width:900px){
  .megamenu{overflow-y:auto}
  .mm-inner{padding-bottom:120px}
}

/* Even-Realities-Kachel: nur ein Bild, Format nach Bildschirmbreite */
.er-tile .kv-tall{display:none}
.er-tile .kv-wide{display:block}
@media (max-width:560px){
  .er-tile .kv-wide{display:none}
  .er-tile .kv-tall{display:block}
}

/* Dunkle Bänder nie halbtransparent einblenden: weisse Schrift stand sonst
   während der Einblendung auf hellem Grund und war nicht lesbar */
.cta-band.reveal,.chapter.reveal,.scrollstats.reveal,.statement.reveal{opacity:1;transform:none;transition:none}
.cta-band{background-color:var(--night,#281432)}
.cta-band .wrap{opacity:1}

/* ============================================================
   v28.9  Zwei unleserliche Buttons auf dem Smartphone
   ============================================================ */

/* 1. «Konzepte entdecken» im Hero.
   Der Button traegt die Klasse .light. Die Sektionsregel .light
   (Zeile 1602: background:#F2EEEA) hat deshalb auch auf den Button
   gegriffen: weisse Schrift auf fast weissem Grund, Kontrast 1.05.
   Der Button bekommt seinen Grund zurueck: transparent, weisse
   Schrift auf dem dunklen Hero-Bild, mit Unterlinie und leichtem
   Schatten, damit er ueber jeder Bildstelle lesbar bleibt. */
.btn-link.light,
.hero-full .btn-link.light,
.hero .btn-link.light{
  background:transparent;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.6);
  padding-bottom:4px;
  text-shadow:0 1px 12px rgba(20,10,32,.6);
}
.btn-link.light::after{color:var(--gold-soft,#D6C6BB)}
.btn-link.light:hover{color:var(--gold-soft,#D6C6BB);border-bottom-color:var(--gold-soft,#D6C6BB)}

/* 2. Der schwebende «Assistent»-Button.
   Er stand auf background:transparent mit weisser Schrift und
   schwebt beim Scrollen ueber helle Abschnitte, dort war er
   unsichtbar. Er bekommt wieder einen eigenen dunklen Grund,
   so wie ihn die Unterseiten (.light-page) ohnehin schon haben. */
.assist-btn,
.light-page .assist-btn{
  background:var(--night,#281432);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:12px 18px;
  opacity:1;
  box-shadow:0 10px 28px rgba(20,10,32,.34);
}
.assist-btn:hover,
.light-page .assist-btn:hover{
  background:#3A2049;
  color:#fff;
  border-color:rgba(255,255,255,.38);
}
@media (max-width:560px){
  .assist-btn{padding:11px 15px;font-size:.72rem;letter-spacing:.12em}
}

/* ============================================================
   v29  Membership
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:40px;align-items:stretch}
@media (max-width:1100px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{position:relative;display:flex;flex-direction:column;gap:0;background:#FCFAF8;border:1px solid rgba(36,27,47,.14);border-top:3px solid var(--area,#6F9C8B);border-radius:10px;padding:30px 28px 26px;min-width:0}
.tier .eyebrow{margin-bottom:10px}
.tier h3{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,1.35vw,1.5rem);letter-spacing:.04em;margin:0 0 6px;color:#241B2F;overflow-wrap:normal;hyphens:manual}
.tier .tier-tag{font-family:var(--display);font-style:italic;font-size:1.05rem;line-height:1.35;color:#776E85;margin:0 0 18px;min-height:2.7em}
.tier .amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 0 18px;border-top:1px solid rgba(36,27,47,.1);border-bottom:1px solid rgba(36,27,47,.1);margin-bottom:18px}
.tier .amount b{font-family:var(--body);font-weight:500;font-size:1.9rem;letter-spacing:-.01em;color:#241B2F;white-space:nowrap}
.tier .amount span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#776E85}
.tier ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;align-content:start;flex:1}
.tier li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.45;color:#332941}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;border-left:1.5px solid var(--gold,#8B7364);border-bottom:1.5px solid var(--gold,#8B7364);transform:rotate(-45deg)}
.tier li.plus{color:#776E85}
.tier .btn,.tier .btn-link{align-self:flex-start;margin-top:auto}
.tier.featured{background:var(--night,#281432);border-color:var(--night,#281432);border-top-color:var(--gold,#AFC7D2)}
.tier.featured h3,.tier.featured .amount b,.tier.featured li{color:#fff}
.tier.featured .tier-tag,.tier.featured .amount span,.tier.featured li.plus{color:rgba(255,255,255,.66)}
.tier.featured .eyebrow{color:#D6C6BB}
.tier.featured .amount{border-color:rgba(255,255,255,.18)}
.tier.featured li::before{border-color:#D6C6BB}
.tier.featured .btn-link{color:#fff!important}
.tier.featured .btn-link::after{color:#D6C6BB}
.light-page .tier *{color:inherit}
.light-page .tier h3{color:#241B2F}
.light-page .tier.featured h3,.light-page .tier.featured li,.light-page .tier.featured .amount b{color:#fff}
.tier-private{margin-top:22px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center;background:#FCFAF8;border:1px solid rgba(36,27,47,.14);border-left:3px solid var(--gold,#8B7364);border-radius:10px;padding:28px 32px}
@media (max-width:760px){.tier-private{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px}}
.tier-private h3{font-family:var(--display);font-weight:500;font-size:1.6rem;margin:0 0 6px;color:#241B2F}
.tier-private p{margin:0;color:#4A4055}
.tier-private .side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (min-width:761px){.tier-private .side{align-items:flex-end;text-align:right}}
.tier-private .side b{font-family:var(--body);font-weight:500;font-size:1.15rem;color:#241B2F}
.member-note{margin:0 0 6px;padding:14px 0 0;border-top:1px solid rgba(36,27,47,.12);font-size:.9rem;line-height:1.5}
.member-note .eyebrow{margin-bottom:6px}
.member-note p{margin:0 0 8px;color:#4A4055}
.member-note a{color:#241B2F;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.aside .member-note{margin-top:18px}

/* Vergleich */
.compare-wrap{margin-top:36px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(36,27,47,.12);border-radius:10px;background:#FCFAF8}
table.compare{display:table;width:100%;min-width:760px;border-collapse:collapse;font-size:.93rem}
table.compare th,table.compare td{padding:14px 16px;text-align:center;border-bottom:1px solid rgba(36,27,47,.1);vertical-align:middle}
table.compare th{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#5C5266!important;background:#F0EAE5}
table.compare th:first-child,table.compare td:first-child{text-align:left;position:sticky;left:0;background:#FCFAF8;min-width:210px;font-weight:500;color:#241B2F!important;box-shadow:1px 0 0 rgba(36,27,47,.08)}
table.compare th:first-child{background:#F0EAE5}
table.compare tr:last-child td{border-bottom:0}
table.compare td .ok{display:inline-block;width:13px;height:7px;border-left:2px solid #8B7364;border-bottom:2px solid #8B7364;transform:rotate(-45deg) translateY(-2px)}
table.compare td .no{color:#B7AFC2}
table.compare th.feat{background:var(--night,#281432);color:#fff!important}
table.compare tbody th{text-align:left;background:#F0EAE5;letter-spacing:.14em}
table.compare td small{display:block;color:#776E85;font-size:.8rem;margin-top:2px}
.compare-hint{font-size:.85rem;color:#776E85;margin:12px 0 0}
.compare-hint a,.tier-private p a,.journey a{color:#241B2F;text-decoration:underline;text-underline-offset:3px}

/* Weg */
.journey{list-style:none;counter-reset:j;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
@media (max-width:900px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.journey{grid-template-columns:minmax(0,1fr)}}
.journey li{counter-increment:j;position:relative;padding:18px 0 18px 46px;border-top:1px solid rgba(36,27,47,.12);min-width:0}
.journey li::before{content:counter(j,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--body);font-size:.72rem;letter-spacing:.16em;color:var(--gold,#8B7364)}
.journey b{display:block;font-weight:500;color:#241B2F;margin-bottom:4px}
.journey span{color:#4A4055;font-size:.93rem;line-height:1.5}
.journey li.now{border-top-color:var(--night,#281432)}
.journey li.now::before{color:var(--night,#281432)}

/* Kompetenz am Zeltweg */
.kompetenz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
@media (max-width:900px){.kompetenz{grid-template-columns:minmax(0,1fr)}}
.kompetenz .card{gap:8px}
.kompetenz .card img{height:34px;width:auto;object-fit:contain;align-self:flex-start;margin-bottom:8px}
.kompetenz .card .who{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8B7364}
.kompetenz .card.self{border-top:3px solid var(--night,#281432)}
.kompetenz .card p{font-size:.93rem}
.kompetenz .card .more{margin-top:auto;padding-top:12px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#241B2F}

/* Startseite Kapitel: ruhige Zahlenzeile */
.mb-row{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.mb-row li{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mb-row li b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;color:#fff;margin-bottom:2px}

/* ============================================================
   v29.1  Zwei Darstellungsfehler
   ============================================================ */

/* 1. Die Wortmarke trug den Chip-Stil.
   Die Unterzeile der Wortmarke steht im HTML als <span class="tag">.
   Die Hilfsklasse .tag ist aber als Chip gedacht (Zeile 2044:
   heller Kasten, Rahmen, Innenabstand). Auf allen Unterseiten
   sass die Unterzeile deshalb in einem cremefarbenen Kasten,
   in der dunklen Fussleiste mit weisser Schrift darauf, Kontrast 1.2.
   Die Wortmarke wird jetzt ausgenommen. */
.light-page .brand .tag,
.light-page .wm .tag,
.brand .tag,
.wm .tag{
  background:none!important;
  border:0!important;
  padding:0!important;
}
.light-page .header .wm .tag{color:#5C5266!important}
.light-page .footer .wm .tag{color:rgba(255,255,255,.75)!important}

/* 2. Die Fussleistenspalte «Behandlungen» hat 26 Einträge und
   überragte die übrigen Spalten. Sie läuft jetzt zweispaltig. */
@media (min-width:900px){
  .footer .cols > div:nth-child(2) ul{
    column-count:2;
    column-gap:26px;
  }
  .footer .cols > div:nth-child(2) li{break-inside:avoid}
}


/* ============================================================
   v30  Design-Feinschliff, Richtung KALEIDOSCOP aesthetic
   Gemessen auf kaleidoscop.ch: Grund rgb(241,237,233),
   Akzent rgb(162,135,118), Buttons mit 10 px Radius.
   Farbwerte sind oben im Stylesheet ersetzt, hier folgen
   Form, Rhythmus und Typografie.
   ============================================================ */

/* Weiche Ecken statt harter Kanten */
.btn,.btn-primary,.btn-ghost,.assist-btn{border-radius:10px}
.card,.svc,.door,.tier,.tier-private,.aside,.compare-wrap,.illu-card,.price-card,.plan{border-radius:12px}
.page-visual img,.ph img,.ch-media,.hf-media img,.er-tile img,figure img{border-radius:14px}
.hero-full .hf-media img{border-radius:0}
.member-note{border-radius:0}

/* Erste Aktion: gefuellter Taupe-Knopf statt dunklem Kasten */
.light-page .header .btn,.light-page .header .btn-primary,
.light-page .btn-primary,.light-page .aside .btn-primary,
.light-page .tier-private .btn-primary{
  background:#A28776!important;border-color:#A28776!important;color:#fff!important;
  border-radius:10px;letter-spacing:.1em;font-weight:500;
}
.light-page .header .btn:hover,.light-page .header .btn-primary:hover,
.light-page .btn-primary:hover,.light-page .aside .btn-primary:hover{
  background:#8B7364!important;border-color:#8B7364!important;
}
.light-page .btn-ghost{border-color:rgba(36,27,47,.28);color:#241B2F}
.light-page .btn-ghost:hover{border-color:#A28776;color:#7A6356}

/* Ruhigere Sperrung. Die Versalien bleiben, das Flattern geht weg. */
.light-page h1,.light-page h2,.light-page h3{letter-spacing:.012em}
.eyebrow,.light-page .eyebrow{letter-spacing:.12em}
.btn,.btn-primary,.btn-ghost{letter-spacing:.1em}
.light-page .page-head .breadcrumb{letter-spacing:.1em}
.brand .name{letter-spacing:.2em}
.brand .tag{letter-spacing:.14em}

/* Mehr Luft zwischen den Abschnitten, wie im Vorbild */
.light-page .section{padding:104px 0}
.light-page .section-tight{padding:76px 0}
@media (max-width:760px){
  .light-page .section{padding:64px 0}
  .light-page .section-tight{padding:48px 0}
}

/* Haarlinien statt harter Trennlinien */
.light-page hr,.light-page .page-head{border-color:rgba(36,27,47,.10)}
.light-page table td{border-color:rgba(36,27,47,.09)}
.light-page .card,.light-page .tier,.light-page .aside{border-color:rgba(36,27,47,.11)}

/* Der Trenner unter dem Kopf war ein kraeftiger Balken */
.light-page .header{border-bottom:1px solid rgba(36,27,47,.10)}

/* ============================================================
   v30  Zweite Quelle: clinic utoquai
   Gemessen auf clinicutoquai.ch: Source Sans in Schnitt 300,
   Textfarbe rgb(145,145,145), keine Sperrung im Fliesstext,
   Piktogramme als feine Linien, rund 100 px gross, mit
   ruhiger Beschriftung darunter und viel Weissraum.
   Uebertragen: leichtere Schnitte im Fliesstext und eine
   eigene Piktogramm-Reihe aus den Symbolen, die die Seite
   ohnehin schon mitbringt.
   ============================================================ */

/* Leichtere Schnitte, ruhigerer Fliesstext */
.light-page .prose p,.light-page .lead,.light-page .card p,.light-page .tier li{font-weight:300}
.light-page .lead{letter-spacing:0}
.light-page .prose p{letter-spacing:0;line-height:1.72}

/* Piktogramm-Reihe */
.pikto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px;margin-top:64px;text-align:center}
@media (max-width:900px){.pikto{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px;margin-top:44px}}
.pikto > div{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.pikto svg{width:92px;height:92px;stroke:#A28776;stroke-width:.9;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:opacity .3s,transform .3s}
.pikto > div:hover svg{opacity:1;transform:translateY(-3px)}
@media (max-width:900px){.pikto svg{width:72px;height:72px}}
.pikto b{font-family:var(--body);font-weight:400;font-size:1.05rem;letter-spacing:.01em;display:block}
.pikto span{font-weight:300;font-size:.9rem;line-height:1.55;max-width:22ch}
.pikto a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

/* Grundfall ist der dunkle Grund der Startseite */
.pikto svg{stroke:#D6C6BB}
.pikto b{color:#fff}
.pikto span{color:rgba(255,255,255,.70)}
.pikto a{color:#D6C6BB}
.pikto a:hover{color:#fff}

/* Auf hellem Grund */
.light-page .pikto svg,.light .pikto svg,.section-surface .pikto svg{stroke:#A28776}
.light-page .pikto b,.light .pikto b,.section-surface .pikto b{color:#241B2F}
.light-page .pikto span,.light .pikto span,.section-surface .pikto span{color:#6E6578}
.light-page .pikto a,.light .pikto a,.section-surface .pikto a{color:#7A6356}
.light-page .pikto a:hover{color:#241B2F}

/* Kontrastkorrektur zur Taupe-Palette.
   Das Vorbild setzt Weiss auf rgb(162,135,118); gemessen sind das
   3.35 zu 1 und damit zu wenig fuer Fliesstext. Die Villa nimmt
   denselben Ton eine Spur tiefer, damit Schrift und Flaeche die
   4.5 zu 1 erreichen. Dekorative Linien bleiben heller. */
.light-page .header .btn,.light-page .header .btn-primary,
.light-page .btn-primary,.light-page .aside .btn-primary,
.light-page .tier-private .btn-primary{background:#816A5E!important;border-color:#816A5E!important}
.light-page .header .btn:hover,.light-page .header .btn-primary:hover,
.light-page .btn-primary:hover,.light-page .aside .btn-primary:hover{background:#6F5A4E!important;border-color:#6F5A4E!important}
.light-page .eyebrow,.light-page .card .eyebrow,.light-page .svc .eyebrow,
.light-page .door .eyebrow,.light-page .aside .eyebrow,.light-page .tier .eyebrow,
.light-page .price-card .eyebrow{color:#7A6356}
.light-page .pikto svg,.light .pikto svg,.section-surface .pikto svg{stroke:#9A7E6C}
.light-page table.compare td .ok{border-color:#7A6356}
.light-page .tier li::before{border-color:#7A6356}
/* Auf der dunklen Performance-Karte stand die Zeile im Bereichsgrün */
.light-page .tier.featured .eyebrow,.tier.featured .eyebrow{color:#D6C6BB!important}

/* Nachjustiert nach Clinique La Prairie: dort sind die Knoepfe
   rechtwinklig, bei clinic utoquai ebenfalls. Nur Kaleidoscop
   rundet mit 10 px. Die Villa nimmt die Mitte, eine Spur Rundung,
   damit es crisp bleibt statt weich. Karten und Bilder behalten
   die weichere Kante. */
.btn,.btn-primary,.btn-ghost{border-radius:4px}
.assist-btn{border-radius:999px}

/* La Prairie setzt die zweite Zeile der Schlagzeile kursiv.
   Die Villa macht das im Hero schon, hier auch auf den Unterseiten. */
.light-page .page-head h1 em,.light-page .section h2 em{font-style:italic!important;font-weight:300}

/* ============================================================
   v32  Feste Buchungsleiste
   Alle drei Vorbilder haben eine: clinicutoquai.ch mit
   «Telefonische Beratung | Terminbuchung», kaleidoscop.ch mit
   WhatsApp, Termin und Anrufen, cliniquelaprairie.com mit
   «Book your program» über die ganze Breite. Die Villa hatte
   nur den schwebenden Knopf. Er sitzt jetzt in der Leiste,
   damit unten nicht zwei Elemente um denselben Platz streiten.
   ============================================================ */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:grid;grid-template-columns:1fr auto auto;align-items:stretch;
  background:var(--night,#281432);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -8px 30px rgba(20,10,32,.22);
}
.bookbar > *{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 22px;min-height:56px;
  font-family:var(--body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  transition:background .25s,color .25s;
}
.bookbar .bb-tel{justify-content:flex-start;color:rgba(255,255,255,.8);letter-spacing:.08em}
.bookbar .bb-tel .ic{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none;flex:none}
.bookbar .bb-tel:hover{color:#fff;background:rgba(255,255,255,.06)}
/* La Prairie: weisse Fläche, dunkle Schrift, rechtwinklig */
.bookbar .bb-cta{background:#fff;color:#241B2F;font-weight:500;border-left:1px solid rgba(255,255,255,.12)}
.bookbar .bb-cta:hover{background:#D6C6BB;color:#241B2F}
/* Der Assistent sitzt in der Leiste statt zu schweben */
.bookbar .assist-btn{
  position:static!important;right:auto!important;bottom:auto!important;
  border-radius:0!important;background:transparent!important;
  border:0!important;border-left:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;opacity:1!important;color:rgba(255,255,255,.8)!important;
  padding:15px 22px!important;font-size:.78rem!important;letter-spacing:.12em!important;
}
.bookbar .assist-btn:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;transform:none!important}
.bookbar .assist-btn .k{display:none}
/* Platz, damit die Leiste die Fussleiste nicht verdeckt */
body{padding-bottom:57px}
.assist{bottom:70px}
@media (max-width:720px){
  .bookbar{grid-template-columns:1fr 1fr 1fr}
  .bookbar > *{padding:13px 8px;font-size:.66rem;letter-spacing:.08em;min-height:52px}
  .bookbar .bb-tel{justify-content:center}
  .bookbar .bb-tel span{display:none}
  .bookbar .bb-tel .ic{width:19px;height:19px}
  .bookbar .assist-btn{padding:13px 8px!important;font-size:.66rem!important;letter-spacing:.08em!important}
  body{padding-bottom:53px}
  .assist{bottom:64px}
}
@media (max-width:400px){
  .bookbar > *{font-size:.6rem;padding:13px 4px}
  .bookbar .assist-btn{font-size:.6rem!important;padding:13px 4px!important}
}

/* ============================================================
   v32  Hero nach Clinique La Prairie
   Dort steht die Wortmarke mittig über dem Bild, darunter eine
   Haarlinie und der Ort. Die Schlagzeile steht mittig in
   Versalien, die zweite Zeile kursiv, die Aktion als weisse
   Fläche mit dunkler Schrift.
   ============================================================ */
@media (min-width:761px){
  .hero-full{align-items:center}
  .hero-full .hf-inner{text-align:center;width:100%}
  .hero-full h1{margin-left:auto;margin-right:auto;text-align:center;max-width:20ch}
  .hf-actions{justify-content:center}
  .hero-full .hf-foot{text-align:left}
}
.hero-full h1 em{font-style:italic!important;font-weight:200}
/* Erste Aktion im Hero: weisse Fläche, dunkle Schrift */
.hero-full .btn-primary,.cta-band .btn-primary{
  background:#fff!important;border-color:#fff!important;color:#241B2F!important;
  border-radius:4px;font-weight:500;letter-spacing:.12em;
}
.hero-full .btn-primary:hover,.cta-band .btn-primary:hover{
  background:#D6C6BB!important;border-color:#D6C6BB!important;color:#241B2F!important;
}
/* Ortszeile unter der Wortmarke, mit Haarlinie */
.hero-full .hf-place{
  display:block;margin:22px auto 0;max-width:420px;text-align:center;
  font-family:var(--body);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-full .hf-place::before{
  content:"";display:block;width:78px;height:1px;margin:0 auto 16px;
  background:rgba(255,255,255,.45);
}
@media (max-width:760px){.hero-full .hf-place{margin-top:18px;font-size:.62rem;letter-spacing:.26em}}
/* Der Hero rechnete mit der vollen Fensterhöhe und lief deshalb
   unter die Buchungsleiste. Jetzt zieht er ihre Höhe ab. */
@media (min-width:761px){
  .hero-full{height:calc(100svh - 57px);min-height:640px}
}
@media (max-width:760px){
  .hero-full{padding-bottom:40px}
}

/* ============================================================
   v33  Typografie: Bodoni Moda und Source Sans 3
   Bis hierher lief die ganze Seite auf einer einzigen Schrift,
   Jost, in Schnitten von 200 bis 500. Kein Serifenkontrast,
   überall Versalien, Fliesstext in Haarstrichen. Genau das
   liess sie knapp wirken. Jetzt zwei Schriften mit klarer
   Aufgabenteilung, wie bei allen drei Vorbildern.
   ============================================================ */
:root{
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
}

/* --- Schlagzeilen: die Serife arbeitet, gemischte Schreibung --- */
h1,h2,h3,h4,
.page-head h1,.section h2,.prose h2,.prose h3,
.tier h3,.card h3,.svc h3,.door h3,.kompetenz .card h3,
.maxim p,.statement p,.chapter h2,.cta-band h2,.hero-full h1,
.tier-private h3,.v3-name,.pikto b{
  font-family:var(--display)!important;
  text-transform:none!important;
  font-weight:400!important;
  letter-spacing:.008em!important;
}
h1,.page-head h1{font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.12}
h2,.section h2{font-size:clamp(1.7rem,3vw,2.75rem);line-height:1.16;margin-bottom:.44em}
h3,.tier h3,.card h3{font-size:clamp(1.24rem,1.5vw,1.58rem);line-height:1.24}
h1 em,h2 em,h3 em,.maxim em,.statement em,.hero-full h1 em,.chapter h2 em{
  font-style:italic!important;font-weight:400!important;
}

/* Der Hero bleibt in Versalien, dort trägt es */
.hero-full h1,.v3-hero h1{
  text-transform:uppercase!important;letter-spacing:.045em!important;
  font-weight:400!important;font-size:clamp(2.1rem,5vw,4.6rem);line-height:1.14;
}

/* Grosse Sätze zwischen den Abschnitten */
.maxim p,.statement p,.v3-word p{
  font-weight:400!important;letter-spacing:.01em!important;text-transform:none!important;
  font-size:clamp(1.5rem,2.9vw,2.6rem);line-height:1.32;
}

/* --- Fliesstext: echte Leseschnitte statt Haarstriche --- */
body,p,li,td,th,dd,dt,input,textarea,select,figcaption{
  font-family:var(--body);
}
body{font-weight:400;font-size:1.04rem;line-height:1.68;letter-spacing:0}
.light-page .prose p,.light-page .card p,.light-page .tier li,.prose p,.card p,.tier li{
  font-weight:400!important;letter-spacing:0!important;
}
.lead,.light-page .lead{
  font-family:var(--body)!important;font-weight:400!important;
  font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.62;letter-spacing:0!important;
}
.prose p{line-height:1.74}

/* --- Kleinteile: hier gehören Versalien und Sperrung hin --- */
.eyebrow,.light-page .eyebrow,.breadcrumb,.who,.pikto a,.bookbar > *,
.btn,.btn-primary,.btn-ghost,.btn-link,.tier .amount span,.compare th{
  font-family:var(--body)!important;text-transform:uppercase!important;
}
.eyebrow,.light-page .eyebrow{font-size:.7rem;font-weight:600!important;letter-spacing:.16em!important}
.btn,.btn-primary,.btn-ghost,.btn-link{font-weight:600!important;letter-spacing:.1em!important;font-size:.76rem}
.compare th{font-weight:600!important;letter-spacing:.12em!important}

/* Preise in der Serife, das macht sie wertig */
.tier .amount b,.card .price span,.aside .price,.price-card .amount{
  font-family:var(--display)!important;font-weight:400!important;letter-spacing:0!important;
}
.tier .amount b{font-size:2.15rem}
.aside .price{font-size:1.9rem}

/* Wortmarke */
.brand .name,.v3-name{
  font-family:var(--display)!important;font-weight:400!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
}
.brand .tag,.v3-sub{font-family:var(--body)!important;font-weight:600!important}

/* Piktogramm-Reihe */
.pikto b{font-size:1.14rem;letter-spacing:.01em!important}
.pikto span{font-family:var(--body);font-weight:400}

/* Tabellen */
table td,table th{font-family:var(--body)}
.light-page table td{font-weight:400}

/* Der Hero wurde mit der grösseren Serife zu eng: die Fusszeile
   lief unter die Buchungsleiste. Sie sitzt jetzt oberhalb. */
@media (min-width:761px){
  .hero-full .hf-foot{padding-bottom:26px}
  .hero-full .hf-place{margin-top:30px}
  .hero-full h1{margin-bottom:30px}
}

/* ============================================================
   v33  Bewegung
   Ruhige, weiche Übergänge statt harter Einblendungen.
   Alles respektiert «Bewegung reduzieren» im Betriebssystem.
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* Bilder fahren beim Erscheinen sanft auf Grösse */
.page-visual img,.ph img,.kompetenz .card img{
  transform:scale(1.06);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.reveal.in .page-visual img,.page-visual.in img,.reveal.in .ph img{transform:scale(1)}

/* Karten heben sich beim Zeigen leicht */
.card,.tier,.kompetenz .card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.card:hover,.kompetenz .card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(36,27,47,.10)}
.tier:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(36,27,47,.13)}
.tier.featured:hover{box-shadow:0 22px 52px rgba(20,10,32,.34)}

/* Piktogramme */
.pikto > div{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pikto > div:hover{transform:translateY(-6px)}

/* Zahlen, die beim Erscheinen hochzählen, brauchen feste Breite */
.count{font-variant-numeric:tabular-nums}

/* Sanftes Springen zu Ankern */
html{scroll-behavior:smooth}

/* Fortschrittslinie am oberen Rand */
.readbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:220;
  background:linear-gradient(90deg,#A28776,#D6C6BB);transition:width .12s linear}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.card,.tier,.pikto > div,.page-visual img{transition:none!important;transform:none!important}
  .readbar{display:none}
}

/* ---- Klebender Abschnitt, Apple-Prinzip:
   das Bild bleibt stehen, der Text läuft durch ---- */
.stick{position:relative;background:var(--night,#281432);color:#fff;padding:0}
.stick-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:1320px;margin:0 auto}
.stick-media{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stick-fig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;transform:scale(.94);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.stick-fig.on{opacity:1;transform:none}
.stick-fig svg{width:150px;height:150px;stroke:#D6C6BB;stroke-width:.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stick-fig b{font-family:var(--display);font-weight:400;font-size:3.1rem;letter-spacing:.01em;color:#fff}
.stick-fig .unit{font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.stick-steps{padding:14vh 0}
.stick-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:0 max(28px,4vw);
  opacity:.3;transition:opacity .6s ease}
.stick-step.on{opacity:1}
.stick-step .eyebrow{color:#D6C6BB!important;margin-bottom:16px}
.stick-step h3{font-family:var(--display)!important;font-weight:400!important;font-size:clamp(1.6rem,2.5vw,2.3rem);color:#fff;margin:0 0 16px;letter-spacing:.008em!important}
.stick-step p{margin:0;max-width:36ch;color:rgba(255,255,255,.74);font-weight:400;line-height:1.7}
@media (max-width:900px){
  .stick-in{grid-template-columns:minmax(0,1fr)}
  .stick-media{height:52svh;top:0}
  .stick-fig svg{width:92px;height:92px}
  .stick-fig b{font-size:2.2rem}
  .stick-steps{padding:6vh 0}
  .stick-step{min-height:0;padding:44px max(24px,5vw)}
  .stick-step,.stick-step.on{opacity:1}
}
/* Der klebende Abschnitt stand auf hellem Grund, weil die
   .light-page-Regeln die Flaeche zurueckgesetzt haben.
   Weisse Schrift auf Creme war die Folge. */
.light-page .stick,.stick{background:var(--night,#281432)!important;color:#fff}
.light-page .stick *,.stick *{color:inherit}
.light-page .stick .eyebrow,.stick .eyebrow{color:#D6C6BB!important}
.light-page .stick h3,.stick h3,.light-page .stick b,.stick .stick-fig b{color:#fff!important}
.light-page .stick p,.stick p{color:rgba(255,255,255,.74)!important}
.light-page .stick .unit,.stick .unit{color:rgba(255,255,255,.6)!important}
.light-page .stick svg,.stick .stick-fig svg{stroke:#D6C6BB!important;fill:none!important}

/* ============================================================
   v34.0 · 11.09.2026 · Villa R1 Longevity
   Fünfspaltiges Piktogramm-Raster für die Architektur am Zeltweg.
   Ohne Inline-Style, damit die Umbrüche auf dem Telefon greifen.
   ============================================================ */
.pikto-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:48px 22px}
.pikto-5 svg{width:76px;height:76px}
.pikto-5 b{font-size:1.02rem;letter-spacing:.03em!important}
.pikto-5 span{max-width:20ch}
@media (max-width:1100px){.pikto-5{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}}
@media (max-width:700px){.pikto-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px}
  .pikto-5 svg{width:62px;height:62px}}
@media (max-width:359px){.pikto-5{grid-template-columns:minmax(0,1fr)}}
/* Drei Stufen statt vier: eigene Klasse statt Inline-Style, damit die
   Umbrüche auf Tablet und Telefon greifen. */
.tiers-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.tiers-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tiers-3{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   v35.0 · 11.09.2026 · Boutique
   Produktraster für timeblock und Even Realities. Ruhig gehalten:
   ein Bild, ein Name, die Grössen als Liste, kein Warenkorb.
   ============================================================ */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:40px;align-items:stretch}
@media (max-width:1050px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (max-width:660px){.shop-grid{grid-template-columns:minmax(0,1fr)}}

.prod{display:flex;flex-direction:column;min-width:0;background:#FCFAF8;border:1px solid rgba(36,27,47,.10);
  border-top:2px solid rgba(36,27,47,.14);transition:box-shadow .35s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1)}
.prod:hover{box-shadow:0 18px 44px rgba(20,10,32,.10);transform:translateY(-2px)}
.prod-img{position:relative;background:#fff;border-bottom:1px solid rgba(36,27,47,.08);aspect-ratio:1/1;overflow:hidden}
.prod-img img{width:100%;height:100%;max-width:100%;object-fit:contain;padding:14px;display:block}
.prod-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;gap:0}
.prod-body .eyebrow{margin-bottom:10px}
.prod h3{font-family:var(--display)!important;font-weight:400!important;font-size:1.24rem;line-height:1.25;
  margin:0 0 8px;letter-spacing:.01em;color:#241B2F}
.prod-tag{font-size:.92rem;line-height:1.55;color:#4A4055;margin:0 0 16px}
.prod-var{margin:0 0 14px;padding:0;border-top:1px solid rgba(36,27,47,.10)}
.prod-var div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid rgba(36,27,47,.07)}
.prod-var dt{font-size:.88rem;color:#4A4055;margin:0}
.prod-var dd{margin:0;font-family:var(--display);font-size:1.02rem;color:#241B2F;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.prod-meta{font-size:.83rem;line-height:1.5;color:#6B6275;margin:0 0 12px}
.prod-more{margin:0 0 16px;border:0}
.prod-more summary{cursor:pointer;list-style:none;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#816A5E;padding:6px 0}
.prod-more summary::-webkit-details-marker{display:none}
.prod-more summary::after{content:" +";letter-spacing:0}
.prod-more[open] summary::after{content:" –"}
.prod-more p{font-size:.82rem;line-height:1.55;color:#6B6275;margin:4px 0 0}
.prod-buy{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.prod-buy .btn-link{font-size:.7rem}
.prod-note{font-size:.72rem;letter-spacing:.06em;color:#7A4A52;margin:0 0 10px;text-transform:uppercase;font-weight:600}

/* Bestellweg */
.order{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(36,27,47,.12);
  border:1px solid rgba(36,27,47,.12);margin-top:38px}
.order > div{background:#FCFAF8;padding:22px 20px 24px}
.order b{display:block;font-family:var(--display);font-weight:400;font-size:1.08rem;margin-bottom:6px;color:#241B2F}
.order span{display:block;font-size:.88rem;line-height:1.55;color:#4A4055}
.order .step{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#816A5E;margin-bottom:10px}
@media (max-width:900px){.order{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.order{grid-template-columns:minmax(0,1fr)}}

/* dunkle Flächen */
.light-page .prod h3,.light-page .prod-var dd{color:#241B2F}

/* Boutique-Streifen auf der Startseite: vier kleine Kacheln, ein Link. */
.shop-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
@media (max-width:900px){.shop-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.shop-strip{grid-template-columns:minmax(0,1fr)}}
.shop-strip a{display:flex;flex-direction:column;min-width:0;background:#FCFAF8;
  border:1px solid rgba(36,27,47,.10);text-decoration:none;
  transition:box-shadow .35s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1)}
.shop-strip a:hover{box-shadow:0 16px 38px rgba(20,10,32,.10);transform:translateY(-2px)}
.shop-strip .sh-img{background:#fff;aspect-ratio:1/1;border-bottom:1px solid rgba(36,27,47,.08);overflow:hidden}
.shop-strip img{width:100%;height:100%;max-width:100%;object-fit:contain;padding:12px;display:block}
.shop-strip .sh-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.shop-strip b{font-family:var(--display)!important;font-weight:400!important;font-size:1.02rem;
  line-height:1.25;color:#241B2F;letter-spacing:.01em}
.shop-strip span{font-size:.8rem;color:#6B6275;line-height:1.45}
.shop-strip .sh-price{margin-top:auto;padding-top:8px;font-family:var(--display);font-size:.98rem;color:#241B2F;
  font-variant-numeric:tabular-nums}
/* Wenn ein Produktbild nicht laedt, bleibt eine ruhige Flaeche mit dem Namen. */
.prod-img.noimg,.sh-img.noimg{display:flex;align-items:center;justify-content:center;background:#F6F2EF}
.prod-img.noimg::after,.sh-img.noimg::after{content:attr(data-name);font-family:var(--display);
  font-size:1rem;color:#8B7364;text-align:center;padding:18px;line-height:1.35}
/* Even-Realities-Karten: hohes Bildformat, weil die Aufnahmen Portraits sind. */
.shop-grid.tall .prod-img{aspect-ratio:3/4}
.shop-grid.tall .prod-img img{object-fit:cover;padding:0}

/* ============================================================
   v36.0 · 11.09.2026 · Ambiente
   Der Raum soll auch auf dem Bildschirm einer sein. Kein neues
   Design, sondern Tiefe: Licht auf den Flächen, ein ruhiges
   Driften darin, weiche Kanten an den Bildern. Alles Overlay,
   nichts davon berührt Schrift oder Kontrast. Bewegung nur,
   wenn das System sie zulässt.
   ============================================================ */

/* 1. Der helle Grund bekommt Tiefe statt einer flachen Fläche. */
body.light-page{
  background-image:
    radial-gradient(58% 42% at 18% 8%, rgba(214,198,187,.22), transparent 68%),
    radial-gradient(46% 38% at 88% 30%, rgba(175,199,210,.13), transparent 66%),
    radial-gradient(70% 50% at 50% 104%, rgba(138,111,90,.09), transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* 2. Dunkle Bänder: ein Lichtschleier, der sich sehr langsam bewegt. */
.cta-band,.stick,.chapter,.footer{position:relative;overflow:hidden}
.cta-band::after,.stick::after,.footer::after{
  content:"";position:absolute;inset:-35%;pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 38% at 28% 22%, rgba(214,198,187,.15), transparent 62%),
    radial-gradient(38% 42% at 78% 74%, rgba(175,199,210,.11), transparent 64%);
  animation:vz-drift 72s ease-in-out infinite alternate;
}
.cta-band > *,.footer > *,.stick > *{position:relative;z-index:1}
@keyframes vz-drift{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.06)}
}

/* 3. Helle Bänder: derselbe Gedanke, nur wärmer und schwächer. */
.section-surface{position:relative;overflow:hidden}
.section-surface::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 36% at 22% 18%, rgba(214,198,187,.30), transparent 64%),
    radial-gradient(36% 40% at 82% 80%, rgba(175,199,210,.16), transparent 66%);
  animation:vz-drift 88s ease-in-out infinite alternate;
}
.section-surface > *{position:relative;z-index:1}

/* 4. Vollbild-Kapitel: weiche Kante statt harter Schnitt. */
.chapter .ch-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%, transparent 42%, rgba(14,10,18,.42) 100%);
}

/* 5. Bilder atmen. Sehr wenig, sehr langsam. */
.page-visual img,.ph.has-img img,.prod-img img,.sh-img img{
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1),filter 1.4s ease;
}
.page-visual:hover img,.ph.has-img:hover img{transform:scale(1.018)}
.page-visual img,.ph.has-img img{filter:saturate(.97) contrast(1.02)}

/* 6. Das Korn liegt auf dunklen Flächen etwas satter. */
.cta-band::before,.stick::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23g)'/></svg>");
}

@media (prefers-reduced-motion:reduce){
  .cta-band::after,.stick::after,.footer::after,.section-surface::after{animation:none}
  .page-visual:hover img,.ph.has-img:hover img{transform:none}
}

/* Kleiner Text auf hellem Grund: #776E85 erreicht auf Creme nur 4.18 zu 1.
   #6E6579 liegt auf allen drei hellen Gruenden ueber 4.5 und sieht gleich aus. */
.light-page .compare-hint,.light-page .prod-meta,.light-page .prod-more p,
.light-page table.compare td small,.light-page .journey span{color:#6E6579}

/* Linkfarbe auf hellen Seiten. --link stand global auf Weiss, das ist die
   Farbe der dunklen Grundvariante. Auf hellem Grund war jeder einfache Link
   im Fliesstext unsichtbar (Kontrast 1.05). */
body.light-page{--link:#241B2F}
.light-page main p a:not([class]),.light-page .lead a:not([class]),
.light-page .prose a:not([class]),.light-page .order a:not([class]){
  color:#241B2F;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#A28776;text-decoration-thickness:1px;
}
.light-page main p a:not([class]):hover,.light-page .lead a:not([class]):hover{
  text-decoration-color:#241B2F;
}
/* Brotkrume: #8A7F95 auf Creme erreicht nur 3.28 zu 1. */
.light-page .breadcrumb,.light-page .breadcrumb a{color:#655C70}
.shop-strip a{color:#241B2F}

/* ============================================================
   v36.1 · 12.09.2026 · Buchungsleiste mit E-Mail und WhatsApp
   Fünf Wege in einer Zeile. Auf dem Telefon zwei Reihen: oben
   die weisse Fläche, darunter vier Symbole gleicher Breite.
   ============================================================ */
.bookbar{grid-template-columns:1fr auto auto auto auto}
.bookbar .bb-mail,.bookbar .bb-wa{
  color:rgba(255,255,255,.8);letter-spacing:.08em;
  border-left:1px solid rgba(255,255,255,.12);
}
.bookbar .bb-mail:hover,.bookbar .bb-wa:hover{color:#fff;background:rgba(255,255,255,.06)}
.bookbar .bb-mail .ic,.bookbar .bb-wa .ic,.bookbar .assist-btn .ic{
  width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none;flex:none;
}
.bookbar .assist-btn .ic{stroke:currentColor;fill:none}

@media (max-width:720px){
  .bookbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bookbar .bb-cta{grid-column:1 / -1;order:-1;border-left:0;
    border-bottom:1px solid rgba(255,255,255,.12);min-height:48px}
  .bookbar .bb-tel,.bookbar .bb-mail,.bookbar .bb-wa{justify-content:center;border-left:0}
  .bookbar .bb-mail,.bookbar .bb-wa{border-left:1px solid rgba(255,255,255,.10)}
  .bookbar .assist-btn{border-left:1px solid rgba(255,255,255,.10)!important}
  .bookbar .bb-mail .ic,.bookbar .bb-wa .ic,.bookbar .assist-btn .ic{width:19px;height:19px}
  body{padding-bottom:101px}
  .assist{bottom:112px}
}
@media (max-width:560px){
  .bookbar .bb-mail span,.bookbar .bb-wa span,.bookbar .assist-btn .lbl{display:none}
  .bookbar > *{gap:0}
}
/* Ausführliche Beschreibung im Produkt: mehrere Absätze im Aufklappmenü. */
.prod-long p + p{margin-top:9px}
.prod-long[open] summary{margin-bottom:2px}
.prod-more + .prod-more{margin-top:-8px}

/* ============================================================
   v38.0 · 12.09.2026 · Das Signet
   Der Abschluss jeder Seite. Vorher: ein einzelnes riesiges
   Konturwort in viel leerer Fläche. Jetzt eine gesetzte Marke:
   Wasserzeichen im Hintergrund, Monogramm zwischen zwei
   Haarlinien, die Wortmarke massiv statt hohl, darunter die
   Adresse in Kapitälchen. Alles zeichnet sich beim Erscheinen.
   ============================================================ */
.signet{
  position:relative;isolation:isolate;overflow:hidden;
  padding:96px 24px 46px!important;
  display:flex;flex-direction:column;align-items:center;gap:0;
  color:inherit!important;-webkit-text-stroke:0!important;
  letter-spacing:normal!important;font-size:inherit!important;line-height:1.2!important;
}
/* 1. Wasserzeichen: das alte Konturwort, jetzt als Textur dahinter */
.signet .sg-water{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.98);
  z-index:0;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:clamp(4.4rem,15vw,15rem);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(214,198,187,.075);
  -webkit-mask-image:radial-gradient(62% 92% at 50% 50%,#000 28%,transparent 86%);
  mask-image:radial-gradient(62% 92% at 50% 50%,#000 28%,transparent 86%);
  transition:transform 2.4s cubic-bezier(.19,1,.22,1),opacity 1.6s ease;opacity:0;
}
.signet.on .sg-water{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Die Wortmarke braucht freien Grund, damit sie massiv wirkt. */
.signet .fw-line{text-shadow:0 0 34px rgba(40,20,50,.9),0 0 14px rgba(40,20,50,.8)}

/* 2. Monogramm zwischen zwei Haarlinien */
.signet .sg-crest{position:relative;z-index:1;display:flex;align-items:center;
  gap:clamp(18px,4vw,44px);width:100%;justify-content:center;margin-bottom:34px}
.signet .sg-rule{flex:0 1 min(230px,26vw);height:1px;display:block;
  background:linear-gradient(90deg,transparent,rgba(214,198,187,.45));
  transform:scaleX(0);transform-origin:right center;
  transition:transform 1.5s cubic-bezier(.19,1,.22,1) .15s}
.signet .sg-crest .sg-rule:last-child{background:linear-gradient(90deg,rgba(214,198,187,.45),transparent);
  transform-origin:left center}
.signet.on .sg-rule{transform:scaleX(1)}
.signet .sg-mono{width:clamp(52px,7vw,76px);height:auto;flex:none;overflow:visible}
.signet .sg-mono circle,.signet .sg-mono path{fill:none;stroke:rgba(214,198,187,.85);
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.signet .sg-mono .r1{stroke-width:1;stroke-dasharray:190;stroke-dashoffset:190;
  transition:stroke-dashoffset 2s cubic-bezier(.19,1,.22,1) .1s}
.signet .sg-mono .r2{stroke-width:.6;stroke:rgba(214,198,187,.32);opacity:0;
  transition:opacity 1.2s ease 1.1s}
.signet .sg-mono .v,.signet .sg-mono .z{stroke-width:1.4;stroke-dasharray:120;
  stroke-dashoffset:120;transition:stroke-dashoffset 1.5s cubic-bezier(.19,1,.22,1) .45s}
.signet .sg-mono .z{transition-delay:.62s}
.signet.on .sg-mono .r1{stroke-dashoffset:0}
.signet.on .sg-mono .r2{opacity:1}
.signet.on .sg-mono .v,.signet.on .sg-mono .z{stroke-dashoffset:0}

/* 3. Die Wortmarke: massiv gesetzt, nicht hohl */
.signet .fw-line{position:relative;z-index:1;display:block;overflow:visible;
  font-family:var(--display);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.35rem,3.6vw,3.05rem);line-height:1.05;
  letter-spacing:clamp(.2em,.62vw,.4em);
  color:#D6C6BB;-webkit-text-stroke:0;text-indent:clamp(.2em,.62vw,.4em)}
.signet .fw-ch{display:inline-block;transform:translateY(70%) scaleY(1.06);opacity:0;
  transition:transform 1.15s cubic-bezier(.19,1,.22,1),opacity .9s ease}
.signet.on .fw-ch{transform:none;opacity:1}
.signet .fw-sp{display:inline-block;width:.5em}

/* 4. Adresse in Kapitälchen, mit eigener Haarlinie darüber */
.signet .sg-sub{position:relative;z-index:1;margin-top:26px;padding-top:20px;
  font-family:var(--body);font-weight:400;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(214,198,187,.52);text-align:center}
.signet .sg-sub::before{content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  width:min(340px,56vw);height:1px;background:rgba(214,198,187,.28);
  transition:transform 1.4s cubic-bezier(.19,1,.22,1) .5s}
.signet.on .sg-sub::before{transform:translateX(-50%) scaleX(1)}
.signet::after{display:none!important}

@media (max-width:760px){
  .signet{padding:60px 20px 34px!important}
  .signet .sg-crest{margin-bottom:26px;gap:14px}
  .signet .sg-rule{flex:0 1 22vw}
  .signet .fw-line{letter-spacing:.18em;text-indent:.18em}
  .signet .sg-sub{margin-top:20px;padding-top:16px;font-size:.56rem;letter-spacing:.22em}
}
@media (prefers-reduced-motion:reduce){
  .signet .sg-water,.signet .fw-ch,.signet .sg-rule,.signet .sg-sub::before,
  .signet .sg-mono .r1,.signet .sg-mono .r2,.signet .sg-mono .v,.signet .sg-mono .z{transition:none}
  .signet .sg-water{opacity:1;transform:translate(-50%,-50%)}
  .signet .fw-ch{transform:none;opacity:1}
  .signet .sg-rule{transform:scaleX(1)}
  .signet .sg-sub::before{transform:translateX(-50%) scaleX(1)}
  .signet .sg-mono .r1,.signet .sg-mono .v,.signet .sg-mono .z{stroke-dashoffset:0}
  .signet .sg-mono .r2{opacity:1}
}


/* ===================== v41.0 · Wortweise Enthuellung, breiter eingesetzt =====================
   Der Effekt der Startseite ("Villa Zeltweg ist die Boutique-Praxis …") laeuft jetzt auf
   allen Bildschirmgroessen und zusaetzlich auf ausgezeichneten Absaetzen im ganzen Haus.
   Die gedaempfte Ruhelage haengt an html.words-on: dieses Kennzeichen setzt das Skript erst,
   nachdem es die Woerter erfolgreich getrennt hat. Ohne Skript bleibt jeder Text voll lesbar. */
html.words-on .w{opacity:var(--w-dim,.22);transition:opacity .55s cubic-bezier(.2,.7,.2,1)}
html.words-on .w.on{opacity:1}
html.words-on .statement p .w,
html.words-on .statement.light p .w{opacity:var(--w-dim,.18);transition:opacity .55s cubic-bezier(.2,.7,.2,1)}
html.words-on .statement p .w.on,
html.words-on .statement.light p .w.on{opacity:1}

/* Ruhelage je nach Grund: auf hellem Porzellan darf sie etwas kraeftiger sein */
.statement.light{--w-dim:.17}
.cta-band{--w-dim:.26}
.light-page .section,.light-page .section-tight,.light-page .section-surface{--w-dim:.24}
.section,.section-tight,.section-surface{--w-dim:.22}

/* Ausgezeichnete Woerter behalten ihre Farbe, jetzt ueber em statt ueber .w.em */
.statement.light p em{color:#7A6356!important;font-style:normal}
.light-page .statement.light p em{color:var(--area-text,#7A6356)!important}
.statement p em .w,.cta-band p.lead em .w,.section p.lead em .w{color:inherit}

/* Absaetze, die den Effekt tragen, bekommen etwas mehr Luft und Ruhe */
.cta-band p.lead,.section > .wrap > p.lead,.section-tight > .wrap > p.lead{
  transition:color .4s ease}

/* Handy und Tablet: derselbe Effekt, nur eine Spur heller in der Ruhelage,
   damit der Text auch beim Anhalten mitten im Verlauf angenehm lesbar bleibt. */
@media (max-width:760px){
  .statement.light{--w-dim:.26}
  .statement{--w-dim:.26}
  .cta-band{--w-dim:.32}
  .section,.section-tight,.section-surface{--w-dim:.3}
  html.words-on .w{transition-duration:.42s}
}

/* Ruhige Bewegung: wer sie abbestellt hat, sieht alles sofort und vollstaendig */
@media (prefers-reduced-motion:reduce){
  html.words-on .w,html.words-on .statement p .w,html.words-on .statement.light p .w{
    opacity:1!important;transition:none!important}
}
/* Beim Drucken ebenfalls alles sichtbar */
@media print{html.words-on .w{opacity:1!important}}

/* v41.0 · Nachweiskarte bricht auf sehr schmalen Geraeten sauber um (320 px) */
.cert,.cert h3,.cert li,.cert .meta,.cert .foot{min-width:0;overflow-wrap:break-word}
.cert h3{hyphens:auto}
@media (max-width:420px){
  .cert{padding:26px 20px}
  .cert h3{font-size:1.28rem;line-height:1.25}
}

/* ===== v44.0: Drei Wege, Villa Assessment, Membership-Ausbau, Konzeptseiten, Villa Private ===== */
.pikto-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.pikto-3{grid-template-columns:1fr}}
.btn-long{white-space:normal;text-align:center;line-height:1.35}
.pikto-cta{margin:34px 0 0;text-align:center;font-size:.98rem;color:inherit;opacity:.85}
.pikto-cta a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tl{margin:22px 0 8px;padding:22px 22px 14px;background:#FCFAF8;border:1px solid rgba(36,27,47,.14);border-radius:10px}
.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl-svg{display:block;width:100%;height:auto}
@media(max-width:640px){.tl-svg{min-width:640px}}
.tl .table-hint{display:none}
@media(max-width:640px){.tl .table-hint{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:0 0 10px}}
.light-page .aside .btn,.light-page .aside .btn:visited{text-decoration:none}
.tl-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:10px 0 0;font-size:.85rem;color:#4A4055}
.tl-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#281432;margin-right:8px;vertical-align:middle}
.tl-legend i.g{background:#8B7364}
.tl-legend i.o{background:#FCFAF8;box-shadow:0 0 0 1.5px #281432}
.tl-legend i.b{width:20px;height:8px;border-radius:4px;background:#EAE1D6;box-shadow:0 0 0 1px #8B7364}
@media(max-width:640px){.tl{padding:14px 12px 10px}}
.va-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 8px}
@media(max-width:900px){.va-cards{grid-template-columns:1fr}}
.va-cards .card{gap:8px}
.va-cards .rank{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8B7364;font-weight:600}
.va-cards .tag{font-size:.8rem;color:#776E85}
.va-cards ul{margin:4px 0 0;padding-left:18px;color:#4A4055;font-size:.92rem}
.va-cards .amount{font-family:var(--body);font-weight:500;font-size:1.25rem;color:#241B2F;margin-top:auto;padding-top:10px}
.va-cards a{color:#241B2F;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.va-sum{margin-top:18px;padding-top:14px;border-top:1px solid rgba(36,27,47,.12);font-size:.85rem;color:#776E85}
.va-sum span{display:inline-block;margin:3px 8px 3px 0;padding:3px 10px;background:#F2EEEA;border-radius:999px;color:#4A4055}
.plan12{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px}
@media(max-width:900px){.plan12{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.plan12{grid-template-columns:1fr}}
.plan12 > div{background:#FCFAF8;border:1px solid rgba(36,27,47,.14);border-radius:10px;padding:18px 18px 16px;min-width:0}
.plan12 > div.k{border-top:3px solid #8B7364}
.plan12 b{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem;color:#241B2F;margin-bottom:2px}
.plan12 .tag{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8B7364;margin-bottom:8px}
.plan12 ul{margin:0;padding-left:18px;color:#4A4055;font-size:.92rem;line-height:1.5}
.mj{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:32px}
@media(max-width:900px){.mj{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.mj{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mj > div{background:#FCFAF8;border:1px solid rgba(36,27,47,.14);border-radius:10px;padding:14px 12px;font-size:.85rem;line-height:1.4;color:#4A4055;min-width:0}
.mj > div.k{border-color:#8B7364}
.mj b{display:block;font-family:var(--display);font-weight:500;font-size:1.5rem;color:#8B7364;line-height:1}
.mj strong{display:block;font-weight:600;color:#241B2F;margin:6px 0 4px}
.upg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:32px;border:1px solid rgba(36,27,47,.14);border-radius:10px;overflow:hidden;background:#FCFAF8}
@media(max-width:900px){.upg{grid-template-columns:1fr}}
.upg > div{padding:24px 22px;border-left:1px solid rgba(36,27,47,.12);min-width:0}
.upg > div:first-child{border-left:0}
@media(max-width:900px){.upg > div{border-left:0;border-top:1px solid rgba(36,27,47,.12)}.upg > div:first-child{border-top:0}}
.upg .plus{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8B7364;font-weight:600;display:block;margin-bottom:6px;min-height:1.2em}
.upg h3{margin:0 0 2px;font-size:1.25rem}
.upg .p{font-family:var(--body);font-weight:500;color:#241B2F;margin-bottom:12px}
.upg ul{margin:0;padding-left:18px;color:#4A4055;font-size:.92rem;line-height:1.5}
.mt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px}
@media(max-width:900px){.mt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mt{grid-template-columns:1fr}}
.mt .card{gap:4px}
.mt .card h4{margin:12px 0 4px;font-family:var(--body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8B7364;font-weight:600}
.mt .card ul{margin:0;padding-left:18px;color:#4A4055;font-size:.92rem;line-height:1.5}
.mt .card .who{font-family:var(--display);font-size:1.3rem;color:#241B2F}
table.compare tbody th{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:none;color:#241B2F!important;background:#F0EAE5}

/* ============================================================
   v45.0 · Shop mit Warenkorb, Goldener Oktober, Rezensionen
   ============================================================ */
:root{--vz-ink:#241B2F;--vz-soft:#5C5266;--vz-line:rgba(36,27,47,.12);--vz-paper:#FBF9F7;--vz-linen:#F2EEEA;--vz-gold:#A28776;--vz-steel:#73859F;--vz-deep:#1B0D2E}

/* Aktionsleiste */
.promo-bar{position:relative;z-index:220;background:var(--vz-deep);color:#EDE6DC;text-align:center;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.promo-bar a{display:block;padding:9px 18px;color:#EDE6DC;text-decoration:none}
.promo-bar a:hover{text-decoration:none;color:#fff}
.promo-bar b{color:#D9C3A5;font-weight:600}
.promo-bar .pb-go{border-bottom:1px solid rgba(217,195,165,.6);margin-left:10px;white-space:nowrap}
@media (max-width:760px){.promo-bar{font-size:.66rem;letter-spacing:.08em}.promo-bar .pb-long{display:none}}

/* Warenkorb-Knopf */
.topbar .hdr-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
.hdr-right .cta-solo{grid-column:auto}
.cart-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(237,241,244,.28);background:transparent;color:inherit;cursor:pointer;transition:background .2s,transform .2s}
.cart-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.header .cart-btn{color:#EDF1F4}
.cart-btn:hover{background:rgba(237,241,244,.08)}
.cart-btn .cart-n{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--vz-gold);color:#fff;font-size:.66rem;font-weight:700;line-height:19px;text-align:center;opacity:0;transform:scale(.6);transition:all .25s}
.cart-btn.has .cart-n{opacity:1;transform:scale(1)}
.cart-btn.bump{animation:vzbump .5s}
@keyframes vzbump{30%{transform:scale(1.15)}60%{transform:scale(.95)}}

/* Schublade */
.cart-drawer{position:fixed;inset:0;z-index:400;pointer-events:none}
.cart-drawer.on{pointer-events:auto}
.cd-scrim{position:absolute;inset:0;background:rgba(27,13,46,.42);opacity:0;transition:opacity .3s}
.cart-drawer.on .cd-scrim{opacity:1}
.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--vz-paper);color:var(--vz-ink);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .42s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 60px rgba(27,13,46,.18)}
.cart-drawer.on .cd-panel{transform:none}
.cd-head{display:flex;justify-content:space-between;align-items:center;padding:24px 26px 18px;border-bottom:1px solid var(--vz-line)}
.cd-head h2{font-size:1.5rem!important;margin:0;color:var(--vz-ink)}
.cd-x{background:none;border:0;font-size:1.8rem;line-height:1;color:var(--vz-ink);cursor:pointer;padding:4px 8px}
.cd-body{flex:1;overflow:auto;padding:8px 26px}
.cd-empty{color:var(--vz-soft);margin:30px 0}
.cd-item{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--vz-line)}
.cd-img{width:72px;height:72px;background:#fff;border:1px solid var(--vz-line);border-radius:4px;overflow:hidden}
.cd-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.cd-info b{display:block;font-weight:600;font-size:.92rem;line-height:1.35;color:var(--vz-ink)}
.cd-info span{display:block;font-size:.8rem;color:var(--vz-soft)}
.cd-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.cd-price{font-family:var(--display);font-size:1.02rem;color:var(--vz-ink)}
.cd-rm{background:none;border:0;padding:6px 0 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vz-soft);cursor:pointer}
.cd-rm:hover{color:var(--vz-ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--vz-line);border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:32px;height:32px;border:0;background:none;font-size:1rem;color:var(--vz-ink);cursor:pointer}
.qty button:hover{background:var(--vz-linen)}
.qty span{min-width:26px;text-align:center;font-weight:600;font-size:.9rem;color:var(--vz-ink)}
.cd-foot{padding:18px 26px 26px;border-top:1px solid var(--vz-line);background:#fff}
.cd-sum{display:flex;justify-content:space-between;font-size:.92rem;color:var(--vz-soft);margin:4px 0}
.cd-total{font-size:1.06rem;color:var(--vz-ink);font-weight:600;margin:10px 0 6px}
.cd-total span:last-child{font-family:var(--display);font-weight:400;font-size:1.3rem}
.cd-hint{font-size:.8rem;color:var(--vz-steel);margin:2px 0 6px}
.cd-klarna{font-size:.82rem;color:var(--vz-soft);margin:8px 0 14px}
.cd-go{width:100%;justify-content:center;margin:6px 0 10px}
.cd-pay{font-size:.76rem;color:var(--vz-soft);text-align:center;margin:2px 0}
.cd-cont{display:block;margin:10px auto 0;background:none;border:0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vz-ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.cd-fail{margin-top:14px;padding:14px;border:1px solid var(--vz-line);border-radius:6px;font-size:.84rem;color:var(--vz-ink)}
.cd-fail .btn{margin-top:8px}
html.cd-lock{overflow:hidden}
.cart-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--vz-deep);color:#fff;padding:12px 22px;border-radius:999px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:all .35s;z-index:450}
.cart-toast.on{opacity:1;transform:translate(-50%,0)}
.klarna-mark{display:inline-block;background:#FFA8CD;color:#17120F;font-weight:700;font-size:.72rem;letter-spacing:0;padding:2px 7px;border-radius:4px;font-family:Arial,Helvetica,sans-serif;text-transform:none;vertical-align:1px}

/* Shop: Kopf, Vertrauen, Kategorien */
.shop-head{text-align:center}
.shop-head .lead{margin-left:auto;margin-right:auto;max-width:62ch}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:26px auto 0;padding:0;list-style:none;font-size:.84rem;color:var(--vz-soft)}
.trust li{display:flex;align-items:center;gap:8px}
.trust .stars{color:#C9A227;letter-spacing:.08em}
.trust a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cat-nav{position:sticky;top:var(--hdr,72px);z-index:40;background:rgba(242,238,234,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--vz-line)}
.cat-nav ul{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0 auto;padding:12px 24px;max-width:var(--wrap)}
.cat-nav ul::-webkit-scrollbar{display:none}
.cat-nav a{display:block;white-space:nowrap;padding:8px 16px;border:1px solid var(--vz-line);border-radius:999px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--vz-ink);text-decoration:none;background:#fff;transition:all .2s}
.cat-nav a:hover,.cat-nav a.on{background:var(--vz-ink);border-color:var(--vz-ink);color:#fff}
.cat-nav a.gold{border-color:var(--vz-gold);color:#7A5F4E}
.cat-nav a.gold:hover,.cat-nav a.gold.on{background:var(--vz-gold);color:#fff}
.shop-sec{padding:84px 0 40px;scroll-margin-top:140px}
.shop-sec + .shop-sec{border-top:1px solid var(--vz-line)}
.shop-sec .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.shop-sec .sec-head .lead{max-width:62ch;margin:0}
.brand-chip{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vz-gold);font-weight:600}

/* Produktkarte mit Kauf */
.shop-grid.v45{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.prod.v45{display:flex;flex-direction:column;background:#fff;border:1px solid var(--vz-line);border-radius:6px;overflow:hidden;transition:box-shadow .3s,transform .3s}
.prod.v45:hover{box-shadow:0 18px 50px rgba(36,27,47,.10);transform:translateY(-2px)}
.prod.v45 .prod-img{aspect-ratio:1/1}
.prod-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--vz-ink);color:#fff;line-height:1.2}
.badge.gold{background:var(--vz-gold)}
.badge.light{background:#fff;color:var(--vz-ink);border:1px solid var(--vz-line)}
.badge.muted{background:#E8E2DC;color:#5C5266}
.var-pick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;border:0}
.var-pick legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.var-pick label{position:relative}
.var-pick input{position:absolute;opacity:0;pointer-events:none}
.var-pick span{display:block;padding:7px 12px;border:1px solid var(--vz-line);border-radius:4px;font-size:.8rem;line-height:1.3;color:var(--vz-ink);cursor:pointer;background:#fff;transition:all .15s}
.var-pick span small{display:block;font-size:.72rem;color:var(--vz-soft)}
.var-pick input:checked + span{border-color:var(--vz-ink);box-shadow:inset 0 0 0 1px var(--vz-ink)}
.var-pick input:focus-visible + span{outline:2px solid var(--vz-steel);outline-offset:2px}
.opt-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.opt-sel label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vz-soft);font-weight:600}
.opt-sel select{width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--vz-line);border-radius:4px;background:#fff;font:inherit;font-size:.86rem;color:var(--vz-ink)}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--vz-line)}
.buy-price{font-family:var(--display);font-size:1.35rem;color:var(--vz-ink);white-space:nowrap}
.buy-ctl{display:flex;align-items:center;gap:8px}
.btn-cart{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:0;background:var(--vz-ink);color:#fff;font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap}
.btn-cart:hover{background:#3A2C4A;transform:translateY(-1px)}
.btn-cart svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.prod-klarna{font-size:.74rem;color:var(--vz-soft);margin:8px 0 0;min-height:1.1em}
.prod-oos{margin-top:auto;padding-top:12px;border-top:1px solid var(--vz-line);font-size:.82rem;color:#7A4A52}
.prod.v45 .prod-more{margin-bottom:10px}

/* Angebotskarten (Goldener Oktober) */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.offer{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--vz-line);border-radius:6px;overflow:hidden;color:var(--vz-ink);transition:box-shadow .3s,transform .3s}
.offer:hover{box-shadow:0 18px 50px rgba(36,27,47,.10);transform:translateY(-2px)}
.offer .o-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--vz-linen)}
.offer .o-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.offer:hover .o-img img{transform:scale(1.04)}
.offer .o-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.offer h3{font-size:1.2rem!important;margin:0 0 6px;color:var(--vz-ink)}
.offer .o-sub{font-size:.86rem;color:var(--vz-soft);margin:0 0 14px;line-height:1.5}
.o-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:auto 0 4px}
.o-price s{color:#8A7F95;font-size:.9rem}
.o-price b{font-family:var(--display);font-weight:400;font-size:1.55rem;color:var(--vz-ink)}
.o-save{font-size:.74rem;color:#7A5F4E;letter-spacing:.04em;margin:0 0 14px}
.o-pay{font-size:.74rem;color:var(--vz-soft);margin:0 0 14px}
.offer .o-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.offer .o-cta .btn{padding:11px 16px}
.offer.feature{border-color:var(--vz-gold);box-shadow:0 0 0 1px var(--vz-gold) inset}
.offer.text-only .o-body{padding-top:26px}
.offer-list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--vz-line);border-radius:6px;overflow:hidden}
.offer-list th,.offer-list td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--vz-line);font-size:.92rem;color:var(--vz-ink)}
.offer-list th{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vz-soft);background:var(--vz-paper)}
.offer-list td.n{white-space:nowrap}
.offer-list s{color:#8A7F95}
.offer-list b{font-family:var(--display);font-weight:400;font-size:1.06rem}
.offer-list .pct{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--vz-linen);font-size:.7rem;font-weight:700;color:#7A5F4E}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Kampagnenbühne */
.okt-stage{position:relative;overflow:hidden;background:linear-gradient(135deg,#1B0D2E 0%,#2B1838 55%,#3B2638 100%);color:#F3EEE7;padding:110px 0 100px}
.okt-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 10%,rgba(217,178,120,.22),transparent 55%),radial-gradient(ellipse at 10% 100%,rgba(162,135,118,.18),transparent 50%);pointer-events:none}
.okt-stage .wrap{position:relative}
.okt-stage .eyebrow{color:#D9C3A5!important}
.okt-stage h2{color:#fff!important;font-size:clamp(2.1rem,4.4vw,3.8rem)!important;max-width:16ch}
.okt-stage h2 em{color:#D9C3A5}
.okt-stage .lead{color:#D8D0DE!important;max-width:60ch}
.okt-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(243,238,231,.16);border:1px solid rgba(243,238,231,.16);border-radius:6px;overflow:hidden;margin:40px 0 0}
.okt-tiers div{background:rgba(27,13,46,.55);padding:22px 20px}
.okt-tiers b{display:block;font-family:var(--display);font-weight:400;font-size:2.3rem;line-height:1;color:#fff}
.okt-tiers span{display:block;margin-top:8px;font-size:.86rem;line-height:1.45;color:#D8D0DE}
@media (max-width:860px){.okt-tiers{grid-template-columns:1fr 1fr}}
.okt-stage .offer-grid{margin-top:34px}
.okt-stage .offer{border-color:transparent}
.okt-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:34px}
.okt-stage .btn-primary{background:#fff!important;color:var(--vz-deep)!important;border-color:#fff!important}
.okt-stage .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.okt-note{font-size:.8rem;color:#B9AFC3;margin-top:22px}

/* Vertrauen neben dem Angebot */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px}
.assure div{padding:22px;background:#fff;border:1px solid var(--vz-line);border-radius:6px}
.assure b{display:block;font-family:var(--display);font-weight:400;font-size:1.12rem;margin-bottom:6px;color:var(--vz-ink)}
.assure span{font-size:.88rem;line-height:1.55;color:var(--vz-soft)}
@media (max-width:900px){.assure{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.assure{grid-template-columns:1fr}}

/* Rezensionen */
.reviews{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;align-items:start}
.rv-score{padding:26px;background:#fff;border:1px solid var(--vz-line);border-radius:6px;text-align:center}
.rv-score b{display:block;font-family:var(--display);font-weight:400;font-size:3.4rem;line-height:1;color:var(--vz-ink)}
.rv-score .stars{display:block;color:#C9A227;font-size:1.2rem;letter-spacing:.12em;margin:8px 0}
.rv-score span{display:block;font-size:.84rem;color:var(--vz-soft)}
.rv-score a{display:inline-block;margin-top:14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--vz-ink)}
.rv-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rv{margin:0;padding:24px;background:#fff;border:1px solid var(--vz-line);border-radius:6px}
.rv .stars{color:#C9A227;letter-spacing:.1em;font-size:.95rem}
.rv blockquote{margin:10px 0 14px;font-family:var(--display);font-size:1.18rem;line-height:1.45;color:var(--vz-ink)}
.rv figcaption{font-size:.8rem;color:var(--vz-soft)}
@media (max-width:820px){.reviews,.rv-list{grid-template-columns:1fr}}
.dark-reviews .rv,.dark-reviews .rv-score{background:rgba(255,255,255,.04);border-color:rgba(237,241,244,.16)}
.dark-reviews .rv blockquote,.dark-reviews .rv-score b,.dark-reviews .rv-score a{color:#F3EEE7}
.dark-reviews .rv figcaption,.dark-reviews .rv-score span{color:#B4ACC6}

/* Bestellablauf */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.steps4 > div{counter-increment:st;padding:24px 22px;background:#fff;border:1px solid var(--vz-line);border-radius:6px}
.steps4 > div::before{content:"0" counter(st);display:block;font-family:var(--display);font-size:1.7rem;color:var(--vz-gold);margin-bottom:10px}
.steps4 b{display:block;font-size:1rem;margin-bottom:6px;color:var(--vz-ink)}
.steps4 span{font-size:.88rem;line-height:1.55;color:var(--vz-soft)}
@media (max-width:900px){.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.steps4{grid-template-columns:1fr}}
.pay-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pay-logos span{padding:6px 12px;border:1px solid var(--vz-line);border-radius:4px;background:#fff;font-size:.74rem;font-weight:700;color:var(--vz-ink);letter-spacing:.04em}
.pay-logos .klarna-mark{padding:6px 12px;font-size:.74rem}

.light-page .header .cart-btn{color:#241B2F;border-color:rgba(36,27,47,.22)}
.light-page .header .cart-btn:hover{background:rgba(36,27,47,.06)}
.cart-drawer p,.cart-drawer span,.cart-drawer b{color:inherit}
.cd-panel,.cd-panel p{color:var(--vz-ink)}
.cd-fail p{color:var(--vz-ink)!important;margin:0 0 10px}
.cd-fail .btn{background:#241B2F!important;color:#fff!important;border-color:#241B2F!important}
.cd-fail .btn-link{color:var(--vz-ink)!important}
.cd-pay,.cd-sum,.cd-klarna{color:var(--vz-soft)!important}
.cd-total{color:var(--vz-ink)!important}
.prod-badges{align-items:flex-start}
.okt-stage .offer-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.offer .btn-primary,.okt-stage .offer .btn-primary{background:var(--vz-ink)!important;color:#fff!important;border-color:var(--vz-ink)!important}
.offer .btn-ghost,.okt-stage .offer .btn-ghost{background:transparent!important;color:var(--vz-ink)!important;border-color:var(--vz-ink)!important}
.offer .btn-link,.offer .btn-link::after{color:var(--vz-ink)!important}
.offer .o-sub,.offer .o-pay{color:var(--vz-soft)!important}
.offer h3,.offer .o-price b{color:var(--vz-ink)!important}
.okt-hero{padding:170px 0 90px}
.okt-hero h1{color:#fff!important;max-width:16ch}
.okt-hero h1 em{color:#D9C3A5}
.okt-hero .lead{color:#D8D0DE!important}
.okt-hero .breadcrumb{color:#B9AFC3!important;margin-bottom:18px}
@media (max-width:760px){.okt-hero{padding:130px 0 64px}}
@media (max-width:760px){.cart-btn{width:36px;height:36px}.cart-btn svg{width:17px;height:17px}.topbar .hdr-right{gap:8px}}

/* v45.1: klare Kopfzeile, Kaufzeile, Auswahlfelder */
html,html.cur,html.cur a,html.cur button{cursor:auto}
html.cur a,html.cur button,a,button,summary,label,select{cursor:pointer}
.cursor{display:none!important}
.header.hidden{transform:none!important}
.topbar .hdr-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:26px;min-width:0}
.hdr-left .menu-btn{grid-column:auto}
.quick-nav{display:flex;align-items:center;gap:22px}
.quick-nav a{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:inherit;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.header .quick-nav a{color:#EDF1F4}
.light-page .header .quick-nav a{color:#241B2F}
.quick-nav a:hover,.quick-nav a[aria-current]{border-bottom-color:currentColor;text-decoration:none}
.quick-nav a.qn-gold{color:#B08C6E!important}
@media (max-width:1180px){.quick-nav a[href$="/behandlungen/"],.quick-nav a[href$="/treatments/"]{display:none}}
@media (max-width:900px){.quick-nav{display:none}}
.cat-nav{top:var(--hdr,72px)}
.buy-row{flex-wrap:wrap;row-gap:12px}
.buy-row .buy-ctl{flex:1 1 100%;display:grid;grid-template-columns:auto 1fr;gap:10px}
.buy-row .btn-cart{justify-content:center;width:100%;padding:12px 14px}
.offer .buy-row .btn-cart{flex:1}
.offer .buy-row{display:flex;flex-wrap:nowrap}
.opt-sel select{-webkit-appearance:none;appearance:none;height:42px;padding:0 34px 0 12px;border:1px solid var(--vz-line);border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241B2F' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:var(--body);font-size:.9rem;color:var(--vz-ink);box-shadow:none}
.opt-sel select:focus{outline:2px solid var(--vz-steel);outline-offset:1px}
.cd-fail{display:flex;flex-direction:column;gap:10px}
.cd-fail .btn{width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.3;padding:13px 14px}
.cd-fail .btn-link{align-self:center}
.cart-drawer .cd-go,.cart-drawer .cd-go.btn-primary{background:#241B2F!important;color:#fff!important;border-color:#241B2F!important;opacity:1!important;visibility:visible!important}
.cart-drawer .cd-go:hover{background:#3A2C4A!important}
.cart-drawer .cd-go[disabled]{opacity:.7!important}
.cd-fail[hidden]{display:none!important}

/* v45.3: Kategorie-Kacheln, Bestseller, Oktober-Teaser */
.shop-head{padding-bottom:20px!important}
.cat-tiles-sec{padding:10px 0 56px}
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--vz-line);border-radius:8px;overflow:hidden;color:var(--vz-ink);text-decoration:none;transition:transform .35s,box-shadow .35s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(36,27,47,.12);text-decoration:none}
.ct-img{display:block;aspect-ratio:4/3;background:#fff;overflow:hidden}
.ct-img img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .6s}
.cat-tile.cover .ct-img img{object-fit:cover;padding:0}
.cat-tile:hover .ct-img img{transform:scale(1.05)}
.ct-txt{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;border-top:1px solid var(--vz-line)}
.ct-txt b{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.2}
.ct-txt span{font-size:.84rem;line-height:1.45;color:var(--vz-soft)}
.ct-txt em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7A5F4E;margin-top:6px}
.cat-tile.gold{border-color:var(--vz-gold);box-shadow:inset 0 0 0 1px var(--vz-gold)}
.cat-tile.gold .ct-txt{background:#1B0D2E;color:#fff}
.cat-tile.gold .ct-txt span{color:#D8D0DE}
.cat-tile.gold .ct-txt em{color:#D9C3A5}
@media (max-width:980px){.cat-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cat-tiles{gap:12px}.ct-txt{padding:12px}.ct-txt b{font-size:1.02rem}.ct-txt span{font-size:.76rem}}
.best-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.best-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.best-grid{grid-template-columns:1fr}}
.best{display:grid;grid-template-columns:140px 1fr;background:#fff;border:1px solid var(--vz-line);border-radius:8px;overflow:hidden}
.best-img{display:block;background:#fff;aspect-ratio:auto!important;height:100%;border-right:1px solid var(--vz-line);border-bottom:0!important}
.best-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.best-body{display:flex;flex-direction:column;padding:16px 18px}
.best-body h3{font-size:1.08rem!important;margin:4px 0 6px}
.best-body h3 a{color:var(--vz-ink);text-decoration:none}
.best-body p{font-size:.8rem;line-height:1.45;color:var(--vz-soft);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.best-buy{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.best-buy b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--vz-ink)}
.best-buy small{font-size:.72rem;color:var(--vz-soft)}
.best-buy .btn-cart{padding:10px 14px}
.okt-teaser{padding:20px 0 30px}
.ot-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:34px 40px;border-radius:10px;background:linear-gradient(135deg,#1B0D2E,#3B2638);color:#F3EEE7}
.ot-in .eyebrow{color:#D9C3A5!important}
.ot-in h2{color:#fff!important;margin:0 0 8px;font-size:clamp(1.6rem,2.6vw,2.3rem)!important}
.ot-in h2 em{color:#D9C3A5}
.ot-in p{color:#D8D0DE;margin:0;max-width:60ch}
.ot-act{display:flex;gap:12px;flex-wrap:wrap}
.ot-in .btn-primary{background:#fff!important;color:#1B0D2E!important;border-color:#fff!important}
.ot-in .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
@media (max-width:600px){.ot-in{padding:26px 22px}}
.cat-tile .ct-txt b{color:var(--vz-ink)!important;display:block}
.cat-tile.gold .ct-txt b{color:#fff!important}
.best-buy b{white-space:nowrap}
.best{grid-template-columns:120px 1fr}
.best-buy .btn-cart span{display:inline}
@media (max-width:1180px){.best-buy{flex-wrap:wrap}}

.prices s{color:#8A7F95}.prices b.okt{font-family:var(--display);font-weight:400}.okt-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#A28776;color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}


/* ============================================================
   v46.0 · Black Friday Presale (bis 27.11.2026)
   Nach dem Presale: Abschnitt entfernen, siehe ANLEITUNG.md
   ============================================================ */
.promo-bar{background:#0B0A0D;color:#EFE9DF}
.promo-bar a{color:#EFE9DF}
.promo-bar b{color:#E0C28A;letter-spacing:.16em}
.promo-bar .pb-cd{font-variant-numeric:tabular-nums;color:#E0C28A;white-space:nowrap}
@media (max-width:760px){.promo-bar .pb-cd{display:block;margin-top:2px}}
.okt-stage.bf-stage{background:linear-gradient(135deg,#070608 0%,#131015 55%,#1D1712 100%)}
.okt-stage.bf-stage::before{background:radial-gradient(ellipse at 85% 8%,rgba(224,194,138,.26),transparent 55%),radial-gradient(ellipse at 8% 100%,rgba(224,194,138,.10),transparent 50%)}
.okt-stage.bf-stage .eyebrow{color:#E0C28A!important}
.okt-stage.bf-stage h1 em,.okt-stage.bf-stage h2 em{color:#E0C28A}
.okt-stage.bf-stage .lead{color:#D9D3CB!important}
.okt-tiers.bf-tiers{grid-template-columns:repeat(3,1fr)}
.okt-stage.bf-stage .okt-tiers div{background:rgba(10,9,12,.6)}
.okt-stage.bf-stage .okt-tiers b{color:#E0C28A}
.okt-stage.bf-stage .okt-tiers span{color:#D9D3CB}
@media (max-width:860px){.okt-tiers.bf-tiers{grid-template-columns:1fr 1fr}}
.bf-cd{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:26px 0 0}
.bf-cd-l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#E0C28A}
.bf-cd-n{display:flex;gap:10px}
.bf-cd-n>span{min-width:66px;padding:12px 10px 10px;text-align:center;border:1px solid rgba(224,194,138,.45);border-radius:6px;background:rgba(10,9,12,.55)}
.bf-cd-n b{display:block;font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.bf-cd-n i{display:block;margin-top:6px;font-style:normal;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#CFC7BC}
@media (max-width:520px){.bf-cd-n>span{min-width:56px;padding:10px 6px 8px}.bf-cd-n b{font-size:1.5rem}}
.okt-teaser.bf-teaser .ot-in{background:#0B0A0D;color:#EFE9DF;border-color:#0B0A0D}
.okt-teaser.bf-teaser h2{color:#fff}.okt-teaser.bf-teaser h2 em{color:#E0C28A}
.okt-teaser.bf-teaser p{color:#D9D3CB}.okt-teaser.bf-teaser .eyebrow{color:#E0C28A}
.okt-teaser.bf-teaser .btn-primary{background:#fff!important;color:#0B0A0D!important;border-color:#fff!important}
.okt-teaser.bf-teaser .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.okt-teaser.bf-teaser .bf-cd-n>span{min-width:54px;padding:9px 6px 7px}.okt-teaser.bf-teaser .bf-cd-n b{font-size:1.35rem}
.offer .bf-buy{width:100%;margin-top:10px;justify-content:center}
.offer.bf-free{border-color:#C9A66B}
.offer.bf-free .o-price b{color:#8A6A2F}
.bf-bar{position:fixed;left:0;right:0;bottom:0;z-index:94;display:flex;align-items:stretch;background:#0B0A0D;color:#EFE9DF;border-top:1px solid rgba(224,194,138,.5);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.bf-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:9px 14px;color:#EFE9DF;text-decoration:none;line-height:1.3}
.bf-bar a:hover{color:#fff;text-decoration:none}
.bf-bar b{color:#E0C28A;font-weight:600;letter-spacing:.16em}
.bf-bar [data-bf-cd]{font-variant-numeric:tabular-nums;color:#fff;font-weight:600;letter-spacing:.06em}
.bf-bar .bf-bar-go{border-bottom:1px solid rgba(224,194,138,.6)}
.bf-bar button{flex:none;width:40px;border:0;background:transparent;color:#BDB5AA;font-size:1.1rem;cursor:pointer}
.bf-bar button:hover{color:#fff}
.has-bf-bar body{padding-bottom:calc(var(--bf-pad,0px) + 38px)}
@media (max-width:640px){.bf-bar{font-size:.66rem;letter-spacing:.06em}.bf-bar .bf-bar-go,.bf-bar .bf-bar-t{display:none}}
@media print{.bf-bar,.promo-bar{display:none}}

/* v46.2 · LaseMD Ultra im Fokus, eigene Grafiken */
.bf-spot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;margin:38px 0 34px;border:1px solid rgba(224,194,138,.55);border-radius:8px;overflow:hidden;background:#0B0A0D;color:#EFE9DF}
.bf-spot-img{display:block;background:#F3EEE7;min-height:320px}
.bf-spot-img img{width:100%;height:100%;object-fit:cover;display:block}
.bf-spot-txt{padding:38px 40px 36px}
.bf-spot-txt .eyebrow{color:#E0C28A!important}
.bf-spot-txt h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;color:#fff!important;margin:10px 0 14px}
.bf-spot-txt p{color:#D9D3CB;max-width:60ch;margin:0 0 14px}
.bf-spot-txt ul{list-style:none;margin:0 0 20px;padding:0;color:#D9D3CB;font-size:.95rem}
.bf-spot-txt li{padding:7px 0 7px 22px;position:relative;border-top:1px solid rgba(243,238,231,.12)}
.bf-spot-txt li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:#E0C28A}
.bf-spot-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.bf-spot-price s{color:#A79E94;font-size:1.05rem}
.bf-spot-price b{font-family:var(--display);font-weight:400;font-size:2.5rem;line-height:1;color:#E0C28A}
.bf-spot-price span{flex-basis:100%;font-size:.84rem;color:#BDB5AA}
.bf-spot-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.bf-spot .btn-primary{background:#fff!important;color:#0B0A0D!important;border-color:#fff!important}
.bf-spot .btn-link{color:#fff!important}
@media (max-width:860px){.bf-spot{grid-template-columns:1fr}.bf-spot-img{min-height:220px;max-height:260px}.bf-spot-txt{padding:26px 22px 26px}}
.bf-head{margin:10px 0 0}
.bf-head h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);color:#fff;margin:8px 0 0}
.okt-stage.bf-stage .bf-head .eyebrow{color:#E0C28A!important}
.bf-visual img{aspect-ratio:16/7;object-fit:cover;-webkit-mask-image:none!important;mask-image:none!important;width:100%;height:auto;border-radius:8px}

/* v46.5: Kundenformular in der Kasse */
.cd-form{margin-top:4px}
.cd-form label{display:block;margin:8px 0}
.cd-form label span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vz-soft);margin-bottom:4px}
.cd-form input,.cd-form textarea{width:100%;padding:9px 10px;border:1px solid rgba(36,27,47,.22);border-radius:4px;font:inherit;font-size:.92rem;background:#fff;color:var(--vz-ink)}
.cd-form input:focus,.cd-form textarea:focus{outline:2px solid var(--vz-gold);outline-offset:1px}
.cd-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.cd-f2{grid-template-columns:1fr}}
.cd-del{border:1px solid var(--vz-line);border-radius:4px;padding:6px 10px 8px;margin:8px 0}
.cd-del legend{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vz-soft);padding:0 4px}
.cd-del label{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;margin:4px 0;color:var(--vz-ink)}
.cd-del input{width:auto;margin-top:3px}
.cd-err{color:#9b2c2c;font-size:.84rem;margin:6px 0}
.cd-pay a{color:inherit;text-decoration:underline}
.cd-form .cd-go{margin-top:12px}
.cd-ref{font-size:.92rem;margin:0 0 14px;color:var(--vz-ink)}
.cd-ref b{font-family:var(--display);letter-spacing:.04em}
/* Schublade als Ganzes scrollen, Kopf bleibt sichtbar */
.cd-panel{overflow:auto}
.cd-head{position:sticky;top:0;z-index:2;background:var(--vz-paper)}
.cd-body{flex:0 0 auto;overflow:visible;min-height:0}
.cd-foot{flex:0 0 auto}
.cd-form label[hidden]{display:none}

/* v47.1: Bruecke zur Hottinger Podologie (nur in der Kopie unter /villa-zeltweg/) */
.hp-bridge{position:relative;z-index:230;display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;padding:.42rem 1rem;background:#0F2238;color:#EDE6DC;font-family:"Source Sans 3",system-ui,sans-serif;font-size:.74rem;letter-spacing:.06em;line-height:1.4}
.hp-bridge a{color:#F2E7C9;text-decoration:none;white-space:nowrap}
.hp-bridge a:hover{text-decoration:underline}
.hp-bridge .hpb-back{font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hp-bridge .hpb-go{border:1px solid rgba(242,231,201,.55);border-radius:999px;padding:.16rem .7rem;font-weight:600}
.hp-bridge .hpb-go:hover{background:rgba(242,231,201,.14);text-decoration:none}
@media(max-width:720px){.hp-bridge{gap:.6rem;font-size:.68rem}.hp-bridge .hpb-text{display:none}}