/* =========================================
   Globale Design-Variablen
   - Farben, Abstände, Animation-Speed etc.
   ========================================= */
:root{
  /* Video-Slider / Layout */
  --strip-height: 250px;
  --strip-gap: 12px;
  --speed-px-per-sec: 200;

  --page-padding-x: 3rem;
  --scrollcue-gap: 14px;

  /* Design-Tokens (für einfachere Anpassung) */
  --color-bg-body: #111313;
  --color-bg-dark: #000;
  --color-text-dark: #111;
  --color-text-light: #fff;

  --radius-lg: 14px;
  --shadow-elevated: 0 18px 40px rgba(0,0,0,.6);
  --border-glass: rgba(255,255,255,0.15);
}

/* =========================================
   Reset / Grundlayout
   ========================================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text-dark);
  background: var(--color-bg-body);
  overflow-x:hidden;
}

/* Screenreader-only Text (für z. B. PNG-Buttons) */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================
   HERO / HEADER
   - Zweispaltiges Layout mit Text links, Portrait rechts
   ========================================= */
.header{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: flex-start;
  min-height: 100vh;
}
.menu-left,
.menu-right{
  min-width:0;
}

.menu-left{
  padding:10rem var(--page-padding-x);
  z-index:2;
}

/* Typewriter-Text im Hero */
.hero-text{
  color: var(--color-text-light);
  max-width:600px;
  font-size:1.7rem;
  line-height:1.7;
  font-weight:600;
  letter-spacing:.3px;
}

/* Cursor-Strich rechts vom Text */
.hero-text::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1.1em;
  margin-left:4px;
  background:#fff;
  vertical-align:bottom;
  animation: hero-caret-blink .8s steps(2, start) infinite;
}

@keyframes hero-caret-blink{
  0%, 50%   { opacity:1; }
  50.01%,100% { opacity:0; }
}

/* nach Schreibende + 2s: Cursor ausblenden */
.hero-text.caret-hide::after{
  animation:none;
  opacity:0;
  transition:opacity .4s ease;
}

/* Bild rechts */
.menu-right{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  position:relative;
}
.menu-right img{
  max-width:90%;
  height:auto;
  max-height:100vh;
  object-fit:cover;
  padding-top:2rem;
}

/* Klickbare PNG-Schriftzüge auf dem Portrait */
.label-links{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.label-links .label{
  position:absolute;
  display:block;
  pointer-events:auto;
}
.label-links .label img{
  display:block;
  height:auto;
  width:100%;
}

/* Beispiel-Positionen für die Labels */
.label.projects { right: 15%; top: 15%; width: 210px; }
.label.about    { right: 12%; top: 22%; width: 210px; }
.label.contact  { right:  7%; top: 29%; width: 210px; }

/* =========================================
   Scroll-Hinweis im Hero
   ========================================= */
.scroll-cue{
  position:absolute;
  left:var(--page-padding-x);
  bottom: calc(10vh + var(--strip-height) + 20px);
  display:flex;
  align-items:center;
  gap:var(--scrollcue-gap);
  color:var(--color-text-light);
  z-index:4;
  pointer-events:none;
}
.cue-text{
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.8;
}
.cue-line{
  position:relative;
  width:2px;
  height:46px;
  background:rgba(255,255,255,0.35);
  overflow:hidden;
  border-radius:2px;
}
.cue-line::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-100%;
  height:100%;
  background:#fff;
  animation:cue-drop 1.4s ease-in-out infinite;
  box-shadow:0 0 8px rgba(0,0,0,.15);
}
@keyframes cue-drop{
  0%{top:-100%;opacity:0}
  15%{opacity:1}
  100%{top:100%;opacity:0}
}

/* =========================================
   Waagrechter Video-Slider im Hero
   ========================================= */
.horizontal-slider{
  position:absolute;
  left:0;
  right:0;
  bottom:10vh;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
}
.slider-track{
  display:flex;
  align-items:center;
  gap:var(--strip-gap);
  will-change:transform;
}
.slide{
  flex:0 0 auto;
  height:var(--strip-height);
  width:calc(var(--strip-height)*16/9);
  border-radius:10px;
  overflow:hidden;
  background:#f2f2f2;
}
.slide img,
.slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio: 16/9;
}

