/* Restaurant Chilchli Bärenwil · Zifferblatt-System
   Farben aus den Fotos: Papier (Fassade/Tischtuch), Tanne (Waldhang), Ziegel (Dach), Föhre (Holzdecke), Olive (Säli-Stühle) */
@font-face{font-family:"Young Serif";src:url(/assets/fonts/young-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#F2EAD8; --papier-2:#F8F2E4; --tanne:#22331E; --tanne-2:#2E4529; --tanne-tief:#17220F;
  --ziegel:#9A4429; --foehre:#B27A38; --foehre-hell:#DBAE6E; --olive:#5F5E2C; --nebel:#D8CFB9;
  --f-display:"Young Serif",Georgia,"Times New Roman",serif;
  --f-text:"Newsreader",Georgia,"Times New Roman",serif;
  --f-label:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --gutter:clamp(1rem,4.5vw,3.25rem); --max:1280px; --mark:9.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
body{margin:0;background:var(--papier) url(/assets/img/grain.png);color:var(--tanne);font:400 1.0625rem/1.55 var(--f-text);font-optical-sizing:auto;padding-bottom:5.25rem;overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--ziegel);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--tanne)}
:focus-visible{outline:3px solid var(--ziegel);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--tanne);color:var(--papier);padding:.75rem 1rem;z-index:100;font-family:var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.skip:focus{top:1rem}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.02;margin:0 0 .6em;text-wrap:balance}
h2{font-size:clamp(1.75rem,1.2rem + 2.6vw,3rem)}
h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);line-height:1.15}
p{margin:0 0 1em;max-width:62ch}
address{font-style:normal}
sup{font-size:.7em}
.eyebrow{font:600 1rem/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;color:var(--ziegel)}
.lead{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.4;max-width:34em}
.fussnote{font-size:.9rem;opacity:.86;max-width:60ch}
.mehr{margin-top:1.25rem;font-family:var(--f-label);font-weight:500;letter-spacing:.06em;font-size:1.1rem}

/* ---------- Buttons: Stempel statt Schatten ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.4rem 1.5rem;font:600 1.15rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--tanne);background:var(--papier-2);border:2px solid var(--tanne);border-radius:2px;box-shadow:4px 4px 0 var(--tanne);transition:transform .12s,box-shadow .12s;cursor:pointer;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tanne);color:var(--tanne)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tanne)}
.btn-primary{background:var(--ziegel);color:var(--papier-2)}
.btn-primary:hover{color:var(--papier-2);background:#853821}
.btn-linie{background:transparent}
.btn-klein{min-height:2.75rem;padding:.3rem 1rem;font-size:1.05rem}
.btn-gross{min-height:4rem;font-size:1.3rem;padding-inline:2rem}
.btn-reihe{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;margin-top:1.5rem}
.btn-reihe .btn{flex:1 1 13rem}
.btn-linie-hell{background:transparent;color:var(--papier);border-color:var(--papier);box-shadow:4px 4px 0 var(--foehre)}
.btn-linie-hell:hover{color:var(--papier);box-shadow:2px 2px 0 var(--foehre)}

/* ---------- Kopf ---------- */
.kopf{position:relative;z-index:20;display:flex;align-items:center;gap:1rem;padding:.9rem var(--gutter);max-width:var(--max);margin:0 auto}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tanne);margin-right:auto}
.marke-turm{width:1.9rem;height:2.15rem;fill:currentColor;flex:none}
.marke-name{font:400 1.9rem/1 var(--f-display)}
.marke-ort{display:none;font:500 .95rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;border-left:2px solid var(--tanne);padding-left:.7rem;margin-left:.2rem}
.menu summary{list-style:none;display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 .9rem;font:600 1.05rem var(--f-label);letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--tanne);cursor:pointer;border-radius:2px;background:var(--papier-2)}
.menu summary::-webkit-details-marker{display:none}
.menu-icon{width:1.1rem;height:.8rem;border-block:2px solid var(--tanne);position:relative}
.menu-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--tanne);transform:translateY(-50%)}
.menu[open] summary{background:var(--tanne);color:var(--papier)}
.menu[open] .menu-icon{border-color:var(--papier)}.menu[open] .menu-icon::after{background:var(--papier)}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--tanne);color:var(--papier);padding:1rem var(--gutter) 2rem;z-index:30;box-shadow:0 20px 0 -0px var(--papier)}
.menu nav ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.menu nav a{display:block;padding:.55rem 0;font:400 1.9rem/1.1 var(--f-display);color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(242,234,216,.25)}
.menu nav a[aria-current]{color:var(--foehre-hell)}
.menu nav a:focus-visible{outline-color:var(--foehre-hell)}
.kopf-aktion{display:none;align-items:center;gap:1.2rem}
.kopf-tel{display:none;font:600 1.15rem var(--f-label);letter-spacing:.08em;text-decoration:none;color:var(--tanne);white-space:nowrap}
.nav-desktop{display:none}

