:root{
    --dark:#06111d;
    --dark2:#071a2d;
    --navy:#09213b;
    --blue:#2168d7;
    --green:#76bf00;
    --green2:#94d82d;
    --text:#082346;
    --muted:#51657f;
    --line:#dce6f2;
    --soft:#f4f8fd;
    --soft2:#eef5ff;
    --white:#fff;
    --shadow:0 14px 34px rgba(8,35,70,.10);
    --shadow2:0 22px 55px rgba(8,35,70,.14);
    --radius:18px;
    --max:1520px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    font-size:15px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
    width:min(var(--max),calc(100% - 56px));
    margin:auto;
}

/* =========================
   HEADER
========================= */
.site-header{
    position:absolute;
    z-index:100;
    width:100%;
    top:0;
    left:0;
    color:#fff;
    background:linear-gradient(180deg,rgba(3,10,18,.72),rgba(3,10,18,0));
}

.nav{
    height:74px;
    display:flex;
    align-items:center;
    gap:24px;
    max-width:1520px;
    margin:auto;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    font-size:25px;
    letter-spacing:-.9px;
    line-height:1;
    text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.brand b{color:var(--green);font-weight:900}

.brand-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:var(--green);
    flex:0 0 34px;
}
.brand-mark svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linejoin:round;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:24px;
    margin-left:auto;
    font-weight:800;
    font-size:14px;
}
.main-nav a{
    position:relative;
    opacity:.96;
    white-space:nowrap;
}
.main-nav a.has-sub::after{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-3px);
    margin-left:8px;
    opacity:.85;
}
.main-nav a.is-active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-20px;
    height:3px;
    background:var(--green);
    border-radius:10px;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:18px;
    font-weight:800;
    font-size:14px;
}
.nav-toggle{
    display:none;
    margin-left:auto;
    background:transparent;
    border:0;
    color:#fff;
    padding:4px;
}
.nav-toggle svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:10px;
    padding:12px 22px;
    font-weight:900;
    border:0;
    cursor:pointer;
    transition:.2s;
    font-size:14px;
    line-height:1.1;
    white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-green{
    background:linear-gradient(135deg,var(--green),#62b000);
    color:#fff;
    box-shadow:0 10px 23px rgba(118,191,0,.28);
}
.btn-small{padding:11px 18px;border-radius:10px}
.btn-outline{
    border:2px solid rgba(255,255,255,.66);
    color:#fff;
    background:rgba(0,0,0,.10);
}
.btn-outline-light,
.btn-outline-dark{
    border:2px solid #cbd7e6;
    color:var(--text);
    background:#fff;
}

/* =========================
   HERO
   WICHTIG:
   - 3. background-size = auto 100%
   - 3. background-position = 58% center
   Damit zoomt das Bild weiter raus
   und Stefan sitzt sichtbarer / mittiger.
========================= */
.hero{
    min-height:610px;
    padding:92px 0 28px;
    color:#fff;
    position:relative;
    overflow:hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(2,8,15,.97) 0%,
            rgba(2,8,15,.92) 28%,
            rgba(2,8,15,.66) 50%,
            rgba(2,8,15,.28) 72%,
            rgba(2,8,15,.06) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,8,15,.28) 0%,
            rgba(2,8,15,.03) 40%,
            rgba(2,8,15,.22) 100%
        ),
        url("../img/hero-stefan-wide.png");

    background-size:
        100% 100%,
        100% 100%,
        auto 100%;

    background-position:
        center center,
        center center,
        58% center;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-color:#06111d;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 76% 38%, rgba(255,210,120,.11), rgba(255,210,120,0) 18%),
        radial-gradient(circle at 74% 45%, rgba(255,255,255,.05), rgba(255,255,255,0) 24%);
    pointer-events:none;
    z-index:1;
}

.hero:after{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-54px;
    height:96px;
    background:#fff;
    border-radius:50% 50% 0 0/100% 100% 0 0;
    z-index:1;
}

.hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(640px,760px) 1fr;
    gap:34px;
    align-items:center;
    min-height:490px;
}

.hero h1{
    font-size:clamp(32px,2.45vw,42px) !important;
    line-height:1.1 !important;
    letter-spacing:-1px !important;
    max-width:650px !important;
}
.hero h1 span{color:var(--green)}

.hero p{
    font-size:16px;
    line-height:1.45;
    color:#edf5ff;
    max-width:690px;
    margin:0 0 14px;
    font-weight:700;
    text-shadow:0 2px 13px rgba(0,0,0,.35);
}

.check-list{
    list-style:none;
    padding:0;
    margin:18px 0 22px;
    display:grid;
    gap:9px;
}
.check-list li{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:850;
    color:#fff;
    font-size:15px;
    text-shadow:0 2px 10px rgba(0,0,0,.32);
}
.check-list li:before{
    content:"✓";
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--green);
    color:#06210b;
    font-weight:900;
    font-size:13px;
    flex:0 0 20px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:0 0 18px;
}
.hero-actions .btn{
    min-width:148px;
    height:47px;
    padding-inline:22px;
    border-radius:11px;
}

