/* ═══════════════════════════════════════════════════════════
   Strandcamping Wallnau — die Buchungsstrecke im Hausdesign

   Diese Datei gehört **nicht** zu unserer Website. Sie wird im
   Buchungssystem hinterlegt (campbuchung.de, Betriebsnummer 10206)
   und liegt hier nur, damit sie versioniert ist und nachvollziehbar
   bleibt, warum welche Regel steht.

   Öffentlich erreichbar unter
   https://strandcamping.de/buchungsstrecke.css

   ── Was darunter liegt ────────────────────────────────────
   Die Buchungsstrecke ist ein Bootstrap 5.3 von der Stange:
   `styles.min.css` (das komplette Framework) und danach
   `custom2.min.css` (die Platzkarte). Unsere Datei kommt als
   letzte und arbeitet fast ausschließlich über die
   CSS-Variablen, die Bootstrap ohnehin überall abfragt
   (`--bs-btn-bg`, `--bs-card-bg`, `--bs-alert-color`, …). Damit
   sind es Werte, keine Überschreibungen.

   `!important` steht nur an einer Sorte Stelle: dort, wo eine
   Bootstrap-Hilfsklasse (`bg-danger`, `text-body`,
   `position-absolute` …) selbst eines mitbringt und anders nicht
   zu schlagen ist. Jede dieser Zeilen sagt daneben, wen sie
   schlägt. Die Regeln der Platzkarte weiter unten sind davon
   ausgenommen — die sind unverändert vom Anbieter übernommen.

   ── Was die Seite vorher war ──────────────────────────────
   Bootstrap-Blau `#0D6BF4`, Systemschrift, Pillenform an jedem
   Knopf, ein Kalender aus lauter vollflächig blauen Tagen. Nichts
   davon ist falsch — es ist nur niemandes Gestaltung.

   ── Die Übersetzung ───────────────────────────────────────
   Aus den beiden Markenfarben und dem Rot des Wortzeichens:

     Blau   #3FA3BA  Auswahl, Zustand, Führung
     Orange #FAA62A  Markierung — Anreise, Abreise, aktiver Schritt
     Rot    #9E1B26  die eine Handlung, die weiterführt

   Das Rot ist bewusst knapp gehalten: Es ist die Farbe des
   Buchungsknopfes auf strandcamping.de. Wer ihn dort gedrückt
   hat, findet ihn hier wieder — und nur ihn, damit er die
   Bedeutung behält.

   Gefüllte Flächen mit weißem Text nehmen nie `sea-400`
   (#3FA3BA, 2,93:1 gegen Weiß), sondern `sea-600`/`sea-700`. Die
   Markenfarbe ist eine Fläche, kein Textträger — dieselbe Regel
   wie in `src/app/globals.css`.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1 · Schrift

   Open Sans, die Grundschrift der Website, von unserem eigenen
   Server. Kein Google-CDN: Die Buchungsstrecke soll keinen
   Drittanbieter dazubekommen, den ihre Datenschutzerklärung nicht
   nennt.

   Zwei Ausschnitte, wie sie auch die Website lädt — `latin` deckt
   Deutsch, Englisch und Niederländisch, `latin-ext` fängt ab, was
   im Französischen und in Gästenamen darüber hinausgeht (œ, ā, ł).
   Der Browser lädt den zweiten nur, wenn ein Zeichen daraus
   vorkommt.

   Die Auszeichnungsschrift der Website (Helvetica LT Condensed
   Black) fehlt hier mit Absicht: Ihre Lizenz ist ungeprüft, siehe
   `src/app/fonts/LIZENZ.md`. Überschriften laufen deshalb in Open
   Sans 800 — genau die Fassung, die auf der Website auch der
   Schalter „Gut lesbare Schrift“ einsetzt.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Open Sans SC";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("https://strandcamping.de/fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans SC";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("https://strandcamping.de/fonts/open-sans-latin-ext.woff2")
    format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, 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;
}

/* ═══════════════════════════════════════════════════════════
   2 · Marken- und Systemwerte

   Oben unsere Palette unter eigenem Namen, darunter die
   Bootstrap-Variablen, die daraus gespeist werden. Wer eine Farbe
   ändern will, ändert sie im ersten Block — der zweite zieht nach.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Blau — ein Farbton (191°), von der Markenfarbe aus ── */
  --sc-sea-50: #f3fafc;
  --sc-sea-100: #dff2f6;
  --sc-sea-200: #bce3eb;
  --sc-sea-300: #8bccda;
  --sc-sea-400: #3fa3ba; /* DAS Markenblau — Flächen und Bänder */
  --sc-sea-600: #1c6f82; /* trägt Weiß und liegt auf Weiß (5,76:1) */
  --sc-sea-700: #135c6c; /* die kräftige Stufe        (7,57:1)   */

  /* ── Sand — der Strand, auf dem der Fuß steht ─────────── */
  --sc-sand-100: #fbf3e2;
  --sc-sand-200: #efe2c6;

  /* ── Sonne — das Markenorange, und nur das ───────────────
        Es trägt nie Text auf Weiß (1,99:1). Es ist Fläche,
        Markierung und Linie. Ink darauf steht bei 7,9:1. */
  --sc-sun-50: #fff5e6;
  --sc-sun-400: #faa62a;

  /* ── Ton — die Buchungshandlung, aus dem Wortzeichen ──── */
  --sc-clay-700: #9e1b26;
  --sc-clay-800: #7f1520;

  /* ── Ink — neutral, damit es den zwei Markenfarben nie
        die Aufmerksamkeit nimmt ────────────────────────── */
  --sc-ink: #22262a;
  --sc-ink-soft: #545a5f;
  --sc-ink-deep: #14181b;

  /* ── Maß ──────────────────────────────────────────────
        Die Marke ist kantig, nicht rund. Auch `pill` — sonst
        stehen runde Zähler neben eckigen Karten. */
  --sc-radius-sm: 2px;
  --sc-radius-md: 3px;
  --sc-radius-lg: 4px;

  --sc-shadow-raise: 0 1px 2px rgb(20 24 27 / 0.05),
    0 4px 12px -6px rgb(20 24 27 / 0.12);
  --sc-shadow-lift: 0 1px 3px rgb(20 24 27 / 0.06),
    0 12px 28px -12px rgb(20 24 27 / 0.2);

  --sc-ease: cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Schriftgrade — derselbe Maßstab wie auf der Website,
        Verhältnis 1,25, flüssig zwischen den Endpunkten ── */
  --sc-text-nano: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --sc-text-micro: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --sc-text-body: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --sc-text-lede: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --sc-text-h5: clamp(1.375rem, 1.31rem + 0.33vw, 1.5625rem);
  --sc-text-h4: clamp(1.6875rem, 1.58rem + 0.54vw, 1.9375rem);

  /* ── … und ab hier spricht Bootstrap ────────────────── */

  --bs-font-sans-serif: "Open Sans SC", "Open Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: var(--sc-text-body);
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--sc-ink-soft);
  --bs-body-color-rgb: 84, 90, 95;
  --bs-emphasis-color: var(--sc-ink);
  --bs-emphasis-color-rgb: 34, 38, 42;
  --bs-heading-color: var(--sc-ink);

  --bs-primary: var(--sc-sea-600);
  --bs-primary-rgb: 28, 111, 130;
  --bs-danger: var(--sc-clay-700);
  --bs-danger-rgb: 158, 27, 38;
  --bs-secondary: var(--sc-ink-soft);
  --bs-secondary-rgb: 84, 90, 95;

  --bs-link-color: var(--sc-sea-600);
  --bs-link-color-rgb: 28, 111, 130;
  --bs-link-hover-color: var(--sc-sea-700);
  --bs-link-hover-color-rgb: 19, 92, 108;

  /* Struktur kommt von Haarlinien, nicht von Grau. */
  --bs-border-color: var(--sc-sea-100);
  --bs-border-color-translucent: rgb(63 163 186 / 0.24);

  /* Flächen: der Fuß auf hellem Blau, die Hinweisleiste auf Sand. */
  --bs-secondary-bg: var(--sc-sand-100);
  --bs-secondary-bg-rgb: 251, 243, 226;
  --bs-tertiary-bg: var(--sc-sea-50);
  --bs-tertiary-bg-rgb: 243, 250, 252;
  --bs-secondary-color: var(--sc-ink-soft);
  --bs-secondary-color-rgb: 84, 90, 95;

  --bs-border-radius: var(--sc-radius-md);
  --bs-border-radius-sm: var(--sc-radius-sm);
  --bs-border-radius-lg: var(--sc-radius-lg);
  --bs-border-radius-xl: var(--sc-radius-lg);
  --bs-border-radius-xxl: var(--sc-radius-lg);
  --bs-border-radius-2xl: var(--sc-radius-lg);
  --bs-border-radius-pill: var(--sc-radius-md);

  --bs-box-shadow: var(--sc-shadow-lift);
  --bs-box-shadow-sm: var(--sc-shadow-raise);
  --bs-box-shadow-lg: var(--sc-shadow-lift);

  --bs-focus-ring-color: rgb(19 92 108 / 0.3);

  /* Bootstrap rechnet `bg-subtle`/`text-emphasis` aus seinen eigenen
     Grundfarben vor; die Werte stehen fest im Stylesheet und würden
     sonst neben unserer Palette stehen bleiben. */
  --bs-primary-bg-subtle: var(--sc-sea-50);
  --bs-primary-border-subtle: var(--sc-sea-200);
  --bs-primary-text-emphasis: var(--sc-sea-700);
  --bs-danger-bg-subtle: #fceeef;
  --bs-danger-border-subtle: #eccbce;
  --bs-danger-text-emphasis: var(--sc-clay-800);
  --bs-warning-bg-subtle: var(--sc-sun-50);
  --bs-warning-border-subtle: #f6dcb1;
  --bs-warning-text-emphasis: var(--sc-ink);
  --bs-success-bg-subtle: var(--sc-sea-50);
  --bs-success-border-subtle: var(--sc-sea-200);
  --bs-success-text-emphasis: var(--sc-sea-700);
  --bs-info-bg-subtle: var(--sc-sea-50);
  --bs-info-border-subtle: var(--sc-sea-200);
  --bs-info-text-emphasis: var(--sc-sea-700);
}

