/* Öffentliche Seiten kustodio.de (Startseite, Impressum, Datenschutz).
   Zwei Erscheinungsbilder aus /marke/tokens.css:
   html[data-marke="kustodio"]  Kustodio "Fassade" (Nachtblau, Kalk, Licht; KD DIN) – kustodio.de
   html[data-marke="kd"]        kayser design "Praezision" (Graphit, Papier, Messing) – das Cockpit
                                liefert impressum.html/datenschutz.html mit diesem Wert aus (server.js). */
:root { color-scheme: light; }
html[data-marke="kustodio"] {
  --s-grund: var(--ku-kalk); --s-text: var(--ku-text); --s-leise: var(--ku-text-leise);
  --s-band: var(--ku-nacht); --s-band-linie: var(--ku-licht); --s-linie: var(--ku-linie);
  --s-fokus: var(--ku-fokus); --s-verweis: var(--ku-fokus);
  --s-kopf: var(--ku-schrift); --s-schrift: var(--ku-schrift);
}
html[data-marke="kd"] {
  --s-grund: var(--kd-papier); --s-text: var(--kd-text); --s-leise: var(--kd-text-leise);
  --s-band: var(--kd-graphit); --s-band-linie: var(--kd-messing); --s-linie: var(--kd-linie);
  --s-fokus: var(--kd-fokus); --s-verweis: var(--kd-messing-text);
  --s-kopf: var(--kd-schrift-kopf); --s-schrift: var(--kd-schrift-text);
}
html[data-marke="kustodio"] .nur-kd, html[data-marke="kd"] .nur-kustodio { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--s-grund); color: var(--s-text);
  font-family: var(--s-schrift); font-size: 16px; line-height: 1.55; }
a { color: var(--s-verweis); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--s-fokus); outline-offset: 2px; }

.band { background: var(--s-band); border-bottom: 3px solid var(--s-band-linie); padding: 16px; }
.band .innen { max-width: 760px; margin: 0 auto; }
.band a { display: inline-block; }
.band a:focus-visible { outline-color: var(--s-band-linie); }
.band img { height: 34px; width: auto; display: block; }

main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--s-kopf); font-weight: 700; line-height: 1.2; }
h1 { font-size: 32px; margin: 0 0 24px; }
h2 { font-size: 21px; margin: 36px 0 10px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p, ul, address { margin: 0 0 12px; }
address { font-style: normal; }
ul { padding-left: 22px; }
li { margin-bottom: 4px; }
.stand { color: var(--s-leise); margin-top: 36px; }

footer { border-top: 1px solid var(--s-linie); padding: 16px; text-align: center; font-size: 14px; color: var(--s-leise); }
footer a { color: var(--s-leise); }

/* Startseite */
.start { flex: 1; display: grid; place-items: center; max-width: none; padding: 48px 16px; background: var(--ku-nacht); }
.start h1 { margin: 0; }
.start .innen { display: grid; gap: 28px; justify-items: center; text-align: center; }
.start img { width: min(420px, 80vw); height: auto; display: block; }
.start p { margin: 0; color: var(--ku-kalk); font-family: var(--ku-schrift); font-size: clamp(20px, 4.2vw, 28px); letter-spacing: .01em; }
.start p span { color: var(--ku-licht); }
html[data-marke="kustodio"] body.startseite footer { background: var(--ku-nacht); border-top-color: var(--ku-nacht-2); color: var(--ku-beton); }
html[data-marke="kustodio"] body.startseite footer a { color: var(--ku-kalk); }
html[data-marke="kustodio"] body.startseite footer a:focus-visible { outline-color: var(--ku-licht); }

@media (max-width: 520px) { h1 { font-size: 26px; } .band img { height: 28px; } }