/* =========================================
   STYRIAN BASTARDS - STYLE.CSS
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

.section-anchor{
    display:block;
    height:1px;
    scroll-margin-top:130px;
}

body .faq-page .faq-item,
body .faq-page .faq-item p,
body .faq-page .faq-item li{
    text-align:left;
}

body .faq-page .faq-item p,
body .faq-page .faq-item li{
    line-height:1.6;
}

body .faq-page .faq-item ul{
    text-align:left;
}

body{
    background:#050505;
    color:#ffffff;

    font-family:Arial, sans-serif;

    overflow-x:hidden;
}

/* =========================================
   HERO SECTION
========================================= */

.hero{
    min-height:100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.78)
        ),
        url('background.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:
        160px
        20px
        80px
        20px;
}

.hero-content{
    max-width:950px;
}

.hero-content h1{
    font-size:clamp(3rem,8vw,6rem);

    text-transform:uppercase;

    letter-spacing:4px;

    margin-bottom:30px;

    line-height:0.95;
}

.hero-content p{
    font-size:1.2rem;

    line-height:1.8;

    color:#d6d6d6;

    margin-bottom:40px;
}

/* =========================================
   BUTTONS
========================================= */

.hero-btn,
.btn,
.btn-primary{
    display:inline-block;

    background:#b30018;
    color:#ffffff;

    padding:16px 30px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;
    text-transform:uppercase;

    letter-spacing:1px;

    border:1px solid #b30018;

    transition:0.25s ease;
}

.hero-btn:hover,
.btn:hover,
.btn-primary:hover{
    background:#8d0d16;
    border-color:#8d0d16;
    color:#ffffff;

    transform:translateY(-2px);
}

.btn-secondary{
    background:transparent;
    border-color:rgba(255,255,255,0.22);
    color:#ffffff;
}

.btn-secondary:hover{
    background:#ffffff;
    border-color:#ffffff;
    color:#050505;
}

/* =========================================
   CONTENT SECTIONS
========================================= */

section{
    max-width:1250px;

    margin:auto;

    padding:
        90px
        25px;
}

section h2{
    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );

    margin-bottom:25px;

    text-transform:uppercase;

    letter-spacing:2px;
}

section p{
    font-size:1.05rem;

    line-height:1.9;

    color:#d0d0d0;
}

/* =========================================
   CARDS / BOXES
========================================= */

.card{
    background:#0d0d0d;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:16px;

    padding:30px;

    transition:0.25s ease;
}

.card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(179,0,24,0.45);
}

/* =========================================
   SPONSOREN
========================================= */

.sponsors-page{
    min-height:100vh;
    padding:150px 25px 80px;
}

.sponsors-shell{
    max-width:1250px;
    margin:0 auto;
}

.sponsors-hero{
    margin-bottom:34px;
}

.sponsors-kicker,
.sponsor-level-badge,
.sponsor-website-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    padding:6px 10px;
    border:1px solid rgba(179,0,24,0.48);
    border-radius:999px;
    background:rgba(179,0,24,0.16);
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    letter-spacing:0.08em;
    line-height:1.2;
    text-transform:uppercase;
}

.sponsors-hero h1{
    margin:18px 0 14px;
    font-size:clamp(2.8rem,7vw,5.8rem);
    line-height:0.95;
    letter-spacing:3px;
    text-transform:uppercase;
}

.sponsors-hero p,
.sponsors-intro{
    max-width:760px;
    color:rgba(255,255,255,0.78);
    font-size:1.1rem;
    line-height:1.8;
}

.sponsors-info-block{
    margin-top:42px;
}

.sponsors-info-block h2,
.sponsors-cta h2{
    margin-bottom:22px;
    color:#ffffff;
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1;
    letter-spacing:2px;
    text-transform:uppercase;
}

.sponsors-benefits-grid,
.sponsors-level-info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.sponsors-info-card{
    min-height:150px;
    display:flex;
    align-items:flex-end;
}

.sponsors-info-card h3{
    color:#ffffff;
    font-size:20px;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:1px;
}

.sponsors-level-info{
    min-height:190px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.08);
    border-left:4px solid #b30018;
    border-radius:16px;
    background:linear-gradient(145deg, rgba(17,17,17,0.96), rgba(8,8,8,0.98));
}

.sponsors-level-info h3{
    margin-bottom:12px;
    color:#ffffff;
    font-size:20px;
    letter-spacing:0.08em;
    line-height:1.2;
    text-transform:uppercase;
}

.sponsors-level-info p{
    color:rgba(255,255,255,0.76);
    font-size:15px;
    line-height:1.65;
}

