/* tastemaker: mood=poster/playful, palette=hand-picked (Schwarz + Marker-Gelb + Nürnberger Rot), contrast=AA hell+dunkel,
   Schriften lokal: Archivo + Source Serif 4 (SIL OFL, siehe fonts/). Kein JS, kein Framework. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.c5a01ed02269.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-variable.c1c9c07dd7b6.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Farben */
  --bg: #ffffff;
  --surface: #f4f1ea;
  --text: #111111;
  --muted: #57524a;
  --border: #111111;
  --hairline: #d6d1c6;
  --marker: #ffd400;
  --on-marker: #111111;
  --accent: #b3121a; /* Nürnberger Rot */
  --on-accent: #ffffff;
  --ok: #0f6b35;
  --warn: #8a5a00;
  --button-bg: #111111;
  --button-fg: #ffd400;
  --head-bg: #111111;
  --head-fg: #ffffff;
  --head-accent: #ffd400;
  --head-accent-fg: #111111;

  /* Schrift */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Source Serif 4", ui-serif, Georgia, serif;
  --text-sm: .875rem;
  --text-xs: .75rem;
  --text-base: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --text-h2: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --text-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --text-poster: clamp(2.0625rem, 1rem + 5.2vw, 4.25rem);
  --text-stat: clamp(2.25rem, 1.2rem + 4vw, 4.75rem);

  /* Abstände */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: clamp(3rem, 2rem + 4vw, 5rem);
  --gutter: clamp(1rem, .5rem + 2vw, 2rem);

  /* Form */
  --radius: 0;
  --line: 2px;
  --line-heavy: 4px;
  --shadow: 5px 5px 0 var(--border);
  --measure: 70ch;
  --page: 100rem;
  --ease: 160ms ease-out;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141310;
    --surface: #1f1d19;
    --text: #f5f1e6;
    --muted: #b9b3a5;
    --border: #f5f1e6;
    --hairline: #3d3a33;
    --accent: #ff8a7e;
    --on-accent: #111111;
    --ok: #74d39a;
    --warn: #e6b75a;
    --button-bg: #ffd400;
    --button-fg: #111111;
    --head-bg: #000000;
  }
}

