/* =====================================================================
   Praxisräume zur Miete — immo.causa-logic.ch
   Onepager für eine ehemalige Arztpraxis (Vermietung)
   Design: ruhig, klinisch-premium, ehrlich. Petrol primär + Eiche/Amber sekundär.
   ===================================================================== */

:root{
  --petrol:#0F3D3E;       /* Primärakzent (CTA, Marke) */
  --petrol-2:#14635F;     /* heller – nur Hover/grosse Flächen */
  --oak:#8A6B4A;          /* Eiche/Amber – warme Sekundärnote */
  --amber:#B07A3C;        /* wärmerer Akzent für dunkle Sektionen */
  --cream:#FBFAF7;        /* Seitenhintergrund */
  --white:#FFFFFF;
  --ink:#1A1D1C;          /* Text/Headlines */
  --grey:#5E625F;         /* Sekundärtext (kontraststark genug für AA) */
  --line:#E7E3DB;
  --shadow-sm:0 1px 2px rgba(26,29,28,.04), 0 4px 14px rgba(26,29,28,.05);
  --shadow-md:0 6px 24px rgba(26,29,28,.08), 0 2px 6px rgba(26,29,28,.05);
  --shadow-lg:0 24px 60px rgba(15,61,62,.16);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,5vw,64px)}
.overline{
  font-family:"Inter"; font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--petrol);
  display:inline-flex; align-items:center; gap:10px;
}
.overline::before{content:""; width:26px; height:2px; background:var(--petrol); opacity:.9}
.muted{color:var(--grey)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  min-height:52px; line-height:1;
}
.btn-primary{background:var(--petrol); color:#fff; box-shadow:0 8px 22px rgba(15,61,62,.22)}
.btn-primary:hover{background:var(--petrol-2); transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,61,62,.28)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--petrol); color:var(--petrol); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--petrol)}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-amber{background:var(--amber); color:#fff}
.btn-amber:hover{background:#9c6a31; transform:translateY(-2px); box-shadow:0 14px 30px rgba(176,122,60,.32)}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,247,.82); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
header.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(26,29,28,.02)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:.01em}
.brand .mark{
  width:36px; height:36px; border-radius:10px; background:var(--petrol);
  display:grid; place-items:center; color:#fff; flex:none;
}
.brand .mark svg{width:20px; height:20px}
.brand small{display:block; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); font-weight:600; line-height:1.3}
.brand b{font-weight:600; font-size:1.02rem; display:block; line-height:1.1}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{font-size:.92rem; font-weight:500; color:var(--grey); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav .btn{padding:11px 20px; min-height:44px}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:46px; height:46px; cursor:pointer; align-items:center; justify-content:center}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--ink); position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink)}
.menu-toggle span::before{top:-6px} .menu-toggle span::after{top:6px}

/* ---------- Mobile Off-Canvas Nav ---------- */
.mnav{position:fixed; inset:0; z-index:90; visibility:hidden}
.mnav[data-open="true"]{visibility:visible}
.mnav-backdrop{position:absolute; inset:0; background:rgba(12,24,24,.46); opacity:0; transition:opacity .3s var(--ease)}
.mnav[data-open="true"] .mnav-backdrop{opacity:1}
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--cream); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column; padding:22px 24px 28px;
}
.mnav[data-open="true"] .mnav-panel{transform:none}
.mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.mnav-close{background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:44px; cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.mnav-close svg{width:20px; height:20px}
.mnav-links{display:flex; flex-direction:column; margin:18px 0; border-top:1px solid var(--line)}
.mnav-links a{padding:16px 4px; font-size:1.05rem; font-weight:500; border-bottom:1px solid var(--line); transition:color .2s, padding-left .2s}
.mnav-links a:hover{color:var(--petrol); padding-left:8px}
.mnav-cta{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.mnav-cta .btn{width:100%}
@media (prefers-reduced-motion:reduce){
  .mnav-panel,.mnav-backdrop{transition:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; padding:clamp(48px,6vw,88px) 0 0}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(48px,5vw,80px); align-items:center}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.05rem); margin:22px 0 0}
