/* Bausteine: die Inhaltsmodule aus dem Bestand.
   Ein Baustein je Divi-Modul – Reihenfolge wie in bausteine.php.

   Namen: Klassen deutsch und nach dem Muster block__element--art.
   Werte, die aus dem Bestand kommen, reisen als CSS-Eigenschaft am
   Element mit (--bereich-eigenschaft) – siehe includes/stil.php. */

/* ------------------------------------------------------- Bilder im Aufbau */

/* Bis ein Bild geladen ist, liegt an seiner Stelle eine ruhig wandernde
   Fläche. Der Platz steht schon (Breite und Seitenverhältnis kommen aus dem
   Markup), deshalb springt beim Erscheinen nichts. haupt.js setzt „ist-da“. */
picture img:not(.ist-da),
.fliesstext img:not(.ist-da) {
  background-color: #e6ecf0;
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.6) 42%,
    rgba(255, 255, 255, 0) 64%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  animation: schimmern 1.5s ease-in-out infinite;
}

@keyframes schimmern {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

@keyframes drehen {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  picture img:not(.ist-da),
  .fliesstext img:not(.ist-da) {
    animation: none;
    background-image: none;
  }
}

/* -------------------------------------------------------- Schaltflächen */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: var(--radius-feld);
  background: var(--aktion, var(--blau));
  color: var(--aktion-schrift, var(--weiss));
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  /* Bewusst ohne transform: Knöpfe wechseln nur die Farbe, sie hüpfen nicht.
     filter steht mit drin, weil .knopf--eigen seinen Hover darüber abdunkelt. */
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Zweitrangige Aktion neben einer Hauptaktion */
.knopf--leise {
  background: transparent;
  color: var(--blau);
  box-shadow: inset 0 0 0 1px var(--blau);
}

@media (hover: hover) {
  .knopf--leise:hover {
  background: var(--blau);
  color: var(--weiss);
  }
}

@media (hover: hover) {
  .knopf:hover {
  background: var(--aktion-betont, var(--blau-hell));
  color: var(--aktion-schrift, var(--weiss));
  }
}

.knopf svg {
  width: 0.66em;
  height: 0.66em;
  flex-shrink: 0;
}

.knopf--breit {
  width: 100%;
  justify-content: center;
}

/* Eigene Farben und Abstände aus dem Bestand – etwa der beige, breit
   gepolsterte Kontaktknopf auf /hochzeit/. */
.knopf--eigen {
  /* Erst der Modulwert aus dem Bestand, dann die Farbwelt der Seite,
     zuletzt das Blau der Marke – sonst fiele ein Knopf, der nur eigene
     Abstände mitbringt, mitten auf der warmen Seite auf Blau zurück. */
  background: var(--knopf-grund, var(--aktion, var(--blau)));
  color: var(--knopf-schrift, var(--aktion-schrift, var(--weiss)));
  padding: var(--knopf-oben, 0.7em) var(--knopf-rechts, 1.5em)
           var(--knopf-unten, 0.7em) var(--knopf-links, 1.5em);
}

@media (hover: hover) {
  .knopf--eigen:hover {
  background: var(--knopf-grund, var(--aktion, var(--blau)));
  color: var(--knopf-schrift, var(--aktion-schrift, var(--weiss)));
  filter: brightness(0.94);
  }
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}

.knopf-reihe > * {
  flex: 1 1 18rem;
}

/* --------------------------------------------------------- Bildercollage */

.collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--abstand-m);
  margin-top: var(--abstand-xl);
}

.collage__feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.collage__feld--tief {
  padding-top: var(--abstand-xl);
}

.collage__feld--hoch {
  padding-bottom: var(--abstand-xl);
}

.collage img {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--schatten-bild);
}

@media (max-width: 800px) {
  .collage {
    grid-template-columns: repeat(2, 1fr);
  }

  .collage__feld--tief,
  .collage__feld--hoch {
    padding: 0;
  }
}

/* -------------------------------------------------------------- Stimmen */

.stimmen {
  columns: 3;
  column-gap: var(--abstand-m);
  margin-top: var(--abstand-l);
}

