/* Globale Farbanpassungen: überall verwendete CSS-Variablen (Theming) */
/* Custom Variables */
:root {
    --primary-color: #ffd700;
    --secondary-color: #2c2c2c;
    --light-bg: #f8f8f8;
    --brand-brown: #8B4513;
    --text-color: #2c2c2c;
    --footer-color: #2c2c2c;
}

/* =========================
   Startseite: Hero mit Bild + Text
   ========================= */
.hero-section { margin-bottom: 2rem; }
.hero-media { position: relative; background:#000; overflow: hidden; }
.hero-image {
  width: 100%;
  height: 80vh;            /* Bühne am Desktop */
  object-fit: contain;     /* Bild immer vollständig sichtbar */
  object-position: center center;
  display: block;
  position: relative;
  z-index: 1;              /* über dem Hintergrund-Blur */
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;              /* hinter dem eigentlichen Bild */
  background-image: url('../images/HairModel.JPG'); /* gleiche Datei als Ambient-Background */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px) saturate(1.05) brightness(0.9);
  transform: scale(1.06);  /* Blur-Ränder verbergen */
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 2; /* über Ambient/Foto, unter Text */
}
.hero-text {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(1100px, 92%);
  color: #fff;
  text-align: center;
  line-height: 1.35;
  /* Animation: verzögert rein schieben */
  opacity: 0;
  animation: slideInUp 800ms ease-out 1.5s forwards;
  z-index: 3; /* sicher über Overlay/Bild */
  pointer-events: none; /* Text ist rein dekorativ – Klicks gehen anscrollbar durch */
}
.hero-text h2 {
  font-size: 4rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.hero-text p  {
  font-size: 2.6rem;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

@keyframes slideInUp {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* Tablet */
@media (max-width: 768px) {
  .hero-image { height: 60vh; }
  .hero-text h2 { font-size: 2.4rem; }
  .hero-text p  { font-size: 1.8rem; }
}

/* Mobile */
@media (max-width: 576px) {
  .hero-image { height: 55vh; }
  .hero-text { bottom: 10%; }
  .hero-text h2 { font-size: 1.2rem; }
  .hero-text p  { font-size: 0.8rem; }
}

/* Grundlayout & Basis-Typografie (seitenübergreifend) */
/* Custom Styles */
body {
    background-color: var(--light-bg);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Footer-Styling (alle Seiten): dunkler Hintergrund, zentrierter Text */
footer {
    background-color: var(--footer-color);
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: auto;
}

footer a {
    color: white;
}

footer a:hover {
    color: #ddd;
}

/* =========================
   Home Seite index.html About-Me: Responsive Font Sizes via CSS Variables
   ========================= */
/* Original – Desktop about me Text */
.about-me-text-script {
  font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive;
  color: #8B4513;
  font-size: var(--about-text-size) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: left;
  line-height: 1.4;
}
.about-me-text-script p {
  margin-bottom: 1.2em;
}

.about-me-title {
  font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive;
  color: #8B4513;
  font-size: var(--about-title-size) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: left;
}
/* =========================
   Galerie: Lightbox Bilder vergrößern
   ========================= */
.gallery-grid {
  --gallery-transition: 180ms;
}

.gallery-thumb {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform var(--gallery-transition) ease, box-shadow var(--gallery-transition) ease;
}

.gallery-thumb:focus-visible {
  outline: 3px solid var(--brand-brown);
  outline-offset: 4px;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gallery-folder {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 236, 0.95));
  border-radius: 1.75rem;
  padding: clamp(2rem, 5.2vw, 3rem) clamp(1.75rem, 5vw, 3rem) clamp(2.4rem, 5.6vw, 3.2rem);
  border: 1px solid rgba(139, 69, 19, 0.12);
  box-shadow: 0 20px 45px rgba(139, 69, 19, 0.12);
  overflow: visible;
}

.gallery-folder::before {
  content: "";
  position: absolute;
  top: clamp(0.95rem, 3vw, 1.35rem);
  left: clamp(1.75rem, 5vw, 2.75rem);
  width: clamp(120px, 32vw, 240px);
  height: clamp(0.65rem, 2vw, 1rem);
  background: linear-gradient(90deg, rgba(250, 220, 196, 0.9), rgba(255, 239, 222, 0.9));
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.18);
}

.gallery-folder__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  background: linear-gradient(135deg, rgba(255, 230, 208, 0.95), rgba(250, 226, 204, 0.95));
  padding: clamp(0.75rem, 2.8vw, 1.1rem) clamp(1.4rem, 4vw, 2.4rem);
  border-radius: 1.3rem;
  box-shadow: 0 12px 30px rgba(139, 69, 19, 0.18);
}

.gallery-folder__title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.gallery-folder__title .bi {
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  color: var(--brand-brown);
}

.gallery-folder__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(139, 69, 19, 0.75);
}

.gallery-folder__hint {
  font-weight: 600;
}

.gallery-folder__chevron {
  font-size: 1.2rem;
  transition: transform 220ms ease;
}

.gallery-folder__toggle {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 1.5rem;
}

