/* ============================================================
   Buchberger-Kettner — style.css  (v3 – Fester Hintergrund)
   Mobile-First | Breakpoints: 768px (Tablet), 1200px (Desktop)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sofia&family=Poppins:wght@300;400;600&display=swap');

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /*
   * MOBILE SCHRIFTGRÖSSEN-SKALIERUNG
   * Minimum 12.5 px auf sehr kleinen Screens, maximal 16 px auf Tablet/Desktop.
   * Da alle Abstände und Schriften in `rem` angegeben sind, schrumpft die
   * gesamte Typografie proportional – Inhalte bleiben in einer Zeile.
   */
  font-size: clamp(12.5px, 3.8vw, 16px);
  /* Verhindert horizontales Überlaufen auf allen Geräten */
  overflow-x: hidden;
}

/* ---- VARIABLEN --------------------------------------------- */
:root {
  --beige:          #e2d2c0;
  --dark:           #292929;
  --text:           #333;
  --card-bg:        rgba(255, 255, 255, 0.92);
  --card-shadow:    0 2px 8px rgba(0, 0, 0, 0.10), 0 8px 28px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.14), 0 22px 52px rgba(0, 0, 0, 0.20);
  --radius:         14px;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- BASIS ------------------------------------------------- */
body {
  font-family: 'Sofia', cursive, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
}

/*
 * FESTER HINTERGRUND – stube.jpg bleibt stehen,
 * der gesamte Seiteninhalt scrollt darüber hinweg.
 * body::before statt background-attachment:fixed,
 * weil iOS Safari fixed backgrounds nicht korrekt rendert.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('./images/gallery/stube.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * SEITEN-WEITER SCHATTEN-OVERLAY
 * Liegt über dem Hintergrundbild und füllt immer den gesamten Screen.
 * Verbessert den Kontrast über alle Bereiche hinweg.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   NAVIGATION  – immer transparent mit Glas-Effekt
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Glas-Effekt: dezente helle Tönung + Weichzeichner */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/*
 * Schriftfarbe:
 *   Standard (kein class) → weißer Text  (für dunkle Hintergründe)
 *   .nav-on-bright        → schwarzer Text (für helle Hintergründe)
 * Die Klasse wird per JS (Canvas-Helligkeitsmessung) gesetzt.
 */

/* ---- Hamburger (immer sichtbar je nach Helligkeit) --------- */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  padding: 4px 6px;
  display: block;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease), transform 0.2s;
}

.nav-toggle:hover  { transform: scale(1.12); }
.nav-toggle:active { transform: scale(0.92); }

nav.nav-on-bright .nav-toggle {
  color: var(--dark);
  text-shadow: none;
}

/* ---- MOBIL-MENÜ (max 767px) -------------------------------- */
@media (max-width: 767px) {
  .nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    right: 1rem;
    background: rgba(25, 18, 12, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    min-width: 200px;
    z-index: 199;
    overflow: hidden;
    /* Animationszustand: verborgen */
    clip-path: inset(0 0 100% 0 round 14px);
    opacity: 0;
    pointer-events: none;
    transition:
      clip-path 0.3s var(--ease),
      opacity   0.25s var(--ease);
  }

  .nav-menu.is-open {
    clip-path: inset(0 0 0% 0 round 14px);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu a {
    color: rgba(255, 255, 255, 0.9);
    padding: 14px 22px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: block;
    transition: background 0.2s, padding-left 0.25s var(--ease);
  }

  .nav-menu a:last-child { border-bottom: none; }
  .nav-menu a:hover      { background: rgba(255, 255, 255, 0.10); padding-left: 28px; }
}

/* ---- DESKTOP-MENÜ (min 768px) ------------------------------ */
@media (min-width: 768px) {
  .nav-toggle { display: none; }

  nav { justify-content: center; }

  .nav-menu {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    min-width: auto;
    gap: 2.5rem;
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }

  /* Standard: weißer Text auf dunklem Hintergrund */
  .nav-menu a {
    color: white;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    border: none;
    position: relative;
    transition:
      color      0.35s var(--ease),
      text-shadow 0.35s var(--ease);
  }

  /* Animierter Unterstrich */
  .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: width 0.32s var(--ease);
  }

  .nav-menu a:hover::after { width: 100%; }

  /* Auf hellem Hintergrund: dunkler Text */
  nav.nav-on-bright .nav-menu a {
    color: var(--dark);
    text-shadow: none;
  }

  .nav-secondary { display: none !important; }
}

