@charset "UTF-8";
/* ============================================================
   Kaiser Thaimassage Dortmund - Stylesheet
   Reines CSS, kein Framework.
   Aufbau:  1) Basis & Typografie   2) Komponenten
            3) Sektionen            4) Bild-Slots
            5) Responsive           6) Zusaetze (Karte, Rechtstexte)
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Hoehe der Aktionsleiste. Ohne Leiste 0 - dadurch braucht keine andere
   Regel eine Ausnahme, alles rechnet einfach mit var(--promo-h). */
:root{--promo-h:0px}
.has-promo{--promo-h:44px}
/* Anker springen an der Kopfzeile vorbei, Leiste eingerechnet */
html{scroll-padding-top:calc(96px + var(--promo-h))}
body{margin:0}
[id]{scroll-margin-top:92px}
.site{font-family:'Jost',system-ui,sans-serif;color:#1c2a23;background:#fffdf9;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
.serif{font-family:'Cormorant Garamond',serif}
.eyebrow{display:inline-block;font:500 12px/1 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#b0883f}
.eyebrow.d{color:#d8b56a}
.h1{margin:0;font:600 clamp(40px,6.4vw,76px)/1.0 'Cormorant Garamond',serif;letter-spacing:-.015em}
.h2{margin:0;font:600 clamp(32px,4.5vw,50px)/1.05 'Cormorant Garamond',serif;letter-spacing:-.004em;color:#1c2a23}
.h2.d{color:#fbf3e3}
.h3{margin:0;font:600 clamp(22px,2.3vw,26px)/1.14 'Cormorant Garamond',serif;color:#1c2a23}
.lede{margin:0;font:300 clamp(15px,1.4vw,18px)/1.8 'Jost',sans-serif;color:#6a5e4e}
.lede.d{color:rgba(243,234,217,.74)}
.sec{position:relative;padding:clamp(58px,7.5vw,100px) clamp(20px,5vw,56px)}
.inner{max-width:1240px;margin:0 auto;width:100%}
.ink{background:#132019;color:#f3ead9}
.sand{background:#f7f3ec}
.cream{background:#fffdf9}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(40px,5vw,56px)}
.sec-head .lede{margin-top:14px}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0}
.orn .ln{height:1px;width:54px;background:#cba35a}
.orn .dot{width:8px;height:8px;transform:rotate(45deg);background:#cba35a}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font:600 14.5px/1 'Jost',sans-serif;letter-spacing:.04em;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:transform .25s ease,filter .25s ease,background .25s ease,color .25s ease;white-space:nowrap}
.btn i{font-size:18px}
.btn-gold{background:linear-gradient(135deg,#e6cb86,#bd9a52 60%,#a37e38);color:#132019;padding:17px 32px;box-shadow:0 14px 30px rgba(163,126,56,.36)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-out{background:transparent;color:#8a6a2f;border-color:#cba35a;padding:15.5px 30px}
.btn-out:hover{background:#cba35a;color:#132019}
.btn-dout{background:transparent;color:#f0dca8;border-color:rgba(216,181,106,.5);padding:15.5px 30px}
.btn-dout:hover{background:rgba(216,181,106,.12)}
.btn-sm{padding:12px 22px;font-size:13px}
.lnk{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 14px/1 'Jost',sans-serif;color:#8a6a2f;transition:gap .25s ease,color .25s ease}
.lnk i{font-size:16px}
.lnk:hover{gap:13px;color:#a37e38}
.lnk-u{border-bottom:1.5px solid #cba35a;padding-bottom:5px}
.navlink{text-decoration:none;color:inherit;transition:color .25s ease}
.navlink:hover{color:#d8b56a}

/* --- Bild-Slots ------------------------------------------------
   Jeder Slot ist ein Container mit fester Hoehe. Das <img> legt
   sich darueber. Fehlt die Bilddatei, blendet js/main.js das Bild
   aus und der dekorative Platzhalter darunter bleibt sichtbar.
   ---------------------------------------------------------------- */
.slot,.slot-dark{position:relative;overflow:hidden}
.slot{background:rgba(176,141,79,.08)}
.slot-dark{background:rgba(216,181,106,.06)}
.slot::before,.slot-dark::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(176,141,79,.4);border-radius:6px;pointer-events:none}
.slot-dark::before{border-color:rgba(216,181,106,.3)}
.slot::after,.slot-dark::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font:500 12px/1.6 'Jost',sans-serif;letter-spacing:.08em;color:#a9926f}
.slot-dark::after{color:rgba(216,181,106,.72)}
.slot>img,.slot-dark>img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease}
.slot>img.is-loaded,.slot-dark>img.is-loaded{opacity:1}
.slot>img.is-missing,.slot-dark>img.is-missing{display:none}
/* Vollflaechige Hintergrundbilder: ohne Rahmen und Beschriftung, damit die
   Seite auch ohne Foto ruhig wirkt (Textur uebernimmt den Hintergrund). */
.hero-slot::before,.hero-slot::after,.conv-slot::before,.conv-slot::after{content:none}
/* --- Aktionsleiste ganz oben --------------------------------------- */
.promo{position:fixed;top:0;left:0;right:0;z-index:110;min-height:var(--promo-h);display:flex;align-items:center;justify-content:center;padding:0 clamp(14px,4vw,28px);background:linear-gradient(100deg,#a37e38,#e6cb86 45%,#bd9a52);color:#132019;box-shadow:0 2px 14px rgba(0,0,0,.22)}
.promo-in{display:flex;align-items:center;justify-content:center;gap:10px;max-width:1240px;width:100%;text-align:center}
.promo-in i{flex:none;font-size:19px;opacity:.8}
.promo p{margin:0;font:400 13px/1.35 'Jost',sans-serif;letter-spacing:.01em}
.promo strong{font-weight:600;letter-spacing:.02em}
.promo span{opacity:.82}
/* Ohne die Klasse has-promo bleibt die Leiste aus dem Layout heraus */
html:not(.has-promo) .promo{display:none}
@media(max-width:620px){
.has-promo{--promo-h:52px}
.promo{padding:7px 14px}
.promo-in{gap:8px}
.promo-in i{font-size:17px}
.promo p{font-size:11.5px;line-height:1.45}
/* Zweizeilig statt gequetscht: Angebot oben, Zeitraum darunter */
.promo span{display:block}
}

.site-head{position:fixed;top:var(--promo-h);left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,5vw,48px);transition:background .3s ease,padding .3s ease,box-shadow .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
/* Geraete mit Notch: Kopfzeile nicht unter den Displayrand schieben */
.site-head{padding-left:max(clamp(20px,5vw,48px),env(safe-area-inset-left));padding-right:max(clamp(20px,5vw,48px),env(safe-area-inset-right))}
.site-head.scrolled{background:rgba(18,30,24,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:11px;padding-bottom:11px;box-shadow:0 12px 34px rgba(0,0,0,.28);border-bottom-color:rgba(216,181,106,.16)}
.head-logo{height:64px;width:auto;display:block;transition:height .3s ease;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.scrolled .head-logo{height:52px}
.head-nav{display:flex;align-items:center;gap:30px;font:500 12.5px/1 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:rgba(243,234,217,.88)}
.head-right{display:flex;align-items:center;gap:18px}
.head-phone{display:flex;align-items:center;gap:8px;text-decoration:none;font:500 13px/1 'Jost',sans-serif;color:rgba(243,234,217,.88);transition:color .25s ease}
.head-phone i{font-size:18px;color:#d8b56a}
.head-phone:hover{color:#fff}
/* Menue-Schalter: siehe Abschnitt 9 */
.hero{position:relative;overflow:hidden;background:#132019;color:#f3ead9;min-height:min(94vh,880px);display:flex;flex-direction:column;justify-content:center}
.hero-bgtex{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#1b2c22,#1b2c22 16px,#14211a 16px,#14211a 32px)}
.hero-slot{position:absolute;inset:0;z-index:0}
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(16,28,22,.5),rgba(16,28,22,.8)),radial-gradient(95% 85% at 74% 16%,rgba(203,163,90,.2),transparent 60%)}
.hero-in{position:relative;z-index:3;max-width:1240px;margin:0 auto;width:100%;padding:calc(148px + var(--promo-h)) clamp(20px,5vw,56px) 108px;pointer-events:none}
.hero-in a,.hero-in .btn{pointer-events:auto}
.hero-kick{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hero-kick .ln{height:1px;width:54px;background:#cba35a}
.hero-kick span{font:500 12px/1 'Jost',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#d8b56a}
.hero h1{max-width:880px;color:#fbf3e3;text-wrap:balance}
.hero-sub{margin:28px 0 0;max-width:500px;font:300 clamp(16px,1.5vw,19px)/1.7 'Jost',sans-serif;color:rgba(243,234,217,.78)}
.hero-cta{display:flex;align-items:center;gap:16px;margin:40px 0 0;flex-wrap:wrap}
.hero-badges{display:flex;align-items:center;gap:26px;margin-top:48px;flex-wrap:wrap;font:400 12.5px/1.3 'Jost',sans-serif;letter-spacing:.03em;color:rgba(243,234,217,.62)}
.hero-badges span{display:flex;align-items:center;gap:8px}
.hero-badges i{font-size:19px;color:#d8b56a}
.scrolldown{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:rgba(216,181,106,.7);font-size:24px;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.trust{display:grid;grid-template-columns:repeat(4,1fr);background:#f7f3ec}
.trust-c{padding:clamp(30px,3.5vw,42px) clamp(20px,2.4vw,32px);border-top:2px solid rgba(176,141,79,.25);border-right:1px solid rgba(176,141,79,.16)}
.trust-c:last-child{border-right:none}
.trust-c.lead{border-top-color:#cba35a}
.trust-n{font:600 13px/1 'Jost',sans-serif;letter-spacing:.1em;color:#cba35a}
.trust-c h2{margin:14px 0 6px;font:600 19px/1.15 'Cormorant Garamond',serif;color:#1c2a23}
.trust-c p{margin:0;font:300 12.5px/1.55 'Jost',sans-serif;color:#857a6a}
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,70px);align-items:center}
/* Variante ohne Bildspalte (Bildblock in der index.html stillgelegt) */
.about.solo{display:block}
.about.solo .about-tx{max-width:760px;margin:0 auto}
.about-tx{border-left:2px solid #cba35a;padding-left:clamp(22px,3vw,34px)}
.about-tx .h2{margin:14px 0 22px}
.stats{display:flex;gap:clamp(22px,4vw,38px);margin:30px 0 32px;flex-wrap:wrap}
.stat{padding-left:0}
.stat+.stat{border-left:1px solid rgba(176,141,79,.25);padding-left:clamp(22px,3vw,36px)}
.stat-n{font:600 34px/1 'Cormorant Garamond',serif;color:#b0883f}
.stat-l{font:300 12px/1.3 'Jost',sans-serif;color:#857a6a;margin-top:5px}
.about-img{position:relative;height:clamp(360px,42vw,500px)}
.about-frame{position:absolute;top:18px;right:18px;width:100%;height:100%;border:1.5px solid rgba(176,141,79,.45);border-radius:2px}
.about-slot{position:relative;z-index:1;width:100%;height:100%}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.badge{position:absolute;top:13px;right:13px;z-index:4;font:600 10px/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#132019;background:linear-gradient(135deg,#e6cb86,#bd9a52);padding:7px 12px;border-radius:5px;box-shadow:0 6px 16px rgba(163,126,56,.34)}
.price{font:400 13px/1 'Jost',sans-serif;color:#9a8d7c}
.price strong{font:600 22px/1 'Jost',sans-serif;color:#b0883f}
.feat{display:grid;grid-template-columns:1fr 1.05fr;margin-top:clamp(24px,3vw,34px);border-radius:18px;overflow:hidden;border:1px solid rgba(176,141,79,.3);background:#132019;color:#f3ead9}
.feat-slot{position:relative;min-height:360px}
.feat-b{padding:clamp(32px,4vw,52px)}
.feat-b .h3{color:#fbf3e3;margin:14px 0 14px;font-size:clamp(28px,3vw,36px)}
.feat-d{margin:0 0 20px;font:300 15px/1.75 'Jost',sans-serif;color:rgba(243,234,217,.76)}
.feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font:500 11.5px/1 'Jost',sans-serif;letter-spacing:.04em;color:#e8cf93;border:1px solid rgba(216,181,106,.32);padding:8px 13px;border-radius:30px}
.feat-price{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.feat-price b{font:600 15px/1 'Jost',sans-serif;color:#fff}
.feat-price b span{color:#d8b56a;font-size:21px}
.feat-price .sep{width:1px;height:26px;background:rgba(216,181,106,.3)}
.feat-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.feat-note{margin:18px 0 0;font:300 12.5px/1.5 'Jost',sans-serif;color:rgba(243,234,217,.55);display:flex;align-items:center;gap:8px}
.feat-note i{color:#d8b56a;font-size:16px}

/* --- Preisuebersicht: Einzel- und Partnerpreis nebeneinander -------- */
/* Ueberschrift je Kategorie, mit auslaufender Goldlinie */
/* Aktionshinweis ueber der Preisliste */
.pdeal{display:flex;align-items:flex-start;gap:13px;margin:0 0 clamp(28px,3.4vw,38px);padding:17px 20px;border:1.5px solid rgba(203,163,90,.5);border-radius:14px;background:linear-gradient(135deg,#fffaf0,#fbf0da)}
.pdeal i{flex:none;margin-top:2px;font-size:21px;color:#b0883f}
.pdeal strong{display:block;font:600 15.5px/1.35 'Jost',sans-serif;color:#1c2a23}
.pdeal span{display:block;margin-top:5px;font:300 12.5px/1.6 'Jost',sans-serif;color:#6a5e4e}
html:not(.has-promo) .pdeal{display:none}

/* Preiszeile im Aktionszeitraum: regulaerer Preis klein und durchgestrichen,
   darunter der Aktionspreis. Beides setzt js/main.js, damit nach Ablauf der
   Aktion nichts von Hand zurueckgebaut werden muss. */
.prow dd s{display:block;font:400 11.5px/1 'Jost',sans-serif;color:#b3a794;text-decoration:line-through;margin-bottom:4px}
/* Der Aktionspreis behaelt die Farbe seiner Spalte, damit Einzel- und
   Partnerpreis weiterhin auf einen Blick unterscheidbar bleiben. */
.prow dd b{display:block;font:600 19px/1 'Cormorant Garamond',serif;color:inherit}

.pgrp{display:flex;align-items:center;gap:18px;margin:clamp(38px,4.4vw,52px) 0 clamp(18px,2.2vw,24px);font:600 12px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a6a2f}
.pgrp:first-of-type{margin-top:0}
.pgrp::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(176,141,79,.5),transparent)}

.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px);align-items:start}
.pitem{background:#fff;border:1px solid rgba(176,141,79,.26);border-radius:14px;padding:clamp(20px,2.3vw,26px);box-shadow:0 18px 40px -34px rgba(80,60,30,.55);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;scroll-margin-top:calc(112px + var(--promo-h))}
.pitem:hover{border-color:#cba35a;transform:translateY(-2px);box-shadow:0 24px 48px -34px rgba(80,60,30,.5)}
.pitem.flash{animation:cardFlash 1.3s ease-out;border-color:#cba35a}
.pitem-h{margin-bottom:18px}
.pitem-h h4{margin:0;font:600 clamp(21px,2.2vw,24px)/1.15 'Cormorant Garamond',serif;color:#1c2a23}
.pitem-h p{margin:6px 0 0;font:300 12.5px/1.5 'Jost',sans-serif;color:#9a8d7c}

.pitem-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,16px)}
.pcol{padding:14px 15px 13px;border:1px solid rgba(176,141,79,.2);border-radius:11px;background:#fdfaf3}
/* Die Partnerspalte hebt sich leicht in Gold ab */
.pcol-2{background:rgba(203,163,90,.09);border-color:rgba(203,163,90,.34)}
.pcol-h{display:block;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid rgba(176,141,79,.2);font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a99a86}
.pcol-2 .pcol-h{color:#a37e38;border-bottom-color:rgba(203,163,90,.3)}
.prows{margin:0}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 0}
.prow dt{font:400 12.5px/1 'Jost',sans-serif;color:#857a6a}
.prow dd{margin:0;font:600 17px/1 'Cormorant Garamond',serif;color:#1c2a23;white-space:nowrap}
.pcol-2 .prow dd{color:#a37e38}

/* Bleibt bei ungerader Kartenzahl ein Platz frei, legt sich die letzte
   Karte quer ueber die ganze Reihe: Titel links, Preise rechts.
   So entsteht keine leere Haelfte. */
@media(min-width:1025px){
.pitem:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(26px,3.4vw,52px);align-items:center}
.pitem:last-child:nth-child(odd) .pitem-h{margin-bottom:0}
}

@media(max-width:1024px){
.plist{grid-template-columns:1fr}
}
@media(max-width:420px){
.pitem{padding:18px 16px}
.pitem-cols{gap:10px}
.pcol{padding:12px 12px 11px}
.prow dt{font-size:12px}
.prow dd{font-size:16px}
}


/* Hinweise unter den Preiskarten - als schlanke Zeile, ohne Kasten */
.pnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(30px,3.6vw,42px);padding-top:clamp(22px,2.6vw,28px);border-top:1px solid rgba(176,141,79,.22)}
.pnotes p{margin:0;display:flex;gap:10px;font:300 12.5px/1.6 'Jost',sans-serif;color:#857a6a}
.pnotes i{flex:none;margin-top:1px;font-size:16px;color:#b0883f}

@media(max-width:820px){
.pnotes{grid-template-columns:1fr;gap:11px}
}
.cmodal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(16,28,22,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:cmFade .25s ease both}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
@keyframes cmIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.cmodal-c{position:relative;width:100%;max-width:430px;background:#fffdf9;border:1px solid rgba(176,141,79,.32);border-radius:18px;padding:clamp(30px,4vw,42px);text-align:center;box-shadow:0 44px 90px -30px rgba(0,0,0,.5);animation:cmIn .38s cubic-bezier(.22,.7,.25,1) both}
.cmodal-x{position:absolute;top:13px;right:13px;background:none;border:none;font-size:21px;color:#9a8d7c;cursor:pointer;line-height:1;padding:5px}
.cmodal-x:hover{color:#1c2a23}
.cmodal-i{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:rgba(176,141,79,.13);display:flex;align-items:center;justify-content:center;color:#b0883f;font-size:27px}
.cmodal-t{margin:0 0 10px;font:600 clamp(24px,3vw,29px)/1.15 'Cormorant Garamond',serif;color:#1c2a23}
.cmodal-d{margin:0 0 22px;font:300 14px/1.65 'Jost',sans-serif;color:#6a5e4e}
.cmodal-num{display:inline-block;font:600 clamp(25px,3.3vw,31px)/1 'Jost',sans-serif;color:#8a6a2f;text-decoration:none;margin-bottom:8px}
.cmodal-num:hover{color:#a37e38}
.cmodal-h{font:300 12.5px/1.55 'Jost',sans-serif;color:#9a8d7c;margin-bottom:26px}
.cmodal-b{display:flex;flex-direction:column;gap:11px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cmodal,.cmodal-c{animation:none}}
/* Galerie: Hochformate belegen eine Spalte, Querformate zwei. Beide
   Varianten werden dadurch exakt gleich hoch, ohne feste Zeilenhoehen -
   das Raster bleibt auf jeder Breite buendig. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,16px)}
.galslot{position:relative;aspect-ratio:3/4;border-radius:10px}
.galslot.wide{grid-column:span 2;aspect-ratio:3/2}
.conv{position:relative;overflow:hidden;text-align:center}
.conv-tex{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#1b2c22,#1b2c22 16px,#14211a 16px,#14211a 32px)}
.conv-slot{position:absolute;inset:0;z-index:0}
.conv-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(16,28,22,.66),rgba(16,28,22,.82)),radial-gradient(70% 90% at 50% 36%,rgba(203,163,90,.26),transparent 62%)}
.conv-in{position:relative;z-index:3;max-width:760px;margin:0 auto;pointer-events:none}
.conv-in a,.conv-in .btn{pointer-events:auto}
.conv-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.rev{display:grid;grid-template-columns:repeat(3,1fr)}
.rev-c{padding:0 clamp(22px,2.6vw,36px);border-right:1px solid rgba(176,141,79,.2)}
.rev-c:last-child{border-right:none}
.stars{font-size:15px;letter-spacing:3px;color:#cba35a;margin-bottom:20px}
.quote{margin:0 0 24px;font:400 clamp(18px,1.9vw,21px)/1.5 'Cormorant Garamond',serif;font-style:italic;color:#31403a}
.rev-name{font:600 13px/1.2 'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6a2f}
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,56px);align-items:start}
.cinfo{display:flex;flex-direction:column;gap:22px}
.crow{display:flex;gap:16px;align-items:flex-start}
.cicon{flex:none;width:48px;height:48px;border-radius:11px;background:rgba(176,141,79,.12);display:flex;align-items:center;justify-content:center;color:#b0883f;font-size:22px}
.clab{font:600 11px/1 'Jost',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#a99a86;margin-bottom:6px}
.cval{font:400 15px/1.5 'Jost',sans-serif;color:#1c2a23;word-break:break-word}
/* Hinweis im Kontaktbereich: sachlich, freundlich, nicht mahnend */
.cnote{display:flex;gap:13px;align-items:flex-start;margin:22px 0 0;padding:16px 18px;border:1px solid rgba(176,141,79,.3);border-left:3px solid #cba35a;border-radius:0 12px 12px 0;background:rgba(203,163,90,.07)}
.cnote i{flex:none;margin-top:2px;font-size:20px;color:#b0883f}
.cnote strong{display:block;font:600 14px/1.4 'Jost',sans-serif;color:#1c2a23;margin-bottom:4px}
.cnote span{display:block;font:300 13px/1.65 'Jost',sans-serif;color:#6a5e4e}

.cmap{margin-top:6px;height:300px;border-radius:14px;overflow:hidden;position:relative;background:#ece5d6;border:1px solid rgba(176,141,79,.25)}
.cmap-grid{position:absolute;inset:0;background:linear-gradient(rgba(176,141,79,.14) 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,rgba(176,141,79,.14) 1px,transparent 1px) 0 0/40px 100%;opacity:.7}
.cmap-road{position:absolute;left:-10%;right:-10%;top:54%;height:16px;background:#fff;opacity:.55;transform:rotate(-7deg)}
.cmap-road.b{top:auto;left:30%;right:auto;width:14px;height:160%;top:-30%;transform:rotate(18deg)}
.cmap-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);color:#a37e38;font-size:40px;filter:drop-shadow(0 6px 10px rgba(120,90,30,.4))}
.cmap-lbl{position:absolute;z-index:5;left:14px;bottom:14px;font:600 11px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7a6a4d;background:rgba(255,253,247,.85);padding:8px 12px;border-radius:30px}
.h3.d{color:#fbf3e3}
.bookcard{position:relative;overflow:hidden;background:#132019;color:#f3ead9;border-radius:16px;box-shadow:0 24px 56px -34px rgba(0,0,0,.55)}
.bookcard-tex{position:absolute;inset:0;background:radial-gradient(80% 90% at 70% 8%,rgba(203,163,90,.18),transparent 60%),repeating-linear-gradient(135deg,#1b2c22,#1b2c22 16px,#14211a 16px,#14211a 32px)}
.bookcard-in{position:relative;z-index:2;padding:clamp(30px,3.6vw,46px);display:flex;flex-direction:column;gap:14px}
.book-feat{display:flex;flex-direction:column;gap:12px;margin:6px 0 10px}
.book-feat span{display:flex;align-items:center;gap:11px;font:400 14px/1.3 'Jost',sans-serif;color:rgba(243,234,217,.82)}
.book-feat i{font-size:20px;color:#d8b56a}
.book-or{display:flex;align-items:center;gap:14px;color:rgba(243,234,217,.5);font:400 12px/1 'Jost',sans-serif;text-transform:uppercase;letter-spacing:.1em;margin:2px 0}
.book-or span{flex:1;height:1px;background:rgba(216,181,106,.2)}
.foot{position:relative;background:#101c15;color:rgba(243,234,217,.72);padding:clamp(56px,7vw,84px) clamp(20px,5vw,56px) 30px;overflow:hidden}
/* Feiner Goldschimmer am oberen Rand - setzt den Fussbereich vom Inhalt ab */
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,181,106,.55),transparent)}
.foot::after{content:"";position:absolute;top:0;left:50%;width:min(900px,110%);height:340px;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(216,181,106,.13),transparent 68%);pointer-events:none}
.foot-in{position:relative;z-index:1;max-width:1240px;margin:0 auto}

.foot-top{text-align:center;margin-bottom:clamp(44px,5vw,60px)}
.foot-logo{height:clamp(96px,9vw,124px);width:auto;display:block;margin:0 auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
.orn.d{margin:22px auto 20px}
.orn.d .ln{background:linear-gradient(90deg,transparent,rgba(216,181,106,.7));width:64px}
.orn.d .ln:last-of-type{background:linear-gradient(90deg,rgba(216,181,106,.7),transparent)}
.orn.d .dot{background:#d8b56a;box-shadow:0 0 14px rgba(216,181,106,.5)}
.foot-claim{margin:0 auto;max-width:560px;font:300 15px/1.75 'Jost',sans-serif;color:rgba(243,234,217,.66)}
.foot-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.btn-ghost{background:transparent;color:#e8cf93;border-color:rgba(216,181,106,.42);padding:15.5px 30px}
.btn-ghost:hover{background:rgba(216,181,106,.13);border-color:#d8b56a;color:#fff;transform:translateY(-2px)}

.foot-grid{display:grid;grid-template-columns:1.25fr 1.15fr .8fr;gap:clamp(28px,4vw,52px);padding-top:clamp(34px,4vw,44px);border-top:1px solid rgba(216,181,106,.14)}
.foot-h{margin:0 0 18px;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#d8b56a}
.foot-col{display:flex;flex-direction:column;gap:13px;font:300 13.5px/1.65 'Jost',sans-serif;color:rgba(243,234,217,.7);word-break:break-word}
.foot-ln{display:flex;gap:11px;align-items:flex-start}
.foot-ln i{flex:none;margin-top:1px;font-size:17px;color:#b99a5c}
.foot-hours{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid rgba(216,181,106,.28);border-radius:10px;background:rgba(216,181,106,.06)}
.foot-hours span{font:400 13px/1 'Jost',sans-serif;color:rgba(243,234,217,.74)}
.foot-hours b{font:600 19px/1 'Cormorant Garamond',serif;color:#e6cb86;white-space:nowrap}
/* Navigationslinks mit hereinwachsendem Goldstrich */
.foot-nav a{position:relative;align-self:flex-start;padding-bottom:2px}
.foot-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#d8b56a;transition:width .28s ease}
.foot-nav a:hover::after{width:100%}

/* Hinweis im Fussbereich, ueber der Bodenzeile */
.foot-note{display:flex;align-items:flex-start;justify-content:center;gap:11px;max-width:760px;margin:clamp(34px,4vw,44px) auto 0;padding:15px 20px;border:1px solid rgba(216,181,106,.24);border-radius:12px;background:rgba(216,181,106,.05);font:300 12.5px/1.65 'Jost',sans-serif;color:rgba(243,234,217,.62);text-align:left}
.foot-note i{flex:none;margin-top:2px;font-size:18px;color:#b99a5c}
.foot-note strong{font-weight:500;color:#e8cf93}

.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:clamp(38px,4.5vw,52px) auto 0;padding-top:22px;border-top:1px solid rgba(216,181,106,.14);font:300 12px/1.5 'Jost',sans-serif;color:rgba(243,234,217,.46);flex-wrap:wrap}
.foot-bot .lg{display:flex;gap:22px}
/* Urhebervermerk der Umsetzung - bewusst zurueckhaltend */
.foot-cred{color:rgba(243,234,217,.34)}
.foot-cred strong{font-weight:500;color:rgba(243,234,217,.58)}
/* Mobile Navigation: siehe Abschnitt 9 */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(18,30,24,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(216,181,106,.2);padding:10px 14px;gap:10px}
.mbar a{flex:1}
.mbar .btn{width:100%;padding:14px}
@media(max-width:1024px){
.trust{grid-template-columns:repeat(2,1fr)}
.trust-c:nth-child(2){border-right:none}
.svc-grid{grid-template-columns:repeat(2,1fr)}
.about,.contact,.feat{grid-template-columns:1fr}
.about-img{order:-1}
.foot-grid{grid-template-columns:1fr 1fr}
.foot-b:last-child{grid-column:1/-1}
.feat-slot{min-height:280px}
}
@media(max-width:980px){
.head-nav,.head-phone{display:none}
.burger{display:flex}
}
@media(max-width:760px){
.svc-grid{grid-template-columns:1fr}
.rev{grid-template-columns:1fr;gap:30px}
.rev-c{border-right:none;border-bottom:1px solid rgba(176,141,79,.2);padding:0 0 30px}
.rev-c:last-child{border-bottom:none;padding-bottom:0}
.gal{grid-template-columns:repeat(2,1fr)}
.mbar{display:flex}
.foot-bot{justify-content:center;text-align:center}
.foot-cred{order:3}
}
@media(max-width:560px){
.trust{grid-template-columns:1fr}
.trust-c{border-right:none}
.foot-grid{grid-template-columns:1fr}
.foot-b:last-child{grid-column:auto}
.hero-cta .btn,.conv-cta .btn{flex:1;min-width:160px}
}
.tier{display:flex;align-items:center;gap:16px;margin:clamp(46px,5.4vw,68px) 0 clamp(22px,2.6vw,30px)}
.tier.first{margin-top:0}
.tier-n{font:600 12px/1 'Jost',sans-serif;letter-spacing:.14em;color:#cba35a;flex:none}
.tier-t{margin:0;font:600 clamp(22px,2.4vw,28px)/1.1 'Cormorant Garamond',serif;color:#1c2a23;white-space:nowrap}
.tier-ln{flex:1;height:1px;background:rgba(176,141,79,.3);min-width:12px}
.tier-c{font:300 12.5px/1 'Jost',sans-serif;color:#9a8d7c;white-space:nowrap;flex:none}
.sig{display:grid;grid-template-columns:1fr 1.02fr;border-radius:18px;overflow:hidden;background:#132019;color:#f3ead9;border:1px solid rgba(176,141,79,.3);box-shadow:0 30px 60px -42px rgba(60,45,20,.6)}
.sig-img{position:relative;min-height:clamp(330px,42vw,510px)}
.sig-b{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.sig-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sig-n{font:600 32px/1 'Cormorant Garamond',serif;color:rgba(216,181,106,.42)}
.sig-t{margin:0 0 18px;font:600 clamp(30px,3.7vw,46px)/1.02 'Cormorant Garamond',serif;color:#fbf3e3;letter-spacing:-.01em}
.sig-q{margin:0 0 20px;font:400 clamp(16px,1.7vw,19px)/1.5 'Cormorant Garamond',serif;font-style:italic;color:#e8cf93;padding-left:16px;border-left:2px solid rgba(216,181,106,.42)}
.sig-d{margin:0 0 26px;font:300 14.5px/1.75 'Jost',sans-serif;color:rgba(243,234,217,.72);max-width:450px}
.sig-pr{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.sig-pr span{font:400 13px/1 'Jost',sans-serif;color:rgba(243,234,217,.8);border:1px solid rgba(216,181,106,.28);padding:11px 15px;border-radius:8px}
.sig-pr b{font-weight:600;color:#e6cb86;font-size:15px}
.sig-cta{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.sig-cta .flyer.inline{padding:15.5px 24px;font-size:12px}
.sig-links{margin-top:20px}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.hcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(176,141,79,.2);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 18px 40px -30px rgba(80,60,30,.5);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.hcard:hover{transform:translateY(-7px);box-shadow:0 34px 58px -30px rgba(80,60,30,.5);border-color:#cba35a}
.hcard.pop{border:1.5px solid #cba35a}
.hcard-img{position:relative;height:clamp(198px,22vw,248px);flex:none}
.hcard-b{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.hcard-t{margin:0 0 10px;font:600 clamp(21px,2.1vw,24px)/1.14 'Cormorant Garamond',serif;color:#1c2a23}
.hcard-d{margin:0 0 16px;font:300 13.5px/1.65 'Jost',sans-serif;color:#7a6e5e;flex:1}
.hcard-dur{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.hcard-dur span{font:500 11.5px/1 'Jost',sans-serif;color:#8a6a2f;background:rgba(176,141,79,.1);padding:7px 11px;border-radius:20px}
.hcard-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid rgba(176,141,79,.16)}
@keyframes cardFlash{0%{box-shadow:0 0 0 0 rgba(203,163,90,.5)}70%{box-shadow:0 0 0 13px rgba(203,163,90,0)}100%{box-shadow:0 0 0 0 rgba(203,163,90,0)}}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.ccard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(176,141,79,.2);border-radius:13px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 14px 34px -28px rgba(80,60,30,.5);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.ccard:hover{transform:translateY(-6px);box-shadow:0 30px 52px -30px rgba(80,60,30,.5);border-color:#cba35a}
.ccard.pop{border:1.5px solid #cba35a}
.ccard-img{position:relative;height:clamp(198px,22vw,248px);flex:none}
.ccard-b{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.ccard-t{margin:0 0 10px;font:600 clamp(21px,2.1vw,24px)/1.14 'Cormorant Garamond',serif;color:#1c2a23}
.ccard-d{margin:0 0 16px;font:300 13.5px/1.65 'Jost',sans-serif;color:#7a6e5e;flex:1}
.ccard-m{display:flex;align-items:center;gap:7px;font:400 12px/1 'Jost',sans-serif;color:#9a8d7c;margin-bottom:16px}
.ccard-m i{font-size:15px;color:#b0883f}
.ccard-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px;border-top:1px solid rgba(176,141,79,.16)}
.ccard-f .price strong{font-size:21px}
.flyer{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.05em;color:#8a6a2f;background:transparent;border:1.5px solid rgba(176,141,79,.38);padding:11px 14px;border-radius:8px;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.flyer:hover{background:rgba(176,141,79,.1);border-color:#cba35a;color:#6f5321}
.flyer i{font-size:15px}
.flyer.inline{width:auto;margin-top:0}
.flyer-d{color:#f0dca8;border-color:rgba(216,181,106,.45)}
.flyer-d:hover{background:rgba(216,181,106,.14);border-color:#d8b56a;color:#fff}
@media(max-width:1024px){.hgrid{grid-template-columns:repeat(2,1fr)}.cgrid{grid-template-columns:repeat(2,1fr)}.sig{grid-template-columns:1fr}.sig-img{min-height:300px}}
@media(max-width:760px){.hgrid{grid-template-columns:1fr}.cgrid{grid-template-columns:1fr}}
@media(max-width:520px){.tier{flex-wrap:wrap;gap:10px}.tier-t{white-space:normal}.tier-c{display:none}}

/* ============================================================
   6) Zusaetze fuer die statische Umsetzung
   ============================================================ */

/* Nur fuer Screenreader sichtbar */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Sprungmarke fuer Tastatur-/Screenreader-Nutzer */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:#132019;color:#e6cb86;padding:14px 20px;border-radius:0 0 8px 0;font:600 14px/1 'Jost',sans-serif;text-decoration:none}
.skip:focus{left:0}

/* Sichtbarer Fokus-Ring (Tastaturbedienung) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:2px solid #cba35a;outline-offset:3px;border-radius:4px}

/* Kopfzeile: Hintergrund vor dem Scrollen leicht abdunkeln, damit die
   Navigation auch ueber hellen Hero-Bildern lesbar bleibt */
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,28,22,.38),transparent);pointer-events:none;transition:opacity .3s ease}
.site-head.scrolled::before{opacity:0}

/* --- Overlays: im DOM, per [hidden] geschaltet ------------------ */
.mnav[hidden],.cmodal[hidden]{display:none}
/* Verhindert das Springen des Layouts, wenn ein Overlay den Scrollbalken entfernt */
html{scrollbar-gutter:stable}
body.locked{overflow:hidden}

/* --- Sehr schmale Geraete (ab iPhone SE, 320 px) ---------------
   Der Buchen-Button in der Kopfzeile wuerde den Menue-Button
   verdraengen. Buchen ist ueber die feste Leiste am unteren Rand
   weiterhin jederzeit erreichbar. */
@media(max-width:400px){
.head-right .btn-sm:not(.btn-home){display:none}
.btn-home{padding:11px 16px;font-size:12px}
.head-logo{height:52px}
.scrolled .head-logo{height:44px}
.site-head{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}

/* --- Mobile Aktionsleiste: Platz am Seitenende freihalten ------ */
@media(max-width:760px){.foot{padding-bottom:104px}}

/* --- Karte mit Zwei-Klick-Loesung (DSGVO) ---------------------- */
.cmap iframe{position:relative;z-index:3;border:0;width:100%;height:100%;display:block}
.cmap-consent{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:linear-gradient(180deg,rgba(236,229,214,.6),rgba(236,229,214,.88))}
.cmap-consent i{font-size:30px;color:#b0883f}
.cmap-consent p{margin:0;max-width:340px;font:300 12.5px/1.6 'Jost',sans-serif;color:#6a5e4e}
.cmap-consent .btn{margin-top:4px}
.cmap-consent[hidden]{display:none}
.cmap.is-loaded .cmap-grid,.cmap.is-loaded .cmap-road,.cmap.is-loaded .cmap-pin,.cmap.is-loaded .cmap-lbl{display:none}

/* --- Flyer-Buttons: nur sichtbar, wenn PDFs hinterlegt sind ----- */
.flyer[hidden]{display:none}

/* --- Rechtstexte (Impressum / Datenschutz) --------------------- */
.legal{padding:calc(92px + clamp(40px,6vw,72px)) clamp(20px,5vw,56px) clamp(56px,7vw,90px);background:#fffdf9}
.legal-in{max-width:820px;margin:0 auto}
.legal h1{margin:14px 0 8px;font:600 clamp(32px,4.5vw,46px)/1.08 'Cormorant Garamond',serif;color:#1c2a23}
.legal h2{margin:38px 0 12px;font:600 clamp(21px,2.2vw,25px)/1.2 'Cormorant Garamond',serif;color:#1c2a23}
.legal h3{margin:26px 0 8px;font:600 15px/1.3 'Jost',sans-serif;color:#1c2a23}
.legal p,.legal li{font:300 15px/1.85 'Jost',sans-serif;color:#5b5145}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{color:#8a6a2f}
.legal .note{background:#f7f3ec;border-left:3px solid #cba35a;border-radius:0 10px 10px 0;padding:16px 20px;margin:0 0 26px;font-size:14px;color:#6a5e4e}
.legal .back{margin-top:46px}

/* ============================================================
   7) Intro-Animation beim Laden der Seite
   ------------------------------------------------------------
   Ablauf: Ein dunkler Vorhang mit dem Logo deckt die Seite ab,
   bis Schriften und Hero-Bild bereit sind (max. 1,3 s). Danach
   blendet er aus, waehrend Kopfzeile und Hero-Elemente
   nacheinander einschweben und das Hero-Bild sanft auszoomt.

   Gesteuert ueber zwei Klassen am <html>-Element:
     .js-anim    von einem Inline-Skript im <head> gesetzt --
                 ohne JavaScript laeuft nichts davon, die Seite
                 ist dann sofort und vollstaendig sichtbar.
     .is-ready   von js/main.js gesetzt, sobald es losgehen kann.
     .intro-skip beim zweiten Aufruf innerhalb einer Sitzung --
                 dann entfaellt der Vorhang, das Einschweben
                 bleibt.
   ============================================================ */

/* --- Vorhang ---------------------------------------------------- */
.intro{display:none}
.js-anim .intro{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:#132019;transition:opacity .75s ease,visibility .75s ease;animation:introSafety .01s linear 4s forwards}
.js-anim.intro-skip .intro{display:none}
.intro-tex{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(203,163,90,.14),transparent 62%),repeating-linear-gradient(135deg,#1b2c22,#1b2c22 16px,#14211a 16px,#14211a 32px)}
.intro-c{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.intro-logo{width:min(210px,46vw);height:auto;display:block;animation:introLogo 1.1s cubic-bezier(.22,.7,.25,1) both}
.intro-bar{width:132px;height:1px;background:rgba(216,181,106,.22);overflow:hidden}
.intro-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,transparent,#e6cb86,transparent);transform:translateX(-100%);animation:introBar 1.5s ease-in-out .3s infinite}
@keyframes introLogo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes introBar{to{transform:translateX(100%)}}
/* Ausblenden, sobald die Seite bereit ist */
.is-ready .intro{opacity:0;visibility:hidden;pointer-events:none}
/* Notbremse: sollte main.js nicht laden, verschwindet der Vorhang trotzdem */
@keyframes introSafety{to{opacity:0;visibility:hidden;pointer-events:none}}

/* --- Kopfzeile schwebt von oben ein ------------------------------ */
.js-anim .site-head{opacity:0}
.is-ready .site-head{animation:headIn .9s cubic-bezier(.22,.7,.25,1) .1s both}
@keyframes headIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* --- Hero-Inhalt nacheinander -------------------------------------
   Reihenfolge: Kicker, Ueberschrift, Text, Buttons, Merkmale.      */
.js-anim .hero-kick,.js-anim .hero h1,.js-anim .hero-sub,.js-anim .hero-cta,.js-anim .hero-badges{opacity:0}
.is-ready .hero-kick   {animation:riseIn .95s cubic-bezier(.22,.7,.25,1) .25s both}
.is-ready .hero h1     {animation:riseIn 1.05s cubic-bezier(.22,.7,.25,1) .35s both}
.is-ready .hero-sub    {animation:riseIn 1s cubic-bezier(.22,.7,.25,1) .50s both}
.is-ready .hero-cta    {animation:riseIn 1s cubic-bezier(.22,.7,.25,1) .62s both}
.is-ready .hero-badges {animation:riseIn 1s cubic-bezier(.22,.7,.25,1) .74s both}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Die Zierlinie im Kicker zieht sich auf */
.js-anim .hero-kick .ln{transform:scaleX(0);transform-origin:left}
.is-ready .hero-kick .ln{animation:lineIn 1.1s cubic-bezier(.22,.7,.25,1) .45s both}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Pfeil nach unten kommt zuletzt und geht dann in sein Wippen ueber */
.js-anim .scrolldown{opacity:0}
.is-ready .scrolldown{opacity:1;transition:opacity 1s ease 1.5s}

/* --- Hero-Bild zoomt langsam aus --------------------------------- */
.js-anim .hero-slot>img{transform:scale(1.09)}
.is-ready .hero-slot>img{transform:scale(1);transition:opacity .8s ease,transform 3s cubic-bezier(.18,.62,.2,1)}

/* --- Rechtstexte blenden ruhig ein ------------------------------- */
.js-anim .legal{opacity:0}
.is-ready .legal{animation:riseIn .9s cubic-bezier(.22,.7,.25,1) .2s both}

/* --- Ohne Animationswunsch: alles sofort sichtbar ----------------- */
@media(prefers-reduced-motion:reduce){
.js-anim .intro{display:none}
.js-anim .site-head,.js-anim .hero-kick,.js-anim .hero h1,.js-anim .hero-sub,
.js-anim .hero-cta,.js-anim .hero-badges,.js-anim .scrolldown,.js-anim .legal{opacity:1}
.is-ready .site-head,.is-ready .hero-kick,.is-ready .hero h1,.is-ready .hero-sub,
.is-ready .hero-cta,.is-ready .hero-badges,.is-ready .hero-kick .ln,.is-ready .legal{animation:none}
.js-anim .hero-kick .ln{transform:none}
.js-anim .hero-slot>img,.is-ready .hero-slot>img{transform:none;transition:opacity .3s ease}
}

/* ============================================================
   8) Einschweben beim Scrollen
   ------------------------------------------------------------
   js/main.js vergibt die Klasse .rv an Bloecke, die noch unter
   dem sichtbaren Bereich liegen, und setzt .rv-in, sobald sie
   herankommen. Nach der Bewegung entfernt das Skript beide
   Klassen wieder - die Elemente behalten dadurch ihre eigenen
   Uebergaenge (z. B. das Anheben der Karten beim Ueberfahren).

   Ohne JavaScript oder bei "Bewegung reduzieren" wird gar nichts
   vergeben, die Seite ist dann von Anfang an vollstaendig da.
   ============================================================ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.7,.25,1),transform .8s cubic-bezier(.22,.7,.25,1)}
.rv-l{transform:translateX(-36px)}
.rv-r{transform:translateX(36px)}
.rv-zoom{transform:translateY(18px) scale(.97)}
.rv.rv-in{opacity:1;transform:none}

/* ============================================================
   9) Mobile - Menue, Bedienbarkeit, Feinschliff
   ------------------------------------------------------------
   Die Startseite wird zum groessten Teil auf dem Handy gelesen.
   Dieser Abschnitt hat deshalb Vorrang: groessere Tippflaechen,
   ruhigere Abstaende und ein vollwertiges Menue mit Kontakt.
   Reihenfolge: Menue-Schalter, Menue, Aktionsleiste, Feinschliff.
   ============================================================ */

/* --- Menue-Schalter (Hamburger) --------------------------------- */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;flex:none;padding:0;background:transparent;border:1px solid rgba(216,181,106,.3);border-radius:13px;cursor:pointer;transition:background .25s ease,border-color .25s ease}
.burger span{display:block;width:20px;height:1.5px;border-radius:2px;background:#e6cb86;transition:width .3s cubic-bezier(.22,.7,.25,1)}
.burger span:nth-child(2){width:13px}
.burger:hover,.burger:focus-visible{border-color:rgba(216,181,106,.6)}
.burger:hover span:nth-child(2){width:20px}
.burger:active{background:rgba(216,181,106,.14)}
.scrolled .burger{border-color:rgba(216,181,106,.24)}

/* --- Menue: Flaeche und Rahmen ---------------------------------- */
.mnav{position:fixed;inset:0;z-index:200}
.mnav-bg{position:absolute;inset:0;background:rgba(8,15,11,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:mnavBg .4s ease both}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);display:flex;flex-direction:column;
  background:radial-gradient(95% 50% at 100% 0%,rgba(203,163,90,.15),transparent 62%),repeating-linear-gradient(135deg,#182620,#182620 18px,#15211b 18px,#15211b 36px);
  box-shadow:-34px 0 70px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(16px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom));
  animation:mnavIn .45s cubic-bezier(.22,.7,.25,1) both}
@keyframes mnavBg{from{opacity:0}to{opacity:1}}
@keyframes mnavIn{from{transform:translateX(100%)}to{transform:none}}

/* --- Menue: Kopf ------------------------------------------------- */
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px 20px;border-bottom:1px solid rgba(216,181,106,.14)}
.mnav-logo{height:52px;width:auto;display:block}
.mnav-close{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:21px;color:#e6cb86;background:transparent;border:1px solid rgba(216,181,106,.3);border-radius:50%;cursor:pointer;line-height:1;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.mnav-close:hover{border-color:rgba(216,181,106,.6)}
.mnav-close:active{background:rgba(216,181,106,.16);transform:scale(.94)}

/* --- Menue: Verweise --------------------------------------------- */
.mnav-list{display:flex;flex-direction:column;padding:4px 0}
.mnav-list a{display:flex;align-items:center;gap:15px;min-height:60px;padding:12px 20px;text-decoration:none;color:#f3ead9;border-bottom:1px solid rgba(216,181,106,.09);transition:background .25s ease,color .25s ease}
.mnav-list a:last-child{border-bottom:none}
.mnav-list a:hover,.mnav-list a:active{background:rgba(216,181,106,.08)}
.mnav-list a:hover .mnav-t{color:#e6cb86}
.mnav-n{flex:none;width:20px;font:500 11px/1 'Jost',sans-serif;letter-spacing:.12em;color:rgba(216,181,106,.55)}
.mnav-t{flex:1;font:500 26px/1.1 'Cormorant Garamond',serif;transition:color .25s ease}
.mnav-list i{font-size:17px;color:rgba(216,181,106,.45)}

/* --- Menue: Fuss mit Kontakt -------------------------------------- */
.mnav-foot{margin-top:auto;padding:26px 20px 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(216,181,106,.12)}
.mnav-foot .eyebrow{align-self:center;margin-bottom:2px}
.mnav-foot .btn{width:100%;padding:16px 24px}
.mnav-tel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;text-decoration:none;font:600 20px/1 'Jost',sans-serif;color:#e6cb86}
.mnav-tel i{font-size:21px}
.mnav-meta{display:flex;flex-direction:column;gap:4px;text-align:center;font:300 12.5px/1.6 'Jost',sans-serif;color:rgba(243,234,217,.52)}
.mnav-soc{display:flex;justify-content:center;gap:11px;margin-top:8px}
.mnav-soc a{width:44px;height:44px;border-radius:11px;border:1px solid rgba(216,181,106,.26);color:#d8b56a;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:19px;transition:background .25s ease}
.mnav-soc a:active{background:rgba(216,181,106,.14)}

/* --- Menue: Inhalte kommen nacheinander --------------------------- */
.mnav-top,.mnav-list a,.mnav-foot{animation:mnavItem .5s cubic-bezier(.22,.7,.25,1) both}
.mnav-top{animation-delay:.10s}
.mnav-list a:nth-child(1){animation-delay:.16s}
.mnav-list a:nth-child(2){animation-delay:.22s}
.mnav-list a:nth-child(3){animation-delay:.28s}
.mnav-list a:nth-child(4){animation-delay:.34s}
.mnav-list a:nth-child(5){animation-delay:.40s}
.mnav-list a:nth-child(6){animation-delay:.46s}
.mnav-foot{animation-delay:.52s}
@keyframes mnavItem{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* --- Menue: Schliessen -------------------------------------------- */
.mnav.is-closing .mnav-panel{animation:mnavOut .28s ease both}
.mnav.is-closing .mnav-bg{animation:mnavBg .28s ease both reverse}
.mnav.is-closing .mnav-top,.mnav.is-closing .mnav-list a,.mnav.is-closing .mnav-foot{animation:none;opacity:1;transform:none}
@keyframes mnavOut{from{transform:none}to{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){
.mnav-bg,.mnav-panel,.mnav-top,.mnav-list a,.mnav-foot,.mnav.is-closing .mnav-panel{animation:none}
}

/* --- Feste Aktionsleiste am unteren Rand -------------------------- */
.mbar{align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -14px 30px rgba(0,0,0,.3)}
.mbar .btn{width:100%;padding:15px 16px;font-size:14px}

/* --- Tippen statt Zeigen ------------------------------------------ */
@media(hover:none){
a,button,[role="button"],.flyer{-webkit-tap-highlight-color:rgba(203,163,90,.18)}
/* Aufklapp-Effekte gehoeren nicht auf Touch-Geraete: dort bleiben sie
   nach dem Antippen haengen. */
.hcard:hover,.ccard:hover{transform:none}
.btn-gold:hover{transform:none}
.lnk:hover{gap:8px}
}

/* ============================================================
   Tablet und kleiner
   ============================================================ */
@media(max-width:980px){
/* Menue-Schalter einblenden (steht hier, weil die Grunddefinition des
   Schalters weiter oben in diesem Abschnitt display:none setzt) */
.burger{display:flex}
/* Kopfzeile kompakter, Logo etwas kleiner */
.site-head{padding-top:12px;padding-bottom:12px}
.head-logo{height:56px}
.scrolled .head-logo{height:46px}
}

@media(max-width:760px){
/* --- Abstaende: das Original ist fuer grosse Schirme gedacht ------ */
.sec{padding:54px 20px}
.sec-head{margin-bottom:34px}
.sec-head .lede{margin-top:11px;line-height:1.7}

/* --- Hero: passt auf einen Blick, ohne die Aktionsleiste zu stoeren */
.hero{min-height:auto}
.hero-in{padding:calc(118px + var(--promo-h)) 20px 104px}
.hero h1{font-size:clamp(37px,10.4vw,46px);line-height:1.04}
.hero-kick{gap:10px;margin-bottom:18px}
.hero-kick .ln{width:32px}
.hero-kick span{font-size:10.5px;letter-spacing:.24em}
.hero-sub{margin-top:20px;font-size:16px;line-height:1.65}
.hero-cta{gap:11px;margin-top:30px}
.hero-cta .btn{flex:1 1 100%;padding:16px 22px}
.hero-badges{gap:12px 20px;margin-top:34px;font-size:12.5px}
.hero-badges span{flex:0 0 auto}
/* Der Pfeil laege hinter der Aktionsleiste */
.scrolldown{display:none}

/* --- Vorteile: zwei Spalten statt vier gestapelter Bloecke -------- */
.trust{grid-template-columns:repeat(2,1fr)}
.trust-c{padding:24px 18px}
.trust-c:nth-child(2n){border-right:none}
.trust-c h2{margin:10px 0 5px;font-size:16.5px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.trust-c p{hyphens:auto;-webkit-hyphens:auto}
.trust-c p{font-size:12px}

/* --- Ueber uns ---------------------------------------------------- */
.about{gap:34px}
.about-tx{padding-left:20px}
.about-img{height:clamp(280px,72vw,360px)}
.about-frame{top:12px;right:12px}
.stats{gap:20px;margin:24px 0 26px}
.stat+.stat{padding-left:20px}
.stat-n{font-size:30px}
.about-tx .btn{width:100%}

/* --- Behandlungen ------------------------------------------------- */
.tier{margin:40px 0 20px}
.sig-img{min-height:clamp(230px,58vw,300px)}
.sig-b{padding:28px 22px 30px}
.sig-top{flex-wrap:wrap;gap:8px 12px}
.sig-top .eyebrow{font-size:10.5px;letter-spacing:.2em}
.sig-n{font-size:27px}
.sig-t{font-size:clamp(30px,8.6vw,38px)}
.sig-pr{gap:8px}
.sig-pr span{flex:1 1 calc(50% - 4px);text-align:center;padding:11px 8px;font-size:12.5px}
.sig-cta{gap:10px}
.sig-cta .btn{flex:1 1 100%}
.sig-cta .flyer.inline{width:100%}
.hcard-img,.ccard-img{height:clamp(190px,52vw,230px)}
.feat-slot{min-height:clamp(210px,54vw,270px)}
.feat-b{padding:28px 22px 30px}
.feat-cta .btn{flex:1 1 100%}
.feat-price{gap:12px}

/* --- Galerie: etwas hoehere Felder -------------------------------- */
.gal{gap:9px}

/* --- Kontakt ------------------------------------------------------ */
.cicon{width:44px;height:44px;font-size:20px}
.cmap{height:250px}
.bookcard-in{padding:28px 22px}
.bookcard-in .btn{padding:16px 20px}

/* --- Fussbereich -------------------------------------------------- */
.foot{padding:52px 20px calc(104px + env(safe-area-inset-bottom))}
.foot-grid{gap:30px}
.foot-logo{height:88px}
.foot-cta .btn{flex:1 1 100%}
.foot-bot{margin-top:32px}

/* --- Grosszuegigere Tippflaechen ---------------------------------- */
.foot-col a,.lnk{min-height:34px;display:inline-flex;align-items:center}
.flyer{padding:13px 14px}
}

/* --- Sehr schmale Geraete ----------------------------------------- */
@media(max-width:400px){
.sec{padding:48px 16px}
.hero-in{padding:calc(110px + var(--promo-h)) 16px 96px}
.foot{padding-left:16px;padding-right:16px}
.trust-c{padding:20px 14px}
.sig-b,.feat-b{padding:24px 18px 26px}
.mbar{gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom))}
.mbar .btn{padding:14px 10px;font-size:13px;gap:7px}
}