/*!
 * Rügen buchen – Stylesheet
 * Theme für Bootstrap 5.3 (Farbkonzept „Ostsee, Buche, Sanddorn, Kreide“, WCAG 2.2 AA)
 * + Suchen und Buchen V4 (Ergebnisse, Karten, Kalender)
 * Andreas Horst 2026
 *
 * Inhalt
 *   1. Schriften
 *   2. Farben und Bootstrap-Variablen (hell / dunkel)
 *   3. Grundlagen, Fokus, Buttons, Formulare
 *   4. Navigation, Hero, Suche
 *   5. Inhaltsbereiche der Startseite, Footer
 *   6. Datepicker
 *   7. Unterseiten (Rechtstexte)
 *   8. Suchen und Buchen: Ergebnisse
 */

/* =====================================================================
   Schriften – lokal gehostet (keine Verbindung zu Dritten, DSGVO-freundlich)
   Source Sans 3 / Source Serif 4, SIL Open Font License 1.1
   ===================================================================== */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}

/* =====================================================================
   Rügen buchen – Theme (Farbkonzept „Ostsee, Buche, Sanddorn, Kreide“)
   Kann 1:1 in eine gemeinsame ruegen-theme.css ausgelagert werden.
   ===================================================================== */
:root,
[data-bs-theme="light"] {
  --rb-kreide: #FBF9F4;  --rb-surface: #FFFFFF;  --rb-sand: #F1E8D8;
  --rb-schiefer: #1E2A32; --rb-ink-muted: #4F5B63;
  --rb-line: #DDD6C9;    --rb-control-border: #737E86;
  --rb-ostsee: #0B4F6C;  --rb-ostsee-strong: #083A50; --rb-ostsee-soft: #E4F0F5; --rb-on-ostsee: #FFFFFF;
  --rb-buche: #2E5E4E;   --rb-buche-soft: #E6EFEA;    --rb-on-buche: #FFFFFF;
  --rb-sanddorn: #E8892B; --rb-sanddorn-strong: #D9761A; --rb-on-sanddorn: #1E2A32;
  --rb-sanddorn-text: #A4520E; --rb-sanddorn-soft: #FCEBD9;
  --rb-focus: #A4520E;
  --rb-success: #276B43; --rb-success-soft: #E3F2E8;
  --rb-danger: #B3261E;  --rb-danger-soft: #FBE7E5;
  --rb-footer: #083A50;  --rb-on-footer: #FFFFFF; --rb-on-footer-muted: #C9DCE5;

  --rb-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rb-font-sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --rb-nav-h: 4.5rem;
}
[data-bs-theme="dark"] {
  --rb-kreide: #0F1A20;  --rb-surface: #17252D;  --rb-sand: #1D2C34;
  --rb-schiefer: #E9EEF0; --rb-ink-muted: #A9B6BD;
  --rb-line: #2A3A43;    --rb-control-border: #7A8B94;
  --rb-ostsee: #7CC4E0;  --rb-ostsee-strong: #A6D8EC; --rb-ostsee-soft: #12313F; --rb-on-ostsee: #0F1A20;
  --rb-buche: #8CC5AE;   --rb-buche-soft: #16302A;    --rb-on-buche: #0F1A20;
  --rb-sanddorn: #F4A259; --rb-sanddorn-strong: #F7B67A; --rb-on-sanddorn: #0F1A20;
  --rb-sanddorn-text: #F4A259; --rb-sanddorn-soft: #3A2614;
  --rb-focus: #F4A259;
  --rb-success: #7ED4A0; --rb-success-soft: #14301F;
  --rb-danger: #F2B8B5;  --rb-danger-soft: #3A1715;
  --rb-footer: #0A141A;  --rb-on-footer: #E9EEF0; --rb-on-footer-muted: #A9B6BD;
  color-scheme: dark;
}

