/*
  Gemeinsames Aussehen für Impressum und Datenschutz im Netz.

  Bewusst eine eigene Datei statt Tailwind: Diese beiden Seiten müssen auch
  dann noch stehen, wenn die App längst umgebaut ist. Kein Build, keine
  Abhängigkeit, keine Schriftart von fremden Servern — Google Fonts wäre hier
  ausgerechnet auf der Datenschutzseite ein Eigentor.
*/

:root {
  --blau: #1749bd;
  --tinte: #0f172a;
  --text: #475569;
  --leise: #94a3b8;
  --linie: #e2e8f0;
  --grund: #f8fafc;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

.kopf {
  background: var(--blau);
  color: #fff;
  /*
    `env(safe-area-inset-top)` fuer die Kamerainsel.

    Diese Seiten laufen auch im Standalone-Fenster der Web-App (Manifest:
    display standalone) — dort gibt es keine Browserleiste, und ohne diesen
    Rand sass die Ueberschrift unter der Kamera. In einem normalen Browser
    ist env() null, der Abstand bleibt wie er war.
  */
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px 32px;
}

/*
  Die Marke ist der Weg zurueck.

  Vorher war sie ein Absatz. Wer ueber einen Link aus der App oder aus einer
  Mail auf dem Impressum landete, kam von dort nirgends mehr hin — ausser ueber
  den Zurueck-Knopf des Browsers, und der hilft nicht, wenn die Seite in einem
  neuen Fenster aufgegangen ist.

  `inline-block`, damit der Klickbereich so breit ist wie das Wort und nicht
  wie die ganze Zeile. Ein unsichtbarer Link neben dem Text ist eine Falle.
*/
.kopf .marke {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 8px;
  color: inherit;
  text-decoration: none;
}

.kopf .marke:hover,
.kopf .marke:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.kopf h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.blatt {
  max-width: 44rem;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.vorwort {
  margin: 0 0 24px;
  color: var(--text);
}

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
}

.karte h2 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}

.karte p { margin: 0 0 12px; }
.karte p:last-child { margin-bottom: 0; }

strong { color: var(--tinte); font-weight: 700; }

a { color: var(--blau); font-weight: 600; }

/* Der Datenschutz klappt auf — ohne eine Zeile JavaScript. */
details {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

summary {
  padding: 16px 22px;
  font-weight: 700;
  color: var(--tinte);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--leise);
  border-bottom: 2px solid var(--leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}

details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

details > div { padding: 0 22px 20px; }
details p { margin: 0 0 12px; }
details p:last-child { margin-bottom: 0; }

.hinweiskasten {
  background: rgba(23, 73, 189, 0.05);
  border-left: 3px solid var(--blau);
  border-radius: 10px;
  padding: 12px 16px;
}

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 32px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--leise);
}

.stand { margin-left: auto; font-weight: 500; }

@media (max-width: 480px) {
  .kopf { padding: 32px 20px 26px; }
  .kopf h1 { font-size: 25px; }
  .blatt { padding: 22px 18px 48px; }
  .karte, summary { padding-left: 18px; padding-right: 18px; }
  details > div { padding-left: 18px; padding-right: 18px; }
  .stand { margin-left: 0; width: 100%; }
}