/* Design system is loaded as a separate <link> before this file in every page
   (flat, parallel download) — do NOT re-add an @import here (it serialises CSS). */

/* =========================================
   HEADER
   Transparent on top -> White w/ Shadow
   ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: clamp(16px, 2vw, 32px) var(--container-padding);
    transition: all var(--transition-base);
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header.is-scrolled {
    background-color: var(--color-background);
    box-shadow: var(--shadow-sm);
    padding: clamp(12px, 1.5vw, 24px) var(--container-padding);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    width: 100%;
    height: auto;
    transition: all var(--transition-base);
}

/* Base styles for SVG paths to enable transitions */
.logo-brand-blue,
.logo-brand-grey {
    transition: fill 0.4s ease-in-out;
}

/* Default (Hero) state: All paths white */
.logo-brand-blue,
.logo-brand-grey {
    fill: #ffffff;
}

/* Scrolled state: Transition to original brand colors */
.is-scrolled .logo-brand-blue {
    fill: #003981;
}

.is-scrolled .logo-brand-grey {
    fill: #777777;
}

.is-scrolled .logo-link {
    color: var(--color-primary);
}

.site-logo-svg {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 261.537 / 94.335;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-link {
        max-width: 150px;
    }
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

.nav-link {
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    position: relative;
    padding-bottom: 4px;
}

.is-scrolled .nav-link {
    color: var(--color-text-main);
}

/* Sharp underline hover animation */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-link:hover::after {
    width: 100%;
}

/* Active page indicator — persistent underline + primary color */
.nav-link.is-active {
    color: var(--color-primary);
}

.nav-link.is-active::after {
    width: 100%;
}

.is-scrolled .nav-link.is-active,
.site-header--static .nav-link.is-active {
    color: var(--color-primary);
}

.is-scrolled .nav-link:hover {
    color: var(--color-primary);
}

/* Static (non-hero) header variant — always white */
.site-header--static,
.site-header--static.is-scrolled {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header--static .nav-link,
.site-header--static .lang-switch {
    color: var(--color-text-main);
}

.site-header--static .nav-link:hover {
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.lang-switch {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-light);
    display: flex;
    gap: 4px;
}

.is-scrolled .lang-switch {
    color: var(--color-text-main);
}

.lang-active {
    opacity: 1;
}

.lang-inactive {
    /* min. 0.65: darunter faellt der Kontrast auf hellem Header unter WCAG AA 4.5:1 */
    opacity: 0.65;
    transition: opacity var(--transition-fast);
}

.lang-inactive:hover {
    opacity: 1;
}

.btn-header {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 12px 24px;
    font-size: var(--font-size-small);
}

.btn-header:hover {
    background-color: var(--color-primary-hover);
}


/* =========================================
   HERO AREA
   ========================================= */
.hero {
    height: 100vh;
    min-height: 800px;
    background-color: var(--color-text-main);
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text-light);
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    filter: saturate(0.25) brightness(0.6) contrast(1.05) blur(5.5px);
    transform: scale(1.06); /* hides the soft edges the blur exposes on a cover video */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(10, 15, 25, 0.62);
}

/* Der Hero zentriert diesen Block vertikal. Die Margin versetzt ihn nach
   unten, damit der Titel tiefer im Bild sitzt und über "High-End" Ruhe
   entsteht. Beim Zentrieren wird die Margin-Box mittig gesetzt, der sichtbare
   Versatz ist also die halbe Margin. */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin-top: clamp(2rem, 22vh, 12rem);
}

/* Eigener clamp statt --font-size-h1: "High-End Automationssystem" plus
   Flagge passt bei 4.5rem nicht in die 656px breite Hero-Spalte. Der Token
   bleibt unangetastet, nur der Hero-Titel wird oben gekappt. */
.hero-title {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    font-size: clamp(2.25rem, 4vw, 2.75rem);
    line-height: 1;
}

