*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.utility{background:#050505;color:#92979f;border-bottom:1px solid #202124;font-size:9px;letter-spacing:1.5px}.utility-inner{height:32px;display:flex;justify-content:space-between;align-items:center}.utility-inner div{display:flex;gap:22px}.utility a:hover{color:#fff}.header{height:88px;position:sticky;top:0;z-index:100;background:rgba(5,5,5,.94);backdrop-filter:blur(18px);border-bottom:1px solid #222;transition:.25s}.header.scrolled{box-shadow:0 15px 45px rgba(0,0,0,.3)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.brand img{width:88px;height:76px;object-fit:contain;display:block;mix-blend-mode:screen}.header nav{display:flex;align-items:center;gap:28px;color:#d8d8db;font-size:13px;font-weight:700}.header nav a{transition:.2s}.header nav a:hover{color:#fff}.nav-cta{background:#e50914!important;color:#fff!important;padding:12px 18px;border-radius:7px}.menu{display:none;background:none;border:0}.menu span{display:block;width:25px;height:2px;background:#fff;margin:5px}
.hero{background:#070809;color:#fff;position:relative;overflow:hidden;min-height:720px}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 75% 42%,rgba(229,9,20,.14),transparent 34%),linear-gradient(110deg,#040506 0%,#0a0b0d 52%,#16090b 100%)}.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(to right,transparent,#000 30%,#000 80%,transparent)}.hero-grid{min-height:720px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;position:relative;z-index:2}.hero-copy{padding:65px 0}.eyebrow{color:#e50914;font-size:10px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;display:block;margin-bottom:18px}.hero h1,.pagehero h1,.section h2,.dark h2,.legal h1{font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:-3px;line-height:.96;margin:0}.hero h1{font-size:clamp(50px,6vw,80px)}em{font-style:normal;color:#e50914}.hero-copy p{font-size:18px;color:#b5bac2;max-width:620px;margin:25px 0 32px}.actions{display:flex;gap:11px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 20px;border-radius:8px;font-weight:800;font-size:13px;border:1px solid transparent;transition:.25s}.btn:hover{transform:translateY(-3px)}.red{background:#e50914;color:#fff}.red:hover{background:#ff2630;box-shadow:0 14px 35px rgba(229,9,20,.22)}.whatsapp{background:#19c96a;color:#fff}.outline{border-color:#4a4b50;color:#fff}.darkbtn{background:#08090a;color:#fff}.trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;color:#888e97;font-size:10px;letter-spacing:1px;text-transform:uppercase}.hero-media{height:520px;position:relative;border-radius:20px;overflow:hidden;border:1px solid #292b2e;box-shadow:0 30px 90px rgba(0,0,0,.45)}.hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) contrast(1.08)}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%)}.media-note{position:absolute;z-index:2;left:26px;bottom:25px;display:flex;flex-direction:column}.media-note b{font-size:12px;letter-spacing:2px}.media-note span{color:#aeb2b9;font-size:10px;text-transform:uppercase;letter-spacing:1px}.ticker{background:#e50914;color:#fff;overflow:hidden;white-space:nowrap}.ticker>div{width:max-content;padding:12px 0;font-size:10px;font-weight:900;letter-spacing:2px;animation:ticker 28s linear infinite}.ticker i{font-style:normal;color:#111;margin:0 26px}
.section{padding:105px 0}.intro{display:grid;grid-template-columns:1fr .7fr;gap:60px;align-items:end;margin-bottom:48px}.intro p{color:#737880;font-size:16px;margin:0}.section h2{font-size:clamp(42px,5vw,64px)}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.card{background:#fff;border:1px solid #dddfe2;border-radius:15px;overflow:hidden;position:relative;transition:.3s}.card:hover{transform:translateY(-7px);box-shadow:0 25px 65px rgba(0,0,0,.13)}.card img{width:100%;height:210px;object-fit:cover;display:block;filter:saturate(.78)}.card-body{padding:25px 27px 30px}.card-body small{font-size:9px;letter-spacing:2px;color:#e50914;font-weight:900}.card-body h3{font-size:25px;text-transform:uppercase;line-height:1.05;margin:9px 0 10px;letter-spacing:-1px}.card-body p{font-size:13px;color:#737880;min-height:42px}.card-body b{display:block;color:#e50914;font-size:11px;margin-top:20px}.dark{background:#070809;color:#fff;padding:105px 0;position:relative;overflow:hidden}.dark:after{content:"";position:absolute;width:500px;height:500px;right:-220px;top:-230px;background:rgba(229,9,20,.08);border-radius:50%;filter:blur(20px)}.dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;position:relative;z-index:2}.dark p{color:#aeb3bb;max-width:600px;font-size:17px}.text-link{display:inline-block;margin-top:20px;color:#fff;font-size:12px;font-weight:800;border-bottom:2px solid #e50914;padding-bottom:7px}.numbers{display:grid;grid-template-columns:1fr 1fr;border:1px solid #27292c}.numbers div{padding:30px;border:1px solid #27292c;min-height:150px}.numbers b{color:#e50914;font-size:10px}.numbers span{display:block;font-size:15px;font-weight:700;line-height:1.25;margin-top:22px}.about-preview{background:#f5f5f3}.about-row{display:grid;grid-template-columns:.95fr 1.05fr;gap:85px;align-items:center}.about-image{height:480px;border-radius:18px;overflow:hidden;background:#08090a}.about-image img{width:100%;height:100%;object-fit:cover}.about-row p{font-size:17px;color:#70757d;max-width:650px}.checks{display:grid;gap:10px;margin:25px 0;color:#25272b;font-size:13px;font-weight:700}.final-cta{background:#e50914;color:#fff;padding:55px 0}.final-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.final-cta h2{font-size:40px;text-transform:uppercase;letter-spacing:-2px;margin:0}.final-cta p{margin:4px 0 0;color:#ffd7d9}.final-cta .eyebrow{color:#fff;margin-bottom:8px}.final-cta .outline{border-color:rgba(255,255,255,.6)}
.pagehero{background:linear-gradient(110deg,#050505,#111214);color:#fff;padding:100px 0 90px;position:relative;overflow:hidden}.pagehero:after{content:"TSCB";position:absolute;right:3%;top:-20px;font-size:220px;font-weight:900;color:rgba(255,255,255,.025);pointer-events:none}.pagehero h1{font-size:clamp(48px,6vw,78px);position:relative;z-index:2}.pagehero p{font-size:18px;color:#aeb3bb;max-width:700px;position:relative;z-index:2}
/* =========================================================
   LEISTUNGSSEITE – MODERNES, SAUBERES KARTENLAYOUT
   ========================================================= */

.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    width:100%;
    align-items:stretch;
}

.detail{
    min-width:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid #dedfe2;
    border-radius:18px;
    background:#fff;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.detail:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 65px rgba(0,0,0,.13);
    border-color:#cfd1d5;
}

.detail > img{
    width:100%;
    height:270px;
    min-height:270px;
    object-fit:cover;
    object-position:center;
    display:block;
    margin:0;
    filter:saturate(.84) contrast(1.03);
}

.detail-content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:29px 30px 30px;
}

.detail-content small{
    display:block;
    margin:0 0 10px;
    color:#e50914;
    font-size:10px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:2px;
    text-transform:uppercase;
}

.detail-content h2{
    margin:0;
    color:#111;
    font-size:clamp(27px,3vw,36px);
    line-height:1.02;
    letter-spacing:-1.6px;
    text-transform:uppercase;
}

.detail-content p{
    margin:17px 0 0;
    color:#70757d;
    font-size:14px;
    line-height:1.7;
}

.detail-content ul{
    margin:auto 0 0;
    padding:24px 0 0;
    list-style:none;
    color:#444;
    font-size:12px;
}

.detail-content li{
    padding:11px 0;
    border-top:1px solid #e1e2e4;
}

.detail-content li:last-child{
    border-bottom:1px solid #e1e2e4;
}

/* Karte ohne Foto – Transport */
.detail-icon{
    height:270px;
    min-height:270px;
    margin:0;
    padding:0 30px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 25%,rgba(229,9,20,.24),transparent 32%),
        linear-gradient(135deg,#070809 0%,#111316 55%,#1a0a0c 100%);
    color:#e50914;
    font-size:68px;
    font-weight:900;
}

.detail-icon::after{
    content:"TRANSPORT";
    position:absolute;
    right:-8px;
    bottom:-18px;
    font-size:76px;
    font-weight:900;
    letter-spacing:-5px;
    color:rgba(255,255,255,.035);
    pointer-events:none;
}

/* Dunkle Karte */
.detail.dark-card{
    background:#08090a;
    border-color:#08090a;
    color:#fff;
}

.detail.dark-card .detail-content h2{
    color:#fff;
}

.detail.dark-card .detail-content p{
    color:#aeb3bb;
}

.detail.dark-card .detail-content li{
    color:#d8dadd;
    border-color:#292c30;
}

/* Rote Karte */
.detail.accent{
    background:#e50914;
    border-color:#e50914;
    color:#fff;
}

.detail.accent .detail-content small,
.detail.accent .detail-content h2,
.detail.accent .detail-content p,
.detail.accent .detail-content li{
    color:#fff;
}

.detail.accent .detail-content li{
    border-color:rgba(255,255,255,.32);
}

/* Leistungsseite CTA */
.final-cta{
    background:#e50914;
    color:#fff;
    padding:65px 0;
}

.final-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
}

.final-cta h2{
    margin:0;
    font-size:clamp(34px,4vw,52px);
    line-height:1;
    letter-spacing:-2px;
    text-transform:uppercase;
}

.final-cta p{
    max-width:650px;
    margin:10px 0 0;
    color:#ffd7d9;
    font-size:15px;
}

.final-cta .eyebrow{
    color:#fff;
    margin-bottom:9px;
}

.final-cta .btn{
    white-space:nowrap;
}

.final-cta .darkbtn{
    background:#08090a;
    color:#fff;
}

.final-cta .whatsapp{
    background:#19c96a;
}

/* Tablet */

/* =========================================================
   MOBILE NAVIGATION – sauber und touchfreundlich
   ========================================================= */

.header nav.open{
    box-shadow:0 25px 60px rgba(0,0,0,.38);
}

.header nav.open a{
    min-height:46px;
    display:flex;
    align-items:center;
}

.menu{
    cursor:pointer;
    padding:8px;
    border-radius:8px;
}

.menu:hover{
    background:rgba(255,255,255,.06);
}

.menu span{
    transition:transform .25s ease,opacity .25s ease;
}

.menu.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu.active span:nth-child(2){
    opacity:0;
}

.menu.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* =========================================================
   TOUCH / PERFORMANCE
   ========================================================= */

img{
    max-width:100%;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

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

    .detail > img,
    .detail-icon{
        height:225px;
        min-height:225px;
    }

    .detail-content{
        padding:24px;
    }

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

    .detail-content p{
        font-size:13px;
    }

    .detail-icon{
        font-size:55px;
    }

    .detail-icon::after{
        font-size:58px;
    }

    .final-cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* Handy */
@media(max-width:700px){
    .detail-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .detail{
        border-radius:16px;
    }

    .detail > img,
    .detail-icon{
        height:220px;
        min-height:220px;
    }

    .detail-content{
        padding:23px;
    }

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

    .detail-content p{
        font-size:14px;
    }

    .detail-icon{
        padding:0 23px;
        font-size:52px;
    }

    .detail-icon::after{
        font-size:48px;
        right:-4px;
    }

    .final-cta{
        padding:55px 0;
    }

    .final-cta h2{
        font-size:34px;
    }

    .final-cta .actions{
        width:100%;
    }

    .final-cta .btn{
        width:100%;
    }
}

/* Kleine Smartphones */
@media(max-width:450px){
    .detail > img,
    .detail-icon{
        height:195px;
        min-height:195px;
    }

    .detail-content{
        padding:20px;
    }

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

    .detail-content ul{
        padding-top:20px;
    }

    .detail-content li{
        padding:10px 0;
    }
}

.company{display:grid;grid-template-columns:1fr 1fr;gap:90px}.company>div:first-child p{color:#70757d;font-size:17px;max-width:600px}.benefits{border-top:1px solid #ddd}.benefits>div{padding:22px 0;border-bottom:1px solid #ddd}.benefits b{color:#e50914;font-size:10px}.benefits h3{margin:7px 0 0;text-transform:uppercase}.benefits p{margin:2px 0;color:#777;font-size:13px}.private-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.private-grid article{border:1px solid #dddfe2;border-radius:15px;overflow:hidden;background:#fff;padding-bottom:25px;transition:.25s}.private-grid article:hover{transform:translateY(-5px);box-shadow:0 25px 60px rgba(0,0,0,.11)}.private-grid img{width:100%;height:230px;object-fit:cover;display:block}.private-grid h2,.private-grid p{margin-left:27px;margin-right:27px}.private-grid h2{font-size:28px;margin-top:22px}.private-grid p{color:#737880;font-size:14px}.private-grid .icon{font-size:55px;padding:35px 27px 0;color:#e50914}.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.logo-box{background:#050505;padding:20px;border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.15)}.logo-box img{display:block;width:100%;border-radius:8px}.about>div:last-child>p{color:#737880;font-size:17px}.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px}.contact-links{display:grid;gap:12px;margin-top:30px}.contact-links a{display:flex;gap:17px;align-items:center;border:1px solid #dddfe2;padding:18px;border-radius:11px;transition:.2s}.contact-links a:hover{transform:translateX(5px);box-shadow:0 18px 45px rgba(0,0,0,.1)}.contact-links b{color:#e50914;min-width:30px}.contact-links small{display:block;color:#888;font-size:8px;letter-spacing:1.5px}.contact-links span{font-weight:800}.form{background:#f4f5f6;border:1px solid #e0e2e5;border-radius:16px;padding:30px}.form h3{font-size:28px;text-transform:uppercase;margin:0 0 25px}.form label{display:block;font-size:11px;font-weight:800;margin-bottom:15px}.form input,.form select,.form textarea{width:100%;margin-top:7px;border:1px solid #d6d9dd;background:#fff;border-radius:8px;padding:12px;font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus{border-color:#e50914;box-shadow:0 0 0 3px rgba(229,9,20,.08)}.row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.consent{display:flex!important;gap:7px;font-weight:500!important;color:#666}.consent input{width:auto!important;margin-top:2px}.consent a{text-decoration:underline}.thanks{min-height:500px;display:flex;align-items:center}.legal{padding:90px 0 120px}.legal h1{font-size:60px}.legal h2{font-size:28px;text-transform:uppercase;margin-top:42px}.legal p{max-width:850px;color:#70757d}.legal a{color:#b20b13;font-weight:700}footer{background:#050505;color:#969ba3}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px;padding:65px 0 50px}.footer-main img{width:110px;height:110px;object-fit:cover;border-radius:8px}.footer-main p{font-size:11px}.mini-links{display:flex;gap:8px}.mini-links a{width:31px;height:31px;border:1px solid #2c2e32;border-radius:50%;display:grid;place-items:center;font-size:10px}.footer-grid h4{color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:1.5px}.footer-grid>div>a:not(.mini-links a){display:block;font-size:12px;margin:9px 0}.footer-grid>div>a:hover{color:#fff}.footer-bottom{border-top:1px solid #1e2023;padding:18px 0;display:flex;justify-content:space-between;font-size:10px}.footer-bottom div{display:flex;gap:20px}.float{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;gap:8px}.float a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:11px;box-shadow:0 12px 35px rgba(0,0,0,.25)}.float a span{display:none}.phone{background:#111}.wa{background:#19c96a}.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s ease}.reveal.show{opacity:1;transform:none}.delay{transition-delay:.13s}@keyframes ticker{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:900px){.header nav{display:none}.menu{display:block}.header nav.open{display:flex;position:absolute;top:88px;left:0;right:0;background:#050505;flex-direction:column;align-items:stretch;padding:14px 18px 25px;border-top:1px solid #222}.header nav.open a{padding:12px}.hero-grid,.dark-grid,.about-row,.company,.about,.contact{grid-template-columns:1fr;gap:45px}.hero-grid{min-height:auto;padding:55px 0}.hero-media{height:430px}.intro{grid-template-columns:1fr;gap:15px}.footer-grid{grid-template-columns:1fr 1fr}.final-cta-inner{flex-direction:column;align-items:flex-start}.pagehero{padding:75px 0}.detail-grid{grid-template-columns:1fr}}
@media(max-width:600px){.container{width:calc(100% - 28px)}.utility{display:none}.header{height:74px}.brand img{width:73px;height:64px}.header nav.open{top:74px}.hero h1{font-size:45px;letter-spacing:-2px}.hero-copy p{font-size:16px}.hero-media{height:290px}.section{padding:75px 0}.section h2{font-size:42px}.cards,.private-grid,.row{grid-template-columns:1fr}.card img,.detail > img{height:200px;min-height:200px}.detail-icon{height:200px;min-height:200px}.dark{padding:75px 0}.numbers{grid-template-columns:1fr 1fr}.numbers div{min-height:120px;padding:20px}.numbers span{font-size:12px}.about-image{height:320px}.final-cta h2{font-size:31px}.pagehero h1{font-size:45px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:10px}.float{right:12px;bottom:12px}.float a{width:48px;height:48px}.hero .actions .btn{width:100%}}

/* =========================================================
   TSC BRANDES – PREMIUM LEISTUNGSKARTEN
   ========================================================= */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    align-items: stretch;
}


/* =========================================================
   BASIS-KARTE
   ========================================================= */

.detail {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;
    min-height: 610px;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dedfe3;
    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .055);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* Roter Lichtschein */

.detail::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -130px;
    right: -100px;

    background: rgba(229, 9, 20, .12);

    border-radius: 50%;

    filter: blur(50px);

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;

    z-index: -1;
}


.detail:hover {
    transform: translateY(-8px);

    border-color: rgba(229, 9, 20, .35);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .14),
        0 8px 25px rgba(229, 9, 20, .08);
}


.detail:hover::before {
    opacity: 1;
}


/* =========================================================
   BILDER
   ========================================================= */

.detail > img {
    display: block;

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

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

    margin: 0;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


.detail:hover > img {
    transform: scale(1.045);

    filter:
        saturate(1.08)
        contrast(1.04);
}


/* Bildbereich bekommt leichten Schatten */

.detail > img::after {
    content: "";
}


/* =========================================================
   INHALT
   ========================================================= */

.detail-content {
    position: relative;

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 28px 30px 30px;

    background: #ffffff;
}


/* roter kleiner Seitenakzent */

.detail-content::before {
    content: "";

    position: absolute;

    left: 0;
    top: 30px;

    width: 4px;
    height: 38px;

    background: #e50914;

    border-radius: 0 4px 4px 0;

    transition:
        height .35s ease,
        top .35s ease;
}


.detail:hover .detail-content::before {
    height: 52px;
    top: 24px;
}


/* =========================================================
   NUMMER
   ========================================================= */

.detail-content small {
    display: block;

    margin: 0 0 10px;
    padding-left: 14px;

    color: #e50914;

    font-size: 10px;
    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.detail-content h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(27px, 3vw, 37px);

    line-height: 1.02;

    letter-spacing: -1.7px;

    text-transform: uppercase;

    max-width: 95%;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.detail-content p {
    margin: 17px 0 0;

    max-width: 620px;

    color: #6d7279;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   LEISTUNGSLISTE
   ========================================================= */

.detail-content ul {
    margin: auto 0 0;

    padding: 25px 0 0;

    list-style: none;
}


.detail-content li {
    position: relative;

    padding: 12px 0 12px 18px;

    border-top: 1px solid #e4e5e7;

    color: #3d4146;

    font-size: 12px;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.detail-content li:last-child {
    border-bottom: 1px solid #e4e5e7;
}


/* roter Punkt */

.detail-content li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    margin-top: -2.5px;

    background: #e50914;

    border-radius: 50%;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.detail:hover .detail-content li {
    padding-left: 22px;
}


.detail:hover .detail-content li::before {
    transform: scale(1.35);

    box-shadow:
        0 0 0 4px rgba(229, 9, 20, .08);
}


/* =========================================================
   01 – FAHRER
   NICHT MEHR KOMPLETT SCHWARZ
   ========================================================= */

.detail.dark-card {
    background: #ffffff;

    border-color: #dedfe3;

    color: #111111;
}


.detail.dark-card .detail-content {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 65%,
            #f7f7f7 100%
        );
}


.detail.dark-card .detail-content h2 {
    color: #111111;
}


.detail.dark-card .detail-content p {
    color: #686d74;
}


.detail.dark-card .detail-content li {
    color: #3d4146;

    border-color: #e2e3e5;
}


/* dezenter dunkler Akzent ganz unten */

.detail.dark-card::after {
    content: "";

    position: absolute;

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

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #08090a 0%,
            #e50914 45%,
            #08090a 100%
        );

    transform: scaleX(.35);

    transform-origin: center;

    transition:
        transform .45s ease;
}


.detail.dark-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   02 – TRANSPORT
   ========================================================= */

.detail-icon {
    position: relative;

    height: 270px;
    min-height: 270px;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(229, 9, 20, .20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8f8f8 0%,
            #eeeeef 48%,
            #e5e6e8 100%
        );

    color: #0a0a0a;

    font-size: 72px;
    font-weight: 900;

    border-bottom: 1px solid #dedfe3;
}


/* große dezente Typografie */

.detail-icon::before {
    content: "TRANSPORT";

    position: absolute;

    left: -5px;
    bottom: -18px;

    color: rgba(0, 0, 0, .045);

    font-size: 86px;
    font-weight: 900;

    letter-spacing: -6px;

    white-space: nowrap;

    pointer-events: none;
}


/* roter Lichtpunkt */

.detail-icon::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -40px;
    top: -50px;

    background: rgba(229, 9, 20, .11);

    border-radius: 50%;

    filter: blur(35px);
}


/* Symbol */

.detail-icon {
    text-shadow:
        0 3px 0 rgba(0,0,0,.04);
}


/* =========================================================
   03 – KURIER
   ========================================================= */

#kurier {
    background: #ffffff;
}


#kurier .detail-content {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 70%,
            #fafafa 100%
        );
}


