/* ── Reset & Basis ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blau:        #003882;   /* ASW Dunkelblau */
    --blau-hell:   #1a5aaa;
    --blau-tief:   #002060;
    --akzent:      #e6edf8;
    --rot:         #be1622;   /* ASW Rot */
    --rot-hell:    #fce8ea;
    --gruen:       #1a7a4a;
    --gruen-hell:  #e8f5ee;
    --gelb:        #b45309;
    --gelb-hell:   #fef3cd;
    --grau-0:      #f8f9fa;
    --grau-1:      #f1f3f5;
    --grau-2:      #e9ecef;
    --grau-3:      #dee2e6;
    --grau-5:      #adb5bd;
    --grau-7:      #495057;
    --grau-9:      #212529;
    --weiss:       #ffffff;
    --rand:        12px;
    --schatten:    0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --schatten-h:  0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}

html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--grau-0);
    color: var(--grau-9);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Topbar ── */
.topbar {
    background: var(--blau);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.topbar-logo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.topbar-logo-img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 3px;
    display: block;
    flex-shrink: 0;
}
.topbar-logo-text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    opacity: .92;
    border-left: 1px solid rgba(255,255,255,.3);
    padding-left: .75rem;
}
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.topbar-nav a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .95rem;
    padding: .4rem .8rem;
    border-radius: 6px;
    transition: background .15s;
}
.topbar-nav a:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-neu {
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255,255,255,.3) !important;
}
.btn-neu:hover { background: rgba(255,255,255,.3) !important; }

/* ── Main ── */
.main-content {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ── Seitenüberschrift ── */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blau-tief);
}
.page-header p {
    color: var(--grau-7);
    margin-top: .25rem;
    font-size: .95rem;
}

/* ── Suchleiste ── */
.suchleiste {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.suchfeld-wrapper {
    flex: 1;
    min-width: 240px;
    position: relative;
}
.suchfeld-wrapper svg {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grau-5);
    pointer-events: none;
}
#suche {
    width: 100%;
    padding: .8rem 1rem .8rem 2.8rem;
    border: 1.5px solid var(--grau-3);
    border-radius: var(--rand);
    font-size: 1rem;
    background: var(--weiss);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
#suche:focus {
    outline: none;
    border-color: var(--blau-hell);
    box-shadow: 0 0 0 3px rgba(37,99,184,.15);
}
.filter-select {
    padding: .8rem 1rem;
    border: 1.5px solid var(--grau-3);
    border-radius: var(--rand);
    font-size: .95rem;
    background: var(--weiss);
    cursor: pointer;
    min-width: 160px;
}
.filter-select:focus { outline: none; border-color: var(--blau-hell); }

/* ── Ergebniszähler ── */
.ergebnis-info {
    font-size: .9rem;
    color: var(--grau-7);
    margin-bottom: 1rem;
}

/* ── Kartenraster ── */
.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ── SDB-Karte ── */
.sdb-karte {
    background: var(--weiss);
    border-radius: var(--rand);
    box-shadow: var(--schatten);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
    text-decoration: none;
    color: inherit;
}
.sdb-karte:hover {
    box-shadow: var(--schatten-h);
    transform: translateY(-2px);
}
.karte-kopf {
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid var(--grau-2);
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.karte-icon {
    width: 40px;
    height: 40px;
    background: var(--akzent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blau);
}
.karte-titel {
    flex: 1;
    min-width: 0;
}
.karte-titel h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--grau-9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.karte-titel .hersteller {
    font-size: .85rem;
    color: var(--grau-7);
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.karte-body {
    padding: .75rem 1rem;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem .75rem;
}
.karte-feld label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grau-5);
    margin-bottom: .1rem;
}
.karte-feld span {
    font-size: .88rem;
    color: var(--grau-9);
}
.karte-feld span.leer { color: var(--grau-5); font-style: italic; }

.karte-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--grau-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

/* Gefahrenklasse-Badge */
.badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-gruen  { background: var(--gruen-hell); color: var(--gruen); }
.badge-gelb   { background: var(--gelb-hell);  color: var(--gelb); }
.badge-rot    { background: var(--rot-hell);   color: var(--rot); }
.badge-grau   { background: var(--grau-1);     color: var(--grau-7); }

/* Ablaufdatum-Warnung */
.badge-ablauf {
    font-size: .75rem;
    color: var(--rot);
    font-weight: 600;
}

/* Aktionsbuttons auf Karte */
.karte-aktionen {
    display: flex;
    gap: .4rem;
}
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--grau-3);
    background: var(--weiss);
    color: var(--grau-7);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--blau-hell); color: var(--blau); background: var(--akzent); }