/* Zwei Titelzeilen als Blöcke. Zeile 1 haelt Wort und Flagge per nowrap
   zusammen, damit die Flagge nicht auf eine eigene Zeile rutscht. */
.hero-title-line {
    display: block;
}

.hero-title-line--flag {
    white-space: nowrap;
}

/* Highlight square for text — bewusst nur der Wort-Span in Zeile 1,
   nicht die Zeilen-Wrapper und nicht die Flagge. */
.hero-title-line--flag > span:not(.swiss-flag) {
    position: relative;
    display: inline-block;
}

.hero-title-line--flag > span:not(.swiss-flag)::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: -10px;
    width: calc(100% + 20px);
    height: 30%;
    background-color: var(--color-primary);
    opacity: 0.3;
    z-index: -1;
}

/* Schweizer Flagge hinter dem Titel: weisses Vollquadrat, Kreuz als
   Aussparung (fill-rule="evenodd") — das dunkle Hero-Video scheint durch.
   Hochgestellt wie ein ®-Zeichen, Oberkante auf Cap-Height. */
.hero-title .swiss-flag {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.14em;
    /* Ab Oberkante der Zeilenbox: die Grossbuchstaben beginnen bei Inter
       0.137em darunter (Cap-Height 0.727em, Ascender 0.969em), dorthin
       zieht translateY die Flagge. */
    vertical-align: top;
    transform: translateY(0.137em);
    color: var(--color-text-light);
}

.hero-title .swiss-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-subtitle {
    font-size: 1.125rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 680px;
    margin-bottom: var(--spacing-lg);
}

/* Der letzte Absatz behaelt den grossen Abstand zur CTA-Gruppe. */
.hero-subtitle:not(:last-of-type) {
    margin-bottom: var(--spacing-sm);
}

.hero-cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.hero-cta-full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    /* "High-End Automationssystem" samt Flagge ist ein nowrap-Block in einem
       Flex-Kind ohne min-width:0 — sein Inhalt darf den Hero-Content also nie
       breiter erzwingen als der verfuegbare Platz, sonst laeuft die ganze
       Zeile aus dem Viewport. 5.6vw haelt das bei jeder Breite von 320px bis
       zum Breakpoint ein; ab ca. 643px erreicht die Zeile das Maximum von
       2.25rem — demselben Wert wie die Untergrenze des Desktop-Clamps, der
       Uebergang bei 768px bleibt also sprungfrei. */
    .hero-title {
        font-size: clamp(1.125rem, 5.6vw, 2.25rem);
    }

    /* Der Hero zentriert seinen Inhalt vertikal. Mit den zwei Absaetzen wird
       der Inhalt auf schmalen Geraeten so hoch, dass der Titel unter den
       fixierten Header rutscht. Die Hoehe folgt darum dem Inhalt, das
       Padding haelt Titel und CTA frei. */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: var(--spacing-xxl);
        padding-bottom: var(--spacing-lg);
    }

    /* Hier ist der Hero nicht mehr hoehenbegrenzt, die Margin wuerde also
       voll statt zur Haelfte wirken und die CTA-Gruppe weit unter die Kante
       schieben. Den Abstand nach oben uebernimmt das padding-top. */
    .hero-content {
        margin-top: 0;
    }
}



/* =========================================
   TRUST / REFERENCES
   ========================================= */
.trust-section {
    background-color: var(--color-surface);
    background-image: none; /* kein --gradient-navy: Section ist hell */
    text-align: center;
}

.trust-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-grey);
    margin-bottom: var(--spacing-lg);
}

.trust-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
}

.trust-metric-box {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--color-border);
}

.trust-metric-box:last-child {
    border-right: none;
}

