:root {
  --bg: #000;
  --fg: #fff;
  --muted: #9aa0a6;
  --accent: #fa11bc;
  --tap: 56px;

  /* Slots: Farben */
  --slot-fg: #639981;  /* turquoise4 */
  --slot-bg: #faa893;  /* tan1 */
}

@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter18pt-Medium.woff2') format('woff2');
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.snap-container {
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.snap-section {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
}

/* Video als echter Hintergrund */
.video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
  opacity: 1;
}

/* GLOBAL: Text-Overlays oben links, linksbündig */
.text-overlay {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  display: block;
  text-align: left;
  padding: 0;
  animation: floatIn 900ms ease-out both;
}
.headline { font-size: 10vw; line-height: 0.9; margin: 0; text-align: left; }
.subtitle { font-size: 5vw; margin-top: 8px; color: var(--fg); text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .text-overlay { animation: none; }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.controls {
  position: relative;
  display: flex; gap: 12px; padding: 12px; justify-content: center; align-items: center;
  z-index: 3;
}

.btn {
  min-width: var(--tap); min-height: var(--tap);
  padding: 12px 16px; font-size: 16px; border-radius: 16px; border: 1px solid #333; background: #111; color: var(--fg);
}
.btn:active { transform: scale(0.98); }
.btn-ghost { background: transparent; border-color: #444; color: var(--fg); }
.btn-large { font-size: 18px; padding: 16px 20px; }
.small { font-size: 12px; }
.icon-btn { aspect-ratio: 1 / 1; width: var(--tap); padding: 0; display: grid; place-items: center; }

.progress {
  --h: 8px;
  flex: 1; height: var(--h); background: #222; border-radius: 999px; position: relative; overflow: hidden;
}
.progress::after {
  content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--accent);
}



.hidden { display: none !important; }
.muted { color: var(--muted); }
.placeholder { display: grid; place-items: center; height: 100%; padding: 24px; color: var(--muted); } 

/* ================== Slot-Maschine (Sektion 3) ================== */

/* ========= Slot-Maschine – Fullscreen, Portrait/Landscape, 1 Wort ========= */

#sec-3 .slot-wrap{
  position:relative;
  height:100%;
  padding:0;
  touch-action:manipulation;
}

#sec-3 .reels{
  display:grid;
  height:100%;
  width:100%;
  gap:0;
}

/* Portrait: 3 Reihen */
@media (orientation: portrait){
  #sec-3 .reels{ grid-template-rows:1fr 1fr 1fr; grid-template-columns:1fr; }
}

/* Landscape: 3 Spalten */
@media (orientation: landscape){
  #sec-3 .reels{ grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; }
}

/* Fläche */
#sec-3 .reel{
  background: var(--slot-bg, #FFA54F);
  color: var(--slot-fg, #00868B);
  display:grid;
  place-items:center;
  width:100%; height:100%;
  border-radius:0;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  transition: transform 120ms ease;
}

/* Ein Wort, responsive & mehrzeilig möglich */
#sec-3 .reel .cell{
  width:90%;
  text-align:center;
  font-size: clamp(28px, 9vw, 64px);
  line-height:1.05;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* Tap-Animation */
#sec-3 .reel.tapped{ animation: reelPop 220ms ease; }
#sec-3 .reel:active{ transform: scale(1.02); } /* Fallback */
@keyframes reelPop{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
  100%{ transform:scale(1); }
}


/* Share-Button unten links */
#sec-3 .share-btn{
  position:absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(80px, env(safe-area-inset-bottom));
  z-index:4;
}

/* Optional: Spin-Button vollständig weg */
#sec-3 .spin-btn{ display:none !important; }

#sec-3 .controls {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 1;   /* kleiner als share-btn (der hat z-index:2) */
  padding: 0;
}

/* ================== Ende Slot-Maschine ================== */

