/* Seiten-CSS: uber-uns — destilliert aus Mockup (Design-Freeze 07/2026).
   Basis + Komponenten aus inc/biz-shared/. */

/* Theme-Kontext: Sektionen aus dem Bricks-Container ausbrechen
   (gleicher 100vw-Trick wie biz-components) */
.uu-hero, .uu-manifesto, .uu-pano, .uu-audience, .uu-philo,
.uu-team, .uu-promise, .uu-leistungen, .uu-cases,
.uu-gf, .uu-more {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}



/* ──────────────────────────────────────────────
   ÜBER-UNS IDENTITY
   Brand-System aus Karriere, eigene Layouts.
   Gleiche Tokens, andere Choreografie.
   ────────────────────────────────────────────── */

/* ─── Icon-Library (Flaticon fi-rr-*) via CSS-mask ─── */
:root {
  --uu-icons: '../../assets/icons';
}

.uu-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.uu-icon--home-location { -webkit-mask-image: url('../../assets/icons/fi-rr-home-location.svg'); mask-image: url('../../assets/icons/fi-rr-home-location.svg'); }

.uu-icon--rocket { -webkit-mask-image: url('../../assets/icons/fi-rr-rocket.svg'); mask-image: url('../../assets/icons/fi-rr-rocket.svg'); }

.uu-icon--comments { -webkit-mask-image: url('../../assets/icons/fi-rr-comments.svg'); mask-image: url('../../assets/icons/fi-rr-comments.svg'); }

.uu-icon--leaf { -webkit-mask-image: url('../../assets/icons/fi-rr-leaf.svg'); mask-image: url('../../assets/icons/fi-rr-leaf.svg'); }

.uu-icon--globe { -webkit-mask-image: url('../../assets/icons/fi-rr-globe.svg'); mask-image: url('../../assets/icons/fi-rr-globe.svg'); }

.uu-icon--calendar { -webkit-mask-image: url('../../assets/icons/fi-rr-calendar.svg'); mask-image: url('../../assets/icons/fi-rr-calendar.svg'); }

.uu-icon--target { -webkit-mask-image: url('../../assets/icons/fi-rr-target.svg'); mask-image: url('../../assets/icons/fi-rr-target.svg'); }

.uu-icon--camera { -webkit-mask-image: url('../../assets/icons/fi-rr-camera.svg'); mask-image: url('../../assets/icons/fi-rr-camera.svg'); }

.uu-icon--bulb { -webkit-mask-image: url('../../assets/icons/fi-rr-bulb.svg'); mask-image: url('../../assets/icons/fi-rr-bulb.svg'); }

.uu-icon--brush { -webkit-mask-image: url('../../assets/icons/fi-rr-brush.svg'); mask-image: url('../../assets/icons/fi-rr-brush.svg'); }

/* Mockup-Banner */
.mockup-banner {
  background: var(--biz-bg-dark);
  color: #fff;
  padding: 0.5rem 1.5rem;
  font-size: 0.78rem;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ════════════════════════════════════════════
   HERO – Editorial Typo, NICHT Karriere-2-Column
   ════════════════════════════════════════════ */
.uu-hero {
  padding: clamp(6rem, 10vw, 11rem) 0 clamp(4rem, 6vw, 6rem);
  position: relative;
}

.uu-hero-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

.uu-hero-tagline {
  font-family: var(--myk-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--biz-bg-dark);
  margin-bottom: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
}

.uu-hero-tagline::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--biz-accent);
}

.uu-hero-h1 {
  font-family: var(--myk-font-display);
  font-size: clamp(3rem, 8vw + 0.5rem, 8.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 2.5rem;
  max-width: 14ch;
}

.uu-hero-h1-i {
  color: var(--biz-accent);
  font-style: italic;
}

.uu-hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: end;
  padding-top: clamp(2rem, 3vw, 3rem);
}

.uu-hero-lead {
  font-size: clamp(1.1rem, 0.4vw + 1rem, 1.4rem);
  line-height: 1.45;
  color: rgba(10,10,10,0.7);
  max-width: 52ch;
  margin: 0;
}

.uu-hero-mood-strip {
  display: flex;
  gap: 0;
  width: 100vw;
  margin: clamp(3rem, 5vw, 5rem) 0 0 calc(50% - 50vw);
}

.uu-hero-mood {
  flex: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.uu-hero-mood img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-hero-mood:hover img { transform: scale(1.04); }

.uu-hero-mood--label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--myk-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10,10,10,0.7);
  padding: 0.5em 1em;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

@media (max-width: 800px) {
  .uu-hero-bottom { grid-template-columns: 1fr; }
  .uu-hero-mood-strip { flex-wrap: wrap; }
  .uu-hero-mood { flex: 0 0 50%; }
}

/* ════════════════════════════════════════════
   MANIFESTO-FAKTEN  – KPIs als Editorial-Satz
   ════════════════════════════════════════════ */
.uu-manifesto {
  padding: clamp(8rem, 14vw, 14rem) 0;
  background: var(--biz-bg);
}

.uu-manifesto-inner {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.uu-manifesto-text {
  font-family: var(--myk-font-display);
  font-size: clamp(1.85rem, 2vw + 1.2rem, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--biz-bg-dark);
  margin: 0 0 clamp(3rem, 5vw, 4.5rem);
}

.uu-manifesto-n {
  color: var(--biz-accent);
  font-weight: 900;
  font-style: italic;
}

.uu-manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: 1.1em 2em;
  background: transparent;
  color: var(--biz-bg-dark);
  border: 2px solid var(--biz-bg-dark);
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, gap 0.2s ease;
}

.uu-manifesto-cta:hover {
  background: var(--biz-bg-dark);
  color: #fff;
  transform: translateY(-2px);
  gap: 1.4em;
}

.uu-manifesto-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.uu-manifesto-cta:hover svg { animation: uu-bounce 1.2s ease-in-out infinite; }

