/* Grand Beau-Rivage Interlaken, Seite «Kontakt & Anreise» (kontakt.html), Fassung 2 vom 12.10.2026.
   Robert: «komplett nach den neuesten Designstandards, 3D-Kacheln, federleichter Effekt, Zoom-In, Tasty Studios Style».
   Aufbau aus dem, was am selben Tag abgenommen wurde: Anreise wie «Harder Kulm» (grosses Foto mit Namen in der Ecke, kleine zum Tauschen,
   Zeichen in Gold und Titel mittig, Angaben als Billett), die vier Wege als Billette mit echten Kerben, die Nachricht als Briefbogen vor
   der Halle (Baustein .anf von Feiern & Tagen, assets/css/feiern.css). Das Billett .rg-tk und das Zeichen .rg-z stehen in ausfluege.css.
   Nur diese Seite lädt die Datei (inhalt/i_kontakt.py). Bewegung nur über transform und opacity. */

/* ---------- Anreise: Haus links, Adresse und Kontakt rechts ---------- */
.kt-anreise{--kf:var(--papier)}
.kt-anreise.fl{padding-top:clamp(58px,5.8vw,100px);padding-bottom:clamp(70px,7.4vw,124px)}
.kt-anreise .betrieb{align-items:center}
@media (min-width:861px){.kt-anreise .betrieb>.b{grid-column:1/7}.kt-anreise .betrieb>.t{grid-column:7/-1}}
.kt-anreise .t .raum--nur.rg-z{margin:0 auto clamp(18px,2vw,30px)}
.kt-anreise .t .raum--nur.rg-z img{width:clamp(96px,8.6vw,140px)}
.kt-anreise .t .d2{text-align:center;font-size:clamp(2.5rem,4.6vw,4.9rem);line-height:1.04}
.kt-anreise .b>.foto:first-child img{aspect-ratio:4/3.1}
.kt-anreise .nebenbei .foto img{aspect-ratio:4/3}
.kt-adr{margin:clamp(18px,2vw,28px) 0 0;text-align:center;font-style:normal;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.7vw,1.8rem);line-height:1.34;color:var(--tinte)}
.kt-adr b{display:block;margin-bottom:clamp(8px,.9vw,12px);font-family:var(--caps);font-weight:600;font-size:clamp(.68rem,.76vw,.8rem);letter-spacing:.28em;line-height:1.5;text-transform:uppercase;color:var(--akzent,#967D40)}
.kt-anreise .rg-tk{margin-top:clamp(26px,2.8vw,42px)}
.kt-anreise .rg-tk__drei dd{font-size:clamp(1.1rem,1.36vw,1.44rem)}
.kt-anreise .t .kn-reihe{justify-content:center;margin-top:clamp(24px,2.6vw,36px)}

/* ---------- Die vier Wege als Billette: Kopfzeile, Zeichen, Weg, das Kürzel gross; darunter Perforation und der Abriss mit dem Hinweis.
   Hauptteil und Abriss sind zwei Flächen mit je einem ausgeschnittenen Viertelkreis an der Naht (echte Kerben), der Schatten liegt dahinter.
   Die Perforationen stehen auf einer Höhe (subgrid). ---------- */
.kt-wege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:0 clamp(22px,2.3vw,38px);margin-top:clamp(60px,6.4vw,104px)}
.kt-b,.kt-b.da{--kr:13px;--m:#0000 98%,#000;position:relative;display:grid;grid-row:span 2;grid-template-rows:auto 1fr;margin:0;color:var(--tinte);isolation:isolate}
@supports (grid-template-rows:subgrid){.kt-b,.kt-b.da{grid-template-rows:subgrid}}
.kt-b::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:20px;pointer-events:none;box-shadow:0 38px 46px -30px rgba(20,26,46,.5),0 14px 20px -14px rgba(20,26,46,.28)}
.kt-b__haupt{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(22px,2.2vw,32px) clamp(20px,2.1vw,32px) clamp(24px,2.5vw,36px);text-align:center;border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#fdf9f1,#f8f1e3);box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 rgba(150,125,64,.26),inset -1px 0 0 rgba(150,125,64,.26);
  -webkit-mask:radial-gradient(circle var(--kr) at 0 100%,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 100%,var(--m)) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kr) at 0 100%,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 100%,var(--m)) right/51% 100% no-repeat}
