/*
=====================================================
Gegen Sozialbetrug
Modernes Hauptdesign
=====================================================
*/


/* =====================================================
   Grundlayout
===================================================== */


*,
*::before,
*::after{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;

    padding:0;

    font-family:

    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    background:#f4f7fb;

    color:#1f2937;

    line-height:1.6;

}



img{

    max-width:100%;

}



a{

    color:#2563eb;

    text-decoration:none;

}



a:hover{

    text-decoration:none;

}





.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





/* =====================================================
   Header
===================================================== */


.header{

    background:

    rgba(15,23,42,.95);

    color:white;

    padding:18px 0;

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(10px);

}



.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.logo{

    font-size:24px;

    font-weight:800;

}



nav{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



nav a{

    color:white;

    font-weight:600;

    transition:.3s;

}



nav a:hover{

    color:#60a5fa;

}





/* =====================================================
   Hero
===================================================== */


.hero{

    padding:110px 0;

    text-align:center;

    color:white;

    overflow:hidden;

}



.animated-bg{

    background:

    linear-gradient(

        135deg,

        #0f172a,

        #1d4ed8,

        #2563eb

    );



    background-size:300% 300%;

    animation:

    gradientMove 12s ease infinite;

}



@keyframes gradientMove{


0%{

background-position:0% 50%;

}


50%{

background-position:100% 50%;

}


100%{

background-position:0% 50%;

}


}



.hero h1{

    font-size:48px;

    margin-bottom:20px;

}



.hero p{

    font-size:21px;

    max-width:750px;

    margin:0 auto 35px;

}





/* =====================================================
   Buttons
===================================================== */


.button,
button{


    display:inline-block;

    background:#2563eb;

    color:white;

    border:none;

    padding:14px 28px;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}



.button:hover,
button:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}



.pulse{

    animation:pulseButton 2s infinite;

}



@keyframes pulseButton{


0%{

box-shadow:0 0 0 0 rgba(37,99,235,.6);

}


70%{

box-shadow:0 0 0 20px rgba(37,99,235,0);

}


100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}


}





/* =====================================================
   Bereiche
===================================================== */


.section{

    padding:70px 0;

}



.light{

    background:white;

}





/* =====================================================
   Karten
===================================================== */


.cards{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}



.card{

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:

    0 10px 30px

    rgba(0,0,0,.08);

    transition:.35s;

}



.card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 45px

    rgba(0,0,0,.15);

}



.card h2{

    font-size:42px;

    margin-top:0;

}



.card strong{

    font-size:38px;

    color:#2563eb;

}





/* =====================================================
   Boxen
===================================================== */


.box{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:

    0 10px 30px

    rgba(0,0,0,.08);

    margin-bottom:30px;

}



.highlight{

    text-align:center;

    background:

    linear-gradient(

        135deg,

        #eff6ff,

        #ffffff

    );

}





/* =====================================================
   Formulare
===================================================== */


label{

    display:block;

    margin-top:18px;

    font-weight:700;

}



input,
textarea,
select{


    width:100%;

    padding:14px;

    margin-top:8px;

    border:

    1px solid #d1d5db;

    border-radius:10px;

    font-size:16px;

    background:white;

}



input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:

    0 0 0 3px

    rgba(37,99,235,.15);

}





/* =====================================================
   Tabellen Admin
===================================================== */


table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:12px;

}



th{

    background:#0f172a;

    color:white;

}



th,
td{

    padding:14px;

    border-bottom:

    1px solid #e5e7eb;

}



tr:hover{

    background:#f8fafc;

}





/* =====================================================
   Animationen
===================================================== */


.fade-in{

    animation:

    fadeIn 1s ease;

}



@keyframes fadeIn{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:none;

}


}



.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}



.reveal.show{

    opacity:1;

    transform:none;

}





/* =====================================================
   Footer
===================================================== */


.footer{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:35px 0;

}



.footer a{

    color:#93c5fd;

}





/* =====================================================
   Responsive
===================================================== */


@media(max-width:800px){


.header-inner{

    flex-direction:column;

}



nav{

    justify-content:center;

}



.hero{

    padding:70px 0;

}



.hero h1{

    font-size:34px;

}



.hero p{

    font-size:17px;

}



.button{

    width:100%;

    text-align:center;

}



.box{

    padding:20px;

}



table{

    display:block;

    overflow-x:auto;

}



}