/* =====================================================================
   GLOBALIST · UGC LANDINGPAGE
   1:1-Umsetzung des Figma-Designs "UGC-PAGE" (File 3lcqy0JKsp23SeaIyMOnY1).
   Wird NUR von /leistungen/ugc-agentur.html und /en/services/ugc-agency.html
   geladen. Alles ist unter .ugc genestet, damit nichts in andere Seiten leckt.

   MASSSYSTEM
   Das Figma-Artboard ist 1440px breit. --u ist so definiert, dass es bei
   exakt 1440px Viewport 1px ergibt und darunter proportional mitskaliert.
   Dadurch sitzt jede Figma-Koordinate ohne Umrechnung im Code:
   72px im Design  ->  calc(72 * var(--u)).
   Ab 1440px wird gedeckelt. Unterhalb von 991px greifen eigene Layouts,
   weil reines Runterskalieren die Typo unlesbar machen würde.

   ZUR !important-DICHTE
   globalist-theme.css erzwingt auf jedem h1-h5 der Site
     font-family / font-weight:900 / text-transform / letter-spacing /
     color / line-height   — alle mit !important.
   Besonders font-weight:900 ist hier fatal: Vanguard hat nur 600 und 700,
   der Browser synthetisiert daraus eine künstliche Fettung und zerstört
   damit die Kontur-Optik der Hero-Headline. Die Typo-Regeln unten müssen
   deshalb ebenfalls !important tragen UND über .ugc höher spezifisch sein
   (0,2,0 schlägt die 0,0,1 des Theme-Blocks).
   ===================================================================== */

.ugc{
  --u:min(1px, 0.0694444vw);

  --mint:#06ffba;        /* heller Akzent: CTAs, Headlines auf Dunkel */
  --mint-deep:#00d197;   /* Flächen-Mint: Section-Backgrounds, Borders */
  --ink:#1c2926;         /* Dunkelgrün-Schwarz */
  --paper:#ffffff;

  --gut:calc(141 * var(--u));   /* Seitenrand im Design */

  position:relative;
  display:block;
  background:var(--paper);
}

.ugc h1, .ugc h2, .ugc h3, .ugc h4, .ugc p, .ugc ul, .ugc li{
  margin:0;
  padding:0;
}
.ugc ul{ list-style:none; }

/* globalist-premium.css legt auf JEDES "section h1 / section h2" der Site
   einen Gradient-Text-Clip mit -webkit-text-fill-color:transparent. Damit
   wäre hier jede Headline unsichtbar, weil text-fill-color die color-Angabe
   bei der Glyphenfüllung aussticht. Für den UGC-Baum wird das komplett
   zurückgenommen; die zwei Headlines, die im Design wirklich einen
   Farbverlauf tragen (Case-Titel, Community), schalten ihn weiter unten
   gezielt wieder an. */
.ugc section h1, .ugc section h2, .ugc section h3, .ugc section h4{
  background:none;
  -webkit-background-clip:border-box;
          background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-wrap:wrap;
}
.ugc section{ position:relative; }
.ugc img{ display:block; }

/* globalist-premium.css zieht über "section + section::before" zwischen je
   zwei aufeinanderfolgenden Sections eine Mint-Haarlinie. Im Figma stoßen
   die Flächen hart aneinander, die Linie muss hier also weg. */
.ugc section + section::before{ content:none; }

/* globalist-premium.js hängt an jedes section h1/h2/h3 und jedes section img
   ein Scroll-Reveal (.js-reveal = opacity 0 + translateY, eingeblendet per
   IntersectionObserver). Für den Rest der Seite bleibt das so, weil es dem
   Verhalten der übrigen Site entspricht. Im Hero muss es aber raus: die H1
   ist dort das LCP-Element und darf nicht erst eingeblendet werden. */
.ugc-hero .js-reveal{ opacity:1 !important; transform:none !important; }

/* Auch die Bilder in den Framework-Sections sollen ohne Einblenden stehen.
   Die Ueberschriften dort behalten das Reveal, nur die Motive nicht. */
.ugc-fw-card img.js-reveal,
.ugc-fw-card .js-reveal,
.ugc-case-card img.js-reveal,
.ugc-case-card .js-reveal{ opacity:1 !important; transform:none !important; }

/* ——— Typo-Utilities ——— */
.ugc .u-display{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-style:normal !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  color:inherit !important;
}
.ugc .u-display--demi{ font-weight:600 !important; }
.ugc .u-body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight:500 !important;
  font-style:normal !important;
  text-transform:none !important;
  line-height:1.2 !important;
  letter-spacing:normal !important;
  color:inherit !important;
}
/* Das Theme setzt global p{color:rgba(255,255,255,.72)} für dunkle Sections.
   Diese Direktregel sticht die Vererbung aus, wodurch Absätze auf den hellen
   Sections (Intro, 5 Phasen) weiß auf weiß und damit unsichtbar wären.
   Innerhalb der Typo-Container kommt die Farbe deshalb erzwungen vom Container. */
.ugc .u-body p,
.ugc .u-body li,
.ugc .u-body span{
  color:inherit !important;
  -webkit-text-fill-color:currentColor;
  font-family:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}

/* Innerer Container: 1158px Inhalt bei 1440px Artboard. */
.ugc-wrap{
  position:relative;
  max-width:calc(1158 * var(--u));
  margin-inline:auto;
  width:calc(100% - 2 * var(--gut));
}

/* =====================================================================
   1 · HERO   (Figma 10:632 · 1440x853)
   ===================================================================== */

/* Die globale .gl-nav ist sticky und 72px hoch. Der Hero wird um genau
   diese Höhe hochgezogen, damit das Video wie im Design bis unter die
   Navbar läuft, ohne dass das Sticky-Verhalten kaputtgeht. */
.ugc-hero{
  /* 73 statt 72: .gl-nav traegt zusaetzlich einen 1px transparenten
     border-bottom, der im Fluss mitzaehlt. */
  margin-top:-73px;
  /* 90% der Bildschirmhoehe. svh statt vh, damit auf Mobile die eingeblendete
     Browserleiste nicht dazufuehrt, dass unten etwas abgeschnitten wird.
     vh davor als Fallback fuer Browser ohne svh. */
  min-height:90vh;
  min-height:90svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#000 !important;
  isolation:isolate;
}
.ugc-hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.ugc-hero-media video,
.ugc-hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}

/* Figma 10:637 — Schwarzverlauf nach oben, trägt die Lesbarkeit der Copy. */
/* Durchgehende Abdunklung ueber dem gesamten Video. Hebt die Typo an und
   kaschiert nebenbei Kompressionsartefakte im bewegten Bild. */
.ugc-hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.34);
  pointer-events:none;
}
/* Kurzer Verlauf am oberen Rand. Die globale Navbar ist transparent und
   steht mit weisser Schrift ueber dem Video — auf hellen Stellen wird sie
   sonst unleserlich. Reicht nur bis knapp unter die Navbar. */
