/* ═══════════════════════════════════════════════
   PRAXIS WOUTAT – Susann Gerber
   Farben: Vert Pastel / Grüne Buttons
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --font-h: 'Ink Free','Caveat',cursive;
  --font-b: 'DM Sans',sans-serif;
  --green:       #6b9e78;
  --green-dk:    #527660;
  --green-lt:    #9cbfa8;
  --green-pale:  #deeee3;
  --green-xpale: #f0f7f2;
  --beige:       #f5f0e8;
  --beige-dk:    #e8e0d4;
  --cream:       #fafaf8;
  --white:       #ffffff;
  --dark:        #2d2d2b;
  --mid:         #5c5c58;
  --light:       #8c8c86;
  --border:      #dde8e0;
  --shadow:      rgba(44,44,42,0.08);
  --shadow-md:   rgba(44,44,42,0.14);
  --shadow-lg:   rgba(44,44,42,0.20);
  --radius:      12px;
  --radius-lg:   20px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-b);background:var(--cream);color:var(--dark);overflow-x:hidden;line-height:1.7;}
a{color:inherit;text-decoration:none;transition:color .2s;}
img{max-width:100%;display:block;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);font-weight:600;line-height:1.2;color:var(--dark);}
h1{font-size:clamp(30px,5vw,56px);}
h2{font-size:clamp(24px,3.5vw,40px);}
h3{font-size:clamp(19px,2.5vw,27px);}
h4{font-size:clamp(16px,2vw,21px);}
.container{max-width:1100px;margin:0 auto;padding:0 24px;}
section{padding:80px 0;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-b);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-weight:400;margin-bottom:12px;}
.eyebrow::before{content:'';display:block;width:24px;height:1.5px;background:var(--green);}
.section-title em{font-style:italic;color:var(--green);}
.section-text{font-size:16px;font-weight:300;color:var(--mid);line-height:1.8;font-family:var(--font-b);}

/* ── BUTTONS ── Grün + Weiss, konsistent ── */
.btn,.btn-primary,.btn-outline,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:50px;cursor:pointer;border:none;
  font-family:var(--font-b);font-size:13px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;
  transition:all .25s;line-height:1;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--green);color:var(--white)!important;padding:13px 28px;box-shadow:0 4px 16px rgba(107,158,120,.28);}
.btn-primary:hover{background:var(--green-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(107,158,120,.38);color:var(--white)!important;}
.btn-outline{background:transparent;color:var(--green)!important;padding:12px 26px;border:1.5px solid var(--green);}
.btn-outline:hover{background:var(--green);color:var(--white)!important;}
.btn-ghost{background:transparent;color:var(--mid)!important;padding:12px 22px;border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--green);color:var(--green)!important;}
.btn-sm{padding:8px 18px!important;font-size:11px!important;}
.btn-lg{padding:16px 36px!important;font-size:14px!important;}
.btn-red{background:#dc3545;color:var(--white)!important;padding:8px 16px;}
.btn-red:hover{background:#b02a37;}

/* ── HEADER ── */
#header{position:sticky;top:0;left:0;right:0;z-index:500;background:rgba(250,250,248,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 2px 20px var(--shadow);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{display:flex;flex-direction:column;gap:1px;}
.logo-title{font-family:var(--font-h);font-size:21px;font-weight:600;color:var(--dark);}
.logo-sub{font-family:var(--font-b);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);}
nav.desktop-nav{display:flex;align-items:center;gap:0;}
nav.desktop-nav a{font-family:var(--font-b);font-size:13px;color:var(--mid);padding:6px 13px;position:relative;transition:color .2s;}
nav.desktop-nav a:not(.btn-primary)::after{content:'';position:absolute;bottom:-2px;left:13px;right:13px;height:1.5px;background:var(--green);transform:scaleX(0);transition:transform .3s;transform-origin:left;}
nav.desktop-nav a:hover,nav.desktop-nav a.active{color:var(--dark);}
nav.desktop-nav a:not(.btn-primary):hover::after,nav.desktop-nav a:not(.btn-primary).active::after{transform:scaleX(1);}
nav.desktop-nav a.sep::before{content:'·';position:absolute;right:-3px;color:var(--border);font-size:20px;top:50%;transform:translateY(-50%);}
nav.desktop-nav .btn-primary{margin-left:14px;padding:10px 22px;font-size:12px;}
nav.desktop-nav a.btn-primary::after,
nav.desktop-nav a.btn-primary:hover::after,
nav.desktop-nav a.btn-primary.active::after{display:none!important;transform:none!important;}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--dark);border-radius:2px;transition:all .3s;}
.mobile-nav{display:none;position:fixed;inset:0;z-index:600;background:var(--cream);flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-family:var(--font-h);font-size:34px;font-weight:600;color:var(--dark);padding:10px 0;transition:color .2s;}
.mobile-nav a:hover{color:var(--green);}
.mobile-nav .btn-primary{font-size:16px;padding:14px 36px;margin-top:12px;}
.mobile-close{position:absolute;top:22px;right:22px;background:none;border:none;font-size:30px;cursor:pointer;color:var(--mid);line-height:1;}

