/* KernBite Website. Ein einziges Stylesheet fuer alle vier Seiten.
   Keine externen Schriften, keine CDNs, kein JavaScript: dadurch entsteht beim
   Aufruf kein einziger Request an einen Dritten, und die Zusage "kein
   Drittlandtransfer" aus der Datenschutzerklaerung bleibt nachweislich wahr. */

/* Helle Palette. Der dunkle Block weiter unten ueberschreibt ausschliesslich
   diese Farbwerte, damit Abstaende und Typografie nur an einer Stelle stehen. */
:root {
  --bg:            #f6f5ef;   /* warmes Papierweiss, nicht reines Weiss */
  --surface:       #fffefa;
  --text:          #1b2015;   /* 15.2:1 auf --bg */
  --muted:         #4f5a45;   /*  6.7:1 auf --bg */
  --brand:         #26351A;   /* Markenfarbe der App (adaptive_icon_background) */
  --on-brand:      #f6f5ef;   /* 12.0:1 auf --brand */
  --link:          #33481f;   /*  9.2:1 auf --bg */
  --rule:          #d9d8c9;
  --focus:         #5c7a2e;   /* 4.5:1 auf --bg, deutlich ueber den 3:1 fuer Rahmen */
  --note-bg:       #eceade;
  --shadow:        0 1px 2px rgba(27, 32, 21, .06);

  --measure:       36rem;     /* ca. 68 Zeichen bei 17px Grundgroesse */
  --wide:          58rem;
  --gap:           1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #12150e;
    --surface:   #1a1e14;
    --text:      #e9eade;   /* 15.2:1 auf --bg */
    --muted:     #a9b39a;   /*  8.4:1 auf --bg */
    --brand:     #c2d69a;   /* aufgehellte Markenfarbe: #26351A traegt auf dunklem
                               Grund keinen Kontrast, der Farbton bleibt erhalten */
    --on-brand:  #12150e;
    --link:      #c2d69a;   /* 11.7:1 auf --bg */
    --rule:      #2c3223;
    --focus:     #c2d69a;
    --note-bg:   #1f2417;
    --shadow:    none;
  }
}

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

html {
  /* Grundgroesse leicht ueber 16px: Fliesstext bleibt auch bei laengeren
     Rechtstexten ohne Zoom lesbar. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Nimbus Roman", "Liberation Serif", "DejaVu Serif", "Times New Roman", serif;
  line-height: 1.7;
  /* Silbentrennung: die deutschen Komposita in den Rechtstexten erzeugen sonst
     auf schmalen Displays sehr loechrige Zeilen. */
  hyphens: auto;
  -webkit-hyphens: auto;
  text-rendering: optimizeLegibility;
}

/* Lange Zeichenketten ohne Leerzeichen, vor allem die in den Rechtstexten
   zitierten fremden Adressen (z. B. die 47 Zeichen lange Repository-Adresse in
   AGB § 19 Abs. 1), passen auf einem 320 Pixel breiten Display nicht in eine
   Zeile. Ohne diese Regel bekommt die Seite eine waagerechte Bildlaufleiste.
   hyphens: auto hilft dort nicht, weil eine URL keine Silbengrenzen hat.
   Der Rechtstext selbst bleibt dabei unangetastet, es aendert sich nur der
   Umbruch. */
p, li, dd, dt, td, blockquote, address, .lead, .meta { overflow-wrap: anywhere; }

/* Ueberschriften und Bedienelemente serifenlos, Fliesstext mit Serifen:
   die Trennung macht die Gliederung langer Paragrafen auf einen Blick sichtbar. */
h1, h2, h3, nav, .meta, .toc, footer {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------------------------------------------------------------- Links */

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2px; }

/* Ein Fokusrahmen, der auf jedem Untergrund sichtbar bleibt. :focus-visible
   allein wuerde aeltere Browser ohne jede Markierung lassen, deshalb der
   zusaetzliche :focus-Fallback. */