/* Farbkombinationen, per Umschalter im Footer (theme.js). Ohne Auswahl gilt Plakat mit Hell/Dunkel vom System. */
:root[data-theme] {
  color-scheme: light;
  --bg: #ffffff; --surface: #f4f1ea; --text: #111111; --muted: #57524a; --border: #111111; --hairline: #d6d1c6;
  --marker: #ffd400; --on-marker: #111111; --accent: #b3121a; --on-accent: #ffffff; --ok: #0f6b35; --warn: #8a5a00;
  --button-bg: #111111; --button-fg: #ffd400; --head-bg: #111111; --head-fg: #ffffff; --head-accent: #ffd400; --head-accent-fg: #111111;
}
:root[data-theme="stadtrot"] {
  --surface: #f8efec; --hairline: #e6d6d0; --marker: #c8161d; --on-marker: #ffffff; --accent: #8f0e15;
  --button-bg: #b3121a; --button-fg: #ffffff; --head-bg: #b3121a; --head-accent: #ffffff; --head-accent-fg: #8f0e15;
}
:root[data-theme="tanne"] {
  --bg: #f6f8f3; --surface: #e9efe4; --text: #10201a; --muted: #44544b; --border: #10201a; --hairline: #c9d3c3;
  --marker: #9fe870; --on-marker: #10201a; --warn: #7a4f00;
  --button-bg: #10201a; --button-fg: #9fe870; --head-bg: #123a2c; --head-accent: #9fe870; --head-accent-fg: #10201a;
}
:root[data-theme="kobalt"] {
  --bg: #f5f7ff; --surface: #e7ecfb; --text: #0c1538; --muted: #434c6b; --border: #0c1538; --hairline: #c8d0ea;
  --marker: #ffb000; --on-marker: #0c1538; --warn: #7a4f00;
  --button-bg: #1b36c9; --button-fg: #ffffff; --head-bg: #1b36c9; --head-accent: #ffb000; --head-accent-fg: #0c1538;
}
:root[data-theme="flieder"] {
  --bg: #fbf8ff; --surface: #f0e9fa; --text: #1e1230; --muted: #524668; --border: #1e1230; --hairline: #dccff0;
  --marker: #d9b8ff; --on-marker: #1e1230; --accent: #a3124f; --warn: #7a4f00;
  --button-bg: #1e1230; --button-fg: #d9b8ff; --head-bg: #1e1230; --head-accent: #d9b8ff; --head-accent-fg: #1e1230;
}
:root[data-theme="nacht"] {
  color-scheme: dark;
  --bg: #0d1620; --surface: #16222e; --text: #eaf2f7; --muted: #a5b4c0; --border: #eaf2f7; --hairline: #2c3b49;
  --marker: #5ee0d0; --on-marker: #0d1620; --accent: #ff8a7e; --on-accent: #111111; --ok: #74d39a; --warn: #e6b75a;
  --button-bg: #5ee0d0; --button-fg: #0d1620; --head-bg: #081018; --head-accent: #5ee0d0; --head-accent-fg: #0d1620;
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--text-base); line-height: 1.55;
  overflow-wrap: break-word;
}
h1, h2 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; hyphens: auto; }
h1 { font-size: var(--text-h1); font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-h2); font-weight: 800; font-stretch: 108%; margin: var(--space-12) 0 var(--space-3); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
b, strong { font-family: var(--font-display); font-weight: 700; }
mark { background: var(--marker); color: var(--on-marker); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Links: Hover zieht den Marker über den Text */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:not(.button, .chip) {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 100% / 0 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size var(--ease), color var(--ease);
}
a:not(.button, .chip):hover { background-size: 100% 100%; color: var(--on-marker); }

/* Rahmen */
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
main.wrap { padding-block: var(--space-8) var(--space-16); }

header.site { --marker: var(--head-accent); --on-marker: var(--head-accent-fg); background: var(--head-bg); color: var(--head-fg); border-bottom: var(--line-heavy) solid var(--marker); font-family: var(--font-display); }
header.site .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; padding-block: var(--space-3); }
header.site .brand { font-weight: 900; font-stretch: 125%; font-size: 1.125rem; color: var(--marker); text-decoration: none; letter-spacing: -.01em; }
header.site nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
header.site nav a { font-weight: 600; font-size: .9375rem; text-decoration: none; padding: .125em .3em; }
header.site nav a.active { background: var(--marker); background-size: 100% 100%; color: var(--on-marker); }
header.site form { margin-left: auto; display: flex; gap: 0; flex: 1 1 12rem; min-width: 0; max-width: 28rem; }
header.site input[type=search] { flex: 1; min-width: 0; border-color: var(--head-fg); }
header.site button { background: var(--marker); color: var(--on-marker); border-color: var(--marker); }
header.site button:hover { box-shadow: none; transform: none; background: var(--head-fg); border-color: var(--head-fg); }
header.site .header-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
header.site .header-icon.active { background: var(--marker); color: var(--on-marker); }
.demo-banner { background: var(--marker); color: var(--on-marker); text-align: center; padding: var(--space-2) var(--gutter); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }

footer.site { border-top: var(--line-heavy) solid var(--border); padding-block: var(--space-6) var(--space-8); color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); }
.button.theme-switch { display: flex; width: fit-content; align-items: center; gap: var(--space-2); }
.button.theme-switch[hidden] { display: none; }
.theme-switch::before { content: ""; width: 1em; height: 1em; background: var(--marker); border: var(--line) solid currentColor; }