.kt-b__abriss{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.1vw,30px) clamp(20px,2.1vw,32px) clamp(24px,2.5vw,34px);text-align:center;border-top:2px dashed rgba(150,125,64,.46);border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,#f5ecd9,#ebdfc6);box-shadow:inset 0 -2px 0 #d8c7a4,inset 1px 0 0 rgba(150,125,64,.26),inset -1px 0 0 rgba(150,125,64,.26);
  -webkit-mask:radial-gradient(circle var(--kr) at 0 0,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 0,var(--m)) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kr) at 0 0,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 0,var(--m)) right/51% 100% no-repeat}
.kt-b__haupt::after,.kt-b__abriss::before{content:'';position:absolute;border:1px solid rgba(150,125,64,.38);pointer-events:none}
.kt-b__haupt::after{inset:9px 9px 0 9px;border-bottom:0;border-radius:12px 12px 0 0}
.kt-b__abriss::before{inset:0 9px 9px 9px;border-top:0;border-radius:0 0 12px 12px}
.kt-b__kopf{display:flex;justify-content:space-between;gap:14px;align-self:stretch;margin:0;padding-bottom:12px;border-bottom:1px solid rgba(150,125,64,.3);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a7238}
.kt-b__haupt img{width:clamp(48px,4vw,60px);height:auto;margin-top:clamp(18px,1.9vw,26px);filter:brightness(.82) saturate(1.45) contrast(1.14) drop-shadow(0 1px 2px rgba(60,40,10,.3))}
.kt-b h3{margin:clamp(12px,1.2vw,16px) 0 0;font-family:var(--caps);font-weight:600;font-size:clamp(1rem,1.22vw,1.3rem);letter-spacing:.2em;line-height:1.25;text-transform:uppercase;color:#8a7238}
.kt-b__gross{margin:clamp(14px,1.5vw,22px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,3.3vw,3.6rem);line-height:1.08;font-variant-numeric:lining-nums;white-space:nowrap;color:var(--tinte)}
.kt-b__satz{max-width:22ch;margin:clamp(12px,1.3vw,18px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.12rem,1.3vw,1.36rem);line-height:1.28;text-wrap:balance;color:rgba(20,26,46,.86)}
.kt-b__abriss p{position:relative;margin:0;font-size:clamp(.92rem,.98vw,1rem);line-height:1.6;text-wrap:pretty;color:rgba(20,26,46,.78)}
@media (max-width:1100px){
  .kt-wege{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:clamp(28px,3.4vw,44px) clamp(22px,2.6vw,38px)}
  .kt-b,.kt-b.da{grid-row:auto;grid-template-rows:auto 1fr}
}
@media (max-width:600px){.kt-wege{grid-template-columns:minmax(0,1fr)}}
[dir="rtl"] .kt-b__gross{direction:ltr;unicode-bidi:isolate}

/* ---------- Nachricht: Briefbogen vor der Halle (Baustein .anf), Kontakt als Platte wie bei der Anfrage von Feiern & Tagen ---------- */
#nachricht .anf__t .d2{font-size:clamp(3rem,6vw,6.6rem)!important;line-height:1}
#nachricht .anf__kontakt{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:700px;margin-top:clamp(30px,3vw,46px);padding:clamp(22px,2.2vw,30px) 0;border:0;border-radius:22px;
  background:linear-gradient(160deg,rgba(48,54,80,.92),rgba(22,26,42,.94));box-shadow:inset 0 0 0 1px rgba(210,191,152,.45),inset 0 0 0 6px rgba(17,20,31,.3),inset 0 0 0 7px rgba(210,191,152,.18),0 40px 60px -36px rgba(0,0,0,.8)}