/* ── PAGE HERO ── */
.page-hero{position:relative;padding:64px 0 56px;background:var(--green-pale);min-height:220px;display:flex;align-items:center;overflow:hidden;}
.page-hero-bg{position:absolute;inset:0;z-index:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(30,50,35,.60) 0%,rgba(30,50,35,.30) 100%);}
.page-hero-content{position:relative;z-index:2;}
.page-hero.has-bg .eyebrow{color:rgba(255,255,255,.82);}
.page-hero.has-bg .eyebrow::before{background:rgba(255,255,255,.5);}
.page-hero.has-bg h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.7);}
.page-hero.has-bg .section-text{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.4);}

/* ── HERO HOMEPAGE – kompakt ── */
.hero-home{position:relative;min-height:52vh;max-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--dark);}
.hero-home-bg{position:absolute;inset:0;z-index:0;}
.hero-home-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.hero-home-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(25,45,30,.72) 0%,rgba(25,45,30,.38) 55%,rgba(25,45,30,.12) 100%);}
.hero-home-content{position:relative;z-index:2;padding:48px 0;max-width:620px;}
.hero-home .eyebrow{color:rgba(255,255,255,.8);}
.hero-home .eyebrow::before{background:rgba(255,255,255,.5);}
.hero-home h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5);margin-bottom:16px;}
.hero-home h1 em{color:#b8d9c0;font-style:italic;}
.hero-home .hero-text{font-size:16px;font-weight:300;color:rgba(255,255,255,.88);margin-bottom:32px;line-height:1.8;text-shadow:0 1px 8px rgba(0,0,0,.3);}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hero-home.no-img{background:linear-gradient(135deg,var(--green-pale) 0%,var(--beige) 100%);}
.hero-home.no-img h1{color:var(--dark);text-shadow:none;}
.hero-home.no-img .hero-text{color:var(--mid);text-shadow:none;}
.hero-home.no-img .eyebrow{color:var(--green);}
.hero-home.no-img .eyebrow::before{background:var(--green);}

/* ── WHY ── */
.why{background:var(--white);}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.why-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;}
.why-card{background:var(--green-xpale);border:1px solid var(--border);padding:22px;border-radius:var(--radius);transition:all .3s;}
.why-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--shadow);background:var(--green-pale);}
.why-icon{font-size:22px;margin-bottom:10px;}
.why-card h4{margin-bottom:6px;}
.why-card p{font-size:13px;font-weight:300;color:var(--mid);line-height:1.65;font-family:var(--font-b);}
.why-img{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--green-pale);display:flex;align-items:center;justify-content:center;font-size:64px;}
.why-img img{width:100%;height:100%;object-fit:cover;}

/* ── SERVICES / MASSAGEN ── */
.services{background:var(--cream);}
.services-head{text-align:center;margin-bottom:48px;}
.services-head .section-text{max-width:540px;margin:0 auto;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.service-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 18px var(--shadow);transition:all .35s;display:flex;flex-direction:column;border:1px solid var(--border);}
.service-card:hover{transform:translateY(-5px);box-shadow:0 14px 48px var(--shadow-lg);border-color:var(--green-lt);}
.service-img{aspect-ratio:16/9;background:var(--green-pale);display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden;position:relative;}
.service-img img{width:100%;height:100%;object-fit:cover;}
.service-badge{position:absolute;top:12px;left:12px;background:var(--green);color:var(--white);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:50px;font-family:var(--font-b);}
.service-body{padding:24px;flex:1;display:flex;flex-direction:column;}
.service-card h3{margin-bottom:8px;font-size:22px;}
.service-card p{font-size:14px;font-weight:300;color:var(--mid);line-height:1.7;flex:1;margin-bottom:16px;font-family:var(--font-b);}
.service-meta{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border);margin-bottom:16px;}
.service-duration{font-size:13px;color:var(--light);font-family:var(--font-b);}
.service-price{font-family:var(--font-h);font-size:24px;color:var(--green);font-weight:600;}
.service-btns{display:flex;gap:8px;}
.service-btns .btn-primary,.service-btns .btn-outline{flex:1;font-size:11px;padding:10px 10px;}

/* ── PREISE ── */
.preise{background:var(--white);}
.preise-table{width:100%;border-collapse:collapse;}
.preise-table th{text-align:left;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--light);font-family:var(--font-b);padding:12px 16px;border-bottom:2px solid var(--border);}
.preise-table td{padding:16px;border-bottom:1px solid var(--border);font-family:var(--font-b);vertical-align:middle;}
.preise-table tr:last-child td{border-bottom:none;}
.preise-table tr:hover td{background:var(--green-xpale);}
.preise-table .t-name{font-size:16px;font-weight:500;}
.preise-table .t-dur{font-size:14px;color:var(--mid);}
.preise-table .t-price{font-family:var(--font-h);font-size:26px;color:var(--green);font-weight:600;}
.abo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;}
.abo-card{background:var(--green-xpale);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:30px;text-align:center;transition:all .3s;position:relative;overflow:hidden;}
.abo-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--green);}
.abo-card:hover{border-color:var(--green);box-shadow:0 8px 32px var(--shadow-md);}
.abo-card h3{margin-bottom:6px;}
.abo-price{font-family:var(--font-h);font-size:48px;font-weight:600;color:var(--green);line-height:1;margin:12px 0 6px;}
.abo-card p{font-size:13px;color:var(--mid);font-family:var(--font-b);margin-bottom:18px;}
.abo-note{background:var(--green-pale);border-radius:var(--radius);padding:16px 20px;margin-top:16px;font-size:14px;font-weight:300;color:var(--mid);font-family:var(--font-b);border-left:3px solid var(--green);}

