/* =========================================================
   INGenium EMSR – Leistungs- und ECAD-Unterseiten
   Datei: assets/css/service-page.css
   Stand: 15.09.2026
   ========================================================= */


/* ---------------------------------------------------------
   Variablen für Unterseiten
   --------------------------------------------------------- */

.service-page {
    --service-dark: #102a33;
    --service-dark-soft: #183b45;
    --service-accent: #e56f2d;
    --service-accent-hover: #c95820;
    --service-blue: #185fd1;
    --service-blue-soft: #e8f0ff;
    --service-background: #f4f7f8;
    --service-surface: #ffffff;
    --service-text: #1b2c33;
    --service-muted: #5e6f76;
    --service-border: #dce4e7;

    --service-shadow:
        0 18px 45px rgba(16, 42, 51, 0.1);

    --service-shadow-small:
        0 10px 30px rgba(16, 42, 51, 0.06);

    --service-radius: 18px;
}


/* ---------------------------------------------------------
   Allgemeiner Seitenaufbau
   --------------------------------------------------------- */

.service-page {
    color: var(--service-text);
    background-color: var(--service-surface);
}

.service-page *,
.service-page *::before,
.service-page *::after {
    box-sizing: border-box;
}

.service-page main {
    overflow: hidden;
}

.service-page section {
    position: relative;
}

.service-page .section {
    padding: clamp(4rem, 7vw, 7rem) 0;
}

.service-page .section--light {
    background-color: var(--service-background);
}

.service-page .section--white {
    background-color: var(--service-surface);
}

.service-page .section--dark {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--service-dark) 0%,
            var(--service-dark-soft) 100%
        );
}

.service-page .section-header {
    max-width: 780px;
    margin-bottom: 2.75rem;
}

.service-page .section-header--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.service-page .section-kicker,
.service-page .eyebrow {
    display: inline-block;

    margin: 0 0 0.9rem;

    color: var(--service-accent);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.service-page .section-title {
    margin: 0 0 1.25rem;

    color: var(--service-dark);

    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.12;
}

.service-page .section--dark .section-title {
    color: #ffffff;
}

.service-page .section-intro,
.service-page .section-lead {
    margin: 0;

    color: var(--service-muted);

    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.75;
}

.service-page .section--dark .section-intro,
.service-page .section--dark .section-lead {
    color: rgba(255, 255, 255, 0.78);
}


/* ---------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------- */

.service-page .breadcrumbs {
    padding: 1rem 0;

    border-bottom: 1px solid var(--service-border);
    background-color: #ffffff;
}

.service-page .breadcrumbs ol,
.service-page .breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.service-page .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    color: var(--service-muted);

    font-size: 0.9rem;
}

.service-page .breadcrumbs li:not(:last-child)::after {
    content: "/";

    color: #a5b0b5;
}

.service-page .breadcrumbs a {
    color: var(--service-dark);
    text-decoration: none;

    transition: color 0.2s ease;
}

.service-page .breadcrumbs a:hover {
    color: var(--service-accent);
}

.service-page .breadcrumbs a:focus-visible {
    outline: 3px solid rgba(229, 111, 45, 0.28);
    outline-offset: 4px;
    border-radius: 3px;
}

.service-page .breadcrumbs [aria-current="page"] {
    color: var(--service-muted);
}


/* ---------------------------------------------------------
   Hero-Bereich
   --------------------------------------------------------- */

.service-page .service-hero {
    position: relative;

    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 640px;
    padding: clamp(5rem, 10vw, 8.5rem) 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(229, 111, 45, 0.25),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #0d252e 0%,
            #153843 58%,
            #1c4854 100%
        );
}

.service-page .service-hero::before {
    position: absolute;
    z-index: -2;
    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(10, 31, 39, 0.96) 0%,
            rgba(10, 31, 39, 0.84) 45%,
            rgba(10, 31, 39, 0.42) 100%
        );
}

.service-page .service-hero::after {
    position: absolute;
    z-index: -1;
    top: -180px;
    right: -180px;

    width: 520px;
    height: 520px;

    content: "";

    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.025),
        0 0 0 160px rgba(255, 255, 255, 0.018);
}

.service-page .service-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    align-items: center;

    gap: clamp(2.5rem, 6vw, 6rem);
}

