/* =========================================================
   DÜRREMONITOR, MOCKUP-TREU, DESKTOP, HART MIT !IMPORTANT
   ======================================================= */

.dm-wrap, .dm-wrap *{
    box-sizing:border-box !important;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

.dm-wrap{
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px !important;
}

/* =========================================================
   DÜRREMONITOR, MOCKUP-TREU, DESKTOP, HART MIT !IMPORTANT
   ======================================================= */

.dm-wrap, .dm-wrap *{
    box-sizing:border-box !important;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ================= HERO FIX ================= */

.dm-hero{
    position: relative !important;
    border-radius: 0 !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
}

.dm-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.92) 0%,
            rgba(255,255,255,0.82) 40%,
            rgba(255,255,255,0.55) 70%,
            rgba(255,255,255,0.25) 100%
        ),
        url("/wp-content/plugins/duerremonitor/assets/img/hero-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.dm-hero-inner{
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 430px 1fr !important;
    gap: 22px !important;
    padding: 26px !important;
}

/* Map-Container */
.dm-hero__map{
    background: rgba(255,255,255,0.25) !important;
    border: 1px solid rgba(15,23,42,0.15) !important;
    border-radius: 12px !important;
    padding: 14px !important;
}

/* Textbox */
.dm-hero__summary{
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(15,23,42,0.12) !important;
    border-radius: 14px !important;
    padding: 20px !important;
}

.dm-hero-map{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.dm-map-germany{
    width: 100% !important;
    height: 300px !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 35% 45%, #dc2626 0%, #f97316 28%, #facc15 52%, #16a34a 78%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight: 900 !important;
    color:#0b1220 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.25) !important;
}

.dm-hero-right{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap: 16px !important;
}

.dm-hero-panel{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    width: 540px !important;
    max-width: 100% !important;
}

.dm-hero-panel-kicker{
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    margin-bottom: 4px !important;
}

.dm-hero-panel-title{
    font-size: 30px !important;
    font-weight: 950 !important;
    color: #111827 !important;
    margin-bottom: 6px !important;
}

.dm-hero-panel-sub{
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

@media (max-width: 900px){
    .dm-hero-inner{
        grid-template-columns: 1fr !important;
    }

    .dm-hero::before{
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.95),
                rgba(255,255,255,0.85)
            ),
            url("/wp-content/uploads/hero-bg.jpg");
    }
}

/* ================= SAFETY OVERRIDES ================= */
.dm-wrap img{
    max-width:100% !important;
    height:auto !important;
}


/* KPI LEISTE (4 KACHELN) */
.dm-hero-kpis{
    display:grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    width: 720px !important;
    max-width: 100% !important;
}

.dm-hero-kpi{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 8px !important;
    padding: 12px 12px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
    min-height: 72px !important;
}

.dm-hero-kpi-top{
    display:flex !important;
    align-items:center !important;
    gap: 8px !important;
}

.dm-hero-kpi-name{
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.dm-hero-kpi-val{
    margin-top: 6px !important;
    font-size: 26px !important;
    font-weight: 950 !important;
    color: #111827 !important;
}

/* Icons (simple CSS) */
.dm-hero-kpi-ico, .dm-mini-ico{
    width: 18px !important;
    height: 18px !important;
    border-radius: 99px !important;
    display:inline-block !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.10) !important;
}