.lead-mini{
    width:min(585px,100%);
    display:grid;
    grid-template-columns:48px 1.08fr 1fr auto;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    min-height:62px;
    background:rgba(39,48,60,.82);
    border:1px solid rgba(255,255,255,.24);
    border-radius:15px;
    backdrop-filter:blur(12px);
    box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.lead-mini:before{
    content:"✉";
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.45);
    display:grid;
    place-items:center;
    font-size:19px;
    color:#fff;
}
.lead-mini strong{
    font-size:12.3px;
    line-height:1.3;
    display:block;
    color:#fff;
}
.lead-mini input{
    height:38px;
    border-radius:8px;
    border:0;
    padding:0 14px;
    min-width:0;
    font-size:13px;
}
.lead-mini .btn{
    padding:10px 14px;
    font-size:12.8px;
    border-radius:8px;
    min-width:124px;
    height:38px;
}

/* rechter Hero-Bereich */
.hero-person{
    position:relative;
    min-height:420px;
}
.person-card{
    display:none;
}
.person-card:before{
    display:none;
}

/* Boxen weiter nach rechts */
.floating-stats{
    position:absolute;
    right:-26px;
    top:118px;
    display:grid;
    gap:14px;
    z-index:4;
}
.float-card{
    width:168px;
    min-height:76px;
    background:#fff;
    color:var(--text);
    border-radius:15px;
    padding:14px 15px;
    box-shadow:0 16px 36px rgba(0,0,0,.22);
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:900;
    font-size:15px;
}
.float-card svg{
    width:25px;
    height:25px;
    stroke:var(--green);
    fill:none;
    stroke-width:2.2;
    flex:0 0 25px;
}
.float-card small{
    display:block;
    color:#263e58;
    font-weight:850;
    line-height:1.22;
    font-size:12.5px;
}

