/* Werkzeugkasten · Stil „hlsbrg“ (Werkbank-Gespräch mit Johannes, 14.10.2026; ohne Entwurf, alle Werte neu)
   Hochkontrastig Schwarz-Weiß, vollflächige Bilder mit Korn, lange schräge Linien und Kanten, Code-Schreibweise
   in Mono („[ crtv_drctr ]“), knalliges Orange nur für Hervorhebungen, große runde Ecken gegen die Härte.
   Hell: weißer Grund, schwarzer Text, Orange nur als Fläche mit schwarzer Schrift. Dunkel: fast schwarz, heller
   Text, Orange auch als Akzent auf Schwarz.
   Braucht tokens.css (design-grundlagen ≥ 0.8), Inter (Baustein schriften) und schriften.css (Inter Tight, JetBrains Mono).
   Eigene Klassen: .hlsbrg-code, .hlsbrg-klammer, .hlsbrg-nur-vorlesen, .hlsbrg-hervor, .hlsbrg-stempel,
   .hlsbrg-schraeg, .hlsbrg-buehne, .hlsbrg-korn (Steckbrief README.md). */
[data-stil="hlsbrg"] {
  --wk-grund-h: #FFFFFF;                --wk-grund-d: #0B0B0B;
  --wk-flaeche-h: #F3F3F1;              --wk-flaeche-d: #171717;
  --wk-flaeche-2-h: #E7E7E4;            --wk-flaeche-2-d: #242424;
  --wk-auswahl-h: #FFE1D4;              --wk-auswahl-d: #3A1D10;   /* Orange, stark aufgehellt / abgedunkelt */
  --wk-text-h: #0A0A0A;                 --wk-text-d: #F5F5F2;
  --wk-text-2-h: #262626;               --wk-text-2-d: #D9D9D6;
  --wk-text-leise-h: #595959;           --wk-text-leise-d: #A6A6A2;
  --wk-linie-h: #DEDEDA;                --wk-linie-d: #2C2C2C;
  --wk-linie-stark-h: #737373;          --wk-linie-stark-d: #7C7C78;
  --wk-akzent-h: #FF5A1F;               --wk-akzent-d: #FF5A1F;   /* Signal-Orange, hell nur als Fläche */
  --wk-auf-akzent-h: #0A0A0A;           --wk-auf-akzent-d: #0A0A0A;   /* immer schwarze Schrift auf Orange */
  --wk-haupt-h: #0A0A0A;                --wk-haupt-d: #F5F5F2;   /* Hauptknopf kehrt um */
  --wk-auf-haupt-h: #FFFFFF;            --wk-auf-haupt-d: #0B0B0B;
  --wk-fokus-h: #0A0A0A;                --wk-fokus-d: #FF5A1F;   /* hell schwarz, dunkel Orange */
  --wk-gut-h: #1D7A4A;                  --wk-gut-d: #5CC98E;
  --wk-gut-flaeche-h: #E2F2E8;          --wk-gut-flaeche-d: #12281C;
  --wk-gut-text-h: #145C36;             --wk-gut-text-d: #9BE0B8;
  --wk-gut-rand-h: #8FC7A6;             --wk-gut-rand-d: #2D5C42;
  --wk-achtung-h: #A86B00;              --wk-achtung-d: #E8B44C;   /* Ocker, damit Orange dem Akzent bleibt */
  --wk-achtung-flaeche-h: #FBF0D6;      --wk-achtung-flaeche-d: #2C2410;
  --wk-achtung-text-h: #5F3F00;         --wk-achtung-text-d: #F2D38E;
  --wk-achtung-rand-h: #D7B260;         --wk-achtung-rand-d: #6B5620;
  --wk-fehler-h: #C1123B;               --wk-fehler-d: #FF7A92;   /* Karmin, klar vom Orange getrennt */
  --wk-fehler-flaeche-h: #FBE3E8;       --wk-fehler-flaeche-d: #33141B;
  --wk-fehler-text-h: #8A0D2A;          --wk-fehler-text-d: #FFB3C1;
  --wk-schleier-h: rgba(10,10,10,.55);  --wk-schleier-d: rgba(0,0,0,.75);
  --wk-schatten-1-h: none;              --wk-schatten-1-d: none;   /* Flächen ohne Schatten */
  --wk-schatten-2-h: 0 30px 60px -24px rgba(10,10,10,.30), 0 12px 24px -16px rgba(10,10,10,.22);
  --wk-schatten-2-d: 0 30px 60px -20px rgba(0,0,0,.85), 0 12px 24px -12px rgba(0,0,0,.7);   /* weich und tief: entschieden */
  --wk-schatten-3-h: 0 40px 90px -30px rgba(10,10,10,.40); --wk-schatten-3-d: 0 40px 90px -24px rgba(0,0,0,.9);

  --wk-radius-s: 8px; --wk-radius-m: 14px; --wk-radius-l: 22px; --wk-radius-xl: 32px; --wk-radius-rund: 999px;
  --wk-strich-aktiv: 3px;
  --wk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-schrift-anzeige: "Inter Tight", "Inter", system-ui, sans-serif;
  --wk-schrift-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wk-groesse-titel: 48px; --wk-groesse-abschnitt: 28px; --wk-groesse-gross: 20px;
  --wk-groesse-text: 16px; --wk-groesse-klein: 13.5px;
  --wk-gewicht-titel: 800; --wk-gewicht-abschnitt: 750; --wk-gewicht-stark: 600;
  --wk-laufweite-titel: -.045em; --wk-zeilenhoehe: 1.55;

  /* Eigene Werte: Signal als Schrift (hell schwarz, dunkel Orange), Bühne (immer dunkel, Text immer hell) */
  --hlsbrg-signal-text-h: #0A0A0A;      --hlsbrg-signal-text-d: #FF5A1F;
  --hlsbrg-buehne-grund: #0A0A0A; --hlsbrg-buehne-text: #F5F5F2;
  --hlsbrg-buehne-schleier: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.85) 100%);
  --hlsbrg-neigung: 3vw;        /* Höhe der schrägen Kante (.hlsbrg-schraeg auf Abschnitten) */
  --hlsbrg-strich: 6px;         /* Dicke der schrägen Linie */
  --hlsbrg-korn-staerke: .45;   /* Deckkraft des Korns */
}

