/*
 * ============================================================
 * K&H SCHWEISSTECHNIK – DESIGN 2026
 * Testseite: /design-2026
 * Joomla Menu Item: itemid-150
 * ============================================================
 *
 * Ausschließlich für die Design-Testseite.
 * Die produktive Website wird nicht verändert.
 * ============================================================
 */


/* ============================================================
   01. DESIGN-TOKENS
   ============================================================ */

body.itemid-150 {
    --kh-navy: #122a46;
    --kh-navy-dark: #0b1d30;
    --kh-blue: #245d89;
    --kh-accent: #3280ad;

    --kh-steel: #71808c;
    --kh-text: #26313a;
    --kh-muted: #66727d;

    --kh-bg: #edf2f5;
    --kh-surface: #ffffff;
    --kh-surface-alt: #f5f8fa;
    --kh-border: #d9e1e7;

    --kh-radius: 3px;

    background: var(--kh-bg);
    color: var(--kh-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;
    line-height: 1.65;
}


/* ============================================================
   02. CASSIOPEIA-SEITENRASTER
   ============================================================ */

body.itemid-150 .site-grid {
    max-width: none;
    margin: 0;

    grid-template-columns:
        [full-start] minmax(24px, 1fr)
        [main-start] minmax(0, 1240px)
        [main-end] minmax(24px, 1fr)
        [full-end];
}

body.itemid-150 .grid-child {
    width: 100%;
    max-width: 1240px;
}


/* ============================================================
   03. HEADER
   ============================================================ */

body.itemid-150 .container-header {
    position: relative;

    background:
        linear-gradient(
            110deg,
            var(--kh-navy-dark) 0%,
            var(--kh-navy) 58%,
            #173b5e 100%
        );

    background-image:
        linear-gradient(
            110deg,
            var(--kh-navy-dark) 0%,
            var(--kh-navy) 58%,
            #173b5e 100%
        );

    box-shadow: none;
}

body.itemid-150 .container-header .grid-child {
    max-width: 1240px;
    margin: 0 auto;
}

/* technische Akzentlinie */

body.itemid-150 .container-header::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--kh-accent) 22%,
            var(--kh-accent) 42%,
            transparent 68%
        );

    opacity: 0.8;
}


/* ============================================================
   04. LOGO
   ============================================================ */

body.itemid-150 .container-header .navbar-brand {
    padding: 24px 0 17px;
}

body.itemid-150 .container-header .navbar-brand img {
    display: block;

    width: auto;
    max-width: min(600px, 100%);
    max-height: 96px;

    object-fit: contain;
}


/* ============================================================
   05. NAVIGATION
   ============================================================ */

body.itemid-150 .container-header .container-nav {
    margin-top: 0;

    border-top:
        1px solid rgba(255,255,255,0.13);

    padding-top: 0;
    padding-bottom: 0;
}

body.itemid-150 .container-header .mod-menu {
    display: flex;
    flex-wrap: wrap;

    gap: 0;

    margin: 0;
    padding: 0;
}

body.itemid-150 .container-header .mod-menu > li {
    margin: 0;
}

body.itemid-150 .container-header .mod-menu > li > a {
    position: relative;
    display: block;

    padding: 15px 20px 14px;

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

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

    letter-spacing: 0.035em;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

body.itemid-150 .container-header .mod-menu > li > a:hover,
body.itemid-150 .container-header .mod-menu > li.active > a {
    color: #ffffff;
    background: rgba(255,255,255,0.06);
}

body.itemid-150 .container-header .mod-menu > li > a::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 7px;

    height: 2px;

    background: var(--kh-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.18s ease;
}

body.itemid-150 .container-header .mod-menu > li > a:hover::after,
body.itemid-150 .container-header .mod-menu > li.active > a::after {
    transform: scaleX(1);
}


/* ============================================================
   06. HAUPTINHALT
   ============================================================ */

body.itemid-150 .site-grid > .container-component {
    grid-column: main-start / main-end;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
    padding: 0;

    background: var(--kh-surface);
}

body.itemid-150 .com-content-article {
    position: relative;

    padding:
        72px
        64px
        92px;

    overflow: hidden;
}


/* ============================================================
   07. ALLGEMEINE TYPOGRAFIE
   ============================================================ */

body.itemid-150 h1,
body.itemid-150 h2,
body.itemid-150 h3,
body.itemid-150 h4 {
    color: var(--kh-navy-dark);

    font-family: inherit;
    font-weight: 720;
    line-height: 1.15;
}

body.itemid-150 h2 {
    margin-top: 0;
    margin-bottom: 24px;

    font-size:
        clamp(
            1.9rem,
            2.7vw,
            2.65rem
        );

    letter-spacing: -0.03em;
}

body.itemid-150 h3 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 1.25rem;
}