.gallery-folder__toggle:focus-visible {
  outline: 3px solid rgba(139, 69, 19, 0.45);
  outline-offset: 4px;
}
/* Gallery Folder Preview,ändern der Größe (Vorschaubild) */
.gallery-folder {
  --gallery-preview-mobile: clamp(300px, 70vw, 200px);
  --gallery-preview-tablet: clamp(360px, 70vw, 420px);
  --gallery-preview-desktop: clamp(420px, 70vw, 900px);
  --gallery-preview-height: var(--gallery-preview-mobile);
  /*Schriftzug Größe Anzahl der Fotos*/
  --gallery-caption-mobile: 0.95rem;
  --gallery-caption-tablet: 1.05rem;
  --gallery-caption-desktop: 2.0rem;
  --gallery-caption-size: var(--gallery-caption-mobile);
}

.gallery-folder__preview {
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  max-height: var(--gallery-preview-height);
  transition: max-height 320ms ease, opacity 320ms ease, transform 320ms ease;
}

@media (min-width: 576px) {
  .gallery-folder {
    --gallery-preview-height: var(--gallery-preview-tablet);
    --gallery-caption-size: var(--gallery-caption-tablet);
  }
}

@media (min-width: 992px) {
  .gallery-folder {
    --gallery-preview-height: var(--gallery-preview-desktop);
    --gallery-caption-size: var(--gallery-caption-desktop);
  }
}

.gallery-folder__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  filter: saturate(1.07);
  transition: transform 320ms ease;
}

.gallery-folder__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.65) 100%);
}

.gallery-folder__preview figcaption {
  position: absolute;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(0.85rem, 2.6vw, 1.4rem);
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--gallery-caption-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.gallery-folder__body {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  margin-top: clamp(1.65rem, 4.2vw, 2.35rem);
}

.gallery-folder.is-open .gallery-folder__chevron {
  transform: rotate(180deg);
}

.gallery-folder.is-open .gallery-folder__preview {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transform: translateY(-8px);
}

.gallery-folder.is-open .gallery-folder__preview img {
  transform: scale(1.02);
}

.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  gap: 1rem;
}

.lightbox__stage {
  position: relative;
  width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 1rem;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.4);
}

.lightbox__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: clamp(2.5rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  transition: background 150ms ease, transform 150ms ease;
}

.lightbox__prev { left: clamp(0.75rem, 3vw, 1.5rem); }

.lightbox__next { right: clamp(0.75rem, 3vw, 1.5rem); }

