/* ==========================================================================
   hebamme-ettlingen.de

   Eine einzige Stildatei, kein Framework. Alle Farben, Schriften und Abstaende
   stehen als Variablen im Block "Design-Werte" -- dort und nur dort wird das
   Aussehen geaendert.

   Alle Werte stammen aus dem WordPress-Backup: aus den Elementor-Kit-
   Einstellungen und aus den Einstellungen der einzelnen Widgets. Wo unten
   "Original" steht, ist der Wert direkt von dort uebernommen.
   ========================================================================== */

/* ------------------------------------------------------- Design-Werte */

:root {
  /* Farben -- Original aus dem Elementor-Kit und den Seiten */
  --farbe-text: #464247c9;          /* Original: Ueberschriften und Fliesstext, 79% Deckkraft */
  --farbe-text-voll: #464247;       /* dasselbe Grau ohne Transparenz, fuer kleine Schrift */
  --farbe-text-leise: #848484;      /* Original: Beschreibungstext der Startseiten-Kacheln */
  --farbe-akzent: #111211;          /* Original "Accent": Schaltflaechen, nahezu schwarz */
  --farbe-akzent-dunkel: #000000;
  --farbe-hell: #f2f4ef;            /* Original "Text": helle Schrift auf dunklem Grund */
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-warm: #fafafa;    /* Original: Hintergrund der Kacheln */
  --farbe-flaeche-akzent: #efefef;  /* Original: Rahmen um die Kachelbilder */
  --farbe-linie: #e6e4e2;
  --farbe-ueberlagerung: #847667;   /* Original: warmer Braunton ueber dem Titelbild */
  --farbe-zweit: #426863;           /* Original "Sekundäre": gedecktes Petrol, fuer Links */
  --farbe-fuss: #464247;
  --farbe-fuss-text: #f2f4ef;

  /* Schrift -- das Original nutzt durchgehend Arial. Bewusst keine Webschrift:
     Arial ist ueberall vorhanden, laedt also sofort und kostet keine Anfrage. */
  --schrift: Arial, "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-titel: var(--schrift);
  --zeilenhoehe: 1.7;

  /* Schriftgroessen. Die Zielwerte sind die des Originals (70px, 60px, 40px,
     20px), nach unten fluide damit sie auf dem Handy nicht sprengen. */
  --gr-basis: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);       /* Original 20px */
  --gr-gross: clamp(1.25rem, 1rem + 1.1vw, 2.5rem);        /* Original 40px */
  --gr-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.375rem);       /* Original 70px */
  --gr-h2: clamp(1.7rem, 1.2rem + 2.6vw, 3.75rem);         /* Original 60px */
  --gr-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.875rem);       /* Original 1.5em */
  --gr-klein: 0.875rem;

  /* Abstaende und Formen */
  --breite-max: 1400px;            /* Original: 1600px Container, hier etwas ruhiger */
  --breite-text: 68ch;
  --rand: clamp(1.15rem, 4vw, 2.5rem);
  --luft-block: clamp(3rem, 7vw, 6rem);
  --radius: 4px;
  --radius-gross: 8px;
  --schatten: 0 1px 2px rgba(61, 58, 54, 0.05), 0 8px 24px rgba(61, 58, 54, 0.07);
  --uebergang: 180ms ease;
}

/* ------------------------------------------------------------- Grundlage */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--gr-basis);
  line-height: var(--zeilenhoehe);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--farbe-akzent-dunkel); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--farbe-text); }

:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--farbe-text);
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Deutsche Komposita wie "Berufshaftpflichtversicherung" sind in einer
     30px-Ueberschrift breiter als ein Handybildschirm. Silbentrennung loest das
     saubererer als eine kleinere Schrift -- lang="de" steht im html-Element,
     der Browser trennt also nach deutschen Regeln. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }

p { margin: 0 0 1.15em; text-wrap: pretty; hyphens: auto; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

/* Hilfsklassen */

.huelle {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 0.7em 1.2em;
  background: var(--farbe-text);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--uebergang);
}
.sprunglink:focus { transform: translate(-50%, 0); color: #fff; }

.knopf {
  display: inline-block;
  padding: 0.75em 1.6em;
  background: var(--farbe-akzent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--uebergang), transform var(--uebergang);
}
.knopf:hover { background: var(--farbe-akzent-dunkel); color: #fff; transform: translateY(-1px); }

.icon { width: 1.35em; height: 1.35em; flex: none; }

/* ---------------------------------------------------------- Hinweisband */

.hinweisband {
  background: var(--farbe-akzent);
  color: #fff;
  font-size: var(--gr-klein);
  text-align: center;
}
.hinweisband .huelle { padding-block: 0.6em; }

/* ------------------------------------------------------------ Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--farbe-linie);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.5rem;
  padding-block: 1.2rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.marke-logo { width: auto; height: 3.8rem; }   /* Signet, Seitenverhaeltnis 256:295 */
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--farbe-text-leise); }
.marke-beruf {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--farbe-text-voll);
}

.haupt-nav {
  flex: 1;
}
.haupt-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.haupt-nav a {
  display: block;
  padding: 0.35em 0;
  font-size: 0.95rem;
  color: var(--farbe-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}
.haupt-nav a:hover { color: var(--farbe-akzent-dunkel); border-bottom-color: var(--farbe-linie); }
.haupt-nav a.aktiv { color: var(--farbe-akzent-dunkel); border-bottom-color: var(--farbe-akzent); }

/* Menuekopf fuer schmale Bildschirme, reines CSS ueber eine Checkbox */

/* Auf breiten Bildschirmen ist das Menue immer offen, Schalter und Knopf weg. */
.menu-knopf, .menu-schalter { display: none; }

@media (max-width: 61.25rem) {
  /* Unsichtbar, aber mit Tabulator erreichbar und mit Leertaste schaltbar. */
  .menu-schalter {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
  }
  /* Fokusrahmen liegt sichtbar auf dem Knopf, nicht auf der versteckten Checkbox */
  .menu-schalter:focus-visible ~ .menu-knopf {
    outline: 3px solid var(--farbe-akzent);
    outline-offset: 2px;
  }

  .menu-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    margin-inline-start: auto;
    cursor: pointer;
    border-radius: var(--radius);
  }
  .menu-balken,
  .menu-balken::before,
  .menu-balken::after {
    content: "";
    display: block;
    width: 1.4rem; height: 2px;
    background: var(--farbe-text);
    transition: transform var(--uebergang), opacity var(--uebergang);
  }
  .menu-balken { position: relative; }
  .menu-balken::before { position: absolute; top: -6px; }
  .menu-balken::after { position: absolute; top: 6px; }

  .menu-schalter:checked ~ .menu-knopf .menu-balken { background: transparent; }
  .menu-schalter:checked ~ .menu-knopf .menu-balken::before { transform: translateY(6px) rotate(45deg); }
  .menu-schalter:checked ~ .menu-knopf .menu-balken::after { transform: translateY(-6px) rotate(-45deg); }

  .haupt-nav {
    display: none;
    flex-basis: 100%;
    border-top: 1px solid var(--farbe-linie);
  }
  .menu-schalter:checked ~ .haupt-nav { display: block; }
  .haupt-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: 0.5rem; }
  .haupt-nav a {
    padding: 0.8em 0;
    border-bottom: 1px solid var(--farbe-linie);
  }
  .haupt-nav li:last-child a { border-bottom: 0; }
  .haupt-nav a.aktiv { border-bottom-color: var(--farbe-akzent); }
  .kopf-innen { flex-wrap: wrap; }
}

/* --------------------------------------------------------- Titelbereich */

.titelbereich { position: relative; background: var(--farbe-flaeche-warm); }

/* Schmale Variante fuer Unterseiten: gleiches Prinzip, weniger Hoehe */
.titelbereich-schmal .titelbereich-bild { height: clamp(13rem, 42vh, 24rem); }
.titelbereich-schmal .titelbereich-bild img { object-position: center 35%; }
.titelbereich-text h1, .titelbereich-text p { color: var(--farbe-hell); }

/* Bewusst mit fester Hoehe statt aspect-ratio: aspect-ratio zusammen mit
   min-height/max-height laesst den Browser die Breite aus dem Verhaeltnis
   zurueckrechnen -- das sprengt auf schmalen Bildschirmen die Seitenbreite. */