.ugc-hero-media::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:calc(190 * var(--u));
  min-height:150px;
  z-index:1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.55)  0%,
    rgba(0,0,0,.44) 18%,
    rgba(0,0,0,.33) 35%,
    rgba(0,0,0,.22) 52%,
    rgba(0,0,0,.13) 68%,
    rgba(0,0,0,.06) 82%,
    rgba(0,0,0,.02) 92%,
    rgba(0,0,0,0)  100%);
  pointer-events:none;
}
/* Dithering gegen Streifenbildung.
   Ein Verlauf von Helligkeit ~90 auf 0 hat ueber 500px nur rund 90 Stufen
   zur Verfuegung, also alle fuenf bis sechs Pixel eine Kante — die sieht
   man als Streifen. Das feine Rauschen darueber verteilt die Uebergaenge
   pro Pixel leicht unterschiedlich und loest die Kanten auf. Sehr geringe
   Deckkraft, im Bild nicht als Rauschen wahrnehmbar. */
.ugc-hero-scrim::after,
.ugc-fullw-scrim::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../images/ugc/noise.png');
  background-repeat:repeat;
  background-size:64px 64px;
  opacity:.05;
  pointer-events:none;
}

.ugc-hero-scrim{
  position:absolute;
  left:0; right:0; bottom:0;
  height:54%;
  min-height:320px;
  z-index:1;
  /* Vielstufiger Verlauf statt zweier Stopps. Ein linearer Verlauf mit
     Vollton bis 50% und danach hartem Ausblenden zeigt genau an dieser
     Kante einen sichtbaren Knick, und in sRGB zusaetzlich Streifen. Die
     Stuetzpunkte hier folgen einer weichen Kurve, dadurch laeuft das
     Schwarz stufenlos aus. */
  background:linear-gradient(to top,
    rgba(0,0,0,1)     0%,
    rgba(0,0,0,.985)  8%,
    rgba(0,0,0,.95)  17%,
    rgba(0,0,0,.885) 25%,
    rgba(0,0,0,.80)  33%,
    rgba(0,0,0,.70)  41%,
    rgba(0,0,0,.588) 49%,
    rgba(0,0,0,.47)  57%,
    rgba(0,0,0,.355) 64%,
    rgba(0,0,0,.25)  71%,
    rgba(0,0,0,.16)  78%,
    rgba(0,0,0,.09)  85%,
    rgba(0,0,0,.04)  91%,
    rgba(0,0,0,.012) 96%,
    rgba(0,0,0,0)   100%);
  pointer-events:none;
}
.ugc-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:calc(50 * var(--u));
}
.ugc-hero-copy{
  display:flex;
  flex-direction:column;
  gap:calc(24 * var(--u));
  align-items:flex-start;
}

/* Der "Sticker"-Look: weisse Schrift auf zusammenlaufender Mint-Flaeche.

   Frueher als Dilatation aus 16 versetzten text-shadow-Kopien gebaut. Das
   liess kleine Fehlstellen an den Raendern und die Kontur folgte jeder
   Glyphenkante, wodurch die Flaeche eckig und wellig wirkte.

   Jetzt in zwei Schritten auf einer eigenen Ebene. Die traegt denselben
   Text als echtes, per aria-hidden ausgeblendetes <span> — nicht als
   ::before mit attr(), weil Screenreader generierten Inhalt in vielen
   Kombinationen mitlesen und die Headline dann doppelt ansagen:
     1. aufblasen   -webkit-text-stroke, waechst um die halbe Strichbreite
     2. weichzeichnen + hart schneiden   SVG-Filter #ugc-goo
   Der Alpha-Schwellwert macht aus dem weichen Verlauf wieder eine harte
   Kante, rundet dabei aber alle Ecken und fuellt die Einbuchtungen
   zwischen den Buchstaben. Die weisse Schrift darueber bleibt unberuehrt
   und damit gestochen scharf.

   Die Ebene liegt per z-index:-1 hinter dem Text. Das h1 bekommt dafuer
   einen eigenen Stacking-Context (position + z-index:0), sonst rutschte
   sie hinter Video und Scrim der Section. */
