/* =====================================================
   ConTronTec Website
   Haupt-Stylesheet
   Version 2.1
===================================================== */

/* =====================================================
   1. CSS Variablen
===================================================== */
:root{
    /* Farben */
    --color-primary:#00017f;
    --color-primary-dark:#00004f;
    --color-primary-soft:rgba(0,1,127,.92);
    --color-accent:#ff9900;
    --color-accent-soft:rgba(255,153,0,.35);
    --color-background:#555555;
    --color-surface:#faf9f8;
    --color-text:#faf9f8;
    --color-text-light:#f0f0f0;
    --color-white:#ffffff;
    --color-card:rgba(255,255,255,.05);
    --color-card-hover:rgba(255,255,255,.08);

    /* Abstaende */
    --space-xs:4px;
    --space-sm:8px;
    --space-md:16px;
    --space-lg:24px;
    --space-xl:32px;
    --space-2xl:48px;
    --space-3xl:64px;

    /* Schriftarten */
    --font-heading:"Montserrat", sans-serif;
    --font-body:"Roboto", Arial, sans-serif;

    /* Schatten */
    --shadow-box:0 0 10px 4px var(--color-accent);
    --shadow-soft:0 10px 28px rgba(0,0,0,.28);
    --shadow-image:0 12px 30px rgba(0,0,0,.35);

    /* Rundungen */
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:12px;
    --radius-pill:50px;

    /* Uebergaenge */
    --transition-default:.25s ease;}

/* =====================================================
   2. Base
===================================================== */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    color:var(--color-text);
    background:#333;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    margin:0;
    padding:0;
}

h1,
h2,
h3,
h4{
    margin:0;
    font-family:var(--font-heading);
    line-height:1.2;
}

p{
    margin:0 0 var(--space-lg);
}

strong{
    font-weight:700;
}

/* =====================================================
   3. Accessibility
===================================================== */
:focus-visible{
    outline:3px solid var(--color-accent);
    outline-offset:4px;
}

.navigation__link:focus-visible,
.btn-modern:focus-visible,
.footer a:focus-visible,
.navigation-toggle:focus-visible{
    border-radius:var(--radius-sm);
}

/* =====================================================
   4. Layout
===================================================== */
.page{
    position:relative;

    overflow:hidden;

    max-width:1550px;
    min-height:900px;

    margin:var(--space-sm) auto;

    background:#05070d;

    border:2px solid var(--color-accent);

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

.page__background{
    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;
}

.page__background-image{

    position:absolute;

    top:0;
    right:0;

    width:1380px;

    height:auto;

    opacity:1;

    pointer-events:none;
}

/* =====================================
   Hintergrund Unterseiten
===================================== */

.page--subpage .page__background{
    height:600px;
}

.page--subpage .page__background::after{
    content:"";

    position:absolute;

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

    height:180px;

    background:linear-gradient(
        to bottom,
        rgba(5,7,13,0),
        rgba(5,7,13,.95) 70%,
        #05070d 100%
    );
}

.header,
.layout,
.footer{
    position:relative;
    z-index:2;
}

.layout{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:var(--space-lg);
    align-items:start;
    padding:var(--space-md);
}

main section{
    margin-bottom:var(--space-lg);
}

main section:last-child{
    margin-bottom:0;
}

@media (min-width:993px){
    main section{
        margin-bottom:var(--space-md);
    }
}

/* =====================================================
   5. Header
===================================================== */
.header{
    height:70px;
    margin-bottom:var(--space-md);
    padding:0 var(--space-lg);
    background:var(--color-surface);
    border-bottom:2px solid var(--color-accent);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.header__inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:100%;
}

.header__title{
    margin:0;
    color:var(--color-primary);
    font-family:var(--font-heading);
    font-size:200%;
    letter-spacing:.5px;
}

.header__logo{
    padding:0;
}

.header__logo img{
    display:block;
    max-width:100%;
    height:auto;
}

/* =====================================================
   6. Navigation
===================================================== */
.navigation{
    margin:0;
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-radius:0;

    box-shadow:none;

    position:sticky;
    top:var(--space-lg);
}

.navigation__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
}

