.insight-start-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;margin-top:28px}
.insight-intro{font-size:16px;line-height:1.8;margin-top:18px;max-width:75ch}
.insight-intro em{font-style:normal;color:var(--text);border-bottom:1px dotted var(--border)}
.insight-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 15px}
.insight-scope{margin:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.insight-scope summary{cursor:pointer;color:var(--text);font-weight:600;font-size:15px;line-height:1.6;min-height:28px}
.insight-scope p{margin-top:15px;font-size:15px;line-height:1.8}
.insight-scope p>strong{color:var(--text)}
.insight-scope a,.insight-source a,.inline-a{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.insight-explanation>p{margin-top:20px;font-size:16px;line-height:1.8}
.insight-explanation ol{margin:24px 0 8px;padding-left:22px;color:var(--muted);font-size:15px}
.insight-explanation li{margin:12px 0;padding-left:5px}
.insight-explanation li strong{color:var(--text)}
.insight-results{margin:45px 0}
.insight-provenance{font-size:14px;line-height:1.7;margin-top:10px;max-width:75ch}
.insight-summary{display:flex;gap:15px 26px;flex-wrap:wrap;padding:20px 24px;border:1px solid var(--line);background:var(--surface);border-radius:8px;margin:24px 0}
.insight-summary p{font-size:15px}.insight-summary strong{color:var(--text)}
.insight-references{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.insight-references a{font-size:14px;color:var(--action);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
#browser-message:empty{display:none}#browser-message{margin-top:20px}
.insight-protection{padding-top:48px}
.insight-protection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}
.insight-protection-grid h3{font-size:19px;line-height:1.4}.insight-protection-grid p{font-size:15px;line-height:1.8;margin-top:16px}
.insight-source{font-size:14px;line-height:1.8}
.insight-entry{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;margin-bottom:36px;border:1px solid var(--line);border-left:3px solid var(--action);border-radius:8px;background:var(--surface)}
.insight-entry h2{font-size:24px;margin:8px 0 12px}.insight-entry p{font-size:16px;line-height:1.8;max-width:70ch}
.insight-entry .feature-tags{margin:16px 0 0}
.befund-artikel{margin-top:14px}
.befund-artikel .text-link{min-height:44px}

/* ------------------------------------------------------------ Kammer 1 ---- */
.chamber-one{margin-top:42px}
.chamber-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin:26px 0 8px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--action);border-radius:8px;background:var(--surface)}
.chamber-status{font-size:15px;line-height:1.7;margin:0;min-width:18ch;flex:1 1 34ch}
.chamber-actions{display:flex;flex-wrap:wrap;gap:10px}
.chamber-bar+.button{margin-top:14px}
@media(prefers-reduced-motion:no-preference){.chamber-status.is-busy{animation:chamber-pulse 1.4s ease-in-out infinite}}
@keyframes chamber-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Fuenf Stufen, EINE Achse: wie stark macht dich eine Angabe wiederkennbar.
   Farbe traegt nie allein - jede Karte nennt die Stufe als Wort und fuehrt eine
   eigene Form. Gruen heisst auf der ganzen Seite dasselbe: Zielzustand. Als
   Empfehlung ("so waere es besser") oder als Messwert ("so ist es bereits" -
   die Stufe abgewehrt). Grau bleibt, was nur nicht geantwortet hat. */
.exposure-card{--level:var(--muted);--level-bg:var(--raised);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--level);border-radius:10px;padding:24px;min-width:0}
.exposure-card[data-level=erkennbar]{--level:var(--danger);--level-bg:var(--danger-bg)}
.exposure-card[data-level=eingrenzend]{--level:var(--warning);--level-bg:var(--warning-bg)}
.exposure-card[data-level=unauffaellig]{--level:var(--info);--level-bg:var(--info-bg)}
.exposure-card[data-level=abgewehrt]{--level:var(--success);--level-bg:var(--success-bg)}
.exposure-card[data-level=unbekannt]{--level:var(--border);--level-bg:var(--raised);border-left-style:dashed}
/* Der Rand darf gedaempft sein, die Schrift im Chip nicht: --border erreicht
   auf --raised nur rund 3,7:1, gefordert sind 4,5:1 (WCAG 1.4.3). */
