/* ============================================================
   ONEO Plaza Apartments
   Gestaltung: dunkler, warmer Auftritt mit Messingakzent.
   Bewusst mit klassischen Abschnitten gebaut, damit sich das
   Layout eins zu eins in Blocksy nachbauen laesst.
   ============================================================ */

/* --- 1. Farben, Schriften, Masse ------------------------- */
:root {
  --onyx:        #0d0c0b;
  --onyx-hoch:   #15130f;
  --stein:       #1e1a16;
  --stein-hell:  #2a251f;
  --linie:       rgba(232, 220, 200, 0.14);
  --sand:        #f7f3ec;
  --sand-matt:   #ded4c4;
  --leise:       #a99e8e;
  --messing:     #c9a15c;
  --messing-hell:#e6c894;

  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display-gewicht: 500;
  --display-laufweite: -0.018em;

  --breite: 1240px;
  --rand: clamp(1.15rem, 4vw, 3.5rem);
  --luft-block: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 3px;
  --tempo: 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--onyx);
  color: var(--sand);
  font-family: var(--schrift-text);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.7;
  font-weight: 350;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; }
/* Der Browser gibt figure von Haus aus 1em oben und 40px seitlich mit.
   In einem Raster frisst das die Spaltenbreite auf. */
figure { margin: 0; }
img { height: auto; display: block; }

/* --- 2. Typografie --------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: var(--display-gewicht);
  line-height: 1.08;
  letter-spacing: var(--display-laufweite);
  margin: 0 0 0.55em;
  text-wrap: pretty;
  hyphens: auto;
}
h1 { font-size: clamp(2.35rem, 1.4rem + 4vw, 4.7rem); }
h2 { font-size: clamp(1.75rem, 1.1rem + 3.1vw, 3.7rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h4 { font-size: clamp(1.22rem, 1.1rem + 0.6vw, 1.42rem); }

.kursiv { font-style: italic; color: var(--messing-hell); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 1.35rem;
}
.marke::before {
  content: "";
  width: 2.1rem;
  height: 1px;
  background: var(--messing);
  flex: none;
}
.marke.mittig { justify-content: center; }

.vorspann {
  font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.32rem);
  line-height: 1.65;
  color: var(--sand-matt);
  font-weight: 350;
  max-width: 62ch;
}

.leise { color: var(--leise); }

/* --- 3. Grundraster -------------------------------------- */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.band { padding-block: var(--luft-block); position: relative; }
.band--hoch { background: var(--onyx-hoch); }
.band--stein { background: var(--stein); }

.raster { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
/* minmax(0, 1fr) statt 1fr: sonst waechst die Spalte mit ihrem breitesten
   Inhalt und schiebt bei 320 px Text ueber den Rand. */
.raster--2 { grid-template-columns: minmax(0, 1fr); }
.raster--3 { grid-template-columns: minmax(0, 1fr); }
.raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Auf schmalen Schirmen sind zwei Spalten zu eng: die Ueberschriften
   brechen dann Wort fuer Wort um. Deshalb unter 560 px eine Spalte. */
@media (max-width: 560px) { .raster--4 { grid-template-columns: minmax(0, 1fr); } }
/* Kacheln, die nur auf eine andere Seite verweisen. Kleinere Ueberschrift,
   damit sie auch in einer schmalen Spalte in einer Zeile bleibt. */
.karte.themenkarte h3 { font-size: 1.12rem; }

@media (min-width: 720px) {
  .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .raster--4 { grid-template-columns: repeat(4, 1fr); }
}

.kopfzeile-block { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.kopfzeile-block.mittig { margin-inline: auto; text-align: center; }

/* --- 4. Schaltflaechen ----------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--messing);
  border-radius: 999px;
  background: var(--messing);
  color: #14100a;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.knopf:hover, .knopf:focus-visible {
  background: var(--messing-hell);
  border-color: var(--messing-hell);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201, 161, 92, 0.22);
}
.knopf--leer {
  background: transparent;
  color: var(--sand);
  border-color: var(--linie);
}
.knopf--leer:hover, .knopf--leer:focus-visible {
  background: rgba(247, 243, 236, 0.07);
  border-color: var(--sand-matt);
  color: var(--sand);
  box-shadow: none;
}
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--messing-hell);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  padding-block: 0.3rem;
  border-bottom: 1px solid rgba(201, 161, 92, 0.35);
  transition: gap var(--tempo), border-color var(--tempo);
}
.textlink:hover, .textlink:focus-visible { gap: 0.9rem; border-color: var(--messing-hell); }

:focus-visible { outline: 2px solid var(--messing-hell); outline-offset: 3px; }

/* --- 5. Kopfleiste --------------------------------------- */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-block: 1.15rem;
  transition: background var(--tempo), padding var(--tempo), border-color var(--tempo);
  border-bottom: 1px solid transparent;
}
.kopfleiste.geblaettert {
  background: rgba(13, 12, 11, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linie);
  padding-block: 0.75rem;
}
.kopfleiste__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--sand);
  flex: none;
}
.logo__wort {
  font-family: var(--schrift-display);
  font-size: 1.62rem;
  letter-spacing: 0.03em;
  line-height: 1;
}
.logo__zusatz {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--leise);
}
@media (max-width: 400px) { .logo__zusatz { display: none; } }

.navi { display: none; }
@media (min-width: 1000px) {
  .navi {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 2vw, 2.1rem);
  }
  .navi a {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--sand-matt);
    position: relative;
    padding-block: 0.4rem;
    transition: color var(--tempo);
  }
  .navi a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--messing);
    transition: width var(--tempo);
  }
  /* :not(.knopf) ist Pflicht: sonst faerbt diese Regel auch den
     gefuellten Knopf hell ein und seine Schrift verschwindet auf dem
     hellen Grund. Gemessen 09.09.2026: Kontrast 1,0 bis 1,45. */
  .navi a:not(.knopf):hover, .navi a:not(.knopf):focus-visible, .navi a:not(.knopf)[aria-current="page"] { color: var(--sand); }
  .navi a:not(.knopf):hover::after, .navi a:not(.knopf):focus-visible::after, .navi a:not(.knopf)[aria-current="page"]::after { width: 100%; }
  .navi .knopf { color: #14100a; }
  .navi .knopf::after { display: none; }
}

