/* 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. Folgt der Titelfarbe der
   Seite – auf /hochzeit/ stand der Umriss sonst blau auf der warmen Seite. */
.knopf--leise {
  background: transparent;
  color: var(--titel-farbe, var(--blau));
  box-shadow: inset 0 0 0 1px var(--titel-farbe, var(--blau));
}

@media (hover: hover) {
  .knopf--leise:hover {
  background: var(--titel-farbe, 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; }
}

/* Die Kartenfläche folgt der Farbwelt der Seite (--flaeche), Vorgabe ist
   das Hellblau der Startseite. */
/* figure bringt 40px Seitenrand mit – der nahm jeder Spalte 80px Breite. */
.stimme {
  break-inside: avoid;
  margin: 0 0 calc(var(--abstand-m) + 36px);
  padding: calc(36px + var(--abstand-s)) var(--abstand-m) var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--flaeche, var(--hell));
  color: var(--text, 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(--flaeche, var(--hell));
  border-radius: 50%;
  object-fit: cover;
  background: var(--flaeche, var(--hell));
}

/* Drei Stimmen in drei Spalten (/hochzeit/): Das überstehende Rundbild und
   das Zitatzeichen aus der Startseiten-Fassung ergaben hier krumme Abstände.
   In der Spalte steht das Bild schlicht oben links in der Karte, die Karten
   sind gleich hoch und die Namen enden auf einer Linie. */
.zeile:has(> .spalte > .stimme:first-child) {
  align-items: stretch;
}

.spalte:has(> .stimme:first-child) {
  display: flex;
  flex-direction: column;
}

.spalte > .stimme {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: var(--abstand-m);
  box-shadow: var(--schatten-flach);
}

.spalte > .stimme .stimme__zeichen {
  display: none;
}

.spalte > .stimme picture {
  width: 56px;
  height: 56px;
  margin-bottom: var(--abstand-s);
}

.spalte > .stimme .stimme__bild {
  width: 56px;
  height: 56px;
  margin: 0;
  border: 0;
}

.spalte > .stimme figcaption {
  margin-top: auto;
  padding-top: var(--abstand-s);
}

/* 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;
}

/* Vier schmalere Karten nebeneinander (Zusatzleistungen auf /hochzeit/). */
.kachelfeld--vier {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

/* Wenige Karten mittig (die zwei Empfehlungen auf /hochzeit/) – ein Raster
   ließe sie links stehen und die Fläche rechts leer. */
.kachelfeld--mitte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.kachelfeld--mitte > .hinweis {
  flex: 0 1 22rem;
}

/* Gestapelt brauchen die Karten mehr Luft als nebeneinander – und die
   seitlichen Häkchen-Kacheln (etwa „Das alles bekommt ihr“ auf /hochzeit/)
   werden kompakter, sonst wird die Liste endlos. */
@media (max-width: 700px) {
  .kachelfeld {
    gap: 1.25rem;
  }

  .kachelfeld .hinweis--seitlich {
    padding: 0.95rem 1.1rem;
  }
}

/* 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); }
}

/* ------------------------------------------------------------ Wegweiser */

/* Frühe Abzweige auf der Startseite: drei Karten zu den Leistungen.
   Breit als Bildkarten nebeneinander, schmal als kompakte Zeilen. */
.wegweiser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-m);
}

.wegweiser__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}

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

.wegweiser__bild {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.wegweiser__bild picture,
.wegweiser__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wegweiser__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.2rem 1.1rem;
}

.wegweiser__titel {
  font-family: var(--schrift-titel);
  font-size: 1.1rem;
  color: var(--blau);
}

.wegweiser__hinweis {
  font-size: 0.88rem;
  color: var(--text-gedaempft);
}

.wegweiser__karte > svg {
  position: absolute;
  right: 1.1rem;
  bottom: 1.35rem;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--blau);
}

@media (max-width: 700px) {
  .wegweiser {
    grid-template-columns: 1fr;
    gap: var(--abstand-s);
  }

  .wegweiser__karte {
    flex-direction: row;
    align-items: center;
  }

  .wegweiser__bild {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 1;
  }

  .wegweiser__text {
    flex: 1;
    padding: 0.8rem 2.2rem 0.8rem 1rem;
  }

  .wegweiser__karte > svg {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* „Weitere Bilder zeigen“ unter der Galerie – nur auf schmalen Schirmen,
   angelegt von galerie.js. */
.galerie__mehr {
  display: block;
  margin: var(--abstand-m) auto 0;
}

/* Sind alle Bilder da, setzt galerie.js `hidden` – aber .knopf (inline-flex)
   und die Regel darüber (block) schlagen das Browser-eigene display: none
   für hidden. Ohne diese Zeile blieb „Weitere Bilder zeigen (20)“ nach dem
   Klick stehen. */
.galerie__mehr[hidden] {
  display: none;
}

.galerie [hidden] {
  display: none;
}

/* 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;
}

/* Mauer (Masonry) für kleine Portfolios: große Bilder in Spalten. Ohne
   JavaScript übernehmen CSS-Spalten; galerie.js setzt die Felder dann
   absolut und gleicht die Unterkanten an. */
.galerie--mauer {
  display: block;
  position: relative;
  /* Auf Ultrawide-Schirmen würden drei Spalten über die volle Breite
     riesig – bei 1440 px ist jedes Bild knapp 470 px breit. */
  max-width: 1440px;
  margin-inline: auto;
  columns: 3 18rem;
  column-gap: 14px;
}

.galerie--mauer .galerie__feld {
  break-inside: avoid;
  margin-bottom: 14px;
  min-width: 0;
  border-radius: 6px;
  box-shadow: var(--schatten-flach);
}

.galerie--mauer.galerie--gesetzt {
  columns: auto;
}

.galerie--mauer.galerie--gesetzt .galerie__feld {
  position: absolute;
  margin: 0;
}

.galerie--mauer .galerie__feld img {
  transition: transform 0.7s ease;
}

.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);
  }
}