.hero h1 em{font-style:italic; color:var(--petrol); white-space:nowrap}
.hero-sub{font-size:1.15rem; color:var(--grey); margin-top:22px; max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-note{margin-top:22px; font-size:.86rem; color:var(--grey); display:flex; align-items:center; gap:9px}
.dot{width:9px; height:9px; border-radius:50%; background:#4FA88B; flex:none; animation:ledPulse 1.8s ease-out infinite}
@keyframes ledPulse{
  0%{box-shadow:0 0 0 0 rgba(79,168,139,.55), 0 0 5px 1px rgba(79,168,139,.6)}
  70%{box-shadow:0 0 0 9px rgba(79,168,139,0), 0 0 8px 2px rgba(79,168,139,.85)}
  100%{box-shadow:0 0 0 0 rgba(79,168,139,0), 0 0 5px 1px rgba(79,168,139,.6)}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none; box-shadow:0 0 0 4px rgba(79,168,139,.18)} }
.hero-media{position:relative}
.hero-media .frame{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; background:#eee;
}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-badge{
  position:absolute; left:-26px; bottom:34px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--shadow-md); display:flex; gap:16px; align-items:center;
}
.hero-badge .big{font-family:"Fraunces"; font-size:1.7rem; line-height:1; color:var(--petrol)}
.hero-badge .lbl{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); font-weight:600; margin-top:4px}
.hero-badge .sep{width:1px; height:38px; background:var(--line)}

/* ---------- Stat strip ---------- */
.stripwrap{margin-top:clamp(64px,7vw,96px)}
.strip{
  background:var(--white); border:1px solid var(--line); border-top:3px solid var(--petrol); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
}
.strip .cell{padding:clamp(28px,2.4vw,38px); border-right:1px solid var(--line)}
.strip .cell:last-child{border-right:none}
.strip .k{font-family:"Fraunces"; font-size:2rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.strip .k span{color:var(--petrol); font-size:1.05rem; vertical-align:.2em; margin-left:2px}
.strip .v{margin-top:10px; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); font-weight:600}

