/* ==========================================================================
   Dubbert & Djukic Liegenschaften – Stylesheet
   Nachbau der bisherigen Seite (dubbert-djukic.de): Roboto 18 px als Fließtext, Quicksand leicht für
   Überschriften und Knöpfe, Dunkelblau #053774, Hellblau #0079c1, Hellgrau #ebebeb.
   Aufbau: Token → Schriften → Grundelemente → Kopf und Menü → Seitenkopf (Bild + weiße Box) →
   Bausteine (Zweispalter, Karussell, Band, Zeitstrahl, Video, Downloads) → Fußzeile → Hilfsklassen.
   ========================================================================== */

:root {
  --blau: #053774;
  --blau-dunkel: #042a58;
  --hellblau: #0079c1;
  --grau: #ebebeb;
  --grau-linie: #d9d9d9;
  --text: #333333;
  --muted: #5a5a5a;
  --weiss: #ffffff;

  /* Das Schrift- und Farb-Werkzeug (?schrift=1) greift auf diese Variablen zu. */
  --akzent: var(--blau);
  --akzent-hover: var(--weiss);
  --akzent-flaeche: var(--blau);
  --font-display: "Quicksand", "Trebuchet MS", sans-serif;
  --font-text: "Roboto", "Segoe UI", Arial, sans-serif;
  --kopf-skalierung: 1;

  --wrap: 1380px;
  --rand: 18px;
  --radius: 0;
  --ablauf: 0.25s ease;
  --schatten: 0 10px 30px rgba(5, 55, 116, 0.18);
  --kopf-hoehe: 96px;
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Grundelemente
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font: 400 18px/1.5 var(--font-text);
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
}
body.menue-offen { overflow: hidden; }

img,
svg,
video,
iframe { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }

a {
  color: var(--hellblau);
  text-decoration: none;
  transition: color var(--ablauf);
}
a:hover,
a:focus-visible { color: var(--blau); text-decoration: underline; }

p { margin: 0 0 1em; }
ul,
ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: 0.25em; }
address { font-style: normal; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--grau-linie); margin: 2rem 0; }
figure { margin: 0; }
figcaption {
  font-size: 0.85em;
  color: var(--muted);
  margin-top: 0.5em;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible { outline: 3px solid var(--hellblau); outline-offset: 2px; }

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  color: var(--blau);
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
}
h1 {
  font-size: calc(2.6rem * var(--kopf-skalierung));
  font-weight: 300;
  letter-spacing: 0.01em;
}
h2 { font-size: calc(2rem * var(--kopf-skalierung)); }
h3 {
  font-size: calc(1.3rem * var(--kopf-skalierung));
  font-weight: 400;
  color: var(--text);
}
@media (min-width: 700px) {
  h1 { font-size: calc(3.6rem * var(--kopf-skalierung)); }
}
@media (min-width: 1200px) {
  h1 { font-size: calc(4.5rem * var(--kopf-skalierung)); }
}

/* Überschrift mit Linie nach rechts (wie bisher: Text, dann eine Linie bis zum Rand) */
h2.linie {
  display: flex;
  align-items: center;
  gap: 1rem;
}
h2.linie > span { flex: 0 1 auto; }
h2.linie::after {
  content: "";
  flex: 1 1 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  min-width: 2rem;
}
h2.linie--ohne::after { display: none; }
h2.linie--hell { color: var(--weiss); }