/* =========================================================
   04 – EXPRESS
   ========================================================= */

.detail.accent {
    background: #e50914;

    border-color: #e50914;

    color: #ffffff;

    box-shadow:
        0 10px 35px rgba(229, 9, 20, .15);
}


.detail.accent .detail-content {
    background:
        linear-gradient(
            145deg,
            #e50914 0%,
            #c90711 100%
        );
}


.detail.accent .detail-content::before {
    background: #ffffff;
}


.detail.accent .detail-content small,
.detail.accent .detail-content h2,
.detail.accent .detail-content p,
.detail.accent .detail-content li {
    color: #ffffff;
}


.detail.accent .detail-content p {
    color: rgba(255,255,255,.82);
}


.detail.accent .detail-content li {
    border-color: rgba(255,255,255,.25);
}


.detail.accent .detail-content li::before {
    background: #ffffff;
}


.detail.accent:hover {
    box-shadow:
        0 30px 70px rgba(229, 9, 20, .28);
}


/* =========================================================
   CTA UNTEN
   ========================================================= */

.final-cta {
    position: relative;

    overflow: hidden;

    padding: 70px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #e50914 0%,
            #bd0710 100%
        );

    color: #ffffff;
}


.final-cta::after {
    content: "TSCB";

    position: absolute;

    right: -20px;
    bottom: -55px;

    font-size: 180px;
    font-weight: 900;

    letter-spacing: -15px;

    color: rgba(255,255,255,.045);

    pointer-events: none;
}


