/* ═══════════ LINKS DER ISAR - SEO-Landingpages (Premium-Layout)
   SaaS-Landing-Anmutung in der LDI-Markenwelt: Glow-Hero mit schwebenden
   UI-Karten, Use-Case-Akkordeon, Chips, Rollen-Karten, Ablauf, Case-Band,
   FAQ, CTA. Light + Dark ueber CSS-Variablen (html.dark). ═══════════ */

:root {
  --ld-bg: #F2F2F1;
  --ld-bg2: #FFFFFF;
  --ld-panel: #FFFFFF;
  --ld-ink: #0B0C0E;
  --ld-ink2: rgba(11,12,14,.68);
  --ld-ink3: rgba(11,12,14,.45);
  --ld-line: rgba(11,12,14,.1);
  --ld-acc: #05332B;
  --ld-acc2: #1a663f;
  --ld-accsoft: rgba(5,51,43,.08);
  --ld-glow: rgba(26,102,63,.16);
  --ld-card-shadow: 0 18px 50px rgba(11,12,14,.08);
  --ld-chip: #FFFFFF;
}
html.dark {
  --ld-bg: #0B0F0D;
  --ld-bg2: #0E1411;
  --ld-panel: #111814;
  --ld-ink: #F4F6F3;
  --ld-ink2: rgba(244,246,243,.68);
  --ld-ink3: rgba(244,246,243,.45);
  --ld-line: rgba(244,246,243,.1);
  --ld-acc: #4fbf8b;
  --ld-acc2: #6fd4a4;
  --ld-accsoft: rgba(79,191,139,.1);
  --ld-glow: rgba(46,140,94,.22);
  --ld-card-shadow: 0 24px 60px rgba(0,0,0,.5);
  --ld-chip: #141c17;
}
html.dark body { background: var(--ld-bg); }

.ld-root { background:var(--ld-bg); color:var(--ld-ink); font-family:'Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif; overflow-x:clip; }
.ld-wrap { max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.ld-root h1, .ld-root h2, .ld-root h3 { font-family:'Helvetica Now Display','Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif; }

/* ── Reveal on scroll ── */
.ld-rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.2,1); }
.ld-rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .ld-rv { opacity:1 !important; transform:none !important; } }

/* ── Nav ── */
.ld-nav { position:relative; z-index:5; height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ld-nav-brand img { height:14px; width:auto; display:block; }
html.dark .ld-nav-brand img { filter:brightness(0) invert(1); }
.ld-nav-right { display:flex; align-items:center; gap:14px; }
.ld-back { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink3); text-decoration:none; transition:color .3s; white-space:nowrap; }
.ld-back:hover { color:var(--ld-acc); }
.ld-theme { position:fixed; top:24px; right:18px; z-index:210; appearance:none; border:none; background:#0B0C0E; color:#F4F4F2; width:48px; height:44px; border-radius:8px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.ld-theme:hover { background:var(--acc, #05332B); }
html.dark .ld-theme { background:#F4F4F2; color:#0B0C0E; }
@media (max-width:980px) { .ld-theme { right:18px; } }

/* ── Hero ── */
.ld-hero { position:relative; padding:clamp(36px,7vh,96px) 0 clamp(60px,10vh,130px); }
.ld-hero::before { content:""; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:700px; border-radius:50%;
  background:radial-gradient(closest-side, var(--ld-glow), transparent 70%); pointer-events:none; }
.ld-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px,4vw,70px); align-items:center; }
.ld-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ld-line); background:var(--ld-panel);
  border-radius:99px; padding:7px 14px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ld-ink2); }
.ld-pill i { color:var(--ld-acc2); font-size:10px; }
/* Ueberschriften-Stufen 10.08.2026: Leistungsseiten 74/64, damit sie
   naeher an den Projektseiten (64/54) liegen. Der vw-Anteil ist so
   gerechnet, dass bei 1440px genau der Zielwert steht. */
.ld-hero h1 { margin:0; font-weight:700; font-size:clamp(38px,5.14vw,74px); line-height:1.0; letter-spacing:-.035em; }
/* Lange Komposita ("Automatisierungsberatung") passen in der schmalen
   Hero-Spalte nicht in eine Zeile - sauber trennen statt ueberlaufen.
   Auf der Beratungsseite zusaetzlich kleiner, sonst muesste selbst
   "effiziente" getrennt werden; die uebrigen Landingpages behalten ihre
   Groesse (Selektor greift nur, wo die Roadmap-Karte steht). */
.ld-hero-grid h1 { overflow-wrap:break-word; }
/* Trennung nur auf den deutschen Seiten - im Englischen ist kein Wort zu
   lang und "con-sulting" saehe in einer Headline falsch aus. */
:lang(de) .ld-hero-grid h1 { hyphens:auto; }
.ld-hero-grid:has(.ld-hf-card) h1 { font-size:clamp(34px,4vw,56px); }
.ld-hero h1 .nw { white-space:nowrap; }
.ld-hero h1 em { font-style:normal; color:var(--ld-acc2); }
.ld-hero-lead { margin:26px 0 0; max-width:600px; font-size:clamp(17px,1.5vw,22px); line-height:1.6; color:var(--ld-ink2); }
.ld-hero-ctas { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:28px 0 0; }
.ld-btn { display:inline-block; background:var(--ld-ink); color:var(--ld-bg); font-size:14px; font-weight:600; padding:14px 26px; border-radius:8px; text-decoration:none; transition:background .3s, transform .2s; }
.ld-btn:hover { background:var(--ld-acc); transform:translateY(-1px); }
html.dark .ld-btn { background:var(--ld-acc); color:#06110c; }
html.dark .ld-btn:hover { background:var(--ld-acc2); }
.ld-btn-ghost { display:inline-block; border:1px solid var(--ld-line); color:var(--ld-ink); font-size:14px; font-weight:600; padding:13px 24px; border-radius:8px; text-decoration:none; transition:border-color .3s, color .3s; }
.ld-btn-ghost:hover { border-color:var(--ld-acc); color:var(--ld-acc); }
.ld-hero-note { margin:14px 0 0; font-size:12px; color:var(--ld-ink3); }

/* Hero-Buehne: Foto + schwebende UI-Karten */
.ld-stage { position:relative; min-height:clamp(400px,48vw,580px); }
.ld-stage-photo { position:absolute; right:calc(14px - clamp(20px,4vw,48px)); top:0; width:100%; height:100%; object-fit:cover; border-radius:8px; box-shadow:var(--ld-card-shadow); }
.ld-float { position:absolute; background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; box-shadow:var(--ld-card-shadow); }
@keyframes ldFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }

/* Karte 1: Automations-Panel mit Pipeline */
.ld-card-auto { left:-14px; bottom:-18px; width:min(330px,78%); padding:16px 16px 14px; animation-delay:.6s; }
.ld-card-h { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink3); margin:0 0 12px; }
.ld-card-h b { display:inline-flex; align-items:center; gap:6px; color:var(--ld-ink2); }
.ld-orb { width:7px; height:7px; border-radius:50%; background:var(--ld-acc2); animation:ldPulse 1.8s ease-in-out infinite; }
@keyframes ldPulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.ld-pipe { display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.ld-pipe-node { flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:var(--ld-accsoft); color:var(--ld-acc2); display:flex; align-items:center; justify-content:center; font-size:13px; }
.ld-pipe-link { flex:1 1 auto; height:0; border-top:2px dashed var(--ld-line); position:relative; }
.ld-pipe-link::after { content:""; position:absolute; top:-4px; left:0; width:6px; height:6px; border-radius:50%; background:var(--ld-acc2); animation:ldDot 2.4s linear infinite; }
.ld-pipe-link:nth-child(4)::after { animation-delay:1.2s; }
@keyframes ldDot { 0% { left:0; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:calc(100% - 6px); opacity:0; } }
.ld-task { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ld-ink2); padding:6px 0; border-top:1px solid var(--ld-line); }
.ld-task i { color:var(--ld-acc2); font-size:11px; }
.ld-task em { font-style:normal; margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--ld-ink3); }

/* Karte 2/3: KPI */
.ld-card-kpi { right:-14px; top:-56px; width:224px; padding:18px 20px; }
.ld-card-kpi .ld-kpi-num { font-size:44px; }
.ld-card-kpi .ld-kpi-num small { font-size:20px; }
.ld-card-kpi .ld-kpi-lbl { font-size:12px; }
.ld-card-kpi2 { right:auto; left:-14px; top:22%; width:190px; padding:14px 16px; animation-delay:1.2s; }
.ld-kpi-num { font-family:'Helvetica Now Display',sans-serif; font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--ld-ink); line-height:1; }
.ld-kpi-num small { font-size:16px; font-weight:700; color:var(--ld-acc2); }
.ld-kpi-lbl { margin:6px 0 0; font-size:11px; line-height:1.45; color:var(--ld-ink3); }
.ld-kpi-src { margin:7px 0 0; padding-top:7px; border-top:1px solid var(--ld-line); font-size:9px; line-height:1.4; color:var(--ld-ink3); opacity:.85; }
.ld-spark { display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:10px; }
.ld-spark i { flex:1; background:linear-gradient(180deg,var(--ld-acc2),var(--ld-acc)); border-radius:8px 8px 0 0; opacity:.85; }

/* Logo-Strip */
.ld-logos { display:flex; align-items:center; gap:clamp(22px,3.4vw,54px); flex-wrap:wrap; padding:clamp(20px,3vh,30px) 0 0; margin-top:clamp(26px,4vh,44px); border-top:1px solid var(--ld-line); }
.ld-logos span { font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-logos img { height:22px; width:auto; opacity:.5; filter:grayscale(1); }
html.dark .ld-logos img { filter:grayscale(1) brightness(0) invert(1); opacity:.45; }
/* Logo-Rotation: Slots gleichmaessig ueber die volle Breite, Crossfade */
.ld-logo-row { flex:1; display:flex; align-items:center; min-height:32px; }
.ld-logo-slot { flex:1; position:relative; height:32px; }
.ld-logo-slot img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .7s ease; }
.ld-logo-slot img.on { opacity:.5; }
html.dark .ld-logo-slot img.on { opacity:.45; }
/* Ruhige Variante der Kreislauf-Boxen: kein Hover-/Highlight-Effekt */
.im-quiet .im-card { pointer-events:none; }
.im-quiet .im-card.lit { border-color:var(--ld-line); transform:none; }
.im-quiet .im-card.lit .im-n { color:var(--ld-ink3); }
.im-wrap.im-quiet .im-tile.lit { transform:none !important; filter:none !important; }

/* Beispiel-Workflow: Knotenkette mit animierten Strichel-Verbindern */
.ld-flowpanel { margin-top:clamp(26px,4vh,46px); background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; overflow:hidden; }
.ld-flowpanel .ld-win-bar b { max-width:none; }
.ld-flow { display:flex; align-items:flex-start; gap:0; padding:clamp(24px,3vw,44px) clamp(18px,2.4vw,36px); }
.ld-flow-node { flex:0 0 auto; width:clamp(88px,9vw,128px); text-align:center; }
.ld-flow-node .nd { width:clamp(44px,3.6vw,56px); height:clamp(44px,3.6vw,56px); margin:0 auto; border-radius:8px; background:var(--ld-accsoft); color:var(--ld-acc2); display:flex; align-items:center; justify-content:center; font-size:clamp(16px,1.3vw,20px); }
.ld-flow-node strong { display:block; margin-top:10px; font-size:clamp(11px,.9vw,13px); font-weight:650; letter-spacing:-.01em; line-height:1.3; }
.ld-flow-node em { display:block; margin-top:4px; font-style:normal; font-size:clamp(9.5px,.75vw,11px); color:var(--ld-ink3); line-height:1.35; }
.ld-flow-link { flex:1 1 0; height:0; border-top:2px dashed rgba(11,12,14,.28); margin-top:clamp(22px,1.8vw,28px); position:relative; min-width:14px;
  animation:ldFlowDash 1.6s linear infinite; border-image:none; }
html.dark .ld-flow-link { border-top-color:rgba(244,246,243,.28); }
.ld-flow-link::after { content:""; position:absolute; right:-1px; top:-4px; width:6px; height:6px; border-radius:50%; background:var(--ld-acc2); }
@keyframes ldFlowDash { to { transform:translateX(0); } }
@media (max-width: 900px) {
  .ld-flow { flex-direction:column; align-items:stretch; gap:0; }
  .ld-flow-node { width:auto; display:flex; align-items:center; gap:14px; text-align:left; }
  .ld-flow-node .nd { margin:0; flex:none; }
  .ld-flow-node strong { margin-top:0; }
  .ld-flow-link { border-top:none; border-left:2px dashed rgba(11,12,14,.28); height:22px; margin:6px 0 6px calc(clamp(44px,3.6vw,56px)/2); min-width:0; flex:none; }
  html.dark .ld-flow-link { border-left-color:rgba(244,246,243,.28); }
  .ld-flow-link::after { right:auto; left:-4px; top:auto; bottom:-1px; }
}

