/* Fehlhaus Wustrow – Stylesheet (Richtung A „Klassisch-Elegant“) */
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#1b1a18; --ink-2:#26241f; --cream:#f4efe6; --paper:#fbf8f2;
  --gold:#b8914f; --gold-2:#d4b377; --gold-dk:#8a6a33; --muted:#6a6357; --line:rgba(184,145,79,.35);
  --serif:"Cormorant",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --wrap:1180px; --head:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* Kein Doppeltipp-Zoom auf Bedienelementen (schnelles Tippen auf Pfeile, Buttons, Fragen) */
a,button,summary,label,input,select,textarea{touch-action:manipulation}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px}
.skip:focus{left:10px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dk);font-weight:500}
.dark .eyebrow,.hero .eyebrow{color:var(--gold-2)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08}
h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:.01em;text-wrap:balance}
h2 em{font-style:italic;color:var(--gold)}
.orn{display:flex;align-items:center;gap:14px;color:var(--gold);margin:22px 0;font-size:12px}
.orn::before,.orn::after{content:"";height:1px;width:56px;background:currentColor;opacity:.6}
.center{text-align:center}.center .orn{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border:1px solid var(--gold);color:var(--ink);background:var(--gold);text-decoration:none;font:500 13px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:.25s;cursor:pointer}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost.on-light{color:var(--ink);border-color:var(--ink)}
.btn:active{transform:scale(.98)}
/* Überfahr-Effekte nur für Geräte mit Maus: Auf Touch-Geräten bleibt :hover nach dem
   Antippen „kleben“ (Bild blieb vergrößert, Knopf blieb golden). */
@media (hover:hover){
  .btn:hover{background:var(--gold-2);border-color:var(--gold-2)}
  .btn.ghost:hover{background:transparent;border-color:var(--gold-2);color:var(--gold-2)}
  .btn.ghost.on-light:hover{color:var(--gold-dk);border-color:var(--gold)}
}
section{padding:120px 0;scroll-margin-top:calc(var(--head) - 10px)}

/* Kopfzeile */
header.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);display:flex;align-items:center;transition:background .3s,box-shadow .3s}
header.top.solid,header.top.static{background:rgba(27,26,24,.97);box-shadow:0 1px 0 var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.brand{display:block;line-height:0;min-width:0}
.brand img{height:50px;width:auto;object-fit:contain;object-position:0 50%}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{color:#fff;text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.82;position:relative;padding:6px 0}
nav.main a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-2);transition:right .3s}
nav.main a:hover,nav.main a.act{opacity:1;color:var(--gold-2)}
nav.main a.act::after,nav.main a:not(.btn):hover::after{right:0}
nav.main .btn{padding:11px 20px;color:var(--ink);opacity:1}
nav.main .btn:hover,nav.main .btn.act{color:var(--ink)}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px;margin-right:-8px}
.burger svg{width:28px;height:28px}
.burger .x{display:none}
.menu-open .burger .x{display:block}.menu-open .burger .m{display:none}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden;padding:0}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.05);animation:kb 20s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 42% at 50% 46%,rgba(14,13,11,.5),rgba(14,13,11,0) 72%),linear-gradient(180deg,rgba(20,19,17,.62) 0%,rgba(20,19,17,.52) 45%,rgba(20,19,17,.88) 100%)}
.hero .in{position:relative;z-index:2;padding:calc(var(--head) + 40px) 24px 110px;max-width:920px}
.hero h1{font-size:clamp(50px,8.6vw,112px);letter-spacing:.07em;text-transform:uppercase;font-weight:600;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.35),0 6px 40px rgba(0,0,0,.55)}
.hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,34px);color:var(--gold-2);margin-top:14px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero .orn{justify-content:center}
.hero .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.seal{position:absolute;right:5vw;bottom:10vh;z-index:3;width:150px;height:150px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.5;box-shadow:0 0 0 6px rgba(184,145,79,.25);transform:rotate(-8deg)}
.seal span::after{content:"";display:block;width:26px;height:1px;background:var(--ink);margin:8px auto 0;opacity:.5}
.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.75;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold-2),transparent);animation:drip 2.2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Willkommen */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.intro .pics{position:relative;aspect-ratio:4/5}
.intro .pics img{position:absolute;object-fit:cover}
.intro .pics img:first-child{inset:0 18% 14% 0;width:82%;height:86%}
.intro .pics img:last-child{right:0;bottom:0;width:52%;height:46%;border:10px solid var(--paper)}
.intro p{color:var(--muted);margin-bottom:18px}
.intro p.big{font-family:var(--serif);font-size:26px;line-height:1.4;color:var(--ink)}

