/* ═══════════════════════════════════════════════════════════════════════════
   HOTEL CORNELIA — Kundenseite (mehrseitig), 29.09.2026
   Liegt ÜBER stil.css + pro.css (Vorlage 1 der Demo). Alle neuen Bausteine
   tragen das Präfix „ks-", damit nichts mit stil.css/pro.css kollidiert.
   Regeln: keine backdrop-filter auf festen Elementen, keine Deckkraft am
   Scrollstand (Sichtbarkeit nur über .sicht von skript.js), Federkurve.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --feder: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%,
                  .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
                  1.001 85.1%, 1);
  --rot:#9a071e;
  --rot-tief:#6f0516;
  --nacht:#1c2129;        /* dunkles Blaugrau der Ortler-Abende — Leiste, dunkle Bänder, Fuß */
  --ks-rand:clamp(1.25rem,5vw,4.5rem);
  --breite:1320px;
}

/* Der Bau-Schritt trägt echte width/height ein (gegen Layout-Springen). Ohne
   diese Zeile würde das height-Attribut jede aspect-ratio-Regel überstimmen
   (Pop-up-Bild wurde 2160 px hoch). Klassenregeln mit height:100% gewinnen weiter. */
img{height:auto}

/* ── Kopf: fest ohne Glas-Blur (kostet fps auf Windows), auf Unterseiten
      ist das Logo sofort da (kein Logo im Titelbild) ─────────────────────── */
html.pro .kopf.fest{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.985)}
body.unterseite .kopf .marke{opacity:1;visibility:visible}

/* Menü mit Untermenüs (Bau-Schritt erzeugt .hat-unter > .unter) */
.menue .hat-unter{position:relative}
.menue .unter{
  position:absolute;left:-1.4rem;top:100%;min-width:15.5rem;margin:0;padding:.7rem 0;list-style:none;
  background:#fff;color:var(--tinte);border-radius:3px;
  box-shadow:0 18px 50px -18px rgba(20,24,30,.35),0 0 0 1px rgba(20,24,30,.06);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .6s var(--feder),visibility 0s linear .25s;
}
.menue .hat-unter:hover > .unter,
.menue .hat-unter:focus-within > .unter{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menue .unter a{display:block;padding:.62rem 1.4rem;font-size:.74rem;letter-spacing:.12em;opacity:.8;white-space:nowrap}
.menue .unter a::after{display:none}
.menue .unter a:hover,.menue .unter a:focus-visible,.menue .unter a[aria-current="page"]{opacity:1;color:var(--rot)}
.menue .unter li + li{border-top:1px solid rgba(20,24,30,.06)}
.menue a[aria-current="page"]{opacity:1}

/* Sechs Menüpunkte + zwei Knöpfe passen erst ab ~1240 px nebeneinander.
   Darunter: Burger mit demselben aufgeräumten Vollbild-Menü wie am Handy. */
@media (max-width:1240px){
  html.pro .kopf .menue,html.pro .kopf .kopf-cta{display:none}
  html.pro .kopf .burger{display:block}
  html.pro .kopf{display:flex}
  html.pro .kopf.offen{
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
    grid-template-areas:"marke burger" "nav nav" "cta cta";align-items:center;column-gap:1rem;
    height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:clamp(.9rem,3vw,1.2rem) var(--ks-rand) calc(1.6rem + env(safe-area-inset-bottom,0px));
    background:var(--papier);color:var(--tinte);
  }
  html.pro .kopf.offen .marke{grid-area:marke;justify-self:start;margin:0;opacity:1;visibility:visible}
  html.pro .kopf.offen .burger{grid-area:burger;justify-self:end;margin:0}
  html.pro .kopf.offen > nav{grid-area:nav;align-self:center;width:100%;margin:1.5rem 0}
  html.pro .kopf.offen .menue{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 3rem;
    width:100%;margin:0;padding:0;list-style:none}
  html.pro .kopf.offen .menue > li{border-top:1px solid var(--linie);padding:.9rem 0 1.1rem;
    animation:menue-rein .7s cubic-bezier(.34,1.3,.64,1) both}
  html.pro .kopf.offen .menue > li > a{display:block;padding:0;font-family:var(--display);
    font-size:clamp(1.5rem,5vw,1.9rem);font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--tinte);opacity:1}
  html.pro .kopf.offen .menue > li > a::after{display:none}
  html.pro .kopf.offen .unter{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:none;padding:.35rem 0 0;min-width:0}
  html.pro .kopf.offen .unter li + li{border:0}
  html.pro .kopf.offen .unter a{padding:.3rem 0;font-size:.95rem;letter-spacing:0;text-transform:none;opacity:.72;white-space:normal}
  html.pro .kopf.offen .kopf-cta{grid-area:cta;display:flex;gap:.8rem;width:100%;margin:0;padding-top:1rem}
  html.pro .kopf.offen .kopf-cta .knopf{display:inline-flex;justify-content:center;flex:1 1 0;max-width:15rem;margin:0;
    background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
  html.pro .kopf.offen .kopf-cta .knopf-buchen{background:var(--rot);border-color:var(--rot)}
}

/* ── Rahmen ────────────────────────────────────────────────────────────── */
.ks-innen{width:min(100% - 2*var(--ks-rand),var(--breite));margin-inline:auto}
.ks-band{position:relative;padding-block:clamp(4.5rem,10vw,8.5rem);background:var(--papier)}
.ks-band.creme{background:var(--creme)}
.ks-band.nacht{background:var(--nacht);color:var(--schrift-hell)}
.ks-band.nacht h2,.ks-band.nacht h3{color:#fff}
.ks-band.eng{padding-block:clamp(3rem,6vw,5rem)}
.ks-rubrik{display:block;margin:0 0 1.1rem;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rot)}
.ks-band.nacht .ks-rubrik{color:var(--messing)}
.ks-h2{margin:0;font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.06;letter-spacing:-.02em;color:var(--tinte);max-width:18ch}
.ks-h2 em{font-style:italic;color:var(--rot)}
.ks-band.nacht .ks-h2 em{color:var(--messing)}
.ks-text{font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.75;color:var(--text);max-width:62ch}
.ks-text p{margin:0 0 1.1em}
.ks-text p:last-child{margin-bottom:0}
.ks-text a{color:var(--rot);text-underline-offset:.2em}
.ks-band.nacht .ks-text{color:rgba(245,246,242,.78)}
.ks-band.nacht .ks-text a{color:var(--messing)}

/* Einblenden: nur Klassen, keine Scroll-Deckkraft. data-sicht → .sicht (skript.js) */
.ks-auf{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform 1.1s var(--feder)}
.sicht .ks-auf,.ks-auf.sicht{opacity:1;transform:none}
.ks-auf.v1{transition-delay:.08s}.ks-auf.v2{transition-delay:.16s}.ks-auf.v3{transition-delay:.24s}.ks-auf.v4{transition-delay:.32s}
.ks-bild{position:relative;margin:0;overflow:hidden;border-radius:2px;background:var(--band)}
.ks-bild img{display:block;width:100%;height:100%;object-fit:cover}
.ks-aufdecken{clip-path:inset(12% 6% 12% 6%);transition:clip-path 1.4s var(--feder)}
.ks-aufdecken img{transform:scale(1.14);transition:transform 1.8s var(--feder)}
.sicht .ks-aufdecken,.ks-aufdecken.sicht{clip-path:inset(0 0 0 0)}
.sicht .ks-aufdecken img,.ks-aufdecken.sicht img{transform:scale(1)}
.ks-bild figcaption{position:absolute;left:1rem;bottom:.9rem;font-size:.72rem;letter-spacing:.08em;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ── 1 · Unterseiten-Titelbild: groß, atmet, Titel unten links ─────────── */
.ks-held{position:relative;height:max(460px,78dvh);overflow:hidden;background:var(--nacht);color:#fff;isolation:isolate}
.ks-held > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform-origin:60% 40%;animation:ks-atmen 22s ease-in-out infinite alternate}
@keyframes ks-atmen{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1%,-.5%)}}
.ks-held::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,18,26,.55) 0%,rgba(14,18,26,0) 26%),
    linear-gradient(15deg,rgba(14,18,26,.82) 0%,rgba(14,18,26,.35) 38%,rgba(14,18,26,0) 64%)}
.ks-held-inhalt{position:absolute;left:0;right:0;bottom:clamp(2.2rem,6vh,4.5rem);
  width:min(100% - 2*var(--ks-rand),var(--breite));margin-inline:auto}
.ks-brot{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem;padding:0;list-style:none;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.ks-brot li + li::before{content:"/";margin-right:.5rem;opacity:.5}
.ks-brot a{color:inherit;text-decoration:none}
.ks-brot a:hover{color:#fff}
.ks-held h1{margin:0;max-width:14ch;font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem);line-height:1;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}
.ks-held h1 em{font-style:italic;color:#f1dcc0}
.ks-held .ks-unterzeile{margin:1.2rem 0 0;max-width:46ch;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.55;
  color:rgba(255,255,255,.86)}
/* Titel zeilenweise hoch (Feder), sofort beim Laden */
.ks-held .ks-zeile{display:block;overflow:hidden;padding-bottom:.08em}
.ks-held .ks-zeile > span{display:block;transform:translateY(105%);animation:ks-hoch 1.3s var(--feder) forwards}
.ks-held .ks-zeile:nth-child(2) > span{animation-delay:.12s}
.ks-held .ks-brot,.ks-held .ks-unterzeile{opacity:0;animation:ks-ein 1s ease .35s forwards}
@keyframes ks-hoch{to{transform:none}}
@keyframes ks-ein{to{opacity:1}}
html:not(.offen) .ks-held .ks-zeile > span{animation-play-state:paused}
html:not(.offen) .ks-held .ks-brot,html:not(.offen) .ks-held .ks-unterzeile{animation-play-state:paused}
@media (max-width:760px){.ks-held{height:max(420px,68dvh)}}

/* ── 2 · Antwort zuerst: Leitsatz links, Fakten rechts ────────────────── */
.ks-antwort{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.ks-leit{margin:0;font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1vw,1.95rem);line-height:1.38;letter-spacing:-.012em;color:var(--tinte)}
.ks-leit b{font-weight:500;color:var(--rot)}
.ks-fakten{margin:0;padding:0;list-style:none;border-top:1px solid var(--linie)}
.ks-fakten li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--linie)}
.ks-fakten b{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,1.2rem + .9vw,2.1rem);color:var(--tinte);
  letter-spacing:-.02em;min-width:5.2ch}
.ks-fakten span{font-size:.95rem;line-height:1.45;color:var(--text)}
@media (max-width:900px){.ks-antwort{grid-template-columns:1fr}}

/* ── 3 · Kapitel: Bild + Text, abwechselnd ────────────────────────────── */
.ks-kapitel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7.5rem);align-items:center}
.ks-kapitel + .ks-kapitel{margin-top:clamp(5rem,11vw,9rem)}
.ks-kapitel.dreh > .ks-bild,.ks-kapitel.dreh > .ks-bildpaar{order:2}
.ks-kapitel > .ks-bild{aspect-ratio:4/3.1}
.ks-kapitel .ks-h2{margin-bottom:1.6rem}
.ks-bildpaar{position:relative;display:grid;grid-template-columns:1fr .62fr;gap:1rem;align-items:end}
.ks-bildpaar .ks-bild:first-child{aspect-ratio:3/3.6}
.ks-bildpaar .ks-bild:last-child{aspect-ratio:3/3.8;margin-bottom:-3rem}
@media (max-width:900px){
  .ks-kapitel{grid-template-columns:1fr}
  .ks-kapitel.dreh > .ks-bild,.ks-kapitel.dreh > .ks-bildpaar{order:0}
  .ks-bildpaar .ks-bild:last-child{margin-bottom:0}
}

/* Liste mit feinen Linien (Ausstattung, Leistungen, Anlagen) */
.ks-liste{margin:2rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem}
.ks-liste.eins{grid-template-columns:1fr}
.ks-liste li{padding:.95rem 0 .95rem 1.6rem;border-bottom:1px solid var(--linie);position:relative;line-height:1.5;color:var(--text)}
.ks-liste li::before{content:"";position:absolute;left:0;top:1.55rem;width:.7rem;height:1px;background:var(--rot)}
.ks-liste li b{display:block;color:var(--tinte);font-weight:600;margin-bottom:.15rem}
.ks-band.nacht .ks-liste li{border-color:var(--linie-hell);color:rgba(245,246,242,.78)}
.ks-band.nacht .ks-liste li b{color:#fff}
.ks-band.nacht .ks-liste li::before{background:var(--messing)}
@media (max-width:640px){.ks-liste{grid-template-columns:1fr}}

/* ── 4 · Kleber: Bild bleibt stehen, Text scrollt vorbei ─────────────── */
.ks-kleber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.ks-kleber-bild{position:sticky;top:max(6.5rem,12vh);height:min(76vh,720px)}
.ks-kleber-bild .ks-bild{height:100%}
.ks-kleber-bild .ks-bild + .ks-bild{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.ks-kleber-bild .ks-bild.an{opacity:1}
.ks-schritt{padding-block:clamp(2rem,9vh,6rem)}
.ks-schritt:first-child{padding-top:0}
.ks-schritt + .ks-schritt{border-top:1px solid var(--linie)}
.ks-schritt h3{margin:0 0 1rem;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem);
  letter-spacing:-.015em;color:var(--tinte)}
.ks-schritt .ks-bild-mobil{display:none}
@media (max-width:900px){
  .ks-kleber{grid-template-columns:1fr}
  .ks-kleber-bild{display:none}
  .ks-schritt .ks-bild-mobil{display:block;aspect-ratio:4/3;margin-bottom:1.4rem}
}

/* ── 5 · Tabelle (Preise, Vergleich, Fakten) ──────────────────────────── */
.ks-tabelle-rahmen{overflow-x:auto;margin-top:2rem;-webkit-overflow-scrolling:touch}
.ks-tabelle{width:100%;border-collapse:collapse;font-size:1rem;min-width:540px}
.ks-tabelle caption{caption-side:bottom;text-align:left;padding-top:1rem;font-size:.85rem;color:var(--text-leise)}
.ks-tabelle th,.ks-tabelle td{padding:1.05rem 1rem;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.ks-tabelle thead th{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);
  border-bottom:1px solid var(--tinte)}
.ks-tabelle tbody th{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--tinte)}
.ks-tabelle tbody th a{color:inherit;text-decoration:none}
.ks-tabelle tbody th a:hover{color:var(--rot)}
.ks-tabelle .zahl{white-space:nowrap;font-variant-numeric:tabular-nums}
.ks-tabelle .preis{font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--rot);white-space:nowrap}
.ks-tabelle tbody tr{transition:background .3s ease}
.ks-tabelle tbody tr:hover{background:rgba(20,27,20,.025)}

/* ── 6 · Häufige Fragen ───────────────────────────────────────────────── */
.ks-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ks-faq-liste{border-top:1px solid var(--linie)}
.ks-faq details{border-bottom:1px solid var(--linie)}
.ks-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  padding:1.35rem 0;font-family:var(--display);font-size:clamp(1.1rem,1rem + .4vw,1.35rem);color:var(--tinte);line-height:1.3}
.ks-faq summary::-webkit-details-marker{display:none}
.ks-faq summary::after{content:"";flex:none;width:.85rem;height:.85rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:var(--rot);transition:transform .6s var(--feder)}
.ks-faq details[open] summary::after{transform:rotate(135deg)}
.ks-faq summary:hover{color:var(--rot)}
.ks-faq .ks-antwort-text{padding:0 3rem 1.5rem 0;color:var(--text);line-height:1.7;max-width:64ch}
.ks-faq .ks-antwort-text a{color:var(--rot)}
.ks-faq details[open] .ks-antwort-text{animation:ks-faq-auf .6s var(--feder)}
@keyframes ks-faq-auf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.ks-faq{grid-template-columns:1fr}}

/* ── 7 · Weiter mit …: große Bildkachel zur nächsten Seite ───────────── */
.ks-weiter{position:relative;display:block;height:clamp(360px,62vh,620px);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:var(--nacht)}
.ks-weiter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);
  transition:transform 1.6s var(--feder)}
.ks-weiter::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,18,26,.78) 0%,rgba(14,18,26,.25) 55%,rgba(14,18,26,.05) 100%)}
.ks-weiter:hover img,.ks-weiter:focus-visible img{transform:scale(1.1)}
.ks-weiter-inhalt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:min(100% - 2*var(--ks-rand),var(--breite));margin-inline:auto}
.ks-weiter small{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:1rem}
.ks-weiter strong{display:block;max-width:14ch;font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4.4rem);line-height:1.02;letter-spacing:-.025em}
.ks-weiter .ks-pfeil{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.8rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.ks-pfeil i{display:block;width:3.2rem;height:1px;background:currentColor;position:relative;transition:width .7s var(--feder)}
.ks-pfeil i::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.ks-weiter:hover .ks-pfeil i{width:5rem}

/* ── 8 · Anfrage-Band am Seitenende ───────────────────────────────────── */
.ks-schluss{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:2rem 4rem;align-items:end}
.ks-schluss .ks-h2{max-width:16ch}
.ks-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}
.ks-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1.05rem 1.9rem;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid var(--tinte);color:var(--tinte);background:none;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .6s var(--feder)}
.ks-knopf:hover,.ks-knopf:focus-visible{transform:translateY(-2px)}
.ks-knopf.voll{background:var(--rot);border-color:var(--rot);color:#fff}
.ks-knopf.voll:hover,.ks-knopf.voll:focus-visible{background:var(--rot-tief);border-color:var(--rot-tief)}
.ks-knopf.dunkel{background:var(--tinte);border-color:var(--tinte);color:#fff}
.ks-band.nacht .ks-knopf{border-color:rgba(255,255,255,.6);color:#fff}
.ks-band.nacht .ks-knopf.voll{border-color:var(--rot)}
.ks-kontaktzeile{margin:1.4rem 0 0;font-size:.95rem;color:var(--text)}
.ks-band.nacht .ks-kontaktzeile{color:rgba(245,246,242,.7)}
.ks-kontaktzeile a{color:inherit}
@media (max-width:900px){.ks-schluss{grid-template-columns:1fr;align-items:start}}

/* ── 9 · Klebende Anfrage-Leiste (erscheint nach dem Titelbild) ───────── */
.ks-leiste{position:fixed;left:50%;bottom:clamp(.8rem,2vw,1.4rem);z-index:55;display:flex;align-items:center;gap:1.4rem;
  padding:.55rem .55rem .55rem 1.5rem;border-radius:999px;background:var(--nacht);color:#fff;
  box-shadow:0 18px 50px -14px rgba(10,14,22,.55);
  transform:translate(-50%,160%);transition:transform .9s var(--feder)}
.ks-leiste.zeigt{transform:translate(-50%,0)}
.ks-leiste span{font-size:.85rem;white-space:nowrap;color:rgba(255,255,255,.8)}
.ks-leiste span b{color:#fff;font-weight:600}
.ks-leiste .ks-knopf{padding:.8rem 1.35rem;border-color:rgba(255,255,255,.35);color:#fff}
.ks-leiste .ks-knopf.voll{border-color:var(--rot)}
.ks-leiste a.ks-tel{color:#fff;font-size:.85rem;text-decoration:none;opacity:.85;white-space:nowrap}
html:has(.kopf.offen) .ks-leiste{transform:translate(-50%,160%)}
@media (max-width:760px){
  .ks-leiste{left:.7rem;right:.7rem;bottom:.7rem;transform:translateY(160%);padding:.45rem;gap:.45rem;justify-content:stretch}
  .ks-leiste.zeigt{transform:none}
  html:has(.kopf.offen) .ks-leiste{transform:translateY(160%)}
  .ks-leiste span,.ks-leiste a.ks-tel{display:none}
  .ks-leiste .ks-knopf{flex:1 1 0;padding:.9rem .5rem}
}

/* ── 10 · Zimmer-Übersicht ────────────────────────────────────────────── */
.ks-inklusive{display:flex;flex-wrap:wrap;gap:.7rem 0;margin:0;padding:1.4rem 0;list-style:none;
  border-block:1px solid var(--linie);font-size:.95rem;color:var(--tinte)}
.ks-inklusive li{padding:0 1.4rem;border-left:1px solid var(--linie)}
.ks-inklusive li:first-child{padding-left:0;border-left:0}
.ks-zimmerzeile{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;
  color:inherit;text-decoration:none}
.ks-zimmerzeile + .ks-zimmerzeile{margin-top:clamp(4.5rem,10vw,8rem)}
.ks-zimmerzeile.dreh .ks-bild{order:2}
.ks-zimmerzeile .ks-bild{aspect-ratio:3/2}
.ks-zimmerzeile .ks-bild img{transition:transform 1.4s var(--feder)}
.ks-zimmerzeile:hover .ks-bild img{transform:scale(1.05)}
.ks-zimmerzeile h3{margin:.6rem 0 1rem;font-family:var(--display);font-weight:400;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);
  letter-spacing:-.025em;line-height:1.02;color:var(--tinte)}
.ks-masse{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.ks-masse li{padding:.42rem .85rem;border:1px solid var(--linie);border-radius:999px;font-size:.8rem;color:var(--tinte)}
.ks-ab{display:flex;align-items:baseline;gap:.6rem;margin:1.6rem 0 0;color:var(--text)}
.ks-ab b{font-family:var(--display);font-weight:500;font-size:2rem;color:var(--rot);letter-spacing:-.02em}
.ks-mehr{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.6rem;font-size:.76rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.ks-zimmerzeile:hover .ks-pfeil i,.ks-mehr:hover .ks-pfeil i{width:4.6rem}
@media (max-width:900px){
  .ks-zimmerzeile{grid-template-columns:1fr}
  .ks-zimmerzeile.dreh .ks-bild{order:0}
}

/* ── 11 · Zimmer-Detail (nach vigilius) ───────────────────────────────── */
.ks-bildgruppe{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.8rem;height:min(78vh,720px)}
.ks-bildgruppe .ks-bild:first-child{grid-row:1 / 3}
.ks-bildgruppe .ks-bild{cursor:zoom-in}
.ks-bildgruppe.zwei{grid-template-rows:1fr}
.ks-bildgruppe.zwei .ks-bild:first-child{grid-row:auto}
@media (max-width:760px){
  .ks-bildgruppe{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .ks-bildgruppe .ks-bild:first-child{grid-row:auto;grid-column:1 / 3;aspect-ratio:4/3}
  .ks-bildgruppe .ks-bild{aspect-ratio:1}
}
.ks-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.ks-box{position:sticky;top:max(6.5rem,12vh);padding:clamp(1.6rem,3vw,2.4rem);background:var(--creme);border-radius:3px}
.ks-box .ks-ab{margin:0 0 .2rem}
.ks-box small{display:block;color:var(--text-leise);font-size:.85rem;line-height:1.5}
.ks-box .ks-masse{margin:1.4rem 0}
.ks-box .ks-knoepfe{flex-direction:column}
.ks-box .ks-knopf{width:100%}
.ks-nachbarn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie)}
.ks-nachbarn a{display:block;padding:2rem 0;color:var(--tinte);text-decoration:none}
.ks-nachbarn a + a{text-align:right;border-left:1px solid var(--linie)}
.ks-nachbarn small{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-leise);margin-bottom:.4rem}
.ks-nachbarn strong{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem);transition:color .3s ease}
.ks-nachbarn a:hover strong{color:var(--rot)}
@media (max-width:900px){.ks-detail{grid-template-columns:1fr}.ks-box{position:static}}

/* Bild groß ansehen (seite.js) */
.ks-gross{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:4vh 4vw;background:rgba(10,12,18,.92);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;cursor:zoom-out}
.ks-gross.an{opacity:1;visibility:visible;transition-delay:0s}
.ks-gross img{max-width:100%;max-height:92vh;object-fit:contain;transform:scale(.94);transition:transform .7s var(--feder)}
.ks-gross.an img{transform:none}
.ks-gross button{position:absolute;top:1.2rem;right:1.4rem;width:3rem;height:3rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;cursor:pointer}

/* ── 12 · Angebote: breite Zeilen statt gleicher Karten ───────────────── */
.ks-angebot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;background:var(--papier);
  color:inherit;text-decoration:none;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--linie)}
.ks-angebot + .ks-angebot{margin-top:1.6rem}
.ks-angebot .ks-bild{min-height:320px;border-radius:0}
.ks-angebot .ks-bild img{transition:transform 1.4s var(--feder)}
.ks-angebot:hover .ks-bild img{transform:scale(1.05)}
.ks-angebot-text{padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.ks-marke{align-self:flex-start;padding:.38rem .75rem;border-radius:2px;background:var(--rot);color:#fff;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ks-marke.leise{background:var(--band);color:var(--text)}
.ks-angebot h3{margin:1rem 0 .4rem;font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);
  letter-spacing:-.02em;line-height:1.05;color:var(--tinte)}
.ks-zeit{margin:0;font-size:.9rem;letter-spacing:.06em;color:var(--text-leise)}
.ks-angebot p.ks-kurz{margin:1rem 0 0;color:var(--text);line-height:1.65;max-width:52ch}
.ks-angebot .ks-ab{margin-top:1.2rem}
.ks-angebot.vorbei{opacity:.86}
@media (max-width:760px){.ks-angebot{grid-template-columns:1fr}.ks-angebot .ks-bild{min-height:220px}}

/* ── 13 · Kennzahlen-Leiste ───────────────────────────────────────────── */
.ks-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--linie)}
.ks-zahlen div{padding:clamp(1.6rem,3.5vw,2.6rem) 1.2rem;border-left:1px solid var(--linie)}
.ks-zahlen div:first-child{border-left:0;padding-left:0}
.ks-zahlen b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,1.5rem + 2.4vw,3.6rem);
  line-height:1;letter-spacing:-.03em;color:var(--tinte)}
.ks-zahlen span{display:block;margin-top:.6rem;font-size:.9rem;line-height:1.4;color:var(--text)}
.ks-band.nacht .ks-zahlen,.ks-band.nacht .ks-zahlen div{border-color:var(--linie-hell)}
.ks-band.nacht .ks-zahlen b{color:#fff}
.ks-band.nacht .ks-zahlen span{color:rgba(245,246,242,.7)}
@media (max-width:760px){
  .ks-zahlen{grid-template-columns:1fr 1fr}
  .ks-zahlen div:nth-child(3){border-left:0;padding-left:0}
  .ks-zahlen div:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* ── 14 · Galerie-Streifen (quer wischbar, ohne Bibliothek) ───────────── */
.ks-streifen{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,34vw,460px);gap:1rem;overflow-x:auto;
  padding:0 var(--ks-rand) 1.2rem;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ks-rand);
  scrollbar-width:thin;scrollbar-color:var(--sand) transparent;-webkit-overflow-scrolling:touch}
.ks-streifen .ks-bild{aspect-ratio:4/5;scroll-snap-align:start;cursor:zoom-in}
.ks-streifen .ks-bild.quer{aspect-ratio:auto}

/* ── 15 · Hinweis-Kasten ──────────────────────────────────────────────── */
.ks-hinweis{margin-top:2rem;padding:1.3rem 1.5rem;border-left:2px solid var(--rot);background:var(--creme);
  color:var(--text);line-height:1.65;font-size:.95rem}
.ks-hinweis b{color:var(--tinte)}

/* ── 16 · Rechtstext (Impressum, Datenschutz) ─────────────────────────── */
.ks-recht{max-width:760px}
.ks-recht h2{margin:2.6rem 0 .8rem;font-family:var(--display);font-weight:500;font-size:1.45rem;color:var(--tinte)}
.ks-recht h2:first-child{margin-top:0}
.ks-recht p,.ks-recht li{color:var(--text);line-height:1.75}
.ks-recht a{color:var(--rot)}
.ks-held.klein{height:max(340px,48dvh)}

/* ── 17 · Formular (Anfrage) ──────────────────────────────────────────── */
.ks-formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.6rem}
.ks-feld{display:flex;flex-direction:column;gap:.5rem}
.ks-feld.weit{grid-column:1 / -1}
.ks-feld label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise)}
.ks-feld input,.ks-feld select,.ks-feld textarea{font:inherit;font-size:1rem;padding:.95rem 1rem;border:1px solid var(--linie);
  border-radius:3px;background:#fff;color:var(--tinte);transition:border-color .3s ease,box-shadow .3s ease}
.ks-feld textarea{min-height:9rem;resize:vertical}
.ks-feld input:focus,.ks-feld select:focus,.ks-feld textarea:focus{outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(138,115,66,.18)}
.ks-formular-fuss{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.ks-formular-fuss small{max-width:52ch;color:var(--text-leise);line-height:1.5}
@media (max-width:640px){.ks-formular{grid-template-columns:1fr}}

/* Fußzeile: Adresse als <address> */
.fuss-adresse{font-style:normal;font-size:.92rem;line-height:1.7;color:var(--schrift-hell-leise);max-width:32ch;margin:1.4rem 0 0}
.fuss-schluss a{color:inherit}

/* Startseite: sichtbare H1 im ersten Band + „Mehr"-Links unter den Blöcken */
.ks-start-h1{margin:0 0 .9rem;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rot)}
.ks-weiterlink{display:inline-flex;align-items:center;gap:.9rem;margin-top:2rem;font-size:.76rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinte);text-decoration:none}
.tief .ks-weiterlink,.band.tief .ks-weiterlink{color:#fff}
.ks-weiterlink:hover .ks-pfeil i,.ks-weiterlink:focus-visible .ks-pfeil i{width:4.6rem}
.ks-weiterlink .ks-pfeil{margin:0}

/* Fuß im selben Blaugrau wie die dunklen Bänder, nur tiefer */
html.pro .fuss{background:#14181e}

/* Angebots-Pop-up (Startseite) und Leiste sitzen beide unten — nie gleichzeitig */
html:has(.angebot-popup.sichtbar) .ks-leiste{transform:translate(-50%,160%)}
@media (max-width:760px){html:has(.angebot-popup.sichtbar) .ks-leiste{transform:translateY(160%)}}
/* Startseite: die Zimmerfahrt-Überschrift trägt jetzt einen Link */
.zf-kopf .ks-weiterlink{margin-top:1.6rem}
/* Hintergrundfotos der Bänder: url() in einer Variablen löst der Browser von
   der CSS-Datei aus auf, nicht von der Seite (/de/…) — deshalb stehen die
   Pfade HIER und nicht im style-Attribut (sonst 404 auf /bilder/…). */
#haus.band-grund{--grund-bild:url(bilder/ortler-sommer-1800.webp)}
#aktiv.band-grund{--grund-bild:url(bilder/alm-sommer-1800.webp)}
/* Offenes Menü 761–1240 px: eine pro.css-Regel machte den Kopf durchsichtig */
@media (max-width:1240px){
  html.pro body .kopf.offen{background:var(--papier);box-shadow:none;transition:none}
  html.pro body .kopf.offen::before{opacity:0}
  html.pro body .kopf.offen .menue{align-items:start}
}

/* ── EINE Überschriften-Sprache auf allen Seiten (Davids V1-Regel 10.09.:
      eine Schrift, eine Farbe). Abschnitts-Überschriften = Serifen-Versalien,
      gesperrt, wie .zeile auf der Startseite. Kein kursives Akzentwort in Rot. */
html.pro .ks-h2{
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'opsz' 48;
  font-weight:520;text-transform:uppercase;letter-spacing:.13em;
  line-height:1.16;font-size:clamp(1.55rem,1rem + 2.1vw,2.8rem);max-width:22ch;
}
html.pro .ks-h2 em,html.pro .ks-held h1 em{font-style:normal;color:inherit}
html.pro .ks-held h1{font-weight:300;letter-spacing:-.028em}
html.pro .ks-weiter strong{font-weight:300}
html.pro .ks-leit b{color:var(--tinte);font-weight:600}
html.pro .ks-band.nacht .ks-h2 em{color:inherit}
.ks-ab b,.ks-tabelle .preis{white-space:nowrap}
.ks-ab{flex-wrap:wrap;column-gap:.6rem;row-gap:0}

/* ══ Unterseiten 2.0 (David 29.09. abends: „schöner, besser animiert, Bilder im
   Hintergrund wie auf dem Onepager, kein Aufklapp-Menü") ═══════════════════
   Unterseiten sind jetzt Mini-Onepager: dieselben Bausteine wie die Startseite
   (band-grund, zitat mit data-parallaxe, vorhang, bento, laufband, kennzahlen).
   Hier nur, was der Kopf der Unterseite zusätzlich braucht. */
.ks-held.gross{height:max(560px,94dvh)}
.ks-held-bild{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.ks-held-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:60% 40%;animation:ks-atmen 24s ease-in-out infinite alternate}
.ks-held .titel-korn{z-index:-1}
.ks-held .ks-oben{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem;
  font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.9);
  opacity:0;animation:ks-ein 1s ease .25s forwards}
.ks-held .ks-oben::before{content:"";width:2.6rem;height:1px;background:currentColor;opacity:.7}
html:not(.offen) .ks-held .ks-oben{animation-play-state:paused}
.ks-held-fakten{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none;
  opacity:0;animation:ks-ein 1s ease .6s forwards}
html:not(.offen) .ks-held-fakten{animation-play-state:paused}
.ks-held-fakten li{padding:.55rem 1rem;border:1px solid rgba(255,255,255,.38);border-radius:999px;
  background:rgba(14,18,26,.28);font-size:.8rem;letter-spacing:.04em;color:#fff}
.ks-held .runter{z-index:3}
.ks-held .ks-brot{margin-bottom:1rem}
@media (max-width:760px){.ks-held.gross{height:max(520px,86dvh)}.ks-held-fakten li{font-size:.72rem;padding:.45rem .8rem}}

/* Unterseiten: Fließtext-Bänder der Vorlage sind auf der Startseite mittig —
   bei langen Unterseiten lesen sich Zweispalter besser. Bento/zwei bleiben V1. */
body.unterseite .band .innen.zwei{align-items:center}
body.unterseite .ks-preisraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,4.5rem);margin-top:clamp(2.4rem,5vw,3.6rem)}
body.unterseite .ks-preisraster .ks-tabelle{min-width:0}
body.unterseite .ks-preisraster h3{margin:0 0 .4rem;font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--tinte)}
@media (max-width:900px){body.unterseite .ks-preisraster{grid-template-columns:1fr}}
/* Bild im Zimmer-Abschnitt: großes Foto mit kleinem zweiten darüber gelegt */
.ks-doppelbild{position:relative;padding-bottom:clamp(2.5rem,6vw,5rem)}
.ks-doppelbild .vorhang{border-radius:clamp(14px,1.4vw,20px);overflow:hidden}
.ks-doppelbild > .vorhang:first-child{aspect-ratio:4/3.2;width:88%}
.ks-doppelbild > .vorhang + .vorhang{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/5;
  box-shadow:0 24px 60px -24px rgba(14,18,26,.45);border:6px solid var(--papier)}