/* --- 5b. Menueknopf, Mobilmenue, Handleiste --------------
   Die mobile Navigation ist bewusst mehr als eine Liste:
   die beiden Wohnungen stehen als Kacheln oben, darunter
   die uebrigen Seiten, unten der direkte Draht. Dazu eine
   feste Leiste am unteren Rand mit Anfrage und Anruf. */

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: rgba(247, 243, 236, 0.06);
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--sand);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo);
}
.menue-knopf:hover { background: rgba(247, 243, 236, 0.12); }
.menue-knopf__striche { display: grid; gap: 4px; width: 17px; }
.menue-knopf__striche span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tempo), width var(--tempo);
}
.menue-knopf__striche span:last-child { width: 68%; margin-left: auto; }
.menue-knopf:hover .menue-knopf__striche span:last-child { width: 100%; }
.menue-knopf__wort { text-transform: uppercase; }
@media (min-width: 1000px) { .menue-knopf { display: none; } }

/* Eigener Stapelraum, dvh gegen die Browserleiste auf dem Handy */
.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 70;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--onyx);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobilmenue.offen { opacity: 1; visibility: visible; }

.mobilmenue__kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--rand);
  border-bottom: 1px solid var(--linie);
}
.mobilmenue__zu {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--sand);
  cursor: pointer;
}
.mobilmenue__inhalt {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.6rem var(--rand) calc(2rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* Die Bestandteile laufen gestaffelt ein */
.mobilmenue__wohnungen,
.mobilmenue__liste li,
.mobilmenue__fuss {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mobilmenue.offen .mobilmenue__wohnungen { opacity: 1; transform: none; transition-delay: 0.06s; }
.mobilmenue.offen .mobilmenue__liste li { opacity: 1; transform: none; }
.mobilmenue.offen .mobilmenue__liste li:nth-child(1) { transition-delay: 0.12s; }
.mobilmenue.offen .mobilmenue__liste li:nth-child(2) { transition-delay: 0.17s; }
.mobilmenue.offen .mobilmenue__liste li:nth-child(3) { transition-delay: 0.22s; }
.mobilmenue.offen .mobilmenue__liste li:nth-child(4) { transition-delay: 0.27s; }
.mobilmenue.offen .mobilmenue__fuss { opacity: 1; transform: none; transition-delay: 0.32s; }

.mobilmenue__wohnungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.9rem;
}
.mobilkachel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: #f7f3ec;
  background: var(--stein);
}
.mobilkachel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.mobilkachel:active img { transform: scale(1.04); }
.mobilkachel__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 0.85rem 0.85rem;
  background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.88) 100%);
  display: grid;
  gap: 0.15rem;
}
.mobilkachel__name {
  font-family: var(--schrift-display);
  font-size: 1.28rem;
  line-height: 1.1;
}
.mobilkachel__zusatz { font-size: 0.78rem; color: rgba(247, 243, 236, 0.76); }

.mobilmenue__liste { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobilmenue__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-display);
  font-size: clamp(1.45rem, 6.5vw, 1.95rem);
  line-height: 1.2;
  text-decoration: none;
  color: var(--sand);
}
.mobilmenue__liste a::after {
  content: "";
  flex: none;
  width: 20px; height: 8px;
  border-right: 1px solid var(--messing);
  border-top: 1px solid var(--messing);
  transform: skewX(45deg) scaleY(0.9);
  opacity: 0.75;
}

.mobilmenue__fuss { display: grid; gap: 0.9rem; justify-items: start; }
.mobilmenue__fuss .knopf { width: 100%; }
.mobilmenue__draht {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sand);
  text-decoration: none;
  font-size: 1.02rem;
}
.mobilmenue__draht svg { color: var(--messing); }
.mobilmenue__adresse { margin: 0; font-size: 0.9rem; color: var(--leise); }

/* --- Feste Leiste am unteren Rand, nur auf dem Handy ----- */
.handleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem var(--rand) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(13, 12, 11, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.handleiste.sichtbar { transform: none; }
.handleiste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
}
.handleiste__erst { flex: 1 1 auto; background: var(--messing); color: var(--akzent-text); }
.handleiste__zweit {
  flex: 0 0 auto;
  border: 1px solid var(--linie);
  color: var(--sand);
}
html[data-farbe="sw-hell"] .handleiste { background: rgba(255, 255, 255, 0.94); }
@media (min-width: 1000px) { .handleiste { display: none; } }

/* Platz schaffen, damit die Leiste die Fusszeile nicht verdeckt */
@media (max-width: 999px) {
  body { padding-bottom: 4.6rem; }
}

/* --- 6. Buehne ------------------------------------------- */
.buehne {
  position: relative;
  min-height: min(100dvh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.buehne--klein { min-height: min(76dvh, 680px); }

.buehne__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.buehne__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: ruhiger-zoom 26s ease-out both;
}
@keyframes ruhiger-zoom {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}
.buehne__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,12,11,0.78) 0%, rgba(13,12,11,0.25) 34%, rgba(13,12,11,0.88) 100%),
    linear-gradient(90deg, rgba(13,12,11,0.6) 0%, rgba(13,12,11,0) 68%);
}
.buehne__text { max-width: min(46rem, 100%); }
.buehne h1 .zeile { display: block; }
.buehne .vorspann { margin-top: 1.5rem; max-width: 44ch; }
.buehne .knopf-reihe { margin-top: 2.3rem; }

.eckdaten {
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie);
  padding-top: 1.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.2rem;
}
@media (min-width: 860px) { .eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eckdaten dt {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 0.35rem;
}
.eckdaten dd {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.72rem);
  line-height: 1.2;
}

