/* KUKANILEA Datei-Trias: gemeinsame Oberflaeche (Reader, Konverter, Editor)
 *
 * Quelle: shared/kukanilea-datei-oberflaeche/basis.css, verteilt von
 * scripts/ops/sync_geteilte_kerne.py. Nicht in einer Kopie aendern.
 *
 * Tokens, Knoepfe, Kopf (.re-kopf), Landing, Garantie, Ablage, Formate,
 * Saeulen, Ablauf, FAQ, Karussell, Fuss, Meldungen, Befehlspalette.
 *
 * Kontraste (gemessen gegen die Flaechenfarbe, WCAG 2.2 SC 1.4.6, AAA 7:1):
 *   hell   Text #0f172a 17,8 · gedaempft #334155 10,4 · Akzent #075261 8,9 · Weiss auf Akzent 8,9
 *   dunkel Text #e8eef4 15,9 · gedaempft #c3cdd8 11,2 · Akzent #8fd6e2 11,0 · Akzenttext #04262d auf Akzent 10,6
 */

:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --mut: #334155;
  --linie: #cbd5e1;
  --linie-2: #94a3b8;
  --akzent: #075261;
  --akzent-2: #053e4a;
  --akzent-text: #ffffff;
  --akzent-weich: #e1f0f2;
  --gut: #14532d; --gut-bg: #dcfce7;
  --warn: #7c2d12; --warn-bg: #ffedd5;
  --fehler: #7f1d1d; --fehler-bg: #fee2e2;
  --fokus: #b45309;
  --markiert: #fde68a;
  --markiert-aktiv: #f59e0b;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .22);
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kopf-h: 60px;
  /* Namen der uebernommenen E-Rechnungsregeln (vom XRechnung-Viewer) */
  --ink-3: var(--mut); --ink-4: var(--mut); --line: var(--linie); --line-2: var(--linie-2);
  --paper: var(--flaeche-2); --blue-2: var(--akzent); --blue-soft: var(--akzent-weich);
  --green: var(--gut); --green-soft: var(--gut-bg); --warn-ink: var(--warn); --warn-soft: var(--warn-bg);
  --radius-sm: 8px; --font-mono: var(--mono);
  --kuk-wm-rand: 36pt; --kuk-wm-oben: 20pt; --kuk-wm-unten: 19pt;
  --kuk-wm-groesse: 6pt; --kuk-wm-deckkraft: 0.25; --kuk-wm-farbe: #64748b;
}
html[data-farbschema="dunkel"] {
  color-scheme: dark;
  --bg: #0b1117; --flaeche: #111a22; --flaeche-2: #16212b;
  --ink: #e8eef4; --ink-2: #d9e2ea; --mut: #c3cdd8;
  --linie: #2c3a47; --linie-2: #4a5b6b;
  --akzent: #8fd6e2; --akzent-2: #b5e5ed; --akzent-text: #04262d; --akzent-weich: #13323a;
  --gut: #bbf7d0; --gut-bg: #0f2e1c; --warn: #fed7aa; --warn-bg: #3a2210; --fehler: #fecaca; --fehler-bg: #3b1515;
  --fokus: #fbbf24; --markiert: #7c5c06; --markiert-aktiv: #b45309;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--akzent); text-underline-offset: 2px; }
a:hover { color: var(--akzent-2); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
kbd { border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--flaeche); }

/* Skip-Link: nimmt keinen Platz, bis er fokussiert wird */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--akzent); color: var(--akzent-text); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { left: 8px; }