.wrap {
  width: min(100% - 2 * var(--rand), var(--wrap));
  margin-inline: auto;
}
.text > :last-child { margin-bottom: 0; }
.gross { font-size: 1.15em; }
.zentriert { text-align: center; }
@media (min-width: 700px) {
  .gross { font-size: 1.3em; line-height: 1.45; }
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprung {
  position: absolute;
  left: -200vw;
  top: 0;
  background: var(--blau);
  color: var(--weiss);
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.sprung:focus { left: 0.5rem; top: 0.5rem; }

/* Knöpfe */
.knopf {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.3;
  padding: 9px 27px;
  border: 1px solid currentColor;
  background: var(--akzent-flaeche);
  color: var(--weiss);
  text-decoration: none;
  margin: 0.35rem 0.25rem 0.35rem 0;
  transition: background var(--ablauf), color var(--ablauf);
}
.knopf:hover,
.knopf:focus-visible {
  background: var(--akzent-hover);
  color: var(--akzent-flaeche);
  text-decoration: none;
}
.knopfreihe { margin: 1rem 0 0; text-align: center; }
.knopfreihe .knopf { display: block; width: 100%; margin: 1rem 0 0; }
@media (min-width: 700px) {
  .knopfreihe .knopf { display: inline-block; width: auto; margin: 0 0 0 1rem; }
  .knopfreihe .knopf:first-child { margin-left: 0; }
}
.knopfzeile { margin: 1.5rem 0 0; }

/* --------------------------------------------------------------------------
   Kopf: Logo links, „Menü“-Knopf rechts; auf dem Bild transparent, beim Rollen dunkelblau fest
   -------------------------------------------------------------------------- */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--weiss);
  padding: 1.5rem 0;
  transition: background var(--ablauf), padding var(--ablauf), transform var(--ablauf);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kopf--fest {
  position: fixed;
  background: var(--blau);
  padding: 0.6rem 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  animation: kopf-rein 0.3s ease;
}
@keyframes kopf-rein {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.kopf--fest .logo-bild { width: 190px; }
.kopf--fest .logo-linie,
.kopf--fest .logo-claim { display: none; }
/* Seiten ohne Kopfbild: Kopf immer blau */
.kopfbild--leer ~ * .kopf,
body.ohne-kopfbild .kopf { position: relative; background: var(--blau); }

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--ablauf);
}
.logo:hover,
.logo:focus-visible { text-decoration: none; opacity: 0.9; color: inherit; }
.logo-bild {
  width: 240px;
  height: auto;
  transition: width var(--ablauf);
}
.logo-wort {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.logo-linie {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
  margin: 0.45rem 0 0.35rem;
}
.logo-claim {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.42em;
}
@media (min-width: 700px) {
  .logo-bild { width: 300px; }
  .logo-claim { font-size: 0.8rem; }
}
@media (min-width: 1200px) {
  .logo-bild { width: 340px; }
}

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--weiss);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background var(--ablauf), color var(--ablauf);
}
.menue-knopf:hover,
.menue-knopf:focus-visible { background: var(--weiss); color: var(--blau); }
.hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.hamburger i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--ablauf), opacity var(--ablauf);
}

/* Überlagerung von rechts: dunkelblau, leicht durchscheinend */
.menue {
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 50rem;
  background: rgba(5, 55, 116, 0.94);
  color: var(--weiss);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
  padding: calc(var(--kopf-hoehe) + 1rem) var(--rand) 2rem;
}
.menue[hidden] { display: block; visibility: hidden; }
.menue.offen { transform: translateX(0); visibility: visible; }
.menue-innen { width: min(100%, 34rem); margin-inline: auto; position: relative; }
.menue-liste,
.menue-ebene2 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menue-liste > li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.menue-liste a,
.menue-zu {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  line-height: 1.2;
  padding: 0.6em 3rem 0.6em 0;
  color: var(--weiss);
  text-decoration: none;
  transition: padding-left var(--ablauf), color var(--ablauf);
}
.menue-liste a:hover,
.menue-liste a:focus-visible,
.menue-liste li.aktuell > a { padding-left: 0.4em; color: var(--weiss); text-decoration: none; }
.menue-liste li.aktuell > a { font-weight: 400; }
.menue-auf {
  position: absolute;
  right: 0;
  top: 0.35em;
  width: 3rem;
  height: calc(100% - 0.7em);
  font-size: 2.2rem;
  color: var(--weiss);
  text-align: center;
  line-height: 1;
}
.menue-auf:hover,
.menue-auf:focus-visible { color: var(--hellblau); }
.menue-ebene2 {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--blau);
  transform: translateX(110%);
  transition: transform 0.3s ease;
  visibility: hidden;
  min-height: 100%;
}
.menue-ebene2.offen { transform: translateX(0); visibility: visible; }
.menue-ebene2 > li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.menue-ebene2 .menue-zurueck { border-bottom-color: rgba(255, 255, 255, 0.45); }
.menue-zu { width: 100%; text-align: left; font-weight: 400; }
.menue-ebene2 a { font-size: clamp(1.3rem, 3.8vw, 2rem); }
.menue-innen.ebene2-aktiv > .menue-liste > li { visibility: hidden; }
.menue-innen.ebene2-aktiv > .menue-liste > li.offen { visibility: visible; }
.menue-innen.ebene2-aktiv > .menue-liste > li.offen > a,
.menue-innen.ebene2-aktiv > .menue-liste > li.offen > .menue-auf { visibility: hidden; }