.service-page .service-hero__content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.service-page .service-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin-bottom: 1.25rem;

    color: #ffad78;

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.service-page .service-hero__eyebrow::before {
    width: 42px;
    height: 2px;

    content: "";

    background-color: var(--service-accent);
}

.service-page .service-hero h1 {
    max-width: 950px;
    margin: 0 0 1.5rem;

    color: #ffffff;

    font-size: clamp(2.6rem, 6vw, 5.2rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.service-page .service-hero__lead,
.service-page .service-hero .lead {
    max-width: 760px;
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.72;
}

.service-page .service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 2rem;
}

.service-page .service-hero__panel {
    padding: clamp(1.75rem, 3vw, 2.5rem);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--service-radius);

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.18);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.service-page .service-hero__panel h2,
.service-page .service-hero__panel h3 {
    margin-top: 0;
    color: #ffffff;
}

.service-page .service-hero__panel ul {
    display: grid;
    gap: 0.85rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.service-page .service-hero__panel li {
    position: relative;

    padding-left: 1.65rem;

    color: rgba(255, 255, 255, 0.84);

    line-height: 1.55;
}

.service-page .service-hero__panel li::before {
    position: absolute;
    top: 0.35rem;
    left: 0;

    width: 0.75rem;
    height: 0.75rem;

    content: "";

    border-radius: 50%;

    background-color: var(--service-accent);

    box-shadow:
        0 0 0 5px rgba(229, 111, 45, 0.18);
}


/* ---------------------------------------------------------
   Expertise-Leiste
   --------------------------------------------------------- */

.service-page .expertise-bar {
    position: relative;
    z-index: 3;

    border-bottom: 1px solid var(--service-border);

    background-color: #ffffff;

    box-shadow:
        0 10px 30px rgba(16, 42, 51, 0.06);
}

.service-page .expertise-bar__grid,
.service-page .expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-page .expertise-bar__item,
.service-page .expertise-item {
    padding: 1.5rem;

    text-align: center;

    border-right: 1px solid var(--service-border);
}

.service-page .expertise-bar__item:last-child,
.service-page .expertise-item:last-child {
    border-right: 0;
}

.service-page .expertise-bar strong,
.service-page .expertise-item strong {
    display: block;

    color: var(--service-dark);

    font-size: 1rem;
}

.service-page .expertise-bar span,
.service-page .expertise-item span {
    display: block;

    margin-top: 0.3rem;

    color: var(--service-muted);

    font-size: 0.88rem;
}


/* ---------------------------------------------------------
   Einleitung und Informationspanel
   --------------------------------------------------------- */

.service-page .service-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    align-items: start;

    gap: clamp(2.5rem, 6vw, 6rem);
}

.service-page .service-intro__content {
    min-width: 0;
}

.service-page .service-intro__content > :first-child {
    margin-top: 0;
}

.service-page .service-intro__content p {
    color: var(--service-muted);

    font-size: 1.05rem;
    line-height: 1.8;
}

.service-page .info-panel {
    position: relative;

    min-width: 0;
    padding: clamp(1.75rem, 4vw, 2.75rem);

    overflow: hidden;

    border: 1px solid var(--service-border);
    border-radius: var(--service-radius);

    background-color: var(--service-background);

    box-shadow: var(--service-shadow);
}

.service-page .info-panel::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 6px;
    height: 100%;

    content: "";

    background-color: var(--service-accent);
}

.service-page .info-panel h2,
.service-page .info-panel h3 {
    margin: 0 0 1.25rem;

    color: var(--service-dark);
}

.service-page .info-panel ul {
    display: grid;
    gap: 0.8rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.service-page .info-panel li {
    position: relative;

    padding-left: 1.65rem;

    color: var(--service-muted);

    line-height: 1.55;
}

.service-page .info-panel li::before {
    position: absolute;
    top: 0.45rem;
    left: 0;

    width: 0.7rem;
    height: 0.7rem;

    content: "";

    border: 2px solid var(--service-accent);
    border-radius: 50%;
}


/* ---------------------------------------------------------
   Leistungs- und Inhaltskarten
   --------------------------------------------------------- */

.service-page .service-grid,
.service-page .card-grid,
.service-page .benefit-grid,
.service-page .industry-grid,
.service-page .systems-grid,
.service-page .documents-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.5rem;
}