/* ═══════════════════════════════════════════════════════════
   3 · Grundlage
   ═══════════════════════════════════════════════════════════ */

/* Die Buchungsstrecke setzt `font-family` unmittelbar auf `body` — ihre
   eigene Fassung von Open Sans, zwei statische TTF-Schnitte (400 und
   700). Ein Wert in `--bs-body-font-family` kommt dagegen nicht an, und
   ein Achthundert gäbe es dort ohnehin nicht: Der Browser müsste es aus
   dem Fetten hochrechnen. Deshalb steht die Angabe hier ausdrücklich.

   Ihre Schrift bleibt als zweiter Eintrag stehen. Sollte unser Server
   einmal nicht antworten, fällt die Seite auf dieselbe Schriftfamilie
   zurück statt auf Arial. */
body {
  font-family: var(--bs-font-sans-serif);
  font-size: var(--sc-text-body);
  line-height: 1.65;
  color: var(--sc-ink-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #fff;
  /* Die Welle unter der Kopfzeile geht über die volle Fensterbreite.
     Ohne das hier zieht sie eine waagerechte Bildlaufleiste nach sich. */
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--sc-ink);
  text-wrap: balance;
}

h2 {
  font-size: var(--sc-text-h4);
  margin-bottom: 1.25rem;
}

