/*
 * KIDS ON SKI — Gestaltung jenseits von theme.json
 *
 * Zwei Zeichen tragen die Seite, beide kommen aus der Sache selbst:
 *  1. die SCHNEEKANTE als Abschluss farbiger Bänder
 *  2. die PISTE — eine Slalom-Spur, an der die fünf Schritte des Programms hängen
 * Alles andere bleibt bewusst ruhig.
 */

/* ---------------------------------------------------------------- Grund --- */

/* Innenabstand und Rahmen zaehlen zur Breite — sonst ragen Kaesten heraus. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --kos-eck: 1.25rem;
  --kos-schatten: 0 2px 4px rgba(7, 94, 137, .06), 0 14px 40px rgba(7, 94, 137, .12);
  --kos-schatten-klein: 0 1px 2px rgba(7, 94, 137, .05), 0 6px 18px rgba(7, 94, 137, .09);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--nachtblau);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ Kopfbereich -- */

.kos-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--eis);
}

.kos-kopf .wp-block-site-logo img { height: 46px; width: auto; }

.kos-kopf .wp-block-navigation {
  font-weight: 700;
  font-size: .95rem;
}

.kos-kopf .wp-block-navigation a { text-decoration: none; }

.kos-kopf .wp-block-navigation .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
}

/* Sprachumschalter */
.kos-sprachen { display: flex; gap: .35rem; align-items: center; }

.kos-sprachen a,
.kos-sprachen span {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .3rem .55rem;
  border-radius: 999px;
  color: var(--wp--preset--color--granit);
  line-height: 1;
}

.kos-sprachen a:hover { background: var(--wp--preset--color--firn); color: var(--wp--preset--color--nachtblau); }
.kos-sprachen .ist-aktiv { background: var(--wp--preset--color--himmelblau); color: #fff; }

/* -------------------------------------------------------- Schneekante ----- */

/*
 * Wird als ::after an ein farbiges Band gehängt. Die Kante ist ein SVG als
 * Maske — so bleibt sie beim Skalieren scharf und braucht kein Bild.
 */
.kos-schneekante { position: relative; }

.kos-schneekante::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(18px, 2.2vw, 34px);
  background: var(--kos-kante-farbe, #fff);
  -webkit-mask-image: var(--kos-kante-bild);
  mask-image: var(--kos-kante-bild);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.kos-schneekante {
  --kos-kante-bild: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'><path fill='%23fff' d='M0 26 V13 q50 -10 100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 t100 0 V26 Z'/></svg>");
}

/* ------------------------------------------------------------- Bänder ----- */

/*
 * Randlose Bänder ohne Umweg über WordPress' Root-Padding-Variablen: die
 * kommen in dieser Fassung leer an. Der Inhaltsbereich ist ohnehin schon so
 * breit wie das Fenster — die Bänder dürfen ihn nur nicht wieder einengen.
 * Ihr Inhalt bleibt durch is-layout-constrained auf Lesebreite.
 */
:where(.entry-content, .wp-site-blocks, main) > .alignfull {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Kein Zwischenraum zwischen den Bändern — sie stossen aneinander. */
.wp-site-blocks > *,
.entry-content > *,
main > * { margin-block: 0; }

/*
 * Der seitliche Abstand sitzt an den Bändern selbst, nicht am Inhaltsbereich.
 * Sonst bliebe links und rechts ein weisser Streifen neben den farbigen Bändern.
 */
.kos-band,
.kos-hero,
.kos-seitenkopf,
.kos-inhalt,
.kos-fuss {
  padding-inline: var(--wp--preset--spacing--40);
}

/* Der Kopf bekommt den Abstand an den Zeilen, nicht am Ganzen — sonst kann
   die Trennlinie nicht von Rand zu Rand laufen. */
.kos-kopf__oben,
.kos-kopf__unten { padding-inline: var(--wp--preset--spacing--40); }

.kos-kopf__leiste { border-top: 1px solid var(--wp--preset--color--eis); }

.kos-band { padding-block: clamp(4rem, 8vw, 8.5rem); }
.kos-band-firn { background: var(--wp--preset--color--firn); }
.kos-band-blau { background: var(--wp--preset--color--himmelblau); color: #fff; }
.kos-band-blau :is(h1, h2, h3, h4) { color: #fff; }
.kos-band-nacht { background: var(--wp--preset--color--nachtblau); color: #fff; }
.kos-band-nacht :is(h1, h2, h3, h4) { color: #fff; }

/* ---------------------------------------------------------------- Hero ---- */

.kos-hero {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--gradient--himmel);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem);
  --kos-kante-farbe: #fff;
}

.kos-hero :is(h1, h2, h3) { color: #fff; }

.kos-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 860px) {
  .kos-hero__raster { grid-template-columns: 1fr; }
  .kos-hero__bild { order: -1; max-width: 340px; margin-inline: auto; }
}

.kos-hero__titel {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: .97;
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin: 0 0 .6rem;
}

.kos-hero__claim {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 32ch;
  margin: 0 0 1rem;
}

.kos-hero__text { font-size: 1.0625rem; max-width: 52ch; margin: 0 0 1.75rem; opacity: .95; }

/* align-items: center — sonst haengt „zum Ablauf" ueber der Mitte des Knopfes. */
.kos-hero__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.kos-hero__bild img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(7, 94, 137, .35));
}

/* Kleine Zahlenleiste unter dem Hero */
/*
 * Feste Spaltenzahl statt auto-fit: auf mittleren Breiten ergab auto-fit
 * drei Felder oben und eines allein darunter. Vier oder zwei, nie 3+1.
 */
.kos-zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  overflow: hidden;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--kos-schatten-klein);
}

.kos-zahlen__feld { background: #fff; padding: 1.25rem 1rem; text-align: center; }

@media (max-width: 900px) {
  .kos-zahlen { grid-template-columns: repeat(2, 1fr); }
}

.kos-zahlen__wert {
  display: block;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--wp--preset--color--himmelblau);
}

.kos-zahlen__wort {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--granit);
  margin-top: .4rem;
}

/*
 * Die Kennzahlen sitzen im Hero, nicht mehr als eigenes Band darunter.
 * Auf dem Blau taugen weisse Karten nicht — stattdessen eine aufgehellte
 * Flaeche mit duennen Trennlinien und weisser Schrift. Die Regeln stehen
 * mit .kos-hero davor, damit sie die Kartenregeln weiter unten schlagen,
 * ohne dass es auf die Reihenfolge in der Datei ankommt.
 */
.kos-hero .kos-zahlen {
  gap: 0;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.kos-hero .kos-zahlen__feld { background: transparent; box-shadow: none; }

.kos-hero .kos-zahlen__feld + .kos-zahlen__feld {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}

.kos-hero .kos-zahlen__wert { color: #fff; }
.kos-hero .kos-zahlen__wort { color: rgba(255, 255, 255, .88); }

/*
 * Beim Hochzaehlen wechselt die Breite der Zahl staendig. Ohne feste
 * Ziffernbreite zittert die ganze Zeile — tabular-nums haelt sie ruhig.
 */
.kos-zahlen__wert,
.kos-leistung__zahl { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Piste ---- */

/*
 * Die fünf Schritte hängen an einer Slalom-Spur. Die Spur ist der eine Ort,
 * an dem die Seite laut wird — der Rest bleibt still.
 */
/*
 * Fünf Schritte, fünf Illustrationen. Drei stehen oben nebeneinander, die
 * beiden übrigen darunter mittig — dafür läuft das Raster über sechs Spalten,
 * jede Karte belegt zwei davon.
 */
.kos-piste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.kos-schritt {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  overflow: hidden;
  box-shadow: var(--kos-schatten-klein);
}

/* Die letzte Reihe: zwei Karten, mittig unter den drei darüber. */
.kos-schritt:nth-child(4) { grid-column: 2 / span 2; }
.kos-schritt:nth-child(5) { grid-column: 4 / span 2; }

.kos-schritt__bild {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center bottom;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 1.8rem) 0;
  background: #fff;
}

.kos-schritt__text {
  position: relative;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  padding-top: 2.6rem;
}

.kos-schritt__nummer {
  position: absolute;
  top: -1.9rem;
  left: clamp(1.3rem, 2.5vw, 1.8rem);
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--wp--preset--color--himmelblau);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.8rem;
  line-height: 1;
  /* Rufing traegt viel Unterlaengen-Luft in der Zeilenbox — die Ziffer sass
     dadurch zu hoch im Kreis. Das Polster schiebt sie optisch in die Mitte
     (.4em war einen Hauch zu viel, Mikes Blick vom 18.08.). */
  padding-top: .28em;
  border: 3px solid #fff;
}

/* Der letzte Schritt ist das Ziel — rot wie eine Zielflagge. */
.kos-schritt:last-child .kos-schritt__nummer { background: var(--wp--preset--color--abendrot); }

.kos-schritt__titel {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--wp--preset--color--nachtblau);
  margin: 0 0 .5rem;
}

.kos-schritt__satz { margin: 0; font-size: 1.125rem; color: var(--wp--preset--color--fels); }

@media (max-width: 1080px) {
  .kos-piste { grid-template-columns: repeat(4, 1fr); }
  .kos-schritt,
  .kos-schritt:nth-child(4),
  .kos-schritt:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 700px) {
  .kos-piste { grid-template-columns: 1fr; }
  .kos-schritt,
  .kos-schritt:nth-child(4),
  .kos-schritt:nth-child(5) { grid-column: 1; }
  .kos-schritt__bild { height: 160px; }
}

/* ------------------------------------------------------------ Leistungen -- */

.kos-leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kos-leistung {
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  padding: 1.9rem 1.6rem;
  text-align: center;
}

.kos-leistung__zahl {
  display: block;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--wp--preset--color--himmelblau);
}

.kos-leistung__titel {
  display: block;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--wp--preset--color--nachtblau);
  margin: .55rem 0 .25rem;
  line-height: 1.15;
}

.kos-leistung__text { display: block; font-size: 1.125rem; color: var(--wp--preset--color--granit); }

/* --------------------------------------------------------------- Regionen - */

.kos-laender { display: grid; gap: clamp(2.75rem, 6vw, 4.25rem); }

