/* inchstones_basis.css – inchstones.ch Basis · V1.17.0
   V1.17.0: Einträge «Teilen …» und «nur mit JavaScript» im Menü in voller Breite; .nur-ohne-teilen (verborgen, wo das Gerät teilen kann, z. B. «Text kopieren» als Ersatz).
   V1.16.0: Listen im Text (.text-liste, basis_text_html), Zeilen in Knöpfen (.text-zeile, .text-stufe-1 … 3; basis_text_inline_html), Knopf «Text einfügen» mit Vorschau (.text-einfuegen).
   V1.15.0: Vorschau in der Liste der Ablagezone (.basis-dropzone-vorschau 64 px, .basis-dropzone-typ, Art und Grösse) und grosse Ansicht (.basis-vorschau-dialog).
   V1.14.0: Liste der gesammelten Dateien unter der Ablagezone (.basis-dropzone-dateien, Mülleimer 44 px).
   V1.13.0: Info-Knopf (.info-sym, .info-knopf; basis_info_symbol): wie das Hilfe-Symbol, aber mit eigenem Inhalt (Symbol, Zahl, Name).
   V1.12.2: PIN-Feld .pin-feld (basis_zugang.php 1.0.1): Ziffern als Punkte, ohne Passwortfeld (kein Vorschlag «starkes Passwort»).
   V1.12.1: Barrierefreiheit (Sehbehinderung): inaktive Reiter in --text-muted (4,06:1 → 5,2:1), Fokusrahmen der Reiter, des Abmelden-Knopfs und der Ablagezone in --akzent; Bewegung abschaltbar (prefers-reduced-motion) (orange 2,45:1 → 5,1:1).
   V1.12.0: Ablagezone für Dateien (.basis-dropzone).
   V1.11.1: Eingabefelder in .field: alle Texttypen (url, number, email, search, tel, time, datetime-local, month, week, ohne type) in Standardgrösse (48 px),
            nicht nur text, date, password. Neue Eingabetypen gehören hierher (Test tools/test_basis_felder.php).
   V1.11.0: Gruppen von Kacheln (.gruppe-titel, .card-klein), Trenner in der Reiterleiste (.tab-trenner).
   V1.10.0: Farbauswahl (.farbwahl-pop, .farbwahl-feld, .fw-f0 … .fw-f13).
   V1.9.0: Hilfe-Symbol (.hilfe-sym, .hilfe-knopf, .hilfe-text), Schrittanzeige (.schritte), Speicherstatus (.status-punkt), Leerhinweis (.leer-hinweis), feste Aktionsleiste auf dem Handy (.aktionsleiste).
   V1.8.0: Link teilen (.link-teilen, .js-teilen: «Teilen …» nur mit html.teilen-ok).
   V1.7.0: Icon-Buttons (.icon-btn, .icon-gruppe), Menü «⋯» (details.menue), Listenkopf (.ov-bar, .ov-count), Filter-Pillen (.subnav.pills),
           .nowrap, .badge-grau, .aktionen-zelle: aus dem Notentool übernommen (dort bleiben dieselben Regeln, bis das Notentool auf die Basis umgestellt wird).
   V1.6.0: Code-Auswahl (.code-auswahl): grosse, scrollbare Liste.
   V1.5.0: Admin-Bereich mit kleinerer Grundschrift (html.admin = 14 px statt 16 px); Knöpfe bleiben gleich hoch.
   V1.4.0: .js-nur (nur mit JavaScript sichtbar, z. B. Kopieren, QR-Code), .qr-feld (QR-Code im Admin-Bereich).
   V1.3.1: Reiter (.tab-bar/.tab-btn) wie die frühere ensa-Seite: klarer oranger Unterstrich (3 px) beim aktiven Reiter,
           inaktive Reiter hellgrau. Unterstrich wird innen gezeichnet, damit ihn das seitliche Scrollen nicht abschneidet.
   V1.3.0: Abmelden-Knopf in der Navigation (.nav-form, .nav-abmelden), gelbe Ampel (.badge-warn), Diagnose-Tabelle.
   Gemeinsamer Look für Notentool, Fragebogen-System und ensa-Kursverwaltung:
   Farbvariablen, Grundlayout, Navigation, Karten, Tabs, Formulare, Buttons, Tabellen, Hinweise, Fusszeile.
   Kontrast nach WCAG 2.2 AA (mind. 4,5:1 bzw. 3:1): Text, Buttons und Feldränder dunkler als im alten Fragebogen-Look,
   das helle Orange bleibt Akzent für Logo, Kartenrand und Balken.
   Keine Inline-Styles nötig, keine externen Ressourcen. Tool-spezifische Regeln gehören in die Datei des Tools,
   die nach dieser Datei eingebunden wird. */

