/* basis.css — Tokens, Grundlayout, Seitenmenü, Fußleiste, Tabellen- und Formular-Basis,
   Anmeldeseite. Erste von drei Dateien (basis → komponenten → ansichten, SPEC 14). */
:root {
  --fg: #1a1a1a;
  --muted: #666;
  --bg: #fafafa;
  --karte: #fff;
  --rand: #d8d8d8;
  --akzent: #1f4a8a;
  --offen: #e5e5e5;
  --ueberfaellig-bg: #ffdede;
  --ueberfaellig-fg: #a10000;
  --erledigt-bg: #d8f0d8;
  --erledigt-fg: #1a5a1a;
  --fehler-bg: #ffe0b3;
  --fehler-fg: #7a3800;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding-bottom: 3.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--akzent);
  color: #fff;
}
body.nicht-produktiv header.topbar,
body.nicht-produktiv footer.seitenfuss { background: #a10000; }
body.nicht-produktiv .instanz-tag {
  background: #ffd400; color: #a10000; font-weight: 700;
  padding: 0.1rem 0.5rem; border-radius: 3px; margin-left: 0.5rem;
  font-size: 0.85em; letter-spacing: 0.5pt;
}
.topbar .brand { font-weight: 600; color: #fff; text-decoration: none; }
.topbar .instanz-tag.topbar-instanz { margin-left: auto; margin-right: 0; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: #fff; text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }
.topbar .benutzer { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: #eee; }
.topbar .benutzer strong { color: #fff; }
.topbar .benutzer .link {
  background: none; color: #eee; border: none;
  text-decoration: underline; cursor: pointer; padding: 0;
}

main { padding: 1rem; max-width: 1200px; margin: 0 auto; }
main.voll { max-width: none; }

/* ---- Seitenmenü (Burger) ---- */
:root { --sm-breite-schmal: 3.25rem; --sm-breite-offen: 13rem; }
.seitenmenue {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 3rem;   /* Platz für den fixierten Copyright-Footer */
  width: var(--sm-breite-schmal);
  background: var(--karte);
  border-right: 1px solid var(--rand);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding-top: 3.2rem;
  /* visible statt hidden, damit die Flyouts (.sm-sub) rechts herausragen
     dürfen; die Beschriftungen clippen stattdessen die Einträge selbst. */
  overflow: visible;
  transition: width 0.18s ease;
}
body.sm-offen .seitenmenue { width: var(--sm-breite-offen); }
body.mit-seitenmenue main { margin-left: var(--sm-breite-schmal); max-width: none; }
body.mit-seitenmenue.sm-offen main { margin-left: var(--sm-breite-offen); }
.sm-burger {
  position: absolute;
  top: 0.55rem;
  left: 0.6rem;
  background: none;
  border: none;
  padding: 0.3rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
}
.sm-burger:hover { color: var(--fg); background: var(--bg); }
.sm-logo { display: none; padding: 0.4rem 0.9rem 0.7rem 0.9rem; text-align: center; }
.sm-logo img { display: inline-block; width: 50%; height: auto; }
body.sm-offen .sm-logo, body.sm-eingeblendet .sm-logo { display: block; }
.sm-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0; }
.sm-nav a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.85rem;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.92em;
  white-space: nowrap;
  border-left: 3px solid transparent;
  overflow: hidden;
}
.sm-nav a:hover { background: var(--bg); border-left-color: var(--akzent); }
.sm-trenner { border: none; border-top: 1px solid var(--rand); margin: 0.35rem 0.8rem; }
/* Höchstens eine Linie: blenden Menüfreigaben die Einträge zwischen zwei Linien aus, stehen die Linien direkt
   hintereinander — dann gilt nur die erste; eine Linie ganz am Ende entfällt (SPEC 2.3, 19.09.2026) */
.sm-nav .sm-trenner + .sm-trenner, .sm-nav > .sm-trenner:last-child { display: none; }
/* Menüfreigaben (SPEC 2.3): gesperrter Punkt bleibt sichtbar, ist aber blass und nicht anklickbar; sein Flyout bleibt zu */
.sm-nav a.sm-gesperrt, .sm-nav .sm-gruppe.sm-gesperrt > a { opacity: 0.35; pointer-events: none; }
.sm-nav .sm-gruppe.sm-gesperrt .sm-sub { display: none; }   /* Linie vor den Stammdaten und im Stammdaten-Untermenü */
.sm-nav a svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--akzent);
}
.sm-nav a span {
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
body.sm-offen .sm-nav a span, body.sm-eingeblendet .sm-nav a span { opacity: 1; pointer-events: auto; }
body.nicht-produktiv .sm-nav a svg { color: #a10000; }
/* Aktueller Bereich in der Seitenleiste (Adminbereich, SPEC 14.2) */
.sm-nav a.sm-aktiv { background: var(--bg); border-left-color: var(--akzent); font-weight: 600; }
/* Pfad „Admin › Bereich“ in der Kopfleiste des Adminbereichs */
.topbar .admin-pfad { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.topbar .admin-pfad a { color: #fff; text-decoration: none; }
.topbar .admin-pfad a:hover { text-decoration: underline; }
.topbar .admin-pfad span { color: #cfd8e6; }
body.admin-bereich .topbar { padding-left: calc(var(--sm-breite-schmal) + 1rem); transition: padding-left 0.18s ease; }
body.admin-bereich.sm-offen .topbar { padding-left: calc(var(--sm-breite-offen) + 1rem); }
body.nicht-produktiv .sm-nav a:hover { border-left-color: #a10000; }

/* Untermenü als Flyout (Anfragen, Bestellungen): öffnet bei Hover oder
   Tastaturfokus rechts neben dem Menü — im schmalen wie im offenen Zustand.
   Direkt anliegend (left: 100%), damit die Maus beim Rüberfahren keine
   Lücke überquert und das Flyout dabei zuklappt. */
.sm-gruppe { position: relative; }
.sm-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 11rem;
  padding: 0.3rem 0;
  background: var(--karte);
  border: 1px solid var(--rand);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 41;
  /* Passt ein Flyout unten nicht mehr ins Fenster, schiebt base.html es nach oben (--sm-sub-hoch); ist es höher als
     das Fenster, scrollt es in sich (Dietmar 23.09.2026: „Ich komme nicht mehr an alle Items der Stammdaten heran“) */
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
}
/* Ein Flyout mit eigener Untergruppe (Stammdaten › Anlagen, 10.10.2026) darf nicht clippen, sonst bleibt das dritte Flyout
   unsichtbar — es ist kurz genug; das Untermenü der Untergruppe scrollt weiterhin in sich. */
.sm-sub.sm-sub-mit-gruppen { max-height: none; overflow: visible; }
/* Kind-Kombinator (>), nicht Nachfahre: eine Gruppe öffnet nur ihr eigenes
   Flyout. Bei verschachtelten Gruppen (Stammdaten → Lieferanten → …) würde
   der Nachfahren-Selektor sonst alle Unter-Flyouts auf einmal aufklappen. */
.sm-gruppe:hover > .sm-sub,
.sm-gruppe:focus-within > .sm-sub { display: block; }
/* Fingerbedienung (02.10.2026): nur das angetippte Untermenü (.sm-auf) ist offen — nicht das, auf dem ein „klebendes“
   :hover oder der Fokus des Tipps hängt (base.html, pointerType). Mit der Maus gilt weiter :hover. */
body.sm-finger .sm-gruppe:not(.sm-auf) > .sm-sub { display: none; }
body.sm-finger .sm-gruppe.sm-auf > .sm-sub { display: block; }
body.sm-finger .sm-gruppe.sm-auf > a { background: var(--bg); border-left-color: var(--akzent); }
/* Zweite Ebene: Flyout hängt rechts am Eintrag der ersten Ebene, oberkantenbündig
   mit dessen Zeile (die eigene Titelzeile gleicht das Padding des Elternpanels aus). */
.sm-sub .sm-gruppe > .sm-sub { top: -0.3rem; }
/* Titelzeile nennt den Hauptpunkt — im schmalen Menü ist er sonst nicht
   ablesbar, das Flyout stünde ohne Bezug neben einem Icon. */
.sm-sub-titel {
  padding: 0.35rem 0.9rem 0.45rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--rand);
  color: var(--akzent);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5pt;
  white-space: nowrap;
}
body.nicht-produktiv .sm-sub-titel { color: #a10000; }
/* Hauptpunkt bleibt markiert, solange das Flyout offen ist */
.sm-gruppe:hover > a { background: var(--bg); border-left-color: var(--akzent); }
body.nicht-produktiv .sm-gruppe:hover > a { border-left-color: #a10000; }
.sm-nav .sm-sub a {
  padding: 0.5rem 0.9rem;
  gap: 0.6rem;
  font-size: 0.9em;
  border-left: 0;
}
.sm-nav .sm-sub a:hover { background: var(--bg); }
.sm-nav .sm-sub a svg { width: 16px; height: 16px; color: var(--muted); }
.sm-nav .sm-sub a:hover svg { color: var(--akzent); }
body.nicht-produktiv .sm-nav .sm-sub a:hover svg { color: #a10000; }
/* Beschriftungen im Flyout sind immer sichtbar, unabhängig vom Menüzustand */
.sm-nav .sm-sub a span { opacity: 1; pointer-events: auto; }
/* Pfeil rechts am Hauptpunkt — erscheint mit der Beschriftung im offenen Menü */
.sm-pfeil { margin-left: auto; color: var(--muted); font-size: 1.15em; line-height: 1; }
/* Fußbereich clippt seine Beschriftung ebenfalls selbst (overflow des Menüs ist jetzt visible) */
.sm-benutzer, .sm-abmelden button { overflow: hidden; }

/* Fußbereich mit Benutzer + Abmelden */
.sm-fuss {
  margin-top: auto;
  border-top: 1px solid var(--rand);
  padding: 0.6rem 0 0.9rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sm-benutzer,
.sm-abmelden button {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0.85rem;
  color: var(--fg);
  font-size: 0.92em;
  white-space: nowrap;
  border-left: 3px solid transparent;
}
.sm-benutzer svg,
.sm-abmelden button svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--muted);
}
/* Avatar aus dem ERP-Ausweisbild statt Platzhalter-Icon; gleiche Spurbreite wie die Icons */
.sm-benutzer .sm-avatar {
  width: 26px;
  height: 26px;
  margin: -2px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow: 0 0 0 1.5px var(--rand);
}
.sm-benutzer span,
.sm-abmelden button span {
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sm-offen .sm-benutzer span, body.sm-eingeblendet .sm-benutzer span,
body.sm-offen .sm-abmelden button span, body.sm-eingeblendet .sm-abmelden button span { opacity: 1; pointer-events: auto; }
.sm-abmelden { margin: 0; }
.sm-abmelden button {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fg);
}
.sm-abmelden button:hover {
  background: var(--bg);
  border-left-color: var(--akzent);
  color: var(--ueberfaellig-fg);
}
.sm-abmelden button:hover svg { color: var(--ueberfaellig-fg); }
/* Name im Seitenmenü führt auf „Mein Profil“ (SPEC 2.4) — Hover wie die Menüpunkte, nicht rot wie Abmelden */
a.sm-benutzer { text-decoration: none; }
a.sm-benutzer:hover, a.sm-benutzer.aktiv { background: var(--bg); border-left-color: var(--akzent); color: var(--akzent); }
a.sm-benutzer:hover svg { color: var(--akzent); }
body.nicht-produktiv .sm-abmelden button:hover { border-left-color: #a10000; }
/* Niedrige Fenster (10.10.2026, Dietmar: „das Menü ist auf manchen Monitoren im ausgeklappten Zustand mittlerweile zu
   hoch“ und: „Kann der Abstand nicht in Abhängigkeit der verfügbaren Höhe angezeigt werden?“): mit allen 14 Hauptpunkten
   braucht die Leiste 989 px (Kopf 51, Logo 104, Einträge 679, Fuß 107, Copyright 48) — sie kann nicht in sich scrollen
   (overflow visible wegen der Flyouts), unten Abgeschnittenes wäre unerreichbar. Darum wachsen und schrumpfen die
   Abstände stufenlos mit der Fensterhöhe: ab 1000 px die vollen Werte, bei 700 px die engsten (Einträge 0,36 statt
   0,6 rem Polster, keine Lücken, schmalere Linien, kürzerer Fuß), dazwischen linear über 100vh; das Logo blendet
   zwischen 930 und 820 px weich aus. Gesamt bei 700 px rund 686 px, die Vollansicht passt bis etwa 690 px.
   Steht hinter den Fußregeln, weil gleiche Spezifität gilt und die spätere Regel gewinnt. */
.sm-nav { gap: clamp(0rem, calc(0.15rem - (1000px - 100vh) * 0.008), 0.15rem); padding: clamp(0.2rem, calc(0.4rem - (1000px - 100vh) * 0.0107), 0.4rem) 0; }
.sm-nav a { padding-top: clamp(0.36rem, calc(0.6rem - (1000px - 100vh) * 0.0128), 0.6rem); padding-bottom: clamp(0.36rem, calc(0.6rem - (1000px - 100vh) * 0.0128), 0.6rem); }
.sm-nav .sm-sub a { padding-top: 0.5rem; padding-bottom: 0.5rem; }   /* Flyouts bleiben wie gehabt */
.sm-trenner { margin-top: clamp(0.2rem, calc(0.35rem - (1000px - 100vh) * 0.008), 0.35rem); margin-bottom: clamp(0.2rem, calc(0.35rem - (1000px - 100vh) * 0.008), 0.35rem); }
.sm-fuss { padding-top: clamp(0.3rem, calc(0.6rem - (1000px - 100vh) * 0.016), 0.6rem); padding-bottom: clamp(0.4rem, calc(0.9rem - (1000px - 100vh) * 0.0267), 0.9rem); gap: clamp(0rem, calc(0.15rem - (1000px - 100vh) * 0.008), 0.15rem); }
.sm-benutzer, .sm-abmelden button { padding-top: clamp(0.4rem, calc(0.55rem - (1000px - 100vh) * 0.008), 0.55rem); padding-bottom: clamp(0.4rem, calc(0.55rem - (1000px - 100vh) * 0.008), 0.55rem); }
body.sm-offen .sm-logo, body.sm-eingeblendet .sm-logo { padding-top: clamp(0rem, calc((100vh - 820px) * 0.058), 0.4rem); padding-bottom: clamp(0rem, calc((100vh - 820px) * 0.1), 0.7rem); }
.sm-logo { line-height: 0; }   /* sonst bleibt bei ausgeblendetem Bild eine leere Zeile stehen */
.sm-logo img { max-height: clamp(0px, calc((100vh - 820px) * 0.75), 5rem); object-fit: contain; }

footer.seitenfuss .build { opacity: 0.85; }   /* Release und Datum immer sichtbar, eine Zeile (13.09.2026) */
footer.seitenfuss {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 1rem;
  background: var(--akzent);
  color: #fff;
  font-size: 0.75em;
  text-align: center;
  z-index: 50;
  line-height: 1.5;
}
h1 { margin-top: 0.5rem; }
h2 { margin-top: 1.5rem; }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  padding: 1rem 1.5rem;
  max-width: 400px;
  margin: 3rem auto;
}
.hinweis { color: var(--muted); font-size: 0.9em; }

table { border-collapse: collapse; width: 100%; background: var(--karte); }
table th, table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rand); text-align: left; }
table th { background: #f0f0f0; font-weight: 600; }
.rechts { text-align: right; }

table.uebersicht td, table.uebersicht th { padding-top: 0.3rem; padding-bottom: 0.3rem; }   /* kompakt (12.10.2026, vorher td 0.66rem), SPEC 14.5 */
.uebersicht a { color: var(--akzent); }
table.uebersicht th a.sortlink {
  color: inherit; text-decoration: none; display: inline-block;
}
table.uebersicht th a.sortlink:hover { text-decoration: underline; }
table.uebersicht th a.sortlink-aktiv { color: var(--akzent); }
table.we-liste th a.sortlink {
  color: inherit; text-decoration: none; display: inline-block;
}
table.we-liste th a.sortlink:hover { text-decoration: underline; }
table.we-liste th a.sortlink-aktiv { color: var(--akzent); }
fieldset { border: 1px solid var(--rand); padding: 0.75rem 1rem; margin: 1rem 0; background: var(--karte); }
legend { padding: 0 0.5rem; font-weight: 600; }
form.bestellform fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
form.bestellform fieldset > legend { grid-column: 1 / -1; }
form.bestellform fieldset > table { grid-column: 1 / -1; }
form.bestellform fieldset > button { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
form.bestellform label { display: flex; flex-direction: column; font-size: 0.85em; color: var(--muted); }
form.bestellform label.voll { grid-column: 1 / -1; }
form.bestellform input, form.bestellform select, form.bestellform textarea { padding: 0.3rem; font-size: 1em; }

table.positionen input, table.positionen select { width: 100%; padding: 0.2rem; }

td.zeile-loeschen { width: 32px; text-align: center; padding: 0; }
button.loeschen-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px;
}
button.loeschen-btn:hover { color: var(--ueberfaellig-fg); background: var(--ueberfaellig-bg); }
button.loeschen-btn svg { display: block; }

.aktionen { margin-top: 1rem; }
button.primaer {
  background: var(--akzent); color: #fff; border: none;
  padding: 0.5rem 1.5rem; font-size: 1em; cursor: pointer;
}
button.primaer:hover { background: #163765; }

/* ---- Login-Seite ---- */
body.anmeldung-body {
  min-height: 100vh;
  padding-bottom: 4rem;
  background:
    radial-gradient(ellipse at top left, #eef3fb 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, #f4f6fa 0%, transparent 60%),
    var(--bg);
}
body.anmeldung-body.nicht-produktiv {
  background:
    radial-gradient(ellipse at top left, #fdecec 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, #f4f6fa 0%, transparent 60%),
    var(--bg);
}
main.anmeldung-buehne {
  min-height: calc(100vh - 4rem);
  max-width: none;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anmeldung-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-top: 4px solid var(--akzent);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(31, 74, 138, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 2rem 2.5rem 2.25rem 2.5rem;
  width: 100%;
  max-width: 26rem;
  text-align: center;
}
body.nicht-produktiv .anmeldung-karte {
  border-top-color: #a10000;
  box-shadow: 0 12px 40px rgba(161, 0, 0, 0.15),
              0 2px 8px rgba(0, 0, 0, 0.06);
}
.anmeldung-logo {
  margin: 0 auto 0.5rem auto;
  max-width: 18rem;
}
.anmeldung-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.anmeldung-subtitel {
  font-size: 1.05em;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rand);
}
.anmeldung-karte form.anmelden {
  text-align: left;
  margin-top: 0.25rem;
}
.anmeldung-karte form.anmelden button {
  align-self: stretch;
  margin-top: 0.75rem;
  padding: 0.55rem;
  font-size: 1em;
}
.anmeldung-fehler {
  background: var(--ueberfaellig-bg);
  color: var(--ueberfaellig-fg);
  border: 1px solid var(--ueberfaellig-fg);
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  margin-top: 0.75rem;
  font-size: 0.9em;
  text-align: left;
}
.anmeldung-hinweis {
  margin: 0.75rem 0 0 0;
  font-size: 0.85em;
  color: var(--muted);
  text-align: center;
}

/* Touch-freundlich */
@media (pointer: coarse) {
  button.we-btn { padding: 1rem 1.2rem; font-size: 1.05em; min-width: 130px; }
  button.we-submit { padding: 0.9rem 2rem; font-size: 1.15em; }
}

/* hidden-Attribut muss gegen display:flex der Formular-Labels gewinnen (Sprachfeld bei mehreren Lieferanten) */
form.bestellform label[hidden] { display: none; }

/* ---- Schmale Bildschirme, z. B. Telefon quer (SPEC 14.8) ----
   Nur unterhalb 930 px bzw. 500 px Höhe; der Desktop bleibt unberührt. */
@media (max-width: 930px) {
  main { padding: 0.6rem 0.7rem; }
  h1 { font-size: 1.35rem; margin: 0.3rem 0 0.6rem; }
  h1.mit-blaettern { gap: 0.4rem; }
  .topbar { padding: 0.35rem 0.7rem; }
}
@media (max-height: 500px), (max-width: 930px) {
  /* Telefon: Fußbereich nicht mehr fixiert, sondern unten angehängt, einzeilig */
  footer.seitenfuss { position: static; padding: 0.35rem 0.5rem; }
  .seitenmenue { bottom: 0; }
  body { padding-bottom: 0; }
}

/* Seiten fürs Telefon ohne Seitenleiste (SPEC 14.8, z. B. „Revision vor Ort“): <body class="sm-telefon-aus">.
   Unter 930 px verschwindet die Leiste ganz, der Inhalt bekommt die volle Breite. Der Knopf .sm-einblenden
   (data-sm-einblenden) holt sie als Überlagerung zurück; darunter wird die Seite abgedunkelt. */
.sm-einblenden { display: none; }
@media (max-width: 930px) {
  body.sm-telefon-aus main { margin-left: 0; }
  body.sm-telefon-aus .seitenmenue { width: var(--sm-breite-offen); transform: translateX(-100%); visibility: hidden;
                                     transition: transform 0.18s ease, visibility 0s linear 0.18s; }
  body.sm-telefon-aus.sm-eingeblendet .seitenmenue { transform: none; visibility: visible; transition: transform 0.18s ease;
                                                     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25); }
  body.sm-telefon-aus.sm-eingeblendet::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.3); }
  body.sm-telefon-aus .sm-einblenden { display: inline-flex; align-items: center; justify-content: center; flex: none;
                                       width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid var(--rand); border-radius: 999px;
                                       background: var(--karte); color: var(--fg); cursor: pointer; }
}

/* Nur für Vorleseprogramme (SPEC 14.1): Text, der optisch durch ein Symbol ersetzt ist */
/* Das Attribut hidden gewinnt immer (SPEC 14.4): die eingebaute Browserregel hat die
   niedrigste Spezifität, jede Klassenregel mit display überstimmt sie — das hat uns bei
   Reitern, Menüeinträgen, Blätterpfeilen und Knöpfen viermal verborgene Elemente gezeigt.
   Geprüft von scripts/stilpruefung.py. */
[hidden] { display: none !important; }

.nur-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Handy-Menü (SPEC 14.12, 19.09.2026): unter 700 px ersetzt es die Seitenleiste ----
   Leiste unten (bis zu vier Favoriten + „Menü“) und Vollbild-Blatt mit Suche, Favoriten und aufklappbaren Gruppen.
   --hm-hoehe ist die Höhe der Leiste; was unten klebt (Senden-Leisten, Hinweise), rückt um sie nach oben. */
:root { --hm-hoehe: 0px; }
.hm-leiste, .hm-blatt { display: none; }
@media (max-width: 700px) {
  body.mit-handymenue { --hm-hoehe: calc(3.5rem + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--hm-hoehe); }
  body.mit-handymenue .seitenmenue { display: none; }
  body.mit-handymenue main, body.mit-handymenue.sm-offen main { margin-left: 0; }
  body.mit-handymenue .topbar, body.mit-handymenue.sm-offen .topbar { padding-left: 0.7rem; }
  body.mit-handymenue .sm-einblenden { display: none; }        /* „Menü“ steht in der Leiste unten */
  body.mit-handymenue.sm-eingeblendet::after { content: none; }
  body.mit-handymenue footer.seitenfuss { margin-left: 0; }

  .hm-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--hm-hoehe);
    padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
    background: var(--karte); border-top: 1px solid var(--rand); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  }
  .hm-leiste-eintrag {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    padding: 0.3rem 0.15rem; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer;
  }
  .hm-leiste-eintrag svg { width: 23px; height: 23px; color: var(--akzent); flex: none; }
  body.nicht-produktiv .hm-leiste-eintrag svg { color: #a10000; }
  .hm-leiste-eintrag span { font-size: 0.68rem; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hm-leiste-eintrag[aria-current="page"] { color: var(--fg); font-weight: 700; box-shadow: inset 0 3px 0 var(--akzent); }
  body.nicht-produktiv .hm-leiste-eintrag[aria-current="page"] { box-shadow: inset 0 3px 0 #a10000; }
  .hm-leiste-menue svg { color: var(--fg); }

  .hm-blatt:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; background: var(--bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.hm-offen { overflow: hidden; }
  .hm-kopf {
    display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.6rem 0.55rem 1rem;
    background: var(--karte); border-bottom: 1px solid var(--rand); font-size: 1.1rem;
  }
  .hm-zu { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; }
  .hm-zu svg { width: 22px; height: 22px; }
  .hm-inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.8rem 0.8rem 1.5rem; }
  .hm-suche { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rand);
              border-radius: 10px; background: var(--karte); margin-bottom: 0.9rem; }
  .hm-titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0.3rem 0.35rem; }
  .hm-favoriten { margin-top: 1rem; }
  .hm-liste { list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
  .hm-liste:empty { display: none; }
  .hm-gruppen > .hm-liste { margin-bottom: 0.6rem; }
  .hm-zeile { display: flex; align-items: center; min-height: 3rem; border-top: 1px solid #eee; }
  .hm-liste > .hm-zeile:first-child { border-top: 0; }
  .hm-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; color: var(--fg); text-decoration: none; }
  .hm-link svg, .hm-gruppe-kopf svg { width: 21px; height: 21px; flex: none; color: var(--akzent); }
  body.nicht-produktiv .hm-link svg, body.nicht-produktiv .hm-gruppe-kopf svg { color: #a10000; }
  .hm-icon-leer { width: 21px; flex: none; }
  .hm-text { flex: 1; min-width: 0; }
  .hm-zusatz { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
  .hm-link[aria-current="page"] { font-weight: 700; background: #eef3fa; }
  .hm-in-leiste .hm-link::after { content: "Leiste"; font-size: 0.65rem; color: var(--muted); border: 1px solid var(--rand); border-radius: 99px; padding: 0 0.4rem; }
  .hm-gesperrt { opacity: 0.4; }
  .hm-stern, .hm-hoch { flex: none; width: 2.8rem; height: 2.8rem; border: 0; background: none; color: #b5b5b5; cursor: pointer; }
  .hm-stern svg, .hm-hoch svg { width: 21px; height: 21px; fill: none; }
  .hm-stern.an { color: #d99400; }
  .hm-stern.an svg { fill: currentColor; }
  .hm-hoch { color: var(--muted); width: 2.4rem; }
  .hm-gruppe { margin-bottom: 0.6rem; }
  .hm-gruppe-kopf {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.1rem; padding: 0.55rem 0.9rem; font: inherit; font-weight: 600;
    text-align: left; color: var(--fg); background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; cursor: pointer;
  }
  /* Gruppenköpfe heben sich ab: getönt, fett; aufgeklappt in Akzentfarbe, damit klar ist, wozu die Einträge darunter gehören */
  .hm-gruppe-kopf { background: #e8eef6; border-color: #cfd9e6; font-weight: 700; }
  .hm-gruppe-kopf[aria-expanded="true"] { border-radius: 10px 10px 0 0; background: #4d75b0; border-color: #4d75b0; color: #fff; }   /* etwas heller als der Akzent, Weiß bleibt gut lesbar (4,6 : 1) */
  .hm-gruppe-kopf[aria-expanded="true"] svg, body.nicht-produktiv .hm-gruppe-kopf[aria-expanded="true"] svg { color: #fff; }
  .hm-gruppe-kopf[aria-expanded="true"] .hm-pfeil { border-color: #fff; }
  .hm-gruppe-kopf[aria-expanded="true"] + .hm-liste { border-top: 0; border-radius: 0 0 10px 10px; }
  .hm-pfeil { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
              transform: rotate(45deg); margin: -0.25rem 0.3rem 0 0; transition: transform 0.15s; }
  .hm-gruppe-kopf[aria-expanded="true"] .hm-pfeil { transform: rotate(-135deg); margin-top: 0.2rem; }
  .hm-gruppe .hm-link { padding-left: 1.4rem; }
  .hm-hinweis { color: var(--muted); font-size: 0.82rem; margin: 0.4rem 0.3rem 0; }
  .hm-zurueck { border: 0; background: none; padding: 0.3rem 0; color: var(--akzent); font: inherit; text-decoration: underline; cursor: pointer; }
  .hm-fuss { margin-top: 1.2rem; }
  .hm-fuss-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.9rem;
                    background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; }
  .hm-fuss-inhalt .sm-benutzer { display: flex; align-items: center; gap: 0.6rem; color: var(--fg); text-decoration: none; }
  .hm-fuss-inhalt .sm-benutzer span, .hm-fuss-inhalt .sm-abmelden span { opacity: 1; pointer-events: auto; }
  .hm-fuss-inhalt .sm-avatar, .hm-fuss-inhalt .sm-benutzer svg { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
  .hm-fuss-inhalt .sm-abmelden button { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--rand); border-radius: 8px;
                                        background: none; padding: 0.4rem 0.7rem; font: inherit; color: var(--fg); cursor: pointer; }
  .hm-fuss-inhalt .sm-abmelden svg { width: 18px; height: 18px; }
}

/* Touch-Geräte (03.10.2026, Handyprüfung Nr. 1): Eingabefelder mindestens 16 px — darunter zoomt iOS beim Antippen in
   die Seite und bleibt dort. max() lässt größere Felder (Terminal) unverändert. */
@media (pointer: coarse) {
  /* :is() hebt Auswahl- und Textfelder auf dieselbe Spezifität wie die Eingabefelder — sonst gewinnen Formularregeln
     wie „form.stammform select { 0.95rem }“; dazu 40 px Mindesthöhe als Tippfläche (Handyprüfung Nr. 1) */
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) { font-size: max(16px, 1em); }
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), select) { min-height: 40px; }
}