/* =========================================================
   PROJEKTE – FINALER REFERENZSTAND
   4 Hauptprojekte + Projektübersicht
   ========================================================= */

:root {

    --projects-navy: #092a5e;

    --projects-blue: #064ed8;

    --projects-text: #142844;

    --projects-muted: #52667c;

    --projects-line: #ceddf0;

    --projects-soft: #f5f8fc;

}


/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

.projects-page {

    padding-bottom: 42px;

}


.projects-page .container {

    width: min(1460px, calc(100% - 72px));

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   HERO
   ========================================================= */

.projects-hero {

    padding: 30px 0 18px;

}


.projects-hero-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0;

    align-items: center;

}


.section-label {

    margin: 0;

    color: var(--projects-blue);

    font-size: 0.86rem;

    font-weight: 800;

    letter-spacing: 0.015em;

    text-transform: uppercase;

}


.section-label-line {

    width: 32px;

    height: 2px;

    margin: 10px 0 14px;

    background: var(--projects-blue);

}


.projects-intro h1 {

    margin: 0;

    color: var(--projects-navy);

    font-size:
        clamp(
            2.15rem,
            2.85vw,
            2.95rem
        );

    line-height: 1.05;

    letter-spacing: -0.035em;

    white-space: nowrap;

}


.projects-lead {

    max-width: 650px;

    margin: 18px 0 0;

    color: var(--projects-text);

    font-size: 0.94rem;

    line-height: 1.65;

}


/* =========================================================
   BLUEPRINT
   ========================================================= */

.projects-visual {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    min-height: 165px;

}


.blueprint-card {

    width: 100%;

    max-width: 650px;

    height: 165px;

    padding: 0;

    overflow: visible;

    color: #195cc4;

    background: transparent;

    border: 0;

    border-radius: 0;

    opacity: 0.42;

}


.blueprint-svg {

    width: 100%;

    height: 100%;

    display: block;

    transform: scale(1.18);

    transform-origin: center;

}


/* =========================================================
   PROJEKTKARTEN
   ========================================================= */

.projects-cards-section {

    padding: 4px 0 18px;

}


.projects-cards {

    display: grid;

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

    gap: 20px;

    align-items: stretch;

}


.project-card {

    min-width: 0;

    min-height: 420px;

    padding: 20px 20px 18px;

    background: #ffffff;

    border: 1px solid var(--projects-line);

    border-radius: 12px;

    box-shadow:
        0 3px 12px
        rgba(13, 47, 99, 0.025);

}


/* =========================================================
   FIRMENKOPF
   ========================================================= */

.project-brand {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 68px;

}


.brand-mark {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    font-size: 1.25rem;

    font-weight: 900;

    line-height: 1;

}


.brand-mark.brand-ifm {

    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    background: transparent;
    border: 0;
    border-radius: 0;

    text-transform: none;

}


.brand-pp {

    color: #111111;

    background: #ffffff;

    border: 2px solid #111111;

    border-radius: 9px;

}








.brand-copy {

    min-width: 0;

}


.brand-name-text {

    color: var(--projects-navy);

    font-size: 0.92rem;

    font-weight: 800;

    line-height: 1.18;

}


.brand-location {

    margin-top: 3px;

    color: var(--projects-blue);

    font-size: 0.76rem;

    line-height: 1.25;

}


/* =========================================================
   KARTENTRENNER
   ========================================================= */

.project-divider {

    position: relative;

    width: 100%;

    height: 1px;

    margin: 14px 0 14px;

    background: var(--projects-line);

}


.project-divider::before {

    content: "";

    position: absolute;

    left: 0;

    top: -1px;

    width: 18px;

    height: 2px;

    background: var(--projects-blue);

}


/* =========================================================
   PROJEKTTITEL
   ========================================================= */

.project-card h2 {

    min-height: 54px;

    margin: 0 0 17px;

    color: var(--projects-navy);

    font-size: 0.91rem;

    font-weight: 800;

    line-height: 1.35;

}


/* =========================================================
   PROJEKTINHALT
   ========================================================= */

.project-block {

    display: grid;

    grid-template-columns: 32px 1fr;

    gap: 12px;

    align-items: start;

}


.project-block + .project-block {

    margin-top: 17px;

}


/* alte Pseudo-Symbole vollständig abschalten */

.project-block::before {

    content: none !important;

    display: none !important;

}


/* SVG Symbolkreis */

.project-block-icon {

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    color: var(--projects-blue);

    background: #ffffff;

    border: 1px solid #a9c3ea;

    border-radius: 50%;

}


