/* REM_DUNKEL_V1 — faerbt die Unterseiten auf die Gestaltung der Startseite um.
   Wird NACH style.css geladen und ueberschreibt nur die Wurzelwerte. So bleibt
   style.css unberuehrt und der Umbau laesst sich zuruecknehmen, indem man
   diese eine Zeile aus header.php entfernt.

   Die Schrift liegt im Haus. Google Fonts baut bei jedem Besucher eine
   Verbindung nach aussen auf, bevor er irgendetwas anklickt — bei einer Seite
   ueber Eigentum und Sicherheit ein schlechtes Bild. */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
}

:root{
  --bg:#000;
  --bg-card:#121315;
  --bg-warm:#0A0B0C;
  --bg-dark:#000;
  --text:#FFFFFF;
  --text-soft:#9BA0A6;
  --text-light:#6A7076;
  --line:#26282B;
  --accent:#B0D528;
  --accent-dark:#8EB01E;
  --serif:'Space Grotesk',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --sans:'Space Grotesk',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* Ueberschriften standen in Antiqua und mit kursiven Schnitten, die es in
   Space Grotesk nicht gibt — sie waeren schief gerechnet worden. */
h1,h2,h3,h4,h5,h6,.display{font-family:var(--sans);font-style:normal;
  letter-spacing:-.02em;font-weight:500}
em,i{font-style:normal;color:var(--accent)}
h1.display em,h2.display em,h3 em,.display em{font-style:normal;color:var(--accent)}

/* Flaechen, die auf hellem Grund gedacht waren */
.info-box,.card,.content-image,.page-banner{background:var(--bg-card);border-color:var(--line)}
.info-box{border:1px solid var(--line)}
.eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.lead{color:var(--text-soft)}
hr,.line{border-color:var(--line)}

/* Schaltflaechen wie auf der Startseite: kantig, Limette, dunkle Schrift */
.btn-primary{background:var(--accent);color:#0A0B0C;border-radius:2px;border:0}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary,.btn-outline{background:transparent;color:#FFF;border:1px solid var(--line);border-radius:2px}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-text{color:var(--accent)}

/* Formularfelder waren weiss auf weiss gedacht */
input,textarea,select{background:#0F1113;color:#FFF;border:1px solid var(--line);border-radius:2px}
input::placeholder,textarea::placeholder{color:var(--text-light)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent)}
label{color:var(--text-soft)}

/* Tabellen */
table{border-color:var(--line)}
th{color:var(--text-soft);border-bottom-color:var(--line)}
td{border-bottom-color:var(--line)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}