/* Bento-Reihe unter der Eignungs-Animation: Statement + geeignet/ungeeignet */
.ld-bento { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(26px,4vh,46px); align-items:stretch; }
.ld-bento-panel { background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:clamp(24px,2.6vw,42px); display:flex; flex-direction:column; }
.ld-pill { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; border:1px dashed rgba(11,12,14,.35); border-radius:999px; padding:8px 15px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink2); }
html.dark .ld-pill { border-color:rgba(244,246,243,.35); }
.ld-pill i { color:var(--ld-acc2); font-size:11px; }
.ld-bento-big { margin:20px 0 0; font-size:clamp(20px,1.9vw,30px); font-weight:700; line-height:1.22; letter-spacing:-.02em; }
.ld-bento-big em { font-style:normal; color:var(--ld-acc2); }
.ld-bento-copy { margin:14px 0 0; font-size:clamp(14px,1.1vw,16px); line-height:1.62; color:var(--ld-ink2); }
.ld-more { margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:12px; font-weight:650; font-size:15px; color:var(--ld-ink); text-decoration:none; }
.ld-more-circ { width:34px; height:34px; border-radius:50%; background:var(--ld-ink); color:var(--ld-bg); display:inline-flex; align-items:center; justify-content:center; font-size:12px; transition:background .3s, transform .3s; }
.ld-more:hover .ld-more-circ { background:var(--ld-acc); color:#F4F6F3; transform:translate(2px,-2px); }
.ld-bento-green { background:var(--acc); color:#F4F6F3; border:none; }
.ld-bento-dark { background:#0E1411; color:#F4F6F3; border:none; }
.ld-bento-green h3, .ld-bento-dark h3 { margin:0 0 14px; font-size:clamp(17px,1.4vw,21px); font-weight:650; letter-spacing:-.01em; }
.ld-bento-green .ld-fact, .ld-bento-dark .ld-fact { color:rgba(244,246,243,.82); }
.ld-bento-green .ld-fact i { color:#6fd4a4; }
.ld-bento-dark .ld-fact i { color:rgba(244,246,243,.45); }
@media (max-width: 980px) { .ld-bento { grid-template-columns:1fr; } }

/* Split-Layout: Headline links (sticky), Karten-Stack rechts */
.ld-split { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); align-items:start; }
.ld-split > .ld-sec-head { position:sticky; top:110px; margin-bottom:0; }
@media (max-width: 940px) {
  .ld-split { grid-template-columns:1fr; }
  .ld-split > .ld-sec-head { position:static; }
}

/* Zahnrad-Infografik (Eignungskriterien): Cogs mittig, Boxen aussen */
.ld-cogwrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap:clamp(18px,2.6vw,44px); align-items:center; margin-top:clamp(26px,4vh,46px); }
.ld-cog-col { display:flex; flex-direction:column; gap:clamp(18px,3vh,34px); }
.ld-cog-col.left { text-align:right; }
.ld-cog-t h3 { margin:0 0 5px; font-size:15.5px; font-weight:650; letter-spacing:-.01em; }
.ld-cog-t p { margin:0; font-size:13px; line-height:1.55; color:var(--ld-ink2); }
.ld-cogs svg { display:block; width:100%; height:auto; }
.ld-cogs .cog, .im-wrap .cog { transform-box:fill-box; transform-origin:center; animation:ldCogSpin 34s linear infinite; }
.ld-cogs .cog.rev, .im-wrap .cog.rev { animation-direction:reverse; }
.ld-cogs .cog.fast { animation-duration:20s; }
@keyframes ldCogSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ld-cogs .cog, .im-wrap .cog { animation:none; } }
@media (max-width: 940px) {
  .ld-cogwrap { grid-template-columns:1fr; }
  .ld-cogs { max-width:340px; margin:0 auto; order:-1; }
  .ld-cog-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .ld-cog-col.left { text-align:left; }
}

/* Vollflaechiger Hero: Bild als Buehne, Chartkurve ueber den Bergen */
.ld-hero-full { position:relative; overflow:hidden; margin-top:-76px; min-height:clamp(560px,80vh,840px); display:flex; align-items:center;
  padding:calc(76px + clamp(36px,5vh,64px)) 0 clamp(40px,6vh,80px); }
.ld-hf-bg { position:absolute; inset:0; }
.ld-hf-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; filter:grayscale(.6) brightness(1.05); }
/* Hero-Foto (10.08.2026: weisser Roboterarm, kE0JmtbvXxM): Roboter sitzt
   mittig-rechts, damit er neben dem Text stehen bleibt. Das Motiv ist sehr
   hell - daher weniger Aufhellung als bei der Vorgaengerfassung, sonst
   verliert die weisse Roadmap-Karte ihre Kante. */
.ld-hf-photo { object-position:30% 46% !important;
  filter:grayscale(.35) brightness(.97) contrast(1.04) !important; }
.ld-hf-blend { mix-blend-mode:screen; opacity:.5; filter:grayscale(1) brightness(1.15) !important; }
.ld-hero-full .ld-crumb { margin-bottom:clamp(20px,4vh,44px); }
.ld-hf-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(242,242,241,.97) 0%, rgba(242,242,241,.88) 42%, rgba(242,242,241,.5) 74%, rgba(242,242,241,.32) 100%),
             rgba(5,51,43,.06); }
