@font-face{font-family:"Zilla Slab";src:url(fonts/zilla-slab-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--tinte:#1c1a18;--weiss:#fff;--nebel:#edf0eb;--rot:#b8141b;--rot-d:#97100f;--tanne:#1f3a2a;--bronze:#d9a15a;--grau:#555a55;--kopf:68px;
--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:104px;--rand:clamp(16px,4vw,56px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.6 "Figtree",system-ui,sans-serif;color:var(--tinte);background:var(--weiss);padding-bottom:calc(72px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:"Zilla Slab",Georgia,serif;font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6.4vw,3.5rem)}
h2{font-size:clamp(1.6rem,4.4vw,2.4rem)}
p{margin:0 0 var(--s3);max-width:62ch}
ul,ol,dl{margin:0;padding:0}
.skip{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:var(--s2) var(--s3);z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.hero-tafel :focus-visible,.schluss :focus-visible,.fuss :focus-visible,.handymenue :focus-visible{outline-color:var(--bronze)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--kopf);padding:0 var(--rand);background:var(--weiss);border-bottom:1px solid var(--nebel)}
.marke img{height:52px;width:auto}
.hauptnav{display:none}
.hauptnav a{text-decoration:none;font-weight:600;padding:var(--s2) 0;border-bottom:2px solid transparent}
.hauptnav a:hover{border-color:var(--tinte)}
.hauptnav a[aria-current=page]{border-color:var(--rot)}
.hauptnav .navbtn{background:var(--rot);color:#fff;padding:12px 20px;border:0;border-radius:2px}
.hauptnav .navbtn:hover{background:var(--rot-d)}
.menuknopf{font:600 1rem "Figtree",sans-serif;background:none;border:2px solid var(--tinte);color:var(--tinte);padding:8px 16px;border-radius:2px;min-height:44px;cursor:pointer}
.handymenue{position:fixed;inset:var(--kopf) 0 0 0;z-index:29;background:var(--tanne);padding:var(--s4) var(--rand) calc(96px + env(safe-area-inset-bottom));overflow:auto}
.handymenue[hidden]{display:none}
.handymenue a{display:block;color:#fff;text-decoration:none;font:700 1.9rem/1.2 "Zilla Slab",serif;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.handymenue a[aria-current=page]{color:var(--bronze)}
.handymenue a:last-child,.handymenue a:nth-last-child(2){font:600 1rem "Figtree",sans-serif;border:0;opacity:.8;padding:10px 0;display:inline-block;margin-right:var(--s4)}

/* Knöpfe */
.knopf{display:inline-block;background:var(--rot);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;padding:16px 28px;border-radius:2px;border:0;cursor:pointer;font-family:inherit;text-align:center}
.knopf:hover{background:var(--rot-d)}
.knopf-voll{width:100%}
.textlink{font-weight:600;text-underline-offset:4px;text-decoration-thickness:2px}
.anfragebar{position:fixed;left:0;right:0;bottom:0;z-index:28;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--nebel)}
.anfragebar a{display:block;background:var(--rot);color:#fff;text-align:center;text-decoration:none;font-weight:700;font-size:1.1rem;padding:15px;border-radius:2px}
body.seite-anfrage .anfragebar{display:none}
body.seite-anfrage{padding-bottom:0}

/* Hero mit Glockenspiel */
.hero{display:grid;grid-template-columns:1fr}
.hero-foto{height:34svh;min-height:230px;background:var(--nebel)}
.hero-foto span{display:block;height:100%}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-tafel{background:var(--tanne);color:#fff;padding:var(--s4) var(--rand) var(--s5)}
.hero-tafel h1{font-size:clamp(1.9rem,8vw,3.2rem)}
.glocke{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s3);align-items:center;margin:var(--s4) 0 var(--s3);color:var(--bronze)}
.glocke-bild{grid-row:1/3;width:56px;height:56px;transform-origin:50% 8%}
.glocke-zahl small{font:600 .28em "Figtree",sans-serif;letter-spacing:0;margin-left:.3em}
.glocke-zahl{margin:0;font:700 clamp(2.6rem,13vw,5.6rem)/1 "Zilla Slab",serif;color:var(--bronze);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.glocke-text{margin:0;color:#fff;font-size:.95rem;line-height:1.35}
.glocke.laeutet .glocke-bild{animation:schwung .7s ease-in-out 8}
@keyframes schwung{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-14deg)}}
.hero-sub{color:rgba(255,255,255,.86);font-size:.98rem;max-width:46ch}
.hero-knoepfe .knopf{display:none}
.hero-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.hero-tafel .textlink{color:#fff}

/* Start */
.haus,.komfort,.goslar{display:grid;gap:var(--s4);padding:var(--s6) var(--rand) 0;max-width:1440px;margin:0 auto}
.haus-text h2,.komfort-text h2,.goslar-text h2{margin-bottom:var(--s3)}
.haus-foto img,.komfort-foto img,.goslar-foto img{width:100%}
.zoom{display:block;padding:0;margin:0;border:0;background:var(--nebel);cursor:zoom-in;width:100%}
.zoom img{width:100%}
.bandwrap{padding:var(--s6) 0 0}
.band-titel{padding:0 var(--rand);margin-bottom:var(--s4)}
.band{list-style:none;display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--rand) var(--s3);-webkit-overflow-scrolling:touch}
.band li{flex:0 0 auto;scroll-snap-align:start}
.band .zoom{width:auto;height:min(62svh,440px)}
.band .zoom img{width:auto;height:100%}
.band-hinweis{padding:0 var(--rand);color:var(--grau);font-size:.9rem;margin:var(--s2) 0 0}
.fakten{margin-top:var(--s6);background:var(--nebel);padding:var(--s6) var(--rand)}
.fakten>*{max-width:1440px;margin-left:auto;margin-right:auto}
.fakten>.fakten-lead{margin-left:max(0px,calc((100% - 1328px)/2))}
.fakten>h2{margin-left:max(0px,calc((100% - 1328px)/2))}
.fakten h2{margin-bottom:var(--s3)}
.fakten-lead{margin-bottom:var(--s5);max-width:62ch}
.fakten-liste{list-style:none;display:grid;gap:0;grid-template-columns:1fr;border-top:2px solid var(--tinte)}
.fakten-liste li{display:flex;flex-direction:column;padding:var(--s3) 0;border-bottom:1px solid #c9d0c6}
.fakten-liste strong{font:700 1.3rem/1.2 "Zilla Slab",serif}
.fakten-liste span{color:var(--grau)}
.punkte{list-style:none}
.punkte li{position:relative;padding:6px 0 6px 22px;border-bottom:1px solid var(--nebel)}
.punkte li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--rot)}
.goslar-text .doppel{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.ausz{padding:var(--s6) var(--rand) 0;max-width:1440px;margin:0 auto}
.ausz h2{margin-bottom:var(--s4)}
.ausz-liste{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-start}
.ausz-liste .zoom{width:auto}
.ausz-liste img{height:130px;width:auto}
.ausz-liste li:first-child img{height:200px}
.ausz-liste .zoom{background:none}
.schluss{margin-top:var(--s6);margin-bottom:calc(-1 * var(--s6));background:var(--tanne);color:#fff;padding:var(--s6) var(--rand);display:grid;gap:var(--s4)}
.schluss h2{margin-bottom:var(--s3)}
.schluss-knoepfe{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.partner{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin:0}
.partner a{font-weight:600;text-underline-offset:4px}
.schluss-hell{background:var(--nebel);color:var(--tinte)}

/* Unterseiten */
.seitenkopf{padding:var(--s5) var(--rand) var(--s4);max-width:1440px;margin:0 auto}
.seitenkopf h1{margin-bottom:var(--s3);max-width:26ch}
.seitenkopf p{font-size:1.08rem}
.raumindex{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);padding-top:var(--s3);border-top:2px solid var(--tinte)}
.raumindex a{font-weight:600;text-underline-offset:4px}
.raum{display:grid;gap:var(--s4);padding:var(--s5) var(--rand);max-width:1440px;margin:0 auto;scroll-margin-top:var(--kopf)}
.raum-label{font-weight:600;color:var(--grau);margin-bottom:var(--s2)}
.raum-text h2{margin-bottom:var(--s3)}
.raum-foto img{width:100%}
.grundriss{padding:var(--s5) var(--rand) 0;max-width:1440px;margin:0 auto;scroll-margin-top:var(--kopf)}
.grundriss h2{margin-bottom:var(--s4)}
.grundriss-paar{display:grid;gap:var(--s4)}
.grundriss figure{margin:0}
.grundriss figcaption{font-weight:600;margin-top:var(--s2)}
.grundriss .zoom{background:#fff;border:1px solid var(--nebel)}
.preise{padding:var(--s6) var(--rand) 0;max-width:1440px;margin:0 auto;scroll-margin-top:var(--kopf)}
.preise h2{margin-bottom:var(--s3)}
.datenliste{margin:var(--s4) 0;border-top:2px solid var(--tinte)}
.datenliste div{display:grid;gap:2px;padding:var(--s3) 0;border-bottom:1px solid var(--nebel)}
.datenliste dt{font:700 1.15rem "Zilla Slab",serif}
.datenliste dd{margin:0;max-width:62ch}
.preise-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}

.region-lage{display:grid;gap:var(--s4);padding:var(--s4) var(--rand) 0;max-width:1440px;margin:0 auto}
.region-liste h2{margin-bottom:var(--s3)}
.minuten{list-style:none;border-top:2px solid var(--tinte);margin-bottom:var(--s3)}
.minuten a{display:grid;grid-template-columns:3.2rem auto 1fr;align-items:baseline;gap:0 var(--s2);padding:10px 0;border-bottom:1px solid var(--nebel);text-decoration:none}
.minuten a:hover .min-n{text-decoration:underline}
.min{font:700 1.7rem/1 "Zilla Slab",serif;color:var(--rot)}
.min-u{font-size:.85rem;color:var(--grau)}
.min-n{font-weight:600;text-align:right}
.klein{font-size:.9rem;color:var(--grau)}
.essen{padding:var(--s6) var(--rand) 0;max-width:1440px;margin:0 auto;scroll-margin-top:var(--kopf)}
.essen h2{margin-bottom:var(--s4)}
.tabelle{border-collapse:collapse;width:100%}
.tabelle thead{position:absolute;left:-9999px}
.tabelle tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--nebel)}
.tabelle tbody tr:first-child{border-top:2px solid var(--tinte)}
.tabelle th,.tabelle td{display:block;text-align:left;font-weight:400;padding:2px 0}
.tabelle th{font:700 1.3rem/1.2 "Zilla Slab",serif}
.tabelle td::before{content:attr(data-l) ": ";font-weight:600}
.tabelle td[data-l=Kurzbeschreibung]::before,.tabelle td[data-l=Adresse]::before{content:""}

.ziele{max-width:1440px;margin:0 auto;padding:0 var(--rand)}
.ziel{display:grid;grid-template-columns:3rem 1fr;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--nebel);scroll-margin-top:var(--kopf)}
.ziel:first-child{border-top:2px solid var(--tinte)}
.ziel-nr{font:700 1.6rem/1.2 "Zilla Slab",serif;color:var(--rot)}
.ziel h2{font-size:clamp(1.4rem,4vw,1.9rem);margin-bottom:var(--s2)}
.ziel-daten{display:grid;gap:var(--s2);margin-top:var(--s3)}
.ziel-daten div{display:grid;gap:0}
.ziel-daten dt{font-weight:600;font-size:.9rem;color:var(--grau)}
.ziel-daten dd{margin:0}
.glocke-klein{background:var(--tanne);padding:var(--s3);margin:var(--s3) 0;max-width:520px}
.glocke-klein .glocke-bild{width:40px;height:40px}
.glocke-klein .glocke-zahl{font-size:2.2rem}

.anfrage{display:grid;gap:var(--s5);padding:var(--s4) var(--rand) var(--s6);max-width:1440px;margin:0 auto}
.formular h2,.anfrage-info h2{margin-bottom:var(--s3)}
.formular label{display:block;font-weight:600;margin-bottom:var(--s3)}
.formular input,.formular textarea{display:block;width:100%;margin-top:6px;font:400 1rem "Figtree",sans-serif;padding:13px 12px;border:1px solid #8a908a;border-radius:2px;background:#fff;color:var(--tinte);min-height:48px}
.formular input:focus,.formular textarea:focus{outline:3px solid var(--rot);outline-offset:1px}
.zeile2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.danke{margin-top:var(--s3);padding:var(--s3);background:var(--nebel);font-weight:600}
.anfrage-info .h2-2{margin-top:var(--s5);font-size:1.5rem}
.partner-liste{list-style:none;margin-bottom:var(--s3)}
.partner-liste a{display:block;padding:12px 0;border-bottom:1px solid var(--nebel);font-weight:600;text-underline-offset:4px}
.text{max-width:1440px;margin:0 auto;padding:0 var(--rand) var(--s6)}

/* Fuß */
.fuss{background:var(--tinte);color:#e6e8e4;padding:var(--s6) var(--rand) var(--s4);margin-top:var(--s6)}
.fuss-grid{display:grid;gap:var(--s5);max-width:1440px;margin:0 auto}
.fuss a{text-underline-offset:3px}
.fuss ul{list-style:none}
.fuss li{padding:3px 0}
.fuss-titel{font:700 1.2rem "Zilla Slab",serif;color:#fff;margin-bottom:var(--s2)}
.fuss-recht{margin-top:var(--s3)}
.entwurf{max-width:1440px;margin:var(--s5) auto 0;padding-top:var(--s3);border-top:1px solid #3a3a37;font-size:.82rem;color:#aab0a8}

/* Lightbox */
.lightbox{border:0;padding:0;background:#111;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:#000}
.lightbox img{width:100%;height:100%;object-fit:contain}
.lb-zu{position:absolute;top:12px;right:12px;z-index:2;background:#fff;color:#111;border:0;padding:12px 18px;font:700 1rem "Figtree",sans-serif;min-height:44px;border-radius:2px;cursor:pointer}

@media (min-width:700px){
  .fakten-liste{grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .tabelle thead{position:static}
  .tabelle tr{display:table-row;padding:0}
  .tabelle th,.tabelle td{display:table-cell;padding:var(--s3) var(--s3) var(--s3) 0;vertical-align:top;border-bottom:1px solid var(--nebel)}
  .tabelle thead th{font:700 .95rem "Figtree",sans-serif;border-bottom:2px solid var(--tinte)}
  .tabelle th[scope=row]{font-size:1.15rem;min-width:11rem}
  .tabelle td::before{content:none!important}
  .tabelle tbody tr:first-child{border-top:0}
  .ziel{grid-template-columns:4rem 1fr}
  .ziel-daten{grid-template-columns:1fr 1fr}
  .grundriss-paar{grid-template-columns:1fr 1fr}
  .datenliste div{grid-template-columns:200px 1fr;gap:var(--s4)}
}
@media (min-width:900px){
  :root{--kopf:84px}
  .hero-knoepfe .knopf{display:inline-block}
  body{padding-bottom:0}
  .marke img{height:68px}
  .hauptnav{display:flex;align-items:center;gap:var(--s5)}
  .menuknopf,.handymenue{display:none!important}
  .anfragebar{display:none}
  .hero{grid-template-columns:1fr 1fr;min-height:min(calc(100svh - var(--kopf)),820px)}
  .hero-foto{height:auto;min-height:0}
  .hero-foto img{object-position:50% 50%}
  .hero-tafel{padding:var(--s6) clamp(40px,5vw,88px);display:flex;flex-direction:column;justify-content:center}
  .glocke-bild{width:76px;height:76px}
  .haus{grid-template-columns:1.25fr 1fr;gap:var(--s6);align-items:center;padding-top:var(--s7)}
  .haus-foto{order:2;max-width:420px;justify-self:end}
  .komfort{grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:center;padding-top:var(--s7)}
  .goslar{grid-template-columns:1.3fr 1fr;gap:var(--s6);align-items:center;padding-top:var(--s7)}
  .fakten{margin-top:var(--s7);padding:var(--s7) var(--rand)}
  .ausz{padding-top:var(--s7)}
  .ausz-liste img{height:170px}
  .ausz-liste li:first-child img{height:250px}
  .band .zoom{height:min(64vh,560px)}
  .bandwrap{padding-top:var(--s7)}
  .schluss{grid-template-columns:1.4fr 1fr;align-items:center;margin-top:var(--s7);padding:var(--s7) var(--rand)}
  .seitenkopf{padding-top:var(--s6)}
  .raum{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--s6);align-items:start;padding:var(--s6) var(--rand)}
  .raum-um .raum-foto{order:2}
  .raum-foto{position:sticky;top:calc(var(--kopf) + 16px)}
  .punkte.zwei{columns:2;column-gap:var(--s5)}
  .punkte.zwei li{break-inside:avoid}
  .region-lage{grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:start}
  .anfrage{grid-template-columns:1.1fr 1fr;gap:var(--s7)}
  .fuss-grid{grid-template-columns:1.3fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glocke.laeutet .glocke-bild{animation:none}}