#nachricht .anf__kontakt a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px clamp(14px,2vw,28px);border:0;text-align:center}
#nachricht .anf__kontakt a+a{border-left:1px solid rgba(210,191,152,.35)}
#nachricht .anf__kontakt small{display:flex;align-items:center;gap:10px;font-family:var(--caps);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
#nachricht .anf__kontakt small::before,#nachricht .anf__kontakt small::after{content:'';width:18px;height:1px;background:rgba(210,191,152,.55)}
#nachricht .anf__kontakt b{font:500 clamp(1.1rem,1.35vw,1.4rem)/1.2 var(--serif);color:#fcf7ee;white-space:nowrap}
#nachricht .anf__kontakt a:hover b{color:var(--gold)}
#nachricht .anf__f textarea{min-height:120px}
@media (max-width:860px){
  #nachricht .anf__kontakt{grid-template-columns:minmax(0,1fr)}
  #nachricht .anf__kontakt a+a{border-left:0;border-top:1px solid rgba(210,191,152,.35);padding-top:16px;margin-top:10px}
  #nachricht .anf__kontakt b{white-space:normal;word-break:break-word}
}

/* ---------- Kopf von Kontakt und Anreise (Robert 12.10.2026: «soll von links reinkommen und nicht in den Boden gehen») ----------
   Die Platte ragte unten in den nächsten Abschnitt, der sie abschnitt. Jetzt steht sie ganz im Bild, über der runden Kante des
   folgenden Abschnitts, und gleitet beim Laden von links herein (nur transform und opacity). */
