@font-face{font-family:Bitter;src:url(fonts/bitter.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --putz:#f7f5f0;--putz2:#ece8de;--balken:#3a2a1f;--holz:#6b4a26;--tanne:#44663f;--tanne-d:#33502f;--ziegel:#a2362a;
  --text:#241c16;--text2:#5a4d42;--b:10px;--pad:clamp(18px,2.2vw,34px);--hh:68px;
  --head:Bitter,Georgia,serif;--body:"Source Sans 3",system-ui,sans-serif;
}
@media(max-width:820px){:root{--b:6px;--hh:58px}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 14px)}
body{font:400 1.0625rem/1.55 var(--body);color:var(--text);background:var(--balken);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1380px;margin:0 auto;padding:0 clamp(8px,1.6vw,24px)}
:focus-visible{outline:3px solid var(--ziegel);outline-offset:2px}

/* Kopf */
.top{position:sticky;top:0;z-index:30;background:var(--putz);border-bottom:var(--b) solid var(--balken);height:calc(var(--hh) + var(--b))}
.top .wrap{display:flex;align-items:center;gap:20px;height:var(--hh);max-width:1380px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 1.15rem/1.1 var(--head);color:var(--balken)}
.logo img{height:calc(var(--hh) - 18px);width:auto}
.nav{display:flex;gap:clamp(12px,1.6vw,26px);margin-left:auto;font-weight:600;font-size:.98rem}
.nav a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--tanne)}
.lang{display:flex;border:3px solid var(--balken);font:700 .9rem/1 var(--body)}
.lang a{padding:8px 11px;text-decoration:none;color:var(--balken)}
.lang a[aria-current]{background:var(--balken);color:var(--putz)}
.lang a:not([aria-current]):hover{background:var(--putz2)}
.btn{display:inline-block;background:var(--tanne);color:#fff;font:700 1.05rem/1 var(--body);text-decoration:none;padding:16px 26px;border:0;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--tanne-d)}
.btn:active{transform:translateY(1px)}
.btn.klein{padding:12px 18px;font-size:.98rem}
.menu{display:none;background:none;border:3px solid var(--balken);width:44px;height:40px;cursor:pointer;position:relative}
.menu i,.menu i::before,.menu i::after{position:absolute;left:8px;right:8px;height:3px;background:var(--balken);content:""}
.menu i{top:16px}.menu i::before{left:0;right:0;top:-8px}.menu i::after{left:0;right:0;top:8px}
@media(max-width:1040px){
  .nav{position:absolute;left:0;right:0;top:calc(var(--hh) + var(--b));background:var(--putz);border-bottom:var(--b) solid var(--balken);flex-direction:column;gap:0;margin:0;display:none;padding:6px clamp(16px,4vw,28px) 14px}
  .nav.offen{display:flex}
  .nav a{padding:12px 0;font-size:1.1rem}
  .menu{display:block;margin-left:auto}
  .top .lang{margin-left:0}
  .top .btn.klein{display:none}
}
@media(min-width:1041px){.top .lang{margin-left:6px}}

/* Fachwerk-Raster: der Spalt ist der Balken */
.fw{display:grid;gap:var(--b);background:var(--balken);border:var(--b) solid var(--balken);border-top:0;grid-template-columns:repeat(12,1fr)}
.fw>.c{background:var(--putz);padding:var(--pad);min-width:0;position:relative;clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.fw.in>.c,.no-js .fw>.c{clip-path:inset(0)}
.fw>.c.foto{padding:0;overflow:hidden;background:var(--putz2)}
.fw>.c.foto picture{display:block;height:100%}
.fw>.c.foto img{width:100%;height:100%;object-fit:cover}
.fw>.c.tint{background:var(--putz2)}
.fw>.c.dunkel{background:var(--holz);color:var(--putz)}
@media(prefers-reduced-motion:reduce){.fw>.c{clip-path:none;transition:none}html{scroll-behavior:auto}}
h1,h2,h3{font-family:var(--head);color:var(--balken);line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.1vw,3.9rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3vw,2.7rem);font-weight:700;margin-bottom:.45em}
h3{font-size:1.25rem;font-weight:700;margin-bottom:.35em}
p+p{margin-top:.8em}
.c p,.c li{max-width:62ch}
.c ul{padding-left:1.1em}.c li{margin:.25em 0}
.sub{color:var(--text2);margin-top:.9em;font-size:1.12rem;max-width:46ch}
.gross{font:800 clamp(2rem,3.2vw,3rem)/1 var(--head);color:var(--balken);display:block}
.klein-t{font-size:.95rem;color:var(--text2)}
section{scroll-margin-top:var(--hh)}
.gap{height:var(--b);background:var(--balken)}

/* Hero */
.hero{grid-template-columns:1.15fr 1fr .55fr .6fr;grid-template-areas:"foto head head strebe" "foto f1 f2 f2" "foto buch buch buch";grid-template-rows:1fr auto auto;min-height:calc(100svh - var(--hh) - var(--b) - 8px);border-top:0}
.hero .foto{grid-area:foto}.hero .head{grid-area:head;display:flex;flex-direction:column;justify-content:center}
.hero .f1{grid-area:f1}.hero .f2{grid-area:f2}.hero .buch{grid-area:buch;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.hero .strebe{grid-area:strebe}.hero .strebe img{object-position:50% 50%}
.hero .foto img{object-position:50% 35%}
.fakt b{display:block;font:800 1.55rem/1.1 var(--head);color:var(--balken);margin-bottom:.3em}
.fakt span{color:var(--text2);font-size:1rem;display:block}
.strebe svg{width:100%;height:100%;display:block}
.strebe line{stroke:var(--balken);stroke-width:var(--b);vector-effect:non-scaling-stroke;stroke-linecap:butt}
.textlink{font-weight:600;font-size:1rem}
@media(max-width:820px){
  .fw{grid-template-columns:1fr 1fr}
  .fw>.c{grid-column:1/-1 !important;grid-row:auto !important}
  .hero{grid-template-areas:"foto foto" "head head" "buch buch" "f1 f2";grid-template-rows:auto;min-height:0}
  .hero>.c{grid-column:auto !important}
  .hero .foto,.hero .head,.hero .buch{grid-column:1/-1 !important}
  .hero .foto{height:27svh;min-height:190px;order:1}.hero .head{order:2}.hero .buch{order:3}.hero .f1,.hero .f2{order:4}
  .hero .strebe{display:none}
  .hero .head{padding-bottom:14px}
  .hero .f1,.hero .f2{grid-column:span 1 !important}
  .fakt b{font-size:1.25rem}
  h1{font-size:2.15rem}
}

/* Preise */
.preis{grid-template-areas:"titel titel titel titel titel titel form form form" "neben neben neben haupt haupt haupt form form form" "regeln regeln regeln regeln regeln regeln form form form";grid-template-columns:repeat(9,1fr)}
.preis .titel{grid-area:titel}.preis .neben{grid-area:neben}.preis .haupt{grid-area:haupt}.preis .regeln{grid-area:regeln}.preis .form{grid-area:form;background:var(--tanne);color:#fff}
.preis .form h3,.preis .form label{color:#fff}
.zeit{font-size:.95rem;color:var(--text2);margin-bottom:.9em}
.tarif{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:.5em 0}
.tarif .gross{font-size:2.3rem}
.tarif span{color:var(--text2)}
dl.r{display:grid;grid-template-columns:max-content 1fr;gap:0 26px}
dl.r dt{font-weight:700;padding:9px 0;border-top:2px solid var(--putz2)}
dl.r dd{padding:9px 0;border-top:2px solid var(--putz2)}
dl.r dt:first-of-type,dl.r dd:first-of-type{border-top:0}
.form form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.95rem}
.form .voll{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 1rem/1.3 var(--body);padding:12px 12px;border:0;background:var(--putz);color:var(--text);width:100%;border-radius:0}
.form textarea{min-height:84px;resize:vertical}
.form .btn{background:var(--balken);justify-self:start}
.form .btn:hover{background:#000}
.form .alt{margin-top:22px;padding-top:18px;border-top:2px solid rgba(255,255,255,.35)}
.form .alt a.btn{background:var(--putz);color:var(--balken)}
.danke{display:none;margin-top:14px;background:var(--putz);color:var(--text);padding:16px;font-weight:600}
.danke.an{display:block}
@media(max-width:820px){.preis{grid-template-columns:1fr 1fr}.preis .neben,.preis .haupt{grid-column:span 1 !important}.preis .form{order:5}.form form{grid-template-columns:1fr}.tarif .gross{font-size:1.9rem}dl.r{grid-template-columns:1fr}dl.r dt{border-top:2px solid var(--putz2);padding-bottom:0}dl.r dd{border-top:0;padding-top:2px}}

/* Haus */
.haus .titel{grid-column:1/6}.haus .f-schlafen{grid-column:6/13;grid-row:1/3}
.haus .t-schlafen{grid-column:1/6}
.haus .f-kueche{grid-column:1/5}.haus .t-kueche{grid-column:5/9}.haus .f-wohnen{grid-column:9/13}
.haus .t-wohnen{grid-column:1/5}.haus .f-bad{grid-column:5/9}.haus .t-aus{grid-column:9/13}
.haus .foto{min-height:260px}
.haus .f-schlafen{min-height:420px}
/* Draussen */
.draussen .pano{grid-column:1/13}.draussen .pano img{aspect-ratio:3.2/1;min-height:200px}
.draussen .titel{grid-column:1/6}.draussen .f-terr{grid-column:6/13}.draussen .f-terr img{min-height:300px}
.draussen .f-schaukel{grid-column:1/5}.draussen .f-stern{grid-column:5/9}.draussen .t-park{grid-column:9/13}
.draussen .foto{min-height:240px}
/* Gegend */
.gegend .titel{grid-column:1/7}.gegend .f-pav{grid-column:7/13;grid-row:1/3}.gegend .t-stadt{grid-column:1/4}.gegend .t-burg{grid-column:4/7}
.gegend .t1{grid-column:1/5}.gegend .t2{grid-column:5/9}.gegend .t3{grid-column:9/13}
.gegend .f-pav{min-height:300px}
/* Anreise */
.anreise .titel{grid-column:1/5}.anreise .zeiten{grid-column:5/13}.anreise .zug{grid-column:1/13}
.zeiten table{width:100%;border-collapse:collapse}
.zeiten td{padding:10px 0;border-top:2px solid var(--putz2);vertical-align:top}
.zeiten tr:first-child td{border-top:0}
.zeiten td:first-child{font-weight:700;width:34%}
.zeiten td:last-child{text-align:right;white-space:nowrap}
.zug{display:flex;gap:30px;flex-wrap:wrap}.zug>div{flex:1 1 320px}
/* Gaeste */
.gaeste .titel{grid-column:1/6}.gaeste .q1{grid-column:6/13}.gaeste .q2{grid-column:1/6}.gaeste .q3{grid-column:6/10}.gaeste .q4{grid-column:10/13}.gaeste .aw{grid-column:1/13}
blockquote{font:600 1.18rem/1.45 var(--head);color:var(--balken);max-width:56ch}
.q1 blockquote{font-size:1.45rem}
cite{display:block;margin-top:.8em;font:400 .95rem var(--body);color:var(--text2);font-style:normal}
/* Kontakt */
.kontakt .k1{grid-column:1/7}.kontakt .f-tuer{grid-column:7/13}.kontakt .f-tuer img{min-height:340px}
.kontakt address{font-style:normal;margin:.6em 0 1em}
.kontakt .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn.zwei{background:var(--balken)}.btn.zwei:hover{background:#000}
.btn.drei{background:transparent;color:var(--balken);box-shadow:inset 0 0 0 3px var(--balken)}.btn.drei:hover{background:var(--putz2)}
@media(max-width:820px){.fw>.c{padding:20px 18px}.fw>.c.foto{padding:0}.haus .foto,.draussen .foto,.gegend .foto{min-height:0;height:auto}.haus .f-schlafen,.gegend .f-pav,.kontakt .f-tuer img,.draussen .f-terr img{min-height:0}.fw:not(.hero)>.c.foto img{aspect-ratio:4/3;height:auto}.draussen .pano img{aspect-ratio:2.2/1}}
footer{background:var(--balken);color:#e8dfd2;padding:26px 0 96px;font-size:.95rem}
footer .wrap{display:flex;gap:18px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{color:#fff}
.band{text-align:center;font-size:.85rem;color:#c9bdac;padding-top:14px;width:100%}
.lang.f{border-color:#e8dfd2}.lang.f a{color:#e8dfd2}.lang.f a[aria-current]{background:#e8dfd2;color:var(--balken)}
/* Mobile Buchungsleiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--putz);border-top:var(--b) solid var(--balken);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:none;gap:12px;align-items:center;transform:translateY(110%);transition:transform .35s}
.leiste.an{transform:none}
.leiste .btn{flex:1;text-align:center}
.leiste small{font-size:.9rem;line-height:1.2;color:var(--text2)}
@media(max-width:820px){.leiste{display:flex}}