/* ---------- Sections ---------- */
section{padding:clamp(88px,10vw,132px) 0}
section[id]{scroll-margin-top:88px}
.sec-head{max-width:720px; margin-bottom:clamp(48px,5vw,72px)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .overline{justify-content:center}
.sec-head h2{font-size:clamp(2.05rem,3.4vw,3rem); margin-top:18px}
.sec-head p{margin-top:20px; font-size:1.08rem; color:var(--grey); max-width:60ch}
.band-white{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* Intro split */
.intro-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(48px,6vw,84px); align-items:center}
.intro-text h2{font-size:clamp(2.05rem,3.4vw,3rem); margin-top:18px}
.intro-text .lead{font-size:1.18rem; color:var(--ink); margin-top:22px; line-height:1.6}
.intro-text p{max-width:62ch}
.intro-text p+p{margin-top:18px}
.intro-img{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3}
.intro-img img{width:100%; height:100%; object-fit:cover}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.pill{font-size:.82rem; font-weight:600; color:var(--petrol); background:rgba(15,61,62,.06); border:1px solid rgba(15,61,62,.1); padding:8px 15px; border-radius:999px}

/* Dunkle Highlight-Sektion (z.B. "Das Objekt") — Petrol-Verlauf, heller Text */
.band-dark{background:linear-gradient(150deg,#123f40,#0c2c2c 60%,#111615); color:#fff; border:none}
.band-dark .overline{color:#e7c79a}
.band-dark .overline::before{background:var(--amber); opacity:1}
.band-dark h2{color:#fff}
.band-dark .intro-text .lead{color:#fff}
.band-dark .intro-text p{color:rgba(255,255,255,.82)}
.band-dark .intro-img{box-shadow:0 30px 70px rgba(0,0,0,.4)}
.band-dark .pill{color:#e7c79a; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2)}

/* Facts grid */
.facts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
.fact{background:#fff; padding:clamp(30px,2.5vw,40px); transition:background .25s var(--ease)}
.fact:hover{background:#FCFBF8}
.fact .ico{width:42px; height:42px; border-radius:11px; background:rgba(15,61,62,.07); display:grid; place-items:center; color:var(--petrol); margin-bottom:18px}
.fact .ico svg{width:22px; height:22px}
.fact .num{font-family:"Fraunces"; font-size:1.6rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--petrol)}
.fact .desc{margin-top:10px; font-size:.92rem; color:var(--grey)}
.fact .lab{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--petrol); font-weight:600; margin-bottom:8px}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:200px; gap:16px}
.g-item{position:relative; overflow:hidden; border-radius:var(--r-md); cursor:zoom-in; background:#eee; box-shadow:var(--shadow-sm); margin:0}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(15,61,62,.32),transparent 45%); opacity:0; transition:opacity .3s}
.g-item:hover::after{opacity:1}
.g-cap{position:absolute; left:16px; bottom:14px; color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.02em; z-index:2; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s}
.g-item:hover .g-cap{opacity:1; transform:translateY(0)}
.g-zoom{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; z-index:2; opacity:0; transform:scale(.8); transition:.3s}
.g-item:hover .g-zoom{opacity:1; transform:scale(1)}
.g-zoom svg{width:16px; height:16px; color:var(--petrol)}
.span-6{grid-column:span 6} .span-4{grid-column:span 4} .span-3{grid-column:span 3} .span-8{grid-column:span 8}
.row-2{grid-row:span 2}
.tag-feature{position:absolute; top:14px; left:14px; z-index:2; background:rgba(15,61,62,.92); color:#fff; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:999px}

/* Sauna – dunkle Highlight-Sektion (Wow-Moment) */
.sauna{background:linear-gradient(150deg,#123f40,#0c2c2c 60%,#111615); color:#fff; border:none}
.sauna-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.sauna-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); aspect-ratio:4/3; cursor:zoom-in}
.sauna-media img{width:100%; height:100%; object-fit:cover}
.sauna .overline{color:#e7c79a}
.sauna .overline::before{background:var(--amber); opacity:1}
.sauna h2{color:#fff; font-size:clamp(2.1rem,4vw,3rem); margin-top:18px}
.sauna h2 em{font-style:italic; color:#e7c79a}
.sauna p{color:rgba(255,255,255,.8); margin-top:20px; font-size:1.08rem}
.sauna .mini{display:flex; gap:34px; margin-top:30px; flex-wrap:wrap}
.sauna .mini .n{font-family:"Fraunces"; font-size:2rem; color:#e7c79a; line-height:1}
.sauna .mini .t{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); font-weight:600; margin-top:8px}

/* Features */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:34px 30px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(15,61,62,.25)}
.feat .ico{width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg,var(--petrol),var(--petrol-2)); display:grid; place-items:center; color:#fff; margin-bottom:20px}
.feat .ico svg{width:24px; height:24px}
.feat h3{font-size:1.22rem; font-weight:600}
.feat p{margin-top:10px; font-size:.95rem; color:var(--grey)}
.feat.highlight{background:linear-gradient(160deg,#0F3D3E,#0c3231); color:#fff; border-color:transparent}
.feat.highlight .ico{background:rgba(255,255,255,.14)}
.feat.highlight p{color:rgba(255,255,255,.8)}

/* Nutzung / Für wen */
.use-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.use-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:32px 30px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.use-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(15,61,62,.25)}
.use-card.lead-card{border-color:rgba(15,61,62,.35); box-shadow:var(--shadow-md)}
.use-card .ico{width:50px; height:50px; border-radius:13px; background:rgba(15,61,62,.07); display:grid; place-items:center; color:var(--petrol); margin-bottom:20px}
.use-card .ico svg{width:25px; height:25px}
.use-card h3{font-size:1.25rem; font-weight:600}
.use-card .sub{margin-top:8px; font-size:.92rem; color:var(--grey)}
.use-card ul{list-style:none; padding:0; margin:18px 0 0}
.use-card li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; padding:7px 0; color:var(--ink)}
.use-card li svg{width:17px; height:17px; color:var(--petrol); flex:none; margin-top:3px}
.badge-lead{position:absolute; top:-12px; left:30px; background:var(--petrol); color:#fff; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:6px 13px; border-radius:999px; box-shadow:var(--shadow-sm)}

/* Floorplan */
.plan-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:center}
.plan-img{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-md); cursor:zoom-in; margin:0}
.plan-img img{width:100%}
.plan-list{list-style:none; padding:0; margin:24px 0 0}
.plan-list li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.96rem}
.plan-list li:last-child{border-bottom:none}
.plan-list .n{font-family:"Fraunces"; color:var(--petrol); font-size:1.05rem; min-width:30px}
.plan-note{margin-top:20px; font-size:.86rem; color:var(--oak); font-weight:600}

/* Location */
.loc-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:54px; align-items:center}
.loc-card{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px}
.loc-embed{display:block; width:100%; aspect-ratio:16/10; border:0; border-radius:var(--r-md); background:#eef1ee}
.loc-map{
  border-radius:var(--r-md); aspect-ratio:16/10; position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(15,61,62,.05) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(15,61,62,.05) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(135deg,#eef1ee,#f6f4ef);
  display:grid; place-items:center;
}
.loc-pin{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--petrol)}
.loc-pin .ring{width:18px; height:18px; border-radius:50%; background:var(--petrol); box-shadow:0 0 0 8px rgba(15,61,62,.12), 0 0 0 18px rgba(15,61,62,.06)}
.loc-pin small{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.loc-meta{display:flex; flex-direction:column; gap:18px; margin-top:8px}
.loc-meta .row{display:flex; gap:14px; align-items:flex-start}
.loc-meta .ico{color:var(--petrol); margin-top:2px}
.loc-meta .ico svg{width:20px;height:20px}
.loc-meta b{display:block; font-weight:600}
.loc-meta span{font-size:.92rem; color:var(--grey)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:54px}
.contact-aside h2{font-size:clamp(2rem,3.6vw,2.75rem); margin-top:18px}
.contact-aside .lead{color:var(--grey); margin-top:20px; font-size:1.05rem}
.contact-card{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; margin-top:18px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.contact-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.contact-card .ico{width:44px; height:44px; border-radius:12px; background:rgba(15,61,62,.07); display:grid; place-items:center; color:var(--petrol); flex:none}
.contact-card .ico svg{width:22px;height:22px}
.contact-card small{display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); font-weight:600}
.contact-card b{font-weight:600}
form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow-md)}
.field{margin-bottom:20px}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; letter-spacing:.01em}
.field .req{color:var(--oak)}
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:.96rem; color:var(--ink); background:var(--cream);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--petrol); background:#fff; box-shadow:0 0 0 3px rgba(15,61,62,.12);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0473a; box-shadow:0 0 0 3px rgba(192,71,58,.12)}
.err{display:none; color:#c0473a; font-size:.8rem; margin-top:6px}
.err.show{display:block}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.seg{display:flex; gap:10px; flex-wrap:wrap}
.seg label{
  flex:1; min-width:90px; cursor:pointer; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px; text-align:center; font-size:.9rem; font-weight:500; transition:.2s; background:var(--cream); margin:0;
}
.seg input{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.seg label:hover{border-color:var(--petrol)}
.seg label:has(input:checked){background:rgba(15,61,62,.07); border-color:var(--petrol); color:var(--petrol); font-weight:600}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.check{display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--grey); cursor:pointer}
.check input{margin-top:3px; width:18px; height:18px; accent-color:var(--petrol); flex:none}
.check a{color:var(--petrol); text-decoration:underline}
.form-foot{text-align:center; font-size:.78rem; color:var(--grey); margin-top:16px}
.form-error{display:none; background:rgba(192,71,58,.08); border:1px solid rgba(192,71,58,.3); color:#9a3528; border-radius:var(--r-sm); padding:14px 16px; font-size:.88rem; margin-bottom:18px}
.form-error.show{display:block}
.form-error a{color:#9a3528; text-decoration:underline; font-weight:600}
.form-error.info{background:rgba(15,61,62,.06); border-color:rgba(15,61,62,.25); color:var(--petrol)}
.form-success{display:none; text-align:center; padding:30px 10px}
.form-success.show{display:block; animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
.form-success .ok{width:62px; height:62px; border-radius:50%; background:rgba(79,168,139,.14); color:#3f8a6f; display:grid; place-items:center; margin:0 auto 18px}
.form-success h3{font-size:1.5rem}
.form-success p{color:var(--grey); margin-top:10px}
.btn-busy{opacity:.7; pointer-events:none}

/* Footer */
footer{background:var(--petrol); color:rgba(255,255,255,.78); padding:var(--s6) 0 36px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14)}
footer .brand b{color:#fff} footer .brand small{color:rgba(255,255,255,.6)}
footer .brand .mark{background:#fff; color:var(--petrol)}
.foot-about{max-width:330px; margin-top:18px; font-size:.94rem}
.foot-col h4{font-family:"Inter"; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 16px; font-weight:600}
.foot-col a,.foot-col p{display:block; color:rgba(255,255,255,.82); font-size:.94rem; margin-bottom:10px; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; font-size:.84rem; color:rgba(255,255,255,.55)}
.foot-bottom a{color:rgba(255,255,255,.7)} .foot-bottom a:hover{color:#fff}

/* =====================================================
   Interaktiver Grundriss
   ===================================================== */
.plan-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:clamp(20px,3vw,40px); position:relative}
.plan-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md)}
.plan-wrap{position:relative; min-width:560px; max-width:1040px; margin:0 auto}
.plan-wrap > img{width:100%; height:auto; display:block}
.plan-svg{position:absolute; inset:0; width:100%; height:100%}
.plan-zone{fill:rgba(15,61,62,.045); stroke:rgba(15,61,62,0); stroke-width:2; cursor:pointer; transition:fill .2s var(--ease), stroke .2s var(--ease); outline:none}
.plan-zone:hover{fill:rgba(15,61,62,.16); stroke:rgba(15,61,62,.75)}
.plan-zone:focus-visible{fill:rgba(15,61,62,.16); stroke:var(--petrol); stroke-width:3}
.plan-zone--info{fill:transparent; cursor:default}
.plan-zone--info:hover{fill:rgba(15,61,62,.05); stroke:rgba(15,61,62,.25)}
@media (prefers-reduced-motion:reduce){ .plan-zone{transition:none} }
.plan-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:var(--ink); color:#fff; border-radius:10px;
  padding:9px 13px; font-size:.85rem; line-height:1.35;
  box-shadow:0 10px 28px rgba(0,0,0,.28); white-space:nowrap;
}
.plan-tip b{display:block; font-weight:600}
.plan-tip span{color:rgba(255,255,255,.75); font-size:.78rem}
.plan-tip .tip-count{display:block; color:#8ed0c0; font-weight:600; margin-top:2px}
.plan-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:16px 6px 2px}
.plan-hint{display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--grey)}
.plan-hint svg{width:18px; height:18px; color:var(--petrol); flex:none}
.plan-foot .btn{padding:11px 20px; min-height:44px}

/* Raumkarten-Grid */
.room-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:var(--s4)}
.room-card{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:0; overflow:hidden; font:inherit; color:inherit;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.room-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(15,61,62,.3)}
.rc-img{display:block; aspect-ratio:4/3; overflow:hidden; background:#eee}
.rc-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.room-card:hover .rc-img img{transform:scale(1.06)}
.rc-body{display:block; padding:12px 14px 14px}
.rc-body b{display:block; font-weight:600; font-size:.95rem}
.rc-meta{display:block; font-size:.8rem; color:var(--grey); margin-top:3px}

/* =====================================================
   Raum-Galerie (Lightbox)
   ===================================================== */
.lb{position:fixed; inset:0; z-index:100; background:rgba(10,22,22,.95); display:none; align-items:center; justify-content:center; padding:18px}
.lb.open{display:flex; animation:fade .25s ease}
@keyframes fade{from{opacity:0} to{opacity:1}}
.lb-panel{width:min(1060px,100%); max-height:100%; display:flex; flex-direction:column; gap:12px}
.lb-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:#fff}
.lb-head b{font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:1.5rem; display:block; line-height:1.15}
.lb-head .lb-meta{color:rgba(255,255,255,.65); font-size:.86rem; display:block; margin-top:4px; font-variant-numeric:tabular-nums}
.lb-close-btn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none; transition:background .2s}
.lb-close-btn:hover{background:rgba(255,255,255,.24)}
.lb-close-btn svg{width:20px; height:20px}
/* Feste Bühnen-Höhe: Buttons/Thumbs bleiben immer an derselben Position,
   unabhängig vom Format des aktuellen Fotos. */
.lb-stage{position:relative; display:flex; align-items:center; justify-content:center; height:min(58vh,700px); flex:none}
.lb-stage img{max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); display:block}
.lb-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .2s}
.lb-arrow:hover{background:rgba(255,255,255,.26)}
.lb-arrow svg{width:20px; height:20px}
.lb-arrow--prev{left:10px}
.lb-arrow--next{right:10px}
.lb-desc{color:rgba(255,255,255,.78); font-size:.92rem; text-align:center; margin:0; min-height:1.5em}
.lb-thumbs{display:flex; gap:8px; justify-content:center; flex-wrap:nowrap; height:74px; align-items:center}
.lb-thumb{padding:0; border:2px solid transparent; border-radius:9px; overflow:hidden; cursor:pointer; background:none; opacity:.55; transition:opacity .2s, border-color .2s; line-height:0}
.lb-thumb img{width:52px; height:70px; object-fit:cover; display:block}
.lb-thumb.on,.lb-thumb:hover{opacity:1; border-color:#8ed0c0}
.lb-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.lb-roombtn{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:11px 20px; min-height:46px; cursor:pointer; font:inherit; font-size:.9rem; font-weight:600; transition:background .2s}
.lb-roombtn:hover{background:rgba(255,255,255,.2)}
.lb-roombtn small{font-weight:500; color:rgba(255,255,255,.6); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase}
.lb-roombtn svg{width:16px; height:16px; flex:none}
.lb :focus-visible{outline:2px solid #8ed0c0; outline-offset:2px}
@media (max-width:640px){
  .lb{padding:10px}
  .lb-head b{font-size:1.2rem}
  .lb-stage{height:48vh}
  .lb-thumbs{height:62px}
  .lb-thumb img{width:44px; height:58px}
  .lb-roombtn{flex:1; justify-content:center}
  .room-grid{grid-template-columns:1fr 1fr; gap:12px}
}
@media (min-width:641px) and (max-width:980px){
  .room-grid{grid-template-columns:repeat(3,1fr)}
}

/* Reveal — nur aktiv wenn JS vorhanden; ohne JS ist der Inhalt immer sichtbar */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
/* Sicherheitsnetz: gedrosselter/verborgener Tab → sofort sichtbar, ohne Transition */
.reveal-now .reveal{opacity:1 !important; transform:none !important; transition:none !important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .g-item img,.btn,.feat,.use-card{transition:none}
}
:focus-visible{outline:2px solid var(--petrol); outline-offset:3px; border-radius:4px}
.sauna :focus-visible{outline-color:#e7c79a}

/* ---------- Legal pages ---------- */
.legal{padding:var(--s6) 0}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(2.1rem,4vw,3rem); margin-bottom:14px}
.legal h2{font-size:1.35rem; margin:38px 0 12px}
.legal p,.legal li{color:var(--ink); font-size:1rem; line-height:1.7}
.legal p+p{margin-top:14px}
.legal a{color:var(--petrol); text-decoration:underline}
.legal .back{display:inline-flex; align-items:center; gap:8px; color:var(--petrol); font-weight:600; margin-bottom:30px; font-size:.92rem}
.legal .ph{color:var(--oak); font-weight:600}
.legal ul{margin:12px 0; padding-left:22px}
.legal li{margin:6px 0}
.legal .updated{margin-top:40px; font-size:.86rem; color:var(--grey)}

/* Responsive */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .menu-toggle{display:flex}
  .hero-grid,.intro-grid,.plan-grid,.loc-grid,.contact-grid,.sauna-grid{grid-template-columns:1fr; gap:40px}
  .hero-media{order:-1}
  .sauna-media{order:-1}
  .strip{grid-template-columns:1fr 1fr}
  .strip .cell:nth-child(2){border-right:none}
  .facts-grid,.feat-grid,.use-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-auto-rows:180px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-cta .btn-primary{display:none}      /* Header entlasten – CTA steckt im Menü */
  .brand small{display:none}                /* Untertitel im engen Header ausblenden */
  section{padding:var(--s6) 0}
  .stripwrap{margin-top:var(--s5)}
  .strip{grid-template-columns:1fr 1fr}
  .strip .cell{padding:24px 20px}
  .facts-grid,.feat-grid,.use-grid{grid-template-columns:1fr}
  .gallery{display:flex; flex-direction:column}
  .gallery .g-item{height:240px}
  .grid-2{grid-template-columns:1fr}
  .hero-badge{left:50%; transform:translateX(-50%); bottom:-24px}
  .hero{padding-top:40px}
  .foot-grid{grid-template-columns:1fr}
  form{padding:26px}
  .wrap{padding:0 18px}
}
.skip{position:absolute; left:-9999px; top:0; background:var(--petrol); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:200}
.skip:focus{left:0}