/* =====================================================
   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}
}

/* =====================================================
   LOGIN – MODERNES AGENTUR-DESIGN
   Nur für login.php, bestehende Login-Logik bleibt unverändert.
===================================================== */
.page-login{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 18%,rgba(33,104,166,.16),transparent 26%),
        radial-gradient(circle at 87% 14%,rgba(223,32,43,.22),transparent 30%),
        linear-gradient(145deg,#05090f 0%,#080c13 46%,#10070a 100%)!important;
}

.page-login .site-header{
    background:rgba(5,7,11,.78);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 40px rgba(0,0,0,.18);
}

.agency-login{
    width:100%;
    padding:64px 24px 96px;
    position:relative;
    overflow:hidden;
}

.agency-login::before,
.agency-login::after{
    content:"";
    position:absolute;
    border-radius:999px;
    filter:blur(2px);
    pointer-events:none;
}

.agency-login::before{
    width:420px;
    height:420px;
    top:-260px;
    left:8%;
    background:rgba(48,120,190,.10);
}

.agency-login::after{
    width:520px;
    height:520px;
    right:-250px;
    bottom:-310px;
    background:rgba(223,32,43,.12);
}

.agency-login-shell{
    width:min(1080px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
    border:1px solid rgba(255,255,255,.12);
    border-radius:32px;
    overflow:hidden;
    background:rgba(10,14,21,.78);
    box-shadow:0 42px 110px rgba(0,0,0,.46);
    backdrop-filter:blur(24px);
    position:relative;
    z-index:1;
}

.agency-login-intro{
    min-height:720px;
    padding:46px 46px 42px;
    display:flex;
    flex-direction:column;
    background:
        linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),
        radial-gradient(circle at 85% 18%,rgba(223,32,43,.19),transparent 34%),
        linear-gradient(145deg,#111923,#070b11 68%);
    border-right:1px solid rgba(255,255,255,.09);
    position:relative;
    overflow:hidden;
}

.agency-login-intro::after{
    content:"";
    position:absolute;
    left:42px;
    right:42px;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(223,32,43,.88),transparent);
}

.agency-login-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.agency-login-brand img{
    width:54px;
    height:54px;
    object-fit:contain;
    filter:drop-shadow(0 9px 18px rgba(223,32,43,.22));
}

.agency-login-brand div{
    display:grid;
    gap:3px;
}

.agency-login-brand span{
    color:#fff;
    font-size:15px;
    font-weight:900;
    letter-spacing:.025em;
}

.agency-login-brand small{
    color:#8793a4;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.agency-login-copy{
    margin:auto 0 48px;
    max-width:440px;
}

.agency-login-kicker,
.agency-login-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#f54a54;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.agency-login-kicker::before,
.agency-login-eyebrow::before{
    content:"";
    width:26px;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,#df202b,#ff6169);
}

.agency-login-copy h1{
    margin:18px 0 18px;
    color:#fff;
    font-size:clamp(44px,5vw,68px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:900;
}

.agency-login-copy p{
    margin:0;
    color:#a9b3c1;
    font-size:15px;
    line-height:1.75;
}

.agency-login-benefits{
    display:grid;
    gap:18px;
}

.agency-login-benefits > div{
    display:flex;
    align-items:flex-start;
    gap:13px;
}

.agency-check{
    flex:0 0 24px;
    width:24px;
    height:24px;
    margin-top:1px;
    border-radius:8px;
    background:rgba(223,32,43,.12);
    border:1px solid rgba(244,74,84,.34);
    position:relative;
}

.agency-check::after{
    content:"";
    position:absolute;
    width:8px;
    height:4px;
    left:7px;
    top:7px;
    border-left:2px solid #ff5660;
    border-bottom:2px solid #ff5660;
    transform:rotate(-45deg);
}

.agency-login-benefits p{
    display:grid;
    gap:3px;
    margin:0;
}

.agency-login-benefits strong{
    color:#f7f9fc;
    font-size:13px;
}

.agency-login-benefits small{
    color:#7f8b9b;
    font-size:12px;
    line-height:1.45;
}

.agency-login-panel{
    padding:58px 56px 48px;
    background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
    color:#111827;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.agency-login-panel-head{
    margin-bottom:26px;
}

.agency-login-panel-head h2{
    margin:14px 0 10px;
    color:#111827;
    font-size:36px;
    line-height:1.1;
    letter-spacing:-.045em;
}

.agency-login-panel-head p{
    margin:0;
    color:#667085;
    font-size:14px;
    line-height:1.65;
}

.agency-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 14px;
    margin:0 0 18px;
    border-radius:13px;
    font-size:13px;
    font-weight:650;
    line-height:1.5;
}