.kos-land__name {
  margin-bottom: 1.5rem;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wp--preset--color--granit);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.kos-land__name::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--wp--preset--color--eis);
}

/*
 * Drei Spalten, feste Zahl statt auto-fill. Die Karten tragen jetzt ein Foto
 * — mit auto-fill wurden daraus je nach Fensterbreite fuenf schmale Bildchen.
 * Der Umbruch auf zwei und eine Spalte steht weiter unten in den Medienregeln.
 */
.kos-regionen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (max-width: 1000px) {
  .kos-regionen { grid-template-columns: repeat(2, 1fr); }
}

.kos-region {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.kos-region:hover,
.kos-region:focus-within {
  border-color: var(--wp--preset--color--himmelblau);
  transform: translateY(-3px);
  box-shadow: var(--kos-schatten);
}

.kos-region__bild {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--firn) center/cover no-repeat;
}

.kos-region__inhalt { padding: 1.35rem 1.45rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }

.kos-region__name {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--wp--preset--color--nachtblau);
  text-transform: uppercase;
  margin: 0;
}

.kos-region__land { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--granit); }

.kos-region__mehr {
  font-size: 1.125rem;
  margin-top: auto;
  padding-top: .75rem;
  font-weight: 700;
  color: var(--wp--preset--color--himmelblau);
  text-decoration: none;
}

.kos-region__mehr::after { content: " →"; }

/*
 * „Ausgebucht" als rotes Band schraeg in der oberen rechten Ecke — dieselbe
 * Machart wie der Stoerer im Aufmacher. Das Band ist breiter als die Ecke und
 * wird von der Karte beschnitten (die traegt overflow: hidden), deshalb
 * braucht es keine Ecken-Geometrie im CSS.
 */
.kos-region__voll {
  position: absolute;
  z-index: 3;
  top: 1.6rem;
  right: -3.2rem;
  width: 12rem;
  transform: rotate(45deg);
  background: var(--wp--preset--color--abendrot);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .32rem 0;
  box-shadow: 0 2px 8px rgba(28, 43, 51, .25);
  pointer-events: none;
}

/* --------------------------------------------------------------- Hotels --- */

.kos-hotels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

.kos-hotel {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  text-decoration: none;
  color: inherit;
}

.kos-hotel:hover { border-color: var(--wp--preset--color--himmelblau); }
.kos-hotel__name { font-family: var(--wp--preset--font-family--rufing); font-size: 1.1rem; color: var(--wp--preset--color--nachtblau); }
.kos-hotel__ort { font-size: 1.125rem; color: var(--wp--preset--color--granit); }

/* ------------------------------------------------------------- Sponsoren -- */

.kos-sponsoren {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.kos-sponsor {
  display: grid;
  place-items: center;
  padding: 1rem;
  min-height: 90px;
}

.kos-sponsor img {
  max-width: 100%;
  max-height: 62px;
  width: auto;
  height: auto;
  transition: transform .25s ease;
}

/* Die Logos stehen von Anfang an in ihren Farben — grau wirkten die Partner
   wie abgelaufen. Beim Zeigen wachsen sie ein wenig. */
.kos-sponsor:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------------ FAQ --- */

.kos-faq { display: grid; gap: .6rem; max-width: 820px; }

.kos-faq details {
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  padding: 0;
  overflow: hidden;
}

.kos-faq details[open] { border-color: var(--wp--preset--color--himmelblau); }

.kos-faq summary {
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--nachtblau);
  position: relative;
}

.kos-faq summary::-webkit-details-marker { display: none; }

.kos-faq summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--wp--preset--color--himmelblau);
  border-bottom: 2.5px solid var(--wp--preset--color--himmelblau);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}

.kos-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.kos-faq__antwort { padding: 0 1.25rem 1.25rem; color: var(--wp--preset--color--fels); }
.kos-faq__antwort p:first-child { margin-top: 0; }

/* ----------------------------------------------------------------- Ruf ---- */

/*
 * Der Schlussruf. Zwei Maskottchen stehen links und rechts im Bild, dazwischen
 * der Text. Beide sind reine Hintergrundbilder an ::before und ::after — so
 * bleibt das Markup unangetastet und der Block wirkt in allen vier Sprachen,
 * ohne dass vier Seiteninhalte angefasst werden muessen.
 */
.kos-ruf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 45°, von links unten nach rechts oben — dorthin, wo die Figur steht. */
  background: linear-gradient(45deg, #075E89 0%, #0B7CB4 55%, #109CE0 100%);
  color: #fff;
  border-radius: var(--kos-eck);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.25rem);
  text-align: left;
}

/* Weicher Lichtschein hinter dem Text, damit die Mitte nicht flach wirkt. */
.kos-ruf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(60% 70% at 50% 20%, rgba(255, 255, 255, .16), transparent 70%);
  pointer-events: none;
}

/* Die Figur steht rechts, der Text links davon. */
.kos-ruf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../bilder/maskottchen-gross.webp");
  background-repeat: no-repeat;
  background-position: right -1.5rem bottom -2rem;
  background-size: 20rem auto;
  pointer-events: none;
}

/*
 * Die Ueberschrift im Ruf steht immer oben an. Der zweite und dritte
 * Selektor sind noetig, weil .kos-inhalt :is(h2, h3) als Nachfahren-Regel
 * auch hier hineingreift und 5rem Abstand setzt — auf Inhaltsseiten war der
 * Block dadurch deutlich hoeher als auf der Startseite.
 */
.kos-ruf :is(h2, h3),
.kos-inhalt .kos-ruf :is(h2, h3),
.kos-inhalt .entry-content .kos-ruf :is(h2, h3) {
  color: #fff;
  margin-top: 0;
  margin-bottom: .9rem;
}
.kos-ruf p { max-width: 56ch; margin-inline: 0; opacity: .95; }

/* Der Text liegt ueber den Ebenen, nicht unter ihnen. */
.kos-ruf > * { position: relative; }

@media (min-width: 900px) {
  /*
   * Der Text bekommt gut die Haelfte der Breite. 34ch waren zu eng — auf der
   * Vision-Seite lief der Absatz als schmale Saeule herunter, waehrend rechts
   * die halbe Flaeche leer stand.
   */
  /* So hoch wie der Inhalt es braucht — die Mindesthoehe machte den
     Block zur halben Bildschirmseite. Die Figur gibt das Mass vor. */
  .kos-ruf { min-height: 15rem; padding-right: 20rem; }
  .kos-ruf :is(h2, h3, p) { max-width: 62ch; }
}

/*
 * Schmale Schirme: die Figur passt nicht mehr neben den Text und rueckt
 * zurueckgenommen dahinter.
 */
@media (max-width: 899px) {
  .kos-ruf::before {
    background-position: right -3rem bottom -2.5rem;
    background-size: 14rem auto;
    opacity: .28;
  }
}

.kos-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: .85em 1.8em;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

/*
 * Jeder Knopf traegt einen Pfeil. Der Knopf ist inline-flex mit gap, deshalb
 * wird das ::after zum eigenen Flex-Element und der Abstand stimmt ohne
 * Leerzeichen im content. Gleiche Machart wie bei .kos-weg__tat.
 */
.kos-knopf::after { content: "→"; }