:root {
  --orange:        #EF8E34;
  --orange-dark:   #C4701A;
  --orange-light:  #FEF3E7;
  --orange-border: #F5C99A;
  --akzent:        #A85A0E;
  --akzent-dunkel: #8A4A0A;
  --text:          #576371;
  --text-muted:    #5F6975;
  --bg:            #F5F6F7;
  --card:          #FFFFFF;
  --border:        #E0E0E0;
  --rand-feld:     #767F8A;
  --ok-bg:         #E8F5E9;
  --ok-text:       #256029;
  --fehler-bg:     #FDEDEC;
  --fehler-text:   #B3261E;
  --warn-bg:       #FFF3CD;
  --shadow:        0 1px 8px rgba(0,0,0,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
html.anz-gross { font-size: 125%; }
html.admin { font-size: 87.5%; }   /* Admin-Bereich am Laptop: 14 px wie der frühere Link-Generator */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.card, .tabelle-wrap, .tab-bar, .subnav, .nav { position: relative; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: #fff; color: var(--akzent); font-weight: 700;
  padding: .75rem 1rem; border: 2px solid var(--akzent); border-radius: 4px;
}
.skip:focus { left: 8px; top: 8px; }

a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* ── NAVIGATION (wie bestehende Seiten) ───────────────────────────── */
.nav {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  padding-top: env(safe-area-inset-top, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  flex-shrink: 0;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-square { width: 20px; height: 20px; background: var(--orange); border-radius: 2px; flex-shrink: 0; }
.nav-text { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.nav-tag { font-size: .75rem; color: var(--text-muted); }

/* ── HAUPTBEREICH ─────────────────────────────────────────────────── */
.page { width: 100%; max-width: 1100px; padding: 32px 20px 60px; }
.page-title { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 4px; }
.page-sub { font-size: .95rem; color: var(--text-muted); margin-bottom: 24px; }
.page > .card-heading { margin-top: 28px; }

/* Bereichsmenü unter der Navigation */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--border); background: #fff;
  color: var(--text); font-size: .95rem; font-weight: 600; text-decoration: none;
}
.subnav a:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.subnav a[aria-current="page"] { border-color: var(--orange-border); background: var(--orange-light); color: var(--akzent-dunkel); }

/* ── KARTEN ───────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: 4px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card-heading { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 12px; line-height: 1.3; }
.card p + p { margin-top: 10px; }
.card ul.liste { margin: 8px 0 0 1.2rem; }
.card ul.liste li { margin-bottom: 4px; }
.klein { font-size: .9rem; color: var(--text-muted); }
.leer { text-align: center; padding: 24px 8px; color: var(--text-muted); }
.leer p { margin-bottom: 16px; }

/* ── TABS (Bereiche, als Links mit aria-current) ─────────────────────── */
/* Graue Grundlinie als innerer Schatten: Sie liegt innerhalb der Leiste, der Unterstrich des Reiters darüber.
   (Ein Rand mit negativem Abstand würde bei overflow-x: auto abgeschnitten.) */
.tab-bar { display: flex; gap: 0; margin-bottom: 24px; box-shadow: inset 0 -2px 0 var(--border); overflow-x: auto; }
.tab-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; font-size: .875rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab-btn:hover { color: var(--text); border-bottom-color: var(--border); }
.tab-btn[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--orange); }
.tab-btn:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; }

/* ── FORMULARE ────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field .hilfe { font-size: .875rem; color: var(--text-muted); margin-top: 4px; }
.field input[type=text], .field input[type=date], .field input[type=password], .field input[type=url], .field input[type=number], .field input[type=email],
.field input[type=search], .field input[type=tel], .field input[type=time], .field input[type=datetime-local], .field input[type=month], .field input[type=week],
.field input:not([type]), .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--rand-feld);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}
.field textarea { min-height: 96px; }
.field input.pin-feld { -webkit-text-security: disc; letter-spacing: .3em; font-variant-numeric: tabular-nums; }   /* PIN: Punkte statt Ziffern, Feld bleibt ein Textfeld */
/* Ablagezone für Dateien (basis_datei_feld): das Dateifeld liegt unsichtbar über der ganzen Fläche */
.basis-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 16px; border: 2px dashed var(--rand-feld); border-radius: 8px; background: #fff; text-align: center; color: var(--text-muted); font-size: 1rem; transition: border-color .15s, background .15s; }
.basis-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
.basis-dropzone:hover, .basis-dropzone.ist-drueber, .basis-dropzone:focus-within { border-color: var(--orange, #EF8E34); background: #FFF8F1; }
.basis-dropzone:focus-within { outline: 3px solid var(--akzent); outline-offset: 2px; }
.basis-dropzone-text { font-weight: 600; color: var(--text); }
.basis-dropzone-liste { font-size: .9rem; overflow-wrap: anywhere; }
.basis-dropzone-dateien { list-style: none; margin: 8px 0 0; padding: 0; }
.basis-dropzone-dateien:empty { display: none; }
.basis-dropzone-dateien li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rand-feld); }
.basis-dropzone-vorschau, .basis-dropzone-typ { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; border: 1px solid var(--rand-feld); border-radius: 6px; background: var(--card); color: var(--text-muted); overflow: hidden; }
.basis-dropzone-vorschau { cursor: zoom-in; }
.basis-dropzone-vorschau:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.basis-dropzone-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basis-dropzone-typ svg { width: 28px; height: 28px; }
.basis-dropzone-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.basis-dropzone-name { overflow-wrap: anywhere; color: var(--text); }
.basis-dropzone-meta { font-size: .9rem; color: var(--text-muted); }
.basis-dropzone-dateien .icon-btn { flex: none; width: 44px; height: 44px; }
.basis-vorschau-dialog { max-width: min(96vw, 1200px); max-height: 94vh; padding: 12px; border: none; border-radius: 8px; background: var(--card); color: var(--text); text-align: center; }
.basis-vorschau-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.basis-vorschau-dialog img { display: block; max-width: 100%; max-height: calc(94vh - 120px); margin: 8px auto; object-fit: contain; }
.basis-vorschau-titel { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.feld-zeile { display: flex; gap: 12px; }
.feld-zeile .field { flex: 1; min-width: 0; }
.check {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; font-size: 1rem; color: var(--text);
}
.check input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--akzent); }
.check-reihe { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px; }
.check-reihe .check { min-height: 36px; }

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border-radius: 4px; border: 2px solid transparent;
  font-size: 1rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--akzent); color: #fff; }
