/* ===========================================================
   Demmel-Kfz Website Notice
   =========================================================== */

.dkfz-notice-wrapper{

    max-width:1280px;

    margin:0 auto;

    padding:40px 24px 10px;

}



.dkfz-notice{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:28px;

    overflow:hidden;

    border-radius:22px;

    padding:32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,0,170,.08),
            rgba(18,26,55,.95)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;

}



.dkfz-notice:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 35px rgba(255,0,170,.20);

}



/* Glow Line */

.dkfz-notice::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

}



/* Hintergrund Glow */

.dkfz-notice::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at right top,

            rgba(0,110,255,.12),

            transparent 60%),

        radial-gradient(circle at left bottom,

            rgba(255,0,170,.10),

            transparent 60%);

}



/* ===========================================================
   Icon
   =========================================================== */

.dkfz-notice-icon{

    width:72px;

    height:72px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:34px;

    color:white;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        inset 0 0 12px rgba(255,255,255,.05);

}



/* ===========================================================
   Content
   =========================================================== */

.dkfz-notice-content{

    flex:1;

}



.dkfz-notice-label{

    color:#7fb4ff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.72rem;

    font-weight:600;

    margin-bottom:8px;

}



.dkfz-notice h2{

    margin:0;

    color:white;

    font-size:2rem;

    font-weight:300;

}



.dkfz-notice p{

    margin-top:14px;

    color:#C8C9CD;

    line-height:1.8;

    font-size:1.05rem;

}



/* ===========================================================
   Farben
   =========================================================== */

.dkfz-info::before{

    background:#2d7cff;

    box-shadow:0 0 18px #2d7cff;

}

.dkfz-info .dkfz-notice-icon{

    color:#62a4ff;

}



.dkfz-success::before{

    background:#1ed760;

    box-shadow:0 0 18px #1ed760;

}

.dkfz-success .dkfz-notice-icon{

    color:#1ed760;

}



.dkfz-warning::before{

    background:#ff00aa;

    box-shadow:0 0 20px #ff00aa;

}

.dkfz-warning .dkfz-notice-icon{

    color:#ff4fc3;

}



.dkfz-danger::before{

    background:#ff4040;

    box-shadow:0 0 20px #ff4040;

}

.dkfz-danger .dkfz-notice-icon{

    color:#ff7070;

}

.dkfz-notice {
    animation: noticeFade .7s cubic-bezier(.22,.61,.36,1);
}

@keyframes noticeFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===========================================================
   Gültigkeit
   =========================================================== */

.dkfz-notice-valid{

    margin-top:34px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.62);

    font-size:.95rem;

    line-height:1.6;

}

.dkfz-notice-valid span{

    color:rgba(255,255,255,.55);

}

.dkfz-notice-valid strong{

    margin-left:6px;

    color:#ffffff;

    font-weight:600;

}

.dkfz-notice-message{

    margin-top:24px;

    color:#C8C9CD;

    line-height:1.8;

    font-size:1.05rem;

}

.dkfz-notice-message p{

    margin:0 0 16px;

}

.dkfz-notice-message ul{

    margin:12px 0 0 20px;

}

.dkfz-notice-message li{

    margin:6px 0;

}
.dkfz-notice-message p{

    margin:0 0 18px;

}

.dkfz-notice-message ul{

    margin:18px 0;

    padding-left:24px;

}

.dkfz-notice-message ol{

    margin:18px 0;

    padding-left:24px;

}

.dkfz-notice-message li{

    margin:8px 0;

    color:#C8C9CD;

}

.dkfz-notice-message a{

    color:#7fb4ff;

    text-decoration:none;

}

.dkfz-notice-message a:hover{

    text-decoration:underline;

}

/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width:768px){

.dkfz-notice{

    flex-direction:column;

    padding:24px;

}

.dkfz-notice-icon{

    width:60px;

    height:60px;

    font-size:28px;

}

.dkfz-notice h2{

    font-size:1.6rem;

}

@media (prefers-reduced-motion: no-preference) {

    .dkfz-notice {
        animation: noticeFade .7s cubic-bezier(.22,.61,.36,1);
    }

}
}