/* ---------------------------------------------------------------------
   Der Servicebereich.

   Eigenes Bild, nicht das von mandio: dort ist der Ton kuehl und die
   Flaeche dicht, weil dort mit Listen gearbeitet wird. Hier wird
   gelesen. Also mehr Luft, weichere Kanten, waermerer Ton.

   Die Farben stehen als Tokens oben und werden fuer den Dunkelmodus
   noch einmal gesetzt. Jede Flaeche bekommt eine eigene Hintergrundfarbe,
   damit nichts von den Voreinstellungen des Browsers abhaengt.
   --------------------------------------------------------------------- */

:root {
  --grund:      #f7f6f3;
  --flaeche:    #ffffff;
  --linie:      #e3e0d9;
  --schrift:    #23211d;
  --gedaempft:  #6c675e;
  --ton:        #1f6f5c;
  --ton-weich:  #e8f1ee;
  --warnung:    #9a3412;
  --warn-weich: #fdf0e8;
  --radius:     10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:      #16181a;
    --flaeche:    #1e2124;
    --linie:      #31363b;
    --schrift:    #e9e7e2;
    --gedaempft:  #a5a099;
    --ton:        #5fc3a7;
    --ton-weich:  #1b2e2a;
    --warnung:    #f0a179;
    --warn-weich: #2e211b;
  }
}
:root[data-theme="dark"] {
  --grund:      #16181a;
  --flaeche:    #1e2124;
  --linie:      #31363b;
  --schrift:    #e9e7e2;
  --gedaempft:  #a5a099;
  --ton:        #5fc3a7;
  --ton-weich:  #1b2e2a;
  --warnung:    #f0a179;
  --warn-weich: #2e211b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------- Kopf */

.kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--schrift);
  font-size: 1.05rem; letter-spacing: .01em;
}
.marke-punkt {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ton);
  box-shadow: 0 0 0 4px var(--ton-weich);
}
.marke-text strong { font-weight: 650; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.wer { color: var(--gedaempft); font-size: .9rem; }

/* ----------------------------------------------------------- Inhalt */

.wrap {
  max-width: 54rem;
  margin: 0 auto;
  padding: 28px 16px 64px;
}
.seiten-kopf { margin: 0 0 22px; }
.seiten-kopf h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 640;
  letter-spacing: -.01em;
}
.unterzeile { margin: 6px 0 0; color: var(--gedaempft); }

.leise { color: var(--gedaempft); font-size: .92rem; }
.fehlt { color: var(--gedaempft); }

a { color: var(--ton); }
a:hover { text-decoration: none; }

/* ----------------------------------------------------------- Tafeln */

.tafel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
}
.tafel.schmal { max-width: 34rem; }
.tafel p:first-child { margin-top: 0; }
.tafel p:last-child  { margin-bottom: 0; }

/* --------------------------------------------------------- Kacheln */

.kacheln {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kachel {
  display: block;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
a.kachel:hover { border-color: var(--ton); }
.kachel h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 620; }
.kachel p  { margin: 0 0 8px; }
.kachel p:last-child { margin-bottom: 0; }
.kachel.leer { opacity: .85; }

/* ---------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--ton);
  background: var(--ton);
  color: #fff;
  font: inherit; font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
}
:root[data-theme="dark"] .knopf,
:root:not([data-theme="light"]) .knopf { color: #10201c; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .knopf { color: #fff; }
}
.knopf.gross { padding: 12px 22px; font-size: 1rem; }
.knopf.schlicht {
  background: transparent; color: var(--ton); border-color: var(--linie);
}
.knopf.schlicht:hover { border-color: var(--ton); }

/* --------------------------------------------------------- Hinweise */

.hinweis {
  margin: 0 0 18px;
  padding: 11px 15px;
  border-radius: var(--radius);
  background: var(--ton-weich);
  border: 1px solid var(--linie);
}
.hinweis.fehler {
  background: var(--warn-weich);
  color: var(--warnung);
  border-color: var(--warnung);
}

/* ------------------------------------------------------ Themenliste */

.gruppe {
  margin: 30px 0 8px;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedaempft); font-weight: 620;
}
.themen { list-style: none; margin: 0; padding: 0;
          border: 1px solid var(--linie); border-radius: var(--radius);
          background: var(--flaeche); overflow: hidden; }
.themen li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--linie);
}
.themen li:first-child { border-top: 0; }
.themen a { text-decoration: none; font-weight: 550; }
.themen a:hover { text-decoration: underline; }
.marke {
  font-size: .76rem; color: var(--gedaempft);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 1px 9px;
}

.zurueck { margin: -8px 0 18px; font-size: .92rem; }

/* ------------------------------------------------------------- Text */

.text { max-width: 44rem; }
.text h2 { margin: 2.1rem 0 .6rem; font-size: 1.18rem; font-weight: 640; }
.text h3 { margin: 1.6rem 0 .4rem; font-size: 1.03rem; font-weight: 620; }
.text h4 { margin: 1.3rem 0 .3rem; font-size: .96rem; font-weight: 620; }
.text p  { margin: 0 0 .9rem; }
.text ul, .text ol { margin: 0 0 1rem 1.2rem; padding: 0; }
.text li { margin: 0 0 .4rem; }
.text code {
  background: var(--ton-weich); border: 1px solid var(--linie);
  border-radius: 5px; padding: 1px 5px;
  font: .88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hb-code {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px;
  overflow-x: auto;
  font: .87rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hb-code code { background: none; border: 0; padding: 0; }
.hb-merke {
  margin: 1.1rem 0; padding: 12px 16px;
  background: var(--ton-weich);
  border-left: 3px solid var(--ton);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tabellenrahmen { overflow-x: auto; margin: 0 0 1.1rem; }
.hb-tabelle {
  width: 100%; border-collapse: collapse;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius);
  font-size: .94rem;
}
.hb-tabelle th, .hb-tabelle td {
  text-align: left; padding: 9px 13px;
  border-bottom: 1px solid var(--linie);
}
.hb-tabelle th { font-weight: 620; color: var(--gedaempft);
                 font-size: .82rem; letter-spacing: .03em; }
.hb-tabelle tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- Fuss */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  padding: 16px;
  color: var(--gedaempft);
  font-size: .85rem;
  text-align: center;
}