/* Beim Scrollen Slider & Cue leicht ausblenden */
.horizontal-slider,
.scroll-cue{
  transition: opacity .35s ease, transform .35s ease;
}
body.scrolled .horizontal-slider,
body.scrolled .scroll-cue{
  opacity:0;
  transform:translateY(24px);
  pointer-events:none;
}

/* =========================================
   Schwarzer Bereich mit Sticky-Video-Bannern
   ========================================= */
.scroll-overlay.video-banner{
  position: relative;
  z-index: 10;
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  height: 140vh;
  margin-top: 0;
}
.scroll-overlay.video-banner:first-of-type{
  margin-top: -1px;
}

/* Sticky-Banner innerhalb der Sektion */
.scroll-overlay.video-banner .banner{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 4rem var(--page-padding-x);
}

/* Hintergrundvideo (unscharf + Glas-Look) */
.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: blur(18px) brightness(0.7) saturate(120%);
  transform: scale(1.08);
  z-index: 0;
}
.scroll-overlay.video-banner .banner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  z-index: 1;
}

/* Vordergrund-Video-Frame – Skalierung via JS */
.video-frame{
  --vf-scale: 0.78;
  width: min(1200px, 86vw);
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: #111;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  z-index: 2;
  transform: scale(var(--vf-scale));
  transform-origin: center center;
}
.video-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Hinweis-Badge im Video */
.autoplay-note{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  color: var(--color-text-light);
  padding: .5rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  font-size: .9rem;
  backdrop-filter: blur(6px);
  z-index: 3;
}

/* Project-Infos (Glas-Box) – Standard (dunkel) */
.banner-meta{
  width: min(1200px, 86vw);
  margin-top: 1.2rem;
  color: var(--color-text-light);
  z-index: 2;
}
.glass{
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(8px);
}
.project-name{
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: .35rem;
}
.subtitle{
  font-size: 1.05rem;
  opacity: .9;
  margin-bottom: 1.1rem;
}

.details{
  display:flex;
  flex-wrap:wrap;
  gap: 2.5rem 3rem;
}
.details h4{
  font-weight:600;
  margin-bottom:.3rem;
  color:var(--color-text-light);
}
.details p{
  font-size:1rem;
  color:#e0e0e0;
}

/* Ton-Schalter ausblenden (wenn nicht genutzt) */
.sound-btn{
  display:none !important;
}

/* Mobile Video-Frames */
@media (max-width: 900px){
.video-frame{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}
  .project-name{
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
}

/* =========================================
   Layout für "Ein Leben für Gastronomie"
   - Zweispaltig: links Arbeitsreflexion, rechts Video
   ========================================= */
.gastro-layout{
  position: relative;
  z-index: 2;
  width: min(1400px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr); /* rechte Spalte grösser */
  justify-items: stretch;
  gap: 3rem;
  align-items: center;
}

/* Rechte Spalte: Video + Meta in einer Spalte */
.gastro-video-column{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start; /* Video + Text linksbündig */
}

/* Video-Breite im Gastro-Block */
#project-gastro .video-frame{
  width: min(900px, 75vw);
  max-width: 900px;
}

/* Meta-Box passend zum Video */
#project-gastro .gastro-meta{
  max-width: 900px;
  margin: 0;
}

/* LINKE SPALTE: Arbeitsreflexion als Booklet */
.reflection-wrapper{
  color:var(--color-text-light);
  max-width: 520px;
  justify-self: flex-start;
}

