/* =====================================================================
   VIA X Unternehmensseiten-Block (viax/company-page). Umsetzung
   2026-10-12 nach Pflichtenheft-Unternehmensseiten v1.0. Eigenstaendiges,
   in sich geschlossenes Stylesheet - wird nur geladen, wenn
   has_block('viax/company-page') zutrifft (siehe
   class-viax-company.php::enqueue_assets()). Enthaelt daher, wie bereits
   bei partner.css gegenueber case-study.css etabliert, eine eigene Kopie
   des Icon-Maskensystems (Basisregel + alle neun hier wiederverwendeten
   Bestandsschluessel) statt einer harten CSS-Ladereihenfolge-Abhaengigkeit
   zu case-study.css. Neue Komponenten/Klassen ausschliesslich im
   .viax-company-*-Namensraum, keine globalen Selektoren, keine Aenderung
   an site.css/case-study.css/partner.css.
   ===================================================================== */

/* ---- Lokale Farbvariablen (bläulicherer v3-Hintergrundton), NUR im
   viax-company-page-Namensraum - die globalen --viax-*-Tokens aus
   site.css bleiben unveraendert (Pflichtenheft Abschnitt 3.6/5.1). ---- */
.viax-company-page {
    --viax-company-night: #051221;
    --viax-company-deep: #0a2238;
    --viax-company-surface: #0f2c45;
    --viax-company-border: rgba(244, 243, 247, 0.14);
    /* Vierte Akzentfarbe fuer Diagramm-Icons (Daniel-Feedback 12.10.2026:
       "lila-blassblau", kein bestehendes --viax-*-Token) - bei Bedarf hier
       zentral anpassen. */
    --viax-company-lilac: #9ba7f2;
}

/* ---- Icon-System: CSS-Maske, eigenstaendige Kopie (siehe Kommentar oben) ---- */
.viax-icon{--viax-icon:none;display:inline-block;flex:none;width:1.6em;height:1.6em;background-color:currentColor;
  -webkit-mask:var(--viax-icon) center/contain no-repeat;mask:var(--viax-icon) center/contain no-repeat}