.kos-knopf--gelb { background: var(--wp--preset--color--sonnengelb); color: var(--wp--preset--color--fels); }
.kos-knopf--gelb:hover { background: #E5AC00; color: var(--wp--preset--color--fels); }

.kos-knopf--blau { background: var(--wp--preset--color--himmelblau); color: #fff; }
.kos-knopf--blau:hover { background: var(--wp--preset--color--nachtblau); color: #fff; }

.kos-knopf--rand { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px currentColor; }
.kos-knopf--rand:hover { background: #fff; color: var(--wp--preset--color--nachtblau); }

.kos-knopf--rand-blau { background: transparent; color: var(--wp--preset--color--himmelblau); box-shadow: inset 0 0 0 2px currentColor; }
.kos-knopf--rand-blau:hover { background: var(--wp--preset--color--himmelblau); color: #fff; }

/* ------------------------------------------------------------- Fussbereich- */

.kos-fuss {
  background: var(--wp--preset--color--nachtblau);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem;
  font-size: 1.125rem;
}

.kos-fuss :is(h2, h3, h4) {
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--karla);
  margin: 0 0 .85rem;
}

.kos-fuss a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.kos-fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }

.kos-fuss__raster {
  display: grid;
  /* Die erste Spalte trägt den Fliesstext und bekommt doppelte Breite. */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--kos-mass);
  margin-inline: auto;
}

.kos-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

/*
 * Die drei Kanal-Symbole. Das SVG bringt nur ein viewBox mit und keine feste
 * Groesse — ohne diese Regeln zieht es sich auf die volle Spaltenbreite und
 * der Fuss wird meterhoch. Groesse steht zusaetzlich als Attribut am SVG,
 * damit die Symbole auch dann klein bleiben, wenn das CSS mal nicht greift.
 */
.kos-fuss__satz {
  max-width: 34ch;
  margin: 0 0 1.4rem;
  color: rgba(255, 255, 255, .82);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.kos-fuss__social { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }

.kos-fuss__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  transition: background-color .15s ease, color .15s ease;
}

/* Der Fuss unterstreicht sonst jeden Link — bei einem Symbol sieht das kaputt aus. */
.kos-fuss__social a:hover {
  background-color: rgba(255, 255, 255, .24);
  color: #fff;
  text-decoration: none;
}

.kos-fuss__social svg { width: 1.25rem; height: 1.25rem; display: block; flex: none; }

.kos-fuss__unten {
  max-width: var(--kos-mass);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------- Inhalt --- */

/*
 * Textseiten stehen in EINER Spalte: Ueberschrift und Absatz teilen sich
 * dieselbe Breite und dieselbe Kante. Vorher bekamen nur die Absaetze eine
 * Lesebreite und wurden zentriert — dadurch standen sie eingerueckt neben
 * den Ueberschriften.
 */
.kos-inhalt > *,
.kos-inhalt .entry-content > * { margin-inline: 0; }

/* Lesebreite nur fuer Fliesstext — Ueberschriften stehen auf derselben Kante. */
.kos-inhalt > :is(p, ul, ol),
.kos-inhalt .entry-content > :is(p, ul, ol) { max-width: 62rem; }

/*
 * Die Absaetze liegen eine Ebene tiefer, in .entry-content. Ohne den zweiten
 * Selektor greifen die Abstaende nur auf diesen einen Kasten — der Text
 * darin steht dann Zeile an Zeile ohne Luft.
 */
.kos-inhalt > * + *,
.kos-inhalt .entry-content > * + * { margin-top: 1.8rem; }

.kos-inhalt :is(h2, h3) { margin-top: 5rem; margin-bottom: 1.6rem; }
.kos-inhalt :is(h2, h3) + * { margin-top: 0; }
.kos-inhalt > :first-child,
.kos-inhalt .entry-content > :first-child { margin-top: 0; }
.kos-inhalt ul, .kos-inhalt ol { padding-left: 1.25rem; }
.kos-inhalt li + li { margin-top: .5rem; }

/*
 * WordPress zentriert in .entry-content jedes Kind per
 * „margin-left: auto !important". Dadurch stand der Fliesstext eingerückt
 * neben den Überschriften. Nur ein eigenes !important kommt dagegen an.
 */
.kos-inhalt .entry-content > *:not(.alignfull):not(.alignwide) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Der seitliche Abstand sitzt nicht mehr am Inhaltsbereich, sondern an
 * seinen Kindern: sonst bliebe links und rechts ein weisser Streifen neben
 * einem randlosen Band, das mitten im Text steht.
 */
.kos-inhalt,
.kos-inhalt .entry-content { padding-inline: 0; }

/*
 * Fester Wert statt der WordPress-Variablen: die kommt in dieser Fassung
 * leer an, und ein leerer Wert macht die ganze Angabe ungültig — die Inhalte
 * klebten dann am Rand.
 */
.kos-inhalt .entry-content > *:not(.alignfull) { padding-inline: 1.6rem; }

/* Der Ruf-Kasten schliesst einen Abschnitt ab und braucht Anlauf. */
.kos-inhalt .kos-ruf { margin-top: 4.5rem; }

/* Seitentitel-Bereich für Unterseiten */
.kos-seitenkopf {
  background: var(--wp--preset--gradient--himmel);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
  --kos-kante-farbe: #fff;
}

.kos-seitenkopf :is(h1, h2) { color: #fff; margin: 0; }

/*
 * Der Vorspann faengt links an derselben Kante an wie die Ueberschrift.
 *
 * Deshalb bekommt die Huelle KEINE eigene Breite: sie erbt vom
 * Constrained-Layout dieselbe Spaltenbreite und dieselben automatischen
 * Raender wie die <h1> darueber und steht damit exakt buendig. Eine engere
 * max-width haette sie innerhalb der Spalte zentriert, eine breitere haette
 * sie aus der Spalte herausgezogen — beides war schon da.
 * Die Lesebreite steht an den Elementen darin.
 */
.kos-seitenkopf__vorspann { text-align: left; }

/* Die Zeile unter dem Titel — gross, sie traegt die Aussage. */
.kos-seitenkopf p,
.kos-seitenkopf__claim {
  max-width: 54ch;
  margin: 1.2rem 0 0;
  margin-inline: 0;
  opacity: .95;
  font-size: 1.9rem;
  line-height: 1.35;
}

/*
 * Der Fliesstext darunter. Kleiner als die Zeile darueber, sonst stehen zwei
 * gleich laute Absaetze uebereinander und der Kopf verliert seine Ordnung.
 */
.kos-seitenkopf__text { max-width: 62ch; margin-top: 1.1rem; margin-inline: 0; }

.kos-seitenkopf__text p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
  opacity: .92;
}

.kos-seitenkopf__text p + p { margin-top: .8rem; }

/* ============================================================ Erweiterung == */



/*
 * EIN Mass fuer alles: Kopf, Baender, Inhalt und Fuss stehen auf derselben
 * Kante. Vorher hatte jedes Band seine eigene Breite — das sah versetzt aus.
 */
:root { --kos-mass: var(--wp--style--global--content-size, 1440px); }

/* ------------------------------------------------------------ Regionskopf -- */

.kos-regionskopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .kos-regionskopf { grid-template-columns: 1fr; }
  .kos-regionskopf__bild { order: -1; }
}

.kos-regionskopf__bild img {
  width: 100%;
  height: auto;
  border-radius: var(--kos-eck);
  box-shadow: var(--kos-schatten);
  display: block;
}

.kos-regionskopf__logo {
  max-height: 88px;
  width: auto;
  margin-bottom: 1.25rem;
  display: block;
}

.kos-regionskopf__land {
  margin: .4rem 0 0;
  font-size: 1.25rem;
  color: var(--wp--preset--color--granit);
}

.kos-regionskopf__name {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  line-height: 1.03;
  text-transform: uppercase;
  color: var(--wp--preset--color--nachtblau);
  margin: 0 0 .5rem;
}

.kos-regionskopf__claim {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--tiefblau);
  margin: 0 0 1rem;
}

.kos-regionskopf__beschreibung p { margin: 0 0 .9rem; }
.kos-regionskopf__beschreibung p:last-child { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------- Filter --- */

.kos-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.5rem 2.5rem;
  padding: 1.75rem;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  margin-bottom: 2.75rem;
}

.kos-filter__suche { display: grid; gap: .45rem; flex: 1 1 18rem; max-width: 24rem; }

.kos-filter__suche label,
.kos-filter__titel {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--nachtblau);
}

.kos-filter__suche input {
  font-family: inherit;
  font-size: 1.0625rem;
  padding: .7em 1em;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  background: #fff;
  width: 100%;
}

.kos-filter__suche input:focus {
  outline: none;
  border-color: var(--wp--preset--color--himmelblau);
  box-shadow: 0 0 0 4px rgba(16, 156, 224, .16);
}

.kos-filter__preis { display: grid; gap: .55rem; flex: 1 1 auto; }
.kos-filter > * { margin-block: 0; }

.kos-filter__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

.kos-filter__knopf {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  padding: .55em 1.1em;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--granit);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.kos-filter__knopf:hover { border-color: var(--wp--preset--color--himmelblau); color: var(--wp--preset--color--nachtblau); }

.kos-filter__knopf.ist-aktiv {
  background: var(--wp--preset--color--himmelblau);
  border-color: var(--wp--preset--color--himmelblau);
  color: #fff;
}

.kos-filter__zeichen { font-weight: 700; }

.kos-filter__zahl { margin: 0 0 .6rem; font-size: 1.125rem; color: var(--wp--preset--color--granit); white-space: nowrap; }

.kos-filter__leer {
  padding: 2rem;
  text-align: center;
  color: var(--wp--preset--color--granit);
  background: #fff;
  border: 2px dashed var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
}

/* -------------------------------------------------- Unterkunft in der Liste */

/* Drei Spalten wie bei den Regionen — auto-fill ergab je nach Breite vier. */
.kos-hotels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (max-width: 1000px) {
  .kos-hotels { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Der Filter setzt [hidden] auf die Karten. Ohne diese Regel gewinnt das
 * display:flex der Karte und sie bleibt trotzdem sichtbar.
 */
.kos-hotels [hidden],
.kos-regionen [hidden] { display: none !important; }

.kos-hotel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.kos-hotel:hover,
.kos-hotel:focus-within {
  border-color: var(--wp--preset--color--himmelblau);
  transform: translateY(-3px);
  box-shadow: var(--kos-schatten);
}

.kos-hotel__bild {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--firn) center/cover no-repeat;
  display: block;
}

.kos-hotel__inhalt {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.35rem 1.45rem 1.6rem;
  flex: 1;
}

.kos-hotel__art {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--granit);
}

.kos-hotel__name {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.25rem;
  line-height: 1.12;
  color: var(--wp--preset--color--nachtblau);
}

.kos-hotel__preis {
  font-weight: 700;
  color: var(--wp--preset--color--himmelblau);
  font-size: 1.0625rem;
}

/* ------------------------------------------------ Unterkunft als Einzelseite */

