/* Berghotel Gasterntal — Seitenbau 13.10.2026 (Tasty Studios): Der Weg hinunter, Sind wir offen?, Sauna, Luxus-Picknick, Das Tal.
   Nur was die Bausteine aus main.css nicht schon mitbringen. Bewegung nur über transform und opacity, nichts hebt sich bei Maus. */
.fl--zwei .kachel{--f:var(--zwei)}
.sb-klein{margin:14px 2px 0;font-size:.9rem;line-height:1.45;opacity:.8}
.sb-quelle{margin-top:10px;font-size:.88rem;line-height:1.45;opacity:.72}
.sb-mitte{text-align:center;margin-top:clamp(34px,4vw,60px)}
.sb-schluss{margin-top:clamp(54px,6.4vw,104px);margin-bottom:0}
.sb-schluss:first-child{margin-top:0}
.sb-zitat{font-family:var(--sans)!important;font-weight:500!important;font-size:1.04rem!important;line-height:1.5!important}
.kachel .sb-klein{color:var(--papier)}

/* Anfrage als Kachel mit Kerbe: Felder wie im Buchen-Fenster */
.sb-form{color:var(--papier)}
.sb-form .felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sb-form .feld--ganz{grid-column:1/-1}
.sb-form .feld{min-width:0}
.sb-form .dn-tisch__preis{margin:14px 2px 0}
.sb-form [hidden]{display:none}
@media (max-width:560px){.sb-form .felder{grid-template-columns:minmax(0,1fr)}.sb-form.kachel{padding-bottom:104px}}

/* Der Weg hinunter: Zahl links, die nächsten Fahrten rechts */
.sb-fahrten{margin-top:clamp(38px,4.6vw,70px)}
.sb-fahrten .saison__wort{max-width:20ch}
@media (min-width:561px){.sb-fahrten .angabe{grid-template-columns:minmax(0,130px) minmax(0,1fr)}}
.sb-fahrten .angabe.jetzt span{color:var(--papier)}
.sb-fahrten .angabe.jetzt b{color:var(--holz)}