/* -- wiederverwendete Bestandsschluessel (identische SVGs wie case-study.css/partner.css) -- */
.viax-icon--users{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.2c2.4.2 4.3 2.2 4.3 4.8'/%3E%3C/svg%3E")}
.viax-icon--person{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c0-4.1 3.4-7 7.5-7s7.5 2.9 7.5 7'/%3E%3C/svg%3E")}
.viax-icon--search{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E")}
.viax-icon--network{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-3.6M8.2 13.2l7.6 3.6'/%3E%3C/svg%3E")}
.viax-icon--gear{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/%3E%3C/svg%3E")}
.viax-icon--globe{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18'/%3E%3C/svg%3E")}
.viax-icon--database{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 5.5v13c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-13M4.5 12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3'/%3E%3C/svg%3E")}
.viax-icon--message{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E")}
.viax-icon--arrow{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.viax-icon--image{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E")}

/* -- neue Schluessel (Pflichtenheft Abschnitt 4), gleicher Linienicon-Stil:
   stroke-width 1.6, viewBox 0 0 24 24, round/round -- */
.viax-icon--code{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L4 12l5 8'/%3E%3Cpath d='M15 4l5 8-5 8'/%3E%3C/svg%3E")}
.viax-icon--brain{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4a4 4 0 0 0-4 4 3 3 0 0 0 0 6 4 4 0 0 0 4 4h1V4z'/%3E%3Cpath d='M16 4a4 4 0 0 1 4 4 3 3 0 0 1 0 6 4 4 0 0 1-4 4h-1V4z'/%3E%3Cpath d='M12 4v16'/%3E%3C/svg%3E")}
.viax-icon--gears{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='4'/%3E%3Cpath d='M9 2.2v2.3M9 13.5v2.3M2.2 9h2.3M13.5 9h2.3M4.5 4.5l1.5 1.5M12 12l1.5 1.5M13.5 4.5L12 6M6 12l-1.5 1.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='3.3'/%3E%3Cpath d='M16.5 11.8v1.4M16.5 20.8v1.4M11.8 16.5h1.4M20.8 16.5h1.4'/%3E%3C/svg%3E")}
.viax-icon--server{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='5' rx='1'/%3E%3Crect x='4' y='10' width='16' height='5' rx='1'/%3E%3Crect x='4' y='17' width='16' height='4' rx='1'/%3E%3Cpath d='M7 5.5h.01M7 12.5h.01M7 19h.01'/%3E%3C/svg%3E")}
.viax-icon--phone{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 19h2'/%3E%3C/svg%3E")}
.viax-icon--layers{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5'/%3E%3C/svg%3E")}
.viax-icon--cloud{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.5-9 5.5 5.5 0 0 1 10.8-1.5A4.5 4.5 0 0 1 17.5 18H7z'/%3E%3C/svg%3E")}
.viax-icon--chat{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H9l-3 3v-3H5a2 2 0 0 1-2-2V5z'/%3E%3Cpath d='M14 9h3a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-1v2l-2.5-2'/%3E%3C/svg%3E")}
.viax-icon--goal{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E")}
.viax-icon--calendar{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.viax-icon--stack{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='7' ry='2.3'/%3E%3Cpath d='M5 5v4.5c0 1.3 3.1 2.3 7 2.3s7-1 7-2.3V5'/%3E%3Cpath d='M5 9.5v4.5c0 1.3 3.1 2.3 7 2.3s7-1 7-2.3V9.5'/%3E%3Cpath d='M5 14v4.5c0 1.3 3.1 2.3 7 2.3s7-1 7-2.3V14'/%3E%3C/svg%3E")}
.viax-icon--sliders{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Cpath d='M3 12h18'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Cpath d='M3 18h18'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E")}
.viax-icon--verify{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E")}
.viax-icon--done{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4l-4-4 1.4-1.4 2.6 2.6 6-6 1.4 1.4-7.4 7.4z'/%3E%3C/svg%3E")}
.viax-icon--doc{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2h7l5 5v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M8.5 13h7M8.5 16.5h7'/%3E%3C/svg%3E")}
.viax-icon--develop{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9l3 3-3 3M13 15h4'/%3E%3C/svg%3E")}
.viax-icon--rocket{--viax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c3 2 5 6 5 10 0 2-1 4-2 5l-1 2-2-2-2 2-1-2c-1-1-2-3-2-5 0-4 2-8 5-10z'/%3E%3Ccircle cx='12' cy='9' r='1.6'/%3E%3Cpath d='M8 17l-3 3M16 17l3 3'/%3E%3C/svg%3E")}

/* ---- Hero (viax-company-hero): Eyebrow/H1/Lead/CTA + dekoratives
   Hintergrundbild (hero-netzwerk-ci.png), kein Foto im Vordergrund.
   G2 (Ausbesserung 12.10.2026): Netzwerk-Bild in Originalfarbe, OHNE
   Abdunklung/Overlay/Filter/reduzierte Deckkraft - weder ::after-Verlauf
   noch opacity auf dem Bild selbst. ---- */
.viax-company-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(4.5rem,9vw,8rem);background:var(--viax-company-night)}
.viax-company-hero__bg{position:absolute;inset:0;z-index:-1}
.viax-company-hero__bg-img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.viax-company-hero__inner{position:relative;width:min(calc(100% - var(--viax-gutter) - var(--viax-gutter)),var(--viax-content));margin-inline:auto}
.viax-company-hero h1{max-width:900px;margin:0;font-size:clamp(2.5rem,5.5vw,5.25rem);line-height:1;text-wrap:balance}
.viax-company-hero__lead{max-width:760px;margin:1.5rem 0 0;color:var(--viax-muted);font-size:clamp(1.1rem,1.7vw,1.38rem)}

/* G1 (Ausbesserung 12.10.2026): gelbe Eyebrow-Label ueber Headlines
   entfallen durchgaengig - im Hero (.viax-company-hero__inner > .viax-eyebrow)
   und in allen Abschnitten (.viax-section-heading > .viax-eyebrow). Nur
   innerhalb des viax-company-page-Namensraums wirksam, betrifft keine
   anderen Seitentypen (company.css laedt ohnehin nur hier). Die gelben
   Unterstriche unter den Headlines selbst (::after auf h2, site.css)
   bleiben unveraendert. */
.viax-company-page .viax-eyebrow{display:none}

/* ---- Leistungskarten / Tag-Pills ---- */
.viax-company-card-grid{--i:0}
.viax-company-card__icon{color:var(--viax-yellow);margin-bottom:1.1rem}
.viax-company-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.viax-company-tag{display:inline-flex;align-items:center;min-height:30px;padding:.2rem .75rem;border:1px solid var(--viax-company-border);border-radius:8px;font-size:.84rem;line-height:1.2;color:var(--viax-muted)}

/* ---- Fakten (viax-company-facts): 1/2/3-spaltige Icon/Titel/Text-Liste ---- */
.viax-company-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin:0;padding:0;list-style:none}
.viax-company-facts--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.viax-company-facts--1col{grid-template-columns:minmax(0,1fr)}
.viax-company-facts__item{display:flex;align-items:flex-start;gap:1rem}
.viax-company-facts__icon{flex:none;width:3.4rem;height:3.4rem;margin-top:.1rem;color:var(--viax-yellow)}
.viax-company-facts__item strong{display:block;color:var(--viax-light)}
.viax-company-facts__item p{margin:.3rem 0 0;color:var(--viax-muted)}
.viax-company-facts--location{max-width:360px}

/* ---- Fotoband (viax-company-photo-band): Desktop nebeneinander mit
   seitlich auslaufender Maske, Mobil gestapelt ---- */
.viax-company-photo-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.viax-company-photo-band--right{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.viax-company-photo-band--right .viax-company-photo-band__media{order:2}
.viax-company-photo-band--right .viax-company-photo-band__copy{order:1}
/* G3 (Ausbesserung 12.10.2026): keine abgerundete Karte, Bild reicht
   weiter zum Rand (Bleed in den Gutter-Bereich hinein). */
.viax-company-photo-band__media{margin:0;overflow:hidden;border-radius:0;background:var(--viax-company-surface)}
.viax-company-photo-band--left .viax-company-photo-band__media{margin-left:calc(-1 * var(--viax-gutter))}
.viax-company-photo-band--right .viax-company-photo-band__media{margin-right:calc(-1 * var(--viax-gutter))}
/* G3 (Ausbesserung 12.10.2026): Verlauf geht IMMER zur Textseite hin (wie
   beim freigegebenen Services-CTA-Foto) - Bild links/Text rechts faded auf
   der rechten (inneren) Kante, Bild rechts/Text links faded auf der
   linken (inneren) Kante. Vorher war das vertauscht (faded zur
   Aussenkante). */
.viax-company-photo-band--left .viax-company-photo-band__media{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 18%,#000 100%);mask-image:linear-gradient(270deg,transparent 0,#000 18%,#000 100%)}
.viax-company-photo-band--right .viax-company-photo-band__media{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%)}
.viax-company-photo-band__media img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}
.viax-company-photo-band__copy h2{margin:0 0 .9rem;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;text-wrap:balance}
.viax-company-photo-band__copy > p{color:var(--viax-muted);font-size:1.08rem;line-height:1.6}
.viax-company-photo-band__copy .viax-company-facts{margin-top:1.8rem;grid-template-columns:1fr}

/* ---- Vorgehen/Prozess: Wiederverwendung .viax-process-step, eigenes Grid ---- */
.viax-company-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.viax-company-process-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.viax-company-process-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.viax-company-process-step__icon{color:var(--viax-yellow);margin-bottom:.9rem}
/* Daniel-Feedback 12.10.2026: site.css zeichnet auf <=620px per
   .viax-process-step::before einen farbigen Verbindungspunkt links neben
   jeder Karte - das setzt die Linien-/Einrueckungs-Regeln von
   .viax-process-grid voraus, die .viax-company-process-grid nicht hat.
   Ergebnis: der Punkt haengt ohne Platz im Nichts und wirkt abgeschnitten.
   Komplett entfernen statt nachbauen (so gewuenscht). */
.viax-company-process-step::before{content:none}

/* ---- Ansprechpartner (viax-company-contact-mini) ---- */
.viax-company-contact-mini{display:flex;gap:1.6rem;align-items:flex-start;max-width:640px}
.viax-company-contact-mini__media{flex:none;width:112px;height:112px;margin:0;overflow:hidden;border-radius:50%;background:var(--viax-company-surface)}
.viax-company-contact-mini__media img{display:block;width:100%;height:100%;object-fit:cover}
.viax-company-contact-mini__name{margin:0;font-size:1.25rem;font-weight:750;color:var(--viax-light)}
.viax-company-contact-mini__role{margin:.2rem 0 0;color:var(--viax-yellow);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.viax-company-contact-mini__text{margin:.7rem 0 0;color:var(--viax-muted)}
.viax-company-contact-mini__email a{color:var(--viax-light);text-decoration:none}
.viax-company-contact-mini__email a:hover{color:var(--viax-yellow)}
.viax-company-button__icon{width:1.1em;height:1.1em;margin-left:.35rem}

/* ---- Timeline (viax-company-timeline): vier Module, sechs Screens,
   Desktop alternierend mit vertikaler Mittellinie, Mobil gestapelt ----
   Daniel-Feedback 12.10.2026: Linie bekommt oben/unten einen kleinen
   Punkt als Abschluss (drei gestapelte Hintergruende statt einem reinen
   ::before-Strich), damit sie nicht "ins Leere laeuft". */
.viax-company-timeline{position:relative;display:grid;gap:clamp(3rem,6vw,5rem)}
.viax-company-timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:8px;margin-left:-4px;
  background:
    radial-gradient(circle 4px at 50% 0, var(--viax-company-border) 99%, transparent 100%),
    radial-gradient(circle 4px at 50% 100%, var(--viax-company-border) 99%, transparent 100%),
    linear-gradient(var(--viax-company-border), var(--viax-company-border));
  background-repeat:no-repeat;
  background-size:8px 8px,8px 8px,2px 100%;
  background-position:top,bottom,center}
/* Daniel-Feedback 12.10.2026 (zweite Runde): erste Vergroesserung reichte
   noch nicht - Abstand nochmal auf ca. das 2.5-fache erhoeht (Zielwert ca.
   80px Linie->Handy bei 1440px, vorher ca. 32px). vw-Anteil deckelt ab ca.
   1450px bei 10rem, damit auf sehr breiten Screens (1920px+) der Abstand
   nicht weiter waechst (Shell ist ohnehin auf 1180px begrenzt). Linie
   bleibt exakt mittig, beide Seiten wachsen symmetrisch gleich. */
.viax-company-timeline__module{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(5rem,11vw,10rem);align-items:center}
.viax-company-timeline__module--right{direction:rtl}
.viax-company-timeline__module--right .viax-company-timeline__copy,
.viax-company-timeline__module--right .viax-company-timeline__screens{direction:ltr}
/* Daniel-Feedback: Handybilder sassen rechts naeher an der Linie als
   links - rechte Spalte (linksseitige Module) blieb bereits am inneren
   Rand (naeher zur Linie), die linke Spalte (rechtsseitige Module)
   musste zusaetzlich an ihren inneren/rechten Rand gezogen werden. */
.viax-company-timeline__module--right .viax-company-timeline__screens{justify-content:flex-end}
/* Daniel-Feedback: farbiger Punkt bekommt einen zusaetzlichen Ring in
   derselben Farbe (mit Abstand durch den bestehenden dunklen Rand). */
.viax-company-timeline__point{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:3px solid var(--viax-night);background:var(--viax-yellow);box-shadow:0 0 0 4px rgba(255,237,64,.35);z-index:1}
.viax-company-timeline__module--pink .viax-company-timeline__point{background:var(--viax-pink);box-shadow:0 0 0 4px rgba(237,52,162,.35)}
.viax-company-timeline__module--green .viax-company-timeline__point{background:var(--viax-green);box-shadow:0 0 0 4px rgba(87,237,76,.35)}
.viax-company-timeline__copy h3{margin:.5rem 0 0;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15}
.viax-company-timeline__copy p{margin:.6rem 0 0;color:var(--viax-muted)}
.viax-company-timeline__screens{display:flex;gap:1rem;flex-wrap:wrap}
/* Unternehmen-Feedback (vorab beruecksichtigt): freigestellte Handybilder
   ohne Container - kein Rahmen, kein Hintergrund, keine Karte. */
.viax-company-timeline__screen{margin:0;flex:1 1 140px;max-width:220px}
.viax-company-timeline__screen-img{display:block;width:100%;height:auto}

/* ---- Services: zweispaltiger Aufbau (Ausbesserung 12.10.2026) - links
   Ueberschrift/Einleitung/Unterlinks, rechts ein Panel mit dem Flowchart.
   Mobil gestapelt, Panel unter dem Text. ---- */
.viax-company-service-block{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.viax-company-service-block__panel{padding:clamp(1.4rem,2.6vw,2.2rem);border:1px solid var(--viax-company-border);border-radius:var(--viax-radius);background:rgba(244,243,247,.03)}
.viax-company-diagram-links{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin:1.4rem 0 0;padding:0;list-style:none}
.viax-company-diagram-links a{display:inline-flex;align-items:center;gap:.4rem;color:var(--viax-light);text-decoration:none;font-weight:650}
.viax-company-diagram-links a:hover{color:var(--viax-yellow)}

/* G5 (Ausbesserung 12.10.2026): Section-H2 auf Services an die
   Case-Study-Typografie angleichen (site.css .viax-section-heading h2
   ist fuer vereinzelte grosse Abschnitte gedacht, auf Services stehen
   drei Diagramm-Abschnitte hintereinander - Referenzgroesse aus
   case-study.css .viax-case-chapter h2). */
.viax-company-page--services .viax-section-heading h2{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.05}

/* ---- Flow-/Austauschdiagramm: eigenstaendige Kopie der Basisregeln aus
   case-study.css (dort nicht ladbar, siehe Dateikopf-Kommentar) ---- */
/* Ausbesserung 12.10.2026 (Daniel-Feedback Punkt 4): EIN gemeinsamer
   Pfeil-Stil fuer Flow- UND Austauschdiagramm - identische Datei, Farbe,
   Strichstaerke, Groessenverhaeltnis an beiden Stellen, kein
   unterschiedliches "dünner/größer" mehr zwischen den Diagrammen. */
:root{--viax-company-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h40M34 4l8 8-8 8'/%3E%3C/svg%3E")}

.viax-flow{display:flex;justify-content:center;gap:clamp(2.2rem,6vw,3.6rem);margin:0;padding:0;list-style:none;counter-reset:none}
.viax-flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 1 150px;min-width:0}
.viax-flow__node{display:grid;place-items:center;width:92px;height:92px;border:2px solid var(--viax-muted);border-radius:50%;color:var(--viax-light)}
.viax-flow__node .viax-icon{width:3rem;height:3rem}
.viax-flow strong{margin-top:.7rem;font-size:1.05rem;line-height:1.2}
.viax-flow__note{margin-top:.25rem;font-size:.78rem;line-height:1.3;color:var(--viax-muted)}
.viax-flow li+li::before{content:"";position:absolute;top:46px;left:calc(-1 * clamp(2.2rem,6vw,3.6rem) + 6px);width:calc(clamp(2.2rem,6vw,3.6rem) - 12px);height:26px;margin-top:-13px;background:var(--viax-light);
  -webkit-mask:var(--viax-company-arrow) center/contain no-repeat;mask:var(--viax-company-arrow) center/contain no-repeat}

.viax-exchange{display:grid;gap:1rem}
.viax-exchange__nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.viax-exchange__node{display:flex;flex-direction:column;align-items:center;min-width:0}
.viax-exchange__card{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .7rem;border:1px solid var(--viax-company-border);border-radius:var(--viax-radius-small);background:rgba(244,243,247,.04);text-align:center;font-size:.78rem;line-height:1.3;color:var(--viax-muted)}
.viax-exchange__card strong{color:var(--viax-light);font-size:1.05rem}
.viax-exchange__card .viax-icon{width:2.6rem;height:2.6rem}
.viax-exchange__links{display:flex;gap:1.6rem;justify-content:center;height:3.6rem;align-items:center}
.viax-exchange i{display:block;width:26px;height:26px;background:var(--viax-light);
  -webkit-mask:var(--viax-company-arrow) center/contain no-repeat;mask:var(--viax-company-arrow) center/contain no-repeat}
.viax-exchange i.back{background:var(--viax-muted);transform:rotate(180deg)}
.viax-exchange__hub{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.95rem 1rem;border:1px solid var(--viax-company-border);border-radius:var(--viax-radius-small);background:rgba(244,243,247,.06);font-size:1.2rem}
.viax-exchange__hub .viax-icon{width:2.6rem;height:2.6rem;color:var(--viax-pink)}
.viax-exchange__band{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.9rem 1.2rem;border:1px solid var(--viax-company-border);border-radius:var(--viax-radius-small);background:rgba(244,243,247,.05);text-align:center}
.viax-exchange__band .viax-icon{width:2.2rem;height:2.2rem;color:var(--viax-muted);flex:none}
.viax-exchange__band strong{color:var(--viax-light)}

/* Ausbesserung 12.10.2026 (Daniel-Feedback Punkt 6): Icon-Farben in den
   Diagrammen - freie Wahl aus Pink/Gruen/Gelb/Lila-Blassblau, Haken-Icons
   (verify/done) immer gruen. Reihen-Knoten zyklisch eingefaerbt, Hub immer
   Pink (siehe .viax-exchange__hub oben), Zahlenbalken neutral/muted. */
.viax-exchange__node:nth-child(3n+1) .viax-icon{color:var(--viax-pink)}
.viax-exchange__node:nth-child(3n+2) .viax-icon{color:var(--viax-yellow)}
.viax-exchange__node:nth-child(3n+3) .viax-icon{color:var(--viax-company-lilac)}
.viax-flow li:nth-child(5n+1) .viax-icon{color:var(--viax-muted)}
.viax-flow li:nth-child(5n+2) .viax-icon{color:var(--viax-pink)}
.viax-flow li:nth-child(5n+3) .viax-icon{color:var(--viax-yellow)}
.viax-flow li:nth-child(5n+4) .viax-icon{color:var(--viax-company-lilac)}
.viax-icon--verify,.viax-icon--done{color:var(--viax-green)!important}

/* ---- Diagramm 2: KI-Rueckkopplung. G6/Ausbesserung 12.10.2026: KEIN
   Container/KEINE Box fuer die Rueckfuehrung - reine Text-/Icon-Zeile mit
   Ruecklaufpfeil, kein Rahmen, kein Hintergrund. ---- */
.viax-flow__feedback{display:flex;align-items:flex-start;justify-content:center;gap:.8rem;max-width:560px;margin:2.4rem auto 0;text-align:left}
.viax-flow__feedback-icon{flex:none;width:1.7rem;height:1.7rem;margin-top:.1rem;color:var(--viax-green);transform:scaleX(-1)}
.viax-flow__feedback strong{display:block;color:var(--viax-light)}
.viax-flow__feedback p{margin:.25rem 0 0;color:var(--viax-muted);font-size:.92rem}

/* ---- Services-Abschluss: CTA + Teamfoto kombiniert (Daniel-Feedback
   12.10.2026 Punkt 5) - Foto rechtsbuendig bis zum Rand, nach links
   ausfadend, CTA-Text davor. Kein eigener Bild-Container/Rahmen mehr. ---- */
.viax-company-cta-photo{position:relative;isolation:isolate;overflow:hidden;min-height:760px;display:flex;align-items:center;padding-block:3rem}
.viax-company-cta-photo__media{position:absolute;inset:0 0 0 32%;margin:0;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)}
/* Ausbesserung (3. Korrektur): Ausschnitt-Fenster insgesamt weiter nach
   unten verschoben - weniger Leerraum ueber den Koepfen, dadurch
   gleichzeitig mehr vom Bauch sichtbar (eine Y-Position steuert beides). */
.viax-company-cta-photo__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
/* Punkt 3 (Ausbesserung): KEIN violetter Kasten mehr - .viax-cta bringt
   aus site.css einen eigenen Hintergrund/Rahmen/Padding mit (fuer die
   "normale" CTA-Sektion gedacht), hier bewusst entfernt, Text steht frei
   vor dem Foto/Fade. */
.viax-company-cta-photo .viax-cta{max-width:560px;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:left}
.viax-company-cta-photo .viax-cta h2{margin:0;text-align:left}
.viax-company-cta-photo .viax-cta p{margin:1rem 0 0;text-align:left}

/* ---- Abschluss-CTA ohne Container (Daniel-Feedback 12.10.2026): der
   Farbverlauf zieht jetzt randlos ueber die volle Sektionsbreite, statt
   als abgerundete Karte innerhalb des Shells zu sitzen. .viax-cta selbst
   (aus site.css: eigener Hintergrund/Rahmen/Padding/border-radius)
   wird innerhalb dieses Wrappers auf reine Text-/Abstandsregeln
   zurueckgesetzt. ---- */
.viax-company-cta-wide{
  background:
    radial-gradient(circle at 8% 15%, rgba(87, 237, 76, 0.2), transparent 25%),
    radial-gradient(circle at 92% 80%, rgba(237, 52, 162, 0.22), transparent 30%),
    linear-gradient(135deg, #17112d, #3b0d33);
}
.viax-company-cta-wide .viax-cta{padding:0;border:0;border-radius:0;background:none}
.viax-company-cta-photo .viax-cta .viax-actions{justify-content:flex-start}

/* ================= Tablet <=900 px ================= */
@media (max-width:900px){
  .viax-company-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .viax-company-timeline__module,
  .viax-company-timeline__module--right{direction:ltr;grid-template-columns:minmax(0,1fr)}
  .viax-company-timeline::before{left:18px}
  .viax-company-timeline__point{left:18px;margin-left:-9px}
  .viax-company-timeline__copy,
  .viax-company-timeline__screens{padding-left:2.6rem}
  .viax-company-service-block{grid-template-columns:minmax(0,1fr)}
  .viax-exchange__nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ================= Schmal <=620 px: Flowcharts gestapelt, Pfeile nach unten ================= */
@media (max-width:620px){
  .viax-flow{flex-direction:column;align-items:center;gap:3rem}
  .viax-flow li{flex:none}
  .viax-flow li+li::before{top:-2.6rem;left:50%;width:36px;height:22px;margin:0 0 0 -18px;transform:rotate(90deg)}
  .viax-exchange__nodes{grid-template-columns:minmax(0,1fr)}
  .viax-exchange__links{flex-direction:column;gap:.4rem;height:auto}
  .viax-exchange i.send{transform:rotate(90deg)}
  .viax-exchange i.back{transform:rotate(-90deg)}
}
/* ================= Mobil <=620 px ================= */
@media (max-width:620px){
  .viax-company-hero h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .viax-company-card-grid,
  .viax-company-process-grid{grid-template-columns:1fr}
  .viax-company-facts,
  .viax-company-facts--2col,
  .viax-company-facts--3col{grid-template-columns:1fr}
  .viax-company-photo-band,
  .viax-company-photo-band--right{grid-template-columns:1fr}
  .viax-company-photo-band--right .viax-company-photo-band__media,
  .viax-company-photo-band--right .viax-company-photo-band__copy{order:initial}
  .viax-company-photo-band__media{-webkit-mask-image:none!important;mask-image:none!important;margin-left:0!important;margin-right:0!important}
  .viax-company-contact-mini{flex-direction:column;align-items:flex-start}
  /* Daniel-Feedback 12.10.2026: Handy-Screenshots wirkten auf Mobil zu
     gross/gedraengt (voller Container-Breite) - ca. 30% kleiner und
     zentriert statt gestreckt. */
  .viax-company-timeline__screens{flex-direction:column;align-items:center}
  .viax-company-timeline__screen{max-width:200px}
  .viax-company-cta-photo{min-height:0;padding-block:0;flex-direction:column;align-items:stretch}
  .viax-company-cta-photo__media{position:static;inset:auto;height:240px;-webkit-mask-image:none!important;mask-image:none!important}
  .viax-company-cta-photo .viax-cta{max-width:none;padding-block:2.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}