/* Nimbus IT 3.0 – Identitaetsschicht (Runde 6, 19.10.2026)
   Ursprung: Farbsprache der Original-Website (Leistungsfamilien rot/gruen/teal/violett/blau, Verlaeufe, Lichtfelder),
   Original-SVG-Icons in ihrer Wirkung, schwebende Navigation, Seitenuebergaenge in derselben Welt.
   Regeln: Navy und Cyan bleiben der rote Faden (Navigation, Hauptaktion, „ein Ansprechpartner“).
   Jede Seite und jedes Kapitel hat genau eine Familie (--fam) plus eine Begleitfarbe fuer Verlaeufe (--fam2).
   Icons tragen die Farbe ihres Themas (--ico), sonst die Familie. Statusfarben (rot/amber) nie als Dekoration fuer „Serie 4“. */

:root { --id-navy: #020b12; --id-panel: #06141d; --id-cyan: #35d4ff; --id-blue: #2d8dff; --id-ink: #eef6f8; --id-mute: #a9c1cb;
  --fam: #35d4ff; --fam-rgb: 53,212,255; --fam2: #2d8dff; --fam2-rgb: 45,141,255; }

/* ============================ 1. Navigation: schwebend, leicht, Teil der Szene ============================ */
html.id30 body.polaris-v6 .site-nav.polaris-v6-nav { top: 14px !important; left: 22px !important; right: 22px !important; width: auto !important; height: 72px !important; padding: 0 14px 0 20px !important; transform: none !important; margin: 0 !important; max-width: none !important; translate: none !important;
  background: linear-gradient(180deg, rgba(2, 11, 18, .38), rgba(2, 11, 18, .08)) !important; border: 1px solid transparent !important; border-radius: 22px !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, height .35s ease, top .35s ease;
  view-transition-name: id-nav; }
html.id30.id-scrolled body.polaris-v6 .site-nav.polaris-v6-nav, html.id30.id-sub body.polaris-v6 .site-nav.polaris-v6-nav { background: rgba(3, 13, 21, .74) !important; border-color: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05) !important; -webkit-backdrop-filter: blur(18px) saturate(1.5) !important; backdrop-filter: blur(18px) saturate(1.5) !important; }
html.id30.id-sub:not(.id-scrolled) body.polaris-v6 .site-nav.polaris-v6-nav { background: rgba(3, 13, 21, .42) !important; }
html.id30.id-scrolled body.polaris-v6 .site-nav.polaris-v6-nav { height: 64px !important; top: 10px !important; }
/* Leuchtlinie: Lesefortschritt in der Farbe der Seite – verbindet alle Seiten */
html.id30 body.polaris-v6 .site-nav.polaris-v6-nav::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--id-cyan), var(--fam) 55%, var(--fam2)); transform-origin: 0 50%; transform: scaleX(var(--id-read, 0)); opacity: .95;
  box-shadow: 0 0 14px rgba(var(--fam-rgb), .55); transition: transform .12s linear; }