.project-block-icon svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.project-block h3 {

    margin: 0 0 4px;

    color: var(--projects-blue);

    font-size: 0.7rem;

    font-weight: 800;

    line-height: 1.25;

}


.project-block p {

    margin: 0;

    color: #23384f;

    font-size: 0.68rem;

    line-height: 1.48;

}


/* =========================================================
   UNTERER BEREICH
   ========================================================= */

.projects-summary-section {

    padding: 4px 0 0;

}


/* =========================================================
   MEIN ANSPRUCH
   ========================================================= */

.claim-panel {

    display: grid;

    grid-template-columns:

        230px

        minmax(320px, 1.55fr)

        repeat(
            3,
            minmax(185px, 1fr)
        );

    min-height: 112px;

    margin: 0 0 15px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--projects-line);

    border-radius: 10px;

}


.claim-head,
.claim-main-text,
.claim-value {

    min-width: 0;

    padding: 17px 20px;

}


.claim-main-text,
.claim-value {

    border-left: 1px solid var(--projects-line);

}


.claim-head {

    display: flex;

    align-items: center;

    gap: 15px;

}


.claim-check {

    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    display: grid;

    place-items: center;

    color: #ffffff;

    background: var(--projects-blue);

    border-radius: 50%;

    font-size: 1.45rem;

    font-weight: 800;

}


.claim-head h2 {

    margin: 0;

    color: var(--projects-navy);

    font-size: 1.05rem;

    font-weight: 800;

    line-height: 1.15;

}


.claim-main-text {

    display: flex;

    align-items: center;

    color: #263a51;

    font-size: 0.72rem;

    line-height: 1.55;

}


.claim-values {

    display: contents;

}


.claim-value {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 66px;

}


.claim-value::before {

    position: absolute;

    left: 21px;

    top: 50%;

    width: 32px;

    height: 32px;

    transform:
        translateY(-50%);

    display: grid;

    place-items: center;

    color: var(--projects-blue);

    font-size: 1.6rem;

}


.claim-value:nth-child(1)::before {

    content: "⚙";

}


.claim-value:nth-child(2)::before {

    content: "↗";

}


.claim-value:nth-child(3)::before {

    content: "◎";

}


.claim-value h3 {

    margin: 0 0 6px;

    color: var(--projects-blue);

    font-size: 0.7rem;

    font-weight: 800;

}


.claim-value p {

    margin: 0;

    color: #263a51;

    font-size: 0.64rem;

    line-height: 1.45;

}


/* =========================================================
   WEITERE PROJEKTE
   ========================================================= */

.projects-more {

    margin: 0 0 15px;

    overflow: hidden;

    background: #f6f9fd;

    border: 1px solid var(--projects-line);

    border-radius: 8px;

}


.projects-more summary {

    width: fit-content;

    margin: 13px 16px;

    padding: 11px 20px;

    cursor: pointer;

    list-style: none;

    color: #ffffff;

    background: var(--projects-blue);

    border-radius: 24px;

    font-size: 0.73rem;

    font-weight: 800;

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease;

}


.projects-more summary:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(6, 78, 216, 0.17);

}


.projects-more summary::-webkit-details-marker {

    display: none;

}


.projects-more[open] summary {

    margin-bottom: 4px;

}


.projects-more-content {

    padding: 12px 16px 16px;

}


.more-projects-grid {

    display: grid;

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

    gap: 12px;

}


.more-project {

    padding: 13px 14px;

    background: #ffffff;

    border: 1px solid var(--projects-line);

    border-radius: 8px;

}


.more-project h3 {

    margin: 0 0 5px;

    color: var(--projects-navy);

    font-size: 0.72rem;

    line-height: 1.35;

}


.more-project p {

    margin: 0;

    color: #40566b;

    font-size: 0.63rem;

    line-height: 1.45;

}


/* =========================================================
   ABSCHLUSSCLAIM
   ========================================================= */

.projects-quote {

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap: 18px;

    align-items: center;

    margin-top: 4px;

    padding: 18px 28px 5px;

    border-top:
        1px solid
        #bcd0e9;

}


.projects-quote p {

    margin: 0;

    text-align: center;

    color: var(--projects-navy);

    font-size: 0.92rem;

    line-height: 1.55;

}


.projects-quote strong {

    color: var(--projects-blue);

}


.quote-mark {

    color: var(--projects-blue);

    font-size: 2.25rem;

    font-weight: 900;

    line-height: 1;

}


