/* ==========================================================================
   WhiteLion — Homepage
   Dark, wertig, modern. Tokens zuerst, Komponenten danach.
   ========================================================================== */

:root {
  --bg: #050506;
  --bg-2: #08080a;
  --surface: #0c0c0e;
  --surface-2: #111114;
  --surface-3: #17171b;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --line-3: rgba(255, 255, 255, 0.18);
  --text: #f4f4f5;
  --muted: #9a9aa3;
  --dim: #63636c;
  --accent: #5cc8ff;
  --accent-2: #2f7bff;
  --accent-bg: rgba(92, 200, 255, 0.08);
  --accent-line: rgba(92, 200, 255, 0.34);
  --blue: #5b8cff;
  --amber: #f2a93b;
  --amber-bg: rgba(242, 169, 59, 0.07);
  --amber-line: rgba(242, 169, 59, 0.35);
  --red: #ff6b6b;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 16px;
  --radius-sm: 12px;
  --container: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Raster wie im infoOS-Dashboard, oben weich ausgeblendet */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(91, 140, 255, 0.09), transparent 70%),
    radial-gradient(700px 400px at 5% 0%, rgba(255, 255, 255, 0.035), transparent 70%);
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(255, 255, 255, 0.9); color: #000; }

.sprite { display: none; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 14px; height: 14px; }
.i-xs { width: 12px; height: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 140px 0; }
.section-sm { padding: 96px 0; }
.center { text-align: center; }

/* ---------- Typografie ---------- */

.it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.1em;
  line-height: 0.9;
}
.soft { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.035em; }

