/*
  OpenPlass – Webseite. Farben und Schrift wie in der App (lib/theme.ts).
  Die Schrift liegt hier auf der Seite selbst: Von Google geladen, ginge bei
  jedem Besuch die IP-Adresse an Google – genau das soll die Seite nicht.
*/

@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(/schrift/Manrope_400Regular.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(/schrift/Manrope_500Medium.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/schrift/Manrope_700Bold.ttf) format('truetype'); }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(/schrift/Manrope_800ExtraBold.ttf) format('truetype'); }

:root {
  color-scheme: light dark;
  --grund: #E3EDF9;
  --karte: #FFFFFF;
  --rand: #C8DAEE;
  --text: #16202B;
  --mittel: #3A4A5C;
  --leise: #5B6B7C;
  --marke: #1B3A5C;
  --gold: #B8862B;
  --pille: #C8DAEE;
  --pille-text: #1B3A5C;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1D2C3E;
    --karte: #0D141D;
    --rand: #33465E;
    --text: #E8EDF3;
    --mittel: #C3CFDB;
    --leise: #9AAABA;
    --marke: #E3EDF9;
    --gold: #E0B457;
    --pille: #0D141D;
    --pille-text: #E0B457;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marke); }

.logo { color: var(--marke); display: block; }
.logo .frei { stroke: var(--gold); }

/* Kopf und Fuss */
.kopf { max-width: 680px; margin: 0 auto; padding: 20px 20px 0; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marke); }
.marke .logo { width: 28px; height: 28px; }
.marke span { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; }

.fuss {
  max-width: 680px;
  margin: 48px auto 0;
  padding: 16px 20px 40px;
  border-top: 1px solid var(--rand);
  font-size: 13px;
  color: var(--leise);
  text-align: center;
  line-height: 2;
}
.fuss a { color: var(--leise); text-decoration: none; white-space: nowrap; }
.fuss a:hover { color: var(--text); text-decoration: underline; }

/* Startseite */
.start { max-width: 560px; margin: 0 auto; padding: 32px 20px 0; text-align: center; }
.start .gross .logo { width: 132px; height: 132px; margin: 16px auto 0; }
.start h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.2; font-weight: 800; letter-spacing: -0.4px; margin: 28px 0 12px; }
.einleitung { font-size: 17px; color: var(--mittel); margin: 0 auto; max-width: 460px; }
.pille {
  display: inline-block;
  margin: 22px 0 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--pille);
  color: var(--pille-text);
  border: 1px solid var(--rand);
  font-size: 13px;
  font-weight: 700;
}
.kaesten { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kaesten li { background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; padding: 16px 10px; }
.kaesten strong { display: block; font-size: 15px; font-weight: 700; }
.kaesten span { display: block; font-size: 13px; color: var(--leise); margin-top: 4px; line-height: 1.4; }
@media (max-width: 480px) {
  .kaesten { grid-template-columns: 1fr; }
}
.kontakt { margin: 36px 0 0; color: var(--mittel); font-size: 15px; }
.kontakt a { font-weight: 700; }

/* Textseiten (Datenschutz, Impressum …) */
.text { max-width: 680px; margin: 0 auto; padding: 24px 20px 0; }
.text h1 { font-size: 30px; line-height: 1.2; font-weight: 800; margin: 16px 0 8px; }
.text h2 { font-size: 18px; font-weight: 700; margin: 32px 0 6px; }
.text p { margin: 10px 0 0; color: var(--mittel); }
.text strong { color: var(--text); font-weight: 700; }