/* Hilfeseite (Aufbau wie vsuite/help.php) und Knöpfe Hilfe/Neuerungen in der Kopfzeile des Portals. */
/* Nur die Hilfeseite auf Fensterhöhe: Die Datei wird auch im Portal geladen, dort darf die Seite nicht begrenzt sein */
html:has(> body.uh-seite) { height: 100%; }
body.uh-seite { height: 100%; margin: 0; background: #F3F4F6; display: flex; flex-direction: column; overflow: hidden; font-family: Roboto, Arial, Helvetica, sans-serif; color: #111827; }
.uh-kopf { background: #1E3A8A; color: #fff; flex: 0 0 auto; }
.uh-kopf-innen { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; flex-wrap: wrap; }
.uh-marke { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; }
.uh-marke img { border-radius: 6px; background: #fff; }
.uh-suche { display: flex; align-items: center; gap: .25rem; flex: 1 1 240px; max-width: 520px; }
.uh-suche input[type=search] { flex: 1; min-width: 0; border: 0; border-radius: .5rem; padding: .4rem .7rem; font-size: .92rem; background: #fff; color: #111827; }
.uh-knopf { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; border-radius: .5rem; padding: .35rem .6rem; font-size: .88rem; cursor: pointer; text-decoration: none; }
.uh-knopf:hover { background: rgba(255,255,255,.2); }
.uh-knopf:disabled { opacity: .4; cursor: not-allowed; }
.uh-schliessen { margin-left: auto; }
.uh-treffer-nav { display: inline-flex; align-items: center; gap: .25rem; }
.uh-zaehler { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .88rem; }
#uh-lokal { min-width: 5ch; text-align: right; display: inline-block; }
.uh-gesamt { opacity: .75; }
.uh-layout { flex: 1 1 auto; display: flex; min-height: 0; }
.uh-themen { flex: 0 0 280px; background: #fff; border-right: 1px solid rgba(0,0,0,.08); overflow-y: auto; padding: .5rem 0; }
.uh-thema { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 1rem; color: #111827; text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.uh-thema:hover { background: #F3F4F6; }
.uh-thema.aktiv { background: #E8EDF8; border-left-color: #1E3A8A; font-weight: 600; }
.uh-thema.leer { color: #9CA3AF; }
.uh-zahl { background: #1E3A8A; color: #fff; border-radius: 999px; font-size: .72rem; padding: .1rem .45rem; font-weight: 600; }
.uh-haupt { flex: 1 1 auto; overflow-y: auto; padding: 1.5rem 2rem; }
.uh-text { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1.5rem 2rem; max-width: 900px; line-height: 1.6; }
.uh-text h1 { margin-top: 0; font-size: 1.5rem; color: #1E3A8A; }
.uh-text h2 { margin-top: 1.8rem; font-size: 1.15rem; color: #1E3A8A; }
.uh-text h3 { margin-top: 1.4rem; font-size: 1rem; }
.uh-text a { color: #1E3A8A; }
.uh-text table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.uh-text th, .uh-text td { border-bottom: 1px solid #E5E7EB; padding: .4rem .6rem; text-align: left; }
.uh-text code { background: #F3F4F6; border-radius: 4px; padding: 0 .25rem; }
.uh-text blockquote { margin: 0 0 1rem; padding: .5rem 1rem; border-left: 4px solid #D97706; background: #FDF1E1; border-radius: 0 .5rem .5rem 0; }
.uh-leer { padding: 1rem 0 1.5rem; text-align: center; color: #6B7280; }
.uh-leer .bi { font-size: 1.6rem; }
mark.uh-hit { background: #fff3a0; padding: 0 2px; border-radius: 2px; }
mark.uh-hit.aktiv { background: #ffb74d; outline: 2px solid #f57c00; outline-offset: 1px; }
@media (max-width: 767.98px) {
  .uh-layout { flex-direction: column; }
  .uh-themen { flex: 0 0 auto; max-height: 33vh; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
  .uh-haupt { padding: 1rem; }
  .uh-text { padding: 1rem; }
}

/* Kopfzeile im Portal: Hilfe (?) und Neuerungen (Stern mit rotem Punkt) */
.uge-kopfknopf { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0; background: transparent; color: #4B5563; cursor: pointer; font-size: 1.15rem; text-decoration: none; }
.uge-kopfknopf:hover { background: #F3F4F6; color: #1E3A8A; }
/* Dunkelmodus: hell genug, damit die Symbole sich vom Grau der Kopfzeile abheben */
.dark .uge-kopfknopf { color: #E5E7EB; }
.dark .uge-kopfknopf:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Zahl am Häkchen (offene Vorgänge), rot wie in vsuite */
.uge-zahl { position: absolute; top: -.1rem; right: -.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: #dc2626; color: #fff; font: 700 .65rem/1.1rem Roboto, Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
.dark .uge-zahl { box-shadow: 0 0 0 2px #18181b; }
.uge-todo-leer { padding: .75rem 1rem; font-size: .875rem; color: #6B7280; }
.dark .uge-todo-leer { color: #9CA3AF; }
.uge-punkt { position: absolute; top: .35rem; right: .35rem; width: .5rem; height: .5rem; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px #fff; }

/* Fenster „Was ist neu“ (Inhalt wie vsuite/whatsnew.php) */
.uge-neu-hinter { position: fixed; inset: 0; z-index: 1100; background: rgba(17,24,39,.5); display: none; align-items: center; justify-content: center; padding: 1rem; }
.uge-neu-hinter.offen { display: flex; animation: uge-neu-rein .2s ease-out; }
.uge-neu { width: min(34rem, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; background: #fff; color: #111827; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 60px -15px rgba(0,0,0,.45); }
.dark .uge-neu { background: #1f2937; color: #f3f4f6; }
.uge-neu-kopf { background: #1E3A8A; color: #fff; padding: 1rem 1.25rem; display: flex; align-items: center; gap: .6rem; }
.uge-neu-kopf h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.uge-neu-zu { border: 0; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; padding: .25rem; border-radius: .4rem; }
.uge-neu-zu:hover { background: rgba(255,255,255,.15); }
.uge-neu-inhalt { padding: 1rem 1.25rem; overflow-y: auto; }
.uge-neu-intro { color: #6B7280; font-size: .88rem; margin: 0 0 .5rem; }
.uge-neu-version { text-transform: uppercase; color: #6B7280; font-size: .75rem; font-weight: 700; letter-spacing: .04em; margin: 1rem 0 .5rem; }
.uge-neu-punkt { display: flex; gap: .9rem; margin-bottom: .9rem; }
.uge-neu-punkt > .bi { font-size: 1.4rem; color: #D97706; line-height: 1; margin-top: .15rem; }
.uge-neu-titel { font-weight: 600; }
.uge-neu-text { color: #4B5563; font-size: .9rem; line-height: 1.5; }
.dark .uge-neu-text { color: #d1d5db; }
.uge-neu-link { font-size: .88rem; color: #1E3A8A; text-decoration: none; font-weight: 600; }
.dark .uge-neu-link { color: #93c5fd; }
.uge-neu-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-top: 1px solid #E5E7EB; }
.dark .uge-neu-fuss { border-top-color: rgba(255,255,255,.1); }
.uge-neu-fuss span { color: #6B7280; font-size: .8rem; }
.uge-neu-ok { border: 0; border-radius: 999px; background: #D97706; color: #fff; font-weight: 600; padding: .5rem 1.2rem; cursor: pointer; }
.uge-neu-ok:hover { background: #B45F05; }
.uge-neu-ok.still { background: transparent; color: #374151; border: 1px solid #D1D5DB; }
@keyframes uge-neu-rein { from { opacity: 0; } }