/* Kennzahlen */
.facts{background:var(--ink);color:#fff;padding:0}
.facts .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:56px 18px;border-left:1px solid rgba(255,255,255,.08);text-align:center}
.fact:first-child{border-left:0}
.fact svg{display:block;width:34px;height:34px;color:var(--gold);margin:0 auto 18px}
.fact .n,.fact-title{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;font-size:clamp(40px,4.3vw,54px);line-height:1;color:var(--gold-2)}
.fact .l{font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-top:10px;line-height:1.6}


/* Räume */
.rooms{background:var(--cream)}
.room{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;margin-top:70px;background:var(--paper)}
.room.rev{grid-template-columns:1fr 1.25fr}
.room.rev .ph{order:2}
.room .ph{min-height:460px;position:relative;overflow:hidden}
.room .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
@media (hover:hover){.room:hover .ph img{transform:scale(1.04)}}
.room .tx{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.room .tx .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:22px}
.room h3{font-size:40px;margin:6px 0 16px}
.room p{color:var(--muted)}
.room ul{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.room li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:12px}
.room li::before{content:"◆";color:var(--gold);font-size:9px;line-height:2.6}

/* Anlässe */
.occ .list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.occ .it{background:var(--paper);padding:34px 20px;text-align:center;transition:background .3s}
@media (hover:hover){.occ .it:hover{background:#fff}}
.occ .it svg{display:block;width:30px;height:30px;color:var(--gold);margin:0 auto 14px}
.occ .it b{font-family:var(--serif);font-size:24px;font-weight:500;hyphens:manual}

/* Leistungen */
.dark{background:var(--ink-2);color:#fff}
.pkg .cards{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:60px}
.card{border:1px solid rgba(212,179,119,.4);padding:54px 48px;position:relative;display:flex;flex-direction:column}
.card.feat{background:linear-gradient(160deg,rgba(184,145,79,.18),rgba(184,145,79,.04));border-color:var(--gold)}
.card .badge{position:absolute;top:-13px;left:48px;background:var(--gold);color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;font-weight:500}
.card h3{font-size:38px;margin-bottom:12px}
.card p{opacity:.8}
.card ul{list-style:none;margin:26px 0 32px;flex:1}
.card li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;gap:12px}
.card li svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:5px}
.card .btn{align-self:flex-start}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;counter-reset:st;position:relative}
.steps::before{content:"";position:absolute;left:16%;right:16%;top:34px;height:1px;background:var(--line)}
.step{text-align:center;padding:0 30px;position:relative}
.step .no{counter-increment:st;width:68px;height:68px;border-radius:50%;border:1px solid var(--gold);background:var(--paper);display:grid;place-items:center;margin:0 auto 24px;font-family:var(--serif);font-size:30px;color:var(--gold-dk)}
.step .no::before{content:counter(st,upper-roman)}
.step h3{font-size:30px;margin-bottom:10px}
.step p{color:var(--muted)}

/* Galerie */
.gal{background:var(--cream)}
.gal .g{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(6,1fr);grid-auto-rows:210px;gap:12px;margin-top:56px}
.gal button{font:inherit;border:0;padding:0;cursor:zoom-in;overflow:hidden;background:#ddd;position:relative}
.gal button img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.gal button::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--gold);transition:box-shadow .3s}
.gal button:focus-visible::after{box-shadow:inset 0 0 0 3px var(--gold)}
.g .a{grid-column:span 3;grid-row:span 2}.g .b{grid-column:span 3}.g .c{grid-column:span 2;grid-row:span 2}.g .d{grid-column:span 2}
.gal .gz{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:rgba(20,19,17,.28);opacity:0;transition:opacity .35s;pointer-events:none}
.gal .gz i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.gal .gz svg{width:20px;height:20px}
.gal button:focus-visible .gz{opacity:1}
.gal button:focus-visible .gz i{transform:scale(1)}
@media (hover:hover){
  .gal button:hover img{transform:scale(1.05)}
  .gal button:hover::after{box-shadow:inset 0 0 0 3px var(--gold)}
  .gal button:hover .gz{opacity:1}
  .gal button:hover .gz i{transform:scale(1)}
}

