/* =========================================================
   RESET CSS
   ========================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* =========================================================
   HTML5 DISPLAY
   ========================================================= */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


/* =========================================================
   BASIC
   ========================================================= */

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    background: white;
}

body {
    line-height: 1;

    /* Expliziter Hintergrund: Weiss + difference = Schwarz */
    background: white;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================================================
   EINZÜGE
   ========================================================= */

.indent {
    display: block;
    margin-left: 7rem;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1 {
    margin-top: -4px;
    margin-left: 1rem;

    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;

    padding-top: 1rem;
    padding-left: 0.5rem;

    font-variant-numeric: lining-nums tabular-nums;
}


h2 {
    margin-left: 1rem;

    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;

    text-align: center;

    font-variant-numeric: lining-nums tabular-nums;
}


h3 {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;

    font-variant-numeric: lining-nums tabular-nums;
}

p {
	margin-left: 10rem;
    font-size: 7rem;
    line-height: 1rem;
    font-weight: 500;

    font-variant-numeric: lining-nums tabular-nums;
}


/* =========================================================
   ABOUT
   ========================================================= */

#about h1 {
    padding-top: calc(1.2rem + 10px);
    font-size: 1rem;
    line-height: 1.2rem;
}

#about .about-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1ch;
}


/* =========================================================
   INDEX
   ========================================================= */

#index {
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;

    font-variant-numeric: lining-nums tabular-nums;
}

#index h1 {
    font: inherit;
}

.index-item {
    position: relative;

    margin-left: 1rem;

    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;

    cursor: pointer;

    font-variant-numeric: lining-nums tabular-nums;
}

.index-title {
    display: block;
    font: inherit;
}

/* Zusatztext: standardmässig versteckt */
.index-extra {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    margin-top: -10px;

    font-size: 0.8rem;
    line-height: 1.2rem;
    font-weight: 500;

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        margin-top 0.4s ease;

    font-variant-numeric: lining-nums tabular-nums;
}

/* Zusatztext beim Hover anzeigen */
.index-item:hover .index-extra {
    max-height: 500px;

    opacity: 1;

    margin-top: 10px;
}

.index-item:hover .index-title {
    color: #111;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

/*
   WICHTIG:
   Der Blend-Mode muss auf dem Element sitzen, das den
   Stacking Context bildet (position: fixed + z-index +
   transform). Auf einem Kind würde er nur mit dem
   (transparenten) Inhalt dieser Gruppe verrechnet.
*/

.main-nav {
    position: fixed;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: fit-content;

    padding: 1rem;

    box-sizing: border-box;

    z-index: 10000;

    color: black;

    /* Nav blockiert keine Klicks auf darunterliegende Elemente */
    pointer-events: none;
}

.main-nav-list li {
    margin-top: 10px;

    display: inline-block;
    line-height: 1.2rem;
}

.main-nav-list-item a {
    color: black;
    text-decoration: none;

    /* Links bleiben klickbar */
    pointer-events: auto;
}

.main-nav-list-item a.active,
.main-nav-list-item a.active:visited,
.main-nav-list-item a.active:hover,
.main-nav-list-item a.active:focus,
.main-nav-list-item a.active:active {
    color: black;
    font-style: italic;
    text-decoration: none;
}


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

section {
    min-height: 70vh;
}


/* =========================================================
   SLIDER (gilt für alle Slider)
   ========================================================= */

.slider-wrapper {
    position: relative;

    width: 100vw;

    margin-left: 0;
    margin-bottom: 4rem;

    box-sizing: border-box;
    min-height: 100svh;

    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-padding-top: 0;
}

.slider-frame {
    position: relative;

    z-index: 1;

    overflow: hidden;

    width: 100vw;
}

.slider-images {
    display: flex;

    flex-wrap: nowrap;

    width: max-content;

    gap: 10px;

    will-change: transform;
}

.image-container {
    flex: 0 0 50vw;

    width: 50vw;
}

.image-container img {
    display: block;

    width: 100%;
    height: auto;
}

.image-container.nik-plakat-image-container {
    flex: 0 0 35vw;
    width: 35vw;
}

.image-container.nik-plakat-image-container img {
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   TEXT ÜBER DEN SLIDERN
   ========================================================= */

/*
   Der Blend-Mode sitzt auf .slider-text (dem Container mit
   position: absolute + z-index), NICHT auf dem h2.
   Weiss + difference = Negativ des Bildes darunter.
*/

.slider-text {
    position: absolute;

    z-index: 9999;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    text-align: center;

    pointer-events: auto;

    color: white;
    mix-blend-mode: difference;
}

.slider-text h2 {
    margin: 0;

    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;

    text-align: center;

    color: white;

    font-variant-numeric: lining-nums tabular-nums;
}

.slider-wrapper h4 {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10000;

    margin: 0;

    width: 70%;

    text-align: center;

    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;

    color: white;
    mix-blend-mode: difference;

    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.slider-wrapper h4 a {
    pointer-events: auto;
    color: white;
    text-decoration: underline;
}

.slider-wrapper:has(.slider-text:hover) h4,
.slider-wrapper:has(h4:hover) h4 {
    opacity: 1;
}

.slider-wrapper:has(.slider-text:hover) .slider-text,
.slider-wrapper:has(h4:hover) .slider-text {
    opacity: 0;
}


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

@media (max-width: 700px) {

    .indent {
        margin-left: 2rem;
    }

    .image-container {
        flex: 0 0 80vw;

        width: 80vw;
    }

    .image-container.nik-plakat-image-container {
        flex: 0 0 60vw;
        width: 60vw;
    }

    .slider-text {
        width: 90%;
    }

}