.lightbox__button:hover,
.lightbox__button:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.lightbox__button:focus-visible {
  outline: 3px solid var(--brand-brown);
  outline-offset: 3px;
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: clamp(2.5rem, 4vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  transition: background 150ms ease, transform 150ms ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.lightbox__counter {
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  .lightbox__button {
    bottom: clamp(0.75rem, 4vw, 1.25rem);
    top: auto;
    transform: none;
    background: rgba(0, 0, 0, 0.6);
  }

  .lightbox__prev { left: 1.5rem; }

  .lightbox__next { right: 1.5rem; }
}

body.lightbox-open {
  overflow: hidden;
}

.galerie-page main {
  min-height: 100vh;
}
/*Individuelle Einstellung der Größe für Desktop,Mobile,Pad*/
.about-me-box {
  /* Default values (Desktop) – change inline via style="--about-*-d: ..." if desired */
  --about-title-d: 4.5rem;
  --about-text-d: 3.3rem;

  /* Tablet defaults (≤ 768px) */
  --about-title-t: 2.3rem;
  --about-text-t: 1.9rem;

  /* Mobile defaults (≤ 576px) */
  --about-title-m: 1.5rem;
  --about-text-m: 1.1rem;

  /* Effective values for the current viewport */
  --about-title-size: var(--about-title-d);
  --about-text-size: var(--about-text-d);
}

/* Switch effective sizes at breakpoints */
@media (max-width: 768px) {
  .about-me-box {
    --about-title-size: var(--about-title-t);
    --about-text-size: var(--about-text-t);
  }
}

@media (max-width: 576px) {
  .about-me-box {
    --about-title-size: var(--about-title-m);
    --about-text-size: var(--about-text-m);
  }
}



/* Startseite: Buchungsbox – heller Kasten im dunklen Abschnitt („Termine online buchen“) */
.booking-box {
    background-color: #F5F5DC; /* warmer Braunton */
    border: 1px solid rgba(139,69,19,0.18);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 3rem 2rem;
    min-height: 700px;
    max-width: 1600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #fff; /* weißer Text für Kontrast */
}
.booking-box h2 {
    font-size: 5rem; /* individuell */
}

.booking-box p {
    font-size: 2.25rem;
}

.booking-button-custom {
    font-size: 4rem;
    padding: 2rem 5rem;
    border-radius: 50px;
    font-weight: 600;
}

/* Booking button: brand color + hover */
.booking-button-custom.btn-dark {
  background-color: var(--brand-brown) !important;
  border-color: var(--brand-brown) !important;
}
.booking-button-custom {
  transition: transform .12s ease, box-shadow .2s ease;
}
.booking-button-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(139,69,19,0.25);
}

/* Hellbrauner Button (für Termine-Seite) */
.btn-brown-light {
  background-color: #C49A6C; /* hellbraun */
  border-color: #C49A6C;
  color: #1a1a1a; /* gut lesbar auf hellbraun */
}
.btn-brown-light:hover,
.btn-brown-light:focus {
  background-color: #B5885C; /* etwas dunkler beim Hover */
  border-color: #B5885C;
  color: #111;
}
.btn-brown-light:active {
  background-color: #A97D54;
  border-color: #A97D54;
  color: #0e0e0e;
}

/* Hinweis unter dem Button */
.booking-note {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #5a4638;
  background: rgba(250, 240, 230, 0.7);
  border: 1px solid rgba(139,69,19,0.15);
  border-left: 6px solid var(--brand-brown);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.1rem 1.25rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* Termine: schwarze Buchungsbox (Modifier) */
.booking-box--black {
  background-color:#FAEBD7; /* sehr helles Creme (#FAEBD7) */
  color: #FFFFFF;            /* Standard-Text weiß */
  border: 1px solid rgba(255, 255, 255, 0.288);
}
.booking-box--black h2,
.booking-box--black p {
  color: #000000; /* Titel & Fließtext sicher weiß */
}
/* Hinweis-Stil in der schwarzen Box anpassen */
.booking-box--black .booking-note {
  color: #000000;
  background: rgba(255, 255, 255, 0.583);
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 6px solid var(--brand-brown); /* braune Akzentlinie bleibt erhalten */
}

/* Startseite: Video-Sektion – maximale Höhe und Zuschnittverhalten */
.video-wrapper video {
    max-height: 1200px;
    object-fit: cover;
}

/* Startseite: Social-Media-Sektion (nur Desktop/Laptop größer) */
@media (min-width: 992px) {
  .social-media-section .display-5 {
    font-size: 3.6rem !important; /* etwas größer als Bootstrap display-5 */
  }
  .social-media-section .btn {
    font-size: 1.6rem;            /* Buttons größer */
    padding: 1rem 2.8rem;         /* mehr Fläche */
  }
  .social-media-section .bi {      /* Icons proportional mitwachsen lassen */
    font-size: 1.6em;
  }
}

/* Startseite: Profil/Hero-Sektion – Hintergrund auf Marken-Creme (#f8f1eb) */
.carousel-section + section.bg-white, /* Alt: Kompatibilität falls Carousel noch existiert */
.hero-section + section.bg-white { /* Neue Hero-Sektion färbt die Folge-Sektion ein */
    background-color: #f8f1eb !important;
}

/* Startseite: Karten innerhalb der oben eingefärbten Sektion
   ebenfalls auf #f8f1eb setzen (überschreibt .bg-light/.card Defaults). */
.carousel-section + section.bg-white .card,
.hero-section + section.bg-white .card {
    background-color: #f8f1eb !important;
}

/* Startseite: Kontakt-Buttons-Sektion (nach der Video-Sektion)*/
section.bg-dark + section.bg-white {
    background-color: #f8f1eb !important;
}

/* Home Seite index.html */
/* Schriftart: Delicious Handrawn (used in About-Me section) */
.font-delicious {
  font-family: 'Delicious Handrawn', cursive !important;
}

/* =========================
   Schriftarten Utilities
   ========================= */
/* Weitere Schriftart-Utilities (zum schnellen Wechsel per Klasse) */
.font-greatvibes { font-family: 'Great Vibes', cursive !important; }
.font-allura { font-family: 'Allura', cursive !important; }
.font-dancing { font-family: 'Dancing Script', cursive !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-montserrat { font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }
.font-inter { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }

/* Startseite Utilities (index.html): Navbar-Thema, Profilbild-/Spalten-Höhe, Video-Höhe */
.navbar-salon { background-color: #f8f1eb; }

/* =========================
   Startseite: Karten-Text/Titel
   ========================= */
/* Desktop (Startseite): "Wichtig für alle Kunden" – Text doppelt so groß (3rem) */
/* Desktop: Karte 1 „Wichtig für alle Kunden“ – Fließtext (3rem) */
.ps-lg-5 .card:first-of-type .card-text {
    font-size: 3rem;   /* ca. doppelt so groß wie Standard */
    line-height: 1.6;
}

@media (max-width: 576px) {
    .ps-lg-5 .card:first-of-type .card-text {
        font-size: 1.8rem; /* etwas kleiner auf sehr kleinen Displays */
    }
}

/* Desktop (Startseite): "Absagen & Ausfallgebühr" – Text größer (3rem) */
/* Desktop: Karte 2 „Absagen & Ausfallgebühr“ – Fließtext (3rem) */
.ps-lg-5 .card:nth-of-type(2) .fs-5 {
    font-size: 3rem !important;   /* override Bootstrap's .fs-5 */
    line-height: 1.6;
}

/* Desktop (Startseite): "Zahlung vor Ort" – Text größer (3rem) */
/* Desktop: Karte 3 „Zahlung vor Ort“ – Fließtext (3rem) */
.ps-lg-5 .card:nth-of-type(3) .fs-5 {
    font-size: 3rem !important;   /* override Bootstrap's .fs-5 */
    line-height: 1.6;
}

/* Desktop (Startseite): "Unsere Parkmöglichkeiten" – Text größer (3rem) */
/* Desktop: Karte 4 „Unsere Parkmöglichkeiten“ – Fließtext (3rem) */
.ps-lg-5 .card:nth-of-type(4) .fs-5 {
    font-size: 3rem !important;   /* override Bootstrap's .fs-5 */
    line-height: 1.6;
}

/* Desktop (Startseite): "Öffnungszeiten" – Text größer (3rem) */
/* Desktop: Karte 5 „Öffnungszeiten“ – Fließtext (3rem) */
.ps-lg-5 .card:nth-of-type(5) .fs-5 {
    font-size: 3rem !important;   /* override Bootstrap's .fs-5 */
    line-height: 1.6;
}

@media (max-width: 576px) {
    .ps-lg-5 .card:nth-of-type(2) .fs-5,
    .ps-lg-5 .card:nth-of-type(3) .fs-5,
    .ps-lg-5 .card:nth-of-type(4) .fs-5,
    .ps-lg-5 .card:nth-of-type(5) .fs-5 {
        font-size: 1.5rem !important; /* etwas kleiner auf sehr kleinen Displays */
    }
}

/* Desktop (Startseite): Intro-Absatz unter "Hey ihr Lieben" – 3rem */
/* Desktop: Intro-Absatz direkt unter „Hey ihr Lieben“ (display-4) */
.ps-lg-5 .display-4 + p.fs-4.mb-5 {
    font-size: 3rem !important;  /* größenverstellbar */
    line-height: 1.6;
}

@media (max-width: 576px) {
    .ps-lg-5 .display-4 + p.fs-4.mb-5 {
        font-size: 1.7rem !important; /* kleiner auf sehr kleinen Displays */
    }
}

/* Desktop (Startseite): Card-Überschriften größer (3rem) */
/* Desktop: Karten-Überschrift 1 („Wichtig für alle Kunden“) – 3rem */
.ps-lg-5 .card:first-of-type .card-title {
    font-size: 3rem !important;  /* Überschrift: "Wichtig für alle Kunden" */
    line-height: 1.2;
}

/* Desktop: Karten-Überschrift 2 („Absagen & Ausfallgebühr“) – 3rem */
.ps-lg-5 .card:nth-of-type(2) h3 {
    font-size: 3rem !important;  /* Überschrift: "Absagen & Ausfallgebühr" */
    line-height: 1.2;
}

/* Desktop: Karten-Überschrift 3 („Zahlung vor Ort“) – 3rem */
.ps-lg-5 .card:nth-of-type(3) h3 {
    font-size: 3rem !important;  /* Überschrift: "Zahlung vor Ort" */
    line-height: 1.2;
}

/* Desktop: Karten-Überschrift 4 („Unsere Parkmöglichkeiten“) – 3rem */
.ps-lg-5 .card:nth-of-type(4) h3 {
    font-size: 3rem !important;  /* Überschrift: "Unsere Parkmöglichkeiten" */
    line-height: 1.2;
}

/* Desktop (Startseite): Karten-Überschrift 5 („Öffnungszeiten“) – 3rem */
.ps-lg-5 .card:nth-of-type(5) h3 {
    font-size: 3rem !important;  /* Überschrift: "Öffnungszeiten" */
    line-height: 1.2;
}

@media (max-width: 576px) {
    .ps-lg-5 .card:first-of-type .card-title,
    .ps-lg-5 .card:nth-of-type(2) h3,
    .ps-lg-5 .card:nth-of-type(3) h3,
    .ps-lg-5 .card:nth-of-type(4) h3,
    .ps-lg-5 .card:nth-of-type(5) h3 {
        font-size: 2rem !important; /* besser lesbar auf kleinen Displays */
    }
}


/* =========================
   Startseite: Header-Leiste
   ========================= */
.home-header {
    --home-title-size: 6rem;      /* H1: "Lara Hair 76" */
    --home-nav-link-size: 3.5rem; /* Links: Home, Leistungen & Preise, Team */
}
.home-header .brand-title {
    font-size: var(--home-title-size);
    line-height: 1.1;
}
.home-header .navbar .nav-link {
    font-size: var(--home-nav-link-size) !important; /* überschreibt Bootstrap .fs-4 */
    font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive; /* wie im Kasten */
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
}
@media (max-width: 576px) {
    .home-header {
        --home-title-size: 3.2rem;
        --home-nav-link-size: 1.4rem;
    }
}
/*keine Pad Version nötig*/

/* Startseite: Schriftzug "Lara Hair 76" Kasten*/
.home-header .py-4.bg-white { background-color: #f8f1eb !important; }

.home-header .brand-title {
    position: relative;
    display: inline-block;
    /* Typografie */
    font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive;
    font-size: var(--home-title-size);
    line-height: 1.05;
    font-weight: 400; /* Script-Fonts sind meist Regular */
    font-style: normal;
    letter-spacing: 0.01em;
    text-transform: none;
    /* Box-Design */
    color: var(--brand-brown, #8B4513);
    background-color: #FAF0E6; 
    padding: 0.35em 0.9em 0.6em;
    border-radius: 10px;
    border: 1px solid rgba(139, 69, 19, 0.15);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Linie + Subtitel im selben Block via ::after */
.home-header .brand-title::after {
    content: "Friseursalon\A Damen & Herren";
    display: block;
    margin-top: 0.45em;          /* Abstand zum Titel */
    padding-top: 0.55em;         /* Platz für die Linie oben */
    font-weight: 500;
    font-size: calc(var(--home-title-size) * 0.34); /*Schriftgröße */
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--brand-brown, #8B4513);
    text-transform: none;
    white-space: pre-line;       /* ermöglicht Zeilenumbruch per \A */
    /* feine Linie oberhalb – Länge ca. 70% des Kastens */
    background-image: linear-gradient(var(--primary-color, #ffd700), var(--primary-color, #ffd700));
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 55% 2px; /* etwas kürzer & betonter wie im Beispiel */
}

/* Mobile 576px*/
@media (max-width: 576px) {
    .home-header .brand-title { padding: 0.3em 0.75em 0.5em; letter-spacing: 0.04em; }
    .home-header .brand-title::after { font-size: calc(var(--home-title-size) * 0.40); background-size: 65% 1px; } /*Schriftgröße */
}

/* Footer Typografie (alle Seiten): größere Schrift für bessere Lesbarkeit */
/* Footer Text Size */
footer p, footer a {
    font-size: 3rem; 
}

/* =========================
   Preisliste (Leistungen & Preise)
   ========================= */

/* Alle Karten auf der Leistungen-Seite: Hintergrundfarbe */
.leistungen-page .card {
    background-color: #f8f1eb !important;
}
/* Alle Karten und deren Inhalte auf der Leistungen-Seite: Hintergrundfarbe angleichen */
.leistungen-page .card,
.leistungen-page .card .list-group,
.leistungen-page .card .list-group-item,
.leistungen-page .card table,
.leistungen-page .card th,
.leistungen-page .card td {
    background-color: #f8f1eb !important;
}
/*Element TCC Schnitt (Heiße Schere)*/
.leistungen-page .card .badge.text-bg-light {
    background-color: #f8f1eb !important;
    color: #222 !important; /* für gute Lesbarkeit */
    border: 1px solid #e5ded7;
}
/* Leistungen & Preise (pages/leistungen.html): Listengrößen/Typografie */
/* Leistungen Page Typography */
.leistungen-page .card .list-group-item {
    font-size: 2.6rem;      /* doppelt so groß wie Standard (~1rem) */
    line-height: 1.6;     /* bessere Lesbarkeit bei langen Leistungen */
}
/* Größere Überschriften für Karten-Titel auf der Leistungen-Seite */
.leistungen-page .card-title {
    font-size: 2.4rem !important;
    line-height: 1.2;
}
/* Preise in der Leistungen-Liste dürfen nicht umbrechen
   (verhindert z.B. "60 –" / "80 €" auf zwei Zeilen auf Mobile) */
.leistungen-page .list-group-item .fw-semibold {
    white-space: nowrap;
}

/* Leistungen: Claim/Leitmotiv („Gesundes, strahlendes Haar …“) */
/* Leistungen & Preise Gesundens,strahlendes Haar..*/
.leistungen-page .lead {
    font-size: 2.6rem;  /* etwas größer als Standard */
    line-height: 1.5;
}

/* Brand text color utility */
/* Utility: Text gezielt in Markenbraun einfärben (Akzente) */
.text-brand-brown { color: var(--brand-brown, #8B4513) !important; }

/* Leistungen (Game Changer Intro, Sektion 12 in pages/leistungen.html) */
/* Default-Werte für diese eine Sektion */
.leistungen-page {
  --lp-game-intro-h2-size: 2rem;   /* Überschrift (H2) */
  --lp-game-intro-p-size:  2rem; /* Fließtext (P)     */
}

/* Selektor zielt nur auf die 12. Sektion (Game Changer Intro) */
.leistungen-page main .container > section:nth-of-type(12) h2 {
  font-size: var(--lp-game-intro-h2-size);
  line-height: 1.2;
}

.leistungen-page main .container > section:nth-of-type(12) .card-body p {
  font-size: var(--lp-game-intro-p-size);
  line-height: 1.7;
}

/* Mobile Fallbacks: kleinere Werte auf sehr kleinen Displays
unser Game Changer */
@media (max-width: 576px) {
  .leistungen-page {
    --lp-game-intro-h2-size: 1.8rem; /* vorher 2.8rem */
    --lp-game-intro-p-size:  0.9rem;
  }
}

/* Leistungen (K18 Beschreibung, Sektion 13 in pages/leistungen.html) */
/* Default-Werte für diese eine Sektion */
.leistungen-page {
  --lp-k18-h2-size: 2rem;   /* Überschrift (H2) */
  --lp-k18-p-size:  2rem;   /* Fließtext (P)     */
}

/* Selektor zielt nur auf die 13. Sektion (K18 Beschreibung) */
.leistungen-page main .container > section:nth-of-type(13) h2 {
  font-size: var(--lp-k18-h2-size);
  line-height: 1.2;
}

.leistungen-page main .container > section:nth-of-type(13) .card-body p {
  font-size: var(--lp-k18-p-size);
  line-height: 1.7;
}

/* Mobile Fallbacks: kleinere Werte auf sehr kleinen Displays 
K18*/
@media (max-width: 576px) {
  .leistungen-page {
    --lp-k18-h2-size: 1.8rem; /* vorher 2.8rem */
    --lp-k18-p-size:  0.9rem;
  }
}

/* Leistungen (ThermoCare Cut, Sektion 14 in pages/leistungen.html) */
/* Default-Werte für diese eine Sektion */
.leistungen-page {
  --lp-thermo-h2-size: 2rem;  /* Überschrift (H2) */
  --lp-thermo-p-size:  2rem;  /* Fließtext (P)     */
}

/* Selektor zielt nur auf die 14. Sektion (ThermoCare Cut Beschreibung) */
.leistungen-page main .container > section:nth-of-type(14) h2 {
  font-size: var(--lp-thermo-h2-size);
  line-height: 1.2;
}

.leistungen-page main .container > section:nth-of-type(14) .card-body p {
  font-size: var(--lp-thermo-p-size);
  line-height: 1.7;
}

/* Mobile Fallbacks: kleinere Werte auf sehr kleinen Displays 
ThermoCare*/
@media (max-width: 576px) {
  .leistungen-page {
    --lp-thermo-h2-size: 1.8rem; /* vorher 2.8rem */
    --lp-thermo-p-size:  0.9rem;
  }
}

/* =========================
   Preisliste: Header-Leiste
   ========================= */
/* Leistungen: Header-Title & Navbar-Linkgrößen individuell */
/* Leistungen/Team: Header – H1/Navigation über Variablen steuerbar */
.leistungen-header {
    --lp-title-size: 6rem;       /* H1: "Leistungen & Preise" */
    --lp-nav-link-size: 3.5rem;  /* Links: Home, Leistungen & Preise, Team */
}
.leistungen-header .py-4.bg-white { background-color: #f8f1eb !important; }

/* Leistungen: Schriftzug-Box im Header im gleichen Stil wie Startseite */
.leistungen-header .brand-title {
    position: relative;
    display: inline-block;
    /* Typografie */
    font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive;
    font-size: var(--lp-title-size);
    line-height: 1.05;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    text-transform: none;
    /* Box-Design */
    color: var(--brand-brown, #8B4513);
    background-color: #FAF0E6;
    padding: 0.35em 0.9em 0.6em;
    border-radius: 10px;
    border: 1px solid rgba(139, 69, 19, 0.15);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Linie + Subtitel im selben Block via ::after – wie Startseite */
.leistungen-header .brand-title::after {
    content: "Friseursalon\A Damen & Herren";
    display: block;
    margin-top: 0.45em;
    padding-top: 0.55em;
    font-weight: 500;
    font-size: calc(var(--lp-title-size) * 0.34);
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--brand-brown, #8B4513);
    text-transform: none;
    white-space: pre-line;
    background-image: linear-gradient(var(--primary-color, #ffd700), var(--primary-color, #ffd700));
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 55% 2px;
}

/* Leistungen-Seite: Gesamthintergrund in Creme */
body.leistungen-page { background-color: #f8f1eb; }
.leistungen-page main { background-color: #f8f1eb !important; }
.leistungen-header .navbar .nav-link {
    font-size: var(--lp-nav-link-size) !important; /* überschreibt Bootstrap .fs-4 */
    font-family: 'Great Vibes', 'Allura', 'Dancing Script', cursive; /* wie im Kasten */
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
}
@media (max-width: 576px) {
    .leistungen-header {
        --lp-title-size: 3.2rem;
        --lp-nav-link-size: 1.4rem;
    }
}

/* Leistungen: WSFS Zusatzzeile (TCC-Aufpreis) – gleiche Größe wie Listeneinträge */
.leistungen-page .wsfs-extra {
    font-size: 2rem;   /* entspricht .list-group-item auf der Leistungen-Seite */
    line-height: 1.6;
}
.leistungen-page .wsfs-extra .badge {
    font-size: 1em;    /* skaliert mit dem Absatz */
    padding: 0.4em 0.8em;
    vertical-align: middle;
}

/* Leistungen: Balayage-Notiz – gleiche Größe wie Listeneinträge */
.leistungen-page .balayage-note {
    font-size: 2rem;   /* entspricht .list-group-item auf der Leistungen-Seite */
    line-height: 1.6;
    font-family: inherit; /* gleiche Schriftart wie der restliche Text */
}

/* =========================
   Team
   ========================= */
/* Nutzt denselben Header/Look wie Preisliste über .leistungen-header */

/* =========================
   Kontakt
   ========================= */
/* Nutzt denselben Header/Look wie Preisliste über .leistungen-header */

/* =========================
   Impressum
   ========================= */
/* Impressum (pages/impressum.html): Karten-Stil wie Startseite */
.impressum-section .card { background-color: #f8f1eb !important; }
.impressum-section h2,
.impressum-section h3 { 
  font-size: 3rem;   /* wie Karten-Titel auf Startseite */
  line-height: 1.2;
  color: var(--brand-brown, #8B4513);
}

.impressum-section p {
  font-size: 3rem;   /* wie Karten-Text auf Startseite */
  line-height: 1.6;
}

/* Impressum Responsive (Tablet ≤768px): Reduzierte Schriftgrößen & Abstände */
/* Impressum: Tablet Layout (≤ 768px) */
@media (max-width: 768px) {
  .impressum-section h2,
  .impressum-section h3 { font-size: 2rem; line-height: 1.2; }
  .impressum-section p  { font-size: 1.6rem; line-height: 1.6; }

  /* Karten-Innenabstände etwas kompakter */
  .impressum-section .card-body { padding: 1.5rem; }

  /* seitliche Ränder am Container angenehmer */
  .impressum-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Impressum Responsive (Mobile ≤576px): weitere Verkleinerungen & mehr Seitenluft */
/* Impressum: Mobile Layout (≤ 576px) */
@media (max-width: 576px) {
  .impressum-section h2,
  .impressum-section h3 { font-size: 1.6rem; line-height: 1.25; }
  .impressum-section p  { font-size: 1.2rem; line-height: 1.6; }

  .impressum-section .card-body { padding: 1rem 1.25rem; }

  /* etwas mehr Luft an den Seiten auf sehr kleinen Displays */
  .impressum-container { padding-left: 1rem; padding-right: 1rem; }
}

/* Impressum Layout: breiterer Container für komfortables Lesen */
/* Impressum: breitere Container */
.impressum-container { max-width: 1600px; }

/* Impressum: Seitenhintergrund */
body.impressum-page { background-color: #f8f1eb; }

/* =========================
   Salon Seite
   ========================= */
.salon-page main { background-color: #f8f1eb !important; }

.salon-intro {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 1.6;
}

.salon-carousel {
  max-width: 1700px; /* begrenzt die Breite der Karussells,Fotos */
  margin-left: auto;
  margin-right: auto;
  background: #000;
}

.salon-carousel img {
  height: clamp(480px, 88vh, 960px); /* responsive Höhe */
  object-fit: cover;
  cursor: zoom-in;
}

.salon-video-card {
  background-color: #f8f1eb;
  border: 1px solid rgba(139, 69, 19, 0.12);
  max-width: 1700px; /* begrenzt die Breite der Videokarte */
  margin-left: auto;
  margin-right: auto;
}

.salon-video-card .ratio {
  --bs-aspect-ratio: 72%;
}

.salon-unmute-hint {
  font-size: 1rem;
  text-align: center;
}

.salon-video-card video {
  display: block;
  max-height: 1000px; /* maximale Höhe für Videos */
}

@media (max-width: 768px) {
  .salon-intro { font-size: 1.3rem; }
  .salon-carousel { max-width: 100%; }
  .salon-carousel img { height: clamp(320px, 65vh, 600px); } /* responsive Höhe */
  .salon-video-card {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .salon-video-card .ratio { --bs-aspect-ratio: 66%; }
  .salon-video-card video { max-height: 760px; }
  .salon-unmute-hint { font-size: 0.95rem; }
}

@media (max-width: 576px) {
  .salon-intro { font-size: 1.15rem; }
  .salon-carousel { border-radius: 1.5rem; }
  .salon-carousel img { height: clamp(260px, 70vh, 540px); } /* responsive Höhe */
  .salon-video-card .ratio { --bs-aspect-ratio: 62%; }
  .salon-video-card video { max-height: 580px; }
  .salon-unmute-hint { font-size: 0.9rem; }
}

/* Home Willkommens Popup */
.welcome-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease-in-out;
  z-index: 2000;
}

.welcome-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.welcome-content {
  position: relative;
  width: min(94vw, 1280px); /* responsive width */
  border-radius: 40px; /* abgerundete Ecken */
  overflow: hidden;
  box-shadow: 0 36px 88px rgba(0, 0, 0, 0.4);
  background: #000;
  display: flex;
  flex-direction: column;
}

.welcome-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(120vh, 2000px); /* responsive max-height, change the high of the Modal */
  object-fit: contain;
  background: #000;
}

.welcome-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 2.6rem; /* größere Schriftgröße für das "×" */
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.welcome-close:hover,
.welcome-close:focus-visible {
  background: rgba(139, 69, 19, 0.85);
  outline: none;
  transform: scale(1.05);
}

body.welcome-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .welcome-content {
    width: min(92vw, 640px);
    border-radius: 26px;
  }

  .welcome-close {
    width: 42px;
    height: 42px;
    font-size: 1.8rem; /* Größe */
  }
}

@media (max-width: 576px) {
  .welcome-modal {
    padding: 1.25rem;
  }

  .welcome-content {
    width: 100%;
    border-radius: 16px;
  }

  .welcome-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 1.6rem;
  }
}

/* Öffnungszeiten-Karte (Termine) */
.opening-hours-card .card-title {
  font-size: 2.4rem !important; /* überschreibt Bootstrap .card-title */
  line-height: 1.2;
}

.opening-hours-card .fs-5 {
  font-size: 1.3rem !important; /* überschreibt Bootstrap .fs-5 */
  line-height: 1.65;
}

@media (max-width: 768px) {
  .opening-hours-card .card-title {
    font-size: 1.9rem !important;
  }

  .opening-hours-card .fs-5 {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 576px) {
  .opening-hours-card .card-title {
    font-size: 1.5rem !important;
  }

  .opening-hours-card .fs-5 {
    font-size: 1rem !important;
  }
}

/* Teamkarten Browser Version bei team.html*/
@media (min-width: 992px) {
  .team-profile p {
    font-size: 2.0rem;
    line-height: 1.65;
  }
}

/* TABLET(≤ 768px) */
@media (max-width: 768px) {
  /* — Headergrößen über Variablen — */
  .home-header { --home-title-size: 4.2rem; --home-nav-link-size: 1.8rem; }
  .leistungen-header { --lp-title-size: 4.2rem; --lp-nav-link-size: 1.8rem; }

  /* — Carousel etwas flacher — */
  .carousel-inner { max-height: 65vh; }
  .carousel-item img { max-height: 65vh; height: auto; }

  /* — Profilbereich: Inline-Höhen neutralisieren & Bild skalieren — */
  .col-lg-6[style*="min-height"] { min-height: auto !important; }
  img[alt="Profilbild"] { max-height: 65vh !important; width: auto !important; height: auto !important; } /* Breite automatisch anpassen */

  /* — Startseite: Karten & Intro-Absatz — */
  .ps-lg-5 .card:first-of-type .card-title,
  .ps-lg-5 .card:nth-of-type(2) h3,
  .ps-lg-5 .card:nth-of-type(3) h3,
  .ps-lg-5 .card:nth-of-type(4) h3,
  .ps-lg-5 .card:nth-of-type(5) h3 { font-size: 2rem !important; }
  .ps-lg-5 .card:first-of-type .card-text { font-size: 1.6rem; }
  .ps-lg-5 .card:nth-of-type(2) .fs-5,
  .ps-lg-5 .card:nth-of-type(3) .fs-5,
  .ps-lg-5 .card:nth-of-type(4) .fs-5,
  .ps-lg-5 .card:nth-of-type(5) .fs-5 { font-size: 1.6rem !important; }
  .ps-lg-5 .display-4 + p.fs-4.mb-5 { font-size: 1.6rem !important; }

  /* — Video niedriger — */
  .video-wrapper video { max-height: 50vh; }

  /* — Buttons: keine speziellen .btn-xxl Anpassungen nötig (nicht genutzt) — */

  /* — Buchungsbox — */
  .booking-box { padding: 2rem; min-height: auto; }
  .booking-box h2 { font-size: 2.6rem; }
  .booking-box p { font-size: 1.4rem; }

  /* — Leistungen-Seite — */
  .leistungen-page .card .list-group-item { font-size: 1.5rem; }
  .leistungen-page h2.h2 { font-size: 2rem; }
  .leistungen-page .wsfs-extra,
  .leistungen-page .balayage-note { font-size: 1.3rem; }

  /* — Footer — */
  footer p, footer a { font-size: 1.6rem !important; }

  /* — Container-Padding & Gaps — */
  .container, .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
  .gap-4 { gap: 1.25rem !important; } 
  .booking-note { font-size: 1.3rem; }
}

/* MOBILE (≤ 576px) */
@media (max-width: 576px) {
  /* — Headergröße Home (nach 768px-Block, gewinnt in der Kaskade) — */
  .home-header { --home-title-size: 2.6rem; --home-nav-link-size: 1.4rem; }

  /* — Hero/Profilbereich: Inline-Höhen neutralisieren — */
  .col-lg-6[style*="min-height"] { min-height: auto !important; }
  img[alt="Profilbild"] {
    max-height: 55vh !important;
    width: auto !important; /* Breite automatisch anpassen */
    height: auto !important;
  }

  /* — Carousel kompakter — */
  .carousel-inner { max-height: 55vh; }
  .carousel-item img { max-height: 55vh; height: auto; }
  .carousel-indicators { margin-bottom: 0.5rem; }
  .carousel-control-prev, .carousel-control-next { width: 12%; }

  /* — Typografie & Abstände allgemein — */
  .display-4, .display-5, .display-6 { font-size: 1.8rem !important; }
  .ps-lg-5 .display-4 + p.fs-4.mb-5 { font-size: 1.3rem !important; }

  /* Card-Überschriften & Texte auf Startseite */
  .ps-lg-5 .card:first-of-type .card-title,
  .ps-lg-5 .card:nth-of-type(2) h3,
  .ps-lg-5 .card:nth-of-type(3) h3,
  .ps-lg-5 .card:nth-of-type(4) h3,
  .ps-lg-5 .card:nth-of-type(5) h3 { font-size: 1.4rem !important; }
  .ps-lg-5 .card:first-of-type .card-text { font-size: 1.2rem; }
  .ps-lg-5 .card:nth-of-type(2) .fs-5,
  .ps-lg-5 .card:nth-of-type(3) .fs-5,
  .ps-lg-5 .card:nth-of-type(4) .fs-5,
  .ps-lg-5 .card:nth-of-type(5) .fs-5 { font-size: 1.2rem !important; }

  /* — Buttons (Buchung) — */
  .booking-button-custom { font-size: 1.2rem; padding: 0.8rem 1.4rem; }

  /* — Buchungsbox — */
  .booking-box { padding: 1.25rem; min-height: auto; }
  .booking-box h2 { font-size: 2rem; }
  .booking-box p { font-size: 1.1rem; }

  /* — Leistungen-Seite: Listen & Hinweise — */
  .leistungen-page .card .list-group-item,
  .leistungen-page .card-body p,
  .leistungen-page .lead,
  .leistungen-page .wsfs-extra,
  .leistungen-page .balayage-note {
    font-size: 0.9rem; /* Schriftgrößen auf Mobile vereinheitlichen */
    line-height: 1.5;
  }
  .leistungen-page .card-title { font-size: 1.5rem !important; } /*ändert alle Überschriften auf der Preisliste */
  .leistungen-page h2.h2 { font-size: 1.4rem; }

  /* — Video niedriger — */
  .video-wrapper video { max-height: 40vh; }

  /* — Footer-Text kleiner — */
  footer p, footer a { font-size: 1.1rem !important; }

  /* — Container-Padding & Gaps etwas enger — */
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  .gap-4 { gap: 1rem !important; }
  .booking-note { font-size: 1.15rem; padding: 0.9rem 1rem; }
}