/* ============================================================
   HERO-BEREICHE
   ============================================================
   Kein eigenes Hintergrundbild – body::before (stube.jpg) scheint durch.
   Die ::before-Overlay-Schicht verdunkelt den Bereich für die Lesbarkeit
   des Titels.
   ============================================================ */
.hero {
  /* Kein eigenes background-image – das fixierte body::before greift */
  background-image: none !important;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Kein eigenes Overlay auf dem Hero – body::after liefert bereits
   eine globale Abdunkelung. Der Titel ist durch text-shadow lesbar. */
.hero::before { display: none; }

.hero > * { position: relative; z-index: 1; }

.hero-title {
  color: white;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  text-align: center;
  padding: 1rem 2rem;
  /* Kräftigerer Text-Schatten, da kein Hintergrund-Overlay mehr */
  text-shadow:
    0 2px 6px  rgba(0, 0, 0, 0.80),
    0 4px 24px rgba(0, 0, 0, 0.60);
  letter-spacing: 0.04em;
  animation: heroFadeIn 1.1s var(--ease) both;
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-home { min-height: 45vh; }
.hero-sub  { min-height: 26vh; }

@media (min-width: 768px) {
  .hero-home { min-height: 55vh; }
}

/* Hintergrundklassen bleiben definiert, werden aber durch .hero überschrieben */
.bg-stube { background-image: url('./images/gallery/stube.jpg'); }
.bg-innen { background-image: url('./images/gallery/innen_03.jpg'); }

/* ============================================================
   SCROLL-ANIMATIONEN
   ============================================================ */
.will-animate {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.65s var(--ease),
    transform 0.65s var(--ease);
}

.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Verzögerungen */
.cards-row    .will-animate:nth-child(2),
.menu-grid    .will-animate:nth-child(2),
.contact-grid .will-animate:nth-child(2) { transition-delay: 0.13s; }

.cards-row    .will-animate:nth-child(3),
.menu-grid    .will-animate:nth-child(3) { transition-delay: 0.26s; }

/* ============================================================
   HAUPTINHALT
   ============================================================ */
main { flex: 1; }

.section-content {
  padding: 2.5rem 1.25rem;
}

/* Karte – Breite orientiert sich am Inhalt (Desktop) / füllt Screen (Mobil) */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.75rem;
  /* Mobil: volle verfügbare Breite */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition:
    box-shadow 0.38s var(--ease),
    transform  0.38s var(--ease);
}

/* Desktop: Karte schrumpft auf Inhaltsgröße */
@media (min-width: 768px) {
  .card {
    width: fit-content;
  }
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.card + .card { margin-top: 1.5rem; }

.card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--dark);
  letter-spacing: 0.02em;
}

/* Tabellen – Breite richtet sich nach Inhalt, nicht nach Karte */
table {
  color: var(--text);
  border-collapse: collapse;
  /* Kein width: 100% – Tabelle wächst nur so breit wie ihr Inhalt */
}

td {
  padding: 0 20px 10px 0;
  vertical-align: top;
  /* Normales Wrapping – die Karte richtet sich nach dem Inhalt.
     Nur .td-tag (Labels) bleibt explizit einzeilig. */
}

.td-tag { white-space: nowrap; }