.quote-sep {

    display: inline-block;

    margin: 0 10px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1300px) {

    .projects-hero-grid {

        grid-template-columns:
            1fr 0.75fr;

        gap: 35px;

    }


    .projects-intro h1 {

        font-size: 2.45rem;

    }


    .projects-cards {

        gap: 14px;

    }


    .project-card {

        padding-left: 16px;

        padding-right: 16px;

    }


    .claim-panel {

        grid-template-columns:

            190px

            minmax(280px, 1.4fr)

            repeat(
                3,
                minmax(150px, 1fr)
            );

    }

}


@media (max-width: 1080px) {

    .projects-intro h1 {

        white-space: normal;

    }


    .projects-hero-grid {

        grid-template-columns: 1fr;

    }


    .projects-visual {

        display: none;

    }


    .projects-cards {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .claim-panel {

        grid-template-columns:
            1fr 1fr;

    }


    .claim-main-text,
    .claim-value {

        border-left: 0;

        border-top:
            1px solid
            var(--projects-line);

    }


    .claim-values {

        display: contents;

    }


    .more-projects-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 720px) {

    .projects-page .container {

        width:
            min(
                100% - 30px,
                1460px
            );

    }


    .projects-hero {

        padding-top: 24px;

    }


    .projects-intro h1 {

        font-size: 2.1rem;

    }


    .projects-cards {

        grid-template-columns: 1fr;

    }


    .project-card {

        min-height: auto;

    }


    .claim-panel {

        grid-template-columns: 1fr;

    }


    .claim-main-text,
    .claim-value {

        border-left: 0;

        border-top:
            1px solid
            var(--projects-line);

    }


    .more-projects-grid {

        grid-template-columns: 1fr;

    }


    .projects-quote {

        grid-template-columns: 1fr;

        gap: 4px;

        text-align: center;

    }


    .quote-mark {

        display: none;

    }

}


.project-logo.ifm-logo {

    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

}


/* =========================================================
   PREMIUM PERFORMANCE ORIGINALLOGO
   ========================================================= */






/* =========================================================
   PREMIUM PERFORMANCE – FINALE LOGOGRÖSSE
   optisch abgestimmt auf IFM / VB / TÜV
   ========================================================= */






/* Premium Performance – gleiche Logo-Einheit wie IFM */






/* =========================================================
   PREMIUM PERFORMANCE – FINALE PROGRAMMIERUNG
   gleiche optische Einheit wie IFM
   ========================================================= */

.brand-mark.brand-pp {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    overflow: visible;

    background: transparent;
    border: 0;
    border-radius: 0;
}

.project-logo.premium-logo {
    display: block;

    width: 64px;
    height: 64px;

    max-width: none;
    max-height: none;

    object-fit: contain;

    transform: scale(1.45);
    transform-origin: center;
}


/* =========================================================
   VERHEYEN & BLUM – 64x64 LOGO
   ========================================================= */

.brand-mark.brand-vb {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    background: transparent;
    border: 0;
    border-radius: 0;
}

.project-logo.vb-logo {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;
}


/* =========================================================
   TÜV RHEINLAND – 64x64 LOGO
   ========================================================= */

.brand-mark.brand-tuev {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    background: transparent;
    border: 0;
    border-radius: 0;
}

.project-logo.tuev-logo {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;
}


/* =========================================================
   PROJEKTE – HORIZONTALER SLIDER
   ========================================================= */

.projects-cards-section {
    position: relative;
}


.projects-slider-shell {
    position: relative;

    width: 100%;
}


/* ---------------------------------------------------------
   Horizontale Kartenreihe
   --------------------------------------------------------- */

.projects-cards {
    display: flex !important;

    grid-template-columns: none !important;

    gap: 20px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 3px 3px 13px;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    overscroll-behavior-x: contain;

    scrollbar-width: thin;

    scrollbar-color:
        #b8cae0
        #f2f6fb;

    cursor: grab;

    user-select: none;
}


.projects-cards.is-dragging {
    cursor: grabbing;

    scroll-snap-type: none;
}


.projects-cards::-webkit-scrollbar {
    height: 7px;
}


.projects-cards::-webkit-scrollbar-track {
    background: #f2f6fb;

    border-radius: 20px;
}


.projects-cards::-webkit-scrollbar-thumb {
    background: #b8cae0;

    border-radius: 20px;
}


.projects-cards::-webkit-scrollbar-thumb:hover {
    background: #8faacb;
}


/* ---------------------------------------------------------
   Projektkarten

   Desktop:
   exakt vier Karten gleichzeitig sichtbar.
   Weitere Karten liegen rechts außerhalb des Sichtbereiches.
   --------------------------------------------------------- */

.projects-cards .project-card {
    flex:
        0 0
        calc((100% - 60px) / 4);

    min-width: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    user-select: text;
}


/* ---------------------------------------------------------
   Pfeile
   --------------------------------------------------------- */

.projects-slider-button {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 44px;
    height: 44px;

    transform: translateY(-50%);

    display: grid;
    place-items: center;

    padding: 0;

    color: #064ed8;

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

    border: 1px solid #c6d7eb;

    border-radius: 50%;

    box-shadow:
        0 4px 16px
        rgba(13, 47, 99, 0.10);

    font-family: Arial, sans-serif;

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

    line-height: 1;

    cursor: pointer;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.projects-slider-prev {
    left: -22px;
}


.projects-slider-next {
    right: -22px;
}


.projects-slider-button:hover:not(:disabled) {
    transform:
        translateY(-50%)
        scale(1.06);

    box-shadow:
        0 6px 20px
        rgba(13, 47, 99, 0.16);
}


.projects-slider-button:disabled {
    opacity: 0.18;

    cursor: default;

    box-shadow: none;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .projects-cards .project-card {
        flex:
            0 0
            calc((100% - 40px) / 3);
    }

}


/* ---------------------------------------------------------
   Kleineres Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .projects-cards .project-card {
        flex:
            0 0
            calc((100% - 20px) / 2);
    }

}


/* ---------------------------------------------------------
   Smartphone
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .projects-cards .project-card {
        flex:
            0 0
            calc(100% - 12px);
    }


    .projects-slider-prev {
        left: 4px;
    }


    .projects-slider-next {
        right: 4px;
    }


    .projects-slider-button {
        width: 38px;
        height: 38px;

        font-size: 1.7rem;
    }

}


/* =========================================================
   RHEINMETALL AUTOMOTIVE – TEMPORÄRER LOGOPLATZHALTER
   ========================================================= */




/* =========================================================
   RHEINMETALL AUTOMOTIVE – 64x64
   ========================================================= */

.brand-mark.brand-rheinmetall {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    background: transparent;
    border: 0;
    border-radius: 0;
}

.project-logo.rheinmetall-logo {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;
}


/* =========================================================
   HELLA – TEMPORÄRER LOGOPLATZHALTER
   ========================================================= */




/* =========================================================
   HELLA – 64x64 LOGO
   ========================================================= */






/* =========================================================
   HELLA – FINALE OPTISCHE ANPASSUNG
   64x64 Grundsystem, Wortlogo leicht vergrößert
   ========================================================= */

.brand-mark.brand-hella {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    overflow: visible;

    background: transparent;
    border: 0;
    border-radius: 0;
}

.project-logo.hella-logo {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;

    transform: scale(1.28);
    transform-origin: center;
}


/* =========================================================
   FLIESEN HERLICH – TEMPORÄRER LOGOPLATZHALTER
   ========================================================= */




/* =========================================================
   FLIESEN HERLICH – NEUTRALES 64x64 FLIESEN-SYMBOL
   kein offizielles Firmenlogo
   ========================================================= */

.brand-mark.brand-herlich {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    color: #195cc4;

    background: #f7faff;

    border: 1px solid #c7d8ed;
    border-radius: 8px;
}

.herlich-icon {
    width: 44px;
    height: 44px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linejoin: round;
}


/* =========================================================
   SALOW & MÖLLMANN – NEUTRALES 64x64 RECHTSSYMBOL
   ========================================================= */






/* =========================================================
   SALOW & MÖLLMANN – TYPOGRAFISCHE KENNZEICHNUNG
   keine erfundene Bildmarke
   ========================================================= */

.brand-mark.brand-salow {
    width: 64px;
    height: 64px;

    min-width: 64px;
    flex: 0 0 64px;

    padding: 0;

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

    color: #092a5e;
    background: #f7faff;

    border: 1px solid #c7d8ed;
    border-radius: 8px;
}

.salow-wordmark {
    display: block;

    color: #092a5e;

    font-family: "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
    font-size: 1.22rem;
    font-style: italic;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.03em;
    transform: translateY(-1px);

}


/* PROJECTS REDESIGN 2026 START */


/* =========================================================
   GRUNDLAGEN
   ========================================================= */

.projects-redesign {
    --pr-navy: #092a5e;
    --pr-blue: #064ed8;
    --pr-text: #253a54;
    --pr-muted: #708096;
    --pr-line: #dbe4ee;
    --pr-soft: #f4f6f8;
    --pr-soft-blue: #f5f8fc;
    --pr-white: #ffffff;
}


/* =========================================================
   GEMEINSAME SECTION-HEADLINES
   ========================================================= */

.pr-section-head {
    max-width: 820px;
    margin-bottom: 46px;
}

.pr-section-head-compact {
    max-width: 760px;
}

.pr-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--pr-blue);

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

    letter-spacing: 0.13em;
}

