/* Carlton-Europe — Seitenbau 13.10.2026: Eigenes der neuen Seiten (Zimmerseiten, Hotelrestaurant, Kaminbar, Dachterrasse,
   Ihre Abreise, Veranstaltungen, Interlaken & Region). Alles Übrige kommt aus main.css und dienste.css.
   Farben, Rundungen, Kurven aus :root. Bewegung nur über transform und opacity, kein Weichzeichner, keine Punkte in Tasten. */

/* ---------- zwei Spalten gleich breit (Text-Tafeln, Bögen) ---------- */
.sb-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);align-items:stretch}
.sb-zwei--blatt{align-items:start}
.sb-zwei > [data-r]{display:grid}
.sb-jz{padding:clamp(24px,3vw,44px);border-radius:var(--r-l);background:linear-gradient(180deg,#12305e,#0b2148);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.34),inset 0 0 0 7px #0d2650,inset 0 0 0 8px rgba(220,198,143,.2),0 26px 34px -26px rgba(3,10,24,.85)}
.sb-jz .d3 em{color:var(--gold)}
.sb-jz .gross{margin-top:16px;color:#fff}
.sb-jz .lauf{margin-top:12px;color:rgba(255,255,255,.8)}
.sb-jz .kn-reihe{margin-top:20px}
.fl--papier .sb-jz,.fl--creme .sb-jz{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.5),inset 0 0 0 7px #0d2650,inset 0 0 0 8px rgba(220,198,143,.2),0 30px 40px -28px rgba(40,30,10,.7)}

/* ---------- Schalter Ja/Nein: gewählt zeigt sich über die Fläche ---------- */
.sb-wahl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:16px 0;border-top:1px solid var(--linie,rgba(12,21,38,.14));cursor:pointer}
.blatt .felder + .sb-wahl{margin-top:20px}
.sb-wahl input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sb-wahl__t b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.25}
.sb-wahl__t span{display:block;margin-top:4px;font-size:.86rem;line-height:1.45;opacity:.74}
.sb-wahl__s{position:relative;display:grid;grid-template-columns:1fr 1fr;width:118px;height:40px;padding:4px;border-radius:999px;background:#08193a;box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 0 0 1px rgba(220,198,143,.34)}
.sb-wahl__s::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(180deg,#fbf3e2,#e8dbbf);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 8px -5px rgba(0,0,0,.7);transition:transform .45s var(--e2)}
.sb-wahl__s i{position:relative;z-index:1;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);transition:color .35s}
.sb-wahl__s i:first-child{color:var(--tinte)}
.sb-wahl input:checked ~ .sb-wahl__s::before{transform:translateX(100%)}
.sb-wahl input:checked ~ .sb-wahl__s i:first-child{color:rgba(255,255,255,.72)}
.sb-wahl input:checked ~ .sb-wahl__s i:last-child{color:var(--tinte)}
.sb-wahl input:focus-visible ~ .sb-wahl__s{outline:1.5px solid var(--gold);outline-offset:4px}
.fl--navy .t > .sb-wahl,.fl--nacht .t > .sb-wahl{margin-top:clamp(22px,2.6vw,34px);border-top-color:rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.fl--navy .t > .sb-wahl .sb-wahl__s,.fl--nacht .t > .sb-wahl .sb-wahl__s{background:#041025}
.sb-abreise .blatt .quelle{margin-top:14px;max-width:none}
.sb-abreise [data-nur-fahrt][hidden]{display:none}
.sb-abreise .dn-summe .felder{margin-top:6px}
.sb-abreise .dn-summe .feld input{font-family:var(--serif);font-size:1.1rem}

/* ---------- Abfahrten ab Interlaken Ost und West ---------- */
.sb-zug{max-width:1040px;margin-inline:auto;padding:clamp(18px,2.4vw,34px);border-radius:var(--r-xl);background:linear-gradient(180deg,#12305e,#0b2148);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.34),inset 0 0 0 8px #0d2650,inset 0 0 0 9px rgba(220,198,143,.2),0 30px 44px -30px #000}
.sb-zug__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:4px 6px 16px}
.sb-zug__weg{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.sb-zug__weg [hidden]{display:none}
.sb-zug__liste{display:grid;gap:6px;min-height:340px;align-content:start}
.sb-zug__leer{padding:28px 14px;color:rgba(255,255,255,.76)}
.sb-zug__leer a{box-shadow:inset 0 -1px 0 currentColor}
.sb-zugzeile{display:grid;grid-template-columns:5.4rem minmax(0,1fr) auto auto;gap:6px 18px;align-items:center;width:100%;padding:13px 18px;border-radius:16px;text-align:left;color:#fff;background:rgba(3,10,24,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);transition:background .35s,color .35s,transform .35s var(--e2)}
.sb-zugzeile:hover{background:rgba(3,10,24,.2)}
.sb-zugzeile:active{transform:scale(.992)}
.sb-zugzeile b{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1;font-variant-numeric:tabular-nums}
.sb-zugzeile__nach{font-size:1.06rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-zugzeile__nach small{display:block;margin-top:3px;font-size:.8rem;font-weight:400;color:var(--gold)}
.sb-zugzeile__linie,.sb-zugzeile__gleis{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.78);white-space:nowrap}
.sb-zugzeile__gleis{min-width:5.2em;text-align:right}
.sb-zugzeile[aria-pressed="true"]{color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(220,198,143,.9)}
.sb-zugzeile[aria-pressed="true"] .sb-zugzeile__linie,.sb-zugzeile[aria-pressed="true"] .sb-zugzeile__gleis{color:rgba(12,21,38,.74)}
.sb-zugzeile[aria-pressed="true"] .sb-zugzeile__nach small{color:var(--taupe)}
.sb-zug__liste.sb-neu .sb-zugzeile{animation:sbAuf .7s var(--e1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes sbAuf{from{transform:translateY(18px)}to{transform:none}}
.sb-zug__stand{margin:16px 6px 0;max-width:none;color:rgba(255,255,255,.82)}

/* ---------- Veranstaltungen ---------- */
.staffel--termin .st__preis{font-size:clamp(1.12rem,1.35vw,1.36rem)}
.sb-ev .sb-ev__kn{order:6;justify-content:center;margin:clamp(14px,1.6vw,20px) 0 4px}
form.blatt.sb-reise{max-width:820px;margin-inline:auto}
form.blatt.sb-reise .kn-reihe{justify-content:center}
.sb-termine__stand{max-width:820px;margin:clamp(22px,2.6vw,34px) auto 0;text-align:center;font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.3;color:var(--gold)}
.sb-termine__stand:empty{display:none}
.sb-termine{max-width:1040px;margin:clamp(24px,3vw,44px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,70px)}
.sb-termin{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.sb-termin b{font-family:var(--serif);font-weight:400;font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.2}
.sb-termin span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sb-termin.aus{display:none}
#region .quelle{margin-inline:auto;text-align:center;color:rgba(255,255,255,.86)}

/* ---------- Pass-Berater ---------- */
.pb{display:grid;gap:clamp(20px,2.4vw,34px)}
.pb__konsole{margin-top:0}
form.blatt.pb__wahl{width:min(100%,820px);margin-inline:auto}
.pb__erg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);align-items:stretch}
.pb-k{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,34px);border-radius:var(--r-l);background:linear-gradient(180deg,#12305e,#0b2148);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.34),inset 0 0 0 7px #0d2650,inset 0 0 0 8px rgba(220,198,143,.2),0 26px 34px -26px #000}
.pb-k--best{background:linear-gradient(180deg,#fdf8ec,#f0e5cb);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(138,117,69,.7),inset 0 0 0 7px #fbf3e2,inset 0 0 0 8px rgba(138,117,69,.36),0 30px 40px -26px #000}
.pb-k__art{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.pb-k--best .pb-k__art{color:var(--taupe)}
.pb-k__name{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.8rem);line-height:1.12}
.pb-k__preis{margin-top:clamp(14px,1.6vw,22px);font-family:var(--serif);font-size:clamp(2.3rem,3.6vw,3.6rem);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.pb-k__preis small{margin-right:10px;font-family:var(--sans);font-size:.92rem;letter-spacing:.12em;opacity:.72}
.pb-k__preis em{font-style:normal;font-size:clamp(1.3rem,1.8vw,1.7rem);color:inherit}
.pb-k__unter{margin-top:10px;font-size:.9rem;line-height:1.45;opacity:.78;min-height:2.9em}
.pb-k__liste{margin-top:clamp(14px,1.6vw,22px);display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.pb-k--best .pb-k__liste{border-top-color:rgba(12,21,38,.16)}
.pb-k__liste li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.98rem}
.pb-k--best .pb-k__liste li{border-bottom-color:rgba(12,21,38,.12)}
.pb-k__liste b{font-weight:600;text-align:right}
.pb-k__liste i{font-style:normal;opacity:.66;text-align:right}
.pb-k__liste .frei b{color:var(--gold)}
.pb-k--best .pb-k__liste .frei b{color:#6c5a2e}
.pb-k__fuss{margin-top:auto;padding-top:16px;font-size:.8rem;line-height:1.45;opacity:.66}
.pb-k__marke{align-self:flex-start;margin-bottom:14px;padding:6px 14px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--weiss);background:var(--blau)}
.pb__leer{grid-column:1/-1;padding:26px;text-align:center;color:rgba(255,255,255,.8)}
.pb__erg.da .pb-k{animation:sbAuf .9s var(--e1) both;animation-delay:calc(var(--i,0)*90ms)}
.pb__erg.ruhig .pb-k{animation:none}
.pb__haus{margin-top:clamp(30px,3.6vw,56px)}
#pass .quelle{max-width:none;color:rgba(255,255,255,.86)}
/* Tasten der Auswahl-Leiste: kein Punkt (Regel 2.9, Punkt 10), auch falls eine frühere Fassung ihn noch setzt */
.pb__konsole .taste::before{content:none}
.pb__konsole .taste{padding-left:20px;padding-right:20px}

/* ---------- Umgebungskarte ---------- */
.uk{display:grid;gap:clamp(18px,2.2vw,32px)}
.uk__rahmen{border-radius:var(--r-l);overflow:hidden;background:var(--papier);box-shadow:0 0 0 1px rgba(138,117,69,.5),inset 0 0 0 1px #fff,0 4px 0 #a39370,0 40px 60px -36px rgba(40,30,10,.7)}
.uk__zug{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(138,117,69,.5) transparent}
.uk__blatt{position:relative;width:100%;min-width:940px}
.uk__blatt img{display:block;width:100%;height:100%}
.uk-w{position:absolute;transform:translate(-50%,-50%) rotate(var(--d,0deg));white-space:nowrap;pointer-events:none;font-family:var(--serif);font-size:13px;line-height:1;color:var(--navy)}
.uk-w--w{font-size:13.5px;letter-spacing:.3em;color:#4f6a86}
.uk-w--see{font-size:16px;letter-spacing:.2em;color:#4f6a86;margin:14px 0 0 -16px}
.uk-w--berg{font-size:19px;letter-spacing:.3em;color:#6f6a3f}
.uk-w--s{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.uk-w--m{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.uk-w--l{transform:translate(0,-50%)}
.uk-p{position:absolute;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--navy);background:var(--weiss);box-shadow:0 0 0 1.5px var(--navy),0 6px 10px -5px rgba(3,10,24,.6);transition:transform .4s var(--e2),background .3s,color .3s}
.uk-p::after{content:'';position:absolute;inset:-8px;border-radius:50%}
.uk-p:hover{transform:scale(1.12)}
.uk-p[aria-pressed="true"]{z-index:3;transform:scale(1.28);color:var(--weiss);background:var(--blau);box-shadow:0 0 0 1.5px var(--navy),0 0 0 4px rgba(220,198,143,.9),0 10px 14px -6px rgba(3,10,24,.7)}
.uk-haus{position:absolute;z-index:1;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;color:var(--gold);background:var(--navy);box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4px rgba(220,198,143,.8),0 10px 16px -8px rgba(3,10,24,.8);pointer-events:none}
.uk-haus svg{width:34px;height:auto}
.uk__legende{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);counter-reset:none;list-style:none;margin:0;padding:0}
.uk-l{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;width:100%;height:100%;padding:14px 16px;border-radius:var(--r-m);text-align:left;color:var(--tinte);background:rgba(255,255,255,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(110,88,44,.18);transition:background .3s,color .3s,transform .4s var(--e2)}
.uk-l:hover{transform:translateY(-2px)}
.uk-l i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--sans);font-style:normal;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.uk-l b{display:block;font-family:var(--serif);font-weight:400;font-size:1.04rem;line-height:1.22}
.uk-l span span{display:block;margin-top:5px;font-size:.84rem;line-height:1.45;opacity:.76}
.uk-l[aria-pressed="true"]{color:#fff;background:var(--blau);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(220,198,143,.6)}
.uk-l[aria-pressed="true"] i{color:var(--tinte);background:var(--gold);box-shadow:none}

/* ---------- schmal ---------- */
@media (max-width:1100px){
  .pb__erg{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto;width:100%}
  .pb-k__unter{min-height:0}
  .uk__legende{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sb-zwei,.sb-termine{grid-template-columns:minmax(0,1fr)}
  .sb-zugzeile{grid-template-columns:4.4rem minmax(0,1fr) auto;padding:12px 14px;gap:4px 12px}
  .sb-zugzeile__linie{grid-column:2;grid-row:2;justify-self:start}
  .sb-zugzeile__gleis{grid-column:3;grid-row:1/3}
  .sb-zug__liste{min-height:420px}
}
@media (max-width:560px){
  .uk__legende{grid-template-columns:minmax(0,1fr)}
  .sb-wahl{grid-template-columns:minmax(0,1fr)}
  .sb-wahl__s{justify-self:start}
  form.blatt.sb-reise .felder{grid-template-columns:minmax(0,1fr)}
  .pb__konsole .taste{padding-left:15px;padding-right:15px}
}
@media (prefers-reduced-motion:reduce){.sb-zug__liste.sb-neu .sb-zugzeile,.pb__erg.da .pb-k{animation:none}.sb-wahl__s::before{transition:none}}
/* Abfahrten, ganz schmal: der Schalter Ost/West passt in die Tafel */
@media (max-width:430px){
  .sb-zug{padding:14px 12px 16px}
  .sb-zug__kopf{padding-inline:0}
  .sb-zug .tabs.tabs--schalter{width:100%}
  .sb-zug .tabs.tabs--schalter .tab{min-width:0;padding-left:8px;padding-right:8px;font-size:13px;letter-spacing:0;white-space:nowrap}
}

/* =====================================================================
   EDLER (Robert 13.10.2026, 15 Uhr: «Entrees zu den Bereichen bisschen mehr», «Zimmer edler», nie als Kopie eines anderen Hauses erkennbar).
   Hintergrundbild, Aufbau und Blau des Seitenkopfs bleiben. Dazu kommt das Eigene des Carlton: das CE in Gold mit Linie, mehr Raum.
   Zimmerseiten: grosse Fotos, Angaben als dunkelblaue Tafel mit doppelter Goldlinie und Siegel (Formular-Karte und Siegel des Hauses).
   ===================================================================== */
/* ---------- Seitenkopf ---------- */
.sk2__z{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);margin:0 0 clamp(18px,2.2vw,30px);color:var(--gold);font-family:var(--serif);font-size:clamp(.98rem,1.12vw,1.14rem);line-height:1;letter-spacing:.02em}
.sk2__z svg{flex:none;width:clamp(46px,4.4vw,64px);height:auto;filter:drop-shadow(0 2px 6px rgba(3,10,24,.55))}
.sk2__z i{flex:none;width:clamp(44px,6vw,96px);height:1px;background:linear-gradient(90deg,var(--gold),rgba(220,198,143,.35));transform-origin:0 50%}
.sk2__z a,.sk2__z span{color:rgba(255,255,255,.92);white-space:nowrap}
.sk2__z a{box-shadow:inset 0 -1px 0 rgba(220,198,143,.55);padding-bottom:3px;transition:color .3s}
.sk2__z a:hover{color:var(--gold)}
.sk2__z i{transform:scaleX(0);transition:transform 1.1s var(--e1) .35s}
.sk2__z.da i{transform:none}
/* Der Kopf füllt den ganzen ersten Bildschirm (Robert 13.10.2026 ~16 Uhr: «genauso gross wie beim Rivage, nicht unten abgeschnitten»). */
@media (min-width:861px){
  .sk2:not(.sk2--text){min-height:max(100vh,560px);min-height:max(100svh,560px);align-items:center}
  .sk2__b{width:68%}
  .sk2:not(.sk2--text) .sk2__t{padding-bottom:clamp(44px,5vw,84px);max-width:min(720px,50vw)}
}
@media (max-width:860px){
  .sk2:not(.sk2--text){display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  .sk2:not(.sk2--text) .sk2__b{flex:1 1 auto;height:auto;min-height:62vw}
  .sk2:not(.sk2--text)>.in{flex:none;width:100%}
}
/* doppelte Goldlinie am Fuss des Kopfs, wie an den Karten des Hauses */
.sk2:not(.sk2--text){box-shadow:inset 0 -1px 0 rgba(220,198,143,.55),inset 0 -5px 0 var(--navy),inset 0 -6px 0 rgba(220,198,143,.28)}

/* ---------- Zimmerseite: Auftakt ---------- */
.zst__zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.2vw,76px);align-items:center}
.zst__t .d2{font-size:clamp(2.1rem,4vw,4.2rem)}
.zst__t .gross{margin-top:clamp(18px,2.2vw,30px)}
.zst__t .kn-reihe{margin-top:clamp(22px,2.6vw,36px)}
@media (min-width:961px){
  .zst__b .zmos{aspect-ratio:1.24/1}
  .zst__b--2 .zmos{aspect-ratio:1.5/1}
  .zst__b .zmos__b{border-radius:28px;box-shadow:0 0 0 1px rgba(138,117,69,.34),0 44px 50px -30px rgba(40,30,10,.7)}
  .zst__b .zmos__b:first-child{border-radius:36px}
}
/* Billett: zwei Teile (Angaben, Abriss), an der Naht aus jedem Teil links und rechts ein Viertelkreis geschnitten: echte Kerben, durch die das Papier scheint.
   Rahmen als Linien auf den Teilen (nicht an der Naht), Perforation gestrichelt in Gold. Kein Schatten darunter (Regel für alle Tickets). */
.zs-billett{--k:13px;--gl:rgba(220,198,143,.72);margin-top:clamp(26px,3vw,40px);color:#fff}
.zs-billett__haupt,.zs-billett__abriss{position:relative;background-color:#0f2a55;border:1px solid var(--gl)}
.zs-billett__haupt{padding:clamp(26px,2.8vw,38px) clamp(14px,1.8vw,26px) clamp(20px,2.2vw,28px);border-bottom:0;border-radius:var(--r-m) var(--r-m) 0 0;
  background-image:radial-gradient(circle var(--k) at 0 100%,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px)),radial-gradient(circle var(--k) at 100% 100%,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px)),linear-gradient(180deg,#12305e,#0e2852);
  -webkit-mask:radial-gradient(circle var(--k) at 0 100%,transparent calc(var(--k) - .5px),#000 var(--k)),radial-gradient(circle var(--k) at 100% 100%,transparent calc(var(--k) - .5px),#000 var(--k));-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 100%,transparent calc(var(--k) - .5px),#000 var(--k)),radial-gradient(circle var(--k) at 100% 100%,transparent calc(var(--k) - .5px),#000 var(--k));mask-composite:intersect}
.zs-billett__abriss{padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,30px) clamp(18px,2vw,24px);border-top:0;border-radius:0 0 var(--r-m) var(--r-m);
  background-image:radial-gradient(circle var(--k) at 0 0,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px)),radial-gradient(circle var(--k) at 100% 0,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px)),linear-gradient(180deg,#0e2852,#0b2148);
  -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent calc(var(--k) - .5px),#000 var(--k)),radial-gradient(circle var(--k) at 100% 0,transparent calc(var(--k) - .5px),#000 var(--k));-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 0,transparent calc(var(--k) - .5px),#000 var(--k)),radial-gradient(circle var(--k) at 100% 0,transparent calc(var(--k) - .5px),#000 var(--k));mask-composite:intersect}
/* zweite, feine Goldlinie innen (doppelte Linie des Hauses), an der Naht offen */
.zs-billett__haupt::before,.zs-billett__abriss::before{content:'';position:absolute;inset:6px;border:1px solid rgba(220,198,143,.36);pointer-events:none}
.zs-billett__haupt::before{bottom:0;border-bottom:0;border-radius:calc(var(--r-m) - 6px) calc(var(--r-m) - 6px) 0 0}
.zs-billett__abriss::before{top:0;border-top:0;border-radius:0 0 calc(var(--r-m) - 6px) calc(var(--r-m) - 6px)}
/* Perforation */
.zs-billett__abriss::after{content:'';position:absolute;left:calc(var(--k) + 10px);right:calc(var(--k) + 10px);top:-1px;border-top:2px dashed rgba(220,198,143,.6)}
.zs-billett .zs-tafel__mit{margin:0;padding:0;border:0}
.zs-tafel__drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.zs-tafel__drei div{padding:4px clamp(8px,1vw,16px);text-align:center;border-left:1px solid rgba(220,198,143,.3)}
.zs-tafel__drei div:first-child{border-left:0}
.zs-tafel__drei dt{font-family:var(--mono);font-size:clamp(10px,.82vw,11.5px);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.zs-tafel__drei dd{margin:10px 0 0;font-family:var(--serif);font-size:clamp(1.12rem,1.62vw,1.7rem);line-height:1.12;color:var(--weiss)}
.zs-tafel__mit{margin:clamp(18px,2vw,24px) clamp(6px,1vw,14px) 0;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid rgba(220,198,143,.3);text-align:center;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.86);text-wrap:balance}
@media (max-width:960px){
  .zst__zwei{grid-template-columns:minmax(0,1fr)}
  .zst__b{order:-1}
}
@media (max-width:860px){.sk2__z{position:relative;z-index:3;margin-top:22px}}
@media (max-width:420px){.zs-tafel__drei dt{font-size:9.5px;letter-spacing:.06em}.zs-tafel__drei dd{font-size:1.02rem}}
@media (prefers-reduced-motion:reduce){.sk2__z i{transform:none;transition:none}}
@media (max-width:860px){.zst__b--2 .zmos__b:nth-child(2){grid-column:1/-1}}

/* ---------- Zimmerseite: «In jedem Zimmer» und die Karte «Ihr Aufenthalt» (Robert 13.10.2026 ~16 Uhr: «links besser, rechts schöner, Luxushotel») ----------
   Links die Ausstattung wie auf einer Tafel des Hauses gesetzt: Titelschrift, zwei Spalten, feine Goldlinien. Rechts der Papierbogen als Karte:
   Titel mittig zwischen Goldlinien, Zeilen mit Punktlinie wie auf der Weinkarte. */
.zst-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(22px,3vw,48px);margin:clamp(24px,2.8vw,40px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(220,198,143,.42)}
.zst-liste li{padding:clamp(13px,1.3vw,18px) 0;border-bottom:1px solid rgba(220,198,143,.42);font-family:var(--serif);font-size:clamp(1.12rem,1.42vw,1.46rem);line-height:1.2;letter-spacing:.005em;color:var(--weiss)}
.zst-liste li:last-child:nth-child(odd){grid-column:1/-1}
.zst-karte{padding:clamp(30px,3.4vw,56px) clamp(24px,3.2vw,54px) clamp(26px,3vw,46px)}
.zst-karte__kopf{text-align:center}
.zst-karte__kopf .d3 em{color:var(--taupe)}
.zst-karte__zeile{display:flex;align-items:center;gap:16px;margin:clamp(14px,1.6vw,20px) 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.zst-karte__zeile::before,.zst-karte__zeile::after{content:'';flex:1;height:3px;border-top:1px solid rgba(138,117,69,.6);border-bottom:1px solid rgba(138,117,69,.28)}
.zst-karte__liste{margin:clamp(18px,2.2vw,30px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(16px,1.7vw,22px)}
.zst-karte__liste li{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;align-items:baseline;gap:2px 12px}
.zst-karte__n{font-family:var(--serif);font-size:clamp(1.12rem,1.36vw,1.36rem);line-height:1.2}
.zst-karte__liste i{align-self:end;height:1px;margin-bottom:.34em;border-bottom:1.5px dotted rgba(138,117,69,.75)}
.zst-karte__liste b{font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.36vw,1.36rem);line-height:1.2;color:var(--blau);white-space:nowrap;font-variant-numeric:lining-nums}
.zst-karte__liste small{grid-column:1/-1;font-size:.92rem;line-height:1.5;color:rgba(12,21,38,.7);max-width:52ch}
@media (max-width:560px){
  .zst-liste{grid-template-columns:minmax(0,1fr)}
  .zst-karte__liste li{grid-template-columns:minmax(0,1fr) auto}
  .zst-karte__liste i{display:none}
  .zst-karte__liste b{white-space:normal;text-align:right}
}

/* =====================================================================================================================
   STARTSEITE, Roberts Durchgang 13.10.2026 ab 16 Uhr. Jeder Block lässt sich einzeln löschen, darunter gilt wieder main.css.
   ===================================================================================================================== */

/* «Das Vintage Hotel»: Bilder grösser, Namen in der Einkerbung statt darunter («mit Einkerbungen bei den Bildern arbeiten, Bilder ein bisschen grösser») */
@media (min-width:861px){
  #willkommen .zwei{grid-template-columns:minmax(0,5fr) minmax(0,6.7fr);column-gap:clamp(28px,3.4vw,62px)}
  #willkommen .zwei>.t,#willkommen .zwei>.b{grid-column:auto}
}
.trio--frei:has(.frei--kerbe){gap:clamp(12px,1.4vw,22px)}
.trio--frei .frei--kerbe .rahmen__k{aspect-ratio:4/3.05;border-radius:24px}
.trio--frei .frei--kerbe:first-child .rahmen__k{aspect-ratio:16/10.2;border-radius:28px}
.frei--kerbe .kerbe{--f:var(--papier);font-size:clamp(1.15rem,1.65vw,1.8rem);line-height:1.15;-webkit-text-stroke:.3px currentColor;
  padding:clamp(9px,.95vw,14px) clamp(20px,2vw,30px) clamp(8px,.85vw,12px) clamp(14px,1.5vw,22px)}
.trio--frei .frei--kerbe:first-child .kerbe{font-size:clamp(1.3rem,2.1vw,2.3rem)}
/* Robert 14.10.2026 01:44, Startseite «Das Vintage Hotel.»: «alle drei Texte in den Kacheln unten links ein bisschen kleiner» */
/* 02:55 nachgeschärft («Wo sind die jetzt kleiner?»): ein Fünftel weniger sah er nicht, jetzt rund 40 % unter dem Ausgang */
@media (min-width:861px){#willkommen .frei--kerbe .kerbe{font-size:clamp(.94rem,1.1vw,1.2rem);padding:clamp(9px,.8vw,12px) clamp(16px,1.6vw,23px) clamp(8px,.74vw,11px) clamp(13px,1.2vw,18px)}/* 03:05: Text mittig in der Einkerbung, sass zu weit unten */#willkommen .trio--frei .frei--kerbe:first-child .kerbe{font-size:clamp(1rem,1.28vw,1.4rem)}}
.fl--creme .frei--kerbe .kerbe{--f:var(--creme)}
@media (max-width:860px){.trio--frei .frei--kerbe .rahmen__k{border-radius:18px}.trio--frei .frei--kerbe:first-child .rahmen__k{border-radius:20px}
  .frei--kerbe .kerbe{font-size:1.02rem;padding:8px 14px 6px 10px}.trio--frei .frei--kerbe:first-child .kerbe{font-size:1.2rem}}

/* «Wie viel Zeit haben Sie?»: randlose Kacheln mit Tiefe («3D-Kacheln randlos und Einkerbungen», dann 16:20: «müssen sich vom Untergrund abheben,
   den Namen unten links einbeziehen, der Hintergrund dort normal blau und nicht Tapete»). Die Kachel ist eine ganze Fläche: Foto, unten links das blaue Namensfeld
   in der Einkerbung. Abheben auf dunklem Grund: helle Kante oben, dunkle Lippe unten, zwei Schatten. Bei Maus hebt sich nichts, der Name wird golden. */
#zeitfrage .zs__k{--e:clamp(13px,1.3vw,20px);--f:#12305e;padding:0;gap:0;border-radius:clamp(16px,1.6vw,24px);background:var(--f);color:#fbf3e2;overflow:hidden;
  box-shadow:0 4px 0 #030b1c,0 22px 30px -12px rgba(0,0,0,.8),0 54px 64px -34px rgba(0,0,0,.95)}
#zeitfrage .zs__k::before{content:none}
#zeitfrage .zs__k::after{content:'';display:block;position:absolute;z-index:3;inset:0;top:0;right:0;width:auto;height:auto;border-radius:inherit;background:none;opacity:1;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(236,214,157,.2)}
#zeitfrage .zs__b{flex:none;width:auto;border-radius:0;background:#0b1f40;aspect-ratio:1/1.02}
#zeitfrage .zs--offen .zs__k .zs__b{aspect-ratio:1.86/1}
#zeitfrage .zs--offen .zs__k[aria-pressed="true"]{border-radius:clamp(20px,2.2vw,32px);padding:0;
  box-shadow:0 5px 0 #030b1c,0 30px 40px -16px rgba(0,0,0,.85),0 70px 80px -40px rgba(0,0,0,.96)}
#zeitfrage .zs--offen .zs__k[aria-pressed="true"] .zs__b{aspect-ratio:16/11;border-radius:0}
#zeitfrage .zs__n{position:absolute;z-index:2;left:0;bottom:0;flex:none;display:block;margin:0;border-radius:0 var(--e) 0 0;background:var(--f);box-shadow:none;color:inherit;text-align:left;line-height:1.1;white-space:nowrap;
  padding:clamp(9px,.9vw,13px) clamp(18px,1.8vw,26px) clamp(8px,.8vw,12px) clamp(13px,1.3vw,19px);font-size:clamp(.98rem,1.25vw,1.3rem);transition:color .4s}
#zeitfrage .zs__n::before,#zeitfrage .zs__n::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--f) var(--e))}
#zeitfrage .zs__n::before{left:0;bottom:100%}#zeitfrage .zs__n::after{left:100%;bottom:0}
#zeitfrage .zs--offen .zs__k[aria-pressed="true"] .zs__n{padding:clamp(12px,1.3vw,19px) clamp(24px,2.6vw,38px) clamp(11px,1.2vw,17px) clamp(18px,1.9vw,28px);margin:0;border-radius:0 var(--e) 0 0;font-size:clamp(1.35rem,2.2vw,2.4rem)}
/* Robert 14.10.2026 01:44, «Wie viel Zeit haben Sie?»: der Text in der grössten Kachel kleiner */
@media (min-width:861px){#zeitfrage .zs--offen .zs__k[aria-pressed="true"] .zs__n{font-size:clamp(1.04rem,1.36vw,1.5rem);padding:clamp(10px,1vw,14px) clamp(19px,1.9vw,28px) clamp(9px,.9vw,13px) clamp(14px,1.4vw,21px)}}
#zeitfrage .zs .zs__k:hover,#zeitfrage .zs .zs__k.da:hover,#zeitfrage .zs--offen .zs__k.da:not([aria-pressed="true"]):hover{box-shadow:0 4px 0 #030b1c,0 22px 30px -12px rgba(0,0,0,.8),0 54px 64px -34px rgba(0,0,0,.95)}
@media (hover:hover){#zeitfrage .zs .zs__k.da:hover,#zeitfrage .zs--offen .zs__k.da:not([aria-pressed="true"]):hover{transform:none}
  #zeitfrage .zs__k:not([aria-pressed="true"]):hover .zs__n{color:var(--gold)}}
/* Auftritt: die ganze Gruppe schwebt herein wie die Bilder bei «Das Vintage Hotel» (Robert 16:28), siehe BEWEGUNG unten */
@media (max-width:860px){
  #zeitfrage .zs__k{--e:11px;border-radius:14px}
  #zeitfrage .zs--offen .zs__k,#zeitfrage .zs--offen .zs__k:nth-child(n+4){padding:0;border-radius:14px}
  #zeitfrage .zs--offen .zs__k .zs__b,#zeitfrage .zs--offen .zs__k:nth-child(n+4) .zs__b{width:auto;aspect-ratio:1.62/1;border-radius:0}
  #zeitfrage .zs--offen .zs__k .zs__n{font-size:.92rem;padding:7px 13px 6px 10px;margin:0;border-radius:0 var(--e) 0 0}
  #zeitfrage .zs--offen .zs__k[aria-pressed="true"]{padding:0;border-radius:20px;margin-top:10px}
  #zeitfrage .zs--offen .zs__k[aria-pressed="true"] .zs__b{aspect-ratio:4/3.1;border-radius:0}
  #zeitfrage .zs--offen .zs__k[aria-pressed="true"] .zs__n{font-size:1.32rem;padding:10px 20px 9px 14px;margin:0;border-radius:0 var(--e) 0 0}
}

/* «Vielfältiger Genuss»: die vier Lokale ohne Bilder, als Hausschild neben der hellen Tafel («Keine Bilder. Man kann das anders schön machen, den Text.»).
   Eine dunkle Platte mit Goldlinie, die vier Namen im Kreuz, in der Mitte die Raute. */
.lokale--schild{position:relative;gap:0;border-radius:var(--r-m);color:#fbf3e2;
  background:linear-gradient(rgba(220,198,143,.34),rgba(220,198,143,.34)) 50% 50%/1px calc(100% - clamp(44px,5vw,76px)) no-repeat,
    linear-gradient(rgba(220,198,143,.34),rgba(220,198,143,.34)) 50% 50%/calc(100% - clamp(44px,5vw,76px)) 1px no-repeat,
    linear-gradient(180deg,#183a70,#0d2650 52%,#081c3e);
  box-shadow:inset 0 0 0 1px rgba(220,198,143,.62),inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 #040d1f,0 34px 50px -30px rgba(0,0,0,.9)}
.lokale--schild::before{content:'';position:absolute;inset:7px;border:1px solid rgba(220,198,143,.26);border-radius:calc(var(--r-m) - 4px);pointer-events:none}
.lokale--schild::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;transform:rotate(45deg);background:#0d2650;box-shadow:inset 0 0 0 1px var(--gold);pointer-events:none}
.lokale--schild li{display:flex;min-width:0}
.lokale--schild .lokal,.lokale--schild .lokal:hover{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:clamp(20px,2.1vw,30px) clamp(10px,1.1vw,17px);
  border-radius:0;background:none;box-shadow:none;transform:none;color:inherit;text-align:center}
.lokale--schild .lokal__n{display:flex;flex-direction:column;gap:clamp(7px,.8vw,11px);margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
.lokale--schild .lokal__n i{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.lokale--schild .lokal__n b{display:grid;place-items:center;min-height:2.2em;font-size:clamp(1.2rem,1.7vw,1.9rem);line-height:1.1;color:#fbf3e2;transition:color .4s}
@media (min-width:1380px){.lokale--schild .lokal__n b{min-height:0;white-space:nowrap}}
/* kleiner Pfeil in der Ecke jedes Felds statt eines Knaufs: die Platte bleibt niedrig */
.lokale--schild .lokal__pf{position:absolute;right:clamp(16px,1.5vw,22px);top:clamp(16px,1.5vw,22px);display:block;width:11px;height:11px;color:var(--gold);font-style:normal;opacity:.75;transition:transform .5s var(--e1),opacity .4s}
.lokal__pf svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
@media (hover:hover){.lokale--schild .lokal:hover .lokal__n b{color:var(--gold)}.lokale--schild .lokal:hover .lokal__pf{transform:translate(2px,-2px);opacity:1}}
.lokale--schild .lokal:focus-visible{outline:2px solid var(--gold);outline-offset:-10px}
/* die Platte ragt nicht mehr ins Foto (Robert 16:20: «die Kachel kleiner, dass sie das obere Bild nicht schneidet»): sie beginnt unter dem Bild und schliesst unten mit der hellen Tafel ab */
@media (min-width:861px){.ort__unten--karten>.lokale--schild{align-self:end;grid-auto-rows:auto;margin-top:calc(clamp(70px,10vw,150px) + clamp(16px,1.8vw,26px))}}
@media (max-width:860px){.lokale--schild .lokal,.lokale--schild .lokal:hover{padding:22px 8px 20px}.lokale--schild .lokal__n b{font-size:1.14rem}.lokale--schild .lokal__n i{font-size:10px;letter-spacing:.14em}.lokale--schild .lokal__pf{right:13px;top:13px;width:9px;height:9px}}

/* «Oberländer Wellnessdörfli»: die Bildgruppe breiter («da auch noch ein bisschen breiter») */
@media (min-width:861px){#wellness .zwei--um>.t{grid-column:8/-1}#wellness .zwei--um>.b{grid-column:1/8}}

/* =====================================================================================================================
   SCHLUSS DER STARTSEITE ALS POSTKARTE (Robert 13.10.2026, 16:50, mit Bildern der Einladung am Grand Beau-Rivage: «das mit der Karte war ganz cool, sowas Ähnliches fürs Carlton,
   aber man soll auf keinen Fall sehen, dass es kopiert ist»). Dort: hohes Billett mit Buchungsleiste, Abriss und drei Spalten. Hier: eine Ansichtskarte im Querformat aus dem Vintage-Haus,
   links der Gruss mit den zwei Knöpfen, rechts das Zeichen des Hauses in Gold und drei Zeilen (zweite Fassung, ohne Briefmarke und Stempel). Gleiche Angaben wie vorher, nichts Neues.
   ===================================================================================================================== */
.schluss--karte{padding-top:clamp(110px,13vw,210px);padding-bottom:clamp(90px,10vw,160px)}
.pkarte{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);max-width:1140px;margin:0 auto;text-align:left;color:var(--tinte);border-radius:8px;
  background:linear-gradient(180deg,#fefaf0,#f3e9d4);box-shadow:inset 0 0 0 1px rgba(110,88,44,.2),inset 0 1px 0 #fff,0 5px 0 #a39370,0 30px 40px -18px rgba(0,0,0,.8),0 70px 90px -40px rgba(0,0,0,.95)}
.pkarte::before{content:'';position:absolute;inset:10px;border:1px solid rgba(110,88,44,.34);border-radius:5px;pointer-events:none}
.pkarte__l{padding:clamp(40px,5vw,78px) clamp(26px,3.4vw,54px) clamp(40px,5vw,74px) clamp(38px,4.8vw,74px);display:flex;flex-direction:column;justify-content:center}
.schluss--karte .pkarte .d2{font-size:clamp(2.1rem,3.7vw,3.9rem);line-height:1.06;color:var(--tinte)}
.schluss--karte .pkarte .d2 em{color:var(--taupe)}
.schluss--karte .pkarte .d2 .z>span{text-shadow:none}
.schluss--karte .pkarte .lauf{margin:clamp(16px,1.8vw,26px) 0 0;max-width:30ch;color:rgba(12,21,38,.8);text-shadow:none;font-family:var(--serif);font-size:clamp(1.12rem,1.45vw,1.5rem);line-height:1.4}
.schluss--karte .pkarte .kn-reihe{justify-content:flex-start;margin-top:clamp(24px,2.8vw,40px)}
.pkarte__r{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,60px) clamp(38px,4.8vw,74px) clamp(40px,5vw,74px) clamp(26px,3.4vw,54px)}
.pkarte__r::before{content:'';position:absolute;left:0;top:clamp(34px,4vw,56px);bottom:clamp(34px,4vw,56px);width:1px;background:rgba(110,88,44,.38)}
/* oben rechts das Zeichen des Hauses in Gold, darunter «Seit 1898» zwischen zwei feinen Linien: Briefpapier eines Hauses, keine Marke, kein Stempel
   (Robert 16:54 zur ersten Fassung mit Briefmarke und Poststempel: «Idee cool, aber noch zu verspielt, das ist nicht Luxushotel») */
.pkarte::after{content:'';position:absolute;inset:14px;border:1px solid rgba(110,88,44,.16);border-radius:4px;pointer-events:none}
.pkarte__mono{display:grid;justify-items:center;gap:clamp(12px,1.3vw,18px);color:#a98b4b}
.pkarte__ce{width:clamp(74px,7vw,104px);height:auto;fill:currentColor}
.pkarte__mono span{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
.pkarte__mono span i{width:clamp(28px,3.4vw,54px);height:1px;background:rgba(110,88,44,.5)}
.pkarte__zeilen{margin:clamp(30px,3.6vw,56px) 0 0;display:grid;border-top:1px solid rgba(110,88,44,.42)}
.pkarte__zeilen div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:clamp(13px,1.3vw,18px) 2px clamp(11px,1.1vw,15px);border-bottom:1px solid rgba(110,88,44,.42)}
.pkarte__zeilen dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.pkarte__zeilen dd{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.8rem);line-height:1.1;white-space:nowrap}
@media (max-width:860px){
  .pkarte{grid-template-columns:minmax(0,1fr);border-radius:12px}
  .pkarte__l{padding:34px 26px 30px}.pkarte__r{padding:26px 26px 34px}
  .pkarte__r::before{left:26px;right:26px;top:0;bottom:auto;width:auto;height:1px}
  .pkarte__zeilen{margin-top:26px}.pkarte__zeilen div{flex-direction:column;align-items:flex-start;gap:5px}.pkarte__zeilen dd{white-space:normal}
  .schluss--karte .pkarte .kn-reihe{justify-content:center}
}
/* Dritte Fassung (Robert 17:25: «ein bisschen mehr als Eintrittskarte, ein bisschen grösser und mit so einer handgezeichneten Karte, die zum Stil des Hotels passt»),
   17:47 nochmals: «die ganze Karte noch grösser, beide Knöpfe unten mittig, die Karte grösser». Eintrittskarte mit Abriss rechts (echte Kerben an der Naht, gestrichelte Linie),
   links Gruss, daneben gross der Lageplan in Sepia, die zwei Knöpfe unten mittig. Der Plan ist kein erzeugtes Bild: karte_hand.py rechnet ihn aus den OpenStreetMap-Daten des Hauses,
   _qa/karte_raster.js legt ihn als fertiges Bild ab (karte-hand.webp; das SVG mit seinen Filtern war beim Hereinscrollen zu teuer). Die Worte liegen als Text darüber. */
.schluss--karte>.in{max-width:none}
.pkarte--billett{--k:16px;grid-template-columns:minmax(0,1fr) clamp(250px,24vw,350px);max-width:1640px;margin-inline:auto;width:calc(100% + 2*clamp(0px,3.4vw,56px));margin-left:calc(-1*clamp(0px,3.4vw,56px));background:none;box-shadow:none;border-radius:0;isolation:isolate}
@media (min-width:1900px){.pkarte--billett{width:auto;margin-inline:auto}}
.pkarte--billett::before{inset:0;z-index:-1;border:0;border-radius:12px;box-shadow:0 30px 44px -22px rgba(0,0,0,.75),0 70px 90px -44px rgba(0,0,0,.95)}
.pkarte--billett::after{content:none}
.pkarte__haupt,.pkarte__abriss{position:relative;background:linear-gradient(180deg,#fefaf0,#f3e9d4)}
.pkarte__haupt{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;border-radius:12px 0 0 12px;padding-bottom:clamp(40px,4.4vw,66px);
  -webkit-mask:radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.pkarte__abriss{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,60px) clamp(26px,2.8vw,44px);border-radius:0 12px 12px 0;
  -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000);mask-composite:intersect}
.pkarte__haupt::before,.pkarte__abriss::before{content:'';position:absolute;inset:10px;border:1px solid rgba(110,88,44,.32);pointer-events:none}
.pkarte__haupt::before{right:0;border-right:0;border-radius:5px 0 0 5px}
.pkarte__abriss::before{left:0;border-left:0;border-radius:0 5px 5px 0}
.pkarte__abriss::after{content:'';position:absolute;left:-1px;top:calc(var(--k) + 8px);bottom:calc(var(--k) + 8px);border-left:2px dashed rgba(110,88,44,.5)}
.pkarte--billett .pkarte__l{padding:clamp(48px,5.6vw,90px) 0 clamp(10px,1.4vw,22px) clamp(40px,4.8vw,78px)}
.schluss--karte .pkarte--billett .d2{font-size:clamp(1.9rem,2.9vw,3.2rem)}
@media (min-width:1001px){.schluss--karte .pkarte--billett .d2 .z>span{white-space:nowrap}}
/* Knöpfe der Eintrittskarte: «Zimmer buchen» dunkelblau, «Kontakt & Anreise» hell (Robert 17:51) */
.pkarte__kn .kn{--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);--ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte)}
.pkarte__kn .kn--linie{--o:#fffdf7;--m:#f6eedd;--u:#e0d2b6;--t:var(--tinte);--licht:#fff;--kante:rgba(110,88,44,.28);--tief:rgba(74,58,26,.42);--ko:#1e3c72;--ku:#050f22;--kt:var(--weiss)}
.schluss--karte .pkarte--billett .pkarte__kn{grid-column:1/-1;justify-content:center;margin-top:clamp(6px,1vw,16px);position:relative;z-index:1}
.pkarte--billett .pkarte__zeilen div{flex-direction:column;align-items:flex-start;gap:6px}
.pkarte--billett .pkarte__zeilen dd{font-size:clamp(1.2rem,1.55vw,1.65rem)}
.pkarte--billett .pkarte__ce{width:clamp(70px,6.2vw,94px)}
/* der Lageplan: gross, läuft an den Rändern ins Papier aus, Worte in der Schrift des Hauses */
.pkarte__plan{position:relative;margin:clamp(20px,2.2vw,34px) clamp(14px,1.6vw,26px) 0 0}
.pkarte__bild{position:relative;-webkit-mask-image:radial-gradient(ellipse 62% 64% at 51% 50%,#000 54%,transparent 88%);mask-image:radial-gradient(ellipse 62% 64% at 51% 50%,#000 54%,transparent 88%)}
.pkarte__bild img{display:block;width:100%;height:auto}
/* Beschriftung des Plans (Robert 17:54: «sieht immer noch nicht gut beschriftet aus»): Gewässer kursiv in Blau, Strasse und Berg kursiv in Sepia, der Bahnhof frei unterhalb
   der Gleise mit feinem Strich, das Haus als kleines Schild über seinem Punkt. Nichts steht mehr auf einer Linie. */
.pkw{position:absolute;transform:translate(-50%,-50%) rotate(var(--d,0deg));font-family:var(--serif);font-style:italic;font-size:clamp(.9rem,1.25vw,1.3rem);line-height:1;letter-spacing:.04em;color:#4f6a7e;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 2px #f8f1e0,0 0 2px #f8f1e0,0 0 5px #f8f1e0,0 0 5px #f8f1e0,0 0 8px #f8f1e0}
.pkw--s{color:#6b5730;font-size:clamp(.8rem,1.05vw,1.1rem)}
.pkw--berg{color:#6b5730;letter-spacing:.3em;font-size:clamp(.86rem,1.15vw,1.2rem)}
.pkw--ort{transform:translate(0,-10%);font-style:normal;font-family:var(--mono);font-size:clamp(9px,.76vw,11px);letter-spacing:.14em;text-transform:uppercase;color:#6b5730}
.pkw--haus{transform:translate(-50%,22px);padding:7px 14px 8px;border:1px solid rgba(169,138,69,.85);border-radius:4px;background:#fdf8ea;box-shadow:0 0 0 3px #fdf8ea,0 0 0 4px rgba(169,138,69,.4),0 10px 14px -8px rgba(40,30,10,.55);
  font-style:normal;font-size:clamp(.95rem,1.25vw,1.3rem);letter-spacing:.01em;color:var(--navy);text-shadow:none}
.pkw--haus::after{content:'';position:absolute;left:50%;bottom:calc(100% + 4px);width:1px;height:10px;background:rgba(169,138,69,.95)}
.pkarte__quelle{position:absolute;right:clamp(10px,1.2vw,18px);bottom:0;margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:rgba(107,87,48,.8)}
.pkarte__quelle a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:1000px){
  .pkarte--billett{grid-template-columns:minmax(0,1fr);width:auto;margin-left:0}
  .pkarte__haupt{grid-template-columns:minmax(0,1fr);border-radius:12px 12px 0 0;padding-bottom:34px;
    -webkit-mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
  .pkarte__abriss{border-radius:0 0 12px 12px;padding:30px 26px 34px;
    -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);-webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);mask-composite:intersect}
  .pkarte__haupt::before{right:10px;bottom:0;border-right:1px solid rgba(110,88,44,.32);border-bottom:0;border-radius:5px 5px 0 0}
  .pkarte__abriss::before{left:10px;top:0;border-left:1px solid rgba(110,88,44,.32);border-top:0;border-radius:0 0 5px 5px}
  .pkarte__abriss::after{left:calc(var(--k) + 8px);right:calc(var(--k) + 8px);top:-1px;bottom:auto;border-left:0;border-top:2px dashed rgba(110,88,44,.5)}
  .pkarte--billett .pkarte__l{padding:36px 28px 6px}
  .pkarte__plan{margin:6px 14px 0}.pkarte__quelle{position:static;text-align:right;padding:4px 6px 0}
  .schluss--karte .pkarte--billett .pkarte__kn{margin-top:18px}
}
/* der Auftritt der Eintrittskarte: langer Weg von unten (Robert 17:47: «ploppt aus dem Nichts auf, soll von unten luxuriös reingeschwebt kommen») */
html:not(#a):not(#b) .pkarte--billett[data-r],html:not(#a):not(#b) .pkarte--billett[data-r].da{--ce-weg:clamp(150px,17vw,260px)}
@supports (animation-timeline:view()){html:not(#a):not(#b) .pkarte--billett[data-r],html:not(#a):not(#b) .pkarte--billett[data-r].da,html:not(#a):not(#b) .pkarte--billett[data-r].da.ce-fertig{animation-range:cover 0% cover 72vh,normal}}

/* Foto-Fenster der Zimmer («Alle Fotos», Robert 17:26: «nur die Fotos, keine Zimmerbeschreibung; ein grosses Bild, unten nebeneinander kleine Miniaturen,
   Pfeile; von da raus oder direkt ins Zimmer», 17:48: «die Bezeichnung mittig über das Bild, grösser, und mittig unten den Knopf zum Zimmer»):
   oben mittig gross der Name des Zimmers, darunter das Foto ungeschnitten, die Miniaturen mittig, ganz unten mittig der Knopf. Beschreibung und «Verfügbarkeit prüfen» stehen hier nicht. */
dialog.zb{width:min(1240px,calc((100dvh - 318px)*1.5 + 36px),calc(100% - 28px))}
.zb__in{grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
.zb__t{display:contents}
.zb__t .d3{order:-1;text-align:center;font-size:clamp(1.7rem,2.8vw,2.9rem);line-height:1.08;padding:clamp(10px,1.2vw,18px) 60px clamp(14px,1.5vw,22px)}
.zb__t .kapitel,.zb__t .lauf{display:none}
.zb__daumen{justify-content:safe center;margin-top:12px}
.zb__t .kn-reihe{order:3;justify-content:center;margin-top:clamp(14px,1.4vw,20px);padding-bottom:8px}
.zb__t .kn-reihe:has(a.kn) button.kn{display:none}
@media (max-width:860px){dialog.zb{width:calc(100% - 20px)}.zb__t .d3{padding:14px 54px 12px}}

/* Fuss: beschneiden wie bisher, aber ohne dass der Browser ihn für eine eigene Scroll-Fläche hält (sonst hingen die vier Haus-Karten nicht am Scrollen der Seite) */
@supports (overflow:clip){html:not(#a) .fuss,html:not(#a) .schluss{overflow:clip}}

/* Bühne mit Reitern (Sommer, Winter): beide Texte liegen übereinander im selben Feld, der Kasten ist immer so hoch wie der längere.
   So springt die Leiste mit den zwei Tasten beim Wechsel nicht mehr (Robert 16:56). */
.pakete .wechsel{display:grid}
.pakete .wechsel>[data-feld]{grid-area:1/1;min-width:0}
.pakete .wechsel>[data-feld][hidden]{display:block;position:relative;inset:auto;visibility:hidden;opacity:0;pointer-events:none}   /* main.css nimmt das verborgene Feld sonst aus dem Fluss (position:absolute), dann zählt seine Höhe nicht */
/* Aarmühle auf der Zimmer-Seite: Sommer hell, Winter blau, dahinter leicht die Tapete (Robert 17:56). Zwei Tapeten liegen übereinander und blenden über; der Abschnitt selbst trägt nur die Farbe. */
.sb-jahr{position:relative;isolation:isolate;transition:background-color .9s ease,color .6s ease}
.sb-jahr::before,.sb-jahr::after{content:'';position:absolute;inset:0;z-index:-1;background:50% 0/1100px auto;pointer-events:none;transition:opacity .9s ease}
.sb-jahr::before{background-image:url(../img/tapete-creme.webp?v=23425e99);opacity:.55}
.sb-jahr::after{background-image:url(../img/tapete-navy.webp?v=ba8679c1);opacity:0}
.sb-jahr--winter::before{opacity:0}.sb-jahr--winter::after{opacity:.5}
.fl--creme .sb-mehr,.fl--papier .sb-mehr{color:var(--tinte)}.fl--creme .sb-mehr .pfeil:hover,.fl--papier .sb-mehr .pfeil:hover{color:var(--taupe)}
.fl--creme .sb-mehr>i,.fl--papier .sb-mehr>i{background:rgba(110,88,44,.5)}

/* Streifen vor dem Fuss («Unsere Rezeption berät Sie gerne …»), auf allen Seiten. Weg dahin: 16:57 «luxuriöser», 17:02 «ein Schild, schmaler, viel zu gross», 17:25 «runde Ecken,
   Zimmernummer-Schild», 17:50 «ein bisschen breiter, mehr im Ticket-Stil», «beige und nicht blau, Farbwelt umgekehrt». Jetzt: ein helles Billett auf dem dunklen Grund,
   links der Satz mit Linie und Raute, rechts hinter Kerben und gestrichelter Linie der Abriss mit den zwei Knöpfen (der erste dunkelblau, der zweite hell). Zwei Flächen mit
   ausgeschnittenen Viertelkreisen an der Naht (wie die Billette der Zimmerseiten), keine Schattenfläche unter den Kerben. */
.ausklang{padding-top:clamp(40px,4.4vw,66px);padding-bottom:clamp(44px,4.8vw,72px)}
.ausklang .in{--k:13px;--gl:rgba(110,88,44,.34);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;align-items:stretch;max-width:min(1080px,100%);margin-inline:auto;padding:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
.ausklang .in::before{content:'';position:absolute;inset:0;z-index:-1;border:0;border-radius:16px;box-shadow:0 26px 40px -20px rgba(0,0,0,.85),0 60px 70px -40px rgba(0,0,0,.9);pointer-events:none}
.ausklang .in>p,.ausklang .in>.kn-reihe{position:relative;margin:0;background:linear-gradient(180deg,#fefaf0,#f1e6cf);color:var(--tinte)}
.ausklang .in>p{display:grid;align-content:center;justify-items:center;max-width:none;padding:clamp(30px,3.4vw,50px) clamp(28px,4vw,64px) clamp(32px,3.6vw,52px);border-radius:16px 0 0 16px;text-align:center;
  font-size:clamp(1.25rem,1.9vw,2rem);line-height:1.2;text-wrap:balance;color:var(--tinte);
  -webkit-mask:radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.ausklang .in>p::before{content:'';position:static;display:block;transform:none;width:min(240px,70%);height:11px;margin:0 0 clamp(16px,1.8vw,24px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 .9 10.1 5.5 5.5 10.1 .9 5.5z' fill='none' stroke='%238a7545'/%3E%3C/svg%3E") 50% 50%/11px 11px no-repeat,
    linear-gradient(90deg,transparent,rgba(110,88,44,.7) 24%,rgba(110,88,44,.7) calc(50% - 15px),transparent calc(50% - 15px),transparent calc(50% + 15px),rgba(110,88,44,.7) calc(50% + 15px),rgba(110,88,44,.7) 76%,transparent) 50% 50%/100% 1px no-repeat}
.ausklang .in>p::after{content:'';position:absolute;left:8px;top:8px;bottom:8px;right:0;width:auto;height:auto;margin:0;transform:none;box-shadow:none;border:1px solid var(--gl);border-right:0;border-radius:9px 0 0 9px;pointer-events:none}
.ausklang .in>.kn-reihe{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:12px;padding:clamp(26px,3vw,44px) clamp(24px,2.8vw,40px);border-radius:0 16px 16px 0;
  -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000);mask-composite:intersect}
.ausklang .in>.kn-reihe::before{content:'';position:absolute;right:8px;top:8px;bottom:8px;left:0;border:1px solid var(--gl);border-left:0;border-radius:0 9px 9px 0;pointer-events:none}
.ausklang .in>.kn-reihe::after{content:'';position:absolute;left:-1px;top:calc(var(--k) + 7px);bottom:calc(var(--k) + 7px);border-left:2px dashed rgba(110,88,44,.5);pointer-events:none}
.ausklang .kn{justify-content:space-between;transform:none;--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);--ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte)}
.ausklang .kn--linie{--o:#fffdf7;--m:#f6eedd;--u:#e0d2b6;--t:var(--tinte);--licht:#fff;--kante:rgba(110,88,44,.28);--tief:rgba(74,58,26,.42);--ko:#1e3c72;--ku:#050f22;--kt:var(--weiss)}
@media (max-width:760px){
  .ausklang .in{grid-template-columns:minmax(0,1fr)}
  .ausklang .in>p{border-radius:16px 16px 0 0;padding:28px 24px 26px;
    -webkit-mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
  .ausklang .in>p::after{right:8px;bottom:0;border-right:1px solid var(--gl);border-bottom:0;border-radius:9px 9px 0 0}
  .ausklang .in>.kn-reihe{border-radius:0 0 16px 16px;padding:24px 24px 28px;
    -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);-webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);mask-composite:intersect}
  .ausklang .in>.kn-reihe::before{left:8px;top:0;border-left:1px solid var(--gl);border-top:0;border-radius:0 0 9px 9px}
  .ausklang .in>.kn-reihe::after{left:calc(var(--k) + 7px);right:calc(var(--k) + 7px);top:-1px;bottom:auto;border-left:0;border-top:2px dashed rgba(110,88,44,.5)}
}
/* Bänder zum Blättern: der Schatten unter den Kacheln läuft weich aus statt an der Unterkante des Bands abzubrechen (Robert 17:50: «zu abgehackt»). Das Band bekommt unten Raum und holt ihn mit negativem Abstand zurück. */
.band{padding-bottom:74px;margin-bottom:-48px}
.gang .laufbalken{position:relative;z-index:2}
/* Zimmerseiten: die zwei Knöpfe im Auftakt mittig in ihrer Spalte (Robert 17:04) */
.zst__t .kn-reihe{justify-content:center}

/* =====================================================================================================================
   BILDER ALS KACHELN MIT TIEFE (Robert 13.10.2026, 16:25: «die Bilder sollen alle so einen 3D-Kachel-Effekt bekommen mit abgerundeten Ecken», 16:26: «das grosse Bild auch»).
   Die schmale Rahmenleiste um die Fotos fällt weg: das Foto ist die Kachel, runde Ecken, Schatten; auf dunklem Grund helle Kante oben und dunkle Lippe unten.
   Zurück = Block löschen.
   ===================================================================================================================== */
.fl .rahmen{position:relative;padding:0;background:none;border-radius:clamp(18px,2vw,28px);box-shadow:0 0 0 1px rgba(138,117,69,.26),0 34px 42px -28px rgba(40,30,10,.62)}
.fl .rahmen>.rahmen__k{border-radius:inherit}
.fl .rahmen--m{border-radius:clamp(14px,1.5vw,20px)}
.fl--nacht .rahmen,.fl--navy .rahmen,.fl--nacht .zmos__b,.fl--navy .zmos__b{box-shadow:0 4px 0 #030b1c,0 22px 30px -12px rgba(0,0,0,.8),0 54px 64px -34px rgba(0,0,0,.95)}
.fl--nacht .rahmen::after,.fl--navy .rahmen::after{content:'';position:absolute;z-index:3;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(236,214,157,.2)}

/* Gefüge mit vier Fotos: ein grosses links über die ganze Höhe, rechts drei gleich grosse Querformate untereinander
   (Robert 16:32 zur ersten Fassung mit zwei schmalen Hochformaten: «scheisse mit der Einordnung der Bilder») */
.zmos--4{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));aspect-ratio:1.42/1}
.zmos--4>.zmos__b:first-child{grid-row:1/4}
@media (max-width:860px){.zmos--4{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;aspect-ratio:auto}.zmos--4>.zmos__b:first-child{grid-row:auto;grid-column:1/-1}.zmos--4>.zmos__b:nth-child(n+2){grid-column:auto;aspect-ratio:1/1;border-radius:14px}}

/* «Oberländer Wellnessdörfli»: Abschnitt grösser, vier Fotos, Text in der Höhe mittig, Knopf mittig in seiner Spalte («Abschnitt noch grösser, noch ein Bild, Knopf mittig») */
@media (min-width:861px){
  #wellness .zwei--um>.t{grid-column:8/-1;align-self:center}#wellness .zwei--um>.b{grid-column:1/8}
  #wellness .zwei--buendig>.b>.zmos{min-height:clamp(430px,43vw,660px)}
}
#wellness .koord{justify-content:center}

/* Zimmer-Seite: zwei Textlinks unter den zwei Knöpfen der Suite (vorher vier Knöpfe in einer Reihe) */
.sb-mehr{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px clamp(18px,2.4vw,36px);margin-top:clamp(18px,2vw,28px);color:rgba(255,255,255,.86)}
.sb-mehr>i{width:1px;height:18px;background:rgba(220,198,143,.5)}
.sb-mehr .pfeil{color:inherit;background:none;border:0;cursor:pointer}
.sb-mehr .pfeil:hover{color:var(--gold)}
@media (max-width:520px){.sb-mehr>i{display:none}}
/* Zimmer-Seite, «Für Sie als Direktbucher»: die drei Zeiten als Billett, unter dem Foto */
.sb-direkt{align-self:end;min-width:0}
@media (max-width:560px){.sb-direkt .zs-tafel__drei{grid-template-columns:minmax(0,1fr)}.sb-direkt .zs-tafel__drei div{padding:14px 6px;border-left:0;border-top:1px solid rgba(220,198,143,.3)}
  .sb-direkt .zs-tafel__drei div:first-child{border-top:0;padding-top:2px}.sb-direkt .zs-tafel__drei div:last-child{padding-bottom:2px}.sb-direkt .zs-tafel__drei dd{margin-top:6px;font-size:1.3rem}.sb-direkt .zs-tafel__drei dd br{display:none}.sb-direkt .zs-tafel__drei dt{font-size:10.5px;letter-spacing:.14em}}
@media (min-width:861px){.ort__unten>.sb-direkt{margin-top:calc(clamp(70px,10vw,150px) + clamp(18px,2vw,30px))}}
/* Zimmer-Seite, Serviced Apartments: ein eigener Abschnitt mit vier Fotos statt der dunklen Karte */
.sb-apt .kapitel{color:var(--taupe)}
.sb-apt .koord{justify-content:start}
@media (min-width:961px){.sb-apt.zwei--bild>.b{grid-column:1/8}.sb-apt.zwei--bild>.t{grid-column:8/-1}.sb-apt>.b>.zmos{aspect-ratio:1.42/1}}

/* Mosaik für lange Fotostrecken (Suite-Seite, «Alle Fotos»): drei Spalten, hohe und breite Kacheln, Namen in der Einkerbung. Vorbild im Aufbau: Karte bei Salt & Silver;
   Kachel des Carlton (ohne Rahmenleiste, runde Ecken, Schatten). Die Gruppe kommt als Ganzes, jedes Foto dabei aus der Vergrösserung. */
.zmosaik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--zr,3),minmax(0,1fr));grid-auto-flow:dense;gap:clamp(12px,1.4vw,22px);aspect-ratio:9/calc(var(--zr,3)*2)}
.zmk{position:relative;margin:0;min-width:0;min-height:0;border-radius:clamp(18px,1.9vw,28px);background:var(--creme);box-shadow:0 0 0 1px rgba(138,117,69,.28),0 34px 40px -28px rgba(40,30,10,.62)}
.zmk--hoch{grid-row:span 2}
.zmk__k{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;transform:translateZ(0)}
.zmk__k img{width:100%;height:100%;object-fit:cover}
.zmosaik:not(.da) .zmk__k img{transform:scale(1.14)}
.zmosaik.da .zmk__k img{transition:transform 2.8s var(--e1);transition-delay:calc(var(--i,0)*120ms)}
.zmk .kerbe{font-size:clamp(1rem,1.3vw,1.4rem);line-height:1.15;padding:clamp(8px,.85vw,12px) clamp(16px,1.7vw,24px) clamp(7px,.75vw,10px) clamp(12px,1.3vw,18px)}
@media (max-width:860px){
  .zmosaik{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto;gap:8px}
  .zmk,.zmk--hoch{grid-row:auto;aspect-ratio:4/3;border-radius:16px}
  .zmosaik--ungerade>.zmk:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .zmk .kerbe{font-size:.9rem;padding:6px 12px 5px 9px;white-space:normal;max-width:86%}
}
@media (prefers-reduced-motion:reduce){.zmosaik .zmk__k img{transform:none!important;transition:none!important}}
.ce-ruhig .zmosaik .zmk__k img{transform:none;transition:none}

/* Karten «Im Sommer», «Im Winter» und ihre Geschwister (.sb-jz), Robert 17:35: «viel luxuriöser, viel edler, 3D, runde Ecken, das ganze Programm».
   Erhabene Platte: runde Ecken, Licht von oben, dunkle Lippe unten, Goldkante, innen eine zweite Goldlinie; unter dem Titel eine Linie mit Raute. */
.sb-jz,.fl--papier .sb-jz,.fl--creme .sb-jz{position:relative;display:flex;flex-direction:column;padding:clamp(34px,3.8vw,58px) clamp(30px,3.6vw,56px) clamp(34px,3.8vw,56px);border-radius:clamp(24px,2.6vw,36px);color:#fff;
  background:linear-gradient(180deg,#1d427c,#102d5a 46%,#0a2046);
  box-shadow:inset 0 0 0 1px rgba(236,214,157,.6),inset 0 2px 0 rgba(255,255,255,.24),inset 0 -3px 0 rgba(0,0,0,.34),0 5px 0 #030b1c,0 26px 34px -14px rgba(0,0,0,.8),0 60px 70px -36px rgba(0,0,0,.95)}
.fl--papier .sb-jz,.fl--creme .sb-jz{box-shadow:inset 0 0 0 1px rgba(236,214,157,.6),inset 0 2px 0 rgba(255,255,255,.24),inset 0 -3px 0 rgba(0,0,0,.34),0 5px 0 #061632,0 26px 34px -16px rgba(40,30,10,.55),0 56px 60px -36px rgba(40,30,10,.7)}
.sb-jz::before{content:'';position:absolute;inset:10px;border:1px solid rgba(236,214,157,.26);border-radius:clamp(15px,1.8vw,26px);pointer-events:none}
.sb-jz .d3{position:relative;padding-bottom:clamp(20px,2.2vw,30px);font-size:clamp(1.9rem,2.8vw,2.9rem);line-height:1.08}
.sb-jz .d3::before{content:'';position:absolute;left:0;bottom:5px;width:min(190px,60%);height:1px;background:linear-gradient(90deg,rgba(236,214,157,.85),rgba(236,214,157,.85) calc(100% - 26px),transparent calc(100% - 26px))}
.sb-jz .d3::after{content:'';position:absolute;left:calc(min(190px,60%) - 13px);bottom:1px;width:9px;height:9px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px var(--gold)}
.sb-jz .gross{margin-top:clamp(18px,2vw,28px)}
.sb-jz .lauf{margin-top:clamp(14px,1.5vw,20px);color:rgba(255,255,255,.82)}
.sb-jz .kn-reihe{margin-top:auto;padding-top:22px}
@media (max-width:860px){.sb-jz,.fl--papier .sb-jz,.fl--creme .sb-jz{padding:28px 24px 30px;border-radius:22px}.sb-jz::before{inset:8px;border-radius:15px}}

/* Trennlinie mit dem CE zwischen zwei Abschnitten: sie sitzt in der Mitte zwischen dem Ende des einen und der Überschrift des nächsten (Robert 17:58: «mittiger auf der Höhe»).
   Vorher war der Abstand darunter fast doppelt so gross wie darüber. */
.uebergang+.fl{padding-top:clamp(46px,5.2vw,82px)}
.uebergang+.fl.fl--eng{padding-top:clamp(44px,5vw,78px)}
#fragen{padding-top:clamp(70px,7.6vw,118px)}

/* Suite-Seite, «Im Sommer» und «Im Winter» als Billette mit Foto (Robert 18:03: «mach da so Tickets draus und Bilder aus dem Haus dazu, je eins, das die Atmosphäre widerspiegelt»):
   oben das Foto, an der Naht echte Kerben und die gestrichelte Linie, darunter der Text auf Dunkelblau mit Goldlinie. Zwei Flächen mit ausgeschnittenen Viertelkreisen. */
.sb-tk{--k:15px;--gl:rgba(236,214,157,.62);position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-width:0;color:#fff;isolation:isolate}
.sb-tk::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:24px;box-shadow:0 30px 40px -18px rgba(0,0,0,.85),0 64px 70px -40px rgba(0,0,0,.95);pointer-events:none}
.sb-tk__b{position:relative;aspect-ratio:16/9.2;border-radius:24px 24px 0 0;overflow:hidden;background:#0b1f40;
  -webkit-mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.sb-tk__b img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sb-tk__b::after{content:'';position:absolute;inset:0;border:1px solid var(--gl);border-bottom:0;border-radius:24px 24px 0 0;pointer-events:none}
.sb-tk:not(.da) .sb-tk__b img{transform:scale(1.14)}
.sb-tk.da .sb-tk__b img{transition:transform 2.8s var(--e1)}
.sb-tk__t{position:relative;padding:clamp(30px,3.4vw,50px) clamp(28px,3.4vw,54px) clamp(32px,3.6vw,54px);border-radius:0 0 24px 24px;border:1px solid var(--gl);border-top:0;
  background:linear-gradient(180deg,#1d427c,#102d5a 46%,#0a2046);
  -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000);mask-composite:intersect}
.sb-tk__t::before{content:'';position:absolute;left:9px;right:9px;bottom:9px;top:0;border:1px solid rgba(236,214,157,.26);border-top:0;border-radius:0 0 16px 16px;pointer-events:none}
.sb-tk__t::after{content:'';position:absolute;left:calc(var(--k) + 9px);right:calc(var(--k) + 9px);top:-1px;border-top:2px dashed rgba(236,214,157,.6);pointer-events:none}
.sb-tk .d3{position:relative;padding-bottom:clamp(18px,2vw,28px);font-size:clamp(1.8rem,2.6vw,2.7rem);line-height:1.08}
.sb-tk .d3::before{content:'';position:absolute;left:0;bottom:5px;width:min(190px,60%);height:1px;background:linear-gradient(90deg,rgba(236,214,157,.85),rgba(236,214,157,.85) calc(100% - 26px),transparent calc(100% - 26px))}
.sb-tk .d3::after{content:'';position:absolute;left:calc(min(190px,60%) - 13px);bottom:1px;width:9px;height:9px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px var(--gold)}
.sb-tk .gross{margin-top:clamp(16px,1.8vw,26px);color:#fff;font-size:clamp(1.2rem,1.6vw,1.65rem)}
.sb-tk .lauf{margin-top:clamp(12px,1.4vw,18px);color:rgba(255,255,255,.82)}
@media (max-width:860px){.sb-tk__b{aspect-ratio:3/2}.sb-tk__t{padding:26px 24px 30px}}
@media (prefers-reduced-motion:reduce){.sb-tk .sb-tk__b img{transform:none!important;transition:none!important}}
.ce-ruhig .sb-tk .sb-tk__b img{transform:none;transition:none}

/* Apartments, «auf Wunsch»: die vier Karten als Eintrittskarten alter Art (Robert 18:20: «mehr wie Tickets», «darunter haben wir schon das längliche, das muss vom Stil her
   eine ganz andere Art von Ticket sein», 18:23: «die ganze Kachel, nicht nur den unteren Abschnittsbereich»). Die ganze Kachel ist ein dunkelblaues Billett im Hochformat:
   alle vier Ecken nach innen gerundet, feine Goldlinie rundum, das Foto eingelassen, unten hinter Kerben und gestrichelter Linie der Abriss mit dem CE.
   Zwei Flächen mit ausgeschnittenen Kreisstücken (Maske); bei Maus hebt sich nichts. Das lange helle Billett darunter hat runde Ecken und den Abriss rechts. */
.dienst.dienst--tk{--R:16px;--k:12px;--gl:rgba(236,214,157,.55);position:relative;padding:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;color:#fff}
/* Schatten nur unter der Mitte der Unterkante (Robert 14.10.2026 01:55: «die Ecken von dem, was da drunter liegt, sind zu sehen, das scheint weiss»): vorher lag ein Kasten mit Schatten
   unter dem ganzen Billett, durch die Kerben sah man seine helle Mitte und seinen Rand. Jetzt bleibt hinter jeder Kerbe der reine Grund. */
.dienst--tk::before{content:'';position:absolute;left:13%;right:13%;bottom:8px;height:40px;z-index:-1;box-shadow:0 14px 20px -4px rgba(40,30,10,.62),0 34px 38px -14px rgba(40,30,10,.42);pointer-events:none}
.dienst--tk .dienst__o{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 16px 0;background:linear-gradient(180deg,#1d427c,#12305e 60%,#0f2a55);
  -webkit-mask:radial-gradient(circle var(--R) at 0 0,transparent 97%,#000),radial-gradient(circle var(--R) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--R) at 0 0,transparent 97%,#000),radial-gradient(circle var(--R) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--k) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.dienst--tk .dienst__o::before{content:'';position:absolute;inset:7px 7px 0;border:1px solid var(--gl);border-bottom:0;pointer-events:none;
  -webkit-mask:radial-gradient(circle 12px at 0 0,transparent 97%,#000),radial-gradient(circle 12px at 100% 0,transparent 97%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 12px at 0 0,transparent 97%,#000),radial-gradient(circle 12px at 100% 0,transparent 97%,#000);mask-composite:intersect}
.dienst--tk .dienst__b{border-radius:6px;aspect-ratio:1/1.02;background:#0b1f40;box-shadow:0 0 0 1px rgba(236,214,157,.5)}
.dienst--tk h3{position:relative;margin:16px 8px 0;padding:6px 4px 17px;border-radius:0;background:none;box-shadow:none;color:#fbf3e2;font-size:clamp(1.15rem,1.55vw,1.62rem)}
.dienst--tk h3::before,.dienst--tk h3::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(236,214,157,.6)}
.dienst--tk h3::before{bottom:4px}.dienst--tk h3::after{bottom:0;background:rgba(236,214,157,.28)}
.dienst--tk p{padding:clamp(16px,1.6vw,22px) clamp(8px,1vw,14px) clamp(22px,2.2vw,30px);color:rgba(255,255,255,.84)}
.dienst--tk dl{position:relative;margin:0;padding:20px 78px 24px clamp(20px,2vw,28px);border-radius:0;box-shadow:none;background:linear-gradient(180deg,#0f2a55,#0a2046);
  -webkit-mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--R) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--R) at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--k) at 0 0,transparent 97%,#000),radial-gradient(circle var(--k) at 100% 0,transparent 97%,#000),radial-gradient(circle var(--R) at 0 100%,transparent 97%,#000),radial-gradient(circle var(--R) at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.dienst--tk dl{display:grid;align-content:center;min-height:118px}
.dienst--tk dl::before{content:'';position:absolute;left:calc(var(--k) + 8px);right:calc(var(--k) + 8px);top:-1px;border-top:2px dashed rgba(236,214,157,.7);pointer-events:none}
.dienst--tk dl::after{content:'';position:absolute;left:7px;right:7px;top:0;bottom:7px;border:1px solid var(--gl);border-top:0;pointer-events:none;
  -webkit-mask:radial-gradient(circle 12px at 0 100%,transparent 97%,#000),radial-gradient(circle 12px at 100% 100%,transparent 97%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 12px at 0 100%,transparent 97%,#000),radial-gradient(circle 12px at 100% 100%,transparent 97%,#000);mask-composite:intersect}
.dienst__ce{position:absolute;right:24px;bottom:25px;width:40px;height:auto;color:var(--gold);fill:currentColor;opacity:.9;pointer-events:none}
.dienst.dienst--tk.da:hover,.dienst.dienst--tk:hover{transform:none;box-shadow:none}
.dienst.dienst--tk:hover .dienst__b img{transform:none}

/* Apartments, Monatsleiste (Robert 18:22: «noch edler»): eine eingelassene Schiene mit Goldlinie, der gewählte Monat als helle, erhabene Taste (wie der Schalter Sommer/Winter) */
.stufe .jahr.tabs{gap:4px;padding:6px;margin:0 0 clamp(16px,2vw,30px);border:0;border-radius:999px;background:linear-gradient(180deg,#051128,#0b2148);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.65),inset 0 0 0 1px rgba(220,198,143,.42),0 1px 0 rgba(255,255,255,.1)}
.stufe .jahr.tabs .jahr__m{flex:1 1 0;min-width:0;height:48px;padding:0 2px;border-radius:999px;text-align:center;background:none;box-shadow:none;color:rgba(251,243,226,.8);font-family:var(--serif);font-size:clamp(.95rem,1.12vw,1.2rem);transition:color .3s}
.stufe .jahr.tabs .jahr__m::after{display:none}
@media (hover:hover){.stufe .jahr.tabs .jahr__m:hover{color:#fff}}
.stufe .jahr.tabs .jahr__m[aria-pressed="true"]{color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -2px 0 rgba(110,88,44,.38),0 8px 12px -6px rgba(0,0,0,.75)}
@media (max-width:560px){.stufe .jahr.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-radius:26px;row-gap:4px}.stufe .jahr.tabs .jahr__m{height:42px;padding:0;border-bottom:0;font-size:.95rem}}

/* Essen & Trinken und Hotelrestaurant, Band der Lieferanten (Robert 18:24: «der Schriftzug muss eleganter und edler aussehen»): kleiner, in gesperrten Versalien der Titelschrift,
   alle Namen gleich deutlich, dazwischen eine kleine Raute; oben und unten eine doppelte feine Linie */
.lieferband .laufband{padding:clamp(22px,2.4vw,34px) 0;border-block:1px solid rgba(138,117,69,.5);box-shadow:inset 0 4px 0 -3px rgba(138,117,69,.28),inset 0 -4px 0 -3px rgba(138,117,69,.28)}
.lieferband .laufband li,.lieferband .laufband li:nth-child(even){opacity:1;gap:clamp(26px,3vw,52px);padding-right:clamp(26px,3vw,52px);font-size:clamp(.95rem,1.28vw,1.4rem);letter-spacing:.22em;text-transform:uppercase;color:var(--tinte)}
.lieferband .laufband li:nth-child(even){color:var(--taupe)}
.lieferband .laufband li::after{width:8px;height:8px;background:none;box-shadow:inset 0 0 0 1px var(--taupe);transform:rotate(45deg);opacity:1}

/* Essen & Trinken, Weinkeller (Robert 18:24: «noch mehr in Szene setzen»): davor ein Fenster in den Keller, im Abschnitt vier Fotos als Gefüge (7 von 12 Spalten)
   und die drei Weine als Karte mit Punktlinien */
@media (min-width:961px){#weinkeller .wk>.t{grid-column:1/6}#weinkeller .wk>.b{grid-column:6/-1}#weinkeller .wk>.b>.zmos{aspect-ratio:1.24/1}}
.wk-karte{margin-top:clamp(24px,2.8vw,40px)}
.wk-karte .zst-karte__liste b{white-space:nowrap}

/* Karten aus staffel() (_teile.py): Bild, Name und Texte liegen seit 13.10.2026 in .st__o, der Preis folgt danach (vorher per order ans Ende gestellt) */
.st__o{flex:1;display:flex;flex-direction:column;min-width:0}

/* Seminarpauschalen seit 16.10.2026 wie die Hochzeitspackages (Robert: «mach das so wie da auf dem Screenshot», Billette mit gleich grossem Titel und Preis abgelehnt) */

/* Tagen & Feiern, Hochzeitspackages als randlose Kacheln mit Tiefe (Robert 18:29: «mit anderem luxuriösen, edlen 3D-Kachel-randlosen Effekt»): das Foto läuft bis an den Rand
   der Kachel, der Name sitzt in der Einkerbung der Bildecke, darunter der Text auf derselben hellen Fläche; Lippe unten und zwei Schatten. Bei Maus hebt sich nichts. */
:is(#hz,#pauschalen) .st{--f:#fbf5e6;--e:clamp(16px,1.6vw,24px);--kh:clamp(54px,4.8vw,72px);padding:0;border-radius:clamp(22px,2.4vw,34px);overflow:hidden;background:var(--f);
  box-shadow:0 0 0 1px rgba(138,117,69,.3),0 5px 0 #c9b88c,0 28px 34px -14px rgba(74,58,26,.55),0 64px 60px -40px rgba(74,58,26,.6)}
:is(#hz,#pauschalen) .st__b{border-radius:0}
:is(#hz,#pauschalen) .st__n{position:relative;z-index:2;align-self:flex-start;display:flex;align-items:center;height:var(--kh);margin:calc(-1*var(--kh)) 0 0;padding:6px clamp(24px,2.6vw,38px) 0 clamp(22px,2.4vw,34px);border-radius:0 var(--e) 0 0;
  background:var(--f);box-shadow:none;font-weight:400;font-size:clamp(1.6rem,2.4vw,2.6rem);line-height:1;white-space:nowrap}
:is(#hz,#pauschalen) .st__n::before,:is(#hz,#pauschalen) .st__n::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--f) var(--e))}
:is(#hz,#pauschalen) .st__n::before{left:0;bottom:100%}:is(#hz,#pauschalen) .st__n::after{left:100%;bottom:0}
:is(#hz,#pauschalen) .st__gross{margin:clamp(14px,1.6vw,22px) clamp(22px,2.4vw,34px) 0}
:is(#hz,#pauschalen) .st__lauf{margin-left:clamp(22px,2.4vw,34px);margin-right:clamp(22px,2.4vw,34px)}
:is(#hz,#pauschalen) .st__preis{order:0;margin:clamp(18px,2vw,28px) clamp(22px,2.4vw,34px) clamp(22px,2.4vw,32px);justify-content:flex-start;text-align:left;font-size:clamp(1.5rem,2vw,2.1rem)}
:is(#hz,#pauschalen) .st.da:hover,:is(#hz,#pauschalen) .st:hover{transform:none}
/* Robert 14.10.2026: Name grösser (fett hat er abgelehnt), der Satz darunter bleibt gross, tritt aber über die Farbe zurück (Taupe auf Hell), damit beide nicht gleich wirken */
:is(#hz,#pauschalen) .st{--kh:clamp(62px,5.4vw,80px)}
:is(#hz,#pauschalen) .st__n{font-weight:400;font-size:clamp(2.1rem,3.1vw,3.3rem)}
:is(#hz,#pauschalen) .st__gross{color:#7a6638}

/* Tagen & Feiern, Saal-Auswahl (Robert 18:27: «auch randlose 3D-Kacheln, den Effekt mit dem Austauschen», «die Angaben noch viel luxuriöser»,
   «der Balken oben ist zu dominant, so eingravieren in Beige»). Bühne und kleine Säle ohne helle Platte: das Foto ist die Kachel (runde Ecken, Lippe, Schatten),
   der Name steht frei darunter. Wählt der Gast einen Saal, fliegt dessen Foto auf die Bühne und das bisherige zurück an seinen Platz (seitenbau.js, nur transform). */
[data-saalwahl]{position:relative}
.sbuehne__b{margin:0;border-radius:clamp(20px,2.2vw,30px);box-shadow:0 0 0 1px rgba(138,117,69,.3),0 5px 0 #c9b88c,0 28px 34px -14px rgba(74,58,26,.55),0 64px 60px -40px rgba(74,58,26,.6)}
.sth,.sth[aria-pressed="true"]{padding:0;border-radius:0;background:none;box-shadow:none}
.sth:hover{transform:none}
.sth__b{border-radius:clamp(12px,1.2vw,18px);box-shadow:0 0 0 1px rgba(138,117,69,.28),0 3px 0 #cdbd96,0 16px 20px -10px rgba(74,58,26,.6);transform:translateZ(0)}
.sth[aria-pressed="true"] .sth__b{box-shadow:0 0 0 2px var(--taupe),0 0 0 6px rgba(138,117,69,.2),0 3px 0 #cdbd96,0 16px 20px -10px rgba(74,58,26,.6)}
.sth__n{margin-top:14px;transition:color .3s}
.sth[aria-pressed="true"] .sth__n{color:var(--taupe)}
.sb-flug{position:absolute;overflow:hidden;transform-origin:0 0;pointer-events:none;background:var(--creme);box-shadow:0 30px 36px -20px rgba(40,30,10,.6)}
/* Bestuhlung: sieben eingelassene Felder statt einer Tabelle mit Strichen */
.sitz{gap:8px;border:0}
.sitz div{padding:13px 8px 12px;border:0;border-radius:13px;text-align:center;background:#efe4ca;box-shadow:inset 0 2px 4px rgba(74,58,26,.26),inset 0 -1px 0 rgba(255,255,255,.92)}
.sitz dt{font-size:10px;letter-spacing:.12em}
.sitz dd{margin-top:7px;font-size:clamp(1.4rem,1.9vw,2rem)}
/* Regler: in das Papier eingelassen statt als dunkler Balken; der Knauf im Blau des Hauses */
.gregler__spur{background:linear-gradient(180deg,#eadfc6,#f2e8d3);box-shadow:inset 0 2px 5px rgba(74,58,26,.3),inset 0 -1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(138,117,69,.2)}
.gregler input[type=range]::-webkit-slider-runnable-track{height:10px;background:linear-gradient(90deg,#c9a95c,#dcc68f) 0 0/var(--p) 100% no-repeat,#d9cba9;box-shadow:inset 0 1px 3px rgba(74,58,26,.5),0 1px 0 rgba(255,255,255,.9)}
.gregler input[type=range]::-moz-range-track{height:10px;background:#d9cba9;box-shadow:inset 0 1px 3px rgba(74,58,26,.5)}
.gregler input[type=range]::-moz-range-progress{height:10px;background:linear-gradient(90deg,#c9a95c,#dcc68f)}
.gregler input[type=range]::-webkit-slider-thumb{margin-top:-16px;background:radial-gradient(circle at 36% 28%,#2c5293,#12305e 55%,#0a1c3b);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 0 rgba(0,0,0,.34),0 0 0 2px #f6eedd,0 0 0 3px rgba(138,117,69,.75),0 10px 14px -6px rgba(40,30,10,.7)}
.gregler input[type=range]::-moz-range-thumb{background:radial-gradient(circle at 36% 28%,#2c5293,#12305e 55%,#0a1c3b);box-shadow:0 0 0 2px #f6eedd,0 0 0 3px rgba(138,117,69,.75),0 10px 14px -6px rgba(40,30,10,.7)}
.gregler input[type=range]:hover::-webkit-slider-thumb,.gregler input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 0 rgba(0,0,0,.34),0 0 0 2px #f6eedd,0 0 0 3px var(--taupe),0 10px 14px -6px rgba(40,30,10,.7)}
.gregler__marken{color:var(--taupe)}

/* Tagen & Feiern, Anfrage (Robert 18:30: «das Eingabefeld auch noch luxuriöser, mehr einladen, mehr Spass, zum Luxushotel»): die Eingabe liegt auf einem Briefbogen,
   der Anlass wird an einem Schalter gewählt (wie Sommer/Winter), die Felder sind Zeilen wie in einem Gästebuch: kleines Wort, darunter der Eintrag in der Titelschrift, feine Linie */
.dn-rechner__wahl{position:relative;padding:clamp(28px,3.2vw,50px) clamp(24px,3vw,48px) clamp(26px,3vw,44px);border-radius:var(--r-l);background:linear-gradient(180deg,#fffdf6,#f6eedc);
  box-shadow:inset 0 0 0 1px rgba(110,88,44,.18),inset 0 1px 0 #fff,0 4px 0 #cdbd96,0 34px 44px -30px rgba(74,58,26,.6)}
.dn-rechner__wahl::before{content:'';position:absolute;inset:9px;border:1px solid rgba(110,88,44,.26);border-radius:calc(var(--r-l) - 7px);pointer-events:none}
.dn-rechner__wahl .tabs--rechner{position:relative;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;padding:5px!important;margin:0 0 clamp(14px,1.6vw,22px)!important;border-radius:999px;
  background:linear-gradient(180deg,#0b1f40,#12305e)!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(220,198,143,.4)!important}
.dn-rechner__wahl .tabs--rechner .tab{min-height:48px;padding:0 8px;border:0;border-radius:999px;background:none;color:rgba(251,243,226,.82);font:400 clamp(1.02rem,1.25vw,1.26rem) var(--serif);letter-spacing:.01em}
.dn-rechner__wahl .tabs--rechner .tab[aria-pressed="true"]{color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -2px 0 rgba(110,88,44,.38),0 8px 12px -6px rgba(0,0,0,.75)}
.dn-rechner__wahl .felder{gap:clamp(6px,.8vw,12px) clamp(20px,2.4vw,36px);margin-top:0}
.dn-rechner__wahl .feld{gap:8px;padding:clamp(16px,1.7vw,22px) 2px 11px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(138,117,69,.5);transition:border-color .3s}
.dn-rechner__wahl .feld:hover{border-bottom-color:rgba(138,117,69,.9)}
.dn-rechner__wahl .feld:focus-within{border-bottom-color:var(--navy);box-shadow:0 1px 0 var(--navy)}
.dn-rechner__wahl .feld span{font-size:10.5px;letter-spacing:.2em;color:var(--taupe)}
.dn-rechner__wahl .feld input,.dn-rechner__wahl .feld select,.dn-rechner__wahl .feld textarea{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.5vw,1.56rem);line-height:1.25;outline:0}
.dn-rechner__wahl .feld textarea{resize:none;min-height:3.9em;font-size:clamp(1.08rem,1.25vw,1.3rem)}
.dn-rechner__wahl .dn-haken{grid-column:1/-1;gap:14px;padding:clamp(14px,1.5vw,20px) 2px 4px;font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.3vw,1.36rem)}
.dn-rechner__wahl .dn-haken input{-webkit-appearance:none;appearance:none;flex:none;width:26px;height:26px;margin:0;border-radius:8px;cursor:pointer;background:#efe4ca;box-shadow:inset 0 2px 4px rgba(74,58,26,.3),inset 0 -1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(138,117,69,.3)}
.dn-rechner__wahl .dn-haken input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%23ecd69d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/100% no-repeat,linear-gradient(180deg,#1f3f77,#0b1f40);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 4px 8px -4px rgba(6,20,43,.7)}
.dn-rechner__wahl .dn-haken input:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}
.dn-rechner__wahl .unterschrift{margin-top:clamp(22px,2.4vw,34px)!important;text-align:right}
@media (max-width:860px){.dn-rechner__wahl{padding:26px 20px 24px}}

/* Wellness, «Wellnessdörfli & Saunas» (Robert 18:31: «der Abschnitt breiter, Bilder grösser, Text prägnanter, die beiden Saunen und täglich mehr zelebrieren»):
   der Abschnitt ragt über den Seitenrand hinaus, die Bildgruppe nimmt 7 von 12 Spalten, der erste Satz steht gross in der Titelschrift, die drei Angaben als Billett */
@media (min-width:961px){
  .sb-wd{width:calc(100% + 2*clamp(0px,3vw,52px));margin-left:calc(-1*clamp(0px,3vw,52px))}
  .sb-wd.zwei--bild>.t{grid-column:1/6}.sb-wd.zwei--bild>.b{grid-column:6/-1}
  .sb-wd>.b>.zmos{aspect-ratio:1.3/1}
}
.sb-grad{margin-top:clamp(26px,3vw,42px)}
.sb-grad__mit b{font-weight:inherit}.sb-grad__mit span:last-child::before{content:'·';margin:0 .55em}
.sb-grad .zs-tafel__drei dd{font-size:clamp(1.2rem,1.7vw,1.9rem);white-space:nowrap}
@media (max-width:520px){.sb-grad .zs-tafel__drei dd{white-space:normal;font-size:1.1rem}}
.sb-grad .zs-tafel__drei dt{font-size:clamp(10px,.82vw,11.5px)}
/* Wellness, «Nach dem Wandertag»: die drei Polaroids über der Überschrift (Robert 18:32) */
.pstapel--oben{margin-top:0;margin-bottom:clamp(34px,4vw,60px)}

/* Das Haus, «Über 125 Jahre Vintage» als Chronik (Robert 18:32: «den Bereich nochmal neu denken, muss viel geiler zur Story und zum Luxushotel passen»).
   Statt neun dunkler Karten im Stapel: eine Chronik auf dem Papier. In der Mitte eine feine Goldlinie mit einer Raute je Station, die Fotos als randlose Kacheln
   abwechselnd links und rechts, gegenüber das Jahr gross in Gold, der Titel und der Text des Hauses. */
.chronik{position:relative;list-style:none;margin:clamp(10px,2vw,30px) 0 0;padding:0;display:grid;gap:clamp(60px,8vw,130px)}
.chronik::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(138,117,69,.6) 5%,rgba(138,117,69,.6) 95%,transparent)}
.chronik__e{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,8vw,150px);align-items:center}
.chronik__e::before{content:'';position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;transform:rotate(45deg);background:var(--papier);box-shadow:inset 0 0 0 1px var(--taupe)}
.chronik__b{margin:0;min-width:0}
.chronik__e:nth-child(even) .chronik__b{order:2}
.chronik__k{display:block;aspect-ratio:4/3;border-radius:clamp(18px,2vw,28px);overflow:hidden;background:var(--creme);transform:translateZ(0);
  box-shadow:0 0 0 1px rgba(138,117,69,.28),0 5px 0 #c9b88c,0 28px 34px -14px rgba(74,58,26,.55),0 64px 60px -40px rgba(74,58,26,.6)}
.chronik__k img{width:100%;height:100%;object-fit:cover}
.chronik__t{min-width:0}
.chronik__e:nth-child(even) .chronik__t{text-align:right}
.chronik__j{display:block;font-family:var(--serif);font-size:clamp(4.2rem,8.6vw,9rem);line-height:.84;letter-spacing:-.01em;font-variant-numeric:lining-nums;color:#b79a5a}
.chronik__t h3{margin-top:clamp(16px,1.8vw,26px);font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.8rem);line-height:1.08}
.chronik__t p{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(1.02rem,1.15vw,1.18rem);line-height:1.62;color:rgba(12,21,38,.8);text-wrap:pretty}
.chronik__e:nth-child(even) .chronik__t p{margin-left:auto}
.chronik__t p{max-width:46ch}
@media (max-width:860px){
  .chronik{gap:54px}.chronik::before,.chronik__e::before{display:none}
  .chronik__e{grid-template-columns:minmax(0,1fr);gap:22px}
  .chronik__e:nth-child(even) .chronik__b{order:0}.chronik__e:nth-child(even) .chronik__t{text-align:left}.chronik__e:nth-child(even) .chronik__t p{margin-left:0}
  .chronik__j{font-size:4rem}
}

/* Das Haus, Team: runde Porträts vor den Namen (aus den vier Fotos der Team-Seite des Hauses) */
.team--bild li{grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:clamp(16px,1.8vw,26px)}
.team__b{display:block;width:clamp(68px,6vw,92px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#0b1f40;box-shadow:0 0 0 1px rgba(220,198,143,.75),0 0 0 5px var(--nacht),0 0 0 6px rgba(220,198,143,.34)}
.team__b img{display:block;width:100%;height:100%;object-fit:cover}
.team__b--leer{visibility:hidden}
@media (max-width:700px){.team--bild li{grid-template-columns:auto minmax(0,1fr)}.team--bild li q{grid-column:1/-1}}
/* Das Haus, «Arbeiten im Carlton-Europe»: drei Fotos (ein grosses, zwei kleine), alles etwas grösser (Robert 18:34) */
@media (min-width:961px){.sb-arbeit.zwei--bild>.t{grid-column:1/6}.sb-arbeit.zwei--bild>.b{grid-column:6/-1}.sb-arbeit>.b>.zmos{aspect-ratio:1.44/1}}
/* Das Haus, «Unsere Partner»: die Namen hell und gross, der Schatten der Fotos fällt nicht mehr auf sie (Robert 18:34: «stehen zu sehr im Schatten») */
.fl--navy .pk .rahmen,.fl--nacht .pk .rahmen{box-shadow:0 4px 0 #030b1c,0 16px 18px -12px rgba(0,0,0,.75)}
.pk h3{margin-top:clamp(22px,2.2vw,30px);font-size:clamp(1.45rem,1.9vw,2rem)}
.fl--navy .pk h3,.fl--nacht .pk h3{color:#fbf3e2;opacity:1}
.fl--navy .pk p,.fl--nacht .pk p{opacity:1;color:rgba(255,255,255,.84)}

/* =====================================================================================================================
   BEWEGUNG: ein Massstab für alle Seiten (Robert 13.10.2026: «das Carlton auf die Rivage-Standards», «an vielen Teilen so gemacht, aber noch nicht an allen»).
   Schrift und Zeilen: kurzer Weg, lange Zeit, weiche Kurve. Bilder, Kacheln und Blätter: von Anfang an deckend, sie kommen tief aus dem Grund,
   etwas kleiner, und federn am Ziel leicht durch. Nur transform und opacity. Auslöser in main.js (im Fenster, nicht mehr unter dem Rand).
   Der Auftritt der Bilder läuft als Ablauf (animation), damit die vielen Sonderregeln für die Maus in main.css (kürzere Zeiten nach .da) ihn nicht verkürzen.
   Zurück = diesen Block löschen und die drei Ränder in main.js auf 12 %, 16 %, 16 % stellen.
   ===================================================================================================================== */
:root{--sanft:cubic-bezier(.25,.6,.3,1);--feder:cubic-bezier(.28,1.42,.42,1);--feder-leise:cubic-bezier(.3,1.26,.4,1)}
/* Schrift und Zeilen: kurzer Weg, lange Zeit, weiche Kurve (Auslöser in main.js, mit Vorlauf) */
[data-r]{transform:translateY(clamp(22px,2.4vw,38px));transition:opacity 1.6s ease,transform 2.4s var(--sanft);transition-delay:calc(var(--i,0)*120ms)}
/* dieselben Werte dort, wo FASSUNG 45 in main.css (zweiter Chat, 13.10.2026 gegen 16:45) Schrift kürzer und schneller gestellt hat; gleicher Selektor, steht später, gilt also */
main>section:not(#oben):not(#willkommen) [data-r]:where(:not([data-r="bild"],[data-r="schweb"],[data-r="rein"])),.fuss [data-r]:where(:not([data-r="rein"],[data-r="bild"])){transform:translateY(clamp(22px,2.4vw,38px));transition:opacity 1.6s ease,transform 2.4s var(--sanft);transition-delay:calc(var(--i,0)*120ms)}
main>section:not(#oben):not(#willkommen) [data-r].da,.fuss [data-r].da{opacity:1;transform:none}

/* --- So kommen Bilder, Kacheln und Blätter herein (Stand 13.10.2026, 17 Uhr, nach Roberts Durchgang) ---
   Zwei Bewegungen, die sich nicht in die Quere kommen, weil sie zwei verschiedene Eigenschaften führen:
   1. Der WEG nach oben hängt am Scrollen (translate über die Zeitachse des Browsers): das Stück kommt mit dem Scrollen herauf, es steht nie versetzt da und wartet
      («sollen nicht warten, bis man da ist, sondern direkt mit dem Scroll hochkommen», 16:20, 16:24, 16:47).
   2. Das PULSIEREN läuft nach der Uhr (scale mit der Federkurve des Grand Beau-Rivage, gemessen dort: 0,93, cubic-bezier(.28,1.42,.42,1)), dazu kommt das Foto aus der Vergrösserung
      («richtig so federn, wo es passt, sonst reingezoomt, pulsierend», 16:45). Lang und ruhig, weil Robert die kurze Fassung «viel zu schnell» fand.
   Immer deckend. Die Regeln tragen den Vorsatz «html:not(#a):not(#b)», damit sie vor FASSUNG 45 in main.css gelten (zweiter Chat, dieselben Stücke, siehe UEBERGABE). --- */
@keyframes ce-zug{from{translate:0 var(--ce-weg,100px)}}
@keyframes ce-puls{from{scale:var(--ce-kl,.93)}}
@keyframes ce-feder{from{translate:0 clamp(80px,9vw,140px);scale:.93}}
html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]):not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *),html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){opacity:1;transform:none;--ce-weg:calc(clamp(70px,8vw,124px) + min(var(--i,0),4)*22px)}
html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]):not(.da):not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){scale:.93;translate:0 var(--ce-weg)}
html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){animation:ce-feder 2.7s var(--feder) backwards;animation-delay:calc(var(--i,0)*100ms)}
html:not(#a):not(#b) :is([data-gruppe],.drei) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){animation-delay:0s}

/* Gruppen: Bildgefüge, Bildgruppen mit Einkerbung, die Zimmerwahl mit ihrer Leiste (Robert 16:15 und 16:24: «die Kachel schiebt sich hinter den anderen beiden hoch,
   sieht doof aus», «genauso wie bei Das Vintage Hotel, mit den Balken sieht das Reinfedern nicht gut aus»). Die Gruppe kommt als Ganzes, ihre Teile stehen in ihr still. */
@keyframes ce-heben{from{translate:0 clamp(72px,8vw,124px);scale:.965}}
html:not(#a):not(#b) :is(.frei--kerbe,.gal,.zmos__b)[data-r],html:not(#a):not(#b) :is(.frei--kerbe,.gal,.zmos__b)[data-r].da,html:not(#a):not(#b) [data-finder] :is(.konsole,.zk)[data-r]:not(.matt),html:not(#a):not(#b) [data-finder] :is(.konsole,.zk)[data-r].da:not(.matt){opacity:1;transform:none;translate:none;scale:none;animation:none}
html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]){--ce-weg:clamp(70px,8vw,124px);--ce-kl:.965}
html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]):not(.da):not(:has(.da)){opacity:1;translate:0 var(--ce-weg);scale:.965}
html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]):is(.da,:has(.da)){animation:ce-heben 2.9s var(--feder-leise) backwards}
/* «Wie viel Zeit haben Sie?» (Robert 16:46: «da sollen die Bilder nur so pulsieren und nicht von unten reingeschoben kommen, sonst überschneiden die oberen vier das untere»):
   kein Weg, jede Kachel pulsiert an ihrem Platz herein, eine nach der anderen; das Foto darin kommt aus der Vergrösserung (ceZoom in main.css) */
html:not(#a):not(#b) .zs .zs__k[data-r],html:not(#a):not(#b) .zs .zs__k[data-r].da{opacity:1;transform:none;translate:none;scale:none;animation:none}
html:not(#a):not(#b) .zs .zs__k[data-r] .zs__b img,html:not(#a):not(#b) .zs .zs__k[data-r].da .zs__b img{animation:none}
html:not(#a):not(#b) .zs .zs__k[data-r].ce-wart{scale:.9}
html:not(#a):not(#b) .zs .zs__k[data-r].ce-wart .zs__b img{transform:scale(1.14)}
@keyframes ce-zoom{from{transform:scale(1.14)}}
html:not(#a):not(#b) .zs .zs__k[data-r].ce-los{--ce-kl:.9;animation:ce-puls 2.6s var(--feder) backwards;animation-delay:calc(max(var(--i,1) - 1,0)*90ms)}
html:not(#a):not(#b) .zs .zs__k[data-r].ce-los .zs__b img{animation:ce-zoom 2.8s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(max(var(--i,1) - 1,0)*90ms)}
html:not(#a):not(#b) .zs .zs__k[data-r].ce-los.ce-fertig,html:not(#a):not(#b) .zs .zs__k[data-r].ce-los.ce-fertig .zs__b img{animation:none}
.frei--kerbe[data-r] .rahmen__k img{transition-duration:2.8s;transition-delay:calc(var(--i,0)*170ms)}
/* Fotos, die nicht gleiten (Gefüge), kommen beim Auftritt aus der Vergrösserung zur Ruhe */
html:not(#a):not(#b) .zmos:not(:has(.da)) .zmos__b img{transform:scale(1.2)}
html:not(#a):not(#b) .zmos:has(.da) .zmos__b img{transition:transform 2.8s var(--e1)}
/* der Name in der Einkerbung rollt herein wie die Überschriften (Robert 16:23: «nicht reingeschwebt, sondern so reinrollen»): Baustein .z des Hauses */
.kerbe .z>span{transition-delay:calc(.2s + var(--i,0)*150ms)}

/* Wo der Browser die Scroll-Zeitachse kann (Safari ab 26, Chrome): der Weg am Scrollen, das Pulsieren nach der Uhr. Sonst gilt oben der Lauf nach der Uhr für beides. */
@supports (animation-timeline:view()){
  html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]):not(.da):not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){translate:none;animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 58vh}
  html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){animation:ce-zug cubic-bezier(.3,.3,.45,1) both,ce-puls 2.7s var(--feder) backwards;animation-duration:auto,2.7s;animation-timeline:view(),auto;animation-range:cover 0% cover 58vh,normal;animation-delay:0s,calc(var(--i,0)*100ms)}
  html:not(#a):not(#b) :is([data-gruppe],.drei) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){animation-delay:0s,0s}
  html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da.ce-fertig:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 58vh}
  html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]):not(.da):not(:has(.da)){translate:none;animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 58vh}
  html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]):is(.da,:has(.da)){animation:ce-zug cubic-bezier(.3,.3,.45,1) both,ce-puls 2.9s var(--feder-leise) backwards;animation-duration:auto,2.9s;animation-timeline:view(),auto;animation-range:cover 0% cover 58vh,normal}
  html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]).ce-fertig{animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 58vh}
  html:not(#a):not(#b) .fuss [data-r="rein"],html:not(#a):not(#b) .fuss [data-r="rein"].da,html:not(#a):not(#b) .fuss [data-r="rein"].da.ce-fertig{animation-range:cover 0% cover 40vh,normal}
  @media (max-width:700px){html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]):not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *),html:not(#a):not(#b) :is([data-r="bild"],[data-r="schweb"],[data-r="rein"],.tafel[data-r],.blatt[data-r],.gschein[data-r],.kbrett[data-r],.weinblatt[data-r],.dn-summe[data-r],.sb-zug[data-r],.uk[data-r],.konsole[data-r],.zk[data-r],.stelle[data-r],.dn-rechner[data-r],.gplan[data-r],.sbuehne[data-r],.gregler[data-r]).da:not(.lk__b):not(.fh__bild):not(.frei--kerbe):not(.gal):not(.zmos__b):not(.zs__k):not(.recht__text):not(.hero *):not(.gang *):not([data-finder] *){--ce-weg:calc(52px + min(var(--i,0),3)*12px)}html:not(#a):not(#b) :is(.trio--frei[data-r],.galerie,.zmos,[data-finder]){--ce-weg:52px}}
}
/* Essen & Trinken, «Lokale Köstlichkeiten»: die drei kleinen Fotos unter dem grossen (Robert 18:37: «müssen eleganter reingeschwebt kommen und nicht so als Block zu spät»).
   Alle drei mit demselben, kurzen Weg (keine Treppe), und sie sind nach einem Drittel Schirm an ihrem Platz. */
html:not(#a):not(#b) .pt__b .frei[data-r]:not(:first-child),html:not(#a):not(#b) .pt__b .frei[data-r].da:not(:first-child){--ce-weg:clamp(44px,5vw,72px);--ce-kl:.95}
@supports (animation-timeline:view()){html:not(#a):not(#b) .pt__b .frei[data-r]:not(:first-child),html:not(#a):not(#b) .pt__b .frei[data-r].da:not(:first-child),html:not(#a):not(#b) .pt__b .frei[data-r].da.ce-fertig:not(:first-child){animation-range:cover 0% cover 34vh,normal}}
/* sehr hohe Blätter (Rechtstexte) steigen nur ein kurzes Stück, ohne kleiner zu werden */
.recht__text[data-r]:not(.da){opacity:1;transform:translateY(clamp(22px,2.4vw,38px))}
@media (max-width:700px){@keyframes ce-feder{from{translate:0 60px;scale:.95}}@keyframes ce-heben{from{translate:0 52px;scale:.97}}}
/* ohne Bewegung (Systemwunsch, ?nomotion), nach dem ersten Pulsieren (.ce-fertig, setzt seitenbau.js: ein Stück pulsiert genau einmal) und im Druck */
@supports not (animation-timeline:view()){:is([data-r],.galerie,.zmos,[data-finder]).ce-fertig{animation:none!important}}
html.ce-ruhig:not(#a):not(#b) :is([data-r],.galerie,.zmos,[data-finder]){animation:none!important;translate:none!important;scale:none!important}
.ce-ruhig .z>span{transition:none}
@media (prefers-reduced-motion:reduce){html:not(#a):not(#b) :is([data-r],.galerie,.zmos,[data-finder]){animation:none!important;transform:none!important;translate:none!important;scale:none!important}}
@media print{html:not(#a):not(#b) :is([data-r],.galerie,.zmos,[data-finder]){animation:none!important;transform:none!important;translate:none!important;scale:none!important;opacity:1!important}}

/* Kaminbar, «Eine Pause einlegen» (Robert 13.10.2026 22:22: «die Bilder grösser, dass sie mit dem Text oben und unten abschliessen, die drei Sachen als Ticket, edel und luxuriös, auch mit dem Text»):
   Bildgruppe 7 von 12 Spalten und so hoch wie die Textspalte (oben Titel, unten Billett), ein grosses Foto oben, zwei darunter; unter dem Titel die Goldlinie mit Raute,
   erster Satz gross in der Titelschrift, die drei Angaben als Billett des Hauses. Block einzeln löschbar. */
.sb-pause__zier{justify-content:flex-start;margin:clamp(20px,2.2vw,32px) 0 clamp(18px,2vw,28px)}
.sb-pause__zier::before{display:none}.sb-pause__zier::after{width:clamp(70px,8vw,132px)}
.sb-pause>.t>.gross{margin:0;font-size:clamp(1.34rem,1.95vw,2.05rem);line-height:1.38;letter-spacing:-.012em;text-wrap:pretty}
.sb-pause>.t>.lauf{margin-top:clamp(16px,1.8vw,26px);max-width:50ch;color:rgba(22,28,44,.78)}
.sb-pause__billett{margin-top:clamp(24px,2.6vw,38px)}
.sb-pause__billett .zs-tafel__drei dd{font-size:clamp(1.08rem,1.4vw,1.45rem);text-wrap:balance}
.sb-pause__billett .zs-tafel__mit{font-family:var(--serif);font-style:italic;font-size:clamp(.98rem,1.1vw,1.12rem);color:rgba(255,255,255,.9)}
@media (min-width:861px){
  .sb-pause>.t{display:flex;flex-direction:column}.sb-pause>.t>.d2{margin-top:-.2em}
  .sb-pause>.t>.lauf{margin-bottom:0}
  .sb-pause>.b{padding-top:0}
  .sb-pause>.b>.zmos{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.62fr) minmax(0,1fr);min-height:0}
  .sb-pause>.b>.zmos>.zmos__b:first-child{grid-row:auto;grid-column:1/-1}
}
@media (min-width:961px){.sb-pause>.t{grid-column:1/6}.sb-pause>.b{grid-column:6/-1}}
@media (max-width:560px){.sb-pause__billett .zs-tafel__drei{grid-template-columns:minmax(0,1fr)}.sb-pause__billett .zs-tafel__drei div{padding:14px 6px;border-left:0;border-top:1px solid rgba(220,198,143,.3)}
  .sb-pause__billett .zs-tafel__drei div:first-child{border-top:0;padding-top:2px}.sb-pause__billett .zs-tafel__drei div:last-child{padding-bottom:2px}.sb-pause__billett .zs-tafel__drei dd{margin-top:6px;font-size:1.3rem}.sb-pause__billett .zs-tafel__drei dt{font-size:10.5px;letter-spacing:.14em}}
.sb-pause__billett .zs-tafel__drei dd{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (min-width:861px) and (max-width:1240px){.sb-pause__billett .zs-billett__haupt{padding-left:10px;padding-right:10px}.sb-pause__billett .zs-tafel__drei div{padding-left:5px;padding-right:5px}
  .sb-pause__billett .zs-tafel__drei dd{font-size:clamp(.94rem,1.5vw,1.14rem)}.sb-pause__billett .zs-tafel__drei dt{font-size:9.5px;letter-spacing:.07em}}


/* ==================================================================================================================================
   AKTIV («Wandern, Bike, Motorrad, Hund»), Robert 13.10.2026 22:37–22:45
   «die drei Sachen unten bitte wie ein Ticket» · «Button unten im Abschnitt mittig» · «rechts die Kachel wie ein edles Schild in Blau, Logo
   drüber in Gold» · «die 3 Kacheln leichten Hover-Effekt» · «Bilder grösser, mit Text (oben) und Ticket (unten) abschliessen» ·
   «Hundespeisekarte wie ein längliches Hundehalsbandschild, zwei mal zwei Gerichte nebeneinander».
   ================================================================================================================================== */
/* Billett aus einem Stück: drei Spalten, Kerben oben und unten auf beiden Trennlinien. Maske aus vier Kacheln (je 51 %) mit je einem Loch,
   damit kein mask-composite nötig ist (Safari, Bauweise vom Grand Beau-Rivage). Kein Schatten darunter (Regel für alle Tickets). */
.ak-fuss{padding-top:clamp(22px,2.4vw,34px)}   /* Robert 22:53: «ein bisschen höher» */
.ak-billett{--k:12px;--gl:rgba(220,198,143,.72);--ring:transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px);
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;row-gap:10px;margin:0;padding:clamp(24px,2.5vw,34px) 0 clamp(22px,2.3vw,30px);border-radius:var(--r-m);color:#fff;
  background:radial-gradient(circle var(--k) at 33.333% 0,var(--ring)),radial-gradient(circle var(--k) at 66.667% 0,var(--ring)),radial-gradient(circle var(--k) at 33.333% 100%,var(--ring)),radial-gradient(circle var(--k) at 66.667% 100%,var(--ring)),var(--ak-grund,linear-gradient(180deg,#12305e,#0b2148));
  box-shadow:inset 0 0 0 1px var(--gl);
  -webkit-mask:radial-gradient(circle var(--k) at 65.36% 0,#0000 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle var(--k) at 34.64% 0,#0000 97%,#000) right top/51% 51% no-repeat,
    radial-gradient(circle var(--k) at 65.36% 100%,#0000 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle var(--k) at 34.64% 100%,#0000 97%,#000) right bottom/51% 51% no-repeat;
          mask:radial-gradient(circle var(--k) at 65.36% 0,#0000 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle var(--k) at 34.64% 0,#0000 97%,#000) right top/51% 51% no-repeat,
    radial-gradient(circle var(--k) at 65.36% 100%,#0000 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle var(--k) at 34.64% 100%,#0000 97%,#000) right bottom/51% 51% no-repeat}
.ak-billett::before{content:'';position:absolute;inset:6px;border:1px solid rgba(220,198,143,.36);border-radius:calc(var(--r-m) - 6px);pointer-events:none}
.ak-billett>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;padding:0 clamp(8px,1vw,16px);text-align:center;min-width:0}
.ak-billett>div+div::before{content:'';position:absolute;top:calc(var(--k) + 8px);bottom:calc(var(--k) + 8px);margin-left:-1px;border-left:2px dashed rgba(220,198,143,.5);pointer-events:none}
.ak-billett>div:nth-child(2)::before{left:33.333%}.ak-billett>div:nth-child(3)::before{left:66.667%}
.ak-billett dt{align-self:end;font-family:var(--mono);font-size:clamp(10px,.8vw,11.5px);line-height:1.35;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);text-wrap:balance}
.ak-billett dd{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,1.36vw,1.5rem);line-height:1.12;color:var(--weiss);text-wrap:balance}
@media (max-width:560px){
  .ak-billett{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:1fr;row-gap:0;padding:0;
    background:radial-gradient(circle var(--k) at 0 33.333%,var(--ring)),radial-gradient(circle var(--k) at 100% 33.333%,var(--ring)),radial-gradient(circle var(--k) at 0 66.667%,var(--ring)),radial-gradient(circle var(--k) at 100% 66.667%,var(--ring)),var(--ak-grund,linear-gradient(180deg,#12305e,#0b2148));
    -webkit-mask:radial-gradient(circle var(--k) at 0 65.36%,#0000 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle var(--k) at 100% 65.36%,#0000 97%,#000) right top/51% 51% no-repeat,
      radial-gradient(circle var(--k) at 0 34.64%,#0000 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle var(--k) at 100% 34.64%,#0000 97%,#000) right bottom/51% 51% no-repeat;
            mask:radial-gradient(circle var(--k) at 0 65.36%,#0000 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle var(--k) at 100% 65.36%,#0000 97%,#000) right top/51% 51% no-repeat,
      radial-gradient(circle var(--k) at 0 34.64%,#0000 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle var(--k) at 100% 34.64%,#0000 97%,#000) right bottom/51% 51% no-repeat}
  .ak-billett>div{display:grid;grid-row:auto;grid-template-rows:none;align-content:center;gap:6px;padding:18px 26px}
  .ak-billett>div+div::before{top:auto;bottom:auto;left:calc(var(--k) + 8px)!important;right:calc(var(--k) + 8px);margin:-1px 0 0;border-left:0;border-top:2px dashed rgba(220,198,143,.5)}
  .ak-billett>div:nth-child(2)::before{top:33.333%}.ak-billett>div:nth-child(3)::before{top:66.667%}
  .ak-billett dt{font-size:10.5px;letter-spacing:.14em}.ak-billett dd{font-size:1.3rem}
}

/* Knöpfe: mittig unten im Abschnitt, oder mittig unter der Textspalte */
.ak-mitte{justify-content:center;margin-top:clamp(36px,4.4vw,64px)}
.ak-knopf{justify-content:center}

/* Text und Bild auf einer Höhe: das Bild beginnt mit dem Titel und endet mit dem Billett */
@media (min-width:861px){
  .ak-zwei{align-items:stretch}
  .ak-zwei>.t{display:flex;flex-direction:column}
  .ak-zwei>.t>.ak-fuss{margin-top:auto}
  .ak-zwei--nah>.t>.ak-fuss{margin-top:0}   /* Wandern (Robert 22:52: «das kleine Ticket ein bisschen höher unter den Text») */
  .ak-zwei>.b{display:flex;padding-top:calc(clamp(2.05rem,4.7vw,5rem)*.07)}
  .ak-zwei>.b>*{flex:1;min-width:0}
  .ak-zwei--bild>.t{grid-column:1/6}.ak-zwei--bild>.b{grid-column:6/-1}
  .zwei--um.ak-zwei--bild>.t{grid-column:8/-1}.zwei--um.ak-zwei--bild>.b{grid-column:1/8}
  .ak-zwei--bild>.b>.zmos{aspect-ratio:auto;min-height:0}
  .ak-zwei--hund>.b{padding-top:calc(clamp(1.3rem,2.5vw,2.6rem)*.16)}
  .ak-knopf{grid-row:2;grid-column:8/-1;margin-top:calc(-1*clamp(0px,1vw,18px))}
}

/* Die drei Bilder unter «Wandern»: heben sich leicht beim Überfahren (nur translate und scale am Rahmen, das Foto gleitet weiter wie überall) */
@media (hover:hover){
  .ak-reihe figure .rahmen{transition:translate .7s var(--e2),scale .7s var(--e2)}
  .ak-reihe figure:hover .rahmen{translate:0 -7px;scale:1.012}
}

/* Picknick-Lunchboxen als Schild des Hauses: Nachtblau, doppelte Goldlinie, das Zeichen in Gold darüber */
.blatt.ak-schild{padding:clamp(30px,3.2vw,50px) clamp(26px,3.4vw,54px) clamp(28px,3vw,44px);border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(130% 90% at 20% 0%,#1e4583 0%,#10305f 52%,#081a3a 100%),#0f2a55;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(220,198,143,.62),0 3px 0 #030b1c,0 50px 60px -38px rgba(12,21,38,.8)}
.blatt.ak-schild::before{inset:9px;border:1px solid rgba(220,198,143,.34);border-radius:calc(var(--r-xl) - 9px)}
.ak-schild__z{display:grid;justify-items:center;margin-bottom:clamp(14px,1.5vw,22px)}
.ak-schild__z svg{width:clamp(66px,5.6vw,92px);height:auto;aspect-ratio:1680/1084;color:transparent;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
.ak-schild .blatt__kopf{flex-direction:column;align-items:center;gap:10px;padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid rgba(220,198,143,.36);text-align:center}
.ak-schild .blatt__kopf .d4{font-size:clamp(1.6rem,2.3vw,2.4rem);line-height:1.1;letter-spacing:0;color:#fbf3e2}
.ak-schild .blatt__kopf .mono{color:var(--gold)}
.ak-schild .gericht{border-bottom-color:rgba(220,198,143,.2)}
.ak-schild .gericht b{color:#fff}
.ak-schild .gericht i{color:var(--gold)}
.ak-schild .gericht span{opacity:1;color:rgba(255,255,255,.76)}
.ak-schild .quelle{max-width:58ch;margin-inline:auto;text-align:center;opacity:1;color:rgba(255,255,255,.62)}

/* Hundespeisekarte: längliche Messingmarke am Halsband. Das Band liegt still dahinter, nur die Marke schwebt herein.
   Fassung 2 (Robert 22:52: «Idee cool, aber so massiv, so riesig» · «in dem Ding drin einen blauen Button», nicht zwei gleiche Knöpfe übereinander):
   schmaler und flacher, Titel links, der blaue Knopf rechts in derselben Zeile. */
.ak-marke{position:relative;isolation:isolate;margin-top:clamp(40px,4.8vw,72px);--band:clamp(64px,6.4vw,92px)}
.ak-marke::before,.ak-marke::after{content:'';position:absolute;z-index:-1;left:calc(-1*var(--rand));right:calc(-1*var(--rand));top:50%;pointer-events:none}
.ak-marke::before{height:var(--band);margin-top:calc(-.5*var(--band));background:linear-gradient(180deg,#0c2146 0%,#081833 60%,#050f24 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),0 20px 26px -18px rgba(0,0,0,.75)}
.ak-marke::after{height:calc(var(--band) - 18px);margin-top:calc(-.5*(var(--band) - 18px));border-top:2px dashed rgba(220,198,143,.42);border-bottom:2px dashed rgba(220,198,143,.42)}
.ak-marke__platte{position:relative;max-width:1020px;margin-inline:auto;padding:clamp(18px,1.9vw,26px) clamp(84px,8.4vw,124px) clamp(12px,1.3vw,18px);border-radius:clamp(48px,5.4vw,78px);color:var(--tinte);
  background:linear-gradient(180deg,#f7ebc9 0%,#e6d3a2 30%,#d2ba80 74%,#bfa367 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(110,88,44,.5),inset 0 -3px 0 rgba(110,88,44,.3),0 3px 0 #6d582b,0 30px 36px -24px rgba(0,0,0,.85)}
.ak-marke__platte::before{content:'';position:absolute;inset:8px;border:1px solid rgba(110,88,44,.42);border-radius:clamp(40px,calc(5.4vw - 8px),70px);pointer-events:none}
/* zwei Nieten */
.ak-marke__platte::after{content:'';position:absolute;inset:0;pointer-events:none;--n:clamp(40px,4.2vw,60px);--niet:#fff8de 0,#ecd9a6 20%,#b89c5e 52%,#806732 68%,rgba(52,39,12,.6) 76%,rgba(52,39,12,0) 92%;
  background:radial-gradient(circle 15px at var(--n) 50%,var(--niet)),radial-gradient(circle 15px at calc(100% - var(--n)) 50%,var(--niet))}
.ak-marke__kopf{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;padding-bottom:clamp(12px,1.2vw,16px);border-bottom:1px solid rgba(74,58,26,.34)}
.ak-marke__titel{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:0;min-width:0}
.ak-marke__titel .d4{font-size:clamp(1.4rem,1.9vw,1.95rem);line-height:1.1;letter-spacing:0;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.ak-marke__titel .mono{color:#5d4a1f}
.ak-marke .kn{position:relative;z-index:1;flex:none;--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);--ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte)}
.ak-marke__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(26px,3.6vw,56px)}
.ak-marke .gericht{padding:11px 0;gap:2px 20px;border-bottom-color:rgba(74,58,26,.26)}
.ak-marke .gericht:nth-last-child(-n+2){border-bottom:0}
.ak-marke .gericht b,.ak-marke .gericht i{text-shadow:0 1px 0 rgba(255,255,255,.45)}
.ak-marke .gericht span{font-size:.92rem;line-height:1.4;opacity:.82}
@media (max-width:760px){
  .ak-marke::before,.ak-marke::after,.ak-marke__platte::after{content:none}
  .ak-marke__platte{padding:26px 22px 14px;border-radius:30px}.ak-marke__platte::before{inset:7px;border-radius:23px}
  .ak-marke__kopf{flex-direction:column;text-align:center;padding-bottom:18px}.ak-marke .kn{max-width:100%;height:auto;min-height:44px;padding-top:7px;padding-bottom:7px;white-space:normal;text-align:left;line-height:1.3}.ak-marke__titel{flex-direction:column;align-items:center}
  .ak-marke__liste{grid-template-columns:minmax(0,1fr)}
  .ak-marke .gericht:nth-last-child(2){border-bottom:1px solid rgba(74,58,26,.26)}
}

/* Schluss-Billett: steigt nur mit dem Scrollen an seinen Platz und ist früher dort, ohne Nachfedern nach der Uhr (Robert 13.10.2026 22:43: «das Ticket sitzt
   nicht mittig»: wer schnell ans Seitenende scrollte, sah es noch gut zwei Sekunden zu tief und von der Laufschrift angeschnitten). */
@supports (animation-timeline:view()){
  html:not(#a):not(#b):not(#c) .ausklang .in[data-r],html:not(#a):not(#b):not(#c) .ausklang .in[data-r].da,html:not(#a):not(#b):not(#c) .ausklang .in[data-r].da.ce-fertig{animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 30vh;animation-delay:0s}
  /* Billette und Marke auf «Aktiv» (Robert 22:53: «sitzen so tief und haben ihre Endposition, wenn man schon längst über den Abschnitt hinaus ist»):
     kurzer Weg, am Platz sobald sie ein Viertel Schirm im Bild sind, nur am Scrollen, kein Nachfedern nach der Uhr. */
  html:not(#a):not(#b):not(#c) .ak-billett[data-r],html:not(#a):not(#b):not(#c) .ak-billett[data-r].da,html:not(#a):not(#b):not(#c) .ak-billett[data-r].da.ce-fertig{--ce-weg:clamp(34px,3.6vw,52px);animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 22vh;animation-delay:0s}
  html:not(#a):not(#b):not(#c) .ak-marke__platte[data-r],html:not(#a):not(#b):not(#c) .ak-marke__platte[data-r].da,html:not(#a):not(#b):not(#c) .ak-marke__platte[data-r].da.ce-fertig{--ce-weg:clamp(44px,5vw,72px);animation:ce-zug cubic-bezier(.3,.3,.45,1) both;animation-duration:auto;animation-timeline:view();animation-range:cover 0% cover 32vh;animation-delay:0s}
}

/* ==================================================================================================================================
   HUNDESEITE («Ferien mit Hund», hunde.html), Robert 13.10.2026 23:10–23:15 mit vier Bildschirmfotos:
   «das Foto rechts als Porträt im Luxushotel-Stil, Mitarbeiter des Monats, auf Englisch» · «die drei Sachen als Ticket» · «der Bilderrahmen
   schliesst mit dem Text oben und dem Ticket unten ab» · «Alles schon da: komplett überarbeiten, luxuriös, animiert» · «Hundespeisekarte:
   vier Bilder wie die Speisen, im Bogen, alle vier in einer Reihe, ohne Klicken» · «Damit sich alle wohlfühlen: viel luxuriöser».
   Bausteine des Hauses bleiben: .ak-zwei (Bild so hoch wie die Textspalte), .ak-billett (langes Billett), .gk (Bogen-Karte der Speisen),
   .edel__raute. Neu und einzeln löschbar: .hd-portraet, .hd-anh, .hd-karte, .hd-brief. Bewegt wird nur translate, scale, rotate.
   ================================================================================================================================== */

/* 1 · Aris im vergoldeten Rahmen: Leiste mit Gehrung (vier Kantenfarben), Kehle, Passepartout mit Schrägschnitt, Messingschild */
.hd-portraet{margin:0;display:flex;min-width:0}
.hd-portraet__leiste{--lw:clamp(14px,1.6vw,25px);position:relative;flex:1;display:flex;min-width:0;margin:7px;padding:clamp(5px,.5vw,8px);border:var(--lw) solid;border-color:#f3e2ac #cfb06b #9a7936 #dcc282;border-radius:2px;
  background:linear-gradient(135deg,#5f4719 0%,#a98843 28%,#6f5522 52%,#b89850 76%,#5f4719 100%);
  box-shadow:inset 0 0 0 1px rgba(46,32,6,.7),inset 0 0 0 2px rgba(255,238,184,.42),0 0 0 1px #6a5120,0 0 0 3px #ecd8a0,0 0 0 4px #7b5f27,0 0 0 6px #c5a55e,0 0 0 7px #4f3c14,
    0 3px 0 7px #3d2e0f,0 24px 28px -14px rgba(12,21,38,.5),0 60px 66px -36px rgba(12,21,38,.62)}
.hd-portraet__leiste::before{content:'';position:absolute;inset:calc(-1*var(--lw));pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,0) 17%,rgba(255,255,255,0) 44%,rgba(255,248,214,.22) 56%,rgba(60,40,5,0) 68%,rgba(60,40,5,.24) 100%)}
.hd-portraet__pp{position:relative;z-index:1;outline:2px dotted rgba(255,236,172,.78);outline-offset:1px;flex:1;display:flex;flex-direction:column;min-width:0;padding:clamp(18px,2.2vw,36px) clamp(18px,2.2vw,36px) 0;border:clamp(3px,.34vw,5px) solid;border-color:#8e6f30 #d9bf7e #f3e2ad #b3924c;
  background:linear-gradient(180deg,#f3ead6 0%,#faf4e6 16%,#f6eedd 100%);box-shadow:inset 0 10px 16px -10px rgba(48,34,8,.55),inset 8px 0 14px -10px rgba(48,34,8,.3)}
.hd-portraet .rahmen__k{flex:1;aspect-ratio:5/4;border-radius:0;background:#1a1408;box-shadow:0 0 0 1px rgba(58,41,10,.42),0 0 0 clamp(4px,.4vw,6px) #fffaf0,0 0 0 calc(clamp(4px,.4vw,6px) + 1px) rgba(110,88,44,.34)}
.hd-portraet .rahmen__k img{position:absolute;inset:0;object-position:58% 30%}
.hd-portraet__schild{position:relative;align-self:center;display:grid;justify-items:center;gap:3px;margin:clamp(16px,1.7vw,26px) 0 clamp(14px,1.5vw,22px);padding:clamp(8px,.8vw,12px) clamp(36px,3.4vw,54px) clamp(7px,.7vw,10px);border-radius:3px;
  background:linear-gradient(180deg,#f7ebc9 0%,#e6d3a2 30%,#d2ba80 74%,#bfa367 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(110,88,44,.55),inset 0 -2px 0 rgba(110,88,44,.26),0 1px 0 #6d582b,0 5px 7px -3px rgba(40,28,6,.55)}
.hd-portraet__schild::before,.hd-portraet__schild::after{content:'';position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff8de 0,#ecd9a6 24%,#b89c5e 58%,#806732 100%);box-shadow:0 0 0 1px rgba(70,52,16,.45),0 1px 1px rgba(40,28,6,.5)}
.hd-portraet__schild::before{left:clamp(12px,1.1vw,17px)}.hd-portraet__schild::after{right:clamp(12px,1.1vw,17px)}
.hd-portraet__schild b{font-family:var(--serif);font-weight:400;font-size:clamp(.74rem,1.02vw,1.08rem);line-height:1.2;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;white-space:nowrap;color:#33270c;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hd-portraet__schild i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:clamp(9.5px,.8vw,11.5px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#5d4a1f;text-shadow:0 1px 0 rgba(255,255,255,.5)}
@media (min-width:861px){
  .hd-portraet .rahmen__k{aspect-ratio:auto;min-height:260px}
  .hd-aris.ak-zwei--bild>.t{grid-column:1/7}.hd-aris.ak-zwei--bild>.b{grid-column:7/-1}
}
@media (max-width:860px){.hd-aris>.b{margin-top:6px}}
@media (max-width:560px){
  .hd-portraet__pp{padding:14px 12px 0}
  .hd-portraet__schild{max-width:100%;padding-left:clamp(18px,6vw,26px);padding-right:clamp(18px,6vw,26px)}
  .hd-portraet__schild b{font-size:clamp(8.5px,2.85vw,12px);letter-spacing:.1em;text-indent:.1em}
  .hd-portraet__schild::before,.hd-portraet__schild::after{width:6px;height:6px;margin-top:-3px}.hd-portraet__schild::before{left:7px}.hd-portraet__schild::after{right:7px}
}

/* 2 · «Alles schon da.»: drei Türanhänger des Hauses an Messingknäufen. Der Knauf steht still, der Anhänger pendelt mit dem Scrollen in seine Ruhe.
   Das Loch ist gemalt (Farbe des Abschnitts), damit der Schatten des Anhängers bleibt und keine Maske über etwas Bewegtem liegt. */
.hd-wand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,44px);align-items:stretch;padding-top:6px}
.hd-anh{position:relative;display:flex;min-width:0;--loch:clamp(52px,4.5vw,68px);--oben:clamp(20px,1.9vw,30px);--dreh:50% calc(var(--oben) + var(--loch)*.34)}
.hd-anh__knauf{position:absolute;z-index:2;left:50%;top:calc(var(--oben) - 3px);width:calc(var(--loch)*.72);height:calc(var(--loch)*.72);margin-left:calc(var(--loch)*-.36);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 30%,#fffbe8 0,#f0dfae 15%,#c7a961 50%,#8c7036 80%,#5c4718 100%);
  box-shadow:inset 0 0 0 1px rgba(70,52,16,.5),inset 0 0 0 5px rgba(255,244,205,.14),0 5px 7px -2px rgba(3,11,28,.7),0 14px 16px -9px rgba(3,11,28,.55)}
.hd-anh__dreh{flex:1;display:flex;min-width:0;transform-origin:var(--dreh)}
.hd-anh__k{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;transform-origin:var(--dreh);
  padding:calc(var(--oben) + var(--loch) + clamp(16px,1.7vw,26px)) clamp(22px,2.5vw,42px) clamp(30px,3.2vw,50px);border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(circle calc(var(--loch)/2 + 2px) at 50% calc(var(--oben) + var(--loch)/2),var(--creme) calc(100% - 3.5px),#8f7335 calc(100% - 3px),#ecd9a6 calc(100% - 1px),rgba(236,217,166,0) 100%),
    radial-gradient(130% 90% at 20% 0%,#1e4583 0%,#10305f 52%,#081a3a 100%),#0f2a55;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(220,198,143,.62),0 3px 0 #030b1c,0 46px 52px -36px rgba(12,21,38,.72)}
.hd-anh__k::before{content:'';position:absolute;inset:9px;border:1px solid rgba(220,198,143,.34);border-radius:calc(var(--r-xl) - 9px);pointer-events:none}
.hd-anh__z{display:grid;justify-items:center}
.hd-anh__z svg{width:clamp(54px,4.7vw,78px);height:auto;aspect-ratio:1680/1084;color:transparent;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
.hd-anh__t{margin:clamp(12px,1.3vw,20px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.46rem,2.1vw,2.2rem);line-height:1.14;letter-spacing:0;color:#fbf3e2;text-wrap:balance}
.hd-anh__raute{margin:clamp(14px,1.5vw,22px) 0 clamp(6px,.8vw,12px)}
.hd-anh__raute::before,.hd-anh__raute::after{width:clamp(30px,3.4vw,56px)}
.hd-anh__l{list-style:none;align-self:stretch;margin:0;padding:0}
.hd-anh__l li,.hd-anh__ort{margin:0;padding:clamp(11px,1.15vw,16px) 2px;font-size:clamp(1rem,1.1vw,1.14rem);line-height:1.5;color:rgba(255,255,255,.86);text-wrap:balance}
.hd-anh__l li+li{border-top:1px solid rgba(220,198,143,.2)}
.hd-anh__ort b{display:block;margin-bottom:4px;font-family:var(--serif);font-weight:400;font-size:clamp(1.14rem,1.36vw,1.4rem);line-height:1.2;color:#fff}
.hd-anh__tel{margin:2px 0 clamp(16px,1.7vw,24px);font-family:var(--serif);font-size:clamp(1.24rem,1.66vw,1.72rem);line-height:1.3;font-variant-numeric:lining-nums;white-space:nowrap;color:var(--gold);box-shadow:inset 0 -1px 0 rgba(220,198,143,.5)}
.hd-anh__klein{align-self:stretch;margin:auto 0 0;padding-top:clamp(13px,1.3vw,18px);border-top:1px solid rgba(220,198,143,.2);font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.7);text-wrap:balance}
@keyframes hd-pendel{0%{rotate:var(--hd-w,5deg)}56%{rotate:calc(var(--hd-w,5deg)*-.2)}82%{rotate:calc(var(--hd-w,5deg)*.05)}100%{rotate:0deg}}
@supports (animation-timeline:view()){
  .hd-anh__dreh{animation:hd-pendel linear both;animation-timeline:view();animation-range:entry 0% cover 44%}
  .hd-anh:nth-child(2) .hd-anh__dreh{--hd-w:-4.2deg;animation-range:entry 8% cover 49%}
  .hd-anh:nth-child(3) .hd-anh__dreh{--hd-w:5.6deg;animation-range:entry 16% cover 54%}
}
@media (hover:hover){
  .hd-anh__k{transition:rotate 1.3s var(--feder-leise)}
  .hd-anh:hover .hd-anh__k{rotate:1.5deg}.hd-anh:nth-child(2):hover .hd-anh__k{rotate:-1.5deg}
}
@media (max-width:860px){
  .hd-wand{grid-template-columns:minmax(0,1fr);gap:clamp(26px,6vw,40px);max-width:460px;margin-inline:auto}
  .hd-anh{--loch:56px;--oben:22px}
  .hd-anh__k{padding-left:26px;padding-right:26px}
}

/* 3 · Hundespeisekarte: die vier Gerichte in den Bögen der Speisekarte, alle vier in einer Reihe, nichts zum Blättern */
.hd-karte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.3vw,40px);align-items:stretch}
.hd-karte .gk{width:auto;min-width:0}
.hd-karte .gk h4{font-size:clamp(1.12rem,1.5vw,1.5rem)}
.hd-karte .gk>p{margin-bottom:14px;font-size:clamp(.94rem,1.02vw,1.04rem)}
.hd-karte .gk__p i{font-size:clamp(1.06rem,1.3vw,1.3rem)}
.hd-karte__quelle{max-width:62ch;margin:clamp(28px,3.2vw,48px) auto 0;text-align:center;opacity:1;color:rgba(255,255,255,.62)}
@media (max-width:760px){
  .hd-karte{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}
  .hd-karte .gk h4{margin:14px 2px 0;font-size:1.08rem}.hd-karte .gk>p{margin:6px 2px 12px;font-size:.88rem;line-height:1.44}
}

/* 4 · «Damit sich alle wohlfühlen.»: die Hausregeln als Briefbogen des Hauses, darunter liegt ein zweiter Bogen, unten rechts der Stempel von Aris */
.hd-brief{--st:clamp(86px,8.6vw,136px);--su:clamp(18px,2.2vw,36px);position:relative;isolation:isolate;padding:clamp(30px,3.4vw,54px) clamp(24px,4.2vw,72px) calc(var(--st) + var(--su) + 4px);color:var(--tinte)}
.hd-brief::before,.hd-brief::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:5px}
.hd-brief::before{background:#efe4cc;box-shadow:inset 0 0 0 1px rgba(110,88,44,.18),0 30px 38px -30px rgba(12,21,38,.42);rotate:1.5deg;translate:7px 5px}
.hd-brief::after{background:linear-gradient(180deg,#fffbf1,#f7efde);box-shadow:inset 0 0 0 1px rgba(110,88,44,.16),0 1px 0 #cbbd9c,0 44px 54px -38px rgba(12,21,38,.6)}
.hd-brief__kopf{display:grid;justify-items:center;gap:clamp(14px,1.5vw,20px);margin-bottom:clamp(8px,1vw,14px);color:var(--taupe)}
.hd-brief__kopf svg{width:clamp(56px,5vw,82px);height:auto}
.hd-brief__kopf::after{content:'';width:clamp(74px,8.4vw,128px);height:4px;border-block:1px solid rgba(138,117,69,.62)}
.hd-brief__l{list-style:none;margin:0;padding:0;text-align:center}
.hd-brief__l li{position:relative;max-width:46ch;margin-inline:auto;padding:clamp(13px,1.36vw,19px) 0;font-family:'Baskerville Fein',var(--serif);font-weight:400;font-size:clamp(1.04rem,1.3vw,1.32rem);line-height:1.52;letter-spacing:0;text-wrap:balance}
.hd-brief__l li+li::before{content:'';position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;background:var(--taupe);opacity:.72;rotate:45deg}
.hd-stempel{position:absolute;right:clamp(20px,3.2vw,56px);bottom:var(--su);width:var(--st);height:auto;color:#12305e;opacity:.88;rotate:-11deg;pointer-events:none}
.hd-stempel text{font-family:var(--mono);font-weight:500;fill:currentColor}
@keyframes hd-druck{0%{scale:1.85;opacity:0}30%{opacity:.88}72%{scale:.965}100%{scale:1;opacity:.88}}
@supports (animation-timeline:view()){.hd-stempel{animation:hd-druck linear both;animation-timeline:view();animation-range:entry 100% cover 36%}}
@media (max-width:860px){.hd-brief::before{rotate:.6deg;translate:3px 4px}}
@media (min-width:861px){.hd-regeln{align-items:stretch}.hd-regeln>.t{grid-column:1/6;display:flex;flex-direction:column}.hd-regeln>.b{grid-column:6/-1}}
/* 4a · Unten links ein Abzug von Aris im Gras (Foto aus dem Faltblatt des Hauses); die Überschrift bleibt oben stehen (Robert 14.10.2026) */
.hd-abzug{--hd-w:-3.4deg;align-self:flex-start;width:clamp(220px,25vw,400px);margin:clamp(40px,5vw,80px) 0 clamp(10px,1.4vw,22px) clamp(6px,2.4vw,44px);margin-top:auto;padding-top:clamp(40px,5vw,80px)}
.hd-abzug__k{display:block;padding:clamp(9px,.9vw,14px) clamp(9px,.9vw,14px) clamp(30px,3.2vw,52px);border-radius:3px;background:#fffbf1;box-shadow:inset 0 0 0 1px rgba(110,88,44,.16),0 1px 0 #cbbd9c,0 34px 42px -30px rgba(12,21,38,.55);rotate:var(--hd-w)}
.hd-abzug img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 34%;border-radius:1px}
@keyframes hd-abzug{0%{rotate:calc(var(--hd-w)*-2.2);translate:0 clamp(40px,6vw,96px)}100%{rotate:var(--hd-w);translate:0 0}}
@supports (animation-timeline:view()){.hd-abzug__k{animation:hd-abzug linear both;animation-timeline:view();animation-range:entry 0% cover 40%}}
html.ce-ruhig .hd-abzug__k{animation:none}
@media (prefers-reduced-motion:reduce){.hd-abzug__k{animation:none}}
@media print{.hd-abzug__k{animation:none}}
@media (max-width:860px){.hd-abzug{--hd-w:-2.4deg;align-self:center;width:min(62vw,280px);margin:34px auto 6px;padding-top:0}}

/* ohne Bewegung (Systemwunsch, ?nomotion) und im Druck */
html.ce-ruhig .hd-anh__dreh,html.ce-ruhig .hd-stempel{animation:none}html.ce-ruhig .hd-anh__k{transition:none;rotate:none}
@media (prefers-reduced-motion:reduce){.hd-anh__dreh,.hd-stempel{animation:none}.hd-anh__k{transition:none;rotate:none!important}}
@media print{.hd-anh__dreh,.hd-stempel{animation:none}}

/* Kaminbar, Nachtrag 23:30 (Robert: «das Ticket etwas höher, unter den Text, und das muss auch eher reinschweben»; «Gut zu wissen: viel luxuriöser und edler, vielleicht wie ein langes, breites Ticket»).
   Beide Billette stehen unten in ihrem Abschnitt und kamen deshalb zuletzt an: kurzer Weg, und nach einem Viertel Schirm sind sie an ihrem Platz. */
html:not(#a):not(#b) #pause .sb-pause__billett[data-r],html:not(#a):not(#b) #gut-zu-wissen .sb-lang[data-r]{--ce-weg:clamp(40px,4.4vw,64px);--ce-kl:.965}
@supports (animation-timeline:view()){html:not(#a):not(#b) #pause .sb-pause__billett[data-r],html:not(#a):not(#b) #gut-zu-wissen .sb-lang[data-r]{animation-range:cover 0% cover 24vh,normal;animation-delay:0s,0s}}
/* «Gut zu wissen» als ein langes Billett: drei Teile nebeneinander, an jeder Naht oben und unten eine echte Kerbe (aus beiden Nachbarn je ein Viertelkreis geschnitten),
   gestrichelte Perforation in Gold, doppelte Goldlinie des Hauses, kein Schatten darunter, kein Zeichen in der Mitte. Am Handy stehen die Teile untereinander, die Kerben links und rechts. */
#gut-zu-wissen .kopfmitte .lauf{margin-top:clamp(14px,1.6vw,22px)}
.sb-lang{--k:15px;--gl:rgba(220,198,143,.72);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));color:#fff}
.sb-lang__teil{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,4.4vw,70px) clamp(22px,3vw,52px) clamp(38px,4.2vw,64px);border:1px solid var(--gl);background-color:#0f2a55;background-origin:border-box;
  /* je Ecke ein Ausschnitt (m) und sein Goldring (g). Jeder Teil nennt nur die Ecken, die er wirklich schneidet: ein Verlauf mit Radius 0 macht den ganzen Teil in Safari unsichtbar (Robert 23:48). */
  --m-ol:radial-gradient(circle var(--k) at 0 0,transparent calc(var(--k) - .5px),#000 var(--k));--m-or:radial-gradient(circle var(--k) at 100% 0,transparent calc(var(--k) - .5px),#000 var(--k));
  --m-ul:radial-gradient(circle var(--k) at 0 100%,transparent calc(var(--k) - .5px),#000 var(--k));--m-ur:radial-gradient(circle var(--k) at 100% 100%,transparent calc(var(--k) - .5px),#000 var(--k));
  --g-ol:radial-gradient(circle var(--k) at 0 0,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px));
  --g-or:radial-gradient(circle var(--k) at 100% 0,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px));
  --g-ul:radial-gradient(circle var(--k) at 0 100%,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px));
  --g-ur:radial-gradient(circle var(--k) at 100% 100%,transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px));
  --grund:linear-gradient(180deg,#12305e,#0b2148);background-image:var(--grund);-webkit-mask-composite:source-in;mask-composite:intersect}
.sb-lang__teil:nth-child(2){background-image:var(--g-ol),var(--g-or),var(--g-ul),var(--g-ur),var(--grund);-webkit-mask-image:var(--m-ol),var(--m-or),var(--m-ul),var(--m-ur);mask-image:var(--m-ol),var(--m-or),var(--m-ul),var(--m-ur)}
.sb-lang__teil::before{content:'';position:absolute;inset:7px;border:1px solid rgba(220,198,143,.36);pointer-events:none}
.sb-lang__teil h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.12;color:var(--weiss);text-wrap:balance}
.sb-lang__teil .edel__raute{margin:clamp(16px,1.8vw,26px) 0 clamp(14px,1.6vw,22px)}
.sb-lang__teil .edel__raute::before,.sb-lang__teil .edel__raute::after{width:clamp(30px,3.4vw,56px)}
.sb-lang__teil p{margin:0;max-width:34ch;font-size:clamp(1rem,1.1vw,1.14rem);line-height:1.7;color:rgba(255,255,255,.84);text-wrap:pretty}
@media (min-width:861px){
  .sb-lang__teil:first-child{background-image:var(--g-or),var(--g-ur),var(--grund);-webkit-mask-image:var(--m-or),var(--m-ur);mask-image:var(--m-or),var(--m-ur);border-right:0;border-radius:var(--r-l) 0 0 var(--r-l)}
  .sb-lang__teil:nth-child(2){border-left:0;border-right:0}
  .sb-lang__teil:last-child{background-image:var(--g-ol),var(--g-ul),var(--grund);-webkit-mask-image:var(--m-ol),var(--m-ul);mask-image:var(--m-ol),var(--m-ul);border-left:0;border-radius:0 var(--r-l) var(--r-l) 0}
  .sb-lang__teil:first-child::before{right:0;border-right:0;border-radius:calc(var(--r-l) - 7px) 0 0 calc(var(--r-l) - 7px)}
  .sb-lang__teil:nth-child(2)::before{left:0;right:0;border-left:0;border-right:0}
  .sb-lang__teil:last-child::before{left:0;border-left:0;border-radius:0 calc(var(--r-l) - 7px) calc(var(--r-l) - 7px) 0}
  .sb-lang__teil+.sb-lang__teil::after{content:'';position:absolute;left:-1px;top:calc(var(--k) + 12px);bottom:calc(var(--k) + 12px);border-left:2px dashed rgba(220,198,143,.6)}
}
@media (max-width:860px){
  .sb-lang{grid-template-columns:minmax(0,1fr)}
  .sb-lang__teil{padding:38px 26px 36px}
  .sb-lang__teil:first-child{background-image:var(--g-ul),var(--g-ur),var(--grund);-webkit-mask-image:var(--m-ul),var(--m-ur);mask-image:var(--m-ul),var(--m-ur);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0}
  .sb-lang__teil:nth-child(2){border-top:0;border-bottom:0}
  .sb-lang__teil:last-child{background-image:var(--g-ol),var(--g-or),var(--grund);-webkit-mask-image:var(--m-ol),var(--m-or);mask-image:var(--m-ol),var(--m-or);border-top:0;border-radius:0 0 var(--r-l) var(--r-l)}
  .sb-lang__teil:first-child::before{bottom:0;border-bottom:0;border-radius:calc(var(--r-l) - 7px) calc(var(--r-l) - 7px) 0 0}
  .sb-lang__teil:nth-child(2)::before{top:0;bottom:0;border-top:0;border-bottom:0}
  .sb-lang__teil:last-child::before{top:0;border-top:0;border-radius:0 0 calc(var(--r-l) - 7px) calc(var(--r-l) - 7px)}
  .sb-lang__teil+.sb-lang__teil::after{content:'';position:absolute;top:-1px;left:calc(var(--k) + 12px);right:calc(var(--k) + 12px);border-top:2px dashed rgba(220,198,143,.6)}
}
/* Die Bögen der Karte (essen-trinken.html und kaminbar.html) haben keinen Schatten unter den Kacheln: ohne den negativen Abstand der Bänder (Zeile «.band{…margin-bottom:-48px}»),
   sonst liegt der Laufbalken quer über den Preisen und der Knopf darunter stösst an die Karten. */
.kbrett__fach .band{margin-bottom:0}
/* Nähte des langen Billetts: die Teile überlappen um einen Pixel, damit bei krummen Breiten kein heller Strich des Untergrunds durchscheint */
@media (min-width:861px){.sb-lang__teil+.sb-lang__teil{margin-left:-1px}}
@media (max-width:860px){.sb-lang__teil+.sb-lang__teil{margin-top:-1px}}


/* Dachterrasse, «Ungestörtes Panorama.» (Robert 14.10.2026 00:16: «die Kachel in Blau, und unten rechts Stockwerk, Gebäude, Blick auf als Ticket»):
   die Tafel als Schild des Hauses in Nachtblau mit doppelter Goldlinie (wie .ak-schild), heller Knopf mit blauem Knauf; die drei Angaben als langes
   Billett (.ak-billett), unten bündig mit der Tafel. Block einzeln löschbar. */
.tafel.tafel--blau{position:relative;color:#fff;background:radial-gradient(130% 90% at 20% 0%,#1e4583 0%,#10305f 52%,#081a3a 100%),#0f2a55;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(220,198,143,.62),0 3px 0 #030b1c,0 40px 54px -34px rgba(12,21,38,.8)}
.tafel.tafel--blau::before{content:'';position:absolute;inset:8px;border:1px solid rgba(220,198,143,.34);border-radius:calc(var(--r-m) - 8px);pointer-events:none}
.tafel.tafel--blau .d3{color:#fbf3e2}.tafel.tafel--blau .d3 em{color:var(--gold)}
.tafel.tafel--blau .lauf{color:rgba(255,255,255,.82)}
.tafel.tafel--blau .kn{--o:#fbf3e2;--m:#e8dbbf;--u:#cfbd98;--t:var(--tinte);--licht:rgba(255,255,255,.92);--kante:rgba(110,88,44,.38);--tief:rgba(0,0,0,.6);--ko:#1e3c72;--ku:#050f22;--kt:var(--weiss);--klicht:rgba(255,255,255,.24)}
.tafel.tafel--blau .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
.sb-pano__billett{justify-self:end;width:100%;max-width:800px;padding-top:0;padding-bottom:3px}
@media (max-width:860px){.sb-pano__billett{justify-self:stretch;max-width:none;padding-top:8px}}

/* Dachterrasse, «Über den Dächern von Interlaken.» (Robert 14.10.2026 00:20: «die Bilder grösser, das muss mehr wie ein Atelier wirken»):
   vier grosse Abzüge in zwei Reihen statt einer Reihe kleiner Kacheln, breit und schmal im Wechsel (7 zu 5, dann 5 zu 7), je Reihe gleich hoch,
   der Bildname darunter. Das breite Bild gibt die Höhe (3:2), das schmale füllt sie. Block einzeln löschbar. */
.sb-atelier{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(22px,2.6vw,44px) clamp(14px,1.8vw,30px)}
.sb-atelier>figure{display:flex;flex-direction:column;min-width:0;margin:0;grid-column:1/8}
.sb-atelier>figure:nth-child(2){grid-column:8/-1}.sb-atelier>figure:nth-child(3){grid-column:1/6}.sb-atelier>figure:nth-child(4){grid-column:6/-1}
.sb-atelier .rahmen{flex:1;display:flex;min-height:0}.sb-atelier .rahmen__k{flex:1;min-width:0}
.sb-atelier>figure:nth-child(2) .rahmen__k,.sb-atelier>figure:nth-child(3) .rahmen__k{aspect-ratio:auto}
.sb-atelier>figure:nth-child(2) .rahmen__k img,.sb-atelier>figure:nth-child(3) .rahmen__k img{position:absolute;inset:0}
.sb-atelier>figure:nth-child(2) img{object-position:68% 50%}
.sb-atelier .legende{flex:none}
@media (max-width:860px){
  .sb-atelier{grid-template-columns:minmax(0,1fr);gap:22px}
  .sb-atelier>figure:nth-child(n){grid-column:1/-1}
  .sb-atelier>figure:nth-child(n) .rahmen__k{aspect-ratio:3/2}
}

/* Dachterrasse, «Unter dem Sternenhimmel.» (Robert 14.10.2026 00:17: «die Bilder grösser, Package/Buchbar/Suite als Ticket, die Knöpfe mittig, oben
   Aarmühle-Penthouse-Suite, darunter Package Stars Only; das Bild schliesst unten mit dem Knopf Package Stars Only ab und oben mit der Überschrift»):
   Bildgruppe 7 von 12 Spalten und so hoch wie die Textspalte, ein grosses Foto oben, zwei darunter (wie Kaminbar). Block einzeln löschbar. */
.sb-sterne__kn{flex-direction:column;align-items:center;gap:14px;margin-top:clamp(20px,2.2vw,30px)}
.sb-sterne__billett .ak-billett dd{font-size:clamp(1rem,1.2vw,1.3rem)}
@media (min-width:861px){
  .sb-sterne>.t{display:flex;flex-direction:column}.sb-sterne>.b{padding-top:calc(clamp(1.9rem,3.2vw,3.3rem)*.12)}
  .sb-sterne>.t>.sb-sterne__billett{margin-top:auto}.sb-sterne>.t>.lauf{margin-bottom:clamp(8px,1vw,16px)}
  .sb-sterne>.b>.zmos{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.62fr) minmax(0,1fr);min-height:clamp(480px,46vw,720px)}
  .sb-sterne>.b>.zmos>.zmos__b:first-child{grid-row:auto;grid-column:1/-1}
}
@media (min-width:961px){.zwei--um.sb-sterne>.t{grid-column:8/-1}.zwei--um.sb-sterne>.b{grid-column:1/8}}

/* ==================================================================================================================================
   VERANSTALTUNGEN (veranstaltungen.html), Robert 14.10.2026 00:18–00:19 mit zwei Bildschirmfotos:
   «Im Haus»: «komplett anders designen, viel atmosphärischer, mehr Lust auf die Veranstaltung, Wow-Effekt, High-End-Animationen, Bilder».
   «In der Region»: «ebenfalls in so einem Kalender, richtig schön mit Bildern, edel, luxuriös, zum Stil eines Luxushotels».
   Im Haus: je Fest eine Bühne, grosses Foto (gleitet wie überall), blaue Tafel des Hauses halb darüber, oben ein Kalenderblatt mit dem ersten Tag,
   das sich mit dem Scrollen herunterklappt. In der Region: Jahreskalender, je Monat ein Blatt mit Foto der Jahreszeit und den Terminen.
   Bewegt wird nur transform, translate, scale. Blöcke einzeln löschbar; die alten Karten (.staffel--termin) und die Liste (.sb-termine) bleiben im Stil stehen.
   ================================================================================================================================== */
.sb-feste{display:grid;gap:clamp(96px,10.5vw,170px);padding-bottom:clamp(40px,4.6vw,70px)}
.sb-fest{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.sb-fest__b{position:relative;grid-column:1/10;grid-row:1;margin:0;min-width:0}
.sb-fest__b .rahmen__k{aspect-ratio:16/9.6;border-radius:var(--r-xl);box-shadow:0 0 0 1px rgba(138,117,69,.3),0 46px 56px -34px rgba(40,30,10,.62)}
.sb-fest__t{grid-column:8/-1;grid-row:1;z-index:2;margin-bottom:calc(-1*clamp(40px,4.4vw,70px));padding:clamp(26px,2.8vw,44px) clamp(24px,2.8vw,44px) clamp(28px,3vw,46px);gap:14px}
.sb-fest--um .sb-fest__b{grid-column:4/-1}.sb-fest--um .sb-fest__t{grid-column:1/6}
.sb-fest__wann{margin:0;font-family:var(--mono);font-weight:600;font-size:clamp(10.5px,.84vw,12px);line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sb-fest__wann small{font:inherit;color:rgba(255,255,255,.66)}.sb-fest__wann small::before{content:'·';margin:0 .7em;color:rgba(220,198,143,.7)}
.sb-fest__t .st__n{margin:0;padding:0;border-radius:0;background:none;box-shadow:none;text-align:left;font-weight:400;letter-spacing:0;font-size:clamp(1.7rem,2.7vw,2.9rem);line-height:1.1;color:#fbf3e2;text-wrap:balance}
.sb-fest__t .gross{margin:2px 0 0;font-size:clamp(1.1rem,1.4vw,1.42rem);line-height:1.38;color:#fbf3e2}
.sb-fest__t .lauf{font-size:clamp(.98rem,1.06vw,1.08rem);line-height:1.62}
.sb-fest__t .kn{margin-top:8px}
/* Kalenderblatt: Papier mit blauem Kopf und zwei Messingnieten, hängt leicht schräg an der Oberkante des Fotos */
.sb-fest__blatt{position:absolute;z-index:3;top:calc(-1*clamp(26px,2.6vw,40px));right:clamp(26px,5vw,84px);display:grid;justify-items:center;width:clamp(100px,9.2vw,140px);padding-bottom:clamp(10px,1vw,15px);border-radius:10px;overflow:hidden;
  color:var(--tinte);background:linear-gradient(180deg,#fffbf0,#f1e6cd);box-shadow:inset 0 0 0 1px rgba(110,88,44,.3),0 2px 0 #a39370,0 22px 26px -14px rgba(12,21,38,.6);rotate:3deg;transform-origin:50% 0}
.sb-fest--um .sb-fest__blatt{right:auto;left:clamp(26px,5vw,84px);rotate:-3deg}
.sb-fest__blatt i{align-self:stretch;padding:clamp(7px,.7vw,10px) 4px clamp(6px,.6vw,9px);font-style:normal;font-family:var(--mono);font-weight:600;font-size:clamp(9.5px,.8vw,11.5px);letter-spacing:.16em;text-indent:.16em;text-align:center;text-transform:uppercase;color:var(--gold);background:linear-gradient(180deg,#1b3d76,#0b2148);box-shadow:inset 0 -1px 0 rgba(220,198,143,.6)}
.sb-fest__blatt b{margin-top:clamp(4px,.5vw,8px);font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,4vw,4.1rem);line-height:1;font-variant-numeric:lining-nums;color:#0b1f40}
.sb-fest__blatt span{margin-top:2px;font-family:var(--mono);font-weight:600;font-size:clamp(9.5px,.78vw,11px);letter-spacing:.22em;text-indent:.22em;color:var(--taupe)}
@keyframes sb-blattfall{0%{transform:perspective(680px) rotateX(-88deg)}62%{transform:perspective(680px) rotateX(9deg)}100%{transform:perspective(680px) rotateX(0deg)}}
@supports (animation-timeline:view()){.sb-fest__blatt{animation:sb-blattfall linear both;animation-timeline:view();animation-range:entry 90% cover 40%}}
@media (max-width:860px){
  .sb-feste{gap:64px}
  .sb-fest{grid-template-columns:minmax(0,1fr)}
  .sb-fest__b,.sb-fest--um .sb-fest__b{grid-column:1/-1}.sb-fest__b .rahmen__k{aspect-ratio:4/3;border-radius:var(--r-l)}
  .sb-fest__t,.sb-fest--um .sb-fest__t{grid-column:1/-1;grid-row:2;margin:-46px 12px 0}
  .sb-fest__blatt,.sb-fest--um .sb-fest__blatt{top:-22px;right:18px;left:auto;rotate:3deg}
}

/* Jahreskalender der Region: je Monat ein Blatt aus Papier, oben das Foto der Jahreszeit, darunter Monat, Jahr und die Termine */
.sb-kal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.7vw,28px);align-items:stretch;margin-top:clamp(30px,3.6vw,56px)}
.sb-monat{display:flex;flex-direction:column;min-width:0;padding:9px 9px clamp(16px,1.6vw,24px);border-radius:var(--r-l);color:var(--tinte);background:linear-gradient(180deg,#fffbf0,#f1e6cd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(110,88,44,.2),0 4px 0 #a39370,0 40px 50px -34px rgba(0,0,0,.9)}
.sb-monat__b{position:relative;margin:0;aspect-ratio:4/3;border-radius:calc(var(--r-l) - 9px);overflow:hidden;background:var(--creme);transform:translateZ(0)}
.sb-monat__b .rahmen__k{position:absolute;inset:0;display:block;border-radius:0}
.sb-monat__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:clamp(14px,1.5vw,22px) clamp(8px,.9vw,14px) 0;padding-bottom:clamp(10px,1vw,14px);border-bottom:3px double rgba(138,117,69,.5)}
.sb-monat__kopf h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.9vw,2rem);line-height:1.1;letter-spacing:0;color:#0b1f40}
.sb-monat__kopf span{font-family:var(--mono);font-weight:600;font-size:clamp(10.5px,.84vw,12px);letter-spacing:.2em;color:var(--taupe)}
.sb-monat__l{list-style:none;margin:0 clamp(8px,.9vw,14px);padding:0}
.sb-monat .sb-termin{padding:clamp(11px,1.1vw,15px) 0;gap:5px;border-bottom:1px solid rgba(12,21,38,.12)}
.sb-monat .sb-termin:last-child{border-bottom:0;padding-bottom:0}
.sb-monat .sb-termin b{font-size:clamp(1.02rem,1.18vw,1.2rem);line-height:1.22;text-wrap:balance}
.sb-monat .sb-termin span{font-size:clamp(10px,.78vw,11px);line-height:1.5;letter-spacing:.1em;color:var(--taupe)}
.sb-monat:not(:has(.sb-termin:not(.aus))){display:none}
@media (max-width:1100px){.sb-kal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sb-kal{grid-template-columns:minmax(0,1fr)}.sb-monat__b{aspect-ratio:16/9}}

html.ce-ruhig .sb-fest__blatt{animation:none}
@media (prefers-reduced-motion:reduce){.sb-fest__blatt{animation:none}}
@media print{.sb-fest__blatt{animation:none}}

/* Billette, Fassung 2 (Robert 14.10.2026: «die Tickets noch ein bisschen grösser und noch ein bisschen schöner, luxuriöser»), gilt NUR für das Billett «Stockwerk, Gebäude, Blick auf» der Dachterrasse (.sb-pano__billett); Robert 14.10.2026 danach: «du solltest nur diese spezifischen, die ich dir geschickt habe, ändern». Alle anderen .ak-billett bleiben in Fassung 1:
   höher und grössere Schrift, das Blau mit Lichtkante und der Tapete des Hauses als feines Muster, Goldlinien kräftiger und doppelt, Perforation als
   goldene Punktlinie, unter jeder Zeile eine kurze Goldlinie. Weiter kein Schatten darunter, kein Zeichen in der Mitte. Block einzeln löschbar. */
.sb-pano__billett .ak-billett{--k:14px;--gl:rgba(228,206,150,.9);row-gap:clamp(10px,1vw,14px);padding:clamp(30px,3.1vw,46px) 0 clamp(28px,2.9vw,42px);border-radius:20px;
  --ak-grund:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 30%,rgba(3,10,26,0) 68%,rgba(3,10,26,.3) 100%),radial-gradient(120% 150% at 16% 0%,rgba(34,76,142,.84) 0%,rgba(16,48,95,.84) 48%,rgba(8,26,58,.9) 100%),url(../img/tapete-navy.webp?v=ba8679c1) 50% 50%/340px auto,#0b2148;
  box-shadow:inset 0 0 0 1px var(--gl),inset 0 0 0 2.5px rgba(5,14,34,.55)}
.sb-pano__billett .ak-billett::before{inset:7px;border-color:rgba(228,206,150,.62);border-radius:14px}
.sb-pano__billett .ak-billett::after{content:'';position:absolute;inset:11px;border:1px solid rgba(228,206,150,.24);border-radius:10px;pointer-events:none}
.sb-pano__billett .ak-billett>div{padding:0 clamp(10px,1.3vw,22px)}
.sb-pano__billett .ak-billett>div+div::before{top:calc(var(--k) + 11px);bottom:calc(var(--k) + 11px);border-left:2px dotted rgba(228,206,150,.82)}
.sb-pano__billett .ak-billett dt{font-weight:600;font-size:clamp(10.5px,.88vw,12.5px);letter-spacing:.2em;text-indent:.2em;color:#e9d39c}
.sb-pano__billett .ak-billett dt::after{content:'';display:block;width:clamp(18px,1.8vw,26px);height:1px;margin:clamp(9px,.95vw,13px) auto 0;background:rgba(228,206,150,.72)}
.sb-pano__billett .ak-billett dd{font-size:clamp(1.2rem,1.72vw,1.92rem);line-height:1.14;color:#fdf6e4}
@media (max-width:560px){
  .sb-pano__billett .ak-billett{padding:0}
  .sb-pano__billett .ak-billett>div{padding:22px 28px;gap:8px}
  .sb-pano__billett .ak-billett>div+div::before{top:auto;bottom:auto;border-left:0;border-top:2px dotted rgba(228,206,150,.82)}
  .sb-pano__billett .ak-billett dt{font-size:11px}.sb-pano__billett .ak-billett dt::after{margin-top:9px}.sb-pano__billett .ak-billett dd{font-size:1.42rem}
}

/* Seitenkopf mit einem langen Wort in einer Zeile (Robert 14.10.2026 00:34 zu «Veranstal-/tungen.»: «schau mal, wie das aussieht, wenn du Veranstaltungen ausschreibst») */
.d1.d1--lang{font-size:clamp(1.86rem,5vw,5.1rem);white-space:nowrap;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}

/* Veranstaltungen, Reisedaten als Billett (Robert 14.10.2026 00:36: «dieses Auswahlfeld soll aussehen wie ein Ticket»): links An- und Abreise,
   rechts der Abriss mit den zwei Knöpfen, Kerben oben und unten auf der Perforation. Die Platte samt Kerben liegt auf ::after (Maske nur dort),
   damit Felder und Knöpfe frei bleiben. Kein Schatten darunter. Am Handy liegt der Abriss unten, Kerben links und rechts. Block einzeln löschbar. */
form.blatt.sb-reise.sb-reise--billett{--k:14px;--abriss:clamp(290px,26vw,350px);--gl:rgba(228,206,150,.9);
  --ring:transparent calc(var(--k) - .5px),var(--gl) var(--k),var(--gl) calc(var(--k) + 1px),transparent calc(var(--k) + 1.5px);
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--abriss);align-items:center;max-width:1060px;padding:0;border-radius:20px;background:none;box-shadow:none}
form.blatt.sb-reise--billett::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 0,var(--ring)),radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 100%,var(--ring)),
    linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 30%,rgba(3,10,26,0) 68%,rgba(3,10,26,.3) 100%),radial-gradient(120% 150% at 16% 0%,rgba(34,76,142,.84) 0%,rgba(16,48,95,.84) 48%,rgba(8,26,58,.9) 100%),url(../img/tapete-navy.webp?v=ba8679c1) 50% 50%/340px auto,#0b2148;
  box-shadow:inset 0 0 0 1px var(--gl),inset 0 0 0 2.5px rgba(5,14,34,.55);
  -webkit-mask:radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--k) at calc(100% - var(--abriss)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
form.blatt.sb-reise--billett::before{inset:7px;border:1px solid rgba(228,206,150,.62);border-radius:14px}
.sb-reise--billett .felder{margin:0;padding:clamp(28px,3vw,44px) clamp(24px,2.8vw,42px);gap:12px}
.sb-reise--billett .kn-reihe{position:relative;align-self:stretch;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:12px;margin:0;padding:clamp(24px,2.6vw,36px) 20px}
.sb-reise--billett .kn-reihe::before{content:'';position:absolute;left:-1px;top:calc(var(--k) + 11px);bottom:calc(var(--k) + 11px);border-left:2px dotted rgba(228,206,150,.82);pointer-events:none}
@media (max-width:760px){
  form.blatt.sb-reise.sb-reise--billett{--ah:176px;grid-template-columns:minmax(0,1fr);max-width:460px}
  form.blatt.sb-reise--billett::after{
    background:radial-gradient(circle var(--k) at 0 calc(100% - var(--ah)),var(--ring)),radial-gradient(circle var(--k) at 100% calc(100% - var(--ah)),var(--ring)),
      linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 30%,rgba(3,10,26,0) 68%,rgba(3,10,26,.3) 100%),radial-gradient(120% 150% at 16% 0%,rgba(34,76,142,.84) 0%,rgba(16,48,95,.84) 48%,rgba(8,26,58,.9) 100%),url(../img/tapete-navy.webp?v=ba8679c1) 50% 50%/340px auto,#0b2148;
    -webkit-mask:radial-gradient(circle var(--k) at 0 calc(100% - var(--ah)),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--k) at 100% calc(100% - var(--ah)),#0000 97%,#000) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--k) at 0 calc(100% - var(--ah)),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--k) at 100% calc(100% - var(--ah)),#0000 97%,#000) right/51% 100% no-repeat}
  .sb-reise--billett .felder{padding:28px 24px 24px}
  .sb-reise--billett .kn-reihe{height:var(--ah);padding:0 20px}
  .sb-reise--billett .kn-reihe::before{left:calc(var(--k) + 11px);right:calc(var(--k) + 11px);top:-1px;bottom:auto;border-left:0;border-top:2px dotted rgba(228,206,150,.82)}
}

/* ==========================================================================================================================
   REGION, 14.10.2026 (Robert mit Bildschirmfotos von region.html). Einzeln löschbar, Sicherungen: _sicherung/2026-10-14-vor-region/ und -vor-region-2/
   Fassung 2 (01:10 Uhr, Roberts Antwort auf Fassung 1):
   1 Umgebungskarte: «Bilder im oberen Bereich, Überschrift darunter, ein bisschen Text, ateliermässig vier in einer Reihe» · «man erkennt nicht, welches ausgewählt ist»
     · «die Nummern oben in den Bildern total beschissen» → Bild oben im Rahmen, Nummer neben dem Namen, gewählt wird die ganze Kachel hell
   2 Pass-Berater: «total wackelig und krakelig», «die Pässe können von Anfang an gerade stehen», «edler, luxuriöser» → nichts federt, nichts dreht sich, nichts steigt;
     die Pässe stehen gerade in einer dunklen Schatulle, bei einer neuen Wahl läuft einmal ein Licht darüber
   3 Anreise-Package: «ein richtiges Package anzeigen an Sachen» → Zugbillett und Halbtax, mit Band und Siegel des Hauses gebündelt
   Fotos: region_bilder.py (Wikimedia Commons, frei lizenziert).
   ========================================================================================================================== */

/* ---------- 1 Legende der Umgebungskarte: acht Bilder wie in einem Atelier ---------- */
.uk__legende{gap:clamp(14px,1.5vw,24px)}
.uk-l{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:0;padding:10px 10px 0;border-radius:24px;color:#fff;text-align:left;
  background:linear-gradient(180deg,#1f4484 0%,#12305e 48%,#0a1f44 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),inset 0 -3px 0 rgba(0,0,0,.36),0 4px 0 #061632,0 22px 26px -14px rgba(40,30,10,.62);
  transition:color .8s ease}
.uk-l:hover{transform:none}
/* gewählt: die ganze Kachel wird hell. Die helle Fläche liegt als eigene Lage darüber und blendet weich ein (Robert 01:25: «viel sanfter, wenn ich das auswähle»); ein Verlauf selbst kann nicht überblenden. */
.uk-l::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#fffaf0 0%,#f3e8cd 55%,#e4d4ae 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 2px #b99a52,inset 0 -3px 0 rgba(110,88,44,.3),0 4px 0 #8a7545;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.uk-l[aria-pressed="true"]::before{opacity:1}
.uk-l__b{position:relative;display:block;aspect-ratio:3/2;border-radius:15px;background:#0a1c3b;box-shadow:0 0 0 1px rgba(220,198,143,.62),0 0 0 4px rgba(6,22,50,.55),0 10px 14px -8px rgba(0,0,0,.8);transition:box-shadow .8s ease}
.uk-l__b .rahmen__k{height:100%;border-radius:inherit;background:#0a1c3b}
.uk-l__b img{display:block;width:100%;height:100%;object-fit:cover}
.uk-l__t{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 11px;padding:clamp(15px,1.5vw,20px) clamp(8px,.9vw,12px) clamp(19px,1.9vw,25px)}
.uk-l .uk-l__t i{width:27px;height:27px;font:600 12.5px/1 var(--sans);color:var(--gold);background:rgba(18,48,94,0);box-shadow:inset 0 0 0 1.5px rgba(220,198,143,.85);transition:background-color .8s ease,color .8s ease,box-shadow .8s ease}
.uk-l .uk-l__t b{font-size:clamp(1.06rem,1.22vw,1.22rem);line-height:1.2;color:var(--weiss);transition:color .8s ease}
.uk-l .uk-l__t>span{grid-column:1/-1;margin-top:9px;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.8);opacity:1;transition:color .8s ease}
@media (hover:hover){.uk-l:not([aria-pressed="true"]):hover .uk-l__b{box-shadow:0 0 0 1px #dcc68f,0 0 0 4px rgba(6,22,50,.55),0 10px 14px -8px rgba(0,0,0,.8)}}
.uk-l[aria-pressed="true"]{color:var(--tinte)}
.uk-l[aria-pressed="true"] .uk-l__b{box-shadow:0 0 0 1px rgba(138,117,69,.8),0 0 0 4px rgba(255,255,255,.6),0 10px 14px -8px rgba(74,58,26,.6)}
.uk-l[aria-pressed="true"] .uk-l__t i{color:#fff;background:#12305e;box-shadow:inset 0 0 0 1.5px #12305e}
.uk-l[aria-pressed="true"] .uk-l__t b{color:var(--tinte)}
.uk-l[aria-pressed="true"] .uk-l__t>span{color:rgba(12,21,38,.82)}
.uk-l:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.uk__quelle{max-width:96ch;margin-inline:auto;text-align:center}
/* Auftritt auf region.html (Robert 14.10.2026 12:00 zu den acht Kacheln: «Nee, das ist ja an das Scrollen geknüpft, bitte nicht. Das soll einfach reinschweben»; davor zur Leiste
   dasselbe): nichts hängt hier an der Scroll-Zeitachse. Jedes Stück schwebt einmal nach der Uhr herein, sobald es ins Bild kommt (main.js setzt .da), deckend, nur translate,
   sanft auslaufend, ohne Nachfedern; Kacheln einer Reihe um --i versetzt, also schnell nacheinander. Die Fotos darin zoomen dabei herein (main.css). */
@keyframes rg-flug{from{translate:0 var(--rg-weg,90px)}}
html:not(#a):not(#b):not(#c) :is(.uk__rahmen,.uk-l,.rg-ziel,.pb__erg,.rg-haus)[data-r]{--rg-weg:clamp(34px,3.2vw,52px);opacity:1;scale:none;transform:none;animation:none;translate:0 var(--rg-weg)}
html:not(#a):not(#b):not(#c) .uk__rahmen[data-r]{--rg-weg:clamp(30px,2.8vw,44px)}
html:not(#a):not(#b):not(#c) :is(.uk__rahmen,.uk-l,.rg-ziel,.pb__erg,.rg-haus)[data-r].da,html:not(#a):not(#b):not(#c) :is(.uk__rahmen,.uk-l,.rg-ziel,.pb__erg,.rg-haus)[data-r].da.ce-fertig{
  translate:none;animation:rg-flug 1.7s cubic-bezier(.33,0,.15,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
/* Fassung 2 (Robert 12:15: «immer noch super wackelig, viel sanfter und smoother»): kürzerer Weg, weicher Anfang und lange, ruhige Landung statt des schnellen Starts;
   das Foto zoomt nur leicht und mit derselben Kurve, Dauer und Verzögerung wie seine Kachel, damit sich beides als eins bewegt. */
html:not(#a):not(#b):not(#c) :is(.uk-l,.rg-ziel)[data-r] .rahmen__k img{transform:scale(1.05);transition:transform 1.7s cubic-bezier(.33,0,.15,1);transition-delay:calc(var(--i,0) * 90ms)}
html:not(#a):not(#b):not(#c) :is(.uk-l,.rg-ziel)[data-r].da .rahmen__k img{transform:none}
html.ce-ruhig:not(#a):not(#b):not(#c) :is(.uk-l,.rg-ziel)[data-r] .rahmen__k img{transform:none;transition:none}
html.ce-ruhig:not(#a):not(#b):not(#c) :is(.uk__rahmen,.uk-l,.rg-ziel,.pb__erg,.rg-haus)[data-r]{translate:none;animation:none}

/* ---------- 2 Pass-Berater ---------- */
.rg-pass .kopfmitte{margin-bottom:clamp(30px,3.6vw,54px)}
.rg-pass .kopfmitte .lauf{max-width:64ch}
.rg-pass .pb{gap:clamp(22px,2.6vw,38px)}
/* die Ausflüge: sieben Kacheln in einer Reihe, jede mit einem kleinen Foto. Gewählt ist die Kachel hell mit Haken, nicht gewählt blau mit einem dunklen Schleier auf dem Foto. Nichts bewegt sich. */
.rg-ziele{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(10px,1.1vw,18px)}
.rg-ziel{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:8px 8px 14px;border-radius:20px;color:rgba(255,255,255,.8);text-align:center;
  background:linear-gradient(180deg,#1b3d77,#102b57 52%,#0a1f44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,198,143,.24),inset 0 -3px 0 rgba(0,0,0,.34),0 4px 0 #020916,0 20px 22px -14px #000;
  transition:color .8s ease}
.rg-ziel::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#fffaf0 0%,#f3e8cd 55%,#e4d4ae 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 2px #b99a52,inset 0 -3px 0 rgba(110,88,44,.3),0 4px 0 #8a7545;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.rg-ziel[aria-pressed="true"]::before{opacity:1}
.rg-ziel__b{position:relative;display:block;aspect-ratio:5/4;border-radius:13px;background:#0a1c3b;box-shadow:0 0 0 1px rgba(220,198,143,.4);transition:box-shadow .8s ease}
.rg-ziel__b .rahmen__k{height:100%;border-radius:inherit;background:#0a1c3b}
.rg-ziel__b img{display:block;width:100%;height:100%;object-fit:cover}
.rg-ziel__b::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(6,20,43,.52);transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.rg-ziel__b i{position:absolute;right:-7px;top:-7px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#27529b,#0b1f40);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 2px #fbf3e2,0 5px 8px -3px rgba(0,0,0,.7);opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.rg-ziel__b i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.rg-ziel b{display:block;margin-top:12px;font-family:var(--serif);font-weight:400;font-size:clamp(.94rem,1.12vw,1.14rem);line-height:1.2}
.rg-ziel[aria-pressed="true"]{color:var(--tinte)}
.rg-ziel[aria-pressed="true"] .rg-ziel__b{box-shadow:0 0 0 1px rgba(138,117,69,.8)}
.rg-ziel[aria-pressed="true"] .rg-ziel__b::after{opacity:0}
.rg-ziel[aria-pressed="true"] .rg-ziel__b i{opacity:1}
@media (hover:hover){.rg-ziel:not([aria-pressed="true"]):hover .rg-ziel__b::after{opacity:.38}.rg-ziel:not([aria-pressed="true"]):hover{color:#fff}}
.rg-ziel:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* die lange Leiste über die ganze Breite: Tage als zehn runde Tasten, Ermässigung als zwei */
.rg-leiste{display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,1.8vw,30px);padding:10px clamp(18px,2vw,32px);border-radius:999px;color:var(--tinte);
  background:linear-gradient(180deg,#fdf8ec,#efe3c8 55%,#e0d0aa);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.55),inset 0 -3px 0 rgba(110,88,44,.3),0 4px 0 #8a7545,0 24px 26px -16px #000}
.rg-leiste__teil{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);min-width:0}
.rg-leiste__n{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6c5a2e;white-space:nowrap}
.rg-leiste__spur{display:flex;gap:6px;padding:6px;border-radius:999px;background:linear-gradient(180deg,#d6c59c,#e6d8b6);box-shadow:inset 0 2px 4px rgba(74,58,26,.45),inset 0 -1px 0 rgba(255,255,255,.7)}
.rg-t{position:relative;isolation:isolate;flex:none;min-height:42px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--sans);color:var(--tinte);white-space:nowrap;background:linear-gradient(180deg,#fffdf7,#f3ead6);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(110,88,44,.3),0 3px 5px -2px rgba(74,58,26,.55);transition:color .6s ease}
.rg-t::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#27529b,#12305e 55%,#0a1c3b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px rgba(220,198,143,.85);opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.rg-t--rund{width:42px;padding:0;font-variant-numeric:tabular-nums}
.rg-t[aria-pressed="true"]{color:#fff}
.rg-t[aria-pressed="true"]::before{opacity:1}
.rg-t:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rg-leiste__naht{flex:none;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.rg-leiste__naht::before,.rg-leiste__naht::after{content:'';flex:1;width:1px;background:rgba(138,117,69,.5)}
.rg-leiste__naht i{width:7px;height:7px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px #8a7545}
/* Auftritt der Leiste (Robert 14.10.2026 11:50: «schiebt sich unschön hoch, noch ans Scrollen gekoppelt, einfach hochschweben, wenn man den Bereich erreicht hat, elegant»):
   nicht an der Scroll-Zeitachse, sondern einmal nach der Uhr, sobald sie ins Bild kommt (main.js setzt .da). Deckend, nur translate, sanft auslaufend, ohne Nachfedern. */
@keyframes rg-schweben{from{translate:0 clamp(34px,3.2vw,52px)}}
html:not(#a):not(#b):not(#c) .rg-leiste[data-r]{opacity:1;scale:none;transform:none;animation:none;translate:0 clamp(34px,3.2vw,52px)}
html:not(#a):not(#b):not(#c) .rg-leiste[data-r].da,html:not(#a):not(#b):not(#c) .rg-leiste[data-r].da.ce-fertig{translate:none;animation:rg-schweben 1.7s cubic-bezier(.33,0,.15,1) backwards;animation-delay:.08s}
html.ce-ruhig:not(#a):not(#b):not(#c) .rg-leiste[data-r]{translate:none;animation:none}

/* die drei Wege: oben die Schatulle mit dem Pass, der Name mittig, der Preis ganz unten als Abriss. Die Kacheln stehen, nichts steigt oder federt. */
.rg-pass .pb__erg{gap:clamp(16px,1.8vw,28px);margin-top:0}
.rg-pass .pb-k{--pk:clamp(20px,2.2vw,32px);--rand:clamp(12px,1.2vw,16px);align-items:center;padding:0 var(--pk);border-radius:26px;text-align:center;color:#fff;
  background:linear-gradient(180deg,#1b3d77,#102b57 46%,#0a1f44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,198,143,.34),inset 0 -3px 0 rgba(0,0,0,.36),0 5px 0 #020916,0 34px 36px -22px #000}
.rg-pass .pb-k--best{color:var(--tinte);background:linear-gradient(180deg,#fdf8ec,#f1e6cb 55%,#e2d2ac);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.6),inset 0 -3px 0 rgba(110,88,44,.3),0 5px 0 #8a7545,0 34px 36px -22px #000}
.rg-pass .pb__erg .pb-k,.rg-pass .pb__erg.da .pb-k{animation:none}
.rg-pass .pb-k__marke{align-self:center;margin:clamp(16px,1.6vw,22px) 0 0;padding:8px 16px 7px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;color:#f3e3b6;
  background:linear-gradient(180deg,#27529b,#0b1f40);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(138,117,69,.8)}
.rg-pass .pb-k__name{margin-top:clamp(20px,2.1vw,28px);font-size:clamp(1.5rem,2.05vw,2.1rem);text-wrap:balance}
.rg-pass .pb-k__marke+.pb-k__name{margin-top:12px}
.rg-pass .pb-k__unter{min-height:0;max-width:40ch;margin-top:10px;font-size:.9rem;line-height:1.5;opacity:.78;text-wrap:balance}
.rg-pass .pb-k__liste{align-self:stretch;margin:clamp(16px,1.7vw,24px) 0 clamp(18px,2vw,28px);text-align:left}
.rg-pass .pb-k__preis{position:relative;align-self:stretch;margin:auto calc(var(--pk)*-1) 0;padding:clamp(18px,1.9vw,26px) 16px clamp(24px,2.3vw,32px);
  border-top:2px dashed rgba(220,198,143,.5);font-size:clamp(2.6rem,3.9vw,4rem);display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;min-height:clamp(106px,9.6vw,140px);align-content:center}
.rg-pass .pb-k--best .pb-k__preis{border-top-color:rgba(138,117,69,.6)}
.rg-pass .pb-k__preis em{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.2}
.rg-pass .pb-k__preis::before,.rg-pass .pb-k__preis::after{content:'';position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 3px 4px -1px rgba(0,0,0,.7)}
.rg-pass .pb-k__preis::before{left:-12px}.rg-pass .pb-k__preis::after{right:-12px}

/* das Motiv über dem Namen (Fassung 4, 01:55): ein Billett im Stil des Hauses, gerade auf einem eingelassenen Feld mit der leisen Tapete. Nichts bewegt sich. */
.pb-pass{position:relative;flex:none;align-self:stretch;display:grid;place-items:center;margin:var(--rand,14px) calc(var(--rand,14px) - var(--pk,24px)) 0;padding:clamp(22px,2.3vw,32px) 0 clamp(12px,1.3vw,18px);border-radius:16px;
  background:#efe4c9 url(../img/tapete-creme.webp?v=23425e99) 50% 0/620px auto;
  box-shadow:inset 0 3px 7px rgba(74,58,26,.42),inset 0 0 0 1px rgba(110,88,44,.7),0 1px 0 rgba(255,255,255,.16)}
.pb-pass::before{content:'';position:absolute;inset:8px;border:1px solid rgba(138,117,69,.5);border-radius:9px;outline:1px solid rgba(138,117,69,.28);outline-offset:-4px;pointer-events:none}
.pb-k--best .pb-pass{box-shadow:inset 0 3px 7px rgba(74,58,26,.42),inset 0 0 0 1px rgba(110,88,44,.7),0 1px 0 #fff}
.et{position:relative;display:block;overflow:visible}
.et--tk{width:min(86%,372px);height:auto}
.et-v{text-transform:uppercase}
.et-z{font-variant-numeric:lining-nums}
.et-s{font-family:var(--serif)}
.et-m{font-family:var(--sans);font-weight:600}

/* ---------- 3 Gästekarte und Anreise-Package: ein langes Billett aus zwei Teilen ---------- */
.rg-pass__quelle{max-width:112ch;margin:clamp(30px,3.2vw,48px) auto 0;text-align:center}
.rg-haus{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(34px,3.8vw,60px);border-radius:26px;color:var(--tinte);
  background:linear-gradient(180deg,#fdf8ec,#f1e6cb 55%,#e2d2ac);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.6),inset 0 -3px 0 rgba(110,88,44,.3),0 5px 0 #8a7545,0 34px 36px -22px #000}
.rg-haus::before{content:'';position:absolute;inset:9px 9px 11px;border:1px solid rgba(138,117,69,.36);border-radius:18px;pointer-events:none}
.rg-haus__teil{position:relative;display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);padding:clamp(26px,2.6vw,38px) clamp(26px,3vw,48px) clamp(29px,2.9vw,42px)}
.rg-haus__teil+.rg-haus__teil{border-left:2px dashed rgba(138,117,69,.55)}
.rg-haus__teil+.rg-haus__teil::before,.rg-haus__teil+.rg-haus__teil::after{content:'';position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--nacht)}
.rg-haus__teil+.rg-haus__teil::before{top:-12px;box-shadow:inset 0 -3px 4px -1px rgba(0,0,0,.6)}
.rg-haus__teil+.rg-haus__teil::after{bottom:-17px;box-shadow:inset 0 3px 4px -1px rgba(0,0,0,.6)}
.rg-haus .d3{font-size:clamp(1.4rem,1.9vw,1.95rem);line-height:1.12;color:var(--tinte)}
.rg-haus .d3 em{color:var(--taupe)}
.rg-haus .lauf{max-width:none;margin-top:9px;font-size:.98rem;line-height:1.55;color:rgba(12,21,38,.8)}
.rg-haus .kn-reihe{margin-top:16px}
.rg-haus .kn{--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);--ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.rg-haus .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}
/* Gästekarte und Package: Karte und Billett im Stil des Hauses, gerade (Fassung 4) */
.rg-et{flex:none;height:clamp(112px,9.8vw,142px);width:auto}
.rg-et--paket{height:clamp(132px,11.6vw,170px)}

/* ---------- schmaler ---------- */
@media (max-width:1360px){
  .rg-leiste{padding:12px clamp(18px,2vw,28px);border-radius:44px}
  .rg-leiste__teil{flex-direction:column;align-items:flex-start;gap:7px}
  .rg-leiste__n{padding-left:14px}
}
@media (max-width:1100px){
  .rg-ziele{display:flex;flex-wrap:wrap;justify-content:center}
  .rg-ziel{flex:0 0 calc((100% - 3*clamp(10px,1.1vw,18px))/4)}
  .rg-pass .pb__erg{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;width:100%;gap:clamp(20px,4vw,30px)}
  .rg-leiste{flex-direction:column;align-items:stretch;border-radius:32px;padding:18px}
  .rg-leiste__teil{align-items:center}.rg-leiste__n{padding-left:0}
  .rg-leiste__naht{flex-direction:row;align-self:stretch}.rg-leiste__naht::before,.rg-leiste__naht::after{width:auto;height:1px}
  .rg-leiste__spur{flex-wrap:wrap;justify-content:center;border-radius:28px}
  .rg-haus{grid-template-columns:minmax(0,1fr)}
  .rg-haus__teil+.rg-haus__teil{border-left:0;border-top:2px dashed rgba(138,117,69,.55)}
  .rg-haus__teil+.rg-haus__teil::before{left:-12px;top:-13px;box-shadow:inset -3px 0 4px -1px rgba(0,0,0,.6)}
  .rg-haus__teil+.rg-haus__teil::after{left:auto;right:-12px;top:-13px;bottom:auto;box-shadow:inset 3px 0 4px -1px rgba(0,0,0,.6)}
}
@media (max-width:640px){
  .rg-ziel{flex:0 0 calc((100% - 10px)/2)}.rg-ziele{gap:10px}
  .rg-t{min-height:40px;padding:0 14px;font-size:13px}.rg-t--rund{width:40px;padding:0}
  .rg-haus__teil{flex-direction:column;align-items:flex-start;gap:20px}
  .rg-et{height:120px}.rg-et--paket{height:132px}
}

/* ===== Wieder eingesetzt 14.10.2026 01:15: drei Blöcke, die beim gleichzeitigen Schreiben eines anderen Chats aus dieser Datei gefallen waren ===== */
/* Wellness, Saunas: Billett höher, Bilder bündig (Robert 14.10.2026 00:43: «das Ticket noch ein bisschen höher und die Bilder mit dem Ticket unten an der
   Kante bündig abschliessen»): das Billett ist höher und rückt näher an den Text, die Bildgruppe ist so hoch wie die Textspalte (ein grosses Foto oben,
   zwei darunter) und endet auf der Unterkante des Billetts. Block einzeln löschbar. */
/* Grösse des Billetts wie vorher (Robert 14.10.2026 01:13: «so viel Leerraum oben und unten, und das Ticket ist mir auch zu gross»): nur die Lage ist neu */
@media (min-width:861px){
  .sb-wd.zwei--bild{align-items:stretch}
  .sb-wd.zwei--bild>.t{display:flex;flex-direction:column}
  .sb-wd.zwei--bild>.t>.lauf:not(.zwei__fuss){margin-bottom:0}
  .sb-wd.zwei--bild>.t>.sb-grad{margin-top:auto;padding-top:clamp(22px,2.4vw,34px)}
  .sb-wd.zwei--bild>.b{display:flex}
  .sb-wd.zwei--bild>.b>.zmos{flex:1;align-self:stretch;width:auto;aspect-ratio:auto;min-height:clamp(440px,42vw,660px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.62fr) minmax(0,1fr)}
  .sb-wd.zwei--bild>.b>.zmos>.zmos__b:first-child{grid-row:auto;grid-column:1/-1}
}

/* Wellness, «Fussbäder und Pflege» (Robert 14.10.2026 00:50: «die Karte da rechts muss viel geiler aussehen, viel edler»): Karte des Hauses mit blauem
   Kopfband (Tapete, Zeichen in Gold, Titel mittig, Goldlinie mit Raute) wie die neu gesetzten Unterlagen, darunter die Anwendungen mittig auf Papier,
   zwischen den Zeilen eine kleine Raute. Doppelte Goldlinie um das Ganze. Block einzeln löschbar. */
.blatt.sb-spa{padding:0;overflow:hidden;border-radius:var(--r-l);background:linear-gradient(180deg,#fffbf1,#f4ead5);box-shadow:inset 0 0 0 1px rgba(110,88,44,.26),0 4px 0 #a39370,0 46px 60px -36px rgba(0,0,0,.92)}
.blatt.sb-spa::before{z-index:2;inset:9px;border:1px solid rgba(214,188,126,.78);border-radius:calc(var(--r-l) - 9px)}
.blatt.sb-spa::after{content:'';position:absolute;z-index:2;inset:13px;border:1px solid rgba(214,188,126,.3);border-radius:calc(var(--r-l) - 13px);pointer-events:none}
.sb-spa__kopf{display:grid;justify-items:center;padding:clamp(34px,3.4vw,50px) clamp(26px,3.2vw,50px) clamp(26px,2.7vw,38px);text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 36%,rgba(3,10,26,.24) 100%),radial-gradient(120% 150% at 16% 0%,rgba(34,76,142,.84) 0%,rgba(16,48,95,.84) 48%,rgba(8,26,58,.9) 100%),url(../img/tapete-navy.webp?v=ba8679c1) 50% 0/340px auto,#0b2148;
  box-shadow:inset 0 -1px 0 rgba(228,206,150,.95),inset 0 -4px 0 rgba(8,22,50,.9),inset 0 -5px 0 rgba(228,206,150,.5)}
.sb-spa__z svg{display:block;width:clamp(62px,5.4vw,90px);height:auto;aspect-ratio:1680/1084;color:transparent;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
.sb-spa__kopf h3{margin:clamp(14px,1.6vw,24px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.55vw,2.7rem);line-height:1.1;letter-spacing:0;color:#fbf3e2;text-wrap:balance}
.sb-spa__kopf .edel__raute{margin:clamp(14px,1.5vw,22px) 0 clamp(10px,1.1vw,16px)}
.sb-spa__kopf .mono{margin:0;color:var(--gold)}
.sb-spa__l{list-style:none;margin:0;padding:clamp(12px,1.3vw,20px) clamp(30px,4vw,66px) clamp(28px,2.9vw,42px)}
.sb-spa__l li{position:relative;padding:clamp(13px,1.36vw,19px) 0;text-align:center}
.sb-spa__l li+li::before{content:'';position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;background:var(--taupe);opacity:.74;rotate:45deg}
.sb-spa__l b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.16rem,1.46vw,1.5rem);line-height:1.2;letter-spacing:0;color:#0b1f40;text-wrap:balance}
.sb-spa__l span{display:block;max-width:44ch;margin:8px auto 0;font-size:clamp(.96rem,1.04vw,1.06rem);line-height:1.56;color:rgba(12,21,38,.74);text-wrap:balance}
.sb-spa__l i{display:block;margin-top:8px;font-style:normal;font-family:var(--serif);font-size:1.05rem;font-variant-numeric:lining-nums;color:var(--taupe)}

/* Wellness, «Nach dem Wandertag.» (Robert 14.10.2026: «ich mag das nicht, dass jetzt da so ein Leerraum unten links ist»): die Textspalte ist so hoch
   wie die Karte rechts. Die drei Bilder beginnen mit der Karte, der Knopf endet mit ihr, Titel und Text stehen gleichmässig dazwischen; Bilder, Titel
   und Text sind grösser. Block einzeln löschbar. */
@media (min-width:861px){
  .sb-wander.zwei--oben{align-items:stretch}
  .sb-wander>.t{display:flex;flex-direction:column;justify-content:space-between}
  .sb-wander .pstapel--oben{margin-bottom:clamp(20px,2.4vw,36px)}
  .sb-wander .pstapel{padding:0}.sb-wander .pstapel figure{flex:0 0 36%;margin-right:-4%}.sb-wander .pstapel figure:last-child{margin-right:0}
  .sb-wander .pstapel__k{padding:11px 11px 0}.sb-wander .pstapel__k small{padding:13px 2px 15px;font-size:11px}
  .sb-wander>.t>.d2{font-size:clamp(2.2rem,4.5vw,4.7rem)}
  .sb-wander>.t>.lauf{font-size:clamp(1.1rem,1.34vw,1.4rem);line-height:1.66;max-width:none}
  .sb-wander>.t>.kn-reihe{margin-bottom:4px;justify-content:center}   /* Robert 01:13: «den Button da links in seinem Bereich setzen, selbe Höhe»: mittig in der Spalte */
}
/* Wellness, «Gut zu wissen.»: Einzeleintritt, Nutzung, 10er-Abonnement als Billett wie auf der Dachterrasse (Robert 14.10.2026: «da bitte auch noch so ein Ticket draus machen»); Schrift etwas kleiner, damit «bis 2.5 Stunden» in einer Zeile bleibt */
.sb-gut__billett{justify-self:end;width:100%;max-width:560px;padding-top:0;padding-bottom:3px}   /* Robert 01:13: «viel zu gross und nicht dieser doppelte Goldrand»: das schlichte Billett (Fassung 1), kleiner */
.sb-gut__billett .ak-billett dd{font-size:clamp(1rem,1.28vw,1.38rem)}.sb-gut__billett .ak-billett>div{padding:0 8px}
@media (max-width:860px){.sb-gut__billett{justify-self:stretch;max-width:none;padding-top:8px}}

/* ==================================================================================================================================
   JOBS · «Unser Team.» (Robert 14.10.2026 01:00 mit Bildschirmfoto): «Unser Team mittig, darüber das Logo, links vier Bilder, die mit
   den Kacheln unten abschliessen, die Kacheln weg und daraus an der Luft hängende Zitate mit kleinen Miniaturbildern der Personen,
   ‹Gerne dürfen Sie …› und ‹Zur Bewerbung› mittig.» Ersetzt .bieten auf jobs.html. Nichts läuft mit (kein sticky).
   Dieser Block war um 01:17 einmal von einem anderen Chat überschrieben: Datei nie als Ganzes zurückschreiben, nur gezielt tauschen.
   ================================================================================================================================== */
.jt-kopf{display:grid;justify-items:center;gap:clamp(16px,1.8vw,26px);margin-bottom:clamp(40px,5vw,84px);text-align:center}
.jt-kopf__z{display:grid;justify-items:center;gap:clamp(12px,1.3vw,18px);color:var(--gold)}
.jt-kopf__z svg{width:clamp(58px,5.4vw,90px);height:auto}
.jt-kopf__z::after{content:'';width:clamp(74px,8.4vw,128px);height:4px;border-block:1px solid rgba(220,198,143,.6)}
.jt-zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,90px);align-items:stretch}
.jt-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(8px,.8vw,12px);min-height:clamp(380px,36vw,560px)}
.jt-b{position:relative;margin:0;min-height:0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(220,198,143,.4),0 34px 40px -30px rgba(0,0,0,.9);transform:translateZ(0)}
.jt-b--0{grid-column:1/-1;border-radius:26px}
.jt-b .rahmen__k{position:absolute;inset:0;display:block}
.jt-b img{width:100%;height:100%;object-fit:cover}
.jt-b--0 img{object-position:50% 62%}.jt-b--2 img{object-position:56% 30%}
.jt-zitate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(34px,4.4vw,72px) clamp(26px,3.6vw,60px);list-style:none;margin:0;padding:clamp(4px,.6vw,10px) 0 0}
/* Robert 01:21: «Zitate mittig, Text ein bisschen kleiner und kursiv, die Bilder der Leute ein bisschen grösser» */
@font-face{font-family:'Baskerville Kursiv';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400-italic.woff2') format('woff2')}
.jt-zitate li{display:grid;justify-items:center;align-content:start;gap:clamp(14px,1.4vw,20px);text-align:center}
.jt-zitate q{max-width:22ch;font-family:'Baskerville Kursiv',var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.16rem,1.5vw,1.6rem);line-height:1.4;quotes:'«' '»';text-wrap:balance}
/* Robert 01:29: «man sieht nicht, dass die Zitate zu den Leuten gehören»: erst Porträt, Name, Aufgabe, direkt darunter der Satz, nichts dazwischen */
.jt-zitate p{display:grid;justify-items:center;gap:clamp(12px,1.2vw,16px);margin:0}
.jt-zitate img,.jt-zitate p>i{width:clamp(76px,6.6vw,104px);height:clamp(76px,6.6vw,104px);border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(220,198,143,.7),0 0 0 4px rgba(220,198,143,.12)}
.jt-zitate p>i{display:grid;place-items:center;color:var(--gold)}.jt-zitate p>i svg{width:54%;height:auto}
.jt-zitate p>span{display:grid;justify-items:center;gap:5px;min-width:0}
.jt-zitate b{font-family:var(--serif);font-weight:400;font-size:1.16rem;line-height:1.2;color:var(--gold)}
.jt-zitate small{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.jt-ruf{display:grid;justify-items:center;gap:clamp(20px,2.2vw,30px);margin-top:clamp(48px,6vw,96px);text-align:center}
.jt-ruf p{max-width:34ch;margin:0;font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.76rem);line-height:1.3;text-wrap:balance}
@media (max-width:860px){
  .jt-zwei{grid-template-columns:minmax(0,1fr);gap:clamp(34px,8vw,54px)}
  .jt-bilder{min-height:0;grid-template-rows:auto auto}.jt-b{aspect-ratio:1}.jt-b--0{aspect-ratio:16/10}
  .jt-b{border-radius:14px}.jt-b--0{border-radius:20px}
  .jt-zitate{grid-auto-rows:auto}
}
@media (max-width:560px){.jt-zitate{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ==================================================================================================================================
   JOBS · «Ihre Bewerbung.», linke Spalte (Robert 14.10.2026 01:22 mit Bildschirmfoto: «per Mail und per Post sieht so wenig aus, das
   kann man viel cooler darstellen»). Per Post ist ein Briefumschlag an das Haus mit Marke und Poststempel, er richtet sich mit dem
   Scrollen auf (nur rotate und translate). Per Mail ist eine Taste des Hauses. Ersetzt .bew auf jobs.html.
   ================================================================================================================================== */
.jb-post{display:grid;justify-items:start;gap:clamp(26px,2.8vw,40px);margin-top:clamp(34px,4vw,60px)}
.jb-kuvert{--jb-w:-2.2deg;width:min(100%,clamp(340px,37vw,560px))}
.jb-kuvert__k{position:relative;isolation:isolate;aspect-ratio:162/104;display:grid;align-content:end;padding:clamp(22px,2.6vw,40px) clamp(24px,2.9vw,46px);border-radius:5px;color:var(--tinte);rotate:var(--jb-w)}
.jb-kuvert__k::before,.jb-kuvert__k::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:5px}
/* Robert 01:38: der zweite Umschlag auch weiss, nicht beige (sah aus wie ein versetzter Schatten) */
.jb-kuvert__k::before{background:linear-gradient(180deg,#fffbf1,#f7efde);box-shadow:inset 0 0 0 1px rgba(110,88,44,.22),0 1px 0 #cbbd9c,0 30px 38px -30px rgba(12,21,38,.42);rotate:2.6deg;translate:12px 9px}
.jb-kuvert__k::after{background:linear-gradient(180deg,#fffbf1,#f7efde);box-shadow:inset 0 0 0 1px rgba(110,88,44,.16),0 1px 0 #cbbd9c,0 10px 16px -10px rgba(74,58,26,.38),0 44px 54px -38px rgba(12,21,38,.6)}
.jb-marke{position:absolute;top:clamp(16px,1.9vw,28px);right:clamp(16px,1.9vw,28px);width:clamp(54px,5.4vw,82px);height:auto;rotate:1.4deg;filter:drop-shadow(0 1px 1px rgba(74,58,26,.3))}
.jb-marke text{font-family:var(--mono);font-weight:500}
.jb-stempel{position:absolute;top:clamp(20px,2.3vw,36px);right:clamp(46px,4.9vw,76px);width:clamp(120px,12.6vw,190px);height:auto;color:#12305e;opacity:.62;rotate:-7deg;pointer-events:none}
.jb-stempel text{font-family:var(--mono);font-weight:500;fill:currentColor}
.jb-adresse{margin:0}
.jb-adresse dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe)}
.jb-adresse dd{margin:clamp(8px,.9vw,12px) 0 0;font-family:var(--serif);font-size:clamp(1.2rem,1.86vw,1.96rem);line-height:1.26;font-variant-numeric:lining-nums}
.jb-mail{display:grid;justify-items:start;gap:12px}
.jb-mail__kn{text-transform:none;letter-spacing:.02em;font-size:clamp(1rem,1.1vw,1.14rem)}
@keyframes jb-kuvert{0%{rotate:calc(var(--jb-w)*-2.4);translate:0 clamp(40px,6vw,96px)}100%{rotate:var(--jb-w);translate:0 0}}
@supports (animation-timeline:view()){.jb-kuvert__k{animation:jb-kuvert linear both;animation-timeline:view();animation-range:entry 0% cover 38%}}
html.ce-ruhig .jb-kuvert__k{animation:none}
@media (prefers-reduced-motion:reduce){.jb-kuvert__k{animation:none}}
@media print{.jb-kuvert__k{animation:none}}
@media (max-width:860px){.jb-kuvert{--jb-w:-1.4deg;width:100%;max-width:440px}.jb-kuvert__k::before{rotate:1.4deg;translate:6px 6px}}


/* Startseite «Süsse Träume.» (Robert 15.10.2026, Fassung 12 aus start-zimmer-12.html): drei Zimmer quer, darunter die Aarmühle-Penthouse-Suite gross, frei wie die kleinen, Name darunter */
.zreihe--quer .frei .rahmen__k{aspect-ratio:4/3;border-radius:24px}
.zreihe--quer .frei figcaption{padding-top:clamp(14px,1.5vw,22px);font-size:clamp(1.12rem,1.4vw,1.45rem)}
.zreihe--quer .frei figcaption span{margin-top:5px;font-size:.95rem}
.zreihe--gross{grid-template-columns:minmax(0,1fr);margin-top:clamp(28px,3.2vw,48px)}
.zreihe--gross .frei .rahmen__k{aspect-ratio:21/8;border-radius:28px}
.zreihe--gross .frei figcaption{padding-top:clamp(14px,1.5vw,22px);font-size:clamp(1.3rem,1.9vw,2rem)}
.zreihe--gross .frei figcaption span{margin-top:7px;font-size:clamp(.98rem,1.05vw,1.08rem)}
@media (max-width:860px){.zreihe--gross .frei .rahmen__k{aspect-ratio:4/3;border-radius:22px}}

/* FASSUNG Billett Nr. 6 «Fach» (Robert 15.10.2026, aus carlton-rahmen.vercel.app/billett-2.html, gilt für alle Billette der Website):
   statt Billett drei Fächer ins Papier eingelassen (Fundus-Baustein «Fach»), oben die kleine Marke, darunter der Wert; der Satz offen darunter. */
.zs-billett{color:#0b1f40}
.zs-billett__haupt,.zs-billett__abriss{-webkit-mask:none;mask:none;border:0;border-radius:0;background:none;padding:0}
.zs-billett__haupt::before,.zs-billett__abriss::before,.zs-billett__abriss::after{display:none}
.zs-billett .zs-tafel__drei{gap:10px}
.zs-billett .zs-tafel__drei div,.zs-billett .zs-tafel__drei div:first-child{padding:20px 12px 18px;border:0;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,#ebe1cc,#f1e9d8 40%,#f4ecdd);box-shadow:inset 0 3px 6px -1px rgba(60,45,15,.2),inset 0 1px 0 rgba(60,45,15,.12),inset 0 0 0 1px rgba(60,45,15,.08),0 1px 0 #fff}
.zs-billett .zs-tafel__drei dt{color:#8a7545}
.zs-billett .zs-tafel__drei dd{color:#0b1f40}
.zs-billett__abriss{padding:clamp(18px,2vw,22px) clamp(6px,2vw,24px) 0}
.zs-billett .zs-tafel__mit{color:#3b3a44}
@media (max-width:420px){.zs-billett .zs-tafel__drei{gap:6px}.zs-billett .zs-tafel__drei div{padding:16px 6px 14px;border-radius:16px}}

/* FÄCHER ÜBERALL (Robert 15.10.2026, drei Bildschirmfotos Wellness/Das Haus/Angebote: «an diesen Stellen auch überall»):
   jede Angaben-Reihe (.ak-billett, .koord in den Flächen; nicht der Aushang .dn-reg) als eingelassene Fächer wie Billett Nr. 6.
   Auf Nachtblau dunkle Fächer, auf Papier und Creme helle. Nur CSS, Markup unverändert. */
.fl{--fach-h:linear-gradient(180deg,rgba(90,68,25,.11),rgba(90,68,25,.05) 40%,rgba(90,68,25,.03));--fach-h-s:inset 0 3px 6px -1px rgba(60,45,15,.2),inset 0 1px 0 rgba(60,45,15,.12),inset 0 0 0 1px rgba(60,45,15,.08),0 1px 0 rgba(255,255,255,.75);
  --fach-d:linear-gradient(180deg,rgba(0,6,20,.42),rgba(0,6,20,.3) 34%,rgba(0,6,20,.24));--fach-d-s:inset 0 3px 6px -1px rgba(0,0,0,.6),inset 0 1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.09)}
/* Billett-Reihe der Seitenbau-Seiten */
.ak-billett,.sb-pano__billett .ak-billett{-webkit-mask:none;mask:none;background:none;box-shadow:none;border-radius:0;padding:0;column-gap:10px;row-gap:8px}
.ak-billett::before,.ak-billett::after,.sb-pano__billett .ak-billett::after,.ak-billett>div+div::before{display:none}
.ak-billett>div,.sb-gut__billett .ak-billett>div,.sb-pano__billett .ak-billett>div{padding:20px clamp(10px,1.2vw,16px) 18px;border-radius:20px;background:var(--fach-d);box-shadow:var(--fach-d-s)}
.fl--papier .ak-billett>div,.fl--creme .ak-billett>div{background:var(--fach-h);box-shadow:var(--fach-h-s)}
.fl--papier .ak-billett dt,.fl--creme .ak-billett dt{color:#8a7545}
.fl--papier .ak-billett dd,.fl--creme .ak-billett dd{color:#0b1f40}
.fl--papier .sb-pano__billett .ak-billett dt::after{background:rgba(138,117,69,.6)}
@media (max-width:560px){.ak-billett>div,.sb-gut__billett .ak-billett>div,.sb-pano__billett .ak-billett>div{padding:16px 18px}}
/* Angaben-Reihe .koord */
.fl .koord:not(.dn-reg){gap:10px;padding-bottom:0}
.fl .koord:not(.dn-reg) div,.fl .koord:not(.dn-reg) div:first-child,.fl .koord--vier:not(.dn-reg) div:nth-child(3){padding:18px clamp(16px,1.8vw,24px) 16px;border:0;border-radius:20px;background:var(--fach-d);box-shadow:var(--fach-d-s)}
.fl--papier .koord:not(.dn-reg) div,.fl--creme .koord:not(.dn-reg) div,.fl--papier .koord:not(.dn-reg) div:first-child,.fl--creme .koord:not(.dn-reg) div:first-child,.fl--papier .koord--vier:not(.dn-reg) div:nth-child(3),.fl--creme .koord--vier:not(.dn-reg) div:nth-child(3){background:var(--fach-h);box-shadow:var(--fach-h-s)}
.fl--papier .koord:not(.dn-reg) dt,.fl--creme .koord:not(.dn-reg) dt{color:#8a7545}
.fl--papier .koord:not(.dn-reg) dd,.fl--creme .koord:not(.dn-reg) dd{color:#0b1f40}

/* FASSUNG Schluss Startseite «Mit Sockel» (Robert 15.10.2026, Runde 2 Nr. 12): Papierkarte mit Titel, Satz und Lageplan, darunter ein nachtblauer Streifen mit den drei Angaben und den Knöpfen. Ersetzt das Billett .pkarte--billett. */
.psk{max-width:1640px;margin-inline:auto;border-radius:12px;overflow:hidden;box-shadow:0 30px 44px -22px rgba(0,0,0,.75),0 70px 90px -44px rgba(0,0,0,.95)}
.psk__o{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,3vw,50px);align-items:center;padding:clamp(40px,4.6vw,76px) clamp(28px,4.6vw,78px) clamp(30px,3.4vw,56px);background:linear-gradient(180deg,#fefaf0,#f3e9d4)}
.psk__l{text-align:left}.psk__l .lauf{margin-left:0;margin-right:0}
.psk .d2{font-size:clamp(1.9rem,3.2vw,3.4rem);line-height:1.06;color:var(--tinte)}
.psk .d2 em{color:var(--taupe)}
.psk .d2 .z>span{text-shadow:none}
.psk .lauf{margin:clamp(16px,1.8vw,26px) 0 0;max-width:30ch;color:rgba(12,21,38,.8);text-shadow:none;font-family:var(--serif);font-size:clamp(1.12rem,1.45vw,1.5rem);line-height:1.4}
.psk__u{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(16px,1.8vw,24px) clamp(28px,4.6vw,78px);background:linear-gradient(180deg,#12305e,#0c2349);box-shadow:inset 0 1px 0 rgba(220,198,143,.35)}
.psk__zeilen{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.psk__zeilen div{padding:6px clamp(14px,2vw,30px)}
.psk__zeilen div:first-child{padding-left:0}
.psk__zeilen div+div{border-left:1px solid rgba(220,198,143,.3)}
.psk__zeilen dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#dcc68f}
.psk__zeilen dd{margin:6px 0 0;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.7rem);line-height:1.1;color:#fff;white-space:nowrap}
.psk__u .kn-reihe{margin:0;flex-wrap:nowrap;justify-content:flex-end}
@media (max-width:1100px){.psk__u{flex-direction:column;align-items:stretch}.psk__u .kn-reihe{justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:860px){.psk__o{grid-template-columns:minmax(0,1fr);padding:34px 24px 24px}.psk__u{padding:18px 24px 26px}.psk__zeilen{grid-template-columns:minmax(0,1fr)}.psk__zeilen div,.psk__zeilen div:first-child{padding:12px 0}.psk__zeilen div+div{border-left:0;border-top:1px solid rgba(220,198,143,.3)}.psk__u .kn-reihe{justify-content:center}.psk__l{text-align:center}.psk__l .lauf{margin-inline:auto}}
@media (min-width:861px) and (max-height:780px){.psk__o{padding-top:30px;padding-bottom:18px}.psk__o .pkarte__plan{max-width:620px;justify-self:end;width:100%}.psk__zeilen dt{font-size:10px;letter-spacing:.12em}}

/* ---------- FASSUNG Karte frei und ateliermässig (Robert 15.10.2026: erst «viereckige, freischwebende 3D-Kacheln», dann «Bilder so freischwebend und die Texte darunter so ateliermässig»).
   Nur Essen & Trinken, Abschnitt #karte. Wie «Ihr Kissen.» (.dn-kissen--atelier): keine Karte, Foto quadratisch frei mit weichem Schatten, darunter linksbündig N°, Name, Haarlinie, Text, Preis. ---------- */
.kbrett .band{padding-top:10px;padding-bottom:40px;counter-reset:gk}
.kbrett .gk{counter-increment:gk;align-items:stretch;text-align:left}
.kbrett .gk__b{aspect-ratio:1/1;border-radius:var(--r-l);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 34px 46px -28px rgba(0,0,0,.9),0 8px 16px -10px rgba(0,0,0,.5)}
.kbrett .gk h4{margin:0;padding-bottom:12px;border-bottom:1px solid rgba(220,198,143,.32);font-size:clamp(1.14rem,1.32vw,1.34rem)}
.kbrett .gk h4::before{content:'N° ' counter(gk,decimal-leading-zero);display:block;margin:20px 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold)}
.kbrett .gk>p{margin:12px 0 16px;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.66)}
.kbrett .gk--klein h4{font-size:1.12rem}
.kbrett .gk--klein>p{margin:10px 0 14px;font-size:.86rem}
.kbrett .gk__p{justify-content:flex-start;padding-top:0}
.kbrett .gk__p::before{display:none}
.kbrett .gk__p span{padding:0 12px 0 0}
.kbrett .gk__p span+span{padding-left:12px}

/* ===== PACKAGES 9c → 9b «Schwebende Kacheln, vier in einer Reihe» (Robert 15.10.2026: «Mach 9c», dann «so wie 9b, Bild oben komplett ohne Rahmen, Bilder grösser, vier in einer Reihe, eins nach rechts scrollen», «Regler grösser») ===== */
#pakete .pk9-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:clamp(16px,3vw,48px);align-items:end;margin-bottom:clamp(26px,3vw,40px)}
#pakete .pk9-kopf .lauf{margin:0;max-width:52ch}
.pk9-wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:0 auto clamp(30px,3.4vw,46px);padding:8px;border-radius:34px;background:linear-gradient(180deg,#071733,#0c2246);box-shadow:inset 0 3px 6px -1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
.pk9-wahl button{all:unset;cursor:pointer;padding:16px 28px;border-radius:99px;font:500 13px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:color .3s,background .3s}
.pk9-wahl button.an{color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#e2d2bd);box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(0,0,0,.25)}
.pk9-wahl button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pk9-g{--gap:clamp(14px,1.6vw,26px);display:flex;gap:var(--gap);align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 70px;margin:-8px -2px -24px}
.pk9-g::-webkit-scrollbar{display:none}
.pk9{--s:0px;flex:0 0 calc((100% - 3 * var(--gap)) / 4);scroll-snap-align:start;position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--weiss);color:var(--tinte);text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.25),0 34px 44px -24px rgba(0,0,0,.85);transform:translateY(calc(var(--y) + var(--s)));transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pk9 img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pk9__t{display:grid;gap:7px;padding:clamp(16px,1.5vw,22px) clamp(16px,1.5vw,22px) clamp(18px,1.7vw,24px)}
.pk9__d{font:500 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.pk9__t b{font:400 clamp(1.15rem,1.5vw,1.45rem)/1.15 var(--serif);color:var(--navy)}
.pk9__k{font-size:.92rem;line-height:1.55;color:#4a4652}
.pk9:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pk9-g.gewaehlt .pk9{--s:-4px}
.pk9-g .pk9.weg{opacity:.16;--s:14px}
@media (max-width:900px){#pakete .pk9-kopf{grid-template-columns:1fr auto}#pakete .pk9-kopf>:first-child{grid-column:1/-1}.pk9{flex-basis:78%;--y:0px!important}.pk9:nth-child(even){--y:22px!important}.pk9-wahl button{padding:13px 18px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.pk9{transition:none}}
/* ===== Ende PACKAGES ===== */
html:not(#a):not(#b) .psk[data-r],html:not(#a):not(#b) .psk[data-r].da{--ce-weg:clamp(150px,17vw,260px)}
@supports (animation-timeline:view()){html:not(#a):not(#b) .psk[data-r],html:not(#a):not(#b) .psk[data-r].da,html:not(#a):not(#b) .psk[data-r].da.ce-fertig{animation-range:cover 0% cover 72vh,normal}}

/* ===== KERBEN STARTSEITE EINHEITLICH (Robert 15.10.2026: «Schrift in den Einkerbungen ein bisschen kleiner», «Im Haus: Schrift nicht lesbar», «einheitlich abschnittübergreifend») ===== */
#willkommen .kerbe,#anlass .kerbe,#im-haus .kerbe{font-size:clamp(1.1rem,1.45vw,1.5rem)!important;line-height:1.15;-webkit-text-stroke:0}
#anlass .gal .kerbe{padding:clamp(8px,.8vw,12px) clamp(18px,1.8vw,26px) clamp(8px,.8vw,12px) clamp(14px,1.4vw,20px)}
#im-haus .kerbe .z>span{transform:none}
/* ===== Ende KERBEN ===== */


/* FASSUNG Wellness Startseite «Papierbogen» (Robert 15.10.2026, varianten-wellness2.html Nr. 16, löst Nr. 15 ab) */
.wd-bogen{margin:0;padding:clamp(10px,1.2vw,16px);background:#fbf6ea;border-radius:10px;box-shadow:0 50px 70px -40px rgba(60,44,12,.6)}
.wd-bogen__i{border:1px solid rgba(138,117,69,.45);border-radius:4px;padding:clamp(28px,4.4vw,64px) clamp(10px,1.4vw,22px) clamp(10px,1.4vw,22px)}
.wd--bogen .wd-tafel{max-width:640px;margin:0 auto clamp(36px,4vw,56px)}
.wd-sechs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.wd-sechs figure{margin:0}
.wd-sechs img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;outline:1px solid rgba(138,117,69,.45);outline-offset:-7px}
@media (max-width:860px){.wd-sechs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wd-sechs img{outline-offset:-5px}}

/* Packages auf der Startseite (Robert 16.10.2026: «wackeln … von links nach rechts … sollen einfach ganz smooth mit meinem Scrollen reingeschwebt kommen»):
   nur der Weg nach oben am Scrollen, kein Federn und kein Pulsieren dazu */
html:not(#a):not(#b) #pakete .pk9-wrap[data-r],html:not(#a):not(#b) #pakete .pk9-wrap[data-r].da{opacity:1!important;transform:none!important;scale:none!important;translate:none;animation:none!important}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  html:not(#a):not(#b) #pakete .pk9-wrap[data-r],html:not(#a):not(#b) #pakete .pk9-wrap[data-r].da{translate:0 0;will-change:translate;animation:ce-zug cubic-bezier(.25,.1,.3,1) both!important;animation-duration:auto!important;animation-timeline:view()!important;animation-range:cover 0% cover 70vh!important;animation-delay:0s!important;--ce-weg:clamp(90px,10vw,150px)}}}

/* Veranstaltungen, Region: Link zur offiziellen Seite des Veranstalters (Robert 16.10.2026) */
.sb-monat .sb-termin__web{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#0b1f40;text-decoration:none;border-bottom:1px solid rgba(138,117,69,.5);padding-bottom:3px}
.sb-monat .sb-termin__web i{display:inline-flex;width:10px;height:10px}.sb-monat .sb-termin__web svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
.sb-monat .sb-termin__web:hover{color:var(--taupe)}

/* Seminarpauschalen + Hochzeitspackages (Robert 16.10.2026): Überschriften kleiner, Preis kleiner und mittig */
html body :is(#hz,#pauschalen) .st{--kh:clamp(52px,4.4vw,64px)}
html body :is(#hz,#pauschalen) .st__n{font-size:clamp(1.65rem,2.3vw,2.4rem)}
html body :is(#hz,#pauschalen) .st__gross{font-size:clamp(1.12rem,1.4vw,1.42rem);line-height:1.3}
html body :is(#hz,#pauschalen) .st__preis{justify-content:center;text-align:center;font-size:clamp(1.2rem,1.5vw,1.55rem)}
/* 16.10.2026, 18:50: das Hereinschweben der Packages läuft jetzt über seitenbau.js (auch in Safari), die Reihe selbst steht still */
html:not(#a):not(#b) #pakete .pk9-wrap[data-r],html:not(#a):not(#b) #pakete .pk9-wrap[data-r].da{animation:none!important;translate:none!important}
#pakete .pk9{will-change:translate}