/* #region reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: pretty; 
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: 1.1;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit; 
    color: inherit;
    letter-spacing: inherit;
}

a {
    color: inherit;
}

textarea {
    resize: vertical;
}

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

:focus:not(:focus-visible) {
    outline: none;
}

ol[class], ul[class] {
    list-style: none;
}


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


@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* #endregion reset */

/* #region Schriftarten */

@font-face {
    font-family: "documenta-sans-table";
    src: url("../fonts/documenta-sans-regular-table.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "documenta-sans";
    src: url("../fonts/documenta-sans-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "amatiksymbols";
    src: url("../fonts/amatiksymbols.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* #endregion Schriftarten */

/* #region variables */
html {
    --font-h2: clamp(1.75rem, 1.5968rem + 0.7658vw, 2.8125rem);
    
    --clr-primary: #000;
    --clr-secondary: #fff;
    --color-accent: #4e4e4e;
    --color-accent-dark:#2f2f2f;

    --color-pink: rgb(230, 14, 118);
    --color-green: rgb(31, 134, 55);
    --color-orange: rgb(206, 75, 22);
    --color-blue: rgb(0, 126, 186);
    --color-olive: rgb(106, 128, 41);




    --padder: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);

    --fontface-primary: documenta-sans-table;
    --fontface-secondary: documenta-sans;
    --fontface-icons: amatiksymbols;
}
/* #endregion variables */

body {
font-family: var( --fontface-primary);
background-color: var(--color-accent);
color: var(--clr-secondary);
}

.skip {
	position: absolute;
	text-indent: -9999vw;
}

/* #region Schriften */

h1 {
	text-align: center;
	margin-bottom: 2em;
}

.intro-text span {
	font-size: var(--font-h2);
	font-family: var(--fontface-secondary);
}

/* #endregion Schriften */

/* #region header und Menü */

header {
	position: sticky;
	top: 0;
	width: 100%;
	padding: var(--padder);
	padding-block: calc(.5*var(--padder));
}

body:has(.section-nav) header {
	position: fixed;
    z-index: 100;
}

/* Menü Liste Karte */

.list-nav ul, .section-nav ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
}

.list-nav ul a, .section-nav ul a {
    text-decoration: none;
}

.list-nav ul a:hover, .list-nav ul a.active,
.section-nav ul a:hover, .section-nav ul a.active {
	text-decoration: underline;
}

/* Menü Rechts */

.section-nav {
	width: 6rem;
	background: var(--color-accent);
	min-height: 100dvh;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1;
	align-content: center;
	border-left: 1px solid;
	box-sizing: content-box;
}

.section-nav ul {
	display: grid;
	justify-content: center;
	text-align: center;
}

.section-nav svg {
	max-width: 25px;
	fill: rgba(255, 255, 255, 0.25);
	margin: auto;
}

.section-nav .active svg, .section-nav a:hover svg {
	fill: rgba(255, 255, 255, 1);
}

body:has(.section-nav) header, body:has(.section-nav) main {
	width: calc(100% - 6rem);
}

/* #endregion header und Menü */

/* #region Container und grids */

.container.full {
	padding-bottom: calc(3*var(--padder));
}

.container.list {
	max-width: 1080px;
	margin: auto;
	display: grid;
	gap: calc(3*var(--padder));
}

.intro-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-decoration: none;
}

.intro-image {
	justify-content: end;
	display: grid;
}

.intro-image {
	mask-image: var(--mask-image);
	background-color: rgba(0, 0, 0, 0);
	background-position: 0% 0%, left center;
	background-repeat: no-repeat;
	background-position: right;
	background-image: var(--background-image), linear-gradient(rgba(255, 255, 255, 0) 30%, var(--intro-gradient-clr));
	background-size: contain;
	background-blend-mode: multiply;
	mask-size: contain;
	mask-position: right;
	mask-repeat: no-repeat;
}

.intro-image img {
	opacity: 0;
}

.intro-item:nth-child(2n) .intro-image {
	order: 1;
	justify-content: start;
	background-position: left;
	mask-position: left;
}

.intro-text {
	display: grid;
	align-content: end;
	translate: 0 var(--padder);
}

.intro-item:nth-child(2n) .intro-text {
	text-align: right;
}

/* #endregion Container und grids */

/* #region Content */

.textbereich {
	padding: var(--padder);
	max-width: fit-content;
	margin: auto;
    background-color: var(--clr-secondary);
    color: var(--clr-primary);
}

p {
	max-width: 70ch;
	font-size: 24px;
}

/* #endregion Content */

/* #region Slideshow */

.slideshow {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	height: calc(100dvh - 70px);
}

.slideshow::before {
	content: '';
	mask-image: linear-gradient(#000 20%,#000000d1 40%,#000000b0 50%,#00000082 68%,#0000004d 83%,#0000);
	background-color: inherit;
	height: 10rem;
	width: calc(100% - 6rem);
	display: block;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
}

.slides {
	position: absolute;
	inset: 0;
}

.slide {
	position: absolute;
	inset: 0;

	opacity: 0;
	pointer-events: none;

	transition: opacity 1s ease;
}

.slide.active {
	opacity: 1;
	pointer-events: auto;
}

.slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Navigation */

.slide-nav,
.slide-pause {
	position: absolute;
	z-index: 2;

	border: 0;
	background: rgba(0, 0, 0, .5);
	color: #fff;

	cursor: pointer;
}


/* Links / Rechts */

.slide-nav {
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	font-size: 32px;
	line-height: 1;
	font-family: var(--fontface-icons);
}

.slide-nav.prev {
	left: 20px;
}

.slide-nav.next {
	right: 20px;
}


/* Pause */

.slide-pause {
	right: 20px;
	bottom: 20px;

	padding: 10px 16px;
}


/* Hover */

.slide-nav:hover,
.slide-pause:hover {
	background: rgba(0, 0, 0, .8);
}


/* Fokus für Tastatur */

.slide-nav:focus-visible,
.slide-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}


/* reduzierte Bewegungen */

@media (prefers-reduced-motion: reduce) {

	.slide {
		transition: none;
	}

}

/* #endregion Slideshow */

/* #region Audioplayer */

/* ========================================
   Audio Player
======================================== */

.audio-player {
    width: 100%;
    margin-bottom: 40px;
}


/*
    Das echte Audioelement benötigen wir nur
    für die Wiedergabe.
*/

.audio-player audio {
    display: none;
}


/* ========================================
   Controls
======================================== */

.audio-controls {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	height: 70px;
	background: var(--color-accent-dark);
    position: relative;
}


/* ========================================
   Mittlerer Bereich
======================================== */

.audio-main {
    flex: 1;
    min-width: 0;
}


/* ========================================
   Titel
======================================== */

.audio-title {
	width: 100%;
	margin-bottom: 0;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.3;
	position: absolute;
	top: 8px;
}


/* ========================================
   Timeline
======================================== */

.audio-timeline {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;
}


/* ========================================
   Buttons
======================================== */

.audio-control {
    appearance: none;
    -webkit-appearance: none;

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

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: none;
    color: currentColor;

    cursor: pointer;
}


/* Deine Iconfont */

.audio-control .iconfont {
	font-size: 20px;
	line-height: 1;
	font-family: var(--fontface-icons);
}


/* Sound-Icon */

.audio-sound-icon {
    font-size: 20px;
    line-height: 1;
    font-family: var(--fontface-icons);
}


/* Optional:
   optische Änderung bei Mute
*/

.audio-control--mute.is-muted {
    opacity: 0.4;
}


/* ========================================
   Zeit
======================================== */

.audio-time {
    flex: 0 0 auto;

    font-size: 14px;
    line-height: 1;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}


/* ========================================
   Progress
======================================== */

.audio-progress {
    --progress: 0%;
    color: var(--progress-color);
    flex: 1;

    min-width: 0;

    appearance: none;
    -webkit-appearance: none;

    height: 3px;

    padding: 0;
    margin: 0;

    border: 0;

    background:
        linear-gradient(
            to right,
            currentColor 0%,
            currentColor var(--progress),
            rgba(0, 0, 0, 0.2) var(--progress),
            rgba(0, 0, 0, 0.2) 100%
        );

    cursor: pointer;
}


/* ========================================
   Progress Thumb
   Chrome / Edge / Safari
======================================== */

.audio-progress::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: currentColor;

    cursor: pointer;
}


/* ========================================
   Progress Thumb
   Firefox
======================================== */

.audio-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: currentColor;

    cursor: pointer;
}


/*
    Firefox zeichnet normalerweise noch
    einen eigenen Track.
*/

.audio-progress::-moz-range-track {
    height: 3px;

    background: transparent;
}


/* ========================================
   Focus
======================================== */

.audio-control:focus-visible,
.audio-progress:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* #endregion Audioplayer */

/* #region Dialog */

.section-content {
    position: relative;
    width: 100%;
}

.section-content dialog {
    position: static;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    width: 100%;
    max-width: none;
}

.section-content dialog:not([open]) {
    display: none;
}