.titelbereich-bild {
  position: relative;
  width: 100%;
  height: clamp(20rem, 83vh, 46rem);   /* Original: 83vh */
  overflow: hidden;
}
.titelbereich-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: bottom right;   /* Original: background-position bottom right */
}
/* Original: Verlaufs-Ueberlagerung im warmen Braunton ueber dem Titelbild */
.titelbereich-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--farbe-ueberlagerung) 78%, transparent) 0%,
    color-mix(in srgb, var(--farbe-ueberlagerung) 42%, transparent) 55%,
    color-mix(in srgb, var(--farbe-ueberlagerung) 12%, transparent) 100%
  );
}

.titelbereich-text {
  position: absolute;
  left: 50%; bottom: clamp(1.5rem, 4vw, 3.5rem);
  transform: translateX(-50%);
  color: #fff;
}
.titelbereich-text h1 { color: #fff; margin-bottom: 0.2em; }
.titelbereich-beruf {
  margin: 0 0 0.35em;
  font-size: var(--gr-klein);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}
.titelbereich-claim {
  margin: 0;
  font-size: var(--gr-gross);
  max-width: 32ch;
}

/* Wenn kein Bild vorhanden ist, faellt der Titelbereich auf Farbe zurueck */
.titelbereich-bild:empty { display: none; }
.titelbereich-bild:empty + .titelbereich-text {
  position: static;
  transform: none;
  color: var(--farbe-text);
  padding-block: var(--luft-block);
}
.titelbereich-bild:empty + .titelbereich-text h1 { color: var(--farbe-text); }

/* ------------------------------------------------ Willkommenszeile */

/* Original: eine zentrierte Zeile in 40px zwischen Titelbild und Kacheln */
.willkommen {
  background: var(--farbe-flaeche);
  text-align: center;
}
.willkommen .huelle {
  max-width: none;
}
.willkommen p {
  margin: 0;
  padding-block: clamp(2rem, 5vw, 4rem);
  font-size: var(--gr-gross);
  color: var(--farbe-text);
}

/* --------------------------------------------------------------- Kacheln */

.kacheln {
  display: grid;
  /* min(...) verhindert Ueberlauf auf sehr schmalen Bildschirmen */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: var(--luft-block);
  align-items: start;
}

.kachel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--farbe-flaeche-warm);   /* Original: #fafafa */
  text-align: center;
}

/* Original: 10px heller Rahmen um das Kachelbild */
.kachel-bild {
  padding: 10px;
  background: var(--farbe-flaeche-akzent);
}
.kachel-bild img,
.kachel-bild .bild-platzhalter {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kachel-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.1rem, 2vw, 1.75rem);
}
.kachel-titel {
  /* Eigene Groesse: in einer 300px-Kachel wuerde die volle Original-Groesse
     Woerter wie "Schwangerschaft" mitten durchbrechen. */
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem);
  margin-bottom: 0.5em;
  hyphens: none;                    /* lieber umbrechen als trennen */
}
.kachel-beschreibung {
  color: var(--farbe-text-leise);   /* Original: #848484 */
  font-size: 1rem;                  /* Original: 1em */
  flex: 1;
}
.kachel-aktion { margin: 1.5em 0 0; }

/* ---------------------------------------------------------- Textbereich */

.textbereich { padding-block: var(--luft-block); }
.textbereich > .inhalt-text > :first-child,
.textbereich > :first-child { margin-top: 0; }

.textbereich h1 { margin-bottom: 0.8em; }
.textbereich h2 { margin-top: 2em; }
.textbereich h3 { margin-top: 1.6em; }

.textbereich p,
.textbereich ul,
.textbereich ol { max-width: var(--breite-text); font-size: var(--gr-gross); }

.textbereich ul, .textbereich ol { padding-left: 1.3em; margin-bottom: 1.15em; }
.textbereich li { margin-bottom: 0.4em; }

.textbereich blockquote {
  margin: 2em 0;
  padding: 1.1em 1.4em;
  max-width: var(--breite-text);
  background: var(--farbe-flaeche-warm);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--gr-gross);
}
.textbereich blockquote p { margin-bottom: 0; }