.final-cta-inner {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;
}


.final-cta h2 {
    margin: 0;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.final-cta p {
    max-width: 650px;

    margin: 12px 0 0;

    color: rgba(255,255,255,.82);

    font-size: 15px;

    line-height: 1.7;
}


.final-cta .eyebrow {
    margin-bottom: 10px;

    color: #ffffff;
}


.final-cta .actions {
    position: relative;
    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.final-cta .btn {
    white-space: nowrap;
}


.final-cta .darkbtn {
    background: #08090a;

    color: #ffffff;
}


.final-cta .whatsapp {
    background: #19c96a;

    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

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

        gap: 18px;
    }

    .detail {
        min-height: 570px;
    }

    .detail > img,
    .detail-icon {
        height: 225px;
        min-height: 225px;
    }

    .detail-content {
        padding: 24px;
    }

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

    .detail-content p {
        font-size: 13px;
    }

    .detail-icon {
        font-size: 58px;
    }

    .detail-icon::before {
        font-size: 58px;
    }

    .final-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 700px) {

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

        gap: 18px;
    }

    .detail {
        min-height: auto;

        border-radius: 17px;
    }

    .detail > img,
    .detail-icon {
        height: 220px;
        min-height: 220px;
    }

    .detail-content {
        padding: 23px;
    }

    .detail-content h2 {
        font-size: 29px;

        letter-spacing: -1.2px;
    }

    .detail-content p {
        font-size: 14px;
    }

    .detail-icon {
        padding: 0 23px;

        font-size: 52px;
    }

    .detail-icon::before {
        font-size: 48px;

        letter-spacing: -4px;
    }

    .final-cta {
        padding: 55px 0;
    }

    .final-cta h2 {
        font-size: 34px;
    }

    .final-cta .actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;
    }

    .final-cta .btn {
        width: 100%;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 450px) {

    .detail > img,
    .detail-icon {
        height: 195px;
        min-height: 195px;
    }

    .detail-content {
        padding: 20px;
    }

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

    .detail-content ul {
        padding-top: 20px;
    }

    .detail-content li {
        padding: 10px 0 10px 16px;
    }

    .final-cta::after {
        font-size: 110px;
    }

}