@media (max-width: 900px) {
  .stimmen { columns: 2; }
}

@media (max-width: 620px) {
  .stimmen { columns: 1; }
}

.stimme {
  break-inside: avoid;
  margin-bottom: calc(var(--abstand-m) + 36px);
  padding: calc(36px + var(--abstand-s)) var(--abstand-m) var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--hell);
  color: var(--dunkel);
  box-shadow: var(--schatten-karte);
}

/* Das Bild sitzt wie im Bestand mittig über der Kartenkante. */
.stimme__bild {
  width: 72px;
  height: 72px;
  margin: -72px auto var(--abstand-s);
  border: 3px solid var(--hell);
  border-radius: 50%;
  object-fit: cover;
  background: var(--hell);
}

/* blockquote bringt 40px Einzug mit – der würde die Zeilen halbieren. */
.stimme__text {
  margin: 0 0 var(--abstand-s);
  font-size: 0.95rem;
  line-height: 1.7;
}

.stimme__name {
  margin: 0;
  font-weight: 700;
}

.stimme__rolle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

/* Im Bestand steht dieser Hinweis in Blau auf Blau und ist kaum zu lesen –
   hier heller gesetzt, damit der Kontrast ausreicht. */
.stimmen__hinweis {
  margin-top: var(--abstand-m);
  color: rgba(232, 238, 241, 0.78);
  font-size: 0.85rem;
  text-align: center;
}

/* -------------------------------------------------------- Fließtext */

.fliesstext > *:first-child {
  margin-top: 0;
}

.fliesstext > *:last-child {
  margin-bottom: 0;
}

.fliesstext h1,
.fliesstext h2,
.fliesstext h3,
.fliesstext h4 {
  margin-top: var(--abstand-m);
}

.fliesstext ul,
.fliesstext ol {
  margin: 0 0 var(--abstand-s);
  padding-left: 1.3em;
}

.fliesstext li + li {
  margin-top: 0.35em;
}

.fliesstext img {
  border-radius: 2px;
  margin-block: var(--abstand-s);
}

.fliesstext table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--abstand-s);
}

.fliesstext th,
.fliesstext td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}

/* Breite Inhalte scrollen in sich, statt die Seite zu verbreitern */
.fliesstext pre,
.fliesstext table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* Vorspann: die einleitenden Sätze unter einer Überschrift – mittig, schmal
   und leiser als der übrige Text. */
.fliesstext--vorspann {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  font-size: 1.05rem;
  color: var(--text-gedaempft);
}

.fliesstext--vorspann p {
  margin-bottom: 0.35rem;
}

.abschnitt--dunkel .fliesstext {
  color: var(--hell);
}

.abschnitt--dunkel .fliesstext a {
  color: var(--rein-weiss);
}

.knopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin: var(--abstand-m) 0 0;
}

.knopf-zeile--center { justify-content: center; }
.knopf-zeile--right  { justify-content: flex-end; }

.bildverweis {
  display: block;
}

/* Bildmodule mit eigener Breite stehen mittig, wie in Divi. */
.bildfeld {
  width: var(--bild-breite, auto);
  max-width: var(--bild-max, 100%);
  margin-inline: auto;
}

/* ------------------------------------------------------ Hinweiskachel */

.hinweis {
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
}