html.dark .ld-hf-bg img { filter:grayscale(.55) brightness(.55); }
html.dark .ld-hf-bg::after { background:linear-gradient(90deg, rgba(11,15,13,.96) 0%, rgba(11,15,13,.86) 42%, rgba(11,15,13,.5) 74%, rgba(11,15,13,.34) 100%); }
.ld-hf-chart { position:absolute; left:0; right:0; bottom:-2px; height:46%; pointer-events:none; }
.ld-hf-chart svg { width:100%; height:100%; display:block; }
.ld-hf-line { fill:none; stroke:#FFFFFF; stroke-opacity:.5; stroke-width:2.5; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:1700; stroke-dashoffset:1700; animation:ldChartDraw 2.6s cubic-bezier(.6,0,.2,1) .4s forwards; }
.ld-hf-area { fill:url(#hfgrad); opacity:0; animation:ldChartFade 1.4s ease 2.2s forwards; }
.ld-hf-dot { fill:#FFFFFF; opacity:0; animation:ldChartFadeDot .7s ease forwards; }
@keyframes ldChartDraw { to { stroke-dashoffset:0; } }
@keyframes ldChartFade { to { opacity:1; } }
@keyframes ldChartFadeDot { to { opacity:.55; } }
@media (prefers-reduced-motion: reduce) {
  .ld-hf-line { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .ld-hf-area, .ld-hf-dot { opacity:1; animation:none; }
}
.ld-hf-inner { position:relative; z-index:1; width:100%; }
.ld-hf-inner h1 { max-width:12em; }
.ld-hf-inner .ld-hero-lead { max-width:640px; }
/* Roadmap-Karte liegt wie auf den anderen Landingpages unten links ueber
   dem Buehnenfoto (10.08.2026 - Hero von Vollbild auf zweispaltig
   umgestellt). Positionierung erbt sie von .ld-card-auto. */
.ld-hf-card { z-index:2; }

/* ══════════ Roadmap-Karte im Hero, groessere Fassung (10.08.2026) ══════════
   Mehr Luft, Kopfzeile mit Trennlinie, Icon als Kachel, Wellen-Label als
   umrandete Pille. Nur die Hero-Karte - die gleiche Karte auf der
   Startseite (.ld-card-auto) bleibt unveraendert. */
.ld-hf-card { width:min(430px,86%); padding:22px 22px 18px; }
/* Mobil ist die Karte fast so hoch wie die Buehne und wuerde 83% des
   Fotos verdecken - die Buehne bekommt dort mehr Hoehe (10.08.2026). */
@media (max-width:720px) {
  .ld-stage:has(> .ld-hf-card) { min-height:510px; }
  .ld-hf-card { padding:18px 18px 14px; }
  .ld-hf-card .ld-task { font-size:13.5px; gap:11px; padding:10px 0; }
  .ld-hf-card .ld-task i { width:28px; height:28px; font-size:12px; }
}
.ld-hf-card .ld-card-h { font-size:11px; letter-spacing:.15em;
  margin:0 0 4px; padding-bottom:16px; border-bottom:1px solid var(--ld-line); }
.ld-hf-card .ld-card-h b { color:var(--ld-ink); font-weight:700; }
.ld-hf-card .ld-task { gap:14px; padding:12px 0; font-size:14.5px;
  font-weight:500; color:var(--ld-ink); border-top:1px solid var(--ld-line); }
.ld-hf-card .ld-task:first-of-type { border-top:0; }
.ld-hf-card .ld-task i { flex:none; width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(111,212,164,.2); color:#1a663f; }
.ld-hf-card .ld-task .fa-rotate { background:rgba(11,12,14,.06); color:var(--ld-ink2); }
.ld-hf-card .ld-task em { padding:6px 11px; border:1px solid var(--ld-line);
  border-radius:8px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ld-ink2); text-transform:none; }
html.dark .ld-hf-card .ld-task .fa-rotate { background:rgba(244,246,243,.1); }

/* Business-Case-Formel: dunkles Panel mit Rechenzeilen */
.ld-formula { max-width:640px; margin:clamp(26px,4vh,46px) 0 0; background:#0E1411; color:#F4F6F3; border-radius:8px; padding:clamp(22px,2.6vw,36px); }
.ld-formula p { display:flex; justify-content:space-between; gap:18px; margin:0; padding:9px 0; font-size:clamp(13.5px,1.1vw,15.5px); border-bottom:1px solid rgba(244,246,243,.08); color:rgba(244,246,243,.82); }
.ld-formula p b { font-weight:600; color:#6fd4a4; font-variant-numeric:tabular-nums; }
.ld-formula p.ld-fx-sum { border-bottom:none; border-top:2px solid rgba(244,246,243,.3); margin-top:4px; font-weight:650; color:#F4F6F3; }
.ld-formula-note { margin:12px 0 0; font-size:12px; color:var(--ld-ink3); max-width:640px; }

/* ══════════ Business Case zweispaltig (10.08.2026) ══════════
   Text links, Wertschoepfungsliste rechts. Die Liste bekommt eine
   Ueberschrift, einen eigenen Rahmen um die Zeilen und eine abgesetzte
   Summenzeile; die Notiz sitzt jetzt mit in der Box. Ab 900px gestapelt. */
.ld-wrap:has(> .ld-formula) { display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(28px,3.6vw,64px); }
.ld-wrap:has(> .ld-formula) > .ld-sec-head { grid-column:1; max-width:none; }
.ld-wrap:has(> .ld-formula) > .ld-formula { grid-column:2; max-width:none; margin-top:0; }

.ld-formula { border-radius:8px; padding:clamp(24px,2.4vw,34px); }
.ld-formula > h3 { margin:0 0 clamp(16px,1.8vw,22px); font-size:clamp(18px,1.6vw,22px);
  font-weight:700; letter-spacing:-.01em; color:#F4F6F3; }
.ld-fx-rows { border:1px solid rgba(244,246,243,.14); border-radius:8px;
  padding:clamp(10px,1.2vw,16px) clamp(14px,1.6vw,20px); }
.ld-formula .ld-fx-rows p { padding:13px 0; }
.ld-formula .ld-fx-rows p:nth-last-child(2) { border-bottom:0; }
.ld-formula p.ld-fx-sum { border-top:0; margin-top:6px; padding:15px clamp(12px,1.4vw,18px);
  background:rgba(244,246,243,.07); border-radius:8px; font-weight:700; }
.ld-formula > .ld-formula-note { margin:clamp(12px,1.4vw,16px) 0 0; max-width:none;
  color:rgba(244,246,243,.5); }

@media (max-width:900px) {
  .ld-wrap:has(> .ld-formula) { grid-template-columns:minmax(0,1fr); }
  .ld-wrap:has(> .ld-formula) > .ld-sec-head,
  .ld-wrap:has(> .ld-formula) > .ld-formula { grid-column:1; }
  .ld-wrap:has(> .ld-formula) > .ld-formula { margin-top:clamp(22px,3vh,32px); }
}

/* ══════════ Beispiel-Roadmap zweispaltig (10.08.2026) ══════════
   Matrix links, Text rechts. Die Matrix ist dafuer im Markup auf
   Hochformat umgestellt (viewBox 700x640 statt 680x430) und die
   Beschriftungen entsprechend groesser - sonst waeren sie in der
   halben Spalte zu klein. Ab 900px wieder gestapelt, Text zuerst. */
.ld-wrap:has(> .ld-matrix) { display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(28px,3.6vw,64px); }
.ld-wrap:has(> .ld-matrix) > .ld-sec-head { grid-column:2; grid-row:1; max-width:none; }
.ld-wrap:has(> .ld-matrix) > .ld-matrix { grid-column:1; grid-row:1; margin-top:0; }

@media (max-width:900px) {
  .ld-wrap:has(> .ld-matrix) { grid-template-columns:minmax(0,1fr); }
  .ld-wrap:has(> .ld-matrix) > .ld-sec-head { grid-column:1; grid-row:1; }
  .ld-wrap:has(> .ld-matrix) > .ld-matrix { grid-column:1; grid-row:2;
    margin-top:clamp(22px,3vh,32px); }
}

/* Aufwand-Nutzen-Matrix (Beispiel-Roadmap) */
.ld-matrix { margin:clamp(26px,4vh,46px) 0 0; background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:clamp(18px,2.2vw,30px); }
.ld-matrix svg { display:block; width:100%; height:auto; }

/* Deliverables-Checkliste zweispaltig */
.ld-deliv { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:6px clamp(24px,3vw,48px); margin-top:clamp(26px,4vh,46px); }
@media (max-width: 700px) { .ld-deliv { grid-template-columns:1fr; } }

/* Fussnote unter dem Karten-Stack (Kennzahlen-Einordnung) */
.ld-stacknote { margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--ld-ink3); }

/* Prozess-Chevrons: sechs Pfeilschritte im CI, Texte abwechselnd oben/unten */
.ld-chev { display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:auto auto auto; column-gap:2px; margin-top:clamp(26px,4vh,46px); }
.ld-chev-s { display:contents; }
.ld-chev-a { grid-row:2; height:clamp(84px,9vw,124px); display:flex; align-items:center; justify-content:center;
  font-family:'Helvetica Now Display',sans-serif; font-weight:700; font-size:clamp(24px,2.6vw,40px); color:#F4F6F3; letter-spacing:-.02em;
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%); }
.ld-chev-s:first-child .ld-chev-a { clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
.ld-chev-s:nth-child(1) .ld-chev-a { background:#05332B; }
.ld-chev-s:nth-child(2) .ld-chev-a { background:#14503f; }
.ld-chev-s:nth-child(3) .ld-chev-a { background:#1a663f; }
.ld-chev-s:nth-child(4) .ld-chev-a { background:#2e7d5b; }
.ld-chev-s:nth-child(5) .ld-chev-a { background:#4c8f68; }
.ld-chev-s:nth-child(6) .ld-chev-a { background:#6fbf9b; color:#05332B; }
.ld-chev-t { text-align:center; margin:0 5px; }
.ld-chev-t.top { grid-row:1; align-self:end; }
.ld-chev-t.bot { grid-row:3; align-self:start; }
.ld-chev-box { background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:16px 16px 18px; }
.ld-chev-t h3 { margin:0 0 7px; font-size:17px; font-weight:650; letter-spacing:-.01em; }
.ld-chev-t p { margin:0; font-size:14px; line-height:1.58; color:var(--ld-ink2); }
.ld-chev-line { display:block; width:0; height:clamp(18px,2.4vw,30px); border-left:2px dotted rgba(11,12,14,.35); margin:0 auto; position:relative; color:var(--ld-ink); }
html.dark .ld-chev-line { border-left-color:rgba(244,246,243,.35); }
.ld-chev-t.top .ld-chev-line { margin-top:10px; }
.ld-chev-t.top .ld-chev-line::after { content:""; position:absolute; left:-3.5px; bottom:-2px; width:5px; height:5px; border-radius:50%; background:currentColor; }
.ld-chev-t.bot .ld-chev-line { margin-bottom:10px; }
.ld-chev-t.bot .ld-chev-line::before { content:""; position:absolute; left:-3.5px; top:-2px; width:5px; height:5px; border-radius:50%; background:currentColor; }
@media (max-width: 900px) {
  .ld-chev { display:block; }
  .ld-chev-s { display:block; margin-bottom:18px; }
  .ld-chev-a { height:56px; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%) !important; font-size:22px; }
  .ld-chev-t { text-align:left; padding:10px 4px 0; }
  .ld-chev-line { display:none; }
}

/* Agenten-Demo im Hero: drei Agenten arbeiten versetzt ihre Aufgaben ab */
.ld-hero-head .ld-hero-ctas { justify-content:center; }
/* Agenten-Demo nutzt die volle Containerbreite (10.08.2026); vorher auf
   1040px begrenzt, waehrend .ld-wrap 1320px minus Innenabstand hergibt. */
.ld-agdemo { max-width:none; margin:clamp(40px,6vh,72px) auto 0; background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:clamp(18px,2.2vw,30px); }
.ag-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(14px,1.8vw,22px); }
.ag-bar b { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink); }
.ag-bar > span { font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink3); }
.ag-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.ag-agent { border:1px solid var(--ld-line); border-radius:8px; padding:16px 16px 14px; background:var(--ld-bg); transition:border-color .4s; }
.ag-agent.busy { border-color:var(--ld-acc2); }
.ag-head { display:flex; align-items:center; gap:8px; }
.ag-head b { font-size:13.5px; font-weight:650; letter-spacing:-.01em; }
.ag-head .ag-state { margin-left:auto; font-style:normal; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ld-ink3); text-align:right; max-width:52%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-in { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11.5px; font-weight:600; color:var(--ld-ink2); background:var(--ld-chip); border:1px solid var(--ld-line); border-radius:8px; padding:8px 10px; opacity:0; transform:translateY(4px); transition:opacity .45s, transform .45s; }
.ag-in.show { opacity:1; transform:none; }
.ag-in i { color:var(--ld-acc2); font-size:12px; }
.ag-steps { list-style:none; margin:10px 0 0; padding:0; }
.ag-steps li { position:relative; padding:8px 0 8px 26px; font-size:12.5px; color:var(--ld-ink3); border-bottom:1px solid var(--ld-line); transition:color .3s; }
.ag-steps li:last-child { border-bottom:none; }
.ag-steps li::before { content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:50%; border:1.6px solid var(--ld-line); transition:border-color .3s, background .3s; }
.ag-steps li.run { color:var(--ld-ink); }
.ag-steps li.run::before { border-color:var(--ld-acc2); }
.ag-steps li.done { color:var(--ld-ink2); }
.ag-steps li.done::before { background:var(--ld-acc2); border-color:var(--ld-acc2); }
.ag-steps li.done::after { content:"\2713"; position:absolute; left:5px; top:50%; transform:translateY(-50%); font-size:8px; line-height:1; color:#FFFFFF; }
.ag-out { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; font-weight:600; color:var(--ld-ink); background:var(--ld-accsoft); border-radius:8px; padding:9px 10px; opacity:0; transform:translateY(4px); transition:opacity .45s, transform .45s; }
.ag-out.show { opacity:1; transform:none; }
.ag-out i { color:var(--ld-acc2); font-size:11px; }
.ag-out em { margin-left:auto; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-agfoot { margin:clamp(14px,1.8vw,20px) 0 0; text-align:center; font-size:12px; color:var(--ld-ink3); }
@media (max-width: 860px) { .ag-grid { grid-template-columns:1fr; } }

/* ══════════ Agenten-Demo, neue Fassung (10.08.2026) ══════════
   Status als farbige Badge statt Kleintext, laufender Agent blau
   umrandet, laufender Schritt mit Spinner, Schritte ohne Trennlinien.
   Die drei Zustaende kommen ohne JS-Aenderung aus: "laeuft" = .busy,
   "erledigt" = Ausgabezeile sichtbar, sonst "wartet".
   Gruen ist das LDI-Gruen (--ld-acc2), Blau und Gelb wie im Entwurf. */
.ag-agent { border-radius:8px; padding:18px 18px 16px; }
.ag-agent.busy { border-color:#1D4ED8; box-shadow:0 0 0 1px #1D4ED8; }

.ag-head .ag-state { max-width:60%; padding:5px 10px; border-radius:6px;
  font-size:9.5px; font-weight:700; letter-spacing:.06em;
  background:#FBEFC8; color:#8A5A00; }
.ag-agent:has(.ag-out.show) .ag-state { background:rgba(76,183,131,.16); color:#4CB783; }
.ag-agent.busy .ag-state { background:#DCE8FD; color:#1D4ED8; }

.ag-in { border-radius:8px; }
.ag-in .fa-file-pdf, .ag-in .fa-file-invoice { color:#DC2626; }
.ag-in .fa-envelope { color:#1D4ED8; }

.ag-steps li { border-bottom:0; padding:7px 0 7px 26px; }
.ag-steps li.done::before { background:transparent; border-color:#4CB783; }
/* Haken geometrisch aus zwei Kanten statt Schriftzeichen \2713 - das
   geschwungene Glyph haengt an der Schriftart, das hier bleibt scharf. */
.ag-steps li.done::after { content:""; left:6px; width:5px; height:2.5px;
  border-left:1.7px solid #4CB783; border-bottom:1.7px solid #4CB783;
  border-radius:.5px; transform:translateY(-72%) rotate(-45deg); }
.ag-steps li.run { font-weight:700; }
.ag-steps li.run::before { border-color:#1D4ED8; border-top-color:transparent;
  animation:agSpin .8s linear infinite; }
@keyframes agSpin { to { transform:translateY(-50%) rotate(360deg); } }

.ag-out { border-radius:8px; background:rgba(11,12,14,.05); }
.ag-out i { color:#4CB783; }
.ag-out em { padding:3px 8px; border-radius:5px; background:rgba(11,12,14,.06); }

.ag-bar > span { padding:5px 10px; border-radius:6px;
  background:rgba(11,12,14,.06); color:var(--ld-ink2); }

@media (prefers-reduced-motion: reduce) { .ag-steps li.run::before { animation:none; } }

/* Logo-Kachelwand: weisse Kacheln, Logos einheitlich hoch */
.ld-logowall { margin-top:clamp(26px,4vh,44px); padding-top:clamp(20px,3vh,30px); }
.ld-logowall > span { display:block; margin-bottom:16px; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-lw-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.ld-lw-tile { background:#FFFFFF; border:1px solid var(--ld-line); border-radius:8px; height:76px; display:flex; align-items:center; justify-content:center; padding:0 20px; }
html.dark .ld-lw-tile { border-color:rgba(244,246,243,.14); }
.ld-lw-tile img { height:24px; width:auto; max-width:100%; object-fit:contain; opacity:.65; filter:grayscale(1); }
.ld-lw-tile img[src*="logo-bmw"] { height:38px; }
.ld-lw-tile img[src*="logo-paulaner"] { height:40px; }
.ld-lw-tile img[src*="logo-festzelt-os"] { height:38px; }
/* Festzelt OS und Zeppelin Rental liegen als weisse Logos vor - auf der weissen
   Kachel muessen sie umgekehrt werden (wie .logo-inv im Hero-Proof). */
.ld-lw-tile img[src*="logo-festzelt-os"],
.ld-lw-tile img[src*="zeppelin-rental"] { filter:grayscale(1) brightness(0); }
.ld-lw-tile img[src*="logo-mercedes"] { height:30px; }
/* Dark Mode (12.08.2026): die Kacheln haben keinen weissen Grund mehr,
   also werden die dunklen Logos selbst hell gedreht. mix-blend-mode:screen
   laesst Schwarz verschwinden - wichtig fuer das UKT-Logo (JPG mit
   weissem Grund), das sonst als schwarzer Kasten stuende. */
html.dark .ld-lw-tile img { filter:grayscale(1) invert(1); mix-blend-mode:screen; opacity:.62; }
html.dark .ld-lw-tile img[src*="logo-festzelt-os"],
html.dark .ld-lw-tile img[src*="zeppelin-rental"] { filter:grayscale(1) brightness(0) invert(1); }
@media (max-width: 900px) { .ld-lw-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 560px) { .ld-lw-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Sektionen ── */
.ld-sec { padding:clamp(80px,13vh,180px) 0 0; }
.ld-sec-head { max-width:1040px; }
.ld-sec-head.center { margin:0 auto; text-align:center; }
.ld-eyebrow { margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-sec-head.center .ld-eyebrow { text-align:center; }
.ld-kicker { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ld-line); background:var(--ld-panel); border-radius:99px; padding:7px 15px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-acc2); }
.ld-sec h2 { margin:22px 0 0; font-weight:700; font-size:clamp(30px,4.44vw,64px); line-height:1.02; letter-spacing:-.035em; }
.ld-sec-sub { margin:20px 0 0; font-size:clamp(16px,1.4vw,20px); line-height:1.6; color:var(--ld-ink2); max-width:820px; }
/* Intro-Absatz im Sektionskopf auf Kopfbreite (10.08.2026): lief vorher
   schon bei 820px um, waehrend die Ueberschrift 1040px nutzen darf. */
.ld-sec-head .ld-sec-sub { max-width:none; }
.ld-sec-head.center .ld-sec-sub { margin-left:auto; margin-right:auto; }

/* Use-Cases: gestapelte Karten - beim Scrollen klappt jede neue Karte
   vollflaechig ueber die vorherige (alle sticky auf derselben Hoehe) */
.ld-stack { margin-top:clamp(34px,5vh,64px); }
.ld-stackcard { position:sticky; top:84px; margin-bottom:clamp(18px,2.4vh,28px);
  border-radius:8px; overflow:hidden; color:#F4F6F3;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center;
  min-height:clamp(420px,62vh,640px);
  background:radial-gradient(120% 100% at 76% 24%, #17251d 0%, #0b100d 64%); }
.ld-stackcard::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1.6px 1.6px at 24px 24px, rgba(244,246,243,.05) 1.5px, transparent 1.6px);
  background-size:48px 48px; }
.ld-sc-media { position:static; display:flex; align-items:center; min-width:0; }
/* UI-Bildsprache statt Fotos (wie Startseite 03 - Referenzen) */
.ld-sc-scene { position:relative; z-index:1; width:100%; margin:clamp(22px,2.4vw,36px); }
.ld-win { background:#131A16; border:1px solid rgba(244,246,243,.1); border-radius:8px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.ld-win-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid rgba(244,246,243,.08); }
.ld-win-bar b { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,246,243,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-live { display:flex; align-items:center; gap:7px; font-size:9px; font-weight:600; letter-spacing:.12em; color:rgba(244,246,243,.5); flex:none; }
.ld-win-row { display:flex; align-items:center; gap:14px; padding:15px 16px; border-bottom:1px solid rgba(244,246,243,.06); }
.ld-wr-txt { flex:1; min-width:0; }
.ld-wr-txt b { display:block; font-size:11.5px; font-weight:600; color:rgba(244,246,243,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-wr-txt i { display:block; height:5px; border-radius:8px; background:rgba(244,246,243,.12); margin-top:8px; }
.ld-tagok { font-size:9px; font-weight:600; letter-spacing:.02em; color:#6fd4a4; background:rgba(111,212,164,.12); padding:4px 8px; border-radius:8px; flex:none; }
.ld-tagmut { font-size:9px; font-weight:600; letter-spacing:.02em; color:rgba(244,246,243,.6); background:rgba(244,246,243,.08); padding:4px 8px; border-radius:8px; flex:none; }
.ld-win-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-top:1px solid rgba(244,246,243,.08); font-size:10.5px; color:rgba(244,246,243,.55); }
.ld-win-foot b { font-weight:600; color:rgba(244,246,243,.78); }
.ld-sc-inner { position:relative; z-index:1; padding:clamp(26px,3.2vw,52px); }
.ld-sc-top { display:flex; align-items:baseline; gap:16px; }
.ld-sc-num { font-family:'Helvetica Now Display',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,38px); color:rgba(244,246,243,.38); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ld-sc-kicker { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6fd4a4; }
.ld-sc-inner h3 { margin:clamp(14px,1.8vw,24px) 0 0; font-weight:700; font-size:clamp(24px,2.6vw,42px); line-height:1.06; letter-spacing:-.03em; }
.ld-sc-body p { margin:16px 0 0; font-size:clamp(15px,1.2vw,17px); line-height:1.62; color:rgba(244,246,243,.78); max-width:520px; }
.ld-sc-tags { display:flex; gap:9px; flex-wrap:wrap; margin-top:clamp(20px,2.6vh,30px); }
.ld-sc-tag { font-size:11px; font-weight:600; letter-spacing:.02em; padding:6px 11px; border:1px solid rgba(244,246,243,.32); border-radius:8px; color:rgba(244,246,243,.82); }
@media (max-width: 860px) {
  .ld-stackcard { position:relative; top:auto !important; display:block; min-height:0; margin-bottom:14px; }
  /* Die seitlichen Margins muessen aus der Breite herausgerechnet werden -
     mit width:100% war das Panel 40px zu breit und ragte rechts unter dem
     Kartenrand heraus, wo es abgeschnitten wurde (Karte: overflow:hidden).
     min-width:0, damit das Flex-Item ueberhaupt schrumpfen darf. */
  .ld-sc-scene { margin:0 clamp(20px,4vw,48px) 24px; min-width:0;
    width:calc(100% - 2*clamp(20px,4vw,48px)); }
}

/* Branchen-Chips */
.ld-chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:clamp(24px,3.6vh,40px); }
.ld-chip { display:flex; align-items:center; gap:13px; background:var(--ld-chip); border:1px solid var(--ld-line); border-radius:8px; padding:18px 20px; font-size:15.5px; font-weight:550; color:var(--ld-ink); text-decoration:none; transition:border-color .25s, transform .25s; }
.ld-chip:hover { border-color:var(--ld-acc2); transform:translateY(-2px); }
.ld-chip i { color:var(--ld-acc2); font-size:15px; width:20px; text-align:center; }

/* Rollen-Karten */
.ld-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(14px,1.8vw,22px); margin-top:clamp(26px,4vh,46px); }
.ld-card { background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:clamp(20px,2.2vw,28px); transition:border-color .25s, transform .25s; }
.ld-card:hover { border-color:var(--ld-acc2); transform:translateY(-3px); }
.ld-card .ic { width:48px; height:48px; border-radius:8px; background:var(--ld-accsoft); color:var(--ld-acc2); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:18px; }
/* Bild-Cards: Foto ganzflaechig, Text unten auf Verlauf (Kachel-Look) */
.ld-card-photo { position:relative; padding:0; overflow:hidden; min-height:clamp(380px,30vw,460px);
  display:flex; flex-direction:column; justify-content:flex-end; }
.ld-card-img { position:absolute; inset:0; margin:0; }
.ld-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ld-card-photo:hover .ld-card-img img { transform:scale(1.04); }
.ld-card-img::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,8,.05) 0%, rgba(6,10,8,.12) 34%, rgba(6,10,8,.68) 62%, rgba(6,10,8,.9) 100%); }
.ld-card-photo .ic { position:absolute; top:16px; left:16px; margin:0; z-index:1;
  background:#FFFFFF; box-shadow:0 6px 18px rgba(11,12,14,.22); }
.ld-card.ld-card-photo h3 { position:relative; z-index:1; color:#FFFFFF; padding:0 clamp(18px,2vw,24px); text-shadow:0 1px 12px rgba(0,0,0,.55); }
.ld-card.ld-card-photo p { position:relative; z-index:1; color:rgba(255,255,255,.94); padding:0 clamp(18px,2vw,24px) clamp(18px,2vw,24px); text-shadow:0 1px 10px rgba(0,0,0,.55); }
.ld-card h3 { margin:0 0 10px; font-size:21px; font-weight:650; letter-spacing:-.015em; }
.ld-card p { margin:0; font-size:15px; line-height:1.62; color:var(--ld-ink2); }

/* Ablauf (Timeline) */
.ld-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(14px,1.8vw,22px); margin-top:clamp(26px,4vh,46px); counter-reset:ldstep; }
.ld-step { position:relative; background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; padding:clamp(20px,2.2vw,26px); }
.ld-step::before { counter-increment:ldstep; content:counter(ldstep,decimal-leading-zero); font-family:'Helvetica Now Display',sans-serif; font-weight:700; font-size:13px; color:var(--ld-acc2); letter-spacing:.06em; }
.ld-step h3 { margin:12px 0 10px; font-size:20px; font-weight:650; letter-spacing:-.01em; }
.ld-step p { margin:0; font-size:15px; line-height:1.6; color:var(--ld-ink2); }
.ld-step em { font-style:normal; display:inline-block; margin-top:12px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ld-ink3); }

/* Case-Band mit Video-Platzhalter */
.ld-case { margin-top:clamp(26px,4vh,46px); background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px; overflow:hidden; }
.ld-case-media { position:relative; display:block; width:100%; border:0; padding:0; cursor:pointer; background:none; }
.ld-case-media img { display:block; width:100%; height:clamp(240px,32vw,440px); object-fit:cover; }
.ld-case-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,20,14,0) 40%, rgba(5,20,14,.55)); }
.ld-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(244,246,243,.94); color:#05332B; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 20px 50px rgba(0,0,0,.4); transition:transform .25s; }
.ld-case-media:hover .ld-play { transform:translate(-50%,-50%) scale(1.08); }
.ld-play-tag { position:absolute; z-index:2; left:50%; top:calc(50% + 54px); transform:translateX(-50%); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,246,243,.85); }
.ld-case-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(18px,2.6vw,40px); padding:clamp(22px,2.8vw,36px); }
.ld-case-col h3 { margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-fact { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.6; color:var(--ld-ink2); padding:7px 0; border-top:1px solid var(--ld-line); }
.ld-fact i { color:var(--ld-acc2); font-size:12px; margin-top:4px; }

/* FAQ */
.ld-faq { max-width:820px; margin-top:clamp(24px,3.6vh,40px); }
.ld-faq details { border-top:1px solid var(--ld-line); }
.ld-faq details:last-child { border-bottom:1px solid var(--ld-line); }
.ld-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:22px 4px; font-size:clamp(17px,1.5vw,21px); font-weight:600; letter-spacing:-.015em; color:var(--ld-ink); }
.ld-faq summary::-webkit-details-marker { display:none; }
.ld-faq summary::after { content:"+"; margin-left:auto; color:var(--ld-ink3); font-size:18px; font-weight:400; transition:transform .3s; }
.ld-faq details[open] summary::after { transform:rotate(45deg); color:var(--ld-acc2); }
.ld-faq details p { margin:0; padding:0 4px 18px; font-size:14.5px; line-height:1.7; color:var(--ld-ink2); max-width:720px; }

/* CTA-Band */
.ld-cta { position:relative; overflow:hidden; margin:clamp(60px,9vh,120px) 0 clamp(60px,9vh,110px); background:#05332B; color:#F4F6F3; border-radius:8px; padding:clamp(40px,5.5vw,80px) clamp(24px,4vw,64px); text-align:center; }
html.dark .ld-cta { background:#0d271e; box-shadow:inset 0 0 0 1px rgba(79,191,139,.25); }
.ld-cta::before { content:""; position:absolute; top:-60%; left:50%; transform:translateX(-50%); width:80%; height:120%; border-radius:50%; background:radial-gradient(closest-side, rgba(111,212,164,.25), transparent 70%); pointer-events:none; }
.ld-cta h2 { position:relative; margin:0; font-weight:700; font-size:clamp(26px,3.4vw,46px); letter-spacing:-.025em; line-height:1.12; }
.ld-cta p { position:relative; margin:14px auto 0; max-width:560px; font-size:15px; line-height:1.7; color:rgba(244,246,243,.75); }
.ld-cta .ld-hero-ctas { position:relative; justify-content:center; }
.ld-cta .ld-btn { background:#F4F4F2; color:#05332B; }
.ld-cta .ld-btn:hover { background:#6fd4a4; }
.ld-cta .ld-btn-ghost { border-color:rgba(244,246,243,.3); color:#F4F6F3; }
.ld-cta .ld-btn-ghost:hover { border-color:#6fd4a4; color:#6fd4a4; }

/* Footer (dunkel, wie ueberall) */
.ld-foot { background:#0B0C0E; color:#F4F4F2; }
.ld-foot-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px; }
.ld-foot span, .ld-foot a { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,244,242,.45); text-decoration:none; transition:color .3s; }
.ld-foot a:hover { color:#F4F4F2; }
.ld-foot-links { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* Breadcrumb */
/* 24px Luft zur Ueberschrift (10.08.2026) - derselbe Wert wie bei
   .sv-breadcrumb auf den Projektseiten, damit der Abstand ueberall gleich
   ist. Die h1 hat hier kein margin-top, der Wert steht komplett hier. */
.ld-crumb { margin:6px 0 24px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ld-ink3); }
.ld-crumb a { color:inherit; text-decoration:none; }
.ld-crumb a:hover { color:var(--ld-acc2); }

@media (max-width: 940px) {
  .ld-hero-grid { grid-template-columns:1fr; }
  .ld-stage { min-height:420px; margin-top:10px; }
  .ld-uc { grid-template-columns:1fr; }
  .ld-uc-visual { position:static; }
}
@media (max-width: 560px) {
  .ld-card-kpi2 { display:none; }
  .ld-stage { min-height:360px; }
  .ld-stage-photo { width:100%; right:0; }
  .ld-card-kpi { right:0; top:-14px; }
  .ld-card-auto { left:0; bottom:-14px; }
  /* Stehen beide schwebenden Karten auf der Buehne, ueberlappten sie sich
     mobil um 14px und verdeckten das Foto komplett. Mehr Buehnenhoehe
     schafft Luft dazwischen, sodass das Bild sichtbar bleibt. */
  .ld-stage:has(.ld-card-kpi):has(.ld-card-auto) { min-height:480px; }
}

/* Zentrierter Hero: Headline oben, breite Buehne darunter */
.ld-hero-head { max-width:1040px; margin:0 auto; text-align:center; }
.ld-hero-head h1 { margin-left:auto; margin-right:auto; }
.ld-hero-head .ld-hero-lead { margin-left:auto; margin-right:auto; max-width:760px; }
.ld-hero-head .ld-hero-ctas { justify-content:center; }
.ld-stage-wide { margin-top:clamp(44px,7vh,80px); min-height:clamp(380px,38vw,560px); }
.ld-stage-wide .ld-stage-photo { position:absolute; inset:0; width:100%; height:100%; top:0; }
.ld-stage-wide::after { content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none;
  background:linear-gradient(100deg, rgba(6,17,12,.34) 0%, rgba(6,17,12,.06) 45%, rgba(6,17,12,.22) 100%); }
.ld-stage-wide .ld-card-kpi { right:auto; left:3%; top:10%; width:200px; z-index:2; }
.ld-stage-wide .ld-card-kpi2 { right:3%; top:12%; left:auto; width:200px; z-index:2; }
.ld-stage-wide .ld-card-auto { left:50%; transform:translateX(-50%); bottom:-26px; width:min(600px,92%); z-index:2; animation:none; }
.ld-pipe-col { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; }
.ld-pipe-col em { font-style:normal; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ld-ink3); white-space:nowrap; }
.ld-pipe .ld-pipe-link { top:-9px; }
@media (max-width:700px) {
  .ld-stage-wide { min-height:0; padding-bottom:0; }
  .ld-stage-wide .ld-card-kpi, .ld-stage-wide .ld-card-kpi2 { position:relative; left:auto; right:auto; top:auto; width:100%; margin-bottom:12px; }
  .ld-stage-wide .ld-card-auto { position:relative; left:auto; transform:none; bottom:auto; width:100%; }
  .ld-stage-wide .ld-stage-photo, .ld-stage-wide::after { display:none; }
}
/* Luft zwischen Seiteninhalt und Alpen-Footer */
.ld-root #footer-scape { margin-top:clamp(70px,11vh,150px); }

/* ── Industrie-Landkarte (isometrisches Inline-SVG) ── */
:root {
  --im-p:#FFFFFF; --im-p2:#E9EEEA; --im-cp:#dbe7de;
  --im-t:#1a663f; --im-s:#0d4034; --im-f:#05332B;
  --im-hi:#3a8c61; --im-x:#F4F6F3; --im-line:rgba(5,51,43,.5);
  --im-shadow:rgba(11,12,14,.10); --im-flow:rgba(5,51,43,.35);
}
html.dark {
  --im-p:#16201a; --im-p2:#1d2a22; --im-cp:#24382c;
  --im-t:#3aa06f; --im-s:#1d5c40; --im-f:#153f2e;
  --im-hi:#6fd4a4; --im-x:#F4F6F3; --im-line:rgba(111,212,164,.5);
  --im-shadow:rgba(0,0,0,.45); --im-flow:rgba(111,212,164,.4);
}
.im-wrap { margin:clamp(30px,5vh,56px) 0 clamp(20px,3vh,34px); }
.im-map { display:block; width:100%; height:auto; }
.im-wrap .im-p { fill:var(--im-p); stroke:var(--im-line); stroke-width:1; }
.im-wrap .im-p2 { fill:var(--im-p2); }
.im-wrap .im-cp { fill:var(--im-cp); }
.im-wrap .im-t { fill:var(--im-t); }
.im-wrap .im-s { fill:var(--im-s); }
.im-wrap .im-f { fill:var(--im-f); }
.im-wrap .im-hi { fill:var(--im-hi); }
.im-wrap .im-x { fill:var(--im-x); }
.im-wrap .im-shadow { fill:var(--im-shadow); }
.im-wrap .im-line { stroke:var(--im-line); stroke-width:1.6; }
.im-wrap .im-win { stroke:var(--im-hi); stroke-width:2; opacity:.8; }
.im-wrap .im-rotor { stroke:var(--im-t); stroke-width:3.4; stroke-linecap:round; }
.im-wrap .im-flow { fill:none; stroke:var(--im-flow); stroke-width:1.6; stroke-dasharray:3 6; animation:imDash 10s linear infinite; }
@keyframes imDash { to { stroke-dashoffset:-100; } }
.im-wrap .im-pin { fill:var(--im-f); stroke:var(--im-hi); stroke-width:2; }
.im-wrap .im-pindot { fill:var(--im-x); }
.im-wrap .im-pulse { fill:none; stroke:var(--im-hi); stroke-width:1.4; opacity:0; transform-box:fill-box; transform-origin:center; animation:imPulse 3s ease-out infinite; }
.im-wrap .im-pulse2 { animation-delay:1.5s; }
@keyframes imPulse { 0% { transform:scale(.6); opacity:.8; } 100% { transform:scale(1.9); opacity:0; } }
.im-wrap .im-tile { transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.22,.7,.2,1), filter .5s; }
.im-wrap .im-tile.lit { transform:translateY(-10px); filter:drop-shadow(0 14px 22px var(--im-shadow)); }
.ld-chip.lit { border-color:var(--ld-acc2); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .im-wrap .im-flow, .im-wrap .im-pulse { animation:none; } }
@media (max-width:700px) { .im-wrap { overflow-x:auto; } .im-map { min-width:640px; } }

/* Branchen als Karten mit Einzeiler */
.ld-inds { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.ld-indcard { align-items:flex-start; padding:18px 20px 17px; }
.ld-indcard i { margin-top:3px; }
.ld-indcard strong { display:block; font-size:15.5px; font-weight:650; letter-spacing:-.01em; color:var(--ld-ink); }
.ld-indcard span { display:block; margin-top:5px; font-size:13px; font-weight:400; line-height:1.55; color:var(--ld-ink2); }

/* Branchen-Kreislauf: Icons im Ring auf der Flaeche, Boxen innerhalb */
.im-wrap { position:relative; }
.im-wrap .im-map { display:block; width:100%; height:auto; }
.im-wrap .im-ring { fill:none; stroke:var(--im-flow); stroke-width:1.8; stroke-dasharray:1.2 1.6; animation:imDash 60s linear infinite; }
.im-wrap .im-spoke { stroke:var(--im-flow); stroke-width:1.2; stroke-dasharray:3 7; opacity:.45; animation:imDash 14s linear infinite; }
.im-card { position:absolute; background:var(--ld-panel); border:1px solid var(--ld-line); border-radius:8px;
  padding:12px 16px 14px; box-shadow:var(--ld-card-shadow); box-sizing:border-box;
  transition:border-color .4s, transform .4s; }

/* ══════════ Eignungs-Grafik, moderne Fassung (10.08.2026) ══════════
   Zahnraeder werden zu schlichten Kreisen: weisse Flaeche, gruener Rand,
   gruenes Icon. Die kleinen Deko-Zahnraeder dazwischen entfallen ganz,
   die Verbindungslinien und die Isometrie in der Mitte bleiben. Karten
   mit 14px Ecken und weichem Schatten.
   ACHTUNG Reichweite: Nur die Zahnrad-Variante (Beratungsseite DE/EN).
   Die uebrigen Seiten zeigen eine isometrische Grafik, deren Kacheln
   teils ebenfalls circle-Elemente enthalten - daher ueberall :has(> .cog). */
.im-wrap .cog.rev { display:none; }
.im-map > g:has(> .cog.rev) > circle { display:none; }
.im-tile:has(> .cog) > .cog { display:none; }
/* Zwei Kreise uebereinander: aussen der gruene Ring auf weisser Flaeche -
   er deckt die gepunktete Linie ab, die dadurch mit Abstand endet.
   Innen eine zarte gruene Scheibe als Untergrund fuers Icon. */
.im-tile:has(> .cog) > circle:nth-of-type(1) { r:50px; fill:var(--ld-bg);
  stroke:#4CB783; stroke-width:2px; }
/* Innerer weisser Kreis mit Abstand zur Outline - zwischen r40 und r58
   bleibt der Seitengrund stehen, der Ring beruehrt die Flaeche nicht. */
.im-tile:has(> .cog) > circle:nth-of-type(2) { r:34px; fill:#FFFFFF; stroke:none; }

/* Icons kleiner: die Kacheln wurden zugleich im SVG naeher an die Mitte
   gerueckt (Radius 410 -> 348), siehe translate-Werte im Markup. */

/* Beide Ringe entfallen (10.08.2026) - die Verbindung stellen jetzt
   allein die kurzen Striche her, die von den Icons nach aussen zeigen. */
.im-wrap .im-ring { display:none; }

/* ══════════ Kreis-Badges auf den uebrigen Leistungsseiten (12.08.2026) ══
   Die isometrischen Satelliten (Wuerfel auf Plattformen) sind durch
   dieselben Kreis-Badges ersetzt wie auf der Beratungsseite - eigene
   Klassen (im-kreis/ik-*), damit keine Regel mehr versehentlich die
   jeweils andere Grafik-Variante trifft. Gestrichelte Speichen entfallen,
   die kurzen Striche (.im-ray) uebernehmen die Verbindung. */
.im-wrap .im-spoke { display:none; }
.ik-ring { fill:var(--ld-bg); stroke:#4CB783; stroke-width:2; }
.ik-flaeche { fill:#FFFFFF; }
.ik-icon { fill:none; stroke:#1a663f; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.im-tile.lit .ik-ring, .im-kreis.lit .ik-ring { stroke:#1a663f; }
html.dark .ik-ring { fill:#0E1411; }
html.dark .ik-flaeche { fill:rgba(111,212,164,.1); }
html.dark .ik-icon { stroke:#6FD4A4; }

/* Dieselbe Kreis-Fassung fuer die kleinen Kartengrafiken (.im-ico), die
   mobil anstelle der Sternanordnung erscheinen - sonst zeigten sie
   weiterhin Zahnraeder, waehrend der Desktop Kreise hat. */
.im-ico:has(.cog) .cog { display:none; }
.im-ico:has(.cog) .im-shadow { display:none; }
.im-ico:has(.cog) circle:nth-of-type(1) { r:32px; fill:var(--ld-bg); stroke:#4CB783; stroke-width:1.6px; }
.im-ico:has(.cog) circle:nth-of-type(2) { r:21px; fill:#FFFFFF; stroke:none; }
.im-ico:has(.cog) g[stroke] { stroke:#1a663f; }
.im-ico:has(.cog) text { fill:#1a663f; }
html.dark .im-ico:has(.cog) circle:nth-of-type(1) { fill:#0E1411; stroke:#4CB783; }
html.dark .im-ico:has(.cog) circle:nth-of-type(2) { fill:rgba(111,212,164,.1); }
html.dark .im-ico:has(.cog) g[stroke] { stroke:#6FD4A4; }
html.dark .im-ico:has(.cog) text { fill:#6FD4A4; }
.im-ray { stroke:var(--im-flow); stroke-width:1.6; stroke-linecap:round; opacity:.5; }
html.dark .im-ray { opacity:.4; }

/* Weicher Schein, der von der Isometrie ausgeht. Mobil ist die
   Sternanordnung ausgeblendet und die Karten stehen untereinander -
   dort haette der Schein keinen Bezug mehr und wird abgeschaltet. */
@media (max-width:900px) { .im-wrap::before { display:none; } }
.im-wrap { position:relative; }
.im-wrap::before { content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:52%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(111,212,164,.20) 0%, rgba(111,212,164,.07) 42%, rgba(111,212,164,0) 70%);
  pointer-events:none; }
.im-wrap .im-map { position:relative; }
.im-tile:has(> .cog) g[stroke] { stroke:#1a663f; }
/* Ein Icon ist ein Schriftzeichen (€) statt einer Linienzeichnung - es
   braucht fill statt stroke, sonst bliebe es weiss auf weissem Kreis. */
.im-tile:has(> .cog) text { fill:#1a663f; }
.im-tile.lit:has(> .cog) > circle:nth-of-type(1) { stroke:#1a663f; }
html.dark .im-tile:has(> .cog) > circle:nth-of-type(1) { fill:#0E1411; stroke:#4CB783; }
html.dark .im-tile:has(> .cog) > circle:nth-of-type(2) { fill:rgba(111,212,164,.1); }
html.dark .im-tile:has(> .cog) g[stroke] { stroke:#6FD4A4; }
html.dark .im-tile:has(> .cog) text { fill:#6FD4A4; }

.im-card { border-radius:14px; border-color:rgba(11,12,14,.07);
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 12px 30px rgba(11,12,14,.07); }
html.dark .im-card { border-color:rgba(244,246,243,.12); box-shadow:0 14px 36px rgba(0,0,0,.35); }

/* ══════════ Eignungs-Grafik: mehr Luft (10.08.2026) ══════════
   Karten wirkten gedrungen und die Schrift war sehr klein. Breite bleibt,
   weil die Positionen im Markup auf 17% ausgelegt sind - die Karten
   wachsen also nach unten, nicht zur Seite. */
.im-card { padding:clamp(14px,1.4vw,20px) clamp(16px,1.5vw,22px) clamp(16px,1.5vw,22px); }

/* Die gestrichelten Ringe waren kaum zu sehen - etwas kraeftiger. */
.im-wrap .im-ring { stroke-width:1.5; stroke-dasharray:2 3.4; opacity:.75; }

.im-card .im-ico { display:none; }
.im-card strong { display:block; font-size:clamp(14.5px,1.25vw,18px); line-height:1.25; font-weight:650; letter-spacing:-.01em; color:var(--ld-ink); }
.im-card span { display:block; margin-top:4px; font-size:clamp(11.5px,.98vw,13.5px); font-weight:400; line-height:1.55; color:var(--ld-ink2); }
.im-card.lit { border-color:var(--ld-acc2); transform:translateY(-5px); }
/* Icons schweben sanft; Windrad dreht */
.im-float { transform-box:fill-box; transform-origin:center; animation:imFloat 5s ease-in-out infinite; }
@keyframes imFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.im-rotorgrp { animation:imRotor 7s linear infinite; }
@keyframes imRotor { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .im-float, .im-rotorgrp, .im-wrap .im-ring, .im-wrap .im-spoke { animation:none; } }
/* Mobile: keine Map - Boxen laufend untereinander, mit animierten Icons */
@media (max-width:820px) {
  .im-wrap .im-map { display:none; }
  .im-wrap { display:grid; grid-template-columns:1fr; gap:14px; }
  .im-card { position:static !important; width:auto !important; }
  .im-card .im-ico { display:block; width:52%; max-width:170px; margin:0 auto 4px; }
}

/* Nummerierung in den Branchen-Boxen (Stil der Sektions-Auszeichnung) */
.im-n { display:block; margin:0 0 9px; font-style:normal; font-size:clamp(10.5px,.85vw,12px); font-weight:700; letter-spacing:.14em; color:var(--ld-ink3); font-variant-numeric:tabular-nums; }
.im-card.lit .im-n, .ld-chip.lit .im-n { color:var(--ld-acc2); }

/* Miniatur-Muenchen-Insel im Zentrum (Tag-Palette) */
:root {
  --imd-grass:#e3ece5; --imd-grass2:#d6e4da; --imd-soil:#2a4437; --imd-soil2:#1d3328;
  --imd-river:#2e7d5b; --imd-alp:#c5d5c9; --imd-snow:#FFFFFF;
  --imd-bt:#f4f6f3; --imd-bf:#dfe6e0; --imd-bs:#c8d3cb;
  --imd-tree:#4c8f68; --imd-trunk:#2a4437; --imd-dome:#1a663f; --imd-foam:rgba(255,255,255,.75);
}
html.dark {
  --imd-grass:#1c2a22; --imd-grass2:#22332a; --imd-soil:#0c1712; --imd-soil2:#081009;
  --imd-river:#2e8c5e; --imd-alp:#2b3d32; --imd-snow:#e8efe9;
  --imd-bt:#33423a; --imd-bf:#26332c; --imd-bs:#1d2922;
  --imd-tree:#3aa06f; --imd-trunk:#0c1712; --imd-dome:#6fd4a4; --imd-foam:rgba(232,239,233,.7);
}
.im-wrap .imd-grass { fill:var(--imd-grass); stroke:var(--im-line); stroke-width:1; }
.im-wrap .imd-grass2 { fill:var(--imd-grass2); }
.im-wrap .imd-soil { fill:var(--imd-soil); }
.im-wrap .imd-soil2 { fill:var(--imd-soil2); }
.im-wrap .imd-river { fill:var(--imd-river); }
.im-wrap .imd-rdash { fill:none; stroke:var(--imd-foam); stroke-width:1.4; stroke-dasharray:5 7; animation:imDash 9s linear infinite; }
.im-wrap .imd-foam { fill:var(--imd-foam); }
.im-wrap .imd-alp { fill:var(--imd-alp); }
.im-wrap .imd-snow { fill:var(--imd-snow); }
.im-wrap .imd-bt { fill:var(--imd-bt); }
.im-wrap .imd-bf { fill:var(--imd-bf); }
.im-wrap .imd-bs { fill:var(--imd-bs); }
.im-wrap .imd-tree { fill:var(--imd-tree); }
.im-wrap .imd-trunk { stroke:var(--imd-trunk); stroke-width:2; }
.im-wrap .imd-dome { fill:var(--imd-dome); }
.im-wrap .imd-domecap { fill:var(--imd-snow); }
.im-wrap .imd-sign { fill:var(--imd-bt); }
.im-wrap .imd-mkco { fill:var(--ld-ink3); font-family:"Helvetica Now Text", Helvetica, Arial, sans-serif; font-size:10px; font-weight:500; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
html.dark .im-logo { filter:brightness(0) invert(1); }

/* ── Rechter Rand: Inhalt endet auf Hoehe des Light/Dark-Buttons (fixed, right:76px)
   und laeuft nicht mehr unter die Scroll-Rail (#ldi-rail, 64px breit).
   Erst ab 980px, denn darunter blendet landing.js die Rail aus. ── */
@media (min-width:980px) {
  .ld-wrap { padding-right:76px; }
  .ld-stage-photo { right:0; }
  .ld-card-kpi { right:0; }
}

/* ══════════ Bento-Sektion, moderne Fassung (10.08.2026) ══════════
   Leitkarte dunkel mit Mint-Akzent, Faktenkarten hell auf weiss.
   Runde Ecken, weicher Schatten, ruhigere Typo. Gilt fuer alle
   Leistungs-Seiten mit .ld-bento. Die Leitkarte wird ueber das Fehlen
   eines Modifikators angesprochen - so bleiben zweite Bento-Reihen (nur green+dark) hell. */
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) { background:#0B0C0E; color:#F4F6F3; border:0; border-radius:14px;
  box-shadow:0 18px 50px rgba(11,12,14,.12); }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-pill { border:0; background:rgba(244,246,243,.10);
  color:rgba(244,246,243,.86); letter-spacing:.13em; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-pill i { color:#6FD4A4; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-bento-big { font-size:clamp(24px,2.2vw,34px); line-height:1.16; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-bento-big em { color:#6FD4A4; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-bento-copy { color:rgba(244,246,243,.62); }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-more { align-self:flex-start; margin-top:auto; padding:9px 9px 9px 20px;
  background:#F4F6F3; color:#0B0C0E; border-radius:999px; font-size:14px; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-more-circ { width:30px; height:30px; background:#0B0C0E; color:#F4F6F3; }
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-more:hover .ld-more-circ { background:#1a663f; }
html.dark .ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) { background:#080B0A; border:1px solid rgba(244,246,243,.12); }

.ld-bento-green, .ld-bento-dark { background:var(--ld-panel); color:var(--ld-ink);
  border:1px solid rgba(11,12,14,.08); border-radius:14px;
  box-shadow:0 18px 50px rgba(11,12,14,.06); }
html.dark .ld-bento-green, html.dark .ld-bento-dark { border-color:rgba(244,246,243,.12); }
.ld-bento-green h3, .ld-bento-dark h3 { margin:0 0 18px; font-size:clamp(21px,1.9vw,30px);
  font-weight:700; line-height:1.18; letter-spacing:-.02em; }
.ld-bento-green .ld-fact, .ld-bento-dark .ld-fact { color:var(--ld-ink2);
  border-top:0; padding:5px 0; margin:7px 0; }
.ld-bento-green .ld-fact i, .ld-bento-dark .ld-fact i { color:#4FBF8B; }
html.dark .ld-bento-green .ld-fact i, html.dark .ld-bento-dark .ld-fact i { color:#6FD4A4; }

/* ══════════ Info-Kacheln, moderne Fassung (10.08.2026) ══════════
   Runde Ecken, weicher Schatten, groessere Icon-Flaeche in Mintgruen,
   mehr Innenabstand und Zeilenluft. Foto-Kacheln (.ld-card-photo)
   bleiben ausgenommen, die haben ihr eigenes Layout. */
.ld-cards { gap:clamp(18px,2.2vw,28px); }
.ld-card:not(.ld-card-photo) { border-radius:14px; border-color:rgba(11,12,14,.07);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 14px 36px rgba(11,12,14,.06);
  transition:border-color .25s, transform .25s, box-shadow .25s; }
.ld-card:not(.ld-card-photo):hover { border-color:rgba(11,12,14,.07);
  box-shadow:0 2px 4px rgba(11,12,14,.05), 0 22px 50px rgba(11,12,14,.10); }
.ld-card:not(.ld-card-photo) .ic { width:60px; height:60px; border-radius:14px;
  background:rgba(79,191,139,.14); color:#2C6E4E; font-size:22px; margin-bottom:24px; }
.ld-card:not(.ld-card-photo) h3 { margin:0 0 12px; font-size:22px; font-weight:700; }
.ld-card:not(.ld-card-photo) p { line-height:1.75; }
html.dark .ld-card:not(.ld-card-photo) { border-color:rgba(244,246,243,.12);
  box-shadow:0 14px 36px rgba(0,0,0,.35); }
html.dark .ld-card:not(.ld-card-photo) .ic { background:rgba(111,212,164,.16); color:#6FD4A4; }

/* Ablauf-Kacheln in derselben Sprache, damit nebeneinander nichts abfaellt */
.ld-step { border-radius:14px; border-color:rgba(11,12,14,.07);
  padding:clamp(24px,2.4vw,30px);
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 14px 36px rgba(11,12,14,.06); }
html.dark .ld-step { border-color:rgba(244,246,243,.12); box-shadow:0 14px 36px rgba(0,0,0,.35); }
/* Foto-Kacheln behalten ihr Layout, bekommen aber denselben Radius */
.ld-card.ld-card-photo { border-radius:14px; }

/* ══════════ Ablauf-Sektion, moderne Fassung (10.08.2026) ══════════
   Aus den Chevron-Pfeilen wird eine Schiene mit nummerierten Kreisen.
   Die Karten sitzen wie bisher abwechselnd ueber und unter der Schiene und
   werden beim Scrollen nacheinander eingeblendet (landing.js setzt .is-an).
   Markup bleibt unveraendert - Schiene und Kreis sind Pseudo-Elemente. */
.ld-chev { column-gap:0; }
.ld-chev-a { position:relative; z-index:0; height:clamp(70px,7.5vw,92px);
  background:none !important; color:var(--ld-ink3);
  clip-path:none !important; border-radius:0;
  font-size:clamp(15px,1.3vw,19px); font-weight:700; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; transition:color .45s ease; }
.ld-chev-a::before {           /* Schiene */
  content:""; position:absolute; z-index:-1; left:-1px; right:-1px; top:50%;
  transform:translateY(-50%); height:3px; border-radius:8px;
  background:rgba(11,12,14,.10); transition:background .5s ease; }
.ld-chev-a::after {            /* Kreis */
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:clamp(46px,4.6vw,58px); height:clamp(46px,4.6vw,58px);
  transform:translate(-50%,-50%) scale(.86); border-radius:50%;
  background:var(--ld-panel); border:2px solid rgba(11,12,14,.13);
  /* Ring in Seitenfarbe: die Schiene laeuft dahinter durch und endet
     dadurch mit sichtbarem Abstand zum Kreis (10.08.2026). */
  box-shadow:0 0 0 7px var(--ld-bg);
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
/* Nummer sitzt optisch einen Tick zu hoch - 1px tiefer. */
.ld-chev-a { padding-top:2px; }
html.dark .ld-chev-a::before { background:rgba(244,246,243,.14); }
html.dark .ld-chev-a::after { border-color:rgba(244,246,243,.18); }

/* erreichter Schritt */
.ld-chev-s.is-an .ld-chev-a { color:#2C6E4E; }
.ld-chev-s.is-an .ld-chev-a::before { background:#3E9C7C; }
.ld-chev-s.is-an .ld-chev-a::after { border-color:#3E9C7C; transform:translate(-50%,-50%) scale(1); }
html.dark .ld-chev-s.is-an .ld-chev-a { color:#6FD4A4; }
html.dark .ld-chev-s.is-an .ld-chev-a::before { background:#4FBF8B; }
html.dark .ld-chev-s.is-an .ld-chev-a::after { border-color:#4FBF8B; }
/* letzter Schritt: Schiene laeuft nach dem Kreis aus */
.ld-chev-s:last-child .ld-chev-a::before { right:50%; border-radius:0 8px 8px 0; }
.ld-chev-s:first-child .ld-chev-a::before { left:calc(50% - 26px); }

/* ══════════ Zeitleiste mobil: senkrecht statt waagerecht (10.08.2026) ══════════
   Untereinander gestapelt ergibt eine liegende Schiene keinen Sinn - sie
   wird abgeschaltet und durch eine senkrechte Linie ersetzt, die den Kreis
   mit dem naechsten Schritt verbindet. Der Kreis sitzt links, die Karte
   rueckt daneben. */
@media (max-width:900px) {
  .ld-chev-s { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr);
    column-gap:16px; align-items:start; margin-bottom:0; padding-bottom:22px; }
  /* !important, weil im Markup an beiden Elementen ein Inline-Style
     grid-column:1 steht (Reste des sechsspaltigen Desktop-Rasters). */
  /* padding:0 - sonst schiebt ein geerbter linker Innenabstand (23px) die
     Zahl nach rechts und der Kreis liegt neben der senkrechten Linie. */
  .ld-chev-a { grid-column:1 !important; grid-row:1 !important;
    width:56px; height:56px !important; padding:0 !important;
    display:flex; align-items:center; justify-content:center;
    font-size:17px !important; }
  .ld-chev-a::before { display:none; }          /* liegende Schiene aus */
  .ld-chev-a::after { width:50px; height:50px; transform:translate(-50%,-50%) scale(1);
    box-shadow:none; }
  /* senkrechte Verbindung bis zum naechsten Kreis */
  .ld-chev-s::before { content:""; position:absolute; left:28px; transform:translateX(-50%);
    top:56px; bottom:0; width:3px; border-radius:8px; background:rgba(11,12,14,.10); }
  .ld-chev-s:last-child::before { display:none; }
  .ld-chev-s.is-an::before { background:#3E9C7C; }
  html.dark .ld-chev-s::before { background:rgba(244,246,243,.14); }
  html.dark .ld-chev-s.is-an::before { background:#4FBF8B; }
  .ld-chev-t, .ld-chev-t.top, .ld-chev-t.bot { grid-column:2 !important;
    grid-row:1 !important; margin:0; padding:0; align-self:start; text-align:left; }
}

/* Karten */
.ld-chev-t { margin:0 10px; text-align:left;
  opacity:0; transform:translateY(12px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.ld-chev-s.is-an .ld-chev-t { opacity:1; transform:none; }
.ld-chev-box { border-radius:14px; border-color:rgba(11,12,14,.07); padding:18px 20px 20px;
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 12px 30px rgba(11,12,14,.07); }
html.dark .ld-chev-box { border-color:rgba(244,246,243,.12); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.ld-chev-t h3 { font-size:18px; font-weight:700; margin:0 0 8px; }
.ld-chev-t p { line-height:1.65; }
.ld-chev-line { border-left-color:rgba(11,12,14,.22); }
.ld-chev-s.is-an .ld-chev-line { color:#3E9C7C; border-left-color:rgba(62,156,124,.5); }

@media (prefers-reduced-motion: reduce) {
  .ld-chev-t { opacity:1; transform:none; }
  .ld-chev-a::after { transform:translate(-50%,-50%) scale(1); }
}
/* Mobil: Kreis links, Karte darunter - keine Schiene */
@media (max-width:980px) {
  .ld-chev-a { height:auto; min-height:58px; justify-content:flex-start; padding-left:23px;
    font-size:16px !important; }
  .ld-chev-a::before { display:none; }
  .ld-chev-a::after { left:23px; width:46px; height:46px; transform:translate(-50%,-50%) scale(1); }
  .ld-chev-t { margin:0; opacity:1; transform:none; }
}

/* Foto-Kacheln: drei pro Reihe statt vier, rundere Icon-Flaeche.
   Nur Raster, die Foto-Kacheln enthalten - die Icon-Raster bleiben
   bei ihrer automatischen Spaltenzahl. */
.ld-cards:has(.ld-card-photo) { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px) { .ld-cards:has(.ld-card-photo) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .ld-cards:has(.ld-card-photo) { grid-template-columns:1fr; } }
.ld-card-photo .ic { border-radius:14px; width:52px; height:52px; top:18px; left:18px;
  box-shadow:0 6px 18px rgba(11,12,14,.18); }

/* ══════════ Use-Case-Karten, moderne Fassung (10.08.2026) ══════════
   Ecken 8px, wieder schwarzer Grund (Stand 10.08.2026 abends), Nummer klein
   mit Trennstrich, Schlagworte als gefuellte Pillen, Panel innen mit 8px.
   Das Stapel-Verhalten beim Scrollen bleibt unveraendert. */
.ld-stackcard { border-radius:8px;
  background:radial-gradient(120% 100% at 76% 24%, #17251d 0%, #0b100d 64%); }

/* Kopfzeile: kleine Nummer, Trennstrich, Kicker */
.ld-sc-top { align-items:center; gap:14px; }
.ld-sc-num { font-size:clamp(15px,1.3vw,19px); color:rgba(244,246,243,.55); letter-spacing:.02em; }
.ld-sc-kicker { display:inline-flex; align-items:center; gap:14px; color:rgba(244,246,243,.62); }
.ld-sc-kicker::before { content:""; width:clamp(22px,3vw,42px); height:1px; flex:none;
  background:rgba(244,246,243,.3); }

/* Schlagworte als Outline-Pillen (10.08.2026): Rand statt Fuellung,
   Ecken 8px wie Karte und Panel. Groesse und Abstaende bleiben. */
.ld-sc-tag { border:1px solid rgba(244,246,243,.32); border-radius:8px;
  padding:9px 17px; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  background:transparent; color:rgba(244,246,243,.88); }

/* Panel innen */
.ld-win { border-radius:8px; border-color:rgba(244,246,243,.08);
  box-shadow:0 24px 64px rgba(0,0,0,.4); }

/* ══════════ Use-Case-Panels: leichte Dauerbewegung (10.08.2026) ══════════
   Das Panel schwebt minimal, die Fortschrittsbalken bekommen ein langsam
   wanderndes Highlight - je Zeile versetzt. Rein dekorativ: nichts
   veraendert seine Groesse, es entsteht kein Umbruch. Nur in den
   Use-Case-Karten, andere Panels (z. B. Flow) bleiben unberuehrt. */
.ld-stackcard .ld-win { animation:ldWinFloat 9s ease-in-out infinite; will-change:transform; }
.ld-stackcard:nth-of-type(2) .ld-win { animation-delay:-2.2s; }
.ld-stackcard:nth-of-type(3) .ld-win { animation-delay:-4.4s; }
.ld-stackcard:nth-of-type(4) .ld-win { animation-delay:-6.6s; }
.ld-stackcard:nth-of-type(5) .ld-win { animation-delay:-1.1s; }
@keyframes ldWinFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

.ld-stackcard .ld-wr-txt i { position:relative; overflow:hidden; }
.ld-stackcard .ld-wr-txt i::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(111,212,164,.45) 50%, transparent 100%);
  transform:translateX(-100%); animation:ldBarSheen 4.2s ease-in-out infinite; }
.ld-stackcard .ld-win-row:nth-child(3) .ld-wr-txt i::after { animation-delay:.45s; }
.ld-stackcard .ld-win-row:nth-child(4) .ld-wr-txt i::after { animation-delay:.9s; }
@keyframes ldBarSheen { 0% { transform:translateX(-100%); } 60%,100% { transform:translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .ld-stackcard .ld-win { animation:none; }
  .ld-stackcard .ld-wr-txt i::after { animation:none; opacity:0; }
}


/* Hero rechts: hinteres Foto 8px, die davorliegenden Karten 16px */
.ld-stage-photo { border-radius:8px; }
.ld-float { border-radius:14px; }

/* ══════════ Phasen-Kacheln, moderne Fassung (10.08.2026) ══════════
   Grosse Mint-Nummer oben links, rechts daneben das Wochen-Label als
   Mint-Pille, darunter Titel und Text. */
.ld-step { display:grid; align-items:start;
  grid-template-areas:"nummer pille" "titel titel" "text text";
  grid-template-columns:auto 1fr;
  grid-template-rows:clamp(36px,3.4vw,48px) auto auto;
  padding:clamp(26px,2.6vw,34px); }
.ld-step::before { grid-area:nummer; align-self:center;
  font-size:clamp(34px,3.2vw,46px); font-weight:700; line-height:1;
  letter-spacing:-.02em; color:#A3D2BA; }
.ld-step em { grid-area:pille; justify-self:end; align-self:center;
  font-style:normal; display:inline-flex; align-items:center; justify-content:center;
  margin:0; padding:10px 17px; line-height:1;
  border:1px solid #A3D2BA; border-radius:8px;
  background:transparent; color:#A3D2BA;
  font-size:12.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; }
.ld-step h3 { grid-area:titel; margin:clamp(18px,2vw,26px) 0 10px;
  font-size:20px; font-weight:700; }
.ld-step p { grid-area:text; margin:0; }
html.dark .ld-step::before { color:rgba(111,212,164,.55); }
html.dark .ld-step em { border-color:rgba(163,210,186,.45); color:#A3D2BA; }

/* ══════════ Zweispalter Text/Bild (06, 07) und Text/Kacheln (08) ══════════
   Kopf und Inhalt links, Medium rechts; --flip dreht die Seiten.
   Ab 900px Breite gestapelt, Bild dann oben. */
.ld-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px); align-items:center; margin-top:clamp(20px,3vh,34px); }
.ld-duo .ld-sec-head { max-width:none; margin:0; }
.ld-duo-media { min-width:0; }
.ld-duo-media img { display:block; width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; border-radius:14px; }
.ld-duo--flip .ld-duo-text { order:2; }

/* Fakten unter dem Text (06) */
.ld-duo-facts { margin-top:clamp(20px,2.6vh,30px); }
.ld-duo-facts h3 { margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ld-ink3); }
.ld-duo-facts h3 + .ld-fact { border-top:0; }
.ld-duo-facts .ld-fact:last-child { padding-bottom:0; }
.ld-duo-facts > h3 ~ h3 { margin-top:22px; }

/* Kachelraster (08) */
.ld-duo-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px); }
.ld-duo-cards .ld-chip, .ld-chips .ld-chip { flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--ld-panel); border:1px solid rgba(11,12,14,.07); border-radius:14px;
  padding:clamp(16px,1.6vw,20px); font-size:14px; font-weight:700; line-height:1.35;
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 12px 30px rgba(11,12,14,.06); }
.ld-duo-cards .ld-chip:hover, .ld-chips .ld-chip:hover { border-color:rgba(11,12,14,.07); transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,12,14,.05), 0 18px 42px rgba(11,12,14,.10); }
.ld-duo-cards .ld-chip i, .ld-chips .ld-chip i { width:40px; height:40px; border-radius:12px; flex:none;
  background:rgba(79,191,139,.14); color:#2C6E4E;
  display:flex; align-items:center; justify-content:center; font-size:15px; }
html.dark .ld-duo-cards .ld-chip, html.dark .ld-chips .ld-chip { border-color:rgba(244,246,243,.12); box-shadow:0 12px 30px rgba(0,0,0,.35); }
html.dark .ld-duo-cards .ld-chip i, html.dark .ld-chips .ld-chip i { background:rgba(111,212,164,.16); color:#6FD4A4; }

@media (max-width:900px) {
  .ld-duo { grid-template-columns:1fr; gap:24px; }
  .ld-duo--flip .ld-duo-text { order:0; }
  .ld-duo-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) { .ld-duo-cards { grid-template-columns:1fr; } }
/* Halbe Spaltenbreite: Ueberschrift kleiner, lange Komposita trennen */
.ld-duo .ld-sec-head h2 { font-size:clamp(22px,2.1vw,31px); hyphens:auto; overflow-wrap:break-word; }
.ld-duo .ld-sec-head .ld-sec-sub { max-width:none; }
/* Bildkacheln um ein Drittel hoeher (380/30vw/460 -> 507/40vw/613) */
.ld-card-photo { min-height:clamp(507px,40vw,613px); }
/* Buttons einheitlich: derselbe Radius wie der Menue-Button (#nav-cta, 4px).
   Die Pille aus der Bento-Leitkarte wird dadurch wieder ein Button. */
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-more { border-radius:8px; }

/* Hero-CTA gefuellt in Gruen statt Umriss */
.ld-btn-ghost { background:#4CB783; border-color:#4CB783; color:#FFFFFF; }
.ld-btn-ghost:hover { background:#3A9E6D; border-color:#3A9E6D; color:#FFFFFF; }
html.dark .ld-btn-ghost { background:#4CB783; border-color:#4CB783; color:#06110C; }
html.dark .ld-btn-ghost:hover { background:#6FD4A4; border-color:#6FD4A4; color:#06110C; }
/* Mindestabstand zwischen Text und Button in der Bento-Leitkarte.
   Der Button haengt an margin-top:auto (bodenbuendig) - der Abstand muss
   daher vom Absatz kommen, sonst klebt er bei voller Karte am Text. */
.ld-bento-panel:not(.ld-bento-green):not(.ld-bento-dark) .ld-bento-copy {
  margin-bottom:clamp(26px,2.8vw,38px); }

/* Flache Chip-Reihe: breitere Spalten, damit die Labels nicht abgeschnitten
   werden - Kartenoptik kommt aus der Regel oben. */
.ld-chips { grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:clamp(10px,1.2vw,16px); }
.ld-chips .ld-chip { white-space:normal; }

/* ══════════ Beispiel-Workflow als nummerierte Karten (10.08.2026) ══════════
   Aus der Icon-Reihe mit gestrichelten Verbindern werden Karten mit grosser
   Mint-Nummer. Panel, Kopfzeile, Icons und Verbinder fallen weg; die zwei
   Fusszeilen werden zu einer Zeile. Nummern per CSS-Zaehler - das Markup
   bleibt unveraendert. */
.ld-flowpanel { background:none; border:0; border-radius:0; overflow:visible; }
.ld-flowpanel > .ld-win-bar { display:none; }
.ld-flow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px); padding:0; align-items:stretch; counter-reset:ldflow; }
.ld-flow-link { display:none; }
.ld-flow-node { width:auto; text-align:left; background:var(--ld-panel);
  border:1px solid rgba(11,12,14,.07); border-radius:14px;
  padding:clamp(16px,1.6vw,22px);
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 12px 30px rgba(11,12,14,.06); }
.ld-flow-node .nd { display:none; }
.ld-flow-node::before { counter-increment:ldflow;
  content:counter(ldflow,decimal-leading-zero); display:block;
  font-family:'Helvetica Now Display',sans-serif; font-weight:700;
  font-size:clamp(26px,2.4vw,34px); line-height:1; letter-spacing:-.02em;
  color:#A3D2BA; margin-bottom:clamp(14px,1.6vw,20px); }
.ld-flow-node strong { margin-top:0; font-size:clamp(12px,1vw,14px); font-weight:700; line-height:1.3; }
.ld-flow-node em { margin-top:8px; font-size:clamp(11px,.85vw,12.5px); line-height:1.45; }
html.dark .ld-flow-node { border-color:rgba(244,246,243,.12); box-shadow:0 12px 30px rgba(0,0,0,.35); }
html.dark .ld-flow-node::before { color:rgba(111,212,164,.55); }
/* Fusszeile: eine Zeile ohne Trennlinie */
.ld-flowpanel > .ld-win-foot { border-top:0 !important; display:block;
  padding:clamp(14px,1.8vh,20px) 0 0; font-size:12px; font-weight:700; line-height:1.5; }
.ld-flowpanel > .ld-win-foot span::after { content:" - "; }
.ld-flowpanel > .ld-win-foot b { font-weight:700; }

@media (max-width:1180px) { .ld-flow { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) {
  .ld-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ld-flow-node { display:block; }
}
@media (max-width:430px) { .ld-flow { grid-template-columns:1fr; } }

/* ══════════ Logo-Wand ohne Kacheln (10.08.2026) ══════════
   Die Logos stehen frei auf dem Seitengrund statt in weissen Kaesten. */
.ld-lw-grid { grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(16px,2.2vw,34px) clamp(14px,1.8vw,28px); }
.ld-lw-tile { background:none; border:0; box-shadow:none; height:auto;
  min-height:clamp(44px,4vw,58px); padding:0; }
html.dark .ld-lw-tile { border-color:transparent; }
.ld-lw-tile img { opacity:.55; max-width:100%; }
@media (max-width:900px) { .ld-lw-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { .ld-lw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ══════════ Ablauf-Leiste: fixieren bis alle Karten sichtbar sind ══════════
   Die Leiste klebt mittig im Fenster, waehrend die Scroll-Strecke des Tracks
   abgearbeitet wird - Karte fuer Karte. Danach scrollt die Seite normal
   weiter. Hoehe der Strecke und Klebe-Position setzt landing.js. */
@media (min-width:980px) {
  .ld-chev-track { position:relative; height:var(--chevtrack,260vh); }
  .ld-chev { position:sticky; top:var(--chevtop,12vh); margin-top:0; }
  /* Zahlen optisch mittig: line-height:normal laesst unter Ziffern Luft */
  .ld-chev-a { line-height:1; }
  /* Breitere Textboxen: symmetrisch ueber die Nachbarspalten,
     damit der gepunktete Strich weiter auf den Kreis zeigt. */
  .ld-chev-t { width:calc(160% - 20px); margin-left:calc(-30% + 10px); }
  .ld-chev-s:first-child .ld-chev-t { width:calc(130% - 10px); margin-left:0; }
  .ld-chev-s:first-child .ld-chev-line { margin-left:38.5%; margin-right:auto; }
  .ld-chev-s:last-child .ld-chev-t { width:calc(130% - 10px); margin-left:calc(-30% + 10px); }
  .ld-chev-s:last-child .ld-chev-line { margin-left:61.5%; margin-right:auto; }
}

/* Weiterlesen-Kacheln mit Beschreibung: Titel fett, Text darunter grau */
.ld-chip strong { display:block; font-size:15px; font-weight:700; line-height:1.3;
  letter-spacing:-.01em; color:var(--ld-ink); }
.ld-chip em { display:block; margin-top:8px; font-style:normal; font-weight:400;
  font-size:13.5px; line-height:1.55; color:var(--ld-ink2); }

/* ══════════ Weiterlesen-Kacheln auf Kartengroesse (10.08.2026) ══════════
   Icon und Titel wie in den normalen Karten (.ld-card): 60px-Kachel mit
   22px-Glyphe, Titel 22px. Nur die Weiterlesen-Reihe (.ld-chips) - das
   Kachelraster .ld-duo-cards steht in schmaleren Spalten und bleibt klein. */
.ld-chips .ld-chip { gap:20px; padding:clamp(22px,2vw,28px); }
.ld-chips .ld-chip i { width:60px; height:60px; border-radius:14px; font-size:22px; }
.ld-chips .ld-chip strong { font-size:22px; margin-bottom:2px; }
.ld-chips .ld-chip em { font-size:15px; line-height:1.75; margin-top:10px; }
.ld-chips { align-items:stretch; }
.ld-chips .ld-chip, .ld-duo-cards .ld-chip { align-self:stretch; height:auto; }

/* Foto-Kacheln: groessere Headline, schwarzes Icon, eigene Projekt-Zeile */
.ld-card.ld-card-photo h3 { font-size:clamp(22px,2vw,30px); font-weight:700; letter-spacing:-.02em; }
.ld-card-photo .ic { background:#FFFFFF; color:#0B0C0E; }
.ld-card-go { position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px;
  padding:14px clamp(18px,2vw,24px) clamp(18px,2vw,24px);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.ld-card-go::after { content:"\2197"; font-size:15px; letter-spacing:0; }
.ld-card.ld-card-photo:hover .ld-card-go::after { transform:translate(2px,-2px); }
.ld-card-go::after { transition:transform .25s; }
/* Logo-Leiste bleibt ohne eigene Flaeche - Wunsch vom 10.08.2026 */
/* Icon-Plaketten auf Foto-Kacheln ohne Schatten */
.ld-card-photo .ic { box-shadow:none; }
/* Zahl und Zusatz in den Hero-Karten nicht zusammenkleben */
.ld-kpi-num small { margin-left:.18em; }
/* Uniklinikum-Kachel: Bildausschnitt nach links, damit die Person
   weiter in die Kachel hineinrueckt statt am Rand angeschnitten zu sein */
.ld-card-photo img[src*="ukt-header"] { object-position:12% 50%; }

/* ══════════ Prozess-Kreis: Zahnräder zu klaren Kreisen (10.08.2026) ══════════
   Die isometrische Mitte bleibt unverändert. Die kleinen Füllräder fallen weg,
   die acht Hauptknoten verlieren den Zahnkranz und werden ruhige weisse
   Scheiben mit feinem Rand - das Icon darin bleibt. */
.im-wrap .im-map g.cog:not(.rev) { display:none; }
.im-wrap .im-map g.cog.rev .im-p { display:none; }
.im-wrap .im-map g.cog.rev { animation:none !important; }
.im-wrap .im-map g.cog.rev + circle {
  transform:scale(1.6); transform-box:fill-box; transform-origin:center;
  fill:#FFFFFF; stroke:rgba(11,12,14,.10); stroke-width:1.4; }
html.dark .im-wrap .im-map g.cog.rev + circle { fill:var(--ld-panel); stroke:rgba(244,246,243,.16); }

/* ══════════ Ergebnis-Liste als dunkle Karten in drei Spalten (10.08.2026) ══════════ */
.ld-deliv { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px); margin-top:clamp(26px,4vh,44px); }
.ld-deliv-col { display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); }
.ld-deliv-lbl { margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ld-ink3); }
.ld-deliv .ld-fact { display:flex; align-items:flex-start; gap:14px; margin:0;
  background:#101418; border:0; border-radius:14px;
  padding:clamp(16px,1.7vw,20px) clamp(16px,1.8vw,22px);
  font-size:14.5px; line-height:1.45; color:rgba(244,246,243,.92); }
.ld-deliv .ld-fact i { flex:none; margin:0; width:28px; height:28px; border-radius:8px;
  background:rgba(79,191,139,.16); color:#6FD4A4; font-size:12px;
  display:flex; align-items:center; justify-content:center; }
html.dark .ld-deliv .ld-fact { background:#0B0E11; }
@media (max-width:900px) { .ld-deliv { grid-template-columns:1fr; gap:26px; } }

/* ══════════ Prioritaeten-Matrix im Kartenrahmen (10.08.2026) ══════════ */
.ld-matrix { margin:clamp(26px,4vh,44px) 0 0; background:#FFFFFF; border-radius:14px;
  border:1px solid rgba(11,12,14,.07);
  box-shadow:0 1px 2px rgba(11,12,14,.04), 0 14px 36px rgba(11,12,14,.06);
  padding:clamp(20px,2.4vw,32px); }
.ld-matrix svg { display:block; width:100%; height:auto; overflow:visible; }
.ld-matrix figcaption { padding:0 clamp(2px,.4vw,6px); }
html.dark .ld-matrix { background:var(--ld-panel); border-color:rgba(244,246,243,.12);
  box-shadow:0 14px 36px rgba(0,0,0,.35); }

/* ══════════ Logo-Wand: optisch gleiche Groessen (10.08.2026) ══════════
   Wortmarken brauchen weniger Hoehe als runde Marken, damit sie gleich
   gross wirken. Werte einzeln statt pauschal. */
.ld-lw-tile img[src*="logo-balluff"] { height:20px; }
.ld-lw-tile img[src*="logo-airlst"] { height:32px; }
.ld-lw-tile img[src*="zeppelin-rental"] { height:30px; }
.ld-lw-tile img[src*="logo-robodocxs"] { height:30px; }
.ld-lw-tile img[src*="logo-mercedes"] { height:36px; }
.ld-lw-tile img[src*="logo-bmw"] { height:42px; }
.ld-lw-tile img[src*="logo-paulaner"] { height:44px; }

/* ══════════ Case-Sektion im Karten-Layout (10.08.2026) ══════════
   Bild oben, darunter Gruppen-Label und dunkle Karten - wie die
   Ergebnis-Sektion. Panel und Bildverlauf fallen weg. */
.ld-case { background:none; border:0; border-radius:0; overflow:visible; }
.ld-case-media::after { display:none; }
.ld-case-media img { border-radius:14px; height:clamp(220px,26vw,380px); }
.ld-case-grid { padding:clamp(22px,3vh,34px) 0 0; gap:clamp(18px,2.4vw,32px); align-items:start; }
.ld-case-col { display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); }
.ld-case-col h3 { margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ld-ink3); }
.ld-case-col .ld-fact { display:flex; align-items:flex-start; gap:14px; margin:0;
  background:#101418; border:0; border-radius:14px;
  padding:clamp(16px,1.7vw,20px) clamp(16px,1.8vw,22px);
  font-size:14.5px; line-height:1.45; color:rgba(244,246,243,.92); }
.ld-case-col .ld-fact i { flex:none; margin:0; width:28px; height:28px; border-radius:8px;
  background:rgba(79,191,139,.16); color:#6FD4A4; font-size:12px;
  display:flex; align-items:center; justify-content:center; }
html.dark .ld-case-col .ld-fact { background:#0B0E11; }