/* ZCP · Einstieg: feste Reihenfolge – Tokens → Schriften → Basis → Layout → Bewegung → Komponenten */
@import url("tokens.css");
@import url("fonts.css");
@import url("base.css");
@import url("layout.css");
@import url("motion.css");
@import url("components/icon.css");
@import url("components/knopf.css");
@import url("components/titel.css");
@import url("components/chip.css");
@import url("components/siegel.css");
@import url("components/medium.css");
@import url("components/header.css");
@import url("components/footer.css");
@import url("components/chat.css");
@import url("components/einwilligung.css");
@import url("components/buehne.css");
@import url("components/haltung.css");
@import url("components/kennzahlen.css");
@import url("components/prinzip.css");
@import url("components/einmal-video.css");
@import url("components/werbetafel.css");
@import url("components/kopfzeile.css");
@import url("components/instrument.css");
@import url("components/massstabs-reise.css");
@import url("components/molekuel-studio.css");
@import url("components/bento.css");
@import url("components/karten.css");
@import url("components/schnellstart.css");
@import url("components/transparenz.css");
@import url("components/warum.css");
@import url("components/terminband.css");
@import url("components/abschluss.css");
@import url("components/brotkrumen.css");
@import url("components/kapitelvideo.css");
@import url("components/definition.css");
@import url("components/studio.css");
@import url("components/zellschnitt.css");
@import url("components/wegwahl.css");
@import url("components/verweise.css");
@import url("components/quellen.css");
@import url("components/anwendungsbuehne.css");
@import url("components/problem.css");
@import url("components/zeitmaschine.css");
@import url("components/querschnitt.css");
@import url("components/nachweisliste.css");
@import url("components/steckbrief.css");
@import url("components/faq.css");
@import url("components/textbuehne.css");
@import url("components/schrittkarten.css");
@import url("components/datenzeilen.css");
@import url("components/hinweiskarte.css");
@import url("components/wegtexte.css");
@import url("components/regelchips.css");
@import url("components/dosier-schieber.css");
@import url("components/waschzyklus.css");
@import url("components/anstrich-schnitt.css");
@import url("components/folie-abziehen.css");
@import url("components/wickel-entrollen.css");
@import url("components/biosicherheits-karte.css");
@import url("components/touchpoint-karte.css");
@import url("components/schiene.css");
@import url("components/einordnung.css");
@import url("components/patent-atlas.css");
@import url("components/herkunfts-pfad.css");
@import url("components/botanik-atlas.css");
@import url("components/filter.css");
@import url("components/material-bibliothek.css");
@import url("components/regal.css");
@import url("components/wegevergleich.css");
@import url("components/partnerschafts-architekt.css");
@import url("components/gate-zeitleiste.css");
@import url("components/feld-matrix.css");
@import url("components/formular.css");
@import url("components/integration-designer.css");
@import url("components/artikel.css");
@import url("components/groessenleiter.css");
@import url("components/termin.css");
@import url("components/unternehmen.css");
@import url("components/muster-labor.css");
@import url("components/regulatorik-kompass.css");
@import url("components/log-rechner.css");
@import url("components/inhaltsleiste.css");
@import url("components/glossar-ebene.css");
@import url("components/artikel-filter.css");
@import url("components/glossar-suche.css");
@import url("components/strategien-matrix.css");
@import url("components/technologie-landkarte.css");
@import url("components/hemmhof.css");
@import url("components/normen-navigator.css");
@import url("components/etikett.css");
@import url("components/ph-kurve.css");

/* ═══ Barrierefreiheit (Auftrag 06, 11.10.2026) ═══════════════════════════════════════════════════════════════
   Ändert das Aussehen nur, wo WCAG 2.2 AA es verlangt – alles Sichtbare steht im Block „06 sichtbar“ (1, 9–12):
   Kontraste, Patent-Atlas und Umbruch im schmalen Fenster, Kopfzeile bei mittlerer Breite. Dazu Fokusrahmen (nur bei Tastaturbedienung). Alles Weitere
   greift nur, wenn jemand „Animationen anhalten“ wählt, die Textabstände vergrößert oder die Kopfzeile nicht in eine
   Zeile passt (Klassen am <html>, gesetzt von assets/js/uebergang.js).
   werkzeug/vergleichen-06.mjs nimmt in der Gegenprobe den Block „06 sichtbar“ heraus: Der Rest muss pixelgleich sein. */