.trust-metric-number {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.trust-metric-title {
    font-size: var(--font-size-h3);
    color: var(--color-text-main);
    font-weight: 600;
    margin-bottom: 4px;
}

.trust-metric-subtext {
    font-size: var(--font-size-small);
    color: var(--color-text-grey);
    max-width: 90%;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .trust-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-metric-box {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }

    .trust-metric-box:nth-child(2n) {
        border-right: none;
    }

    .trust-metric-box:nth-last-child(-n+2) {
        border-bottom: none;
    }
}


/* White button for inverse area */
.btn-white {
    background-color: var(--color-background);
    color: var(--color-text-main);
}

.btn-white:hover {
    background-color: var(--color-surface);
    color: var(--color-primary);
}

/* CTA button group (system sys-closing) */
.cta-button-group {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .cta-button-group {
        flex-direction: column;
        align-items: center;
    }

    .cta-button-group .btn {
        width: 100%;
        max-width: 320px;
    }
}


/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-grey);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.footer-col-title {
    color: var(--color-text-light);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
}

.footer-info p {
    margin-bottom: 8px;
    font-size: var(--font-size-small);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: var(--font-size-small);
}

.footer-links a:hover {
    color: var(--color-text-main);
}

.footer-links span,
.footer-links strong {
    font-size: var(--font-size-small);
    color: var(--color-text-grey);
}

.footer-links strong {
    color: var(--color-text-main);
    font-weight: 600;
}

.footer-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-sm);
    display: block;
}

.footer-tagline {
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-grey);
}

.footer-bottom {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    font-size: 0.75rem;
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-link {
    color: var(--color-text-grey);
    opacity: 0.7;
}

.social-link:hover {
    color: var(--color-text-main);
    opacity: 1;
}

/* =========================================
   INTERNATIONAL MAP SECTION
   ========================================= */

.international-section {
    background: var(--color-background);
    padding: 40px 0 var(--spacing-xxl);
}

.intl-header {
    margin-bottom: var(--spacing-lg);
}

.intl-title {
    font-size: var(--font-size-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-sm);
}

.intl-subtitle {
    font-size: 1rem;
    color: var(--color-text-grey);
    max-width: 760px;
    line-height: 1.6;
}

.intl-map-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: var(--spacing-lg);
}

.intl-map-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Country path states */
.map-cty {
    transition: fill 0.18s ease;
}

.map-cty--inactive {
    fill: var(--color-primary-subtle);
    stroke: #ffffff;
    stroke-width: 0.4;
}

.map-cty--active {
    fill: var(--color-primary);
    stroke: #ffffff;
    stroke-width: 0.6;
}

/* International — distributor contacts (inside the world-map box) */
.intl-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto;
    margin-top: var(--spacing-lg);
}

/* Region, Logo und Firmenname der drei Vertreter auf gleicher Höhe halten,
   unabhängig davon, wie viele Zeilen Regionstext oder Firmenname brauchen. */
@supports (grid-template-rows: subgrid) {
    .intl-contact {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
    }

    .intl-contact-logo {
        align-self: end;
    }
}

.intl-contact {
    padding: var(--spacing-md);
    border-left: 1px solid var(--color-border);
}

.intl-contact:first-child {
    border-left: none;
    padding-left: 0;
}

.intl-contact:last-child {
    padding-right: 0;
}

.intl-contact-region {
    font-size: 0.875rem;
    color: var(--color-text-grey);
    margin-bottom: var(--spacing-md);
}

.intl-contact-logo {
    display: flex;
    align-items: center;
    min-height: 80px;
    margin-bottom: var(--spacing-md);
}

.intl-contact-logo img {
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
}

.intl-contact-logo--wide img {
    max-width: 100%;
    max-height: 28px;
}

.intl-contact-name {
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.35;
    margin-bottom: var(--spacing-sm);
}