/* =========================
   ALLGEMEIN
========================= */
.section{padding:46px 0}
.section.tight{padding:42px 0 44px}
.section-soft{background:linear-gradient(180deg,#fbfdff,#fff)}
.section-blue{
    background:#edf5ff;
    padding-top:44px;
    padding-bottom:44px;
}

.section-title{
    text-align:center;
    margin:0 auto 24px;
}
.section-title h2{
    font-size:28px;
    line-height:1.16;
    letter-spacing:-.75px;
    margin:0 0 8px;
    font-weight:900;
    color:#082346;
}
.section-title p{
    color:var(--muted);
    font-size:16px;
}

/* =========================
   STEPS
========================= */
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:58px;
    position:relative;
    max-width:1260px;
    margin:auto;
}
.step-card{
    text-align:left;
    position:relative;
    padding:0 10px;
}
.step-art{
    height:84px;
    display:grid;
    place-items:center;
    margin-bottom:2px;
}
.step-art img{height:84px}
.step-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.step-no{
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    flex:0 0 30px;
    font-size:14px;
}
.step-card h3{
    margin:0;
    font-size:17px;
    color:#092344;
    font-weight:900;
}
.step-card p{
    color:var(--muted);
    line-height:1.47;
    font-size:14px;
    margin:0;
}
.steps:before,
.steps:after{
    content:"";
    position:absolute;
    top:56px;
    width:150px;
    height:28px;
    border-top:3px solid #b9d0ed;
    border-radius:50%;
    opacity:.8;
}
.steps:before{left:28%}
.steps:after{right:28%}

/* =========================
   SERVICES
========================= */
.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    max-width:1280px;
    margin:auto;
}
.service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 8px 24px rgba(30,60,100,.055);
    padding:15px;
    display:grid;
    grid-template-columns:46px 1fr;
    gap:13px;
    align-items:start;
    min-height:100px;
}
.service-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#edf5ff;
    color:#1470e8;
}
.service-icon svg,
.feature svg,
.mini-icon svg,
.plane svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.hue1{background:#eaf4ff;color:#1572e8}
.hue2{background:#effbe7;color:#76bf19}
.hue3{background:#f1edff;color:#7a56e8}
.hue4{background:#e9fbff;color:#11a0b9}
.hue5{background:#fff0f1;color:#e4384e}
.hue6{background:#eef6ff;color:#1b7ee5}
.hue0{background:#fff8df;color:#e2a600}

.service-card h3{
    margin:0 0 5px;
    font-size:15.5px;
    line-height:1.15;
    color:#092344;
    font-weight:900;
}
.service-card p{
    margin:0;
    color:var(--muted);
    line-height:1.35;
    font-size:12.6px;
}

/* =========================
   FEATURES
========================= */
.features{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    max-width:1250px;
    margin:auto;
}
.feature{text-align:center}
.feature svg{
    color:var(--blue);
    width:42px;
    height:42px;
    margin:0 auto 12px;
}
.feature h3{
    font-size:16px;
    margin:0 0 7px;
    font-weight:900;
}
.feature p{
    color:var(--muted);
    line-height:1.42;
    font-size:13.5px;
    margin:0;
}

/* =========================
   PRICING
========================= */
/* =========================================================
   PREISE ALS CAROUSEL
   Desktop: 3 Karten sichtbar
   Tablet: 2 Karten sichtbar
   Mobile: 1 Karte sichtbar
   ========================================================= */

.pricing-section{
    position:relative;
    overflow:hidden;
}

.price-carousel-wrap{
    position:relative;
    max-width:1260px;
    margin:0 auto;
    padding:0 58px;
}

.price-carousel{
    display:flex;
    gap:28px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:18px 0 22px;
}

.price-carousel::-webkit-scrollbar{
    display:none;
}

.price-card{
    position:relative;
    flex:0 0 calc((100% - 56px) / 3);
    scroll-snap-align:start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:26px 30px;
    text-align:center;
    box-shadow:0 14px 32px rgba(10,35,70,.07);
    min-height:440px;
    display:flex;
    flex-direction:column;
}

.price-card.hot{
    border:3px solid var(--green);
    transform:none;
    box-shadow:0 18px 42px rgba(118,191,0,.14);
}

.price-card .label{
    position:absolute;
    left:50%;
    top:-14px;
    transform:translateX(-50%);
    background:var(--green);
    color:#fff;
    border-radius:999px;
    padding:6px 18px;
    font-weight:900;
    font-size:12px;
    white-space:nowrap;
    z-index:3;
}

.price-card h3{
    font-size:22px;
    margin:0 0 8px;
    color:var(--text);
}

.price-card p{
    color:var(--muted);
    min-height:42px;
    margin:0;
    font-size:14px;
    line-height:1.35;
}

.price{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
    margin:18px 0 22px;
}

.price b{
    font-size:38px;
    line-height:1;
    letter-spacing:-1px;
}

.price span{
    color:var(--muted);
    padding-bottom:5px;
}

.price-card ul{
    list-style:none;
    margin:0 0 24px;
    padding:0;
    text-align:left;
    display:grid;
    gap:9px;
}

.price-card li{
    display:flex;
    gap:8px;
    align-items:flex-start;
    color:#18365a;
    font-weight:800;
    font-size:14px;
    line-height:1.35;
}

.price-card li svg{
    width:16px;
    height:16px;
    stroke:var(--green);
    fill:none;
    stroke-width:3;
    flex:0 0 16px;
    margin-top:2px;
}

.price-card .btn{
    padding:12px 22px;
    min-width:150px;
    margin-top:auto;
}

/* Pfeile */
.price-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    display:grid;
    place-items:center;
    font-size:34px;
    line-height:1;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(8,35,70,.14);
    transition:.2s ease;
}

.price-arrow:hover{
    background:var(--green);
    color:#fff;
    border-color:var(--green);
    transform:translateY(-50%) scale(1.05);
}

.price-arrow-left{
    left:0;
}

.price-arrow-right{
    right:0;
}

.price-arrow.is-disabled{
    opacity:.35;
    pointer-events:none;
}

/* Punkte */
.price-dots{
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:6px;
}

.price-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    border:0;
    background:#c9d6e6;
    cursor:pointer;
    transition:.2s ease;
}

.price-dot.active{
    width:28px;
    border-radius:999px;
    background:var(--green);
}

/* Tablet */
@media(max-width:900px){
    .price-carousel-wrap{
        max-width:760px;
        padding:0 52px;
    }

    .price-card{
        flex-basis:calc((100% - 28px) / 2);
        min-height:420px;
    }
}

/* Mobile */
@media(max-width:640px){
    .price-carousel-wrap{
        max-width:420px;
        padding:0 44px;
    }

    .price-carousel{
        gap:18px;
    }

    .price-card{
        flex-basis:100%;
        min-height:auto;
        padding:24px 24px;
    }

    .price-arrow{
        width:38px;
        height:38px;
        font-size:28px;
    }

    .price-arrow-left{
        left:0;
    }

    .price-arrow-right{
        right:0;
    }
}

/* =========================
   MORE SECTION
========================= */
.more-grid{
    display:grid;
    grid-template-columns:.9fr 1.15fr .78fr;
    gap:34px;
    align-items:center;
    max-width:1380px;
    margin:auto;
}
.more-grid h2{
    font-size:29px;
    line-height:1.18;
    margin:0 0 14px;
}
.more-grid p{
    color:var(--muted);
    line-height:1.55;
    margin:0 0 18px;
}
.more-grid .check-list{margin:0 0 18px}
.more-grid .check-list li{
    color:#17375a;
    font-size:14px;
}
.device-scene{
    height:240px;
    background:url('../img/dashboard-devices.svg') center/contain no-repeat;
}
.side-card{
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:18px;
    padding:25px;
}
.side-card h3{
    font-size:20px;
    margin:0;
}
.side-card ul{
    list-style:none;
    margin:18px 0 0;
    padding:0;
    display:grid;
    gap:13px;
}
.side-card li{
    display:flex;
    gap:11px;
    font-weight:850;
    color:#24445f;
    font-size:14px;
}
.side-card li:before{
    content:"✓";
    width:22px;
    height:22px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:#fff;
    flex:0 0 22px;
}

/* =========================
   CTA + FOOTER
========================= */
.final-cta{
    background:linear-gradient(135deg,#06182a,#082a48);
    color:#fff;
    padding:26px 0;
    border-radius:50% 50% 0 0/22% 22% 0 0;
}
.cta-grid{
    display:grid;
    grid-template-columns:76px 1fr 1.45fr;
    gap:24px;
    align-items:center;
}
.plane{
    width:68px;
    height:68px;
    background:#fff;
    color:var(--green);
    border-radius:50%;
    display:grid;
    place-items:center;
}
.plane svg{width:34px;height:34px}
.final-cta h2{
    margin:0 0 6px;
    font-size:27px;
}
.final-cta p{
    margin:0;
    color:#dce8f5;
    line-height:1.4;
}
.cta-meta{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:18px;
    align-items:center;
}
.cta-meta span{
    display:flex;
    gap:9px;
    align-items:center;
    color:#dfeaf6;
    font-size:14px;
    line-height:1.25;
}
.cta-meta svg{
    width:25px;
    height:25px;
    stroke:var(--green);
    fill:none;
    stroke-width:2;
}
.cta-meta small{
    grid-column:3;
    text-align:center;
    color:#dce8f5;
    font-size:12px;
}

.site-footer{
    padding:22px 0;
    background:#fff;
}
.footer-grid{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
}
.footer-grid .brand{
    color:var(--text);
    font-size:24px;
    text-shadow:none;
}
.footer-grid p{
    color:#6b7a8d;
    margin:0;
}
.footer-grid nav{
    display:flex;
    gap:24px;
    color:#23405f;
}

/* =========================
   SUB HERO
========================= */
.hero-sub{
    min-height:360px;
    padding:110px 0 58px;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(2,8,15,.96),rgba(2,8,15,.86) 38%,rgba(2,8,15,.44) 67%,rgba(2,8,15,.12)),
        url('../img/hero-stefan-wide.png') center center / cover no-repeat;
}
.hero-sub h1{
    font-size:clamp(36px,3.3vw,50px);
    line-height:1.06;
    margin:0 0 14px;
    max-width:900px;
    letter-spacing:-1.4px;
    text-shadow:0 4px 20px rgba(0,0,0,.35);
}
.hero-sub h1 span{color:var(--green)}
.hero-sub p{
    max-width:760px;
    color:#ecf5ff;
    font-size:17px;
    line-height:1.55;
}

/* =========================
   FILTER / PROJECTS / ETC.
========================= */
.filter-tabs{
    display:flex;
    gap:16px;
    padding:16px;
    background:#fff;
    border-radius:999px;
    box-shadow:var(--shadow);
    margin-top:-30px;
    position:relative;
    z-index:5;
}
.filter-tabs button{
    border:0;
    background:transparent;
    padding:12px 22px;
    border-radius:999px;
    color:#24405e;
    font-weight:900;
    cursor:pointer;
}
.filter-tabs .active{
    background:#0d2d57;
    color:#fff;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.project-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.project-card img{
    width:100%;
    height:210px;
    object-fit:cover;
    background:#eef5ff;
}
.project-card > div{padding:22px}
.badge{
    display:inline-flex;
    background:#eaf3ff;
    color:#1a67c9;
    border-radius:999px;
    padding:6px 10px;
    font-weight:900;
    font-size:12px;
}
.project-card h3{
    font-size:22px;
    margin:14px 0 8px;
}
.project-card p{
    color:var(--muted);
    line-height:1.48;
}
.project-card a{
    color:var(--blue);
    font-weight:900;
}

.metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    background:#fff;
    border-radius:22px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.metric{
    text-align:center;
    padding:28px 18px;
    border-right:1px solid var(--line);
}
.metric:last-child{border-right:0}
.metric svg{
    width:44px;
    height:44px;
    color:var(--blue);
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    margin:0 auto 8px;
}
.metric b{
    font-size:34px;
    color:var(--blue);
}
.metric span{
    display:block;
    font-weight:900;
}

.contact-layout{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:28px;
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:30px;
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.full{grid-column:1/-1}

label{
    font-weight:900;
    display:block;
    margin:14px 0 8px;
}
input,select,textarea{
    width:100%;
    border:1px solid #cfd9e5;
    border-radius:12px;
    padding:15px;
    font:inherit;
}
textarea{min-height:130px}

.option-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.option{
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    text-align:center;
    font-weight:900;
    background:#fff;
}
.option:first-child{
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(118,191,25,.15);
}

.page-simple{padding:120px 0 70px}
.admin-layout{padding:110px 0 60px}
.admin-menu{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.admin-menu a{
    padding:10px 14px;
    background:#eef5ff;
    border-radius:10px;
    font-weight:800;
}
.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}
.table th,
.table td{
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left;
}
.success{
    padding:14px 18px;
    background:#e9f9df;
    border:1px solid #b9e89c;
    border-radius:12px;
    margin:0 0 20px;
    color:#2f650d;
}
.error{
    padding:14px 18px;
    background:#fff0f0;
    border:1px solid #ffcccc;
    border-radius:12px;
    margin:0 0 20px;
    color:#9d1d1d;
}

/* =========================
   RESPONSIVE
========================= */
@media (min-width:1600px){
    .container{width:min(1540px, calc(100% - 72px))}
    .hero-grid{grid-template-columns:minmax(690px,800px) 1fr}
    .hero h1{font-size:58px}
    .hero{
        background-position:
            center center,
            center center,
            55% center;
    }
}

@media (max-width:1200px){
    .hero-grid{grid-template-columns:minmax(520px,650px) 1fr}
    .hero h1{font-size:44px}
    .services-grid{grid-template-columns:repeat(3,1fr)}
    .floating-stats{right:-16px}
    .hero{
        background-position:
            center center,
            center center,
            60% center;
    }
}

@media (max-width:1100px){
    .container{width:min(var(--max),calc(100% - 36px))}
}

@media (max-width:900px){
    .site-header{
        background:rgba(5,14,25,.88);
        backdrop-filter:blur(12px);
    }

    .nav{height:72px}
    .main-nav,.nav-actions{display:none}
    .nav-toggle{display:block}

    .site-header.menu-open .main-nav,
    .site-header.menu-open .nav-actions{
        display:flex;
        position:absolute;
        left:18px;
        right:18px;
        top:76px;
        background:#071727;
        border:1px solid rgba(255,255,255,.12);
        border-radius:18px;
        padding:18px;
        flex-direction:column;
        align-items:flex-start;
    }
    .site-header.menu-open .nav-actions{top:260px}

    .container{width:min(100% - 34px,var(--max))}

    .hero{
        min-height:auto;
        padding:96px 0 44px;
        background-size:
            100% 100%,
            100% 100%,
            auto 100%;
        background-position:
            center center,
            center center,
            65% center;
    }

    .hero-grid,
    .more-grid,
    .contact-layout{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .hero-person{display:none}
    .hero h1{
        font-size:36px;
        max-width:640px;
    }
    .hero p{font-size:16px}

    .lead-mini{
        grid-template-columns:54px 1fr;
    }
    .lead-mini strong{grid-column:2}
    .lead-mini input,
    .lead-mini button{grid-column:1/-1}

    .steps,
    .features,
    .project-grid,
    .metrics,
    .price-grid{
        grid-template-columns:1fr 1fr;
    }
    .services-grid{grid-template-columns:1fr 1fr}
    .option-grid{grid-template-columns:1fr 1fr}
    .cta-grid,
    .footer-grid,
    .cta-meta{grid-template-columns:1fr}
    .filter-tabs{
        border-radius:22px;
        overflow:auto;
    }
    .hero-sub{
        min-height:330px;
        padding:96px 0 48px;
        background-position:64% center;
    }
    .hero-sub h1{font-size:36px}
    .final-cta{border-radius:34px 34px 0 0}
    .cta-meta small{
        grid-column:auto;
        text-align:left;
    }
}

@media (max-width:640px){
    body{font-size:14px}
    .container{width:min(100% - 26px,var(--max))}

    .brand{font-size:22px}
    .brand-mark,
    .brand-mark svg{
        width:31px;
        height:31px;
    }

    .hero{
        padding:92px 0 42px;
        background-size:
            100% 100%,
            100% 100%,
            auto 100%;
        background-position:
            center center,
            center center,
            68% center;
    }

    .hero h1{
        font-size:31px;
        line-height:1.05;
        letter-spacing:-1px;
    }
    .hero p{
        font-size:14.5px;
        font-weight:600;
    }

    .floating-stats{display:none}

    .section{padding:42px 0}
    .section.tight{padding:38px 0}
    .section-title h2{font-size:25px}

    .steps,
    .services-grid,
    .features,
    .project-grid,
    .metrics,
    .price-grid,
    .form-grid,
    .option-grid{
        grid-template-columns:1fr;
    }

    .steps:before,
    .steps:after{display:none}

    .service-card{
        grid-template-columns:44px 1fr;
        padding:16px;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }
    .btn{width:100%}

    .lead-mini{
        grid-template-columns:44px 1fr;
        width:100%;
        min-height:0;
        padding:12px;
    }
    .lead-mini strong{grid-column:2}
    .lead-mini input,
    .lead-mini button{grid-column:1/-1}

    .hero-sub{
        padding-top:98px;
        background-position:70% center;
    }
    .hero-sub h1{font-size:30px}

    .project-card{
        display:grid;
        grid-template-columns:120px 1fr;
    }
    .project-card img{
        height:100%;
        min-height:145px;
    }
    .project-card > div{padding:16px}

    .metric{padding:20px}

    .plane{
        width:62px;
        height:62px;
    }

    .footer-grid nav{flex-wrap:wrap}
    .price-card.hot{transform:none}
    .more-grid h2{font-size:25px}
    .device-scene{height:210px}
}

/* =========================================================
   SMW365 HERO FORM FIX
   Ziel: Lead-Box wie Bild 1/2 – kompakter, breiter, sauber ausgerichtet
   Datei optional ans Ende deiner assets/css/style.css kopieren
   ========================================================= */

.hero-copy{
    max-width: 760px;
}

.hero h1{
    font-size: clamp(38px, 3.05vw, 52px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1.25px !important;
    max-width: 760px !important;
    margin-bottom: 18px !important;
}

.hero p{
    max-width: 720px !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
}

.hero-actions{
    margin: 22px 0 18px !important;
    gap: 14px !important;
}

.hero-actions .btn{
    height: 48px !important;
    min-width: 148px !important;
    border-radius: 10px !important;
    padding: 0 24px !important;
}

/* Lead-Box wie Vorlage: kompakt, länglich, eine Zeile */
.lead-mini{
    width: min(690px, 100%) !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 58px 1.18fr 1.25fr 148px !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 17px !important;
    background: rgba(39, 48, 60, .86) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.lead-mini::before{
    content: "✉" !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.03) !important;
    flex: 0 0 54px !important;
}

.lead-mini strong{
    display: block !important;
    color: #ffffff !important;
    font-size: 13.2px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: -.15px !important;
    margin: 0 !important;
}

.lead-mini input{
    width: 100% !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 0 17px !important;
    min-width: 0 !important;
    background: #ffffff !important;
    color: #082346 !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.16) !important;
    outline: none !important;
}

.lead-mini input::placeholder{
    color: #7c8795 !important;
}

.lead-mini .btn,
.lead-mini button{
    width: 100% !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--green), #62b000) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 20px rgba(118,191,0,.26) !important;
}

/* Falls die weiße Welle die Box zu stark berührt */
.hero::after{
    bottom: -58px !important;
    height: 106px !important;
}

@media (max-width: 900px){
    .lead-mini{
        width: min(620px, 100%) !important;
        grid-template-columns: 54px 1fr !important;
        min-height: 0 !important;
        padding: 12px !important;
    }

    .lead-mini strong{
        grid-column: 2 !important;
    }

    .lead-mini input,
    .lead-mini .btn,
    .lead-mini button{
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px){
    .hero h1{
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .lead-mini{
        grid-template-columns: 48px 1fr !important;
        border-radius: 15px !important;
    }

    .lead-mini::before{
        width: 48px !important;
        height: 48px !important;
    }
}
/* =========================================================
   SMW365 NAV DROPDOWN FIX
   Sublinks werden standardmäßig versteckt
   ========================================================= */

/* Navigation sauber halten */
.main-nav{
    display:flex !important;
    align-items:center !important;
    gap:24px !important;
    margin-left:auto !important;
    font-weight:800 !important;
    font-size:14px !important;
}

/* Jeder Hauptpunkt */
.nav-item{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
}

/* Hauptlink */
.nav-link{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    color:#fff !important;
    opacity:.96 !important;
    white-space:nowrap !important;
    padding:28px 0 !important;
    line-height:1 !important;
}

/* Aktive Linie */
.nav-item.is-active > .nav-link::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:16px !important;
    height:3px !important;
    background:var(--green) !important;
    border-radius:999px !important;
}

/* Pfeil */
.nav-chevron{
    width:8px !important;
    height:8px !important;
    border-right:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:rotate(45deg) translateY(-3px) !important;
    opacity:.85 !important;
    transition:.2s ease !important;
}

/* Dropdown standardmäßig verstecken */
.nav-dropdown{
    position:absolute !important;
    top:100% !important;
    left:50% !important;
    transform:translateX(-50%) translateY(12px) !important;
    min-width:340px !important;
    max-width:380px !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:.18s ease !important;
    z-index:9999 !important;
}

/* Nur bei Hover anzeigen */
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

/* Dropdown-Box */
.nav-dropdown-inner{
    position:relative !important;
    display:grid !important;
    gap:4px !important;
    background:rgba(255,255,255,.98) !important;
    color:var(--text) !important;
    border:1px solid rgba(220,230,242,.95) !important;
    border-radius:18px !important;
    padding:12px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

/* kleiner Pfeil oben */
.nav-dropdown-inner::before{
    content:"" !important;
    position:absolute !important;
    top:-8px !important;
    left:50% !important;
    width:16px !important;
    height:16px !important;
    background:#fff !important;
    border-left:1px solid rgba(220,230,242,.95) !important;
    border-top:1px solid rgba(220,230,242,.95) !important;
    transform:translateX(-50%) rotate(45deg) !important;
}

/* Sublinks */
.nav-sub-link{
    position:relative !important;
    display:block !important;
    padding:13px 14px !important;
    border-radius:13px !important;
    color:var(--text) !important;
    transition:.18s ease !important;
    white-space:normal !important;
    line-height:1.25 !important;
}

.nav-sub-link:hover{
    background:#eef5ff !important;
    transform:translateX(3px) !important;
}

.nav-sub-link strong{
    display:block !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    color:#082346 !important;
}

.nav-sub-link span{
    display:block !important;
    margin-top:4px !important;
    color:var(--muted) !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
}

/* Alte has-sub Pfeile deaktivieren */
.main-nav a.has-sub::after{
    display:none !important;
}

/* =========================================================
   MOBILE NAV FIX
   ========================================================= */

@media(max-width:900px){
    .main-nav{
        display:none !important;
    }

    .site-header.menu-open .main-nav{
        display:flex !important;
        position:absolute !important;
        left:18px !important;
        right:18px !important;
        top:76px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;
        background:#071727 !important;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:18px !important;
        padding:14px !important;
        z-index:9999 !important;
    }

    .site-header.menu-open .nav-item{
        display:block !important;
        width:100% !important;
    }

    .site-header.menu-open .nav-link{
        padding:13px 10px !important;
        justify-content:space-between !important;
    }

    .site-header.menu-open .nav-dropdown{
        position:static !important;
        transform:none !important;
        min-width:0 !important;
        max-width:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        display:none !important;
        margin:0 0 8px !important;
    }

    .site-header.menu-open .nav-item.open .nav-dropdown{
        display:block !important;
    }

    .site-header.menu-open .nav-dropdown-inner{
        background:rgba(255,255,255,.06) !important;
        border:1px solid rgba(255,255,255,.10) !important;
        box-shadow:none !important;
        padding:8px !important;
    }

    .site-header.menu-open .nav-dropdown-inner::before{
        display:none !important;
    }

    .site-header.menu-open .nav-sub-link{
        color:#fff !important;
        padding:11px 12px !important;
    }

    .site-header.menu-open .nav-sub-link strong{
        color:#fff !important;
    }

    .site-header.menu-open .nav-sub-link span{
        color:rgba(255,255,255,.72) !important;
    }

    .site-header.menu-open .nav-item.is-active > .nav-link::after{
        display:none !important;
    }
}
/* =========================================================
   PRODUKTE SEITE / SUB-SEITEN CONTENT
   ========================================================= */

/* =========================================================
   PRODUKTE SEITE – STÄRKERER CONTENT MIT BILDERN
   ========================================================= */

.products-hero{
    min-height:430px;
    padding:128px 0 76px;
    background:
        linear-gradient(90deg,rgba(2,8,15,.97),rgba(2,8,15,.86) 42%,rgba(2,8,15,.42) 72%,rgba(2,8,15,.16)),
        url('../img/hero-stefan-wide.png') right bottom / cover no-repeat;
}

.products-hero-grid{
    display:grid;
    grid-template-columns:1.1fr .55fr;
    gap:42px;
    align-items:center;
}

.products-hero-content h1{
    max-width:900px;
}

.products-hero-content p{
    max-width:760px;
}

.products-hero-card{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    border-radius:26px;
    padding:28px;
    color:#fff;
    box-shadow:0 24px 60px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
}

.products-hero-card-icon{
    width:64px;
    height:64px;
    border-radius:20px;
    display:grid;
    place-items:center;
    color:var(--green);
    background:rgba(255,255,255,.12);
    margin-bottom:18px;
}

.products-hero-card-icon svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.products-hero-card h3{
    margin:0 0 10px;
    font-size:24px;
    font-weight:950;
}

.products-hero-card p{
    margin:0 0 18px;
    color:#dce8f5;
    line-height:1.55;
}

.products-hero-card ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:9px;
}

.products-hero-card li{
    position:relative;
    padding-left:25px;
    color:#fff;
    font-weight:850;
}

.products-hero-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--green);
    font-weight:950;
}

/* Jump Navigation */
.products-nav-section{
    position:relative;
    z-index:20;
    margin-top:-36px;
}

.products-jump-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    padding:12px;
    box-shadow:0 18px 42px rgba(8,35,70,.12);
}

.products-jump-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    border-radius:999px;
    color:#17375a;
    font-weight:900;
    font-size:14px;
    transition:.18s ease;
}

.products-jump-nav a:hover{
    background:#eef5ff;
    color:var(--blue);
}

/* Intro */
.products-intro{
    background:#fff;
}

.products-intro-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:42px;
    align-items:center;
}

.products-intro h2{
    margin:0 0 18px;
    color:var(--text);
    font-size:clamp(30px,3vw,44px);
    line-height:1.12;
    letter-spacing:-1px;
    font-weight:950;
}

.products-intro p{
    color:var(--muted);
    font-size:16px;
    line-height:1.65;
    margin:0;
}

.products-intro-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.products-intro-points article{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    box-shadow:0 14px 34px rgba(8,35,70,.07);
}

.products-intro-points svg{
    width:32px;
    height:32px;
    fill:none;
    stroke:var(--blue);
    stroke-width:2;
    margin-bottom:14px;
}

.products-intro-points strong{
    display:block;
    color:var(--text);
    font-size:17px;
    font-weight:950;
    margin-bottom:6px;
}

.products-intro-points span{
    color:var(--muted);
    line-height:1.45;
    font-weight:600;
}

/* Detail Sections */
.product-detail-section{
    scroll-margin-top:96px;
    padding:82px 0;
    background:#fff;
}

.product-detail-alt{
    background:linear-gradient(180deg,#f5f9ff,#fff);
}

.product-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
}

.product-kicker{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#eaf5ff;
    color:#1767c8;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.35px;
    margin-bottom:16px;
}

.product-kicker.dark{
    background:rgba(255,255,255,.12);
    color:#fff;
}

.product-detail-content h2{
    margin:0 0 18px;
    color:var(--text);
    font-size:clamp(30px,3vw,46px);
    line-height:1.1;
    letter-spacing:-1.1px;
    font-weight:950;
}

.product-detail-content p{
    margin:0 0 22px;
    color:var(--muted);
    font-size:16px;
    line-height:1.65;
}

.product-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 24px;
}

.product-facts span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#f0f7ff;
    color:#17375a;
    font-weight:900;
    font-size:13.5px;
}

.product-facts svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:var(--green);
    stroke-width:3;
}