.verdunkelung {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.verdunkelung[hidden] { display: block; visibility: hidden; }
.verdunkelung.offen { opacity: 1; visibility: visible; }
body.menue-offen .kopf { z-index: 80; }
body.menue-offen .hamburger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menue-offen .hamburger i:nth-child(2) { opacity: 0; }
body.menue-offen .hamburger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Seitenkopf: großes Bild mit Verlauf, weiße Box von unten hineingeschoben
   -------------------------------------------------------------------------- */
.kopfbild {
  position: relative;
  overflow: hidden;
  background: var(--blau);
}
.kopfbild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5, 55, 116, 0.85) 0%, rgba(5, 55, 116, 0) 47%);
  pointer-events: none;
}
.kopfbild--start { height: 100vh; min-height: 560px; }
.kopfbild--seite { aspect-ratio: 16 / 7; min-height: 320px; max-height: 70vh; }
.kopfbild--leer { height: 220px; }
@media (min-width: 1366px) {
  .kopfbild--seite { aspect-ratio: 1920 / 700; }
}
.dia {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.dia.aktiv { opacity: 1; z-index: 1; }
.dia img,
.kopfbild--seite .dia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kopfbild--leer .dia { display: none; }

.hochziehen {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem var(--rand) 1rem;
  margin: -6rem auto 0;
  text-align: center;
}
.hochziehen h1 { text-align: center; margin-bottom: 0.3em; color: var(--text); }
.hochziehen .gross { font-size: 1em; line-height: 1.5; }
.hochziehen .vorstellung {
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}
.kopfbild--start + .wrap .hochziehen { margin-top: -14rem; padding: 2.5rem var(--rand) 1.5rem; }
.kopfbild--leer + .wrap .hochziehen { margin-top: -3rem; padding-top: 1.5rem; }
@media (min-width: 700px) {
  .hochziehen { padding: 2.5rem 3.8em 1.5rem; margin-top: -9rem; }
  .kopfbild--start + .wrap .hochziehen { margin-top: -22rem; padding: 3rem 3.8em 1.5rem; }
}
@media (min-width: 1366px) {
  .hochziehen { margin-top: -15.5rem; padding: 2.5rem 3.8em 1.5rem; }
  .kopfbild--start + .wrap .hochziehen { margin-top: -25rem; padding: 3rem 3.8em 2rem; }
}
.pfeil-runter { margin: 1rem 0 0; }
.pfeil-runter a {
  display: inline-block;
  color: var(--blau);
  transform: rotate(-90deg);
  transition: transform var(--ablauf);
}
.pfeil-runter a:hover,
.pfeil-runter a:focus-visible { transform: rotate(-90deg) translateX(-4px); }
.pfeil-runter svg { fill: currentColor; width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
.abschnitt { padding: 3rem 0; }
.abschnitt + .abschnitt { padding-top: 0.5rem; }
@media (min-width: 700px) {
  .abschnitt { padding: 4rem 0; }
  .abschnitt + .abschnitt { padding-top: 1rem; }
}
.abschnitt.band,
.abschnitt.zeitstrahl { padding: 0; margin: 2rem 0; }
.abschnitt.band + .abschnitt,
.abschnitt.zeitstrahl + .abschnitt,
.abschnitt.galerie + .abschnitt { padding-top: 3rem; }
.hochziehen ~ * .abschnitt:first-child { padding-top: 2rem; }

/* Zwei Spalten: Text | Bild (oder Text | Text) */
.zweispalter-innen {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 700px) {
  .zweispalter-innen { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .zweispalter--bild-links .spalte--bild { order: -1; }
  .zweispalter--einspaltig .zweispalter-innen { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
  .zweispalter-innen { gap: 4rem; }
}
.spalte--bild .bild img { width: 100%; height: auto; }
.spalte .bild { margin-bottom: 1.25rem; }
.spalte .text + .bild { margin-top: 1.25rem; }
.lightbox { display: block; position: relative; }
.lightbox-zeichen {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: rgba(5, 55, 116, 0.85);
  color: var(--weiss);
}

/* Downloads */
.downloads { list-style: none; padding: 0; margin: 0; }
.downloads li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--grau-linie);
}
.downloads li:first-child { border-top: 1px solid var(--grau-linie); }
.downloads .pdf-zeichen { flex: none; color: var(--blau); position: relative; top: 2px; }
.download-groesse { color: var(--muted); font-size: 0.85em; white-space: nowrap; }

/* Volltext */
.volltext--gross .text { max-width: 60rem; margin-inline: auto; }

/* Karussell: waagerechte Reihe, 400 px hoch, mit Pfeilen */
.karussell { position: relative; }
.karussell-spur {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.karussell-spur::-webkit-scrollbar { display: none; }
.karussell-zelle {
  flex: none;
  scroll-snap-align: start;
  height: 260px;
}
.karussell-zelle img {
  height: 100%;
  width: auto;
  max-width: none;
}
.karussell-zelle .lightbox { height: 100%; }
@media (min-width: 700px) {
  .karussell-zelle { height: 400px; }
}
.galerie .karussell { margin-top: 1rem; }
.galerie .karussell-spur { padding-left: max(var(--rand), calc((100% - var(--wrap)) / 2)); padding-right: var(--rand); }
.karussell-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--blau);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background var(--ablauf), color var(--ablauf), opacity var(--ablauf);
}
.karussell-pfeil svg { fill: currentColor; }
.karussell-pfeil--weiter svg { transform: rotate(180deg); }
.karussell-pfeil--zurueck { left: 0.75rem; }
.karussell-pfeil--weiter { right: 0.75rem; }
.karussell-pfeil:hover,
.karussell-pfeil:focus-visible { background: var(--blau); color: var(--weiss); }
.karussell-pfeil[disabled] { opacity: 0.35; cursor: default; }
.karussell-pfeil[hidden] { display: none; }

/* Einzelbild-Karussell (Sanierungsprojekt) */
.karussell--einzeln .karussell-zelle {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.karussell--einzeln .karussell-zelle img,
.karussell--einzeln .karussell-zelle .lightbox {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karussell--einzeln .karussell-pfeil {
  background: rgba(5, 55, 116, 0.8);
  color: var(--weiss);
  width: 40px;
  height: 40px;
}
.karussell--einzeln .karussell-pfeil:hover { background: var(--blau); }
.karussell-punkte {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.karussell-punkte button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grau-linie);
  transition: background var(--ablauf);
}
.karussell-punkte button.aktiv { background: var(--blau); }

/* Band in voller Breite: Bild, dunkelblaue Lage, Text unten links */
.band {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: flex-end;
  color: var(--weiss);
  background: var(--blau);
  overflow: hidden;
}
.band-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 55, 116, 0.75);
}
.band-innen { position: relative; z-index: 2; padding: 3rem 0 2.5rem; }
.band-text { max-width: 44rem; }
.band h2 { color: var(--weiss); }
.band .knopf { border-color: var(--blau); background: var(--blau); color: var(--weiss); }
.band .knopf:hover,
.band .knopf:focus-visible { background: var(--weiss); border-color: var(--weiss); color: var(--blau); }
.band a:not(.knopf) { color: var(--weiss); text-decoration: underline; }

