/* Dieselben Schriftdateien wie die Landingpage, lokal ausgeliefert.
   Kein Aufruf bei Google, siehe Kommentar in der index.html. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/schriften/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/schriften/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/schriften/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/schriften/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/schriften/quicksand-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/schriften/quicksand-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Gemeinsamer Stil fuer Impressum und Datenschutzerklaerung.
   Bewusst karg: eine Lesespalte, kein Menue, kein Weg auf die
   uebrige Website. Wer hier landet, soll den Text lesen und
   danach zurueck zur Landingpage, sonst nirgendwohin.
   Schriften und Farben kommen aus derselben Quelle wie die
   Landingpage, damit es nicht nach fremder Seite aussieht.
   ============================================================ */

:root {
  --offwhite:   #f9f8f6;
  --anthrazit:  #2b2d2f;
  --salbei:     #8fa493;
  --salbei-tief:#5f7566;
  --linie:      color-mix(in srgb, var(--salbei) 34%, var(--offwhite));
  --text-leise: color-mix(in srgb, var(--anthrazit) 82%, var(--offwhite));
  --text-still: color-mix(in srgb, var(--anthrazit) 66%, var(--offwhite));
  --display: "Quicksand", "Trebuchet MS", sans-serif;
  --text:    "Poppins", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--anthrazit);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.kopf {
  border-bottom: 1px solid var(--linie);
  padding: 20px;
}
.kopf img { height: 44px; width: auto; display: block; }
.innen { max-width: 720px; margin: 0 auto; padding: 0 20px; }

main { padding: 44px 0 20px; }

h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 40px 0 10px;
}
h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  margin: 24px 0 6px;
}
p { margin: 0 0 14px; color: var(--text-leise); }
ul { margin: 0 0 14px; padding-left: 1.2em; color: var(--text-leise); }
li { margin-bottom: 6px; }
b, strong { color: var(--anthrazit); font-weight: 600; }

.stand {
  font-size: 0.9rem;
  color: var(--text-still);
  margin-bottom: 30px;
}
.anschrift {
  margin: 0 0 18px;
  line-height: 1.6;
  color: var(--anthrazit);
}

a { color: var(--salbei-tief); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--salbei-tief); outline-offset: 3px; border-radius: 3px; }

.zurueck {
  display: inline-block;
  margin: 40px 0 0;
  padding: 13px 24px;
  min-height: 48px;
  background: var(--anthrazit);
  color: var(--offwhite);
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 50px;
  padding: 26px 0 50px;
  font-size: 0.88rem;
  color: var(--text-still);
}

/* ============================================================
   Handy. Alles mittig, auch die Fliesstextabsaetze. Janines
   Entscheidung vom 07.09.2026. Ich hatte die langen Absaetze
   zuerst linksbuendig gelassen, weil zentrierter Fliesstext das
   Auge den Zeilenanfang suchen laesst. Sie will es einheitlich,
   und einheitlich schlaegt hier die Lesbarkeitsregel.
   ============================================================ */
@media (max-width: 699px) {
  .kopf { text-align: center; }
  .kopf img { margin: 0 auto; }
  body, main, h1, h2, h3, p, ul, li, .stand, .anschrift, .fuss { text-align: center; }
  ul { padding-left: 0; list-style-position: inside; }
  .zurueck { display: block; margin-left: auto; margin-right: auto; max-width: 18rem; }
}

/* Ein feiner Strich in Salbei ueber jeder Zwischenueberschrift, damit die
   Seite nicht wie eine Textwueste wirkt. Derselbe Gedanke wie auf der
   Landingpage, nur sparsamer. */
h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--salbei);
  margin-bottom: 10px;
}
@media (max-width: 699px) {
  h2::before { margin-left: auto; margin-right: auto; }
}