/* Lightbox */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:minmax(0,1fr) auto;color:#fff;-webkit-user-select:none;user-select:none}
.lb-bg{position:absolute;inset:0;background:rgba(14,13,11,.975);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}
.lb.on .lb-bg{opacity:1}
/* keine eigene Kopfzeile: Zähler und Knöpfe liegen als Overlay am Rand, das Bild bekommt die volle Höhe */
.lb-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:16px 20px;pointer-events:none;opacity:0;transform:translateY(-14px);transition:opacity .3s .06s,transform .38s .06s cubic-bezier(.2,.8,.2,1)}
.lb.on .lb-top{opacity:1;transform:none}
.lb-top>*{pointer-events:auto}
.lb-count{font-family:var(--serif);font-size:20px;color:var(--gold-2);display:flex;align-items:center;gap:8px;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.lb-count i{width:20px;height:1px;background:rgba(255,255,255,.35)}
.lb-count .lb-tot{color:rgba(255,255,255,.6);font-size:16px}
.lb-cur{display:inline-block;min-width:1.4em}
.lb-cur.tick{animation:tick .32s cubic-bezier(.2,.8,.2,1)}
@keyframes tick{from{opacity:0;transform:translateY(10px)}}
.lb-tools{display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.lb-top .lb-btn{background:rgba(14,13,11,.45)}
@media (min-width:961px){.lb-count{flex-direction:column;gap:6px;padding-top:6px}.lb-count i{width:16px}}   /* senkrecht im linken Rand, ragt nicht ins Bild */
.lb-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.08)}
.lb-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .38s cubic-bezier(.2,.8,.2,1)}
.lb-stage{position:relative;z-index:1;margin:16px 96px 0;cursor:grab}
.lb-stage.drag{cursor:grabbing}
/* Gesten in der Bildansicht steuert das Skript (Wischen, Zwei-Finger-Zoom); die Seite dahinter
   darf dabei weder mitscrollen noch als Ganzes gezoomt werden. Nur die Miniaturen scrollen quer. */
.lb-bg,.lb-top,.lb-stage,.lb-nav{touch-action:none}
.lb-thumbs{touch-action:pan-x;overscroll-behavior:contain}
.lb.zoomed .lb-stage{overflow:hidden;cursor:move}
.lb.zoomed .lb-hint{display:none}
.lb-img{position:absolute;display:block;max-width:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);-webkit-user-drag:none;-webkit-touch-callout:none;will-change:transform,opacity;opacity:0}
.lb-img.act{opacity:1}
.lb-load{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--gold-2);opacity:0;transition:opacity .25s;animation:spin .9s linear infinite;z-index:2;pointer-events:none}
.lb-stage.loading .lb-load{opacity:1;transition-delay:.18s}
@keyframes spin{to{transform:rotate(360deg)}}
.lb-btn{position:relative;width:52px;height:52px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);color:var(--cream);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s}
.lb-btn svg{width:22px;height:22px;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.lb-btn:active{transform:scale(.9);background:var(--gold);border-color:var(--gold);color:var(--ink)}
.lb-btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
@media (hover:hover){
  .lb-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 10px 30px -10px rgba(184,145,79,.7)}
  .lb-x:hover svg{transform:rotate(90deg)}
  .lb-pv:hover svg{transform:translateX(-4px)}.lb-nx:hover svg{transform:translateX(4px)}
  .lb-thumbs button:hover{opacity:.8;transform:translateY(-2px)}
}
.lb-fs .ic-shrink{display:none}.lb.full .lb-fs .ic-expand{display:none}.lb.full .lb-fs .ic-shrink{display:block}
.lb-nav{position:absolute;top:50%;z-index:3;width:60px;height:60px;margin-top:-30px;opacity:0;transition:opacity .3s .12s,background .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s}
.lb.on .lb-nav{opacity:1}
.lb-pv{left:26px}.lb-nx{right:26px}
.lb-thumbs{position:relative;z-index:3;display:flex;gap:10px;padding:12px 24px 18px;overflow-x:auto;scrollbar-width:none;opacity:0;transform:translateY(14px);transition:opacity .3s .08s,transform .38s .08s cubic-bezier(.2,.8,.2,1)}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs::before,.lb-thumbs::after{content:"";flex:1 0 0}
.lb.on .lb-thumbs{opacity:1;transform:none}
.lb-thumbs button{flex:none;width:76px;height:54px;padding:0;border:0;background:#2a2824;cursor:pointer;opacity:.42;outline:1px solid transparent;outline-offset:3px;transition:opacity .2s,outline-color .2s,transform .2s}
.lb-thumbs button img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.lb-thumbs button[aria-current="true"]{opacity:1;outline-color:var(--gold-2)}
.lb-thumbs button:focus-visible{outline:2px solid var(--gold-2)}
.lb-hint{position:absolute;left:0;right:0;bottom:92px;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);pointer-events:none;z-index:2;display:none;opacity:0}
.lb.on .lb-hint{animation:hint 3.2s .6s forwards}
@keyframes hint{15%,70%{opacity:1}100%{opacity:0}}