/* ── Knoepfe (44 px Mindesthoehe ueberall: WCAG 2.5.5 AAA) ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink);
  font: 600 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--akzent); color: var(--akzent-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.btn-primaer:hover { background: var(--akzent-2); border-color: var(--akzent-2); color: var(--akzent-text); }
.btn-flach { border-color: transparent; background: transparent; }
.btn-flach:hover { background: var(--akzent-weich); }
.btn-sym { padding: 0; width: 44px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-sm { font-size: 14px; }

/* ── Kopf (.re-kopf, gemeinsames Leitsystem mit rechnung-erstellen) ───── */
.re-kopf {
  position: sticky; top: 0; z-index: 40; min-height: var(--kopf-h);
  display: flex; align-items: center; gap: 14px; padding: 8px clamp(12px, 3vw, 28px);
  background: color-mix(in srgb, var(--flaeche) 94%, transparent); border-bottom: 1px solid var(--linie);
  box-shadow: inset 0 3px 0 var(--or-kennfarbe, var(--akzent));
  backdrop-filter: blur(8px);
}
.re-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.re-marke span { display: flex; flex-direction: column; line-height: 1.1; }
.re-marke strong { font-size: 16px; }
.re-marke small { font-size: 11px; letter-spacing: .08em; color: var(--mut); }
.or-marke-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2)); }
.or-marke-symbol svg { width: 20px; height: 20px; }
.re-nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.re-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 15px; white-space: nowrap; }
.re-nav a:hover { background: var(--akzent-weich); }
.re-nav a[aria-current="page"] { background: var(--akzent-weich); color: var(--akzent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--akzent); }
.re-nav-symbol { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2)); }
.re-nav-symbol svg { width: 15px; height: 15px; }
.re-kopf-aktionen { display: flex; gap: 6px; align-items: center; }
.or-kbd-hinweis { font-size: 13px; color: var(--mut); }
@media (max-width: 720px) {
  .re-nav { display: none; }
  .re-kopf-aktionen .or-nur-breit { display: none; }
}

/* ── Landing ──────────────────────────────────────────────────────── */
.or-breit { max-width: 1120px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); }
.or-hero { padding: clamp(24px, 5vw, 56px) 0 12px; }
.or-kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--akzent); background: var(--akzent-weich); padding: 4px 12px; border-radius: 999px; }
.or-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; margin: 14px 0 12px; letter-spacing: -.01em; }
.or-lede { font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); max-width: 62ch; margin: 0 0 22px; }

.or-garantie {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 14px 16px;
  background: var(--gut-bg); color: var(--gut); border: 1px solid color-mix(in srgb, var(--gut) 35%, transparent); border-radius: var(--radius);
}
.or-garantie svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.or-garantie strong { display: block; font-size: 17px; }
.or-garantie p { margin: 2px 0 0; font-size: 15px; }

.or-ablage {
  position: relative; display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(24px, 5vw, 44px) 18px; border: 2px dashed var(--linie-2); border-radius: 16px; background: var(--flaeche);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.or-ablage:hover, .or-ablage.ist-drueber { border-color: var(--akzent); background: var(--akzent-weich); }
.or-ablage:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.or-ablage input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.or-ablage-symbol { width: 44px; height: 44px; color: var(--akzent); }
.or-ablage-titel { font-size: 20px; font-weight: 700; margin: 0; }
.or-ablage-hinweis { margin: 0; color: var(--mut); font-size: 15px; }
.or-ablage .btn { pointer-events: none; }
.or-status { min-height: 1.6em; margin: 10px 0 0; font-size: 15px; }
.or-status[data-zustand="fehler"] { color: var(--fehler); font-weight: 600; }
.or-status[data-zustand="laeuft"] { color: var(--mut); }

.or-beispiele { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 15px; color: var(--mut); }

.or-abschnitt { padding: clamp(28px, 5vw, 52px) 0 0; }
.or-abschnitt h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 6px; }
.or-abschnitt > .or-breit > p.or-einleitung { color: var(--mut); margin: 0 0 18px; max-width: 70ch; }
.or-formate { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.or-format { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; }
.or-format h3 { margin: 0 0 4px; font-size: 16px; }
.or-format p { margin: 0 0 8px; color: var(--mut); font-size: 14.5px; }
.or-format ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.or-format li { font: 600 12.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; background: var(--akzent-weich); color: var(--akzent); }

.or-saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.or-saeule { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; }
.or-saeule h3 { margin: 0 0 4px; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.or-saeule p { margin: 0; color: var(--mut); font-size: 14.5px; }
.or-ablauf { counter-reset: schritt; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.or-ablauf li { counter-increment: schritt; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 14px 56px; position: relative; font-size: 15px; }
.or-ablauf li::before { content: counter(schritt); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--akzent-text); font-weight: 700; }
.or-ablauf strong { display: block; }

.or-faq { display: grid; gap: 8px; max-width: 860px; }
.or-faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.or-faq summary { cursor: pointer; list-style: none; padding: 12px 44px 12px 16px; min-height: 44px; font-weight: 700; position: relative; }
.or-faq summary::-webkit-details-marker { display: none; }
.or-faq summary::after { content: "+"; position: absolute; right: 16px; top: 10px; font-size: 22px; color: var(--akzent); }
.or-faq details[open] summary::after { content: "–"; }
.or-faq details > div { padding: 0 16px 14px; color: var(--ink-2); }
.or-faq details > div p { margin: 0 0 8px; }

.or-karussell-kopf { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.or-karussell-knoepfe { display: flex; gap: 6px; }
.or-karussell { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-top: 12px; overscroll-behavior-x: contain; }
.or-karussell > div { scroll-snap-align: start; display: grid; }
.or-karussell a { display: grid; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 44px; }
.or-karussell a:hover { border-color: var(--akzent); }
.or-karussell a strong { color: var(--akzent); }
.or-karussell a span { color: var(--mut); font-size: 14.5px; }

.or-fuss { margin-top: 48px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.or-fuss .or-breit { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; font-size: 14.5px; color: var(--mut); }
.or-fuss nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.or-fuss a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }



/* Meldungen (Toast) */
.or-toast { position: fixed; z-index: 60; right: 16px; bottom: 16px; max-width: min(460px, calc(100vw - 32px)); display: grid; gap: 8px; }
.or-toast-meldung { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--flaeche); box-shadow: var(--schatten); font-size: 15px; }
.or-toast-meldung .btn { min-height: 40px; background: var(--flaeche); color: var(--ink); border-color: var(--flaeche); }
.or-toast-meldung[data-art="fehler"] { background: var(--fehler); }

/* Befehlspalette */
dialog.or-palette { width: min(640px, calc(100vw - 24px)); max-height: min(70dvh, 560px); padding: 0; border: 1px solid var(--linie-2); border-radius: 16px; background: var(--flaeche); color: var(--ink); box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); margin-top: 12vh; }
dialog.or-palette::backdrop { background: rgba(15, 23, 42, .5); }
.or-palette-eingabe { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--linie); background: transparent; color: var(--ink); font: 18px var(--sans); }
.or-palette-eingabe:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--fokus); }
.or-palette ul { list-style: none; margin: 0; padding: 6px; overflow: auto; max-height: calc(min(70dvh, 560px) - 100px); }
.or-palette li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.or-palette li[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); }
.or-palette li small { opacity: .85; }
.or-palette li[aria-disabled="true"] { opacity: .5; }
.or-palette-fuss { padding: 8px 14px; font-size: 13px; color: var(--mut); border-top: 1px solid var(--linie); }

