/* ==========================================================================
   Gästeinformationen – Gestaltung der oeffentlichen Seiten
   ========================================================================== */

:root {
  --blau: #1f66c9;
  --blau-dunkel: #16407e;
  --blau-hell: #e8f1fd;
  --hell: #f3f7fd;
  --hell-dunkel: #e2ecf9;
  --text: #1c2431;
  --text-leise: #5f6b7c;
  --weiss: #ffffff;
  --linie: #d7e2f0;
  --akzent: #0f9bd7;
  /* Verlauf von Weiss nach Blau – prägt Kopf- und Fussbereich */
  --verlauf-kopf: linear-gradient(180deg, #ffffff 0, #eef5fe 46px, #3f88de 92px, #16407e 100%);
  --verlauf-knopf: linear-gradient(180deg, #2a7ae0 0%, #1b5cbd 100%);
  --verlauf-fuss: linear-gradient(180deg, #2f7ad4 0%, #16407e 100%);
  --radius: 16px;
  --schatten: 0 2px 6px rgba(34, 32, 29, .06), 0 12px 28px rgba(34, 32, 29, .07);
  --breite: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--hell) 380px) no-repeat;
  background-color: var(--hell);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--blau-dunkel); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
/* Lange Einzelwörter (z. B. „Bedienungsanleitungen") dürfen umbrechen */
h1, h2, h3, h4, .kachel strong, .marke-name, .eintrag-inhalt h3 {
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); }
h3 { font-size: 1.15rem; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--blau); color: #fff;
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- Kopfbereich */
.kopf {
  background: var(--verlauf-kopf);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.kopf-inner {
  max-width: var(--breite); margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke { color: var(--blau-dunkel); text-decoration: none; display: grid; }
.marke-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.marke-claim { font-size: .85rem; color: #4d7db6; }

.menue-schalter {
  display: none; align-items: center; gap: .5rem;
  background: var(--blau); color: #fff;
  border: 0; border-radius: 12px; padding: .6rem .8rem; cursor: pointer; font: inherit;
}
.menue-schalter .balken { display: block; }
.menue-schalter .balken i { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; }
.menue-schalter em { font-style: normal; font-size: .95rem; }

.menue { background: transparent; }
.menue ul {
  max-width: var(--breite); margin: 0 auto; padding: 0 .6rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: .15rem;
}
.menue a {
  display: flex; align-items: center; gap: .45rem;
  color: rgba(255, 255, 255, .88); text-decoration: none;
  padding: .75rem .8rem; border-radius: 10px; font-size: .96rem;
}
.menue a:hover, .menue a:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.menue a[aria-current="page"] { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.nav-icon { font-size: 1.05rem; }

@media (max-width: 780px) {
  .menue-schalter { display: flex; }
  .menue { display: none; }
  .menue.offen { display: block; background: var(--blau-dunkel); }
  .menue ul { flex-direction: column; padding: .4rem; }
  .menue a { padding: .9rem .8rem; font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ Inhalt */
main { max-width: var(--breite); margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }

.seitenkopf { margin: .6rem 0 1.6rem; }
.seitenkopf .lead { color: var(--text-leise); font-size: 1.08rem; margin: 0; max-width: 60ch; }

.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: var(--schatten); margin-bottom: 1.2rem;
}
.karte > :last-child { margin-bottom: 0; }
.karte h2 { display: flex; align-items: center; gap: .5rem; }

.klein { font-size: .9rem; color: var(--text-leise); }
.hinweis { background: var(--hell-dunkel); border-radius: 12px; padding: .9rem 1.1rem; }

/* ------------------------------------------------------------------ Slider */
.slider {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #10294f; box-shadow: var(--schatten); margin-bottom: 1.6rem;
}
.slider-spur {
  position: relative; width: 100%;
  height: var(--slider-hoehe, 55vh);
  min-height: 240px; max-height: 720px;
}
.slide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .8s ease; display: block; pointer-events: none;
}
.slide.aktiv { opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.6rem 1.3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: #fff;
}
.slide-text h2 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.slide-text p { margin: .25rem 0 0; opacity: .95; }

.slider-knopf {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .82); color: #22201d;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.slider-knopf:hover { background: #fff; }
.slider-knopf.zurueck { left: .8rem; }
.slider-knopf.vor { right: .8rem; }

.slider-punkte {
  position: absolute; bottom: .8rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: .45rem;
}
.slider-punkte button {
  width: 11px; height: 11px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5);
}
.slider-punkte button[aria-current="true"] { background: #fff; width: 26px; border-radius: 6px; }

.slider-leer {
  display: grid; place-items: center; min-height: 220px; color: #fff;
  text-align: center; padding: 2rem;
}

/* ------------------------------------------------------------------ Kacheln */
.kacheln {
  display: grid; gap: 1rem; margin: 0 0 1.6rem; padding: 0; list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 x 3 Matrix */
}
@media (max-width: 820px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }
.kachel {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--schatten);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kachel:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(34,32,29,.08), 0 18px 34px rgba(34,32,29,.10); }
.kachel-icon { font-size: 1.9rem; line-height: 1; }
.kachel strong { display: block; font-size: 1.06rem; }
.kachel span.klein { display: block; }

/* ------------------------------------------------------------------- Raster */
.raster { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.zwei-spalten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.zeit-marke {
  display: inline-block; background: var(--verlauf-knopf); color: #fff;
  border-radius: 999px; padding: .25rem .9rem; font-weight: 600; font-size: .95rem;
}
.marke-kategorie {
  display: inline-block; background: var(--hell-dunkel); color: var(--text-leise);
  border-radius: 999px; padding: .2rem .75rem; font-size: .82rem; letter-spacing: .02em;
}

/* --------------------------------------------------------------------- WLAN */
.wlan { display: grid; gap: 1.6rem; grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }
@media (max-width: 700px) { .wlan { grid-template-columns: 1fr; } }
.qr-box { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten); }
.qr-box svg { width: 100%; height: auto; }
.zugang { list-style: none; margin: 0; padding: 0; }
.zugang li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.zugang li:last-child { border-bottom: 0; }
.zugang b { font-weight: 600; color: var(--text-leise); }
.zugang code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 1.05rem; background: var(--hell-dunkel); padding: .15rem .5rem; border-radius: 6px; }

/* ---------------------------------------------------------- Anleitungen/PDF */
.datei-liste { display: grid; gap: 1rem; margin-top: 1rem; }
.pdf-rahmen {
  width: 100%; height: min(75vh, 760px); border: 1px solid var(--linie);
  border-radius: 12px; background: var(--hell-dunkel);
}
.datei-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.knopf {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  background: var(--verlauf-knopf); color: #fff; border: 0; border-radius: 10px;
  padding: .55rem 1rem; font: inherit; cursor: pointer;
}
.knopf:hover { background: var(--blau-dunkel); }
.knopf.leise { background: var(--hell-dunkel); color: var(--text); }
.knopf.leise:hover { background: var(--linie); }

/* Frei konfigurierbarer Button-Bereich (Startseite): Button + optionale Info-Box */
.start-knopf { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 2.6rem; }
.start-knopf-zeile { display: flex; }
.start-knopf.ausrichtung-links  .start-knopf-zeile { justify-content: flex-start; }
.start-knopf.ausrichtung-mitte  .start-knopf-zeile { justify-content: center; }
.start-knopf.ausrichtung-rechts .start-knopf-zeile { justify-content: flex-end; }
.start-knopf .knopf { padding: .75rem 1.4rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.08); }

.start-info { margin: 0; padding: 1rem 1.2rem; }
.start-info > :first-child { margin-top: 0; }
.start-info > :last-child { margin-bottom: 0; }
.start-knopf.ausrichtung-mitte .start-info { text-align: center; }
.start-knopf.ausrichtung-rechts .start-info { text-align: right; }

/* Info-Box neben dem Button: Button links, Info rechts – bei „rechts“ umgekehrt */
.start-knopf.info-neben { flex-direction: row; align-items: center; gap: 1.2rem; }
.start-knopf.info-neben .start-knopf-zeile { flex: 0 0 auto; }
.start-knopf.info-neben .start-info { flex: 1 1 auto; text-align: left; }
.start-knopf.info-neben.ausrichtung-rechts { flex-direction: row-reverse; }
.start-knopf.info-neben.ausrichtung-mitte { justify-content: center; }
.start-knopf.info-neben.ausrichtung-mitte .start-info { flex: 0 1 auto; }

@media (max-width: 560px) {
  .start-knopf .knopf { width: 100%; justify-content: center; }
  .start-knopf-zeile { width: 100%; }
  .start-knopf.info-neben,
  .start-knopf.info-neben.ausrichtung-rechts { flex-direction: column; align-items: stretch; gap: .9rem; }
}

.bild-galerie { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bild-galerie img {
  border-radius: 12px; border: 1px solid var(--linie);
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}

/* -------------------------------------------------------------- Eintragsbox */
.eintrag { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; }
.eintrag-bild { width: 100%; height: 190px; object-fit: cover; }
.eintrag-inhalt { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.eintrag-inhalt h3 { margin: 0; }
.eintrag-inhalt p { margin: 0; }
.eintrag-meta { list-style: none; margin: 0; padding: 0; font-size: .95rem; color: var(--text-leise); display: grid; gap: .25rem; }
.eintrag-meta li { display: flex; gap: .5rem; }
.eintrag-meta .sym { width: 1.3rem; text-align: center; }

.kategorie-titel { margin: 2rem 0 .9rem; padding-bottom: .35rem; border-bottom: 2px solid var(--linie); }
.kategorie-titel:first-of-type { margin-top: .5rem; }

.leer { background: var(--weiss); border: 1px dashed var(--linie); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--text-leise); }

/* --------------------------------------------------------------- Meldungen */
.meldung { border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.meldung.ok { background: #eaf7ef; border: 1px solid #c9ecd7; color: #1e6b3c; }
.meldung.fehler { background: #fdeceb; border: 1px solid #f3c9c4; color: #a33124; }
.meldung h2 { margin-top: 0; }

/* ---------------------------------------------------------- Formulare (Karte) */
.karte form label { display: block; font-weight: 600; margin: 0rem 0 .4rem; }
.karte form textarea,
.karte form input[type=text] {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--linie);
  border-radius: 10px; font: inherit; color: inherit;
}
.karte form .aktionen { margin-top: 1.4rem; }

/* --------------------------------------------------------- Bewertungsskala */
.skala { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.skala legend { font-weight: 600; padding: 0 0 .6rem; white-space: normal; }
/*
 * Alle zehn Kreise haben eine feste, gleiche Grösse (kein Schrumpfen über
 * flex-grow/aspect-ratio – das führte je nach Browser zu ungleich grossen
 * bzw. schlecht ausgerichteten Kreisen). Die Reihe bricht nie um
 * (flex-wrap: nowrap); die feste Grösse ist bewusst so klein gewählt, dass
 * alle zehn auch auf einem schmalen Handy nebeneinander passen.
 */
.skala-reihe {
  display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: .4rem;
}
.skala-knopf { position: relative; display: block; flex: 0 0 auto; }
.skala-knopf input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.skala-knopf span {
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--hell);
  font-weight: 600; font-size: .78rem;
  color: var(--text-leise); pointer-events: none;
}
.skala-knopf input:checked + span { background: var(--verlauf-knopf); color: #fff; border-color: transparent; }
.skala-knopf input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 400px) {
  .skala-reihe { gap: .4rem; }
  .skala-knopf span { width: 1.5rem; height: 1.5rem; font-size: .68rem; }
}
.skala-enden {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--text-leise); margin-top: .4rem;
}

/* -------------------------------------------------------------------- Fuss */
.fuss { background: var(--verlauf-fuss); color: rgba(255,255,255,.9); margin-top: 2rem; }
.fuss-inner { max-width: var(--breite); margin: 0 auto; padding: 1.4rem 1.2rem; font-size: .92rem; }
.fuss a { color: #fff; }
.fuss p { margin: .2rem 0; }
.fuss .klein { color: rgba(255,255,255,.7); }

/* -------------------------------------------------------------- Cookie-Hinweis */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--blau-dunkel); color: #fff;
  box-shadow: 0 -6px 20px rgba(22, 64, 126, .25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: var(--breite); margin: 0 auto; padding: .9rem 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem 1.2rem;
}
.cookie-banner p { margin: 0; flex: 1 1 320px; font-size: .92rem; color: rgba(255,255,255,.92); }
.cookie-banner .knopf { flex: 0 0 auto; background: #fff; color: var(--blau-dunkel); }
.cookie-banner .knopf:hover { background: var(--hell); }

@media print {
  .kopf, .fuss, .slider, .menue-schalter, .cookie-banner { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; }
}

/* ------------------------------------------ Formatierte Texte aus dem Editor */
.karte h2, .karte h3, .karte h4 { color: var(--blau-dunkel); }
.karte ul, .karte ol,
.eintrag-inhalt ul, .eintrag-inhalt ol,
details.anleitung ul, details.anleitung ol { margin: 0 0 .8em; padding-left: 1.4rem; }
.karte li, .eintrag-inhalt li { margin: .2em 0; }
.karte blockquote, .eintrag-inhalt blockquote {
  margin: .8em 0; padding: .5rem 1rem; border-left: 4px solid var(--blau);
  background: var(--blau-hell); border-radius: 0 10px 10px 0;
}
.karte hr, .eintrag-inhalt hr { border: 0; border-top: 1px solid var(--linie); margin: 1.2em 0; }
.karte a, .eintrag-inhalt a { color: var(--blau); }
/* Schaltflächen dürfen nicht von der Linkfarbe der Karten überschrieben werden */
.karte a.knopf, .eintrag-inhalt a.knopf, a.knopf, button.knopf { color: #fff; }
.karte a.knopf.leise, .eintrag-inhalt a.knopf.leise, a.knopf.leise { color: var(--text); }

/* Symbol vor dem Gerätenamen bei den Bedienungsanleitungen */
.anleitung-icon { font-size: 1.5rem; line-height: 1; }
.anleitung-icon-bild { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
details.anleitung[open] .anleitung-icon-bild { width: 56px; height: 56px; }

/* ------------------------------------ Bilder aus dem HTML-Editor im Text */
.inhalt-bild {
  display: block; max-width: 100%; height: auto;
  /* Hochformate sollen nicht den ganzen Bildschirm füllen */
  max-height: 80vh; object-fit: contain;
  border-radius: 12px; margin: .9em 0;
}
.inhalt-bild.bild-klein  { max-width: 240px; max-width: min(240px, 100%); }
.inhalt-bild.bild-mittel { max-width: 460px; max-width: min(460px, 100%); }
.inhalt-bild.bild-gross  { max-width: 100%; }

/* Rahmen */
.inhalt-bild.bild-rahmen {
  border: 1px solid var(--linie); background: #fff; padding: 6px;
  box-shadow: 0 1px 3px rgba(28, 36, 49, .08);
}

/* Ausrichtung – links und rechts umfliesst der Text das Bild */
.inhalt-bild.bild-links  { float: left;  margin: .4em 1.3em .9em 0; }
.inhalt-bild.bild-rechts { float: right; margin: .4em 0 .9em 1.3em; }
.inhalt-bild.bild-mitte  { float: none;  margin-left: auto; margin-right: auto; }

/* Umflossenen Bereich sauber abschliessen */
.karte::after, .eintrag-inhalt::after, details.anleitung::after {
  content: ""; display: block; clear: both;
}

/* Auf schmalen Bildschirmen stehen Bilder immer allein */
@media (max-width: 560px) {
  .inhalt-bild.bild-links, .inhalt-bild.bild-rechts {
    float: none; margin: .9em auto;
  }
  /* Hochformate nicht über den halben Bildschirm hinaus */
  .inhalt-bild { max-height: 68vh; }

  /* Slider: auf dem Handy flacher, sonst wird ein Querformat stark
     beschnitten. Die Höhe folgt der Bildschirmbreite (etwa 16:9). */
  .slider-spur {
    height: min(var(--slider-hoehe, 55vh), 62vw);
    min-height: 180px;
  }
  .slide-text { padding: 1.8rem 1.1rem .9rem; }
  .slide-text h2 { font-size: 1.25rem; }
  .slide-text p { font-size: .92rem; }
  /* Galerie: ein Bild pro Zeile, vollständig und unbeschnitten */
  .bild-galerie { grid-template-columns: 1fr; gap: .7rem; }
  .bild-galerie img {
    aspect-ratio: auto; height: auto; max-height: 68vh; object-fit: contain;
    background: var(--hell);
  }
}

/* Textausrichtung */
.text-links  { text-align: left; }
.text-mitte  { text-align: center; }
.text-rechts { text-align: right; }
.text-mitte > .inhalt-bild, .text-rechts > .inhalt-bild { display: inline-block; }

/* --------------------------------------- Eingebettete Videos und Karten */
.einbettung {
  position: relative; margin: 1.1em 0; aspect-ratio: 16 / 9;
  border: 1px solid var(--linie); border-radius: 12px; overflow: hidden;
  background: var(--hell-dunkel);
}
.einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) {
  .einbettung { height: 0; padding-bottom: 56.25%; }
}

/* ------------------------------------------------ Tabellen aus dem Editor */
.tabelle-rahmen { overflow-x: auto; margin: 1.1em 0; -webkit-overflow-scrolling: touch; }
.inhalt-tabelle {
  border-collapse: collapse; width: 100%; min-width: 380px;
  background: rgba(255, 255, 255, .55); border-radius: 10px; overflow: hidden;
}
.inhalt-tabelle th, .inhalt-tabelle td {
  border: 1px solid var(--linie); padding: .55rem .8rem; text-align: left; vertical-align: top;
}
.inhalt-tabelle th { background: var(--blau-hell); color: var(--blau-dunkel); font-weight: 600; }
.inhalt-tabelle tbody tr:nth-child(even) td { background: rgba(232, 241, 253, .45); }
.inhalt-tabelle .text-mitte  { text-align: center; }
.inhalt-tabelle .text-rechts { text-align: right; }
.inhalt-tabelle.tabelle-schmal { min-width: 0; width: auto; }

/* Auf schmalen Bildschirmen stehen die Spalten untereinander.
   Die Spaltenüberschrift kommt aus data-spalte (setzt includes/html.php).
   Mit der Klasse "tabelle-scroll" bleibt die Tabelle stattdessen seitlich
   scrollbar – sinnvoll bei reinen Zahlentabellen. */
@media (max-width: 640px) {
  .inhalt-tabelle:not(.tabelle-scroll) { min-width: 0; border-radius: 0; background: none; }
  .inhalt-tabelle:not(.tabelle-scroll),
  .inhalt-tabelle:not(.tabelle-scroll) tbody,
  .inhalt-tabelle:not(.tabelle-scroll) tr,
  .inhalt-tabelle:not(.tabelle-scroll) td { display: block; width: auto; }
  .inhalt-tabelle:not(.tabelle-scroll) thead { display: none; }
  .inhalt-tabelle:not(.tabelle-scroll) tr {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--linie); border-radius: 10px;
    padding: .3rem .85rem; margin-bottom: .8rem;
  }
  .inhalt-tabelle:not(.tabelle-scroll) tbody tr:nth-child(even) td { background: none; }
  .inhalt-tabelle:not(.tabelle-scroll) td {
    border: 0; border-bottom: 1px solid var(--linie);
    padding: .5rem 0; text-align: left;
  }
  .inhalt-tabelle:not(.tabelle-scroll) tr td:last-child { border-bottom: 0; }
  .inhalt-tabelle:not(.tabelle-scroll) td[data-spalte]::before {
    content: attr(data-spalte);
    display: block; font-weight: 600; font-size: .82rem;
    color: var(--text-leise); margin-bottom: .1rem;
  }
  /* Leere Zellen brauchen keine Zeile */
  .inhalt-tabelle:not(.tabelle-scroll) td:empty { display: none; }
}

/* -------------------------------------------- Mehrere Ferienobjekte */
.kopf-rechts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kopf-link {
  color: var(--blau-dunkel); text-decoration: none; font-size: .9rem;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--linie);
  border-radius: 10px; padding: .35rem .7rem; white-space: nowrap;
}
.kopf-link:hover { background: #fff; }

@media (max-width: 820px) {
  .kopf-inner { padding: .55rem .9rem; }
  .marke-name { font-size: 1.05rem; }
  .marke-claim { display: none; }
  .kopf-rechts { gap: .4rem; }
  .kopf-link { padding: .42rem .55rem; font-size: 1.05rem; line-height: 1; }
  .kopf-link .wort { display: none; }
}

/* Auswahlseite und Passwortabfrage */
.auswahl-seite { display: flex; flex-direction: column; min-height: 100vh; }
.auswahl-seite main { max-width: var(--breite); width: 100%; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; flex: 1; }
.auswahl-seite .kopf { position: static; }
.auswahl-seite .fuss { margin-top: auto; }

.objekt-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.objekt-liste > li { display: flex; }
.objekt-karte {
  display: flex; flex-direction: column; flex: 1; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.objekt-karte:hover, .objekt-karte:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(22, 64, 126, .12), 0 18px 36px rgba(22, 64, 126, .14);
}
.objekt-karte img { width: 100%; height: 190px; object-fit: cover; }
.objekt-platzhalter {
  display: flex; align-items: center; justify-content: center;
  height: 190px; font-size: 3.4rem; background: var(--blau-hell);
}
.objekt-text { display: grid; gap: .2rem; padding: 1rem 1.2rem 1.2rem; margin-top: auto; }
.objekt-text strong { font-size: 1.2rem; color: var(--blau-dunkel); }

.zugang-box { max-width: 560px; margin: 2rem auto; }
.zugang-box label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.zugang-box input[type=password] {
  width: 100%; padding: .7rem .9rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 10px;
}
.zugang-box .aktionen { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.zugang-box .knopf, .auswahl-seite .knopf {
  display: inline-block; background: var(--verlauf-knopf); color: #fff;
  border: 0; border-radius: 10px; padding: .6rem 1.1rem;
  font: inherit; text-decoration: none; cursor: pointer;
}
.zugang-box .knopf.leise { background: var(--blau-hell); color: var(--blau-dunkel); }
.zugang-box .meldung.fehler {
  background: #fdecea; border: 1px solid #f5c6c0; color: #8d2e24;
  border-radius: 10px; padding: .7rem .9rem; margin-top: 1rem;
}

/* Hinweis, wenn Inhalte erst nach der Anmeldung sichtbar werden */
.hinweis-anmelden p { margin: 0 0 .8rem; }
.hinweis-anmelden p:last-child { margin-bottom: 0; }
.hinweis-anmelden .knopf {
  display: inline-block; background: var(--verlauf-knopf); color: #fff;
  border: 0; border-radius: 10px; padding: .55rem 1.05rem; text-decoration: none;
}

/* --------------------------------------------------------- Sprachwahl */
.sprachwahl { display: flex; gap: .25rem; }
.sprachwahl a {
  display: inline-flex; align-items: center; gap: .28rem;
  text-decoration: none; font-size: .85rem; line-height: 1;
  color: var(--blau-dunkel);
  background: rgba(255, 255, 255, .75); border: 1px solid var(--linie);
  border-radius: 10px; padding: .38rem .55rem;
}
.sprachwahl a:hover { background: #fff; }
.sprachwahl a[aria-current="true"] {
  background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600;
}
@media (max-width: 820px) {
  .sprachwahl a { padding: .38rem .42rem; }
  .sprachwahl a .kurz { display: none; }
}

@media (max-width: 560px) {
  .marke-name { font-size: .98rem; line-height: 1.25; }
  .kopf-inner { gap: .5rem; }
  .menue-schalter { padding: .5rem .6rem; }
  .menue-schalter em { display: none; }
}

/* ------------------------------- Eigene Symbolbilder der freien Seiten */
.nav-icon-bild {
  width: 22px; height: 22px; object-fit: contain;
  display: inline-block; vertical-align: -.3em; flex: 0 0 auto;
}
.kachel-icon-bild { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.titel-icon-bild {
  width: 1.15em; height: 1.15em; object-fit: contain;
  display: inline-block; vertical-align: -.18em; margin-right: .3rem;
}

/* ------------------------------------------------------ Textfarben im Inhalt */
.farbe-rot     { color: #c0392b; }
.farbe-orange  { color: #b1600f; }
.farbe-gruen   { color: #1a7a45; }
.farbe-blau    { color: #1f66c9; }
.farbe-violett { color: #6b3fa0; }
.farbe-grau    { color: #5f6b7c; }

/* Markierungen: heller Hintergrund, darum immer dunkle Schrift */
.mark-gelb, .mark-gruen, .mark-blau, .mark-rosa {
  color: #1c2431;
  padding: .05em .25em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-gelb  { background: #fdf0b0; }
.mark-gruen { background: #d5f0de; }
.mark-blau  { background: #dbe9fb; }
.mark-rosa  { background: #fbdce6; }

/* ------------------------------------------- Bildergalerie unter dem Slider */
.slider-galerie { margin: 0 0 1.6rem; }
.slider-galerie ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.slider-galerie a {
  display: block; position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--linie);
  background: var(--weiss); box-shadow: var(--schatten);
  text-decoration: none; color: inherit;
  transition: transform .13s ease, box-shadow .13s ease;
}
.slider-galerie a:hover, .slider-galerie a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(22, 64, 126, .12), 0 16px 30px rgba(22, 64, 126, .12);
}
.slider-galerie img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.slider-galerie .galerie-titel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
  color: #fff; font-size: .9rem; font-weight: 600;
}
@media (max-width: 560px) {
  .slider-galerie ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* ------------------------------------------------------- Bild-Popup (Lupe) */
body.lupe-offen { overflow: hidden; }
.lupe {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 20, 33, .92);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.8rem, 3vw, 2.5rem);
}
.lupe[hidden] { display: none; }
.lupe-inhalt {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.lupe-inhalt img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  background: #0c1421;
}
.lupe-inhalt figcaption {
  color: #eef4fd; text-align: center; font-size: .95rem;
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: center;
}
.lupe-zaehler { color: rgba(238, 244, 253, .7); font-variant-numeric: tabular-nums; }
.lupe-zu, .lupe-pfeil {
  position: absolute; z-index: 1;
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease;
}
.lupe-zu:hover, .lupe-pfeil:hover,
.lupe-zu:focus-visible, .lupe-pfeil:focus-visible { background: rgba(255, 255, 255, .32); }
.lupe-zu { top: .8rem; right: .8rem; width: 44px; height: 44px; font-size: 1.3rem; line-height: 1; }
.lupe-pfeil { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; line-height: 1; }
.lupe-pfeil.zurueck { left: .6rem; }
.lupe-pfeil.vor { right: .6rem; }
.lupe-pfeil[hidden] { display: none; }
@media (max-width: 560px) {
  .lupe-pfeil { width: 44px; height: 44px; font-size: 1.8rem; }
  .lupe-inhalt img { max-height: 70vh; }
}