.agency-alert.success{
    color:#166534;
    background:#ecfdf3;
    border:1px solid #bbf7d0;
}

.agency-alert.error{
    color:#9f1239;
    background:#fff1f2;
    border:1px solid #fecdd3;
}

.agency-alert-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:1px;
    border-radius:50%;
    border:2px solid currentColor;
    position:relative;
}

.agency-alert.success .agency-alert-icon::after{
    content:"";
    position:absolute;
    width:6px;
    height:3px;
    left:4px;
    top:4px;
    border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(-45deg);
}

.agency-alert.error .agency-alert-icon::before,
.agency-alert.error .agency-alert-icon::after{
    content:"";
    position:absolute;
    width:8px;
    height:2px;
    left:3px;
    top:6px;
    background:currentColor;
    border-radius:99px;
}

.agency-alert.error .agency-alert-icon::before{transform:rotate(45deg)}
.agency-alert.error .agency-alert-icon::after{transform:rotate(-45deg)}

.agency-login-form{
    display:grid;
    gap:20px;
}

.agency-field{
    display:grid;
    gap:8px;
}

.agency-field label{
    color:#344054;
    font-size:12px;
    font-weight:850;
    letter-spacing:.02em;
}

.agency-field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.agency-field-row a{
    color:#bd1721;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.agency-field-row a:hover{text-decoration:underline}

.agency-input-wrap{
    position:relative;
}

.agency-input-wrap > svg{
    width:19px;
    height:19px;
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    fill:none;
    stroke:#98a2b3;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

.agency-input-wrap input{
    width:100%;
    height:56px;
    padding:0 50px 0 48px;
    border:1px solid #d7dce3;
    border-radius:14px;
    background:#fff;
    color:#101828;
    font:inherit;
    font-size:14px;
    outline:none;
    box-shadow:0 1px 2px rgba(16,24,40,.03);
    transition:border-color .2s,box-shadow .2s,background .2s;
}

.agency-input-wrap input::placeholder{color:#a0a8b5}

.agency-input-wrap input:hover{
    border-color:#b8c0cc;
}

.agency-input-wrap input:focus{
    border-color:#df202b;
    box-shadow:0 0 0 4px rgba(223,32,43,.10);
    background:#fff;
}

.agency-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:0;
    border-radius:10px;
    background:transparent;
    display:grid;
    place-items:center;
    cursor:pointer;
    color:#7b8491;
}

.agency-password-toggle:hover{
    background:#f1f3f6;
    color:#344054;
}

.agency-password-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.agency-password-toggle .eye-closed{display:none}
.agency-password-toggle[aria-pressed="true"] .eye-open{display:none}
.agency-password-toggle[aria-pressed="true"] .eye-closed{display:block}

.agency-submit{
    width:100%;
    min-height:56px;
    margin-top:4px;
    border:0;
    border-radius:14px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:linear-gradient(135deg,#e22631,#ad1019);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:900;
    letter-spacing:.045em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 16px 34px rgba(190,19,29,.25);
    transition:transform .2s,box-shadow .2s,filter .2s;
}

.agency-submit svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .2s;
}

.agency-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 20px 40px rgba(190,19,29,.32);
    filter:brightness(1.03);
}

.agency-submit:hover svg{transform:translateX(3px)}
.agency-submit:active{transform:translateY(0)}

.agency-login-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0 18px;
    color:#98a2b3;
    font-size:11px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.agency-login-divider::before,
.agency-login-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:#e4e7ec;
}

.agency-register-note{
    margin:0;
    text-align:center;
    color:#667085;
    font-size:13px;
}