.sponsors-cta{
    margin:48px 0 12px;
    padding:34px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    border:1px solid rgba(255,255,255,0.08);
    border-left:4px solid #b30018;
    border-radius:16px;
    background:#0d0d0d;
}

.sponsors-cta h2{
    margin-bottom:14px;
}

.sponsors-cta p{
    max-width:780px;
    color:rgba(255,255,255,0.78);
    font-size:1.05rem;
    line-height:1.75;
}

.sponsors-cta-button{
    white-space:nowrap;
}

.sponsors-section[hidden]{
    display:none;
}

.sponsor-level{
    margin-top:36px;
}

.sponsor-level:first-of-type{
    margin-top:0;
}

.sponsor-level h3{
    margin-bottom:18px;
    font-size:20px;
    color:#ffffff;
    letter-spacing:0.12em;
    text-transform:uppercase;
}

.sponsors-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
}

.sponsor-card{
    min-height:188px;
    padding:22px 20px;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.sponsor-card a,
.sponsor-card .sponsor-link{
    color:inherit;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:100%;
    height:100%;
}

.sponsor-logo-wrap{
    width:100%;
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sponsor-logo{
    display:block;
    max-width:180px;
    max-height:88px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.sponsor-name{
    color:#ffffff;
    font-size:18px;
    font-weight:800;
    line-height:1.25;
}

.sponsor-description{
    margin-top:-2px;
    color:rgba(255,255,255,0.76);
    font-size:14px;
    line-height:1.5;
}

.sponsor-website-label{
    border-color:rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.84);
}

.sponsor-empty-state{
    max-width:720px;
    margin:0;
    padding:24px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.72);
    font-size:15px;
    text-align:center;
}

@media (max-width:900px){
    .sponsors-page{
        padding-top:185px;
    }

    .sponsors-benefits-grid,
    .sponsors-level-info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sponsors-cta{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){
    .sponsors-page{
        padding-left:18px;
        padding-right:18px;
    }

    .sponsors-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .sponsors-benefits-grid,
    .sponsors-level-info-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .sponsors-info-card,
    .sponsors-level-info{
        min-height:0;
    }

    .sponsors-cta{
        padding:24px 20px;
    }

    .sponsors-cta-button{
        width:100%;
        text-align:center;
    }

    .sponsor-card{
        min-height:0;
        padding:18px 16px;
    }

    .sponsor-logo-wrap{
        min-height:76px;
    }

    .sponsor-logo{
        max-width:160px;
        max-height:76px;
    }
}

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

footer{
    background:#0b0b0b;

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

    text-align:center;

    padding:
        45px
        20px;

    color:#9e9e9e;
}

footer p{
    margin-bottom:10px;
}

footer a{
    color:#ffffff;

    text-decoration:none;

    transition:0.25s;
}

footer a:hover{
    color:#b30018;
}

/* =========================================
   SOCIAL ICONS
========================================= */

.social-links{
    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:20px;
}

.social-links a{
    color:white;

    font-size:1.4rem;

    transition:0.25s ease;
}

.social-links a:hover{
    color:#b30018;

    transform:translateY(-2px);
}

/* =========================================
   FORMULAR
========================================= */

form{
    max-width:800px;

    margin:auto;
}

input,
textarea,
select{
    width:100%;

    background:#111111;

    color:white;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:10px;

    padding:15px;

    margin-bottom:18px;

    font-size:1rem;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;

    border-color:#b30018;
}

label{
    display:block;

    margin-bottom:8px;

    font-weight:bold;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:950px){

    .hero{
        padding-top:190px;
    }

    .hero-content h1{
        font-size:3rem;
    }

    .hero-content p{
        font-size:1rem;
    }

    section{
        padding:
            70px
            20px;
    }

}


/* =========================================
   AUSGELAGERTER FOOTER
========================================= */

.site-footer {
    background: #050505;
    border-top: 1px solid rgba(255,255,255,0.15);
    color: #ffffff;
    padding: 55px 25px;
    font-family: 'Oswald', Arial, sans-serif;
}

.footer-inner {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 35px;
    align-items: start;
}

.site-footer h2,
.site-footer h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.site-footer p {
    color: #cfcfcf;
    line-height: 1.7;
    margin-bottom: 8px;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.25s ease;
}

.site-footer a:hover {
    color: #b30018;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 15px;
}

.footer-socials a {
    border: 1px solid rgba(255,255,255,0.22);
    padding: 8px 13px;
    border-radius: 999px;
}

.footer-socials a:hover {
    border-color: #b30018;
}

@media (max-width: 850px) {
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
    }
}