/* ═══════════ Helvetica Now (lizenzierte Monotype-Webfonts) ═══════════
   Text  = Interface/Fliesstext (Regular 400, Medium ab 500 - Bold-Anfragen
           rendern bewusst Medium: ruhiger Ambiq-Look statt fettem Bold)
   Display = grosse Headlines (h1-h3), gleiche Medium-Logik              */
@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextRegular/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextRegular/font.woff") format("woff");
  font-weight: 100 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextItalic/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextItalic/font.woff") format("woff");
  font-weight: 100 450; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextMedium/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextMedium/font.woff") format("woff");
  font-weight: 451 650; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextBold/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextBold/font.woff") format("woff");
  font-weight: 651 850; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextBlack/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextBlack/font.woff") format("woff");
  font-weight: 851 900; font-style: normal; font-display: swap;
}


@font-face {
  font-family: "Helvetica Now Text";
  src: url("../fonts/HelveticaNowTextMediumItalic/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowTextMediumItalic/font.woff") format("woff");
  font-weight: 451 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplayRegular/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowDisplayRegular/font.woff") format("woff");
  font-weight: 100 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplayMedium/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowDisplayMedium/font.woff") format("woff");
  font-weight: 451 650; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplayExtraBold/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowDisplayExtraBold/font.woff") format("woff");
  font-weight: 651 900; font-style: normal; font-display: swap;
}

/* Grosse Headlines in Display; Sektions-Headlines (700) rendern Bold */
#ldi-root h1, #ldi-root h2, #ldi-root h3, .hero-title, .nav-menu-link {
  font-family: "Helvetica Now Display", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Hero-Titel bleibt im ruhigen Medium-Look */
.hero-title { font-weight: 600 !important; }
/* Positionierungs-Statement: gross und fett (Display Bold) */
#stmt {
  font-family: "Helvetica Now Display", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700 !important;
}

:root { --acc:#05332B; }   /* global: Elemente ausserhalb #ldi-root (Modal!) brauchen die Variable auch */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { margin: 0; background: #F2F2F1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #05332B; color: #F4F4F2; }
@keyframes ldiFlow { to { stroke-dashoffset: var(--flow, -320px); } }
@keyframes ldiPulse { 0%, 100% { opacity: .85; } 50% { opacity: .25; } }
@media (max-height: 740px) {
  #hero-hint { display: none !important; }
  #hero-content { padding-top: 34px !important; }
  #hero-content .hero-title { font-size: 42px !important; }
  #hero-logo { margin-top: 0 !important; }
}
@media (max-width: 720px) {
  /* Hero-Titel deutlich kleiner auf Mobile */
  .hero-title, #hero-content .hero-title { font-size: clamp(24px, 6.8vw, 30px) !important; }
  /* Trust-Strip auf Mobile in den Fluss unter den Inhalt setzen */
  #hero-sticky { flex-direction: column; justify-content: center; }
  #hero-hint { position: static !important; margin-top: 14px; }
  /* Marker-/Content-Versatz auf Mobile zurücknehmen */
  #hero-logo { margin-top: 0 !important; }
  #hero-content { padding-left: clamp(20px, 4vw, 48px) !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } }

/* Scroll-Rail-Thumb: greif- und ziehbar; transparente Borders verbreitern die
   Griffzone auf 24px, background-clip haelt den sichtbaren Balken bei 4px.
   right kompensiert die Border-Breite (19px - 10px). */
#rail-thumb { pointer-events:auto; cursor:grab; touch-action:none;
  border-left:10px solid transparent; border-right:10px solid transparent;
  background-clip:padding-box !important; right:9px !important; }

/* =====================================================================
   HERO / NAV - aus Inline-Styles überführt
===================================================================== */

/* ---- Navigation ---- */
#ldi-nav { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(242,242,241,0); transition:background .4s; }
#nav-inner { position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; transition:height .4s cubic-bezier(.22,.7,.2,1); }
.nav-brand { display:flex; align-items:center; }
#nav-logo { height:14px; width:auto; display:block; opacity:0; transition:opacity .35s; }

/* ---- Burger-Button ---- */
/* Fix positioniert auf der Scroll-Rail-Achse rechts (Nummern-Mitte ~42px vom Rand) */
#nav-toggle { position:fixed; top:24px; right:18px; z-index:3; appearance:none; border:none; cursor:pointer; background:#0B0C0E; width:48px; height:44px; border-radius:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; transition:background .3s; }
#nav-toggle span { display:block; width:20px; height:2px; background:#F4F4F2; border-radius:2px; transition:transform .35s cubic-bezier(.22,.7,.2,1), opacity .2s; }
.nav-open #nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-open #nav-toggle span:nth-child(2) { opacity:0; }
.nav-open #nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---- Vollflächen-Menü ---- */
#nav-menu { position:fixed; inset:0; z-index:150; background:#05332B; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease, visibility .45s; }
/* Bei offenem Menue: Leisten-Hintergrund/Blur und dunkles Logo zuruecknehmen */
.nav-open #ldi-nav { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.nav-open #nav-logo { opacity:0 !important; }
.nav-open #nav-menu { opacity:1; visibility:visible; pointer-events:auto; }
#nav-menu-inner { max-width:1320px; margin:0 auto; min-height:100%; padding:120px clamp(20px,4vw,48px) clamp(40px,7vh,80px); display:flex; flex-direction:column; justify-content:center; gap:clamp(6px,1.4vh,16px); }
.nav-menu-link { font-size:clamp(34px,6.4vw,68px); font-weight:700; line-height:1.08; color:#F4F4F2; text-decoration:none; opacity:.82; transform:translateY(12px); transition:opacity .4s, color .3s, transform .5s cubic-bezier(.22,.7,.2,1); }
.nav-menu-link:hover { opacity:1; color:#1a663f; }
.nav-open .nav-menu-link { opacity:.82; transform:translateY(0); }
.nav-open .nav-menu-link:hover { opacity:1; }
#nav-menu-foot { margin-top:clamp(28px,6vh,64px); display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
#nav-menu .lang-switch { border-color:rgba(244,244,242,.28); }
#nav-menu .lang-btn { color:rgba(244,244,242,.7); }
#nav-menu .lang-btn.is-active { background:#F4F4F2; color:#05332B; }
#nav-menu #nav-cta { background:#F4F4F2; color:#05332B; }
#nav-menu #nav-cta:hover { background:#1a663f; }

.lang-switch { display:flex; align-items:center; border:1px solid rgba(11,12,14,.18); border-radius:3px; overflow:hidden; }
.lang-btn { appearance:none; border:none; cursor:pointer; font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.08em; padding:6px 10px; background:transparent; color:rgba(11,12,14,.6); transition:background .25s, color .25s; }
.lang-btn.is-active { background:#0B0C0E; color:#F4F4F2; }
#nav-cta { display:inline-block; background:#0B0C0E; color:#F4F4F2; font-size:13px; font-weight:600; letter-spacing:.01em; padding:10px 18px; border-radius:2px; text-decoration:none; white-space:nowrap; transition:background .3s; }
#nav-cta:hover { background:var(--acc); }

/* ---- Hero-Grundgerüst ---- */
#top { position:relative; }
#hero-wrap { height:200vh; }
#hero-sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
/* Fixer Karten-Hintergrund hinter dem gesamten Inhalt; Deckkraft steuert JS beim Scrollen */
#hero-art { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; will-change:opacity; }
#hero-map { position:absolute; inset:0; width:100%; height:100%; background:#F2F2F1; }
/* Google-Map-Canvas ruhig halten (Hintergrund) */
#hero-map .gm-style { font-family:inherit; }
#hero-map img { max-width:none; }

/* Karten-Overlays */

/* Heller Schleier von links (Text lesbar), zieht sich früher zurück -> reicht nicht bis zur Isar */
.hero-wash-h { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 28%, rgba(255,255,255,.6) 40%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 53%); }
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,12,14,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,12,14,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(11,12,14,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,12,14,.026) 1px, transparent 1px);
  background-size:224px 224px, 224px 224px, 44.8px 44.8px, 44.8px 44.8px;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 26%, rgba(0,0,0,.24) 50%, rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 26%, rgba(0,0,0,.24) 50%, rgba(0,0,0,0) 72%);
}

/* ---- Hero-Inhalt ---- */
#hero-content { position:relative; width:100%; max-width:1320px; margin:0 auto; padding:max(0px, calc(clamp(110px,16vh,170px) - 50px)) clamp(20px,4vw,48px) 0 calc(clamp(20px,4vw,48px) + 124px); }
#hero-logo { display:flex; align-items:flex-start; gap:16px; margin:-140px 0 clamp(26px,4.5vh,44px); }
#hero-pin { position:relative; display:block; width:34px; flex:none; }
.hero-pin-svg { display:block; overflow:visible; width:34px; height:44px; }
.hero-brand { display:block; }
.hero-brand-logo { height:clamp(20px,2.2vw,28px); width:auto; display:block; }
.hero-coords { display:block; margin-top:7px; font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,12,14,.45); white-space:nowrap; }
.hero-eyebrow { margin:60px 0 clamp(18px,2.6vh,30px); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(11,12,14,.5); }
/* Text buendig mit der Rasterlinie durch die Pin-Spitze (halbe Pin-Breite) */
.hero-eyebrow, .hero-title { margin-left:17px; }
/* Eine Tipp-Zeile als Buehne: Phrasen tippen sich ein und wieder aus,
   die letzte bleibt stehen. Hoehe fest reserviert -> nichts springt. */
.hero-title { margin:0 0 0 17px; font-size:42px; font-weight:700; line-height:1.12; min-height:1.12em; max-width:780px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-title .hero-line { display:block; }
.hero-title .accent { color:var(--acc); }
.hero-lead { margin:clamp(16px,2.6vh,28px) 0 0 17px; max-width:560px; font-size:clamp(15px,1.25vw,18px); line-height:1.65; color:rgba(11,12,14,.68); }
.hero-lead strong { font-weight:700; color:rgba(11,12,14,.85); }

/* ---- Trust-Strip ---- */
#hero-hint { position:absolute; bottom:26px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 clamp(20px,4vw,48px); pointer-events:none; }
.hero-since { font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,12,14,.42); text-align:center; }
.hero-logos { display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.9vw,28px); flex-wrap:wrap; max-width:1240px; }
.hero-logos img { width:auto; display:block; filter:grayscale(1); opacity:.45; }
.hero-logos .logo-mercedes { height:22px; }
.hero-logos .logo-bmw { height:30px; }
.hero-logos .logo-audi { height:19px; }
.hero-logos .logo-balluff { height:18px; }
.hero-logos .logo-zeppelin { height:20px; }
.hero-logos .logo-swm { height:20px; }
.hero-logos .logo-muc { height:20px; }
.hero-logos .logo-doll { height:19px; }
.hero-logos .logo-paulaner { height:30px; }
.hero-logos .logo-heineken { height:19px; }
.hero-logos .logo-ukt { height:20px; opacity:.5; mix-blend-mode:multiply; }

/* =====================================================================
   HERO-KARTE - Orientierungs-Marker (Google-Maps OverlayView)
===================================================================== */
#hero-marks { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
.ldi-mark { position:absolute; transform:translate(-50%,-100%); pointer-events:none; }
.ldi-mark-in { display:flex; flex-direction:column; align-items:center; gap:6px; transform-origin:bottom center;
  opacity:0; transform:translateY(-18px) scale(.9);
  transition:opacity .5s ease, transform .66s cubic-bezier(.34,1.4,.5,1); }
.ldi-mark.in .ldi-mark-in { opacity:1; transform:none; }
.ldi-mark-label { font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.01em;
  line-height:1; color:#0B0C0E; background:rgba(255,255,255,.94); padding:4px 9px; border-radius:2px;
  white-space:nowrap; box-shadow:0 3px 10px rgba(11,12,14,.14); }