/* --- 7. Apartment-Bloecke -------------------------------- */
.objekt {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: center;
}
@media (min-width: 940px) {
  .objekt { grid-template-columns: 1.05fr 0.95fr; }
  .objekt--gedreht .objekt__bilder { order: 2; }
}
.objekt + .objekt { margin-top: clamp(4rem, 8vw, 7rem); }

.objekt__bilder {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stein);
}
.objekt__bilder img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.objekt__bilder img.aktiv { opacity: 1; }
.objekt__punkte {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: flex;
  gap: 0.45rem;
  z-index: 2;
}
.objekt__punkte button {
  width: 26px; height: 3px;
  border: 0; padding: 0;
  border-radius: 2px;
  background: rgba(247, 243, 236, 0.35);
  cursor: pointer;
  transition: background var(--tempo);
}
.objekt__punkte button[aria-current="true"] { background: var(--messing); }

.objekt__zahl {
  font-family: var(--schrift-display);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--messing);
  display: block;
  margin-bottom: 0.9rem;
}
.merkmale {
  list-style: none;
  margin: 1.8rem 0 2.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.2rem;
  border-top: 1px solid var(--linie);
  padding-top: 1.5rem;
}
.merkmale li {
  font-size: 1rem;
  color: var(--sand-matt);
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  min-width: 0;
}
/* Zwei Spalten sind auf schmalen Geraeten zu eng: lange Woerter wie
   "Fuerst-Pueckler-Park" passen dann in keine Spalte mehr und schieben
   die Seite seitlich auf. Unter 480 px deshalb eine Spalte. */
@media (max-width: 479px) { .merkmale { grid-template-columns: 1fr; } }

.merkmale li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--messing);
}

/* --- 8. Karten ------------------------------------------- */
.karte {
  background: var(--stein);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  min-width: 0;
  transition: transform var(--tempo), border-color var(--tempo), background var(--tempo);
}
.karte:hover { transform: translateY(-4px); border-color: rgba(201, 161, 92, 0.4); }
.karte h3 { margin-bottom: 0.5rem; }
.karte p { font-size: 1rem; color: var(--sand-matt); }
.karte__symbol {
  width: 2.6rem; height: 2.6rem;
  margin-bottom: 1.15rem;
  color: var(--messing);
}
.karte__symbol svg { width: 100%; height: 100%; }

.ausstattung {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 700px) { .ausstattung { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ausstattung { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ausstattung li {
  background: var(--onyx-hoch);
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--sand-matt);
  min-width: 0;
  transition: background var(--tempo), color var(--tempo);
}
.ausstattung li:hover { background: var(--stein-hell); color: var(--sand); }
.ausstattung svg { width: 1.55rem; height: 1.55rem; color: var(--messing); flex: none; }

/* Ueberschriften in Karten sind Zwischentitel, keine Plakate.
   Auf h3-Plakatgroesse (bis 2,05 rem) brechen sie in engen Spalten
   Wort fuer Wort um: "Besuch von Familie und / Freunden". Eine
   Stufe kleiner loest das, ohne die Hierarchie zu verlieren. */
.karte h3 {
  font-size: clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem);
  line-height: 1.25;
  margin-bottom: 0.7em;
}

/* --- 9. Galerie ------------------------------------------ */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1rem);
}
@media (min-width: 780px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie__feld {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--stein);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}
.galerie__feld img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--tempo);
  filter: saturate(0.92);
}
.galerie__feld:hover img, .galerie__feld:focus-visible img { transform: scale(1.06); filter: saturate(1.05); }
.galerie__feld figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--sand);
  background: linear-gradient(180deg, rgba(13,12,11,0) 0%, rgba(13,12,11,0.8) 100%);
  opacity: 0;
  transition: opacity var(--tempo);
}
.galerie__feld:hover figcaption, .galerie__feld:focus-visible figcaption { opacity: 1; }

