/* Aus src/pages/datenschutz.astro uebernommen.
   Jede Regel ist auf `body.t-datenschutz main` eingegrenzt. Astro hat das CSS
   je Seite gekapselt, ein gemeinsames Stylesheet tut das nicht -- und das
   `main` haelt die Seitenregeln von Kopf, Fuss und Zustimmungsfenster fern,
   die ausserhalb stehen und eigene Klassen gleichen Namens haben. */
body.t-datenschutz main .kopf {
    padding-block: var(--a-5) var(--a-3);
  }
body.t-datenschutz main h1 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-2);
  }
body.t-datenschutz main .vorspann {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    max-width: 52ch;
  }
body.t-datenschutz main .warnung {
    background: #fdf3e3;
    border: 1px solid var(--messing);
    border-radius: var(--radius);
    padding: var(--a-2);
    font-size: var(--t-fein);
    max-width: 70ch;
  }
body.t-datenschutz main .text-raster {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--a-5);
    align-items: start;
    padding-block: var(--a-4) var(--a-6);
  }
body.t-datenschutz main .inhalt {
    position: sticky;
    top: calc(76px + var(--a-2));
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }
body.t-datenschutz main .inhalt a {
    text-decoration: none;
    font-size: var(--t-fein);
    color: var(--tinte-leise);
    padding: 0.3em 0 0.3em 0.75em;
    border-left: 2px solid var(--linie);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
body.t-datenschutz main .inhalt a:hover {
    color: var(--tinte);
    border-left-color: var(--rot);
  }
body.t-datenschutz main .text { max-width: 68ch; }
body.t-datenschutz main .text section { margin-bottom: var(--a-5); }
body.t-datenschutz main .text section:last-child { margin-bottom: 0; }
body.t-datenschutz main .text h2 {
    font-size: var(--t-mittel);
    margin-bottom: var(--a-2);
    /* Damit die Überschrift beim Sprung nicht unter der Kopfzeile klebt. */
    scroll-margin-top: calc(76px + var(--a-3));
  }
body.t-datenschutz main .text p:not(.marke) { color: var(--tinte-leise); }
body.t-datenschutz main .text ul {
    color: var(--tinte-leise);
    padding-left: 1.1em;
    margin: 0 0 var(--a-2);
  }
body.t-datenschutz main .text li { margin-bottom: 0.4em; }
body.t-datenschutz main .text strong { color: var(--tinte); font-weight: 500; }
body.t-datenschutz main address {
    font-style: normal;
    color: var(--tinte-leise);
    border-left: 2px solid var(--messing);
    padding-left: var(--a-2);
    margin-bottom: var(--a-2);
    line-height: 1.8;
  }
@media (max-width: 860px) {
body.t-datenschutz main .text-raster {
      grid-template-columns: 1fr;
      gap: var(--a-3);
    }
body.t-datenschutz main .inhalt {
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.4em;
    }
body.t-datenschutz main .inhalt a {
      border-left: 0;
      border: 1px solid var(--linie);
      border-radius: 999px;
      padding: 0.35em 0.9em;
    }
body.t-datenschutz main .text { max-width: none; }
}

/* --- Eine linke Kante ----------------------------------------------
   Textbloecke waren schmaler UND zentriert; damit hingen sie mit
   ueber 160 px Einzug neben Bildern und Logo in der Luft. Jetzt sind
   sie normale Bahnen wie alles andere. Die Lesebreite haelt der Text
   selbst (.vorspann in ch, oder var(--breite-text) auf den Kindern),
   nicht mehr der Block. Entschieden mit der Inhaberin. */