.pr-section-head h2,
.pr-section-head h1 {
    margin: 0 0 18px;

    color: var(--pr-navy);

    font-size: clamp(2rem, 3vw, 3.1rem);
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.pr-section-head h2 span,
.pr-section-head h1 span {
    color: #7d8793;
}

.pr-section-head .pr-head-muted {
    color: #8b95a3;
}

.pr-section-head .pr-head-accent {
    color: var(--pr-blue);
}

.pr-section-head p {
    max-width: 720px;

    margin: 0;

    color: var(--pr-text);

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


/* =========================================================
   HAUPTPROJEKTE
   ========================================================= */

.pr-main-projects {
    padding: 56px 0 96px;

    background: #ffffff;
}

.pr-case-grid {
    display: grid;

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

    gap: 26px;
}

.pr-case {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 420px;

    padding: 32px 34px 30px;

    background: #ffffff;

    border: 1px solid var(--pr-line);
    border-top: 3px solid var(--pr-blue);

    border-radius: 4px;
}

.pr-case:nth-child(1),
.pr-case:nth-child(4) {
    background: #f7f8fa;
}

.pr-case-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 20px;
}

.pr-case-number {
    color: var(--pr-blue);

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

    letter-spacing: 0.12em;
}

.pr-case-type {
    color: var(--pr-muted);

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

    letter-spacing: 0.1em;

    text-align: right;
}

.pr-case-meta {
    margin-bottom: 7px;

    color: var(--pr-blue);

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

    letter-spacing: 0.08em;
}

.pr-case h2 {
    margin: 0 0 8px;

    color: var(--pr-navy);

    font-size: 1.55rem;
    line-height: 1.2;

    letter-spacing: -0.02em;
}

.pr-case-subtitle {
    margin: 0 0 22px;

    color: #6e7987;

    font-size: 0.94rem;
    font-weight: 700;

    line-height: 1.5;
}

.pr-case-preview {
    margin: 0 0 22px;

    color: var(--pr-text);

    font-size: 0.96rem;
    line-height: 1.7;
}


/* =========================================================
   AUFKLAPPBARE PROJEKTDETAILS
   ========================================================= */

.pr-details {
    margin-top: 2px;
}

.pr-details summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

    color: var(--pr-blue);

    border-top: 1px solid var(--pr-line);
    border-bottom: 1px solid var(--pr-line);

    cursor: pointer;

    list-style: none;

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

    letter-spacing: 0.04em;
}

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