.ugc-goo-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.ugc .ugc-hero-title{
  --r:calc(11 * var(--u));
  position:relative;
  z-index:0;
  font-size:calc(104.246 * var(--u));
  letter-spacing:calc(-2.0849 * var(--u)) !important;
  color:#fff !important;
  max-width:calc(912 * var(--u));
}
.ugc .ugc-hero-goo{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:-1;
  color:var(--mint);
  -webkit-text-fill-color:var(--mint);
  -webkit-text-stroke:calc(var(--r) * 2) var(--mint);
  filter:url(#ugc-goo);
  pointer-events:none;
  user-select:none;
}
.ugc .ugc-hero-lead{
  font-size:calc(18.015 * var(--u));
  letter-spacing:calc(-0.3603 * var(--u)) !important;
  color:#fff !important;
  max-width:calc(856.639 * var(--u));
  margin-top:calc(23 * var(--u));
}
.ugc-hero-actions{
  display:flex;
  gap:calc(24 * var(--u));
  flex-wrap:wrap;
}

/* =====================================================================
   BUTTONS   (Figma 10:664 / 10:666 — 273x45, radius 200)
   ===================================================================== */
.ugc .ugc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(273 * var(--u));
  min-width:200px;
  height:calc(45 * var(--u));
  min-height:42px;
  border-radius:200px;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  font-size:calc(18.015 * var(--u));
  letter-spacing:calc(-0.3603 * var(--u)) !important;
  line-height:1.2 !important;
  text-transform:none !important;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .25s cubic-bezier(0.16,1,0.3,1),
             background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ugc .ugc-btn:hover{ transform:translateY(-2px); }
.ugc .ugc-btn--solid{
  background:var(--mint);
  color:var(--ink) !important;
  border:1px solid var(--mint);
}
.ugc .ugc-btn--solid:hover{ background:#fff; border-color:#fff; }
.ugc .ugc-btn--ghost{
  background:transparent;
  color:#fff !important;
  border:1px solid #00d197;
}
.ugc .ugc-btn--ghost:hover{ border-color:var(--mint); color:var(--mint) !important; }

/* =====================================================================
   2 · BUZZWORDS-MARQUEE   (Figma 10:668 · 1440x55)
   ===================================================================== */
.ugc-buzz{
  background:var(--mint-deep) !important;
  height:calc(55 * var(--u));
  min-height:44px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.ugc-buzz-viewport{
  display:flex;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ugc-buzz-track{
  display:flex;
  align-items:center;
  gap:calc(35 * var(--u));
  padding-right:calc(35 * var(--u));
  flex:0 0 auto;
  animation:ugc-buzz-scroll 38s linear infinite;
  will-change:transform;
}
.ugc .ugc-buzz-track span{
  font-size:calc(24.528 * var(--u));
  letter-spacing:calc(-0.4906 * var(--u)) !important;
  color:#fff !important;
  white-space:nowrap;
}
@keyframes ugc-buzz-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
.ugc-buzz:hover .ugc-buzz-track{ animation-play-state:paused; }

/* =====================================================================
   3 · INTRO + LOGO-GRID   (Figma 10:678 · 1440x750)
   ===================================================================== */
.ugc-intro{
  background:var(--paper) !important;
  padding-block:calc(103 * var(--u)) calc(154 * var(--u));
}
.ugc-intro-grid{
  display:grid;
  grid-template-columns:calc(548.876 * var(--u)) 1fr;
  column-gap:calc(55 * var(--u));
  align-items:start;
}
.ugc .ugc-intro-title{
  font-size:calc(72 * var(--u));
  letter-spacing:calc(-1.44 * var(--u)) !important;
  color:var(--ink) !important;
  max-width:calc(555 * var(--u));
}
.ugc .ugc-intro-title--accent{
  color:var(--mint-deep) !important;
  margin-top:calc(79 * var(--u));
  max-width:calc(547 * var(--u));
}
.ugc .ugc-intro-body{
  font-size:calc(18.015 * var(--u));
  letter-spacing:calc(-0.3603 * var(--u)) !important;
  color:var(--ink) !important;
  max-width:calc(504 * var(--u));
  margin-top:calc(48 * var(--u));
  display:flex;
  flex-direction:column;
  gap:1.2em;
}

/* --- Pill-Bento mit Kundenlogos (Figma 18:1521, 548.876x493) ---
   Prozentual im Verhältnis 548.876x493 positioniert, dadurch skaliert
   das Muster verzerrungsfrei auf jeder Breite. */
.ugc-pills{
  position:relative;
  width:100%;
  max-width:calc(548.876 * var(--u));
  aspect-ratio:548.876 / 493;
}
.ugc-pill{
  position:absolute;
  border-radius:999px;
  border:max(1px, calc(1.142 * var(--u))) solid var(--mint-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ugc-pill--fill{ background:var(--mint-deep); }
.ugc-pill--ink{ background:var(--ink); border-color:var(--ink); }
.ugc-pill--ink-line{ background:transparent; border-color:var(--ink); }
.ugc-pill-logo{ display:block; height:auto; object-fit:contain; }

/* Positionen 1:1 aus Figma, umgerechnet auf Prozent des 548.876x493-Rasters */
.ugc-pill[data-p="1"] { left:30.540%; top:0;       width:18.559%; height:20.663%; }
.ugc-pill[data-p="2"] { left:10.180%; top:22.668%; width:28.739%; height:9.328%;  }
.ugc-pill[data-p="3"] { left:40.720%; top:22.668%; width:19.101%; height:9.328%;  }
.ugc-pill[data-p="4"] { left:50.900%; top:11.334%; width:28.739%; height:9.329%;  }
.ugc-pill[data-p="5"] { left:61.080%; top:22.668%; width:8.379%;  height:9.328%;  }
.ugc-pill[data-p="6"] { left:71.260%; top:22.668%; width:18.559%; height:9.328%;  }
.ugc-pill[data-p="7"] { left:10.180%; top:34.002%; width:8.379%;  height:9.328%;  }
.ugc-pill[data-p="8"] { left:20.360%; top:34.002%; width:28.739%; height:9.328%;  }
.ugc-pill[data-p="9"] { left:50.900%; top:34.002%; width:18.559%; height:20.663%; }
.ugc-pill[data-p="10"]{ left:71.260%; top:34.002%; width:24.310%; height:9.328%;  }
.ugc-pill[data-p="11"]{ left:0;       top:45.336%; width:38.919%; height:9.328%;  }
.ugc-pill[data-p="12"]{ left:40.720%; top:45.336%; width:8.379%;  height:9.328%;  }
.ugc-pill[data-p="13"]{ left:71.260%; top:45.336%; width:28.739%; height:9.328%;  }
.ugc-pill[data-p="14"]{ left:20.360%; top:56.670%; width:8.379%;  height:9.328%;  }
.ugc-pill[data-p="15"]{ left:30.540%; top:56.670%; width:18.559%; height:20.663%; }
.ugc-pill[data-p="16"]{ left:50.900%; top:56.670%; width:38.919%; height:9.328%;  }
.ugc-pill[data-p="17"]{ left:10.180%; top:68.004%; width:18.559%; height:9.328%;  }
.ugc-pill[data-p="18"]{ left:50.900%; top:68.004%; width:8.379%;  height:9.328%;  }
.ugc-pill[data-p="19"]{ left:61.080%; top:68.004%; width:38.919%; height:9.328%;  }
.ugc-pill[data-p="20"]{ left:20.360%; top:79.338%; width:28.739%; height:9.328%;  }
.ugc-pill[data-p="21"]{ left:50.900%; top:79.338%; width:18.559%; height:9.328%;  }
.ugc-pill[data-p="22"]{ left:40.720%; top:90.672%; width:8.379%;  height:9.328%;  }

/* Logo-Größen innerhalb ihrer Pille, aus Figma abgeleitet */
.ugc-pill--superpop .ugc-pill-logo{ width:72.6%; }
.ugc-pill--zalando  .ugc-pill-logo{ width:69.1%; }
.ugc-pill--marzocco .ugc-pill-logo{ width:71.4%; }
.ugc-pill--no       .ugc-pill-logo{ width:57.9%; }
.ugc-pill--fenster  .ugc-pill-logo{ width:58.1%; }
/* Huel liefert seine Pillenfläche im SVG selbst mit */
.ugc-pill--huel{ border:0; background:transparent; }
.ugc-pill--huel img{ width:100%; height:100%; object-fit:fill; }

/* =====================================================================
   4 · FULL-W VIDEO   (Figma 10:682 · 1440x637)
   ===================================================================== */
.ugc-fullw{
  background:#000 !important;
  /* 70% der Bildschirmhoehe statt der festen Figma-Hoehe von 637u.
     svh wie beim Hero, damit die eingeblendete Browserleiste auf Mobile
     unten nichts abschneidet; vh davor als Fallback. min-height faengt
     sehr flache Fenster ab, in denen 70% zu wenig fuer den Text waeren. */
  height:70vh;
  height:70svh;
  min-height:340px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.ugc-fullw-media{ position:absolute; inset:0; z-index:0; }
.ugc-fullw-media img,
.ugc-fullw-media video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.ugc-fullw-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.30);
  pointer-events:none;
}
.ugc-fullw-scrim{
  position:absolute;
  left:0; right:0; bottom:0;
  height:52%;
  min-height:230px;
  z-index:1;
  /* Vielstufiger Verlauf statt zweier Stopps. Ein linearer Verlauf mit
     Vollton bis 50% und danach hartem Ausblenden zeigt genau an dieser
     Kante einen sichtbaren Knick, und in sRGB zusaetzlich Streifen. Die
     Stuetzpunkte hier folgen einer weichen Kurve, dadurch laeuft das
     Schwarz stufenlos aus. */
  background:linear-gradient(to top,
    rgba(0,0,0,1)     0%,
    rgba(0,0,0,.985)  8%,
    rgba(0,0,0,.95)  17%,
    rgba(0,0,0,.885) 25%,
    rgba(0,0,0,.80)  33%,
    rgba(0,0,0,.70)  41%,
    rgba(0,0,0,.588) 49%,
    rgba(0,0,0,.47)  57%,
    rgba(0,0,0,.355) 64%,
    rgba(0,0,0,.25)  71%,
    rgba(0,0,0,.16)  78%,
    rgba(0,0,0,.09)  85%,
    rgba(0,0,0,.04)  91%,
    rgba(0,0,0,.012) 96%,
    rgba(0,0,0,0)   100%);
  pointer-events:none;
}
.ugc-fullw-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:calc(36 * var(--u));
  text-align:right;
}
.ugc .ugc-fullw-title{
  font-size:calc(72 * var(--u));
  letter-spacing:calc(-1.44 * var(--u)) !important;
  color:#fff !important;
  margin-left:auto;
}
.ugc .ugc-fullw-sub{
  font-size:calc(18.015 * var(--u));
  letter-spacing:calc(-0.3603 * var(--u)) !important;
  color:#fff !important;
  margin-top:calc(28 * var(--u));
  margin-left:auto;
  max-width:calc(674 * var(--u));
}

/* =====================================================================
   5-8 · FRAMEWORK 1-4   (Figma 10:687 / 10:694 / 10:702 / 10:710)
   Je 1440x637, Background #00d197, Bild-Card 320x569 radius 20,
   Riesenziffer bei 10% Deckkraft, Seiten alternieren.
   ===================================================================== */
.ugc-fw{
  background:var(--mint-deep) !important;
  height:calc(637 * var(--u));
  min-height:420px;
  overflow:hidden;
}
.ugc-fw-inner{
  position:relative;
  height:100%;
  max-width:calc(1158 * var(--u));
  margin-inline:auto;
  width:calc(100% - 2 * var(--gut));
}

/* Die Ziffer läuft bewusst über die Container-Ränder hinaus, deshalb
   sitzt das Clipping auf der Section, nicht auf dem Inner-Container. */
.ugc .ugc-fw-num{
  /* Tabellenziffern. Vanguard setzt Ziffern sonst proportional, und die
     Breiten liegen 66% auseinander (die 1 misst 316 Einheiten, die 4 dann
     525). Beim Hochdrehen sprang die rechtsbuendige Zahl dadurch sichtbar
     hin und her. Mit tnum haben alle Ziffern dieselbe Laufweite. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  position:absolute;
  top:calc(99 * var(--u));
  font-size:calc(597.913 * var(--u));
  letter-spacing:calc(-11.9583 * var(--u)) !important;
  line-height:1 !important;
  color:#fff !important;
  opacity:.10;
  pointer-events:none;
  user-select:none;
}
.ugc-fw-card{
  position:absolute;
  top:calc(34 * var(--u));
  width:calc(320 * var(--u));
  height:calc(569 * var(--u));
  border-radius:calc(20 * var(--u));
  overflow:hidden;
  background:#fff;
}
.ugc-fw-card img,
.ugc-fw-card video{ width:100%; height:100%; object-fit:cover; }
.ugc-fw-text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:calc(456 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(22 * var(--u));
}
.ugc .ugc-fw-title{
  font-size:calc(72 * var(--u));
  letter-spacing:calc(-1.44 * var(--u)) !important;
  color:#fff !important;
}
.ugc .ugc-fw-body{
  font-size:calc(18.015 * var(--u));
  letter-spacing:calc(-0.3603 * var(--u)) !important;
  color:#fff !important;
}

/* ——— Helles Schema (Framework 02 und 04) ———
   Das Figma wechselt Mint und Weiß ab: 01 Mint, 02 Weiß, 03 Mint, 04 Weiß.
   Auf Weiß trägt der Text dann das Mint statt Weiß. Die Riesenziffer bleibt
   bei 10% Deckkraft — aus #00d197 auf Weiß ergibt das #e5faf4, exakt der im
   Figma gemessene Ton. */
.ugc-fw--light{ background:var(--paper) !important; }
.ugc .ugc-fw--light .ugc-fw-title,
.ugc .ugc-fw--light .ugc-fw-body,
.ugc .ugc-fw--light .ugc-fw-num{ color:var(--mint-deep) !important; }

/* Variante A (Framework 1 + 3): Bild rechts, Text rechtsbündig. */
.ugc-fw--a .ugc-fw-card{ right:calc(72 * var(--u)); }
.ugc-fw--a .ugc-fw-num { right:calc(483 * var(--u)); }
.ugc-fw--a .ugc-fw-text{ left:calc(78 * var(--u)); text-align:right; align-items:flex-end; }

/* Variante B (Framework 2 + 4): gespiegelt. */
.ugc-fw--b .ugc-fw-card{ left:calc(214 * var(--u)); }
.ugc-fw--b .ugc-fw-num { left:calc(625 * var(--u)); }
.ugc-fw--b .ugc-fw-text{ left:calc(625 * var(--u)); text-align:left; align-items:flex-start; }

/* =====================================================================
   9 · CASE SWITCH NAILS   (Figma 29:1140 · 1440x903)
   ===================================================================== */
.ugc-case{
  background:var(--ink) !important;
  padding-block:calc(94 * var(--u)) calc(81 * var(--u));
  overflow:hidden;
}
.ugc-case-grid{
  position:relative;
  display:grid;
  grid-template-columns:calc(760 * var(--u)) 1fr;
  column-gap:calc(66 * var(--u));
}
.ugc-case-badges{
  display:flex;
  align-items:center;
  gap:calc(17 * var(--u));
  flex-wrap:wrap;
}
.ugc-case-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(273 * var(--u));
  height:calc(43 * var(--u));
  background:#fff;
  border-radius:100px;
}
.ugc-case-brand img{ width:calc(224 * var(--u)); height:auto; }
.ugc .ugc-case-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:calc(43 * var(--u));
  padding-inline:calc(32 * var(--u));
  border:1px solid var(--mint);
  border-radius:100px;
  color:#fff !important;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  font-size:calc(24 * var(--u));
  letter-spacing:calc(-0.48 * var(--u)) !important;
  text-transform:none !important;
  white-space:nowrap;
}
/* Figma 29:1144 — Verlauf Mint -> fast Weiß, von links nach rechts */
.ugc .ugc-case-title{
  /* gleicher Grund wie bei den Zahlen unten: Kursivueberhang vs.
     background-clip:text */
  padding-inline:0.06em;
  margin-inline:-0.06em;
  font-size:calc(112 * var(--u));
  letter-spacing:calc(-2.24 * var(--u)) !important;
  margin-top:calc(37 * var(--u));
  background-image:linear-gradient(to right, var(--mint), #f2fffb);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}
.ugc .ugc-case-sub{
  font-size:calc(24 * var(--u));
  letter-spacing:calc(-0.48 * var(--u)) !important;
  color:var(--mint) !important;
  margin-top:calc(23 * var(--u));
  max-width:calc(760 * var(--u));
}
.ugc .ugc-case-body{
  font-size:calc(18 * var(--u));
  letter-spacing:calc(-0.36 * var(--u)) !important;
  line-height:1.15 !important;
  color:#fff !important;
  margin-top:calc(45 * var(--u));
  max-width:calc(689 * var(--u));
}
.ugc .ugc-case-kicker{
  font-size:calc(32 * var(--u));
  letter-spacing:calc(-0.64 * var(--u)) !important;
  color:var(--mint) !important;
  margin-top:calc(52 * var(--u));
}
/* .ugc-Prefix nötig: der margin-Reset oben trifft ".ugc ul" (0,1,1) und
   würde ein einfaches .ugc-case-list (0,1,0) sonst auf margin:0 zwingen. */
.ugc .ugc-case-list{
  margin-top:calc(26 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(26 * var(--u));
  max-width:calc(689 * var(--u));
}
.ugc .ugc-case-list li{
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  font-size:calc(18 * var(--u));
  letter-spacing:calc(-0.36 * var(--u)) !important;
  line-height:1.15 !important;
  color:#fff !important;
}
.ugc .ugc-case-list b{
  display:block;
  font-weight:500 !important;
  font-style:italic;
  color:var(--mint) !important;
}
.ugc-case-aside{ position:relative; }
.ugc-case-card{
  position:relative;
  width:calc(333 * var(--u));
  height:calc(592 * var(--u));
  margin-left:auto;
  border-radius:calc(20.81 * var(--u));
  overflow:hidden;
  background:#fff;
}
.ugc-case-card img,
.ugc-case-card video{ width:100%; height:100%; object-fit:cover; }

/* Die beiden Pfeil-Vektoren überlappen im Design die Card-Oberkante. */
.ugc-case-arrows{
  position:absolute;
  top:calc(-13 * var(--u));
  right:calc(211 * var(--u));
  width:calc(184 * var(--u));
  height:calc(180 * var(--u));
  pointer-events:none;
  z-index:2;
}
.ugc-case-arrows img{
  position:absolute;
  /* Die Grunddrehung steht als eigene rotate-Property, nicht in transform.
     Sonst wuerde die Schwebe-Animation sie ueberschreiben. */
  animation:ugc-arrow-float 3.4s ease-in-out infinite;
  will-change:translate;
}
.ugc-case-arrows img:nth-child(1){
  right:0;
  top:calc(87 * var(--u));
  width:calc(153 * var(--u));
}
.ugc-case-arrows img:nth-child(2){
  right:calc(30 * var(--u));
  top:0;
  width:calc(133 * var(--u));
  rotate:-21.2deg;
  /* versetzt, damit die beiden Pfeile nicht im Gleichschritt schweben */
  animation-delay:-1.2s;
  animation-duration:4.1s;
}
@keyframes ugc-arrow-float{
  0%,100%{ translate:0 0; }
  50%    { translate:0 calc(-11 * var(--u)); }
}

.ugc-case-metrics{
  display:flex;
  gap:calc(28.618 * var(--u));
  margin-top:calc(59 * var(--u));
}
.ugc-case-metric{
  display:flex;
  align-items:flex-end;
  gap:calc(8.087 * var(--u));
}
/* Die Zahlen tragen einen Glanz, der periodisch drueberfaehrt: ein heller
   Streifen im Farbverlauf, der per background-clip nur in den Ziffern
   sichtbar ist. Die Keyframes halten den Verlauf erst ausserhalb, dadurch
   entsteht eine Pause zwischen zwei Durchlaeufen statt Dauergeflacker. */
/* Vanguard ist kursiv: die Tinte ragt oben rechts und unten links ueber
   die Elementbox hinaus. background-clip:text malt aber nur innerhalb
   dieser Box, dadurch waren die Glyphenraender senkrecht angeschnitten.
   Das Padding verbreitert die Malflaeche, der negative Margin nimmt den
   Layout-Effekt wieder zurueck. */
.ugc .ugc-case-metric b{
  padding-inline:0.16em;
  margin-inline:-0.16em;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-style:normal !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  font-size:calc(100.406 * var(--u));
  letter-spacing:calc(-2.0081 * var(--u)) !important;
  color:var(--mint) !important;
  /* Zwei Ebenen: unten eine durchgehende Mint-Flaeche, darueber der
     wandernde Lichtstreifen. Mit nur einer Ebene stuenden die Ziffern
     waehrend der Pause ohne Hintergrund da — background-clip:text haette
     dann nichts zu beschneiden und sie waeren schlicht unsichtbar. */
  background-image:
    linear-gradient(105deg,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,0) 58%),
    linear-gradient(var(--mint), var(--mint));
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:-70% 0, 0 0;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ugc-metric-shine 4.4s linear infinite;
}
.ugc .ugc-case-metric:nth-child(2) b{ animation-delay:.55s; }
@keyframes ugc-metric-shine{
  0%, 58% { background-position:-70% 0, 0 0; }
  100%    { background-position:170% 0, 0 0; }
}
.ugc .ugc-case-metric span{
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  font-size:calc(27.522 * var(--u));
  letter-spacing:calc(-0.5504 * var(--u)) !important;
  color:#fff !important;
}

/* =====================================================================
   10 · 5 PHASEN   (Figma 10:719 · 1440x824)
   ===================================================================== */
.ugc-phases{
  background:var(--paper) !important;
  padding-block:calc(209 * var(--u)) calc(120 * var(--u));
}
.ugc-phases-head{
  max-width:calc(934 * var(--u));
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:calc(34 * var(--u));
}
.ugc .ugc-phases-title{
  font-size:calc(121.168 * var(--u));
  letter-spacing:calc(-2.4234 * var(--u)) !important;
  color:var(--ink) !important;
}
.ugc .ugc-phases-sub{
  font-size:calc(28 * var(--u));
  letter-spacing:calc(-0.56 * var(--u)) !important;
  color:var(--ink) !important;
  text-align:center;
}
.ugc-phases-row{
  display:flex;
  gap:calc(14 * var(--u));
  height:calc(284 * var(--u));
  margin-top:calc(64 * var(--u));
}

/* ——— Akkordeon ———
   Genau eine Kachel ist ausgefahren. Die Breiten sind so gewählt, dass die
   Reihe dabei immer exakt 1159u misst und nichts springt:
     4 x 163.75u  +  448u  +  4 x 14u Lücke  =  1159u
   Im Ruhezustand ist 02 offen, wie im Figma. Sobald eine Kachel gehovert
   wird, klappt 02 ein und die gehoverte fährt aus.

   :has() sorgt dafür, dass nur eingeklappt wird, wenn wirklich eine Kachel
   unter dem Zeiger liegt. Ohne das würden alle fünf einklappen, sobald der
   Zeiger in einer der Lücken steht, und die Reihe würde auf 874u schrumpfen.
   Die 60ms Verzögerung fangen das Überqueren der Lücken ab, sonst zuckt die
   Animation bei jedem Kachelwechsel kurz zurück. */
.ugc-phase{
  position:relative;
  flex:0 0 auto;
  width:calc(163.75 * var(--u));
  border-radius:calc(10 * var(--u));
  overflow:hidden;
  background:var(--mint-deep);
  transition:width .5s cubic-bezier(0.16,1,0.3,1) 60ms;
}
.ugc-phase--ink{ background:var(--ink); }
.ugc-phase--open{ width:calc(448 * var(--u)); }
.ugc-phases-row:has(.ugc-phase:hover) .ugc-phase{ width:calc(163.75 * var(--u)); }
/* Muss ebenfalls ueber :has() laufen. Sonst steht (0,3,0) gegen die (0,4,0)
   der Einklapp-Regel darueber, die Einklapp-Regel gewinnt auch fuer die
   gehoverte Kachel und nichts faehrt aus. */
.ugc-phases-row:has(.ugc-phase:hover) .ugc-phase:hover{ width:calc(448 * var(--u)); }
.ugc .ugc-phase-num{
  position:absolute;
  top:calc(19 * var(--u));
  left:calc(16 * var(--u));
  font-size:calc(40.914 * var(--u));
  letter-spacing:calc(-0.8183 * var(--u)) !important;
  color:#fff !important;
}
.ugc .ugc-phase-label{
  position:absolute;
  bottom:calc(19 * var(--u));
  left:calc(15.75 * var(--u));
  font-size:calc(28 * var(--u));
  letter-spacing:calc(-0.56 * var(--u)) !important;
  color:#fff !important;
}
.ugc .ugc-phase--ink .ugc-phase-num,
.ugc .ugc-phase--ink .ugc-phase-label{ color:var(--mint) !important; }

/* Das Label wächst mit dem Ausfahren mit. font-size statt transform:scale,
   weil skalierter Text bei dieser Strichstärke sichtbar weich wird. */
.ugc .ugc-phase-label{
  transition:font-size .5s cubic-bezier(0.16,1,0.3,1) 60ms;
}
.ugc .ugc-phase--open .ugc-phase-label,
.ugc .ugc-phases-row .ugc-phase:hover .ugc-phase-label{
  font-size:calc(46.554 * var(--u));
  letter-spacing:calc(-0.9311 * var(--u)) !important;
}
.ugc .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase-label{
  font-size:calc(28 * var(--u));
  letter-spacing:calc(-0.56 * var(--u)) !important;
}
.ugc .ugc-phases-row .ugc-phase:hover .ugc-phase-label{
  font-size:calc(46.554 * var(--u));
  letter-spacing:calc(-0.9311 * var(--u)) !important;
}
/* Feste Breite statt max-width: sonst bricht der Text während des
   Ausfahrens bei jeder Zwischenbreite neu um und flackert. So steht der
   Satz fest und wird von overflow:hidden der Kachel nur beschnitten. */
.ugc-phase-note{
  position:absolute;
  top:calc(19 * var(--u));
  right:calc(22.75 * var(--u));
  text-align:right;
  width:calc(364 * var(--u));
  opacity:0;
  transform:translateX(calc(14 * var(--u)));
  transition:opacity .3s ease 60ms,
             transform .5s cubic-bezier(0.16,1,0.3,1) 60ms;
  pointer-events:none;
}
.ugc-phase--open .ugc-phase-note{ opacity:1; transform:none; }
.ugc-phases-row:has(.ugc-phase:hover) .ugc-phase-note{
  opacity:0;
  transform:translateX(calc(14 * var(--u)));
}
.ugc-phases-row .ugc-phase:hover .ugc-phase-note{ opacity:1; transform:none; }
.ugc .ugc-phase-note strong{
  display:block;
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:calc(18 * var(--u));
  letter-spacing:calc(-0.36 * var(--u)) !important;
  line-height:1.2 !important;
  text-transform:none !important;
  color:#fff !important;
}
.ugc .ugc-phase-note span{
  display:block;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  font-size:calc(14 * var(--u));
  letter-spacing:calc(-0.28 * var(--u)) !important;
  line-height:1.2 !important;
  text-transform:none !important;
  color:#fff !important;
  margin-top:calc(7 * var(--u));
  margin-left:auto;
  max-width:calc(305 * var(--u));
}

/* =====================================================================
   11 · COMMUNITY   (Figma 10:741 · 1440x364)

   Im Figma ist das ein statisches Mint-Band mit zweifarbiger Headline.
   Hier scrollgesteuert: Der Text startet dunkel auf Weiss, dann laeuft ein
   Band ueber die volle Breite von unten hoch und legt die darueber liegende
   Ebene frei — weisser Text auf Tuerkis. Der Text kippt exakt an der Kante,
   dadurch entsteht genau der zweifarbige Moment aus dem Figma, sobald die
   Kante durch die Buchstaben laeuft.

   --p (0..1) liefert globalist-ugc.js. Ohne JS bleibt --p auf dem Default 1
   und die Section ist schlicht durchgehend tuerkis, also kein kaputter
   Zwischenzustand.
   ===================================================================== */
.ugc-community{
  /* --p MUSS hier stehen, nicht auf .ugc-community-reveal: das Skript setzt
     die Variable per Inline-Style auf der Section (sie traegt data-ugc-blob).
     Eine eigene Deklaration auf der Reveal-Ebene wuerde den geerbten Wert
     ueberschreiben und der Fortschritt kaeme dort nie an. */
  --p:1;
  background:var(--paper) !important;
  overflow:hidden;
}
.ugc-community-copy{
  position:relative;
  z-index:0;
  text-align:center;
  padding-block:calc(104 * var(--u)) calc(112 * var(--u));
}
.ugc .ugc-community-big{
  display:block;
  font-size:calc(177.781 * var(--u));
  letter-spacing:calc(-3.5556 * var(--u)) !important;
  color:var(--ink) !important;
}
.ugc .ugc-community-small{
  display:block;
  font-size:calc(114.17 * var(--u));
  letter-spacing:calc(-2.2834 * var(--u)) !important;
  color:var(--ink) !important;
  margin-top:0.066em;
}

/* Tuerkis-Ebene, deckungsgleich ueber der Basis.
   --edge ist die Bandkante, gemessen von der Unterkante nach oben.
   Der Bereich 0..112% minus 3% sorgt dafuer, dass bei --p:0 die Kante
   wirklich unterhalb der Section liegt (nichts sichtbar) und die Deckung
   schon bei rund --p:0.92 schliesst — sonst bliebe am oberen Rand ein
   Restspalt stehen, weil der Scrollweg (TRAVEL 1.1) erst kurz nach dem
   sichtbaren Bereich bei 1 ankommt.
   Die 1.2% Weichzeichnung sind nur Kantenglaettung, kein sichtbarer
   Verlauf. */
.ugc-community-reveal{
  --edge:calc(var(--p) * 112% - 3%);
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--mint-deep);
  -webkit-mask-image:
    linear-gradient(to top,
      #000 var(--edge),
      rgba(0,0,0,0) calc(var(--edge) + 1.2%));
  mask-image:
    linear-gradient(to top,
      #000 var(--edge),
      rgba(0,0,0,0) calc(var(--edge) + 1.2%));
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}
.ugc .ugc-community-reveal .ugc-community-big,
.ugc .ugc-community-reveal .ugc-community-small{ color:#fff !important; }

/* =====================================================================
   12 · VISUALS   (Figma 10:745 · 1440x781)
   ===================================================================== */
.ugc-visuals{
  background:var(--mint-deep) !important;
  padding-block:calc(33 * var(--u)) calc(183 * var(--u));
}
.ugc-visuals-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:calc(52 * var(--u));
}
.ugc-visual-media{
  height:calc(446.047 * var(--u));
  border-radius:calc(10 * var(--u));
  overflow:hidden;
  background:#fff;
}
.ugc-visual-media img,
.ugc-visual-media video{ width:100%; height:100%; object-fit:cover; }
/* Karte als Spalte, damit das Label unten den Rest ausfuellt. Die
   Grid-Zellen strecken sich ohnehin auf die hoechste Karte der Reihe,
   dadurch sind alle vier Label exakt gleich hoch. */
.ugc-visual{
  display:flex;
  flex-direction:column;
}
/* min-height statt height: die 96u aus dem Figma reichen fuer den
   laengsten Text nicht (Creator Commerce lief um 6px ueber und die
   anderen drei sassen ohne jede Luft auf der Kante). */
.ugc-visual-label{
  margin-top:calc(23 * var(--u));
  min-height:calc(96 * var(--u));
  flex:1 1 auto;
  border-radius:calc(10 * var(--u));
  background:#fff;
  text-align:center;
  padding:calc(18 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
  align-items:center;
  justify-content:center;
}
.ugc-visual--ink .ugc-visual-label{ background:var(--ink); }
.ugc .ugc-visual-label h3{
  font-size:calc(34 * var(--u));
  letter-spacing:calc(-0.68 * var(--u)) !important;
  color:var(--ink) !important;
}
.ugc .ugc-visual-label p{
  font-size:calc(12 * var(--u));
  letter-spacing:calc(-0.24 * var(--u)) !important;
  line-height:1.2 !important;
  color:var(--ink) !important;
}
.ugc .ugc-visual--ink .ugc-visual-label h3,
.ugc .ugc-visual--ink .ugc-visual-label p{ color:#fff !important; }

/* =====================================================================
   13 · KONTAKT   (Figma 10:779 · 1440x774)
   ===================================================================== */
.ugc-contact{
  background:var(--ink) !important;
  padding-block:calc(155 * var(--u));
  text-align:center;
}
.ugc .ugc-contact-title{
  font-size:calc(114.17 * var(--u));
  letter-spacing:calc(-2.2834 * var(--u)) !important;
  color:var(--mint) !important;
  max-width:calc(895 * var(--u));
  margin-inline:auto;
}
.ugc-contact-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(24 * var(--u));
  margin-top:calc(70 * var(--u));
  flex-wrap:wrap;
}
.ugc-contact-globe{
  width:calc(79.935 * var(--u));
  height:calc(78.516 * var(--u));
  flex:0 0 auto;
}
.ugc .ugc-contact .ugc-btn--ghost{ border-color:var(--mint); }

/* =====================================================================
   RESPONSIVE
   Breakpoints nach globalist-responsive: 1199 / 991 / 767 / 480.
   Bis 1199 trägt das --u-System das Layout unverändert. Ab 991 wird
   umgebaut, weil reines Skalieren die Typo unlesbar machen würde.
   ===================================================================== */

@media (max-width: 1199px){
  .ugc{ --gut:clamp(28px, 6vw, 141px); }
  /* Die Riesenziffer würde sonst seitlich aus der Section laufen */
  .ugc .ugc-fw-num{ font-size:calc(520 * var(--u)); }
}

/* ---------- Tablet Portrait ---------- */
@media (max-width: 991px){
  .ugc{ --u:1px; --gut:40px; }

  .ugc-hero{ margin-top:-61px; }   /* Navbar ist ab 991px 60px hoch, plus 1px Border */
  /* Ohne Breitenbegrenzung läuft die Headline hier auf eine einzige Zeile,
     die den Container exakt ausfüllt — zu knapp. 640px erzwingt den Umbruch
     nach "CREATOR-MIX," und hält damit den zweizeiligen Rhythmus des Designs. */
  .ugc .ugc-hero-title{
    --r:7px;
    font-size:clamp(46px, 8.2vw, 74px);
    letter-spacing:-.02em !important;
    max-width:640px;
  }
  .ugc .ugc-hero-lead{ font-size:17px; max-width:640px; margin-top:22px; }

  .ugc-buzz{ height:48px; }
  .ugc .ugc-buzz-track span{ font-size:20px; }
  .ugc-buzz-track{ gap:28px; padding-right:28px; }

  .ugc-intro{ padding-block:72px 88px; }
  .ugc-intro-grid{ grid-template-columns:1fr; row-gap:56px; }
  .ugc .ugc-intro-title{ font-size:clamp(38px, 6.4vw, 58px); max-width:100%; }
  .ugc .ugc-intro-title--accent{ margin-top:20px; max-width:100%; }
  .ugc .ugc-intro-body{ font-size:17px; max-width:620px; margin-top:32px; }
  .ugc-pills{ max-width:520px; margin-inline:auto; }

  .ugc-fullw{ padding-block:0 40px; }
  .ugc .ugc-fullw-title{ font-size:clamp(34px, 5.6vw, 54px); }
  .ugc .ugc-fullw-sub{ font-size:16px; margin-top:18px; }

  /* Framework: aus der Absolut-Bühne wird ein normaler Flow */
  .ugc-fw{ height:auto; min-height:0; padding-block:56px; }
  /* DOM-Reihenfolge ist Card -> Text. Variante A will das Bild rechts,
     braucht also row-reverse; Variante B behält die normale Richtung.
     So bleibt der Links-Rechts-Wechsel des Designs auch hier erhalten. */
  .ugc-fw-inner{ height:auto; display:flex; align-items:center; gap:44px; }
  .ugc-fw--a .ugc-fw-inner{ flex-direction:row-reverse; }
  .ugc-fw-card{ position:static; flex:0 0 46%; width:auto; height:auto; aspect-ratio:320/569; }
  .ugc-fw-text{ position:static; transform:none; width:auto; flex:1 1 auto; }
  .ugc-fw--a .ugc-fw-text{ text-align:left; align-items:flex-start; }
  .ugc .ugc-fw-title{ font-size:clamp(34px, 5.4vw, 54px); }
  .ugc .ugc-fw-body{ font-size:16px; }
  /* Ziffer sitzt jeweils unter dem Textblock, also gegenüber der Card. */
  .ugc .ugc-fw-num{
    top:auto; bottom:-4%;
    font-size:clamp(200px, 34vw, 340px);
    opacity:.14;
  }
  .ugc .ugc-fw--a .ugc-fw-num{ left:2%;  right:auto; }
  .ugc .ugc-fw--b .ugc-fw-num{ right:2%; left:auto; }

  .ugc-case{ padding-block:64px; }
  .ugc-case-grid{ grid-template-columns:1fr; row-gap:48px; }
  .ugc .ugc-case-title{ font-size:clamp(46px, 8vw, 84px); margin-top:28px; }
  .ugc .ugc-case-sub{ font-size:20px; max-width:100%; }
  .ugc .ugc-case-body{ max-width:100%; }
  .ugc-case-list{ max-width:100%; }
  .ugc-case-card{ margin-inline:auto; width:min(333px, 78%); height:auto; aspect-ratio:333/592; }
  .ugc-case-arrows{ display:none; }
  .ugc-case-metrics{ justify-content:center; margin-top:40px; }

  .ugc-phases{ padding-block:80px; }
  .ugc-phases-head{ max-width:100%; }
  .ugc .ugc-phases-title{ font-size:clamp(44px, 8vw, 88px); text-align:center; }
  .ugc .ugc-phases-sub{ font-size:20px; }
  /* Fünf Karten nebeneinander werden hier zu eng: horizontal scrollbar */
  .ugc-phases-row{
    height:auto;
    margin-top:44px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  /* Kein Akkordeon unterhalb 992: Touch-Geräte haben kein Hover, und eine
     ausfahrende Kachel wäre hier ohnehin zu schmal. Stattdessen alle Kacheln
     gleich breit, Text dauerhaft sichtbar, Reihe horizontal scrollbar.
     Die Selektoren spiegeln die Akkordeon-Regeln, sonst gewinnen die wegen
     :has() höher spezifisch — Media Queries erhöhen die Spezifität nicht. */
  .ugc-phase,
  .ugc-phase--open,
  .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase,
  .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase:hover,
  .ugc-phases-row .ugc-phase:hover{
    flex:0 0 250px;
    width:250px;
    height:auto;
    min-height:290px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    padding:18px 16px;
    transition:none;
  }
  .ugc .ugc-phase-num{ position:static; font-size:34px; }
  .ugc-phase-note,
  .ugc-phase--open .ugc-phase-note,
  .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase-note,
  .ugc-phases-row .ugc-phase:hover .ugc-phase-note{
    position:static;
    width:auto;
    text-align:left;
    opacity:1;
    transform:none;
    margin-top:14px;
    transition:none;
  }
  .ugc .ugc-phase-label,
  .ugc .ugc-phase--open .ugc-phase-label,
  .ugc .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase-label,
  .ugc .ugc-phases-row .ugc-phase:hover .ugc-phase-label{
    position:static;
    margin-top:auto;
    padding-top:20px;
    font-size:26px;
    letter-spacing:-.02em !important;
    transition:none;
  }
  .ugc .ugc-phase-note span{ margin-left:0; max-width:none; }

  .ugc-community-copy{ padding-block:64px 72px; }
  .ugc .ugc-community-big{ font-size:clamp(56px, 13vw, 120px); }
  .ugc .ugc-community-small{ font-size:clamp(30px, 8vw, 76px); }

  .ugc-visuals{ padding-block:40px 96px; }
  .ugc-visuals-row{ grid-template-columns:repeat(2, 1fr); gap:28px; }
  .ugc-visual-media{ height:auto; aspect-ratio:251/446; }
  .ugc-visual-label{ min-height:96px; margin-top:16px; padding:16px 14px 18px; }
  .ugc .ugc-visual-label h3{ font-size:26px; }
  .ugc .ugc-visual-label p{ font-size:12px; }

  .ugc-contact{ padding-block:96px; }
  .ugc .ugc-contact-title{ font-size:clamp(40px, 8vw, 84px); max-width:100%; }
  .ugc-contact-actions{ margin-top:44px; }
  .ugc-contact-globe{ width:64px; height:63px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px){
  .ugc{ --gut:24px; }

  .ugc .ugc-hero-title{ --r:5px; font-size:clamp(38px, 10.4vw, 54px); }
  .ugc .ugc-hero-lead{ font-size:16px; }
  .ugc-hero-actions{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .ugc .ugc-btn{ width:100%; min-width:0; }

  .ugc-buzz{ height:42px; }
  .ugc .ugc-buzz-track span{ font-size:16px; }
  .ugc-buzz-track{ gap:20px; padding-right:20px; }

  .ugc-intro{ padding-block:56px 64px; }
  .ugc .ugc-intro-title{ font-size:clamp(30px, 8.2vw, 42px); }
  .ugc .ugc-intro-body{ font-size:16px; }
  .ugc-pills{ max-width:100%; }

  .ugc-fullw{ padding-block:0 32px; }
  .ugc-fullw-inner{ text-align:left; }
  .ugc .ugc-fullw-title{ font-size:clamp(28px, 7.6vw, 40px); margin-left:0; }
  .ugc .ugc-fullw-sub{ font-size:15px; margin-left:0; }

  .ugc-fw{ padding-block:44px; }
  /* Beide Varianten müssen hier explizit adressiert werden: die
     row-reverse-Regel aus dem 991er-Block hat Spezifität (0,2,0) und würde
     ein einfaches .ugc-fw-inner (0,1,0) sonst schlagen — Media Queries
     erhöhen die Spezifität nicht. */
  .ugc-fw-inner,
  .ugc-fw--a .ugc-fw-inner,
  .ugc-fw--b .ugc-fw-inner{ flex-direction:column; gap:28px; }
  .ugc-fw-card{ flex:0 0 auto; width:min(280px, 76%); align-self:center; }
  .ugc .ugc-fw-title{ font-size:clamp(28px, 7.6vw, 40px); }
  .ugc .ugc-fw-body{ font-size:15px; }
  .ugc .ugc-fw-num{ font-size:clamp(150px, 44vw, 220px); bottom:auto; top:8px; opacity:.16; }

  .ugc-case{ padding-block:52px; }
  .ugc-case-badges{ gap:10px; }
  .ugc-case-brand{ width:210px; height:38px; }
  .ugc-case-brand img{ width:170px; }
  .ugc .ugc-case-tag{ height:38px; font-size:16px; padding-inline:20px; }
  .ugc .ugc-case-title{ font-size:clamp(34px, 9.6vw, 52px); }
  .ugc .ugc-case-sub{ font-size:17px; margin-top:16px; }
  .ugc .ugc-case-body{ font-size:15px; margin-top:28px; }
  .ugc .ugc-case-kicker{ font-size:24px; margin-top:36px; }
  .ugc .ugc-case-list li{ font-size:15px; }
  .ugc-case-card{ width:min(300px, 88%); }
  .ugc-case-metrics{ gap:24px; flex-wrap:wrap; }
  .ugc .ugc-case-metric b{ font-size:64px; }
  .ugc .ugc-case-metric span{ font-size:18px; }

  .ugc-phases{ padding-block:60px; }
  .ugc .ugc-phases-title{ font-size:clamp(32px, 9.2vw, 52px); }
  .ugc .ugc-phases-sub{ font-size:17px; }
  .ugc-phases-head{ gap:20px; }
  .ugc-phase,
  .ugc-phase--open,
  .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase,
  .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase:hover,
  .ugc-phases-row .ugc-phase:hover{ flex:0 0 225px; width:225px; min-height:275px; }
  .ugc .ugc-phase-num{ font-size:30px; }
  .ugc .ugc-phase-label,
  .ugc .ugc-phase--open .ugc-phase-label,
  .ugc .ugc-phases-row:has(.ugc-phase:hover) .ugc-phase-label,
  .ugc .ugc-phases-row .ugc-phase:hover .ugc-phase-label{ font-size:22px; }
  .ugc .ugc-phase-note strong{ font-size:14px; }
  .ugc .ugc-phase-note span{ font-size:12px; }

  .ugc .ugc-community-big{ font-size:clamp(40px, 14vw, 72px); }
  .ugc .ugc-community-small{ font-size:clamp(20px, 7.4vw, 40px); }

  .ugc-visuals{ padding-block:32px 72px; }
  .ugc-visuals-row{ gap:18px; }
  .ugc .ugc-visual-label h3{ font-size:20px; }
  .ugc .ugc-visual-label p{ font-size:11px; }

  .ugc-contact{ padding-block:72px; }
  .ugc .ugc-contact-title{ font-size:clamp(30px, 9.4vw, 52px); }
  .ugc-contact-actions{ flex-direction:column; gap:14px; }
  .ugc-contact-globe{ order:-1; width:56px; height:55px; }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px){
  .ugc{ --gut:18px; }

  .ugc .ugc-hero-title{ --r:4px; font-size:clamp(32px, 11vw, 42px); }
  .ugc .ugc-hero-lead{ font-size:15px; }

  .ugc .ugc-intro-title{ font-size:clamp(26px, 8.6vw, 34px); }
  .ugc .ugc-fw-title,
  .ugc .ugc-fullw-title{ font-size:clamp(24px, 8.2vw, 32px); }
  .ugc .ugc-case-title{ font-size:clamp(28px, 10vw, 38px); }
  .ugc .ugc-phases-title{ font-size:clamp(26px, 9.6vw, 38px); }
  .ugc .ugc-contact-title{ font-size:clamp(26px, 10vw, 38px); }

  /* Visuals einspaltig, zweispaltig wird hier zu schmal */
  .ugc-visuals-row{ grid-template-columns:1fr; gap:22px; }
  .ugc-visual-media{ max-width:300px; margin-inline:auto; }
  .ugc-visual-label{ max-width:300px; margin-inline:auto; margin-top:14px; }

  .ugc .ugc-case-metric b{ font-size:52px; }
}

/* ---------- Touch & Motion ---------- */
@media (hover: none){
  .ugc .ugc-btn:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .ugc-buzz-track{ animation:none; }
  /* Akkordeon bleibt bedienbar, wechselt aber ohne Bewegung */
  .ugc-phase,
  .ugc .ugc-phase-label,
  .ugc-phase-note{ transition:none !important; }
  .ugc-case-arrows img{ animation:none !important; translate:none !important; }
  .ugc .ugc-case-metric b{
    animation:none !important;
    background-image:none !important;
    -webkit-text-fill-color:var(--mint) !important;
  }
  .ugc .ugc-btn{ transition:none; }
  .ugc .ugc-btn:hover{ transform:none; }
}