/* --- Bootstrap-Grundvariablen --- */
:root, [data-bs-theme] {
  --bs-body-bg: var(--rb-kreide);
  --bs-body-color: var(--rb-schiefer);
  --bs-emphasis-color: var(--rb-schiefer);
  --bs-secondary-color: var(--rb-ink-muted);
  --bs-secondary-bg: var(--rb-sand);
  --bs-tertiary-bg: var(--rb-surface);
  --bs-border-color: var(--rb-line);
  --bs-heading-color: var(--rb-schiefer);
  --bs-link-color: var(--rb-ostsee);
  --bs-link-hover-color: var(--rb-ostsee-strong);
  --bs-link-color-rgb: 11, 79, 108;
  --bs-link-hover-color-rgb: 8, 58, 80;
  --bs-primary: var(--rb-ostsee);
  --bs-primary-rgb: 11, 79, 108;
  --bs-secondary: var(--rb-buche);
  --bs-secondary-rgb: 46, 94, 78;
  --bs-focus-ring-color: var(--rb-focus);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 16px;
  --bs-body-font-family: var(--rb-font-sans);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.5556;
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 124, 196, 224;
  --bs-link-hover-color-rgb: 166, 216, 236;
  --bs-primary-rgb: 124, 196, 224;
  --bs-secondary-rgb: 140, 197, 174;
}

html { scroll-padding-top: calc(var(--rb-nav-h) + 1rem); }
body { background: var(--rb-kreide); color: var(--rb-schiefer); }