/* ---------- Aktionsleiste (Handy) ---------- */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1.5fr 1fr;gap:.75rem;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));background:var(--papier) url(/assets/img/grain.png);border-top:2px solid var(--tanne)}
.aktionsleiste .btn{min-height:3.5rem;box-shadow:3px 3px 0 var(--tanne)}

/* ---------- Seitenkopf ---------- */
.seite-kopf{max-width:var(--max);margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--gutter) clamp(1.5rem,4vw,3rem)}
.seite-kopf h1{font-size:clamp(2.6rem,1.2rem + 7vw,7rem);line-height:.96;max-width:12em;margin-bottom:.35em;text-wrap:balance}
.seite-kopf .lead{margin-bottom:0}

/* ---------- Trennlinie mit Dachreiter ---------- */
.rule{max-width:var(--max);margin:clamp(2rem,5vw,4rem) auto;padding:0 var(--gutter);display:flex;align-items:flex-end;gap:1rem;color:var(--tanne)}
.rule::before,.rule::after{content:"";flex:1;border-top:2px solid currentColor;margin-bottom:.35rem}
.rule svg{width:1.7rem;height:1.9rem;fill:currentColor;flex:none}

/* ---------- Läutordnung-Reihen ---------- */
.reihe{max-width:var(--max);margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) var(--gutter);display:grid;gap:1rem 2rem}
.reihe-marke span{display:inline-block;font:600 1rem/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ziegel);border-top:2px solid var(--ziegel);padding-top:.55rem}
.reihe-inhalt{min-width:0}