/* ▼ 06 sichtbar */
/* 1 Kontrast (1.4.3): Meta-Grau und Türkis für Text mindestens 4,5 : 1 auf Perlmutt, Kalk und Weiß */
:root { --c-tinte-3: #5B6271; --c-ladung-text: #09718C; }
/* Text im Platzhalter-Grau (unter 3 : 1) bekommt das Meta-Grau */
.c-zeitmaschine__skala { color: var(--c-tinte-3); }
.c-footer__leise, .c-reise__stufe .u-mono, .c-kapitelvideo__nr, .c-schritt .u-mono, .c-chat__fuss { color: var(--c-tinte-3); }

/* 9 Patent-Atlas im schmalen Fenster (1.4.10): Bühne und Tafel untereinander wie bei allen Instrumenten.
   Bisher behielt der Atlas unter 1000 px zwei Spalten; die Tafel lag über der Patentkarte. */
@media (max-width: 1000px) { .c-atlas { grid-template-columns: minmax(0, 1fr); } }

/* 10 Text auf Bildern und Filmen (1.4.3): dunklere Kante unter den Anwendungskarten, dunkler Saum um Text auf den
   Karten, den Pflanzen und um das Zitat, Maßstab auf dunkler Pille, kräftigere Siegel und Sprachwahl über dem Film,
   Wort „Wand“ im Anstrich dunkler,
   nicht empfohlene Modelle weniger blass, Etikett „negative Ladung“ im Zellschnitt dunkler, auf dem Handy dunklere
   Kante unter dem Text des Heldenfilms; Sprachwahl und Etikett über dem Heldenfilm auf dunkler Pille, Etiketten
   hinter dem 3D-Querschnitt weniger blass, Bedienhinweis im Molekül-Studio dunkler */
.c-anwendungskarte::after { inset: 20% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-nacht) 0%, transparent) 0%, color-mix(in srgb, var(--c-nacht) 50%, transparent) 40%, color-mix(in srgb, var(--c-nacht) 85%, transparent) 100%); }
.c-siegel--auf-nacht { --_bg: color-mix(in srgb, var(--c-nacht) 72%, transparent); }
.c-schublade__name, .c-schublade__stoff { text-shadow: 0 0 2px var(--c-nacht), 0 0 4px var(--c-nacht), 0 1px 10px color-mix(in srgb, var(--c-nacht) 80%, transparent); }
.c-anwendungskarte__name, .c-anwendungskarte__weg { color: var(--c-weiss); text-shadow: 0 0 2px var(--c-nacht), 0 0 6px color-mix(in srgb, var(--c-nacht) 70%, transparent); }
.c-masstab:not(.c-masstab--tinte) { padding: .3em .6em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-nacht) 60%, transparent); }
.c-warum__zitat p { text-shadow: 0 0 2px color-mix(in srgb, var(--c-schwarz) 55%, transparent), 0 1px 20px color-mix(in srgb, var(--c-schwarz) 35%, transparent); }
.c-anstrich__wandtext { color: #857D70; }
html.is-buehne-voll .c-header:not(.is-offen) .c-header__sprache { background: color-mix(in srgb, var(--c-nacht) 55%, transparent); }
html.is-buehne-voll .c-header:not(.is-offen) .c-header__sprache a:not([aria-current="true"]) { color: var(--c-auf-nacht); }
.c-buehne__titel .c-titel__eyebrow--pille { background: color-mix(in srgb, var(--c-nacht) 55%, transparent); }
.c-querschnitt__etikett.is-zurueck { opacity: .8; }
.c-studio__hinweis { color: var(--c-tinte-2); }
.c-architekt__modell { opacity: .78; }
.c-zellschnitt__label--minus { color: color-mix(in srgb, var(--c-bernstein) 60%, var(--c-tinte)); }
@media (max-width: 47.99rem) {
  .c-buehne__schleier { background: linear-gradient(180deg, color-mix(in srgb, var(--c-nacht) 50%, transparent) 0, transparent 8rem), linear-gradient(0deg, color-mix(in srgb, var(--c-nacht) 90%, transparent) 0%, color-mix(in srgb, var(--c-nacht) 78%, transparent) 35%, color-mix(in srgb, var(--c-nacht) 45%, transparent) 60%, transparent 80%); }
}
/* 11 Umbruch im schmalen Fenster (1.4.10): Das Suchfeld der Fehlerseite darf schmaler werden (bisher ragten Feld,
   Knopf und Text bei 390 px über den Rand), lange Adressen in Quellenlisten brechen um */
.c-grosssuche input { width: 0; }
.c-quellen li { overflow-wrap: anywhere; }
/* Unter 360 px Breite (kleiner als jede gestaltete Breite) brechen auch Überschriften und Beschriftungen um */
@media (max-width: 359.98px) {
  :is(h1, h2, h3, .c-titel__lead, .c-probe__name, .c-reise__stufe, .c-regler__kopf, .c-regler__hilfe) { overflow-wrap: anywhere; }
}
/* 12 Kopfzeile passt nicht in eine Zeile (html.is-kopf-eng, uebergang.js): Menü wie im schmalen Fenster (1.4.4, 1.4.10,
   1.4.12) – bisher verschwand zwischen 1101 und etwa 1260 px die Wortmarke */
html.is-kopf-eng .c-header__nav, html.is-kopf-eng .c-header__rechts .c-knopf { display: none; }
html.is-kopf-eng .c-header__leiste { grid-template-columns: 1fr auto; }
html.is-kopf-eng .c-header__menue { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); background: var(--c-weiss); box-shadow: inset 0 0 0 1px var(--c-kalk-2); color: var(--c-tinte); }
html.is-kopf-eng .c-header__menue .c-icon { width: 1.25rem; height: 1.25rem; }
html.is-kopf-eng .c-header .c-mega:not([hidden]) { display: none; }
/* ▲ 06 sichtbar */