/* Kopfzeile der Kachel: Symbol vor dem Titel, dahinter der Ampelpunkt. */
.kontaktweg__kopf {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 0.25rem;
}

.kontaktweg__zeichen {
  line-height: 0;
  color: var(--blau);
}

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

.kontaktweg__titel {
  font-weight: 700;
}

/* Ampelpunkt je Kontaktweg – gefärbt von der Auslastungs-Logik (haupt.js),
   bis dahin versteckt. Farben wie an der Auslastungskarte. */
.kontaktweg__punkt {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-gedaempft);
}

.kontaktweg__punkt[data-ton="frei"]   { background: #2e7d32; }
.kontaktweg__punkt[data-ton="mittel"] { background: #b26a00; }
.kontaktweg__punkt[data-ton="voll"]   { background: #b3261e; }

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

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

/* Überschrift über dem Ablauf – gleiche Tonlage wie der Titel der
   Auslastungskarte, damit die Seitenspalte eine Sprache spricht. */
.schritte__ueberschrift {
  margin: 0 0 var(--abstand-s);
  font-family: var(--schrift);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

/* 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);
}

/* ================================== Handgebaute Leistungsseiten ===
   Bausteine der Seiten unter inhalte/eigen/, zuerst /hochzeit/ (2026-09-08):
   Abschnittskopf, Held, Fakten, Werte, Zitat, Orte, FAQ, Teaser,
   Beitragsreihe, Einklappen. Alle Farben kommen aus der Farbwelt der Seite
   (gestaltung_stil), Vorgabe ist überall das Blau der Marke. */

/* Kleine Zeile über einem Titel – Ordnung, keine Überschrift. */
.vorzeile {
  margin: 0 0 0.5rem;
  font-family: var(--schrift);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent, var(--blau));
}

.abschnittskopf {
  max-width: 40rem;
  margin: 0 auto var(--abstand-l);
  text-align: center;
}

.abschnittskopf h2 {
  text-wrap: balance;
}

.abschnittskopf__text {
  font-size: 1.05rem;
  color: var(--text-gedaempft);
}

/* ------------------------------------------------------------- Held */

.held {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
}

.held__titel {
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.3rem);
  text-wrap: balance;
}

.held__vorspann {
  max-width: 31rem;
  font-size: 1.1rem;
  color: var(--text-gedaempft);
}

.held__bild {
  overflow: hidden;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-bild);
}

.held__bild img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.held__klein {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: var(--abstand-s) 0 0;
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

.held__klein span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.held__klein svg {
  width: 1em;
  height: 1em;
  color: var(--akzent, var(--blau));
}

/* Schmal: Bild zuerst, dann der Text – der Kopf soll ein Bild sein. */
@media (max-width: 860px) {
  .held {
    grid-template-columns: 1fr;
  }

  .held__bild {
    order: -1;
  }
}

/* ----------------------------------------------------------- Fakten */

.fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-s);
}

.fakt {
  display: block;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-gross);
  background: var(--flaeche, var(--rein-weiss));
  box-shadow: var(--schatten-flach);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.fakt__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  color: var(--titel-farbe, var(--blau));
}

.fakt__wert svg {
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.05em;
  color: var(--akzent, var(--blau));
}

.fakt__name {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-gedaempft);
}

@media (max-width: 700px) {
  .fakten {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------- Werte und Person */

.werte__liste {
  display: grid;
  gap: var(--abstand-m);
  margin-top: var(--abstand-m);
}

.wert {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--abstand-s);
}

.wert__zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--akzent, var(--blau)) 14%, var(--rein-weiss));
  color: var(--titel-farbe, var(--blau));
}

.wert__zeichen svg {
  width: 24px;
  height: 24px;
}

.wert__titel {
  margin-bottom: 0.25rem;
  font-size: var(--titel-4);
}

.wert__text {
  font-size: 0.97rem;
  color: var(--text-gedaempft);
}

.person {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.9rem;
  align-items: start;
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--linie);
}

.person picture,
.person__bild {
  width: 64px;
  height: 64px;
}

.person__bild {
  border-radius: 50%;
  object-fit: cover;
}

.person p {
  margin: 0;
}

.person__name {
  font-weight: 700;
}

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