/* ---------- Startseite: Hero ---------- */
.hero{max-width:var(--max);margin:0 auto;overflow-x:clip;padding:clamp(1.5rem,4vw,3rem) var(--gutter) 0;display:grid;gap:1.5rem}
.hero h1{font-size:clamp(2.7rem,1.4rem + 6.8vw,6.6rem);line-height:.94;letter-spacing:-.01em;margin-bottom:.4em}
.hero-text{position:relative;z-index:2}
.status{margin:1.4rem 0 0;font:500 1.1rem/1.35 var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.status-live{display:block;color:var(--ziegel);font-weight:600;font-size:1.25rem;margin-bottom:.15rem}
.hero-uhr{margin:0;position:relative;z-index:1}
.hero-uhr figcaption{font-size:.95rem;max-width:34ch;margin:.75rem auto 0;text-align:center;opacity:.9}

/* ---------- Zifferblatt ---------- */
.dial{display:block;width:100%;height:auto;overflow:visible}
.d-month{fill:var(--tanne)}.d-month.odd{fill:var(--tanne-2)}
.d-mtext{fill:var(--papier);font:600 27px var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.d-season{fill:var(--nebel)}.d-season.d-he{fill:var(--foehre-hell)}.d-season.d-fr{fill:#CBC7A6}
.d-stext{fill:var(--tanne);font:600 21px var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.d-arc{fill:var(--ziegel);transition:transform .2s,opacity .2s}
.d-zu{fill:var(--papier);stroke:var(--ziegel);stroke-width:3.5}
.d-day{stroke:var(--tanne);stroke-width:2.5;transition:fill .2s}
.d-day.open{fill:#EADFC6}.d-day.closed{fill:url(#d-hatch)}.d-day.is-today{fill:var(--ziegel)}
.d-dname{font:400 40px var(--f-display);fill:var(--tanne)}
.d-dtime{font:600 21px var(--f-label);letter-spacing:.06em;fill:var(--tanne)}
.d-dlabel.is-today .d-dname,.d-dlabel.is-today .d-dtime{fill:var(--papier-2)}
.d-dlabel.closed .d-dname{opacity:.55}
.d-core{fill:var(--papier-2);stroke:var(--tanne);stroke-width:3}
.d-tower{color:var(--tanne)}
.d-alt{font:600 34px var(--f-label);letter-spacing:.12em;fill:var(--tanne)}
.d-glocke{font:italic 400 23px var(--f-text);fill:var(--tanne)}
.d-hand{fill:var(--ziegel);stroke:var(--papier);stroke-width:2.5;stroke-linejoin:round;transform:rotate(var(--a,0deg));transform-origin:0 0;animation:zeiger 2.2s cubic-bezier(.16,.72,.2,1) .25s both}
.d-tip{fill:var(--ziegel);stroke:var(--papier);stroke-width:4}
.d-hub{fill:var(--tanne);stroke:var(--papier);stroke-width:3}
.dial .is-lit{transform:scale(1.045);opacity:1}
.dial.has-lit .d-arc:not(.is-lit){opacity:.35}
@keyframes zeiger{from{transform:rotate(0deg)}}

/* ---------- Jetzt / Karte-Auszug ---------- */
.jetzt{display:grid;gap:2rem;align-items:start}
.jetzt-text h2{font-size:clamp(2rem,1.2rem + 4vw,4.2rem);line-height:.98}
.karte{background:var(--papier-2);border:2px solid var(--tanne);padding:clamp(1.25rem,3vw,2.75rem);position:relative}
.karte::before{content:"";position:absolute;inset:6px;border:1px solid var(--tanne);opacity:.5;pointer-events:none}
.karte-mini{background:var(--tanne);color:var(--papier);border-color:var(--tanne)}
.karte-mini::before{border-color:var(--papier);opacity:.35}
.karte-mini-titel{font:600 1rem var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--foehre-hell);margin:0 0 .75rem}
.karte-mini-fuss{font:500 .95rem var(--f-label);letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin:1rem 0 0}
.karte-mini .gerichte{margin:0}

/* ---------- Gerichte ---------- */
.gerichte{list-style:none;margin:0;padding:0}
.gericht{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem;padding:.55rem 0;break-inside:avoid}
.g-name{font:500 1.18rem/1.25 var(--f-text);max-width:calc(100% - 5.2rem)}
.g-menge{font:500 .95rem var(--f-label);letter-spacing:.06em;opacity:.8;white-space:nowrap}
.g-dots{flex:1 1 1rem;min-width:.8rem;border-bottom:2px dotted currentColor;opacity:.4;transform:translateY(-.22em)}
.g-preis{font:600 1.3rem/1 var(--f-label);letter-spacing:.03em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.g-desc{flex-basis:100%;font-style:italic;font-size:.98rem;line-height:1.35;opacity:.88;margin-top:.15rem}

/* ---------- Fahrplan ---------- */
.fahrplan{list-style:none;margin:0;padding:0}
.fp-row{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;align-items:baseline;padding:1rem 0;border-top:2px solid var(--tanne)}
.fp-row:last-child{border-bottom:2px solid var(--tanne)}
.fp-datum{font:600 1.2rem/1 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.fp-datum b{font:400 clamp(1.9rem,1.4rem + 2.6vw,3rem)/1 var(--f-display);letter-spacing:0;margin-right:.15rem}
.fp-was{grid-column:1/-1;display:flex;flex-direction:column;font-size:1.08rem;line-height:1.35}
.fp-was strong{font-weight:600}
.fp-tag{grid-row:1;grid-column:2;font:600 .95rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;padding:.4rem .6rem;background:var(--ziegel);color:var(--papier-2);border-radius:2px}
.fp-geschlossen .fp-tag{background:transparent;color:var(--tanne);border:2px solid var(--tanne)}
.fp-row[data-arc]{transition:background .15s}
.fp-row[data-arc]:hover{background:rgba(154,68,41,.08)}
.gross-hinweis{font:400 clamp(1.4rem,1.1rem + 1.4vw,2.1rem)/1.15 var(--f-display);margin-bottom:1.5rem}
.anschlag{background:var(--papier-2);border:2px solid var(--ziegel);padding:1.5rem 1.5rem 1.25rem;position:relative;max-width:46rem;margin:1.5rem 0}
.anschlag::before{content:"";position:absolute;top:.6rem;left:50%;width:.7rem;height:.7rem;margin-left:-.35rem;border-radius:50%;background:var(--ziegel)}
.anschlag h2,.anschlag h3{margin-top:.6rem;color:var(--ziegel)}
.anschlag .fahrplan{margin-top:1rem}
.notizen{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.notiz{border-left:6px solid var(--foehre);padding:.2rem 0 .2rem 1.25rem;max-width:48rem}
.notiz h2,.notiz h3{margin-bottom:.25em;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}.notiz p{margin-bottom:.4em}
.notiz-saison h2{font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem)}

/* ---------- Bogenfenster ---------- */
.fenster{margin:0;position:relative}
.fenster img{width:100%;height:auto;border-radius:50% 50% 0 0/37.5% 37.5% 0 0;box-shadow:0 0 0 5px var(--papier),0 0 0 7px var(--tanne);background:var(--nebel)}
.fenster figcaption{font:600 1rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;margin-top:1.1rem;padding-left:.25rem}
.fenster-quer img{border-radius:42% 42% 0 0/34% 34% 0 0}
.fenster-hoch img{border-radius:50% 50% 0 0/36% 36% 0 0}
.fenster-reihe{display:grid;gap:2.25rem;max-width:26rem}
.unter-fenster{margin-top:2rem;max-width:44em}

/* ---------- Wegweiser ---------- */
.wegweiser{list-style:none;margin:2rem 0;padding:0 0 0 1.1rem;position:relative;display:grid;gap:.7rem}
.wegweiser::before{content:"";position:absolute;left:0;top:-.8rem;bottom:-.8rem;width:.55rem;background:var(--tanne)}
.wegweiser li,.wegweiser a{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--tanne);text-decoration:none}
.wegweiser li{background:var(--foehre-hell);padding:.85rem 2.6rem .85rem 1.1rem;clip-path:polygon(0 0,calc(100% - 1.5rem) 0,100% 50%,calc(100% - 1.5rem) 100%,0 100%);margin-left:0}
.wegweiser li:has(a){padding:0}.wegweiser li a{width:100%;padding:.85rem 2.6rem .85rem 1.1rem}
.wegweiser li:nth-child(even){clip-path:polygon(1.5rem 0,100% 0,100% 100%,1.5rem 100%,0 50%);padding-left:2.6rem;padding-right:1.1rem;margin-left:.8rem}
.wegweiser li:nth-child(even):has(a){padding:0}.wegweiser li:nth-child(even) a{padding-left:2.6rem;padding-right:1.1rem}
.wegweiser li:has(a):hover{background:var(--foehre)}
.ww-ziel{font:500 1.2rem/1.25 var(--f-text);font-weight:600}
.ww-zeit{font:600 1.15rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.wegweiser-kurz{max-width:44rem}

/* ---------- Schluss ---------- */
.schluss{background:var(--tanne);color:var(--papier);margin-top:clamp(2.5rem,6vw,5rem);padding:clamp(2.5rem,7vw,6rem) var(--gutter)}
.schluss>*{max-width:var(--max);margin-inline:auto}
.schluss-gross{font:400 clamp(2.4rem,1.2rem + 6.5vw,6.5rem)/.98 var(--f-display);max-width:11em;margin-bottom:.3em;text-wrap:balance}
.schluss-namen{font:600 1.15rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--foehre-hell);margin-bottom:.3rem}
.schluss-adresse{font-size:1.2rem}
.schluss .btn-primary{border-color:var(--papier);box-shadow:4px 4px 0 var(--foehre)}
.schluss .btn-hell{box-shadow:4px 4px 0 var(--foehre);border-color:var(--papier)}
.schluss .btn:hover{box-shadow:2px 2px 0 var(--foehre)}
.schluss a:not(.btn){color:var(--foehre-hell)}
.schluss :focus-visible{outline-color:var(--foehre-hell)}
.schluss-klein{padding-block:clamp(2rem,4vw,3.5rem)}
.schluss-klein p{font:400 clamp(1.5rem,1.1rem + 1.6vw,2.4rem)/1.15 var(--f-display);max-width:20em}

/* ---------- Fuss ---------- */
.fuss{background:var(--tanne-tief);color:var(--papier);padding:clamp(2rem,5vw,3.5rem) var(--gutter) 1.5rem}
.fuss a{color:var(--papier)}.fuss a:hover{color:var(--foehre-hell)}
.fuss :focus-visible{outline-color:var(--foehre-hell)}
.fuss-raster{max-width:var(--max);margin:0 auto;display:grid;gap:2rem}
.fuss-titel{font:600 1rem var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--foehre-hell);margin-bottom:.6rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss-zeiten li span{display:inline-block;min-width:7.5rem;font:600 1rem var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.fuss-links li{padding:.25rem 0}
.rule-fuss{color:var(--papier);opacity:.6}
.fuss-klein{max-width:var(--max);margin:0 auto;font-size:.9rem;opacity:.7}

/* ---------- Speisekarte ---------- */
.karte-leiste{max-width:var(--max);margin:0 auto 2rem;padding:0 var(--gutter);display:flex;flex-wrap:wrap;gap:1rem 1.25rem}
.karte-gross,.karte-stein{max-width:calc(var(--max) - 2*var(--gutter));margin:0 var(--gutter) 2.5rem}
@media (min-width:1300px){.karte-gross,.karte-stein{margin-inline:auto}}
.karte-spalten{column-gap:clamp(2rem,5vw,5rem)}
.k-abschnitt{break-inside:avoid;margin-bottom:2.5rem}
.k-abschnitt h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);padding-bottom:.45rem;border-bottom:2px solid var(--tanne);margin-bottom:.6rem}
.k-intro{font-family:var(--f-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:-.1rem 0 .4rem}
.k-fuss{font-size:.95rem;font-style:italic;margin-top:1.2rem;padding-top:1rem;border-top:1px solid currentColor;opacity:.9;max-width:none}
.k-wild{background:var(--tanne);color:var(--papier);padding:clamp(1.25rem,3vw,2rem);margin-inline:calc(-1*clamp(.4rem,1vw,1rem))}
.k-wild h2{border-color:var(--foehre-hell);color:var(--papier);font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem)}
.k-wild .g-preis{color:var(--foehre-hell)}
.karte-stein header{display:grid;gap:.2rem;margin-bottom:1rem}
.karte-stein h2{font-size:clamp(2.2rem,1.4rem + 4vw,4.6rem);margin-bottom:.15em}
.stein-dazu{margin-top:1.5rem;padding-top:1rem;border-top:2px solid var(--tanne)}
.stein-dazu-titel{font:600 1rem var(--f-label);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.4rem}
.stein-dazu ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:0}
.stein-dazu li::before{content:"·";margin-right:.5rem;color:var(--ziegel)}
.k-pdf{margin:1.5rem 0 0}
.seite-karte .seite-kopf h1{font-size:clamp(3rem,1.4rem + 9vw,9rem)}

/* ---------- Brunch ---------- */
.brunch{max-width:var(--max);margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--gutter);display:grid;gap:2.5rem}
.brunch h1{font-size:clamp(4rem,2rem + 14vw,12rem);line-height:.85;margin:0 0 .1em}
.brunch-anm{font:600 1.4rem var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ziegel);margin-bottom:1.5rem}
.brunch-regeln{list-style:none;margin:0 0 1.5rem;padding:0;max-width:26rem}
.brunch-regeln li{padding:.9rem 0;border-top:2px solid var(--tanne);font-size:1.25rem}
.brunch-regeln li:last-child{border-bottom:2px solid var(--tanne)}
.brunch-fotos{display:grid;gap:2rem;align-content:start}
.brunch-fotos .quer{width:min(100%,400px);border:2px solid var(--tanne);padding:.4rem;background:var(--papier-2);justify-self:start}

/* ---------- Räume ---------- */
.raum{max-width:var(--max);margin:0 auto;padding:1rem var(--gutter);display:grid;gap:2rem}
.raum h2{font-size:clamp(2.4rem,1.4rem + 4vw,4.2rem);margin-bottom:.15em;overflow-wrap:anywhere}
.raum-plaetze{font:600 1.4rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ziegel);margin-bottom:.8rem}
.raum-bilder{display:grid;gap:2.25rem;max-width:56rem}
.reihe-anlass{margin-top:1rem}