.intl-contact-address {
    font-style: normal;
    color: var(--color-text-grey);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.intl-contact-line {
    color: var(--color-text-grey);
    line-height: 1.6;
}

.intl-contact-line a {
    color: var(--color-primary);
    text-decoration: none;
}

.intl-contact-line a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .intl-contacts {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .intl-contact {
        display: block;
        grid-row: auto;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: var(--spacing-md) 0;
    }

    .intl-contact:first-child {
        border-top: none;
    }
}

/* <picture> is only a WebP/PNG wrapper — make it layout-transparent so the
   inner <img> lays out exactly as a direct child of its container (no inline gap,
   width:100% still resolves against the media box). */
picture {
    display: contents;
}

/* =========================================
   PROBLEM / SOLUTION SECTION
   NICHT LOESCHEN: Die Section (#problem-solution) ist seit 2026-07-30 in
   index.html temporaer auskommentiert. Diese Regeln sind kein toter Code,
   sie werden beim Reaktivieren wieder gebraucht.
   ========================================= */

.problem-solution-section {
    background-color: var(--color-surface);
}

.ps-header {
    margin-bottom: var(--spacing-lg);
}

.ps-eyebrow {
    color: var(--color-text-grey);
    margin-bottom: var(--spacing-xs);
}

.ps-title {
    font-size: var(--font-size-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.ps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 var(--spacing-lg);
    align-items: center;
}

.ps-col {
    display: flex;
    flex-direction: column;
}

.ps-item {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.ps-item:last-child {
    border-bottom: none;
}

.ps-item-label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-xs);
}

.ps-item-text {
    font-size: var(--font-size-small);
    color: var(--color-text-grey);
    line-height: 1.6;
}

.ps-col--problems .ps-item-label {
    color: var(--color-text-grey);
}

.ps-col--solutions .ps-item-label {
    color: var(--color-primary);
}

.ps-divider {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 300;
    align-self: center;
    line-height: 1;
    padding: 0 var(--spacing-xs);
}

@media (max-width: 768px) {
    .ps-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ps-divider {
        text-align: center;
        padding: var(--spacing-md) 0;
        font-size: 1.5rem;
        transform: rotate(90deg);
    }
}

/* =========================================
   NAV SCROLL PROGRESS BAR
   ========================================= */
.nav-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* =========================================
   MODAL
   ========================================= */
#modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    opacity: 0;
    /* visibility:hidden removes the closed modal (and its focusable controls)
       from the tab order so keyboard users can never land inside a hidden dialog. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

#modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-panel {
    background: var(--color-background);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.96);
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

#modal-overlay.is-open .modal-panel {
    transform: scale(1);
    opacity: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-header span {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-grey);
    cursor: pointer;
    padding: 4px 8px;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-text-main);
}

.modal-body {
    padding: var(--spacing-lg);
    min-height: 200px;
}

/* =========================================
   ROI CALCULATOR
   ========================================= */
.roi-calc {
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    color: var(--color-text-main);
}

.roi-calc-unit-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

.roi-calc-unit-btn {
    background: transparent;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: var(--font-family-base);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-grey);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.roi-calc-unit-btn + .roi-calc-unit-btn {
    border-left: 1px solid var(--color-border);
}

.roi-calc-unit-btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.roi-calc-section {
    margin-bottom: var(--spacing-lg);
}

.roi-calc-section:last-child {
    margin-bottom: 0;
}

.roi-calc-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.roi-calc-field {
    display: flex;
    align-items: center;
    min-height: 38px;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.roi-calc-field-label {
    flex: 1;
    color: var(--color-text-grey);
    padding-right: var(--spacing-xs);
}

.roi-calc-field-input {
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    padding: 5px 8px;
    text-align: right;
    width: 96px;
    background: var(--color-background);
    border-radius: var(--radius-none);
    transition: border-color var(--transition-fast);
    -moz-appearance: textfield;
}

.roi-calc-field-input::-webkit-outer-spin-button,
.roi-calc-field-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.roi-calc-field-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.roi-calc-field-input[readonly] {
    background: var(--color-surface);
    color: var(--color-text-grey);
    cursor: default;
    border-color: transparent;
}

.roi-calc-field-unit {
    color: var(--color-text-grey);
    width: 56px;
    white-space: nowrap;
}

.roi-calc-assumption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.roi-calc-assumption-val {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-main);
}

.roi-calc-table {
    width: 100%;
    border-collapse: collapse;
}

.roi-calc-table thead th {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 9px var(--spacing-sm);
    text-align: right;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.roi-calc-table thead th:first-child {
    text-align: left;
}

.roi-calc-table tbody td {
    padding: 9px var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    text-align: right;
    color: var(--color-text-grey);
}

.roi-calc-table tbody td:first-child {
    text-align: left;
    color: var(--color-text-main);
}

.roi-calc-table tbody tr:nth-child(even) td {
    background: var(--color-surface);
}

.roi-calc-total td {
    border-top: 2px solid var(--color-primary);
    border-bottom: none;
    background: var(--color-primary-card-hover);
    font-weight: 700;
    color: var(--color-text-main);
    padding: 11px var(--spacing-sm);
}

.roi-calc-total-val {
    color: var(--color-primary);
    font-size: 1rem;
    text-align: right;
}

.roi-calc-export {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-md);
}

.roi-calc-export-btn {
    gap: var(--spacing-xs);
    font-size: var(--font-size-small);
    padding: 12px 24px;
}

/* =========================================
   KONTAKT PAGE
   ========================================= */

.unternehmen-hero--compact {
    padding: 100px 0 var(--spacing-md);
}

.unternehmen-hero--compact .unternehmen-hero-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-xs);
}

