:root {
    --active-color: hsl(204 100 53);
    --bg-color: #e1e3e5;
    --icon-default: hsl(203 5 75);
    --icon-accent: hsl(203 15 98);
    --navigation-color: hsl(203 5 25 / 0.3);
    --color-bg: black;
    --color-text: white;
    --color-primary: #0c7500;
    --font-family: 'Avenir', 'Gill Sans', sans-serif;
}

/* --------------------------------------- */
/* Base */
/* --------------------------------------- */

body {
    padding: 0%;
}

h1 {
    font-family: HeroFont;
}

.project-page {
    padding: 2% 5%;
    box-sizing: border-box;
}

.project-page p {
    max-width: 900px;
    margin-bottom: 3rem;
    margin-top: 2rem;
    padding-left: 4rem;
    padding-right: 3rem;
}

@media screen and (max-width: 430px) {
    .project-page p {
        padding: 1rem;
        padding-left: 2rem;
    }

    
}

/* --------------------------------------- */
/* Image Slider */
/* --------------------------------------- */

.image-slider {
    display: flex;
    flex-flow: column;
    width: clamp(360px, 96vw, 830px);
    aspect-ratio: 16 / 9;
    min-height: 300px;
    overflow: hidden;
    border-radius: 8px;
    container-type: inline-size;
    contain: content;
    background-color: #0006;
    box-shadow:
        rgba(0, 0, 0, 0.2) 0px 1px 2px,
        rgba(0, 0, 0, 0.3) 0px 2px 4px,
        rgba(0, 0, 0, 0.25) 0px 4px 8px,
        rgba(0, 0, 0, 0.2) 0px 8px 16px,
        rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.slider__content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.slider-control--button {
    border: 0;
    background: 0;
    outline: 0;
    cursor: pointer;
    place-content: center;
    padding-inline: 3vw;
    z-index: 1;
    display: grid;
}

.icon {
    height: 2rem;
    width: 2rem;
    fill: var(--icon-default);
    border-radius: 50%;
}

.slider-control--button:where(:hover) {
    background-image: linear-gradient(
        to var(--position),
        #0000 0%,
        #0002 80%,
        #0006 100%
    );
}

.slider-control--button:where(:hover) .icon {
    fill: var(--icon-accent);
    background: #0001;
}

.slider-control--button:active {
    outline: 0.2em solid hsl(204 100 53);
    outline-offset: -0.5em;
}

.prev-button {
    --position: left;
}

.next-button {
    --position: right;
}

.image-display {
    position: fixed;
    inset: 0;
}

.slider-navigation {
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 1rem;
    place-content: center;
    background-color: var(--navigation-color);
    backdrop-filter: blur(6px);
}

.nav-button {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 0;
    aspect-ratio: 16 / 9;
    transition:
        filter 150ms linear,
        scale 266ms ease;
}

.thumbnail {
    display: block;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.nav-button[aria-selected="true"] {
    scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
    outline: 0.2em solid var(--active-color);
    outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
    filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
    filter: opacity(1);
}

/* Slider: Container Query für kleine Breiten */

@container (max-width: 660px) {
    .nav-button:not(:has(img)) {
        background-color: rgb(241, 235, 232);
    }

    .slider-navigation {
        display: flex;
        justify-content: center;
        padding-block: 1.5em;
    }

    .nav-button {
        inline-size: 0.625rem;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .nav-button > .thumbnail {
        display: none;
    }

    .nav-button[aria-selected="true"] {
        background-color: black;
        scale: 1.5;
    }
}

/* --------------------------------------- */
/* Projekt Eduart: Mockups (Mac, iPad, iPhone, Flyer) */
/* --------------------------------------- */

.website-card {
    position: relative;
    width: 90%;      /* MacBook Bildbreite */
    max-width: 100%;
    margin: 0 auto;  /* Zentriert die Karte */
    padding: 0;
}

.macbook-background {
    width: 100%;
    height: auto;
    display: block;
}

.website-card iframe {
    position: absolute;
    bottom: -10%;   /* Abstand von oben, um im Bildschirm zu sitzen */
    left: -12.5%;  /* Abstand von links, um im Bildschirm zu sitzen */
    width: 125%;   /* Breite des "Bildschirms" */
    height: 128%;  /* Höhe des "Bildschirms" */
    border: none;
    background: white;
    padding-left: 0;
    scale: 0.6;
    border: 1px solid #2c2c2c;
}

/* iPad Container */

.ipad-card {
    position: relative;
    max-width: 90%;
    margin: 0 auto;   /* Zentriert die Karte */
    display: none;    /* Standardmäßig ausblenden */
}

.ipad-background {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ipad-card iframe {
    position: absolute;
    bottom: -40%;   /* Abstand von oben, um im Bildschirm zu sitzen */
    left: -20%;     /* Abstand von links, um im Bildschirm zu sitzen */
    width: 140%;    /* Breite des "Bildschirms" */
    height: 180%;   /* Höhe des "Bildschirms" */
    border: 1px solid #2c2c2c;
    background: white;
    padding-left: 0;
    scale: 0.5;
}

/* iPhone Container (für sehr kleine Bildschirme) */

.iphone-card {
    position: relative;
    margin: 0 auto;   /* Zentriert die Karte */
    display: none;    /* Standardmäßig ausblenden */
}

.iphone-background {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.iphone-card iframe {
    position: absolute;
    bottom: -77%;   /* Position im iPhone-Screen */
    left: -45%;
    width: 190%;
    height: 250%;
    border: 1px solid #2c2c2c;
    background: white;
    padding-left: 0;
    scale: 0.35;
}

/* Flyer */

.flyer-mockup {
    position: relative;
    width: 90%;  /* Flyer Breite */
    max-width: 100%;
    margin: 0 auto; /* Zentriert die Karte */
}

/* --------------------------------------- */
/* Video-Galerie */
/* --------------------------------------- */

.video-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Standard: Querformat → 2 pro Zeile */
.video-container video {
    width: calc(50% - 10px);
    height: auto;
    display: block;

    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    outline: 2px solid transparent;
    outline-offset: 2px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        outline-color 0.2s ease;
}

/* Quadratvideos → 4 pro Zeile */
.video-container video.square {
    width: calc(25% - 10px);
}

/* Hover-Effekt: Schatten + grüne Outline */
.video-container video:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    outline-color: #0c7500;
}

/* Controls nur beim Hover sichtbar */
.video-container video::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-container video:hover::-webkit-media-controls {
    opacity: 1;
}

/* --------------------------------------- */
/* Responsive Breakpoints */
/* --------------------------------------- */

/* Website (MacBook) auf kleiner 1000px ausblenden */
@media (max-width: 1000px) {
    .website-card {
        display: none;
    }
}

/* iPad auf bis 1000px anzeigen */
@media screen and (max-width: 1000px) {
    .ipad-card {
        display: block; /* Bei kleinerer Bildschirmgröße anzeigen */
        margin: 0 auto; /* Zentriert die Karte */
    }
}

/* Tablet: 2 Videos pro Zeile */
@media (max-width: 430px) {
    /* Ab hier: iPhone statt iPad zeigen */
    .ipad-card {
        display: none;
    }

    .iphone-card {
        display: block;
    }

    .video-container video,
    .video-container video.square {
        width: calc(50% - 10px);
    }
}

/* Handy: 1 Video pro Zeile */
@media (max-width: 450px) {
    .video-container video,
    .video-container video.square {
        width: 100%;
    }
}




/* --------------------------------------- */
/* privacy-policy page */
/* --------------------------------------- */
.privacy-page {
    padding: 2% 20%;
    box-sizing: border-box;
    text-align: center;
}

.privacy-page p {
    text-align: justify;
}

.privacy-page h2 {
    font-weight: normal;
    font-size: 3rem;
    margin-top: -1rem;
}

.privacy-page ul {
    margin-bottom: 3rem;
    margin-top: 2rem;
    text-align: left;
    padding-left: 13vw;
}