/* ---------- Gästezimmer ---------- */
.galerie{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.foto{margin:0}.foto img{width:100%;max-width:400px;border:2px solid var(--tanne);padding:.35rem;background:var(--papier-2)}
.foto:nth-child(3n+2){margin-top:1.5rem}
.seite-zimmer .seite-kopf h1{font-size:clamp(2.2rem,1rem + 5vw,5.2rem);max-width:15em}

/* ---------- Geschichte ---------- */
.geschichte{max-width:var(--max);margin:0 auto;padding:1rem var(--gutter);display:grid;gap:2.5rem}
.geschichte-text{font-size:clamp(1.1rem,1rem + .4vw,1.28rem);max-width:40rem}
.geschichte-text .glocke{font:400 clamp(1.5rem,1.2rem + 1.4vw,2.2rem)/1.2 var(--f-display);margin-top:1.5rem;border-top:2px solid var(--tanne);padding-top:1rem}
.geschichte-text .glocke b{font-weight:400}
.geschichte-bild{margin:0;max-width:26rem}
.zeitleiste{list-style:none;margin:0 0 1rem;padding:0 0 0 1.5rem;border-left:2px solid var(--tanne);display:grid;gap:1.6rem;max-width:44rem}
.zeitleiste li{position:relative;display:grid;gap:.15rem}
.zeitleiste li::before{content:"";position:absolute;left:calc(-1.5rem - 7px);top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--ziegel);border:2px solid var(--papier)}
.zeitleiste b{font:400 clamp(1.6rem,1.2rem + 1.6vw,2.4rem)/1.1 var(--f-display)}
.stube{display:grid;gap:2rem}
.stube .fenster{max-width:22rem}
.ueber{display:grid;gap:2rem}
.ueber .fenster{max-width:36rem}
.fakten{margin:1.5rem 0 0;display:grid}
.fakten div{display:grid;gap:.1rem;padding:.8rem 0;border-top:1px solid var(--tanne)}
.fakten div:last-child{border-bottom:1px solid var(--tanne)}
.fakten dt{font:600 .95rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ziegel)}
.fakten dd{margin:0;font-size:1.2rem}