.btn-primary:hover { background: var(--akzent-dunkel); color: #fff; }
.btn-outline { background: #fff; color: var(--akzent); border-color: var(--akzent); }
.btn-outline:hover { background: var(--orange-light); color: var(--akzent-dunkel); }
.btn-grey { background: #fff; color: var(--text); border-color: var(--rand-feld); }
.btn-grey:hover { border-color: var(--text); }
.btn-danger { background: #fff; color: var(--fehler-text); border-color: var(--fehler-text); }
.btn-danger:hover { background: var(--fehler-bg); }
.btn-klein { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.inline-form { display: inline; }

/* ── TABELLEN ─────────────────────────────────────────────────────── */
.tabelle-wrap { overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); background: #fff; margin-bottom: 20px; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.tabelle th {
  background: var(--bg); color: var(--text-muted);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tabelle th a { color: inherit; text-decoration: none; display: inline-block; min-height: 24px; }
table.tabelle th a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
table.tabelle td, table.tabelle tbody th {
  padding: 6px 12px; vertical-align: top; color: var(--text);
}
table.tabelle tbody th { background: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0; white-space: normal; min-width: 110px; border-bottom: none; }
table.tabelle tbody tr:hover td, table.tabelle tbody tr:hover th { background: var(--orange-light); }
.rechts { text-align: right; }
.mitte { text-align: center; }

/* ── HINWEISE, BADGES ─────────────────────────────────────────────── */
.hinweis { background: var(--warn-bg); border: 1px solid #E5CC7A; padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: .95rem; color: var(--text); }
.hinweis-ok { background: var(--ok-bg); border-color: #B7D8B9; }
.hinweis-fehler { background: var(--fehler-bg); border-color: #F0B8B4; }
.hinweis strong { color: var(--text); }
.hinweis ul { margin: 6px 0 0 1.2rem; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-nein { background: var(--fehler-bg); color: var(--fehler-text); }
.badge-neutral { background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
.badge-warn { background: var(--warn-bg); color: #6B4200; }

.card-kompakt { padding: 16px 20px; }
.card-kompakt .btn-row { margin-top: 8px; }
.card-kompakt .btn-row .btn { flex: 1 1 auto; }

/* Link-Anzeige (Admin) */
.result-box { background: var(--orange-light); border: 1px solid var(--orange-border); border-radius: 4px; padding: 16px; margin-bottom: 16px; }
.result-label { font-size: .85rem; font-weight: 700; color: var(--akzent-dunkel); margin-bottom: 6px; }
.result-url {
  font-size: .9rem; color: var(--text); word-break: break-all; line-height: 1.5;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #fff; border: 1px solid var(--orange-border); border-radius: 3px; padding: 10px 12px;
  -webkit-user-select: all; user-select: all;
}

/* ── FUSSZEILE (wie bestehende Seiten) ────────────────────────────── */
.foot { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: 8px; padding: 16px 0 8px; border-top: 1px solid var(--border); width: 100%; }
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.anzeige { font-size: .85rem; color: var(--text-muted); text-align: center; margin-bottom: 4px; }
.anzeige a { display: inline-block; padding: 6px 8px; color: var(--akzent); text-decoration: underline; }

/* ── V1.1.0: Karten-Raster und Kennzahlen (z. B. Übersichtsseiten) ── */
.raster-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.raster-karten > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.raster-karten > .card .karte-fuss { margin-top: auto; padding-top: 12px; }
.kennzahlen { display: grid; gap: 6px; margin: 0; }
.kennzahl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.kennzahl:last-child { border-bottom: none; }
.kennzahl dt { color: var(--text); font-size: .95rem; }
.kennzahl dd { margin: 0; text-align: right; font-weight: 700; color: var(--text); white-space: nowrap; }
.kennzahl dd .klein { font-weight: 400; }

/* ── V1.2.0: Auswahl-Kacheln wie im Fragebogen/Link-Generator (z. B. Semesterwahl) ──
   Als Links (a.radio-opt, aktiv mit aria-current) oder als Label um ein Radio (label.radio-opt). */
.auswahl-kacheln { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.radio-opt {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  border-radius: 4px; border: 1px solid var(--border); background: #fff;
  color: var(--text); text-decoration: none; cursor: pointer; line-height: 1.25;
}
.radio-opt:hover { border-color: var(--orange); color: var(--text); }
.radio-opt.active, .radio-opt[aria-current="page"] { border-color: var(--orange); background: var(--orange-light); }
.radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rand-feld); flex-shrink: 0; background: #fff; }
.radio-opt.active .radio-dot, .radio-opt[aria-current="page"] .radio-dot { border-color: var(--orange-dark); background: var(--orange); }
.radio-opt input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-text { display: flex; flex-direction: column; }
.radio-titel { font-size: .95rem; font-weight: 600; }
.radio-sub { font-size: .8rem; color: var(--text-muted); }
.radio-marke { font-size: .7rem; font-weight: 700; color: var(--akzent-dunkel); text-transform: uppercase; letter-spacing: .04em; }

/* ── V1.3.0: Abmelden-Knopf in der Navigation (gut antippbar) ── */
.nav-form { margin: 0; }
.nav-abmelden {
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--rand-feld); border-radius: 4px;
  background: #fff; color: var(--text); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-abmelden:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.nav-abmelden:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* ── V1.3.0: Diagnose (basis_diagnose.php) ── */
table.diag-tabelle tbody th { width: 34%; }
table.diag-tabelle td.diag-status { width: 1%; white-space: nowrap; }
.diag-hinweis { display: block; font-size: .85rem; color: var(--text-muted); margin-top: 2px; }

/* ── V1.4.0: nur mit JavaScript sichtbar (inchstones_basis.js setzt html.js); QR-Code ── */
.js-nur { display: none !important; }
html.js .js-nur { display: inline-flex !important; }
.js-teilen { display: none !important; }
html.teilen-ok .js-teilen { display: inline-flex !important; }
html.teilen-ok .menue-inhalt .js-teilen, html.js .menue-inhalt .js-nur { display: flex !important; }
html.teilen-ok .nur-ohne-teilen, html.teilen-ok .menue-inhalt .nur-ohne-teilen { display: none !important; }
.link-teilen { margin-bottom: 8px; }
pre.vorschau { white-space: pre-wrap; word-break: break-word; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; font: inherit; font-size: .9rem; margin: 6px 0 12px; }
.link-teilen .btn-zeile { flex-wrap: wrap; }
.qr-feld { display: inline-block; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 4px; margin-top: 12px; }
.qr-feld img, .qr-feld canvas { display: block; }

/* ── V1.6.0: Auswahl bestehender Codes (basis_code_auswahl) ── */
.field select.code-auswahl {
  width: 100%; min-height: 200px; padding: 6px; border: 1px solid var(--rand-feld); border-radius: 4px;
  font-size: .95rem; font-family: inherit; color: var(--text); background: #fff;
}
.code-auswahl optgroup { font-weight: 700; color: var(--akzent-dunkel); }
.code-auswahl option { font-weight: 400; color: var(--text); padding: 3px 6px; }

/* ── V1.7.0: Listen: Filterleiste, Pillen, Icon-Buttons und Menü «⋯» (gleicher Look wie im Notentool) ───────────────── */
.nowrap { white-space: nowrap; }
.badge-grau { background: #ECEFF1; color: #3E4650; }
.ov-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ov-bar .field { margin: 0; }
.ov-suche { flex: 1 1 220px; min-width: 180px; }
.ov-count { margin-left: auto; color: var(--text-muted); font-size: .9rem; }
.subnav.pills { border-bottom: 0; gap: 8px; row-gap: 6px; margin-bottom: 12px; }
.subnav.pills a { border: 1px solid var(--border); border-radius: 22px; margin-bottom: 0; background: #fff; color: var(--text); padding: 0 16px; }
.subnav.pills a:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.subnav.pills a[aria-current="page"] { border-color: var(--orange-border); background: var(--orange-light); color: var(--akzent-dunkel); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rand-feld); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; text-decoration: none; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--orange-light); border-color: var(--akzent); color: var(--akzent); }
.icon-btn.icon-gefahr:hover, .icon-btn.icon-gefahr:focus-visible { background: var(--fehler-bg); border-color: var(--fehler-text); color: var(--fehler-text); }
.icon-gruppe { display: inline-flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; }
.icon-gruppe form { margin: 0; display: inline-flex; }
.tabelle .icon-gruppe { justify-content: flex-end; }
details.menue { position: relative; display: inline-block; }
details.menue > summary { list-style: none; }
.menue-inhalt { position: absolute; right: 0; z-index: 10; min-width: 210px; margin-top: 4px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--rand-feld); border-radius: 6px; box-shadow: var(--shadow); }
.menue-inhalt form { margin: 0; }
.menue-eintrag { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; border-radius: 4px; background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menue-eintrag:hover, .menue-eintrag:focus-visible { background: var(--orange-light); color: var(--akzent); }
.menue-eintrag.icon-gefahr:hover, .menue-eintrag.icon-gefahr:focus-visible { background: var(--fehler-bg); color: var(--fehler-text); }
.tabelle details.menue { display: block; }
.tabelle details.menue[open] { width: 132px; }
.tabelle .menue-eintrag { padding: 7px 8px; gap: 6px; white-space: nowrap; }
.tabelle details.menue[open] > summary { margin-left: auto; }
.tabelle .menue-inhalt { position: static; width: 100%; min-width: 0; margin-top: 6px; box-shadow: none; }
/* Auf breiten Bildschirmen öffnet das Menü «⋯» als Auswahl über den Zeilen (die Tabelle passt dort in die Seite). */
@media (min-width: 1000px) {
  .tabelle-menue { overflow: visible; }
  .tabelle-menue .tabelle details.menue { display: inline-block; }
  .tabelle-menue .tabelle details.menue[open] { width: auto; }
  .tabelle-menue .tabelle details.menue[open] > summary { margin-left: 0; }
  .tabelle-menue .tabelle .menue-inhalt { position: absolute; right: 0; z-index: 10; width: max-content; min-width: 160px; margin-top: 4px; box-shadow: var(--shadow); }
}
.aktionen-zelle { width: 1%; white-space: nowrap; }
@media print { .icon-btn, details.menue { break-inside: avoid; } .icon-gruppe, details.menue { display: none; } }


/* ── V1.9.0: Hilfe-Symbol «?» (Text beim Darüberfahren, bei Tastaturfokus oder nach Antippen/Klick; Look wie der Mouseover-Hinweis des Notentools) ── */
.hilfe-sym { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; line-height: 1; }
.hilfe-knopf { position: relative; width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--rand-feld); background: #fff; color: var(--akzent);
               font-family: inherit; font-size: .8rem; font-weight: 700; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.hilfe-knopf::before { content: ""; position: absolute; top: -11px; right: -11px; bottom: -11px; left: -11px; }   /* Tippfläche mindestens 44 px */
.hilfe-knopf:hover, .hilfe-sym.offen > .hilfe-knopf { background: var(--orange-light); border-color: var(--akzent); }
.hilfe-text { display: none; position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: max-content; min-width: 180px; max-width: min(300px, calc(100vw - 32px));
              padding: 8px 10px; border-radius: 6px; background: var(--text); color: #fff; font-size: .85rem; font-weight: 400; line-height: 1.4; text-align: left; text-transform: none; box-shadow: var(--shadow); }
.hilfe-zeile { display: block; }
.hilfe-zeile + .hilfe-zeile { margin-top: 4px; }
.hilfe-sym.rechts > .hilfe-text { left: auto; right: 0; }
.hilfe-sym.offen > .hilfe-text, .hilfe-sym:has(.hilfe-knopf:focus-visible) > .hilfe-text { display: block; }
@media (hover: hover) { .hilfe-sym:hover > .hilfe-text { display: block; } }
.hilfe-sym.zu > .hilfe-text { display: none !important; }
@media print { .hilfe-sym { display: none; } }
.hilfe-knopf.info-knopf { width: auto; height: auto; min-height: 1.6rem; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--text); }
.info-knopf svg { width: 1rem; height: 1rem; }
.info-sym.inline { margin-left: 0; }
.info-sym.inline > .info-knopf { border: none; background: none; padding: 0 2px; min-height: 0; font-size: inherit; font-weight: 600; color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }

.label-hilfe { display: flex; align-items: center; margin-bottom: 6px; }
.label-hilfe label { margin-bottom: 0; }
.check-hilfe { display: inline-flex; align-items: center; margin-right: 12px; }
.check-hilfe .hilfe-sym { margin-left: 2px; }
legend .hilfe-sym, .card-heading .hilfe-sym, .page-title .hilfe-sym { margin-left: 8px; }
.page-title .hilfe-knopf { width: 1.6rem; height: 1.6rem; font-size: .9rem; }
.aktionsleiste .hilfe-sym { margin-left: 4px; }

/* ── V1.9.0: Schrittanzeige, Speicherstatus, Leerhinweis, feste Aktionsleiste ── */
.schritte { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .9rem; color: var(--text-muted); }
.schritte li { display: inline-flex; align-items: center; gap: 6px; }
.schritte .schritt-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--orange-light); border: 1px solid var(--orange-border); color: var(--akzent-dunkel); font-weight: 700; font-size: .8rem; }
.status-punkt { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text-muted); }
.status-punkt::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rand-feld); }
.status-punkt.gespeichert { color: var(--ok-text); }
.status-punkt.gespeichert::before { background: var(--ok-text); }
.status-punkt.offen-aenderung { color: var(--akzent-dunkel); }
.status-punkt.offen-aenderung::before { background: var(--orange); }
.leer-hinweis { padding: 16px; border: 1px dashed var(--orange-border); border-radius: 8px; background: var(--orange-light); color: var(--text); text-align: center; margin: 12px 0; }
@media (max-width: 640px) {
  .aktionsleiste { position: sticky; bottom: 0; z-index: 20; margin: 0; padding: 10px 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
  .aktionsleiste .btn { min-height: 44px; }
}


/* ── V1.10.0: Farbauswahl (Feld mit Farben, geöffnet von [data-farbwahl]); Farbnummern wie die Palette der Pläne (0–11) plus Hellgelb und Hellviolett (12, 13) ── */
.farbwahl-pop { position: fixed; z-index: 60; display: flex; flex-wrap: wrap; gap: 6px; width: 15rem; max-width: calc(100vw - 16px); padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.farbwahl-feld { position: relative; appearance: none; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(0, 0, 0, .55); border-radius: 50%; cursor: pointer; }
.farbwahl-feld.gewaehlt { outline: 3px solid var(--orange-dark); outline-offset: 2px; }
.farbwahl-feld.gewaehlt::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #000; }
.farbwahl-feld.belegt::before { content: ""; position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; border-radius: 50%; background: #000; border: 1px solid #fff; }
.farbwahl-feld:focus-visible { outline: 3px solid var(--orange-dark); outline-offset: 2px; }
.fw-f0 { background: #BDD7EE; } .fw-f1 { background: #FFC000; } .fw-f2 { background: #C6E0B4; } .fw-f3 { background: #8FD3B0; } .fw-f4 { background: #D9D2E9; } .fw-f5 { background: #F8CBAD; } .fw-f6 { background: #FFD757; }
.fw-f7 { background: #B7E1E4; } .fw-f8 { background: #F4C6DB; } .fw-f9 { background: #DDEBF7; } .fw-f10 { background: #E7DAC3; } .fw-f11 { background: #EDEDED; } .fw-f12 { background: #FFE8A0; } .fw-f13 { background: #E9E5F3; }
@media print { .farbwahl-pop { display: none; } }

/* ── V1.11.0: Gruppen von Kacheln und Trenner in der Reiterleiste ── */
.gruppe-titel { font-size: 1.05rem; font-weight: 700; color: var(--text-muted); margin: 22px 0 10px; }
.gruppe-titel:first-of-type { margin-top: 4px; }
.card-klein { padding: 14px 16px; }
.card-klein h2 { font-size: 1rem; }
.card-klein p { font-size: .9rem; }
.tab-trenner { flex: 0 0 auto; align-self: center; width: 1px; height: 1.4rem; margin: 0 8px; background: var(--border); }

/* Listen im Text (basis_text.php) */
.text-liste { margin: 6px 0 0; padding-left: 1.3rem; }
ul.text-liste { list-style: disc; }
ol.text-liste { list-style: decimal; padding-left: 1.6rem; }
.text-liste .text-liste { margin-top: 2px; }
ul.text-liste ul.text-liste { list-style: circle; }
ol.text-liste ol.text-liste { list-style: lower-alpha; }
.text-liste li { margin: 2px 0; }
.text-zeile { display: block; }
.text-stufe-1 { padding-left: 1.2em; }
.text-stufe-2 { padding-left: 2.4em; }
.text-stufe-3 { padding-left: 3.6em; }

/* Knopf «Text einfügen» mit Vorschau beim Darüberfahren oder beim Fokus (Text auch für Screenreader über aria-describedby) */
.text-einfuegen { position: relative; display: inline-block; margin: 0 0 8px; }
.text-einfuegen-vorschau {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  width: min(560px, calc(100vw - 32px)); max-height: 320px; overflow: auto;
  padding: 12px 14px; background: var(--card); color: var(--text);
  border: 1px solid var(--rand-feld); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: .95rem; line-height: 1.45; white-space: normal;
}
.text-einfuegen-vorschau p { margin: 0 0 6px; }
.text-einfuegen-vorschau-titel { font-weight: 700; margin-bottom: 6px; }
.text-einfuegen:hover .text-einfuegen-vorschau, .text-einfuegen:focus-within .text-einfuegen-vorschau { display: block; }
.text-einfuegen-meldung { margin-left: 8px; font-size: .9rem; color: var(--ok-text); }
@media (hover: none) { .text-einfuegen:hover .text-einfuegen-vorschau { display: none; } }

/* Barrierefreiheit: keine Bewegung, wenn das Gerät es so wünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}