a:focus, button:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: .6rem 1rem;
  border: 2px solid var(--focus);
  z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Ziel des Sprunglinks. <main> traegt tabindex="-1", damit der Tastaturfokus
   nach dem Sprung wirklich im Inhalt steht und nicht in der Kopfnavigation
   zurueckbleibt (Safari und aeltere WebKit-Browser scrollen sonst nur).
   Der Rahmen um den gesamten Inhaltsbereich waere dabei nur stoerend, den
   sichtbaren Fokus traegt der Sprunglink selbst. */
main:focus, main:focus-visible { outline: none; }

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

.masthead {
  background: var(--brand);
  color: var(--on-brand);
  border-bottom: 1px solid var(--rule);
}
.masthead .bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem var(--gap);
}
.wordmark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--on-brand);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:focus, .wordmark:focus-visible { outline-color: var(--on-brand); }

.masthead nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-size: .95rem;
}
.masthead nav a {
  color: var(--on-brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.masthead nav a:hover { border-bottom-color: var(--on-brand); }
.masthead nav a:focus, .masthead nav a:focus-visible { outline-color: var(--on-brand); }
/* aria-current markiert die aktuelle Seite auch visuell, nicht nur fuer
   Screenreader. */
.masthead nav a[aria-current="page"] {
  border-bottom: 2px solid var(--on-brand);
  font-weight: 600;
}

/* --------------------------------------------------------------- Rumpf */

main { display: block; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}
.wrap.wide { max-width: var(--wide); }

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 .4rem;
  color: var(--brand);
  letter-spacing: -.01em;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.6rem 0 .6rem;
  color: var(--brand);
  /* scroll-margin sorgt dafuer, dass ein Sprung aus dem Inhaltsverzeichnis
     die Ueberschrift nicht unter den Seitenrand schiebt. */
  scroll-margin-top: 1.5rem;
}
h3 {
  font-size: 1.05rem;
  margin: 1.8rem 0 .4rem;
  color: var(--text);
}
p { margin: 0 0 1.05rem; }
strong { font-weight: 700; }

.lead {
  font-size: 1.12rem;
  color: var(--text);
  margin-bottom: 1.6rem;
}
.meta {
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 2rem;
}

ul, ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--muted); }

blockquote {
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem;
  background: var(--note-bg);
  border-left: 4px solid var(--brand);
  border-radius: 0 4px 4px 0;
  font-size: .97rem;
}
blockquote p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.2rem 0;
}

/* Trenner zwischen den Paragrafen der Rechtstexte. Die Quelldateien setzen
   dort ---, das als <hr> unmittelbar vor jeder Ueberschrift stuende und den
   Abstand verdoppeln wuerde. */
hr + h2 { margin-top: 1.6rem; }

/* -------------------------------------------------- Startseite, Bausteine */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.hero .wrap { padding-top: 3rem; padding-bottom: 2.2rem; }

.cta {
  display: inline-block;
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: .7rem 1.4rem;
  border-radius: 6px;
  border: 2px solid var(--brand);
}
.cta:hover { background: transparent; color: var(--link); }
.cta:focus, .cta:focus-visible { outline-color: var(--focus); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.4rem;
  box-shadow: var(--shadow);
}
.card h2, .card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* Kontaktblock im Impressum: die Anschrift muss zeilenweise stehen bleiben. */
.address {
  font-style: normal;
  margin: 0 0 1.05rem;
}

dl.kv { margin: 0 0 1.05rem; }
dl.kv dt {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}
dl.kv dd { margin: .15rem 0 0; }

/* ------------------------------------------- Inhaltsverzeichnis Rechtstexte */

.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: .94rem;
}
.toc h2 {
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Zwei Spalten erst dort, wo sie hinpassen: auf dem Telefon bleibt es
     einspaltig, sonst werden die Paragrafentitel unlesbar kurz umbrochen. */
  columns: 2;
  column-gap: 2rem;
}
.toc li { margin-bottom: .3rem; break-inside: avoid; }
@media (max-width: 34rem) { .toc ol { columns: 1; } }

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

footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .92rem;
}
footer .wrap { padding-top: 2rem; padding-bottom: 2rem; max-width: var(--wide); }
footer nav ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}
footer a { color: var(--link); }
footer p { margin: 0 0 .5rem; }
footer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- Druck */

@media print {
  .masthead, .toc, .cta, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}