.kos-unterkunft--hero {
  --kos-kante-farbe: #fff;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.kos-unterkunft__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.kos-unterkunft__intro { margin-top: 1.1rem; }
.kos-unterkunft__intro .kos-unterkunft__claim { margin-top: 0; }

/* Titelbild mit dem Logo der Unterkunft in der unteren Ecke */
.kos-unterkunft__titelbild { position: relative; }

.kos-unterkunft__logo {
  position: absolute;
  right: 0;
  bottom: clamp(-1.25rem, -2vw, -.75rem);
  display: grid;
  place-items: center;
  min-width: 8.5rem;
  min-height: 5.5rem;
  padding: .9rem 1.1rem;
  background: #fff;
  /* Der weisse Rahmen darf rund sein und schweben — das Logo darin nicht. */
  border-radius: 1rem;
  box-shadow: 0 .4rem 1.4rem rgba(7, 94, 137, .18);
}

.kos-unterkunft__logo img {
  max-width: 11rem;
  max-height: 4.5rem;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.kos-unterkunft__titelbild--nurlogo { display: grid; place-items: center; min-height: 12rem; }
.kos-unterkunft__titelbild--nurlogo .kos-unterkunft__logo { position: static; }

/* Die Hauptüberschrift der Unterkunft leitet den Text ein. */
.kos-unterkunft__claim {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--wp--preset--color--tiefblau);
  text-transform: none;
  margin: 0 0 .9rem;
}

@media (max-width: 900px) {
  .kos-unterkunft__kopf { grid-template-columns: 1fr; }
  .kos-unterkunft__titelbild { order: -1; }
}

/*
 * Nur das Titelbild selbst — „> img". Als Nachfahrenauswahl traf die Regel
 * auch das Logo im weissen Feld: gleiche Spezifität, aber weiter unten in der
 * Datei, deshalb gewann sie gegen „.kos-unterkunft__logo img" und gab dem
 * Logo Rundung und Schatten zurück.
 */
.kos-unterkunft__titelbild > img {
  width: 100%;
  height: auto;
  border-radius: var(--kos-eck);
  box-shadow: var(--kos-schatten);
  display: block;
}

.kos-marken { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }

.kos-marke {
  font-size: 1.125rem;
  font-weight: 700;
  padding: .35em .9em;
  border-radius: 999px;
  background: var(--wp--preset--color--firn);
  color: var(--wp--preset--color--nachtblau);
}

.kos-marke--preis { background: var(--wp--preset--color--himmelblau); color: #fff; }
.kos-marke--voll { background: var(--wp--preset--color--abendrot); color: #fff; }

.kos-unterkunft__name {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  line-height: 1.03;
  text-transform: uppercase;
  color: var(--wp--preset--color--nachtblau);
  margin: 0 0 .3rem;
}

.kos-unterkunft__ort {
  font-size: 1.125rem;
  color: var(--wp--preset--color--granit);
  margin: 0 0 .75rem;
}

/* Art – Region: Ort, eine Zeile über dem Namen */
.kos-unterkunft__einordnung {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--tiefblau);
  margin: 0 0 .5rem;
}

.kos-unterkunft__einordnung span { color: var(--wp--preset--color--granit); margin-inline: .15em; }

.kos-unterkunft__knoepfe { margin-top: 2rem; }

.kos-unterkunft__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

/*
 * Linksbündig — nicht in der Spalte zentrieren, sonst steht der Text
 * eingerückt neben den Überschriften. Zwei Klassen im Selektor, weil
 * WordPress' Layout-Regel dieselbe Spezifität hat und später geladen wird.
 */
.kos-band .kos-unterkunft__intro,
/*
 * WordPress zentriert in einem „constrained" Bereich jedes Kind per
 * „margin-left: auto !important". Nur ein eigenes !important kommt dagegen an
 * — sonst stünde die Adresse eingerückt neben ihrer Überschrift.
 */
.kos-inhalt > :is(p, ul, ol),
.kos-inhalt .entry-content > :is(p, ul, ol) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Kontakt und Vorspann stehen auf derselben Kante wie Überschrift und
 * Bilder: der Block behält die Spaltenbreite, nur sein Text bricht früher
 * um. Eine eigene schmale Breite am Block selbst hätte ihn mitten in der
 * Spalte zentriert.
 *
 * Der Kontaktblock bleibt deshalb bewusst auf der Spaltenbreite von
 * WordPress („constrained"). Mit „max-width: none" rutschte die Adresse an
 * die linke Bandkante — rund 170 px links neben Überschrift und Bildern.
 */
.kos-band .kos-unterkunft__intro,
.kos-band .kos-sponsorseite__text { max-width: none; }

.kos-band .kos-unterkunft__kontakt {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.kos-unterkunft__kontakt p,
.kos-sponsorseite__text p { max-width: 42rem; }

.kos-unterkunft__intro p { max-width: 62rem; }
.kos-unterkunft__intro p { margin: 0 0 1rem; }

.kos-unterkunft h2 { margin: clamp(3.5rem, 6vw, 5rem) 0 1.75rem; }

/* Auch diese Abschnittsregel macht vor dem Ruf halt — 5rem Anlauf auf die
   Ueberschrift machten den Block eine Bildschirmhaelfte hoch. */
.kos-unterkunft .kos-ruf h2 { margin-top: 0; }


.kos-unterkunft__kontakt p { margin: 0 0 .5rem; }

/*
 * Die Band-Regel (h2 + :not(p) bekommt 3.2rem Abstand) ist fuer Raster nach
 * einer Ueberschrift gedacht. Die Adresse ist Fliesstext — ihr reicht der
 * Abstand, den die Ueberschrift selbst mitbringt.
 */
.kos-band > h2 + .kos-unterkunft__kontakt { margin-top: 0; }

/* Merkmale */
.kos-merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.kos-merkmal {
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  overflow: hidden;
}

.kos-merkmal__bild {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--firn) center/cover no-repeat;
}

.kos-merkmal__text { padding: 1.6rem; }
.kos-merkmal__text h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.kos-merkmal__text p { margin: 0 0 .6rem; }
.kos-merkmal__text p:last-child { margin-bottom: 0; }

/* Galerie */
.kos-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}

.kos-galerie__bild {
  display: block;
  overflow: hidden;
  border-radius: var(--kos-eck);
  line-height: 0;
}

.kos-galerie__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}

.kos-galerie__bild:hover img { transform: scale(1.04); }

/* ------------------------------------------------------- Sponsor-Einzelseite */

.kos-sponsorseite { max-width: 62rem; margin-inline: auto; }

.kos-sponsorseite__logo {
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  padding: 2rem;
  display: grid;
  place-items: center;
  margin-bottom: 2rem;
}

.kos-sponsorseite__logo img { max-height: 120px; width: auto; max-width: 100%; }
.kos-sponsorseite__text p { margin: 0 0 1rem; }

/* Sponsorenkacheln verlinken jetzt auf die Einzelseite */
.kos-sponsor {
  border: 2px solid transparent;
  border-radius: var(--kos-eck);
  transition: border-color .25s ease, background .25s ease;
}

.kos-sponsor:hover { border-color: var(--wp--preset--color--eis); background: #fff; }

/* Zahl unter dem Regionsnamen in der Übersicht */
.kos-region__zahl { font-size: 1.125rem; color: var(--wp--preset--color--granit); }

/* Die Regionswahl vor dem Formular braucht mehr Platz als das Formular selbst. */
.kos-anfrage--wahl { max-width: none; }
.kos-anfrage--wahl .inhalt { padding: clamp(1.5rem, 3vw, 2.5rem); }

/* ========================================================= Kopfbereich ==== */

/*
 * Der Kopf trennt die beiden Hauptwege: links die Anfrage, rechts der
 * Gutschein, dazwischen das Logo. Alles Weitere steht eine Zeile tiefer.
 */
/*
 * Der Kopf bleibt beim Scrollen oben. Das „sticky" muss dabei am äusseren
 * Template-Part hängen: an .kos-kopf selbst würde es nichts bewirken, weil
 * ein klebendes Element nur so lange oben bleibt, wie sein Elternteil im Bild
 * ist — und der endet mit dem Kopf.
 *
 * Sobald man scrollt, rückt der Kopf zusammen (Klasse vom kleinen Skript in
 * assets/js/kopf.js): Logo kleiner, obere Reihe schmaler. Die Navigation
 * bleibt in voller Größe erreichbar.
 */
header.wp-block-template-part:has(> .kos-kopf) {
  position: sticky;
  top: 0;
  z-index: 50;

  /*
   * Eigene Ebene für den klebenden Kopf. Ohne sie zeichnet der Browser ihn
   * beim Scrollen zusammen mit dem Rest der Seite neu: der Kopf hängt dann
   * einen Rahmen hinterher und erscheint halb abgeschnitten — das Flackern.
   */
  transform: translateZ(0);
  will-change: transform;
}

.kos-kopf {
  /*
   * Deckendes Weiss statt halbdurchsichtig mit backdrop-filter. Ein
   * Weichzeichner hinter einem klebenden Element muss bei jedem Bild neu
   * berechnet werden — genau das brachte den Kopf beim Scrollen zum Zittern.
   */
  background: #ffffff;
  border-bottom: 1px solid var(--wp--preset--color--eis);
  padding-block: .9rem 0;
}

/*
 * Das Zusammenrücken schaltet hart um, ohne Übergang: eine Animation auf
 * Polster und Bildhöhe verändert die Höhe des Kopfes über mehrere Bilder
 * hinweg, während die Seite darunter weiterläuft. Genau in diesem Moment
 * springt die Seite.
 */
.kos-kopf--klein { padding-block: .3rem 0; }
.kos-kopf--klein .kos-kopf__logo img { height: clamp(46px, 4vw, 58px); }
.kos-kopf--klein .kos-kopf__oben { padding-bottom: .3rem; }
.kos-kopf--klein .kos-weg__frage { display: none; }
.kos-kopf--klein .kos-weg { padding-block: .25rem; }
.kos-kopf--klein .kos-weg--knopf .kos-knopf { padding: .45em 1.1em; font-size: 1rem; }

/*
 * Beim Scrollen bleibt nur der obere Teil stehen: Logo und die beiden Wege.
 * Die Navigationsleiste fährt weg — sie wird beim Lesen nicht gebraucht und
 * käme sonst als zweiter Balken mit.
 */
.kos-kopf--klein .kos-kopf__leiste { display: none; }

.kos-kopf__oben {
  padding-bottom: .8rem;
  display: grid;
  /* Logo nimmt seine Breite links, der Knopf seine rechts — die Mitte fuellt. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--kos-mass);
  margin-inline: auto;
}

/*
 * Feste Spalten statt Reihenfolge: wpautop schiebt gern ein leeres <p>
 * dazwischen, das sonst eine Spalte belegen und den Knopf umbrechen würde.
 */
.kos-kopf__oben > p:empty { display: none; }
/* Marke links, Hilfe-Weg in der Mitte, der gelbe Knopf rechts. */
.kos-kopf__oben > .kos-kopf__mitte { grid-column: 1; grid-row: 1; justify-self: start; }
.kos-kopf__oben > .kos-weg--links { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.kos-kopf__oben > .kos-weg--rechts { grid-column: 3; grid-row: 1; }

.kos-kopf__logo { display: block; justify-self: center; line-height: 0; }
.kos-kopf__logo img { height: clamp(77px, 7.2vw, 115px); width: auto; }

/* Die beiden Hauptwege */
.kos-weg__link {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-decoration: none;
}

.kos-weg--rechts .kos-weg__link { align-items: flex-end; }
.kos-weg--links .kos-weg__link { align-items: center; }

.kos-weg {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem 1.3rem;
  border-radius: var(--kos-eck);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .25s ease, border-color .25s ease;
  max-width: 22rem;
}

.kos-weg--links { justify-self: center; }
.kos-weg--rechts { justify-self: end; text-align: right; }

.kos-weg:hover { background: var(--wp--preset--color--firn); border-color: var(--wp--preset--color--eis); }

.kos-weg__frage {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--wp--preset--color--nachtblau);
}

.kos-weg__tat {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--himmelblau);
}

.kos-weg__tat::after { content: " →"; }
.kos-weg--rechts .kos-weg__tat::after { content: " →"; }
.kos-weg--links .kos-weg__tat::after { content: " →"; }

/* Zweite Zeile */
.kos-kopf__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem 1.5rem;
  max-width: var(--kos-mass);
  margin-inline: auto;
  padding-block: .7rem;
}

/* Die Werkzeuge stehen rechts, egal wie viele Punkte die Navigation hat. */
.kos-kopf__werkzeuge { margin-left: auto; }

.kos-kopf__werkzeuge {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.kos-navi ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Feine Trennstriche zwischen den Punkten — der erste bekommt keinen. */
.kos-navi li + li {
  border-left: 1px solid var(--wp--preset--color--eis);
}

.kos-navi li > a { padding-inline: 1rem; }
.kos-navi li:first-child > a { padding-left: 0; }

.kos-navi a {
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--fels);
}

.kos-navi a:hover {
  color: var(--wp--preset--color--tiefblau);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
}

@media (max-width: 860px) {
  .kos-kopf__oben { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .75rem; }
  .kos-kopf__oben > .kos-weg--links { grid-column: 1; grid-row: 2; }
  .kos-kopf__oben > .kos-kopf__mitte { grid-column: 1; grid-row: 1; }
  .kos-kopf__oben > .kos-weg--rechts { grid-column: 1; grid-row: 3; }
  .kos-weg--links { justify-self: center; text-align: center; }
  /* Der Knopfblock bleibt rechts stehen, auch wenn der Kopf umbricht. */
  .kos-weg--rechts { justify-self: end; text-align: right; }
}

/* --------------------------------------------------------- Hotelsuche ---- */

.kos-hotelsuche { position: relative; }

.kos-hotelsuche input {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  padding: .55em 1em .55em 2.4em;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7480' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat .8em center / 1.05em;
}

.kos-hotelsuche input:focus {
  outline: none;
  border-color: var(--wp--preset--color--himmelblau);
  box-shadow: 0 0 0 4px rgba(16, 156, 224, .16);
}

.kos-hotelsuche__liste {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: #fff;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  box-shadow: var(--kos-schatten);
  max-height: 22rem;
  overflow-y: auto;
}

.kos-hotelsuche__liste a {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .8rem;
  border-radius: .75rem;
  text-decoration: none;
}

.kos-hotelsuche__liste a:hover,
.kos-hotelsuche__liste a:focus { background: var(--wp--preset--color--firn); outline: none; }

.kos-hotelsuche__name { font-weight: 700; color: var(--wp--preset--color--nachtblau); }
.kos-hotelsuche__ort { font-size: 1.125rem; color: var(--wp--preset--color--granit); }
.kos-hotelsuche__leer { padding: .8rem; color: var(--wp--preset--color--granit); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- Suche als Symbol ------ */

.kos-lupe {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--granit);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.kos-lupe svg { width: 1.15rem; height: 1.15rem; }

.kos-lupe:hover {
  border-color: var(--wp--preset--color--himmelblau);
  color: var(--wp--preset--color--nachtblau);
  background: var(--wp--preset--color--firn);
}

/* Overlay */
.kos-suchschicht {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 12vh, 9rem) 1.25rem 1.25rem;
  background: rgba(7, 94, 137, .55);
  backdrop-filter: blur(4px);
}

.kos-suchschicht[hidden] { display: none; }

.kos-suchschicht__kasten {
  position: relative;
  width: 100%;
  max-width: 40rem;
  background: #fff;
  border-radius: var(--kos-eck);
  box-shadow: 0 24px 60px rgba(7, 94, 137, .35);
  padding: 1.75rem;
}

.kos-suchschicht__titel {
  display: block;
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--wp--preset--color--nachtblau);
  margin-bottom: .9rem;
}