h4 {
  font-size: var(--sc-text-h5);
}

/* Die Kartentitel sind Produktnamen, keine Überschriften — sie sollen
   lesbar sein, nicht laut. */
h5,
.card-title {
  font-size: var(--sc-text-body);
  line-height: 1.3;
}

/* `h6` steht hier durchweg für Erklärzeilen unter einer Überschrift
   („Tage mit einem 📅 sind gültige Abreisedaten …“). Als Überschrift
   gesetzt lasen sie sich wie eine zweite Ebene, die es nicht gibt. */
h6,
.h6 {
  font-size: var(--sc-text-micro);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--sc-ink-soft);
}

p {
  text-wrap: pretty;
}

a {
  text-underline-offset: 0.2em;
}

hr {
  border: 0;
  border-top: 1px solid var(--sc-sea-100);
  opacity: 1;
  margin: 2.5rem 0 1.75rem;
}

/* Der Fokusring der Website, unverändert übernommen. Bootstrap
   arbeitet mit einem 4-px-Schlagschatten in der Grundfarbe; ein
   Umriss steht auch dann noch, wenn das Element auf einer Fläche
   liegt, die dieselbe Farbe hat. */
:focus-visible {
  outline: 3px solid var(--sc-sea-700);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus-visible + .btn {
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sc-sea-400);
  outline: 3px solid var(--sc-sea-700);
  outline-offset: 2px;
}

::selection {
  background: var(--sc-sun-400);
  color: var(--sc-ink);
}

/* ═══════════════════════════════════════════════════════════
   4 · Kopfzone — Logo, Schrittleiste, Dünenwelle

   Der `hr` unter der Schrittleiste wird zur Welle. Das ist genau
   die Linie, die den Kopf vom Inhalt trennt, also genau die
   Stelle, an der auf der Website die Düne steht. Sie ist über die
   volle Fensterbreite gezogen, während Logo und Schrittleiste im
   Satzspiegel bleiben — dieselbe Staffelung wie im Seitenkopf.

   Zwei Stärken einer Farbe: 12 % für die ferne Welle, 22 % für
   die nahe. Die Grafik steckt als Data-URI drin, damit die Datei
   für sich allein steht.
   ═══════════════════════════════════════════════════════════ */

#banner img {
  border-radius: 0;
}

#banner + .container {
  position: relative;
}

#banner + .container > hr {
  position: relative;
  height: 62px;
  border: 0;
  opacity: 1;
  margin: 0 calc(50% - 50vw) 1.75rem;
  width: 100vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='%23FAA62A' fill-opacity='.12' d='M0 26c150-24 300 20 460 24 170 5 300-30 460-26 130 3 240 26 360 18V140H0Z'/%3E%3Cpath fill='%23FAA62A' fill-opacity='.22' d='M0 72c170-20 290 12 470 14 180 2 290-22 450-18 140 4 240 20 360 14V140H0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 62px;
}

/* Das warme Feld, in dem Logo und Schrittleiste stehen. Es wächst von
   der Welle aus nach oben, statt von oben eine geratene Höhe weit nach
   unten: Wie hoch die Kopfzone ist, hängt am Logo und daran, ob die
   Schrittleiste umbricht — von hier aus ist das nicht zu treffen, und
   ein danebenliegender Wert hinterlässt eine Kante quer über der Seite.
   Von der Welle aus gemessen sitzt die Naht immer richtig.

   Kein `transform` für die volle Breite, sondern negative Ränder:
   `transform` macht aus dem `hr` einen eigenen Stapelkontext, und das
   `z-index: -1` käme dann nicht mehr hinter das Logo, sondern legte
   sich als Orangeschleier darüber. */
#banner + .container > hr::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 100vh;
  background: rgb(250 166 42 / 0.06);
  pointer-events: none;
  z-index: -1;
}

/* ── Die Schrittleiste ────────────────────────────────────
   Buchung · Übersicht · Daten · Zahlung. Der aktive Schritt
   bekommt die orange Linie — Orange ist auf der Website die
   Markierung, nicht die Handlung. */