.service-page .service-card,
.service-page .content-card,
.service-page .benefit-card,
.service-page .industry-card,
.service-page .system-card,
.service-page .document-card {
    position: relative;

    min-width: 0;
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);

    overflow: hidden;

    border: 1px solid var(--service-border);
    border-radius: var(--service-radius);

    background-color: #ffffff;

    box-shadow:
        0 10px 30px rgba(16, 42, 51, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.service-page .service-card:hover,
.service-page .content-card:hover,
.service-page .benefit-card:hover,
.service-page .industry-card:hover,
.service-page .system-card:hover,
.service-page .document-card:hover {
    border-color: rgba(229, 111, 45, 0.45);

    box-shadow: var(--service-shadow);

    transform: translateY(-5px);
}

.service-page .service-card::before,
.service-page .content-card::before,
.service-page .benefit-card::before,
.service-page .industry-card::before,
.service-page .system-card::before,
.service-page .document-card::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--service-accent),
            #f5a36f
        );
}

.service-page .service-card h3,
.service-page .content-card h3,
.service-page .benefit-card h3,
.service-page .industry-card h3,
.service-page .system-card h3,
.service-page .document-card h3 {
    margin: 0 0 1rem;

    color: var(--service-dark);

    font-size: 1.25rem;
    line-height: 1.3;
}

.service-page .service-card p,
.service-page .content-card p,
.service-page .benefit-card p,
.service-page .industry-card p,
.service-page .system-card p,
.service-page .document-card p {
    margin: 0;

    color: var(--service-muted);

    line-height: 1.7;
}

.service-page .service-card ul,
.service-page .content-card ul,
.service-page .benefit-card ul,
.service-page .industry-card ul,
.service-page .system-card ul,
.service-page .document-card ul {
    display: grid;
    gap: 0.65rem;

    margin: 1.25rem 0 0;
    padding: 0;

    list-style: none;
}

.service-page .service-card li,
.service-page .content-card li,
.service-page .benefit-card li,
.service-page .industry-card li,
.service-page .system-card li,
.service-page .document-card li {
    position: relative;

    padding-left: 1.4rem;

    color: var(--service-muted);

    line-height: 1.5;
}

.service-page .service-card li::before,
.service-page .content-card li::before,
.service-page .benefit-card li::before,
.service-page .industry-card li::before,
.service-page .system-card li::before,
.service-page .document-card li::before {
    position: absolute;
    top: 0.55rem;
    left: 0;

    width: 0.45rem;
    height: 0.45rem;

    content: "";

    border-radius: 50%;

    background-color: var(--service-accent);
}


/* ---------------------------------------------------------
   Engineering-Kreislauf
   Planung → Daten → Prüfung → Planung
   --------------------------------------------------------- */

.service-page .technical-visual.engineering-cycle {
    position: relative;

    isolation: isolate;

    display: block;

    width: 100%;
    min-width: 0;
    min-height: 520px;

    overflow: hidden;

    border: 1px solid var(--service-border);
    border-radius: var(--service-radius);

    background-image:
        linear-gradient(
            rgba(16, 42, 51, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 42, 51, 0.035) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at center,
            rgba(24, 95, 209, 0.1) 0,
            rgba(24, 95, 209, 0.035) 28%,
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #edf2ef 100%
        );

    background-size:
        32px 32px,
        32px 32px,
        100% 100%,
        100% 100%;

    box-shadow: var(--service-shadow);
}

.service-page .technical-visual.engineering-cycle::before,
.service-page .technical-visual.engineering-cycle::after {
    display: none !important;
    content: none !important;
}


/* Verbindungslinien */

.service-page .engineering-cycle__lines {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}

.service-page .engineering-cycle__path {
    fill: none;

    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0.82;
}

.service-page .engineering-cycle__path--blue {
    stroke: var(--service-blue);
}

.service-page .engineering-cycle__path--orange {
    stroke: var(--service-accent);
}

.service-page .engineering-cycle__inner-line {
    fill: none;

    stroke: rgba(16, 42, 51, 0.25);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
}


/* Prozessblöcke */

.service-page .engineering-cycle__node {
    position: absolute;
    z-index: 3;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr);

    align-items: center;
    gap: 13px;

    width: 190px;
    min-width: 0;
    min-height: 96px;
    padding: 17px;

    color: var(--service-text);

    border: 1px solid rgba(16, 42, 51, 0.14);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 12px 30px rgba(8, 43, 45, 0.13);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.service-page .engineering-cycle__node:hover {
    border-color: rgba(24, 95, 209, 0.42);

    box-shadow:
        0 18px 38px rgba(8, 43, 45, 0.17);
}