.kos-suchschicht__zu {
  position: absolute;
  top: .6rem;
  right: .8rem;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  background: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--wp--preset--color--granit);
  cursor: pointer;
  border-radius: 999px;
}

.kos-suchschicht__zu:hover { background: var(--wp--preset--color--firn); color: var(--wp--preset--color--nachtblau); }

.kos-suchschicht .kos-hotelsuche input {
  font-family: inherit;
  font-size: 1.25rem;
  width: 100%;
  padding: .7em 1em .7em 2.6em;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7480' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat .9em center / 1.15em;
}

.kos-suchschicht .kos-hotelsuche__liste {
  position: static;
  margin-top: .75rem;
  border: none;
  box-shadow: none;
  padding: 0;
  max-height: 50vh;
}

.kos-suchschicht .kos-hotelsuche__liste a { font-size: 1.0625rem; }

/* --------------------------------------------- Kopf: nur ein Knopf ------- */

/* Der Block steht rechts im Kopf — Beschriftung und Knopf ziehen mit. */
.kos-weg--knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  padding: 0;
  border: none;
  background: none;
  max-width: none;
}

.kos-weg--knopf:hover { background: none; border-color: transparent; }
.kos-weg--knopf .kos-knopf { font-size: 1.125rem; padding: .7em 1.4em; }

@media (max-width: 860px) {
  .kos-weg--knopf { align-items: flex-end; }
}

/* ============================================================== Mobil ===== */

/*
 * Bis 860 px steht der Kopf gestapelt: Logo oben, darunter die beiden Wege,
 * darunter Navigation und Werkzeuge. Alles bleibt mit dem Daumen erreichbar.
 */
@media (max-width: 860px) {
  /*
   * Ohne Weichzeichner: „backdrop-filter" macht den Kopf zum Bezugsrahmen
   * für alles Feste darin — die Menütafel wäre sonst auf seine Höhe
   * eingesperrt. Der Hintergrund ist ohnehin fast deckend.
   */
  .kos-kopf { padding-block: .7rem 0; backdrop-filter: none; background: #fff; }
  .kos-kopf__oben { padding-bottom: .7rem; gap: .9rem; }
  .kos-kopf__logo img { height: 70px; }

  /*
   * Die beiden Wege stehen auf dem Handy unten am Rand (siehe .kos-daumen) —
   * im Kopf nähmen sie den halben Bildschirm und lägen weit weg vom Daumen.
   */
  .kos-kopf__oben > .kos-weg { display: none; }

  .kos-kopf__unten {
    justify-content: flex-start;
    gap: .6rem 1rem;
    padding-block: .6rem;
  }

  /*
   * Die Navigation liegt hinter dem Burgerknopf und fährt als Tafel von
   * rechts herein. Im Fluss der Seite hat sie zu wenig Platz — dort schob
   * sie den Inhalt beiseite.
   */
  .kos-burger__huelle { display: block; order: 3; }
  .kos-burger { display: inline-flex; }

  .kos-navi {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: min(30rem, 84vw);
    padding: 9.5rem 2rem 2rem;
    background: #fff;
    overflow-y: auto;
    /*
     * Geschlossen ist die Tafel unsichtbar — sonst stünde ihr Schatten auch
     * dann am rechten Rand, wenn niemand das Menü geöffnet hat.
     */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .28s ease, visibility .28s ease;
  }

  .kos-navi.ist-offen {
    visibility: visible;
    transform: translateX(0);
    box-shadow: -1rem 0 3rem rgba(7, 94, 137, .25);
  }

  .kos-navi ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .kos-navi li + li { border-left: 0; border-top: 1px solid var(--wp--preset--color--eis); }

  .kos-navi li > a,
  .kos-navi li:first-child > a {
    display: block;
    padding: 1.4rem .2rem;
    font-size: 1.5rem;
  }

  /* Suche und Sprachen stehen links, der Burgerknopf rechts — in einer Zeile. */
  .kos-kopf__unten { flex-wrap: nowrap; }
  .kos-kopf__werkzeuge { order: 1; margin-left: 0; margin-right: auto; }

  /* Auf schmalen Schirmen genügt das Symbol; der Name steht im aria-label. */
  .kos-burger__wort { display: none; }
}

/* Der Schleier hinter der Tafel — ein Klick darauf schliesst sie. */
.kos-schleier {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(7, 94, 137, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.kos-schleier.ist-offen { opacity: 1; visibility: visible; }

/* Der Burgerknopf liegt über der Tafel, damit er zum Schliessen erreichbar bleibt. */
@media (max-width: 860px) {
  .kos-burger__huelle { position: relative; z-index: 90; }
  body.kos-navi-offen { overflow: hidden; }

  /*
   * Der Kopf klebt oben und bildet damit eine eigene Ebene. Alles darin —
   * auch die Tafel — bliebe sonst unter dem Schleier. Beim Öffnen steigt
   * der Kopf deshalb über ihn.
   */
  body.kos-navi-offen header.wp-block-template-part:has(> .kos-kopf) { z-index: 100; }
}

@media (prefers-reduced-motion: reduce) {
  .kos-navi, .kos-schleier { transition: none; }
}

@media (max-width: 640px) {
  .kos-unterkunft__logo {
    position: static;
    margin: -2rem auto 0;
    min-width: 7rem;
    min-height: 4.5rem;
  }

  .kos-unterkunft__logo img { max-width: 9rem; max-height: 3.5rem; }

  /* Karten und Raster einspaltig, damit Bilder gross genug bleiben. */
  .kos-regionen,
  .kos-hotels,
  .kos-merkmale { grid-template-columns: 1fr; }

  .kos-galerie { grid-template-columns: repeat(2, 1fr); }
  .kos-leistungen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kos-zahlen { grid-template-columns: repeat(2, 1fr); }

  /* Filter untereinander, Knöpfe umbrechend */
  .kos-filter { padding: 1.25rem; gap: 1.1rem; }
  .kos-filter__suche { max-width: none; flex-basis: 100%; }
  .kos-filter__preis { flex-basis: 100%; }
  .kos-filter__knoepfe { gap: .4rem; }
  .kos-filter__knopf { font-size: 1.0625rem; padding: .5em .9em; }

  /* Hero und Kopfbereiche etwas kompakter */
  .kos-band { padding-block: clamp(2.75rem, 9vw, 4rem); }
  .kos-hero { padding-block: 2.5rem 3.5rem; }
  .kos-hero__titel { font-size: clamp(2.1rem, 9vw, 3rem); }

  .kos-unterkunft__name,
  .kos-regionskopf__name { font-size: clamp(1.9rem, 8vw, 2.5rem); }

  .kos-unterkunft__knoepfe .kos-knopf,
  .kos-hero__knoepfe .kos-knopf { width: 100%; }

  .kos-hero__knoepfe { flex-direction: column; align-items: stretch; }

  /* Sponsorenlogos etwas kleiner, damit mehr in eine Reihe passt */
  .kos-sponsoren { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .kos-sponsor { min-height: 70px; padding: .5rem; }

  /* Overlay-Suche randlos */
  .kos-suchschicht { padding: 1rem; align-items: stretch; }
  .kos-suchschicht__kasten { padding: 1.25rem; }
  .kos-suchschicht__titel { font-size: 1.25rem; }
  .kos-suchschicht .kos-hotelsuche input { font-size: 1.0625rem; }

  /* Fussbereich untereinander */
  .kos-fuss__raster { grid-template-columns: 1fr; gap: 1.75rem; }
  .kos-fuss__unten { flex-direction: column; gap: .4rem; }
}

/* Auf kleinen Bildschirmen sind Bild und Text immer untereinander. */
@media (max-width: 900px) {
  .kos-regionskopf,
  .kos-unterkunft__kopf,
  .kos-hero__raster { grid-template-columns: 1fr; }

  .kos-regionskopf__bild,
  .kos-unterkunft__titelbild { order: -1; }
}

/* Genug Platz zum Antippen — mindestens 44 px. */
@media (pointer: coarse) {
  .kos-navi a,
  .kos-sprachen a,
  .kos-sprachen span,
  .kos-filter__knopf,
  .kos-region__mehr { min-height: 44px; display: inline-flex; align-items: center; }

  .kos-lupe { width: 44px; height: 44px; }
}

/* =========================================================== Lightbox ===== */

.kos-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 94, 137, .93);
}

.kos-lightbox[hidden] { display: none; }

.kos-lightbox__buehne {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100%;
}

.kos-lightbox__buehne img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--kos-eck);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.kos-lightbox__zu,
.kos-lightbox__pfeil {
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}

.kos-lightbox__zu:hover,
.kos-lightbox__pfeil:hover { background: rgba(255, 255, 255, .28); }

.kos-lightbox__zu {
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}

.kos-lightbox__pfeil {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 2.4rem;
  line-height: 1;
  padding-bottom: .18em;
}

.kos-lightbox.ist-einzeln .kos-lightbox__pfeil { visibility: hidden; }

.kos-lightbox__zaehler {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  font-size: 1.125rem;
  font-weight: 700;
}

.kos-galerie__bild { cursor: zoom-in; }

@media (max-width: 640px) {
  .kos-lightbox { grid-template-columns: 1fr; gap: .75rem; }
  .kos-lightbox__pfeil { position: absolute; bottom: 3.5rem; width: 3rem; height: 3rem; font-size: 2rem; }
  .kos-lightbox__pfeil--zurueck { left: 1rem; }
  .kos-lightbox__pfeil--vor { right: 1rem; }
  .kos-lightbox__buehne img { max-height: 70vh; }
}

/* ============================================================= Erklärfilm == */
/*
 * Der Film ist quadratisch (Social-Format). Er steht mittig und bekommt
 * eine eigene Startfläche, damit er erst auf Klick geladen wird.
 */
.kos-film {
  margin: 0 auto;
  max-width: 96rem;
  width: 100%;
}

.kos-film__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--wp--preset--color--nachtblau);
  box-shadow: 0 1.8rem 5rem rgba(7, 94, 137, .22);
}