.unternehmen-hero--compact .unternehmen-hero-sub {
    font-size: 1rem;
    margin-bottom: 0;
}

.kontakt-section {
    background-color: var(--color-background);
    padding-top: calc(var(--spacing-xxl) + 40px);
}

.kontakt-section-header {
    margin-bottom: var(--spacing-lg);
}

/* Page-title h1 kept at the visual size of the former h2 (no design change,
   just a correct single-h1 document outline for SEO/accessibility). */
.kontakt-section-header h1 {
    font-size: var(--font-size-h3);
}

/* 404: Fliesstext unter dem Seitentitel (nutzt sonst das kontakt-Layout mit) */
.notfound-text {
    max-width: 60ch;
    margin-top: var(--spacing-sm);
    color: var(--color-text-grey);
}

.kontakt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.kontakt-card {
    padding: var(--spacing-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.kontakt-card:hover {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.kontakt-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.kontakt-card-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-grey);
}

.kontakt-card-value {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-main);
    font-style: normal;
    line-height: 1.6;
}

.kontakt-card-link {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.kontakt-card-link:hover {
    color: var(--color-primary);
}

.kontakt-copy-btn {
    margin-top: var(--spacing-xs);
    background: none;
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-text-grey);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    align-self: flex-start;
}

.kontakt-copy-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.kontakt-copy-btn.is-copied {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .kontakt-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE NAVIGATION (HAMBURGER)
   Desktop: .nav-collapse is transparent (display:contents) so the logo,
   nav links and header actions lay out exactly as before. Below the
   breakpoint the collapse becomes a dropdown panel toggled by .nav-toggle.
   ========================================= */
.nav-collapse {
    display: contents;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-light);
    transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-base);
}

/* Hamburger bars pick up the dark ink once the header is on a light surface */
.is-scrolled .nav-toggle-bar,
.site-header--static .nav-toggle-bar {
    background-color: var(--color-text-main);
}

/* Morph to an X while open */
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    .nav-toggle {
        display: flex;
    }

    /* Solidify the bar so the open panel and toggle stay legible over the hero */
    .site-header.nav-open {
        background-color: var(--color-background);
        box-shadow: var(--shadow-sm);
    }
    .site-header.nav-open .nav-toggle-bar {
        background-color: var(--color-text-main);
    }
    .site-header.nav-open .logo-brand-blue {
        fill: #003981;
    }
    .site-header.nav-open .logo-brand-grey {
        fill: #777777;
    }

    .nav-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background-color: var(--color-background);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-xs) var(--container-padding) var(--spacing-md);
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }

    .site-header.nav-open .nav-collapse {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
    }

    .nav-links .nav-link {
        color: var(--color-text-main);
        font-size: 1rem;
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* The sliding underline is a pointer affordance — drop it in the stacked menu */
    .nav-links .nav-link::after {
        display: none;
    }

    .header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        width: 100%;
        margin-top: var(--spacing-md);
    }

    .lang-switch {
        color: var(--color-text-main);
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1rem;
    }

    .lang-switch a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-header {
        width: 100%;
        padding: 16px 24px;
    }
}

