/* ==========================================================================
   Ferienhaus-Privat.de — Custom-Theme für Bootstrap 5.3
   Ersetzt fewoprivat.css + user.style.css für alle auf Bootstrap 5 umgestellten
   Seiten. Baut auf den Bootstrap-5-CSS-Variablen auf (kein Sass-Rebuild nötig).
   Einbindung IMMER nach dem Bootstrap-5-CSS-Link:
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="/style/bootstrap5-custom.css" rel="stylesheet">
   ========================================================================== */

/* Container-Breiten des Originals (Bootstrap 3: 750/970/1170) statt Bootstrap
   5s Standardwerten (720/960/1140/1320) - nur wenige Pixel Unterschied, aber
   für 1:1-Vergleichbarkeit trotzdem angeglichen. */
@media (min-width: 768px) { .container { max-width: 750px; } }
@media (min-width: 992px) { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } .container.py-4 { min-width: 1170px; } }

/* Die kundenspezifischen styleN/style.css (Standard/Premium, nach dieser
   Datei geladen) setzen auf Mobilgeräten ".container{padding:0px}" - war für
   die alte, verschachtelte .content-Div mit eigenem Innen-Padding gedacht,
   die es in der neuen Vorlage nicht mehr gibt. Zwei-Klassen-Selektor hat
   höhere Spezifität als das dortige einfache ".container" und gewinnt daher
   unabhängig von der Ladereihenfolge. */
.container.py-3, .container.py-4 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

:root {
  /* WICHTIG: Es gibt im Original ZWEI Blautöne, keinen einzelnen -
     bewusst beide übernommen statt vereinheitlicht:
     - #337ab7 ist die reine Bootstrap-3-Standardfarbe für Buttons (.btn-primary)
     - #1565C0 ist die eigentliche Marken-/Akzentfarbe des RealSite-Themes
       (Header, Links, Icons, aktive Zustände) - kommt aus assets/css/realsite.css,
       NICHT aus fewoprivat.css/user.style.css (die stock Bootstrap-3-Bündel sind). */
  --bs-primary: #337ab7;
  --bs-primary-rgb: 51, 122, 183;
  --bs-primary-text-emphasis: #23527c;
  --bs-primary-bg-subtle: #eaf2f9;
  --bs-primary-border-subtle: #b8d3e8;

  --ferienhaus-accent: #1565c0;
  --ferienhaus-accent-rgb: 21, 101, 192;
  --bs-link-color: #1565c0;
  --bs-link-color-rgb: 21, 101, 192;
  --bs-link-hover-color: #0d47a1;
  --bs-link-hover-color-rgb: 13, 71, 161;

  /* Theme-Flächenfarben, wörtlich aus assets/css/realsite.css übernommen */
  --ferienhaus-topbar-bg: #0d47a1;
  --ferienhaus-topbar-text: #fffff6;
  --ferienhaus-footer-bg: #fff7c6;
  --ferienhaus-footer-text: #003366;
  --ferienhaus-promo-bg: #eeeeee;
  --ferienhaus-promo-text: #424242;
  --ferienhaus-muted-text: #616161;
  --ferienhaus-title-text: #232323;
  --ferienhaus-location-text: #9e9e9e;

  /* Status-/Alertfarben (unverändert aus dem bisherigen Theme) */
  --bs-success: #5cb85c;
  --bs-info: #5bc0de;
  --bs-warning: #f0ad4e;
  --bs-danger: #d9534f;

  --bs-body-color: #333333;
  --bs-body-bg: #ffffff;
  --bs-secondary-color: #6b7a86;
  --bs-secondary-bg: #f4f6f8;
  --bs-border-color: #dde3e8;
  --bs-tertiary-bg: #f8f9fa;

  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;

  --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ferienhaus-font-display: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --ferienhaus-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --ferienhaus-shadow: 0 1px 2px rgba(24, 35, 46, 0.06), 0 14px 30px -14px rgba(24, 35, 46, 0.3);

  /* Bootstrap-3-Schriftskala des Originals (fewoprivat.css), 1:1 übernommen -
     Bootstrap 5s Standardgrößen sind rem-basiert und deutlich größer, das war
     die Hauptursache für die abweichende Optik. */
  --bs-body-font-size: 0.875rem;   /* 14px */
  --bs-body-line-height: 1.428571429;
  --ferienhaus-h1: 2.25rem;  /* 36px */
  --ferienhaus-h2: 1.875rem; /* 30px */
  --ferienhaus-h3: 1.5rem;   /* 24px */
  --ferienhaus-h4: 1.125rem; /* 18px */
  --ferienhaus-h5: 0.875rem; /* 14px */
  --ferienhaus-h6: 0.75rem;  /* 12px */
}