.band-creme .ks-doppelbild > .vorhang + .vorhang{border-color:var(--creme)}
.ks-doppelbild .vorhang img{width:100%;height:100%;object-fit:cover;display:block}
.innen.zwei.gedreht .ks-doppelbild > .vorhang:first-child{margin-left:auto}
.innen.zwei.gedreht .ks-doppelbild > .vorhang + .vorhang{right:auto;left:0}
.ks-einzelbild.vorhang{border-radius:clamp(14px,1.4vw,20px);overflow:hidden;aspect-ratio:4/3.1}
.ks-einzelbild.vorhang img{width:100%;height:100%;object-fit:cover;display:block}
.ks-zeilenpreis{display:flex;align-items:baseline;gap:.7rem;margin:1.8rem 0 0;color:var(--text)}
.ks-zeilenpreis b{font-family:var(--display);font-weight:500;font-size:2.1rem;color:var(--tinte);letter-spacing:-.02em;white-space:nowrap}
.band .ks-knoepfe{margin-top:2rem}
.tief .ks-knopf{border-color:rgba(255,255,255,.55);color:#fff}
.tief .ks-knopf.voll{border-color:var(--rot)}
/* Lange Einzelwörter (Dreibettzimmer) in halber Spalte: eine Stufe kleiner, weniger gesperrt */
html.pro .zeile.eng{font-size:clamp(1.45rem,.9rem + 1.9vw,2.55rem);letter-spacing:.08em;text-indent:.08em}
/* EIN Dunkel auf allen Seiten: das der Vorlage (--fels) für Bänder, Leiste und Fuß */
:root{--nacht:var(--fels)}
html.pro .fuss{background:var(--fels-tief,#0d120d)}

/* ── Buchungskarte (Startseite): ragt über die Unterkante des Titelbildes ── */
.ks-buchen{position:relative;z-index:6;padding:0 var(--ks-rand) clamp(2.5rem,5vw,4rem);margin-top:calc(-1 * clamp(3.2rem,6vw,4.8rem))}
.ks-buchkarte{display:grid;grid-template-columns:minmax(12rem,1.2fr) repeat(3,minmax(8.5rem,1fr)) auto;align-items:stretch;
  width:min(100%,1180px);margin:0 auto;background:#fff;border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(13,18,13,.45),0 0 0 1px rgba(13,18,13,.05)}
.ks-buchkarte > *{padding:1.25rem 1.4rem}
.ks-buchkarte > * + *{border-left:1px solid var(--linie)}
.ks-buch-titel{display:flex;flex-direction:column;justify-content:center;gap:.3rem}
.ks-buch-titel span{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rot)}
.ks-buch-titel strong{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.2;color:var(--tinte)}
.ks-buch-feld{display:flex;flex-direction:column;justify-content:center;gap:.35rem;cursor:pointer;transition:background .3s ease}
.ks-buch-feld:hover{background:rgba(13,18,13,.025)}
.ks-buch-feld span{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-leise)}
.ks-buch-feld input,.ks-buch-feld select{font:inherit;font-size:1rem;color:var(--tinte);border:0;background:none;padding:0;outline:none;width:100%;cursor:pointer}
.ks-buch-feld:focus-within{box-shadow:inset 0 -2px 0 var(--rot)}
.ks-buch-knoepfe{display:flex;align-items:center;gap:.6rem;border-radius:0 18px 18px 0}
.ks-buch-knoepfe .ks-knopf{padding:1rem 1.3rem;white-space:nowrap}
.ks-buch-hinweis{width:min(100%,1180px);margin:1rem auto 0;text-align:center;font-size:.8rem;color:var(--text-leise)}
.ks-buch-hinweis a{color:var(--rot)}
.ks-buchen #Bs-BookingWidget{margin-top:1.6rem}
.ks-buchkarte .buchung-fehler{grid-column:1 / -1;border-left:0;border-top:1px solid var(--linie);font-size:.9rem;color:var(--rot)}
@media (max-width:1100px){
  .ks-buchkarte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ks-buch-titel,.ks-buch-knoepfe{grid-column:1 / -1}
  .ks-buchkarte > * + *{border-left:0}
  .ks-buch-feld + .ks-buch-feld{border-left:1px solid var(--linie)}
  .ks-buch-feld,.ks-buch-knoepfe{border-top:1px solid var(--linie)}
  .ks-buch-knoepfe{border-radius:0 0 18px 18px}
  .ks-buch-knoepfe .ks-knopf{flex:1 1 0}
}
@media (max-width:560px){
  .ks-buchen{margin-top:calc(-1 * 2.4rem)}
  .ks-buchkarte{grid-template-columns:1fr 1fr}
  .ks-buch-feld:last-of-type{grid-column:1 / -1;border-left:0}
  .ks-buch-knoepfe{flex-direction:column}
  .ks-buch-knoepfe .ks-knopf{width:100%}
}

/* ── Buchungsfenster (Buchen-Seite) und Anfrage-Karten ── */
.ks-buchfenster{width:min(100%,1080px);margin:clamp(2.4rem,5vw,3.6rem) auto 0;background:#fff;border-radius:18px;
  padding:clamp(1.4rem,3vw,2.4rem);min-height:200px;box-shadow:0 30px 70px -32px rgba(13,18,13,.4),0 0 0 1px rgba(13,18,13,.05)}
.ks-buchfenster-tor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;min-height:150px;text-align:center}
.ks-buchfenster-tor .buchung-alt{max-width:60ch;line-height:1.7}
.ks-buchfenster #Bs-BookingWidget{margin-top:0}
.ks-anfragekarten{margin-top:clamp(2.4rem,5vw,3.6rem);align-items:start}
.ks-karte{background:#fff;border-radius:18px;padding:clamp(1.5rem,3vw,2.6rem);box-shadow:0 30px 70px -32px rgba(13,18,13,.4),0 0 0 1px rgba(13,18,13,.05)}
.ks-kontaktkarte{background:#fff;padding:0;overflow:hidden;box-shadow:0 30px 70px -32px rgba(13,18,13,.4),0 0 0 1px rgba(13,18,13,.05);border-radius:18px}
.ks-kontaktkarte > *:not(.ks-kontaktbild){margin-left:clamp(1.4rem,2.6vw,2rem);margin-right:clamp(1.4rem,2.6vw,2rem)}
.ks-kontaktkarte > *:last-child{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.ks-kontaktbild{margin:0 0 1.4rem;aspect-ratio:16/10;overflow:hidden}
.ks-kontaktbild img{width:100%;height:100%;object-fit:cover;display:block}
/* „Entdecken"-Strich lief mittig durch die Fakten-Pillen → auf Unterseiten rechts unten */
html.pro .ks-held .runter{left:auto;right:max(var(--ks-rand),calc((100vw - var(--breite)) / 2));transform:none}
/* Kontakt-Karte: Innenabstand statt Außenabstand (Inline-margin:0 am Namen hat ihn an den Rand gezogen) */
html.pro .ks-kontaktkarte{--kk:clamp(1.4rem,2.6vw,2rem);padding:0 var(--kk) var(--kk)}
html.pro .ks-kontaktkarte > *:not(.ks-kontaktbild){margin-left:0;margin-right:0}
html.pro .ks-kontaktkarte > *:last-child{margin-bottom:0}
html.pro .ks-kontaktbild{margin:0 calc(-1 * var(--kk)) 1.4rem}

/* ── Übergang Titelbild → Inhalt (David 29.09.: „andere Übergänge, schöner") ──
   Der Inhalt schiebt sich mit gerundeter Oberkante und weichem Schatten über das
   stehende Titelbild — wie ein Blatt, das darübergelegt wird. Gilt auf allen Seiten.
   overflow:hidden nur am ERSTEN Abschnitt (dort klebt nichts), nie an .nach-titel. */
html.pro .nach-titel{--uebergang:clamp(22px,3vw,40px);
  margin-top:calc(-1 * var(--uebergang));border-radius:var(--uebergang) var(--uebergang) 0 0;
  box-shadow:0 -28px 60px -30px rgba(10,14,10,.5)}
html.pro .nach-titel > section:first-of-type{border-radius:var(--uebergang) var(--uebergang) 0 0;overflow:hidden}
html.pro .ks-held{padding-bottom:0}
html.pro .ks-held .ks-held-inhalt{bottom:calc(clamp(2.2rem,6vh,4.5rem) + clamp(22px,3vw,40px))}
html.pro .ks-held .runter{bottom:calc(clamp(1.8rem,4vh,3rem) + clamp(22px,3vw,40px))}

/* ── Überschriften höchstens 2 Zeilen (David 29.09.) ──
   In zweispaltigen Abschnitten ist nur die halbe Breite da: dort eine Stufe
   kleiner und etwas weniger gesperrt. Jede Zeile der Überschrift ist ein
   eigenes .aufzug-Element — so bleibt es bei genau 2 Zeilen. */
html.pro .innen.zwei .zeile{font-size:clamp(1.45rem,.8rem + 1.75vw,2.45rem);letter-spacing:.1em;text-indent:.1em}
html.pro .innen.zwei .zeile.eng{font-size:clamp(1.3rem,.7rem + 1.6vw,2.3rem);letter-spacing:.07em;text-indent:.07em}
html.pro .ks-faq .zeile{font-size:clamp(1.45rem,.8rem + 1.75vw,2.45rem);letter-spacing:.1em}

/* Titelbild der Unterseiten bildschirmfüllend (David 29.09.: „Hero Vollbild") */
html.pro .ks-held,html.pro .ks-held.gross,html.pro .ks-held.klein{height:100vh;height:100dvh;min-height:520px}
/* Die Vorlage begrenzt .zeile auf eine Zeichenbreite — lange Einzelwörter
   (Dreibettzimmer) wurden abgeschnitten. Jede Zeile ist ein eigenes .aufzug,
   also darf die Überschrift die ganze Spalte nutzen. */
html.pro .zeile{max-width:none}
/* hidden muss gegen display:flex gewinnen (Tor verschwindet beim Öffnen) */
.ks-buchfenster-tor[hidden]{display:none}
/* Während Booking Südtirol lädt: dezenter Kreis statt „Lädt …" */
.ks-buchfenster:has(#Bs-BookingWidget:not([hidden]):empty){position:relative;min-height:240px}
.ks-buchfenster:has(#Bs-BookingWidget:not([hidden]):empty)::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid var(--linie);border-top-color:var(--rot);animation:ks-dreh .9s linear infinite}
@keyframes ks-dreh{to{transform:rotate(360deg)}}

/* ── Sprachumschalter DE · IT · EN im Kopf ── */
.ks-sprachen{display:flex;align-items:center;gap:.1rem;margin-right:1.1rem}
.ks-sprachen a{padding:.4rem .45rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;color:inherit;text-decoration:none;opacity:.6;transition:opacity .3s ease}
.ks-sprachen a + a{border-left:1px solid currentColor;border-left-color:rgba(127,127,127,.45)}
.ks-sprachen a:hover,.ks-sprachen a:focus-visible,.ks-sprachen a[aria-current="true"]{opacity:1}
.ks-sprachen a[aria-current="true"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
@media (max-width:1240px){
  html.pro .kopf.offen .kopf-cta{flex-wrap:wrap}
  html.pro .kopf.offen .ks-sprachen{flex-basis:100%;justify-content:flex-start;margin:0 0 .6rem;color:var(--tinte)}
  html.pro .kopf.offen .ks-sprachen a{font-size:.85rem;padding:.5rem .8rem}
}

/* Handy: kein Angebots-Pop-up — es deckte fast das ganze Titelbild zu; das
   Angebot steht auf der Startseite ohnehin im Block „Angebote“. */
@media (max-width:760px){html.pro .angebot-popup{display:none!important}}
/* Zimmerfahrt- und Fenstersitz-Überschrift der Startseite in derselben
   Sprache wie alle anderen: Serifen-Versalien, gesperrt, einfarbig. */
html.pro .zf-kopf h2,html.pro .fs-fahrt__satz h2{
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'opsz' 48;
  font-weight:520;text-transform:uppercase;letter-spacing:.13em;line-height:1.16;
  font-size:clamp(1.55rem,1rem + 2.1vw,2.8rem)}
html.pro .zf-kopf h2 em{font-style:normal;color:inherit}
html.pro .zf-kopf h2,html.pro .fs-fahrt__satz h2{font-size:clamp(1.35rem,.85rem + 1.55vw,2.25rem);letter-spacing:.1em}
/* Titelbild: beim Laden NUR das Bild (David: „nicht unten diesen weißen Strich").
   Der Inhalt ragt nicht mehr ins Titelbild; die gerundete Kante bleibt als
   Übergang und erscheint erst beim Scrollen. */
html.pro .nach-titel{margin-top:0}
html.pro .ks-held .ks-held-inhalt{bottom:clamp(2.2rem,6vh,4.5rem)}
html.pro .ks-held .runter{bottom:clamp(1.8rem,4vh,3rem)}

/* ── Sprachumschalter deutlicher und bei JEDER Breite oben (David 29.09.:
      „oben soll man klicken können") — Kapsel neben den Knöpfen ── */
.ks-sprachen{gap:0;margin-right:1rem;padding:.2rem;border:1px solid currentColor;border-radius:999px;
  border-color:rgba(127,127,127,.55)}
.ks-sprachen a{padding:.45rem .7rem;font-size:.76rem;letter-spacing:.12em;opacity:.8;border-radius:999px}
.ks-sprachen a + a{border-left:0}
.ks-sprachen a[aria-current="true"]{opacity:1;text-decoration:none;background:currentColor}
.ks-sprachen a[aria-current="true"]{color:inherit}
html.pro .kopf:not(.fest) .ks-sprachen a[aria-current="true"]{background:#fff;color:var(--tinte)}
html.pro .kopf.fest .ks-sprachen a[aria-current="true"],html.pro .kopf.offen .ks-sprachen a[aria-current="true"]{background:var(--tinte);color:#fff}
html.pro .kopf:not(.fest) .ks-sprachen{border-color:rgba(255,255,255,.55)}
/* Schmale Kopie neben dem Burger: nur, wenn die Knöpfe ins Menü wandern */
.ks-sprachen-schmal{display:none}
@media (max-width:1240px){
  html.pro .kopf .ks-sprachen-schmal{display:flex;margin:0 .6rem 0 auto}
  html.pro .kopf.offen .ks-sprachen-schmal{display:none}
}
@media (max-width:420px){
  html.pro .kopf .ks-sprachen-schmal a{padding:.4rem .5rem;font-size:.68rem}
}

/* ══ Kopf im Stil der Vorlage 3 — NUR Cornelia (seite.json "kopf_stil":"casa",
   David 29.09.: „links Kästchen, Logo in der Mitte, Menü mit Unterseiten und
   Sprache"). Vorlage 1 bleibt unberührt. ═════════════════════════════════ */
html.pro body.kopf-casa .kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:clamp(.9rem,1.6vw,1.4rem) clamp(1.1rem,3vw,2.6rem)}
html.pro body.kopf-casa .kopf.fest{padding-block:.7rem}
.ks-kopf-links{justify-self:start;display:flex;align-items:center;gap:.9rem}
.ks-kasten{position:relative;width:48px;height:48px;display:grid;place-content:center;gap:5px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid currentColor;border-radius:4px;
  border-color:rgba(255,255,255,.6);transition:background .35s ease,border-color .35s ease,transform .6s var(--feder)}
.kopf.fest .ks-kasten{border-color:var(--linie)}
.ks-kasten:hover{transform:scale(1.05)}
.ks-kasten i{display:block;width:20px;height:1.5px;background:currentColor;transition:width .45s var(--feder)}
.ks-kasten i:nth-child(2){width:14px}
.ks-kasten:hover i:nth-child(2){width:20px}
.ks-kasten-wort{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
html.pro body.kopf-casa .ks-kopf-logo{justify-self:center;grid-column:2}
html.pro body.kopf-casa .ks-kopf-logo img{height:clamp(56px,5.4vw,80px);width:auto}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(46px,4.2vw,62px)}
/* Startseite: das Logo kommt beim Runterscrollen in die Mitte (oben steht das große im Titelbild) */
html.pro body.kopf-casa.startseite .kopf:not(.fest) .ks-kopf-logo{opacity:0;visibility:hidden;transform:translateY(-10px)}
html.pro body.kopf-casa .ks-kopf-logo{transition:opacity .55s ease,transform .8s var(--feder),visibility .55s}
.ks-kopf-rechts{justify-self:end;display:flex;align-items:center;gap:.55rem}
.ks-kopf-rechts .ks-sprachen{margin-right:.4rem}
.ks-kk{display:inline-flex;align-items:center;padding:.85rem 1.35rem;border:1px solid currentColor;border-radius:999px;
  border-color:rgba(255,255,255,.6);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:inherit;text-decoration:none;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .6s var(--feder)}
.ks-kk:hover{transform:translateY(-1px)}
.kopf.fest .ks-kk{border-color:var(--linie)}
.ks-kk-voll,.kopf.fest .ks-kk-voll{background:var(--rot);border-color:var(--rot);color:#fff}
.ks-kk-voll:hover{background:var(--rot-tief);border-color:var(--rot-tief)}
/* Die alten Breiten-Regeln des Vorlage-1-Kopfs gelten hier nicht */
@media (max-width:1240px){html.pro body.kopf-casa .kopf{display:grid}}
@media (max-width:980px){.ks-kopf-rechts .ks-kk:not(.ks-kk-voll){display:none}}
@media (max-width:760px){
  .ks-kasten-wort,.ks-kopf-rechts .ks-kk{display:none}
  .ks-kasten{width:42px;height:42px}
  html.pro body.kopf-casa .ks-kopf-logo img,html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:42px}
  .ks-kopf-rechts .ks-sprachen{margin:0}
  .ks-kopf-rechts .ks-sprachen a{padding:.38rem .5rem;font-size:.66rem}
}

/* ── Vollbild-Menü ── */
.ks-schub{position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;
  padding:clamp(1.2rem,3vw,2.4rem) var(--ks-rand);background:var(--fels);color:#fff;overflow:auto;
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.87,0,.13,1),visibility 0s linear 1s}
.ks-schub::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(bilder/berge-abendrot-1200.webp) center 30%/cover no-repeat;opacity:.14;filter:grayscale(.3)}
html.ks-menue-offen .ks-schub{visibility:visible;clip-path:inset(0);transition:clip-path 1s cubic-bezier(.87,0,.13,1),visibility 0s}
html.ks-menue-offen,html.ks-menue-offen body{overflow:hidden}
.ks-schub-zu{position:absolute;left:clamp(1.1rem,3vw,2.6rem);top:clamp(1.3rem,2.6vw,2rem);display:flex;align-items:center;gap:1rem;
  padding:.8rem 0 .8rem 2.6rem;background:none;border:0;color:#fff;cursor:pointer;font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ks-schub-zu i{position:absolute;left:0;top:50%;width:26px;height:1.5px;background:currentColor}
.ks-schub-zu i:nth-child(1){transform:rotate(45deg)}.ks-schub-zu i:nth-child(2){transform:rotate(-45deg)}
.ks-schub-logo img{height:clamp(64px,7vw,96px);width:auto;display:block}
.ks-schub-links{list-style:none;margin:clamp(1rem,3vh,2rem) 0;padding:0;display:grid;gap:.1rem;justify-items:center;text-align:center}
.ks-schub-links a{display:inline-flex;align-items:baseline;gap:1rem;padding:.25rem 0;color:#fff;text-decoration:none;
  font-family:var(--display);font-optical-sizing:auto;font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(1.7rem,1rem + 3.3vw,3.6rem);line-height:1.12;transition:color .35s ease,transform .6s var(--feder)}
.ks-schub-links small{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;color:var(--messing);transform:translateY(-.9em)}
.ks-schub-links a:hover,.ks-schub-links a:focus-visible,.ks-schub-links a[aria-current="page"]{color:var(--messing)}
.ks-schub-links a:hover{transform:translateX(8px)}
.ks-schub-links li{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .9s var(--feder)}
html.ks-menue-offen .ks-schub-links li{opacity:1;transform:none}
html.ks-menue-offen .ks-schub-links li:nth-child(1){transition-delay:.35s}
html.ks-menue-offen .ks-schub-links li:nth-child(2){transition-delay:.41s}
html.ks-menue-offen .ks-schub-links li:nth-child(3){transition-delay:.47s}
html.ks-menue-offen .ks-schub-links li:nth-child(4){transition-delay:.53s}
html.ks-menue-offen .ks-schub-links li:nth-child(5){transition-delay:.59s}
html.ks-menue-offen .ks-schub-links li:nth-child(6){transition-delay:.65s}
.ks-schub-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem;font-size:.85rem;color:rgba(255,255,255,.72)}
.ks-schub-fuss a{color:#fff}
.ks-schub .ks-sprachen{margin:0;border-color:rgba(255,255,255,.5);color:#fff}
.ks-schub .ks-sprachen a[aria-current="true"]{background:#fff;color:var(--tinte)}
.ks-schub-knoepfe{display:flex;gap:.6rem}
.ks-schub-knoepfe .ks-kk{border-color:rgba(255,255,255,.55)}
@media (max-width:760px){
  .ks-schub-fuss{flex-direction:column;gap:.9rem}
  .ks-schub-links a{letter-spacing:.05em}
}
/* Vorlage 1 blendet im weißen Kopf die helle Logo-Fassung aus (erwartet eine
   dunkle) — hier gibt es nur eine, also bleibt sie sichtbar. */
html.pro body.kopf-casa .kopf .marke-hell,html.pro body.kopf-casa .kopf.fest .marke-hell{opacity:1}
html.pro body.kopf-casa.startseite .kopf.fest .ks-kopf-logo{opacity:1;visibility:visible;transform:none}
@media (max-width:760px){.ks-schub-zu span{display:none}.ks-schub-zu{padding-left:2rem}}

/* ══ Kopf edler (David 29.09. spät): Wimpel hängt groß von der Oberkante,
   Sprache als Auswahl mit Pfeil, Anfragen als feiner Textlink, Buchen schlank. ══ */
/* Logo: scharfe SVG, hängt oben bündig und wächst über die Kopfzeile hinaus */
html.pro body.kopf-casa .ks-kopf-logo{align-self:start;margin-top:calc(-1 * clamp(.9rem,1.6vw,1.4rem));line-height:0}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo{margin-top:-.7rem}
html.pro body.kopf-casa .ks-kopf-logo img{height:clamp(104px,9.6vw,150px);width:auto;
  filter:none;transition:height .7s var(--feder)}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(88px,7.4vw,118px)}
html.pro body.kopf-casa.startseite .kopf:not(.fest) .ks-kopf-logo{transform:translateY(-110%)}
html.pro body.kopf-casa .ks-kopf-logo{transition:opacity .5s ease,transform .9s var(--feder),visibility .5s}
/* Kopfzeile selbst ruhiger: keine Rahmen-Linie mehr unter dem Wimpel */
html.pro body.kopf-casa .kopf.fest{box-shadow:0 1px 0 rgba(20,24,20,.06),0 12px 30px -24px rgba(20,24,20,.35)}

/* Sprache: „DE ⌄" — die anderen klappen darunter auf */
.ks-sprachwahl{position:relative;margin-right:1.2rem}
.ks-sprachwahl-knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .2rem;background:none;border:0;color:inherit;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.2em}
.ks-sprachwahl-knopf svg{width:11px;height:8px;transition:transform .5s var(--feder)}
.ks-sprachwahl:hover .ks-sprachwahl-knopf svg,.ks-sprachwahl.auf .ks-sprachwahl-knopf svg{transform:rotate(180deg)}
.ks-sprachwahl-liste{position:absolute;right:-1rem;top:100%;min-width:11rem;margin:0;padding:.5rem 0;list-style:none;background:#fff;color:var(--tinte);
  border-radius:3px;box-shadow:0 22px 50px -20px rgba(14,18,14,.4),0 0 0 1px rgba(14,18,14,.06);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .5s var(--feder),visibility 0s linear .25s}
.ks-sprachwahl:hover .ks-sprachwahl-liste,.ks-sprachwahl:focus-within .ks-sprachwahl-liste,.ks-sprachwahl.auf .ks-sprachwahl-liste{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ks-sprachwahl-liste a{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 1.2rem;color:inherit;text-decoration:none;font-size:.9rem}
.ks-sprachwahl-liste a b{font-size:.68rem;letter-spacing:.2em;color:var(--rot);min-width:1.6rem}
.ks-sprachwahl-liste a:hover{background:var(--creme)}

/* Anfragen: feiner Textlink mit wachsender Linie */
.ks-kopf-textlink{position:relative;margin-right:1.4rem;padding:.6rem 0;color:inherit;text-decoration:none;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ks-kopf-textlink::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1px;background:currentColor;
  transform:scaleX(.35);transform-origin:left;transition:transform .6s var(--feder)}
.ks-kopf-textlink:hover::after{transform:scaleX(1)}
/* Buchen: schlanker, eckiger Knopf */
.ks-kopf-buchen{display:inline-flex;align-items:center;padding:1rem 1.8rem;background:var(--rot);color:#fff;text-decoration:none;
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-radius:1px;
  transition:background .35s ease,transform .6s var(--feder),box-shadow .35s ease}
.ks-kopf-buchen:hover{background:var(--rot-tief);transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(111,5,22,.7)}
@media (max-width:980px){.ks-kopf-textlink{display:none}}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-kopf-logo img,html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:74px}
  .ks-kopf-buchen{padding:.75rem 1rem;font-size:.62rem;letter-spacing:.16em}
  .ks-sprachwahl{margin-right:.4rem}
}
@media (max-width:420px){.ks-kopf-buchen{display:none}}

/* Sprache links neben „Menü" (David 29.09.), Liste klappt nach links unten auf */
.ks-kopf-links .ks-sprachwahl{margin:0 0 0 1.4rem;padding-left:1.4rem;border-left:1px solid currentColor;border-left-color:rgba(127,127,127,.45)}
.ks-kopf-links .ks-sprachwahl-liste{left:.4rem;right:auto}
/* Buchen/Anfragen wieder im Vorlage-1-Format (Rahmen-Knöpfe aus stil.css/pro.css) */
html.pro body.kopf-casa .ks-kopf-rechts.kopf-cta{display:flex;align-items:center;gap:.8rem}
@media (max-width:1240px){html.pro body.kopf-casa .kopf .ks-kopf-rechts.kopf-cta{display:flex}}
@media (max-width:980px){html.pro body.kopf-casa .kopf .ks-kopf-rechts .knopf:not(.knopf-buchen){display:none}}
@media (max-width:760px){
  html.pro body.kopf-casa .kopf .ks-kopf-rechts .knopf{display:inline-flex;padding:.7rem .9rem;font-size:.6rem}
  html.pro body.kopf-casa .kopf .ks-kopf-rechts .knopf:not(.knopf-buchen){display:none}
  .ks-kopf-links .ks-sprachwahl{margin-left:.6rem;padding-left:.6rem}
}
@media (max-width:400px){html.pro body.kopf-casa .kopf .ks-kopf-rechts .knopf{display:none}}

/* Sprache als schlichte Textzeile links neben „Menü" (David 29.09.: kein Dropdown,
   „wie die besten Webseiten") — aktive Sprache voll mit feiner Linie, die anderen leiser */
.ks-sprachzeile{display:flex;align-items:center;gap:1rem;margin-left:1.4rem;padding-left:1.4rem;
  border-left:1px solid rgba(127,127,127,.45);height:1.4rem}
.ks-sprachzeile a{position:relative;padding:.3rem 0;color:inherit;text-decoration:none;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;opacity:.55;transition:opacity .3s ease}
.ks-sprachzeile a:hover,.ks-sprachzeile a:focus-visible{opacity:1}
.ks-sprachzeile a[aria-current="true"]{opacity:1}
.ks-sprachzeile a[aria-current="true"]::after{content:"";position:absolute;left:0;right:.2em;bottom:-.1rem;height:1px;background:currentColor}
@media (max-width:760px){.ks-sprachzeile{gap:.7rem;margin-left:.7rem;padding-left:.7rem}.ks-sprachzeile a{font-size:.66rem;letter-spacing:.14em}}
html.pro body.kopf-casa .kopf:not(.fest) .ks-sprachzeile a:not([aria-current="true"]){opacity:.75}

/* ══ Logo ohne jeden Schatten (David 29.09.: der graue Kasten ums Logo „darf nicht sein").
   Ein drop-shadow wird in Safari/Chrome an der Kopfleiste rechteckig abgeschnitten. ══ */
html.pro body.kopf-casa .ks-kopf-logo,html.pro body.kopf-casa .ks-kopf-logo img,.ks-schub-logo,.ks-schub-logo img{filter:none!important;box-shadow:none!important;background:none!important}

/* ══ Vollbild-Menü im selben Stil wie der Kopf (David 29.09.):
   Wimpel hängt oben bündig, Sprache als Textzeile, Knöpfe eckig wie Vorlage 1 ══ */
.ks-schub-logo{align-self:start;margin-top:calc(-1 * clamp(1.2rem,3vw,2.4rem));line-height:0}
.ks-schub-logo img{height:clamp(96px,8.6vw,136px)}
.ks-schub-fuss{gap:1.2rem 2.4rem;padding-top:clamp(1rem,2.4vh,1.8rem);border-top:1px solid rgba(255,255,255,.14);width:min(100%,62rem)}
.ks-sprachzeile-schub{margin:0;padding:0;border:0;color:#fff}
.ks-sprachzeile-schub a{font-size:.74rem;font-weight:600;letter-spacing:.2em;opacity:.6}
.ks-sprachzeile-schub a[aria-current="true"]{opacity:1}
.ks-schub-adresse{letter-spacing:.02em}
.ks-schub-knoepfe{gap:.7rem}
.ks-schub-knoepfe .knopf{margin:0}
@media (max-width:760px){
  .ks-schub-logo img{height:84px}
  .ks-schub-fuss{border-top:0;padding-top:0;gap:1rem}
  .ks-sprachzeile-schub a{font-size:.78rem}
}

/* ══ Tabellen am Handy (David 29.09.: Handyansicht perfekt) — nie seitlich wischen:
   bis 3 Spalten passen sie schmal, breitere werden zu Karten (seite.js setzt data-label) ══ */
@media (max-width:640px){
  .ks-tabelle{min-width:0;font-size:.95rem}
  .ks-tabelle th,.ks-tabelle td{padding:.85rem .5rem}
  .ks-tabelle-karten thead{display:none}
  .ks-tabelle-karten,.ks-tabelle-karten tbody,.ks-tabelle-karten tr{display:block;width:100%}
  .ks-tabelle-karten{display:flex;flex-direction:column}
  .ks-tabelle-karten caption{display:block;order:2}
  .ks-tabelle-karten tr{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--linie)}
  .ks-tabelle-karten th,.ks-tabelle-karten td{border:0;padding:.18rem 0}
  .ks-tabelle-karten tbody th{grid-column:1;font-size:1.2rem}
  .ks-tabelle-karten td.preis{grid-column:2;grid-row:1;align-self:center;text-align:right}
  .ks-tabelle-karten td:not(.preis){grid-column:1 / -1;display:flex;gap:.8rem;font-size:.92rem;color:var(--text-leise)}
  .ks-tabelle-karten td:not(.preis)::before{content:attr(data-label);min-width:6.5rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-top:.2rem}
}

/* ══ Handy-Kopf (David 29.09.: Handyansicht perfekt): Logo exakt in der Mitte,
   links Menü, rechts DE·IT·EN. Buchen/Anfragen stehen im Menü. ══ */
html.pro body.kopf-casa .kopf{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
@media (max-width:760px){
  html.pro body.kopf-casa .kopf .ks-kopf-rechts{display:none!important}
  html.pro body.kopf-casa .ks-kopf-links .ks-sprachzeile{position:absolute;right:var(--ks-rand,16px);top:50%;transform:translateY(-50%);
    margin:0;padding:0;border:0;gap:.8rem}
  html.pro body.kopf-casa .kopf.fest .ks-kopf-links .ks-sprachzeile{top:50%}
}
/* pro.css schiebt die Kopf-Marke vor dem Scrollen um -16 px (V1-Einflug) — beim
   Cornelia-Kopf steht das Logo immer genau in der Mitte. */
html.pro body.kopf-casa .kopf .ks-kopf-logo{transform:none}
html.pro body.kopf-casa.startseite .kopf:not(.fest) .ks-kopf-logo{transform:translateY(-110%)}

/* ══ Schmale Handys (David 30.09.: IT/EN am Handy perfekt): Rubriken in einer Zeile,
   Überschriften nie mehr als 2 Zeilen — auch bei 360 px und langen IT/EN-Wörtern ══ */
@media (max-width:480px){
  html.pro body.kopf-casa .rubrik{font-size:.8rem;letter-spacing:.18em;gap:.65rem}
  html.pro body.kopf-casa .rubrik::before{max-width:22px}
  html.pro body.kopf-casa .ks-knopf{letter-spacing:.1em;padding-left:1.1rem;padding-right:1.1rem}
}
@media (max-width:380px){
  html.pro body.kopf-casa h2:not(.nk h2){font-size:1.3rem;letter-spacing:.06em}
  html.pro body.kopf-casa .rubrik{font-size:.74rem;letter-spacing:.14em}
}

/* ══ Knöpfe edel statt rot (David 30.09.: „nicht rot, so wie den Anfragen-Button"):
   alle Inhalts-Knöpfe im Format der Kopf-Knöpfe — eckig, feine Linie, gesperrte
   Versalien, Füllung wächst beim Überfahren von unten. Auf dunklem Grund hell. ══ */
.ks-knopf,.ks-knopf.voll,.ks-knopf.dunkel{position:relative;overflow:hidden;isolation:isolate;border-radius:0;
  padding:1.05rem 2rem;font-weight:500;font-size:.72rem;letter-spacing:.2em;
  background:transparent;border:1px solid var(--tinte);color:var(--tinte);
  transition:color .45s ease,border-color .45s ease,transform .6s var(--feder)}
.ks-knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinte);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.16,.84,.34,1)}
.ks-knopf:hover,.ks-knopf:focus-visible,.ks-knopf.voll:hover,.ks-knopf.voll:focus-visible{color:#fff;background:transparent;border-color:var(--tinte)}
.ks-knopf:hover::after,.ks-knopf:focus-visible::after{transform:scaleY(1)}
/* der Haupt-Knopf trägt eine etwas kräftigere Linie, damit er vorne steht */
.ks-knopf.voll{border-width:1.5px}
/* dunkle Bänder */
.ks-band.nacht .ks-knopf,.ks-band.nacht .ks-knopf.voll,.tief .ks-knopf,.tief .ks-knopf.voll{color:#fff;border-color:rgba(246,245,239,.6)}
.ks-band.nacht .ks-knopf.voll,.tief .ks-knopf.voll{border-color:rgba(246,245,239,.9)}
.ks-band.nacht .ks-knopf::after,.tief .ks-knopf::after{background:var(--creme)}
.ks-band.nacht .ks-knopf:hover,.ks-band.nacht .ks-knopf:focus-visible,.tief .ks-knopf:hover,.tief .ks-knopf:focus-visible{color:var(--tinte);border-color:var(--creme)}
/* Buchungssystem-Knopf und Angebots-Fenster ebenso */
.buchung-tor .knopf-rot{background:transparent;border-color:var(--tinte);color:var(--tinte)}
.buchung-tor .knopf-rot:hover,.buchung-tor .knopf-rot:focus-visible{color:#fff}
.angebot-los{background:transparent;color:var(--tinte);border:1px solid var(--tinte);border-radius:0;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;transition:background .35s ease,color .35s ease}
.angebot-los:hover,.angebot-los:focus-visible{background:var(--tinte);color:#fff}
.angebot-marke,.ks-marke{background:var(--tinte);border-radius:0;letter-spacing:.18em}

/* ══ Flüssig scrollen (David 30.09.: „ruckelt beim Herunterscrollen"):
   stil.css blendet jeden Absatz/jede Liste per view()-Animation MIT filter:blur ein
   (43 Elemente je Seite, jedes Bild neu gerechnet). Bei Cornelia aus — die Texte
   kommen über data-auf/.sicht (nur Klassen). Zahlen brechen nie um (kein Sprung). ══ */
@supports (animation-timeline: view()){
  html.pro .innen p,html.pro .innen li,html.pro .innen h2,html.pro .innen h3,
  html.pro .zimmer p,html.pro .zimmer li,html.pro .kennzahl,html.pro .kennzahlen > *{animation:none}
}
html.pro .kennzahl b{white-space:nowrap}

/* ══ Bildpaare neu (David 30.09.: „wie das mit den Bildern geregelt ist, gefällt mir nicht"):
   statt großem Bild + eingerahmtem Klebebild → zwei runde Hochformate nebeneinander,
   das zweite tiefer versetzt (Ruhe wie in der Natur-Karte). Kein Rahmen, kein Schatten,
   nichts ragt aus dem Abschnitt. Gilt für ks-doppelbild (Unterseiten) und haus-komposition (Start). ══ */
.ks-doppelbild{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.6rem);align-items:start;padding-bottom:0}
.ks-doppelbild > .vorhang:first-child,.ks-doppelbild > .vorhang + .vorhang{position:relative;inset:auto;width:auto;margin:0;
  aspect-ratio:3/4;border:0;box-shadow:none;border-radius:clamp(16px,1.8vw,26px)}
.ks-doppelbild > .vorhang + .vorhang{margin-top:clamp(2.5rem,7vw,6rem)}
.innen.zwei.gedreht .ks-doppelbild > .vorhang:first-child{margin-left:0}
.ks-doppelbild .vorhang{max-height:74vh}

/* Titelbild-Logo wie vorher: saubere weiße Wimpelform, KEIN Schatten, kein Rahmen
   (David 30.09.: „dieser schwarze Rahmen, dieser Schatten sollte weg sein bei der Hero") */
html.pro body.kopf-casa .titel-logo{filter:none}

/* ══ Kein Rot mehr auf der Seite (David 30.09.: „ich möchte dieses Rot nicht haben,
   viel zu knallig"). Akzente (Preise, Zahlen, kleine Beschriftungen, Linien) in
   dunklem Messing — nur das Logo bleibt rot. Überschreibt --oliv aus pro.css. ══ */
:root{--rot:var(--akzent);--rot-tief:#6d5a33;--oliv:var(--akzent)}

/* Bildbänder ohne grauen Schleier (David 30.09.: „grauer Hintergrund bei der Überschrift
   sollte weg"). Nur oben/unten ein Hauch, die Schrift trägt ein weicher Schatten. */
html.pro .zitat::after{background:linear-gradient(180deg,rgba(14,18,14,.22),rgba(14,18,14,0) 32%,rgba(14,18,14,0) 68%,rgba(14,18,14,.28))}
html.pro .zitat-inhalt p,html.pro .zitat-inhalt p *{text-shadow:0 2px 28px rgba(8,10,8,.55),0 1px 3px rgba(8,10,8,.45)}
html.pro .zitat-inhalt small,html.pro .zitat-inhalt .zitat-quelle,html.pro .zitat-inhalt p + *{text-shadow:0 1px 12px rgba(8,10,8,.6)}

/* Handy-Einflug der Bilder (seite.js setzt .ks-flug / .ks-flug-da) — Feder statt linear */
@media (max-width:760px){
  html.pro body .ks-flug{transform:translate3d(0,64px,0) scale(.96)!important;opacity:0!important;
    transition:transform .75s cubic-bezier(.2,1.35,.4,1) var(--flug-verzug,0ms),opacity .4s ease var(--flug-verzug,0ms)!important}
  html.pro body .ks-flug.ks-flug-da{transform:none!important;opacity:1!important}
}

/* ══ Buchen = gefüllter Knopf, Anfragen = Rahmen-Knopf (David 30.09.: „Buchungs-Button
   andere Farbe wie Anfragen, aber hochwertig"). Tannenschwarz mit heller Schrift,
   Messing wächst beim Überfahren von unten. Über dem Titelbild / im dunklen Menü hell. ══ */
html.pro body.kopf-casa .kopf .knopf-buchen,
.ks-schub-knoepfe .knopf-buchen,
a.ks-knopf[href*="/buchen/"],a.ks-knopf[href*="/prenota/"],a.ks-knopf[href*="/book/"],
.buchung-tor .knopf-rot{
  background:var(--tinte)!important;border-color:var(--tinte)!important;color:#f7f4ec!important}
html.pro body.kopf-casa .kopf .knopf-buchen::after,
.ks-schub-knoepfe .knopf-buchen::after,
a.ks-knopf[href*="/buchen/"]::after,a.ks-knopf[href*="/prenota/"]::after,a.ks-knopf[href*="/book/"]::after,
.buchung-tor .knopf-rot::after{background:var(--akzent)!important}
html.pro body.kopf-casa .kopf .knopf-buchen:hover,html.pro body.kopf-casa .kopf .knopf-buchen:focus-visible,
.ks-schub-knoepfe .knopf-buchen:hover,
a.ks-knopf[href*="/buchen/"]:hover,a.ks-knopf[href*="/prenota/"]:hover,a.ks-knopf[href*="/book/"]:hover,
.buchung-tor .knopf-rot:hover{border-color:var(--akzent)!important;color:#fff!important}
/* über dem Titelbild (Kopf noch durchsichtig) und im dunklen Menü: hell gefüllt */
html.pro body.kopf-casa .kopf:not(.fest) .knopf-buchen,
.ks-schub-knoepfe .knopf-buchen,
.ks-band.nacht a.ks-knopf[href*="/buchen/"],.ks-band.nacht a.ks-knopf[href*="/prenota/"],.ks-band.nacht a.ks-knopf[href*="/book/"],
.tief a.ks-knopf[href*="/buchen/"],.tief a.ks-knopf[href*="/prenota/"],.tief a.ks-knopf[href*="/book/"]{
  background:#f7f4ec!important;border-color:#f7f4ec!important;color:var(--tinte)!important}
html.pro body.kopf-casa .kopf:not(.fest) .knopf-buchen:hover,.ks-schub-knoepfe .knopf-buchen:hover,
.ks-band.nacht a.ks-knopf[href*="/buchen/"]:hover,.tief a.ks-knopf[href*="/buchen/"]:hover,
.ks-band.nacht a.ks-knopf[href*="/prenota/"]:hover,.tief a.ks-knopf[href*="/prenota/"]:hover,
.ks-band.nacht a.ks-knopf[href*="/book/"]:hover,.tief a.ks-knopf[href*="/book/"]:hover{color:#fff!important;border-color:var(--akzent)!important}

/* ══ Handy-Leiste Anfragen + Buchen (seite.js baut sie; nur bis 760 px) ══ */
.ks-handyleiste{display:none}
@media (max-width:760px){
  .ks-handyleiste{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:.65rem var(--ks-rand,16px) calc(.65rem + env(safe-area-inset-bottom,0px));
    background:#fff;box-shadow:0 -1px 0 rgba(20,27,20,.08),0 -14px 30px -18px rgba(20,27,20,.35);
    transform:translate3d(0,110%,0);transition:transform .6s cubic-bezier(.2,1.2,.4,1);will-change:transform}
  .ks-handyleiste.zeigt{transform:none}
  html.ks-menue-offen .ks-handyleiste{transform:translate3d(0,110%,0)}
  .ks-handyleiste a{display:flex;align-items:center;justify-content:center;height:3rem;text-decoration:none;
    font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--tinte);color:var(--tinte);background:transparent}
  .ks-handyleiste .ks-hl-buchen{background:var(--tinte);color:#f7f4ec}
  .ks-handyleiste a:active{transform:scale(.98)}
  /* Platz unten, damit die Fußzeile nie unter der Leiste liegt */
  html.hat-handyleiste .fuss{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}
}

/* Handy-Leiste: Überfahr-Effekt wie bei den Kopf-Knöpfen (in der Vorschau mit Maus
   sichtbar, am Handy beim Antippen): Füllung wächst von unten. */
@media (max-width:760px){
  .ks-handyleiste a{position:relative;overflow:hidden;isolation:isolate;transition:color .4s ease,border-color .4s ease}
  .ks-handyleiste a::after{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;
    transition:transform .5s cubic-bezier(.16,.84,.34,1)}
  .ks-handyleiste .ks-hl-anfragen::after{background:var(--tinte)}
  .ks-handyleiste .ks-hl-buchen::after{background:var(--akzent)}
  .ks-handyleiste a:hover,.ks-handyleiste a:focus-visible,.ks-handyleiste a:active{color:#fff}
  .ks-handyleiste .ks-hl-buchen:hover,.ks-handyleiste .ks-hl-buchen:focus-visible{border-color:var(--akzent)}
  .ks-handyleiste a:hover::after,.ks-handyleiste a:focus-visible::after,.ks-handyleiste a:active::after{transform:scaleY(1)}
}

/* Vollbild-Menü: dünne weiße Linien oben/links (David 30.09.) — in der verkleinerten
   Vorschau rundete clip-path:inset(0) einen Pixel nach innen, die weiße Seite blitzte
   durch. Menü ragt jetzt 3 px über alle Ränder, offen ohne Beschnitt nach außen. */
.ks-schub{inset:-3px}
.ks-schub::before{inset:-3px}
html.ks-menue-offen .ks-schub{clip-path:inset(-6px)}

/* ══ Handy-Leiste im Vorlage-1-Aussehen (David 30.09.: „gleich wie bei Vorlage 1",
   Muster entwurf-trojer-pro3/pro.css „KOPF: ANFRAGEN + BUCHEN"): schwebende Karte mit
   Abstand zu allen Rändern, runde Ecken, über dem Home-Balken. Ohne Chat → rechts 12 px.
   Buchen in Cornelias Tannenschwarz (kein Rot). ══ */
@media (max-width:760px){
  .ks-handyleiste{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));gap:8px;padding:7px;
    background:rgba(255,255,255,.97);border:1px solid var(--linie,rgba(20,27,20,.1));border-radius:18px;
    box-shadow:0 12px 32px rgba(20,24,18,.16),0 2px 6px rgba(20,24,18,.06);
    opacity:0;transform:translate3d(0,calc(100% + 28px),0);pointer-events:none;
    transition:transform .6s cubic-bezier(.34,1.32,.64,1),opacity .3s ease}
  .ks-handyleiste.zeigt{opacity:1;transform:none;pointer-events:auto}
  html.ks-menue-offen .ks-handyleiste{opacity:0;transform:translate3d(0,calc(100% + 28px),0);pointer-events:none}
  .ks-handyleiste a{height:auto;min-height:44px;border-radius:12px;font-size:.68rem;font-weight:600;letter-spacing:.16em;
    color:var(--tinte);border:1px solid var(--linie,rgba(20,27,20,.12));background:#fff}
  .ks-handyleiste .ks-hl-buchen{background:var(--tinte);border-color:var(--tinte);color:#fff}
  html.hat-handyleiste .fuss{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ══ Seitenwechsel weich (David 30.09.): Überblendung zwischen den Seiten statt
   dunklem Vorhang. Alte Seite blendet kurz aus, neue kommt sanft mit leichtem
   Anheben; der Kopf bleibt ruhig stehen. Browser ohne View Transitions wechseln
   einfach sofort (kein Vorhang mehr). ══ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ks-seite-raus .26s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:ks-seite-rein .6s cubic-bezier(.22,1,.36,1) both}
@keyframes ks-seite-raus{to{opacity:0}}
@keyframes ks-seite-rein{from{opacity:0;transform:translate3d(0,16px,0)}}
html.pro .kopf{view-transition-name:ks-kopf}
::view-transition-group(ks-kopf){animation-duration:.3s}

/* Erstes Öffnen: Vorhang hebt sich ruhig und gleichmäßig (David 30.09.: „cleaner,
   smoother, auch am großen Bildschirm"). Kein wachsender Bogen mehr — border-radius
   wird bei jeder Bildstufe neu gezeichnet und ruckelt auf großen Flächen; jetzt nur
   noch transform (läuft auf der Grafikkarte), weiche Ein-/Ausfahrt. */
html.pro .auftakt{border-radius:0!important;transition:transform .95s cubic-bezier(.76,0,.24,1),opacity .35s ease .75s!important}
html.pro .auftakt.hebt{transform:translate3d(0,-100%,0);border-radius:0!important}
html.pro .auftakt.hebt .auftakt-inhalt{opacity:0;transform:translate3d(0,-18px,0);transition:opacity .35s ease,transform .5s ease}

/* Seitenwechsel: reine Überblendung, ohne Verschieben — am PC und am Handy gleich ruhig */
::view-transition-old(root){animation:ks-seite-raus .32s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:ks-seite-rein2 .5s cubic-bezier(.4,0,.2,1) both}
@keyframes ks-seite-rein2{from{opacity:0}}

/* ══ Anreise: Kartenkarte (David 30.09.: „Google-Maps-Ausschnitt, schön und modern,
   draufklicken"). Lokales Kartenbild (OpenStreetMap, im Stil der Seite eingefärbt) —
   lädt nichts von Google, erst der Klick öffnet Google Maps. ══ */
.ks-karte{position:relative;display:block;overflow:hidden;border-radius:clamp(18px,2vw,28px);aspect-ratio:3/2;
  background:#e9e7e0;box-shadow:0 30px 60px -38px rgba(20,27,20,.45);text-decoration:none;color:var(--tinte);isolation:isolate}
.ks-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.ks-karte:hover img,.ks-karte:focus-visible img{transform:scale(1.07)}
.ks-karte::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,transparent 55%,rgba(20,27,20,.18))}
/* Markierung: dunkler Punkt mit Messing-Ring, der sanft pulsiert */
.ks-karte-pin{position:absolute;left:50%;top:50%;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--tinte);box-shadow:0 0 0 4px #f7f4ec,0 6px 18px rgba(20,27,20,.45)}
.ks-karte-pin i{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--akzent);animation:ks-puls 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ks-puls{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.ks-karte-etikett{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,calc(-100% - 22px));
  display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.7rem 1.1rem;background:#fff;border-radius:12px;
  box-shadow:0 14px 30px -14px rgba(20,27,20,.45);white-space:nowrap;font-size:.78rem;color:var(--text,#3a403a)}
.ks-karte-etikett b{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--tinte);letter-spacing:.02em}
.ks-karte-etikett::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:#fff;transform:rotate(45deg)}
.ks-karte-knopf{position:absolute;right:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,20px);z-index:2;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;background:var(--tinte);color:#f7f4ec;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.ks-karte-knopf svg{width:16px;height:16px}
.ks-karte:hover .ks-karte-knopf,.ks-karte:focus-visible .ks-karte-knopf{background:var(--akzent);transform:translateY(-2px)}
.ks-karte-quelle{position:absolute;left:10px;bottom:8px;z-index:2;font-size:.62rem;color:rgba(20,27,20,.6);background:rgba(255,255,255,.7);padding:.1rem .4rem;border-radius:4px}
@media (max-width:760px){
  .ks-karte{aspect-ratio:4/5}
  .ks-karte-knopf{left:12px;right:12px;justify-content:center}
  .ks-karte-quelle{bottom:auto;top:8px}
}

/* Agentur ganz unten (David 30.09.): dezent, klein, klickbar → alpixai.com */
.fuss-schluss{flex-wrap:wrap}
.fuss-agentur{display:inline-flex;align-items:center;gap:.7rem;margin-left:auto;text-decoration:none;color:inherit;opacity:.78;
  transition:opacity .35s ease}
.fuss-agentur span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.fuss-agentur img{height:40px;width:auto;display:block}
.fuss-agentur:hover,.fuss-agentur:focus-visible{opacity:1}
@media (max-width:760px){.fuss-agentur{margin:1rem 0 0}}

/* Impressum: Webagentur als ruhige Zeile mit kleinem Logo (nicht auffällig) */
.ks-agentur{display:inline-flex;align-items:center;gap:1rem;margin-top:.4rem;padding:.9rem 1.2rem .9rem .9rem;border:1px solid var(--linie,rgba(20,27,20,.12));
  text-decoration:none;color:var(--text,#3a403a);transition:border-color .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.ks-agentur img{height:42px;width:auto;display:block}
.ks-agentur span{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;line-height:1.4}
.ks-agentur b{font-weight:600;color:var(--tinte);letter-spacing:.04em}
.ks-agentur i{font-style:normal;font-size:.78rem;color:var(--akzent);letter-spacing:.06em}
.ks-agentur:hover,.ks-agentur:focus-visible{border-color:var(--tinte);transform:translateY(-2px)}

/* ══ Titelbild-Fakten edler (David 30.09.: Kapseln „nicht hochwertig", am Handy weg):
   keine Rahmen-Pillen mehr — eine ruhige Zeile in kleinen gesperrten Versalien,
   getrennt durch feine senkrechte Linien. Am Handy ausgeblendet. ══ */
html.pro .ks-held-fakten{gap:0;margin-top:2.2rem;align-items:center}
html.pro .ks-held-fakten li{border:0;border-radius:0;background:none;padding:0 1.25rem;
  font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.88);
  line-height:1.1;position:relative;backdrop-filter:none;-webkit-backdrop-filter:none}
html.pro .ks-held-fakten li:first-child{padding-left:0}
html.pro .ks-held-fakten li + li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:1.1em;margin-top:-.55em;background:rgba(255,255,255,.4)}
@media (max-width:760px){html.pro .ks-held-fakten{display:none}}
/* Tablet: nur die ersten drei Fakten, damit die Zeile nie umbricht (kein Strich am Zeilenanfang) */
@media (max-width:1100px){html.pro .ks-held-fakten li:nth-child(n+4){display:none}}
@media (max-width:900px){html.pro .ks-held-fakten li{padding:0 .9rem;letter-spacing:.16em}}

/* ══════════════════════════════════════════════════════════════════════
   CORNELIAS EIGENE HANDSCHRIFT (David 30.09.: „nicht jede Website gleich",
   nur Cornelia, Vorlage 1 bleibt unberührt).
   Schrift: Marcellus (römische Versalien, wie gemeißelt — alpin, edel) für
   Überschriften, Hanken Grotesk für den Text. Beide lokal, OFL-Lizenz.
   Farbe: Schieferblau statt Grün-Schwarz, Kupfer statt Messing, wärmeres Elfenbein.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/marcellus-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/marcellus-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(schriften/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(schriften/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --display:'Marcellus','Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --zier:var(--sans);
  /* Schieferblau-Familie statt Grün-Schwarz */
  --tinte:#1b2430;
  --text:#465160;
  --text-leise:#6c7684;
  --fels:#18202b;
  --fels-tief:#10161e;
  --linie:rgba(27,36,48,.13);
  /* Kupfer statt Messing */
  --akzent:#9a6749;
  --messing:#c89a78;
  --sand:#b7a490;
  --sand-tief:#7a624d;
  --rot:#9a6749;--rot-tief:#7b5038;--oliv:#9a6749;
  /* wärmeres Elfenbein, Stein-Grau statt Salbei */
  --creme:#f6f1e9;
  --salbei:#eef0f2;
  --band:#f1f2f3;
}
html.pro body{font-family:var(--sans)}
/* Marcellus hat nur einen Schnitt — kein künstlich gefettetes Bild */
html.pro h1,html.pro h2,html.pro h3,html.pro .rubrik,html.pro .ks-h2{font-synthesis:none}
html.pro h2,html.pro .zeile{font-weight:400;font-variation-settings:normal}
html.pro .rubrik{font-weight:400;font-variation-settings:normal;letter-spacing:.28em}
/* Natur-Karte: Stein-Grau passend zum Schieferblau */
.nk{--nk-rost:#eceef0;--nk-rost-tief:#dde1e5}
/* Grund hinter der Seite dunkel: beim schnellen Scrollen am Handy blitzte oben
   für einen Moment der weiße Seitengrund auf (David 30.09.). Der Inhalt selbst
   bleibt weiß (body), nur was dahinter liegt, ist dunkel wie Titelbild/Fußzeile. */
html{background:var(--fels)}
body{background:var(--papier,#fff)}
/* Buchungsfenster (fremdes Widget) erbt sonst unsere großen Versal-Überschriften */
#Bs-BookingWidget h1,#Bs-BookingWidget h2,#Bs-BookingWidget h3{font-family:var(--sans)!important;font-size:1.15rem!important;
  font-weight:600!important;letter-spacing:.01em!important;text-transform:none!important;max-width:none!important;line-height:1.3!important}

/* ══════════════════════════════════════════════════════════════════════
   CORNELIA-PALETTE, 2. Fassung (David 30.09.: „noch viel zu stark Vorlage 1,
   alles soll zusammenpassen"). Weg vom Weiß + Grün-Schwarz + Messing:
   warmes Elfenbein als Grund, helles Sand für Wechselflächen, warmes
   Espresso-Braun (Zirbenholz) für dunkle Flächen, gedämpftes Weinrot aus dem
   Logo als feiner Akzent (nur Schrift/Linien, nie Knöpfe). Überschriften größer.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --papier:#f7f2ea;          /* warmes Elfenbein — Grund der ganzen Seite */
  --creme:#efe7db;           /* helles Sand — Wechselflächen */
  --band:#efe7db;--band-tief:#e5dbcc;--salbei:#efe7db;
  --tinte:#2a221e;           /* Espresso — Schrift, Knöpfe */
  --text:#5a4f48;--text-leise:#857a71;
  --fels:#2b231f;--fels-tief:#1f1916;   /* Zirbenholz-dunkel */
  --linie:rgba(42,34,30,.14);
  --akzent:#7e2f36;          /* gedämpftes Logo-Weinrot */
  --messing:#d4b69a;         /* helles Kupfer-Sand auf dunklem Grund */
  --sand:#c2ad96;--sand-tief:#8a6f58;
  --rot:#7e2f36;--rot-tief:#5f2228;--oliv:#7e2f36;
  --schrift-hell:#f7f2ea;
}
html.pro body,body{background:var(--papier)}
html{background:var(--fels)}
html.pro .kopf.fest,html.pro body.kopf-casa .kopf.fest{background:rgba(247,242,234,.985)}
.ks-handyleiste{background:rgba(247,242,234,.97)!important}
.ks-handyleiste a{background:var(--papier)!important}
.ks-handyleiste .ks-hl-buchen{background:var(--tinte)!important}
.nk{--nk-rost:#e9e0d3;--nk-rost-tief:#ddd2c2}
.ks-karte{background:#e9e0d3}
/* Buchen-Knopf: Espresso, beim Überfahren Weinrot */
html.pro body.kopf-casa .kopf .knopf-buchen::after,.ks-schub-knoepfe .knopf-buchen::after,
a.ks-knopf[href*="/buchen/"]::after,a.ks-knopf[href*="/prenota/"]::after,a.ks-knopf[href*="/book/"]::after{background:var(--akzent)!important}

/* Überschriften größer (ca. +20 %) */
html.pro .zeile{font-size:clamp(2rem,1.25rem + 2.9vw,3.7rem)}
html.pro .innen.zwei .zeile,html.pro .ks-faq .zeile{font-size:clamp(1.75rem,.95rem + 2.2vw,3rem)}
html.pro .zeile.eng{font-size:clamp(1.6rem,1rem + 2.3vw,3rem)}
html.pro .innen.zwei .zeile.eng{font-size:clamp(1.5rem,.8rem + 1.95vw,2.75rem)}
html .nk .nk-text h2{font-size:clamp(2.2rem,1rem + 2.35vw,3.35rem)}
@media (max-width:820px){html .nk .nk-text h2{font-size:clamp(1.85rem,8vw,2.6rem)}}
@media (max-width:380px){html.pro body.kopf-casa h2:not(.nk h2){font-size:1.5rem}}
/* Handy: größer als vorher, aber nie mehr als 2 Zeilen */
@media (max-width:480px){html.pro body.kopf-casa h2.zeile:not(.nk h2),html.pro body.kopf-casa .zeile:not(.nk h2){font-size:1.6rem;letter-spacing:.075em;text-indent:.075em}}
@media (max-width:380px){html.pro body.kopf-casa h2.zeile:not(.nk h2),html.pro body.kopf-casa .zeile:not(.nk h2){font-size:1.42rem}}
/* Rubriken: auf hellem Grund Weinrot, auf dunklem Grund helles Kupfer-Sand */
html.pro .rubrik,html.pro .mitte .rubrik,html.pro .band-creme .rubrik,html.pro .band-grund .rubrik{color:var(--akzent)}
html.pro .tief .rubrik,html.pro .ks-band.nacht .rubrik,html.pro .zitat .rubrik,html.pro .ks-schub .rubrik,html.pro .fuss .rubrik,html.pro .ks-held .ks-oben{color:var(--messing)}

/* ══════════════════════════════════════════════════════════════════════
   CORNELIA „EDITORIAL" — eigene Formensprache (David 01.10.: „sieht immer
   noch aus wie Vorlage 1"). Reihenfolge der Themen bleibt, das Aussehen nicht:
   · Überschriften in ruhiger Groß-/Kleinschreibung statt gesperrter Versalien
   · Rubrik mit Berggipfel-Zeichen (aus dem Logo) statt Strich
   · keine senkrechte Zählspalte
   · Bilder fast eckig mit feinem versetztem Rahmen (Passepartout)
   · Zahlen als Reihe mit feinen Trennlinien, Listen mit kurzem Weinrot-Strich
   · Bildbänder: Text links unten wie eine Magazin-Bildunterschrift
   ══════════════════════════════════════════════════════════════════════ */
html.pro body.kopf-casa{--gipfel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 11 7.5 2.5 11 7 14 3.5 21 11' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Überschriften: Groß-/Kleinschreibung, größer, enger */
html.pro body.kopf-casa .zeile,html.pro body.kopf-casa h2.zeile{text-transform:none;letter-spacing:-.012em;text-indent:0;line-height:1.06;
  font-size:clamp(2.35rem,1.3rem + 3.4vw,4.5rem)}
html.pro body.kopf-casa .innen.zwei .zeile,html.pro body.kopf-casa .ks-faq .zeile,html.pro body.kopf-casa .zeile.eng,
html.pro body.kopf-casa .innen.zwei .zeile.eng{font-size:clamp(2.05rem,1.05rem + 2.75vw,3.7rem);letter-spacing:-.012em;text-indent:0}
html.pro body.kopf-casa .nk .nk-text h2{text-transform:none;letter-spacing:-.01em;font-size:clamp(2.3rem,1.1rem + 2.6vw,3.6rem);line-height:1.06}
@media (max-width:480px){html.pro body.kopf-casa h2.zeile:not(.nk h2),html.pro body.kopf-casa .zeile:not(.nk h2){font-size:2.05rem;letter-spacing:-.01em;text-indent:0}
  html.pro body.kopf-casa .nk .nk-text h2{font-size:2.05rem}}
@media (max-width:380px){html.pro body.kopf-casa h2.zeile:not(.nk h2),html.pro body.kopf-casa .zeile:not(.nk h2){font-size:1.85rem}}

/* Rubrik: Gipfel-Zeichen statt Strich, kleine Versalien */
html.pro body.kopf-casa .rubrik{gap:.7rem;letter-spacing:.24em;font-family:var(--sans);font-weight:600;font-size:.7rem}
html.pro body.kopf-casa .rubrik::before{width:22px!important;height:12px;background:currentColor;
  -webkit-mask:var(--gipfel) center/contain no-repeat;mask:var(--gipfel) center/contain no-repeat;transition:none}

/* keine senkrechte Zählspalte */
html.pro body.kopf-casa .zaehlspalte{display:none!important}

/* Bilder: fast eckig + feiner versetzter Rahmen */
html.pro body.kopf-casa .ks-doppelbild > .vorhang,
html.pro body.kopf-casa .ks-einzelbild.vorhang,
html.pro body.kopf-casa .haus-komposition figure{border-radius:3px!important;overflow:visible!important;clip-path:none!important}
html.pro body.kopf-casa .ks-doppelbild > .vorhang img,html.pro body.kopf-casa .ks-einzelbild.vorhang img,
html.pro body.kopf-casa .haus-komposition figure img{border-radius:3px}
html.pro body.kopf-casa .ks-doppelbild > .vorhang::before,html.pro body.kopf-casa .ks-einzelbild.vorhang::before,
html.pro body.kopf-casa .haus-komposition figure::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);
  border:1px solid var(--sand);border-radius:3px;z-index:-1;pointer-events:none}
html.pro body.kopf-casa .ks-doppelbild > .vorhang,html.pro body.kopf-casa .haus-komposition figure{isolation:isolate}
html.pro body.kopf-casa .bildgruppe figure,html.pro body.kopf-casa .bildgruppe .bg-bild,html.pro body.kopf-casa .bildgruppe img{border-radius:3px!important}
html.pro body.kopf-casa .nk-karte{border-radius:6px}
html.pro body.kopf-casa .nk-bild{border-radius:4px}
html.pro body.kopf-casa .ks-karte{border-radius:6px}
html.pro body.kopf-casa .zf-karte,html.pro body.kopf-casa .zf-karte img{border-radius:3px}

/* Zahlen: Reihe mit feinen Trennlinien, kein Unterstrich */
html.pro body.kopf-casa .kennzahlen{gap:0!important}
html.pro body.kopf-casa .kennzahl{padding:0 clamp(1rem,2.4vw,2.2rem) 0 clamp(1rem,2.4vw,2.2rem);border-left:1px solid var(--linie)}
html.pro body.kopf-casa .kennzahl:first-child{padding-left:0;border-left:0}
html.pro body.kopf-casa .kennzahl::after{display:none!important}
html.pro body.kopf-casa .kennzahl b{font-family:var(--display);font-weight:400;color:var(--tinte)}
html.pro body.kopf-casa .kennzahl span{color:var(--akzent)}
html.pro body.kopf-casa .tief .kennzahl{border-left-color:var(--linie-hell)}
html.pro body.kopf-casa .tief .kennzahl b{color:var(--schrift-hell)}
html.pro body.kopf-casa .tief .kennzahl span{color:var(--messing)}

/* Listen: kurzer Weinrot-Strich statt durchgehender Linie */
html.pro body.kopf-casa .hinweise li{border-top:0;padding-top:1.2rem;position:relative}
html.pro body.kopf-casa .hinweise li::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:var(--akzent)}
html.pro body.kopf-casa .hinweise li b{color:var(--tinte);font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:0;text-transform:none}
html.pro body.kopf-casa .tief .hinweise li::before{background:var(--messing)}
html.pro body.kopf-casa .tief .hinweise li b{color:var(--schrift-hell)}
@media (hover:hover){html.pro body.kopf-casa .hinweise li:hover{transform:none;border-top-color:transparent}}

/* Bildbänder: Text links unten, wie Bildunterschrift */
html.pro body.kopf-casa .zitat{align-items:flex-end;justify-content:flex-start}
html.pro body.kopf-casa .zitat-inhalt{text-align:left;margin:0;padding:0 var(--ks-rand,clamp(1.4rem,5vw,4.5rem)) clamp(2.4rem,6vh,4.5rem);max-width:none}
html.pro body.kopf-casa .zitat-inhalt p{font-family:var(--display);text-transform:none;letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
html.pro body.kopf-casa .zitat-inhalt p + *{margin-left:0!important;text-align:left;justify-content:flex-start}
html.pro body.kopf-casa .zitat::after{background:linear-gradient(180deg,rgba(20,16,14,0) 40%,rgba(20,16,14,.55) 100%)}
/* Bildpaare: Fotos bleiben in ihrem Feld (Zoom quoll über), Rahmen als versetzte
   Schatten-Linie; Einblenden ohne Beschnitt (clip-path würde den Rahmen kappen). */
html.pro body.kopf-casa .ks-doppelbild > .vorhang,html.pro body.kopf-casa .ks-einzelbild.vorhang{overflow:hidden!important;
  box-shadow:0 26px 48px -30px rgba(42,34,30,.55),0 6px 16px -12px rgba(42,34,30,.28)!important}
html.pro body.kopf-casa .band-creme .ks-doppelbild > .vorhang,html.pro body.kopf-casa .creme .ks-doppelbild > .vorhang{
  box-shadow:0 26px 48px -30px rgba(42,34,30,.55),0 6px 16px -12px rgba(42,34,30,.28)!important}
html.pro body.kopf-casa .ks-doppelbild > .vorhang::before,html.pro body.kopf-casa .ks-einzelbild.vorhang::before{content:none}
html.pro.js body.kopf-casa .ks-doppelbild > .vorhang,html.pro.js body.kopf-casa .ks-einzelbild.vorhang{
  opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
html.pro.js body.kopf-casa .sicht .ks-doppelbild > .vorhang,html.pro.js body.kopf-casa .ks-doppelbild > .vorhang.sicht,
html.pro.js body.kopf-casa .ks-einzelbild.vorhang.sicht,html.pro.js body.kopf-casa .sicht .ks-einzelbild.vorhang{opacity:1;transform:none}
html.pro.js body.kopf-casa .ks-doppelbild > .vorhang + .vorhang{transition-delay:.12s}
/* alle großen Überschriften in der neuen Schreibweise (auch Fragen-, Anfrage-, Angebots-Köpfe) */
html.pro body.kopf-casa main h2,html.pro body.kopf-casa section h2,html.pro body.kopf-casa .ks-h2{text-transform:none;letter-spacing:-.012em;text-indent:0}
html.pro body.kopf-casa .ks-recht h2{letter-spacing:0}

/* Weißer Strich oben beim Scrollen (David 01.10., im Tutorial-Video bei 0:06 sichtbar):
   Das Start-Titelbild klebt oben (sticky) und hängt beim Scrollen manchmal 1 px nach —
   dann schien der helle Seitengrund durch. Ein dunkler Saum über dem Titelbild deckt
   diese Pixelreihe immer ab (box-shadow wird von overflow:hidden nicht beschnitten). */
html.pro body.startseite .titel{box-shadow:0 -24px 0 0 var(--fels)}
html.pro body .ks-held{box-shadow:0 -24px 0 0 var(--fels)}
/* Zahlenreihe: jede Spalte so breit wie ihre Zahl (David 01.10.: „15 Uhr läuft in den Strich") */
html.pro body.kopf-casa .kennzahlen{display:flex!important;flex-wrap:wrap;align-items:flex-start;row-gap:1.6rem}
html.pro body.kopf-casa .kennzahl{flex:0 1 auto;min-width:0;max-width:16rem}
html.pro body.kopf-casa .kennzahl b{font-size:clamp(2rem,1.3rem + 1.6vw,3rem);line-height:1}
html.pro body.kopf-casa .kennzahl span{margin-top:.8rem;max-width:12rem}
/* Zahlenreihe immer EINE Reihe (David 01.10.: „nicht alles in einer Reihe" → Umbruch mit
   Strich am Zeilenanfang sah unruhig aus). Zahl bleibt zusammen, Beschriftung bricht darunter um. */
html.pro body.kopf-casa .kennzahlen{display:grid!important;grid-auto-flow:column;grid-auto-columns:max-content;column-gap:0;row-gap:0;justify-content:start}
html.pro body.kopf-casa .mitte .kennzahlen{justify-content:center}
html.pro body.kopf-casa .kennzahl{max-width:none}
html.pro body.kopf-casa .kennzahl span{max-width:10.5rem;white-space:normal}
@media (max-width:560px){
  html.pro body.kopf-casa .kennzahl{padding:0 .9rem}
  html.pro body.kopf-casa .kennzahl:first-child{padding-left:0}
  html.pro body.kopf-casa .kennzahl b{font-size:clamp(1.6rem,7vw,2.1rem)}
  html.pro body.kopf-casa .kennzahl span{max-width:6.6rem;font-size:.6rem;letter-spacing:.16em}
}

/* ══════════════════════════════════════════════════════════════════════
   FEINRUNDE 01.10. abends (David) — Knöpfe rund, Natur-Karte rund (V3),
   Strich wächst beim Überfahren, Bilder reagieren, Abstand Zimmer kleiner,
   Sommer/Winter-Umschalter, Angebots-Schaufenster
   ══════════════════════════════════════════════════════════════════════ */
/* 1 · alle Knöpfe rund */
html.pro body.kopf-casa .knopf,html.pro body.kopf-casa .ks-knopf,html.pro body.kopf-casa .nk-knopf,
html.pro body.kopf-casa .ks-karte-knopf,html.pro body.kopf-casa .angebot-los,html.pro body.kopf-casa .ks-handyleiste a,
html.pro body.kopf-casa .buchung-tor .knopf-rot,html.pro body.kopf-casa .kopf .knopf,html.pro body.kopf-casa .ks-schub-knoepfe .knopf,
html.pro body.kopf-casa button.ks-knopf,html.pro body.kopf-casa input[type=submit]{border-radius:999px!important;overflow:hidden}
html.pro body.kopf-casa .ks-handyleiste{border-radius:999px}
html.pro body.kopf-casa .ks-handyleiste a{border-radius:999px!important}
html.pro body.kopf-casa .ks-agentur{border-radius:16px}

/* 2 · Natur-Karte wieder rund wie in Vorlage 3 (Farbe bleibt) */
html.pro body.kopf-casa .nk-karte{border-radius:40px}
html.pro body.kopf-casa .nk-bild{border-radius:30px}
@media (max-width:820px){html.pro body.kopf-casa .nk-karte{border-radius:24px}html.pro body.kopf-casa .nk-bild{border-radius:16px}}

/* 3 · Strich über Listenpunkten wächst beim Überfahren */
html.pro body.kopf-casa .hinweise li::before{transition:width .7s cubic-bezier(.34,1.56,.64,1)}
html.pro body.kopf-casa .hinweise li:hover::before{width:84px}
html.pro body.kopf-casa .hinweise li b{transition:color .4s ease}
html.pro body.kopf-casa .hinweise li:hover b{color:var(--akzent)}
html.pro body.kopf-casa .tief .hinweise li:hover b{color:var(--messing)}

/* 4 · Bilder reagieren beim Überfahren (sanft, Feder) */
html.pro body.kopf-casa .bento figure,html.pro body.kopf-casa .haus-komposition figure,html.pro body.kopf-casa .ks-doppelbild > .vorhang{overflow:hidden}
html.pro body.kopf-casa .bento figure img,html.pro body.kopf-casa .haus-komposition figure img{transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  html.pro body.kopf-casa .bento figure:hover img,html.pro body.kopf-casa .haus-komposition figure:hover img{transform:scale(1.06)}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang:hover img{--zoom:1.26}
}

/* 5 · Zimmer: Abstand zwischen Text und Zimmerkarten kleiner (PC) */
@media (min-width:861px){
  html.pro body.kopf-casa .zf-kopf{position:relative;z-index:2;padding-bottom:0}
  html.pro body.kopf-casa .zf-spur{margin-top:-150px}
}

/* 6 · Sommer/Winter-Umschalter im Titelbild (Form wie Vorlage 3, Farben Cornelia) */
.ks-saison{display:inline-flex;gap:3px;margin-top:clamp(1.6rem,3vh,2.4rem);padding:4px;border-radius:999px;
  background:rgba(20,16,14,.42);box-shadow:inset 0 0 0 1px rgba(247,242,234,.35);opacity:0}
html.pro .ks-saison{transition:opacity .9s ease 1.55s}
html.pro.los .ks-saison{opacity:1}
.ks-saison button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border:0;border-radius:999px;background:transparent;
  color:rgba(247,242,234,.85);font:inherit;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background .45s cubic-bezier(.34,1.56,.64,1),color .3s ease}
.ks-saison button span{font-size:.95rem;letter-spacing:0}
.ks-saison button.an{background:var(--papier);color:var(--tinte)}
.ks-saison button:not(.an):hover{color:#fff;background:rgba(247,242,234,.14)}
@media (max-width:480px){.ks-saison button{padding:.5rem .85rem;font-size:.64rem;letter-spacing:.14em}}

/* 7 · Angebots-Schaufenster */
.sf-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sf-buehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem);align-items:stretch}
.sf-liste{display:flex;flex-direction:column}
.sf-punkt{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"zeit marke" "titel titel" "kurz kurz" "preis preis";
  gap:.35rem 1rem;padding:1.5rem 0 1.6rem;text-decoration:none;color:var(--text);border-bottom:1px solid var(--linie)}
.sf-punkt:first-child{border-top:1px solid var(--linie)}
.sf-punkt::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--akzent);transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.sf-punkt.an::before{width:84px}
.sf-zeit{grid-area:zeit;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}
.sf-marke{grid-area:marke;justify-self:end;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);
  padding:.25rem .7rem;border:1px solid var(--linie);border-radius:999px}
.sf-titel{grid-area:titel;font-family:var(--display);font-size:clamp(1.6rem,1.1rem + 1.3vw,2.4rem);line-height:1.1;color:var(--tinte);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sf-punkt.an .sf-titel{transform:translateX(.4rem)}
.sf-kurz{grid-area:kurz;font-size:.98rem;line-height:1.6;color:var(--text);max-width:34em}
.sf-preis{grid-area:preis;font-size:.88rem;color:var(--text-leise)}
.sf-preis b{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--akzent);margin-right:.3rem}
.sf-bilder{position:relative;border-radius:28px;overflow:hidden;min-height:420px;cursor:pointer;background:var(--band-tief)}
.sf-bild{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
.sf-bild.an{opacity:1;transform:none}
.sf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.sf-mehr{position:absolute;right:1.2rem;bottom:1.2rem;z-index:2;display:inline-flex;align-items:center;gap:.8rem;padding:.85rem 1.3rem;border-radius:999px;
  background:var(--papier);color:var(--tinte);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sf-bilder:hover .sf-mehr{transform:translateY(-3px)}
@media (max-width:860px){
  .sf-buehne{grid-template-columns:1fr}
  .sf-bilder{order:-1;min-height:0;aspect-ratio:4/3;border-radius:20px}
  .sf-punkt.an .sf-titel{transform:none}
}

/* 8 · Agentur in der Fußzeile: eine saubere Zeile, gleiche Höhe wie der Text daneben */
html.pro body.kopf-casa .fuss-schluss{align-items:center}
html.pro body.kopf-casa .fuss-agentur{display:inline-flex;align-items:center;gap:.6rem;opacity:.72;line-height:1}
html.pro body.kopf-casa .fuss-agentur span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
html.pro body.kopf-casa .fuss-agentur img{height:15px;width:auto}
html.pro body.kopf-casa .fuss-agentur b{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.12em;color:var(--schrift-hell)}
/* Angebots-Fenster rechts statt links: links unten stehen Logo + Sommer/Winter-Umschalter */
@media (min-width:761px){html.pro body.kopf-casa .angebot-popup{left:auto!important;right:clamp(1rem,2vw,1.6rem)!important}}

/* 6b · Umschalter in der Kopfleiste, runde Knöpfe wie Vorlage 3 (David 01.10.) */
.ks-saison.im-kopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:3px;gap:2px;z-index:3;
  pointer-events:auto;background:rgba(20,16,14,.4);box-shadow:inset 0 0 0 1px rgba(247,242,234,.45);
  transition:opacity .5s ease,visibility 0s linear 0s}
html.pro .ks-saison.im-kopf{transition:opacity .9s ease 1.2s}
.ks-saison.im-kopf button{width:38px;height:38px;padding:0;gap:0;justify-content:center;border-radius:50%;color:#fff}
.ks-saison.im-kopf button span{font-size:1.05rem;line-height:1}
.ks-saison.im-kopf button.an{background:var(--papier);color:var(--akzent)}
.ks-saison.im-kopf button:not(.an):hover{background:rgba(247,242,234,.18)}
.ks-saison.im-kopf button:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
html.pro body.kopf-casa .kopf.fest .ks-saison.im-kopf{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s}
@media (max-width:480px){.ks-saison.im-kopf button{width:34px;height:34px;padding:0}}

/* Fusszeile ALPIX-Zeile luftiger (David 01.10.: Logo größer, nicht gequetscht) */
html.pro body.kopf-casa .fuss-agentur{gap:1.1rem;opacity:.8}
html.pro body.kopf-casa .fuss-agentur span{font-size:.66rem;letter-spacing:.2em;padding-right:1.1rem;border-right:1px solid rgba(247,242,234,.22);line-height:28px}
html.pro body.kopf-casa .fuss-agentur img{height:28px;margin-right:-.25rem}
html.pro body.kopf-casa .fuss-agentur b{font-size:.92rem;letter-spacing:.14em}

/* 8 · Haus-Einstieg klarer gegliedert (David 01.10.): Rubrik · Titel · kurzer Lead ·
   Ausstattung als Reihe · Familie mit feinem Strich davor */
html.pro body.kopf-casa .ks-start-h1{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
html.pro body.kopf-casa .ks-start-h1::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
html.pro body.kopf-casa #haus .ks-haus-lead{margin-top:clamp(1.6rem,2.4vw,2.2rem);max-width:30em}
.ks-haus-merkmale{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;max-width:34em}
.ks-haus-merkmale li{padding:.5em 1.05em;border:1px solid rgba(42,34,30,.2);border-radius:999px;font-size:.8rem;letter-spacing:.04em;color:var(--tinte);
  transition:border-color .4s ease,background .4s ease}
.ks-haus-merkmale li:hover{border-color:var(--akzent);background:rgba(126,47,54,.05)}
html.pro body.kopf-casa #haus .ks-haus-fliess{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(42,34,30,.14);max-width:30em;color:var(--text-leise,#5d534c)}

/* 9 · Schmale Ansicht mit Maus (Handy-Vorschau am Computer, David 01.10.): die Bilder
   reagieren auch hier — sanfter Zoom statt Breitwerden (dafür fehlt der Platz). */
@media (hover:hover) and (max-width:760px){
  html.pro body.kopf-casa .bildgruppe figure img,html.pro body.kopf-casa .ks-bildgruppe .ks-bild img,html.pro body.kopf-casa .zf-bild img{
    transition:scale 1s cubic-bezier(.34,1.3,.64,1),opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
  html.pro body.kopf-casa .bildgruppe figure:hover img,html.pro body.kopf-casa .ks-bildgruppe .ks-bild:hover img,html.pro body.kopf-casa .zf-bild:hover img{scale:1.07}
}
/* Zimmerkarten: ohne Maus zeigen die Striche, dass es mehr Fotos gibt (Antippen) */
@media (hover:none){html.pro body.kopf-casa .zf-bild[data-galerie] .zf-punkte{opacity:1}}

/* 10 · Bilderkette: seitliche Verläufe reichen so hoch wie die gekippten Bilder
   (David 01.10.: oben links war eine helle Kante, weil das Bild über den Verlauf ragte) */
html.pro body.kopf-casa .jahr-lauf::before,html.pro body.kopf-casa .jahr-lauf::after{top:calc(-1 * max(34px,6vw));bottom:-12px}

/* 11 · Neunter Hinweis (Bedingungen/Termine) nicht allein in der letzten Reihe
   (David 01.10.): Raster bleibt bei 2×4, der Punkt läuft als breite Zeile darunter */
.hinweise-fuss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:.6rem clamp(1.5rem,3vw,3rem);
  margin:clamp(2rem,3.4vw,3rem) 0 0;padding-top:1.4rem;border-top:1px solid rgba(42,34,30,.16)}
.hinweise-fuss b{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--akzent)}
.hinweise-fuss span{max-width:46em;color:var(--text-leise,#5d534c);line-height:1.7}
@media (max-width:760px){.hinweise-fuss{grid-template-columns:1fr}}
@media (min-width:761px){
  .hinweise-fuss{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--hf-gap,2rem)}
  .hinweise-fuss span{grid-column:2 / -1}
}
/* Achter-Listen immer gleichmäßig: 4 Spalten breit, sonst 2 (nie 3+3+2) */
html.pro body.kopf-casa .hinweise:has(> li:nth-child(8):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (min-width:1100px){html.pro body.kopf-casa .hinweise:has(> li:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:520px){html.pro body.kopf-casa .hinweise:has(> li:nth-child(8):last-child){grid-template-columns:1fr!important}}
.hinweise-fuss{--hf-gap:clamp(1.2rem,3vw,2.6rem)}
@media (min-width:761px) and (max-width:1099px){.hinweise-fuss{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 6c · Sommer/Winter am rechten Rand des Titelbilds (David 01.10. spät: Kopf-Knöpfe
   gefielen nicht). Zwei ruhige Textmarken untereinander, davor der Weinrot-Strich der
   Seite — er wächst beim aktiven Eintrag, wie bei den Hinweisen. */
.ks-saison.am-rand{position:absolute;right:var(--ks-rand,clamp(16px,3vw,56px));top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;
  pointer-events:auto}
.ks-saison.am-rand button{display:flex;align-items:center;gap:.9rem;width:auto;height:auto;padding:.55rem 0 .55rem .6rem;border-radius:0;background:none!important;
  color:rgba(255,255,255,.62);font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.45);transition:color .4s ease}
.ks-saison.am-rand button i{display:block;width:18px;height:2px;background:rgba(255,255,255,.55);box-shadow:0 0 10px rgba(0,0,0,.25);
  transition:width .7s cubic-bezier(.34,1.56,.64,1),background .4s ease}
.ks-saison.am-rand button.an{color:#fff}
.ks-saison.am-rand button.an i{width:56px;background:var(--messing,#d4b69a)}
.ks-saison.am-rand button:not(.an):hover{color:#fff}
.ks-saison.am-rand button:not(.an):hover i{width:32px;background:#fff}
.ks-saison.am-rand button:focus-visible{outline:1px solid #fff;outline-offset:4px}
@media (max-width:760px){
  .ks-saison.am-rand{top:auto;bottom:clamp(84px,14vh,130px);transform:none;gap:.1rem}
  .ks-saison.am-rand button{font-size:.64rem;letter-spacing:.2em;padding:.45rem 0 .45rem .6rem}
  .ks-saison.am-rand button.an i{width:40px}
}
.ks-saison.am-rand::before{content:"";position:absolute;inset:-70px -60px -70px -110px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,14,12,.55),rgba(20,14,12,.28) 55%,transparent)}
.ks-saison.am-rand button{font-size:.78rem;color:rgba(255,255,255,.78)}
.ks-saison.am-rand button i{background:rgba(255,255,255,.7)}
@media (max-width:760px){.ks-saison.am-rand button{font-size:.68rem}}
.ks-saison.am-rand::before{inset:-40px -30px -40px -80px;background:rgba(20,14,12,.42);border-radius:50%;filter:blur(34px)}
.ks-saison.am-rand::before{content:none}
.ks-saison.am-rand{padding:.7rem 1.3rem .7rem 1.1rem;gap:.1rem;border-radius:20px;background:rgba(26,20,17,.5);
  box-shadow:inset 0 0 0 1px rgba(247,242,234,.16),0 18px 40px -18px rgba(0,0,0,.5)}
.ks-saison.am-rand button{text-shadow:none}
@media (max-width:760px){.ks-saison.am-rand{padding:.5rem 1rem .5rem .8rem;border-radius:16px}}
@media (max-width:760px){.ks-saison.am-rand{top:96px;bottom:auto}}

/* 6d · Sommer/Winter in der Kopfleiste wie Vorlage 3 (David 01.10. nachts):
   Kapsel mit zwei runden Knöpfen ☀/❄, links nach der Sprachwahl, bleibt beim Scrollen.
   Über dem Titelbild hell, in der festen Leiste dunkel. */
.ks-saison.v3{position:static;transform:none;opacity:1;margin:0 0 0 1.2rem;display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:999px;background:rgba(250,242,231,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);pointer-events:auto;
  transition:background .5s ease,box-shadow .5s ease}
.ks-saison.v3 button{width:38px;height:38px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;
  color:#fff;font-size:17px;line-height:1;letter-spacing:0;cursor:pointer;
  transition:background .45s cubic-bezier(.34,1.56,.64,1),color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.ks-saison.v3 button.an{background:var(--papier);color:var(--akzent)}
.ks-saison.v3 button:not(.an):hover{background:rgba(250,242,231,.2);transform:scale(1.06)}
.ks-saison.v3 button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
html.pro body.kopf-casa .kopf.fest .ks-saison.v3{background:var(--creme);box-shadow:inset 0 0 0 1px rgba(42,34,30,.12)}
html.pro body.kopf-casa .kopf.fest .ks-saison.v3 button{color:var(--tinte)}
html.pro body.kopf-casa .kopf.fest .ks-saison.v3 button.an{background:var(--tinte);color:var(--papier)}
html.pro body.kopf-casa .kopf.fest .ks-saison.v3 button:not(.an):hover{background:rgba(42,34,30,.08)}
@media (max-width:1100px){.ks-saison.v3{margin-left:.8rem}.ks-saison.v3 button{width:34px;height:34px;font-size:15px}}
/* Handy: Sprachwahl liegt rechts; Umschalter neben dem Menü. In der festen Leiste
   kommt in der Mitte das Logo — dann weicht er, damit nichts eng wird. */
@media (max-width:760px){
  .ks-saison.v3{margin-left:.6rem}
  .ks-saison.v3 button{width:32px;height:32px;font-size:14px}
  html.pro body.kopf-casa .kopf.fest .ks-saison.v3{opacity:0;visibility:hidden;pointer-events:none}
}
/* Nur über dem Titelbild (David 01.10. nachts): sobald die feste Leiste kommt, blendet
   der Umschalter weich aus — scrollt man zurück zum Titelbild, kommt er wieder. */
html.pro body.kopf-casa .kopf .ks-saison.v3{transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.56,.64,1),visibility 0s linear 0s}
html.pro body.kopf-casa .kopf.fest .ks-saison.v3{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.92);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}

/* ══ 12 · Kopfleiste mit allen Unterseiten (David 02.10.: „kein Menü zum Draufklicken,
   alles in der Stickbar") — links die sechs Seiten, Mitte Logo, rechts Sommer/Winter
   (nur Titelbild), Sprachfeld, Anfragen, Buchen. Unter 1200 px passt das nicht mehr:
   dort bleiben Kästchen + Vollbild-Menü. ══ */
.ks-kopfnav,.ks-sprachfeld{display:none}
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kasten,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kasten-wort,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-links .ks-sprachzeile{display:none}
  html.pro body.kopf-casa .kopf.ks-mit-leiste{gap:1.4rem;padding-inline:clamp(1.4rem,2.4vw,2.6rem)}
  .ks-mit-leiste .ks-kopfnav{display:flex;align-items:center;gap:clamp(1.05rem,1.75vw,2.1rem)}
  .ks-kopfnav a{position:relative;padding:.7rem 0;color:inherit;text-decoration:none;white-space:nowrap;
    font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:color .3s ease}
  .ks-kopfnav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1.5px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
  .ks-kopfnav a:hover::after,.ks-kopfnav a:focus-visible::after,.ks-kopfnav a[aria-current]::after{transform:scaleX(1)}
  .ks-kopfnav a[aria-current]::after{opacity:.55}
  html.pro body.kopf-casa .kopf.fest .ks-kopfnav a:hover,html.pro body.kopf-casa .kopf.fest .ks-kopfnav a[aria-current]{color:var(--akzent)}
  .ks-mit-leiste .ks-sprachfeld{display:block;position:relative}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts{gap:.7rem}
}
@media (min-width:1200px) and (max-width:1380px){
  .ks-kopfnav a{font-size:.66rem;letter-spacing:.12em}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf{padding-inline:1.2rem}
}
.ks-sprachfeld-knopf{display:inline-flex;align-items:center;gap:.55rem;height:42px;padding:0 1rem 0 1.1rem;border-radius:999px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid rgba(255,255,255,.5);font:inherit;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  transition:border-color .35s ease,background .35s ease}
.ks-sprachfeld-knopf:hover{background:rgba(255,255,255,.12)}
.ks-sprachfeld-knopf i{width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ks-sprachfeld.offen .ks-sprachfeld-knopf i{transform:translateY(1px) rotate(225deg)}
html.pro body.kopf-casa .kopf.fest .ks-sprachfeld-knopf{border-color:var(--linie)}
html.pro body.kopf-casa .kopf.fest .ks-sprachfeld-knopf:hover{background:var(--creme)}
.ks-sprachfeld-liste{position:absolute;right:0;top:calc(100% + 12px);z-index:5;min-width:196px;margin:0;padding:6px;list-style:none;
  background:var(--papier);border-radius:18px;box-shadow:0 26px 50px -22px rgba(20,14,12,.5),0 0 0 1px rgba(42,34,30,.08);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:top right;
  transition:opacity .22s ease,transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .22s}
.ks-sprachfeld.offen .ks-sprachfeld-liste{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s}
.ks-sprachfeld-liste a{display:flex;align-items:center;gap:.9rem;padding:.72rem .9rem;border-radius:12px;color:var(--tinte);text-decoration:none;
  font-family:var(--sans);font-size:.9rem;letter-spacing:.01em;text-transform:none;transition:background .25s ease}
.ks-sprachfeld-liste a b{width:1.7rem;font-size:.64rem;font-weight:600;letter-spacing:.16em;color:var(--akzent)}
.ks-sprachfeld-liste a:hover,.ks-sprachfeld-liste a:focus-visible{background:var(--creme)}
.ks-sprachfeld-liste a[aria-current]{background:var(--creme)}
.ks-sprachfeld-liste a[aria-current]::after{content:"";margin-left:auto;width:5px;height:10px;border:solid var(--akzent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-2px,-1px)}
/* Sommer/Winter rechts vor dem Sprachfeld, sobald die Leiste steht (JS setzt ihn um) */
@media (min-width:1200px){html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .ks-saison.v3{margin:0 .3rem 0 0}}
/* Vorlage-1-Regel „.kopf nav mittig, absolut" (stil.css) gilt nicht für die Seitenleiste */
html.pro body.kopf-casa .kopf .ks-kopfnav,html.pro body.kopf-casa .kopf.fest .ks-kopfnav{position:static;left:auto;top:auto;transform:none;margin:0;grid-column:auto;justify-self:auto}

/* ══ 13 · Merkmal-Karten statt Strich-Listen (David 02.10.: „die Stichpunkte mit dem
   Strich schauen nicht mit Liebe gemacht aus — edler, viel besser"). Jede .hinweise-
   Liste wird zu hellen Karten mit Nummer und feinem Weinrot-Strich, der beim Überfahren
   wächst. seite.js wählt die Spaltenzahl (--sp) so, dass keine Karte allein in der
   letzten Reihe steht; die letzte Reihe streckt sich auf volle Breite.
   Handy: Karten nebeneinander zum Wischen statt endloser Textliste. ══ */
html.pro body.kopf-casa ul.hinweise{--sp:2;--lu:12px;counter-reset:mk;display:flex!important;flex-wrap:wrap;gap:var(--lu)!important;
  grid-template-columns:none!important;margin-top:clamp(2rem,3.2vw,2.8rem)!important;padding:0;list-style:none}
html.pro body.kopf-casa ul.hinweise > li{counter-increment:mk;position:relative;flex:1 1 calc((100% - (var(--sp) - 1) * var(--lu)) / var(--sp));min-width:0;
  display:flex;flex-direction:column;gap:.35rem;margin:0;padding:clamp(1.15rem,1.5vw,1.45rem) clamp(1.15rem,1.5vw,1.5rem) clamp(1.25rem,1.6vw,1.55rem);
  border:1px solid rgba(42,34,30,.08)!important;border-radius:20px;background:rgba(255,255,255,.52);
  font-size:.93rem;line-height:1.55;color:var(--text-leise,#5d534c);
  transition:transform .6s cubic-bezier(.34,1.4,.64,1),background .4s ease,box-shadow .5s ease,border-color .4s ease}
html.pro body.kopf-casa ul.hinweise > li::before{content:counter(mk,decimal-leading-zero);position:static;display:block;width:auto;height:auto;
  margin:0 0 .55rem;padding:0;font-family:var(--display);font-size:.86rem;letter-spacing:.06em;line-height:1;color:var(--akzent);
  background:linear-gradient(var(--akzent),var(--akzent)) no-repeat 2.15em 52%/18px 1px;transition:background-size .7s cubic-bezier(.34,1.56,.64,1)}
html.pro body.kopf-casa ul.hinweise > li b{display:block;margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.06rem,.98rem + .25vw,1.2rem);
  letter-spacing:.005em;line-height:1.25;text-transform:none;color:var(--tinte)}
html.pro body.kopf-casa ul.hinweise > li:hover{transform:translateY(-4px);background:rgba(255,255,255,.9);border-color:rgba(126,47,54,.22)!important;
  box-shadow:0 22px 44px -28px rgba(42,34,30,.45)}
html.pro body.kopf-casa ul.hinweise > li:hover::before{background-size:46px 1px}
html.pro body.kopf-casa ul.hinweise > li:hover b{color:var(--akzent)}
/* dunkle Bänder */
html.pro body.kopf-casa .tief ul.hinweise > li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)!important;color:var(--schrift-hell-leise,rgba(255,255,255,.72))}
html.pro body.kopf-casa .tief ul.hinweise > li b{color:#fff}
html.pro body.kopf-casa .tief ul.hinweise > li::before{color:var(--messing,#d4b69a);background-image:linear-gradient(var(--messing,#d4b69a),var(--messing,#d4b69a))}
html.pro body.kopf-casa .tief ul.hinweise > li:hover{background:rgba(255,255,255,.1)}
/* Handy: wischen */
@media (max-width:760px){
  html.pro body.kopf-casa ul.hinweise{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 10px;scroll-padding-inline:var(--ks-rand,18px)}
  html.pro body.kopf-casa ul.hinweise::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa ul.hinweise > li{flex:0 0 min(78%,300px);scroll-snap-align:start}
  html.pro body.kopf-casa ul.hinweise > li:only-child{flex-basis:100%}
  html.pro body.kopf-casa ul.hinweise > li:hover{transform:none}
}
/* Wisch-Hinweis unter der Kartenreihe (seite.js setzt die Punkte) */
.mk-punkte{display:none}
@media (max-width:760px){
  .mk-punkte{display:flex;justify-content:center;gap:6px;margin-top:.6rem}
  .mk-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(42,34,30,.18);transition:width .45s cubic-bezier(.34,1.56,.64,1),background .3s ease}
  .mk-punkte i.an{width:18px;border-radius:3px;background:var(--akzent)}
  .tief .mk-punkte i{background:rgba(255,255,255,.25)}.tief .mk-punkte i.an{background:var(--messing,#d4b69a)}
}

/* ══ 14 · Wellness neu (David 02.10.): kein riesiges Whirlpool-Band mehr; oben Text +
   zwei Bilder, darunter sechs Bildkarten. ══ */
.ks-wellness-kopf{align-items:center}
.ks-wellness-bilder{position:relative;padding:0 0 12% 0}
.ks-wellness-bilder figure{margin:0;overflow:hidden;border-radius:28px;background:var(--creme)}
.ks-wellness-bilder img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.ks-wb-gross{aspect-ratio:4/3;width:86%}
.ks-wb-klein{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:1;border:8px solid var(--papier);border-radius:26px!important;box-shadow:0 30px 60px -30px rgba(42,34,30,.5)}
@media (hover:hover){.ks-wellness-bilder figure:hover img{transform:scale(1.05)}}
html.pro body.kopf-casa .ks-wellness .lead{margin-top:clamp(1.4rem,2vw,2rem);max-width:32em}
/* Bildkarten: Foto oben, Nummer als helles Schild auf dem Foto */
html.pro body.kopf-casa ul.hinweise.mit-bild > li{--pd:clamp(1.15rem,1.5vw,1.5rem);overflow:hidden;padding:0 var(--pd) var(--pd)}
html.pro body.kopf-casa ul.hinweise.mit-bild > li img{display:block;width:calc(100% + 2 * var(--pd));max-width:none;margin:0 calc(-1 * var(--pd)) 1rem;
  aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
html.pro body.kopf-casa ul.hinweise.mit-bild > li::before{position:absolute;left:14px;top:14px;z-index:1;margin:0;padding:.42rem .7rem .38rem;border-radius:999px;
  background:rgba(247,242,234,.92);background-image:none;font-size:.78rem}
html.pro body.kopf-casa ul.hinweise.mit-bild > li:hover::before{background-size:auto}
html.pro body.kopf-casa ul.hinweise.mit-bild > li:hover img{transform:scale(1.06)}
@media (max-width:760px){
  .ks-wellness-bilder{margin-top:1.6rem}
  html.pro body.kopf-casa ul.hinweise.mit-bild > li{flex-basis:min(74%,290px)}
}

/* ══ 15 · Ein Tag im Hotel Cornelia — Tagesablauf mit Scroll-Effekt (David 02.10.,
   angeregt von alpentesitin.it, dort aber nur ein Klick-Slider). Am Computer bleibt die
   Bühne stehen: links Tageszeit + Text, rechts das Bild, unten die Zeitleiste mit
   wanderndem Sonnenpunkt; der Grund dunkelt über den Tag bis zum Abendrot ab.
   Uhrzeiten nur, wo das Hotel sie nennt (15 Uhr Tee, 15–19 Uhr Wellness). ══ */
.ks-tag{--n:6;position:relative;background:var(--tag-grund,var(--papier));color:var(--tinte);transition:color .6s ease}
.ks-tag.nacht{color:#f4ece0}
.ks-tag-buehne{position:relative}
.ks-tag-kopf .rubrik{margin:0}
.ks-tag-kopf h2{margin:.9rem 0 0}
.ks-tag-zeit{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 .8rem;font-family:var(--display);font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);color:var(--akzent);transition:color .6s ease}
.ks-tag-zeit::before{content:"";width:28px;height:1px;background:currentColor}
.ks-tag.nacht .ks-tag-zeit{color:var(--messing,#d4b69a)}
.ks-tag-inhalt h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.5rem);line-height:1.12;letter-spacing:.005em}
.ks-tag-inhalt p:not(.ks-tag-zeit){margin:1rem 0 0;max-width:30em;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.7;opacity:.82}
.ks-tag-station figure{margin:0;overflow:hidden;border-radius:28px;background:rgba(42,34,30,.08)}
.ks-tag-station figure img{display:block;width:100%;height:100%;object-fit:cover}
.ks-tag-paar{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none!important}
.ks-tag-paar span{position:relative;overflow:hidden;border-radius:inherit}
.ks-tag-paar span:first-child{border-radius:28px 6px 6px 28px}.ks-tag-paar span:last-child{border-radius:6px 28px 28px 6px}
.ks-tag-paar em{position:absolute;left:14px;bottom:14px;padding:.4rem .75rem;border-radius:999px;background:rgba(247,242,234,.92);color:var(--tinte);
  font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

@media (min-width:861px){
  .ks-tag{height:calc(var(--n) * 72vh + 100vh)}
  .ks-tag-buehne{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  .ks-tag-kopf{position:absolute;left:var(--ks-rand,clamp(1.4rem,4vw,4.5rem));top:calc(108px + 3vh);width:min(40%,520px)}
  .ks-tag-kopf h2{font-size:clamp(2rem,1.2rem + 2.2vw,3.3rem)}
  .ks-tag-station .ks-tag-inhalt{position:absolute;left:var(--ks-rand,clamp(1.4rem,4vw,4.5rem));top:max(46vh,330px);width:min(36%,470px);
    opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none}
  .ks-tag-station figure{position:absolute;right:var(--ks-rand,clamp(1.4rem,4vw,4.5rem));top:calc(100px + 3vh);bottom:max(19vh,150px);width:52%;
    opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.6s cubic-bezier(.22,1,.36,1)}
  .ks-tag-station.an .ks-tag-inhalt{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
  .ks-tag-station.an figure{opacity:1;transform:none}
  /* Zeitleiste */
  .ks-tag-leiste{position:absolute;left:var(--ks-rand,clamp(1.4rem,4vw,4.5rem));right:var(--ks-rand,clamp(1.4rem,4vw,4.5rem));bottom:max(6vh,40px)}
  .ks-tag-linie{position:relative;height:1px;background:currentColor;opacity:1}
  .ks-tag-linie::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.22}
  .ks-tag-linie{background:none}
  .ks-tag-linie b{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--akzent);transform-origin:left;transform:scaleX(var(--tp,0))}
  .ks-tag.nacht .ks-tag-linie b{background:var(--messing,#d4b69a)}
  .ks-tag-sonne{position:absolute;top:0;left:calc(var(--tp,0) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
    background:var(--sonne,#f2c46d);box-shadow:0 0 0 6px color-mix(in srgb,var(--sonne,#f2c46d) 25%,transparent),0 0 28px 6px color-mix(in srgb,var(--sonne,#f2c46d) 45%,transparent)}
  .ks-tag-leiste ol{display:grid;grid-template-columns:repeat(var(--n),1fr);margin:1.1rem 0 0;padding:0;list-style:none}
  .ks-tag-leiste button{display:block;width:100%;padding:.2rem 0;border:0;background:none;color:inherit;cursor:pointer;text-align:left;
    font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.45;transition:opacity .35s ease,color .35s ease}
  .ks-tag-leiste button:hover,.ks-tag-leiste li.an button{opacity:1}
  .ks-tag-leiste li.an button{color:var(--akzent)}
  .ks-tag.nacht .ks-tag-leiste li.an button{color:var(--messing,#d4b69a)}
}
@media (min-width:861px) and (max-height:760px){
  .ks-tag-kopf h2{font-size:clamp(1.7rem,1rem + 1.8vw,2.6rem)}
  .ks-tag-station .ks-tag-inhalt{top:max(44vh,300px)}
  .ks-tag-inhalt p:not(.ks-tag-zeit){font-size:.98rem;line-height:1.6}
}
/* Handy/Tablet: senkrechte Zeitleiste, Linie füllt sich beim Scrollen */
@media (max-width:860px){
  .ks-tag{padding:clamp(64px,12vw,110px) var(--ks-rand,18px)}
  .ks-tag-kopf{margin-bottom:2.2rem}
  .ks-tag-leiste{display:none}
  .ks-tag-stationen{position:relative;padding-left:30px}
  .ks-tag-stationen::before,.ks-tag-stationen::after{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1.5px;background:rgba(42,34,30,.14)}
  .ks-tag-stationen::after{background:var(--akzent);transform-origin:top;transform:scaleY(var(--tp,0));bottom:8px}
  .ks-tag-station{position:relative;padding-bottom:2.6rem}
  .ks-tag-station::before{content:"";position:absolute;left:-30px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--papier);
    border:1.5px solid var(--akzent);transition:background .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
  .ks-tag-station.da::before{background:var(--akzent);transform:scale(1.15)}
  .ks-tag-station figure{aspect-ratio:4/3;margin:0 0 1.1rem;border-radius:20px}
  .ks-tag-paar span:first-child{border-radius:20px 6px 6px 20px}.ks-tag-paar span:last-child{border-radius:6px 20px 20px 6px}
  .ks-tag-inhalt h3{font-size:clamp(1.45rem,6vw,1.9rem)}
}

/* ══ 16 · Angebote neu (David 02.10.) ══════════════════════════════════════
   a) Jahresleiste: alle Angebote als Zeiträume auf einer Leiste Nov–Okt
   b) Angebots-Bühne (Winter-Seite): 1 große + 2 gestapelte Bildkarten
   c) Paket-Karte: „Im Preis enthalten" als dunkle Karte mit Häkchen ══ */
/* a) Jahresleiste */
.ks-jahr{margin-top:clamp(2.4rem,4vw,3.6rem);padding:clamp(1.2rem,2.4vw,2rem) clamp(1.2rem,2.4vw,2.2rem) clamp(1.4rem,2.4vw,2.2rem);
  border-radius:28px;background:rgba(255,255,255,.55);border:1px solid rgba(42,34,30,.08)}
.ks-jahr-monate,.ks-jahr-zeile{display:grid;grid-template-columns:minmax(200px,30%) 1fr;align-items:center;gap:1.4rem}
.ks-jahr-monate ol{display:grid;grid-template-columns:repeat(12,1fr);margin:0;padding:0;list-style:none}
.ks-jahr-monate li{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise,#6b625b);padding-left:.35rem;border-left:1px solid rgba(42,34,30,.12)}
.ks-jahr-monate li.neu{color:var(--akzent)}
.ks-jahr-monate > span{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise,#6b625b)}
.ks-jahr-zeile{position:relative;margin-top:.55rem;padding:.85rem 0;border-top:1px solid rgba(42,34,30,.08);color:inherit;text-decoration:none}
.ks-jahr-zeile b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1rem + .35vw,1.35rem);color:var(--tinte);transition:color .3s ease}
.ks-jahr-zeile small{display:block;margin-top:.15rem;font-size:.84rem;color:var(--text-leise,#6b625b)}
.ks-jahr-zeile small em{font-style:normal;color:var(--akzent);font-weight:600}
.ks-jahr-spur{position:relative;height:34px;background:repeating-linear-gradient(90deg,rgba(42,34,30,.1) 0 1px,transparent 1px calc(100% / 12))}
.ks-jahr-balken{position:absolute;top:7px;bottom:7px;left:calc(var(--a) * 100%);width:max(16px,calc((var(--b) - var(--a)) * 100%));border-radius:999px;
  background:var(--akzent);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.34,1.3,.64,1) calc(var(--i,0) * 120ms + .2s),box-shadow .3s ease}
.ks-jahr.sicht .ks-jahr-balken,.sicht .ks-jahr-balken{transform:scaleX(1)}
.ks-jahr-balken.offen{background:repeating-linear-gradient(90deg,rgba(126,47,54,.35) 0 8px,transparent 8px 14px);box-shadow:inset 0 0 0 1px rgba(126,47,54,.45)}
.ks-jahr-zeile:hover b{color:var(--akzent)}
.ks-jahr-zeile:hover .ks-jahr-balken:not(.offen){box-shadow:0 0 0 5px rgba(126,47,54,.14)}
.ks-jahr-zeile::after{content:"";position:absolute;right:-.4rem;top:50%;width:8px;height:8px;border:solid var(--akzent);border-width:1.5px 1.5px 0 0;
  transform:translate(-6px,-50%) rotate(45deg);opacity:0;transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ks-jahr-zeile:hover::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}
@media (max-width:760px){
  .ks-jahr{padding:1rem 1rem 1.2rem}
  .ks-jahr-monate,.ks-jahr-zeile{grid-template-columns:1fr;gap:.5rem}
  .ks-jahr-monate > span{display:none}
  .ks-jahr-monate li{font-size:.5rem;letter-spacing:.04em;padding-left:.18rem}
}
/* b) Angebots-Bühne */
.ks-ab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:14px;height:min(80vh,720px);min-height:560px;margin-top:clamp(2.2rem,4vw,3.4rem)}
.ks-ab-karte{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.3rem,2.2vw,2.2rem);border-radius:28px;color:#fff;text-decoration:none;background:var(--fels)}
.ks-ab-karte:first-child{grid-row:1 / 3}
.ks-ab-karte img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.ks-ab-karte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,12,0) 35%,rgba(20,14,12,.72) 100%)}
.ks-ab-zeit{position:absolute;left:clamp(1rem,1.6vw,1.5rem);top:clamp(1rem,1.6vw,1.5rem);padding:.45rem .85rem;border-radius:999px;
  background:rgba(247,242,234,.92);color:var(--tinte);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ks-ab-karte h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem);line-height:1.1;color:#fff}
.ks-ab-karte:first-child h3{font-size:clamp(2rem,1.3rem + 2vw,3.2rem)}
.ks-ab-karte p{margin:.5rem 0 0;max-width:34em;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.85)}
.ks-ab-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.22)}
.ks-ab-preis{font-family:var(--display);font-size:clamp(1.3rem,1rem + .9vw,1.9rem);line-height:1}
.ks-ab-preis small{font-family:var(--sans);font-size:.78rem;opacity:.8;margin-left:.35rem}
.ks-ab-pfeil{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(247,242,234,.95);color:var(--tinte);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),background .3s ease}
.ks-ab-pfeil::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:translateX(-2px) rotate(45deg)}
.ks-ab-karte:hover img{transform:scale(1.06)}
.ks-ab-karte:hover .ks-ab-pfeil{transform:translateX(4px);background:#fff}
@media (max-width:860px){
  .ks-ab{grid-template-columns:1fr;grid-template-rows:none;height:auto;min-height:0}
  .ks-ab-karte{min-height:340px}.ks-ab-karte:first-child{grid-row:auto;min-height:440px}
}
/* c) Paket-Karte */
.ks-paket{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:clamp(1.6rem,3vw,3.4rem);
  margin-top:clamp(2.6rem,4.5vw,3.8rem);padding:clamp(1.8rem,3.2vw,3rem);border-radius:32px;background:var(--fels);color:#f4ece0}
.ks-paket::before{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(212,182,154,.16),transparent)}
.ks-paket-titel{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--messing,#d4b69a)}
.ks-paket-preis{margin:1rem 0 0;font-family:var(--display);font-size:clamp(2.2rem,1.5rem + 2vw,3.4rem);line-height:1;color:#fff}
.ks-paket-preis small{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.88rem;line-height:1.5;color:rgba(244,236,224,.7)}
.ks-paket-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.15rem 1.8rem;margin:0;padding:0;list-style:none;align-content:start}
.ks-paket-liste li{position:relative;padding-left:2.5rem;font-size:.9rem;line-height:1.5;color:rgba(244,236,224,.7)}
.ks-paket-liste li::before{content:"";position:absolute;left:0;top:-.05rem;width:26px;height:26px;border-radius:50%;background:rgba(212,182,154,.14);
  box-shadow:inset 0 0 0 1px rgba(212,182,154,.5);transition:background .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ks-paket-liste li::after{content:"";position:absolute;left:10px;top:.3rem;width:5px;height:10px;border:solid var(--messing,#d4b69a);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:border-color .35s ease}
.ks-paket-liste li:hover::before{background:var(--messing,#d4b69a);transform:scale(1.08)}
.ks-paket-liste li:hover::after{border-color:var(--fels)}
.ks-paket-liste b{display:block;margin-bottom:.1rem;font-family:var(--display);font-weight:400;font-size:1.08rem;color:#fff}
.ks-paket-fuss{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 2rem;margin:0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14)}
.ks-paket-fuss p{margin:0;font-size:.88rem;line-height:1.6;color:rgba(244,236,224,.72)}
.ks-paket-fuss b{display:block;margin-bottom:.25rem;font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--messing,#d4b69a)}
@media (max-width:760px){
  .ks-paket{grid-template-columns:1fr;border-radius:24px;padding:1.6rem 1.3rem}
  .ks-paket-liste{grid-template-columns:1fr;gap:.95rem}
}

/* ══ 17 · Handy: abgeschnittene Bilder (David 02.10., Screenshots 8 + 9) ══
   – Zweispalter: die Bildspalte durfte breiter als der Bildschirm werden (Rasterspur nach
     Inhalt, z. B. Bildgruppe Startseite/Haus) → Spur auf Bildschirmbreite begrenzen.
   – Sulden-Panorama: aspect-ratio + min-height machte es 715 px breit → am Handy wischbar.
   – Zitatbänder hochkant: Bildausschnitt so, dass die Menschen im Bild bleiben. */
html.pro body.kopf-casa .innen.zwei > *{min-width:0}
@media (max-width:760px){
  html.pro body.kopf-casa .innen.zwei{grid-template-columns:minmax(0,1fr)!important}
  html.pro body.kopf-casa .haus-komposition{max-width:100%}
  html.pro body.kopf-casa .bildspalte{max-width:100%}
  html.pro body.kopf-casa #dorf figure.reveal-bild{position:relative;width:auto!important;max-width:none;aspect-ratio:auto!important;height:260px;min-height:0!important;
    margin-inline:calc(-1 * var(--ks-rand,18px))!important;border-radius:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;animation:none!important;clip-path:none!important}
  html.pro body.kopf-casa #dorf figure.reveal-bild::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa #dorf figure.reveal-bild img{position:static!important;width:auto!important;height:100%!important;max-width:none!important;animation:none!important;transform:none!important}
  html.pro body.kopf-casa #dorf figure.reveal-bild::after{content:"↔";position:sticky;left:calc(100% - 52px);bottom:14px;float:right;display:grid;place-items:center;
    width:38px;height:38px;margin:-52px 14px 0 0;border-radius:50%;background:rgba(247,242,234,.92);color:var(--tinte);font-size:1rem}
  html.pro body.kopf-casa .zitat-bild img[src*="wandern-familie-ortler"]{object-position:30% 50%}
  html.pro body.kopf-casa .zitat-bild img[src*="winter-ski-paar"]{object-position:42% 50%}
}

/* ══ 18 · Weniger Weißraum am PC (David 02.10.) ══
   Kartenreihe unter dem Zweispalter (seite.js verschiebt die Liste) + Bildspalte läuft
   beim Scrollen mit, solange der Text daneben länger ist. */
html.pro body.kopf-casa .mk-reihe{margin-top:clamp(1.6rem,3vw,2.6rem)}
html.pro body.kopf-casa .mk-reihe ul.hinweise{margin-top:0!important}
@media (min-width:861px){
  html.pro body.kopf-casa .innen.zwei{align-items:start}
  html.pro body.kopf-casa .innen.zwei > .bildspalte,
  html.pro body.kopf-casa .innen.zwei > div:has(> .ks-doppelbild),
  html.pro body.kopf-casa .innen.zwei > div:has(> .haus-komposition),
  html.pro body.kopf-casa .innen.zwei > div:has(> .bento){position:sticky;top:calc(118px + 3vh)}
}
.ks-tag-kopf .ks-weiterlink{margin-top:1.2rem}
.ks-tag.nacht .ks-weiterlink{color:#f4ece0}

/* Tagesablauf: Überschrift kleiner, Abendfarben hell (02.10.) */
html.pro body.kopf-casa .ks-tag .ks-tag-kopf h2.zeile{font-size:clamp(1.9rem,1rem + 1.9vw,2.9rem);line-height:1.08}
html.pro body.kopf-casa .ks-tag .ks-tag-kopf h2.zeile span,html.pro body.kopf-casa .ks-tag h3{transition:color .6s ease}
html.pro body.kopf-casa .ks-tag.nacht .ks-tag-kopf h2.zeile,html.pro body.kopf-casa .ks-tag.nacht .ks-tag-kopf h2.zeile span,
html.pro body.kopf-casa .ks-tag.nacht h3,html.pro body.kopf-casa .ks-tag.nacht .ks-tag-inhalt p{color:#f4ece0}
html.pro body.kopf-casa .ks-tag.nacht .rubrik{color:var(--messing,#d4b69a)}
@media (min-width:861px){.ks-tag-station .ks-tag-inhalt{top:max(47vh,350px)}}
.ks-ab-notiz{margin:1rem 0 0;font-size:.84rem;color:var(--text-leise,#6b625b)}
html.pro body.kopf-casa #winterangebote .mitte{max-width:none!important;margin:0!important;text-align:left}
html.pro body.kopf-casa #winterangebote .ks-knoepfe{justify-content:flex-start!important}
html.pro body.kopf-casa .ks-ab{align-items:stretch!important}
@media (min-width:861px){
  html.pro body.kopf-casa #winterangebote .mitte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:end}
  html.pro body.kopf-casa #winterangebote .mitte .rubrik{grid-column:1}
  html.pro body.kopf-casa #winterangebote .mitte h2{grid-column:1}
  html.pro body.kopf-casa #winterangebote .mitte .fliess{grid-column:2;grid-row:1 / 3;align-self:end;margin:0!important;max-width:34em}
}
html.pro body.kopf-casa #winterangebote .mitte > *{text-align:left;justify-content:flex-start;margin-left:0;margin-right:0}
@media (min-width:861px){html.pro body.kopf-casa .ks-ueberblick-kopf{align-items:end}html.pro body.kopf-casa .ks-ueberblick-kopf .lead{margin:0;max-width:34em}}
html.pro body.kopf-casa .ks-paket .ks-paket-preis{margin:1rem 0 0;font-family:var(--display);font-size:clamp(2.2rem,1.5rem + 2vw,3.4rem);line-height:1;color:#fff;max-width:none}
html.pro body.kopf-casa .ks-paket .ks-paket-preis small{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.88rem;line-height:1.5;color:rgba(244,236,224,.7)}
html.pro body.kopf-casa .ks-paket .ks-paket-titel{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.2em;color:var(--messing,#d4b69a)}
html.pro body.kopf-casa .ks-paket-fuss p{max-width:none}
@media (max-width:760px){html.pro body.kopf-casa .ks-paket .ks-paket-preis{display:none}}
/* Einzelner Hinweis in der Textspalte: ruhige Notiz statt breiter Karte */
html.pro body.kopf-casa ul.hinweise > li:only-child{max-width:34em}
/* Handy: Tabellen umbrechen statt rechts hinauszulaufen (Zimmer: Storno-Zeile) */
@media (max-width:760px){
  html.pro body.kopf-casa table.ks-tabelle{width:100%;max-width:100%;table-layout:fixed}
  html.pro body.kopf-casa table.ks-tabelle th,html.pro body.kopf-casa table.ks-tabelle td{white-space:normal!important;overflow-wrap:break-word;hyphens:auto}
}
/* Handy: alle drei Kennzahlen in einer kompakten Reihe (vorher fiel die dritte weg) */
@media (max-width:760px){
  html.pro body.kopf-casa .kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important}
  html.pro body.kopf-casa .kennzahlen .kennzahl{display:block!important;min-width:0;padding-inline:.7rem!important}
  html.pro body.kopf-casa .kennzahlen .kennzahl:first-child{padding-left:0!important}
  html.pro body.kopf-casa .kennzahlen .kennzahl b{font-size:clamp(1.45rem,6.6vw,1.9rem)!important;white-space:nowrap}
  html.pro body.kopf-casa .kennzahlen .kennzahl span{font-size:.56rem!important;letter-spacing:.12em!important}
}

/* ══ 19 · Kein Weißraum (David 02.10.: „kein weißer Platz") ══
   Abstände zwischen den Bändern am PC knapper (vorher bis 176 px oben + unten) und die
   kürzere Textspalte steht mittig neben den Bildern statt oben mit Loch darunter. */
html.pro body.kopf-casa .band{padding-block:clamp(4rem,8vw,7.5rem)}
html.pro body.kopf-casa .ks-band{padding-block:clamp(3.6rem,7vw,6.5rem)}
@media (min-width:861px){
  html.pro body.kopf-casa .innen.zwei > .zw-mitte{align-self:center!important;position:relative!important;top:auto!important}
  html.pro body.kopf-casa .innen.zwei > .zw-klebt{align-self:start!important;position:sticky!important;top:calc(118px + 3vh)!important}
}

/* ══ 20 · Angebote Startseite am Handy: Bildkarten zum Wischen (David 02.10.) ══ */
.sf-foto,.sf-pfeil,.sf-wisch{display:none}
@media (max-width:760px){
  html.pro body.kopf-casa .sf .sf-bilder{display:none}
  html.pro body.kopf-casa .sf .sf-buehne{display:block}
  html.pro body.kopf-casa .sf .sf-liste{flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 12px;scroll-padding-inline:var(--ks-rand,18px)}
  html.pro body.kopf-casa .sf .sf-liste::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .sf .sf-punkt{flex:0 0 84%;scroll-snap-align:start;position:relative;overflow:hidden;
    grid-template-columns:1fr auto;grid-template-areas:"foto foto" "zeit zeit" "titel titel" "kurz kurz" "preis pfeil";
    row-gap:.45rem;padding:0 1.15rem 1.2rem;border:1px solid rgba(42,34,30,.08)!important;border-radius:24px;background:rgba(255,255,255,.62);
    box-shadow:0 18px 40px -30px rgba(42,34,30,.45)}
  html.pro body.kopf-casa .sf .sf-punkt::before{display:none}
  html.pro body.kopf-casa .sf .sf-foto{grid-area:foto;display:block;margin:0 -1.15rem .55rem;aspect-ratio:4/3;overflow:hidden}
  html.pro body.kopf-casa .sf .sf-foto img{display:block;width:100%;height:100%;object-fit:cover}
  html.pro body.kopf-casa .sf .sf-marke{position:absolute;left:12px;top:12px;z-index:1;margin:0;padding:.45rem .8rem;border:0;border-radius:999px;
    background:rgba(247,242,234,.94);color:var(--tinte);font-size:.6rem}
  html.pro body.kopf-casa .sf .sf-titel{font-size:1.75rem;transform:none}
  html.pro body.kopf-casa .sf .sf-kurz{font-size:.93rem;line-height:1.55}
  html.pro body.kopf-casa .sf .sf-preis{align-self:center}
  html.pro body.kopf-casa .sf .sf-pfeil{grid-area:pfeil;display:grid;place-items:center;align-self:center;width:44px;height:44px;border-radius:50%;background:var(--akzent);color:#fff}
  html.pro body.kopf-casa .sf .sf-pfeil::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:translateX(-2px) rotate(45deg)}
  html.pro body.kopf-casa .sf .sf-wisch{display:flex;justify-content:center;gap:6px;margin-top:.5rem}
  .sf-wisch i{width:6px;height:6px;border-radius:50%;background:rgba(42,34,30,.18);transition:width .45s cubic-bezier(.34,1.56,.64,1),background .3s ease}
  .sf-wisch i.an{width:18px;border-radius:3px;background:var(--akzent)}
}

/* ══ 21 · Fußzeile (02.10.): Spaltentitel als H2 (keine übersprungene Überschrift-Stufe,
   vorher H4 nach H2) im selben Look; vier Spalten in einer Reihe statt 3 + 1 ══ */
html.pro body.kopf-casa .fuss h2.fuss-titel{font-family:var(--sans);font-weight:500;font-size:.66rem;line-height:1.4;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand,#d4b69a);margin:0 0 1.5rem;max-width:none}
@media (min-width:1100px){html.pro body.kopf-casa .fuss-raster:has(> :nth-child(4)){grid-template-columns:1.4fr 1fr 1fr 1fr}}
@media (min-width:761px) and (max-width:1099px){html.pro body.kopf-casa .fuss-raster:has(> :nth-child(4)){grid-template-columns:1fr 1fr}}

/* ══ 22 · Häufige Fragen ohne Loch (02.10.): links unter der Überschrift ein Foto und die
   Kontaktzeile; am PC läuft die Spalte beim Scrollen neben der langen Liste mit. ══ */
.ks-faq-bild{margin:clamp(1.4rem,2.4vw,2rem) 0 0;overflow:hidden;border-radius:24px;aspect-ratio:4/3;background:var(--creme)}
.ks-faq-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.ks-faq-bild:hover img{transform:scale(1.05)}}
.ks-faq-kontakt{margin:1rem 0 0;max-width:30em;font-size:.9rem;line-height:1.6;color:var(--text-leise,#6b625b)}
.ks-faq-kontakt a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(126,47,54,.4)}
@media (min-width:861px){
  html.pro body.kopf-casa .ks-faq{align-items:start}
  html.pro body.kopf-casa .ks-faq > div:first-child{position:sticky;top:calc(118px + 3vh)}
}
@media (max-width:760px){.ks-faq-bild{aspect-ratio:16/10;border-radius:18px}}
/* Paket-Liste als ausgeglichene Spalten (7 Punkte → 3 + 2 + 2, nie einer allein) */
@media (min-width:761px){
  html.pro body.kopf-casa .ks-paket-liste{display:block;columns:3 230px;column-gap:1.8rem}
  html.pro body.kopf-casa .ks-paket-liste li{break-inside:avoid;margin-bottom:1.15rem}
}

/* ══ 23 · Handy: Tabellen als Wischkarten (02.10.: lange Strecken ohne Bild kürzen) ══
   Zimmer-Preise: die vier Tafeln (Zimmer · Kinder · Zuschläge · Storno) nebeneinander;
   Tabellen mit Karten-Zeilen (Sommer, Anreise): jede Zeile eine Karte in einer Wischreihe. */
@media (max-width:760px){
  html.pro body.kopf-casa .ks-preisraster{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 10px;scroll-padding-inline:var(--ks-rand,18px)}
  html.pro body.kopf-casa .ks-preisraster::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .ks-preisraster > div{flex:0 0 86%;scroll-snap-align:start;padding:1.2rem 1.1rem 1rem;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid rgba(42,34,30,.08)}
  html.pro body.kopf-casa .ks-tabelle-karten tbody:has(> tr:nth-child(3)){display:flex!important;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 10px;scroll-padding-inline:var(--ks-rand,18px)}
  html.pro body.kopf-casa .ks-tabelle-karten tbody:has(> tr:nth-child(3))::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .ks-tabelle-karten tbody:has(> tr:nth-child(3)) > tr{flex:0 0 78%;scroll-snap-align:start;align-content:start;padding:1rem 1.05rem;border:1px solid rgba(42,34,30,.08)!important;
    border-radius:18px;background:rgba(255,255,255,.62)}
  .wisch-punkte{display:flex;justify-content:center;gap:6px;margin-top:.5rem}
  .wisch-punkte i{width:6px;height:6px;border-radius:50%;background:rgba(42,34,30,.18);transition:width .45s cubic-bezier(.34,1.56,.64,1),background .3s ease}
  .wisch-punkte i.an{width:18px;border-radius:3px;background:var(--akzent)}
}
.wisch-punkte{display:none}

/* ══ 24 · Handy: Bild zuerst (02.10.) — in jedem Zweispalter steht am Handy die Bildspalte
   oben, so wechseln sich Bild und Text ab und es gibt keine langen Textstrecken. ══ */
@media (max-width:760px){
  html.pro body.kopf-casa .innen.zwei > div:has(img):not(:has(h2)):not(:has(.ks-faq-liste)){order:-1}
}
.ks-band-foto{margin:0;overflow:hidden;border-radius:28px;aspect-ratio:4/3;background:var(--creme)}
.ks-band-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.ks-band-foto:hover img{transform:scale(1.05)}}
html.pro body.kopf-casa .ks-band-zwei{align-items:center}
@media (max-width:760px){.ks-band-foto{border-radius:20px;margin-bottom:1.6rem}}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-tabelle-karten tbody:has(> tr:nth-child(3)) > tr{flex-basis:82%}
  html.pro body.kopf-casa .ks-tabelle-karten td:not(.preis){flex-direction:column;gap:.15rem!important;margin-top:.45rem}
  html.pro body.kopf-casa .ks-tabelle-karten td:not(.preis)::before{min-width:0!important;padding-top:0!important;font-size:.58rem!important;color:var(--akzent)}
  html.pro body.kopf-casa .ks-tabelle-karten tbody th{font-family:var(--display);font-weight:400}
}

/* ══ 25 · Anfrage-Formular wieder vollständig (02.10.) — die Karten-Regeln der Sulden-Karte
   (.ks-karte: 3:2, overflow hidden, Verlauf darüber) trafen auch das Formular, das dieselbe
   Klasse trägt: am PC war nach „Zimmer" alles abgeschnitten, auch der Absende-Knopf. ══ */
html.pro body.kopf-casa form.ks-formular.ks-karte{display:grid;aspect-ratio:auto;overflow:visible;height:auto;background:#fff;
  border-radius:22px;padding:clamp(1.5rem,3vw,2.6rem);box-shadow:0 30px 70px -32px rgba(13,18,13,.35),0 0 0 1px rgba(13,18,13,.05)}
html.pro body.kopf-casa form.ks-formular.ks-karte::after{content:none}
@media (max-width:640px){html.pro body.kopf-casa form.ks-formular.ks-karte{grid-template-columns:1fr}}
@media (min-width:861px){
  html.pro body.kopf-casa .ks-anfragekarten{align-items:start}
  html.pro body.kopf-casa .ks-anfragekarten > :last-child{position:sticky;top:calc(118px + 3vh)}
}

/* Anfrage: „So läuft Ihre Anfrage" unter der Kontaktkarte (02.10.) */
.ks-schritte{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(42,34,30,.1)}
.ks-schritte ol{counter-reset:sch;list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.75rem}
.ks-schritte li{counter-increment:sch;position:relative;padding-left:2.4rem;font-size:.9rem;line-height:1.5;color:var(--text,#4a423c)}
.ks-schritte li::before{content:counter(sch);position:absolute;left:0;top:-.1rem;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  background:var(--creme);color:var(--akzent);font-family:var(--display);font-size:.9rem}
/* Spaltenausgleich auch in Fragen-Abschnitten (seite.js setzt zw-mitte / zw-klebt) */
@media (min-width:861px){
  html.pro body.kopf-casa .ks-faq > .zw-mitte{align-self:center!important;position:relative!important;top:auto!important}
  html.pro body.kopf-casa .ks-faq > .zw-klebt{align-self:start!important;position:sticky!important;top:calc(118px + 3vh)!important}
}

/* ══ 26 · Titelbild-Logo nur als Schrift (David 02.10.: „das Weiße im Hintergrund weg,
   nur die schöne Schrift"): cornelia-schrift-weiss.svg — Wimpel entfernt, alle Teile weiß.
   Ein weicher, heller Schatten (kein Rahmen) hält die Schrift auch über Schnee lesbar.
   Die Kopfleiste behält den Wimpel. ══ */
html.pro body.kopf-casa .titel-logo{width:clamp(240px,24vw,360px);filter:drop-shadow(0 2px 18px rgba(12,9,7,.42)) drop-shadow(0 1px 2px rgba(12,9,7,.3))}

/* ══ 27 · Kopfleiste neu verteilt (David 02.10.): Logo links oben (Wimpel bleibt), die
   Unterseiten genau in der Mitte, rechts Sommer/Winter, Sprache, Anfragen, Buchen. ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-logo{grid-column:1;grid-row:1;justify-self:start}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-links{grid-column:2;grid-row:1;justify-self:center}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts{grid-column:3;grid-row:1;justify-self:end}
}
@media (min-width:1200px) and (max-width:1500px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf{padding-inline:1.15rem}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts{gap:.55rem}
}
@media (min-width:1200px) and (max-width:1359px){
  .ks-kopfnav a{font-size:.63rem!important;letter-spacing:.1em!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{gap:1.05rem}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-saison.v3 button{width:32px;height:32px}
}

@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste > .ks-saison.v3{grid-column:1;grid-row:1;justify-self:start;margin:0}
}

/* ══ 28 · Preisblatt statt Zahlentabellen (David 02.10.: „zu viele Zahlen, schöner"):
   Zimmer mit Foto, Kinder als Altersbalken, Storno als Treppe, Zuschläge als Felder ══ */
.ks-preisblatt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;margin-top:clamp(2rem,3.5vw,3rem)}
.pb-karte{padding:clamp(1.3rem,2vw,1.9rem);border-radius:26px;background:rgba(255,255,255,.62);border:1px solid rgba(42,34,30,.08)}
.pb-karte h3{margin:0 0 1.1rem;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.05rem + .5vw,1.55rem);color:var(--tinte)}
.pb-notiz{margin:1rem 0 0;font-size:.84rem;line-height:1.55;color:var(--text-leise,#6b625b)}
/* Zimmer */
.pb-zimmerliste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pb-zimmerliste a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;padding:.55rem 1rem .55rem .55rem;border-radius:18px;
  background:var(--papier);color:inherit;text-decoration:none;transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .4s ease}
.pb-zimmerliste img{width:84px;height:64px;border-radius:13px;object-fit:cover;display:block}
.pb-name{font-family:var(--display);font-size:1.18rem;line-height:1.2;color:var(--tinte)}
.pb-name small{display:block;margin-top:.2rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;color:var(--text-leise,#6b625b)}
.pb-preis{font-family:var(--display);font-size:1.45rem;color:var(--akzent);white-space:nowrap}
.pb-preis small{margin-right:.35rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--text-leise,#6b625b)}
.pb-zimmerliste a:hover{transform:translateX(4px);box-shadow:0 14px 30px -22px rgba(42,34,30,.5)}
/* Kinder: Altersbalken */
.pb-alter{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.pb-alter li{flex:var(--w) 1 0;min-width:0;display:flex;flex-direction:column;gap:.45rem}
.pb-alter b{display:grid;place-items:center;height:58px;border-radius:12px;font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--tinte);
  background:color-mix(in srgb,var(--akzent) calc(var(--stufe,1) * 9%),#fff)}
.pb-alter li:nth-child(1) b{--stufe:1.2;color:var(--akzent)}.pb-alter li:nth-child(2) b{--stufe:2.2}.pb-alter li:nth-child(3) b{--stufe:1.5}.pb-alter li:nth-child(4) b{--stufe:.9}
.pb-alter li:first-child b{border-radius:14px 6px 6px 14px}.pb-alter li:last-child b{border-radius:6px 14px 14px 6px}
.pb-alter span{font-size:.74rem;line-height:1.35;color:var(--text-leise,#6b625b);text-align:center}
/* Zuschläge */
.pb-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pb-chips li{display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;padding:.95rem 1rem;border-radius:16px;background:var(--papier)}
.pb-chips span{font-size:.84rem;line-height:1.4;color:var(--text,#4a423c)}
.pb-chips b{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--tinte);white-space:nowrap}
/* Storno: Treppe */
.pb-treppe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:end}
.pb-treppe li{display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
.pb-treppe b{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--tinte);text-align:center;line-height:1.15}
.pb-treppe .pb-null b{font-family:var(--sans);font-size:.72rem;line-height:1.3;color:var(--akzent)}
.pb-treppe i{display:block;height:calc(10px + var(--h) * .9px);border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--akzent) calc(var(--h) * .55%),#efe4d6),color-mix(in srgb,var(--akzent) calc(var(--h) * .35%),#f3ebe0))}
.pb-treppe span{font-size:.72rem;line-height:1.3;color:var(--text-leise,#6b625b);text-align:center}
@media (max-width:860px){
  .ks-preisblatt{grid-template-columns:1fr}
}
@media (max-width:480px){
  .pb-chips{grid-template-columns:1fr}
  .pb-chips li{flex-direction:row;align-items:center}
  .pb-zimmerliste img{width:64px;height:52px}
  .pb-preis{font-size:1.25rem}
  .pb-alter b{height:50px;font-size:1rem}
  .pb-treppe b{font-size:.9rem}.pb-treppe span{font-size:.62rem}
}
.pb-spalte{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Winter-Angebotskarten: Schrift besser lesbar (David 02.10.: „unten rechts schwer zu lesen") */
html.pro body.kopf-casa .ks-ab-karte::after{background:linear-gradient(180deg,rgba(20,14,12,0) 28%,rgba(20,14,12,.38) 58%,rgba(20,14,12,.84) 100%)}
html.pro body.kopf-casa .ks-ab-karte h3,html.pro body.kopf-casa .ks-ab-karte p,html.pro body.kopf-casa .ks-ab-preis{text-shadow:0 1px 14px rgba(10,8,6,.55),0 1px 2px rgba(10,8,6,.35)}
html.pro body.kopf-casa .ks-ab-karte p{color:rgba(255,255,255,.94)}

/* ══ 29 · Angebotsseite: Bildkarten statt Jahresleiste (David 02.10.: „komplett anders“;
   die Winter-Karten gefallen) — 1 große + 3, passt auf einen Bildschirm ══ */
@media (min-width:861px){
  html.pro body.kopf-casa .ks-ab.vier{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;height:min(70vh,640px);min-height:520px}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(1){grid-column:1;grid-row:1 / 3}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(2){grid-column:2 / 4;grid-row:1}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(3){grid-column:2;grid-row:2}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(4){grid-column:3;grid-row:2}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(n+3) h3{font-size:clamp(1.35rem,1rem + 1vw,1.9rem)}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(n+3) p{font-size:.86rem}
}
.ks-ab-zeit:empty{display:none}
html.pro body.kopf-casa .ks-ab-preis.ks-ab-folgt{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em}
@media (min-width:861px){html.pro body.kopf-casa .ks-ab.vier{height:clamp(440px,calc(100vh - 420px),620px);min-height:0}}

/* ══ 30 · Live-Bild als anklickbare Karte (David 02.10.: „da muss man draufdrücken können") ══ */
.ks-livebild{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-top:1.8rem;padding:1.1rem 1.2rem;border-radius:20px;
  background:#fff;border:1px solid rgba(42,34,30,.08);box-shadow:0 18px 40px -30px rgba(42,34,30,.5);color:inherit;text-decoration:none;
  transition:transform .55s cubic-bezier(.34,1.4,.64,1),box-shadow .4s ease,border-color .4s ease}
.ks-livebild:hover,.ks-livebild:focus-visible{transform:translateY(-3px);border-color:rgba(126,47,54,.3);box-shadow:0 24px 48px -28px rgba(42,34,30,.55)}
.ks-livebild-punkt{position:relative;width:12px;height:12px;border-radius:50%;background:#d23b3b}
.ks-livebild-punkt::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(210,59,59,.45);animation:live-puls 1.8s ease-out infinite}
@keyframes live-puls{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.ks-livebild-text{font-size:.9rem;line-height:1.5;color:var(--text-leise,#6b625b)}
.ks-livebild-text b{display:block;margin-bottom:.15rem;font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--tinte)}
.ks-livebild-pfeil{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--akzent);color:#fff;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ks-livebild-pfeil::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:translateX(-2px) rotate(45deg)}
.ks-livebild:hover .ks-livebild-pfeil{transform:translateX(3px)}

/* ══ 31 · Ausflüge als Wegweiser mit Reitern (David 02.10.: die 8 Textkarten hatten
   „keine Struktur") — Im Dorf · Nationalpark · Burgen & Städtchen, Bild wechselt mit ══ */
html.pro body.kopf-casa .ks-ausflug{align-items:center}
html.pro body.kopf-casa .ks-ausflug .lead{margin-top:clamp(1.2rem,2vw,1.8rem);max-width:32em}
.ks-reiter{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:1.6rem;padding:4px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(42,34,30,.08)}
.ks-reiter button{padding:.7rem 1.15rem;border:0;border-radius:999px;background:transparent;color:var(--text,#4a423c);cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .45s cubic-bezier(.34,1.56,.64,1),color .3s ease}
.ks-reiter button.an{background:var(--tinte);color:#fff}
.ks-reiter button:not(.an):hover{background:rgba(42,34,30,.06)}
.ks-reiter-felder{display:grid;margin-top:1.3rem}
.ks-reiter-feld{grid-area:1 / 1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.ks-reiter-feld.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .05s,transform .6s cubic-bezier(.22,1,.36,1) .05s,visibility 0s}
.ks-reiter-feld li{padding:1rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(42,34,30,.08)}
.ks-reiter-feld b{display:block;font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.25;color:var(--tinte)}
.ks-reiter-feld span{display:block;margin-top:.3rem;font-size:.88rem;line-height:1.5;color:var(--text-leise,#6b625b)}
.ks-reiter-bilder{position:relative;aspect-ratio:4/3.2;border-radius:28px;overflow:hidden;background:var(--creme)}
.ks-reiter-bild{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.05);transition:opacity .8s ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
.ks-reiter-bild.an{opacity:1;transform:none}
.ks-reiter-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .ks-reiter{display:flex;width:100%}.ks-reiter button{flex:1 1 auto;padding:.65rem .7rem;font-size:.62rem;letter-spacing:.1em}
  .ks-reiter-feld{grid-template-columns:1fr}
  .ks-reiter-bilder{border-radius:20px;margin-bottom:.4rem}
}

/* ══ 32 · Ein Thema = ein Bildschirm (David 02.10.: „wenn ich ein Thema anschaue, sollte
   ich auf meinem Bildschirm alles sehen") — allgemeine Stellschrauben am PC:
   Überschriften etwas kleiner, weniger Luft zwischen Überschrift und Text, Bildspalten
   höchstens so hoch wie der Platz unter der Kopfleiste. Gemessen bei 1440 × 860. ══ */
@media (min-width:861px){
  html.pro body.kopf-casa .innen.zwei h2.zeile,html.pro body.kopf-casa .ks-faq h2.zeile,html.pro body.kopf-casa h2.zeile.eng{font-size:clamp(1.9rem,.95rem + 2vw,2.95rem)}
  html.pro body.kopf-casa .band .mitte h2.zeile,html.pro body.kopf-casa .sf-kopf h2.zeile{font-size:clamp(2.05rem,1.05rem + 2.3vw,3.3rem)}
  html.pro body.kopf-casa .band .lead{margin-top:1.3rem!important}
  html.pro body.kopf-casa .band .fliess{margin-top:1rem}
  html.pro body.kopf-casa .band .kennzahlen{margin-top:1.6rem}
  html.pro body.kopf-casa .band .ks-knoepfe{margin-top:1.5rem}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang{aspect-ratio:4/5!important;max-height:calc(100vh - 380px)}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang + .vorhang{margin-top:clamp(1.5rem,3.5vw,3rem)}
  html.pro body.kopf-casa .ks-einzelbild.vorhang{max-height:calc(100vh - 300px)}
  html.pro body.kopf-casa .haus-komposition figure,html.pro body.kopf-casa .bento{max-height:calc(100vh - 300px)}
  html.pro body.kopf-casa .bildgruppe{height:clamp(300px,calc(100vh - 480px),520px)!important}
}

/* ══ 33 · Ein Thema = ein Bildschirm — gezielte Umbauten (02.10.) ══ */
@media (min-width:861px){
  /* Kopf zweispaltig: Überschrift links, Text + Knöpfe rechts (Preise, Pauschalen, Entdecken) */
  html.pro body.kopf-casa .ks-kopf-zwei,html.pro body.kopf-casa #entdecken-band .mitte{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);
    align-items:end;max-width:none!important;margin:0!important;text-align:left}
  html.pro body.kopf-casa .ks-kopf-zwei > *,html.pro body.kopf-casa #entdecken-band .mitte > *{text-align:left;justify-content:flex-start;margin-left:0;margin-right:0}
  html.pro body.kopf-casa .ks-kopf-zwei .rubrik,html.pro body.kopf-casa .ks-kopf-zwei h2,html.pro body.kopf-casa #entdecken-band .mitte .rubrik,html.pro body.kopf-casa #entdecken-band .mitte h2{grid-column:1}
  html.pro body.kopf-casa .ks-kopf-zwei .fliess,html.pro body.kopf-casa .ks-kopf-zwei .ks-knoepfe,html.pro body.kopf-casa #entdecken-band .mitte .fliess{grid-column:2;max-width:34em}
  html.pro body.kopf-casa .ks-kopf-zwei .fliess,html.pro body.kopf-casa #entdecken-band .mitte .fliess{grid-row:1 / 3;align-self:end;margin:0!important}
  html.pro body.kopf-casa .ks-kopf-zwei .ks-knoepfe{grid-row:3;margin-top:1.1rem!important}
  html.pro body.kopf-casa .ks-kopf-zwei:has(.ks-knoepfe) .fliess{grid-row:1 / 3}
  html.pro body.kopf-casa .ks-preisblatt{margin-top:clamp(1.4rem,2.4vw,2rem)}
  /* Angebots-Bühne überall so hoch, wie neben der Überschrift Platz ist */
  html.pro body.kopf-casa .ks-ab{height:clamp(420px,calc(100vh - 430px),620px);min-height:0;margin-top:clamp(1.4rem,2.4vw,2rem)}
  html.pro body.kopf-casa .ks-ab-notiz{margin-top:.7rem}
  /* Wellness: kleineres Kopfbild, Bildkarten in einer Reihe */
  html.pro body.kopf-casa .ks-wb-gross{aspect-ratio:16/10;width:80%}
  html.pro body.kopf-casa .ks-wb-klein{width:36%}
  html.pro body.kopf-casa .ks-wellness-bilder{padding-bottom:9%}
  html.pro body.kopf-casa ul.hinweise.mit-bild{margin-top:1.4rem!important}
  html.pro body.kopf-casa ul.hinweise.mit-bild > li{font-size:.86rem}
  html.pro body.kopf-casa ul.hinweise.mit-bild > li b{font-size:1.02rem}
  /* Merkmal-Karten etwas kompakter */
  html.pro body.kopf-casa ul.hinweise{margin-top:1.4rem!important}
  html.pro body.kopf-casa ul.hinweise > li{padding:1rem 1.15rem 1.1rem}
  /* Angebots-Schaufenster der Startseite kompakter */
  html.pro body.kopf-casa .sf .sf-kopf{margin-bottom:clamp(1.2rem,2.2vw,1.8rem)}
  html.pro body.kopf-casa .sf .sf-punkt{padding-block:1.05rem!important;row-gap:.35rem}
  html.pro body.kopf-casa .sf .sf-titel{font-size:clamp(1.45rem,1rem + 1vw,2rem)}
  html.pro body.kopf-casa .sf .sf-bilder{min-height:0}
  /* Anreise: Karte flacher, Tabelle darunter in derselben Spalte */
  html.pro body.kopf-casa #anreise .ks-karte{aspect-ratio:16/9}
  html.pro body.kopf-casa #anreise .ks-tabelle-rahmen{margin-top:1rem}
  html.pro body.kopf-casa #anreise .ks-tabelle{font-size:.86rem}
  html.pro body.kopf-casa #anreise .ks-tabelle th,html.pro body.kopf-casa #anreise .ks-tabelle td{padding-block:.55rem}
  /* Häufige Fragen etwas enger */
  html.pro body.kopf-casa .ks-faq-liste summary{padding-block:.85rem!important}
}
/* Angebote: Foto + „Im Preis enthalten“ als eine Karte rechts */
html.pro body.kopf-casa .ks-paket.mit-foto{display:block;margin:0;padding:0;overflow:hidden}
.ks-paket-foto{margin:0;aspect-ratio:16/7;overflow:hidden}
.ks-paket-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.ks-paket.mit-foto:hover .ks-paket-foto img{transform:scale(1.04)}
.ks-paket-innen{padding:clamp(1.2rem,1.8vw,1.7rem) clamp(1.3rem,2vw,1.9rem) clamp(1.3rem,2vw,1.8rem)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste{display:block;columns:2 190px;column-gap:1.6rem;margin-top:1rem}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li{break-inside:avoid;margin-bottom:.8rem;font-size:.84rem}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste b{font-size:1rem}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-fuss{grid-template-columns:1fr;gap:.6rem;margin-top:.6rem;padding-top:1rem}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-fuss p{font-size:.8rem}
@media (max-width:760px){html.pro body.kopf-casa .innen.zwei > .bildspalte:has(.ks-paket){order:0}}
/* Sulden-Panorama als eigenes Bildband */
.ks-panorama-band{padding:0 var(--ks-rand,clamp(1.4rem,4vw,4.5rem)) clamp(3rem,6vw,5rem);background:inherit}
.ks-panorama-band figure{margin:0;border-radius:clamp(14px,1.4vw,20px);overflow:hidden}
/* Startseite Einstieg (02.10.): mehr Text statt Pillen, Familiensatz ohne Trennlinie */
html.pro body.kopf-casa #haus .ks-haus-lead{max-width:34em}
html.pro body.kopf-casa #haus .ks-haus-fliess{border-top:0;padding-top:0;margin-top:1.1rem}
/* Preisblatt in drei Spalten (ein Bildschirm): Zimmer · Kinder + Zuschläge · Storno */
@media (min-width:1100px){
  html.pro body.kopf-casa .ks-preisblatt.drei{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-chips{grid-template-columns:1fr;gap:6px}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-chips li{flex-direction:row;align-items:center;padding:.65rem .9rem}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-karte{padding:clamp(1.1rem,1.6vw,1.5rem)}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-zimmerliste img{width:72px;height:56px}
}
@media (min-width:861px) and (max-width:1099px){html.pro body.kopf-casa .ks-preisblatt.drei{grid-template-columns:1fr 1fr}html.pro body.kopf-casa .ks-preisblatt.drei .pb-spalte:last-child{grid-column:1 / -1}}
@media (min-width:861px){
  /* Einleitungstexte etwas enger gesetzt */
  html.pro body.kopf-casa .band .lead{line-height:1.62}
  html.pro body.kopf-casa .band .fliess{line-height:1.62}
  /* Bildgruppen (bento) mit fester, fensterabhängiger Höhe statt Seitenverhältnis */
  html.pro body.kopf-casa .innen.zwei .bento{height:clamp(380px,calc(100vh - 400px),540px);max-height:none;grid-template-rows:1.25fr 1fr}
  html.pro body.kopf-casa .innen.zwei .bento figure{aspect-ratio:auto!important;height:auto;min-height:0}
}
@media (min-width:861px){
  html.pro body.kopf-casa .pb-treppe i{height:calc(8px + var(--h) * .6px)}
  html.pro body.kopf-casa .ks-ab{height:clamp(400px,calc(100vh - 450px),620px)}
  html.pro body.kopf-casa #dorf .ks-tabelle th,html.pro body.kopf-casa #dorf .ks-tabelle td{padding-block:.5rem}
}
@media (max-width:760px){
  /* Preisblatt am Handy als Wischreihe */
  html.pro body.kopf-casa .ks-preisblatt{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 10px;scroll-padding-inline:var(--ks-rand,18px)}
  html.pro body.kopf-casa .ks-preisblatt::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .ks-preisblatt > .pb-spalte{flex:0 0 88%;scroll-snap-align:start}
  /* Reiter: nur die aktive Liste nimmt Platz ein */
  .ks-reiter-feld:not(.an){display:none}
}
@media (min-width:1100px){
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-chips{gap:0}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-chips li{background:none;border-radius:0;padding:.55rem 0;border-bottom:1px solid rgba(42,34,30,.08)}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-chips li:last-child{border-bottom:0}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-karte h3{margin-bottom:.8rem}
  html.pro body.kopf-casa .ks-preisblatt.drei .pb-alter b{height:50px}
  html.pro body.kopf-casa .ks-preisblatt .pb-notiz{margin-top:.7rem;font-size:.8rem}
  html.pro body.kopf-casa .ks-preisblatt.drei{align-items:start}
}
@media (min-width:861px){
  /* Nummer der Merkmal-Karte in die Ecke statt eigene Zeile (spart eine Zeile je Karte) */
  html.pro body.kopf-casa ul.hinweise:not(.mit-bild) > li{padding-right:3.6rem}
  html.pro body.kopf-casa ul.hinweise:not(.mit-bild) > li::before{position:absolute;top:1.05rem;right:1.1rem;margin:0;padding:0 0 0 0;
    background-position:-60px 52%;font-size:.8rem;opacity:.85}
  html.pro body.kopf-casa ul.hinweise:not(.mit-bild) > li:hover::before{background-size:0 0}
  /* Weiterlinks nebeneinander statt untereinander */
  html.pro body.kopf-casa .band .innen.zwei div:has(> .ks-weiterlink + .ks-weiterlink){display:flex;flex-wrap:wrap;column-gap:1.6rem;row-gap:.6rem}
  html.pro body.kopf-casa .band .ks-weiterlink{letter-spacing:.13em}
  /* Anreise-Karte flacher, Schaufenster enger */
  html.pro body.kopf-casa #anreise .ks-karte{aspect-ratio:2/1}
  html.pro body.kopf-casa .sf .sf-punkt{padding-block:.9rem!important}
  html.pro body.kopf-casa .sf .sf-kurz{font-size:.93rem;line-height:1.5}
}
@media (min-width:861px){
  html.pro body.kopf-casa .mk-reihe{margin-top:1.2rem}
  html.pro body.kopf-casa .innen.zwei .ks-einzelbild.vorhang{max-height:calc(100vh - 380px)}
}
@media (min-width:861px){html.pro body.kopf-casa .ks-faq-bild{aspect-ratio:16/10}}
/* Titelbild-Logo in Originalfarben, nur ohne weißen Wimpel (David 02.10.): keine Filter, gestochen scharf als Vektor */
html.pro body.kopf-casa .titel-logo{filter:none!important}
/* Kartennummer sauber rechts oben (ältere Regel setzte left:0 → Nummer klebte am Titel) */
@media (min-width:861px){
  html.pro body.kopf-casa ul.hinweise:not(.mit-bild) > li::before{left:auto!important;width:auto;height:auto;line-height:1;color:var(--akzent);opacity:.7;font-size:.78rem;letter-spacing:.08em}
}

/* ══ 34 · Handy-Feinschliff (02.10.) ══ */
.pb-zimmerliste img{flex:none;min-width:84px;aspect-ratio:4/3}
@media (max-width:480px){.pb-zimmerliste img{min-width:64px;width:64px;height:48px}}
/* Sulden-Panorama im eigenen Bildband: am Handy seitlich wischen statt leerer Fläche */
html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild,html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild img{animation:none!important;transform:none!important;clip-path:none!important;opacity:1!important;filter:none!important}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-panorama-band{padding-inline:0}
  html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild{position:relative;width:auto!important;aspect-ratio:auto!important;height:260px;min-height:0!important;
    border-radius:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild img{position:static!important;width:auto!important;height:100%!important;max-width:none!important}
}
@media (max-width:480px){
  .pb-zimmerliste a{gap:.7rem;padding:.45rem .7rem .45rem .45rem;min-width:0}
  .pb-zimmerliste a > *{min-width:0}
  .pb-name{font-size:1.02rem}
  .pb-preis{font-size:1.12rem}
  .pb-preis small{display:block;margin:0;font-size:.62rem;text-align:right}
}

/* ══ 35 · Titelbild-Logo besser sichtbar (David 02.10.): Originalfarben bleiben, dahinter
   ein weicher, heller Lichthof (wie Morgenlicht, keine Kante, kein Kasten) und ein
   hauchdünner heller Saum um die Buchstaben, der sie vom Foto abhebt. ══ */
html.pro body.kopf-casa .titel-logo-wrap{position:relative;isolation:isolate}
html.pro body.kopf-casa .titel-logo-wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-38% -26% -42% -22%;
  background:radial-gradient(closest-side,rgba(250,246,240,.86) 0%,rgba(250,246,240,.62) 42%,rgba(250,246,240,.26) 72%,rgba(250,246,240,0) 100%);
  filter:blur(6px);opacity:0;transition:opacity 1.4s ease .9s}
html.pro.los body.kopf-casa .titel-logo-wrap::before,html.pro body.kopf-casa .titel-logo-wrap::before{opacity:1}
html.pro body.kopf-casa .titel-logo{filter:drop-shadow(0 0 .6px rgba(255,255,255,.95)) drop-shadow(0 0 1.4px rgba(255,255,255,.7)) drop-shadow(0 6px 18px rgba(255,250,242,.35))!important}

/* ══ 36 · Feinschliff Kopf, Logo, Bilder (David 02.10.) ══ */
/* a) Kopfleiste: Umschalter, Sprachfeld und Knöpfe exakt gleich hoch (46 px), eine Linie */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste{align-items:center}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-saison.v3{height:46px;padding:4px;box-sizing:border-box;align-self:center}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-saison.v3 button{width:38px;height:38px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-sprachfeld-knopf{height:46px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf{height:46px;display:inline-flex;align-items:center;padding-block:0}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-links{align-self:center;align-items:center}
}
/* b) Sprachfeld schlichter: schmal, mittig unter dem Knopf, nur Häkchen markiert die Sprache */
.ks-sprachfeld-liste{left:50%;right:auto;min-width:168px;padding:6px;border-radius:16px;transform:translate(-50%,-6px) scale(.97);transform-origin:top center}
.ks-sprachfeld.offen .ks-sprachfeld-liste{transform:translate(-50%,0)}
.ks-sprachfeld-liste::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:var(--papier);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.ks-sprachfeld-liste a{position:relative;padding:.62rem .85rem;font-size:.88rem;gap:.75rem}
.ks-sprachfeld-liste a[aria-current]{background:transparent;font-weight:600}
.ks-sprachfeld-liste a:hover{background:var(--creme)}
.ks-sprachfeld-liste a b{width:1.5rem;color:var(--text-leise,#8a7f77)}
.ks-sprachfeld-liste a[aria-current] b{color:var(--akzent)}
/* c) Natur-Karte: Höhe nach Inhalt, nichts abgeschnitten */
html.pro body.kopf-casa .nk-karte{height:auto;min-height:clamp(560px,calc(100vh - 220px),760px)}
html.pro body.kopf-casa .nk-text{padding-block:clamp(44px,5vw,72px)}
/* d) Bilder laufen nicht mehr beim Scrollen mit (ruckte) — Bildspalten stehen ruhig, mittig */
@media (min-width:861px){
  html.pro body.kopf-casa .innen.zwei > .bildspalte,html.pro body.kopf-casa .innen.zwei > div:has(> .ks-doppelbild),
  html.pro body.kopf-casa .innen.zwei > div:has(> .haus-komposition),html.pro body.kopf-casa .innen.zwei > div:has(> .bento),
  html.pro body.kopf-casa .innen.zwei > .zw-klebt{position:relative!important;top:auto!important;align-self:center!important}
}
/* e) Titelbild-Logo größer */
html.pro body.kopf-casa .titel-logo{width:clamp(300px,30vw,470px)}
@media (max-width:760px){html.pro body.kopf-casa .titel-logo{width:min(78vw,320px)}}

/* ══ 37 · Preisblatt ruhig wie eine Preisliste (David 02.10.: „scheußlich, anders
   strukturieren"): links Zimmer mit Foto, rechts eine Karte mit drei schlichten Listen ══ */
html.pro body.kopf-casa .ks-preisblatt.neu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px;align-items:stretch}
.pb-regeln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.pb-regeln section,.pb-regeln .pb-block{min-width:0}
.pb-zeilen{margin:0;padding:0}
.pb-zeilen div{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.6rem 0;border-bottom:1px solid rgba(42,34,30,.08)}
.pb-zeilen div:last-child{border-bottom:0}
.pb-zeilen dt{font-size:.88rem;color:var(--text,#4a423c)}
.pb-zeilen dd{margin:0;font-family:var(--display);font-size:1.08rem;color:var(--tinte);white-space:nowrap;text-align:right}
.pb-regeln .pb-notiz{margin-top:.5rem;font-size:.78rem}
@media (max-width:1100px){.pb-regeln{grid-template-columns:1fr 1fr}.pb-regeln > :last-child{grid-column:1 / -1}}
@media (max-width:860px){html.pro body.kopf-casa .ks-preisblatt.neu{grid-template-columns:1fr}}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-preisblatt.neu{display:grid!important;overflow:visible;margin-inline:0;padding:0}
  .pb-regeln{grid-template-columns:1fr}
  .pb-zeilen dd{white-space:normal}
}

/* ══ 38 · Keine mitlaufenden Bilder mehr (David 02.10.: „wenn man runterscrollt, gehen
   die Bilder mit“) — Gegenlauf der Spalten und Bild-im-Rahmen-Versatz aus, überall. ══ */
html.pro body.kopf-casa [data-szene="gegen-links"],html.pro body.kopf-casa [data-szene="gegen-rechts"]{transform:none!important}
html.pro body.kopf-casa *{--py:0px!important}

/* ══ 39 · Winter-/Angebots-Bildkarten lesbarer (David 02.10.) ══ */
html.pro body.kopf-casa .ks-ab{height:clamp(520px,calc(100vh - 360px),640px)}
html.pro body.kopf-casa .ks-ab-karte:not(:first-child) h3{font-size:clamp(1.5rem,1.1rem + 1vw,2.1rem)}
html.pro body.kopf-casa .ks-ab-karte:not(:first-child) p{font-size:.88rem}
html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-fuss{margin-top:.7rem;padding-top:.7rem}
html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-pfeil{width:40px;height:40px}
html.pro body.kopf-casa .ks-ab-karte::after{background:linear-gradient(180deg,rgba(20,14,12,.1) 0%,rgba(20,14,12,0) 22%,rgba(20,14,12,.35) 50%,rgba(20,14,12,.86) 100%)}
html.pro body.kopf-casa .ks-ab-karte img[src*="winter-skifahrer"]{object-position:50% 18%}
html.pro body.kopf-casa .ks-ab-karte img[src*="winter-ski-paar"]{object-position:50% 30%}

/* ══ 40 · Bildkarten: Datum fest über dem Titel (nie Überlappung) ══ */
html.pro body.kopf-casa .ks-ab-zeit{position:static;align-self:flex-start;margin:0 0 .7rem}
html.pro body.kopf-casa .ks-ab{height:clamp(460px,calc(100vh - 390px),620px)}

/* ══ 41 · Sommer auf einen Blick als Bildkacheln (statt Tabelle) ══ */
.ks-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(170px,calc((100vh - 420px) / 2),260px);gap:12px;margin-top:clamp(1.4rem,2.4vw,2rem)}
.ks-kachel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem 1.2rem;border-radius:22px;color:#fff;text-decoration:none;background:var(--fels)}
.ks-kachel img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
.ks-kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,12,0) 35%,rgba(20,14,12,.8) 100%)}
.ks-kachel-wer{position:absolute;left:1rem;top:1rem;padding:.4rem .75rem;border-radius:999px;background:rgba(247,242,234,.92);color:var(--tinte);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ks-kachel-text{font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.ks-kachel-text b{display:block;margin-bottom:.15rem;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1rem + .6vw,1.6rem);color:#fff}
.ks-kachel:hover img{transform:scale(1.06)}
@media (max-width:760px){
  .ks-kacheln{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--ks-rand,18px));padding:4px var(--ks-rand,18px) 10px}
  .ks-kacheln::-webkit-scrollbar{display:none}
  .ks-kachel{flex:0 0 78%;height:300px;scroll-snap-align:start}
}

/* ══ 42 · „Im Preis enthalten“ hell und edel statt dunkler Block (David 02.10.) ══ */
html.pro body.kopf-casa .ks-paket.mit-foto{background:#fff;color:var(--tinte);border:1px solid rgba(42,34,30,.08);box-shadow:0 30px 60px -40px rgba(42,34,30,.45)}
html.pro body.kopf-casa .ks-paket.mit-foto::before{content:none}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-foto{aspect-ratio:16/6}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-titel{color:var(--akzent)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li{padding-left:2rem;color:var(--text-leise,#6b625b)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li::before{width:20px;height:20px;top:0;background:rgba(126,47,54,.08);box-shadow:none}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li::after{left:7px;top:.2rem;width:4px;height:8px;border-color:var(--akzent)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li:hover::before{background:var(--akzent)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste li:hover::after{border-color:#fff}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-liste b{color:var(--tinte)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-fuss{border-top-color:rgba(42,34,30,.1)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-fuss p{color:var(--text-leise,#6b625b)}
html.pro body.kopf-casa .ks-paket.mit-foto .ks-paket-fuss b{color:var(--akzent)}

/* ══ 43 · Sulden in Kürze: vier große Fakten + zwei Saison-Links statt 9-Zeilen-Tabelle ══ */
.ks-fakten-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ks-fakt{padding:1.1rem 1.2rem;border-radius:20px;background:rgba(255,255,255,.62);border:1px solid rgba(42,34,30,.08)}
.ks-fakt span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent)}
.ks-fakt b{display:block;margin-top:.45rem;font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1rem + .55vw,1.55rem);line-height:1.2;color:var(--tinte)}
.ks-saisonlinks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ks-saisonlink{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1rem;padding:1rem 1.2rem;border-radius:20px;background:var(--tinte);color:#f4ece0;text-decoration:none;transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.ks-saisonlink small{grid-column:1;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--messing,#d4b69a)}
.ks-saisonlink span{grid-column:1;font-size:.86rem;line-height:1.45;color:rgba(244,236,224,.85)}
.ks-saisonlink i{grid-column:2;grid-row:1 / 3;width:38px;height:38px;border-radius:50%;background:rgba(244,236,224,.14);display:grid;place-items:center}
.ks-saisonlink i::before{content:"";width:7px;height:7px;border:solid #f4ece0;border-width:1.5px 1.5px 0 0;transform:translateX(-2px) rotate(45deg)}
.ks-saisonlink:hover{transform:translateY(-3px)}
@media (max-width:480px){.ks-saisonlinks{grid-template-columns:1fr}}
/* Angebotsseite: kleine Karten luftiger */
@media (min-width:861px){
  html.pro body.kopf-casa .ks-ab.vier{height:clamp(500px,calc(100vh - 330px),640px)}
  html.pro body.kopf-casa .ks-ab.vier .ks-ab-karte:nth-child(n+3) p{display:none}
}
/* ══ 44 · Ohne versetzten Linienrahmen hinter den Bildern (David 02.10.: „diese Linie
   gefällt nicht") — Bilder klar, leicht gerundet, mit weichem Schatten ══ */
html.pro body.kopf-casa .ks-doppelbild > .vorhang::before,html.pro body.kopf-casa .ks-einzelbild.vorhang::before,
html.pro body.kopf-casa .haus-komposition figure::before{content:none!important}
html.pro body.kopf-casa .ks-doppelbild > .vorhang,html.pro body.kopf-casa .ks-einzelbild.vorhang,html.pro body.kopf-casa .haus-komposition figure{
  border-radius:20px!important;overflow:hidden!important;box-shadow:0 24px 50px -32px rgba(42,34,30,.45)}
html.pro body.kopf-casa .ks-doppelbild > .vorhang img,html.pro body.kopf-casa .ks-einzelbild.vorhang img,html.pro body.kopf-casa .haus-komposition figure img{border-radius:0}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-doppelbild{gap:10px}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang + .vorhang{margin-top:0!important}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang{aspect-ratio:3/4!important;border-radius:16px!important}
  html.pro body.kopf-casa .haus-komposition .hk-ecke{margin-top:0!important}
  html.pro body.kopf-casa .haus-komposition figure{border-radius:16px!important}
}

/* ══ 45 · Grundfarbe aus dem Original (David 02.10.): Taupe von hotelcornelia.com
   (#a39a8f), eine Spur heller als Grund; Wechselflächen etwas heller; Schrift dunkler,
   damit alles gut lesbar bleibt. Abschnitte mit Hintergrundbild bleiben unverändert. ══ */
:root{
  --papier:#b2aa9f;
  --creme:#bcb4aa;
  --band:#bcb4aa;--band-tief:#a9a196;--salbei:#bcb4aa;
  --text:#3d3530;--text-leise:#554b44;
  --linie:rgba(42,34,30,.2);
}
html.pro body.kopf-casa .rubrik,html.pro body.kopf-casa .ks-rubrik{color:#6e2730}
/* Karten heller als der Grund, damit sie sich abheben */
html.pro body.kopf-casa ul.hinweise > li,html.pro body.kopf-casa .pb-karte,html.pro body.kopf-casa .ks-fakt,
html.pro body.kopf-casa .ks-reiter-feld li,html.pro body.kopf-casa .ks-jahr{background:rgba(255,252,247,.55)!important;border-color:rgba(42,34,30,.1)!important}
html.pro body.kopf-casa .pb-zimmerliste a{background:rgba(255,252,247,.6)}
/* Kopfleiste bleibt hell (Logo-Wimpel, Lesbarkeit) */
html.pro body.kopf-casa .kopf.fest{background:#f4efe8}
/* Fließtext etwas dunkler auf dem Taupe */
html.pro body.kopf-casa .band .lead,html.pro body.kopf-casa .band .fliess{color:#3a322d}

/* ══ 46 · Davids Liste 02.10. abends ══ */
/* Titelbild-Logo: klarer Lichthof, kräftiger Saum → gut lesbar auf jedem Foto */
html.pro body.kopf-casa .titel-logo-wrap::before{inset:-34% -22% -38% -18%;filter:blur(4px);
  background:radial-gradient(closest-side,rgba(250,246,240,.95) 0%,rgba(250,246,240,.85) 48%,rgba(250,246,240,.45) 76%,rgba(250,246,240,0) 100%)}
html.pro body.kopf-casa .titel-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2.5px rgba(255,255,255,.85))!important}
/* Zimmerfahrt Startseite: Karten in warmem Hell statt Weiß */
html.pro body.kopf-casa .zf-karte{background:#efe9e1!important;box-shadow:0 26px 50px -34px rgba(42,34,30,.55)!important}
html.pro body.kopf-casa .zf-karte .zf-text{background:transparent}
/* Bildgruppe „Im Sommer wie im Winter“: kein Reinzoomen */
html.pro body.kopf-casa .bildgruppe figure img,html.pro body.kopf-casa .bildgruppe figure:hover img{transform:none!important;scale:1!important;animation:none!important}
html.pro body.kopf-casa .bildgruppe figure{clip-path:none!important}
/* Kopfleiste schlanker */
html.pro body.kopf-casa .kopf.fest{padding-block:.42rem!important}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(42px,3.6vw,54px)!important}
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-saison.v3{height:42px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-saison.v3 button{width:34px;height:34px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-sprachfeld-knopf,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf{height:42px}
}
/* Menü wie Hotel Monika (Sexten): gesperrte Großbuchstaben, lange feine Linie darunter */
@media (min-width:1200px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav{gap:clamp(1.4rem,2.3vw,2.8rem);padding:0 .4rem .5rem;border-bottom:1px solid currentColor;border-bottom-color:rgba(127,127,127,.55)}
  html.pro body.kopf-casa .ks-kopfnav a{font-weight:500;letter-spacing:.24em;padding:.35rem 0}
  html.pro body.kopf-casa .ks-kopfnav a::after{bottom:-.55rem;height:2px}
}
/* Wanderpaar nicht halbiert */
html.pro body.kopf-casa img[src*="wandern-paar-karte"]{object-position:28% 50%}
/* Weniger Weiß: helle Flächen warm statt reinweiß */
html.pro body.kopf-casa .ks-paket.mit-foto,html.pro body.kopf-casa .ks-livebild,html.pro body.kopf-casa form.ks-formular.ks-karte,
html.pro body.kopf-casa .ks-kontaktkarte,html.pro body.kopf-casa .sf-mehr{background:#efe9e1!important}
html.pro body.kopf-casa .ks-formular input,html.pro body.kopf-casa .ks-formular select,html.pro body.kopf-casa .ks-formular textarea{background:#f7f3ee!important;border-color:rgba(42,34,30,.18)!important}
html.pro body.kopf-casa .ks-formular input:focus,html.pro body.kopf-casa .ks-formular select:focus,html.pro body.kopf-casa .ks-formular textarea:focus{border-color:var(--akzent)!important;box-shadow:0 0 0 3px rgba(126,47,54,.14)!important;outline:0}
html.pro body.kopf-casa .ks-formular button[type=submit],html.pro body.kopf-casa .ks-formular .knopf{background:var(--akzent)!important;border-color:var(--akzent)!important;color:#fff!important}
/* Merkmal-Karten (01/02/03) bleiben Karten mit Bewegung (David 03.10.: „davor war es schöner“) */
/* Wimpel hängt wie vorher über die schlanke Leiste hinaus */
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(80px,6.4vw,100px)!important}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo{align-self:start;margin-top:-.42rem;margin-bottom:-3rem}

/* ══ 47 · Untermenü wie Hotel Monika (David 02.10.): zweite Textzeile unter der Linie ══ */
.ks-kn-unter{display:none}
@media (min-width:1200px){
  .ks-kn-gruppe{position:static;display:flex;align-items:center;align-self:stretch}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-unter{display:flex;position:absolute;left:0;right:0;top:100%;justify-content:center;gap:clamp(1.4rem,2.4vw,2.6rem);
    padding:.85rem 2rem 1rem;background:#f4efe8;border-bottom:1px solid rgba(42,34,30,.1);box-shadow:0 18px 30px -24px rgba(42,34,30,.4);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s;z-index:5}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{
    opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s}
  html.pro body.kopf-casa .ks-kn-unter a{color:var(--tinte)!important;font-size:.66rem!important;font-weight:500;letter-spacing:.18em!important;text-transform:uppercase;padding:.3rem 0!important;opacity:.78}
  html.pro body.kopf-casa .ks-kn-unter a:hover,html.pro body.kopf-casa .ks-kn-unter a[aria-current]{opacity:1;color:var(--akzent)!important}
  html.pro body.kopf-casa .ks-kn-unter a::after{bottom:-.1rem!important;height:1px!important}
}
/* Handy-Vollbildmenü: Unterpunkte klein unter dem Hauptpunkt */
.ks-schub-unter{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin:.3rem 0 .6rem 2.4rem}
.ks-schub-unter a{color:rgba(244,236,224,.72);font-size:.82rem;letter-spacing:.04em;text-decoration:none}
.ks-schub-unter a:hover{color:#fff}
.ks-schub-links .ks-schub-unter{justify-content:center;margin:.1rem 0 .7rem}
.ks-schub-links .ks-schub-unter a{display:inline;padding:0;font-family:var(--sans);font-size:.8rem;line-height:1.6;letter-spacing:.06em;color:rgba(244,236,224,.7)}
/* Fußzeile mit fünf Spalten (Logo · Kontakt · Hotel · Urlaub · Folgen & Bewerten) */
@media (min-width:1100px){html.pro body.kopf-casa .fuss-raster:has(> :nth-child(5)){grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}
@media (min-width:761px) and (max-width:1099px){html.pro body.kopf-casa .fuss-raster:has(> :nth-child(5)){grid-template-columns:1fr 1fr 1fr}}

/* ══ 48 · Messbefunde 02.10. nach den neuen Unterseiten ══
   Natur-Karte: Höhe kommt vom Text, die laufenden Bildspalten füllen nur die Fläche
   (sonst wuchs die Karte mit den Spalten auf 1.100 px). Preisregeln: Karten nicht strecken. */
@media (min-width:821px){html.pro body.kopf-casa .nk-galerie{height:0;min-height:100%}}
.pb-regeln{align-items:start}
html.pro body.kopf-casa .ks-ab{height:clamp(410px,calc(100vh - 450px),640px)}
.pb-zeilen div{padding:.48rem 0}
html.pro body.kopf-casa .ks-preisblatt.neu .pb-karte.pb-regeln{padding-block:18px}
.pb-regeln .pb-notiz{margin-top:.25rem}
/* Handy: Preisregeln als Wischkarten statt 1.300 px Text untereinander;
   Fußzeile zweispaltig (Adresse/Logo über die volle Breite) statt fünf Blöcke untereinander */
@media (max-width:760px){
  html.pro body.kopf-casa .ks-preisblatt.neu .pb-karte.pb-regeln{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 6px;background:none;box-shadow:none;border:0;scrollbar-width:none}
  html.pro body.kopf-casa .pb-regeln::-webkit-scrollbar{display:none}
  html.pro body.kopf-casa .pb-regeln .pb-block{flex:0 0 84%;scroll-snap-align:start;background:#efe9e1;border-radius:18px;padding:18px 18px 14px}
  html.pro body.kopf-casa .fuss-raster{grid-template-columns:1fr 1fr!important;column-gap:1.6rem;row-gap:2.2rem}
  html.pro body.kopf-casa .fuss-raster > :first-child{grid-column:1 / -1}
}
/* Handy, Angebotsübersicht: Leistungsliste nur mit den ersten vier Punkten,
   alles Weitere steht auf der eigenen Angebotsseite („Alle Details zum Angebot“) */
@media (max-width:760px){
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .ks-paket-liste li:nth-child(n+5){display:none}
}
/* Angebotsübersicht am PC: Abstände im Textblock enger, damit jedes Angebot mit Detail-Link
   auf einen Bildschirm passt (it: Sommerwochen) */
@media (min-width:1000px){
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .innen > div > .lead{margin-top:1.1rem!important}
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .ks-zeilenpreis{margin-top:1.1rem}
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .ks-weiterlink{margin-top:.6rem}
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .innen > div > .fliess + .ks-knoepfe,
  html.pro body.kopf-casa :is(#adventwochen,#weisse-wochen,#paerchenwoche,#sommerwochen) .ks-weiterlink + .fliess{margin-top:.9rem!important}
}
.pb-zeilen div{padding:.44rem 0}

/* ══ 49 · Untermenü-Animation wie Monika (David 02.10.): Zeile gleitet herein, Linie zieht sich
   von der Mitte auf, die Punkte folgen nacheinander mit Feder ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-unter{transform:translateY(-10px);clip-path:inset(0 0 100% 0);
    transition:opacity .3s ease,transform .6s cubic-bezier(.34,1.56,.64,1),clip-path .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{
    clip-path:inset(0 0 -40px 0);transition:opacity .3s ease,transform .6s cubic-bezier(.34,1.56,.64,1),clip-path .5s cubic-bezier(.22,1,.36,1),visibility 0s}
  .ks-kn-unter::before{content:"";position:absolute;left:50%;top:0;width:min(560px,60%);height:1px;background:var(--akzent,#7e2f36);opacity:.5;
    transform:translateX(-50%) scaleX(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .ks-kn-gruppe:hover .ks-kn-unter::before,.ks-kn-gruppe:focus-within .ks-kn-unter::before{transform:translateX(-50%) scaleX(1)}
  html.pro body.kopf-casa .ks-kn-unter a{transform:translateY(8px);opacity:0;transition:opacity .35s ease,transform .7s cubic-bezier(.34,1.56,.64,1),color .2s ease}
  html.pro body.kopf-casa .ks-kn-gruppe:hover .ks-kn-unter a,html.pro body.kopf-casa .ks-kn-gruppe:focus-within .ks-kn-unter a{transform:none;opacity:.78}
  html.pro body.kopf-casa .ks-kn-gruppe:hover .ks-kn-unter a:hover,html.pro body.kopf-casa .ks-kn-gruppe .ks-kn-unter a[aria-current]{opacity:1}
  .ks-kn-gruppe:hover .ks-kn-unter a:nth-child(2){transition-delay:.04s}
  .ks-kn-gruppe:hover .ks-kn-unter a:nth-child(3){transition-delay:.08s}
  .ks-kn-gruppe:hover .ks-kn-unter a:nth-child(4){transition-delay:.12s}
  .ks-kn-gruppe:hover .ks-kn-unter a:nth-child(5){transition-delay:.16s}
  .ks-kn-gruppe:hover .ks-kn-unter a:nth-child(6){transition-delay:.2s}
}
/* Handy: Unterpunkte erscheinen kurz nach ihrem Hauptpunkt */
.ks-schub-links .ks-schub-unter a{opacity:0;transition:opacity .5s ease .1s}
html.ks-menue-offen .ks-schub-links .ks-schub-unter a{opacity:1;transition-delay:.7s}
/* Handy-Menü auf niedrigen Bildschirmen (z. B. 360 × 680): Abstände enger, damit Menü,
   Sprache und Anfragen/Buchen ohne Scrollen auf einen Bildschirm passen */
@media (max-width:760px) and (max-height:780px){
  .ks-schub .ks-schub-links{margin:.5rem 0}
  .ks-schub .ks-schub-links > li > a{padding:.05rem 0}
  .ks-schub-links .ks-schub-unter{margin:0 0 .35rem}
  .ks-schub-links .ks-schub-unter a{font-size:.76rem;line-height:1.55}
  .ks-schub .ks-schub-fuss{gap:.6rem}
}
@media (max-width:760px) and (max-height:640px){
  .ks-schub .ks-schub-links > li > a{font-size:clamp(1.3rem,4.4vh,1.7rem)}
}

/* ══ 50 · Untermenü 1:1 wie monika.it (David 02.10., Screenshot): zweite Zeile direkt unter der
   Menülinie, Teil der Kopfleiste (kein eigener Balken, kein Rahmen, kein Schatten), Punkte über
   die Linienbreite verteilt, dünn, gesperrt, Groß-/Kleinschreibung. Die Leiste selbst bleibt
   schlank (62 px) und wächst nur, solange das Untermenü offen ist. ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{position:relative!important}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-unter{
    left:50%;right:auto;top:100%;width:100%;min-width:max-content;transform:translate(-50%,-6px);
    justify-content:space-between;column-gap:1.8rem;padding:.7rem 0 .85rem;
    background:transparent;border:0;box-shadow:none;clip-path:inset(0 -100vmax -2px -100vmax)}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{transform:translate(-50%,0);clip-path:inset(0 -100vmax -2px -100vmax)}
  /* weniger als vier Punkte: mittig mit festem Abstand statt an die Enden gedrückt */
  html.pro body.kopf-casa .ks-mit-leiste .ks-kn-unter:not(:has(> :nth-child(4))){justify-content:center;column-gap:3.2rem}
  .ks-kn-unter::before{display:none}
  html.pro body.kopf-casa .ks-kn-unter a{font-size:.8rem!important;font-weight:300!important;letter-spacing:.14em!important;text-transform:none!important;
    padding:.15rem 0!important;white-space:nowrap}
  html.pro body.kopf-casa .ks-kn-unter a::after{display:none!important}
  html.pro body.kopf-casa .ks-kn-unter a:hover,html.pro body.kopf-casa .ks-kn-unter a[aria-current]{font-weight:500!important}
  /* feste (helle) Leiste: Fläche läuft unter der Linie in voller Breite weiter */
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{background:#f4efe8;box-shadow:0 0 0 100vmax #f4efe8,0 14px 22px -18px rgba(42,34,30,.35)}
  html.pro body.kopf-casa .kopf.fest .ks-kn-unter a{color:#6f6660!important}
  html.pro body.kopf-casa .kopf.fest .ks-kn-unter a:hover,html.pro body.kopf-casa .kopf.fest .ks-kn-unter a[aria-current]{color:var(--akzent)!important}
  /* über dem Titelbild: helle Schrift mit weichem Schatten, keine Fläche */
  html.pro body.kopf-casa .kopf:not(.fest) .ks-kn-unter a{color:rgba(255,255,255,.92)!important;text-shadow:0 1px 10px rgba(0,0,0,.55)}
  html.pro body.kopf-casa .kopf:not(.fest) .ks-kn-unter a:hover,html.pro body.kopf-casa .kopf:not(.fest) .ks-kn-unter a[aria-current]{color:#fff!important}
}
@media (min-width:1200px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{
    font-size:.7rem!important;font-weight:400!important;letter-spacing:.14em!important}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a[aria-current]{font-weight:600!important}
}
@media (min-width:1360px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{font-size:.8rem!important;letter-spacing:.2em!important}
}
@media (min-width:1200px) and (max-width:1299px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{letter-spacing:.09em!important}
}
/* Unterzeile liegt HINTER Logo-Wimpel und Knöpfen (David 03.10.: „Logo abgeschnitten“) */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter{z-index:-1!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-logo,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts{position:relative;z-index:2}
}

/* ══ 51 · Preisregeln als Reiter (David 03.10.: „viel schöner lösen“, Vorbild Alpen Tesitin) ══ */
html.pro body.kopf-casa .ks-preisblatt.neu .pb-regeln.als-reiter{display:flex!important;flex-direction:column;gap:0;overflow:visible!important;
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1.6rem,3vw,2.8rem)!important;background:rgba(255,252,247,.55)!important;border-radius:28px;scroll-snap-type:none}
.pb-reiter{position:relative;display:flex;flex-wrap:wrap;gap:clamp(1.2rem,2.6vw,2.6rem);border-bottom:1px solid rgba(42,34,30,.16);margin-bottom:clamp(1rem,1.8vw,1.5rem)}
.pb-reiter button{appearance:none;background:none;border:0;padding:0 0 .85rem;cursor:pointer;font-family:var(--display);font-size:clamp(1.15rem,.9rem + .7vw,1.6rem);
  color:rgba(42,34,30,.45);letter-spacing:.005em;transition:color .35s ease}
.pb-reiter button:hover{color:rgba(42,34,30,.75)}
.pb-reiter button[aria-selected="true"]{color:var(--tinte,#2a221e)}
.pb-reiter button:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:4px}
.pb-reiter-strich{position:absolute;left:0;bottom:-1px;height:2px;background:var(--akzent,#7e2f36);border-radius:2px;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1),width .5s cubic-bezier(.22,1,.36,1)}
.pb-stapel{display:grid}
.pb-regeln.als-reiter .pb-block{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .35s;
  background:none!important;padding:0!important;border-radius:0!important;flex:none!important}
.pb-regeln.als-reiter .pb-block.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .08s,transform .7s cubic-bezier(.34,1.56,.64,1) .08s,visibility 0s}
.pb-regeln.als-reiter .pb-block > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pb-regeln.als-reiter .pb-zeilen div{padding:.82rem 0!important;align-items:baseline}
.pb-regeln.als-reiter .pb-zeilen dt{font-size:.98rem}
.pb-regeln.als-reiter .pb-zeilen dd{font-size:1.28rem;white-space:nowrap}
.pb-regeln.als-reiter .pb-notiz{margin-top:1rem!important;font-size:.84rem!important;max-width:46em;color:var(--text-leise,#554b44)}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-preisblatt.neu .pb-regeln.als-reiter{padding:1.3rem 1.2rem!important;border-radius:22px}
  .pb-reiter{gap:1.1rem}
  .pb-reiter button{font-size:1.05rem;padding-bottom:.7rem}
  .pb-regeln.als-reiter .pb-zeilen dt{font-size:.9rem}
  .pb-regeln.als-reiter .pb-zeilen dd{font-size:1.1rem;white-space:normal;text-align:right}
}
/* Dunkles Anfrage-Band: Schrift hell und gut lesbar (David 03.10.: „kann man fast nicht lesen“) —
   die Regel „Fließtext dunkler auf Taupe“ (Block 45/46) darf hier nicht greifen */
html.pro body.kopf-casa .band.tief .lead,html.pro body.kopf-casa .band.tief .fliess,html.pro body.kopf-casa .band.tief p{color:rgba(247,241,233,.86)!important}
html.pro body.kopf-casa .band.tief a:not(.ks-knopf):not(.knopf){color:#f7f1e9!important;text-decoration-color:rgba(247,241,233,.45)}
html.pro body.kopf-casa .band.tief .rubrik,html.pro body.kopf-casa .band.tief .ks-rubrik{color:#d9b48f!important}
html.pro body.kopf-casa .band.tief .rubrik::before,html.pro body.kopf-casa .band.tief .rubrik svg{color:#d9b48f;border-color:#d9b48f;stroke:#d9b48f}
/* Querbild (z. B. Paar mit Wanderkarte): ganzes Motiv, nichts angeschnitten */
html.pro body.kopf-casa .ks-einzelbild.ks-quer{aspect-ratio:3 / 2;height:auto!important;max-height:none!important}
html.pro body.kopf-casa .ks-einzelbild.ks-quer img{width:100%;height:100%;object-fit:cover}
/* Preis-Reiter auf einer Zeile, Liste über die ganze Breite */
.pb-reiter{flex-wrap:nowrap;gap:clamp(1.2rem,2.2vw,2.2rem)}
.pb-reiter button{font-size:clamp(1rem,.8rem + .5vw,1.3rem);white-space:nowrap}
.pb-regeln.als-reiter .pb-zeilen{width:100%;max-width:none}
.pb-regeln.als-reiter .pb-block{width:100%}
@media (max-width:760px){.pb-reiter{gap:.9rem;overflow-x:auto;scrollbar-width:none}.pb-reiter::-webkit-scrollbar{display:none}.pb-reiter button{font-size:.95rem}}
/* Weiterlinks klar als Link: Hausfarbe + Pfeil, Linie wächst beim Überfahren */
html.pro body.kopf-casa .ks-weiterlink{color:var(--akzent,#7e2f36)!important;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
html.pro body.kopf-casa .ks-weiterlink::after{content:"→";font-size:1.1em;letter-spacing:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
html.pro body.kopf-casa .ks-weiterlink:hover::after{transform:translateX(5px)}
html.pro body.kopf-casa .band.tief .ks-weiterlink,html.pro body.kopf-casa .tief .ks-weiterlink{color:#f0d9c0!important}
.pb-regeln.als-reiter{align-items:stretch!important}
@media (max-width:860px){
  html.pro body.kopf-casa .ks-preisblatt.neu{grid-template-columns:minmax(0,1fr)!important}
  html.pro body.kopf-casa .ks-preisblatt.neu > *{min-width:0}
  .pb-reiter{min-width:0;max-width:100%}
}

/* ══ 52 · Kopf-Logo ohne weißen Wimpel (David 03.10.): freier Schriftzug in Originalfarben,
   mittig in der Leiste; über dem Titelbild mit hellem Lichthof (wie das Titelbild-Logo) ══ */
html.pro body.kopf-casa .ks-kopf-logo,html.pro body.kopf-casa .kopf.fest .ks-kopf-logo{align-self:center!important;margin:0!important;line-height:0}
html.pro body.kopf-casa .ks-kopf-logo img{height:clamp(50px,4.4vw,66px)!important;width:auto;transition:height .6s cubic-bezier(.22,1,.36,1),filter .4s ease;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 0 26px rgba(255,255,255,.3))!important}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(40px,3.2vw,48px)!important;filter:none!important}
@media (max-width:760px){
  html.pro body.kopf-casa .ks-kopf-logo img{height:44px!important}
  html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:38px!important}
}
/* über dem Titelbild: Logo rein weiß (ruhig, gut lesbar); in der hellen Leiste in Originalfarben */
html.pro body.kopf-casa .kopf:not(.fest) .ks-kopf-logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.35))!important;height:clamp(56px,4.8vw,72px)!important}
html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:clamp(44px,3.5vw,52px)!important}
@media (max-width:760px){
  html.pro body.kopf-casa .kopf:not(.fest) .ks-kopf-logo img{height:48px!important}
  html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:40px!important}
}
/* Reiter: Karte so hoch wie die gezeigte Liste (kein Leerraum unter kurzen Listen), weiches Einblenden */
.pb-regeln.als-reiter .pb-block{display:none;grid-area:auto}
.pb-regeln.als-reiter .pb-block.an{display:block;animation:pbRein .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pbRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.pro body.kopf-casa .ks-preisblatt.neu{align-items:start!important}
/* Sulden, Anreise: Karte füllt die Höhe der Textspalte */
@media (min-width:861px){
  html.pro body.kopf-casa #anreise .innen.zwei{align-items:stretch}
  html.pro body.kopf-casa #anreise .bildspalte{display:flex}
  html.pro body.kopf-casa #anreise .ks-karte{flex:1;height:auto;min-height:100%}
  html.pro body.kopf-casa #anreise .ks-karte img{height:100%;object-fit:cover}
}
@media (min-width:861px){
  html.pro body.kopf-casa #anreise .bildspalte.zw-mitte{align-self:stretch!important;margin:0!important}
  html.pro body.kopf-casa #anreise .ks-karte{aspect-ratio:auto!important;height:auto!important;max-height:none!important;display:block}
  html.pro body.kopf-casa #anreise .ks-karte img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
}
@media (min-width:861px){
  html.pro body.kopf-casa #anreise .innen.zwei > .bildspalte{align-self:stretch!important;position:relative!important;top:auto!important;display:flex;flex-direction:column}
  html.pro body.kopf-casa #anreise .ks-karte{flex:1 1 auto;min-height:min(560px,calc(100vh - 220px))}
}
.pb-reiter .pb-kurz{display:none}
@media (max-width:760px){.pb-reiter .pb-lang{display:none}.pb-reiter .pb-kurz{display:inline}.pb-reiter{justify-content:space-between}}
html.pro body.kopf-casa .ks-weiterlink:has(.ks-pfeil)::after{content:none!important}
/* Schriftzug ohne Wimpel auch im Lade-Vorhang, im Handy-Menü und in der Fußzeile — auf dunklem Grund weiß */
html.pro .auftakt-inhalt img,html.pro body.kopf-casa .ks-schub-logo img,html.pro body.kopf-casa .fuss-logo{filter:brightness(0) invert(1)!important;box-shadow:none!important;background:none!important}
html.pro body.kopf-casa .ks-schub-logo{margin-top:.6rem!important}
html.pro body.kopf-casa .ks-schub-logo img{height:clamp(64px,6vw,96px)!important}
html.pro body.kopf-casa .fuss-logo{width:auto!important;height:clamp(64px,5vw,84px)!important;max-width:none}
@media (max-width:760px){html.pro body.kopf-casa .ks-schub-logo img{height:60px!important}}
@media (max-width:760px) and (max-height:780px){html.pro body.kopf-casa .ks-schub-logo img{height:52px!important}}
/* Bildgruppe: Aufziehen per Maus wie früher, aber OHNE Zoom (David 04.10.): das Foto hat eine feste
   Größe (so breit wie das aufgezogene Feld) und liegt mittig — beim Aufziehen wird nur mehr davon sichtbar */
@media (hover:hover) and (min-width:861px){
  html.pro body.kopf-casa .bildgruppe.fest-foto figure{position:relative;overflow:hidden}
  html.pro body.kopf-casa .bildgruppe.fest-foto figure > img{position:absolute;top:0;left:50%;width:calc(var(--bgw) * .63);max-width:none;height:100%;margin-left:calc(var(--bgw) * -.315);object-fit:cover}
}
html.pro body.kopf-casa .bildgruppe .enthuellen>img{transform:none!important;transition:clip-path 1.2s cubic-bezier(.16,.84,.34,1)!important}
/* Handy/Tablet: Angebotskarten stehen untereinander — KEINE feste Höhe, sonst überlappen sie
   (David 03.10.: „alles überlappt, nur auf dem Handy“) */
@media (max-width:860px){
  html.pro body.kopf-casa .ks-ab{height:auto!important;min-height:0!important;grid-template-rows:none!important}
  html.pro body.kopf-casa .ks-ab-karte{min-height:clamp(340px,92vw,440px)}
}
/* Dunkles Band der Startseite (.ks-band.nacht): Rubrik und Text hell wie im Anfrage-Band */
html.pro body.kopf-casa .ks-band.nacht .rubrik,html.pro body.kopf-casa .ks-band.nacht .ks-rubrik{color:#d9b48f!important}
html.pro body.kopf-casa .ks-band.nacht p{color:rgba(247,241,233,.86)}
html.pro body.kopf-casa .ks-band.nacht a:not(.ks-knopf):not(.knopf){color:#f7f1e9}
/* Unterpunkte so kräftig wie die Hauptpunkte (David 04.10.: „etwas blass“) */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.fest .ks-kn-unter a{color:var(--tinte,#2a221e)!important;font-weight:400!important}
  html.pro body.kopf-casa .ks-kn-gruppe:hover .ks-kn-unter a,html.pro body.kopf-casa .ks-kn-gruppe:focus-within .ks-kn-unter a{opacity:1!important}
  html.pro body.kopf-casa .kopf.fest .ks-kn-unter a:hover,html.pro body.kopf-casa .kopf.fest .ks-kn-unter a[aria-current]{color:var(--akzent)!important;font-weight:500!important}
}

/* ══ 53 · Alle hellen Kästchen bewegen sich leicht unter der Maus (David 04.10.: „überall gleich,
   ein bisschen Bewegung wie auf der Startseite“) — gleiche Bewegung wie die Merkmal-Karten ══ */
@media (hover:hover){
  html.pro body.kopf-casa .ks-fakt,html.pro body.kopf-casa .ks-reiter-feld li,html.pro body.kopf-casa .ks-tag-station,
  html.pro body.kopf-casa .pb-karte.pb-zimmer,html.pro body.kopf-casa .ks-paket{
    transition:transform .6s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,border-color .3s ease,box-shadow .4s ease}
  html.pro body.kopf-casa .ks-fakt:hover,html.pro body.kopf-casa .ks-reiter-feld li:hover{
    transform:translateY(-4px);background:rgba(255,255,255,.9)!important;border-color:rgba(126,47,54,.22)!important;box-shadow:0 18px 34px -26px rgba(42,34,30,.55)}
  html.pro body.kopf-casa .ks-fakt:hover b,html.pro body.kopf-casa .ks-reiter-feld li:hover b{color:var(--akzent)}
  html.pro body.kopf-casa .ks-paket:hover{transform:translateY(-4px)}
  html.pro body.kopf-casa details.ks-frage > summary,html.pro body.kopf-casa .ks-fragen details > summary{transition:color .25s ease,padding-left .5s cubic-bezier(.34,1.56,.64,1)}
  html.pro body.kopf-casa .ks-fragen details > summary:hover,html.pro body.kopf-casa details.ks-frage > summary:hover{color:var(--akzent);padding-left:.35rem}
}

/* ══ 54 · Untermenü ohne Ruckeln (David 04.10.) ══
   1) keine Lücken: die Menüpunkte grenzen aneinander (Abstand als Innenpolster), unsichtbare Brücke
      zwischen Menüpunkt und Unterzeile — die Maus verlässt das Menü nie
   2) EINE ruhige Fläche hinter der Unterzeile, die dem ganzen Menü gehört (kein Neuaufbau je Punkt)
   3) Wechsel zwischen den Punkten: weiches Überblenden ohne Verschieben
   4) über dem Titelbild behält die Leiste Höhe und Logo-Größe (nur Farbe wechselt) */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{gap:0!important;padding-inline:0!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > a{padding-inline:clamp(.5rem,1.15vw,1.05rem)}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe{padding-bottom:8px;margin-bottom:-8px}
  /* Unterzeile: nur Überblenden, keine Bewegung, kein eigener Grund */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{transform:translateX(-50%)!important;clip-path:none!important;background:transparent!important;box-shadow:none!important;
    transition:opacity .22s ease,visibility 0s linear .22s!important;will-change:opacity}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{transform:translateX(-50%)!important;transition:opacity .22s ease,visibility 0s!important}
  html.pro body.kopf-casa .ks-kn-unter a,html.pro body.kopf-casa .ks-kn-gruppe:hover .ks-kn-unter a{transform:none!important;transition:color .2s ease!important;transition-delay:0s!important;opacity:1!important}
  /* Brücke nach oben, damit der Weg vom Menüpunkt zur Unterzeile nie „außerhalb“ liegt */
  html.pro body.kopf-casa .ks-kn-unter::before{content:""!important;display:block!important;position:absolute;left:-40px;right:-40px;top:-14px;height:14px;width:auto;background:none;transform:none;opacity:1}
  /* die gemeinsame Fläche: gehört dem Menü, erscheint einmal und bleibt, solange ein Punkt offen ist */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav::after{content:"";position:absolute;left:50%;top:100%;width:100vw;height:3.2rem;transform:translateX(-50%);
    background:#f4efe8;box-shadow:0 14px 22px -18px rgba(42,34,30,.35);opacity:0;visibility:hidden;pointer-events:none;z-index:-2;transition:opacity .25s ease,visibility 0s linear .25s}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav:has(.ks-kn-gruppe:hover)::after,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav:has(.ks-kn-gruppe:focus-within)::after{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
  /* über dem Titelbild: Größe bleibt, nur die Farbe wechselt */
  html.pro body.kopf-casa .kopf.fest.ks-fest-unter{padding-block:var(--ks-pad,1.4rem)!important;transition:background .3s ease,color .3s ease,box-shadow .3s ease!important}
  html.pro body.kopf-casa .kopf.fest.ks-fest-unter .ks-kopf-logo img{height:var(--ks-logo,60px)!important;transition:filter .3s ease!important}
}

/* ══ 55 · Einblenden: dezent, edel, kurz — und NICHT ans Scrollen gekoppelt (David 04.10.) ══
   Ein Abschnitt erscheint einmal, sobald er ins Bild kommt: Spalten gleiten 18 px herauf und blenden
   in 0,7 s ein, die zweite Spalte 0,1 s später. Nichts hängt mehr am Scrollstand, niemand wartet auf Text. */
/* 1) Scroll-gekoppelte Effekte aus */
html.pro body.kopf-casa .innen :is(p,li,h2,h3),html.pro body.kopf-casa .zimmer :is(p,li),
html.pro body.kopf-casa .kennzahl,html.pro body.kopf-casa .kennzahlen > *,
html.pro body.kopf-casa .reveal-bild,html.pro body.kopf-casa .reveal-bild img,
html.pro body.kopf-casa .kacheln > .kachel,html.pro body.kopf-casa .weitband{animation:none!important}
html.pro body.kopf-casa [data-szene]{opacity:1!important;transform:none!important;filter:none!important}
html.pro body.kopf-casa [data-oeffnet]{clip-path:none!important}
/* 2) Eine Einblendung je Abschnitt */
html.pro.js body.kopf-casa [data-sicht] .innen > *{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
html.pro.js body.kopf-casa [data-sicht] .innen > *:nth-child(2){transition-delay:.1s}
html.pro.js body.kopf-casa [data-sicht].ks-da .innen > *,html.pro.js:not(.ks-einblenden) body.kopf-casa [data-sicht] .innen > *{opacity:1;transform:none}
/* 3) Bestehende Einzel-Einblendungen: kürzer, kleine Staffelung */
html.pro body.kopf-casa .aufzug > span{transition-duration:.8s!important;transition-delay:min(var(--verzug,0ms),120ms)!important}
html.pro body.kopf-casa [data-auf]{transition-duration:.6s!important;transition-delay:min(var(--verzug,0ms),160ms)!important}
html.pro.js body.kopf-casa .vorhang,html.pro.js body.kopf-casa .enthuellen > img,html.pro.js body.kopf-casa .ks-aufdecken,
html.pro.js body.kopf-casa .ks-aufdecken img,html.pro.js body.kopf-casa .bildgruppe .enthuellen > img{transition-duration:.9s!important}
html.pro.js body.kopf-casa .ks-auf{transition-duration:.6s,.8s}
/* Zwei Weiterlinks nebeneinander: nur die reine Link-Zeile wird zur Flex-Zeile, nie die ganze Textspalte */
@media (min-width:761px){
  html.pro body.kopf-casa .band .innen.zwei div:has(> .ks-weiterlink + .ks-weiterlink):has(> :not(.ks-weiterlink)){display:block}
  html.pro body.kopf-casa .band .innen.zwei div:has(> :not(.ks-weiterlink)) > .ks-weiterlink + .ks-weiterlink{margin-left:1.6rem}
}

/* ══ 56 · Handy-Feinschliff (David 04.10.: „auf dem Handy darf nichts rütteln“) ══ */
@media (max-width:760px){
  /* Kopfleiste: immer gleich hoch — kein Schrumpfen beim ersten Scrollen */
  html.pro body.kopf-casa .kopf,html.pro body.kopf-casa .kopf.fest{padding-block:.5rem!important;transition:background .35s ease,color .35s ease,box-shadow .35s ease!important}
  html.pro body.kopf-casa .kopf:not(.fest) .ks-kopf-logo img,html.pro body.kopf-casa .kopf.fest .ks-kopf-logo img{height:42px!important;transition:filter .3s ease!important}
  /* Sprachwahl DE/IT/EN: größere Tippflächen */
  html.pro body.kopf-casa .kopf .ks-sprachen a,html.pro body.kopf-casa .kopf .ks-sprachen span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:40px;padding-inline:5px}
  /* Weiterlinks: mehr Tippfläche */
  html.pro body.kopf-casa .ks-weiterlink{padding-block:.55rem}
  /* kleinste Etiketten lesbar (mind. 11 px) */
  html.pro body.kopf-casa .ks-kachel-wer,html.pro body.kopf-casa .sf-marke,html.pro body.kopf-casa .ks-karte-quelle,
  html.pro body.kopf-casa .ks-fakt span,html.pro body.kopf-casa .ks-saisonlink small,html.pro body.kopf-casa .ks-ab-zeit,
  html.pro body.kopf-casa .ks-paket-fuss b,html.pro body.kopf-casa .ks-paket-titel,html.pro body.kopf-casa .kennzahl span,
  html.pro body.kopf-casa .ks-held-fakten span,html.pro body.kopf-casa .ks-held small{font-size:max(.69rem,11px)!important}
}
@media (max-width:760px){
  html.pro body.kopf-casa .kopf .ks-sprachzeile a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:40px;padding-inline:4px}
  html.pro body.kopf-casa .kopf .ks-sprachzeile{gap:0}
  html.pro body.kopf-casa .kennzahlen span,html.pro body.kopf-casa .kennzahl span{font-size:max(.69rem,11px)!important;letter-spacing:.12em}
}
@media (max-width:760px){html.pro body.kopf-casa .kennzahlen .kennzahl span{font-size:11px!important;letter-spacing:.07em!important;max-width:none}}
/* Fakten-Karten: nie breiter als ihre Spalte (lange Wörter wie „Verkehrsverbund“ auf kleinen Handys) */
.ks-fakten-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ks-fakt{min-width:0}
.ks-fakt b,.ks-fakt span{overflow-wrap:break-word;hyphens:auto}
@media (max-width:400px){html.pro body.kopf-casa .ks-fakt{padding:.9rem .85rem}html.pro body.kopf-casa .ks-fakt b{font-size:1.02rem}}
@media (max-width:760px){
  html.pro body.kopf-casa .pb-zimmerliste small,html.pro body.kopf-casa #preise small{font-size:11px!important}
  html.pro body.kopf-casa .ks-formular p a,html.pro body.kopf-casa form p a{display:inline-block;padding-block:.35rem}
}
/* Handy-Einflug dezent wie am PC: 16 px, kein Skalieren, kein Überschwingen (kein „Rütteln“) */
@media (max-width:760px){
  html.pro body .ks-flug{transform:translate3d(0,16px,0)!important;opacity:0!important;transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)!important;transition-delay:var(--flug-verzug,0ms)!important}
  html.pro body .ks-flug.ks-flug-da{transform:none!important;opacity:1!important}
  /* Abschnitts-Einblendung am Handy ebenfalls ohne Versatz der Spalten gegeneinander */
  html.pro.js body.kopf-casa [data-sicht] .innen > *{transform:translate3d(0,12px,0)}
  html.pro.js body.kopf-casa [data-sicht].ks-da .innen > *{transform:none}
}
/* Langlauf-Titelbild am Handy: Läuferin und Kirche im Bild statt angeschnittenem Arm am Rand */
@media (max-width:760px){html.pro body.kopf-casa .ks-held-bild img[src*="winter-langlauf-1"]{object-position:33% 50%!important}}
/* Handy: jeder Weiterlink in eigener Zeile (zwei nebeneinander klebten aneinander, IT Haus) */
@media (max-width:760px){
  html.pro body.kopf-casa .ks-weiterlink{display:flex!important;width:fit-content;max-width:100%;margin-left:0!important;margin-top:.5rem}
  html.pro body.kopf-casa .ks-weiterlink + .ks-weiterlink{margin-top:0}
}
/* Handy-Menü: exakt bildschirmhoch, kein Nachwippen (war 3 px zu hoch) */
@media (max-width:760px){
  html.pro body.kopf-casa .ks-schub{overscroll-behavior:contain;box-sizing:border-box;height:100dvh;max-height:100dvh}
  html.pro body.kopf-casa .ks-schub-logo{margin-top:.1rem!important}
  html.pro body.kopf-casa .ks-schub .ks-schub-links{margin-block:.35rem}
}
html.pro body.kopf-casa .ks-schub::before{inset:0!important}

/* ══ 57 · Bildkarten (Sauna, Dampfbad …): Schrift klar gegliedert (David 05.10.) ══
   Titel immer einzeilig und auf gleicher Höhe, darunter eine kurze Linie in Hausfarbe,
   dann der Text kleiner, ruhiger und sauber getrennt (keine zerrissenen langen Wörter). */
html.pro body.kopf-casa ul.hinweise.mit-bild > li{font-size:.86rem;line-height:1.55;color:var(--text-leise,#554b44);hyphens:auto;text-wrap:pretty;padding-bottom:calc(var(--pd) + .2rem)}
html.pro body.kopf-casa ul.hinweise.mit-bild > li img{margin-bottom:1.25rem}
html.pro body.kopf-casa ul.hinweise.mit-bild > li b{font-size:clamp(1.02rem,.9rem + .32vw,1.16rem);line-height:1.2;letter-spacing:.005em;color:var(--tinte,#2a221e);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;hyphens:none}
html.pro body.kopf-casa ul.hinweise.mit-bild > li b::after{content:"";display:block;width:26px;height:1px;margin:.7rem 0 .75rem;background:var(--akzent,#7e2f36);opacity:.7;
  transition:width .5s cubic-bezier(.34,1.56,.64,1)}
html.pro body.kopf-casa ul.hinweise.mit-bild > li:hover b::after{width:44px}
@media (max-width:760px){html.pro body.kopf-casa ul.hinweise.mit-bild > li b{font-size:1.08rem}html.pro body.kopf-casa ul.hinweise.mit-bild > li{font-size:.88rem}}
/* Titel nie abschneiden: zweizeilig erlaubt, alle Titel enden auf derselben Höhe (Linie und Text fluchten) */
html.pro body.kopf-casa ul.hinweise.mit-bild > li{hyphens:manual}
html.pro body.kopf-casa ul.hinweise.mit-bild > li b{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
@media (min-width:761px){
  html.pro body.kopf-casa ul.hinweise.mit-bild > li b{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(2.4em + 1.45rem + 1px)}
  html.pro body.kopf-casa ul.hinweise.mit-bild > li img{margin-bottom:.7rem}
}
/* Fakten-Karten: Wörter nie mit Trennstrich zerreißen („Bu-chung“) — ganze Wörter in die nächste Zeile;
   nur ein einzelnes überlanges Wort darf umbrechen */
.ks-fakt b,.ks-fakt span{hyphens:manual!important;overflow-wrap:break-word;word-break:normal;text-wrap:balance}
html.pro body.kopf-casa .ks-fakt b{font-size:clamp(1.05rem,.9rem + .45vw,1.4rem)}

/* ══ 58 · Kleine Angebotskarten: Datum sitzt frei oben links, Inhalt kompakt darunter (David 05.10.:
   „Datum oben abgeschnitten“) ══ */
@media (min-width:861px){
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child){padding:1.1rem 1.4rem 1.05rem!important}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-zeit{position:absolute!important;left:1.1rem!important;top:1rem!important;margin:0!important;padding:.36rem .75rem!important;font-size:.62rem!important}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) h3{font-size:clamp(1.3rem,1rem + .75vw,1.7rem)!important;line-height:1.1}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) p{margin-top:.25rem!important;font-size:.84rem!important;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-fuss{margin-top:.55rem!important;padding-top:.55rem!important}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-pfeil{width:38px;height:38px}
  html.pro body.kopf-casa .ks-ab-karte:not(:first-child) .ks-ab-preis{font-size:clamp(1.2rem,.95rem + .7vw,1.6rem)}
}

/* ══ 59 · Bilder ohne versetzte Linie dahinter (David 05.10.: „der Strich hinten gefällt mir nicht“):
   stattdessen ein weicher, ruhiger Schatten; unter der Maus hebt sich das Bild leicht ══ */
html.pro body.kopf-casa .ks-einzelbild,html.pro body.kopf-casa .ks-doppelbild > .vorhang,html.pro body.kopf-casa .bento figure,
html.pro body.kopf-casa .ks-faq-bild,html.pro body.kopf-casa .ks-wb-gross,html.pro body.kopf-casa .ks-wb-klein,
html.pro body.kopf-casa .reveal-bild,html.pro body.kopf-casa .haus-komposition figure,html.pro body.kopf-casa .ks-karte{
  box-shadow:0 26px 48px -30px rgba(42,34,30,.55),0 6px 16px -12px rgba(42,34,30,.28)!important;outline:0!important}
@media (hover:hover){
  html.pro body.kopf-casa .ks-einzelbild,html.pro body.kopf-casa .ks-doppelbild > .vorhang{transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1),box-shadow .5s ease!important}
  html.pro body.kopf-casa .sicht .ks-einzelbild:hover,html.pro body.kopf-casa .sicht .ks-doppelbild > .vorhang:hover{transform:translateY(-4px);
    box-shadow:0 34px 56px -30px rgba(42,34,30,.6),0 8px 18px -12px rgba(42,34,30,.3)!important}
}

/* Paket-Fotos: Köpfe im Bild (David 05.10.: „Kopf abgeschnitten“) — Ausschnitt je Motiv nach oben gesetzt */
html.pro body.kopf-casa .ks-paket-foto img[src*="winter-skifahrer-1"]{object-position:50% 13%!important}
html.pro body.kopf-casa .ks-paket-foto img[src*="winter-ski-paar-1"]{object-position:50% 3%!important}
html.pro body.kopf-casa .ks-paket-foto img[src*="wandern-familie-ortler-1"]{object-position:50% 30%!important}
html.pro body.kopf-casa .ks-paket.mit-foto:hover .ks-paket-foto img{transform:none}
/* Hochkant-Ausschnitt der Seilbahn: Gondel ganz im Bild */
html.pro body.kopf-casa .ks-doppelbild img[src*="winter-seilbahn-1"]{object-position:9% 50%!important}

/* ══ 60 · Köpfe und Motive ganz im Bild (David 05.10.) ══ */
html.pro body.kopf-casa img[src*="winter-ski-paar-1"]{object-position:50% 0!important}
html.pro body.kopf-casa .ks-ab-karte img[src*="winter-ski-paar-1"],html.pro body.kopf-casa .ks-kachel img[src*="winter-ski-paar-1"]{object-position:40% 0!important}
html.pro body.kopf-casa img[src*="winter-skifahrer-1"]{object-position:62% 8%!important}
html.pro body.kopf-casa .ks-faq-bild img[src*="winter-skifahrerin-1"]{object-position:50% 100%!important}
@media (max-width:760px){
  /* Titelbild Startseite: Gondel ganz im Bild */
  html.pro body.kopf-casa img[src*="hero-winter-seilbahn"],html.pro body.kopf-casa img[data-src*="hero-winter-seilbahn"]{object-position:13% 40%!important}
  /* Bildpaare: rechtes Bild sitzt etwas tiefer */
  html.pro body.kopf-casa .ks-doppelbild,html.pro body.kopf-casa .haus-komposition,html.pro body.kopf-casa .ks-wellness-bilder{padding-bottom:30px}
  html.pro body.kopf-casa .ks-doppelbild > .vorhang + .vorhang,html.pro body.kopf-casa .haus-komposition > figure + figure,
  html.pro body.kopf-casa .ks-wellness-bilder > figure + figure{translate:0 30px;margin-top:0!important}
}

/* ══ 61 · Handy-Menü zum Aufklappen (David 05.10., Vorbild Alpen Tesitin): Hauptpunkte untereinander,
   Unterseiten erscheinen erst nach dem Antippen. Ohne JS bleiben alle Unterpunkte sichtbar. ══ */
.ks-schub.ks-akk .ks-schub-links{display:block;width:min(100%,340px);margin-inline:auto}
.ks-schub.ks-akk .ks-schub-links > li{border-bottom:1px solid rgba(244,236,224,.16)}
.ks-schub.ks-akk .ks-schub-links > li:first-child{border-top:1px solid rgba(244,236,224,.16)}
.ks-schub.ks-akk .ks-schub-links > li > a{display:flex!important;align-items:baseline;justify-content:flex-start;gap:.9rem;width:100%;padding:.72rem .2rem!important;
  font-size:clamp(1.35rem,5.6vw,1.75rem)!important;letter-spacing:.06em;text-align:left;transform:none!important}
.ks-schub.ks-akk .ks-schub-links > li > a small{transform:none;min-width:1.4rem}
.ks-schub.ks-akk .ks-schub-links > li > a span{flex:1}
.ks-schub.ks-akk .ks-schub-links > li.hat-unter > a::after{content:"";flex:none;align-self:center;width:9px;height:9px;margin-right:.3rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translateY(-3px) rotate(45deg);opacity:.75;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ks-schub.ks-akk .ks-schub-links > li.offen > a{color:var(--messing)}
.ks-schub.ks-akk .ks-schub-links > li.offen > a::after{transform:translateY(2px) rotate(-135deg)}
.ks-schub.ks-akk .ks-schub-links .ks-schub-unter{display:grid!important;grid-template-rows:0fr;margin:0!important;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter{grid-template-rows:1fr}
.ks-schub.ks-akk .ks-schub-unter > div{overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:flex-start;padding-left:2.5rem}
.ks-schub.ks-akk .ks-schub-links .ks-schub-unter a{display:block!important;width:100%;padding:.5rem 0!important;font-size:.92rem!important;line-height:1.3!important;letter-spacing:.08em!important;text-transform:uppercase;
  color:rgba(244,236,224,.82)!important;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1),color .2s ease!important}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter a{opacity:1;transform:none}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter a:nth-child(2){transition-delay:.05s!important}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter a:nth-child(3){transition-delay:.1s!important}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter a:nth-child(4){transition-delay:.15s!important}
.ks-schub.ks-akk .ks-schub-links li.offen .ks-schub-unter a:nth-child(n+5){transition-delay:.2s!important}
.ks-schub.ks-akk .ks-schub-unter > div > a:last-child{margin-bottom:.6rem}
.ks-schub.ks-akk .ks-schub-unter a[aria-current],.ks-schub.ks-akk .ks-schub-unter a:active{color:#fff!important}
/* Etikett auf den Bildkacheln: immer eine kurze, schlanke Pille (David 05.10.: „weißer Balken viel zu groß“) */
html.pro body.kopf-casa .ks-kachel-wer{right:auto;max-width:calc(100% - 1.6rem);padding:.34rem .7rem .32rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;letter-spacing:.1em}
@media (max-width:760px){html.pro body.kopf-casa .ks-kachel-wer{left:.8rem;top:.8rem;font-size:10.5px!important;letter-spacing:.08em}}
/* Wander-Titelbild am Handy: Familie ganz im Bild (rechts neben dem Titel), nicht am Rand angeschnitten */
@media (max-width:760px){html.pro body.kopf-casa .ks-held-bild img[src*="wandern-familie-ortler"]{object-position:18% 50%!important}}
/* Bildpaar der Startseite am Handy: linkes Bild oben bündig, rechtes 30 px tiefer (wie alle Bildpaare) */
@media (max-width:760px){
  html.pro body.kopf-casa .haus-komposition{align-items:start}
  html.pro body.kopf-casa .haus-komposition .hk-main{margin-top:0!important;translate:0 0}
  html.pro body.kopf-casa .haus-komposition .hk-ecke{margin-top:0!important;translate:0 30px}
}
/* Aufklapp-Menü: alle Zeilen gleich breit und linksbündig, Nummer · Titel · Pfeil in einer Flucht */
.ks-schub.ks-akk .ks-schub-links{justify-items:stretch!important;text-align:left!important}
.ks-schub.ks-akk .ks-schub-links > li{display:block;width:100%}
.ks-schub.ks-akk .ks-schub-links > li > a{box-sizing:border-box;justify-content:flex-start!important;text-align:left!important}
.ks-schub.ks-akk .ks-schub-links > li > a small{flex:none;width:1.6rem;text-align:left}
.ks-schub.ks-akk .ks-schub-links > li > a span{flex:1 1 auto;text-align:left}
.ks-schub.ks-akk .ks-schub-links .ks-schub-unter{justify-content:stretch!important;justify-items:stretch}
.ks-schub.ks-akk .ks-schub-unter > div{align-items:stretch;padding-left:2.5rem;text-align:left}
.ks-schub.ks-akk .ks-schub-links .ks-schub-unter a{text-align:left!important}
@media (max-width:760px){
  /* Sulden-Panorama: nicht mehr bis an den Bildschirmrand — eingerückt wie der Text, runde Ecken, innen wischbar */
  html.pro body.kopf-casa .ks-panorama-band{padding-inline:var(--ks-rand,1.4rem)!important}
  html.pro body.kopf-casa .ks-panorama-band figure.reveal-bild{margin-inline:0!important;border-radius:20px!important;overflow-x:auto;overflow-y:hidden;height:230px;
    box-shadow:0 26px 48px -30px rgba(42,34,30,.55)!important}
  /* Bildpaar Startseite: links oben bündig, rechts 30 px tiefer */
  html.pro body.kopf-casa .haus-komposition .hk-main{transform:none!important;translate:0 0}
  html.pro body.kopf-casa .haus-komposition .hk-ecke{transform:none!important;translate:0 30px}
  /* Wander-Titelbild: Familie mittig-rechts, ganz im Bild */
  html.pro body.kopf-casa .ks-held-bild img[src*="wandern-familie-ortler"]{object-position:34% 50%!important}
}
@media (max-width:760px){
  /* Startseite: das Hauptbild steht rechts → dieses sitzt 30 px tiefer, das linke bleibt oben */
  html.pro body.kopf-casa .haus-komposition .hk-ecke{translate:0 0}
  html.pro body.kopf-casa .haus-komposition .hk-main{translate:0 30px}
  /* Wander-/Ortler-Titelbild: Familie rechts neben dem Titel, ganz im Bild */
  html.pro body.kopf-casa .ks-held-bild img[src*="wandern-familie-ortler"]{object-position:27% 50%!important}
}
@media (max-width:760px){
  /* ohne „genuss“-Variante steht das Hauptbild links → dort sitzt das kleine (rechte) Bild tiefer */
  html.pro body.kopf-casa .haus-komposition:not(.genuss-komposition) .hk-main{translate:0 0}
  html.pro body.kopf-casa .haus-komposition:not(.genuss-komposition) .hk-ecke{translate:0 30px}
}

/* ══ 62 · Kopfleiste 1:1 wie monika.it (David 05.10.): die Unterseiten haben ihren festen Platz IN der Leiste.
   Menüzeile + Linie sitzen etwas höher, darunter bleibt eine Zeile frei — dort erscheinen die Unterpunkte.
   Kein zusätzliches Feld, kein Aufklappen, die Leiste ändert ihre Höhe nie. Logo bleibt gleich groß. ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{margin-bottom:1.9rem!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav::after{display:none!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{
    top:100%!important;padding:.5rem 0 0!important;background:transparent!important;box-shadow:none!important;z-index:1!important}
  html.pro body.kopf-casa .ks-kn-unter::before{top:-10px;height:10px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{font-size:.74rem!important;letter-spacing:.12em!important;line-height:1.3!important;padding:.1rem 0!important}
  /* (Die Dauer-Anzeige der Unterzeile auf der aktuellen Seite ist seit 67 entfernt: Unterpunkte nur beim Überfahren.) */
}
@media (min-width:1200px){
  /* Logo nutzt die höhere Leiste: größer als vorher, nie kleiner */
  html.pro body.kopf-casa .kopf.ks-mit-leiste:not(.fest) .ks-kopf-logo img{height:clamp(64px,5.2vw,78px)!important;max-height:none!important;width:auto!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest .ks-kopf-logo img{height:clamp(58px,4.5vw,68px)!important;max-height:none!important;width:auto!important}
}
/* Bad-Foto (Hochformat) im Querformat-Feld: Waschbecken mit Armatur und Handtuch ganz im Bild */
html.pro body.kopf-casa img[src*="zimmer-bad-1"]{object-position:50% 88%!important}
html.pro body.kopf-casa .nk-karte{min-height:clamp(540px,calc(100vh - 250px),740px)}
@media (min-width:1000px){html.pro body.kopf-casa .nk-text > p:not(.rubrik){line-height:1.58}}

/* ══ 63 · Kopfleiste über dem Titelbild (David 06.10.) ══
   a) Überfahren eines Menüpunkts: die Leiste wird weich hell wie beim Scrollen — gleiche Höhe, gleiches Logo,
      nichts verschiebt sich; nur Fläche und Schriftfarbe blenden über.
   b) Die Unterzeile endet immer an der rechten Kante der Menülinie und wächst nach links —
      sie läuft nie unter Sprachwahl oder Knöpfe. */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste{transition:background-color .35s ease,box-shadow .35s ease,color .35s ease,padding .55s ease!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest.ks-fest-unter{padding-block:var(--ks-pad,1.4rem)!important;transition:background-color .35s ease,box-shadow .35s ease,color .35s ease!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest.ks-fest-unter .ks-kopf-logo img{height:var(--ks-logo,72px)!important;transition:filter .35s ease!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste a,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-sprachfeld-knopf{transition:color .35s ease,background-color .35s ease,border-color .35s ease}
  /* Startseite: das Logo bleibt über dem Titelbild verborgen (dort steht das große Logo im Bild) */
  html.pro body.kopf-casa.startseite .kopf.ks-fest-unter .ks-kopf-logo{transform:translateY(-110%)!important;opacity:0!important;visibility:hidden!important}
  /* b) rechtsbündig an der Menülinie */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{
    left:auto!important;right:0!important;transform:none!important;width:max-content!important;min-width:100%!important;max-width:calc(100vw - 2 * var(--ks-rand,2.2rem) - 330px);
    column-gap:clamp(1rem,1.7vw,1.7rem)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{transform:none!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{letter-spacing:.09em!important}
}

/* ══ 64 · Menüzeile auf einer Höhe mit Anfragen/Buchen (David 06.10.) ══
   Die Hauptpunkte stehen exakt auf der Mittellinie der Knöpfe. Linie und Unterzeile liegen darunter,
   in der Leiste; die Leiste ist dafür 98 px hoch (über dem Titelbild 112 px) und ändert sich nie. */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste{min-height:112px;align-items:center!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest:not(.ks-fest-unter){min-height:98px;padding-block:0!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest.ks-fest-unter{min-height:112px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-links,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-logo{align-self:center!important;margin-block:0!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{margin:7px 0 0!important;padding-bottom:6px!important;align-items:center}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe{padding-bottom:6px;margin-bottom:-6px}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{padding:.38rem 0 0!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{font-size:.72rem!important;line-height:1.25!important;padding:.08rem 0!important}
}
@media (min-width:1200px){
  /* Sommer/Winter-Schalter bleibt stehen, wenn die Leiste über dem Titelbild hell wird */
  html.pro body.kopf-casa .kopf.ks-fest-unter .ks-saison{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
    background:#e6dfd5!important;box-shadow:inset 0 0 0 1px rgba(42,34,30,.14)!important;color:var(--tinte)!important;transition:background-color .35s ease,box-shadow .35s ease,color .35s ease!important}
  html.pro body.kopf-casa .kopf.fest .ks-kn-unter a{text-shadow:none!important}
}

/* ══ 65 · Menü passt bei jeder Fensterbreite (Windows-Laptops 1366/1536 px): Schrift und Sperrung wachsen
   stufenlos mit der Breite statt in Sprüngen — nie in Logo oder Knöpfe ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{
    font-size:clamp(.66rem,.26rem + .52vw,.8rem)!important;letter-spacing:clamp(.06em,calc((100vw - 1200px) / 2600),.2em)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > a{padding-inline:clamp(.4rem,calc((100vw - 1200px) / 60 + .4rem),1.05rem)}
}
@media (min-width:1200px){
  /* ab 1440 px volle Größe wie abgenommen (.8rem, weit gesperrt); darunter stufenlos kleiner */
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{
    font-size:clamp(.7rem,calc(.2rem + .667vw),.8rem)!important;letter-spacing:clamp(1px,calc(1px + (100vw - 1200px) * .0065),2.56px)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > a{padding-inline:clamp(.4rem,calc(.4rem + (100vw - 1200px) * .042),1.03rem)}
}
@media (min-width:1200px) and (max-width:1339px){
  /* schmale Laptops: Unterzeile kompakter, damit auch fünf lange Punkte (IT „Offerte“) vor dem Logo enden */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{column-gap:clamp(.6rem,calc(.6rem + (100vw - 1200px) * .06),1.2rem)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{font-size:clamp(.62rem,calc(.62rem + (100vw - 1200px) * .012),.72rem)!important;letter-spacing:.03em!important}
}

/* ══ 66 · Niedrige Fenster am PC (Windows-Laptops: 1366 × 650, 1536 × 730): die ganze Seite wird proportional
   kleiner — Schrift, Abstände und Karten hängen an rem —, damit weiter „ein Thema = ein Bildschirm“ gilt.
   Ab 860 px Fensterhöhe volle Größe (16 px). Nur am PC, Handy und Tablet bleiben unberührt. ══ */
@media (min-width:1000px) and (max-height:859px){
  html{font-size:clamp(12px,1.86vh,16px)!important}
}
@media (min-width:1000px) and (max-height:859px){
  /* Bildkarten und Kacheln richten sich bei niedrigen Fenstern nach der Fensterhöhe statt nach festen Pixeln */
  html.pro body.kopf-casa .ks-ab{height:clamp(250px,calc(100vh - 24.5rem),640px)!important;min-height:0!important}
  html.pro body.kopf-casa .ks-kacheln{grid-auto-rows:clamp(110px,calc((100vh - 25.5rem) / 2),260px)!important}
  html.pro body.kopf-casa .nk-karte{min-height:clamp(380px,calc(100vh - 13rem),740px)!important}
  /* Kopfleiste skaliert mit */
  html.pro body.kopf-casa .kopf.ks-mit-leiste{min-height:7rem}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest:not(.ks-fest-unter){min-height:6.1rem}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest.ks-fest-unter{min-height:7rem}
}

/* ══ 67 · Kopfleiste 1:1 nach monika.it (Jannik 05.10., dritte Runde: „wirklich fast eins zu eins genau wie bei
   Monika, vom Effekt, von der Größe her“). Alle Maße sind aus Monikas Stilregeln ausgelesen, nicht geschätzt.
   Einheit --ks-e: bei Monika 10 px ab 1600 px Fensterbreite, 9 px ab 1440, darunter 8 px.
     Leiste 9e hoch · Logo 6e hoch · Menüzeile beginnt bei 1.5e · Schrift 1.7e, 2 px gesperrt, Zeilenhöhe 1.4 ·
     Abstand der Punkte 6e · darunter .5e Luft und die 1-px-Linie, die damit genau auf halber Höhe liegt ·
     Unterzeile unter der Linie in derselben Schrift ohne Großbuchstaben · Sprachwahl 1.6e, 1.1 px gesperrt.
   Effekt wie bei Monika: die Unterzeile wächst in 0,3 s von Schriftgröße 0 auf volle Größe (kein Überblenden,
     kein Schieben) und schrumpft genauso zurück. Ab 1601 px steht sie mittig mit 2em Abstand, darunter über die
     Linienbreite verteilt mit mindestens 1em.
   Lage wie bei Monika: Logo links, Sprachwahl und Knöpfe rechts, das Menü mittig im Raum DAZWISCHEN (nicht mehr
     in der Fenstermitte, Abschnitt 27) und über der Mittellinie der Knöpfe (nicht mehr auf Knopfhöhe, Abschnitt 64).
   Mit Absicht anders als Monika: Sandton statt Weiß, Hanken Grotesk in Stärke 275 und Größe 1.77e (so sind die
     Großbuchstaben 12,5 px hoch und so kräftig wie Monikas „brother-1816“ in 100 bei 1.7e; am Pixel gemessen), Anfragen/Buchen bleiben in der Leiste, über dem Titelbild bleibt die Leiste
     durchsichtig, und Unterpunkte erscheinen NUR beim Überfahren (Jannik, zweite Runde), nie dauerhaft.
   Zu lange Unterzeilen setzt seite.js über --ks-u-mass kleiner bzw. rückt sie über --ks-u-schub. ══ */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:8px;--ks-grau:#716a64;--ks-stark:300;
    grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:calc(2 * var(--ks-e))!important;
    padding-inline:calc(6 * var(--ks-e)) calc(4.5 * var(--ks-e))!important}
  /* stehende Leiste: 9e hoch, Logo 6e */
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest:not(.ks-fest-unter){min-height:calc(9 * var(--ks-e))!important;padding-block:0!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest:not(.ks-fest-unter) .ks-kopf-logo img{height:calc(6 * var(--ks-e))!important}
  /* Menü mittig im Raum zwischen Logo und Sprachwahl; die Linie ist mindestens 65 % dieses Raums breit */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-links{justify-self:stretch!important;justify-content:center!important;min-width:0}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav{flex:0 0 auto;min-width:65%;justify-content:center!important;gap:0!important;
    margin:0 0 calc(2.88 * var(--ks-e) + 1px)!important;padding:0!important;border-bottom:1px solid rgba(255,255,255,.7)}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kopfnav{border-bottom-color:var(--ks-grau)}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > a{
    padding:0 calc(3 * var(--ks-e)) calc(.5 * var(--ks-e))!important;margin-bottom:0!important}
  /* Hauptpunkte */
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav > a{
    font-size:calc(1.77 * var(--ks-e))!important;font-weight:var(--ks-stark)!important;line-height:calc(2.38 * var(--ks-e))!important;letter-spacing:2px!important;padding:0!important}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a::after{display:none!important}
  html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a[aria-current],html.pro body.kopf-casa .ks-mit-leiste .ks-kopfnav .ks-kn-gruppe.ist-hier > a{font-weight:700!important}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a,
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a[aria-current],html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe.ist-hier > a{color:var(--ks-grau)}
  /* Unterzeile: wächst aus der Linie (Schriftgröße 0 → voll in 0,3 s), immer mittig unter der Menülinie */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{
    --ks-u-gross:calc(1.77 * var(--ks-e) * var(--ks-u-mass,1));
    top:100%!important;left:50%!important;right:auto!important;transform:translateX(calc(-50% + var(--ks-u-schub,0px)))!important;
    width:max-content!important;min-width:100%!important;max-width:none!important;padding:.64em 0 0!important;
    font-size:0!important;line-height:1!important;justify-content:space-between!important;column-gap:1em!important;
    opacity:1!important;transition:font-size .3s ease-in-out,visibility 0s linear .3s!important;will-change:auto}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{
    font-size:var(--ks-u-gross)!important;transform:translateX(calc(-50% + var(--ks-u-schub,0px)))!important;
    transition:font-size .3s ease-in-out,visibility 0s!important}
  /* Bedienung leichter (Jannik 05.10., vierte Runde: „wenn man nicht ganz genau draufklickt, löst es nicht aus
     oder verschwindet wieder“). Vier Hilfen, am Aussehen ändert sich nichts:
     a) Auslösefläche der Hauptpunkte reicht bis an die Oberkante der Leiste.
     b) Um die offene Unterzeile liegt eine unsichtbare Fangfläche (seitlich 5e, nach unten bis unter die Leiste).
     c) Jeder Unterpunkt ist rundum größer anklickbar als sein Text.
     d) Geduld: Verlässt die Maus das Menü, bleibt die Unterzeile 0,45 s stehen. Streift sie auf dem Weg zur
        Unterzeile einen Nachbarpunkt, wechselt das Menü erst nach 0,16 s — schräg hinfahren geht also. */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe{padding-top:calc(1.5 * var(--ks-e))!important;margin-top:calc(-1.5 * var(--ks-e))!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter::before{content:""!important;display:block!important;position:absolute;z-index:0;
    top:-10px!important;bottom:calc(-2.2 * var(--ks-e));left:calc(-5 * var(--ks-e))!important;right:calc(-5 * var(--ks-e))!important;height:auto!important;width:auto;background:none;transform:none;opacity:1}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{position:relative;z-index:1}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a::before{content:"";position:absolute;inset:-.7em -.45em}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:hover .ks-kn-unter,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-gruppe:focus-within .ks-kn-unter{
    transition:font-size .3s ease-in-out .16s,visibility 0s linear .16s!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav:has(.ks-kn-gruppe:hover) .ks-kn-gruppe:not(:hover):not(:focus-within) .ks-kn-unter{
    transition:font-size .3s ease-in-out .16s,visibility 0s linear .46s!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav:not(.ks-messen):not(:has(.ks-kn-gruppe:hover)):not(:has(.ks-kn-gruppe:focus-within)) .ks-kn-unter{
    transition:font-size .3s ease-in-out .45s,visibility 0s linear .75s!important}
  /* nur zum Ausmessen durch seite.js: volle Größe ohne Übergang, bleibt dabei unsichtbar. Muss stärker sein als die
     Geduld-Regel darüber (deshalb dort :not(.ks-messen) und hier die Gruppe im Selektor), sonst misst das Skript
     die noch zusammengefaltete Zeile und passt nichts mehr ein. */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav.ks-messen .ks-kn-gruppe .ks-kn-unter{font-size:var(--ks-u-gross)!important;transition:none!important}
  /* weniger als vier Unterpunkte: mittig statt an die Enden der Linie gedrückt */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter:not(:has(> :nth-child(4))){justify-content:center!important;column-gap:2em!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a{font-size:1em!important;font-weight:var(--ks-stark)!important;line-height:1!important;
    letter-spacing:.1176em!important;padding:0!important;text-transform:none!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a:hover{font-weight:var(--ks-stark)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter a[aria-current]{font-weight:700!important}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter a,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter a[aria-current]{color:var(--ks-grau)!important}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter a:hover,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter a:focus-visible{color:var(--tinte)!important}
  /* rechts: Sprachwahl schlicht wie bei Monika, Knöpfe in der Einheit der Leiste */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts{gap:calc(2 * var(--ks-e))!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-sprachfeld-knopf{border-color:transparent!important;background:transparent!important;height:calc(4 * var(--ks-e))!important;
    padding:0 calc(.4 * var(--ks-e))!important;gap:calc(1 * var(--ks-e));font-size:calc(1.6 * var(--ks-e))!important;font-weight:400!important;letter-spacing:1.1px!important}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-sprachfeld-knopf{color:var(--ks-grau)}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-sprachfeld-knopf:hover,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-sprachfeld.offen .ks-sprachfeld-knopf{color:var(--tinte)}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-sprachfeld-knopf i{width:calc(.8 * var(--ks-e));height:calc(.8 * var(--ks-e));border-width:0 1px 1px 0}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf{height:calc(4 * var(--ks-e))!important;font-weight:400;
    padding-inline:calc(2.2 * var(--ks-e))!important;font-size:max(10px,calc(1.14 * var(--ks-e)))}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopf-rechts .knopf-buchen{margin-left:calc(-1.1 * var(--ks-e))}
  html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kopf-rechts .knopf:not(.knopf-buchen):not(:hover):not(:focus-visible){border-color:rgba(42,34,30,.32);color:var(--ks-grau)}
}
@media (min-width:1200px) and (max-width:1439px){
  /* schmale Fenster: sechs Punkte plus Knöpfe brauchen mehr Platz als Monikas fünf — der Abstand der Punkte wächst
     stufenlos von 4e (bei 1200 px) auf Monikas 6e (ab 1334 px), damit das Menü nie an Logo oder Sprachwahl stößt */
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > .ks-kn-gruppe,html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav > a{
    padding-inline:clamp(calc(2 * var(--ks-e)),calc(2 * var(--ks-e) + (100vw - 1200px) * .06),calc(3 * var(--ks-e)))!important}
}
@media (min-width:1440px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:9px;--ks-stark:275}}
@media (min-width:1600px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:10px}}
@media (min-width:1601px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kn-unter,html.pro body.kopf-casa .kopf.fest.ks-mit-leiste .ks-kn-unter{justify-content:center!important;column-gap:2em!important}
}

/* ══ 68 · Kopfleiste größer und besser lesbar (David 06.10.: „relativ klein und nicht gut lesbar“) ══
   Janniks Aufbau (Abschnitt 67) bleibt; nur seine drei Stellgrößen werden angehoben:
   Maßeinheit +1 px je Stufe (Leiste, Logo, Menü, Unterzeile, Knöpfe wachsen im selben Verhältnis),
   Schrift kräftiger (400 statt 300) und dunkler (fast Tinte statt Hellgrau). */
/* Stufen so gelegt, dass die längste Unterzeile (IT „Offerte“) immer mind. 13 px vor Logo und Sprachwahl endet (gemessen) */
@media (min-width:1200px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:8px;--ks-grau:#3f3732;--ks-stark:400}}
@media (min-width:1360px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:9px}}
@media (min-width:1480px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:10px}}
@media (min-width:1600px){html.pro body.kopf-casa .kopf.ks-mit-leiste{--ks-e:11px}}
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest:not(.ks-fest-unter) .ks-kopf-logo img,
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest.ks-fest-unter .ks-kopf-logo img{height:calc(7 * var(--ks-e))!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste:not(.fest) .ks-kopf-logo img{height:calc(7.6 * var(--ks-e))!important}
}

/* ══ 69 · Knopf „Handy-Ansicht“ auf der Website (Abnahme-Phase, seite.js) ══ */
.ks-handyknopf{position:fixed;left:50%;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:999px;
  background:rgba(28,23,20,.92);color:#fff!important;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.03em;text-decoration:none;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transform:translateX(-50%);transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .25s ease,opacity .3s ease,visibility 0s}
.ks-handyknopf svg{width:17px;height:17px}
.ks-handyknopf:hover{background:#000;transform:translateX(-50%) translateY(-2px)}
.ks-handyknopf.weg{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
html.ks-menue-offen .ks-handyknopf{display:none}
@media (max-width:999px),(hover:none){.ks-handyknopf{display:none}}

/* ══ 70 · Handy-Menü deckt den Bildschirm vollständig ab (David 07.10.: unten schien ein Streifen der Seite durch) ══
   Das Menü füllt exakt den Bildschirm (oben/unten/links/rechts 0, keine feste Höhe); ein 6 px breiter Rand in der
   Menüfarbe liegt außen herum, damit an keiner Kante etwas durchscheint. Der Rand zählt nicht zur Höhe — nichts wippt. */
html.pro body.kopf-casa .ks-schub{inset:0!important;height:auto!important;max-height:none!important;box-shadow:0 0 0 6px var(--fels,#2b231f)!important}
html.pro body.kopf-casa .ks-schub::before{inset:0!important}
html.ks-menue-offen .ks-schub{clip-path:inset(-8px)!important}
html:not(.ks-menue-offen) .ks-schub{box-shadow:none!important}

/* ══ 71 · Aktuelle Seite im Menü klar sichtbar (David 07.10.: „man sieht es nicht in der Stickbar“) ══
   Der Punkt der aktuellen Seite bekommt einen 2 px starken Strich genau auf der Menülinie — über dem Titelbild
   weiß, in der hellen Leiste in Hausfarbe — und in der hellen Leiste zusätzlich die Hausfarbe als Schriftfarbe. */
@media (min-width:1200px){
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a{position:relative!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe.ist-hier > a::after,
  html.pro body.kopf-casa .kopf.ks-mit-leiste .ks-kopfnav .ks-kn-gruppe > a[aria-current]::after{
    content:""!important;display:block!important;position:absolute!important;left:0!important;right:2px!important;top:auto!important;
    bottom:calc(-.5 * var(--ks-e) - 2px)!important;width:auto!important;height:3px!important;border-radius:2px;background:#fff!important;opacity:1!important;transform:none!important;
    transition:background-color .3s ease}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest .ks-kopfnav .ks-kn-gruppe.ist-hier > a::after,
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest .ks-kopfnav .ks-kn-gruppe > a[aria-current]::after{background:var(--akzent,#7e2f36)!important}
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest .ks-kopfnav .ks-kn-gruppe.ist-hier > a,
  html.pro body.kopf-casa .kopf.ks-mit-leiste.fest .ks-kopfnav .ks-kn-gruppe > a[aria-current]{color:var(--akzent,#7e2f36)!important}
}
@media (min-width:1000px) and (max-height:859px){
  /* Startseite „Ski & Wandern“ (vier Karten + zwei Links) und die Angebots-Blöcke: in niedrigen Fenstern enger gesetzt */
  html.pro body.kopf-casa #aktiv .lead{margin-top:1rem!important}
  html.pro body.kopf-casa #aktiv ul.hinweise{margin-top:1rem!important;row-gap:.5rem!important}
  html.pro body.kopf-casa #aktiv ul.hinweise > li{padding:.7rem 3rem .7rem .95rem!important;font-size:.82rem;line-height:1.45}
  html.pro body.kopf-casa #aktiv .ks-weiterlink{margin-top:.5rem!important}
  html.pro body.kopf-casa #angebot .ks-paket-liste li{padding-block:.28rem}
  html.pro body.kopf-casa #angebot .ks-paket-foto{aspect-ratio:16/5}
}

/* ══ 72 · Feinschliff nach der Sichtprüfung (07.10.) ══ */
/* Handy-Knopf: unten links in der Ecke statt mittig — dort verdeckt er keinen Text und keine Karten */
.ks-handyknopf{left:22px;bottom:20px;transform:none;padding:10px 16px 10px 13px;font-size:.76rem}
.ks-handyknopf:hover{transform:translateY(-2px)}
/* Tagesablauf (Haus): die drei Weiterlinks sauber untereinander statt aneinandergeklebt */
html.pro body.kopf-casa .ks-tag .ks-weiterlink{display:flex!important;width:fit-content;margin:.45rem 0 0!important}
html.pro body.kopf-casa .ks-tag h2 + .ks-weiterlink{margin-top:1rem!important}