/* Startseite */
.poster { font-size: var(--text-poster); font-weight: 900; font-stretch: 125%; line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; hyphens: manual; max-width: 16em; margin-bottom: var(--space-4); }
.poster span {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 100% / 100% 100%;
  color: var(--on-marker); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: marker-in 480ms ease-out both;
}
@keyframes marker-in { from { background-size: 0 100%; color: var(--text); } }
.lead { font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); line-height: 1.4; margin-bottom: var(--space-8); }
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-block: var(--space-8) var(--space-12); padding-block: var(--space-6);
  background: var(--marker); color: var(--on-marker);
  box-shadow: 0 0 0 100vmax var(--marker); clip-path: inset(0 -100vmax);
}
.stat { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.stat b { display: block; white-space: nowrap; font-size: var(--text-stat); font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -.02em; }

/* Bausteine */
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.meta { color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.4; }
.label { color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; margin: var(--space-3) 0 var(--space-1); }
.label:first-child { margin-top: 0; }
.note { margin-top: var(--space-2); }
.pre-line { white-space: pre-line; }
.spaced { margin-block: var(--space-3); }
.resolution { font-size: var(--text-sm); margin-top: var(--space-1); }
.month { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }

.card { border-top: var(--line-heavy) solid var(--border); padding-top: var(--space-3); min-width: 0; }
.card > h2:first-child { margin-top: 0; }
.grid { display: grid; gap: var(--space-8) var(--space-12); grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); margin-top: var(--space-6); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
ul.plain > li:last-child { border-bottom: 0; }
ul.plain > li > a { font-family: var(--font-display); font-weight: 650; line-height: 1.25; text-decoration: none; }
ul.plain > li > a b { font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-block; max-width: 100%; padding: var(--space-1) var(--space-3); border: var(--line) solid var(--border); border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: var(--text); text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
}
a.chip:hover { background: var(--marker); border-color: var(--marker); color: var(--on-marker); }
.chip.auto::after { content: " ·auto"; color: var(--muted); font-size: var(--text-xs); }
.chip:hover::after, .chip:hover .n { color: inherit; }
.chip .n { color: var(--muted); font-size: var(--text-xs); margin-left: var(--space-1); }

.badge {
  display: inline-block; max-width: 100%; padding: .0625rem var(--space-2); border: 1px solid var(--muted); border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; color: var(--muted); vertical-align: .1em;
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.cancel { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* Formulare */
input[type=search], input[type=text], input[type=password], input[type=date], select, textarea {
  font: 500 1rem/1.3 var(--font-display); min-height: 2.75rem; padding: var(--space-2) var(--space-3);
  border: var(--line) solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); max-width: 100%;
}
header.site input[type=search] { background: #ffffff; color: #111111; }
::placeholder { color: var(--muted); opacity: 1; }
header.site ::placeholder { color: #57524a; }
button, .button {
  display: inline-block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3;
  min-height: 2.75rem; padding: var(--space-2) var(--space-4); text-decoration: none; cursor: pointer;
  border: var(--line) solid var(--button-bg); border-radius: var(--radius); background: var(--button-bg); color: var(--button-fg);
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), color var(--ease);
}
button:hover, .button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--border); }
.button.secondary:hover { background: var(--marker); color: var(--on-marker); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.filters label { display: flex; flex: 1 1 11rem; flex-direction: column; min-width: 0; gap: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.filters input, .filters select { width: 100%; }
.stack { display: grid; gap: var(--space-4); max-width: 40rem; }
.stack label { display: grid; gap: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.stack input, .stack textarea { width: 100%; }
.stack button { justify-self: start; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--accent); font-family: var(--font-display); font-size: var(--text-sm); }
.trap { position: absolute; left: -100vmax; }
.filters label.narrow { flex: 0 1 7rem; }
details summary { cursor: pointer; margin-top: var(--space-3); }

/* Tabellen und Kalender */
table { border-collapse: collapse; width: 100%; }
th { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; border-bottom: var(--line-heavy) solid var(--border); }
th, td { text-align: left; padding: var(--space-2); vertical-align: top; }
td { border-bottom: 1px solid var(--hairline); }
.cal-wrap { overflow-x: auto; margin-top: var(--space-4); }
table.cal { table-layout: fixed; min-width: 40rem; }
table.cal td { height: 6rem; width: 14.28%; font-family: var(--font-display); font-size: .8125rem; line-height: 1.25; border: 1px solid var(--hairline); }
table.cal td.out { color: var(--muted); background: var(--surface); }
table.cal td.today { background: var(--marker); color: var(--on-marker); }
table.cal td.today a { color: var(--on-marker); }
table.cal .day { font-size: 1rem; font-weight: 800; }
table.cal a { display: block; margin-top: var(--space-1); text-decoration: none; hyphens: auto; }
table.cal a:hover { text-decoration: underline; }

/* Personenfoto */
.portrait { float: left; width: clamp(9rem, 30vw, 15rem); margin: 0 var(--space-6) var(--space-4) 0; }
.portrait img { display: block; width: 100%; height: auto; border: var(--line-heavy) solid var(--border); background: var(--surface); }
.portrait figcaption { margin-top: var(--space-1); color: var(--muted); font-family: var(--font-display); font-size: var(--text-xs); line-height: 1.35; }
.after-portrait { clear: both; }
.contact { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.contact dt { color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); }
.contact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Timeline, Dokument, Tagesordnung */
.timeline { border-left: var(--line-heavy) solid var(--border); padding-left: var(--space-4); margin-left: var(--space-1); }
.timeline > div { position: relative; padding-bottom: var(--space-4); }
.timeline > div::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - var(--line-heavy) / 2 - .4375rem); top: .3rem; width: .875rem; height: .875rem; background: var(--marker); border: var(--line) solid var(--border); }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border-left: var(--line-heavy) solid var(--marker); padding: var(--space-4) var(--space-6); max-height: 70vh; overflow-y: auto; }
.doc-md { max-width: 76rem; }
.doc-md p { max-width: none; }
.doc-md h2, .doc-md h3, .doc-md h4 { margin: var(--space-8) 0 var(--space-2); }
.doc-md h2 { font-size: var(--text-h2); }
.doc-md h3 { font-size: 1.25rem; }
.doc-md h4 { font-size: 1.0625rem; }
.doc-md img { display: block; max-width: 100%; height: auto; margin-block: var(--space-4); border: var(--line) solid var(--hairline); background: #ffffff; }
.doc-md table { display: block; max-width: 100%; overflow-x: auto; margin-block: var(--space-4); font-size: var(--text-sm); line-height: 1.35; }
.doc-md td { border: 1px solid var(--hairline); }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; font-family: var(--font-display); }
.top { scroll-margin-top: var(--space-3); }
.top:target { background: var(--marker); color: var(--on-marker); }
.top:target .meta, .top:target .badge { color: inherit; border-color: currentColor; }
.top.private { border-left: var(--line-heavy) dashed var(--muted); padding-left: var(--space-3); }