.product-checks{
    list-style:none;
    padding:0;
    margin:0 0 28px;
    display:grid;
    gap:12px;
}

.product-checks li{
    position:relative;
    padding-left:34px;
    color:#18365a;
    font-weight:800;
    line-height:1.45;
}

.product-checks li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--green);
    color:#06210b;
    display:grid;
    place-items:center;
    font-size:13px;
    font-weight:950;
}

.product-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

/* Bildkarte */
.product-visual{
    position:relative;
    min-height:430px;
    border-radius:28px;
    overflow:hidden;
    background:
        radial-gradient(circle at 70% 20%, rgba(118,191,0,.18), transparent 28%),
        linear-gradient(135deg,#06182a,#123b64);
    box-shadow:0 28px 70px rgba(8,35,70,.18);
    border:1px solid rgba(220,230,242,.9);
}

.product-visual img{
    width:100%;
    height:100%;
    min-height:430px;
    object-fit:cover;
}

.product-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(2,8,15,.08),rgba(2,8,15,.52)),
        linear-gradient(90deg,rgba(2,8,15,.10),rgba(2,8,15,0));
    pointer-events:none;
}

.product-visual.no-image::before{
    content:"SMW365.de";
    position:absolute;
    left:32px;
    top:32px;
    color:#fff;
    font-size:32px;
    font-weight:950;
}