/* FAQ */
.faq{max-width:840px;margin:50px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--serif);font-size:25px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--muted);padding:0 0 24px}

/* Anfrage */
.contact{background:var(--cream)}
.contact .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px}
.cinfo>p{color:var(--muted);margin:18px 0 34px}
.cinfo .row{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.cinfo .row svg{width:22px;height:22px;color:var(--gold);flex:none;margin-top:4px}
.cinfo .row small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk)}
.cinfo .row a{text-decoration:none;font-size:19px}
.cinfo .row a:hover{color:var(--gold-dk)}
.cinfo .row .val{font-size:19px;display:block}
.cinfo .row .sub{font-size:14px;color:var(--muted);display:block}
form.req{background:var(--paper);padding:48px;box-shadow:0 30px 60px -30px rgba(27,26,24,.25)}
form.req h3{font-size:30px;margin-bottom:24px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
form.req label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
form.req input,form.req select,form.req textarea{display:block;width:100%;margin-top:8px;padding:12px 0;border:0;border-bottom:1px solid #cbbfa9;border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none}
/* Gleiche Feldhöhe für Text, Auswahl und Datum; das Datumsfeld wird auf iPhones sonst
   breiter als die Spalte bzw. fällt leer in sich zusammen. */
form.req input,form.req select{height:52px;min-width:0;max-width:100%}
form.req input[type=date]{text-align:left}
form.req input[type=date]::-webkit-date-and-time-value{text-align:left}
form.req select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8914f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center}
form.req input:focus,form.req select:focus,form.req textarea:focus{outline:0;border-color:var(--gold)}
form.req textarea{min-height:110px;resize:vertical}
form.req .btn{border:0;margin-top:10px}
form.req .note{font-size:13px;color:var(--muted);margin-top:14px}
form.req .ok{display:none;margin-top:16px;padding:14px 16px;background:var(--cream);border-left:3px solid var(--gold);font-size:15px}
form.req.sent .ok{display:block}
.req .err{color:#9b3b2b;font-size:12px;letter-spacing:.02em;text-transform:none;display:none;margin-top:6px}
.req .inv{border-color:#9b3b2b!important}
.req .inv+.err{display:block}

/* Fußzeile */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:80px 0 30px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .cols>div:first-child{text-align:center;max-width:300px}
footer .logo{display:block;line-height:0}footer .logo img{width:260px;height:auto;margin:0 auto}
footer .claim{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-2);margin-top:14px}
footer h4{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2);font-weight:500;margin-bottom:16px}
footer a{text-decoration:none}footer a:hover{color:var(--gold-2)}
footer ul{list-style:none;display:grid;gap:8px}
footer .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:13px;opacity:.8}
footer .base nav{display:flex;gap:22px}

/* Mobile Leiste */
.mbar{display:none}

