/* vorschlaege.css -- Vorschlagskasten v1 ("Wuensche & Verbesserungsvorschlaege"), 30.09.2026.
 *
 * Eigene CSS statt Tailwind, wie massnahmen und azav: Tailwind ist im Hub vorkompiliert, eine nicht enthaltene
 * Klasse wirkt ohne Meldung nicht (GESTALTUNG.md Abschnitt 1).
 * Farben und Textstufen aus GESTALTUNG.md Abschnitt 2 -- vier Flaechen-, vier Textstufen, mehr nicht.
 * Symbolfarbe #69D36C nur fuer Symbol, Symbolflaeche, Kontur, Statuszeile (G-SYMBOLFARBE-1).
 * JEDE Groesse ueber var(--sk) (GESTALTUNG.md 4): eine feste Pixelgroesse braeche den Groessenregler.
 * Keine Bewegung in der Arbeitsflaeche (REGEL-OBERFLAECHE 6.4), nur Farbwechsel beim Ueberfahren, und die nur
 * fuer die Eigenschaften, die sich aendern (G-BEWEGUNG-8: kein "transition: all").
 * Die schwaechste Textstufe (hub-dimmer) nur fuer Nebensachen, nie fuer Inhalte (REGEL-OBERFLAECHE 6.2). */

@font-face { font-family: 'Inter'; src: url('../vendor/schriften/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../vendor/schriften/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../vendor/schriften/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../vendor/schriften/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../vendor/schriften/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../vendor/schriften/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --sk: 1;
  --bg: #0D1320; --card: #1A2436; --dim: #161F2E; --dimmer: #141C2A;
  --line: #2A3548; --line2: #344155;
  --acc: #0E6A96; --accl: #3EE0FF;
  --text: #F8FAFC; --mut: #A8B6C8; --hdim: #8B97A8; --hdimmer: #6B7889;
  --vk: #69D36C;
  --warn: #FBBF24; --rot: #FCA5A5; --gruen: #4ADE80;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: 'Inter', system-ui, sans-serif; font-size: calc(15px * var(--sk)); line-height: 1.5; }
h1, h2, h3, h4, .disp { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); }
:focus-visible { outline: calc(2px * var(--sk)) solid rgba(62, 224, 255, 0.55); outline-offset: calc(2px * var(--sk)); }
a { color: var(--accl); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Rahmen ── */
.rahmen { max-width: min(98vw, calc(1320px * var(--sk))); margin: 0 auto; padding: calc(20px * var(--sk)) calc(20px * var(--sk)) calc(60px * var(--sk)); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--sk)); flex-wrap: wrap; margin-bottom: calc(14px * var(--sk)); }
.titel { display: flex; align-items: center; gap: calc(12px * var(--sk)); }
.symbol { width: calc(42px * var(--sk)); height: calc(42px * var(--sk)); border-radius: calc(10px * var(--sk)); display: inline-flex; align-items: center; justify-content: center; background: rgba(105, 211, 108, 0.12); border: 1px solid rgba(105, 211, 108, 0.20); color: var(--vk); flex-shrink: 0; }
.symbol svg { width: calc(22px * var(--sk)); height: calc(22px * var(--sk)); }
/* Im Telefonformat schnitt "Verbesserungsvorschläge" die Fassungsnummer am Rand ab (gemessen 30.09.2026, 375 px):
   deutsche Silbentrennung und Umbruch statt Abschneiden. */
.titel { min-width: 0; }
.titel h1 { font-size: calc(21px * var(--sk)); min-width: 0; hyphens: manual; }
.fassung { font-family: 'Inter', sans-serif; font-weight: 500; font-size: calc(11px * var(--sk)); color: var(--hdimmer); margin-left: calc(8px * var(--sk)); vertical-align: middle; }
.kopf-rechts { display: flex; align-items: center; gap: calc(18px * var(--sk)); flex-wrap: wrap; }

.skala { display: flex; align-items: center; gap: calc(8px * var(--sk)); font-size: calc(13px * var(--sk)); color: var(--mut); }
.skala button { width: calc(30px * var(--sk)); height: calc(30px * var(--sk)); border-radius: calc(7px * var(--sk)); border: 1px solid var(--line2); background: var(--card); font-weight: 600; cursor: pointer; }
.skala button:hover { border-color: var(--accl); }
.skala input[type=range] { width: calc(120px * var(--sk)); accent-color: var(--accl); }
.skala .wert { min-width: calc(44px * var(--sk)); color: var(--text); font-weight: 600; }

