/* ============================================================
   BAUSTEINE — die wiederkehrenden Muster der Seiten

   Wozu diese Datei da ist
   -----------------------
   Die frühere Fassung dieser Website hatte eine Handvoll
   Gestaltungsmuster, für die WordPress keinen fertigen Baustein
   mitbringt: die kleine Zeile über einer Überschrift, die Karten
   mit einer Nummer am oberen Rand, die dünne Trennlinie zwischen
   Abschnitten. Sie werden hier einmal beschrieben und in den
   Seiten nur noch über einen Klassennamen aufgerufen.

   Regel für Änderungen
   --------------------
   Farben IMMER über die Palette des Themes ansprechen
   (die --wp--preset--color--*-Werte). Nur so stimmt die
   Darstellung in der hellen UND in der dunklen Fassung.
   Feste Farbwerte (#rrggbb) gehören NICHT in diese Datei.
   ============================================================ */

/* ---- Überzeile ------------------------------------------------
   Die kleine, gesperrte Zeile über einer Überschrift
   ("WAS HIER ENTSTEHT"). In der alten Fassung hieß sie „eyebrow".  */
.ueberzeile {
  color: var(--wp--preset--color--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

/* ---- Abschnitt mit Linie darüber ------------------------------
   Trennt zwei Abschnitte einer Seite durch eine Haarlinie.        */
.abschnitt-linie {
  border-top: 1px solid var(--wp--preset--color--line);
}

/* ---- Karte ----------------------------------------------------
   Eine Karte ohne Rahmen: nur eine Linie oben, auf der die
   Nummer sitzt. Genau so sahen die Bereichs-Karten vorher aus.    */
.karte {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 1.75rem;
  position: relative;
}
.karte > *:first-child {
  margin-top: 0;
}
.karte__nummer {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  left: 0;
  line-height: 1.5;
  margin: 0;
  padding: 0 0.5rem 0 0;
  position: absolute;
  top: -0.8rem;
}
.karte__titel {
  font-size: var(--wp--preset--font-size--h-3);
  margin: 0 0 0.75rem;
}
.karte p {
  color: var(--wp--preset--color--muted);
  margin: 0;
}
.karte p + p { margin-top: 0.75rem; }

/* ---- Weiterführender Verweis ----------------------------------
   Ein Textlink mit Pfeil, wie am Ende der Abschnitte.             */
.weiter {
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 500;
  gap: 0.35em;
  text-decoration: none;
}
.weiter:hover {
  text-decoration: underline;
}

/* ---- Hinweiskasten --------------------------------------------
   Für Sätze, die der Besucher nicht überlesen soll — etwa
   „dieser Bereich ist noch im Aufbau".                            */
.hinweis {
  background: var(--wp--preset--color--sand);
  border-left: 3px solid var(--wp--preset--color--accent-strong);
  padding: 1rem 1.25rem;
}
.hinweis > *:first-child { margin-top: 0; }
.hinweis > *:last-child  { margin-bottom: 0; }

/* ---- Beschreibungsliste (Kontaktdaten u. Ä.) ------------------ */
.angaben {
  display: grid;
  gap: 0.5rem 2rem;
  margin: 1.5rem 0 0;
}
@media (min-width: 640px) {
  .angaben { grid-template-columns: 10rem 1fr; }
}
.angaben dt {
  color: var(--wp--preset--color--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.angaben dd { margin: 0; }

/* ---- Trennlinie ------------------------------------------------
   Der WordPress-Baustein „Trenner" in der Optik der alten Site.   */
.wp-block-separator.is-style-wide,
.wp-block-separator.duenn {
  background: none;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
  height: 1px;
  opacity: 1;
}

/* ============================================================
   KONTAKTFORMULAR
   Die Felder folgen der alten Fassung: keine Kästen, sondern
   eine Linie unter Name und E-Mail, ein umrandetes Feld für die
   Nachricht. Der Absende-Knopf ist gesperrt, solange der
   Spamschutz nicht durch ist — das ist Absicht, kein Fehler.
   ============================================================ */
.kontaktformular {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  max-width: 44rem;
}
.kontaktformular__zeile {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .kontaktformular__zeile { grid-template-columns: 1fr 1fr; }
}
.kontaktformular label { display: block; }
.kontaktformular .feldname {
  color: var(--wp--preset--color--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.kontaktformular input[type="text"],
.kontaktformular input[type="email"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--input-border);
  border-radius: 0;
  color: inherit;
  font: inherit;
  padding: 0.5rem 0;
  width: 100%;
}
.kontaktformular textarea {
  background: transparent;
  border: 1px solid var(--wp--preset--color--input-border);
  border-radius: 4px;
  color: inherit;
  font: inherit;
  padding: 0.75rem;
  resize: vertical;
  width: 100%;
}
.kontaktformular input:focus-visible,
.kontaktformular textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--focus);
  outline-offset: 2px;
}
/* Die Spam-Falle: für Menschen unsichtbar, für Bots verlockend. */
.kontaktformular__falle {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}
.kontaktformular__fuss {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.kontaktformular__knopf {
  background: var(--wp--preset--color--ink);
  border: 0;
  border-radius: 6px;
  color: var(--wp--preset--color--paper);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.8rem 1.25rem;
}
.kontaktformular__knopf:hover:not(:disabled) {
  background: var(--wp--preset--color--accent-strong);
}
.kontaktformular__knopf:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.kontaktformular__meldung {
  color: var(--wp--preset--color--muted);
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.5rem;
}
.kontaktformular__meldung[data-art="erfolg"] { color: var(--wp--preset--color--accent-text); }
.kontaktformular__meldung[data-art="fehler"] { color: var(--wp--preset--color--form-error, #b30018); }

/* ---- Fußzeile --------------------------------------------------
   Die Listen in der Fußzeile sind Navigation, keine Aufzählung —
   deshalb ohne Punkte und enger gesetzt.                          */
.fuss-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss-liste li + li { margin-top: 0.35rem; }
.fuss-liste a { text-decoration: none; }
.fuss-liste a:hover { text-decoration: underline; }
.seiten-fuss .wp-block-site-title a { text-decoration: none; }

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)

   Diese beiden Seiten wurden am 18.08.2026 als fertiges HTML aus
   der alten Fassung uebernommen. Sie tragen deshalb noch deren
   Klassennamen, die es in WordPress nicht mehr gibt — ohne die
   folgenden Regeln liefen sie randlos ueber die volle
   Bildschirmbreite. Der Text selbst bleibt unangetastet.
   ============================================================ */
.container-page {
  margin-inline: auto;
  width: min(100% - 2.5rem, 48rem);
}
.py-16 { padding-block: var(--wp--preset--spacing--10); }
.prose-like h2 { font-size: var(--wp--preset--font-size--h-2); margin-top: 2.5rem; }
.prose-like h3 { font-size: var(--wp--preset--font-size--h-3); margin-top: 2rem; }
.prose-like p,
.prose-like li { max-width: 68ch; }
.prose-like ul,
.prose-like ol { padding-left: 1.25rem; }
.prose-like li + li { margin-top: 0.35rem; }
.prose-like address { font-style: normal; }

/* Aktuelle Seite in der Navigation — die Markierung, die auch Vorlese-
   programme ueber aria-current bekommen, hier zusaetzlich sichtbar. */
.wp-block-navigation-item__content.ist-aktuelle-seite {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--accent, currentColor);
}

/* Rechtstexte (Impressum, Datenschutz): Ueberschrift wieder in Ueberschriftengroesse.
   Diese Seiten stammen aus der frueheren Fassung und bringen ein blankes <h1> ohne
   Klasse mit. Das Eltern-Theme setzt dafuer die Groesse "xx-large" — die gibt es in
   unserer Groessenliste nicht mehr, also fiel die Regel still weg und die Ueberschrift
   war so gross wie Fliesstext. Achtung: WordPress schreibt den Namen mit Bindestrich
   zwischen Buchstabe und Ziffer (h-1), nicht h1. */
.prose-like h1,
.entry-content > h1:not([class]),
main h1:not([class]) {
  font-size: var(--wp--preset--font-size--h-1);
  line-height: 1.15;
}

/* Fokusrahmen an Knoepfen: Das Eltern-Theme zeigt dafuer auf die Farbe
   "accent-4", die es in unserer Palette nicht gibt — die Regel fiel still weg
   und der Rahmen kam in der Standardfarbe des Browsers. Hier steht die
   Fokusfarbe dieses Themes. */
:where(.wp-element-button:focus, .wp-block-button__link:focus, button:focus-visible) {
  outline-color: var(--wp--preset--color--focus, var(--wp--preset--color--accent));
  outline-offset: 2px;
}