.dm-ico-cloud{ background:#60a5fa !important; }
.dm-ico-drop{ background:#22c55e !important; }
.dm-ico-flood{ background:#3b82f6 !important; }
.dm-ico-fire{ background:#f97316 !important; }
.dm-ico-sun{ background:#facc15 !important; }

/* KPI Farbgefühl */
.dm-kpi-weather{ }
.dm-kpi-groundwater{ }
.dm-kpi-flood{ }
.dm-kpi-drought{ }

.dm-val-ok{ color:#16a34a !important; }
.dm-val-warn{ color:#b45309 !important; }
.dm-val-crit{ color:#b91c1c !important; }

.dm-critical .dm-hero-kpi-val{ color:#b91c1c !important; }

/* ================= SECTION HEAD (WIE BILD) ================= */

.dm-section{
    background: transparent !important;
    margin-top: 10px !important;
}

.dm-section-head{
    background: linear-gradient(180deg, #f6f7fb 0%, #eef2f7 100%) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-bottom: none !important;
    padding: 10px 14px !important;
}

.dm-section-title{
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
}

/* ================= CONTENT BOX MIT RECHTS "WASSER" ================= */

.dm-current-box{
    position: relative !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #ffffff !important;
    padding: 14px !important;
    overflow:hidden !important;
}

.dm-current-box:after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width: 42% !important;
    height: 100% !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.80),
            rgba(255,255,255,.80)
        ),
        url("../img/water-side.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-left: 1px solid rgba(0,0,0,.08) !important;
}

.dm-current-box > *{
    position: relative !important;
    z-index: 2 !important;
}

/* top row */
.dm-current-top{
    display:grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 14px !important;
    align-items:start !important;
    margin-bottom: 12px !important;
}

.dm-region-card{
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
    border-radius: 6px !important;
    padding: 10px 10px !important;
}

.dm-region-card-title{
    font-size: 18px !important;
    font-weight: 950 !important;
    color:#0f172a !important;
    margin-bottom: 8px !important;
}

.dm-region-mini-map{
    height: 86px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #93c5fd, #e0f2fe) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight: 800 !important;
    color:#1e3a8a !important;
}

.dm-current-bullets{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
}

.dm-current-bullets ul{
    margin: 0 !important;
    padding-left: 18px !important;
}

.dm-current-bullets li{
    margin: 6px 0 !important;
    font-weight: 650 !important;
    color:#334155 !important;
}

/* ================= MINI CARDS ROW (4) ================= */

.dm-mini-cards{
    display:grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.dm-mini-card{
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,.06) !important;
    overflow:hidden !important;
}

.dm-mini-head{
    display:flex !important;
    align-items:center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    font-weight: 900 !important;
    color:#0f172a !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
    background: #f8fafc !important;
}

.dm-mini-title{
    font-size: 14px !important;
}

.dm-mini-body{
    padding: 10px 10px !important;
}

.dm-mini-val{
    font-size: 28px !important;
    font-weight: 950 !important;
    margin-bottom: 8px !important;
}

/* fake mini charts */
.dm-mini-spark{
    height: 36px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
}

.dm-spark-bars{
    background:
        repeating-linear-gradient(
            90deg,
            rgba(59,130,246,.25) 0,
            rgba(59,130,246,.25) 6px,
            rgba(255,255,255,0) 6px,
            rgba(255,255,255,0) 12px
        ) !important;
}

.dm-spark-area{
    background: linear-gradient(180deg, rgba(34,197,94,.30), rgba(34,197,94,.05)) !important;
}

.dm-spark-line{
    background:
        linear-gradient(180deg, rgba(59,130,246,.15), rgba(59,130,246,.02)) !important;
}

.dm-spark-red{
    background: linear-gradient(180deg, rgba(239,68,68,.30), rgba(239,68,68,.06)) !important;
}

.dm-mini-drought .dm-mini-head{ background: #fff7ed !important; }
.dm-mini-weather .dm-mini-head{ background: #f0f9ff !important; }
.dm-mini-groundwater .dm-mini-head{ background: #f0fdf4 !important; }
.dm-mini-flood .dm-mini-head{ background: #eff6ff !important; }

.dm-mini-card.dm-critical .dm-mini-val{ color:#b91c1c !important; }

/* ================= KOMMUNE BOX (WIE BILD) ================= */

.dm-commune-box{
    display:grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 14px !important;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;

    overflow:hidden !important;
}

.dm-commune-left{
    padding: 12px 12px !important;
}

.dm-commune-title{
    font-size: 18px !important;
    font-weight: 950 !important;
    margin-bottom: 10px !important;
}

.dm-commune-list{
    margin: 0 0 12px 0 !important;
    padding-left: 18px !important;
    font-weight: 650 !important;
    color:#334155 !important;
}

.dm-commune-list li{
    margin: 6px 0 !important;
}

.dm-btn-primary{
    display:inline-block !important;
    padding: 10px 18px !important;
    background: #1e3a8a !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 4px !important;
    opacity: .90 !important;
    cursor: not-allowed !important;
}

.dm-commune-right{
    padding: 0 !important;
}

.dm-commune-img{
    width: 100% !important;
    height: 100% !important;
    min-height: 120px !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.15)
        ),
        url("../img/commune-water.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight: 900 !important;
    color:#0f172a !important;
}

/* ================= FOOTER PANEL ================= */

.dm-footer-panel{
    margin-top: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    padding: 12px !important;
}

.dm-footer-grid{
    display:grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.dm-footer-item{
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 6px !important;
    padding: 10px !important;
}

.dm-footer-label{
    font-size: 12px !important;
    font-weight: 800 !important;
    color:#475569 !important;
    margin-bottom: 4px !important;
}

.dm-footer-val{
    font-size: 14px !important;
    font-weight: 900 !important;
    color:#0f172a !important;
}

.dm-footnote{
    display:flex !important;
    justify-content:space-between !important;
    font-size: 12px !important;
    color:#64748b !important;
}

/* ================= SAFETY OVERRIDES ================= */
.dm-wrap img{ max-width:100% !important; height:auto !important; }