/* Druvis Website · Inhaltsseiten aus S2 (Themen, Ratgeber, Über uns), Stand 3.0.1, Oktober 2026.
   Ergänzt site.css und wird nur auf diesen Seiten nach site.css geladen. Nur Tokens; feste Farben nur
   Weiß auf Navy bzw. Knopfblau wie in site.css. Bewegung nur bei prefers-reduced-motion: no-preference,
   Hover-Bewegung nur mit feinem Zeiger. Ohne JavaScript ist alles sichtbar. */

/* ---------- Seitenkopf mit Bühne (Text links, Illustration rechts) ---------- */
.seitenkopf__raster{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center}
.seitenkopf__raster>*{min-width:0}
@media (min-width:960px){.seitenkopf__raster{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
.seitenkopf__raster .szene{width:min(100%,490px);aspect-ratio:1/.8}
.seitenkopf .h1--lang{max-width:22ch;font-size:clamp(1.9rem,1.4rem + 2.1vw,3rem)}
.meta-zeile{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.seitenkopf .meta-zeile{margin-top:var(--space-2)}

/* ---------- Bausteine der Bühnen (abstrakt, erfundene Beispiele) ---------- */
.sz-titel{display:block;margin:0 0 .45em;color:var(--app-text);font-weight:750;line-height:1.3}
.sz-klein{display:block;color:var(--app-muted);font-size:.82em}
.sz-chips{display:flex;flex-wrap:wrap;gap:.35em;margin:.1em 0 .55em}
.sz-chips .szene__marke{margin:0}
.sz-gross{display:block;margin:.15em 0 .3em;color:var(--app-text);font-size:1.45em;font-weight:800;letter-spacing:-.02em;line-height:1.12}
.sz-balken{display:block;height:.5em;margin:.55em 0 .2em;border-radius:1em;background:var(--app-surface-2);overflow:hidden}
.sz-balken::before{content:"";display:block;width:75%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-blue),var(--c-blue-strong))}
.sz-hex{display:grid;place-items:center;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#2F6BC1,#172E4D 78%);color:#fff;font-weight:800}

/* Wissensdatenbank: PDF-Seite mit markiertem Zitat, Suchschritte, Antwort mit Belegen */
.sz-pdf{left:-3%;top:3%;width:52%;transform:translateZ(-3.5em) rotateZ(-1.5deg)}
.sz-pdfkopf{display:flex;justify-content:space-between;gap:.5em;margin:0 0 .7em;padding-bottom:.55em;border-bottom:1px solid var(--app-border);color:var(--app-muted);font-size:.78em;font-weight:700}
.sz-pdf .szene__seite{gap:.55em;margin:0}
.sz-suche{right:1%;top:-4%;width:45%;transform:translateZ(1.5em) rotateZ(2deg)}
.sz-suche .ansicht__schritte{margin:0}
.sz-beleg{right:-6%;top:40%;width:60%;transform:translateZ(5.5em)}
.sz-beleg .szene__frage{font-size:.92em}
@media (max-width:599px){.sz-pdf{left:-1%;width:54%}.sz-beleg{right:-1%;width:62%}.sz-suche{right:-1%}}

/* Unterweisung: Schulung, Quiz, Zertifikat */
.sz-kurs{left:-3%;top:-1%;width:58%;transform:translateZ(-4.5em) rotateZ(-2deg)}
.sz-quiz{left:25%;top:19%;width:71%;transform:translateZ(1em)}
.sz-zert{left:1%;bottom:-3%;width:50%;transform:translateZ(7em) rotateZ(1.5deg);text-align:center}
.sz-optionen{display:grid;gap:.42em;margin:.55em 0 0;padding:0;list-style:none}
.sz-optionen li{display:flex;align-items:center;gap:.55em;margin:0;padding:.45em .65em;border:1px solid var(--app-border);border-radius:.6em;color:var(--app-text-2);font-size:.9em}
.sz-optionen li::before{content:"";flex:none;width:.85em;height:.85em;border-radius:50%;border:2px solid var(--app-border)}
.sz-optionen .ist-richtig{border-color:color-mix(in srgb,var(--app-ok) 55%,var(--app-border));background:var(--app-ok-soft);color:var(--app-text);font-weight:650}
.sz-optionen .ist-richtig::before{border-color:var(--app-ok);background:var(--app-ok);box-shadow:inset 0 0 0 .14em var(--app-surface)}
.sz-zert .sz-hex{width:2.9em;height:3.25em;margin:0 auto .5em}
.sz-zert .sz-hex .i{width:1.5em;height:1.5em}

/* Arbeitsanweisung: Dokument mit Fassung, erkannte Änderung, Antwort */
.sz-dok{left:-3%;top:0;width:57%;transform:translateZ(-4em) rotateZ(-1.5deg)}
.sz-diff{right:-6%;top:5%;width:52%;transform:translateZ(2.5em) rotateZ(2deg)}
.sz-antwort{left:13%;bottom:-2%;width:76%;transform:translateZ(7em)}
@media (max-width:599px){.sz-dok{left:-1%}.sz-diff{right:-1%;width:54%}}
.sz-schritte{display:grid;gap:.42em;margin:.45em 0 0;padding:0;list-style:none;counter-reset:sz}
.sz-schritte li{display:flex;align-items:center;gap:.5em;margin:0}
.sz-schritte li::before{counter-increment:sz;content:counter(sz);display:grid;place-items:center;flex:none;width:1.45em;height:1.45em;border-radius:.4em;background:var(--app-chip);color:var(--app-link);font-size:.8em;font-weight:800}
.sz-schritte .szene__zeile{flex:1}
.sz-schritte mark{flex:1;padding:.15em .35em;border-radius:.3em;background:var(--app-mark);color:var(--app-text);font-size:.86em;box-shadow:inset .18em 0 0 #E0A100}
.sz-diff del,.sz-diff ins{display:block;margin-top:.4em;padding:.35em .55em;border-radius:.45em;color:var(--app-text);font-size:.86em;text-decoration:none}
.sz-diff del{background:var(--c-danger-soft);text-decoration:line-through;text-decoration-color:var(--c-danger)}
.sz-diff ins{background:var(--app-ok-soft)}

/* Einarbeitung: Plan der ersten Woche, Ansprechpartner, Frage mit Beleg */
.sz-plan{right:-4%;top:0;width:54%;transform:translateZ(-4em) rotateZ(2deg)}
.sz-plan .ansicht__schritte{margin:.2em 0 0}
.sz-plan .sz-offen,.sz-plan .sz-offen .i{color:var(--app-muted)}
.sz-kontakt{left:-4%;top:12%;width:46%;transform:translateZ(3.5em) rotateZ(-2deg)}

/* Handy mit Spracheingabe */
.sz-handy{left:25%;top:0;bottom:0;width:50%;padding:1.5em .85em 4.2em;border-radius:2.2em;transform:translateZ(0)}
.sz-handy::before{content:"";position:absolute;left:50%;top:.6em;width:3.2em;height:.42em;border-radius:1em;translate:-50% 0;background:var(--app-surface-2)}
.sz-handy .szene__frage{max-width:96%;font-size:.9em}
.sz-handy .szene__antwort{font-size:.9em}
.sz-mikro{position:absolute;left:50%;bottom:1em;translate:-50% 0;display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:linear-gradient(180deg,#2F6BC1,#275CA8);color:#fff;box-shadow:0 .4em 1em -.2em rgba(47,107,193,.6)}
.sz-mikro .i{width:1.3em;height:1.3em}
.sz-oben{right:-8%;top:9%;width:41%;transform:translateZ(5.5em) rotateZ(2deg)}
.sz-unten{left:-8%;bottom:9%;width:43%;transform:translateZ(8em) rotateZ(-2deg)}
.sz-welle{display:flex;align-items:center;gap:.22em;height:1.6em;margin:.35em 0 .1em}
.sz-welle span{width:.3em;height:40%;border-radius:1em;background:var(--c-blue)}
.sz-welle span:nth-child(2n){height:85%}.sz-welle span:nth-child(3n){height:60%}.sz-welle span:nth-child(5n){height:100%}
.sz-person{display:flex;align-items:center;gap:.6em}
.sz-person .sz-hex{width:2.3em;height:2.6em;font-size:.85em}
@media (max-width:599px){.sz-handy{left:22%;width:56%}.sz-oben{right:1%}.sz-unten{left:1%}.sz-plan{right:0}.sz-kontakt{left:0}}

/* Sicherheit: „Der Weg einer Frage“, Karten mittig auf der Bühne */
#weg .ansicht{display:flex;flex-direction:column;justify-content:center}
#weg .szene__buehne{font-size:clamp(11px,3cqw,16px)}

/* ---------- Gewerke mit Beispielfragen ---------- */
.gewerk-fragen{display:grid;gap:var(--space-2);margin:var(--space-2) 0 0;padding:0;list-style:none}
.gewerk-fragen li{margin:0;padding:.5rem .75rem;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-bg-alt);color:var(--c-text);font-size:var(--fs-sm);font-weight:600;line-height:1.45}
.gewerk-fragen q{quotes:"„" "“"}
.beispielfragen b{color:var(--c-text);font-weight:600}
@media (min-width:600px){.branchen--drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.branchen--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Kurz beantwortet ---------- */
.kurz{margin:0 0 var(--space-7);padding:var(--space-5) var(--space-6);border:1px solid color-mix(in srgb,var(--c-blue) 40%,var(--c-border));border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--c-blue-soft),transparent 70%),var(--c-surface);box-shadow:var(--shadow-2)}
.kurz__titel{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);color:var(--c-link);font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em}
.kurz__titel .i{width:18px;height:18px}
.kurz p{color:var(--c-text)}
.kurz>:last-child{margin-bottom:0}

/* ---------- Fließtext mit Inhaltsverzeichnis ---------- */
.mit-inhalt .text{max-width:42rem}
.mit-inhalt .gruppe>p,.mit-inhalt .gruppe>ul:not(.raster):not(.team):not(.berichte),.mit-inhalt .gruppe>.hinweis,.kapitel p{max-width:42rem}
.gruppe>h3{margin-top:var(--space-7)}
.mit-inhalt .gruppe>.karte{max-width:42rem;margin-bottom:var(--space-5)}
.gruppe>.fussnote{margin-bottom:var(--space-4)}
.gruppe .auszeichnung{margin-bottom:var(--space-4)}
.text .gruppe>h2:first-child{margin-top:0}
.text .gruppe>.gruppe__kopf h2{margin:0}
.text .zitat p{font-size:var(--fs-md)}
.text .tabelle-rahmen,.text .hinweis,.text .kurz{margin-block:var(--space-5)}

/* ---------- Checkliste zum Abhaken (auch gedruckt) ---------- */
.checkliste{display:grid;gap:var(--space-3);margin:0 0 var(--space-5);padding:0;list-style:none}
.checkliste li{position:relative;margin:0;padding:var(--space-4) var(--space-4) var(--space-4) 3.2rem;border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-surface)}
.checkliste li::before{content:"";position:absolute;left:var(--space-4);top:1.1rem;width:20px;height:20px;border:2px solid var(--c-border-strong);border-radius:5px}
.checkliste b{display:block;color:var(--c-text)}

/* ---------- Quellen ---------- */
.quellen{margin:0 0 var(--space-5);padding-left:1.4em;font-size:var(--fs-sm)}
.quellen li+li{margin-top:var(--space-2)}
.quellen a{overflow-wrap:anywhere}

/* ---------- Vergleichstabelle ---------- */
.vergleich{min-width:780px;table-layout:fixed}
.vergleich thead th{white-space:normal;hyphens:manual}
.vergleich thead th:first-child{width:17%}
.vergleich thead th:nth-child(n+2){width:19.5%}
.vergleich thead th:last-child{width:24.5%}
.vergleich th[scope=row]{position:sticky;left:0;z-index:1;min-width:10rem;background:var(--c-surface);color:var(--c-text)}
.vergleich thead th:first-child{position:sticky;left:0;z-index:2}
.vergleich .ist-druvis{background:color-mix(in srgb,var(--c-blue-soft) 70%,var(--c-surface));color:var(--c-text)}
.vergleich thead .ist-druvis{background:var(--c-blue-soft);color:var(--c-link)}
.wert{display:flex;gap:.4rem;align-items:flex-start}
.wert .i{width:18px;height:18px;flex:none;margin-top:.12em}
.wert--ja .i{color:var(--c-success)}
.wert--teil .i{color:var(--c-warning)}
.wert--nein .i{color:var(--c-muted)}

/* ---------- Ratgeber-Übersicht ---------- */
.artikel-meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:0;color:var(--c-muted);font-size:var(--fs-xs)}
.artikel-meta span{display:inline-flex;align-items:center;gap:.3rem}
.artikel-meta .i{width:15px;height:15px}
.karte .liste{font-size:var(--fs-sm)}