.pr-details-plus {
    display: inline-flex;

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

    width: 25px;
    height: 25px;

    color: var(--pr-blue);

    border: 1px solid #c7d7ea;
    border-radius: 50%;

    transition: transform 0.2s ease;
}

.pr-details[open] .pr-details-plus {
    transform: rotate(45deg);
}

.pr-details-content {
    padding: 20px 0 6px;
}

.pr-detail-block + .pr-detail-block {
    margin-top: 20px;
}

.pr-detail-block h3 {
    margin: 0 0 7px;

    color: var(--pr-blue);

    font-size: 0.73rem;
    font-weight: 850;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.pr-detail-block p,
.pr-detail-block li {
    color: var(--pr-text);

    font-size: 0.91rem;
    line-height: 1.68;
}

.pr-detail-block p {
    margin: 0;
}

.pr-detail-block ul {
    margin: 0;

    padding-left: 18px;
}

.pr-detail-block li + li {
    margin-top: 5px;
}


/* =========================================================
   KOMPETENZ-TAGS
   ========================================================= */

.pr-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 23px;
}

.pr-tags span {
    display: inline-flex;

    padding: 7px 10px;

    color: #52667b;

    background: #eef2f6;

    border-radius: 3px;

    font-size: 0.72rem;
    font-weight: 750;

    letter-spacing: 0.025em;
}


/* =========================================================
   ENTWICKLUNGSACHSE
   ========================================================= */

.pr-development {
    padding: 72px 0;

    background: var(--pr-soft-blue);

    border-top: 1px solid #e2e9f1;
    border-bottom: 1px solid #e2e9f1;
}

.pr-development-line {
    position: relative;

    display: grid;

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

    gap: 18px;

    margin-top: 38px;
}

.pr-development-line::before {
    content: "";

    position: absolute;

    top: 40px;
    left: 5%;
    right: 5%;

    height: 1px;

    background: #bfcfe1;
}