/* =========================================================
   TSC BRANDES
   PREMIUM LEISTUNGSKARTEN
   ========================================================= */

.services-section {
    padding-top: 55px;
}


/* =========================================================
   GRID
   ========================================================= */

.detail-grid {
    display: grid;

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

    gap: 26px;

    width: 100%;
}


/* =========================================================
   KARTE
   ========================================================= */

.detail {
    position: relative;

    min-width: 0;
    min-height: 500px;

    display: grid;

    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #dedfe3;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .07);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .35s ease;
}


.detail:hover {
    transform: translateY(-8px);

    border-color: rgba(229, 9, 20, .35);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .16),
        0 8px 30px rgba(229, 9, 20, .08);
}


/* =========================================================
   BILD
   ========================================================= */

.service-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;
}


.service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.05),
            transparent 60%,
            rgba(229,9,20,.12)
        );

    pointer-events: none;
}


.service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}


.detail:hover .service-image img {
    transform: scale(1.08);

    filter:
        saturate(1.12)
        contrast(1.05);
}


/* =========================================================
   BILDKANTE
   ========================================================= */

.service-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    right: 0;
    bottom: 0;

    width: 80px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.15)
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.service-content {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding: 38px 36px;

    background: #ffffff;
}


/* =========================================================
   NUMMER
   ========================================================= */