/* ---------- Wandern ---------- */
.nordic{max-width:var(--max);margin:0 auto;padding:1rem var(--gutter) 1rem}
.nordic-kopf{max-width:46rem}
.nordic h2{font-size:clamp(1.9rem,1.2rem + 3.4vw,3.6rem)}
.nordic-tabellen{display:grid;gap:2rem;margin:2rem 0}
.tabelle{background:var(--papier-2);border:2px solid var(--tanne);padding:1.25rem}
.tabelle-gruen{border-color:var(--olive);box-shadow:6px 6px 0 var(--olive)}
.tabelle h3{margin-bottom:.6rem}
.tabelle table{width:100%;border-collapse:collapse}
.tabelle th,.tabelle td{padding:.55rem .35rem;text-align:left;border-top:1px solid var(--nebel);font-variant-numeric:tabular-nums}
.tabelle thead th{font:600 .9rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;border-top:0}
.tabelle tbody th{font-weight:600}
.karte-bild{margin:2rem 0 0}
.karte-bild img{width:100%;border:2px solid var(--tanne)}
.karte-bild figcaption{font-size:.92rem;margin-top:.6rem}
.liste-punkte{padding-left:1.2rem;max-width:44rem}.liste-punkte li{margin-bottom:.4rem}
.hinweis-box{display:inline-block;border:2px solid var(--olive);padding:.8rem 1.1rem;background:var(--papier-2);font-size:1.15rem}

