/* ==========================================================================
   postmakr — Marketing-Website
   Monochrom (Schwarz/Weiss/Grau), Sektionen als gerundete Bloecke
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-900:#1a1a1a;
  --gray-700:#3a3a3a;
  --gray-500:#6b6b6b;
  --gray-400:#a0a0a0;
  --gray-200:#e5e5e5;
  --gray-100:#f4f4f4;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container: 1200px;
  --radius-pill: 999px;
  --radius-card: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; font-size:106.25%; } /* ~17px Basis fuer Fliesstext (Typo-Feinschliff) */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--black);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Block-Layout: gerundete Bloecke auf schwarzem Grund ----------
   Der Body-Hintergrund ist durchgaengig schwarz. <main> ist ein Flex-Column-
   Container mit 10px Innenabstand (= 10px zum Viewport-Rand rundum) und 10px
   Gap zwischen den Kindern (= 10px zwischen den Bloecken). Flex-Gap statt
   Margins, damit keine Margin-Collapsing-Ueberraschungen zwischen den Sektionen
   auftreten. Jede Sektion ist ein eigenstaendiger, komplett gerundeter Block
   (.block) - kein Ueberlappen mehr, siehe frueheres .section-rounded-top/-bottom
   (entfernt). Hero + Marquee sind die einzige Ausnahme: sie werden in
   .hero-unit zusammengefasst und sitzen dort ohne Gap flush aneinander, damit
   Video-Hero oben und Farbband unten optisch EIN Block bleiben (Hero unten
   eckig, Marquee unten gerundet). */
main{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
}
.hero-unit{
  display:flex;
  flex-direction:column;
}
.block{ border-radius:32px; }
@media (max-width: 640px){
  .block{ border-radius:20px; }
}

img, video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

section{ position:relative; }