.textbereich hr {
  max-width: var(--breite-text);
  margin: var(--luft-block) 0;
  border: 0;
  border-top: 1px solid var(--farbe-linie);
}

.textbereich address { font-style: normal; }

/* Textseite mit Bild daneben */
.textbereich.mit-bild {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 52rem) {
  .textbereich.mit-bild { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .textbereich.mit-bild .inhalt-bild { position: sticky; top: 6.5rem; }
}
.inhalt-bild img {
  width: 100%;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

/* ----------------------------------------------------------------- Kurse */

.kursliste {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: var(--luft-block);
}

.kurs {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--farbe-flaeche-warm);
}
@media (min-width: 52rem) {
  .kurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
  .kurs:nth-child(even) .kurs-bild { order: 2; }
  /* Bild fuellt die ganze Kartenhoehe, der Text sitzt mittig daneben */
  .kurs-inhalt { align-self: center; }
}
.kurs-bild { display: flex; }
.kurs-bild img,
.kurs-bild .bild-platzhalter {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
}
.kurs-inhalt { padding: clamp(1.3rem, 3vw, 2.5rem); }
.kurs-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.kurs-kopf h2 { margin-bottom: 0; }
.kurs-logo { max-height: 3.5rem; width: auto; }
.kurs-beschreibung { margin-top: 1em; max-width: var(--breite-text); }

.kurs-eckdaten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25em 1em;
  margin: 1.4em 0;
  padding: 0;
}
.kurs-eckdaten dt { font-weight: 600; }
.kurs-eckdaten dd { margin: 0; color: var(--farbe-text-leise); }