/* ---------- Über uns: Kapitel der Geschichte ---------- */
.kapitel{margin:0 0 var(--space-6);padding:0;list-style:none;counter-reset:kapitel}
.kapitel>li{position:relative;margin:0;padding:0 0 var(--space-7) 4rem}
.kapitel>li::before{counter-increment:kapitel;content:counter(kapitel);position:absolute;left:0;top:.1rem;display:grid;place-items:center;width:42px;height:47px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--c-blue-strong),var(--c-navy) 80%);color:#fff;font-weight:800}
.kapitel>li::after{content:"";position:absolute;left:20px;top:3.6rem;bottom:var(--space-3);width:2px;border-radius:2px;background:var(--c-border)}
.kapitel>li:last-child{padding-bottom:0}
.kapitel>li:last-child::after{display:none}
.kapitel h3{margin-bottom:var(--space-2)}
.kapitel__marke{display:block;margin-bottom:var(--space-1);color:var(--c-link);font-size:var(--fs-sm);font-weight:700}
@media (max-width:599px){.kapitel>li{padding-left:3rem}.kapitel>li::before{width:34px;height:38px;font-size:.9rem}.kapitel>li::after{left:16px;top:3rem}}

/* ---------- Team ---------- */
.team{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin:0 0 var(--space-5);padding:0;list-style:none}
.team>li{margin:0}
.person{display:flex;gap:var(--space-4);align-items:flex-start;height:100%}
.person .sz-hex{width:58px;height:65px;font-size:1.15rem;letter-spacing:.02em}
.person h3{margin:0;font-size:var(--fs-lg)}
.person__rolle{margin:.15rem 0 var(--space-2);color:var(--c-link);font-size:var(--fs-sm);font-weight:700}
.person p:last-child{margin:0;font-size:var(--fs-sm)}

/* ---------- Presse: Berichte, Kurzbeschreibung, Logos ---------- */
.berichte{margin:0 0 var(--space-5);padding:0;list-style:none;border-top:1px solid var(--c-border)}
.berichte li{display:grid;gap:.15rem var(--space-5);margin:0;padding:var(--space-3) 0;border-bottom:1px solid var(--c-border)}
@media (min-width:700px){.berichte li{grid-template-columns:6.5rem minmax(0,1fr)}}
.berichte time{color:var(--c-muted);font-size:var(--fs-sm);font-weight:700}
.berichte a{font-weight:700}
.berichte small{display:block;color:var(--c-muted);font-size:var(--fs-sm)}
.textbaustein{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);border:1px dashed var(--c-border-strong);border-radius:var(--radius-md);background:var(--c-surface)}
.textbaustein p{margin:0;color:var(--c-text)}

@media print{.seitenkopf__raster .szene{display:none}.checkliste li{break-inside:avoid}}