.stand { font-size: calc(13px * var(--sk)); color: var(--mut); display: flex; align-items: center; gap: calc(8px * var(--sk)); }
.stand.alt { color: var(--warn); }
.stand button { background: transparent; border: 1px solid var(--line2); border-radius: calc(7px * var(--sk)); padding: calc(4px * var(--sk)) calc(10px * var(--sk)); cursor: pointer; color: var(--text); }
.stand button:hover { border-color: var(--accl); }

.reiter { display: flex; gap: calc(4px * var(--sk)); border-bottom: 1px solid var(--line); margin-bottom: calc(22px * var(--sk)); flex-wrap: wrap; }
.reiter button { background: transparent; border: 0; border-bottom: calc(2px * var(--sk)) solid transparent; padding: calc(10px * var(--sk)) calc(16px * var(--sk)); color: var(--mut); cursor: pointer; font-size: calc(15px * var(--sk)); transition: color 120ms ease, border-color 120ms ease; }
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected=true] { color: var(--text); font-weight: 600; border-bottom-color: var(--vk); }
.plakette { display: inline-block; margin-left: calc(7px * var(--sk)); min-width: calc(20px * var(--sk)); padding: 0 calc(7px * var(--sk)); border-radius: calc(10px * var(--sk)); background: var(--vk); color: #0D1320; font-weight: 700; font-size: calc(12px * var(--sk)); line-height: calc(20px * var(--sk)); text-align: center; }

/* ── Kern (Drei-Sekunden-Probe): das groesste Element je Reiter ── */
.kern { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; font-size: calc(26px * var(--sk)); line-height: 1.25; margin: 0 0 calc(6px * var(--sk)); }
.kern-unter { color: var(--mut); margin: 0 0 calc(20px * var(--sk)); }

/* ── Felder ── */
.feld { margin-bottom: calc(18px * var(--sk)); }
.feld > label, .feld > .beschriftung { display: block; font-weight: 500; color: var(--mut); margin-bottom: calc(6px * var(--sk)); }
.zweispaltig { display: grid; grid-template-columns: minmax(calc(220px * var(--sk)), 1fr) 2.2fr; gap: calc(16px * var(--sk)); }
@media (max-width: 760px) { .zweispaltig { grid-template-columns: 1fr; } }
input[type=text], input[type=search], select, textarea { width: 100%; background: var(--dimmer); border: 1px solid var(--line2); border-radius: calc(8px * var(--sk)); padding: calc(10px * var(--sk)) calc(12px * var(--sk)); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--accl); outline: none; box-shadow: 0 0 0 calc(2px * var(--sk)) rgba(62, 224, 255, 0.25); }
.fehler-hier { border-color: var(--rot) !important; }
.meldung-feld { color: var(--rot); margin-top: calc(6px * var(--sk)); font-size: calc(14px * var(--sk)); }
.zaehler { color: var(--hdim); font-size: calc(13px * var(--sk)); text-align: right; margin-top: calc(4px * var(--sk)); }

/* Schreibfeld */
.leiste { display: flex; gap: calc(6px * var(--sk)); flex-wrap: wrap; background: var(--dim); border: 1px solid var(--line2); border-bottom: 0; border-radius: calc(8px * var(--sk)) calc(8px * var(--sk)) 0 0; padding: calc(8px * var(--sk)); }
.leiste button { background: var(--card); border: 1px solid var(--line2); border-radius: calc(7px * var(--sk)); padding: calc(5px * var(--sk)) calc(11px * var(--sk)); cursor: pointer; font-size: calc(14px * var(--sk)); }
.leiste button:hover { border-color: var(--accl); }
.leiste button b, .leiste button i { margin-right: calc(4px * var(--sk)); }
.schreibfeld { min-height: calc(260px * var(--sk)); background: var(--dimmer); border: 1px solid var(--line2); border-radius: 0 0 calc(8px * var(--sk)) calc(8px * var(--sk)); padding: calc(14px * var(--sk)) calc(18px * var(--sk)); outline: none; }
.schreibfeld:focus { border-color: var(--accl); }
.schreibfeld:empty::before { content: attr(data-platzhalter); color: var(--hdim); }
.schreibfeld h3, .inhalt h3 { font-size: calc(18px * var(--sk)); margin: calc(12px * var(--sk)) 0 calc(6px * var(--sk)); }
.schreibfeld p, .inhalt p { margin: 0 0 calc(10px * var(--sk)); }
.schreibfeld img, .inhalt img { display: block; max-width: min(100%, calc(720px * var(--sk))); border: 1px solid var(--line2); border-radius: calc(6px * var(--sk)); margin: calc(8px * var(--sk)) 0 calc(12px * var(--sk)); }
.tipp { color: var(--mut); margin-top: calc(8px * var(--sk)); }

