/* Theme aller Sites; Farben, Regeln und Kontraste: design/design.md */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Tokens: hell als Vorgabe, dunkel ueber die Systemeinstellung */
:root {
  color-scheme: light dark;
  --navy: #1E3158;
  --gruen: #47B48C;
  --text: var(--navy);
  --ground: #fff;
  --surface: #f1f5f4;
  --primary: color-mix(in srgb, var(--gruen) 66%, #000);
  --on-primary: #fff;
  --on-band: #fff;
  --muted: color-mix(in srgb, var(--text) 70%, var(--ground));
  --linie: color-mix(in srgb, var(--text) 16%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #e2e8f0;
    --ground: #121212;
    --surface: #1e2225;
    --primary: var(--gruen);
    --on-primary: #121212;
    --on-band: #e2e8f0;
  }
}

/* Grundlage */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.15; font-weight: 700; }
h1 { font-size: 2rem; margin: 0 0 24px; }
h2 { font-size: 1.25rem; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 24px 0 8px; }
h1 + h2 { margin-top: 0; }
p, ul, ol { margin: 0 0 16px; max-width: 65ch; }

a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Firmenname bricht nicht um, ausser wenn der Platz fehlt */
.firma { white-space: nowrap; }

/* Kopf */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--linie);
}
.logo { display: block; height: 40px; width: auto; }
.logo-wort { fill: var(--text); }
.logo-punkt { fill: var(--gruen); }
.domain { color: var(--muted); font-size: 0.875rem; }

/* Inhalt */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  padding: 48px 32px;
}

/* Platzhalter: Satz zur Zugehoerigkeit, Absatz, zwei Knoepfe; senkrecht in der Mitte */
.platzhalter { margin-block: auto; }
.platzhalter p:last-child { margin-bottom: 0; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 2px solid var(--primary);
  border-radius: .3rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
}
.knopf.zweit { background: transparent; color: var(--primary); }

/* Fuss als Navy-Band, in beiden Modi */
.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px 32px;
  background: var(--navy);
  color: var(--on-band);
  font-size: 0.875rem;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { display: inline-flex; align-items: center; min-height: 24px; color: var(--on-band); }
.fuss a:focus-visible { outline-color: var(--gruen); }

/* Schmale Bildschirme */
@media (max-width: 40rem) {
  .kopf, main, .fuss { padding-inline: 16px; }
  .logo { height: 32px; }
  h1 { font-size: 1.625rem; }
}

@media (max-width: 30rem) {
  .firma { white-space: normal; }
}