/* ============================================================
   Kann KI Architektur? — Kompendium v00  |  style.css
   Basis: ki_kodex.html CSS + Ergänzungen
   ============================================================ */

:root {
    --bg-white: #FFFFFF;
    --bg-grey: #D9D9D9;
    --color-red: #D9D9D9;
    --color-black: #000000;
    --text-gray: #666666;
    --column-header-bg: #E0E0E0;
    --column-header-hover: #D0D0D0;
    --base: 12pt;       /* eine zentrale Basisgröße */
    --base-large: 14pt; /* Titel-Ebene: +2pt */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background-color: var(--bg-white); overflow: hidden; height: 100vh; }

/* --- HEADER ----------------------------------------------- */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--bg-white); }

/* Status-Stempel: links neben dem Logo */
header::after {
    content: "v01 - Beta";
    position: absolute;
    top: 40pt;
    right: calc(24pt + 187pt + 18pt);
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3pt 8pt 2pt 8pt;
    border: 2pt solid #4A6580;
    color: #4A6580;
    background-color: transparent;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    opacity: 0.78;
    pointer-events: none;
    white-space: nowrap;
}
/* Navigationsbutton */
.nav-element {
    position: absolute; top: 24pt; left: 24pt;
    width: 24pt; height: 60pt;
    background-color: transparent;
    cursor: pointer; border: none; outline: none; padding: 0;
}
.nav-element::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 12pt;
    background-color: var(--color-black);
    transition: width 0.16s, background-color 0.16s;
}
.nav-element:hover::before { background-color: var(--color-black); }
body.nav-open .nav-element { background-color: transparent; }
body.nav-open .nav-element::before { width: 24pt; background-color: var(--column-header-bg); }
body.nav-open .nav-element:hover::before { background-color: var(--column-header-bg); }
.nav-element:focus-visible { outline: 2px solid var(--column-header-hover); }

.title-line {
    position: absolute; top: 24pt; left: 60pt; width: 700pt; height: 24pt;
    background-color: var(--bg-white); display: flex; align-items: center; padding-left: 8pt;
}
.title-line span { font-size: 24pt; color: var(--text-gray); }

.subtitle-line {
    position: absolute; top: 60pt; left: 60pt; width: 700pt; height: 24pt;
    background-color: var(--bg-white); display: flex; align-items: center; padding-left: 8pt;
}
.subtitle-line span {
    font-size: 24pt; color: var(--color-black);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Logo: etwas größer als bisher */
.anchor-element {
    position: absolute; top: 24pt; right: 24pt;
    width: 187pt; height: 60pt;
    background-color: var(--bg-white);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; padding: 0;
}
.anchor-element img {
    max-width: 100%; max-height: 100%;
    width: 100% !important; height: auto !important;
    object-fit: contain; display: block;
}

/* --- FOOTER ----------------------------------------------- */
footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background-color: var(--bg-white);
    border-top: 1px solid var(--column-header-bg);
}
.footer-date {
    position: absolute; bottom: 12pt; left: 24pt; width: 100pt; height: 12pt;
    display: flex; align-items: center; padding-left: 4pt;
}
.footer-date span { font-size: 10pt; color: var(--text-gray); }
.footer-source {
    position: absolute; bottom: 12pt; left: 136pt; width: 500pt; height: 12pt;
    display: flex; align-items: center; padding-left: 4pt;
}
.footer-source span { font-size: 10pt; color: var(--text-gray); }
.footer-nav {
    position: absolute; bottom: 12pt; right: 24pt;
    display: flex; align-items: center; height: 12pt;
}
.footer-nav a { font-size: 10pt; color: var(--text-gray); text-decoration: none; padding: 0 5pt; }
.footer-nav a:hover { text-decoration: underline; color: var(--color-black); }
.footer-nav .sep { font-size: 10pt; color: var(--column-header-bg); user-select: none; }

/* --- MAIN ------------------------------------------------- */
main {
    position: fixed; top: 132pt; left: 24pt; right: 24pt; bottom: 32pt;
    background-color: var(--bg-white); overflow-y: auto; overflow-x: hidden; padding: 0;
}

/* --- NAVIGATIONSLEISTE ------------------------------------ */
.jumpnav {
    position: fixed; top: 132pt; left: 24pt; bottom: 32pt; width: 220pt;
    z-index: 500; background-color: var(--column-header-bg);
    overflow-y: auto; padding: 12pt 0 24pt 0; display: none;
}
body.nav-open .jumpnav { display: block; }