body.itemid-150 p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

body.itemid-150 main a {
    color: var(--kh-blue);

    text-decoration-color:
        rgba(36,93,137,0.35);

    text-underline-offset: 3px;
}

body.itemid-150 main a:hover {
    color: var(--kh-accent);
}


/* ============================================================
   08. HERO
   ============================================================ */

body.itemid-150 .kh-hero {
    position: relative;

    padding:
        12px
        0
        76px;

    border-bottom:
        1px solid var(--kh-border);
}

body.itemid-150 .kh-eyebrow {
    margin: 0 0 20px;

    color: var(--kh-accent);

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

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.itemid-150 .kh-hero h2 {
    position: relative;

    max-width: 930px;

    margin: 0 0 28px;

    padding-bottom: 26px;

    color: var(--kh-navy-dark);

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

    font-weight: 760;

    line-height: 0.99;
    letter-spacing: -0.05em;
}

body.itemid-150 .kh-hero h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 92px;
    height: 4px;

    background: var(--kh-accent);
}

body.itemid-150 .kh-lead {
    max-width: 850px;

    margin-bottom: 18px;

    color: #43515c;

    font-size: 1.12rem;
    line-height: 1.72;
}

body.itemid-150 .kh-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


/* ============================================================
   09. BUTTONS
   ============================================================ */

body.itemid-150 .kh-button {
    display: inline-block;

    padding: 12px 19px;

    border:
        1px solid var(--kh-blue);

    border-radius: 2px;

    background: var(--kh-blue);
    color: #ffffff;

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

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body.itemid-150 .kh-button:hover {
    border-color: var(--kh-navy-dark);
    background: var(--kh-navy-dark);
    color: #ffffff;
}

body.itemid-150 .kh-button-secondary {
    background: transparent;
    color: var(--kh-blue);
}

body.itemid-150 .kh-button-secondary:hover {
    color: #ffffff;
}


/* ============================================================
   10. HERO-FAKTEN
   ============================================================ */

body.itemid-150 .kh-facts {
    display: grid;

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

    gap: 0;

    max-width: 940px;

    margin-top: 46px;

    border-top:
        1px solid var(--kh-border);

    border-bottom:
        1px solid var(--kh-border);
}

body.itemid-150 .kh-fact {
    padding:
        20px
        24px
        20px
        0;
}

body.itemid-150 .kh-fact + .kh-fact {
    padding-left: 24px;

    border-left:
        1px solid var(--kh-border);
}

body.itemid-150 .kh-fact strong {
    display: block;

    margin-bottom: 3px;

    color: var(--kh-navy);

    font-size: 1.05rem;
    font-weight: 760;
}

body.itemid-150 .kh-fact span {
    color: var(--kh-muted);

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


/* ============================================================
   11. SEKTIONEN
   ============================================================ */

body.itemid-150 .kh-section {
    padding:
        78px
        0;

    border-bottom:
        1px solid var(--kh-border);
}

body.itemid-150 .kh-section:last-child {
    border-bottom: 0;
    padding-bottom: 10px;
}

body.itemid-150 .kh-section-intro {
    max-width: 830px;

    margin-bottom: 42px;

    color: var(--kh-muted);

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

body.itemid-150 .kh-section-label {
    margin: 0 0 12px;

    color: var(--kh-accent);

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

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ============================================================
   12. LEISTUNGSKARTEN
   ============================================================ */

body.itemid-150 .kh-services {
    display: grid;

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

    gap: 18px;
}

body.itemid-150 .kh-service {
    position: relative;

    min-height: 215px;

    padding:
        30px
        30px
        28px;

    border:
        1px solid var(--kh-border);

    border-radius: var(--kh-radius);

    background: var(--kh-surface-alt);

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

body.itemid-150 .kh-service:hover {
    transform: translateY(-2px);

    border-color: #bdcbd5;

    box-shadow:
        0 10px 28px
        rgba(18,42,70,0.07);
}

body.itemid-150 .kh-service-number {
    display: block;

    margin-bottom: 28px;

    color: var(--kh-accent);

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

    letter-spacing: 0.12em;
}

body.itemid-150 .kh-service h3 {
    margin-bottom: 12px;

    color: var(--kh-navy-dark);

    font-size: 1.32rem;
}

body.itemid-150 .kh-service p {
    margin: 0;

    color: #56626c;

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


/* ============================================================
   13. ERFAHRUNG / QUALITÄT
   ============================================================ */

body.itemid-150 .kh-columns {
    display: grid;

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

    gap: 58px;
}

body.itemid-150 .kh-column {
    min-width: 0;
}

body.itemid-150 .kh-column p {
    color: #4e5b65;
}


/* ============================================================
   14. REFERENZEN / VERTRAUEN
   ============================================================ */

body.itemid-150 .kh-reference-line {
    max-width: 900px;

    padding:
        25px
        28px;

    border-left:
        4px solid var(--kh-accent);

    background: var(--kh-surface-alt);

    color: #44515b;
}

body.itemid-150 .kh-reference-line strong {
    color: var(--kh-navy-dark);
}


/* ============================================================
   15. CTA
   ============================================================ */

body.itemid-150 .kh-cta {
    position: relative;

    margin-top: 72px;

    padding:
        46px
        48px;

    background:
        linear-gradient(
            115deg,
            var(--kh-navy-dark),
            var(--kh-navy)
        );

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

body.itemid-150 .kh-cta h2 {
    max-width: 760px;

    margin-bottom: 16px;

    color: #ffffff;
}

body.itemid-150 .kh-cta p {
    max-width: 760px;
}

body.itemid-150 .kh-cta .kh-button {
    margin-top: 12px;

    border-color: #ffffff;

    background: #ffffff;
    color: var(--kh-navy-dark);
}

body.itemid-150 .kh-cta .kh-button:hover {
    background: transparent;
    color: #ffffff;
}


/* ============================================================
   16. BILDER
   ============================================================ */

body.itemid-150 .com-content-article img {
    max-width: 100%;
    height: auto;

    border-radius: var(--kh-radius);
}


/* ============================================================
   17. LISTEN
   ============================================================ */

body.itemid-150 main ul {
    padding-left: 1.25rem;
}

body.itemid-150 main li {
    margin-bottom: 0.5rem;
}


/* ============================================================
   18. TABELLEN
   ============================================================ */

body.itemid-150 .com-content-article table {
    width: 100% !important;
    max-width: 100%;

    border-collapse: collapse;

    background: transparent;
}

body.itemid-150 .com-content-article td {
    padding: 14px;
}


/* ============================================================
   19. FOOTER
   ============================================================ */

body.itemid-150 .container-footer {
    background:
        linear-gradient(
            120deg,
            #0b1928,
            #10263d
        );

    background-image:
        linear-gradient(
            120deg,
            #0b1928,
            #10263d
        );

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

body.itemid-150 .container-footer .grid-child {
    max-width: 1240px;

    margin: 0 auto;

    padding:
        36px
        32px;
}

body.itemid-150 .container-footer a {
    color: rgba(255,255,255,0.82);
}

body.itemid-150 .container-footer a:hover {
    color: #ffffff;
}


/* ============================================================
   20. BACK TO TOP
   ============================================================ */

body.itemid-150 .back-to-top-link {
    border: 0;

    border-radius: 2px;

    background: var(--kh-navy);
    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.13);
}


/* ============================================================
   21. RESPONSIVE – TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    body.itemid-150 {
        font-size: 16px;
    }

    body.itemid-150 .site-grid {
        grid-template-columns:
            [full-start] 18px
            [main-start] minmax(0, 1fr)
            [main-end] 18px
            [full-end];
    }

    body.itemid-150 .com-content-article {
        padding:
            56px
            38px
            68px;
    }

    body.itemid-150 .container-header .navbar-brand {
        padding:
            20px
            20px
            16px;
    }

    body.itemid-150 .container-header .container-nav {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.itemid-150 .kh-services {
        grid-template-columns:
            1fr;
    }

    body.itemid-150 .kh-columns {
        gap: 34px;
    }
}


/* ============================================================
   22. RESPONSIVE – SMARTPHONE
   ============================================================ */

@media (max-width: 575.98px) {

    body.itemid-150 .site-grid {
        grid-template-columns:
            [full-start] 0
            [main-start] minmax(0, 1fr)
            [main-end] 0
            [full-end];
    }

    body.itemid-150 .com-content-article {
        padding:
            42px
            22px
            54px;
    }

    body.itemid-150 .container-header .navbar-brand img {
        max-height: 76px;
    }

    body.itemid-150 .container-header .container-nav {
        padding-left: 8px;
        padding-right: 8px;
    }

    body.itemid-150 .container-header .mod-menu > li > a {
        padding:
            12px
            10px;
    }

    body.itemid-150 .kh-hero {
        padding-bottom: 52px;
    }

    body.itemid-150 .kh-hero h2 {
        font-size: 2.55rem;
    }

    body.itemid-150 .kh-lead {
        font-size: 1rem;
    }

    body.itemid-150 .kh-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.itemid-150 .kh-button {
        text-align: center;
    }

    body.itemid-150 .kh-facts {
        grid-template-columns: 1fr;
    }

    body.itemid-150 .kh-fact {
        padding:
            17px
            0;
    }

    body.itemid-150 .kh-fact + .kh-fact {
        padding-left: 0;

        border-left: 0;

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

    body.itemid-150 .kh-section {
        padding:
            54px
            0;
    }

    body.itemid-150 .kh-section h2 {
        font-size: 1.85rem;
    }

    body.itemid-150 .kh-services {
        gap: 12px;
    }

    body.itemid-150 .kh-service {
        min-height: 0;

        padding:
            24px
            22px;
    }

    body.itemid-150 .kh-service-number {
        margin-bottom: 18px;
    }

    body.itemid-150 .kh-columns {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    body.itemid-150 .kh-cta {
        margin-top: 52px;

        padding:
            34px
            24px;
    }
}

/* ============================================================
   K&H DESIGN 2026 – HERO + LEISTUNGSKARTEN FEINSCHLIFF
   ============================================================ */

/* HERO als echte 2-Spalten-Fläche */
body.itemid-150 .kh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 56px;
    align-items: stretch;
}

/* Linke Hero-Spalte */
body.itemid-150 .kh-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Hero-Headline kräftiger und größer */
body.itemid-150 .kh-hero h1 {
    margin: 0 0 26px;
    color: var(--kh-navy-dark);

    font-size: clamp(3.3rem, 5.7vw, 5.7rem);
    font-weight: 780;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

/* Introtexte */
body.itemid-150 .kh-hero-lead {
    max-width: 700px;
    margin-bottom: 16px;

    color: #3c4954;
    font-size: 1.12rem;
    line-height: 1.7;
}

body.itemid-150 .kh-hero-text {
    max-width: 700px;
    margin-bottom: 0;

    color: #5a6670;
    line-height: 1.68;
}

/* Hero-Bild deutlich größer */
body.itemid-150 .kh-hero-media {
    min-height: 470px;
    overflow: hidden;

    background: #dfe6eb;

    border-radius: var(--kh-radius);
}

body.itemid-150 .kh-hero-media img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 470px;

    object-fit: cover;
    object-position: center;

    border-radius: 0;
}

/* Facts sauber unter dem kompletten Hero */
body.itemid-150 .kh-facts {
    max-width: none;
    margin-top: 48px;
}

/* ============================================================
   LEISTUNGSKARTEN
   ============================================================ */

body.itemid-150 .kh-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.itemid-150 .kh-service {
    min-height: 250px;

    padding: 30px 28px 28px;

    background: #f7f9fa;

    border: 1px solid #dce4e9;
    border-top: 3px solid transparent;

    box-shadow: none;
}

/* technische Akzentlinie */
body.itemid-150 .kh-service:hover {
    transform: translateY(-3px);

    border-color: #cbd7df;
    border-top-color: var(--kh-accent);

    box-shadow:
        0 12px 26px
        rgba(18, 42, 70, 0.08);
}

/* Nummer bewusst klein */
body.itemid-150 .kh-service-number {
    margin-bottom: 34px;

    color: var(--kh-accent);

    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* Titel */
body.itemid-150 .kh-service h3 {
    margin-bottom: 14px;

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

/* Beschreibung */
body.itemid-150 .kh-service p {
    color: #5a6670;

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

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

@media (max-width: 1100px) {

    body.itemid-150 .kh-hero-grid {
        grid-template-columns: 1fr 0.9fr;
        gap: 36px;
    }

    body.itemid-150 .kh-hero-media,
    body.itemid-150 .kh-hero-media img {
        min-height: 400px;
    }

    body.itemid-150 .kh-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    body.itemid-150 .kh-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    body.itemid-150 .kh-hero h1 {
        font-size: clamp(2.7rem, 11vw, 4.2rem);
    }

    body.itemid-150 .kh-hero-media,
    body.itemid-150 .kh-hero-media img {
        min-height: 300px;
    }

    body.itemid-150 .kh-services {
        grid-template-columns: 1fr;
    }

    body.itemid-150 .kh-service {
        min-height: 0;
    }
}