/* Leuchtkasten */
.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 6, 0.96);
  padding: clamp(1rem, 4vw, 3rem);
}
.leuchtkasten.offen { display: flex; }
.leuchtkasten img {
  max-width: 100%;
  max-height: 82dvh;
  object-fit: contain;
  border-radius: var(--radius);
}
.leuchtkasten__text {
  position: absolute;
  bottom: clamp(0.9rem, 3vw, 2rem);
  left: 0; right: 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--leise);
  padding-inline: 1rem;
}
.leuchtkasten__knopf {
  position: absolute;
  background: rgba(247, 243, 236, 0.08);
  border: 1px solid var(--linie);
  color: var(--sand);
  width: 46px; height: 46px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--tempo);
}
.leuchtkasten__knopf:hover { background: rgba(247, 243, 236, 0.18); }
.leuchtkasten__zu { top: clamp(0.8rem, 3vw, 1.8rem); right: clamp(0.8rem, 3vw, 1.8rem); }
.leuchtkasten__vor { right: clamp(0.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.leuchtkasten__zurueck { left: clamp(0.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }

/* --- 10. Zweispaltiger Anfrageblock ---------------------- */
.buchung {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
}
@media (min-width: 940px) { .buchung { grid-template-columns: 1fr 1fr; } }

/* --- 10b. Karte fuer das eingebettete Formular -----------
   Das Deftform-Formular ist an JEDER Breite vollstaendig
   transparent: im ausgelieferten HTML steht sowohl in
   body.cs_body als auch in der Regel fuer max-width 768px
   background-color #FFFFFF00. Die Textfarbe ist dagegen
   #202020, die Schaltflaeche #0B0A0A. Auf dem dunklen Grund
   dieser Seite waeren alle Feldbeschriftungen und der Knopf
   unsichtbar. Diese Karte traegt deshalb den hellen Grund,
   fuer den das Formular gebaut ist.
   Alle Farben sind am ausgelieferten Formular gemessen, nicht
   geraten (Felder #ffffff, Feldrand #D1D5DB, Text #202020).
   Aendert jemand das Aussehen im Deftform-Konto, hier
   nachziehen. Siehe LIESMICH, Abschnitt Anfrageformular. */
.formularkarte {
  position: relative;
  background: #f5f5f4;
  color: #202020;
  border: 1px solid rgba(11, 10, 10, 0.16);
  /* Deutlich weicher als der Rest der Seite (3 px). Passt zu den
     6 px, die Deftform an seinen eigenen Feldern setzt, und macht
     aus der hellen Flaeche eine Karte statt eines Kastens. */
  border-radius: 18px;
  padding: clamp(1rem, 3.5vw, 2rem);
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
/* Messingkante oben: bindet die helle Flaeche an die Seite,
   sonst wirkt sie aufgeklebt. Der Radius muss der Karte folgen,
   sonst ragt die Kante an den Ecken heraus. */
.formularkarte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--messing), rgba(201, 161, 92, 0.12));
  border-radius: 18px 18px 0 0;
}
.formularkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(11, 10, 10, 0.12);
}
.formularkarte__marke {
  font-family: var(--schrift-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b6459;
  margin: 0;
}
.formularkarte__draht {
  font-size: 0.9rem;
  color: #202020;
  margin: 0;
}
.formularkarte__draht a { color: #0b0a0a; font-weight: 600; }
/* Solange kein Rahmen im Halter steht, haelt die Karte ihre
   Hoehe. Sonst springt das Layout, wenn das Formular nachlaedt. */
.formularkarte .deftform:empty { min-height: 24rem; }
.formularkarte__laedt,
.formularkarte__ausweg {
  font-size: 0.92rem;
  color: #4b4640;
  margin: 0;
}
.formularkarte__ausweg { padding-top: 0.6rem; }
.formularkarte__ausweg strong { color: #0b0a0a; }
/* Der Pflichthinweis steht ausserhalb der Karte, in der Sprache
   der Seite, damit er auch dann sichtbar ist, wenn das Formular
   selbst nicht laedt. */
.formular-hinweis {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--leise);
  margin-top: 1rem;
  max-width: 62ch;
}
.formular-hinweis a { color: var(--messing-hell); }

/* --- 11. Formular ---------------------------------------- */
.formular { display: grid; gap: 1.1rem; }
.feldpaar { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .feldpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.feld label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leise); }
.feld input, .feld textarea, .feld select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--sand);
  background: var(--onyx-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color var(--tempo), background var(--tempo);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--messing);
  background: var(--stein);
  outline: none;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.zustimmung {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--leise);
  line-height: 1.6;
}
.zustimmung input { width: 1.1rem; height: 1.1rem; margin-top: 0.28rem; flex: none; accent-color: var(--messing); }
.hinweiskasten {
  border: 1px dashed rgba(201, 161, 92, 0.5);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: 0.88rem;
  color: var(--sand-matt);
  background: rgba(201, 161, 92, 0.06);
}

