/*
 * Die Website zu Osiris.
 *
 * Die Tokens sind dieselben wie in der Anwendung (web/css/base.css) — Wort
 * fuer Wort uebernommen, damit die Seite und das Werkzeug aus derselben Welt
 * stammen und nicht zwei Entwuerfe nebeneinander stehen. Wer dort eine Farbe
 * aendert, aendert sie hier mit.
 *
 * Keine Schriftdatei von aussen, kein CDN, kein Zaehlpixel: die Seite laedt
 * ausschliesslich aus dem eigenen Verzeichnis. Das ist keine Sparsamkeit,
 * sondern die Voraussetzung dafuer, dass sie ohne Einwilligung auskommt.
 */

/* =========================================================== Tokens (1:1) */

:root {
  --accent: #d97757;
  --accent-strong: #c2603f;
  --accent-2: color-mix(in oklab, var(--accent) 62%, var(--fg-3));
  --accent-90: color-mix(in oklab, var(--accent) 90%, transparent);
  --accent-60: color-mix(in oklab, var(--accent) 60%, transparent);
  --accent-30: color-mix(in oklab, var(--accent) 30%, transparent);
  --accent-16: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-08: color-mix(in oklab, var(--accent) 8%, transparent);
  --blau: #2a79d6;

  --r-xs: 4px;  --r-sm: 6px;  --r: 8px;
  --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --font-ui: 'Styrene B', ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  --font-serif: Copernicus, 'Tiempos Headline', ui-serif, 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-base: 16px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* Nur fuer die Website: die Breite der Textspalte. */
  --spalte: 1140px;
}

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #151515;
  --bg-sunken: #111111;
  --surface: #1f1f1f;
  --surface-1: #212121;
  --surface-2: #2d2d2d;
  --surface-3: #363636;
  --overlay: rgba(21, 21, 21, 0.9);
  --fg: #f0efec;
  --fg-2: #c4c4c0;
  --fg-3: #8a8a88;
  --fg-4: #4a4a48;
  --line: #232323;
  --line-subtle: #1e1e1e;
  --line-mid: #363636;
  --line-strong: #4b4b4b;
  --ok: #9bb377;
  --warn: #d9a441;
  --err: #d96a5a;
  --holo-ink: #e0a184;
  --code-fg: #cf9392;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #faf9f5;
  --bg-sunken: #f5f4ed;
  --surface: #ffffff;
  --surface-1: #f5f4ed;
  --surface-2: #f0eee6;
  --surface-3: #e8e5da;
  --overlay: rgba(250, 249, 245, 0.9);
  --fg: #141413;
  --fg-2: #5c5a54;
  --fg-3: #85827a;
  --fg-4: #b0ada3;
  --line: #e8e5da;
  --line-subtle: #f0eee6;
  --line-mid: #ddd9cc;
  --line-strong: #d6d2c4;
  --ok: #788c5d;
  --warn: #b8842a;
  --err: #bc4a3c;
  --holo-ink: #8a5238;
  --code-fg: var(--accent-strong);
  --shadow-lg: 0 8px 28px color-mix(in oklab, var(--fg) 14%, transparent);
}

/* ============================================================== Grundlage */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1em; }
a { color: inherit; }

code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.86em; color: var(--code-fg); }

::selection { background: var(--accent-30); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.spalte { width: min(100% - 48px, var(--spalte)); margin-inline: auto; }
.eng { width: min(100% - 48px, 760px); margin-inline: auto; }
@media (max-width: 640px) { .spalte, .eng { width: calc(100% - 32px); } }

.mono { font-family: var(--font-mono); }
.leise { color: var(--fg-3); }
.klein { font-size: 0.88rem; }

/* Ein Canvas ist ein ersetztes Element: ohne ausdrueckliche Groesse bleibt es
   bei seinen eingebauten 300x150, auch wenn `inset: 0` etwas anderes nahelegt.
   Genau das war der Grund, warum das Netz zuerst als Fleck in der Ecke sass. */
canvas[data-hologramm] { display: block; width: 100%; height: 100%; }


/* ============================================================== Das Zeichen

   Das Netz aus `../software/web/js/ui/mark.mjs` — dieselben Koordinaten, dieselben
   Strichstaerken. Punkte sind Striche der Laenge null mit rundem Ende. */

.mark { display: block; overflow: visible; transition: transform 0.35s var(--ease-out); transform-origin: 50% 52%; }
.mark path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transform-origin: 12px 12px;
}
.marke:hover .mark { transform: scale(1.08); }