.abschnitt--dunkel .hinweis {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.hinweis__bild {
  width: 56px;
  height: 56px;
  margin-bottom: var(--abstand-s);
  object-fit: contain;
}

/* Kachel mit Symbol neben dem Text – so steht es im Bestand. Der Kasten
   tritt dabei zurück: Es geht um eine Aufzählung, nicht um Karten. */
.hinweis--seitlich {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
}

.hinweis--zeichen {
  padding: var(--abstand-s) var(--abstand-m);
  background: transparent;
  box-shadow: none;
}

.hinweis__koerper {
  min-width: 0;
}

.hinweis__zeichen {
  margin: 0 0 0.7rem;
  line-height: 0;
  color: var(--zeichen-farbe, var(--blau));
}

.hinweis--seitlich .hinweis__zeichen {
  margin: 0.1rem 0 0;
  flex-shrink: 0;
}

.hinweis__zeichen svg {
  width: 30px;
  height: 30px;
}

.abschnitt--dunkel .hinweis__zeichen {
  color: var(--rein-weiss);
}

/* Divis Kacheltitel sind 18 px – deshalb hier ein eigener Vorgabewert,
   den die Angaben aus dem Bestand weiterhin überschreiben können. */
.hinweis h3.hinweis__titel {
  margin-bottom: 0.4rem;
  font-size: var(--h3-groesse, 18px);
}

.abschnitt--dunkel .hinweis__titel {
  color: var(--rein-weiss);
}

.hinweis__text {
  font-size: 0.95rem;
}

/* --------------------------------------------------------- Kachelfeld */

/* Fläche aus Hinweiskacheln (gebündelt in seiten_erzeugen.py): ein
   gleichmäßiges Kartenraster statt Divis starrer Zweierzeilen. */
.kachelfeld {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--abstand-s);
  align-items: stretch;
}

/* Im Feld wird jede Kachel zur Karte – auch die, die einzeln nur eine
   Aufzählungszeile wäre (hinweis--zeichen). */
.kachelfeld .hinweis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .kachelfeld .hinweis:hover {
  box-shadow: var(--schatten-karte);
  }
}

/* Das Zeichen sitzt in einer getönten Plakette über dem Text. */
.kachelfeld .hinweis__zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 var(--abstand-s);
  border-radius: 13px;
  background: color-mix(in srgb, var(--zeichen-farbe, var(--blau)) 16%, var(--rein-weiss));
  color: color-mix(in srgb, var(--zeichen-farbe, var(--blau)) 55%,
                   var(--titel-farbe, var(--blau)));
}

.kachelfeld .hinweis__zeichen svg {
  width: 24px;
  height: 24px;
}

/* Seitliche Hinweise (Zeichen NEBEN dem Text, wie die Auflistungen auf
   /hochzeit/) bleiben von der Plakette unberührt: Das Zeichen steht
   schlicht links neben Titel und Text, auf Höhe der ersten Zeile –
   so stand es im Bestand. Die Kachel-Grundregel stapelt sonst senkrecht. */
.kachelfeld .hinweis--seitlich {
  flex-direction: row;
  gap: var(--abstand-s);
}

.kachelfeld .hinweis--seitlich .hinweis__zeichen {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0.2rem 0 0;
  border-radius: 0;
  background: none;
  color: var(--zeichen-farbe, var(--blau));
}

.kachelfeld .hinweis--seitlich .hinweis__zeichen svg {
  width: 30px;
  height: 30px;
}

.abschnitt--dunkel .kachelfeld .hinweis {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* --------------------------------------------------------- Ausklapper */

.ausklapper {
  border-bottom: 1px solid var(--linie);
}

.ausklapper__titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  padding: var(--abstand-s) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ausklapper__titel::-webkit-details-marker {
  display: none;
}

.ausklapper__titel::after {
  content: "";
  flex-shrink: 0;
  width: 0.7em;
  height: 0.7em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.15em, -0.15em);
  transition: transform 0.2s ease;
}

.ausklapper[open] .ausklapper__titel::after {
  transform: rotate(225deg) translate(-0.1em, -0.1em);
}

.ausklapper__text {
  padding-bottom: var(--abstand-m);
  font-size: 0.97rem;
}

.abschnitt--dunkel .ausklapper {
  border-color: rgba(232, 238, 241, 0.2);
}

/* --------------------------------------------------------- Preistafel */

.preistafel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .preistafel:hover {
  box-shadow: var(--schatten-karte);
  }
}

.preistafel__titel {
  margin-bottom: 0.1rem;
  font-size: var(--titel-4);
  color: var(--text-gedaempft);
}

.preistafel__preis {
  margin-bottom: var(--abstand-m);
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
  color: var(--titel-farbe, var(--blau));
}

.preistafel__leistungen {
  flex: 1;
  margin: 0 0 var(--abstand-m);
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.preistafel__leistungen li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding-block: 0.45em;
}