/* je Bereich neu rechnen, auch in einem Abschnitt mit eigenem data-theme */
[data-stil="hlsbrg"], [data-stil="hlsbrg"] [data-theme] { --hlsbrg-signal-text: var(--wk-wenn-hell, var(--hlsbrg-signal-text-d)) var(--wk-wenn-dunkel, var(--hlsbrg-signal-text-h)); }

/* Grundformen: Titel groß und eng, Flächen ohne Rahmen und Schatten, nur entschiedene Karten mit tiefem Schatten */
[data-stil="hlsbrg"] .wk-h1 { line-height: .98; }
[data-stil="hlsbrg"] .wk-h2 { letter-spacing: -.03em; }
[data-stil="hlsbrg"] .wk-h3 { font-family: var(--wk-schrift-anzeige); letter-spacing: -.01em; }
[data-stil="hlsbrg"] .wk-marke { font: 500 12.5px/1.3 var(--wk-schrift-mono); letter-spacing: .02em; text-transform: none; color: var(--hlsbrg-signal-text); }
[data-stil="hlsbrg"] .wk-marke::before { content: "[ "; content: "[ " / ""; }
[data-stil="hlsbrg"] .wk-marke::after { content: " ]"; content: " ]" / ""; }
[data-stil="hlsbrg"] .wk-karte { padding: 20px 22px; }
[data-stil="hlsbrg"] .wk-karte:not(.vorschlag, .offen, .entschieden) { border: 0; box-shadow: none; }   /* Vorschlag und offen bleiben gestrichelt (Fundament) */
[data-stil="hlsbrg"] .wk-karte.entschieden { border: 0; box-shadow: var(--wk-schatten-2); }
[data-stil="hlsbrg"] .wk-btn { border-radius: var(--wk-radius-rund); padding-inline: 20px; }
[data-stil="hlsbrg"] .wk-chip, [data-stil="hlsbrg"] .wk-pill { font-family: var(--wk-schrift-mono); font-weight: 500; }
[data-stil="hlsbrg"] :focus-visible { outline-width: var(--wk-strich-aktiv); outline-offset: 3px; }