/* Footer: Stand der Dokumenterschließung. Statischer Balken, nicht animiert: Er zeigt einen Stand, keinen laufenden Prozess. */
.doc-progress { margin-bottom: var(--space-6); color: var(--text); font-weight: 700; }
.doc-progress p { margin: 0 0 var(--space-2); }
.doc-progress label { display: block; margin-bottom: var(--space-2); }
.doc-progress progress + label { margin-top: var(--space-3); }
.doc-progress progress { display: block; width: 100%; height: var(--space-4); appearance: none; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--hairline); }
.doc-progress progress::-webkit-progress-bar { background: var(--hairline); }
.doc-progress progress::-webkit-progress-value { background: var(--text); }
.doc-progress progress::-moz-progress-bar { background: var(--text); }

/* Funktionen-Dialog */
dialog#feature-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-6); border: var(--line-heavy) solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
dialog#feature-dialog::backdrop { background: color-mix(in srgb, var(--text) 55%, transparent); }
.dialog-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2.75rem; padding: 0; font-size: 1.5rem; line-height: 1; }
.dialog-body h2 { margin-top: var(--space-6); }
.dialog-body h2:first-child { margin-top: 0; padding-right: var(--space-12); }
.feature-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); border-bottom: var(--line-heavy) solid var(--border); }
.feature-tabs a[role="tab"] { display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-3); background: transparent; color: var(--text); font-family: var(--font-display); font-weight: 800; text-decoration: none; }
.feature-tabs a[role="tab"]:hover { background: var(--surface); color: var(--text); }
.feature-tabs a[role="tab"][aria-selected="true"] { background: var(--button-bg); color: var(--button-fg); }
.feature-list { position: relative; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "vote state text actions"; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); background: var(--bg); scroll-margin: var(--space-4); }
.feature-list li:last-child { border-bottom: 0; }
.feature-toggle { grid-area: state; }
.feature-list > li > .feature-state { grid-area: state; }
.feature-text { grid-area: text; }
.feature-list .feature-state, .feature-list .feature-delete { min-height: 0; padding: 0; color: var(--text); background: transparent; border-color: var(--border); }
.feature-list .feature-state.done { background: var(--marker); color: var(--on-marker); }
.feature-list button:hover { transform: none; box-shadow: none; background: var(--marker); color: var(--on-marker); }
.feature-list .feature-toggle .feature-state, .feature-list .feature-delete, .feature-list .feature-arrow { width: 2.75rem; height: 2.75rem; min-height: 0; margin: 0; padding: 0; font-size: 1.25rem; line-height: 1; }
.feature-list .feature-delete { border-color: transparent; color: var(--muted); }
.feature-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.feature-list .feature-arrow { border-color: var(--border); background: transparent; color: var(--text); }
.feature-list .feature-arrow:disabled { border-color: var(--hairline); background: transparent; color: var(--muted); cursor: not-allowed; }
.feature-status { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 3; margin: 0; padding: var(--space-2) var(--space-3); background: var(--button-bg); color: var(--button-fg); font-family: var(--font-display); font-weight: 700; }
.feature-status.fehler { background: var(--accent); color: var(--on-accent); }
.feature-status:empty { padding: 0; }
.feature-vote { grid-area: vote; display: flex; flex-direction: column; align-items: center; gap: 0; width: 2.75rem; }
.feature-list .feature-vote .feature-arrow { height: 1.75rem; min-height: 0; font-size: .875rem; line-height: 1; }
.feature-text b { hyphens: auto; }
.feature-text { hyphens: auto; }
.feature-list div span.badge { display: table; margin-top: var(--space-1); }
.feature-list li.neu { box-shadow: inset var(--line-heavy) 0 0 var(--marker); padding-left: var(--space-2); }
.feature-score { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; }
.feature-list .feature-arrow { border-color: transparent; }
.feature-list .feature-arrow.aktiv { background: var(--marker); border-color: var(--border); color: var(--on-marker); }
@media (max-width: 39.99rem) { .feature-list li { grid-template-columns: auto auto minmax(0, 1fr) auto; } }
.footer-spende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.footer-logout { display: inline; }
.footer-logout button { min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; }
.footer-logout button:hover { transform: none; box-shadow: none; }
.feature-list b { display: block; }
.feature-list div span { display: block; color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }
.feature-state { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .15rem; border: var(--line) solid var(--border); font-family: var(--font-display); font-size: .875rem; font-weight: 800; line-height: 1; }
.feature-state.done { background: var(--marker); color: var(--on-marker); }

