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

/* ============================================================
   DRUCK-KALKULATOR
   Links die Eingaben, rechts das Ergebnis. Auf schmalen
   Bildschirmen untereinander.
   ============================================================ */
.kalkulator {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  margin-top: 1.5rem;
  padding: 1.5rem;
}
.kalkulator__raster {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 720px) {
  .kalkulator__raster { grid-template-columns: 1fr 1fr; }
}
.kalkulator__feld { display: block; margin-bottom: 1rem; }
.kalkulator .feldname {
  color: var(--wp--preset--color--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.kalkulator__eingabe {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
}
.kalkulator input[type="number"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--input-border);
  border-radius: 0;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0;
  width: 100%;
}
.kalkulator input:focus-visible {
  outline: 2px solid var(--wp--preset--color--focus);
  outline-offset: 2px;
}
.kalkulator__einheit {
  color: var(--wp--preset--color--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.kalkulator__zuruecksetzen {
  background: none;
  border: 1px solid var(--wp--preset--color--input-border);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.9rem;
}
.kalkulator__zuruecksetzen:hover { background: var(--wp--preset--color--line); }
.kalkulator__liste { margin: 0; }
.kalkulator__zeile {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.45rem 0;
}
.kalkulator__zeile dt { color: var(--wp--preset--color--muted); margin: 0; }
.kalkulator__zeile dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}
.kalkulator__zeile--summe {
  border-top: 1px solid var(--wp--preset--color--line);
  margin-top: 0.45rem;
  padding-top: 0.8rem;
}
.kalkulator__zeile--gesamt {
  border-top: 1px solid var(--wp--preset--color--input-border);
  font-weight: 600;
  margin-top: 0.45rem;
  padding-top: 0.8rem;
}
.kalkulator__fussnote {
  color: var(--wp--preset--color--muted);
  font-size: 0.8rem;
  margin: 1.25rem 0 0;
}

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