.h1 {
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.h2 {
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.02;
}
.h3 {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.08;
}
.lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}
.center .lead { margin-left: auto; margin-right: auto; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Eyebrow-Pill (Heartbeat-Muster, dunkel interpretiert) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tag b { color: var(--text); font-weight: 500; }
.tag-dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.tag-dot .i { width: 12px; height: 12px; }

.section-head { margin-bottom: 64px; }
.section-head .tag { margin-bottom: 26px; }
.section-head .lead { margin-top: 22px; }

/* ---------- Buttons ---------- */

.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
  background: linear-gradient(180deg, #ffffff, #e7e7ea);
  color: #09090b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 10px 40px -10px rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 16px 50px -10px rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.08); }
.btn-primary .btn-ico {
  width: 26px; height: 26px; margin-right: -8px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: #0a0a0c; color: #fff;
  transition: transform 0.3s var(--ease);
}
.btn-primary:hover .btn-ico { transform: translateX(2px); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-3); }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { --h: 56px; padding: 0 26px; font-size: 16px; border-radius: 14px; }

.cta-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.cta-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---------- Karten / Fenster ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.card-accent {
  background: linear-gradient(180deg, rgba(92, 200, 255, 0.08), rgba(92, 200, 255, 0.02));
  border-color: var(--accent-line);
}

.win {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #0f0f12, #09090b);
  box-shadow:
    0 50px 140px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}
.win-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 42px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.win-bar .dots { display: flex; gap: 6px; }
.win-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #242428; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.pill-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-bg); }
.pill-amber { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.pill-blue { color: var(--blue); border-color: rgba(91, 140, 255, 0.35); background: rgba(91, 140, 255, 0.08); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav.scrolled {
  background: rgba(5, 5, 6, 0.72);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

.logo { display: inline-flex; align-items: baseline; font-family: var(--serif); font-size: 27px; letter-spacing: -0.01em; line-height: 1; }
.logo em { font-style: italic; }
.logo span { font-style: normal; }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 10px;
  font-size: 14.5px; color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.nav-right { display: flex; align-items: center; gap: 10px; }
.clock {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  background: rgba(255, 255, 255, 0.02);
}
.clock b { color: var(--text); font-weight: 500; letter-spacing: 0.02em; }
.clock .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }

.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; place-items: center; }
.mobile-menu { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: 168px 0 60px; text-align: center; position: relative; }
.hero .tag { margin-bottom: 34px; }
.hero .h1 { max-width: 1160px; margin: 0 auto; }
.hero .h1 .soft { display: block; }
.hero .lead { margin: 30px auto 0; max-width: 660px; }

.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.hero-meta { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }

.proof { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.avatars { display: flex; }
.avatars span {
  width: 30px; height: 30px; border-radius: 50%;
  margin-left: -8px;
  border: 2px solid var(--bg);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--text);
  background: linear-gradient(140deg, #2a2a31, #141417);
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(2) { background: linear-gradient(140deg, #26324d, #12151d); }
.avatars span:nth-child(3) { background: linear-gradient(140deg, #22382f, #111814); }
.avatars span:nth-child(4) { background: linear-gradient(140deg, #3a2e22, #17130f); }
.stars { display: inline-flex; gap: 2px; color: #f5c451; }
.stars .i { width: 13px; height: 13px; }
.proof b { color: var(--text); font-weight: 500; }

/* Dashboard-Mockup */
.hero-visual { position: relative; margin: 84px auto 0; max-width: 1120px; perspective: 1800px; }
.hero-visual::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -40px; height: 220px;
  background: radial-gradient(closest-side, rgba(91, 140, 255, 0.22), transparent);
  filter: blur(30px); z-index: -1;
}
.dash { display: grid; grid-template-columns: 210px 1fr; text-align: left; transform: rotateX(8deg); transform-origin: 50% 0; transition: transform 1.2s var(--ease); }
.hero-visual.in .dash { transform: rotateX(0deg); }
.dash-side { border-right: 1px solid var(--line); padding: 18px 14px; background: rgba(0, 0, 0, 0.25); }
.dash-side .logo { font-size: 22px; padding: 4px 8px 18px; }
.dash-account {
  margin: 6px 0 18px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}
.dash-nav { display: grid; gap: 2px; }
.dash-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--muted); }
.dash-nav a.on { background: rgba(255, 255, 255, 0.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.dash-nav .i { width: 15px; height: 15px; }

.dash-main { padding: 22px 24px 24px; min-width: 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.dash-head h3 { font-size: 24px; letter-spacing: -0.03em; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.seg span { padding: 5px 11px; border-radius: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.seg span.on { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.dash-col { display: grid; gap: 12px; }
.kpi { padding: 16px 18px; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); }
.kpi-ico .i { width: 15px; height: 15px; }
.kpi-val { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.04em; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.kpi .legend::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.chart { width: 100%; height: 150px; margin-top: 10px; overflow: visible; }
.chart-x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 6px; }
.spark { width: 100%; height: 44px; margin-top: 10px; overflow: visible; }
.card-accent .kpi-val { color: var(--accent); }

.line-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.in .line-draw, .line-draw.in { stroke-dashoffset: 0; }
.area-fade { opacity: 0; transition: opacity 1.4s 0.6s var(--ease); }
.in .area-fade, .area-fade.in { opacity: 1; }

.stages { margin-top: 12px; padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stage { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); min-width: 0; }
.stage .label { display: flex; align-items: center; gap: 6px; }
.stage b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stage:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translate(50%, -50%); color: var(--dim); font-size: 12px; }

/* Schwebende Toasts */
.toast {
  position: absolute; z-index: 3;
  display: flex; gap: 12px; align-items: flex-start;
  width: 290px; padding: 14px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(17, 17, 20, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  font-size: 13px; color: var(--muted); line-height: 1.45;
  animation: float 7s ease-in-out infinite;
}
.toast b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.toast .t-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); }
.toast .t-ico.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.toast-1 { left: -54px; top: 140px; }
.toast-2 { right: -48px; bottom: 90px; animation-delay: -3.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.demo-note { position: absolute; right: 18px; top: 13px; }

/* Partner-Zeile */
.partners { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 56px; }
.partners span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.partners .i { width: 14px; height: 14px; color: var(--muted); }

/* ==========================================================================
   Marquees
   ========================================================================== */

.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: var(--gap, 56px); animation: marquee var(--speed, 40s) linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap, 56px) / 2)); } }

.logos { padding: 44px 0 20px; }
.logos .label { text-align: center; margin-bottom: 30px; }
.wm { display: inline-flex; align-items: center; height: 44px; color: #6f6f78; white-space: nowrap; transition: color 0.3s; }
.wm:hover { color: var(--text); }
.wm-serif { font-family: var(--serif); font-style: italic; font-size: 30px; }
.wm-bold { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; }
.wm-mono { font-family: var(--mono); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.wm-wide { font-weight: 500; font-size: 17px; letter-spacing: 0.28em; text-transform: uppercase; }
.wm-tight { font-weight: 600; font-size: 23px; letter-spacing: -0.05em; }

/* ==========================================================================
   Für wen
   ========================================================================== */

.chips { display: grid; gap: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  white-space: nowrap;
}
.chip-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface-3); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.chip b { display: block; font-weight: 500; font-size: 15px; }
.chip small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }

.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; }
.phase { padding: 34px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.phase-top { display: flex; justify-content: space-between; align-items: center; }
.phase h3 { font-size: clamp(26px, 2.4vw, 34px); }
.phase p { margin: 0; color: var(--muted); }
.meter { margin-top: auto; padding-top: 10px; }
.meter-bar { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.meter-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), #fff); }
.phase-2 .meter-bar i { background: linear-gradient(90deg, rgba(92, 200, 255, 0.3), var(--accent)); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.phase-2 { border-color: var(--line-2); }
.phase-2::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(92, 200, 255, 0.45), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.phase-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); }
.phase-link .i { transition: transform 0.25s var(--ease); }
.phase-link:hover .i { transform: translateX(3px); }

/* ==========================================================================
   System-Tabs
   ========================================================================== */

.system { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: stretch; }
.tabs { display: grid; gap: 4px; align-content: start; }
.tab {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; align-items: baseline;
  width: 100%; padding: 14px 16px;
  text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: 12px;
  color: var(--dim);
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.tab:hover { color: var(--muted); }
.tab .n { font-family: var(--mono); font-size: 11.5px; }
.tab .t { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.tab.on { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
.tab .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--text); opacity: 0.8; }
.tab.on .bar { animation: tabbar var(--dur, 8s) linear forwards; }
.system.paused .tab.on .bar { animation-play-state: paused; }
@keyframes tabbar { to { width: 100%; } }

.panels { position: relative; min-height: 560px; }
.panel { display: none; grid-template-columns: 0.82fr 1.18fr; gap: 16px; height: 100%; }
.panel.on { display: grid; animation: panelIn 0.6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-copy { padding: 34px; display: flex; flex-direction: column; }
.panel-copy .label { margin-bottom: 18px; }
.panel-copy p { color: var(--muted); margin: 18px 0 0; }
.ticks { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; }
.ticks .i { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); }

.panel-ui { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ui-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ui-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui-title h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }

/* 01 Benchmark */
.bench { display: grid; gap: 10px; }
.bench-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.bench-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 12px; }
.bench-head span:last-child { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bench-track { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.bench-track .you { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.7)); width: 0; transition: width 1.4s var(--ease); }
.bench-track .top { position: absolute; top: -5px; width: 2px; height: 16px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bench-row.hot { border-color: var(--amber-line); background: var(--amber-bg); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--amber-line); background: var(--amber-bg); font-size: 13px; color: #e9d3ae; line-height: 1.5; }
.alert .i { color: var(--amber); margin-top: 1px; }
.alert b { color: var(--amber); font-weight: 600; }

/* 02 Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.kcol { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255, 255, 255, 0.012); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kcol-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; font-size: 12.5px; color: var(--muted); }
.kcol-h span { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.kcard { padding: 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #141417; font-size: 13px; line-height: 1.35; }
.kcard .pill { margin-top: 10px; }
.kcard.done { opacity: 0.6; }
.kcard.done b { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.kcard b { font-weight: 500; }
.kadd { margin-top: auto; padding: 8px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: 12px; color: var(--dim); text-align: center; }

/* 03 Creatives */
.creatives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cr { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #111114; }
.cr-thumb { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; }
.cr-thumb .play { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); }
.cr-thumb .play .i { width: 12px; height: 12px; margin-left: 2px; }
.cr-thumb .pill { position: absolute; top: 8px; left: 8px; }
.cr-thumb .hook { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 11.5px; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.cr-meta { display: flex; justify-content: space-between; padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.cr-meta b { color: var(--text); font-weight: 500; }
.cr.dead { opacity: 0.45; }
.g1 { background: radial-gradient(120% 90% at 30% 20%, #3a3f55, #121218); }
.g2 { background: radial-gradient(120% 90% at 70% 30%, #2d4a3d, #0f1512); }
.g3 { background: radial-gradient(120% 90% at 40% 70%, #4a3a2c, #16120e); }
.g4 { background: radial-gradient(120% 90% at 60% 20%, #3b2f4a, #141018); }
.g5 { background: radial-gradient(120% 90% at 20% 60%, #24394d, #0e1318); }
.g6 { background: radial-gradient(120% 90% at 80% 80%, #3a3a3a, #111); }

/* 04 Integrationen */
.integrations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.integ { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #111114; min-width: 0; }
.integ-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #f4f4f5; color: #111; font-weight: 700; font-size: 15px; flex: none; }
.integ b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); }
.integ small.warn { color: var(--amber); }
.integ .btn-mini { margin-left: auto; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; border: 1px solid var(--line-2); color: var(--muted); background: rgba(255,255,255,.02); white-space: nowrap; }
.integ .btn-mini.warn { border-color: var(--amber-line); color: var(--amber); }
.integ > div { min-width: 0; }

/* 05 Ask */
.ask { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.ask-hero { text-align: center; padding: 10px 0 4px; font-family: var(--serif); font-style: italic; font-size: 34px; letter-spacing: -0.01em; }
.bubble { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: #f4f4f5; color: #0a0a0c; border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: #141417; border: 1px solid var(--line-2); color: var(--muted); border-bottom-left-radius: 4px; }
.bubble.ai b { color: var(--text); font-weight: 500; }
.bubble.ai ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ask-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid rgba(124, 108, 255, 0.35); box-shadow: 0 0 30px -8px rgba(124, 108, 255, 0.35); background: #0f0f12; font-size: 13px; color: var(--dim); }
.ask-input span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #26262b; color: var(--text); flex: none; }
.typing i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* 06 Wasserfall */
.waterfall { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; min-height: 250px; padding: 24px 6px 0; border-bottom: 1px solid var(--line); position: relative; }
.wf { position: relative; height: 100%; }
.wf i { position: absolute; left: 0; right: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--line-2); transform-origin: bottom; }
.wf.neg i { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); }
.wf.pos i { background: linear-gradient(180deg, rgba(92, 200, 255, 0.35), rgba(92, 200, 255, 0.1)); border-color: var(--accent-line); box-shadow: 0 0 30px -6px rgba(92, 200, 255, 0.5); }
.wf em { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.wf.pos em { color: var(--accent); }
.wf-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 8px 6px 0; }
.wf-labels span { font-family: var(--mono); font-size: 10px; color: var(--dim); text-align: center; line-height: 1.3; }
.wf-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.mini b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }

/* ==========================================================================
   Probleme
   ========================================================================== */

.band { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018) 12%, rgba(255, 255, 255, 0.018) 88%, transparent); }
.slider-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.slider-head .section-head { margin: 0; }
.slider-nav { display: flex; gap: 8px; }
.icon-btn { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.icon-btn:hover { background: rgba(255,255,255,.06); border-color: var(--line-3); }
.icon-btn.prev .i { transform: rotate(180deg); }

.slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: var(--gutter); scroll-padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.slider::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 360px; scroll-snap-align: start; padding: 30px; display: flex; flex-direction: column; min-height: 400px; }
.pcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px; }
.pcard-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); }
.pcard h3 { font-size: 26px; line-height: 1.1; }
.pcard p { color: var(--muted); font-size: 15px; margin: 16px 0 0; }
.slider-progress { margin-top: 36px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.slider-progress i { display: block; height: 100%; width: 20%; background: var(--text); border-radius: 2px; transition: transform 0.15s linear; }

/* ==========================================================================
   Statement + Stats
   ========================================================================== */

.statement { text-align: center; }
.statement .h2 { max-width: 980px; margin: 0 auto; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 34px 28px; text-align: left; border-right: 1px solid var(--line); background: rgba(255, 255, 255, 0.012); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(38px, 4.4vw, 58px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 14px; color: var(--muted); font-size: 14.5px; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.pillar { padding: 26px; text-align: left; }
.pillar .pcard-ico { margin-bottom: 40px; }
.pillar h4 { font-size: 18px; letter-spacing: -0.02em; }
.pillar p { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }

/* ==========================================================================
   Ergebnisse
   ========================================================================== */

.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.quote p { margin: 0; font-size: 16px; line-height: 1.6; color: #d6d6da; }
.quote-feature { grid-column: span 2; padding: 40px; justify-content: space-between; }
.quote-feature p { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.18; color: var(--text); letter-spacing: -0.01em; }
.quote-feature p .soft { color: var(--muted); }
.who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.who-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; background: linear-gradient(140deg, #2b2b33, #131316); border: 1px solid var(--line-2); flex: none; }
.who b { display: block; font-weight: 500; font-size: 14.5px; }
.who small { display: block; font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.who .pill { margin-left: auto; }

.bigstat { padding: 30px; display: flex; flex-direction: column; }
.bigstat .kpi-val { font-size: clamp(48px, 5vw, 72px); color: var(--accent); letter-spacing: -0.05em; margin: 18px 0 0; }
.bigstat .kpi-val span { color: var(--muted); font-weight: 400; font-size: 0.55em; margin: 0 6px; }
.bigstat p { color: var(--muted); font-size: 14.5px; margin: 10px 0 24px; }

.videos-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 96px 0 28px; gap: 20px; }
.videos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.video { position: relative; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85)); }
.video .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); transition: transform 0.3s var(--ease), background 0.3s; }
.video:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.2); }
.video .play .i { width: 14px; height: 14px; margin-left: 2px; }
.video .cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.video .cap b { display: block; font-weight: 500; font-size: 15px; }
.video .cap small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.eco .quote p { font-size: 15px; }

/* ==========================================================================
   Plug & Grow Bento
   ========================================================================== */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.b { padding: 26px; overflow: hidden; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.b h4 { font-size: 20px; letter-spacing: -0.025em; }
.b p { margin: 0; color: var(--muted); font-size: 14.5px; }
.b-timeline { grid-column: span 4; }
.b-msg { grid-column: span 2; }
.b-cal { grid-column: span 2; }
.b-speed { grid-column: span 2; }
.b-team { grid-column: span 2; }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; margin-top: 6px; }
.timeline::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 1px; background: linear-gradient(90deg, var(--line-3), var(--accent-line)); }
.tl { position: relative; padding-top: 42px; }
.tl::before { content: ""; position: absolute; top: 7px; left: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-3); }
.tl:last-child::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.tl .label { display: block; margin-bottom: 8px; }
.tl b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.tl .files { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.msg { padding: 14px; border-radius: 14px; background: #141417; border: 1px solid var(--line-2); }
.msg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.msg-h .who-ava { width: 30px; height: 30px; font-size: 10px; }
.msg-h b { font-weight: 500; }
.msg-h span { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.msg p { font-size: 13.5px; color: #d0d0d5; }

.invite { padding: 16px; border-radius: 14px; background: #141417; border: 1px solid var(--line-2); }
.invite .label { color: var(--accent); }
.invite b { display: block; font-weight: 500; font-size: 16px; margin: 6px 0 4px; }
.invite small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rsvp { display: flex; gap: 6px; margin-top: 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.rsvp span { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line-2); }
.rsvp span.on { background: #f4f4f5; color: #0a0a0c; border-color: #f4f4f5; }
.rsvp em { font-style: normal; margin-right: 4px; }

.gauge { position: relative; width: 100%; max-width: 250px; margin: 0 auto; }
.gauge svg { width: 100%; overflow: visible; }
.gauge .needle { transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform 2s var(--ease); }
.gauge.in .needle { transform: rotate(78deg); }
.gauge-read { margin-top: 6px; text-align: center; }
.gauge-read b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

.roles { display: grid; gap: 8px; }
.role { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.015); font-size: 14px; }
.role .i { color: var(--muted); }
.role .pill { margin-left: auto; }

/* ==========================================================================
   Über uns
   ========================================================================== */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-copy { padding: 44px; display: flex; flex-direction: column; }
.about-copy p { color: var(--muted); margin: 20px 0 0; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 32px; }
.facts .pill { font-size: 11.5px; padding: 6px 12px; }
.founder { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.founder-top { display: flex; gap: 20px; align-items: center; padding: 28px; border-bottom: 1px solid var(--line); }
.portrait { width: 96px; height: 96px; border-radius: 18px; flex: none; overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, #34343d, #0e0e10); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--muted); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder-top h3 { font-size: 26px; }
.founder-top small { font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.track { list-style: none; margin: 0; padding: 22px 28px 28px; display: grid; gap: 0; }
.track li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: #d0d0d5; }
.track li:last-child { border-bottom: 0; }
.track li span { font-family: var(--mono); font-size: 12px; color: var(--dim); padding-top: 2px; }
.track li.hi { color: var(--text); }
.track li.hi span { color: var(--accent); }

.press { display: grid; gap: 0; margin-top: 16px; }
.press-row { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line); transition: background 0.25s; }
.press-row:last-child { border-bottom: 0; }
.press-row:hover { background: rgba(255,255,255,.025); }
.press-row .label { width: 110px; flex: none; }
.press-row b { font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; flex: 1; }
.press-row .i { color: var(--dim); transition: transform 0.25s var(--ease), color 0.25s; }
.press-row:hover .i { color: var(--text); transform: translate(2px, -2px); }

/* ==========================================================================
   Vergleich
   ========================================================================== */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp { padding: 36px; }
.cmp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.cmp-h h3 { font-size: 30px; }
.cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cmp li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); font-size: 15px; }
.cmp li .i { width: 22px; height: 22px; padding: 4px; border-radius: 7px; margin-top: 0; }
.cmp-bad { background: transparent; }
.cmp-bad li { color: var(--muted); }
.cmp-bad li .i { color: var(--dim); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); }
.cmp-good { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(92, 200, 255, 0.06), rgba(92, 200, 255, 0.01)); box-shadow: 0 0 80px -30px rgba(92, 200, 255, 0.25), inset 0 1px 0 rgba(255,255,255,.05); }
.cmp-good li .i { color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-line); }

/* ==========================================================================
   Finaler CTA
   ========================================================================== */

.final { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: stretch; }
.final-copy { padding: 52px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.final-copy::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(91,140,255,.18), transparent); pointer-events: none; }
.final-copy .lead { margin-top: 22px; }
.final-copy .hero-actions { justify-content: flex-start; }
.form-card { padding: 36px; }
.form-card h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 36px; letter-spacing: -0.01em; }
.form-card > p { color: var(--muted); margin: 6px 0 26px; font-size: 15px; }
.field { margin-bottom: 14px; }
.field .label { display: block; margin-bottom: 8px; }
.field-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #0f0f12; font-size: 15px; }
.field-box .i { color: var(--dim); }
.field-box.money { border-color: var(--accent-line); color: var(--accent); background: var(--accent-bg); font-weight: 500; }
.form-card .btn { width: 100%; margin-top: 12px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-wrap .section-head { position: sticky; top: 120px; margin: 0; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); transition: border-color 0.25s, background 0.25s; }
.faq details[open] { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--muted); transition: transform 0.3s var(--ease); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq .ans { padding: 0 24px 24px; color: var(--muted); font-size: 15.5px; }
.faq .ans p { margin: 0 0 10px; }
.faq .ans p:last-child { margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { border-top: 1px solid var(--line); padding: 80px 0 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer .logo { font-size: 34px; }
.footer p { color: var(--muted); font-size: 14.5px; margin: 14px 0 0; max-width: 300px; }
.footer h5 { margin: 0 0 16px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li a, .footer li { font-size: 14.5px; color: var(--muted); }
.footer li a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.footer-bottom p { margin: 0; max-width: 760px; font-size: 12px; color: var(--dim); }
.footer-giant { margin-top: 70px; font-family: var(--serif); font-style: italic; font-size: clamp(80px, 17vw, 250px); line-height: 0.8; letter-spacing: -0.03em; text-align: center; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; user-select: none; }

/* ==========================================================================
   Scroll-Reveal
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .clock { display: none; }
  .toast-1 { left: -10px; }
  .toast-2 { right: -10px; }
}

@media (max-width: 1080px) {
  .system { grid-template-columns: 1fr; }
  .tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { width: auto; flex: none; white-space: nowrap; }
  .panel { grid-template-columns: 1fr; }
  .panels { min-height: 0; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .videos { grid-template-columns: repeat(3, 1fr); }
  .b-timeline { grid-column: span 6; }
  .b-msg, .b-cal, .b-speed, .b-team { grid-column: span 3; }
  .faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .faq-wrap .section-head { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links, .nav-right .btn { display: none; }
  .nav-toggle { display: grid; }
  .mobile-menu { display: block; position: fixed; top: 72px; left: 0; right: 0; z-index: 49; padding: 12px var(--gutter) 24px; background: rgba(5,5,6,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease); }
  .mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .mobile-menu a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .mobile-menu .btn { width: 100%; margin-top: 18px; }

  .section { padding: 100px 0; }
  .dash { grid-template-columns: 1fr; transform: none; }
  .dash-side { display: none; }
  .toast { display: none; }
  .phases, .about, .compare, .final { grid-template-columns: 1fr; }
  .results, .eco { grid-template-columns: 1fr 1fr; }
  .quote-feature { grid-column: span 2; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .slider-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding: 84px 0; }
  .section-head { margin-bottom: 44px; }
  .hero { padding: 130px 0 40px; }
  .hero-actions .btn { width: 100%; }
  .hero-visual { margin-top: 56px; }
  .dash-main { padding: 16px; }
  .dash-head .seg { display: none; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col { grid-template-columns: 1fr 1fr; }
  .dash-col .kpi-top .pill { display: none; }
  .stages { grid-template-columns: 1fr 1fr; }
  .stage:nth-child(2)::after { display: none; }
  .chart { height: 110px; }
  .demo-note { display: none; }
  .phase, .panel-copy, .about-copy, .final-copy, .form-card, .cmp, .quote-feature { padding: 26px; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .kcol:last-child { display: none; }
  .integrations { grid-template-columns: 1fr; }
  .creatives { grid-template-columns: 1fr 1fr; }
  .creatives .cr:nth-child(n + 5) { display: none; }
  .pcard { flex-basis: 84vw; min-height: 360px; }
  .results, .eco { grid-template-columns: 1fr; }
  .quote-feature { grid-column: auto; }
  .videos { grid-template-columns: repeat(2, 1fr); }
  .videos-head { flex-direction: column; align-items: flex-start; }
  .pillars { grid-template-columns: 1fr; }
  .stat { padding: 24px 18px; }
  .bento { grid-template-columns: 1fr; }
  .b-timeline, .b-msg, .b-cal, .b-speed, .b-team { grid-column: auto; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .timeline::before { display: none; }
  .press-row { flex-wrap: wrap; gap: 6px 16px; padding: 18px; }
  .press-row .label { width: auto; }
  .press-row b { flex-basis: 100%; order: 3; font-size: 15.5px; }
  .founder-top { flex-direction: column; align-items: flex-start; }
  .track li { grid-template-columns: 58px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .wf em { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Integrationen: nur Handlungsbedarf bekommt einen Button */
.integ .btn-mini:not(.warn) { display: none; }

/* ==========================================================================
   Bilder von ecom-growth.de
   ========================================================================== */

.logo-img img { height: 34px; width: auto; }
.nav .logo-img img { height: 36px; }
.dash-side .logo-img { padding: 4px 8px 18px; }
.dash-side .logo-img img { height: 28px; }
.logo-lg img { height: 52px; }

.avatars img,
.avatars span {
  width: 30px; height: 30px; border-radius: 50%;
  margin-left: -8px; border: 2px solid var(--bg);
  object-fit: cover; filter: grayscale(1) contrast(1.05);
}
.avatars > :first-child { margin-left: 0; }
.avatars span { display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; color: var(--text); background: var(--surface-3); }

.btn-play { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); margin-left: -4px; }
.btn-play .i { margin-left: 1px; }

.partners { align-items: center; gap: 14px 36px; }
.partners span { opacity: 0.75; transition: opacity 0.25s; }
.partners span:hover { opacity: 1; }
.pl-ico { height: 16px; width: auto; }
.pl-word { height: 22px; width: auto; }

/* Kundenlogos */
.logos .marquee-track { align-items: center; }
.cl { height: 34px; width: auto; max-width: 150px; object-fit: contain; opacity: 0.5; filter: grayscale(1) brightness(1.6); transition: opacity 0.3s; }
.cl:hover { opacity: 1; }
.cl-holypit, .cl-ere-studios, .cl-youngfashionmind, .cl-kuechenkompane, .cl-360-fitness { height: 46px; }
.cl-men-of-mayhem { height: 42px; }
.cl-mosquets { height: 40px; }

/* Branchen-Chips mit Shop-Vorschau */
img.chip-ico { width: 46px; height: 38px; object-fit: cover; object-position: top; padding: 0; background: #fff; }

/* Feature-Testimonial mit Video */
.quote-feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: stretch; }
.qf-copy { display: flex; flex-direction: column; gap: 24px; }
.qlogo-top { height: 38px; width: auto; align-self: flex-start; opacity: 0.8; }
.qf-video { position: relative; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; padding: 0; background: #000; min-height: 260px; }
.qf-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.qf-video:hover img { transform: scale(1.04); }
.qf-video::after, .vthumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6)); }
.qf-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; color: var(--text); }

.play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; transition: transform 0.3s var(--ease), background 0.3s; }
.play .i { width: 16px; height: 16px; margin-left: 3px; }
.qf-video:hover .play, .vthumb:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.24); }

/* Zitate mit Foto */
.qimg { padding: 0; overflow: hidden; gap: 0; }
.qimg > p, .qimg > .who { padding: 0 26px; }
.qimg > p { padding-top: 22px; }
.qimg > .who { padding-bottom: 24px; margin-top: 20px; }
.qphoto { position: relative; height: 210px; overflow: hidden; }
.qphoto img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.8s var(--ease); }
.qimg:hover .qphoto img:first-child { transform: scale(1.04); }
.qphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,0) 35%, rgba(12,12,14,.95)); }
.qlogo { position: absolute; left: 22px; bottom: 16px; z-index: 2; height: 28px; width: auto; max-width: 140px; object-fit: contain; }
img.who-ava { object-fit: cover; padding: 0; }

/* Video-Stories */
.videos { grid-template-columns: repeat(6, 1fr); gap: 16px; }
.vcard { grid-column: span 2; overflow: hidden; display: flex; flex-direction: column; }
.vcard-lg { grid-column: span 3; }
.vthumb { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; padding: 0; border: 0; border-bottom: 1px solid var(--line); overflow: hidden; background: #000; }
.vcard-lg .vthumb { aspect-ratio: 16 / 10; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.vthumb:hover img { transform: scale(1.04); }
.vstat { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 12px; padding: 5px 11px; }
.vbody { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.vbody p { margin: 0; color: #d6d6da; font-size: 15px; line-height: 1.6; }
.vbody .who { margin-top: auto; }

/* Founder */
.founder-photo { position: relative; height: 440px; overflow: hidden; border-bottom: 1px solid var(--line); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,10,12,.96)); }
.founder-cap { position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 2; }
.founder-cap small { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.founder-cap h3 { font-size: 30px; margin-top: 4px; }
.founder-cap p { margin: 6px 0 0; color: #c9c9cf; font-size: 14.5px; max-width: 420px; }

/* Galerie */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; margin-top: 16px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35)); pointer-events: none; }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.8s var(--ease), filter 0.5s; }
.gallery figure:hover img { transform: scale(1.04); filter: saturate(1); }
.g-big { grid-row: span 2; }

/* Presse */
.press-head { margin: 64px 0 18px; }
.press-logo { width: 150px; flex: none; display: flex; align-items: center; }
.press-logo img { height: 22px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.7; filter: grayscale(1) brightness(1.8); transition: opacity 0.25s; }
.press-row:hover .press-logo img { opacity: 1; }

/* Video-Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.8); transform: scale(0.97); transition: transform 0.4s var(--ease); }
.modal.open .modal-box { transform: none; }
.modal-box iframe { width: 100%; height: 100%; border: 0; }
.modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); display: grid; place-items: center; }

@media (max-width: 1080px) {
  .quote-feature { grid-template-columns: 1fr; }
  .qf-video { min-height: 0; aspect-ratio: 5 / 4; }
  .vcard, .vcard-lg { grid-column: span 3; }
  .vcard:last-child { grid-column: span 6; }
}
@media (max-width: 640px) {
  .videos { grid-template-columns: 1fr; }
  .vcard, .vcard-lg, .vcard:last-child { grid-column: auto; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 150px 150px; }
  .g-big { grid-column: span 2; grid-row: auto; }
  .founder-photo { height: 380px; }
  .press-logo { width: auto; }
  .cl { height: 28px; }
  .cl-holypit, .cl-ere-studios, .cl-youngfashionmind, .cl-kuechenkompane, .cl-360-fitness { height: 38px; }
}

/* Feinschliff */
.qf-video img { object-position: 78% 35%; }
.quote-feature .qf-copy p { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.22; }
.cl { height: 28px; opacity: 0.45; }
.cl-holypit, .cl-ere-studios, .cl-youngfashionmind, .cl-360-fitness { height: 40px; }
.cl-kuechenkompane { height: 50px; }
.cl-men-of-mayhem, .cl-mosquets { height: 38px; }
.qlogo { height: 26px; }
.qimg:nth-child(6) .qlogo { height: 34px; }

/* ==========================================================================
   v3: Logo-Duo, Agentur-Hero, Beratung + Software, Problem-Grid,
   Strippenzieher, Kommunikation
   ========================================================================== */

/* Logo-Duo */
.brandlock { display: inline-flex; align-items: center; gap: 14px; }
.brandlock img { width: auto; display: block; }
.bl-wl { height: 34px; }
.bl-eo { height: 25px; }
.bl-sep { width: 1px; height: 26px; background: var(--line-3); }
.brandlock-lg .bl-wl { height: 48px; }
.brandlock-lg .bl-eo { height: 35px; }
.brandlock-lg .bl-sep { height: 36px; }

.tico { width: 18px; height: 18px; flex: none; }
.tools { display: inline-flex; gap: 4px; }

/* Mini-Avatare */
.mini-ava { width: 20px; height: 20px; border-radius: 6px; flex: none; display: inline-grid; place-items: center; font-family: var(--mono); font-size: 8.5px; color: #fff; background: #2a2a31; }
.a2 { background: linear-gradient(140deg, #2c4a8a, #1a2747); }
.a3 { background: linear-gradient(140deg, #7a4a2a, #3a2416); }
.a4 { background: linear-gradient(140deg, #5a3a7a, #2a1c3a); }
.a5 { background: linear-gradient(140deg, #1f6a4a, #0f3325); }
.a6 { background: linear-gradient(140deg, #6a6a2a, #33330f); }

/* Hero-Grafik */
.hero-visual { max-width: 1180px; height: 720px; margin: 70px auto 0; display: grid; place-items: center; perspective: none; }
.orbit { position: absolute; inset: 0; pointer-events: none; }
.ring { position: absolute; left: 50%; top: 50%; width: 1100px; height: 500px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; transform: translate(-50%, -50%) rotate(-7deg); }
.ring-2 { border-style: dashed; border-color: rgba(255, 255, 255, 0.06); }
.onode {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(17, 17, 20, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13.5px; white-space: nowrap; color: var(--text);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
  will-change: transform; transform: translate(-50%, -50%);
}
.onode-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); }
.onode-ico .i { width: 14px; height: 14px; }

.hq { position: relative; z-index: 3; width: min(800px, 100%); }
.slack { display: grid; grid-template-columns: 210px 1fr; height: 500px; text-align: left; }
.slack-side { background: #0a0a0c; border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ws { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ws-ico { width: 34px; height: 34px; border-radius: 9px; background: #141417; border: 1px solid var(--line-2); display: grid; place-items: center; }
.ws-ico img { width: 26px; height: auto; }
.ws b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.ws small { font-size: 11.5px; color: var(--muted); }
.slack-side .label { padding: 10px 8px 4px; font-size: 10px; }
.slack-side a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.slack-side a.on { background: rgba(91, 140, 255, 0.16); color: #fff; }
.slack-side .dm img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: none; }
.online { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; }
.slack-main { display: flex; flex-direction: column; min-width: 0; }
.slack-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.slack-head-r { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; }
.stack > * { width: 22px; height: 22px; border-radius: 6px; margin-left: -6px; border: 2px solid #0e0e11; object-fit: cover; }
.stack > :first-child { margin-left: 0; }
.huddle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line-2); color: var(--muted); }
.feed { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.msg-row { display: flex; gap: 12px; font-size: 13.5px; }
.mini-ava.lg { width: 34px; height: 34px; border-radius: 9px; font-size: 10px; }
.mh { display: flex; align-items: center; gap: 8px; }
.mh b { font-weight: 600; font-size: 13.5px; }
.mh .pill { font-size: 9.5px; padding: 1px 7px; }
.mh time { font-size: 11px; color: var(--dim); }
.msg-row p { margin: 2px 0 0; color: #cfcfd4; line-height: 1.45; }
.msg-row p b { font-weight: 600; }
.att { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #111114; }
.att-chart { display: flex; align-items: center; gap: 12px; padding: 8px 12px; max-width: 340px; }
.att-chart .spark { height: 30px; margin: 0; flex: 1; }
.att-ads { display: flex; gap: 6px; padding: 6px; width: max-content; }
.att-ads > span { position: relative; width: 52px; height: 64px; border-radius: 7px; overflow: hidden; }
.att-ads em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-family: var(--mono); font-size: 8px; padding: 1px 5px; border-radius: 99px; background: rgba(92, 200, 255, 0.18); color: var(--accent); border: 1px solid var(--accent-line); }
.att-ads .more { display: grid; place-items: center; background: #18181c; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.composer { margin: 0 18px 16px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; color: var(--dim); display: flex; justify-content: space-between; gap: 10px; }
.typing-line { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.typing-line .typing i { width: 4px; height: 4px; margin-right: 2px; }

.float { position: absolute; z-index: 5; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(16, 16, 19, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.9); text-align: left; animation: float 8s ease-in-out infinite; }
.wa { width: 282px; right: -150px; top: -46px; overflow: hidden; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0f2a20; border-bottom: 1px solid rgba(37, 211, 102, 0.2); }
.wa-head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.wa-head b { display: block; font-size: 13px; font-weight: 600; }
.wa-head small { font-size: 11px; color: #7ee2a8; }
.wa-head .tico { margin-left: auto; }
.wa-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #0b0f0d; }
.wb { max-width: 88%; padding: 8px 10px 6px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; color: #e6e6e8; }
.wb time { display: block; text-align: right; font-size: 9.5px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.wb.in { background: #1d1f1e; align-self: flex-start; border-top-left-radius: 3px; }
.wb.out { background: #005c4b; align-self: flex-end; border-top-right-radius: 3px; }
.zoom { width: 300px; left: -160px; bottom: -56px; padding: 10px; animation-delay: -4s; }
.zoom-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 2px 10px; }
.zoom-head b { font-weight: 600; }
.rec { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: #ff6b6b; }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: blink 1.4s infinite; }
.zoom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zt { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #18181c; display: grid; place-items: center; }
.zt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zt > span:last-child { position: absolute; left: 6px; bottom: 5px; font-size: 10px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.zt-ini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: #fff; background: #2a2a31; }
.zt:first-child { box-shadow: inset 0 0 0 2px var(--accent); }
.zoom-bar { display: flex; gap: 6px; margin-top: 8px; }
.zoom-bar span { height: 28px; min-width: 32px; border-radius: 7px; display: grid; place-items: center; background: #1b1b20; color: var(--muted); font-size: 11px; padding: 0 8px; }
.zoom-bar .leave { margin-left: auto; background: #c93838; color: #fff; }
.hero-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* System: Beratung + Software */
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.formula span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 14px; }
.formula span .i { width: 15px; height: 15px; color: var(--muted); }
.formula em { font-style: normal; color: var(--dim); font-family: var(--mono); }
.formula .formula-res { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent); }
.formula .formula-res .i { color: var(--accent); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.duo > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.duo .label { display: block; margin-bottom: 4px; font-size: 10px; }
.duo b { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13.5px; }
.duo .i { width: 14px; height: 14px; color: var(--muted); }
.panel-ui { position: relative; }
.panel-ui .ui-body { padding-bottom: 108px; }
.cnote { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(124, 108, 255, 0.38); background: rgba(21, 19, 33, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); }
.cnote::before { content: "Berater-Kommentar"; position: absolute; top: -10px; right: 14px; font-family: var(--mono); font-size: 9.5px; padding: 1px 8px; border-radius: 99px; background: #1c1830; border: 1px solid rgba(124, 108, 255, 0.45); color: #b7adff; }
.cnote > img, .cnote > .mini-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 9.5px; }
.cnote b { display: block; font-size: 12.5px; font-weight: 600; }
.cnote div > span { font-size: 13px; color: #d4d4dc; line-height: 1.45; }
.call-people { display: flex; align-items: center; gap: 8px; }
.call-people img, .call-people .zt-ini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 9px; }
.call-people small { font-size: 12px; color: var(--muted); }
.proto { display: grid; gap: 8px; }
.proto-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); display: grid; gap: 6px; }
.proto-row .pill { justify-self: start; }
.proto-row b { font-weight: 500; font-size: 14px; }
.proto-row small { font-size: 12px; color: var(--muted); }
.ui-title .pill .tico { width: 13px; height: 13px; }

/* Problem-Grid */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pgrid .pcard { flex: none; min-height: 0; padding: 14px 14px 30px; }
.pgrid .pcard > :not(.pviz) { margin-left: 14px; margin-right: 14px; }
.pgrid .pcard > .label { margin-bottom: 10px; }
.pgrid .pcard h3 { font-size: 25px; }
.pviz { position: relative; height: 200px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, #0f0f12, #0a0a0c); padding: 16px; margin-bottom: 24px; overflow: hidden; }
.pviz-legend { display: flex; gap: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 8px; }
.pviz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-bar { width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.lg-line { width: 14px; height: 2px; background: #ff6b6b; }
.lg-white { background: rgba(255, 255, 255, 0.8); }
.lg-dash { width: 14px; border-top: 2px dashed rgba(92, 200, 255, 0.7); }
.pv-svg { width: 100%; height: calc(100% - 24px); }
.pill-red { color: #ff8a8a; border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); }
.pv-tag { position: absolute; right: 14px; top: 14px; }
.hop { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.hop-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: #131316; font-size: 13px; }
.hop-row b { font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, 0.7); color: var(--muted); }
.hop-row em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-left: auto; }
.hop-row .i { width: 14px; height: 14px; color: #ff6b6b; }
.hop-n { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.hop-next { border-style: dashed; background: transparent; }
.hop-next b { text-decoration: none; color: var(--text); }
.pbars { display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.pbars > .label { margin-bottom: 2px; }
.br { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.bt { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.bt i { display: block; height: 100%; border-radius: 99px; background: rgba(255, 255, 255, 0.35); }
.br b { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--text); text-align: right; }
.br-real .bt i { background: var(--amber); }
.br-real span, .br-real b { color: var(--amber); }
.pcopy { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.pcopy .pv-tag { top: 14px; left: 50%; right: auto; transform: translateX(-50%); }
.ad { width: 100px; }
.ad-th { position: relative; height: 104px; border-radius: 9px; border: 1px solid var(--line-2); }
.ad-th span { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 10.5px; line-height: 1.25; color: #fff; }
.ad small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--dim); text-align: center; }
.copy-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); align-self: center; }
.copy-arrow em { font-style: normal; font-family: var(--mono); font-size: 9.5px; }
.tasks { display: flex; flex-direction: column; gap: 6px; }
.tk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.tk-head .pill .i { width: 11px; height: 11px; }
.tk { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; background: #121215; }
.tk > i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--dim); }
.ava-du { margin-left: auto; font-family: var(--mono); font-size: 9.5px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 107, 107, 0.1); color: #ff8a8a; border: 1px solid rgba(255, 107, 107, 0.35); }
.tk-more { justify-content: center; color: #ff8a8a; border-style: dashed; background: transparent; font-family: var(--mono); font-size: 10.5px; }

/* Strippenzieher */
.puppet { position: relative; max-width: 960px; margin: 40px auto 0; }
.puppet-svg { width: 100%; height: auto; overflow: visible; }
.rig { transform-box: view-box; transform-origin: 480px 20px; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
.pp-toast { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--accent-line); background: rgba(10, 20, 32, 0.92); font-size: 12.5px; color: #dcf0fd; white-space: nowrap; opacity: 0; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7); animation: ppToast 7.5s ease-in-out infinite; }
.pp-toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pp-toast.t1 { left: 63%; top: 68%; animation-delay: 0.5s; }
.pp-toast.t2 { left: 7%; top: 60%; animation-delay: 3s; }
.pp-toast.t3 { left: 70%; top: 42%; animation-delay: 5.5s; }
@keyframes ppToast { 0% { opacity: 0; transform: translateY(8px); } 6%, 26% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
.statement .statement-lead { margin: 36px auto 0; max-width: 680px; }

/* Kommunikation im Bento */
.b-tool { grid-column: span 2; }
.tool-top { display: flex; align-items: center; gap: 8px; }
.tool-top .pill, .tool-top .rec { margin-left: auto; }
.sl-mini { border: 1px solid var(--line-2); border-radius: 12px; background: #111114; padding: 12px; display: grid; gap: 10px; }
.sl-ch { font-size: 12.5px; font-weight: 600; padding: 0 2px 8px; border-bottom: 1px solid var(--line); }
.sl-m { display: flex; gap: 10px; }
.sl-m .mini-ava { width: 26px; height: 26px; border-radius: 7px; font-size: 9px; }
.sl-m b { font-size: 12.5px; font-weight: 600; }
.sl-m time { font-size: 10.5px; color: var(--dim); margin-left: 6px; }
.b .sl-m p { margin: 1px 0 0; font-size: 12.5px; color: #cfcfd4; }
.zg-lg .zt { aspect-ratio: 16 / 11; }
.wa-card { border-radius: 12px; border: 1px solid rgba(37, 211, 102, 0.18); }
.b-inhouse { grid-column: span 6; display: grid; grid-template-columns: 1fr 1.7fr; gap: 28px; align-items: center; }
.inhouse-copy h4 { font-size: 28px; margin-top: 8px; }
.inhouse-copy p { margin-top: 8px; }
.roles-row { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.role-ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Zwei Marken */
.duo-head { text-align: center; margin-top: 72px; }
.duo-head + .phases { margin-top: 18px; }
.phase-logo { height: 30px; width: auto; }

@media (max-width: 1180px) {
  .wa { right: -30px; top: -60px; }
  .zoom { left: -30px; }
}
@media (max-width: 1080px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
  .b-tool { grid-column: span 3; }
  .b-inhouse { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-visual { height: auto; display: block; margin-top: 56px; }
  .orbit { display: none; }
  .hq { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .slack { grid-column: span 2; grid-template-columns: 1fr; height: auto; }
  .slack-side { display: none; }
  .float { position: relative; inset: auto; width: auto; animation: none; }
  .hero-caption { position: static; display: block; text-align: center; transform: none; margin-top: 16px; white-space: normal; }
}
@media (max-width: 640px) {
  .bl-wl { height: 28px; }
  .bl-eo { height: 20px; }
  .brandlock { gap: 10px; }
  .hq { grid-template-columns: 1fr; }
  .slack { grid-column: auto; }
  .slack-head-r .huddle { display: none; }
  .composer .typing-line { display: none; }
  .feed { padding: 12px; }
  .msg-row:nth-child(3) { display: none; }
  .pgrid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .panel-ui .ui-body { padding-bottom: 130px; }
  .pp-toast { font-size: 10px; padding: 4px 8px; gap: 5px; }
  .pp-toast.t2 { left: 1%; }
  .pp-toast.t1 { left: 56%; }
  .pp-toast.t3 { left: 62%; }
}

/* v3 Feinschliff */
.float { z-index: 8; }
.bl-eo { height: 30px; }
.brandlock-lg .bl-eo { height: 42px; }
.hero .lead { max-width: 720px; }
.zoom { left: -190px; bottom: -92px; }
@media (max-width: 1180px) { .zoom { left: -30px; bottom: -70px; } }
@media (max-width: 900px) { .zoom { left: auto; bottom: auto; } }
@media (max-width: 640px) { .bl-eo { height: 24px; } }
.roles-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.roles-row .role { white-space: nowrap; font-size: 13.5px; }
.roles-row .pill { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.msg-row > div { min-width: 0; }
.att-ads { max-width: 100%; overflow: hidden; }
@media (max-width: 640px) {
  .att-chart { max-width: 100%; }
  .att-chart .pill { display: none; }
  .att-ads > span { width: 44px; height: 56px; flex: none; }
  .puppet { margin-left: -8px; margin-right: -8px; }
}

/* ==========================================================================
   v4: Trustpilot, Shop-Titel, Case Studies
   ========================================================================== */

/* Trustpilot-Badge */
.tp-badge {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 9px 16px 9px 14px; margin-bottom: 34px;
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px -24px rgba(0,182,122,.45);
  font-size: 14px; color: var(--muted);
  transition: border-color .25s, transform .25s var(--ease);
}
.tp-badge:hover { border-color: rgba(0,182,122,.55); transform: translateY(-1px); }
.tp-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15.5px; color: #fff; letter-spacing: -0.01em; }
.tp-ico { width: 20px; height: 20px; }
.tp-stars { display: inline-flex; gap: 3px; }
.tp-stars i { width: 22px; height: 22px; display: grid; place-items: center; background: #00B67A; border-radius: 3px; }
.tp-stars i svg { width: 16px; height: 16px; }
.tp-stars .tp-part { background: linear-gradient(90deg, #00B67A 40%, #3a3a42 40%); }
.tp-stars-sm i { width: 17px; height: 17px; }
.tp-stars-sm i svg { width: 12px; height: 12px; }
.tp-score b { color: #fff; font-weight: 600; }
.tp-score span { color: var(--dim); }
.tp-sep { width: 1px; height: 22px; background: var(--line-2); }
.tp-google { display: inline-flex; align-items: center; gap: 6px; }
.tp-google b { color: #fff; font-weight: 600; }
.tp-google::after { content: "★"; color: #f5c451; font-size: 13px; }

/* Shop-Titel mit Logos */
.h1-shop { font-size: clamp(36px, 4.7vw, 68px); line-height: 1.04; max-width: 1180px; }
.h1-shop > span { display: block; }
.shopchip {
  display: inline-flex; align-items: center; gap: .18em;
  padding: .04em .28em .06em .16em; margin: 0 .04em;
  border-radius: .26em; font-size: .78em; line-height: 1.1; vertical-align: .06em;
  color: #fff; background: rgba(149,191,71,.12); border: 1px solid rgba(149,191,71,.38);
  letter-spacing: -0.03em;
}
.shopchip svg { width: 1.05em; height: 1.05em; flex: none; }
.shopchip-woo { background: rgba(127,84,179,.16); border-color: rgba(150,110,210,.45); }

/* Teaser auf der Startseite */
.cases-teaser { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 16px; padding: 34px 36px; border-radius: var(--radius); border: 1px solid var(--accent-line); background: radial-gradient(600px 200px at 0% 0%, rgba(92,200,255,.1), transparent), rgba(255,255,255,.015); }
.cases-teaser .h3 { margin-top: 8px; }
.cases-teaser p { color: var(--muted); margin: 10px 0 0; max-width: 560px; }
.videos-head + .eco, .cases-teaser + .eco { margin-top: 16px; }

.nav-links a.active { color: var(--text); background: rgba(255,255,255,.06); }

/* Modal für Bilder */
.modal-img .modal-box { aspect-ratio: auto; width: auto; max-width: min(1000px, 100%); max-height: 88vh; background: #0b0b0d; display: grid; place-items: center; }
.modal-img .modal-box img { max-width: 100%; max-height: 88vh; object-fit: contain; }

/* Case-Study-Seite */
.cs-hero { padding-bottom: 20px; }
.cs-hero .h1 { font-size: clamp(40px, 5.4vw, 78px); }
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 980px; margin: 56px auto 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cs-stats > div { padding: 24px 20px; border-right: 1px solid var(--line); background: rgba(255,255,255,.015); }
.cs-stats > div:last-child { border-right: 0; }
.cs-stats b { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.cs-stats b .tico { width: 26px; height: 26px; }
.cs-stats span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.cs-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cs-jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.cs-jump a:hover { color: var(--text); border-color: var(--line-3); background: rgba(255,255,255,.04); }
.cs-section { padding: 110px 0; scroll-margin-top: 60px; }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); font-size: 14px; color: var(--muted); transition: all .2s; }
.filter button span { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.filter button:hover { color: var(--text); border-color: var(--line-3); }
.filter button.on { background: #f4f4f5; color: #0a0a0c; border-color: #f4f4f5; }
.filter button.on span { color: #55555c; }

.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vcs { overflow: hidden; display: flex; flex-direction: column; }
.vcs[hidden] { display: none; }
.vcs-lg { grid-column: span 1; }
.vcs .vthumb { aspect-ratio: 16 / 9; }
.vtype { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--mono); font-size: 10.5px; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); }
.vcs .vbody { gap: 14px; }
.vcs .vbody p { font-size: 14.5px; }
.vcs-who { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.vcs-who b { display: block; font-weight: 500; font-size: 15px; }
.vcs-who small { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.vcs-who small a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.vcs-who small a:hover { color: var(--text); }
.vcs-who .pill { flex: none; }

.cs-list { display: grid; gap: 16px; }
.cs { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; overflow: hidden; }
.cs-rev .cs-copy { order: 2; }
.cs-copy { padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.cs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.cs blockquote { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; color: #e4e4e7; }
.cs blockquote cite { display: block; margin-top: 10px; font-family: var(--mono); font-style: normal; font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-one { grid-template-columns: 1fr; }
.ba > div { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.ba p { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.ba .ba-after { border-color: var(--accent-line); background: var(--accent-bg); }
.ba .ba-after .label { color: var(--accent); }
.ba .ba-after p { color: #d6ecfb; }
.cs-ig { display: block; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #f5f5f7; text-align: left; cursor: zoom-in; }
.cs-ig .label { display: block; color: #6b6b73; margin: 0 0 6px 2px; font-size: 10px; }
.cs-ig img { width: 100%; max-height: 110px; object-fit: cover; object-position: top left; border-radius: 6px; }
.cs-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-top: auto; }
.cs-link:hover { color: var(--text); }
.cs-media { position: relative; min-height: 380px; border: 0; padding: 0; background: #0b0b0d; overflow: hidden; }
.cs-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
button.cs-media:hover img { transform: scale(1.04); }
button.cs-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
.cs-media-light { background: #fff; }
.cs-media-light img { object-fit: contain; padding: 40px; }
button.cs-media:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.24); }

.shots { columns: 4 240px; column-gap: 14px; }
.shot { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff; break-inside: avoid; cursor: zoom-in; transition: transform .3s var(--ease), border-color .3s; }
.shot:hover { transform: translateY(-2px); border-color: var(--line-3); }
.shot img { width: 100%; height: auto; }

.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.review { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.rv-top { display: flex; justify-content: space-between; align-items: center; }
.review h4 { font-size: 19px; letter-spacing: -0.02em; }
.review p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.review .who { margin-top: 8px; }

.cs-cta { padding: 64px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; background: radial-gradient(700px 260px at 50% 0%, rgba(92,200,255,.1), transparent), rgba(255,255,255,.015); }
.cs-cta .h2 { margin-top: 16px; }
.cs-cta .lead { margin: 20px auto 0; }

@media (max-width: 1080px) {
  .vgrid { grid-template-columns: 1fr 1fr; }
  .cs { grid-template-columns: 1fr; }
  .cs-rev .cs-copy { order: 0; }
  .cs-media { min-height: 300px; order: -1; }
  .cases-teaser { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .tp-badge { gap: 10px; padding: 9px 12px; }
  .tp-score span, .tp-sep, .tp-google { display: none; }
  .tp-stars i { width: 19px; height: 19px; }
  .h1-shop { font-size: 34px; }
  .cs-stats { grid-template-columns: 1fr 1fr; }
  .cs-stats > div:nth-child(2) { border-right: 0; }
  .cs-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .vgrid, .reviews { grid-template-columns: 1fr; }
  .cs-copy { padding: 26px; }
  .ba { grid-template-columns: 1fr; }
  .cs-media { min-height: 240px; }
  .shots { columns: 2 140px; column-gap: 10px; }
  .shot { margin-bottom: 10px; }
  .cases-teaser { padding: 26px; }
  .cases-teaser .btn { width: 100%; }
  .cs-cta { padding: 44px 22px; }
}
.nav-links a { white-space: nowrap; }
@media (max-width: 1320px) { .clock { display: none; } }
@media (max-width: 1040px) { .nav-links a { padding: 8px 10px; } }
.h1-shop { font-size: clamp(34px, 4.4vw, 64px); }
.shopchip { font-size: .64em; margin: 0 .02em; padding: .08em .3em .1em .18em; vertical-align: .12em; }
@media (max-width: 640px) { .h1-shop { font-size: 32px; } .shopchip { font-size: .72em; } }

/* ==========================================================================
   v5: Ticker, Trustpilot, App-Icons, Hero-Tools, Marken, Taktiken,
   Inhouse-Aufbau, Über uns
   ========================================================================== */

/* Uhr-Ticker in der Navigation */
.clock { gap: 10px; padding: 0 12px; max-width: 250px; }
.clock > .i { color: var(--dim); flex: none; }
.clock-track { width: 200px; }
.clock-track .marquee-track { align-items: center; }
.city { font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; letter-spacing: .04em; }
.city b { color: var(--text); font-weight: 500; margin-left: 4px; }
@media (max-width: 1320px) { .clock { display: inline-flex; } }
@media (max-width: 1140px) { .clock { display: none; } }

/* Trustpilot */
.tp-badge { gap: 12px; padding: 10px 18px; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -30px rgba(0,182,122,.55); }
.tp-rating { font-weight: 600; font-size: 15.5px; color: #fff; letter-spacing: -.01em; }
.tp-stars { gap: 2px; }
.tp-stars i { width: 26px; height: 26px; border-radius: 1px; background: linear-gradient(180deg, #00c687, #00a66f); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12); }
.tp-stars i svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)); }
.tp-stars .tp-part { background: linear-gradient(90deg, #00b67a 0 42%, #45454d 42% 100%); }
.tp-stars-sm i { width: 18px; height: 18px; }
.tp-stars-sm i svg { width: 13px; height: 13px; }
.tp-meta { font-size: 13.5px; color: var(--muted); }
.tp-meta b { color: #fff; font-weight: 600; }
.tp-logo { font-size: 15px; }
.tp-ico { width: 19px; height: 19px; }
.tp-google::after { content: none; }
.tp-gstar { color: #f5c451; font-size: 13px; }

/* App-Icons im Titel */
.appicons { display: inline-flex; gap: .16em; margin-left: .08em; vertical-align: -.1em; }
.appicon {
  position: relative; display: inline-grid; place-items: center;
  width: 1.02em; height: 1.02em; border-radius: .235em;
  background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -.03em .06em rgba(0,0,0,.08), 0 .1em .28em rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-5deg);
}
.appicon img, .appicon svg { width: 64%; height: 64%; object-fit: contain; }
.appicon-woo { transform: rotate(5deg); }
.appicon-woo img { width: 74%; }
.appicon-sm { width: 34px; height: 34px; border-radius: 9px; transform: none; box-shadow: inset 0 -1px 2px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.6); }
.appicon-xs { width: 22px; height: 22px; border-radius: 6px; transform: none; box-shadow: none; }
.appicon-dk { background: linear-gradient(180deg, #2a2a30, #121215); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px -6px rgba(0,0,0,.6); }
.h1-shop .soft { color: var(--muted); }

/* Hero-Werkzeuge */
.hero-visual { height: 790px; }
.mention { color: #8fb3ff; background: rgba(91,140,255,.16); border-radius: 4px; padding: 0 3px; }
.fl-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 10px; }
.fl-head b { font-weight: 600; }
.fl-head .pill, .fl-head .label { margin-left: auto; }
.fl-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.fl-meta { width: 330px; right: -175px; top: -62px; padding: 12px; }
.adm { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 11.5px; }
.adm-row { display: grid; grid-template-columns: 1fr 50px 36px; gap: 8px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); }
.adm-row b { text-align: right; font-weight: 600; font-family: var(--mono); font-size: 11px; }
.adm-row > span:nth-child(2) { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.adm-h { border-top: 0; font-family: var(--mono); font-size: 9.5px; color: var(--dim); text-transform: uppercase; background: rgba(255,255,255,.02); }
.adm-h span:last-child { text-align: right; }
.adm-row > span:first-child { display: flex; gap: 7px; align-items: center; white-space: nowrap; overflow: hidden; }
.adm-off { opacity: .45; }
.tgl { position: relative; width: 20px; height: 11px; border-radius: 99px; background: #3a3a42; flex: none; }
.tgl::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.tgl.on { background: #0081FB; }
.tgl.on::after { left: 10.5px; }
.fl-gads { width: 236px; left: -165px; top: -78px; padding: 12px; animation-delay: -2s; }
.fl-gads .label { display: block; font-size: 10px; }
.gads-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 2px; }
.gads-kpi b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.gads-kpi small { font-size: 10.5px; color: var(--dim); }
.fl-gads .spark { height: 32px; margin-top: 6px; }
.fl-shop { width: 300px; right: -165px; bottom: -92px; padding: 12px; animation-delay: -5s; }
.pdp { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px; border-radius: 10px; background: #f6f6f7; color: #111; }
.pdp-img { border-radius: 8px; min-height: 124px; }
.pdp-info b { display: block; font-size: 13px; font-weight: 600; }
.pdp-info small { display: block; font-size: 12px; color: #555; margin-bottom: 4px; }
.pdp-new { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; padding: 3px 6px; border-radius: 6px; background: #e6f4fe; color: #0a64a8; outline: 1.5px dashed #3aa9f0; outline-offset: 1px; }
.pdp-btn { display: block; margin-top: 8px; text-align: center; font-size: 10.5px; padding: 6px; border-radius: 6px; background: #111; color: #fff; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.hero-visual .zoom { left: -190px; bottom: -96px; }
.att-chart .tico { width: 16px; height: 16px; }

/* Avatar-Farben (spät deklariert, damit sie überall greifen) */
.a2 { background: linear-gradient(140deg, #2c4a8a, #1a2747); }
.a3 { background: linear-gradient(140deg, #7a4a2a, #3a2416); }
.a4 { background: linear-gradient(140deg, #5a3a7a, #2a1c3a); }
.a5 { background: linear-gradient(140deg, #1f6a4a, #0f3325); }
.a6 { background: linear-gradient(140deg, #6a6a2a, #33330f); }
.a7 { background: linear-gradient(140deg, #4d4d58, #1e1e24); }
.a8 { background: linear-gradient(140deg, #8a2c5a, #3a1226); }

/* Zwei Marken */
.brands-head { text-align: center; max-width: 720px; margin: 72px auto 0; }
.brands-head .h3 { margin-top: 10px; }
.brands-head p { color: var(--muted); margin: 12px 0 0; }
.scale { margin: 32px 0 16px; }
.scale-track { position: relative; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5%), rgba(255,255,255,.01); }
.seg { position: absolute; top: 5px; bottom: 5px; border-radius: 8px; display: grid; place-items: center; }
.seg img { height: 20px; width: auto; }
.seg-orbit { background: rgba(255,255,255,.08); border: 1px solid var(--line-3); margin-left: 5px; }
.seg-wl { background: var(--accent-bg); border: 1px solid var(--accent-line); margin-left: -5px; }
.scale-ticks { position: relative; height: 18px; margin-top: 8px; }
.scale-ticks span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
.scale-ticks span:first-child { transform: none; }
.scale-ticks span:last-child { transform: translateX(-100%); }
.brands-head + .scale + .phases { margin-top: 0; }
.phase .label { display: block; }
.phase h3 { margin-top: -6px; }
.phase .ticks { margin: 0; padding: 0; }
.phase-btn { margin-top: 8px; width: 100%; justify-content: space-between; }

/* Taktiken */
.tactics .b { gap: 16px; }
.t-hooks { grid-column: span 4; }
.t-bundle, .t-ai, .t-track { grid-column: span 2; }
.t-stock, .t-retention { grid-column: span 3; }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hooks { display: grid; gap: 8px; }
.hk { display: grid; grid-template-columns: 22px 1.5fr 1fr 42px; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); font-size: 13.5px; }
.hk-n { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.hk-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.hk-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(92,200,255,.4), var(--accent)); }
.hk b { font-family: var(--mono); font-size: 12px; text-align: right; font-weight: 500; }
.hk-dead { opacity: .5; }
.hk-dead .hk-bar i { background: #ff6b6b; }
.vs { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.vs em { font-style: normal; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; color: #ff8a8a; }
.vs span:last-child { color: #e4e4e7; }
.vs span:last-child em { color: var(--accent); }
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.of { padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); text-align: center; background: rgba(255,255,255,.015); }
.of small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.of b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin: 6px 0 4px; }
.of span { font-size: 12.5px; }
.of-bad span { color: #ff8a8a; }
.of-good { border-color: var(--accent-line); background: var(--accent-bg); }
.of-good span { color: var(--accent); }
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.flow span { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: #131316; font-size: 12.5px; white-space: nowrap; }
.flow i { flex: 1; min-width: 8px; height: 1px; background: linear-gradient(90deg, var(--line-3), var(--accent-line)); }
.flow .flow-end { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent); }
.pipe { display: flex; align-items: center; gap: 8px; }
.pipe > i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); background-size: 20px 2px; animation: pipeflow 1s linear infinite; }
@keyframes pipeflow { to { background-position: 20px 0; } }
.pipe-srv { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: #131316; font-family: var(--mono); font-size: 11px; }
.pipe-out { display: grid; gap: 6px; }
.stock { display: grid; gap: 10px; }
.st { display: grid; grid-template-columns: 1.3fr 1fr 64px; gap: 12px; align-items: center; font-size: 13px; }
.st-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 99px; background: rgba(255,255,255,.4); }
.st-bar i.warn { background: var(--amber); }
.st b { font-family: var(--mono); font-size: 12px; text-align: right; font-weight: 500; }
.st-warn { color: var(--amber); }
.t-retention .appicon-sm svg { width: 55%; }

/* Inhouse-Aufbau */
.inhouse { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.015); }
.step-n { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; color: var(--accent); min-width: 44px; }
.steps h4 { font-size: 18px; letter-spacing: -.02em; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.org { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.org-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.org-ceo, .org-mentor { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #121215; }
.org-mentor { border-style: dashed; border-color: var(--accent-line); background: var(--accent-bg); }
.org-ceo b, .org-mentor b { display: block; font-size: 14px; font-weight: 600; }
.org-ceo small, .org-mentor small { font-size: 12px; color: var(--muted); }
.org-ceo .zt-ini, .org-mentor .mini-ava { width: 38px; height: 38px; border-radius: 50%; font-size: 10.5px; }
.org-label { margin-bottom: -6px; }
.org-roles { display: grid; gap: 8px; }
.orl { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.orl-ico { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(180deg, #fff, #eef0f3); display: grid; place-items: center; color: #111; }
.orl-ico svg { width: 20px; height: 20px; }
.orl-ico img { width: 22px; height: auto; }
.orl-main b { font-size: 14px; font-weight: 500; }
.orl-bar { margin-top: 7px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.orl-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(92,200,255,.35), var(--accent)); transition: width 1.6s var(--ease); }
.org.in .orl-bar i { width: var(--w); }
.org-comm { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.org-comm .tools { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }

/* Über uns */
.about-left { display: flex; flex-direction: column; gap: 16px; }
.about-story { position: relative; overflow: hidden; flex: 1; min-height: 320px; padding: 36px; display: flex; flex-direction: column; background: radial-gradient(520px 280px at 100% 0%, rgba(91,140,255,.13), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.about-year { position: absolute; top: -6px; right: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(96px, 11vw, 170px); line-height: 1; letter-spacing: -.03em; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.about-story .h3 { margin-top: auto; max-width: 420px; }
.about-story p { color: var(--muted); margin: 12px 0 0; max-width: 480px; }
.about-edge { padding: 24px; display: flex; gap: 16px; align-items: flex-start; border-color: var(--accent-line); background: linear-gradient(180deg, rgba(92,200,255,.07), rgba(92,200,255,.01)); }
.edge-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); flex: none; }
.about-edge p { margin: 6px 0 0; color: #cfcfd4; font-size: 15px; line-height: 1.6; }
.about-edge b { color: #fff; font-weight: 600; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { padding: 22px; }
.fact b { display: block; font-size: 36px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.fact span { display: block; margin-top: 8px; color: var(--muted); font-size: 13.5px; }

@media (max-width: 1180px) {
  .fl-gads { display: none; }
  .fl-meta { right: -30px; top: -80px; }
  .fl-shop { right: -30px; }
  .hero-visual .zoom { left: -30px; }
}
@media (max-width: 1080px) {
  .t-hooks, .b-speed { grid-column: span 6; }
  .t-bundle, .t-ai, .t-track { grid-column: span 3; }
  .t-track { grid-column: span 6; }
  .t-stock, .t-retention { grid-column: span 6; }
  .inhouse { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-visual { height: auto; }
  .fl-gads { display: block; }
  .fl-meta, .fl-shop, .fl-gads, .hero-visual .zoom { position: relative; inset: auto; width: auto; }
}
@media (max-width: 640px) {
  .tp-badge { gap: 8px 10px; padding: 10px 14px; }
  .tp-meta, .tp-sep, .tp-google { display: none; }
  .tp-stars i { width: 21px; height: 21px; }
  .tp-stars i svg { width: 15px; height: 15px; }
  .tactics .b { grid-column: auto; }
  .hk { grid-template-columns: 18px 1fr 42px; }
  .hk-bar { display: none; }
  .org-top { grid-template-columns: 1fr; }
  .orl { grid-template-columns: 32px 1fr; }
  .orl .pill { display: none; }
  .about-facts { gap: 10px; }
  .fact { padding: 18px; }
  .fact b { font-size: 28px; }
  .about-story { padding: 26px; min-height: 280px; }
  .scale-ticks span { font-size: 9.5px; }
  .seg img { height: 14px; }
}
.hq { z-index: auto; }
.hq .slack { position: relative; z-index: 3; }
.integ-logo.lt { background: linear-gradient(180deg, #fff, #eef0f3); }
.integ-logo.dk { background: linear-gradient(180deg, #2a2a30, #111114); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.integ-logo svg { width: 22px; height: 22px; }
.integ-logo img { width: 22px; height: auto; }
.integ-logo { border-radius: 10px; }
@media (max-width: 640px) { .fl-gads { display: none; } }

/* ==========================================================================
   v6: CI-Blau, iOS-Details, Buttons mit Muster, Fokus-Sektion, Brain
   ========================================================================== */
:root { --ios-blue: #1f9bff; --ios-off: #3a3a3f; }

/* iOS-Schalter (Titel: geht immer wieder von aus auf an) */
.ios-switch { position: relative; display: inline-block; width: .9em; height: .55em; margin: 0 .04em 0 .24em; border-radius: 99px; vertical-align: .02em; background: var(--ios-off); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: iosTrack 6s ease-in-out infinite; }
.ios-switch i { position: absolute; top: .045em; left: .045em; width: .46em; height: .46em; border-radius: 50%; background: #fff; box-shadow: 0 .03em .09em rgba(0,0,0,.35), 0 .01em .02em rgba(0,0,0,.2); animation: iosKnob 6s cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes iosTrack { 0%, 14% { background: var(--ios-off); } 24%, 90% { background: var(--ios-blue); } 100% { background: var(--ios-off); } }
@keyframes iosKnob { 0%, 14% { transform: translateX(0); } 24%, 90% { transform: translateX(.35em); } 100% { transform: translateX(0); } }

/* Kleine iOS-Schalter (Listen) */
.ios-switch.ios-sm { width: 40px; height: 24px; margin: 0; vertical-align: middle; animation: none; transition: background .35s ease; transition-delay: calc(var(--i, 0) * .16s + var(--o, .5s)); }
.ios-switch.ios-sm i { top: 2px; left: 2px; width: 20px; height: 20px; animation: none; transition: transform .35s cubic-bezier(.3,.7,.3,1); transition-delay: inherit; }

/* iOS-Schalter im Ads Manager */
.tgl { width: 26px; height: 16px; background: var(--ios-off); }
.tgl::after { top: 2px; left: 2px; width: 12px; height: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.tgl.on { background: var(--ios-blue); }
.tgl.on::after { left: 12px; }

/* Buttons mit Muster */
.btn-primary, .btn-blue, .btn-orbit { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary {
  background:
    radial-gradient(140px 60px at 0% 50%, rgba(92,200,255,.28), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(20,60,120,.16) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(180deg, #ffffff, #e5ebf4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 12px 40px -12px rgba(92,200,255,.55), inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 18px 50px -12px rgba(92,200,255,.7), inset 0 -2px 0 rgba(0,0,0,.08); }
.btn-primary::before, .btn-blue::before, .btn-orbit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-blue {
  color: #fff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.22) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(135deg, #5cc8ff, #2f7bff);
  box-shadow: 0 0 0 1px rgba(92,200,255,.55), 0 16px 44px -14px rgba(47,123,255,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-blue::before { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); }
.btn-blue:hover { transform: translateY(-1px); }
.btn-blue .btn-ico { width: 26px; height: 26px; margin-right: -8px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.25); color: #fff; }
.btn-orbit {
  color: var(--text); border: 1px solid var(--line-3);
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 1.4px) 0 0 / 7px 7px, rgba(255,255,255,.04);
}
.btn-orbit::before { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); }
.btn-orbit:hover { border-color: rgba(255,255,255,.35); background-color: rgba(255,255,255,.07); transform: translateY(-1px); }
.btn-orbit .btn-ico { width: 26px; height: 26px; margin-right: -8px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: #0a0a0c; }
.btn-logo { height: 18px; width: auto; }
.phase-btn { justify-content: flex-start; gap: 12px; }
.phase-btn .btn-ico { margin-left: auto; }

/* Umsatz-Band in den Marken-Karten */
.phase-top .label { margin-left: auto; }
.rev { padding: 18px 20px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.rev-num { font-size: clamp(34px, 3.6vw, 50px); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin: 10px 0 18px; }
.rev-num small { font-size: .5em; color: var(--muted); letter-spacing: 0; }
.rev-num em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .55em; color: var(--muted); letter-spacing: 0; }
.ios-slider { position: relative; height: 6px; border-radius: 99px; background: var(--ios-off); }
.ios-fill { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); border-radius: 99px; background: var(--ios-blue); }
.rev-wl .ios-fill { background: linear-gradient(90deg, #5cc8ff, #2f7bff); }
.ios-knob { position: absolute; top: 50%; left: var(--at); width: 26px; height: 26px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.05); }
.rev-scale { position: relative; height: 16px; margin-top: 14px; }
.rev-scale span { position: absolute; font-family: var(--mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.rev-scale span:nth-child(1) { left: 0; }
.rev-scale span:nth-child(2) { left: 22%; transform: translateX(-50%); }
.rev-scale span:nth-child(3) { left: 62%; transform: translateX(-50%); }
.rev-scale span:nth-child(4) { right: 0; }
.rev:not(.rev-wl) .rev-scale span:nth-child(2), .rev-wl .rev-scale span:nth-child(3) { color: var(--text); }

/* Founder Ads */
.ad-th .ad-type { right: auto; bottom: auto; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 99px; background: rgba(0,0,0,.5); font-family: var(--mono); font-size: 9px; }
.ad-th .ad-face { right: auto; bottom: auto; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }

/* Fokus: Busywork vs. Money-Making */
.focus { display: grid; grid-template-columns: 1fr 290px 1fr; gap: 16px; align-items: stretch; }
.fz { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.fz-head h3 { font-size: 22px; margin-top: 6px; letter-spacing: -.025em; }
.fz-list { border-radius: 14px; background: #141417; border: 1px solid var(--line); overflow: hidden; }
.fz-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; }
.fz-row + .fz-row { border-top: 1px solid var(--line); }
.fz-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #2c2c31; color: #d4d4d8; }
.fz-ico .i { width: 16px; height: 16px; }
.fz-on .fz-ico { background: linear-gradient(180deg, #5cc8ff, #2f7bff); color: #fff; }
.fz-on .fz-logo { background: linear-gradient(180deg, #fff, #eef0f3); }
.fz-on .fz-dk { background: linear-gradient(180deg, #2a2a30, #111114); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fz-logo svg, .fz-logo img { width: 18px; height: 18px; object-fit: contain; }
.fz-txt { font-size: 14px; line-height: 1.35; transition: opacity .35s; transition-delay: calc(var(--i, 0) * .16s + var(--o, .5s)); }
.fz-tag { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 9.5px; padding: 1px 6px; border-radius: 99px; color: var(--amber); border: 1px solid var(--amber-line); white-space: nowrap; vertical-align: 1px; }
.fz-foot { margin: auto 0 0; font-size: 13.5px; color: var(--muted); }
.fz-foot-on { color: var(--accent); }
.fz-on .fz-row { --o: 1.5s; }
.fz-off .ios-sm { background: var(--ios-blue); }
.fz-off .ios-sm i { transform: translateX(16px); }
.focus.in .fz-off .ios-sm { background: var(--ios-off); }
.focus.in .fz-off .ios-sm i { transform: none; }
.focus.in .fz-off .fz-txt { opacity: .45; }
.focus.in .fz-on .ios-sm { background: var(--ios-blue); }
.focus.in .fz-on .ios-sm i { transform: translateX(16px); }
.fz-on { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(92,200,255,.06), rgba(92,200,255,.01)); }

.screentime { padding: 22px; display: flex; flex-direction: column; gap: 18px; align-self: center; }
.st-head { display: flex; gap: 12px; align-items: center; }
.st-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(180deg, #8e6bff, #5a3fd6); color: #fff; }
.st-head b { display: block; font-size: 14.5px; font-weight: 600; }
.st-head small { font-size: 11.5px; color: var(--dim); }
.st-stack { display: flex; gap: 2px; height: 22px; margin-top: 8px; border-radius: 7px; overflow: hidden; background: #1d1d21; }
.st-stack i { width: 0; transition: width 1.2s var(--ease); }
.st-after i { transition-delay: 1.4s; }
.focus.in .st-stack i { width: var(--w); }
.c-busy { background: #8e8e93; }
.c-gap { background: var(--amber); }
.c-money { background: linear-gradient(90deg, #5cc8ff, #2f7bff); }
.st-legend { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.st-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; }
.st-arrow { display: none; }

/* Wissenstransfer-Brain */
.brainviz { position: relative; overflow: hidden; min-height: 560px; padding: 24px; display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto 1fr auto; gap: 16px; background: radial-gradient(420px 340px at 24% 52%, rgba(47,123,255,.16), transparent 70%), linear-gradient(180deg, #0e0e12, #09090b); }
.brain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.bv-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.bv-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: blink 1.6s infinite; }
.bv-brain { grid-column: 1; grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.bv-brain-slot { flex: 1; width: 100%; min-height: 240px; }
.bv-brain-cap { text-align: center; margin-top: 6px; }
.bv-brain-cap b { display: block; font-size: 14px; font-weight: 600; }
.bv-brain-cap small { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: .04em; }
.bv-depts { grid-column: 2; grid-row: 2; position: relative; z-index: 1; display: grid; gap: 10px; align-content: center; }
.bv-dept { display: grid; grid-template-columns: 36px 1fr 44px; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(14,14,18,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bv-pct { font-family: var(--mono); font-size: 11.5px; color: var(--accent); text-align: right; }
.brainviz.in .orl-bar i { width: var(--w); }
.bv-foot { grid-column: 1 / -1; position: relative; z-index: 1; }

@media (max-width: 1080px) {
  .focus { grid-template-columns: 1fr 1fr; }
  .screentime { grid-column: 1 / -1; grid-row: 1; align-self: stretch; }
}
@media (max-width: 700px) {
  .focus { grid-template-columns: 1fr; }
  .brainviz { grid-template-columns: 1fr; min-height: 0; }
  .bv-brain { grid-column: 1; grid-row: 2; }
  .bv-brain-slot { min-height: 220px; }
  .bv-depts { grid-column: 1; grid-row: 3; }
  .bv-foot { grid-row: 4; }
  .fz { padding: 20px; }
  .fz-tag { display: none; }
}
.brainviz { grid-template-columns: 1.15fr .85fr; }
.bv-brain-slot { min-height: 300px; }
.bv-dept { padding: 10px 12px; }
.bv-dept .orl-main b { font-size: 13.5px; }
.inhouse { grid-template-columns: .78fr 1.22fr; }
.brainviz { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 1080px) { .inhouse { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .brainviz { grid-template-columns: 1fr; } }

/* ==========================================================================
   v7: Glas-Icons, dezentere Buttons, Playbook
   ========================================================================== */

/* Glas-Icons im Titel: Shopify links (angeschrägt), Meta rechts, leicht überlappend */
.glassicons { display: inline-flex; align-items: center; margin-left: .12em; vertical-align: -.2em; }
.gi { width: 1.18em; height: auto; filter: drop-shadow(0 .08em .18em rgba(0,0,0,.5)); }
.gi-shop { position: relative; z-index: 2; transform: rotate(-10deg) translateY(-.02em); }
.gi-meta { margin-left: -.34em; transform: rotate(5deg) translateY(.06em); }

/* Buttons: Muster deutlich zurückgenommen */
.btn-primary {
  background:
    radial-gradient(120px 50px at 0% 50%, rgba(92,200,255,.14), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(20,60,120,.065) 1px, transparent 1.3px) 0 0 / 9px 9px,
    linear-gradient(180deg, #ffffff, #eaeef4);
}
.btn-primary::before { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); animation-duration: 7s; }
.btn-blue { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 1.3px) 0 0 / 9px 9px, linear-gradient(135deg, #5cc8ff, #2f7bff); }
.btn-blue::before { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%); animation-duration: 7s; }
.btn-orbit { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.3px) 0 0 / 9px 9px, rgba(255,255,255,.04); }
.btn-orbit::before { animation-duration: 7s; }

/* Playbook: Buch + Inhaltsverzeichnis */
.playbook { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.book-stage { position: relative; height: 470px; display: grid; place-items: center; perspective: 1600px; }
.book { position: relative; width: 290px; height: 400px; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(8deg); animation: bookFloat 7s ease-in-out infinite; }
@keyframes bookFloat { 0%, 100% { transform: rotateY(-26deg) rotateX(8deg) translateY(0); } 50% { transform: rotateY(-20deg) rotateX(6deg) translateY(-10px); } }
.book-cover, .book-back { position: absolute; inset: 0; border-radius: 4px 14px 14px 4px; }
.book-back { transform: translateZ(-22px); background: #070a12; box-shadow: 0 40px 80px -20px rgba(0,0,0,.9); }
.book-pages { position: absolute; top: 7px; bottom: 7px; left: calc(100% - 25px); width: 44px; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #eceef3 0 1px, #c9ccd4 1px 2px, #e2e4ea 2px 3px); border-radius: 2px; }
.book-cover {
  transform: translateZ(22px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 30px 26px 26px 34px;
  background:
    radial-gradient(260px 200px at 80% 10%, rgba(92,200,255,.28), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 10px 10px,
    linear-gradient(145deg, #16213a, #0a0f1c 60%, #070a12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 10px 0 18px -10px rgba(0,0,0,.8);
}
.book-cover::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); box-shadow: 4px 0 0 rgba(0,0,0,.35); }
.book-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.1) 48%, transparent 56%); pointer-events: none; }
.bc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bc-top img { height: 28px; width: auto; }
.bc-top span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: right; line-height: 1.3; max-width: 90px; }
.bc-title small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.bc-title b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: -.02em; margin-top: 6px; background: linear-gradient(180deg, #fff, #b9d8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bc-meta { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: rgba(255,255,255,.6); }
.bc-meta b { color: #fff; font-weight: 600; }
.book-ribbon { position: absolute; left: 70%; bottom: -34px; width: 16px; height: 60px; transform: translateZ(10px); background: linear-gradient(180deg, #5cc8ff, #2f7bff); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.book-shadow { position: absolute; bottom: 10px; left: 50%; width: 300px; height: 40px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(47,123,255,.35), transparent); filter: blur(10px); }

.toc { padding: 32px; }
.toc-head { display: flex; justify-content: space-between; align-items: center; }
.toc-title { font-size: clamp(24px, 2.4vw, 32px); margin: 14px 0 20px; line-height: 1.12; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-list li { display: grid; grid-template-columns: 30px auto 1fr 38px; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 15px; }
.toc-n { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.toc-t { white-space: nowrap; }
.toc-dots { border-bottom: 1px dotted var(--line-3); transform: translateY(-4px); }
.toc-p { font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }
.toc-branches { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.toc-branches div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.toc-branches div span { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }

.preview-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.preview-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-3), transparent); }

/* Taktik-Karten als Buchseiten */
.tactics .b { position: relative; }
.tactics .b:not(.b-speed):not(.t-more)::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--bg) 50%, rgba(255,255,255,.08) 50%); border-bottom-left-radius: 6px; }
.page-no { font-family: var(--mono); font-size: 10.5px; color: var(--dim); text-align: right; margin-top: -6px; }
.t-head .label { color: var(--accent); }
.t-more { grid-column: span 6; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; border-color: var(--accent-line); background: radial-gradient(500px 160px at 0% 50%, rgba(92,200,255,.1), transparent), rgba(255,255,255,.015); }
.more-stack { position: relative; width: 70px; height: 84px; }
.more-stack i { position: absolute; inset: 0; border-radius: 6px; border: 1px solid var(--line-3); background: #15151a; }
.more-stack i:nth-child(1) { transform: rotate(-10deg) translate(-6px, 2px); }
.more-stack i:nth-child(2) { transform: rotate(-4deg) translate(-2px, 0); }
.more-stack i:nth-child(3) { background: linear-gradient(145deg, #16213a, #0a0f1c); border-color: var(--accent-line); }
.more-copy h4 { font-size: 24px; margin-top: 6px; }
.more-copy p { margin: 6px 0 0; color: var(--muted); }

@media (max-width: 1080px) {
  .playbook { grid-template-columns: 1fr; gap: 24px; }
  .t-more { grid-column: span 6; grid-template-columns: 1fr; }
  .more-stack { display: none; }
}
@media (max-width: 640px) {
  .book-stage { height: 400px; }
  .book { width: 240px; height: 330px; }
  .bc-title b { font-size: 52px; }
  .toc { padding: 24px; }
  .toc-t { white-space: normal; }
  .toc-list li { grid-template-columns: 26px 1fr 34px; }
  .toc-dots { display: none; }
  .t-more { grid-column: auto; }
  .t-more .btn { width: 100%; }
}
.gi { width: 1.42em; }
.glassicons { vertical-align: -.3em; margin-left: .06em; }
.gi-meta { margin-left: -.42em; }
@media (max-width: 640px) { .gi { width: 1.3em; } }

/* ==========================================================================
   v8: Terminbuchung (eCom Orbit & WhiteLion)
   ========================================================================== */
.bk-nav { background: rgba(5,5,6,.72); border-bottom-color: var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.bk-secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bk-secure .i { color: var(--accent); }

.bk-hero { position: relative; padding: 130px 0 80px; overflow: hidden; }
.bk-deco { position: absolute; pointer-events: none; z-index: -1; }
.bk-orbit .bk-deco { left: -260px; top: 40px; width: 900px; height: 900px; border-radius: 50%; border: 1px solid rgba(92,200,255,.12); transform: rotate(-24deg) scaleX(.55); box-shadow: 0 0 0 60px rgba(92,200,255,.02), inset 0 0 120px rgba(92,200,255,.05); }
.bk-orbit .bk-deco::after { content: ""; position: absolute; inset: 70px; border-radius: 50%; border: 1px dashed rgba(92,200,255,.1); }
.bk-wl .bk-deco { left: -120px; top: 90px; width: 760px; height: 320px; background: url("img/logo-whitelion.png") no-repeat left center / contain; opacity: .035; filter: blur(.3px); }

.bk-grid { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start; }
.bk-copy .tag { margin-bottom: 26px; }
.bk-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.bk-brand img { height: 42px; width: auto; }
.bk-aud { display: grid; gap: 3px; padding-left: 18px; border-left: 1px solid var(--line-2); }
.bk-aud b { font-weight: 500; font-size: 15px; }
.bk-h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1; }
.bk-h1 .soft { display: block; }
.bk-copy .lead { margin-top: 22px; }
.bk-get { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.bk-get li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.bk-get-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(180deg, #5cc8ff, #2f7bff); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.bk-get-ico .i { width: 16px; height: 16px; }
.bk-steps { margin-top: 34px; padding: 24px; }
.bk-steps ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; position: relative; }
.bk-steps ol::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--accent-line), transparent); }
.bk-steps li { display: flex; gap: 14px; position: relative; }
.bk-step-n { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--accent-line); color: var(--accent); }
.bk-steps b { display: block; font-weight: 500; font-size: 15px; }
.bk-steps p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.bk-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.bk-proof .tp-badge { margin: 0; }

.bk-side { position: sticky; top: 96px; }
.bk-cal { background: linear-gradient(180deg, #121216, #0b0b0d); box-shadow: 0 60px 140px -40px rgba(47,123,255,.35), 0 0 0 1px rgba(92,200,255,.08) inset; }
.bk-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.bk-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s infinite; }
.bk-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bk-progress span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); }
.bk-progress span i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--line-2); }
.bk-progress span.on { color: var(--text); }
.bk-progress span.on i { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; }
.bk-progress span.now i { box-shadow: 0 0 0 4px rgba(31,155,255,.2); }
.calendly-inline-widget { min-width: 320px; height: 700px; background: #0e0e11; }
.bk-done { padding: 34px 28px 38px; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(400px 160px at 50% 0%, rgba(92,200,255,.14), transparent); }
.bk-done[hidden] { display: none; }
.bk-done-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--ios-blue); color: #fff; box-shadow: 0 0 0 8px rgba(31,155,255,.15); }
.bk-done-ico .i { width: 26px; height: 26px; stroke-width: 2.4; }
.bk-done h3 { font-size: 26px; }
.bk-done p { color: var(--muted); margin: 8px auto 0; max-width: 360px; }
.bk-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 4px 0; font-size: 12px; color: var(--dim); line-height: 1.5; }
.bk-note .i { margin-top: 3px; }

.bk-prep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bk-prep-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.bk-prep-card b { font-weight: 500; font-size: 16px; margin-top: 6px; }
.bk-prep-card p { margin: 0; color: var(--muted); font-size: 14px; }
.bk-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bk-videos .vcard { grid-column: auto; }
.bk-videos .vthumb { aspect-ratio: 16 / 9; }
.bk-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; }
.bk-switch { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.bk-switch h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.bk-switch p { margin: 0 0 8px; color: var(--muted); }

@media (max-width: 1080px) {
  .bk-grid { grid-template-columns: 1fr; gap: 40px; }
  .bk-side { position: static; }
  .bk-prep { grid-template-columns: 1fr 1fr; }
  .bk-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bk-hero { padding-top: 110px; }
  .bk-secure { display: none; }
  .bk-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bk-aud { padding-left: 0; border-left: 0; }
  .bk-prep, .bk-videos { grid-template-columns: 1fr; }
  .bk-progress span { font-size: 11px; gap: 6px; }
  .calendly-inline-widget { height: 1000px; }
}
.bk-page { overflow-x: hidden; }
@media (max-width: 640px) {
  .bk-deco { display: none; }
  .bk-copy .tag { max-width: 100%; white-space: nowrap; font-size: 11.5px; }
}

/* ==========================================================================
   v9: Glas-App-Icons, Playbook-Scroll-Szene
   ========================================================================== */

/* Glas-Box im iOS-Stil: milchige Füllung, dicker klarer Rand, Glanzkante */
.glass {
  --r: .3em;
  position: relative; display: inline-grid; place-items: center;
  width: 1.3em; height: 1.3em; border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.98), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f8fa 0%, #e6e9ee 100%);
  box-shadow:
    inset 0 0 0 .05em rgba(255,255,255,.95),
    inset 0 -.07em .12em rgba(110,120,140,.22),
    inset 0 .08em .06em rgba(255,255,255,.9),
    0 0 0 .06em rgba(255,255,255,.22),
    0 .2em .45em -.05em rgba(0,0,0,.55),
    0 .04em .08em rgba(0,0,0,.25);
}
.glass::before {
  content: ""; position: absolute; inset: -.06em; border-radius: calc(var(--r) + .06em); padding: .06em; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.18) 30%, rgba(190,205,225,.5) 62%, rgba(255,255,255,.85) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass::after {
  content: ""; position: absolute; inset: .05em .05em 48% .05em; border-radius: calc(var(--r) - .04em) calc(var(--r) - .04em) 40% 40% / calc(var(--r) - .04em) calc(var(--r) - .04em) 18% 18%;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; mix-blend-mode: screen;
}
.glass img { position: relative; z-index: 1; width: 58%; height: auto; filter: drop-shadow(0 .03em .03em rgba(0,0,0,.2)) drop-shadow(0 .08em .1em rgba(0,0,0,.12)); }
.gl-woo img { width: 70%; }
.glassicons { gap: 0; vertical-align: -.24em; margin-left: .1em; }
.gl-shop { z-index: 2; transform: rotate(-9deg) translateY(-.03em); }
.gl-woo { margin-left: -.26em; transform: rotate(6deg) translateY(.05em); }
@media (max-width: 640px) { .glass { width: 1.2em; height: 1.2em; } }

/* Playbook-Szene */
.pb-scroll { position: relative; height: 320vh; margin: 20px 0 40px; }
.pb-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.pb-stage { position: relative; width: 100%; height: min(620px, 74vh); }
.pb-glow { position: absolute; left: 10%; top: 10%; width: 45%; height: 80%; background: radial-gradient(closest-side, rgba(47,123,255,.2), transparent); filter: blur(20px); }

.pb-bookwrap { position: absolute; left: 6%; top: 50%; width: 44%; height: 90%; transform: translateY(-50%); display: grid; place-items: center; perspective: 1500px; }
.pbook {
  --open: 0; --lay: 0;
  position: relative; width: 250px; height: 346px; transform-style: preserve-3d;
  transform: translateX(calc(var(--open) * 125px)) rotateX(calc(8deg + var(--lay) * 48deg)) rotateY(calc(-26deg + var(--lay) * 24deg)) rotateZ(calc(var(--lay) * -8deg));
}
.pb-back { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; transform: translateZ(-13px); background: #070a12; box-shadow: 0 50px 90px -20px rgba(0,0,0,.95); }
.pb-block { position: absolute; top: 6px; bottom: 6px; left: calc(100% - 13px); width: 26px; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #eceef3 0 1px, #c9ccd4 1px 2px, #e2e4ea 2px 3px); border-radius: 2px; }
.pb-page {
  position: absolute; inset: 5px 6px 5px 0; transform: translateZ(11px); border-radius: 2px 8px 8px 2px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 8%), linear-gradient(180deg, #f4f2ec, #e9e6de);
  color: #1a1a1f; padding: 26px 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 0 calc(var(--glow, 0) * 50px) calc(var(--glow, 0) * 6px) rgba(92,200,255,.45);
}
.pb-page-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #2f7bff; }
.pb-page b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 25px; line-height: 1.05; }
.pb-lines { display: grid; gap: 7px; margin-top: 6px; }
.pb-lines i { display: block; height: 4px; border-radius: 2px; background: rgba(26,26,31,.16); }
.pb-page-n { margin-top: auto; align-self: flex-end; font-family: var(--mono); font-size: 9px; color: rgba(26,26,31,.45); }
.pb-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(13px) rotateY(calc(var(--open) * -176deg)); }
.pb-front, .pb-inside { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pb-front {
  display: flex; flex-direction: column; justify-content: space-between; padding: 26px 22px 22px 30px;
  background:
    radial-gradient(240px 180px at 80% 10%, rgba(92,200,255,.28), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 10px 10px,
    linear-gradient(145deg, #16213a, #0a0f1c 60%, #070a12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 10px 0 18px -10px rgba(0,0,0,.8);
}
.pb-front .bc-title b { font-size: 54px; }
.pb-inside { transform: rotateY(180deg); padding: 26px 24px; background: linear-gradient(180deg, #111827, #0a0f1c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; }
.pb-inside ol { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.75); }
.pb-inside ol li::marker { color: var(--accent); font-family: var(--mono); font-size: 10px; }

.pb-chips { position: absolute; inset: 0; pointer-events: none; }
.pb-chip {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; color: #fff; background: rgba(18,24,40,.88); border: 1px solid rgba(92,200,255,.45);
  box-shadow: 0 10px 30px -8px rgba(47,123,255,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pb-chip .i { width: 15px; height: 15px; color: var(--accent); }

.pb-app { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); width: 300px; display: flex; flex-direction: column; align-items: center; }
.pb-shop { font-size: 108px; --r: .26em; transition: transform .25s var(--ease); }
.pb-shop.pulse { transform: scale(1.06); }
.ios-badge {
  position: absolute; z-index: 3; top: -.1em; right: -.12em; min-width: .34em; height: .34em; padding: 0 .09em; border-radius: 99px;
  display: grid; place-items: center; font-size: 1em; line-height: 1;
  background: linear-gradient(180deg, #ff5a4f, #ff3b30); color: #fff; font-family: var(--sans); font-weight: 600;
  box-shadow: 0 0 0 .025em rgba(255,255,255,.9), 0 .04em .1em rgba(255,59,48,.55);
}
.ios-badge { font-size: 26px; min-width: 38px; height: 38px; padding: 0 10px; top: -14px; right: -16px; }
.ios-badge.bump { animation: badgeBump .35s var(--ease); }
@keyframes badgeBump { 40% { transform: scale(1.22); } }
.pb-app-name { margin-top: 12px; font-size: 14px; color: var(--muted); }
.pb-rev { margin-top: 18px; text-align: center; }
.pb-rev b { display: block; margin-top: 4px; font-size: 38px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pb-notes { position: relative; width: 100%; margin-top: 18px; height: 150px; }
.pb-note {
  position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 16px; background: rgba(40,40,46,.72); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.8); transition: transform .45s var(--ease), opacity .45s;
}
.pb-note img { width: 28px; height: 28px; padding: 4px; border-radius: 7px; background: #fff; }
.pb-note b { display: block; font-size: 12.5px; font-weight: 600; }
.pb-note small { display: block; font-size: 12px; color: rgba(255,255,255,.72); }
.pb-note time { font-size: 10.5px; color: rgba(255,255,255,.5); align-self: start; }

.pb-steps { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pb-steps span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11.5px; color: var(--dim); transition: all .3s; }
.pb-steps span.on { color: #fff; border-color: var(--accent-line); background: var(--accent-bg); }

.playbook-solo { grid-template-columns: 1fr; margin-bottom: 56px; }
.playbook-solo .toc-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }

@media (max-width: 900px) {
  .pb-stage { height: min(720px, 80vh); }
  .pb-bookwrap { left: 0; right: 0; top: 0; width: 100%; height: 52%; transform: none; }
  .pbook { width: 170px; height: 236px; transform: translateX(calc(var(--open) * 85px)) rotateX(calc(8deg + var(--lay) * 48deg)) rotateY(calc(-26deg + var(--lay) * 24deg)) rotateZ(calc(var(--lay) * -8deg)); }
  .pb-front { padding: 18px 16px 16px 22px; }
  .pb-front .bc-title b { font-size: 38px; }
  .pb-front .bc-top img { height: 20px; }
  .pb-front .bc-top span, .pb-front .bc-meta { display: none; }
  .pb-page { padding: 16px 14px; gap: 6px; }
  .pb-page b { font-size: 17px; }
  .pb-inside { padding: 16px; }
  .pb-inside ol { font-size: 10px; gap: 5px; }
  .pb-app { right: 0; left: 0; top: auto; bottom: 0; transform: none; width: auto; }
  .pb-shop { font-size: 76px; }
  .ios-badge { font-size: 19px; min-width: 30px; height: 30px; top: -11px; right: -12px; }
  .pb-rev { margin-top: 10px; }
  .pb-rev b { font-size: 28px; }
  .pb-notes { width: min(320px, 100%); height: 64px; margin-top: 10px; }
  .pb-chip { font-size: 12px; padding: 6px 11px 6px 8px; }
  .playbook-solo .toc-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-scroll { height: auto; }
  .pb-sticky { position: relative; height: auto; padding: 20px 0; }
}
@media (min-width: 901px) {
  .pbook { width: 280px; height: 388px; transform: translateX(calc(var(--open) * 140px)) rotateX(calc(8deg + var(--lay) * 46deg)) rotateY(calc(-26deg + var(--lay) * 24deg)) rotateZ(calc(var(--lay) * -8deg)); }
  .pb-page b { font-size: 28px; }
}
@media (max-width: 900px) {
  .pbook { width: 150px; height: 208px; transform: translateX(calc(var(--open) * 75px)) rotateX(calc(8deg + var(--lay) * 46deg)) rotateY(calc(-26deg + var(--lay) * 24deg)) rotateZ(calc(var(--lay) * -8deg)); }
  .pb-page b { font-size: 15px; }
  .pb-inside ol { font-size: 9px; gap: 4px; }
}

/* v10: Seiten blättern, engerer Abstand zur Einleitung */
#taktiken .section-head { margin-bottom: 0; }
.pb-scroll { margin-top: -30px; }
.pb-sticky { justify-content: flex-start; padding-top: 72px; gap: 10px; }
.pb-stage { height: min(560px, 70vh); }
.pb-leaves { position: absolute; inset: 5px 6px 5px 0; transform: translateZ(11.6px); transform-style: preserve-3d; pointer-events: none; }
.pb-leaf { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; }
.lf {
  position: absolute; inset: 0; border-radius: 2px 8px 8px 2px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 20px 24px; color: #1a1a1f;
  background: linear-gradient(90deg, rgba(0,0,0,.1), transparent 8%), linear-gradient(180deg, #f6f4ee, #ebe8e0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.lf-back { transform: rotateY(180deg); background: linear-gradient(270deg, rgba(0,0,0,.12), transparent 8%), linear-gradient(180deg, #f1efe8, #e5e2d9); }
.lf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,calc(var(--shade, 0) * .35)), transparent 70%); }
.lf b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.05; }
.pb-page-nl { align-self: flex-start; }
@media (max-width: 900px) {
  .pb-sticky { padding-top: 64px; }
  .lf { padding: 14px 12px; gap: 6px; }
  .lf b { font-size: 15px; }
  .pb-page { padding: 14px 12px; }
}
.pb-page { transform: translateZ(10.4px); }
.pb-leaves { transform: translateZ(10.6px); }

/* ==========================================================================
   v11: Hero als 1:1-Zoom-Session mit live bearbeiteter Produktseite
   ========================================================================== */
.hero-visual { height: 740px; }
.hq-zoom { width: min(940px, 100%); }
.zc { position: relative; z-index: 3; display: flex; flex-direction: column; text-align: left; background: linear-gradient(180deg, #141418, #0c0c0f); }
.zc-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.zc-bar b { font-weight: 600; }
.zc-brand { color: var(--muted); }
.zc-share { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-line); }
.zc-bar .rec { margin-left: 8px; font-variant-numeric: tabular-nums; }
.zc-body { display: grid; grid-template-columns: 1fr 168px; gap: 10px; padding: 10px; }
.zc-screen { border-radius: 10px; overflow: hidden; border: 2px solid rgba(31,155,255,.65); box-shadow: 0 0 40px -10px rgba(31,155,255,.45); }
.share-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #e7e9ee; color: #555; font-size: 11px; }
.share-bar .dots { display: flex; gap: 5px; }
.share-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #c7cad1; }
.share-url { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: #fff; color: #333; white-space: nowrap; overflow: hidden; }
.share-edit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #1a1a1f; white-space: nowrap; }
.store { position: relative; background: #fff; color: #111; padding-bottom: 18px; overflow: hidden; }
.store-nav { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid #eee; font-size: 11.5px; color: #555; }
.store-nav b { margin-right: auto; color: #111; font-size: 11px; letter-spacing: .16em; }
.store-cart { display: grid; place-items: center; }
.store-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 16px 18px 0; }
.st-img { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #eef1f6, #d8dde7); }
.st-hoodie { width: 72%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.18)); }
.st-thumbs { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 5px; }
.st-thumbs i { width: 22px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.75); border: 1px solid #d3d7de; }
.st-thumbs i.on { border-color: #111; }
.st-info { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.st-rating { font-size: 11.5px; color: #555; }
.st-stars { color: #f5b301; letter-spacing: 1px; }
.st-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.st-price { display: flex; align-items: baseline; gap: 8px; }
.st-price b { font-size: 18px; }
.st-price s { font-size: 13px; color: #999; }
.st-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-sizes span { min-width: 30px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 6px; border: 1px solid #ddd; font-size: 11.5px; }
.st-sizes span.on { background: #111; border-color: #111; color: #fff; }
.st-sizes a { margin-left: 4px; font-size: 11px; color: #1f6fe0; text-decoration: underline; }
.st-bundle { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #1f9bff; background: #f1f8ff; }
.st-radio { width: 14px; height: 14px; border-radius: 50%; border: 4px solid #1f9bff; background: #fff; }
.st-bundle b { display: block; font-size: 12px; }
.st-bundle small { font-size: 10.5px; color: #1f6fe0; }
.st-bundle em { font-style: normal; font-size: 12px; font-weight: 600; }
.st-cta { display: block; padding: 11px; border-radius: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; background: #c9ccd3; transition: background .5s, box-shadow .5s; }
.st-cta.done { background: #111; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); }
.st-trust { display: flex; gap: 12px; font-size: 10.5px; color: #444; }
.st-step:not(.st-cta) { opacity: 0; transform: translateY(4px); transition: opacity .45s, transform .45s; }
.st-step.done { opacity: 1; transform: none; }
.st-step.flash { outline: 2px dashed #1f9bff; outline-offset: 3px; border-radius: 6px; }
.st-cursor { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; transform: translate(40px, 40px); transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.st-cursor svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.st-cursor span { margin-top: 14px; padding: 2px 7px; border-radius: 6px; background: #1f9bff; color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.st-toast { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: #111; color: #fff; font-size: 11.5px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.st-toast.show { opacity: 1; transform: none; }
.st-toast b { color: var(--accent); }
.zc-people { display: flex; flex-direction: column; gap: 10px; }
.zp { position: relative; flex: 1; min-height: 100px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(160deg, #1f2029, #15161b); }
.zp .zt-ini { width: 52px; height: 52px; font-size: 14px; }
.zp-name { position: absolute; left: 8px; bottom: 7px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; color: #fff; background: rgba(0,0,0,.55); }
.zp-talk { border: 2px solid var(--ios-blue); box-shadow: 0 0 26px -6px rgba(31,155,255,.6); }
.zp-talk .zt-ini { box-shadow: 0 0 0 4px rgba(31,155,255,.25); }
.zp-bars { position: absolute; right: 9px; top: 9px; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.zp-bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--ios-blue); animation: zbars 1s ease-in-out infinite; }
.zp-bars i:nth-child(2) { animation-delay: .15s; } .zp-bars i:nth-child(3) { animation-delay: .3s; } .zp-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes zbars { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.zc-tools { display: flex; justify-content: center; gap: 6px; padding: 4px 10px 12px; }
.zc-tools span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #1b1b20; color: var(--muted); font-size: 11.5px; }
.zc-tools .on { color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-line); }
.zc-tools .leave { margin-left: 12px; background: #c93838; color: #fff; }
.fl-slack { width: 290px; left: -150px; top: -56px; padding: 12px; animation-delay: -3s; }
.fl-slack .sl-m b { font-size: 12.5px; font-weight: 600; }
.fl-slack .sl-m time { font-size: 10.5px; color: var(--dim); margin-left: 6px; }
.fl-slack .sl-m p { margin: 2px 0 0; font-size: 12.5px; color: #cfcfd4; line-height: 1.45; }
.hq-zoom .fl-meta { top: auto; bottom: -70px; right: -150px; }

/* Titel: Icons kleiner & höher, damit alle drei Zeilen gleichen Abstand haben */
.h1-shop .glassicons { vertical-align: -.02em; margin-left: .08em; }
.h1-shop .glass { width: .86em; height: .86em; --r: .22em; }
.h1-shop .gl-woo { margin-left: -.18em; }

@media (max-width: 1180px) {
  .fl-slack { left: -30px; top: -70px; }
  .hq-zoom .fl-meta { right: -30px; }
}
@media (max-width: 900px) {
  .hero-visual { height: auto; }
  .zc-body { grid-template-columns: 1fr; }
  .zc-people { flex-direction: row; }
  .zp { min-height: 74px; }
  .zp .zt-ini { width: 38px; height: 38px; font-size: 11px; }
  .fl-slack, .hq-zoom .fl-meta { position: relative; inset: auto; width: auto; }
  .zc-share { display: none; }
}
@media (max-width: 640px) {
  .store-pdp { grid-template-columns: 1fr; gap: 14px; }
  .st-img { aspect-ratio: 16 / 10; }
  .st-hoodie { width: 42%; }
  .store-nav span:not(.store-cart) { display: none; }
  .share-edit { display: none; }
  .zc-tools span:nth-child(4) { display: none; }
  .fl-meta { display: none; }
}

/* v12: Playbook-Szene mittig, weniger Leerraum, SOP-Charakter, Atmosphäre */
:root { --pb-stage-h: min(560px, 66vh); }
.pb-stage { height: var(--pb-stage-h); }
.pb-sticky { justify-content: center; padding-top: 64px; gap: 14px; }
.pb-scroll {
  --pb-free: calc((100vh - 64px - var(--pb-stage-h) - 50px) / 2);
  margin-top: calc(var(--pb-free) * -1 + 10px);
  margin-bottom: calc(var(--pb-free) * -1 + 20px);
}
.playbook-solo { margin-top: 0; }

/* Plattform & Tags rund ums Buch */
.pb-platform { position: absolute; left: 50%; top: 56%; width: 140%; height: 78%; z-index: -1; pointer-events: none; transform: translateX(-50%) perspective(700px) rotateX(68deg); background: repeating-linear-gradient(0deg, rgba(92,200,255,.12) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(92,200,255,.12) 0 1px, transparent 1px 34px), radial-gradient(closest-side, rgba(47,123,255,.22), transparent); -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 80%); mask-image: radial-gradient(closest-side, #000 25%, transparent 80%); }
.pb-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; white-space: nowrap; font-size: 11.5px; color: #dfe9f7; background: rgba(18,24,40,.78); border: 1px solid rgba(92,200,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.8); animation: float 7s ease-in-out infinite; }
.pb-tag .i { color: var(--accent); }
.pb-tag i:not(.i) { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.pb-tag-1 { left: 2%; top: 8%; }
.pb-tag-2 { right: -2%; top: 14%; animation-delay: -2s; }
.pb-tag-3 { left: -2%; bottom: 14%; animation-delay: -4s; }
.pb-tag-4 { right: 4%; bottom: 6%; animation-delay: -6s; }

/* Buch als internes SOP-System */
.pb-front .bc-top .bc-stamp { max-width: none; padding: 3px 9px; border: 1.5px solid rgba(255,120,120,.75); border-radius: 4px; font-size: 10px; letter-spacing: .24em; color: #ff9090; transform: rotate(-8deg); }
.bc-title em { display: block; margin-top: 10px; font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pb-page { overflow: visible; }
.pb-tabs { position: absolute; right: -10px; top: 34px; display: grid; gap: 16px; }
.pb-tabs i { display: block; width: 10px; height: 26px; border-radius: 0 4px 4px 0; background: #5cc8ff; box-shadow: 1px 1px 3px rgba(0,0,0,.25); }
.pb-tabs i:nth-child(2) { background: #f2a93b; } .pb-tabs i:nth-child(3) { background: #ff6b9a; } .pb-tabs i:nth-child(4) { background: #8e6bff; }
.pb-lines i { position: relative; margin-left: 14px; }
.pb-lines i::before { content: ""; position: absolute; left: -14px; top: -2px; width: 8px; height: 8px; border-radius: 2px; border: 1.2px solid rgba(26,26,31,.35); }
.pb-lines i:nth-child(-n+3)::before { background: #1f9bff; border-color: #1f9bff; }
.pb-page-n { font-size: 8.5px; }

@media (max-width: 900px) {
  :root { --pb-stage-h: min(700px, 76vh); }
  .pb-tag { font-size: 10px; padding: 4px 8px; }
  .pb-tag-3, .pb-tag-4 { display: none; }
  .pb-tabs { right: -7px; top: 20px; gap: 8px; }
  .pb-tabs i { width: 7px; height: 16px; }
}
.hero-visual { height: 780px; }
.fl-slack { left: auto; right: 40px; top: -104px; width: 300px; }
.hq-zoom .fl-meta { right: auto; left: -150px; top: auto; bottom: -110px; }
@media (max-width: 1180px) { .fl-slack { right: 10px; } .hq-zoom .fl-meta { left: -20px; } }
@media (max-width: 900px) { .fl-slack, .hq-zoom .fl-meta { inset: auto; } }
.pb-scroll { overflow-x: clip; }
@media (max-width: 900px) { .pb-platform { width: 110%; } }
@media (max-width: 640px) {
  .zp-name { font-size: 9px; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zp-bars { right: 6px; top: 6px; }
  .zc-brand { display: none; }
  .st-cursor span { display: none; }
}

/* ==========================================================================
   v13: Hero als echter Zoom-Call + eigenes Store-Fenster + Themen-Karten
   ========================================================================== */
.hero-visual.hv2 { height: auto; display: block; max-width: 1180px; margin-top: 64px; text-align: left; }
.hv2::before { top: 40px; }
.hv-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hv-label .label { color: var(--muted); }
.hv-demo { margin-left: auto; }
.hv-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }

/* Zoom-Fenster im Zoom-Look */
.zoomwin { display: flex; flex-direction: column; background: #1c1c1e; border-color: rgba(255,255,255,.1); }
.zm-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #232325; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: #e5e5e7; }
.zm-top b { font-weight: 600; }
.zm-sec { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: rgba(35,217,89,.14); color: #2fd35c; }
.zm-title { color: #9a9aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zm-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #e5e5e7; font-variant-numeric: tabular-nums; }
.zm-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: blink 1.4s infinite; }
.zm-view { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 11px; color: #cfcfd4; }
.zm-stage { position: relative; flex: 1; padding: 10px; background: #111113; }
.zm-speaker { position: relative; height: 100%; min-height: 330px; border-radius: 8px; overflow: hidden; outline: 3px solid #2fd35c; outline-offset: -3px; }
.zm-feed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zm-talk { animation: zmTalk 2.4s ease-in-out infinite; transform-origin: 160px 180px; }
@keyframes zmTalk { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-1.2px) rotate(-.6deg); } 60% { transform: translateY(.6px) rotate(.5deg); } }
.zm-name { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; }
.zm-name .i { color: #2fd35c; }
.zm-name-sm { left: 6px; bottom: 6px; font-size: 9.5px; padding: 2px 6px; }
.zm-muted .i { color: #ff453a; }
.zm-cc { position: absolute; left: 50%; bottom: 44px; z-index: 2; transform: translateX(-50%); width: min(88%, 520px); text-align: center; }
.zm-cc span { display: inline; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-size: 13.5px; line-height: 1.7; box-decoration-break: clone; -webkit-box-decoration-break: clone; opacity: 0; transition: opacity .25s; }
.zm-cc span.in { opacity: 1; }
.zm-strip { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 8px; }
.zm-thumb { position: relative; width: 132px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 20px -8px rgba(0,0,0,.8); }
.zm-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: #1c1c1e; border-top: 1px solid rgba(255,255,255,.06); }
.zm-bar > span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 4px 6px; border-radius: 6px; color: #e5e5e7; }
.zm-bar .i { width: 17px; height: 17px; }
.zm-bar em { font-style: normal; font-size: 10px; color: #b5b5bb; white-space: nowrap; }
.zm-bar em b { color: #fff; font-weight: 600; }
.zm-share { color: #2fd35c !important; }
.zm-share .i { padding: 2px; border-radius: 4px; background: #2fd35c; color: #111; }
.zm-share em { color: #2fd35c !important; }
.zm-end { margin-left: auto; min-width: 0 !important; flex-direction: row !important; padding: 7px 14px !important; background: #e5372b; color: #fff !important; font-size: 12px; font-weight: 600; }

/* Store-Fenster */
.shopwin { display: flex; flex-direction: column; background: #fff; border-color: rgba(255,255,255,.14); transition: box-shadow .4s, outline-color .4s; outline: 2px solid transparent; outline-offset: 2px; }
.shopwin .store { flex: 1; }
.shopwin .store-pdp { grid-template-columns: .9fr 1.1fr; }
.shopwin.talking { outline-color: rgba(31,155,255,.8); box-shadow: 0 0 60px -12px rgba(31,155,255,.55); }

/* Themen-Karten */
.hv-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.tcard { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; transition: border-color .4s, box-shadow .4s, transform .4s; }
.tcard .appicon-sm { flex: none; }
.tc-main { min-width: 0; }
.tc-main b { display: block; font-size: 14px; font-weight: 600; color: #f4f4f5; }
.tc-main small { display: block; margin-top: 2px; font-size: 11.5px; color: #9a9aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-metric { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: #9a9aa3; }
.tc-metric b { color: #fff; font-weight: 500; }
.tc-metric b.warn { color: var(--amber); }
.tc-live { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 99px; font-family: var(--mono); font-size: 9.5px; color: #5cc8ff; background: rgba(92,200,255,.1); border: 1px solid rgba(92,200,255,.3); opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; }
.tc-live i { width: 5px; height: 5px; border-radius: 50%; background: #5cc8ff; animation: blink 1.2s infinite; }
.tcard.talking { border-color: rgba(92,200,255,.55); box-shadow: 0 0 40px -12px rgba(47,123,255,.6), inset 0 0 0 1px rgba(92,200,255,.2); transform: translateY(-3px); }
.tcard.talking .tc-live { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .hv-grid { grid-template-columns: 1fr; }
  .hv-topics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .zm-title, .zm-view { display: none; }
  .zm-speaker { min-height: 220px; }
  .zm-thumb { width: 84px; }
  .zm-strip { top: 10px; right: 10px; gap: 6px; }
  .zm-cc { bottom: 38px; }
  .zm-cc span { font-size: 11.5px; }
  .zm-bar { overflow: hidden; }
  .zm-bar > span:nth-child(n+4):not(.zm-end):not(.zm-share) { display: none; }
  .zm-bar > span { min-width: 48px; }
  .hv-topics { grid-template-columns: 1fr 1fr; }
  .tcard:last-child { grid-column: span 2; }
  .tc-live { display: none; }
}
.zm-top b, .zm-top .tico { white-space: nowrap; flex: none; }
.hv-label { justify-content: center; }
.hv-demo { margin-left: 0; opacity: .7; }
/* v13b: Themen-Karten mobil kompakter */
.tc-metric b { white-space: nowrap; }
@media (max-width: 560px) {
  .tc-main small { white-space: normal; overflow: visible; }
  .tc-metric b { display: block; margin-top: 2px; font-size: 13px; }
}

/* ==========================================================================
   v14: Partner unter dem Titel, Titel-Icons höher, Hero-Video
   ========================================================================== */
.h1-shop .glassicons { position: relative; top: -5px; }
.partners.partners-top { margin-top: 26px; gap: 10px 30px; }
.partners-top + .lead { margin-top: 24px; }

.hero-visual.hv-video { width: 100%; height: auto; display: block; max-width: 1180px; margin: 64px auto 0; perspective: 1600px; }
.hero-visual.hv-video::before { display: none; }
.hvv-glow { position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(92,200,255,.34), rgba(47,123,255,.14) 55%, transparent); filter: blur(46px); }
.hvv-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #0b0d12;
  padding: 0; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px -40px rgba(47,123,255,.55), 0 30px 60px -30px rgba(0,0,0,.7);
  transform: rotateX(14deg) scale(.94); transform-origin: 50% 100%; transition: transform 1.4s var(--ease);
}
.hero-visual.in .hvv-frame { transform: none; }
.hvv-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06); }
.hvv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hvv-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,6,0) 60%, rgba(5,5,6,.28)); }
@media (max-width: 700px) {
  .hero-visual.hv-video { margin-top: 44px; }
  .hvv-frame { border-radius: 18px; aspect-ratio: 4 / 3.4; }
  .h1-shop .glassicons { top: -3px; }
}
@media (prefers-reduced-motion: reduce) { .hvv-frame { transform: none; transition: none; } }

/* ---------- Buchungsseite (eine für beide Marken): Titel, Bewertungen, Kalender ---------- */
.bk-one { padding: 128px 0 90px; text-align: center; }
.bk-one-h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; max-width: 900px; margin: 0 auto; }
.bk-one-h1 .it { display: block; }
.bk-one-proof { display: flex; justify-content: center; margin-top: 26px; }
.bk-one-proof .tp-badge { margin: 0; }
.bk-one-cal { max-width: 1040px; margin: 28px auto 0; padding: 0; text-align: left; }
.theme-light .bk-one-cal .calendly-inline-widget { background: transparent; }
.bk-one-cal .bk-done { border-top: 0; background: none; }
.bk-one-cal .calendly-inline-widget { height: 720px; }
.bk-one-note { justify-content: center; max-width: 1040px; margin: 14px auto 0; }
@media (max-width: 760px) {
  .bk-one { padding: 104px 0 60px; }
  .bk-one-cal { margin-top: 18px; margin-left: -16px; margin-right: -16px; }
  .bk-one-cal .calendly-inline-widget { height: 1040px; }
  .bk-simple .tp-badge { flex-wrap: wrap; justify-content: center; }
  .bk-simple .tp-google { display: inline-flex; }
}

/* ---------- Einwilligungs-Banner (assets/consent.js) ---------- */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.cc.open { opacity: 1; transform: none; }
.cc-card { pointer-events: auto; width: min(560px, 100%); padding: 22px 22px 18px; border-radius: 20px; background: rgba(255,255,255,.97); color: #0b1220; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 30px 70px -30px rgba(15,23,42,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; line-height: 1.55; }
.cc-title { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.cc-card p { margin: 0; color: #3b4455; }
.cc-card p a { color: #0a84ff; text-decoration: underline; text-underline-offset: 2px; }
.cc-opts { display: grid; gap: 8px; margin-top: 14px; }
.cc-opts[hidden] { display: none; }
.cc-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; background: #f3f5f8; cursor: pointer; }
.cc-opt b { display: block; font-weight: 500; }
.cc-opt small { color: #566074; font-size: 12.5px; }
.cc-opt input { width: 18px; height: 18px; accent-color: #0a84ff; flex: none; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cc-btn { flex: 1 1 auto; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(15,23,42,.12); background: #fff; color: #0b1220; font: inherit; font-weight: 500; cursor: pointer; }
.cc-btn:hover { border-color: rgba(15,23,42,.25); }
.cc-primary { background: #0b1220; color: #fff; border-color: #0b1220; }
.cc-primary:hover { background: #16213a; }
.footer-bottom [data-consent-open] { cursor: pointer; }

/* Video-Platzhalter bis zur Einwilligung (Zwei-Klick-Lösung) */
.vx-gate { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 24px; color: #fff; background: radial-gradient(400px 220px at 80% 0%, rgba(92,200,255,.3), transparent 70%), linear-gradient(135deg, #16213a, #0b1220); }
.vx-gate button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 0; background: #fff; color: #0b1220; font: inherit; font-weight: 500; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); }
.vx-gate button .i { width: 16px; height: 16px; }
.vx-gate small { display: block; max-width: 420px; margin: 14px auto 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.7); }
.vx-gate small a { color: #fff; text-decoration: underline; }

/* ---------- Echte Einblicke: Bühne, Zusammenarbeit, Galerie ---------- */
.rl-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #0b1220; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 9px; border-radius: 999px; }
.rl-stage, .rl-work, .gallery { --cap-pad: 14px; }
.rl-stage figure, .rl-work figure { margin: 0; position: relative; overflow: hidden; border-radius: 20px; background: #dfe4ec; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 50px -30px rgba(15,23,42,.45); }
.rl-stage img, .rl-work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.rl-stage figure:hover img, .rl-work figure:hover img { transform: scale(1.04); }
.rl-stage figcaption, .rl-work figcaption, .gallery figcaption { position: absolute; left: var(--cap-pad); right: var(--cap-pad); bottom: var(--cap-pad); z-index: 2; display: grid; gap: 6px; justify-items: start; }
.rl-stage figcaption b, .rl-work figcaption b { font-weight: 500; font-size: 15px; line-height: 1.3; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.rl-stage figure::after, .rl-work figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5)); pointer-events: none; }
.rl-stage { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 14px; }
.rl-a { grid-row: span 2; }
.rl-b { grid-column: span 2; }
.rl-b img { object-position: center 35%; }
.rl-work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 56px 0 18px; }
.rl-work-head p { margin: 0; max-width: 520px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.rl-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rl-work figure { aspect-ratio: 4 / 5; }
.gallery figcaption { z-index: 2; }
.gallery figure .rl-chip + b { color: #fff; }
@media (max-width: 980px) {
  .rl-stage { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
  .rl-a { grid-row: span 2; }
  .rl-b { grid-column: span 2; }
  .rl-work { grid-template-columns: 1fr 1fr; }
  .rl-work-head { flex-direction: column; align-items: start; gap: 8px; }
}
@media (max-width: 560px) {
  .rl-stage { grid-auto-rows: 160px; gap: 10px; }
  .rl-work { gap: 10px; }
  .rl-stage figcaption b, .rl-work figcaption b { font-size: 13px; }
  .rl-stage, .rl-work, .gallery { --cap-pad: 10px; }
}

/* ---------- Fokus: Busywork → Know-how-Transfer → Money-Making (#money, Script in main.js) ---------- */
.mm { position: relative; display: grid; grid-template-columns: 1fr 236px 1fr; align-items: stretch; }
.mm-col { padding: 26px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 2; border-radius: 24px; }
.mm-head h3 { font-size: 21px; margin-top: 6px; letter-spacing: -.025em; }
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; min-height: 54px; padding: 9px 12px 9px 10px; border-radius: 14px; border: 1px solid transparent; transition: opacity .5s, background .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.mm-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #fff; color: #1d2433; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06); transition: color .4s, opacity .4s; }
.mm-ico .i { width: 17px; height: 17px; stroke-width: 1.6; }
.mm-brand svg, .mm-brand img { width: 19px; height: 19px; object-fit: contain; }
.mm-txt { font-size: 14.5px; line-height: 1.3; letter-spacing: -.005em; transition: color .4s; }

/* Heute */
.mm-off { background: #fbfcfd; }
.mm-off .mm-row { background: transparent; }
.mm-off .mm-row + .mm-row { border-top-color: transparent; }
.mm-off .mm-ico { color: #6b7385; }
.mm-off .mm-txt { color: #3b4455; }
.mm-how { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; font-size: 12px; font-weight: 500; color: #6b7385; opacity: 0; transform: translateX(-4px); transition: opacity .4s, transform .4s var(--ease), max-width .5s var(--ease); white-space: nowrap; }
.mm-how .i { width: 13px; height: 13px; stroke-width: 2.2; color: #22a35a; }
.mm-off .mm-row.active { background: #fff; border-color: rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.35); }
.mm-off .mm-row.done .mm-txt { color: #a3abb9; text-decoration: line-through; text-decoration-color: rgba(15,23,42,.22); }
.mm-off .mm-row.done .mm-ico { opacity: .55; }
.mm-off .mm-row.done .mm-how { opacity: 1; transform: none; max-width: 170px; }
.mm-txt { min-width: 0; }
.mm-meter-off .mm-bar i { background: #c5ccd8; width: 12%; }
.mm-meter-off b { color: #8a93a4; }

/* Mit uns */
.mm-on .mm-row { border: 1px dashed rgba(15,23,42,.12); }
.mm-on .mm-row > * { opacity: 0; transform: translateY(4px); transition: opacity .45s, transform .45s var(--ease); }
.mm-on .mm-row.on { background: #fff; border-style: solid; border-color: rgba(15,23,42,.06); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px -20px rgba(15,23,42,.4); }
.mm-on .mm-row.on > * { opacity: 1; transform: none; }
.mm-on .mm-txt { font-weight: 500; color: var(--text); }
.mm-eur { font-size: 12px; font-weight: 600; color: #15803d; background: #ecfdf3; border: 1px solid #c8f0d8; padding: 3px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.mm-on .mm-row.pop .mm-eur { animation: mmPop .6s var(--ease); }
@keyframes mmPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.mm-meter { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.mm-meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.mm-meter-top b { font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mm-bar { height: 6px; border-radius: 99px; background: #eceff4; overflow: hidden; margin-top: 10px; }
.mm-bar i { display: block; height: 100%; width: 12%; border-radius: inherit; background: #0b1220; transition: width .9s var(--ease); }
.mm-meter small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--dim); }

/* Know-how-Transfer: Apple-Watch-artiger Ring statt Glow */
.mm-core { position: relative; display: grid; place-items: center; padding: 0 18px; }
.mm-link { position: absolute; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.18) 30%, rgba(15,23,42,.18) 70%, rgba(15,23,42,0)); }
.mm-link-l { left: -6px; right: 50%; }
.mm-link-r { left: 50%; right: -6px; }
.mm-link i { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #0b1220; opacity: .55; animation: mmTravel 2.4s cubic-bezier(.5,0,.5,1) infinite; }
.mm-link-r i { animation-delay: 1.2s; }
@keyframes mmTravel { 0% { left: 0; opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { left: calc(100% - 5px); opacity: 0; } }
.mm-hub { position: relative; z-index: 1; width: 100%; padding: 20px 18px 18px; border-radius: 26px; text-align: center; background: rgba(255,255,255,.88); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05), 0 30px 60px -34px rgba(15,23,42,.45); transition: transform .4s var(--ease); }
.mm-hub.hit { transform: scale(1.03); }
.mm-hub > .label { display: block; }
.mm-ring { position: relative; width: 132px; height: 132px; margin: 14px auto 16px; }
.mm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mm-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.mm-ring-bg { stroke: #eef1f5; }
.mm-ring-fg { stroke: #0b1220; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .9s var(--ease); }
.mm-ring-in { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.mm-ring-in b { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mm-ring-in b small { font-size: 15px; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-left: 1px; }
.mm-ring-in > span { font-size: 10.5px; line-height: 1.3; color: var(--muted); }
.mm-phase { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; text-align: left; }
.mm-phase li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #a3abb9; transition: color .3s; }
.mm-phase i { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1.5px solid #d5dbe4; position: relative; transition: background .3s, border-color .3s; }
.mm-phase i::after { content: ""; position: absolute; left: 4.5px; top: 1.8px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: 0; transition: opacity .2s; }
.mm-phase li.on { color: var(--text); }
.mm-phase li.on i { background: #0b1220; border-color: #0b1220; }
.mm-phase li.on i::after { opacity: 1; }

/* Fliegende Karte */
.mm-fly { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: #fff; color: #3b4455; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 16px 34px -16px rgba(15,23,42,.45); opacity: 0; transition: transform .8s cubic-bezier(.65,0,.35,1), opacity .3s, background .35s, color .35s; }
.mm-fly.money { background: #0b1220; color: #fff; border-color: #0b1220; box-shadow: 0 18px 36px -16px rgba(11,18,32,.7); }
.mm-fly.money::after { content: "€"; font-size: 11px; font-weight: 600; color: #15803d; background: #ecfdf3; padding: 1px 6px; border-radius: 99px; }

.mm-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mm-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.mm-steps span { font-family: var(--mono); font-size: 12px; color: var(--dim); padding-top: 2px; }
.mm-steps b { display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }
.mm-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  .mm { grid-template-columns: 1fr; }
  .mm-core { padding: 22px 0; }
  .mm-hub { max-width: 300px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; text-align: left; }
  .mm-hub > .label { grid-column: 1 / -1; }
  .mm-ring { width: 104px; height: 104px; margin: 6px 0 0; grid-row: span 1; }
  .mm-ring-in b { font-size: 24px; }
  .mm-link { left: 50% !important; right: auto !important; width: 1px; height: auto; background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.18) 30%, rgba(15,23,42,.18) 70%, rgba(15,23,42,0)); }
  .mm-link-l { top: 0; bottom: 50%; }
  .mm-link-r { top: 50%; bottom: 0; }
  .mm-link i { display: none; }
  .mm-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mm-col { padding: 20px 16px; }
  .mm-txt { font-size: 14px; }
  .mm-how { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .mm-link i { animation: none; } }

/* ---------- Kundenstimmen-Video (#stimmen) ---------- */
.kv-stage { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 0 8px; }
.kv-glow { position: absolute; inset: 8% -4% -6%; z-index: 0; border-radius: 40px; background: radial-gradient(50% 60% at 30% 40%, rgba(10,132,255,.22), transparent 70%), radial-gradient(45% 55% at 75% 65%, rgba(34,197,94,.14), transparent 70%); filter: blur(30px); }
.kv-win { position: relative; z-index: 1; border-radius: 22px; overflow: hidden; background: #0b0d12; box-shadow: 0 0 0 1px rgba(15,23,42,.12), 0 2px 4px rgba(15,23,42,.06), 0 50px 100px -40px rgba(15,23,42,.6); }
.kv-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #16191f; border-bottom: 1px solid rgba(255,255,255,.06); }
.kv-dots { display: flex; gap: 7px; }
.kv-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.kv-dots i:nth-child(2) { background: #febc2e; }
.kv-dots i:nth-child(3) { background: #28c840; }
.kv-title { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.62); letter-spacing: .01em; }
.kv-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.kv-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: blink 1.8s infinite; }
.kv-screen { position: relative; aspect-ratio: 1280 / 606; background: #0b0d12; }
.kv-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-toggle { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(15,18,24,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; opacity: .8; transition: opacity .2s; }
.kv-toggle:hover { opacity: 1; }
.kv-toggle .i { width: 15px; height: 15px; }
.kv-toggle .kv-ic-play { display: none; margin-left: 2px; }
.kv-toggle.paused .kv-ic-pause { display: none; }
.kv-toggle.paused .kv-ic-play { display: block; }

.kv-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; color: var(--text); background: rgba(255,255,255,.9); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 24px 48px -24px rgba(15,23,42,.45); animation: kvFloat 7s ease-in-out infinite; }
.kv-chip b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.kv-chip small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.kv-chip-tp { left: -56px; top: 18%; }
.kv-chip-g { right: -48px; top: 44%; animation-delay: -2.4s; }
.kv-chip-ava { left: -36px; bottom: 9%; animation-delay: -4.6s; }
.kv-stars { display: flex; gap: 2px; }
.kv-stars svg { width: 18px; height: 18px; padding: 2px; border-radius: 3px; background: #00b67a; }
.kv-stars .kv-half { background: linear-gradient(90deg, #00b67a 0 42%, #dcdce6 42% 100%); }
.kv-g { width: 28px; height: 28px; padding: 4px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.kv-chip-ava .avatars img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; }
.kv-chip-ava .avatars img:first-child { margin-left: 0; }
@keyframes kvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.kv-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; text-align: center; }
.kv-cta p { margin: 0; font-size: 17px; color: var(--muted); }
@media (max-width: 1180px) { .kv-chip-tp { left: -16px; } .kv-chip-g { right: -16px; } .kv-chip-ava { left: -8px; } }
@media (max-width: 760px) {
  .kv-stage { display: grid; gap: 10px; }
  .kv-chip { position: static; animation: none; justify-self: stretch; }
  .kv-win { border-radius: 16px; }
  .kv-title { display: none; }
  .kv-bar { grid-template-columns: auto 1fr; justify-items: end; }
}
@media (prefers-reduced-motion: reduce) { .kv-chip { animation: none; } }

/* ==========================================================================
   System-Sektion ohne Tabs: Markt-Vergleich, Experten, Leistungen, Fundament
   ========================================================================== */
#system .section-head.center { max-width: 880px; margin-left: auto; margin-right: auto; }

/* A · Vergleichstabelle */
.sx-cmp { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); margin-top: 56px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04), 0 40px 80px -50px rgba(15,23,42,.35); padding: 10px 10px 14px; }
.sx-row { display: contents; }
.sx-hl { position: absolute; z-index: 0; top: 6px; bottom: 4px; right: 10px; width: calc((100% - 20px) * 1.25 / 4.3); border-radius: 22px; background: linear-gradient(180deg, #0b1220, #121b2e); box-shadow: 0 30px 60px -30px rgba(11,18,32,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
.sx-k, .sx-v, .sx-col { position: relative; z-index: 1; padding: 15px 18px; border-top: 1px solid rgba(15,23,42,.06); font-size: 14.5px; line-height: 1.35; display: flex; align-items: center; gap: 10px; }
.sx-headrow > * { border-top: 0; }
.sx-k { font-weight: 600; color: var(--text); }
.sx-col { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 20px; padding-bottom: 18px; }
.sx-col b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.sx-col small { font-size: 12.5px; color: var(--dim); }
.sx-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #f1f3f6; color: #8a93a4; margin-bottom: 8px; }
.sx-ico .i { width: 15px; height: 15px; }
.sx-us { color: #fff; }
.sx-us small { color: rgba(255,255,255,.55); }
.sx-logos { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 8px; padding: 0 10px; border-radius: 9px; background: #fff; }
.sx-logos img { height: 15px; width: auto; }
.sx-logos img + img { padding-left: 8px; border-left: 1px solid rgba(15,23,42,.12); }
.sx-v { color: var(--muted); }
.sx-v .i { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; }
.sx-no { color: #8a93a4; }
.sx-no .i { background: #f1f3f6; color: #a3abb8; }
.sx-mid i { flex: none; width: 6px; height: 6px; margin: 0 6px; border-radius: 50%; background: #c9cfd8; }
.sx-yes { color: #fff; font-weight: 500; border-top-color: rgba(255,255,255,.07); }
.sx-yes .i { background: #0a84ff; color: #fff; }
.sx-cmp > .sx-row:last-child > * { padding-bottom: 20px; }

/* Kundenzitat */
.sx-quote { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 28px auto 0; padding: 0; }
.sx-quote img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 8px 20px -10px rgba(15,23,42,.5); }
.sx-quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.3; color: var(--text); }
.sx-quote figcaption { flex: none; font-size: 13px; color: var(--dim); white-space: nowrap; }
.sx-quote figcaption b { color: var(--text); font-weight: 600; }

/* Zwischenüberschriften */
.sx-sub { max-width: 760px; margin: 120px auto 40px; text-align: center; }
.sx-sub .label { display: block; margin-bottom: 14px; }
.sx-h { font-size: clamp(30px, 3.6vw, 48px); }
.sx-sub p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 16px auto 0; max-width: 640px; }

/* B · Experten-Karten mit echten Fotos */
.sx-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-exp { position: relative; margin: 0; aspect-ratio: 4 / 4.6; border-radius: 24px; overflow: hidden; background: #0b1220; box-shadow: 0 30px 60px -40px rgba(15,23,42,.6); isolation: isolate; }
.sx-exp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); z-index: -2; }
.sx-exp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,18,32,0) 30%, rgba(11,18,32,.55) 58%, rgba(11,18,32,.92) 100%); }
.sx-exp:hover img { transform: scale(1.04); }
.sx-exp figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.sx-exp-k { display: inline-flex; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #0b1220; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sx-exp b { display: block; margin: 12px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.sx-exp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-exp li { position: relative; padding-left: 16px; font-size: 13.5px; color: rgba(255,255,255,.82); }
.sx-exp li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #5cc8ff; }
.sx-quote-sm { margin-top: 32px; }

/* C · Leistungs-Zeilen: Text + echtes Foto + schwebende UI */
.sx-feat { display: grid; grid-template-columns: 1fr 1.08fr; gap: 72px; align-items: center; margin-top: 40px; padding: 48px 0; }
.sx-feat + .sx-feat { border-top: 1px solid rgba(15,23,42,.07); }
.sx-flip .sx-copy { order: 2; }
.sx-n { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #0a84ff; margin-bottom: 14px; }
.sx-copy p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 18px 0 0; }
.sx-copy .ticks { padding-top: 22px; }
.sx-vis { position: relative; padding: 0 0 40px 40px; }
.sx-flip .sx-vis { padding: 0 40px 40px 0; }
.sx-photo { display: block; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 28px; box-shadow: 0 40px 80px -50px rgba(15,23,42,.6); }
.sx-float { position: absolute; left: 0; bottom: 0; width: min(380px, 78%); border-radius: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -28px rgba(15,23,42,.5); padding: 16px; }
.sx-flip .sx-float { left: auto; right: 0; }
.sx-float-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; }
.sx-float-h small { margin-left: auto; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.sx-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 4px rgba(48,209,88,.15); }
.sx-brief { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: #f3f5f8; margin-bottom: 8px; }
.sx-brief span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-right: 8px; }
.sx-out { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid rgba(15,23,42,.06); }
.sx-out > div { min-width: 0; flex: 1; }
.sx-out b { display: block; font-size: 13px; font-weight: 600; }
.sx-out small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-out .pill { flex: none; font-size: 10.5px; }
.sx-th { flex: none; width: 34px; height: 42px; border-radius: 8px; }
.sx-th.g1 { background: linear-gradient(160deg, #d9c6ad, #8a6f55); }
.sx-th.g3 { background: linear-gradient(160deg, #cfe3ff, #6aa1e8); }
.sx-th.g4 { background: linear-gradient(160deg, #e7e2da, #2e2a26); }
.sx-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-flow li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sx-flow li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.sx-flow li.done > span { background: #0a84ff; color: #fff; }
.sx-flow li.done .i { width: 12px; height: 12px; }
.sx-flow li.run > span { border: 2px solid rgba(10,132,255,.25); }
.sx-flow li.run > span i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #0a84ff; border-right-color: transparent; animation: sxSpin 1s linear infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-cr { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(15,23,42,.07); }
.sx-cr b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sx-cr em { font-style: normal; color: #0a84ff; padding: 0 4px; }
.sx-callwin { padding: 0; width: min(440px, 86%); background: #fff; }
.sx-callwin .ui-body { padding: 14px; gap: 10px; }
.sx-callwin .ui-title h4 { font-size: 20px; }
.sx-callwin .proto-row:nth-child(n+3) { display: none; }

/* D · Fundament: drei Karten */
.sx-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.sx-card { display: flex; flex-direction: column; padding: 26px 24px 0; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -48px rgba(15,23,42,.45); overflow: hidden; }
.sx-card h4 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.sx-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 10px 0 22px; min-height: 4.65em; }
.sx-mini { flex: 1; margin: 0 -1px -1px; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: none !important; }
.sx-mini > .ui-body > .alert { display: none; }
.sx-mini .wf-labels { gap: 4px; font-size: 9px; }
.sx-mini .wf-labels span { overflow-wrap: anywhere; font-size: 8.5px; letter-spacing: -.02em; }
.sx-mini .ui-body { padding: 16px; gap: 10px; }
.sx-mini .ui-title h4 { font-size: 20px; }
.sx-mini .integrations { grid-template-columns: 1fr; gap: 6px; }
.sx-mini .integ { padding: 8px 10px; gap: 10px; }
.sx-mini .integ:nth-child(n+6) { display: none; }
.sx-mini .integ-logo { width: 30px; height: 30px; border-radius: 8px; }
.sx-mini .integ b { font-size: 13px; }
.sx-mini .alert { font-size: 12px; padding: 10px 12px; }
.sx-mini .waterfall { min-height: 170px; gap: 6px; }
.sx-mini .wf-labels { font-size: 9.5px; }
.sx-mini .bench-row { padding: 10px 12px; }
.sx-mini .bench-head { font-size: 12.5px; margin-bottom: 9px; }

/* E · Du verstehst, warum */
.sx-why { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 120px; }
.sx-why-pics { position: relative; padding: 0 0 70px 0; }
.sx-why-pics img { display: block; border-radius: 26px; object-fit: cover; box-shadow: 0 40px 80px -50px rgba(15,23,42,.6); }
.sx-why-pics img:first-child { width: 72%; aspect-ratio: 4 / 5; }
.sx-why-pics img:last-child { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; box-shadow: 0 0 0 6px var(--bg), 0 40px 80px -40px rgba(15,23,42,.6); }
.sx-why-copy .label { display: block; margin-bottom: 14px; }
.sx-why-copy p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 18px 0 0; }
.sx-why-pills { display: grid; gap: 10px; margin: 26px 0 30px; }
.sx-why-pills span { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.sx-why-pills .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #0a84ff; color: #fff; }

@media (max-width: 1080px) {
  .sx-team { grid-template-columns: repeat(2, 1fr); }
  .sx-feat, .sx-why { grid-template-columns: 1fr; gap: 36px; }
  .sx-flip .sx-copy { order: 0; }
  .sx-trio { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .sx-vis { max-width: 560px; }
}
@media (max-width: 760px) {
  .sx-cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 6px 10px; border-radius: 22px; margin-top: 40px; }
  .sx-k0 { display: none !important; }
  .sx-hl { right: 6px; top: 4px; width: calc((100% - 12px) / 3); border-radius: 16px; }
  .sx-k { grid-column: 1 / -1; padding: 16px 10px 2px; font-size: 12px; font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
  .sx-v { border-top: 0; padding: 8px 10px 14px; font-size: 12.5px; overflow-wrap: anywhere; hyphens: auto; align-items: flex-start; flex-direction: column; gap: 6px; }
  .sx-mid i { margin: 4px 0 0; }
  .sx-col { padding: 14px 10px 12px; }
  .sx-col b { font-size: 13px; line-height: 1.2; hyphens: auto; }
  .sx-ico { width: 26px; height: 26px; }
  .sx-col small { display: none; }
  .sx-logos { height: 26px; padding: 0 7px; gap: 5px; }
  .sx-logos img { height: 10px; }
  .sx-logos img + img { padding-left: 5px; }
  .sx-quote { flex-wrap: wrap; gap: 12px; }
  .sx-quote blockquote { flex: 1 1 220px; }
  .sx-quote figcaption { width: 100%; padding-left: 64px; margin-top: -6px; }
  .sx-sub { margin-top: 88px; }
  .sx-team { grid-template-columns: 1fr; }
  .sx-exp { aspect-ratio: 4 / 3.6; }
  .sx-vis, .sx-flip .sx-vis { padding: 0 0 120px; }
  .sx-float, .sx-flip .sx-float { left: 14px; right: 14px; width: auto; }
  .sx-feat { padding: 24px 0; }
  .sx-why { margin-top: 88px; }
}
@media (prefers-reduced-motion: reduce) { .sx-flow li.run > span i { animation: none; } .sx-exp img { transition: none; } }

/* ==========================================================================
   Playbook als Launch Control: Cockpit mit Drehzahlmesser, 8 Gänge = 8 Kapitel
   ========================================================================== */
.lc { margin-top: 56px; }
.lc-dash { position: relative; display: grid; grid-template-columns: 1fr minmax(340px, 440px) 1fr; align-items: center; gap: 28px; padding: 40px 36px; border-radius: 36px; color: #f4f6fa; background: radial-gradient(600px 340px at 50% 45%, rgba(47,123,255,.16), transparent 70%), linear-gradient(180deg, #0d1118, #06080c); box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 60px 120px -60px rgba(6,8,12,.9); overflow: hidden; }
.lc-dash::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); pointer-events: none; }
.lc-tach { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #151b26, #07090d 70%); box-shadow: 0 0 0 10px #0b0f15, 0 0 0 11px rgba(255,255,255,.07), 0 30px 60px -20px rgba(0,0,0,.9), 0 0 80px -10px rgba(47,123,255,.25); }
.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-track, .lc-arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.lc-track { stroke: rgba(255,255,255,.06); }
.lc-arc { stroke: url(#lcArc); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(92,200,255,.6)); transition: stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1); }
.lc-redzone { fill: none; stroke: #ff3b30; stroke-width: 7; opacity: .9; }
.lc-t { stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.lc-tm { stroke: #fff; stroke-width: 3; }
.lc-tr { stroke: #ff6b60; }
.lc-nums text { fill: #fff; font: 600 22px var(--sans); text-anchor: middle; }
.lc-nums .lc-red { fill: #ff5a4f; }
.lc-unit { fill: rgba(255,255,255,.4); font: 500 9px var(--mono); letter-spacing: .08em; text-anchor: middle; }
.lc-needle { transform-origin: 200px 200px; transform: rotate(-135deg); transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.lc-needle path { fill: #ff3b30; filter: drop-shadow(0 0 6px rgba(255,59,48,.7)); }
.lc-hub { fill: #1a202b; stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.lc-center { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-align: center; pointer-events: none; }
.lc-gear { display: grid; justify-items: center; }
.lc-gear small, .lc-rev small, .lc-sh small, .lc-kpis small { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.lc-gear b { font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #fff; min-width: 1ch; }
.lc-rev { display: grid; justify-items: center; padding: 6px 14px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
.lc-rev b { font: 600 22px var(--mono); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.lc-rev b::before { content: "€ "; color: rgba(255,255,255,.45); }
.lc-shift { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.lc-shift i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.08); transition: background .15s, box-shadow .15s; }
.lc.red .lc-shift i { background: #30d158; box-shadow: 0 0 10px #30d158; }
.lc.red .lc-shift i:nth-child(n+3) { background: #ffd60a; box-shadow: 0 0 10px #ffd60a; }
.lc.red .lc-shift i:nth-child(n+5) { background: #ff3b30; box-shadow: 0 0 10px #ff3b30; }
.lc.redflash .lc-shift i { animation: lcFlash .18s steps(2) infinite; }
@keyframes lcFlash { 50% { background: rgba(255,255,255,.08); box-shadow: none; } }

.lc-screen { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
.lc-sh { display: flex; align-items: center; gap: 8px; }
.lc-sh b { font-size: 14px; font-weight: 600; }
.lc-sh small { margin-left: auto; }
.lc-led { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 10px #30d158; }
.lc-launch .lc-led:not(.lc-led-b) { animation: lcBlink .5s steps(2) infinite; background: #ffd60a; box-shadow: 0 0 10px #ffd60a; }
@keyframes lcBlink { 50% { opacity: .2; } }
.lc-led-b { background: #5cc8ff; box-shadow: 0 0 10px #5cc8ff; }
.lc-now { flex: 1; }
.lc-now b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 12px; }
.lc-now ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-now li { position: relative; padding: 9px 12px 9px 32px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; color: rgba(255,255,255,.85); animation: lcIn .45s var(--ease) both; }
.lc-now li:nth-child(2) { animation-delay: .08s; }
.lc-now li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
@keyframes lcIn { from { opacity: 0; transform: translateY(6px); } }
.lc-pdk { display: flex; gap: 6px; font: 600 12px var(--mono); }
.lc-pdk span { flex: 1; text-align: center; padding: 5px 0; border-radius: 7px; color: rgba(255,255,255,.3); background: rgba(255,255,255,.03); }
.lc-pdk .on { color: #fff; background: rgba(10,132,255,.3); box-shadow: 0 0 0 1px rgba(92,200,255,.4) inset; }
.lc-spark { width: 100%; height: auto; flex: 1; min-height: 110px; overflow: visible; }
.lc-spark polyline { fill: none; stroke: #5cc8ff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(92,200,255,.7)); }
.lc-spark .lc-area { fill: url(#lcSpark); }
.lc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lc-kpis > div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.lc-kpis b { display: block; margin-top: 3px; font: 600 20px var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.lc-gears { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lc-g { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 20px 40px -36px rgba(15,23,42,.5); transition: box-shadow .35s, transform .35s var(--ease); }
.lc-knob { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 16px var(--sans); color: #0b1220; background: radial-gradient(circle at 35% 30%, #fff, #e6e9ef 70%); box-shadow: 0 0 0 1px rgba(15,23,42,.1), 0 4px 10px -4px rgba(15,23,42,.35); transition: background .3s, color .3s; }
.lc-g b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0 6px; }
.lc-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lc-g li { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lc-g.on { box-shadow: 0 0 0 2px #0a84ff, 0 24px 50px -30px rgba(10,132,255,.55); transform: translateY(-2px); }
.lc-g.on .lc-knob, .lc-g.done .lc-knob { color: #fff; background: radial-gradient(circle at 35% 30%, #4aa8ff, #0a6cff 70%); box-shadow: 0 4px 12px -4px rgba(10,108,255,.6); }

.lc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.lc-facts > div { padding: 4px 6px; text-align: center; }
.lc-facts b { display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.lc-facts span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 1080px) {
  .lc-dash { grid-template-columns: 1fr 1fr; padding: 48px 22px 22px; }
  .lc-tach { grid-column: 1 / -1; order: -1; width: min(420px, 100%); justify-self: center; }
  .lc-gears { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .lc-dash { grid-template-columns: 1fr; border-radius: 26px; gap: 16px; padding: 44px 14px 14px; }
  .lc-gear b { font-size: 36px; }
  .lc-rev b { font-size: 17px; }
  .lc-center { gap: 6px; }
  .lc-spark { min-height: 80px; }
  .lc-gears { grid-template-columns: 1fr; }
  .lc-facts { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
}

/* Badges: kein Flex-Abstand zwischen Text und fettem Wort (sonst doppelte Leerstelle) */
.tag { gap: 0; }
.tag > .tag-dot { margin-right: 10px; }

/* ==========================================================================
   Finaler CTA: Kostenloser Marketing-Workshop
   ========================================================================== */
.ws { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: 56px; border-radius: 36px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 60px 120px -70px rgba(15,23,42,.45); }
.ws-copy .tag { margin-bottom: 24px; }
.ws-copy .lead { margin-top: 18px; }
.ws-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.ws-steps li { display: flex; gap: 14px; align-items: flex-start; }
.ws-steps li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; background: #0b1220; }
.ws-steps b { display: block; font-size: 16px; font-weight: 600; }
.ws-steps small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.ws-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.ws-note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.ws-note .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #30d158; color: #fff; }
.ws-vis { position: relative; padding-bottom: 36px; }
.ws-vis > img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 28px; }
.ws-card { position: absolute; left: -28px; bottom: 0; width: min(320px, 86%); padding: 20px; border-radius: 22px; background: rgba(255,255,255,.95); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -28px rgba(15,23,42,.5); }
.ws-card .label { display: block; margin-bottom: 12px; }
.ws-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-card li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.ws-card li .i { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #0a84ff; color: #fff; }
.ws-rating { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,.07); font-size: 13px; color: var(--muted); }
.ws-rating b { color: var(--text); }
.ws-stars { color: #00b67a; letter-spacing: 1px; margin-right: 6px; }
@media (max-width: 1080px) { .ws { grid-template-columns: 1fr; gap: 40px; padding: 40px; } .ws-vis { max-width: 560px; } .ws-card { left: 16px; } }
@media (max-width: 760px) { .ws { padding: 26px 20px; border-radius: 26px; } .ws-cta .btn { width: 100%; justify-content: center; } .ws-card { left: 12px; right: 12px; width: auto; } .ws-vis { padding-bottom: 150px; } }

/* ==========================================================================
   Orbit Intelligence: 3D-HQ (iframe) + Ablauf + Prinzip-Vergleich
   ========================================================================== */
.oi-stage { position: relative; margin: 36px 0 0 calc(50% - min(780px, 50vw)); width: min(1560px, 100vw); aspect-ratio: 16 / 9; max-height: 860px; background: transparent; isolation: isolate; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%); mask-composite: intersect; }
.oi-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 1s var(--ease); pointer-events: none; }
.oi-frame, .oi-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.oi-stage.live .oi-poster { opacity: 0; }
.oi-load { position: absolute; z-index: 3; left: 50%; bottom: 20%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 99px; font: 500 12px var(--mono); color: var(--muted); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 10px 24px -14px rgba(15,23,42,.4); }
.oi-load span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(10,132,255,.25); border-top-color: #0a84ff; animation: sxSpin .9s linear infinite; }
.oi-stage.loading:not(.live) .oi-load { display: inline-flex; }
.oi-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: -8px; position: relative; font-size: 14px; color: var(--muted); }
.oi-legend span { display: inline-flex; align-items: center; gap: 8px; }
.oi-legend b { color: var(--text); font-weight: 600; }
.oi-legend i { width: 12px; height: 12px; border-radius: 50%; }
.oi-l-h { background: #2b3445; }
.oi-l-a { background: #5cc8ff; box-shadow: 0 0 0 4px rgba(92,200,255,.22), 0 0 12px #5cc8ff; }
.oi-l-c { background: conic-gradient(#0a84ff, #5cc8ff, #7c6cff, #0a84ff); }
.oi-steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.oi-steps li { padding: 24px 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 24px 50px -44px rgba(15,23,42,.5); }
.oi-n { display: inline-block; font: 500 11.5px var(--mono); letter-spacing: .06em; color: #0a84ff; margin-bottom: 14px; }
.oi-steps b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.oi-steps p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.oi-out { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.oi-col { display: grid; gap: 18px; padding: 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 24px 50px -44px rgba(15,23,42,.5); }
.oi-col-us { background: linear-gradient(180deg, #0b1220, #121b2e); color: #fff; box-shadow: 0 30px 60px -34px rgba(11,18,32,.6); }
.oi-col-h b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.oi-col-h small { font-size: 13.5px; color: var(--muted); }
.oi-col-us .oi-col-h small { color: rgba(255,255,255,.6); }
.oi-m-h { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.oi-m-h small { font-size: 12.5px; font-weight: 400; color: var(--dim); text-align: right; }
.oi-col-us .oi-m-h small { color: rgba(255,255,255,.55); }
.oi-track { height: 8px; border-radius: 99px; background: rgba(15,23,42,.06); overflow: hidden; }
.oi-col-us .oi-track { background: rgba(255,255,255,.08); }
.oi-track i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1.4s var(--ease) .2s; }
.oi-out.in .oi-track i { width: var(--w); }
.oi-g { background: #b9c1cd; }
.oi-b { background: linear-gradient(90deg, #0a84ff, #5cc8ff); box-shadow: 0 0 14px rgba(92,200,255,.5); }
.oi-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font: 500 11px var(--mono); color: var(--dim); letter-spacing: .03em; }
@media (max-width: 1080px) { .oi-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .oi-stage { aspect-ratio: 1 / 1.12; margin-top: 20px; }
  .oi-legend { margin-top: 0; }
  .oi-legend { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 4px; }
  .oi-steps, .oi-out { grid-template-columns: 1fr; }
  .oi-steps { margin-top: 40px; }
}

/* ==========================================================================
   Produktion Asien · Build & Buy
   ========================================================================== */
.pr-map { position: relative; display: grid; grid-template-columns: 300px 1fr 300px; align-items: center; gap: 0 16px; margin-top: 52px; padding: 34px; border-radius: 32px; background: radial-gradient(600px 220px at 50% 30%, rgba(10,132,255,.08), transparent 70%), #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 50px 100px -70px rgba(15,23,42,.5); }
.pr-hub { position: relative; z-index: 1; padding: 22px; border-radius: 22px; background: #f6f7f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.pr-hub-d { background: linear-gradient(180deg, #0b1220, #121b2e); color: #fff; }
.pr-flag { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: #fff; color: #0b1220; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.pr-hub > b { display: block; margin: 14px 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.pr-hub > small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.pr-hub-d > small { color: rgba(255,255,255,.62); }
.pr-clock { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 12px var(--mono); color: var(--dim); }
.pr-hub-d .pr-clock { color: rgba(255,255,255,.55); }
.pr-clock b { color: inherit; font-weight: 600; }
.pr-hub-a .pr-clock b { color: var(--text); }
.pr-hub-d .pr-clock b { color: #fff; }
.pr-clock i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px rgba(48,209,88,.18); }
.pr-route { position: relative; height: 150px; }
.pr-route-in { position: absolute; inset: 10px 0 30px; }
.pr-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-route path { fill: none; stroke: rgba(15,23,42,.1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pr-route .pr-dash { stroke: #0a84ff; stroke-dasharray: 2 10; stroke-linecap: round; stroke-width: 3; animation: prDash 1.4s linear infinite; }
@keyframes prDash { to { stroke-dashoffset: -24; } }
.pr-box { position: absolute; left: 0; top: 0; width: 40px; height: 40px; offset-anchor: center; display: grid; place-items: center; border-radius: 12px; background: #fff; color: #0a84ff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 12px 24px -10px rgba(10,132,255,.5); offset-rotate: 0deg; animation: prMove 6s cubic-bezier(.45,.05,.55,.95) infinite; }
.pr-box .i { width: 18px; height: 18px; }
@keyframes prMove { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.pr-route-k { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font: 500 11.5px var(--mono); color: var(--dim); letter-spacing: .03em; }
.pr-chain { grid-column: 1 / -1; list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(15,23,42,.07); display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; counter-reset: none; }
.pr-chain li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; font-size: 13.5px; font-weight: 500; line-height: 1.25; background: #f6f7f9; }
.pr-chain li span { font: 500 10.5px var(--mono); color: var(--dim); }
.pr-chain .pr-a { box-shadow: inset 0 3px 0 #0a84ff; }
.pr-chain .pr-r { box-shadow: inset 0 3px 0 #5cc8ff; }
.pr-chain .pr-d { box-shadow: inset 0 3px 0 #0b1220; }
.pr-bb { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pr-card { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 40px 80px -60px rgba(15,23,42,.5); }
.pr-img { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.pr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-k { position: absolute; left: 20px; top: 20px; padding: 6px 14px; border-radius: 99px; font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(11,18,32,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pr-body { padding: 28px; }
.pr-body p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; }
.pr-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pr-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.pr-list .i { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #0a84ff; color: #fff; }
.pr-one { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; margin-top: 16px; padding: 24px 28px; border-radius: 24px; background: linear-gradient(180deg, #0b1220, #121b2e); color: #fff; }
.pr-one-l b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.pr-one-l span { font-size: 14px; color: rgba(255,255,255,.62); }
.pr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-pills span { padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
@media (prefers-reduced-motion: reduce) { .pr-route .pr-dash, .pr-box { animation: none; } .pr-box { offset-distance: 50%; } }
@media (max-width: 1080px) {
  .pr-map { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pr-route { display: none; }
  .pr-chain { grid-template-columns: repeat(4, 1fr); }
  .pr-bb { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pr-map { grid-template-columns: 1fr; padding: 16px; border-radius: 24px; }
  .pr-chain { grid-template-columns: 1fr 1fr; margin-top: 10px; }
  .pr-list { grid-template-columns: 1fr; }
  .pr-body { padding: 22px; }
  .pr-img { aspect-ratio: 16 / 10; }
}
.ws-rating b { display: inline; }

/* Längere Button-Texte (Marketing-Workshop) dürfen auf dem Handy umbrechen statt überzulaufen */
@media (max-width: 760px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
}
.pr-flag { display: inline-flex; align-items: center; gap: 6px; }
.pr-flag .flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15,23,42,.12); display: block; }
.pr-flag .flag-sq { width: 12px; height: 12px; }
.pr-flag .flag + .flag { margin-left: -2px; }

/* ==========================================================================
   Orbit Intelligence: Organigramm-Vergleich (klassisch vs. mit KI-Agenten)
   ========================================================================== */
.org { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.org-col { padding: 26px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -50px rgba(15,23,42,.5); }
.org-us { background: linear-gradient(180deg, #0b1220, #121b2e); color: #fff; box-shadow: 0 40px 80px -46px rgba(11,18,32,.7); }
.org-h { margin-bottom: 18px; }
.org-h .label { display: block; margin-bottom: 6px; }
.org-us .org-h .label { color: #5cc8ff; }
.org-h > b { display: block; font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.org-h > b span { font-size: .5em; font-weight: 500; color: #5cc8ff; letter-spacing: -.01em; }
.org-h small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.org-us .org-h small { color: rgba(255,255,255,.6); }
.org-top { position: relative; display: flex; justify-content: center; padding-bottom: 18px; }
.org-top::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 18px; background: rgba(15,23,42,.18); }
.org-us .org-top::after { background: rgba(255,255,255,.22); }
.org-top .org-n { width: min(240px, 100%); }
.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,.14); }
.org-us .org-grid { border-top-color: rgba(255,255,255,.18); }
.org-n { padding: 11px 12px; border-radius: 14px; background: #f4f6f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.org-us .org-n { background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
.org-n-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.org-n-h b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.org-n-h em { font: 600 15px var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.org-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.org .p, .org-legend .p { width: 10px; height: 10px; border-radius: 50%; background: #6b7487; display: inline-block; }
.org-us .p { background: #e9edf3; }
.org .a, .org-legend .a { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg) scale(.85); background: linear-gradient(135deg, #5cc8ff, #0a84ff); box-shadow: 0 0 8px rgba(92,200,255,.8); display: inline-block; }
.org-n small { display: block; margin-top: 6px; font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #f2c230; }
.org-sum { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }
.org-sum b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #0a84ff; }
.org-sum span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.org-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.org-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.org-legend .oi-note { margin: 0; }
@media (max-width: 900px) { .org { grid-template-columns: 1fr; } .org-sum { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .org-col { padding: 18px; } .org-grid { grid-template-columns: 1fr 1fr; } .org-n-h b { font-size: 12px; } }

/* Organigramm v2: Männchen statt Punkte, entfallene Stellen als Umriss, KI-Agenten als Plakette */
.org-figs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 9px; }
.fig { width: 13px; height: 16px; fill: #59627a; flex: none; }
.org-us .fig { fill: #ffffff; }
.fig.ghost { fill: none; stroke: #b9c1cd; stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.org-us .fig.ghost { stroke: rgba(255,255,255,.28); }
.org-ag { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 3px 9px 3px 7px; border-radius: 99px; font: 600 11px var(--sans); color: #5cc8ff; background: rgba(10,132,255,.14); box-shadow: 0 0 0 1px rgba(92,200,255,.35) inset, 0 0 16px -4px rgba(92,200,255,.55); }
.org-ag .i { width: 12px; height: 12px; }
.org-us .org-n small { color: rgba(255,255,255,.55); text-transform: none; letter-spacing: 0; font: 400 11.5px var(--sans); line-height: 1.35; }
.org-us .org-n:nth-child(2) small { color: #f2c230; font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.org-us .org-n-h em { color: #fff; }
.org-legend .fig { width: 12px; height: 15px; }
.org-legend .fig.ghost { stroke: #8a93a4; }
.org-legend .org-ag { margin: 0; color: #0a84ff; background: rgba(10,132,255,.08); box-shadow: 0 0 0 1px rgba(10,132,255,.3) inset; }
.org-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; min-height: 22px; }
.org-row .org-figs { margin-top: 0; }
.org-row .org-ag { margin-top: 0; flex: none; }
.org-hand { flex: none; padding: 3px 8px; border-radius: 99px; font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #a37a00; background: rgba(242,194,48,.16); box-shadow: 0 0 0 1px rgba(242,194,48,.4) inset; }
.org-us .org-hand { color: #f2c230; background: rgba(242,194,48,.12); }
.org-n { display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 420px) { .org-row { flex-wrap: wrap; } .org-ag { font-size: 10px; } }
/* System-Titel breiter: jeder Satz eine Zeile */
#system .section-head.center { max-width: 1240px; }
#system .section-head.center .h2 { line-height: 1.08; }
#system .section-head.center .lead { max-width: 800px; margin-left: auto; margin-right: auto; }
#system .section-head.center .h2 { font-size: clamp(32px, 3.9vw, 58px); text-wrap: balance; }

/* ==========================================================================
   Inhouse-Aufbau v2: 4 Phasen mit Fotos + Übergabe-Balken, Kanäle-Block
   ========================================================================== */
#inhouse .section-head.center { max-width: 900px; margin-left: auto; margin-right: auto; }
.ih-legend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin: 40px 0 18px; font-size: 14px; color: var(--muted); }
.ih-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.ih-arrow { padding: 5px 12px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); font: 500 12px var(--mono); color: var(--text); }
.ih-arrow .i { width: 14px; height: 14px; }
.ih-dot-us, .ih-dot-you { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ih-dot-us { background: #0a84ff; }
.ih-dot-you { background: #95bf47; }
.ih-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.ih-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -46px rgba(15,23,42,.55); }
.ih-img { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; }
.ih-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.ih-card:hover .ih-img img { transform: scale(1.05); }
.ih-n { position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font: 600 15px var(--mono); color: #0b1220; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ih-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.ih-body h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.ih-body p { margin: 8px 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); flex: 1; }
.ih-split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(15,23,42,.06); }
.ih-split i { display: block; height: 100%; transition: width 1.3s var(--ease) .25s; width: 0; }
.ih-us { background: linear-gradient(90deg, #0a84ff, #5cc8ff); }
.ih-you { background: linear-gradient(90deg, #95bf47, #b6d96b); margin-left: auto; }
.ih-card.in .ih-us { width: var(--us); }
.ih-card.in .ih-you { width: calc(100% - var(--us)); }
.ih-split-l { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11.5px var(--mono); color: var(--muted); }
.ih-split-l span { display: inline-flex; align-items: center; gap: 6px; }
.ih-split-l i { width: 8px; height: 8px; }
.ih-near { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; margin-top: 16px; padding: 44px; border-radius: 32px; color: #fff; background: radial-gradient(500px 260px at 85% 20%, rgba(10,132,255,.22), transparent 70%), linear-gradient(180deg, #0b1220, #121b2e); box-shadow: 0 50px 100px -60px rgba(11,18,32,.8); }
.ih-near .label { color: #5cc8ff; display: block; margin-bottom: 12px; }
.ih-near h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.ih-near p { margin: 14px 0 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.6; }
.ih-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ih-apps span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; font-size: 14px; font-weight: 500; }
.ih-apps svg, .ih-app svg { width: 20px; height: 20px; }
.ih-chat { position: relative; display: grid; gap: 12px; }
.ih-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 90%; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: #fff; color: #0b1220; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ih-near.in .ih-msg { opacity: 1; transform: none; }
.ih-near.in .ih-msg:nth-child(2) { transition-delay: .35s; }
.ih-near.in .ih-msg:nth-child(3) { transition-delay: .7s; }
.ih-msg-r { justify-self: end; border-radius: 18px 18px 6px 18px; background: #e7f6d8; }
.ih-app { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f3f5f8; }
.ih-msg-r .ih-app { background: #fff; }
.ih-msg small { display: block; font: 500 11px var(--mono); color: #8a93a4; margin-bottom: 3px; }
.ih-msg b { font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.ih-demo { position: absolute; right: 0; bottom: -24px; font: 500 10.5px var(--mono); color: rgba(255,255,255,.4); }
@media (max-width: 1080px) { .ih-flow { grid-template-columns: repeat(2, 1fr); } .ih-near { grid-template-columns: 1fr; padding: 32px; } }
@media (max-width: 600px) { .ih-flow { grid-template-columns: 1fr; } .ih-near { padding: 24px 18px 40px; border-radius: 24px; } .ih-msg { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ih-split i, .ih-msg { transition: none; } }
#inhouse .section-head.center { max-width: 1200px; }
#inhouse .section-head.center .h2 { font-size: clamp(32px, 3.9vw, 58px); text-wrap: balance; }
#inhouse .section-head.center .lead { max-width: 780px; margin-left: auto; margin-right: auto; }
/* Organigramm v3: Orbit-Symbol statt Stern, Umsatz pro FTE, Notizen */
.org-ag .orb, .org-legend .orb { width: 13px; height: 13px; flex: none; }
.orb circle { fill: currentColor; }
.orb ellipse { fill: none; stroke: currentColor; stroke-width: 1.3; }
.org-n .org-note { display: block; margin-top: 7px; font: 400 11.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.org-us .org-n .org-note, .org-us .org-n:nth-child(2) .org-note { color: rgba(255,255,255,.55); font: 400 11.5px var(--sans); letter-spacing: 0; text-transform: none; }
.org-kpi { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: #f4f6f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.org-kpi span { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.org-kpi b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.org-kpi em { margin-left: 6px; padding: 3px 9px; border-radius: 99px; font: 600 13px var(--mono); font-style: normal; color: #0b1220; background: #95bf47; vertical-align: 3px; }
.org-us .org-kpi { background: rgba(149,191,71,.12); box-shadow: 0 0 0 1px rgba(149,191,71,.4) inset; }
.org-us .org-kpi span { color: rgba(255,255,255,.65); }
.org-us .org-kpi b { color: #b6d96b; }
@media (max-width: 420px) { .org-kpi { flex-direction: column; align-items: flex-start; } .org-kpi b { font-size: 21px; } }
.org-col { display: flex; flex-direction: column; }
.org-col .org-grid { margin-bottom: 16px; }
.org-col .org-kpi { margin-top: auto; }

/* Einheitlicher, ruhigerer Sektionsabstand (vorher ~300 px Leerraum zwischen Sektionen) */
.section { padding: 88px 0; }
.sx-sub { margin-top: 88px; }
.sx-why { margin-top: 88px; }
@media (max-width: 1080px) { .section { padding: 72px 0; } }
@media (max-width: 760px) { .section { padding: 56px 0; } .sx-sub, .sx-why { margin-top: 64px; } }
@media (min-width: 761px) { #call { padding-top: 40px; } }

/* ==========================================================================
   Orbit Intelligence als 2D-Flowchart: Abteilungen + KI-Agenten → Orbit Intelligence → Deine Brand
   ========================================================================== */
.ag-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 0 96px; align-items: center; margin-top: 44px; padding: 56px 44px 64px; border-radius: 32px; background: repeating-linear-gradient(135deg, rgba(15,23,42,.028) 0 1px, transparent 1px 9px), #f3f4f6; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.ag-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.ag-lines path { fill: none; stroke: #c6ccd5; stroke-width: 1.5; transition: stroke .4s; }
.ag-lines path.on { stroke: var(--c); stroke-width: 2; }
.ag-lines .pin { fill: #f2a93b; }
.ag-lines .runner { filter: drop-shadow(0 0 6px currentColor); }
.ag-col { position: relative; z-index: 1; display: grid; gap: 16px; }
.ag-node, .ag-core, .ag-brand, .ag-out { position: relative; z-index: 1; padding: 6px; border-radius: 22px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset, 0 20px 40px -30px rgba(15,23,42,.4); transition: transform .4s var(--ease), box-shadow .4s; }
.ag-in { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 17px; background: linear-gradient(180deg, #ffffff, #fafbfc); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05); }
.ag-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #f0f2f5); box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 5px 12px -7px rgba(15,23,42,.4); }
.ag-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--c, #0a84ff); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ag-t { min-width: 0; }
.ag-t b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ag-t small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ag-t small i { display: inline-flex; }
.ag-t small i svg { width: 13px; height: 13px; fill: none; stroke: var(--c); stroke-width: 1.8; }
.ag-st { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: #f0f2f5; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; position: relative; transition: background .3s; }
.ag-node.on .ag-st { background: rgba(10,132,255,.08); box-shadow: none; }
.ag-node.on .ag-st::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px dashed var(--c); animation: sxSpin 2.4s linear infinite; }
.ag-node.done .ag-st { background: #e6f4ea; box-shadow: none; }
.ag-node.done .ag-st::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid #22a06b; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ag-task { padding: 7px 10px 3px; font: 500 11.5px var(--mono); color: var(--dim); opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s, color .4s; }
.ag-node.on .ag-task, .ag-node.done .ag-task { opacity: 1; color: var(--text); }
.ag-node.on { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset, 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 24px 44px -28px rgba(15,23,42,.5); }
.ag-mid { position: relative; z-index: 1; display: grid; gap: 40px; }
.ag-core { padding: 7px; background: rgba(10,132,255,.14); box-shadow: 0 0 0 1px rgba(10,132,255,.25) inset, 0 24px 50px -26px rgba(10,132,255,.6); }
.ag-core .ag-in { padding: 15px 16px; background: linear-gradient(135deg, #5cc8ff, #0a84ff); color: #fff; box-shadow: none; }
.ag-core .ag-t b { font-size: 16px; }
.ag-core .ag-t small { color: rgba(255,255,255,.85); }
.ag-ico-core { --c: #0a84ff; }
.ag-core.pulse { animation: agPulse .9s var(--ease); }
@keyframes agPulse { 40% { transform: scale(1.04); box-shadow: 0 0 0 1px rgba(10,132,255,.25) inset, 0 0 0 10px rgba(10,132,255,.12), 0 24px 50px -26px rgba(10,132,255,.7); } }
.ag-shops { display: flex; gap: 6px; flex: none; }
.ag-shops span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #fff, #f0f2f5); box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 5px 12px -7px rgba(15,23,42,.4); }
.ag-shops img { width: 22px; height: 22px; object-fit: contain; }
.ag-brand .ag-in { padding: 14px 16px; }
.ag-brand .ag-t b { font-size: 16px; }
.ag-brand.pulse { animation: agPulse2 .9s var(--ease); }
@keyframes agPulse2 { 40% { transform: scale(1.03); } }
.ag-out { background: rgba(149,191,71,.16); box-shadow: 0 0 0 1px rgba(149,191,71,.3) inset; }
.ag-out .ag-in { background: linear-gradient(90deg, #f6fbef, #e6f2d2); }
.ag-ico-out { --c: #3f7d1d; }
.ag-demo { position: absolute; right: 26px; bottom: 20px; font: 500 10.5px var(--mono); color: var(--dim); letter-spacing: .03em; }
@media (max-width: 1080px) { .ag-board { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); gap: 0 56px; padding: 44px 24px 56px; } .ag-task { font-size: 10.5px; } }
@media (max-width: 860px) {
  .ag-board { grid-template-columns: 1fr; gap: 16px; padding: 22px 14px 44px; }
  .ag-lines { display: none; }
  .ag-mid { order: -1; gap: 12px; margin-bottom: 8px; }
  .ag-col { gap: 10px; }
  .ag-demo { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ag-node.on .ag-st::after { animation: none; } }
/* Orbit Intelligence: echter Orbit-Ring aus dem Logo */
.ag-ring { display: block; width: 15px; height: 26px; background: #0b1220; -webkit-mask: url(img/orbit-ring.png) center / contain no-repeat; mask: url(img/orbit-ring.png) center / contain no-repeat; }
.sx-sub-wide { max-width: 1200px; }
.sx-sub-wide .tag { margin-bottom: 18px; }
.sx-sub-wide .sx-h { font-size: clamp(30px, 3.6vw, 52px); text-wrap: balance; }
.sx-sub-wide p { max-width: 780px; }

/* ==========================================================================
   System: 7 Schritte, jeweils Text + 2D-Grafik (Stil: helle Panels, Doppelrand-Karten, feine Linien)
   ========================================================================== */
.st-label { text-align: center; margin: 72px auto 8px; }
.st-label .label { display: block; margin-bottom: 8px; }
.st-label b { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding: 56px 0; }
.st-row + .st-row { border-top: 1px solid rgba(15,23,42,.07); }
.st-flip .st-copy { order: 2; }
.st-n { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #0a84ff; }
.st-n i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: #0b1220; font-weight: 600; letter-spacing: 0; }
.st-copy p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 16px 0 0; }
.st-copy .ticks { padding-top: 20px; }
.st-panel { position: relative; padding: 34px 28px; border-radius: 28px; background: repeating-linear-gradient(135deg, rgba(15,23,42,.028) 0 1px, transparent 1px 9px), #f3f4f6; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.st-chip { align-self: flex-start; margin-bottom: 16px; padding: 6px 12px; border-radius: 99px; font: 500 11.5px var(--mono); color: var(--text); background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 6px 14px -10px rgba(15,23,42,.4); }
.st-chip-g { align-self: center; margin: 16px 0 0; color: #3f7d1d; background: #f1f8e6; box-shadow: 0 0 0 1px rgba(149,191,71,.35); }
/* Status */
.st-ok, .st-run { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; position: relative; }
.st-ok { background: #e6f4ea; }
.st-ok::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid #22a06b; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.st-run { background: rgba(10,132,255,.08); }
.st-run::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed #0a84ff; animation: sxSpin 3s linear infinite; }
.st-pend { flex: none; margin-left: auto; padding: 4px 10px; border-radius: 99px; font-size: 12px; color: #9aa3b2; background: #f1f3f6; }
/* Knoten (wie Orbit-Board) */
.nd { position: relative; z-index: 1; padding: 6px; border-radius: 20px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset, 0 18px 36px -28px rgba(15,23,42,.45); }
.nd .ag-in { padding: 10px 12px; }
.nd .ag-ico img { width: 22px; height: 22px; object-fit: contain; }
.nd-logo .ag-t b { font-size: 14px; }
.nd-hot { background: rgba(10,132,255,.14); box-shadow: 0 0 0 1px rgba(10,132,255,.25) inset, 0 22px 44px -26px rgba(10,132,255,.6); }
.nd-hot .ag-in { background: linear-gradient(135deg, #5cc8ff, #0a84ff); color: #fff; box-shadow: none; }
.nd-hot .ag-t small { color: rgba(255,255,255,.85); }
.nd-hot .ag-ico svg { stroke: #0a84ff; }
.nd-soft { background: rgba(149,191,71,.16); box-shadow: 0 0 0 1px rgba(149,191,71,.3) inset; }
.nd-soft .ag-in { background: linear-gradient(90deg, #f6fbef, #e6f2d2); }
.nd-group .ct-sub { display: grid; gap: 6px; margin: 6px 0 0; padding: 10px; border-radius: 14px; background: #eceef2; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.ct-sub span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
.ct-sub i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff3e0; box-shadow: 0 0 0 1px rgba(242,169,59,.35); }
.ct-sub i svg { width: 14px; height: 14px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* 01 Kanban */
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kb-col { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.kb-h { font-size: 12.5px; font-weight: 600; color: #6b7487; padding: 0 2px 2px; }
.kb-card { padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 6px 14px -12px rgba(15,23,42,.5); }
.kb-th { display: block; height: 64px; border-radius: 9px; margin-bottom: 8px; background-image: url(img/real/ai-creatives.jpg); background-size: 300% 200%; }
.kb-card b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kb-card small { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11.5px; color: #9aa3b2; }
.kb-av { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 600 8px var(--sans); font-style: normal; color: #0a84ff; background: rgba(10,132,255,.12); }
.kb-av-h { color: #b06a00; background: #fde7c7; }
.kb-pill { padding: 2px 8px; border-radius: 99px; font: 600 10.5px var(--mono); color: #6b7487; background: #f1f3f6; }
.kb-win { color: #22a06b; background: #e6f4ea; }
.kb-add { font-size: 11.5px; color: #6b7487; padding: 7px 8px; border-radius: 10px; background: #eceef2; }
.kb-drag { transform: rotate(-3deg) translateY(-4px); box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 26px 40px -18px rgba(70,60,160,.45); }
/* 02 Workflow */
.wf-card { position: relative; padding: 20px 20px 10px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 30px 50px -36px rgba(15,23,42,.5); }
.wf-stack::before, .wf-stack::after { content: ""; position: absolute; left: 14px; right: 14px; top: -9px; height: 20px; border-radius: 20px 20px 0 0; background: #fbfbfc; box-shadow: 0 0 0 1px rgba(15,23,42,.06); z-index: -1; }
.wf-stack::after { left: 28px; right: 28px; top: -17px; background: #f4f5f7; z-index: -2; }
.wf-h { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 12px; }
.wf-list { list-style: none; margin: 0; padding: 0; position: relative; }
.wf-list::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 1.5px dashed #d5dae2; }
.wf-it { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.wf-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 6px 12px -8px rgba(15,23,42,.45); }
.wf-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--c, #9aa3b2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-it b { display: block; font-size: 15px; font-weight: 600; }
.wf-it small { display: block; font-size: 12.5px; color: var(--muted); }
.wf-off { opacity: .45; }
/* 03 Calls */
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-card { padding: 16px; border-radius: 20px; background: linear-gradient(180deg, #fff, #fafbfc); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 20px 36px -26px rgba(15,23,42,.45); }
.cl-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 6px 12px -8px rgba(15,23,42,.45); }
.cl-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-day { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; }
.cl-card b { display: block; font-size: 13px; font-weight: 400; color: #9aa3b2; margin: 2px 0 10px; }
.cl-btn { display: inline-block; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #fff; background: #0a84ff; }
.cl-slot { border-radius: 20px; border: 1.5px dashed #d5dae2; position: relative; min-height: 150px; }
.cl-tilt { position: absolute; inset: 14px -14px -14px 14px; transform: rotate(-5deg); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 40px -20px rgba(15,23,42,.45); }
/* 04/07 Flowchart */
.tr-top, .sp-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tr-top .nd .ag-in { justify-content: center; }
.tr-lines { display: block; width: 100%; height: 56px; overflow: visible; }
.tr-lines path { fill: none; stroke: #c6ccd5; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tr-mid { display: flex; justify-content: center; }
.tr-mid .nd { min-width: min(320px, 100%); }
.tr-v { display: block; width: 1.5px; height: 26px; margin: 0 auto; background: #c6ccd5; position: relative; }
.tr-v::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #f2a93b; }
.sp-ch { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 16px; font-size: 13.5px; font-weight: 600; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 10px 22px -16px rgba(15,23,42,.5); }
.sp-ch svg { width: 18px; height: 18px; fill: none; stroke: var(--c); stroke-width: 1.8; }
.nd-hot2 .ag-ico .ag-ring { width: 13px; height: 22px; }
/* 05 Controlling */
.ct-row { display: grid; grid-template-columns: minmax(0, .9fr) 34px minmax(0, 1.2fr); align-items: start; }
.ct-h { margin-top: 32px; height: 1.5px; background: #c6ccd5; position: relative; }
.ct-h i { position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: #f2a93b; }
.ct-elbow { display: block; width: 100%; height: 44px; overflow: visible; }
.ct-elbow path { fill: none; stroke: #c6ccd5; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ct-col { display: grid; justify-items: start; width: min(320px, 70%); margin-left: 6%; }
.ct-col .nd { width: 100%; }
.ct-v { width: 1.5px; height: 18px; margin-left: 40px; background: #c6ccd5; }
/* 06 Pipeline */
.pp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.pp::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; border-top: 1.5px dashed #c6ccd5; }
.pp-step { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 18px 34px -26px rgba(15,23,42,.45); }
.pp-step .ag-ico { margin-bottom: 4px; }
.pp-step b { font-size: 13px; font-weight: 600; }
.pp-step small { font-size: 11px; color: #9aa3b2; }
.pp-step em { font: 600 15px var(--mono); font-style: normal; color: #22a06b; }
.pp-list { display: grid; gap: 8px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }
.pp-list span { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.pp-list .st-ok, .pp-list .st-run { margin-left: 0; width: 22px; height: 22px; }
.pp-list .st-ok::after { left: 7.5px; top: 4.5px; width: 5px; height: 10px; }
@media (max-width: 1080px) { .st-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } .st-flip .st-copy { order: 0; } }
@media (max-width: 600px) {
  .st-panel { padding: 22px 14px; border-radius: 22px; min-height: 0; }
  .kb { grid-template-columns: 1fr 1fr; } .kb-col:nth-child(3) { display: none; }
  .pp { grid-template-columns: 1fr 1fr; gap: 10px; } .pp::before { display: none; }
  .ct-row { grid-template-columns: 1fr; gap: 10px; } .ct-h, .ct-elbow { display: none; } .ct-col { width: 100%; margin: 10px 0 0; }
  .tr-top .ag-t b, .sp-ch { font-size: 12px; } .tr-top .ag-ico { width: 34px; height: 34px; }
  .st-row { padding: 36px 0; }
}
/* Build & Buy: Paket-Emoji zentriert, Lieferkette ohne farbige Oberkante */
.pr-box { font-size: 22px; line-height: 1; display: grid; place-items: center; color: inherit; padding: 0; }
.pc { position: relative; gap: 10px; }
.pc::before { content: ""; position: absolute; left: 4%; right: 4%; top: calc(22px + 20px); border-top: 1.5px dashed #c6ccd5; }
.pr-chain.pc li { position: relative; display: grid; justify-items: start; gap: 8px; padding: 14px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 16px 30px -24px rgba(15,23,42,.45); }
.pc-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font: 600 12px var(--mono); color: #0b1220; background: linear-gradient(180deg, #fff, #f0f2f5); box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 5px 10px -7px rgba(15,23,42,.45); }
.pc b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.pc-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 3px 8px 3px 5px; border-radius: 99px; font: 500 10.5px var(--mono); color: #6b7487; background: #f3f4f6; }
.pc-tag .flag { width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15,23,42,.12); }
.pc-em { font-size: 12px; line-height: 1; }
.pr-chain .pc-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font: 600 12px var(--mono); color: #0b1220; background: linear-gradient(180deg, #fff, #f0f2f5); box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 5px 10px -7px rgba(15,23,42,.45); }
.pr-chain .pc-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 3px 8px 3px 5px; border-radius: 99px; font: 500 10.5px var(--mono); color: #6b7487; background: #f3f4f6; }
.pr-chain .pc-em { font: 12px/1 sans-serif; }
.pc::before { top: 51px; }
.ag-ico svg.brand { fill: currentColor; stroke: none; width: 22px; height: 22px; color: #111; }

/* ---------- Neue Bausteine: Paid Ads, Creator, Organic, P&L ---------- */
.ads-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ads-col { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 16px 30px -24px rgba(15,23,42,.45); }
.ads-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(15,23,42,.07); }
.ads-h .brand { width: 20px; height: 20px; color: #111; }
.ads-h b { font-size: 14px; font-weight: 600; }
.ads-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ads-col li { display: grid; gap: 3px; padding: 7px 9px; border-radius: 10px; background: #f6f7f9; }
.ads-col li span { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ads-col li em { font: 600 10.5px var(--mono); font-style: normal; color: #22a06b; }
.st-ads .tr-mid .nd { min-width: min(300px, 100%); }
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cr-card { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 16px 10px 14px; border-radius: 20px; background: linear-gradient(180deg, #fff, #fafbfc); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 20px 36px -26px rgba(15,23,42,.45); }
.cr-av { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 6px; font-weight: 700; font-size: 15px; color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(15,23,42,.08); }
.cr-card b { font-size: 13.5px; font-weight: 600; }
.cr-card small { font-size: 11.5px; color: #9aa3b2; }
.cr-st { margin-top: 8px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.cr-ok { color: #22a06b; background: #e6f4ea; }
.cr-run { color: #0a84ff; background: rgba(10,132,255,.1); }
.cr-wait { color: #9aa3b2; background: #f1f3f6; }
.cr-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }
.cr-flow span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.cr-flow .st-ok, .cr-flow .st-run { margin: 0; width: 20px; height: 20px; }
.cr-flow .st-ok::after { left: 7px; top: 4px; width: 5px; height: 9px; }
.cr-flow > i { width: 18px; border-top: 1.5px dashed #c6ccd5; }
.cr-live { padding: 4px 10px; border-radius: 99px; color: #fff; background: #0a84ff; }
.og-card { padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 30px 50px -36px rgba(15,23,42,.5); }
.og-head { display: flex; align-items: center; gap: 12px; }
.og-av { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0b1220, #2b3445); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f2785f; }
.og-head b { display: block; font-size: 15px; font-weight: 600; }
.og-head small { font-size: 12px; color: #9aa3b2; }
.og-follow { margin-left: auto; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #fff; background: #0a84ff; }
.og-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.og-stats span { display: grid; padding: 8px 10px; border-radius: 12px; background: #f6f7f9; font-size: 11.5px; color: #9aa3b2; }
.og-stats b { font-size: 16px; font-weight: 600; color: var(--text); }
.og-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.og-post { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; display: flex; align-items: flex-end; padding: 8px; color: #fff; overflow: hidden; }
.og-post b { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.og-play { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.og-play svg { width: 11px; height: 11px; fill: #fff; stroke: none; }
.pl-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; }
.pl-card { padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 24px 44px -32px rgba(15,23,42,.5); }
.pl-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pl-h b { font-size: 15px; font-weight: 600; }
.pl-h small { font: 500 10.5px var(--mono); color: #9aa3b2; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-list li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12.5px; }
.pl-list li span { color: var(--muted); }
.pl-list li b { font: 600 12.5px var(--mono); text-align: right; }
.pl-list li i { grid-column: 1 / -1; grid-row: 2; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--plc) var(--w), #f0f2f5 var(--w)); }
.pl-neg { --plc: #f6b4b4; } .pl-neg b { color: #c2410c; }
.pl-pos { --plc: #0b1220; }
.pl-total { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #eef7e1; box-shadow: 0 0 0 1px rgba(149,191,71,.35) inset; }
.pl-total span { font-size: 13px; font-weight: 600; }
.pl-total b { margin-left: auto; font: 600 16px var(--mono); color: #3f7d1d; }
.pl-total em { font: 600 10.5px var(--mono); font-style: normal; color: #3f7d1d; padding: 2px 7px; border-radius: 99px; background: #fff; }
.pl-big b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #3f7d1d; }
.pl-big span { font-size: 12px; color: #9aa3b2; }
.pl-chart { display: block; width: 100%; height: 96px; margin: 10px 0 6px; overflow: visible; }
.pl-area { fill: url(#plG); stroke: none; }
.pl-line { fill: none; stroke: #6ba32a; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pl-bench { fill: none; stroke: #b9c1cd; stroke-width: 1.6; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pl-legend { display: flex; gap: 14px; font-size: 11.5px; color: #9aa3b2; }
.pl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-l1 { width: 12px; height: 3px; border-radius: 2px; background: #6ba32a; }
.pl-l2 { width: 12px; border-top: 2px dashed #b9c1cd; }
.pl-res { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(15,23,42,.07); font-size: 12px; color: var(--muted); }
.pl-bar { height: 6px; border-radius: 99px; background: #f0f2f5; overflow: hidden; }
.pl-bar i { display: block; width: 20%; height: 100%; border-radius: 99px; background: #0b1220; }
.pl-res b { font: 600 13px var(--mono); }
@media (max-width: 600px) { .ads-cols, .cr-grid { grid-template-columns: 1fr; } .pl-grid { grid-template-columns: 1fr; } .og-stats b { font-size: 14px; } }

/* Orbit Intelligence v2: schwarzer Kern, fließende Datenströme, Live-Leiste */
.ag-board { padding-top: 84px; }
.ag-live { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: 12.5px; color: var(--muted); white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 10px 24px -16px rgba(15,23,42,.45); }
.ag-live b { color: var(--text); font-weight: 600; }
.ag-live small { font: 500 10px var(--mono); color: #9aa3b2; }
.ag-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 0 rgba(48,209,88,.5); animation: agLive 1.8s ease-out infinite; }
@keyframes agLive { 70% { box-shadow: 0 0 0 7px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }
.ag-live-sep { width: 1px; height: 14px; background: rgba(15,23,42,.12); }
.ag-count { font-family: var(--mono); font-variant-numeric: tabular-nums; display: inline-block; }
.ag-count.bump { animation: agBump .5s var(--ease); }
@keyframes agBump { 40% { transform: translateY(-3px); color: #22a06b; } }
.ag-glow { position: absolute; left: 50%; top: 46%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(10,132,255,.14), rgba(10,132,255,0) 65%); pointer-events: none; z-index: 0; }
.ag-lines path.base { stroke: #d3d8df; stroke-width: 1.5; }
.ag-lines path.flow { stroke: #9aa3b2; stroke-width: 1.5; stroke-dasharray: 2 10; stroke-linecap: round; animation: agFlow 1.6s linear infinite; opacity: .9; }
.ag-lines path.flow.on { stroke: var(--c); stroke-width: 2.2; stroke-dasharray: 4 8; animation-duration: .6s; }
.ag-lines path.flow-dark { stroke: #0b1220; }
@keyframes agFlow { to { stroke-dashoffset: -24; } }
.ag-core { background: rgba(11,18,32,.08); box-shadow: 0 0 0 1px rgba(11,18,32,.12) inset, 0 30px 60px -28px rgba(11,18,32,.65); }
.ag-core .ag-in { background: radial-gradient(120% 140% at 0% 0%, #2b3445 0%, #0b1220 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ag-core .ag-t small { color: rgba(255,255,255,.65); }
.ag-core .ag-ico-core { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12); }
.ag-core .ag-ring { background: #ffffff; }
@keyframes agPulse { 40% { transform: scale(1.04); box-shadow: 0 0 0 1px rgba(11,18,32,.12) inset, 0 0 0 10px rgba(11,18,32,.07), 0 30px 60px -26px rgba(11,18,32,.7); } }
.ag-node:hover { transform: translateY(-2px); }
@media (max-width: 860px) { .ag-board { padding-top: 70px; } .ag-live { top: 18px; font-size: 11.5px; } .ag-live small { display: none; } .ag-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .ag-lines path.flow { animation: none; } .ag-live-dot { animation: none; } }
.pl-h { flex-wrap: wrap; gap: 2px 8px; }
.pl-total { flex-wrap: wrap; row-gap: 4px; }
.pl-total b { font-size: 15px; white-space: nowrap; }
.pl-total em { order: 3; }
.pl-list li b { white-space: nowrap; }
.og-post { aspect-ratio: 1 / 1; }
.st-pl .pl-card { padding: 14px; }

/* ---------- Plug & Grow v3: Foto-Visuals, Shop-Mockup, schwarz statt blau ---------- */
#system .container > .sx-sub-wide:first-child { margin-top: 0; }
.st-copy .h3 { text-wrap: balance; }
.st-photo { padding: 0 0 56px 44px; }
.st-photo .sx-photo { aspect-ratio: 4 / 3.6; }
.st-photo-r { padding: 0 44px 56px 0; }
.st-photo-r .sx-float { left: auto; right: 0; }
/* 01 Box: Mini-Kanban mit Dummy-Ads */
.akb { width: min(400px, 88%); }
.akb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.akb-col { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: #f3f4f6; }
.akb-col > span { font-size: 11px; font-weight: 600; color: #6b7487; }
.adm { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 8px; border-radius: 10px; color: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 8px 16px -10px rgba(15,23,42,.5); }
.adm-d { color: #0b1220; }
.adm-brand { font: 600 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.adm b { margin-top: auto; font-size: 13px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.adm small { font-size: 8px; opacity: .75; margin-top: 2px; line-height: 1.2; }
.adm i { align-self: flex-start; margin-top: 6px; padding: 3px 7px; border-radius: 99px; font: 600 7.5px var(--sans); font-style: normal; color: #0b1220; background: #fff; }
.adm-d i { color: #fff; background: #0b1220; }
.akb-win { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 99px; font: 600 9px var(--mono); font-style: normal; color: #22a06b; background: #e6f4ea; }
/* 06 Strategie-Call */
.call-live { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font: 600 12px var(--sans); color: #fff; background: rgba(11,18,32,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.call-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 3px rgba(255,69,58,.25); }
.call-card { width: min(340px, 82%); }
.call-zoom { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.call-zoom svg { width: 16px; height: 16px; }
.call-k { display: block; margin: 2px 0 8px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; }
.call-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.call-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
.call-list .st-ok, .call-list .st-run { margin: 0; width: 22px; height: 22px; }
.call-list .st-ok::after { left: 7.5px; top: 4.5px; width: 5px; height: 10px; }
.call-todo { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(15,23,42,.07); font-size: 13px; color: var(--muted); }
.call-todo b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b1220; font-size: 13px; }
/* 05 Shop-Mockup */
.st-shop { padding-bottom: 120px; justify-content: flex-start; }
.shop-win { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 24px 44px -30px rgba(15,23,42,.5); }
.shop-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f6f7f9; border-bottom: 1px solid rgba(15,23,42,.06); }
.shop-bar .dots { display: flex; gap: 5px; }
.shop-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #dfe3ea; }
.shop-url { flex: 1; padding: 3px 10px; border-radius: 8px; font: 500 10.5px var(--mono); color: #8a93a4; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-pdp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; padding: 14px; }
.shop-img { position: relative; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #f3f4f6, #e5e7eb); }
.shop-img svg { width: 62%; fill: #1f2937; }
.shop-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shop-stars { position: relative; font-size: 12px; color: #0b1220; letter-spacing: 1px; }
.shop-stars small { letter-spacing: 0; color: #9aa3b2; font-size: 11px; }
.shop-info > b { font-size: 16px; font-weight: 600; }
.shop-price { font: 600 14px var(--mono); }
.shop-bundle { display: grid; gap: 4px; }
.shop-bundle span { position: relative; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; box-shadow: 0 0 0 1px rgba(15,23,42,.1); }
.shop-bundle .on { box-shadow: 0 0 0 1.5px #0b1220; font-weight: 600; }
.shop-btn { position: relative; padding: 9px; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; background: #0b1220; }
.shop-trust { font-size: 10.5px; color: #9aa3b2; }
.shop-pin { position: absolute; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 600 10px var(--sans); font-style: normal; letter-spacing: 0; color: #fff; background: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,.2); }
.shop-stars .shop-pin { right: -2px; top: -2px; }
.shop-bundle .shop-pin { right: -7px; top: -7px; }
.shop-btn .shop-pin { right: -7px; top: -7px; }
.shop-list { position: absolute; right: 18px; bottom: 18px; width: min(300px, 70%); padding: 14px 14px 6px; }
.shop-list .wf-h { font-size: 15px; margin-bottom: 4px; }
.shop-list .wf-ico { width: 32px; height: 32px; border-radius: 10px; }
.shop-list .wf-list::before { left: 15.5px; }
.shop-list .wf-it { gap: 10px; padding: 6px 0; }
.shop-list .wf-it b { font-size: 13px; }
.shop-list .wf-it small { font-size: 11px; }
.wf-num { font: 600 12px var(--mono); color: #0b1220; }
.shop-list .st-run { background: rgba(11,18,32,.06); }
.shop-list .st-run::after { border-color: #0b1220; }
/* Tracking & Kontostruktur: schwarz statt blau */
.nd-hot { background: rgba(11,18,32,.08); box-shadow: 0 0 0 1px rgba(11,18,32,.12) inset, 0 22px 44px -26px rgba(11,18,32,.6); }
.nd-hot .ag-in { background: radial-gradient(120% 140% at 0% 0%, #2b3445 0%, #0b1220 55%); }
.nd-hot .ag-t small { color: rgba(255,255,255,.65); }
.nd-hot .ag-ico { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.nd-hot .ag-ico svg { stroke: #fff; }
/* 09 Logistik: kein Überlauf */
.pp-step b { font-size: 12.5px; overflow-wrap: anywhere; }
/* Ein Team statt fünf Dienstleister */
.ow-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; border-radius: 28px; background: repeating-linear-gradient(135deg, rgba(15,23,42,.028) 0 1px, transparent 1px 9px), #f3f4f6; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.ow-half { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px; border-radius: 22px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.ow-good { background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 24px 44px -30px rgba(15,23,42,.5); }
.ow-k { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; }
.ow-cloud { position: relative; width: 100%; height: 190px; }
.ow-mess { position: absolute; inset: 20px 10px 0; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.ow-mess path { fill: none; stroke: #e5484d; stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .5; vector-effect: non-scaling-stroke; }
.ow-v { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 8px 16px -12px rgba(15,23,42,.5); }
.ow-v .i { width: 13px; height: 13px; color: #6b7487; }
.ow-v1 { left: 0; top: 0; transform: rotate(-4deg); } .ow-v2 { right: 0; top: 6px; transform: rotate(3deg); }
.ow-v3 { left: 22%; top: 62px; transform: rotate(2deg); } .ow-v4 { left: 0; top: 118px; transform: rotate(-2deg); } .ow-v5 { right: 0; top: 124px; transform: rotate(4deg); }
.ow-you { padding: 8px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #c2410c; background: #fdecec; box-shadow: 0 0 0 1px rgba(229,72,77,.25); }
.ow-you-g { color: #3f7d1d; background: #eef7e1; box-shadow: 0 0 0 1px rgba(149,191,71,.4); }
.ow-one { display: grid; justify-items: center; gap: 10px; margin-top: 30px; padding: 18px 14px; width: 100%; border-radius: 18px; text-align: center; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2b3445 0%, #0b1220 55%); box-shadow: 0 24px 44px -24px rgba(11,18,32,.6); }
.ow-logo { display: flex; align-items: center; gap: 10px; }
.ow-logo img { height: 18px; width: auto; }
.ow-logo img + img { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); }
.ow-one small { font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.5; }
.ow-line { width: 1.5px; height: 46px; background: #c6ccd5; position: relative; }
.ow-line::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #22a06b; }
@media (max-width: 600px) { .ow-vis { grid-template-columns: 1fr; } .st-photo, .st-photo-r { padding: 0 0 150px; } .st-photo .sx-float, .st-photo-r .sx-float { left: 10px; right: 10px; width: auto; } .shop-pdp { grid-template-columns: 1fr; } .st-shop { padding-bottom: 22px; } .shop-list { position: static; width: auto; margin-top: 12px; } }
.st-shop { padding-bottom: 210px; }
.st-shop .shop-win { width: 84%; }
.shop-list { width: min(290px, 56%); bottom: 20px; }
@media (max-width: 600px) { .st-shop { padding-bottom: 22px; } .st-shop .shop-win { width: 100%; } }
.ow-cloud { height: 212px; }
.ow-v1 { left: 0; top: 0; } .ow-v2 { right: 0; left: auto; top: 38px; } .ow-v3 { left: 4%; top: 80px; } .ow-v4 { right: 0; left: auto; top: 120px; } .ow-v5 { left: 2%; top: 164px; }
.ow-mess path { opacity: .6; }

/* Hero: All-in-One-Partner mit rotierenden Bereichen */
.aio { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 6px 16px 6px 6px; border-radius: 99px; color: #fff; font-size: 14px; background: radial-gradient(120% 160% at 0% 0%, #2b3445 0%, #0b1220 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 16px 34px -18px rgba(11,18,32,.7); }
.hero .container > .aio { display: flex; width: fit-content; }
.aio b { font-weight: 600; letter-spacing: -.01em; }
.aio-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; }
.aio-ico .ag-ring { width: 10px; height: 17px; background: #fff; }
.aio-sep { width: 1px; height: 16px; background: rgba(255,255,255,.2); }
.aio-from { color: rgba(255,255,255,.6); }
.aio-rot { position: relative; display: inline-block; height: 1.35em; overflow: hidden; min-width: 6.6em; vertical-align: middle; }
.aio-track { display: flex; flex-direction: column; animation: aioRot 12s cubic-bezier(.7,0,.3,1) infinite; }
.aio-track span { height: 1.35em; line-height: 1.35em; font-weight: 600; color: #95bf47; white-space: nowrap; }
@keyframes aioRot { 0%,13% { transform: translateY(0); } 16.6%,29.6% { transform: translateY(-1.35em); } 33.3%,46.3% { transform: translateY(-2.7em); } 50%,63% { transform: translateY(-4.05em); } 66.6%,79.6% { transform: translateY(-5.4em); } 83.3%,96.3% { transform: translateY(-6.75em); } 100% { transform: translateY(-8.1em); } }
.tag-ring { width: 8px; height: 14px; background: currentColor; }
.tag-dot .tag-ring { background: var(--accent, #0a84ff); }
@media (max-width: 600px) { .aio { font-size: 12.5px; gap: 7px; padding-right: 12px; } .aio-sep, .aio-from { display: none; } .aio-rot { min-width: 5.8em; } .aio-ico { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .aio-track { animation: none; } }
.hero .container > .aio { margin: 22px auto 26px; font-size: 15px; }
.tag-dot .tag-ring { background: #0b1220; }
/* All-in-One-Element: jetzt im Block "Ein Team statt fünf Dienstleister" */
.sx-why-copy .aio { display: inline-flex; margin: 0 0 20px; font-size: 14px; }
.aio-track span { color: #fff; }
.aio-from { color: rgba(255,255,255,.55); }
/* 07 Tracking: Orbit OS als Lösung, Server-Side nur ein Baustein */
.tr-mix { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tr-mix span { padding: 4px 10px; border-radius: 99px; font: 500 11px var(--mono); color: #6b7487; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.tr-note { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: #9aa3b2; }
.nd-os .ag-t b { font-size: 15.5px; }

/* ==========================================================================
   Zusammenfassung "Alles aus einer Hand": Brand im Zentrum, alle Bereiche im Orbit
   ========================================================================== */
.ob { margin-top: 96px; padding: 64px 48px 56px; border-radius: 36px; text-align: center; background: radial-gradient(700px 420px at 50% 55%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), repeating-linear-gradient(135deg, rgba(15,23,42,.028) 0 1px, transparent 1px 9px), #f1f2f4; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.ob-head { max-width: 860px; margin: 0 auto; }
.ob-head .aio { margin: 0 auto 22px; display: inline-flex; }
.ob-head .sx-h { font-size: clamp(30px, 3.8vw, 54px); text-wrap: balance; }
.ob-head p { max-width: 720px; margin: 18px auto 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.ob-map { position: relative; width: 100%; max-width: 1000px; margin: 40px auto 0; aspect-ratio: 16 / 9.4; }
.ob-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ob-lines ellipse { fill: none; stroke: #d3d8df; stroke-width: 1.5; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.ob-lines line { stroke: #b9c1cd; stroke-width: 1.4; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: obFlow 1.8s linear infinite; animation-delay: calc(var(--i) * -.15s); }
@keyframes obFlow { to { stroke-dashoffset: -22; } }
.ob-n { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 99px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--text); background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 12px 26px -16px rgba(15,23,42,.45); }
.ob-n i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f3f4f6; box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset; }
.ob-n svg { width: 15px; height: 15px; fill: none; stroke: #0b1220; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-core { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; }
.ob-team { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 99px; background: #0b1220; box-shadow: 0 10px 24px -14px rgba(11,18,32,.7); }
.ob-team img { height: 14px; width: auto; }
.ob-team img + img { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); }
.ob-brand { display: grid; justify-items: center; gap: 4px; width: 236px; padding: 22px 20px 20px; border-radius: 26px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2b3445 0%, #0b1220 55%); box-shadow: 0 0 0 8px rgba(11,18,32,.06), 0 30px 60px -26px rgba(11,18,32,.7); animation: obPulse 3.2s ease-in-out infinite; }
@keyframes obPulse { 50% { box-shadow: 0 0 0 16px rgba(11,18,32,.04), 0 30px 60px -26px rgba(11,18,32,.7); } }
.ob-shops { display: flex; gap: 8px; margin-bottom: 8px; }
.ob-shops i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff; }
.ob-shops img { width: 24px; height: 24px; object-fit: contain; }
.ob-brand b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ob-brand small { font-size: 12.5px; color: rgba(255,255,255,.6); }
.ob-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 900px; margin: 34px auto 0; text-align: left; }
.ob-bad, .ob-good { display: grid; gap: 10px; padding: 18px 20px; border-radius: 22px; }
.ob-bad { background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07); }
.ob-good { color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2b3445 0%, #0b1220 55%); box-shadow: 0 24px 44px -28px rgba(11,18,32,.7); }
.ob-k { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; }
.ob-good .ob-k { color: rgba(255,255,255,.55); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips span { padding: 4px 10px; border-radius: 99px; font-size: 12.5px; color: #9aa3b2; background: #f3f4f6; text-decoration: line-through; text-decoration-color: rgba(229,72,77,.6); }
.ob-chips-g span { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; }
.ob-bad b { font-size: 15px; font-weight: 600; color: #c2410c; }
.ob-good b { font-size: 15px; font-weight: 600; color: #b6d96b; }
.ob-cta { margin-top: 30px; }
@media (max-width: 900px) {
  .ob { padding: 40px 18px 36px; border-radius: 26px; margin-top: 64px; }
  .ob-map { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .ob-lines { display: none; }
  .ob-n { position: static; transform: none; font-size: 12.5px; }
  .ob-core { position: static; transform: none; order: -1; width: 100%; margin-bottom: 14px; }
  .ob-vs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ob-lines line, .ob-brand { animation: none; } }
.ob-core { gap: 14px; }
/* Bühne: DACH-Flaggen als Glas-Kacheln in der Headline */
.h2-flags { display: inline-flex; align-items: center; gap: .12em; margin-left: .25em; vertical-align: .08em; }
.h2-flags i { display: grid; place-items: center; width: .82em; height: .82em; border-radius: .2em; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 .12em .3em -.08em rgba(15,23,42,.35); transform: rotate(-6deg); }
.h2-flags i:nth-child(2) { transform: rotate(4deg) translateY(-.06em); }
.h2-flags i:nth-child(3) { transform: rotate(-3deg); }
.h2-flags svg { width: .56em; height: .38em; border-radius: .06em; display: block; }
.h2-flags .sq svg { width: .42em; height: .42em; }
/* Organigramm: Orbit-Seite hell statt dunkel */
.org-us { color: var(--text); background: #fff; box-shadow: 0 0 0 2px #0b1220, 0 30px 60px -40px rgba(15,23,42,.5); }
.org-us .org-h .label { color: #0b1220; }
.org-us .org-h small { color: var(--muted); }
.org-us .org-top::after { background: rgba(15,23,42,.18); }
.org-us .org-grid { border-top-color: rgba(15,23,42,.14); }
.org-us .org-n { background: #f4f6f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.org-us .org-n-h em { color: var(--text); }
.org-us .fig { fill: #0b1220; }
.org-us .fig.ghost { fill: none; stroke: #b9c1cd; }
.org-us .org-n .org-note, .org-us .org-n:nth-child(2) .org-note { color: var(--muted); }
.org-ag { color: #0b1220; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.14); }
.org-legend .org-ag { color: #0b1220; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.14); }
.org-us .org-hand { color: #a37a00; background: rgba(242,194,48,.16); }
.org-us .org-kpi { background: #eef7e1; box-shadow: 0 0 0 1px rgba(149,191,71,.4) inset; }
.org-us .org-kpi span { color: var(--muted); }
.org-us .org-kpi b { color: #3f7d1d; }
/* Bühne: DACH-Flaggen als iOS-Emojis auf dem Masterclass-Bild */
.rl-flags { position: absolute; z-index: 3; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.rl-flags i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-style: normal; font-size: 24px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; background: rgba(255,255,255,.78); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 10px 24px -12px rgba(0,0,0,.45); }
@media (max-width: 1080px) {
  .rl-b { order: -1; }
  .rl-a { grid-column: span 2; grid-row: span 1; }
  .rl-a img { object-position: center 22%; }
  .rl-flags { right: auto; left: 10px; top: 10px; transform: none; display: flex; gap: 6px; }
  .rl-flags i { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; }
}
@media (max-width: 640px) { .rl-stage { grid-auto-rows: 170px; } .rl-b, .rl-a { min-height: 210px; } }
@media (max-width: 640px) {
  .rl-stage { grid-auto-rows: auto; }
  .rl-stage figure { height: 160px; min-height: 0; }
  .rl-stage .rl-a, .rl-stage .rl-b { height: 220px; }
}
#stimmen .section-head .h2 { text-wrap: balance; }
/* DACH-Flaggen als gefächerter Stapel, ragt über die Bildecke hinaus */
.rl-stage { position: relative; }
.rl-flags.rl-flags-stack { position: absolute; z-index: 5; left: auto; right: -22px; top: -26px; transform: none; display: flex; gap: 0; }
.rl-flags-stack i { width: 60px; height: 60px; font-size: 34px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 14px 30px -14px rgba(15,23,42,.55); }
.rl-flags-stack i + i { margin-left: -14px; }
.rl-flags-stack i:nth-child(1) { transform: rotate(-10deg) translateY(4px); z-index: 1; }
.rl-flags-stack i:nth-child(2) { transform: rotate(-1deg); z-index: 2; }
.rl-flags-stack i:nth-child(3) { transform: rotate(9deg) translateY(4px); z-index: 3; }
@media (max-width: 1080px) {
  .rl-flags.rl-flags-stack { right: auto; left: -8px; top: -22px; }
  .rl-flags-stack i { width: 50px; height: 50px; font-size: 28px; border-radius: 15px; }
  .rl-flags-stack i + i { margin-left: -12px; }
}
.org-kpi { align-items: center; } .org-kpi span { line-height: 1.3; } .org-kpi b { line-height: 1.1; }
/* Creator & Organic neutral (schwarz/grau statt bunt) */
.cr-ok { color: #0b1220; background: #eef0f3; }
.cr-run { color: #0b1220; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.18) inset; }
.cr-live { background: #0b1220; }
.cr-flow .st-ok { background: #eef0f3; } .cr-flow .st-ok::after { border-color: #0b1220; }
.cr-flow .st-run { background: rgba(11,18,32,.06); } .cr-flow .st-run::after { border-color: #0b1220; }
.og-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0b1220; }
.og-follow { background: #0b1220; }
.og-post.og-light { color: #0b1220; }
.og-grid .og-post:nth-child(2), .og-grid .og-post:nth-child(4) { color: #0b1220; }
.og-grid .og-post:nth-child(2) b, .og-grid .og-post:nth-child(4) b { text-shadow: none; }
.og-grid .og-post:nth-child(2) .og-play, .og-grid .og-post:nth-child(4) .og-play { background: rgba(11,18,32,.75); }
/* Inhouse: echte App-Logos */
.ih-apps span { padding: 8px 14px 8px 8px; }
.ih-apps svg { width: 22px; height: 22px; border-radius: 6px; }
.ih-app { background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.ih-app svg { width: 22px; height: 22px; }
.ih-body p { margin-bottom: 0; }
/* Logistik & Support neutral, Creator/Organic in Instagram/TikTok-Tönen */
.pp-step em { color: #0b1220; }
.st-support .ct-sub i { background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.1); }
.cr-av { position: relative; }
.cr-pf { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2px #fff; overflow: hidden; }
.cr-pf svg { display: block; width: 22px; height: 22px; }
.cr-live { background: #010101; box-shadow: -2px 0 0 #25F4EE, 2px 0 0 #FE2C55; }
.og-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d62976; background: #010101; }
.og-follow { background: #FE2C55; }
.og-head small { display: inline-flex; align-items: center; gap: 4px; }
.og-pf { width: 14px; height: 14px; border-radius: 4px; }
.og-pf + .og-pf { margin-right: 3px; }
.og-grid .og-post:nth-child(2) { color: #fff; }
.og-grid .og-post:nth-child(2) b { text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.og-grid .og-post:nth-child(2) .og-play { background: rgba(255,255,255,.25); }
.og-grid .og-post:nth-child(5) b { text-shadow: 0 1px 6px rgba(0,0,0,.35); }
/* Rating-Badges: Score + Plattform in einer Zeile */
.kv-chip b { white-space: nowrap; }
.kv-chip b em { font-style: normal; font-weight: 500; color: var(--muted); }
.kv-chip small { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.kv-gstars { font-style: normal; font-size: 11px; letter-spacing: 1px; color: #fbbc04; }
/* Zeilenumbrüche Bausteine (Desktop) */
@media (min-width: 900px) {
  .st-copy .nw { white-space: nowrap; }
  .ads-col { padding: 12px 10px; }
  .ads-col li { padding: 7px 8px; }
  .ads-col li span { white-space: nowrap; font-size: 11.5px; letter-spacing: -.01em; }
}
@media (max-width: 899px) { .br-d { display: none; } }
/* Produktion: Lead breiter */
#produktion .section-head .lead { max-width: 920px; }
/* Echte WhatsApp-/Zoom-Logos (PNG) */
.app-logo { display: block; flex: none; width: 22px; height: 22px; object-fit: contain; }
.ih-app .app-logo { width: 24px; height: 24px; }
.sp-ch .app-logo { width: 20px; height: 20px; }
.call-zoom { background: none; box-shadow: none; }
.call-zoom .app-logo { width: 26px; height: 26px; }
/* Kanäle: Logos ohne Box */
.ih-app, .ih-msg-r .ih-app { width: 30px; height: 30px; background: none; box-shadow: none; border-radius: 0; }
.ih-app .app-logo, .ih-app svg { width: 30px; height: 30px; }
/* Workshop-Box flacher: Headline über beide Spalten */
.ws { gap: 32px 56px; padding: 48px 52px; align-items: stretch; }
.ws-head { grid-column: 1 / -1; }
.ws-head .tag { margin-bottom: 18px; }
.ws-head .h2 { font-size: clamp(34px, 4vw, 54px); }
.ws-copy .lead { margin-top: 0; }
.ws-steps { margin-top: 24px; gap: 10px; }
.ws-cta { margin-top: 26px; }
.ws-vis { display: flex; padding-bottom: 0; }
.ws-vis > img { aspect-ratio: auto; height: 100%; min-height: 360px; object-position: center 35%; }
.ws-card { bottom: 18px; }
@media (max-width: 1080px) { .ws { gap: 28px; } .ws-vis > img { height: auto; aspect-ratio: 4 / 3; min-height: 0; } }
@media (max-width: 760px) { .ws-vis { display: block; padding-bottom: 150px; } .ws-card { bottom: 0; } }
@media (max-width: 760px) {
  .ws-vis { padding-bottom: 0; }
  .ws-card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -48px 12px 0; }
}
.ih-apps svg { background: none; padding: 0; border-radius: 0; }
/* Mobile-Menü als Vollbild */
@media (max-width: 900px) {
  .mobile-menu { top: 0; bottom: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: 96px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-bottom: 0; overflow-y: auto; background: #f6f7f9; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: opacity .25s, visibility .25s; visibility: hidden; }
  html.theme-light .mobile-menu { background: #f6f7f9; }
  .mobile-menu.open { visibility: visible; }
  .mm-links { display: grid; }
  .mobile-menu .mm-links a { display: block; padding: 16px 2px; border-bottom: 1px solid rgba(15,23,42,.08); font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--text); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease); }
  .mobile-menu.open .mm-links a { opacity: 1; transform: none; }
  .mobile-menu.open .mm-links a:nth-child(2) { transition-delay: .03s; }
  .mobile-menu.open .mm-links a:nth-child(3) { transition-delay: .06s; }
  .mobile-menu.open .mm-links a:nth-child(4) { transition-delay: .09s; }
  .mobile-menu.open .mm-links a:nth-child(5) { transition-delay: .12s; }
  .mm-foot { display: grid; gap: 12px; justify-items: center; padding-top: 28px; }
  .mobile-menu .mm-foot .btn { width: 100%; margin: 0; justify-content: center; }
  .mm-note { font-size: 13.5px; color: var(--muted); }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-open .nav { background: #f6f7f9; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Nav-Button mit Pfeil */
.btn-sm .btn-ico { width: 22px; height: 22px; margin-right: -6px; border-radius: 6px; }
.btn-sm .btn-ico .i { width: 13px; height: 13px; }
.btn-sm:has(.btn-ico) { padding-right: 12px; }
/* KI-Agenten-Icon im Organigramm: Roboter */
.org-ag .bot, .org-legend .bot { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* AI Creative Engine: mehrere Ads pro Spalte */
.akb-col > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.akb-col > span em { font: 600 9.5px var(--mono); font-style: normal; color: #0b1220; padding: 1px 6px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.akb-col .adm { aspect-ratio: 1 / 1; padding: 7px; }
.akb-col .adm b { font-size: 11.5px; }
.akb-col .adm i { margin-top: 4px; }
.akb-col .adm .akb-win { right: 5px; top: 5px; }
.akb-col { align-content: start; }
.akb-col .adm .akb-win { top: auto; bottom: 7px; right: 6px; }
@media (max-width: 600px) {
  .akb-cols { gap: 6px; }
  .akb-col { padding: 6px; gap: 5px; }
  .akb-col > span { font-size: 9.5px; white-space: nowrap; letter-spacing: -.01em; }
  .akb-col > span em { font-size: 8.5px; padding: 1px 4px; }
  .akb-col .adm { padding: 6px; }
  .akb-col .adm b { font-size: 10.5px; }
  .akb-col .adm small, .akb-col .adm i { display: none; }
  .akb-col .adm .akb-win { font-size: 8px; padding: 1px 5px; bottom: 6px; right: 5px; }
}
@media (max-width: 600px) {
  .akb-col .adm .adm-brand { display: none; }
  .akb-col .adm .akb-win { top: 6px; bottom: auto; right: 5px; }
}
/* Navigation breiter, damit Logos & Links Luft haben */
.nav .nav-inner { max-width: 1400px; gap: 40px; }
.nav-links { margin-inline: auto; }
@media (max-width: 1380px) { .nav .clock { display: none; } }
/* ---------- Lebendige Grafiken (#system) ---------- */
.tr-lines .tr-flow { fill: none; stroke: #0b1220; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 16; vector-effect: non-scaling-stroke; opacity: .55; animation: lvFlow 1.4s linear infinite; }
@keyframes lvFlow { to { stroke-dashoffset: -36; } }
@keyframes lvBump { 40% { transform: scale(1.25); } }
@keyframes lvPop { 40% { transform: scale(1.06); box-shadow: 0 0 0 2px #0b1220, 0 10px 20px -10px rgba(15,23,42,.5); } }
@keyframes lvUp { 30% { color: #22a06b; transform: translateY(-2px); } }
@keyframes lvDown { 30% { color: #9aa3b2; transform: translateY(1px); } }
@keyframes lvPing { 0% { box-shadow: 0 0 0 0 rgba(11,18,32,.28); } 100% { box-shadow: 0 0 0 12px rgba(11,18,32,0); } }
@keyframes lvLive { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.45); } 100% { box-shadow: 0 0 0 9px rgba(48,209,88,0); } }
.lv-bump { display: inline-block; animation: lvBump .5s ease; }
.lv-pop { animation: lvPop .7s ease; }
.lv-up { display: inline-block; animation: lvUp .8s ease; }
.lv-down { display: inline-block; animation: lvDown .8s ease; }
.lv-ping { animation: lvPing .9s ease-out; }
#system .sx-dot { animation: lvLive 1.8s ease-out infinite; }
#system .call-live i { animation: lvLive 1.6s ease-out infinite; box-shadow: none; }
#system .nd-os, #system .st-ads .nd-hot { animation: lvPing 2.4s ease-out infinite; border-radius: 20px; }
#system .akb-win { animation: lvBump 2.4s ease-in-out infinite; }
#system .akb-col:nth-child(2) .adm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3s ease-in-out infinite; pointer-events: none; }
/* Shop-Maus */
.shop-win { position: relative; }
.lv-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; margin: -3px 0 0 -4px; transform: translate(60px, 60px); transition: transform .8s cubic-bezier(.65,0,.35,1); pointer-events: none; filter: drop-shadow(0 3px 4px rgba(15,23,42,.35)); }
.lv-cursor svg { width: 100%; height: 100%; fill: #0b1220; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.lv-cursor.lv-click svg { animation: lvClick .35s ease; }
@keyframes lvClick { 50% { transform: scale(.78); } }
.shop-pin.lv-ping1 { animation: lvPing .8s ease-out; }
.shop-btn.lv-press { animation: lvClick .35s ease; }
.shop-bundle span { transition: box-shadow .25s, font-weight .25s; }
/* Tracking / Support / Logistik: aktives Element */
.tr-mix span { transition: background .3s, color .3s, box-shadow .3s; }
.tr-mix span.lv-on { color: #fff; background: #0b1220; box-shadow: none; }
.ct-sub span { transition: opacity .3s; }
.st-support .ct-sub span:not(.lv-on) { opacity: .55; }
.pp-step { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.pp-step.lv-on { transform: translateY(-4px); box-shadow: 0 0 0 1.5px #0b1220, 0 22px 36px -24px rgba(15,23,42,.6); }
.pp-step .ag-ico { transition: background .4s; }
.pp-step.lv-on .ag-ico { background: #0b1220; }
.pp-step.lv-on .ag-ico svg { stroke: #fff; }
/* Controlling: Puls auf der Kurve */
.pl-glow { fill: none; stroke: #3f7d1d; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 100; stroke-dashoffset: 106; vector-effect: non-scaling-stroke; animation: lvGlow 3.2s ease-in-out infinite; }
@keyframes lvGlow { to { stroke-dashoffset: 0; } }
.pl-bar i { position: relative; overflow: hidden; }
.pl-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: shine 2.8s ease-in-out infinite; }
/* Creator & Organic */
.cr-st { transition: background .3s, color .3s; }
#system .cr-live { animation: lvBump 2.6s ease-in-out infinite; }
.og-heart { position: absolute; bottom: 30%; z-index: 2; font-style: normal; font-size: 16px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; animation: ogHeart 1.6s ease-out forwards; }
@keyframes ogHeart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-6px) scale(1.15); } 100% { opacity: 0; transform: translateY(-46px) scale(.9); } }
.og-follow { transition: background .3s; }
.og-follow.lv-done { background: #0b1220; }
@media (prefers-reduced-motion: reduce) { #system *, #system *::after { animation: none !important; transition: none !important; } }
/* ---------- Finaler CTA: Workshop-Einladung (Ticket) ---------- */
.wk { --notch: 22px; position: relative; display: grid; grid-template-columns: minmax(0, .9fr) 0 minmax(0, 1.25fr); border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 60px 120px -70px rgba(15,23,42,.45); }
.wk-stub { position: relative; margin: 12px 0 12px 12px; border-radius: 24px; overflow: hidden; min-height: 520px; }
.wk-stub > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.wk-stub::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0) 45%, rgba(11,18,32,.72)); }
.wk-host { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; align-items: center; gap: 12px; color: #fff; }
.wk-host .avatars img { width: 34px; height: 34px; border: 2px solid #fff; }
.wk-host b { display: block; font-size: 15px; font-weight: 600; }
.wk-host small { display: block; font-size: 12.5px; opacity: .8; margin-top: 1px; }
.wk-free { position: absolute; left: 18px; top: 18px; z-index: 1; padding: 7px 12px; border-radius: 99px; font: 600 12px var(--mono); color: #0b1220; background: #fff; box-shadow: 0 8px 20px -10px rgba(15,23,42,.5); }
.wk-perf { position: relative; width: 0; }
.wk-perf::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: 22px; border-left: 2px dashed rgba(15,23,42,.14); }
.wk-perf::after { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 0; }
.wk::before, .wk::after { content: ""; position: absolute; left: calc(41.86% + 23px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--bg, #f6f7f9); transform: translateX(-50%); }
.wk::before { top: calc(var(--notch) * -1); box-shadow: inset 0 -1px 0 rgba(15,23,42,.06); }
.wk::after { bottom: calc(var(--notch) * -1); box-shadow: inset 0 1px 0 rgba(15,23,42,.06); }
.wk-main { padding: 46px 52px 40px 70px; display: flex; flex-direction: column; }
.wk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px dashed rgba(15,23,42,.14); }
.wk-kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wk-kicker .i { width: 16px; height: 16px; }
.wk-kicker-r { color: var(--text); font-weight: 600; }
.wk-h { font-size: clamp(32px, 3.4vw, 50px); }
.wk-lead { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.wk-label { margin-top: 28px; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim, #9aa3b2); }
.wk-take { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk-take li { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: #f6f7f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.wk-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #0b1220; }
.wk-ico .i { width: 18px; height: 18px; }
.wk-take b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.wk-take small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.wk-cta { margin-top: 30px; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.wk-meta b { color: var(--text); font-weight: 600; }
.wk-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wk-meta span + span::before { content: ""; width: 4px; height: 4px; margin-right: 12px; border-radius: 50%; background: rgba(15,23,42,.18); }
.wk-meta .i { width: 16px; height: 16px; padding: 3px; border-radius: 50%; color: #fff; background: #30d158; }
.wk-stars { font-style: normal; color: #00b67a; letter-spacing: 1px; }
@media (max-width: 1080px) {
  .wk { grid-template-columns: 1fr; }
  .wk-stub { margin: 12px 12px 0; min-height: 0; aspect-ratio: 16 / 9; }
  .wk-perf { width: auto; height: 0; }
  .wk-perf::before { top: 22px; bottom: auto; left: 34px; right: 34px; border-left: 0; border-top: 2px dashed rgba(15,23,42,.14); }
  .wk::before, .wk::after { display: none; }
  .wk-main { padding: 48px 36px 36px; }
}
@media (max-width: 700px) {
  .wk { border-radius: 26px; }
  .wk-stub { aspect-ratio: 4 / 3; border-radius: 20px; }
  .wk-main { padding: 40px 20px 26px; }
  .wk-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wk-take { grid-template-columns: 1fr; }
  .wk-take li { grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 14px; }
  .wk-cta .btn { width: 100%; justify-content: center; }
  .wk-meta { gap: 8px 14px; }
  .wk-meta span + span::before { display: none; }
}
.wk { grid-template-columns: minmax(0, .78fr) 0 minmax(0, 1.3fr); }
.wk::before, .wk::after { left: calc(37.5% + 23px); }
.wk-stub { min-height: 440px; }
.wk-main { padding: 38px 48px 34px 66px; }
.wk-top { margin-bottom: 22px; padding-bottom: 16px; }
.wk-h { font-size: clamp(30px, 2.9vw, 44px); }
.wk-lead { font-size: 16px; margin-top: 14px; }
.wk-label { margin-top: 22px; }
.wk-cta { margin-top: 24px; }
.wk-meta { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1240px) { .wk-meta { flex-wrap: wrap; white-space: normal; } }
@media (max-width: 1080px) { .wk { grid-template-columns: 1fr; } .wk-stub { min-height: 0; } }
.wk-meta span { white-space: nowrap; }
@media (max-width: 1080px) { .wk-main { padding: 46px 36px 34px; } }
@media (max-width: 700px) {
  .wk-main { padding: 38px 20px 24px; }
  .wk-top { flex-direction: row; flex-wrap: wrap; }
  .wk-kicker-r { display: none; }
  .wk-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Pfeil: klassisch → Orbit Intelligence */
.org { position: relative; column-gap: 64px; }
.org-arrow { position: absolute; left: 50%; top: 150px; z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.org-arrow .i { width: 50px; height: 50px; padding: 14px; border-radius: 50%; color: #fff; background: #0b1220; box-shadow: 0 0 0 6px #f6f7f9, 0 16px 30px -12px rgba(11,18,32,.6); animation: orgNudge 2.4s ease-in-out infinite; }
.org-arrow small { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes orgNudge { 50% { transform: translateX(4px); } }
@media (max-width: 900px) {
  .org { row-gap: 10px; }
  .org-arrow { position: static; transform: none; justify-self: center; grid-auto-flow: column; align-items: center; gap: 10px; margin: 4px 0; }
  .org-arrow .i { width: 42px; height: 42px; padding: 12px; transform: rotate(90deg); animation: orgNudgeY 2.4s ease-in-out infinite; }
  @keyframes orgNudgeY { 50% { transform: rotate(90deg) translateX(4px); } }
}
@media (prefers-reduced-motion: reduce) { .org-arrow .i { animation: none; } }

/* =====================================================================
   MOBILE-OPTIMIERUNG (nur ≤ 700 px, Desktop bleibt unverändert)
   ===================================================================== */
.more-btn { display: none; }
@media (max-width: 700px) {
  .nw { white-space: nowrap; }

  /* Hero: Trustpilot-Badge kompakt in einer Zeile */
  .tp-badge { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; font-size: 12.5px; }
  .tp-badge .tp-rating, .tp-badge .tp-meta { display: none; }
  .tp-badge .tp-stars i { width: 18px; height: 18px; }

  /* Orbit Intelligence: Abteilungen als kompaktes 2er-Raster */
  .ag-board { padding: 64px 12px 40px; gap: 10px; }
  .ag-col { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ag-node { padding: 4px; border-radius: 16px; }
  .ag-node .ag-in { padding: 8px; gap: 8px; border-radius: 12px; }
  .ag-node .ag-ico { width: 30px; height: 30px; border-radius: 9px; }
  .ag-node .ag-ico svg { width: 16px; height: 16px; }
  .ag-node .ag-t b { font-size: 12px; line-height: 1.2; }
  .ag-node .ag-t small { font-size: 10px; }
  .ag-node .ag-t small i { display: none; }
  .ag-node .ag-st, .ag-node .ag-task { display: none; }
  .ag-mid { order: 0; gap: 10px; margin: 6px 0; }
  .ag-col-l { order: -1; }

  /* Organigramm: KI-Plaketten nur als Roboter-Icon, Badges umbrechen lassen */
  .org-n .org-ag { font-size: 0; gap: 0; padding: 4px; }
  .org-n .org-ag .bot { width: 14px; height: 14px; }
  .org-row { flex-wrap: wrap; row-gap: 6px; }
  .org-hand { font-size: 9px; padding: 3px 6px; }
  .org-col { padding: 18px; border-radius: 22px; }
  .org-h > b { font-size: 26px; }

  /* Paid Ads: Kampagnen als kompakte Zeilen */
  .st-ads .tr-lines { display: none; }
  .ads-cols { gap: 8px; }
  .ads-col { padding: 10px 12px; }
  .ads-h { padding-bottom: 6px; margin-bottom: 6px; }
  .ads-col ul { gap: 3px; }
  .ads-col li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; }
  .ads-col li span { font-size: 12px; }

  /* Shop: Checkliste unter dem Shop statt darüber gequetscht */
  .st-shop { padding-bottom: 14px; }
  .shop-pdp { grid-template-columns: .9fr 1.1fr; gap: 10px; padding: 10px; }
  .shop-info b { font-size: 14px; }
  .shop-list { position: relative; right: auto; bottom: auto; width: auto; margin-top: 12px; }
  .shop-list .wf-it b { font-size: 13.5px; }

  /* Creator: kompakte Zeilen statt großer Karten */
  .cr-grid { gap: 6px; }
  .cr-card { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; column-gap: 12px; row-gap: 0; padding: 10px 12px; border-radius: 16px; }
  .cr-card .cr-av { grid-row: span 2; width: 40px; height: 40px; margin: 0; font-size: 12px; }
  .cr-card .cr-pf { width: 18px; height: 18px; right: -5px; bottom: -5px; }
  .cr-card .cr-pf svg { width: 18px; height: 18px; }
  .cr-card b { font-size: 13px; }
  .cr-card small { grid-column: 2; }
  .cr-card .cr-st { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .cr-flow { flex-wrap: wrap; justify-content: center; }

  /* Zusammenfassung: All-in-One-Pill */
  .ob .aio { max-width: 100%; }

  /* Strippenzieher: Grafik größer, Ränder abgeschnitten */
  .statement { overflow: hidden; }
  .puppet { width: 170%; margin: 24px 0 0 -35%; max-width: none; }

  /* Säulen unter den Zahlen: 2er-Raster */
  .pillars { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pillar { padding: 16px; }
  .pillar h4 { font-size: 14px; margin-top: 10px; }
  .pillar p { font-size: 12.5px; }

  /* Inhouse-Phasen: Foto links, Text rechts */
  .ih-flow { gap: 10px; }
  .ih-card { flex-direction: row; border-radius: 18px; }
  .ih-img { flex: none; width: 112px; aspect-ratio: auto; }
  .ih-body { padding: 14px 14px 14px 12px; }
  .ih-body h3 { font-size: 16px; }
  .ih-body p { font-size: 13px; line-height: 1.45; }

  /* Ergebnisse: erst eine Auswahl, Rest per Button */
  .mob-hide { display: none !important; }
  .more-btn { display: flex; margin: 14px auto 0; }
}
@media (max-width: 700px) { .ag-col-r { order: -1; } .ag-mid { margin-top: 8px; } }
@media (max-width: 700px) {
  .shop-pdp { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .shop-info { min-width: 0; gap: 5px; }
  .shop-info > * { min-width: 0; }
  .shop-stars { font-size: 10px; white-space: nowrap; }
  .shop-stars small { display: none; }
  .shop-bundle span { font-size: 10.5px; padding: 5px 7px; white-space: nowrap; }
  .shop-btn { font-size: 11px; padding: 8px 6px; white-space: nowrap; }
  .shop-trust { display: none; }
  .shop-img { align-self: start; }
}
@media (max-width: 700px) { .tag { white-space: nowrap; font-size: 11.5px; max-width: 100%; } }
/* Workshop-Ticket: Headline auf dem PC exakt zweizeilig */
@media (min-width: 1081px) {
  .wk-main { container-type: inline-size; }
  .wk-h { font-size: min(44px, 7.4cqi); }
  .wk-h .wk-l1, .wk-h em { white-space: nowrap; }
}
@media (max-width: 700px) { .hero { padding-top: 90px; } }
/* Mobil: Titel kompakter (Ziel 2–3 Zeilen) */
@media (max-width: 700px) {
  .h2 { font-size: 28px; line-height: 1.08; letter-spacing: -.03em; }
  .h2.sx-h, .wk-h { font-size: 26px; }
  .st-copy .h3, .h3 { font-size: 22px; line-height: 1.12; }
  .lead { font-size: 15.5px; }
  .m-cut { display: none; }
}
@media (max-width: 700px) {
  .h2.sx-h { font-size: 24px; }
  .statement .h2 br { display: none; }
}
@media (max-width: 700px) {
  .h2.sx-h { font-size: 24px; }
  .statement .h2 br { display: none; }
}
@media (max-width: 700px) { #intelligence .section-head .h2 { font-size: 26px; } #intelligence .section-head .h2 em { white-space: nowrap; } }
@media (max-width: 350px) { #intelligence .section-head .h2 { font-size: 23px; } }
@media (max-width: 700px) {
  /* All-in-One-Pill: zweizeilig statt gequetscht */
  .ob .aio { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; width: fit-content; max-width: 100%; margin-inline: auto; padding: 10px 20px 10px 10px; border-radius: 20px; text-align: left; font-size: 12.5px; }
  .ob .aio .aio-ico { grid-row: 1 / span 2; width: 34px; height: 34px; }
  .ob .aio b { grid-column: 2; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap; }
  .ob .aio .aio-sep { display: none; }
  .ob .aio .aio-from { display: none; }
  .ob .aio .aio-rot { grid-column: 2; min-width: 0; font-size: 17px; justify-self: start; }
  .ob .aio .aio-track span { color: #fff; }

  /* Buttons: Pfeil-Box nicht mehr gequetscht */
  .btn-lg { gap: 14px; padding: 12px 16px 12px 22px; line-height: 1.25; }
  .btn-lg .btn-ico { flex: none; width: 32px; height: 32px; margin-right: 0; border-radius: 10px; }
  .btn-lg .btn-ico .i { width: 15px; height: 15px; }
}
/* Organigramm-Pfeil PC: nur der Pfeil, mittig im Spalt */
@media (min-width: 901px) {
  .org-arrow { top: 50%; transform: translate(-50%, -50%); }
  .org-arrow small { display: none; }
  .org-arrow .i { width: 44px; height: 44px; padding: 12px; box-shadow: 0 0 0 5px #f6f7f9, 0 14px 26px -12px rgba(11,18,32,.6); }
}
/* PC: breitere Beschreibungen unter Bühne- und Plug-&-Grow-Titel */
@media (min-width: 901px) {
  #buehne .section-head .lead { max-width: 860px; }
  .sx-h + p { max-width: 940px; }
}
/* Kunden-Avatare in echten Farben */
.avatars img { filter: none; }
@media (min-width: 701px) { .shop-list { width: min(340px, 66%); } }

/* =====================================================================
   Seite „Ehrliche Antworten“ (/ehrliche-antworten)
   ===================================================================== */
.ea-hero { padding-top: 150px; padding-bottom: 40px; }
.ea-h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.035em; }
.ea-hero .lead { max-width: 680px; margin-inline: auto; }
.ea-proof { display: flex; justify-content: center; margin: 26px 0 22px; }
.ea-proof .tp-badge { margin: 0; }
.ea-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; align-items: start; }
.ea-toc { position: sticky; top: 96px; }
.ea-toc details { padding: 18px 18px 8px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 24px 50px -40px rgba(15,23,42,.5); }
.ea-toc summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.ea-toc summary::-webkit-details-marker { display: none; }
.ea-toc summary .i { width: 16px; height: 16px; transition: transform .25s; }
.ea-toc details[open] summary .i { transform: rotate(180deg); }
.ea-toc-g { padding: 12px 0 10px; border-top: 1px solid rgba(15,23,42,.07); }
.ea-toc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.ea-toc-h .i { width: 15px; height: 15px; }
.ea-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ea-toc li a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: var(--muted); transition: background .2s, color .2s; }
.ea-toc li a span { flex: none; font: 600 11px var(--mono); color: var(--dim); padding-top: 2px; }
.ea-toc li a:hover { background: #f4f6f9; color: var(--text); }
.ea-list { display: grid; gap: 22px; }
.ea-item { scroll-margin-top: 96px; padding: 30px 30px 26px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 30px 60px -48px rgba(15,23,42,.5); }
.ea-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ea-num { font: 600 13px var(--mono); color: #fff; background: #0b1220; padding: 5px 9px; border-radius: 8px; }
.ea-cat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font: 500 12px var(--mono); color: var(--muted); background: #f4f6f9; box-shadow: 0 0 0 1px rgba(15,23,42,.05) inset; }
.ea-cat .i { width: 14px; height: 14px; }
.ea-q { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
.ea-ctx { margin: 12px 0 22px; max-width: 680px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.ea-video { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 20px; overflow: hidden; cursor: default; color: inherit;
  background: repeating-linear-gradient(135deg, rgba(15,23,42,.035) 0 1px, transparent 1px 12px), linear-gradient(160deg, #f4f6f9, #e8ebf0); box-shadow: 0 0 0 1px rgba(15,23,42,.07) inset; }
.ea-video-live { cursor: pointer; background: #0b1220; }
.ea-video-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ea-video-live:hover img { transform: scale(1.03); }
.ea-play { position: relative; z-index: 1; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b1220; box-shadow: 0 0 0 10px rgba(11,18,32,.07), 0 20px 40px -16px rgba(11,18,32,.6); transition: transform .3s var(--ease); }
.ea-play .i { width: 26px; height: 26px; margin-left: 4px; }
.ea-video-live:hover .ea-play { transform: scale(1.06); }
.ea-vlabel { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font: 600 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.ea-vlabel i { width: 7px; height: 7px; border-radius: 50%; background: #f2a93b; box-shadow: 0 0 0 3px rgba(242,169,59,.2); }
.ea-host { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 10px 24px -14px rgba(15,23,42,.5); }
.ea-host img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ea-host b { display: block; font-size: 13px; font-weight: 600; }
.ea-host small { display: block; font-size: 11.5px; color: var(--muted); }
.ea-end { padding-top: 40px; }
.ea-cta { max-width: 760px; margin: 0 auto; text-align: center; padding: 48px 40px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 50px 100px -70px rgba(15,23,42,.45); }
.ea-cta .lead { margin: 16px auto 26px; max-width: 560px; }
.ea-cta .lead a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .ea-grid { grid-template-columns: 1fr; gap: 20px; }
  .ea-toc { position: static; }
}
@media (max-width: 700px) {
  .ea-hero { padding-top: 110px; }
  .ea-item { padding: 20px 18px 18px; border-radius: 22px; }
  .ea-ctx { font-size: 15px; margin-bottom: 16px; }
  .ea-play { width: 58px; height: 58px; }
  .ea-play .i { width: 22px; height: 22px; }
  .ea-vlabel { left: 10px; top: 10px; font-size: 10px; padding: 5px 9px; }
  .ea-host { left: 10px; bottom: 10px; padding: 4px 10px 4px 4px; }
  .ea-host img { width: 26px; height: 26px; }
  .ea-host b { font-size: 12px; } .ea-host small { font-size: 10.5px; }
  .ea-cta { padding: 32px 20px; border-radius: 24px; }
}
@media (min-width: 901px) { .ea-toc details { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; } }

/* ---------- Shop: Claude Code baut eine Produktseite ---------- */
.ccx { position: relative; height: 400px; }
.ccx-term, .ccx-prev { position: absolute; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 24px 44px -30px rgba(15,23,42,.5); transition: transform .8s cubic-bezier(.65,0,.35,1), opacity .6s, filter .6s; }
.ccx-term { left: 0; top: 0; width: 86%; z-index: 2; background: #fcfbf8; }
.ccx-prev { right: 0; top: 34px; width: 86%; height: 366px; z-index: 1; opacity: 0; transform: translateY(18px) scale(.97); }
.ccx.is-preview .ccx-term { transform: translate(-4%, 60px) scale(.9); opacity: .55; filter: blur(.4px); z-index: 1; }
.ccx.is-preview .ccx-prev { opacity: 1; transform: none; z-index: 2; }
.ccx-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.07); }
.ccx-bar .dots { display: flex; gap: 5px; } .ccx-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #dfe3e8; }
.ccx-title { font: 500 11.5px var(--mono); color: var(--muted); }
.ccx-title b { color: #d97757; font-weight: 600; }
.ccx-body { padding: 16px 16px 18px; font: 500 12.5px/1.55 var(--mono); color: #1f2937; min-height: 250px; }
.ccx-prompt { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(217,119,87,.35); }
.ccx-caret { color: #d97757; font-weight: 700; }
.ccx-typed { white-space: pre-wrap; }
.ccx-cursor { display: inline-block; width: 7px; height: 15px; margin-left: 1px; align-self: center; background: #1f2937; animation: blink 1s steps(1) infinite; }
.ccx-log { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.ccx-log li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; color: var(--muted); }
.ccx-log li.on { opacity: 1; transform: none; }
.ccx-log li b { color: #d97757; } .ccx-log li i { font-style: normal; color: #22a06b; margin-right: 4px; }
.ccx-log .ccx-done { color: #1f2937; font-weight: 600; } .ccx-log .ccx-done i { color: #d97757; }
.ccx-prev .shop-bar { padding: 9px 12px; }
.ccx-view { position: relative; height: calc(100% - 37px); overflow: hidden; }
.ccx-page { padding: 12px 14px 20px; transition: transform 7.5s cubic-bezier(.45,0,.35,1) .9s; }
.ccx.is-built .ccx-page { transform: translateY(calc(-100% + 329px)); }
.ccx-page > * { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.ccx.is-preview .ccx-page > * { opacity: 1; transform: none; }
.ccx.is-preview .ccx-page > *:nth-child(2) { transition-delay: .08s; } .ccx.is-preview .ccx-page > *:nth-child(3) { transition-delay: .16s; }
.ccx.is-preview .ccx-page > *:nth-child(n+4) { transition-delay: .24s; }
.cp-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(15,23,42,.07); font-size: 10px; color: var(--muted); }
.cp-nav b { font: 700 11px var(--mono); color: #0b1220; letter-spacing: .06em; }
.cp-nav i { margin-left: auto; width: 16px; height: 16px; border-radius: 5px; background: #0b1220; }
.cp-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; }
.cp-img { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #f3f4f6, #e5e7eb); }
.cp-img svg { width: 62%; fill: #1f2937; }
.cp-info { display: grid; gap: 5px; align-content: start; min-width: 0; }
.cp-stars { font-size: 10px; color: #0b1220; letter-spacing: 1px; white-space: nowrap; } .cp-stars small { color: var(--muted); letter-spacing: 0; }
.cp-info > b { font-size: 15px; } .cp-price { font: 700 13px var(--mono); }
.cp-bundle { display: grid; gap: 4px; } .cp-bundle span { padding: 5px 8px; border-radius: 7px; font-size: 10.5px; box-shadow: 0 0 0 1px rgba(15,23,42,.1); white-space: nowrap; }
.cp-bundle .on { box-shadow: 0 0 0 1.5px #0b1220; font-weight: 600; }
.cp-btn { padding: 8px; border-radius: 9px; text-align: center; font-size: 11px; font-weight: 600; color: #fff; background: #0b1220; }
.cp-pay { font-size: 9.5px; color: var(--muted); text-align: center; }
.cp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.cp-trust span { padding: 8px 6px; border-radius: 9px; text-align: center; font-size: 9.5px; font-weight: 600; background: #f4f6f9; }
.cp-h { margin: 16px 0 8px; font-size: 12.5px; font-weight: 700; }
.cp-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-reviews div { padding: 10px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.cp-reviews i { font-style: normal; font-size: 9px; letter-spacing: 1px; } .cp-reviews p { margin: 4px 0; font-size: 10px; line-height: 1.4; } .cp-reviews small { font-size: 9px; color: var(--muted); }
.cp-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cp-usp span { display: grid; gap: 2px; padding: 10px 8px; border-radius: 10px; font-size: 9.5px; color: var(--muted); background: #f4f6f9; }
.cp-usp b { font-size: 12px; color: #0b1220; }
.cp-faq { display: grid; gap: 5px; } .cp-faq span { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; font-size: 10.5px; box-shadow: 0 0 0 1px rgba(15,23,42,.08); } .cp-faq i { font-style: normal; color: var(--muted); }
.cp-foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(15,23,42,.07); font: 500 9px var(--mono); color: var(--dim); text-align: center; }
@media (max-width: 700px) {
  .ccx { height: 360px; }
  .ccx-term, .ccx-prev { width: 92%; }
  .ccx-prev { height: 330px; top: 30px; }
  .ccx.is-built .ccx-page { transform: translateY(calc(-100% + 293px)); }
  .ccx-body { font-size: 11.5px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ccx-page { transition: none; } }
/* Shop: Checkliste unter der Animation statt darüber */
.st-shop { padding-bottom: 22px; }
.st-shop .shop-list { position: relative; right: auto; bottom: auto; width: auto; margin-top: 14px; }
@media (min-width: 701px) {
  .st-shop .shop-list .wf-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .st-shop .shop-list .wf-list::before { display: none; }
}

/* ---------- Shop v2: Produktseite, Sektionen werden reingezogen ---------- */
.ccx { height: 440px; }
.ccx-prev { position: relative; inset: auto; top: auto; right: auto; width: 100%; height: 100%; opacity: 1; transform: none; z-index: 1; }
.ccx-view { position: relative; height: calc(100% - 37px); overflow: hidden; }
.ccx-page { transition: transform .6s cubic-bezier(.45,0,.25,1); will-change: transform; }
.ccx-page.no-anim { transition: none; }
.ccx-page > * { opacity: 1; transform: none; }
.ccx .cq { display: none; opacity: .35; transform: translateX(-112%); transition: transform .75s cubic-bezier(.65,0,.35,1), opacity .75s; }
.ccx .cq[data-from="r"] { transform: translateX(112%); }
.ccx .cq.show { display: block; }
.ccx .cq.in { opacity: 1; transform: none; }
.ccx-cursor { z-index: 5; opacity: 0; transition: transform .75s cubic-bezier(.65,0,.35,1), opacity .3s; }
.ccx-cursor.on { opacity: 1; }
.cp-myth { display: grid; gap: 6px; }
.cp-myth div { display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; background: #f4f6f9; }
.cp-myth s { font-size: 10.5px; color: var(--muted); text-decoration-color: #e5484d; }
.cp-myth span { font-size: 10.5px; font-weight: 600; }
.cp-myth span::before { content: "✓ "; color: #22a06b; }
.cp-ugc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cp-ugc span { position: relative; aspect-ratio: 9 / 14; border-radius: 10px; display: flex; align-items: flex-end; padding: 6px; color: #fff; }
.cp-ugc b { font: 600 8.5px var(--mono); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cq-play { position: absolute; left: 50%; top: 42%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(255,255,255,.85); }
.cq-play::after { content: ""; position: absolute; left: 9px; top: 6px; border-left: 7px solid #0b1220; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.cp-rate { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; align-items: start; }
.cp-bars { display: grid; gap: 5px; padding-top: 4px; }
.cp-bars span { display: flex; align-items: center; gap: 6px; font: 600 9.5px var(--mono); }
.cp-bars i { flex: 1; height: 6px; border-radius: 9px; background: linear-gradient(90deg, #0b1220 var(--w), #e5e8ee var(--w)); }
.cp-rate .cp-reviews { grid-template-columns: 1fr; gap: 6px; }
.cp-obj { display: grid; gap: 6px; }
.cp-obj span { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; font-size: 10px; color: var(--muted); box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.cp-obj b { font-size: 11px; color: #0b1220; }
.cp-vs { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1px; border-radius: 10px; overflow: hidden; background: rgba(15,23,42,.08); font-size: 10px; }
.cp-vs > * { padding: 7px 8px; background: #fff; font-style: normal; }
.cp-vs b { font-size: 10px; } .cp-vs em { font-weight: 700; color: #22a06b; } .cp-vs i { color: var(--muted); }
.cp-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cp-stack span { display: grid; gap: 2px; padding: 9px 8px; border-radius: 10px; font: 700 11px var(--mono); box-shadow: 0 0 0 1px rgba(15,23,42,.1); }
.cp-stack b { font: 600 10px var(--sans); } .cp-stack small { font-size: 9px; color: #22a06b; }
.cp-stack .on { box-shadow: 0 0 0 1.5px #0b1220; background: #f8fafc; }
.cp-guar { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; border-radius: 12px; background: #f4f6f9; }
.cp-guar i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font: 700 13px var(--mono); font-style: normal; color: #fff; background: #0b1220; }
.cp-guar span { display: grid; gap: 2px; font-size: 10px; color: var(--muted); } .cp-guar b { font-size: 12px; color: #0b1220; }
.cp-final { display: grid; gap: 8px; justify-items: center; margin-top: 18px; padding: 16px 12px; border-radius: 12px; text-align: center; background: #f4f6f9; }
.cp-final b { font-size: 13px; }
.cp-final .cp-btn { padding: 8px 16px; }
@media (max-width: 700px) {
  .ccx { height: 400px; }
  .cp-ugc { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .cp-rate { grid-template-columns: 1fr; }
}
.cp-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.cp-info > * { min-width: 0; }
@media (max-width: 700px) {
  .ccx-page { padding: 10px; }
  .cp-hero { gap: 8px; }
  .cp-info > b { font-size: 13px; }
  .cp-bundle span { font-size: 9.5px; padding: 4px 6px; }
  .cp-btn { font-size: 10px; padding: 7px 4px; white-space: nowrap; }
  .cp-stars small { display: none; }
}

/* ---------- Shop-Galerie (#fuer-wen): Startseiten der Kunden, zwei Reihen laufen endlos ---------- */
.sw { margin-top: 8px; }
.sw-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 14px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sw-row::-webkit-scrollbar { display: none; }
.sw-row.drag { cursor: grabbing; }
.sw-row.drag .sw-card { pointer-events: none; }
.sw-track { display: flex; width: max-content; }
.sw-row + .sw-row { margin-top: -6px; }
.sw-card { flex: 0 0 auto; width: 400px; margin: 0 22px 0 0; border-radius: 16px; background: #fff; overflow: hidden; user-select: none;
  box-shadow: 0 0 0 1px rgba(15,23,42,.07), 0 18px 40px -26px rgba(15,23,42,.35); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.sw-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(15,23,42,.1), 0 30px 60px -30px rgba(15,23,42,.45); }
.sw-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f4f5f7; border-bottom: 1px solid rgba(15,23,42,.06); }
.sw-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(15,23,42,.14); }
.sw-url { flex: 1; margin-left: 10px; max-width: 220px; height: 18px; padding: 0 10px; border-radius: 6px; background: #fff; font: 500 10.5px/18px var(--mono); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }
.sw-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #eef0f3; }
.sw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.sw-card:hover .sw-shot img { transform: scale(1.04); }
.sw-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px 14px; }
.sw-card figcaption b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-card figcaption span { font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.sw-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.sw-foot b { color: var(--text); font-weight: 600; }
.sw-hint { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); }
.sw-hint em { font-style: normal; }
.sw-hint .i { animation: swNudge 1.8s ease-in-out infinite; }
.sw-m { display: none; }
@keyframes swNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* Logo-Band oben: neue Logos sind bereits dunkel, kein Invert */
.theme-light .cl.cl2 { filter: none; opacity: .5; max-width: 140px; }
.theme-light .cl.cl2:hover { opacity: .85; }
@media (max-width: 700px) {
  .theme-light .cl.cl2 { max-width: 110px; }
  .sw-row { padding: 8px 0 18px; -webkit-mask-image: none; mask-image: none; }
  .sw-card { width: 264px; margin-right: 14px; border-radius: 13px; }
  .sw-bar { height: 24px; padding: 0 10px; gap: 5px; }
  .sw-bar i { width: 6px; height: 6px; }
  .sw-url { height: 15px; font-size: 9px; line-height: 15px; margin-left: 6px; }
  .sw-card figcaption { padding: 10px 12px 11px; }
  .sw-card figcaption b { font-size: 13.5px; }
  .sw-card figcaption span { font-size: 10px; }
  .sw-foot { gap: 6px 18px; font-size: 13px; }
  .sw-d { display: none; } .sw-m { display: inline; }
}