/* 1 – Planung oben */

.service-page .engineering-cycle__node--planning {
    top: 34px;
    left: 50%;

    transform: translateX(-50%);
}

.service-page .engineering-cycle__node--planning:hover {
    transform:
        translateX(-50%)
        translateY(-4px);
}


/* 2 – Daten unten rechts */

.service-page .engineering-cycle__node--data {
    right: 28px;
    bottom: 62px;
    left: auto;
}

.service-page .engineering-cycle__node--data:hover {
    transform: translateY(-4px);
}


/* 3 – Prüfung unten links */

.service-page .engineering-cycle__node--check {
    right: auto;
    bottom: 62px;
    left: 28px;
}

.service-page .engineering-cycle__node--check:hover {
    transform: translateY(-4px);
}


/* Zahlenfelder */

.service-page .engineering-cycle__node-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: #ffffff;
    background-color: var(--service-dark);

    border-radius: 12px;

    font-size: 1rem;
    font-weight: 850;
    line-height: 1;

    box-shadow:
        0 7px 16px rgba(16, 42, 51, 0.2);
}

.service-page
.engineering-cycle__node--planning
.engineering-cycle__node-icon {
    background:
        linear-gradient(
            145deg,
            var(--service-dark-soft),
            var(--service-dark)
        );
}

.service-page
.engineering-cycle__node--data
.engineering-cycle__node-icon {
    background:
        linear-gradient(
            145deg,
            #2c76eb,
            var(--service-blue)
        );
}

.service-page
.engineering-cycle__node--check
.engineering-cycle__node-icon {
    background:
        linear-gradient(
            145deg,
            #f28a4c,
            var(--service-accent)
        );
}


/* Texte in den Prozessblöcken */

.service-page .engineering-cycle__node-text {
    min-width: 0;
}

.service-page .engineering-cycle__node-text strong {
    display: block;

    margin: 0 0 4px;

    color: var(--service-dark);

    font-size: 1rem;
    line-height: 1.2;
}

.service-page .engineering-cycle__node-text span {
    display: block;

    color: var(--service-muted);

    font-size: 0.72rem;
    line-height: 1.42;

    overflow-wrap: anywhere;
}


/* Zentrales Ergebnis */

.service-page .engineering-cycle__center {
    position: absolute;
    z-index: 4;
    top: 51%;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 174px;
    height: 174px;
    padding: 18px;

    color: rgba(255, 255, 255, 0.75);

    border: 8px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--service-dark-soft),
            var(--service-dark)
        );

    box-shadow:
        0 22px 45px rgba(8, 43, 45, 0.25),
        0 0 0 1px rgba(16, 42, 51, 0.08);

    text-align: center;

    transform:
        translate(-50%, -50%);
}

.service-page .engineering-cycle__center::before {
    position: absolute;
    inset: -16px;

    content: "";

    pointer-events: none;

    border: 1px dashed rgba(24, 95, 209, 0.3);
    border-radius: 50%;
}

.service-page .engineering-cycle__center span {
    display: block;

    margin-bottom: 5px;

    color: #a9c7ff;

    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.service-page .engineering-cycle__center strong {
    display: block;

    color: #ffffff;

    font-size: 1.05rem;
    line-height: 1.2;
}

.service-page .engineering-cycle__center small {
    display: block;

    margin-top: 8px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.58rem;
    line-height: 1.35;
}


/* Untere Beschriftung */

.service-page .engineering-cycle__caption {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 18px;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    color: var(--service-muted);

    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.service-page .engineering-cycle__caption span {
    width: 24px;
    height: 1px;

    background-color: var(--service-accent);
}


/* ---------------------------------------------------------
   Prozess und Projektablauf
   --------------------------------------------------------- */

.service-page .process-grid,
.service-page .workflow-grid,
.service-page .process-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1.25rem;

    counter-reset: process-step;
}

.service-page .process-step,
.service-page .workflow-step {
    position: relative;

    min-width: 0;
    min-height: 230px;
    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--service-radius);

    background-color: rgba(255, 255, 255, 0.07);

    counter-increment: process-step;
}

.service-page .section--light .process-step,
.service-page .section--white .process-step,
.service-page .section--light .workflow-step,
.service-page .section--white .workflow-step {
    border-color: var(--service-border);

    background-color: #ffffff;

    box-shadow:
        0 10px 30px rgba(16, 42, 51, 0.06);
}