.reflection-title{
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.reflection-sub{
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 1.1rem;
}

.reflection-viewer{
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reflection-page{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pfeile links / rechts */
.reflection-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: .4rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.5);
  color:var(--color-text-light);
  font-size: 1.4rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
  z-index: 3;
}

.reflection-nav:hover{
  background: rgba(255,255,255,0.2);
  transform: translateY(-50%) scale(1.05);
}

.reflection-nav:disabled{
  opacity: .3;
  cursor: default;
}

.reflection-nav.prev{ left: 8px; }
.reflection-nav.next{ right: 8px; }

.reflection-page-indicator{
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.5rem;
}

/* Mobile: Gastro-Layout untereinander */
@media (max-width: 900px){
  .gastro-layout{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gastro-video-column{
    order: 2;     /* Video unter der Reflexion */
  }
  .reflection-wrapper{
    order: 1;
    max-width: 100%;
  }
  #project-gastro .video-frame{
    width: 92vw;
  }
}

/* =========================================
   Weißer Booklet-Bereich "DESIGN & ART"
   ========================================= */
.white-banner{
  background:#fff;
  color:#111;
  padding: 6rem var(--page-padding-x) 6rem;
}
.white-wrap{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6rem;
  align-items: start;
}

/* Booklet-Block links */
.booklet{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: .75rem;
  margin-top: 8vh;
}

/* Booklet-Doppelseiten */
.book-viewer{
  position: relative;
  width: min(1350px, 100%);
  margin: 4vh auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-pages{
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f9f5ee;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  perspective: 1600px;
  transform-style: preserve-3d;
}
.book-page{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  backface-visibility: hidden;
}
.book-page.left{
  transform-origin: right center;
}
.book-page.right{
  transform-origin: left center;
}

/* Page-Turn-Animationen */
.page-turn-next-out{
  animation: pageTurnNextOut .35s ease forwards;
}
.page-turn-next-in{
  animation: pageTurnNextIn .35s ease forwards;
}
.page-turn-prev-out{
  animation: pageTurnPrevOut .35s ease forwards;
}
.page-turn-prev-in{
  animation: pageTurnPrevIn .35s ease forwards;
}
@keyframes pageTurnNextOut{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-150deg); }
}
@keyframes pageTurnNextIn{
  0%   { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes pageTurnPrevOut{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(150deg); }
}
@keyframes pageTurnPrevIn{
  0%   { transform: rotateY(-90deg); }
  100% { transform: rotateY(0deg); }
}

/* Rechte Spalte: Text zum Booklet */
.booklet-meta{
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
}
.booklet-meta--center{
  place-self: center;
  align-items: center;
  text-align: center;
}
.booklet-title{
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:1.05;
  font-weight:800;
  margin: 0;
}
.booklet-sub{
  font-size: 1.06rem;
  color:#6b6b6b;
  margin-bottom: 1.2rem;
}
.booklet-details{
  display:flex;
  gap: 3.2rem;
}
.booklet-details h4{
  font-weight:700;
  margin-bottom:.35rem;
  color:#111;
}
.booklet-details p{
  color:#222;
}

/* Responsives Booklet-Layout */
@media (max-width: 1100px){
  .white-wrap{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .booklet{
    margin-top: 0;
  }
  .book-viewer{
    width: 100%;
  }
  .book-pages{
    grid-template-columns: 1fr;
  }
  .booklet-meta--center{
    place-self: start;
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================================
   Spezial-Styling: "A Day in the Life" Meta-Box
   (helles Glas auf dunklem Hintergrund)
   ========================================= */
#project-daylife .banner-meta{
  color: #111;
}
#project-daylife .banner-meta.glass{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}
#project-daylife .project-name{
  color: #111;
}
#project-daylife .subtitle{
  color: #555;
  opacity: 0.95;
}
#project-daylife .details h4{
  color: #111;
}
#project-daylife .details p{
  color: #333;
}

/* =========================================
   Video-Progressbar mit Auto-Hide
   ========================================= */
.video-progress {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 8px;
  padding: 6px 0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 5;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
}
.video-progress::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.25);
}
.video-progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: #fff;
  transition: width .1s linear;
}
.video-frame.show-ui .video-progress {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   Schwarze Divider-Banner ("VIDEOPROJECTS", "DESIGN & ART", "WHY ME?")
   ========================================= */
.video-title-banner {
  background: #000;
  color: #fff;
  padding: 4rem 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  z-index: 20;
  border-top: 1px solid rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.85);
}
.video-title-banner h2{
  margin: 0;
  font-size:clamp(2.4rem,6vw,4rem);
  letter-spacing:0.25em;
  text-transform:uppercase;
  font-weight:600;
}