/* Links: hell schwarz und unterstrichen (Orange nie als Schrift auf Weiß), beim Zeigen Orange als Fläche; dunkel Orange */
[data-stil="hlsbrg"] a:not([class]) { color: var(--hlsbrg-signal-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; border-radius: 4px; }
[data-stil="hlsbrg"] a:not([class]):hover { background: var(--wk-akzent); color: var(--wk-auf-akzent); text-decoration: none; }

/* Hervorhebung: Orange als Fläche mit schwarzer Schrift, ohne Rahmen und Schatten */
[data-stil="hlsbrg"] mark, [data-stil="hlsbrg"] .hlsbrg-hervor { background: var(--wk-akzent); color: var(--wk-auf-akzent);
  border-radius: var(--wk-radius-s); padding: .02em .28em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Code-Schreibweise: Mono für Überschriften, Labels, Navigation; nie für Fließtext */
[data-stil="hlsbrg"] .hlsbrg-code { font-family: var(--wk-schrift-mono); font-weight: 500; letter-spacing: -.01em; }
[data-stil="hlsbrg"] .hlsbrg-klammer { color: var(--hlsbrg-signal-text); font-weight: 400; }
/* Nur für Screenreader (das Fundament hat keine eigene Klasse dafür) */
.hlsbrg-nur-vorlesen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Stempel: kleines Etikett, leicht gedreht; nur für einzelne Elemente, nie für Karten oder Abschnitte */
[data-stil="hlsbrg"] .hlsbrg-stempel { display: inline-block; transform: rotate(-3deg); background: var(--wk-akzent); color: var(--wk-auf-akzent);
  font: 600 12px/1.2 var(--wk-schrift-mono); letter-spacing: .02em; padding: 5px 10px; border-radius: var(--wk-radius-s); white-space: nowrap; }
[data-stil="hlsbrg"] .hlsbrg-stempel.gegen { transform: rotate(2.5deg); }

/* Schräge: leeres Element (<hr>, <div aria-hidden>) = lange schräge Linie über die volle Breite;
   steigend, .fallend fällt nach rechts; Abschnitt mit Inhalt = schräge Ober- und Unterkante (.oben / .unten für nur eine Kante) */
[data-stil="hlsbrg"] .hlsbrg-schraeg:empty { display: block; border: 0; margin: var(--wk-abstand-6) 0; width: 100%;
  height: calc(var(--hlsbrg-neigung) + var(--hlsbrg-strich));
  background: linear-gradient(to bottom right, transparent calc(50% - var(--hlsbrg-strich) / 2), var(--wk-akzent) calc(50% - var(--hlsbrg-strich) / 2),
    var(--wk-akzent) calc(50% + var(--hlsbrg-strich) / 2), transparent calc(50% + var(--hlsbrg-strich) / 2)); }
[data-stil="hlsbrg"] .hlsbrg-schraeg.fallend:empty { background-image: linear-gradient(to top right, transparent calc(50% - var(--hlsbrg-strich) / 2), var(--wk-akzent) calc(50% - var(--hlsbrg-strich) / 2),
    var(--wk-akzent) calc(50% + var(--hlsbrg-strich) / 2), transparent calc(50% + var(--hlsbrg-strich) / 2)); }
[data-stil="hlsbrg"] .hlsbrg-schraeg:not(:empty) { clip-path: polygon(0 var(--hlsbrg-neigung), 100% 0, 100% calc(100% - var(--hlsbrg-neigung)), 0 100%);
  padding-block: calc(var(--hlsbrg-neigung) + var(--wk-abstand-6)); }
[data-stil="hlsbrg"] .hlsbrg-schraeg.oben:not(:empty) { clip-path: polygon(0 var(--hlsbrg-neigung), 100% 0, 100% 100%, 0 100%); }
[data-stil="hlsbrg"] .hlsbrg-schraeg.unten:not(:empty) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hlsbrg-neigung)), 0 100%); }

/* Bühne: vollflächiges, randloses Bild (Schwarz-Weiß, außer .farbig), Text darauf über einem Schleier immer hell */
[data-stil="hlsbrg"] .hlsbrg-buehne { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
  min-height: min(78vh, 720px); padding: clamp(24px, 5vw, 64px); background: var(--hlsbrg-buehne-grund); color: var(--hlsbrg-buehne-text); }
[data-stil="hlsbrg"] .hlsbrg-buehne > img, [data-stil="hlsbrg"] .hlsbrg-buehne > picture > img, [data-stil="hlsbrg"] .hlsbrg-buehne > video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
[data-stil="hlsbrg"] .hlsbrg-buehne.farbig > img, [data-stil="hlsbrg"] .hlsbrg-buehne.farbig > picture > img,
[data-stil="hlsbrg"] .hlsbrg-buehne.farbig > video { filter: none; }
[data-stil="hlsbrg"] .hlsbrg-buehne > picture { display: contents; }
[data-stil="hlsbrg"] .hlsbrg-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hlsbrg-buehne-schleier); pointer-events: none; }
[data-stil="hlsbrg"] .hlsbrg-buehne :is(.wk-h1, .wk-h2, .wk-h3, .wk-unter, .wk-marke, p) { color: var(--hlsbrg-buehne-text); }
[data-stil="hlsbrg"] .hlsbrg-buehne .hlsbrg-klammer, [data-stil="hlsbrg"] .hlsbrg-buehne .wk-marke { color: var(--wk-akzent); }

/* Korn: Rauschfläche (korn.svg) als Überlagerung; das Bild selbst bleibt unverändert. .flimmern bewegt das Korn,
   aber nur ohne prefers-reduced-motion. Elemente mit Korn brauchen eine eigene Ebene (position, isolation). */
[data-stil="hlsbrg"] .hlsbrg-korn { position: relative; isolation: isolate; overflow: hidden; }
[data-stil="hlsbrg"] .hlsbrg-korn::after { content: ""; position: absolute; inset: -50%; z-index: 1; pointer-events: none;
  background: url("korn.svg") repeat; background-size: 200px 200px; mix-blend-mode: overlay; opacity: var(--hlsbrg-korn-staerke); }
[data-stil="hlsbrg"] .hlsbrg-korn > * { position: relative; z-index: 2; }
[data-stil="hlsbrg"] .hlsbrg-buehne.hlsbrg-korn > :is(img, video, picture) { position: absolute; z-index: -2; }
@media (prefers-reduced-motion: no-preference) {
  [data-stil="hlsbrg"] .hlsbrg-korn.flimmern::after { animation: hlsbrg-korn 1s steps(6) infinite; }
}
@keyframes hlsbrg-korn {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); }
}