:root {
    --color-primary: #005fcc;
    --color-text: #222;
    --color-bg: #ffffff;

    --container-width: 1200px;
    --spacing: 1rem;
}


/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/inter-v20-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* inter-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/inter-v20-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




html {
    scroll-behavior: smooth;
}

body {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;

    color: var(--color-text);
    background: var(--color-bg);
}

/* Skip-Link */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 1rem;
    z-index: 9999;
}

.skip-link:focus {
    left: 1rem;
}


/* Fokus sichtbar */

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Container */

.container {
    width: min(
	calc(100% - 2rem),
	var(--container-width)
    );

    margin-inline: auto;
}

:root {
	--mw-page-gap: 40px;
}
/* Main */

main {

}

#main-slider {
    height: 100dvh;
    width: 100%;
    position: relative;
}

.marcel-wagner-main-slider-object {
	height: 100%;
	background: #000
}

.mw-slider-item-imagecontainer {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.mw-slider-item-imagecontainer figure {
	height: 100%;
	width: 100%;
	position: relative
}

.mw-slider-item-imagecontainer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center
}

#main-slider {
	--swiper-navigation-size: 50px;
	--swiper-theme-color: #fff;
}

.swiper-button-prev-mw {
	position: absolute;
	left: var(--mw-page-gap) !important;
	bottom: var(--mw-page-gap) !important;
	top: auto !important;
	right: auto !important
}

.swiper-button-next-mw {
	position: absolute;
	left: calc( var(--mw-page-gap) + 60px) !important;
	bottom: var(--mw-page-gap) !important;
	top: auto !important;
	right: auto !important
}

#page-title {
	position: absolute;
	top: 0;
	left: var(--mw-page-gap);
	width: calc(100% - var(--mw-page-gap));
	height: 100dvh;
	z-index: 100;
	display: flex;
	justify-content: left; /* horizontal */
	align-items: center;     /* vertikal */
	color: #fff;
	pointer-events: none
}


#page-title h1 {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-size: 6rem;
	line-height: 1em;
	margin: 0;
	padding: 0;
	text-shadow:
	    0 2px 140px rgba(0,0,0,0.2),
	    0 8px 54px rgba(0,0,0,0.35);
}


.page-signature--container {
	padding: 30px 0 0 0
}


#page-title h2 {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-size: 4rem;
	line-height: 1em;
	margin: 20px 0 0 0;
	text-shadow:
	    0 2px 140px rgba(0,0,0,0.2),
	    0 8px 54px rgba(0,0,0,0.35);
}

@media screen and (max-width: 1500px) {
	#page-title h1 { font-size: 5rem; }
	#page-title h2 { font-size: 4rem; }
}

@media screen and (max-width: 1400px) {
	#page-title {
		align-items: end;     /* vertikal */
	}
	
	.page-signature--container {
		padding: 30px 0 100px 0
	}
	
	.marcel-wagner-main-slider-object:before {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		background: #000000;
		background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.43) 0%, rgba(0, 0, 0, 0) 100%);
		background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.43) 0%, rgba(0, 0, 0, 0) 100%);
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.43) 0%, rgba(0, 0, 0, 0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
		bottom: 0;
		z-index: 10
	}

}


@media screen and (max-width: 1000px) {
	#page-title h1 { font-size: 4rem; display: block; width: 90% }
	#page-title h2 { font-size: 2rem; }
}


/* Footer */



.site-footer { 
	position: fixed; 
	right: var(--mw-page-gap); 
	bottom: var(--mw-page-gap);
	z-index: 100;color: #fff;
	text-align: right;
	font-size: .8rem;
	width: calc(100vh - 200px);
	mix-blend-mode: difference
 }
 
 
 @media screen and (max-width: 700px) {
	 
	 .site-footer .container {
	     width: 100%
	 }
	 
	 #page-title h1 { font-size: 3rem; display: block; width: 90% }
	 #page-title h2 { font-size: 1.5rem; }
	 
	.site-footer { 
		position: relative;
		text-align: left;
		left: var(--mw-page-gap) !important; 
		bottom: auto;
		color: #000;
		width: calc(100% - calc( 2 * var(--mw-page-gap) ));
		padding: 30px 0;
		mix-blend-mode: normal
	}
	
	.page-signature--container {
		width: 60%;
	}
 }
 
.marcel-wagner-textcontainer-inner {
	padding: 50px 100px 50px var(--mw-page-gap);
}

#marcel-wagner-textcontainer h2 {
	font-size: 1.8rem;
	font-family: 'Inter';
	  font-style: normal;
	  font-weight: 800;
	  letter-spacing: -.4px;
	  line-height: 1.2em;
	  margin: 0 0 15px 0
}
 
#marcel-wagner-textcontainer p {
	font-family: 'Inter';
	  font-style: normal;
	  font-weight: 500;
	  max-width: 70%;
}

