/* =====================================================================
   Villa Eiserfeld — zentrales Stylesheet
   ---------------------------------------------------------------------
   ⚠️ Für Laien: Farben und Schriftgrößen dürfen hier geändert werden,
   am einfachsten über die Variablen direkt unten (:root).
   Alles andere bitte nur ändern, wenn du weißt, was du tust.
   ===================================================================== */

:root {
  /* ✏️ HIER FARBEN ÄNDERN (Hex-Codes, z. B. über https://htmlcolorcodes.com) */
  --farbe-primaer: #2f5d50;      /* Dunkelgrün: Kopfzeile, Buttons */
  --farbe-akzent:  #c9a227;      /* Gold: Hervorhebungen */
  --farbe-hell:    #f7f5f0;      /* Heller Hintergrund */
  --farbe-text:    #2b2b2b;      /* Fließtext */
  --farbe-weiss:   #ffffff;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift);
  color: var(--farbe-text);
  background: var(--farbe-hell);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Kopfzeile / Navigation ---------- */
header {
  background: var(--farbe-primaer);
  color: var(--farbe-weiss);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.nav-innen {
  max-width: 1100px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--farbe-weiss);
  text-decoration: none;
}
/* Wortmarke ist seit AE-24.1 NUR Fallback (erscheint, wenn weder
   logo-header.png noch logo.png laden — onerror-Kette im HTML). */
.logo .logo-text { display: none; }
.logo.ohne-logo .logo-text { display: inline; }
.logo .logo-text > span { color: var(--farbe-akzent); }

/* Logo-Bild aus der Design-Verwaltung (bilder/layout/logo.png).
   Existiert die Datei nicht, entfernt das onerror-Attribut im HTML den
   <img>-Tag — dann bleibt nur der Schriftzug (Text-Fallback, AE-24).
   Feste Box mit object-fit: auch ein quadratisches/hochformatiges Logo
   (wie das Referenz-Muster) kann den Header NIE in die Höhe ziehen oder
   die Navigation verschieben; für die Kopfzeile ist eine kompakte
   Signet-Variante gedacht — das große Voll-Logo gehört auf
   Startseite/Footer, nicht ungekürzt in den Header. */
.logo-bild {
  height: 64px; max-width: 210px; width: auto;
  object-fit: contain; vertical-align: middle;
  border-radius: 8px; /* Logo-Datei hat cremefarbenen Hintergrund */
}
@media (max-width: 720px) {
  .logo-bild { height: 46px; max-width: 160px; }
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

nav a {
  color: var(--farbe-weiss);
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: 6px;
  display: block;
}
nav a:hover, nav a[aria-current="page"] { background: rgba(255,255,255,.15); }

/* Mobil: Menü hinter Burger-Knopf */
.menue-knopf {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.6);
  color: var(--farbe-weiss);
  font-size: 1.3rem;
  padding: .2rem .6rem;
  border-radius: 6px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .menue-knopf { display: block; }
  nav { width: 100%; display: none; }
  nav.offen { display: block; }
  nav ul { flex-direction: column; }
}

/* ---------- Hero (großes Startbild) ---------- */
.hero {
  position: relative;
  min-height: 46vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--farbe-weiss);
  /* ✏️ HIER STARTBILD ÄNDERN: Foto in der Dateiverwaltung hochladen,
     Pfad mit 🔗 kopieren und in der nächsten Zeile einsetzen.
     Gewählt am 16.08.2026: Luftbild Sommer (User-Entscheidung). */
  background: linear-gradient(rgba(20,40,35,.45), rgba(20,40,35,.55)),
              url("../bilder/gebaeude/2025-luftbild.jpg") center/cover no-repeat,
              var(--farbe-primaer); /* Fallback-Farbe, falls Bild fehlt */
  padding: 3rem 1rem;
}
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: .5rem; }
.hero p  { font-size: clamp(1rem, 2.5vw, 1.3rem); max-width: 40rem; }

/* ---------- Inhalt ---------- */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

h2 {
  color: var(--farbe-primaer);
  margin: 2rem 0 .8rem;
  font-size: 1.6rem;
}
h3 { color: var(--farbe-primaer); margin: 1.2rem 0 .5rem; }
p + p { margin-top: .8rem; }