.service-number {
    display: block;

    margin-bottom: 10px;

    color: #e50914;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   ROTE LINIE
   ========================================================= */

.service-line {
    display: block;

    width: 34px;
    height: 3px;

    margin-bottom: 18px;

    background: #e50914;

    transition:
        width .4s ease;
}


.detail:hover .service-line {
    width: 65px;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.service-content h2 {
    margin: 0;

    color: #101010;

    font-size:
        clamp(25px, 2.3vw, 36px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -1.6px;

    text-transform: uppercase;
}


/* =========================================================
   TEXT
   ========================================================= */

.service-content p {
    margin: 18px 0 0;

    color: #70757d;

    font-size: 13px;

    line-height: 1.7;

    max-width: 480px;
}


/* =========================================================
   LISTE
   ========================================================= */

.service-content ul {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin: auto 0 0;

    padding: 24px 0 0;

    list-style: none;
}


.service-content li {
    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 42px;

    border-top: 1px solid #e4e5e7;

    color: #333;

    font-size: 12px;

    font-weight: 600;

    transition:
        padding-left .3s ease,
        color .3s ease;
}


.service-content li:last-child {
    border-bottom: 1px solid #e4e5e7;
}


.service-content li span {
    display: flex;

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

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border: 1px solid #e50914;

    border-radius: 50%;

    color: #e50914;

    font-size: 10px;

    font-weight: 900;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.detail:hover .service-content li {
    padding-left: 5px;
}


.detail:hover .service-content li span {
    background: #e50914;

    color: #ffffff;

    transform: scale(1.08);
}


/* =========================================================
   FAHRER – DUNKLER PREMIUM LOOK
   ========================================================= */

.service-driver {
    background: #08090a;

    border-color: #08090a;

    color: #ffffff;
}


.service-driver .service-content {
    background:
        linear-gradient(
            135deg,
            #0b0c0d 0%,
            #111214 60%,
            #190b0d 100%
        );
}


.service-driver .service-content h2 {
    color: #ffffff;
}


.service-driver .service-content p {
    color: #b9bdc3;
}


.service-driver .service-content li {
    color: #e1e3e6;

    border-color: #2c2e31;
}


.service-driver .service-image::after {
    background:
        linear-gradient(
            90deg,
            transparent 35%,
            rgba(229,9,20,.20)
        );
}


/* =========================================================
   TRANSPORT
   ========================================================= */

.service-transport .service-content {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 68%,
            #f5f5f6 100%
        );
}


.service-transport .service-image img {
    object-position: center;
}


/* =========================================================
   KURIER
   ========================================================= */

.service-courier .service-content {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 70%,
            #f7f7f8 100%
        );
}


/* =========================================================
   EXPRESS
   ========================================================= */

.service-express {
    border-color: #b80710;

    background: #e50914;
}


.service-express .service-content {
    background:
        linear-gradient(
            135deg,
            #e50914 0%,
            #c40710 100%
        );
}


.service-express .service-number,
.service-express .service-content h2 {
    color: #ffffff;
}


.service-express .service-line {
    background: #ffffff;
}


.service-express .service-content p {
    color: rgba(255,255,255,.84);
}


.service-express .service-content li {
    color: #ffffff;

    border-color:
        rgba(255,255,255,.25);
}


.service-express .service-content li span {
    border-color: #ffffff;

    color: #ffffff;
}


.service-express:hover {
    box-shadow:
        0 30px 75px rgba(229,9,20,.28);
}


/* =========================================================
   DIAGONAL DESIGN-AKZENT
   ========================================================= */

.service-driver::after,
.service-transport::after,
.service-courier::after,
.service-express::after {

    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    width: 70px;

    pointer-events: none;

    opacity: .8;
}


.service-driver::after,
.service-courier::after {

    right: 46%;

    transform:
        skewX(-12deg)
        translateX(50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.05)
        );
}


.service-transport::after,
.service-express::after {

    left: 46%;

    transform:
        skewX(12deg)
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08)
        );
}


