/* archiv.css -- Auftrag 25 Teil U6 (24.10.2026): Ansichten «Archiv» und «Datenbank». Präfix .ar-… (gemeinsam) und .db-…
 * (Tabelle). Tippflächen ≥ 44 px. Zahlen mit fester Breite, damit beim Filtern nichts springt. */
.ar { --ar-akzent: var(--farbe-akzent, #2f6fb0); --ar-rand: #d5dbe1; --ar-leise: #5b6670; --ar-warn: #9a5b00; --ar-ok: #2e7d32;
  max-width: 1400px; margin: 0 auto; padding: 0 0 48px; }
.ar-titel { margin: 8px 0 4px; font-size: 1.35rem; }
/* 25d V3A-02: Titel, Suche und «Filter ▾» in einer Zeile; Reiter und Zahl in einer Zeile -- die ersten Ergebnisse stehen
 * ohne Bildlauf unter der klebenden Navigation. */
.ar-suchzeile > .ar-titel { flex: 0 0 auto; margin: 0 4px 0 0; align-self: center; font-size: 1.25rem; white-space: nowrap; }
.ar-reiterzeile { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; margin: 6px 0 0; border-bottom: 2px solid var(--ar-rand); }
.ar-reiterzeile > .ar-reiter { margin: 0; border-bottom: 0; }
.ar-reiterzeile > .ar-status { flex: 0 0 9em; margin: 0 0 0 auto; align-self: center; text-align: right; font-variant-numeric: tabular-nums; }   /* feste Breite: der Umbruch hängt nie vom Text ab (nichts springt) */
.db-statuszeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 44px; margin: 2px 0; }
.db-statuszeile > .ar-status { margin: 0; }
.db-statuszeile > .db-blaettern { margin: 0; }
/* 25b Z-03/Z-11/F08: Sprungziele landen unter der klebenden Navigation (Höhe gemessen in archiv.js navKante). */
.ar-zeile, .ar-gruppe__kopf, .ar-az__kopf, .ar-thema, .db-tabelle tr[data-zeile],
#unterrichtsmaterial-kacheln-liste .master-detail__inhalt { scroll-margin-top: var(--ar-nav-kante, 0px); }
.db-tabelle tr[data-zeile] { scroll-margin-top: 96px; }
/* Nicht sticky: die Hauptnavigation der App klebt schon oben (≈230 px auf dem iPad hochkant) -- ein zweiter klebender
 * Kopf rutschte darunter, und der Finger traf den Reiter dahinter. «/» und Strg+K holen die Suche jederzeit. */
.ar-kopf { padding: 6px 0 4px; border-bottom: 1px solid var(--ar-rand); }
.ar-suchzeile { display: flex; gap: 8px; align-items: stretch; }
/* 25b F04: «Filter ▾» neben der Suche; die Chips darunter sind standardmässig zu. */
.ar-filterknopf { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.ar-filterknopf.is-aktiv { border-color: var(--ar-akzent); color: var(--ar-akzent); font-weight: 600; }
.ar-filterknopf[aria-expanded="true"] > .ar-pfeil { transform: rotate(180deg); }
.ar-chips[hidden] { display: none; }
.ar-suche { flex: 1 1 auto; min-height: 48px; font-size: 1.05rem; padding: 0 14px; border: 2px solid var(--ar-rand); border-radius: 10px; box-sizing: border-box; min-width: 0; }
.ar-suche:focus { outline: none; border-color: var(--ar-akzent); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ar-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ar-rand); border-radius: 22px;
  background: #fff; font: inherit; font-size: .92rem; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ar-chip[aria-pressed="true"] { background: var(--ar-akzent); border-color: var(--ar-akzent); color: #fff; }
.ar-zahl { display: inline-block; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; opacity: .8; font-size: .85em; }
.ar-fachpunkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; vertical-align: middle; }
.ar-reiter { display: flex; gap: 4px; margin: 8px 0 0; border-bottom: 2px solid var(--ar-rand); }
.ar-reiter__knopf { min-height: 48px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; touch-action: manipulation; }
.ar-reiter__knopf.is-aktiv { border-bottom-color: var(--ar-akzent); color: var(--ar-akzent); }
.ar-leise { color: var(--ar-leise); font-size: .9rem; margin: 6px 0; }
.ar-liste { overflow-anchor: none; }
.ar-gruppe { margin: 4px 0; }
.ar-gruppe__kopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-left: 5px solid var(--fach-farbe, var(--ar-rand));
  background: #f4f6f8; font: inherit; font-weight: 600; text-align: left; cursor: pointer; border-radius: 6px; touch-action: manipulation; }