.exposure-card[data-level=unbekannt] .level-chip{color:var(--muted)}
.exposure-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.level-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:1.4;padding:5px 11px 5px 9px;border-radius:4px;color:var(--level);background:var(--level-bg);border:1px solid transparent;white-space:nowrap}
.level-icon{width:16px;height:16px;flex-shrink:0}
/* Alle Kennzeichen gleich breit, und nie schmaler als ihr Text (Wunsch des
   Betreibers, 21.09.2026). Die Mindestbreite in em passt fuer das laengste
   Wort ("Eingrenzend") bei jeder Schriftgroesse; width:max-content sorgt dafuer,
   dass eine breitere Schrift das Kennzeichen wachsen laesst, statt den Text
   ueber die Flaeche hinauslaufen zu lassen. Genau das geschah in einer
   Tabellenspalte, die ein anderer Browser schmaler berechnet hatte als Chrome. */
.level-chip{min-width:9.25em;width:max-content;box-sizing:border-box;flex-shrink:0}
.level-chip>span{white-space:nowrap}
.exposure-category{font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.exposure-card h3{font-size:19px;line-height:1.4}
.exposure-value{font-family:ui-monospace,Consolas,monospace;color:var(--text);font-size:16px;line-height:1.7;overflow-wrap:anywhere;margin:16px 0;padding:14px 16px;background:var(--canvas);border-left:2px solid var(--level);white-space:pre-wrap}
.exposure-value.is-empty{color:var(--muted);font-style:italic}
.exposure-meta{font-size:13px;line-height:1.7;margin:-6px 0 14px;color:var(--muted);overflow-wrap:anywhere}
.exposure-meta a{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.exposure-example{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--info);border:1px dashed var(--info);border-radius:4px;padding:2px 7px}
.exposure-card .insight-references{margin-top:14px;padding-top:12px}
.exposure-meaning{font-size:15px;line-height:1.8}
.limit-details,.measure-details{margin-top:18px}
.limit-details summary,.measure-details summary{font-size:15px;font-weight:600;cursor:pointer;line-height:1.7;min-height:28px}
.limit-details ul{padding-left:21px;margin-top:12px}
.limit-details li{font-size:15px;line-height:1.8;color:var(--muted)}
.limit-details li+li{margin-top:9px}
.limit-details h4{font-size:16px;letter-spacing:0;margin:20px 0 10px}
.limit-details p{font-size:15px;line-height:1.8;color:var(--muted)}

/* ------------------------------------------------------- Empfehlungen ----- */
.measure-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.measure-none{font-size:14px;line-height:1.8;color:var(--muted)}
.measure-details summary{color:var(--success)}
.measure-card{background:var(--success-bg);border:1px solid transparent;border-left:3px solid var(--success);border-radius:8px;padding:18px 20px;margin-top:14px}
/* Sofort machbar gegen groessere Umstellung: Die Farbe bleibt gleich, weil
   beides eine Empfehlung ist. Unterschieden wird ueber das Wort am Kopf und
   eine ruhigere Kante - Farbe allein traegt hier keine Bedeutung. */
.measure-card.is-umstellung{border-left-style:dashed}
.measure-term{display:inline-block;margin-top:14px;font-size:14px}
/* Eine Einordnung ist kein Zielzustand - deshalb ohne Gruen. */
.measure-card.is-context{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--border)}
.measure-card.is-context .measure-flag{color:var(--muted);border-color:var(--border)}
.measure-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.measure-flag{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--success);border:1px solid var(--success);border-radius:4px;padding:2px 7px;flex-shrink:0}
.measure-card h5{font-size:17px;line-height:1.45;margin:0}
.measure-card>p{font-size:15px;line-height:1.8;margin-top:12px}
.measure-price,.measure-limit{font-size:14px;line-height:1.75}
.measure-price strong,.measure-limit strong{color:var(--text)}
.measure-card .insight-references{margin-top:16px;padding-top:13px;border-top-color:var(--line)}

