:root {
	--theme-light: #DAD7E1;
	--theme-dark: #0d0d11; 

	--mnk-beige: #dfd5cd;
	--mnk-orange: #f45b27;
	--mnk-blue: #b5bdf4;

	--card-bg: rgba(255, 255, 255, 0.03);
	--border-subtle: rgba(255, 255, 255, 0.06);

	--current-bg: rgb(218, 215, 225);
}

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

/* CSS Scroll Snapping für den Body */
html { 
  scroll-behavior: smooth; 
  /*scroll-snap-type: y mandatory;*/ 
}

body {
  margin: 0; background-color: var(--theme-dark);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden; color: white; touch-action: manipulation;
}

/* Screen Reader Only (Versteckt Text visuell, bleibt aber für SEO & Screenreader lesbar) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =========================================
    PHASE 1: 3D INTRO (Mit Snap-Points)
    ========================================= */
.space-experience-wrapper { 
  position: relative; height: 200vh; width: 100%; 
}

/* Unsichtbare Haltepunkte für das Snapping */
.snap-marker {
  position: absolute; width: 100%; height: 100vh; 
  scroll-snap-align: start; pointer-events: none;
}

.room-viewport {
  position: sticky; top: 0; width: 100%; height: 100vh;
  -webkit-perspective: 1200px; perspective: 1200px; perspective-origin: 50% 50%;
  overflow: hidden; background-color: var(--theme-light); z-index: 1;
}

.scene-3d-container {
  position: absolute; width: 100%; height: 100%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d; z-index: 1; transform-origin: center center;
  pointer-events: none; 
}

.room-back-wall {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  display: flex; justify-content: center; align-items: center;
  background: transparent; 
  overflow: hidden; transform-style: preserve-3d;
}

#scroll-video { 
  position: relative;
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: 2;
  
  /* Die Maske bleibt für Desktop, um das Video weich auslaufen zu lassen */
  -webkit-mask-image: 
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: 
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
}

.scroll-prompt {
  position: absolute;
  bottom: 40px; 
  left: 50%;
  /* translateZ(50px) holt den Pfeil vor das Video! */
  transform: translateX(-50%) translateZ(50px);
  color: white;
  font-size: 2.5rem;
  opacity: 0; 
  pointer-events: none;
  transition: opacity 1s ease;
  animation: bouncePrompt 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-prompt.visible { opacity: 0.7; }

@keyframes bouncePrompt {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateZ(50px) translateY(0); }
  40% { transform: translateX(-50%) translateZ(50px) translateY(-15px); }
  60% { transform: translateX(-50%) translateZ(50px) translateY(-7px); }
}

.room-viewport::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="2.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.05"/%3E%3C/svg%3E');
  pointer-events: none;
  z-index: 0; 
}

.depth-tint {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--current-bg); 
  pointer-events: none; z-index: 5; opacity: 0;
}

.room-ambience-shadows {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, transparent 5%, rgba(0,0,0,0.85) 100%);
}

/* Banner Design */
.banner {
  position: absolute; 
  /*width: 30vw; */
max-width: 800px; height: auto;
  top: 50%; 
  box-sizing: border-box; border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; overflow: hidden; 
padding-bottom: 20px;
  background: var(--theme-light);
}

.banner::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 4;
}