@keyframes uu-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Wiederverwendbare Anker-CTA-Sektion (zwischen Inhalts-Blöcken) */
.uu-cta-jump {
  text-align: center;
  padding: clamp(2.5rem, 4vw, 4rem) 0;
  background: var(--biz-bg);
}

.uu-cta-jump--dark {
  background: var(--biz-bg-dark);
}

.uu-cta-jump--dark .uu-manifesto-cta {
  color: #fff;
  border-color: #fff;
}

.uu-cta-jump--dark .uu-manifesto-cta:hover {
  background: #fff;
  color: var(--biz-bg-dark);
}

/* ════════════════════════════════════════════
   CINEMATIC-PANO  – kein Overlay-H2 wie Karriere
   ════════════════════════════════════════════ */
.uu-pano {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(50vh, 65vh, 75vh);
  overflow: hidden;
}

/* Specificity-Bump: sonst greift `.myk-kar img { height: auto }

` und das Bild rendert mit natural-aspect */
.myk-kar .uu-pano-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ausschnitt nach unten gewichtet (Rueckmeldung Team, 16.09.2026): Das
     Band ist 65vh hoch und auf breiten Bildschirmen rund 2,6 : 1 — bei
     mittigem Ausschnitt fielen Erdgeschoss und Schriftzug des Gebaeudes
     weg. 80 % haelt das Gebaeude ganz im Bild und nimmt oben Himmel weg.
     Auf dem Telefon ist das Band hochkant, dort wirkt nur die Breite. */
  object-position: 50% 80%;
  filter: contrast(1.05);
}

.uu-pano-chip {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3.5rem);
  left: clamp(2rem, 4vw, 3.5rem);
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.uu-pano-chip-eb {
  display: block;
  font-family: var(--myk-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--biz-accent);
  margin-bottom: 0.5rem;
}

.uu-pano-chip-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.1rem, 0.4vw + 1rem, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--biz-bg-dark);
}

/* ════════════════════════════════════════════
   ZIELGRUPPE – Für wen wir arbeiten
   ════════════════════════════════════════════ */
.uu-audience { padding: clamp(5rem, 8vw, 8rem) 0; background: var(--biz-bg); }

.uu-audience .uu-inner { width: 85%; max-width: 1440px; margin: 0 auto; }

.uu-audience-inner { max-width: 900px; }

.uu-audience-eb {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--biz-bg-dark);
  margin-bottom: 1.5rem;
  line-height: 1;
}

.uu-audience-eb::before { content:''; display:inline-block; width:28px; height:2px; background:var(--biz-accent); }

.myk-kar .uu-audience-t {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--biz-bg-dark);
  margin: 0 0 1.5rem;
}

.myk-kar .uu-audience-t i { color: var(--biz-accent); font-style: italic; }

.uu-audience-lead {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  max-width: 62ch;
  margin: 0 0 2rem;
}

.uu-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.uu-audience-tag {
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--biz-accent-soft);
  color: var(--biz-accent);
  font-family: var(--myk-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════
   MYKAISERSTUHL-VERSPRECHEN (5 Karten)
   ════════════════════════════════════════════ */
.uu-promise {
  padding: clamp(6rem, 10vw, 10rem) 0;
  background: var(--biz-bg-dark);
  color: #fff;
}

.uu-promise-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
}

.uu-promise-intro {
  max-width: 720px;
  margin: 0 auto clamp(3rem, 5vw, 4rem);
  text-align: center;
}

.uu-promise-eb {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
  line-height: 1;
}

.uu-promise-eb::before { content:''; display:inline-block; width:28px; height:2px; background:var(--biz-accent); }

.myk-kar .uu-promise-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1rem;
}

.myk-kar .uu-promise-h2 i { color: var(--biz-accent); font-style: italic; }

.uu-promise-lead {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  margin: 0 auto;
  max-width: 55ch;
}

.uu-promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .uu-promise-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.uu-promise-grid > .uu-promise-c:nth-child(4) { grid-column: span 1; }

.uu-promise-c {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}

.uu-promise-c-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--biz-accent);
  color: #fff;
  border-radius: 10px;
  font-family: var(--myk-font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.myk-kar .uu-promise-c-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.15rem, 0.6vw + 0.95rem, 1.35rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 0.75rem;
}

.uu-promise-c-d {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

/* ════════════════════════════════════════════
   PHILOSOPHIE-Bento (Farb-BGs + Watermark-Icons)
   ════════════════════════════════════════════ */
.uu-philo {
  background: var(--biz-bg);
  color: var(--biz-bg-dark);
  padding: clamp(7rem, 11vw, 13rem) 0;
}

.uu-philo-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
}

.uu-philo-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(2.5rem, 4vw, 4rem);
  max-width: 18ch;
  color: var(--biz-bg-dark);
}

.uu-philo-h2 i { color: var(--biz-accent); font-style: italic; }

.uu-philo-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: minmax(260px, auto) minmax(260px, auto);
  grid-template-areas:
    "c1 c2 c3"
    "c1 c4 c4";
  gap: 0.75rem;
}

.uu-philo-card {
  position: relative;
  padding: clamp(2.5rem, 3.5vw, 3.5rem);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-height: 340px;
}

.uu-philo-card:hover { transform: translateY(-4px); }

.uu-philo-card > *:not(.uu-philo-watermark) {
  position: relative;
  z-index: 2;
}

.uu-philo-card-i {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.uu-philo-card-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.5rem, 1.6vw + 0.7rem, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 14ch;
}

.uu-philo-card-t i { font-style: italic; }

.uu-philo-card-d {
  font-size: clamp(0.92rem, 0.3vw + 0.85rem, 1.05rem);
  line-height: 1.5;
  margin: 0;
  max-width: 32ch;
}

/* Watermark Icon im BG: ruhig, aber sichtbar */
.uu-philo-watermark {
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: 65%;
  height: 65%;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}

.uu-philo-card:hover .uu-philo-watermark {
  transform: rotate(4deg) scale(1.03);
}