/* Text-Editor (editor-werkzeuge.mjs): Reader und Online-Editor */
.or-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; }
.or-editor.nur-text { grid-template-columns: minmax(0, 1fr); }
.or-editor textarea { width: 100%; min-height: 100%; height: 100%; resize: none; border: 0; border-right: 1px solid var(--linie); padding: 14px 16px; font: calc(14px * var(--or-zoom, 1)) / 1.55 var(--mono); background: var(--flaeche); color: var(--ink); tab-size: 2; }
.or-editor textarea:focus-visible { outline-offset: -3px; }
.or-editor-vorschau { overflow: auto; min-height: 0; }
.or-editor-status { font-size: 13.5px; padding: 6px 12px; }
.or-editor-status[data-ok="nein"] { background: var(--fehler-bg); color: var(--fehler); }
.or-editor-status[data-ok="ja"] { background: var(--gut-bg); color: var(--gut); }
.or-editor-status[data-ok="hinweis"] { background: var(--warn-bg); color: var(--warn); }
.or-editor-befund { margin: 2px 0; }
.or-editor-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.or-editor-hilfe { margin-left: auto; font-size: 13px; color: var(--mut); }
.or-editor-suche { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.or-editor-suche[hidden] { display: none; }
.or-editor-feld { min-height: 44px; padding: 0 10px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink); font: 15px var(--sans); min-width: 0; flex: 1 1 140px; }
.or-editor-haken { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; }
.or-editor-zahl { font-size: 14px; color: var(--mut); }
.or-editor-raster { border-collapse: collapse; font-size: 14px; }
.or-editor-raster th, .or-editor-raster td { border: 1px solid var(--linie); padding: 0; }
.or-editor-raster .or-editor-nr { padding: 0 8px; color: var(--mut); font-weight: 400; background: var(--flaeche-2); text-align: right; }
.or-editor-raster input { width: 12ch; min-width: 100%; min-height: 36px; border: 0; padding: 4px 8px; background: transparent; color: var(--ink); font: 14px var(--sans); }
.or-editor-raster .ist-kopf input { font-weight: 700; background: var(--akzent-weich); }
.or-editor-raster input.fehlt { background: var(--fehler-bg); }
.or-editor-raster input:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
@media (pointer: coarse) { .or-editor-raster input { min-height: 44px; } }
@media (max-width: 959.98px) { .or-editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(40vh, 1fr) auto; } .or-editor textarea { border-right: 0; border-bottom: 1px solid var(--linie); } }