/* =========================================
   MOBILE RESPONSIVE FIXES (layout, touch targets, legible body copy)
   ========================================= */
@media (max-width: 768px) {
    /* Footer: three-column grid stacks to a single readable column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Footer/legal links become comfortable tap targets */
    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .social-link {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer-bottom {
        padding-top: var(--spacing-sm);
    }

    /* Body copy must stay >= 16px on mobile (labels/eyebrows keep their scale) */
    .ps-item-text,
    .trust-metric-subtext {
        font-size: 1rem;
    }

    /* Kontakt "Kopieren" button: comfortable tap target */
    .kontakt-copy-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Kontakt phone/email links: comfortable tap target */
    .kontakt-card-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Modal close button: comfortable 44px touch target on every device */
.modal-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* =========================================
   ROI CALCULATOR — MOBILE (runs inside the modal)
   ========================================= */
.roi-calc-table-wrap {
    width: 100%;
}

@media (max-width: 600px) {
    .modal-header {
        padding: var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-md);
    }

    /* Free up horizontal room so the unit column stops clipping */
    .roi-calc-field {
        gap: var(--spacing-xs);
    }

    .roi-calc-field-input {
        width: 76px;
    }

    .roi-calc-field-unit {
        width: auto;
        min-width: 34px;
    }

    /* The results table keeps its columns and scrolls horizontally instead of clipping */
    .roi-calc-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .roi-calc-table {
        min-width: 420px;
    }

    .roi-calc-export-btn {
        width: 100%;
    }
}

/* =========================================
   UNTERNEHMEN PAGE — styles moved to css/unternehmen.css
   ========================================= */

/* Impressum: first-block subsection headings are <h2> (valid heading outline,
   no skipped levels under the <h1>) but keep their original <h3> visual size. */
.legal-group h2 {
    font-size: 1.17em;
}

/* =========================================
   ACCESSIBILITY (site-wide)
   ========================================= */

/* Skip link — visually hidden until focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--color-primary);
    color: var(--color-text-light);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transform: translateY(-120%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--color-text-light);
    outline-offset: -4px;
}

/* Consistent, visible keyboard focus ring for interactive elements
   (keyboard users only — does not fire on mouse click) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* On the dark header/hero the primary-blue ring lacks contrast — use white there */
.site-header .logo-link:focus-visible,
.site-header .nav-link:focus-visible,
.site-header .btn-header:focus-visible,
.site-header .lang-switch a:focus-visible,
.site-header .nav-toggle:focus-visible {
    outline-color: var(--color-text-light);
}
.site-header.is-scrolled .logo-link:focus-visible,
.site-header.is-scrolled .nav-link:focus-visible,
.site-header.is-scrolled .lang-switch a:focus-visible,
.site-header.is-scrolled .nav-toggle:focus-visible {
    outline-color: var(--color-primary);
}

/* Dasselbe fuer die Hero-Buttons: auf dem abgedunkelten Video kommt der
   primaerblaue Ring auf rund 1.7:1 und ist praktisch unsichtbar. */
.hero .btn:focus-visible {
    outline-color: var(--color-text-light);
}

/* Give the ROI number inputs a visible keyboard focus ring
   (the border-only :focus state alone is too subtle for keyboard users) */
.roi-calc-field-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* =========================================
   REDUCED MOTION (site-wide)
   Neutralises page-level animations. Component-specific rules for the
   system page live in css/system.css; count-up is guarded in js/main.js.
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .fade-up {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Freeze the decorative hero video on its poster frame */
    .hero-video {
        display: none !important;
    }

}