/* --- 12. Fragen und Antworten ---------------------------- */
.frage {
  border-bottom: 1px solid var(--linie);
}
.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: var(--schrift-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem; top: 50%;
  transform: translateY(-50%);
  color: var(--messing);
  font-family: var(--schrift-text);
  font-size: 1.4rem;
  transition: transform var(--tempo);
}
.frage[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.frage__inhalt { padding: 0 0 1.4rem; color: var(--sand-matt); font-size: 0.98rem; max-width: 68ch; }

/* --- 13. Betreiber-Band ----------------------------------
   Bewusst in einer voellig anderen Farbwelt als die Seite:
   Petrol mit Mint. So sieht Matthias auf den ersten Blick,
   dass dieser Teil nicht zur oeffentlichen Seite gehoert.
   Die Farben stehen fest und folgen keiner Entwurfsvariante. */
.betreiber {
  --b-grund:  #062b31;
  --b-tief:   #04211f;
  --b-mint:   #56dcc0;
  --b-mint-2: #a9f0e0;
  --b-text:   #eaf7f4;
  --b-leise:  #9dc3bd;
  --b-linie:  rgba(86, 220, 192, 0.28);

  background:
    radial-gradient(90% 70% at 12% 0%, rgba(86, 220, 192, 0.2) 0%, rgba(86, 220, 192, 0) 62%),
    linear-gradient(168deg, var(--b-grund) 0%, var(--b-tief) 100%);
  border-top: 4px solid var(--b-mint);
  color: var(--b-text);
}
.betreiber h2, .betreiber h3 { color: #ffffff; }
.betreiber .vorspann, .betreiber p { color: var(--b-text); }
.betreiber .leise, .betreiber .kosten__notiz { color: var(--b-leise); }
.betreiber .marke { color: var(--b-mint); }
.betreiber .marke::before { background: var(--b-mint); }

.betreiber__fahne {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #04211f;
  background: var(--b-mint);
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}
.betreiber__fahne::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #04211f; }

.betreiber .karte {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--b-linie);
}
.betreiber .karte:hover { border-color: var(--b-mint); transform: translateY(-4px); }
.betreiber .karte p { color: var(--b-text); }
.betreiber .merkmale { border-top-color: var(--b-linie); }
.betreiber .merkmale li { color: var(--b-text); }
.betreiber .merkmale li::before { background: var(--b-mint); }
.betreiber .merkmale li strong { color: var(--b-mint-2); }

.betreiber .tabelle-huelle { border-color: var(--b-linie); }
.betreiber table.kosten thead th { background: rgba(4, 33, 31, 0.75); color: var(--b-mint); }
.betreiber table.kosten th, .betreiber table.kosten td { border-bottom-color: var(--b-linie); }
.betreiber table.kosten tfoot td { background: rgba(86, 220, 192, 0.14); color: #ffffff; }
.betreiber table.kosten td .leise { color: var(--b-leise); }

.betreiber .hinweiskasten {
  background: rgba(86, 220, 192, 0.1);
  border: 1px solid var(--b-mint);
  color: var(--b-text);
}
.betreiber .hinweiskasten strong { color: var(--b-mint-2); }

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
table.kosten {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.96rem;
}
table.kosten th, table.kosten td {
  text-align: left;
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
table.kosten thead th {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
table.kosten tbody tr:last-child td { border-bottom: 0; }
table.kosten td:last-child, table.kosten th:last-child { text-align: right; white-space: nowrap; }
table.kosten tfoot td {
  font-family: var(--schrift-display);
  font-size: 1.2rem;
  border-bottom: 0;
}
.kosten__notiz { font-size: 0.88rem; color: var(--leise); margin-top: 0.9rem; }

/* --- 14. Fusszeile --------------------------------------- */
.fuss {
  background: #080807;
  border-top: 1px solid var(--linie);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
/* Ruf zur Handlung ueber den Spalten: die Fusszeile ist die
   letzte Stelle, an der jemand noch anfragt, statt wegzuklicken. */
.fuss__ruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-bottom: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linie);
}
.fuss__ruf h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  max-width: 24ch;
}
/* Kein flex:none: das Knopfpaar muss auf schmalen Schirmen
   umbrechen duerfen, sonst sprengt es die Seite seitlich auf. */
.fuss__ruf .knopf-reihe { margin: 0; }

.fuss__raster {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Die Marke steht auf schmalen Schirmen ueber der ganzen Breite,
   sonst quetscht sich der Beschreibungstext in eine halbe Spalte. */
@media (min-width: 560px) and (max-width: 959px) {
  .fuss__marke { grid-column: 1 / -1; }
}
.fuss__adresse {
  font-style: normal;
  color: var(--leise);
  font-size: 0.94rem;
  line-height: 1.7;
  margin-top: 1.1rem;
}
.fuss ul.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss__recht a { font-size: 0.83rem; color: var(--leise); }
/* Copyright und Rechtstexte gehoeren zusammen und stehen links,
   der Erstellerhinweis rechts. Drei gleichberechtigte Gruppen
   quetschen die Mitte, deshalb zwei. */
.fuss__schluss-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
}

.fuss__recht a:hover, .fuss__recht a:focus-visible { color: var(--messing-hell); }
.fuss h4 {
  font-family: var(--schrift-text);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fuss a { color: var(--sand-matt); text-decoration: none; font-size: 1rem; transition: color var(--tempo); }
/* Auch hier den Knopf ausnehmen, gleiche Falle wie in der Kopfleiste. */
.fuss a:not(.knopf):hover, .fuss a:not(.knopf):focus-visible { color: var(--messing-hell); }
.fuss__schluss {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  font-size: 0.83rem;
  color: var(--leise);
}

/* Schlusszeile: breit nebeneinander, schmal untereinander mit Luft.
   Diese Media Query MUSS hinter .fuss__schluss und .fuss ul stehen,
   sonst gewinnt bei gleicher Spezifitaet die frühere Regel. */
@media (min-width: 600px) {
  .fuss__schluss { align-items: center; }
}
@media (max-width: 599px) {
  .fuss__schluss { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .fuss__schluss-links { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  /* Nebeneinander, aber umbrechen erlaubt: mit drei Eintraegen passen sie
     bei 320 px sonst nicht mehr in eine Zeile und schieben die Seite auf.
     Impressum und Datenschutz bleiben dabei zusammen in der ersten Zeile. */
  .fuss ul.fuss__recht { flex-direction: row; flex-wrap: wrap; gap: 0.7rem 1.2rem; }
  .fuss__recht a { font-size: 0.88rem; }
}

/* --- 15. Entwurfsfahne ----------------------------------- */
.entwurf {
  background: #3a2410;
  border: 1px solid #a4682a;
  color: #ffd8a8;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.entwurf strong { color: #ffe9cd; }

/* --- 16. Einblenden beim Scrollen ------------------------ */
/* Nur wenn JavaScript laeuft, sonst ist alles sofort sichtbar. */
html.js [data-zeigen] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--stufe, 0) * 90ms);
}
html.js [data-zeigen].sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js [data-zeigen] { opacity: 1; transform: none; }
  .buehne__bild img { animation: none; }
}

/* --- 17. Kleinkram --------------------------------------- */
.nur-fuer-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.springmarke {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--messing);
  color: #14100a;
  padding: 0.7rem 1.2rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.springmarke:focus { left: 0; }

/* Impressum und Datenschutz sind Lesetexte, keine Buehne.
   Deshalb eine breitere Spalte als bei den Werbeabschnitten und
   deutlich kleinere Ueberschriften: h1 und h2 stehen hier in der
   Groesse von Zwischentiteln, nicht in Plakatgroesse. */
.inhalt-schmal { max-width: 54rem; }
.inhalt-schmal h1 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.7rem);
  margin-bottom: 0.7em;
}
.inhalt-schmal h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  margin-top: 2.6rem;
  margin-bottom: 0.6em;
}
.inhalt-schmal h3 {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  margin-top: 1.8rem;
  margin-bottom: 0.5em;
}
.inhalt-schmal p, .inhalt-schmal li { line-height: 1.75; }
.inhalt-schmal ul { padding-left: 1.2rem; color: var(--sand-matt); }
.inhalt-schmal li { margin-bottom: 0.5rem; }
.inhalt-schmal a { color: var(--messing-hell); }
.inhalt-schmal dl.eckdaten { margin-top: 1.4rem; }