/* Sind wir offen?: die Antwort im Kopf, die Woche als Leiste (heller Balken wie der Takt, heute = dunkle Taste) */
.sb-antwort{max-width:44ch!important}
.sb-antwort b{display:block;font-family:var(--titel);font-weight:600;font-size:1.7em;line-height:1.1;color:var(--holz);margin-bottom:.2em}
[data-wenn][hidden]{display:none}
.sb-woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:8px;border-radius:40px;color:var(--tinte);
  background:linear-gradient(#feffff,#eef1f2 44%,#d2d8da);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,0 3px 0 #7c8386,0 7px 0 rgba(13,16,17,.35),0 38px 56px -24px rgba(0,0,0,.95)}
.sb-woche__t{position:relative;display:grid;gap:6px;align-content:start;padding:16px clamp(10px,1.2vw,20px) 18px;border-radius:32px;min-width:0}
.sb-woche__t+.sb-woche__t::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(var(--ld),.14)}
.sb-woche__t span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tanne)}
.sb-woche__t b{font-family:var(--titel);font-weight:600;font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.12}
.sb-woche__t--wetter b,.sb-woche__t--zu b{font-size:clamp(.98rem,1.2vw,1.16rem);opacity:.78}
.sb-woche__t.heute{color:var(--papier);background:linear-gradient(#4b545a,#2c3136 55%,#1d2224);box-shadow:inset 0 1px 0 #8a949b,inset 0 -3px 0 #0d1011,0 14px 22px -12px rgba(29,34,36,.8)}
.sb-woche__t.heute span{color:var(--holz)}
.sb-woche__t.heute b{opacity:1}
.sb-woche__t.heute::before,.sb-woche__t.heute+.sb-woche__t::before{display:none}
.sb-anlass{margin:clamp(30px,3.4vw,48px) 0 0}
.sb-tel{margin-top:18px}
.sb-tel a{font-family:var(--titel);font-weight:600;font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:1;letter-spacing:-.01em}
@media (max-width:1000px){
  .sb-woche{grid-template-columns:minmax(0,1fr);border-radius:30px}
  .sb-woche__t{grid-template-columns:minmax(0,7.4rem) minmax(0,1fr);align-items:baseline;gap:12px;padding:13px 16px 14px;border-radius:22px}
  .sb-woche__t+.sb-woche__t::before{left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px}
}

/* Sauna */
.paar--sbsauna{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.sb-zahlen{margin-top:0}
#zahlen.fl{padding-block:clamp(44px,5.4vw,84px)}
@media (max-width:900px){.paar--sbsauna{grid-template-columns:minmax(0,1fr)}.sb-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.sb-zahlen .zahl:nth-child(3){border-left:0;padding-left:0}}

/* Luxus-Picknick */
.sb-polas{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start}
.sb-blatt{margin-top:26px;padding:clamp(20px,2.6vw,34px)}
.sb-blatt section:first-child .gruppe{margin-top:0}

/* Das Tal: Skizze auf einem Blatt. Linien gerechnet und zweimal gezogen, Namen in der Schrift des Hauses. */
.sb-karte{margin:0;padding:clamp(12px,2vw,30px) clamp(12px,2vw,30px) clamp(12px,1.4vw,20px);border-radius:10px;background:var(--blatt);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,0 44px 64px -36px #000}
.sb-skizze{display:block;width:100%;height:auto}
.sb-skizze--hoch{display:none}
.sb-skizze path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk-grat{stroke:rgba(var(--ld),.56);stroke-width:2.2}
.sk-fels{stroke:rgba(var(--ld),.42);stroke-width:1.5}
.sk-kander{stroke:#6f8d99;stroke-width:3}
.sk-weg{stroke:var(--tinte);stroke-width:3.4;stroke-dasharray:15 9}
.sb-skizze .k2{opacity:.42}
.sk-punkt{fill:var(--blatt);stroke:var(--tinte);stroke-width:2.6;transition:fill .3s}
.sb-skizze path.sk-haus{fill:var(--blatt);stroke:var(--tinte);stroke-width:2.3}
.sb-skizze path.sk-haus--rot{stroke:var(--laden)}
.sk-name{font:600 30px var(--titel);fill:var(--tinte);transition:fill .3s}
.sk-zeile{font:500 16px var(--sans);fill:#51595c}
.sk-fluss{font:italic 500 17px var(--sans);fill:#56727e}
.sk-name,.sk-zeile,.sk-fluss{paint-order:stroke;stroke:var(--blatt);stroke-width:8px;stroke-linejoin:round}   /* Hof in Papierfarbe: Linien laufen hinter der Schrift durch, nicht durch sie */
.sb-skizze path.sk-zug{stroke:rgba(var(--ld),.5);stroke-width:1.4}
.sk-ort{cursor:pointer}
.sk-treffer{fill:transparent;stroke:none}   /* Tippfläche um das Zeichen, unsichtbar */
.sk-ort.an .sk-punkt{fill:var(--tinte)}
.sk-ort.an .sk-name{fill:var(--tanne)}
.sk-ort:focus-visible{outline:0}.sk-ort:focus-visible .sk-name{text-decoration:underline}
.sb-karte figcaption{margin-top:10px;font-size:.86rem;line-height:1.4;opacity:.7}
.sb-orte{margin-top:clamp(26px,3vw,44px);border-top:3px double rgba(var(--lh),.3)}
.sb-ortz{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(14px,3vw,48px);align-items:baseline;padding:22px clamp(8px,1.2vw,18px);border-bottom:1px solid rgba(var(--lh),.16);scroll-margin-top:120px;transition:background-color .4s}
.sb-ortz h3{font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.1;transition:color .3s}
.sb-ortz p{max-width:64ch}
.sb-ortz small{display:block;margin-top:8px;font-size:.86rem;opacity:.66}
.sb-ortz.an{background-color:rgba(var(--lh),.06)}
.sb-ortz.an h3{color:var(--holz)}
@media (max-width:700px){
  .sb-skizze{display:none}.sb-skizze--hoch{display:block}
  .sk-name{font-size:35px}.sk-zeile{font-size:21px}.sk-fluss{font-size:21px}.sk-name,.sk-zeile,.sk-fluss{stroke-width:9px}
  .sb-ortz{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (prefers-reduced-motion:reduce){.sb-ortz,.sk-punkt,.sk-name{transition:none}}

/* Sauna: vier Bilder (Robert 17.10.2026 «Da bitte vier Bilder hin»). Zwei Reihen, die zweite gespiegelt (schmal links, breit rechts), jede Reihe auf einer Höhe. */
.sb-vier .duo--um{margin-top:clamp(22px,2.4vw,36px);grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.sb-vier .duo--um>:nth-child(1) .frei__b{aspect-ratio:8/9}
.sb-vier .duo--um>:nth-child(2) .frei__b{aspect-ratio:4/3}
@media (max-width:900px){
  .sb-vier .reihe.duo,.sb-vier .reihe.duo--um{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-vier .duo>* .frei__b,.sb-vier .duo--um>* .frei__b{aspect-ratio:4/5}
}

/* Luxus-Picknick: vier Polaroids (Robert 17.10.2026), zwei Spalten, die rechte etwas tiefer gesetzt, damit der Stapel nicht wie ein Raster steht. */
.sb-polas{row-gap:clamp(18px,2.2vw,34px)!important}
@media (min-width:901px){.sb-polas .pola:nth-child(even){margin-top:clamp(28px,3.4vw,56px)}.sb-polas .pola:nth-child(3){margin-top:calc(clamp(28px,3.4vw,56px) * -1)}}

/* Der Weg hinunter, «Ohne Auto hinunter»: Text links bekommt mehr Breite und Luft (Robert 17.10.2026 «wirkt sehr gequetscht»). */
@media (min-width:901px){.paar--ohneauto{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,5vw,96px)}}
.paar--ohneauto .lead{line-height:1.5}
.paar--ohneauto .lead+p{margin-top:clamp(20px,2vw,28px)!important;line-height:1.7}
.paar--ohneauto .sb-quelle{margin-top:16px}
.paar--ohneauto .knoepfe{margin-top:clamp(28px,3vw,40px)!important}
.paar--ohneauto a.strich{white-space:nowrap}

/* ---------- Das Tal, 17.10.2026: Karte mit mehr Angaben, Orte als Kacheln mit Bild, Bereich «Rund um Selden» ---------- */
.sk-berg{font:500 14px var(--mono);letter-spacing:.16em;text-transform:uppercase;fill:#6f777a}
.sk-klein{font:600 19px var(--titel);fill:var(--tinte)}
.sk-zeit{font:500 14px var(--sans);fill:#5b6366}
.sk-berg,.sk-klein,.sk-zeit{paint-order:stroke;stroke:var(--blatt);stroke-width:7px;stroke-linejoin:round}
.sb-skizze path.sk-gipfel{fill:none;stroke:rgba(var(--ld),.62);stroke-width:2;stroke-linejoin:round}
.sb-skizze path.sk-haus--klein{stroke-width:1.8}
.sk-punkt--klein{stroke-width:2}
.sb-skizze path.sk-firn{fill:#e3ebee;stroke:#6f8d99;stroke-width:1.6;stroke-linejoin:round}
.sb-skizze path.sk-pfad{fill:none;stroke:var(--tinte);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
@media (max-width:900px){.sk-klein{font-size:24px}.sk-zeit,.sk-berg{font-size:18px}}

/* Miniaturkacheln: kleine Felder mit Bezeichnung und Wert */
.mk{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:16px}
.mk>div{padding:10px 12px 11px;border-radius:10px;background:rgba(var(--lh),.05);box-shadow:inset 0 0 0 1px rgba(var(--lh),.13),inset 0 1px 0 rgba(var(--lh),.08)}
.mk small{display:block;margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:1;color:var(--holz)}
.mk b{display:block;font-family:var(--titel);font-weight:600;font-size:1.02rem;line-height:1.25}
.mk--legende{grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0 4px}
.mk--legende>div{background:#eef1f1;box-shadow:inset 0 0 0 1px #d9dfe0}
.mk--legende small{color:#7d6544}
@media (max-width:900px){.mk--legende{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Die vier Orte als Kacheln: Bild links, Text rechts, zwei mal zwei */
.sb-orte--kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);border-top:0;margin-top:clamp(30px,3.4vw,52px)}
.sb-orte--kacheln .sb-ortz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,1.8vw,26px);align-items:start;padding:12px;border:0;border-radius:var(--r-l);background:linear-gradient(180deg,rgba(var(--lh),.07),rgba(var(--lh),.03));box-shadow:inset 0 0 0 1px rgba(var(--lh),.12),0 30px 44px -30px rgba(0,0,0,.7);cursor:pointer}
.sb-ortz__b{display:block;height:100%;min-height:220px;overflow:hidden;border-radius:calc(var(--r-l) - 6px)}
.sb-ortz__b img{width:100%;height:100%;object-fit:cover}
.sb-ortz__t{padding:10px 10px 8px 0}
.sb-orte--kacheln .sb-ortz h3{font-size:clamp(1.5rem,2vw,2rem)}
.sb-ortz__z{margin-top:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--holz)}
.sb-ortz__t>p:not(.sb-ortz__z){margin-top:12px;font-size:.98rem;line-height:1.6}
.sb-orte--kacheln .sb-ortz small{margin-top:12px}
.sb-orte--kacheln .sb-ortz.an{background:linear-gradient(180deg,rgba(var(--lh),.12),rgba(var(--lh),.05))}
@media (max-width:1100px){.sb-orte--kacheln{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.sb-orte--kacheln .sb-ortz{grid-template-columns:minmax(0,1fr)}.sb-ortz__b{min-height:0;aspect-ratio:16/10}.sb-ortz__t{padding:4px 6px 8px}}

/* Rund um Selden: fünf Karten, die ersten zwei breit, darunter vier schmal */
.sb-umg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.sb-umg__k{grid-column:span 4;display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--karte);box-shadow:inset 0 0 0 1px rgba(var(--lh),.1),0 34px 50px -34px #000;overflow:hidden}
.sb-umg__k:nth-child(1),.sb-umg__k:nth-child(2){grid-column:span 6}
.sb-umg__b{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.sb-umg__k:nth-child(1) .sb-umg__b,.sb-umg__k:nth-child(2) .sb-umg__b{aspect-ratio:16/9}
.sb-umg__b img{width:100%;height:100%;object-fit:cover}
.sb-umg__b .kerbe{--f:var(--karte);font-family:var(--titel);font-weight:600;font-size:clamp(1.05rem,1.3vw,1.3rem);color:var(--papier)}
.sb-umg__t{flex:1;display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px)}
.sb-umg__t h3{font-size:clamp(1.45rem,1.9vw,1.9rem);line-height:1.1}
.sb-umg__z{margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--holz)}
.sb-umg__t>p:not(.sb-umg__z){margin-top:12px;font-size:.98rem;line-height:1.6}
.sb-umg__t .mk{margin-top:auto;padding-top:16px}
.sb-umg__t small{display:block;margin-top:12px;font-size:.8rem;opacity:.6}
@media (max-width:1100px){.sb-umg__k,.sb-umg__k:nth-child(1),.sb-umg__k:nth-child(2){grid-column:span 6}}
@media (max-width:640px){.sb-umg__k,.sb-umg__k:nth-child(1),.sb-umg__k:nth-child(2){grid-column:1/-1}}
.sb-orte--kacheln .sb-ortz{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.sb-orte--kacheln .mk{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
@media (max-width:600px){.sb-orte--kacheln .sb-ortz{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.sb-vier .reihe.duo>:nth-child(n) .frei__b{aspect-ratio:4/5}}