/* Feinschliff der Startseiten (2026-09-28) -- fuer Datei-Viewer, Konverter und Editor.
   Motion-System: Dauer <= 320 ms, Weg <= 12 px, nur transform/opacity/Farben, keine
   Endlosschleife, kein Inhalt haengt an einer Animation. Unter reduzierter Bewegung
   bleiben nur Farbwechsel. */
:root { --weich: cubic-bezier(.2, .8, .2, 1); --federnd: cubic-bezier(.34, 1.56, .64, 1); }

/* Ablage: Milchglas ueber einem leichten Akzentschimmer; beim Darueberfahren/Ziehen hebt sie sich */
.or-ablage {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--akzent) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--flaeche) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .15s, background-color .15s, transform .2s var(--weich), box-shadow .2s var(--weich);
}
.or-ablage:hover, .or-ablage.ist-drueber {
  border-style: solid; transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--akzent) 35%, transparent);
}
.or-ablage-symbol { transition: transform .2s var(--federnd); }
.or-ablage:hover .or-ablage-symbol, .or-ablage.ist-drueber .or-ablage-symbol { transform: translateY(-3px) scale(1.1); }

/* Garantie kompakter: eine Zeile Aussage, der Beleg darunter */
.or-garantie { padding: 12px 14px; }
.or-garantie strong { font-size: 16px; }
.or-garantie p { font-size: 14.5px; }

/* Beispiel-Knoepfe: risikolos ausprobieren -- sichtbar anhebbar */
/* Kein Anheben: ein Knopf, der sich unter dem Zeiger bewegt, verliert an seiner Kante den
   Hover und faellt zurueck -- das zittert (gemessen: Playwright fand ihn nie "stabil"). */
.or-beispiele .btn { transition: border-color .15s, box-shadow .15s; }
.or-beispiele .btn:hover { box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .35); }

/* Knopfdruck spuerbar */
.btn:active:not([disabled]) { transform: scale(.96); transition: transform 80ms; }

/* Formatkarten: Farbsaum der Dateifamilie, Mini-Vorschau, Anheben */
.or-format { position: relative; transition: transform .2s var(--weich), box-shadow .2s var(--weich), border-color .2s; }
.or-format::before { content: ""; position: absolute; inset: -1px -1px auto; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: var(--familie, var(--akzent)); }
/* Die Karte hebt sich um 4 px -- die Trefferflaeche reicht 6 px darunter, damit der Zeiger an
   der Unterkante auf der Karte bleibt, statt Hover und Absenken im Wechsel auszuloesen. */