/* =========================================================
   CTA
   ========================================================= */

.final-cta {
    position: relative;

    overflow: hidden;

    margin-top: 30px;

    padding: 75px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #e50914,
            #b90710
        );

    color: #ffffff;
}


.final-cta::after {
    content: "TSCB";

    position: absolute;

    right: -20px;
    bottom: -60px;

    color: rgba(255,255,255,.045);

    font-size: 190px;

    font-weight: 900;

    letter-spacing: -15px;

    pointer-events: none;
}


.final-cta-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.final-cta h2 {
    margin: 0;

    font-size:
        clamp(36px, 4vw, 56px);

    line-height: .98;

    letter-spacing: -2.5px;

    text-transform: uppercase;
}


.final-cta p {
    max-width: 600px;

    margin: 14px 0 0;

    color: rgba(255,255,255,.82);

    line-height: 1.7;
}


.final-cta .eyebrow {
    color: #ffffff;
}


.final-cta .actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.final-cta .darkbtn {
    background: #08090a;

    color: #ffffff;
}


.final-cta .whatsapp {
    background: #19c96a;

    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

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

        min-height: 450px;
    }

    .service-image {
        min-height: 450px;
    }

    .service-content {
        padding: 30px 25px;
    }

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

}


/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 720px) {

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

        gap: 20px;
    }

    .detail {
        display: grid;

        grid-template-columns: 1fr;

        min-height: 0;

        border-radius: 17px;
    }

    .service-image {
        height: 245px;
        min-height: 245px;
    }

    .service-content {
        min-height: 330px;

        padding: 28px 24px;
    }

    .service-content h2 {
        font-size: 30px;
    }

    .service-content p {
        font-size: 14px;
    }

    .service-driver::after,
    .service-transport::after,
    .service-courier::after,
    .service-express::after {
        display: none;
    }

    .final-cta {
        padding: 55px 0;
    }

    .final-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

    .final-cta .actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;
    }

    .final-cta .btn {
        width: 100%;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 450px) {

    .service-image {
        height: 210px;
        min-height: 210px;
    }

    .service-content {
        min-height: 0;

        padding: 24px 20px;
    }

    .service-content h2 {
        font-size: 26px;

        letter-spacing: -1.2px;
    }

    .service-content li {
        min-height: 40px;
    }

}