.service-page .process-step::before,
.service-page .workflow-step::before {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1.25rem;

    content:
        counter(process-step, decimal-leading-zero);

    color: #ffffff;

    font-weight: 800;

    border-radius: 50%;

    background-color: var(--service-accent);
}

.service-page .process-step h3,
.service-page .workflow-step h3 {
    margin: 0 0 0.75rem;

    color: #ffffff;

    font-size: 1.2rem;
}

.service-page .section--light .process-step h3,
.service-page .section--white .process-step h3,
.service-page .section--light .workflow-step h3,
.service-page .section--white .workflow-step h3 {
    color: var(--service-dark);
}

.service-page .process-step p,
.service-page .workflow-step p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    line-height: 1.65;
}

.service-page .section--light .process-step p,
.service-page .section--white .process-step p,
.service-page .section--light .workflow-step p,
.service-page .section--white .workflow-step p {
    color: var(--service-muted);
}


/* ---------------------------------------------------------
   Checklisten
   --------------------------------------------------------- */

.service-page .check-list,
.service-page .feature-list {
    display: grid;
    gap: 0.8rem;

    margin: 1.5rem 0 0;
    padding: 0;

    list-style: none;
}

.service-page .check-list li,
.service-page .feature-list li {
    position: relative;

    padding-left: 2rem;

    color: var(--service-muted);

    line-height: 1.6;
}

.service-page .check-list li::before,
.service-page .feature-list li::before {
    position: absolute;
    top: 0.08rem;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.3rem;
    height: 1.3rem;

    content: "✓";

    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 800;

    border-radius: 50%;

    background-color: var(--service-accent);
}


/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.service-page .faq-list {
    display: grid;
    gap: 1rem;

    max-width: 900px;
    margin: 0 auto;
}

.service-page .faq-list details,
.service-page .faq-item {
    overflow: hidden;

    border: 1px solid var(--service-border);
    border-radius: 14px;

    background-color: #ffffff;

    box-shadow:
        0 8px 25px rgba(16, 42, 51, 0.05);
}

.service-page .faq-list summary,
.service-page .faq-item summary {
    position: relative;

    padding:
        1.4rem
        3.5rem
        1.4rem
        1.5rem;

    color: var(--service-dark);

    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.4;

    cursor: pointer;
    list-style: none;
}

.service-page .faq-list summary::-webkit-details-marker,
.service-page .faq-item summary::-webkit-details-marker {
    display: none;
}

.service-page .faq-list summary::after,
.service-page .faq-item summary::after {
    position: absolute;
    top: 50%;
    right: 1.4rem;

    content: "+";

    color: var(--service-accent);

    font-size: 1.7rem;
    font-weight: 400;

    transform: translateY(-50%);
}

.service-page .faq-list details[open] summary::after,
.service-page .faq-item[open] summary::after {
    content: "−";
}

.service-page .faq-list details[open] summary,
.service-page .faq-item[open] summary {
    border-bottom: 1px solid var(--service-border);
}

.service-page .faq-list summary:focus-visible,
.service-page .faq-item summary:focus-visible {
    outline: 3px solid rgba(229, 111, 45, 0.3);
    outline-offset: -3px;
}

.service-page .faq-answer,
.service-page .faq-list details > div {
    padding: 1.25rem 1.5rem 1.5rem;
}

.service-page .faq-answer p,
.service-page .faq-list details > div p {
    margin: 0;

    color: var(--service-muted);

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Kontakt- und CTA-Bereich
   --------------------------------------------------------- */

.service-page .service-cta,
.service-page .contact-cta,
.service-page .cta-section {
    position: relative;

    overflow: hidden;

    padding: clamp(4rem, 8vw, 7rem) 0;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            var(--service-dark) 0%,
            var(--service-dark-soft) 100%
        );
}

.service-page .service-cta::after,
.service-page .contact-cta::after,
.service-page .cta-section::after {
    position: absolute;
    top: -180px;
    right: -120px;

    width: 430px;
    height: 430px;

    content: "";

    pointer-events: none;

    border: 85px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}

.service-page .cta-grid,
.service-page .contact-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    align-items: center;

    gap: 3rem;
}