/* 2 Fokus (2.4.7, 1.4.11): Kontur statt Schatten, damit Knöpfe, Chips und Karten mit eigenem Schatten ihn nicht
   verdecken. Liegt genau auf dem bisherigen Ring (2 px Abstand, 2 px breit), nur bei Tastaturbedienung.
   Auf Bildern, Filmen und dunklem Grund (Präparat-Fenster, Kopfzeile über dem Heldenfilm) doppelt: innen Kobalt,
   außen Weiß – hebt sich von hellem und dunklem Grund ab. */
:focus-visible { outline: 2px solid var(--c-kobalt); outline-offset: 2px; }
:is(.c-medium--nacht, .c-instrument__buehne--nacht, .c-werkzeugleiste--nacht, .c-reise__buehne, .c-touchpoint__buehne, .c-medium__ueber) :focus-visible,
html.is-buehne-voll .c-header:not(.is-offen) :focus-visible { outline-color: var(--c-weiss); box-shadow: 0 0 0 2px var(--c-kobalt); }
/* Formularfelder: Der kobaltblaue Rand im Fokus (formular.css) kam bisher nicht an, weil die Grundregel der Felder
   stärker ist; dazu Kontur für Kästchen zum Ankreuzen */
.c-feld input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible { border-color: var(--c-kobalt); }
.c-feld input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--c-kobalt); outline-offset: 2px; }
/* Seitlich scrollende Bereiche: Rahmen innen, sonst schneidet der Rand des Bereichs ihn ab */
:is(.c-tabelle, .c-atlas__text, .c-schiene__spur)[tabindex="0"]:focus-visible { outline-offset: -2px; }

/* 3 Fokus nicht verdeckt (2.4.11): Der Knopf „Fragen an ZCP“ weicht nach oben aus (uebergang.js) */
.c-chat.is-bereit.is-ausweichen .c-chat__starter { transform: translateY(calc(-100% - var(--s-6))); }

/* 4 Partnerschaft: Station mit Knopf im Titel statt Knopf um den Link (4.1.2) – Aussehen wie bisher */
div.c-kapitelvideo__station { cursor: pointer; }
.c-kapitelvideo__knopf { display: block; width: 100%; text-align: right; }

/* 5 „Animationen anhalten“ (html.is-ruhig): wie „Bewegung reduzieren“ im System (base.css, motion.css, buehne.css) */
html.is-ruhig *, html.is-ruhig *::before, html.is-ruhig *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.is-ruhig::view-transition-old(root), html.is-ruhig::view-transition-new(root) { animation: none !important; }
html.is-ruhig [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
html.is-ruhig [data-reveal] img, html.is-ruhig [data-reveal] video, html.is-ruhig .c-wort__innen { transform: none !important; opacity: 1 !important; }
html.is-ruhig .c-buehne { height: auto; }
html.is-ruhig .c-buehne__buehne { position: relative; }
html.is-ruhig .c-weltkarte__bogen { stroke-dashoffset: 0; }

/* 6 Kopfzeile passt nicht in eine Zeile: siehe Block „06 sichtbar“, Nr. 12 */

/* 7 Umbruch (1.4.10): siehe Block „06 sichtbar“, Nr. 11 */

/* 8 Vergrößerte Textabstände (html.is-abstand, 1.4.12): Text darf umbrechen und Kästen wachsen mit */
html.is-abstand :is(h1, h2, h3, h4, p, li, dt, dd, th, td, a, button, label, strong, em, span) { overflow-wrap: anywhere; }
html.is-abstand .c-header__leiste :is(a, button, span) { white-space: nowrap; overflow-wrap: normal; } /* Kopfzeile: lieber Menüknopf (is-kopf-eng) als Wörter brechen */
html.is-abstand .c-status { white-space: normal; }
html.is-abstand .c-anwendungskarte:is(:hover, :focus-visible) .c-anwendungskarte__weg { max-height: 6em; }
@media (max-width: 640px) { html.is-abstand .c-anwendungskarte__weg { max-height: 6em; } }
html.is-abstand .c-buehne { height: auto; }
html.is-abstand .c-buehne__buehne { position: relative; height: auto; }
html.is-abstand .c-buehne__medium, html.is-abstand .c-buehne__medium .c-medium__rahmen { height: auto; }
html.is-abstand .c-buehne__inhalt { position: relative; inset: auto; min-height: 100svh; }