.navigation__item{
    margin:0;
}

.navigation__link{
    display:block;

    padding:10px 12px 10px 16px;

    border-left:3px solid transparent;

    color:var(--color-white);

    font-family:var(--font-heading);
    font-size:.88rem;
    font-weight:600;

    letter-spacing:.4px;
    text-transform:uppercase;

    transition:
        background-color var(--transition-default),
        border-color var(--transition-default),
        color var(--transition-default);
}

.navigation__link:hover{
    background:rgba(255,255,255,.06);
    color:var(--color-accent);
}


.navigation__link--active{
    background:rgba(255,153,0,.10);
    border-left-color:var(--color-accent);
    color:var(--color-accent);
}

.navigation-toggle{
    display:none;
}

/* =====================================================
   7. Hero
===================================================== */
.hero{
    grid-template-columns:650px 1fr;
}

.hero__content{
    max-width:620px;

    margin-left:0px;

    padding:var(--space-sm) var(--space-md) 0;

    position:relative;
    z-index:2;

    background:rgba(0,0,0,.18);

    border-left:4px solid var(--color-accent);
    border-radius:var(--radius-md);

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

.hero__content > *{
    max-width:100%;
}

.hero__eyebrow{
    margin:0 0 var(--space-sm);
    color:var(--color-accent);
    font-family:var(--font-heading);
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}

.hero__title{
    margin:0 0 var(--space-md);

    color:#d91e18;

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

    line-height:1.1;

    font-weight:700;
}

.hero__lead{
    margin:0 0 var(--space-md);
    font-size:1.1rem;
    line-height:1.45;
}

.hero__text{
    margin:0 0 var(--space-md);
    font-size:.95rem;
    line-height:1.55;
}

.hero__list{
    margin:0 0 var(--space-md);
    padding:0;
    list-style:none;
}

.hero__list-item{
    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);
    margin-bottom:var(--space-xs);
    line-height:1.35;
}

.hero__list-item::before{
    content:"✓";
    flex:0 0 auto;
    color:var(--color-accent);
    font-weight:700;
}

.hero__button{
    text-align:left;
    margin-top:var(--space-md);
}

/* =====================================================
   8. Buttons
===================================================== */
.btn-modern{
    display:inline-block;
    background:var(--color-accent);
    border:2px solid transparent;
    color:var(--color-white);
    padding:var(--space-md) var(--space-xl);
    font-family:var(--font-heading);
    font-size:1rem;
    font-weight:700;
    text-decoration:none;
    border-radius:var(--radius-pill);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:all var(--transition-default);
    letter-spacing:.5px;
}

.btn-modern:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.2);
    background:#ffb347;
    color:var(--color-primary);
}

.btn-modern:active{
    transform:translateY(0);
    box-shadow:0 6px 15px rgba(0,0,0,.15);
}

/* =====================================================
   9. Services
===================================================== */
.services{
    padding:var(--space-sm) var(--space-md);
    margin-top:0;
    background:rgba(0,0,0,.18);

    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    border-radius:0;
    box-shadow:none;
}

.services__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
}

.services__card{
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:var(--space-md);

    padding:var(--space-sm) var(--space-lg);

    color:var(--color-white);

    background:transparent;
    border:none;
    border-right:1px solid rgba(255,255,255,.18);
    border-radius:0;
    box-shadow:none;

    transition:background-color var(--transition-default);
}

.services__card:last-child{
    border-right:none;
}

.services__card:hover{
    background:rgba(255,255,255,.05);
    transform:none;
}

.services__icon{
    width:36px;
    height:36px;

    object-fit:contain;

    grid-row:1 / 4;

    margin:0;
}

.services__title{
    margin:0 0 var(--space-xs);

    min-height:auto;

    color:var(--color-accent);

    font-size:.95rem;
    line-height:1.2;

    text-transform:uppercase;
}

.services__text{
    margin:0;

    color:var(--color-text-light);

    font-size:.9rem;
    line-height:1.35;
}