.service-page .service-cta h2,
.service-page .contact-cta h2,
.service-page .cta-section h2 {
    margin: 0 0 1rem;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.12;
}

.service-page .service-cta p,
.service-page .contact-cta p,
.service-page .cta-section p {
    max-width: 760px;
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 1.1rem;
    line-height: 1.75;
}

.service-page .cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.service-page .button,
.service-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0.8rem 1.35rem;

    color: #ffffff;

    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    border: 2px solid transparent;
    border-radius: 8px;

    background-color: var(--service-accent);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.service-page .button:hover,
.service-page .btn:hover {
    color: #ffffff;

    background-color: var(--service-accent-hover);

    transform: translateY(-2px);
}

.service-page .button:focus-visible,
.service-page .btn:focus-visible {
    outline: 3px solid rgba(229, 111, 45, 0.34);
    outline-offset: 4px;
}

.service-page .button--secondary,
.service-page .btn--secondary {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.5);

    background-color: transparent;
}

.service-page .button--secondary:hover,
.service-page .btn--secondary:hover {
    color: var(--service-dark);

    border-color: #ffffff;

    background-color: #ffffff;
}


/* ---------------------------------------------------------
   Hervorgehobene Kennzahlen
   --------------------------------------------------------- */

.service-page .stats-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.5rem;
}

.service-page .stat {
    min-width: 0;
    padding: 2rem;

    text-align: center;

    border: 1px solid var(--service-border);
    border-radius: var(--service-radius);

    background-color: #ffffff;
}

.service-page .stat strong {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--service-accent);

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.service-page .stat span {
    color: var(--service-muted);
}


/* ---------------------------------------------------------
   Responsive: kleinere Desktop- und Tabletansicht
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .service-page .service-hero__grid,
    .service-page .service-intro,
    .service-page .cta-grid,
    .service-page .contact-grid {
        grid-template-columns: 1fr;
    }

    .service-page .service-hero {
        min-height: auto;
    }

    .service-page .service-hero__panel {
        max-width: 700px;
    }

    .service-page .service-grid,
    .service-page .card-grid,
    .service-page .benefit-grid,
    .service-page .industry-grid,
    .service-page .systems-grid,
    .service-page .documents-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-page .process-grid,
    .service-page .workflow-grid,
    .service-page .process-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-page .cta-actions {
        justify-content: flex-start;
    }

    .service-page .technical-visual.engineering-cycle {
        max-width: 680px;
        min-height: 520px;

        margin-inline: auto;
    }

    .service-page .engineering-cycle__node--data {
        right: 44px;
        left: auto;
    }

    .service-page .engineering-cycle__node--check {
        right: auto;
        left: 44px;
    }
}


/* ---------------------------------------------------------
   Responsive: Tablet und Smartphone
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .service-page .section {
        padding: 4rem 0;
    }

    .service-page .service-hero {
        padding: 4.5rem 0;
    }

    .service-page .service-hero h1 {
        font-size:
            clamp(2.3rem, 11vw, 3.6rem);
    }

    .service-page .expertise-bar__grid,
    .service-page .expertise-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-page .expertise-bar__item,
    .service-page .expertise-item {
        border-bottom:
            1px solid var(--service-border);
    }

    .service-page .expertise-bar__item:nth-child(2n),
    .service-page .expertise-item:nth-child(2n) {
        border-right: 0;
    }

    .service-page .service-grid,
    .service-page .card-grid,
    .service-page .benefit-grid,
    .service-page .industry-grid,
    .service-page .systems-grid,
    .service-page .documents-grid,
    .service-page .process-grid,
    .service-page .workflow-grid,
    .service-page .process-steps,
    .service-page .stats-grid {
        grid-template-columns: 1fr;
    }

    .service-page .process-step,
    .service-page .workflow-step {
        min-height: auto;
    }
}


/* ---------------------------------------------------------
   Engineering-Kreislauf auf Smartphones
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .service-page .technical-visual.engineering-cycle {
        display: flex;
        flex-direction: column;
        gap: 36px;

        min-height: 0;
        padding: 30px 22px 25px;

        background-image:
            linear-gradient(
                rgba(16, 42, 51, 0.035) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(16, 42, 51, 0.035) 1px,
                transparent 1px
            ),
            linear-gradient(
                145deg,
                #ffffff,
                #edf2ef
            );

        background-size:
            28px 28px,
            28px 28px,
            100% 100%;
    }

    .service-page .engineering-cycle__lines {
        display: none;
    }

    .service-page .engineering-cycle__node,
    .service-page .engineering-cycle__center,
    .service-page .engineering-cycle__caption {
        position: relative;
        inset: auto;

        width: 100%;
        max-width: none;

        margin: 0;

        transform: none;
    }

    .service-page .engineering-cycle__node {
        min-height: 90px;
    }

    .service-page .engineering-cycle__node:hover,
    .service-page
    .engineering-cycle__node--planning:hover {
        transform: translateY(-3px);
    }

    .service-page
    .engineering-cycle__node:not(
        .engineering-cycle__node--check
    )::after {
        position: absolute;
        right: 0;
        bottom: -29px;
        left: 0;

        width: 26px;
        height: 26px;

        margin-inline: auto;

        content: "↓";

        color: var(--service-accent);

        font-size: 1.2rem;
        font-weight: 850;
        line-height: 1;
        text-align: center;
    }

    .service-page .engineering-cycle__center {
        width: 190px;
        height: 190px;

        margin: 6px auto 0;

        border-radius: 50%;
    }

    .service-page .engineering-cycle__center::before {
        inset: -12px;
    }

    .service-page .engineering-cycle__caption {
        justify-content: center;

        margin-top: 4px;
    }
}


/* ---------------------------------------------------------
   Kleine Smartphones
   --------------------------------------------------------- */