/* Im Kopfbereich zeichnet sich das Zeichen einmal ein: erst die Kanten, dann
   springen die Knoten auf — wie beim Start der Anwendung. */
.held .mark path { animation: strich-auf 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.06s); }
@keyframes strich-auf { from { opacity: 0; transform: scale(0.86); } }
@media (prefers-reduced-motion: reduce) { .held .mark path { animation: none; } }

/* ================================================================= Kopf */

.kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s-6);
  height: 60px;
  padding-inline: max(24px, calc((100vw - var(--spalte)) / 2));
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.kopf.gescrollt { border-bottom-color: var(--line); }

/* Der Hinweis unter „Start Session": Er erscheint nur, wenn nach dem Klick
   nichts geschieht — also `osiris://` nirgends angemeldet ist. Er haengt am
   Kopf statt im Fluss zu stehen, damit sein Auftauchen die Seite nicht
   verschiebt. */
.sitzung-hinweis {
  position: fixed; z-index: 49;
  top: 64px; right: max(24px, calc((100vw - var(--spalte)) / 2));
  max-width: min(30rem, calc(100vw - 48px));
  margin: 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg-2);
  font-size: 0.86rem; line-height: 1.5;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.sitzung-hinweis p { margin: 0; }
.sitzung-hinweis a { color: var(--accent); }
.sitzung-hinweis code { font-size: 0.92em; }
/* Der zweite Weg steht unter dem ersten und tritt zurueck: Er hilft nur, wenn
   Osiris ohnehin schon im Terminal laeuft. */
.sitzung-alternativ {
  margin-top: 8px !important; padding-top: 8px;
  border-top: 1px solid var(--line); color: var(--fg-3); opacity: 0.9;
}

/* Zwei Knoepfe passen im Kopf nur nebeneinander, solange Platz ist. Ist
   „Start Session" da, ist der Besucher angemeldet und hat Osiris laengst
   installiert — „Loslegen" darf also weichen. Der Weg dorthin steht weiter
   unten im Abschnitt „How to install". */
@media (max-width: 760px) {
  .kopf-nav.mit-sitzung a[href="#loslegen"] { display: none; }
}

/* Umbrechen darf er nicht: Zweizeilig waere der Knopf hoeher als der Kopf. */
#start-sitzung { white-space: nowrap; }

.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; }
.marke b { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500; letter-spacing: 0.01em; }

.kopf-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.kopf-nav a {
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--fg-2); text-decoration: none; font-size: 0.92rem;
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
.kopf-nav a:hover { color: var(--fg); background: var(--surface-2); }
@media (max-width: 860px) { .kopf-nav a.weg-schmal { display: none; } }

/* Der Sprachumschalter: zwei Kuerzel in einem Rahmen, wie ein Segment im
   Programm. Er bleibt auch auf schmalen Geraeten stehen — die Sprache zu
   wechseln ist wichtiger als drei Sprungmarken. */
.sprachwahl {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  overflow: hidden; margin-right: 2px;
}
.sprachwahl button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 5px 9px;
  font: 500 0.78rem/1 var(--font-ui); letter-spacing: 0.04em; color: var(--fg-3);
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.sprachwahl button + button { border-left: 1px solid var(--line-mid); }
.sprachwahl button:hover { background: var(--surface-2); color: var(--fg); }
.sprachwahl button.an { background: var(--accent-16); color: var(--fg); }

.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-mid);
  background: var(--surface-2); color: var(--fg);
  text-decoration: none; font-size: 0.92rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), transform 0.12s var(--ease);
}
.knopf:hover { background: var(--surface-3); border-color: var(--line-strong); }
.knopf:active { transform: translateY(1px); }
.knopf.haupt {
  background: var(--accent); border-color: var(--accent);
  color: #1a1008;
}
.knopf.haupt:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.knopf.still { background: transparent; border-color: var(--line-mid); }
.knopf.still:hover { background: var(--surface-2); }
.knopf.breit { width: 100%; justify-content: center; }

/* ================================================================== Held */