.or-format::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; }
.or-format:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--familie, var(--akzent)) 45%, var(--linie)); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .35); }
.or-format-vorschau { display: block; width: 100%; height: 64px; margin: 2px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--familie, var(--akzent)) 8%, var(--flaeche-2)); }
.or-format-vorschau * { vector-effect: non-scaling-stroke; }
.or-format-vorschau .v-blatt { fill: var(--flaeche); stroke: var(--linie-2); }
.or-format-vorschau .v-zeile { fill: var(--linie-2); }
.or-format-vorschau .v-akzent { fill: var(--familie, var(--akzent)); }
.or-format-vorschau .v-gitter { fill: none; stroke: var(--familie, var(--akzent)); stroke-opacity: .45; }
.or-format-aktion { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.or-format-aktion span { transition: transform .15s var(--weich); }
.or-format:hover .or-format-aktion span, .or-format-aktion:focus-visible span { transform: translateX(3px); }
[data-familie="pdf"] { --familie: #d23f31; } [data-familie="erechnung"] { --familie: #0e7a8a; }
[data-familie="dokument"] { --familie: #2f6fd8; } [data-familie="tabelle"] { --familie: #1f8a4c; }
[data-familie="ebook"] { --familie: #8a5a1f; } [data-familie="bild"] { --familie: #9a4fb5; }
[data-familie="code"] { --familie: #5b6472; } [data-familie="archiv"] { --familie: #a36a00; }
html[data-farbschema="dunkel"] [data-familie="pdf"] { --familie: #ff8a7a; } html[data-farbschema="dunkel"] [data-familie="dokument"] { --familie: #8db4ff; }
html[data-farbschema="dunkel"] [data-familie="tabelle"] { --familie: #6fd69a; } html[data-farbschema="dunkel"] [data-familie="code"] { --familie: #aab4c3; }

/* Ablauf als Kette: Verbindungslinie, einmalige Betonung beim Hereinscrollen (Klasse von JS;
   ohne JS steht die Kette vollstaendig und ruhig da) */
.or-ablauf li { transition: border-color .3s var(--weich), box-shadow .3s var(--weich); }
@media (min-width: 880px) {
  .or-ablauf li:not(:last-child)::after { content: ""; position: absolute; top: 28px; right: -12px; width: 12px; height: 2px; background: var(--linie-2); }
}
.or-ablauf.ist-sichtbar li { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 12%, transparent); }
.or-ablauf.ist-sichtbar li:nth-child(2) { transition-delay: 60ms; } .or-ablauf.ist-sichtbar li:nth-child(3) { transition-delay: 120ms; } .or-ablauf.ist-sichtbar li:nth-child(4) { transition-delay: 180ms; }

/* Befehlspalette und Dialoge: Milchglas-Hintergrund, kurzer federnder Eintritt */
dialog.or-palette::backdrop { background: rgba(15, 23, 42, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.or-palette[open] { animation: or-dialog-ein .22s var(--federnd); }
@keyframes or-dialog-ein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.or-palette-eingabe:focus-visible { box-shadow: inset 0 -3px 0 var(--fokus), 0 0 0 3px color-mix(in srgb, var(--fokus) 25%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .or-ablage, .or-ablage-symbol, .or-format, .or-format-aktion span, .or-ablauf li, a.or-pill { transition: border-color .15s, background-color .15s, box-shadow .15s !important; }
  .or-ablage:hover, .or-ablage.ist-drueber, .or-format:hover, a.or-pill:hover,
  .or-ablage:hover .or-ablage-symbol, .or-ablage.ist-drueber .or-ablage-symbol, .or-format:hover .or-format-aktion span, .btn:active:not([disabled]) { transform: none !important; }
  dialog.or-palette[open] { animation: none; }
}

/* Pruefsummen im Infobereich */
.or-pruefsummen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.or-pruefsummen h3 { margin: 0 0 8px; font-size: 15px; }
.or-pruefsummen progress { width: 100%; height: 8px; accent-color: var(--akzent); }
.or-ps-liste { margin: 0; display: grid; gap: 4px; }
.or-ps-liste dt { font-size: 13px; color: var(--mut); margin-top: 6px; }
.or-ps-liste dd { margin: 0; display: flex; gap: 6px; align-items: center; }
.or-ps-liste code { flex: 1; min-width: 0; font: 12px/1.45 var(--mono); word-break: break-all; color: var(--ink); }
.or-ps-label { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; color: var(--mut); }
.or-ps-feld { min-height: 44px; padding: 0 10px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--ink); font: 13px var(--mono); }
.or-ps-ergebnis { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.or-ps-ergebnis[data-ok="ja"] { color: var(--gut); }
.or-ps-ergebnis[data-ok="nein"] { color: var(--fehler); }

/* ── Studio-Schliff (2026-09-28): ruhige Flaechen statt Rahmenknoepfe ──
   Gilt fuer den gemeinsamen Text-Editor (Viewer "Bearbeiten", Online-Editor)
   und den Pruefsummen-Block. 44 px Mindesthoehe bleiben (WCAG 2.5.5 AAA) --
   leichter wird es ueber Flaeche und Rahmen, nicht ueber kleinere Ziele. */
.or-editor-leiste .btn { border-color: var(--linie); border-radius: 8px; background: var(--flaeche); font-size: 14px; padding: 0 12px; }
.or-editor-leiste .btn:hover { background: var(--akzent-weich); border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie)); color: var(--ink); }
.or-editor textarea { padding: 20px 24px; line-height: 1.6; }
.or-editor textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.or-ps-liste dt { display: flex; justify-content: space-between; gap: 8px; }
.or-ps-merk { color: var(--gut); font-weight: 700; }
.or-ps-chip { display: block; width: 100%; min-height: 44px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); color: var(--ink); text-align: left; cursor: copy; }
.or-ps-chip:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); background: var(--akzent-weich); }
.or-ps-chip:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.or-ps-chip code { font: 12px/1.45 var(--mono); word-break: break-all; }
@media (prefers-reduced-motion: no-preference) {
  .or-editor-leiste .btn { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
  .or-editor-leiste .btn:hover { transform: translateY(-1px); }
}