/* Zeitstrahl (Über uns): Hintergrundbild mit blauer Lage, Linie mit Punkten, Karten darunter */
.zeitstrahl {
  position: relative;
  color: var(--weiss);
  background: var(--blau);
  overflow: hidden;
}
.zeitstrahl-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zeitstrahl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 55, 116, 0.82);
}
.zeitstrahl-innen { position: relative; z-index: 2; padding: 3rem 0; }
.zeitleiste {
  display: none;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  position: relative;
}
.zeitleiste::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2.1rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
}
.zeitleiste li {
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
}
.zeitleiste i {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0.5rem auto 0;
  border-radius: 50%;
  background: var(--weiss);
  border: 3px solid var(--blau);
  box-shadow: 0 0 0 2px var(--weiss);
  position: relative;
}
@media (min-width: 700px) {
  .zeitleiste { display: grid; grid-template-columns: repeat(var(--anzahl, 5), 1fr); }
}
.zeitkarten { list-style: none; padding: 0; margin: 0; gap: 1.5rem; }
.zeitkarte {
  width: min(100%, 22rem);
  height: auto;
  position: relative;
  padding-top: 1.75rem;
}
.zeitkarte-bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.zeitkarte-jahr {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--blau);
  color: var(--weiss);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  box-shadow: 0 0 0 3px var(--weiss);
}
.zeitkarte h3 { color: var(--weiss); margin-top: 1rem; font-weight: 400; }
.zeitkarte .text { font-size: 0.95em; }
.zeitkarte .text a { color: var(--weiss); text-decoration: underline; }
.karussell--zeit .karussell-pfeil { background: var(--weiss); color: var(--blau); }
@media (min-width: 1000px) {
  .zeitkarte { width: calc((100% - 3rem) / 3); }
}