.uu-philo-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 2;
}

/* Karriere-Pattern: Cyan/Dark alternierend – eine Design-Wahrheit */
.myk-kar .uu-philo-c1 {
  grid-area: c1;
  background: var(--biz-accent);
  color: #fff;
  min-height: 540px;
}

.myk-kar .uu-philo-c1 .uu-philo-card-i { color: rgba(255,255,255,0.82); }

.myk-kar .uu-philo-c1 .uu-philo-card-t,
.myk-kar .uu-philo-c1 .uu-philo-card-t i { color: #fff; }

.myk-kar .uu-philo-c1 .uu-philo-card-d { color: rgba(255,255,255,0.88); }

.uu-philo-c1 .uu-philo-watermark { color: #fff; opacity: 0.18; }

.uu-philo-c1:hover .uu-philo-watermark { opacity: 0.25; }

/* Card 2: Dark */
.myk-kar .uu-philo-c2 {
  grid-area: c2;
  background: var(--biz-bg-dark);
  color: #fff;
}

.myk-kar .uu-philo-c2 .uu-philo-card-i { color: rgba(255,255,255,0.82); }

.myk-kar .uu-philo-c2 .uu-philo-card-t { color: #fff; }

.myk-kar .uu-philo-c2 .uu-philo-card-t i { color: #fff; opacity: 0.85; }

.myk-kar .uu-philo-c2 .uu-philo-card-d { color: rgba(255,255,255,0.88); }

.uu-philo-c2 .uu-philo-watermark { color: #fff; opacity: 0.18; }

/* Card 3: Cyan */
.myk-kar .uu-philo-c3 {
  grid-area: c3;
  background: var(--biz-accent);
  color: #fff;
}

.myk-kar .uu-philo-c3 .uu-philo-card-i { color: rgba(255,255,255,0.82); }

.myk-kar .uu-philo-c3 .uu-philo-card-t,
.myk-kar .uu-philo-c3 .uu-philo-card-t i { color: #fff; }

.myk-kar .uu-philo-c3 .uu-philo-card-d { color: rgba(255,255,255,0.88); }

.uu-philo-c3 .uu-philo-watermark { color: #fff; opacity: 0.18; }

/* Card 4: wide, Dark */
.myk-kar .uu-philo-c4 {
  grid-area: c4;
  background: var(--biz-bg-dark);
  color: #fff;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}

.uu-philo-c4-text { max-width: 60%; position: relative; z-index: 2; }

.myk-kar .uu-philo-c4 .uu-philo-card-i { color: rgba(255,255,255,0.82); }

.myk-kar .uu-philo-c4 .uu-philo-card-t { color: #fff; }

.myk-kar .uu-philo-c4 .uu-philo-card-t i { color: #fff; opacity: 0.85; }

.myk-kar .uu-philo-c4 .uu-philo-card-d { color: rgba(255,255,255,0.88); }

.uu-philo-c4 .uu-philo-watermark { color: #fff; opacity: 0.18; right: 3%; bottom: -10%; width: 45%; height: 120%; }

@media (max-width: 900px) {
  .uu-philo-bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: "c1" "c2" "c3" "c4";
    }
  .uu-philo-c1 { min-height: 380px; }
  .uu-philo-c4 { flex-direction: column; align-items: flex-start; }
  .uu-philo-c4-text { max-width: 100%; }
}

/* ════════════════════════════════════════════
   OFFICE-Sektion – übernimmt Karriere-Pattern,
   Workshops mit Icons statt Zahlen
   ════════════════════════════════════════════ */
.uu-workshops {
  margin-top: clamp(5rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.uu-workshops-img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.uu-workshops-img img { width: 100%; height: 100%; object-fit: cover; }

.uu-workshops-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(1.85rem, 2.8vw + 0.6rem, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
}

.uu-workshops-lead {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.6);
  margin: 0 0 2rem;
  max-width: 48ch;
}

.uu-workshops-list {
  display: grid;
  gap: 1.75rem;
}

.uu-workshops-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.uu-workshops-item-i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--biz-accent-soft);
  color: var(--biz-accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.uu-workshops-item-i svg { width: 22px; height: 22px; }

.uu-workshops-item-t {
  font-family: var(--myk-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

.uu-workshops-item-d {
  font-size: 0.95rem;
  color: rgba(10,10,10,0.6);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 800px) {
  .uu-workshops { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   LEISTUNGS-BENTO – alle 5 auf einen Blick
   ════════════════════════════════════════════ */
.uu-leistungen {
  background: var(--biz-bg);
  padding: clamp(7rem, 11vw, 13rem) 0;
}

.uu-leistungen-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
}

.uu-leistungen-intro {
  max-width: 720px;
  margin: 0 0 clamp(3rem, 5vw, 4.5rem);
}

.uu-leistungen-intro-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}

.uu-leistungen-intro-h2 i { color: var(--biz-accent); font-style: italic; }

.uu-leistungen-intro-lead {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.6);
  margin: 0;
}

/* ── Asymmetrisches Bento: Eventmanagement als Hero links, 2x2 Companions rechts ── */
.uu-l-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "c2 c1 c3"
    "c2 c4 c5";
  gap: 0.75rem;
}

/* Generische Card */
.myk-kar .uu-l-c {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 3vw, 3.5rem);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-height: 320px;
}

.myk-kar .uu-l-c:hover { transform: translateY(-4px); }

.myk-kar .uu-l-c > *:not(.uu-l-c-icon) { position: relative; z-index: 2; }

/* Big-Number oben – visueller Anker */
.myk-kar .uu-l-c-num {
  font-family: var(--myk-font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 3vw + 1rem, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  display: block;
}

/* Watermark-Icon – ruhiges Wasserzeichen */
.uu-l-c-icon {
  position: absolute;
  right: -5%;
  bottom: -15%;
  width: 55%;
  height: 70%;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}

.uu-l-c:hover .uu-l-c-icon {
  transform: rotate(-4deg) scale(1.06);
}

.uu-l-c-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 2;
}

/* Bottom-Bereich: Title + Eyebrow + Link */
.uu-l-c-foot {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.myk-kar .uu-l-c-eb {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.myk-kar .uu-l-c-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.35rem, 1.2vw + 0.7rem, 1.85rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 16ch;
}

.myk-kar .uu-l-c-t i { font-style: italic; }

.myk-kar .uu-l-c-link {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: gap 0.2s ease;
}

.uu-l-c:hover .uu-l-c-link { gap: 1em; }

.uu-l-c-link svg { width: 14px; height: 14px; }

/* Pills für Unter-Leistungen */
.uu-l-c-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.uu-l-c-pill {
  display: inline-block;
  padding: 0.35em 0.85em;
  font-family: var(--myk-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  white-space: nowrap;
}

/* === Card 2 EVENTMANAGEMENT – HERO (links, 2 Reihen, Cyan) === */
.myk-kar .uu-l-c-2 {
  grid-area: c2;
  background: var(--biz-accent);
  color: #fff;
  min-height: 680px;
}

.myk-kar .uu-l-c-2 .uu-l-c-t {
  font-size: clamp(2rem, 2vw + 0.8rem, 3rem);
  max-width: 14ch;
  color: #fff;
}

.myk-kar .uu-l-c-2 .uu-l-c-t i { color: #fff; opacity: 0.92; }

.myk-kar .uu-l-c-2 .uu-l-c-eb { color: rgba(255,255,255,0.85); }

.myk-kar .uu-l-c-2 .uu-l-c-link { color: #fff; }

.uu-l-c-2 .uu-l-c-icon {
  color: #fff;
  opacity: 0.18;
  width: 70%;
  height: 60%;
  right: -10%;
  bottom: 5%;
}

.uu-l-c-2:hover .uu-l-c-icon { opacity: 0.24; }

/* === Card 1 WEB (oben Mitte, Dark) === */
.myk-kar .uu-l-c-1 {
  grid-area: c1;
  background: var(--biz-bg-dark);
  color: #fff;
}

.myk-kar .uu-l-c-1 .uu-l-c-eb { color: rgba(255,255,255,0.82); }

.myk-kar .uu-l-c-1 .uu-l-c-t,
.myk-kar .uu-l-c-1 .uu-l-c-t i,
.myk-kar .uu-l-c-1 .uu-l-c-link { color: #fff; }

.uu-l-c-1 .uu-l-c-icon { color: #fff; opacity: 0.18; }

/* === Card 3 PERFORMANCE (oben rechts, Cyan) === */
.myk-kar .uu-l-c-3 {
  grid-area: c3;
  background: var(--biz-accent);
  color: #fff;
}

.myk-kar .uu-l-c-3 .uu-l-c-eb { color: rgba(255,255,255,0.82); }

.myk-kar .uu-l-c-3 .uu-l-c-t,
.myk-kar .uu-l-c-3 .uu-l-c-t i,
.myk-kar .uu-l-c-3 .uu-l-c-link { color: #fff; }

.uu-l-c-3 .uu-l-c-icon { color: #fff; opacity: 0.2; }

/* === Card 4 KREATION (unten Mitte, Dark) === */
.myk-kar .uu-l-c-4 {
  grid-area: c4;
  background: var(--biz-bg-dark);
  color: #fff;
}

.myk-kar .uu-l-c-4 .uu-l-c-eb { color: rgba(255,255,255,0.82); }

.myk-kar .uu-l-c-4 .uu-l-c-t,
.myk-kar .uu-l-c-4 .uu-l-c-t i,
.myk-kar .uu-l-c-4 .uu-l-c-link { color: #fff; }

.uu-l-c-4 .uu-l-c-icon { color: #fff; opacity: 0.18; }

/* === Card 5 BERATUNG (unten rechts, Cyan) === */
.myk-kar .uu-l-c-5 {
  grid-area: c5;
  background: var(--biz-accent);
  color: #fff;
}

.myk-kar .uu-l-c-5 .uu-l-c-eb { color: rgba(255,255,255,0.82); }

.myk-kar .uu-l-c-5 .uu-l-c-t,
.myk-kar .uu-l-c-5 .uu-l-c-t i,
.myk-kar .uu-l-c-5 .uu-l-c-link { color: #fff; }

.uu-l-c-5 .uu-l-c-icon { color: #fff; opacity: 0.2; }

@media (max-width: 1000px) {
  .uu-l-bento {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "c2 c2"
        "c1 c3"
        "c4 c5";
    }
  .myk-kar .uu-l-c-2 { min-height: 420px; }
}

@media (max-width: 600px) {
  .uu-l-bento {
      grid-template-columns: 1fr;
      grid-template-areas: "c2" "c1" "c3" "c4" "c5";
    }
  .myk-kar .uu-l-c-2 { min-height: 360px; }
}

/* ════════════════════════════════════════════
   BEST-CASES-EINBLICKE (3 Cases + Mehr-Cases-CTA)
   ════════════════════════════════════════════ */
.uu-cases {
  background: var(--biz-bg);
  padding: clamp(7rem, 10vw, 13rem) 0;
}

.uu-cases-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
}

.uu-cases-intro {
  margin-bottom: clamp(3rem, 5vw, 5rem);
  max-width: 720px;
}

.uu-cases-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--biz-bg-dark);
}

.uu-cases-h2 i { color: var(--biz-accent); font-style: italic; }

.uu-cases-lead {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.6);
  margin: 0;
}

.uu-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.uu-case {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  background: var(--biz-bg-alt);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 16:9 statt hochkant (Jakob, 14.09.2026): Die Karten zeigen
     Videostandbilder, und die sind im Querformat. Bei 4:5 fuellte das
     Bild nur das obere Drittel, darunter stand der graue Verlauf leer. */
  aspect-ratio: 16 / 9;
}

.uu-case:hover { transform: translateY(-4px); }

.uu-case-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* min-height zusaetzlich, damit das Bild die Karte auch dann fuellt,
     wenn die prozentuale Hoehe keinen Bezug findet — das passiert,
     sobald die Karte ein <button> ist. */
  min-height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-case:hover .uu-case-img { transform: scale(1.04); }

.uu-case-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.9) 100%);
  z-index: 1;
}

/* Projektkarte: kraeftigerer Verlauf ab der Oberkante (17.09.2026), wie
   .lp-case--projekt in biz-components.css. Website-Mockups sind meist
   ueberwiegend weiss, und die Beschriftung reicht bei 4:3 auf dem Handy
   bis ueber die Kartenmitte in den sonst ungeschatteten Bereich. */
.uu-case--projekt .uu-case-overlay,
.uu-case--video .uu-case-overlay {
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.9) 100%);
}

.uu-case-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  color: #fff;
}

.uu-case-eb {
  display: block;
  font-family: var(--myk-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--biz-accent);
  margin-bottom: 0.65rem;
}

.uu-case-eb-light { color: rgba(255,255,255,0.9); }

.uu-case-kpi {
  font-family: var(--myk-font-display);
  font-size: clamp(1.85rem, 2vw + 0.6rem, 2.75rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 0.4rem;
  display: block;
}

/* display: block, weil die Videokarte (<button>) den Titel als <span>
   ausgibt; die Link-Karten tragen weiter <h3>. */
.uu-case-t {
  display: block;
  font-family: var(--myk-font-display);
  font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
  color: #fff;
}

/* Teaser als Titel (Karte ohne Kennzahl, seit 17.09.2026): hoechstens
   drei Zeilen. Die Beschriftung waechst von unten nach oben, und die
   Karte schneidet ab — ein langer Teaser haette sonst die Kunden-Zeile
   oben aus der Karte geschoben. */
.uu-case-t--teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Videokarte als <button> (17.09.2026). Muss NACH .uu-case stehen: gleiche
   Spezifitaet, und die spaetere Regel entscheidet ueber display.
   Ein Button zentriert seinen Inhalt und haelt text-align nicht vom
   Elternteil; Spaltenfluss und volle Breite machen ihn zur Rasterzelle wie
   die Link-Karten. Das Bild fuellt die Karte ueber min-height in
   .uu-case-img, weil eine prozentuale Hoehe im Button nicht aufloest.
   .myk-kar davor beim Hintergrund, weil der Button-Reset in biz-base.css
   (.myk-kar button) ihn sonst auf none setzt. Abspielknopf und Hinweis
   kommen aus biz-components.css (.lp-case-play, .lp-case-eb--video,
   .lp-case-hinweis). */
.uu-case--video {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.myk-kar .uu-case--video { background: var(--biz-bg-alt); }

.uu-case--video:hover .lp-case-play,
.uu-case--video:focus-visible .lp-case-play {
  transform: scale(1.12);
  box-shadow: 0 10px 26px rgba(0, 68, 255, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.2);
}

.uu-case--projekt:hover .lp-case-hinweis,
.uu-case--projekt:focus-visible .lp-case-hinweis { gap: 0.8em; }

/* Karte ohne Klick: kein Anheben, kein Zoom — sonst verspricht sie einen
   Klick, der nicht kommt. */
.uu-case--still:hover { transform: none; }
.uu-case--still:hover .uu-case-img { transform: none; }

.uu-cases-cta-wrap { text-align: center; }

/* Zweispaltig ab 1100 statt 900 px (17.09.2026): Dreispaltig bei 1024 px
   waren die Karten 278 x 157 px, die Kunden-Zeile stand 7 px unter der
   Oberkante. */
@media (max-width: 1100px) {
  .uu-cases-grid { grid-template-columns: 1fr 1fr; }
  .uu-case:nth-child(3) { grid-column: 1 / 3; aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .uu-cases-grid { grid-template-columns: 1fr; }
  .uu-case, .uu-case:nth-child(3) { aspect-ratio: 4 / 3; }
  /* Die 900er-Regel legt Karte 3 ueber zwei Spalten (1 / 3). Einspaltig
     entstand dadurch eine unsichtbare zweite Spalte, die den ganzen Platz
     bekam — Karte 1 war bis 600 px 0 px breit (gemessen 17.09.2026). */
  .uu-case:nth-child(3) { grid-column: auto; }
}

/* ════════════════════════════════════════════
   "MEHR VON UNS" – Karriere-CTA-Cross-Page
   ════════════════════════════════════════════ */
.uu-more {
  background: var(--biz-bg);
  padding: clamp(6rem, 9vw, 11rem) 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.uu-more-inner {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
}

.uu-more-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--biz-accent);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-more-card:hover { transform: translateY(-4px); }

.uu-more-card-img-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
}

.uu-more-card-img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-more-card:hover .uu-more-card-img { transform: scale(1.05); }

.uu-more-card-body {
  padding: clamp(2.5rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.uu-more-card-eb {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.uu-more-card-t {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 2vw + 0.9rem, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
  max-width: 16ch;
}

.uu-more-card-t i { color: #fff; opacity: 0.85; font-style: italic; }

.uu-more-card-d {
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.1rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 42ch;
}

.uu-more-card-link {
  font-family: var(--myk-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: gap 0.2s ease;
  margin-top: 0.75rem;
}

.uu-more-card:hover .uu-more-card-link { gap: 1.2em; }

.uu-more-card-link svg { width: 16px; height: 16px; }

@media (max-width: 800px) {
  .uu-more-card { grid-template-columns: 1fr; }
  .uu-more-card-img-wrap { aspect-ratio: 16 / 10; }
}

/* ════════════════════════════════════════════
   TEAM-Grid (eigenes Pattern, alle 22 Personen)
   ════════════════════════════════════════════ */
.uu-team {
  background: var(--biz-bg);
  padding: clamp(7rem, 11vw, 13rem) 0;
}

.uu-team-inner {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
}

.uu-team-intro {
  max-width: 720px;
  margin: 0 0 clamp(3rem, 5vw, 4.5rem);
}

.uu-team-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--biz-bg-dark);
}

.uu-team-h2 i { color: var(--biz-accent); font-style: italic; }

.uu-team-lead {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.6);
  margin: 0;
}

/* Slider: full-bleed Scroll mit proximity Snap */
.uu-team-slider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 0.5rem 0 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--biz-accent) transparent;
  -webkit-overflow-scrolling: touch;
}

.uu-team-slider::-webkit-scrollbar { height: 8px; }

.uu-team-slider::-webkit-scrollbar-track { background: transparent; }

.uu-team-slider::-webkit-scrollbar-thumb { background: var(--biz-accent); border-radius: 10px; }

.uu-team-track {
  display: inline-flex;
  gap: clamp(0.85rem, 1.2vw, 1.25rem);
  padding: 0 var(--biz-container-pad);
}

.uu-team-c {
  flex: 0 0 clamp(220px, 22vw, 280px);
  scroll-snap-align: start;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--biz-bg-alt);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-team-c:hover { transform: translateY(-4px); }

/* Initial-Avatar (echte Fotos kommen via Bilder-Subitem nach) */
.uu-team-c-avatar {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  font-family: var(--myk-font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uu-team-c:hover .uu-team-c-avatar { transform: scale(1.04); }

/* Drei-Farben-Rotation für visuelle Vielfalt */
.uu-team-c:nth-child(3n+1) .uu-team-c-avatar { background: var(--biz-accent-soft); color: var(--biz-accent); }

.uu-team-c:nth-child(3n+2) .uu-team-c-avatar { background: var(--biz-bg-alt); color: var(--biz-bg-dark); }

.uu-team-c:nth-child(3n+3) .uu-team-c-avatar { background: var(--biz-accent); color: #fff; }

.uu-team-c-body {
  padding: clamp(0.85rem, 1vw, 1.1rem) clamp(1rem, 1.2vw, 1.25rem) clamp(1rem, 1.4vw, 1.4rem);
}

.uu-team-c-name {
  font-family: var(--myk-font-display);
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
  color: var(--biz-bg-dark);
}

.uu-team-c-role {
  display: block;
  font-size: 0.8rem;
  color: rgba(10,10,10,0.55);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ── Subtiler Karriere-Anker im Team-Block ── */
.uu-team-career {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  font-family: var(--myk-font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(10,10,10,0.65);
}

.uu-team-career a {
  color: var(--biz-bg-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--biz-accent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.uu-team-career a:hover {
  color: var(--biz-accent);
}

/* ════════════════════════════════════════════
   GF-Quote
   (Die Logo-Leiste liegt seit 31.08.2026 als
   geteilte Komponente in biz-components.css —
   Ueber uns, Performance und Eventmanagement
   nutzen dieselbe.)
   ════════════════════════════════════════════ */
.uu-gf {
  background: var(--biz-bg-dark);
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(5rem, 8vw, 9rem) 0;
}

.uu-gf-inner {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.uu-gf-img {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
}

.uu-gf-img img { width: 100%; height: 100%; object-fit: cover; }

.uu-gf-mark {
  font-family: Georgia, serif;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 0.7;
  color: var(--biz-accent);
  opacity: 0.7;
  display: block;
  margin-bottom: 1rem;
}

.uu-gf-q {
  font-family: var(--myk-font-display);
  font-size: clamp(1.4rem, 1.5vw + 0.9rem, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 2rem;
  color: #fff;
}

.uu-gf-meta strong {
  font-family: var(--myk-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  display: block;
}

.uu-gf-meta span {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.25rem;
}

@media (max-width: 800px) {
  .uu-gf-inner { grid-template-columns: 1fr; }
  .uu-gf-img { aspect-ratio: 3 / 2; max-height: 450px; }
}

/* ══════════════════════════════════════════════
   MOBILE FIXES (User-Feedback aus Screenshots)
   ══════════════════════════════════════════════ */

/* Overflow-Schutz: gezielte Grid-Fixes statt globalem overflow-hidden
   (overflow-x:hidden auf html/body erzeugte Scroll-Traps, das pauschale
   img{height:auto}

.lp-studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Alle Container: box-sizing sicher, kein negativer Margin auf Mobile */
@media (max-width: 900px) {
  .myk-kar-inner, .lp-inner, .bc-inner, .cd-inner, .kt-inner, .rl-inner { width: 90%; }
}

/* Vier-Säulen-Bento: kompakter auf Mobile */
@media (max-width: 700px) {
  .myk-kar .lp-saule { padding: 1.75rem 1.5rem; min-height: 0; }
  .myk-kar .lp-saule-t { font-size: 1.35rem; }
  .lp-saule-sub { font-size: 0.92rem; }
  .lp-saule-bullets li { font-size: 0.9rem; }
  .lp-saulen-cta { margin-top: 2rem; }
  .lp-saulen-cta-text { font-size: 1rem; }
  .myk-kar .lp-saulen-cta-btn { padding: 0.85em 1.5em; font-size: 0.9rem; }
}

/* Prozess-Timeline auf Mobile: einspaltig, kompakter */
@media (max-width: 700px) {
  .lp-prozess-step { padding: 1.5rem 1.25rem; }
  .myk-kar .lp-prozess-step-t { font-size: 1.15rem; }
  .lp-prozess-step-d { font-size: 0.92rem; }
}

/* Sub-Nav-Pills auf Mobile: horizontal scrollable statt umbrechen */
@media (max-width: 700px) {
  .lp-subnav { padding: 1rem 0; }
  .lp-subnav-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .lp-subnav-wrap::-webkit-scrollbar { display: none; }
  .lp-subnav-link {
    flex: 0 0 auto;
    font-size: 0.82rem;
    padding: 0.55em 1em;
  }
}

/* Best-Cases Filter auf Mobile: kompakter */
@media (max-width: 700px) {
  .bc-filter { padding: 0.75rem 0; }
  .bc-filter-inner { gap: 0.5rem; }
  .bc-filter-groups { gap: 0.5rem; width: 100%; }
  .bc-filter-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
  }
  .bc-filter-group::-webkit-scrollbar { display: none; }
  .bc-filter-label {
    flex: 0 0 auto;
    border-right: 0;
    padding-right: 0.4em;
    margin-right: 0.15rem;
  }
  .bc-filter-chips { flex-wrap: nowrap; }
  .myk-kar .bc-chip {
    flex: 0 0 auto;
    padding: 0.42em 0.85em;
    font-size: 0.78rem;
  }
  .bc-count { margin-left: 0; font-size: 0.75rem; }
}

/* Case-Grid + Video-Cards auf Mobile: gleich hoch */
@media (max-width: 640px) {
  .bc-card--video { grid-column: span 1; }
  .bc-card--video .bc-card-media { aspect-ratio: 16 / 10; }
}

/* Hero-Bilder auf Mobile: nicht überdimensionieren */
@media (max-width: 700px) {
  .myk-kar-hero { padding: 2.5rem 0 1.5rem; }
  .myk-kar-hero-grid { gap: 1.75rem; }
}

/* Kontakt-Optionen: mehr Abstand zwischen den 3 Cards auf Mobile */
@media (max-width: 900px) {
  .kt-options-grid { gap: 0.75rem; }
  .myk-kar .kt-option { min-height: 280px; padding: 1.75rem 1.5rem; }
  .myk-kar .kt-option-t { font-size: 1.4rem; }
}

/* Reichweite-LP Form + Hero auf Mobile */
@media (max-width: 900px) {
  .rl-hero-inner { gap: 2rem; }
  .rl-form-card { padding: 1.5rem 1.25rem; }
}

/* Ende-CTA (myk-kar-apply): Buttons untereinander auf Mobile,
   dass sie sichtbar bleiben */
@media (max-width: 500px) {
  .myk-kar-apply-actions { flex-direction: column; align-items: stretch; }
  .myk-kar-apply-actions .myk-kar-btn { text-align: center; }
}

/* Best-Case Detail Story-Wasserzeichen-Zahl kleiner auf Mobile
   (verhindert Overflow) */
@media (max-width: 700px) {
  .cd-story-col-num { font-size: 3rem; top: 1rem; right: 1rem; }
  .cd-hero-facts { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 0; }
  .cd-kpi-card { padding: 1.75rem 1.5rem; gap: 1.25rem; }
  .myk-kar .cd-kpi-n { font-size: 2.25rem; }
}

/* Mobile: Watermark-Icons oben rechts + Versprechen linksbündig */
@media (max-width: 700px) {
  .myk-kar .uu-philo-watermark {
    bottom: auto;
    top: -4%;
    right: -6%;
    width: 52%;
    height: 52%;
  }
  .uu-promise-intro { text-align: left; margin-left: 0; }
}

/* ════════════════════════════════════════════
   ORBIT — Unternehmen in der Mitte, Leistungen
   laufen drumherum. Wunsch aus der Feedback-
   Runde, 28.08.2026.

   Mechanik: .uu-orbit-pos setzt die Station per
   transform auf ihren Platz im Kreis (drehen,
   hinausschieben, wieder aufrichten). Die
   Bewegung laeuft ueber die eigenstaendige
   rotate-Eigenschaft statt ueber transform —
   sonst wuerde die Animation die Positionierung
   ueberschreiben. Der Ring dreht vorwaerts, die
   Station gegenlaeufig mit gleicher Dauer,
   damit die Schrift waagerecht bleibt.
   ════════════════════════════════════════════ */
.uu-orbit {
  padding: var(--biz-section-pad) 0;
  background: var(--biz-bg);
}

.uu-orbit-inner {
  max-width: var(--biz-container);
  margin: 0 auto;
  padding: 0 var(--biz-container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.uu-orbit-eb {
  display: block;
  font-size: var(--biz-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--biz-eyebrow-letter);
  text-transform: uppercase;
  color: var(--biz-accent);
  margin-bottom: 1rem;
}

.uu-orbit-h2 {
  font-size: var(--biz-h2);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 1.1rem;
}
.uu-orbit-h2 i { font-style: italic; color: var(--biz-accent); }

.uu-orbit-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.72);
  max-width: 38ch;
  margin: 0;
}

/* ── Buehne ── */
.uu-orbit-buehne {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  /* Radius so, dass die Chips samt halber Breite innerhalb der Buehne
     bleiben — sonst ragen sie in die Textspalte daneben. */
  --uu-orbit-r: clamp(102px, 16.5vw, 178px);
}

/* Die Scheibe markiert die Bahn und haengt deshalb an derselben
   Variablen. Mit festem inset lag sie bei jeder Fensterbreite woanders
   als die Stationen. */
.uu-orbit-scheibe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--uu-orbit-r) * 2);
  height: calc(var(--uu-orbit-r) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(10, 10, 10, 0.16);
}

.uu-orbit-mitte {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 21vw, 178px);
  height: clamp(120px, 21vw, 178px);
  border-radius: 50%;
  background: var(--biz-bg-dark);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  z-index: 2;
}
.uu-orbit-mitte span {
  font-family: var(--myk-font-display);
  font-weight: 900;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.uu-orbit-ring {
  position: absolute;
  inset: 0;
  /* ueber der Mitte, damit ein Chip nie halb hinter der Scheibe verschwindet */
  z-index: 3;
}

/* Position und Aufrichtung stecken in EINER Animation je Station.
   Der erste Anlauf drehte den Ring und liess die Chips gegenlaeufig
   zurueckdrehen — das ging schief: Die individuellen Eigenschaften
   (rotate) wirken VOR transform, die Zentrierung translate(-50%,-50%)
   der Station lief damit im schon gedrehten Koordinatensystem mit.
   Die Chips liefen dadurch auf einem kleinen Eigenkreis um ihren
   Ankerpunkt statt still auf der Bahn zu sitzen. Ein Keyframe, der
   Winkel und Gegenwinkel gemeinsam fuehrt, kennt das Problem nicht. */
.uu-orbit-pos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* drehen → hinausschieben → wieder aufrichten */
  transform:
    rotate(calc(var(--i) * 72deg))
    translateY(calc(var(--uu-orbit-r) * -1))
    rotate(calc(var(--i) * -72deg));
  animation: uu-orbit-lauf 48s linear infinite;
}

@keyframes uu-orbit-lauf {
  from {
    transform:
      rotate(calc(var(--i) * 72deg))
      translateY(calc(var(--uu-orbit-r) * -1))
      rotate(calc(var(--i) * -72deg));
  }
  to {
    transform:
      rotate(calc(var(--i) * 72deg + 360deg))
      translateY(calc(var(--uu-orbit-r) * -1))
      rotate(calc(var(--i) * -72deg - 360deg));
  }
}

/* Die Stationen sind Links auf die fuenf Leistungsbereiche. Laeuft der
   Ring weiter, waehrend jemand darauf zielt, wandert das Ziel unter dem
   Zeiger weg. Die Logo-Bahn haelt deshalb seit jeher an
   (biz-components.css, .biz-logos-bahn:hover .biz-logos-spur); hier
   fehlte dieselbe Regel — gefunden am 21.09.2026 beim Abgleich mit
   riffbird.com, gemessen 48 s Umlauf ohne Pause.
   Die Pause haengt am Ring, nicht an der einzelnen Station: Wer eine
   Station treffen will, ist noch nicht auf ihr. :focus-within nimmt die
   Tastatur mit. */
.uu-orbit-ring:hover .uu-orbit-pos,
.uu-orbit-ring:focus-within .uu-orbit-pos { animation-play-state: paused; }

.uu-orbit-station {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  max-width: 122px;
  padding: 0.85rem 0.7rem;
  border-radius: 10px;
  background: var(--biz-bg);
  border: 1px solid var(--biz-line);
  box-shadow: 0 10px 30px -22px rgba(10, 10, 10, 0.55);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.uu-orbit-station:hover,
.uu-orbit-station:focus-visible {
  border-color: var(--biz-accent);
  box-shadow: 0 14px 34px -20px rgba(0, 68, 255, 0.55);
}
.uu-orbit-station:focus-visible { outline: 2px solid var(--biz-accent); outline-offset: 3px; }

.uu-orbit-icon {
  width: 24px;
  height: 24px;
  background-color: var(--biz-accent);
}

.uu-orbit-label {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--biz-bg-dark);
}

/* Ohne Bewegung bleibt dasselbe Schaubild ruhend stehen — die
   statische transform-Regel oben traegt es allein. */
@media (prefers-reduced-motion: reduce) {
  .uu-orbit-pos { animation: none; }
}

@media (max-width: 900px) {
  .uu-orbit-inner { grid-template-columns: 1fr; }
  .uu-orbit-lead { max-width: none; }
}

/* Schmal wird aus dem Kreis eine Liste — ein Kreis mit fuenf
   Beschriftungen ist unter 620 px nicht mehr lesbar. */
@media (max-width: 620px) {
  .uu-orbit-buehne { aspect-ratio: auto; max-width: none; }
  .uu-orbit-scheibe { display: none; }
  .uu-orbit-mitte {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: 1.4rem;
    margin-bottom: 0.75rem;
  }
  .uu-orbit-ring { position: static; z-index: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .uu-orbit-pos { position: static; width: auto; height: auto; transform: none; animation: none; }
  .uu-orbit-station {
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
    text-align: left;
  }
}


/* ── Leistungsnetz unter dem Bento ──────────────────────────────
   Dunkler Block, Radius wie die Kacheln darueber (10 px). Das Netz
   selbst steht in biz-components.css, hier nur seine Fassung. */

.uu-leistungen-netz {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  background: var(--biz-bg-dark);
  border-radius: 10px;
  color: #fff;
  overflow: hidden;
}

.uu-leistungen-netz-inner {
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem);
}

/* ─── Team-Karten: gleicher Zuschnitt, kein leerer grauer Fuss (21.09.2026) ───

   Vorher bestimmte das Foto selbst die Hoehe der Kachel: Die Bilder liegen in
   unterschiedlichen Seitenverhaeltnissen in der Mediathek, und ein Bild mit
   height:100% in einem Raster mit place-items:center setzt sich gegen die
   aspect-ratio des Kastens durch. Die Karten standen dadurch unterschiedlich
   hoch, der Flex-Streifen zog sie auf die Hoehe der groessten — und die
   Differenz stand als grauer Block unter der Beschriftung. Sichtbar an
   Alexanders Karte gegenueber den uebrigen.

   Jetzt schneidet der Kasten das Bild auf 4:5, und die Karten richten sich
   oben aus. Damit bleibt der graue Fuss so hoch wie seine Schrift. Fuer die
   Rolle sind zwei Zeilen reserviert, sonst wackelt die Unterkante zwischen
   „Geschaeftsfuehrer" und „Event- und Social-Media-Managerin". */
.uu-team-track { align-items: start; }

.uu-team-c-avatar--img {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.uu-team-c-avatar--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Etwas ueber der Mitte: In Portraits sitzt der Kopf im oberen Drittel. */
    object-position: center 22%;
    border-radius: inherit;
}

.uu-team-c-body {
    /* margin: 0 gehoert dazu — ein figcaption erbt aus dem Bricks-Reset oben
       und unten je 0,9em Aussenabstand, und der faerbt sich grau, weil er
       innerhalb der Kachel liegt. Das waren 29 px leerer Kasten je Karte. */
    margin: 0;
    padding: clamp(0.8rem, 0.9vw, 1rem) clamp(1rem, 1.2vw, 1.25rem) clamp(0.9rem, 1.1vw, 1.1rem);
}
.uu-team-c-role { min-height: 2.7em; }