.termine {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 0.975rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  overflow: hidden;
}
.termine th, .termine td {
  padding: 0.7em 0.9em;
  text-align: left;
  border-bottom: 1px solid var(--farbe-linie);
}
.termine th { background: var(--farbe-flaeche-akzent); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.termine tr:last-child td { border-bottom: 0; }

.termine-leer { margin: 1.4em 0; color: var(--farbe-text-leise); }

.status {
  display: inline-block;
  padding: 0.15em 0.65em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-frei { background: #e4ece2; color: #4a5c46; }
.status-warte { background: #f7eedd; color: #7a6435; }
.status-voll { background: #f0e4e4; color: #7a4a4a; }

.kurs-aktion { margin-top: 1.6em; }

/* Auf schmalen Bildschirmen wird die Tabelle zur Liste */
@media (max-width: 42rem) {
  .termine thead { display: none; }
  .termine, .termine tbody, .termine tr, .termine td { display: block; width: 100%; }
  .termine tr {
    padding: 0.8em 0;
    border-bottom: 1px solid var(--farbe-linie);
  }
  .termine td { border: 0; padding: 0.15em 0.9em; }
  .termine td:first-child { font-weight: 600; }
  .termine td:empty { display: none; }
}

/* ----------------------------------------------------------- Neuigkeiten */

.beitragsliste {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: var(--luft-block);
}
.beitrag-teaser {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--farbe-linie);
  max-width: var(--breite-text);
}
.beitrag-teaser:last-child { border-bottom: 0; }
.beitrag-teaser h2 { font-size: var(--gr-h3); margin-bottom: 0.3em; }
.beitrag-teaser h2 a { color: inherit; text-decoration: none; }
.beitrag-teaser h2 a:hover { color: var(--farbe-akzent-dunkel); }

.beitrag-datum {
  margin-bottom: 0.35em;
  font-size: var(--gr-klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}
.weiterlesen { font-weight: 600; }
.zurueck { margin-top: 2.5em; }

/* ------------------------------------------------------------- Fusszeile */

.fuss {
  background: var(--farbe-fuss);
  color: var(--farbe-fuss-text);
}
.fuss a { color: var(--farbe-fuss-text); }
.fuss a:hover { color: #fff; }

.fuss-innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.fuss-logo { width: auto; height: 5rem; margin-bottom: 1rem; }
.fuss-name { line-height: 1.5; }
.fuss-titel {
  margin-bottom: 0.9em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}
.fuss address { font-style: normal; line-height: 1.9; }

.fuss-nav { margin: 0; padding: 0; list-style: none; line-height: 1.95; }
.fuss-nav a { text-decoration: none; }
.fuss-nav a:hover { text-decoration: underline; }

.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
}
.instagram-link:hover span { text-decoration: underline; }

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(246, 243, 239, 0.16);
  font-size: var(--gr-klein);
  opacity: 0.8;
}
.fuss-zeile p { margin: 0; }

/* ------------------------------------------------------------ Druckstil */

@media print {
  .kopf, .fuss, .sprunglink, .hinweisband, .kachel-mehr { display: none; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ------------------------------------------- Platzhalter fuer fehlende Bilder
   Verschwindet automatisch, sobald die echte Datei in public/bilder/ liegt. */

.bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, var(--farbe-flaeche-akzent) 0 10px, var(--farbe-flaeche-warm) 10px 20px);
  color: var(--farbe-text-leise);
  font-size: var(--gr-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.titelbereich-bild .bild-platzhalter { aspect-ratio: auto; height: 100%; border-radius: 0; }
.kachel-bild .bild-platzhalter { border-radius: 0; }
.inhalt-bild .bild-platzhalter { aspect-ratio: 3 / 4; }
.kurs-logo.bild-platzhalter { width: 8rem; aspect-ratio: 3 / 1; min-height: 0; }

.beitrag-bild { margin: 0 0 2em; max-width: var(--breite-text); }
.beitrag-bild img { width: 100%; border-radius: var(--radius-gross); }

.fuss-recht { display: flex; flex-wrap: wrap; gap: 0.4em 0.6em; }

/* --------------------------------------------------------- Abschlussband
   Bild mit Einladung darauf. Original: Seite "zu meiner Person". */

.band { position: relative; }
.band-bild { width: 100%; height: clamp(15rem, 40vh, 26rem); overflow: hidden; }
.band-bild img,
.band-bild .bild-platzhalter {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;   /* Datei ist schon auf den Streifen zugeschnitten */
}
.band-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--farbe-ueberlagerung) 62%, transparent);
}
.band-text {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--farbe-hell);
}
.band-text p { margin: 0; font-size: var(--gr-gross); }
.band-mail { margin-top: 0.4em !important; font-weight: 700; }
.band-text a { color: var(--farbe-hell); }
.band-text a:hover { color: #fff; }

/* ------------------------------------------------------ Zustimmungsleiste
   Erscheint nur, wenn in site.yml eine Tag-Manager-Kennung eingetragen ist.
   Sitzt unten und verdeckt den Inhalt nicht -- eine Leiste, die die ganze
   Seite blockiert, drueckt Besucher zur Zustimmung und ist damit angreifbar. */

.zustimmung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--farbe-flaeche);
  border-top: 3px solid var(--farbe-ueberlagerung);
  box-shadow: 0 -4px 24px rgba(61, 58, 54, 0.14);
}
.zustimmung[hidden] { display: none; }

.zustimmung-inhalt {
  max-width: var(--breite-max);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.6rem) var(--rand);
  display: grid;
  gap: 0.35rem 2rem;
}
@media (min-width: 52rem) {
  .zustimmung-inhalt {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .zustimmung-titel { grid-column: 1; }
  .zustimmung-text  { grid-column: 1; }
  .zustimmung-mehr  { grid-column: 1; }
  .zustimmung-knoepfe { grid-column: 2; grid-row: 1 / 4; }
}

.zustimmung-titel { font-size: 1.15rem; margin: 0; }
.zustimmung-text {
  margin: 0;
  font-size: 0.975rem;
  color: var(--farbe-text-voll);
  max-width: 68ch;
}
.zustimmung-mehr { margin: 0; font-size: var(--gr-klein); }

.zustimmung-knoepfe {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0.5rem 0 0;
}
@media (min-width: 52rem) {
  .zustimmung-knoepfe { flex-direction: column; margin: 0; }
}
.zustimmung-knoepfe .knopf {
  font: inherit; font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--farbe-akzent);
  white-space: nowrap;
  text-align: center;
}
/* Ablehnen ist gleich gross und gleich gut lesbar, nur ohne Fuellung */
.knopf-leise {
  background: transparent;
  color: var(--farbe-text-voll);
}
.knopf-leise:hover { background: var(--farbe-flaeche-warm); color: var(--farbe-text-voll); }