/* ---------- Besuch ---------- */
.oz-tabelle{border-collapse:collapse;width:100%;max-width:38rem;margin:1rem 0}
.oz-tabelle th,.oz-tabelle td{padding:1rem 0;border-top:2px solid var(--tanne);text-align:left}
.oz-tabelle tr:last-child th,.oz-tabelle tr:last-child td{border-bottom:2px solid var(--tanne)}
.oz-tabelle th{font:400 clamp(1.3rem,1.1rem + 1vw,1.9rem)/1.1 var(--f-display);padding-right:1rem}
.oz-tabelle td{font:600 clamp(1.25rem,1.05rem + .9vw,1.7rem) var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.oz-tabelle .ruhe td{color:var(--ziegel)}
.oz-live{font:600 1.35rem var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ziegel);min-height:1.5em}
.anfahrt{display:grid;gap:2rem}
.anfahrt-bilder{display:grid;gap:1.25rem;align-content:start}
.anfahrt-bilder img{border:2px solid var(--tanne);padding:.35rem;background:var(--papier-2);width:100%}
.anfahrt-bilder .skizze{max-width:400px}.anfahrt-bilder .luftbild{max-width:724px}.anfahrt-bilder .haus{max-width:625px}
.kontakt h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);text-transform:none}
.kontakt address{font-size:1.25rem;margin-bottom:1rem}
.kontakt-tel a,.kontakt-mail a{font:400 clamp(2rem,1.2rem + 4vw,4rem)/1.05 var(--f-display);text-decoration:none;color:var(--tanne);border-bottom:3px solid var(--ziegel)}
.kontakt-mail a{font-size:clamp(1.3rem,1rem + 2vw,2.2rem);word-break:break-word}
.kontakt-tel,.kontakt-mail{margin-bottom:.6rem}
.kontakt h3{margin-top:2.5rem}
.anfrage-liste{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1rem;max-width:26rem}