.nav-underline {
  --bs-nav-underline-gap: 1.5rem;
  --bs-nav-underline-border-width: 3px;
  --bs-nav-underline-link-active-color: var(--sc-ink);
  --bs-nav-link-color: var(--sc-ink-soft);
  --bs-nav-link-hover-color: var(--sc-ink);
  --bs-nav-link-disabled-color: #a3a8ac;
  --bs-nav-link-padding-x: 0;
}

.nav-underline .nav-link {
  font-weight: 600;
  font-size: var(--sc-text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
}

.nav-underline .nav-link.active {
  border-bottom-color: var(--sc-sun-400);
}

.nav-underline .nav-link:hover:not(.disabled):not(.active) {
  border-bottom-color: var(--sc-sea-200);
}

/* Die Sprachwahl — ein Fähnchen, sonst nichts. Der Rahmen von
   `img-thumbnail` machte daraus eine gerahmte Briefmarke. */
#language_flag {
  padding: 0;
  border: 1px solid var(--sc-sea-200);
  border-radius: var(--sc-radius-sm);
  background: none;
  max-width: 34px;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--sc-sea-200);
  --bs-dropdown-border-radius: var(--sc-radius-md);
  --bs-dropdown-box-shadow: var(--sc-shadow-lift);
  --bs-dropdown-link-hover-bg: var(--sc-sea-50);
  --bs-dropdown-link-active-bg: var(--sc-sea-600);
  --bs-dropdown-font-size: var(--sc-text-body);
}

/* ═══════════════════════════════════════════════════════════
   5 · Schaltflächen

   Bootstrap 5.3 baut jeden Knopf aus `--bs-btn-*`. Deshalb steht
   hier nirgends `background-color` — es stehen Werte, und die
   Zustände (Zeigen, Drücken, Ausgewählt, Gesperrt) fallen von
   selbst richtig aus.
   ═══════════════════════════════════════════════════════════ */

.btn {
  --bs-btn-border-radius: var(--sc-radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: var(--sc-text-body);
  --bs-btn-active-shadow: none;
  --bs-btn-box-shadow: none;
  transition: background-color 0.25s var(--sc-ease),
    border-color 0.25s var(--sc-ease), color 0.25s var(--sc-ease),
    box-shadow 0.25s var(--sc-ease), transform 0.25s var(--sc-ease);
}

/* Das Blau der Marke, in der Stufe, die Weiß trägt. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sc-sea-600);
  --bs-btn-border-color: var(--sc-sea-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sc-sea-700);
  --bs-btn-hover-border-color: var(--sc-sea-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc-sea-700);
  --bs-btn-active-border-color: var(--sc-sea-700);
  --bs-btn-disabled-color: var(--sc-sea-700);
  --bs-btn-disabled-bg: var(--sc-sea-100);
  --bs-btn-disabled-border-color: var(--sc-sea-100);
  --bs-btn-focus-shadow-rgb: 28, 111, 130;
}

/* Auswahlkarten: leer eine weiße Karte mit Haarlinie, gewählt eine
   volle blaue Fläche. */
.btn-outline-primary {
  --bs-btn-color: var(--sc-sea-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--sc-sea-200);
  --bs-btn-hover-color: var(--sc-sea-700);
  --bs-btn-hover-bg: var(--sc-sea-50);
  --bs-btn-hover-border-color: var(--sc-sea-400);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc-sea-600);
  --bs-btn-active-border-color: var(--sc-sea-600);
  --bs-btn-disabled-color: #9aa0a4;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--sc-sea-100);
  --bs-btn-focus-shadow-rgb: 28, 111, 130;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sc-ink-deep);
  --bs-btn-border-color: var(--sc-ink-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-focus-shadow-rgb: 34, 38, 42;
}

.btn-link {
  --bs-btn-color: var(--sc-sea-600);
  --bs-btn-hover-color: var(--sc-sea-700);
  --bs-btn-font-weight: 600;
}

.btn-close {
  --bs-btn-close-focus-shadow: none;
}

/* ── Die eine Handlung, die weiterführt ───────────────────
   `#submit_button` („Zur Übersicht“) und der eingeblendete
   „Fortfahren“-Knopf. Das ist derselbe Knopf wie auf
   strandcamping.de: rote Fläche, feste Unterkante, ein farbiger
   Lichtpool darunter, ein Glanz an der Oberkante. Beim Drücken
   fällt die Kante weg, und er fährt die 3 px hinunter, auf denen
   er stand.

   Alles andere auf dieser Seite bleibt blau. Ein zweiter roter
   Knopf würde diesem hier die Bedeutung nehmen. */