/* PDF-Dialog: Die Seiten behalten ihre Papierfarbe, auch im Dunkelmodus. Bei 100 % scrollt nur der Seitenbereich seitwärts. */
dialog#pdf-dialog { width: calc(100% - 1rem); max-width: none; height: calc(100dvh - 1rem); max-height: none; padding: 0; overflow: hidden; border: var(--line-heavy) solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
dialog#pdf-dialog[open] { display: flex; flex-direction: column; }
dialog#pdf-dialog::backdrop { background: color-mix(in srgb, var(--text) 55%, transparent); }
.pdf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2); border-bottom: var(--line-heavy) solid var(--border); }
.pdf-bar h2 { flex: 1 1 100%; min-width: 0; margin: 0; padding-right: calc(2.75rem + var(--space-2)); font-size: 1.125rem; line-height: 2.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-count { margin-right: auto; font-variant-numeric: tabular-nums; }
.pdf-zoom, .pdf-download { padding-inline: var(--space-3); font-size: var(--text-sm); line-height: 1.6; }
.pdf-pages { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-3); background: var(--surface); }
.pdf-pages:focus-visible { outline-offset: -3px; }
.pdf-pages img { display: block; max-width: min(100%, 56rem); height: auto; margin: 0 auto var(--space-3); border: var(--line) solid var(--border); background: var(--hairline); }
.pdf-pages img:last-child { margin-bottom: 0; }
.pdf-pages.full img { max-width: none; }
@media (min-width: 48rem) {
  .pdf-bar { padding-right: calc(2.75rem + var(--space-4)); }
  .pdf-bar h2 { flex: 1 1 0; padding-right: 0; }
  .pdf-count { margin-right: 0; }
}