.seitentitel { font-size: clamp(2rem, 1.3rem + 3.4vw, 4.2rem); }
.zwischentitel { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.galerietitel { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 1.2rem; }
.band--kopf { padding-top: clamp(8rem, 14vw, 11rem); }

/* --- 17b. Kennzeichnung generierter Bilder ---------------
   Art. 50 KI-VO knuepft an die Wahrnehmung des BILDES an, nicht
   an die Seite. Eine Zeile unter dem Bild bleibt zurueck, sobald
   das Motiv die Seite verlaesst (Bildersuche, geteilte Vorschau).
   Deshalb sitzt die Plakette im Bild, unten rechts.
   Wortlaut "KI-Symbolbild": der Bestandteil "Symbolbild" deckt
   § 5 UWG ab und darf nie wegfallen.
   Deckung 0,68 Schwarz, nicht weniger: bei 0,5 verfehlt weisser
   Text gegen eine helle Bildecke die WCAG-AA-Schwelle. Die
   Schriftgroesse waechst absichtlich nicht mit der Bildgroesse. */
.ki-bild { position: relative; display: block; margin: 0; }
.ki-bild img { display: block; width: 100%; height: auto; border-radius: 3px; }
.ki-plakette {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.26rem 0.5rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.68);
  color: #ffffff;
  font-family: var(--schrift-text);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

/* --- 17c. Anfahrt ---------------------------------------- */
.anfahrt {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 880px) { .anfahrt { grid-template-columns: 1.15fr 1fr; } }
.adresskarte {
  background: var(--stein);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.8rem);
}
.adresskarte__adresse {
  font-family: var(--schrift-display);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 1.2rem;
}
.adresskarte .knopf-reihe { margin-top: 1.4rem; }

/* --- 18. Zeilenumbruch nur auf breiten Schirmen ---------- */
.nur-breit { display: none; }
@media (min-width: 900px) { .nur-breit { display: inline; } }

/* --- 19. Hochgestellte Zahlen eng am Buchstaben ---------- */
sup { font-size: 0.58em; line-height: 0; vertical-align: super; margin-left: 0.02em; }

/* ============================================================
   20. Entwurfsvarianten
   Umgeschaltet ueber data-Attribute am <html>-Element.
   data-schrift: fraunces (Vorgabe) | bodoni
   data-farbe:   warm (Vorgabe) | sw-dunkel | sw-hell
   Vor dem Go-Live faellt die Umschaltung weg, dann bleibt
   genau eine Variante als Vorgabe im :root stehen.
   ============================================================ */

html[data-schrift="bodoni"] {
  --schrift-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --display-gewicht: 500;
  --display-laufweite: -0.005em;
}

/* --- Schwarzweiss, dunkel -------------------------------- */
html[data-farbe="sw-dunkel"] {
  --onyx:        #0a0a0a;
  --onyx-hoch:   #121212;
  --stein:       #191919;
  --stein-hell:  #242424;
  --linie:       rgba(255, 255, 255, 0.16);
  --sand:        #ffffff;
  --sand-matt:   #d2d2d2;
  --leise:       #9a9a9a;
  --messing:     #ffffff;
  --messing-hell:#ffffff;
  --akzent-text: #0a0a0a;
}

/* --- Schwarzweiss, hell ---------------------------------- */
html[data-farbe="sw-hell"] {
  --onyx:        #ffffff;
  --onyx-hoch:   #f4f4f2;
  --stein:       #ededea;
  --stein-hell:  #e2e2de;
  --linie:       rgba(20, 20, 20, 0.16);
  --sand:        #131313;
  --sand-matt:   #3a3a3a;
  --leise:       #6a6a6a;
  --messing:     #131313;
  --messing-hell:#131313;
  --akzent-text: #ffffff;
  --fuss-grund:  #f4f4f2;
  --kopf-grund:  rgba(255, 255, 255, 0.92);
}

/* Grundwerte, damit die Vorgabe ohne Attribut vollstaendig ist */
:root {
  --akzent-text: #14100a;
  --fuss-grund:  #080807;
  --kopf-grund:  rgba(13, 12, 11, 0.9);
}

/* Stellen, die vorher feste Farben hatten, folgen jetzt den Marken.
   Wichtig: der Umrissknopf ist ausgenommen, sonst gewinnt diese
   spaetere Regel gegen .knopf--leer und der Text wird unsichtbar. */
.knopf:not(.knopf--leer) { color: var(--akzent-text); }
.navi .knopf { color: var(--akzent-text); }
.kopfleiste.geblaettert { background: var(--kopf-grund); }
.fuss { background: var(--fuss-grund); }
.springmarke { color: var(--akzent-text); }

/* Im hellen Entwurf braucht der Knopf ohne Fuellung mehr Kontrast */
html[data-farbe="sw-hell"] .knopf--leer { border-color: rgba(20, 20, 20, 0.3); }
html[data-farbe="sw-hell"] .knopf--leer:hover,
html[data-farbe="sw-hell"] .knopf--leer:focus-visible { background: rgba(20, 20, 20, 0.06); }
html[data-farbe="sw-hell"] .galerie__feld img { filter: none; }
html[data-farbe="sw-hell"] .hinweiskasten { background: rgba(20, 20, 20, 0.05); border-color: rgba(20, 20, 20, 0.35); }
html[data-farbe="sw-hell"] .knopf:hover,
html[data-farbe="sw-hell"] .knopf:focus-visible { box-shadow: 0 12px 30px rgba(20, 20, 20, 0.18); }

