/* =========================================================
   KOMPETENZEN – FINALER REFERENZSTAND
   Technik · Prozesse · Digitalisierung
   ========================================================= */


/* =========================================================
   SEITENBREITE
   ========================================================= */

.competence-container {
    width: min(1460px, calc(100% - 72px));
    margin: 0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.competence-intro {
    padding: 34px 0 22px;
}


.intro-grid {
    display: grid;

    grid-template-columns: 1.55fr 0.75fr;

    gap: 58px;

    align-items: end;
}


.competence-kicker {
    margin: 0;

    color: var(--blue);

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

    letter-spacing: 0.02em;
}


.kicker-line {
    display: block;

    width: 34px;
    height: 2px;

    margin: 11px 0 12px;

    background: var(--blue);
}


.intro-heading h1 {
    max-width: 900px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(2.05rem, 2.75vw, 2.8rem);

    line-height: 1.06;

    letter-spacing: -0.035em;
}


.intro-lead {
    max-width: 470px;

    margin: 0 0 4px;

    color: #22394c;

    font-size: 0.96rem;

    line-height: 1.62;
}


/* =========================================================
   SYSTEM
   ========================================================= */

.competence-system {
    padding: 4px 0 28px;
}


/* =========================================================
   OBERER KARTENBEREICH
   ========================================================= */

.field-row {
    position: relative;
    margin-top: 18px;

    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


.field-card {
    position: relative;

    min-height: 360px;

    padding: 62px 42px 32px;

    overflow: visible;

    background: #ffffff;

    border: 1px solid #cddbf0;
    border-radius: 14px;

    box-shadow:
        0 3px 16px rgba(15, 61, 110, 0.035);

    text-align: center;
}


.field-card h2 {
    position: relative;
    z-index: 3;

    margin: 0 0 12px;

    color: var(--blue);

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


.field-subtitle {
    position: relative;
    z-index: 3;

    margin: 0;

    color: var(--blue);

    font-size: 0.8rem;
    font-weight: 600;
}


.field-icon {
    position: absolute;
    z-index: 5;

    top: 12px;
    left: 50%;

    width: 68px;
    height: 68px;

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

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--blue);

    border-radius: 50%;

    box-shadow:
        0 4px 14px rgba(0, 73, 160, 0.14);
}


.field-icon svg {
    width: 37px;
    height: 37px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.competence-list {
    position: relative;
    z-index: 3;

    max-width: 330px;

    margin: 26px auto 0;

    padding: 0;

    list-style: none;

    text-align: left;
}


.competence-list li {
    position: relative;

    margin: 0 0 13px;

    padding-left: 30px;

    color: #273d50;

    font-size: 0.82rem;

    line-height: 1.4;
}


.competence-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--blue);

    border-radius: 50%;

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


/* =========================================================
   TECHNIK – ZEICHNUNGEN
   ========================================================= */

.tech-card {
    padding-left: 160px;
}


.tech-drawing {
    position: absolute;
    z-index: 1;

    fill: none;

    stroke: #4a78c2;
    stroke-width: 1.25;

    opacity: 0.62;
}


.gear-drawing {
    top: 24px;
    left: 14px;

    width: 145px;
}


.caliper-drawing {
    left: 13px;
    bottom: 18px;

    width: 155px;
}


/* =========================================================
   PROZESSE
   ========================================================= */

.process-card {
    z-index: 3;
}


.process-arrow {
    position: absolute;

    left: 50%;
    bottom: 11px;

    transform: translateX(-50%);

    color: var(--blue);

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


/* =========================================================
   DIGITALISIERUNG
   ========================================================= */

.digital-card {
    padding-right: 175px;
}


.network-drawing,
.monitor-drawing {
    position: absolute;
    z-index: 1;

    fill: none;

    stroke: #5682c7;
    stroke-width: 1.1;

    opacity: 0.52;
}


.network-drawing {
    top: 20px;
    right: 11px;

    width: 160px;
}


.monitor-drawing {
    right: 11px;
    bottom: 20px;

    width: 165px;
}


/* =========================================================
   VERBINDUNGSLINIEN
   ========================================================= */

.tech-card::after,
.digital-card::after {
    content: "";

    position: absolute;

    bottom: -31px;

    width: 92px;
    height: 3px;

    background: var(--blue);
}


.tech-card::after {
    right: -46px;

    transform: rotate(37deg);

    transform-origin: right center;
}


.digital-card::after {
    left: -46px;

    transform: rotate(-37deg);

    transform-origin: left center;
}


/* =========================================================
   SYSTEMISCHES PROBLEMLÖSEN
   ========================================================= */

.problem-center {
    position: relative;
    z-index: 8;

    width: 270px;
    height: 270px;

    margin: -92px auto -70px;

    padding: 34px 28px 28px;

    display: flex;

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

    box-sizing: border-box;

    text-align: center;

    background: #ffffff;

    border: 2px solid #ccd4df;
    border-radius: 50%;

    box-shadow:
        0 0 0 8px rgba(236, 241, 247, 0.9),
        0 4px 18px rgba(15, 61, 110, 0.06);
}


.problem-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 6px;

    color: var(--blue);
}


.problem-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.problem-center h2 {
    margin: 0;

    color: var(--blue);

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

    line-height: 1.08;
}


.problem-line {
    width: 34px;
    height: 2px;

    margin: 9px 0 9px;

    background: var(--blue);
}


.problem-center p {
    max-width: 215px;

    margin: 0;

    color: #33495c;

    font-size: 0.7rem;

    line-height: 1.42;
}


/* =========================================================
   INDUSTRIE / HANDWERK
   ========================================================= */

.bridge-panel {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 300px 1fr;

    gap: 20px;

    min-height: 188px;

    padding: 90px 35px 24px;

    background: #ffffff;

    border: 1px solid #cddbf0;
    border-radius: 14px;
}


.world-block {
    display: grid;

    align-items: center;

    gap: 26px;
}


.industry-block {
    grid-template-columns: 140px 1fr;
}


.craft-block {
    grid-template-columns: 1fr 140px;
}


.world-icon {
    width: 116px;
    height: 116px;

    display: grid;
    place-items: center;

    color: var(--blue);

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 5px 18px rgba(20, 60, 100, 0.12);
}


.world-icon svg {
    width: 69px;
    height: 69px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.world-copy h2 {
    margin: 0 0 8px;

    color: var(--blue);

    font-size: 1.16rem;
}


.world-subtitle {
    margin: 0;

    color: #21394d;

    font-size: 0.83rem;
    font-weight: 600;
}


.world-line {
    display: block;

    width: 35px;
    height: 2px;

    margin: 10px 0 12px;

    background: var(--blue);
}


.world-copy > p:last-child {
    max-width: 410px;

    margin: 0;

    color: #465b6d;

    font-size: 0.74rem;

    line-height: 1.52;
}


/* =========================================================
   BRÜCKENBAUER
   ========================================================= */

.bridge-core {
    align-self: end;

    padding-bottom: 1px;

    text-align: center;

    color: var(--navy);
}


.bridge-arrows {
    display: grid;

    grid-template-columns: 30px 1fr 30px;

    gap: 8px;

    align-items: center;

    color: var(--blue);
}


.bridge-arrows > span {
    font-size: 1.75rem;
}


.bridge-arrows svg {
    width: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.bridge-core p {
    margin: 5px 0 0;

    font-size: 0.72rem;

    line-height: 1.45;
}


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

.competence-quote {
    display: flex;

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

    gap: 24px;

    margin-top: 24px;

    padding: 15px 28px;

    background:
        linear-gradient(
            90deg,
            #f7f9fc 0%,
            #f1f5fa 50%,
            #f7f9fc 100%
        );

    border-radius: 7px;
}


.quote-symbol {
    color: var(--blue);

    font-size: 2.8rem;
    font-weight: 900;

    line-height: 0.8;
}


.competence-quote p {
    margin: 0;

    color: #263c50;

    font-size: 0.96rem;
}


.competence-quote strong {
    color: var(--blue);
}


.quote-dot {
    margin: 0 12px;

    color: var(--navy);
}


/* =========================================================
   MAIL
   ========================================================= */

.competence-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;
}


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


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

@media (max-width: 1150px) {

    .intro-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .intro-lead {
        max-width: 760px;
    }


    .field-row {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .field-card {
        min-height: auto;

        padding: 74px 42px 38px;
    }


    .tech-card {
        padding-left: 180px;
    }


    .digital-card {
        padding-right: 190px;
    }


    .tech-card::after,
    .digital-card::after {
        display: none;
    }


    .problem-center {
        margin: 28px auto -55px;
    }


    .bridge-panel {
        grid-template-columns: 1fr;

        padding-top: 85px;
    }


    .bridge-core {
        order: 2;
    }


    .craft-block {
        order: 3;
    }

}


@media (max-width: 720px) {

    .competence-container {
        width: min(100% - 30px, 1460px);
    }


    .intro-heading h1 {
        font-size: 2.15rem;
    }


    .tech-card,
    .digital-card {
        padding-left: 30px;
        padding-right: 30px;
    }


    .tech-drawing,
    .network-drawing,
    .monitor-drawing {
        opacity: 0.15;
    }


    .problem-center {
        width: 245px;
        height: 245px;
    }


    .industry-block,
    .craft-block {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .world-icon {
        margin: 0 auto;
    }


    .world-line {
        margin-left: auto;
        margin-right: auto;
    }


    .world-copy > p:last-child {
        margin-left: auto;
        margin-right: auto;
    }


    .competence-quote {
        align-items: flex-start;

        font-size: 0.88rem;
    }

}


/* COMPETENCIES EXTRA STRENGTHS 2026 START */


/* =========================================================
   ERGÄNZENDE STÄRKEN
   bewusst kleiner als die drei Kernkompetenzen
   ========================================================= */

.competencies-extra-strengths {
    width: 100%;
    max-width: 100%;

    flex: 0 0 100%;
    grid-column: 1 / -1;

    margin: 28px 0 18px;
}


.competencies-extra-heading {
    margin: 0 0 13px;

    color: #064ed8;

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

    letter-spacing: 0.095em;
}


.competencies-extra-grid {
    display: grid;

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

    gap: 18px;
}


.competencies-extra-card {
    min-width: 0;

    padding: 21px 22px 20px;

    background: #f7f9fc;

    border: 1px solid #d9e3ee;
    border-top: 2px solid #2a68a5;

    border-radius: 3px;

    box-shadow: none;
}


.competencies-extra-card h3 {
    margin: 0 0 7px;

    color: #123f73;

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

    line-height: 1.2;

    letter-spacing: 0.015em;
}


.competencies-extra-focus {
    min-height: 34px;

    margin-bottom: 10px;

    color: #53677e;

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

    line-height: 1.45;
}


.competencies-extra-card p {
    margin: 0;

    color: #344a62;

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


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

@media (max-width: 900px) {

    .competencies-extra-grid {
        grid-template-columns: 1fr;
    }

    .competencies-extra-focus {
        min-height: 0;
    }

}


@media (max-width: 560px) {

    .competencies-extra-card {
        padding: 19px 18px;
    }

}


/* COMPETENCIES EXTRA STRENGTHS 2026 END */


/* COMPETENCIES PROBLEM CIRCLE FINAL 2026 START */


/* =========================================================
   SYSTEMISCHES PROBLEMLÖSEN
   finale Desktop-Feinabstimmung
   ========================================================= */

@media (min-width: 1101px) {

    .problem-center {
        width: 270px;
        height: 270px;

        margin: -100px auto -78px;

        padding: 32px 30px 34px;
    }


    /* Gesamten Inhalt optisch etwas höher setzen */

    .problem-center > * {
        position: relative;
        top: -8px;
    }


    .problem-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 7px;
    }


    .problem-center h2 {
        font-size: 1.08rem;
        line-height: 1.08;
    }


    .problem-line {
        margin: 8px 0 8px;
    }


    .problem-center p {
        max-width: 220px;

        font-size: 0.72rem;
        line-height: 1.38;
    }

}


/* COMPETENCIES PROBLEM CIRCLE FINAL 2026 END */




/* COMPETENCIES WORLD ICON IMAGES 2026 START */

.world-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.world-icon-image-file {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.industry-image-file {
    max-width: 188px;
}

.handwerk-image-file {
    max-width: 176px;
}

@media (max-width: 900px) {
    .industry-image-file,
    .handwerk-image-file {
        max-width: 150px;
    }
}

/* COMPETENCIES WORLD ICON IMAGES 2026 END */


/* COMPETENCIES WORLD ICONS VISUAL FINAL START */


/* =========================================================
   INDUSTRIE / HANDWERK
   finale visuelle Abstimmung
   ========================================================= */

.industry-block .world-icon,
.craft-block .world-icon {
    width: 128px !important;
    height: 128px !important;

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

    background: #ffffff !important;

    border-radius: 50% !important;

    box-shadow:
        0 5px 18px rgba(20, 60, 100, 0.11) !important;

    overflow: hidden !important;
}


/* Die PNG-Dateien besitzen außen viel transparente Fläche.
   Deshalb werden sie innerhalb des Kreises bewusst größer
   dargestellt. */

.industry-block .world-icon-image-file {
    width: 165px !important;
    max-width: none !important;
    height: auto !important;

    flex: 0 0 auto;
    object-fit: contain;

    transform: translateY(2px);
}


.craft-block .world-icon-image-file {
    width: 172px !important;
    max-width: none !important;
    height: auto !important;

    flex: 0 0 auto;
    object-fit: contain;

    transform: translateY(1px);
}


@media (max-width: 900px) {

    .industry-block .world-icon,
    .craft-block .world-icon {
        width: 118px !important;
        height: 118px !important;
    }

    .industry-block .world-icon-image-file {
        width: 153px !important;
    }

    .craft-block .world-icon-image-file {
        width: 159px !important;
    }

}


/* COMPETENCIES WORLD ICONS VISUAL FINAL END */


/* COMPETENCIES WORLD ICONS BALANCE FINAL START */


/* =========================================================
   INDUSTRIE / HANDWERK
   finale optische Gewichtung
   ========================================================= */

@media (min-width: 901px) {

    .industry-block .world-icon-image-file {
        width: 156px !important;
        max-width: none !important;
        height: auto !important;

        transform: translateY(2px);
    }


    .craft-block .world-icon-image-file {
        width: 158px !important;
        max-width: none !important;
        height: auto !important;

        transform: translateY(1px);
    }

}


/* COMPETENCIES WORLD ICONS BALANCE FINAL END */



/* =========================================================
   HANDWERK-SYMBOL FEINJUSTIERUNG
   nur das Symbol rechts etwas kleiner,
   der weiße Kreis bleibt unverändert
   ========================================================= */
.craft-block .world-icon img {
    width: 72px;
    height: auto;
}


/* HANDWERK SYMBOL FINAL SIZE START */

/* Nur die Werkzeugzeichnung verkleinern.
   Der weiße Kreis bleibt unverändert. */

@media (min-width: 901px) {

    .craft-block .world-icon .world-icon-image-file {
        width: 142px !important;
        max-width: none !important;
        height: auto !important;

        transform: translateY(1px);
    }

}

/* HANDWERK SYMBOL FINAL SIZE END */


/* COMPETENCIES VISUAL REDUCTION FINAL START */


/* =========================================================
   VISUELLE STRATEGIE DER FOLGESEITEN

   Startseite = starke Zeichnungs-/Grafikpräsenz
   Unterseiten = zunehmend ruhiger und reduzierter

   Die großen dekorativen Blueprint-Zeichnungen in
   TECHNIK und DIGITALISIERUNG werden deshalb entfernt.
   Die runden Hauptsymbole bleiben bestehen.
   ========================================================= */


/* ---------------------------------------------------------
   TECHNIK – dekorative Zeichnungen entfernen
   --------------------------------------------------------- */

.tech-card .tech-drawing {
    display: none !important;
}


/* ---------------------------------------------------------
   DIGITALISIERUNG – dekorative Zeichnungen entfernen
   --------------------------------------------------------- */

.digital-card .network-drawing,
.digital-card .monitor-drawing {
    display: none !important;
}


/* ---------------------------------------------------------
   DESKTOP:
   Sonderabstände der ehemaligen Zeichnungen zurücknehmen
   --------------------------------------------------------- */

@media (min-width: 901px) {

    .tech-card {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .digital-card {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

}


/* ---------------------------------------------------------
   HANDWERK:
   Werkzeugzeichnung noch etwas kleiner
   weißer Kreis bleibt unverändert
   --------------------------------------------------------- */

@media (min-width: 901px) {

    .craft-block .world-icon .world-icon-image-file {
        width: 132px !important;
        max-width: none !important;
        height: auto !important;

        transform: translateY(1px);
    }

}


/* COMPETENCIES VISUAL REDUCTION FINAL END */


/* COMPETENCIES PROCESS OVERLAP FINAL START */


/* =========================================================
   PROZESSE
   vierten Punkt sauber oberhalb des Problemlösungs-Kreises halten
   ========================================================= */

@media (min-width: 901px) {

    .process-card .competence-list {
        position: relative;

        top: 0;
    }


    .process-card .competence-list li {
        margin-bottom: 13px !important;
    }


    .process-card .competence-list li:last-child {
        margin-bottom: 0 !important;
    }

}


/* COMPETENCIES PROCESS OVERLAP FINAL END */


/* COMPETENCIES CIRCLE LOWER FINAL START */


/* =========================================================
   SYSTEMISCHES PROBLEMLÖSEN
   Kreis auf Desktop 18 px weiter nach unten.
   Gesamtfluss der Seite bleibt gleich.
   ========================================================= */

@media (min-width: 1101px) {

    .problem-center {
        margin: -62px auto -40px !important;
    }

}


/* COMPETENCIES CIRCLE LOWER FINAL END */


/* INDUSTRY ICON FINAL CLEANUP START */


/* =========================================================
   INDUSTRIE
   etwas mehr Abstand zum Kreisrand
   + überstehende Bodenlinie optisch entfernen
   ========================================================= */

@media (min-width: 901px) {

    .industry-block .world-icon {
        position: relative !important;
        overflow: hidden !important;
    }


    .industry-block .world-icon .world-icon-image-file {
        width: 146px !important;
        max-width: none !important;
        height: auto !important;

        position: relative;
        z-index: 1;

        transform: translateY(1px);
    }


    /* Kleine weiße Masken entfernen nur die
       überstehenden Enden der Bodenlinie. */

    .industry-block .world-icon::before,
    .industry-block .world-icon::after {
        content: "";

        position: absolute;
        z-index: 2;

        bottom: 15px;

        width: 22px;
        height: 13px;

        background: #ffffff;
    }


    .industry-block .world-icon::before {
        left: 5px;
    }


    .industry-block .world-icon::after {
        right: 5px;
    }

}


/* INDUSTRY ICON FINAL CLEANUP END */




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

/* RESPONSIVE – Problemkreis Tablet sauber trennen */
@media (max-width: 900px) {
    .problem-center {
        margin: 28px auto 28px;
    }

    .bridge-panel {
        padding-top: 36px;
    }
}

/* RESPONSIVE – Brückengrafik auf Tablet begrenzen */
@media (max-width: 1150px) {
    .bridge-core {
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* RESPONSIVE – Kreisinhalt auf Tablet wie Desktop ausrichten */
@media (min-width: 721px) and (max-width: 1150px) {
    .problem-center > * {
        position: relative;
        top: -16px;
    }
}