.banner.bg-beige { background: var(--mnk-beige); color: #111; }
.banner.bg-orange { background: var(--mnk-orange); color: #111; }
.banner.bg-blue { background: var(--mnk-blue); color: #111; }

.banner.pos-left { left: 12%; } 
.banner.pos-right { right: 12%; }

.poster-visual { position: relative; background: #222; margin: 15px 15px 0 15px; border-radius: 8px; overflow: hidden; z-index: 1; height: auto;}
.poster-visual img { width: 100%; height: auto; display: block; max-height: 60vh; object-fit: contain;}
.poster-huge-text { position: absolute; top: 7px; left: 7px; font-size: 6rem; font-weight: 900; color: white; line-height: 0.8; letter-spacing: -2px; z-index: 2; pointer-events: none; }
.banner.bg-orange .poster-huge-text {color: #222222;}

.poster-footer { padding: 12px 15px 15px 15px; height: 70px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; }
.poster-footer h2 { margin: 0; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.poster-footer p { margin: 2px 0 5px 0; font-size: 0.8rem; color: #444; }

.info-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.96); color: #111;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 30px; box-sizing: border-box; transform: translateY(calc(100% + 2px)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 10;
}
.banner:hover .info-overlay, .ref-card:hover .info-overlay { transform: translateY(0); }
.overlay-tag { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: var(--mnk-orange); margin-bottom: 10px; }
.overlay-desc { font-size: 1rem; line-height: 1.5; margin: 0; }

/* =========================================
    PHASE 2: CONTENT BEREICHE
    ========================================= */
section {
  position: relative; z-index: 10; padding: 100px 10%; box-sizing: border-box; 
  border-top: 1px solid var(--border-subtle); background-color: var(--theme-dark);
  scroll-snap-align: none; /* Normale Sektionen snappen nicht */
}
.section-title { font-size: 2.5rem; margin-bottom: 30px; font-weight: 800; }

/* Der Start der normalen Webseite fängt einen letzten Snap ab, danach freies Scrollen */
.about-section { border-top: none; scroll-snap-align: start; }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.about-text p { font-size: 1.15rem; line-height: 1.8; color: #a0a0b0; margin-bottom: 20px; }

.tags { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.tag { background: var(--card-bg); border: 1px solid var(--border-subtle); padding: 8px 16px; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; border-radius: 4px; }

.stats-row { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; 
  border-top: 1px solid var(--border-subtle); padding-top: 30px; margin-top: 30px; 
}
.stat-item h3 { font-size: 2.2rem; margin: 0; color: white; }
.stat-item p { font-size: 0.8rem; color: var(--mnk-beige); margin: 5px 0 0 0; text-transform: uppercase; letter-spacing: 1px; }

/*.profile-image-wrapper { display: flex; justify-content: flex-start; }
.profile-image { 
  width: 75%; aspect-ratio: 4/5; object-fit: cover; 
  border-radius: 12px; border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}*/
.profile-image-wrapper { 
	display: flex; 
	height: auto; 
	width: 100%;
}

.profile-image { 
	height: 100% !important; /* Nimmt 100% der Kastenhöhe ein */
	width: 100%; 
	max-width: 450px; /* Deckelt die Breite auf Tablets */
	object-fit: cover !important;
	object-position: center 70% !important;
	aspect-ratio: auto !important; /* Hebt die alte 4:5 Regel auf */
	border-radius: 12px; 
	border: 1px solid var(--border-subtle);
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* 2. EXPERTISE & SERVICES */
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 20px; }
.service-desc { font-size: 1.1rem; line-height: 1.6; color: #a0a0b0; }

.software-apps { display: flex; gap: 30px; margin: 30px 0 40px 0; align-items: center; }
.app-icon { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; }
.app-icon:hover { transform: translateY(-5px); }
.app-icon img { width: 100%; height: 100%; object-fit: contain; }

.app-icon[title="Illustrator"] img { filter: drop-shadow(0 4px 8px rgba(255, 124, 0, 0.25)); }
.app-icon[title="Photoshop"] img { filter: drop-shadow(0 4px 8px rgba(49, 168, 255, 0.25)); }
.app-icon[title="InDesign"] img { filter: drop-shadow(0 4px 8px rgba(255, 51, 102, 0.25)); }
.app-icon[title="Blender"] img { filter: drop-shadow(0 4px 8px rgba(234, 118, 0, 0.25)); }

/* Container anpassen, um Platz für die verschobenen Ebenen zu machen */
.triple-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: transparent;
    margin-top: 15px; /* Minimaler Abstand für die Stapel-Optik */
}

/* Der Schatten-Trick: Wird auf den Wrapper angewandt, 
  damit er der wandernden Clip-Path-Kante folgt! */
.stack-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    /* Ein doppelter Drop-Shadow: Einer erzeugt eine helle Kante, der andere die Tiefe */
    filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.3)) drop-shadow(10px 0px 20px rgba(0,0,0,0.8));
}

.stack-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

/* Physische Verschiebung für den "Stapel-Look" */
.layer-1 { transform: translate(16px, 0px); z-index: 1; }
.layer-2 { transform: translate(8px, 0px); z-index: 2; }
.layer-3 { transform: translate(0px, 0px); z-index: 3; }

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

/* Styling der neuen Titel-Labels */
.layer-title {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: rgba(13, 13, 17, 0.95);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-left: 3px solid white;
}

.title-orange { border-color: var(--mnk-orange); }
.title-blue { border-color: var(--mnk-blue); }
.title-beige { border-color: var(--mnk-beige); color: #111; background: rgba(255,255,255,0.9); }

/* --- DIE ZEIT-BASIERTE ANIMATION --- */

#layer-sketch {
    animation: wipe-top 12s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

#layer-wireframe {
    animation: wipe-mid 12s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

/* 12 Sekunden Gesamtdauer */
@keyframes wipe-top {
    0%, 25%  { clip-path: inset(0 0 0 0); }          /* Skizze voll sichtbar */
    35%, 90% { clip-path: inset(0 100% 0 0); }       /* Wischt sanft nach links weg */
    95%, 100%{ clip-path: inset(0 0 0 0); }          /* Wischt am Ende schnell wieder auf */
}

@keyframes wipe-mid {
    0%, 55%  { clip-path: inset(0 0 0 0); }          /* Wireframe voll sichtbar (unter Skizze) */
    65%, 90% { clip-path: inset(0 100% 0 0); }       /* Wischt sanft nach links weg */
    95%, 100%{ clip-path: inset(0 0 0 0); }          /* Wischt am Ende schnell wieder auf */
}

/* 3. REFERENCES */
/* Der Wrapper hält die Pfeile an Ort und Stelle */
.work-slider-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Das magische CSS-Grid */
.work-track {
  display: grid;
  grid-template-rows: repeat(2, 1fr); /* Erzwingt exakt 2 Reihen */
  grid-auto-flow: column; /* Neue Karten fließen nach rechts weiter, nicht nach unten */
  
  /* calc(50% - 15px) sorgt dafür, dass immer genau 2 Spalten im sichtbaren Bereich sind */
  grid-auto-columns: calc(50% - 15px); 
  gap: 30px; /* Der Abstand zwischen den Karten */
  
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Rastet sanft bei den Karten ein */
  scroll-behavior: smooth;
  width: 100%;
  padding: 10px 0;
}

/* Versteckt den unschönen Browser-Scrollbar, Funktion bleibt erhalten */
.work-track::-webkit-scrollbar { display: none; }
.work-track { scrollbar-width: none; }

.work-track .ref-card {
  scroll-snap-align: start; /* Sorgt dafür, dass die Karte bündig einrastet */
}

/* Styling der neuen Navigations-Pfeile */
.work-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--mnk-orange, #f45b27); /* Deine Akzentfarbe */
  border: none;
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  opacity: 0; /* Standardmäßig unsichtbar */
  pointer-events: none; /* Nicht klickbar, wenn unsichtbar */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.work-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}

.work-arrow:hover {
  background: white;
  color: var(--mnk-orange, #f45b27);
}

/* Positionierung der Pfeile (etwas nach außen gerückt) */
.work-arrow-left { left: -4vw; }
.work-arrow-right { right: -4vw; }    
.ref-card { position: relative; display: block; cursor: pointer;}

.card-main {
  position: relative;
  z-index: 2;
  background: #16161a;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* WICHTIG: Hover-Effekt nutzt jetzt die korrekte Klasse .ref-card */
.ref-card:hover .card-main {
    background-color: #1f1f27;
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.slider-container {
  position: relative;
  width: 100%;
  max-height: 50vh;
  aspect-ratio: 4/5; 
  background: #0d0d11;
  overflow: hidden;
}

.slider-track {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden !important; /* Schneidet die unsichtbaren Überstände ab */
}

.slider-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

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

/* --- VIMEO & IFRAME FRAMING --- */
iframe.slider-media,
#lightbox-vimeo {
    pointer-events: none !important; 
}

/* 1. Slider (Card Ansicht): Video formatfüllend einpassen (Cover-Effekt) */
iframe.slider-media {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 300% !important;
    transform: translate(-50%, -50%) !important; /* Zentriert es perfekt */
    pointer-events: none !important;
    max-width: none !important;
}

/* 2. Detailansicht (Lightbox): Video im perfekten 16:9 Verhältnis komplett anzeigen (Contain-Effekt) */
#lightbox-vimeo {
    width: auto;
    max-width: 100%;
    display: none; 
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 13, 17, 0.7);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
  z-index: 5;
  pointer-events: none;
}

.arrow-left { left: 15px; }
.arrow-right { right: 15px; }

.slider-container:hover .nav-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #0d0d11;
}

.pagination-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s;
}

.slider-container:hover .pagination-dots {
  opacity: 1;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

.dot.active {
  width: 24px; 
  background: #ffffff;
}

.card-footer {
  padding: 20px;
  background: #16161a;
}

/* WICHTIG: Die ref-info wird komplett unsichtbar gemacht, 
    damit sie nicht mehr rausslidet, sondern nur für JS existiert */
.ref-info {
  display: none;
}

/* --- LIGHTBOX MODAL --- */
.global-lightbox {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0d0d11; /* Eleganter, tiefer Dark-Theme Background */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

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

/* Scrollbarer Bereich INNERHALB der Lightbox */
.lightbox-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 80px 20px;
}

.lightbox-header {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: flex-end;
    z-index: 1001;
    pointer-events: none; /* Klicks durchlassen außer auf den Button */
}

.lightbox-close {
    background: transparent; color: #fff; border: none;
    font-size: 3.5rem; line-height: 1; cursor: pointer; pointer-events: auto;
    transition: color 0.2s;
}
.lightbox-close:hover { color: #ff0055; }

.lightbox-content {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin-top: 20px;
}

.lightbox-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

#lightbox-img {
    max-width: 100%;
    max-height: 80vh; /* Verhindert, dass das Bild initial zu riesig wird */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.lightbox-arrow {
    background: transparent; color: #fff; border: none;
    font-size: 3rem; cursor: pointer; padding: 20px;
    transition: transform 0.2s, opacity 0.2s;
}
.lightbox-arrow:hover { transform: scale(1.1); }

.lightbox-caption {
    margin-top: 40px;
    max-width: 800px;
    text-align: center;
}

.lightbox-caption h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.lightbox-caption p {
    color: #a0a0ab;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- KINO-MODUS (Theater View) --- */
/* 1. Wir zentrieren den gesamten Bereich und entfernen das Padding */
#lightbox.maximized-view .lightbox-scroll-area {
    padding: 0;
    justify-content: center;
}

#lightbox.maximized-view .lightbox-content {
    width: 100%;
    max-width: 100vw;
    margin-top: 0;
}

/* 2. DER FIX: Die Höhe auf 'auto' schrumpft den Kasten exakt auf die Bildgröße! */
#lightbox.maximized-view .lightbox-image-wrapper {
    height: auto; 
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Hält die Punkte sicher am unteren Bildrand fest */
}

#lightbox.maximized-view #lightbox-img,
#lightbox.maximized-view #lightbox-video,
#lightbox.maximized-view #lightbox-vimeo { 
    height: 100vh;
    width: auto;
	max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
}

/* 3. Ein kleines optisches Upgrade für die Punkte, damit sie auf hellen Bildern lesbar bleiben */
#lightbox-dots {
	opacity: 1;
    bottom: 20px;
}