#submit_button,
#continue .btn,
.btn-lg {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sc-clay-700);
  --bs-btn-border-color: var(--sc-clay-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sc-clay-800);
  --bs-btn-hover-border-color: var(--sc-clay-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc-clay-800);
  --bs-btn-active-border-color: var(--sc-clay-800);
  /* Gesperrt ist der Knopf nicht rot, sondern blau-blass. Ein
     entsättigtes Rot sieht kaputt aus; und der Sprung von der stillen
     Fläche zum roten Schlüssel sagt deutlicher als jede Beschriftung,
     dass jetzt etwas möglich ist, was vorher nicht ging. */
  --bs-btn-disabled-color: var(--sc-sea-700);
  --bs-btn-disabled-bg: var(--sc-sea-100);
  --bs-btn-disabled-border-color: var(--sc-sea-100);
  --bs-btn-focus-shadow-rgb: 158, 27, 38;
  --bs-btn-padding-x: 2.25rem;
  --bs-btn-padding-y: 0.9rem;
  --bs-btn-font-size: var(--sc-text-lede);
  letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 3px 0 var(--sc-clay-800), 0 10px 22px -8px rgb(158 27 38 / 0.55);
}

#submit_button:hover,
#continue .btn:hover,
.btn-lg:hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 3px 0 #6a111a,
    0 16px 30px -8px rgb(158 27 38 / 0.7);
}

#submit_button:active,
#continue .btn:active,
.btn-lg:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 #6a111a,
    0 6px 14px -8px rgb(158 27 38 / 0.6);
}

#submit_button:disabled,
#continue .btn:disabled,
.btn-lg:disabled {
  box-shadow: none;
  transform: none;
}

/* ── Der Zähler ───────────────────────────────────────────
   Minus, Feld, Plus. Vorher zwei blaue Pillen um ein weißes Feld;
   jetzt ein Block mit einer Haarlinie außen und den beiden
   Tasten als ruhige Flächen darin. */
.input-group.qty_select {
  border: 1px solid var(--sc-sea-200);
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  background: #fff;
  /* `.input-group` bricht von Haus aus um. In den schmalen
     Extras-Karten reichte das: Minus und Plus rutschten unter das
     Feld und standen als Treppe untereinander. */
  flex-wrap: nowrap;
}

.qty_select .btn {
  --bs-btn-bg: var(--sc-sea-50);
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--sc-sea-700);
  --bs-btn-hover-bg: var(--sc-sea-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--sc-sea-700);
  --bs-btn-active-bg: var(--sc-sea-200);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--sc-sea-700);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: #b6bbbf;
  border-radius: 0;
  font-size: 1rem;
  padding-inline: 0.7rem;
  flex: 0 0 auto;
}

.qty_select .form-control.qty {
  border: 0;
  border-inline: 1px solid var(--sc-sea-100);
  border-radius: 0;
  font-weight: 700;
  color: var(--sc-ink);
  background: #fff;
}

.qty_select .form-control.qty:focus {
  outline-offset: -3px;
}

/* ── Die Sprungleiste am rechten Rand ─────────────────────
   Eine Spalte voller blauer Blöcke schwebte über dem Inhalt und
   zog mehr Aufmerksamkeit als der Schritt, in dem man gerade
   steht. Jetzt eine weiße Leiste mit Haarlinie; nur der Zeiger
   färbt sich. */
#scroll_spy .btn {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--sc-sea-200);
  --bs-btn-color: var(--sc-sea-700);
  --bs-btn-hover-bg: var(--sc-sea-600);
  --bs-btn-hover-border-color: var(--sc-sea-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sc-sea-600);
  --bs-btn-active-border-color: var(--sc-sea-600);
  --bs-btn-active-color: #fff;
  padding: 0.6rem 0.7rem;
}

#scroll_spy {
  box-shadow: var(--sc-shadow-raise);
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   6 · Formulare
   ═══════════════════════════════════════════════════════════ */

.form-control,
.form-select {
  font-size: var(--sc-text-body);
  border-color: var(--sc-sea-200);
  border-radius: var(--sc-radius-sm);
  color: var(--sc-ink);
  padding-block: 0.55rem;
}

.form-control::placeholder {
  color: #a3a8ac;
}

.form-select {
  /* Der Pfeil kam in Bootstrap-Grau. */
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231c6f82' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.col-form-label,
.form-floating > label,
label {
  color: var(--sc-ink);
  font-weight: 600;
}

.form-floating > label {
  font-weight: 400;
  color: var(--sc-ink-soft);
}

.form-text {
  color: var(--sc-ink-soft);
  font-size: var(--sc-text-micro);
}

/* Die Schalter bei den Extras stehen auf `scale(2.5)` — in Grau
   sahen sie aus wie ausgeschaltet, auch wenn sie an waren. */
.form-check-input {
  border-color: var(--sc-sea-300);
  border-radius: var(--sc-radius-sm);
}

.form-check-input:checked {
  background-color: var(--sc-sea-600);
  border-color: var(--sc-sea-600);
}

/* Der Knopf im ausgeschalteten Schalter kam in Bootstrap-Grau — bei
   `scale(2.5)` ein grauer Punkt mitten in einer sonst blauen Karte. */
.form-switch .form-check-input {
  border-radius: 2em;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238bccda'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  border-color: var(--sc-sea-400);
}

.invalid-tooltip,
.tooltip {
  --bs-tooltip-bg: var(--sc-ink-deep);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: var(--sc-radius-sm);
  --bs-tooltip-font-size: var(--sc-text-micro);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-micro);
}

