/* Selected direction 01: precise contour, mouse hover only. */
/* Selected palette overrides are at the end; manufacturer styles stay unchanged. */
.safeit-icon .icon{fill:none;stroke:#173e32;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.safeit-icon .icon .panel{fill:#f3f1e7}.safeit-icon .icon .shade{fill:#d0d8c9}.safeit-icon .icon .accent{fill:#b4d96a}.safeit-icon .icon .fill{fill:#173e32;stroke:none}.safeit-icon .icon .fine{stroke-width:1.6}.safeit-icon .icon .muted{stroke:#7b9384}.safeit-icon .icon .light{stroke:#f3f1e7}.safeit-icon .icon .status{fill:#769c3d;stroke:none}.safeit-icon .icon .back{fill:#779080;stroke:#173e32}.safeit-icon .icon .led{fill:#b4d96a;stroke:none}.safeit-icon.v2 .panel{fill:#173e32}.safeit-icon.v2 .surface{fill:#f3f1e7}.safeit-icon.v2 .accent{fill:#b4d96a}.safeit-icon.v2 .inside{stroke:#f3f1e7}.safeit-icon.v2 .status{fill:#b4d96a}.safeit-icon.v2 .shade{fill:#a0b390}.safeit-icon.v3 .safeit-icon .icon{stroke-width:2}.safeit-icon.v3 .panel{fill:#e7eadf}.safeit-icon .icon .trace{stroke-dasharray:none}.safeit-icon .icon .packet{opacity:0}.safeit-icon .icon *{animation:none}.safeit-icon .icon .tilt{transform-box:fill-box;transform-origin:center}
.illustrated-service{background:var(--card-color);color:#173e32}
.illustrated-service.forest,.detail-intro.forest{--card-color:#dfe6d2;--card-ink:#173e32}
.illustrated-service .service-artwork{background:transparent;height:180px}
.service-artwork .safeit-icon{width:180px;height:158px;max-width:80%;overflow:visible}
.illustrated-service .service-caption{padding:14px 26px 28px}
.service-caption h2,.service-caption h3{font-size:25px;line-height:1.25}
.service-caption p{color:#465b50}
.featured-services .illustrated-service{grid-template-columns:.75fr 1.25fr}
.featured-services .service-artwork{height:100%;min-height:250px}
.featured-services .service-caption{padding:28px 26px 28px 6px}
.detail-intro>.safeit-icon{width:230px;height:220px;max-width:100%;max-height:none}
.service-intro-art .service-wheel{width:100%;height:100%}
.service-wheel .safeit-icon{max-height:none;overflow:visible}
@media(max-width:1000px){.featured-services .service-artwork{height:170px;min-height:0}.featured-services .service-caption{padding:14px 26px 28px}}
@media(max-width:640px){.illustrated-service .service-artwork,.featured-services .service-artwork{height:164px}.service-artwork .safeit-icon{width:164px;height:144px}.illustrated-service .service-caption{padding:12px 24px 26px}.detail-intro>.safeit-icon{width:180px;height:170px}.service-caption h2,.service-caption h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.safeit-icon *{animation:none!important;transition:none!important}}
.service-wheel .safeit-icon{width:84px;height:84px}

/* Kobalt & Koralle. Original page background and brand logos are untouched. */
:is(.illustrated-service,.detail-intro){--card-ink:#faf8f0;color:var(--card-ink);--service-icon-ink:#faf8f0;--service-icon-panel:#f3f1e712;--service-icon-status:#d5e998}
:is(.illustrated-service,.detail-intro).peach{--card-color:#a44444}
:is(.illustrated-service,.detail-intro).forest{--card-color:#21443a;--card-ink:#faf8f0}
:is(.illustrated-service,.detail-intro).sky{--card-color:#3156a0}
:is(.illustrated-service,.detail-intro).sage{--card-color:#606e3a}
:is(.illustrated-service,.detail-intro):has(.safeit-icon[data-service="netzwerk-it-infrastruktur"]){--card-color:#89651f}
.service-caption p,.detail-intro .lead{color:var(--card-ink)}
:is(.illustrated-service,.detail-intro) .safeit-icon .icon{stroke:var(--service-icon-ink)}
:is(.illustrated-service,.detail-intro) .safeit-icon :is(.panel,.surface,.shade){fill:var(--service-icon-panel);stroke:var(--service-icon-ink)}
:is(.illustrated-service,.detail-intro) .safeit-icon :is(.inside,.muted,.light,.back){stroke:var(--service-icon-ink)}
:is(.illustrated-service,.detail-intro) .safeit-icon :is(.status,.led,.accent){fill:var(--service-icon-status);stroke:none}

@media(hover:hover) and (pointer:fine){:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .blink{animation:indicator 1.9s ease-in-out infinite}:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .trace{stroke-dasharray:100;animation:trace 2.5s ease-out infinite}:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .packet{animation:packet 2.7s linear infinite}:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .bar{animation:meter 2.3s ease-in-out infinite;transform-box:fill-box;transform-origin:left}:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .tilt{animation:tilt 3s ease-in-out infinite}:is(.illustrated-service:hover .safeit-icon,.detail-intro .safeit-icon:hover,.service-wheel .safeit-icon:hover) .sync{animation:sync 5s linear infinite;transform-box:fill-box;transform-origin:center}}
@keyframes indicator{0%,100%{opacity:1}50%{opacity:.3}}@keyframes trace{0%{stroke-dashoffset:100}65%,100%{stroke-dashoffset:0}}@keyframes packet{0%{transform:translateY(-8px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(30px);opacity:0}}@keyframes meter{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.5)}}@keyframes tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-2deg)}}@keyframes sync{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){.safeit-icon *{animation:none!important;transition:none!important}}