ul.liste { margin: .5rem 0 .5rem 1.4rem; }

.knopf {
  display: inline-block;
  background: var(--farbe-akzent);
  color: var(--farbe-text);
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 1rem;
}
.knopf:hover { filter: brightness(1.08); }

/* Karten (z. B. Ausstattungs-Kacheln) */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.karte {
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: 1.2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Bilder-Galerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.galerie figure {
  background: var(--farbe-weiss);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.galerie figcaption { padding: .5rem .8rem; font-size: .9rem; color: #555; }

/* Grundriss (Startseite) */
.grundriss-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
.grundriss-haupt {
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: .8rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin: 0;
}
.grundriss-haupt img { border-radius: 6px; cursor: zoom-in; }
.grundriss-haupt figcaption { padding-top: .5rem; font-size: .9rem; color: #555; text-align: center; }
.grundriss-info h3 { margin-top: 0; }
.grundriss-info ul { list-style: none; }
.grundriss-info li { padding: .55rem 0; border-bottom: 1px solid #ddd; }
.grundriss-info li:last-child { border-bottom: none; }
.grundriss-info strong { color: var(--farbe-primaer); }
@media (max-width: 767px) {
  .grundriss-container { grid-template-columns: 1fr; }
}

/* Hinweis-Boxen */
.hinweis {
  background: #fff8e6;
  border-left: 4px solid var(--farbe-akzent);
  padding: .8rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}
.hinweis > p:only-child { margin: 0; } /* Fließtext-Absatz im Hinweiskasten (AE-34.1) */

/* Buchungs-Widget-Bereich (wird von integration/booking-widget.js befüllt) */
.buchung-container {
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-top: 1rem;
  min-height: 300px;
}

/* ---------- Zeitstrahl (Seite Geschichte) ---------- */
.zeitstrahl { margin: 1.5rem 0; }
.zeitstrahl-eintrag {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid #ddd;
}
.zeitstrahl-eintrag:last-child { border-bottom: none; }
.zeitstrahl .jahr {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--farbe-akzent);
  text-align: right;
}
.zeit-inhalt h3 { margin-top: 0; }
.hinweis-block {
  background: var(--farbe-weiss);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
@media (max-width: 600px) {
  .zeitstrahl-eintrag { grid-template-columns: 1fr; gap: .3rem; }
  .zeitstrahl .jahr { text-align: left; font-size: 1.2rem; }
}

/* ---------- Tabs (Seite Vor Ort) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 1rem; border-bottom: 2px solid #ddd; }
.tab-knopf {
  background: none; border: none; cursor: pointer;
  padding: .7rem 1.1rem; font-size: 1rem;
  border-bottom: 3px solid transparent;
}
.tab-knopf:hover { background: var(--farbe-weiss); }
.tab-knopf.aktiv { border-bottom-color: var(--farbe-akzent); font-weight: 700; color: var(--farbe-primaer); }
.tab-inhalt { display: none; }
.tab-inhalt.aktiv { display: block; }

/* ---------- Galerie-Lightbox ---------- */
.galerie-abschnitt { margin-bottom: 1.5rem; }
.galerie-sprungmarken { color: #555; }
.galerie-lightbox {
  border: none; padding: 0; background: transparent;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; inset: 0;
}
/* ⚠️ display NUR unter [open] setzen — ein display auf dem Grundselektor
   würde den geschlossenen <dialog> sichtbar machen (GOTCHA f3bebce). */
.galerie-lightbox[open] {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.galerie-lightbox::backdrop { background: rgba(0,0,0,.9); }
.galerie-lightbox img {
  max-width: 92vw; max-height: 84vh;
  width: auto; height: auto; object-fit: contain;
  display: block; margin: 0 auto; border-radius: 6px;
  /* Bei langer Hintergrundgeschichte darf das Bild schrumpfen,
     damit alles gemeinsam in den Viewport passt (AE-21). */
  flex: 0 1 auto; min-height: 0;
}
.galerie-lightbox button {
  position: fixed; z-index: 5;
  background: rgba(255,255,255,.92); border: none; border-radius: 50%;
  width: 2.8rem; height: 2.8rem; font-size: 1.4rem; cursor: pointer;
}
.galerie-lightbox .lb-schliessen { top: 1rem; right: 1rem; }
.galerie-lightbox .lb-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.galerie-lightbox .lb-weiter { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.galerie-lightbox .lb-text {
  text-align: center; color: #fff; padding: .6rem 1rem; font-size: .95rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  max-width: 90vw;
  white-space: pre-line; /* 2. Zeile = optionale Bild-Beschreibung */
}
/* Hintergrundgeschichte (data-geschichte) + Quelle (data-quelle) in der
   Lightbox — nur sichtbar, wenn Text hinterlegt ist (hidden-Attribut;
   hier bewusst KEIN display auf dem Grundselektor, GOTCHA f3bebce). */
.galerie-lightbox .lb-geschichte {
  color: #f0ede6; background: rgba(0,0,0,.55); border-radius: 8px;
  padding: .8rem 1.1rem; margin-top: .4rem;
  max-width: min(90vw, 46rem); max-height: 28vh; overflow-y: auto;
  white-space: pre-line; font-size: .95rem; line-height: 1.55; text-align: left;
}
.galerie-lightbox .lb-quelle {
  color: #b9b3a6; font-size: .8rem; margin-top: .35rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); max-width: 90vw; text-align: center;
}
.galerie-lightbox .lb-geschichte[hidden],
.galerie-lightbox .lb-quelle[hidden] { display: none; }

@media (max-width: 767px) {
  .galerie-lightbox img { max-width: 96vw; max-height: 78vh; }
  .galerie-lightbox .lb-geschichte { max-height: 34vh; font-size: .88rem; }
  .galerie-lightbox button { width: 2.3rem; height: 2.3rem; font-size: 1.2rem; }
  .galerie-lightbox .lb-zurueck { left: .4rem; font-size: 1.5rem; }
  .galerie-lightbox .lb-weiter { right: .4rem; font-size: 1.5rem; }
  .galerie-lightbox .lb-schliessen { top: .5rem; right: .5rem; }
  .galerie-lightbox .lb-text { font-size: .85rem; }
}

/* ---------- Inline-Bearbeitung (nur im Admin-Modus sichtbar) ---------- */
.admin-werkzeuge {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--farbe-primaer); color: var(--farbe-weiss);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: center; padding: .6rem 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.admin-werkzeuge button {
  background: var(--farbe-weiss); border: none; border-radius: 6px;
  padding: .5rem 1rem; cursor: pointer; font-size: .95rem;
}
.admin-werkzeuge .aw-status { font-size: .85rem; opacity: .9; width: 100%; text-align: center; }
[data-edit].inline-aktiv {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: 3px; cursor: text; min-height: 1.2em;
}
/* Globale Fußzeilen-Felder (AE-29): eigene Farbe + Hinweisbanner, damit
   klar ist, dass eine Änderung hier ALLE Seiten betrifft. */
[data-global-edit].inline-global {
  outline: 2px dashed #ffd66b;
  outline-offset: 3px; cursor: text; min-height: 1.2em;
}
/* Im Bearbeiten-Modus bleibt unten Platz, damit die feste Admin-Leiste die
   Fußzeile nicht verdeckt (AE-30); primärer Weg ist ohnehin der Dialog. */
body.aw-bearbeiten { padding-bottom: 9rem; }
@media (max-width: 700px) { body.aw-bearbeiten { padding-bottom: 15rem; } }
body.aw-bearbeiten footer[data-global-section]::before {
  content: "🌐 Globale Fußzeile — Änderungen hier werden beim Speichern auf ALLE Seiten übernommen";
  display: block; max-width: 1100px; margin: 0 auto .8rem;
  font-size: .85rem; color: #ffd66b;
}

/* ---------- Fußzeile ---------- */
footer {
  background: var(--farbe-primaer);
  color: var(--farbe-weiss);
  padding: 1.5rem 1rem;
  margin-top: 2rem;
}
.fuss-innen {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .95rem;
}
footer a { color: var(--farbe-weiss); }
img[data-edit-bild].inline-bild-aktiv {
  outline: 3px dashed var(--farbe-akzent);
  outline-offset: 2px; cursor: pointer !important;
}
.aw-dialog {
  border: none; border-radius: 8px; padding: 1.2rem;
  max-width: min(92vw, 44rem); box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.aw-dialog::backdrop { background: rgba(0,0,0,.55); }
.aw-dialog h3 { margin-top: 0; }
.aw-dialog .aw-knopfzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.aw-dialog button {
  border: 1px solid #ccc; background: #f7f7f2; border-radius: 6px;
  padding: .55rem .9rem; cursor: pointer; font-size: .95rem;
}
.aw-dialog button:hover { background: #fff; }
.aw-bildwahl-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .7rem; max-height: 55vh; overflow-y: auto; margin: .8rem 0;
}
.aw-bildwahl-raster figure { margin: 0; cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: .3rem; }
.aw-bildwahl-raster figure:hover { border-color: var(--farbe-akzent); background: #f7f7f2; }
.aw-bildwahl-raster img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
.aw-bildwahl-raster figcaption { font-size: .72rem; word-break: break-all; text-align: center; margin-top: .25rem; }

/* Vom Betreiber pflegbare Links (z. B. „Mehr erfahren" auf Vor-Ort-Karten):
   ohne Ziel-Adresse für Gäste unsichtbar, im Bearbeiten-Modus sichtbar. */
.karte-mehr { margin-top: .7rem; }
.karte-mehr a {
  font-weight: 600; text-decoration: none; color: var(--farbe-primaer);
}
.karte-mehr a:hover { text-decoration: underline; }
a[data-edit-link][href=""] { display: none; }
body.aw-bearbeiten a[data-edit-link][href=""] { display: inline-block; opacity: .6; }
body.aw-bearbeiten a[data-edit-link] {
  outline: 2px dashed var(--farbe-akzent); outline-offset: 2px;
}
body.aw-bearbeiten .karte { position: relative; }
.aw-kachel-knopf {
  position: absolute; top: .4rem; right: .4rem;
  background: var(--farbe-weiss); border: 1px solid #ccc; border-radius: 50%;
  width: 2rem; height: 2rem; cursor: pointer; font-size: .95rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.aw-dialog label { display: block; margin-top: .7rem; font-size: .9rem; }
.aw-dialog input[type="text"], .aw-dialog textarea, .aw-dialog select {
  width: 100%; padding: .45rem .6rem; margin-top: .2rem;
  border: 1px solid #ccc; border-radius: 6px; font: inherit;
}

/* Galerie-Verwaltung (Sortieren/Hinzufügen/Entfernen) */
.aw-galerie-dialog { width: min(94vw, 56rem); }
.aw-galerie-tipp { font-size: .85rem; color: #666; margin-top: .3rem; }
.aw-sortier-liste {
  display: flex; flex-direction: column; gap: .45rem;
  max-height: 55vh; overflow-y: auto; margin: .8rem 0;
  padding: .4rem; background: #f5f5f0; border-radius: 8px;
}
.aw-sortier-item {
  display: flex; align-items: center; gap: .6rem;
  background: var(--farbe-weiss); border: 1px solid #ddd; border-radius: 8px;
  padding: .35rem .6rem; cursor: grab;
}
.aw-sortier-item.aw-zieht { opacity: .4; }
.aw-sortier-item.aw-neu { border-color: var(--farbe-akzent); background: #fdf8ea; }
.aw-sortier-item img {
  width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex: none;
}
.aw-griff { color: #999; cursor: grab; flex: none; }
.aw-sortier-text {
  flex: 1; font-size: .88rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.aw-sortier-item button {
  border: 1px solid #ddd; background: #f7f7f2; border-radius: 5px;
  padding: .25rem .5rem; cursor: pointer; flex: none;
}
.aw-galerie-wahl {
  display: block; width: 100%; text-align: left; margin-top: .6rem;
  border: 1px solid #ccc; background: #f7f7f2; border-radius: 6px;
  padding: .6rem .9rem; cursor: pointer; font: inherit;
}
.aw-galerie-wahl:hover { border-color: var(--farbe-akzent); background: #fff; }
.aw-bildwahl-raster figure.aw-gewaehlt {
  border-color: var(--farbe-akzent); background: #fdf8ea;
}
.aw-bildwahl-raster figure.aw-inaktiv { opacity: .4; cursor: default; }
.aw-knopfzeile select, .aw-knopfzeile input[type="text"] {
  flex: 1; min-width: 10rem; padding: .5rem .6rem;
  border: 1px solid #ccc; border-radius: 6px; font: inherit; margin-top: 0;
}

/* ---- POI-Hauptbild (AE-20): großes Aufmacher-Bild der Infoseiten ---- */
.poi-hauptbild { margin: 1.2rem 0 1.6rem; }
.poi-hauptbild img {
  display: block; width: 100%; max-height: 420px;
  object-fit: cover; border-radius: 10px;
}
.poi-hauptbild figcaption { font-size: .9rem; color: #666; margin-top: .5rem; }
#awk-seite-oeffnen { display: inline-block; margin: .4rem 0 .8rem; }

/* ---- Bild-Texte-Dialog der Galerie-Verwaltung (AE-21) ---- */
.aw-dialog textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #ccc;
  border-radius: 6px; font: inherit; resize: vertical; min-height: 8rem;
}

/* ---- Screenshot-aus-Zwischenablage-Dialog (AE-21 Teil B) ---- */
.aw-shot-vorschau {
  border: 2px dashed #ccc; border-radius: 8px; padding: 1rem;
  margin-bottom: .8rem; text-align: center; color: #666;
  min-height: 6rem; max-height: 40vh; overflow: auto;
}
.aw-shot-vorschau img { max-width: 100%; max-height: 34vh; border-radius: 6px; }

/* ---- Website-Vorschau als zentrales POI-Modul (AE-22 / AE-22.1):
   ersetzt bei aktiver, erfolgreich geholter Vorschau die vier manuellen
   Infokacheln. Das JS blendet .karten per hidden-Attribut aus — der
   Guard darunter ist PFLICHT, weil .karten display:grid setzt
   (GOTCHA f3bebce: Autoren-CSS überstimmt sonst das hidden-Attribut). */
.karten[hidden] { display: none; }

.poi-website-vorschau {
  display: flex; gap: 0; align-items: stretch;
  margin: 1.6rem 0; padding: 0; overflow: hidden;
  border: 1px solid #ddd6c8; border-radius: 12px;
  background: #faf8f3; text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.poi-website-vorschau:hover {
  border-color: var(--farbe-akzent, #b08d3c);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.poi-website-vorschau img {
  width: 42%; min-width: 260px; min-height: 240px; max-height: 340px;
  object-fit: cover; display: block;
}
.poi-website-vorschau-text {
  padding: 1.4rem 1.6rem; min-width: 0; display: flex;
  flex-direction: column; justify-content: center;
}
.poi-website-vorschau-text strong {
  display: block; margin-bottom: .45rem; font-size: 1.25rem; line-height: 1.35;
}
.poi-website-vorschau-text p {
  margin: 0 0 .7rem; font-size: .98rem; color: #555; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.poi-website-vorschau-domain { display: block; color: #777; margin-bottom: .5rem; }
.poi-website-vorschau-cta {
  display: inline-block; align-self: flex-start;
  font-weight: 600; color: var(--farbe-primaer, #2c5f2d);
  border-bottom: 2px solid var(--farbe-akzent, #b08d3c);
  padding-bottom: .1rem; margin-bottom: .6rem;
}
.poi-website-vorschau:hover .poi-website-vorschau-cta { color: var(--farbe-akzent, #b08d3c); }
.poi-website-vorschau-hinweis { display: block; font-size: .78rem; color: #999; }
/* Ohne Bild: große, hochwertige Textkarte — kein leerer Bildbereich */
.poi-website-vorschau--ohne-bild .poi-website-vorschau-text { padding: 1.8rem 2rem; }
@media (max-width: 700px) {
  .poi-website-vorschau { flex-direction: column; }
  .poi-website-vorschau img { width: 100%; min-width: 0; min-height: 0; max-height: 220px; }
  .poi-website-vorschau-text { padding: 1.1rem 1.2rem; }
  .poi-website-vorschau-text strong { font-size: 1.1rem; }
}

/* ---- Untermenü „Geschichte" (AE-23, korrigiert 22.08. abends) ----
   „Geschichte" bleibt normaler Link auf geschichte.html; der separate
   ▾-Knopf öffnet/schließt das Dropdown (JS in main.js: Klick, Hover nur
   zusätzlich am Desktop, Escape + Außenklick schließen). Zustand lebt im
   hidden-Attribut — deshalb hier BEIDE Display-Zustände explizit
   (GOTCHA f3bebce: eine display-Regel ohne [hidden]-Gegenstück würde
   das geschlossene Menü dauerhaft sichtbar machen = zweite Menüzeile). */
.hat-untermenue { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.untermenue-knopf {
  background: none; border: none; color: var(--farbe-weiss);
  font-size: .8rem; padding: .45rem .5rem; cursor: pointer; border-radius: 6px;
}
.untermenue-knopf:hover, .untermenue-knopf[aria-expanded="true"] { background: rgba(255,255,255,.15); }
.untermenue { list-style: none; margin: 0; display: block; }
.untermenue[hidden] { display: none; }
@media (min-width: 721px) {
  .untermenue {
    position: absolute; top: 100%; left: 0; z-index: 60;
    background: var(--farbe-primaer); border-radius: 0 0 8px 8px;
    min-width: 13rem; padding: .3rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
  }
}
@media (max-width: 720px) {
  .untermenue { width: 100%; padding-left: 1.1rem; }
  .untermenue-knopf { margin-left: auto; font-size: 1rem; padding: .45rem .9rem; }
}
nav a[aria-current="true"] { background: rgba(255,255,255,.15); }

/* ---- Themen-Kacheln der Geschichte-Übersicht (AE-23) ---- */
.themen-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem; margin-top: 1.5rem;
}
.themen-kachel {
  display: block; overflow: hidden;
  border: 1px solid #ddd6c8; border-radius: 12px; background: #faf8f3;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.themen-kachel:hover {
  border-color: var(--farbe-akzent); box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.themen-kachel img { width: 100%; height: 190px; object-fit: cover; display: block; }
.themen-kachel div { padding: 1rem 1.2rem 1.2rem; }
.themen-kachel h3 { margin: 0 0 .4rem; }
.themen-kachel p { margin: 0 0 .6rem; font-size: .95rem; color: #555; }
.themen-kachel span { font-weight: 600; color: var(--farbe-primaer); }

/* ---- Zeitstrahl-Ereigniskarten (AE-25) ---- */
.zeitstrahl-karten { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; }
.zeit-karte {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: #faf8f3; border: 1px solid #ddd6c8; border-radius: 12px;
  border-left: 4px solid var(--farbe-akzent, #b08d3c);
  padding: 1.3rem 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.zeit-jahr {
  flex: 0 0 7.5rem; font-weight: 700; font-size: 1.15rem;
  color: var(--farbe-primaer, #2c5f2d); padding-top: .1rem;
}
.zeit-inhalt { min-width: 0; flex: 1; }
.zeit-inhalt h3 { margin: 0 0 .45rem; }
.zeit-inhalt p { margin: 0 0 .5rem; line-height: 1.55; }
.zeit-details { margin: .3rem 0 .5rem; }
.zeit-details summary {
  cursor: pointer; font-weight: 600; color: var(--farbe-primaer, #2c5f2d);
  list-style: none;
}
.zeit-details summary::-webkit-details-marker { display: none; }
.zeit-details[open] summary { margin-bottom: .4rem; }
.zeit-details p { white-space: pre-line; color: #555; }
.zeit-link a { font-weight: 600; }
.zeit-bilder { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.zeit-bilder figure { margin: 0; }
.zeit-bilder img {
  width: 130px; height: 92px; object-fit: cover; border-radius: 8px; display: block;
}
.zeit-bilder figcaption { font-size: .75rem; color: #777; max-width: 130px; }
@media (max-width: 600px) {
  .zeit-karte { flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; }
  .zeit-jahr { flex: none; }
}

/* ---- Formatierte Fließtexte (AE-26): .freitext / [data-edit-rich] ---- */
.freitext h2 { margin: 1.6rem 0 .6rem; }
.freitext h3 { margin: 1.2rem 0 .4rem; }
.freitext p { margin: 0 0 .9rem; line-height: 1.6; }
.freitext ul, .freitext ol { margin: 0 0 .9rem 1.4rem; }
.freitext li { margin-bottom: .35rem; line-height: 1.55; }
.freitext blockquote {
  margin: 0 0 .9rem; padding: .6rem 1rem;
  border-left: 4px solid var(--farbe-akzent, #b08d3c); background: #faf8f3;
}
.freitext table {
  border-collapse: collapse; margin: .4rem 0 1.2rem; width: 100%;
  /* mobil: Tabelle scrollt in sich, Seite nie horizontal */
  display: block; overflow-x: auto; max-width: 100%;
}
.freitext th, .freitext td {
  border: 1px solid #ddd6c8; padding: .5rem .8rem; text-align: left;
  vertical-align: top;
}
.freitext thead th { background: #f1ede3; }
.freitext tbody tr:nth-child(even) { background: #faf8f3; }

/* Formatierungsleiste (nur Bearbeiten-Modus) */
.aw-richtools {
  position: absolute; z-index: 10010;
  display: flex; flex-wrap: wrap; gap: .25rem;
  background: #2b2b27; padding: .35rem .45rem; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.aw-richtools button {
  background: #43423c; color: #fff; border: none; border-radius: 5px;
  padding: .3rem .55rem; cursor: pointer; font: inherit; font-size: .85rem;
}
.aw-richtools button:hover { background: var(--farbe-akzent, #b08d3c); }

/* ---- Vor-Ort-Kachelverwaltung (AE-27) ---- */
/* Sichtbarkeit lebt im hidden-Attribut der Karte (im HTML gespeichert).
   Guard nötig — .karten-Grid-Items sind sonst display-gebunden
   (GOTCHA f3bebce). Im Bearbeiten-Modus bleiben ausgeblendete Karten
   sichtbar, halbtransparent und klar markiert. */
.karte[hidden] { display: none; }
body.aw-bearbeiten [data-kacheln] .karte[hidden] {
  display: block; opacity: .55; outline: 2px dashed var(--farbe-akzent, #b08d3c);
}
body.aw-bearbeiten [data-kacheln] .karte[hidden]::before {
  content: "🙈 unveröffentlicht — nur im Bearbeitungsmodus sichtbar";
  display: block; font-size: .75rem; font-weight: 700;
  color: var(--farbe-akzent, #b08d3c); margin-bottom: .35rem;
}
body.aw-bearbeiten [data-kacheln] .karte { position: relative; padding-top: 2.4rem; }
.aw-kachel-leiste {
  position: absolute; top: .35rem; right: .35rem; display: flex; gap: .2rem;
}
.aw-kachel-leiste button {
  border: 1px solid #ccc; background: #fff; border-radius: 5px;
  padding: .15rem .4rem; cursor: pointer; font-size: .85rem; line-height: 1.2;
}
.aw-kachel-leiste button:hover { border-color: var(--farbe-akzent); }
.aw-kachel-plus {
  border: 2px dashed #bbb; background: #faf8f3; border-radius: 12px;
  color: #666; font: inherit; font-size: 1.05rem; cursor: pointer;
  padding: 1.6rem 1rem; text-align: center; line-height: 1.7;
}
.aw-kachel-plus:hover { border-color: var(--farbe-akzent); color: var(--farbe-primaer); }
.aw-kachel-bildzeile { margin: .6rem 0; }
.aw-kachel-bildzeile button { margin-top: .3rem; }

/* Optionales Kachel-Vorschaubild: Überschrift → Bild → Text (AE-27 §9).
   Ohne Bild existiert das <figure> gar nicht — kein Leerraum. */
.karte-bild { margin: .6rem 0 .7rem; }
.karte-bild img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; display: block;
}

/* ---- Buchungsseite (AE-28): Direktbuchungs-Kachel + Portal-Bereich ---- */
.buchen-kachel { margin: 1.4rem 0 1.8rem; }
.buchen-kachel { scroll-margin-top: 7rem; } /* Sprungziel #direktbuchung unter dem sticky Header (AE-37) */
.buchen-kachel h3 { margin-bottom: .3rem; }
.buchen-kachel > p { color: #555; margin-bottom: 1rem; }
.portal-hinweis { font-weight: 600; margin: 1.6rem 0 .4rem; }
/* Sichtbarkeits-Schalter-Bereiche: im Bearbeiten-Modus markiert sichtbar */
[data-schalter][hidden] { display: none; }
body.aw-bearbeiten [data-schalter][hidden] {
  display: block; opacity: .55; outline: 2px dashed var(--farbe-akzent, #b08d3c);
}
body.aw-bearbeiten [data-schalter][hidden]::before {
  content: "🙈 unveröffentlicht — nur im Bearbeitungsmodus sichtbar";
  display: block; font-size: .75rem; font-weight: 700;
  color: var(--farbe-akzent, #b08d3c); margin-bottom: .35rem;
}
.aw-schalter-knopf {
  display: inline-block; margin-bottom: .5rem;
  border: 1px solid #ccc; background: #fff; border-radius: 6px;
  padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: .85rem;
}
.aw-schalter-knopf:hover { border-color: var(--farbe-akzent); }

/* ---- Kontaktformular (AE-30, Layout AE-31) ----
   Label über Feld, Feldpaare als 2-spaltiges Grid (mobil 1 Spalte),
   Touch-Ziele ≥ 44 px, Meldung direkt unter dem Knopf. */
.kontaktformular {
  display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--farbe-weiss); border-radius: 10px; padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); margin: 1rem 0 1.5rem; max-width: 640px;
  position: relative;
}
.kontaktformular .form-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kontaktformular .form-gruppe { display: flex; flex-direction: column; gap: .35rem; }
.kontaktformular .form-gruppe label { font-weight: 600; font-size: .9rem; }
.kontaktformular input[type="text"], .kontaktformular input[type="email"],
.kontaktformular input[type="tel"], .kontaktformular textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: .6rem .75rem;
  font: inherit; font-size: 1rem; border: 1px solid #c9c9c0; border-radius: 6px; background: #fff;
}
.kontaktformular input:focus, .kontaktformular textarea:focus {
  outline: 2px solid var(--farbe-akzent); outline-offset: 1px;
}
.kontaktformular textarea { resize: vertical; min-height: 8rem; }
.kontaktformular .form-tipp { font-size: .85rem; color: #666; margin: -.5rem 0 0; }
.kontaktformular .form-zustimmung label {
  display: flex; align-items: flex-start; gap: .6rem;
  font-weight: 400; font-size: .9rem; line-height: 1.45;
}
.kontaktformular .form-zustimmung input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
.kontaktformular button.knopf {
  align-self: flex-start; min-height: 44px; padding: .75rem 1.5rem;
  border: none; cursor: pointer; font: inherit; font-weight: 600;
}
.kontaktformular button.knopf:disabled { opacity: .6; cursor: wait; }
.kontaktformular .form-status { margin: -.4rem 0 0; font-size: .95rem; font-weight: 600; min-height: 1.3em; }
.kontaktformular .form-status.ist-fehler { color: #a3271c; }
.kontaktformular .form-status.ist-ok { color: #1f6b3a; }
/* Honeypot: für Menschen unsichtbar (offscreen statt display:none —
   manche Bots überspringen display:none), aria-hidden für Screenreader. */
.kontaktformular .form-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
  .kontaktformular { padding: 1.1rem; }
  .kontaktformular .form-zeile { grid-template-columns: 1fr; }
  .kontaktformular button.knopf { align-self: stretch; }
}

/* ---- Cookie-Consent-Banner (AE-32; HTML kommt aus js/cookie-consent.js) ---- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--farbe-primaer); color: var(--farbe-weiss);
  padding: 1rem 1.2rem; box-shadow: 0 -2px 10px rgba(0,0,0,.3);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  align-items: center; justify-content: center;
}
.cookie-banner .cookie-text { margin: 0; max-width: 62ch; font-size: .95rem; line-height: 1.45; }
.cookie-banner a { color: var(--farbe-weiss); text-decoration: underline; }
.cookie-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-banner button {
  min-height: 44px; padding: .6rem 1.3rem; border-radius: 6px;
  cursor: pointer; font: inherit; font-weight: 600;
}
.cookie-btn-accept { background: var(--farbe-akzent); color: var(--farbe-text); border: none; }
.cookie-btn-accept:hover { filter: brightness(1.08); }
.cookie-btn-reject { background: transparent; color: var(--farbe-weiss); border: 1px solid rgba(255,255,255,.75); }
.cookie-btn-reject:hover { background: rgba(255,255,255,.12); }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-knoepfe button { flex: 1; }
}

/* Kurzer Gemeinschafts-Hinweis in den Zimmerkarten (AE-36) */
.karte-hinweis { margin-top: .6rem; font-size: .92rem; font-weight: 600; color: var(--farbe-primaer); }