.btn-icon.gefahr:hover { border-color: var(--rot); color: var(--rot); background: var(--rot-hell); }

/* ── Leer-Zustand ── */
.leer-zustand {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--grau-7);
}
.leer-zustand svg { opacity: .3; margin-bottom: 1rem; }
.leer-zustand h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.leer-zustand p { font-size: .95rem; }

/* ── Formular ── */
.formular-card {
    background: var(--weiss);
    border-radius: var(--rand);
    box-shadow: var(--schatten);
    padding: 2rem;
    max-width: 700px;
}
.form-gruppe {
    margin-bottom: 1.25rem;
}
.form-gruppe label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--grau-7);
    margin-bottom: .4rem;
}
.form-gruppe label .pflicht { color: var(--rot); margin-left: .15rem; }
.form-input, .form-select {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--grau-3);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--weiss);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    color: var(--grau-9);
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--blau-hell);
    box-shadow: 0 0 0 3px rgba(37,99,184,.15);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* Upload-Bereich */
.upload-zone {
    border: 2px dashed var(--grau-3);
    border-radius: var(--rand);
    padding: 2.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--blau-hell);
    background: var(--akzent);
}
.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-zone svg { color: var(--grau-5); margin-bottom: .75rem; }
.upload-zone p { color: var(--grau-7); font-size: .95rem; }
.upload-zone .upload-hint { font-size: .8rem; color: var(--grau-5); margin-top: .25rem; }
.upload-dateiname {
    margin-top: .75rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--blau);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blau); color: #fff; }
.btn-primary:hover { background: var(--blau-hell); }
.btn-secondary { background: var(--grau-1); color: var(--grau-9); border: 1.5px solid var(--grau-3); }
.btn-secondary:hover { background: var(--grau-2); }
.btn-danger { background: var(--rot-hell); color: var(--rot); border: 1.5px solid #f5c6c2; }
.btn-danger:hover { background: #fbd5d1; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; min-height: 52px; }

.form-aktionen {
    display: flex;
    gap: .75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Fehler/Erfolg */
.meldung {
    padding: .9rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: .95rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.meldung-fehler  { background: var(--rot-hell);   color: var(--rot);   border-left: 4px solid var(--rot); }
.meldung-erfolg  { background: var(--gruen-hell);  color: var(--gruen); border-left: 4px solid var(--gruen); }

/* ── Detailansicht ── */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}
.detail-card {
    background: var(--weiss);
    border-radius: var(--rand);
    box-shadow: var(--schatten);
    padding: 1.75rem;
}
.detail-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--blau-tief);
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--grau-2);
}
.detail-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.detail-feld label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--grau-5);
    display: block;
    margin-bottom: .2rem;
}
.detail-feld span { font-size: 1rem; color: var(--grau-9); }
.detail-feld span.leer { color: var(--grau-5); font-style: italic; }

/* QR-Karte */
.qr-karte {
    background: var(--weiss);
    border-radius: var(--rand);
    box-shadow: var(--schatten);
    padding: 1.5rem;
    text-align: center;
}
.qr-karte h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--blau-tief);
    margin-bottom: 1rem;
}
.qr-bild {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--grau-2);
    margin-bottom: 1rem;
}
.qr-hinweis {
    font-size: .8rem;
    color: var(--grau-7);
    line-height: 1.4;
}

/* PDF-Link-Button */
.pdf-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.2rem;
    background: var(--blau);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    margin-top: 1rem;
    transition: background .15s;
}
.pdf-link:hover { background: var(--blau-hell); }

/* Detail-Aktionen */
.detail-aktionen {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ── Druckansicht für QR ── */
@media print {
    .topbar, .footer, .detail-aktionen, .topbar-nav { display: none !important; }
    body { background: white; }
    .detail-layout { grid-template-columns: 1fr; }
    .qr-karte { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}

/* ── Footer ── */
.footer {
    text-align: center;
    padding: 1rem;
    font-size: .8rem;
    color: var(--grau-5);
    border-top: 1px solid var(--grau-2);
    margin-top: 2rem;
}

/* ── Responsive: Tablet ── */
@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr; }
    .qr-karte { order: -1; }
    .qr-bild { max-width: 180px; }
}
@media (max-width: 640px) {
    .main-content { padding: 1rem; }
    .karten-raster { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-felder { grid-template-columns: 1fr; }
    .formular-card { padding: 1.25rem; }
    .topbar { padding: 0 1rem; }
}

/* ── Ladeanimation ── */
.lade-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: drehen .6s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* Highlight Suchtreffer */
mark {
    background: #fff3cd;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}