/* ═══════════════════════════════════════════════════════════
   7 · Karten — Kategorien, Extras, Schrittwahl

   Alle drei sind `label.btn.card` mit einem versteckten
   `input.btn-check` davor. Heikel dabei: `.card` setzt seinen
   Hintergrund später im Framework-Stylesheet als `.btn` — die
   Zustandsfarben des Knopfes kämen nie an. Deshalb stehen hier
   ausdrückliche Regeln statt reiner Variablenwerte.
   ═══════════════════════════════════════════════════════════ */

.card {
  --bs-card-border-color: var(--sc-sea-100);
  --bs-card-border-radius: var(--sc-radius-sm);
  --bs-card-inner-border-radius: 0;
  --bs-card-cap-bg: var(--sc-sea-50);
  --bs-card-cap-color: var(--sc-ink);
  /* `--bs-card-color` bleibt bewusst ungesetzt. Bootstrap gibt die
     Variable nicht nur der Karte, sondern auch `.card-body` mit —
     ein Wert darin setzt die Vererbung im Inneren also neu. Auf der
     gewählten blauen Fläche stand die Tagesziffer damit weiter in
     Ink statt in Weiß. Leer heißt: erben, und genau das soll sie. */
}

/* Nur Klassen, keine ID. `#step_choice label.btn.card` stand hier
   einmal daneben — eine ID wiegt schwerer als jede Zahl von Klassen,
   also schlug der Grundzustand die `:checked`-Regel darunter: Die
   gewählte Karte behielt ihre weiße Fläche, während die Schrift darin
   auf Weiß umsprang. Sie war dann nicht ausgewählt, sondern leer. */
.category-final-wrapper label.btn.card,
.step-choice + label.btn.card {
  background-color: #fff;
  border-color: var(--sc-sea-200);
  color: var(--sc-ink);
  overflow: hidden;
  transition: background-color 0.25s var(--sc-ease),
    border-color 0.25s var(--sc-ease), box-shadow 0.25s var(--sc-ease),
    transform 0.25s var(--sc-ease);
}

.category-final-wrapper label.btn.card:hover,
.step-choice:not(:checked) + label.btn.card:hover {
  background-color: var(--sc-sea-50);
  border-color: var(--sc-sea-400);
  box-shadow: var(--sc-shadow-raise);
  transform: translateY(-2px);
}

/* Gewählt: volle Fläche in der Stufe, die Weiß trägt, und eine
   orange Kante an der Unterseite — dieselbe Markierung wie am
   aktiven Schritt oben. */
.category-final:checked + label.btn.card,
.step-choice:checked + label.btn.card {
  background-color: var(--sc-sea-600);
  border-color: var(--sc-sea-600);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--sc-sun-400), var(--sc-shadow-raise);
}

.category-final:checked + label.btn.card .card-title,
.category-final:checked + label.btn.card .card-text,
.step-choice:checked + label.btn.card .card-title,
.step-choice:checked + label.btn.card .card-text {
  color: #fff;
}

.category-final:disabled + label.btn.card {
  background-color: #fff;
  border-color: var(--sc-sea-100);
  color: #9aa0a4;
}

.card-title {
  color: inherit;
  margin-bottom: 0.35rem;
}

.card-text {
  color: inherit;
  font-size: var(--sc-text-micro);
  line-height: 1.5;
}

.card-body {
  padding: 0.85rem;
}

.card-footer {
  background-color: var(--sc-sea-50);
  border-top-color: var(--sc-sea-100);
}

.card-img-top {
  border-radius: 0;
}

.price-val {
  color: var(--sc-ink);
  font-size: var(--sc-text-body);
}

.price-text {
  color: var(--sc-ink-soft);
  font-size: var(--sc-text-nano);
}

/* Das „oder“ zwischen den drei Einstiegen */
#step_choice .text-uppercase {
  color: var(--sc-ink-soft);
  font-size: var(--sc-text-nano);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   8 · Kalender

   Vorher: jeder Tag eine gefüllte blaue Fläche — eine Wand, in
   der die Auswahl nicht mehr auffiel. Jetzt trägt der Kalender
   drei Zustände, und nur einer davon ist farbig:

     frei       weiße Karte, Haarlinie, Ink
     gewählt    volle Fläche sea-600, Weiß
     gesperrt   sehr blasses Blau, keine Linie

   Der An- und der Abreisetag bekommen dazu die orange Fahne.
   ═══════════════════════════════════════════════════════════ */

.weekday label.btn.card {
  background-color: #fff;
  border: 1px solid var(--sc-sea-100);
  border-radius: var(--sc-radius-sm);
  color: var(--sc-ink);
  transition: background-color 0.18s var(--sc-ease),
    border-color 0.18s var(--sc-ease), color 0.18s var(--sc-ease);
}

.weekday label.btn.card:hover {
  background-color: var(--sc-sea-50);
  border-color: var(--sc-sea-300);
}

.weekday-input:checked + label.btn.card {
  background-color: var(--sc-sea-600);
  border-color: var(--sc-sea-600);
  color: #fff;
}

.weekday-input:disabled + label.btn.card,
.weekday-input[disabled] + label.btn.card {
  background-color: var(--sc-sea-50);
  border-color: transparent;
  color: #a9aeb2;
}

.weekday .day-short {
  font-size: var(--sc-text-nano);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}

.weekday .day-num {
  font-size: var(--sc-text-lede);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
}