/* Dateien */
.ablage { border: calc(1.5px * var(--sk)) dashed var(--line2); border-radius: calc(8px * var(--sk)); padding: calc(18px * var(--sk)); text-align: center; color: var(--mut); background: var(--dim); cursor: pointer; }
.ablage.drueber { border-color: var(--accl); color: var(--text); }
.ablage strong { color: var(--accl); }
.dateizeile { display: flex; justify-content: space-between; align-items: center; gap: calc(10px * var(--sk)); background: var(--card); border: 1px solid var(--line); border-radius: calc(7px * var(--sk)); padding: calc(8px * var(--sk)) calc(12px * var(--sk)); margin-top: calc(6px * var(--sk)); }
.dateizeile .groesse { color: var(--hdim); font-size: calc(13px * var(--sk)); margin-left: calc(6px * var(--sk)); }
.grenzen { color: var(--mut); margin-top: calc(8px * var(--sk)); }
/* E3, #84: der Hinweis ist Inhalt, keine Fussnote -- normale Textstufe, abgesetzt, nicht kleiner als der Text */
.hinweis { border: calc(1.5px * var(--sk)) solid rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.07); border-radius: calc(8px * var(--sk)); padding: calc(12px * var(--sk)) calc(14px * var(--sk)); margin: calc(12px * var(--sk)) 0; }
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: calc(6px * var(--sk)); }
.hinweis strong { color: var(--warn); }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--sk)); background: var(--acc); color: var(--text); border: 1px solid var(--acc); border-radius: calc(8px * var(--sk)); padding: calc(11px * var(--sk)) calc(22px * var(--sk)); font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.knopf:hover { background: #1180B4; border-color: var(--accl); }
.knopf.gross { font-size: calc(17px * var(--sk)); padding: calc(13px * var(--sk)) calc(30px * var(--sk)); }
.knopf.zweit { background: transparent; border-color: var(--line2); font-weight: 500; padding: calc(7px * var(--sk)) calc(14px * var(--sk)); }
.knopf.zweit:hover { border-color: var(--accl); background: transparent; }
.knopf.gefahr { background: transparent; border-color: rgba(252, 165, 165, 0.55); color: var(--rot); }
.knopf.gefahr:hover { border-color: var(--rot); background: rgba(252, 165, 165, 0.08); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.absenden { display: flex; align-items: center; gap: calc(16px * var(--sk)); flex-wrap: wrap; margin-top: calc(8px * var(--sk)); }
.absenden .klein { color: var(--mut); }

/* ── Listen ── */
.zeilen { display: flex; flex-direction: column; gap: calc(8px * var(--sk)); }
.zeile { display: grid; align-items: center; gap: calc(14px * var(--sk)); background: var(--card); border: 1px solid var(--line); border-radius: calc(10px * var(--sk)); padding: calc(12px * var(--sk)) calc(16px * var(--sk)); cursor: pointer; text-align: left; width: 100%; transition: border-color 120ms ease; }
.zeile:hover { border-color: var(--line2); }
.zeile .t { font-weight: 600; font-size: calc(16px * var(--sk)); }
.zeile .u { color: var(--mut); }
.zeile .antwortzeile { grid-column: 1 / -1; color: var(--mut); border-top: 1px solid var(--line); padding-top: calc(8px * var(--sk)); }
.zeile .antwortzeile strong { color: var(--text); }
.punkt-neu::before { content: ''; display: inline-block; width: calc(8px * var(--sk)); height: calc(8px * var(--sk)); border-radius: 50%; background: var(--vk); margin-right: calc(8px * var(--sk)); vertical-align: middle; }
/* Titelspalte minmax(0, 1fr): sonst waechst sie auf ihre laengste Silbe, die Zeile laeuft ueber und die Zeilen
   stehen gegeneinander versetzt (gemessen 30.09.2026 in der Vorschau, Archiv bei rund 1000 px Breite). */
.z-meine { grid-template-columns: minmax(0, 1fr) minmax(calc(150px * var(--sk)), auto) calc(150px * var(--sk)) calc(190px * var(--sk)); }
.z-post { grid-template-columns: minmax(0, 1fr) calc(170px * var(--sk)) calc(170px * var(--sk)) calc(150px * var(--sk)) calc(70px * var(--sk)); }
.z-archiv { grid-template-columns: minmax(0, 1fr) calc(150px * var(--sk)) calc(160px * var(--sk)) calc(140px * var(--sk)) calc(120px * var(--sk)) calc(60px * var(--sk)) calc(160px * var(--sk)); }
.zeile > * { min-width: 0; overflow-wrap: anywhere; }
.spaltenkopf { display: grid; gap: calc(14px * var(--sk)); padding: 0 calc(16px * var(--sk)) calc(4px * var(--sk)); color: var(--hdim); font-size: calc(13px * var(--sk)); text-transform: uppercase; letter-spacing: 0.1em; }
.spaltenkopf button { background: transparent; border: 0; padding: 0; color: inherit; text-transform: inherit; letter-spacing: inherit; font-size: inherit; cursor: pointer; text-align: left; }
.spaltenkopf button[data-aktiv=true] { color: var(--text); }
/* Schmale Fenster: Zeilen fliessen, der Titel steht allein in der ersten Zeile. Die Sortierknoepfe des Archivs
   bleiben als Reihe stehen -- sie verschwinden nicht, sie brechen um. Die Schwellen rechnen gegen --sk, weil eine
   groessere Schrift die feste Spaltenbreite frueher sprengt (G-BREITE-2). */
@media (max-width: 1150px) {
  .z-meine, .z-post, .z-archiv { display: flex; flex-wrap: wrap; column-gap: calc(16px * var(--sk)); row-gap: calc(6px * var(--sk)); }
  .z-meine > :first-child, .z-post > :first-child, .z-archiv > :first-child { flex-basis: 100%; }
  .spaltenkopf.z-meine, .spaltenkopf.z-post { display: none; }
  .spaltenkopf.z-archiv { display: flex; flex-wrap: wrap; gap: calc(6px * var(--sk)) calc(14px * var(--sk)); }
  .spaltenkopf.z-archiv::before { content: 'Sortieren nach:'; text-transform: none; letter-spacing: 0; }
  .spaltenkopf.z-archiv > :first-child { flex-basis: auto; }
}
.leer { background: var(--dim); border: 1px dashed var(--line2); border-radius: calc(10px * var(--sk)); padding: calc(22px * var(--sk)); color: var(--mut); }

/* Stand: Wort UND Farbe (Farbe nie allein) */
.stand-marke { display: inline-flex; align-items: center; gap: calc(7px * var(--sk)); font-weight: 600; border-radius: calc(7px * var(--sk)); padding: calc(4px * var(--sk)) calc(11px * var(--sk)); white-space: nowrap; }
.stand-marke::before { content: ''; width: calc(8px * var(--sk)); height: calc(8px * var(--sk)); border-radius: 50%; background: currentColor; }
.s-eingegangen { background: rgba(168, 182, 200, 0.12); color: #CBD5E1; }
.s-in_pruefung { background: rgba(62, 224, 255, 0.10); color: #3EE0FF; }
.s-eingeplant { background: rgba(155, 141, 247, 0.14); color: #B7ADFA; }
.s-umgesetzt { background: rgba(74, 222, 128, 0.10); color: #4ADE80; }
.s-zurueckgestellt { background: rgba(251, 191, 36, 0.10); color: #FBBF24; }
.s-nicht_umgesetzt { background: rgba(252, 165, 165, 0.10); color: #FCA5A5; }
.prio { font-weight: 700; font-size: calc(13px * var(--sk)); letter-spacing: 0.05em; text-transform: uppercase; border-radius: calc(6px * var(--sk)); padding: calc(3px * var(--sk)) calc(9px * var(--sk)); }
.p-wichtig { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; }
.p-normal { background: rgba(168, 182, 200, 0.14); color: #CBD5E1; }
.p-keine { border: 1px dashed var(--line2); color: var(--hdim); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ── Filter ── */
.filter { display: flex; flex-wrap: wrap; gap: calc(10px * var(--sk)); align-items: flex-end; margin-bottom: calc(16px * var(--sk)); }
.filter .feld { margin: 0; min-width: calc(140px * var(--sk)); }
.filter .feld.breit { min-width: calc(220px * var(--sk)); }
.filter select.gesetzt, .filter input.gesetzt { border-color: var(--vk); }
.bilanz { color: var(--mut); margin: calc(-12px * var(--sk)) 0 calc(18px * var(--sk)); }

/* ── Vorschlag geoeffnet ── */
.zurueck { background: transparent; border: 0; color: var(--mut); cursor: pointer; padding: 0; margin-bottom: calc(10px * var(--sk)); }
.zurueck:hover { color: var(--text); }
.zweiteilig { display: grid; grid-template-columns: 1fr calc(380px * var(--sk)); gap: calc(22px * var(--sk)); align-items: start; }
@media (max-width: 1000px) { .zweiteilig { grid-template-columns: 1fr; } }
.inhalt { background: var(--dimmer); border: 1px solid var(--line); border-radius: calc(10px * var(--sk)); padding: calc(18px * var(--sk)) calc(22px * var(--sk)); }
.inhalt ul, .inhalt ol, .schreibfeld ul, .schreibfeld ol { margin: 0 0 calc(10px * var(--sk)); padding-left: calc(24px * var(--sk)); }
.bild-fehlt { border: 1px dashed var(--line2); border-radius: calc(6px * var(--sk)); padding: calc(10px * var(--sk)); color: var(--mut); margin: calc(8px * var(--sk)) 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: calc(12px * var(--sk)); padding: calc(18px * var(--sk)); }
.panel h2 { font-size: calc(17px * var(--sk)); margin-bottom: calc(12px * var(--sk)); }
.panel h3 { font-size: calc(15px * var(--sk)); margin: calc(18px * var(--sk)) 0 calc(8px * var(--sk)); }
.knopfreihe { display: flex; border: 1px solid var(--line2); border-radius: calc(8px * var(--sk)); overflow: hidden; }
.knopfreihe button { flex: 1; background: transparent; border: 0; border-right: 1px solid var(--line2); padding: calc(10px * var(--sk)); cursor: pointer; color: var(--mut); }
.knopfreihe button:last-child { border-right: 0; }
.knopfreihe button[aria-pressed=true] { color: var(--text); font-weight: 700; background: rgba(62, 224, 255, 0.10); }
.knopfreihe button[data-wert=wichtig][aria-pressed=true] { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; }
.erklaerung { color: var(--mut); margin: calc(6px * var(--sk)) 0 calc(14px * var(--sk)); }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: calc(7px * var(--sk)) 0; border-bottom: 1px solid var(--line); color: var(--mut); }
.verlauf li strong { color: var(--text); font-weight: 600; }
.meta { color: var(--mut); margin: 0 0 calc(14px * var(--sk)); }
.meta strong { color: var(--text); }
.aktionen { display: flex; gap: calc(10px * var(--sk)); flex-wrap: wrap; margin-top: calc(14px * var(--sk)); }

/* ── Meldungen ── */
.meldung { border-radius: calc(8px * var(--sk)); padding: calc(12px * var(--sk)) calc(14px * var(--sk)); margin-bottom: calc(16px * var(--sk)); border: 1px solid; }
.meldung.gut { border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.07); }
.meldung.schlecht { border-color: rgba(252, 165, 165, 0.55); background: rgba(252, 165, 165, 0.07); }
.meldung.info { border-color: var(--line2); background: var(--dim); }

/* ── Fenster: schliesst NUR ueber das X oder den Bestaetigungsknopf (Auftrag V3) ── */
.fensterhintergrund { position: fixed; inset: 0; background: rgba(5, 8, 14, 0.72); display: flex; align-items: center; justify-content: center; z-index: 50; padding: calc(16px * var(--sk)); }
/* overflow-x: hidden, gemessen 30.09.2026 in der Vorschau: mit "overflow: auto" standen beide Rollbalken, obwohl
   scrollHeight == clientHeight -- ein Rundungseffekt am Rand bei gebrochener Skalierung. */
.fenster { background: var(--card); border: 1px solid var(--line2); border-radius: calc(12px * var(--sk)); max-width: calc(640px * var(--sk)); width: 100%; max-height: 90vh; overflow-x: hidden; overflow-y: auto; padding: calc(20px * var(--sk)) calc(22px * var(--sk)); position: relative; }
.fenster h2 { font-size: calc(19px * var(--sk)); margin: 0 calc(40px * var(--sk)) calc(12px * var(--sk)) 0; }
.fenster .x { position: absolute; top: calc(12px * var(--sk)); right: calc(12px * var(--sk)); width: calc(34px * var(--sk)); height: calc(34px * var(--sk)); border-radius: calc(8px * var(--sk)); border: 1px solid var(--line2); background: transparent; cursor: pointer; font-size: calc(18px * var(--sk)); }
.fenster .x:hover { border-color: var(--accl); }
.aenderung + .aenderung { margin-top: calc(14px * var(--sk)); }
.aenderung strong { display: block; font-size: calc(16px * var(--sk)); }
.aenderung p { margin: calc(4px * var(--sk)) 0 0; color: var(--mut); }

/* ── Wiki (Regel W, W6 bis W9) ── */
.wiki { display: grid; grid-template-columns: minmax(calc(220px * var(--sk)), 28%) 1fr; gap: calc(22px * var(--sk)); align-items: start; }
@media (max-width: 900px) { .wiki { grid-template-columns: 1fr; } }
.wiki nav { position: sticky; top: calc(10px * var(--sk)); display: flex; flex-direction: column; gap: calc(3px * var(--sk)); border-right: 1px solid var(--line); padding-right: calc(12px * var(--sk)); max-height: 92vh; overflow: auto; }
.wiki nav button { text-align: left; background: transparent; border: 0; border-radius: calc(7px * var(--sk)); padding: calc(6px * var(--sk)) calc(8px * var(--sk)); cursor: pointer; color: var(--text); }
.wiki nav button:hover { background: var(--card); }
.wiki nav .rolle { color: var(--vk); font-weight: 600; }
.wiki .trefferzahl { color: var(--mut); font-size: calc(14px * var(--sk)); padding: calc(4px * var(--sk)) calc(4px * var(--sk)) calc(6px * var(--sk)); }
.wiki .trefferzahl.keine { color: var(--rot); }
.wiki .druckreihe { display: flex; flex-wrap: wrap; gap: calc(6px * var(--sk)); margin: calc(4px * var(--sk)) 0 calc(8px * var(--sk)); }
.wiki section { margin-bottom: calc(30px * var(--sk)); scroll-margin-top: calc(10px * var(--sk)); }
.wiki .abschnittkopf { display: flex; justify-content: space-between; align-items: baseline; gap: calc(10px * var(--sk)); border-bottom: 1px solid var(--line); padding-bottom: calc(6px * var(--sk)); margin-bottom: calc(10px * var(--sk)); }
.wiki h2 { font-size: calc(20px * var(--sk)); color: var(--vk); }
.wiki p { margin: 0 0 calc(10px * var(--sk)); }
.wiki .frage { border-left: calc(2px * var(--sk)) solid rgba(105, 211, 108, 0.35); padding-left: calc(10px * var(--sk)); margin-bottom: calc(10px * var(--sk)); }
.wiki .frage strong { display: block; }
.wiki figure { margin: calc(8px * var(--sk)) 0 calc(14px * var(--sk)); }
.wiki figure img { max-width: 100%; border: 1px solid var(--line2); border-radius: calc(8px * var(--sk)); }
.wiki figcaption { color: var(--mut); margin-top: calc(4px * var(--sk)); }
.wiki .bild-folgt { border: 1px dashed var(--line2); border-radius: calc(8px * var(--sk)); padding: calc(12px * var(--sk)); color: var(--mut); }
mark { background: #FDE047; color: #111827; border-radius: calc(3px * var(--sk)); padding: 0 calc(2px * var(--sk)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }