.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #1a1a2e; color: #e0e0e0;
       display: flex; flex-direction: column;
       min-height: 100vh; min-height: 100dvh; }
.topbar { background: #16213e; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 16px;
          display: flex; justify-content: space-between; align-items: center;
          border-bottom: 1px solid #333; position: relative; z-index: 2; }
.topbar h1 { font-size: 20px; display: flex; align-items: center; gap: 8px;
             flex: 1; min-width: 0; }
.topbar h1 img { height: 24px; width: auto; flex: none; }
.topbar h1 span { color: #e94560; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.topbar a { color: #e94560; text-decoration: none; margin-left: 16px; }
/* F90: Benutzer-Icon (Kreis + Person) ersetzt auf Mobil den Benutzernamen */
.topbar details.user-drop > summary .user-avatar { display: none; }
.topbar details.user-drop > summary .user-avatar circle,
.topbar details.user-drop > summary .user-avatar path { color: inherit; }
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px;
             padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
h2 { font-size: 18px; margin: 24px 0 12px; color: #e94560; }
h2:first-child { margin-top: 0; }
.card { background: #16213e; border-radius: 12px; padding: 20px; margin-bottom: 16px;
        border: 1px solid #333; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #2a2a4a; }
th { color: #888; font-weight: 600; }
input, select { padding: 8px; border: 1px solid #333; border-radius: 6px;
                background: #0f3460; color: #fff; font-size: 14px; }
button { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer;
         font-size: 13px; font-weight: 600; }
/* ── Buttons (F72): EIN Design app-weit — farbiger Hintergrund + abgerundete Ecken.
   Referenz: Zurueck-Button auf der Startseite (graue Flaeche, Ruhe) +
   blauer Hover. Farben kontextuell: primary rot, secondary grau, danger dunkelrot. ── */
.btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none;
}
.btn-primary { background: #e94560; color: #fff; }
.btn-primary:hover { background: #d63851; }
.btn-secondary { background: #333; color: #ccc; }
.btn-secondary:hover { background: #0f3460; color: #fff; }
.btn-danger { background: #8b0000; color: #fff; }
.btn-danger:hover { background: #a30000; }
.btn-mini { padding: 4px 10px; font-size: 12px; }
.btn-back { margin-bottom: 16px; }
/* F100: Aktions-Zellen app-weit einheitlich (anlagen.html-Muster) —
   enge Screens: Buttons wickeln sauber um statt zu stapeln/ueberzulaufen */
.actions-inline { display: inline-flex; gap: 6px; align-items: center;
                  flex-wrap: wrap; justify-content: flex-end; }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
/* URL-Eingabefelder: Desktop min. 380px breit; Mobile darf flex-basis NICHT
   als Hoehe greifen (column-Flexbox) → wird in der Media-Query ueberschrieben */
.url-field { flex: 1 1 380px; font-size: 16px; }
.hint { color: #666; font-size: 12px; margin-top: 4px; }
/* F73: Meldungsboxen, Leer-/Hinweiszeilen, dezent (global statt pro Template) */
.msg { padding: 12px 16px; border-radius: 6px; margin: 16px 0; font-size: 14px;
       border: 1px solid #333; }
.msg.ok { background: #1d3a2a; color: #95d5b2; border-color: #2d6a4f; }
.msg.err { background: #3a1d1d; color: #d59595; border-color: #6a2d2d; }
.msg .btn-mini { float: right; margin: -2px 0 0 8px; }
.empty { color: #666; text-align: center; padding: 24px; }
.muted { color: #888; font-size: 12px; }
.okmsg { background: #1b4332; color: #95d5b2; padding: 10px 16px; border-radius: 8px;
         margin-bottom: 12px; font-size: 14px; }
.badge { display: inline-block; background: #e94560; color: #fff;
         padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.badge-gray { background: #333; }
.badge-warn { background: #8a6d1a; }
.codes { font-family: monospace; word-break: break-all; }

/* Navigation */
.nav { background: #16213e; border-bottom: 1px solid #333;
       display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
       padding: 8px 24px; }
.nav a { color: #aaa; text-decoration: none; padding: 6px 14px;
         border-radius: 6px; font-size: 13px; }
.nav a:hover { background: #0f3460; color: #fff; }
.nav a.active { background: #e94560; color: #fff; font-weight: 600; }
.nav .spacer { flex: 1; }

/* Fußzeile — ans Seitenende (F98/v1.0.96): vorher `position: fixed` klebte sie beim
   Scrollen ueber dem Inhalt (iPhone-Foto 30.08. — Footer mitten zwischen den
   fluss) wurde entfernt: 6 Templates trugen lokale Inline-Regeln mit
   position:fixed nach dem admin.css-Link (gleiche Spezifitaet, spaeter gewinnt)
   → der F98-Sticky-Fix wirkte nie. F111-Nachtrag (v1.0.116, Axel: „am Ende des
   Sichtbereiches fixiert“): JETZT bewusst position:fixed am Viewport-Unterrand +
   .container-padding-bottom calc(72px + safe-area) als Platzhalter in allen
   Templates (kein Overlay beim Scrollen). */
.footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
          text-align: center;
          padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
          color: #555; font-size: 12px;
          background: #16213e; border-top: 1px solid #222; }

/* ── Mobil (Hamburger-Menü + schmale Screens) ── */
.hamburger { display: none; font-size: 22px; cursor: pointer;
             color: #e94560; background: none; border: none;
             padding: 4px 8px; line-height: 1; }
@media (max-width: 640px) {
    /* F101/F99: Aktions-Buttons in Tabellen duerfen umbrechen statt ueberzulaufen.
       nowrap liegt auf den td-Zellen (style) und erbt in die Buttons — im MQ aufheben. */
    .actions-inline { flex-wrap: wrap; }
    .container table td { white-space: normal; }
                .hamburger { display: inline-block; }
    .nav { display: none; flex-direction: column; padding: 8px 12px; gap: 2px; }
    .nav a { padding: 14px 12px; font-size: 15px; border-bottom: 1px solid #222; border-radius: 0; }
    .nav a:last-child { border-bottom: none; }
    .nav .spacer { display: none; }
    #nav-open:checked ~ .nav { display: flex; }
    .topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }
    .topbar h1 { font-size: 17px; }
    .topbar details.user-drop > summary { max-width: none; padding: 4px; }
    .topbar details.user-drop > summary .user-avatar { display: block; }
    .topbar details.user-drop > summary .user-name,
    .topbar details.user-drop > summary .user-caret { display: none; }
    .container { padding: 16px 14px 60px; }
    .card { padding: 16px; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
    .form-row { flex-direction: column; align-items: stretch; }
    /* flex-basis 380px wuerde in der column-Flexbox als HOEHE greifen → zuruecksetzen */
    .url-field { flex: 1 1 auto; min-height: 44px; }
    .btn-primary, .btn-secondary, .btn-danger { width: 100%; min-height: 44px; padding: 14px 12px; }
    .container table button, .container table a.btn-secondary, .container table a.btn-danger { width: auto; min-height: auto; padding: 8px 12px; font-size: 13px; }
    /* F100: Formular-Zeilen-Buttons (form-row) mobil KOMPAKT statt Vollbreite —
       einzelnstehende Hauptbuttons (z.B. Login, ein form ohne form-row) behalten
       die Vollbreite; Ursache war align-items:stretch der column-form-row,
       nicht width:100% (iPhone: /benutzer „Benutzer anlegen“ war Kartengross) */
    .form-row .btn-primary, .form-row .btn-secondary, .form-row .btn-danger { width: auto; min-height: auto; padding: 8px 14px; align-self: flex-start; }
    .codes { font-size: 14px; }
}
    .header-wrap { position: sticky; top: 0; left: 0; right: 0;
  z-index: 30; background: #16213e; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ── Scrollbars an das Dark-Design anpassen (app-weit) ──── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }

/* ── Tabellen: Filter + Einklappen (Admin) ─────────────── */
.tbl-head { display: flex; align-items: center; gap: 8px; }
.collapse-btn { background: none; border: none; padding: 2px; cursor: pointer;
                color: #e94560; display: inline-flex; align-items: center; }
.collapse-btn:hover { opacity: .8; }
.chev { transition: transform .18s ease; }
.tbl-wrap.collapsed .chev { transform: rotate(-90deg); }
.tbl-wrap.collapsed .tbl-filters,
.tbl-wrap.collapsed table { display: none; }
.tbl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tbl-filters input, .tbl-filters select { background: #0f3460; border: 1px solid #333;
                border-radius: 6px; color: #fff; padding: 8px 10px; }
.tbl-filters input[type="text"] { width: 220px; }
.tbl-filters select { max-width: 240px; }
.tbl-count { color: #666; font-size: 12px; font-weight: 400; margin-left: auto; }
@media (max-width: 640px) {
    .tbl-filters { flex-direction: column; align-items: stretch; }
    .tbl-filters input[type="text"],
    .tbl-filters select { width: 100%; max-width: none; }
}

    /* ── Combobox (Dropdown mit Suchfeld, ab 3 Zeichen) ─────── */
    .cb { position: relative; flex: 1 1 0; min-width: 260px; }
    .cb-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #0f3460; border: 1px solid #333; border-radius: 6px; color: #fff;
  padding: 9px 10px; font-size: 16px; cursor: pointer; text-align: left; }
    .cb-trigger:hover { border-color: #555; }
    .cb-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cb-value.placeholder { color: #8b93a7; }
    .cb-chev { flex-shrink: 0; color: #e94560; transition: transform .18s ease; }
    .cb.open .cb-chev { transform: rotate(180deg); }
    .cb-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: #16213e; border: 1px solid #333; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 8px; }
    .cb-pop[hidden] { display: none; }
    .cb-search { width: 100%; box-sizing: border-box; font-size: 16px; background: #0f3460;
  border: 1px solid #333; border-radius: 6px; color: #fff; padding: 8px 10px; }
    .cb-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
    .cb-list li { padding: 7px 10px; border-radius: 6px; cursor: pointer; color: #e0e0e0; }
    .cb-list li:hover { background: rgba(233,69,96,.16); color: #fff; }
    .cb-list li.empty { color: #8b93a7; cursor: default; background: none; }
    .cb-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
    @media (max-width: 640px) { .cb { min-width: 100%; } }

/* ── F79: Dialog („Instanz anlegen“) — natives <dialog>, zentrale Klasse ── */
.inst-create { margin-top: 4px; }
dialog.dlg {
    background: #1e2340; color: #e8ecf8; border: 1px solid #3a3f5c;
    border-radius: 8px; padding: 18px 20px; max-width: 420px; width: 100%;
    box-sizing: border-box;
    /* F81: explizit mittig — der CSS-Reset (margin: 0) schlägt sonst die
       UA-Zentrierung des nativen <dialog> (margin:auto + inset-block) → links oben */
    position: fixed; inset: 0; margin: auto;
}
dialog.dlg::backdrop { background: rgba(0, 0, 0, .55); }
/* ── F118.2: Info-Icon (Hilfe zur Versions-Suche) — Dark-UI: Hover nur Rahmen, kein Lift ── */
.btn-icon {
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: #9aa3ad; padding: 2px 4px; cursor: pointer; line-height: 0; flex: none;
}
.btn-icon:hover { border-color: #6f7891; color: #d8dee9; }
.btn-icon:active { transform: translateY(1px); }
.btn-icon svg { display: block; }
/* ── F118.3: Versions-Suche-Popup — kompakt: Bedien-Grid + Beispiel-Kacheln ── */
.dlg-sub { margin: 4px 0 0; color: #9aa3ad; font-size: 13px; }
.vif-grid { display: grid; gap: 8px; margin: 10px 0 12px; }
.vif-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; }
.vif-key { color: #9aa3ad; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.vif-val { color: #e8ecf8; }
.vif-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vif-ex { background: #171c33; border: 1px solid #2c3250; border-radius: 6px; padding: 6px 8px; }
.vif-ex code { color: #ffb74d; }
.vif-ex span { display: block; font-size: 12px; color: #9aa3ad; margin-top: 2px; }
.vif-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; flex-wrap: wrap; }
@media (max-width: 400px) { .vif-examples { grid-template-columns: 1fr; } }
/* F97 (v1.0.95): breite Variante fuer das Abruf-Ergebnis (Anlagen-Updates).
   F102 (v1.0.100): Regel NACHGETRAGEN — F97 hat nur den Kommentar hinterlassen,
   die .dlg.wide-Regel selbst fehlte → Dialog fiel auf dialog.dlg max-width:420px
   (F79-„Instanz anlegen“) zurueck → auf dem PC zu schmal, die Aktionstabelle
   (Installieren + Planen-Datumsfeld) lief horizontal ueber (Axel-Screenshot 30.08.) */
.dlg.wide table { width: 100%; }
/* F102c: breite Dialog-Variante mit Basis-Spezifität (dialog.dlg 0,1,1 schlägt sonst
   .dlg.wide 0,1,0 → max-width:420 blieb in der echten App aktiv, Fixture war trügerisch).
   width:max-content = inhaltsgenaue Breite (keine überbreiten Textspalten/Lücken). */
dialog.dlg.wide { max-width: min(96vw, 1200px); width: max-content; }
/* F102c: Datumsauswahl VOLL anzeigen — 145px schnitt „30.08.2026 17:30“ + Kalender-Icon ab
   (Axel-Screenshot 30.08. 15:40); 170px = Format + Icon komplett; Dialog ist seither
   inhaltsgenau (width:max-content), die Ueberbreite der Textspalten entfaellt automatisch */
.dlg.wide input[type="datetime-local"] { width: 170px; }
/* F102b: Aktionszelle nowrap (F75-Muster) — zwingt die inline-flex-Buttons in EINE Zeile
   und gibt der Spalte ihre Mindestbreite; Mobil (<=640) darf umbrechen statt zu scrollen */
.dlg.wide .au-aktion { white-space: nowrap; text-align: right; }
.dlg.wide th.au-aktion { width: 1%; }
@media (max-width: 640px) {
    .dlg.wide .au-aktion { white-space: normal; }
}
/* F102: Popup-Kopf — Titelleiste mit X-Schließen (SVG, kein Emoji; statt „Schließen“-Button) */
.au-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.au-dlg-head h3 { margin: 0; }
.dlg-close-x {
    background: none; border: none; padding: 6px; border-radius: 6px; cursor: pointer;
    color: #9aa4bd; line-height: 0; flex: none;
}
.dlg-close-x:hover { background: #2a3153; color: #e8ecf8; }
.dlg h3 { margin: 0 0 6px; font-size: 16px; }
.dlg-hint { color: #9aa4bd; font-size: 13px; margin: 0 0 12px; }
.dlg label { display: block; font-size: 13px; color: #9aa4bd; margin: 0 0 4px; }
.dlg input[type="text"] {
    width: 100%; box-sizing: border-box; background: #141830; color: #e8ecf8;
    border: 1px solid #3a3f5c; border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.dlg input[type="text"]:focus { outline: none; border-color: #e94560; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg-error { color: #e94560; font-size: 13px; margin-top: 10px; min-height: 16px; }

/* F116-Nachtrag (v1.1.6): SMTP-Karte auf Grundeinstellungen — Label ueber Feld,
   Grid statt url-field-Vollbreite (Axel: „Felder schoener anordnen, teilweise viel zu lang“).
   Mobile: auto-fit kollabiert auf 1 Spalte; Buttons vollbreit via globale MQ-Regel. */
.smtp-form .smtp-flds { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
.smtp-form .smtp-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.smtp-form .smtp-fld label { font-size: 12px; font-weight: 600; color: #9aa4bd; }
.smtp-form .smtp-host { grid-column: 1 / -1; }
.smtp-form .smtp-host input { max-width: 520px; }
.smtp-form .smtp-port { max-width: 130px; }
.smtp-form .smtp-pw { max-width: 300px; }
.smtp-form .smtp-test-to { max-width: 440px; }
.smtp-form .smtp-actions { display: flex; gap: 10px; }
.smtp-form .smtp-test-box { border: 1px solid #2a2a4a; border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.smtp-form .smtp-test-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa4bd; margin-bottom: 10px; }

/* ================= Mobile: Tabellenzeilen als Kacheln (data-cardify, v1.1.188) =================
   JS (admin.js) fuellt data-label + Klassen karte/karte-akt/karte-titel an.
   Nur <= 640px — Desktop bleibt pixelgleich. Doku-Tabellen ohne data-cardify
   (API-/Funktionsreferenz) behalten das horizontale Wischen. */
@media (max-width: 640px) {
    table[data-cardify] { display: block; }
    table[data-cardify] thead { display: none; }
    table[data-cardify] tr.karte-kopf { display: none; }
    table[data-cardify] tbody { display: block; }
    table[data-cardify] tr.karte {
        display: block;
        background: #16213e;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 10px 12px 8px;
        margin: 0 0 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    table[data-cardify] tr.karte td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 5px 0;
        border: none;
        border-bottom: 1px dashed #2a2a4a;
        font-size: 13px;
    }
    table[data-cardify] tr.karte td::before {
        content: attr(data-label);
        color: #888;
        font-size: 11px;
        font-weight: 600;
        flex: 0 0 auto;
    }
    table[data-cardify] tr.karte td.karte-titel {
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        border-bottom: 1px solid #333;
        margin-bottom: 4px;
        padding-bottom: 8px;
    }
    table[data-cardify] tr.karte td.karte-titel::before { display: none; }
    table[data-cardify] tr.karte td.karte-titel .badge { font-size: 11px; }
    table[data-cardify] tr.karte td.karte-akt {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: none;
        margin-top: 8px;
        padding-top: 6px;
    }
    table[data-cardify] tr.karte td.karte-akt::before { display: none; }
    table[data-cardify] tr.karte td.karte-akt button,
    table[data-cardify] tr.karte td.karte-akt .btn {
        flex: 1 1 130px;
        justify-content: center;
    }
}