.product-visual-overlay{
    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    z-index:2;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.7);
    border-radius:20px;
    padding:20px;
    box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.product-visual-overlay span{
    display:inline-flex;
    color:var(--blue);
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.35px;
    margin-bottom:8px;
}

.product-visual-overlay strong{
    display:block;
    color:var(--text);
    font-size:20px;
    line-height:1.25;
    font-weight:950;
}

/* Entscheidung */
.products-decision{
    background:#fff;
}

.decision-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.decision-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px;
    box-shadow:0 16px 40px rgba(8,35,70,.08);
    transition:.18s ease;
}

.decision-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 52px rgba(8,35,70,.13);
}

.decision-card svg{
    width:42px;
    height:42px;
    fill:none;
    stroke:var(--blue);
    stroke-width:2;
    margin-bottom:18px;
}

.decision-card h3{
    margin:0 0 12px;
    color:var(--text);
    font-size:22px;
    line-height:1.2;
    font-weight:950;
}

.decision-card p{
    color:var(--muted);
    line-height:1.55;
    margin:0 0 18px;
}

.decision-card a{
    color:var(--blue);
    font-weight:950;
}

/* Final CTA */
.products-final{
    background:#edf5ff;
    padding:58px 0;
}

.products-final-card{
    background:
        radial-gradient(circle at 85% 20%, rgba(118,191,0,.20), transparent 30%),
        linear-gradient(135deg,#06182a,#082a48);
    color:#fff;
    border-radius:30px;
    padding:42px 48px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:34px;
    box-shadow:0 24px 60px rgba(8,35,70,.20);
}

.products-final-card h2{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.15;
    letter-spacing:-.8px;
    font-weight:950;
}

.products-final-card p{
    margin:0;
    color:#dce8f5;
    line-height:1.55;
    max-width:800px;
}

/* Tablet */
@media(max-width:900px){
    .products-hero-grid,
    .products-intro-grid,
    .product-detail-grid,
    .decision-grid,
    .products-final-card{
        grid-template-columns:1fr;
    }

    .products-hero{
        padding:108px 0 62px;
    }

    .products-nav-section{
        margin-top:-28px;
    }

    .products-jump-nav{
        border-radius:24px;
        justify-content:flex-start;
    }

    .products-jump-nav a{
        min-height:38px;
        font-size:13px;
    }

    .product-detail-section{
        padding:60px 0;
    }

    .product-visual{
        min-height:340px;
    }

    .product-visual img{
        min-height:340px;
    }

    .products-final-card{
        padding:34px;
    }
}

/* Handy */
@media(max-width:640px){
    .products-hero{
        padding:98px 0 52px;
    }

    .products-hero-card{
        padding:22px;
    }

    .products-jump-nav{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        padding:10px;
        border-radius:18px;
    }

    .products-jump-nav a{
        justify-content:flex-start;
        background:#f4f8fd;
    }

    .products-intro-points{
        grid-template-columns:1fr;
    }

    .product-detail-content h2{
        font-size:28px;
    }

    .product-actions{
        display:grid;
    }

    .product-visual{
        min-height:280px;
        border-radius:22px;
    }

    .product-visual img{
        min-height:280px;
    }

    .product-visual-overlay{
        left:16px;
        right:16px;
        bottom:16px;
        padding:16px;
        border-radius:16px;
    }

    .product-visual-overlay strong{
        font-size:17px;
    }

    .decision-card{
        padding:24px;
    }

    .products-final-card{
        padding:28px;
        border-radius:24px;
    }

    .products-final-card h2{
        font-size:26px;
    }
}
/* =========================================================
   SMW365 Leistungsdetails mit Bildflächen
   ========================================================= */

.service-detail-section{
    scroll-margin-top:96px;
    padding:78px 0;
    background:#fff;
}

.service-detail-alt{
    background:linear-gradient(180deg,#f5f9ff,#fff);
}

.service-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:52px;
    align-items:center;
}

.service-detail-content h2{
    margin:0 0 18px;
    color:var(--text);
    font-size:clamp(30px,3vw,44px);
    line-height:1.1;
    letter-spacing:-1px;
    font-weight:950;
}

.service-detail-content p{
    margin:0 0 24px;
    color:var(--muted);
    font-size:16px;
    line-height:1.65;
}

.service-detail-visual{
    position:relative;
    min-height:390px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(2,8,15,.10),rgba(2,8,15,.62)),
        radial-gradient(circle at 70% 20%, rgba(118,191,0,.22), transparent 30%),
        linear-gradient(135deg,#06182a,#0a3b45);
    box-shadow:0 28px 70px rgba(8,35,70,.18);
    border:1px solid rgba(220,230,242,.9);
}

.service-detail-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.92;
}

