/* Herr Services – Stylesheet v20 · Systemschrift, kein JavaScript */
:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --flaeche: #ffffff;
  --flaeche-2: #eef2f9;
  --text: #0b1220;
  --leise: #586179;
  --linie: rgba(11, 18, 32, .09);
  --akzent: #1d4ed8;
  --akzent-hell: #3b82f6;
  --akzent-zart: rgba(29, 78, 216, .08);
  --navy: #070d1f;
  --schatten: 0 1px 2px rgba(11, 18, 32, .04), 0 12px 32px rgba(11, 18, 32, .06);
  --schatten-gross: 0 30px 80px rgba(7, 13, 31, .18);
  --rund: 20px;
  --breite: 1200px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #060b18;
    --flaeche: #0c1428;
    --flaeche-2: #0f1932;
    --text: #e9eefb;
    --leise: #93a0bd;
    --linie: rgba(148, 170, 220, .13);
    --akzent: #7aa2ff;
    --akzent-hell: #9dbbff;
    --akzent-zart: rgba(122, 162, 255, .1);
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 17px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--schrift-titel); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
[id] { scroll-margin-top: 88px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--flaeche); padding: 8px 12px; border-radius: 8px; }
.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .rahmen { padding: 0 18px; } body { font-size: 16px; } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.015em; white-space: nowrap; }
.marke svg { width: 32px; height: 32px; border-radius: 8px; }
.marke span { color: var(--leise); font-weight: 500; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--leise); text-decoration: none; font-size: 15px; font-weight: 500; padding: 7px 12px; border-radius: 9px; transition: color .2s, background .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--akzent-zart); }
.nav .nav-knopf { margin-left: 8px; color: #fff; background: var(--akzent); padding: 8px 16px; }
.nav .nav-knopf:hover { color: #fff; background: #1e40af; }
@media (prefers-color-scheme: dark) { .nav .nav-knopf { color: #061024; background: #9dbbff; } .nav .nav-knopf:hover { color: #061024; background: #c3d6ff; } }
.menue { display: none; position: relative; }
.menue summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--linie); }
.menue summary::-webkit-details-marker { display: none; }
.menue summary span, .menue summary span::before, .menue summary span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .25s, background .25s; }
.menue summary span::before, .menue summary span::after { content: ""; position: absolute; left: 0; }
.menue summary span::before { top: -6px; } .menue summary span::after { top: 6px; }
.menue[open] summary span { background: transparent; }
.menue[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.menue[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.menue-feld { position: absolute; right: 0; top: 52px; width: min(80vw, 280px); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten-gross); padding: 8px; display: grid; }
.menue-feld a { padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; }
.menue-feld a:hover { background: var(--akzent-zart); }
.menue-feld .nav-knopf { margin-top: 6px; background: var(--akzent); color: #fff; text-align: center; }
@media (max-width: 880px) { .nav { display: none; } .menue { display: block; } }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.knopf:hover svg.pfeil { transform: translateX(3px); }
.knopf-voll { background: #fff; color: var(--navy); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.knopf-voll:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, .32); }
.knopf-glas { color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.knopf-glas:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); }
.knopf-akzent { background: var(--akzent); color: #fff; box-shadow: 0 8px 24px rgba(29, 78, 216, .25); }
.knopf-akzent:hover { transform: translateY(-1px); background: #1e40af; }
@media (prefers-color-scheme: dark) { .knopf-akzent { background: #9dbbff; color: #061024; } .knopf-akzent:hover { background: #c3d6ff; } }
.knopf-rand { color: var(--text); border: 1px solid var(--linie); background: var(--flaeche); }
.knopf-rand:hover { border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 85% 0%, #1b3fa8 0%, rgba(27, 63, 168, 0) 60%), radial-gradient(60% 70% at 0% 100%, #0f2463 0%, rgba(15, 36, 99, 0) 60%), linear-gradient(180deg, #070d1f 0%, #0a1430 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(157, 187, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 187, 255, .06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 80%); }
.hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, .35), transparent 65%); filter: blur(20px); animation: gluehen 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes gluehen { to { translate: -120px 80px; scale: 1.15; } }
.hero .rahmen { position: relative; z-index: 1; display: grid; gap: 56px; padding-top: 88px; padding-bottom: 96px; align-items: center; }
@media (min-width: 1000px) { .hero .rahmen { grid-template-columns: 1.05fr 1fr; padding-top: 112px; padding-bottom: 120px; } }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #c9d8ff; background: rgba(157, 187, 255, .08); border: 1px solid rgba(157, 187, 255, .2); padding: 7px 14px; border-radius: 999px; margin-bottom: 26px; }
.hero-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); letter-spacing: -.04em; font-weight: 700; margin-bottom: 22px; max-width: 13em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #9dbbff, #e2eaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-text > p { font-size: clamp(17px, 1.6vw, 19px); color: rgba(226, 234, 255, .76); max-width: 34em; margin-bottom: 34px; }
.hero .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-fakten { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 0; list-style: none; color: rgba(226, 234, 255, .7); font-size: 14px; }
.hero-fakten li { display: flex; align-items: center; gap: 8px; }
.hero-fakten svg { width: 16px; height: 16px; fill: none; stroke: #9dbbff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Hero-Grafik: drei Ebenen = drei Geschäftsbereiche */
.buehne { position: relative; width: min(100%, 540px); aspect-ratio: 1 / .92; margin: 0 auto; }
.glas { position: absolute; background: linear-gradient(160deg, rgba(23, 37, 84, .94), rgba(11, 20, 48, .97)); border: 1px solid rgba(157, 187, 255, .18); border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); color: #e2eaff; }
.glas-kopf { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(201, 216, 255, .7); margin-bottom: 14px; }
.glas-kopf b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #86efac; text-transform: none; letter-spacing: 0; }
.glas-kopf b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: puls-punkt 2.4s ease-in-out infinite; }
@keyframes puls-punkt { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
.b-system { left: 0; top: 6%; width: 64%; padding: 20px 22px; animation: schweben 14s ease-in-out infinite; z-index: 2; will-change: transform; }
.zeilen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.zeilen li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(157, 187, 255, .06); }
.zeilen span { display: flex; align-items: center; gap: 10px; }
.zeilen svg { width: 16px; height: 16px; fill: none; stroke: #9dbbff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zeilen em { font-style: normal; font-size: 12px; color: #86efac; }
.kurve { margin-top: 16px; height: 54px; width: 100%; }
.kurve path.linie-k { fill: none; stroke: #7aa2ff; stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 400; animation: zeichnen 3.2s ease-out .4s forwards; }
.kurve path.flaeche-k { fill: url(#kurvenverlauf); opacity: 0; animation: einblenden 1s ease .2s 1.4s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: 1; } }
.b-telefon { position: absolute; right: 2%; top: 0; width: 34%; z-index: 3; border-radius: 13% / 6%; padding: 2.4%; background: #03050c; box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .14); animation: schweben 16s ease-in-out -5s infinite; will-change: transform; }
.b-telefon img { border-radius: 11% / 5.1%; width: 100%; }
.b-druck { left: 18%; bottom: 0; width: 58%; padding: 18px 20px; z-index: 4; animation: schweben 15s ease-in-out -9s infinite; will-change: transform; }
.druck-zeile { display: flex; align-items: center; gap: 14px; }
.druck-symbol { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(157, 187, 255, .1); }
.druck-symbol svg { width: 22px; height: 22px; fill: none; stroke: #9dbbff; stroke-width: 1.8; stroke-linejoin: round; }
.druck-zeile strong { display: block; font-size: 15px; }
.druck-zeile small { color: rgba(201, 216, 255, .65); font-size: 13px; }
.balken { margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(157, 187, 255, .14); overflow: hidden; }
.balken i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #9dbbff); transform-origin: left; animation: fuellen 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fuellen { 0% { scale: .08 1; } 85%, 100% { scale: 1 1; } }
@keyframes schweben { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
@media (max-width: 600px) { .zeilen li:nth-child(n+4) { display: none; } .b-system { width: 72%; } .b-druck { left: 8%; width: 70%; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(80px, 10vw, 128px) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.abschnitt-grau { background: var(--flaeche-2); }
@media (prefers-color-scheme: dark) { .abschnitt-grau { background: #081022; } }
.kopfzeile { max-width: 720px; margin-bottom: 56px; }
.kopfzeile.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.kopfzeile h2, .split h2 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.035em; }
.kopfzeile p, .split-text > p { color: var(--leise); font-size: clamp(17px, 1.5vw, 19px); }

/* Drei Säulen */
.saeulen { display: grid; gap: 20px; }
@media (min-width: 900px) { .saeulen { grid-template-columns: repeat(3, 1fr); } }
.saeule { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 24px; padding: 32px 30px 28px; box-shadow: var(--schatten); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow: hidden; }
.saeule::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--akzent), transparent); opacity: 0; transition: opacity .3s; }
.saeule:hover { transform: translateY(-4px); box-shadow: var(--schatten-gross); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); }
.saeule:hover::before { opacity: 1; }
.saeule-symbol { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--akzent-zart); color: var(--akzent); margin-bottom: 24px; }
.saeule-symbol svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.saeule h3 { font-size: 24px; letter-spacing: -.025em; margin-bottom: 10px; }
.saeule > p { color: var(--leise); font-size: 16px; }
.liste { list-style: none; margin: 8px 0 26px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.liste li { position: relative; padding-left: 28px; }
.liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--akzent-zart); }
.liste li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 8px; border: solid var(--akzent); border-width: 0 2px 2px 0; rotate: 45deg; }
.saeule .mehr { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }
.saeule .mehr svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.saeule:hover .mehr svg { transform: translateX(3px); }

/* Split-Abschnitte */
.split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1fr; gap: 88px; } .split-umgekehrt .split-bild { order: -1; } }
.merkmale { display: grid; gap: 18px; margin: 32px 0 36px; padding: 0; list-style: none; }
@media (min-width: 600px) { .merkmale { grid-template-columns: 1fr 1fr; } }
.merkmale li { display: grid; gap: 4px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--akzent) 35%, transparent); }
.merkmale strong { font-size: 16px; }
.merkmale span { color: var(--leise); font-size: 15px; }
.knoepfe-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status-hinweis { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--leise); }
.status-hinweis::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .15); }

/* Software: Geräte */
.geraete { position: relative; aspect-ratio: 1 / .9; width: min(100%, 560px); margin: 0 auto; }
.geraete::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 40px; background: linear-gradient(160deg, #3d4fe0, #6a4fd8 50%, #a35fc9); opacity: .9; }
.telefon { position: absolute; border-radius: 13% / 6%; padding: 2.4%; background: #03050c; box-shadow: 0 40px 80px rgba(10, 10, 50, .4), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.telefon img { width: 100%; border-radius: 11% / 5.1%; }
.geraete .telefon:nth-of-type(1) { width: 40%; left: 12%; top: 14%; rotate: -6deg; }
.geraete .telefon:nth-of-type(2) { width: 44%; right: 12%; top: 4%; animation: schweben 16s ease-in-out infinite; will-change: transform; }
.app-marke { position: absolute; left: 4%; bottom: 6%; display: flex; align-items: center; gap: 12px; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 16px; padding: 12px 16px 12px 12px; box-shadow: var(--schatten-gross); }
.app-marke img { width: 44px; height: 44px; border-radius: 11px; }
.app-marke strong { display: block; font-size: 16px; line-height: 1.2; }
.app-marke small { color: var(--leise); font-size: 13px; }

/* 3D-Druck: Schichtobjekt */
.druckraum { position: relative; aspect-ratio: 1 / .9; width: min(100%, 560px); margin: 0 auto; border-radius: 32px; background: radial-gradient(70% 60% at 50% 40%, rgba(59, 130, 246, .18), transparent 70%), var(--navy); overflow: hidden; display: grid; place-items: center; perspective: 1100px; box-shadow: var(--schatten-gross); }
.druckraum::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(157, 187, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 187, 255, .07) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(70% 60% at 50% 70%, #000, transparent 80%); -webkit-mask-image: radial-gradient(70% 60% at 50% 70%, #000, transparent 80%); }
.objekt { position: relative; width: 46%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-38deg); animation: drehen 28s linear infinite; translate: 0 12%; }
@keyframes drehen { to { transform: rotateX(62deg) rotateZ(322deg); } }
.lage { position: absolute; inset: 0; border-radius: 22%; border: 1.5px solid rgba(157, 187, 255, .75); background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(29, 78, 216, .08)); box-shadow: inset 0 0 0 10px rgba(157, 187, 255, .05); opacity: 0; animation: lage 12s ease-out infinite; }
.lage::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1.5px solid rgba(157, 187, 255, .6); background: var(--navy); }
@keyframes lage { 0% { opacity: 0; } 4%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.lage:nth-child(1) { transform: translateZ(0); animation-delay: 0s; }
.lage:nth-child(2) { transform: translateZ(9px); animation-delay: .35s; }
.lage:nth-child(3) { transform: translateZ(18px); animation-delay: .7s; }
.lage:nth-child(4) { transform: translateZ(27px); animation-delay: 1.05s; }
.lage:nth-child(5) { transform: translateZ(36px); animation-delay: 1.4s; }
.lage:nth-child(6) { transform: translateZ(45px); animation-delay: 1.75s; }
.lage:nth-child(7) { transform: translateZ(54px); animation-delay: 2.1s; }
.lage:nth-child(8) { transform: translateZ(63px); animation-delay: 2.45s; }
.lage:nth-child(9) { transform: translateZ(72px); animation-delay: 2.8s; }
.lage:nth-child(10) { transform: translateZ(81px); animation-delay: 3.15s; }
.lage:nth-child(11) { transform: translateZ(90px); animation-delay: 3.5s; }
.lage:nth-child(12) { transform: translateZ(99px); animation-delay: 3.85s; border-color: #c3d6ff; background: linear-gradient(135deg, rgba(157, 187, 255, .4), rgba(59, 130, 246, .15)); }
.druck-info { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(12, 20, 48, .75); border: 1px solid rgba(157, 187, 255, .16); color: #c9d8ff; font: 600 12px/1.4 var(--mono); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.druck-info span:last-child { color: #86efac; }
.druck-ecke { position: absolute; left: 22px; top: 22px; font: 600 12px var(--mono); color: rgba(201, 216, 255, .6); letter-spacing: .06em; }

/* Ablauf */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.schritte li { counter-increment: s; position: relative; padding-top: 28px; }
.schritte li::before { content: "0" counter(s); display: block; font: 600 13px var(--mono); color: var(--akzent); margin-bottom: 14px; }
.schritte li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 10%, transparent)); transform-origin: left; }
.schritte h3 { font-size: 20px; margin-bottom: 8px; }
.schritte p { color: var(--leise); font-size: 15px; margin: 0; }

/* Über mich */
.ueber { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .ueber { grid-template-columns: .85fr 1.15fr; gap: 80px; } }
.portrait { position: relative; max-width: 440px; margin: 0 auto; width: 100%; }
.portrait::before { content: ""; position: absolute; inset: 10% -6% -6% 10%; border-radius: 28px; background: linear-gradient(160deg, var(--akzent), #0a1a44); opacity: .9; }
.portrait img { position: relative; border-radius: 24px; box-shadow: var(--schatten-gross); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; }
.portrait figcaption { position: absolute; left: -12px; bottom: 28px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 16px; box-shadow: var(--schatten-gross); }
.portrait figcaption strong { display: block; font-size: 16px; }
.portrait figcaption span { font-size: 13px; color: var(--leise); }
@media (max-width: 600px) { .portrait figcaption { left: 12px; } }
.ueber-text h2 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.035em; }
.ueber-text > p { color: var(--leise); font-size: 18px; }
.werte { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .werte { grid-template-columns: 1fr 1fr; } }
.werte li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 15px; }
.werte svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--akzent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.werte strong { display: block; font-size: 15px; }
.werte span { color: var(--leise); font-size: 14px; }

/* Kontakt */
.kontakt-band { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(40px, 6vw, 72px); color: #fff; background: radial-gradient(60% 90% at 100% 0%, #1b3fa8, transparent 60%), linear-gradient(160deg, #070d1f, #0d1d4f); display: grid; gap: 40px; align-items: center; }
.kontakt-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(157, 187, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 187, 255, .06) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; }
.kontakt-band > * { position: relative; }
@media (min-width: 900px) { .kontakt-band { grid-template-columns: 1.2fr 1fr; } }
.kontakt-band h2 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.035em; }
.kontakt-band p { color: rgba(226, 234, 255, .75); font-size: 18px; margin: 0; }
.kontakt-karte { background: rgba(255, 255, 255, .06); border: 1px solid rgba(157, 187, 255, .2); border-radius: 20px; padding: 26px; }
.kontakt-karte small { display: block; color: rgba(201, 216, 255, .7); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.kontakt-mail { display: block; color: #fff; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; text-decoration: none; margin-bottom: 20px; word-break: break-word; }
.kontakt-mail:hover { text-decoration: underline; }
.kontakt-karte ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; color: rgba(226, 234, 255, .75); font-size: 15px; }
.kontakt-karte li { display: flex; gap: 10px; }
.kontakt-karte li::before { content: "→"; color: #9dbbff; }
.kontakt-karte .knopf { width: 100%; }

/* Projekte-Teaser (Startseite) */
.teaser-reihe { display: grid; gap: 20px; }
@media (min-width: 800px) { .teaser-reihe { grid-template-columns: 1fr 1fr; } }
.teaser { position: relative; display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none; box-shadow: var(--schatten); transition: transform .25s, box-shadow .25s; }
a.teaser:hover { transform: translateY(-3px); box-shadow: var(--schatten-gross); }
.teaser img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.teaser strong { display: block; font-size: 18px; }
.teaser span { color: var(--leise); font-size: 15px; }
.teaser .pfeil-r { margin-left: auto; width: 20px; height: 20px; flex: none; fill: none; stroke: var(--leise); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.teaser-wip img { filter: grayscale(.9); opacity: .7; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 56px 0 40px; color: var(--leise); font-size: 15px; }
.fuss-raster { display: grid; gap: 36px; }
@media (min-width: 800px) { .fuss-raster { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.fuss h4 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fuss a { color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss-marke p { max-width: 26em; margin-top: 14px; font-size: 14px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 14px; }

/* ---------- Unterseiten ---------- */
.seiten-hero { position: relative; overflow: hidden; color: #fff; padding: 72px 0 60px; background: radial-gradient(60% 120% at 100% 0%, #1b3fa8, transparent 60%), linear-gradient(180deg, #070d1f, #0a1430); }
.seiten-hero h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -.035em; margin: 0; }
.seiten-hero p { margin: 10px 0 0; color: rgba(226, 234, 255, .75); }
.rechtlich { max-width: 780px; padding-top: 48px; padding-bottom: 96px; }
.rechtlich h2 { font-size: 22px; margin: 2em 0 .5em; }
.rechtlich p, .rechtlich address { font-style: normal; color: var(--leise); }
.fehler { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.fehler .gross { font-size: clamp(96px, 20vw, 180px); font-weight: 700; letter-spacing: -.06em; line-height: 1; margin: 0 0 12px; background: linear-gradient(90deg, var(--akzent), var(--akzent-hell)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fehler p { color: var(--leise); }
.platzhalter { background: #ffe9a8; color: #5a3d00; padding: 0 .35em; border-radius: 5px; font-family: var(--mono); font-size: .9em; font-weight: 600; }

/* Projekte-Seite */
.projekt-bereich { padding: 64px 0 0; }
.projekt-bereich:last-of-type { padding-bottom: 32px; }
.hf { position: relative; overflow: hidden; display: grid; gap: 40px; align-items: center; background: linear-gradient(160deg, #3d4fe0 0%, #6a4fd8 45%, #a35fc9 75%, #e08cb9 100%); color: #fff; border-radius: 32px; padding: clamp(32px, 5vw, 56px); }
@media (min-width: 960px) { .hf { grid-template-columns: 1.1fr 1fr; } }
.hf-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 12px 30px rgba(10, 10, 60, .35); margin-bottom: 22px; }
.hf-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: 8px; }
.hf h2 { font-size: clamp(40px, 6vw, 60px); letter-spacing: -.035em; margin-bottom: .1em; }
.hf-unterzeile { font-size: clamp(19px, 2.4vw, 23px); font-weight: 600; margin: 0 0 14px; }
.hf-text > p:not(.hf-unterzeile) { color: rgba(255, 255, 255, .9); max-width: 34em; }
.hf-chips { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.hf-chips li { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.hf-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hf .knopf-voll { color: #3d2fb0; }
.hf-status { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; gap: 8px; }
.hf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fde68a; }
.hf-bild { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1.18; margin: 0 auto; }
.hf-bild .telefon:not(.telefon-hinten) { z-index: 1; width: 52%; right: 6%; top: 0; }
.hf-bild .telefon-hinten { z-index: 0; width: 44%; left: 6%; top: 9%; rotate: -7deg; opacity: .9; }
.demo-hinweis { text-align: center; color: var(--leise); font-size: 14px; margin: 16px 0 0; }
.foto { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 32px; background: #000; color: #fff; }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(.8) brightness(.8); }
.foto-text { padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 4px; }
.foto-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.foto-text strong { font-size: clamp(54px, 9vw, 100px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.foto-unter { font-size: 14px; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
.foto-beschreibung { color: rgba(255, 255, 255, .82); max-width: 34em; font-size: 16px; }
.foto-link { margin-top: 16px; font-weight: 600; }
@media (min-width: 800px) {
  .foto { aspect-ratio: 5 / 2; min-height: 420px; }
  .foto img { position: absolute; right: 0; top: 0; height: 100%; width: 62%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); }
  .foto-text { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; justify-content: center; padding: 48px; }
}
.wip-schild { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1a1300; background: #facc15; margin-bottom: 14px; }

/* ---------- Bewegung beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .einblenden { animation: hoch linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .saeulen .saeule:nth-child(2) { animation-range: entry 5% cover 29%; }
    .saeulen .saeule:nth-child(3) { animation-range: entry 10% cover 34%; }
    .schritte li::after { animation: strich linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}
@keyframes hoch { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes strich { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lage { opacity: 1; }
  .kurve path.linie-k { stroke-dashoffset: 0; } .kurve path.flaeche-k { opacity: 1; }
}

/* IT: Übergabeprotokoll */
.pruefliste { width: min(100%, 520px); margin: 0 auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 24px; padding: 26px; box-shadow: var(--schatten-gross); }
.pruef-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--linie); }
.pruef-kopf b { color: #16a34a; font-family: var(--mono); }
.pruefliste ol { list-style: none; margin: 0; padding: 0; display: grid; }
.pruefliste li { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--linie); }
.pruefliste li:last-child { border-bottom: 0; }
.pruefliste li > i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 5px rgba(22, 163, 74, .12); }
.pruefliste li > i::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.pruefliste strong { display: block; font-size: 16px; }
.pruefliste small { color: var(--leise); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pruefliste li > i { animation: haken-ein linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .pruefliste li:nth-child(2) > i { animation-range: entry 40% cover 52%; }
    .pruefliste li:nth-child(3) > i { animation-range: entry 50% cover 59%; }
    .pruefliste li:nth-child(4) > i { animation-range: entry 60% cover 66%; }
  }
}
@keyframes haken-ein { from { scale: .4; opacity: 0; background: var(--leise); } to { scale: 1; opacity: 1; } }
.kontakt-band .eyebrow, .hero .eyebrow { color: #9dbbff; }
@media (prefers-color-scheme: dark) { .menue-feld .nav-knopf { color: #061024; background: #9dbbff; } }
@media (max-width: 600px) {
  .buehne { aspect-ratio: 1 / 1.02; }
  .b-system { width: 67%; padding: 14px; top: 4%; }
  .glas-kopf { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11px; margin-bottom: 10px; }
  .zeilen { gap: 6px; font-size: 12.5px; }
  .zeilen li { padding: 7px 9px; }
  .zeilen em { font-size: 11px; }
  .kurve { display: none; }
  .b-telefon { width: 31%; top: 0; right: 0; }
  .b-druck { left: 6%; width: 78%; padding: 12px 14px; }
  .druck-symbol { width: 36px; height: 36px; }
  .druck-zeile strong { font-size: 14px; }
}

/* Feinschliff */
::selection { background: rgba(59, 130, 246, .25); }
.hero::after { animation-duration: 20s; }
@supports (animation-timeline: scroll()) {
  .kopf { animation: kopf-schatten linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}
@keyframes kopf-schatten { from { box-shadow: none; } to { box-shadow: 0 8px 30px rgba(7, 13, 31, .08); } }
.saeule-symbol { transition: background .3s, color .3s, transform .3s; }
.saeule:hover .saeule-symbol { background: var(--akzent); color: #fff; transform: scale(1.05); }
@media (prefers-color-scheme: dark) { .saeule:hover .saeule-symbol { color: #061024; } }
.portrait img { transition: transform .5s ease; }
.portrait:hover img { transform: scale(1.01); }
.merkmale li { transition: border-color .3s; }
.merkmale li:hover { border-left-color: var(--akzent); }
.nach-oben { display: inline-flex; align-items: center; gap: 6px; }
.nach-oben svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Agentur-Feinschliff (v23) ===== */
/* Filmkorn auf dunklen Flächen */
.hero, .kontakt-band, .druckraum, .seiten-hero, .statement { isolation: isolate; }
.hero > .rahmen::before, .kontakt-band::after, .seiten-hero::after, .statement::after { content: ""; position: absolute; inset: 0; background: url("/bilder/korn.png"); opacity: .3; pointer-events: none; mix-blend-mode: overlay; z-index: -1; }
.hero > .rahmen::before { inset: 0 -50vw; }
.seiten-hero::after { z-index: 0; } .seiten-hero .rahmen { position: relative; z-index: 1; }

/* Einstieg beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero-text > p, .hero .knoepfe, .hero-fakten { animation: rein .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-kicker { animation-delay: .05s; }
  .hero-text > p { animation-delay: .55s; }
  .hero .knoepfe { animation-delay: .7s; }
  .hero-fakten { animation-delay: .85s; }
  .hero h1 .zeile > span { animation: zeile-rein 1s cubic-bezier(.2, .8, .2, 1) both; }
  .hero h1 .zeile:nth-child(2) > span { animation-delay: .12s; }
  .hero h1 .zeile:nth-child(3) > span { animation-delay: .24s; }
  .buehne { animation: buehne-rein 1.2s cubic-bezier(.2, .7, .2, 1) .3s both; }
}
.hero h1 .zeile { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .zeile > span { display: inline-block; }
@keyframes rein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zeile-rein { from { transform: translateY(105%); } to { transform: none; } }
@keyframes buehne-rein { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }

/* Umlaufender Lichtrand an der Statuskarte */
@property --rand-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.b-system::before { content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1px; background: conic-gradient(from var(--rand-winkel), transparent 0deg, transparent 250deg, rgba(157, 187, 255, .9) 300deg, #fff 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rand-drehen 6s linear infinite; pointer-events: none; }
@keyframes rand-drehen { to { --rand-winkel: 360deg; } }

/* Nummerierte Eyebrows */
.eyebrow b { font: 600 12px var(--mono); letter-spacing: 0; padding: 3px 7px; border-radius: 6px; background: var(--akzent-zart); margin-right: 2px; }
.eyebrow:has(b)::before { display: none; }
.kontakt-band .eyebrow b { background: rgba(157, 187, 255, .14); }

/* Karten: Verlaufsrand beim Überfahren */
.saeule::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px; background: linear-gradient(140deg, var(--akzent), transparent 45%, transparent 60%, color-mix(in srgb, var(--akzent) 60%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .35s; pointer-events: none; }
.saeule:hover::after { opacity: 1; }
.saeule::before { display: none; }

/* Statement */
.statement { position: relative; overflow: hidden; color: #fff; padding: clamp(96px, 12vw, 160px) 0; background: radial-gradient(50% 80% at 15% 20%, rgba(29, 78, 216, .35), transparent 70%), radial-gradient(40% 70% at 90% 90%, rgba(99, 102, 241, .25), transparent 70%), #070d1f; }
.statement .rahmen { position: relative; z-index: 1; }
.zitat { margin: 0; max-width: 1000px; }
.zitat p { font-family: var(--schrift-titel); font-size: clamp(32px, 5vw, 64px); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 40px; }
.zitat p .hell { color: rgba(201, 216, 255, .55); }
.zitat footer { display: flex; align-items: center; gap: 14px; color: rgba(226, 234, 255, .7); font-size: 15px; }
.zitat footer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 2px solid rgba(157, 187, 255, .35); }
.zitat footer strong { display: block; color: #fff; font-size: 16px; }
.zitat p .hell { color: #b9c9f5; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .zitat p .hell { animation: zitat-hell linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  }
}
@keyframes zitat-hell { from { color: rgba(185, 201, 245, .25); } to { color: #b9c9f5; } }

/* FAQ */
.faq-raster { display: grid; gap: 40px; }
@media (min-width: 960px) { .faq-raster { grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; } .faq-raster .kopfzeile { position: sticky; top: 110px; } }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: color-mix(in srgb, var(--akzent) 35%, transparent); box-shadow: var(--schatten); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border: solid var(--akzent); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0; padding: 0 22px 22px; color: var(--leise); }
.faq details[open] p { animation: rein .4s ease both; }

/* ===== Mehr Leben (v24) ===== */
/* Bereichsfarben */
.saeule-it { --farbe: #2563eb; --farbe-zart: rgba(37, 99, 235, .1); }
.saeule-sw { --farbe: #7c3aed; --farbe-zart: rgba(124, 58, 237, .1); }
.saeule-3d { --farbe: #ea580c; --farbe-zart: rgba(234, 88, 12, .1); }
@media (prefers-color-scheme: dark) {
  .saeule-it { --farbe: #7aa2ff; --farbe-zart: rgba(122, 162, 255, .12); }
  .saeule-sw { --farbe: #b794ff; --farbe-zart: rgba(183, 148, 255, .12); }
  .saeule-3d { --farbe: #fb923c; --farbe-zart: rgba(251, 146, 60, .12); }
}
.saeule[class*="saeule-"] .saeule-symbol { background: var(--farbe-zart); color: var(--farbe); }
.saeule[class*="saeule-"]:hover .saeule-symbol { background: var(--farbe); color: #fff; }
.saeule[class*="saeule-"] .mehr { color: var(--farbe); }
.saeule[class*="saeule-"] .liste li::before { background: var(--farbe-zart); }
.saeule[class*="saeule-"] .liste li::after { border-color: var(--farbe); }
.saeule[class*="saeule-"]::after { background: linear-gradient(140deg, var(--farbe), transparent 45%, transparent 60%, var(--farbe)); }
.saeule[class*="saeule-"] { background-image: radial-gradient(120% 60% at 100% 0%, var(--farbe-zart), transparent 60%); }
#software .eyebrow { color: #7c3aed; } #druck .eyebrow { color: #ea580c; }
@media (prefers-color-scheme: dark) { #software .eyebrow { color: #b794ff; } #druck .eyebrow { color: #fb923c; } }
#software .eyebrow b { background: rgba(124, 58, 237, .1); } #druck .eyebrow b { background: rgba(234, 88, 12, .1); }
.druckraum { background: radial-gradient(70% 60% at 50% 40%, rgba(234, 88, 12, .2), transparent 70%), radial-gradient(60% 50% at 50% 90%, rgba(59, 130, 246, .2), transparent 70%), var(--navy); }
#it .split-bild, #software .split-bild { position: relative; }
#it .split-bild::before, #software .split-bild::before { content: ""; position: absolute; inset: 10% 0; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: -1; }
#it .split-bild::before { background: radial-gradient(circle, rgba(37, 99, 235, .45), transparent 70%); }
#software .split-bild::before { background: radial-gradient(circle, rgba(124, 58, 237, .45), transparent 70%); }
.verlauf-text { background: linear-gradient(90deg, #2563eb, #7c3aed 55%, #ea580c); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { .verlauf-text { background-image: linear-gradient(90deg, #7aa2ff, #b794ff 55%, #fb923c); } }

/* Hero: Lichtstrahlen auf dem Raster */
.strahl { position: absolute; z-index: 0; pointer-events: none; border-radius: 2px; }
.strahl-1, .strahl-3 { height: 1px; width: 180px; background: linear-gradient(90deg, transparent, #9dbbff, #fff); }
.strahl-2, .strahl-4 { width: 1px; height: 180px; background: linear-gradient(180deg, transparent, #9dbbff, #fff); }
.strahl-1 { top: 168px; left: 0; animation: strahl-x 7s linear infinite; }
.strahl-3 { top: 448px; left: 0; animation: strahl-x 9s linear 3s infinite; }
.strahl-2 { left: 56%; top: 0; animation: strahl-y 8s linear 1.5s infinite; }
.strahl-4 { left: 84%; top: 0; animation: strahl-y 10s linear 5s infinite; }
@keyframes strahl-x { from { translate: -200px 0; opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } to { translate: 110vw 0; opacity: 0; } }
@keyframes strahl-y { from { translate: 0 -200px; opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } to { translate: 0 900px; opacity: 0; } }
.hero::after { background: radial-gradient(circle, rgba(59, 130, 246, .45), transparent 65%); }
.hero::before { background-image: linear-gradient(rgba(157, 187, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 187, 255, .07) 1px, transparent 1px), radial-gradient(40% 50% at 20% 110%, rgba(124, 58, 237, .35), transparent 70%); background-size: 56px 56px, 56px 56px, 100% 100%; }

/* Ablauf mit Symbolen und Karten */
.schritte li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 26px 22px 24px; box-shadow: var(--schatten); transition: transform .3s; }
.schritte li:hover { transform: translateY(-4px); }
.schritte li::after { left: 22px; right: 22px; top: -1px; }

@media (prefers-reduced-motion: reduce) {
  .strahl { display: none; }
}

/* ===== Produktansicht Betreuung (v25) ===== */
h1, h2, h3 { text-wrap: balance; }
.kopfzeile p, .split-text > p, .ueber-text > p { text-wrap: pretty; }
.praesentation { position: relative; overflow: hidden; background: radial-gradient(60% 50% at 50% 100%, rgba(37, 99, 235, .12), transparent 70%); }
.praesentation .kopfzeile { margin-bottom: 64px; }
.fenster-buehne { position: relative; perspective: 2000px; }
.fenster-buehne::before { content: ""; position: absolute; left: 8%; right: 8%; top: 18%; bottom: -4%; background: linear-gradient(90deg, rgba(37, 99, 235, .55), rgba(124, 58, 237, .45), rgba(234, 88, 12, .35)); filter: blur(80px); opacity: .55; border-radius: 50%; pointer-events: none; }
.fenster { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0a1020; border: 1px solid rgba(157, 187, 255, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 50px 120px rgba(7, 13, 31, .45); color: #dbe5ff; font-size: 14px; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fenster { animation: aufrichten linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes aufrichten { from { transform: rotateX(22deg) scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
.fenster-leiste { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #0d1426; border-bottom: 1px solid rgba(157, 187, 255, .1); }
.fenster-leiste i { width: 11px; height: 11px; border-radius: 50%; background: #3a4560; }
.fenster-leiste i:nth-child(1) { background: #ff5f57; } .fenster-leiste i:nth-child(2) { background: #febc2e; } .fenster-leiste i:nth-child(3) { background: #28c840; }
.fenster-leiste span { margin: 0 auto; transform: translateX(-24px); font-size: 12px; color: rgba(201, 216, 255, .5); }
.fenster-inhalt { display: grid; grid-template-columns: 210px 1fr; min-height: 470px; }
.seitenleiste { display: flex; flex-direction: column; gap: 22px; padding: 20px 14px; border-right: 1px solid rgba(157, 187, 255, .08); background: #0b1122; }
.sl-marke { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; padding: 0 8px; }
.sl-marke span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #0a1a44, #1d4ed8); font-weight: 800; font-size: 13px; }
.seitenleiste nav { display: grid; gap: 2px; }
.seitenleiste a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: rgba(201, 216, 255, .6); font-size: 13.5px; }
.seitenleiste a.aktiv { background: rgba(122, 162, 255, .12); color: #fff; }
.seitenleiste svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-fuss { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 10px; background: rgba(122, 162, 255, .06); font-size: 12px; color: rgba(201, 216, 255, .6); }
.sl-fuss b { display: block; color: #fff; font-size: 12.5px; }
.sl-fuss i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: puls-punkt 2.4s ease-in-out infinite; }
.haupt { padding: 22px 24px 24px; display: grid; gap: 18px; align-content: start; }
.haupt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.haupt-kopf small { display: block; color: rgba(201, 216, 255, .5); font-size: 12px; }
.haupt-kopf strong { font-size: 20px; color: #fff; letter-spacing: -.02em; }
.status-pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #86efac; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .2); }
.status-pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: puls-punkt 2.4s ease-in-out infinite; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: 12px; background: #0e1629; border: 1px solid rgba(157, 187, 255, .08); }
.kpi small { display: block; color: rgba(201, 216, 255, .5); font-size: 12px; margin-bottom: 6px; }
.kpi strong { display: block; font-size: 24px; font-weight: 650; color: #fff; letter-spacing: -.03em; line-height: 1.1; }
.kpi strong span { font-size: 15px; color: rgba(201, 216, 255, .45); font-weight: 500; }
.kpi em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; color: rgba(201, 216, 255, .5); }
.kpi em.gut { color: #4ade80; }
.haupt-raster { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.d-karte { padding: 16px 18px; border-radius: 12px; background: #0e1629; border: 1px solid rgba(157, 187, 255, .08); }
.d-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.d-kopf b { color: #fff; font-weight: 600; font-size: 13.5px; }
.d-kopf small { color: rgba(201, 216, 255, .45); font-size: 12px; }
.diagramm { width: 100%; height: 150px; }
.d-gitter { stroke: rgba(157, 187, 255, .08); stroke-width: 1; fill: none; }
.d-flaeche { fill: url(#dverlauf); }
.d-linie { fill: none; stroke: #60a5fa; stroke-width: 2; vector-effect: non-scaling-stroke; }
.d-linie-2 { fill: none; stroke: #a78bfa; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.d-achse { display: flex; justify-content: space-between; margin-top: 8px; font: 11px var(--mono); color: rgba(201, 216, 255, .35); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .d-linie { stroke-dasharray: 1200; animation: linie-ziehen linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
    .d-flaeche { animation: einblenden-v linear both; animation-timeline: view(); animation-range: entry 45% cover 65%; }
    .protokoll li { animation: rein linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    .protokoll li:nth-child(2) { animation-range: entry 44% cover 58%; } .protokoll li:nth-child(3) { animation-range: entry 48% cover 61%; } .protokoll li:nth-child(4) { animation-range: entry 52% cover 64%; } .protokoll li:nth-child(5) { animation-range: entry 56% cover 67%; }
  }
}
@keyframes linie-ziehen { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes einblenden-v { from { opacity: 0; } to { opacity: 1; } }
.protokoll { list-style: none; margin: 0; padding: 0; display: grid; }
.protokoll li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(157, 187, 255, .07); font-size: 13px; color: rgba(219, 229, 255, .85); }
.protokoll li:last-child { border-bottom: 0; }
.protokoll i { width: 8px; height: 8px; border-radius: 50%; background: #7aa2ff; }
.protokoll i.gut { background: #22c55e; } .protokoll i.info { background: #f59e0b; }
.protokoll time { font: 11.5px var(--mono); color: rgba(201, 216, 255, .4); }
.fenster-hinweis { text-align: center; color: var(--leise); font-size: 13px; margin: 26px 0 0; }
@media (max-width: 900px) {
  .fenster-inhalt { grid-template-columns: 1fr; }
  .seitenleiste { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .haupt-raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .haupt { padding: 16px; } .kpi strong { font-size: 20px; } .fenster-leiste span { transform: none; } }
.status-pille { white-space: nowrap; } @media (max-width: 600px) { .haupt-kopf { flex-wrap: wrap; } }

/* ===== Leitstand (Nachbau des echten Leitstands, v28) ===== */
.lt { --bg: #04060c; --panel: rgba(13, 19, 34, .74); --rand: rgba(120, 160, 255, .11); --t: #e1e9ff; --ged: #8391b6; --lei: #56627f; --gruen: #34f5a0; --cyan: #3ee6ff; --gelb: #ffb547; --rot: #ff4d6d; --vio: #9b8cff; --grau: #5b6684;
  position: relative; background: var(--bg); color: var(--t); border-color: rgba(120, 160, 255, .14); font: 13px/1.4 ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI", sans-serif; }
.lt .fenster-leiste { background: #070a14; border-bottom-color: var(--rand); }
.lt-rahmen { display: grid; grid-template-columns: 190px 1fr; }
.lt-seite { display: flex; flex-direction: column; padding: 14px 10px; border-right: 1px solid var(--rand); background: #05080f; }
.lt-marke { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; }
.lt-logo { width: 30px; height: 30px; flex: none; }
.lt-logo rect { fill: rgba(52, 245, 160, .06); stroke: rgba(52, 245, 160, .35); stroke-width: 1.2; }
.lt-logo path { fill: none; stroke: var(--gruen); stroke-width: 1.8; stroke-linejoin: round; }
.lt-logo circle { fill: var(--cyan); }
.lt-marke b { display: block; font-size: 12px; letter-spacing: .28em; color: #fff; }
.lt-marke small { display: block; font-size: 10px; color: var(--lei); letter-spacing: .02em; }
.lt-seite nav { display: grid; gap: 2px; }
.lt-seite a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ged); font-size: 12.5px; }
.lt-seite a.aktiv { background: rgba(120, 160, 255, .09); color: #fff; }
.lt-seite svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lt-seite em { margin-left: auto; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; font: 700 10px ui-monospace, "SF Mono", monospace; font-style: normal; color: #04060c; padding: 0 4px; }
.lt-seite em.rot { background: var(--rot); color: #fff; } .lt-seite em.gelb { background: var(--gelb); } .lt-seite em.cyan { background: rgba(62, 230, 255, .2); color: var(--cyan); }
.lt-seite kbd { margin-left: auto; font: 600 10px ui-monospace, monospace; color: var(--lei); background: rgba(120, 160, 255, .08); border-radius: 5px; padding: 2px 5px; }
.lt-seite-fuss { margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid var(--rand); display: grid; gap: 4px; font-size: 11px; color: var(--ged); }
.lt-uhr { font: 600 18px ui-monospace, "SF Mono", monospace; color: #fff; letter-spacing: .02em; margin-bottom: 4px; }
.lt-seite-fuss div { display: flex; align-items: center; gap: 6px; }
.lt-haupt { padding: 16px 18px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.lt-kopf b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.lt-kopf small { color: var(--ged); font-size: 12px; }
.lt-lage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 77, 109, .1), transparent 45%), var(--panel); border: 1px solid rgba(255, 77, 109, .22); box-shadow: inset 3px 0 0 var(--rot); }
.lt-lage > span:first-child { display: flex; align-items: center; gap: 8px; }
.lt-lage b { color: var(--rot); font-size: 13px; }
.lt-lage small { color: var(--lei); font-size: 11.5px; }
.lt-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-pillen > span { font: 600 9.5px ui-monospace, monospace; letter-spacing: .08em; color: var(--lei); padding: 5px 9px; border-radius: 7px; border: 1px solid var(--rand); background: rgba(4, 6, 12, .6); }
.lt-pillen b { font-size: 12px; color: var(--vio); margin-left: 4px; }
.lt-pillen b.gruen { color: var(--gruen); } .lt-pillen b.cyan { color: var(--cyan); }
.lt-panel { padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rand); display: grid; gap: 7px; }
.lt-panel-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 4px; }
.lt-panel-kopf b { font: 700 10px ui-monospace, monospace; letter-spacing: .2em; color: var(--ged); }
.lt-panel-kopf small { font-size: 10.5px; color: var(--lei); }
.rot-t { color: var(--rot); } .cyan-t { color: var(--cyan); }
.lt-befund { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--rand); background: rgba(9, 13, 24, .8); }
.lt-befund.rot { background: rgba(255, 77, 109, .07); border-color: rgba(255, 77, 109, .3); }
.lt-befund.gelb { background: rgba(255, 181, 71, .06); border-color: rgba(255, 181, 71, .26); }
.lt-befund b { display: block; font-size: 12px; font-weight: 600; color: #fff; }
.lt-befund small { font-size: 10px; color: var(--lei); }
.lt-befund time { font: 10.5px ui-monospace, monospace; color: var(--lei); }
.lt-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 8px rgba(52, 245, 160, .7); }
.lt-dot.warn { background: var(--gelb); box-shadow: 0 0 8px rgba(255, 181, 71, .7); }
.lt-dot.rot { background: var(--rot); box-shadow: 0 0 8px rgba(255, 77, 109, .8); animation: lt-blink 1.6s ease-in-out infinite; }
.lt-dot.cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(62, 230, 255, .7); }
@keyframes lt-blink { 50% { opacity: .35; } }
.lt-geraete { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lt-geraet { padding: 11px 12px; border-radius: 11px; background: rgba(9, 13, 24, .85); border: 1px solid var(--rand); display: grid; gap: 6px; min-width: 0; }
.lt-g-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; color: #fff; }
.lt-g-rolle { font-size: 10px; color: var(--ged); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-bar { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 6px; font: 600 9px ui-monospace, monospace; color: var(--ged); letter-spacing: .06em; }
.lt-bar i { height: 4px; border-radius: 2px; background: rgba(120, 160, 255, .1); overflow: hidden; }
.lt-bar i b { display: block; height: 100%; border-radius: 2px; background: var(--gruen); transform-origin: left; }
.lt-bar em { font-style: normal; color: var(--gruen); text-align: right; letter-spacing: 0; }
.lt-bar.warn i b { background: var(--gelb); } .lt-bar.warn em { color: var(--gelb); }
.lt-bar .b1 { width: 1%; } .lt-bar .b5 { width: 5%; } .lt-bar .b10 { width: 10%; } .lt-bar .b17 { width: 17%; } .lt-bar .b19 { width: 19%; } .lt-bar .b23 { width: 23%; } .lt-bar .b41 { width: 41%; } .lt-bar .b48 { width: 48%; } .lt-bar .b50 { width: 50%; } .lt-bar .b56 { width: 56%; } .lt-bar .b59 { width: 59%; } .lt-bar .b87 { width: 87%; } 
.lt-spark { width: 100%; height: 20px; margin-top: 6px; }
.lt-spark polyline { fill: none; stroke: var(--gruen); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-geraet:nth-child(4) .lt-spark polyline { stroke: var(--gelb); }
.lt-g-fuss { font: 9.5px ui-monospace, monospace; color: var(--lei); }
.lt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lt-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.lt-tag.cyan { color: var(--cyan); border-color: rgba(62, 230, 255, .4); background: rgba(62, 230, 255, .06); }
.lt-tag.gelb { color: var(--gelb); border-color: rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .06); }
.lt-tag.grau { color: var(--ged); border-color: var(--rand); background: rgba(120, 160, 255, .06); margin-right: 4px; }
.lt-ereignisse { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lt-ereignisse li { display: grid; grid-template-columns: 34px 24px 1fr; gap: 10px; align-items: start; }
.lt-ereignisse time { font: 10.5px ui-monospace, monospace; color: var(--lei); padding-top: 4px; }
.lt-ev-icon { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 1px solid; }
.lt-ev-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lt-ev-icon.gruen { color: var(--gruen); border-color: rgba(52, 245, 160, .35); background: rgba(52, 245, 160, .08); }
.lt-ev-icon.gelb { color: var(--gelb); border-color: rgba(255, 181, 71, .35); background: rgba(255, 181, 71, .08); }
.lt-ereignisse b { display: block; font-size: 12.5px; }
.lt-ereignisse b.gruen { color: var(--gruen); } .lt-ereignisse b.gelb { color: var(--gelb); }
.lt-ereignisse p { margin: 3px 0 0; font-size: 11px; color: var(--ged); }
.lt-ereignisse strong { color: #fff; } .lt-ereignisse em.gelb { font-style: normal; color: var(--gelb); }
.lt-toast { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(9, 16, 22, .95); border: 1px solid rgba(52, 245, 160, .35); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.lt-toast-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gruen); color: var(--gruen); }
.lt-toast-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lt-toast b { display: block; color: var(--gruen); font-size: 12.5px; }
.lt-toast small { font: 10.5px ui-monospace, monospace; color: var(--ged); }
.lt-toast > i { font-style: normal; color: var(--ged); margin-left: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .lt-toast { animation: lt-toast 9s ease infinite; }
  @supports (animation-timeline: view()) {
    .lt-bar i b { animation: lt-balken linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  }
}
@keyframes lt-toast { 0%, 8% { opacity: 0; transform: translateY(14px); } 14%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes lt-balken { from { transform: scaleX(0); } }
.praesentation .fenster-buehne::before { background: linear-gradient(90deg, rgba(62, 230, 255, .4), rgba(155, 140, 255, .45), rgba(52, 245, 160, .3)); }
@media (max-width: 1000px) { .lt-geraete { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .lt-rahmen { grid-template-columns: 1fr; } .lt-seite { display: none; } }
@media (max-width: 600px) { .lt-pillen > span:nth-child(n+3) { display: none; } .lt-geraet:nth-child(n+3) { display: none; } .lt-befund time { display: none; } .lt-toast { left: 12px; right: 12px; } }
.lt-marke .lt-logo { width: 32px; height: 32px; }
/* Toast: laufendes Update → fertig */
.lt-toast { display: grid; padding: 0; width: 300px; border-color: rgba(62, 230, 255, .35); animation: none !important; }
.lt-toast > div { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.lt-toast > div > span:last-of-type { flex: 1; min-width: 0; }
.lt-toast-lauf b { color: var(--cyan) !important; }
.lt-spinner { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(62, 230, 255, .2); border-top-color: var(--cyan); animation: lt-drehen .9s linear infinite; }
@keyframes lt-drehen { to { transform: rotate(360deg); } }
.lt-fortschritt { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(62, 230, 255, .15); overflow: hidden; }
.lt-fortschritt em { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3ee6ff, #9b8cff); transform-origin: left; animation: lt-fuellen 10s cubic-bezier(.4, 0, .3, 1) infinite; }
.lt-toast-fertig > i { font-style: normal; color: var(--ged); }
@media (prefers-reduced-motion: no-preference) {
  .lt-toast-lauf { animation: lt-lauf 10s ease infinite; }
  .lt-toast-fertig { animation: lt-fertig 10s ease infinite; }
  .lt-toast { animation: lt-rand 10s ease infinite !important; }
}
@keyframes lt-fuellen { 0% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes lt-lauf { 0%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes lt-fertig { 0%, 62% { opacity: 0; transform: translateY(6px); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lt-rand { 0%, 62% { border-color: rgba(62, 230, 255, .35); } 66%, 100% { border-color: rgba(52, 245, 160, .4); } }
@media (prefers-reduced-motion: reduce) { .lt-toast-fertig { opacity: 0; } }
@media (max-width: 600px) { .lt-toast { width: auto; } }

/* ===== Aus einem Guss (v31) ===== */
/* Betreuung direkt im IT-Abschnitt */
.betreuung { margin-top: clamp(80px, 10vw, 128px); padding-top: clamp(64px, 8vw, 96px); border-top: 1px solid var(--linie); position: relative; }
.betreuung .kopfzeile { margin-bottom: 56px; }
.unter-titel { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.035em; font-weight: 700; }
.satz-klein { font-size: 15px !important; color: var(--leise); margin-bottom: 32px; }

/* Mini-Leitstand im Hero – gleicher Look wie unten */
.lt-mini { --gruen: #34f5a0; --cyan: #3ee6ff; --ged: #8391b6; --lei: #56627f; background: rgba(4, 6, 12, .92) !important; border-color: rgba(120, 160, 255, .16) !important; padding: 16px 16px 14px !important; }
.lt-mini-kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(120, 160, 255, .1); }
.lt-mini-kopf .lt-logo { width: 28px; height: 28px; flex: none; }
.lt-mini-kopf b { display: block; font-size: 11px; letter-spacing: .26em; color: #fff; }
.lt-mini-kopf small { font-size: 10px; color: var(--lei); }
.lt-mini-kopf em { margin-left: auto; font: 600 10.5px ui-monospace, monospace; font-style: normal; color: var(--gruen); padding: 4px 8px; border-radius: 999px; background: rgba(52, 245, 160, .08); border: 1px solid rgba(52, 245, 160, .2); white-space: nowrap; }
.lt-mini-zeilen { display: grid; gap: 9px; }
.lt-mini-zeilen > div { display: grid; grid-template-columns: 112px 1fr 34px; align-items: center; gap: 10px; font: 600 11.5px ui-monospace, monospace; color: #e1e9ff; }
.lt-mini-zeilen span { display: flex; align-items: center; gap: 8px; }
.lt-mini-zeilen em { font-style: normal; color: var(--gruen); text-align: right; font-weight: 500; }
.lt-mini-bar { height: 4px; border-radius: 2px; background: rgba(120, 160, 255, .1); overflow: hidden; }
.lt-mini-bar b { display: block; height: 100%; background: var(--gruen); border-radius: 2px; }
.lt-mini-bar .m10 { width: 10%; } .lt-mini-bar .m17 { width: 17%; } .lt-mini-bar .m19 { width: 19%; } .lt-mini-bar .m23 { width: 23%; }
@media (prefers-reduced-motion: no-preference) { .lt-mini-bar b { animation: lt-mini-atmen 4s ease-in-out infinite alternate; } .lt-mini-zeilen > div:nth-child(2) .lt-mini-bar b { animation-delay: -1s; } .lt-mini-zeilen > div:nth-child(3) .lt-mini-bar b { animation-delay: -2s; } .lt-mini-zeilen > div:nth-child(4) .lt-mini-bar b { animation-delay: -3s; } }
@keyframes lt-mini-atmen { to { transform: scaleX(1.6); } }
.lt-mini-bar b { transform-origin: left; }
.lt-mini-fuss { display: flex; gap: 8px; margin-top: 12px; }
.lt-mini-fuss span { font: 600 9px ui-monospace, monospace; letter-spacing: .08em; color: var(--lei); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(120, 160, 255, .11); }
.lt-mini-fuss b { color: var(--gruen); font-size: 11px; margin-left: 3px; }
.lt-mini .lt-dot { width: 6px; height: 6px; }
.lt-mini::before { border-radius: 19px; }
@media (max-width: 600px) { .lt-mini-zeilen > div { grid-template-columns: 1fr 34px; } .lt-mini-bar { display: none; } .lt-mini-zeilen > div:nth-child(4) { display: none; } .lt-mini-kopf em { display: none; } }

/* Eigene Produkte */
.produkte { display: grid; gap: 12px; margin: 30px 0 0; }
.produkt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none; box-shadow: var(--schatten); transition: transform .25s, box-shadow .25s, border-color .25s; }
.produkt:hover { transform: translateY(-2px); box-shadow: var(--schatten-gross); border-color: color-mix(in srgb, #7c3aed 35%, transparent); }
.produkt img, .produkt-logo { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.produkt-logo { display: grid; place-items: center; background: #04060c; }
.produkt-logo .lt-logo { width: 34px; height: 34px; }
.produkt b { display: block; font-size: 16px; }
.produkt small { color: var(--leise); font-size: 13.5px; }
.produkt > span:nth-child(2) { flex: 1; min-width: 0; }
.produkt-status { flex: none; font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.produkt-status.gelb { color: #b45309; background: rgba(245, 158, 11, .12); }
.produkt-status.gruen { color: #15803d; background: rgba(34, 197, 94, .12); }
@media (prefers-color-scheme: dark) { .produkt-status.gelb { color: #fbbf24; } .produkt-status.gruen { color: #4ade80; } }
@media (max-width: 600px) { .produkt-status { display: none; } }
.lt-logo rect { fill: rgba(52, 245, 160, .06); stroke: rgba(52, 245, 160, .35); stroke-width: 1.2; }
.lt-logo path { fill: none; stroke: #34f5a0; stroke-width: 1.8; stroke-linejoin: round; }
.lt-logo circle { fill: #3ee6ff; }

/* 3D: Weg zum Bauteil */
.prozess { list-style: none; margin: 30px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: p; position: relative; }
.prozess::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: linear-gradient(90deg, #ea580c, color-mix(in srgb, #ea580c 15%, transparent)); }
.prozess li { counter-increment: p; position: relative; padding-right: 10px; display: grid; gap: 2px; }
.prozess li::before { content: counter(p); position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 12px; font: 700 13px var(--mono); color: #fff; background: #ea580c; box-shadow: 0 0 0 5px var(--flaeche-2); }
.prozess b { font-size: 15px; }
.prozess span { font-size: 13px; color: var(--leise); }
@media (prefers-color-scheme: dark) { .prozess li::before { box-shadow: 0 0 0 5px #081022; } }
@media (max-width: 600px) { .prozess { grid-template-columns: 1fr 1fr; gap: 22px 10px; } .prozess::before { display: none; } }
.ltp { display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 32px; color: #e1e9ff; background: radial-gradient(60% 90% at 100% 0%, rgba(155, 140, 255, .18), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(62, 230, 255, .1), transparent 60%), #04060c; border: 1px solid rgba(120, 160, 255, .14); }
@media (min-width: 800px) { .ltp { grid-template-columns: auto 1fr auto; gap: 32px; } }
.ltp-logo .lt-logo { width: 72px; height: 72px; }
.ltp h2 { font-size: clamp(32px, 4vw, 44px); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: .2em; }
.ltp p { color: #8391b6; margin: 0; max-width: 40em; }

/* ===== Bauchbinden (v36, schlank) ===== */
.nav a[href="/projekte/"][aria-current="page"] { color: var(--text); }
@media (max-width: 1080px) { .nav { display: none; } .menue { display: block; } }
.bauchbinde { position: absolute; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 30px rgba(7, 13, 31, .14); color: var(--text); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .bauchbinde { background: rgba(12, 20, 40, .72); border-color: rgba(157, 187, 255, .16); } }
.bauchbinde::before { content: ""; align-self: stretch; width: 2px; border-radius: 2px; background: var(--bb-farbe, var(--akzent)); }
.bb-ober { display: flex; align-items: center; gap: 10px; }
.bb-ober b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.bb-ober em { font-style: normal; font-size: 13px; color: var(--leise); }
.bb-ober img { width: 24px; height: 24px; border-radius: 6px; }
.bb-unter { padding-left: 14px; border-left: 1px solid var(--linie); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bauchbinde { animation: bb-ein linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes bb-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bb-hf { --bb-farbe: #7c3aed; left: 4%; bottom: 5%; }
.portrait figcaption.bauchbinde { left: 18px; right: auto; bottom: 22px; padding: 10px 18px 10px 16px; border-radius: 12px; }
.bb-artur { --bb-farbe: #2563eb; }
.bb-hf .bb-ober em { display: none; }
@media (max-width: 600px) {
  .bauchbinde { gap: 10px; padding: 8px 14px 8px 12px; }
  .bb-unter { display: none; }
}

/* ===== Hero-Hintergrund ruhiger (v37) ===== */
.hero { background: radial-gradient(50% 60% at 80% 12%, rgba(37, 99, 235, .26), transparent 70%), radial-gradient(45% 55% at 92% 85%, rgba(99, 102, 241, .12), transparent 70%), radial-gradient(40% 50% at 8% 95%, rgba(29, 78, 216, .12), transparent 70%), linear-gradient(180deg, #04070f 0%, #070d1f 55%, #0a1430 100%); }
.hero::before { background-image: radial-gradient(120% 95% at 50% 40%, transparent 50%, rgba(2, 4, 10, .7) 100%), linear-gradient(rgba(157, 187, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 187, 255, .045) 1px, transparent 1px); background-size: 100% 100%, 64px 64px, 64px 64px; mask-image: none; -webkit-mask-image: none; }
.hero::after { width: 760px; height: 760px; right: -240px; top: -280px; background: radial-gradient(circle, rgba(59, 130, 246, .22), transparent 65%); filter: blur(40px); }
.hero-text { position: relative; }
.hero-text::before { content: ""; position: absolute; inset: -12% -18% -12% -30%; z-index: -1; background: radial-gradient(closest-side, rgba(3, 6, 14, .55), transparent); pointer-events: none; }
/* Lichtlinien: nur auf der Grafikseite, durchlässig, weich auslaufend */
.strahl { opacity: 0; mix-blend-mode: screen; }
.strahl-1, .strahl-3 { width: 260px; height: 1px; left: 52%; background: linear-gradient(90deg, transparent, rgba(157, 187, 255, .35), rgba(255, 255, 255, .55), transparent); }
.strahl-2, .strahl-4 { width: 1px; height: 260px; background: linear-gradient(180deg, transparent, rgba(157, 187, 255, .35), rgba(255, 255, 255, .55), transparent); }
.strahl-1 { top: 192px; animation: strahl-x2 9s linear infinite; }
.strahl-3 { top: 512px; animation: strahl-x2 12s linear 4s infinite; }
.strahl-2 { left: 62%; animation: strahl-y2 10s linear 2s infinite; }
.strahl-4 { left: 88%; animation: strahl-y2 13s linear 6s infinite; }
@keyframes strahl-x2 { 0% { translate: -120px 0; opacity: 0; } 15% { opacity: .5; } 75% { opacity: .5; } 100% { translate: 48vw 0; opacity: 0; } }
@keyframes strahl-y2 { 0% { translate: 0 -260px; opacity: 0; } 15% { opacity: .45; } 75% { opacity: .45; } 100% { translate: 0 860px; opacity: 0; } }
@media (max-width: 1000px) { .strahl { display: none; } }

/* ===== iPhone (v40): schlank, dunkel, mit echter Materialdicke ===== */
.iphone { padding: 1.3% !important; border-radius: 16.5% / 7.6% !important; background: #0b0b0d !important; transform-style: preserve-3d; box-shadow: inset 0 0 0 1px #5b5b61, inset 0 0 0 2.5px #161618, inset 0 1px 0 2px rgba(255, 255, 255, .06), 0 60px 100px rgba(3, 6, 16, .45), 0 20px 40px rgba(3, 6, 16, .3) !important; }
.iphone::before, .iphone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.iphone::before { transform: translateZ(-4px); background: linear-gradient(90deg, #3c3c41, #1b1b1e 40%, #2a2a2e); }
.iphone::after { transform: translateZ(-8px); background: linear-gradient(90deg, #2f2f33, #141416 50%, #26262a); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.iphone-bildschirm { position: relative; overflow: hidden; border-radius: 15% / 6.9%; padding: 2.6%; background: #000; transform: translateZ(.5px); }
.iphone-bildschirm img { width: 100%; display: block; border-radius: 12.6% / 5.8% !important; }
.iphone-bildschirm::before { content: ""; position: absolute; z-index: 2; top: 3.3%; left: 50%; width: 29%; height: 3.1%; translate: -50% 0; border-radius: 999px; background: #000; }
.iphone-bildschirm::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 30%, transparent 45%); pointer-events: none; }
/* 3D-Bühne */
.geraete, .hf-bild { perspective: 1300px; }
.geraete .telefon.iphone:not(:first-of-type) { rotate: 0 1 0 6deg; }
.geraete .telefon.iphone:first-of-type { rotate: 0 1 -0.08 9deg; }
.hf-bild .telefon.iphone:not(.telefon-hinten) { rotate: 0 1 0 -6deg; }
.hf-bild .telefon.iphone.telefon-hinten { rotate: 0 1 0.08 -9deg; }
@media (min-width: 1000px) {
  .buehne { transform-style: preserve-3d; transform: perspective(1800px) rotateY(-8deg) rotateX(4deg); }
  .buehne .b-system { translate: 0 0 30px; }
  .buehne .b-telefon { translate: 0 0 90px; rotate: 0 1 0 -6deg; }
  .buehne .b-druck { translate: 0 0 140px; }
  .buehne .glas { box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
}


@media (max-width: 999px) { .b-telefon.iphone { rotate: 0 1 0 -6deg; } .buehne { perspective: 1200px; } }
.iphone::before, .iphone::after { z-index: -1; }
.hf-bild .telefon.iphone.telefon-hinten { opacity: 1; filter: brightness(.85); }

/* ===== iPhone als SVG (v43) + lebendige Demos ===== */
.iphone { padding: 0 !important; background: none !important; border-radius: 16.6% / 8.2% !important; box-shadow: 0 50px 90px rgba(3, 6, 16, .45), 0 16px 32px rgba(3, 6, 16, .3) !important; }
.iphone::before, .iphone::after { border-radius: 16.6% / 8.2%; }
.iphone::before { background: linear-gradient(90deg, #6b6c71, #26272a 30%, #1c1d20 70%, #55565b); }
.iphone::after { background: #141416; }
.ip-svg { display: block; width: 100%; height: auto; overflow: visible; }
.b-telefon.iphone img, .telefon.iphone img { display: none; }
/* Bildschirmwechsel */
.ip-wechsel { opacity: 0; }
.ip-w4-1 { animation: ip4 16s infinite; } .ip-w4-2 { animation: ip4 16s 4s infinite; } .ip-w4-3 { animation: ip4 16s 8s infinite; } .ip-w4-4 { animation: ip4 16s 12s infinite; }
.ip-w3-1 { animation: ip3 12s infinite; } .ip-w3-2 { animation: ip3 12s 4s infinite; } .ip-w3-3 { animation: ip3 12s 8s infinite; }
@keyframes ip4 { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ip3 { 0% { opacity: 0; } 5%, 33% { opacity: 1; } 39%, 100% { opacity: 0; } }
.ip-w4-1, .ip-w3-1 { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ip-wechsel { animation: none !important; opacity: 0; } .ip-w4-1, .ip-w3-1 { opacity: 1; } }
/* Ereignis-Ticker im Mini-Leitstand */
.lt-ticker { position: relative; display: grid; margin-top: 12px; padding: 9px 10px; border-radius: 8px; background: rgba(120, 160, 255, .06); border: 1px solid rgba(120, 160, 255, .1); font: 500 11px ui-monospace, monospace; color: #e1e9ff; height: 34px; overflow: hidden; }
.lt-ticker > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; opacity: 0; white-space: nowrap; }
.lt-ticker time { margin-left: auto; color: #56627f; }
.lt-ticker i { font-style: normal; color: #34f5a0; }
.lt-ticker i.lauf { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(62, 230, 255, .25); border-top-color: #3ee6ff; animation: lt-drehen .9s linear infinite; }
.lt-t2 { color: #3ee6ff; }
.lt-t1 { animation: ticker 12s infinite; } .lt-t2 { animation: ticker 12s 3s infinite; } .lt-t3 { animation: ticker 12s 6s infinite; } .lt-t4 { animation: ticker 12s 9s infinite; }
@keyframes ticker { 0% { opacity: 0; transform: translateY(8px); } 4%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-8px); } }
.lt-mini-fuss { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .lt-ticker > span { animation: none !important; } .lt-t1 { opacity: 1; } }

/* ===== Leitstand live (v44): Werte wie echte Messwerte ===== */
@property --v { syntax: "<integer>"; inherits: true; initial-value: 0; }
.lv { counter-reset: lv var(--v); }
.lv em::after, .lv .zahl::after { content: counter(lv) "%"; }
.lv.grad em::after { content: counter(lv) "°"; }
.lv i b, .lv .lt-mini-bar b { width: calc(var(--v) * 1%) !important; transform: none !important; animation: none; }
@keyframes lv1 { 0.0% { --v: 11; } 4.17% { --v: 18; } 8.33% { --v: 14; } 12.5% { --v: 13; } 16.67% { --v: 12; } 20.83% { --v: 17; } 25.0% { --v: 11; } 29.17% { --v: 24; } 33.33% { --v: 19; } 37.5% { --v: 32; } 41.67% { --v: 16; } 45.83% { --v: 21; } 50.0% { --v: 17; } 54.17% { --v: 37; } 58.33% { --v: 23; } 62.5% { --v: 22; } 66.67% { --v: 12; } 70.83% { --v: 14; } 75.0% { --v: 38; } 79.17% { --v: 20; } 83.33% { --v: 41; } 87.5% { --v: 37; } 91.67% { --v: 13; } 95.83% { --v: 18; } 100.0% { --v: 11; } }
.lv1 { --v: 17; animation: lv1 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv2 { 0.0% { --v: 59; } 4.17% { --v: 58; } 8.33% { --v: 58; } 12.5% { --v: 57; } 16.67% { --v: 58; } 20.83% { --v: 58; } 25.0% { --v: 59; } 29.17% { --v: 59; } 33.33% { --v: 59; } 37.5% { --v: 59; } 41.67% { --v: 59; } 45.83% { --v: 59; } 50.0% { --v: 59; } 54.17% { --v: 58; } 58.33% { --v: 59; } 62.5% { --v: 59; } 66.67% { --v: 60; } 70.83% { --v: 60; } 75.0% { --v: 60; } 79.17% { --v: 61; } 83.33% { --v: 62; } 87.5% { --v: 62; } 91.67% { --v: 63; } 95.83% { --v: 63; } 100.0% { --v: 59; } }
.lv2 { --v: 59; animation: lv2 60s ease-in-out infinite; }
@keyframes lv3 { 0.0% { --v: 48; } 4.17% { --v: 47; } 8.33% { --v: 47; } 12.5% { --v: 46; } 16.67% { --v: 46; } 20.83% { --v: 47; } 25.0% { --v: 47; } 29.17% { --v: 46; } 33.33% { --v: 46; } 37.5% { --v: 46; } 41.67% { --v: 46; } 45.83% { --v: 47; } 50.0% { --v: 48; } 54.17% { --v: 49; } 58.33% { --v: 49; } 62.5% { --v: 49; } 66.67% { --v: 49; } 70.83% { --v: 49; } 75.0% { --v: 49; } 79.17% { --v: 50; } 83.33% { --v: 51; } 87.5% { --v: 51; } 91.67% { --v: 51; } 95.83% { --v: 51; } 100.0% { --v: 48; } }
.lv3 { --v: 48; animation: lv3 72s ease-in-out infinite; }
@keyframes lv4 { 0.0% { --v: 1; } 4.17% { --v: 1; } 8.33% { --v: 1; } 12.5% { --v: 8; } 16.67% { --v: 7; } 20.83% { --v: 9; } 25.0% { --v: 1; } 29.17% { --v: 1; } 33.33% { --v: 3; } 37.5% { --v: 5; } 41.67% { --v: 8; } 45.83% { --v: 1; } 50.0% { --v: 27; } 54.17% { --v: 1; } 58.33% { --v: 1; } 62.5% { --v: 20; } 66.67% { --v: 24; } 70.83% { --v: 1; } 75.0% { --v: 1; } 79.17% { --v: 1; } 83.33% { --v: 10; } 87.5% { --v: 6; } 91.67% { --v: 29; } 95.83% { --v: 19; } 100.0% { --v: 1; } }
.lv4 { --v: 1; animation: lv4 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv5 { 0.0% { --v: 9; } 4.17% { --v: 9; } 8.33% { --v: 10; } 12.5% { --v: 9; } 16.67% { --v: 8; } 20.83% { --v: 9; } 25.0% { --v: 8; } 29.17% { --v: 9; } 33.33% { --v: 9; } 37.5% { --v: 9; } 41.67% { --v: 10; } 45.83% { --v: 11; } 50.0% { --v: 11; } 54.17% { --v: 11; } 58.33% { --v: 12; } 62.5% { --v: 13; } 66.67% { --v: 14; } 70.83% { --v: 14; } 75.0% { --v: 15; } 79.17% { --v: 15; } 83.33% { --v: 15; } 87.5% { --v: 15; } 91.67% { --v: 15; } 95.83% { --v: 15; } 100.0% { --v: 9; } }
.lv5 { --v: 10; animation: lv5 60s ease-in-out infinite; }
@keyframes lv6 { 0.0% { --v: 42; } 4.17% { --v: 41; } 8.33% { --v: 41; } 12.5% { --v: 41; } 16.67% { --v: 40; } 20.83% { --v: 40; } 25.0% { --v: 39; } 29.17% { --v: 39; } 33.33% { --v: 39; } 37.5% { --v: 38; } 41.67% { --v: 38; } 45.83% { --v: 38; } 50.0% { --v: 38; } 54.17% { --v: 38; } 58.33% { --v: 38; } 62.5% { --v: 38; } 66.67% { --v: 38; } 70.83% { --v: 38; } 75.0% { --v: 38; } 79.17% { --v: 39; } 83.33% { --v: 39; } 87.5% { --v: 39; } 91.67% { --v: 40; } 95.83% { --v: 40; } 100.0% { --v: 42; } }
.lv6 { --v: 41; animation: lv6 72s ease-in-out infinite; }
@keyframes lv7 { 0.0% { --v: 12; } 4.17% { --v: 2; } 8.33% { --v: 10; } 12.5% { --v: 13; } 16.67% { --v: 20; } 20.83% { --v: 2; } 25.0% { --v: 9; } 29.17% { --v: 21; } 33.33% { --v: 5; } 37.5% { --v: 3; } 41.67% { --v: 7; } 45.83% { --v: 1; } 50.0% { --v: 2; } 54.17% { --v: 1; } 58.33% { --v: 32; } 62.5% { --v: 22; } 66.67% { --v: 14; } 70.83% { --v: 11; } 75.0% { --v: 22; } 79.17% { --v: 11; } 83.33% { --v: 13; } 87.5% { --v: 14; } 91.67% { --v: 8; } 95.83% { --v: 1; } 100.0% { --v: 12; } }
.lv7 { --v: 5; animation: lv7 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv8 { 0.0% { --v: 20; } 4.17% { --v: 21; } 8.33% { --v: 20; } 12.5% { --v: 20; } 16.67% { --v: 19; } 20.83% { --v: 18; } 25.0% { --v: 19; } 29.17% { --v: 20; } 33.33% { --v: 21; } 37.5% { --v: 22; } 41.67% { --v: 22; } 45.83% { --v: 21; } 50.0% { --v: 22; } 54.17% { --v: 21; } 58.33% { --v: 21; } 62.5% { --v: 20; } 66.67% { --v: 21; } 70.83% { --v: 20; } 75.0% { --v: 20; } 79.17% { --v: 21; } 83.33% { --v: 20; } 87.5% { --v: 21; } 91.67% { --v: 21; } 95.83% { --v: 22; } 100.0% { --v: 20; } }
.lv8 { --v: 19; animation: lv8 60s ease-in-out infinite; }
@keyframes lv9 { 0.0% { --v: 49; } 4.17% { --v: 48; } 8.33% { --v: 49; } 12.5% { --v: 49; } 16.67% { --v: 49; } 20.83% { --v: 49; } 25.0% { --v: 49; } 29.17% { --v: 49; } 33.33% { --v: 49; } 37.5% { --v: 50; } 41.67% { --v: 50; } 45.83% { --v: 50; } 50.0% { --v: 51; } 54.17% { --v: 51; } 58.33% { --v: 50; } 62.5% { --v: 49; } 66.67% { --v: 50; } 70.83% { --v: 49; } 75.0% { --v: 48; } 79.17% { --v: 48; } 83.33% { --v: 48; } 87.5% { --v: 48; } 91.67% { --v: 48; } 95.83% { --v: 47; } 100.0% { --v: 49; } }
.lv9 { --v: 50; animation: lv9 72s ease-in-out infinite; }
@keyframes lv10 { 0.0% { --v: 99; } 4.17% { --v: 95; } 8.33% { --v: 99; } 12.5% { --v: 81; } 16.67% { --v: 90; } 20.83% { --v: 99; } 25.0% { --v: 99; } 29.17% { --v: 84; } 33.33% { --v: 85; } 37.5% { --v: 87; } 41.67% { --v: 87; } 45.83% { --v: 89; } 50.0% { --v: 89; } 54.17% { --v: 99; } 58.33% { --v: 94; } 62.5% { --v: 99; } 66.67% { --v: 85; } 70.83% { --v: 89; } 75.0% { --v: 95; } 79.17% { --v: 94; } 83.33% { --v: 84; } 87.5% { --v: 85; } 91.67% { --v: 92; } 95.83% { --v: 85; } 100.0% { --v: 99; } }
.lv10 { --v: 87; animation: lv10 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv11 { 0.0% { --v: 24; } 4.17% { --v: 24; } 8.33% { --v: 23; } 12.5% { --v: 23; } 16.67% { --v: 23; } 20.83% { --v: 22; } 25.0% { --v: 22; } 29.17% { --v: 22; } 33.33% { --v: 22; } 37.5% { --v: 21; } 41.67% { --v: 21; } 45.83% { --v: 22; } 50.0% { --v: 23; } 54.17% { --v: 24; } 58.33% { --v: 24; } 62.5% { --v: 24; } 66.67% { --v: 24; } 70.83% { --v: 24; } 75.0% { --v: 25; } 79.17% { --v: 24; } 83.33% { --v: 24; } 87.5% { --v: 24; } 91.67% { --v: 25; } 95.83% { --v: 25; } 100.0% { --v: 24; } }
.lv11 { --v: 23; animation: lv11 60s ease-in-out infinite; }
@keyframes lv12 { 0.0% { --v: 56; } 4.17% { --v: 56; } 8.33% { --v: 55; } 12.5% { --v: 56; } 16.67% { --v: 55; } 20.83% { --v: 56; } 25.0% { --v: 56; } 29.17% { --v: 56; } 33.33% { --v: 57; } 37.5% { --v: 57; } 41.67% { --v: 57; } 45.83% { --v: 57; } 50.0% { --v: 57; } 54.17% { --v: 56; } 58.33% { --v: 56; } 62.5% { --v: 57; } 66.67% { --v: 57; } 70.83% { --v: 57; } 75.0% { --v: 56; } 79.17% { --v: 56; } 83.33% { --v: 56; } 87.5% { --v: 57; } 91.67% { --v: 57; } 95.83% { --v: 56; } 100.0% { --v: 56; } }
.lv12 { --v: 56; animation: lv12 72s ease-in-out infinite; }
@keyframes lv13 { 0.0% { --v: 19; } 4.17% { --v: 19; } 8.33% { --v: 24; } 12.5% { --v: 21; } 16.67% { --v: 14; } 20.83% { --v: 17; } 25.0% { --v: 24; } 29.17% { --v: 17; } 33.33% { --v: 13; } 37.5% { --v: 37; } 41.67% { --v: 14; } 45.83% { --v: 20; } 50.0% { --v: 24; } 54.17% { --v: 20; } 58.33% { --v: 17; } 62.5% { --v: 23; } 66.67% { --v: 16; } 70.83% { --v: 20; } 75.0% { --v: 11; } 79.17% { --v: 17; } 83.33% { --v: 21; } 87.5% { --v: 25; } 91.67% { --v: 26; } 95.83% { --v: 16; } 100.0% { --v: 19; } }
.lv13 { --v: 17; animation: lv13 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv14 { 0.0% { --v: 13; } 4.17% { --v: 14; } 8.33% { --v: 11; } 12.5% { --v: 11; } 16.67% { --v: 27; } 20.83% { --v: 11; } 25.0% { --v: 34; } 29.17% { --v: 26; } 33.33% { --v: 10; } 37.5% { --v: 16; } 41.67% { --v: 11; } 45.83% { --v: 4; } 50.0% { --v: 38; } 54.17% { --v: 7; } 58.33% { --v: 11; } 62.5% { --v: 18; } 66.67% { --v: 11; } 70.83% { --v: 26; } 75.0% { --v: 18; } 79.17% { --v: 14; } 83.33% { --v: 32; } 87.5% { --v: 17; } 91.67% { --v: 33; } 95.83% { --v: 9; } 100.0% { --v: 13; } }
.lv14 { --v: 10; animation: lv14 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv15 { 0.0% { --v: 28; } 4.17% { --v: 20; } 8.33% { --v: 38; } 12.5% { --v: 28; } 16.67% { --v: 21; } 20.83% { --v: 22; } 25.0% { --v: 23; } 29.17% { --v: 15; } 33.33% { --v: 20; } 37.5% { --v: 17; } 41.67% { --v: 15; } 45.83% { --v: 23; } 50.0% { --v: 26; } 54.17% { --v: 26; } 58.33% { --v: 13; } 62.5% { --v: 46; } 66.67% { --v: 28; } 70.83% { --v: 24; } 75.0% { --v: 25; } 79.17% { --v: 47; } 83.33% { --v: 20; } 87.5% { --v: 21; } 91.67% { --v: 13; } 95.83% { --v: 25; } 100.0% { --v: 28; } }
.lv15 { --v: 19; animation: lv15 24s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes lv16 { 0.0% { --v: 31; } 4.17% { --v: 47; } 8.33% { --v: 29; } 12.5% { --v: 17; } 16.67% { --v: 30; } 20.83% { --v: 31; } 25.0% { --v: 25; } 29.17% { --v: 23; } 33.33% { --v: 27; } 37.5% { --v: 29; } 41.67% { --v: 30; } 45.83% { --v: 19; } 50.0% { --v: 18; } 54.17% { --v: 43; } 58.33% { --v: 19; } 62.5% { --v: 18; } 66.67% { --v: 24; } 70.83% { --v: 17; } 75.0% { --v: 24; } 79.17% { --v: 20; } 83.33% { --v: 23; } 87.5% { --v: 25; } 91.67% { --v: 22; } 95.83% { --v: 20; } 100.0% { --v: 31; } }
.lv16 { --v: 23; animation: lv16 24s cubic-bezier(.3,0,.2,1) infinite; }
.lt-mini-zeilen em::after { content: counter(lv) "%"; }
.lt-wandern { animation: wandern 30s linear infinite; }
@keyframes wandern { from { transform: translateX(0); } to { transform: translateX(-100px); } }
.lt-geraet:nth-child(2) .lt-wandern { animation-duration: 44s; } .lt-geraet:nth-child(3) .lt-wandern { animation-duration: 36s; } .lt-geraet:nth-child(4) .lt-wandern { animation-duration: 26s; }
@property --sek { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --min { syntax: "<integer>"; inherits: false; initial-value: 57; }
.lt-uhr { --sek: 0; --min: 57; counter-reset: sek var(--sek) min var(--min); animation: uhr-sek 60s steps(60) infinite, uhr-min 180s steps(3) infinite; }
.lt-uhr::after { content: "11:" counter(min, decimal-leading-zero) ":" counter(sek, decimal-leading-zero); }
@keyframes uhr-sek { from { --sek: 0; } to { --sek: 60; } }
@keyframes uhr-min { from { --min: 57; } to { --min: 60; } }
@property --w { syntax: "<integer>"; inherits: false; initial-value: 1; }
.waechter { --w: 1; counter-reset: w var(--w); animation: waechter 20s steps(20) infinite; }
.waechter::after { content: counter(w); }
@keyframes waechter { from { --w: 1; } to { --w: 21; } }
@media (prefers-reduced-motion: reduce) { .lt-wandern { animation: none !important; } }

/* ===== HerrFleet im App-Design (v47): neutrale Fläche, Farbe nur aus dem Inhalt ===== */
:root { --hf-grund: #EEF1F7; --hf-karte: #FFFFFF; --hf-kachel: #F7F8FC; --hf-linie: #E6E9F2; --hf-text: #0F172A; --hf-text2: #334155; --hf-leise: #64748B; --hf-akzent: #3B5BDB; --hf-weich: #E8EDFF; }
@media (prefers-color-scheme: dark) { :root { --hf-grund: #0B1120; --hf-karte: #131B2E; --hf-kachel: #1A2338; --hf-linie: #222C45; --hf-text: #F1F4FB; --hf-text2: #C7D0E0; --hf-leise: #8A97B0; --hf-akzent: #5C7CFA; --hf-weich: #1C2547; } }
/* Software-Abschnitt: ruhige App-Fläche statt Lila-Verlauf */
.geraete::before { inset: 6% 2%; border-radius: 28px; opacity: 1; background: linear-gradient(180deg, var(--hf-grund), var(--hf-weich)); border: 1px solid var(--hf-linie); box-shadow: 0 4px 10px rgba(0, 0, 0, .06); }
.bb-hf { --bb-farbe: #3B5BDB; }
#software .eyebrow { color: var(--hf-akzent); } #software .eyebrow b { background: var(--hf-weich); }
#software .split-bild::before { background: radial-gradient(circle, rgba(59, 91, 219, .25), transparent 70%); }
.produkt:hover { border-color: color-mix(in srgb, #3B5BDB 35%, transparent); }
/* Projekte: HerrFleet-Karte wie eine App-Karte */
.hf { background: var(--hf-grund); color: var(--hf-text); border: 1px solid var(--hf-linie); box-shadow: 0 4px 10px rgba(0, 0, 0, .06); }
.hf h2 { color: var(--hf-text); }
.hf-eyebrow { color: var(--hf-akzent); }
.hf-unterzeile { color: var(--hf-text2); }
.hf-text > p:not(.hf-unterzeile) { color: var(--hf-leise); }
.hf-chips li { background: var(--hf-karte); border-color: var(--hf-linie); color: var(--hf-text2); }
.hf .knopf-voll { background: var(--hf-akzent); color: #fff; box-shadow: 0 6px 16px rgba(59, 91, 219, .25); }
.hf-status { color: var(--hf-text2); }
.hf-status::before { background: #E8590C; }
.hf-icon { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.hf-bild::before { content: ""; position: absolute; inset: 10% 4% 4%; border-radius: 28px; background: var(--hf-karte); border: 1px solid var(--hf-linie); box-shadow: 0 4px 10px rgba(0, 0, 0, .06); }

/* ===== Aufgeräumt (v48): keine Perspektive mehr, klare Abstände ===== */
.buehne, .buehne .b-system, .buehne .b-telefon, .buehne .b-druck { transform: none; translate: none; rotate: none; }
.iphone, .b-telefon.iphone, .geraete .telefon.iphone, .geraete .telefon.iphone:first-of-type, .geraete .telefon.iphone:not(:first-of-type), .hf-bild .telefon.iphone, .hf-bild .telefon.iphone.telefon-hinten, .hf-bild .telefon.iphone:not(.telefon-hinten) { rotate: none !important; }
.iphone::before, .iphone::after { display: none; }
.buehne { perspective: none; aspect-ratio: 1 / .96; width: min(100%, 560px); }
.b-system { left: 0; top: 7%; width: 57%; }
.b-telefon { right: 0; top: 0; width: 32%; }
.b-druck { left: 5%; bottom: 3%; width: 52%; }
@keyframes schweben { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }
@media (max-width: 600px) { .b-system { width: 64%; top: 4%; } .b-telefon { width: 31%; } .b-druck { left: 0; width: 64%; bottom: 2%; } }
/* kein Feld mehr hinter den iPhones */
.geraete::before, .hf-bild::before { display: none; }
.geraete .telefon.iphone:first-of-type { width: 40%; left: 10%; top: 10%; }
.geraete .telefon.iphone:not(:first-of-type) { width: 44%; right: 10%; top: 2%; }
.b-druck { width: 60%; } .druck-zeile strong { white-space: nowrap; }

/* ===== Neue App-Medien (v50): hell/dunkel-Screenshots + Fahrt-Video ===== */
.nur-dunkel { display: none; }
@media (prefers-color-scheme: dark) { .nur-hell { display: none; } .nur-dunkel { display: inline; } }
.ip-video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 55px; background: #0b0f1e; }
@media (prefers-reduced-motion: reduce) { .ip-video { display: none; } }

/* ===== Video-iPhone ohne foreignObject (v51, Safari-Fix) ===== */
.ip-mit-video { isolation: isolate; }
.ip-mit-video .ip-rahmen { position: relative; z-index: 2; pointer-events: none; }
.ip-schirm { position: absolute; z-index: 1; left: 5.669%; top: 2.154%; width: 88.662%; height: 95.692%; overflow: hidden; border-radius: 14.07% / 6.52%; background: #0b0f1e; transform: translateZ(0); }
.ip-schirm img, .ip-schirm .ip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ip-schirm img.nur-hell { display: block; } .ip-schirm img.nur-dunkel { display: none; }
@media (prefers-color-scheme: dark) { .ip-schirm img.nur-hell { display: none; } .ip-schirm img.nur-dunkel { display: block; } }
.ip-schirm .ip-video { background: transparent; }