/* Blendet den Beschreibungstext unten aus, um volle Konzentration aufs Bild zu legen */
#lightbox.maximized-view .lightbox-caption {
    display: none;
}

/* 4. TESTIMONIALS */
.testimonials-section { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; }
.quotes-wrapper { width: 100%; position: relative; margin-top: 20px; }
.quotes-row { display: flex; gap: 30px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.quotes-row::-webkit-scrollbar { display: none; } 

/* Quote Card als Flex-Container für sauberes Layout */
.quote-card { 
  scroll-snap-align: center; flex: 0 0 350px; background: var(--card-bg); 
  padding: 40px; border: 1px solid var(--border-subtle); border-radius: 12px; box-sizing: border-box; 
  display: flex; flex-direction: column; justify-content: space-between; min-height: 280px;
}

/* Fixiert die Höhe des Textbereichs und erlaubt internes Scrollen */
.quote-content {
  max-height: 160px; /* Entspricht ca. 5 Zeilen bei deiner Schriftgröße */
  overflow-y: auto;
  padding-right: 15px; /* Verhindert, dass der Text am Scrollbar klebt */
  margin-bottom: 10px; /* Abstand zum Footer */
  
  /* Optische Finesse: Sanfter Verlauf unten, damit klar ist, dass Text folgt */
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

/* Eigenes, dezentes Scrollbar-Design für den Text 
  (Überschreibt den hässlichen Standard-Scrollbar des Browsers)
*/
.quote-content::-webkit-scrollbar {
  width: 2px; /* Sehr schmal und elegant */
}
.quote-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02); /* Fast unsichtbar */
  border-radius: 4px;
}
.quote-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15); /* Subtiles Grau */
  border-radius: 4px;
}
.quote-content::-webkit-scrollbar-thumb:hover {
  background: var(--mnk-orange); /* Interaktives Feedback in deiner Akzentfarbe */
}