.services__link{
    display:inline-flex;

    margin-top:var(--space-xs);
    padding-top:0;

    color:var(--color-accent);

    font-size:.9rem;
    font-weight:600;
}

.services__link:hover{
    color:var(--color-white);
}

/* =====================================================
   10. Industries
===================================================== */
.industries{
    padding:var(--space-xs) var(--space-md);
    margin-top:0;
    background:rgba(255,255,255,.88);

    border-top:none;
    border-bottom:1px solid rgba(255,255,255,.12);

    border-radius:0;
    box-shadow:none;
}

.industries__grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    padding:0;

    text-align:center;
    font-weight:700;
}

.industries__item{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;

    gap:var(--space-sm);

    padding:var(--space-sm);

    border-right:1px solid rgba(0,1,127,.18);

    transition:background-color var(--transition-default);
}

.industries__item:last-child{
    border-right:none;
}

.industries__item:hover{
    background:rgba(0,1,127,.06);
    transform:none;
}

.industries__icon{
    font-size:1.1rem;
    color:var(--color-accent);
}

/* =====================================================
   11. Footer
===================================================== */
.footer{
    margin-top:var(--space-lg);
    padding:var(--space-sm) var(--space-lg);
    background:var(--color-primary-soft);
    border-top:2px solid var(--color-accent);
}

.footer__content{

    text-align:center;

    margin-bottom:var(--space-md);

}

.footer__title{
    margin:0 0 var(--space-sm);
    color:var(--color-accent);
    font-family:var(--font-heading);
    font-size:1.05rem;
    line-height:1.3;
}

.footer__text,
.footer__list,
.footer__bottom{
    font-size:.9rem;
    line-height:1.4;
}


.footer__list a:hover,
.footer__bottom a:hover{
    color:var(--color-accent);
}

.footer__bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:var(--space-lg);

    padding-top:var(--space-sm);

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

    font-size:.85rem;

}

.footer__accent{
    color:var(--color-accent);
    font-weight:600;
}

/* =====================================================
   12. Content Page
===================================================== */
.content-page{
    width:100%;
    max-width:none;
    padding:var(--space-lg);
}

.content-page__header{
    max-width:900px;
}

.content-page__eyebrow{
    margin:0 0 var(--space-sm);
    color:var(--color-accent);
    font-family:var(--font-heading);
    font-size:.95rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.content-page__title{
    margin:0 0 var(--space-md);

    color:#d91e18;

    font-family:var(--font-heading);

    font-size:clamp(1.7rem, 2.4vw, 2.25rem);

    line-height:1.15;
}

.content-page__lead{
    font-size:1.2rem;
    line-height:1.7;
    color:var(--color-white);
}

.content-page__body{
    width:100%;
    max-width:none;

    line-height:1.7;
}

.content-page__body p{
    margin:0 0 var(--space-lg);
}

.content-page__body h2{
    margin:var(--space-2xl) 0 var(--space-md);
    color:var(--color-accent);
    font-size:1.5rem;
    line-height:1.25;
}

.content-page__body ul{
    margin:0 0 var(--space-xl);
    padding-left:1.3rem;
}

.content-page__body li{
    margin-bottom:var(--space-sm);
}

.content-note{
    margin:var(--space-xl) 0;
    padding:var(--space-md);

    background:rgba(0,0,0,.28);

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

    color:var(--color-text-light);

    line-height:1.6;
}

.process{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-lg);

    margin:var(--space-xl) 0;
}

.process__step{
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-left:3px solid var(--color-accent);

    line-height:1.5;
}

.process__number{
    display:inline-flex;

    width:34px;
    height:34px;

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

    margin-bottom:var(--space-sm);

    background:var(--color-accent);

    color:var(--color-primary);

    border-radius:50%;

    font-weight:700;
}

.process__step h3{
    margin:0 0 var(--space-sm);

    color:var(--color-accent);

    font-size:1rem;
}

.process__step p{
    margin:0;

    line-height:1.5;
}