.kos-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kos-film__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1.2rem;
  justify-items: center;
  border: 0;
  background: linear-gradient(180deg, rgba(7, 94, 137, .05) 0%, rgba(7, 94, 137, .5) 100%);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background .3s ease;
}

.kos-film__start:hover { background: linear-gradient(180deg, rgba(7, 94, 137, .15) 0%, rgba(7, 94, 137, .6) 100%); }
.kos-film__start:focus-visible { outline: 3px solid var(--wp--preset--color--sonnengelb); outline-offset: -6px; }
.kos-film__start[hidden] { display: none; }

.kos-film__pfeil {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--wp--preset--color--sonnengelb);
  display: grid;
  place-content: center;
  box-shadow: 0 .8rem 2rem rgba(7, 94, 137, .35);
  transition: transform .3s ease;
}

.kos-film__pfeil::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: .5rem;
  border-left: 2.1rem solid var(--wp--preset--color--fels);
  border-top: 1.3rem solid transparent;
  border-bottom: 1.3rem solid transparent;
}

.kos-film__start:hover .kos-film__pfeil { transform: scale(1.07); }

.kos-film__wort {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 2.2rem;
  letter-spacing: .02em;
  text-shadow: 0 .2rem 1rem rgba(7, 94, 137, .5);
}

.kos-film__zeile {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 1.8rem;
  color: var(--wp--preset--color--granit);
}