h1, h2, h3, .h1, .h2, .h3, .display-font {
  font-family: var(--rb-font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
main p a, main li a, main dd a, .faq a { text-decoration: underline; text-underline-offset: .2em; }

/* --- Fokus: sichtbar, einheitlich (WCAG 2.4.7 / 2.4.11) --- */
:focus-visible,
.btn:focus-visible, .nav-link:focus-visible, .navbar-toggler:focus-visible,
.form-control:focus, .form-select:focus {
  outline: 3px solid var(--rb-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--rb-kreide);
}
.hero :focus-visible { box-shadow: 0 0 0 2px var(--rb-surface); }

/* --- Sprunglink --- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  background: var(--rb-ostsee-strong); color: var(--rb-on-ostsee);
  padding: .75rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + .75rem); color: var(--rb-on-ostsee); }

/* --- Buttons --- */
.btn { --bs-btn-font-weight: 600; min-height: 44px; }
.btn-primary {
  --bs-btn-bg: var(--rb-ostsee); --bs-btn-color: var(--rb-on-ostsee); --bs-btn-border-color: var(--rb-ostsee);
  --bs-btn-hover-bg: var(--rb-ostsee-strong); --bs-btn-hover-color: var(--rb-on-ostsee); --bs-btn-hover-border-color: var(--rb-ostsee-strong);
  --bs-btn-active-bg: var(--rb-ostsee-strong); --bs-btn-active-color: var(--rb-on-ostsee); --bs-btn-active-border-color: var(--rb-ostsee-strong);
}
.btn-outline-primary {
  --bs-btn-color: var(--rb-ostsee); --bs-btn-border-color: var(--rb-ostsee);
  --bs-btn-hover-bg: var(--rb-ostsee); --bs-btn-hover-color: var(--rb-on-ostsee); --bs-btn-hover-border-color: var(--rb-ostsee);
  --bs-btn-active-bg: var(--rb-ostsee-strong); --bs-btn-active-color: var(--rb-on-ostsee);
}
.btn-buchen {
  --bs-btn-bg: var(--rb-sanddorn); --bs-btn-color: var(--rb-on-sanddorn); --bs-btn-border-color: var(--rb-sanddorn-text);
  --bs-btn-hover-bg: var(--rb-sanddorn-strong); --bs-btn-hover-color: var(--rb-on-sanddorn); --bs-btn-hover-border-color: var(--rb-sanddorn-text);
  --bs-btn-active-bg: var(--rb-sanddorn-strong); --bs-btn-active-color: var(--rb-on-sanddorn); --bs-btn-active-border-color: var(--rb-sanddorn-text);
}
[data-bs-theme="dark"] .btn-buchen { --bs-btn-border-color: var(--rb-sanddorn); --bs-btn-hover-border-color: var(--rb-sanddorn-strong); }

/* --- Formulare --- */
.form-label { font-weight: 600; color: var(--rb-schiefer); margin-bottom: .25rem; font-size: 1rem; }
.form-control, .form-select {
  background-color: var(--rb-surface); border-color: var(--rb-control-border); color: var(--rb-schiefer);
  min-height: 48px;
}
.form-control::placeholder { color: var(--rb-ink-muted); opacity: 1; }
.input-group-text { background-color: var(--rb-sand); border-color: var(--rb-control-border); color: var(--rb-schiefer); }
.input-group-text svg { width: 1.125rem; height: 1.125rem; }

/* =====================================================================
   Navigation (sticky)
   ===================================================================== */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1030;
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(8, 58, 80, .12); }
.site-header .navbar { min-height: var(--rb-nav-h); padding-block: .5rem; }
.brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--rb-schiefer); }
.brand:hover { color: var(--rb-ostsee); }
.brand-name { font-family: var(--rb-font-serif); font-weight: 600; font-size: 1.375rem; line-height: 1; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand-mark .sonne { fill: var(--rb-sanddorn); }
.brand-mark .welle { fill: none; stroke: var(--rb-ostsee); stroke-width: 3; stroke-linecap: round; }
.site-header .nav-link {
  color: var(--rb-schiefer); font-weight: 600; padding: .75rem 1rem; border-radius: 8px;
}
.site-header .nav-link:hover { color: var(--rb-ostsee); background: var(--rb-ostsee-soft); }
.site-header .nav-link[aria-current="page"] { color: var(--rb-ostsee); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.navbar-toggler { border-color: var(--rb-control-border); min-height: 44px; min-width: 44px; }
.navbar-toggler-icon { filter: none; }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { padding-block: .5rem 1rem; }
  .site-header .nav-cta { margin-top: .5rem; }
}

/* =====================================================================
   Hero mit Hintergrundbild und Suche
   ===================================================================== */
.hero { position: relative; isolation: isolate; color: #FFFFFF; overflow: hidden; }
.hero-bild, .hero-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.hero-bild img { object-fit: cover; object-position: 30% 45%; }
/* Abdunklung: garantiert ≥ 4,5 : 1 für weißen Text, auch über Wolken (geprüft gegen reines Weiß) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8, 58, 80, .74);
}
@media (min-width: 992px) {
  .hero::before {
    background: linear-gradient(90deg, rgba(8,58,80,.82) 0%, rgba(8,58,80,.74) 58%, rgba(8,58,80,.28) 100%);
  }
}
.hero-inhalt { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero-ort {
  font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; margin-bottom: 1rem; color: #FFFFFF;
}
.hero h1 {
  color: #FFFFFF; font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: .98; margin-bottom: 1.25rem;
  max-width: 12ch;
}
.hero .lead { color: #FFFFFF; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; max-width: 34rem; margin-bottom: 0; }
.hero-bildnachweis { position: absolute; right: 1rem; bottom: .5rem; font-size: .8125rem; color: #FFFFFF; margin: 0; }

/* Suchkarte */
.suche {
  background: var(--rb-surface); color: var(--rb-schiefer);
  border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 24px 60px rgba(6, 30, 42, .35);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.suche-titel { font-size: 1.5rem; margin-bottom: .25rem; color: var(--rb-schiefer); }
.suche-hinweis { color: var(--rb-ink-muted); font-size: 1rem; margin-bottom: 1.25rem; }
.suche .btn-buchen { min-height: 48px; padding-inline: 1.75rem; }

/* Ergebnisse */
.ergebnisse { padding-block: 3rem; background: var(--rb-surface); border-bottom: 1px solid var(--rb-line); }
#ergebnisse-titel:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* =====================================================================
   Inhaltsbereiche
   ===================================================================== */
.abschnitt { padding-block: clamp(3.5rem, 8vw, 6rem); }
.abschnitt-sand { background: var(--rb-sand); }
.abschnitt-soft { background: var(--rb-ostsee-soft); }
.eyebrow {
  font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rb-sanddorn-text); margin-bottom: .5rem;
}
.abschnitt h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin-bottom: 1rem; }
.abschnitt-intro { max-width: 40rem; color: var(--rb-schiefer); }
.text-muted-rb { color: var(--rb-ink-muted); }

/* Rügen auf einen Blick */
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--rb-schiefer); margin: 0; }
@media (min-width: 768px) { .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fakt { padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--rb-line); }
.fakt dt { order: 2; font-weight: 400; color: var(--rb-ink-muted); font-size: 1rem; line-height: 1.4; }
.fakt dd {
  margin: 0 0 .25rem; font-family: var(--rb-font-serif); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; color: var(--rb-ostsee); font-variant-numeric: tabular-nums;
}
.fakt { display: flex; flex-direction: column; }
.fakt dd { order: 1; }
.fakt dd small { font-size: .5em; font-weight: 600; margin-left: .15em; }