.month-header {
  font-size: var(--sc-text-h5);
  margin: 1.75rem 0 0.85rem;
}

/* Die Fahnen an den beiden Enden des Zeitraums. Orange ist auf der
   Website die Markierung; Ink darauf steht bei 7,9:1. Vorher
   Bootstrap-Rot, das neben dem Rot des Buchungsknopfes stand und
   sich daran rieb. */
.weekday .note {
  background-color: var(--sc-sun-400) !important; /* schlägt `bg-danger` */
  color: var(--sc-ink);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-nano);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28em 0.5em;
  box-shadow: 0 1px 3px rgb(20 24 27 / 0.18);
}

/* Das Kreuz zum Aufheben der Auswahl liegt auf der gewählten blauen
   Fläche. In Ink war es dort der dunkelste Fleck im ganzen Kalender und
   zog den Blick auf sich, obwohl es nur ein Rückweg ist. */
.weekday .cancel {
  --bs-btn-padding-x: 0.3rem;
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--sc-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: var(--sc-clay-700);
  --bs-btn-font-size: var(--sc-text-nano);
  border-radius: var(--sc-radius-sm);
  box-shadow: 0 1px 4px rgb(20 24 27 / 0.35);
}

.weekday .hint-departure {
  background: transparent;
  border: 0;
  padding: 0.15rem;
}

/* Der Haken für mögliche Abreisetage steht als `text-primary` auf dem
   Tag — auf der gewählten blauen Fläche ginge er darin unter. */
.weekday-input:checked ~ .hint-departure i {
  color: #fff !important; /* schlägt `.text-primary` */
}

@media (min-width: 768px) {
  .month-picker,
  .year-picker {
    min-width: 7.5rem;
  }
}

/* Monat und Jahr liegen absolut positioniert in derselben Zeile wie der
   „Früher“-Knopf. Am Telefon reicht die Breite dafür nicht: Gemessen bei
   375 px überlappen die beiden Auswahlfelder den Knopf um 16 Pixel und
   fangen dort seine Klicks ab.

   Das ist kein Schaden dieser Datei — ohne sie sind es dieselben 16
   Pixel, mit ihr noch 8. Es ist trotzdem das Erste, was man auf dem
   Kalender sieht, deshalb steht die Reparatur hier: Unterhalb von 768 px
   verlässt der Kasten die absolute Lage und stellt sich in die Zeile
   darunter, für die im Aufbau ohnehin schon ein Platzhalter steht. */
@media (max-width: 767.98px) {
  #calendar .row > .position-absolute:has(.month-picker) {
    position: static !important; /* schlägt die Hilfsklasse */
    margin-top: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   9 · Hinweise, Meldungen, Marken
   ═══════════════════════════════════════════════════════════ */

.alert {
  --bs-alert-border-radius: var(--sc-radius-sm);
  border: 0;
  border-left: 3px solid transparent;
  font-size: var(--sc-text-body);
  box-shadow: var(--sc-shadow-raise);
}

/* Der Willkommenskasten. Blau = Auskunft. */
.alert-primary,
.alert-info {
  --bs-alert-bg: var(--sc-sea-50);
  --bs-alert-color: var(--sc-ink);
  border-left-color: var(--sc-sea-400);
}

/* Orange = hinsehen. */
.alert-warning {
  --bs-alert-bg: var(--sc-sun-50);
  --bs-alert-color: var(--sc-ink);
  border-left-color: var(--sc-sun-400);
}

.alert-success {
  --bs-alert-bg: var(--sc-sea-50);
  --bs-alert-color: var(--sc-sea-700);
  border-left-color: var(--sc-sea-600);
}

/* Rot = es ging etwas schief. Dasselbe Rot wie der Knopf, weil es
   auf der Website auch nur dieses eine gibt. */
.alert-danger {
  --bs-alert-bg: #fceeef;
  --bs-alert-color: var(--sc-clay-800);
  border-left-color: var(--sc-clay-700);
}

.alert .bi-info-circle,
.alert-primary i,
.alert-info i {
  color: var(--sc-sea-600);
}

.badge {
  --bs-badge-border-radius: var(--sc-radius-sm);
  --bs-badge-font-weight: 700;
  letter-spacing: 0.02em;
}

.spinner-border {
  color: var(--sc-sea-400);
}

/* ═══════════════════════════════════════════════════════════
   10 · Preistabelle
   ═══════════════════════════════════════════════════════════ */

.table {
  --bs-table-color: var(--sc-ink-soft);
  --bs-table-border-color: var(--sc-sea-100);
  font-size: var(--sc-text-body);
}

.table thead th {
  color: var(--sc-ink);
  font-size: var(--sc-text-nano);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sc-sea-200);
  padding-bottom: 0.6rem;
}

.table .sum-header,
.table .sum {
  color: var(--sc-ink);
  font-size: var(--sc-text-lede);
  border-top: 1px solid var(--sc-sea-200);
  padding-top: 0.75rem;
}

/* Der Rabatt ist die einzige Zahl in der Aufstellung, die niemand
   überlesen soll. `.table > :not(caption) > * > *` färbt jede Zelle und
   wiegt schwerer als eine Klasse allein — deshalb steht hier `tbody td`
   mit davor. */