@media (max-width: 782px) {
  .kos-film__pfeil { width: 5.4rem; height: 5.4rem; }
  .kos-film__wort { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kos-film__start,
  .kos-film__pfeil { transition: none; }
}


/*
 * Der Trickfilm im Aufmacher — an der Stelle des Maskottchens.
 *
 * Leicht gekippt, damit er wie ein hingelegtes Foto wirkt statt wie ein
 * eingesetzter Kasten. Die Drehung schiebt die Ecken nach aussen, deshalb
 * rückt er ein Stück nach innen.
 */
.kos-hero__film {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
  background: transparent;
  transform: rotate(3deg) translateX(-1.4rem);
  box-shadow: 0 1.6rem 4rem rgba(4, 60, 90, .3);
}

@media (max-width: 782px) {
  .kos-hero__film { transform: rotate(2deg); }
}

/*
 * Wer Bewegung meidet, bekommt den Film gerade gestellt und angehalten — aber
 * er bleibt stehen und bedienbar. Ausblenden hiesse Inhalt wegnehmen; das
 * Anhalten übernimmt assets/js/hero-film.js.
 */
@media (prefers-reduced-motion: reduce) {
  .kos-hero__film { transform: none; }
}


/* ------------------------------------------------------------- Filmband -- */
/*
 * Folgt das Filmband direkt auf ein anderes Band, addieren sich zwei volle
 * Innenabstände zu einem Loch. Oben deshalb weniger — und zwischen Vorspann
 * und Film gehört umgekehrt Luft, die vorher ganz fehlte.
 */
/* Das Filmband sitzt mittig auf seiner Flaeche: gleiches Polster oben wie
   unten, insgesamt straffer als ein normales Band. */
.kos-band + .kos-band-film { padding-block: clamp(2.5rem, 5vw, 5rem); }

.kos-band-film h2 { margin-bottom: 0; }

.kos-band-film .kos-band__vorspann {
  margin: 1.2rem auto clamp(2.5rem, 5vw, 4rem);
  max-width: 72rem;
  font-size: 1.5rem;
}

/* Auf dem Handy genügt die normale Fliesstextgrösse. */
@media (max-width: 782px) {
  .kos-band-film .kos-band__vorspann { font-size: 1.125rem; }
}


/* ====================================================== Bandinnenleben === */
/*
 * Jedes Band folgt derselben Ordnung: Überschrift, gegebenenfalls ein kurzer
 * Vorspann, dann der Inhalt. Der Vorspann gehört zur Überschrift und steht
 * deshalb nah bei ihr; vor dem Inhalt kommt Luft. WordPress' eigener Abstand
 * ist für beide Fälle derselbe — deshalb hier die Unterscheidung.
 */
.kos-band > * + * { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.kos-band > :is(h2, h3) + p { margin-top: 1.1rem; }
.kos-band > p + :not(p) { margin-top: clamp(2.6rem, 4.5vw, 3.8rem); }
.kos-band > :is(h2, h3) + :not(p) { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* Karten heben sich auf weissem Grund nur durch einen feinen Schatten ab. */
.kos-leistung,
.kos-zahlen__feld { box-shadow: var(--kos-schatten-klein); }

.kos-leistung__titel { font-size: 1.2rem; }


/* Preisklasse als Sprechblase auf dem Bild der Unterkunft. */
.kos-hotel { position: relative; }

.kos-hotel__preis {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--wp--preset--color--tiefblau);
  /* Die Euro-Zeichen stehen für sich — fett wirken sie wie ein Warnhinweis. */
  font-family: var(--wp--preset--font-family--karla);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .04em;
  box-shadow: 0 .3rem 1rem rgba(7, 94, 137, .22);
}


@media (max-width: 1000px) {
  .kos-fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .kos-fuss__raster { grid-template-columns: 1fr; }
}


/* Im Aufmacher steht ein Knopf. Der zweite Weg ist ein Textlink daneben. */
/*
 * Kein Flex hier: bei Flex unterstreicht der Browser jedes Kind einzeln,
 * der Pfeil bekäme einen eigenen abgesetzten Strich.
 */
.kos-hero__link {
  display: inline;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
}

.kos-hero__link::after { content: "\00a0\2192"; }
.kos-hero__link:hover { color: var(--wp--preset--color--sonnengelb); }


/* ==================================================== Sprungmarken ======= */
/*
 * Der Kopf bleibt beim Scrollen stehen. Ohne Vorhalt landet ein Sprungziel
 * genau darunter und ist nicht zu sehen. Das Mass entspricht dem
 * zusammengerückten Kopf (Logo und die beiden Wege) plus etwas Luft.
 */
:root { --kos-sprungabstand: 12rem; }

[id] { scroll-margin-top: var(--kos-sprungabstand); }

html { scroll-behavior: smooth; }

@media (max-width: 860px) {
  :root { --kos-sprungabstand: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/*
 * Die Regionskarte zeigt oben das Logo, ruhig auf hellem Grund. Das Titelbild
 * bleibt der Regionsseite vorbehalten, wo es ganz wirken kann.
 */
.kos-region { position: relative; }

/*
 * Das Logo liegt frei im Feld: absolut positioniert, mit Innenabstand als
 * Rahmen und „margin: auto" mittig. So kann keine andere Regel die Höhe des
 * Feldes verschieben und das Logo anschneiden — vorher stand es über.
 */
.kos-region__marke {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-bottom: 1px solid var(--wp--preset--color--eis);
  overflow: hidden;
}

/* Das Titelbild fuellt das Feld. */
.kos-region__marke .kos-region__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Das Logo sitzt als weisses Schild unten links auf dem Foto. Ohne diesen
 * ruhigen Untergrund geht ein Logo mit eigener Schrift im Bild unter.
 */
.kos-region__marke .kos-region__logo {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  max-width: 11.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .75rem;
  background: #fff;
  border-radius: .7rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/*
 * Feste Hoehe, keine max-height. Mehrere Regionslogos sind SVGs, die nur ein
 * viewBox mitbringen und keine width/height (Aletsch Arena, Disentis,
 * Leukerbad, Saalfelden, Alta Badia). Bei „height: auto" fehlt dem Browser
 * dann jedes Mass und das Bild fiel auf null zusammen — das Schild stand leer
 * da. Mit fester Hoehe rechnet er die Breite aus dem viewBox aus, und alle
 * Logos stehen nebenbei gleich hoch. object-fit faengt die breiten Logos ab,
 * die an max-width stossen.
 */
.kos-region__marke .kos-region__logo img {
  display: block;
  width: auto;
  height: 2.4rem;
  /* Feste Masse, KEIN Prozent: das Schild hat selbst keine gesetzte Breite,
     eine Prozentangabe waere ein Ringschluss und der Browser loest ihn mit
     null auf — genau daran waren alle Logos 0 Pixel breit. */
  max-width: 10rem;
  object-fit: contain;
}

@media (max-width: 600px) {
  .kos-region__marke { height: 13rem; padding: 1.6rem 2rem; }
}


/* Abschlussband: eine Frage, ein Knopf. */
.kos-band-abschluss { text-align: center; }
.kos-band__knopf { margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; }

/* Steht der Film ohne Band im Fliesstext, braucht er unten Luft. */
.kos-inhalt .entry-content > .kos-film { margin-bottom: clamp(2.5rem, 5vw, 4rem); }


/* ================================================== Zeilenumbrüche ======= */
/*
 * Überschriften und kurze Vorspänne werden ausgeglichen umbrochen — sonst
 * steht am Ende gern ein einzelnes Wort allein in der letzten Zeile.
 * Im Fliesstext genügt „pretty": es verhindert dasselbe, ohne die ganze
 * Absatzbreite neu zu verteilen.
 */
:is(h1, h2, h3, h4),
.kos-seitenkopf p,
.kos-band__vorspann,
.kos-hero__claim,
.kos-schritt__titel,
.kos-leistung__titel { text-wrap: balance; }

p, li { text-wrap: pretty; }


/* Die Seite, auf der man steht, sieht aus wie ein Punkt unter dem Zeiger. */
.kos-navi a.ist-hier {
  color: var(--wp--preset--color--tiefblau);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
}

/* ============================================================== Partner === */
/*
 * Anfragelinks: eine Zeile je Region oder Unterkunft, die Adresse zum
 * Markieren und Kopieren. Partner setzen sie auf ihre eigene Website.
 */
.kos-linkliste {
  display: grid;
  gap: .6rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.kos-linkliste__kopf {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
  gap: 1.5rem;
  padding: 0 1.4rem .6rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--granit);
}

.kos-linkliste__zeile {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--eis);
  border-radius: 1rem;
}

.kos-linkliste__name { font-weight: 700; color: var(--wp--preset--color--nachtblau); }

.kos-linkliste__adresse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

.kos-linkliste__adresse input {
  flex: 1 1 22rem;
  min-width: 0;
  padding: .6rem .9rem;
  font: inherit;
  font-size: 1.5rem;
  color: var(--wp--preset--color--granit);
  background: var(--wp--preset--color--firn);
  border: 1px solid var(--wp--preset--color--eis);
  border-radius: .7rem;
}

.kos-linkliste__kopieren {
  padding: .6rem 1.2rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--wp--preset--color--himmelblau);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.kos-linkliste__kopieren:hover { background: var(--wp--preset--color--tiefblau); }
.kos-linkliste__kopieren.ist-fertig { background: var(--wp--preset--color--nachtblau); }

.kos-linkliste__seite { font-size: 1.5rem; font-weight: 700; white-space: nowrap; }

@media (max-width: 860px) {
  .kos-linkliste__kopf { display: none; }
  .kos-linkliste__zeile { grid-template-columns: 1fr; gap: .8rem; }
}

/* Werbemittel */
.kos-material {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.kos-material__stueck {
  display: grid;
  gap: .3rem;
  padding: 1.8rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--eis);
  border-radius: 1rem;
  text-decoration: none;
  box-shadow: var(--kos-schatten-klein);
}

.kos-material__stueck:hover { border-color: var(--wp--preset--color--himmelblau); }

.kos-material__art {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--granit);
}

.kos-material__titel {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.9rem;
  color: var(--wp--preset--color--nachtblau);
}

.kos-material__zeile { font-size: 1.5rem; color: var(--wp--preset--color--granit); }

.kos-material__laden {
  margin-top: .6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wp--preset--color--tiefblau);
}

.kos-material__laden::after { content: "\00a0\2193"; }


/* ---------------------------------------------------------- Burgerknopf -- */

/*
 * Der Knopf gilt nur für kleine Bildschirme. Deshalb hier keine globale
 * „display: none"-Regel: sie stünde später in der Datei als die Media Query
 * und würde sie ausschalten.
 */
@media (min-width: 861px) {
  .kos-burger__huelle { display: none; }
}

/* Gleiche Grösse wie die Lupe daneben — beides sind Werkzeuge, keine Knöpfe. */
.kos-burger {
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: none;
  border: 2px solid var(--wp--preset--color--eis);
  border-radius: 999px;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--fels);
  cursor: pointer;
}

.kos-burger__striche,
.kos-burger__striche::before,
.kos-burger__striche::after {
  display: block;
  width: 1.4rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.kos-burger__striche { position: relative; }
.kos-burger__striche::before,
.kos-burger__striche::after { content: ""; position: absolute; left: 0; }
.kos-burger__striche::before { top: -.5rem; }
.kos-burger__striche::after { top: .5rem; }

.kos-burger[aria-expanded="true"] .kos-burger__striche { background: transparent; }
.kos-burger[aria-expanded="true"] .kos-burger__striche::before { transform: translateY(.5rem) rotate(45deg); }
.kos-burger[aria-expanded="true"] .kos-burger__striche::after { transform: translateY(-.5rem) rotate(-45deg); }

/* ------------------------------------------------------- Daumenleiste ---- */
/*
 * Die beiden Hauptwege am unteren Rand — dort, wo der Daumen liegt. Nur auf
 * kleinen Bildschirmen; am Rechner stehen sie oben im Kopf.
 */
@media (min-width: 861px) {
  .kos-daumen { display: none; }
}

@media (max-width: 860px) {
  /*
   * Zwei gleich breite Flächen ohne Rand und ohne Abstand: die Leiste soll
   * so wenig Platz wie möglich nehmen und trotzdem gut zu treffen sein.
   */
  .kos-daumen {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    box-shadow: 0 -.4rem 1.6rem rgba(7, 94, 137, .18);
  }

  .kos-daumen__knopf {
    display: grid;
    place-items: center;
    min-height: 4.4rem;
    padding: .5rem .8rem;
    border-radius: 0;
    background: var(--wp--preset--color--tiefblau);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  .kos-daumen__knopf--gelb {
    background: var(--wp--preset--color--sonnengelb);
    color: var(--wp--preset--color--fels);
  }

  /* Platz schaffen, damit die Leiste den Fussbereich nicht verdeckt. */
  .kos-fuss { padding-bottom: 6.5rem; }
}


/* Lange Wörter („Halbtagesskikurse") sprengen sonst die schmalen Karten. */
.kos-leistung__titel,
.kos-schritt__titel,
.kos-zahlen__wort {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 600px) {
  .kos-leistung { padding: 1.6rem 1.2rem; }
  .kos-leistung__titel { font-size: 1.1rem; }
}

/* ============================================================= Aktuelles == */
/*
 * Die Beiträge stehen als Karten nebeneinander: Bild, Datum, Titel, ein paar
 * Zeilen Anriss. Dieselbe Form wie bei Regionen und Unterkünften — wer eine
 * Liste auf dieser Website gesehen hat, kennt sie alle.
 */
/*
 * Zwei Spalten, fest — nicht so viele, wie zufällig hineinpassen. Bei vier
 * Karten nebeneinander bleibt vom Bild und vom Anrisstext zu wenig übrig,
 * um Lust auf den Beitrag zu machen.
 */
.kos-artikel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3vw, 2.6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 700px) {
  .kos-artikel { grid-template-columns: 1fr; }
}

.kos-artikel__karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--wp--preset--color--eis);
  border-radius: var(--kos-eck);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--kos-schatten-klein);
  transition: border-color .2s ease, transform .2s ease;
}

.kos-artikel__karte:hover {
  border-color: var(--wp--preset--color--himmelblau);
  transform: translateY(-.3rem);
}

.kos-artikel__bild {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--firn) center/cover no-repeat;
}

.kos-artikel__inhalt {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1.6rem 1.8rem 1.8rem;
}

/*
 * Das Datum ist eine Beschriftung, keine Schlagzeile: kleiner als der
 * Anrisstext. Gesperrt und in Versalien bleibt es trotzdem gut lesbar.
 */
.kos-artikel__datum {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--granit);
}

.kos-artikel__titel {
  font-family: var(--wp--preset--font-family--rufing);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--wp--preset--color--nachtblau);
  text-wrap: balance;
}

/*
 * Anrisstext in normaler Grösse: 1.6rem sind hier 25,6 px — grösser als der
 * Fliesstext der Seite. Der Anriss soll die Überschrift nicht überstimmen.
 */
.kos-artikel__text {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--wp--preset--color--fels);
}

.kos-artikel__karte .kos-region__mehr { margin-top: auto; padding-top: 1rem; }

/* Einzelner Beitrag */
/* Im grossen Kopf eines Beitrags darf das Datum eine Spur grösser stehen. */
.kos-seitenkopf .kos-artikel__datum {
  display: block;
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: .6rem;
}

.kos-artikel-einzeln .kos-artikel__titelbild {
  max-width: var(--kos-mass);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-inline: 1.6rem;
}

.kos-artikel-einzeln .kos-artikel__titelbild img {
  width: 100%;
  height: auto;
  border-radius: var(--kos-eck);
}

.kos-artikel-einzeln .entry-content > :is(p, ul, ol) { max-width: 62rem; }
.kos-artikel-einzeln .entry-content img { max-width: 100%; height: auto; border-radius: 1rem; }

@media (max-width: 600px) {
  .kos-artikel { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Nachtrag 12.8.2026 — Wunschliste aus Ticket KUNDEN-202476.
   --------------------------------------------------------------- */

/* Region ohne Logo: der Name steht für sich. Titelfotos in den Karten
   machten die Übersicht unruhig — sie sind bewusst weg. */
.kos-region__marke--leer {
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(160deg, var(--wp--preset--color--eis) 0%, #fff 72%);
}

.kos-region__marke--leer > span {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--fels);
}

/* Der Ablauf auf dem Handy: eine Reihe zum Wischen. Fünf Karten
   untereinander brauchten dort einen halben Meter Bildschirm. */
@media (max-width: 700px) {
  .kos-piste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.2rem;
    -webkit-overflow-scrolling: touch;
  }

  .kos-piste > .kos-schritt,
  .kos-schritt:nth-child(4),
  .kos-schritt:nth-child(5) {
    grid-column: auto;
    scroll-snap-align: start;
  }

  .kos-schritt__bild { height: 150px; }
}

/* Beiträge als Band zum Wischen — auf der Startseite. */
.kos-artikel--band {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(26rem, 31%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem;
  -webkit-overflow-scrolling: touch;
}

.kos-artikel--band .kos-artikel__karte { scroll-snap-align: start; }

/*
 * Slider. Der Scroll-Container bleibt bestehen — Wischen und Tastatur sollen
 * weiter gehen — er bekommt nur Knoepfe und Punkte dazu. Erst wenn das Skript
 * gelaufen ist (.ist-slider), verschwindet die nackte Bildlaufleiste; ohne
 * JavaScript braucht man sie ja.
 */
.kos-slider { position: relative; }

.kos-slider.ist-slider .kos-artikel--band,
.kos-slider.ist-slider .kos-piste {
  scrollbar-width: none;
  padding-bottom: 0;
}

.kos-slider.ist-slider .kos-artikel--band::-webkit-scrollbar,
.kos-slider.ist-slider .kos-piste::-webkit-scrollbar { display: none; }

/* Ohne .ist-slider ist die Huelle nur ein Kasten ohne eigene Wirkung. */
.kos-slider__knopf[hidden] { display: none; }

.kos-slider__knopf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--tiefblau);
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 43, 51, .22);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.kos-slider__knopf:hover:not(:disabled) {
  background: var(--wp--preset--color--himmelblau);
  color: #fff;
}

/* Am Ende der Reihe ausgegraut statt weg — sonst springt das Bild. */
.kos-slider__knopf:disabled { opacity: .3; cursor: default; }

.kos-slider__knopf--zurueck { left: -1.5rem; }
.kos-slider__knopf--vor { right: -1.5rem; }

/* Auf schmalen Schirmen liegen die Knoepfe sonst ausserhalb des Bildes. */
@media (max-width: 1100px) {
  .kos-slider__knopf--zurueck { left: .4rem; }
  .kos-slider__knopf--vor { right: .4rem; }
}

@media (max-width: 700px) {
  .kos-artikel--band { grid-template-columns: none; grid-auto-columns: 82%; }
}

/* Störer im Aufmacher: als Band über die obere rechte Ecke. Die Begrenzung
   auf 200 Kinder je Region ist das Argument zu handeln — im Rot des Logos,
   damit sie aus dem blauen Aufmacher heraussticht. */
.kos-hero__stoerer {
  position: absolute;
  top: 7rem;
  right: -8rem;
  z-index: 4;
  width: 34rem;
  margin: 0;
  padding: .42rem 0;
  transform: rotate(45deg);
  background: var(--wp--preset--color--abendrot);
  color: #fff;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .2);
}

@media (max-width: 1080px) {
  .kos-hero__stoerer { top: 6.2rem; right: -7.8rem; width: 30rem; font-size: .78rem; }
}

/* Auf dem Handy steht der Aufmacher einspaltig — dort würde das Band den
   Titel überdecken. Es wird wieder zur Zeile über den Knöpfen. */
@media (max-width: 860px) {
  /*
   * Auf dem Handy ist das ein Hinweis, kein Knopf. Runde Pillen mit viel
   * Innenabstand liest man als Schaltflaeche und klickt darauf ins Leere —
   * deshalb eckiges Label, kleiner, in Versalien.
   */
  .kos-hero__stoerer {
    position: static;
    display: inline-block;
    width: auto;
    margin: 1.5rem 0 0;
    padding: .32rem .7rem;
    transform: none;
    border-radius: .3rem;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Luft zwischen Hinweis und Knopfreihe. */
  .kos-hero__stoerer + .kos-hero__knoepfe { margin-top: 1.1rem; }
}

/* Vorspann einer Uebersicht: eine Zeile, die den Ton setzt. */
.kos-vorspann {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--wp--preset--color--nachtblau);
}

/* Der Film im Aufmacher kommt jetzt aus dem echten Dreh und steht hochkant.
   Ohne Deckel würde er den Aufmacher auf die doppelte Höhe ziehen — deshalb
   begrenzt die Höhe ihn, die Breite folgt dem Seitenverhältnis. */
.kos-hero__film {
  max-height: min(60vh, 30rem);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .kos-hero__film { max-height: 24rem; }
}

/* Die beiden Wege unter der Regionsbeschreibung: Knopf plus stiller Link. */
.kos-regionskopf__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.75rem;
}

/* Hinweis anstelle des Knopfes, wenn ausgebucht ist. Das rote Label traegt
   die Seite schon oben — hier steht nur der Satz und der Rueckweg. */
.kos-voll-hinweis { margin-top: 1.75rem; max-width: 52ch; }
.kos-voll-hinweis__weg { margin-top: 1.1rem; }

/* Ein Knopf, der zurueck fuehrt, zeigt nach links. */
.kos-knopf--zurueck::after { content: none; }
.kos-knopf--zurueck::before { content: "←"; }

/* Ausgebuchte Region in der Wahl: Karte bleibt sichtbar, aber stumm. */
.kos-region--voll { cursor: default; }
.kos-region--voll:hover { border-color: var(--wp--preset--color--eis); transform: none; box-shadow: none; }
.kos-region--voll .kos-region__foto { filter: grayscale(.5); opacity: .75; }

/*
 * Das Band braucht am Regionskopf denselben Rahmen wie in den Karten:
 * einen positionierten, beschneidenden Kasten mit den runden Ecken des Bildes.
 */
.kos-regionskopf__bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--kos-eck);
}


/* ---------------------------------------------- Bildergalerie der Region --- */

/*
 * Die Regionsgalerie ist eine Reihe zum Wischen, kein Raster. Das
 * Slider-Skript legt Pfeile und Punkte darueber; jedes Bild oeffnet in der
 * Lightbox. Die Grundklasse .kos-galerie bringt das Raster mit — hier wird
 * es zur Spur umgebaut.
 */
.kos-galerie--band {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(24rem, 30vw);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem;
  /* Erste und letzte Kachel halten Abstand zum Fensterrand, ohne dass die
     Spur selbst schmaler wird. */
  padding-inline: var(--wp--preset--spacing--40);
  scroll-padding-inline: var(--wp--preset--spacing--40);
  -webkit-overflow-scrolling: touch;
}

/*
 * Die Galerie laeuft ueber die volle Fensterbreite. Der Slider-Wrapper ist
 * ein direktes Kind der Constrained-Gruppe und wuerde sonst auf die
 * Inhaltsspalte begrenzt — der 50%-minus-50vw-Griff bricht ihn mittig aus.
 */
/*
 * Kein 100vw fuer die volle Breite: das rechnet den senkrechten Scrollbalken
 * mit und erzeugt einen waagerechten. Stattdessen verliert das alignfull-Band
 * sein Seitenpolster (den Randabstand uebernimmt die Spur selbst), und die
 * Kinder duerfen die volle Bandbreite fuellen.
 */
.kos-band-galerie { padding-inline: 0 !important; }

.kos-band-galerie .kos-slider,
.kos-band-galerie > .kos-galerie--band {
  width: auto;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Bei voller Breite gehoeren die Pfeile nach innen, nicht in den Anschnitt. */
.kos-band-galerie .kos-slider__knopf--zurueck { left: 1.25rem; }
.kos-band-galerie .kos-slider__knopf--vor { right: 1.25rem; }

.kos-galerie--band .kos-galerie__bild { scroll-snap-align: start; }

.kos-galerie--band .kos-galerie__bild img {
  width: 100%;
  height: clamp(16rem, 26vw, 24rem);
  object-fit: cover;
  border-radius: var(--kos-eck);
  display: block;
}

.kos-slider.ist-slider .kos-galerie--band {
  scrollbar-width: none;
  padding-bottom: 0;
}

.kos-slider.ist-slider .kos-galerie--band::-webkit-scrollbar { display: none; }

/* Regionen ohne Galerie: das Band faellt zusammen statt leer zu stehen. */
.kos-band-galerie { padding-block: 0 clamp(2rem, 4vw, 3.5rem); }
.kos-band-galerie:not(:has(.kos-galerie)) { display: none; }

/* Unter den News ist nur der halbe Abstand noetig — das Band und der
   folgende Ruf teilen sich die Luecke, beide Seiten werden halbiert. */
.kos-band:has(.kos-artikel--band) { padding-bottom: clamp(2rem, 4vw, 4.25rem); }
.kos-band:has(.kos-artikel--band) + .kos-band { padding-top: clamp(2rem, 4vw, 4.25rem); }

/* Der Vorspann rueckt naeher an die Galerie, wenn eine folgt. */
.kos-band-schmal:has(+ .kos-band-galerie) { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* Der stille Textlink zur Hotel-Liste unter dem Knopf. */
.kos-regionskopf__liste { margin-top: 1rem; }

.kos-regionskopf__liste a {
  font-size: var(--wp--preset--font-size--klein, 0.9rem);
  font-weight: 700;
  color: var(--wp--preset--color--himmelblau);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kos-regionskopf__liste a::after { content: " \2193"; text-decoration: none; }

/* Sprungziel mit Luft, damit die Liste nicht unter der Oberkante klebt. */
.kos-anker { scroll-margin-top: 6rem; }

@media (max-width: 700px) {
  .kos-galerie--band { grid-auto-columns: 82%; }
  .kos-galerie--band .kos-galerie__bild img { height: 14rem; }
}