/* =====================================================
   BS NOTFALL PORTAL V3 - ZENTRALES APP DESIGN
   Einmal ändern, überall gleiches Design.
===================================================== */

:root{
    --v3-bg:#05080d;
    --v3-bg2:#071018;
    --v3-panel:#111b25;
    --v3-card:#ffffff;
    --v3-card-soft:#f4f7fb;
    --v3-line:rgba(255,255,255,.12);
    --v3-line-dark:#e5e7eb;
    --v3-text:#f8fafc;
    --v3-muted:#9aa6b8;
    --v3-dark:#111827;
    --v3-red:#df202b;
    --v3-red2:#970d16;
    --v3-blue:#3b82f6;
    --v3-green:#16a863;
    --v3-yellow:#f6c343;
    --v3-purple:#7e22ce;
    --v3-radius:30px;
    --v3-radius-sm:16px;
    --v3-shadow:0 30px 90px rgba(0,0,0,.34);
    --v3-shadow-soft:0 22px 60px rgba(0,0,0,.22);
}

body{
    background:
        radial-gradient(circle at 84% -8%,rgba(223,32,43,.28),transparent 30%),
        radial-gradient(circle at 8% 10%,rgba(59,130,246,.12),transparent 25%),
        linear-gradient(180deg,var(--v3-bg),var(--v3-bg2) 48%,#050505)!important;
    color:var(--v3-text)!important;
}

.v3-app{
    max-width:1380px;
    margin:0 auto;
    padding:24px 16px 80px;
}

.v3-layout{
    display:grid;
    grid-template-columns:286px minmax(0,1fr);
    gap:22px;
}

.v3-sidebar{
    position:sticky;
    top:96px;
    align-self:start;
    background:
        radial-gradient(circle at top right,rgba(223,32,43,.20),transparent 38%),
        linear-gradient(180deg,#111b25,#05080d);
    border:1px solid var(--v3-line);
    border-radius:var(--v3-radius);
    padding:24px;
    color:#fff;
    box-shadow:var(--v3-shadow);
}

.v3-avatar,
.v3-logo{
    width:84px;
    height:84px;
    border-radius:26px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--v3-red),var(--v3-red2));
    color:#fff;
    font-size:30px;
    font-weight:900;
    box-shadow:0 16px 38px rgba(223,32,43,.28);
    margin-bottom:18px;
}

.v3-sidebar h2{
    color:#fff;
    margin:0 0 6px;
    font-size:24px;
    letter-spacing:-.02em;
}

.v3-sidebar p{
    color:var(--v3-muted);
    margin:0;
    line-height:1.55;
}

.v3-menu{
    display:grid;
    gap:9px;
    margin-top:22px;
}

.v3-menu a{
    min-height:44px;
    padding:0 13px;
    border-radius:14px;
    display:flex;
    align-items:center;
    color:#dbe4ef;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    font-weight:900;
    font-size:14px;
}

.v3-menu a:hover,
.v3-menu a.active{
    background:linear-gradient(135deg,var(--v3-red),var(--v3-red2));
    color:#fff;
}

.v3-main{min-width:0}

.v3-hero{
    background:
        radial-gradient(circle at top right,rgba(223,32,43,.18),transparent 34%),
        linear-gradient(135deg,#111b25,#071018);
    border:1px solid var(--v3-line);
    border-radius:var(--v3-radius);
    padding:28px;
    color:#fff;
    box-shadow:var(--v3-shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-bottom:18px;
}

.v3-hero h1{
    color:#fff;
    font-size:38px;
    margin:0 0 8px;
    letter-spacing:-.04em;
}

.v3-hero p{
    color:var(--v3-muted);
    margin:0;
    line-height:1.55;
}

.v3-card{
    background:linear-gradient(180deg,#ffffff,#f4f7fb);
    border-radius:28px;
    border:1px solid rgba(255,255,255,.35);
    color:#111827;
    box-shadow:var(--v3-shadow-soft);
    margin-bottom:18px;
    overflow:hidden;
}

.v3-card-head{
    padding:22px 24px;
    border-bottom:1px solid var(--v3-line-dark);
}

.v3-card-head h2{
    margin:0 0 6px;
    color:#111827;
    font-size:24px;
    letter-spacing:-.03em;
}

.v3-card-head p{
    color:#64748b;
    margin:0;
}

.v3-card-body{padding:24px}

.v3-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.v3-grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.v3-field label,
.v3-card label{
    display:block;
    color:#1f2937!important;
    font-size:12px!important;
    font-weight:900!important;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:7px;
}

.v3-field input,
.v3-field textarea,
.v3-field select,
.v3-card input,
.v3-card textarea,
.v3-card select{
    width:100%;
    border-radius:14px!important;
    border:1px solid #d1d5db!important;
    background:#fff!important;
    color:#111827!important;
    min-height:48px!important;
    padding:12px 14px!important;
}

.v3-btn{
    min-height:48px!important;
    border-radius:14px!important;
    padding:12px 18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-decoration:none!important;
    font-weight:900!important;
    border:0!important;
    cursor:pointer!important;
}

.v3-btn.primary{
    background:linear-gradient(135deg,var(--v3-red),var(--v3-red2))!important;
    color:#fff!important;
    box-shadow:0 16px 36px rgba(223,32,43,.24)!important;
}

.v3-btn.dark{background:#111827!important;color:#fff!important}
.v3-btn.blue{background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important}
.v3-btn.green{background:#dcfce7!important;color:#166534!important;border:1px solid #bbf7d0!important}
.v3-btn.warning{background:#fff7d6!important;color:#8a6500!important;border:1px solid #fde68a!important}
.v3-btn.danger{background:#ffe4e6!important;color:#9f1239!important;border:1px solid #fecdd3!important}

.v3-alert{
    margin-bottom:18px;
    padding:16px 18px;
    border-radius:20px;
    background:rgba(255,255,255,.94);
    color:#111827;
    box-shadow:0 18px 46px rgba(0,0,0,.18);
}

.v3-alert.error{
    background:#fff0f0;
    color:#9f1239;
}

.v3-auth{
    max-width:560px;
    margin:42px auto 90px;
    padding:0 16px;
}

.v3-auth .v3-card{
    border-radius:30px;
}

.v3-auth-logo{
    width:78px;
    height:78px;
    border-radius:24px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--v3-red),var(--v3-red2));
    color:#fff;
    font-size:30px;
    font-weight:900;
    box-shadow:0 16px 38px rgba(223,32,43,.28);
}

.v3-auth h1,
.v3-auth h2{
    text-align:center;
    color:#111827;
    font-size:34px;
    letter-spacing:-.04em;
    margin:0 0 8px;
}

.v3-auth .sub{
    text-align:center;
    color:#64748b;
    margin:0 0 24px;
    line-height:1.55;
}

@media(max-width:1100px){
    .v3-layout{grid-template-columns:1fr}
    .v3-sidebar{position:relative;top:auto}
}

@media(max-width:760px){
    .v3-app{padding:14px 10px 60px}
    .v3-hero{display:block;padding:22px}
    .v3-grid-2,.v3-grid-3{grid-template-columns:1fr}
    .v3-auth{margin:24px auto 60px;padding:0 10px}
    .v3-card-body{padding:20px}
}