/* Die Buehne bleibt in jeder Variante dunkel: das Bild traegt den Text. */
.buehne, .buehne .vorspann, .buehne .eckdaten dd { color: #f7f3ec; }
.buehne .eckdaten dt { color: rgba(247, 243, 236, 0.72); }
.buehne .eckdaten { border-top-color: rgba(247, 243, 236, 0.24); }
html[data-farbe="sw-hell"] .buehne .marke { color: #ffffff; }
html[data-farbe="sw-hell"] .buehne .marke::before { background: #ffffff; }
html[data-farbe="sw-hell"] .buehne .knopf--leer { color: #f7f3ec; border-color: rgba(247, 243, 236, 0.4); }
html[data-farbe="sw-hell"] .buehne .kursiv { color: #ffffff; }

/* ============================================================
   21. Entwurfsumschalter
   Nur in der Vorschau vorhanden, kommt vor dem Go-Live raus.
   ============================================================ */
.umschalter {
  position: fixed;
  right: clamp(0.7rem, 2vw, 1.5rem);
  bottom: clamp(0.7rem, 2vw, 1.5rem);
  z-index: 80;
  font-family: var(--schrift-text);
  color: #f2f2f2;
}
.umschalter__knopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: #1c1c1c;
  color: #f2f2f2;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.umschalter__feld {
  display: none;
  width: min(19rem, calc(100vw - 2rem));
  margin-bottom: 0.6rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #1c1c1c;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.umschalter.offen .umschalter__feld { display: block; }
.umschalter h5 {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9d9d9d;
  font-weight: 500;
}
.umschalter h5 + div { margin-bottom: 1rem; }
.umschalter__reihe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.umschalter__reihe button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #2a2a2a;
  color: #e8e8e8;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.umschalter__reihe button[aria-pressed="true"] { background: #f2f2f2; color: #141414; border-color: #f2f2f2; }
.umschalter__hinweis { margin: 0.9rem 0 0; font-size: 0.76rem; line-height: 1.5; color: #9d9d9d; }
@media print { .umschalter { display: none; } }

/* --- 22. Wohnungswahl in der Buehne ----------------------
   Zwei kleine Karten direkt unter der Ueberschrift, damit
   ohne Scrollen klar ist: es gibt genau zwei Wohnungen. */
.buehne__wahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 46rem;
}
.wahlkarte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(247, 243, 236, 0.22);
  background: rgba(12, 11, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f7f3ec;
  text-decoration: none;
  transition: background var(--tempo), border-color var(--tempo), transform var(--tempo);
}
.wahlkarte:hover, .wahlkarte:focus-visible {
  background: rgba(12, 11, 10, 0.78);
  border-color: var(--messing);
  transform: translateY(-2px);
}
.wahlkarte img {
  flex: none;
  width: clamp(46px, 12vw, 62px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
}
.wahlkarte__text { display: grid; gap: 0.1rem; min-width: 0; }
.wahlkarte__name {
  font-family: var(--schrift-display);
  font-size: clamp(0.98rem, 3vw, 1.18rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.wahlkarte__zahlen {
  font-size: clamp(0.72rem, 2.3vw, 0.82rem);
  color: rgba(247, 243, 236, 0.74);
  white-space: nowrap;
}
.wahlkarte__pfeil {
  flex: none;
  width: 14px; height: 7px;
  margin-left: auto;
  border-right: 1px solid var(--messing);
  border-top: 1px solid var(--messing);
  transform: skewX(45deg) scaleY(0.9);
  transition: margin var(--tempo);
}
.wahlkarte:hover .wahlkarte__pfeil { margin-left: calc(auto + 4px); }
@media (max-width: 480px) {
  .buehne__wahl { grid-template-columns: 1fr; gap: 0.5rem; }
  .wahlkarte__zahlen { white-space: normal; }
}
.buehne__knoepfe { margin-top: clamp(1.2rem, 3vw, 1.8rem); }

/* Auf sehr schmalen Geraeten passt die laengste Zeile der Buehnen-
   ueberschrift bei 2,35 rem nicht mehr in eine Zeile: es bleibt ein
   Wort allein stehen. Unter 360 px deshalb eine Stufe kleiner.
   Gemessen bei 320 px: 314 px Text gegen 283 px Platz. */
@media (max-width: 359px) { .buehne h1 { font-size: 2.05rem; } }

/* ============================================================
   23. Blog: Kacheln und Beitragsseiten
   Der Blog hat bewusst keine Fotos. Statt Symbolbildern aus
   dem Netz traegt die Typografie, dazu je Beitrag ein eigener
   Farbton. Das bleibt ehrlich und laedt schneller.
   ============================================================ */
.lesekarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
}
@media (min-width: 640px) { .lesekarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .lesekarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lesekarte {
  --flaeche: hsl(var(--ton, 30) 34% 12%);
  --kante:   hsl(var(--ton, 30) 40% 30%);
  --leucht:  hsl(var(--ton, 30) 62% 66%);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: var(--polster);
  border-radius: 8px;
  border: 1px solid var(--kante);
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(var(--ton, 30) 55% 24% / 0.55) 0%, transparent 62%),
    var(--flaeche);
  color: var(--sand);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--tempo), border-color var(--tempo), box-shadow var(--tempo);
}
.lesekarte:hover, .lesekarte:focus-visible {
  transform: translateY(-4px);
  border-color: var(--leucht);
  box-shadow: 0 18px 44px hsl(var(--ton, 30) 50% 6% / 0.55);
}
@media (min-width: 1020px) {
  .lesekarte--gross { grid-column: span 2; }
  .lesekarte--gross .lesekarte__titel { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
}
/* --- Ortsfotos in Kacheln und Beitraegen -----------------
   Der Blog hatte bewusst keine Fotos, die Nummer trug die Kachel
   stattdessen. Jetzt tragen Fotos, deshalb faellt die Nummer auf
   bebilderten Kacheln weg: bei 16 Prozent Deckung ueber einem Foto
   ist sie nur noch Schmutz. */
.lesekarte { --polster: clamp(1.3rem, 2.6vw, 1.9rem); }
.lesekarte--bild { overflow: hidden; }
.lesekarte--bild .lesekarte__nummer { display: none; }
.lesekarte__bild {
  display: block;
  margin: calc(-1 * var(--polster)) calc(-1 * var(--polster)) 0.85rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: hsl(var(--ton, 30) 34% 9%);
}
.lesekarte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lesekarte--bild:hover .lesekarte__bild img,
.lesekarte--bild:focus-visible .lesekarte__bild img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .lesekarte__bild img, .lesekarte--bild:hover .lesekarte__bild img { transition: none; transform: none; }
}

/* Das Bild im Beitrag: eine Spalte breit wie der Fliesstext darunter,
   damit die Seite nicht auseinanderfaellt. */
.band--eng { padding-block: 0; }
.beitrag__bild {
  margin: clamp(2rem, 5vw, 3.2rem) 0 0;
  max-width: 62rem;
}
.beitrag__bild img { width: 100%; height: auto; display: block; border-radius: 4px; }
.beitrag__bild figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--leise);
}
.ortsbild { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; max-width: 62rem; }
.ortsbild img { width: 100%; height: auto; display: block; border-radius: 4px; }
.ortsbild figcaption { margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.6; color: var(--leise); }
.nachweisliste { list-style: none; padding-left: 0; display: grid; gap: 1.1rem; }
.nachweisliste li { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0; }
.nachweisliste strong { color: var(--sand); font-weight: 500; }
.bildnachweis { display: block; font-size: 0.8rem; margin-top: 0.15rem; }
.bildnachweis a { color: var(--sand-matt); }
.bildnachweis a:hover, .bildnachweis a:focus-visible { color: var(--messing-hell); }

.lesekarte__nummer {
  position: absolute;
  right: 0.4rem; top: -0.9rem;
  font-family: var(--schrift-display);
  font-size: 5.4rem;
  line-height: 1;
  color: var(--leucht);
  opacity: 0.16;
  pointer-events: none;
}
.lesekarte__oben {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leucht);
}
.lesekarte__titel {
  font-family: var(--schrift-display);
  font-weight: var(--display-gewicht);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: var(--display-laufweite);
  text-wrap: pretty;
}
.lesekarte__kurz { font-size: 0.98rem; color: var(--sand-matt); line-height: 1.6; }
.lesekarte__mehr {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--leucht);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.lesekarte__mehr::after {
  content: "";
  width: 14px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: skewX(45deg) scaleY(0.9);
  transition: transform var(--tempo);
}
.lesekarte:hover .lesekarte__mehr::after { transform: skewX(45deg) scaleY(0.9) translateX(3px); }

html[data-farbe="sw-dunkel"] .lesekarte,
html[data-farbe="sw-hell"] .lesekarte {
  --flaeche: var(--onyx-hoch);
  --kante: var(--linie);
  --leucht: var(--sand-matt);
}
html[data-farbe="sw-hell"] .lesekarte { --flaeche: var(--stein); --leucht: var(--sand); }

/* --- Beitragsseite --------------------------------------- */
.beitrag__kopf {
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.6rem, 5vw, 4rem);
  background:
    radial-gradient(90% 100% at 8% 0%, hsl(var(--ton, 30) 55% 22% / 0.75) 0%, transparent 64%),
    var(--onyx-hoch);
  border-bottom: 1px solid var(--linie);
}
.beitrag__kopf h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.9rem);
  max-width: 24ch;
}
.beitrag__kopf .marke { color: hsl(var(--ton, 30) 62% 66%); }
.beitrag__kopf .marke::before { background: hsl(var(--ton, 30) 62% 66%); }
html[data-farbe="sw-dunkel"] .beitrag__kopf,
html[data-farbe="sw-hell"] .beitrag__kopf { background: var(--onyx-hoch); }
html[data-farbe="sw-dunkel"] .beitrag__kopf .marke,
html[data-farbe="sw-hell"] .beitrag__kopf .marke { color: var(--messing); }
html[data-farbe="sw-dunkel"] .beitrag__kopf .marke::before,
html[data-farbe="sw-hell"] .beitrag__kopf .marke::before { background: var(--messing); }