.held { position: relative; padding: clamp(56px, 11vh, 110px) 0 clamp(28px, 4vh, 44px); overflow: hidden; }
.held-buehne {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.held-buehne canvas { width: 100%; height: 100%; display: block; }
.held-inhalt { position: relative; text-align: center; }

.held-zeichen {
  position: relative;
  display: grid; place-items: center;
  width: 92px; height: 92px; margin: 0 auto var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter: blur(6px);
}
/* Ein Hauch Glut hinter dem Zeichen — derselbe Schein wie am Hologramm. */
.held-zeichen::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 150px; height: 150px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%);
}
.held-zeichen .mark { position: relative; }

/* Das schlichte Logo im Kopf: nur das Zeichen, ein Hauch Glut dahinter,
   kein Kasten. */
.held-logo { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto var(--s-5); }
.held-logo::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
}
.held-logo .mark { position: relative; }

.plakette {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px; margin-bottom: var(--s-6);
  border: 1px solid var(--line-mid); border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  font-size: 0.82rem; color: var(--fg-2);
}
.plakette .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.held h1 { margin-bottom: var(--s-5); }
.held h1 .glut {
  background: linear-gradient(105deg, var(--fg) 20%, var(--accent) 52%, var(--fg) 82%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: glut 9s var(--ease) infinite;
}
@keyframes glut { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

.held-satz { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--fg-2); max-width: 620px; margin-inline: auto; }
.held-knoepfe { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-8); }

.held-zeile {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-6); padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-family: var(--font-mono); font-size: 0.86rem; color: var(--fg-2);
}
.held-zeile .zeichen { color: var(--accent); }

/* ============================================================== Abschnitt */

.abschnitt { padding: clamp(64px, 11vh, 120px) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--line); }

/* Die Kapitelmarke oben links — ueberall dieselbe, ob ueber einer Reihe oder
   ueber einem ganzen Abschnitt. Vorher stand sie einmal als Mono-Versalie und
   einmal als blosser Text da; im Programm gibt es nur die eine Form. */
.ueber {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}

/* Der Strich der Marke laeuft ueber die ganze Spalte. Die Lesebreite gilt
   darum nur fuer den Fliesstext darunter, nicht fuer das Kapitel als Ganzes. */
.kapitel { margin-bottom: var(--s-10); }
.kapitel h2, .kapitel p { max-width: 720px; }
.kapitel p { color: var(--fg-2); font-size: 1.04rem; margin-top: var(--s-4); margin-bottom: 0; }

/* ================================================================= Karten */

.gitter { display: grid; gap: var(--s-4); }
.gitter.drei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gitter.zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.karte {
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), background 0.18s var(--ease);
}
.karte:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.karte h3 { margin-bottom: var(--s-2); }
.karte p { color: var(--fg-2); font-size: 0.96rem; margin: 0; }
.karte .zeichen {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent-08); color: var(--accent);
}
.karte .zeichen svg { width: 19px; height: 19px; }

/* ============================================================ Fenster-Demo */

.fenster {
  border: 1px solid var(--line-mid); border-radius: var(--r-lg);
  background: var(--bg-sunken);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.fenster-leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.fenster-leiste .ampel { display: flex; gap: 6px; }
.fenster-leiste .ampel i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.fenster-leiste .titel { font-size: 0.82rem; color: var(--fg-3); margin-left: 6px; }
.fenster-leib { display: grid; grid-template-columns: 210px 1fr; min-height: 340px; }
@media (max-width: 720px) { .fenster-leib { grid-template-columns: 1fr; } .fenster-leib .fenster-nav { display: none; } }
.fenster-nav { border-right: 1px solid var(--line); padding: 12px 10px; background: var(--bg-sunken); }
.fenster-nav b { display: block; padding: 0 8px 8px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); font-weight: 500; }
.fenster-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
.fenster-nav a.an { background: var(--surface-2); color: var(--fg); }
.fenster-nav a:hover { background: var(--surface-2); }
.fenster-nav svg { width: 16px; height: 16px; flex: none; opacity: 0.8; }
.fenster-buehne { position: relative; }
.fenster-buehne canvas { display: block; width: 100%; height: 100%; }

/* ================================================================= Memory */

.memory-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 880px) { .memory-raster { grid-template-columns: 1fr; } }