/*
 * 2-Spalten-Tabellen (.table-gap):
 * Auf MOBIL: table-layout:fixed + width:100% → beide Spalten exakt 50 %.
 *   .td-tag darf umbrechen, damit lange Datumsangaben ("21.03.2026 mittags & abends")
 *   die zweite Spalte nicht verdrängen.
 * Auf DESKTOP: natürliche Tabellenbreite – die Karte bleibt fit-content
 *   und wird nicht auf Bildschirmbreite aufgezogen.
 */
.table-gap {
  margin-top: 1.25rem;
  /* Kein width:100% hier – sonst expandiert die fit-content-Karte auf Vollbreite */
}

@media (max-width: 767px) {
  .table-gap {
    width: 100%;
    table-layout: fixed;
  }

  .table-gap .td-tag {
    white-space: normal; /* Zeilenumbruch erlaubt – Platz für Spalte 2 */
    width: 50%;
  }
}

/* Karten nebeneinander – ohne feste Maximalbreite */
.cards-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Karten auf Mobil: volle Breite damit Tabellen Platz haben */
  align-items: stretch;
}

@media (min-width: 768px) {
  .cards-row {
    flex-direction: row;
    /* flex-wrap: wrap → Karten umbrechen statt seitlich zu überlaufen
       (wichtig auf Tablets ~834 px, wo beide Karten zusammen zu breit sind) */
    flex-wrap: wrap;
    align-items: flex-start;
    /* Gruppe in der Mitte des Bildschirms ausrichten */
    justify-content: center;
  }

  .cards-row .card {
    /* Karte wächst NICHT auf volle Breite – bleibt Inhaltsgröße */
    flex: 0 0 auto;
    margin: 0;
    /* Einzelne Karte darf nie breiter als der Viewport sein */
    max-width: calc(100vw - 2.5rem);
  }
}

/* ============================================================
   SPEISEKARTE
   ============================================================ */

/* Flex statt Grid → Cards nebeneinander, inhaltsgröß, zentriert */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 0 auto;
}

.menu-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition:
    box-shadow 0.38s var(--ease),
    transform  0.38s var(--ease);
}

@media (min-width: 768px) {
  .menu-card { width: fit-content; }
}

.menu-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.menu-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--dark);
}

.menu-item {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  transition: background 0.22s, padding-left 0.22s var(--ease);
}

.menu-item:last-child { border-bottom: none; }

.menu-item:hover {
  background: rgba(226, 210, 192, 0.25);
  padding-left: 14px;
}

.menu-item-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.5;
}

.herkunft {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.8rem;
  color: #555;
  letter-spacing: 1px;
  line-height: 1.6;
  margin-top: 1rem;
}

.herkunft a {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.herkunft a:hover { opacity: 0.65; }

/* ============================================================
   GALERIE
   ============================================================ */

/*
 * Galerie-Wrapper: Glas-Rahmen (etwas weniger geblurred als Nav)
 */
.gallery-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
}

/* Text in weißer Farbe – sonst auf dunklem Hintergrund schwer lesbar */
.gallery-info {
  text-align: center;
  margin-bottom: 1.5rem;
  color: white;
}

.gallery-info h2 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  color: white;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

#image-text {
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s;
}

/*
 * Haupt-Bild: volles Bild anzeigen, kein Beschnitt.
 * max-width + max-height mit width/height:auto → proportionale Skalierung
 * ohne Verzerrung oder Abschneiden.
 */
.gallery-highlight {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  /* Glas-Rahmen */
  border: 2px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.07),   /* inneres Glas-Leuchten */
    0 8px 32px rgba(0, 0, 0, 0.40);          /* äußerer Schatten */
  transition: opacity 0.28s var(--ease);
}

.gallery-highlight.fading { opacity: 0; }