.agency-register-note a{
    color:#bd1721;
    font-weight:900;
    text-decoration:none;
}

.agency-register-note a:hover{text-decoration:underline}

.agency-login-security{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #e7eaf0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#7b8491;
    font-size:11px;
    font-weight:700;
}

.agency-login-security svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:#9f1820;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:900px){
    .agency-login{padding:42px 18px 72px}
    .agency-login-shell{grid-template-columns:1fr;max-width:580px}
    .agency-login-intro{min-height:auto;padding:30px 32px;border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
    .agency-login-copy{margin:42px 0 30px}
    .agency-login-copy h1{font-size:48px}
    .agency-login-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .agency-login-benefits > div{display:grid;gap:9px}
}

@media(max-width:620px){
    .agency-login{padding:22px 10px 54px}
    .agency-login-shell{border-radius:22px}
    .agency-login-intro{padding:24px 22px 26px}
    .agency-login-brand img{width:44px;height:44px}
    .agency-login-copy{margin:32px 0 0}
    .agency-login-copy h1{font-size:40px}
    .agency-login-copy p{font-size:13px}
    .agency-login-benefits{display:none}
    .agency-login-panel{padding:34px 22px 30px}
    .agency-login-panel-head h2{font-size:30px}
    .agency-field-row{align-items:flex-start;flex-direction:column;gap:5px}
    .agency-input-wrap input{height:54px}
    .agency-submit{min-height:54px}
    .agency-login-security{align-items:flex-start;text-align:left}
}

/* =====================================================
   LOGIN LAYOUT FIX
   Hebt alte kompakte Login-Regeln aus style.css nur für
   das neue Agentur-Login auf. Keine Änderung der PHP-Logik.
===================================================== */
body.page-login > main.agency-login{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:64px 24px 96px !important;
}

body.page-login .agency-login-shell{
    width:min(1080px,100%) !important;
    max-width:1080px !important;
    margin:0 auto !important;
}

body.page-login .agency-login-copy h1{
    margin:18px 0 !important;
    color:#fff !important;
    font-size:clamp(44px,5vw,68px) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
    text-align:left !important;
}

body.page-login .agency-input-wrap input{
    min-height:56px !important;
    height:56px !important;
    padding:0 50px 0 48px !important;
    border-radius:14px !important;
    font-size:14px !important;
}

body.page-login .agency-submit{
    min-height:56px !important;
    border-radius:14px !important;
}

body.page-login .agency-password-toggle{
    width:40px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:10px !important;
}

@media(max-width:900px){
    body.page-login > main.agency-login{
        max-width:none !important;
        padding:42px 18px 72px !important;
    }

    body.page-login .agency-login-shell{
        max-width:580px !important;
        grid-template-columns:1fr !important;
    }

    body.page-login .agency-login-copy h1{
        font-size:48px !important;
    }
}

@media(max-width:620px){
    body.page-login > main.agency-login{
        padding:22px 10px 54px !important;
    }

    body.page-login .agency-login-copy h1{
        font-size:40px !important;
    }

    body.page-login .agency-input-wrap input{
        min-height:54px !important;
        height:54px !important;
    }

    body.page-login .agency-submit{
        min-height:54px !important;
    }
}


/* LOGIN SINGLE-CARD FIX 2026-07-22
   Entfernt den früheren linken Infobereich vollständig. */
body.page-login .agency-login-shell{
    width:min(590px,100%) !important;
    max-width:590px !important;
    display:block !important;
    grid-template-columns:none !important;
    background:transparent !important;
}
body.page-login .agency-login-intro{display:none !important;}
body.page-login .agency-login-panel{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    border-radius:28px !important;
}
.agency-login-panel-logo{
    display:block;
    width:58px;
    height:58px;
    object-fit:contain;
    margin:0 0 22px;
    filter:drop-shadow(0 10px 18px rgba(190,19,29,.20));
}
@media(max-width:620px){
    body.page-login .agency-login-panel{border-radius:22px !important;}
    .agency-login-panel-logo{width:50px;height:50px;margin-bottom:18px;}
}