/* Unterseiten */
.legal{padding:calc(var(--head) + 70px) 0 100px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(40px,6vw,64px);margin-bottom:10px}
.legal h2{font-size:30px;margin:44px 0 12px}
.legal h3{font-size:22px;margin:26px 0 8px}
.legal p,.legal li{color:#3d3a34;margin-bottom:12px}
.legal ul{padding-left:20px}
.legal h1,.legal h2,.legal h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.back{display:inline-block;margin-top:40px}

.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
/* Handy/Tablet: keine Bewegung, die am Scrollen hängt. Das Einblenden macht aus jedem Block eine eigene
   große Grafikebene (Galerie, Räume, Formular) – das kostet auf Telefonen Bilder pro Sekunde und lässt den
   Inhalt beim Wischen nachrutschen. Ebenso das langsame Zoomen des Startbilds. */
@media (hover:none),(max-width:960px){
  .rv{opacity:1;transform:none;transition:none}
  .hero>img{animation:none;transform:none}
}

nav.main a{white-space:nowrap}
@media (max-width:1280px){nav.main{gap:22px}nav.main a{letter-spacing:.13em}.brand img{height:44px}}
@media (max-width:1100px){
  /* Menü als Vollbild. Die Ränder (auto) zentrieren die Punkte, solange Platz ist; im Querformat
     auf dem Handy wird das Menü stattdessen scrollbar, statt oben und unten abgeschnitten zu sein. */
  nav.main{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:flex-start;gap:26px;display:none;z-index:55;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--head) + 8px) 24px calc(28px + env(safe-area-inset-bottom))}
  nav.main>a:first-child{margin-top:auto}nav.main>a:last-child{margin-bottom:auto}
  .menu-open nav.main{display:flex}
  nav.main a{font-size:16px;flex:none}
  .burger{display:block;z-index:60;position:relative;flex:none}
  .menu-open{overflow:hidden}
}
@media (max-width:1100px) and (max-height:520px){nav.main{gap:12px}}
@media (max-width:960px){
  :root{--head:66px}
  section{padding:84px 0}
  .brand img{height:42px}
  footer .cols>div:first-child{max-width:none}
  .intro,.contact .grid,.pkg .cards{grid-template-columns:minmax(0,1fr);gap:50px}
  .facts .grid{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-left:0}.fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}.fact{padding:44px 16px}
  .fact .n,.fact-title{font-size:clamp(22px,7vw,54px)}
  .room,.room.rev{grid-template-columns:1fr}.room.rev .ph{order:0}.room .ph{min-height:300px}.room .tx{padding:40px 28px}
  .occ .list{grid-template-columns:repeat(2,minmax(0,1fr))}.occ .it{padding:26px 10px}.occ .it b{font-size:20px}
  .steps{grid-template-columns:1fr;gap:40px}.steps::before{display:none}
  .gal .g{grid-template-columns:1fr 1fr;grid-auto-rows:160px}.g .a,.g .b,.g .c,.g .d{grid-column:span 1;grid-row:span 1}.g .a{grid-column:span 2;grid-row:span 2}
  .gal .g button:last-child:nth-child(even){grid-column:span 2}   /* nur bei gerader Bildzahl, sonst bleibt unten rechts ein Loch */
  .seal{width:112px;height:112px;font-size:10px;right:16px;bottom:88px}
  form.req{padding:32px 22px}.two{grid-template-columns:minmax(0,1fr);gap:0}.card{padding:44px 26px}.card .badge{left:26px}
  footer .cols{grid-template-columns:1fr;gap:36px}
  .lb-top{gap:12px;padding:10px 12px}.lb-count{font-size:18px}.lb-count i{width:14px}
  .lb-fs{display:none!important}.lb-btn{width:46px;height:46px}
  .lb-stage{margin:8px 8px 0}
  .lb-nav{top:auto;bottom:18px;margin:0;width:48px;height:48px}.lb-pv{left:14px}.lb-nx{right:14px}
  .lb-thumbs{margin:0 72px;padding:14px 4px 20px;gap:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}.lb-thumbs button{width:52px;height:38px}
  .lb-hint{display:block}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(27,26,24,.97);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;transform:translateY(calc(100% + 140px));transition:transform .35s}
  /* Hintergrund unter die Leiste verlängern: Firefox/Safari auf iOS zeigen unterhalb der Seitenunterkante noch Seiteninhalt */
  .mbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:inherit;pointer-events:none}
  .mbar.on{transform:none}
  .mbar a{flex:1;padding:13px 10px}
  footer{padding-bottom:100px}
}
@media (max-width:560px){
  .hero .seal{display:none}
  h2{font-size:clamp(28px,8.2vw,34px)}
  .hero .tag{font-size:clamp(20px,6.4vw,24px)}
  .legal h2{font-size:26px}
}
@media (max-width:400px){
  .hero h1{font-size:min(50px,14.4vw)}
  .hero .ctas .btn{padding:16px 22px}
  header.top.static .btn{padding:10px 14px!important;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
@media print{header.top,.mbar,.scroll,.seal,.lb{display:none!important}.rv{opacity:1;transform:none}}