/*
 * EbenGesehen Design System (EGDS) v1.0.0
 * Zentrale UI-Bausteine für neue und überarbeitete Seiten.
 */

:root{
    --eg-green:#28C100;
    --eg-green-dark:#1D9600;
    --eg-black:#111111;
    --eg-white:#FFFFFF;
    --eg-soft:#F4FAF2;
    --eg-soft-2:#ECF8EA;
    --eg-line:#DDE8DA;
    --eg-muted:#617061;
    --eg-danger:#E53935;
    --eg-warning:#FFF6D9;

    --eg-radius-pill:999px;
    --eg-radius-sm:14px;
    --eg-radius-md:18px;
    --eg-radius-lg:24px;
    --eg-radius-xl:30px;

    --eg-shadow-soft:0 8px 24px rgba(0,0,0,.04);
    --eg-shadow-card:0 18px 60px rgba(0,0,0,.10);
    --eg-shadow-strong:0 24px 80px rgba(0,0,0,.14);

    --eg-space-1:6px;
    --eg-space-2:8px;
    --eg-space-3:12px;
    --eg-space-4:16px;
    --eg-space-5:22px;
    --eg-space-6:30px;

    --eg-page-max:1180px;
}

.eg-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top left,rgba(40,193,0,.16),transparent 34%),
        linear-gradient(135deg,#fff,var(--eg-soft));
    color:var(--eg-black);
}

.eg-shell{
    width:min(var(--eg-page-max), calc(100% - 32px));
    margin:0 auto;
}

.eg-header{
    width:min(var(--eg-page-max), calc(100% - 32px));
    margin:0 auto;
    padding:16px 0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
}

.eg-header-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.eg-header-logo img{
    width:min(320px,82vw);
    height:auto;
    display:block;
}

.eg-header-tools{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.eg-page-head{
    width:min(var(--eg-page-max), calc(100% - 32px));
    margin:0 auto 18px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--eg-line);
    border-radius:var(--eg-radius-xl);
    box-shadow:var(--eg-shadow-card);
    padding:24px;
}

.eg-page-title{
    margin:0;
    font-size:clamp(34px,5vw,58px);
    line-height:.98;
    letter-spacing:-.07em;
}

.eg-page-subtitle{
    margin:10px 0 0;
    color:var(--eg-muted);
    font-size:clamp(16px,2vw,19px);
    line-height:1.45;
}

.eg-card{
    background:linear-gradient(180deg,#fff,#F8FCF6);
    border:1px solid var(--eg-line);
    border-radius:var(--eg-radius-xl);
    box-shadow:var(--eg-shadow-card);
    overflow:hidden;
}

.eg-card-pad{
    padding:22px;
}

.eg-button,
.eg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 16px;
    border-radius:var(--eg-radius-md);
    border:1px solid transparent;
    text-decoration:none;
    font-weight:950;
    font-size:14px;
    cursor:pointer;
    text-align:center;
    white-space:nowrap;
    box-shadow:var(--eg-shadow-soft);
}

.eg-button-primary,
.eg-btn-primary{
    background:var(--eg-green);
    border-color:var(--eg-green);
    color:#fff!important;
    box-shadow:0 12px 30px rgba(40,193,0,.22);
}

.eg-button-secondary,
.eg-btn-secondary{
    background:#fff;
    border-color:var(--eg-line);
    color:var(--eg-black)!important;
}

.eg-button-dark,
.eg-btn-dark{
    background:var(--eg-black);
    border-color:var(--eg-black);
    color:#fff!important;
}

.eg-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 13px;
    border-radius:var(--eg-radius-pill);
    border:1px solid var(--eg-line);
    background:rgba(255,255,255,.9);
    color:var(--eg-black);
    text-decoration:none;
    font-weight:900;
    font-size:13px;
    box-shadow:var(--eg-shadow-soft);
}

.eg-pill-primary{
    background:var(--eg-green);
    border-color:var(--eg-green);
    color:#fff!important;
}

.eg-icon-box{
    width:42px;
    height:42px;
    border-radius:16px;
    background:var(--eg-soft-2);
    border:1px solid #CBEFC2;
    color:#236B16;
    display:grid;
    place-items:center;
    box-shadow:inset 0 0 0 12px rgba(40,193,0,.08);
}

.eg-icon-box svg{
    width:22px;
    height:22px;
}

.eg-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.eg-hidden-prod{
    display:none!important;
}

@media(max-width:620px){
    .eg-shell,
    .eg-header,
    .eg-page-head{
        width:min(100% - 24px, var(--eg-page-max));
    }

    .eg-page-head{
        padding:20px;
        border-radius:24px;
    }

    .eg-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .eg-button,
    .eg-btn{
        width:100%;
    }
}

@media(hover:hover){
    .eg-button:hover,
    .eg-btn:hover,
    .eg-pill:hover{
        filter:brightness(.985);
        transform:translateY(-1px);
    }
}