/* ═══════════ 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; }
/* Links ohne eigene Farbe standen im Browser-Blau (#0000EE) - etwa
   "www.festzelt-os.com" im Kopftext der Case Studies. Sie tragen jetzt das
   CI-Gruen. Bewusst mit der niedrigsten Spezifitaet (Typselektor, kein
   !important): alles was eine eigene Farbe mitbringt - Nav, Footer,
   Buttons, Inline-Styles - gewinnt weiter. Unterstreichung bleibt der
   Browser-Default, sie macht den Link im Fliesstext erkennbar.
   (19.08.2026) */
a { color:#1a663f; }
html.dark a { color:#6FD4A4; }

::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 ---- */
/* Umschalter und Burger standen als position:fixed am Viewport-Rand, das
   Logo dagegen im 1320px-Container - auf breiten Schirmen liefen die
   Kanten dadurch sichtbar auseinander. Beide Buttons sitzen jetzt im
   Flex-Fluss von #nav-inner und teilen dessen Padding mit dem Logo.
   (19.08.2026) */
#ldi-nav { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(242,242,241,0); transition:background .4s; }
/* Navhoehe 76px (20.08.2026, vorher 92px): Die Bedienelemente sind 44px hoch,
   es blieben also 24px Luft ueber und unter ihnen - ein Drittel weniger sind
   16px, macht 44 + 2*16 = 76px. Der Wert haengt an mehreren Stellen zusammen:
   .lg-nav in legal.css, das padding-top der lg-root/ld-root-Wrapper im Markup
   (die Leiste ist fixed), der Hero-Versatz in landing.css und die Inline-Hoehe,
   die nav.js/main-v2.js/main.js beim Scrollen setzen. Wer hier aendert, muss
   dort nachziehen. */
#nav-inner { position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); height:76px; display:flex; align-items:center; justify-content:space-between; gap:10px; 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:relative; z-index:3; appearance:none; border:none; cursor:pointer; background:#0B0C0E; width:48px; height:44px; border-radius:8px; 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:8px; 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:8px; 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; border-radius:8px; 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:8px; 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; }
/* Auf dem Handy nur 130vh (19.08.2026): #hero-sticky ist einen Schirm hoch und
   klebt, solange #hero-wrap darunter durchlaeuft - bei 200vh war das ein
   ganzer Schirm Scrollen, in dem sich nur der Hero-Inhalt ausblendet. Die
   naechste Sektion tauchte erst nach 812px am unteren Rand auf, ihre
   Ueberschrift stand erst nach 1,23 Schirmen oben. Mit 130vh erscheint sie
   nach rund einem Viertel Schirm; der Hero blendet sich weiterhin aus, nur
   ohne Leerlauf danach. */
@media (max-width:720px) {
  #hero-wrap { height:130vh; }
}
#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:8px;
  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:14px; 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:8px; 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:8px 8px 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:32px; 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:32px; }
.wk-b2 { clip-path:url(#wkb2); border-radius:32px; }
.wk-b3 { clip-path:url(#wkb3); border-radius:32px; }
.wk-b4 { clip-path:url(#wkb4); border-radius:32px; }

/* 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:relative; margin-left:auto; z-index:210; width:48px; height:44px;
  appearance:none; border:none; cursor:pointer; border-radius:8px;
  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:8px; 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:14px; 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:8px; 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 */
/* Karten mit hellem Grund: im Dark Mode #1C1F23 statt bisher #16181B - auf
   Wunsch etwas heller, damit sie sich vom Seitengrund #0B0C0E abheben.
   (20.08.2026) */
html.dark [style*="background:#FFFFFF"],
html.dark [style*="background: rgb(255, 255, 255)"] { background:#1C1F23 !important; border-color:rgba(244,244,242,.14) !important; }
/* Die eine bewusst schwarze Karte der Kompetenz-Sektion trug #0E0F11 und
   verschwand neben den anderen im Seitengrund. Sie bekommt den Ton, den die
   anderen Karten bisher hatten - nur hier, damit #0E0F11 anderswo (etwa der
   Kartenhintergrund im Hero) unberuehrt bleibt. */
html.dark section[data-screen-label="Kompetenz"] [style*="background:#0E0F11"] { background:#16181B !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; }
/* Trennlinien im Dark Mode (20.08.2026): Es gab nur eine Regel fuer
   border-top, nicht fuer border-bottom - die Linien zwischen den
   Leistungs-Eintraegen (border-bottom:1px solid rgba(11,12,14,.14)) blieben
   deshalb dunkel auf dunklem Grund und waren unsichtbar. Beide Seiten werden
   jetzt umgestellt, und der Wert steigt von .12 auf .2, damit die Linien
   ueberhaupt zu erkennen sind. */
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,.2) !important; }
html.dark [style*="border-bottom:1px solid rgba(11,12,14"],
html.dark [style*="border-bottom: 1px solid rgba(11, 12, 14"] { border-bottom-color:rgba(244,244,242,.2) !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,.2) !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); }
/* war #1a663f - dunkelgruen auf dunklem Grund, Kontrast 2.6. Jetzt das
   helle Mint, das im Dark Mode auch sonst als Akzent dient (10.08.2026). */
html.dark .kd-tile-label { color:#6FD4A4; }
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; }

/* Kontakt-CTA "Erstgespraech anfragen" (.kontakt-cta): den Hover setzt main-v2.js per
   style-hover als Inline-Style (background:#0B0C0E). Im Dark Mode faellt das
   in die Inline-Style-Regeln oben, die tief-schwarze Flaechen nach hell
   kippen - die Inline-Schriftfarbe #F4F6F3 blieb dabei hell und der Text
   war auf der hellen Flaeche nicht mehr lesbar. Ob die Regel greift, haengt
   daran, wie der Browser das style-Attribut serialisiert; darum wird der
   Hover-Zustand hier komplett gesetzt statt darauf zu bauen. Im Light Mode
   bleibt es beim dunklen Hover mit heller Schrift. (19.08.2026) */
/* Kontakt-CTA "Erstgespraech anfragen": im Dark Mode weiss mit dunkler
   Schrift statt der gruenen Flaeche - dasselbe Verhaeltnis wie bei .ha-btn.
   Hover geht auf reines Weiss. Gilt fuer beide Zustaende, weil main-v2.js
   beim Hover per style-hover eine dunkle Flaeche inline setzt und die
   Inline-Style-Regeln weiter oben sie sonst nach hell kippen, ohne die
   Schriftfarbe mitzunehmen. (20.08.2026) */
html.dark .kontakt-cta { background:#F4F4F2 !important; color:#0B0C0E !important; }
html.dark .kontakt-cta:hover { background:#FFFFFF !important; 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%); }
.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; }
/* DOLL ist ein gefuellter Kasten mit heller Schrift - brightness(0)
   macht daraus eine konturlose Flaeche. Ohne die Abflachung bleibt der
   Kasten als Kasten lesbar (hell mit dunkler Schrift). (12.08.2026) */
html.dark .hero-proof-logos img[src*="logo-doll"] { filter:grayscale(1) invert(1); }
/* Mobil: Dreiergruppen mit festen Pixelhoehen (z.B. SWM + UKT + Zeppelin)
   wurden breiter als der Container und ragten rechts aus dem Bild -
   Logos duerfen schrumpfen, Seitenverhaeltnis bleibt erhalten. */
@media (max-width:560px) {
  .hero-proof { overflow:hidden; }
  .hero-proof-logos img { height:auto !important; max-height:26px; max-width:29%; }
}
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:8px; 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:8px; 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; }

/* Rechte Kante der Sektionsblocks - .pq, #pl-list, #hs-track und die
   Kompetenz-Karten.

   Sie richteten sich an der fruehreren Position des Dark-Mode-Buttons aus
   (position:fixed; right:76px), per margin-right:calc(50% - 50vw + 76px)
   bzw. 61px. Seit ad42243 sitzt der Button im Flex-Fluss von #nav-inner und
   damit an der Containerkante; die Blocks endeten dadurch 28px zu kurz und
   ragten auf breiten Schirmen umgekehrt hinaus.

   Jetzt zweistufig, damit die Zahlen der Scroll-Rail links ihrer Linie frei
   bleiben (sie sitzen 34px vom Fensterrand und sind rund 16px breit):

   - Ab 1460px liegen zwischen Containerkante und Fensterrand mindestens
     70px. Da ist genug Luft, die Blocks laufen bis zur Containerkante und
     schliessen mit dem Burger ab.
   - Darunter wird es eng (bei 1400px blieben 48px, die Zahlen lagen 2px
     ueber der Kante, bei 1000px 10px). Dort enden die Blocks an der rechten
     Kante des Dark-Mode-Umschalters, also 58px weiter innen: 48px Burger
     plus die 10px gap von #nav-inner. Wer diese beiden Werte aendert, muss
     die 58px hier nachziehen.
   - Unter 980px blendet die Rail sich selbst aus (main-v2.js), dort bleibt
     es bei der Containerkante.
   (19.08.2026) */
/* ══════════ 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;
}

/* 03 Referenzen-Slider: Padding statt inline, damit Start-/Endlage per
   Breakpoint steuerbar ist. Ab 980px starten und enden die Panels buendig
   mit dem Container - derselbe Abstand auf beiden Seiten. */
#hs-track { padding:0 clamp(20px,4vw,48px); }
@media (min-width: 980px) {
  #hs-track { padding:0 max(clamp(20px,4vw,48px), calc((100vw - 1320px)/2)); }
}

@media (min-width: 980px) and (max-width: 1459.98px) {
  .pq,
  section[data-screen-label="Kompetenz"] > div > article { margin-right:58px; }
  /* 58px minus die 15px, mit denen #pl-list seinen unsichtbaren Kartenrahmen
     ausgleicht (margin:0 -15px in der Basisregel) */
  #pl-list { margin-right:43px; }
  #hs-track { padding-right:calc(max(clamp(20px,4vw,48px), (100vw - 1320px)/2) + 58px); }
}

.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:8px; 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:14px; 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; }
/* Der 15px-Rahmen ist konstruktiv (maskiert beim Stapeln die Karte
   darunter) und soll im Dark Mode unsichtbar in der Seitenfarbe stehen -
   die hellere Fassung vom 10.08. wirkte als grauer Kasten. (12.08.2026) */
html.dark .pl-item { background:#0B0C0E; border-color:#0E0F11; }
/* 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:14px; border:8px solid #101215; background:#101215; box-shadow:0 18px 50px rgba(11,12,14,.28); }
.pl-device img { border-radius:14px; }
.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:14px; 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:8px; 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:8px;
  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:8px 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:8px; 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:8px;
  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:8px;
  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:8px; background:#EDF4FA; overflow:hidden; }
.rd-rows span::after {
  content:""; position:absolute; inset:0; border-radius:8px; 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:8px;
  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:32px; 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:32px; 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:8px;
  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; }
/* ... ausser den Schaltflaechen darin: die Regel oben ist fuer die
   Panel-Flaechen gedacht, traf aber auch den Button "Projekt anfragen" und
   machte ihn dunkel auf dunkelgruenem Grund. (20.08.2026) */
html.dark #hs-track a[style*="background:#F4F6F3"],
html.dark #hs-track a[style*="background: rgb(244, 246, 243)"] { background:#F4F4F2 !important; color:#0B0C0E !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; } }

/* Alpen-Silhouette + Footer im Dark Mode: die SVG traegt fest #0B0C0E und
   verschwand vor dem fast gleich dunklen Seitengrund. Bergflaeche und
   Stadt-Szene tragen deshalb denselben Ton und bilden eine durchgehende
   Flaeche, die sich vom Seitengrund abhebt (das inline-Styling braucht
   !important).

   Zielton ist #27282A (Vorgabe 19.08.2026, vorher #141517). Die SVG laesst
   sich als <img> nicht umfaerben, nur filtern: invert(x) hebt jeden Kanal um
   (255-2v)*x, aus 11/12/14 werden bei x=.1216 also 39/40/42 - genau #27282A.
   Wer den Ton aendert, muss beides nachziehen: Filter und Hintergrund. */
html.dark #footer-alps { filter:invert(.1216); }
html.dark #footer-scape footer { background:#27282A !important; }
html.dark #footer-scape + footer { background:#27282A !important; }
html.dark footer[data-screen-label="Footer"] { background:#27282A !important; }