/* ---------- Links / Recht ---------- */
.links{list-style:none;margin:0;padding:0;max-width:44rem}
.links a{display:flex;flex-direction:column;padding:1rem 0;border-top:2px solid var(--tanne);text-decoration:none;color:var(--tanne)}
.links li:last-child a{border-bottom:2px solid var(--tanne)}
.links a:hover .l-name{color:var(--ziegel)}
.l-name{font:400 clamp(1.3rem,1.1rem + 1vw,1.8rem)/1.2 var(--f-display)}
.l-url{font:500 1rem var(--f-label);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.recht{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 3rem}
.recht-text{max-width:46rem}.recht-text h2{font-size:1.6rem;margin-top:2rem}

/* ---------- ab Tablet ---------- */
@media (min-width:640px){
  .aktionsleiste{grid-template-columns:auto auto;justify-content:center}
  .galerie{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .fenster-reihe{grid-template-columns:repeat(3,1fr);max-width:none;gap:1.75rem}
  .fenster-reihe .fenster:nth-child(2){margin-top:2.5rem}.fenster-reihe .fenster:nth-child(3){margin-top:1rem}
  .raum-bilder{grid-template-columns:repeat(auto-fit,minmax(11rem,15rem));gap:1.75rem}
  .raum-bilder .fenster:nth-child(2){margin-top:2rem}.raum-bilder .fenster:nth-child(3){margin-top:.5rem}
  .nordic-tabellen{grid-template-columns:1fr 1fr}
  .fp-row{grid-template-columns:minmax(10rem,14rem) 1fr auto;gap:.5rem 1.5rem}
  .fp-was{grid-column:2;grid-row:1}.fp-tag{grid-column:3;grid-row:1}
}
@media (max-width:999px){.hero .btn-reihe{display:none}}
@media (max-width:639px){.d-dtime{display:none}.d-stext{font-size:24px;letter-spacing:.08em}.d-mtext{font-size:30px}.d-dname{font-size:46px}}

/* ---------- Desktop ---------- */
@media (min-width:1000px){
  body{padding-bottom:0;font-size:1.1875rem}
  .aktionsleiste,.menu{display:none}
  .marke-ort{display:none}@media (min-width:1420px){.marke-ort{display:inline-block}}
  .kopf{padding-block:1.4rem;gap:1.5rem}
  .nav-desktop{display:block}
  .nav-desktop ul{list-style:none;margin:0;padding:0;display:flex;gap:1.05rem}
  .nav-desktop a{font:600 1.08rem var(--f-label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--tanne);padding:.5rem 0;border-bottom:3px solid transparent}
  .nav-desktop a:hover{border-color:var(--foehre)}.nav-desktop a[aria-current]{border-color:var(--ziegel)}
  .kopf-aktion{display:flex}@media (min-width:1420px){.kopf-tel{display:inline}}
  .marke{margin-right:0}.kopf .nav-desktop{margin-left:auto}
  .reihe{grid-template-columns:var(--mark) minmax(0,1fr);gap:0 2.5rem}
  .reihe-marke span{writing-mode:vertical-rl;transform:rotate(180deg);border-top:0;border-bottom:2px solid var(--ziegel);padding:0 0 .55rem;position:sticky;top:2rem}
  .reihe-marke{display:flex;justify-content:flex-end}
  .hero{grid-template-columns:repeat(12,1fr);padding-top:1rem;min-height:44rem;align-items:start}
  .hero-text{grid-column:1/8;grid-row:1;padding-top:3.5rem;z-index:3}.hero-text .lead,.hero-text .btn-reihe{max-width:30rem}.hero .status{max-width:30rem}
  .hero-uhr{grid-column:6/13;grid-row:1;margin:-.5rem 0 0}
  .hero-uhr figcaption{text-align:left;margin-left:12%}
  .hero h1{font-size:clamp(3.6rem,5.6vw,6.4rem);max-width:7.6em}
  .jetzt{grid-template-columns:1fr minmax(0,26rem);gap:3.5rem}
  .karte-mini{transform:rotate(1.2deg);margin-top:1.5rem}
  .karte-spalten{columns:2}
  .brunch{grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start}
  .brunch-fotos{grid-template-columns:1fr;align-items:start;justify-items:start}
  .brunch-fotos .fenster{width:min(100%,21rem)}.brunch-fotos .quer{margin:-4.5rem 0 0 auto;position:relative;z-index:2;width:min(100%,360px);justify-self:end}
  .raum{grid-template-columns:var(--mark) 25rem minmax(0,1fr);gap:2.5rem;align-items:start;padding-block:1.5rem}
  .raum-text{grid-column:2}.raum-bilder{grid-column:3}
  .raum-3 .raum-text{grid-column:2/4}
  .galerie{grid-template-columns:repeat(4,1fr);gap:1.75rem}
  .geschichte{grid-template-columns:minmax(0,1fr) 25rem;gap:4.5rem;align-items:start}
  .geschichte-bild{margin-top:3rem}
  .stube{grid-template-columns:minmax(0,1fr) 20rem;gap:4rem;align-items:start}
  .ueber{grid-template-columns:minmax(0,1fr) 34rem;gap:4rem;align-items:start}
  .anfahrt{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:3.5rem}
  .fuss-raster{grid-template-columns:1.2fr 1.2fr 1fr}
  .schluss{padding-inline:calc(var(--gutter) + var(--mark) + 2.5rem)}
  .schluss>*{margin-inline:0}
  .schluss-klein p{max-width:22em}
}


/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
}
@media (prefers-contrast:more){.g-dots{opacity:.7}.d-day.open{fill:var(--papier-2)}}

/* ---------- Druck ---------- */
@media print{
  @page{margin:14mm}
  body{background:#fff!important;color:#000;font-size:11pt;padding:0}
  .kopf,.aktionsleiste,.fuss,.schluss,.karte-leiste,.skip,.rule,.btn,.k-pdf{display:none!important}
  .seite-kopf{padding:0 0 8mm}.seite-kopf h1{font-size:34pt}
  .karte{background:#fff;border:1px solid #000;padding:6mm;margin:0 0 6mm;max-width:none}.karte::before{display:none}
  .karte-spalten{columns:2;column-gap:10mm}
  .k-wild{background:#fff!important;color:#000!important;border:2px solid #000;margin-inline:0;padding:4mm}
  .k-wild h2,.k-wild .g-preis{color:#000!important;border-color:#000}
  .k-abschnitt,.gericht{break-inside:avoid}
  .g-dots{opacity:1}a{color:#000;text-decoration:none}
}

/* Nachträge */
.schluss .btn-linie{color:var(--papier);border-color:var(--papier);box-shadow:4px 4px 0 var(--foehre)}
.schluss .btn-linie:hover{color:var(--papier);box-shadow:2px 2px 0 var(--foehre)}
.oz-tabelle td{white-space:nowrap}
.fuss-tel{grid-column:1/-1;margin:0 0 .5rem;max-width:none}.fuss-tel .fuss-titel{display:block}.fuss-tel a{font:400 clamp(2.4rem,1.4rem + 5vw,5rem)/1 var(--f-display);text-decoration:none;color:var(--papier);border-bottom:3px solid var(--foehre)}