@media (max-width: 520px) {
    .service-page .breadcrumbs {
        display: none;
    }

    .service-page .service-hero__actions,
    .service-page .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .service-page .button,
    .service-page .btn {
        width: 100%;
    }

    .service-page .service-card,
    .service-page .content-card,
    .service-page .benefit-card,
    .service-page .industry-card,
    .service-page .system-card,
    .service-page .document-card,
    .service-page .info-panel {
        border-radius: 14px;
    }

    .service-page .engineering-cycle__node {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        padding: 15px;
    }

    .service-page .engineering-cycle__node-icon {
        width: 44px;
        height: 44px;
    }
}


/* ---------------------------------------------------------
   Barrierefreiheit
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .service-page *,
    .service-page *::before,
    .service-page *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   EMSR-ENGINEERING: SCHWERPUNKTE IM HERO
   ========================================================= */

.service-focus {
    display: grid !important;
    grid-template-columns:
        minmax(150px, auto)
        minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 24px !important;

    width: 100% !important;
    max-width: 920px !important;

    margin-top: 34px !important;
    padding: 24px 28px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 16px !important;

    box-shadow:
        0 16px 34px rgba(5, 34, 36, 0.16) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Überschrift links */

.service-focus__heading {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;

    min-width: 0 !important;

    color: #ffffff !important;

    font-size: 0.76rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}


/* Kleines Plus-Symbol */

.service-focus__icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;

    width: 30px !important;
    height: 30px !important;

    color: #ffffff !important;
    background: #f37a2b !important;

    border-radius: 8px !important;

    font-size: 1.05rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}


/* Schlagwörter */

.service-focus__items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Einzelne Schwerpunkte */

.service-focus__item {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 38px !important;
    padding: 9px 14px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;

    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    white-space: normal !important;
}


/* Hover nur als dezenter Effekt */

.service-focus__item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.17) !important;

    border-color: rgba(255, 255, 255, 0.38) !important;
}


/* Tablet */

@media (max-width: 850px) {
    .service-focus {
        grid-template-columns: 1fr !important;
        gap: 17px !important;

        padding: 22px !important;
    }
}


/* Smartphone */

@media (max-width: 580px) {
    .service-focus {
        margin-top: 27px !important;
        padding: 20px 18px !important;

        border-radius: 14px !important;
    }

    .service-focus__items {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 8px !important;
    }

    .service-focus__item {
        width: 100% !important;

        border-radius: 9px !important;
    }
}
/* =========================================================
   EMSR-ENGINEERING: HELLE BRANCHENKACHELN
   ========================================================= */

/* Section erhält einen hellen, neutralen Hintergrund */

.emsr-industries {
    position: relative;

    color: #173f41 !important;
    background:
        linear-gradient(
            180deg,
            #f5f8f6 0%,
            #edf3f0 100%
        ) !important;

    overflow: hidden;
}


/* Dezente Hintergrundgestaltung */