/* Orte */
.orte { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .orte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .orte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ort {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  background: var(--rb-surface); border: 1px solid var(--rb-line); border-radius: 16px;
  padding: 1.5rem 1.5rem 1.25rem; min-width: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.ort:hover { border-color: var(--rb-ostsee); transform: translateY(-2px); }
.ort-lage { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rb-buche); margin: 0; }
.ort h3 { font-size: 1.75rem; margin: 0; }
.ort h3 a { color: var(--rb-schiefer); text-decoration: none; }
.ort h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* ganze Karte klickbar */
.ort h3 a:hover { color: var(--rb-ostsee); }
.ort h3 a:focus-visible { outline: none; box-shadow: none; }
.ort:has(a:focus-visible) { outline: 3px solid var(--rb-focus); outline-offset: 3px; }
.ort p { margin: 0; color: var(--rb-schiefer); font-size: 1.0625rem; line-height: 1.55; }
.ort-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: auto 0 0; padding: .75rem 0 0; list-style: none; }
.ort-tags li {
  font-size: .875rem; font-weight: 600; line-height: 1.3; padding: .25rem .625rem; border-radius: 999px;
  background: var(--rb-buche-soft); color: var(--rb-buche);
}

/* Sehenswürdigkeiten */
.ziele { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rb-schiefer); }
.ziel { display: grid; grid-template-columns: 1fr; gap: .25rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rb-line); }
@media (min-width: 768px) { .ziel { grid-template-columns: 15rem minmax(0, 1fr); } }
.ziel h3 { font-size: 1.375rem; margin: 0; line-height: 1.25; }
.ziel-ort { display: block; font-family: var(--rb-font-sans); font-size: .9375rem; font-weight: 600; color: var(--rb-ink-muted); margin-top: .25rem; letter-spacing: 0; }
.ziel p { margin: 0; }

/* Reisezeit */
.zeiten { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .zeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zeit { background: var(--rb-surface); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.zeit svg { width: 2.5rem; height: 2.5rem; }
.zeit h3 { font-size: 1.5rem; margin: .25rem 0 0; }
.zeit-monate { font-weight: 600; color: var(--rb-sanddorn-text); font-size: 1rem; margin: 0; }
.zeit p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.ico-stroke { fill: none; stroke: var(--rb-ostsee); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-fill { fill: var(--rb-sanddorn); }

/* So funktioniert's */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schritte li { counter-increment: schritt; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.schritte li::before {
  content: counter(schritt); display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--rb-ostsee); color: var(--rb-on-ostsee);
  font-family: var(--rb-font-serif); font-weight: 600; font-size: 1.5rem;
}
.schritte h3 { font-size: 1.375rem; margin: .5rem 0 0; }
.schritte p { margin: 0; }

/* FAQ */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rb-line); }
.faq details:first-of-type { border-top: 2px solid var(--rb-schiefer); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.125rem 0; font-family: var(--rb-font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.35;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .75rem; height: .75rem; margin-right: .25rem;
  border-right: 2.5px solid var(--rb-ostsee); border-bottom: 2.5px solid var(--rb-ostsee);
  transform: rotate(45deg) translateY(-25%); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq summary:hover { color: var(--rb-ostsee); }
.faq .antwort { padding: 0 0 1.25rem; max-width: 46rem; }
.faq .antwort p:last-child { margin-bottom: 0; }

/* Footer */
.site-footer { background: var(--rb-footer); color: var(--rb-on-footer); padding-block: 3.5rem 2rem; }
.site-footer h2 { font-family: var(--rb-font-sans); font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rb-on-footer); margin-bottom: 1rem; }
.site-footer p { color: var(--rb-on-footer-muted); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-block; padding-block: .375rem; color: var(--rb-on-footer); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer :focus-visible { outline-color: var(--rb-sanddorn); box-shadow: none; }
.footer-unten { border-top: 1px solid rgba(255,255,255,.2); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .9375rem; color: var(--rb-on-footer-muted); }
.site-footer .brand-name { color: var(--rb-on-footer); }
.site-footer .brand-mark .welle { stroke: var(--rb-on-footer); }

/* =====================================================================
   Datepicker (bootstrap-datepicker) im Farbkonzept
   ===================================================================== */
.datepicker-dropdown {
  background: var(--rb-surface); color: var(--rb-schiefer);
  border: 1px solid var(--rb-control-border); border-radius: 12px;
  padding: .5rem; font-size: 1rem; box-shadow: 0 12px 32px rgba(6, 30, 42, .22);
  z-index: 1060 !important;
}
.datepicker-dropdown.datepicker-orient-bottom:before { border-bottom-color: var(--rb-control-border); }
.datepicker-dropdown.datepicker-orient-bottom:after  { border-bottom-color: var(--rb-surface); }
.datepicker-dropdown.datepicker-orient-top:before    { border-top-color: var(--rb-control-border); }
.datepicker-dropdown.datepicker-orient-top:after     { border-top-color: var(--rb-surface); }
/* Klickflächen ≥ 40 px (WCAG 2.5.8) */
.datepicker table tr td, .datepicker table tr th { width: 2.5rem; height: 2.5rem; border-radius: 8px; }
.datepicker .dow { color: var(--rb-ink-muted); font-weight: 600; font-size: .875rem; }
.datepicker .datepicker-switch { font-family: var(--rb-font-serif); font-weight: 600; }
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--rb-ink-muted); }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: var(--rb-ink-muted); text-decoration: line-through; background: none; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused,
.datepicker table tr td span:hover, .datepicker table tr td span.focused,
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover,
.datepicker tfoot tr th:hover { background: var(--rb-ostsee-soft); color: var(--rb-schiefer); }
.datepicker table tr td.today, .datepicker table tr td.today:hover {
  background: var(--rb-sanddorn-soft); background-image: none; color: var(--rb-schiefer); font-weight: 600;
}
.datepicker table tr td.range { background: var(--rb-ostsee-soft); color: var(--rb-schiefer); border-radius: 0; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.highlighted,
.datepicker table tr td.active.active, .datepicker table tr td.selected,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover {
  background: var(--rb-ostsee) !important; background-image: none !important;
  color: var(--rb-on-ostsee) !important; border-color: var(--rb-ostsee); text-shadow: none;
}

/* --- Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ort:hover { transform: none; }
}

/* =====================================================================
   Unterseiten: Seitenkopf, Brotkrumen, Rechtstexte
   ===================================================================== */
.seitenkopf { background: var(--rb-ostsee-soft); padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rb-line); }
.seitenkopf h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; margin: 0; hyphens: auto; overflow-wrap: break-word; }
.seitenkopf .lead { font-size: 1.1875rem; line-height: 1.55; max-width: 40rem; margin: 1rem 0 0; color: var(--rb-schiefer); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1rem; padding: 0; font-size: 1rem; }
.brotkrumen li { display: flex; align-items: center; gap: .5rem; color: var(--rb-ink-muted); }
.brotkrumen li + li::before { content: "›"; color: var(--rb-ink-muted); }
.brotkrumen a { color: var(--rb-ostsee); text-decoration: underline; text-underline-offset: .2em; }
.brotkrumen [aria-current="page"] { color: var(--rb-schiefer); font-weight: 600; }