.service-hr::before{
    background-image:url('../img/services/hr-zeiterfassung.jpg');
}

.service-cloud::before{
    background-image:url('../img/services/it-cloud.jpg');
}

.service-hosting::before{
    background-image:url('../img/services/hosting.jpg');
}

.service-smarthome::before{
    background-image:url('../img/services/smarthome.jpg');
}

.service-detail-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(2,8,15,.04),rgba(2,8,15,.58)),
        linear-gradient(90deg,rgba(2,8,15,.18),rgba(2,8,15,0));
}

.service-image-label{
    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    z-index:2;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.7);
    border-radius:20px;
    padding:20px;
    color:var(--text);
    font-size:24px;
    line-height:1.2;
    font-weight:950;
    box-shadow:0 16px 36px rgba(0,0,0,.18);
}

@media(max-width:900px){
    .service-detail-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .service-detail-section{
        padding:58px 0;
    }

    .service-detail-visual{
        min-height:320px;
    }
}

@media(max-width:640px){
    .service-detail-content h2{
        font-size:28px;
    }

    .service-detail-visual{
        min-height:260px;
        border-radius:22px;
    }

    .service-image-label{
        left:16px;
        right:16px;
        bottom:16px;
        padding:16px;
        border-radius:16px;
        font-size:19px;
    }
}