/* Thumbnail-Raster */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.gallery-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.65;
  /* Glas-Rahmen für Vorschauen */
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition:
    opacity    0.25s var(--ease),
    transform  0.28s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.gallery-thumbs img:hover {
  opacity: 1;
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.gallery-thumbs img.gallery-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.30),
    0 4px 14px rgba(0, 0, 0, 0.30);
  transform: scale(1.04);
}

/* ============================================================
   GALERIE-KARUSSELL
   ============================================================ */

/*
 * Scene: volle Breite des Wrappers, overflow:hidden blendet
 * nur die schrägen Seitenbilder aus – das aktive Mittelbild
 * ist dank abgesicherter max-width nie breiter als die Scene.
 */
.carousel-scene {
  position: relative;
  width: 100%;
  height: 52vh;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .carousel-scene { height: 64vh; }
}

/* Jedes Bild liegt absolut im Zentrum der Scene.
 * left:50% + top:50% verankert den Ursprung exakt in der Mitte –
 * das translate(-50%,-50%) in jedem Zustand zieht das Element
 * dann auf die eigene Mitte zurück. So ist das Zentrum immer
 * zuverlässig in der Scene-Mitte, unabhängig vom Browser. */
.carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transition:
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  will-change: transform, opacity;
}

/*
 * Bildgröße: max-width nutzt min() damit das Bild nie breiter
 * als die Scene wird (gallery-wrapper max 1100px, padding ~48px
 * → Scene ≤ 1052px; 920px lässt 66px Puffer auf jeder Seite).
 */
.carousel-item img {
  display: block;
  max-height: 44vh;
  max-width: min(64vw, 88%);   /* mobile: 64vw, aber nie > 88% der Scene */
  width: auto;
  height: auto;
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.07),
    0 8px 32px rgba(0, 0, 0, 0.40);
  pointer-events: none; /* Klick geht ans .carousel-item, nicht ans Bild */
}

@media (min-width: 768px) {
  .carousel-item img {
    max-height: 56vh;
    max-width: min(52vw, 920px); /* 920px < 1052px Scene-Breite → kein Clip */
  }
}

/* ── Zustands-Klassen ───────────────────────────────────────────
 * Jede transform beginnt mit translate(-50%, -50%) um das Element
 * auf seine eigene Mitte zurückzuziehen (kompensiert left:50%/top:50%).
 * Der Rest der transform-Kette ist die gewünschte Karussell-Position.
 * ───────────────────────────────────────────────────────────────── */

/* Aktives Bild: frontal, volle Größe, Lupe-Cursor für Lightbox */
.carousel-item.is-active {
  transform: translate(-50%, -50%) scale(1);
  z-index: 10;
  opacity: 1;
  cursor: zoom-in;
}

/* Linkes Nachbarbild: schräg nach hinten links */
.carousel-item.is-prev {
  transform: translate(calc(-50% - 56%), -50%) perspective(900px) rotateY(42deg) scale(0.78);
  z-index: 5;
  opacity: 0.68;
  cursor: pointer;
}

/* Rechtes Nachbarbild: schräg nach hinten rechts */
.carousel-item.is-next {
  transform: translate(calc(-50% + 56%), -50%) perspective(900px) rotateY(-42deg) scale(0.78);
  z-index: 5;
  opacity: 0.68;
  cursor: pointer;
}

/* Bilder dahinter (Übergangspuffer, unsichtbar) */
.carousel-item.is-prev2 {
  transform: translate(calc(-50% - 100%), -50%) perspective(900px) rotateY(56deg) scale(0.5);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.carousel-item.is-next2 {
  transform: translate(calc(-50% + 100%), -50%) perspective(900px) rotateY(-56deg) scale(0.5);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

/* Alle anderen Bilder: versteckt in der Mitte */
.carousel-item.is-hidden {
  transform: translate(-50%, -50%) scale(0.3);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Navigationsknöpfe (UNTER der Scene, nie im Bild) ───────── */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.9rem;
}

.carousel-btn {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s, transform 0.22s;
  flex-shrink: 0;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.10);
}

/* ============================================================
   KONTAKT
   ============================================================ */

/* Flex statt Grid → Cards nebeneinander, inhaltsgröß, zentriert */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 0 auto;
}

