/* ===== HERO ===== */
.hero{ position:relative; min-height: 78vh; display:flex; align-items:center; overflow:clip; }
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero video{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.02) brightness(.95); opacity:.85; }
.hero::before{ /* vignette for readability */ content:""; position:absolute; inset:0; pointer-events:none; }
[data-theme="light"] .hero::before{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15) 40%, transparent 60%); }
.hero .container{ display:grid; gap:1.25rem; grid-template-columns: 1.2fr .8fr; align-items:center;z-index:10; }
.hero-copy{ padding:2rem 0; }
.hero-badge{ display:flex; gap:.6rem; align-items:center; }
.hero-badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow: var(--glow); }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.device-card{ aspect-ratio: 9/19.5; border-radius:28px; border:1px solid rgba(255,255,255,.18); position:relative; overflow:hidden; box-shadow: var(--shadow), var(--glow); background: linear-gradient(180deg, #0b1922, #071018); max-height:min(75vh, 800px);}

.device-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:44%; height:30px; background:#0b1922; border-radius:0 0 16px 16px; border:1px solid #123; border-top:none; }

.device-screen{ position:absolute; inset:8px; border-radius:24px; overflow:hidden; }
.screen-video{ width:100%; height:100%; object-fit:cover; opacity:.98; }
.floating{ position:absolute; right:-40px; bottom:-30px; width:240px; rotate:-8deg; opacity:.95; filter: drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
@media (max-width: 980px){ .hero .container{ grid-template-columns:1fr; } .floating{ display:none; } }
.video-crop {
  position: relative;
  width: 100%;
  /* Höhe als 2:1-Format erzwingen */
  padding-top: 50%;   /* 1/2 von width → 2:1 */
  overflow: hidden;
}
.reveal .device-card {
  margin-left: auto;
  margin-right: auto; /* macht es mittig */
z-index:10;
}
.video-crop video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}


/* ===== STRIP / PARTNER ===== */
.strip{ display:flex; gap:2.5rem; overflow:auto; padding:.75rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip img{ height:26px; opacity:.75; }
.sec-partner{ background: var(--bg-soft); }

/* ===== FEATURES ===== */
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.card{ padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background: var(--card); box-shadow: var(--shadow); z-index:10}
.card h3{ margin:.2rem 0 .4rem; font-size:1.15rem; }
.card p{ margin:0; color:var(--muted); }
.icon{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background: rgba(31,74,64,.10); }
[data-theme="dark"] .icon{ background: rgba(111,184,166,.15); }
@media (max-width:900px){ .features{ grid-template-columns:1fr; } }
.sec-features{ z-index:10;}

/* ===== SHOWCASE / PARALLAX ===== */
.showcase{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.mock{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow); transform: translateZ(0); }
.mock img{ width:100%; display:block; }
.parallax{ transform: translateY(var(--y, 0px)); will-change: transform; }
@media (max-width:980px){ .showcase{ grid-template-columns:1fr; } }
.sec-parallax{ background: var(--bg-soft); }
/* Bühne: mittig ausrichten, damit das Seitengerät relativ zur Mitte positioniert */
/* Bühne: Inhalt unten ausrichten */

/* Bühne zentriert */
.phones-overlap{
  position: relativ;
  display: grid;
  place-items: center;
 max-height:  calc(min(calc(75vh * 9 / 19.5), 95vw, 320px)*2.1);

}

/* Beide Geräte: an Unterkante verankern */
.phone-main-1{
  position: absolute;
  bottom: 0%;                 /* Baseline */
  left: 50%;
  transform-origin: 50% 100%;/* pivot: unten zentriert */
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, box-shadow .3s;
  will-change: transform, opacity;
  cursor: pointer;
  pointer-events: auto;
}
.phone-side-right-1{
  position: absolute;
  bottom:100%;                 /* Baseline */
  left: 50%;
  transform-origin: 50% 100%;/* pivot: unten zentriert */
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, box-shadow .3s;
  will-change: transform, opacity;
  cursor: pointer;
  pointer-events: auto;
}

/* --- Default-Positionen (keine Variablen) --- */
/* Hauptgerät mittig unten */
.phones-overlap .phone-main-1{
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  z-index: 12; opacity: 1;
}
/* Seiten-Phone rechts, gleiche Baseline */
.phones-overlap .phone-side-right-1{
  transform: translateX(calc(-50% + 240px)) translateY(0) rotate(5deg) scale(.78);
  z-index: 11; opacity: 0;              /* fade-in später */
}

/* Eintritt: von unten leicht hoch + einblenden */
.phones-overlap:not(.in) .phone-side-right-1{
  transform: translateX(calc(-50% + 240px)) translateY(24px) rotate(5deg) scale(.78);
  opacity: 0;
}
.phones-overlap.in .phone-side-right-1{
  transform: translateX(calc(-50% + 240px)) translateY(0) rotate(5deg) scale(.78);
  opacity: 1;
}

/* --- Fokus-Zustände --- */
/* A) Main vorne (größer), Side dezent kleiner */
.phones-overlap.focus-main .phone-main-1{
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.06);
  z-index: 15; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.phones-overlap.focus-main .phone-side-right-1{
  transform: translateX(calc(-50% + 240px)) translateY(0) rotate(5deg) scale(.66);
  z-index: 11; opacity: 1;
}

/* B) Side vorne → komplette Transforms tauschen */
.phones-overlap.focus-side .phone-side-right-1{
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.06);
  z-index: 15; opacity: 1; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.phones-overlap.focus-side .phone-main-1{
  transform: translateX(calc(-50% + 240px)) translateY(0) rotate(5deg) scale(.78);
  z-index: 11; opacity: 1; box-shadow: none;
}

/* Responsiv: seitlichen Versatz anpassen */
@media (max-width: 980px){
  .phones-overlap .phone-side-right-1{
    transform: translateX(calc(-50% + 180px)) translateY(0) rotate(5deg) scale(.75);
  }
  .phones-overlap:not(.in) .phone-side-right-1{
    transform: translateX(calc(-50% + 180px)) translateY(24px) rotate(5deg) scale(.75);
  }
  .phones-overlap.focus-main .phone-side-right-1{
    transform: translateX(calc(-50% + 180px)) translateY(0) rotate(5deg) scale(.64);
  }
  .phones-overlap.focus-side .phone-main-1{
    transform: translateX(calc(-50% + 180px)) translateY(0) rotate(5deg) scale(.75);
  }
}
@media (max-width: 680px){
  .phones-overlap .phone-side-right-1{
    transform: translateX(calc(-50% + 120px)) translateY(0) rotate(5deg) scale(.68);
  }
  .phones-overlap:not(.in) .phone-side-right-1{
    transform: translateX(calc(-50% + 120px)) translateY(24px) rotate(5deg) scale(.68);
  }
  .phones-overlap.focus-main .phone-side-right-1{
    transform: translateX(calc(-50% + 120px)) translateY(0) rotate(5deg) scale(.60);
  }
  .phones-overlap.focus-side .phone-main-1{
    transform: translateX(calc(-50% + 120px)) translateY(0) rotate(5deg) scale(.68);
  }
}
/* Mobile: horizontalen Overflow kappen */
@media (max-width: 680px){
   .phones-overlap{ width:100%;  transform: translate(-30vw, 50px) !important;}  /* Safety gegen 100vw-Sideeffects */

  .phone-mock--vh75-50{
    aspect-ratio: 9 / 19.5;
    /* Breite so berechnen, als hätte das Gerät 75vh Höhe */
    max-width: min(calc(50vh * 9 / 19.5), 95vw, 320px);
    height: auto;              /* Höhe aus Breite ableiten -> kein Verzerren */
  }
}



/* ===== HORIZONTAL GALLERY ===== */
.h-scroll{ overflow:auto; display:flex; gap:1rem; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.h-card{ flex:0 0 clamp(260px, 40vw, 420px); scroll-snap-align:start; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.sec-showreel{ background: var(--bg); }

/* ===== MARQUEE ===== */
.marquee{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: linear-gradient(180deg, rgba(31,74,64,.03), rgba(31,74,64,0)); }
.marquee-track{ display:flex; gap:3rem; padding:1rem 0; animation: scroll 30s linear infinite; }
.marquee-item{ white-space:nowrap; color:var(--accent); letter-spacing:.5px; }
@keyframes scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ===== PRICING ===== */
/*.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.price{ padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); background: var(--card); position:relative; box-shadow: var(--shadow); }
.price.popular{ outline:2px solid rgba(31,74,64,.35); box-shadow: var(--glow); }
.price h4{ margin:.2rem 0; font-size:1.2rem; }
.price-amount{ font-size:2rem; font-weight:800; }
.check{ color:#10b981; margin-right:.5rem; }
.mutelist{ color:var(--muted); }
@media (max-width:980px){ .pricing{ grid-template-columns:1fr; } }
.sec-pricing{ background: var(--bg-soft); }
*/

/* Grid: 3 Spalten auf Desktop */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* drei gleich breite Spalten */
  gap: clamp(.6rem, 2vw, 1rem);
  align-items: stretch;
}

/* Karten: gleich hoch, CTA nach unten */
.price{
  padding: clamp(.9rem, 2vw, 1.25rem);
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;           /* Inhalt vertikal */
   z-index:10;
}
.price .btn{ margin-top:auto; }    /* Button klebt unten */

/* ── Gold-Karte ── */
.price.gold{
  border-color: rgba(255,215,0,.35);
  background: linear-gradient(135deg, rgba(255,215,0,.12), var(--card) 60%);
  box-shadow: 0 0 24px rgba(255,215,0,.10), var(--shadow);
}
.price.gold h4{ color: #FFD700; }
.price.gold .price-amount{ color: #FFD700; }
.price.gold .check{ color: #FFD700; }
.price.gold .btn.primary{
  background: linear-gradient(90deg, rgba(255,215,0,.75), rgba(255,185,0,.55));
  color: #0a0a0a;
  border: none;
}
.price.gold .btn.primary:hover{
  box-shadow: 0 0 18px rgba(255,215,0,.45);
}

/* ── Platin-Karte ── */
.price.platin{
  position: relative;
  border-color: rgba(200,200,220,.28);
  background: linear-gradient(135deg, rgba(210,210,230,.12), var(--card) 60%);
  box-shadow: 0 0 24px rgba(200,200,220,.08), var(--shadow);
}
.price.platin h4{ color: #D0D0E8; }
.price.platin .price-amount{ color: #D0D0E8; }
.price.platin .check{ color: #D0D0E8; }

/* "Beliebt"-Badge (wie in der App) */
.price-badge{
  position: absolute;
  top: 0; right: 0;
  padding: .3rem .9rem;
  border-bottom-left-radius: 14px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.price.gold .price-badge{
  background: #FFD700;
  color: #0a0a0a;
}
.price.platin .price-badge{
  background: #D0D0E8;
  color: #0a0a0a;
}

/* Typo wie gehabt */
.price h4{ margin:.2rem 0; font-size:1.2rem; }
.price-amount{ font-size:2rem; font-weight:800; }
.check{ color:#10b981; margin-right:.5rem; }
.mutelist{ color:var(--muted); }

/* Responsive: 2 Spalten auf Tablet, 1 Spalte auf Handy */
@media (max-width: 980px){
  .pricing{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pricing{ grid-template-columns: 1fr; }
}

/* Sektion-Hintergrund */
.sec-pricing{ background: var(--bg-soft); }
/* ===== FAQ ===== */
details{ border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; background: var(--card); box-shadow: var(--shadow); }
details + details{ margin-top:.7rem; }
summary{ cursor:pointer; font-weight:600; }
summary::-webkit-details-marker{ display:none; }
.sec-faq{ background: var(--bg); }

/* ===== CTA ===== */
.sec-cta{ background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }

/* ===== REVEAL ===== */
.reveal{ opacity:0; transform: translateY(16px); transition:.6s ease;z-index:10 }
.reveal.in{ opacity:1; transform:none; }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* ===== WELCOME SPLASH ===== */
.fullheight{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.centered{ text-align:center; align-items:center; justify-content:center; }
.scroll-div-1{ background: var(--bg-soft); overflow:hidden; }


/* SHOW Reeal Pro- ------------- */




/* ===== SHOWREEL – 5 Karten über volle Breite, min 200px ===== */
/* ===== SHOWREEL – 5 über volle Breite, min 200px ===== */
/* ===== SHOWREEL – 5 über volle Breite, min 200px ===== */
#showreel { --reel-gap: 2rem; }

#showreel .reel-wrap{
  position: relative;
  overflow-x: auto;                /* scrollt, wenn < 5×200px */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0;
z-index:10;
}

/* Exakt 5 Spaltenbreiten über 100% verteilen */
#showreel .reel{
  display: flex;
  gap: var(--reel-gap);
  width: 100%;
}

/* Karte = (Gesamtbreite - 4 Gaps) / 5, aber nie < 200px */
#showreel .reel-item{
  flex: 0 0 calc((100% - (var(--reel-gap) * 4)) / 5);
  min-width: 100px;
  margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  border-radius: 20px; overflow: hidden;
  aspect-ratio: 9 / 19.5;          /* Phone-Portrait; Höhe ergibt sich aus Breite */
  scroll-snap-align: start;
  cursor: zoom-in;
}

/* Bild füllt die Karte pixelgenau */
#showreel .reel-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#showreel .badge{
  position:relative; left:100px; bottom:50px; padding:.25rem .55rem; border-radius:10px;
  background: rgba(0,0,0,.55); color:#fff; font-size:.85rem; letter-spacing:.2px;
}
[data-theme="light"] #showreel .badge{ background: rgba(2,8,23,.65); }

/* Lightbox */
#showreel .lightbox{ border:0; padding:0; background: transparent; }
#showreel .lightbox::backdrop{ background: rgba(0,0,0,.55); }
#showreel .lightbox img{
  display:block; max-width:min(92vw, 1400px); max-height:80vh; border-radius:16px;
  margin: 6vh auto 0; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
#showreel .lightbox .close{
  position:fixed; top:16px; right:16px; z-index:15;
  border:1px solid var(--line); border-radius:999px; background: var(--card);
  padding:.4rem .6rem; cursor:pointer;
}
#showreel .lightbox .caption{ text-align:center; margin:.5rem 0 4vh; }

/* Drag-to-scroll cursor hint */
#showreel .reel{ cursor: grab; }
#showreel .reel:active{ cursor: grabbing; }

/* Zeiger und saubere Bildfüllung in der Lightbox */
.reel-item{ cursor: zoom-in; }
.lightbox img{ display:block; width:auto; height:auto; max-width:min(92vw,1400px); max-height:80vh; object-fit:contain; }


/* ---------- Handy ----------*/
/* ==== Phone mock (bezels + notch) ==== */
.phone-mock{
  position:relative;
  /* typische Smartphone-Aspect-Ratio */
  aspect-ratio: 9 / 19.5;
  width: min(480px, 90vw);      /* Größe anpassen */
  margin-inline:auto;
  border-radius: 34px;
  background: linear-gradient(180deg, black, black);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
[data-theme="light"] .phone-mock{
  background: linear-gradient(180deg, black, black);
  border-color: rgba(2,8,23,.12);
}

.phone-screen{
  position:absolute; inset: 10px;
  border-radius: 28px; overflow:hidden;
  background: #000;        /* falls das Bild nicht ganz füllt */
}
.phone-screen > img{
  width:100%; height:100%;
  object-fit: contain;     /* zeigt vollen Screenshot ohne Beschnitt */
  object-position: center;
  display:block;
}
/* Willst du randlos füllen (evtl. minimaler Beschnitt): 
.phone-screen > img{ object-fit: cover; } */

/* Notch */
.phone-notch{
  position:absolute; top: 1px; left:50%; transform: translateX(-50%);
  width: 42%; height: 20px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.06);
  border-top: none;
  border-radius: 0 0 14px 14px;
  z-index: 12;
}
[data-theme="light"] .phone-notch{
  background: rgba(0,0,0,.55);
  border-color: rgba(2,8,23,.08);
}

/* Seitenbuttons (rechts) */
.phone-buttons::before,
.phone-buttons::after{
  content:"";
  position:absolute; right: -3px; width: 3px; border-radius: 2px;
  background: rgba(0,0,0,.5);
}
.phone-buttons::before{ top: 80px; height: 42px; }
.phone-buttons::after{  top: 130px; height: 80px; }
[data-theme="light"] .phone-buttons::before,
[data-theme="light"] .phone-buttons::after{ background: rgba(2,8,23,.2); }

/* Soft reflection */
.phone-mock::after{
  content:""; position:absolute; inset:0; border-radius:34px; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%);
  mix-blend-mode: screen;
}

.phone-mock--vh75{
  aspect-ratio: 9 / 19.5;
  /* Breite so berechnen, als hätte das Gerät 75vh Höhe */
  width: min(calc(75vh * 9 / 19.5), 95vw, 320px);
  height: auto;              /* Höhe aus Breite ableiten -> kein Verzerren */
}

.phone-mock--vh75-50{
  aspect-ratio: 9 / 19.5;
  /* Breite so berechnen, als hätte das Gerät 75vh Höhe */
  width: min(calc(75vh * 9 / 19.5), 95vw, 320px);
  height: auto;              /* Höhe aus Breite ableiten -> kein Verzerren */
}


/* Drop shadow under device */
.phone-shadow{
  position:absolute; left:10%; right:10%; bottom:-10px; height: 28px;
  filter: blur(12px); border-radius: 50%;
  background: rgba(0,0,0,.35);
}

/* Größenvarianten */
.phone-mock--xl{ width: min(620px, 95vw); }
@media (max-width: 980px){
  .phone-mock--xl{ width: min(520px, 94vw); }
}
/* Moderne Viewport-Einheit (adressleisten-sicher) – wenn unterstützt, override */
@supports (height: 1dvh){
  .phone-mock--vh75{
    width: min(calc(75dvh * 9 / 19.5), 95vw, 320px);
  }
}

/* Optional: Container-Inhalt schön zentrieren */
.parallax.reveal.mock{
  display: grid;
  place-items: center;
}

/* ==== Entrance + Sheen + Notch Pulse ==== */
.phone-anim{
  /* transform per Variablen, damit JS/Animationen zusammenspielen */
  --ty: 24px; --rx: 6deg; --ry: 0deg; --scale: .96;
  opacity: 0;
  transform: translate3d(0,var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}

/* Sheen line across the screen */
/*.phone-screen { position: relative; }*/
.phone-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(120deg, transparent 45%,
      rgba(255,255,255,.28) 50%, transparent 55%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
  opacity:.0;
}


/* Notch glow pulse (fein) */
.phone-notch{ box-shadow: none; }

/* Wenn im View: spiele die Effekte */
.phone-anim.in{
  animation: phoneEnter .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.phone-anim.in .phone-sheen{
  animation: phoneSheen 1.1s .35s ease-out forwards;
}
.phone-anim.in .phone-notch{
  animation: notchPulse .8s .15s ease-out;
}

/* Idle: ganz leichte „Atmung“ über Shadow */
.phone-anim.in .phone-shadow{
  animation: shadowBreathe 3.6s 1s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes phoneEnter{
  to { opacity:1; --ty:0; --rx:0deg; --scale:1; }
}
@keyframes phoneSheen{
  0%   { transform: translateX(-120%); opacity:0; }
  10%  { opacity:.35; }
  70%  { opacity:.15; }
  100% { transform: translateX(120%); opacity:0; }
}
@keyframes notchPulse{
  0% { box-shadow: 0 0 0 rgba(31,74,64,0); }
  40%{ box-shadow: 0 0 18px rgba(31,74,64,.45); }
  100%{ box-shadow: 0 0 0 rgba(31,74,64,0); }
}

@keyframes shadowBreathe{
  from { transform: scaleX(.95); opacity:.6; }
  to   { transform: scaleX(1.05); opacity:.85; }
}

/* Optional: subtiler Tilt per Maus */
/*.phone-anim.tilt-ready{ transition: transform .12s ease-out; }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .phone-anim, .phone-anim * { animation: none !important; transition: none !important; }
  .phone-anim { opacity:1; --ty:0; --rx:0deg; --scale:1; }
}


/* =============== SPRACHEN ============ */
/* Supported Languages */
.lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
align-items: center;
padding:0;
 z-index:10;
}

.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
z-index:10;
}
.lang-flag{ font-size:1.1rem; line-height:1; }
.lang-name{ font-weight:600; }
.lang-local{ color:var(--muted); font-size:.92rem; }
*





/* ===== Theme-abhängiger 12° Split (pure white/black) ===== */
.section-themes{
  position: relative;
  isolation: isolate;                /* eigener Stacking-Context */
   --split-tilt: 11.5deg;
  --split-angle: calc(90deg - var(--split-tilt));
  background: var(--bg);          /* nix untendrunter einfärben */
  container-type: inline-size;
  container-name: themes;
}

/* Das Overlay, das die beiden Hälften malt */
.section-themes .theme-split{
  position: absolute; inset: 0;  /* größer als Section, damit Kante übersteht */
  z-index: 1; pointer-events: auto;
  background: none;                  /* wird je Theme gesetzt */
}

/* Inhalt (Phone + Text) über dem Split rendern */
.section-themes .theme-center{ position: relative; z-index: 11; }

/* DARK: links weiß bis 50%, rechts transparent */

[data-theme="dark"] .section-themes .theme-split{
  background: linear-gradient(
    var(--split-angle),
    transparent 0 30%,
    rgba(255,255,255,.25) 34%,
    rgba(255,255,255,.55) 38%,
    rgba(255,255,255,.8)  44%,
    rgba(255,255,255,.9)  50%,
    transparent 50% 100%
  );
}
/* LIGHT: links transparent, rechts schwarz ab 50% */
[data-theme="light"] .section-themes .theme-split{
  background: linear-gradient(
    var(--split-angle),
    transparent 0 50%,
    #00000090 50% 100%
  );
}

.section-themes .theme-split{
  position: absolute; inset: 0;
  z-index: 13;                /* über dem Gradient-/Hintergrund, unter Phone z-index:20 */
  pointer-events: none;      /* Container blockt nichts; Buttons selbst bekommen events */
}
.section-themes .label{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index: 100; pointer-events:auto; cursor:pointer;

  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  padding:.45rem .7rem; border-radius:12px; border:1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.section-themes .label-left{
  left:min(2vw,16px); color:#0b1220; background:#fff; border-color:rgba(2,8,23,.08);;
}
.section-themes .label-right{
  right:min(2vw,16px); color:#eaf2ff; background:#000; border-color:rgba(255,255,255,.10);
}
.section-themes .theme-center{ position:relative; z-index:20; } /* Phone-Schicht */

/* Fokus/Hover für A11y */
.section-themes .label:hover{
  transform: translateY(-50%) translateY(-1px);
cursor:pointer;
}
.section-themes .label:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,74,64,.35);
}
/* Bei wenig Platz: nur Icon zeigen */
@container themes (max-width: 560px){
  .section-themes .label .label-txt{ display:none; }
  .section-themes .label{ padding-inline:.55rem; }
}

/* Fallback für Browser ohne Container Queries */
@supports not (container-type:inline-size){
  @media (max-width: 560px){
    #design-modes .label .label-txt{ display:none; }
    #design-modes .label{ padding-inline:.55rem; }
  }
}
/* Phone-Screens je nach Theme anzeigen 
.phone-screen{ position:absolute; inset:10px; border-radius:28px; overflow:hidden; background:#000; }
.phone-screen > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.phone-screen .shot-light{ display:block; }
[data-theme="dark"] .phone-screen .shot-light{ display:none; }
[data-theme="dark"] .phone-screen .shot-dark{ display:block; }

/* Responsiv: auf sehr schmalen Screens Tilt etwas reduzieren (optional) 
@media (max-width: 640px){
  .section-themes{ --split-tilt: 8deg; }
}

*/
/* Bühne für den 3er-Stack */
.phones-stage{
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(75vh, 820px);
}

/* Größenvarianten */
.phone-mock--vh60{
  aspect-ratio: 9 / 19.5;
  width: min(calc(60vh * 9 / 19.5), 80vw, 320px);
  height: auto;
  z-index:7;
}
@supports (height: 1dvh){
  .phone-mock--vh60{ width: min(calc(60dvh * 9 / 19.5), 80vw, 320px); }
}

/* Layering: Seitenphones hinter dem Hauptgerät */
.phone-main{ position: relative; z-index: 18; }
.phone-side{
  position: absolute; top: 50%; transform-origin: 50% 80%;
  z-index: 7; opacity: .95; filter: saturate(.98) contrast(.98);
  pointer-events: none; /* damit nur das mittlere interaktiv ist */
}

/* Links: -5°, leicht nach links/unten versetzt */
.phone-left{
  left: 8%;
  transform: translateY(-50%) translateX(-6%) rotate(-5deg) scale(.86);
}
/* Rechts: +5°, leicht nach rechts/unten versetzt */
.phone-right{
  right: 8%;
  transform: translateY(-50%) translateX(6%) rotate(5deg) scale(.86);
}

/* Schatten der Seitenphones etwas breiter, softer */
.phone-side .phone-shadow{
  left: 6%; right: 6%; bottom: -12px; height: 26px; opacity: .65;
}

/* Caption sauber unter die Bühne */
.phones-caption{
  grid-column: 1 / -1;
  margin-top: .8rem;
  text-align: center;
}

/* Responsiv: auf schmalen Screens die Seitenphones kleiner oder ausblenden */
@media (max-width: 900px){
  .phone-left, .phone-right{
    transform: translateY(-50%) rotate(var(--r,0)) scale(.74);
    opacity: .9;
  }
  .phone-left{ --r:-5deg; left: 4%; }
  .phone-right{ --r: 5deg; right: 4%; }
.phones-stage{scale:0.5;}

}
/*
@media (max-width: 640px){
  .phone-left, .phone-right{ display: none; } /* Fokus aufs Hauptgerät */
}

/* Falls du die Eintrittsanimation nutzt: Seitenphones dezenter animieren */
.phone-side.phone-anim{
  --ty: 18px; --rx: 0deg; --scale: .86;
  opacity: 0;
  transform: translateY(-50%) rotate(var(--rot,0)) scale(.86);
}
.phone-left.phone-anim{ --rot:-5deg; }
.phone-right.phone-anim{ --rot: 5deg; }
.phone-side.phone-anim.in{
  animation: phoneEnter .6s .12s cubic-bezier(.2,.8,.2,1) forwards;
}


/* =================== s Handys Sliden ================== */


/* Abstand für die seitlichen Endpositionen (vom Zentrum aus) */
.phones-stage{ --dx: clamp(160px, 24vw, 340px); }

/* Startzustand: unsichtbar, zentral geparkt */
.phone-side{
  position:absolute; top:50%; left:50%;
  transform-origin:50% 80%;
  pointer-events:none; z-index:11;
  visibility:hidden; opacity:0;
  filter: saturate(.98) contrast(.98);
}

/* Endpositionen (für den Fall ohne Animation) */
.phone-left  { transform: translate(calc(-50% - var(--dx)), -50%) rotate(-5deg) scale(.86); }
.phone-right { transform: translate(calc(-50% + var(--dx)), -50%) rotate( 5deg) scale(.86); }

/* Beim Eintritt: sichtbar + Animation aus der Mitte nach außen */
.phones-stage.in .phone-side{ visibility:visible; }
.phones-stage.in .phone-left{
  animation: phoneSideInLeft .7s cubic-bezier(.2,.8,.2,1) both;
}
.phones-stage.in .phone-right{
  animation: phoneSideInRight .7s .06s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes phoneSideInLeft{
  0%   { opacity:0; transform: translate(-50%, -30%) rotate(-2deg) scale(.76); }
  55%  { opacity:1; }
  100% { opacity:.95; transform: translate(calc(-50% - var(--dx)), -50%) rotate(-5deg) scale(.86); }
}
@keyframes phoneSideInRight{
  0%   { opacity:0; transform: translate(-50%, -30%) rotate(2deg) scale(.76); }
  55%  { opacity:1; }
  100% { opacity:.95; transform: translate(calc(-50% + var(--dx)), -50%) rotate(5deg) scale(.86); }
}

/* Reduced motion: keine Animation, sofort sichtbar in Endposition */
@media (prefers-reduced-motion: reduce){
  .phones-stage.in .phone-left,
  .phones-stage.in .phone-right{
    animation: none !important;
    visibility: visible; opacity: 1;
  }
}





/* ========================== NOTIZEN =========================== */
/* ===== Floating Travel Notes – global ===== */
.note-float{
  position: absolute;              /* relativ zur Ziel-Sektion */
  top: var(--top, 50%);
  left: var(--left, 50%);
  transform: translate(-50%,-50%)
             rotate(var(--rot, 0deg))
             scale(var(--scale, 1));
  width: clamp(220px, 22vw, 320px);
  z-index: 6;
  pointer-events: auto;
  opacity: 0;                      /* Reveal-Start */
  transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease;
}
.note-float.in{ opacity: 1; }
.note-float:hover{ transform: translate(-50%,-50%) rotate(var(--rot,0)) scale(calc(var(--scale,1) * 1.01)); }

/* Papier / Foto / Tape – recycled aus den Notes */
.note-float .note-paper{
  position:relative; display:block; padding:.9rem .9rem 1rem; border-radius:16px;
  background:#FFECA1; border:1px solid rgba(2,8,23,.08); box-shadow:0 12px 30px rgba(2,8,23,.10);
  color:#1b2029;
}
.note-float .note-paper::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 26px, rgba(2,8,23,.06) 26px 27px);
  mix-blend-mode:multiply; opacity:.55;
}
[data-theme="dark"] .note-float .note-paper::before{
  background:repeating-linear-gradient(to bottom, transparent 0 26px, rgba(255,255,255,.06) 26px 27px);
}

.note-float .tape{ position:absolute; top:-10px; width:68px; height:22px;
  background:linear-gradient(180deg,rgba(255,255,224,.75),rgba(255,245,200,.55));
  border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 12px rgba(0,0,0,.12);
  backdrop-filter:blur(1.5px); pointer-events:none;
}
.note-float .tl{ left:14px; transform:rotate(-6deg); }
.note-float .tr{ right:14px; transform:rotate(5deg); }

.note-float .note-photo{
  display:block; width:100%; margin:.2rem auto .7rem;
  background:#fff; border-radius:10px; padding:6px 6px 28px;
  box-shadow:0 10px 22px rgba(0,0,0,.18); border:0; cursor:zoom-in;
  transform: rotate(var(--photo-rot,0deg));
}
.note-float .note-photo img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:6px; display:block; }
.note-float .note-photo figcaption{ position:absolute; left:0; right:0; bottom:4px; text-align:center;
  font-family: var(--hand-font, "Caveat", "Segoe Print", cursive); font-size:.95rem; color:#1f2937; }
[data-theme="dark"] .note-float .note-photo{ background:#fff; }

.note-float .hand{ font-family: var(--hand-font, "Caveat", "Segoe Print", cursive); font-size:1.05rem; line-height:1.5; letter-spacing:.2px; }
.note-float .meta{ margin:.35rem 0 0; font-size:.88rem; color: var(--muted); }

/* sanfter Parallax-Drift (setzt --dy per JS) */
.note-float{ transform: translate(-50%,-50%) translateY(var(--dy,0)) rotate(var(--rot,0)) scale(var(--scale,1)); }

/* Mobile: weg, damit nix überlappt */
/*
@media (max-width: 700px){
  .note-float{ display:none; }
}
*/
@media (max-width: 700px){
  .note-paper{ scale:0.5; opacity:0.9;min-width:200px}
}


/* ========= ROTER FADEN ======================== */
/* Roter Faden Overlay */
#red-thread{
  position: fixed; inset: 0;      /* ganze Viewport-Fläche */
  z-index:6;                     /* unter .note-float (die haben z-index:5) */
  pointer-events: none;
}
:root{ --thread: #c81e1e; --thread-shadow: rgba(200,30,30,.35); }
[data-theme="dark"]{
  --thread: #ef4444;              /* etwas heller im Dark Mode */
  --thread-shadow: rgba(239,68,68,.28);
}

/* Thread-Stile (Hauptlinie + zarte Schatten-Linie) */
#red-thread .thread-shadow{
  fill: none; stroke: var(--thread-shadow); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: blur(1px);
}
#red-thread .thread{
  fill: none; stroke: var(--thread); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* kleine „Pins“ an den Ankerpunkten */
#red-thread .pin{
  fill: var(--thread); opacity:.95;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}

/* Auf kleinen Screens sind die Floating Notes ja ausgeblendet -> Thread auch */
/*
@media (max-width:700px){
  #red-thread{ display:none; }
}
*/

/* ------------------- bild im hintergrund von Notizen ---------------- */
/* Runder Bild-Halo hinter der Notiz (Desktop/Tablet) */
.note-float{
  position: absolute;               /* hast du schon */
  z-index: 3;                       /* über dem roten Faden (z-index:4) */
  /* Standard-Parameter (pro Note über JS/inline überschreibbar) */
  --halo-size: clamp(260px, 100vh, 100vh);
  --halo-x: 0px;                    /* Versatz relativ zur Notiz-Mitte */
  --halo-y: 0px;
  --halo-opacity: .9;
}

/* Das eigentliche große, runde Bild */
.note-float::before{
  content:"";
  position:absolute;
  top: calc(50% + var(--halo-y));
  left: calc(50% + var(--halo-x));
  width: var(--halo-size);
  height: var(--halo-size);
  transform: translate(-50%,-50%) rotate(var(--rot,0)) scale(calc(var(--scale,1) * 1.02));
  border-radius: 50%;
  z-index: -1;                      /* unter dem Papier, aber über dem Faden */
  pointer-events: none;

  /* Bild aus CSS-Var + leichte Vignette oben drauf */
  background-image: var(--note-bg),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,.25) 70%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;

  opacity: var(--halo-opacity);
  box-shadow:
    0 0 0 10px rgba(255,255,255,.05),          /* dünner „Rahmen“ */
    0 18px 40px rgba(0,0,0,.18);               /* weicher Drop-Shadow */
  transition: opacity .5s ease, transform .5s ease;
}

/* leichtes Einfaden, wenn die Note sichtbar wird */
.note-float.in::before{
  opacity: var(--halo-opacity);
  transform: translate(-50%,-50%) rotate(var(--rot,0)) scale(1);
}

/* Dark-Mode: Halo minimal kräftiger */
[data-theme="dark"] .note-float::before{
  box-shadow:
    0 0 0 10px rgba(255,255,255,.06),
    0 22px 46px rgba(0,0,0,.28);
}


/* ====================== MOBILE ONLIE - NOTIZEN =================== */
/* ===== Mobile Notes Ribbon ===== */
.sec-mobile-notes{ display:none; }               /* Desktop aus */
@media (max-width: 700px){
  .sec-mobile-notes{ display:block; background: var(--bg-soft); }
}

.sec-mobile-notes .mn-head{ margin-bottom:.6rem; }
.sec-mobile-notes .mn-reel{
  display:flex; gap:.6rem; padding:.2rem .2rem .6rem;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch;
}
.sec-mobile-notes .mnote{ scroll-snap-align:center; flex:0 0 auto; }

.mnote .mnote-paper{
  position:relative; display:block; text-align:left;
  width: clamp(220px, 78vw, 320px);
  padding: .65rem .65rem .8rem; border-radius:14px; border:1px solid rgba(2,8,23,.08);
  background:#FFECA1; box-shadow: 0 10px 22px rgba(2,8,23,.10);
  transform: rotate(var(--rot, -2deg));
  cursor: zoom-in;
}

.mnote img{ display:block; width:100%; height:auto; border-radius:8px; aspect-ratio:4/3; object-fit:cover; }
.mnote .ph-cap{
  position:absolute; left:0; right:0; bottom:38%;
  text-align:center; font-family: var(--hand-font,"Caveat","Segoe Print",cursive); font-size:.95rem; color:#ffffff;
}

.mnote .hand{ margin:.5rem 0 .25rem; font-family: var(--hand-font,"Caveat","Segoe Print",cursive); font-size:1.05rem; line-height:1.5;color:black }
.mnote .meta{ margin:0; }

.mnote .tape{ position:absolute; top:-8px; width:62px; height:20px;
  background:linear-gradient(180deg,rgba(255,255,224,.75),rgba(255,245,200,.55));
  border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 12px rgba(0,0,0,.12); pointer-events:none;
}
.mnote .tl{ left:12px; transform:rotate(-6deg); }
.mnote .tr{ right:12px; transform:rotate(5deg); }

/* Roter Mini-Faden unter dem Ribbon */
.mn-thread{ width:100%; height:12px; margin-top:.2rem; }
.mn-thread .shadow{ fill:none; stroke: rgba(200,30,30,.25); stroke-width:1.8; filter: blur(.4px); }
.mn-thread .line  { fill:none; stroke: #c81e1e; stroke-width:1.2; }


/* ============= WELCOME IN NEW YORK ======== */
/* ===== NYC Section ===== */
.section-ny{
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 6vw, 6rem);
  color: #fff;
    background: var(--bg-soft);
}
.section-ny .ny-bg{
  position:absolute; inset:0; z-index:-2;
  background-image: var(--ny-bg);
  background-size: cover; background-position: center;
  transform: translateZ(0);
  /* 0% = unsichtbar, 100% = voll sichtbar — langer, weicher Übergang */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,1) 70%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,1) 70%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

}
.section-ny::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Lesbarkeit: leichtes Darkening + Vignette */

}

.section-ny .ny-grid{
  min-height: clamp(420px, 70vh, 920px);
  display:grid; align-items:center;
z-index:10;
}
.section-ny .ny-copy{
  max-width: 56ch;
}
.section-ny .ny-copy .lead{ font-weight:700; font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
.section-ny .ny-copy .subtle{ color: #ebe7df; }



/* Notification Card */
.ny-notify{
  position: relative;
  margin-top: 1.25rem;
z-index:10;
  /* Auf größeren Screens schwebt die Card etwas rechts der Copy */
}
@media (min-width: 900px){
  .ny-notify{
    position:absolute; top: 22%; left: 52%;
  }
}
.ny-note{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .9rem; border-radius: 14px;
  background: rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  opacity:0; transform: translateY(-14px);
  will-change: transform, opacity;
z-index:10;
}
[data-theme="light"] .ny-note{ background: rgba(255,255,255,.85); color:#0b1220; border-color: rgba(2,8,23,.12); }

.ny-note-icon{ font-size:1.15rem; }
.ny-note-text{ display:flex; flex-direction:column; line-height:1.2; }
.ny-note-text strong{ font-weight:800; }
.ny-note-text span{ color:#c8d4d0; }
[data-theme="light"] .ny-note-text span{ color: var(--muted); }

/* Eintrittsanimation */
.section-ny.in .ny-note{
  animation: nyDrop .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes nyDrop{
  0%{ opacity:0; transform: translateY(-14px); }
  100%{ opacity:1; transform: translateY(0); }
}
/* ================== MOBILE VERSION grosse Bilder ================ */

/* Mobile: kleinerer Halo pro Karte */
.mnote{ position: relative; }
.mnote::before{
  content:"";
  position:absolute; z-index:-1; pointer-events:none;
  top: 12%; left: 12%;              /* leicht links/oben hinter das Papier schieben */
  width: clamp(180px, 58vw, 280px);
  height: clamp(180px, 58vw, 280px);
  transform: rotate(-2deg);
  border-radius: 999px;

  background-image: var(--note-bg),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.22) 70%);
  background-size: cover, cover;
  background-position: center, center;

  opacity: .85;
  box-shadow: 0 0 0 8px rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.18);
}