/* Dieselben Gestaltungsmarken wie in der App, siehe app/src/lib/tokens.css. */
:root {
  --bg: #0a0b0d; --flaeche: #101317; --linie: #1e2126; --linie-stark: #2b3038;
  --text: #e8eaed; --text-matt: #b9bfc7; --text-still: #858c95;
  --akzent: oklch(0.50 0.19 25); --akzent-grafik: oklch(0.62 0.20 25);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px; line-height: 1.7;
}
.kopf { border-bottom: 1px solid var(--linie); }
.marke {
  display: flex; align-items: center; gap: 10px;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  color: var(--text); text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
}
.marke b { color: var(--akzent-grafik); font-weight: 700; }
.marke img { border-radius: 22.5%; }
main { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
h1 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(34px, 7vw, 52px);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0 0 14px; line-height: 1.05; text-wrap: balance;
}
h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; margin: 34px 0 10px;
}
p { margin: 0 0 12px; color: var(--text-matt); }
/* Nur in den Rechtstexten: Dort steht die Anschrift mit Zeilenumbruechen im Text.
   Global gesetzt wuerde die Regel jeden Quelltextumbruch mit ausgeben. */
section.recht p { white-space: pre-line; }
a { color: var(--akzent-grafik); }
.vorspann { font-size: 17px; color: var(--text-matt); max-width: 54ch; }
.laeden { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 8px; }
.laden {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--linie-stark); color: var(--text-still);
  font-family: 'Barlow Condensed', sans-serif; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.hinweis { font-size: 12px; color: var(--text-still); }
.karten { display: grid; gap: 1px; background: var(--linie); margin: 40px 0 0; }
@media (min-width: 620px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte { background: var(--bg); padding: 22px 20px; }
.karte h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px;
}
.karte p { font-size: 13px; margin: 0; }
.zahl {
  font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 700;
  color: var(--akzent-grafik); line-height: 1;
}
section.recht { border-top: 1px solid var(--linie); padding-top: 4px; }
.stand { font-size: 12px; color: var(--text-still); margin-top: 26px; }
footer { border-top: 1px solid var(--linie); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer > * { max-width: 760px; margin: 0 auto; padding: 0 20px; }
footer nav { padding-top: 22px; }
footer p { font-size: 12px; color: var(--text-still); padding-bottom: 26px; padding-top: 10px; }
footer a { color: var(--text-still); }