/* =====================================================================
   BOND-IQ Fehlerkatalog – Stylesheet der Anwendung (übernommen aus dem
   Layout-Prototyp AP-19; Rollen-Vorschau entfernt, Sichtbarkeit prüft der Server)
   Alle Farben, Schriften, Größen und Radien stehen in diesem einen
   :root-Block. Wer das Design ändert, ändert nur hier.
   Quelle der Werte: Design Guide vom 20.10.2026 (siehe HINTERGRUND.md).
   ===================================================================== */
:root {
  /* Marke */
  --farbe-gelb: #FFB30D;          /* Brand: warmer Akzent, Markierungen */
  --farbe-gelb-hell: #FFF3D6;     /* aus der hellsten Gelb-Abstufung */
  --farbe-gelb-mittel: #FFE3A3;
  --farbe-rot: #A60000;           /* Brand: Warnung, „intern“, hohes Risiko */
  --farbe-rot-hell: #F2D9D9;
  --farbe-gruen: #0D7F57;         /* Accent-Grün, leicht abgedunkelt für Kontrast */
  --farbe-gruen-hell: #DDEFE5;
  --farbe-blau: #3069C0;          /* Accent-Blau: Links im Fließtext */

  /* Neutrale */
  --farbe-text: #000000;          /* True Black */
  --farbe-text-2: #5E5E5E;        /* Schwarz ~63 % – Nebentext (Kontrast 6,4:1) */
  --farbe-grau: #737373;          /* Neutral aus dem Guide, nur für Linien/Symbole */
  --farbe-linie: #E2E2E2;
  --farbe-linie-stark: #C8C8C8;
  --farbe-flaeche: #FFFFFF;       /* Paper White: Karten */
  --farbe-grund: #F7F6F6;         /* Seitenhintergrund */
  --farbe-dunkel: #1A1A1A;        /* einzige dunkle Fläche */
  --farbe-fokus: #3069C0;

  /* Schrift: Switzer, wenn auf dem Rechner installiert, sonst Systemschrift */
  --schrift: "Switzer", "Switzer Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gr-h0: 90px;   /* Display */
  --gr-h1: 60px;   /* heading-lg */
  --gr-h2: 40px;   /* heading */
  --gr-h3: 27px;   /* heading-sm */
  --gr-lg: 20px;   /* body lg */
  --gr-text: 16px; /* body */
  --gr-klein: 14px;/* body sm */
  --gr-mini: 12px; /* nicht im Guide – nur Achsen/Marken */
  --zeilen-eng: 1.1;
  --zeilen-text: 1.45;
  --laufweite-gross: -0.02em;
  --gewicht-normal: 400;
  --gewicht-knopf: 500;
  --gewicht-betont: 600;

  /* Abstände (8er-Raster) */
  --a-1: 4px; --a-2: 8px; --a-3: 16px; --a-4: 24px; --a-5: 32px; --a-6: 48px; --a-7: 64px;

  /* Radien laut Guide */
  --radius-karte: 8px;        /* Bilder, Karten */
  --radius-knopf-klein: 16px; /* kleine Knöpfe */
  --radius-knopf: 24px;       /* Knöpfe, Navigation */

  /* Maße */
  --kopf-hoehe: 64px;
  --leiste-breite: 300px;
  --inhalt-max: 1400px;
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 64px); }
body {
  margin: 0; font-family: var(--schrift); font-size: var(--gr-text); line-height: var(--zeilen-text);
  font-weight: var(--gewicht-normal); color: var(--farbe-text); background: var(--farbe-grund);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
.text a, .link-liste a, .brotkrumen a { color: var(--farbe-blau); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-weight: var(--gewicht-normal); line-height: var(--zeilen-eng); margin: 0 0 var(--a-3); }
h1 { font-size: clamp(30px, 4.2vw, var(--gr-h2)); letter-spacing: var(--laufweite-gross); }
h2 { font-size: var(--gr-h3); letter-spacing: var(--laufweite-gross); }
h3 { font-size: var(--gr-lg); margin-top: var(--a-4); }
h4 { font-size: var(--gr-text); font-weight: var(--gewicht-betont); margin-top: var(--a-3); margin-bottom: var(--a-2); }
p, ul, ol, dl { margin: 0 0 var(--a-3); }
ul { padding-left: 1.2em; }
li + li { margin-top: var(--a-1); }
code { font-family: var(--schrift-mono); font-size: .9em; }
:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; border-radius: 4px; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: var(--a-3); top: -100px; z-index: 100; background: var(--farbe-text); color: #fff; padding: var(--a-2) var(--a-3); border-radius: var(--radius-knopf-klein); }
.sprunglink:focus { top: var(--a-2); }
.grau { color: var(--farbe-text-2); }
.klein { font-size: var(--gr-klein); }
.text-gross { font-size: var(--gr-lg); line-height: 1.4; }
.leerhinweis { color: var(--farbe-text-2); font-style: italic; }
.etikett { display: inline-block; font-size: var(--gr-klein); font-weight: var(--gewicht-betont); color: var(--farbe-text-2); margin-right: var(--a-1); }

/* Augenbraue: gelbes Quadrat + graue Zeile (Design Guide S. 2) */
.augenbraue { display: flex; align-items: center; gap: var(--a-2); font-size: var(--gr-klein); color: var(--farbe-text-2); margin-bottom: var(--a-3); }
.marke { display: inline-block; width: 14px; height: 14px; background: var(--farbe-gelb); flex: none; }
h2 .marke { width: 12px; height: 12px; margin-right: var(--a-2); vertical-align: 2px; }

/* ---------- Knöpfe (Design Guide S. 5) ---------- */
.knopf, .knopf-umriss {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  font: inherit; font-weight: var(--gewicht-knopf); font-size: var(--gr-text); line-height: 1.2;
  padding: 12px 32px; border-radius: var(--radius-knopf); cursor: pointer; text-decoration: none;
  border: 1px solid var(--farbe-text); background: var(--farbe-text); color: #fff;
}
.knopf-umriss { background: transparent; color: var(--farbe-text); }
.knopf:hover { background: #333; }
.knopf-umriss:hover, .knopf-umriss[aria-pressed="true"] { background: var(--farbe-text); color: #fff; }
.knopf-klein { padding: 8px 16px; font-size: var(--gr-klein); border-radius: var(--radius-knopf-klein); }
.knopf[disabled], .knopf-umriss[disabled] { background: #E2E2E2; border-color: #E2E2E2; color: #8A8A8A; cursor: not-allowed; }
.knopf-geist {
  display: inline-flex; align-items: center; gap: var(--a-2); padding: 8px 16px; border: 0; background: none;
  font: inherit; font-weight: var(--gewicht-knopf); color: var(--farbe-text-2); cursor: pointer; text-decoration: none; border-radius: var(--radius-knopf-klein);
}
.knopf-geist:hover { color: var(--farbe-text); text-decoration: underline; }
.knopf-geist[disabled] { color: #9A9A9A; cursor: not-allowed; text-decoration: none; }
.knopf-symbol { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--farbe-linie-stark); background: var(--farbe-flaeche); color: var(--farbe-text); cursor: pointer; font-size: 20px; line-height: 1; }
.knopf-symbol:hover { border-color: var(--farbe-text); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-3); }

/* ---------- Kopfzeile ---------- */
.entwurfsband { background: var(--farbe-dunkel); color: #fff; font-size: var(--gr-klein); text-align: center; padding: 6px var(--a-3); }
.kopfzeile {
  position: sticky; top: 0; z-index: 40; height: var(--kopf-hoehe); display: flex; align-items: center; gap: var(--a-3);
  padding: 0 var(--a-4); background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-linie);
}
.symbol-leiste, .symbol-leiste::before, .symbol-leiste::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; content: ""; }
.symbol-leiste::before { position: absolute; top: -5px; } .symbol-leiste::after { position: absolute; top: 5px; }
.logo { display: flex; align-items: center; gap: var(--a-2); text-decoration: none; flex: none; }
.logo img { width: 120px; height: auto; }
.logo-zusatz { font-size: var(--gr-klein); color: var(--farbe-text-2); border-left: 1px solid var(--farbe-linie-stark); padding-left: var(--a-2); }
.kopf-suche { flex: 1; display: flex; gap: var(--a-2); max-width: 560px; margin-left: var(--a-3); }
.kopf-suche input, .suche-gross input, select, .formular input {
  font: inherit; font-size: var(--gr-klein); width: 100%; padding: 10px 16px; border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-knopf); background: var(--farbe-flaeche); color: var(--farbe-text);
}
select { width: auto; padding-right: 32px; }
.anmelde-link { flex: none; }

.hauptnav { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-linie); padding: 0 var(--a-4); }
.hauptnav ul { list-style: none; display: flex; gap: var(--a-1); margin: 0; padding: var(--a-2) 0; overflow-x: auto; }
.hauptnav li + li { margin-top: 0; }
.hauptnav a { display: block; padding: 8px 16px; border-radius: var(--radius-knopf); text-decoration: none; white-space: nowrap; color: var(--farbe-text-2); font-weight: var(--gewicht-knopf); font-size: var(--gr-klein); }
.hauptnav a:hover { color: var(--farbe-text); background: var(--farbe-grund); }
.hauptnav a[aria-current="page"] { background: var(--farbe-text); color: #fff; }

/* ---------- Rahmen mit Seitenleiste ---------- */
.rahmen { display: flex; align-items: flex-start; max-width: calc(var(--inhalt-max) + var(--leiste-breite)); margin: 0 auto; }
.seitenleiste {
  flex: none; width: var(--leiste-breite); position: sticky; top: var(--kopf-hoehe);
  height: calc(100vh - var(--kopf-hoehe)); overflow-y: auto; background: var(--farbe-flaeche); border-right: 1px solid var(--farbe-linie);
  padding: var(--a-3);
}
html.leiste-zu .seitenleiste { display: none; }
main { flex: 1; min-width: 0; padding: var(--a-5) var(--a-5) var(--a-7); }
main:focus { outline: none; }
.leisten-tabs { display: flex; gap: var(--a-1); padding: 4px; background: var(--farbe-grund); border-radius: var(--radius-knopf); margin-bottom: var(--a-3); }
.leisten-tabs button { flex: 1; font: inherit; font-size: var(--gr-klein); font-weight: var(--gewicht-knopf); padding: 8px; border: 0; border-radius: var(--radius-knopf); background: transparent; color: var(--farbe-text-2); cursor: pointer; }
.leisten-tabs button[aria-selected="true"] { background: var(--farbe-flaeche); color: var(--farbe-text); box-shadow: var(--schatten); }

/* Suchbaum */
.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul { padding-left: var(--a-3); border-left: 1px solid var(--farbe-linie); margin-left: 7px; }
.baum li + li { margin-top: 0; }
.baum summary { cursor: pointer; padding: 5px 4px; border-radius: 6px; font-size: var(--gr-klein); display: flex; justify-content: space-between; gap: var(--a-2); list-style: none; }
.baum summary::-webkit-details-marker { display: none; }
.baum summary::before { content: "▸"; color: var(--farbe-grau); width: 12px; flex: none; }
.baum details[open] > summary::before { content: "▾"; }
.baum summary .baum-name { flex: 1; }
.baum summary:hover { background: var(--farbe-grund); }
.baum .ebene-1 > details > summary { font-weight: var(--gewicht-betont); font-size: var(--gr-text); }
.anzahl { font-size: var(--gr-mini); color: var(--farbe-text-2); background: var(--farbe-grund); border-radius: 10px; padding: 1px 7px; align-self: center; }
.baum-blatt a { display: flex; gap: var(--a-2); padding: 4px; border-radius: 6px; font-size: var(--gr-klein); text-decoration: none; color: var(--farbe-text); }
.baum-blatt a:hover, .baum-blatt a:focus-visible { background: var(--farbe-gelb-hell); }
.baum-blatt a[aria-current="page"] { background: var(--farbe-gelb-mittel); font-weight: var(--gewicht-betont); }
.baum-blatt .nr, .link-liste .nr { font-variant-numeric: tabular-nums; color: var(--farbe-text-2); flex: none; }
.baum-blatt .ist-muster::after { content: "●"; color: var(--farbe-gelb); margin-left: auto; padding-left: 4px; font-size: 10px; align-self: center; }
.schwebe-vorschau { position: fixed; z-index: 60; width: 240px; background: var(--farbe-flaeche); border-radius: var(--radius-karte); box-shadow: 0 8px 30px rgba(0,0,0,.2); padding: var(--a-2); pointer-events: none; font-size: var(--gr-klein); }
.schwebe-vorschau img { border-radius: 4px; margin-bottom: var(--a-1); aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Filter */
.filter-form fieldset { border: 0; padding: 0; margin: 0 0 var(--a-4); }
.filter-form legend { font-weight: var(--gewicht-betont); font-size: var(--gr-klein); margin-bottom: var(--a-2); }
.filter-form label.wahl { display: flex; align-items: center; gap: var(--a-2); font-size: var(--gr-klein); padding: 3px 0; cursor: pointer; }
.filter-form label.wahl input { width: 18px; height: 18px; accent-color: var(--farbe-text); margin: 0; }
.filter-form label.wahl .anzahl { margin-left: auto; }
.filter-form .knopf-reihe { position: sticky; bottom: 0; background: var(--farbe-flaeche); padding: var(--a-2) 0; }

/* ---------- Karten allgemein ---------- */
.karte { background: var(--farbe-flaeche); border-radius: var(--radius-karte); padding: var(--a-4); border: 1px solid var(--farbe-linie); margin-bottom: var(--a-3); }
.kasten-titel { font-size: var(--gr-lg); letter-spacing: 0; margin-bottom: var(--a-3); }
.kasten-unter { font-size: var(--gr-text); font-weight: var(--gewicht-betont); }
.kasten-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); flex-wrap: wrap; margin-bottom: var(--a-3); }
.kasten-zeile .kasten-titel { margin: 0; }
.seitenkopf { max-width: 900px; margin-bottom: var(--a-5); }
.seitenkopf h1 { font-size: clamp(34px, 5vw, var(--gr-h1)); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-2); padding: 0; margin: 0 0 var(--a-3); }
.chips li { margin: 0; font-size: var(--gr-klein); padding: 4px 12px; border-radius: var(--radius-knopf-klein); border: 1px solid var(--farbe-linie-stark); background: var(--farbe-flaeche); }