.table tbody td.discount,
.discount-row {
  color: var(--sc-clay-700);
}

/* ═══════════════════════════════════════════════════════════
   11 · Platzkarte

   Die Regeln selbst kommen unverändert aus `custom2.min.css` und
   stehen hier nur mit, damit die Datei auch dann vollständig ist,
   wenn sie an deren Stelle tritt. Neu sind allein die Werte.

   Frei ist blau, gewählt ist rot — auf einem Luftbild geht Blau
   im Wasser unter, sobald es die Auswahl markieren soll. Rot ist
   hier dasselbe Rot wie am Buchungsknopf: die Sache, die man
   nimmt.
   ═══════════════════════════════════════════════════════════ */

:root {
  --obp-spot-color: rgba(255, 255, 255, 0.95);
  --obp-spot-stroke-style: unset;
  --obp-spot-bg: rgba(63, 163, 186, 0.35);
  --obp-spot-stroke-width: 2;

  --obp-spot-hover-color: rgba(255, 255, 255, 1);
  --obp-spot-hover-bg: rgba(28, 111, 130, 0.55);
  --obp-spot-hover-stroke-width: 2;

  --obp-spot-active-color: rgba(255, 255, 255, 1);
  --obp-spot-active-bg: rgba(158, 27, 38, 0.72);
  --obp-spot-active-stroke-width: 3;
  --obp-spot-active-style: unset;
}

.svg-map .spot {
  stroke: none !important;
}
.svg-map .spot.available {
  fill: var(--obp-spot-bg) !important;
}
.svg-map .spot.available:hover {
  fill: var(--obp-spot-hover-bg) !important;
}
.svg-map .spot.chosen {
  stroke-width: var(--obp-spot-active-stroke-width);
  mix-blend-mode: var(--obp-spot-active-style);
}
.svg-map .spot.chosen,
.svg-map .spot.chosen:hover {
  fill: var(--obp-spot-active-bg) !important;
}
.svg-map .high-border {
  stroke-width: var(--obp-spot-stroke-width);
  mix-blend-mode: var(--obp-spot-stroke-style);
}
.svg-map .high-border,
.svg-map .high-border.available {
  stroke: var(--obp-spot-color) !important;
}
.svg-map .high-border.available:hover {
  stroke: var(--obp-spot-hover-color) !important;
  stroke-width: var(--obp-spot-hover-stroke-width);
}
.svg-map .high-border.chosen {
  stroke-width: var(--obp-spot-active-stroke-width);
}
.svg-map .high-border.chosen,
.svg-map .high-border.chosen:hover {
  stroke: var(--obp-spot-active-color) !important;
}

.spotmap-wrapper {
  border: 1px solid var(--sc-sea-100);
  border-radius: var(--sc-radius-sm);
  padding: 0.75rem;
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════
   12 · Fuß, Hinweisleiste, Fenster
   ═══════════════════════════════════════════════════════════ */

footer {
  background-color: var(--sc-sea-50) !important; /* schlägt `bg-body-tertiary` */
  border-top: 1px solid var(--sc-sea-100);
  margin-top: 3rem;
  font-size: var(--sc-text-micro);
}

footer a {
  color: var(--sc-sea-700) !important; /* schlägt `text-body` */
  font-weight: 600;
}

/* Die Cookie-Leiste. Sie steht am unteren Rand und soll dort auch
   bleiben — aber ruhig: Sand statt Grau, eine Haarlinie oben, und
   der Knopf in Blau. Rot wäre hier falsch, das ist nicht der
   Schritt, um den es auf dieser Seite geht. */
#cookie-banner {
  background-color: var(--sc-sand-100) !important; /* schlägt `bg-body-secondary` */
  border-top: 1px solid var(--sc-sand-200);
  box-shadow: 0 -8px 24px -12px rgb(20 24 27 / 0.2);
  font-size: var(--sc-text-micro);
  color: var(--sc-ink);
}

#cookie-banner a {
  color: var(--sc-sea-700);
  font-weight: 600;
}

.accept-cookies-btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sc-sea-600);
  --bs-btn-border-color: var(--sc-sea-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sc-sea-700);
  --bs-btn-hover-border-color: var(--sc-sea-700);
  --bs-btn-active-bg: var(--sc-sea-700);
  --bs-btn-active-border-color: var(--sc-sea-700);
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.6rem;
}

.modal {
  --bs-modal-border-radius: var(--sc-radius-md);
  --bs-modal-border-color: var(--sc-sea-200);
  --bs-modal-box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.55);
  --bs-modal-header-border-color: var(--sc-sea-100);
  --bs-modal-footer-border-color: var(--sc-sea-100);
}

.modal-content {
  border-left: 3px solid var(--sc-sun-400);
}

.modal-backdrop {
  --bs-backdrop-bg: #0a0c0d;
  --bs-backdrop-opacity: 0.55;
}

.carousel-control-prev,
.carousel-control-next {
  width: 12%;
}

.carousel-indicators [data-bs-target] {
  border-radius: var(--sc-radius-sm);
  height: 4px;
}

/* ═══════════════════════════════════════════════════════════
   13 · Bewegung

   Dieselbe Regel wie auf der Website: Wer weniger Bewegung
   angefordert hat, bekommt sie nicht.
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}