/* ===========================================================================
   VIR-AZAV — Rohentwurf, Takt 3
   Gebaut nach azav-SPEZIFIKATION-2026-09-21-werkzeug-rohentwurf.md
   (Streuwert 1ac347273138fa1addcf6f5032c1b46ec24187376bb6bf03fbbfb0f66767f037).

   EIGENE CSS, kein Tailwind. Begruendung: Tailwind ist im Hub vorkompiliert,
   eine dort fehlende Klasse wirkt OHNE Fehlermeldung nicht (Falle 1 des
   Auftrags). Ein Werkzeug mit eigener CSS hat dieses Problem nicht -- so
   macht es auch der Hausstand (massnahmen fuehrt css/massnahmen.css).

   SKALIERUNG: Jedes Mass steht als calc(<px> * var(--sk)). Damit skaliert der
   Groessenregler die GANZE Oberflaeche -- Navigationsbreite, Kontextspalte und
   Kopfzeilenhoehe eingeschlossen -- und nicht nur die Schrift (Bauvorlage 1.5).
   =========================================================================== */

/* --- Schriften: SELBST ausgeliefert, kein Fremdverweis (Bauvorlage 5.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;
}

/* --- Farben und Masse, Bauvorlage 5.1 und 5.3 ----------------------------- */
:root {
  --sk: 1;

  --bg: #0D1320;
  --card: #1A2436;
  --cdim: #161F2E;
  --cdmr: #141C2A;
  --line: #2A3548;
  --linel: #344155;
  --acc: #0E6A96;
  --accl: #3EE0FF;
  --tx: #F8FAFC;
  --mut: #A8B6C8;
  --dm: #8B97A8;
  --dmr: #6B7889;
  --az: #9B8DF7;
  --ok: #5DCAA5;
  --warn: #EFC44F;
  --bad: #F08A7B;

  --f10:  calc(10px   * var(--sk));
  --f98:  calc(9.8px  * var(--sk));
  --f105: calc(10.5px * var(--sk));
  --f11:  calc(11px   * var(--sk));
  --f12:  calc(12px   * var(--sk));
  --f13:  calc(13px   * var(--sk));
  --f14:  calc(14px   * var(--sk));
  --f16:  calc(16px   * var(--sk));
  --f19:  calc(19px   * var(--sk));
  --f22:  calc(22px   * var(--sk));
  --f26:  calc(26px   * var(--sk));

  --p4:  calc(4px  * var(--sk));
  --p6:  calc(6px  * var(--sk));
  --p8:  calc(8px  * var(--sk));
  --p10: calc(10px * var(--sk));
  --p12: calc(12px * var(--sk));
  --p16: calc(16px * var(--sk));
  --p20: calc(20px * var(--sk));

  --nav:  calc(214px * var(--sk));
  --ctx:  calc(338px * var(--sk));
  --topH: calc(56px  * var(--sk));
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;                   /* kein Seitenscroll, Bauvorlage 1.1 */
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--f14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Fokusring anwendungsweit, Bauvorlage 1.6
   -------------------------------------------------------------------------
   WARUM KEIN UEBERGANG AUF "all", BELEGT AM 21.09.2026:
   Die erste Fassung schrieb `transition: .16s` -- das ist `all`, und damit
   wurde auch der Fokusring ueber 160 ms eingeblendet. Gemessen am
   ausgelieferten Stand v0.2: unmittelbar nach dem Tastendruck stand
   box-shadow auf `rgba(0,0,0,0) 0px 0px 0px 0px`, also auf dem Startwert des
   Uebergangs, waehrend ein unfokussiertes Element `none` trug. Mit
   abgeschaltetem Uebergang kam sofort der Sollwert heraus.
   Ein Fokusring, der einblendet, ist beim Durchtabben zu spaet. Seit v0.3
   nennt jede Regel die Eigenschaften, die sie uebergehen soll -- box-shadow
   ist NICHT darunter. Die Dauern der Bauvorlage 5.3 bleiben unveraendert. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(62, 224, 255, .45);
  border-radius: calc(6px * var(--sk));
}

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

/* --- Grundraster ---------------------------------------------------------- */
.rahmen { display: flex; flex-direction: column; height: 100vh; }

.kopf {
  flex: 0 0 auto;
  height: var(--topH);
  display: flex;
  align-items: center;
  gap: var(--p12);
  padding: 0 var(--p16);
  background: var(--cdim);
  border-bottom: 1px solid var(--line);
}