.rechtstext { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rechtstext .text { max-width: 46rem; min-width: 0; }
.rechtstext h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.2; margin: 3rem 0 1rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rb-line);
}
.rechtstext .text > h2:first-child, .rechtstext .text > section:first-child > h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .5rem; }
.rechtstext p, .rechtstext li { max-width: 70ch; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .375rem; }
.rechtstext a { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.rechtstext address { font-style: normal; line-height: 1.6; margin-bottom: 1rem; }
.kontakt-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1.25rem; margin: 0 0 1rem; }
.kontakt-liste dt { font-weight: 600; }
.kontakt-liste dd { margin: 0; min-width: 0; }
.hinweis-box {
  background: var(--rb-sand); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.hinweis-box > :last-child { margin-bottom: 0; }
.stand { color: var(--rb-ink-muted); font-size: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rb-line); }

/* Inhaltsverzeichnis (Datenschutz) */
.toc { background: var(--rb-surface); border: 1px solid var(--rb-line); border-radius: 12px; padding: 1.25rem 1.5rem; }
.toc h2 { font-family: var(--rb-font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rb-ink-muted); margin: 0 0 .75rem; padding: 0; border: 0; }
.toc ol { margin: 0; padding-left: 1.25rem; font-size: 1rem; }
.toc li { margin-bottom: .25rem; }
.toc a { color: var(--rb-ostsee); text-decoration: none; display: inline-block; padding-block: .25rem; }
.toc a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 992px) {
  .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--rb-nav-h) + 1.5rem); }
}

/* Status-Kennzeichnung (Barrierefreiheit) */
.status-label {
  display: inline-block; font-weight: 600; font-size: 1rem; padding: .25rem .75rem; border-radius: 999px;
  background: var(--rb-sanddorn-soft); color: var(--rb-schiefer); border: 1px solid var(--rb-sanddorn-text);
}