.schichten { display: grid; gap: var(--s-3); }
.schicht {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s-4); align-items: start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.schicht .marke2 { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); }
.schicht b { display: block; font-weight: 500; margin-bottom: 2px; }
.schicht span { color: var(--fg-2); font-size: 0.92rem; }

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
/* Die Karten sind gleich hoch, die Zahl steht oben, die Erklaerung unten.
   Sonst haengt die Beschriftung der einen Karte auf Hoehe der Zahl der
   naechsten, und die Reihe liest sich schief. Die Zahl bricht nie um: „90 →
   97 %" auf drei Zeilen ist keine Zahl mehr, sondern ein Unfall. */
.zahl {
  display: flex; flex-direction: column;
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.zahl b {
  display: block; font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--fg);
  white-space: nowrap;
}
.zahl b .pfeil { color: var(--accent); font-size: 0.62em; vertical-align: 0.12em; }
/* Nur die Beschriftung, nicht der Pfeil in der Zahl: ein blosses
   `.zahl span` traf auch ihn, machte ihn zum Block und brach „90 → 97 %"
   auf drei Zeilen um. */
.zahl > span { display: block; margin-top: auto; padding-top: var(--s-3); color: var(--fg-3); font-size: 0.86rem; }

/* =============================================================== Abilities */

/* Formular und Ausgabe stehen nebeneinander und sind gleich hoch — zwei
   Karten unterschiedlicher Laenge lesen sich sonst wie ein Satzfehler. */
.ability-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: stretch; }
.ability-raster > * { min-width: 0; }
@media (max-width: 880px) { .ability-raster { grid-template-columns: 1fr; } }

.formular { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.formular .kopfzeile { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-5); }
.formular .kopfzeile .zeichen { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-08); color: var(--accent); }
.formular .kopfzeile b { font-weight: 500; }
.feld { margin-bottom: var(--s-4); }
.feld label { display: block; font-size: 0.84rem; color: var(--fg-2); margin-bottom: 5px; }
.feld .eingabe {
  min-height: 34px; padding: 7px 11px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--bg-sunken); color: var(--fg); font-size: 0.92rem;
}
.feld .eingabe.tippt::after { content: '▏'; color: var(--accent); animation: blinken 1s steps(2) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-mid); background: var(--bg-sunken);
  font-size: 0.82rem; color: var(--fg-2);
  transition: all 0.2s var(--ease);
}
.chip.an { border-color: var(--accent); background: var(--accent-16); color: var(--fg); }

.ausgabe {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunken); overflow: hidden;
}
.ausgabe .kopfzeile { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--fg-3); }
.ausgabe pre {
  margin: 0; padding: var(--s-5);
  font-size: 0.82rem; line-height: 1.75; color: var(--fg-2);
  overflow-x: auto;
}
.ausgabe .neu { color: var(--ok); }
.ausgabe .pfad { color: var(--accent); }

/* =================================================================== CLI */

.terminal {
  border: 1px solid var(--line-mid); border-radius: var(--r-md);
  background: #0d0d0d; overflow: hidden;
}
.terminal pre {
  margin: 0; padding: var(--s-6);
  font-size: 0.84rem; line-height: 1.7; color: #c4c4c0;
  overflow-x: auto;
}
.terminal .akz { color: var(--accent); }
.terminal .dim { color: #6a6a68; }
.terminal .ok { color: #9bb377; }

/* ================================================================== Fuss */

.fuss { padding: var(--s-12) 0 var(--s-10); border-top: 1px solid var(--line); background: var(--bg-sunken); }
.fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-8); }
@media (max-width: 780px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
.fuss b { display: block; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); margin-bottom: var(--s-3); font-weight: 500; }
.fuss a { display: block; padding: 3px 0; color: var(--fg-2); text-decoration: none; font-size: 0.92rem; }
.fuss a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Die Marke im Fuss ist kein Spaltenkopf, sondern dieselbe Marke wie oben:
   Zeichen und Name nebeneinander. Die Fuss-Regeln daraeber gelten fuer die
   Linklisten, nicht fuer sie. */
.fuss .marke { display: inline-flex; padding: 0; }
.fuss .marke b {
  display: inline; margin: 0;
  font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500;
  letter-spacing: 0.01em; text-transform: none; color: var(--fg);
}
.fuss .marke:hover { text-decoration: none; }
.fuss-unten {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--fg-4); font-size: 0.86rem;
}