.contact-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition:
    box-shadow 0.38s var(--ease),
    transform  0.38s var(--ease);
}

@media (min-width: 768px) {
  .contact-card { width: fit-content; }
}

.contact-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.contact-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.contact-info p {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  /* Adress-Text darf umbrechen (kein nowrap) */
  white-space: normal;
}

.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  /* Karte: sinnvolle Mindestbreite, wächst mit dem Iframe */
  min-width: min(360px, 100%);
  min-height: 300px;
  transition:
    box-shadow 0.38s var(--ease),
    transform  0.38s var(--ease);
}

.map-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: none;
}

/* ============================================================
   IMPRESSUM
   ============================================================ */
.impressum-card { max-width: 640px; }

.impressum-card p {
  line-height: 1.8;
  margin-bottom: 0.4rem;
}

/* ============================================================
   DATENSCHUTZ
   ============================================================ */
.datenschutz-card { max-width: 820px; }

.datenschutz-card h2 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem;  color: var(--dark); }
.datenschutz-card h3 { font-size: 1rem;   margin: 1.1rem 0 0.4rem;  color: var(--dark); }
.datenschutz-card h4 { font-size: 0.95rem; margin: 0.8rem 0 0.3rem; }

.datenschutz-card p,
.datenschutz-card li {
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 0.6rem;
}

.datenschutz-card ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}

.datenschutz-card a {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   HINWEIS-POPUP
   ============================================================ */
#popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Einblend-Animation */
  opacity: 0;
  transition: opacity 0.30s var(--ease);
  pointer-events: none;
}

#popup-overlay.popup-visible {
  opacity: 1;
  pointer-events: auto;
}

#popup-overlay.popup-hiding {
  opacity: 0;
  pointer-events: none;
}

#popup-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-hover);
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 2rem 1.75rem 1.5rem;
  /* Breite: max 480px, aber nie breiter als Viewport - 2rem */
  width: min(480px, calc(100vw - 2rem));
  position: relative;
  /* Slide-in von unten */
  transform: translateY(24px);
  transition: transform 0.32s var(--ease);
}

#popup-overlay.popup-visible #popup-box {
  transform: translateY(0);
}

/* ✕-Button oben rechts */
#popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  transition: background 0.2s;
  flex-shrink: 0;
}

#popup-close:hover { background: rgba(0, 0, 0, 0.14); }

#popup-title {
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
  /* Platz für den ✕-Button */
  padding-right: 2.2rem;
}

#popup-content {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

#popup-content p + p { margin-top: 0.55rem; }

/* Okay-Button */
#popup-ok {
  display: block;
  margin: 0 auto;
  background: var(--dark);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.58rem 2.2rem;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}

#popup-ok:hover { opacity: 0.72; }

/* ============================================================
   LIGHTBOX  (Galerie-Vollbild-Overlay)
   ============================================================ */
.lightbox {
  display: none;            /* wird per JS auf flex gesetzt */
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lbFadeIn 0.22s var(--ease) both;
}

.lightbox.is-open { display: flex; }

.lightbox-img {
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.7);
  cursor: default;
  animation: lbImgIn 0.28s var(--ease) both;
  /* Verhindert, dass Klick auf Bild auch den Hintergrund-Listener auslöst */
  pointer-events: auto;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 501;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.1);
}

@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lbImgIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ============================================================
   FOOTER  – gleiche Glasoptik wie die Navbar
   ============================================================ */
footer {
  /* Glas-Effekt: identisch mit nav */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  min-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding: 1.25rem 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.9rem;
}

footer a {
  color: rgba(255, 255, 255, 0.88);
  transition: opacity 0.22s;
}

footer a:hover { opacity: 0.6; }