/* Video nur nach Klick (YouTube) */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--blau);
  overflow: hidden;
}
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--weiss);
  background: rgba(5, 55, 116, 0.45);
  text-align: center;
  padding: 1rem;
  transition: background var(--ablauf);
}
.video-start:hover,
.video-start:focus-visible { background: rgba(5, 55, 116, 0.7); }
.video-knopf {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--blau);
  display: grid;
  place-items: center;
  box-shadow: var(--schatten);
}
.video-knopf svg { margin-left: 4px; }
.video-hinweis { font-size: 0.85em; max-width: 24rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Lesespalte (Datenschutz) */
.prosa-seite .prosa { max-width: 52rem; }
.prosa h2 { font-size: 1.6rem; margin-top: 2em; }
.prosa h3 { margin-top: 1.5em; }
.prosa table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.prosa td,
.prosa th { border: 1px solid var(--grau-linie); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
.unterseiten-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.unterseiten-liste a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--blau);
  color: var(--blau);
  font-family: var(--font-display);
}
.unterseiten-liste a:hover { background: var(--blau); color: var(--weiss); text-decoration: none; }
.suche-zeile { display: flex; gap: 0.5rem; max-width: 30rem; }
.fld {
  flex: 1;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--grau-linie);
}
.btn,
.suche .btn {
  font-family: var(--font-display);
  padding: 0.6rem 1.2rem;
  background: var(--blau);
  color: var(--weiss);
  border: 1px solid var(--blau);
}

/* --------------------------------------------------------------------------
   Fußzeile: dunkelblau, „Kontakt“ und „Quicklinks“ mit Linie, je zwei Spalten
   -------------------------------------------------------------------------- */
.fuss {
  background: var(--blau);
  color: var(--weiss);
  padding: 3rem 0 3.5rem;
  margin-top: 3rem;
  font-size: 0.9em;
}
.fuss-innen {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .fuss-innen { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.fuss h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.fuss-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.fuss a { color: var(--weiss); }
.fuss a:hover,
.fuss a:focus-visible { color: var(--weiss); text-decoration: underline; }
.fuss-liste,
.fuss-recht ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss-liste li,
.fuss-recht li { margin: 0 0 0.35em; }
.fuss-adresse,
.fuss-kontaktwege { margin: 0; line-height: 1.6; }

/* Nach-oben-Knopf: dunkelblaues Quadrat unten rechts */
.nach-oben {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--blau);
  color: var(--weiss);
  z-index: 40;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--ablauf), transform var(--ablauf), background var(--ablauf);
}
.nach-oben.sichtbar { opacity: 1; transform: none; }
.nach-oben[hidden] { display: grid; visibility: hidden; }
.nach-oben.sichtbar[hidden] { visibility: visible; }
.nach-oben:hover,
.nach-oben:focus-visible { background: var(--hellblau); }

/* Lightbox (Großansicht) */
.grossansicht {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 55, 116, 0.92);
  display: grid;
  place-items: center;
  padding: 3rem 1rem 1rem;
}
.grossansicht img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  box-shadow: var(--schatten);
}
.grossansicht-zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  color: var(--weiss);
  font-size: 2rem;
  line-height: 1;
}
.grossansicht-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  color: var(--weiss);
  display: grid;
  place-items: center;
}
.grossansicht-pfeil svg { fill: currentColor; }
.grossansicht-pfeil--zurueck { left: 0.5rem; }
.grossansicht-pfeil--weiter { right: 0.5rem; }
.grossansicht-pfeil--weiter svg { transform: rotate(180deg); }

/* Platzhalter-Hinweis für fehlende Bilder (nur Entwurfsphase) */
.bildplatz {
  background: var(--grau);
  color: var(--muted);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  font-size: 0.9em;
}

@media print {
  .kopf,
  .menue,
  .verdunkelung,
  .nach-oben,
  .karussell-pfeil { display: none !important; }
  .kopfbild { height: auto; }
  .hochziehen { margin-top: 0; }
}