/* ── ÜBER MICH ── */
.ueber-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start;}
.ueber-portrait{border-radius:var(--radius-lg);overflow:hidden;background:var(--green-pale);display:flex;align-items:center;justify-content:center;font-size:56px;position:sticky;top:90px;}
.ueber-portrait img{width:100%;height:auto;object-fit:cover;}
.ueber-content{font-size:16px;font-weight:300;line-height:1.9;color:var(--mid);font-family:var(--font-b);}
.ueber-content h3{margin:32px 0 12px;color:var(--dark);}
.ueber-content strong{font-weight:500;color:var(--dark);}
.ueber-content ul{margin:0 0 20px 20px;list-style:disc;}
.ueber-content ul li{margin-bottom:6px;}
.hinweis{background:var(--green-pale);border:1.5px solid var(--green-lt);border-radius:var(--radius);padding:18px 22px;margin-top:32px;font-size:14px;color:var(--mid);font-family:var(--font-b);}

/* ── TESTIMONIALS ── */
.testimonials{background:var(--green);}
.testimonials .eyebrow{color:rgba(255,255,255,.8);}
.testimonials .eyebrow::before{background:rgba(255,255,255,.5);}
.testimonials .section-title{color:var(--white);}
.testimonials .section-title em{color:rgba(255,255,255,.78);font-style:italic;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.testi-card{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);padding:28px;transition:all .3s;}
.testi-card:hover{background:rgba(255,255,255,.22);transform:translateY(-3px);}
.testi-stars{color:rgba(255,255,255,.9);letter-spacing:2px;margin-bottom:12px;}
.testi-text{font-family:var(--font-h);font-size:19px;font-weight:500;font-style:italic;color:#ffffff;line-height:1.5;margin-bottom:20px;}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:16px;font-weight:600;color:var(--white);flex-shrink:0;}
.testi-name{font-size:13px;color:#fff;font-weight:500;font-family:var(--font-b);}
.testi-location{font-size:12px;color:rgba(255,255,255,.65);font-family:var(--font-b);}

/* ── BOOKING ── */
.buchen{background:var(--cream);}
.booking-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start;}
.booking-steps{background:var(--white);border-radius:var(--radius-lg);padding:28px;border:1px solid var(--border);position:sticky;top:90px;}
.b-step-item{display:flex;gap:14px;padding-bottom:22px;position:relative;}
.b-step-item:not(:last-child)::after{content:'';position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--border);}
.step-num{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:17px;color:var(--light);flex-shrink:0;transition:all .3s;}
.step-num.done{background:var(--green);border-color:var(--green);color:var(--white);}
.step-num.current{border-color:var(--green);color:var(--green);}
.b-step-info h5{font-size:14px;margin-bottom:2px;}
.b-step-info p{font-size:12px;color:var(--light);font-family:var(--font-b);}
.booking-card{background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:0 4px 40px var(--shadow-md);border:1px solid var(--border);}
.bstep{display:none;}
.bstep.active{display:block;}
.massage-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.massage-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .25s;}
.massage-opt:hover{border-color:var(--green-lt);background:var(--green-xpale);}
.massage-opt.selected{border-color:var(--green);background:var(--green-pale);}
.opt-info strong{display:block;font-family:var(--font-b);font-size:15px;font-weight:500;}
.opt-info span{font-size:12px;color:var(--light);font-family:var(--font-b);}
.opt-price{font-family:var(--font-h);font-size:22px;color:var(--green);font-weight:600;}
.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-btn{background:var(--green-xpale);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:18px;color:var(--mid);transition:all .2s;}
.cal-btn:hover{background:var(--green-pale);border-color:var(--green);}
.slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.time-slot{padding:10px 6px;text-align:center;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--font-b);cursor:pointer;transition:all .2s;}
.time-slot:hover{border-color:var(--green);background:var(--green-xpale);}
.time-slot.on{background:var(--green);color:var(--white);border-color:var(--green);}
.time-slot.taken{opacity:.35;cursor:default;pointer-events:none;text-decoration:line-through;}
.f-row{margin-bottom:14px;}
.f-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.f-label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--light);margin-bottom:5px;font-family:var(--font-b);}
.f-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--cream);font-family:var(--font-b);font-size:14px;color:var(--dark);outline:none;transition:border-color .25s;}
.f-input:focus{border-color:var(--green);}
textarea.f-input{min-height:100px;resize:vertical;}
.f-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px;}
.f-back{background:none;border:none;cursor:pointer;font-size:13px;color:var(--mid);font-family:var(--font-b);text-decoration:underline;}
.b-summary{background:var(--green-xpale);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:20px;}
.b-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;font-family:var(--font-b);}
.b-row:last-child{border-bottom:none;}
.b-row span:first-child{color:var(--light);}
.booking-success{text-align:center;padding:24px 0;}
.booking-success .s-icon{font-size:56px;margin-bottom:18px;}