/* =========================================================
   TSC BRANDES
   PREMIUM SERVICES / RED BLACK EDITION
   ========================================================= */

.services-section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 90px;
}


/* =========================================================
   GRID
   ========================================================= */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    width: 100%;
}


/* =========================================================
   BASIS-KARTE
   ========================================================= */

.detail {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: 44% 56%;

    min-width: 0;
    min-height: 500px;

    overflow: hidden;

    border-radius: 20px;
    border: 1px solid #d7d9dd;

    background: #fff;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.detail:hover {
    transform: translateY(-8px);

    border-color: #e50914;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .18),
        0 10px 35px rgba(229, 9, 20, .12);
}


/* =========================================================
   FOTO
   ========================================================= */

.service-image {
    position: relative;

    height: 100%;
    min-height: 500px;

    overflow: hidden;

    background: #08090a;
}

.service-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1),
        filter .5s ease;
}

.detail:hover .service-image img {
    transform: scale(1.08);

    filter:
        saturate(1.12)
        contrast(1.06);
}


/* dunkler Verlauf über Bild */

.service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .02) 0%,
            rgba(0, 0, 0, .05) 45%,
            rgba(0, 0, 0, .38) 100%
        );

    pointer-events: none;
}


/* =========================================================
   SCHRÄGER Roter Übergang
   ========================================================= */

.detail::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: -5%;
    bottom: -5%;

    left: 40%;

    width: 65px;

    background: #e50914;

    transform: skewX(-12deg);

    box-shadow:
        0 0 20px rgba(229, 9, 20, .45);

    pointer-events: none;
}


/* =========================================================
   INHALT
   ========================================================= */

.service-content {
    position: relative;

    z-index: 5;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 38px 34px 35px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 70%,
            #f5f5f6 100%
        );
}


/* =========================================================
   NUMMER
   ========================================================= */

