@font-face {
    font-family: 'Geist';
    src: url('assets/fonts/Geist[wght].ttf') format('truetype');
    font-weight: 100 900; /* Variable weight range */
    font-style: normal;

}

@font-face {
    font-family: 'Oswald';
    src: url('assets/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable weight range */
    font-style: normal;

    }

/* ===========================
DESIGN VARIABLES
=========================== */

:root {
    /* Primärfarben */
    --color-primary: #0B1E4B;        /* Tiefblau – Hauptmarke */
    --color-primary-darker: #050f27;        /* Tiefblau – Hauptmarke */
    --color-accent: #ff0022;         /* Signalrot – Buttons / CTA */
    --color-site-bg: #F5F7FB;        /* Seitenhintergrund */
    --color-bg: #FFFFFF;
    --color-surface: #FFFFFF;        /* Flächen / Karten */

    /* Textfarben */
    --color-text: #111827;           /* Haupttext */
    --color-text-muted: #4B5563;     /* Sekundärer Text */

    /* Linien & Rahmen */
    --color-border: #111827;         /* Dunkel (statt black) */
    --color-border-light: #E5E7EB;   /* Helle Linien */

    /* Zustände */
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;

    /* Abstände */
    --spacing-xxs: .25rem;
    --spacing-xs: .5rem;
    --spacing-s: .75rem;
    --spacing-m: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 4rem;
    --skew-offset: 4vh;
    --radius: 0rem;
    --max-width: 1200px;

    --card-padding: 1.5rem;
}

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

html, body {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--color-primary);
    color: var(--color-text);
    position: relative;
}

html{
    background-color: var(--color-primary);
}

/* GENERAL */

section{
    background-color: var(--color-site-bg);
}

main{
    max-width: var(--max-width);
    margin: auto;
}


.block{
    padding: var(--spacing-xxl) var(--spacing-s);
    margin: var(--spacing-xl) auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    max-width: var(--max-width);
    margin: auto;
}

.block-content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    padding: var(--spacing-s);
    margin: auto;
    width: 100%;
}


h1{
    font-family: 'Oswald';
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.3;
    text-transform: uppercase;
}

h2{
    font-family: 'Oswald';
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    color: var(--color-primary);
}

h3{
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Oswald';
    color: var(--color-primary);
}

h4{
    font-family: 'Oswald';
    color: var(--color-primary);
}

p{
    line-height: 1.4;
}

p.smallcopy{
    font-size: .8rem;
    color: var(--color-text-muted);
}

.button{
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 1.1rem;
    background: var(--color-primary);
    color: var(--color-bg);
    text-align: center;
    padding: var(--spacing-s) var(--spacing-l);
    border-radius: var(--radius);
    width: max-content;
    box-sizing: border-box;
    text-decoration: none;
    width: 100%;

}

.button-primary{
    background-color: var(--color-accent);
}

.button-secondary{
    background-color: var(--color-site-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}


.card{
    background: var(--color-bg);
    padding: var(--card-padding);
    border-radius: var(--radius);

/*Amination Presets*/
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, 
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

/*Animation Preset End*/

/* CUSTOM */

.hero{
    position: relative;
    color: var(--color-bg);
    overflow: hidden;
    height: 80svh;
    margin-top: 0;
    background-color: var(--color-primary);
    background-image: url(assets/img/serverroom.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hero video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* skaliert proportional, wie background-size: cover */
    z-index: 0;
    opacity: .3;
}

.block-hero{
    z-index: 1;
    margin-top: 0;
    height: 100%;
    max-width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.hero-content{
    z-index: 1;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: var(--max-width);
    gap: var(--spacing-l);
    flex-direction: column;
    justify-content: end;
    align-items:start;
    margin: auto;
    padding: var(--spacing-s);
    
}

.hero-buttons{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-s);
}

.hero button{
    width: 100%;
}



/*  */

.block-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--spacing-m);
}

.card-leistung{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    justify-content: space-between;
}

.card-content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.card-bullets{
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 600;
    gap: var(--spacing-xxs);
}

#featured{
    background: var(--color-primary);
    padding: 2rem;
    border-radius: var(--radius);
    }

#featured, #featured h2{
    color: var(--color-bg);
}

#featured button{
    background: var(--color-accent);
}

.about{
    background: rgba(0, 0, 0, 0.6);
}

#about{
    background-image: url('assets/img/AdobeStock_544395246_Preview.jpeg');
    background-size: cover;          /* skaliert proportional */
    background-position: center;     /* mittig ausgerichtet */
    background-repeat: no-repeat;    /* kein Wiederholen */
}

.about, .about h2{
    color: var(--color-bg);
}

.block-about{    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.about-us{
    max-width: var(--max-width);
}

.about .card{
    padding: 0;
    width: 100%;
    max-width: 380px;
    margin: auto;
}

.card-img-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img-wrapper img {
    object-fit: contain;
    max-height: 400px;
    width: auto;
}

.card-about .card-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-m);
    color: var(--color-primary);
}

.card-arten .card-content{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-kompetenz{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    padding: 0;
}

.card-kompetenz .card-content,
.card-kompetenz .card-bullets{
    padding: var(--card-padding);
}

.card-content--wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-kompetenz .card-bullets{
    justify-self: end;
}

.card-kompetenz .card-image{
    aspect-ratio: 5/3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-kompetenz .card-image img{
    height: 100%;
    width: auto;
    object-fit: cover;
}

.arten{
    background: var(--color-primary);
}

.arten .block-content, .arten .block-content h2{
    color: var(--color-bg);
}

.card-fertigung{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    justify-content: space-between;
}

.fertigung .block-cards{
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

@media (max-width: 768px) {
    .fertigung .block-cards {
        grid-template-columns: 1fr;
    }
}

/* Contact */

.contact .block{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0;
    max-width: 800px;
}

.contact .contact-card{
    background-color: var(--color-primary);
    color: var(--color-site-bg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

.contact .contact-card h3{
    color: var(--color-bg);
}

.contact-item{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    justify-content: space-between;
}

.contact-item--wrapper{
    display: flex;
    flex-direction: column;
}

.contact-item--wrapper a{
    color: var(--color-site-bg);
    text-decoration: none;
}

.contact-form--buttons{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contact-form--buttons .button{
    width: 100%;
}

footer{
    background-color: var(--color-primary-darker);
    color: var(--color-site-bg);
    display: flex;
    flex-direction: column;
}

footer .block{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    width: 100%;
}

footer .block-content{
    justify-content: space-between;
}

footer h4{
    color: var(--color-site-bg);
}

footer ul{
    list-style: none;
}

#footline{
    border-top: 1px solid var(--color-text-muted);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: .8rem;
    width: 100%;
}

.footline-menu{
    display: flex;
    gap: var(--spacing-m);
}

.footline-menu a{
    color: var(--color-site-bg);
    text-decoration: none;
}

#footline .block-content{
    flex-direction: row;
    flex-wrap: wrap;
}

#footer-logo-wrapper{
    display: flex;
    gap: var(--spacing-m);
    flex-direction: column;
    align-items: center;
}

.footerlogo{
    width: 64px;
}

.footerlogo-copy{
    font-family: 'Oswald';
    font-weight: 600;
    text-transform: uppercase;
}

section.impressum, section.privacy{
    padding-top: var(--spacing-xxl);
}