/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.contact-icon{width:44px;height:44px;background:var(--green-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.contact-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--light);font-family:var(--font-b);margin-bottom:2px;}
.contact-val{font-size:15px;font-weight:300;font-family:var(--font-b);}
.contact-form{background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:0 4px 28px var(--shadow);border:1px solid var(--border);}

/* ── BLOG ── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.blog-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all .3s;background:var(--cream);display:block;}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px var(--shadow-md);border-color:var(--green-lt);}
.blog-card.featured{grid-column:span 2;}
.blog-img{aspect-ratio:16/9;background:var(--green-pale);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:32px;}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.blog-card:hover .blog-img img{transform:scale(1.04);}
.blog-body{padding:20px;}
.blog-cat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:8px;font-family:var(--font-b);}
.blog-card h3{font-size:18px;margin-bottom:8px;}
.blog-card p{font-size:13px;font-weight:300;color:var(--mid);line-height:1.65;margin-bottom:14px;font-family:var(--font-b);}
.blog-meta{font-size:11px;color:var(--light);display:flex;gap:8px;font-family:var(--font-b);}

/* ── CTA ── */
.cta-section{background:var(--green-pale);padding:72px 0;text-align:center;}
.cta-section .section-text{max-width:480px;margin:0 auto 32px;}

/* ── FOOTER ── */
footer{background:#1e2d22;padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;}
.footer-brand .logo-title{color:rgba(255,255,255,.9);}
.footer-brand .logo-sub{color:var(--green-lt);}
.footer-brand p{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);margin-top:14px;max-width:230px;line-height:1.75;font-family:var(--font-b);}
.footer-col h5{color:rgba(255,255,255,.7);margin-bottom:14px;}
.footer-col li{margin-bottom:8px;}
.footer-col li a{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);font-family:var(--font-b);}
.footer-col li a:hover{color:var(--green-lt);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.3);font-family:var(--font-b);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.3);}
.footer-bottom a:hover{color:rgba(255,255,255,.6);}