.header {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1000;
 
     display: flex;
     justify-content: flex-end; /* rechtsbündig */
     align-items: center;
 
     
     background: rgba(255, 255, 255, 0.894);
     
     -webkit-border-radius: 60px 60px 60px 60px;
     border-radius: 60px 60px 60px 60px;
     
 }
 
 .instagram-link {
     font-size: 28px;
     color: #E4405F;
     text-decoration: none;
     padding: 10px;
 }
 
 .instagram-link svg {
	 width: 30px;
	 height: 30px;
 }
 
 .instagram-link:hover {
     opacity: 0.5;
 }
 
 
 
 .mail-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.9rem 1.35rem;
     min-height: 48px;
     display: inline-block;
     margin: 20px 0 0 0;
     background: #000;
     color: #fff;
 
     font: 600 15px/1 system-ui, sans-serif;
     text-decoration: none;
 
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.08);
 
     transition:
	 transform .18s ease,
	 opacity .18s ease;
 }
 
 .mail-btn:hover {
     transform: translateY(-1px);
     opacity: .92;
 }
 
 .mail-btn:focus-visible {
     outline: 3px solid #3b82f6;
     outline-offset: 3px;
 }
 
@media screen and (max-width: 1000px) {
	#marcel-wagner-textcontainer p {
		max-width: 100%;
	}
}
 
 @media (max-width: 480px) {
     .mail-btn {
	 width: 100%;
     }
 }
 
 
 
 #default-content {
     max-width: 900px;
     margin: 0 auto;
     padding: 40px;
     color: #1f2937;
     line-height: 1.8;
     font-size: 1rem;
 }
 
 /* Headings */
 
 #default-content h1,
 #default-content h2,
 #default-content h3,
 #default-content h4,
 #default-content h5,
 #default-content h6 {
     margin: 0;
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: -0.02em;
     color: #111827;
 }
 
 #default-content h1 {
     font-size: clamp(2.2rem, 5vw, 3.5rem);
     margin-bottom: 2rem;
 }
 
 #default-content h2 {
     font-size: clamp(1.6rem, 3vw, 2.2rem);
     margin-top: 3rem;
     margin-bottom: 1.25rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid #e5e7eb;
 }
 
 #default-content h3 {
     font-size: 1.4rem;
     margin-top: 2rem;
     margin-bottom: 1rem;
 }
 
 #default-content h4 {
     font-size: 1.2rem;
     margin-top: 1.75rem;
     margin-bottom: 0.75rem;
 }
 
 #default-content h5,
 #default-content h6 {
     font-size: 1rem;
     margin-top: 1.5rem;
     margin-bottom: 0.75rem;
 }
 
 /* Text */
 
 #default-content p {
     margin: 0 0 1.25rem;
 }
 
 #default-content strong {
     font-weight: 600;
 }
 
 #default-content em {
     font-style: italic;
 }
 
 /* Listen */
 
 #default-content ul,
 #default-content ol {
     margin: 0 0 1.5rem;
     padding-left: 1.5rem;
 }
 
 #default-content li {
     margin-bottom: 0.5rem;
 }
 
 #default-content li::marker {
     color: #6b7280;
 }
 
 /* Links */
 
 #default-content a {
     color: #2563eb;
     text-decoration: none;
     transition: opacity 0.2s ease;
 }
 
 #default-content a:hover {
     opacity: 0.75;
 }
 
 #default-content a:focus-visible {
     outline: 2px solid #2563eb;
     outline-offset: 3px;
     border-radius: 4px;
 }
 
 /* Tabellen */
 
 #default-content table {
     width: 100%;
     border-collapse: collapse;
     margin: 2rem 0;
 }
 
 #default-content th,
 #default-content td {
     padding: 12px 16px;
     border: 1px solid #e5e7eb;
     text-align: left;
 }
 
 #default-content th {
     background: #f8fafc;
     font-weight: 600;
 }
 
 /* Zitate */
 
 #default-content blockquote {
     margin: 2rem 0;
     padding: 1rem 1.5rem;
     border-left: 4px solid #2563eb;
     background: #f8fafc;
     border-radius: 0 12px 12px 0;
 }
 
 /* Trennlinie */
 
 #default-content hr {
     border: 0;
     height: 1px;
     background: #e5e7eb;
     margin: 3rem 0;
 }
 
 /* Mobile */
 
 @media (max-width: 768px) {
     #default-content {
	 padding: 40px 24px;
     }
 
     #default-content h1 {
	 margin-bottom: 1.5rem;
     }
 
     #default-content h2 {
	 margin-top: 2.5rem;
     }
 }
 
 
.back-to-site {
     position: fixed;
     top: 20px;
     right: 80px;
     z-index: 9999;
 
     display: flex;
     align-items: center;
     gap: 10px;
 
     background: rgba(255,255,255,.9);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 
     color: #111827;
     text-decoration: none;
     font-weight: 600;
 
     padding: 10px 16px;
     border-radius: 12px;
 
     border: 1px solid rgba(255,255,255,.4);
 
     box-shadow:
	 0 4px 12px rgba(0,0,0,.08),
	 0 12px 32px rgba(0,0,0,.08);
 
     transition: all .2s ease;
 }
 
 .back-to-site:hover {
     transform: translateY(-2px);
     box-shadow:
	 0 8px 20px rgba(0,0,0,.12),
	 0 16px 40px rgba(0,0,0,.12);
 }
 
 .back-to-site svg {
     width: 18px;
     height: 18px;
 }
 
 @media (max-width: 768px) {
     .back-to-site {
	 top: auto;
	 bottom: 20px;
	 right: 12px; /* statt left */
	 padding: 8px 12px;
     }
 
     .back-to-site span {
	 font-size: 14px;
     }
 }
 
 #default-content {
	 padding-bottom: 150px
 }