/* ---------- Wortmarke ---------- */
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:-0.02em;
  color:var(--gray-500);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.wordmark .plane{
  width:0.85em;
  height:0.85em;
  margin-left:3px;
  transform:rotate(-6deg) translateY(0.08em);
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.on-dark .wordmark{ color:var(--gray-400); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  font-size:0.95rem;
  font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 28px rgba(10,10,10,0.16); }
.btn:active{ transform:translateY(0) scale(0.99); }
.btn-black{ background:var(--black); color:var(--white); position:relative; }
.btn-black:hover{ background:var(--gray-900); }
.btn-white{ background:var(--white); color:var(--black); position:relative; }
.btn-white:hover{ background:var(--gray-100); }
/* Farbakzent: 2px Gradient-Ring auf Hover der primaeren CTA-Buttons (Punkt 7f).
   Ueber ein maskiertes ::after statt Background-Aenderung, damit die Buttons
   ihre normale Farbe/Form behalten und nur der Ring dazukommt. */
.btn-black::after, .btn-white::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background-image:linear-gradient(90deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.btn-black:hover::after, .btn-white:hover::after{ opacity:1; }
.btn-ghost-dark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35); }
.btn-ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn-ghost-light{ background:transparent; color:var(--black); border-color:rgba(10,10,10,0.25); }
.btn-ghost-light:hover{ border-color:var(--black); background:rgba(10,10,10,0.05); }
.btn-outline-dark{ background:transparent; color:var(--white); border-color:#fff; }
.btn-outline-dark:hover{ background:#fff; color:var(--black); }
.btn-sm{ padding:10px 20px; font-size:0.85rem; }
.play-icon{ width:14px; height:14px; }
.play-icon path{ fill:currentColor; }

/* ---------- Nav: schwebende Glas-Leiste ----------
   Vorher eine edge-to-edge weisse Bar (Taso-Feedback: "vollflaechig weiss"),
   danach ein hell/dunkel-Wechsel je nach Scroll-Zustand. Taso-Feedback
   (2026-08-03): ganz oben (nicht gescrollt) gar kein Container - nur
   Wortmarke + Links freistehend auf dem Hintergrund. Sobald gescrollt wird
   (main.js: .nav-scrolled, Trigger ist scrollY > ~30px), blendet die Pille
   sanft als dunkles Milchglas ein - immer dunkel, nie hell, auf ALLEN
   Sektionen (auch ueber weissen Bloecken: dunkles Glas + Weiss ergibt ein
   helles Milchgrau mit durchscheinendem Inhalt, das ist gewollt). Kein
   Seiten-Unterschied mehr noetig (frueher nav-hero/on-dark-page) - main.js
   setzt die Klasse einheitlich auf jeder Seite. */
.nav{
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 48px);
  max-width:var(--container);
  z-index:1000;
  border-radius:999px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid transparent;
  box-shadow:none;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.nav-scrolled{
  /* Deckkraft leicht ueber dem urspruenglichen Hero-Wert (0.45): die weisse
     Wortmarke braucht auch ueber weissen Bloecken genug Kontrast. */
  background:rgba(20,20,25,0.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,0.15);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* Wortmarke + Papierflieger-Icon in der Nav immer komplett weiss, in beiden
   Zustaenden (transparent oben, dunkles Glas beim Scrollen). Bewusst auf
   .nav .wordmark beschraenkt - Footer- und Login-Card-Wortmarke bleiben grau. */
.nav .wordmark{ color:#fff; }
.nav .nav-toggle svg path{ stroke:#fff; }
@media (min-width: 861px){
  /* Nur die Desktop-Inline-Links faerben - das mobile Dropdown-Panel bleibt
     immer hell mit dunklem Text (siehe .nav-links-desktop Media Query unten). */
  .nav .btn-black{
    background:#fff;
    color:var(--black);
    border-color:#fff;
  }
  .nav .btn-black:hover{ background:var(--gray-100); }
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-link{
  font-size:0.92rem;
  font-weight:500;
  color:rgba(255,255,255,0.85);
  padding:8px 14px;
  border-radius:var(--radius-pill);
  transition:color .2s, background-color .25s var(--ease);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,0.12); }
.nav-links-desktop{ display:flex; align-items:center; gap:8px; }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width: 860px){
  /* Mobil: Leiste nutzt volle Breite minus 10px Rand statt der festen
     Desktop-Pille (Taso-Feedback). */
  .nav{ top:10px; width:calc(100% - 20px); }
  .nav-links-desktop{
    position:fixed;
    top:88px; left:0; right:0;
    background:var(--white);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 24px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    border-bottom:1px solid var(--gray-200);
  }
  .nav-links-desktop.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  /* Mobiles Dropdown-Panel ist immer ein helles weisses Feld (unabhaengig
     vom Nav-Scroll-Zustand) - Links darin brauchen dunkle Farbe statt der
     weissen Nav-Link-Farbe aus der Pille oben. */
  .nav-links-desktop .nav-link{
    color:var(--gray-700);
    text-shadow:none;
  }
  .nav-links-desktop .nav-link:hover{ color:var(--black); background:rgba(10,10,10,0.05); }
  .nav-links-desktop .nav-link, .nav-links-desktop .btn{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid var(--gray-100);
  }
  .nav-links-desktop .btn{ margin-top:8px; border-bottom:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Sections generic ---------- */
.section{ padding:120px 0; position:relative; }
.section-dark{ background:var(--black); color:var(--white); }
.section-light{
  background-color:var(--white);
  color:var(--black);
  background-image:radial-gradient(rgba(10,10,10,0.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.eyebrow{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:16px;
  background-image:linear-gradient(90deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* ---------- Farbakzent-Familie (aus dem Marquee-Gradienten), dosiert eingesetzt ---------- */
.text-gradient{
  background-image:linear-gradient(90deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h1, h2, h3{
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin:0 0 20px;
}
p{ line-height:1.6; }
.lede{
  font-size:1.25rem;
  color:var(--gray-500);
  max-width:640px;
}
.section-dark .lede, .section-violet .lede, .section-night .lede{ color:var(--gray-400); }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  height:100svh;
  display:flex;
  align-items:flex-end;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  /* Rundung nur oben (unter der Nav sichtbar) - unten bleibt eckig, damit das
     Marquee-Farbband bruendig anschliesst und mit dem Hero optisch EIN Block
     bildet (die Rundung dafuer traegt das Marquee, siehe .marquee unten). */
  border-radius:32px 32px 0 0;
}
@media (max-width: 640px){
  .hero{ border-radius:20px 20px 0 0; }
}
.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-video{
  z-index:1;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
}
.hero-video.is-active{ opacity:1; }
.hero-fallback-gradient{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition:opacity 1.1s ease;
  background-size:200% 200%;
  animation:gradientShift 14s ease infinite;
}
.hero-fallback-gradient.is-active{ opacity:1; }
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.4) 45%, rgba(10,10,10,0.72) 78%, rgba(10,10,10,0.96) 100%);
  z-index:1;
}
/* Dezenter Verlaufs-Scrim ganz oben im Hero, damit die Nav-Links auf hellen
   Video-Frames lesbar bleiben - unabhaengig vom generellen hero-scrim, das
   erst weiter unten stark abdunkelt. */
.hero-topscrim{
  position:absolute;
  inset:0 0 auto 0;
  height:140px;
  background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, rgba(10,10,10,0) 45%, rgba(10,10,10,0.55) 100%);
}
.hero-grain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:160px 0 96px;
}
.hero-headline{
  font-size:clamp(2.6rem, 7vw, 6rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.02;
  margin:0 0 28px;
  text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
.headline-line{
  display:inline-block;
  opacity:0;
  animation:headlineIn .6s var(--ease) forwards;
}
.headline-line:nth-of-type(1){ animation-delay:.05s; }
.headline-line:nth-of-type(2){ animation-delay:.2s; }
@keyframes headlineIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-rotator{
  display:inline-block;
  position:relative;
  color:var(--white);
}
.hero-rotator .word{
  position:absolute;
  left:0; top:0;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .38s ease, transform .38s ease;
  white-space:nowrap;
}
.hero-rotator .word.is-active{
  position:relative;
  opacity:1;
  transform:translateY(0);
}
.hero-sub{
  font-size:1.2rem;
  max-width:560px;
  color:rgba(255,255,255,0.82);
  margin:0 0 40px;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* ---------- Marquee band ---------- */
.marquee{
  background:var(--gray-100);
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  overflow:hidden;
  padding:18px 0;
  /* Schliesst den Hero-Block optisch ab: Hero ist oben gerundet und unten
     eckig, das Marquee direkt darunter traegt die untere Rundung - zusammen
     wirken beide wie ein einziger abgerundeter Block. */
  border-radius:0 0 32px 32px;
}
@media (max-width: 640px){
  .marquee{ border-radius:0 0 20px 20px; }
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation:marqueeScroll 38s linear infinite;
}
.marquee-track span{
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--gray-500);
  white-space:nowrap;
  padding:0;
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ---------- Steps (Was ist postmakr) ----------
   Offene Spalten statt Voll-Kaesten: eine feine Hairline trennt die drei
   Schritte, jede Spalte traegt oben eine kleine Produkt-Vignette (reines
   HTML/CSS-Mockup) statt eines generischen Icon-Kreises. */
.steps-columns{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  margin-top:64px;
}
.step-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:0 28px;
  min-width:0;
  overflow:hidden;
}
.step-col:first-child{ padding-left:0; }
.step-col:last-child{ padding-right:0; }
.step-col:not(:first-child){ border-left:1px solid var(--gray-200); }

/* Vignette: kein Karten-Kasten mehr, die Inhalte (Orbit, Prompt-Bubble +
   Karussell, Freigabe-Slide) stehen direkt auf dem Sektionshintergrund.
   Feste Hoehe (per Breakpoint) bleibt erhalten, damit alle drei Vignetten
   gleich hoch sind und die h3-Ueberschriften darunter exakt auf einer Linie
   landen. Inhalt wird per justify-content vertikal zentriert; die
   Freigabe-Karte (.approve-vignette) verteilt stattdessen ueber die volle
   Hoehe. Der Kasten-Umriss ist weg (kein Border/Hintergrund/Schatten); die
   Prompt-Bubble bleibt eine eigene kleine Chat-Karte, das ist ein
   Chat-Element und kein Vignetten-Kasten. Overflow-Clipping fuer das
   Karussell sitzt jetzt auf .step-col statt hier. */
.step-vignette{
  height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

.step-line{
  font-size:1.22rem;
  margin:0;
}
.step-col p{ color:var(--gray-500); margin:0; font-size:0.92rem; line-height:1.5; }

/* Vignette 1 — Radar findet dein Thema */
.vig-radar-top{ display:flex; justify-content:flex-end; }
.vig-radar-label{
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--gray-400);
}
/* Themenliste mit drei abgestuften Zeilen (fett/normal/gedimmt), feine
   Trennlinien statt Leerraum (Punkt 8, V1). */
.vig-topic-list{ display:flex; flex-direction:column; }
.vig-topic-row{
  margin:0;
  padding:7px 0;
  border-top:1px solid rgba(10,10,10,0.08);
  line-height:1.35;
}
.vig-topic-row:first-child{ border-top:none; padding-top:0; }
.vig-topic-row:last-child{ padding-bottom:0; }
.vig-topic-strong{ font-size:0.86rem; font-weight:700; color:var(--black); }
.vig-topic-normal{ font-size:0.8rem; font-weight:500; color:var(--gray-700); }
.vig-topic-dim{ font-size:0.78rem; font-weight:500; color:var(--gray-400); }

/* Vignette 2 — postmakr baut den Post: Tipp-Sequenz -> fertige Slideshow.
   Ablauf (siehe initComposeDemo() in main.js): beim ersten Sichtbarwerden
   (IntersectionObserver) ist nur die leere Chat-Bubble sichtbar
   (.vig-prompt-bubble), der Prompt aus data-compose-prompt tippt sich
   zeichenweise in [data-compose-typed] (.is-typing, blinkender Cursor
   .vig-typing-cursor), ein kurzer "Senden"-Zucker der Bubble (.is-sent),
   drei huepfende Lade-Punkte (.is-loading, .vig-compose-loading), dann
   blendet das Karussell ein (.is-ready). Karussell selbst: endloses
   Karussell aus 4 fertig gestalteten Mini-Slides im Insta-4:5-Format
   (.vig-slideshow-carousel > .vig-carousel-track), laeuft durchgaengig
   langsam von rechts nach links (kein Handy-Rahmen, die Slides sind der
   Output selbst). Der Track enthaelt die 4 Slides zweimal hintereinander,
   die Animation faehrt exakt bis translateX(-50%) und beginnt nahtlos von
   vorn (echte Endlos-Schleife statt Pendel-Loop). Bei prefers-reduced-motion
   springt initComposeDemo() direkt in den Endzustand (Text komplett,
   Karussell sichtbar aber ohne Lauf-Animation, siehe @keyframes
   vig-carousel-scroll weiter unten). */
.compose-vignette{ justify-content:flex-start; align-items:flex-start; gap:10px; min-width:0; }
.compose-vignette .vig-slideshow-carousel{ margin-top:auto; }
.vig-prompt-bubble{
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:230px;
  margin-left:auto;
  background:#eef1fd;
  border:1px solid #dfe5fb;
  border-radius:14px 14px 4px 14px;
  padding:8px 12px;
  box-shadow:0 2px 6px rgba(10,10,10,0.05);
  transform-origin:84% 30%;
}
/* Antwort-Zeile von postmakr: Flieger-Avatar + Bubble, wie im Messenger links. */
.vig-reply-row{
  display:flex;
  align-items:flex-end;
  gap:7px;
  align-self:flex-start;
  margin-top:-8px;
}
.vig-reply-avatar{
  width:20px;
  height:20px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
}
.vig-reply-avatar svg{ width:10px; height:10px; }
.vig-reply-bubble{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:14px 14px 14px 4px;
  padding:7px 11px;
  font-size:12.5px;
  font-weight:500;
  color:var(--black);
  box-shadow:0 2px 6px rgba(10,10,10,0.05);
}
.vig-reply-answer{ display:none; }
.compose-vignette.is-ready .vig-reply-answer{
  display:flex;
  animation:vig-reply-in .3s var(--ease);
}
@keyframes vig-reply-in{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .compose-vignette.is-ready .vig-reply-answer{ animation:none; }
}
.compose-vignette.is-sent .vig-prompt-bubble{
  animation:vig-bubble-pulse .35s ease;
}
@keyframes vig-bubble-pulse{
  0%{ transform:scale(1); }
  30%{ transform:scale(.97); }
  65%{ transform:scale(1.025); }
  100%{ transform:scale(1); }
}
.vig-prompt-avatar{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:2px;
  border-radius:50%;
  background:linear-gradient(135deg,#4f8fd9,#8a63d2);
}
.vig-prompt-text{
  font-size:13px;
  line-height:1.38;
  font-weight:500;
  color:var(--black);
}
.vig-typing-cursor{
  display:inline-block;
  width:0;
  overflow:visible;
  opacity:0;
  font-weight:400;
}
.compose-vignette.is-typing .vig-typing-cursor{
  opacity:1;
  animation:vig-cursor-blink 1s step-end infinite;
}
.compose-vignette.is-loading .vig-typing-cursor,
.compose-vignette.is-ready .vig-typing-cursor{
  display:none;
  opacity:0;
  animation:none;
}
@keyframes vig-cursor-blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0; }
}
/* Drei huepfende Lade-Punkte zwischen Tipp-Ende und Karussell-Einblendung. */
.vig-compose-loading{ display:none; }
.compose-vignette.is-loading .vig-compose-loading{ display:flex; }
.vig-reply-thinking{ display:inline-flex; align-items:center; gap:4px; padding:9px 11px; }
.compose-vignette.is-ready .vig-compose-loading{ display:none; }
.vig-loading-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gray-400);
  animation:vig-loading-bounce .9s ease-in-out infinite;
}
.vig-loading-dot:nth-child(2){ animation-delay:.15s; }
.vig-loading-dot:nth-child(3){ animation-delay:.3s; }
@keyframes vig-loading-bounce{
  0%, 80%, 100%{ transform:translateY(0); opacity:.5; }
  40%{ transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .compose-vignette .vig-prompt-bubble{ animation:none; }
  .vig-typing-cursor{ display:none; }
  .vig-loading-dot{ animation:none; }
}
.vig-slideshow-carousel{
  width:100%;
  min-width:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.compose-vignette.is-ready .vig-slideshow-carousel{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .vig-slideshow-carousel{ transition:none; }
}
.vig-carousel-track{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  animation:vig-carousel-scroll 22s linear infinite;
}
@keyframes vig-carousel-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .vig-carousel-track{ animation:none; }
}
/* Mini-Slides im Insta-Karussell-Format (4:5 Hochformat), alle vier als
   Foto/Video-Hintergrund (.vig-mini-slide-photo). Bekommt einen
   Verlaufs-Scrim von unten (.vig-mini-photo-scrim) fuer Textlesbarkeit; das
   Video (Slide 1, echtes lokales Hero-Video assets/video/marke.mp4) liegt
   als <video> ganz unten im Stack. Auf jedem Slide oben links das fiktive
   Mini-Cafe-Logo "Kanne" (.vig-mini-logo). */
.vig-mini-slide{
  position:relative;
  flex:0 0 auto;
  width:116px;
  height:145px;
  border-radius:12px;
  padding:9px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.vig-mini-slide-photo{
  background-size:cover;
  background-position:center;
  color:#fff;
}
.vig-mini-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.vig-mini-photo-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(10,8,6,0.87) 0%, rgba(10,8,6,0.34) 56%, rgba(10,8,6,0) 100%);
  pointer-events:none;
}
/* Kanne-Wortbildmarke: Kannen-Silhouette (Fill statt duenner Strokes, damit
   sie auch bei 12-16px kraeftig bleibt) + fette Versal-Typo. Identischer
   Aufbau ueberall (Slides, Freigabe-Card, veroeffentlichter Beitrag), das
   SVG wird pro Vorkommen inline dupliziert, bleibt aber byte-identisch. */
.vig-mini-logo{
  position:absolute;
  top:8px;
  left:9px;
  z-index:2;
}
/* Nur Icon + Schriftzug, KEINE Pille dahinter (Taso: Pille verdeckte auf
   Mobil die Slides) - Lesbarkeit kommt aus den Schatten der Elemente. */
.vig-kanne-logo{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.vig-kanne-icon{
  width:13px;
  height:13px;
  flex-shrink:0;
  fill:#fff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.vig-kanne-word{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.45);
  line-height:1;
}
.vig-mini-index{
  position:absolute;
  top:7px;
  right:9px;
  z-index:2;
  font-size:0.52rem;
  font-weight:500;
  opacity:0.5;
}
.vig-mini-slide-photo .vig-mini-index{
  opacity:0.6;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.vig-mini-headline{
  position:relative;
  z-index:2;
  font-size:0.74rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
/* Handgezeichnete Editorial-Doodles (Sonnenstrahlen, Pfeil, Kringel, Sparkles,
   handschriftliche Mini-Labels) auf den vier Foto-Slides: dezente Story-
   Overlays in Creme/Weiss, bewusst unregelmaessige Pfade statt exakter
   Geometrie, damit sie skizziert statt konstruiert wirken. Jedes Overlay ist
   ein absolut positioniertes <span> mit viewBox-SVG (0 0 100 125, passend zur
   4:5-Slide-Proportion), skaliert also automatisch mit allen drei
   Breakpoint-Groessen der Mini-Slides mit. Liegt ueber dem Scrim, aber im DOM
   vor .vig-mini-logo/.vig-mini-headline (gleicher z-index:2), damit Logo und
   Headline bei Ueberschneidung immer oben liegen. .vig-doodle-sun wird
   identisch fuer Slide 1, den grossen Freigabe-Slide (Vignette 3) und das
   Post-Thumbnail wiederverwendet (dort automatisch groesser bzw. per
   .vig-doodle-subtle etwas zurueckhaltender). */
.vig-doodle{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.vig-doodle svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:rgba(255,248,240,0.92);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vig-doodle .vig-doodle-spark{ stroke-width:1.1; }
.vig-doodle-subtle svg{ opacity:0.68; }
.vig-doodle-label{
  position:absolute;
  z-index:2;
  font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive;
  font-size:8px;
  font-weight:400;
  color:rgba(255,248,240,0.92);
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  transform:rotate(-4deg);
  white-space:nowrap;
}
.vig-doodle-label-grind{ top:17%; left:8%; }
.vig-doodle-label-arabica{ top:16%; right:12%; }

/* Vignette 3 — Du gibst frei: klickbare Mini-Demo. Ruhezustand zeigt den
   ersten Slide des Beitrags gross und mittig (.vig-approve-slide, dieselben
   Bausteine wie in Vignette 2: .vig-mini-slide/-photo/-scrim/-logo/-headline),
   darunter zentriert nur die zwei Buttons (kein Zusatztext mehr noetig).
   Klick auf "Freigeben" (.vig-approve-btn) toggelt Zustandsklassen auf
   .approve-vignette (.is-flying, .is-live, siehe initApproveDemo() in
   main.js): der Slide zoomt/kippt leicht weg (.vig-approve-slide), ein
   Papierflieger-Badge (.vig-plane-badge, gleiches Icon wie im
   Wortmarken-Logo) poppt mit leichtem Overshoot gross mittig auf, haelt
   kurz und fliegt dann in einer Bogenbahn nach rechts oben davon. Danach
   blendet an derselben Stelle der veroeffentlichte Beitrag ein
   (.vig-published-card: Mini-Kopfzeile, Thumbnail mit demselben ersten
   Slide, hochzaehlende Likes/Shares). Nach rund 5s blendet die Post-Karte
   wieder aus, Slide + Buttons kehren zurueck, Demo bleibt erneut klickbar.
   Slide, Plane-Badge und Published-Card ueberlagern sich (alle absolut
   positioniert bzw. zentriert), .approve-vignette dient als Bezugsrahmen
   und zentriert den Inhalt. Bei prefers-reduced-motion: kein Flug, der
   Zustand springt direkt um (siehe Media-Queries unten). */
.approve-vignette{ justify-content:center; align-items:center; position:relative; }
.vig-approve-slide{
  width:190px;
  height:238px;
  padding:14px;
  box-shadow:0 14px 30px rgba(10,8,6,0.28);
  transform:rotate(-1deg);
  transition:opacity .3s var(--ease);
}
.approve-vignette.is-flying .vig-approve-slide{
  animation:vig-slide-zoom-away .5s var(--ease) forwards;
}
.approve-vignette.is-live .vig-approve-slide{ animation:none; opacity:0; }
@keyframes vig-slide-zoom-away{
  0%{ transform:rotate(-1deg) scale(1); filter:blur(0); opacity:1; }
  100%{ transform:rotate(-1deg) scale(.92); filter:blur(1px); opacity:.4; }
}
.vig-approve-slide-headline{ font-size:0.92rem; }
.vig-approve-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  transition:opacity .3s var(--ease);
}
.approve-vignette.is-flying .vig-approve-actions,
.approve-vignette.is-live .vig-approve-actions{
  opacity:0;
  pointer-events:none;
}
.vig-pill-solid{
  font-size:0.72rem;
  font-weight:700;
  color:var(--white);
  background:var(--black);
  border-radius:var(--radius-pill);
  padding:6px 14px;
}
.vig-approve-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  font-family:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.approve-vignette:not(.is-flying):not(.is-live) .vig-approve-btn{
  animation:vig-btn-hint 5s ease-in-out infinite;
}
@keyframes vig-btn-hint{
  0%, 92%, 100%{ transform:scale(1); }
  96%{ transform:scale(1.04); }
}
.vig-approve-btn-label{ transition:opacity .2s ease; }
.vig-approve-check{
  position:absolute;
  inset:0;
  margin:auto;
  width:14px;
  height:14px;
  fill:none;
  stroke:#fff;
  stroke-width:2.4;
  opacity:0;
  transition:opacity .2s ease;
}
.approve-vignette.is-flying .vig-approve-btn-label{ opacity:0; }
.approve-vignette.is-flying .vig-approve-check{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .approve-vignette:not(.is-flying):not(.is-live) .vig-approve-btn{ animation:none; }
  .approve-vignette.is-flying .vig-approve-slide{ animation:none; opacity:0; }
}
.vig-pill-ghost{
  font-size:0.72rem;
  font-weight:600;
  color:var(--gray-700);
  background:transparent;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-pill);
  padding:6px 14px;
}
/* Papierflieger-Badge: eigenstaendiges, absolut zentriertes Element
   (Geschwister von .vig-approve-slide). Poppt mit leichtem Overshoot
   mittig auf, haelt kurz ("verharrt einen Tick") und fliegt danach in
   einer Bogenbahn nach rechts oben davon (siehe @keyframes
   vig-plane-pop-fly). Dunkler Kreis-Badge hinter dem weissen Flieger-Icon
   fuer Kontrast auf hellem Vignetten-Grund. */
.vig-plane-badge{
  position:absolute;
  top:50%;
  left:50%;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#241a14;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(10,8,6,0.35);
  opacity:0;
  pointer-events:none;
  z-index:6;
  transform:translate(-50%, -50%) scale(.4);
}
.vig-paper-plane{
  width:22px;
  height:22px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.approve-vignette.is-flying .vig-plane-badge{
  animation:vig-plane-pop-fly 1.15s cubic-bezier(.22,.85,.3,1) forwards;
}
@keyframes vig-plane-pop-fly{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(.4) rotate(-6deg); }
  18%{ opacity:1; transform:translate(-50%, -50%) scale(1.12) rotate(3deg); }
  30%{ opacity:1; transform:translate(-50%, -50%) scale(1) rotate(0deg); }
  46%{ opacity:1; transform:translate(-50%, -50%) scale(1) rotate(0deg); }
  72%{ opacity:1; transform:translate(calc(-50% + 70px), calc(-50% - 40px)) scale(.95) rotate(-8deg); }
  100%{ opacity:0; transform:translate(calc(-50% + 170px), calc(-50% - 140px)) scale(.8) rotate(-24deg); }
}
.approve-vignette.is-live .vig-plane-badge{ animation:none; opacity:0; }
@media (prefers-reduced-motion: reduce){
  .approve-vignette.is-flying .vig-plane-badge{ animation:none; opacity:0; }
}
/* Veroeffentlichter Beitrag: erscheint nach dem Papierflieger-Flug an der
   Stelle des grossen Slides (beide absolut positioniert bzw. zentriert,
   siehe .approve-vignette). Likes/Shares zaehlen per rAF in main.js hoch
   (animateCount()), Text/Zielwert kommen aus data-count-target im HTML. */
.vig-published-card{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s var(--ease);
}
.approve-vignette.is-live .vig-published-card{
  opacity:1;
  pointer-events:auto;
}
.vig-published-inner{ width:190px; margin:0 auto; }
.vig-published-top{ display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.vig-published-avatar{
  width:16px;
  height:16px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#4f8fd9,#8a63d2);
}
.vig-published-handle{ font-size:0.76rem; font-weight:700; color:var(--black); }
/* Thumbnail im Insta-Post-Format (4:5 Hochformat statt breitem Banner),
   mittig in der Karte, Titel als Overlay unten. */
.vig-published-thumb{
  position:relative;
  width:100%;
  height:238px;
  margin:0 0 8px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0.68) 100%),url("assets/img/cafe/slide-latte.jpg") center/cover no-repeat;
  display:flex;
  align-items:flex-end;
  padding:9px;
  overflow:hidden;
}
.vig-published-logo{
  position:absolute;
  top:7px;
  left:7px;
}
.vig-published-thumb-title{
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  line-height:1.3;
}
.vig-published-stats{ display:flex; align-items:center; justify-content:space-between; gap:0; margin-bottom:5px; }
.vig-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:0.78rem;
  font-weight:700;
  color:var(--gray-700);
  font-variant-numeric:tabular-nums;
}
.vig-stat-icon{ font-size:0.8rem; line-height:1; }
.vig-stat-heart .vig-stat-icon{ color:#e0447a; }
.vig-stat-share .vig-stat-icon{ color:var(--gray-500); }
.vig-stat-comment-icon{ width:13px; height:13px; flex-shrink:0; color:var(--gray-500); }

/* Vignette 0 (Schritt 1) — Verbinde dein KI-Modell: Sonnensystem/Orbit.
   postmakr-Flieger-Badge exakt im Zentrum, die 5 echten Modell-Logos (SVGs,
   s. assets/img/logos/ + CREDITS.md fuer Quellen) kreisen roh (kein
   Kreis-Chip, kein Ring) auf einer Kreisbahn um den Hub. Aufbau pro Logo
   (3 verschachtelte Ebenen, siehe .orbit-item/.orbit-fix/.orbit-spin):
   1) .orbit-item: statisches rotate(i*72deg) translateX(RADIUS) -> setzt den
      Punkt auf der Kreisbahn (der rotate-Anteil ist hier nur Mittel zum
      Zweck fuer die Positionierung).
   2) .orbit-fix: rotate(-i*72deg) hebt genau diesen Positionierungs-Rotate
      wieder auf + zentriert den Chip (translate(-50%,-50%)) -> der Chip
      steht bei t=0 aufrecht auf der Bahn.
   3) .orbit-spin: eigene Gegen-Animation (-360deg/24s), die exakt die
      Live-Rotation des äusseren .orbit (0->360deg/24s) neutralisiert, damit
      der Chip waehrend der gesamten Drehung aufrecht bleibt, obwohl er auf
      der Bahn mitläuft. */
.orbit-vignette{
  align-items:center;
  justify-content:center;
}
.orbit-stage{
  position:relative;
  width:256px;
  height:256px;
  margin:0 auto;
}
.orbit-hub{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a;
  border-radius:50%;
  box-shadow:0 6px 14px rgba(10,10,10,0.28);
}
.vig-hub-plane{
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.orbit{
  position:absolute;
  inset:0;
  animation:orbit-spin 24s linear infinite;
}
.orbit-item{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  transform:rotate(calc(72deg * var(--i))) translateX(96px);
}
.orbit-fix{
  position:absolute;
  top:0;
  left:0;
  transform:translate(-50%, -50%) rotate(calc(-72deg * var(--i)));
}
.orbit-spin{
  animation:orbit-spin-reverse 24s linear infinite;
}
.orbit-chip{
  position:relative;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orbit-chip img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}
@keyframes orbit-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes orbit-spin-reverse{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce){
  .orbit, .orbit-spin{ animation:none; }
}

/* Vignette 4 (neuer Schritt 4) — postmakr lernt mit: Mini-Analytics-Karte,
   Balkenreihe mit einem hervorgehobenen Balken (Farbverlauf). */
.vig-analytics-label{
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--gray-400);
}
.vig-bar-row{
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:64px;
}
.vig-bar{
  flex:1;
  height:var(--h, 40%);
  min-height:6px;
  border-radius:4px 4px 2px 2px;
  background:var(--gray-200);
}
.vig-bar-highlight{
  background:linear-gradient(180deg, #4f8fd9, #8a63d2);
}

/* ---------- Tablet: 3 Spalten mit knapperem Innenabstand ---------- */
@media (min-width: 561px) and (max-width: 900px){
  .step-col{ padding:32px 20px; }
  .step-col:first-child{ padding-left:0; }
  .step-col:last-child{ padding-right:0; }
  .step-vignette{ height:260px; }
  .orbit-stage{ width:200px; height:200px; }
  .orbit-hub{ width:36px; height:36px; }
  .vig-hub-plane{ width:17px; height:17px; }
  .orbit-item{ transform:rotate(calc(72deg * var(--i))) translateX(74px); }
  .orbit-chip{ width:36px; height:36px; }
  .orbit-chip img{ width:36px; height:36px; }
  .vig-prompt-bubble{ max-width:190px; padding:7px 10px; }
  .vig-prompt-text{ font-size:12px; }
  .vig-mini-slide{ width:92px; height:115px; padding:7px; }
  .vig-mini-headline{ font-size:0.67rem; }
  .vig-doodle-label{ font-size:7px; }
  .vig-kanne-icon{ width:12px; height:12px; }
  .vig-kanne-word{ font-size:8px; }
  .vig-published-inner{ width:160px; }
  .vig-published-thumb{ height:200px; }
  .vig-approve-slide{ width:160px; height:200px; }
  .vig-approve-slide-headline{ font-size:0.78rem; }
  .vig-plane-badge{ width:42px; height:42px; }
  .vig-plane-badge svg{ width:19px; height:19px; }
}

/* ---------- Mobile: 1 Spalte ---------- */
@media (max-width: 560px){
  .steps-columns{ grid-template-columns:1fr; }
  .step-col{ padding:32px 0; }
  .step-col:first-child{ padding-top:0; }
  .step-col:last-child{ padding-bottom:0; }
  .step-col:not(:first-child){
    border-left:none;
    border-top:1px solid var(--gray-200);
  }
  .step-vignette{ height:230px; }
  .orbit-stage{ width:180px; height:180px; }
  .orbit-hub{ width:32px; height:32px; }
  .vig-hub-plane{ width:15px; height:15px; }
  .orbit-item{ transform:rotate(calc(72deg * var(--i))) translateX(66px); }
  .orbit-chip{ width:32px; height:32px; }
  .orbit-chip img{ width:32px; height:32px; }
  .vig-prompt-bubble{ max-width:180px; padding:7px 10px; }
  .vig-prompt-text{ font-size:11.5px; }
  .vig-mini-slide{ width:78px; height:97px; padding:6px; }
  .vig-mini-headline{ font-size:0.62rem; }
  .vig-doodle-label{ font-size:6.4px; }
  .vig-kanne-icon{ width:11px; height:11px; }
  .vig-kanne-word{ font-size:7.5px; }
  .vig-published-inner{ width:140px; }
  .vig-published-thumb{ height:175px; }
  .vig-approve-slide{ width:140px; height:175px; }
  .vig-approve-slide-headline{ font-size:0.7rem; }
  .vig-plane-badge{ width:38px; height:38px; }
  .vig-plane-badge svg{ width:17px; height:17px; }
}

/* Marken-Disclaimer fuer die Modell-Logos in Schritt 1, unter den 3
   Schritten. */
.steps-trademark-note{
  margin-top:36px;
  text-align:center;
  font-size:0.72rem;
  color:var(--gray-400);
}

/* ---------- Block-Farben (Statement/Handys = dunkles Blau-Violett,
   Weltkarte = dunkles Gruen) ----------
   Ersetzt die alte .section-rounded-top/-bottom-Ueberlapp-Mechanik: jede
   Sektion ist jetzt ein eigenstaendiger .block (siehe oben), Farbe kommt
   ueber diese Modifier-Klassen statt ueber .section-dark. */
.section-violet{
  background-color:#0c0918;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(120% 90% at 20% 0%, #1a1533 0%, #120e24 45%, #0c0918 100%);
  background-size:26px 26px, auto;
  color:var(--white);
}
/* Weltkarten-Block: dunkler Nacht-Blau-Verlauf statt Gruen (Punkt 4,
   Taso-Feedback: "Hintergrund lala") - ehemals .section-green. */
.section-night{ background:radial-gradient(120% 90% at 25% 0%, #14203a 0%, #0e1628 50%, #0a0f1c 100%); color:var(--white); }

/* ---------- Big statement section ---------- */
.statement{
  display:flex;
  flex-direction:column;
  gap:64px;
}
.statement-lines{
  font-size:clamp(1.8rem, 4.6vw, 3.6rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.28;
  color:var(--gray-700);
}
.statement-seg{
  cursor:pointer;
  /* gray-400 statt gray-500: gegen den neuen, deutlich dunkleren
     Radialverlauf braucht die gedimmte Zeile etwas mehr Leuchtkraft,
     damit der Kontrast auch aussen (fast schwarz) sauber bleibt. */
  color:var(--gray-400);
  display:inline;
}
.statement-seg.is-active{ color:var(--white); }
/* Stagger: Segmente leuchten beim Scrollen ins Bild nacheinander auf (transition-
   delay nur auf opacity/transform, NICHT auf color - sonst wuerde main.js'
   Auto-Rotation/Hover-Hervorhebung dauerhaft verzoegert wirken). */
.statement-seg.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease) var(--seg-delay, 0s),
             transform .6s var(--ease) var(--seg-delay, 0s),
             color .45s var(--ease) 0s;
}
.statement-seg.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.statement-seg:nth-of-type(1){ --seg-delay:0s; }
.statement-seg:nth-of-type(2){ --seg-delay:.14s; }
.statement-seg:nth-of-type(3){ --seg-delay:.28s; }
.statement-seg:nth-of-type(4){ --seg-delay:.42s; }

/* Stage-Wrapper um die Handy-Gruppe: traegt den atmosphaerischen Glow und
   die schwebenden Mini-UI-Chips im Leerraum, ohne main.js' Karussell-Logik
   zu beruehren (die selektiert strikt .phone-mock, siehe main.js). */
.mock-stage{ position:relative; }
.mock-glow{
  position:absolute;
  left:50%; top:38%;
  transform:translate(-50%, -50%);
  width:62%;
  aspect-ratio:1 / 1;
  max-width:640px;
  background:radial-gradient(circle, rgba(138,99,210,0.32) 0%, rgba(79,143,217,0.16) 45%, transparent 72%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
/* Float-Chips: kein aufgeklebter weisser Sticker mehr, sondern dunkles
   Milchglas, das Teil des Karussell-Hintergrunds wirkt (Taso-Feedback:
   "sehen hingeklatscht aus"). Drift-Animation ist zweigeteilt: eine
   Transform-Schleife (Position/Rotation) plus eine unabhaengige, langsamere
   Opacity-Atmung - dadurch wirkt die Bewegung organischer als ein einzelner
   linearer Loop. */
.float-chip{
  display:none;
  position:absolute;
  z-index:2;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.75);
  font-size:0.78rem;
  font-weight:700;
  box-shadow:0 14px 30px -8px rgba(0,0,0,0.5);
  pointer-events:none;
  white-space:nowrap;
}
.float-chip svg{ width:15px; height:15px; flex-shrink:0; opacity:0.85; }
@media (min-width:900px){
  .float-chip{ display:inline-flex; }
  .chip-heart{
    left:6%; top:28%;
    animation:chipDriftA 8s ease-in-out infinite, chipBreathe 13s ease-in-out infinite;
  }
  .chip-comment{
    right:7%; top:42%;
    animation:chipDriftB 9.5s ease-in-out infinite, chipBreathe 15s ease-in-out infinite;
    animation-delay:.6s, 2s;
  }
  .chip-follow{
    right:10%; top:6%;
    animation:chipDriftC 7s ease-in-out infinite, chipBreathe 12s ease-in-out infinite;
    animation-delay:1.2s, 4s;
  }
  .chip-share{
    left:11%; bottom:8%; padding:10px;
    animation:chipDriftD 10.5s ease-in-out infinite, chipBreathe 14s ease-in-out infinite;
    animation-delay:.3s, 1s;
  }
}
@keyframes chipDriftA{
  0%,100%{ transform:translateY(-10px) rotate(-2deg); }
  50%{ transform:translateY(12px) rotate(1.5deg); }
}
@keyframes chipDriftB{
  0%,100%{ transform:translateY(9px) rotate(2deg); }
  50%{ transform:translateY(-11px) rotate(-1.5deg); }
}
@keyframes chipDriftC{
  0%,100%{ transform:translateY(-8px) rotate(-1.5deg); }
  50%{ transform:translateY(10px) rotate(2deg); }
}
@keyframes chipDriftD{
  0%,100%{ transform:translateY(11px) rotate(2deg); }
  50%{ transform:translateY(-12px) rotate(-1.8deg); }
}
@keyframes chipBreathe{
  0%,100%{ opacity:0.55; }
  50%{ opacity:0.85; }
}
/* Dezente Insta-Live-artige Mini-Herzen, die aus dem mittleren Handy
   aufsteigen und verblassen - hinter den Handys (z-index:0), also nur ein
   Hauch im Hintergrund, kein zusaetzliches Sticker-Element. */
.mini-heart{
  position:absolute;
  left:50%; bottom:36%;
  width:12px; height:12px;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:rgba(214,124,150,0.55);
  clip-path:path("M7 12S1 8.3 1 4.6C1 2.5 2.6 1 4.5 1c1.1 0 2.1.5 2.5 1.4C7.4 1.5 8.4 1 9.5 1 11.4 1 13 2.5 13 4.6 13 8.3 7 12 7 12Z");
  animation:miniHeartRise 8s ease-in infinite;
}
.mini-heart-2{ left:57%; animation-delay:4s; }
@keyframes miniHeartRise{
  0%{ opacity:0; transform:translate(-50%,0) scale(0.6); }
  8%{ opacity:0.5; }
  16%{ opacity:0.35; }
  34%{ opacity:0; transform:translate(-50%,-92px) scale(0.9); }
  100%{ opacity:0; transform:translate(-50%,-92px) scale(0.9); }
}
@media (max-width:899px){
  .mini-heart{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .chip-heart, .chip-comment, .chip-follow, .chip-share{ animation:none; opacity:0.7; }
  .mini-heart{ display:none; }
}

.mock-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  align-items:end;
}
/* .phone-mock traegt NUR noch Layout/Slots (Groesse, Position, Slot-Transforms,
   opacity, filter, z-index). Die sichtbaren Geraete-Styles (Farbverlauf,
   Rahmen, Radius, Padding, Schatten) liegen auf .phone-inner - siehe dort.
   Grund: sonst traegt .phone-mock den Rahmen, aber .phone-inner (der Slideshow-
   /Notch-Wrapper) die frontDrift-Neigung - dann kippt nur der Inhalt im
   stehenden Rahmen ("Handy neigt sich nicht, nur das Video"). Jetzt liegt
   das komplette sichtbare Geraet auf .phone-inner, also neigt sich alles
   zusammen. */
.phone-mock{
  position:relative;
  aspect-ratio:9/17;
  width:100%;
  max-width:220px;
  margin:0 auto;
  opacity:0.82;
  z-index:1;
  transform:scale(calc(0.94 * var(--basescale, 1))) rotate(var(--tilt, 0deg)) translateY(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.phone-mock:nth-child(1){ --tilt:-3deg; }
.phone-mock:nth-child(2){ --tilt:0deg; z-index:2; }
.phone-mock:nth-child(3){ --tilt:3deg; }
/* Groessere, realistischere Handys + mittleres Handy leicht vorn: nur ab
   Desktop-Breite, damit auf Tablet/Mobile (siehe Breakpoints unten) nichts
   ueberlaeuft. */
@media (min-width: 901px){
  .phone-mock{ max-width:240px; }
  .phone-mock:nth-child(2){ max-width:280px; --basescale:1.06; }
}
.phone-mock.is-active{
  opacity:1;
  transform:scale(var(--basescale, 1)) rotate(var(--tilt, 0deg)) translateY(0);
}
.phone-mock:hover{
  transform:scale(calc(1.03 * var(--basescale, 1))) rotate(var(--tilt, 0deg)) translateY(-6px);
}
/* Wrapper um den KOMPLETTEN Karteninhalt (Notch, Tasten, Screen) - traegt
   jetzt auch die sichtbaren Geraete-Styles (vorher auf .phone-mock) UND
   den langsamen Front-Drift (siehe @keyframes frontDrift weiter unten), damit
   sich das GANZE Geraet neigt statt nur der innere Screen/Video (Bug: "nur
   das Video neigt sich, nicht das Handy"). position:relative bleibt hier,
   damit Notch/Tasten (absolut positioniert) weiter relativ zu diesem
   Wrapper sitzen und ihre Position unveraendert bleibt. */
.phone-inner{
  position:relative;
  height:100%;
  width:100%;
  background:linear-gradient(180deg, #1c1c1c, #0a0a0a);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:36px;
  padding:10px;
  box-shadow:0 32px 72px -16px rgba(0,0,0,0.38), 0 12px 28px rgba(0,0,0,0.24);
  transition:box-shadow .4s var(--ease);
}
.phone-mock.is-active .phone-inner{
  box-shadow:0 44px 96px -18px rgba(0,0,0,0.46), 0 16px 36px rgba(0,0,0,0.28);
}
.phone-mock:hover .phone-inner{
  box-shadow:0 50px 108px -16px rgba(0,0,0,0.5), 0 18px 40px rgba(0,0,0,0.3);
}
.phone-notch{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:38%;
  max-width:76px;
  height:16px;
  background:#050505;
  border-radius:999px;
  z-index:3;
  pointer-events:none;
}
.phone-btn{
  position:absolute;
  width:2px;
  border-radius:2px;
  background:#3a3a3a;
  z-index:1;
  pointer-events:none;
}
.phone-btn-power{ right:-2px; top:104px; height:48px; }
.phone-btn-vol-up{ left:-2px; top:96px; height:30px; }
.phone-btn-vol-down{ left:-2px; top:134px; height:30px; }
.phone-screen{
  background:var(--gray-900);
  border-radius:28px;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
/* Subtiler Screen-Glanz: dezenter Lichtstreif ueber dem gesamten Screen-Inhalt,
   rein dekorativ (Punkt 5c). */
.phone-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background-image:linear-gradient(115deg, rgba(255,255,255,0.07), transparent 40%);
}
.phone-post-image{
  flex:1;
  position:relative;
  background:linear-gradient(135deg, var(--img-a, #333), var(--img-b, #111));
  background-size:cover;
  background-position:center;
}
/* Mittleres Handy: Slideshow statt statischem Poster (2 Videos, JS-gesteuerter
   Wechsel in main.js - siehe dort). Kein CSS-Keyframe-Loop mehr: der schnitt
   die Videos frueher mitten im Play ab, weil die Animation stur nach Zeit
   lief statt nach Video-Ende (Kundenfeedback "Video spielt nur einmal ab").
   Jetzt wechselt main.js den Track-Transform erst, wenn das aktive Video
   sein 'ended'-Event feuert, damit jedes Video immer vollstaendig durchlaeuft. */
.phone-slideshow{ overflow:hidden; }
.slideshow-track{
  position:absolute;
  inset:0;
  display:flex;
  width:200%;
  transform:translateX(0%);
  transition:transform .5s var(--ease);
}
.slideshow-track .slide{
  object-fit:contain;
  background:#000;
  width:50%;
  height:100%;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
}
@media (prefers-reduced-motion: reduce){
  .slideshow-track{ transition:none !important; transform:translateX(0) !important; }
}
.phone-post-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.phone-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:#E02020;
  color:#fff;
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:5px;
}
.phone-post-actions{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.phone-post-actions .action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#fff;
}
.phone-post-actions svg{ width:16px; height:16px; }
.phone-post-actions .count{
  font-size:0.55rem;
  font-weight:600;
  color:rgba(255,255,255,0.85);
}
.phone-post-meta{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.phone-post-meta .username{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.65rem;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  margin-bottom:2px;
}
.phone-post-meta .username .avatar{
  width:14px; height:14px;
  border-radius:50%;
  /* Farbakzent statt Rot/Grau: kleiner Gradient-Kreis (Punkt 7e) */
  background:linear-gradient(135deg,#4f8fd9,#8a63d2);
  flex-shrink:0;
}
.phone-post-meta .dot-row{ display:flex; gap:6px; }
.phone-post-meta .dot-row span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.25);
}
.phone-post-meta .line{
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,0.12);
}
.phone-post-meta .line.w60{ width:60%; }
.phone-post-meta .line.w40{ width:40%; }

/* Mobil-Verhalten der mock-row (ein Geraet, Crossfade) steht im
   Mobil-Pass am Dateiende - hier frueher versteckte display:none-Regeln
   entfernt, sie brachen die Rotation (aktives Handy war unsichtbar). */

/* ---------- Weltkarte (Dot-Matrix, per JS aus grobem Kontinent-Raster erzeugt) ---------- */
.worldmap-figure{
  position:relative;
  width:100%;
  max-width:920px;
  margin:56px auto 0;
}
/* Weicher blauer Glow hinter der Karte, damit der neue Nacht-Blau-Hintergrund
   nicht flach wirkt (Punkt 4, Taso-Feedback). */
.worldmap-figure::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:80%;
  aspect-ratio:16 / 9;
  max-width:760px;
  background:radial-gradient(ellipse, rgba(79,143,217,0.28) 0%, rgba(20,32,58,0.12) 55%, transparent 75%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
}
.worldmap-figure svg{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.map-dot{
  fill:rgba(255,255,255,0.4);
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .15s ease-out, opacity .15s ease-out;
}
.map-city-dot{ fill:#fff; }
.map-city-leader{ stroke:rgba(255,255,255,0.4); stroke-width:1; }
/* Farbakzent: nur die 5 pulsierenden Staedte bekommen Ring + Punkt in Blau
   statt Weiss (Punkt 7c) - alle anderen Stadt-Punkte bleiben monochrom. */
.map-city.is-ping .map-city-dot{ fill:#4f8fd9; }
.map-city-ping{
  fill:none;
  stroke:rgba(79,143,217,0.75);
  stroke-width:1.4;
  transform-box:fill-box;
  transform-origin:center;
  animation:mapPing 2.6s var(--ease) infinite;
}
.map-city-label{
  fill:rgba(255,255,255,0.85);
  font-family:var(--font);
  font-size:9px;
  font-weight:700;
  letter-spacing:0.02em;
}
@keyframes mapPing{
  0%{ opacity:.9; transform:scale(0.35); }
  70%{ opacity:0; transform:scale(2.8); }
  100%{ opacity:0; transform:scale(2.8); }
}
@media (prefers-reduced-motion: reduce){
  .map-city-ping{ animation:none; opacity:0; }
}

/* ---------- Features ---------- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--gray-200);
  margin-top:64px;
  border-radius:var(--radius-card);
  overflow:hidden;
}
.feature-card{
  background:var(--white);
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  z-index:0;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease);
}
.feature-card:hover{
  background:#fafafa;
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(10,10,10,0.1);
  z-index:1;
}
.feature-icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--gray-100);
  margin-bottom:6px;
  transition:transform .3s var(--ease);
}
.feature-card:hover .feature-icon{
  transform:scale(1.06);
}
.feature-icon svg{ width:20px; height:20px; }
/* Pastell-Toenung je Feature (Punkt 3, Taso-Feedback): eigene Tile-Farbe +
   passende Icon-Strichfarbe (Stroke direkt im SVG-Markup gesetzt). */
.feature-icon-radar{ background:#eef4fd; }
.feature-icon-viral{ background:#eafaf3; }
.feature-icon-formats{ background:#f3effc; }
.feature-icon-model{ background:#fdf1ea; }
.feature-icon-team{ background:#fdeef5; }
.feature-icon-performance{ background:#e9f8f7; }
.feature-card h3{ font-size:1.1rem; margin:0 0 4px; }
.feature-card p{ color:var(--gray-500); margin:0; font-size:0.95rem; }


/* ---------- "Erklaerung ansehen"-Link am Kartenfuss (Azure-Muster) ---------- */
.feature-link{
  margin-top:auto;
  padding-top:14px;
  font-size:.9rem;
  font-weight:600;
  color:#2f6fd0;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.feature-link::after{ content:"\2192"; transition:transform .25s var(--ease); }
.feature-link:hover::after{ transform:translateX(3px); }

/* ---------- Hero-Kachel links im Feature-Raster (Azure-Foundry-Muster) ---------- */
.features-grid{ grid-template-columns:1.05fr 1fr 1fr 1fr; }
.feature-hero{
  grid-row:1 / 3;
  padding:0;
  background:var(--gray-900);
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
/* Formen schweben langsam durch den Raum (nur Transform, GPU-guenstig) */
.fh-float{ animation:fh-drift var(--fd,9s) ease-in-out var(--fdelay,0s) infinite alternate; }
.fh-f1{ --fd:11s; --fx:10px; --fy:-14px; --fr:1.6deg; }
.fh-f2{ --fd:8s;  --fx:-12px; --fy:10px; --fr:-2deg; --fdelay:-3s; }
.fh-f3{ --fd:10s; --fx:8px;  --fy:-16px; --fr:1.2deg; --fdelay:-5s; }
.fh-f4{ --fd:7.5s; --fx:-9px; --fy:-9px; --fr:2.2deg; --fdelay:-2s; }
.fh-f5{ --fd:6.5s; --fx:6px;  --fy:12px; --fr:0deg; --fdelay:-4s; }
@keyframes fh-drift{
  from{ transform:translate(0,0) rotate(0deg); }
  to{ transform:translate(var(--fx,8px), var(--fy,-12px)) rotate(var(--fr,1deg)); }
}
@media (prefers-reduced-motion: reduce){ .fh-float{ animation:none; } }
.fh-art{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .6s var(--ease);
}
.feature-hero:hover .fh-art{ transform:scale(1.04); }
.fh-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
  transition:transform .6s var(--ease);
}
.feature-hero:hover .fh-art{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .6s var(--ease);
}
.feature-hero:hover .fh-art{ transform:scale(1.04); }
.fh-media{ transform:scale(1.06); }
.fh-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.88) 82%);
}
.fh-body{ position:relative; padding:30px 28px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.fh-kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.fh-body h3{ color:var(--white); font-size:1.5rem; margin:0; letter-spacing:-0.02em; }
.fh-body p{ color:rgba(255,255,255,.82); font-size:.95rem; margin:0 0 6px; }
@media (max-width: 900px){
  .feature-hero{ grid-column:1 / -1; grid-row:auto; min-height:340px; }
}

@media (max-width: 900px){
  .features-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .features-grid{ grid-template-columns:1fr; }
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:56px;
  align-items:stretch;
}
.price-card{
  position:relative;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-card);
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Farbakzent: kleines Gradient-Badge auf der Studio-Karte (Punkt 7d) */
.price-badge{
  position:absolute;
  z-index:2;
  top:-13px;
  right:24px;
  background-image:linear-gradient(90deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.02em;
  padding:5px 14px;
  border-radius:var(--radius-pill);
  box-shadow:0 8px 18px rgba(10,10,10,0.18);
}
.price-card:hover{
  transform:translateY(-6px);
  border-color:var(--black);
  box-shadow:0 24px 48px rgba(10,10,10,0.08);
}
.price-card.is-featured{
  position:relative;
  background:var(--black);
  color:var(--white);
  border-color:transparent;
}
/* Feiner 1px-Verlaufs-Ring auf der Studio-Karte (Punkt 5, Taso-Feedback) -
   ueber ein maskiertes ::before, dieselbe Technik wie der Button-Hover-Ring
   (siehe .btn-black::after weiter oben), damit die Karte ihre Form/Farbe
   behaelt und nur der subtile Rahmen dazukommt. */
.price-card.is-featured::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  z-index:0;
  border-radius:inherit;
  padding:1.5px;
  background-image:linear-gradient(135deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.85;
  pointer-events:none;
}
.price-card.is-featured .price-desc,
.price-card.is-featured .price-feature{ color:var(--gray-400); }
/* Farbiger Punkt vor dem Plannamen statt bunt-plakativer Flaechen (Punkt 5):
   Basic blau, Studio violett, Agentur gruen - je nach Kartenposition. */
.price-name{ font-size:1.1rem; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.price-name::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--gray-400);
}
.pricing-grid .price-card:nth-child(1) .price-name::before{ background:#4f8fd9; }
.pricing-grid .price-card:nth-child(2) .price-name::before{ background:#8a63d2; }
.pricing-grid .price-card:nth-child(3) .price-name::before{ background:#1f9d6b; }
.price-value{ font-size:2.4rem; font-weight:800; letter-spacing:-0.03em; }
.price-value span{ font-size:1rem; font-weight:600; color:var(--gray-500); }
.price-card.is-featured .price-value span{ color:var(--gray-400); }
.price-desc{ color:var(--gray-500); font-size:0.95rem; margin:0; }
.price-features{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.price-feature{ font-size:0.92rem; color:var(--gray-700); display:flex; align-items:flex-start; gap:8px; }
/* Haekchen grün statt textfarben (Punkt 5): per ::before statt Inline-"✓" im
   Markup, damit die Farbe unabhaengig vom Kartentext (auch auf der dunklen
   Studio-Karte) immer #1f9d6b bleibt. */
.price-feature::before{
  content:"✓";
  color:#1f9d6b;
  font-weight:700;
  flex-shrink:0;
}
.price-feature svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.price-card .btn{ margin-top:auto; }

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.pricing-note{
  margin-top:32px;
  font-size:0.82rem;
  color:var(--gray-400);
}

/* ---------- CTA strip (zwischen "So funktioniert's" und Statement) ---------- */
.cta-strip{
  background:var(--gray-100);
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  padding:32px 0;
}
.cta-strip-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  text-align:center;
}
.cta-strip-text{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--black);
  margin:0;
}
@media (max-width:600px){
  .cta-strip-inner{ flex-direction:column; gap:16px; }
}

/* ---------- Start-CTA (ehemals Kontakt/Formular, Punkt 2) ---------- */
.start-cta{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.start-cta .lede{
  margin-left:auto;
  margin-right:auto;
}
.start-cta-actions{
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.start-cta-actions .btn{
  padding:18px 40px;
  font-size:1.05rem;
}

/* ---------- Footer ---------- */
/* Liegt direkt auf dem schwarzen Seitenhintergrund, kein Block: kein Radius,
   keine negative Margin. Der alte Rundungs-Trick (Footer schiebt sich ueber
   die CTA-Karte) ist mit dem Block-Layout hinfaellig - der schwarze Grund
   zwischen den Bloecken sorgt selbst dafuer, dass nichts durchblitzt (Punkt
   4, "weisser Blitzer" behoben). */
.footer{
  background:var(--black);
  color:var(--gray-400);
  padding:56px 0 32px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:0.9rem;
  color:var(--gray-400);
  transition:color .2s;
}
.footer-links a:hover{ color:var(--white); }
.footer-middle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.footer-social{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
}
.footer-social a{
  color:var(--gray-400);
  transition:color .2s;
  display:inline-flex;
}
.footer-social a:hover{ color:var(--white); }
.footer-social svg{ width:18px; height:18px; }
.lang-switch{
  display:flex;
  gap:6px;
  font-size:0.85rem;
  font-weight:600;
}
.lang-switch a{ color:var(--gray-500); padding:2px 4px; }
.lang-switch a.active, .lang-switch a:hover{ color:var(--white); }
.footer-bottom{
  padding-top:24px;
  font-size:0.8rem;
  color:var(--gray-500);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- Login page ---------- */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:160px 24px 80px;
  background-color:var(--black);
  color:var(--white);
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.login-card{
  width:100%;
  max-width:440px;
  background:var(--gray-900);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-card);
  padding:48px 40px;
  text-align:center;
  box-shadow:0 30px 60px rgba(0,0,0,0.5);
}
.login-card .wordmark{
  justify-content:center;
  margin-bottom:28px;
  color:var(--gray-400);
}
.login-card h1{ font-size:1.5rem; margin-bottom:16px; }
.login-card p{ color:var(--gray-400); margin:0 0 28px; }
.login-card .btn{ width:100%; }

/* ---------- Legal pages ----------
   Bug (Taso-Screenshot: Text kaum lesbar): .legal-page haengt direkt in
   <main> auf dem durchgaengig schwarzen body-Hintergrund (siehe body{
   background:var(--black) } oben), aber Ueberschriften hatten keine eigene
   Farbe (erbten body { color:var(--black) } -> schwarz auf schwarz,
   unsichtbar) und Fliesstext stand auf --gray-700 (#3a3a3a), das gegen
   #0a0a0a nur ~1.9:1 Kontrast bringt. Fix: alle Text-Ebenen bekommen
   explizite, fuer dunklen Grund gedachte Farben mit ausreichendem Kontrast. */
.legal-page{
  padding:160px 0 100px;
  max-width:820px;
  margin:0 auto;
  color:#c9c9c9;
}
.legal-page h1{ font-size:2.2rem; color:var(--white); }
.legal-page h2{ font-size:1.3rem; margin-top:40px; color:var(--white); }
.legal-page p, .legal-page li{ color:#c9c9c9; }
.legal-page em{ color:#9a9a9a; }
.legal-page a{ text-decoration:underline; color:#c9c9c9; }
.legal-page a:hover{ color:var(--white); }

@media (max-width: 640px){
  .section{ padding:80px 0; }
  .hero-content{ padding:140px 0 64px; }
}


/* ---------- Iteration 4 (Taso-Review) ---------- */
/* Logo: weiss auf dunklen Flaechen, Flieger mit runden Ecken (Nav-Wortmarke
   ist bereits ueber .nav .wordmark weiter oben immer weiss) */
.on-dark .wordmark{ color:#f2f2f2; }
.wordmark .plane{ stroke-linejoin:round; stroke-linecap:round; }

/* Farbband statt grauem Marquee (Gradient wie besprochen) */
.marquee{
  background:linear-gradient(90deg, #2fbf8f, #4f8fd9, #8a63d2, #d95fa6);
  border:none;
}
.marquee-track span{ color:#fff; font-weight:600; opacity:1; }

/* Statement-Sektion passt auf eine Bildschirmseite */
section[data-statement]{ padding-top:64px; padding-bottom:36px; }
.statement-lines{ font-size:clamp(1.4rem, 3.2vw, 2.7rem); line-height:1.32; }
.mock-row{ gap:24px; margin-top:10px; }
@media (min-width: 901px){
  .phone-mock{ max-width:190px; }
  .phone-mock:nth-child(2){ max-width:220px; }
}


/* ---------- Dichte-Pass: jede Sektion passt auf einen Desktop-Screen ------ */
.section{ padding:84px 0; }
.pricing-grid{ margin-top:36px; }
.price-card{ padding:26px 24px; gap:12px; justify-content:flex-start; }
.price-card .price-value{ font-size:2.05rem; margin:2px 0 0; }
/* margin-top:auto (nicht ein fixer Wert!) - erst das schiebt den Button in
   jeder Karte exakt ans Ende, egal wie viele Feature-Zeilen davorstehen
   (Punkt 5, Taso-Feedback: "Buttons nicht auf einer Hoehe" - die Agentur-
   Karte hat weniger Punkte als Basic/Studio, ihr Button hing hoeher). Die
   Karten sind per .pricing-grid{ align-items:stretch } ohnehin gleich hoch. */
.price-card .btn{ margin-top:auto; }
#pricing .lede{ margin-bottom:0; }
.section .container > .eyebrow{ margin-bottom:10px; }
.features-grid{ margin-top:36px; }
.steps-columns{ margin-top:36px; }
.worldmap-figure{ margin-top:32px; }
@media (max-width:900px){ .section{ padding:64px 0; } }

/* Fix: runde Dunkel-Sektion schiebt sich ueber den CTA-Streifen */
.cta-strip{ padding-bottom: 128px; }


/* ---------- Handy-Karussell (Desktop, volle Bewegung) --------------------- */
@media (min-width: 901px){
  .mock-row.carousel{ position:relative; display:block; height:470px; }
  .mock-row.carousel .phone-mock{
    position:absolute; left:50%; top:0; margin:0;
    max-width:230px; width:230px;
    transition: transform .6s cubic-bezier(.22,.85,.3,1), opacity .6s ease, filter .6s ease;
  }
  .mock-row.carousel.fast .phone-mock{ transition-duration:.3s; }
  .mock-row.carousel .phone-mock.pos-front{
    transform:translateX(-50%) scale(1); opacity:1; z-index:3; filter:none;
  }
  /* langsamer Links-Drift, solange das Handy vorn steht (auf .phone-inner
     animiert, NICHT auf .phone-mock: dort laeuft schon die Slot-Transition
     ueber transform, eine zweite @keyframes-Animation auf derselben Property
     wuerde die kollidieren. .phone-inner umfasst Notch+Tasten+Screen, damit
     sich das ganze Geraet neigt statt nur der innere Screen/Video, siehe
     .phone-inner-Kommentar oben) */
  .mock-row.carousel .phone-mock.pos-front .phone-inner{
    animation: frontDrift 2.8s linear infinite alternate;
  }
  @keyframes frontDrift{
    0%{ transform:translateX(0) rotate(0deg); }
    100%{ transform:translateX(-7px) rotate(-1.6deg); }
  }
  .mock-row.carousel .phone-mock.pos-back{
    transform:translateX(-138%) scale(.72) rotate(-8deg);
    opacity:.4; z-index:1; filter:brightness(.65);
  }
  .mock-row.carousel .phone-mock.pos-right{
    transform:translateX(40%) scale(.78) rotate(6deg);
    opacity:.55; z-index:2; filter:brightness(.8);
  }
  .mock-row.carousel .phone-mock.pos-front:hover{ transform:translateX(-50%) scale(1.02); }
}

/* Editorial-Akzent: einzelne Woerter der Slide-Headlines in kursiver Serife. */
.vig-hl{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:500;
  font-size:1.08em;
  letter-spacing:0;
}

/* ---------- Aufploppende Mini-Beitraege auf der Weltkarte ---------- */
.worldmap-figure{ position:relative; }
.map-pops{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:5; }
.map-pop{
  position:absolute;
  width:108px;
  transform:translate(-50%, calc(-100% - 10px)) scale(.5);
  transform-origin:50% 100%;
  background:#fff;
  border-radius:11px;
  padding:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  opacity:0;
  animation:map-pop-in .45s var(--ease) forwards;
}
.map-pop-head{
  display:flex; align-items:center; gap:4px;
  padding:2px 2px 4px;
}
.map-pop-avatar{
  width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#4f8fd9,#d95fa6);
}
.map-pop-handle{
  font-size:8.5px; font-weight:700; color:var(--black);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.map-pop-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.72) 100%);
}
/* Gemeinsame Bausteine der Poster-Layouts */
.mpt{ position:absolute; inset:0; overflow:hidden; }
.mp-shade{ position:absolute; inset:0; background:rgba(6,8,14,.62); }
.mp-shade-soft{ background:rgba(6,8,14,.34); }
.mp-photo{ position:absolute; background-size:cover; background-position:center; }
.mp-dots{
  position:absolute; width:24px; height:18px;
  background-image:radial-gradient(#fff 1px, transparent 1.1px);
  background-size:6px 6px; opacity:.85; z-index:3;
}
.mp-dots-dark{ background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.1px); }
.mp-lines{
  position:absolute; inset:0; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.mp-ghost{
  position:absolute; right:-5%; bottom:2%; z-index:1;
  font-size:40px; font-weight:900; line-height:1; letter-spacing:-0.03em;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.24);
}
.mp-chev{ position:absolute; right:4%; bottom:6%; display:flex; flex-direction:column; gap:2px; z-index:3; }
.mp-chev i{
  width:11px; height:9px; background:#2f5fc4;
  clip-path:polygon(0 0,50% 55%,100% 0,100% 45%,50% 100%,0 45%);
}
/* Matchday: dunkle Buehne, Foto-Panel rechts, grosse Typo drueber */
.mpt-match .mp-photo{ left:36%; top:8%; right:12%; bottom:16%; z-index:1; }
.mm-big{
  position:absolute; left:6%; top:12%; z-index:2;
  font-size:17px; font-weight:900; line-height:.92; color:#fff;
  text-transform:uppercase; letter-spacing:-0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.mm-block{ position:absolute; left:6%; bottom:8%; z-index:2; background:#16255c; padding:4px; }
.mm-ko{ display:flex; font-size:7px; font-weight:800; line-height:1.2; }
.mm-ko b{ background:#2f5fc4; color:#fff; padding:1.5px 5px; }
.mm-ko span{ background:#fff; color:#0a0a0a; padding:1.5px 5px; }
/* Editorial-Panel: Foto oben, Papier-Panel unten mit Akzentlinie */
.mpt-panel .mpp-top{ inset:0 0 36% 0; }
.mpl-panel{ position:absolute; left:0; right:0; bottom:0; height:38%; background:#f3ede4; padding:6px 7px 0; }
.mpl-panel::before{ content:""; position:absolute; top:0; left:7px; width:24px; height:3px; background:#c96b3a; }
.mpl-t{ display:block; font-size:11.5px; font-weight:900; color:#171310; line-height:.95; text-transform:uppercase; letter-spacing:-0.01em; margin-top:3px; }
.mpl-s{ display:block; font-size:6px; font-weight:800; color:#8a6a4a; letter-spacing:.09em; text-transform:uppercase; margin-top:2.5px; }
/* Neon: grosse Typo mit schraegem Farbbalken */
.mpn-k{ position:absolute; top:7%; left:7%; font-size:5.8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); z-index:2; }
.mpn-big{ position:absolute; left:7%; bottom:24%; z-index:2; font-size:15.5px; font-weight:900; line-height:.94; color:#fff; text-transform:uppercase; letter-spacing:-0.015em; }
.mpn-bar{ position:absolute; left:7%; bottom:13%; width:42%; height:5px; background:#d95fa6; transform:skewX(-18deg); z-index:2; }
/* Split: Farb-Panel links, Foto rechts */
.mpt-split .mpp-right{ left:46%; right:0; top:0; bottom:0; }
.mps-side{
  position:absolute; left:0; top:0; bottom:0; width:46%; background:#5b3fa8;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px);
  padding:8px 6px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  box-shadow:4px 0 10px rgba(0,0,0,.3);
}
.mps-tint{ position:absolute; left:46%; right:0; top:0; bottom:0; z-index:1; background:linear-gradient(160deg, rgba(91,63,168,.42), rgba(10,10,14,.45)); }
.mps-hand{ right:7%; top:12%; transform:rotate(4deg); text-align:right; }
.mps-hand .mp-arr{ margin-left:auto; transform:scaleX(-1) rotate(20deg); }
.mps-t{ font-size:11.5px; font-weight:900; color:#fff; line-height:.95; text-transform:uppercase; letter-spacing:-0.01em; }
.mps-c{ font-size:6px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; background:#fff; color:#5b3fa8; padding:2px 5px; border-radius:2px; }
/* Cafe/Roesterei: warme Toene, feiner Rahmen, Serifen-Kursive als Akzent */
.mp-shade-warm{ background:linear-gradient(180deg, rgba(28,18,10,.34) 0%, rgba(24,14,7,.78) 100%); }
.mpk-frame{ position:absolute; inset:5px; border:1px solid rgba(243,237,228,.5); z-index:2; pointer-events:none; }
.mpk-kick{
  position:absolute; top:11%; left:11%; z-index:3;
  background:#f3ede4; color:#6b4a2e;
  font-size:5.6px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:2.5px 6px; border-radius:2px;
}
.mpk-h{
  position:absolute; left:11%; right:10%; bottom:22%; z-index:3;
  font-size:9.5px; font-weight:700; line-height:1.28; color:#f7f2ea;
  letter-spacing:0;
}
.mpk-h em, .mpc-t em{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic; font-weight:400; font-size:1.18em;
  color:#e8b871;
}
.mpk-sub{
  position:absolute; left:11%; bottom:11%; z-index:3;
  font-family:Georgia, "Times New Roman", serif; font-style:italic;
  font-size:6.4px; color:rgba(243,237,228,.75);
}
/* Day 1: Duotone-Portrait, Outline-Typo, Sticker-Badge, Marker-Zeile */
.mpd-photo{ position:absolute; inset:0; background-size:cover; background-position:center 20%; }
.mpd-duo{ position:absolute; inset:0; z-index:1; background:linear-gradient(150deg, rgba(31,55,140,.72) 0%, rgba(10,14,34,.5) 55%, rgba(217,95,166,.35) 100%); mix-blend-mode:multiply; }
.mpd-big{
  position:absolute; left:7%; top:8%; z-index:2;
  font-size:22px; font-weight:900; line-height:.88; color:#fff;
  text-transform:uppercase; letter-spacing:-0.02em;
  text-shadow:0 3px 10px rgba(0,0,0,.45);
}
.mpd-big i{ font-style:normal; color:transparent; -webkit-text-stroke:1.4px #fff; }
.mpd-badge{
  position:absolute; top:9%; right:7%; z-index:3;
  width:22px; height:22px; border-radius:50%;
  background:#ffd23e; color:#0a0a0a;
  font-size:6.8px; font-weight:900; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(12deg);
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.mpd-mark{
  position:absolute; left:7%; bottom:10%; z-index:2;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:8.6px; font-weight:700; color:#0a0a0a;
  background:linear-gradient(104deg, transparent 1%, #ffd23e 4%, #ffd23e 96%, transparent 99%);
  padding:2px 6px; transform:rotate(-3deg);
}
/* Tiefe-Utilities: Vignette, Handschrift, gezeichnete Pfeile */
.mp-vign{ position:absolute; inset:0; z-index:1; box-shadow:inset 0 0 34px rgba(0,0,0,.72); }
.mmo-a{
  position:absolute; z-index:3;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:7.6px; font-weight:700; color:#fff; line-height:1.15;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.map-pop svg.mp-arr{ display:block; width:24px; height:24px; margin-top:1px; }
.map-pop svg.mp-arr path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
/* Coffee Moments: Handschrift-Titel + verstreute Anmerkungen */
.mmo-t{
  position:absolute; top:7%; left:8%; z-index:3;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:13px; font-weight:700; color:#fff; line-height:1.05;
  transform:rotate(-4deg); text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.mmo-a1{ top:13%; right:6%; transform:rotate(5deg); text-align:right; }
.mmo-a1 .mp-arr{ margin-left:auto; transform:scaleX(-1) rotate(-12deg); }
.mmo-a2{ top:50%; left:5%; transform:rotate(-5deg); }
.mmo-a2 .mp-arr{ transform:rotate(-105deg); margin:1px 0 0 18px; }
.mmo-tag{
  position:absolute; bottom:7%; right:8%; z-index:3;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:6.8px; color:rgba(255,255,255,.85); transform:rotate(-2deg);
}
/* Quote: Zitat-Karte mit grosser Serifen-Anfuehrung */
.mpq-mark{ position:absolute; top:2%; left:7%; z-index:2; font-family:Georgia, serif; font-size:34px; color:#e8b871; line-height:1; }
.mpq-ghost{ position:absolute; right:-6%; bottom:-18%; z-index:1; font-family:Georgia, serif; font-size:88px; line-height:1; color:rgba(232,184,113,.16); }
.mpq-hand{ top:9%; right:8%; transform:rotate(7deg); color:#ffd9a0; }
.mpq-t{ position:absolute; left:9%; right:8%; top:36%; z-index:2; font-family:Georgia, serif; font-style:italic; font-size:10.5px; color:#f7f2ea; line-height:1.35; }
.mpq-n{ position:absolute; left:9%; bottom:10%; z-index:2; font-size:6.2px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,242,234,.7); }
/* Scoreboard */
.mp-shade-blue{ background:linear-gradient(180deg, rgba(13,23,64,.55) 0%, rgba(10,16,44,.88) 100%); }
.mpsc-k{ position:absolute; top:12%; left:9%; z-index:2; font-size:6.2px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.mpsc-n{ position:absolute; left:0; right:0; top:26%; z-index:2; text-align:center; font-size:26px; font-weight:900; color:#fff; letter-spacing:-0.02em; }
.mpsc-c{ position:absolute; left:9%; right:9%; bottom:11%; z-index:2; text-align:center; background:#2f5fc4; color:#fff; font-size:6.4px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 0; border-radius:2px; }
/* Reel: sichtbares Bild, Play-Button, gestrichelter Rahmen */
.mpr-frame{ position:absolute; inset:5px; border:1.4px dashed rgba(255,255,255,.75); z-index:2; border-radius:4px; }
.mpr-pill{ position:absolute; top:10%; left:10%; z-index:3; background:#fff; color:#0a0a0a; font-size:5.8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:2px 5px; border-radius:999px; }
.mpr-play{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:3; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.92); }
.mpr-play::after{ content:""; position:absolute; left:56%; top:50%; transform:translate(-50%,-50%); border-left:7px solid #0a0a0a; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }
.mpr-t{ position:absolute; left:0; right:0; bottom:12%; z-index:3; text-align:center; font-size:7.4px; font-weight:800; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
/* Statistik: grosse Kennzahl + Mini-Balken */
.mpst-n{ position:absolute; left:8%; top:22%; z-index:2; font-size:19px; font-weight:900; color:#7ee2b1; letter-spacing:-0.02em; }
.mpst-n i{ font-style:normal; font-size:.55em; vertical-align:.28em; }
.mpst-l{ position:absolute; left:8%; top:52%; z-index:2; font-size:6.6px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff; }
.mpst-bars{ position:absolute; right:9%; bottom:10%; z-index:2; display:flex; align-items:flex-end; gap:2.5px; }
.mpst-bars i{ width:5px; background:#7ee2b1; border-radius:1px; display:block; }
/* Countdown (mit Glow) */
.mpco-glow{ position:absolute; left:-14%; top:-6%; width:78%; height:64%; z-index:1; background:radial-gradient(circle, rgba(217,95,166,.5) 0%, transparent 62%); }
.mpco-k{ position:absolute; top:12%; left:9%; z-index:2; font-size:6.2px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.mpco-n{ position:absolute; left:9%; top:20%; z-index:2; font-size:30px; font-weight:900; color:#fff; line-height:1; }
.mpco-l{ position:absolute; left:32%; top:38%; z-index:2; font-size:7.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#d95fa6; }
.mpco-bars{ position:absolute; left:9%; right:9%; bottom:12%; z-index:2; display:flex; gap:3px; }
.mpco-bars i{ flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.25); display:block; }
.mpco-bars i.on{ background:#d95fa6; }

/* Event-Hochformat: zweifarbige Headline + Pill-Foto-Spalten */
.map-pop-tall{ width:104px; }
.map-pop-tall .map-pop-thumb{ aspect-ratio:3/4.4; }
.mpt-event{ display:flex; flex-direction:column; padding:8% 8% 7%; }
.mpt-event > *{ position:relative; z-index:2; }
.mpt-event .mp-shade, .mpt-event .mp-dots{ position:absolute; }
.mpe-big{ font-size:12.5px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:-0.01em; flex:0 0 auto; }
.mpe-big em{ font-style:normal; color:#ffd23e; margin-left:2px; }
.mpe-pills{ flex:1; display:flex; gap:4px; margin:7px 0 8px; min-height:0; }
.mpe-pill{ flex:1; border-radius:999px; overflow:hidden; background:#ffd23e; display:flex; flex-direction:column; }
.mpe-pimg{ flex:1; background-size:cover; background-position:center; }
.mpe-plab{ background:#5b3fa8; color:#fff; font-size:4.6px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; text-align:center; padding:3px 1px 4px; }
.mpe-date{ font-size:7.8px; font-weight:800; color:#ffd23e; margin-bottom:2px; }
.mpe-sub{ font-size:5.4px; font-weight:600; color:rgba(255,255,255,.8); padding-right:24px; }

/* Corner: Farbecke mit grosser Zahl */
.mpc-corner{ position:absolute; right:0; bottom:0; width:66%; z-index:2; background:#3c2718; padding:6px 7px; display:flex; align-items:center; gap:5px; }
.mpc-n{ font-family:Georgia, "Times New Roman", serif; font-size:17px; font-weight:700; color:#e8b871; line-height:1; }
.mpc-t{ font-size:6.4px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.05em; line-height:1.25; }
.map-pop::after{
  content:""; position:absolute; left:50%; bottom:-5px;
  width:10px; height:10px; transform:translateX(-50%) rotate(45deg);
  background:#fff; border-radius:2px;
}
.map-pop-thumb{
  display:block; width:100%; aspect-ratio:1/1;
  border-radius:7px; background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.map-pop-meta{
  display:flex; align-items:center; gap:8px;
  padding:4px 3px 2px; font-size:9.5px; font-weight:700; color:var(--black);
}
.map-pop-stat{ display:inline-flex; align-items:center; gap:3px; }
.map-pop-stat svg{ width:10px; height:10px; fill:#c9829a; }
.map-pop-stat-c{ color:var(--gray-500); }
.map-pop-stat-c svg{ fill:none; color:#7d9dc4; }
.map-pop.is-leaving{ animation:map-pop-out .4s var(--ease) forwards; }
@keyframes map-pop-in{
  0%{ opacity:0; transform:translate(-50%, calc(-100% - 2px)) scale(.5); }
  70%{ opacity:1; transform:translate(-50%, calc(-100% - 12px)) scale(1.05); }
  100%{ opacity:1; transform:translate(-50%, calc(-100% - 10px)) scale(1); }
}
@keyframes map-pop-out{
  from{ opacity:1; transform:translate(-50%, calc(-100% - 10px)) scale(1); }
  to{ opacity:0; transform:translate(-50%, calc(-100% - 20px)) scale(.6); }
}

/* ---------- Beta-Anfrage-Dialog ---------- */
.beta-dialog{
  border:none; border-radius:var(--radius-card);
  padding:34px 38px 30px; max-width:420px; width:calc(100% - 40px);
  background:var(--white); color:var(--black);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  position:fixed; inset:0; margin:auto; height:fit-content;
}
.beta-dialog::backdrop{ background:rgba(10,10,10,.55); backdrop-filter:blur(4px); }
.beta-dialog h3{ margin:0 0 10px; font-size:1.3rem; }
.beta-dialog p{ margin:0 0 10px; color:var(--gray-500); font-size:.95rem; }
.beta-dialog form{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.beta-dialog form[hidden]{ display:none; }
.beta-dialog label{
  display:flex; flex-direction:column; gap:5px;
  font-size:.82rem; font-weight:600; color:var(--gray-500);
}
.beta-dialog input, .beta-dialog textarea{
  font-family:var(--font); font-size:.95rem; color:var(--black);
  border:1.5px solid var(--gray-200); border-radius:10px;
  padding:10px 12px; background:var(--white); resize:vertical;
}
.beta-dialog input:focus, .beta-dialog textarea:focus{
  outline:none; border-color:var(--black);
}
.beta-form-fehler{ color:#c0392b !important; font-size:.85rem !important; margin:0 !important; }
.beta-danke p{ color:var(--black) !important; font-size:1rem !important; margin:16px 0 0 !important; }
.beta-dialog-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.beta-dialog .btn-ghost-light{ border:1.5px solid var(--gray-200); color:var(--black); }
.beta-dialog-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--gray-400); padding:4px;
}
.beta-dialog-close:hover{ color:var(--black); }


/* ==========================================================================
   Mobil-Pass (Taso-Feedback 2026-08-08)
   1. Hero: Videos als Querformat-Band oben, Text darunter auf Schwarz
      (statt brutalem Hochkant-Crop des 16:9-Materials).
   2. Burger-Menü: abgerundetes Panel im Design statt eckigem Kasten.
   3. Handy-Sektion: EIN grosses aktives Handy (Rotation läuft weiter),
      Follower/Kommentar/Like-Chips wieder sichtbar.
   4. Weltkarte: Mini-Beiträge kleiner, mehr Abstand zum Text darüber.
   ========================================================================== */

/* ---------- 1. Hero mobil ----------
   Taso-Feedback: Hero nimmt nur die obere Bildschirmhaelfte ein, darunter
   ist direkt die naechste Sektion sichtbar. Der Text bleibt AUF dem Video.
   Hoehe ~118vw statt Vollbild: das Video wird deutlich weniger seitlich
   beschnitten (Container-Seitenverhaeltnis naeher am Querformat), und die
   beiden CTAs stehen nebeneinander in einer Reihe. */
@media (max-width: 640px){
  .hero{
    min-height:0;
    height:114vw;
  }
  .hero-content{ padding:0 0 26px; }
  .hero-headline{ font-size:2.05rem; margin-bottom:12px; }
  .hero-sub{ font-size:0.95rem; margin-bottom:18px; }
  .hero-ctas{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
  }
  .hero-ctas .btn{
    padding:12px 18px;
    font-size:0.86rem;
    white-space:nowrap;
  }
}

/* ---------- 2. Burger-Dropdown im Design ---------- */
@media (max-width: 860px){
  .nav-links-desktop{
    top:86px;
    left:10px;
    right:10px;
    border-radius:22px;
    border:1px solid var(--gray-200);
    box-shadow:0 26px 60px rgba(0,0,0,0.2);
    padding:10px 20px 18px;
  }
}

/* ---------- 3. Handy-Sektion mobil: ein Gerät + Chips ---------- */
@media (max-width: 900px){
  .mock-row{ grid-template-columns:1fr; }
  /* Alle drei Handys liegen in derselben Grid-Zelle: das aktive mittig in
     voller Groesse, die beiden anderen ragen seitlich klein herein (Peek,
     Taso-Wunsch). Die pos-Klassen kommen aus main.js (setSlots). */
  .phone-mock{
    grid-area:1 / 1;
    max-width:250px;
    opacity:0.4;
    pointer-events:none;
    transform:scale(0.8) rotate(0deg);
    filter:brightness(0.75);
  }
  .phone-mock.pos-back{ transform:translateX(-62%) scale(0.78) rotate(0deg); }
  .phone-mock.pos-right{ transform:translateX(62%) scale(0.78) rotate(0deg); }
  .phone-mock.is-active{
    opacity:1;
    pointer-events:auto;
    z-index:3;
    transform:scale(1) rotate(0deg);
    filter:none;
  }
  /* Peek darf die Seite nicht horizontal sprengen: Sektion clippt selbst */
  [data-statement].block{ overflow:hidden; }
  /* Chips (Follower, Kommentare, Likes) wieder einblenden - statisch,
     kleiner, an den Rändern der Stage. */
  .float-chip{
    display:inline-flex;
    padding:7px 11px;
    font-size:0.7rem;
    animation:chipBreathe 13s ease-in-out infinite;
  }
  .chip-heart{ left:0; top:26%; }
  .chip-comment{ right:0; top:50%; animation-delay:2s; }
  .chip-follow{ right:1%; top:8%; animation-delay:1s; }
  .chip-share{ left:3%; top:66%; animation-delay:3s; }
}

/* ---------- 4. Weltkarten-Beiträge mobil ---------- */
@media (max-width: 640px){
  .worldmap-figure{ margin-top:80px; }
  /* zoom skaliert Karte samt px-Typo im Innern, ohne die vom Script
     gesetzten left/top-Anker zu verschieben. */
  .map-pop{ zoom:0.6; }
}


/* ---------- 5. Features mobil: kompakter, 2 Spalten ---------- */
@media (max-width: 600px){
  .features-grid{ grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
  .feature-hero{ grid-column:1 / -1; min-height:280px; }
  .feature-card{ padding:16px 14px; }
  .feature-card h3{ font-size:0.95rem; }
  .feature-card p{ font-size:0.82rem; }
  .feature-link{ font-size:0.82rem; margin-top:10px; }
  .feature-icon{ width:34px; height:34px; margin-bottom:10px; }
}

/* ---------- 6. Footer mobil: zentriert, Links in einer Reihe ---------- */
@media (max-width: 640px){
  .footer-top{
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    padding-bottom:22px;
  }
  .footer-links{ justify-content:center; gap:18px; }
  .footer-bottom{ text-align:center; }
}


/* ---------- 7. Farbband (Marquee) mobil schlanker ---------- */
@media (max-width: 640px){
  .marquee{ padding:9px 0; }
  .marquee-track span{ font-size:0.8rem; }
}

/* ---------- 8. Marken-Hinweis unter den Steps: Luft nach unten ---------- */
@media (max-width: 640px){
  .steps-trademark-note{ margin:22px 0 6px; }
  .steps-columns{ margin-bottom:8px; }
}

/* ---------- 9. Feature-Karten mobil: kompakte Zeilen statt Hochkant ---------- */
@media (max-width: 600px){
  /* Kein Grid-Gap: die Zeilen bilden EINEN zusammenhaengenden Kasten mit
     feinen Trennlinien (die grauen Balken dazwischen wirkten deplatziert). */
  .features-grid{ grid-template-columns:1fr; gap:0; }
  .feature-card{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    column-gap:14px;
    row-gap:2px;
    align-items:start;
    padding:16px;
  }
  .feature-card:not(.feature-hero){
    border-radius:0;
    border-bottom:1px solid var(--gray-200);
  }
  /* Hero-Karte und Zeilen bilden EINEN Block: kein grauer Spalt mehr */
  .feature-hero{ margin-bottom:0; border-radius:16px 16px 0 0; }
  .feature-hero + .feature-card{ border-radius:0; }
  .features-grid .feature-card:last-child{ border-radius:0 0 16px 16px; border-bottom:none; }
  .feature-card .feature-icon{ grid-row:1 / span 3; width:40px; height:40px; margin:0; }
  .feature-card h3{ font-size:0.98rem; margin:0; }
  .feature-card p{ font-size:0.85rem; }
  .feature-link{ margin-top:4px; font-size:0.82rem; }
  /* Grosse Studio-Karte bleibt ein Bild-Block in voller Breite */
  .feature-hero{ display:flex; min-height:300px; padding:24px 20px; }
}


/* ---------- 10. Intro-Sektion mobil: Absatz passt mit auf den ersten Blick ---------- */
@media (max-width: 640px){
  #was-ist-postmakr{ padding-top:36px; }
  #was-ist-postmakr h2{ font-size:1.5rem !important; margin-bottom:10px; }
  #was-ist-postmakr > .container > .lede{ font-size:0.95rem; line-height:1.55; margin-bottom:28px; }
}

/* ---------- 11. Orbit der KI-Modelle mobil: groessere Logos ---------- */
@media (max-width: 560px){
  .step-vignette.orbit-vignette{ height:250px; }
  .orbit-stage{ width:216px; height:216px; }
  .orbit-item{ transform:rotate(calc(72deg * var(--i))) translateX(82px); }
  .orbit-chip{ width:46px; height:46px; }
  .orbit-chip img{ width:46px; height:46px; }
  .orbit-hub{ width:40px; height:40px; }
  .vig-hub-plane{ width:18px; height:18px; }
}


/* ---------- 12. Start-CTA + Footer mobil kompakt ---------- */
@media (max-width: 640px){
  #kontakt{ padding:52px 0 44px; }
  #kontakt .lede{ font-size:0.95rem; line-height:1.55; margin-bottom:4px; }
  .start-cta-actions{
    margin-top:22px;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;
  }
  .start-cta-actions .btn{ padding:12px 18px; font-size:0.86rem; white-space:nowrap; }
  .footer{ padding:36px 0 20px; }
}


/* ---------- Hook-Zeile auf den Mockup-Beitraegen (Statement-Handys) ---------- */
.phone-hook{
  position:absolute;
  left:13px; right:54px; bottom:14px;
  color:#fff;
  font-weight:800;
  font-size:1.04rem;
  line-height:1.22;
  letter-spacing:-0.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
}
.phone-hook em{ font-style:normal; color:#ffd66e; }


/* ---------- Event-Poster-Look fuer den Startup-Mockup-Beitrag ----------
   Aufbau wie ein designtes Announcement: dunkler Verlauf ueber dem Foto,
   diagonale Farbflaeche, rote Chevrons, Punktraster, grosse Typo. */
.ph-poster{ position:absolute; inset:0; overflow:hidden; }
.ph-poster .pp-shade{
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.88) 62%, rgba(10,10,14,.96) 100%);
}
.ph-poster .pp-band{
  position:absolute;
  width:150%; height:34%;
  left:-20%; bottom:-10%;
  background:linear-gradient(90deg, #4f8fd9, #8a63d2);
  opacity:.22;
  transform:rotate(-18deg);
  filter:blur(22px);
}
.ph-poster .pp-arch{
  position:absolute;
  width:62%; aspect-ratio:1/1.4;
  right:-18%; top:6%;
  border-radius:50% 50% 0 0 / 36% 36% 0 0;
  background:linear-gradient(180deg, #e2574a, rgba(226,87,74,0));
  opacity:.42;
  filter:blur(6px);
}
.ph-poster .pp-chev{
  display:flex; gap:3px;
  margin-bottom:9px;
}
.ph-poster .pp-chev i{
  width:0; height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:11px solid #e2574a;
}
.ph-poster .pp-chev i:nth-child(2){ opacity:.6; }
.ph-poster .pp-chev i:nth-child(3){ opacity:.3; }
.ph-poster .pp-dots{
  position:absolute;
  right:10%; top:9%;
  width:44px; height:30px;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px);
  background-size:8px 8px;
}
.ph-poster .pp-type{
  position:absolute;
  left:13px; right:50px; bottom:16px;
}
.ph-poster .pp-kicker{
  display:block;
  font-size:.56rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
  margin-bottom:5px;
}
.ph-poster .pp-big{
  display:block;
  font-size:1.5rem; font-weight:800;
  line-height:1.04; letter-spacing:-0.02em;
  color:#fff;
}
.ph-poster .pp-big em{ font-style:normal; color:#e2574a; }
.ph-poster .pp-sub{
  display:block;
  margin-top:6px;
  font-size:.74rem; font-weight:600;
  color:rgba(255,255,255,.82);
}
.ph-poster .pp-sub b{ color:#fff; }
.ph-poster .pp-date{
  display:inline-block;
  margin-top:9px;
  padding:4px 11px;
  border-radius:999px;
  background:#e2574a;
  color:#fff;
  font-size:.62rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}


/* ---------- Kaffee-Doodle-Look fuer den lokale.marke-Mockup-Beitrag ----------
   Wie die Coffee-Moments-Poster der Weltkarte: warmer Verlauf, Vignette,
   Handschrift-Anmerkungen mit gezeichneten Pfeilen. */
.ph-coffee{ position:absolute; inset:0; overflow:hidden; }
.ph-coffee .pc-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,18,10,.18) 0%, rgba(24,14,7,.42) 55%, rgba(20,12,6,.82) 100%);
}
.ph-coffee .pc-vign{
  position:absolute; inset:0;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.ph-coffee .pc-note{
  position:absolute; z-index:3;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:.78rem; font-weight:700; color:#fff; line-height:1.15;
  text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.ph-coffee .pc-note svg{
  display:block; width:26px; height:26px; margin-top:2px;
}
.ph-coffee .pc-note svg path{
  fill:none; stroke:#fff; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Pfeile zeigen auf echte Bildstellen: Notiz 1 auf die Kannen-Tuelle
   (Bildmitte), Notiz 2 auf die Latte-Art in der Tasse (unten rechts). */
.ph-coffee .pc-note-1{ left:7%; top:15%; }
.ph-coffee .pc-note-1 svg{ margin-left:26px; transform:rotate(14deg); }
.ph-coffee .pc-note-2{ right:8%; top:44%; text-align:right; }
.ph-coffee .pc-note-2 svg{ margin-left:auto; margin-right:18px; transform:rotate(38deg); }
/* Tag + Hook stapeln in EINEM unteren Block, damit nichts kollidiert */
.ph-coffee .pc-bottom{
  position:absolute; z-index:3;
  left:13px; right:54px; bottom:16px;
}
.ph-coffee .pc-tag{
  display:block;
  margin-bottom:4px;
  font-family:"Bradley Hand","Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  font-size:.7rem; font-weight:700; color:rgba(255,255,255,.75);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.ph-coffee .pc-hook{
  display:block;
  color:#fff; font-weight:800;
  font-size:1.28rem; line-height:1.14; letter-spacing:-0.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.ph-coffee .pc-hook em{ font-style:normal; color:#ffd66e; }


/* ---------- 13. Intro-Sektion mobil: Orbit ohne Scroll-Reveal ----------
   Die Einblend-Animation liess unter dem Intro-Text eine leere weisse
   Flaeche stehen, bis man scrollt. Auf Mobil sind die Steps deshalb sofort
   sichtbar und ruecken naeher an den Text. */
@media (max-width: 640px){
  .steps-columns{ margin-top:4px; }
  .steps-columns .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .steps-columns .step-col:first-child{ padding-top:8px; }
  #was-ist-postmakr > .container > .lede{ margin-bottom:10px; }
}


/* ---------- 14. Kanne-Logo auf den Mini-Slides mobil kleiner ---------- */
@media (max-width: 640px){
  .vig-mini-logo{ top:6px; left:7px; }
  .vig-kanne-icon{ width:10px; height:10px; }
  .vig-kanne-word{ font-size:7px; letter-spacing:0.12em; }
}


/* ---------- 15. Mobil: Einflieg-Animationen komplett aus ----------
   Taso: die Reveal-Animationen stoeren beim Scrollen auf dem Handy.
   Alles ist sofort sichtbar, ohne Verschieben/Einblenden. */
@media (max-width: 900px){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}