/* Karte: Der Kartenstil entsteht in map.js aus diesen Variablen. Ohne WebGL entfällt die Fläche, die Liste nimmt die ganze Breite. */
.karte { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; margin-block: var(--space-6); }
.karte-flaeche { flex: 999 1 38rem; min-width: 0; height: clamp(22rem, 72vh, 52rem); border: var(--line-heavy) solid var(--border); background: var(--surface); }
.karte[hidden], .karte-flaeche[hidden] { display: none; }
.karte > .stat-note { flex-basis: 100%; margin: 0; }
.karte-seite { flex: 1 1 22rem; min-width: 0; max-width: 100%; }
.karte-detail { position: relative; margin-bottom: var(--space-6); padding-top: var(--space-3); border-top: var(--line-heavy) solid var(--border); }
.karte-detail[hidden], .karte-suche[hidden] { display: none; }
.karte-detail h2 { margin: 0; padding-right: var(--space-12); font-size: 1.5rem; scroll-margin-top: var(--space-3); }
.karte-detail h2:focus { outline: none; }
.karte-zu { position: absolute; top: var(--space-2); right: 0; }
.karte-treffer, .karte-liste { list-style: none; margin: var(--space-2) 0; padding: 0; }
.karte-treffer li { padding-block: var(--space-2); border-bottom: 1px solid var(--hairline); line-height: 1.3; }
.karte-treffer a { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.karte-treffer a:hover, .karte-liste a:hover { text-decoration: underline; }
.karte-suche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 10rem); gap: var(--space-3); margin-bottom: var(--space-4); }
.karte-suche label { display: grid; gap: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.karte-suche input, .karte-suche select { width: 100%; }
.karte-titel { margin: 0; font-size: 1.25rem; }
.karte-liste li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); padding-block: var(--space-1); border-bottom: 1px solid var(--hairline); }
.karte-liste a { font-family: var(--font-display); font-weight: 650; text-decoration: none; }
/* Trefferkarte in der Suche: breit neben der Liste, schmal darüber, kleiner und einklappbar. */
.suche-ergebnis { display: grid; gap: var(--space-6); }
.suche-liste { min-width: 0; }
.suche-karte { order: -1; min-width: 0; }
.suche-karte:has(> .karte[hidden]) { display: none; }
.suche-karte > summary { margin: 0; font-family: var(--font-display); font-weight: 600; }
.suche-karte .karte { margin-block: var(--space-3) 0; gap: var(--space-4); }
.suche-karte .karte-flaeche { flex-basis: 100%; height: clamp(14rem, 35vh, 20rem); }
.suche-karte .karte-seite { flex-basis: 100%; }
@media (max-width: 63.99rem) { .suche-karte .karte-titel, .suche-karte .karte-liste { display: none; } }
@media (min-width: 64rem) {
  .suche-ergebnis:has(.karte:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(22rem, 40%); align-items: start; }
  .suche-karte { order: 0; position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
  .suche-karte .karte-flaeche { height: clamp(20rem, 55vh, 36rem); }
}
.karte-flaeche .maplibregl-ctrl-group { border-radius: 0; box-shadow: none; border: var(--line) solid var(--border); background: var(--bg); }
.karte-flaeche .maplibregl-ctrl-group button { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; background: var(--bg); }
.karte-flaeche .maplibregl-ctrl-group button + button { border-top: 1px solid var(--hairline); }
.karte-flaeche .maplibregl-ctrl-group button:hover { transform: none; box-shadow: none; background: var(--marker); }
.karte-flaeche .maplibregl-ctrl-attrib { background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: var(--text-xs); }
.karte-flaeche .maplibregl-ctrl-attrib a { color: inherit; }
:root[data-theme="nacht"] .karte-flaeche .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .karte-flaeche .maplibregl-ctrl-icon { filter: invert(1); } }

