@font-face {
  font-family: "Comic Neue";
  src: url("../fonts/comic-neue/ComicNeue-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("../fonts/comic-neue/ComicNeue-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --font-heading: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --article-font: Georgia, Cambria, "Times New Roman", Times, serif;
  --technical-size-2xs: .62rem;
  --technical-size-xs: .645rem;
  --technical-size-sm: .68rem;
  --technical-size-base: .715rem;
  --technical-size-md: .735rem;
  --technical-size-lg: .78rem;
  --technical-size-xl: .83rem;
  --technical-size-home-date: .98rem;
  --page: #f7f7f4;
  --surface: #efefea;
  --ink: #181818;
  --muted: #696966;
  --line: #d8d8d2;
  --accent: var(--scheme-accent, #e65d38);
  --status-head: #e9e5dc;
  --status-body: #fcfcf9;
  --game-shelf: #e7e9e7;
  --game-shelf-border: #c9ceca;
  --game-card-surface: #f7f7f4;
  --game-card-border: #d2d6d2;
  --game-card-cover: #e1e5e1;
  --game-shelf-ink: #252925;
  --game-shelf-muted: #687069;
  --game-badge-background: rgb(247 247 244 / 88%);
  --game-badge-ink: #343a35;
  --content-width: 720px;
  --scheme-pattern: #5c6165;
  --gradient: linear-gradient(var(--ink), var(--ink));
  --gradient-line: linear-gradient(var(--line), var(--line));
  --gradient-decor: none;
}

:root[data-theme="dark"] {
  color-scheme: only dark;
  --page: #181817;
  --surface: #232321;
  --ink: #f1f0eb;
  --muted: #aaa9a2;
  --line: #3b3b37;
  --accent: var(--scheme-accent-dark, #ff916f);
  --status-head: #302d29;
  --status-body: #20201e;
  --game-shelf: #252b34;
  --game-shelf-border: #39414d;
  --game-card-surface: #1e242c;
  --game-card-border: #343c47;
  --game-card-cover: #171c22;
  --game-shelf-ink: #f2f4f7;
  --game-shelf-muted: #aab2bd;
  --game-badge-background: rgb(15 19 24 / 84%);
  --game-badge-ink: #dce2e8;
  --scheme-pattern: #c3c8cd;
}

/* Hintergrundmuster: die Datei liefert nur die Form (Maske). Die Farbe kommt aus
   --pattern-color, ohne eigene Vorgabe also aus dem Akzent. Die Farbvarianten der
   Experimentreihe setzen je Muster eigene Toene. Ohne Muster bleibt die Ebene
   unsichtbar. */
:root {
  --pattern-image: none;
  --pattern-size: 48.5px 84px;
  --pattern-opacity: 0;
  --pattern-color: var(--scheme-pattern, var(--accent));
}
:root[data-pattern="honeycomb"] {
  --pattern-image: url("../pattern/honeycomb.svg");
  --pattern-size: 48.5px 84px;
  --pattern-opacity: .1;
}
:root[data-pattern="scatter"] {
  --pattern-image: url("../pattern/scatter.svg");
  --pattern-size: 480px 480px;
  --pattern-opacity: .3;
}
:root[data-theme="dark"][data-pattern="honeycomb"] { --pattern-opacity: .08; }
:root[data-theme="dark"][data-pattern="scatter"] { --pattern-opacity: .24; }

/* Musterfarbe und Deckkraft der Farbvarianten: Farben und Werte stammen unveraendert
   aus den Experimentdateien (Waben A-D, Streumuster E-H). */
:root[data-color-scheme="elfenbein"][data-pattern="honeycomb"] { --scheme-pattern: #9a3412; --pattern-opacity: .09; }
:root[data-color-scheme="elfenbein"][data-pattern="scatter"] { --scheme-pattern: #9a3412; --pattern-opacity: .38; }
:root[data-theme="dark"][data-color-scheme="elfenbein"][data-pattern="honeycomb"] { --scheme-pattern: #fbbf24; --pattern-opacity: .075; }
:root[data-theme="dark"][data-color-scheme="elfenbein"][data-pattern="scatter"] { --scheme-pattern: #fbbf24; --pattern-opacity: .3; }
:root[data-color-scheme="kobalt"][data-pattern="honeycomb"] { --scheme-pattern: #155e75; --pattern-opacity: .09; }
:root[data-color-scheme="kobalt"][data-pattern="scatter"] { --scheme-pattern: #155e75; --pattern-opacity: .38; }
:root[data-theme="dark"][data-color-scheme="kobalt"][data-pattern="honeycomb"] { --scheme-pattern: #22d3ee; --pattern-opacity: .075; }
:root[data-theme="dark"][data-color-scheme="kobalt"][data-pattern="scatter"] { --scheme-pattern: #22d3ee; --pattern-opacity: .3; }
:root[data-color-scheme="reaktor"][data-pattern="honeycomb"] { --scheme-pattern: #064e3b; --pattern-opacity: .09; }
:root[data-color-scheme="reaktor"][data-pattern="scatter"] { --scheme-pattern: #065f46; --pattern-opacity: .38; }
:root[data-theme="dark"][data-color-scheme="reaktor"][data-pattern="honeycomb"] { --scheme-pattern: #34d399; --pattern-opacity: .075; }
:root[data-theme="dark"][data-color-scheme="reaktor"][data-pattern="scatter"] { --scheme-pattern: #34d399; --pattern-opacity: .3; }
:root[data-color-scheme="magenta"][data-pattern="honeycomb"] { --scheme-pattern: #701a75; --pattern-opacity: .09; }
:root[data-color-scheme="magenta"][data-pattern="scatter"] { --scheme-pattern: #701a75; --pattern-opacity: .38; }
:root[data-theme="dark"][data-color-scheme="magenta"][data-pattern="honeycomb"] { --scheme-pattern: #e879f9; --pattern-opacity: .075; }
:root[data-theme="dark"][data-color-scheme="magenta"][data-pattern="scatter"] { --scheme-pattern: #e879f9; --pattern-opacity: .3; }

:root[data-color-scheme="contrast"] {
  --scheme-accent: #080808;
  --page: #fff;
  --surface: #f1f1f1;
  --ink: #080808;
  --muted: #424242;
  --line: #969696;
  --status-head: #e5e5e5;
  --status-body: #fff;
  --game-shelf: #ededed;
  --game-shelf-border: #999;
  --game-card-surface: #fff;
  --game-card-border: #999;
  --game-card-cover: #e3e3e3;
  --game-shelf-ink: #080808;
  --game-shelf-muted: #424242;
  --game-badge-background: rgb(255 255 255 / 94%);
  --game-badge-ink: #111;
  --scheme-pattern: #000000;
}
:root[data-theme="dark"][data-color-scheme="contrast"] {
  --scheme-accent-dark: #ffffff;
  --page: #0b0b0b;
  --surface: #1b1b1b;
  --ink: #fff;
  --muted: #c7c7c7;
  --line: #686868;
  --status-head: #272727;
  --status-body: #111;
  --game-shelf: #171717;
  --game-shelf-border: #696969;
  --game-card-surface: #101010;
  --game-card-border: #666;
  --game-card-cover: #080808;
  --game-shelf-ink: #fff;
  --game-shelf-muted: #c7c7c7;
  --game-badge-background: rgb(0 0 0 / 90%);
  --game-badge-ink: #fff;
  --scheme-pattern: #ffffff;
}

/* Farbvarianten der Experimentreihe (Mockups). Werte unveraendert aus
   experiment-palette-*.css uebernommen: Flaechen, Text, Linien, eigene Akzentfarbe
   (--scheme-accent, von der Akzentwahl ueberschreibbar) und der warme Leuchtverlauf
   (--ambient) hinter der Musterebene. */
:root[data-color-scheme="elfenbein"] {
  --scheme-accent: #d97706;
  --gradient: linear-gradient(135deg, #d97706, #e11d48);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #b45309;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 38%,rgba(217,119,6,.10),transparent 70%),radial-gradient(ellipse 55% 45% at 84% 16%,rgba(225,29,72,.06),transparent 70%);
  --page: #eee7da;
  --surface: #e8e0d1;
  --ink: #2a211a;
  --muted: #6b5b4c;
  --line: #c9c1b6;
  --status-head: #e2dacc;
  --status-body: #f6f2eb;
  --game-shelf: #e4dccd;
  --game-shelf-border: #c1b9ae;
  --game-card-surface: #f5f1e9;
  --game-card-border: #d1c9bd;
  --game-card-cover: #e0d8ca;
  --game-shelf-ink: #2a211a;
  --game-shelf-muted: #6b5b4c;
  --game-badge-background: rgb(238 231 218 / 90%);
  --game-badge-ink: #3b332c;
}
:root[data-theme="dark"][data-color-scheme="elfenbein"] {
  --scheme-accent-dark: #f59e0b;
  --gradient: linear-gradient(135deg, #f59e0b, #fb7185);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #fbbf24;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 38%,rgba(245,158,11,.16),transparent 70%),radial-gradient(ellipse 55% 45% at 84% 16%,rgba(251,113,133,.12),transparent 70%);
  --page: #1b1410;
  --surface: #241a14;
  --ink: #f6efe6;
  --muted: #c2ab97;
  --line: #352e2a;
  --status-head: #2a201a;
  --status-body: #221b16;
  --game-shelf: #281e18;
  --game-shelf-border: #3f3833;
  --game-card-surface: #1f1814;
  --game-card-border: #312924;
  --game-card-cover: #2c231c;
  --game-shelf-ink: #f6efe6;
  --game-shelf-muted: #c2ab97;
  --game-badge-background: rgb(27 20 16 / 86%);
  --game-badge-ink: #e0d9d1;
}
:root[data-color-scheme="kobalt"] {
  --scheme-accent: #0891b2;
  --gradient: linear-gradient(135deg, #0891b2, #7c3aed);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #0e7490;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(8,145,178,.12),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(124,58,237,.10),transparent 70%);
  --page: #f6f8fc;
  --surface: #f1f4f9;
  --ink: #0f172a;
  --muted: #475569;
  --line: #ccd0d6;
  --status-head: #eaedf3;
  --status-body: #fafbfd;
  --game-shelf: #ecf0f5;
  --game-shelf-border: #c3c7cd;
  --game-card-surface: #fafbfd;
  --game-card-border: #d5d9df;
  --game-card-cover: #e8ebf1;
  --game-shelf-ink: #0f172a;
  --game-shelf-muted: #475569;
  --game-badge-background: rgb(246 248 252 / 90%);
  --game-badge-ink: #222a3b;
}
:root[data-theme="dark"][data-color-scheme="kobalt"] {
  --scheme-accent-dark: #06b6d4;
  --gradient: linear-gradient(135deg, #06b6d4, #8b5cf6);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #22d3ee;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(6,182,212,.16),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(139,92,246,.16),transparent 70%);
  --page: #0a0e1a;
  --surface: #111827;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #222631;
  --status-head: #181f2d;
  --status-body: #111521;
  --game-shelf: #151c2b;
  --game-shelf-border: #2c303b;
  --game-card-surface: #0f131e;
  --game-card-border: #1e222e;
  --game-card-cover: #1a212f;
  --game-shelf-ink: #f1f5f9;
  --game-shelf-muted: #94a3b8;
  --game-badge-background: rgb(10 14 26 / 86%);
  --game-badge-ink: #dadee3;
}
:root[data-color-scheme="reaktor"] {
  --scheme-accent: #047857;
  --gradient: linear-gradient(135deg, #047857, #4d7c0f);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #065f46;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(4,120,87,.12),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(77,124,15,.10),transparent 70%);
  --page: #eef4ef;
  --surface: #e7efe8;
  --ink: #0d1a14;
  --muted: #3f564c;
  --line: #c3cbc5;
  --status-head: #e0e9e2;
  --status-body: #f6f9f6;
  --game-shelf: #e3ebe4;
  --game-shelf-border: #bac2bc;
  --game-card-surface: #f5f8f5;
  --game-card-border: #ccd4ce;
  --game-card-cover: #dee6e0;
  --game-shelf-ink: #0d1a14;
  --game-shelf-muted: #3f564c;
  --game-badge-background: rgb(238 244 239 / 90%);
  --game-badge-ink: #202c27;
}
:root[data-theme="dark"][data-color-scheme="reaktor"] {
  --scheme-accent-dark: #10b981;
  --gradient: linear-gradient(135deg, #10b981, #a3e635);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #34d399;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(16,185,129,.16),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(163,230,53,.12),transparent 70%);
  --page: #05100c;
  --surface: #0a1a14;
  --ink: #e6f5ee;
  --muted: #8fb3a4;
  --line: #1c2723;
  --status-head: #11211b;
  --status-body: #0c1713;
  --game-shelf: #0e1e18;
  --game-shelf-border: #26312d;
  --game-card-surface: #0a1511;
  --game-card-border: #18241f;
  --game-card-cover: #13231d;
  --game-shelf-ink: #e6f5ee;
  --game-shelf-muted: #8fb3a4;
  --game-badge-background: rgb(5 16 12 / 86%);
  --game-badge-ink: #d0ded7;
}
:root[data-color-scheme="magenta"] {
  --scheme-accent: #a21caf;
  --gradient: linear-gradient(135deg, #a21caf, #2563eb);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #86198f;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(162,28,175,.12),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(37,99,235,.10),transparent 70%);
  --page: #f7f4fd;
  --surface: #f2eefb;
  --ink: #17102b;
  --muted: #4c4166;
  --line: #ccc9d5;
  --status-head: #ebe7f5;
  --status-body: #fbf9fe;
  --game-shelf: #eeeaf7;
  --game-shelf-border: #c3c0cc;
  --game-card-surface: #faf8fe;
  --game-card-border: #d6d2de;
  --game-card-cover: #e9e5f3;
  --game-shelf-ink: #17102b;
  --game-shelf-muted: #4c4166;
  --game-badge-background: rgb(247 244 253 / 90%);
  --game-badge-ink: #2a233c;
}
:root[data-theme="dark"][data-color-scheme="magenta"] {
  --scheme-accent-dark: #d946ef;
  --gradient: linear-gradient(135deg, #d946ef, #60a5fa);
  --gradient-line: var(--gradient);
  --gradient-decor: var(--gradient);
  --scheme-accent-soft: #e879f9;
  --ambient: radial-gradient(ellipse 60% 55% at 50% 40%,rgba(217,70,239,.16),transparent 70%),radial-gradient(ellipse 55% 45% at 82% 18%,rgba(96,165,250,.14),transparent 70%);
  --page: #0b0716;
  --surface: #150e26;
  --ink: #f2eefb;
  --muted: #a99fc4;
  --line: #24202f;
  --status-head: #1c152c;
  --status-body: #120e1d;
  --game-shelf: #19122a;
  --game-shelf-border: #2e2a39;
  --game-card-surface: #100c1b;
  --game-card-border: #201c2d;
  --game-card-cover: #1e172f;
  --game-shelf-ink: #f2eefb;
  --game-shelf-muted: #a99fc4;
  --game-badge-background: rgb(11 7 22 / 86%);
  --game-badge-ink: #dbd7e4;
}
:root[data-accent="blue"] { --accent: #326fcb; }
:root[data-accent="green"] { --accent: #2f7a55; }
:root[data-accent="violet"] { --accent: #7552b7; }
:root[data-accent="gold"] { --accent: #946700; }
:root[data-theme="dark"][data-accent="blue"] { --accent: #78adff; }
:root[data-theme="dark"][data-accent="green"] { --accent: #70d5a0; }
:root[data-theme="dark"][data-accent="violet"] { --accent: #b99af2; }
:root[data-theme="dark"][data-accent="gold"] { --accent: #efbd59; }
:root[data-accent="custom"] { --accent: var(--custom-accent, #e65d38); }

/* Eine ausdrueckliche Akzentwahl schaltet die Musterfarbe mit. "Koralle" ist die
:root[data-typography="classic"] {
  --font-heading: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: Georgia, Cambria, "Times New Roman", Times, serif;
}
:root[data-typography="modern"] {
  --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-typography="humanist"] {
  --font-heading: "Trebuchet MS", "Segoe UI", Ubuntu, sans-serif;
  --font-body: "Segoe UI", Ubuntu, "Trebuchet MS", system-ui, sans-serif;
  --font-ui: "Segoe UI", Ubuntu, system-ui, sans-serif;
}
:root[data-typography="neutral"] {
  --font-heading: Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-body: Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-ui: Arial, Helvetica, "Liberation Sans", sans-serif;
}
:root[data-typography="playful"] {
  --font-heading: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --font-body: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --font-ui: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
}
:root[data-heading-font="book"] { --font-heading: Georgia, Cambria, "Times New Roman", Times, serif; }
:root[data-heading-font="palatino"] { --font-heading: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
:root[data-heading-font="system"] { --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root[data-heading-font="humanist"] { --font-heading: "Trebuchet MS", "Segoe UI", Ubuntu, sans-serif; }
:root[data-heading-font="neutral"] { --font-heading: Arial, Helvetica, "Liberation Sans", sans-serif; }
:root[data-heading-font="comic"] { --font-heading: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive; }
:root[data-body-font="book"] { --font-body: Georgia, Cambria, "Times New Roman", Times, serif; }
:root[data-body-font="palatino"] { --font-body: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
:root[data-body-font="system"] { --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root[data-body-font="humanist"] { --font-body: "Trebuchet MS", "Segoe UI", Ubuntu, sans-serif; }
:root[data-body-font="neutral"] { --font-body: Arial, Helvetica, "Liberation Sans", sans-serif; }
:root[data-body-font="comic"] { --font-body: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive; }
:root[data-interface-font="book"] { --font-ui: Georgia, Cambria, "Times New Roman", Times, serif; }
:root[data-interface-font="palatino"] { --font-ui: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
:root[data-interface-font="system"] { --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root[data-interface-font="humanist"] { --font-ui: "Trebuchet MS", "Segoe UI", Ubuntu, sans-serif; }
:root[data-interface-font="neutral"] { --font-ui: Arial, Helvetica, "Liberation Sans", sans-serif; }
:root[data-interface-font="comic"] { --font-ui: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive; }
:root[data-article-font="palatino"] { --article-font: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
:root[data-article-font="baskerville"] { --article-font: Baskerville, "Baskerville Old Face", "Hoefler Text", Georgia, serif; }
:root[data-article-font="charter"] { --article-font: Charter, "Bitstream Charter", "Sitka Text", Georgia, serif; }
:root[data-article-font="cambria"] { --article-font: Cambria, Constantia, Georgia, serif; }
:root[data-article-font="times"] { --article-font: "Times New Roman", Times, "Nimbus Roman No9 L", serif; }
:root[data-article-font="didot"] { --article-font: Didot, "Bodoni MT", "Bodoni 72", Georgia, serif; }
:root[data-article-font="system"] { --article-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root[data-article-font="humanist"] { --article-font: "Trebuchet MS", "Segoe UI", Ubuntu, sans-serif; }
:root[data-article-font="neutral"] { --article-font: Arial, Helvetica, "Liberation Sans", sans-serif; }
:root[data-article-font="comic"] { --article-font: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive; }
:root[data-technical-font="apple"] { --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace; }
:root[data-technical-font="windows"] { --font-mono: "Cascadia Mono", Consolas, "Lucida Console", monospace; }
:root[data-technical-font="liberation"] { --font-mono: "Liberation Mono", "DejaVu Sans Mono", monospace; }
:root[data-technical-font="courier"] { --font-mono: "Courier New", Courier, monospace; }
:root[data-technical-size="compact"] {
  --technical-size-2xs: .54rem;
  --technical-size-xs: .56rem;
  --technical-size-sm: .59rem;
  --technical-size-base: .62rem;
  --technical-size-md: .64rem;
  --technical-size-lg: .68rem;
  --technical-size-xl: .72rem;
  --technical-size-home-date: .85rem;
}
:root[data-technical-size="large"] {
  --technical-size-2xs: .675rem;
  --technical-size-xs: .7rem;
  --technical-size-sm: .7375rem;
  --technical-size-base: .775rem;
  --technical-size-md: .8rem;
  --technical-size-lg: .85rem;
  --technical-size-xl: .9rem;
  --technical-size-home-date: 1.0625rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: var(--page); background-image: var(--ambient, none); transition: background-color .22s ease; }
body { margin: 0; min-width: 320px; color: var(--ink); font: 400 16px/1.65 var(--font-body); transition: background-color .22s ease, color .22s ease; }
/* Die Musterebene liegt hinter allen Inhalten. Deshalb trägt `html` Seitenfarbe und
   Leuchtverlauf, `body::before` zeichnet Form plus Musterfarbe darüber. Ohne
   Masken-Unterstützung entfällt die Ebene vollständig, statt die Fläche zu tönen. */
@supports (-webkit-mask-image: url("")) or (mask-image: url("")) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--pattern-color);
    opacity: var(--pattern-opacity);
    pointer-events: none;
    transition: background-color .22s ease;
    -webkit-mask-image: var(--pattern-image), radial-gradient(ellipse 82% 98% at 50% 10%, #000 30%, transparent 78%);
    -webkit-mask-size: var(--pattern-size), 100% 100%;
    -webkit-mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: var(--pattern-image), radial-gradient(ellipse 82% 98% at 50% 10%, #000 30%, transparent 78%);
    mask-size: var(--pattern-size), 100% 100%;
    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;
  }
  @media print { body::before { display: none; } html { background-image: none; } }
}
button, input, select, textarea, summary, nav { font-family: var(--font-ui); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
a { color: inherit; text-decoration-color: currentColor; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button { appearance: none; box-shadow: none; }

@supports (text-decoration-color: color-mix(in srgb, currentColor 40%, transparent)) {
  a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
}

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: var(--page); }
@supports (background: color-mix(in srgb, var(--page) 92%, transparent)) {
  .site-header { background: color-mix(in srgb, var(--page) 92%, transparent); }
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .site-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.site-header__inner, .site-footer__inner { margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header__inner { width: min(1600px, calc(100% - 48px)); }
.site-footer__inner { width: min(1120px, calc(100% - 48px)); }
.site-header__inner { min-height: 78px; gap: 28px; }
.brand { font: 400 2rem/1 var(--font-heading); text-decoration: none; letter-spacing: -.03em; white-space: nowrap; }
.header-actions, nav { display: flex; align-items: center; }
.header-actions { gap: 22px; }
nav { gap: 20px; }
nav a { color: var(--muted); font-size: .83rem; font-weight: 600; text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); }
.site-navigation { --navigation-hover-x: 0px; --navigation-hover-width: 0px; position: relative; gap: 2px; isolation: isolate; }
.site-navigation::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 0; width: var(--navigation-hover-width); height: 34px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); opacity: 0; transform: translate(var(--navigation-hover-x), -50%); transition: width .2s ease, opacity .16s ease, transform .2s ease; }
.site-navigation[data-hover-active="true"]::before { opacity: 1; }
.site-navigation a { position: relative; z-index: 1; padding: 7px 10px; border-radius: 4px; transition: color .16s ease; }
.site-navigation a:hover { color: var(--accent); }
.site-navigation .site-navigation__search-button { width: 38px; height: 28px; display: grid; margin-right: 7px; padding: 0 10px 0 0; border-right: 1px solid var(--line); border-radius: 0; place-items: center; color: var(--muted); }
.site-navigation__search-button span, .site-navigation__search-button svg { width: 17px; height: 17px; display: block; }
.site-navigation__search-button:hover, .site-navigation__search-button[aria-expanded="true"], .site-navigation__search-button[aria-current="page"] { color: var(--accent); }
.header-separator { width: 1px; height: 28px; display: block; flex: 0 0 auto; background: var(--line); }
.header-separator--small { height: 12px; }
.follow-link { min-height: 34px; display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1; text-decoration: none; overflow: hidden; box-shadow: none; transition: border-color .18s ease, color .18s ease; }
.follow-link > span:first-child { display: grid; padding: 0 11px; place-items: center; }
.follow-link__icon { width: 34px; display: grid; border-left: 1px solid var(--line); place-items: center; }
.follow-link__icon svg { width: 15px; height: 15px; display: block; }
.follow-link:hover { border-color: var(--accent); color: var(--accent); }
.follow-link[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { width: 38px; height: 38px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.mobile-menu summary:hover { border-color: var(--accent); }
.mobile-menu summary:hover span { background: var(--accent); }
.mobile-menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] summary span:nth-child(2) { opacity: 0; }
.mobile-menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--page); box-shadow: 0 16px 32px rgb(24 24 24 / .12); }
.mobile-menu__panel nav { display: grid; gap: 0; }
.mobile-menu__panel nav a { padding: 11px 10px; border-radius: 2px; color: var(--ink); font-size: .88rem; }
.mobile-menu__panel nav a:hover { background: var(--surface); color: var(--accent); }
.mobile-menu__panel nav a[aria-current="page"] { color: var(--accent); }
.mobile-menu__follow { display: flex; margin-top: 8px; }
.language-switcher { gap: 0; }
.language-switcher::before { content: ""; width: 1px; height: 28px; display: block; margin-right: 12px; flex: 0 0 auto; background: var(--line); }
.language-switcher a { width: 34px; height: 30px; display: grid; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font: 600 .68rem/1 var(--font-ui); letter-spacing: .06em; place-items: center; text-decoration: none; box-shadow: none; }
.language-switcher a:hover { border-color: var(--accent); color: var(--accent); }

.site-breadcrumbs { width: min(var(--content-width), calc(100% - 48px)); margin: clamp(24px, 3.5vw, 46px) auto 0; }
.site-breadcrumbs__list { max-width: 100%; width: fit-content; display: flex; align-items: center; gap: 0; margin: 0 auto; padding: 0; list-style: none; overflow: hidden; }
.site-breadcrumbs__list li { min-width: 0; display: flex; align-items: center; flex: 0 0 auto; }
.site-breadcrumbs__list li:last-child { flex: 1 1 auto; }
.site-breadcrumbs__list li + li::before { content: "›"; display: block; flex: 0 0 auto; color: var(--muted); font: 700 .87rem/1 var(--font-ui); opacity: .55; }
.site-breadcrumbs__list a, .site-breadcrumbs__list span { min-width: 0; display: block; padding: 7px 10px; color: var(--muted); font: 700 .87rem/1.2 var(--font-ui); letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.site-breadcrumbs__list a:hover { color: var(--accent); }
.site-breadcrumbs__list span[aria-current="page"] { max-width: min(42vw, 420px); color: var(--accent); overflow: hidden; text-overflow: ellipsis; }

.theme-toggle { position: relative; width: 56px; height: 30px; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; box-shadow: none; transition: border-color .2s, background .2s; }
.theme-toggle:hover { border-color: var(--accent); }

/* Theme-Wechsel-Schleier (Hell/Dunkel und Farbschema): Rueckfall, wenn die
   Ansichtsuebergaenge des Browsers nicht verfuegbar sind. Ein Vorhang, der in
   der alten Seitenfarbe beginnt, weich in die neue uebergeht und dann ausblendet.
   Zuruecknehmen: diesen Block loeschen und in assets/js/theme.js die mit
   "Theme-Wechsel-Schleier" markierten Stellen entfernen. */
.theme-fade-veil { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--page); opacity: 1; transition: background-color 480ms ease-in-out, opacity 320ms ease-in; }
.theme-fade-veil.is-fading { opacity: 0; }

/* Theme-Wechsel-Aufdeckung (Versuch): der neue Zustand wird in einem wachsenden
   Kreis vom angeklickten Element her aufgedeckt. So bekommt kein Bild die
   Zielfarbe auf einmal, und der Inhalt bleibt lesbar. Ohne Unterstuetzung greift
   der Schleier darueber. Zuruecknehmen: diesen Block loeschen und in
   assets/js/theme.js den mit "Theme-Wechsel-Aufdeckung" markierten Block samt
   der beiden Aufrufe entfernen. */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: theme-reveal 720ms ease-in-out; }
@keyframes theme-reveal {
  from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
.toggle-thumb { position: absolute; z-index: 0; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .22s ease, background .22s ease; }
[data-theme="dark"] .toggle-thumb { transform: translateX(26px); }
.icon { position: relative; z-index: 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-sun { color: var(--page); }
[data-theme="dark"] .icon-sun { color: var(--muted); }
[data-theme="dark"] .icon-moon { color: var(--page); }

.color-scheme-switcher { position: relative; }
.color-scheme-switcher summary { width: 34px; height: 30px; display: grid; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); cursor: pointer; list-style: none; place-items: center; box-shadow: none; }
.color-scheme-switcher summary::-webkit-details-marker { display: none; }
.color-scheme-switcher summary:hover, .color-scheme-switcher[open] summary { border-color: var(--accent); color: var(--accent); }
.color-scheme-switcher__options { position: absolute; z-index: 110; top: calc(100% + 9px); right: 0; width: 210px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); display: grid; gap: 3px; padding: 7px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--page); box-shadow: none; }
.color-scheme-switcher__options button { min-height: 38px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; font: 600 .76rem/1.2 var(--font-ui); text-align: left; }
.color-scheme-switcher__options button:hover, .color-scheme-switcher__options button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.color-scheme-switcher__swatch { position: relative; width: 22px; height: 22px; display: block; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); overflow: hidden; }
.color-scheme-switcher__swatch[data-scheme="site"] { background: linear-gradient(135deg, var(--page) 0 48%, var(--accent) 48% 52%, var(--surface) 52%); }
/* Each colour scheme's dot carries its own palette, so the schemes are tellable apart.
   The three tokens (--swatch-light / -accent / -dark) hold every intensity, so the dot
   can be made subtle (thin stripe), medium (broad band) or strong (half accent) by
   editing the one shared rule below and nothing else. They also feed the summary dot:
   it trades its data-scheme attribute on every switch (see theme.js), so it shows the
   scheme currently in use without any extra script. */
.color-scheme-switcher__swatch[data-scheme="contrast"] { --swatch-light: #ffffff; --swatch-accent: #080808; --swatch-dark: #0b0b0b; }
.color-scheme-switcher__swatch[data-scheme="elfenbein"] { --swatch-light: #eee7da; --swatch-accent: #d97706; --swatch-dark: #1b1410; }
.color-scheme-switcher__swatch[data-scheme="kobalt"] { --swatch-light: #f6f8fc; --swatch-accent: #0891b2; --swatch-dark: #0a0e1a; }
.color-scheme-switcher__swatch[data-scheme="reaktor"] { --swatch-light: #eef4ef; --swatch-accent: #047857; --swatch-dark: #05100c; }
.color-scheme-switcher__swatch[data-scheme="magenta"] { --swatch-light: #f7f4fd; --swatch-accent: #a21caf; --swatch-dark: #0b0716; }
.color-scheme-switcher__swatch[data-scheme]:not([data-scheme="site"]) { background: linear-gradient(135deg, var(--swatch-light, var(--page)) 0 50%, var(--swatch-accent, var(--accent)) 50%); }
.color-scheme-switcher__swatch.color-scheme-switcher__summary-swatch { width: 18px; height: 18px; border-color: currentColor; }
.color-scheme-switcher__group { display: grid; gap: 3px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.color-scheme-switcher__swatch[data-pattern-option-swatch]::before { content: ""; position: absolute; inset: 0; background-color: var(--pattern-color); opacity: .55; }
.color-scheme-switcher__swatch[data-pattern-option-swatch="none"] { background: linear-gradient(135deg, var(--surface) 0 50%, var(--page) 50%); }
.color-scheme-switcher__swatch[data-pattern-option-swatch="none"]::before { content: none; }
.color-scheme-switcher__swatch[data-pattern-option-swatch="site"] { background: linear-gradient(135deg, var(--page) 0 48%, var(--accent) 48% 52%, var(--surface) 52%); }
@supports (-webkit-mask-image: url("")) or (mask-image: url("")) {
  .color-scheme-switcher__swatch[data-pattern-option-swatch="honeycomb"]::before { -webkit-mask-image: url("../pattern/honeycomb.svg"); -webkit-mask-size: 11px 19px; -webkit-mask-repeat: repeat; mask-image: url("../pattern/honeycomb.svg"); mask-size: 11px 19px; mask-repeat: repeat; }
  .color-scheme-switcher__swatch[data-pattern-option-swatch="scatter"]::before { -webkit-mask-image: url("../pattern/scatter-mark.svg"); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-image: url("../pattern/scatter-mark.svg"); mask-size: 100% 100%; mask-repeat: no-repeat; }
}

.search-dialog { width: min(620px, calc(100% - 32px)); max-height: min(720px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--page); color: var(--ink); box-shadow: 0 28px 90px rgb(0 0 0 / .34); overflow: hidden; }
.search-dialog[open] { animation: search-dialog-in .22s ease-out both; }
.search-dialog::backdrop { background: rgb(18 18 18 / .58); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); animation: search-backdrop-in .2s ease-out both; }
.search-dialog__mascot { height: 190px; display: grid; border-bottom: 1px solid var(--line); background: var(--surface); place-items: center; color: var(--ink); overflow: hidden; }
.search-dialog__mascot svg { width: min(320px, 88%); height: 170px; display: block; }
.search-mascot__character { transform-origin: 50% 88%; animation: search-mascot-bob 2.8s ease-in-out infinite; }
.search-mascot__glass { transform-origin: 210px 91px; animation: search-mascot-look 2.8s ease-in-out infinite; }
.search-mascot__sparkles circle { animation: search-mascot-sparkle 1.8s ease-in-out infinite; }
.search-mascot__sparkles circle:nth-child(2) { animation-delay: -.6s; }
.search-mascot__sparkles circle:nth-child(3) { animation-delay: -1.2s; }
.search-dialog__body { padding: 28px 30px 30px; }
.search-dialog__body h2 { margin: 9px 0 24px; font-family: var(--font-ui); font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.search-dialog__body label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.search-dialog__body input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-ui); }
.search-dialog__body input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.search-dialog__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--status-head); }
.search-dialog__footer button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; font: 600 .78rem/1 var(--font-ui); }
.search-dialog__footer button:hover { border-color: var(--accent); color: var(--accent); }
.search-dialog__footer .search-dialog__submit { border-color: var(--accent); background: var(--accent); color: #fff; }
.search-dialog__footer .search-dialog__submit:hover { color: #fff; filter: brightness(.94); }
@keyframes search-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes search-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes search-mascot-bob { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes search-mascot-look { 0%, 100% { transform: rotate(-4deg) translateX(0); } 50% { transform: rotate(5deg) translateX(3px); } }
@keyframes search-mascot-sparkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

.content { width: min(var(--content-width), calc(100% - 48px)); margin: 0 auto; padding: clamp(34px, 5.5vw, 75px) 0 clamp(68px, 11vw, 150px); }
.flow > * + * { margin-top: 54px; }
.page-intro { max-width: 680px; }
.eyebrow { color: var(--scheme-accent-soft, var(--muted)); font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
h1, h2, h3 { font-weight: 400; letter-spacing: -.04em; line-height: .98; }
h1 { max-width: 830px; margin: 14px 0 0; font-size: clamp(3.4rem, 9vw, 7rem); }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 2rem; }
.lede { max-width: 610px; margin: 27px 0 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.6; }
.page-intro .eyebrow, .status-intro .eyebrow { font-size: .85rem; }
.page-intro .lede, .status-intro .lede { font-weight: 600; }
.prose { max-width: 650px; }
.prose > * + * { margin-top: 1.45em; }
.prose h2 { margin-top: 1.9em; font-size: 2.3rem; }
.prose p { margin-bottom: 0; }
.prose a, .text-link { color: var(--accent); }
.prose blockquote { margin-inline: 0; padding-left: 24px; border-left: 2px solid var(--accent); color: var(--muted); font: italic 1.6rem/1.35 var(--font-heading); }
.prose .block { margin-top: 1.45em; }
.prose figure { margin: 2.4em 0; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 2px; }
.prose figcaption { margin-top: .7rem; color: var(--muted); font-size: .78rem; }
.h-entry .article-header h1, .h-entry .article-lede, .h-entry .article-body, .h-entry .article-body h2, .h-entry .article-body h3, .h-entry .article-body h4, .h-entry .article-body h5, .h-entry .article-body h6, .h-entry .article-body blockquote, .h-entry .article-outro { font-family: var(--article-font); }
.article-meta { width: fit-content; display: flex; flex-wrap: wrap; gap: 9px 20px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface); color: var(--muted); font: 600 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .035em; }
.article-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.article-meta__icon { width: 17px; height: 17px; display: inline-grid; color: var(--accent); place-items: center; }
.article-meta__icon svg { width: 100%; height: 100%; display: block; }
.article-meta__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.article-meta__link:hover { color: var(--accent); }
.article-lede { max-width: 650px; }
.article-lede--highlight { padding: 18px 21px; border-left: 3px solid var(--accent); background: var(--surface); color: var(--ink); font-weight: 600; }
/* Gemeinsame Fläche für Einzel- und Standardseiten (Optik der Kurznotiz).
   Die Fläche ist rund 25 % breiter als die Textspalte (beidseitig je ~12,5 %) und an
   schmalen Viewports auf die verfügbare Breite begrenzt. */
.article-sheet, .sheet { --sheet-bleed: min(12.5%, calc((100vw - 48px - 100%) / 2)); margin-inline: calc(-1 * var(--sheet-bleed)); border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); overflow: hidden; }
.article-sheet .article-header, .sheet > .page-intro { margin: 0; padding: 30px clamp(18px, 3vw, 30px) 28px; border-bottom: 1px solid var(--line); }
.article-sheet .article-body, .sheet__body { max-width: none; padding: 30px clamp(18px, 3vw, 30px) 34px; }
/* Lange Wörter (z. B. „Datenschutzerklärung“) dürfen innerhalb der Fläche trennen,
   statt über den Rand zu laufen und dort abgeschnitten zu werden. */
.sheet h1, .sheet h2, .sheet h3, .article-sheet h1, .article-sheet h2, .article-sheet h3 { hyphens: auto; overflow-wrap: break-word; }
.article-body { font-size: 1.08rem; line-height: 1.72; }
.article-body figure { margin: 2.4em 0; }
.article-body figure img, .article-body > p > img { border: 1px solid var(--line); border-radius: 0; }
.article-body figcaption { font-family: var(--font-ui); }
.content-callout, .content-link-card { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); }
.content-callout { padding: 20px 22px; }
.content-callout[data-tone="tip"] { border-left-width: 8px; }
.content-callout[data-tone="warning"] { border-style: double; border-left-width: 7px; }
.content-callout__label, .content-link-card__title { margin: 0; color: var(--ink); font: 700 .83rem/1.3 var(--font-ui); }
.content-callout__text, .content-link-card__text { color: var(--muted); font-family: var(--font-ui); font-size: .88rem; }
.content-callout__text > *:first-child, .content-link-card__text > *:first-child { margin-top: 8px; }
.content-callout__text > *:last-child, .content-link-card__text > *:last-child { margin-bottom: 0; }
.content-link-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 22px; }
.content-link-card > a { align-self: stretch; display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid var(--line); color: var(--accent); font: 700 .75rem/1.25 var(--font-ui); text-decoration: none; }
.content-link-card > a:hover { border-color: var(--accent); }
.article-outro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 650px; margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--line); }
.article-outro__panel { min-width: 0; padding: 20px; border: 1px solid var(--line); background: var(--surface); }
.article-outro__panel header { display: flex; align-items: center; gap: 10px; }
.article-outro__panel h2 { margin: 0; font-family: var(--article-font); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.article-outro__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
.article-outro__icon svg { width: 100%; height: 100%; display: block; }
.article-outro__panel ul { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.article-outro__panel li { min-width: 0; }
.article-outro__panel li a { display: block; overflow: hidden; color: var(--ink); font-size: .968rem; text-decoration: underline; text-decoration-color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }
.article-outro__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.article-outro__actions button, .article-outro__actions a { min-height: 34px; display: inline-flex; align-items: center; padding: 8px 11px; border: 1px solid var(--line); background: var(--page); color: var(--muted); cursor: pointer; font: 700 .72rem/1.2 var(--font-ui); text-decoration: none; }
.article-outro__actions button[hidden] { display: none; }
.article-outro__actions button:hover, .article-outro__actions a:hover { border-color: var(--accent); color: var(--accent); }

.recent { padding-top: 48px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.section-heading a, .text-link { font-size: .8rem; font-weight: 700; text-decoration: none; }
main.content > p > .text-link { font-size: calc(.8rem * 1.25); }
.article-collection { --article-columns: 3; --article-width: 1400px; --collection-toolbar-width: 1400px; position: relative; left: 50%; width: min(var(--article-width), calc(100vw - 48px)); transform: translateX(-50%); }
.article-collection[data-columns="1"] { --article-columns: 1; --article-width: 760px; }
.article-collection[data-columns="3"] { --article-columns: 3; --article-width: 1400px; }
.article-collection[data-columns="5"] { --article-columns: 5; --article-width: 1600px; }
.article-list { display: grid; grid-template-columns: repeat(var(--article-columns), minmax(0, 1fr)); gap: 22px; }
.article-item { min-width: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.article-item + .article-item { margin-top: 0; }
.article-item h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.article-item h2 a { text-decoration: none; }
.article-item .text-link { align-self: flex-start; margin-top: auto; padding-top: 24px; }
.collection-years { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.collection-years > span { color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.collection-years ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.collection-years a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--page); color: var(--muted); font: 600 var(--technical-size-xl)/1 var(--font-mono); text-decoration: none; }
.collection-years a:hover { border-color: var(--accent); color: var(--accent); }
.collection-years small { min-width: 18px; height: 18px; display: grid; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--technical-size-base); place-items: center; }
.collection-archive-intro h1 { font-variant-numeric: tabular-nums; }
.collection-archive-back { margin: 24px 0 0; }
.collection-archive-back a { color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; }
.collection-archive-back a:hover { color: var(--accent); }
.collection-archive { display: grid; gap: clamp(45px, 7vw, 78px); }
.collection-archive__month h2 { margin: 0 0 24px; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.collection-archive__month h2 a { text-decoration: none; }
.collection-archive__month h2 a:hover { color: var(--accent); }
.collection-archive__entries { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.collection-archive__entries li { display: grid; grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto; align-items: baseline; gap: 11px; }
.collection-archive__entries a { min-width: 0; font: 400 1.08rem/1.35 var(--font-heading); text-decoration: underline; text-decoration-color: var(--accent); }
.collection-archive__entries a:hover { color: var(--accent); }
.collection-archive__dots { min-width: 24px; border-bottom: 1px dotted var(--line); }
.collection-archive__entries time { color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .035em; white-space: nowrap; }
.archive-year-index__list { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.archive-year-index__list li { border-bottom: 1px solid var(--line); }
.archive-year-index__list a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 4vw, 36px) 0; font: 500 clamp(2.5rem, 7vw, 5rem)/1 var(--font-heading); text-decoration: none; }
.archive-year-index__list a span:last-child { color: var(--muted); font: 400 clamp(1.5rem, 4vw, 2.5rem)/1 var(--font-ui); transition: color .18s ease, transform .18s ease; }
.archive-year-index__list a:hover span:last-child { color: var(--accent); transform: translateX(5px); }
.archive-directory__entry-count { color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .035em; white-space: nowrap; }
.archive-directory__empty { padding: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.home-intro { position: relative; left: 50%; display: grid; width: min(1180px, calc(100vw - 48px)); grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); align-items: center; gap: clamp(64px, 10vw, 150px); transform: translateX(-50%); }
.home-intro__copy { min-width: 0; max-width: 650px; }
.home-intro__copy .prose { margin-top: 54px; }
.home-portrait { width: 100%; max-width: 340px; margin: 0; justify-self: end; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: none; overflow: hidden; }
.home-portrait img, .home-portrait > div { width: 100%; aspect-ratio: 4 / 5; display: block; }
.home-portrait img { object-fit: cover; }
.home-portrait { position: relative; }
.home-portrait::after { position: absolute; inset: auto 0 0 0; height: 2px; background-image: var(--gradient-decor); content: ''; pointer-events: none; }
.home-portrait > div { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 28px; color: var(--muted); font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.home-portrait__mark { position: relative; width: 76px; height: 58px; display: block; border: 1px solid var(--line); border-radius: 5px; }
.home-portrait__mark::before { position: absolute; top: 11px; right: 13px; width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; content: ''; }
.home-portrait__mark::after { position: absolute; right: 11px; bottom: 10px; left: 11px; height: 25px; border-bottom: 1px solid var(--accent); content: ''; transform: skewY(-24deg); }
.home-dashboard { position: relative; left: 50%; display: grid; width: min(1180px, calc(100vw - 48px)); gap: clamp(64px, 9vw, 120px); transform: translateX(-50%); }
.home-latest, .home-newsletter { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 14px 36px rgb(24 24 24 / .04); }
.home-latest { display: grid; grid-template-columns: minmax(170px, .28fr) 1fr; gap: 34px; padding: 28px 30px; box-shadow: none; }
.home-latest h2, .home-newsletter h2, .home-section-heading h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.home-latest h2 { align-self: center; font-size: clamp(3.125rem, 5.3125vw, 4.6875rem); font-weight: 500; }
.home-latest h2 span { display: block; background-image: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-latest__list { display: grid; align-content: center; gap: 13px; margin: 0; padding: 0; list-style: none; }
.home-latest__list li { min-width: 0; display: grid; align-items: center; grid-template-columns: 22px minmax(0, auto) minmax(24px, 1fr) auto; gap: 10px; }
.home-latest__icon { width: 20px; height: 20px; display: grid; color: var(--accent); place-items: center; }
.home-latest__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.home-latest a { min-width: 0; overflow: hidden; color: var(--ink); font-family: var(--font-heading); font-size: 1.4rem; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.home-latest a:hover { color: var(--accent); }
.home-list-dots { min-width: 20px; height: .7em; border-bottom: 1px dotted var(--muted); }
@supports (border-color: color-mix(in srgb, black 50%, transparent)) {
  .home-list-dots { border-bottom-color: color-mix(in srgb, var(--muted) 72%, transparent); }
}
.home-latest time { color: var(--muted); font: 500 var(--technical-size-home-date)/1 var(--font-mono); white-space: nowrap; }
.home-shelf { display: grid; gap: 28px; }
.home-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.home-section-heading a { color: var(--muted); font-size: .95rem; font-weight: 700; text-decoration: none; }
.home-section-heading a:hover { color: var(--accent); }
.home-shelf__covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.home-shelf__covers a { position: relative; min-width: 0; display: block; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); text-decoration: none; overflow: hidden; box-shadow: none; transition: border-color .18s ease, transform .18s ease; }
.home-shelf__covers a::after { position: absolute; z-index: 1; inset: 0; border: 1px solid transparent; border-radius: inherit; content: ""; pointer-events: none; transition: border-color .18s ease; }
.home-shelf__covers a:hover, .home-shelf__covers a:focus-visible { border-color: var(--accent); color: var(--accent); box-shadow: none; transform: translateY(-4px); }
.home-shelf__covers a:hover::after, .home-shelf__covers a:focus-visible::after { border-color: var(--accent); }
.home-shelf__covers img, .home-shelf__placeholder { width: 100%; aspect-ratio: 2 / 3; display: block; object-fit: cover; }
.home-shelf__placeholder { display: grid; font-size: 2.5rem; place-items: center; }
.home-newsletter { display: grid; grid-template-columns: minmax(190px, .38fr) 1fr; gap: 42px; padding: 30px; }
.home-newsletter > div p { max-width: 320px; margin: 14px 0 0; color: var(--muted); font-size: .85rem; }
.home-newsletter { border-color: transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--gradient-line); background-clip: padding-box, border-box; background-origin: border-box; }
.home-newsletter form { align-self: center; padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); }
.home-newsletter label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.home-newsletter form > div { display: flex; gap: 9px; }
.home-newsletter input { min-width: 0; height: 43px; flex: 1; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-ui); }
.home-newsletter input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.home-newsletter button { min-width: 104px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; font: 700 .76rem/1 var(--font-ui); }
.home-newsletter button:hover { filter: brightness(.94); }
.home-newsletter input:disabled, .home-newsletter button:disabled { cursor: not-allowed; opacity: .55; }
.home-newsletter__notice { margin: 11px 0 0; color: var(--muted); font-size: .68rem; }
.active-filter { margin-top: 22px; color: var(--muted); font-size: .84rem; }
.search-page-form { display: flex; gap: 10px; max-width: 650px; }
.search-page-form input { min-width: 0; height: 46px; flex: 1; padding: 0 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-ui); }
.search-page-form input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.search-page-form button { min-width: 92px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; font: 700 .8rem/1 var(--font-ui); }
.search-page-form button:hover { filter: brightness(.94); }
.search-summary { margin: 0 0 18px; color: var(--muted); font-size: .84rem; }
.search-results { border-top: 1px solid var(--line); }
.search-result { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.search-result h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.search-result h2 a { text-decoration: none; }
.search-result p { max-width: 620px; margin: 12px 0 0; color: var(--muted); font-size: .92rem; }
.search-empty { padding: 26px 0; border-block: 1px solid var(--line); color: var(--muted); }
.collection-empty { padding: 26px 0; border-block: 1px solid var(--line); color: var(--muted); }
.entry-tags-block { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--line); }
.entry-tags__label { color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: .04em; }
.tag-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-pills a, .tag-pills > li > span { display: block; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--font-mono); font-size: .81rem; text-decoration: none; }
.tag-pills a:hover { border-color: var(--accent); color: var(--accent); }
.article-sheet .entry-tags-block { padding: 15px clamp(18px, 3vw, 30px); }
.status-intro { max-width: 650px; }
.status-intro .lede p { margin-bottom: 0; }
.status-list { --status-columns: 3; --status-width: 1400px; --collection-toolbar-width: 1400px; position: relative; left: 50%; width: min(var(--status-width), calc(100vw - 48px)); transform: translateX(-50%); }
.status-list[data-columns="1"] { --status-columns: 1; --status-width: 650px; }
.status-list[data-columns="3"] { --status-columns: 3; --status-width: 1400px; }
.status-list[data-columns="5"] { --status-columns: 5; --status-width: 1600px; }
.status-feed { column-count: var(--status-columns); column-gap: 22px; }
.status-feed .status-entry { display: inline-flex; width: 100%; margin: 0 0 22px; break-inside: avoid; vertical-align: top; }
.status-entry { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.status-entry__header { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); background: var(--status-head); }
.status-entry__date { color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .04em; text-decoration: none; }
a.status-entry__date { color: var(--ink); border-bottom: 1px solid var(--accent); }
.status-entry__date:hover { color: var(--accent); }
.status-entry__body { max-width: none; flex: 1; padding: 24px 20px 26px; }
.status-entry__body > :first-child { margin-top: 0; }
.status-entry__body > :last-child { margin-bottom: 0; }
.status-entry__body figure { max-width: 100%; }
.status-entry__body figure[data-ratio] > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2.4em 0 0; padding: 0; list-style: none; }
.status-entry__body figure[data-ratio] > ul img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; border-radius: 2px; object-fit: cover; }
.status-entry__body figure[data-ratio] > figcaption { margin-top: 10px; color: var(--muted); font-size: .76rem; }

.status-entry__footer { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--status-head); color: var(--muted); font: 500 var(--technical-size-base)/1.2 var(--font-mono); letter-spacing: .04em; }
.status-entry__footer a { color: var(--muted); text-decoration: none; }
.status-entry__footer a:hover { color: var(--accent); }
.photo-list { --photo-columns: 3; --photo-width: 1400px; --collection-toolbar-width: 1400px; position: relative; left: 50%; width: min(var(--photo-width), calc(100vw - 48px)); transform: translateX(-50%); }
.photo-list[data-columns="1"] { --photo-columns: 1; --photo-width: 900px; }
.photo-list[data-columns="3"] { --photo-columns: 3; --photo-width: 1400px; }
.photo-list[data-columns="5"] { --photo-columns: 5; --photo-width: 1600px; }
.photo-feed { display: grid; grid-template-columns: repeat(var(--photo-columns), minmax(0, 1fr)); gap: 22px; }
.photo-cover-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.photo-cover-card__link { display: block; color: inherit; text-decoration: none; }
.photo-cover-card__cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.photo-cover-card__cover img, .photo-cover-card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-cover-card__placeholder { display: grid; place-items: center; color: var(--muted); font-size: 4rem; }
.photo-cover-card__title { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: #fff; background: rgb(0 0 0 / .38); font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 600; hyphens: auto; line-height: 1; overflow-wrap: break-word; text-align: center; text-wrap: balance; }
.photo-list[data-columns="5"] .photo-cover-card__title { padding: 18px; font-size: clamp(1.15rem, 1.75vw, 1.65rem); line-height: 1.08; }
.photo-cover-card__link:hover .photo-cover-card__title, .photo-cover-card__link:focus-visible .photo-cover-card__title { background: rgb(0 0 0 / .56); color: var(--accent); }
.photo-entry { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.photo-entry__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--status-head); }
.photo-entry__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 14px 16px; background: var(--status-head); border-bottom: 1px solid var(--line); }
.photo-entry__title { grid-column: 2; margin: 0; text-align: center; font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.photo-entry__date { grid-column: 3; justify-self: end; color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .04em; }
.photo-entry__footer { color: var(--muted); font: 500 var(--technical-size-sm)/1.2 var(--font-mono); letter-spacing: .04em; }
.photo-entry__date, .photo-entry__footer a { color: var(--muted); text-decoration: none; }
.photo-entry__date:hover, .photo-entry__footer a:hover { color: var(--accent); }
.photo-entry__body { padding: 16px; }
.photo-entry .entry-tags-block { padding: 14px 16px; }
.photo-entry__figure { margin: 0; }
.photo-entry__figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.photo-entry__figure .photo-entry__image--full { aspect-ratio: auto; object-fit: contain; }
.photo-entry__figure figcaption { margin-top: 8px; color: var(--muted); font-size: .76rem; }
.photo-entry__placeholder { display: grid; min-height: 220px; place-items: center; background: var(--surface); color: var(--muted); font-size: 4rem; }
.photo-entry__caption { margin-top: 16px; color: var(--muted); font-size: .92rem; }
.photo-entry__caption > :first-child { margin-top: 0; }
.photo-entry__caption > :last-child { margin-bottom: 0; }
.photo-entry__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.photo-entry__meta div { min-width: 0; }
.photo-entry__meta dt { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: calc(var(--technical-size-base) * 1.25); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.photo-entry__meta dd { margin: 4px 0 0; font-size: calc(.78rem * 1.25); overflow-wrap: anywhere; }
.photo-entry__footer { justify-content: flex-start; flex-wrap: wrap; gap: 9px 18px; border-top: 1px solid var(--line); }
.audiobook-filters { position: relative; z-index: 2; left: 50%; display: flex; width: min(1400px, calc(100vw - 48px)); flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); transform: translateX(-50%); }
.audiobook-filters__label, .audiobook-filter summary, .audiobook-filters__reset { display: flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--muted); font: 500 .68rem/1.2 var(--font-ui); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.audiobook-filters__label { color: var(--ink); font-weight: 700; }
.audiobook-filters__label:hover { color: var(--accent); background: var(--status-body); }
.audiobook-filter { position: relative; border-left: 1px solid var(--line); }
.audiobook-filter summary { gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.audiobook-filter summary::-webkit-details-marker { display: none; }
.audiobook-filter summary::after { content: '↓'; color: var(--accent); font-size: .9rem; }
.audiobook-filter--active > summary { border-bottom: 2px solid var(--accent); color: var(--accent); }
.audiobook-filter[open] summary { background: var(--status-body); color: var(--ink); }
.audiobook-filter[open].audiobook-filter--active > summary { color: var(--accent); }
.audiobook-filter summary:hover { background: var(--status-body); color: var(--accent); }
.audiobook-filter[open] summary::after { content: '↑'; }
.audiobook-filter__options { position: absolute; z-index: 3; top: calc(100% + 1px); left: -1px; display: grid; min-width: max-content; max-width: min(280px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--line); border-radius: 0 0 5px 5px; background: var(--status-body); box-shadow: 0 14px 28px rgb(24 24 24 / .12); }
.audiobook-filter__options a { padding: 8px 10px; border-radius: 2px; color: var(--muted); font-size: .78rem; text-decoration: none; }
.audiobook-filter__options a[aria-current="true"] { color: var(--accent); background: var(--surface); }
.audiobook-filter__options a:hover { color: var(--accent); background: var(--surface); }
.audiobook-filters__reset { margin-left: auto; color: var(--accent); font-family: inherit; font-size: .78rem; font-weight: 700; text-transform: none; }
.collection-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
/* The view switcher keeps the geometry of the default column count: the collections
   below change their own width with data-columns, which would otherwise drag the
   toolbar (and its buttons) sideways whenever the column view changes. */
.article-collection .collection-toolbar, .status-list .collection-toolbar, .photo-list .collection-toolbar, .blogroll-list .collection-toolbar { position: relative; left: 50%; width: min(var(--collection-toolbar-width, 1400px), calc(100vw - 48px)); transform: translateX(-50%); }
.collection-count { display: flex; align-items: center; gap: 6px; min-height: 38px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.collection-count strong { color: var(--ink); font-weight: 700; }
.collection-view { display: none; align-items: center; gap: 4px; min-height: 38px; padding: 4px 5px 4px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
[data-column-enhanced="true"] .collection-view { display: flex; }
.collection-view__label { margin-right: 5px; color: var(--muted); font: 500 .62rem/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.collection-view button { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--muted); cursor: pointer; font: 500 .68rem/1 var(--font-ui); box-shadow: none; }
.collection-view button[aria-pressed="true"] { border-color: var(--accent); background: var(--status-body); color: var(--accent); }
.collection-view button:hover { border-color: var(--accent); color: var(--accent); }
.collection-toolbar--dark .collection-count, .collection-toolbar--dark .collection-view { border-color: var(--game-card-border); background: var(--game-card-surface); color: var(--game-shelf-muted); }
.collection-toolbar--dark .collection-count strong { color: var(--game-shelf-ink); }
.collection-toolbar--dark .collection-view button { border-color: var(--game-card-border); background: var(--game-shelf); color: var(--game-shelf-muted); }
.collection-toolbar--dark .collection-view button[aria-pressed="true"] { border-color: var(--accent); background: var(--game-card-cover); color: var(--accent); }
.collection-toolbar--dark .collection-view button:hover { border-color: var(--accent); background: var(--game-card-cover); color: var(--accent); }
.audiobook-list { --audiobook-columns: 3; position: relative; left: 50%; width: min(1400px, calc(100vw - 48px)); padding: 18px; border: 1px solid var(--game-shelf-border); border-radius: 5px; background: var(--game-shelf); color: var(--game-shelf-ink); transform: translateX(-50%); box-shadow: 0 18px 46px rgb(15 19 24 / .18); transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.audiobook-list[data-columns="1"] { --audiobook-columns: 1; }
.audiobook-list[data-columns="1"] .audiobook-list__grid { width: min(840px, 100%); margin-inline: auto; }
.audiobook-list[data-columns="3"] { --audiobook-columns: 3; }
.audiobook-list[data-columns="5"] { --audiobook-columns: 5; }
.audiobook-list .collection-toolbar { margin-bottom: 18px; }
.audiobook-list__grid { display: grid; grid-template-columns: repeat(var(--audiobook-columns), minmax(0, 1fr)); gap: 22px; }
.audiobook-card { display: grid; grid-template-columns: minmax(112px, 34%) 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.audiobook-card__cover { background: var(--status-head); }
.audiobook-card__cover img, .audiobook-card__placeholder { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.audiobook-card__placeholder { display: grid; place-items: center; color: var(--muted); font-size: 3rem; }
.audiobook-card__content { min-width: 0; padding: 18px; }
.audiobook-card__status, .audiobook-card__meta dt, .audiobook-card__rating span { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: calc(var(--technical-size-base) * 1.25); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.audiobook-card__footer { color: var(--muted); font: 500 var(--technical-size-2xs)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.audiobook-card__status { margin: 0 0 8px; }
.audiobook-card h1, .audiobook-card h2 { margin: 0; font-size: clamp(1.8rem, 3.3vw, 2.55rem); }
.audiobook-card h2 a { text-decoration: none; }
.audiobook-card__subtitle { margin: 7px 0 0; color: var(--muted); font-size: .84rem; }
.audiobook-card__genres { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.audiobook-card__genres-label { color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: .04em; }
.audiobook-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.audiobook-card__tags li { color: var(--muted); }
.audiobook-card__tags a { display: block; padding: 5px 9px; border: 1px solid var(--accent); border-radius: 0; background: var(--surface); color: var(--muted); font-family: var(--font-mono); font-size: calc(.81rem * 1.25); text-decoration: none; }
.audiobook-card__tags a:hover { border-color: var(--accent); color: var(--accent); }
/* Projekte: Werkzeuge, Kacheln und Listen der Projektübersicht */
.project-summary, .project-group { position: relative; left: 50%; width: min(1180px, calc(100vw - 48px)); transform: translateX(-50%); }
.project-summary { display: flex; flex-direction: column; gap: 18px; }
.project-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.project-filters { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); background: var(--surface); }
.project-filters__label, .project-filter > summary, .project-filters__reset { display: flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.project-filters__label { color: var(--ink); font-weight: 700; }
.project-filters__label:hover, .project-filters__reset:hover { color: var(--accent); background: var(--status-body); }
.project-filter { position: relative; border-left: 1px solid var(--line); }
.project-filter > summary { gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.project-filter > summary::-webkit-details-marker { display: none; }
.project-filter > summary::after { content: '↓'; color: var(--accent); }
.project-filter[open] > summary { background: var(--status-body); color: var(--ink); }
.project-filter[open] > summary::after { content: '↑'; }
.project-filter--active > summary { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.project-filter__options { position: absolute; z-index: 3; top: calc(100% + 1px); left: -1px; display: grid; min-width: max-content; padding: 8px; border: 1px solid var(--line); background: var(--status-body); box-shadow: 0 14px 28px rgb(24 24 24 / .12); }
.project-filter__options a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--muted); font-size: .78rem; text-decoration: none; }
.project-filter__options a:hover, .project-filter__options a[aria-current="true"] { color: var(--accent); background: var(--surface); }
.project-filter__count { margin-left: auto; color: var(--ink); font-weight: 700; }
.project-filters__reset { color: var(--accent); font-weight: 700; }
.project-filter__status { margin: 0; color: var(--muted); font: 500 var(--technical-size-lg)/1.4 var(--font-mono); }
.project-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 0 0 24px; }
.project-section__text { display: flex; flex-direction: column; gap: 3px; }
.project-section__eyebrow { margin: 0; color: var(--accent); font: 700 var(--technical-size-sm)/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.project-section__title { margin: 0; }
.project-featured { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.project-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--surface); }
.project-card--hero { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; }
.project-card__media { aspect-ratio: 16 / 10; padding: 22px 22px 0; background: var(--page); border-bottom: 1px solid var(--line); overflow: hidden; }
.project-card--feature .project-card__media { min-height: 0; padding: 30px 30px 0; }
.project-card--feature .project-card__body { gap: 10px; padding: 18px 22px; }
.project-card--hero .project-card__media { aspect-ratio: 5 / 4; padding: 34px 34px 0; border-bottom: 0; border-right: 1px solid var(--line); }
.project-card--hero .project-card__body { gap: 16px; padding: 32px 34px; }
.project-card--hero .project-card__name { font-size: 1.6rem; }
.project-card--hero .project-card__logo { width: 56px; height: 56px; }
.project-card--hero .project-card__logo img { width: 34px; height: 34px; }
.project-card__frame { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-bottom: 0; background: var(--surface); box-shadow: 0 12px 30px rgb(0 0 0 / .1); }
.project-card__bar { display: flex; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.project-card__bar i { width: 9px; height: 9px; border: 1px solid var(--line); border-radius: 50%; }
.project-card__frame img { display: block; width: 100%; height: auto; }
.project-card--hero .project-card__frame img { flex: 1; min-height: 0; height: 100%; object-fit: cover; object-position: top center; }
.project-card__head { display: flex; align-items: flex-start; gap: 12px; }
.project-card__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.project-card__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--page); }
.project-card__logo img { width: 26px; height: 26px; }
.project-card__titles { display: flex; flex-direction: column; gap: 3px; }
.project-card__name { margin: 0; font-size: 1.15rem; }
.project-card__category { margin: 0; color: var(--muted); font: 500 var(--technical-size-lg)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.project-card__tagline { margin: 0; color: var(--ink); }
.project-card__description { margin: 0; color: var(--muted); }
.project-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--line); color: var(--muted); font: 500 var(--technical-size-sm)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.project-badge::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.project-badge--aktiv { border-color: var(--accent); color: var(--accent); }
.tech-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tech-chip { padding: 5px 11px; border: 1px solid var(--line); background: var(--page); color: var(--muted); font: 500 var(--technical-size-sm)/1.35 var(--font-mono); }
.tech-chip--more { color: var(--accent); font-weight: 700; }
.project-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.project-card__cta { color: var(--accent); font: 700 var(--technical-size-sm)/1.3 var(--font-mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.project-card__cta:hover { text-decoration: underline; }
.project-meta { display: grid; margin: 0; }
.project-meta__row { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.project-meta__row:last-child { border-bottom: 1px solid var(--line); }
.project-meta dt { min-width: 160px; color: var(--muted); font: 500 var(--technical-size-lg)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.project-meta dd { margin: 0; }
.project-description { margin: 0; }
.project-detail { border: 1px solid var(--line); background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.project-detail__media { padding: 26px 26px 0; background: var(--page); border-bottom: 1px solid var(--line); }
.project-detail__media .project-card__frame { height: auto; border-bottom: 1px solid var(--line); box-shadow: 0 16px 40px rgb(0 0 0 / .12); }
.project-detail__media img { display: block; width: 100%; height: auto; }
.project-detail__body { display: flex; flex-direction: column; gap: 26px; padding: 26px; }
@media (max-width: 820px) { .project-featured { grid-template-columns: minmax(0, 1fr); } .project-card--hero { grid-template-columns: minmax(0, 1fr); } .project-card--hero .project-card__media { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); } }
.audiobook-card__meta { display: grid; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.audiobook-card__meta div { display: grid; grid-template-columns: minmax(82px, .65fr) 1fr; gap: 10px; }
.audiobook-card__meta dd { margin: 0; font-size: calc(.78rem * 1.25); overflow-wrap: anywhere; }
.audiobook-card__rating { margin: 18px 0 0; color: var(--ink); font-size: calc(.82rem * 1.25); }
.audiobook-card__rating span { display: block; margin-bottom: 4px; }
.audiobook-card__notes { margin: 0; color: var(--muted); font-size: .95rem; }
.audiobook-card__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--status-head); }
.audiobook-card__footer a { color: var(--muted); text-decoration: none; }
.audiobook-card__footer a:hover { color: var(--accent); }
.audiobook-card--single { position: relative; left: 50%; width: min(900px, calc(100vw - 48px)); grid-template-columns: minmax(280px, 42%) 1fr; transform: translateX(-50%); }
.audiobook-card--single .audiobook-card__cover { align-self: start; aspect-ratio: 2 / 3; }
.audiobook-card--single .audiobook-card__cover img, .audiobook-card--single .audiobook-card__placeholder { min-height: 0; height: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.audiobook-card--single .audiobook-card__content { padding: 26px; }
.audiobook-card--single .audiobook-card__notes { grid-column: 1 / -1; padding: 28px 26px; border-top: 1px solid var(--line); }
.audiobook-list__grid .audiobook-card { display: block; }
.audiobook-list .audiobook-card { border-color: var(--game-card-border); background: var(--game-card-surface); color: var(--game-shelf-ink); box-shadow: 0 8px 18px rgb(8 11 15 / .32); transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.audiobook-list .audiobook-card__cover { background: var(--game-card-cover); }
.audiobook-list .list-pagination { border-color: var(--game-shelf-border); color: var(--game-shelf-muted); }
.audiobook-list .list-pagination a { color: var(--game-shelf-ink); }
.audiobook-list > p:last-child { color: var(--game-shelf-muted); }
.audiobook-card__cover-link { display: block; color: inherit; text-decoration: none; }
.audiobook-list__grid .audiobook-card__cover { position: relative; aspect-ratio: 2 / 3; }
.audiobook-list__grid .audiobook-card__cover img, .audiobook-list__grid .audiobook-card__placeholder { min-height: 0; height: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.audiobook-card__cover-title { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: #fff; background: rgb(0 0 0 / .4); font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600; line-height: 1; text-align: center; text-wrap: balance; }
.audiobook-card__cover-link:hover .audiobook-card__cover-title, .audiobook-card__cover-link:focus-visible .audiobook-card__cover-title { background: rgb(0 0 0 / .58); color: var(--accent); }
.game-filters { position: relative; z-index: 2; left: 50%; display: flex; width: min(1400px, calc(100vw - 48px)); flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); transform: translateX(-50%); }
.game-filters__label, .game-filter summary, .game-filters__reset { display: flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--muted); font: 500 .68rem/1.2 var(--font-ui); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.game-filters__label { color: var(--ink); font-weight: 700; }
.game-filters__label:hover { color: var(--accent); background: var(--status-body); }
.game-filter { position: relative; border-left: 1px solid var(--line); }
.game-filter summary { gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.game-filter summary::-webkit-details-marker { display: none; }
.game-filter summary::after { content: '↓'; color: var(--accent); font-size: .9rem; }
.game-filter--active > summary { border-bottom: 2px solid var(--accent); color: var(--accent); }
.game-filter[open] summary { color: var(--ink); background: var(--status-body); }
.game-filter[open].game-filter--active > summary { color: var(--accent); }
.game-filter summary:hover { color: var(--accent); background: var(--status-body); }
.game-filter[open] summary::after { content: '↑'; }
.game-filter__options { position: absolute; z-index: 3; top: calc(100% + 1px); left: -1px; display: grid; min-width: max-content; max-width: min(280px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--line); border-radius: 0 0 5px 5px; background: var(--status-body); box-shadow: 0 14px 28px rgb(24 24 24 / .12); }
.game-filter__options a { padding: 8px 10px; border-radius: 2px; color: var(--muted); font-size: .78rem; text-decoration: none; }
.game-filter__options a[aria-current="true"] { color: var(--accent); background: var(--surface); }
.game-filter__options a:hover { color: var(--accent); background: var(--surface); }
.game-filters__reset { margin-left: auto; color: var(--accent); font-family: inherit; font-size: .78rem; font-weight: 700; text-transform: none; }
.game-library { --game-columns: 3; position: relative; left: 50%; width: min(1400px, calc(100vw - 48px)); padding: 18px; border: 1px solid var(--game-shelf-border); border-radius: 5px; background: var(--game-shelf); color: var(--game-shelf-ink); transform: translateX(-50%); box-shadow: 0 18px 46px rgb(15 19 24 / .18); transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.game-library[data-columns="1"] { --game-columns: 1; }
.game-library[data-columns="1"] .game-library__grid { width: min(840px, 100%); margin-inline: auto; }
.game-library[data-columns="3"] { --game-columns: 3; }
.game-library[data-columns="5"] { --game-columns: 5; }
.game-library .collection-toolbar { margin-bottom: 18px; }
.game-library__grid { display: grid; grid-template-columns: repeat(var(--game-columns), minmax(0, 1fr)); gap: 22px; }
.game-library__empty { color: var(--game-shelf-muted); }
.game-library .list-pagination { border-color: var(--game-shelf-border); color: var(--game-shelf-muted); }
.game-library .list-pagination a { color: var(--game-shelf-ink); }
.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--status-body); box-shadow: 0 8px 18px rgb(8 11 15 / .16); }
.game-library .game-card { min-width: 0; overflow: hidden; border: 1px solid var(--game-card-border); border-radius: 3px; background: var(--game-card-surface); box-shadow: 0 8px 18px rgb(8 11 15 / .32); transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.game-card__cover-link { display: block; color: inherit; text-decoration: none; }
.game-card__cover { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface); }
.game-library .game-card__cover { background: var(--game-card-cover); }
.game-card__cover img, .game-card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-card__placeholder { display: grid; place-items: center; color: var(--game-shelf-muted); font-size: 3rem; }
.game-card__state { position: absolute; top: 9px; right: 9px; padding: 5px 7px; border-radius: 2px; background: var(--game-badge-background); color: var(--game-badge-ink); font: 500 var(--technical-size-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.game-card__content { padding: 12px 13px 14px; }
.game-card h2 { overflow: hidden; margin: 0; font: 600 .84rem/1.25 var(--font-ui); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.game-library .game-card h2 a { color: var(--game-shelf-ink); text-decoration: none; }
.game-card h2 a:hover { color: var(--accent); }
.game-card__playtime { margin: 6px 0 0; color: var(--game-shelf-muted); font: 500 var(--technical-size-sm)/1.2 var(--font-mono); }
.game-card--single { position: relative; left: 50%; display: grid; width: min(900px, calc(100vw - 48px)); grid-template-columns: minmax(280px, 40%) 1fr; border-color: var(--line); border-radius: 5px; background: var(--status-body); color: var(--ink); transform: translateX(-50%); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.game-card--single .game-card__cover { align-self: start; }
.game-card--single .game-card__content { padding: 28px; }
.game-card--single h1 { margin-top: 10px; font-size: clamp(3rem, 7vw, 5.4rem); }
.game-card__status, .game-card__meta dt, .game-card__rating span { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: calc(var(--technical-size-base) * 1.25); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.game-card__status { margin: 0; }
.game-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.game-card__tags li { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: calc(.72rem * 1.25); }
.game-card__meta { display: grid; gap: 10px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.game-card__meta div { display: grid; grid-template-columns: minmax(110px, .75fr) 1fr; gap: 12px; }
.game-card__meta dd { margin: 0; font-size: calc(.8rem * 1.25); overflow-wrap: anywhere; }
.game-card__rating { margin: 22px 0 0; font-size: calc(.84rem * 1.25); }
.game-card__rating span { display: block; margin-bottom: 5px; }
.game-card__editorial, .game-card__screenshots { grid-column: 1 / -1; padding: 30px 28px; border-top: 1px solid var(--line); }
.game-card__editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.game-card__editorial h2 { color: var(--ink); font: 400 2rem/1 var(--font-heading); letter-spacing: -.03em; white-space: normal; }
.game-card__screenshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.game-card__screenshots figure { margin: 0; }
.game-card__screenshots img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-card__screenshots figcaption { margin-top: 7px; color: var(--muted); font-size: .72rem; }
.blogroll-list { --blogroll-columns: 3; --blogroll-width: 1400px; --collection-toolbar-width: 1400px; position: relative; left: 50%; width: min(var(--blogroll-width), calc(100vw - 48px)); transform: translateX(-50%); }
.blogroll-list[data-columns="1"] { --blogroll-columns: 1; --blogroll-width: 760px; }
.blogroll-list[data-columns="3"] { --blogroll-columns: 3; --blogroll-width: 1400px; }
.blogroll-list[data-columns="5"] { --blogroll-columns: 5; --blogroll-width: 1600px; }
.blogroll-feed { display: grid; grid-template-columns: repeat(var(--blogroll-columns), minmax(0, 1fr)); gap: 22px; }
.blogroll-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 5px; background: var(--status-body); box-shadow: 0 10px 24px rgb(24 24 24 / .035); }
.blogroll-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--status-head); }
.blogroll-card__title { margin: 0; font-size: .92rem; font-weight: 700; }
.blogroll-card__title a { text-decoration: none; }
.blogroll-card__header > span, .blogroll-card__meta dt { color: var(--muted); font: 500 var(--technical-size-md)/1.2 var(--font-mono); letter-spacing: .05em; }
.blogroll-card__footer { color: var(--muted); font: 500 var(--technical-size-2xs)/1.2 var(--font-mono); letter-spacing: .05em; }
.blogroll-card__header > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blogroll-card__screenshot { margin: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.blogroll-card__screenshot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.blogroll-card__screenshot figcaption { padding: 8px 18px; color: var(--muted); font-size: .76rem; }
.blogroll-card__body { flex: 1; display: flex; flex-direction: column; padding: 20px 18px; }
.blogroll-card__description { margin-bottom: auto; color: var(--muted); }
.blogroll-card__description > :first-child, .blogroll-card__note > :first-child { margin-top: 0; }
.blogroll-card__description > :last-child, .blogroll-card__note > :last-child { margin-bottom: 0; }
.blogroll-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.blogroll-card__tags li { display: flex; }
.blogroll-card__tags a { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 500 var(--technical-size-lg)/1.2 var(--font-mono); text-decoration: none; }
.blogroll-card__tags a:hover { border-color: var(--accent); color: var(--accent); }
.blogroll-card__meta { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.blogroll-card__meta div { display: flex; gap: 8px; }
.blogroll-card__meta dd { margin: 0; font-size: .76rem; }
.blogroll-card__note { margin-top: 24px; color: var(--muted); }
.blogroll-card__footer { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--status-head); }
.blogroll-card__footer a { color: var(--muted); font-size: calc(var(--technical-size-2xs) * 1.25); text-decoration: none; }
.blogroll-card__footer a:hover { color: var(--accent); }
[data-columns="3"] .collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-columns="3"] .collection-grid > * { grid-column: span 2; }
[data-columns="3"] .collection-grid > :where(:last-child:nth-child(3n + 1)) { grid-column: 3 / span 2; }
[data-columns="3"] .collection-grid > :where(:nth-last-child(2):nth-child(3n + 1)) { grid-column: 2 / span 2; }
[data-columns="5"] .collection-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
[data-columns="5"] .collection-grid > * { grid-column: span 2; }
[data-columns="5"] .collection-grid > :where(:last-child:nth-child(5n + 1)) { grid-column: 5 / span 2; }
[data-columns="5"] .collection-grid > :where(:nth-last-child(2):nth-child(5n + 1)) { grid-column: 4 / span 2; }
[data-columns="5"] .collection-grid > :where(:nth-last-child(3):nth-child(5n + 1)) { grid-column: 3 / span 2; }
[data-columns="5"] .collection-grid > :where(:nth-last-child(4):nth-child(5n + 1)) { grid-column: 2 / span 2; }
.article-header { margin-bottom: 50px; }
.list-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 28px; color: var(--muted); font: 500 var(--technical-size-base)/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.list-pagination a { justify-self: start; color: var(--ink); text-decoration: none; }
.list-pagination a:hover { color: var(--accent); }
.list-pagination a:last-child { justify-self: end; text-align: right; }
.list-pagination > span:nth-child(2) { text-align: center; font-size: calc(var(--technical-size-base) * 1.25); }
.entry-pagination { --pagination-width: 1050px; position: relative; left: 50%; display: grid; width: min(var(--pagination-width), calc(100vw - 48px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 76px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transform: translateX(-50%); }
.entry-pagination a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.entry-pagination a:hover { color: var(--accent); }
.entry-pagination span { color: var(--muted); font: 500 var(--technical-size-sm)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.entry-pagination strong { font: 400 clamp(1.55rem, 3vw, 2.25rem)/1.05 var(--font-heading); letter-spacing: -.025em; }
.entry-pagination__next { text-align: right; }
.comments { margin-top: 84px; padding-top: 48px; border-top: 1px solid var(--line); }
.webmentions { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.comments__header h2 { margin: 12px 0 0; font-size: clamp(2.4rem, 5vw, 4rem); }
.webmentions__header h2 { margin: 12px 0 0; font-size: clamp(2.4rem, 5vw, 4rem); }
.comments__form { max-width: 650px; margin-top: 44px; }
.comments__form h3 { margin: 0; font-size: 2rem; }
#kommentform { display: grid; gap: 18px; margin-top: 22px; }
#kommentform label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; font-weight: 600; }
#kommentform input, #kommentform textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-ui); }
#kommentform textarea { min-height: 132px; resize: vertical; }
#kommentform input:focus, #kommentform textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 2px; }
#kommentform input[name="url"] { position: absolute; left: -10000px; }
#kommentform .komment-privacy { color: var(--muted); font-size: .76rem; }
#kommentform input[type="submit"] { width: fit-content; border-color: var(--accent); background: var(--accent); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; }
#kommentform input[type="submit"]:hover { filter: brightness(.93); }
.list-comments { display: grid; gap: 24px; max-width: 650px; padding: 0; list-style: none; }
.list-comments li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.list-likes, .list-reposts, .list-replies, .list-mentions { display: grid; gap: 18px; max-width: 650px; padding: 0; list-style: none; }
.list-likes li, .list-reposts li, .list-replies li, .list-mentions li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.microformat-url { display: block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-footer { padding: 0 0 24px; color: var(--muted); font-size: .75rem; }
.site-footer__cards { width: min(1600px, calc(100% - 48px)); display: grid; margin: auto; gap: 14px; }
.site-footer__navigation, .site-footer__meta { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.site-footer__navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 6vw, 90px); padding: clamp(28px, 4vw, 52px); font-size: 1.125rem; }
.site-footer__navigation h2 { margin: 0 0 17px; color: var(--scheme-accent-soft, var(--ink)); font: 700 1.17rem/1.2 var(--font-ui); letter-spacing: 0; }
.site-footer__navigation ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.site-footer__navigation .social-links { justify-content: flex-start; margin-top: 20px; }
.site-footer__meta { min-height: 48px; display: grid; padding: 10px 22px; font-size: .875rem; text-align: center; place-items: center; }
.site-footer a { text-decoration: none; }
.site-footer__hermes { color: var(--scheme-accent-soft, var(--accent)); }
.site-footer__hermes:hover { text-decoration: underline; }
.site-footer__heart { display: inline-block; width: .8em; height: .74em; margin: 0 .2em 0 .12em; background: var(--scheme-accent-soft, var(--accent)); vertical-align: -.06em; -webkit-mask: url('../icons/heart-solid.svg') center / contain no-repeat; mask: url('../icons/heart-solid.svg') center / contain no-repeat; }
.social-links { gap: 10px; }
.social-links a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.social-links svg { width: 15px; height: 15px; display: block; }
.page-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 24px; border: 1px dashed var(--line); border-radius: 10px; }
.page-layout + .page-layout { margin-top: 32px; }
.page-layout__column { padding: 20px; border-radius: 7px; background: var(--surface); }
.page-layout__column--12 { grid-column: span 12; }
.page-layout__column--6 { grid-column: span 6; }

@media (max-width: 1200px) {
  .audiobook-list .audiobook-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audiobook-list .audiobook-list__grid > * { grid-column: auto; }
  .game-library .game-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-library .game-library__grid > * { grid-column: auto; }
  [data-column-layout="audiobooks"] [data-column-controls], [data-column-layout="games"] [data-column-controls] { display: none; }
}

@media (min-width: 1101px) {
  .site-header--content-aligned-navigation .site-navigation { position: absolute; left: calc(50% - 398px); }
}

@media (max-width: 1100px) {
  .header-actions > .site-navigation, .header-follow-link, .header-separator--follow { display: none; }
  .mobile-menu { display: block; }
}

@media (max-width: 820px) {
  .home-intro { grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); gap: 42px; }
  .home-latest, .home-newsletter { grid-template-columns: 1fr; gap: 22px; }
  .home-shelf__covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__navigation { grid-template-columns: 1fr; gap: 32px; }
  .audiobook-list .audiobook-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-column-layout="photography"] [data-column-controls], [data-column-layout="blogroll"] [data-column-controls], [data-column-layout="status"] [data-column-controls], [data-column-layout="articles"] [data-column-controls] { display: none; }
  [data-column-layout] .collection-grid > * { grid-column: auto; }
  .article-collection .article-list { grid-template-columns: 1fr; }
  .status-list .status-feed { column-count: 1; }
  .photo-list .photo-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blogroll-list .blogroll-feed { grid-template-columns: 1fr; }
  .game-library .game-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .site-header__inner, .site-footer__inner, .site-breadcrumbs, .content { width: min(100% - 32px, var(--content-width)); }
  .site-header__inner { min-height: 68px; }
  .site-header__inner { gap: 16px; }
  nav { gap: 13px; }
  nav a { font-size: .76rem; }
  .header-actions { gap: 12px; }
  .language-switcher::before { margin-right: 6px; }
  .site-breadcrumbs__list { width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .site-breadcrumbs__list::-webkit-scrollbar { display: none; }
  .site-breadcrumbs__list span[aria-current="page"] { max-width: 58vw; }
  .theme-toggle { width: 52px; }
  .collection-years { align-items: flex-start; flex-direction: column; }
  .collection-years ul { justify-content: flex-start; }
  .collection-archive__entries li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  .collection-archive__dots { display: none; }
  .collection-archive__entries a { font-size: 1rem; }
  .article-meta { width: 100%; }
  .article-body figure { width: calc(100vw - 32px); }
  .content-link-card, .article-outro { grid-template-columns: 1fr; }
  .content-link-card > a { width: fit-content; min-height: 38px; }
  [data-theme="dark"] .toggle-thumb { transform: translateX(22px); }
  .content { padding: 32px 0 64px; }
  .home-intro { left: auto; width: 100%; grid-template-columns: 1fr; gap: 42px; transform: none; }
  .home-intro__copy .prose { margin-top: 42px; }
  .home-portrait { max-width: min(100%, 300px); justify-self: start; }
  .home-dashboard { left: auto; width: 100%; gap: 64px; transform: none; }
  .home-latest, .home-newsletter { padding: 22px 18px; }
  .home-latest__list li { grid-template-columns: 20px minmax(0, auto) minmax(12px, 1fr) auto; gap: 7px; }
  .home-latest a { font-size: 1.25rem; }
  .home-latest time { font-size: .8625rem; }
  .home-shelf__covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-newsletter form { padding: 16px; }
  .home-newsletter form > div { align-items: stretch; flex-direction: column; }
  .home-newsletter button { min-height: 42px; }
  .site-footer__cards { width: calc(100% - 32px); }
  .site-footer__navigation { padding: 26px 22px; }
  .search-dialog__mascot { height: 150px; }
  .search-dialog__mascot svg { height: 140px; }
  .search-dialog__body { padding: 24px 20px; }
  .search-dialog__footer { padding: 14px; }
  .search-page-form { align-items: stretch; flex-direction: column; }
  .search-page-form button { min-height: 44px; }
  .entry-pagination { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 56px; }
  .entry-pagination > span:empty { display: none; }
  .photo-feed { grid-template-columns: 1fr; }
  .photo-list, .blogroll-list, .status-list { left: auto; width: 100%; transform: none; }
  .audiobook-list .audiobook-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .collection-toolbar { align-items: flex-start; flex-direction: column; }
  .audiobook-list { left: auto; width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); padding: 12px; transform: none; }
  .audiobook-filters { left: auto; display: grid; width: 100%; transform: none; }
  .audiobook-filters__label, .audiobook-filter, .audiobook-filters__reset { border-left: 0; border-bottom: 1px solid var(--line); }
  .audiobook-filter summary, .audiobook-filters__reset { min-height: 48px; }
  .audiobook-filter__options { position: static; max-width: none; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .audiobook-filters__reset { margin-left: 0; border-bottom: 0; }
  .audiobook-card--single { display: block; left: auto; width: 100%; transform: none; }
  .audiobook-list__grid .audiobook-card { grid-template-columns: 1fr 118px; }
  .audiobook-card--single .audiobook-card__cover { width: min(100%, 360px); }
  .game-filters { left: auto; display: grid; width: 100%; transform: none; }
  .game-filters__label, .game-filter, .game-filters__reset { border-left: 0; border-bottom: 1px solid var(--line); }
  .game-filter summary, .game-filters__reset { min-height: 48px; }
  .game-filter__options { position: static; max-width: none; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .game-filters__reset { margin-left: 0; border-bottom: 0; }
  .game-library { left: auto; width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); padding: 12px; transform: none; }
  .game-library .game-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .game-card__content { padding: 10px; }
  .game-card--single { left: auto; display: block; width: 100%; transform: none; }
  .game-card--single .game-card__cover { width: min(100%, 360px); }
  .game-card__editorial, .game-card__screenshots { grid-template-columns: 1fr; padding: 24px 20px; }
  .blogroll-card__header { align-items: flex-start; flex-direction: column; }
  .page-layout__column--6 { grid-column: span 12; }
  .list-pagination { grid-template-columns: 1fr 1fr; }
  .list-pagination > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .search-dialog[open], .search-dialog::backdrop, .search-mascot__character, .search-mascot__glass, .search-mascot__sparkles circle { animation: none !important; }
}