.streifen {
  flex: 0 0 auto;
  padding: var(--p8) var(--p20);
  font-size: var(--f12);
  color: var(--mut);
  background: linear-gradient(90deg, rgba(155,141,247,.14), rgba(26,36,54,0));
  border-bottom: 1px solid var(--line);
}
.streifen b { color: var(--az); font-weight: 600; }

.mitte { flex: 1 1 auto; display: flex; min-height: 0; }

.nav {
  flex: 0 0 auto;
  width: var(--nav);
  background: var(--cdim);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: var(--p12) var(--p8);
}

.arbeit {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--p20);
  min-width: 0;
}

.g2 {
  display: grid;
  grid-template-columns: 1fr var(--ctx);
  gap: var(--p16);
  align-items: start;
}
.stapel { display: flex; flex-direction: column; gap: var(--p12); }

/* --- Kopfzeile ------------------------------------------------------------ */
.marke { display: flex; align-items: center; gap: var(--p8); flex: 0 0 auto; }
.logo {
  width: calc(26px * var(--sk)); height: calc(26px * var(--sk));
  border-radius: calc(7px * var(--sk));
  background: linear-gradient(140deg, var(--az), #6f5fd6);
  color: #14101f;
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: var(--f11);
  display: flex; align-items: center; justify-content: center;
}
.wortmarke {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: var(--f16); letter-spacing: .2px; white-space: nowrap;
}

.modus {
  display: flex; gap: calc(3px * var(--sk));
  background: var(--cdmr);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--sk));
  padding: calc(3px * var(--sk));
  flex: 0 0 auto;
}
.modus button {
  font-family: inherit; font-weight: 600; font-size: var(--f12);
  padding: var(--p4) var(--p12);
  border-radius: calc(7px * var(--sk));
  border: 0; background: transparent; color: var(--dm); cursor: pointer;
  transition: background-color .16s, color .16s;
}
.modus button[aria-pressed="true"] {
  background: rgba(155,141,247,.18);
  color: var(--az);
  box-shadow: inset 0 0 0 1px rgba(155,141,247,.3);
}

.suche { display: flex; align-items: center; gap: var(--p6); flex: 0 1 calc(300px * var(--sk)); min-width: calc(120px * var(--sk)); }
.suche > label { font-size: var(--f12); color: var(--dm); white-space: nowrap; }
.suche input {
  flex: 1 1 auto; min-width: 0;
  height: calc(32px * var(--sk));
  background: var(--cdmr);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  color: var(--tx);
  font-family: inherit; font-size: var(--f12);
  padding: 0 var(--p10);
}
.suche input::placeholder { color: var(--dmr); }

.fuge { flex: 1 1 auto; }

/* Groessenregler, Bauvorlage 1.5 */
.regler {
  display: flex; align-items: center; gap: var(--p6);
  background: var(--cdmr);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  padding: var(--p4) var(--p8);
  flex: 0 0 auto;
}
.regler button {
  width: calc(21px * var(--sk)); height: calc(21px * var(--sk));
  border-radius: calc(5px * var(--sk));
  background: var(--card); border: 1px solid var(--line);
  color: var(--mut); font-family: inherit; font-size: var(--f12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .16s, color .16s; padding: 0;
}
.regler button:hover { border-color: var(--linel); color: var(--tx); }
.regler output {
  font-weight: 600; font-size: var(--f11); color: var(--mut);
  min-width: calc(36px * var(--sk)); text-align: center;
  font-variant-numeric: tabular-nums;
}
.regler input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: calc(78px * var(--sk)); height: calc(3px * var(--sk));
  background: var(--line); border-radius: calc(2px * var(--sk));
  cursor: pointer;
}
.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(12px * var(--sk)); height: calc(12px * var(--sk));
  border-radius: 50%; background: var(--accl); border: 0; cursor: pointer;
}
.regler input[type="range"]::-moz-range-thumb {
  width: calc(12px * var(--sk)); height: calc(12px * var(--sk));
  border-radius: 50%; background: var(--accl); border: 0; cursor: pointer;
}