/* ================== Splitscreen Tradition & Moderne (Sektion 4) ================== */

#sec-4.snap-section {
  display: block;
  position: relative;
  min-height: 100svh;
}

#sec-4 .split-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

@media (orientation: landscape) {
  #sec-4 .split-wrap {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
}

#sec-4 .side {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

#sec-4 .side-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
}

/* Overlays */
#sec-4 .like-wrap,
#sec-4 .player {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tradition: Herz unten rechts */
#sec-4 .side.tradition .like-wrap {
  right: max(10px, env(safe-area-inset-right));
  bottom: max(48px, calc(env(safe-area-inset-bottom) + 38px));
}

/* Moderne: Herz oben rechts */
#sec-4 .side.moderne .like-wrap {
  right: max(10px, env(safe-area-inset-right));
  top: max(48px, calc(env(safe-area-inset-top) + 38px));
}

/* Player Standard: unten mittig */
#sec-4 .player {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  justify-content: center;
}

/* Tradition: Player ganz unten, Herz darüber */
#sec-4 .side.tradition .player {
  bottom: max(10px, env(safe-area-inset-bottom));
}

/* Moderne: Player oben, Herz darunter */
#sec-4 .side.moderne .player {
  top: max(10px, env(safe-area-inset-top));
}

#sec-4 .like-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
}
#sec-4 .like-btn img { width: 32px; height: 32px; display: block; }
#sec-4 .like-count { color: #fff; font-size: 14px; }

#sec-4 .like-btn.bump img { transform: scale(1.2); transition: transform .2s ease; }

#sec-4 .player .icon-btn { min-width: 40px; min-height: 40px; }
#sec-4 .player .progress {
  flex: 1;
  height: 6px;
  background: #333;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
#sec-4 .player .progress .bar {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent);
}
#sec-4 .player .time { color: #fff; font-size: 12px; }

/* ================== Ende Tradition & Moderne ================== */

/* ================== Sektion 5: Finale ================== */
#sec-5.snap-section {
  display: block;
  position: relative;
  min-height: 100svh;
}

/* Video vollflächig (du hast .video-wrap/.bg-video schon global) */

/* Zeichen-Canvas */
#sec-5 .draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  touch-action: none;      /* präzises Zeichnen */
  z-index: 2;              /* über dem Video, unter dem Player */
}

/* Clear-Button unten rechts */
#sec-5 .clear-canvas {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 48px)); /* über Player */
  z-index: 3;
}

/* Player unten zentriert */
#sec-5 .finale-player.player {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

#sec-5 .finale-player .progress {
  flex: 1; height: 6px; background: #333; border-radius: 999px; position: relative; overflow: hidden;
}
#sec-5 .finale-player .progress .bar {
  position: absolute; inset: 0; width: 0%; background: var(--accent);
}
#sec-5 .finale-player .time { color: #fff; font-size: 12px; }
/* ================== Ende Sektion 5 ================== */

/* ================== Sektion 6: Infos ================== */
#sec-6 .info-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: rgba(0,0,0,0.7);
  max-width: 700px;
  margin: 0 auto;
  border-radius: 12px;
  overflow-y: auto;
  max-height: 80vh;
}

#sec-6 h3 {
  margin-top: 1.2em;
  font-size: 16px;
  color: #fa11bc;
}

#sec-6 a {
  color: #0ff722;
  text-decoration: underline;
}

#sec-6 .logo-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
#sec-6 .logo-bar img {
  max-height: 48px;
  width: auto;
}

#sec-6 .mini-howto {
  list-style: none; padding: 0; margin: .5em 0 0;
}
#sec-6 .mini-howto li {
  margin: .2em 0;
}
#sec-6 .small { font-size: 12px; }


/* Floating Action Button */
.fab {
  position: fixed; z-index: 10;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.5); background: #141414;
}

