:root {
    /*
     * Farbpalette
     */

    --background: #111418;
    --background-dark: #080a0d;
    --background-light: #2f353b;
    --surface: #22272e;
    --metal-light: #c4cbd2;
    --metal: #8b949e;
    --metal-dark: #484f58;
    --text: #e6edf3;
    --accent: #00b8d4;
    --warning-yellow: #ffd400;
    /*
     * Geometrie
     */

    --future-edge: polygon( var(--corner-size, 25px) 0, 100% 0, 100% calc(100% - var(--corner-size, 25px)), calc(100% - var(--corner-size, 25px)) 100%, 0 100%, 0 var(--corner-size, 25px) );
    --caution-stripe: repeating-linear-gradient( -45deg, var(--warning-yellow) 0 10px, #111 10px 20px );
}

/*
 * Grundformatierung
 */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: var(--background);
    background-image: linear-gradient( 90deg, var(--background-dark) 0%, var(--background-light) 50%, var(--background-dark) 100% );
    color: var(--text);
    font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
}

/*
 * Überschriften und Text
 */

h1,
h2,
h3,
h4,
nav {
    text-align: center;
    font-stretch: condensed;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 {
    margin: 1em;
    font-size: clamp(2rem, 5vw, 4rem);
}

h2,
h3,
h4 {
    margin-block: 0.7em;
}

p {
    margin: 0.3em 1em;
}

a {
    color: var(--text);
    text-decoration: none;
}

ul {
    list-style: none;
}

/*
 * Header
 */

header {
    position: relative;
}

#header {
    position: sticky;
    top: 0;
    z-index: 1000;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0;
    
    width: 100%;
    
    background-color: var(--surface);
    box-shadow: 0 8px 20px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 8%);
}

    #header > img {
        display: block;
        max-height: 80px;
        width: auto;
        margin-left: 12px;
    }

/*
 * Navigation
 */

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

nav a {
    display: inline-block;
    width: 120px;
    padding: 0.5em 1em;
    border-bottom: 4px solid transparent;
    text-align: center;
}

    nav a:hover,
    nav a:focus-visible {
        background-image: var(--caution-stripe);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100% 4px;
    }

/*
 * Hauptinhalt
 */

main {
    width: min(1100px, calc(100% - 24px));
    margin-inline: auto;
}

section {
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: justify;
}

/*
 * Standardflächen
 */

#header,
.section {
    background-color: var(--surface);
    box-shadow: 0 8px 20px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 8%);
}

.section {
    --corner-size: 25px;
    margin: 12px;
    padding: 2% 10%;
    clip-path: var(--future-edge);
}

/*
 * Grid
 */

.grid {
    display: grid;
    gap: 1rem;
}

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

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.btn-wrapper:not(:first-child) {
    margin-top: 15px;
}

.btn-wrapper {
    display: grid;
    grid-template-columns: 20px auto;
    grid-gap: 10px;
    min-width: 200px;
    height: 35px;
    margin-left: 10px;
    transform: skewX(-45deg);
}

.btn-wrapper > * {
    background-color: var(--warning-yellow);
}

.btn-wrapper:hover .btn-tail {
    background-color: var(--metal);
}

.btn-body {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--metal-dark);
}

.btn-wrapper:hover .btn-body {
    color: var(--metal-dark);
}

.btn-body::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
background-color: var(--metal);
    transition: all 0.3s ease-out;
}

.btn-wrapper:hover .btn-body::before {
    width: 100%;
}

.btn-body p {
    margin-left: 15px;
    text-transform: uppercase;
    transform: skewX(45deg);
}

.btn-tail {
    transition: all 0s ease-out 0.3s;
}

.btn-wrapper:hover .btn-tail {
    transition: none;
}

/*
 * Call-to-Action-Buttons
 */
.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3rem;
    margin-bottom: 5em;
}
/*
 * Call-to-Action-Buttons
 */
/*
 * Produktbereiche
 */

.product-container img {
    display: block;
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0.8em auto;
    object-fit: contain;
}

.product-container ul {
    margin: 1em;
}

.product-container li {
    margin-block: 0.4em;
}

/*
 * Faktenbereich
 */

#facts-section,
.facts-section {
    --corner-size: 25px;
    border: 4px solid transparent;
    background: linear-gradient( var(--surface), var(--surface) ) padding-box, var(--caution-stripe) border-box;
    clip-path: var(--future-edge);
}

/*
 * Wiederverwendbare Hilfsklasse
 */

.future-edge {
    clip-path: var(--future-edge);
}

/*
 * Responsive Darstellung
 */

@media (max-width: 900px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 2rem 1.5rem;
    }

    h1 {
        margin: 0.7em 0.3em;
    }
}

@media (max-width: 500px) {
    nav ul {
        gap: 0.25em;
    }

    nav a {
        width: auto;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1em;
    }

    .product-container img {
        height: 200px;
    }
}