.preistafel__leistungen li + li {
  border-top: 1px solid color-mix(in srgb, var(--linie) 55%, transparent);
}

.preistafel__leistungen svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-top: 0.42em;
  color: var(--akzent, var(--blau));
}

.preistafel__fuss {
  margin: 0;
}

.preistafel .knopf {
  font-size: 1rem;
}

/* ------------------------------------------------- Streifenbild, Zahl */

.streifenbild {
  margin: 0;
}

.streifenbild img {
  width: 100%;
  border-radius: var(--radius);
}

.streifenbild figcaption {
  margin-top: var(--abstand-xs);
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

.trenner {
  height: 1px;
  margin: var(--abstand-m) 0;
  border: 0;
  background: var(--linie);
}

.abschnitt--dunkel .trenner {
  background: rgba(232, 238, 241, 0.25);
}

.zahl {
  display: flex;
  flex-direction: column-reverse;   /* Beschriftung über dem Wert */
  gap: 0.3rem;
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  text-align: center;
}

.zahl__wert {
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--titel-farbe, var(--blau));
}

.abschnitt--dunkel .zahl__wert {
  color: var(--rein-weiss);
}

.zahl__titel {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

/* Der Bestand färbte die Spalten hinter den Zahlen (Creme bis Braun).
   Als Fläche hinter der Karte wäre das ein Fleck – als zarter Ton in der
   Karte bleibt die Palette erhalten und der Text lesbar. */
.spalte--farbig:has(> .zahl:only-child) {
  background: transparent;
}

.spalte--farbig:has(> .zahl:only-child) .zahl {
  background: color-mix(in srgb, var(--spalte-grund) 22%, var(--rein-weiss));
}

/* Preistafeln nebeneinander enden auf gleicher Höhe. */
.zeile:has(> .spalte > .preistafel) {
  align-items: stretch;
}

.spalte:has(> .preistafel) {
  display: flex;
  flex-direction: column;
}

.spalte:has(> .preistafel) .preistafel {
  flex: 1;
}

/* ------------------------------------------------ Sozialverweis, Kopf */

.sozialknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  text-decoration: none;
}

.sozialknopf svg {
  width: 1.2em;
  height: 1.2em;
}

.kopfbereich {
  max-width: 44rem;
}

.kopfbereich h1 {
  margin-bottom: var(--abstand-s);
}

.abschnitt--bild.abschnitt--dunkel .kopfbereich {
  padding-block: var(--abstand-xl);
}

/* --------------------------------------------------------------- Video */

.video {
  margin: 0;
}

/* Vier Filme untereinander verschwimmen sonst zu einem Block. */
.spalte > .video + .video,
.spalte > * + .video {
  margin-top: var(--abstand-xl);
}

.video__start {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--dunkel);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.video__standbild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

@media (hover: hover) {
  .video__start:hover .video__standbild {
  transform: scale(1.02);
  opacity: 0.85;
  }
}

.video__knopf {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(2, 32, 59, 0.82);
  color: var(--rein-weiss);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  .video__start:hover .video__knopf {
  background: var(--blau);
  transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Das Dreieck sitzt optisch mittig, wenn es leicht nach rechts rückt. */
.video__knopf svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}

.video__titel {
  margin-top: var(--abstand-s);
  font-weight: 700;
}

.video__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-gedaempft);
}

.video__hinweis svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  margin-top: 0.28em;
}

.abschnitt--dunkel .video__hinweis {
  color: rgba(232, 238, 241, 0.75);
}

/* --------------------------------------------------------- Einbettung */

.einbettung {
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  overflow: hidden;
}

.einbettung__anfrage {
  padding: var(--abstand-l) var(--abstand-m);
  text-align: center;
}

.einbettung__titel {
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blau);
}

.einbettung__text {
  max-width: 32rem;
  margin-inline: auto;
  font-size: 0.95rem;
  color: var(--text-gedaempft);
}

.einbettung__anfrage .knopf-zeile {
  justify-content: center;
}