.quote-content p { font-style: italic; color: #ccc; line-height: 1.6; margin-top: 0; font-size: 1.1rem; }

/* Footer-Bereich mit Autor und Button */
.quote-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0px; }
.quote-author h5 { margin: 0; color: white; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.quote-author span { color: var(--mnk-blue); font-size: 0.8rem; }

/* Der dezente Übersetzungs-Button */
.lang-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #888;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.lang-toggle-btn:hover {
  background: rgba(255,255,255,0.05);
  color: white;
  border-color: rgba(255,255,255,0.3);
}

/* Zustand, wenn Originalsprache aktiv ist */
.lang-toggle-btn.is-original {
  color: var(--mnk-orange);
  border-color: rgba(244, 91, 39, 0.3);
}

/* 5. CONTACT & FOOTER */
.contact-section { transition: color 0.3s; padding-bottom: 0; }
.contact-section.light-mode-active { color: var(--theme-dark); }
.contact-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; margin-top: 40px; }
@media(max-width: 768px) { .contact-container { grid-template-columns: 1fr; } }

.contact-info { font-size: 1rem; line-height: 1.8; opacity: 0.8; }
.contact-info p { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.contact-info i { font-size: 1.3rem; color: var(--mnk-orange); }

.form-group-label { font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; }
.form-row { display: flex; gap: 30px; margin-bottom: 25px; }
.form-group { flex: 1; display: flex; flex-direction: column; }
.form-group label { font-size: 0.85rem; margin-bottom: 5px; opacity: 0.6; font-weight: bold; }

.contact-form input, .contact-form textarea {
  width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid var(--border-subtle);
  background: transparent; color: inherit; font-family: inherit; font-size: 1rem; transition: border-color 0.3s; box-sizing: border-box; resize: none;
}

.gdpr-group { margin-bottom: 30px; }
.custom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  opacity: 0.8;
  cursor: pointer;
  line-height: 1.4;
}
.custom-checkbox-label input { display: none; /* Versteckt den hässlichen Standard-Kasten */ }

.checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.custom-checkbox-label:hover .checkmark { border-color: rgba(255,255,255,0.3); }

.custom-checkbox-label input:checked + .checkmark {
  background: var(--mnk-orange);
  border-color: var(--mnk-orange);
}

.custom-checkbox-label input:checked + .checkmark::after {
  content: ''; position: absolute;
  left: 6px; top: 2px;
  width: 4px; height: 9px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox-label a { color: var(--mnk-orange); text-decoration: none; }
.custom-checkbox-label a:hover { text-decoration: underline; }

.light-mode-active .checkmark {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

.light-mode-active .custom-checkbox-label:hover .checkmark {
  border-color: rgba(0, 0, 0, 0.5);
}

.light-mode-active .custom-checkbox-label input:checked + .checkmark {
  background: var(--mnk-orange);
  border-color: var(--mnk-orange);
}

.light-mode-active .contact-form input, .light-mode-active .contact-form textarea { border-bottom: 1px solid rgba(0,0,0,0.2); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--mnk-orange); }

.submit-btn { align-self: flex-start; padding: 15px 35px; background: white; color: var(--theme-dark); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: transform 0.2s, background 0.3s; margin-top: 15px; }
.light-mode-active .submit-btn { background: var(--theme-dark); color: white; }
.submit-btn:hover { transform: translateY(-3px); }

.site-footer { width: 100%; padding: 40px 0; margin-top: 100px; box-sizing: border-box; border-top: 1px solid rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; gap: 15px; }
.footer-links { display: flex; gap: 30px; }
.footer-links a { color: inherit; text-decoration: none; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.footer-copy { font-size: 0.8rem; opacity: 0.7; }

/* =========================================
   RESPONSIVES DESIGN & TOUCH-OPTIMIERUNG
   ========================================= */

/* --- TABLET (Bildschirme unter 1024px) --- */
@media (max-width: 1024px) {
    /* 1. Globale Abstände reduzieren */
    section { padding: 80px 5%; }
    
    /* 2. Die 3D-Banner rücken in die Mitte */
    .banner.pos-left { left: 5%; }
    .banner.pos-right { right: 5%; }
    .banner { width: 60vw; }

    /* 3. Grids etwas kompakter machen */
    .about-grid, .expertise-grid { gap: 40px; }
	
	.work-track {
        grid-template-rows: 1fr;
        grid-auto-columns: 45vw;
    }
}

/* --- SMARTPHONE (Bildschirme unter 768px) --- */
@media (max-width: 768px) {
    
    /* Video: Zoom 
    #scroll-video {
        object-fit: cover; 
        transform: scale(1); 
        -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%);
        mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%);
    }*/
	
	/* Video: Zoom & iOS Safari Bugfix */
    #scroll-video {
        object-fit: cover; 
        transform: scale(1); 
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* --- 1. BANNER, OVERLAYS & 3D-SCROLL (Weiches Wischen) --- */
    
    /* Zieht das 3D-Erlebnis auf Handys in die Länge -> viel ruhigeres Scrollen! */
    .space-experience-wrapper { height: 400vh; }

    .banner {
        width: 90vw !important; /* Noch einen Tick breiter */
        left: 5vw !important; right: auto !important; margin: 0 !important;
        height: 60vh !important; /* Feste Höhe, verhindert Stauchen */
        justify-content: space-between; /* Verteilt Bild und Text perfekt */
    }
    
    .poster-visual { 
        max-height: 85%; /* Bild darf nicht den Text verdrängen */
        margin-bottom: 10px;
    }
    
    .poster-huge-text { font-size: 3.5rem; top: 10px; left: 10px; } 
    .poster-footer h2 { font-size: 1rem; }
    
    /* Overlay auf dem Handy */
    .info-overlay { 
        transform: translateY(100%) !important; 
        padding: 20px 15px !important;
        overflow-y: auto; /* Erlaubt Scrollen innerhalb der Details, falls nötig */
    }
    .banner.mobile-active .info-overlay { transform: translateY(0) !important; }

	/* --- 2. & 3. REIHENFOLGE (About & Expertise) --- */
    .about-grid { 
		display: grid;  
		gap: 40px; 
		grid-template-columns: none;
		align-items: stretch !important; /* Zwingt Bild und Text auf exakt gleiche Höhe */
	}

	.profile-image-wrapper { 
		display: flex; 
		height: auto; 
		width: 100%;
	}

	.profile-image { 
		height: 100% !important; /* Nimmt 100% der Kastenhöhe ein */
		width: 100%;
		max-width: 450px; /* Deckelt die Breite auf Tablets */
		object-fit: cover !important; 
		aspect-ratio: 4/3 !important; /* Hebt die alte 4:5 Regel auf */
		border-radius: 12px; 
		border: 1px solid var(--border-subtle);
		box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	}

    /* Expertise: Slider bleibt unter dem Text */
    .expertise-grid { display: flex; flex-direction: column-reverse; align-items: center; gap: 30px; }
    
    .triple-slider-container { 
        width: 90%; 
        margin: 0 auto; 
        /* DIE LÖSUNG: Wir schieben den Container um exakt die Hälfte des 3D-Versatzes (8px) 
           nach links. Dadurch sitzt der Stapel optisch 100% in der Mitte! */
        transform: translateX(-8px); 
    }

	/* --- 4. & 5. SELECTED WORK (Full-Bleed Wisch-Slider) --- */
    .work-slider-wrapper { display: block; }
    .work-arrow { display: none !important; }
    
    .work-track {
        /* DIE LÖSUNG: Bricht aus dem Section-Padding aus und geht bis zum Bildschirmrand */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 85vw; /* Wir nutzen jetzt vw (Viewport Width) statt % */
        grid-template-rows: auto; 
        gap: 15px; 
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        
        /* Das innere Padding rückt die Karten optisch wieder unter den Titel */
        padding: 10px 7.5vw 20px 7.5vw; 
        scroll-padding: 0; 
    }
    
    .work-track .ref-card { 
        scroll-snap-align: center; 
    }
    
    .nav-arrow { display: none !important; } 
    .pagination-dots { opacity: 1 !important; bottom: 15px; } 

    /* --- 6. TESTIMONIALS (Full-Bleed Wisch-Slider) --- */
    .quotes-row {
        /* Gleicher Ausbruch bis zum Rand wie bei Selected Work */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        
        padding: 10px 7.5vw 20px 7.5vw; 
        scroll-padding: 0;
        gap: 15px;
    }
    
    .quote-card {
        flex: 0 0 85vw; 
        scroll-snap-align: center; 
        min-height: 250px;
    }

    /* Typografie */
    .section-title { font-size: 2rem; }
    .stats-row { gap: 10px; }
    .stat-item h3 { font-size: 1.8rem; }
    
    /* --- LIGHTBOX (Detailansicht) MOBILE UI --- */
    .lightbox-header { 
        padding: 10px 15px; /* Holt das X sicher in den sichtbaren Bereich */
    }
    .lightbox-close { 
        font-size: 2.5rem; 
    }
	
	.lightbox-content {
		width: 100%;
	}
    
    /* Pfeile WIEDER EINBLENDEN, aber kleiner und touch-freundlich als Button */
    .lightbox-arrow { 
        display: block !important; 
        font-size: 1.5rem;
        padding: 1%;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        margin: 0;
        backdrop-filter: blur(5px);
    }
	
	/* --- MOBILE UI AUFRÄUMEN (Pfeile ausblenden) --- */
    .lightbox-arrow, 
    .nav-arrow { 
        display: none !important; 
    }

    /* --- PERFEKTE ZENTRIERUNG FÜR DIE LIGHTBOX --- */
    .lightbox-content {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .lightbox-image-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }

    /* --- VIMEO VIDEO FRAMING (Card Ansicht) --- */
    iframe.slider-media {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%, -50%) !important;
	}

    /* --- SUBTILE SWIPE-ANIMATION (Hint) --- */
    .swipe-hint {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        background: rgba(0, 0, 0, 0.65);
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 0.95rem;
        pointer-events: none;
        z-index: 1060;
        backdrop-filter: blur(5px);
        
        /* Die Animation läuft 3 Sekunden lang */
        animation: swipeFade 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes swipeFade {
        0%   { opacity: 0; transform: translateX(-50%); }
        15%  { opacity: 1; transform: translateX(-65%); } /* Wisch nach links */
        30%  { opacity: 1; transform: translateX(-35%); } /* Wisch nach rechts */
        45%  { opacity: 1; transform: translateX(-50%); } /* Zurück zur Mitte */
        80%  { opacity: 1; }
        100% { opacity: 0; visibility: hidden; }
    }
}

/* =========================================
   MOBILE QUERFORMAT (Landscape-Modus)
   ========================================= */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    
    .space-experience-wrapper { height: 350vh; }
    
    /* Banner: Bild links (groß), Text rechts (kompakt) */
    .banner {
        width: 85vw !important;
        height: 75vh !important; 
        left: 7.5vw !important;
        flex-direction: row !important; 
        padding: 0 !important; /* Kein Padding, damit das Bild die Kante berührt */
    }
    
    .poster-visual { 
        width: 60% !important; 
        height: 100% !important; 
        margin: 0 !important; 
        border-radius: 16px 0 0 16px !important; /* Nur links abrunden */
    }
    
    .poster-visual img {
		max-height: 100% ;
        height: 100% !important; 
        object-fit: cover !important; 
    }
    
    .poster-footer {
        width: 40% !important;
        padding: 20px !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .poster-huge-text { font-size: 2.5rem !important; top: 15px !important; left: 15px !important; }
    
    /* UI-Elemente aufräumen */
    .work-slider-wrapper { display: block; }
    .work-arrow, .nav-arrow, .lightbox-arrow { display: none !important; }
    
    /* Slider anpassen (Selected Work & Testimonials) */
    .work-track, .quotes-row {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 10px 5vw 20px 5vw !important; 
        grid-auto-flow: column !important; 
        gap: 15px !important; 
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory !important;
        grid-template-rows: 1fr !important;
    }
    
    /* Selected Work: 1 Projekt zentriert */
    .work-track { grid-auto-columns: 60vw !important; }
    
    /* Testimonials: 2 Karten passen ins Landscape-Format */
    .quote-card { flex: 0 0 45vw !important; }
    
    section { padding: 40px 5% !important; }
    .section-title { margin-bottom: 15px !important; font-size: 1.8rem !important; }
    
    .lightbox-content { width: 100% !important; justify-content: center !important; margin-top: 0 !important; }
    #lightbox-vimeo, #lightbox-img { max-height: 85vh !important; }
    .lightbox-pagination-dots { top: 10px !important; }
    
    .about-grid { flex-direction: row !important; align-items: center; }
}