/* leichte Glättung gegen Linien/Flicker bei Videos */
.scroll-overlay.video-banner,
.scroll-overlay.video-banner .banner,
.scroll-overlay.video-banner .video-frame,
.scroll-overlay.video-banner video,
.scroll-overlay.video-banner::before {
  background: #000;
}
.scroll-overlay.video-banner,
.scroll-overlay.video-banner .banner {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.video-frame video {
  width: 100.02%;
  height: 100.02%;
  object-fit: cover;
}

/* =========================================
   WHY ME – Vollbild, rechtsbündig, Ladebalken + Hover-Preview
   ========================================= */

.whyme-section{
  background:#000;
  color:#fff;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding: 6rem 0 6rem;
  position: relative;
}

.whyme-label{
  position: absolute;
  top: 4.5rem;
  left: var(--page-padding-x);
  font-size: 1.8rem;
  color: #fff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  pointer-events: none;
}

.whyme-wrap{
  width: min(1500px, 100vw);
  margin-left:auto;
  margin-right:var(--page-padding-x);
  margin-top: 1.5rem;
}

.whyme-item{
  display:block;
  position:relative;
  color:inherit;
  text-decoration:none;
}

.whyme-item + .whyme-item{
  margin-top: 4.8rem;
}

/* Ladebalken */
.whyme-item::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  opacity:0;
  transition:transform 1s cubic-bezier(0.19,1,0.22,1), opacity .5s ease;
  pointer-events:none;
  z-index:0;
}

.whyme-item:hover::before,
.whyme-item:focus-visible::before{
  transform:scaleX(1);
  opacity:1;
}

/* Pfeil */
.whyme-item::after{
  content:"➜";
  position:absolute;
  right:1.8rem;
  top:50%;
  transform:translateY(-50%) translateX(6px);
  opacity:0;
  font-size:1.6rem;
  color:#000;
  pointer-events:none;
  z-index:2;
  transition:opacity .35s ease, transform .35s ease;
}

.whyme-item:hover::after,
.whyme-item:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* Grid-Content */
.whyme-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,2.8fr);
  gap:3rem;
  padding:1.3rem 2rem;
  transition:color .6s ease;
}

.whyme-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.whyme-year{
  font-size:1.95rem;
  opacity:.9;
  letter-spacing:.2em;
  transition:opacity .3s ease, transform .3s ease;
}

.whyme-right{
  display:flex;
  align-items:center;
}

.whyme-title{
  font-size:clamp(5.8rem,5.6vw,4.2rem);
  font-weight:600;
  transition:color .6s ease;
}

/* Detailtext */
.whyme-detail{
  display:flex;
  gap:1.4rem;
  font-size:1.3rem;
  max-height:0;
  opacity:0;
  transform:translateY(6px);
  overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, transform .35s ease;
  margin-top:.5rem;
}

.whyme-detail p{ margin:0; }
.whyme-detail img{ display:none; }

/* Preview-Bild */
.whyme-preview{
  position:absolute;
  width:700px;
  height:400px;
  background-size:cover;
  background-position:center;
  border-radius:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .25s ease, transform .08s ease;
  z-index:3;
}

/* Hover-Effekte */
.whyme-item:hover .whyme-inner{
  color:#000;
}
.whyme-item:hover .whyme-title{
  color:#000;
}
.whyme-item:hover .whyme-year{
  opacity:0;
  transform:translateY(-6px);
}
.whyme-item:hover .whyme-detail{
  max-height:280px;
  opacity:1;
  transform:translateY(0);
}

/* ============================
   WHY ME Mobile (<900px)
   ============================ */
@media (max-width:900px){
  .whyme-section{
    padding:3.5rem 0 4rem;
  }
  .whyme-wrap{
    width:100%;
    margin-left:var(--page-padding-x);
    margin-right:var(--page-padding-x);
  }
  .whyme-inner{
    grid-template-columns:1fr;
    gap:1.2rem;
    padding-inline:1.4rem;
  }
  .whyme-preview{
    display:none !important;
  }
  .whyme-item::before,
  .whyme-item::after{
    display:none !important;
  }
  .whyme-detail{
    max-height:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .whyme-year{
    opacity:1 !important;
    transform:none !important;
  }
  .whyme-item:hover .whyme-inner,
  .whyme-item:hover .whyme-title{
    color:inherit !important;
  }
}

/* =========================================
   Intro-Splash / Preloader mit Logo & Text
   ========================================= */
.intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgb(13, 13, 13);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  transform: scale(1);
  transition: opacity .6s ease, transform .6s ease;
}

.intro-overlay.intro-hide{
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.intro-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.intro-logo{
  max-width: min(620px, 90vw);
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: introLogoFade 1.9s ease-out forwards .2s;
}

@keyframes introLogoFade{
  0%{
    opacity: 0;
    transform: translateY(10px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.intro-text{
  font-size: 2.2rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
}

/* =========================================
   Responsive-Anpassungen (Header, Slider, Booklet)
   ========================================= */

/* Header auf einspaltig, Portrait darunter */
@media (max-width: 800px){
  .header{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .menu-left{
    padding: 6rem 1.5rem 2rem;
  }

.menu-right img{
  max-width: 70%;
  margin: 0 auto;
}

.label-links .label {
  width: 130px !important;
  right: 5% !important;
}

  .label.projects,
  .label.about,
  .label.contact{
    width: 160px;
    right: 10%;
  }
}

/* Slider-Höhe & Seiten-Padding auf kleineren Screens reduzieren */
@media (max-width: 700px){
  :root{
    --strip-height: 170px;
    --page-padding-x: 1.5rem;
  }
}

/* Booklet-Bereich enger & Details untereinander */
@media (max-width: 600px){
  .white-banner{
    padding: 3.5rem 1.5rem 4rem;
  }

  .booklet-details{
    flex-direction: column;
    gap: 1.5rem;
  }
}
/* =========================================
   CAREER MODAL (WHY ME Detail)
   - Glasiger, cremiger Vollbild-Hintergrund
   - zwei Styles (cream / flow)
   - Zoom nur auf Inhalt (career-inner)
   ========================================= */

.career-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;                /* via JS -> flex */
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.career-modal.is-open{
  display: flex;
  pointer-events: auto;
}

/* dunkler, geblurrter Layer über "My Career" */
.career-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);  /* leicht abdunkeln */
  backdrop-filter: blur(18px);   /* My Career-Sektion darunter wird weich */
}

/* Grund-Dialog: nimmt den ganzen Screen ein */
.career-dialog{
  --zoom: 1;

  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;

  border-radius: 0;
  box-shadow: none;

  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* wenn offen: sichtbar */
.career-modal.is-open .career-dialog{
  opacity: 1;
}

/* ---------------------------
   Theme 1: "cream" (Feldschlösschen + Further Education)
   leicht transparenter, glasiger Creme-Layer
   mit Lichtfleck wie beim ersten Codepen
   --------------------------- */
.career-dialog.career-theme-cream{
  background: rgba(216, 187, 92, 0.85); /* cremig + transparent */
  backdrop-filter: blur(10px);
}

.career-dialog.career-theme-cream::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255,255,255,0.7),
      transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events:none;
}

/* ---------------------------
   Theme 2: "flow" (Passion + Graphic Design)
   dunkler animierter Gradient, angelehnt an Flow Field Look
   --------------------------- */
.career-dialog.career-theme-flow{
  background: radial-gradient(circle at 0 0,#050509,#000015 40%,#020204 80%);
  position: relative;
}

.career-dialog.career-theme-flow::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(from 0deg,
      rgba(0,255,200,.0),
      rgba(0,255,200,.35),
      rgba(140,80,255,.35),
      rgba(255,120,120,.35),
      rgba(0,255,200,.0));
  filter: blur(40px);
  opacity: .45;
  animation: career-flow-rotate 18s linear infinite;
  pointer-events:none;
}

@keyframes career-flow-rotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Inhalt, der gezoomt wird (Video + Text) */
.career-inner{
  width: min(1800px, 50vw);      /* ← mehr Platz als vorher */
  max-height: 100vh;              /* ← deutlich höher */
  
  display: flex;
  flex-direction: column;
  gap: 2rem;

  /* Zoom-Effekt */
  transform-origin: center center;
  transform: scale(var(--zoom));
  transition: transform 0.25s ease-out;

  /* Glas-Look */
  padding: 2.2rem 2.6rem 2.6rem; /* ← mehr Innenabstand */
  border-radius: 28px;           /* ← größerer Radius */
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 24px 70px rgba(0,0,0,0.75);
  backdrop-filter: blur(18px);
}



/* X-Button (kannst du bei Bedarf im HTML rausnehmen,
   ich lasse ihn als Fallback drin) */
.career-close{
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  color: #ccc;
  transition: transform .15s ease, color .15s ease;
  z-index: 2;
}
.career-close:hover{
  transform: scale(1.15);
  color: #fff;
}

/* Video / PDF-Bereich */
.career-media-wrap{
  width: 100%;
  max-width: 1100px;
  max-height: 65vh;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-media-wrap video,
.career-media-wrap iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

/* PDF im iframe etwas ruhiger */
.career-media-wrap iframe{
  background: #f7f1e7;
}

/* Textblock unter dem Video */
.career-text{
  flex: 0 0 auto;
  max-width: 1100px;
  margin-top: 1.2rem;
  text-align: left;
}

/* TITEL – hier sind Feldschlösschen / Passion for Sports etc. */
/* -> schwarz, wie gewünscht */
.career-text h2{
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  margin-bottom: 0.5rem;
  color: #ffffff;
}

/* BODY-TEXT – HIER stellst du die Textgrösse ein */
.career-copy{
  font-size: 1.7rem;    /* ← hier nach Geschmack anpassen */
  line-height: 1.7;
  color: #ffffff;
}

/* kleinere Screens */
@media (max-width: 900px){
  .career-dialog{
    padding: 1.8rem 1.6rem 2.1rem;
  }
  .career-inner{
    max-height: 90vh;
  }
  .career-media-wrap{
    max-height: 45vh;
  }
}


/* Body scroll lock, damit Hintergrund nicht scrollt */
body.career-open{
  overflow: hidden;
}
/* =========================================
   CONTACT SECTION (Footer)
   ========================================= */

.contact-section{
  /* überall dasselbe Grün wie beim Panel */
  background: radial-gradient(circle at 0 0, #103429 0%, #041c1b 55%, #021414 100%);
  color:#f5f7f3;
  min-height: 280px;   /* Höhe -> Footer-Größe */
  padding: 0;
}


.contact-grid{
  width: min(1400px, 100vw);  /* wie die anderen Inhalte zentriert */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  align-items: stretch;
  min-height: 320px;          /* grobe Mindesthöhe des Footers */
  background: transparent;   /* <<< wichtig */
}

/* Linke Seite – Bild */
.contact-left{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.contact-left img{
  width: 100%;
  height: 95%;
  object-fit: cover;          /* kein Rand, ggf. leicht beschnitten */
  display:block;
}

/* Rechte Seite – Panel */
.contact-panel{
  background: transparent;   /* <<< Verlauf kommt jetzt vom Eltern-Element */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 4vw;
}

/* Inhalt im Panel */
.contact-inner{
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 0;              /* WICHTIG: keine 70vh mehr */
}

/* Überschrift */
.contact-title{
  font-size: clamp(2.2rem, 3vw, 3rem);
  line-height: 1.2;
  font-weight: 600;
}

/* Linie */
.contact-divider{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* Mitte: links Kontakt, rechts Navigation */
.contact-main{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.contact-info p{
  margin: 0 0 .3rem;
  font-size: 1.05rem;
}

.contact-info a{
  color: inherit;
  text-decoration: none;
}
.contact-info a:hover{
  text-decoration: underline;
}

/* Navigation rechts */
.contact-nav{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: right;
  margin-left: auto;
  font-size: 0.98rem;
}
.contact-nav a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.contact-nav a:hover{
  color: #ffffff;
}

/* Footerzeile */
.contact-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.contact-instagram{
  margin-left: auto;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  letter-spacing: .04em;
}
.contact-instagram:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .contact-panel{
    padding: 2.5rem 1.8rem 3rem;
  }
  .contact-main{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .contact-nav{
    text-align: left;
    margin-left: 0;
  }
  .contact-footer{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* BOOKLET – gleicher Hintergrund wie CONTACT, aber wieder korrekt eingerückt */
#booklet.white-banner {
  background: radial-gradient(circle at 0 0, #103429 0%, #041c1b 55%, #021414 100%);
  color: #ffffff;
  /* wieder seitliches Padding wie vorher: */
  padding: 4rem var(--page-padding-x) 6rem;
}


/* Die innere Box darf NICHT weiß sein */
#booklet .white-wrap {
  background: transparent !important;    /* überschreibt das alte Weiß */
  color: #ffffff;
}

/* Titel & Text für bessere Sichtbarkeit */
#booklet .booklet-title,
#booklet .booklet-sub,
#booklet h4,
#booklet p {
  color: #ffffff !important;
}