.person__text {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* Die Spalte mit dem Bild neben den Werten: weich gerundet, mit Schatten. */
.spalte > .werte ~ *,
.spalte:has(> .werte) + .spalte picture img {
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-bild);
}

/* ------------------------------------------------------------ Zitat */

.zitat {
  max-width: 42rem;
  margin: var(--abstand-l) auto 0;
  text-align: center;
  font-size: 1.12rem;
}

.zitat__zeichen {
  display: block;
  line-height: 0;
  color: var(--akzent, var(--blau));
  opacity: 0.55;
}

.zitat__zeichen svg {
  width: 28px;
  height: 28px;
}

.zitat p {
  margin: 0.3rem 0 0.7rem;
}

.zitat footer {
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

/* -------------------------------------------------- Schritte: Phasen */

/* Zwischentitel im Ablauf („Vor der Hochzeit“) – ohne Nummer, in der
   Tonlage der Vorzeile, auf der Textkante der Schritte. */
.schritte__phase {
  padding-left: 3.1rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent, var(--blau));
}

.schritte__phase:first-child {
  margin-top: 0;
}

/* Die Verbindungslinie eines Schritts endet vor der nächsten Phase. */
.schritte__schritt:has(+ .schritte__phase)::after {
  display: none;
}

/* Bild und Karte neben dem Ablauf */
.spalte > picture + .hinweis {
  margin-top: var(--abstand-m);
}

/* ------------------------------------------------------------- Orte */

.orte {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--abstand-s);
}

.ort {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-flach);
  color: var(--rein-weiss);
}

.ort picture {
  height: 100%;
}

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

@media (hover: hover) {
  .ort:hover img {
    transform: scale(1.04);
  }
}

.ort__name {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem 0.9rem 0.8rem;
  background: linear-gradient(180deg, transparent, rgba(20, 16, 12, 0.82));
  font-family: var(--schrift-titel);
  font-size: 1rem;
  line-height: 1.2;
}

.ort__name small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--schrift);
  font-size: 0.78rem;
  opacity: 0.85;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--abstand-m) 0 0;
}

.chip {
  padding: 0.35em 0.95em;
  border-radius: 999px;
  background: var(--flaeche, var(--rein-weiss));
  box-shadow: var(--schatten-flach);
  font-size: 0.92rem;
}

.chip--heim {
  background: var(--aktion, var(--blau));
  color: var(--aktion-schrift, var(--weiss));
  font-weight: 700;
}

@media (max-width: 900px) {
  .orte {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* -------------------------------------------------------------- FAQ */

.faq {
  max-width: 46rem;
  margin-inline: auto;
}

.faq .ausklapper__titel {
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--titel-farbe, var(--blau));
}

/* Zwei unabhängige Stapel nebeneinander – Flex mit align-items: flex-start,
   kein Raster: Öffnet sich links etwas, bleibt rechts alles stehen. */
.faq--zwei {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-l);
  max-width: none;
}

.faq__spalte {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 860px) {
  .faq--zwei {
    flex-direction: column;
    gap: 0;
  }

  .faq__spalte {
    width: 100%;
  }
}

/* Während des Zuklappens (haupt.js) dreht der Pfeil sofort zurück, obwohl
   das open-Attribut bis zum Ende der Bewegung bleibt. */
.ausklapper--schliesst .ausklapper__titel::after {
  transform: rotate(45deg) translate(-0.15em, -0.15em);
}

/* ----------------------------------------------------------- Teaser */

.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-l);
  align-items: center;
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--flaeche, var(--rein-weiss));
  box-shadow: var(--schatten-flach);
}

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

.teaser__titel {
  font-size: var(--titel-3);
}

.teaser--umgekehrt .teaser__bild {
  order: 2;
}

/* Das kleine Formular (Checkliste) steht kompakt in der Karte. */
.teaser .formular {
  margin-top: var(--abstand-s);
}

@media (max-width: 760px) {
  .teaser {
    grid-template-columns: 1fr;
  }

  .teaser--umgekehrt .teaser__bild {
    order: 0;
  }
}

/* --------------------------------------------------- Beitragsreihe */

.beitragsreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
}

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

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

.beitragsreihe__karte strong {
  font-family: var(--schrift-titel);
  font-weight: 400;
  color: var(--titel-farbe, var(--blau));
}

.beitragsreihe__karte span {
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

.beitragsreihe__karte em {
  margin-top: auto;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--verweis-farbe, var(--blau));
}

@media (max-width: 760px) {
  .beitragsreihe {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- Einklappen */

/* Lange Felder (neun Leistungen, zehn Orte) zeigen auf dem Handy erst vier
   Einträge; haupt.js setzt die Klasse und stellt den Knopf dazu. Ohne
   JavaScript bleibt alles sichtbar. Die Vier ist bewusst fest – ein Wert
   je Feld bräuchte eigene Regeln je Zahl. */
@media (max-width: 700px) {
  .einklappbar--zu > :nth-child(n + 5) {
    display: none;
  }
}

/* ----------------------------------------------------------- Aufruf */

.aufruf__text {
  max-width: 34rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
}