.topic-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-md);

    margin:var(--space-xl) 0;
}

.topic-card{
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-left:3px solid var(--color-accent);

    line-height:1.5;
}

.tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-sm);

    margin:var(--space-xl) 0;
}

.tag-list span{
    padding:var(--space-xs) var(--space-md);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-pill);

    color:var(--color-text-light);

    font-size:.9rem;
}

.advantages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-lg);

    margin:var(--space-xl) 0;
}

.advantages__item{
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-top:3px solid var(--color-accent);

    line-height:1.6;
}

.advantages__item strong{
    display:block;

    margin-bottom:var(--space-sm);

    color:var(--color-accent);

    font-family:var(--font-heading);
}

.content-page__cta-text{
    max-width:760px;

    margin:var(--space-xl) 0 var(--space-md);

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

.content-page .btn-modern{
    margin-top:var(--space-sm);
}

/* =====================================
   Leistungsübersicht
===================================== */

.service-overview{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-xl);

    margin:var(--space-xl) 0;
}

.service-overview__card{

    padding:var(--space-lg);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-left:4px solid var(--color-accent);

    transition:
        transform var(--transition-default),
        border-color var(--transition-default);

}

.service-overview__card:hover{

    transform:translateY(-4px);

    border-left-color:#ffb347;

}

.service-overview__card h2{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

    font-size:1.2rem;

}

.service-overview__card p{

    margin-bottom:var(--space-lg);

    line-height:1.6;

}

.service-overview__card a{

    color:var(--color-accent);

    font-weight:600;

}

.service-overview__card a:hover{

    color:var(--color-white);

}

/* =====================================
   Entscheidungshilfe
===================================== */

.decision-grid{

    display:grid;

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

    gap:var(--space-lg);

    margin:var(--space-2xl) 0;

}

.decision-card{

    padding:var(--space-lg);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-left:4px solid var(--color-primary);

}

.decision-card h3{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

    font-size:1.05rem;

}

.decision-card p{

    margin:0;

    line-height:1.6;

}

.workflow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-md);

    margin:var(--space-2xl) 0;
}

.workflow__step{
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);
    border-top:3px solid var(--color-accent);
}

.workflow__step span{
    display:inline-flex;

    width:30px;
    height:30px;

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

    margin-bottom:var(--space-sm);

    background:var(--color-accent);

    color:var(--color-primary);

    border-radius:50%;

    font-weight:700;
}

.workflow__step strong{
    display:block;

    margin-bottom:var(--space-sm);

    color:var(--color-accent);

    font-family:var(--font-heading);
}

.workflow__step p{
    margin:0;

    font-size:.95rem;
    line-height:1.5;
}

/* =====================================
   Zusammenarbeit
===================================== */

.expectation{

    display:grid;

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

    gap:var(--space-lg);

    margin:var(--space-2xl) 0;

}

.expectation__item{

    padding:var(--space-lg);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);

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

}

.expectation__item h3{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

    font-size:1.1rem;

}

.expectation__item p{

    margin:0;

    line-height:1.6;

}

/* =====================================
   Referenzen
===================================== */

.reference-grid{

    display:grid;

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

    gap:var(--space-xl);

    margin:var(--space-xl) 0;

}

.reference-card{

    padding:var(--space-lg);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);

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

}

.reference-card h3{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

}

.reference-card p{

    line-height:1.6;

}

.reference-card strong{

    color:var(--color-white);

}

/* =====================================
   Wissen
===================================== */

.knowledge-grid{

    display:grid;

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

    gap:var(--space-xl);

    margin:var(--space-xl) 0;

}

.knowledge-card{

    padding:var(--space-lg);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);

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

}

.knowledge-card h3{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

}

.knowledge-card p{

    line-height:1.6;

}

/* =====================================
   Branchenkompetenz
===================================== */

.industry-reference{

    display:grid;

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

    gap:var(--space-md);

    margin:var(--space-2xl) 0;

}

.industry-reference__item{

    padding:var(--space-md);

    text-align:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    border-radius:6px;

    font-weight:600;

}

