/* ==========================================================================
   Verwaltung (nur nach Anmeldung sichtbar)
   1. Anmeldung   2. Kopf & Reiter   3. Liste & Formular   4. Bilder   5. Logo
   ========================================================================== */

/* 1. Anmeldung */
.login-karte{max-width:560px}
.login-karte .schloss{width:48px;height:48px;border-radius:50%;background:var(--rot);display:grid;place-items:center}
.login-karte .schloss svg{width:22px;height:22px}
.wer{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--linie);border-radius:4px;background:var(--bg)}
.wer img{width:36px;height:36px;border-radius:50%;flex:none}
.wer > div{min-width:0}
.initialen{width:36px;height:36px;border-radius:50%;background:var(--rot);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;flex:none}

/* 2. Kopf & Reiter */
.admin-kopf{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.reiter{display:flex;gap:0;border-bottom:2px solid var(--fg);flex-wrap:wrap}
.reiter button{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;background:none;border:none;color:var(--muted);padding:10px 16px;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px}
.reiter button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--rot)}
.reiter .zahl{font-family:var(--mono);font-size:.75rem;margin-left:6px;color:var(--muted)}

/* 3. Liste & Formular */
.admin-raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.admin-zeile{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:14px 0;border-bottom:1px solid var(--linie);align-items:center}
.admin-zeile > div{min-width:0}
.admin-zeile .aktionen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.admin-zeile.aktiv{background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 18%,transparent),transparent)}
.feldgruppe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feldgruppe .breit{grid-column:1/-1}
.feld .hilfe{font-size:.85rem;color:var(--muted)}
.admin-rechts{display:grid;gap:20px;min-width:0;align-content:start}

/* 4. Bilder zu Einsätzen und Fahrzeugen */
.bilder-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bild-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.bild-karte{display:grid;gap:6px;align-content:start;min-width:0}
.bild-karte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--linie);display:block}
.bild-karte input{font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--linie);border-radius:3px;background:var(--bg);color:var(--fg);width:100%}
.bild-karte .zeile{display:flex;gap:4px;flex-wrap:wrap}
.bild-karte .knopf.klein{padding:4px 8px;font-size:.85rem}
.bild-karte .titelbild{font-family:var(--display);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rot)}
.bild-karte.laedt img{opacity:.45}

/* 5. Logo */
.logo-vorschau{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.logo-vorschau figure{margin:0;display:grid;gap:6px;justify-items:start}
.logo-vorschau .probe{background:var(--rot);padding:14px 18px;border-radius:3px;display:flex;align-items:center;gap:12px;color:#fff;min-height:70px}
.logo-vorschau .probe.hell{background:#fff;border:1px solid var(--linie);color:#1d1a19}
.logo-vorschau .probe img,.logo-vorschau .probe svg{height:42px;width:auto;max-width:150px}
.logo-vorschau .probe b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.1rem;line-height:1}
.logo-vorschau figcaption{font-size:.85rem;color:var(--muted)}
.logo-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}

@media (max-width:860px){
  .admin-raster,.feldgruppe{grid-template-columns:1fr}
  .admin-zeile{grid-template-columns:1fr}
  .admin-zeile .aktionen{justify-content:flex-start}
}