:root {
  --marke: #0b2345;       /* Wagon-Blau */
  --akzent: #0b2345;
  --text: #1d232a;
  --grau: #5b6672;
  --hell: #f3f5f7;
  --linie: #d9dee3;
  --bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --akzent: #7fb2e0; --text: #e8ecf0; --grau: #a3adb8; --hell: #1b2127; --linie: #333d46; --bg: #12171c; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--akzent); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }

/* Header bleibt auch im Dark Mode weiß, damit das blaue Logo lesbar bleibt */
header { border-bottom: 4px solid var(--marke); background: #fff; }
header .wrap { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: clamp(150px, 28vw, 210px); height: auto; }

.hero { padding: 3.5rem 0 2.5rem; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 40em; }

.kontakt {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 2rem 0 3rem;
}
.karte { background: var(--hell); border: 1px solid var(--linie); border-radius: 6px; padding: 1.2rem 1.3rem; }
.karte h2 { font-size: 1rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.karte p, .karte address { margin: 0; }

.en { border-top: 1px solid var(--linie); padding: 1.5rem 0 2.5rem; color: var(--grau); font-size: .95rem; }

.recht { padding: 2.5rem 0 3.5rem; }
.recht h1 { font-size: 1.9rem; }
.recht h2 { font-size: 1.1rem; margin: 1.8rem 0 .4rem; }
.recht p, .recht ul { margin: .4rem 0 .9rem; }
.recht ul { padding-left: 1.2rem; }
.zurueck { display: inline-block; margin-bottom: 1.2rem; }
address { font-style: normal; }

footer { background: var(--hell); border-top: 1px solid var(--linie); font-size: .95rem; }
footer .wrap { padding-top: 1.2rem; padding-bottom: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
footer nav a { margin-right: 1.2rem; }