.ar-gruppe--sj > .ar-gruppe__kopf, .ar-gruppe--teil > .ar-gruppe__kopf, .ar-gruppe--zusatz > .ar-gruppe__kopf { background: #fafbfc; font-weight: 600; border-left-width: 3px; }
.ar-gruppe__name { flex: 1 1 auto; min-width: 0; }
.ar-gruppe__zahl { color: var(--ar-leise); font-weight: 400; font-variant-numeric: tabular-nums; }
.ar-pfeil { display: inline-block; width: 1em; transition: none; }
.ar-gruppe__kopf[aria-expanded="true"] > .ar-pfeil { transform: rotate(90deg); }
.ar-gruppe__koerper { padding-left: 12px; }
.ar-sem { margin: 6px 0 2px; font-size: .95rem; color: var(--ar-leise); font-weight: 600; }
.ar-thema { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; }
.ar-thema__knopf { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ar-akzent); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.ar-zeile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px 4px 0; border-bottom: 1px solid #eef1f4; cursor: pointer; border-radius: 6px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ar-zeile:hover { background: #f6f8fb; }
.ar-zeile:focus-visible, .ar-zeile:focus { outline: 2px solid var(--ar-akzent); outline-offset: -2px; }
.ar-zeile--ziel { background: #fff7d6; }
.ar-fachmarke { align-self: stretch; width: 5px; border-radius: 3px; flex: 0 0 5px; }
.ar-zeile__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.ar-zeile__titel { font-weight: 600; overflow-wrap: anywhere; }
.ar-zeile__meta { color: var(--ar-leise); font-size: .88rem; overflow-wrap: anywhere; }
.ar-marken { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ar-marke { font-size: .82rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.ar-marke--ok { color: var(--ar-ok); background: #e8f5e9; }
.ar-marke--warn { color: var(--ar-warn); background: #fff3e0; }
.ar-zeile__knoepfe { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.ar-ikon { width: 44px; height: 44px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 1.15rem; cursor: pointer; touch-action: manipulation; padding: 0; }
.ar-ikon:hover { border-color: var(--ar-rand); background: #fff; }
.ar-ikon--fav[aria-pressed="true"] { color: #c58b00; }
mark.ar-treffer { background: #ffe066; color: inherit; padding: 0; border-radius: 2px; }
.ar-leer { padding: 18px 0; }
.ar-knopf { min-height: 44px; padding: 0 14px; border: 1px solid var(--ar-rand); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; touch-action: manipulation; }
.ar-knopf:disabled { opacity: .45; cursor: default; }
.ar-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ar-az__knopf { min-width: 44px; min-height: 44px; border: 1px solid var(--ar-rand); border-radius: 8px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ar-az__kopf { margin: 10px 0 2px; color: var(--ar-leise); }
.ar-info { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: min(92vw, 640px); padding: 10px 16px; border-radius: 10px;
  background: #1f2933; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); pointer-events: none; opacity: 0; visibility: hidden; }
.ar-info--an { opacity: 1; visibility: visible; }
.ar-info--warn { background: #8a4b00; }
.ar-unsichtbar { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; }

/* ---------- Datenbank ---------- */
.db-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 2px; }
.db-wahl, .db-name { min-height: 44px; padding: 0 10px; border: 1px solid var(--ar-rand); border-radius: 8px; background: #fff; font: inherit; box-sizing: border-box; max-width: 100%; }
.db-name { width: 13em; }
.db-spalten[hidden] { display: none; }   /* 25b F05: der Knopf «Spalten» klappt wirklich zu */
.db-spalten { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border: 1px solid var(--ar-rand); border-radius: 8px; margin: 4px 0; }
.db-spalten__eintrag { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.db-spalten__eintrag input { width: 22px; height: 22px; }
/* 25b F17: eigener Rollbereich mit Höhe -- darin klebt der Spaltenkopf; die Seite darüber bleibt stehen.
 * 25d V3A-01: die Höhe setzt datenbank.js gemessen (rahmenHoehe); das hier ist nur der Anfangswert. */
.db-rahmen { overflow: auto; overflow-anchor: none; -webkit-overflow-scrolling: touch; max-height: calc(100vh - var(--ar-nav-kante, 120px) - 8px); min-height: 160px; overscroll-behavior: contain; }
/* 25b F10: feste Spaltenbreiten (colgroup aus datenbank.js) */
.db-tabelle { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .92rem; }
.db-tabelle td, .db-tabelle th { overflow-wrap: anywhere; }
.db-tabelle th, .db-tabelle td { padding: 4px 6px; border-bottom: 1px solid #eef1f4; text-align: left; vertical-align: middle; }
.db-tabelle thead th { background: #f4f6f8; position: sticky; top: 0; z-index: 2; }
.db-tabelle thead tr.db-filterzeile th { top: 52px; }
.db-sort { display: inline-flex; gap: 4px; align-items: center; min-height: 44px; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; white-space: nowrap; }
.db-pfeil { display: inline-block; width: 1em; color: var(--ar-leise); }
.db-filter { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; border: 1px solid var(--ar-rand); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 16px; }   /* 25b F13: 44 px, 16 px (kein Zoom auf dem iPad) */
.db-tabelle tbody tr[data-zeile] { cursor: pointer; }
.db-tabelle tbody tr[data-zeile]:hover { background: #f6f8fb; }
.db-tabelle tbody tr[data-zeile]:focus { outline: 2px solid var(--ar-akzent); outline-offset: -2px; }
.db-tabelle td[data-spalte="titel"] { font-weight: 600; }
.db-gruppe th { background: #e9eef3; font-weight: 700; padding: 8px 6px; }
.db-aktionen { white-space: nowrap; }
.db-aktionen .ar-zeile__knoepfe { gap: 2px; }
.db-blaettern { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 6px 0; min-height: 44px; }
/* 25d: kurze Liste (z. B. Reiter «Beurteilung») = Seite kürzer als das Fenster -- ohne Rinne verschwände die Bildlaufleiste,
 * die Breite wüchse und die Chips brächen anders um (Layoutsprung 0.16 bei 820×1180). */
html:has(#view-archiv:not([hidden])), html:has(#view-datenbank:not([hidden])) { scrollbar-gutter: stable; }
.ar.db { padding-bottom: 8px; }   /* 25d V3A-01: unter dem Rahmen nur die Blätterleiste -- mehr Höhe für die Tabelle */
@media (max-width: 900px) { .ar-zeile { flex-wrap: wrap; } .ar-zeile__knoepfe { margin-left: auto; } }