.einbettung__ersatz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-top: var(--abstand-s);
  font-size: 0.87rem;
  color: var(--text-gedaempft);
}

.einbettung__ersatz svg {
  width: 0.85em;
  height: 0.85em;
}

.einbettung--geladen {
  box-shadow: none;
}

/* Eigener Dienst (Buchungskalender): lädt sofort, die Höhe kommt per
   postMessage aus dem Rahmen – bis dahin gilt die Vorgabe. Der Kalender
   bringt seine Karte selbst mit und sein Dokument ist durchsichtig – jede
   Fläche hier ergäbe einen zweiten Kasten um die Karte herum. */
.einbettung--eigen {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.einbettung--eigen iframe {
  display: block;
  width: 100%;
  height: var(--einbettung-hoehe, 900px);
  border: 0;
  transition: height 0.25s ease;
}

.einbettung iframe {
  display: block;
  width: 100%;
  height: var(--einbettung-hoehe, 700px);
  border: 0;
}

/* ---------------------------------------------------- Auslastungsampel */

.auslastung {
  padding: 1rem var(--abstand-m);
  border-left: 4px solid var(--linie);
  border-radius: 0 var(--radius-feld) var(--radius-feld) 0;
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
}

.auslastung__titel {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.auslastung__titel svg {
  width: 1.1em;
  height: 1.1em;
}

.auslastung__zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin: 0;
  font-size: 0.95rem;
}

.auslastung__punkt {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--text-gedaempft);
}

/* Der Punkt schlägt ruhig – erkennbar als lebende Angabe, nicht als Zierde. */
.auslastung__zeile[data-ton="frei"] .auslastung__punkt {
  background: #2e7d32;
  box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
  animation: pochen 2.4s ease-out infinite;
}