/* Overlay-Struktur ohne Schleier */
.overlay { position: fixed; inset: 0; background: none; display: grid; place-items: center; z-index: 20; }
.overlay-card { background: none; border: 1px solid #222; border-radius: 16px; padding: 16px; max-width: 480px; margin: 16px; }

:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================== AUDIO PLAYER: Icon-only Buttons & Farbe ================== */
/* Greift NUR in Audio-Controls & Playern, nicht bei Start/Install/etc. */
.player .icon-btn,
.controls .icon-btn,
.controls .btn {
  background: transparent !important;
  border: none !important;
  color: #fa11bc !important;   /* Icon-/Text-Farbe */
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

/* Optional: etwas größere Tap-Fläche auf sehr kleinen Geräten */
@media (max-width: 420px) {
  .player .icon-btn,
  .controls .icon-btn,
  .controls .btn { min-width: 44px; min-height: 44px; }
}

/* Fortschrittsleisten – Farbe kommt aus --accent (#fa11bc) – lassen wir so.
   Falls du NUR für Player eine andere Farbe willst, ent-kommentiere unten:
*/
/*
.player .progress .bar,
.controls .progress::after { background: #fa11bc !important; }
*/

/* Zeitstempel im Player (Sektion 4/5) – gut lesbar */
.player .time { color: #fff; font-size: 12px; line-height: 1; }

/* Fokus sichtbar, aber dezent */
.player .icon-btn:focus-visible,
.controls .btn:focus-visible,
.controls .icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



/* Overlay weiterhin über volle Breite */
#sec-1 .text-overlay {
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  text-align: left;
}

/* Button wirklich mittig */






/* ===== Orientation-Hinweis  ===== */
#orientationHint {
  /* Vollflächiger pinker Hintergrund */
  background: #fa11bc !important;

    display: grid;
  align-content: end;                 
  padding-bottom: calc(22vh + env(safe-area-inset-bottom)); 
}

#orientationHint .overlay-card {
  
  background: transparent !important;
  border: 0 !important;

 
  color: #000;
  text-align: center;
  font-size: clamp(18px, 4.5vw, 24px);
  line-height: 1.35;

  
  padding: 20px 24px;
  max-width: 520px;
}

#orientationHint .overlay-card p {
  margin: 0;
}

#orientationHint .desktop-extra {
  text-align: center;        /* Text + Bild zentrieren */
  margin-top: 1rem;
}

#orientationHint .desktop-extra p {
  margin-bottom: 1rem;       /* Abstand zwischen Text und QR-Code */
}

#orientationHint .desktop-extra .qr {
  display: block;
  margin: 0 auto;            /* QR-Code mittig */
  max-width: 160px;          /* optional: Größe begrenzen */
  height: auto;
}
<!--
/* iOS Mini-Hinweis: pinker Chip, oben rechts */
.ios-hint-cta {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 6;
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, opacity .2s ease;
}
.ios-hint-cta:active { transform: scale(.97); }

/* Falls die Start-CTA (
}

/* Install-CTA: pink, top-right */
.install-cta {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 5;
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.install-cta:active { transform: scale(.97); }
.hidden { display: none !important; } /* hast du eh schon */

#sec-1 #installBtn {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  padding: 12px 18px;
  border-radius: 9999px;
  background: var(--accent);
  color: #000;
  border: 0;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor: pointer;
}
#sec-1 #installBtn:active { transform: translateX(-50%) scale(.97); }

/* Install-Button: unten mittig, nur wenn Intro sichtbar */
#installBtn {
  /* standardmäßig NICHT zeigen */
  display: none;

  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  padding: 12px 18px;
  border-radius: 9999px;
  background: var(--accent);
  color: #000;
  border: 0;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor: pointer;
}

.intro-visible #installBtn {
  /* nur in Sektion 1 einblenden */
  display: inline-block;
}

#installBtn:active { transform: translateX(-50%) scale(.97); }