.emsr-industries::before {
    position: absolute;
    top: -180px;
    right: -170px;

    width: 460px;
    height: 460px;

    content: "";

    background:
        radial-gradient(
            circle,
            rgba(24, 95, 209, 0.08) 0%,
            rgba(24, 95, 209, 0) 68%
        );

    pointer-events: none;
}


/* Eyebrow „Branchen“ */

.emsr-industries .eyebrow {
    position: relative;
    z-index: 2;

    color: #185fd1 !important;
}


/* Hauptüberschrift */

.emsr-industries h2 {
    position: relative;
    z-index: 2;

    color: #103b3d !important;
}


/* Einleitungstext */

.emsr-industries .section-intro,
.emsr-industries .section-lead,
.emsr-industries > .container > p {
    position: relative;
    z-index: 2;

    color: #526a6b !important;
}


/* Kartenraster */

.emsr-industries .industries-grid,
.emsr-industries .industry-grid,
.emsr-industries .cards-grid {
    position: relative;
    z-index: 2;

    align-items: stretch !important;
    gap: 22px !important;
}


/* Helle Branchenkarten */

.emsr-industries .emsr-industry-card {
    position: relative;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    min-height: 285px !important;

    padding: 29px 27px 27px !important;

    color: #173f41 !important;
    background: #ffffff !important;

    border: 1px solid #d6e0dc !important;
    border-radius: 17px !important;

    box-shadow:
        0 12px 30px rgba(16, 59, 61, 0.08) !important;

    overflow: hidden;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}


/* Farbliche Linie am oberen Rand */

.emsr-industries .emsr-industry-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    content: "";

    background:
        linear-gradient(
            90deg,
            #185fd1 0%,
            #185fd1 68%,
            #f37a2b 68%,
            #f37a2b 100%
        );
}


/* Keine dunklen alten Overlays */

.emsr-industries .emsr-industry-card::after {
    display: none !important;
    content: none !important;
}


/* Hover */

.emsr-industries .emsr-industry-card:hover {
    background: #ffffff !important;

    border-color: rgba(24, 95, 209, 0.4) !important;

    box-shadow:
        0 18px 42px rgba(16, 59, 61, 0.13) !important;

    transform: translateY(-5px);
}


/* Überschrift der Kachel */

.emsr-industries .emsr-industry-card h3 {
    color: #103b3d !important;

    font-size: 1.2rem !important;
    line-height: 1.28 !important;
}


/* Fließtext der Kachel */

.emsr-industries .emsr-industry-card p {
    color: #526a6b !important;

    font-size: 0.92rem !important;
    line-height: 1.65 !important;
}


/* Listen innerhalb der Kacheln */

.emsr-industries .emsr-industry-card ul {
    margin: 18px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.emsr-industries .emsr-industry-card li {
    position: relative;

    margin: 0 0 9px !important;
    padding-left: 19px !important;

    color: #526a6b !important;

    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}

.emsr-industries .emsr-industry-card li::before {
    position: absolute;
    top: 0.62em;
    left: 0;

    width: 6px;
    height: 6px;

    content: "";

    background: #f37a2b;

    border-radius: 50%;

    transform: translateY(-50%);
}


/* Icons innerhalb der Kacheln */

.emsr-industries .emsr-industry-card
.industry-card__icon,
.emsr-industries .emsr-industry-card
.card-icon,
.emsr-industries .emsr-industry-card
.service-card__icon {
    display: grid !important;
    place-items: center !important;

    width: 48px !important;
    height: 48px !important;
    margin-bottom: 20px !important;

    color: #185fd1 !important;
    background: #eaf1ff !important;

    border: 1px solid #cfddf8 !important;
    border-radius: 13px !important;

    font-size: 0.75rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.05em !important;
}


/* Links innerhalb der Kacheln */

.emsr-industries .emsr-industry-card a {
    color: #185fd1 !important;
}

.emsr-industries .emsr-industry-card a:hover {
    color: #114ba7 !important;
}


/* Tablet */

@media (max-width: 900px) {
    .emsr-industries .emsr-industry-card {
        min-height: 260px !important;
        padding: 26px 24px !important;
    }
}


/* Smartphone */

@media (max-width: 600px) {
    .emsr-industries .industries-grid,
    .emsr-industries .industry-grid,
    .emsr-industries .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .emsr-industries .emsr-industry-card {
        min-height: 0 !important;
        padding: 25px 22px !important;

        border-radius: 14px !important;
    }
}