.auslastung__zeile[data-ton="mittel"] .auslastung__punkt { background: #b26a00; }
.auslastung__zeile[data-ton="voll"] .auslastung__punkt   { background: #b3261e; }

/* Die linke Kante nimmt den Zustand auf – auf einen Blick erkennbar,
   auch ohne den Punkt zu suchen. */
.auslastung:has([data-ton="frei"])   { border-left-color: #2e7d32; }
.auslastung:has([data-ton="mittel"]) { border-left-color: #b26a00; }
.auslastung:has([data-ton="voll"])   { border-left-color: #b3261e; }

@keyframes pochen {
  70%  { box-shadow: 0 0 0 9px rgba(46, 125, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

/* Ergänzende Lage (etwa nachts) – tritt unter die Kapazitätszeile,
   eingerückt auf deren Textkante. */
.auslastung__zusatz {
  margin: 0.35rem 0 0;
  padding-left: calc(11px + 0.7em);
  font-size: 0.85rem;
  color: var(--text-gedaempft);
}

/* Während der Abfrage bleibt der Satz stehen und tritt nur zurück. */
.auslastung--laedt .auslastung__text {
  opacity: 0.45;
}

.auslastung--laedt .auslastung__punkt {
  animation: blinken 1s ease-in-out infinite;
}

@keyframes blinken {
  50% { opacity: 0.25; }
}

.abschnitt--dunkel .auslastung {
  border-left-color: rgba(232, 238, 241, 0.25);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* ------------------------------------------------ Aufruf, Galerie, Zier */

.aufruf {
  position: relative;
  border-radius: var(--radius-gross);
  background: var(--dunkel);
  color: var(--hell);
  overflow: hidden;
}

.aufruf__grund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aufruf__schleier {
  position: absolute;
  inset: 0;
  background: var(--schleier, rgba(2, 32, 59, 0.75));
}

.aufruf__inhalt {
  position: relative;
  padding: var(--abstand-xl) var(--abstand-m);
  text-align: center;
}

.aufruf__titel {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--rein-weiss);
}

.aufruf__inhalt .knopf-zeile {
  justify-content: center;
}

/* Galerie: galerie.js packt die Bilder zeilenweise nach ihrem echten
   Seitenverhältnis. Bis dahin (und ohne JavaScript) gilt das Flexraster
   hier – die Verhältnisse kommen als --verhaeltnis aus dem Bildverzeichnis. */
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.galerie__feld {
  position: relative;
  margin: 0;
  flex: 1 1 calc((100% - 16px) / 3);
  min-width: min(100%, 15rem);
  overflow: hidden;
  border-radius: 3px;
}

.galerie__feld picture {
  height: 100%;
}

.galerie__feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Vor der Packung reserviert das eigene Seitenverhältnis den Platz. */
.galerie:not(.galerie--gesetzt) .galerie__feld img {
  aspect-ratio: var(--verhaeltnis, 1.5);
}

.galerie--gesetzt .galerie__feld {
  flex: 0 0 auto;
  min-width: 0;
}

.galerie__feld:focus-within img {
  transform: scale(1.035);
}

@media (hover: hover) {
  .galerie__feld:hover img {
  transform: scale(1.035);
  }
}

/* Unsichtbare Schaltfläche über dem Bild – so bleibt die Großansicht auch
   mit Tastatur erreichbar. */
.galerie__oeffner {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.galerie__oeffner:focus-visible {
  outline: 3px solid var(--blau-hell);
  outline-offset: -3px;
}

/* ------------------------------------------------------- Großansicht */

.grossansicht {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 14, 25, 0.93);
}

.grossansicht--offen {
  display: flex;
}

.grossansicht__figur {
  margin: 0;
  max-width: min(94vw, 1600px);
}

.grossansicht img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 3px;
}

.grossansicht__stand {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(232, 238, 241, 0.7);
}

.grossansicht__schliessen,
.grossansicht__pfeil {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--rein-weiss);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .grossansicht__schliessen:hover, .grossansicht__pfeil:hover {
  background: rgba(255, 255, 255, 0.22);
  }
}

.grossansicht__schliessen svg,
.grossansicht__pfeil svg {
  width: 22px;
  height: 22px;
}

.grossansicht__schliessen {
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
}

.grossansicht__pfeil--zurueck { left: max(10px, env(safe-area-inset-left)); }
.grossansicht__pfeil--weiter  { right: max(10px, env(safe-area-inset-right)); }

@media (max-width: 700px) {
  /* Auf dem Handy blättert man per Wisch – die Pfeile stünden im Bild. */
  .grossansicht__pfeil { display: none; }
}

.zierzeichen {
  margin: 0;
  line-height: 0;
}

.zierzeichen svg {
  width: 36px;
  height: 36px;
  color: var(--akzent, var(--blau));
}

.abschnitt--dunkel .zierzeichen svg {
  color: var(--rein-weiss);
}

.stimme__zeichen {
  display: block;
  margin-bottom: 0.2rem;
  line-height: 0;
  color: var(--akzent, var(--blau));
  opacity: 0.35;
}

.stimme__zeichen svg {
  width: 26px;
  height: 26px;
}

/* ---------------------------------------------------- Vorher–Nachher */

/* Zwei deckungsgleiche Bilder, die Naht wandert mit --stand (haupt.js liest
   dafür nur den unsichtbaren Schieberegler aus). Ohne JavaScript steht die
   Naht ruhig in der Mitte. */
.vergleich {
  position: relative;
  aspect-ratio: var(--verhaeltnis, 1.5);
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-flach);
  --stand: 50%;
}

.vergleich__ebene {
  position: absolute;
  inset: 0;
}

.vergleich__ebene picture {
  height: 100%;
}

.vergleich__ebene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vergleich__ebene--vorher {
  clip-path: inset(0 calc(100% - var(--stand)) 0 0);
}

.vergleich__naht {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--stand);
  width: 2px;
  margin-left: -1px;
  background: var(--rein-weiss);
  box-shadow: 0 0 8px rgba(2, 32, 59, 0.35);
  pointer-events: none;
}

.vergleich__griff {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rein-weiss);
  color: var(--blau);
  box-shadow: 0 2px 10px rgba(2, 32, 59, 0.3);
  transform: translate(-50%, -50%);
}

.vergleich__griff svg {
  width: 22px;
  height: 22px;
}

.vergleich__marke {
  position: absolute;
  top: 0.8rem;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: rgba(2, 32, 59, 0.55);
  color: var(--rein-weiss);
  font-size: 0.8rem;
  pointer-events: none;
}

.vergleich__marke--vorher  { left: 0.8rem; }
.vergleich__marke--nachher { right: 0.8rem; }

/* Der Regler ist die ganze Fläche: ziehen, tippen, Pfeiltasten. */
.vergleich__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.vergleich:has(.vergleich__regler:focus-visible) {
  outline: 3px solid var(--blau-hell);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- Reiter */

/* Umschaltung zwischen Feldern („Mit Fotograf / Ohne Fotograf“). Ohne
   JavaScript stehen alle Felder untereinander, jedes mit seinem Titel;
   haupt.js blendet die Leiste ein und schaltet um. */
.reiter {
  display: flex;
  flex-direction: column;
}

.reiter__leiste {
  display: none;
  align-self: center;
  gap: 4px;
  margin-bottom: var(--abstand-s);
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hell) 70%, var(--rein-weiss));
  border: 1px solid var(--linie);
}

.reiter--umschaltbar .reiter__leiste {
  display: inline-flex;
}

.reiter__knopf {
  padding: 0.55em 1.5em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-gedaempft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.reiter__knopf[aria-selected="true"] {
  background: var(--aktion, var(--blau));
  color: var(--aktion-schrift, var(--rein-weiss));
}

.reiter__feldtitel {
  text-align: center;
  margin-top: var(--abstand-m);
}

.reiter--umschaltbar .reiter__feldtitel {
  display: none;
}

.reiter__feld[hidden] {
  display: none;
}

/* --------------------------------------------------------- Kontaktwege */

/* Direkte Wege (Anruf, WhatsApp, E-Mail, Instagram) als Karten – große
   Tippflächen, gerade auf dem Handy. */
.kontaktwege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--abstand-s);
}

.kontaktweg {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-gross);
  background: var(--rein-weiss);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--schatten-flach);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .kontaktweg:hover {
  box-shadow: var(--schatten-karte);
  color: var(--text);
  }
}