/* Platzhalter: vor dem Livegang ersetzen – fallen absichtlich auf */
.platzhalter {
  background: var(--rb-sanddorn-soft); color: var(--rb-schiefer);
  outline: 2px dashed var(--rb-sanddorn-text); outline-offset: 1px; border-radius: 4px; padding: 0 .25rem;
}

/* Footer: aktuelle Seite kennzeichnen */
.site-footer li a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }


/* =====================================================================
   8. Suchen und Buchen: Ergebnisse (aus der bisherigen style.css)
      Feste Farben auf die Farb-Variablen umgestellt, damit Kontraste
      und das dunkle Design stimmen. Ursprungswerte stehen als Kommentar dabei.
   ===================================================================== */

.input-group-text { padding: .75rem; }

#results {
  margin-top: 1.5rem;                 /* vorher 50px – darüber steht jetzt die Überschrift „Freie Unterkünfte“ */
  margin-inline: auto;
}
#results tbody td { vertical-align: middle !important; }

.title { font-size: 1.25rem; }       /* vorher 20px */

/* Wochenende im Belegungskalender: weiße Schrift setzt voraus, dass die Zelle
   einen dunklen Hintergrund hat (mind. 4,5 : 1). Bitte im Kalender prüfen. */
.weekday-6, .weekday-7 {
  font-weight: 600 !important;
  color: #FFF !important;
}

.table {
  --bs-table-bg: var(--rb-surface);
  --bs-table-color: var(--rb-schiefer);
  --bs-table-border-color: var(--rb-line);
}
.table td, .table th {
  padding: .5rem;                    /* vorher .2rem */
  font-size: 1rem;                   /* vorher .9rem */
}

.rating {
  position: relative;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  margin-top: -1.75rem;
  margin-left: .75rem;
  justify-content: center;
  align-items: center;
  border: .25rem solid var(--rb-surface);   /* vorher #fff */
  border-radius: 50%;
  color: var(--rb-on-ostsee);              /* vorher #fff */
  background-color: var(--rb-ostsee);      /* vorher #171469 */
  font-weight: 600;
}

.image { max-width: 100%; }

.card {
  --bs-card-bg: var(--rb-surface);
  --bs-card-border-color: var(--rb-line);
  --bs-card-border-radius: 16px;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--rb-surface);     /* vorher #fff – im dunklen Design sonst weißer Kasten */
  border: none;
  border-radius: 16px;                     /* vorher .5rem */
  min-height: 20rem;
  box-shadow: 0 7px 35px 0 rgba(6, 30, 42, .10);
}

.card-title {
  font-family: var(--rb-font-serif);       /* vorher 'Lato' – war nicht eingebunden */
  font-weight: 600;
  color: var(--rb-schiefer);               /* vorher #171469 */
  font-size: 1.25rem;                      /* vorher 1rem */
  line-height: 1.3;
  margin-bottom: .75rem;
}

.card-body {
  flex: 1 1 auto;
  min-height: 300px;
  padding: 1.25rem;
}

.card-text {
  font-weight: 400;                        /* vorher 100 – kaum lesbar */
  font-size: 1rem;                         /* vorher 13px */
  line-height: 1.5;
  margin-bottom: .8rem;
}

.marker {
  color: var(--rb-danger);                 /* vorher red */
  font-size: 130%;
}

.star-rating {
  color: var(--rb-sanddorn-text);          /* vorher #f7b944 – nur 1,8 : 1 auf Weiß */
}

.roomitems {
  min-height: 35px;
  font-size: 1rem;                         /* vorher 14px */
  margin-top: 30px;
}

.roomdesc { min-height: 50px; }

/* --- Ergebnisliste aus ajax_search.php --- */
.ergebnis-anzahl { font-weight: 600; margin-bottom: 1rem; }
.ergebnis-liste { margin-block: 0; padding: 0; }
.suche-laedt { display: flex; align-items: center; gap: .75rem; color: var(--rb-ink-muted); margin: 1rem 0; }
.card > a:first-child { display: block; }
.card .image {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px 16px 0 0; background: var(--rb-sand);
}
.card-title a { color: var(--rb-schiefer); text-decoration: none; }
.card-title a:hover { color: var(--rb-ostsee); text-decoration: underline; text-underline-offset: .2em; }
.roomitems { margin-left: 0; margin-right: 0; padding: 0; }
.roomitems > li { padding-left: 0; }

/* --- Meldungen im Farbkonzept (Bootstraps Standardfarben verfehlen 4,5 : 1) --- */
.alert { border-radius: 12px; font-size: 1rem; }
.alert-success { --bs-alert-bg: var(--rb-success-soft); --bs-alert-color: var(--rb-success); --bs-alert-border-color: var(--rb-success); }
.alert-danger  { --bs-alert-bg: var(--rb-danger-soft);  --bs-alert-color: var(--rb-danger);  --bs-alert-border-color: var(--rb-danger); }
.alert-warning { --bs-alert-bg: var(--rb-sanddorn-soft); --bs-alert-color: var(--rb-schiefer); --bs-alert-border-color: var(--rb-sanddorn-text); }
.alert-info    { --bs-alert-bg: var(--rb-ostsee-soft);  --bs-alert-color: var(--rb-schiefer); --bs-alert-border-color: var(--rb-ostsee); }

/* =====================================================================
   9. Ortsseiten
   ===================================================================== */
.seitenkopf .eyebrow { margin-bottom: .5rem; }
.ort-seite { padding-top: clamp(2rem, 5vw, 3rem); }
.ort-text { min-width: 0; }
.ort-text > section + section { margin-top: 3rem; }
.ort-text h2 { font-size: clamp(1.625rem, 3vw, 2rem); line-height: 1.2; margin-bottom: 1rem; }
.ort-text p { max-width: 70ch; }
.ort-text .ziele { margin-top: 1.5rem; }
.ort-text .ziel { grid-template-columns: 1fr; }
@media (min-width: 768px) { .ort-text .ziel { grid-template-columns: 13rem minmax(0, 1fr); } }

.steckbrief {
  background: var(--rb-surface); border: 1px solid var(--rb-line); border-radius: 16px;
  padding: 1.5rem;
}
@media (min-width: 992px) {
  .steckbrief { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--rb-nav-h) + 1.5rem); }
}
.steckbrief h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.steckbrief dl { margin: 0; font-size: 1rem; }
.steckbrief dt { font-weight: 600; color: var(--rb-ink-muted); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.steckbrief dd { margin: 0 0 .875rem; }
.steckbrief a { text-decoration: underline; text-underline-offset: .2em; }
.steckbrief-cta { border-top: 1px solid var(--rb-line); padding-top: 1rem; margin-top: .25rem; }
.steckbrief-cta p { font-size: 1rem; margin-bottom: .75rem; }

/* =====================================================================
   10. Bildkopf, Bildkarten, Sehenswürdigkeiten
   ===================================================================== */
.bildkopf { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; }
.bildkopf-bild, .bildkopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.bildkopf-bild img { object-fit: cover; }
/* Abdunklung wie im Hero: weißer Text bleibt über jedem Bildbereich ≥ 4,5 : 1 */
.bildkopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 58, 80, .74); }
@media (min-width: 992px) {
  .bildkopf::before { background: linear-gradient(90deg, rgba(8,58,80,.84) 0%, rgba(8,58,80,.74) 55%, rgba(8,58,80,.35) 100%); }
}
.bildkopf-inhalt { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); }
.bildkopf h1 { color: #FFFFFF; font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: 1.02; margin: 0 0 1rem; max-width: 19ch; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 575.98px) { .bildkopf h1 { hyphens: auto; } }
.bildkopf .lead { color: #FFFFFF; font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.55; max-width: 38rem; margin: 0; }
.bildkopf-eyebrow { font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 .5rem; }
.bildkopf .brotkrumen li, .bildkopf .brotkrumen li + li::before, .bildkopf .brotkrumen [aria-current="page"] { color: #FFFFFF; }
.bildkopf .brotkrumen a { color: #FFFFFF; }
.bildkopf :focus-visible { outline-color: var(--rb-sanddorn); box-shadow: none; }
[data-bs-theme="dark"] .bildkopf :focus-visible { outline-color: #F4A259; }

/* Ortskarten mit Bild */
.ort--bild { padding-top: 0; overflow: hidden; }
.ort-bild { display: block; margin: 0 -1.5rem .75rem; }
.ort-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.ort-bald { display: inline-block; vertical-align: middle; margin-left: .5rem; font-family: var(--rb-font-sans); font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--rb-ink-muted); }
.ort--ohne-link:hover { transform: none; border-color: var(--rb-line); }

/* Sehenswürdigkeiten: Bild + Text im Wechsel */
.sehens-liste { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.sehens { display: grid; gap: 1.25rem 2.5rem; align-items: center; scroll-margin-top: calc(var(--rb-nav-h) + 1rem); }
@media (min-width: 992px) {
  .sehens { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .sehens:nth-child(even) .sehens-bild { order: 2; }
}
.sehens-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: var(--rb-sand); }
.sehens-text { min-width: 0; }
.sehens-text h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.2; margin: 0 0 .75rem; }
.sehens-text p { max-width: 62ch; }
.ziel-tipp { background: var(--rb-sand); border-radius: 12px; padding: .875rem 1rem; font-size: 1rem; margin: 0; }
.ziel-tipp a { text-decoration: underline; text-underline-offset: .2em; }

/* Bilder im Fließtext */
.tipp-figur { margin: 1.5rem 0; }
.tipp-figur img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--rb-sand); }
.tipp-figur figcaption { font-size: .9375rem; color: var(--rb-ink-muted); margin-top: .5rem; }
.ort-text ul:not(.ziele) { padding-left: 1.25rem; }
.ort-text ul:not(.ziele) li { margin-bottom: .375rem; }
.ort-text .hinweis-box { background: var(--rb-sand); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.ort-text .hinweis-box h3 { font-size: 1.25rem; }
.ort-text .hinweis-box > :last-child { margin-bottom: 0; }

/* =====================================================================
   11. 404-Seite
   ===================================================================== */
.fehler-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fehler-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .fehler-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fehler-kachel a {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: 1.25rem 1.5rem; border: 1px solid var(--rb-line); border-radius: 16px;
  background: var(--rb-surface); color: var(--rb-schiefer); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.fehler-kachel a:hover { border-color: var(--rb-ostsee); transform: translateY(-2px); }
.fehler-kachel-titel { font-family: var(--rb-font-serif); font-weight: 600; font-size: 1.375rem; color: var(--rb-ostsee); }
.fehler-kachel-text { font-size: 1rem; color: var(--rb-ink-muted); }
.bildkopf .btn-outline-light { --bs-btn-color: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-color: #083A50; --bs-btn-active-bg: #FFFFFF; --bs-btn-active-color: #083A50; }
@media (prefers-reduced-motion: reduce) { .fehler-kachel a:hover { transform: none; } }

/* =====================================================================
   12. Buchungsseiten: Suche im Bildkopf
   ===================================================================== */
.bildkopf--suche .bildkopf-inhalt { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.bildkopf .suche { color: var(--rb-schiefer); }
/* Im weißen Suchfeld gilt wieder der normale Fokusring (Sanddorn hell hätte dort zu wenig Kontrast) */
.bildkopf .suche :focus-visible,
.bildkopf .suche .form-control:focus,
.bildkopf .suche .form-select:focus { outline: 3px solid var(--rb-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--rb-surface); }

/* =====================================================================
   13. Unterkunftsseiten: Galerie, Preistabelle, Kontakt
   ===================================================================== */
.galerie { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie figure { margin: 0; }
.galerie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--rb-sand); }
.galerie figcaption { font-size: .875rem; color: var(--rb-ink-muted); margin-top: .375rem; line-height: 1.35; }
.wohnung-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 1.5rem 0; }
@media (min-width: 768px) { .wohnung-daten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wohnung-daten div { border-top: 2px solid var(--rb-line); padding-top: .5rem; }
.wohnung-daten dt { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rb-ink-muted); }
.wohnung-daten dd { margin: 0; font-size: 1.125rem; }
.preise { margin: 1.5rem 0 .5rem; }
.preise caption { caption-side: top; color: var(--rb-schiefer); font-weight: 600; font-size: 1.125rem; padding: 0 0 .5rem; }
.preise th[scope="col"] { font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rb-ink-muted); }
.preise td.betrag { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.preise th.betrag { text-align: right; }
.preise-hinweis { font-size: .9375rem; color: var(--rb-ink-muted); }
.kontaktwege { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 768px) { .kontaktwege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontaktwege li { border: 1px solid var(--rb-line); border-radius: 12px; padding: 1rem 1.25rem; background: var(--rb-surface); }
.kontaktwege strong { display: block; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rb-ink-muted); }
.kontaktwege a { font-size: 1.125rem; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.unterkunft-tipp { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .unterkunft-tipp { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.unterkunft-tipp img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.ort-text ul.galerie, .ort-text ul.kontaktwege { padding-left: 0; }
.ort-text ul.galerie li, .ort-text ul.kontaktwege li { margin-bottom: 0; }