.benutzer {
  width: calc(30px * var(--sk)); height: calc(30px * var(--sk));
  border-radius: 50%; background: #2c3852;
  color: var(--mut); font-weight: 600; font-size: var(--f11);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* --- Navigation ----------------------------------------------------------- */
.navgruppe { font-size: var(--f10); text-transform: uppercase; letter-spacing: .14em; color: var(--dmr); padding: var(--p10) var(--p10) var(--p6); }
.navzeile {
  display: flex; align-items: center; gap: var(--p8);
  padding: var(--p6) var(--p10);
  border-radius: var(--p8);
  cursor: pointer; transition: background-color .16s;
  width: 100%; border: 0; background: transparent; text-align: left;
  font-family: inherit;
}
.navzeile:hover { background: rgba(42,53,72,.5); }
.navzeile:hover .navtext { color: var(--tx); }
.navsym { width: calc(15px * var(--sk)); height: calc(15px * var(--sk)); border-radius: calc(4px * var(--sk)); background: #2b3750; flex: 0 0 auto; transition: background-color .16s; }
.navtext { font-size: var(--f13); color: var(--mut); flex: 1 1 auto; white-space: nowrap; }
.navzahl { font-size: var(--f11); color: var(--dmr); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.navzahl.rot { background: var(--bad); color: #14101f; font-weight: 700; border-radius: calc(9px * var(--sk)); padding: 0 var(--p6); }
.navzeile[aria-current="page"] { background: rgba(155,141,247,.13); box-shadow: inset 2px 0 0 var(--az); }
.navzeile[aria-current="page"] .navtext { color: var(--tx); font-weight: 600; }
.navzeile[aria-current="page"] .navsym { background: var(--az); }

/* --- Karten und Tabellen -------------------------------------------------- */
.karte { background: var(--card); border: 1px solid var(--line); border-radius: calc(12px * var(--sk)); padding: var(--p12) var(--p16); }
.karte.verlauf { background: linear-gradient(160deg, #1C2739, var(--card)); }
.karte.hervor { background: linear-gradient(150deg, rgba(155,141,247,.11), var(--card)); border-color: rgba(155,141,247,.25); }

.kkopf { display: flex; align-items: center; gap: var(--p8); margin-bottom: var(--p10); }
.kpunkt { width: calc(7px * var(--sk)); height: calc(7px * var(--sk)); border-radius: calc(2px * var(--sk)); background: var(--az); flex: 0 0 auto; }
.ktitel { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f13); }
.kzusatz { margin-left: auto; font-weight: 500; font-size: var(--f11); color: var(--dmr); }

.seitenkopf { display: flex; align-items: flex-start; gap: var(--p12); margin-bottom: var(--p16); }
.seitentitel { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f22); margin: 0; text-wrap: balance; }
.seitenunter { font-size: var(--f12); color: var(--dm); margin: calc(2px * var(--sk)) 0 0; }

.knopf {
  font-family: inherit; font-size: var(--f12); font-weight: 600;
  padding: var(--p8) var(--p12); border-radius: var(--p8);
  border: 1px solid var(--line); background: #212D41; color: var(--mut);
  cursor: pointer; transition: background-color .16s, border-color .16s, color .16s, filter .16s; white-space: nowrap;
}
.knopf:hover { border-color: var(--linel); color: var(--tx); }
.knopf.haupt { background: var(--acc); color: #EAFBFF; border-color: transparent; }
.knopf.haupt:hover { filter: brightness(1.14); }
.knopf.haupt:active { transform: translateY(1px); }
.knopf.az { background: rgba(155,141,247,.15); color: var(--az); border-color: rgba(155,141,247,.3); }
.knopf.breit { width: 100%; text-align: center; }

.kzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--sk)), 1fr)); gap: var(--p12); margin-bottom: var(--p16); }
.kzahl { position: relative; overflow: hidden; }
.kzahl .wert { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f26); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kzahl .bez { font-size: var(--f11); color: var(--dm); }
.schein { position: absolute; top: calc(-26px * var(--sk)); right: calc(-26px * var(--sk)); width: calc(74px * var(--sk)); height: calc(74px * var(--sk)); border-radius: 50%; background: var(--az); opacity: .1; pointer-events: none; }

.tabellenrahmen { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th {
  font-weight: 600; font-size: var(--f105); text-transform: uppercase; letter-spacing: .1em;
  color: var(--dmr); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line); padding: var(--p10);
}
table.t td { padding: var(--p10); border-bottom: 1px solid rgba(42,53,72,.6); font-size: var(--f12); color: var(--mut); }
table.t tbody tr td { transition: background-color .14s; }
table.t tbody tr.klick { cursor: pointer; }
table.t tbody tr.klick:hover td { background: rgba(42,53,72,.34); }
table.t tbody tr.gewaehlt td { background: rgba(155,141,247,.09); }
table.t tbody tr.gewaehlt td:first-child { box-shadow: inset 2px 0 0 var(--az); }
table.t .fett { color: var(--tx); font-weight: 600; }
table.t .klein { font-size: var(--f11); color: var(--dmr); }