.ldi-mark-dot { width:11px; height:11px; border-radius:50%; background:#05332B;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 2px 6px rgba(11,12,14,.28); }

/* =====================================================================
   KI-DEMO - Prompt → Agenten → Ergebnis (Sektion #ki-demo)
===================================================================== */
/* Transparent, damit der fixe Karten-Hintergrund durchscheint (fadet beim Scrollen) */
.kd { background:transparent; padding:clamp(80px,12vh,150px) 0; }
.kd-inner { max-width:820px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.kd-eyebrow { margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(11,12,14,.45); text-align:center; }
.kd-head { margin:0 0 clamp(34px,5vh,56px); font-size:clamp(26px,3.4vw,44px); font-weight:700; line-height:1.1; text-align:center; color:#0B0C0E; }

/* ---- Prompt-Input ---- */
.kd-prompt { display:flex; align-items:flex-end; gap:12px; max-width:780px; margin:0 auto; background:#FFFFFF; border:1px solid rgba(11,12,14,.12); border-radius:22px; padding:22px 18px 22px 28px; box-shadow:0 14px 50px rgba(11,12,14,.08); transition:box-shadow .4s, border-color .4s; }
#ki-demo.kd-sent .kd-prompt { border-color:rgba(5,51,43,.35); box-shadow:0 16px 56px rgba(5,51,43,.14); }
.kd-input { flex:1; min-height:1.5em; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:#0B0C0E; }
.kd-input-text { white-space:pre-wrap; }
.kd-caret { display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--acc); animation:kd-blink 1s steps(1) infinite; }
#ki-demo.kd-sent .kd-caret { display:none; }
.kd-send { flex:none; width:48px; height:48px; border:none; border-radius:50%; background:#0B0C0E; color:#F4F4F2; display:flex; align-items:center; justify-content:center; cursor:default; transition:background .3s, transform .3s; }
#ki-demo.kd-sent .kd-send { background:var(--acc); transform:scale(.94); }
@keyframes kd-blink { 50% { opacity:0; } }

/* ---- Agenten ---- */
.kd-run { max-width:720px; margin:26px auto 0; background:transparent; border:none; padding:0 10px; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.2,1); }
#ki-demo.kd-run-on .kd-run { opacity:1; transform:none; }
.kd-run-head { display:flex; align-items:center; justify-content:space-between; padding:12px 0 10px; border-bottom:1px solid rgba(11,12,14,.07); }
.kd-run-title { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(11,12,14,.7); }
.kd-run-orb { width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 rgba(5,51,43,.4); animation:kd-pulse 1.8s ease-out infinite; }
.kd-run-status { font-size:11px; font-weight:600; letter-spacing:.05em; color:rgba(11,12,14,.42); font-variant-numeric:tabular-nums; }
@keyframes kd-pulse { 0% { box-shadow:0 0 0 0 rgba(5,51,43,.4); } 70% { box-shadow:0 0 0 8px rgba(5,51,43,0); } 100% { box-shadow:0 0 0 0 rgba(5,51,43,0); } }
.kd-steps { list-style:none; margin:0; padding:6px 0; }
.kd-step { display:flex; align-items:center; gap:13px; padding:11px 2px; font-size:clamp(14px,1.15vw,16px); color:rgba(11,12,14,.4);
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s cubic-bezier(.22,.7,.2,1), color .3s; }
.kd-step.kd-active, .kd-step.kd-done { opacity:1; transform:none; }
.kd-step.kd-active { color:#0B0C0E; }
.kd-step.kd-done { color:rgba(11,12,14,.78); }
.kd-ic { position:relative; flex:none; width:19px; height:19px; border-radius:50%; border:2px solid rgba(11,12,14,.15); box-sizing:border-box; }
.kd-step.kd-active .kd-ic { border-color:rgba(5,51,43,.25); border-top-color:var(--acc); animation:kd-spin .7s linear infinite; }
.kd-step.kd-done .kd-ic { border-color:var(--acc); background:var(--acc); animation:none; }
.kd-step.kd-done .kd-ic::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #F4F4F2; border-width:0 2px 2px 0; transform:rotate(45deg); }
@keyframes kd-spin { to { transform:rotate(360deg); } }

/* ---- Ergebnis: drei Kacheln ---- */
.kd-result { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:clamp(22px,4vh,40px) auto 0; }
.kd-tile { background:#FFFFFF; border:1px solid rgba(11,12,14,.1); border-radius:4px; padding:20px; display:flex; flex-direction:column; gap:7px;
  opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .6s cubic-bezier(.22,.7,.2,1); }
#ki-demo.kd-show-result .kd-tile { opacity:1; transform:none; }
#ki-demo.kd-show-result .kd-tile:nth-child(2) { transition-delay:.12s; }
#ki-demo.kd-show-result .kd-tile:nth-child(3) { transition-delay:.24s; }
.kd-tile-label { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
.kd-tile-kpi { font-size:clamp(19px,1.9vw,24px); font-weight:700; line-height:1.15; color:#0B0C0E; }
.kd-tile-sub { font-size:12.5px; line-height:1.5; color:rgba(11,12,14,.6); }
.kd-bars { display:flex; align-items:flex-end; gap:6px; height:44px; margin-top:6px; }
.kd-bars i { flex:1; height:var(--h); background:linear-gradient(180deg, var(--acc), #1a663f); border-radius:2px 2px 0 0; opacity:.9; }
.kd-spark { width:100%; height:40px; margin-top:8px; color:var(--acc); }
.kd-list { margin:4px 0 0; padding-left:16px; font-size:12.5px; line-height:1.6; color:rgba(11,12,14,.65); }
.kd-list li { margin-bottom:2px; }
.kd-foot { margin:clamp(28px,4.5vh,44px) 0 0; text-align:center; font-size:clamp(14px,1.2vw,16px); color:rgba(11,12,14,.55); }

@media (max-width:760px) {
  .kd-result { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-run, .kd-step, .kd-tile { opacity:1 !important; transform:none !important; }
  .kd-run-orb, .kd-caret { animation:none !important; }
}

/* =====================================================================
   HERO - Auszeichnung unten rechts (ohne Hintergrund, fadet beim Scrollen aus)
===================================================================== */

/* =====================================================================
   HERO-INTRO - kleine Story: Pin faellt & federt, Logo rollt ein,
   h1 + Lead werden getippt, dann erscheint der CTA.
   (Zustaende nur aktiv, wenn JS html.hi-run setzt -> kein-JS/Reduced-Motion
    sehen den fertigen Hero.)
===================================================================== */
html.hi-run .hero-pin-svg { opacity:0; transform-origin:50% 100%; }
html.hi-pin .hero-pin-svg { animation:hiPinDrop .95s cubic-bezier(.3,1.15,.4,1) both; }
@keyframes hiPinDrop {
  0%   { opacity:0; transform:translateY(-130px) scale(1.9); }
  14%  { opacity:1; }
  55%  { transform:translateY(0) scale(1); }
  71%  { transform:translateY(-15px); }
  85%  { transform:translateY(0); }
  93%  { transform:translateY(-5px); }
  100% { opacity:1; transform:translateY(0); }
}
html.hi-run .hero-brand { opacity:0; }
html.hi-logo .hero-brand { opacity:1; }
html.hi-logo .hero-brand-logo { animation:hiRoll .85s cubic-bezier(.25,.9,.3,1) both; }
@keyframes hiRoll {
  0%   { opacity:0; transform:translateX(-170px) rotate(-200deg); }
  100% { opacity:1; transform:none; }
}
html.hi-run .hero-eyebrow, html.hi-run .hero-title, html.hi-run .hero-lead { visibility:hidden; }
html.hi-run .hero-lead { opacity:0; transform:translateY(12px); transition:opacity .6s ease .05s, transform .6s cubic-bezier(.22,.7,.2,1) .05s; }
html.hi-acts .hero-lead { visibility:visible; opacity:1; transform:none; }
/* Caret haengt absolut am jeweils letzten Zeichen -> beansprucht keinen
   Platz im Textfluss, kann also beim Zeilenwechsel nichts verschieben */
.hi-caret { position:absolute; left:calc(100% + 2px); top:.06em; width:3px; height:.92em; background:var(--acc); animation:kd-blink 1s steps(1) infinite; pointer-events:none; }


/* =====================================================================
   ARBEITEN - Showcase: Kacheln "gehen auf" abhaengig vom Scrollfortschritt
   (Presence-Werte setzt main.js pro Frame; hier nur Basis + Responsive)
===================================================================== */
/* Breakout: das Flecken-Feld verlaesst den 1320px-Container und nutzt die volle
   Viewport-Breite (Rueckholung ueber negative Margins), Zeilen etwas hoeher. */
#wk-grid {
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:clamp(16px,2.5vw,44px);
  padding-right:clamp(16px,2.5vw,44px);
  box-sizing:border-box;
  grid-auto-rows:clamp(210px,24vw,390px) !important;
}
#wk-grid { position:relative; }
#wk-grid > .wk-item { position:relative; z-index:1; will-change:transform, opacity; transform-origin:50% 60%; border-radius:clamp(24px,3vw,44px); overflow:hidden; }
/* Helle Flecken: Rahmen wird vom Clip geschnitten -> weicher Schatten trennt vom Grund */
#wk-grid > .wk-item:not(.wk-spot) { filter:drop-shadow(0 3px 16px rgba(11,12,14,.08)); }

/* "Stein im Wasser": konzentrische Ringe breiten sich hinter jedem Fleck aus
   (eigene Ebene unter den Kacheln - Clip-Path wuerde Pseudo-Elemente clippen) */
.wk-ripple { position:absolute; pointer-events:none; z-index:0; }
/* SVG-Wellenringe: die Linie selbst traegt mehrere Wellenberge (Radius+Sinus),
   dreht sanft beim Ausbreiten; Strichstaerke bleibt dank non-scaling-stroke fein */
.wk-ripple svg { position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transform:scale(.62) rotate(0deg); overflow:visible;
  animation:wkRipple 14s ease-out infinite; }
.wk-ripple svg:nth-child(2) { animation-delay:7s; animation-name:wkRippleB; }
.wk-ripple path { fill:none; stroke:rgba(11,12,14,.16); stroke-width:1.5;
  vector-effect:non-scaling-stroke; }
@keyframes wkRipple {
  0%   { transform:scale(.62) rotate(0deg); opacity:0; }
  10%  { opacity:.5; }
  100% { transform:scale(1.5) rotate(26deg); opacity:0; }
}
@keyframes wkRippleB {
  0%   { transform:scale(.62) rotate(0deg); opacity:0; }
  10%  { opacity:.5; }
  100% { transform:scale(1.5) rotate(-22deg); opacity:0; }
}
html.dark .wk-ripple path { stroke:rgba(244,244,242,.14); }

/* Wellige Kuhflecken-Formen (SVG-ClipPaths in index.html, skalieren mit) */
.wk-b1 { clip-path:url(#wkb1); border-radius:clamp(24px,3vw,44px); }
.wk-b2 { clip-path:url(#wkb2); border-radius:clamp(24px,3vw,44px); }
.wk-b3 { clip-path:url(#wkb3); border-radius:clamp(24px,3vw,44px); }
.wk-b4 { clip-path:url(#wkb4); border-radius:clamp(24px,3vw,44px); }

/* Foto-Flecken: gruene Duotone-Bildwelt (CI statt bunter Fotos).
   Duotone liegt KOMPLETT im Overlay (backdrop-filter + Farb-Blend) -> Hover
   blendet nur die Overlay-Deckkraft - kein Neu-Rendern des Bildes, kein Wackeln. */
.wk-spot { position:relative; background:#0A2A23; color:#F4F4F2; }
.wk-ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wk-tint { position:absolute; inset:0; background:var(--acc); mix-blend-mode:color;
  backdrop-filter:grayscale(1) contrast(1.04) brightness(.94);
  -webkit-backdrop-filter:grayscale(1) contrast(1.04) brightness(.94);
  pointer-events:none; transition:opacity .45s ease; }
/* Hover: Duotone weicht dem Originalbild */
.wk-spot:hover .wk-tint { opacity:0; }
.wk-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,32,27,.18), rgba(4,32,27,.35) 55%, rgba(3,26,22,.86)); pointer-events:none; }

/* Kundenlogos auf den Flecken (weiss normalisiert) */
.wk-logo { position:absolute; top:clamp(24px,3vw,44px); left:0; right:0; margin:0 auto; height:clamp(20px,1.9vw,30px); width:auto; max-width:46%; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; z-index:2; pointer-events:none; }
.wk-logo-big { height:clamp(38px,3.6vw,60px); top:clamp(48px,6vw,96px); }
.wk-logo-dark { height:clamp(24px,2.4vw,40px); width:auto; max-width:70%; object-fit:contain; }
.wk-badge { position:absolute; top:clamp(24px,3vw,44px); right:clamp(28px,3.4vw,52px); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:rgba(244,246,243,.16); color:#F4F6F3; padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:2; pointer-events:none; }

/* Copy sitzt tief im Fleck, grosszuegig eingerueckt (Rundungen!) */
.wk-copy { position:absolute; left:clamp(56px,6.5vw,110px); right:clamp(56px,6.5vw,110px); bottom:clamp(48px,5.5vw,92px); pointer-events:none; z-index:2; }
.wk-copy-big { left:clamp(84px,10vw,190px); right:clamp(72px,8.5vw,160px); bottom:clamp(84px,10vw,180px); }

/* Original-Bildwelt (z. B. Mercedes-Ensemble): kein Duotone, Foto pur */
.wk-orig .wk-ph { filter:none; }
.wk-orig .wk-tint { display:none; }

/* Helle Bubble: weisser Grund, Motiv eingepasst statt beschnitten */
.wk-light { background:#FFFFFF; border:1px solid rgba(11,12,14,.08); }
.wk-light .wk-ph { object-fit:contain; padding:clamp(32px,4vw,64px) clamp(36px,4.4vw,72px) clamp(60px,6vw,100px); box-sizing:border-box; }
.wk-light .wk-shade { display:none; }

/* Schwarze Bubble: Motiv (mit Transparenz) auf tiefem Schwarz eingepasst */
.wk-dark { background:#0B0C0E; }
.wk-dark .wk-ph { object-fit:contain; padding:clamp(32px,4vw,64px) clamp(36px,4.4vw,72px) clamp(60px,6vw,100px); box-sizing:border-box; }
.wk-dark .wk-shade { display:none; }

@media (max-width:900px) {
  /* Mobile/Tablet: einspaltig, Versatz zuruecknehmen, Flecken dezenter */
  #wk-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:minmax(230px,auto) !important; gap:26px !important; }
  #wk-grid > article { grid-column:1 / -1 !important; position:static !important; top:auto !important; }
  .wk-b1, .wk-b2, .wk-b3, .wk-b4 { border-radius:32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #wk-grid > .wk-item { opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   DARK MODE - html.dark. Kuratiertes dunkles Theme; Inline-Styles werden
   ueber [style*=...]-Attributselektoren gezielt uebersteuert.
===================================================================== */

/* Umschalter links neben dem Burger */
#theme-toggle { position:fixed; top:24px; right:76px; z-index:210; width:48px; height:44px;
  appearance:none; border:none; cursor:pointer; border-radius:2px;
  background:#0B0C0E; color:#F4F4F2; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s; }
#theme-toggle:hover { background:var(--acc); }
html.dark #theme-toggle { background:#F4F4F2; color:#0B0C0E; }
.nav-open #theme-toggle { background:transparent !important; color:#F4F4F2 !important; }

/* ---- Hero-Aktionen: Mail / Termin / Anruf / LinkedIn (Burger-Stil) ---- */
.hero-actions { display:flex; gap:10px; margin:clamp(22px,3.4vh,36px) 0 0 17px; }
.ha-btn { width:48px; height:44px; border-radius:2px; border:none; appearance:none; cursor:pointer;
  background:#0B0C0E; color:#F4F4F2; font-size:16px; text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s; }
.ha-btn:hover { background:var(--acc); transform:translateY(-2px); }
html.dark .ha-btn { background:#F4F4F2; color:#0B0C0E; }
html.dark .ha-btn:hover { background:#1a663f; }
html.hi-run .hero-actions { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.2,1); }
html.hi-acts .hero-actions { opacity:1; transform:none; }

/* ---- Terminbuchungs-Modal (Calendly-Stil, rein visuell) ---- */
/* Modal liegt ausserhalb von #ldi-root -> Site-Font explizit setzen
   (sonst rendert der Browser-Default-Serif) */
#cal-modal { position:fixed; inset:0; z-index:300; display:none;
  font-family:'Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#0B0C0E; -webkit-font-smoothing:antialiased; }
html.cm-open #cal-modal { display:block; }
.cm-backdrop { position:absolute; inset:0; background:rgba(11,12,14,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cm-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,760px);
  background:#FFFFFF; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.35);
  display:grid; grid-template-columns:1fr 1.3fr; overflow:hidden; }
.cm-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border:none; appearance:none;
  background:transparent; color:rgba(11,12,14,.5); font-size:17px; cursor:pointer; border-radius:50%; transition:background .25s, color .25s; }
.cm-close:hover { background:rgba(11,12,14,.06); color:#0B0C0E; }
.cm-left { padding:clamp(24px,3vw,40px); border-right:1px solid rgba(11,12,14,.08); background:var(--acc); color:#F4F6F3; }
.cm-brand { margin:0 0 18px; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,246,243,.6); }
.cm-title { margin:0 0 14px; font-size:clamp(22px,2.2vw,30px); font-weight:700; }
.cm-meta { margin:0 0 8px; font-size:13px; color:rgba(244,246,243,.75); display:flex; align-items:center; gap:9px; }
.cm-note { margin:18px 0 0; font-size:12.5px; line-height:1.55; color:rgba(244,246,243,.6); }
.cm-right { padding:clamp(22px,2.8vw,36px); }
.cm-month { margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:.02em; color:#0B0C0E; }
.cm-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cm-grid .cm-wd { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(11,12,14,.4); text-align:center; padding:4px 0; }
.cm-grid .cm-day { aspect-ratio:1; border:none; appearance:none; background:transparent; border-radius:50%;
  font-family:inherit; font-size:12.5px; font-weight:600; color:#0B0C0E; cursor:pointer; transition:background .2s, color .2s; }
.cm-grid .cm-day:hover { background:rgba(5,51,43,.1); }
.cm-grid .cm-day.is-off { color:rgba(11,12,14,.25); cursor:default; }
.cm-grid .cm-day.is-off:hover { background:transparent; }
.cm-grid .cm-day.is-sel { background:var(--acc); color:#F4F6F3; }
.cm-grid .cm-day.is-today { box-shadow:inset 0 0 0 2px var(--acc); }
html.dark .cm-grid .cm-day.is-today { box-shadow:inset 0 0 0 2px #1a663f; }
.cm-times { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.cm-time { appearance:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
  padding:9px 14px; border-radius:999px; border:1px solid rgba(5,51,43,.35); background:transparent; color:var(--acc); transition:background .2s, color .2s; }
.cm-time:hover, .cm-time.is-sel { background:var(--acc); color:#F4F6F3; border-color:var(--acc); }
.cm-cta { display:inline-block; background:#0B0C0E; color:#F4F4F2; font-size:13px; font-weight:600;
  padding:12px 22px; border-radius:3px; text-decoration:none; transition:background .3s; }
.cm-cta:hover { background:var(--acc); }
html.dark .cm-card { background:#16181B; }
html.dark .cm-month { color:#F4F4F2; }
html.dark .cm-grid .cm-day { color:#F4F4F2; }
html.dark .cm-grid .cm-day.is-off { color:rgba(244,244,242,.25); }
html.dark .cm-grid .cm-wd { color:rgba(244,244,242,.4); }
html.dark .cm-close { color:rgba(244,244,242,.6); }
html.dark .cm-cta { background:#F4F4F2; color:#0B0C0E; }
@media (max-width:720px) {
  .cm-card { grid-template-columns:1fr; width:min(94vw,420px); max-height:88vh; overflow:auto; }
  .cm-left { border-right:none; }
}

/* Grundflaechen & Text */
html.dark body { background:#0E0F11; }
html.dark #ldi-root { color:#F4F4F2 !important; }
html.dark #hero-map { background:#0E0F11; }
html.dark ::selection { background:#1a663f; color:#0B0C0E; }

/* Inline-Styles kippen: weisse Karten, dunkle Textfarben, Trennlinien */
html.dark [style*="background:#FFFFFF"],
html.dark [style*="background: rgb(255, 255, 255)"] { background:#16181B !important; border-color:rgba(244,244,242,.1) !important; }
html.dark [style*="background:#FAFAF9"],
html.dark [style*="background: rgb(250, 250, 249)"] { background:#1A1C20 !important; }
html.dark [style*="color:rgba(11,12,14"],
html.dark [style*="color: rgba(11, 12, 14"] { color:rgba(244,244,242,.7) !important; }
html.dark [style*="color:#0B0C0E"],
html.dark [style*="color: rgb(11, 12, 14)"] { color:#F4F4F2 !important; }
html.dark [style*="border-top:1px solid rgba(11,12,14"],
html.dark [style*="border-top: 1px solid rgba(11, 12, 14"] { border-top-color:rgba(244,244,242,.12) !important; }
html.dark [style*="border:1px solid rgba(11,12,14"],
html.dark [style*="border: 1px solid rgba(11, 12, 14"] { border-color:rgba(244,244,242,.12) !important; }
html.dark [style*="background:rgba(11,12,14"],
html.dark [style*="background: rgba(11, 12, 14"] { background:rgba(244,244,242,.12) !important; }

/* Logos (dunkle Wortmarken) -> weiss */
html.dark #nav-logo, html.dark .hero-brand-logo { filter:brightness(0) invert(1); }
html.dark .accent { color:#1a663f !important; }
html.dark .hero-eyebrow { color:rgba(244,244,242,.55); }
html.dark .hero-coords { color:rgba(244,244,242,.45); }
html.dark .hero-lead { color:rgba(244,244,242,.7); }
html.dark .hi-caret { background:#1a663f; }

/* Hero: Schleier + Raster in dunkel */
html.dark .hero-wash-h { background:linear-gradient(90deg, rgba(14,15,17,.98) 0%, rgba(14,15,17,.97) 28%, rgba(14,15,17,.6) 40%, rgba(14,15,17,.12) 48%, rgba(14,15,17,0) 53%); }
html.dark .hero-grid {
  background-image:
    linear-gradient(to right, rgba(244,244,242,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,244,242,.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(244,244,242,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,244,242,.03) 1px, transparent 1px);
}

/* Nav & Bedienelemente */
html.dark .nav-link { color:rgba(244,244,242,.72); }
html.dark .nav-link:hover { color:#F4F4F2; }
html.dark .lang-switch { border-color:rgba(244,244,242,.22); }
html.dark .lang-btn { color:rgba(244,244,242,.6); }
html.dark .lang-btn.is-active { background:#F4F4F2; color:#0B0C0E; }
html.dark #nav-cta { background:#F4F4F2; color:#0B0C0E; }
html.dark #nav-toggle { background:#F4F4F2; }
html.dark #nav-toggle span { background:#0B0C0E; }
html.dark.nav-open #nav-toggle { background:transparent; }
html.dark.nav-open #nav-toggle span { background:#F4F4F2; }
html.dark #rail-thumb { background-color:#F4F4F2 !important; }   /* -color: Shorthand wuerde background-clip resetten -> fetter Balken */

/* KI-Demo */
html.dark .kd-head { color:#F4F4F2; }
html.dark .kd-eyebrow { color:rgba(244,244,242,.7); }
html.dark .kd-prompt { background:#16181B; border-color:rgba(244,244,242,.14); box-shadow:0 14px 50px rgba(0,0,0,.5); }
html.dark .kd-input { color:#F4F4F2; }
html.dark .kd-send { background:#F4F4F2; color:#0B0C0E; }
html.dark .kd-run-title { color:rgba(244,244,242,.7); }
html.dark .kd-run-status { color:rgba(244,244,242,.45); }
html.dark .kd-run-head { border-bottom-color:rgba(244,244,242,.1); }
html.dark .kd-step { color:rgba(244,244,242,.4); }
html.dark .kd-step.kd-active { color:#F4F4F2; }
html.dark .kd-step.kd-done { color:rgba(244,244,242,.8); }
html.dark .kd-ic { border-color:rgba(244,244,242,.2); }
html.dark .kd-tile { background:#16181B; border-color:rgba(244,244,242,.1); }
html.dark .kd-tile-label { color:#1a663f; }
html.dark .kd-tile-kpi { color:#F4F4F2; }
html.dark .kd-tile-sub, html.dark .kd-list { color:rgba(244,244,242,.6); }
html.dark .kd-foot { color:rgba(244,244,242,.55); }
html.dark .kd-caret { background:#1a663f; }

/* Showcase: weisse/helle Flecken bleiben per Klasse hell (Bildwelt),
   Schatten dunkler Grund */
html.dark #wk-grid > .wk-item:not(.wk-spot) { filter:drop-shadow(0 3px 18px rgba(0,0,0,.5)); }

/* Referenzen-Grafiken im Dark Mode: Alpha-Stufen ERHALTEN (spaeter im File
   als das generische rgba(11,12,14)-Override -> gewinnt bei gleicher Spezifitaet) */
html.dark [style*="background:rgba(11,12,14,.06"],
html.dark [style*="background: rgba(11, 12, 14, 0.06"] { background:rgba(244,244,242,.09) !important; }
html.dark [style*="background:rgba(11,12,14,.08"],
html.dark [style*="background: rgba(11, 12, 14, 0.08"] { background:rgba(244,244,242,.12) !important; }
html.dark [style*="background:rgba(11,12,14,.1)"],
html.dark [style*="background: rgba(11, 12, 14, 0.1)"] { background:rgba(244,244,242,.14) !important; }
html.dark [style*="background:rgba(11,12,14,.12"],
html.dark [style*="background: rgba(11, 12, 14, 0.12"] { background:rgba(244,244,242,.16) !important; }
html.dark [style*="background:rgba(11,12,14,.16"],
html.dark [style*="background: rgba(11, 12, 14, 0.16"] { background:rgba(244,244,242,.22) !important; }
html.dark [style*="background:rgba(11,12,14,.32"],
html.dark [style*="background: rgba(11, 12, 14, 0.32"] { background:rgba(244,244,242,.4) !important; }

/* Tief-schwarze Chips/Linien kippen auf hell - Footer und Rail-Thumb bleiben */
html.dark [style*="background:#0B0C0E"]:not(footer):not(#rail-thumb):not(#of-sticky),
html.dark [style*="background: rgb(11, 12, 14)"]:not(footer):not(#rail-thumb):not(#of-sticky) { background:#F4F4F2 !important; }
html.dark [style*="background:#0B0C0E"][style*="color:#F4F4F2"]:not(footer),
html.dark [style*="background: rgb(11, 12, 14)"][style*="color: rgb(244, 244, 242)"]:not(footer) { color:#0B0C0E !important; }

/* Dunkle Panels/Karten heben sich vom dunklen Grund per feiner Kontur ab */
html.dark [style*="background:#0E0F11"], html.dark [style*="background:#101113"] { box-shadow:0 0 0 1px rgba(244,244,242,.09); }

/* =====================================================================
   POSITIONIERUNG als Blockquote: grosse Gaensefuesschen + Avatare rechts
===================================================================== */
/* Feiner Rahmen um das Zitat; die grossen Marken sitzen AUF dem Rahmen und
   durchbrechen ihn oben links / unten rechts (Hintergrund maskiert die Linie) */
.pq { position:relative; margin:0; border:10px solid rgba(11,12,14,.75);
  padding:clamp(38px,5vw,72px) clamp(30px,4.2vw,66px) clamp(30px,4vw,58px); }
.pq-body { position:relative; }
.pq-mark { position:absolute; font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(104px,10vw,168px); line-height:.62; color:var(--acc);
  background:#F2F2F1; padding:0 .1em; pointer-events:none; user-select:none; z-index:1; }
.pq-open { top:0; left:clamp(26px,4.5vw,64px); transform:translateY(-28%); }
.pq-close { bottom:0; right:clamp(26px,4.5vw,64px); transform:translateY(68%); }
/* Wie Sektion 04 (Arbeiten): rechte Kante buendig mit dem Dark-Mode-
   Button (fixed right:76px), solange die Rail sichtbar ist (>=980px) */
@media (min-width: 980px) {
  .pq { margin-right:calc(50% - 50vw + 76px); }
}
.pq-authors { display:flex; justify-content:flex-end; align-items:center; gap:clamp(26px,3.4vw,56px);
  margin:clamp(30px,2.6vh,46px) clamp(30px,3.5vw,60px) 0 0; flex-wrap:wrap; }
.pq-a { display:flex; align-items:center; gap:26px; }
.pq-a img { width:clamp(52px,4.8vw,68px); height:clamp(52px,4.8vw,68px); border-radius:50%;
  object-fit:cover; box-shadow:0 0 0 5px rgba(11,12,14,.07); }
.pq-a-txt { display:flex; flex-direction:column; gap:3px; }
.pq-a-name { font-size:clamp(13px,1.1vw,15px); font-weight:600; color:rgba(11,12,14,.8); white-space:nowrap; }
.pq-a-role { font-size:clamp(10.5px,.85vw,12px); font-weight:500; letter-spacing:.02em; color:rgba(11,12,14,.48); white-space:nowrap; }
html.dark .pq { border-color:rgba(244,244,242,.3); }
html.dark .pq-mark { color:#F4F4F2; background:#0E0F11; }
html.dark .pq-a img { box-shadow:0 0 0 5px rgba(244,244,242,.08); }
html.dark .pq-a-name { color:rgba(244,244,242,.85); }
html.dark .pq-a-role { color:rgba(244,244,242,.5); }
@media (max-width:720px) {
  .pq-authors { justify-content:flex-start; margin-right:0; gap:18px; }
}

/* ---- Termin-Modal: Host-Panel + Buchungsflow ---- */
.cm-avatar { width:clamp(64px,6vw,84px); height:clamp(64px,6vw,84px); border-radius:50%;
  object-fit:cover; box-shadow:0 0 0 5px rgba(244,246,243,.14); margin:6px 0 14px; display:block; }
.cm-host { margin:0; font-size:15px; font-weight:700; }
.cm-host-role { margin:3px 0 0; font-size:11.5px; color:rgba(244,246,243,.55); }
.cm-step { display:block; }
.cm-step[hidden] { display:none; }
.cm-chosen { margin:0 0 16px; font-size:13px; font-weight:700; color:var(--acc);
  background:rgba(5,51,43,.08); display:inline-block; padding:8px 14px; border-radius:999px; }
.cm-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cm-in { width:100%; box-sizing:border-box; margin-bottom:10px; appearance:none;
  font-family:inherit; font-size:14px; color:#0B0C0E;
  background:#FFFFFF; border:1px solid rgba(11,12,14,.16); border-radius:8px;
  padding:13px 15px; transition:border-color .25s, box-shadow .25s; }
.cm-in:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(5,51,43,.12); }
.cm-in::placeholder { color:rgba(11,12,14,.38); }
.cm-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; }
.cm-back { appearance:none; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:rgba(11,12,14,.55); padding:10px 0; }
.cm-back:hover { color:#0B0C0E; }
.cm-cta { appearance:none; border:none; cursor:pointer; font-family:inherit; }
.cm-done { text-align:center; padding:clamp(10px,2vw,24px) 0; }
.cm-done-ic { width:58px; height:58px; border-radius:50%; background:var(--acc); color:#F4F6F3;
  display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.cm-done-title { margin:0 0 10px; font-size:clamp(20px,2vw,26px); font-weight:700; }
.cm-done-sub { margin:0 0 6px; font-size:14px; line-height:1.6; color:rgba(11,12,14,.7); }
.cm-done-note { margin:0 0 20px; font-size:12.5px; color:rgba(11,12,14,.5); }
html.dark .cm-chosen { color:#1a663f; background:rgba(111,191,155,.12); }
html.dark .cm-in { background:#0E0F11; border-color:rgba(244,244,242,.18); color:#F4F4F2; }
html.dark .cm-in::placeholder { color:rgba(244,244,242,.35); }
html.dark .cm-in:focus { border-color:#1a663f; box-shadow:0 0 0 3px rgba(111,191,155,.14); }
html.dark .cm-back { color:rgba(244,244,242,.55); }
html.dark .cm-back:hover { color:#F4F4F2; }
html.dark .cm-done-title { color:#F4F4F2; }
html.dark .cm-done-sub { color:rgba(244,244,242,.7); }
html.dark .cm-done-note { color:rgba(244,244,242,.5); }
html.dark #cal-modal { color:#F4F4F2; }

/* Blinkender Cursor-Strich am Titel-Ende */
.hero-caret { display:inline-block; width:.09em; height:.78em; margin-left:.14em; vertical-align:-.04em;
  background:var(--acc); animation:kd-blink 1.1s steps(1) infinite; }
html.dark .hero-caret { background:#1a663f; }

/* ---- Hero-Proof: "Weil Erfahrung zaehlt!" + rotierende Kundenlogos ---- */
.hero-proof { margin:clamp(28px,4.2vh,48px) 0 0 17px; }
.hero-proof-h { margin:0 0 14px; font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(11,12,14,.45); }
.hero-proof-logos { display:flex; align-items:center; gap:clamp(26px,3vw,46px);
  height:42px; opacity:0; transition:opacity .7s ease; }
.hero-proof-logos.is-in { opacity:1; }
.hero-proof-logos img { width:auto; display:block; filter:grayscale(1); opacity:.55; }
html.dark .hero-proof-h { color:rgba(244,244,242,.45); }
html.dark .hero-proof-logos img { filter:grayscale(1) brightness(0) invert(1); opacity:.5; }
html.hi-run .hero-proof { opacity:0; transform:translateY(14px); transition:opacity .6s ease .15s, transform .6s cubic-bezier(.22,.7,.2,1) .15s; }
html.hi-acts .hero-proof { opacity:1; transform:none; }

/* Weisse Logo-Assets (z. B. UKT) im Hellmodus auf dunkel ziehen */
.hero-proof-logos img.logo-inv { filter:grayscale(1) brightness(0); }

/* ══════════ Herkunft: Kupferstich als dezenter Background ══════════ */
.hk-etch {
  position:absolute; inset:0; pointer-events:none;
  background:url("../cases/kupferstich.jpg") center 30% / cover no-repeat;
  filter:grayscale(1) invert(1) brightness(1.05) contrast(1.08);
  mix-blend-mode:screen;
  opacity:.16;
}
.hk-etch::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 95% at 50% 45%, rgba(5,51,43,0) 42%, rgba(5,51,43,.8) 100%);
  mix-blend-mode:multiply;
}

/* ══════════ Office: Foto-Strip (Marquee) ══════════ */
.of-track {
  display:flex; align-items:stretch;
  gap:clamp(10px,1.2vw,18px);
  width:max-content;
  will-change:transform;
}
.of-track img {
  height:clamp(340px,74vh,820px); width:auto; display:block;
  object-fit:cover; flex:0 0 auto;
  filter:grayscale(.35) contrast(1.02);
  transition:filter .45s ease;
}
.of-track img:hover { filter:none; }


/* ══════════ Hero-Map: Google-Attribution ausblenden ══════════ */
#hero-map .gm-style-cc,
#hero-map-sat .gm-style-cc,
#hero-map .gmnoprint,
#hero-map-sat .gmnoprint,
#hero-map-sat a[href^="https://maps.google"],
#hero-map-sat a[href^="https://www.google.com/maps"],
#hero-map-sat img[alt="Google"],
#hero-map a[href^="https://maps.google"],
#hero-map a[href^="https://www.google.com/maps"],
#hero-map img[alt="Google"] { display:none !important; }

/* ══════════ Referenz-Sequenz (03): Mobile laeuft vertikal ══════════ */
@media (max-width: 720px) {
  #hs-wrap { height: auto !important; }
  #hs-sticky { position: static !important; height: auto !important; overflow: visible !important; padding: 8px 0 40px; }
  #hs-track { transform: none !important; width: auto !important; flex-direction: column; gap: 16px; padding: 0 16px; }
  #hs-track article[data-panel] {
    width: 100% !important; height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 20px !important; gap: 20px !important;
  }
  /* Mockup-Spalte braucht ohne feste Panelhoehe eine Mindesthoehe */
  #hs-track article[data-panel] > div:last-child { min-height: 320px; }
  /* Fortschrittsleiste/Zaehler entfallen im vertikalen Fluss */
  #hs-sticky > div:last-child { display: none; }
}

/* ══════════ Mobile: zweispaltige Sektions-Header stapeln ══════════ */
@media (max-width: 940px) {
  /* Headline + Intro nebeneinander -> untereinander, volle Breite */
  [style*="grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)"] {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 18px !important;
  }
  /* Gestapelte Sticky-Spalten (Warum Mittelstand) klebten sonst fest,
     und der Rest scrollte dahinter durch */
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)"] > div[style*="position:sticky"] {
    position: static !important;
  }
  /* Footer: Spalten -> eine, Logo-Block gestapelt linksbuendig */
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer[data-screen-label="Footer"] [style*="justify-self:end"] { justify-self: start !important; }
}

/* ══════════ Mobile: Leistungs-Zeilen (06) stapeln ══════════ */
@media (max-width: 940px) {
  [style*="minmax(0,1.1fr) minmax(0,1.3fr) 40px"] {
    grid-template-columns: 30px minmax(0,1fr) 26px !important;
    align-items: start !important;
    gap: 6px 12px !important;
  }
  /* Beschreibung unter den Titel (Spalte 2, zweite Zeile) */
  [style*="minmax(0,1.1fr) minmax(0,1.3fr) 40px"] > :nth-child(3) {
    grid-column: 2 / 3;
  }
  /* Pfeil rechts oben in der Zeile */
  [style*="minmax(0,1.1fr) minmax(0,1.3fr) 40px"] > :nth-child(4) {
    grid-row: 1; grid-column: 3;
  }
}

/* Kennzahlen in den Referenz-Panels: System-Helvetica (wie vor der
   Webfont-Umstellung), Einheiten kleiner */
#hs-track [style*="font-size:clamp(28px,2.6vw,44px)"],
#hs-track [style*="font-size:clamp(40px,4vw,68px)"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#hs-track .pct { font-size: .58em; font-weight: 700; }

/* Panel-Titel in den Referenzen: eine Stufe fetter (Display Black) */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplayBlack/font.woff2") format("woff2"),
       url("../fonts/HelveticaNowDisplayBlack/font.woff") format("woff");
  font-weight: 901 950; font-style: normal; font-display: swap;
}
#hs-track article[data-panel] h3 { font-weight: 800 !important; }

/* Herkunft-Statement (gruenes Band): fett wie die Sektions-Headlines */
[data-i18n="t118"] {
  font-family: "Helvetica Now Display", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800 !important;
}

/* ══════════ Footer-Isar (Alpenvorland) ══════════ */
#isar-flow-footer { position:absolute; inset:0; pointer-events:none; z-index:1; }
#isar-flow-footer canvas { position:absolute; inset:0; width:100%; height:100%; }
/* Footer-Inhalt liegt ueber dem Fluss */
footer[data-screen-label="Footer"] > div { position:relative; z-index:2; }

/* ══════════ Footer-Riesenrad: blinkende Lichter ══════════ */
@keyframes rrBlink { 0%, 100% { opacity: .12; } 50% { opacity: .95; } }
#footer-city .rr-light { animation: rrBlink 1.8s ease-in-out infinite; }

/* ══════════ Friedensengel-Springbrunnen: pulsierende Fontaene ══════════ */
#footer-city .fe-jet {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: feJet 2.6s ease-in-out infinite;
}
@keyframes feJet {
  0%, 100% { transform: scaleY(.72); opacity: .45; }
  50%      { transform: scaleY(1.04); opacity: .85; }
}

/* ══════════ Wiesn-Rauch: aufsteigende Schwaden ══════════ */
#footer-city .of-smoke {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: ofSmoke 6.5s linear infinite;
}
@keyframes ofSmoke {
  0%   { transform: translateY(0) scale(.55); opacity: .30; }
  70%  { opacity: .12; }
  100% { transform: translateY(-30px) scale(1.5); opacity: 0; }
}

/* ══════════ Mobile: Footer-Landschaft/Animation ausblenden ══════════ */
@media (max-width: 720px) {
  #isar-flow-footer, #footer-city { display: none !important; }
}

/* ══════════ KI-Demo: Upload-Chip IM Eingabefeld (ChatGPT-Stil) ══════════ */
.kd-input { position:relative; padding-bottom:52px !important; }
.kd-attach {
  position:absolute; left:16px; bottom:12px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:rgba(11,12,14,.62);
  background:rgba(5,51,43,.07); border:1px solid rgba(5,51,43,.16);
  border-radius:6px; padding:7px 12px;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.7,.2,1);
  pointer-events:none;
}
.kd-attach-on .kd-attach { opacity:1; transform:none; }
/* Upload-Spinner: laeuft, bis der Haken kommt */
.kd-spin {
  width:12px; height:12px; border-radius:50%;
  border:2px solid rgba(5,51,43,.25); border-top-color:var(--acc);
  animation:kdSpin .7s linear infinite;
}
@keyframes kdSpin { to { transform:rotate(360deg); } }
.kd-clip { opacity:.55; }
.kd-attach-ok { display:none; margin-left:4px; color:var(--acc); }
.kd-attach-ok-on .kd-spin { display:none; }
.kd-attach-ok-on .kd-attach-ok { display:inline-flex; }
html.dark .kd-attach { color:rgba(244,244,242,.7); background:rgba(111,191,155,.10); border-color:rgba(111,191,155,.25); }
html.dark .kd-attach-ok { color:#1a663f; }
html.dark .kd-spin { border-color:rgba(111,191,155,.25); border-top-color:#1a663f; }

/* Download-Button in der Angebots-Kachel */
.kd-download {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:var(--acc); color:#F4F6F3; font-size:13px; font-weight:600;
  padding:11px 18px; border-radius:3px; text-decoration:none;
  transition:background .3s;
}
.kd-download:hover { background:#0B0C0E; }
html.dark .kd-download { background:#1a663f; color:#0B0C0E; }
html.dark .kd-download:hover { background:#F4F4F2; }

/* ══════════ 04 Arbeiten - Sticky-Karten in Container-Breite ══════════
   Jedes Projekt ist eine Karte, die sich beim Scrollen unter die
   naechste schiebt (wie 05 Kompetenz) - ruhig und aufgeraeumt.
   Buendig mit Logo/Nav; -15px gleicht den unsichtbaren Kartenrahmen
   aus, damit die SICHTBARE Kante mit dem Container fluchtet. */
#pl-list {
  margin:0 -15px;
  padding:0 0 clamp(60px,8vw,120px);
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:0;
}
/* Ab Rail-Sichtbarkeit (main.js blendet die Rail unter 980px aus):
   rechte SICHTBARE Kante buendig mit dem Dark-Mode-Button (fixed right:76px),
   damit die Rail-Nummern rechts frei bleiben. 61px = 76px - 15px Rahmen. */
@media (min-width: 980px) {
  #pl-list { margin-right:calc(50% - 50vw + 61px); }
}

/* 03 Referenzen-Slider: Padding statt inline, damit Start-/Endlage per
   Breakpoint steuerbar ist. Ab 980px: erstes Panel startet buendig mit
   Logo/Container, letztes Panel endet buendig mit dem Dark-Mode-Button. */
#hs-track { padding:0 clamp(20px,4vw,48px); }
@media (min-width: 980px) {
  #hs-track { padding:0 76px 0 max(clamp(20px,4vw,48px), calc((100vw - 1320px)/2)); }
}

/* Kompetenz-Karten: rechte Kante buendig mit dem Dark-Mode-Button
   (Selektor ueber data-screen-label statt Rail-Nummer - bleibt auch
   bei umsortierten Sektionen stabil) */
@media (min-width: 980px) {
  section[data-screen-label="Kompetenz"] > div > article { margin-right:calc(50% - 50vw + 76px); }
}
.pl-item {
  position:sticky;
  border-radius:8px; overflow:hidden;
  background:#0B0C0E;
  border:15px solid #F2F2F1;              /* weisser Rahmen: gestapelte Kanten bleiben sauber */
  box-sizing:border-box;
  margin-bottom:22px;
  height:clamp(540px,80vh,860px);
}
html.dark .pl-item { border-color:#0E0F11; }
.pl-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1.06); will-change:transform;
}
/* Mercedes-Karte: subtiles Leben in der Bubble-Grafik des Fahrzeug-Displays.
   Additive Lichtebene (screen-Blend) ueber dem Ken-Burns-Hintergrund:
   zwei weich pulsierende Glows + drei langsam aufsteigende Mini-Blasen.
   Rein dekorativ, nur transform/opacity, kein Einfluss aufs Layout. */
.pl-live { position:absolute; z-index:3; left:38%; top:12%; width:46%; height:64%; pointer-events:none; mix-blend-mode:screen; }
.pl-live i { position:absolute; border-radius:50%; will-change:transform,opacity; }
.pl-live i:nth-child(1) { left:18%; top:14%; width:64%; height:64%; background:radial-gradient(circle, rgba(96,190,255,.45), transparent 62%); filter:blur(6px); animation:plv-pulse 9s ease-in-out infinite alternate; }
.pl-live i:nth-child(2) { left:30%; top:30%; width:44%; height:44%; background:radial-gradient(circle, rgba(140,235,220,.38), transparent 60%); filter:blur(8px); animation:plv-pulse 13s ease-in-out -4s infinite alternate-reverse; }
.pl-live i:nth-child(3) { left:8%; top:36%; width:38%; height:38%; background:radial-gradient(circle, rgba(80,160,255,.30), transparent 60%); filter:blur(10px); animation:plv-pulse 11s ease-in-out -7s infinite alternate; }
.pl-live i:nth-child(4) { left:26%; top:66%; width:7%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(190,235,255,.6), rgba(90,180,255,.18) 60%, transparent 72%); filter:blur(1px); animation:plv-float 11s ease-in-out infinite; }
.pl-live i:nth-child(5) { left:64%; top:72%; width:5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(190,235,255,.55), rgba(120,200,255,.15) 60%, transparent 72%); filter:blur(1px); animation:plv-float 14s ease-in-out -5s infinite; }
.pl-live i:nth-child(6) { left:47%; top:80%; width:4%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(200,245,235,.5), rgba(120,220,200,.15) 60%, transparent 72%); filter:blur(1px); animation:plv-float 17s ease-in-out -9s infinite; }
.pl-live i:nth-child(7) { left:15%; top:58%; width:5.5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(170,225,255,.55), rgba(90,180,255,.15) 60%, transparent 72%); filter:blur(1px); animation:plv-float 13s ease-in-out -2s infinite; }
.pl-live i:nth-child(8) { left:76%; top:62%; width:3.5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(200,240,255,.5), rgba(130,200,255,.14) 60%, transparent 72%); filter:blur(1px); animation:plv-float 16s ease-in-out -11s infinite; }
.pl-live i:nth-child(9) { left:38%; top:74%; width:3%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(190,245,240,.5), rgba(120,220,210,.14) 60%, transparent 72%); filter:blur(1px); animation:plv-float 19s ease-in-out -14s infinite; }
.pl-live i:nth-child(10) { left:33%; top:70%; width:6%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(180,230,255,.5), rgba(100,190,255,.15) 60%, transparent 72%); filter:blur(1px); animation:plv-float 12s ease-in-out -8s infinite; }
.pl-live i:nth-child(11) { left:56%; top:76%; width:4.5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(195,240,250,.52), rgba(110,200,240,.15) 60%, transparent 72%); filter:blur(1px); animation:plv-float 15s ease-in-out -3s infinite; }
.pl-live i:nth-child(12) { left:70%; top:68%; width:5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(180,235,255,.5), rgba(100,190,255,.14) 60%, transparent 72%); filter:blur(1px); animation:plv-float 18s ease-in-out -12s infinite; }
.pl-live i:nth-child(13) { left:21%; top:78%; width:3.5%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(200,240,255,.48), rgba(130,205,255,.14) 60%, transparent 72%); filter:blur(1px); animation:plv-float 21s ease-in-out -6s infinite; }
.pl-live i:nth-child(14) { left:84%; top:74%; width:2.8%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, rgba(190,240,245,.46), rgba(115,210,225,.13) 60%, transparent 72%); filter:blur(1px); animation:plv-float 16s ease-in-out -10s infinite; }
@keyframes plv-pulse { from { transform:scale(.96); opacity:.55; } to { transform:scale(1.05); opacity:1; } }
@keyframes plv-float {
  0% { transform:translate3d(0,0,0); opacity:0; }
  12% { opacity:.85; }
  60% { opacity:.55; }
  100% { transform:translate3d(60%,-420%,0); opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .pl-live i { animation:none; } .pl-live i:nth-child(n+4) { display:none; } }


/* Mercedes-Karte: schwebende Kacheln unten buendig mit dem Textblock links
   (gleicher Anker wie .pl-foot statt bottom:18px) */
.pl-item[data-case="mercedes"] .pl-comp { bottom:clamp(20px,2.8vw,48px); }

/* PASSNGR-Karte: schwebendes Phone + Logo, unten buendig mit der
   Bildunterkante (bottom:0 = Innenkante des weissen Kartenrahmens) */
.pl-float { position:absolute; z-index:3; right:clamp(20px,5vw,96px); bottom:0; height:52%; width:auto; pointer-events:none; }
@media (max-width: 940px) { .pl-float { display:none; } }

/* Zeppelin-Karte: zwei gleich grosse schwebende Kacheln rechts -
   oben das Berichte-Dashboard, darunter die Scan-Animation (iframe,
   halbiert skaliert; Phone beginnt 10px unter der Kachelkante und
   wird unten beschnitten: top = 10px + 144px - 100% Kachelhoehe) */
.pl-comp-zp2 { flex-direction:column; align-items:stretch; gap:12px; right:clamp(24px,6vw,110px); bottom:9%; width:clamp(190px,16.5vw,260px); }
.zp2-tile { position:relative; width:100%; aspect-ratio:1400/880; border-radius:8px; overflow:hidden;
  background:#FFFFFF; box-shadow:0 16px 44px rgba(5,10,9,.35); }
.zp2-tile img { display:block; width:100%; height:auto; }
.zp2-anim iframe { position:absolute; left:0; top:calc(154px - 100%); width:200%; height:400%; border:0;
  transform:scale(.5); transform-origin:top left; pointer-events:none; }
.pl-shade {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,10,9,.42) 0%, rgba(5,10,9,0) 32%, rgba(5,10,9,0) 52%, rgba(5,10,9,.62) 100%);
}
.pl-head {
  position:absolute; z-index:4; left:clamp(22px,3vw,52px); top:clamp(20px,2.6vw,44px);
  display:flex; align-items:baseline; gap:18px;
}
.pl-foot {
  position:absolute; z-index:4; left:clamp(22px,3vw,52px); right:clamp(22px,3vw,52px); bottom:clamp(20px,2.8vw,48px);
  pointer-events:none;
  display:flex; align-items:flex-end; justify-content:flex-start; gap:clamp(28px,4vw,64px);
}
.pl-foot a { pointer-events:auto; }
.pl-foot-txt h3 { margin:0; color:#F4F6F3; font-size:clamp(26px,2.9vw,48px); font-weight:700; line-height:1.08; max-width:720px; }
.pl-inset {
  position:absolute; z-index:3; right:clamp(22px,3vw,52px);
  width:clamp(150px,17vw,280px);
  border-radius:6px; overflow:hidden;
  box-shadow:0 18px 50px rgba(5,10,9,.45);
}
.pl-inset img { width:100%; height:clamp(100px,12vw,180px); object-fit:cover; display:block; }
.pl-inset-1 { top:clamp(84px,10vw,150px); }
.pl-inset-2 { top:calc(clamp(84px,10vw,150px) + clamp(116px,13.6vw,204px)); }
.pli-dark { background:#0B0C0E; }
.pli-dark img { object-fit:contain; padding:10px; box-sizing:border-box; }
.pli-phone { width:clamp(120px,11vw,180px); border-radius:18px; border:6px solid #101215; background:#101215; }
.pli-phone img { height:clamp(200px,22vw,320px); }
.pli-tablet { width:clamp(200px,20vw,320px); border-radius:14px; border:7px solid #101215; background:#101215; }
.pli-tablet img { height:clamp(140px,14vw,220px); }
.pl-item { top:84px; }
html.dark .pl-item { background:#0B0C0E; border-color:#0B0C0E; }
/* ungerade: Bild LINKS, Text rechts - gerade: gespiegelt */
.pl-item .pl-text { grid-column:8 / span 5; text-align:left; order:2; }
.pl-item .pl-mediae { grid-column:1 / span 7; order:1; }
.pl-item:nth-child(even) .pl-text { grid-column:1 / span 5; text-align:right; order:1; }
.pl-item:nth-child(even) .pl-mediae { grid-column:6 / span 7; order:2; }
.pl-idx { display:block; font-size:14px; font-weight:700; letter-spacing:.08em; line-height:1; color:rgba(244,246,243,.75); font-variant-numeric:tabular-nums; }
.pl-text h3 { margin:0; font-size:clamp(30px,3.4vw,56px); font-weight:700; line-height:1.06; }
.pl-eyebrow { margin:0; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,246,243,.65); }
.pl-sub { margin:10px 0 0; font-size:13px; line-height:1.6; color:rgba(11,12,14,.5); }
.pl-item .pl-sub { max-width:560px; margin-right:auto; }
.pl-item:nth-child(even) .pl-sub { margin-right:0; margin-left:auto; }
.pl-media {
  display:block; overflow:hidden; background:#0B0C0E;
  transform:scale(.92); will-change:transform;
}
.pl-media img {
  width:100%; height:clamp(260px,46vh,480px); object-fit:cover; display:block;
  transform:scale(1.08); will-change:transform;
}
html.dark .pl-eyebrow { color:rgba(244,244,242,.45); }
html.dark .pl-sub { color:rgba(244,244,242,.55); }
html.dark .pl-idx { color:rgba(244,244,242,.3); }
@media (max-width: 940px) {
  .pl-item { height:clamp(420px,62vh,620px); }
  .pl-inset, .pl-inset-2 { display:none; }
  .pl-foot { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Editorial-Bausteine (Ambiq-Stil) */
.pl-side { margin-top:clamp(26px,3.4vw,52px); }
.pl-item .pl-side { margin-right:auto; max-width:min(360px,86%); }
.pl-item:nth-child(even) .pl-side { margin-right:0; margin-left:auto; }
.pl-side img { width:100%; height:clamp(160px,22vh,240px); object-fit:cover; display:block; will-change:transform; }
.pl-media-sm { width:58%; margin-top:clamp(18px,2.6vw,40px); }
.pl-media-sm img { height:clamp(160px,26vh,300px) !important; }
.pl-media-sm { margin-left:auto; }
.pl-item:nth-child(even) .pl-media-sm { margin-left:0; margin-right:auto; }
.pl-vid video { width:100%; height:clamp(260px,46vh,480px); object-fit:cover; display:block; transform:scale(1.12); will-change:transform; }
html.dark .pl-idx { color:rgba(244,244,242,.35); }
@media (max-width: 940px) {
  .pl-item .pl-mediae, .pl-item:nth-child(even) .pl-mediae { order:1; }
  .pl-item .pl-side { margin-left:0; max-width:100%; }
  .pl-media-sm { width:100%; }
}

/* Editorial-Texte pro Projekt (Ambiq-Duktus) */
.pl-sub { font-size:clamp(14px,1.15vw,17px) !important; color:rgba(244,246,243,.72) !important; line-height:1.55 !important; margin:10px 0 0 !important; max-width:560px; }
.pl-body { margin:14px 0 0; font-size:14px; line-height:1.75; color:rgba(11,12,14,.55); }
.pl-item .pl-body { max-width:520px; margin-right:auto; }
.pl-item:nth-child(even) .pl-body { margin-right:0; margin-left:auto; }
.pl-tags { margin:18px 0 0; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,12,14,.38); }
html.dark .pl-sub { color:rgba(244,244,242,.7) !important; }
html.dark .pl-body { color:rgba(244,244,242,.55); }
html.dark .pl-tags { color:rgba(244,244,242,.38); }

/* "Zum Projekt"-Button (rundes Icon + Label, Ambiq-Anmutung) */
.pl-more {
  display:inline-flex; align-items:center; gap:14px;
  font-size:14px; font-weight:700; color:#F4F6F3; text-decoration:none;
  white-space:nowrap;
}
.pl-more-ic {
  width:48px; height:48px; border-radius:50%;
  background:#0B0C0E; color:#F4F6F3;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.7,.2,1);
}
.pl-more-ic i { transform:rotate(-45deg); }
.pl-more:hover .pl-more-ic { transform:scale(1.06); }
.pl-more:hover .pl-more-ic i { animation:plShoot .5s cubic-bezier(.4,0,.2,1); }
@keyframes plShoot {
  0%   { transform:translate(0,0) rotate(-45deg); opacity:1; }
  45%  { transform:translate(150%,-150%) rotate(-45deg); opacity:0; }
  50%  { transform:translate(-150%,150%) rotate(-45deg); opacity:0; }
  100% { transform:translate(0,0) rotate(-45deg); opacity:1; }
}
/* Dark Mode: Buttons bleiben schwarz wie im Light Mode */

/* Kundenlogo im grossen Bild */
.pl-media { position:relative; }
.pl-logo {
  position:absolute; left:clamp(18px,2.4vw,36px); top:clamp(18px,2.4vw,36px);
  height:clamp(26px,2.6vw,42px); width:auto; z-index:3;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.pl-logo-inv { filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.35)); }

/* Gruener Design-Overlay - verschwindet am Scrollpunkt */
.pl-tint {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--acc); opacity:.92; will-change:opacity;
}
.pl-side { position:relative; overflow:hidden; }

/* Geraeterahmen fuer App-Showcases */
.pl-device { border-radius:22px; border:8px solid #101215; background:#101215; box-shadow:0 18px 50px rgba(11,12,14,.28); }
.pl-device img { border-radius:12px; }
.pl-device--phone { width:min(250px,58%) !important; }
.pl-device--phone img { height:clamp(300px,42vh,480px) !important; }
.pl-device--tablet { width:min(420px,72%) !important; }
.pl-device--tablet img { height:clamp(240px,34vh,380px) !important; }

/* Bildunterschriften: geben den Zweitmedien Kontext (Ambiq-Duktus) */
.pl-medcap { margin:10px 0 0; font-size:12px; line-height:1.5; color:rgba(11,12,14,.45); }
.pl-mediae .pl-medcap { max-width:520px; }
.pl-item .pl-medcap-side { max-width:min(360px,86%); margin-right:auto; }
.pl-item:nth-child(even) .pl-medcap-side { margin-right:0; margin-left:auto; text-align:right; }
html.dark .pl-medcap { color:rgba(244,244,242,.45); }

/* ══════════ Mercedes-Case: Mosaik-Komposition + Projektlogik-Karte ══════════ */
.plx-row { display:flex; gap:clamp(12px,1.6vw,22px); margin-top:clamp(12px,1.6vw,22px); }
.plx-grow { flex:1.6; }
.plx-tile img { height:clamp(150px,24vh,260px) !important; }
.plx-logocard { flex:1; background:#0B0C0E; display:flex; align-items:center; justify-content:center; }
.plx-logocard .plx-logo {
  height:clamp(34px,3.4vw,54px) !important; width:auto !important; object-fit:contain;
  filter:brightness(0) invert(1);
}
.plx-icons { margin-top:clamp(12px,1.6vw,22px); background:#0B0C0E; }
.plx-icons img { object-fit:contain !important; padding:clamp(10px,1.4vw,20px); box-sizing:border-box; height:clamp(120px,18vh,200px) !important; }
.pl-note {
  margin-top:clamp(28px,3.6vw,52px); padding:clamp(22px,2.6vw,36px);
  background:#FFFFFF; border:1px solid rgba(11,12,14,.08); border-radius:14px;
  max-width:420px; margin-right:auto;
}
.pl-item:nth-child(even) .pl-note { margin-right:0; margin-left:auto; }
.pl-note-logo {
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:12px; background:#0B0C0E; margin-bottom:16px;
}
.pl-note-logo img { height:30px; width:auto; filter:brightness(0) invert(1); }
.pl-note h4 { margin:0 0 8px; font-size:clamp(18px,1.6vw,24px); font-weight:700; }
.pl-note p { margin:0; font-size:13px; line-height:1.65; color:rgba(11,12,14,.55); }
html.dark .pl-note { background:#16181B; border-color:rgba(244,244,242,.1); }
html.dark .pl-note p { color:rgba(244,244,242,.55); }

/* Kundenlogo ueber der Karten-Headline */
.pl-cardlogo { display:block; height:clamp(22px,2.4vw,38px); width:auto; margin-bottom:clamp(12px,1.6vw,22px); filter:drop-shadow(0 2px 8px rgba(5,10,9,.4)); }
.pl-cardlogo-inv { filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(5,10,9,.4)); }
.pl-item[data-case="heineken"] .pl-cardlogo { height:clamp(16px,1.8vw,28px); }
.pl-item[data-case="balluff"] .pl-cardlogo { height:clamp(16px,1.8vw,28px); }
/* Festzelt: goldenes Oktoberfest-Logo auf weisser Kachel, unter der 05-Zeile */
.fz-logobox {
  position:absolute; z-index:4;
  right:clamp(0px,3vw,32px);
  top:48%;
  width:clamp(160px,14vw,228px);
  filter:drop-shadow(0 4px 18px rgba(5,10,9,.45));
}
.fz-logobox img { display:block; width:100%; height:auto; }
/* Festzelt-Karte: schwebendes Tablet unter dem Logo, rechtsbuendig */
.fz-float { position:absolute; z-index:3; right:clamp(0px,3vw,32px); top:59%;
  width:clamp(200px,17.5vw,285px); filter:drop-shadow(0 18px 44px rgba(5,10,9,.45)); pointer-events:none; }
@media (max-width: 940px) { .fz-float, .fz-logobox { display:none; } }

/* Subtitle + Button als zwei Spalten unter der Headline */
.pl-item > .pl-more { position:absolute; z-index:4; right:clamp(22px,3vw,52px); top:clamp(20px,2.6vw,44px); }
.pl-foot-txt .pl-sub { margin:12px 0 0; }

/* Mercedes-Komposition: Companion-App freigestellt ganz rechts,
   Icons links versetzt, Tacho neben der App */
.pli-app {
  right:clamp(18px,2.6vw,46px); top:12%;
  width:clamp(200px,20vw,330px);
  background:none; border-radius:0; overflow:visible; box-shadow:none;
}
.pli-app img { height:auto !important; object-fit:contain; filter:drop-shadow(0 26px 60px rgba(0,0,0,.55)); }
.pli-shift { right:calc(clamp(18px,2.6vw,46px) + clamp(210px,21vw,350px)); }
.pli-left { left:clamp(22px,3vw,52px); right:auto; top:36%; }
@media (max-width: 940px) { .pli-app, .pli-shift, .pli-left { display:none; } }

/* Mercedes: rechts Tacho, darunter Black-Container mit 50% + Phone,
   links davon die Icons */
.pl-comp {
  position:absolute; z-index:3;
  right:clamp(0px,3vw,32px); bottom:18px;
  display:flex; align-items:flex-end; gap:clamp(12px,1.4vw,20px);
}
.pl-comp-tile {
  border-radius:6px; overflow:hidden;
  box-shadow:0 16px 44px rgba(5,10,9,.45);
}
.pl-comp-tile img { display:block; width:clamp(190px,17vw,270px); height:clamp(115px,11vw,165px); object-fit:cover; }
.pl-comp-dark { background:#050607; }
.pl-comp-dark img { object-fit:contain; padding:10px; box-sizing:border-box; }
.pl-comp-col { display:flex; flex-direction:column; gap:clamp(12px,1.4vw,20px); }
.pl-comp-col .pl-comp-tile img { width:clamp(220px,20vw,320px); }
.pl-comp-black {
  background:#050607; border-radius:6px;
  box-shadow:0 16px 44px rgba(5,10,9,.45);
  padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) clamp(10px,1.2vw,16px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.2vw,16px);
  width:clamp(220px,20vw,320px); box-sizing:border-box;
}
.pl-comp-fifty { display:block; width:92%; height:auto; }
.pl-comp-phone { display:block; width:86%; height:auto; }
.pl-comp-side { display:flex; flex-direction:column; align-items:center; }
.pl-comp-cap {
  margin:10px 0 0; font-size:11px; line-height:1.4; letter-spacing:.04em;
  color:rgba(255,255,255,.72); text-align:center; white-space:nowrap;
}
.pl-comp-black .pl-comp-cap { margin-top:4px; }
/* DOLL: zwei Projekt-Screens nebeneinander unten rechts */
.pl-comp-doll { bottom:clamp(28px,3vw,52px); gap:clamp(14px,1.6vw,24px); }

/* UKT: ein breiter Screen, buendig unten rechts an der Kartenkante */
.pl-comp-ukt { bottom:0; right:0; align-items:flex-end; }
.ukt-shot { background:transparent; border-radius:6px 0 0 0; }
.ukt-shot img { width:clamp(420px,50vw,1000px); height:auto; object-fit:contain; display:block; }

/* SWM: zwei grosse Dashboard-Screens rechts, ohne dunklen Container,
   unten buendig ausgerichtet */
.pl-comp-swm { bottom:clamp(28px,3vw,52px); align-items:flex-end; gap:clamp(14px,1.6vw,24px); }
.swm-shot { background:transparent; }
.swm-shot img { width:clamp(240px,24vw,400px); height:auto; object-fit:contain; }

/* Heineken: zwei gruene Container rechts, vertikal zentriert */
.pl-comp-hei { bottom:clamp(28px,3vw,52px); flex-direction:column; align-items:flex-end; gap:clamp(12px,1.4vw,20px); }
.hei-tile img { width:clamp(140px,12vw,190px); height:clamp(140px,12vw,190px); object-fit:cover; }

/* BALLUFF: German Design Award 2018 auf weisser Kachel - gleich gross wie
   das Detail-Foto und direkt darunter, rechtsbuendig auf derselben Kante */
.pl-comp-bal {
  bottom:auto; top:calc(clamp(84px,10vw,150px) + clamp(116px,13.6vw,204px));
  right:clamp(22px,3vw,52px);
}
.bal-award {
  background:#FFFFFF; box-sizing:border-box;
  width:clamp(170px,17vw,280px); height:clamp(100px,12vw,180px);
  display:flex; align-items:center; justify-content:center;
}
.bal-award img { display:block; width:72%; height:auto; }
.pl-item[data-case="balluff"] .pl-inset { width:clamp(170px,17vw,280px); }
.pl-item[data-case="balluff"] .pl-inset img { height:clamp(100px,12vw,180px); }

/* Festzelt OS: dunkles Notebook-Mockup */

/* LUXHAUS: zwei Kacheln unten rechts (wie Heineken) */
.pl-comp-lux { bottom:clamp(28px,3vw,52px); align-items:flex-end; gap:clamp(14px,1.6vw,24px); }
.lux-tile img { width:clamp(200px,17vw,270px); height:clamp(140px,12vw,190px); object-fit:cover; object-position:center top; }
.pl-item[data-case="luxhaus"] .pl-cardlogo { height:clamp(16px,1.8vw,28px); }
.pl-item[data-case="swm"] .pl-cardlogo { height:clamp(26px,2.9vw,46px); }
.pl-item[data-case="airlst"] .pl-cardlogo { height:clamp(26px,2.9vw,46px); }

/* Zeppelin: drei nachgebaute App-Screens in Phone-Mockups */
.pl-comp-zp { align-items:flex-end; gap:0; bottom:clamp(28px,3vw,52px); }
/* schwarze Rahmen (Basis-.pn-phone), aufgefaechert wie ein Produkt-Mockup */
.pl-comp-zp .pn-phone:nth-child(1) { transform:rotate(-8deg) translateY(-4%); margin-right:calc(-1 * clamp(26px,2.6vw,44px)); z-index:1; }
.pl-comp-zp .pn-phone:nth-child(2) { z-index:3; position:relative; }
.pl-comp-zp .pn-phone:nth-child(3) { transform:rotate(8deg) translateY(-4%); margin-left:calc(-1 * clamp(26px,2.6vw,44px)); z-index:2; }
.zp-screen {
  aspect-ratio:9/18; width:100%; background:#F4F4F4; color:#1B1C1E;
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(5.5px,.5vw,7.5px); line-height:1.35;
}
.pn-sm .zp-screen { font-size:clamp(4.8px,.42vw,6.4px); }
.zp-status { display:flex; justify-content:space-between; background:#A6151B; color:rgba(255,255,255,.85); padding:2.6em 1.6em .2em; font-size:.72em; letter-spacing:.02em; }
.zp-head { display:flex; align-items:center; gap:.7em; background:#A6151B; color:#fff; padding:.7em 1.2em .9em; border-bottom:.35em solid #7E0F13; }
.zp-logo { font-weight:800; font-style:italic; letter-spacing:.06em; font-size:1.35em; }
.zp-cat { background:#F7C500; color:#111; font-weight:800; font-size:.75em; padding:.25em .55em; border-radius:.25em; white-space:nowrap; }
.zp-plus, .zp-back, .zp-burger { font-weight:700; font-size:1.5em; line-height:1; }
.zp-burger { margin-left:auto; }
.zp-search { margin:.9em 1em; background:#fff; border:1px solid #DDD; border-radius:1.2em; padding:.55em 1em; color:#9A9A9A; }
.zp-search i { margin-right:.4em; }
.zp-list { flex:1; background:#fff; overflow:hidden; }
.zp-row { padding:.7em 1.2em; border-bottom:1px solid #ECECEC; display:flex; flex-direction:column; }
.zp-row b { font-weight:700; }
.zp-row span { color:#9A9A9A; font-size:.85em; }
.zp-tabs { display:flex; align-items:center; justify-content:space-between; background:#fff; border-top:1px solid #E2E2E2; padding:.8em 1.4em; font-weight:700; letter-spacing:.06em; font-size:.85em; color:#555; }
.zp-tab-on { border-left:.35em solid #F7C500; padding-left:.5em; color:#111; }
.zp-cam { background:#F7C500; color:#111; width:2.6em; height:2.2em; border-radius:.3em; display:inline-flex; align-items:center; justify-content:center; }
.zp-subtabs { display:flex; gap:1.2em; align-items:baseline; background:#A6151B; color:rgba(255,255,255,.65); padding:.2em 1.2em .9em; font-weight:700; font-size:.85em; letter-spacing:.04em; }
.zp-st-on { color:#fff; border-bottom:.25em solid #fff; padding-bottom:.25em; }
.zp-date { margin-left:auto; font-weight:400; }
.zp-statrow { display:flex; align-items:center; gap:.6em; padding:1em 1.2em .4em; background:#fff; }
.zp-check { width:1.6em; height:1.6em; border-radius:50%; background:#A6151B; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.9em; }
.zp-kum { margin-left:auto; color:#9A9A9A; }
.zp-big { display:flex; align-items:baseline; gap:.6em; padding:.2em 1.2em; background:#fff; }
.zp-num { color:#A6151B; font-weight:800; font-size:3.4em; line-height:1; }
.zp-nlbl { color:#9A9A9A; }
.zp-bars { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:.45em; padding:.8em 1.2em .3em; background:#fff; }
.zp-brow { display:flex; align-items:center; gap:.6em; }
.zp-brow span { flex:0 0 1.7em; text-align:right; color:#9A9A9A; font-size:.75em; }
.zp-brow em { flex:1; height:.55em; background:#F0F0F0; border-radius:.1em; font-style:normal; }
.zp-bars i { display:block; height:100%; background:#C9C9C9; border-radius:.1em; }
.zp-bars i.zp-red { background:#A6151B; }
.zp-axis { display:flex; justify-content:space-between; padding:.2em 1.2em .6em; background:#fff; color:#B5B5B5; font-size:.75em; }
.zp-person { background:#fff; padding:1em 1.2em; border-left:.4em solid #A6151B; display:flex; flex-direction:column; border-bottom:1px solid #ECECEC; }
.zp-person b { font-weight:700; font-size:1.1em; }
.zp-person span { color:#9A9A9A; }
.zp-sect { padding:.6em 1.2em .3em; color:#9A9A9A; text-transform:uppercase; letter-spacing:.08em; font-size:.8em; }
.zp-fields { flex:1; background:#fff; overflow:hidden; }
.zp-field { display:flex; gap:1em; padding:.55em 1.2em; border-bottom:1px solid #ECECEC; align-items:baseline; }
.zp-field span { color:#A6151B; font-size:.8em; flex:0 0 4.5em; }
.zp-field b { font-weight:600; }
.zp-btn { margin:.8em 1.2em; background:#A6151B; color:#fff; font-weight:700; text-align:center; padding:.8em 0; border-radius:.25em; letter-spacing:.04em; }

/* AirLST: TISAX-Kachel + Video-Kachel mit Play, Modal-Player im CI */
.pl-comp-air { bottom:clamp(28px,3vw,52px); flex-direction:column; align-items:flex-end; gap:clamp(16px,1.8vw,28px); }
/* TISAX-Logo: weiss, ohne Kachel, ueber der Video-Kachel (rechtsbuendig) */
.air-tisax { display:block; width:clamp(133px,11.2vw,182px); filter:drop-shadow(0 1px 6px rgba(5,10,9,.55)); }
.air-tisax img { width:100%; height:auto; display:block; }
.air-vid { position:relative; display:block; padding:0; border:0; cursor:pointer; background:#0B0C0E; width:clamp(190px,16vw,260px); height:clamp(107px,9vw,146px); }
.air-vid video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.air-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:#0B0C0E; color:#F4F6F3;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:transform .3s cubic-bezier(.22,.7,.2,1);
}
.air-play i { margin-left:3px; }
.air-vid:hover .air-play { transform:translate(-50%,-50%) scale(1.12); }

#vid-modal { position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; }
#vid-modal.on { display:flex; }
#vid-modal .vm-back { position:absolute; inset:0; background:rgba(5,10,9,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#vid-modal .vm-box { position:relative; width:min(1000px,92vw); }
#vid-modal video {
  width:100%; display:block; border-radius:10px; background:#000;
  border:1px solid rgba(244,246,243,.12); box-shadow:0 40px 120px rgba(0,0,0,.65);
  accent-color:var(--acc);
}
#vid-modal .vm-close {
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:50%;
  border:0; cursor:pointer; background:var(--acc); color:#F4F6F3; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
#vid-modal .vm-close:hover { transform:scale(1.1); }

/* robodocxs: Eingang (PDF/Mail/XLS/XML) -> KI-Brain -> ERP/CRM/DMS.
   Vernetzung: SVG-Kurven mit fliegenden Datenpunkten (SMIL), pulsierendes
   Brain im Zentrum, Feld-Chips (Chat-Bubble-Blau), Zielsysteme fuellen sich
   mit strukturierten Datenzeilen. Basiszustaende = Endzustand. */
.rd-anim { position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(130% 100% at 72% 16%, #14395B 0%, #0C2740 55%, #081A2C 100%); }
.rd-orbit { position:absolute; aspect-ratio:1; border:1.5px dashed rgba(88,190,240,.26); border-radius:50%; pointer-events:none; }
.rd-orbit-1 { width:110%; left:-8%; top:-72%; animation:rdSpin 90s linear infinite; }
.rd-orbit-2 { width:64%; right:-22%; bottom:-38%; border-color:rgba(88,190,240,.16); animation:rdSpin 120s linear infinite reverse; }
@keyframes rdSpin { to { transform:rotate(360deg); } }
.rd-scene { position:absolute; left:6%; right:6%; top:12%; height:54%; display:flex; align-items:center; justify-content:space-between; }
.rd-group { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; }
.rd-lbl { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(214,236,250,.6); font-weight:600; }

/* Eingangsformate */
.rd-sources { display:grid; grid-template-columns:repeat(2,auto); gap:clamp(6px,.7vw,10px); }
.rd-src {
  width:clamp(32px,2.9vw,46px); height:clamp(32px,2.9vw,46px); border-radius:10px;
  background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(3,14,24,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(9px,.75vw,11px); font-weight:800; letter-spacing:.03em;
  animation:rdSrc 8s ease infinite;
}
.rd-s1 { color:#E5484D; }
.rd-s2 { color:#1FA3E6; font-size:clamp(12px,1vw,15px); animation-delay:.35s; }
.rd-s3 { color:#1E7E45; animation-delay:.7s; }
.rd-s4 { color:#2B579A; animation-delay:1.05s; }
@keyframes rdSrc { 0%,3% { transform:scale(1); opacity:.78; }
  7% { transform:scale(1.14); opacity:1; }
  13%,100% { transform:scale(1); opacity:.78; } }

/* Netz: Kurven + fliegende Datenpunkte */
.rd-net { flex:1 1 auto; height:78%; min-width:0; margin:0 clamp(8px,.9vw,16px); overflow:visible; }
.rd-net path { fill:none; stroke:rgba(88,190,240,.34); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.rd-dotc { fill:#7FD9FF; }

/* KI-Brain */
.rd-brain {
  position:relative; z-index:2;
  width:clamp(76px,6.6vw,110px); height:clamp(76px,6.6vw,110px); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1C5A8A 0%, #0D2B45 72%);
  border:1px solid rgba(88,190,240,.55);
  color:#7FD9FF; font-size:clamp(30px,2.7vw,46px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 44px rgba(31,163,230,.4), 0 18px 44px rgba(3,14,24,.5);
  animation:rdBrain 2.6s ease-in-out infinite alternate;
  will-change:transform;
}
/* nur transform animieren (kein box-shadow: repaint-teuer -> Flackern) */
@keyframes rdBrain { from { transform:scale(1); } to { transform:scale(1.06); } }
.rd-pulse { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(88,190,240,.5);
  animation:rdPulse 3s ease-out infinite; pointer-events:none; }
.rd-pulse-2 { animation-delay:1.5s; }
@keyframes rdPulse { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(2); opacity:0; } }

/* Extrahierte Felder als Chips (Chat-Bubble-Blau) */
.rd-chip {
  position:absolute; left:50%; transform:translateX(-50%);
  background:#1FA3E6; color:#FFFFFF;
  font-size:10px; font-weight:700; padding:5px 11px; border-radius:99px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(31,163,230,.45); z-index:3;
  animation:rdChip 8s ease infinite;
}
.rd-chip-1 { top:-40px; }
.rd-chip-2 { top:-66px; animation-delay:.4s; }
.rd-chip-3 { top:-92px; animation-delay:.8s; }
.rd-chip-4 { top:auto; bottom:-40px; animation-delay:.2s; }
.rd-chip-5 { top:auto; bottom:-66px; animation-delay:.6s; }
.rd-chip-6 { top:auto; bottom:-92px; animation-delay:1s; }
@keyframes rdChip { 0%,30% { opacity:0; transform:translateX(-50%) translateY(8px); }
  36%,72% { opacity:1; transform:translateX(-50%) translateY(0); }
  80%,100% { opacity:0; transform:translateX(-50%) translateY(-8px); } }

/* Zielsysteme, die sich mit strukturierten Daten fuellen */
.rd-targets { display:flex; flex-direction:column; gap:clamp(8px,.9vw,13px); }
.rd-target {
  position:relative; display:flex; align-items:center; gap:clamp(8px,.8vw,12px);
  background:rgba(255,255,255,.96); border-radius:9px;
  padding:clamp(6px,.65vw,9px) clamp(9px,.9vw,13px);
  box-shadow:0 12px 30px rgba(3,14,24,.45);
}
.rd-target b { font-size:clamp(9px,.8vw,11px); font-weight:800; letter-spacing:.06em; color:#0D2B45; }
.rd-rows { display:flex; flex-direction:column; gap:3px; width:clamp(42px,4vw,64px); }
.rd-rows span { position:relative; height:5px; border-radius:2px; background:#EDF4FA; overflow:hidden; }
.rd-rows span::after {
  content:""; position:absolute; inset:0; border-radius:2px; background:#1FA3E6;
  transform-origin:left center; animation:rdVal 8s ease infinite;
}
.rd-rows span:nth-child(1)::after { width:88%; }
.rd-rows span:nth-child(2)::after { width:58%; animation-delay:.2s; }
.rd-t2 .rd-rows span::after, .rd-t2 .rd-tcheck { animation-delay:.45s; }
.rd-t2 .rd-rows span:nth-child(2)::after { animation-delay:.65s; }
.rd-t3 .rd-rows span::after, .rd-t3 .rd-tcheck { animation-delay:.9s; }
.rd-t3 .rd-rows span:nth-child(2)::after { animation-delay:1.1s; }
@keyframes rdVal { 0%,44% { transform:scaleX(0); } 54%,94% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.rd-tcheck {
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  background:#1FA3E6; color:#FFFFFF; font-size:8px;
  display:flex; align-items:center; justify-content:center;
  animation:rdCheck 8s ease infinite;
}
@keyframes rdCheck { 0%,56% { opacity:0; transform:scale(.4); }
  62%,92% { opacity:1; transform:scale(1); }
  98%,100% { opacity:0; transform:scale(.4); } }
.pl-comp-rd { bottom:clamp(28px,3vw,52px); }
.rd-poster {
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(150deg,#123350 0%,#081A2C 70%);
}
.rd-poster img { width:44%; height:auto; filter:brightness(0) invert(1); opacity:.92; }
.rd-poster em { font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,246,243,.5); font-weight:600; }
.rd-vid .air-play { top:auto; bottom:10px; left:auto; right:10px; transform:none; width:40px; height:40px; font-size:13px; background:rgba(11,12,14,.9); }
.rd-vid:hover .air-play { transform:scale(1.12); }
#demo-modal { position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; }
#demo-modal.on { display:flex; }
#demo-modal .vm-back { position:absolute; inset:0; background:rgba(5,10,9,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#demo-modal .vm-box { position:relative; width:min(1100px,94vw); }
#demo-modal iframe {
  width:100%; aspect-ratio:16/10; border:1px solid rgba(244,246,243,.12); border-radius:10px;
  background:#0B0C0E; display:block; box-shadow:0 40px 120px rgba(0,0,0,.65);
}
#demo-modal .vm-close {
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:50%;
  border:0; cursor:pointer; background:#0B0C0E; color:#F4F6F3; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease;
}
#demo-modal .vm-close:hover { transform:scale(1.1); }

/* PASSNGR: schwarze Phone-Mockups mit Seitentasten */
.pl-comp-pn { align-items:flex-end; gap:clamp(16px,1.8vw,28px); bottom:clamp(28px,3vw,52px); }
.pn-phone {
  position:relative; width:clamp(160px,13.5vw,205px); flex:0 0 auto;
  border-radius:clamp(24px,2.2vw,34px); padding:clamp(6px,.6vw,9px);
  background:linear-gradient(160deg,#1d1f22 0%,#0a0b0c 45%,#060708 70%,#17181b 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.7);
}
.pn-sm { width:clamp(132px,11vw,168px); }
.pn-screen {
  position:relative; border-radius:clamp(18px,1.7vw,26px); overflow:hidden;
  background:#04263f;
}
.pn-screen img { width:100%; height:auto; display:block; }
.pn-screen::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 16%, rgba(255,255,255,0) 30%);
}
.pn-notch {
  position:absolute; z-index:2; top:clamp(7px,.7vw,10px); left:50%; transform:translateX(-50%);
  width:24%; height:clamp(5px,.5vw,7px); border-radius:99px; background:rgba(4,6,8,.95);
}
.pn-btn {
  position:absolute; width:3px; border-radius:2px;
  background:linear-gradient(180deg,#3c3f45 0%,#101215 50%,#3c3f45 100%);
}
.pn-btn-vol1 { left:-3px; top:19%; height:8%; }
.pn-btn-vol2 { left:-3px; top:29%; height:8%; }
.pn-btn-pwr  { right:-3px; top:22%; height:12%; }
@media (max-width: 940px) { .pl-comp { display:none; } }

/* Referenz-Mockups im Dark Mode: dunkle Fenster mit Gruen-Akzent.
   Helle Zwischentoene der Mock-UIs (Pills, Leisten, Platzhalter) werden
   gestuft dunkel gemappt; var(--acc)-Elemente bleiben gruen.
   Jeweils beide Formen: wie geschrieben + browser-normalisiert (rgb). */
html.dark #hs-track [style*="background:#F6F6F5"], html.dark #hs-track [style*="background: rgb(246, 246, 245)"] { background:#1D2125 !important; }
html.dark #hs-track [style*="background:#F4F6F3"], html.dark #hs-track [style*="background: rgb(244, 246, 243)"] { background:#1D2125 !important; }
html.dark #hs-track [style*="background:#F0F0EF"], html.dark #hs-track [style*="background: rgb(240, 240, 239)"] { background:#202428 !important; }
html.dark #hs-track [style*="background:#EDEDEC"], html.dark #hs-track [style*="background: rgb(237, 237, 236)"] { background:#23272B !important; }
html.dark #hs-track [style*="background:#ECECEB"], html.dark #hs-track [style*="background: rgb(236, 236, 235)"] { background:#23272B !important; }
html.dark #hs-track [style*="background:#E5E5E4"], html.dark #hs-track [style*="background: rgb(229, 229, 228)"] { background:#2A2E33 !important; }


/* ── Ortsmarker auf der Alpen-Silhouette (Zugspitze): Punkt + Leader-Linie
   + Name + Koordinaten, im Stil des Hero-Logo-Blocks ── */
.geo-mark { position:absolute; width:0; height:0; pointer-events:none; z-index:2; line-height:1; }
.geo-mark-dot { position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#0B0C0E; box-shadow:0 0 0 3px rgba(11,12,14,.14); }
.geo-mark-line { position:absolute; left:-0.5px; bottom:6px; width:1px; height:clamp(24px,3.4vw,44px); background:rgba(11,12,14,.3); }
.geo-mark-name { position:absolute; bottom:calc(clamp(24px,3.4vw,44px) + 22px); left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,12,14,.8); white-space:nowrap; }
.geo-mark-coords { position:absolute; bottom:calc(clamp(24px,3.4vw,44px) + 9px); left:50%; transform:translateX(-50%); font-size:8.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(11,12,14,.45); white-space:nowrap; }
html.dark .geo-mark-dot { background:#F4F4F2; box-shadow:0 0 0 3px rgba(244,244,242,.15); }
html.dark .geo-mark-line { background:rgba(244,244,242,.3); }
html.dark .geo-mark-name { color:rgba(244,244,242,.85); }
html.dark .geo-mark-coords { color:rgba(244,244,242,.5); }
@media (max-width:720px) { .geo-mark { display:none; } }