/* -------------------------------------------------------- Tiefenmessung ---- */
/* Eigener Abschnitt, gleiche Kartenform: Der Besucher soll die Messwerte ohne
   Umgewoehnung neben den Angaben aus Kammer 1 lesen koennen. */
.visitor-deep,.visitor-net{margin-top:48px}
.probe-hash{font-size:14px;line-height:1.7;margin:-6px 0 14px;color:var(--muted)}
.probe-hash code{color:var(--text);background:var(--canvas);border-radius:4px;padding:2px 6px;overflow-wrap:anywhere}
.probe-method{font-size:15px;line-height:1.8;margin-top:12px;padding:12px 14px;border-left:2px solid var(--border);background:var(--raised);border-radius:0 6px 6px 0}
.probe-method strong{color:var(--text)}
.probe-entropy{font-size:15px;line-height:1.8;color:var(--muted);margin-top:14px}
.probe-entropy strong{color:var(--text)}
.probe-api{font-size:13px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.limit-details h4+p.probe-api{margin-top:8px}
.probe-term{display:inline-block;margin-top:16px;font-size:15px}
#probe-note{margin-top:26px;padding:20px 24px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);max-width:none}
#probe-note .insight-references{margin-top:14px;padding-top:12px}
#probe-message:empty{display:none}#probe-message{margin-top:20px}

@media(max-width:1180px){.insight-start-grid{grid-template-columns:1fr}.insight-entry{align-items:start;flex-direction:column}.insight-protection-grid{grid-template-columns:1fr}.insight-entry .button{align-self:flex-start}}
@media(max-width:760px){.insight-results .section-heading{align-items:start;flex-direction:column}.exposure-card{padding:21px}.insight-start-grid{gap:18px}.insight-entry{padding:23px}.insight-hero h1{font-size:clamp(2rem,7vw,3rem)}.chamber-bar{flex-direction:column;align-items:stretch}}
@media(max-width:470px){.insight-actions,.chamber-actions{flex-direction:column;align-items:stretch}.insight-actions .button,.chamber-actions .button{width:100%}.exposure-value{font-size:15px;padding:12px}.insight-summary{padding:18px}.insight-entry .button{width:100%;align-self:stretch}.insight-entry h2{font-size:22px}.measure-card{padding:15px 16px}}

/* ------------------------------------------------------------- Der Bericht -- */
/* Ein Blatt, kein Dashboard: eine Spalte, lesbare Zeilenlaenge, klare Rangfolge.
   Es steht als Abschnitt auf derselben Seite - eine eigene Adresse haette den
   Bericht zu einem Ort gemacht, an dem etwas liegt. Hier liegt nichts. */
.visitor-report{margin-top:48px}
.visitor-report .insight-explanation ol{list-style:none;padding-left:0;counter-reset:none}
.visitor-report .insight-explanation li{padding-left:0}
.report-sheet{margin:34px 0 10px;padding:38px 42px;background:var(--surface);border:1px solid var(--line);border-radius:10px;max-width:none}
.report-head{padding-bottom:26px;border-bottom:2px solid var(--line)}
.report-brand{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.report-sheet h2{font-size:29px;line-height:1.25;margin:10px 0 0;max-width:24ch}
.report-when{font-size:14px;color:var(--muted);margin-top:10px}
.report-example{margin-top:16px;padding:12px 15px;border:1px dashed var(--warning);border-radius:6px;color:var(--warning);font-size:15px;line-height:1.7}
.report-tally{display:flex;flex-wrap:wrap;gap:10px 14px;list-style:none;padding:0;margin:20px 0 0}
.report-tally li{display:inline-flex;align-items:center;gap:8px;--level:var(--muted);--level-bg:var(--raised)}
.report-tally li[data-level=erkennbar]{--level:var(--danger);--level-bg:var(--danger-bg)}
.report-tally li[data-level=eingrenzend]{--level:var(--warning);--level-bg:var(--warning-bg)}
.report-tally li[data-level=unauffaellig]{--level:var(--info);--level-bg:var(--info-bg)}
.report-tally li[data-level=abgewehrt]{--level:var(--success);--level-bg:var(--success-bg)}
.report-tally li[data-level=unbekannt]{--level:var(--border);--level-bg:var(--raised)}
.report-tally li[data-level=unbekannt] .level-chip{color:var(--muted)}
.report-tally strong{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.report-lead{font-size:15px;line-height:1.8;margin-top:20px;max-width:78ch;color:var(--muted)}
.report-block{margin-top:38px}
.report-block>h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--action);padding-bottom:10px;border-bottom:1px solid var(--line)}
.report-chamber{margin-top:26px}
.report-chamber h4{font-size:18px;line-height:1.4;margin:0}
.report-note{font-size:14px;line-height:1.7;color:var(--muted);margin-top:7px;max-width:78ch}
.report-gap{font-size:15px;line-height:1.75;margin-top:12px;padding:12px 15px;border-left:3px solid var(--border);background:var(--raised);border-radius:0 6px 6px 0;max-width:78ch}
.report-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.report-table th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.report-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.report-table tr:last-child td{border-bottom:0}
.report-level{width:1%;white-space:nowrap;--level:var(--muted);--level-bg:var(--raised)}
.report-table tr[data-level=erkennbar] .report-level{--level:var(--danger);--level-bg:var(--danger-bg)}
.report-table tr[data-level=eingrenzend] .report-level{--level:var(--warning);--level-bg:var(--warning-bg)}
.report-table tr[data-level=unauffaellig] .report-level{--level:var(--info);--level-bg:var(--info-bg)}
.report-table tr[data-level=abgewehrt] .report-level{--level:var(--success);--level-bg:var(--success-bg)}
.report-table tr[data-level=unbekannt] .report-level{--level:var(--border);--level-bg:var(--raised)}
.report-table tr[data-level=unbekannt] .level-chip{color:var(--muted)}
.report-name{min-width:16ch}
.report-name strong{display:block;color:var(--text);line-height:1.45}
.report-category{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.report-value{font-family:ui-monospace,Consolas,monospace;color:var(--text);line-height:1.6;overflow-wrap:anywhere}
.report-link{margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--level,var(--border));border-radius:8px;background:var(--canvas)}
.report-link[data-level=erkennbar]{--level:var(--danger);--level-bg:var(--danger-bg)}
.report-link[data-level=eingrenzend]{--level:var(--warning);--level-bg:var(--warning-bg)}
.report-link[data-level=unauffaellig]{--level:var(--info);--level-bg:var(--info-bg)}
.report-link[data-level=abgewehrt]{--level:var(--success);--level-bg:var(--success-bg)}
.report-link[data-level=unbekannt]{--level:var(--border);--level-bg:var(--raised)}
.report-link-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.report-link h4{font-size:17px;line-height:1.4;margin:0}
.report-link p{font-size:15px;line-height:1.8;margin-top:12px;max-width:78ch}
.report-gaps{margin-top:18px}
.report-gaps dt{font-size:16px;color:var(--text);font-weight:600;line-height:1.5;margin-top:18px}
.report-gaps dd{font-size:15px;line-height:1.8;color:var(--muted);margin:7px 0 0;padding-left:0;max-width:78ch}
.report-foot{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:var(--muted);max-width:78ch}

@media screen and (max-width:760px){
  .report-sheet{padding:24px 20px}
  .report-sheet h2{font-size:24px}
  /* Drei Spalten passen nicht auf ein Handy. Jede Zeile wird zum Block, die
     Reihenfolge bleibt: Stufe, Merkmal, Wert. */
  .report-table,.report-table tbody,.report-table tr,.report-table td{display:block;width:auto}
  .report-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .report-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .report-table td{border-bottom:0;padding:0}
  .report-table .report-name{margin-top:9px}
  .report-table .report-value{margin-top:7px}
}

/* ---------------------------------------------------------------- Drucken -- */
/* Das ist der PDF-Weg: kein Skript, keine Bibliothek, keine Schrift im Gepaeck.
   Der Browser druckt, was hier steht - und speichert es auf Wunsch als PDF.

   Zwei Annahmen, die hier NICHT gemacht werden duerfen:
   1. Hintergrundfarben kommen nicht mit. Firefox druckt sie ohne ausdrueckliche
      Einstellung gar nicht. Jedes Kennzeichen braucht deshalb eine Kante und
      sein Wort; Farbe allein traegt auf Papier nichts.
   2. Das dunkle Erscheinungsbild passt nicht auf weisses Papier. Deshalb wird
      fuer den Druck die helle Palette gesetzt - sonst stuende blasses Rosa auf
      Weiss. */
@media print{
  @page{margin:16mm 13mm}
  :root,:root[data-theme=dark]{color-scheme:light;--canvas:#fff;--sidebar:#fff;--surface:#fff;--raised:#f2f5f7;--text:#111;--muted:#3b4952;--line:#c9d3da;--border:#6b7e89;--action:#00494f;--warning:#7a4a00;--warning-bg:#fff;--success:#12553c;--success-bg:#fff;--info:#1d4e96;--info-bg:#fff;--danger:#951d26;--danger-bg:#fff;--glow:none;--shadow:none}
  body{background:#fff;color:#111;font-size:10.5pt;line-height:1.55}
  .sidebar,.topbar,.site-footer,.toast,.skip-link,.nojs-nav,.button,button,.insight-actions,.chamber-actions,.catalog-filters{display:none!important}
  .workspace{margin-left:0}
  main{max-width:none;padding:0;min-height:0}
  /* Nur der Bericht - und nur, wenn es einen gibt. Ohne ihn bleibt der Ausdruck
     die Seite selbst, bloss ohne Navigation und Schaltflaechen. */
  body.has-report main>:not(#report-output){display:none!important}
  .report-sheet{margin:0;padding:0;border:0;border-radius:0;background:#fff}
  .report-sheet h2{font-size:20pt}
  .report-block>h3{font-size:9pt;color:#111;border-bottom:1.5pt solid #111;break-after:avoid}
  .report-head{border-bottom:1.5pt solid #111}
  .report-chamber h4,.report-link h4,.report-gaps dt{break-after:avoid}
  .report-chamber,.report-link,.report-tally li{break-inside:avoid}
  .report-table{font-size:9.5pt}
  .report-table thead{display:table-header-group}
  .report-table tr{break-inside:avoid}
  .report-table th,.report-table td{padding:6pt 8pt 6pt 0}
  /* Kante statt Flaeche: So bleibt jedes Kennzeichen erkennbar, auch wenn der
     Drucker keine Hintergruende setzt. Das Wort steht ohnehin daneben. */
  .level-chip{border-color:currentColor;background:transparent;padding:2pt 5pt;font-size:8.5pt}
  .level-icon{width:11px;height:11px}
  .report-example{border-color:#7a4a00;color:#7a4a00}
  .report-gap{background:transparent;border-left:2pt solid #6b7e89}
  .report-link{background:transparent}
  .report-foot{border-top:1pt solid #111}
  details[open]>summary{list-style:none}
  details:not([open])>*:not(summary){display:none}
}

/* ---------------------------------------------------- Wessen Wert das ist -- */
/* Die Einordnung sagt, ob ein Wert dein eigener ist oder die Uniform eines
   Schutzes (uniform-model.mjs). Die Kante trägt die Art, das Wort am Anfang
   sagt sie noch einmal - Farbe allein trägt auch hier nichts. Blau steht für
   "Menge", wie die Stufe unauffällig; orange für das, was trotz Schutz
   unterscheidet; grau für den bloßen Normalzustand. */
.einordnung{font-size:15px;line-height:1.8;margin-top:14px;padding:12px 14px;border-left:3px solid var(--info);background:var(--raised);border-radius:0 6px 6px 0}
.einordnung strong{color:var(--text)}
.einordnung[data-art=luecke],.einordnung[data-art=widerspruch]{border-left-color:var(--warning)}
.einordnung[data-art=zufall],.einordnung[data-art=normal]{border-left-color:var(--border)}
/* Die Profilkarte nennt einen Namen, keinen Messwert: keine Nichtproportionalschrift. */
.profil-card .exposure-value{font-family:inherit;font-weight:600;white-space:normal}

/* ------------------------------------------------------- Unter dem Zeiger -- */
/* Nur der Rand hellt auf, die Flaeche bleibt: Diese Karten erklaeren und
   oeffnen, sie fuehren nicht weg. Eine hellere Flaeche ist auf dieser Seite
   dem "hier geht es weiter" vorbehalten (.small-action-card, .catalog-card,
   .term-card) - beides gleich zu behandeln wuerde dieses Versprechen entwerten.

   Aufgehellt werden nur drei Seiten. Die linke Kante traegt die Stufe der
   Farbachse (--level) beziehungsweise die Art der Empfehlung; sie ist
   Kennzeichen und kein Rahmen und darf sich beim Darueberfahren nicht
   veraendern. Ein Kennzeichen, das seine Farbe wechselt, ist keines mehr.

   :focus-within gehoert dazu. Wer mit der Tastatur in eine Karte hinein
   navigiert, bekaeme sonst als Einziger keine Rueckmeldung - und ausgerechnet
   diese Karten enthalten fast alle eine Klappe zum Aufziehen. */
.exposure-card,.measure-card,.report-link,.insight-entry{transition:border-color 150ms}
.exposure-card:hover,.exposure-card:focus-within,
.measure-card:hover,.measure-card:focus-within,
.report-link:hover,
.insight-entry:hover,.insight-entry:focus-within{
  border-top-color:var(--border);border-right-color:var(--border);border-bottom-color:var(--border)
}
/* Diese beiden Raster bestehen aus Panels mit rundum gleichem Rand. */
.insight-protection-grid .panel,.visitor-permission-grid .panel{transition:border-color 150ms}
.insight-protection-grid .panel:hover,.insight-protection-grid .panel:focus-within,
.visitor-permission-grid .panel:hover{border-color:var(--border)}
/* Im Druck gibt es keinen Zeiger - und der Rahmen soll dort ruhig bleiben. */
@media print{.exposure-card,.measure-card,.report-link,.insight-entry,.insight-protection-grid .panel,.visitor-permission-grid .panel{transition:none}}

/* -------------------------------------------------------- Eine Achse, ein Satz Farben -- */
/* Welche Stufe welche Farbe traegt, fuer alle Bauteile dieses Abschnitts an
   einer Stelle. Gruen heisst auch hier Zielzustand, grau "keine Antwort". */
:is(.befund,.blick-kachel,.verteilung-eintrag){--level:var(--border);--level-bg:var(--raised)}
:is(.befund,.blick-kachel,.verteilung-eintrag)[data-level=erkennbar]{--level:var(--danger);--level-bg:var(--danger-bg)}
:is(.befund,.blick-kachel,.verteilung-eintrag)[data-level=eingrenzend]{--level:var(--warning);--level-bg:var(--warning-bg)}
:is(.befund,.blick-kachel,.verteilung-eintrag)[data-level=unauffaellig]{--level:var(--info);--level-bg:var(--info-bg)}
:is(.befund,.blick-kachel,.verteilung-eintrag)[data-level=abgewehrt]{--level:var(--success);--level-bg:var(--success-bg)}
/* Wie an den Karten: Die gedaempfte Kante reicht, die Schrift im Kennzeichen
   braucht --muted, sonst faellt sie unter 4,5:1 (WCAG 1.4.3). */
:is(.befund,.blick-kachel,.verteilung-eintrag)[data-level=unbekannt] .level-chip{color:var(--muted)}

/* -------------------------------------------------------- Auf einen Blick -- */
/* Vier Fragen, vier Kacheln: die Kurzfassung der Seite direkt unter ihrer
   Ueberschrift. Die linke Kante traegt die Stufe wie ueberall auf dieser
   Seite. Wo eine Kachel keine einzelne Stufe hat - die Verteilung, das
   Offene -, bleibt sie neutral; das Offene gestrichelt wie jede Luecke hier.
   Ecken 5 px: Kacheln sind auf dieser Plattform nie oval. */
.blick{margin:30px 0 28px}
.blick-einleitung{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.blick-einleitung h2{margin:0}
.blick-einleitung p{font-size:14px;line-height:1.7;color:var(--muted);max-width:72ch;margin:0}
.blick-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.blick-kachel{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 20px 18px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--level);border-radius:5px}
.blick-kachel.is-offen{border-left-style:dashed}
.blick-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.blick-frage{font-size:12px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.blick-wert{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.blick-wert strong{font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.blick-text{font-size:14.5px;line-height:1.7;margin:0;color:var(--muted);max-width:64ch}
.blick-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0}
.blick-link{font-size:14px;line-height:1.7;color:var(--action);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.blick-link:hover{color:var(--action-hover)}
.blick-weitere{font-size:14px;line-height:1.7;color:var(--muted)}
/* Der Balken ist nur Bild. Was er zeigt, steht darunter in Worten und Zahlen. */
.blick-balken{display:flex;gap:2px;height:10px;border-radius:3px;overflow:hidden;background:var(--raised)}
.blick-balken>span{background:var(--border);min-width:6px}
.blick-balken>[data-stufe=erkennbar]{background:var(--danger)}.blick-balken>[data-stufe=eingrenzend]{background:var(--warning)}.blick-balken>[data-stufe=unauffaellig]{background:var(--info)}.blick-balken>[data-stufe=abgewehrt]{background:var(--success)}
.blick-verteilung{display:flex;flex-wrap:wrap;gap:8px 14px;list-style:none;margin:0;padding:0}

/* Die Verteilung einer Kammer: Kennzeichen und Zahl, dieselbe Form wie im Bericht. */
.verteilung-eintrag{display:inline-flex;align-items:center;gap:8px;margin:0}
.verteilung-eintrag strong{font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.verteilung-zusatz{font-size:14px;color:var(--muted);align-self:center}
.insight-summary{align-items:center}

/* ------------------------------------------------------------ Befundzeilen -- */
/* Eine Zeile je Angabe: Stufe, Merkmal, Wert - aufgeklappt alles Weitere.
   Dasselbe Muster wie die Befunde der Pruefwerkstatt (.finding), nur dichter:
   Die Zeilen stehen ohne Abstand auf einer Tafel, getrennt durch eine
   Haarlinie, damit vierzig Angaben auf einen Bildschirm passen statt auf vier.
   Die linke Kante traegt die Stufe - sie ist Kennzeichen, kein Rahmen, und
   aendert sich deshalb auch unter dem Zeiger nicht. */
.befund-hinweis{font-size:14px;line-height:1.7;color:var(--muted);margin:14px 0 0}
.befund-hinweis em{font-style:normal;color:var(--text)}
.befund-tafeln{display:grid;gap:16px;margin-top:16px}
.befund-tafel{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0}
.befund-tafel-titel{font-size:12px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0;padding:13px 20px 11px 19px;border-bottom:1px solid var(--line)}
.befund{border-left:3px solid var(--level)}
.befund+.befund{border-top:1px solid var(--line)}
.befund[data-level=unbekannt]{border-left-style:dashed}
.befund-kopf{list-style:none;display:grid;grid-template-columns:9.5rem minmax(10rem,1fr) minmax(0,1.5fr) 1rem;grid-template-areas:"stufe name wert pfeil";align-items:start;gap:4px 18px;padding:12px 18px 12px 16px;cursor:pointer;transition:background 120ms}
.befund-kopf::-webkit-details-marker{display:none}
.befund-kopf::marker{content:""}
.befund-kopf:hover{background:var(--glow)}
.befund-kopf:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.befund-kopf>.level-chip{grid-area:stufe;justify-self:start}
.befund-name{grid-area:name;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;padding-top:4px}
.befund-titel{font-size:15px;font-weight:600;line-height:1.5;color:var(--text)}
/* Wessen Wert das ist, schon am Kopf: Die Marke nennt die Art in Worten, die
   Farbe wiederholt nur, was die Einordnung darunter ausfuehrt. */
.befund-marke{font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--info);border:1px solid currentColor;border-radius:4px;padding:1px 6px;white-space:nowrap}
.befund-marke[data-art=luecke],.befund-marke[data-art=widerspruch]{color:var(--warning)}
.befund-marke[data-art=zufall],.befund-marke[data-art=normal]{color:var(--muted)}
/* Zugeklappt hoechstens zwei Zeilen Wert, aufgeklappt der ganze. */
.befund-wert{grid-area:wert;min-width:0;padding-top:4px;font-family:ui-monospace,Consolas,monospace;font-size:14px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.befund-wert.is-empty{color:var(--muted);font-style:italic}
.befund-wert.hat-flagge{padding-left:30px;background-image:var(--flagge),linear-gradient(var(--border),var(--border));background-repeat:no-repeat;background-size:20px 15px,22px 17px;background-position:1px 8px,0 7px}
.befund-klappe[open] .befund-wert{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
.befund-pfeil{grid-area:pfeil;justify-self:end;font-size:18px;line-height:1.4;color:var(--muted);transition:transform 120ms}
.befund-klappe[open] .befund-pfeil{transform:rotate(90deg)}
/* Der Inhalt beginnt unter dem Merkmal, nicht unter dem Kennzeichen. */
.befund-inhalt{padding:2px 22px 22px calc(16px + 9.5rem + 18px);max-width:calc(84ch + 12rem)}
.befund-inhalt>:first-child{margin-top:0}
.befund-inhalt .exposure-meaning{margin-top:10px}
.befund-inhalt .exposure-meta{margin:6px 0 0}
.befund-inhalt .probe-method{margin-top:14px}
.measure-heading{font-size:15px;line-height:1.6;color:var(--success);margin:0}
.befund-tafeln>.profil-card{border-radius:8px}
@media(prefers-reduced-motion:reduce){.befund-kopf,.befund-pfeil{transition:none}}

@media(max-width:760px){
  .blick-kacheln{grid-template-columns:1fr}
  .befund-kopf{grid-template-columns:minmax(0,1fr) 1rem;grid-template-areas:"stufe pfeil" "name name" "wert wert";gap:6px 12px;padding:13px 14px 13px 13px}
  .befund-name,.befund-wert{padding-top:0}
  .befund-wert.hat-flagge{background-position:1px 4px,0 3px}
  .befund-inhalt{padding:0 14px 20px 13px}
  .befund-tafel-titel{padding:12px 14px 10px 13px}
}
@media(max-width:470px){.blick-kachel{padding:16px 15px 16px 14px}.blick-wert strong{font-size:17px}}
@media print{.befund,.blick-kachel{break-inside:avoid}.befund-kopf{transition:none}.befund-kopf:hover{background:none}}