.marke-z { display: inline-block; font-weight: 600; font-size: var(--f105); border-radius: calc(6px * var(--sk)); padding: calc(2px * var(--sk)) calc(7px * var(--sk)); white-space: nowrap; }
.m-ok   { background: rgba(93,202,165,.15); color: var(--ok); }
.m-warn { background: rgba(239,196,79,.15); color: var(--warn); }
.m-bad  { background: rgba(240,138,123,.16); color: var(--bad); }
.m-az   { background: rgba(155,141,247,.15); color: var(--az); }
.m-neu  { background: #212D41; color: var(--mut); }

.balken { height: calc(3px * var(--sk)); border-radius: calc(2px * var(--sk)); background: var(--cdmr); margin-top: calc(5px * var(--sk)); overflow: hidden; }
.balken > i { display: block; height: 100%; background: var(--az); transition: width .4s cubic-bezier(.32,.72,0,1); }

/* --- „Was haengt" --------------------------------------------------------- */
.haengt { display: flex; gap: var(--p10); padding: var(--p10) 0; border-bottom: 1px solid rgba(42,53,72,.6); }
.haengt:last-child { border-bottom: 0; padding-bottom: 0; }
.haengt:first-of-type { padding-top: 0; }
.hzahl { width: calc(26px * var(--sk)); height: calc(26px * var(--sk)); border-radius: calc(7px * var(--sk)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--f12); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.h-bad  { background: rgba(240,138,123,.14); border: 1px solid rgba(240,138,123,.3); color: var(--bad); }
.h-warn { background: rgba(239,196,79,.14);  border: 1px solid rgba(239,196,79,.3);  color: var(--warn); }
.h-neu  { background: var(--cdmr); border: 1px solid var(--line); color: var(--mut); }
.htitel { font-size: var(--f12); color: var(--tx); font-weight: 600; }
.hunter { font-size: var(--f11); color: var(--dm); }

.frist {
  display: flex; align-items: center; gap: var(--p12);
  background: linear-gradient(90deg, rgba(239,196,79,.13), rgba(26,36,54,0));
  border: 1px solid rgba(239,196,79,.28);
  border-left: calc(3px * var(--sk)) solid var(--warn);
  border-radius: calc(10px * var(--sk));
  padding: var(--p10) var(--p16);
}
.fzahl { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f19); color: var(--warn); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fbez { font-size: var(--f11); color: var(--dmr); }

.unterschrift-feld { background: #EEF2F8; border-radius: calc(6px * var(--sk)); height: calc(34px * var(--sk)); display: flex; align-items: center; justify-content: center; }
.unterschrift-klein { background: #EEF2F8; border-radius: calc(6px * var(--sk)); height: calc(24px * var(--sk)); width: calc(74px * var(--sk)); display: flex; align-items: center; justify-content: center; }

/* --- Akte ----------------------------------------------------------------- */
.rund { border-radius: 50%; background: #2c3852; color: var(--mut); font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rund.s { width: calc(30px * var(--sk)); height: calc(30px * var(--sk)); font-size: var(--f11); }
.rund.l { width: calc(42px * var(--sk)); height: calc(42px * var(--sk)); font-size: var(--f14); }
.namenszelle { display: flex; align-items: center; gap: var(--p8); white-space: nowrap; }

.reiter { display: flex; gap: calc(2px * var(--sk)); border-bottom: 1px solid var(--line); margin-top: var(--p12); overflow-x: auto; }
.reiter button {
  font-family: inherit; font-weight: 500; font-size: var(--f12); color: var(--dm);
  padding: var(--p8) var(--p12); background: transparent; border: 0;
  border-bottom: calc(2px * var(--sk)) solid transparent; cursor: pointer; white-space: nowrap;
}
.reiter button:hover { color: var(--tx); }
.reiter button[aria-selected="true"] { color: var(--tx); font-weight: 600; border-bottom-color: var(--az); }
.reiterinhalt { margin-top: var(--p16); }

.akte-g { display: grid; grid-template-columns: calc(290px * var(--sk)) 1fr; gap: var(--p16); align-items: start; }

.feld { padding: var(--p6) 0; border-bottom: 1px solid rgba(42,53,72,.5); }
.feld:last-child { border-bottom: 0; }
.feldbez { font-weight: 600; font-size: var(--f98); text-transform: uppercase; letter-spacing: .11em; color: var(--dmr); }
.feldwert { font-size: var(--f12); color: var(--tx); }

.reihe4 { display: flex; flex-wrap: wrap; gap: calc(26px * var(--sk)); }

.dokzeile { display: flex; align-items: center; gap: var(--p10); padding: var(--p8) 0; border-bottom: 1px solid rgba(42,53,72,.6); font-size: var(--f12); color: var(--mut); }
.dokzeile:last-child { border-bottom: 0; }
.doksym { width: calc(22px * var(--sk)); height: calc(26px * var(--sk)); border-radius: calc(4px * var(--sk)); background: #232F44; border: 1px solid var(--line); flex: 0 0 auto; }

.leertext { text-align: center; padding: var(--p20); color: var(--dmr); font-size: var(--f13); }
.leertext p { margin: 0 0 var(--p8); }
.leertext p:last-child { margin-bottom: 0; }
.leertext b { color: var(--az); font-weight: 600; }

/* --- Wiki ----------------------------------------------------------------- */
.wiki-g { display: grid; grid-template-columns: calc(250px * var(--sk)) 1fr; gap: var(--p20); align-items: start; }
.wiki-inhalt { position: sticky; top: 0; }
.wiki-inhalt a { display: block; font-size: var(--f12); color: var(--mut); text-decoration: none; padding: var(--p4) var(--p8); border-radius: calc(6px * var(--sk)); transition: background-color .16s, color .16s; }
.wiki-inhalt a:hover { background: rgba(42,53,72,.5); color: var(--tx); }
.wiki-text { max-width: calc(680px * var(--sk)); }
.wiki-text h2 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f19); margin: var(--p20) 0 var(--p8); scroll-margin-top: var(--p16); }
.wiki-text h3 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f13); color: var(--tx); margin: var(--p12) 0 var(--p4); }
.wiki-text p { font-size: var(--f13); color: var(--mut); margin: 0 0 var(--p8); }
.wiki-text ul { font-size: var(--f13); color: var(--mut); padding-left: var(--p16); margin: 0 0 var(--p8); }
.wiki-text li { margin-bottom: calc(3px * var(--sk)); }
.wiki-text b { color: var(--tx); }
.glossar dt { font-weight: 700; font-size: var(--f13); color: var(--tx); margin-top: var(--p8); }
.glossar dd { margin: 0; font-size: var(--f12); color: var(--mut); }

/* --- Hinweisfenster und Rueckmeldestreifen -------------------------------- */
.abdunkeln {
  position: fixed; inset: 0; background: rgba(6,10,18,.88);
  display: flex; align-items: center; justify-content: center; padding: var(--p20); z-index: 40;
}
.fenster {
  background: var(--card); border: 1px solid var(--linel);
  border-radius: calc(12px * var(--sk)); padding: var(--p20);
  max-width: calc(520px * var(--sk)); width: 100%;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.fenster h2 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: var(--f16); margin: 0 0 var(--p8); }
.fenster p { font-size: var(--f13); color: var(--mut); margin: 0 0 var(--p8); }
.fenster .fusszeile { display: flex; justify-content: flex-end; gap: var(--p8); margin-top: var(--p16); }

.melder {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(24px * var(--sk));
  background: var(--card); border: 1px solid var(--linel);
  border-radius: calc(10px * var(--sk));
  padding: var(--p10) var(--p16);
  font-size: var(--f12); color: var(--tx);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  max-width: 90vw; z-index: 50;
  transition: opacity .2s;
}
.melder[hidden] { display: none; }

/* --- Umbruch bei 900 px, Bauvorlage 1.1 ----------------------------------- */
@media (max-width: 900px) {
  :root { --nav: calc(168px * var(--sk)); }
  .g2 { grid-template-columns: 1fr; }
  .akte-g { grid-template-columns: 1fr; }
  .wiki-g { grid-template-columns: 1fr; }
  .wiki-inhalt { position: static; }
}

/* --- Umbruch bei 640 px, Bauvorlage 1.1 ----------------------------------- */
@media (max-width: 640px) {
  .mitte { flex-direction: column; }
  .nav {
    width: auto; border-right: 0; border-bottom: 1px solid var(--line);
    display: flex; gap: var(--p4); overflow-x: auto; overflow-y: hidden;
    padding: var(--p8);
  }
  .navgruppe { display: none; }              /* Gruppenueberschriften aus */
  .navzeile { width: auto; flex: 0 0 auto; }
  .suche { display: none; }                  /* Suchfeld aus */
  .regler input[type="range"] { display: none; }  /* Schieberegler aus, Knoepfe bleiben */
  .benutzer { display: none; }               /* Benutzerzeichen aus */
  .arbeit { padding: var(--p12); }
}