@media (max-width: 420px) {
  #installBtn { padding: 10px 14px; font-size: 14px; }
}
/* Install-Button unten zentriert positionieren – ohne Logik zu ändern */
#installBtn {
  position: fixed;                     /* viewport-fixiert, unabhängig von Section */
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;                          /* unterhalb deiner Overlays; Start-CTA hat z-index 2 – passe ggf. auf 1 an */
}


#sec-1 .text-overlay {
  padding-bottom: 96px;                /* Platz für den Install-Button */
}

.logo-stein {
  display: block;
  margin: 1rem 0;     /* nur oben/unten Abstand, kein auto-zentrieren */
  max-width: 100px;   /* ggf. anpassen */
  height: auto;
}

/* iOS Chip (oben rechts) komplett deaktivieren */
.ios-hint-cta,
.install-cta {
  display: none !important;
}




/* snap hardening */
.snap-container{overscroll-behavior-y:contain;overscroll-behavior-x:none;scroll-padding-top:0}
.snap-section{scroll-snap-stop:always;overflow:hidden;contain:layout paint style}
#sec-3{touch-action:pan-y!important}



/* === ANDROID/CHROME SNAP/VIEWPORT FIXES (non-destructive overrides) === */
.snap-container{
  height: 100svh;
  height: var(--vhpx);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.snap-section{
  height: 100svh;
  height: var(--vhpx);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: block;
  overflow: clip;
  contain: layout paint style;
  isolation: isolate;
}
/* END android/chrome fixes */

/* === SECTION 3 HEIGHT & LAYOUT STABILISATION === */
#sec-3 {
  height: 100svh;
  height: var(--vhpx);
  padding: 0;
  overflow: clip;
  contain: layout paint style;
  isolation: isolate;
}
#sec-3 .inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#sec-3 #reels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#sec-3 .player,
#sec-3 .footer {
  flex: 0 0 auto;
}
#sec-3 .reel .word {
  font-size: clamp(24px, 8.5vw, 64px);
  line-height: 1.05;
  white-space: nowrap;
}
/* END section 3 fix */

/* === Tap-to-Start Overlay (autoplay fallback) === */
.tap-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.6); z-index: 9999; }
.tap-overlay[hidden] { display: none; }
.tap-overlay__btn { font-family: 'Inter'; padding: 12px 18px; border-radius: 999px; border: none; background: #fa11bc; color: #000;cursor: pointer; }

/* Swipe-Hinweis auf Startseite */
.swipe-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--accent); /* pink */
  font-size: 1rem;
  animation: swipe-blink 1.2s infinite;
  z-index: 50;
  pointer-events: none; /* nicht klickbar */
}
.swipe-arrow {
  display: block;
  font-size: 2rem;
  line-height: 1;
}
@keyframes swipe-blink {
  0%, 100% { opacity: 1; transform: translate(-50%, 0); }
  50% { opacity: 0.3; transform: translate(-50%, -6px); }
}
.swipe-hint.hidden { display: none; }

/* Player unten zentriert in Sec2 (gleiche Position wie in Sec5) */
#sec-2 .controls {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 3;
  padding: 0; /* Padding hier weg, da unten fixiert */
}

/* === iOS Toolbar-Hiding Support === */
html.ios-doc-scroll,
html.ios-doc-scroll body { 
  height: 100%; 
  scroll-snap-type: y mandatory; 
  overscroll-behavior-y: contain; 
  -webkit-overflow-scrolling: touch; 
}

html.ios-doc-scroll .snap-container { 
  height: auto; 
  overflow: visible; 
}

html.ios-doc-scroll .snap-section { 
  height: 100dvh;           /* neue Safari-Einheit */
  height: var(--vhpx);      /* Fallback für ältere iOS-Versionen */
}

/* === Legal Burger anchor === */
.legal-burger {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  z-index: 9999;
}
.legal-burger img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.legal-burger img:hover { opacity: 1; }

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }