@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype");
}

:root {
    --viax-night: #100f1f;
    --viax-deep: #161637;
    --viax-surface: #22223d;
    --viax-light: #f4f3f7;
    --viax-muted: #b4afc7;
    --viax-yellow: #ffed40;
    --viax-green: #57ed4c;
    --viax-pink: #ed34a2;
    /* Lastenheft-Layout-Final-v1.0 (I03, 2026-10-17): vierter Zyklus-Ton,
       kein bestehender Token passte ("ruhiges Graublau") - Vorschlagswert
       aus dem Lastenheft uebernommen. */
    --viax-pale-blue: #aebbd4;
    /* Nachbesserung 2026-10-17: "Lilablassblau" fuer Hero-H1-Unterstriche
       (ersetzt dort die bisherige Gelb-Vorgabe). Exakter Wert aus dem
       bereits bestehenden, von Daniel so benannten Token uebernommen
       (company.css --viax-company-lilac: "lila-blassblau", Feedback
       12.10.2026) - hier global verfuegbar gemacht, da der Unterstrich auch
       auf Partner-/Blog-Heros ausserhalb des .viax-company-page-Scopes
       vorkommt. Kein neuer, abweichender Farbton. */
    --viax-lilac-pale-blue: #9ba7f2;
    --viax-border: rgba(244, 243, 247, 0.14);
    --viax-radius: 28px;
    --viax-radius-small: 14px;
    --viax-shadow: 0 24px 70px rgba(2, 2, 6, 0.28);
    --viax-content: 1180px;
    --viax-gutter: clamp(1rem, 4vw, 3rem);
    /* Nachbesserung 2026-10-20, Abschnitt 2: Headerhoehe als Variable statt
       Festwert im Scroll-Ziel-Code. CSS kann Hoehe nicht automatisch aus
       .viax-header-inner{min-height} auslesen - deshalb hier manuell
       synchron zu halten: min-height 84px (.viax-header-inner, weiter unten)
       + 1px border-bottom (.viax-site-header) = 85px. Bei einer Aenderung
       der Headerhoehe MUSS dieser Wert mitgezogen werden. Mobile Variante
       (<=900px, Header min-height 72px) wird in der dortigen Media-Query neu
       gesetzt. */
    --viax-header-height: 85px;
    /* Microsoft-Bookings-Umsetzung (2026-10-13): hier global statt nur auf
       .viax-partner-page/.viax-company-page, weil jetzt auch die
       Blog-Artikel-CTA (viax/contact-cta, nur site.css geladen) dieselbe
       .viax-partner-cta-Karte verwendet - siehe render_contact_cta() in
       class-viax-frontend.php. */
    --viax-partner-panel: rgba(34, 34, 61, .55);
    --viax-partner-line: rgba(244, 243, 247, .14);
    --viax-partner-radius: 14px;

    /* Hero-Vereinheitlichung (2026-10-15): gemeinsame Werte fuer
       .viax-company-hero, die .viax-partner-hero-UEBERSICHT und
       .viax-page-hero - Referenz ist /services/ (.viax-company-hero,
       bereits bisheriger Wortlaut dieser Werte). NICHT betroffen:
       .viax-home-hero (eigenes Video/Layout) und
       .viax-partner-hero--profile/.viax-case-hero (Stockfoto-Hero,
       ausdruecklich ausgenommen). Siehe Regelblock weiter unten
       (".viax-company-hero, .viax-partner-hero, .viax-page-hero") sowie
       company.css/partner.css, die dieselben Variablen verwenden statt
       eigener Werte. --viax-hero-eyebrow-height ist die gerenderte
       Gesamthoehe (Zeilenhoehe + margin-bottom) der SICHTBAREN
       .viax-page-hero-Eyebrow - nur dort gebraucht, weil die Eyebrow bei
       .viax-company-hero sitebreit ausgeblendet ist (siehe company.css)
       und die .viax-partner-hero-Uebersicht seit der Drei-Optimierungen-
       Aufgabe gar keine Eyebrow mehr hat. */
    --viax-hero-pad-top: clamp(4.5rem, 9vw, 8rem);
    --viax-hero-pad-bottom: clamp(4.5rem, 9vw, 8rem);
    --viax-hero-h1-size: clamp(2.5rem, 5.5vw, 5.25rem);
    --viax-hero-h1-max-width: 900px;
    --viax-hero-lead-size: clamp(1.1rem, 1.7vw, 1.38rem);
    --viax-hero-lead-max-width: 760px;
    --viax-hero-height: 44.5rem;
    --viax-hero-eyebrow-height: 2.03rem;
}

/* Microsoft-Bookings-Umsetzung (2026-10-13): Basis-Icon-System und die
   zwei hier benoetigten Icons (message, arrow) fuer die Blog-Artikel-CTA
   dupliziert aus partner.css/company.css/case-study.css - demselben
   bereits etablierten Muster folgend (dort ist der komplette
   Icon-Katalog je Kontext ebenfalls dupliziert, nicht zentral einge-
   bunden). site.css ist die einzige auf Blogartikeln geladene
   Stylesheet-Datei (siehe functions.php), eine neue CSS-Abhaengigkeit
   nur fuer zwei Icons war nicht gerechtfertigt. */
.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}
.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")}

/* Blog-Artikel-CTA (viax/contact-cta) im freigegebenen Partnerseiten-
   Kartenstil (.viax-partner-cta), ebenfalls aus partner.css dupliziert -
   siehe Begruendung oben. */
.viax-partner-ctawrap{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.viax-partner-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem clamp(1.25rem,2.5vw,2rem);padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);border:1px solid var(--viax-partner-line);border-radius:var(--viax-partner-radius);background:var(--viax-partner-panel)}
.viax-partner-cta .viax-partner-cta__icon{width:3.1rem;height:3.1rem;color:var(--viax-yellow)}
.viax-partner-cta h2{margin:0;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.viax-partner-cta p{margin-top:.5rem;max-width:44ch;color:var(--viax-light);opacity:.92}
.viax-partner-button{gap:.65rem}
.viax-partner-button .viax-icon{color:currentColor;width:1.15em;height:1.15em}
@media (max-width:600px){
  .viax-partner-cta{grid-template-columns:minmax(0,1fr)}
  .viax-partner-cta .viax-button{width:100%}
  .viax-partner-cta__copy{min-width:0}
}

* {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body.viax-site {
    margin: 0;
    overflow-x: clip;
    background: var(--viax-night);
    color: var(--viax-light);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.viax-site a {
    text-underline-offset: 0.18em;
}

body.viax-site :where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--viax-green);
    outline-offset: 4px;
}

.viax-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.viax-shell {
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    margin-inline: auto;
}

.viax-site :where(
    .viax-page-hero__grid,
    .viax-split,
    .viax-card-grid,
    .viax-process-grid,
    .viax-blog-grid,
    .viax-team-grid,
    .viax-contact-form__grid,
    .viax-origin-story .viax-shell,
    .viax-approach .viax-shell
) > * {
    min-width: 0;
}

.viax-site :where(img, video, canvas, iframe, svg) {
    max-width: 100%;
}

.viax-site :where(input, textarea, select, button) {
    max-width: 100%;
    min-width: 0;
}

.viax-site :where(h1, h2, h3, h4, .viax-eyebrow, .viax-button, .viax-text-link) {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.wp-block-template-part:has(> .viax-site-header) {
    position: sticky;
    z-index: 40;
    top: 0;
}

.viax-site-header {
    position: sticky;
    z-index: 40;
    top: 0;
    border-bottom: 1px solid var(--viax-border);
    background: rgba(16, 15, 31, 0.88);
    box-shadow: 0 12px 36px rgba(2, 2, 8, 0.18);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px);
}

/* Lastenheft-Layout-Final-v1.0 (N01, 2026-10-17): width/Inset jetzt exakt
   wie .viax-shell (Breite reduziert um 2x Gutter, KEIN zusaetzliches
   padding-inline mehr) - vorher hatte .viax-header-inner eine eigene,
   groessere Inset-Formel (width:min(100%,content) + bis zu 3rem
   padding-inline), wodurch die linke Logokante bei Desktop-Breiten bis zu
   48px weiter rechts stand als die Inhaltsachse darunter (siehe image8.png). */
.viax-site-header .wp-block-group__inner-container,
.viax-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    min-height: 84px;
    margin-inline: auto;
}

.viax-site-header .wp-block-site-logo img,
.viax-brand img {
    display: block;
    width: auto;
    height: 34px;
}

.viax-site-header .wp-block-navigation {
    font-size: 0.95rem;
    font-weight: 700;
}

.viax-site-header .wp-block-navigation-item__content {
    color: var(--viax-light);
}

.viax-site-header .wp-block-button__link,
.viax-portal-link {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
    background: transparent;
    color: var(--viax-light);
    font-weight: 800;
    text-decoration: none;
}

.viax-nav {
    margin-left: auto;
}

.viax-nav__desktop {
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 1.4vw, 1.35rem);
}

.viax-nav__link,
.viax-nav__language,
.viax-nav__dropdown-link {
    position: relative;
    color: var(--viax-light);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.viax-nav__link:hover,
.viax-nav__language:hover,
.viax-nav__dropdown-link:hover {
    color: var(--viax-yellow);
}

/* Active-Indicator Hauptnavigation (Auftrag 2026-10-20, Abschnitt 6): kurzer,
   horizontal zentrierter Unterstrich unter dem aktiven Menuepunkt. Blasses
   Lila/Periwinkle (--viax-lilac-pale-blue, bereits bestehendes Token, siehe
   :root) statt Gelb/Pink/Gruen, damit er sich von den uebrigen Akzentfarben
   abhebt und zum blau-violetten Hero-Hintergrund passt. Deutlich kuerzer als
   der Linktext (20px fix statt text-abhaengig). */
.viax-nav__link.is-active {
    color: var(--viax-light);
}

.viax-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--viax-lilac-pale-blue);
    transform: translateX(-50%);
}

.viax-nav__dropdown {
    position: relative;
}

.viax-nav__dropdown > summary {
    cursor: pointer;
    list-style: none;
}

.viax-nav__dropdown > summary::-webkit-details-marker {
    display: none;
}

.viax-nav__dropdown > summary::after {
    display: inline-block;
    margin-left: 0.42rem;
    content: "▾";
    font-size: 0.7em;
    transition: transform 160ms ease;
}

.viax-nav__dropdown[open] > summary::after {
    transform: rotate(180deg);
}

.viax-nav__dropdown-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.8rem);
    left: -1rem;
    display: grid;
    min-width: 245px;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: var(--viax-deep);
    box-shadow: var(--viax-shadow);
}

.viax-nav__dropdown-link {
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
}

.viax-nav__dropdown-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

.viax-nav__language {
    display: inline-flex;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
}

.viax-nav__mobile {
    display: none;
}

.viax-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
    background:
        radial-gradient(circle at 12% 18%, rgba(87, 237, 76, 0.24), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(237, 52, 162, 0.22), transparent 26%),
        linear-gradient(135deg, #07111d 0%, #17112d 48%, #3b0d33 100%);
}

.viax-hero::after {
    position: absolute;
    z-index: -1;
    right: -12vw;
    bottom: -18vw;
    width: 42vw;
    height: 42vw;
    border: clamp(24px, 4vw, 62px) solid rgba(255, 237, 64, 0.08);
    border-radius: 50%;
    content: "";
}

.viax-home-slider {
    position: relative;
    overflow: hidden;
    min-height: clamp(620px, 78vh, 820px);
    background:
        radial-gradient(circle at 12% 20%, rgba(87, 237, 76, 0.2), transparent 26%),
        radial-gradient(circle at 88% 22%, rgba(237, 52, 162, 0.2), transparent 28%),
        linear-gradient(135deg, #07111d 0%, #17112d 50%, #3b0d33 100%);
    touch-action: pan-y;
}

.viax-home-slide .viax-button {
    font-weight: 600;
}

.viax-home-slider__slides {
    position: relative;
    min-height: inherit;
}

.viax-home-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: min(100%, var(--viax-content));
    margin-inline: auto;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem) 7rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(3%);
    transition: opacity 500ms ease, transform 650ms ease;
}

.viax-home-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.viax-home-slide__copy h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(2.65rem, 5.4vw, 5.25rem);
    line-height: 0.98;
    text-wrap: balance;
}

.viax-home-slide--freelancer .viax-home-slide__copy h1,
.viax-home-slide--jobs .viax-home-slide__copy h1 {
    font-size: clamp(2.55rem, 4.6vw, 4.5rem);
}

.viax-home-slide__copy > p:not(.viax-eyebrow) {
    max-width: 740px;
    margin: 1.5rem 0 2rem;
    color: var(--viax-muted);
    font-size: clamp(1.08rem, 1.8vw, 1.4rem);
    line-height: 1.55;
}

.viax-home-slide__visual {
    position: relative;
    min-height: 500px;
}

.viax-home-slide__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--viax-border);
    border-radius: clamp(22px, 4vw, 44px);
    box-shadow: var(--viax-shadow);
    object-fit: cover;
}

.viax-network {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 640 / 520;
    overflow: hidden;
    border: 1px solid rgba(244, 243, 247, 0.16);
    border-radius: clamp(28px, 5vw, 54px);
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 237, 64, 0.09), transparent 24%),
        radial-gradient(circle at 8% 8%, rgba(87, 237, 76, 0.12), transparent 32%),
        radial-gradient(circle at 92% 88%, rgba(237, 52, 162, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(9, 12, 28, 0.98), rgba(24, 21, 50, 0.96));
    box-shadow: 0 34px 90px rgba(2, 2, 8, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
}

.viax-network::before,
.viax-network::after {
    position: absolute;
    z-index: -1;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.viax-network::before {
    top: -105px;
    right: -70px;
    box-shadow: 0 0 80px rgba(237, 52, 162, 0.12);
}

.viax-network::after {
    bottom: -125px;
    left: -60px;
    box-shadow: 0 0 80px rgba(87, 237, 76, 0.1);
}

.viax-network__grid {
    position: absolute;
    inset: 12% 8%;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(244, 243, 247, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 243, 247, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, #000 20%, transparent 76%);
    transform: perspective(500px) rotateX(58deg) scale(1.1);
    transform-origin: 50% 55%;
}

.viax-network__links {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.viax-network__links path {
    fill: none;
    stroke: rgba(244, 243, 247, 0.34);
    stroke-width: 2;
    stroke-dasharray: 7 9;
    vector-effect: non-scaling-stroke;
}

.viax-network__links .viax-network__perimeter {
    stroke: rgba(244, 243, 247, 0.13);
    stroke-dasharray: 2 12;
}

.viax-network__data .is-green {
    fill: var(--viax-green);
}

.viax-network__data .is-pink {
    fill: var(--viax-pink);
}

.viax-network__data .is-yellow {
    fill: var(--viax-yellow);
}

.viax-network__data .is-light {
    fill: var(--viax-light);
}

.viax-network__node {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38%;
    min-height: 20%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(0.85rem, 1.6vw, 1.15rem);
    overflow: hidden;
    border: 1px solid rgba(244, 243, 247, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(244, 243, 247, 0.085), rgba(244, 243, 247, 0.025)),
        rgba(19, 18, 42, 0.9);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    animation: viax-node-float 5.5s ease-in-out infinite;
}

.viax-network__node::after {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(244, 243, 247, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 243, 247, 0.13) 1px, transparent 1px);
    background-size: 18px 18px;
    content: "";
    pointer-events: none;
}

.viax-network__node--a {
    top: 7%;
    left: 3%;
    border-color: rgba(87, 237, 76, 0.35);
}

.viax-network__node--b {
    top: 7%;
    right: 3%;
    border-color: rgba(237, 52, 162, 0.38);
    animation-delay: -1.6s;
}

.viax-network__node--c {
    z-index: 3;
    top: 38%;
    left: 31%;
    border-color: rgba(255, 237, 64, 0.5);
    background:
        radial-gradient(circle at 10% 10%, rgba(87, 237, 76, 0.19), transparent 38%),
        radial-gradient(circle at 90% 90%, rgba(237, 52, 162, 0.2), transparent 40%),
        rgba(25, 22, 52, 0.96);
    box-shadow: 0 0 0 8px rgba(255, 237, 64, 0.035), 0 20px 52px rgba(0, 0, 0, 0.42);
    animation-delay: -0.8s;
}

.viax-network__node--d {
    bottom: 7%;
    left: 3%;
    border-color: rgba(255, 237, 64, 0.38);
    animation-delay: -2.4s;
}

.viax-network__node--e {
    right: 3%;
    bottom: 7%;
    border-color: rgba(180, 175, 199, 0.42);
    animation-delay: -3.2s;
}

.viax-network__node strong,
.viax-network__node small {
    position: relative;
    z-index: 1;
}

.viax-network__node strong {
    max-width: 18ch;
    color: var(--viax-light);
    font-size: clamp(0.92rem, 1.65vw, 1.22rem);
    line-height: 1.14;
}

.viax-network__node small {
    margin-top: 0.4rem;
    color: var(--viax-muted);
    font-size: clamp(0.65rem, 1vw, 0.78rem);
    letter-spacing: 0.02em;
}

.viax-network__signal {
    position: absolute;
    z-index: 2;
    top: 0.8rem;
    right: 0.8rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--viax-green);
    box-shadow: 0 0 18px rgba(87, 237, 76, 0.8);
}

.viax-network__node--b .viax-network__signal {
    background: var(--viax-pink);
    box-shadow: 0 0 18px rgba(237, 52, 162, 0.8);
}

.viax-network__node--c .viax-network__signal,
.viax-network__node--d .viax-network__signal {
    background: var(--viax-yellow);
    box-shadow: 0 0 18px rgba(255, 237, 64, 0.8);
}

.viax-network__signal::after {
    position: absolute;
    inset: -5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    content: "";
    animation: viax-signal-pulse 2.2s ease-out infinite;
}

.viax-network__status {
    position: absolute;
    z-index: 4;
    top: 61%;
    left: 50%;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(244, 243, 247, 0.12);
    border-radius: 999px;
    background: rgba(9, 10, 23, 0.88);
    color: var(--viax-muted);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.viax-network__status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--viax-green);
    box-shadow: 0 0 12px rgba(87, 237, 76, 0.72);
}

@keyframes viax-node-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes viax-signal-pulse {
    0% { opacity: 0.8; transform: scale(0.55); }
    75%, 100% { opacity: 0; transform: scale(1.65); }
}

.viax-home-slider__controls {
    position: absolute;
    z-index: 5;
    right: max(1.25rem, calc((100vw - var(--viax-content)) / 2 + 3rem));
    bottom: 2rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.viax-home-slider__arrow,
.viax-home-slider__dots button {
    border: 1px solid var(--viax-border);
    background: rgba(12, 13, 28, 0.72);
    color: var(--viax-light);
    cursor: pointer;
}

.viax-home-slider__arrow {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.viax-home-slider__dots {
    display: flex;
    gap: 0.1rem;
}

.viax-home-slider__dots button {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
}

.viax-home-slider__dots button::before {
    width: 10px;
    height: 10px;
    border: 1px solid var(--viax-border);
    border-radius: 50%;
    background: rgba(12, 13, 28, 0.72);
    content: "";
}

.viax-home-slider__dots button[aria-current="true"] {
    width: 44px;
    border-color: transparent;
    background: transparent;
}

.viax-home-slider__dots button[aria-current="true"]::before {
    width: 28px;
    border-color: var(--viax-yellow);
    border-radius: 999px;
    background: var(--viax-yellow);
}

.viax-eyebrow {
    margin: 0 0 1.25rem;
    color: var(--viax-yellow);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.viax-hero h1 {
    max-width: 920px;
    margin: 0;
    font-size: clamp(2.65rem, 7vw, 6rem);
    line-height: 0.98;
    text-wrap: balance;
}

.viax-hero-copy {
    max-width: 760px;
    margin: 1.7rem 0 0;
    color: var(--viax-muted);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.55;
}

/* ===== Hero-Vereinheitlichung (2026-10-15) =====
   Gemeinsamer Satz fuer alle drei Video-Hero-Typen: .viax-company-hero
   (Kompetenzen/Services/Unternehmen/Kontakt, Regeln in company.css),
   .viax-partner-hero (nur die Partner-UEBERSICHT, Regeln in partner.css -
   render_index(); die Profilseiten .viax-partner-hero--profile bleiben
   unangetastet) und .viax-page-hero (Service-Cluster/-Landingpages, Regeln
   direkt unten). site.css laedt bei allen drei Seitentypen immer VOR
   company.css/partner.css (siehe deren enqueue_assets(), ['viax-site'] als
   Abhaengigkeit) - company.css/partner.css setzen fuer Groesse/Abstand
   daher bewusst KEINE eigenen Werte mehr, sondern referenzieren exakt
   dieselben --viax-hero-*-Variablen (siehe :root oben). Einzige
   Ausnahme: .viax-page-hero hat als einziger der drei eine SICHTBARE
   Eyebrow und bekommt deshalb einen eigenen, kleineren padding-top (siehe
   dort) - die H1 landet dadurch trotzdem bei allen drei Typen am selben
   Abstand von der Hero-Oberkante (Auftrag Abschnitt 2). Video/Overlay-
   Verlauf/Poster (.viax-hero-video) bleiben unveraendert (Auftrag
   Abschnitt 6). */
/* Lastenheft-Layout-Final-v1.0 (H05, 2026-10-17): die vorherige 712px-
   Mindesthoehe ist ausdruecklich ueberholt. .viax-hero-compact (vergeben an
   .viax-company-hero und die .viax-partner-hero-UEBERSICHT, siehe
   class-viax-company.php::render_hero() / class-viax-partner.php::
   render_index()) bekommt eigene, deutlich kleinere Werte - Richtwert ca.
   380px Gesamthoehe bei 1280/1440px, inhaltsgetrieben statt erzwungen.
   .viax-page-hero bleibt UNVERAENDERT beim alten --viax-hero-*-Mechanismus
   (ausserhalb des Pakt-Scopes, siehe Lastenheft Abschnitt 2 - aktuell auf
   keiner Live-Seite genutzt). */
:root {
    --viax-hero-compact-pad-top: clamp(2.25rem, 5vw, 3.25rem);
    --viax-hero-compact-pad-bottom: clamp(2.25rem, 5vw, 3.25rem);
    --viax-hero-compact-h1-size: clamp(2rem, 1.1rem + 3.3vw, 3.2rem);
    --viax-hero-compact-h1-max-width: 620px;
    --viax-hero-compact-lead-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
    --viax-hero-compact-lead-max-width: 540px;
    --viax-hero-compact-min-height: 380px;
}

.viax-hero-compact {
    display: flex;
    align-items: center;
    min-height: var(--viax-hero-compact-min-height);
    box-sizing: border-box;
    padding-block: var(--viax-hero-compact-pad-top) var(--viax-hero-compact-pad-bottom);
}

.viax-page-hero {
    display: flex;
    align-items: flex-start;
    min-height: var(--viax-hero-height);
    box-sizing: border-box;
    padding-block: var(--viax-hero-pad-top) var(--viax-hero-pad-bottom);
}

/* Flex-Items haben per Default min-width:auto und koennen deshalb nicht
   unter ihre Min-Content-Breite schrumpfen - ohne diese Regel laeuft der
   Hero-Inhalt auf sehr schmalen Viewports (<=360px) seitlich aus dem
   Hero heraus und wird von dessen overflow:hidden abgeschnitten. */
.viax-hero-compact > *,
.viax-page-hero > * {
    min-width: 0;
}

/* T01: Inter 700, line-height 1.08 (am Bestand verifiziert, siehe
   Pruefbericht) - Groessenwirkung der Referenz uebernommen, responsiv
   32px Mobile bis ca. 51px Desktop (--viax-hero-compact-h1-size). */
.viax-hero-compact h1 {
    font-size: var(--viax-hero-compact-h1-size);
    max-width: var(--viax-hero-compact-h1-max-width);
    font-weight: 700;
    line-height: 1.08;
}

.viax-page-hero h1 {
    font-size: var(--viax-hero-h1-size);
    max-width: var(--viax-hero-h1-max-width);
}

.viax-hero-compact .viax-company-hero__lead,
.viax-hero-compact .viax-partner-hero__lead {
    font-size: var(--viax-hero-compact-lead-size);
    color: var(--viax-muted);
    max-width: var(--viax-hero-compact-lead-max-width);
}

.viax-page-hero__lead {
    font-size: var(--viax-hero-lead-size);
    color: var(--viax-muted);
    max-width: var(--viax-hero-lead-max-width);
}

.viax-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* display/align-items/min-height/padding-block kommen vom gemeinsamen
       Regelblock oben; hier nur die page-hero-spezifische Korrektur: */
    /* Sichtbare Eyebrow (Themencluster-Label) - anders als bei
       .viax-company-hero (dort ausgeblendet) und der
       .viax-partner-hero-Uebersicht (dort keine Eyebrow). Eigener,
       kleinerer padding-top: die Eyebrow fuellt die Differenz zum
       gemeinsamen --viax-hero-pad-top selbst auf, damit die H1 trotzdem
       bei allen drei Hero-Typen im selben Abstand von der Hero-
       Oberkante beginnt (Hero-Vereinheitlichung, Abschnitt 2). */
    padding-top: calc(var(--viax-hero-pad-top) - var(--viax-hero-eyebrow-height));
    background:
        radial-gradient(circle at 7% 18%, rgba(87, 237, 76, 0.2), transparent 27%),
        radial-gradient(circle at 92% 15%, rgba(237, 52, 162, 0.2), transparent 28%),
        linear-gradient(145deg, #100f1f, #161637 52%, #35102f);
}

.viax-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    margin-inline: auto;
}

.viax-page-hero__grid .viax-eyebrow {
    line-height: 1;
}

.viax-page-hero h1 {
    margin: 0;
    line-height: 1;
    text-wrap: balance;
}

.viax-page-hero__lead {
    margin: 1.5rem 0 0;
}

.viax-page-hero__image {
    overflow: hidden;
    min-height: 310px;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: var(--viax-surface);
    box-shadow: var(--viax-shadow);
}

.viax-page-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
}

.viax-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.viax-button,
.viax-site .wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--viax-yellow);
    color: var(--viax-night);
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Services-Nachbesserung 2026-10-20, Teil B: Chevron-Icon fuer optionale
   zweite Hero-Aktion (viax/page-hero, render_page_hero()). "gap" oben
   wirkt sich auf bestehende Ein-Text-Buttons NICHT aus (kein zweites
   Kindelement dort), daher gefahrlos am Basis-Selektor ergaenzt. */
.viax-page-hero__cta-chevron {
    flex: none;
    width: 16px;
    height: 16px;
}

.viax-button:hover,
.viax-site .wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 237, 64, 0.18);
}

.viax-button--secondary {
    border-color: var(--viax-border);
    background: rgba(244, 243, 247, 0.06);
    color: var(--viax-light);
}

.viax-section {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.viax-section--deep {
    background: var(--viax-deep);
}

.viax-section--night {
    background: var(--viax-night);
}

.viax-section-heading {
    max-width: 850px;
    margin-bottom: 2.4rem;
}

.viax-section-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.04;
    text-wrap: balance;
}

.viax-section-heading p {
    max-width: 720px;
    margin: 1rem 0 0;
    color: var(--viax-muted);
    font-size: 1.12rem;
}

/* Lastenheft-Layout-Final-v1.0 (I01-I03, 2026-10-17): Icon-Farbzyklus-
   Utility, von Viax_Company_Block::icon_tone() an .viax-icon-Elemente
   vergeben. Icons sind Masken auf currentColor (.viax-icon{background-
   color:currentColor}), hier wird nur color gesetzt. */
.viax-tone-yellow { color: var(--viax-yellow); }
.viax-tone-green { color: var(--viax-green); }
.viax-tone-pink { color: var(--viax-pink); }
.viax-tone-paleblue { color: var(--viax-pale-blue); }

/* Lastenheft-Layout-Final-v1.0 (T01-T05, 2026-10-17): Abschnitts-
   Unterstriche fuer die fuenf kompakten Hero-Zielseiten. H1 im Hero (siehe
   .viax-hero-compact weiter unten) bleibt Gelb; H2-Hauptabschnitte und
   referenzierende H3 zyklen Gelb->Gruen->Pink->Blassblau
   (Viax_Company_Block::next_heading_tone()/$lastHeadingTone). Reiner
   Farb-/Unterstrich-Zusatz, keine Layout-/Groessenaenderung an der
   bestehenden Typografie (.viax-section-heading h2,
   .viax-company-photo-band__copy h2 bleiben unangetastet). */
.viax-accent-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 0.9rem;
    border-radius: 3px;
    background: var(--viax-yellow);
}

.viax-accent-heading--green::after { background: var(--viax-green); }
.viax-accent-heading--pink::after { background: var(--viax-pink); }
.viax-accent-heading--paleblue::after { background: var(--viax-pale-blue); }
/* Nachbesserung 2026-10-17: ersetzt die bisherige "H1-Unterstrich immer
   gelb"-Regel. Betrifft AUSSCHLIESSLICH die Hero-/Hauptueberschriftenlinie
   (siehe render_hero() in class-viax-company.php/class-viax-partner.php
   und die Blog-Hauptueberschrift) - die Abschnittsfarbreihenfolge
   (--green/--pink/--paleblue-Zyklus startend bei Gelb), Iconfarben, gelbe
   Buttons und Blog-Kategorienfarben/-ziffern sind davon NICHT betroffen. */
.viax-accent-heading--lilac::after { background: var(--viax-lilac-pale-blue); }

/* Untergeordnete Ueberschriften (H3 unter einem gefaerbten H2, z.B.
   Prozessschritte): proportional kleinere Linie, siehe T02. */
.viax-accent-heading--sub::after {
    width: 40px;
    height: 4px;
    margin-top: 0.6rem;
}

.viax-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.viax-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.09), rgba(244, 243, 247, 0.035));
    box-shadow: var(--viax-shadow);
}

.viax-card__accent {
    width: 58px;
    height: 7px;
    margin-bottom: 1.5rem;
    border-radius: 999px;
    background: var(--viax-yellow);
}

.viax-card:nth-child(2) .viax-card__accent {
    background: var(--viax-green);
}

.viax-card:nth-child(3) .viax-card__accent {
    background: var(--viax-pink);
}

.viax-card__cta {
    width: fit-content;
    min-height: 46px;
    margin-top: auto;
    padding: 0.7rem 1.3rem;
    font-weight: 600;
}

.viax-team-card {
    overflow: hidden;
    padding: 0;
}

.viax-team-card__portrait {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--viax-border);
    background: rgba(244, 243, 247, 0.04);
}

.viax-team-card__portrait::after {
    position: absolute;
    inset: auto 0 0;
    height: 32%;
    background: linear-gradient(180deg, transparent, rgba(14, 13, 31, 0.42));
    content: "";
    pointer-events: none;
}

.viax-team-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    transition: transform 300ms ease;
}

.viax-team-card:hover .viax-team-card__portrait img {
    transform: scale(1.025);
}

.viax-team-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.viax-team-card__body > p:not(.viax-team-card__note) {
    color: var(--viax-muted);
    font-weight: 650;
}

.viax-team-card__note {
    margin: auto 0 0 !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--viax-border);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.viax-reference-showcase .viax-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.viax-reference-showcase__copy .viax-prose {
    margin: 1.6rem 0 2rem;
}

.viax-reference-showcase__copy .viax-button {
    display: inline-flex;
}

.viax-reference-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: end;
    padding: clamp(0.5rem, 1.5vw, 1rem);
    background:
        radial-gradient(circle at 18% 12%, rgba(70, 238, 95, 0.12), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(239, 46, 158, 0.13), transparent 38%),
        transparent;
}

.viax-reference-gallery figure {
    margin: 0;
    text-align: center;
}

.viax-reference-gallery img {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.42));
}

.viax-reference-gallery figcaption {
    margin-top: 0.8rem;
    color: var(--viax-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.viax-approach .viax-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.viax-approach__media {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--viax-border);
    border-radius: calc(var(--viax-radius) * 1.2);
    background: var(--viax-surface);
    box-shadow: var(--viax-shadow);
}

.viax-approach__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.viax-approach__media .viax-ai-image-notice {
    margin: 0;
    padding: 0.65rem 1rem;
    background: rgba(16, 15, 31, 0.92);
}

.viax-approach__content,
.viax-approach__content .viax-prose {
    min-width: 0;
    max-width: none;
}

.viax-origin-story {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(125deg, rgba(70, 238, 95, 0.045), transparent 34%),
        linear-gradient(305deg, rgba(239, 46, 158, 0.055), transparent 38%);
}

.viax-origin-story::before {
    position: absolute;
    inset: 12% auto auto 50%;
    width: min(48rem, 70vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--viax-border), transparent);
    content: "";
}

.viax-origin-story .viax-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.viax-origin-story__media {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--viax-border);
    border-radius: calc(var(--viax-radius) * 1.35);
    background: rgba(244, 243, 247, 0.04);
    box-shadow: var(--viax-shadow);
}

.viax-origin-story__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(10, 9, 25, 0.38));
    content: "";
    pointer-events: none;
}

.viax-origin-story__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
}

.viax-origin-story__content {
    min-width: 0;
}

.viax-origin-story .viax-section-heading {
    max-width: 760px;
}

.viax-approach .viax-section-heading h2,
.viax-origin-story .viax-section-heading h2 {
    font-size: clamp(2rem, 3.25vw, 3rem);
    line-height: 1;
}

.viax-approach--compact .viax-approach__media img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.viax-origin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.viax-origin-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid var(--viax-border);
    border-radius: calc(var(--viax-radius) * 0.72);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.075), rgba(244, 243, 247, 0.025));
}

.viax-origin-step strong {
    display: inline-flex;
    grid-row: 1 / span 2;
    width: 2.45rem;
    height: 2.45rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--viax-yellow);
    color: var(--viax-dark);
    font-size: 0.78rem;
}

.viax-origin-step:nth-child(2) strong {
    background: var(--viax-green);
}

.viax-origin-step:nth-child(3) strong {
    background: var(--viax-pink);
}

.viax-origin-step h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.viax-origin-step p {
    margin: 0.2rem 0 0;
    color: var(--viax-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.viax-origin-story__footer {
    margin-top: 1.5rem;
}

.viax-origin-story__footer > p {
    margin: 0;
    color: var(--viax-muted);
    line-height: 1.7;
}

.viax-origin-story__actions {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.viax-origin-story--company {
    background-color: rgba(244, 243, 247, 0.02);
}

.viax-card h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    overflow-wrap: anywhere;
}

.home .viax-home-slider + .viax-section .viax-card h3,
.home .viax-home-hero + .viax-section .viax-card h3 {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    overflow-wrap: normal;
}

.viax-card__label {
    margin: 0.45rem 0 0;
    color: var(--viax-light);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.viax-card p:not(.viax-card__label) {
    margin: 1.25rem 0 1.6rem;
    color: var(--viax-muted);
}

.viax-card .viax-button {
    width: 100%;
    margin-top: auto;
}

.viax-prose {
    max-width: 760px;
    color: var(--viax-muted);
    font-size: 1.08rem;
}

.viax-prose :where(h2, h3) {
    color: var(--viax-light);
}

.viax-prose h2 {
    margin-top: 2.6rem;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.viax-prose h3 {
    margin-top: 2rem;
    font-size: 1.4rem;
}

.viax-prose :where(p, li) {
    line-height: 1.75;
}

.viax-prose a,
.viax-text-link {
    color: var(--viax-yellow);
    font-weight: 750;
}

.viax-process-grid,
.viax-benefit-grid,
.viax-blog-grid,
.viax-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.viax-process-grid {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viax-process-step {
    padding: 1.7rem;
    border-top: 3px solid var(--viax-yellow);
    border-radius: 0 0 var(--viax-radius-small) var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.055);
}

.viax-process-step strong {
    display: block;
    color: var(--viax-yellow);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.viax-process-step h3 {
    margin: 0.8rem 0 0;
}

.viax-process-step p {
    margin-bottom: 0;
    color: var(--viax-muted);
}

/* =====================================================================
   Services-Nachbesserung 2026-10-20, Teil B: wiederverwendbare Bausteine
   fuer die Service-Cluster-Landingpages (aktuell KI & Automatisierung,
   spaeter uebertragbar auf software-portale/systeme-integrationen beim
   jeweiligen Umbau). Praefix .viax-cluster-* - bewusst getrennt von
   .viax-company-* (die fuenf datengetriebenen Unternehmensseiten) und
   .viax-partner-* (Partnerseiten), da diese drei Landingpages reines
   post_content (wp:html) statt der _viax_company_data-Pipeline nutzen.
   Nur in site.css, da diese Seiten ausschliesslich site.css laden (kein
   company.css/partner.css-Enqueue fuer page-Posts).
   ===================================================================== */

/* -- Schwerpunkte-Kacheln (Anker-Navigation zu den sechs Themenabschnitten
      unten auf derselben Seite, kein Link auf eine Unterseite) -- */
.viax-cluster-topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.4rem;
}

.viax-cluster-topic {
    display: grid;
    grid-template-columns: 2.1rem 1fr 1.1rem;
    gap: 1rem;
    align-items: start;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--viax-border);
    color: inherit;
    text-decoration: none;
}

.viax-cluster-topic__icon {
    width: 2rem;
    height: 2rem;
}

.viax-cluster-topic__body strong {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--viax-light);
}

.viax-cluster-topic__body span {
    display: block;
    color: var(--viax-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Pfeilfarbe je Kachel: kein eigener Tone hier, Farbe kommt von der
   viax-tone-*-Klasse direkt am SVG (deviation #3, Auftrag 2026-10-20). */
.viax-cluster-topic__arrow {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    transition: transform 160ms ease;
}

.viax-cluster-topic:hover .viax-cluster-topic__arrow {
    transform: translateY(3px);
}

.viax-cluster-topic:focus-visible {
    outline: 3px solid var(--viax-yellow);
    outline-offset: 4px;
    border-radius: var(--viax-radius-small);
}

/* -- Architektur: drei frei stehende Bausteine + bidirektionale Pfeile,
      darunter ein durchgehender Governance-Balken. Bewusst KEIN
      umschliessender Aussencontainer (Auftrag Content-Referenz Abschnitt
      9). Pfeile bleiben neutral hell (Abschnitt 8: "weiss oder sehr
      hellgrau"), NICHT toned - anders als die Schwerpunkt-Pfeile oben. -- */
.viax-cluster-arch__row {
    display: grid;
    grid-template-columns: 1fr 2.4rem 1fr 2.4rem 1fr;
    gap: 1rem;
    align-items: center;
}

.viax-cluster-arch__node {
    padding: 1.7rem 1.5rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.04);
}

.viax-cluster-arch__node .viax-icon {
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 1rem;
}

.viax-cluster-arch__node h3 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
}

.viax-cluster-arch__node p {
    margin: 0;
    color: var(--viax-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.viax-cluster-arch__connector {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    color: var(--viax-light);
}

.viax-cluster-arch__connector svg {
    width: 20px;
    height: 20px;
}

.viax-cluster-arch__band {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.8rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--viax-border);
    border-bottom: 1px solid var(--viax-border);
}

.viax-cluster-arch__band .viax-icon {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
}

.viax-cluster-arch__band strong {
    display: block;
    white-space: nowrap;
    color: var(--viax-light);
}

.viax-cluster-arch__band p {
    margin: 0;
    color: var(--viax-muted);
    font-size: 0.88rem;
}

/* -- Sechs ausfuehrliche, nummerierte Themenabschnitte (editorial, nicht
      als sechs gleichfoermige Cards - Auftrag Content-Referenz Abschnitt
      18). Jeder Abschnitt ist zugleich eigenes Scrollziel der
      Schwerpunkt-Kacheln oben - scroll-margin-top exakt wie
      #viax-home-hero-cta auf der Startseite (Nachbesserung 2026-10-20,
      Abschnitt 2), hier als wiederverwendbare Klasse statt Einzel-ID. -- */
.viax-cluster-detail {
    scroll-margin-top: calc(var(--viax-header-height) + 28px);
    border-top: 1px solid var(--viax-border);
}

body.admin-bar .viax-cluster-detail {
    scroll-margin-top: calc(var(--viax-header-height) + 28px + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .viax-cluster-detail {
        scroll-margin-top: calc(var(--viax-header-height) + 28px + 46px);
    }
}

.viax-cluster-detail__head {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-bottom: 2rem;
}

.viax-cluster-detail__number {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.05rem;
    font-weight: 800;
}

.viax-cluster-detail__head h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.viax-cluster-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
}

.viax-cluster-detail--reverse .viax-cluster-detail__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
}

.viax-cluster-detail--reverse .viax-cluster-detail__body {
    order: 2;
}

.viax-cluster-detail--reverse .viax-cluster-flow {
    order: 1;
}

/* -- Flow-Diagramm (das "Visual" je Themenabschnitt) - gemeinsame
      Bausteine (Knoten/Pfeil/Chips/Metrik-Raster/Balken/Ebenen), aus denen
      sich alle sechs unterschiedlichen Diagrammformen zusammensetzen. -- */
.viax-cluster-flow__label {
    margin: 0 0 1.3rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--viax-muted);
}

.viax-cluster-flow__node {
    padding: 1rem 1.3rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.04);
    text-align: center;
}

.viax-cluster-flow__node--green,
.viax-cluster-flow__node--yellow,
.viax-cluster-flow__node--pink {
    border-left: 3px solid var(--viax-tone, var(--viax-light));
}

.viax-cluster-flow__node--green { --viax-tone: var(--viax-green); }
.viax-cluster-flow__node--yellow { --viax-tone: var(--viax-yellow); }
.viax-cluster-flow__node--pink { --viax-tone: var(--viax-pink); }

.viax-cluster-flow__node strong {
    display: block;
    font-size: 0.95rem;
}

.viax-cluster-flow__node span {
    display: block;
    margin-top: 0.4rem;
    color: var(--viax-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.viax-cluster-flow__connector {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0;
    color: var(--viax-light);
}

.viax-cluster-flow__connector svg {
    width: 18px;
    height: 18px;
}

/* Vertikale bidirektionale Pfeile (⇅ im Rendering, z.B. KI in CRM, ERP &
   ITSM) - zwei gegenlaeufige Chevrons untereinander statt nebeneinander. */
.viax-cluster-flow__connector--bidi {
    flex-direction: column;
    gap: 0.1rem;
}

.viax-cluster-flow__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.viax-cluster-flow__chips span {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--viax-border);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--viax-light);
}

.viax-cluster-flow__small-band {
    margin-top: 1.4rem;
    padding: 1rem 0;
    border-top: 1px solid var(--viax-border);
    border-bottom: 1px solid var(--viax-border);
    text-align: center;
    color: var(--viax-muted);
    font-size: 0.82rem;
    line-height: 1.7;
}

.viax-cluster-flow__metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.viax-cluster-flow__metric-grid div {
    padding: 0.8rem 0.5rem 1rem;
    border-bottom: 1px solid var(--viax-border);
}

.viax-cluster-flow__metric-grid span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    color: var(--viax-pink);
}

.viax-cluster-flow__metric-grid b {
    font-size: 0.82rem;
    color: var(--viax-light);
}

.viax-cluster-flow__planes {
    display: grid;
    gap: 0.8rem;
}

.viax-cluster-flow__base {
    margin-top: 1.3rem;
    padding: 1.5rem 1.2rem;
    border-top: 3px solid var(--viax-yellow);
    border-radius: 0 0 var(--viax-radius-small) var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.04);
    text-align: center;
}

.viax-cluster-flow__base .viax-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 auto 0.8rem;
}

.viax-cluster-flow__base strong {
    display: block;
    font-size: 1rem;
    color: var(--viax-light);
}

.viax-cluster-flow__base p {
    margin: 0.7rem 0 0;
    color: var(--viax-muted);
    font-size: 0.8rem;
    line-height: 1.9;
}

@media (max-width: 900px) {
    .viax-cluster-topics {
        grid-template-columns: 1fr;
    }

    .viax-cluster-arch__row {
        grid-template-columns: 1fr;
    }

    .viax-cluster-arch__connector {
        transform: rotate(90deg);
        padding: 0.3rem 0;
    }

    .viax-cluster-detail__grid,
    .viax-cluster-detail--reverse .viax-cluster-detail__grid {
        grid-template-columns: 1fr;
    }

    .viax-cluster-detail--reverse .viax-cluster-detail__body,
    .viax-cluster-detail--reverse .viax-cluster-flow {
        order: 0;
    }

    .viax-cluster-flow {
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .viax-cluster-detail__number {
        width: 42px;
        height: 42px;
        font-size: 0.85rem;
    }
}

/* =====================================================================
   Gemeinsamer-Foto-Hero-Auftrag (20.10.2026): vollflaechiger Foto-Hero,
   NUR fuer Seiten mit viax/page-hero-Attribut variant=>"photo" (aktuell
   KI & Automatisierung, Software & Portale, Systeme & Integrationen,
   je DE). Compound-Selektor .viax-page-hero.viax-page-hero--photo
   (Spezifitaet 0,2,0) ueberschreibt die Basisregeln von .viax-page-hero
   zuverlaessig unabhaengig von der Regel-Reihenfolge, ohne diese selbst
   zu aendern - die neun anderen Seiten mit diesem Block (Blog, Jobs,
   Freelancing je DE/EN, sowie die EN-Varianten dieser drei Seiten)
   bleiben dadurch unberuehrt. Struktur/Verlauf uebernommen vom
   bestehenden vollbreiten .viax-case-hero (case-study.css) als
   strukturelle Referenz (Auftrag Abschnitt 3). ===================== */
.viax-page-hero.viax-page-hero--photo {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 42vw, 620px);
    padding-block: 0;
    overflow: hidden;
    background: var(--viax-night);
}

.viax-page-hero--photo .viax-page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.viax-page-hero--photo .viax-page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 70% 38%);
}

.viax-page-hero--photo .viax-page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(16, 15, 31, .94) 0%, rgba(16, 15, 31, .78) 34%, rgba(16, 15, 31, .18) 68%, rgba(16, 15, 31, 0) 100%),
        linear-gradient(0deg, var(--viax-night) 0%, rgba(16, 15, 31, 0) 26%);
}

.viax-page-hero--photo .viax-page-hero__inner {
    position: relative;
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    margin-inline: auto;
    padding: clamp(5rem, 11vw, 8rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.viax-page-hero--photo .viax-eyebrow {
    margin: 0 0 1.4rem;
}

.viax-page-hero--photo h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(2.25rem, 1.1rem + 3.9vw, 4rem);
    line-height: 1.08;
    text-wrap: balance;
    /* Nachbesserung 20.10.2026, Abschnitt 4: verhindert automatische
       Worttrennung ("Praesentatio-nen") - identisches Muster wie
       .viax-partner-hero h1 (partner.css), dort fuer denselben Zweck
       bereits freigegeben. overflow-wrap:anywhere bleibt (von der
       globalen h1/h2/h3-Regel geerbt) als letzte Reserve bei extrem
       schmalen Viewports, bricht aber nur zwischen Woertern, nicht
       automatisch per Trennstrich. */
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* Satzgruppen bleiben ab 900px als Ganzes zusammen (kein <br>, der
   Browser waehlt den Umbruch zwischen den Gruppen selbst - Auftrag
   Abschnitt 4: "kein unbedingtes white-space:nowrap ueber alle
   Breakpoints"). Unter 900px normales Umbrechen an Wortgrenzen. */
.viax-page-hero--photo h1 .viax-page-hero__h1-group {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .viax-page-hero--photo h1 .viax-page-hero__h1-group {
        white-space: normal;
    }
}

.viax-page-hero--photo .viax-page-hero__lead {
    max-width: 640px;
    margin: 1.4rem 0 0;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
    color: var(--viax-muted);
}

.viax-page-hero--photo .viax-actions {
    margin-top: 2rem;
}

/* Tablet/Mobil: Bild wird regulaer eingebunden statt absolut positioniert
   (identische Technik wie .viax-case-hero) - Hero-Hoehe folgt dann dem
   Inhalt statt einer festen Mindesthoehe mit abgeschnittenem Bildfoukus
   (Auftrag Abschnitt 3: "keine starre Hoehe mit abgeschnittenem Inhalt"). */
@media (max-width: 900px) {
    .viax-page-hero.viax-page-hero--photo {
        display: block;
        min-height: 0;
    }

    .viax-page-hero--photo .viax-page-hero__media {
        position: relative;
        z-index: 0;
        aspect-ratio: 16 / 10;
    }

    .viax-page-hero--photo .viax-page-hero__media::after {
        background: linear-gradient(0deg, rgba(16, 15, 31, .9) 0%, rgba(16, 15, 31, .15) 55%, rgba(16, 15, 31, 0) 100%);
    }

    .viax-page-hero--photo .viax-page-hero__inner {
        margin-top: 1.2rem;
        padding: 0 0 2.2rem;
    }
}

@media (max-width: 600px) {
    .viax-page-hero--photo .viax-page-hero__media {
        aspect-ratio: 4 / 5;
    }

    .viax-page-hero--photo .viax-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .viax-page-hero--photo .viax-actions .viax-button {
        width: 100%;
    }
}

/* =====================================================================
   Gemeinsamer-Foto-Hero-Auftrag (20.10.2026): zusaetzliche .viax-cluster-*
   Bausteine fuer die abwechslungsreichen Detailbereiche von Software &
   Portale / Systeme & Integrationen (Rollenmodell, Entscheidungsbaum,
   Vertragsmatrix, Systemlandkarte, Mapping-Tabelle, Ereignisdiagramm,
   Betriebsebenen, Vorher/Nachher-Vergleich, Kreislauf) - ergaenzt die in
   Teil B angelegten .viax-cluster-detail/-flow-Bausteine, siehe dort fuer
   die Basisregeln. ===================================================== */

/* Reine Textabschnitte ohne zweite Spalte (Auftrag Abschnitt 6: "Reine
   Textabschnitte ohne leere zweite Spalte"). */
.viax-cluster-detail--text-only .viax-cluster-detail__grid {
    display: block;
    max-width: 820px;
    margin-inline: auto;
}

/* Nachbesserung 2026-10-20 (Tabelle-entfernen-Auftrag): .viax-prose (hier
   die Textspalte) traegt bereits ein eigenes max-width:760px OHNE eigene
   Zentrierung (site.css, gemeinsam mit vielen anderen Verwendungen -
   bewusst nicht dort geaendert). Dadurch sass der Text bisher linksbuendig
   in der 820px breiten Grid-Box (60px Luecke nur rechts, "Schlagseite").
   Eigene Zentrierung hier behebt das fuer alle --text-only-Abschnitte. */
.viax-cluster-detail--text-only .viax-cluster-detail__body {
    margin-inline: auto;
}

/* Breite Vergleiche/Tabellen unter dem Text statt daneben (Auftrag:
   "Breite Tabellen und Vergleiche unterhalb des zugehoerigen Textes"). */
.viax-cluster-detail--wide .viax-cluster-detail__grid {
    display: block;
}

.viax-cluster-detail--wide .viax-cluster-detail__body {
    max-width: 820px;
    margin-inline: auto;
}

.viax-cluster-detail--wide .viax-cluster-flow {
    max-width: none;
    width: 100%;
    margin-top: 3rem;
}

/* In geteilten (nicht text-only/wide) Layouts bleibt die Textspalte
   breiter als die Visual-Spalte (Auftrag Abschnitt 6). */
.viax-cluster-detail__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr);
}

.viax-cluster-detail--reverse .viax-cluster-detail__grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr);
}

/* -- Rollenmodell (z.B. Kunden-/Partnerportale): zwei Rollen nebeneinander,
      verzweigen in ein gemeinsames Portal, darunter interne Zeile. -- */
.viax-cluster-flow__roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.viax-cluster-flow__role {
    padding: 1rem 0;
    border-top: 2px solid var(--viax-tone, var(--viax-light));
}

.viax-cluster-flow__role--green { --viax-tone: var(--viax-green); }
.viax-cluster-flow__role--yellow { --viax-tone: var(--viax-yellow); }
.viax-cluster-flow__role--pink { --viax-tone: var(--viax-pink); }

.viax-cluster-flow__role strong {
    display: block;
    font-size: 1rem;
}

.viax-cluster-flow__role p {
    margin: 0.5rem 0 0;
    color: var(--viax-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.viax-cluster-flow__hub {
    padding: 1.4rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    text-align: center;
}

.viax-cluster-flow__hub strong {
    display: block;
    font-size: 1.15rem;
    color: var(--viax-pink);
}

.viax-cluster-flow__hub span {
    display: block;
    margin-top: 0.4rem;
    color: var(--viax-muted);
    font-size: 0.8rem;
}

.viax-cluster-flow__shared-line {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--viax-border);
    text-align: center;
    color: var(--viax-muted);
    font-size: 0.8rem;
}

/* Verzweigungs-Konnektor (ersetzt Text-Pfeile wie "↙ ↘"): zwei
   gegenlaeufig gedrehte Chevrons derselben Hausform statt Zeichen. */
.viax-cluster-flow__split {
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    padding: 0.4rem 0;
    color: var(--viax-light);
}

.viax-cluster-flow__split svg {
    width: 16px;
    height: 16px;
}

.viax-cluster-flow__split svg:first-child {
    transform: rotate(-35deg);
}

.viax-cluster-flow__split svg:last-child {
    transform: rotate(35deg);
}

.viax-cluster-flow__branch-label {
    margin: 0 0 0.6rem;
    text-align: center;
    color: var(--viax-muted);
    font-size: 0.76rem;
}

.viax-cluster-flow__branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* -- Matrix/Mapping-Tabellen (APIs & Schnittstellen, Datenfluesse) -- */
.viax-cluster-flow__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}

.viax-cluster-flow__table th,
.viax-cluster-flow__table td {
    padding: 0.9rem 0.7rem;
    border-bottom: 1px solid var(--viax-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.viax-cluster-flow__table th {
    background: rgba(34, 34, 61, .35);
    color: var(--viax-light);
    font-weight: 650;
}

.viax-cluster-flow__table th:first-child {
    color: var(--viax-tone, var(--viax-pink));
}

.viax-cluster-flow__table td {
    color: var(--viax-muted);
}

/* -- Vorher-/Zielbild-Vergleich (Architektur & Modernisierung) -- */
.viax-cluster-flow__change {
    display: grid;
    grid-template-columns: 1fr 2.6rem 1fr;
    gap: 1.4rem;
    align-items: center;
}

.viax-cluster-flow__change-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.viax-cluster-flow__change-list {
    display: grid;
    gap: 0.7rem;
}

.viax-cluster-flow__change-item {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--viax-border);
    border-radius: 10px;
    font-size: 0.88rem;
}

.viax-cluster-flow__change-item span {
    display: block;
    margin-top: 0.35rem;
    color: var(--viax-muted);
    font-size: 0.78rem;
}

.viax-cluster-flow__change-item--retained { border-left: 3px solid var(--viax-green); }
.viax-cluster-flow__change-item--new { border-left: 3px solid var(--viax-pink); }

.viax-cluster-flow__change-arrow {
    display: flex;
    justify-content: center;
    color: var(--viax-light);
}

.viax-cluster-flow__change-arrow svg {
    width: 20px;
    height: 20px;
}

/* -- Kreislauf (Qualitaet, Betrieb & Weiterentwicklung): echtes,
      beschriftetes SVG mit role/aria-label statt Rendering-Screenshot. -- */
.viax-cluster-flow__cycle {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
}

.viax-cluster-flow__cycle svg {
    width: 100%;
    height: auto;
}

.viax-cluster-flow__cycle text {
    font-family: inherit;
    fill: var(--viax-light);
    font-size: 15px;
}

.viax-cluster-flow__cycle .viax-cluster-flow__cycle-sub {
    fill: var(--viax-muted);
    font-size: 11px;
}

@media (max-width: 900px) {
    .viax-cluster-flow__roles,
    .viax-cluster-flow__branches {
        grid-template-columns: 1fr;
    }

    .viax-cluster-flow__change {
        grid-template-columns: 1fr;
    }

    .viax-cluster-flow__change-arrow {
        transform: rotate(90deg);
    }
}

.viax-faq {
    display: grid;
    gap: 0.8rem;
}

.viax-faq details {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.045);
}

.viax-faq summary {
    cursor: pointer;
    color: var(--viax-light);
    font-weight: 750;
}

.viax-faq details p {
    margin-bottom: 0;
    color: var(--viax-muted);
}

.viax-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: start;
}

.viax-feature-list {
    display: grid;
    gap: 0.85rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.viax-feature-list li {
    position: relative;
    padding-left: 1.65rem;
    color: var(--viax-muted);
}

.viax-feature-list li::before {
    position: absolute;
    top: 0.56em;
    left: 0;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: var(--viax-yellow);
    content: "";
}

.viax-stat-panel {
    padding: 2rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background:
        radial-gradient(circle at 20% 15%, rgba(87, 237, 76, 0.18), transparent 35%),
        radial-gradient(circle at 80% 85%, rgba(237, 52, 162, 0.2), transparent 38%),
        var(--viax-surface);
}

.viax-stat-panel__logo {
    display: block;
    width: min(100%, 16rem);
    height: auto;
}

.viax-stat-panel span {
    display: block;
    margin-top: 0.65rem;
    color: var(--viax-muted);
}

.viax-cta {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    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);
    text-align: center;
}

.viax-cta h2 {
    max-width: 860px;
    margin: 0 auto;
    font-size: clamp(2rem, 4vw, 3.8rem);
    text-wrap: balance;
}

.viax-cta p {
    max-width: 680px;
    margin: 1rem auto 0;
    color: var(--viax-muted);
}

.viax-cta .viax-actions {
    justify-content: center;
}

.viax-site-footer {
    padding-block: 2.5rem;
    border-top: 1px solid var(--viax-border);
    color: var(--viax-muted);
}

.viax-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    margin-inline: auto;
}

.viax-site-footer a {
    color: var(--viax-light);
}

.viax-site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.viax-site-footer p {
    margin: 0.4rem 0 0;
}

.viax-footer-group {
    color: var(--viax-yellow);
    font-size: 0.88rem;
    font-weight: 750;
    text-transform: uppercase;
}

.viax-blog-card {
    overflow: hidden;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.08), rgba(244, 243, 247, 0.035));
}

.viax-blog-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--viax-surface);
}

.viax-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.viax-blog-card:hover .viax-blog-card__image img {
    transform: scale(1.025);
}

.viax-blog-card__body {
    padding: 1.5rem;
}

.viax-blog-card h2 {
    margin: 0.4rem 0 0;
    font-size: 1.45rem;
}

.viax-blog-card h2 a {
    color: var(--viax-light);
    text-decoration: none;
}

.viax-blog-card__body > p:not(.viax-eyebrow) {
    color: var(--viax-muted);
}

.viax-blog-overview {
    display: grid;
    width: min(100%, var(--viax-content));
    max-width: var(--viax-content) !important;
    gap: clamp(3rem, 7vw, 6rem);
    margin-inline: auto;
}

.viax-blog-topic-nav,
.viax-service-jump-nav,
.viax-service-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.viax-blog-topic-link {
    display: grid;
    min-height: 180px;
    padding: 1.5rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.08), rgba(244, 243, 247, 0.025));
    color: var(--viax-light);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease;
}

.viax-blog-topic-link:hover,
.viax-service-link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 237, 64, 0.55);
}

.viax-blog-topic-link span,
.viax-service-cluster__number {
    color: var(--viax-yellow);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.viax-blog-topic-link strong {
    align-self: end;
    font-size: 1.25rem;
}

.viax-blog-topic-link small {
    margin-top: 0.35rem;
    color: var(--viax-muted);
}

.viax-blog-search {
    display: grid;
    gap: 0.7rem;
    max-width: 760px;
    padding: 1.35rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.04);
}

.viax-blog-search label {
    font-weight: 800;
}

.viax-blog-search > div {
    display: flex;
    gap: 0.75rem;
}

.viax-blog-search input {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
    background: var(--viax-night);
    color: var(--viax-light);
}

/* Use-Case-Filter-Auftrag (2026-10-14): Themen-/Branchenfilter auf
   /blog/use-cases/ und /en/blog/case-studies/, ersetzt die bisherige
   Partner-Filterleiste (.viax-blog-topic-nav/-link bleiben fuer Service-
   Seiten erhalten, siehe dortiger Kommentar). Native <select> bewusst nur
   dezent gestylt (kein Custom-Dropdown): volle Tastaturbedienung und
   Screenreader-Unterstuetzung ohne Zusatzaufwand. */
.viax-usecase-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    max-width: 920px;
    padding: 1.35rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: rgba(244, 243, 247, 0.04);
}

.viax-usecase-filters__field {
    display: grid;
    gap: 0.4rem;
    flex: 1 1 240px;
    min-width: 0;
}

.viax-usecase-filters__field label {
    font-weight: 800;
    font-size: 0.9rem;
}

.viax-usecase-filters select {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
    background: var(--viax-night);
    color: var(--viax-light);
    font: inherit;
}

.viax-usecase-filters select:focus-visible,
.viax-usecase-filters__reset:focus-visible {
    outline: 2px solid var(--viax-yellow);
    outline-offset: 2px;
}

.viax-usecase-filters__submit {
    flex: none;
}

.viax-usecase-filters__reset {
    flex: none;
    align-self: center;
}

.viax-usecase-count {
    margin: 1.4rem 0 0.6rem;
    font-weight: 800;
    color: var(--viax-muted);
}

.viax-usecase-empty {
    color: var(--viax-muted);
}

.viax-usecase-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
}

.viax-usecase-tag {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--viax-muted);
}

.viax-usecase-card__partner {
    margin: 0.4rem 0 0.9rem;
    font-size: 0.85rem;
    color: var(--viax-muted);
}

/* Progressive Enhancement (site.js [data-viax-case-filter]): das no-JS-Form
   bleibt voll funktionsfaehig, das JS blendet nur den Submit-Button aus, da
   die Auswahl dann per change-Event automatisch abgeschickt wird. */
.viax-usecase-filters[data-viax-js-enhanced] .viax-usecase-filters__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.viax-blog-topic {
    scroll-margin-top: 120px;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--viax-border);
}

.viax-blog-topic__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.viax-blog-topic__heading > div,
.viax-service-cluster__heading {
    max-width: 820px;
}

.viax-blog-topic__heading h2,
.viax-service-cluster__heading h2 {
    margin: 0.45rem 0 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.viax-blog-topic__heading p:not(.viax-eyebrow),
.viax-service-cluster__heading p {
    color: var(--viax-muted);
}

/* ===== Drei-Optimierungen-Auftrag B2/B5 (2026-10-13): Blog-Startseite,
   5-Kachel-Raster + farbige Nummern-/Unterstrich-Optik wie bei den
   Partner-Use-Cases (.viax-case-chapter, dort nur auf Case-Study-Seiten
   geladen - hier eigenstaendig fuer site.css nachgebaut, gleiches Prinzip
   wie an anderer Stelle dieser Datei bereits fuer die CTA-Karte). Eigene
   neue Klassen (.viax-blog-tiles*), um die bestehenden, auch von
   Service-Seiten mitgenutzten .viax-blog-topic-nav/-link-Regeln
   unberuehrt zu lassen. ===== */
.viax-blog-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.viax-blog-tile,
.viax-blog-tile-search {
    display: flex;
    flex-direction: column;
    min-height: 196px;
    padding: 1.5rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.08), rgba(244, 243, 247, 0.025));
    color: var(--viax-light);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease;
}

.viax-blog-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 237, 64, 0.55);
}

.viax-blog-tile--search {
    grid-column: span 2;
}

.viax-blog-tile__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 1rem;
    border: 2px solid var(--tone, var(--viax-yellow));
    border-radius: 50%;
    color: var(--tone, var(--viax-yellow));
    font-size: 0.95rem;
    font-weight: 700;
}

.viax-blog-tile--1 {
    --tone: var(--viax-yellow);
}

.viax-blog-tile--2 {
    --tone: var(--viax-green);
}

.viax-blog-tile--3 {
    --tone: var(--viax-pink);
}

.viax-blog-tile--4 {
    --tone: #aeb4f2;
}

.viax-blog-tile__title {
    position: relative;
    margin: 0 0 0.9rem;
    padding-bottom: 0.7rem;
    font-size: 1.25rem;
}

.viax-blog-tile__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--tone, var(--viax-yellow));
}

.viax-blog-tile__count {
    margin-top: auto;
    color: var(--viax-muted);
    font-size: 0.85rem;
}

.viax-blog-tile-search {
    gap: 0.7rem;
    justify-content: center;
}

.viax-blog-tile-search label {
    font-weight: 800;
}

.viax-blog-tile-search > div {
    display: flex;
    gap: 0.75rem;
}

.viax-blog-tile-search input {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--viax-border);
    border-radius: 999px;
    background: var(--viax-night);
    color: var(--viax-light);
}

/* Nummern-/Unterstrich-Optik fuer die Abschnittsueberschriften (01/02/03),
   ersetzt die bisherige gelbe Eyebrow "01 · Themenbereich". */
.viax-blog-topic-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.3rem;
}

.viax-blog-topic-head::after {
    content: "";
    position: absolute;
    left: calc(2.75rem + 1rem);
    bottom: 0;
    width: 50px;
    height: 5px;
    border-radius: 999px;
    background: var(--tone, var(--viax-yellow));
}

/* Nachbesserung 2026-10-17 (ersetzt B1/Drei-Optimierungen-Auftrag
   2026-10-13): Blog-Intro-H1 nutzt jetzt denselben Unterstrich-Mechanismus
   wie die Hero-H1 der anderen Hauptseiten (.viax-accent-heading, siehe
   dort) statt einer eigenen, isolierten Regel - Farbe jetzt Lilablassblau
   (T03-Aenderung), Linienmass/-stil bereits identisch uebernommen. Die
   fruehere .viax-blog-hero-heading-Regel ist damit ueberfluessig und
   entfernt. */
.viax-blog-intro-heading {
    /* Typografie an die kompakten Hero-H1 angeglichen (gleiche Variablen,
       siehe .viax-hero-compact h1) - "vorhandene gemeinsame Typografie
       verwenden, statt eine neue isolierte Groesse einzufuehren". */
    font-size: var(--viax-hero-compact-h1-size);
    font-weight: 700;
    line-height: 1.08;
    max-width: none;
    margin: 0 0 0.3rem;
}

/* Vorheriger max-width:720px aus .viax-section-heading p (site.css, globale
   Regel fuer alle anderen Abschnittsueberschriften) war hier die Ursache
   der zu schmalen Einleitung - NUR fuer den Blog-Intro-Absatz aufgehoben,
   damit er wie gefordert die Breite des Kategorienrasters darunter nutzt
   (beide nutzen dieselbe alignwide/--viax-content-Breite). */
.viax-blog-intro p {
    max-width: none;
}

.viax-blog-topic-head__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--tone, var(--viax-yellow));
    border-radius: 50%;
    color: var(--tone, var(--viax-yellow));
    font-size: 1.05rem;
    font-weight: 700;
}

.viax-blog-topic-head h2 {
    margin: 0;
}

.viax-blog-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    background: var(--viax-yellow);
    color: var(--viax-night);
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.viax-blog-button-link:hover {
    color: var(--viax-night);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 237, 64, 0.18);
}

.viax-blog-card h3 {
    margin: 0.4rem 0 0;
    font-size: 1.45rem;
}

.viax-blog-card h3 a {
    color: var(--viax-light);
    text-decoration: none;
}

.viax-service-jump-nav a {
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: rgba(244, 243, 247, 0.045);
    color: var(--viax-light);
    font-weight: 800;
    text-decoration: none;
}

.viax-service-jump-nav a:hover {
    border-color: rgba(255, 237, 64, 0.55);
}

.viax-service-cluster {
    scroll-margin-top: 120px;
}

.viax-service-cluster + .viax-service-cluster {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--viax-border);
}

.viax-service-cluster__heading {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.62fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    margin-bottom: 2rem;
}

.viax-service-cluster__copy {
    max-width: 820px;
}

.viax-service-cluster__visual {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background:
        radial-gradient(circle at 15% 20%, rgba(87, 237, 76, 0.14), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(237, 52, 162, 0.16), transparent 38%),
        rgba(244, 243, 247, 0.045);
    box-shadow: var(--viax-shadow);
}

.viax-service-cluster__visual span,
.viax-service-cluster__visual i {
    position: absolute;
    display: block;
}

.viax-service-cluster__visual span {
    z-index: 2;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(244, 243, 247, 0.22);
    border-radius: 20px;
    background: rgba(20, 19, 42, 0.84);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
}

.viax-service-cluster__visual span:nth-child(1) { top: 28px; left: 30px; border-color: rgba(87, 237, 76, 0.6); }
.viax-service-cluster__visual span:nth-child(2) { top: 78px; left: calc(50% - 33px); border-color: rgba(255, 237, 64, 0.65); }
.viax-service-cluster__visual span:nth-child(3) { right: 30px; bottom: 28px; border-color: rgba(237, 52, 162, 0.62); }

.viax-service-cluster__visual i {
    z-index: 1;
    top: 50%;
    left: 17%;
    width: 66%;
    height: 1px;
    background: linear-gradient(90deg, var(--viax-green), var(--viax-yellow), var(--viax-pink));
    transform: rotate(15deg);
    transform-origin: center;
}

.viax-service-cluster__visual--portals span {
    border-radius: 14px 14px 24px 14px;
}

.viax-service-cluster__visual--ai span {
    border-radius: 50%;
}

.viax-service-cluster__visual--ai i {
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--viax-green) 0 12px, transparent 12px 20px, var(--viax-yellow) 20px 32px, transparent 32px 40px, var(--viax-pink) 40px 52px, transparent 52px 60px);
}

.viax-service-cluster__visual--integrations span:nth-child(1) { border-radius: 50%; }
.viax-service-cluster__visual--integrations span:nth-child(2) { border-radius: 18px; transform: rotate(45deg); }
.viax-service-cluster__visual--integrations span:nth-child(3) { border-radius: 50%; }

.viax-service-link-card {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: linear-gradient(145deg, rgba(244, 243, 247, 0.08), rgba(244, 243, 247, 0.025));
    color: var(--viax-light);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease;
}

.viax-service-link-card strong {
    font-size: 1.2rem;
    line-height: 1.25;
}

.viax-service-link-card p {
    color: var(--viax-muted);
}

.viax-service-link-card span:last-child {
    margin-top: auto;
    color: var(--viax-yellow);
    font-weight: 800;
}

.viax-article {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.viax-article-header,
.viax-article-content {
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), 820px);
    margin-inline: auto;
}

.viax-article-header h1 {
    margin: 0.7rem 0 1rem;
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    line-height: 1.03;
}

.viax-article-content {
    color: var(--viax-muted);
    font-size: 1.08rem;
    line-height: 1.78;
}

.viax-article-content :where(h2, h3) {
    color: var(--viax-light);
}

.viax-article-content h2 {
    margin-top: 3rem;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.viax-article-content h3 {
    margin-top: 2rem;
}

.viax-article .wp-block-post-featured-image {
    overflow: hidden;
    margin-block: 2rem 3rem;
    border-radius: var(--viax-radius);
}

.viax-ai-image-notice {
  display: block;
  margin-top: 0.55rem;
  color: var(--wp--preset--color--muted, #a8a6b8);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.viax-blog-card__image .viax-ai-image-notice {
  padding: 0 1rem 0.8rem;
}

.viax-contact-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: var(--viax-surface);
}

.viax-contact-card a {
    overflow-wrap: anywhere;
}

/* Drei-Optimierungen-Auftrag A3 (2026-10-13): gleiche Breite/Ausrichtung
   wie die direkt darueberliegende Kontakt-Box (.viax-partner-cta in
   .viax-shell, siehe render_contact_cta()) statt voller Bildschirmbreite
   - dieselbe width-Formel wie .viax-shell. Der bisherige obere
   Aussenabstand (3rem) entfaellt: die Kontakt-Box bringt durch ihre
   eigene .viax-section-Umrandung bereits clamp(4rem,8vw,7rem) Abstand
   nach unten mit: ein zusaetzlicher Abstand hier haette zu dem von
   Daniel gemeldeten grossen Leerraum zwischen beiden Boxen gefuehrt.
   Eckenradius/Hintergrund/Rahmen unveraendert (nur Breite/Ausrichtung/
   Abstand betroffen, keine Farbaenderung). */
.viax-author-box {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    width: min(calc(100% - var(--viax-gutter) - var(--viax-gutter)), var(--viax-content));
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius-small);
    background: var(--viax-surface);
}

/* Drei-Optimierungen-Auftrag A3 (2026-10-13), Fortsetzung: die Kontakt-Box
   sitzt in .viax-section.viax-section--night, die bereits selbst
   padding-block:clamp(4rem,8vw,7rem) mitbringt (gleicher Wert wie
   .viax-article oben/unten). .viax-partner-ctawrap addierte DAVOR und
   DANACH nochmal eigene clamp(1.5rem..3rem)/clamp(3rem..5rem) - das war
   der von Daniel gemeldete grosse Leerraum (doppelt gezaehlter Abstand,
   zusaetzlich zur jetzt entfernten Autorbox-Top-margin). Nur innerhalb
   des Blog-Artikels (.viax-article, gilt auch fuer den kuenftigen Blog-
   Layout-Piloten, der dieselbe Klasse trägt) auf 0 gesetzt, damit allein
   .viax-section's eigener Abstand zaehlt - .viax-partner-ctawrap bleibt
   auf Kontaktseite/Partnerseiten/Case-Studies unveraendert. Ergebnis:
   Text→Kontakt-Box und Kontakt-Box→Autorbox nutzen jetzt exakt denselben
   Abstands-Token (clamp(4rem,8vw,7rem)) wie Autorbox→Footer. */
.viax-article .viax-partner-ctawrap {
    padding-block: 0;
}

.viax-author-box__image {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    object-fit: cover;
}

.viax-author-box__label {
    margin: 0 0 0.35rem;
    color: var(--viax-yellow);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.viax-author-box h2 {
    margin: 0;
    font-size: 1.25rem;
}

.viax-author-box p:last-child {
    margin: 0.45rem 0 0;
    color: var(--viax-muted);
}

.viax-legacy-contact {
    padding-bottom: 2rem;
}

.viax-legacy-contact__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2rem, 6vw, 6.5rem);
    align-items: center;
}

.viax-legacy-contact__portrait {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: var(--viax-card);
    box-shadow: var(--viax-shadow);
    aspect-ratio: 4 / 5;
}

.viax-legacy-contact__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.viax-legacy-contact__copy h1 {
    max-width: 12ch;
    margin: 0 0 1.3rem;
    font-size: clamp(2.7rem, 5.5vw, 5.4rem);
    line-height: 0.96;
}

.viax-legacy-contact__copy h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.55rem, 2.2vw, 2.25rem);
}

.viax-legacy-contact__copy p {
    max-width: 650px;
    color: var(--viax-muted);
}

.viax-legacy-contact__copy a {
    color: var(--viax-yellow);
    font-weight: 800;
}

.viax-contact-form-section {
    padding-top: 2rem;
}

.viax-contact-form-section__intro {
    max-width: 760px;
    margin-bottom: 2rem;
}

.viax-contact-form-section__intro h2 {
    margin: 0 0 0.8rem;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1;
}

.viax-contact-form-section__intro p:last-child {
    color: var(--viax-muted);
}

.viax-contact-form {
    position: relative;
    max-width: 980px;
    padding: clamp(1.3rem, 3vw, 2.5rem);
    border: 1px solid var(--viax-border);
    border-radius: var(--viax-radius);
    background: linear-gradient(145deg, rgba(39, 38, 72, 0.96), rgba(19, 18, 39, 0.98));
    box-shadow: var(--viax-shadow);
}

.viax-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.viax-contact-form label {
    display: grid;
    gap: 0.5rem;
    color: var(--viax-light);
    font-weight: 750;
}

.viax-contact-form__wide {
    grid-column: 1 / -1;
}

.viax-contact-form input[type="text"],
.viax-contact-form input[type="email"],
.viax-contact-form textarea {
    width: 100%;
    border: 1px solid var(--viax-border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: rgba(8, 8, 23, 0.72);
    color: var(--viax-light);
    font: inherit;
}

.viax-contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.viax-contact-form__consent {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start;
    margin: 1.25rem 0;
    color: var(--viax-muted) !important;
    font-size: 0.92rem;
    font-weight: 500 !important;
}

.viax-contact-form__consent input {
    width: 18px;
    height: 18px;
    margin-top: 0.12rem;
    accent-color: var(--viax-yellow);
}

.viax-contact-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.viax-contact-form__status {
    max-width: 980px;
    margin: 0 0 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: rgba(82, 229, 77, 0.12);
    color: var(--viax-light);
}

.viax-contact-form__status--error {
    background: rgba(230, 48, 151, 0.14);
}

@media (max-width: 1023px) {
    :root {
        /* Hero-Vereinheitlichung (2026-10-17): eigener Breakpoint fuer die
           Hero-Mindesthoehe (768-1023px = 416px/26rem laut Vorgabe),
           getrennt vom allgemeinen Tablet-Breakpoint bei 900px - vorher
           erhielt 901-1023px faelschlich die Desktop-Hoehe (712px), da
           dieser Block erst bei <=900px griff. Das .viax-page-hero__grid
           faellt hier ebenfalls (siehe direkt unten) auf eine Spalte
           zurueck - das Seitenbild wird zusaetzlich ausgeblendet
           (.viax-page-hero__image), damit die Hero-Hoehe wie bei den
           bild­losen .viax-company-hero/.viax-partner-hero nur vom Text
           bestimmt wird (Punkt 5 des Auftrags: Bild darf die Hoehe nicht
           vergroessern). */
        --viax-hero-pad-top: clamp(3.25rem, 6vw, 4rem);
        --viax-hero-pad-bottom: clamp(3.25rem, 6vw, 4rem);
        --viax-hero-h1-size: clamp(2.2rem, 6vw, 3rem);
        --viax-hero-lead-size: clamp(1rem, 2vw, 1.15rem);
        --viax-hero-height: 26rem;
    }

    .viax-page-hero__image {
        display: none;
    }

    .viax-page-hero__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    /* Nachbesserung 2026-10-20, Abschnitt 2: Mobil/Tablet-Headerhoehe fuer
       das Scroll-Ziel - 72px min-height + 1px border-bottom = 73px. */
    :root {
        --viax-header-height: 73px;
    }

    .viax-site-header .wp-block-group__inner-container,
    .viax-header-inner {
        min-height: 72px;
    }

    .viax-site-header .wp-block-navigation__responsive-container-open {
        color: var(--viax-light);
    }

    .viax-card-grid {
        grid-template-columns: 1fr;
    }

    .viax-reference-showcase .viax-shell {
        grid-template-columns: 1fr;
    }

    .viax-origin-story .viax-shell,
    .viax-approach .viax-shell {
        grid-template-columns: 1fr;
    }

    .viax-origin-story__media {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .viax-home-slide {
        grid-template-columns: 1fr;
        align-content: center;
        padding-bottom: 7.5rem;
    }

    .viax-home-slide__visual {
        display: none;
    }

    .viax-home-slider__controls {
        right: 1.25rem;
        bottom: 1.5rem;
    }

    .viax-nav__desktop {
        display: none;
    }

    .viax-nav__mobile {
        position: relative;
        display: block;
    }

    .viax-nav__mobile summary {
        display: inline-flex;
        width: 48px;
        min-width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--viax-border);
        border-radius: 15px;
        color: var(--viax-light);
        cursor: pointer;
        list-style: none;
    }

    .viax-nav__toggle-icon {
        display: grid;
        width: 22px;
        gap: 4px;
    }

    .viax-nav__toggle-icon span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .viax-nav__mobile[open] .viax-nav__toggle-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .viax-nav__mobile[open] .viax-nav__toggle-icon span:nth-child(2) {
        opacity: 0;
    }

    .viax-nav__mobile[open] .viax-nav__toggle-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .viax-nav__mobile summary::-webkit-details-marker {
        display: none;
    }

    .viax-nav__mobile-panel {
        position: absolute;
        top: calc(100% + 0.8rem);
        right: 0;
        display: grid;
        width: min(82vw, 340px);
        gap: 0.35rem;
        padding: 1rem;
        border: 1px solid var(--viax-border);
        border-radius: var(--viax-radius-small);
        background: var(--viax-deep);
        box-shadow: var(--viax-shadow);
    }

    .viax-nav__mobile-panel .viax-nav__link {
        padding: 0.65rem;
    }

    /* Bugfix 2026-10-20: .viax-nav__link.is-active::after positioniert sich
       relativ zur eigenen (hier gepolsterten) Box - bottom:-9px aus der
       Desktop-Regel landet im Mobile-Panel dadurch sichtbar unterhalb des
       Textes im Zeilenabstand zum naechsten Eintrag statt direkt unter der
       Schrift. Eigener, an das 0.65rem-Padding angepasster Wert. */
    .viax-nav__mobile-panel .viax-nav__link.is-active::after {
        bottom: 6px;
    }

    .viax-nav__mobile-panel .viax-nav__dropdown-panel {
        position: static;
        min-width: 0;
        margin: 0.25rem 0 0.5rem;
        padding: 0.35rem;
        box-shadow: none;
    }

    .viax-nav__mobile-panel .viax-nav__dropdown > summary {
        padding: 0.65rem;
    }

    .viax-nav__mobile-panel .viax-nav__dropdown-link {
        padding-left: 1rem;
    }

    .viax-author-box {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .viax-author-box__image {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .viax-page-hero__grid,
    .viax-legacy-contact__grid,
    .viax-benefit-grid,
    .viax-blog-grid,
    .viax-blog-topic-nav,
    .viax-blog-tiles,
    .viax-service-jump-nav,
    .viax-service-link-grid,
    .viax-team-grid {
        grid-template-columns: 1fr;
    }

    /* B2 (2026-10-13): auf Mobile untereinander in der Reihenfolge
       01/02/03/04/Suche (DOM-Reihenfolge = sichtbare Reihenfolge, kein
       CSS order), kein Spaltenverbund mehr noetig. */
    .viax-blog-tile--search {
        grid-column: span 1;
    }

    .viax-legacy-contact__portrait {
        width: min(100%, 580px);
        aspect-ratio: 4 / 3;
    }

    .viax-legacy-contact__portrait img {
        object-position: center 18%;
    }

    .viax-page-hero__image {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .viax-page-hero__image img {
        min-height: 0;
        aspect-ratio: inherit;
    }

    .viax-blog-topic__heading {
        align-items: start;
        flex-direction: column;
    }

    .viax-service-cluster__heading {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .viax-service-cluster__visual {
        min-height: 190px;
    }

    .viax-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    :root {
        /* Hero-Vereinheitlichung (2026-10-17): eigener Breakpoint fuer die
           Hero-Mindesthoehe unter 768px (496px/31rem laut Vorgabe),
           getrennt vom allgemeinen Mobil-Breakpoint bei 620px - vorher
           erhielt 621-767px faelschlich die Tablet-Hoehe (416px), da
           dieser Block erst bei <=620px griff. */
        --viax-hero-pad-top: 4.5rem;
        --viax-hero-pad-bottom: 4.5rem;
        --viax-hero-h1-size: clamp(2rem, 10vw, 2.75rem);
        --viax-hero-lead-size: 1rem;
        /* 31rem = 496px: laengster real vorhandener Mobil-Inhalt ist
           /en/company/ ("Built on our own product experience. / For your
           digital future." = 5 H1-Zeilen bei 390px, gemessen 495px).
           Kleinere Werte haetten genau diese eine Seite hoeher werden
           lassen als alle anderen. */
        --viax-hero-height: 31rem;
        /* Mobil-Eyebrow: font-size .7rem bei line-height 1 (= .7rem) +
           margin-bottom .85rem = 1.55rem. */
        --viax-hero-eyebrow-height: 1.55rem;
    }
}

@media (max-width: 620px) {
    .viax-contact-form__grid {
        grid-template-columns: 1fr;
    }

    .viax-contact-form__wide {
        grid-column: auto;
    }

    .viax-contact-form .viax-button {
        width: 100%;
    }

    .viax-legacy-contact__portrait {
        aspect-ratio: 1 / 1;
    }
    :root {
        --viax-radius: 22px;
        --viax-gutter: 1rem;
    }

    .viax-site-header .wp-block-group__inner-container,
    .viax-header-inner {
        /* N01: padding-inline entfernt - width-Formel der Basisregel
           (min(calc(100% - 2*gutter), content)) uebernimmt die Inset bereits,
           ein zusaetzliches padding-inline:gutter wuerde hier auf Mobile
           erneut zur doppelten Einrueckung ggue. .viax-shell fuehren. */
        min-height: 66px;
    }

    .viax-site-header .wp-block-site-logo img,
    .viax-brand img {
        max-width: min(54vw, 210px);
        height: auto;
    }

    .viax-header-inner {
        gap: 0.75rem;
    }

    .viax-nav__mobile summary {
        width: 44px;
        min-width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .viax-nav__mobile-panel {
        width: min(calc(100vw - 2rem), 340px);
        max-height: calc(100svh - 90px);
        overflow-y: auto;
    }

    .viax-blog-search > div {
        align-items: stretch;
        flex-direction: column;
    }

    .viax-usecase-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .viax-usecase-filters__field {
        flex-basis: auto;
    }

    .viax-usecase-filters__reset {
        align-self: flex-start;
    }

    .viax-hero {
        padding-block: 4.25rem 3.5rem;
    }

    .viax-hero h1 {
        font-size: clamp(2.2rem, 11vw, 3rem);
        line-height: 1.02;
    }

    .viax-home-slider {
        min-height: 540px;
    }

    .viax-home-slide {
        min-height: 540px;
        padding: 3.4rem var(--viax-gutter) 6.5rem;
    }

    .viax-home-slide__copy h1,
    .viax-home-slide--freelancer .viax-home-slide__copy h1,
    .viax-home-slide--jobs .viax-home-slide__copy h1 {
        font-size: clamp(2.1rem, 10vw, 2.75rem);
        line-height: 1.03;
        text-wrap: pretty;
    }

    .viax-home-slide__copy > p:not(.viax-eyebrow) {
        margin: 1.15rem 0 1.5rem;
        font-size: 1rem;
        line-height: 1.55;
    }

    .viax-home-slider__controls {
        right: 1rem;
        bottom: 1.15rem;
    }

    .viax-page-hero__grid {
        gap: 1.6rem;
    }

    .viax-page-hero h1 {
        line-height: 1.06;
        overflow-wrap: anywhere;
        hyphens: auto;
        text-wrap: pretty;
    }

    .viax-page-hero__lead {
        margin-top: 1rem;
        line-height: 1.55;
    }

    .viax-page-hero__image {
        border-radius: 18px;
    }

    .viax-section,
    .viax-article {
        padding-block: 3rem;
    }

    .viax-section-heading {
        margin-bottom: 1.65rem;
    }

    .viax-section-heading h2 {
        font-size: clamp(1.8rem, 9vw, 2.45rem);
        line-height: 1.08;
        text-wrap: pretty;
    }

    .viax-section-heading p,
    .viax-prose,
    .viax-article-content {
        font-size: 1rem;
    }

    .viax-eyebrow {
        margin-bottom: 0.85rem;
        font-size: 0.7rem;
        letter-spacing: 0.13em;
    }

    .viax-actions {
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .viax-actions .viax-button,
    .viax-actions .wp-block-button,
    .viax-actions .wp-block-button__link,
    .viax-page-hero .viax-button {
        width: 100%;
    }

    .viax-button,
    .viax-site .wp-element-button {
        max-width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.1rem;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    .viax-card {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .viax-process-grid {
        grid-template-columns: 1fr;
        padding-left: 2.15rem;
    }

    .viax-process-grid::before {
        position: absolute;
        top: 1.35rem;
        bottom: 1.35rem;
        left: 10px;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(var(--viax-yellow), var(--viax-green), var(--viax-pink), var(--viax-yellow));
        content: "";
    }

    .viax-process-step {
        position: relative;
    }

    .viax-process-step::before {
        position: absolute;
        z-index: 2;
        top: 1.3rem;
        left: -2.05rem;
        width: 14px;
        height: 14px;
        border: 3px solid var(--viax-night);
        border-radius: 50%;
        background: var(--viax-yellow);
        box-shadow: 0 0 0 1px rgba(255, 237, 64, 0.65);
        content: "";
    }

    .viax-process-step:nth-child(2)::before { background: var(--viax-green); box-shadow: 0 0 0 1px rgba(87, 237, 76, 0.65); }
    .viax-process-step:nth-child(3)::before { background: var(--viax-pink); box-shadow: 0 0 0 1px rgba(237, 52, 162, 0.65); }
    .viax-process-step:nth-child(4)::before { background: var(--viax-yellow); }

    .viax-service-cluster__visual {
        min-height: 170px;
        border-radius: 22px;
    }

    .viax-team-card {
        padding: 0;
    }

    .viax-team-card__body,
    .viax-blog-card__body {
        padding: 1.25rem;
    }

    .viax-card h3,
    .viax-blog-card h2,
    .viax-blog-card h3 {
        overflow-wrap: break-word;
        font-size: 1.35rem;
        hyphens: auto;
    }

    .viax-process-step,
    .viax-faq details,
    .viax-contact-card {
        padding: 1.2rem;
    }

    .viax-reference-gallery {
        grid-template-columns: 1fr;
        padding-inline: 0;
    }

    .viax-reference-gallery img {
        max-height: 430px;
    }

    .viax-origin-story__media {
        aspect-ratio: 3 / 2;
        border-radius: 18px;
    }

    .viax-approach__media {
        border-radius: 18px;
    }

    .viax-origin-story__actions,
    .viax-origin-story__actions .viax-button {
        width: 100%;
    }

    .viax-blog-topic-link,
    .viax-service-link-card {
        min-height: 0;
        padding: 1.2rem;
    }

    .viax-blog-search {
        max-width: none;
        padding: 1rem;
    }

    .viax-blog-topic {
        padding-top: 2.25rem;
    }

    .viax-blog-topic__heading {
        gap: 0.75rem;
        margin-bottom: 1.4rem;
    }

    .viax-blog-topic-head {
        gap: 0.75rem;
    }

    .viax-blog-topic-head__num {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 0.9rem;
    }

    .viax-blog-topic-head::after {
        left: calc(2.3rem + 0.75rem);
    }

    .viax-blog-topic__heading h2,
    .viax-service-cluster__heading h2,
    .viax-article-header h1 {
        font-size: clamp(1.9rem, 9vw, 2.6rem);
        line-height: 1.08;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .viax-cta {
        padding: 1.4rem;
        border-radius: 18px;
    }

    .viax-cta h2 {
        font-size: clamp(1.8rem, 8.5vw, 2.35rem);
        line-height: 1.08;
    }

    .viax-stat-panel {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .viax-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .viax-legacy-contact {
        padding-top: 2.25rem;
    }

    .viax-legacy-contact__grid {
        gap: 1.75rem;
    }

    .viax-legacy-contact__copy h1 {
        margin-bottom: 0.9rem;
        font-size: clamp(2.25rem, 12vw, 2.7rem);
        line-height: 1;
    }

    .viax-contact-form-section {
        padding-top: 1rem;
    }

    .viax-article-content :where(table, pre) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 390px) {
    .viax-site-header .wp-block-site-logo img,
    .viax-brand img {
        max-width: 170px;
    }

    .viax-home-slide__copy h1,
    .viax-home-slide--freelancer .viax-home-slide__copy h1,
    .viax-home-slide--jobs .viax-home-slide__copy h1 {
        font-size: 2rem;
    }

    .viax-author-box {
        grid-template-columns: 1fr;
    }
}

/* Video-Hero Startseite (ersetzt .viax-home-slider), 2026-10-09 */
.viax-home-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: min(78vh, 760px);
    background: var(--viax-night);
}

.viax-home-hero__still,
.viax-home-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero-Video-Auftrag v7 (2026-10-14): gemeinsames Hintergrund-Video fuer
   .viax-company-hero, die .viax-partner-hero-UEBERSICHT und .viax-page-hero
   (Markup aus Viax_Frontend::hero_video_markup(), siehe dort). z-index:-1
   statt z-index:1 auf dem Inhalt - passt zum bereits bestehenden Muster von
   .viax-company-hero__bg/.viax-partner-hero__media und braucht deshalb
   keine Aenderung an .viax-page-hero__grid/.viax-company-hero__inner/
   .viax-partner-hero__inner (die alle schon statisch/ohne eigenen z-index
   ueber einem negativ gestapelten Hintergrund liegen). Die drei Eltern-
   Elemente haben bereits position:relative + overflow:hidden (teils
   isolation:isolate) - keine weitere CSS-Aenderung an ihnen noetig.
   Overlay-Gradient identisch zur Startseite (.viax-home-hero::after). */
.viax-hero-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.viax-hero-video__still,
.viax-hero-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.viax-hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 15, 31, 0.88) 0%, rgba(16, 15, 31, 0.55) 38%, rgba(16, 15, 31, 0) 68%);
}

@media (max-width: 640px) {
    .viax-hero-video::after {
        background: linear-gradient(0deg, rgba(16, 15, 31, 0.85), rgba(16, 15, 31, 0.45) 60%, rgba(16, 15, 31, 0.3));
    }
}

/* Lastenheft-Layout-Final-v1.0 (H01-H06, 2026-10-17): ersetzt .viax-hero-video
   auf .viax-hero-compact (.viax-company-hero + .viax-partner-hero-
   UEBERSICHT). Ebenenaufbau H02: Theme-Hintergrund der Eltern-Section
   (--viax-company-night/--viax-night, unveraendert) -> SVG -> HTML-Text.
   Die SVG blendet laut Freigabe an ihren eigenen Raendern bereits nach
   Transparenz aus (H03) - daher bewusst KEIN zusaetzliches ::after/Mask
   hier, um den freigegebenen Glow nicht zu verdoppeln/abzudunkeln. Rechts
   ausgerichtet, vertikal zentriert, leicht ueberhoeht (H05: "rechts, sanft
   bis hinter den Titel nach links reichend"). pointer-events:none + rein
   dekoratives <img alt=""> (H02: blockiert keine Klicks, kein eigener
   A11y-Inhalt). */
.viax-hero-network {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.viax-hero-network__svg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 165%;
    width: auto;
    max-width: 92%;
}

@media (max-width: 900px) {
    .viax-hero-network__svg {
        height: 135%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .viax-hero-network__svg {
        height: 115%;
        opacity: 0.6;
    }
}

.viax-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(16, 15, 31, 0.88) 0%, rgba(16, 15, 31, 0.55) 38%, rgba(16, 15, 31, 0) 68%),
        linear-gradient(0deg, rgba(16, 15, 31, 0.55), rgba(16, 15, 31, 0) 28%);
}

.viax-home-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--viax-content);
    margin: 0 auto;
    padding: 72px 24px;
}

.viax-home-hero__eyebrow {
    margin: 0 0 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--viax-muted);
}

.viax-home-hero__inner h1 {
    margin: 0 0 1rem;
    max-width: 15em;
    font-size: clamp(2rem, 4.6vw, 3.9rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.viax-home-hero__lead {
    margin: 0 0 34px;
    max-width: 34em;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--viax-muted);
}

.viax-home-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--viax-yellow);
    color: var(--viax-night);
    font-weight: 600;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.viax-home-hero__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 237, 64, 0.18);
}

.viax-home-hero__button:focus-visible {
    outline: 2px solid var(--viax-yellow);
    outline-offset: 3px;
}

/* Hero-Neupositionierung 2026-10-20, Abschnitt 2: Challenge-Claim - kurzer
   Point-of-Action zwischen Fliesstext und CTA-Buttons, Stil angelehnt an die
   "So funktioniert's"-Mikrolinks der VIA-X.de-Referenz: deutlich kleiner als
   H1/Fliesstext, semibold, Gelb, kein Strich, kleiner Pfeil statt grossem
   Icon-Pfeil. Eigene, schlanke Klasse statt .viax-text-link (das ist fuer
   groesseren Fliesstext-Kontext gedacht, hier bewusst kompakter). */
.viax-home-hero__challenge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 30px;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--viax-yellow);
    text-decoration: none;
}

/* Nachbesserung 2026-10-20, Abschnitt 1.2: gezeichneter Chevron (SVG, Haus-
   form) statt Schriftzeichen - stroke="currentColor" im SVG-Markup erbt das
   Gelb von .viax-home-hero__challenge automatisch, daher hier keine eigene
   color-Regel noetig. Nur der Chevron bewegt sich bei Hover/Fokus (~2px nach
   unten, ~160ms), der Text bleibt stehen - prefers-reduced-motion:reduce
   wird bereits durch die bestehende globale *{transition-duration:.01ms}-
   Regel weiter oben in dieser Datei abgedeckt. */
.viax-home-hero__challenge-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.viax-home-hero__challenge:hover .viax-home-hero__challenge-chevron,
.viax-home-hero__challenge:focus-visible .viax-home-hero__challenge-chevron {
    transform: translateY(2px);
}

/* Abschnitt 3/4: drei CTA-Buttons statt des bisherigen einzelnen
   .viax-home-hero__button. Gleiche Basis (.viax-button aus dem globalen
   Button-System, siehe oben) statt einer neuen Komponente - nur Farbe und
   Breitenverhaeltnis kommen hier hinzu, keine Dopplung von Hoehe/Radius/
   Fokus-/Hover-Logik. Reihenfolge im Markup = Desktop-Reihenfolge (Services,
   Portal, Partner), mobil per order umsortiert (Portal zuerst). */
.viax-home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

/* Nachbesserung 2026-10-20, Abschnitt 2: Scrollziel des Challenge-Claim-
   Chevrons - zuvor landete die Buttonreihe durch das pauschale
   scroll-padding-top:32px am <html> (WordPress-Kernverhalten, siehe
   Auftragstext, bewusst NICHT angefasst) vollstaendig hinter dem 85px hohen
   Sticky-Header. scroll-margin-top am Ziel selbst uebersteuert das korrekt:
   Headerhoehe (--viax-header-height, s.o.) + 28px Luft (innerhalb der
   geforderten 24-32px). Bei angemeldeten Redakteuren schiebt WordPress'
   eigene Adminleiste (body.admin-bar) die gesamte Seite zusaetzlich nach
   unten - 32px ab 783px Breite, 46px darunter (WP-Kernverhalten, siehe
   wp-admin/css/admin-bar.min.css) - beides unten gesondert beruecksichtigt. */
#viax-home-hero-cta {
    scroll-margin-top: calc(var(--viax-header-height) + 28px);
}

body.admin-bar #viax-home-hero-cta {
    scroll-margin-top: calc(var(--viax-header-height) + 28px + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar #viax-home-hero-cta {
        scroll-margin-top: calc(var(--viax-header-height) + 28px + 46px);
    }
}

.viax-home-hero__cta-button {
    flex: 1 1 0;
    gap: 0.5rem;
}

.viax-home-hero__cta-button .viax-icon {
    width: 1.1em;
    height: 1.1em;
}

.viax-home-hero__cta-button--services {
    background: var(--viax-green);
}

.viax-home-hero__cta-button--services:hover {
    box-shadow: 0 12px 30px rgba(87, 237, 76, 0.22);
}

.viax-home-hero__cta-button--portal {
    /* 1,7-2,0x Breite der aeusseren Buttons (Abschnitt 3): alle drei starten
       bei flex-basis 0, das Groessenverhaeltnis ergibt sich dadurch allein
       aus dem flex-grow-Faktor - 1.85 liegt mittig im geforderten Bereich. */
    flex: 1.85 1 0;
    background: var(--viax-yellow);
}

.viax-home-hero__cta-button--partner {
    background: var(--viax-pink);
}

.viax-home-hero__cta-button--partner:hover {
    box-shadow: 0 12px 30px rgba(237, 52, 162, 0.22);
}

@media (max-width: 640px) {
    .viax-home-hero {
        min-height: 520px;
    }

    .viax-home-hero::after {
        background: linear-gradient(0deg, rgba(16, 15, 31, 0.85), rgba(16, 15, 31, 0.45) 60%, rgba(16, 15, 31, 0.3));
    }

    /* Abschnitt 4: Buttons mobil untereinander, nahezu volle Breite,
       Reihenfolge Portal -> Services -> Partner. */
    .viax-home-hero__cta {
        flex-direction: column;
    }

    .viax-home-hero__cta-button {
        flex: none;
        width: 100%;
    }

    .viax-home-hero__cta-button--portal {
        order: -1;
    }
}

/* Partnerfilter (Use Cases) und Kategorie-/Use-Case-Paginierung, 2026-10 */
.viax-blog-topic-link.is-active {
    border-color: var(--viax-yellow);
    background: linear-gradient(145deg, rgba(255, 237, 64, 0.16), rgba(244, 243, 247, 0.025));
}

.viax-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    color: var(--viax-muted);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .viax-network__data {
        display: none;
    }

    .viax-home-hero__video {
        display: none;
    }

    .viax-hero-video__video {
        display: none;
    }
}