/* ---------- Übersicht ---------- */
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: center; margin-bottom: var(--a-3); }
.suche-gross { flex: 1 1 320px; }
.suche-gross input { font-size: var(--gr-text); padding: 14px 20px; }
.ansicht-wahl { display: flex; gap: var(--a-1); }
.sortierung { display: flex; align-items: center; gap: var(--a-2); font-size: var(--gr-klein); color: var(--farbe-text-2); }
.aktive-filter { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-2); }
.filter-chip { font: inherit; font-size: var(--gr-klein); padding: 4px 8px 4px 12px; border-radius: var(--radius-knopf-klein); border: 1px solid var(--farbe-text); background: var(--farbe-flaeche); cursor: pointer; }
.filter-chip::after { content: " ✕"; }
.trefferzahl { font-size: var(--gr-klein); color: var(--farbe-text-2); }
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--a-3); }
.karten-raster.drei { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fkarte { display: flex; flex-direction: column; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.fkarte:hover { box-shadow: var(--schatten); border-color: var(--farbe-linie-stark); }
.fkarte-bild { aspect-ratio: 4/3; background: var(--farbe-grund); position: relative; }
.fkarte-bild img { width: 100%; height: 100%; object-fit: cover; }
.platzhalter-bild { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--farbe-text-2); font-size: var(--gr-klein);
  background: repeating-linear-gradient(135deg, #F1F0F0 0 10px, #F7F6F6 10px 20px); }
.platzhalter-bild strong { display: block; font-size: var(--gr-h3); font-weight: var(--gewicht-normal); color: var(--farbe-grau); }
.muster-marke { position: absolute; left: var(--a-2); top: var(--a-2); background: var(--farbe-gelb); color: #000; font-size: var(--gr-mini); font-weight: var(--gewicht-betont); padding: 2px 10px; border-radius: var(--radius-knopf-klein); }
.fkarte-text { padding: var(--a-3); display: flex; flex-direction: column; gap: var(--a-1); flex: 1; }
.fkarte-nr { font-size: var(--gr-klein); color: var(--farbe-text-2); display: flex; justify-content: space-between; gap: var(--a-2); }
.fkarte-titel { font-size: var(--gr-text); font-weight: var(--gewicht-betont); line-height: 1.3; margin: 0; }
.fkarte-pfad { font-size: var(--gr-klein); color: var(--farbe-text-2); margin: 0; }
.fkarte-risiko { margin-top: auto; padding-top: var(--a-2); display: flex; gap: var(--a-2); font-size: var(--gr-mini); }
.wert { padding: 1px 8px; border-radius: 10px; background: var(--farbe-grund); }
mark { background: var(--farbe-gelb-mittel); color: inherit; padding: 0 1px; }

/* Listenansicht */
.karten-raster.als-liste { display: block; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); overflow: hidden; }
.als-liste .fkarte { flex-direction: row; border: 0; border-radius: 0; border-bottom: 1px solid var(--farbe-linie); align-items: center; }
.als-liste .fkarte:hover { box-shadow: none; background: var(--farbe-gelb-hell); }
.als-liste .fkarte-bild { width: 72px; flex: none; }
.als-liste .muster-marke, .als-liste .platzhalter-bild strong { display: none; }
.als-liste .platzhalter-bild { font-size: 0; }
.als-liste .fkarte-text { flex-direction: row; align-items: center; gap: var(--a-3); padding: var(--a-2) var(--a-3); flex-wrap: wrap; }
.als-liste .fkarte-nr { width: 70px; }
.als-liste .fkarte-titel { flex: 1 1 260px; }
.als-liste .fkarte-pfad { flex: 0 1 300px; }
.als-liste .fkarte-risiko { margin: 0; padding: 0; }

/* ---------- Detailseite ---------- */
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-2); padding: 0; font-size: var(--gr-klein); color: var(--farbe-text-2); margin-bottom: var(--a-4); }
.brotkrumen li { margin: 0; }
.brotkrumen li + li::before { content: "›"; margin-right: var(--a-2); color: var(--farbe-grau); }
.fehler-titel { margin-bottom: var(--a-4); max-width: 1000px; }
.fehler-titel h1 { margin-bottom: var(--a-2); }
.bezeichnung { font-size: var(--gr-lg); color: var(--farbe-text-2); margin-bottom: var(--a-3); }
.synonyme { font-size: var(--gr-klein); color: var(--farbe-text-2); }

.fehler-kopf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--a-4); margin-bottom: var(--a-4); align-items: start; }
.bildraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a-2); }
.bildraster .bild-gross { grid-column: span 2; grid-row: span 2; }
.bildraster.anzahl-3 { grid-template-columns: repeat(3, 1fr); }
.bildraster.anzahl-2 { grid-template-columns: 1fr 1fr; }
.bildraster.anzahl-2 .bild-gross { grid-column: auto; grid-row: auto; }
.bildraster.anzahl-1 { grid-template-columns: 1fr; }
.bildraster.anzahl-1 .bild-gross { grid-column: auto; grid-row: auto; }
.bild { margin: 0; display: flex; flex-direction: column; }
.bild-knopf { display: block; padding: 0; border: 0; background: var(--farbe-dunkel); border-radius: var(--radius-karte); overflow: hidden; cursor: zoom-in; width: 100%; flex: 1; }
.bild-knopf img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .2s; }
.bild-knopf:hover img { transform: scale(1.03); }
.bild figcaption { font-size: var(--gr-mini); color: var(--farbe-text-2); padding-top: var(--a-1); line-height: 1.3; }
.bildraster .bild:not(.bild-gross) figcaption { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bild-gross figcaption, .bildraster.anzahl-2 .bild figcaption { font-size: var(--gr-klein); }
.bildraster.anzahl-2 .bild figcaption { position: static !important; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
.bildnr { font-variant-numeric: tabular-nums; font-weight: var(--gewicht-betont); color: var(--farbe-text); margin-right: 4px; }
.bild-hinweis { font-size: var(--gr-klein); color: var(--farbe-text-2); margin-top: var(--a-2); }

.risiko-inhalt { display: grid; grid-template-columns: 1fr auto; gap: var(--a-4); align-items: start; }
.skala { margin-bottom: var(--a-3); }
.skala-name { margin: 0 0 var(--a-1); font-size: var(--gr-klein); }
.skala-name strong { font-size: var(--gr-h3); font-weight: var(--gewicht-normal); margin-left: var(--a-2); }
.skala-max { color: var(--farbe-text-2); }
.skala-balken { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.seg { height: 10px; border-radius: 2px; background: var(--farbe-linie); }
.seg.an.st-g { background: var(--farbe-gruen); } .seg.an.st-m { background: var(--farbe-gelb); } .seg.an.st-h { background: var(--farbe-rot); }
.skala-erkl { font-size: var(--gr-mini); color: var(--farbe-text-2); margin: var(--a-1) 0 0; }
.mini-matrix { margin: 0; }
.mm-raster { display: grid; grid-template-columns: repeat(10, 14px); grid-auto-rows: 14px; gap: 1px; background: var(--farbe-flaeche); }
.mz { position: relative; }
.z-gering { background: var(--farbe-gruen-hell); } .z-mittel { background: var(--farbe-gelb-hell); } .z-hoch { background: var(--farbe-rot-hell); } .z-unbekannt { background: var(--farbe-grund); }
.punkt { position: absolute; inset: -3px; border-radius: 50%; background: var(--farbe-text); border: 2px solid #fff; z-index: 1; }
.mini-matrix figcaption { display: flex; justify-content: space-between; flex-direction: column; font-size: var(--gr-mini); color: var(--farbe-text-2); margin-top: var(--a-1); }
.zonen-text { font-size: var(--gr-klein); margin: 0; display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.zonen-marke { font-size: var(--gr-mini); font-weight: var(--gewicht-betont); padding: 2px 10px; border-radius: var(--radius-knopf-klein); }
.zonen-marke.z-gering { background: var(--farbe-gruen); color: #fff; } .zonen-marke.z-mittel { background: var(--farbe-gelb); color: #000; } .zonen-marke.z-hoch { background: var(--farbe-rot); color: #fff; } .zonen-marke.z-unbekannt { background: var(--farbe-linie); }

.abschnitt-tabs { position: sticky; top: var(--kopf-hoehe); z-index: 30; background: var(--farbe-grund); padding: var(--a-2) 0; margin-bottom: var(--a-4); border-bottom: 1px solid var(--farbe-linie); }
.abschnitt-tabs ul { list-style: none; display: flex; gap: var(--a-1); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.abschnitt-tabs li { margin: 0; flex: none; }
.abschnitt-tabs a { display: block; padding: 8px 16px; border-radius: var(--radius-knopf); text-decoration: none; font-size: var(--gr-klein); font-weight: var(--gewicht-knopf); border: 1px solid var(--farbe-linie-stark); background: var(--farbe-flaeche); white-space: nowrap; }
.abschnitt-tabs a:hover { border-color: var(--farbe-text); }
.abschnitt-tabs a.aktiv { background: var(--farbe-text); color: #fff; border-color: var(--farbe-text); }
.intern-marke { display: inline-block; font-size: var(--gr-mini); font-weight: var(--gewicht-betont); letter-spacing: 0; background: var(--farbe-rot); color: #fff; padding: 2px 10px; border-radius: var(--radius-knopf-klein); vertical-align: middle; }
.abschnitt-tabs .intern-marke { padding: 0 6px; margin-left: 4px; }
.abschnitt-tabs a.aktiv .intern-marke { background: #fff; color: var(--farbe-rot); }

.inhalt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--a-4); align-items: start; }
.abschnitt { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); padding: var(--a-5); margin-bottom: var(--a-3); }
.abschnitt .text { max-width: 75ch; }
.intern-abschnitt { background: var(--farbe-gelb-hell); border: 1px solid var(--farbe-gelb); }
.ursache { border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); padding: var(--a-3) var(--a-4); margin-bottom: var(--a-3); background: var(--farbe-flaeche); }
.ursache h4 { margin-top: 0; font-size: var(--gr-lg); font-weight: var(--gewicht-normal); line-height: 1.3; }
.ursache-nr { display: table; font-size: var(--gr-mini); font-weight: var(--gewicht-betont); color: var(--farbe-text); background: var(--farbe-gelb-mittel); border-radius: var(--radius-knopf-klein); padding: 1px 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--a-2); }
.ursache .wirk .etikett { display: block; }
.ursache p.etikett { margin: 0 0 var(--a-1); }
.massnahmen { list-style: none; padding: 0; margin: 0; }
.massnahmen li { display: flex; gap: var(--a-2); padding: var(--a-2) 0; border-top: 1px solid var(--farbe-linie); margin: 0; }
.mnr { flex: none; min-width: 30px; height: 22px; display: inline-grid; place-items: center; font-size: var(--gr-mini); font-weight: var(--gewicht-betont); background: var(--farbe-gelb-mittel); border-radius: 11px; padding: 0 6px; }
.experten-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--a-2); }

.spalte-rechts .karte { padding: var(--a-3) var(--a-4); }
.link-liste { list-style: none; padding: 0; font-size: var(--gr-klein); }
.link-liste li { margin: 0; border-top: 1px solid var(--farbe-linie); }
.link-liste li:first-child { border-top: 0; }
.link-liste a { display: flex; gap: var(--a-2); padding: 6px 0; text-decoration: none; }
.link-liste a:hover { text-decoration: underline; }
.text.klein ul { padding-left: 1em; }
.doku { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--a-3); font-size: var(--gr-klein); margin: 0; }
.doku dt { color: var(--farbe-text-2); }
.doku dd { margin: 0; word-break: break-word; }
.feedback-karte .knopf { width: 100%; margin-bottom: var(--a-2); }

/* Leuchtkasten (vergrößertes Bild) */
.leuchtkasten { width: min(1200px, 96vw); max-height: 94vh; border: 0; border-radius: var(--radius-karte); padding: var(--a-3) var(--a-4); background: var(--farbe-flaeche); color: var(--farbe-text); }
.leuchtkasten::backdrop { background: rgba(0,0,0,.8); }
.lk-kopf { display: flex; justify-content: space-between; gap: var(--a-3); align-items: start; }
.lk-kopf h2 { font-size: var(--gr-lg); letter-spacing: 0; margin: 8px 0 var(--a-2); }
.lk-bild { position: relative; display: flex; align-items: center; gap: var(--a-2); }
.lk-bild img { flex: 1; min-width: 0; max-height: 70vh; object-fit: contain; background: var(--farbe-dunkel); border-radius: var(--radius-karte); }
.lk-text { margin: var(--a-3) 0 var(--a-1); max-width: 90ch; }

/* ---------- Risikomatrix-Seite ---------- */
.rm-legende { display: flex; flex-wrap: wrap; gap: var(--a-2); align-items: center; margin-bottom: var(--a-3); }
.rm-wrap { overflow-x: auto; padding: 80px 0 var(--a-3); margin-top: -64px; }
.rm-raster { display: grid; grid-template-columns: 28px repeat(10, minmax(56px, 1fr)); gap: 2px; min-width: 660px; }
.rm-zelle { min-height: 64px; padding: 4px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; border-radius: 4px; }
.rm-achse { display: grid; place-items: center; font-size: var(--gr-mini); color: var(--farbe-text-2); }
.rm-label-y, .rm-label-x { font-size: var(--gr-klein); color: var(--farbe-text-2); margin: 0 0 var(--a-1); }
.rm-label-x { text-align: center; margin-top: var(--a-2); min-width: 660px; }
.rm-punkt { position: relative; font-size: 11px; font-variant-numeric: tabular-nums; text-decoration: none; padding: 1px 4px; border-radius: 6px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie-stark); line-height: 1.3; }
.rm-punkt.ist-muster { background: var(--farbe-text); color: #fff; border-color: var(--farbe-text); }
.rm-punkt:target { outline: 3px solid var(--farbe-gelb); }
.rm-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 220px; background: var(--farbe-flaeche); color: var(--farbe-text); border-radius: var(--radius-karte); box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: var(--a-2); font-size: var(--gr-klein); z-index: 5; pointer-events: none; }
.rm-punkt:hover .rm-tip, .rm-punkt:focus-visible .rm-tip { display: block; }
.rm-vorschau img { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; width: 100%; margin-bottom: 4px; }

/* ---------- Anmeldung, Verwaltung ---------- */
.anmelde-rahmen { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 340px); gap: var(--a-4); justify-content: center; align-items: start; padding-top: var(--a-4); }
.anmelde-karte { padding: var(--a-5); }
.formular label { display: block; font-size: var(--gr-klein); font-weight: var(--gewicht-betont); margin: var(--a-3) 0 var(--a-1); }
.formular input[disabled] { background: var(--farbe-grund); }
.formular-titel { font-weight: var(--gewicht-betont); margin-top: var(--a-4); }
.tabelle-wrap { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--gr-klein); min-width: 640px; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--farbe-linie); vertical-align: middle; }
.tabelle thead th { font-weight: var(--gewicht-betont); border-bottom: 2px solid var(--farbe-text); }
.tabelle tbody th { font-weight: var(--gewicht-normal); }
.rechte td { text-align: center; white-space: nowrap; }
.rechte thead th:not(:first-child) { text-align: center; }
.w-ja { color: var(--farbe-gruen); font-weight: var(--gewicht-betont); }
.w-nein { color: var(--farbe-text-2); }
.w-offen { color: #7A5200; background: var(--farbe-gelb-hell); }
.rollen-marke { font-size: var(--gr-mini); font-weight: var(--gewicht-betont); padding: 2px 10px; border-radius: var(--radius-knopf-klein); background: var(--farbe-grund); border: 1px solid var(--farbe-linie-stark); }
.r-administrator { background: var(--farbe-text); color: #fff; border-color: var(--farbe-text); }
.r-benutzer { background: var(--farbe-gelb-mittel); border-color: var(--farbe-gelb); }

.fusszeile { border-top: 1px solid var(--farbe-linie); padding: var(--a-4); font-size: var(--gr-klein); color: var(--farbe-text-2); text-align: center; background: var(--farbe-flaeche); }
.fusszeile p { margin: 0; }

/* =====================================================================
   Sperrhinweis: erscheint, wenn der Server einen Abschnitt für die Rolle
   nicht ausliefert. Der Inhalt steht dann gar nicht im HTML.
   ===================================================================== */
.sperrhinweis { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-3) var(--a-4); border: 1px dashed var(--farbe-linie-stark); border-radius: var(--radius-karte); background: repeating-linear-gradient(135deg, #FAFAFA 0 10px, #F3F3F3 10px 20px); color: var(--farbe-text-2); font-size: var(--gr-klein); }
.sperrhinweis p { margin: 0; }
.sperrhinweis strong { color: var(--farbe-text); }
.schloss { flex: none; width: 16px; height: 13px; margin-top: 6px; background: var(--farbe-grau); border-radius: 2px; position: relative; }
.schloss::before { content: ""; position: absolute; left: 3px; top: -7px; width: 10px; height: 9px; border: 2px solid var(--farbe-grau); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.abschnitt.ist-gesperrt { background: var(--farbe-flaeche); border-color: var(--farbe-linie); padding: var(--a-3); }
.abschnitt-tabs li.ist-gesperrt a { color: var(--farbe-text-2); border-style: dashed; }
.abschnitt-tabs a.aktiv { color: #fff; border-style: solid; }

/* ---------- Ergänzungen der Anwendung (statt style-Attributen, CSP) ---------- */
.logo-wort { font-weight: var(--gewicht-betont); font-size: 20px; letter-spacing: 0.02em; }
.legende-muster { margin-top: var(--a-3); }
.legende-muster .punkt-gelb { color: var(--farbe-gelb); }
.platzhalter-bild.klein { aspect-ratio: 4 / 3; margin-bottom: var(--a-1); }
.entwurf-hinweis { display: flex; gap: var(--a-2); align-items: flex-start; padding: var(--a-2) var(--a-3); margin: 0 0 var(--a-4); border-radius: var(--radius-karte); background: var(--farbe-gelb-hell); border: 1px solid var(--farbe-gelb); font-size: var(--gr-klein); }
.meldung { padding: var(--a-2) var(--a-3); border-radius: var(--radius-karte); margin: 0 0 var(--a-3); font-size: var(--gr-klein); }
.meldung-fehler { background: var(--farbe-rot-hell); border: 1px solid var(--farbe-rot); color: var(--farbe-text); }
.treffer-ort { font-size: var(--gr-mini); color: var(--farbe-text-2); }
.suchausschnitt { font-size: var(--gr-klein); color: var(--farbe-text-2); margin: var(--a-1) 0 0; }
.abmelden-form { margin: 0; }
.nutzer-name { font-size: var(--gr-klein); color: var(--farbe-text-2); white-space: nowrap; }

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1200px) {
  .inhalt-raster { grid-template-columns: 1fr; }
  .spalte-rechts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--a-3); }
  .spalte-rechts .karte { margin: 0; }
}
@media (max-width: 1100px) {
  .fehler-kopf { grid-template-columns: 1fr; }
  }
@media (max-width: 900px) {
  :root { --kopf-hoehe: 56px; }
  .kopfzeile { padding: 0 var(--a-3); gap: var(--a-2); }
  .logo-zusatz, .kopf-suche .knopf, .anmelde-link { display: none; }
  .kopf-suche { margin-left: 0; min-width: 0; }
  .hauptnav { padding: 0 var(--a-3); }
  .seitenleiste { position: fixed; z-index: 50; left: 0; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe)); box-shadow: 0 10px 40px rgba(0,0,0,.25); width: min(var(--leiste-breite), 88vw); }
  html:not(.leiste-offen) .seitenleiste { display: none; }
  html.leiste-zu.leiste-offen .seitenleiste { display: block; }
  main { padding: var(--a-4) var(--a-3) var(--a-6); }
  .abschnitt { padding: var(--a-4) var(--a-3); }
  .anmelde-rahmen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .logo img { width: 92px; }
  .kopf-suche { display: none; }   /* auf dem Smartphone sucht man in der Übersicht */
      .kopf-suche input { padding: 8px 12px; }
  .bildraster, .bildraster.anzahl-3 { grid-template-columns: repeat(3, 1fr); }
  .bildraster .bild-gross { grid-column: 1 / -1; grid-row: auto; }
  .risiko-inhalt { grid-template-columns: 1fr; }
  .karten-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--a-2); }
  .fkarte-text { padding: var(--a-2); }
  .als-liste .fkarte-pfad { display: none; }
  .ursache { padding: var(--a-3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .kopfzeile, .hauptnav, .seitenleiste, .abschnitt-tabs, .entwurfsband, .feedback-karte { display: none !important; }
  body { background: #fff; }
}