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

body{
background:#0f172a url("/assets/background.jpg") center center / cover no-repeat fixed;
color:#e2e8f0;
font-family:system-ui, sans-serif;
margin:0;
padding:0;
text-align:center;
}

/* ============================= */
/* Hintergrund Logo */
/* ============================= */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("/assets/Logo-2026.png") center center / 650px no-repeat;
opacity:0.2;
pointer-events:none;
z-index:-1;
}

/* ============================= */
/* Container */
/* ============================= */

.container{
max-width:900px;
margin:auto;
padding:60px 20px;
}

/* ============================= */
/* Hauptlayout */
/* ============================= */

.main-layout{
display:grid;
grid-template-columns:1fr 320px 1fr;
gap:40px;
align-items:center;
margin-top:40px;
}

/* ============================= */
/* Karten links / rechts */
/* ============================= */

.cards-left,
.cards-right{
display:flex;
flex-direction:column;
gap:20px;
}

/* ============================= */
/* Logo Mitte */
/* ============================= */

.logo-center{
text-align:center;
}

.logo-hero{
width:180px;
margin-bottom:10px;
filter:drop-shadow(0px 10px 25px rgba(0,0,0,0.6));
}

/* ============================= */
/* Titel */
/* ============================= */

h1{
font-size:44px;
margin-bottom:10px;
}

/* ============================= */
/* Untertitel */
/* ============================= */

.subtitle{
color:#94a3b8;
margin-bottom:40px;
}

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

.card{
background:rgba(30,41,59,0.85);
border-radius:10px;
padding:25px;
text-decoration:none;
color:#e2e8f0;
transition:all .15s;
border:1px solid #334155;
}

.card:hover{
transform:translateY(-4px);
border-color:#38bdf8;
}

/* ============================= */
/* Dev Box */
/* ============================= */

.devbox{
background:#020617;
border:1px solid #334155;
border-radius:8px;
padding:20px;
margin-top:50px;
text-align:left;
font-family:monospace;
color:#22c55e;
}

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

.footer{
margin-top:50px;
font-size:14px;
color:#64748b;
}

/* ============================= */
/* Links */
/* ============================= */

a{
color:#38bdf8;
}

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

@media (max-width:900px){

.main-layout{
grid-template-columns:1fr;
}

.logo-hero{
width:140px;
}

h1{
font-size:36px;
}

.cards-left,
.cards-right{
align-items:center;
}

.seo-text{
margin-top:40px;
color:#94a3b8;
max-width:700px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
font-size:14px;
}

.seo-text h2{
font-size:18px;
color:#e2e8f0;
margin-bottom:10px;
}

@media (max-width:900px){

.main-layout{
    grid-template-columns:1fr;
}

.logo-hero{
    width:140px;
}

h1{
    font-size:36px;
}

/* Cards in Grid */

.cards-left,
.cards-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    justify-items:center;
}

/* Karten kompakter */

.card{
    width:100%;
    max-width:160px;
    padding:18px;
}

.subtitle{
    padding:0 20px;
}

}



}