.kontaktweg__zeichen {
  margin-bottom: 0.5rem;
  line-height: 0;
  color: var(--blau);
}

.kontaktweg__zeichen svg {
  width: 22px;
  height: 22px;
}

.kontaktweg__titel {
  font-weight: 700;
}

.kontaktweg__wert {
  font-size: 0.88rem;
  color: var(--text-gedaempft);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Schritte */

/* Nummerierter Ablauf („So geht es weiter“). */
.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.schritte__schritt {
  position: relative;
  padding-left: 3.1rem;
  counter-increment: schritt;
}

.schritte__schritt::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--aktion, var(--blau));
  color: var(--aktion-schrift, var(--rein-weiss));
  font-family: var(--schrift-titel);
}

/* Eine ruhige Linie verbindet die Schritte. */
.schritte__schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.1rem - 1px);
  top: 2.5rem;
  bottom: calc(-1 * var(--abstand-m) + 0.3rem);
  width: 2px;
  background: var(--linie);
}

.schritte__titel {
  margin: 0.2rem 0 0;
  font-weight: 700;
}

.schritte__text {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--text-gedaempft);
}

/* -------------------------------------------------------- offene Teile */

.offen {
  padding: var(--abstand-s) var(--abstand-m);
  border-left: 4px solid #c8a24a;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(200, 162, 74, 0.12);
  font-size: 0.92rem;
}

.abschnitt--dunkel .offen {
  background: rgba(200, 162, 74, 0.2);
  color: var(--rein-weiss);
}

/* ============================================================== Blog ===
   Übersicht, Aufmacher, Karten und die Beitragsseite selbst. */

/* Der Blog ist kein Nachbau einer Divi-Seite, sondern eigene Gestaltung –
   hier darf die Überschrift größer stehen als Divis 30 px. */
.beitragskopf h1,
.blogtitel {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
}

.seitenvorspann {
  max-width: 38rem;
  margin-top: var(--abstand-s);
  font-size: 1.05rem;
  color: var(--text-gedaempft);
}