html.id30 body.polaris-v6 .polaris-v6-nav .brand-mark { height: auto !important; display: flex !important; align-items: center; }
html.id30 body.polaris-v6 .polaris-v6-nav .brand-mark img { width: auto !important; height: 54px !important; max-height: none !important; filter: drop-shadow(0 0 18px rgba(53, 212, 255, .28)); transition: height .35s ease; }
html.id30.id-scrolled body.polaris-v6 .polaris-v6-nav .brand-mark img { height: 48px !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links { gap: 4px !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a { font-size: 14.5px !important; font-weight: 600 !important; color: #d4e1e8 !important; padding: 0 12px !important; min-height: 44px; display: inline-flex !important; align-items: center; border-radius: 10px; letter-spacing: 0 !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a:hover { color: #fff !important; background: rgba(255, 255, 255, .05); }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--id-cyan), var(--fam)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a.is-current, html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a[aria-current] { color: #fff !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a.is-current::after, html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a[aria-current]::after, html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a:hover::after { transform: scaleX(1); }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-actions { gap: 10px !important; align-items: center; }
html.id30 body.polaris-v6 .polaris-v6-nav .v3-nav-cta { height: 44px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important;
  color: #e9fbff !important; background: rgba(53, 212, 255, .1) !important; border: 1px solid rgba(53, 212, 255, .62) !important; box-shadow: inset 0 0 18px rgba(53, 212, 255, .08) !important; display: inline-flex !important; align-items: center; gap: 8px; transition: background .25s, color .25s, box-shadow .25s; }
html.id30 body.polaris-v6 .polaris-v6-nav .v3-nav-cta::after { content: "\2192"; transition: transform .25s ease; }
html.id30 body.polaris-v6 .polaris-v6-nav .v3-nav-cta:hover { background: linear-gradient(90deg, #35d4ff, #1aa3ff) !important; color: #021018 !important; box-shadow: 0 10px 30px -10px rgba(53, 212, 255, .7) !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .v3-nav-cta:hover::after { transform: translateX(3px); }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-emergency { height: 44px !important; min-height: 0 !important; padding: 0 14px 0 30px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important;
  color: #ff8a93 !important; background: rgba(255, 91, 101, .08) !important; border: 1px solid rgba(255, 91, 101, .5) !important; box-shadow: none !important; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-emergency::before { content: "" !important; display: block !important; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff5b65; box-shadow: 0 0 0 0 rgba(255, 91, 101, .6); animation: id-pulse 2.4s ease-out infinite; }
html.id30 body.polaris-v6 .polaris-v6-nav .nav-emergency:hover { background: linear-gradient(90deg, #ff6b6b, #ff8f6b) !important; color: #fff !important; border-color: transparent !important; }
@keyframes id-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 101, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 91, 101, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 101, 0); } }
/* Leistungsmenue: Karten mit ihrer Familienfarbe, Icons in Originalform */
html.id30 body .nimbus-services-popover .nimbus-services-popover__icon { border-radius: 14px !important; background: radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, .08), transparent 55%), rgba(4, 18, 27, .9) !important;
  border: 1px solid color-mix(in srgb, var(--menu-accent, #35d4ff) 55%, transparent) !important; box-shadow: 0 0 22px -6px var(--menu-accent, #35d4ff) !important; }
html.id30 body .nimbus-services-popover .nimbus-services-popover__icon svg { stroke: var(--menu-accent, #35d4ff) !important; }
@media (max-width: 1080px) {
  html.id30 body.polaris-v6 .site-nav.polaris-v6-nav { height: 64px !important; left: 12px !important; right: 12px !important; top: 10px !important; padding: 0 10px 0 14px !important; background: rgba(3, 13, 21, .72) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; border-color: rgba(255, 255, 255, .07) !important; }
  html.id30 body.polaris-v6 .polaris-v6-nav .brand-mark img { height: 46px !important; }
  html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a { font-size: 17px !important; min-height: 52px; }
  html.id30 body.polaris-v6 .polaris-v6-nav .nav-links > a::after { bottom: 8px; }
}

/* Seitenrahmen: volle Breite, damit Raeume und Lichtfelder randlos wirken */
html.id30 body .site { width: 100% !important; max-width: none !important; margin: 0 !important; }

/* ============================ 2. Original-Icons: Kacheln mit Licht, Farbe nach Thema ============================ */
html.id30 .s30-ico, html.id30 .nx-ico { --c: var(--ico, var(--fam)); --c-rgb: var(--ico-rgb, var(--fam-rgb)); width: 60px; height: 60px; border-radius: 18px;
  background: radial-gradient(110% 110% at 28% 18%, rgba(var(--c-rgb), .26), rgba(var(--c-rgb), .05) 55%, transparent 75%), linear-gradient(160deg, #08202d, #040f17);
  border: 1px solid rgba(var(--c-rgb), .48); box-shadow: 0 14px 34px -16px rgba(var(--c-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .07); }
html.id30 .s30-ico svg, html.id30 .nx-ico svg { width: 32px; height: 32px; stroke: var(--c); stroke-width: 1.7px; filter: drop-shadow(0 0 6px rgba(var(--c-rgb), .45)); }
html.id30 .s30-ico--sm { width: 46px; height: 46px; border-radius: 14px; } html.id30 .s30-ico--sm svg { width: 26px; height: 26px; }
html.id30 .s30-ico--lg { width: 84px; height: 84px; border-radius: 24px; } html.id30 .s30-ico--lg svg { width: 46px; height: 46px; }
html.id30 .s30-matrix .s30-card .s30-ico { width: 68px; height: 68px; } html.id30 .s30-matrix .s30-card .s30-ico svg { width: 36px; height: 36px; }
/* Familien-Wappen im Hero: dasselbe Original-Icon wie auf der Startseite (Ziel des Icon-Uebergangs) */
.id-crest { display: inline-grid; place-items: center; width: 74px; height: 74px; margin: 0 0 20px; border-radius: 22px;
  background: radial-gradient(120% 120% at 25% 15%, rgba(var(--fam-rgb), .34), rgba(var(--fam-rgb), .06) 55%, transparent 78%), linear-gradient(160deg, #0a2432, #040f17);
  border: 1px solid rgba(var(--fam-rgb), .6); box-shadow: 0 20px 50px -18px rgba(var(--fam-rgb), .9), 0 0 0 6px rgba(var(--fam-rgb), .06), inset 0 1px 0 rgba(255, 255, 255, .1); }
.id-crest svg { width: 40px; height: 40px; fill: none; stroke: var(--fam); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(var(--fam-rgb), .6)); }
html.id30:not(.s30-reduced) .id-crest { animation: id-crest-in 1s cubic-bezier(.2, .7, .2, 1) both; }
html.id30.id-vt-in .id-crest { animation: none; }
@keyframes id-crest-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ============================ 3. Unterseiten: Licht und Verlauf der Familie ============================ */
html.id30.id-sub { --s-c: var(--fam); }
html.id30 .s30-k { color: var(--fam); }
html.id30 .s30-loc::before { background: var(--fam); box-shadow: 0 0 12px var(--fam); }
/* Lichtfelder ueber dem Raum (wie die farbigen Hero-Lichter der Originalseiten) */
html.id30 .s30-hero--room::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(48% 62% at 12% 72%, rgba(var(--fam-rgb), .22), transparent 70%), radial-gradient(40% 50% at 88% 22%, rgba(var(--fam2-rgb), .16), transparent 70%); }
html.id30 .s30-hero--room::after, html.id30 .s30-hero--calm::after { content: ""; position: absolute; left: var(--s-pad); right: var(--s-pad); bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--fam-rgb), .9), rgba(var(--fam2-rgb), .5) 45%, transparent); box-shadow: 0 0 18px rgba(var(--fam-rgb), .6); }
html.id30 .s30-hero--calm { background: radial-gradient(55% 80% at 88% 0%, rgba(var(--fam-rgb), .13), transparent 62%), radial-gradient(45% 60% at 0% 100%, rgba(var(--fam2-rgb), .08), transparent 65%), linear-gradient(180deg, #030d15, #020b12) !important; }
/* Kapitel-Rhythmus: abwechselnd Lichtfelder der Familie statt einfarbiger Flaechen */
html.id30 .s30-main > .s30-block:nth-of-type(3n+1) { background-image: radial-gradient(60% 50% at 100% 0%, rgba(var(--fam-rgb), .06), transparent 70%); }
html.id30 .s30-main > .s30-block:nth-of-type(3n+2) { background-image: radial-gradient(50% 60% at 0% 100%, rgba(var(--fam2-rgb), .05), transparent 70%); }
html.id30 .s30-bh h2 { text-wrap: balance; }
html.id30 .s30-bh::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--fam), var(--fam2)); box-shadow: 0 0 14px rgba(var(--fam-rgb), .5); }
/* Karten: Oberkante und Lichtkegel in der Farbe ihres Icons */
html.id30 .s30-card { position: relative; overflow: hidden; }
html.id30 .s30-card:has(.s30-ico) { --cc: var(--ico, var(--fam)); }
html.id30 .s30-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--fam-rgb), .95), rgba(var(--fam2-rgb), .25) 70%, transparent); opacity: .85; }
html.id30 .s30-card:has(.s30-ico[style])::before { background: linear-gradient(90deg, var(--cc), transparent 80%); }
html.id30 .s30-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 0% 0%, rgba(var(--fam-rgb), .08), transparent 70%); opacity: 0; transition: opacity .35s ease; }
html.id30 .s30-card:hover::after { opacity: 1; }
html.id30 a.s30-card:hover { border-color: rgba(var(--fam-rgb), .5) !important; }
/* Aufzaehlungen: Haekchen als leuchtende Punkte der Familie, Reihenfolge als Lichtlinie */
html.id30 .s30-checks li::before { border-color: rgba(var(--fam-rgb), .7) !important; color: var(--fam) !important; box-shadow: 0 0 12px -2px rgba(var(--fam-rgb), .7); }
html.id30 .s30-seq__n { background: radial-gradient(circle at 30% 25%, rgba(var(--fam-rgb), .35), #04131c 70%) !important; border-color: rgba(var(--fam-rgb), .7) !important; color: #fff !important; box-shadow: 0 0 18px -4px rgba(var(--fam-rgb), .8); }
html.id30 .s30-tokens li { border-color: rgba(var(--fam-rgb), .3); }
html.id30 .s30-ghost { border-color: rgba(var(--fam-rgb), .55); }
/* Beispielumgebung: Bausteine dieser Seite in der Familienfarbe */
html.id30 .s30-graph .nd.on circle, html.id30 .s30-graph .nd.is-focus circle { fill: rgba(var(--fam-rgb), .25) !important; stroke: var(--fam) !important; }
html.id30 .s30-graph line.hot { stroke: rgba(var(--fam-rgb), .75) !important; }
html.id30 .s30-kompass { border-color: rgba(var(--fam-rgb), .22) !important; box-shadow: 0 30px 70px -40px rgba(var(--fam-rgb), .6); }
/* Abschluss mit den Inhabern: Lichtfeld der Familie */
html.id30 .s30-close { background: radial-gradient(60% 80% at 85% 100%, rgba(var(--fam-rgb), .1), transparent 65%), radial-gradient(50% 60% at 0% 0%, rgba(53, 212, 255, .06), transparent 65%) !important; }

/* ============================ 4. Startseite ============================ */
/* Drei Wege: jeder Weg mit seiner Leistungsfamilie (Betrieb teal, Team blau, Projekt violett) */
html.id30 .v3-route { --rc: #34d4c8; --rc-rgb: 52,212,200; border-color: rgba(var(--rc-rgb), .32) !important; background: linear-gradient(140deg, rgba(var(--rc-rgb), .1), rgba(3, 13, 21, .72) 55%) !important; }
html.id30 .v3-route[href$="team"] { --rc: #45cfff; --rc-rgb: 69,207,255; }
html.id30 .v3-route[href$="projekt"] { --rc: #a96cff; --rc-rgb: 169,108,255; }
html.id30 .v3-route__icon { border-color: rgba(var(--rc-rgb), .7) !important; background: radial-gradient(circle at 30% 25%, rgba(var(--rc-rgb), .3), #04131c 70%) !important; box-shadow: 0 0 26px -6px rgba(var(--rc-rgb), .8) !important; }
html.id30 .v3-route__icon svg { stroke: var(--rc) !important; filter: drop-shadow(0 0 6px rgba(var(--rc-rgb), .6)); }
html.id30 .v3-route:hover { border-color: var(--rc) !important; }
html.id30 .v3-route__arrow { color: var(--rc) !important; }
html.id30 .n30-proc__route .n30-proc__rti { border-color: rgba(var(--rc-rgb, 53,212,255), .7); }
html.id30 .n30-proc__rti svg { stroke: var(--rc, #42d9ff) !important; }
html.id30 .n30-proc__route[href$="betrieb"] { --rc: #34d4c8; --rc-rgb: 52,212,200; } html.id30 .n30-proc__route[href$="team"] { --rc: #45cfff; --rc-rgb: 69,207,255; } html.id30 .n30-proc__route[href$="projekt"] { --rc: #a96cff; --rc-rgb: 169,108,255; }
/* Ablauf: Icons groesser, mit Licht – die fuenf Aufgaben als tragende Bildsprache */
html.id30 .n30-proc .responsibility-icon svg { width: 32px; height: 32px; stroke-width: 1.7px; filter: drop-shadow(0 0 7px rgba(53, 212, 255, .55)); }
html.id30 .n30-proc__ring::before { background: radial-gradient(circle at 30% 25%, rgba(53, 212, 255, .22), rgba(4, 19, 28, .92) 68%) !important; }
html.id30 .n30-proc.is-live .n30-proc__rail ol::after { background: linear-gradient(180deg, #35d4ff, #2d8dff) !important; }

/* Vier Leistungsfamilien: der farbige Moment der Startseite, um das eine Zentrum */
html.id30 .id-families { position: relative; z-index: 2; padding: clamp(90px, 12vh, 150px) clamp(18px, 5.6vw, 108px) clamp(80px, 11vh, 130px) !important; overflow: hidden;
  background: radial-gradient(40% 45% at 8% 20%, rgba(255, 91, 101, .13), transparent 70%), radial-gradient(40% 45% at 92% 18%, rgba(117, 223, 89, .11), transparent 70%),
    radial-gradient(40% 45% at 8% 92%, rgba(52, 212, 200, .12), transparent 70%), radial-gradient(40% 45% at 92% 92%, rgba(169, 108, 255, .14), transparent 70%), linear-gradient(180deg, #020b12, #03101a 50%, #020b12) !important; }
html.id30 .id-families { display: block !important; }
html.id30 .id-families .section-intro { display: block !important; max-width: 860px !important; width: 100%; margin: 0 auto clamp(40px, 6vh, 64px) !important; text-align: center !important; }
html.id30 .id-families .section-intro > * { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
html.id30 .id-families .section-intro h2 { font-size: clamp(34px, 3.4vw, 58px) !important; line-height: 1.05 !important; letter-spacing: -.035em; }
html.id30 .id-families .section-intro h2 .hl + .hl { display: block; background: linear-gradient(90deg, #8fe9ff, #35d4ff 60%, #34d4c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.id30 .id-families .section-intro p { color: #c9d8de; }
html.id30 .id-families .eyebrow { color: var(--id-cyan) !important; }
html.id30 .id-families .service-matrix { position: relative; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(18px, 2vw, 28px) clamp(150px, 14vw, 220px) !important; max-width: 1320px; width: 100%; margin: 0 auto; }
html.id30 .id-families .service { --sc: #ff5b65; --sc-rgb: 255,91,101; position: relative; display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 20px; align-content: start; padding: 26px 26px 24px !important; min-height: 0 !important;
  border-radius: 22px !important; border: 1px solid rgba(var(--sc-rgb), .32) !important; background: radial-gradient(90% 120% at 0% 0%, rgba(var(--sc-rgb), .16), transparent 60%), linear-gradient(160deg, rgba(8, 24, 34, .92), rgba(3, 12, 19, .92)) !important;
  box-shadow: 0 30px 70px -40px rgba(var(--sc-rgb), .8) !important; text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
html.id30 .id-families .service.green { --sc: #75df59; --sc-rgb: 117,223,89; } html.id30 .id-families .service.teal { --sc: #34d4c8; --sc-rgb: 52,212,200; } html.id30 .id-families .service.violet { --sc: #a96cff; --sc-rgb: 169,108,255; }
html.id30 .id-families .service > svg { grid-row: 1 / span 3; width: 76px !important; height: 76px !important; padding: 18px; box-sizing: border-box; border-radius: 22px; fill: none; stroke: var(--sc) !important; stroke-width: 1.6px;
  background: radial-gradient(120% 120% at 25% 15%, rgba(var(--sc-rgb), .32), rgba(var(--sc-rgb), .05) 55%, transparent 78%), #061722; border: 1px solid rgba(var(--sc-rgb), .6); filter: drop-shadow(0 0 14px rgba(var(--sc-rgb), .35)); }
html.id30 .id-families .service h3 { margin: 4px 0 6px !important; font-size: clamp(19px, 1.5vw, 24px) !important; color: #fff !important; }
html.id30 .id-families .service p { margin: 0 0 12px !important; font-size: 14.5px !important; line-height: 1.6 !important; color: #c3d3da !important; }
html.id30 .id-families .service b { color: var(--sc) !important; font-size: 14px; }
html.id30 .id-families .service::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sc), transparent); }
html.id30 .id-families .service:hover { transform: translateY(-4px); border-color: rgba(var(--sc-rgb), .75) !important; box-shadow: 0 40px 80px -36px rgba(var(--sc-rgb), .95) !important; }
html.id30 .id-hub { position: absolute; left: 50%; top: 50%; width: clamp(110px, 10vw, 150px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(53, 212, 255, .22), rgba(2, 11, 18, .95) 66%); border: 1px solid rgba(53, 212, 255, .55); box-shadow: 0 0 60px rgba(53, 212, 255, .3), 0 0 0 10px rgba(53, 212, 255, .04); }
html.id30 .id-hub img { width: 44%; height: auto; filter: drop-shadow(0 0 14px rgba(53, 212, 255, .5)); }
html.id30 .id-hub__ring { position: absolute; inset: -34%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 91, 101, .0), rgba(255, 91, 101, .55) 10%, transparent 22%, rgba(117, 223, 89, .5) 35%, transparent 47%, rgba(52, 212, 200, .5) 60%, transparent 72%, rgba(169, 108, 255, .55) 85%, transparent 97%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 64.5%, transparent 65.5%); mask: radial-gradient(circle, transparent 62%, #000 63%, #000 64.5%, transparent 65.5%); }
html.id30:not(.s30-reduced) .id-hub__ring { animation: id-spin 26s linear infinite; }
@keyframes id-spin { to { transform: rotate(360deg); } }
html.id30 .id-families .sig-hubwrap::before, html.id30 .id-families .sig-hubwrap::after { display: none !important; }
@media (max-width: 900px) { html.id30 .id-families .service-matrix { grid-template-columns: 1fr !important; gap: 14px !important; } html.id30 .id-hub { display: none; } html.id30 .id-families .service { grid-template-columns: 60px minmax(0, 1fr); } html.id30 .id-families .service > svg { width: 60px !important; height: 60px !important; padding: 14px; } }

/* Kundenstimmen: wieder als Karten mit Zitat-Icon und Licht ihrer Farbe (wie im Original) */
html.id30 .n30-proof { background: radial-gradient(50% 60% at 100% 0%, rgba(53, 212, 255, .07), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 91, 101, .06), transparent 70%), #03080c !important; }
html.id30 .n30-proof .case-card { --cc: #35d4ff; --cc-rgb: 53,212,255; padding: 28px !important; border-radius: 22px !important; border: 1px solid rgba(var(--cc-rgb), .3) !important;
  background: radial-gradient(90% 90% at 0% 0%, rgba(var(--cc-rgb), .14), transparent 60%), linear-gradient(160deg, rgba(8, 22, 31, .9), rgba(3, 10, 16, .92)) !important; box-shadow: 0 30px 70px -44px rgba(var(--cc-rgb), .9) !important; }
html.id30 .n30-proof .case-card--red { --cc: #ff5b65; --cc-rgb: 255,91,101; } html.id30 .n30-proof .case-card--blue { --cc: #67a7ff; --cc-rgb: 103,167,255; }
html.id30 .n30-proof .case-icon { display: inline-grid !important; place-items: center; order: 0 !important; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: rgba(var(--cc-rgb), .14); border: 1px solid rgba(var(--cc-rgb), .5); }
html.id30 .n30-proof .case-icon svg { width: 28px; height: 28px; fill: var(--cc) !important; stroke: none; opacity: .95; }
html.id30 .n30-proof__lead .case-card { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); gap: 0 26px; padding: clamp(28px, 3vw, 44px) !important; }
html.id30 .n30-proof__lead .case-card > * { grid-column: 2; } html.id30 .n30-proof__lead .case-icon { grid-column: 1 !important; grid-row: 1 / span 3; }
html.id30 .n30-proof__lead .case-card p { font-size: clamp(22px, 2vw, 34px) !important; }
html.id30 .n30-proof__more { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-top: 0 !important; padding-top: 0 !important; }
html.id30 .n30-proof__more .case-card h3, html.id30 .n30-proof__lead .case-card h3 { color: #fff; }
html.id30 .n30-proof .case-sector { color: var(--cc) !important; font-weight: 600; letter-spacing: .02em; }
/* Partner: kompakter, ohne leere Strecke darunter */
html.id30 .n30-proof { padding-bottom: clamp(50px, 7vh, 80px) !important; }
html.id30 .n30-partner { margin-top: clamp(40px, 6vh, 70px) !important; }
html.id30 .n30-partner .partners-v7-logos article { background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)) !important; }
html.id30 .n30-partner .cybersicher-v7 { border-color: rgba(255, 91, 101, .28) !important; background: radial-gradient(60% 120% at 0% 50%, rgba(255, 91, 101, .1), transparent 70%) !important; }
/* Menschen: warmes Licht bleibt, Akzentlinie in Cyan */
html.id30 .n30-people .team-ed__trust h3 { color: var(--id-cyan); }
/* Vertiefung: Plus-Kreise in Cyan-Verlauf */
html.id30 .n30-lib__item > summary::after { background: radial-gradient(circle at 30% 25%, rgba(53, 212, 255, .2), transparent 70%); }

/* ============================ 5. Nimbus: dunkle, eigenstaendige Produktwelt (Referenz 03) ============================ */
html.id30.s30-tier-nimbus body { background: #020711; }
html.id30.s30-tier-nimbus .s30-main { --x-ink: #eef3ff; --x-mute: #a9b6d6; --x-c: #9fa6ff; --x-line: rgba(146, 151, 255, .18); --x-card: rgba(10, 14, 34, .78);
  background: radial-gradient(60% 45% at 85% 0%, rgba(146, 151, 255, .2), transparent 62%), radial-gradient(45% 40% at 0% 30%, rgba(111, 231, 255, .1), transparent 65%), linear-gradient(180deg, #050a1c 0, #030716 40%, #020711 100%) !important; color: var(--x-ink); }
html.id30.s30-tier-nimbus .s30-main h1, html.id30.s30-tier-nimbus .s30-main h2, html.id30.s30-tier-nimbus .s30-main h3 { color: #fff; }
html.id30.s30-tier-nimbus .nx-word { background: linear-gradient(100deg, #fff 30%, #c9ccff 70%, #8ff0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.id30.s30-tier-nimbus .nx-badge { background: rgba(146, 151, 255, .1); border-color: rgba(146, 151, 255, .35); color: #dfe2ff; }
html.id30.s30-tier-nimbus .nx-lead, html.id30.s30-tier-nimbus .nx-intro, html.id30.s30-tier-nimbus .nx-card p, html.id30.s30-tier-nimbus .nx-mod p, html.id30.s30-tier-nimbus .nx-feat p, html.id30.s30-tier-nimbus .nx-pane p { color: #c3cbe6; }
html.id30.s30-tier-nimbus .nx-facts > div, html.id30.s30-tier-nimbus .nx-card, html.id30.s30-tier-nimbus .nx-mod, html.id30.s30-tier-nimbus .nx-feat, html.id30.s30-tier-nimbus .nx-pane, html.id30.s30-tier-nimbus .nx-cut {
  background: linear-gradient(160deg, rgba(16, 20, 46, .86), rgba(6, 9, 24, .9)); border-color: rgba(146, 151, 255, .2); box-shadow: 0 30px 60px -40px rgba(146, 151, 255, .6); }
html.id30.s30-tier-nimbus .nx-facts > div { grid-template-columns: 60px minmax(0, 1fr); gap: 2px 14px; align-items: start; }
html.id30.s30-tier-nimbus .nx-facts b { color: #fff; } html.id30.s30-tier-nimbus .nx-facts span { color: #a9b6d6; }
html.id30.s30-tier-nimbus .nx-acts a:first-child { background: linear-gradient(90deg, #9297ff, #6fe7ff) !important; color: #060a1e !important; }
html.id30.s30-tier-nimbus .nx-acts a + a { background: transparent !important; color: #fff !important; border-color: rgba(146, 151, 255, .45) !important; }
html.id30.s30-tier-nimbus .nx-status, html.id30.s30-tier-nimbus .nx-shot figcaption, html.id30.s30-tier-nimbus .nx-note { color: #9aa6c8; }
html.id30.s30-tier-nimbus .nx-shot__frame, html.id30.s30-tier-nimbus .nx-tour__view { background: #0b0f24; border-color: rgba(146, 151, 255, .3); box-shadow: 0 0 0 1px rgba(146, 151, 255, .1), 0 50px 120px -40px rgba(146, 151, 255, .55), 0 0 90px -30px rgba(111, 231, 255, .35); }
html.id30.s30-tier-nimbus .nx-steps li { color: #9aa6c8; } html.id30.s30-tier-nimbus .nx-steps li b { color: #fff; }
html.id30.s30-tier-nimbus .nx-steps li::before { border-color: rgba(146, 151, 255, .35); color: #c9ccff; }
html.id30.s30-tier-nimbus .nx-steps li.is-on { background: rgba(146, 151, 255, .1); border-color: rgba(146, 151, 255, .35); color: #dfe4ff; box-shadow: 0 16px 40px -24px rgba(146, 151, 255, .8); }
html.id30.s30-tier-nimbus .nx-steps li.is-on::before { background: linear-gradient(135deg, #9297ff, #6fe7ff); border-color: transparent; color: #060a1e; }
html.id30.s30-tier-nimbus .nx-steps li.is-done::before { background: rgba(146, 151, 255, .16); color: #c9ccff; }
html.id30.s30-tier-nimbus .nx-ring { box-shadow: 0 0 0 2px #9fa6ff, 0 0 30px rgba(146, 151, 255, .6), 0 0 0 9999px rgba(3, 6, 18, .55); }
html.id30.s30-tier-nimbus .nx-k { color: #9fa6ff; }
html.id30.s30-tier-nimbus .nx-link { color: #8ff0ff !important; }
html.id30.s30-tier-nimbus .nx-tab { background: rgba(16, 20, 46, .6); color: #a9b6d6; border-color: rgba(146, 151, 255, .2); }
html.id30.s30-tier-nimbus .nx-tab[aria-selected="true"] { background: linear-gradient(135deg, #9297ff, #6fe7ff); color: #060a1e; border-color: transparent; }
html.id30.s30-tier-nimbus .nx-tag { background: rgba(111, 231, 255, .12); color: #8ff0ff; } html.id30.s30-tier-nimbus .nx-mod.is-later { background: rgba(10, 14, 34, .4); border-style: dashed; } html.id30.s30-tier-nimbus .nx-mod.is-later .nx-tag { background: rgba(255, 255, 255, .06); color: #a9b6d6; }
html.id30.s30-tier-nimbus .nx-pilot__in { background: radial-gradient(70% 90% at 100% 0%, rgba(146, 151, 255, .22), transparent 60%), linear-gradient(160deg, #0d1230, #050817); border: 1px solid rgba(146, 151, 255, .3); }
html.id30.s30-tier-nimbus .nx-pilot__form button[type="submit"] { background: linear-gradient(90deg, #9297ff, #6fe7ff) !important; color: #060a1e !important; }
html.id30.s30-tier-nimbus .nx-ico { --c: var(--ico, #9fa6ff); --c-rgb: var(--ico-rgb, 146,151,255); }
html.id30.s30-tier-nimbus footer.footer { background: #020711; }

/* Nimbus-Hero im Raum des Wanddisplays: dort, wo der Uebergang von der Startseite herkommt */
html.id30 .nx-hero { position: relative; isolation: isolate; }
html.id30 .nx-room { position: absolute; z-index: -1; margin: 0; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; view-transition-name: id-stage; }
html.id30 .nx-room img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.id30 .nx-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 7, 22, .96) 0, rgba(4, 7, 22, .78) 40%, rgba(4, 7, 22, .25) 75%, rgba(4, 7, 22, .4)), linear-gradient(0deg, #030716 0, rgba(3, 7, 22, 0) 35%), radial-gradient(50% 60% at 70% 45%, rgba(146, 151, 255, .22), transparent 70%); }
html.id30:not(.s30-reduced) .nx-room img { animation: s30-arrive 1.6s cubic-bezier(.2, .7, .2, 1) both; }
html.id-vt-in .nx-room img { animation: none !important; }

/* ============================ 6. Seitenuebergaenge: dieselbe Welt, eine Kamerafahrt ============================ */
@view-transition { navigation: auto; }
html.id30 .s30-room, html.id30.id-home .sw-stage { view-transition-name: id-stage; }
::view-transition-group(root) { animation-duration: .62s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
::view-transition-old(root) { animation: id-old-fwd .55s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-new(root) { animation: id-new-fwd .62s cubic-bezier(.2, .7, .2, 1) both; }
html:active-view-transition-type(id-back)::view-transition-old(root) { animation-name: id-old-back; }
html:active-view-transition-type(id-back)::view-transition-new(root) { animation-name: id-new-back; }
@keyframes id-old-fwd { to { opacity: 0; transform: scale(1.06); filter: blur(6px) brightness(1.15); } }
@keyframes id-new-fwd { from { opacity: 0; transform: scale(.965); filter: blur(4px); } }
@keyframes id-old-back { to { opacity: 0; transform: scale(.95); filter: blur(6px); } }
@keyframes id-new-back { from { opacity: 0; transform: scale(1.05); filter: blur(4px); } }
/* Raum: die Kamera faehrt durch das alte Bild in den neuen Raum */
::view-transition-group(id-stage) { animation-duration: .9s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
::view-transition-old(id-stage) { animation: id-stage-out .8s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-new(id-stage) { animation: id-stage-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html:active-view-transition-type(id-back)::view-transition-old(id-stage) { animation-name: id-stage-out-back; }
html:active-view-transition-type(id-back)::view-transition-new(id-stage) { animation-name: id-stage-in-back; }
@keyframes id-stage-out { to { opacity: 0; transform: scale(1.22); filter: blur(10px) brightness(1.3); } }
@keyframes id-stage-in { from { opacity: 0; transform: scale(1.08); filter: brightness(.45); } }
@keyframes id-stage-out-back { to { opacity: 0; transform: scale(.9); filter: blur(8px); } }
@keyframes id-stage-in-back { from { opacity: 0; transform: scale(1.12); filter: brightness(.5); } }
/* Icon: das angeklickte Original-Icon fliegt in das Wappen der neuen Seite */
::view-transition-group(id-ico) { animation-duration: .78s; animation-timing-function: cubic-bezier(.3, .8, .25, 1); z-index: 50; }
::view-transition-old(id-ico), ::view-transition-new(id-ico) { animation-duration: .78s; mix-blend-mode: normal; }
/* Navigation bleibt stehen; nur Leuchtlinie und aktiver Punkt wechseln */
::view-transition-group(id-nav) { animation-duration: .45s; z-index: 60; }
::view-transition-old(id-nav) { animation: none; opacity: 0; } ::view-transition-new(id-nav) { animation: none; }
html.id-vt-in .s30-room img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .2s !important; animation-name: none !important; }
  ::view-transition-old(root) { animation: id-fade-out .2s ease both !important; } ::view-transition-new(root) { animation: id-fade-in .2s ease both !important; }
  html.id30 .nav-emergency::before, html.id30 .id-hub__ring { animation: none !important; }
}
@keyframes id-fade-out { to { opacity: 0; } } @keyframes id-fade-in { from { opacity: 0; } }

/* ============================ 7. Leistungsportfolio (Runde 6): Familien, interaktive Kompetenzkarte, Menue, Startseite ============================ */
/* Familien-Kacheln */
.pf-fams { padding-top: clamp(40px, 6vh, 70px) !important; }
.pf-fams__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1320px; margin: 0 auto; }
.pf-fam { position: relative; display: grid; gap: 6px; padding: 22px 22px 20px; border-radius: 20px; text-decoration: none; color: #fff !important; border: 1px solid rgba(var(--pc-rgb), .35);
  background: radial-gradient(100% 120% at 0% 0%, rgba(var(--pc-rgb), .18), transparent 60%), linear-gradient(160deg, rgba(8, 24, 34, .92), rgba(3, 12, 19, .92)); box-shadow: 0 26px 60px -40px rgba(var(--pc-rgb), .9); transition: transform .3s, border-color .3s; }
.pf-fam::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: linear-gradient(90deg, var(--pc), transparent); }
.pf-fam:hover { transform: translateY(-3px); border-color: var(--pc); }
.pf-fam b { font-size: 18px; } .pf-fam > span:last-child { font-size: 13.5px; line-height: 1.5; color: #b9cad1; }
/* Kompetenzkarte */
.pf-map__in { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); max-width: 1320px; margin: 0 auto; align-items: start; }
.pf-group { margin: 0 0 18px; } .pf-group__t { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pc); }
.pf-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 12px 7px 7px; border-radius: 14px; border: 1px solid transparent; color: #d7e4ea !important; text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
.pf-item:hover { background: rgba(var(--pc-rgb), .07); color: #fff !important; }
.pf-item.is-on { background: linear-gradient(90deg, rgba(var(--pc-rgb), .16), rgba(var(--pc-rgb), .03)); border-color: rgba(var(--pc-rgb), .45); color: #fff !important; }
.pf-item__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: radial-gradient(circle at 30% 25%, rgba(var(--pc-rgb), .28), #061722 70%); border: 1px solid rgba(var(--pc-rgb), .45); }
.pf-item__i svg { width: 22px; height: 22px; fill: none; stroke: var(--pc); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.pf-item__t { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pf-stage { position: sticky; top: 100px; padding: clamp(18px, 2vw, 28px); border-radius: 24px; --pc: #35d4ff; --pc-rgb: 53,212,255; border: 1px solid rgba(var(--pc-rgb), .3);
  background: radial-gradient(70% 60% at 100% 0%, rgba(var(--pc-rgb), .12), transparent 65%), linear-gradient(160deg, rgba(7, 21, 31, .94), rgba(3, 11, 18, .95)); box-shadow: 0 40px 90px -50px rgba(var(--pc-rgb), .8); transition: border-color .4s, box-shadow .4s; }
.pf-graph { max-width: 560px; margin: 0 auto 6px; }
.pf-stage .s30-graph .nd circle { transition: fill .35s, stroke .35s; }
html.id30 .pf-stage .s30-graph .nd.on circle { fill: rgba(var(--pc-rgb), .32) !important; stroke: var(--pc) !important; filter: drop-shadow(0 0 2px var(--pc)); }
html.id30 .pf-stage .s30-graph .nd.on text { fill: #fff; }
.pf-stage .s30-graph line { transition: stroke .35s, stroke-width .35s; }
html.id30 .pf-stage .s30-graph line.hl { stroke: var(--pc) !important; stroke-width: .95 !important; filter: drop-shadow(0 0 1.2px var(--pc)); }
html.id30 .pf-stage .s30-graph line:not(.hl) { stroke: rgba(160, 190, 200, .16) !important; }
.pf-panel { padding: 18px 2px 4px; border-top: 1px solid rgba(255, 255, 255, .07); }
html.id-pf-js .pf-panel { display: none; } html.id-pf-js .pf-panel.is-on { display: block; animation: s30-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.pf-panel__h { display: flex; gap: 14px; align-items: center; margin: 0 0 8px; } .pf-panel__h .s30-k { margin: 0 0 2px; color: var(--pc) !important; } .pf-panel__h h3 { margin: 0; font-size: clamp(20px, 1.7vw, 26px); }
.pf-panel__d { margin: 0 0 16px; color: #c9d8de; font-size: 15.5px; line-height: 1.6; }
.pf-sit { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-sit li { position: relative; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); }
.pf-sit li::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pc), transparent); }
.pf-sit b { display: block; margin-bottom: 6px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--pc); }
.pf-sit span { font-size: 14.5px; line-height: 1.55; color: #dbe7ec; }
.pf-panel__who { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; font-size: 14px; color: #b9cad1; }
.pf-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(var(--pc-rgb), .6); background: rgba(var(--pc-rgb), .1); color: #fff !important; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.pf-go:hover { background: rgba(var(--pc-rgb), .2); }
/* Selbst / mit Partnern */
/* Leistungsmenue: alle Kompetenzen */
.pf-menu { margin: 14px 0 6px; padding: 16px 4px 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pf-menu__t { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fa7b1; }
.pf-menu__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.pf-menu__col b { display: block; margin: 0 0 6px; font-size: 12.5px; color: var(--pc); }
.pf-menu__col a { display: block; padding: 3px 0; font-size: 13.5px; color: #d3e0e6 !important; text-decoration: none; } .pf-menu__col a:hover { color: #fff !important; }
@media (max-width: 1080px) { .pf-menu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Startseite: Kompetenzen unter den Leistungsfamilien */
.pf-strip { max-width: 1320px; margin: clamp(30px, 5vh, 54px) auto 0; padding: 22px clamp(16px, 2vw, 26px); border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(3, 12, 19, .7); }
.pf-strip__t { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8fe9ff; }
.pf-strip__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 22px; }
.pf-strip__col b { display: block; margin: 0 0 8px; font-size: 14px; color: var(--pc); }
.pf-strip__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-strip__col a { font-size: 14px; color: #d3e0e6 !important; text-decoration: none; } .pf-strip__col a:hover { color: #fff !important; text-decoration: underline; text-decoration-color: var(--pc); }
.pf-strip__go { display: inline-flex; gap: 8px; margin-top: 16px; font-weight: 700; color: #8fe9ff !important; text-decoration: none; }
@media (max-width: 1100px) { .pf-fams__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-map__in { grid-template-columns: 1fr; } .pf-stage { position: static; } .pf-sit { grid-template-columns: 1fr; } .pf-strip__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-fams__in, .pf-strip__cols { grid-template-columns: 1fr; } }

/* ============================ 8. Leistungsnavigation (Runde 6b): alle Kompetenzen sofort sichtbar ============================ */
html.id30 body .nimbus-services-popover__panel { width: min(1240px, calc(100vw - 40px)) !important; max-width: none !important; max-height: calc(100vh - 104px) !important; overflow: auto !important; overscroll-behavior: contain; }
html.id30 body .nimbus-services-popover__head h2 { font-size: 24px !important; }
.pf-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.pf-nav__col { padding: 12px 10px 10px; border-radius: 18px; border: 1px solid rgba(var(--pc-rgb), .24);
  background: radial-gradient(110% 80% at 0% 0%, rgba(var(--pc-rgb), .12), transparent 60%), rgba(4, 16, 24, .72); }
.pf-nav__fam { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 6px 12px; margin: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-decoration: none; color: #fff !important; border-radius: 12px; }
.pf-nav__fam:hover b { text-decoration: underline; text-decoration-color: var(--pc); }
.pf-nav__fi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: radial-gradient(circle at 30% 25%, rgba(var(--pc-rgb), .32), #061722 72%); border: 1px solid rgba(var(--pc-rgb), .55); box-shadow: 0 0 20px -6px var(--pc); }
.pf-nav__fi svg { width: 24px; height: 24px; fill: none; stroke: var(--pc); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.pf-nav__fam small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pc); }
.pf-nav__fam b { display: block; font-size: 15.5px; line-height: 1.25; }
.pf-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf-nav__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 12px; text-decoration: none; color: #e6f0f4 !important; transition: background .2s; }
.pf-nav__item:hover, .pf-nav__item:focus-visible { background: rgba(var(--pc-rgb), .1); }
.pf-nav__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #061722; border: 1px solid rgba(var(--pc-rgb), .38); }
.pf-nav__i svg { width: 19px; height: 19px; fill: none; stroke: var(--pc); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.pf-nav__item:hover .pf-nav__i { border-color: var(--pc); box-shadow: 0 0 16px -4px var(--pc); }
.pf-nav__t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; }
.pf-nav__t em { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: #9fb4bd; }
html.id30 body .nimbus-services-popover__overview { display: inline-flex !important; gap: 8px; font-weight: 700; color: #8fe9ff !important; }
@media (max-width: 1080px) { .pf-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-nav { grid-template-columns: 1fr; } html.id30 body .nimbus-services-popover__panel { width: calc(100vw - 20px) !important; } }

/* Startseite: Familienkarten tragen ihre Kompetenzen */
html.id30 .id-families .service.id-famcard { display: block !important; padding: 0 !important; overflow: hidden; }
html.id30 .id-famcard__head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 20px; align-content: start; padding: 26px 26px 14px; text-decoration: none; color: inherit !important; }
html.id30 .id-families .service.id-famcard > .id-famcard__head > svg { grid-row: 1 / span 3; width: 76px !important; height: 76px !important; padding: 18px; box-sizing: border-box; border-radius: 22px; fill: none; stroke: var(--sc) !important; stroke-width: 1.6px;
  background: radial-gradient(120% 120% at 25% 15%, rgba(var(--sc-rgb), .32), rgba(var(--sc-rgb), .05) 55%, transparent 78%), #061722; border: 1px solid rgba(var(--sc-rgb), .6); filter: drop-shadow(0 0 14px rgba(var(--sc-rgb), .35)); }
html.id30 .id-famcard__head:hover h3 { text-decoration: underline; text-decoration-color: var(--sc); text-underline-offset: 4px; }
.id-famcard__list { list-style: none; margin: 0; padding: 4px 22px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 14px; }
.id-famcard__list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 5px 6px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.25; color: #e4eef2 !important; text-decoration: none; transition: background .2s; }
.id-famcard__list a:hover, .id-famcard__list a:focus-visible { background: rgba(var(--pc-rgb), .12); color: #fff !important; }
.id-famcard__i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #061722; border: 1px solid rgba(var(--pc-rgb), .4); }
.id-famcard__i svg { width: 17px; height: 17px; fill: none; stroke: var(--pc); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.id-families__all { max-width: 1320px; margin: 22px auto 0; text-align: center; }
.id-families__all a { display: inline-flex; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(53, 212, 255, .5); background: rgba(53, 212, 255, .08); font-weight: 700; color: #e9fbff !important; text-decoration: none; }
.id-families__all a:hover { background: rgba(53, 212, 255, .16); }
@media (max-width: 900px) { html.id30 .id-famcard__head { grid-template-columns: 60px minmax(0, 1fr); } html.id30 .id-families .service.id-famcard > .id-famcard__head > svg { width: 60px !important; height: 60px !important; padding: 14px; } }
@media (max-width: 520px) { .id-famcard__list { grid-template-columns: 1fr; } }

html.id30 .id-families .service.id-famcard .id-famcard__i { width: 30px !important; height: 30px !important; flex: none; }
html.id30 .id-families .service.id-famcard .id-famcard__i svg { position: static !important; width: 17px !important; height: 17px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; filter: none !important; box-shadow: none !important; stroke: var(--pc) !important; transform: none !important; }
html.id30 .id-families .service.id-famcard .id-famcard__list a { position: relative; }

html.id30 body .nimbus-services-popover__panel { background: linear-gradient(160deg, rgba(6, 22, 32, .985), rgba(3, 12, 19, .99)) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html.id30 body:has(.nimbus-services-popover:not([hidden])) .v3-mobile-cta { display: none !important; }

/* Runde 7: Kundenstimmen mobil einspaltig, Leitzitat lesbar statt bildschirmhoch */
@media (max-width: 820px) {
  html.id30 .n30-proof__more { grid-template-columns: 1fr !important; gap: 14px !important; }
  html.id30 .n30-proof__lead .case-card { grid-template-columns: 1fr !important; gap: 0 !important; padding: 22px !important; }
  html.id30 .n30-proof__lead .case-card > *, html.id30 .n30-proof__lead .case-icon { grid-column: 1 !important; grid-row: auto !important; }
  html.id30 .n30-proof__lead .case-card p { font-size: 18px !important; line-height: 1.5 !important; }
  html.id30 .n30-proof__more .case-card p { font-size: 15px !important; }
  html.id30 .n30-proof .case-card { padding: 22px !important; }
}

/* ============================ 9. Fachlich im Detail (Runde 7): Szene -> Verantwortung -> Technik -> Ergebnis/Grenzen -> Gespraechsanlass ============================ */
.fk { max-width: 1320px; margin: 0 auto; }
.fk .fk-lead { font-size: clamp(17px, 1.25vw, 20px); color: #e4eef2; max-width: 70ch; }
.fk-scene { margin: 6px 0 34px; }
.fk-note { margin: 10px 0 0; font-size: 13px; color: #8fa7b1; }
.fk-block { margin: 0 0 30px; }
.fk-sub { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fam); }
/* Szene: Lebenszyklus-Spur */
.fk-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; position: relative; counter-reset: fk; }
.fk-track::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: linear-gradient(90deg, var(--fam), var(--fam2)); opacity: .55; }
.fk-track li { position: relative; padding: 0 18px 0 0; }
.fk-track__i { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 14px; border-radius: 16px; background: radial-gradient(circle at 30% 25%, rgba(var(--fam-rgb), .3), #061722 72%); border: 1px solid rgba(var(--fam-rgb), .6); box-shadow: 0 0 22px -6px rgba(var(--fam-rgb), .9); }
.fk-track__i svg { width: 28px; height: 28px; fill: none; stroke: var(--fam); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.fk-track b { display: block; margin: 0 0 4px; font-size: 17px; color: #fff; }
.fk-track span { display: block; font-size: 14.5px; line-height: 1.55; color: #c9d8de; }
/* Szene: Steckbrief / Formular */
.fk-sheet { margin: 0; max-width: 820px; border-radius: 18px; border: 1px solid rgba(var(--fam-rgb), .35); background: linear-gradient(160deg, rgba(8, 24, 34, .95), rgba(3, 12, 19, .95)); box-shadow: 0 30px 70px -44px rgba(var(--fam-rgb), .9); overflow: hidden; }
.fk-sheet figcaption { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-weight: 700; color: #fff; }
.fk-sheet figcaption em { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px dashed rgba(var(--fam-rgb), .6); color: var(--fam); }
.fk-sheet dl { margin: 0; display: grid; }
.fk-sheet dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 11px 20px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.fk-sheet dl > div:last-child { border-bottom: 0; }
.fk-sheet dt { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--fam); }
.fk-sheet dd { margin: 0; font-size: 15px; color: #e1ecf0; }
/* Szene: Fluss vom Signal zur Massnahme */
.fk-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: fl; }
.fk-flow li { counter-increment: fl; position: relative; padding: 16px 16px 16px; border-radius: 16px; border: 1px solid rgba(var(--fam-rgb), .3); background: rgba(6, 20, 30, .75); }
.fk-flow li::before { content: counter(fl); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: rgba(var(--fam-rgb), .2); border: 1px solid var(--fam); color: #fff; font-size: 13px; font-weight: 700; }
.fk-flow li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 28px; width: 10px; height: 2px; background: var(--fam); }
.fk-flow b { display: block; margin: 0 0 4px; color: #fff; font-size: 16px; }
.fk-flow span { font-size: 14px; line-height: 1.5; color: #c9d8de; }
.fk-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.fk-lv { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; }
.fk-lv--info { color: #8fe9ff; border-color: rgba(53, 212, 255, .5); } .fk-lv--warn { color: #ffd08a; border-color: rgba(255, 179, 64, .55); } .fk-lv--err { color: #ff9aa2; border-color: rgba(255, 91, 101, .6); }
/* Szene: Dokument-Gliederung */
.fk-doc { margin: 0; max-width: 820px; padding: 22px 24px; border-radius: 6px 18px 18px 18px; background: linear-gradient(170deg, #0b2230, #061520); border: 1px solid rgba(var(--fam-rgb), .3); box-shadow: 0 30px 70px -44px rgba(var(--fam-rgb), .9); }
.fk-doc figcaption { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 18px; font-weight: 700; color: #fff; }
.fk-doc ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 8px; }
.fk-doc li { color: var(--fam); font-weight: 700; }
.fk-doc li b { color: #fff; font-weight: 600; } .fk-doc li span { color: #b9cad1; font-weight: 400; } .fk-doc li span::before { content: " · "; color: #6f8a95; }
/* Szene: Gewichtung */
.fk-weights { display: flex; gap: 6px; max-width: 980px; }
.fk-weights > div { flex: 0 0 calc(var(--w) - 4px); padding: 18px 18px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(var(--fam-rgb), .2), rgba(6, 20, 30, .85)); border: 1px solid rgba(var(--fam-rgb), .4); }
.fk-weights b { display: block; color: #fff; font-size: 16px; } .fk-weights span { display: block; margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: #c9d8de; } .fk-weights i { font-style: normal; font-size: 22px; font-weight: 700; color: var(--fam); }
/* Szene: Netzwerkzonen */
.fk-zones { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; max-width: 980px; }
.fk-zones__net, .fk-zones__fw { padding: 14px 18px; border-radius: 14px; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04); }
.fk-zones__fw { border-color: var(--fam); background: rgba(var(--fam-rgb), .14); box-shadow: 0 0 26px -8px var(--fam); }
.fk-zones > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 14px; border-left: 2px solid rgba(var(--fam-rgb), .6); }
.fk-zone { padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(var(--fam2-rgb), .55); background: rgba(6, 20, 30, .7); font-size: 13.5px; color: #c9d8de; }
.fk-zone b { display: block; color: #fff; font-size: 15px; }
/* Szene: RPO/RTO-Zeitleiste */
.fk-time { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; max-width: 980px; padding-top: 18px; }
.fk-time::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--fam-rgb), .2), var(--fam) 45%, #ff5b65 50%, var(--fam2) 55%, rgba(var(--fam2-rgb), .2)); }
.fk-time__p { padding: 12px 16px; } .fk-time__p b { display: block; font-size: 22px; color: #fff; } .fk-time__p span { font-size: 14.5px; color: #c9d8de; }
.fk-time__p--rpo { text-align: right; } .fk-time__p--event { text-align: center; } .fk-time__p--event b { color: #ff8a93; font-size: 16px; }
/* Verantwortung */
.fk-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fk-role { padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(6, 20, 30, .65); }
.fk-role--nimbus { border-color: rgba(53, 212, 255, .4); background: radial-gradient(90% 90% at 0% 0%, rgba(53, 212, 255, .1), transparent 60%), rgba(6, 20, 30, .7); }
.fk-role h4 { margin: 0 0 10px; font-size: 15px; color: #fff; }
.fk-role--nimbus h4 { color: #8fe9ff; }
.fk-role ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.fk-role li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: #d3e2e8; }
.fk-role li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--fam); }
/* Technik */
.fk-tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.fk-tech li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.fk-tech b { display: block; color: #fff; font-size: 15.5px; margin-bottom: 2px; } .fk-tech span { font-size: 14.5px; line-height: 1.55; color: #c3d3da; }
/* Ergebnis / Grenzen */
.fk-out { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin: 0 0 22px; }
.fk-del, .fk-lim { padding: 20px 22px; border-radius: 16px; }
.fk-del { border: 1px solid rgba(var(--fam-rgb), .35); background: linear-gradient(160deg, rgba(var(--fam-rgb), .1), rgba(6, 20, 30, .7)); }
.fk-lim { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); }
.fk-out h3 { margin: 0 0 10px; font-size: 16px; color: #fff; }
.fk-out ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; } .fk-out li { font-size: 14.5px; line-height: 1.55; color: #d3e2e8; }
.fk-del li::marker { color: var(--fam); } .fk-lim li::marker { color: #8fa7b1; }
/* Gespraechsanlass */
.fk-talk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(53, 212, 255, .35); background: radial-gradient(70% 120% at 0% 50%, rgba(53, 212, 255, .12), transparent 60%), rgba(4, 16, 24, .85); }
.fk-talk .s30-k { grid-column: 1; margin: 0; color: #8fe9ff !important; }
.fk-talk__q { grid-column: 1; margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: #fff; font-weight: 500; }
.fk-talk .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
@media (max-width: 1000px) { .fk-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fk-flow li::after { display: none; } .fk-tech { grid-template-columns: 1fr; } .fk-out { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .fk-track { grid-template-columns: 1fr; gap: 16px; } .fk-track::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; background: linear-gradient(180deg, var(--fam), var(--fam2)); }
  .fk-track li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 14px; padding: 0; } .fk-track__i { grid-row: 1 / span 2; margin: 0; }
  .fk-sheet dl > div { grid-template-columns: 1fr; gap: 2px; } .fk-flow ol { grid-template-columns: 1fr; }
  .fk-weights { flex-direction: column; } .fk-weights > div { flex-basis: auto; }
  .fk-zones { grid-template-columns: 1fr; } .fk-zones > div { padding-left: 0; border-left: 0; }
  .fk-time { grid-template-columns: 1fr; } .fk-time__p--rpo, .fk-time__p--event { text-align: left; }
  .fk-talk { grid-template-columns: 1fr; } .fk-talk .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Runde 7: Wer ist Nimbus IT, direkt im ersten Bildschirm jeder Leistungsseite */
.s30-who { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: #b9cad1; max-width: 62ch; }
.s30-who b { color: #fff; font-weight: 600; }
.s30-who__faces { display: inline-flex; flex: none; }
.s30-who__faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #04131c; box-shadow: 0 0 0 1px rgba(var(--fam-rgb), .55); }
.s30-who__faces img + img { margin-left: -9px; }

/* Runde 7: sichtbare Markierung, wenn der Mess-Testmodus aktiv ist (nur fuer interne Tests per ?nimbus_test=1) */
.m30-testbadge { position: fixed; left: 12px; bottom: 12px; z-index: 99999; padding: 6px 12px; border-radius: 999px; background: #ffb340; color: #1a1000; font: 700 12px/1.3 system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none; }

/* Runde 7: Passende Leistungen je Weg im Loesungsraum der Startseite */
.v3-fit { margin: 22px 0 0; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(53, 212, 255, .28); background: rgba(3, 13, 21, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.v3-fit h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fe9ff; }
.v3-fit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3-fit a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: #e6f0f4 !important; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); transition: border-color .2s, background .2s; }
.v3-fit a:hover { border-color: rgba(53, 212, 255, .55); background: rgba(53, 212, 255, .08); }
.v3-fit__i { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #061722; border: 1px solid rgba(53, 212, 255, .45); }
.v3-fit__i:empty::before { content: "→"; color: #8fe9ff; font-weight: 700; }
.v3-fit__i svg { width: 21px; height: 21px; fill: none; stroke: #42d9ff; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.v3-fit b { font-size: 14.5px; color: #fff; line-height: 1.25; } .v3-fit a > span:last-child { font-size: 12.5px; color: #a9bcc4; line-height: 1.35; }
@media (max-width: 900px) { .v3-fit ul { grid-template-columns: 1fr; } }