.reference-note{
    margin:var(--space-xl) 0;
    padding:var(--space-md);

    background:rgba(0,0,0,.22);

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

    line-height:1.6;
}

/* =====================================
   Kontakt
===================================== */

.contact-box{

    margin:var(--space-xl) 0;

    padding:var(--space-xl);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);

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

}

.contact-box p{

    margin-bottom:var(--space-lg);

    line-height:1.7;

}

.contact-divider{

    margin:var(--space-xl) 0;

    border:none;

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

}

/* =====================================
   Kontaktgründe
===================================== */

.contact-reasons{

    display:grid;

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

    gap:var(--space-lg);

    margin:var(--space-2xl) 0;

}

.contact-reason{

    padding:var(--space-lg);

    background:rgba(0,0,0,.22);

    border:1px solid rgba(255,255,255,.10);

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

}

.contact-reason h3{

    margin-bottom:var(--space-md);

    color:var(--color-accent);

    font-size:1.05rem;

}

.contact-reason p{

    margin:0;

    line-height:1.6;

}

/* =====================================================
   13. Responsive Design
===================================================== */
@media (max-width:992px){
    .layout{
        grid-template-columns:180px 1fr;
        gap:var(--space-lg);
    }

    .navigation{
        margin:0 0 var(--space-lg);
    }

    .hero{
        padding:var(--space-md);
    }

    .services__grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .footer__grid{
        grid-template-columns:1fr 1fr;
    }

    .advantages{
    grid-template-columns:1fr;
    }

    .topic-grid{
       grid-template-columns:1fr;
    }

    .process{
        grid-template-columns:repeat(3,1fr);
    }

    .advantages{
        grid-template-columns:repeat(3,1fr);
    }


    .decision-grid{
    grid-template-columns:1fr;
    }

   .expectation{
    grid-template-columns:1fr;
    }

    .reference-grid{
    grid-template-columns:1fr;
    }

    .industry-reference{

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

    }
    .knowledge-grid{
    grid-template-columns:1fr;
    }

    .contact-reasons{
    grid-template-columns:1fr;
    }
}

@media (max-width:768px){
    .layout{
        grid-template-columns:1fr;
        padding:var(--space-md);
    }

    .navigation{
        position:static;
        margin-bottom:var(--space-lg);
        display:none;
    }

    .navigation.navigation--open{
        display:block;
    }

    .navigation-toggle{
        display:block;
        width:100%;
        padding:var(--space-md);
        background:var(--color-primary);
        color:var(--color-accent);
        border:1px solid var(--color-accent);
        border-radius:var(--radius-md);
        font-family:var(--font-heading);
        font-weight:600;
        cursor:pointer;
    }

    .hero{
        grid-template-columns:1fr;
    }

    .hero__title{
        font-size:2rem;
        line-height:1.15;
    }

    .hero__content{
        max-width:none;
    }

    .hero__visual{
        display:none;
    }

    .services__grid{
        grid-template-columns:1fr;
    }

    .industries__grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .industries__item{
        border-right:none;
        border-bottom:1px solid #ddd;
    }

    .industries__item:last-child{
        grid-column:1 / -1;
        border-bottom:none;
    }

    .btn-modern{
        display:block;
        text-align:center;
    }

    .footer{
        padding:var(--space-lg);
    }


    .footer__bottom{
        flex-direction:column;
        gap:var(--space-md);
        text-align:center;
    }

    .topic-grid{
    grid-template-columns:1fr;
    }

    .advantages{
    grid-template-columns:1fr;
    }

.service-overview{
    grid-template-columns:1fr;
    }

.decision-grid{
    grid-template-columns:1fr;
    }

    .workflow{
    grid-template-columns:1fr;
    }

    .expectation{
    grid-template-columns:1fr;
    }

    .reference-grid{
    grid-template-columns:1fr;
    }

    .industry-reference{
        grid-template-columns:1fr;
    }

        .knowledge-grid{
    grid-template-columns:1fr;
    }

    .contact-reasons{
    grid-template-columns:1fr;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}