/* Nachbau-eigene Stile: was das Original nicht hat - Blazor-Fehlerleiste, Luecken-Hinweise und die
   Verwaltung (Teil C, E-023: Aussehen frei). Alles andere kommt aus global.css/komponenten.css, den
   unveraenderten Stilen des Angular-Originals (stile-extrahieren.py). */
.tab-content.luecke { color: #8a90a2; }
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Unsichtbare Helfer des Nachbaus: Schleier, die den Klick "daneben" bzw. die Mausbewegung waehrend des
   Ziehens auffangen (das Original haengt dafuer Lauscher an document/window). */
.resizer-schleier { position: fixed; inset: 0; z-index: 1000; cursor: col-resize; }

/* burger-toggle: die Angular-Animationen (rotation 200 ms, showHide 500 ms) als CSS-Uebergang */
[_nghost-burger-toggle] .bar.top, [_nghost-burger-toggle] .bar.bottom { transition: transform 200ms; }
[_nghost-burger-toggle] .bar.middle { transition: opacity 500ms; }

/* side-navigation: Angular-Animation "collapsed" (300 ms cubic-bezier) als CSS-Uebergang */
[_nghost-side-navigation] .side-navigation-container { transition: width 300ms cubic-bezier(0.45, 0.25, 0.60, 0.95), box-shadow 300ms cubic-bezier(0.45, 0.25, 0.60, 0.95); }

/* user-popup: Angular-Animation showHide (300 ms cubic-bezier) als CSS-Uebergang */
[_nghost-user-popup] { transition: opacity 300ms cubic-bezier(0.45, 0.25, 0.60, 0.95), transform 300ms cubic-bezier(0.45, 0.25, 0.60, 0.95); }

/* ======================= Teil C / AD-2: Verwaltung (/admin) =======================
   E-023: Das Aussehen ist frei - hier nur so viel, dass die Funktion bequem bedienbar
   ist. Farben und Grundformen wie im uebrigen Frontend. */
.admin-top { position: relative; display: flex; align-items: center; gap: 24px; height: 56px;
    background: #1b2745; color: #fff; padding: 0 24px; }
.admin-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.admin-brand img { height: 22px; }
.admin-brand span { font-weight: 600; letter-spacing: .02em; }
.admin-nav { display: flex; gap: 4px; flex: 1; }
.admin-nav a { color: #c7cddd; text-decoration: none; padding: 6px 12px; border-radius: 3px; font-size: 14px; }
.admin-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav a.active { background: #fff; color: #1b2745; }
.admin-benutzer { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.admin-benutzer .btn { padding: 6px 14px; background: #fff; color: #1b2745; }
.admin-inhalt { padding: 24px; }
.admin-seite { max-width: 1600px; }
.admin-seite h1 { font-size: 22px; margin: 0 0 16px; }
.admin-seite h2 { font-size: 18px; margin: 0 0 12px; }
.admin-seite h3 { font-size: 15px; margin: 20px 0 8px; }
.admin-seite h4 { font-size: 13px; margin: 0 0 6px; }
.admin-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-werkzeuge .form-control { width: auto; min-width: 200px; }
.admin-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-zeile .form-control { width: auto; min-width: 160px; }
.admin-abstand { margin-top: 16px; }
.admin-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.admin-hinweis { color: #6c7590; font-size: 12px; margin: 8px 0; }
.admin-klein { color: #6c7590; font-size: 12px; }
.admin-fehler { color: #c0392b; }
.admin-gefahr { border-color: #c0392b; color: #c0392b; }
.admin-rechts { text-align: right; }
.admin-mitte { text-align: center; }
.admin-breit { grid-column: 1 / -1; }

.admin-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.admin-karte { background: #fff; border: 1px solid #e5e8f0; border-radius: 4px; padding: 16px 20px; cursor: pointer; }
.admin-karte:hover { border-color: #1b2745; }
.admin-karte h2 { margin: 0 0 6px; font-size: 16px; }
.admin-karte p { margin: 0; color: #6c7590; font-size: 13px; }

.admin-tabelle { width: 100%; border-collapse: collapse; background: #fff; margin: 12px 0; }
.admin-tabelle th { text-align: left; font-size: 12px; color: #6c7590; font-weight: 600;
    border-bottom: 1px solid #e5e8f0; padding: 6px 8px; white-space: nowrap; }
.admin-tabelle td { border-bottom: 1px solid #f0f2f7; padding: 4px 8px; font-size: 13px; vertical-align: middle; }
.admin-tabelle tbody tr:hover { background: #f7f8fc; }
.admin-tabelle tr.gewaehlt { background: #eef1f9; }
.admin-tabelle tr.abgelaufen td { color: #8a90a2; }
.admin-tabelle .form-control { padding: 4px 6px; font-size: 13px; }
.admin-sortier button { border: 0; background: none; cursor: pointer; color: #6c7590; padding: 2px 4px; font-size: 13px; }
.admin-sortier button:hover:not(:disabled) { color: #1b2745; }
.admin-sortier button:disabled { opacity: .3; cursor: default; }

.admin-zweispaltig { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr); gap: 24px; align-items: start; }
.admin-dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.admin-liste, .admin-formular { min-width: 0; }
.admin-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.admin-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6c7590; }
.admin-felder .form-control { padding: 8px 10px; font-size: 13px; }
.admin-schalterliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin: 16px 0; font-size: 13px; }
.admin-schalterliste label { display: flex; align-items: center; gap: 8px; }
.admin-rollen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; font-size: 13px; }
.admin-rollen label { display: flex; align-items: center; gap: 8px; }
.admin-kasten { background: #fff; border: 1px solid #e5e8f0; border-radius: 4px; padding: 12px 16px; margin: 16px 0; }
.admin-merkmale { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-merkmal { background: #eef1f9; color: #4a5578; border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 6px; }

.admin-reiter { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid #e5e8f0; margin-bottom: 16px; }
.admin-reiter button { border: 0; background: none; padding: 10px 14px; cursor: pointer; font-size: 13px; color: #6c7590;
    border-bottom: 2px solid transparent; }
.admin-reiter button:hover { color: #1b2745; }
.admin-reiter button.aktiv { color: #1b2745; font-weight: 600; border-bottom-color: #1b2745; }

.admin-matrix { overflow-x: auto; }
.admin-matrix .admin-tabelle { min-width: max-content; }
.admin-baum td:first-child { white-space: nowrap; }
.admin-dreh { writing-mode: vertical-rl; transform: rotate(180deg); height: 8rem; }
.admin-farbe { display: inline-block; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #e5e8f0; }
.admin-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.admin-vorschau { max-width: 100%; max-height: 120px; display: block; margin-bottom: 8px; }
.admin-eigenschaften { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.admin-werte { list-style: none; margin: 0 0 8px; padding: 0; }
.admin-werte li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.admin-vorlage { background: #fff; border: 1px solid #e5e8f0; border-radius: 4px; padding: 10px 14px; margin-bottom: 10px; }
.admin-vorlage summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.admin-vorlage .admin-felder { margin-top: 12px; }
.admin-excel { margin-top: 12px; font-size: 13px; }
.admin-excel h4 { margin-top: 10px; }

/* mde-popover: Angular-Animation transformPopover (void => *: opacity 0, scale(0) -> 200 ms cubic-bezier(0.25, 0.8, 0.25, 1))
   als CSS-Animation. Wichtig fuer die Deckungsgleichheit: beim Einfuegen ist die Karte auf scale(0), die Tabellenzeile unter
   der Maus behaelt ihren :hover-Zustand (Chrome rechnet ihn bei der reinen Transform-Animation nicht neu) - wie im Original. */
@keyframes mde-popover-ein { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.mde-popover-panel { animation: mde-popover-ein 200ms cubic-bezier(0.25, 0.8, 0.25, 1); }