/* Stenowise Hilfe
   Die Farb-Token sind die der App und der Website (Papier-Hell), damit die
   Hilfe nicht wie ein fremdes Produkt aussieht. Was hier anders ist als auf der
   Website, ist die Form: eine Landeseite will Aufmerksamkeit, eine Hilfeseite
   will gelesen werden. Also eine Spalte in Lesebreite, eine ruhige
   Seitenleiste, und sonst nichts. */

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --soft: #f5f2ec;
  --line: #e7e2da;
  --hair: #f0ebe2;
  --ink: #201e1b;
  --body: #3e3b35;
  --muted: #6e6759;
  --label: #8a8375;
  --faint: #a39c8d;
  --accent: #305a96;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191816;
    --surface: #201f1c;
    --soft: #232220;
    --line: #2e2c28;
    --hair: #292724;
    --ink: #eae6de;
    --body: #cfc9bd;
    --muted: #a39c8d;
    --label: #8a8375;
    --faint: #7d766a;
    --accent: #8fafdf;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Der erste Tabstopp der Seite, für alle, die nicht mit der Maus lesen. */
.ueberspringen {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.875rem;
  border-radius: 0 0 8px 0;
  z-index: 10;
}

.ueberspringen:focus {
  left: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}

.marke .wort {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
}

.marke .rolle {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}

.sprache {
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
}

.sprache:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---- Aufteilung --------------------------------------------------------- */

.huelle {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}

.seitenleiste ul {
  position: sticky;
  top: 5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.seitenleiste li + li {
  margin-top: 0.125rem;
}

.seitenleiste a {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: 7px;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.seitenleiste a:hover {
  background: var(--soft);
  color: var(--ink);
}

.seitenleiste a.hier {
  background: var(--soft);
  color: var(--ink);
  font-weight: 600;
}

/* ---- Artikel ------------------------------------------------------------ */

article {
  max-width: 40rem;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

h2 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2.5rem 0 0.75rem;
  text-wrap: balance;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.75rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

code {
  font-family: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  background: var(--soft);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  color: var(--ink);
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.375rem;
}

/* Der Merksatz. Kein Ausrufezeichen, kein Symbol, kein Farbstreifen: ein Kasten
   in der ruhigen Fläche reicht, und alles andere sähe nach Warnung aus, wo eine
   Erklärung steht. */
.merk {
  margin: 1.25rem 0;
  padding: 0.875rem 1rem;
  background: var(--soft);
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--ink);
}

/* Das Inhaltsverzeichnis eines Artikels. Steht oben und nicht rechts, damit die
   Seite auf einem Telefon dieselbe Reihenfolge hat wie auf einem Bildschirm. */
.aufdieserseite {
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.aufdieserseite ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.aufdieserseite li {
  margin: 0;
}

.aufdieserseite a {
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
}

.aufdieserseite a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Fuß ---------------------------------------------------------------- */

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--faint);
}

.fuss a {
  color: var(--faint);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--muted);
  text-decoration: underline;
}

/* ---- Schmale Fenster ----------------------------------------------------
   Die Seitenleiste wird eine waagerechte Leiste über dem Artikel. Sie
   verschwindet nicht: auf einem Telefon ist der Weg zum nächsten Artikel
   genauso wichtig wie auf einem Bildschirm, und ein Menü hinter einem Knopf
   wäre ein Klick mehr für die Sache, die man am häufigsten tut. */
@media (max-width: 52rem) {
  .huelle {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .seitenleiste ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }

  .seitenleiste li + li {
    margin-top: 0;
  }

  .seitenleiste a {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 0.3125rem 0.6875rem;
    font-size: 0.8125rem;
  }
}