/* Gemeinsamer Stil der Textunterseiten (Impressum, Datenschutz, 404).
   Vorher trug jede der drei Seiten denselben Style-Block als Kopie -- eine Palette-Aenderung
   musste dreimal von Hand nachgezogen werden. Jetzt eine Datei, drei <link>.
   Die index.html bleibt bewusst Single-File: sie ist das Schaustueck und soll ohne
   zweiten Request stehen. Tokens hier sind mit dem Kopf der index.html identisch.

   PALETTE 2026-08-06 auf „Der Atlas" umgestellt: Bogenpapier statt Kalk, Oxblood als
   Fliesstextfarbe statt Grau, und KEINE Akzentfarbe. Links tragen deshalb einen
   Unterstrich statt einer eigenen Farbe -- auf einer Seite, deren Fliesstext selbst
   ein Buntton ist, waere Farbe allein kein erkennbares Merkmal (WCAG 1.4.1). */

/* Alle vier Schriften sind auf den deutschen Zeichensatz verkleinert
   (_src/schriften-verkleinern.py). Newsreader zusaetzlich auf wght 400 festgestellt,
   die opsz-Achse bleibt. Deshalb je EIN File, kein unicode-range-Paar mehr. */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/newsreader-roman-latin-de.woff2) format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/newsreader-italic-latin-de.woff2) format('woff2');
}
@font-face{
  font-family:'Supreme';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/Supreme-Variable-de.woff2) format('woff2');
}
@font-face{
  font-family:'B612 Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/b612-mono-400-de.woff2) format('woff2');
}

*{box-sizing:border-box}
:root{
  --papier:#eee8de; --tafel:#f7f3ec; --tinte:#3d201c; --tinte-tief:#24100e;
  --tinte-72:rgb(from var(--tinte) r g b / .72);
  --tinte-18:rgb(from var(--tinte) r g b / .18);
  --wrap-pad:clamp(1.25rem, 3.2vw, 2.5rem);
}
html{font-size:clamp(1rem, 0.7125rem + 0.4219vw, 1.375rem)}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:Supreme,ui-sans-serif,system-ui,sans-serif;line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
.wrap{max-width:46rem;margin:0 auto;padding-inline:var(--wrap-pad)}

/* Link ohne Akzentfarbe: der Unterstrich traegt die Erkennbarkeit. */
a{color:var(--tinte-tief);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--tinte-tief);outline-offset:3px;border-radius:1px}

header{background:var(--tinte-tief);color:var(--papier);padding-block:1.25rem}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
header a{color:var(--papier);text-decoration:none;font-size:.88rem;
  border-bottom:1px solid rgb(from var(--papier) r g b / .45);padding-bottom:2px;
  min-height:44px;display:inline-flex;align-items:center}
header a:hover{border-bottom-color:var(--papier)}
header a:focus-visible{outline-color:var(--papier)}

/* Dieselbe Wortmarke wie auf der Startseite, nur in der hellen Fassung fuer den
   dunklen Kopfbalken. Kein Bild, deshalb auch hier keine zweite Datei noetig. */
/* Eigene Achse: das `display:inline-flex` von `header a` (fuer das 44px-Tippziel)
   legt sonst Name und Zusatz NEBENEINANDER statt untereinander. */
.wortmarke{border-bottom:0;line-height:1;padding-bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.wortmarke b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:1.32rem;letter-spacing:-.02em;font-variation-settings:"opsz" 24}
.wortmarke span{display:block;font-family:'B612 Mono',ui-monospace,monospace;font-weight:400;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgb(from var(--papier) r g b / .72);margin-top:.3rem;white-space:nowrap}

h1,h2{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.018em;
  hyphens:manual;text-wrap:balance;color:var(--tinte-tief)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.05;margin:0 0 1.25rem;
  font-variation-settings:"opsz" 60}
h2{font-size:1.25rem;line-height:1.25;margin:2.25rem 0 .5rem;
  font-variation-settings:"opsz" 20}
p{margin:0 0 1rem;color:var(--tinte-72);text-wrap:pretty}
main{padding-block:2.75rem 4rem}

/* Der Demo-Hinweis steht ueber allem anderen und ist bewusst nicht wegzuklicken:
   die Seite darf nicht mit einer echten Praxis-Website verwechselt werden. */
.hinweis{background:var(--tafel);border:1px solid var(--tinte-18);
  border-left:.25rem solid var(--tinte-tief);border-radius:3px;
  padding:1rem 1.25rem;margin:0 0 2rem;color:var(--tinte);font-size:.95rem}
.hinweis b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:1.1rem;color:var(--tinte-tief);margin-bottom:.25rem}
.hinweis p{color:var(--tinte);margin:0}

.block{background:var(--tafel);border:1px solid var(--tinte-18);border-radius:3px;
  padding:1.125rem 1.25rem;margin:0 0 1rem}
.block p{color:var(--tinte);margin:0}

footer{border-top:1px solid var(--tinte-18);margin-top:3rem;padding-block:1.5rem 3rem;
  font-size:.85rem;color:var(--tinte-72)}
footer a{margin-inline:.25rem;min-height:44px;display:inline-flex;align-items:center}