/* ============================================================================
   BASEPLATE - www/css/bp-base.css (O17 Seitenballast, 29.10.2026)
   ----------------------------------------------------------------------------
   Grundtoene, Hell-Adapter und eigene Bauteile (Schalter, Auswahlfeld, Chips,
   Eingabefeld, Karten-Tabellen, Ladebalken, Meldungen, CMS-Inhalt, Fokus).
   Stand bis zum 29.10.2026 als <style id="bp-base"> in JEDER Seite (~16 KB
   HTML je Aufruf); jetzt eine Datei, die der Browser einmal holt und mit der
   Fassungsnummer (?v=Aenderungszeit) ein Jahr behaelt (www/.htaccess).

   REIHENFOLGE BLEIBT: cfg/header.php bindet die Datei an derselben Stelle ein,
   an der vorher der Block stand - VOR bp-page und VOR app.css. Wo eine Regel
   hier und eine Utility-Klasse dieselbe Eigenschaft setzen (.bp-input und
   px-3), gewinnt bei gleicher Spezifitaet weiterhin die Utility.

   Kein Flackern: ein <link rel="stylesheet"> im Kopf blockiert die erste
   Darstellung genau wie der Block vorher. Das Thema (Klasse dark/light am
   <html>) setzt weiterhin das kleine Anti-FOUC-Skript davor.
   ============================================================================ */
/*
   ===================================================================
   GRUNDTOENE
   Das dunkle Thema ist der Normalfall; das helle ist ein Aufsatz
   darauf. Andersherum waere es dieselbe Menge CSS - so herum steht sie
   aber an einer Stelle statt in jeder Vorlage.
   ===================================================================
*/
body { background-color: #12142A; color: #F2F4F7; }
/* do4u (M2): Grundtypografie laut CI - Atkinson Hyperlegible 17 px, Ueberschriften Bricolage Grotesque eng, Code JetBrains Mono. */
body { font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
h1, h2, h3, .font-display { font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
code, pre, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }
.do4u-vier { stroke: #8C8CFF; }
html.light .do4u-vier { stroke: #3B3BF5; }
/*
   do4u (H0): Umschalter Privat/Unternehmen der Preistabelle (Startseite und /pricing): der gewaehlte
   Knopf traegt die Primaerfarbe, der Tastaturfokus liegt auf dem versteckten Radio und wird am Label gezeigt.
*/
.do4u-modus:has(input:checked) { background: #3B3BF5 !important; border-color: transparent !important; color: #fff !important; }
.do4u-modus:has(input:focus-visible) { outline: 2px solid #8C8CFF; outline-offset: 2px; }
html.light .do4u-modus:has(input:checked) { background: #3B3BF5 !important; border-color: transparent !important; color: #fff !important; }
html.light .do4u-modus:has(input:focus-visible) { outline-color: #3B3BF5; }
::selection { background: rgba(140,140,255,.30); }

/* Ein Bildlauf-Balken, der nicht aussieht wie aus 2009. */
* { scrollbar-width: thin; scrollbar-color: #3A3A4E transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3A3A4E; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #4C4C63; background-clip: content-box; }
html.light * { scrollbar-color: #CBD5E1 transparent; }
html.light *::-webkit-scrollbar-thumb { background: #CBD5E1; background-clip: content-box; }

/*
   ===================================================================
   HELLES THEMA - der Adapter.
   Die Vorlagen benutzen corporate-900/800/700; hier werden daraus
   Weiss und Slate. Deshalb steht in keiner Seitendatei ein
   "dark:"-Praefix und keine zweite Farbliste.
   ===================================================================
*/
html.light body { background-color: #F2F4F7 !important; color: #191B33 !important; }
html.light .bg-corporate-900 { background-color: #FFFFFF !important; }
html.light .bg-corporate-800 { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light .bg-corporate-700 { background-color: #F1F5F9 !important; }

/*
   JEDE Deckkraft-Variante, nicht eine Liste der gerade benutzten.
   Die Liste stand hier vorher (/60 /50 /40 /30) und liess genau die
   eine durch, die die Kopfleiste benutzt: bg-corporate-900/80. Ergebnis
   war eine dunkle Leiste im hellen Thema - waehrend die Schrift darauf
   von den Regeln darueber auf Dunkelblau umgestellt wurde. Dunkel auf
   dunkel, und zwar an der Stelle, die auf jeder Seite steht.

   Eine Aufzaehlung ist hier die falsche Bauform: sie ist erst dann
   vollstaendig, wenn niemand mehr eine neue Deckkraft benutzt, und das
   merkt man nicht beim Schreiben, sondern beim Ansehen.

   Der :not()-Riegel haelt Hover-Deklarationen heraus - die duerfen
   nicht dauerhaft greifen. Ihren eigenen Hell-Ton bekommen sie von der
   Regel darunter.
*/
html.light [class*="bg-corporate-900/"]:not([class*="hover:bg-corporate-900/"]),
html.light [class*="bg-corporate-800/"]:not([class*="hover:bg-corporate-800/"]) {
    background-color: rgba(255,255,255,.9) !important; border-color: #E2E8F0 !important;
}
html.light [class*="bg-corporate-700/"]:not([class*="hover:bg-corporate-700/"]) {
    background-color: #F1F5F9 !important; border-color: #E2E8F0 !important;
}

html.light .text-white { color: #191B33 !important; }
html.light .text-gray-100 { color: #191B33 !important; }
html.light .text-gray-200 { color: #1E293B !important; }
html.light .text-gray-300 { color: #334155 !important; }
html.light .text-gray-400 { color: #5B6075 !important; }
html.light .text-gray-500 { color: #5B6075 !important; }
html.light .border-white\/5  { border-color: #E2E8F0 !important; }
html.light .border-white\/10 { border-color: #E2E8F0 !important; }
html.light .border-white\/20 { border-color: #CBD5E1 !important; }
html.light .bg-white\/5  { background-color: #F1F5F9 !important; }
html.light .bg-white\/10 { background-color: #E2E8F0 !important; }
html.light .divide-white\/5 > * + * { border-color: #E2E8F0 !important; }

/*
   DER HOVER DAZU. Die Regeln oben zwingen corporate-* mit !important
   auf Weiss; ein hover:bg-corporate-700 aus Tailwind traegt keines und
   kaeme deshalb nie an - die betroffenen Bedienelemente haetten im
   hellen Thema GAR KEINE Rueckmeldung. Angehaengt wird an der
   Deklaration des Hovers, nicht am Grundton: so bekommt genau die
   Menge einen Hover, die auch einen wollte.
*/
html.light [class*="hover:bg-corporate-"]:hover { background-color: #F1F5F9 !important; }
html.light [class*="hover:bg-white/"]:hover     { background-color: #F1F5F9 !important; }

/*
   Gefuellte Akzent-Knoepfe im HELLEN Thema.
   accent-600 besteht AA schon von sich aus (5,70:1). accent-700
   (7,10:1) haelt trotzdem her: Tailwind faerbt Hover HELLER, und
   heller heisst bei weisser Schrift schlechter - ohne diese Regel
   waere der Hover der schlechtere Zustand.
*/
html.light .bg-accent-500,
html.light .bg-accent-600 { background-color: #3B3BF5 !important; color: #fff !important; }
/* do4u: dasselbe fuer gewaehlte Reiter (aria-selected:bg-accent-600 in www/werkzeuge.php) - sonst dunkle Schrift auf Blau. */
html.light .aria-selected\:bg-accent-600[aria-selected="true"] { background-color: #3B3BF5 !important; color: #fff !important; border-color: transparent !important; }
html.light .hover\:bg-accent-500:hover,
html.light .hover\:bg-accent-400:hover { background-color: #2B2BD0 !important; }
html.light .text-accent-400 { color: #3B3BF5 !important; }

/*
   SIGNALFARBEN IM HELLEN THEMA.

   Rot, Bernstein, Gruen und Blau markieren im ganzen Admin Zustaende:
   offene Anfrage, Fehlerstufe, Sendezustand, Einrichtungspunkt. Das
   Muster ist ueberall dasselbe - ein 10-15%-Hintergrund derselben
   Farbe, darauf der 300er oder 400er Ton.

   Im DUNKLEN Thema stimmt das: der Hintergrund wird fast schwarz, der
   helle Ton leuchtet. Im HELLEN wird derselbe Hintergrund zu einem
   fast weissen Hauch - und amber-400 auf hellem Bernstein misst 1,5:1.
   Das ist nicht schwer zu lesen, das ist nicht zu lesen.

   Der Adapter hat diese Familien bisher nicht angefasst; er kannte nur
   corporate, white, gray und accent. Hier stehen sie nach, mit den
   700er/800er Toenen und gemessenem Kontrast auf dem jeweiligen
   hellen Hintergrund:

     amber-800  #92400E auf Bernstein-Hauch  6,2:1
     red-700    #B91C1C auf Rot-Hauch        5,7:1
     emerald-700 #047857 auf Gruen-Hauch     4,9:1
     sky-700    #0369A1 auf Blau-Hauch       5,3:1

   Die Hintergruende BLEIBEN wie sie sind: ein Hauch Farbe auf Weiss
   ist im hellen Thema genau richtig, und die Zuordnung Farbe/Zustand
   bleibt dieselbe wie im dunklen.
*/
html.light .text-amber-200,
html.light .text-amber-300,
html.light .text-amber-400   { color: #92400E !important; }
html.light .text-red-300,
html.light .text-red-400     { color: #B91C1C !important; }
html.light .text-emerald-300,
html.light .text-emerald-400 { color: #047857 !important; }
html.light .text-sky-300     { color: #0369A1 !important; }
html.light .text-indigo-300  { color: #4338CA !important; }
html.light .text-blue-400    { color: #1D4ED8 !important; }

/*
   Der gelbe Zaehler am Menuepunkt ist der eine Fall, in dem die Farbe
   FLAECHE ist und nicht Schrift: bg-amber-500 mit schwarzem Text. Der
   bleibt in beiden Themen gleich - schwarz auf Bernstein misst 8,9:1.
*/
html.light .text-accent-300 { color: #2B2BD0 !important; }

/*
   ===================================================================
   SCHALTER (iOS-Bauform)
   -------------------------------------------------------------------
   EIGENE KLASSE UND KEINE TAILWIND-UTILITIES, und das ist der Grund:
   die Schalter hingen vorher an "bg-white/10 checked:bg-accent-600".
   Der Hell-Adapter oben setzt .bg-white\/10 MIT !important, das
   checked: aus Tailwind traegt keines - im hellen Thema sahen an und
   aus deshalb exakt gleich aus, nur der Knopf stand links oder rechts.
   Ein Schalter, dessen Zustand man nicht sieht, ist kein Schalter.

   Dieselbe Falle wie bei den Hover-Farben, nur eine Stufe fieser: im
   dunklen Thema faellt sie nicht auf, und dort wird entwickelt.

   Ein Bauteil mit eigenen Klassen kann so nicht ueberfahren werden -
   es steht ausserhalb des Adapters. Fuer alles, was einen ZUSTAND
   zeigt, ist das die richtige Bauform.
   ===================================================================
*/
/* VERSTECKT HEISST VERSTECKT.
   Das Attribut hidden gilt im Browser mit display:none - aber jede
   Utility-Klasse mit einem eigenen display (block, flex, grid) ist
   Autorenebene und gewinnt. Am 09.09.2026 standen deshalb beide
   Symbole des Kennwort-Auges uebereinander. Wer hidden setzt, meint
   es; die Klassen bleiben davon unberuehrt, solange das Attribut
   nicht gesetzt ist. */
[hidden] { display: none !important; }

.bp-switch {
    appearance: none; -webkit-appearance: none;
    width: 2.5rem; height: 1.25rem; border-radius: 9999px;
    background: #3A3A4E; position: relative; cursor: pointer;
    transition: background-color .18s ease; flex-shrink: 0; margin: 0;
}
.bp-switch::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 1rem; height: 1rem; border-radius: 9999px; background: #fff;
    transition: transform .18s ease; box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.bp-switch:checked { background: #3B3BF5; }
.bp-switch:checked::before { transform: translateX(1.25rem); }
.bp-switch:disabled { opacity: .45; cursor: not-allowed; }
html.light .bp-switch { background: #CBD5E1; }
html.light .bp-switch:checked { background: #3B3BF5; }
html.light .bp-switch::before { box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/*
   ===================================================================
   AUSWAHLFELD
   -------------------------------------------------------------------
   Ein natives <select> sieht in jedem Betriebssystem anders aus und
   laesst sich nicht gestalten. Deshalb dieselbe Bauform wie ueberall
   sonst: Knopf + Menue, geoeffnet vom gemeinsamen Menue-Zuhoerer in
   app.js. Der Wert steht in einem versteckten Feld - fuer ein Formular
   bleibt es damit ein ganz normales Feld.
   ===================================================================
*/
.bp-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; min-height: 2.5rem; padding: .5rem .75rem;
    background: #12142A; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem;
    color: #F9FAFB; font-size: .875rem; text-align: left; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.bp-select-btn:hover { border-color: rgba(255,255,255,.2); }
.bp-select-btn[aria-expanded="true"] { border-color: #6363F7; }
.bp-select-btn:disabled { opacity: .5; cursor: not-allowed; }
.bp-select-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 60;
    background: #1A1D3A; border: 1px solid rgba(255,255,255,.15); border-radius: .75rem;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); overflow-y: auto; max-height: 17rem; padding: .35rem;
}
.bp-select-opt {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .625rem; border-radius: .5rem; font-size: .875rem;
    color: #D1D5DB; text-align: left; cursor: pointer; transition: background-color .12s ease;
}
.bp-select-opt:hover { background: rgba(255,255,255,.06); color: #fff; }
.bp-select-opt[aria-selected="true"] { background: rgba(99,99,247,.14); color: #8C8CFF; font-weight: 700; }
html.light .bp-select-btn { background: #fff; border-color: #CBD5E1; color: #191B33; }
html.light .bp-select-btn:hover { border-color: #94A3B8; }
html.light .bp-select-btn[aria-expanded="true"] { border-color: #3B3BF5; }
html.light .bp-select-menu { background: #fff; border-color: #E2E8F0; box-shadow: 0 20px 40px -12px rgba(15,23,42,.18); }
html.light .bp-select-opt { color: #334155; }
html.light .bp-select-opt:hover { background: #F1F5F9; color: #191B33; }
html.light .bp-select-opt[aria-selected="true"] { background: #F5F3FF; color: #3B3BF5; }

/*
   ===================================================================
   FILTER-KAESTCHEN (Radio- und Checkbox-Knoepfe)
   -------------------------------------------------------------------
   Dieselbe Ueberlegung wie beim Schalter: eigene Klassen, damit der
   Hell-Adapter den ANGEHAKTEN Zustand nicht ueberfaehrt. Bei
   MousePlayer steht dafuer ein eigener Regelblock mit hoher
   Spezifitaet gegen peer-checked - hier gibt es das Problem gar nicht
   erst, weil keine Utility-Klasse im Spiel ist.
   ===================================================================
*/
.bp-chip { display: none; }
.bp-chip + span {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .375rem .625rem; border-radius: .5rem; cursor: pointer;
    font-size: .75rem; font-weight: 600; line-height: 1.2;
    background: #1A1D3A; border: 1px solid rgba(255,255,255,.08); color: #9CA3AF;
    transition: all .12s ease; user-select: none;
}
.bp-chip + span:hover { border-color: rgba(255,255,255,.2); color: #fff; }
.bp-chip:checked + span { background: rgba(99,99,247,.12); border-color: #6363F7; color: #8C8CFF; }
html.light .bp-chip + span { background: #fff; border-color: #CBD5E1; color: #64748B; }
html.light .bp-chip + span:hover { border-color: #94A3B8; color: #191B33; }
html.light .bp-chip:checked + span { background: #F5F3FF; border-color: #3B3BF5; color: #3B3BF5; }

/* Segment-Umschalter (Contains / Exact / Regex): dieselbe Mechanik,
   nur enger und in einer gemeinsamen Huelle. */
.bp-seg { display: inline-flex; padding: 2px; border-radius: .5rem; background: #1A1D3A; border: 1px solid rgba(255,255,255,.08); }
.bp-seg .bp-chip + span { background: transparent; border: 0; padding: .25rem .5rem; font-size: .6875rem; }
.bp-seg .bp-chip:checked + span { background: #3B3BF5; color: #fff; }
html.light .bp-seg { background: #F1F5F9; border-color: #CBD5E1; }
html.light .bp-seg .bp-chip + span { background: transparent; }
html.light .bp-seg .bp-chip:checked + span { background: #3B3BF5; color: #fff; }

/*
   Ein einfaches Haekchen.
   accent-color statt eines nachgebauten Kaestchens: eine Zeile, das
   native Element bleibt erhalten (Tastatur, Screenreader, indeterminate)
   und die Farbe stimmt trotzdem. Die vorherige Fassung trug
   "bg-corporate-900 text-accent-600" - bg-* wurde vom Hell-Adapter auf
   Weiss gezwungen, und text-* wirkt an einer Checkbox ohne das
   forms-Plugin von Tailwind ueberhaupt nicht. Das Ergebnis war ein
   Kaestchen im Betriebssystem-Blau mitten in einer violetten
   Oberflaeche.
*/
.bp-check { width: 1.05rem; height: 1.05rem; accent-color: #3B3BF5; cursor: pointer; flex-shrink: 0; }
html.light .bp-check { accent-color: #3B3BF5; }

/* Ein Eingabefeld, ueberall gleich. */
.bp-input {
    width: 100%; padding: .5rem .75rem; border-radius: 8px;
    background: #12142A; border: 1px solid rgba(255,255,255,.1);
    color: #F9FAFB; font-size: .875rem; transition: border-color .15s ease;
}
.bp-input::placeholder { color: #6B7280; }
.bp-input:focus { outline: none; border-color: #6363F7; }
html.light .bp-input { background: #fff; border-color: #CBD5E1; color: #191B33; }
html.light .bp-input:focus { border-color: #3B3BF5; }

/*
   ===================================================================
   TABELLEN WERDEN AUF SCHMALEN BILDSCHIRMEN ZU KARTEN.
   Eine Tabelle, die umbricht, kann gar nicht waagerecht ueberlaufen -
   unabhaengig davon, wie viele Spalten spaeter jemand ergaenzt.
   data-label an einer Zelle wird zur Beschriftung in der Karte.
   ===================================================================
*/
@media (max-width: 767px) {
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table thead { display: none; }
    .responsive-table tbody { display: flex; flex-direction: column; gap: 1rem; padding: .5rem; }
    .responsive-table tr { background: rgba(38,42,77,.5); border: 1px solid rgba(255,255,255,.05); border-radius: .75rem; }
    .responsive-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: .75rem 1rem !important; border-bottom: 1px solid rgba(255,255,255,.03) !important;
        min-height: 3rem; white-space: normal !important; word-break: break-word; }
    .responsive-table td:last-child { border-bottom: none !important; background: rgba(0,0,0,.15);
        border-radius: 0 0 .75rem .75rem; }
    .responsive-table td::before { content: attr(data-label); font-size: .65rem; font-weight: 700;
        text-transform: uppercase; color: #9CA3AF; flex-shrink: 0; }
    .responsive-table td.hidden, .responsive-table th.hidden { display: none; }
    html.light .responsive-table tr { background: #fff; border-color: #E2E8F0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
    html.light .responsive-table td { border-bottom-color: #F1F5F9 !important; }
    html.light .responsive-table td:last-child { background: #F2F4F7; }
    html.light .responsive-table td::before { color: #64748B; }
}

/* --- AJAX-Navigation: Ladebalken und Zustand ---------------------- */
#bp-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, #3B3BF5, #B4B4FF); z-index: 9999;
    transition: width .2s ease, opacity .3s ease; opacity: 0; pointer-events: none; }
#bp-progress.on { opacity: 1; }
body.bp-loading #bp-content { opacity: .55; transition: opacity .15s ease; }

/* --- Meldungen ---------------------------------------------------- */
#bp-toasts { position: fixed; z-index: 9998; right: 1rem; bottom: 1rem; display: flex;
    flex-direction: column; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.bp-toast { padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; line-height: 1.4;
    border: 1px solid rgba(255,255,255,.1); background: #262A4D; color: #F9FAFB;
    box-shadow: 0 10px 25px rgba(0,0,0,.35); animation: bpToastIn .18s ease-out; }
.bp-toast.err { border-color: rgba(248,113,113,.45); background: #3F1D1D; }
.bp-toast.ok  { border-color: rgba(52,211,153,.45); background: #10281F; }
html.light .bp-toast { background: #fff; color: #191B33; border-color: #E2E8F0; }
html.light .bp-toast.err { background: #FEF2F2; border-color: #FCA5A5; }
html.light .bp-toast.ok  { background: #ECFDF5; border-color: #6EE7B7; }
@keyframes bpToastIn { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }

/* --- Inhalt aus dem CMS und dem Blog ------------------------------- */
.prose-bp h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose-bp h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose-bp p  { margin: 0 0 1rem; line-height: 1.75; }
.prose-bp ul, .prose-bp ol { margin: 0 0 1rem 1.25rem; line-height: 1.75; }
.prose-bp ul { list-style: disc; } .prose-bp ol { list-style: decimal; }
.prose-bp li { margin-bottom: .35rem; }
.prose-bp a  { color: #8C8CFF; text-decoration: underline; text-underline-offset: 2px; }
html.light .prose-bp a { color: #3B3BF5; }
.prose-bp table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
/* 18.10.2026: Breite Tabellen und lange Bezeichner (Tabellennamen, Adressen) schoben die ganze Seite
   auf dem Handy seitlich. Jetzt umbricht der Text in der Zelle, und was dann noch zu breit ist,
   scrollt innerhalb der Tabelle statt der Seite. */
.prose-bp td, .prose-bp th, .prose-bp code, .prose-bp a { overflow-wrap: anywhere; }
/* Lange deutsche Woerter ("Auftragsverarbeitungsvertrag") und ausgeschriebene Adressen im Fliesstext. */
.prose-bp p, .prose-bp li, h1, h2, h3, footer a { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) { .prose-bp table { display: block; overflow-x: auto; } }
.prose-bp th, .prose-bp td { border: 1px solid rgba(255,255,255,.1); padding: .5rem .75rem; text-align: left; }
html.light .prose-bp th, html.light .prose-bp td { border-color: #E2E8F0; }

/* Tastaturbedienung sichtbar lassen. :focus-visible statt :focus -
   sonst umrandet jeder Mausklick den Knopf. */
:focus-visible { outline: 2px solid #8C8CFF; outline-offset: 2px; }
html.light :focus-visible { outline-color: #3B3BF5; }

/* Paket adminsuche: Suche in den Einstellungen blendet per hidden aus; Flex-/Grid-Klassen duerfen das nicht uebersteuern */
#adm-sf-wurzel [hidden] { display: none !important; }