/* ========================================================== Rechtstexte */

.rechtstext { padding: var(--s-12) 0 var(--s-12); }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: var(--s-3); }
.rechtstext h2 { font-size: 1.32rem; margin: var(--s-10) 0 var(--s-3); }
.rechtstext h3 { font-size: 1.02rem; margin: var(--s-6) 0 var(--s-2); }
.rechtstext p, .rechtstext li { color: var(--fg-2); }
.rechtstext ul, .rechtstext ol { padding-left: 1.3em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 0.35em; }
.rechtstext dl { margin: 0 0 1em; }
.rechtstext dt { font-weight: 500; color: var(--fg); margin-top: var(--s-3); }
.rechtstext dd { margin: 0 0 0.2em; color: var(--fg-2); }
.rechtstext a { color: var(--accent); text-underline-offset: 3px; }
.rechtstext .stand { color: var(--fg-4); font-size: 0.88rem; }

.hinweis {
  padding: var(--s-4) var(--s-5); margin: var(--s-6) 0;
  border: 1px solid var(--warn); border-left-width: 3px; border-radius: var(--r);
  background: color-mix(in oklab, var(--warn) 8%, transparent);
  color: var(--fg-2); font-size: 0.94rem;
}
.hinweis b { color: var(--fg); }

/* ================================================== Einblenden beim Scrollen */

.auf { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.auf.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auf { opacity: 1; transform: none; transition: none; }
  .held h1 .glut { animation: none; }
}


/* ======================================================= Aufbau der Seite

   Die Seite atmet in einem Takt: ein Abschnitt, eine Aussage. Die Marken
   darunter sind dieselben wie in der Anwendung — 1140 Spalte, 32 Rand,
   Serife fuer Ueberschriften, Groteske fuer Flaechentext. */

/* Der Sprung zu einem Anker darf nicht unter dem Kopf verschwinden. */
[id] { scroll-margin-top: 84px; }

/* Direkt zum Inhalt — fuer alle, die mit der Tastatur navigieren. */
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: #1a1008; font-weight: 500;
}
.sprung:focus { left: 16px; top: 12px; }

/* --- Die Zeile ueber einer Ueberschrift, wie die Werkzeugzeile im Programm */
.marke-zeile {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-4);
}
.marke-zeile .strich { flex: 1; height: 1px; background: var(--line); }

/* --- Zwei Spalten: links das Wort, rechts das Bild. Jede zweite gedreht. */
.reihe {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.reihe + .reihe { margin-top: clamp(64px, 9vh, 110px); }
.reihe.gedreht .reihe-wort { order: 2; }
@media (max-width: 900px) {
  .reihe { grid-template-columns: 1fr; gap: var(--s-8); }
  .reihe.gedreht .reihe-wort { order: 0; }
}
.reihe-wort h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: var(--s-4); }
.reihe-wort p { color: var(--fg-2); font-size: 1.02rem; }
.reihe-bild { min-width: 0; }

/* Eine Liste kurzer Punkte unter einem Absatz. */
.punkte { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.punkte li { position: relative; padding-left: 18px; color: var(--fg-2); font-size: 0.96rem; }
.punkte li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-60);
}

/* --- Der Nachbau der Anwendung: Seitenleiste, Kopf, Buehne */
.app {
  border: 1px solid var(--line-mid); border-radius: var(--r-lg);
  background: var(--bg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.app-leiste {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: var(--bg-sunken);
}
.app-leiste .ampel { display: flex; gap: 6px; }
.app-leiste .ampel i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.app-leib { display: grid; grid-template-columns: 172px 1fr; min-height: 300px; }
@media (max-width: 620px) { .app-leib { grid-template-columns: 1fr; } .app-sb { display: none; } }

.app-sb { border-right: 1px solid var(--line); background: var(--bg-sunken); padding: 10px 8px; }
.app-sb a, .app-sb span.zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 0.82rem; text-decoration: none;
}
.app-sb a.an { background: var(--surface-2); color: var(--fg); }
.app-sb a:hover { background: var(--surface-2); }
.app-sb svg { width: 15px; height: 15px; flex: none; opacity: 0.85; }
.app-sb .gruppe {
  padding: 14px 8px 5px; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-4);
}
.app-sb .chat { color: var(--fg-3); font-size: 0.78rem; padding: 4px 8px 4px 18px; position: relative; }
.app-sb .chat::before {
  content: ''; position: absolute; left: 8px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--fg-4);
}
.app-kopf { padding: 18px 20px 0; }
.app-kopf h4 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin: 0; }
.app-werkzeuge { display: flex; gap: 6px; margin-top: 12px; }
.app-werkzeuge i {
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-mid); background: var(--bg-sunken);
  font-style: normal; font-size: 0.78rem; color: var(--fg-3); white-space: nowrap;
}
.app-werkzeuge i.an { border-color: var(--accent); background: var(--accent-16); color: var(--fg-2); }
.app-buehne { position: relative; height: 230px; }