/* Optionaler Dark-Mode-Zweig, falls data-bs-theme="dark" später genutzt wird.
   Wird aktuell auf keiner Seite gesetzt - rein vorbereitend, ändert am
   Erscheinungsbild der Seite nichts, solange das Attribut nicht gesetzt ist. */
[data-bs-theme="dark"] {
  --bs-primary: #6fb2e8;
  --bs-primary-text-emphasis: #9bcaf2;
  --bs-primary-bg-subtle: #16232e;
  --ferienhaus-accent: #6fb2e8;
  --bs-body-color: #e9edf1;
  --bs-body-bg: #12171c;
  --bs-secondary-bg: #1a2027;
  --bs-border-color: #2b333b;
}

/* Alle Schriftgrößen im Theme sind in rem definiert (relativ zur Root-
   Schriftgröße von <html>) - auf Mobilgeräten wirkte dadurch der gesamte
   Text durchgängig etwas klein. Statt jede einzelne Klasse anzupassen,
   Root-Schriftgröße hier leicht anheben, damit alles proportional mitwächst. */
@media (max-width: 576px) {
  html {
    font-size: 112.5%; /* 16px -> 18px Basis */
  }
}

body {
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

h1, .h1 { font-size: var(--ferienhaus-h1); }
h2, .h2 { font-size: var(--ferienhaus-h2); }
h3, .h3 { font-size: var(--ferienhaus-h3); }
h4, .h4 { font-size: var(--ferienhaus-h4); }
h5, .h5 { font-size: var(--ferienhaus-h5); }
h6, .h6 { font-size: var(--ferienhaus-h6); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500;
  line-height: 1.1;
}
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

/* Nur die eigentliche Logo-/Markenschrift nutzt Montserrat, wie im Original -
   normale Überschriften bleiben bei Helvetica Neue (siehe H1-H6 oben). */
.navbar-brand, .display-heading {
  font-family: var(--ferienhaus-font-display);
}
a { color: var(--ferienhaus-accent); }
a:hover { color: var(--bs-link-hover-color); }

a {
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Topbar (schmale Leiste über der Hauptnavigation) — wörtlich aus
   realsite.css .header-topbar { background:#0D47A1; color:#FFFFF6; padding:3px 0 }
   --------------------------------------------------------------------- */
.topbar {
  font-size: 0.8rem;
  background: var(--ferienhaus-topbar-bg);
  color: #ffffff;
  padding: 3px 0;
}
.topbar a {
  color: #ffffff;
}
.topbar a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Hauptnavigation — Kopfzeile (Logo/Nav-Bereich) mit Hintergrund #FFF7C6
   --------------------------------------------------------------------- */
.bg-header-main {
  background-color: var(--ferienhaus-footer-bg); /* #FFF7C6 */
}
/* ---------------------------------------------------------------------
   .header-title { font-family:Montserrat; font-size:30px }
   --------------------------------------------------------------------- */
.navbar-brand {
  font-family: var(--ferienhaus-font-display);
  font-size: 1.875rem; /* 30px, wie .header-title im Original */
  color: var(--ferienhaus-accent);
}
.navbar-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ferienhaus-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.navbar-brand small {
  display: block;
  font-family: var(--bs-font-sans-serif);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* Auf sehr schmalen Mobilgeräten drängt der Titel den Menü-Button eng
   zusammen - Marke verkleinern und Zeile "Direkt vom Eigentümer" ausblenden,
   damit der Button ausreichend Platz behält. Grenze bewusst über 400px, da
   z.B. das Pixel 9 eine CSS-Breite von 412px hat. */
@media (max-width: 480px) {
  /* Bootstraps .navbar > .container ist flex-wrap:wrap - Button rutscht
     deshalb in die zweite Zeile, sobald Marke + Button nicht mehr
     nebeneinander passen. Erzwingt eine Zeile; Marke darf schrumpfen/
     abschneiden, Button bleibt in fixer Größe erhalten. */
  .navbar > .container {
    flex-wrap: nowrap;
  }
  .navbar .container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .navbar-brand {
    font-size: 1.8rem;
    gap: 0.4rem !important;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .navbar-brand > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .navbar-brand-mark {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  .navbar-brand small {
    display: none;
  }
  .navbar-toggler {
    flex-shrink: 0;
  }
  .navbar-toggler {
    padding: 0.15rem 0.4rem;
    font-size: 0.9rem;
  }
}
.nav-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bs-body-color);
}
.nav-link:hover, .nav-link:focus { color: var(--ferienhaus-accent); }
.dropdown-menu {
  box-shadow: var(--ferienhaus-shadow-sm);
  border-color: var(--bs-border-color);
}
.dropdown-item:hover, .dropdown-item:focus { color: var(--ferienhaus-accent); background: var(--bs-secondary-bg); }

/* ---------------------------------------------------------------------
   Suchbereich — wörtlich .map-filter-horizontal { position:relative; padding:15px }
   aus user.style.css, keine zusätzliche Karte/Verlauf wie in der ersten Fassung.
   --------------------------------------------------------------------- */
/* Suchleiste: Umbruch (flex-column/flex-sm-row) steuert index-bs5.php selbst
   über die Bootstrap-Klassen flex-column/flex-sm-row/flex-sm-nowrap - hier nur
   Breiten und der Scroll-Fallback ab Tablet-Breite. */
.search-row form { width: 100%; }
.search-row-select { width: 100% !important; }

@media (min-width: 576px) {
  .search-row {
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .search-row form { width: auto; min-width: 12rem; }
  .search-row form:last-child { min-width: 10rem; }
  .search-row-select { width: 12rem !important; }
}

.map-filter-horizontal {
  position: relative;
  background-color: rgba(13, 71, 161, 0.6);
  color: #fff176;
}
.map-filter-horizontal label,
.map-filter-horizontal .input-group-text {
  color: #fff176;
}
.map-filter-horizontal .input-group-text {
  background-color: transparent;
  border-color: #fff176;
}
.quick-dest .btn {
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Property-Carousel (Bootstrap-5-Carousel, ersetzt Owl Carousel).
   --------------------------------------------------------------------- */
.property-carousel .carousel-item {
  padding: 0 0.25rem;
}
.property-simple {
  margin-bottom: 0;
}
.property-simple-image {
  display: block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.06);
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
.property-simple-image img {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
}
.property-simple-content {
  padding: 0.9rem 0.1rem 0;
}
.property-simple-title {
  font-size: 0.94rem; /* 15px */
  margin: 0.9rem 0 0;
}
.property-simple-title a {
  color: var(--ferienhaus-title-text);
}
.property-simple-location {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgb(13, 71, 161);
}
.property-simple-location li a {
  color: rgb(13, 71, 161);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   "Spezielle Angebote" / Verkauf-Tausch Karten (agent-medium).
   Original ist KEINE große Foto-Karte, sondern ein 120px-Kreis-Icon links,
   Text daneben eingerückt (margin-left 140px) - 1:1 aus realsite.css:
   .agent-medium { background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.08);
                    margin-bottom:30px; padding:16px }
   .agent-medium-image { border-radius:50%; float:left; height:120px; width:120px }
   .agent-medium-content { margin:0 0 0 140px; color:#616161 }
   --------------------------------------------------------------------- */
.agent-medium {
  background: #fff;
  box-shadow: var(--ferienhaus-shadow-sm);
  margin-bottom: 1.875rem;
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}
.agent-medium::after { content: ""; display: block; clear: both; }
.agent-medium-image {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  display: block;
  float: left;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.agent-medium-image img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agent-medium-content {
  color: var(--ferienhaus-muted-text);
  margin: 0 0 0 140px;
  min-height: 120px;
}
.agent-medium-title {
  font-size: 1.125rem; /* 18px, entspricht h4 */
  margin: 0 0 0.3rem;
}
.agent-medium-title a {
  color: #424242;
}
.agent-medium-subtitle {
  color: var(--ferienhaus-muted-text);
  font-size: 0.8125rem; /* 13px */
}
.badge-lm { background: var(--bs-danger); }
.badge-golf { background: var(--bs-success); }
.badge-dog { background: var(--bs-warning); color: #3a2a06; }
.badge-ride { background: var(--ferienhaus-accent); }
@media (max-width: 420px) {
  .agent-medium-image { float: none; margin: 0 auto 1rem; }
  .agent-medium-content { margin-left: 0; text-align: center; }
}

/* ---------------------------------------------------------------------
   "Neue Einträge" (.property-row aus katalogeintrag_obj.php) - läuft als
   volle Zeile, nicht als Karte in einem Grid (Bild col-sm-3 + Inhalt
   col-sm-9 sind bereits in der Funktion selbst angelegt).
   --------------------------------------------------------------------- */
/* Eigenes Flex-Layout statt der Bootstrap-3-.col-sm-3/.col-sm-9-Floats aus der
   Original-Funktion - Bootstrap 5s .col-* braucht einen .row-Flex-Elternteil,
   den .property-row nicht hat, sonst stapeln sich Bild und Inhalt statt
   nebeneinander zu stehen. So ist das Bild immer links, fest 300x200px. */
.property-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.25rem;
  background: #fff;
  box-shadow: var(--ferienhaus-shadow-sm);
  margin-bottom: 1.875rem;
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}
.agency-row-image {
  flex: 0 0 0px;
  width: 300px;
}
.agency-row-image img {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
}
.property-row-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobil: Bild über Überschrift/Beschreibung statt links daneben. */
@media (max-width: 576px) {
  .property-row {
    flex-direction: column;
    gap: 0.2rem;
  }
  .agency-row-image {
    width: 100%;
  }
  .agency-row-image img {
    width: 100%;
  }
}
.property-row-title {
  font-size: 1.25rem; /* 30px * 2/3 = 20px, ein Drittel kleiner als Standard-h2 */
  color: #424242;
  margin-bottom: 0;
}
.property-row-title a { color: #424242; }
.property-row-body { color: var(--ferienhaus-muted-text); }
.property-row-location {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: block;
  list-style: none;
  margin: 0.6rem 0;
  padding: 0 0 0.6rem;
}
.property-row-location-start {
  font-size: 0.8rem;
  color: var(--ferienhaus-location-text);
}

/* ---------------------------------------------------------------------
   Vermieter-Promo-Band — wörtlich aus realsite.css:
   .promotion { background:#EEEEEE; padding:32px } .promotion-icon { color:#1565C0; font-size:70px }
   .promotion-text { color:#424242; font-size:18px; line-height:28px }
   --------------------------------------------------------------------- */
.promotion-band {
  background: var(--ferienhaus-promo-bg);
  color: var(--ferienhaus-promo-text);
  border-radius: var(--bs-border-radius);
  padding: 2rem;
}
.promotion-band .promo-icon {
  color: var(--ferienhaus-accent);
  font-size: 4.375rem; /* 70px */
  line-height: 1;
}
.promotion-band h2 { color: inherit; }
.promotion-band p { font-size: 1.125rem; line-height: 1.75rem; }
.promotion-band .btn-light:hover {
  background: var(--bs-primary-bg-subtle);
}

/* ---------------------------------------------------------------------
   Footer — .footer { background:#FFF7C6 } .footer-bottom { color:#003366 }
   --------------------------------------------------------------------- */
footer.site-footer {
  background: var(--ferienhaus-footer-bg);
  border-top: none;
  color: var(--ferienhaus-footer-text);
}
footer.site-footer h3,
footer.site-footer h5 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ferienhaus-footer-text);
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  opacity: 0.8;
}
footer.site-footer a {
  color: var(--ferienhaus-footer-text);
}
footer.site-footer a:hover {
  color: var(--ferienhaus-accent);
}
footer.site-footer address {
  font-style: normal;
  color: var(--ferienhaus-footer-text);
  font-size: 0.88rem;
  line-height: 1.7;
}
.scroll-top-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 51, 102, 0.25);
  color: var(--ferienhaus-footer-text);
}
.scroll-top-btn:hover {
  border-color: var(--ferienhaus-footer-text);
  background: rgba(0, 51, 102, 0.08);
}

/* ---------------------------------------------------------------------
   Objekt-Vorlagen (Haus/Lage/Bilder etc.) — schlanke Karten & Bild-Lightbox
   --------------------------------------------------------------------- */
.property-nav .nav-link {
  border-radius: var(--bs-border-radius);
}
.property-nav .nav-link.active {
  background: var(--bs-primary);
  color: #fff;
}
.lightbox-trigger {
  cursor: zoom-in;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  display: block;
}
.lightbox-trigger img {
  transition: transform 0.25s ease;
}
.lightbox-trigger:hover img {
  transform: scale(1.03);
}
#imageLightbox .modal-content {
  background: #000;
}
#imageLightbox .btn-close {
  filter: invert(1);
}
#imageLightbox figcaption {
  color: #f1f1f1;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-trigger img { transition: none; }
}

/* ==========================================================================
   Portiert aus https://plipscript.de/css/user.style.css (Stand 22.08.2017)
   auf Bootstrap 5.3. Jeder Block unten ist eine bewusste Entscheidung:
   entweder 1:1 übernommen (nur Bootstrap-5-Variablen/Klassen statt Bootstrap 3),
   oder ersetzt durch eine native Bootstrap-5-Lösung, oder ersatzlos gestrichen,
   weil die Ursache (alte Nav, Owl Carousel, Bootstrap-3-Grid-Bug) bereits durch
   den Bootstrap-5-Umbau selbst entfällt. Absichtlich NICHT übernommen:
   - .col-sm-3/.col-sm-9 Breakpoint-Hack: war ein Bootstrap-3-Grid-Bugfix,
     Bootstrap 5s Grid braucht das nicht.
   - .nav-main-inner Media-Query: gehörte zur alten Hover-Navigation, die durch
     die neue Navbar (header-kat-bs5.php) ersetzt wurde.
   - .angebote-vor/.angebote-weiter (Owl-Carousel-Pfeile per Float): ersetzt
     durch die nativen .carousel-control-prev/-next von Bootstrap 5.
   - .checkbox-inline.no_indent: Bootstrap 5 hat dafür .form-check-inline.
   - .map-filter-horizontal .input-group-addon (Gelb-Unterstrich-Effekt):
     .input-group-addon gibt es in Bootstrap 5 nicht mehr (jetzt .input-group-text);
     der Effekt war rein dekorativ und passt nicht zum neuen Marken-Blau.
   - der komplette .mdl-textfield-Block (Material Design Lite, ca. 40 Regeln):
     ersetzt durch Bootstrap 5s eingebaute Floating Labels, siehe Hinweis unten.
   ========================================================================== */

/* Suchleiste (.map-filter-horizontal) */
.hero-search .form-control[readonly] { cursor: pointer; }

/* Sterne-Bewertung */
.rating { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 2px; }
.rating .stars .fa {
  color: var(--bs-secondary-color);
  opacity: 0.35;
  font-size: 0.75rem;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.rating .stars .fa.active {
  opacity: 1;
  color: #e2551f; /* vormals #FF260D */
}

/* Kunden-/Objektbilder mit reduzierter Deckkraft (z. B. deaktivierte Einträge) */
.customer-img-muted { opacity: 0.65; }

/* Semantische Angebots-Alerts, vormals .alert-lt/.alert-lm/.alert-ss.
   Nutzung: <div class="alert alert-longterm">…</div> usw. — die Bootstrap-5-
   Alert-Variablen erlauben das Umfärben ohne eigene .alert-Neubauten. */
.alert-longterm { --bs-alert-bg: #eefaf0; --bs-alert-border-color: #8fdb9d; --bs-alert-color: #1c7a35; }
.alert-lastminute { --bs-alert-bg: #fdecec; --bs-alert-border-color: #f0a8a4; --bs-alert-color: var(--bs-danger); }
.alert-sommerspezial { --bs-alert-bg: #fff8e6; --bs-alert-border-color: #f3d98a; --bs-alert-color: #8a5e00; }

/* Dieselben Angebots-Alerts, aber mit den literalen Klassennamen, die
   preis_lang() (backend/include/ausgabe_sub_extern_inc.php - gemeinsam von
   allen Objektvorlagen genutzt, nicht selbst anpassbar) fest ausgibt.
   Originalfarben 1:1 aus assets/css/user.style.css übernommen. */
.alert-lt { --bs-alert-bg: #f3feed; --bs-alert-border-color: #46e003; --bs-alert-color: #3cc203; }
.alert-lm { --bs-alert-bg: #ffe6e6; --bs-alert-border-color: #ff0000; --bs-alert-color: #ff3434; }
.alert-ss { --bs-alert-bg: #fff8e1; --bs-alert-border-color: #fcc20c; --bs-alert-color: #f3b703; }

/* .tabhead-block/.property-table/.center werden ebenfalls von gemeinsamen
   Ausgabefunktionen (preis_lang, belegungsplan, kontakt_lang, u.a. in
   ausgabe_sub_extern_inc.php) fest ausgegeben - Werte aus dem bisherigen
   Standard-Objekttemplate (backend/style0/style.css) übernommen, nur Farben
   auf die neuen Theme-Tokens umgestellt statt der alten #CCC-Grautöne. */
.tabhead-block {
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0.6rem 0;
  padding: 0.4rem 0.75rem;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius-sm);
}
/* Fallback, falls kein/kein passendes style{N}/style.css geladen wird -
   Original-Werte (20pt/bold) aus backend/style0/style.css übernommen. */
.headertitel {
  font-size: 1.667rem; /* 20pt */
  font-weight: bold;
}
.center { text-align: center; }
.property-table {
  margin: 0 0 1.875rem;
  width: 100%;
  border-collapse: collapse;
}
.property-table thead th {
  background-color: var(--ferienhaus-accent);
  color: #fff;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
}
.property-table tbody td {
  vertical-align: middle;
  padding: 0.75rem;
}
.property-table tbody tr:nth-child(odd) td { background-color: var(--bs-tertiary-bg); }
.property-table tbody tr:nth-child(even) td { background-color: #fafafa; }

/* Mehr Luft über dem Anfrageformular-Link, den kontakt_lang() (gemeinsame
   Funktion, nicht anpassbar) direkt nach den Kontaktdaten ausgibt - dort gab
   es zuvor nur ein einzelnes <br>. */
.contact-form-wrap h3 { margin-top: 2rem; }

/* Bootstrap-3-Rest-Klasse aus kontakt_lang() - unter Bootstrap 5 wirkungslos
   (dort heißt es .offset-sm-1), deshalb hier nachgebildet. */
.col-sm-offset-1 { margin-left: 8.3333%; }

/* foot-content.inc.php (gemeinsam genutzt) setzt .nav.nav-pills.nav-justified
   auf <li> ohne die in Bootstrap 5 nötige Klasse .nav-item - dadurch bekommen
   die drei Icons keine gleiche Spaltenbreite/kein Padding und überlagern sich.
   Nachbildung hier, ohne die gemeinsame Datei selbst anzufassen. */
.nav-pre .nav-justified > li {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-pre .nav-justified > li > a {
  display: block;
  padding: 0.5rem 1rem;
}

/* Promo-Banner mit Hintergrundbild (Sommerspezial/Lastminute/Langzeitmiete),
   vormals drei fast identische .prom-*-Klassen — jetzt eine gemeinsame Klasse,
   die konkrete Variante nur noch über ein Inline-`style="background-image:"`
   oder eine zusätzliche Modifier-Klasse wie `.prom-banner.prom-sommerspezial`. */
.prom-banner {
  min-height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: var(--bs-border-radius-lg);
}

/* Kopfzeilen-Titel neben dem Logo (vormals .header-titel-div) */
.header-titel-text {
  font-family: var(--ferienhaus-font-display);
  font-size: 1.875rem;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 500px) {
  .header-titel-text { font-size: 1.5rem; line-height: 1.3; }
}

/* Kleine Text-Utilities aus dem alten Theme */
.text-fewo-back { color: #d9534f; font-weight: 300; font-size: 0.75rem; }
.label-kontakt { text-align: left; font-weight: 700; }
label { cursor: default; }

/* Responsive eingebettete iFrames (Belegungsplan/Kalender), vormals
   .belegungsplan-responsive + eigenes Padding-Hack-CSS. Bootstrap 5 hat dafür
   eine eingebaute Utility, im Markup verwenden statt einer eigenen Klasse:
     <div class="ratio ratio-21x9">
       <iframe src="…" title="Belegungsplan"></iframe>
     </div>
*/

/* Kontaktformular-Eingaben mit Floating Label, vormals der gesamte
   .mdl-textfield-Block (Material Design Lite). Bootstrap 5.3 kann das nativ,
   kein Custom-CSS nötig — im Markup verwenden:
     <div class="form-floating mb-3">
       <input type="text" class="form-control" id="vorname" placeholder="Vorname">
       <label for="vorname">Vorname</label>
     </div>
   Für einen ungültigen Zustand reicht Bootstraps eigene .is-invalid-Klasse
   plus <div class="invalid-feedback">Fehlertext</div>.
*/

/* Vor/Zurück-Pfeile im Bild-Lightbox-Modal (backend/lightbox-modal-bs5.inc.php) -
   werden per JS ausgeblendet, wenn nur ein Bild auf der Seite ist. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav:hover, .lightbox-nav:focus { background: rgba(0, 0, 0, 0.65); color: #fff; }
.lightbox-nav-prev { left: 0.75rem; }
.lightbox-nav-next { right: 0.75rem; }