/* Statistik: einfarbig, Werte stehen als Zahl daneben. Keine Hexwerte, damit alle Farbkombinationen greifen. */
.stat-section { margin-top: var(--space-16); }
.stat-section > h2 { margin-top: 0; border-top: var(--line-heavy) solid var(--border); padding-top: var(--space-3); }
.stat-note { color: var(--muted); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.4; }
.bars { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.bar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem; gap: var(--space-3); align-items: center; padding-block: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }
a.bar { text-decoration: none; }
.bar-track { display: block; height: 1.125rem; }
.bar-fill { display: block; height: 100%; min-width: 2px; background: var(--text); transition: background-color var(--ease); }
a.bar:hover .bar-fill { background: var(--marker); outline: var(--line) solid var(--border); outline-offset: -2px; }
.bar-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bars + .stat-note { margin-top: var(--space-3); }
.columns { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; align-items: stretch; gap: 2px; height: 16rem; }
.columns li { flex: 1 1 0; min-width: 0; }
.column { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; gap: var(--space-1); text-decoration: none; }
a.column:not(.button, .chip) { background: none; }
a.column:hover .column-bar { background: var(--marker); outline: var(--line) solid var(--border); outline-offset: -2px; }
a.column:hover { color: inherit; }
.column-area { flex: 1 1 auto; display: flex; align-items: flex-end; min-height: 0; }
.column-bar { display: block; width: 100%; height: var(--h); min-height: 2px; background: var(--text); transition: background-color var(--ease); }
.column.gap .column-area { background: repeating-linear-gradient(135deg, var(--hairline) 0 2px, transparent 2px 7px); }
.column.gap .column-bar { display: none; }
.column-label { display: block; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; line-height: 1; }
.scroll-x { overflow-x: auto; }
/* Sitzungs-Teppich: Spaltenbreiten wie CARPET_LABEL und 366 Tage in web/stats.py, so bleiben beide SVG gleich hoch. */
.teppich { display: grid; grid-template-columns: 52fr 1098fr; min-width: 52rem; margin-top: var(--space-4); }
.teppich svg { display: block; width: 100%; height: auto; min-width: 0; }
.teppich svg:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.teppich svg:first-child text { text-anchor: end; }
.teppich text { dominant-baseline: central; fill: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.teppich .luecke { fill: var(--muted); stroke: var(--bg); stroke-width: 4px; paint-order: stroke; }
.teppich .raster, .teppich pattern path { fill: none; stroke: var(--hairline); stroke-width: 1px; }
.teppich a path { fill: transparent; }
.teppich a:hover path { fill: color-mix(in srgb, var(--marker) 40%, transparent); stroke: var(--border); stroke-width: 1px; }
.teppich .punkte { fill: var(--text); pointer-events: none; }
details.data-table { margin-top: var(--space-4); }
details.data-table summary { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
details.data-table table { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); }
details.data-table td, details.data-table th { font-variant-numeric: tabular-nums; }
.heat { width: auto; min-width: min(100%, 26rem); margin-top: var(--space-4); border-collapse: separate; border-spacing: 2px; font-family: var(--font-display); font-size: var(--text-sm); }
.heat th { border: 0; padding: var(--space-1) var(--space-2); text-align: center; font-weight: 700; }
.heat tbody th { text-align: right; white-space: nowrap; color: var(--muted); }
.heat td { border: 0; width: 3.25rem; padding: var(--space-1); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.heat .h0 { color: var(--muted); font-weight: 400; }
.heat .h1 { background: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.heat .h2 { background: color-mix(in srgb, var(--text) 20%, var(--bg)); }
.heat .h3 { background: color-mix(in srgb, var(--text) 34%, var(--bg)); }
.heat .h4 { background: var(--text); color: var(--bg); }
.trends { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); margin-top: var(--space-4); }
.trend h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 800; line-height: 1.2; }
.spark { display: flex; align-items: flex-end; gap: 1px; height: 3.5rem; margin-block: var(--space-2) var(--space-1); border-bottom: var(--line) solid var(--border); }
.spark span { flex: 1 1 0; min-width: 0; height: var(--h); background: var(--text); }
.spark .none { height: 100%; background: repeating-linear-gradient(135deg, var(--hairline) 0 2px, transparent 2px 7px); }
/* Begriffswolke: Die Häufigkeit steckt in Größe und Gewicht, die Farbe bleibt einheitlich. */
.wolke { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); font-family: var(--font-display); line-height: 1.15; }
.wolke li { min-width: 0; max-width: 100%; }
.wolke a { text-decoration: none; hyphens: auto; overflow-wrap: anywhere; }
.wolke .w1 { font-size: var(--text-sm); font-weight: 500; }
.wolke .w2 { font-size: var(--text-base); font-weight: 600; }
.wolke .w3 { font-size: var(--text-h2); font-weight: 700; }
.wolke .w4 { font-size: var(--text-h1); font-weight: 800; }
.wolke .w5 { font-size: var(--text-poster); font-weight: 900; }
.not-shown { padding-left: 1.2em; max-width: var(--measure); }
.not-shown li { margin-bottom: var(--space-2); }

@media (max-width: 75rem) {
  header.site form { margin-left: 0; max-width: none; flex: 1 1 calc(100% - 5.5rem - 2 * var(--space-6) - 1px); }
}
@media (max-width: 48rem) {
  header.site .wrap { column-gap: var(--space-2); }
  header.site nav { margin-right: var(--space-4); }
  header.site form { margin-left: 0; max-width: none; flex: 1 1 calc(100% - 5.5rem - 2 * var(--space-2) - 1px); }
  .teppich text { font-size: 18px; }
  .teppich .punkte { stroke: var(--text); stroke-width: .6px; }
}
@media (max-width: 30rem) {
  .stats { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  .stat { display: flex; align-items: baseline; gap: var(--space-3); }
  .doc-text { padding: var(--space-3) var(--space-4); }
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-label { grid-column: 1 / -1; }
  .columns { height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:hover, .button:hover { transform: none; }
}

/* Ladebalken (busy.js): Streifen in den Kopfzeilenfarben, laufen von links nach rechts. */
html.busy body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 8px;
  z-index: 1000;
  background: repeating-linear-gradient(90deg, var(--head-accent) 0 16px, var(--head-bg) 16px 32px);
  border-bottom: var(--line) solid var(--head-bg);
  animation: busy .5s linear infinite;
  pointer-events: none;
}
html.busy, html.busy * { cursor: progress; }
@keyframes busy { to { background-position: 32px 0; } }