/* --- Tafel: die kleinen Kennzahlenkarten aus dem Programm */
.tafel {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--overlay); backdrop-filter: blur(8px);
}
.tafel .titel { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 7px; }
.tafel .werte { display: flex; gap: 16px; }
.tafel b { display: block; font-family: var(--font-serif); font-size: 1.32rem; font-weight: 500; line-height: 1; }
.tafel span { font-size: 0.7rem; color: var(--fg-3); }

/* --- Der Baum, wie im Explorer */
.baum { padding: 16px 18px; font-size: 0.8rem; line-height: 2.05; color: var(--fg-2); }
.baum .ordner { color: var(--fg); }
.baum .zahl { color: var(--fg-4); float: right; }
.baum .tief { padding-left: 18px; }

/* --- Ein Band mit einer Aussage, ohne Karte drumherum */
.band { padding: clamp(56px, 9vh, 96px) 0; background: var(--bg-sunken); border-block: 1px solid var(--line); }
.band .spalte { text-align: center; }
.band h2 { max-width: 20ch; margin-inline: auto; }
.band p { max-width: 62ch; margin: var(--s-5) auto 0; color: var(--fg-2); font-size: 1.04rem; }

/* --- Der Abschluss mit Handlungsaufforderung */
.schluss { text-align: center; }
/* Der Installer sitzt direkt unter dem Kopf: zentriert, oben schmaler Abstand,
   keine Trennlinie darueber (er gehoert optisch zum Kopf). */
.installer { text-align: center; padding-top: clamp(8px, 2vh, 24px); border-top: 0 !important; }
.installer .terminal { text-align: left; }
.schluss .terminal { text-align: left; margin-top: var(--s-8); }

/* Die Wahl des Systems: auf Windows gibt es einen anderen Befehl als auf
   macOS und Linux, also steht immer nur der passende da. */
.os-wahl {
  display: inline-flex; gap: var(--s-1); margin: 0 auto var(--s-4);
  padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.os-knopf {
  padding: 7px 14px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--fg-3); font: 500 0.85rem/1 inherit;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.os-knopf[aria-selected='true'] { background: var(--surface-2); color: var(--fg); }
.os-knopf:hover { color: var(--fg); }
.os-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Der Ein-Befehl-Installer: ein Feld mit dem Befehl und einem Kopier-Knopf. */
.install-feld {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 680px; margin: 0 auto;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border: 1px solid var(--line-mid); border-radius: var(--r-md);
  background: var(--bg-sunken); text-align: left;
}
/* Umbrechen statt abschneiden: Ein Befehl, dessen Ende man nicht sieht, laedt
   nicht zum Kopieren ein — auch wenn der Knopf ihn vollstaendig mitnimmt. */
.install-feld code {
  flex: 1; min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.5; color: var(--fg);
}
.install-feld .knopf { flex: none; }
.install-feld .knopf.getan { color: var(--accent); border-color: var(--accent); }

.quelle-auf { max-width: 620px; margin: var(--s-6) auto 0; text-align: left; }
.quelle-auf > summary {
  cursor: pointer; color: var(--fg-3); font-size: 0.85rem;
  list-style: none; text-align: center;
}
.quelle-auf > summary::-webkit-details-marker { display: none; }
.quelle-auf > summary:hover { color: var(--fg); }
.quelle-auf[open] > summary { color: var(--fg); margin-bottom: 0; }
.install-feld code, .quelle-auf { font-variant-ligatures: none; }