/* ── ALERTS / BADGES ── */
.alert-ok{background:var(--green-pale);color:#2a6a3a;padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;font-family:var(--font-b);border-left:3px solid var(--green);}
.alert-err{background:#fde8e8;color:#8a2222;padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;font-family:var(--font-b);border-left:3px solid #c0392b;}
.badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:11px;font-family:var(--font-b);}
.badge-g{background:var(--green-pale);color:#2a6a3a;}
.badge-y{background:#fef9e7;color:#8a7022;}
.badge-r{background:#fde8e8;color:#8a2222;}
.badge-b{background:#e8f0fe;color:#1a3a8a;}

/* ── FADE UP ── */
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.fade-up:nth-child(2){transition-delay:.08s;}
.fade-up:nth-child(3){transition-delay:.16s;}
.fade-up:nth-child(4){transition-delay:.24s;}

/* ── COOKIE ── */
/* ── Cookie (always-visible icon + panel) ──── */
.cookie-wrap { position:fixed; bottom:20px; left:20px; z-index:1100; }
.cookie-toggle {
  width:46px; height:46px; border-radius:50%; border:none;
  background:#1e2d22; color:#fff; font-size:22px;
  cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.28);
  transition:transform .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center;
}
.cookie-toggle:hover { transform:scale(1.12); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.cookie-panel {
  position:absolute; bottom:56px; left:0;
  background:#1e2d22; color:rgba(255,255,255,.9);
  padding:18px; border-radius:16px; min-width:280px; max-width:320px;
  box-shadow:0 8px 40px rgba(0,0,0,.32);
  transform:translateY(8px) scale(.97); opacity:0; pointer-events:none;
  transition:transform .25s, opacity .25s;
}
.cookie-panel.open { transform:translateY(0) scale(1); opacity:1; pointer-events:all; }
.cookie-panel-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.cookie-close { margin-left:auto; background:transparent; border:none; color:rgba(255,255,255,.5); font-size:16px; cursor:pointer; padding:2px 6px; border-radius:6px; transition:color .2s; }
.cookie-close:hover { color:#fff; }
.cookie-text{font-size:13px;font-family:var(--font-b);margin-bottom:14px;line-height:1.6;}
.cookie-btns{display:flex;gap:8px;}
.cookie-accept{background:var(--green);color:#fff;border:none;padding:9px 18px;border-radius:50px;font-size:12px;letter-spacing:.06em;cursor:pointer;font-family:var(--font-b);transition:all .2s;flex:1;}
.cookie-accept:hover{background:var(--green-dk);}
.cookie-deny{background:transparent;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.2);padding:9px 14px;border-radius:50px;font-size:12px;cursor:pointer;font-family:var(--font-b);transition:all .2s;flex:1;}
.cookie-deny:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.45);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .why-grid{grid-template-columns:1fr;gap:36px;}
  .ueber-grid{grid-template-columns:1fr;}
  .ueber-portrait{position:static;aspect-ratio:16/9;max-height:280px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .booking-layout{grid-template-columns:1fr;}
  .booking-steps{position:static;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:768px){
  section{padding:52px 0;}
  .container{padding:0 16px;}
  nav.desktop-nav{display:none;}
  .hamburger{display:flex;}
  .hero-home{min-height:46vh;}
  .hero-btns{flex-direction:column;align-items:flex-start;}
  .services-grid{grid-template-columns:1fr;gap:18px;}
  .testi-grid{grid-template-columns:1fr;gap:14px;}
  .blog-grid{grid-template-columns:1fr;}
  .blog-card.featured{grid-column:span 1;}
  .abo-grid{grid-template-columns:1fr;}
  .f-row2{grid-template-columns:1fr;}
  .slots-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:24px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .why-features{grid-template-columns:1fr;}
}
@media(max-width:480px){
  h1{font-size:28px;}
  h2{font-size:22px;}
  .slots-grid{grid-template-columns:repeat(2,1fr);}
  .booking-card{padding:20px 16px;}
  /* Preise table responsive - show all columns stacked */
  .preise-table thead { display:none; }
  .preise-table tr { display:block; padding:14px 0; border-bottom:1px solid var(--border); }
  .preise-table td { display:inline-block; padding:2px 8px 2px 0; border:none; }
  .preise-table .t-name { display:block; font-size:15px; font-weight:600; padding:0 0 4px; }
  .preise-table .t-dur { font-size:12px; color:var(--mid); }
  .preise-table .t-price { font-size:20px; float:right; }
}

/* ════════════════════════════════════════════
   FIXES & ERGÄNZUNGEN
   ════════════════════════════════════════════ */

/* Hero Text immer sichtbar */
.hero-home h1 { font-size: clamp(26px, 5vw, 54px); line-height: 1.15; }
.hero-home .hero-text { font-size: 15px; margin-bottom: 28px; }

/* Buttons in hero IMMER sichtbar */
.hero-home .btn-outline {
  border: 2px solid rgba(255,255,255,0.75) !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(4px);
}
.hero-home .btn-outline:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: #fff !important;
}

/* Service buttons – Mehr erfahren IMMER sichtbar */
.service-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.service-btns .btn-primary,
.service-btns .btn-outline { flex: 1; min-width: 0; font-size: 11px !important; padding: 10px 8px !important; text-align: center; }
.service-btns .btn-outline {
  color: var(--green) !important;
  border: 1.5px solid var(--green) !important;
  background: transparent !important;
}
.service-btns .btn-outline:hover { background: var(--green) !important; color: #fff !important; }

/* Booking steps – kleine Screens */
.b-step-item { display: flex; gap: 12px; padding-bottom: 20px; position: relative; align-items: flex-start; }
.b-step-item:not(:last-child)::after { content:''; position:absolute; left:17px; top:38px; bottom:0; width:1px; background:var(--border); }

/* Progress dots */
#dot1,#dot2,#dot3,#dot4 { flex:1; height:4px; border-radius:2px; background:var(--border); transition:background .3s; }
#dot1 { background: var(--green); }

/* Massage opts */
.massage-opt { cursor: pointer; user-select: none; }
.massage-opt:hover { border-color: var(--green-lt); background: var(--green-xpale); }
.massage-opt.selected { border-color: var(--green) !important; background: var(--green-pale) !important; }

/* Time slots */
.time-slot { cursor: pointer; }
.time-slot.on { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.time-slot.taken { opacity: .4; cursor: not-allowed !important; pointer-events: none; }

/* ── MOBILE KOMPLETT FIX ── */
@media (max-width: 768px) {
  /* Hero */
  .hero-home { min-height: 50vh; max-height: 520px; }
  .hero-home-content { padding: 32px 0; }
  .hero-btns { flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline { width: 100%; max-width: 280px; justify-content: center; }

  /* Massagen Cards */
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-btns { flex-direction: row; }
  .service-btns .btn-primary,
  .service-btns .btn-outline { flex: 1; justify-content: center; }

  /* Preise */
  .preise .container > div { grid-template-columns: 1fr !important; gap: 36px !important; }
  .abo-grid { grid-template-columns: 1fr; }
  .abo-price { font-size: 40px; }

  /* Über mich */
  .ueber-grid { grid-template-columns: 1fr !important; }
  .ueber-portrait { position: static !important; aspect-ratio: 3/2; max-height: 280px; }

  /* Booking */
  .booking-layout { grid-template-columns: 1fr !important; gap: 20px; }
  .booking-steps { position: static !important; display: none; }
  .booking-card { padding: 22px 16px; }
  .f-row2 { grid-template-columns: 1fr !important; }
  .slots-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .f-nav { flex-wrap: wrap; gap: 10px; }
  .f-nav .btn-primary { flex: 1; justify-content: center; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.featured { grid-column: span 1; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 22px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* Why */
  .why-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .why-features { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px; }

  /* Page hero */
  .page-hero { padding: 44px 0 36px; min-height: 160px; }
  .page-hero h1 { font-size: 28px; }
}

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
  .service-btns { flex-direction: column; }
  .service-btns .btn-primary,
  .service-btns .btn-outline { width: 100%; }
  .abo-price { font-size: 36px; }
  .why-features { grid-template-columns: 1fr; }
  .testi-text { font-size: 17px; }
}

/* ════════════════════════════════════════════
   DARK MODE + COLOR SCHEMES
   ════════════════════════════════════════════ */

body[data-scheme="dark"] {
  --green: #8bbf96; --green-dk: #6b9e78; --green-lt: #a8d4b0;
  --green-pale: #2a3f30; --green-xpale: #1e2e23;
  --cream: #141e18; --white: #1a2e20; --beige: #1f301f;
  --dark: #e8f4ea; --mid: #b0c8b4; --light: #7a9e82;
  --border: #2e4635; --shadow: rgba(0,0,0,.4); --shadow-md: rgba(0,0,0,.5);
}
body[data-scheme="sage"] {
  --green: #7a9e82; --green-dk: #5d8465; --green-pale: #e4ede6; --green-xpale: #f1f5f1;
}
body[data-scheme="forest"] {
  --green: #4a7c59; --green-dk: #3a6248; --green-lt: #6a9c78;
  --green-pale: #dce8de; --green-xpale: #edf3ee;
}
body[data-scheme="stone"] {
  --green: #8a9a8e; --green-dk: #6d7d70; --green-lt: #a5b2a8;
  --green-pale: #e6e9e7; --green-xpale: #f3f4f3;
}

/* ════════════════════════════════════════════
   PREISE TABELLE MOBILE FIX
   ════════════════════════════════════════════ */

.preise-table { width:100%; border-collapse:collapse; }
.preise-table thead tr { background:var(--green-xpale); }
.preise-table th { text-align:left; padding:10px 14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--light); font-family:var(--font-b); }
.preise-table td { padding:13px 14px; border-bottom:1px solid var(--border); font-family:var(--font-b); font-size:14px; }
.preise-table .t-name { font-weight:500; }
.preise-table .t-dur { color:var(--light); font-size:13px; }
.preise-table .t-price { font-family:var(--font-h); font-size:22px; color:var(--green); text-align:right; }

@media(max-width:640px) {
  /* Preise table: stack on mobile */
  .preise-table thead { display:none; }
  .preise-table tr { display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:14px 0; border-bottom:1px solid var(--border); }
  .preise-table td { padding:2px 0; border:none; }
  .preise-table .t-name { grid-column:1/-1; font-size:15px; font-weight:600; }
  .preise-table .t-dur { grid-column:1; font-size:12px; }
  .preise-table .t-price { grid-column:2; text-align:right; font-size:20px; }
}

/* ════════════════════════════════════════════
   GOOGLE REVIEW BUTTON
   ════════════════════════════════════════════ */
.google-review-btn {
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:#3c4043;
  border:1.5px solid #e0e0e0; border-radius:50px; padding:11px 22px; text-decoration:none;
  font-family:var(--font-b); font-size:13px; font-weight:500; transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.google-review-btn:hover { box-shadow:0 4px 16px rgba(0,0,0,.15); transform:translateY(-1px); border-color:#ccc; }
.google-review-btn svg { flex-shrink:0; }

/* ════════════════════════════════════════════
   ÜBER MICH – CV TIMELINE FIXES
   ════════════════════════════════════════════ */
@media(max-width:1024px) {
  .ueber-timeline-line { display:none; }
}

/* ════════════════════════════════════════════
   KONTAKT PAGE IMPROVEMENTS
   ════════════════════════════════════════════ */
.contact-item { display:flex; gap:14px; align-items:flex-start; }
.contact-icon { font-size:20px; margin-top:2px; flex-shrink:0; width:38px; height:38px; background:var(--green-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.contact-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--light); font-family:var(--font-b); margin-bottom:2px; }
.contact-val { font-size:15px; color:var(--dark); font-family:var(--font-b); }
.contact-form { background:var(--white); border-radius:24px; padding:36px; border:1px solid var(--border); box-shadow:0 4px 32px var(--shadow); }
.f-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px) { .f-row2 { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════
   BLOG MOBILE FIXES
   ════════════════════════════════════════════ */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 40px;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 4px 32px var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.blog-featured-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(44,44,42,.18); }
.blog-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.blog-article-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background:#fff; display:block; text-decoration:none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.blog-article-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(44,44,42,.15); border-color:var(--green-lt); }

/* Category chips */
.cat-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.cat-chip { border-radius:50px; padding:7px 18px; font-size:12px; letter-spacing:.08em; font-family:var(--font-b); cursor:pointer; border:1.5px solid var(--border); background:var(--white); color:var(--mid); text-decoration:none; transition:all .2s; white-space:nowrap; }
.cat-chip.active, .cat-chip:hover { background:var(--green); color:#fff; border-color:var(--green); }
.cat-chip span { background:rgba(255,255,255,.25); border-radius:50px; padding:1px 7px; font-size:10px; margin-left:4px; }

/* Pagination */
.blog-pagination { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pag-btn { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:14px; color:var(--dark); font-family:var(--font-b); transition:all .2s; }
.pag-btn:hover { border-color:var(--green); color:var(--green); }
.pag-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.pag-btn.arrow { font-size:18px; }

@media(max-width:768px) {
  .blog-featured-card { grid-template-columns:1fr !important; }
  .blog-featured-card > div:first-child { aspect-ratio:16/9 !important; }
  .blog-3col { grid-template-columns: 1fr !important; gap:16px; }
  .cat-chips { gap:6px; }
  .cat-chip { font-size:11px; padding:6px 14px; }
}
@media(max-width:480px) {
  .blog-3col { grid-template-columns: 1fr !important; }
}

/* Blog Post Layout */
.blog-post-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:52px; align-items:start; }
@media(max-width:900px) {
  .blog-post-layout { display:block !important; }
  .blog-post-layout aside { display:none !important; }
  .blog-mobile-cta { display:flex !important; }
}

/* Contact Grid Mobile */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
@media(max-width:960px) {
  .contact-grid { grid-template-columns:1fr !important; gap:32px; }
}

/* Services grid mobile */
@media(max-width:600px) {
  .services-grid { grid-template-columns:1fr !important; }
  .service-card { max-width:100%; }
  .booking-layout { grid-template-columns:1fr !important; }
  .booking-steps { display:none; }
}

/* Massage detail layout – defined below */

/* ── Home Blog Grid ───────────────────────────── */
.home-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.home-blog-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  display: block;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.home-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px var(--shadow-md);
}
@media(max-width: 900px) {
  .home-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 640px) {
  .home-blog-grid { grid-template-columns: 1fr; }
}

/* ── Massage Detail Layout ────────────────────── */
.massage-detail-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 48px;
  align-items: start;
}
@media(max-width: 900px) {
  .massage-detail-layout {
    display: block !important;
  }
  .massage-detail-layout aside {
    display: none !important;  /* sidebar hidden; mobile CTA shows instead */
  }
  .massage-mobile-others {
    display: block !important;
  }
}

/* Massage hero image – portrait ratio on mobile */
.massage-hero-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/7; margin-bottom: 32px; }
@media(max-width: 640px) {
  .massage-hero-img { aspect-ratio: 4/3 !important; border-radius: 14px; }
}

/* Dur/price row */
.massage-meta-row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 24px; }
@media(max-width: 640px) {
  .massage-meta-row { gap: 20px; }
  .massage-meta-row .price-display { font-size: 26px !important; }
}

/* Mobile others list */
.massage-mobile-others { display: none; }
@media(max-width: 900px) {
  .massage-mobile-others { display: block !important; }
}

/* ── Booking Progress Circles ─────────── */
#dot1,#dot2,#dot3,#dot4 {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--light);
  transition: all .35s; flex-shrink: 0;
  font-family: var(--font-b);
}
#line2,#line3,#line4 {
  height: 2px; background: var(--border); border-radius: 1px;
  transition: background .35s;
}

/* ═══════════════════════════════════════
   GALLERY CAROUSEL – Startseite
   ═══════════════════════════════════════ */
.gallery-section {
  background: var(--cream);
  padding: 80px 0;
}
.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 14px;
}
.carousel-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(44,44,42,.14);
  background: #000;
  user-select: none;
}
.carousel {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.carousel-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 16/7;
  overflow: hidden;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(20,32,22,.72));
  color: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 300;
  padding: 32px 24px 18px;
  pointer-events: none;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--dark);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.carousel-btn:hover {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
  transform: translateY(-50%) scale(1.08);
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  transition: all .25s;
  padding: 0;
}
.carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
  width: 24px;
  border-radius: 4px;
}
@media(max-width:640px) {
  .carousel-slide { aspect-ratio: 4/3; }
  .carousel-btn { width: 38px; height: 38px; font-size: 16px; }
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
}


/* ════════════════════════════════════════════
   MOBILE FIX v2 – alle Seiten
   ════════════════════════════════════════════ */

/* ── KONTAKT – mobile ── */
.contact-form { padding: 28px; }
@media(max-width:640px) {
  .contact-form { padding: 20px 16px; border-radius: 16px; }
  /* Quick bar wraps nicely */
  .quick-bar-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
  /* Map doesn't overflow */
  .contact-map-wrap { border-radius: 14px; overflow: hidden; }
  .contact-map-wrap iframe { width: 100% !important; }
  /* Öffnungszeiten table clean */
  .hours-row { font-size: 13px; }
  /* Hinweis box */
  .hinweis { font-size: 13px; padding: 14px; }
}

/* ── BLOG-POST – mobile sidebar + content ── */
@media(max-width:900px) {
  .blog-post-layout {
    display: block !important; /* override inline grid */
  }
  .blog-post-layout > article {
    margin-bottom: 0;
  }
  .blog-post-layout > aside {
    display: none !important; /* sidebar hidden on mobile */
  }
  /* Back-to-articles + book CTA at bottom */
  .blog-mobile-cta { display: flex !important; }
}
@media(max-width:640px) {
  /* Hero title */
  .blog-hero h1 { font-size: 26px !important; }
  /* Article content */
  .blog-content { font-size: 16px !important; line-height: 1.8; }
  .blog-content h2 { font-size: 22px; }
  .blog-content h3 { font-size: 19px; }
  /* Author footer card */
  .blog-author-card { flex-direction: column; gap: 12px; text-align: center; }
  .blog-author-card img, .blog-author-card > div:first-child { align-self: center; }
  /* Featured image */
  .blog-featured-img { aspect-ratio: 4/3 !important; }
}

/* ── GALERIE (ueber-mich.php) – mobile ── */
#galleryGrid {
  columns: 3;
  column-gap: 14px;
}
@media(max-width:768px) {
  #galleryGrid { columns: 2 !important; column-gap: 10px; }
}
@media(max-width:480px) {
  #galleryGrid { columns: 1 !important; }
}