.jumpnav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10pt 8pt 0;
    border-bottom: 1px solid var(--column-header-hover); margin-bottom: 4pt;
}

/* Abschnitts-Navigation: Pfeile zum vorherigen/nächsten Abschnitt (HTML-Seite) */
.section-nav { display: flex; align-items: center; gap: 2pt; }
.section-nav button {
    background: none; border: none; cursor: pointer;
    padding: 3pt 4pt; display: inline-flex; align-items: center;
    color: var(--text-gray);
}
.section-nav button:hover { color: var(--color-black); }
.section-nav button:disabled { opacity: .25; cursor: default; }
.section-nav svg { width: 11pt; height: 11pt; display: block; }

.jumpnav ul { list-style: none; }
.jumpnav a {
    display: block; text-decoration: none; color: var(--color-black);
    line-height: 1.35; padding: 4pt 12pt;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jumpnav a:hover { background-color: var(--column-header-hover); }
.jumpnav a.active { background-color: var(--column-header-hover); font-weight: bold; }

/* Nav: eine Basisgröße, zwei Gewichte */
.jumpnav .lvl-1 a {
    font-size: var(--base); font-weight: bold; color: var(--color-black);
    padding: 5pt 12pt 3pt 12pt; margin-top: 6pt;
}
.jumpnav .lvl-1:first-child a { margin-top: 0; }
.jumpnav .lvl-2 a {
    font-size: var(--base); font-weight: normal; color: var(--color-black);
    padding-left: 22pt;
}
.jumpnav .lvl-3 a {
    font-size: var(--base); font-weight: normal; color: var(--text-gray);
    padding-left: 34pt;
}

/* Sitemap + Suche: gleichwertige Aktionen oben in der Navigationsspalte
   (per nav.js direkt unter .jumpnav-head eingefügt) */
.jumpnav-actions { display: flex; gap: 1px; margin: 0 0 8pt 0; }
.jumpnav-actions .jumpnav-action {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5pt;
    font-size: 10pt; font-weight: bold; color: var(--text-gray); text-decoration: none;
    padding: 7pt 4pt; cursor: pointer; background: var(--bg-white);
}
.jumpnav-actions a.jumpnav-action:hover { color: var(--color-black); background: var(--column-header-hover); }
.jumpnav-actions .jumpnav-action svg { width: 11pt; height: 11pt; flex-shrink: 0; }
.jumpnav-actions .jumpnav-action.is-current { color: var(--color-black); background: var(--column-header-hover); cursor: default; }

.jumpnav .jumpnav-link {
    font-size: 10pt; font-weight: bold; color: var(--text-gray); text-decoration: none;
    display: flex; align-items: center; gap: 5pt;
    padding: 0 12pt;
    line-height: 1.35;
}
.jumpnav .jumpnav-link:hover { color: var(--color-black); background: none; }
.jumpnav .jumpnav-link svg { width: 10pt; height: 10pt; flex-shrink: 0; }

.scrim { display: none; }

/* --- INHALTSBEREICH --------------------------------------- */
.content-area { padding: 24pt 0 calc(100vh - 164pt) 0; margin-left: 44pt; transition: margin-left 0.26s ease; }
body.nav-open .content-area { margin-left: 256pt; }
.content { max-width: 760pt; }

/* doc-head: kein sichtbarer Abstand — liegt über dem Scroll-Start */
.doc-head { margin-bottom: 0; padding-bottom: 0; }
.doc-head .doc-sub { font-size: var(--base); color: var(--text-gray); }

/* Fließtext: Basis-Grau-Regular */
.content p {
    font-size: var(--base); color: var(--text-gray);
    line-height: 1.8; margin-bottom: 10pt;
    text-align: justify;
    -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/* Titel (A.0): +2pt, Schwarz, Bold */
.sec-title-haupt {
    font-size: var(--base-large);
    font-weight: bold;
    color: var(--color-black);
    margin-top: 20pt; margin-bottom: 6pt;
    line-height: 1.4;
}

/* Zwischentitel (A.0.01): Basis, Schwarz, Bold */
.sec-title-zwischen {
    font-size: var(--base);
    font-weight: bold;
    color: var(--color-black);
    margin-top: 16pt; margin-bottom: 4pt;
    line-height: 1.4;
}

/* Rückwärtskompatibilität für bestehende h2/h3/sec-title-Klassen */
.content h1 { font-size: var(--base-large); color: var(--color-black); font-weight: bold; margin-bottom: 6pt; }
.content h2 { font-size: var(--base-large); color: var(--color-black); font-weight: bold; margin-top: 20pt; margin-bottom: 6pt; }
.content h3 { font-size: var(--base); color: var(--color-black); font-weight: bold; margin-top: 16pt; margin-bottom: 4pt; }
section.sec { scroll-margin-top: 0; }
.sec-title { font-size: var(--base); font-weight: bold; color: var(--color-black); margin-top: 16pt; margin-bottom: 4pt; }
.sec-teil .sec-title   { font-size: var(--base-large); margin-top: 20pt; margin-bottom: 6pt; }
.sec-kapitel .sec-title { font-size: var(--base); margin-top: 16pt; margin-bottom: 4pt; }
.sec-meta .sec-title    { font-size: var(--base); margin-top: 16pt; margin-bottom: 4pt; }

/* Listen */
.content ul { list-style: none; margin: 0 0 10pt 0; }
.content li {
    font-size: var(--base); color: var(--text-gray);
    line-height: 1.8; padding-left: 16pt; position: relative; margin-bottom: 4pt;
}
.content li::before { content: "–"; position: absolute; left: 0; color: var(--text-gray); }

/* These-Blöcke */
.these-label, .denkmal-label {
    font-size: var(--base); font-weight: bold; color: var(--color-black);
    margin-top: 14pt; margin-bottom: 4pt;
}
.these-label + p { color: var(--color-black); }
.denkmal-label + p { background-color: var(--column-header-bg); padding: 10pt; color: var(--color-black); }

/* Semantische Querverweise im Lesetext (Wikipedia-Prinzip: dezent, Lesefluss erhalten) */
.content a.xref {
    color: #444444; /* eine Schattierung dunkler als der Fließtext (#666) */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #777777;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
/* In schwarzen Absätzen (These/denkmal) Textfarbe erben, sonst würde der Link heller wirken */
.these-label + p a.xref, .denkmal-label + p a.xref { color: inherit; }
.content a.xref:hover {
    color: var(--color-black);
    text-decoration-style: solid;
    text-decoration-color: var(--color-black);
}

/* ============================================================
   Ergänzungsspalte — zweite Spalte rechts im Lesefenster
   Aktiv nur auf Seiten mit body.aside-layout (kein Effekt auf
   noch nicht ausgerollte Seiten).
   ============================================================ */
body.aside-layout .content-area { padding-right: 10pt; } /* Abstand Ergänzung↔Scrollbar */
.content.zweispalt { max-width: none; }

/* Jede Section: Titel bleibt direktes Kind (scrollt beim Ankersprung aus
   dem Fenster, erscheint stattdessen in der Kopfzeile). Der Textkörper
   darunter wird zur Rasterzeile Lesetext | Ergänzung. */
.sec-body.zweispalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220pt;  /* Lesespalte | Ergänzung(=Nav-Breite) */
    column-gap: 32pt;
}
.zweispalt .col-text { max-width: 640pt; }
.zweispalt .col-text > :first-child { margin-top: 0; }
.col-aside {
    font-size: 10.5pt;
    display: flex; flex-direction: column;         /* Bild über Tags */
}
.col-aside > :first-child { margin-top: 0; }
/* Nav offen → Ergänzung verlässt das Sichtfeld; Leseposition bleibt
   erhalten (nav.js: topReadingAnchor/restoreReadingAnchor) */
body.nav-open .sec-body.zweispalt { grid-template-columns: minmax(0, 1fr) 0pt; }
body.nav-open .col-aside { display: none; }

/* Baustein 1: Bild — oberster Baustein, volle Spaltenbreite, freie Höhe */
.aside-figure { margin: 0 0 20pt 0; }
.aside-figure .ph-bild {
    width: 100%; height: var(--bild-hoehe, 165pt);
    background: var(--column-header-bg);
    cursor: pointer; overflow: hidden;
}
.aside-figure .ph-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Bildunterschrift + Quellennachweis erscheinen nicht in der Spalte,
   sondern erst in der Lightbox (siehe .lightbox-caption/.lightbox-quelle),
   damit die Ergänzungsspalte nur Bild + Tags zeigt. */

/* Baustein 2: Tags — Chips verlinken auf schlagwort.html (Suche/Kategorienliste) */
.aside-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 5pt; }
.aside-tags .tag {
    font-size: 9pt; color: #444; background: var(--column-header-bg);
    padding: 2pt 8pt; white-space: nowrap; text-decoration: none;
}
.aside-tags .tag:hover { background: var(--column-header-hover); color: var(--color-black); }

/* --- Suche-Seite: Freitextsuche + Schlagwort-Wolke -------- */
.suche-freitext { margin-bottom: 28pt; padding-bottom: 24pt; border-bottom: 1px solid var(--column-header-bg); }
.suche-schlagworte .tag-anzahl { font-size: var(--base); color: var(--text-gray); margin: 2pt 0 12pt; }
.tag-wolke { display: flex; flex-wrap: wrap; gap: 7pt; }
.tag-wolke a {
    font-size: var(--base); color: #444; background: var(--column-header-bg);
    padding: 4pt 11pt; text-decoration: none; white-space: nowrap;
}
.tag-wolke a:hover { background: var(--column-header-hover); color: var(--color-black); }

/* Herkunftsvermerk — jetzt im Lesetext direkt unter dem Abschnitt,
   gleiche Schriftart/-größe wie zuvor in der Ergänzungsspalte,
   nur etwas heller als der übrige Fließtext (var(--text-gray)). */
.col-text .herkunft-hinweis {
    margin-top: 10pt;
    font-size: 9pt; font-style: italic; color: #999999;
    line-height: 1.45;
}

/* Overlay/Lightbox für Bild-Event 1 (wird von nav.js gesteuert) */
.lightbox {
    position: fixed; inset: 0; z-index: 2000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55);
}
body.lightbox-open .lightbox { display: flex; }
.lightbox-figur { max-width: 82vw; max-height: 82vh; text-align: center; }
.lightbox-bild { max-width: 82vw; max-height: 74vh; display: block; }
.lightbox-caption { color: #e8e8e8; font-size: 10pt; margin-top: 8pt; }
.lightbox-quelle { color: #aaaaaa; font-size: 8.5pt; margin-top: 2pt; }
.lightbox-link {
    display: inline-block; margin-top: 6pt;
    color: #cccccc; font-size: 8.5pt;
    text-decoration: underline; text-decoration-style: dotted;
    text-decoration-color: #888888; text-underline-offset: 3px;
}
.lightbox-link[hidden] { display: none; }
.lightbox-link:hover { color: #ffffff; text-decoration-style: solid; text-decoration-color: #ffffff; }
.lightbox-close {
    position: fixed; top: 18pt; right: 24pt;
    width: 30pt; height: 30pt; border: none; cursor: pointer;
    background: transparent; color: #fff; font-size: 22pt; line-height: 1;
}
.lightbox-close:hover { color: #bbb; }

/* Smartphone: Ergänzung grundsätzlich außerhalb des Sichtbereichs */
@media screen and (max-width: 768px) {
    .sec-body.zweispalt { grid-template-columns: 1fr; }
    .col-aside { display: none; }
}

/* Scrollbar */
main::-webkit-scrollbar, .jumpnav::-webkit-scrollbar { width: 12px; }
main::-webkit-scrollbar-track, .jumpnav::-webkit-scrollbar-track { background: #f1f1f1; }
main::-webkit-scrollbar-thumb, .jumpnav::-webkit-scrollbar-thumb { background: #888; border-radius: 0px; }
main::-webkit-scrollbar-thumb:hover, .jumpnav::-webkit-scrollbar-thumb:hover { background: #555; }
main, .jumpnav { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }

/* --- RESPONSIVE ------------------------------------------- */
@media screen and (max-width: 1024px) {
    .title-line, .subtitle-line { width: calc(100vw - 320pt); }
    .footer-source { width: calc(100vw - 400pt); }
}
@media screen and (max-width: 768px) {
    body { overflow: auto; height: auto; }
    header { position: fixed; height: 110pt; }
    .title-line span, .subtitle-line span { font-size: 18pt; }
    .anchor-element { width: 110pt; height: 56pt; top: 16pt; }
    main { position: static; top: auto; left: auto; right: auto; bottom: auto; margin: 120pt 16pt 64pt 16pt; height: auto; overflow: visible; }
    .jumpnav { position: fixed; top: 110pt; left: 0; bottom: 0; width: min(260pt, 82vw); z-index: 1100; box-shadow: 4px 0 12px rgba(0,0,0,.15); transform: translateX(-100%); display: block; transition: transform 0.26s ease; }
    body.nav-open .jumpnav { transform: translateX(0); }
    .content-area { padding: 16pt 0; margin-left: 0; }
    .content p { text-align: left; }
    .scrim { display: block; position: fixed; inset: 110pt 0 0 0; z-index: 1050; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .26s; }
    body.nav-open .scrim { opacity: 1; pointer-events: auto; }
    section.sec { scroll-margin-top: 120pt; } /* Ankersprünge nicht unter dem fixierten Header landen lassen */
    footer { position: fixed; height: 48pt; }
    .footer-date { bottom: 27pt; left: 16pt; width: auto; }
    .footer-source { bottom: 27pt; left: 92pt; right: 16pt; width: auto; overflow: hidden; }
    .footer-source span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .footer-nav { bottom: 10pt; left: 16pt; right: auto; }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    header::after { display: none; }
    .anchor-element { display: none; }
    .title-line, .subtitle-line { width: calc(100vw - 76pt); }
}

/* --- Kacheln (index.html) --------------------------------- */
.kachel-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190pt, 1fr));
    gap: 10pt; margin-top: 16pt; margin-bottom: 28pt;
}
.kachel { background-color: var(--kachel-bg, var(--column-header-bg)); padding: 14pt; text-decoration: none; display: block; transition: filter 0.16s; }
.kachel:hover { filter: brightness(0.96); }
/* Farbige Kacheln (F&B-Farbmuster): Text-/Label-Farbe je nach Helligkeit des
   Hintergrunds umschalten, damit der Kontrast erhalten bleibt. */
.kachel.kachel-hell { --kachel-fg: var(--color-black); --kachel-fg-muted: rgba(0,0,0,.62); }
.kachel.kachel-dunkel { --kachel-fg: #ffffff; --kachel-fg-muted: rgba(255,255,255,.74); }
.kachel-label { font-size: 10pt; color: var(--kachel-fg-muted, var(--text-gray)); text-transform: uppercase; letter-spacing: 1pt; margin-bottom: 5pt; }
.kachel-titel { font-size: var(--base); font-weight: bold; color: var(--kachel-fg, var(--color-black)); margin-bottom: 5pt; line-height: 1.25; }
.kachel-beschreibung { font-size: 10pt; color: var(--kachel-fg-muted, var(--text-gray)); line-height: 1.55; }
@media screen and (max-width: 768px) { .kachel-raster { grid-template-columns: 1fr; } }

/* --- Sitemap ---------------------------------------------- */
.sitemap-block { margin-bottom: 0; scroll-margin-top: 0; }

/* Abschnitts-Titel (A): +2pt, Bold, Schwarz */
.sitemap-abschnitt-kopf {
    display: flex; align-items: baseline; gap: 12pt;
    padding: 8pt 14pt; margin-top: 20pt;
    background-color: #C8C8C8;
}
.sitemap-abschnitt-label { font-size: var(--base-large); font-weight: normal; color: var(--color-black); white-space: nowrap; }
.sitemap-abschnitt-link { font-size: var(--base-large); font-weight: bold; color: var(--color-black); text-decoration: none; }
.sitemap-abschnitt-link:hover { text-decoration: underline; }

/* Titel (A.0): Basis, Bold, Schwarz */
.sitemap-tree { list-style: none; }
.sitemap-tree li, .sitemap-l2 li {
    padding-left: 0;
    margin-bottom: 0;
    line-height: normal;
    color: inherit;
}
.sitemap-tree li::before, .sitemap-l2 li::before { content: none; }
.sitemap-tree > li { background-color: var(--column-header-bg); }
.sitemap-tree > li > .toggler {
    display: flex; align-items: center; gap: 6pt;
    padding: 5pt 14pt;
    font-size: var(--base); font-weight: bold; color: var(--color-black);
    cursor: pointer; user-select: none; transition: background-color 0.14s;
}
.sitemap-tree > li > .toggler:hover { background-color: var(--column-header-hover); }

/* Zwischentitel (A.0.01): Basis, Regular, Schwarz */
.sitemap-l2 { list-style: none; }
.sitemap-l2 > li { background-color: #EBEBEB; }
.sitemap-l2 > li > .toggler {
    display: flex; align-items: center; gap: 6pt;
    padding: 3pt 14pt 3pt 28pt;
    font-size: var(--base); font-weight: normal; color: var(--color-black);
    cursor: pointer; user-select: none; transition: background-color 0.14s;
}
.sitemap-l2 > li > .toggler:hover { background-color: var(--column-header-hover); }

.toggler-arrow {
    display: inline-flex;
    width: 10pt;
    height: 10pt;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    transition: transform 0.16s;
}
.toggler-arrow::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 3.5pt solid transparent;
    border-bottom: 3.5pt solid transparent;
    border-left: 5pt solid var(--text-gray);
}
.toggler-arrow.open { transform: rotate(90deg); }
.toggler-link { text-decoration: none; color: inherit; flex: 1; }
.toggler-link:hover { color: var(--color-black); }
.sitemap-nr { font-size: 10pt; color: var(--text-gray); flex-shrink: 0; min-width: 38pt; }
.sitemap-nr.l1 { font-weight: bold; font-size: 10pt; min-width: 22pt; color: var(--color-black); }
.sitemap-nr.l2 { min-width: 46pt; }
.collapsible.collapsed { display: none; }

/* --- Werkzeug-Katalog (werkzeuge.html) ---------------------- */
.werkzeug-filter { padding: 0 12pt; }
.wz-search {
    width: 100%; padding: 6pt 8pt; margin-bottom: 14pt;
    border: 1px solid var(--column-header-hover); background-color: var(--bg-white);
    font-family: Arial, sans-serif; font-size: 10pt; color: var(--color-black);
}
.filter-group { margin-bottom: 14pt; }
.filter-group-title {
    font-size: 10pt; font-weight: bold; color: var(--color-black);
    margin-bottom: 5pt; text-transform: uppercase; letter-spacing: 0.5pt;
}
.wz-checkbox-label {
    display: block; font-size: 10pt; color: var(--color-black);
    padding: 2pt 0; cursor: pointer; line-height: 1.6;
}
.wz-checkbox-label input { margin-right: 5pt; vertical-align: middle; }
.wz-result-count {
    font-size: 10pt; color: var(--text-gray);
    border-top: 1px solid var(--column-header-hover); padding-top: 8pt;
}

.wz-table { width: 100%; border-collapse: collapse; font-size: var(--base); margin-top: 12pt; }
.wz-table th {
    text-align: left; background-color: var(--column-header-bg);
    padding: 6pt 10pt; font-size: 10pt; color: var(--color-black); cursor: pointer;
    user-select: none; white-space: nowrap;
}
.wz-table th:hover { background-color: var(--column-header-hover); }
.wz-table th.sorted::after { content: " ▾"; }
.wz-table td { padding: 6pt 10pt; border-bottom: 1px solid var(--column-header-bg); color: var(--text-gray); font-size: var(--base); }
.wz-table tbody tr { cursor: pointer; }
.wz-table tbody tr:hover { background-color: var(--column-header-bg); }
.wz-table .wz-name { color: var(--color-black); font-weight: bold; }
.wz-empty { color: var(--text-gray); font-style: italic; padding: 20pt 10pt; }

.wz-detail { max-width: 600pt; }
.wz-back {
    background: none; border: none; font-size: var(--base); color: var(--text-gray);
    cursor: pointer; padding: 0; margin-bottom: 18pt; text-decoration: underline; font-family: Arial, sans-serif;
}
.wz-back:hover { color: var(--color-black); }
.wz-detail-title { font-size: var(--base-large); font-weight: bold; color: var(--color-black); margin-bottom: 8pt; }
.wz-detail-meta { font-size: 10pt; color: var(--text-gray); margin-bottom: 16pt; }
.wz-detail-field { margin-bottom: 12pt; }
.wz-detail-label { font-weight: bold; color: var(--color-black); font-size: var(--base); display: block; margin-bottom: 2pt; }
.wz-detail-value { color: var(--text-gray); font-size: var(--base); line-height: 1.7; }
.wz-detail-link { color: var(--color-black); }

@media screen and (max-width: 768px) {
    .wz-table th:nth-child(2), .wz-table td:nth-child(2) { display: none; }
}