.sk--tafel{margin-bottom:0}
.sk--tafel .sk__tafel{bottom:calc(var(--platte,clamp(26px,3.6vw,56px)) + clamp(14px,2.4svh,30px));animation:ktVonLinks 1.9s cubic-bezier(.16,1,.3,1) .1s backwards}
@keyframes ktVonLinks{from{opacity:0;transform:translate3d(clamp(-420px,-26vw,-140px),0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sk--tafel .sk__tafel{animation:none}}

/* ---------- Vor Ihrer Anreise: drei Schritte im Aufbau «Harder Kulm», Felder auf einem Briefbogen ---------- */
.va-schritt.fl--papier{--kf:var(--papier)}.va-schritt.fl--creme{--kf:var(--creme)}.va-schritt.fl--nacht{--kf:var(--nacht)}
.va-schritt.fl{padding-top:clamp(64px,6.4vw,110px);padding-bottom:clamp(70px,7.4vw,124px)}
.va-schritt .betrieb{align-items:center}
@media (min-width:861px){.va-schritt .betrieb>.b{grid-column:1/7}.va-schritt .betrieb>.t{grid-column:7/-1}.va-schritt .betrieb--um>.b{grid-column:7/-1;grid-row:1}.va-schritt .betrieb--um>.t{grid-column:1/7;grid-row:1}}
.va-schritt .t .raum--nur.rg-z{margin:0 auto clamp(18px,2vw,30px)}
.va-schritt .t .raum--nur.rg-z img{width:clamp(96px,8.6vw,140px)}
.va-schritt .t .d2{text-align:center;font-size:clamp(2.5rem,4.6vw,4.9rem);line-height:1.04}
.va-schritt .t .lauf{margin-top:clamp(18px,2vw,28px)}
.va-schritt .b>.foto:first-child img{aspect-ratio:4/3.1}
.va-schritt .nebenbei .foto img{aspect-ratio:4/3}
.va-schritt.dunkel .foto figcaption{color:#fff}
.va-schritt .t .kn-reihe{justify-content:center;margin-top:clamp(24px,2.6vw,36px)}
/* Briefbogen */
.va-bogen{margin-top:clamp(26px,2.8vw,42px);text-align:left;color-scheme:light}
.va-bogen .anf__rand{overflow:visible}
.va-bogen .anf__wz{width:58%}
.va-bogen [hidden]{display:none!important}
.va-bogen .anf__f :is(input,select,textarea){color:var(--tinte)}
.va-bogen .anf__f textarea{min-height:84px}
.va-bogen .dt-anz{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--tinte)}
.va-bogen .dt-anz--leer{color:rgba(26,29,40,.62)}
.va-zeile>span{font-size:.7rem!important;line-height:1.5}
/* Ja/Nein: Frage links, Wahl rechts; gewählt ist die dunkle Taste mit heller Schrift */
.va-zeile{display:flex!important;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid rgba(124,106,82,.45)}
.va-zeile>span{flex:1 1 12rem}
.va-bogen .dn-schalter{flex:0 0 auto;width:min(13.5rem,100%);margin:0;gap:6px}
.va-bogen .dn-schalter button{height:40px;color:var(--tinte);font:500 1.02rem var(--serif);background:linear-gradient(180deg,#fffdf8,#f1e7d2);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,125,64,.42),0 6px 10px -8px rgba(20,26,46,.4)}
.va-bogen .dn-schalter button[aria-pressed="true"]{color:#f7efdd;background:linear-gradient(180deg,#34406e,#1b2033 70%,#12162a);box-shadow:inset 0 1px 0 rgba(190,206,255,.34),inset 0 0 0 1px rgba(230,210,162,.6),0 8px 14px -8px rgba(20,26,46,.6)}
/* Behandlung wählen: Knopf und Liste auf Papier */
.va-bogen .dn-wahl__knopf{padding:6px 0 9px;color:var(--tinte);border-bottom:1px solid rgba(124,106,82,.45)}
.va-bogen .dn-wahl__knopf b{font-family:var(--serif);font-weight:500;font-size:1.18rem;color:var(--tinte)}
.va-bogen .dn-wahl__knopf span small{color:var(--taupe-tief);opacity:1}
.va-bogen .dn-wahl__knopf i,.va-bogen .dn-wahl__z i{color:rgba(26,29,40,.62);opacity:1}
.va-bogen .dn-wahl__knopf em,.va-bogen .dn-wahl__z em{font-family:var(--serif);font-weight:500;color:var(--taupe-tief)}
.va-bogen .dn-wahl__knopf svg{stroke:var(--taupe-tief)}
.va-bogen .dn-wahl__liste{background:#fdf9f1;box-shadow:inset 0 0 0 1px rgba(150,125,64,.4),0 30px 50px -20px rgba(20,26,46,.55)}
.va-bogen .dn-wahl__gruppe + .dn-wahl__gruppe{border-top-color:rgba(150,125,64,.22)}
.va-bogen .dn-wahl__gruppe .mono{color:var(--taupe-tief)}
.va-bogen .dn-wahl__z{color:var(--tinte)}
.va-bogen .dn-wahl__z:hover{background:rgba(150,125,64,.1)}
.va-bogen .dn-wahl__z[aria-selected="true"]{background:rgba(150,125,64,.18)}

/* ---------- Zusammenfassung als Billett: links die Wünsche, rechts der Abriss mit den Extras und dem Knopf ---------- */
.va-senden.fl{padding-top:clamp(70px,7.4vw,124px);padding-bottom:clamp(70px,7.4vw,124px)}
.va-senden{--kf:var(--nacht)}
.rg-tk--gross{grid-template-columns:minmax(0,1fr) clamp(250px,34%,400px);max-width:1180px;margin:0 auto;--kr:18px}
.rg-tk--gross::before{box-shadow:0 calc(44px + var(--kr)) 54px -30px rgba(0,0,0,.8),0 calc(16px + var(--kr)) 24px -14px rgba(0,0,0,.5)}
.rg-tk--gross .rg-tk__haupt{padding:clamp(28px,3vw,46px) clamp(26px,3.2vw,52px) clamp(30px,3.2vw,48px)}
.rg-tk--gross .rg-tk__kopf{font-size:11px;padding-bottom:14px}
.va-liste{list-style:none;margin:clamp(14px,1.6vw,22px) 0 0;padding:0}
.va-liste li{padding:clamp(11px,1.1vw,15px) 0;border-bottom:1px solid rgba(150,125,64,.26);font-family:var(--serif);font-weight:500;font-size:clamp(1.12rem,1.36vw,1.42rem);line-height:1.3;color:var(--tinte)}
.va-liste li:last-child{border-bottom:0;padding-bottom:0}
.rg-tk--gross .rg-tk__abriss{gap:clamp(10px,1.1vw,14px);padding:clamp(26px,2.8vw,42px) clamp(20px,2.2vw,34px)}
.rg-tk--gross .rg-tk__abriss img{width:clamp(52px,4.4vw,66px)}
.va-summe{position:relative;display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(3rem,4.6vw,5rem);line-height:1;font-variant-numeric:lining-nums;color:var(--tinte)}
.va-summe small{font-family:var(--caps);font-weight:600;font-size:.72rem;letter-spacing:.26em;color:#8a7238}
.va-summe b{font-weight:500}
.va-klein{position:relative;max-width:32ch;margin:0 0 clamp(6px,.8vw,12px);font-size:.88rem;line-height:1.55;color:rgba(20,26,46,.7)}
.rg-tk--gross .rg-tk__abriss .kn{position:relative}
@media (max-width:760px){.rg-tk--gross{grid-template-columns:minmax(0,1fr) 230px}.rg-tk--gross .rg-tk__abriss .kn{font-size:10px;letter-spacing:.1em;padding-left:16px;gap:10px}}
@media (max-width:560px){.rg-tk--gross{grid-template-columns:minmax(0,1fr)}.rg-tk--gross .rg-tk__abriss{flex-direction:column}}
[dir="rtl"] .va-summe{direction:ltr;unicode-bidi:isolate}

/* ---------- Die Platte im Kopf als Billett (Robert 12.10.2026: «Höheweg 211 bitte wie ein Ticket gestalten. Die Kachel.») ----------
   Zwei Teile in Marine: oben Zeile, Titel und Satz mit der Tapete, unter der Perforation der Abriss mit den Knöpfen. Feiner Goldrahmen,
   zur Naht hin offen. An der Naht ist links und rechts aus jedem Teil ein Viertelkreis geschnitten: durch die Kerben sieht man das Foto.
   Der Schatten liegt hinter dem Billett. */
.sk__tafel--billett{--kr:17px;--m:#0000 98%,#000;padding:0;background:none;box-shadow:none;border-radius:0;isolation:isolate}
.sk__tafel--billett::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:26px;box-shadow:0 44px 70px -26px rgba(0,0,0,.85),0 16px 26px -14px rgba(0,0,0,.55);pointer-events:none}
.skb__haupt{position:relative;padding:clamp(28px,2.8vw,44px) clamp(34px,3.6vw,56px) clamp(22px,2.2vw,32px);border-radius:26px 26px 0 0;background:var(--marine,#1b2033) url(../img/tapete-dunkel.webp?v=08c86b19) 50% 0/340px auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-mask:radial-gradient(circle var(--kr) at 0 100%,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 100%,var(--m)) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kr) at 0 100%,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 100%,var(--m)) right/51% 100% no-repeat}
.skb__abriss{position:relative;padding:clamp(18px,1.9vw,26px) clamp(34px,3.6vw,56px) clamp(24px,2.4vw,34px);border-top:2px dashed rgba(230,210,162,.5);border-radius:0 0 26px 26px;background:linear-gradient(180deg,#1f2540,#161a2c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4);
  -webkit-mask:radial-gradient(circle var(--kr) at 0 0,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 0,var(--m)) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kr) at 0 0,var(--m)) left/51% 100% no-repeat,radial-gradient(circle var(--kr) at 100% 0,var(--m)) right/51% 100% no-repeat}
.skb__haupt::after,.skb__abriss::before{content:'';position:absolute;border:1px solid rgba(230,210,162,.42);pointer-events:none}
.skb__haupt::after{inset:11px 11px 0 11px;border-bottom:0;border-radius:16px 16px 0 0}
.skb__abriss::before{inset:0 11px 11px 11px;border-top:0;border-radius:0 0 16px 16px}
.skb__haupt .raum{margin-bottom:clamp(16px,1.8vw,26px);padding-bottom:clamp(12px,1.2vw,16px);border-bottom:1px solid rgba(230,210,162,.28)}
.skb__abriss .kn-reihe{position:relative;margin:0}
.skb__haupt .sk__satz{margin-top:clamp(14px,1.5vw,22px)}
@media (min-height:700px) and (max-height:960px) and (min-width:861px){.skb__haupt .d2{font-size:clamp(2.2rem,4.6vw,5rem)}}
@media (max-width:860px){.skb__haupt{padding:28px 24px 22px}.skb__abriss{padding:20px 24px 26px}}

/* ---------- Umgebungskarte als Handskizze (umgebungskarte.py): ein Bogen Papier mit feinem Rahmen, darauf die Zeichnung ---------- */
.kt-karte{position:relative;margin:clamp(60px,6.4vw,104px) 0 0;padding:clamp(10px,1.1vw,16px);border-radius:var(--r-xl);background:linear-gradient(180deg,#fdf9f1,#f6eedd 70%,#efe4cf);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,125,64,.26),0 2px 0 #d8c7a4,0 44px 56px -34px rgba(20,26,46,.55),0 14px 22px -14px rgba(20,26,46,.28)}
.kt-karte::after{content:'';position:absolute;inset:clamp(10px,1.1vw,16px);border:1px solid rgba(150,125,64,.42);border-radius:calc(var(--r-xl) - 10px);pointer-events:none}
.kt-karte{direction:ltr}
.kt-karte .uk{display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 10px);background:#fbf5e9}
.uk-t{font-family:var(--serif);font-weight:500;fill:#262b40}
.uk-o{font-size:25px;font-style:italic}
.uk-k{font-family:var(--caps);font-size:15px;letter-spacing:.2em;text-transform:uppercase;fill:rgba(38,43,64,.72)}
.uk-b{font-family:var(--caps);font-size:21px;letter-spacing:.2em;text-transform:uppercase}
.uk-see{font-size:40px;font-style:italic;fill:#3f6f78;letter-spacing:.06em}
.uk-w{font-size:26px;font-style:italic;fill:#3f6f78;letter-spacing:.14em}
.uk-g{font-family:var(--caps);font-size:16px;letter-spacing:.22em;text-transform:uppercase;fill:#8a7238}
.uk-haus{font-size:36px;fill:#8a7238}
.uk-titel{font-family:var(--caps);font-size:40px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:700px){.kt-karte{margin-inline:calc(-1*var(--rand) + 10px);overflow-x:auto;-webkit-overflow-scrolling:touch}.kt-karte .uk{width:760px;max-width:none}.kt-karte::after{display:none}}
/* ---------- Tafel und Menüleiste (14.10.2026) ----------
   Auf flachen Bildschirmen (Laptop, Fenster unter rund 800 px Höhe) war die Tafel höher als der Platz unter der Leiste und schob sich darunter
   (1366 × 650: 140 px, die Zeile über dem Titel lag hinter dem Menü, der obere Rand über dem Seitenanfang). Die Tafel steht jetzt im Fluss am
   unteren Rand des Kopfs; reicht die Höhe nicht, wird der Kopf so hoch wie Leiste, Tafel und Abstand zusammen. Auf hohen Bildschirmen steht sie, wo sie stand. */
@media (min-width:861px){
  .sk.sk--tafel{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:124px var(--rand) calc(var(--platte,clamp(26px,3.6vw,56px)) + clamp(14px,2.4svh,30px))}
  [dir="rtl"] .sk.sk--tafel{align-items:flex-start}
  .sk.sk--tafel .sk__tafel{position:relative;right:auto;bottom:auto;flex:none}
}

/* Anreise (Robert 16.10.2026, Bildschirmfoto «Ihr Aufenthalt»: «die Bilder bündig mit dem rechten Bereich»): die Bildspalte reicht oben und unten
   genau so weit wie die Spalte mit Titel und Briefbogen; das grosse Foto nimmt die Höhe auf, die drei kleinen bleiben 4:3 und schliessen unten ab. */
@media (min-width:861px){
  .va-schritt .betrieb{align-items:stretch}
  .va-schritt .betrieb>.t{display:flex;flex-direction:column;justify-content:center}
  .va-schritt .betrieb>.b{display:flex;flex-direction:column}
  .va-schritt .betrieb>.b>.foto:first-child{flex:1 1 auto;min-height:0;display:flex}
  .va-schritt .betrieb>.b>.foto:first-child img{aspect-ratio:auto;flex:1 1 auto;min-width:0;width:100%;height:auto;align-self:stretch;object-fit:cover}
}
/* Spa: die aufgeklappte Liste der Behandlungen ragt über den Abschnitt hinaus und liegt über dem nächsten (Robert 16.10.2026: «da ist das so abgeschnitten»). */
.va-schritt:has(.dn-wahl__liste:not([hidden])){overflow-x:clip;overflow-y:visible;z-index:6}