/* ── BUCHEN – mobile progress + form ── */
@media(max-width:640px) {
  /* Step dots: smaller on tiny screens */
  #dot1,#dot2,#dot3,#dot4 {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  /* Step labels: shorter on tiny */
  [id^="dotlbl"] {
    font-size: 9px !important;
    max-width: 60px !important;
    letter-spacing: 0 !important;
  }
  /* Massage options: full width, bigger touch target */
  .massage-opt {
    padding: 12px 14px !important;
  }
  .massage-opt-img {
    width: 52px !important;
    height: 52px !important;
  }
  /* Date input */
  #bookDate {
    font-size: 16px; /* prevents iOS zoom */
    padding: 12px 14px;
  }
  /* Time slots: 3 columns on phone */
  .slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .time-slot {
    padding: 10px 4px !important;
    font-size: 13px !important;
  }
  /* Form inputs: no iOS zoom */
  .f-input {
    font-size: 16px !important;
  }
  /* Booking card padding */
  .booking-card {
    padding: 18px 14px !important;
    border-radius: 16px;
  }
  /* Progress bar section */
  .progress-bar-wrap {
    margin-bottom: 24px !important;
  }
}
@media(max-width:400px) {
  /* Extra small: only icons in step dots */
  [id^="dotlbl"] { display: none !important; }
  #dot1,#dot2,#dot3,#dot4 { width: 28px !important; height: 28px !important; font-size: 12px !important; }
}