.beitrag__meta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--leise);
}
.beitrag__meta a { color: var(--messing-hell); text-decoration: none; }
.beitrag__meta a:hover { text-decoration: underline; }

.beitrag__text { max-width: 40rem; }
.beitrag__text h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  margin-top: 2.6rem;
}
.beitrag__text p { color: var(--sand-matt); }
.beitrag__text a { color: var(--messing-hell); }
.beitrag__text strong { color: var(--sand); font-weight: 600; }
.beitrag__stand {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.86rem;
  color: var(--leise);
}

.beitrag__einladung {
  max-width: 40rem;
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--messing);
  border-radius: var(--radius);
  background: var(--onyx-hoch);
}
.beitrag__einladung h2 { margin-top: 0; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); }
.beitrag__einladung p { color: var(--sand-matt); }
.beitrag__einladung .knopf-reihe { margin-top: 1.4rem; }

/* Im hellen Entwurf steht die Kopfleiste auf Seiten mit Bildbuehne
   ueber einem dunklen Foto. Solange sie durchsichtig ist, braucht
   sie dort helle Schrift, sonst liest man sie nicht. */
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .logo,
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .navi a,
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .menue-knopf { color: #f7f3ec; }
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .logo__zusatz { color: rgba(247, 243, 236, 0.72); }
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .menue-knopf { border-color: rgba(247, 243, 236, 0.35); }
html[data-farbe="sw-hell"] body.hat-buehne .kopfleiste:not(.geblaettert) .navi .knopf { color: var(--akzent-text); }

/* Bei sehr schmalen Geraeten passt die lange Beschriftung nicht
   neben den Anruf-Knopf. Dann bleibt nur das Verb stehen. */
.handleiste__erst { min-width: 0; }
@media (max-width: 379px) {
  .handleiste__lang { display: none; }
  .handleiste { gap: 0.45rem; padding-inline: 0.9rem; }
  .handleiste a { padding-inline: 0.85rem; }
}

/* --- Umbruch-Regel (Fall A: das Projekt trennt Silben) -----
   bau.mjs klammert Satzteile in .satzteil und bindet die letzten Woerter.
   hyphenate-limit-chars verhindert Reste mit ein, zwei Buchstaben; lange
   Einzelwoerter wie "Datenschutzerklaerung" duerfen so bei 320 px trennen,
   statt abgeschnitten zu werden. */
h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
}
/* text-wrap: pretty bleibt an: es verhindert das allein stehende Schlusswort
   auch innerhalb der Klammern. balance wuerde die Silbentrennung abschalten. */
.satzteil { display: inline-block; text-wrap: pretty; }
/* Ab 400 px gleicht balance die Zeilen aus und verhindert so das allein
   stehende erste oder letzte Wort. Darunter bleibt pretty, weil balance die
   Silbentrennung abschaltet und lange Woerter dort trennen muessen. */
@media (min-width: 400px) {
  h1, h2, h3, h4 { text-wrap: balance; }
}