/* ============================================================
   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 Server-Kachel mit dem
   farbigen Statuspunkt. 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 dunklen UND in der hellen Fassung.
   Feste Farbwerte (#rrggbb) gehören NICHT in diese Datei.

   ⚠️ Diese Datei ist CSS. CSS kennt keine Kommentare INNERHALB
   eines Wertes. Erklärungen stehen deshalb immer über der Regel,
   nie hinter dem Wert — sonst verwirft der Browser die ganze
   Zeile (so geschehen in theme.json, 10 Tage lang unbemerkt).
   ============================================================ */

/* ---- Überzeile ------------------------------------------------
   Die kleine, gesperrte Zeile über einer Überschrift
   ("LIVE & ARCHIV"). In der alten Fassung hieß sie „eyebrow" und
   lief — anders als bei den Schwester-Seiten — auf der
   Schreibmaschinenschrift und in der Akzentfarbe.               */
.ueberzeile {
  color: var(--wp--preset--color--accent-text);
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  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 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--accent-text);
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.78rem;
  left: 0;
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin: 0;
  padding: 0 0.5rem 0 0;
  position: absolute;
  text-transform: uppercase;
  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; }

/* ---- Server-Kachel --------------------------------------------
   Wie die Karte, zusätzlich mit Statuspunkt und Angabenliste.
   Der Punkt trägt die Farbe des Zustands; damit die Aussage
   nicht ALLEIN an der Farbe hängt (Farbfehlsichtigkeit), steht
   der Zustand immer auch als Wort daneben.                      */
.server-kachel {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  padding: 1.5rem;
}
.server-kachel > *:first-child { margin-top: 0; }
.server-kachel > *:last-child  { margin-bottom: 0; }
.server-kachel__kopf {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.server-kachel__titel {
  font-size: var(--wp--preset--font-size--h-3);
  margin: 0;
}
.zustand {
  align-items: center;
  color: var(--wp--preset--color--muted);
  display: inline-flex;
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.72rem;
  gap: 0.45em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.zustand::before {
  background: var(--wp--preset--color--muted);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.6rem;
  width: 0.6rem;
}
.zustand--online::before     { background: var(--wp--preset--color--accent); }
.zustand--pausiert::before   { background: var(--wp--preset--color--status-offline); }
.zustand--archiv::before     { background: var(--wp--preset--color--status-archive); }
.zustand--anfrage::before    { background: var(--wp--preset--color--status-experiment); }

/* ---- Weiterführender Verweis ----------------------------------
   Ein Textlink mit Pfeil, wie am Ende der Abschnitte.            */
.weiter {
  display: inline-flex;
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.85rem;
  gap: 0.35em;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
.weiter:hover {
  text-decoration: underline;
}

/* ---- Hinweiskasten --------------------------------------------
   Für Sätze, die der Besucher nicht überlesen soll — etwa
   „hier läuft gerade kein Server".

   Der Hintergrund wird aus der Akzentfarbe gemischt statt fest
   gesetzt. Nur so trägt er in der dunklen UND in der hellen
   Fassung; ein fester heller Ton wäre auf dem dunklen Grund
   dieser Seite ein Fremdkörper.                                  */
.hinweis {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
  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-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.angaben dd { margin: 0; }

/* ---- Lager-Protokoll -------------------------------------------
   Der kleine Kasten rechts neben der Hero-Überschrift, der wie
   ein Terminalfenster aussieht. Reine Zierde — deshalb wird er
   Vorlesegeräten per aria-hidden im Markup entzogen.             */
.protokoll {
  color: var(--wp--preset--color--muted);
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.8;
  margin: 0;
  white-space: pre;
}
.protokoll__kopf { color: var(--wp--preset--color--accent-text); }

/* ---- 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-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  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--accent);
  border: 0;
  border-radius: 6px;
  color: var(--wp--preset--color--paper);
  cursor: pointer;
  font: inherit;
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.8rem 1.25rem;
  text-transform: uppercase;
}
.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); }
/* Die Fehlerfarbe muss in BEIDEN Ansichten lesbar sein. contact-error ist
   ein heller Ton fuer dunklen Grund und kam auf hellem Papier nur auf
   2,55:1 (noetig sind 4,5:1, gemessen 28.08.2026). Deshalb je Ansicht
   ein eigener Ton. */
.kontaktformular__meldung[data-art="fehler"] { color: var(--wp--preset--color--contact-error); }
:root[data-theme="light"] .kontaktformular__meldung[data-art="fehler"] { color: var(--wp--preset--color--accent-strong); }

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