.service-number {
    display: block;

    margin-bottom: 9px;

    color: #e50914;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   ROTE LINIE
   ========================================================= */

.service-line {
    display: block;

    width: 35px;
    height: 4px;

    margin-bottom: 19px;

    background: #e50914;

    transition:
        width .35s ease,
        box-shadow .35s ease;
}

.detail:hover .service-line {
    width: 65px;

    box-shadow:
        0 0 12px rgba(229, 9, 20, .55);
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.service-content h2 {
    margin: 0;

    color: #08090a;

    font-size:
        clamp(25px, 2.4vw, 36px);

    font-weight: 950;

    line-height: 1.02;

    letter-spacing: -1.7px;

    text-transform: uppercase;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.service-content p {
    margin: 17px 0 0;

    max-width: 470px;

    color: #626870;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   LEISTUNGEN
   ========================================================= */

.service-content ul {
    margin: auto 0 0;

    padding: 24px 0 0;

    list-style: none;
}

.service-content li {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 43px;

    border-top: 1px solid #e1e2e4;

    color: #292c30;

    font-size: 12px;
    font-weight: 700;

    transition:
        padding-left .3s ease,
        color .3s ease;
}

.service-content li:last-child {
    border-bottom: 1px solid #e1e2e4;
}


/* rote Kreise */

.service-content li span {
    display: flex;

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

    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    border: 2px solid #e50914;

    border-radius: 50%;

    color: #e50914;

    font-size: 10px;
    font-weight: 900;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.detail:hover .service-content li {
    padding-left: 5px;
}

.detail:hover .service-content li span {
    background: #e50914;

    color: #fff;

    transform: scale(1.08);

    box-shadow:
        0 0 0 4px rgba(229, 9, 20, .08);
}


/* =========================================================
   FAHRER
   SCHWARZ / ROT
   ========================================================= */

.service-driver {
    background: #08090a;

    border-color: #08090a;
}

.service-driver .service-content {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(229, 9, 20, .16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #08090a 0%,
            #0d0f11 65%,
            #17090b 100%
        );
}

.service-driver .service-content h2 {
    color: #fff;
}

.service-driver .service-content p {
    color: #b7bbc1;
}

.service-driver .service-content li {
    color: #e6e7e9;

    border-color: #303236;
}

.service-driver .service-image::after {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .52)
        );
}

.service-driver::before {
    box-shadow:
        0 0 25px rgba(229, 9, 20, .75);
}


/* =========================================================
   TRANSPORT
   ========================================================= */

.service-transport {
    background: #fff;
}

.service-transport::before {
    left: 44%;

    transform: skewX(12deg);
}

.service-transport .service-content {
    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 60%,
            #f1f1f2 100%
        );
}


/* =========================================================
   KURIER
   ========================================================= */

.service-courier {
    background: #fff;
}

.service-courier::before {
    left: 40%;
}

.service-courier .service-content {
    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 65%,
            #f3f3f4 100%
        );
}


/* =========================================================
   EXPRESS
   ========================================================= */

.service-express {
    background: #e50914;

    border-color: #b90710;
}

.service-express::before {
    left: 44%;

    background: #08090a;

    box-shadow:
        0 0 20px rgba(0, 0, 0, .45);

    transform: skewX(12deg);
}

.service-express .service-content {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #e50914 0%,
            #c70710 100%
        );
}

.service-express .service-content h2,
.service-express .service-content p,
.service-express .service-content li,
.service-express .service-number {
    color: #fff;
}

.service-express .service-line {
    background: #fff;
}

.service-express .service-content p {
    color: rgba(255,255,255,.85);
}

.service-express .service-content li {
    border-color:
        rgba(255,255,255,.28);
}

.service-express .service-content li span {
    border-color: #fff;

    color: #fff;
}

.service-express:hover {
    box-shadow:
        0 30px 80px rgba(229, 9, 20, .30);
}


/* =========================================================
   PUNKT-MUSTER / BRANDING
   ========================================================= */

.service-driver .service-content::after,
.service-transport .service-content::after,
.service-courier .service-content::after,
.service-express .service-content::after {

    content: "";

    position: absolute;

    right: 18px;
    bottom: 15px;

    width: 100px;
    height: 70px;

    opacity: .15;

    background-image:
        radial-gradient(
            circle,
            currentColor 1px,
            transparent 1.5px
        );

    background-size: 10px 10px;

    pointer-events: none;
}


/* =========================================================
   CTA
   ========================================================= */

.final-cta {
    position: relative;

    overflow: hidden;

    padding: 75px 0;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #e50914 0%,
            #b90710 100%
        );

    color: #fff;
}

.final-cta::after {
    content: "TSCB";

    position: absolute;

    right: -20px;
    bottom: -65px;

    color: rgba(255,255,255,.045);

    font-size: 190px;
    font-weight: 950;

    letter-spacing: -15px;

    pointer-events: none;
}

.final-cta-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;
}

.final-cta h2 {
    margin: 0;

    font-size:
        clamp(36px, 4vw, 56px);

    line-height: .98;

    letter-spacing: -2.5px;

    text-transform: uppercase;
}

.final-cta p {
    max-width: 600px;

    margin: 14px 0 0;

    color: rgba(255,255,255,.82);

    line-height: 1.7;
}

.final-cta .actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.final-cta .darkbtn {
    background: #08090a;
    color: #fff;
}

.final-cta .whatsapp {
    background: #19c96a;
    color: #fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .detail {
        grid-template-columns: 42% 58%;

        min-height: 470px;
    }

    .service-image {
        min-height: 470px;
    }

    .service-content {
        padding: 30px 25px;
    }

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

}


/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 720px) {

    .services-section {
        padding-top: 35px;
    }

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

        gap: 20px;
    }

    .detail {
        display: grid;

        grid-template-columns: 1fr;

        min-height: 0;

        border-radius: 17px;
    }

    .service-image {
        height: 245px;
        min-height: 245px;
    }

    .service-content {
        min-height: 330px;

        padding: 28px 24px;
    }

    .service-content h2 {
        font-size: 30px;
    }

    .detail::before {
        display: none;
    }

    .final-cta {
        padding: 55px 0;
    }

    .final-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

    .final-cta .actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;
    }

    .final-cta .btn {
        width: 100%;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 450px) {

    .service-image {
        height: 210px;
        min-height: 210px;
    }

    .service-content {
        min-height: 0;

        padding: 24px 20px;
    }

    .service-content h2 {
        font-size: 26px;
    }

    .service-content li {
        min-height: 40px;
    }

}