/* ── GENERAL MOBILE polish ── */
@media(max-width:640px) {
  /* Page hero padding */
  .page-hero { padding: 36px 0 28px !important; min-height: 130px !important; }
  /* Quick contact bar wraps to column */
  .quick-bar-inner { flex-direction: column !important; gap: 8px !important; }
  /* Section padding tight */
  section { padding: 48px 0 !important; }
  /* Container side padding */
  .container { padding: 0 14px !important; }
  /* Buttons full width in pairs */
  .btn-pair { flex-direction: column !important; }
  .btn-pair > * { width: 100% !important; justify-content: center !important; }
}

/* ── BLOG HERO mobile ── */
@media(max-width:640px) {
  .blog-hero { padding: 32px 0 0 !important; }
  .blog-hero h1 { font-size: 24px !important; line-height: 1.2; }
  .blog-hero .container { padding: 0 14px; }
  /* Meta row: hide separator | on wrap */
  .blog-meta-row { gap: 10px !important; }
}

/* ── KONTAKT quick bar mobile ── */
@media(max-width:520px) {
  .quick-bar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 4px 0;
  }
}

/* ── BUCHEN step labels responsive ── */
@media(max-width:480px) {
  [id^="dotlbl"] {
    font-size: 8px !important;
    max-width: 52px !important;
  }
}
@media(max-width:360px) {
  [id^="dotlbl"] { display: none !important; }
  #dot1,#dot2,#dot3,#dot4 { width: 26px !important; height: 26px !important; font-size: 11px !important; }
}

/* ── GALLERY lightbox touch friendly ── */
@media(max-width:640px) {
  #lb { padding: 12px !important; }
  #lbImg { max-width: 100% !important; max-height: 80vh !important; border-radius: 8px !important; }
}

/* ── Massage opt mobile: shrink price ── */
@media(max-width:400px) {
  .opt-price { font-size: 18px !important; }
  .opt-info strong { font-size: 14px; }
  .massage-opt { padding: 10px 12px !important; gap: 10px !important; }
}

/* ── MASSAGE DETAIL – extra mobile polish ── */
@media(max-width: 640px) {
  /* Page hero – smaller on phone */
  .page-hero.has-bg { min-height: 180px !important; }
  .page-hero h1 { font-size: 26px !important; }
  .page-hero .section-text { font-size: 14px !important; }

  /* Description text */
  .massage-desc-text { font-size: 15px !important; line-height: 1.85 !important; }

  /* Buttons full width on very small */
  .massage-btns { flex-direction: column !important; }
  .massage-btns > a { width: 100% !important; justify-content: center !important; }

  /* Section padding */
  section[style*="padding:64px"] { padding: 40px 0 !important; }
}
@media(max-width: 400px) {
  .massage-meta-row { flex-direction: column; gap: 12px; }
}