.pr-step {
    position: relative;

    z-index: 1;

    text-align: center;
}

.pr-step-number {
    display: block;

    margin-bottom: 12px;

    color: #8896a7;

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

    letter-spacing: 0.09em;
}

.pr-step-dot {
    width: 15px;
    height: 15px;

    margin: 0 auto 18px;

    background: var(--pr-blue);

    border: 4px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 0 1px #9bb6d6;
}

.pr-step h3 {
    margin: 0 0 7px;

    color: var(--pr-navy);

    font-size: 0.95rem;
}

.pr-step p {
    max-width: 180px;

    margin: 0 auto;

    color: #64768b;

    font-size: 0.8rem;
    line-height: 1.5;
}

.pr-development-text {
    display: grid;

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

    gap: 34px;

    margin-top: 38px;
    padding-top: 35px;

    border-top: 1px solid #d3deea;
}

.pr-development-text p {
    margin: 0;

    color: var(--pr-text);

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

.pr-development-text strong {
    color: var(--pr-blue);
}


/* =========================================================
   WEITERE PROJEKTE
   ========================================================= */

.pr-more-projects {
    padding: 94px 0 100px;

    background: #ffffff;
}

.pr-category-grid {
    display: grid;

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

    gap: 22px;

    align-items: start;
}

.pr-category {
    align-self: start;

    padding: 30px 28px 26px;

    background: #ffffff;

    border: 1px solid var(--pr-line);

    border-radius: 4px;
}

.pr-category:nth-child(2) {
    background: #f6f7f9;
}

.pr-category-icon {
    display: inline-flex;

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

    width: 38px;
    height: 38px;

    margin-bottom: 19px;

    color: #ffffff;

    background: var(--pr-blue);

    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 800;
}

.pr-category h3 {
    min-height: 54px;

    margin: 0 0 19px;

    color: var(--pr-navy);

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

.pr-mini-project {
    padding: 18px 0;

    border-top: 1px solid var(--pr-line);
}

.pr-mini-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 7px;
}

.pr-mini-head strong {
    color: var(--pr-navy);

    font-size: 0.88rem;
    line-height: 1.4;
}

.pr-mini-head span {
    flex: 0 0 auto;

    color: var(--pr-blue);

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

    letter-spacing: 0.04em;
}

.pr-mini-project p {
    margin: 0;

    color: #52667d;

    font-size: 0.82rem;
    line-height: 1.58;
}


/* =========================================================
   REFERENZEN
   ========================================================= */

.pr-references {
    padding: 0 0 92px;

    background: #ffffff;
}

.pr-reference-panel {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 26px;

    align-items: center;

    padding: 31px 34px;

    background: var(--pr-soft-blue);

    border: 1px solid #d8e3ee;
    border-left: 4px solid var(--pr-blue);

    border-radius: 3px;
}

.pr-reference-mark {
    display: flex;

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

    width: 45px;
    height: 45px;

    color: #ffffff;

    background: var(--pr-blue);

    border-radius: 50%;

    font-size: 1.25rem;
    font-weight: 800;
}

.pr-reference-panel .pr-kicker {
    margin-bottom: 5px;
}

.pr-reference-panel h2 {
    margin: 0 0 6px;

    color: var(--pr-navy);

    font-size: 1.35rem;
}

.pr-reference-panel p {
    margin: 0;

    color: var(--pr-text);

    font-size: 0.9rem;
    line-height: 1.6;
}


/* =========================================================
   MEIN ANSPRUCH
   ========================================================= */

.pr-claim {
    padding: 88px 0 96px;

    background: #f6f7f9;

    border-top: 1px solid #e2e6eb;
}

.pr-values {
    display: grid;

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

    border-top: 1px solid #d5dde6;
    border-bottom: 1px solid #d5dde6;
}

.pr-values article {
    padding: 27px 30px;
}

.pr-values article + article {
    border-left: 1px solid #d5dde6;
}

.pr-values article:nth-child(1),
.pr-values article:nth-child(3) {
    background: #ffffff;
}

.pr-values span {
    display: block;

    margin-bottom: 9px;

    color: var(--pr-blue);

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}

.pr-values h3 {
    margin: 0 0 6px;

    color: var(--pr-navy);

    font-size: 1rem;
}

.pr-values p {
    margin: 0;

    color: #5f7186;

    font-size: 0.84rem;
}

.pr-final-quote {
    max-width: 850px;

    margin: 64px auto 0;

    padding: 0;

    color: var(--pr-navy);

    border: 0;

    font-size: clamp(1.25rem, 2.1vw, 1.85rem);
    font-weight: 750;
    line-height: 1.48;

    text-align: center;
}

.pr-final-quote strong {
    display: block;

    margin-top: 4px;

    color: var(--pr-blue);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .pr-case-grid {
        grid-template-columns: 1fr;
    }

    .pr-category-grid {
        grid-template-columns: 1fr;
    }

    .pr-category h3 {
        min-height: auto;
    }

}


@media (max-width: 800px) {

    .pr-main-projects,
    .pr-development,
    .pr-more-projects,
    .pr-claim {
        padding-top: 68px;
        padding-bottom: 72px;
    }

    .pr-development-line {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 38px;
    }

    .pr-development-line::before {
        top: 0;
        bottom: 0;

        left: 15px;
        right: auto;

        width: 1px;
        height: auto;
    }

    .pr-step {
        display: grid;

        grid-template-columns: 30px 1fr;

        column-gap: 18px;

        padding: 0 0 28px;

        text-align: left;
    }

    .pr-step-number {
        grid-column: 2;

        margin: 0 0 3px;
    }

    .pr-step-dot {
        grid-column: 1;
        grid-row: 1 / span 3;

        margin: 4px auto 0;
    }

    .pr-step h3,
    .pr-step p {
        grid-column: 2;

        max-width: none;

        margin-left: 0;
        margin-right: 0;
    }

    .pr-development-text {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .pr-values {
        grid-template-columns: 1fr;
    }

    .pr-values article + article {
        border-left: 0;
        border-top: 1px solid #d5dde6;
    }

}


@media (max-width: 560px) {

    .pr-case {
        padding: 25px 22px 24px;
    }

    .pr-case-top {
        align-items: flex-start;
    }

    .pr-case-type {
        max-width: 170px;
    }

    .pr-category {
        padding: 25px 22px;
    }

    .pr-mini-head {
        display: block;
    }

    .pr-mini-head span {
        display: block;

        margin-top: 4px;
    }

    .pr-reference-panel {
        grid-template-columns: 1fr;

        padding: 27px 24px;
    }

}


/* PROJECTS REDESIGN 2026 END */


/* PROJECTS – AKADEMISCHE INSTITUTION START */

.pr-mini-head-academic {
    display: block;
    margin-bottom: 3px;
}

.pr-mini-institution {
    margin: 0 0 9px;

    color: var(--pr-blue);

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

    letter-spacing: 0.035em;
}

/* PROJECTS – AKADEMISCHE INSTITUTION END */


/* PROJECTS HERO FINAL 2026 START */

.projects-visual {
    display: flex;

    align-items: flex-start;
    justify-content: flex-end;

    overflow: visible !important;

    padding-top: 17px;
}


.projects-redesign
.projects-hero
.projects-visual
img.projects-hero-final {

    display: block !important;

    /*
       WICHTIG:
       Flexbox darf das Bild NICHT wieder zusammenschrumpfen.
    */
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    width: 128% !important;
    max-width: none !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform:
        translateX(25%)
        translateY(17px) !important;

    transform-origin: center center !important;

    background: #ffffff;
}


/* Tablet / Mobile */

@media (max-width: 800px) {

    .projects-visual {
        padding-top: 0;
    }

    .projects-redesign
    .projects-hero
    .projects-visual
    img.projects-hero-final {

        flex: 0 1 auto !important;

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

        transform: none !important;
    }

}

/* PROJECTS HERO FINAL 2026 END */


/* PROJECTS FUTURE PROJECT 2026 START */


/* =========================================================
   ZUKUNFTSPROJEKT
   ========================================================= */

.pr-future-project {
    padding: 16px 0 88px;

    background: #ffffff;
}


.pr-future-panel {
    display: grid;

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

    gap: 54px;

    padding: 42px 46px;

    background: #f5f8fc;

    border: 1px solid #d8e3ee;
    border-left: 4px solid #064ed8;

    border-radius: 3px;
}


.pr-future-status {
    margin-bottom: 10px;

    color: #788698;

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

    letter-spacing: 0.095em;
}


.pr-future-content h2 {
    max-width: 720px;

    margin: 0 0 19px;

    color: #092a5e;

    font-size: clamp(1.8rem, 2.7vw, 2.65rem);
    line-height: 1.12;

    letter-spacing: -0.03em;
}


.pr-future-content h2 span {
    color: #8b95a3;
}


.pr-future-content > p {
    max-width: 720px;

    margin: 0 0 13px;

    color: #253a54;

    font-size: 0.94rem;
    line-height: 1.7;
}


.pr-future-content .pr-future-lead {
    color: #092a5e;

    font-size: 1rem;
    font-weight: 650;
}


.pr-future-current {
    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid #d3deea;
}


.pr-future-current strong {
    display: block;

    margin-bottom: 6px;

    color: #064ed8;

    font-size: 0.76rem;
    font-weight: 850;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.pr-future-current p {
    max-width: 710px;

    margin: 0;

    color: #52667c;

    font-size: 0.88rem;
    line-height: 1.65;
}


.pr-future-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 23px;
}


.pr-future-tags span {
    display: inline-flex;

    padding: 7px 10px;

    color: #52667b;

    background: #ffffff;

    border: 1px solid #dbe4ee;
    border-radius: 3px;

    font-size: 0.72rem;
    font-weight: 750;
}


/* =========================================================
   STATUS / ROADMAP
   ========================================================= */

.pr-future-roadmap {
    align-self: center;

    padding-left: 5px;
}


.pr-future-roadmap-title {
    margin-bottom: 18px;

    color: #788698;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}


.pr-future-step {
    position: relative;

    display: grid;

    grid-template-columns: 38px 1fr;

    gap: 15px;

    padding-bottom: 24px;
}


.pr-future-step:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 18px;
    top: 36px;
    bottom: 0;

    width: 1px;

    background: #cad8e8;
}


.pr-future-dot {
    position: relative;
    z-index: 2;

    display: flex;

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

    width: 36px;
    height: 36px;

    color: #6c7c90;

    background: #ffffff;

    border: 1px solid #bfcfe1;
    border-radius: 50%;

    font-size: 0.67rem;
    font-weight: 850;
}


.pr-future-step.is-active .pr-future-dot {
    color: #ffffff;

    background: #064ed8;

    border-color: #064ed8;

    font-size: 0.9rem;
}


.pr-future-step strong {
    display: block;

    margin: 2px 0 3px;

    color: #092a5e;

    font-size: 0.9rem;
}


.pr-future-step span {
    display: block;

    color: #718197;

    font-size: 0.76rem;
    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .pr-future-panel {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .pr-future-roadmap {
        padding-left: 0;
    }

}


@media (max-width: 560px) {

    .pr-future-panel {
        padding: 30px 24px;
    }

}


/* PROJECTS FUTURE PROJECT 2026 END */


/* PROJECTS FUTURE TITLE FINAL START */


/* Linker Inhaltsbereich erhält minimal mehr Platz */

.pr-future-panel {
    grid-template-columns:
        minmax(0, 1.68fr)
        minmax(270px, 0.72fr);

    gap: 44px;
}


/* Überschrift minimal ruhiger */

.pr-future-content h2 {
    font-size: clamp(1.7rem, 2.25vw, 2.18rem);
}


/* Fahrzeugmängel-Analyse darf nicht mehr
   am Bindestrich getrennt werden */

.pr-future-content h2 .pr-future-title-keep {
    color: #092a5e !important;
    white-space: nowrap;
}


/* Mobile bleibt flexibel */

@media (max-width: 900px) {

    .pr-future-panel {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .pr-future-content h2 .pr-future-title-keep {
        white-space: normal;
    }

}


/* PROJECTS FUTURE TITLE FINAL END */




/* WEITERE PROJEKTE – visuelle Hierarchie */
.pr-more-projects .pr-section-head h2 {
    font-size: clamp(1.9rem, 2.4vw, 2.55rem);
}


/* ZUKUNFTSPROJEKT – kompakte einspaltige Darstellung */
.pr-future-panel {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.pr-future-content {
    max-width: 920px;
}


/* ZUKUNFTSPROJEKT – vertikal verdichtet */
.pr-future-panel {
    padding: 28px 40px !important;
}


/* PROJEKTSEITE – Header bündig mit 1460px Inhaltscontainer */
.site-header .header-inner {
    width: min(1460px, calc(100% - 72px));
}


/* PROJEKTSEITE – Mailbutton wie Kompetenzseite */
.projects-mail-link {
    width: 38px;
    height: 38px;

    display: inline-flex;

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

    padding: 0 !important;

    color: #ffffff !important;

    background: var(--blue);

    border-radius: 50%;

    font-size: 1rem !important;
}

.projects-mail-link::after {
    display: none !important;
}

/* RESPONSIVE – Projektkarten-Kopf auf Smartphones */
@media (max-width: 560px) {
    .pr-case-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .pr-case-type {
        max-width: none;
        width: 100%;
        text-align: left;
        overflow-wrap: anywhere;
    }
}

/* Barrierefreiheit: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .projects-cards {
        scroll-behavior: auto;
    }
}