/* =========================================================
   1A CARWORLD
   style.css
   TEIL 1 / 4

   Weiß · Schwarz · Rot
   Responsive · Desktop + Smartphone
========================================================= */


/* =========================================================
   GRUNDWERTE
========================================================= */


:root {

    --red: #c90000;
    --red-dark: #a80000;

    --black: #111111;
    --black-soft: #1b1b1b;

    --text: #202020;
    --muted: #707070;

    --light: #f6f6f6;
    --line: #e7e7e7;

    --white: #ffffff;

    --container: 1320px;

    --shadow:
        0 20px 55px rgba(0, 0, 0, 0.10);

    --ease:
        cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    overflow-x: hidden;

}


body {

    margin: 0;

    padding: 0;

    color: var(--text);

    background: #ffffff;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;

}


img {

    display: block;

    max-width: 100%;

    height: auto;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    cursor: pointer;

}


h1,
h2,
h3,
h4,
p {

    margin-top: 0;

}


.page-width {

    width:
        min(
            var(--container),
            calc(100% - 48px)
        );

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;

    place-items: center;

    background: #ffffff;

    opacity: 1;

    visibility: visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;

}


.page-loader.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.loader-inner {

    text-align: center;

}


.loader-logo-wrap {

    width:
        min(
            250px,
            70vw
        );

    margin-left: auto;

    margin-right: auto;

}


.loader-logo-wrap img {

    width: 100%;

    height: 90px;

    object-fit: contain;

}


.loader-line {

    width: 0;

    height: 3px;

    margin:
        16px
        auto
        0;

    background: var(--red);

    animation:
        loadline 1s ease forwards;

}


@keyframes loadline {

    to {

        width: 140px;

    }

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: relative;

    z-index: 1000;

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

    border-bottom:
        1px solid #ececec;

    box-shadow:
        0 5px 24px
        rgba(
            0,
            0,
            0,
            .035
        );

}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    background: var(--black);

    color: var(--white);

    font-size: 12px;

}


.top-bar-inner {

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 22px;

}


.top-item {

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

}


.top-icon {

    color: var(--red);

    font-weight: 800;

}


.top-link:hover {

    color: #ff3d3d;

}


.top-socials {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 18px;

}


.top-socials a {

    transition:
        color .2s ease;

}


.top-socials a:hover {

    color: #ff3d3d;

}


.language-ar {

    font-weight: 700;

}


/* =========================================================
   HAUPTNAVIGATION
========================================================= */

.nav-wrapper {

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}


/* =========================================================
   LOGO
========================================================= */

.brand {

    width: 210px;

    flex: 0 0 210px;

    display: flex;

    align-items: center;

}


.brand-logo {

    display: block;

    width: 210px;

    height: 72px;

    object-fit: contain;

    object-position: left center;

}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 2px;

    margin-left: auto;

}


.nav-link {

    position: relative;

    padding:
        14px
        15px;

    font-size: 14px;

    font-weight: 700;

    border-radius: 8px;

    white-space: nowrap;

    transition:
        .22s
        var(--ease);

}


.nav-link:hover {

    color: var(--red);

}


/* Unterstrich */

.nav-link:not(.nav-highlight)::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 5px;

    height: 2px;

    background: var(--red);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .22s ease;

}


.nav-link:not(.nav-highlight):hover::after {

    transform:
        scaleX(1);

}


/* Auto verkaufen */

.nav-highlight {

    color: #ffffff !important;

    background:
        var(--red);

    margin-left: 7px;

}


.nav-highlight:hover {

    color: #ffffff !important;

    background:
        var(--red-dark);

    transform:
        translateY(-1px);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display: none;

    width: 48px;

    height: 48px;

    padding: 0;

    border: 0;

    border-radius: 9px;

    background:
        var(--red);

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.mobile-menu-button span {

    width: 22px;

    height: 2px;

    background:
        #ffffff;

    border-radius: 4px;

    transition:
        .2s ease;

}


/* Hamburger → X */

.mobile-menu-button.is-open
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-menu-button.is-open
span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-button.is-open
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-menu {

    display: none;

    background:
        #ffffff;

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

}


.mobile-menu.open {

    display: block;

}


.mobile-menu a {

    display: block;

    padding:
        17px
        20px;

    border-bottom:
        1px solid var(--line);

    font-size: 15px;

    font-weight: 700;

    transition:
        .2s ease;

}


.mobile-menu a:hover {

    color: var(--red);

    background:
        #fafafa;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 680px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        #111111;

}


/* echtes Auto-Bild */

.hero-background {

    position: absolute;

    inset: 0;

    background-image:
        url(
            "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=2200&q=85"
        );

    background-size: cover;

    background-position:
        center;

    opacity: .34;

    filter:
        grayscale(25%);

    transform:
        scale(1.02);

}


/* weißer Verlauf */

.hero-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.96) 37%,
            rgba(255,255,255,.68) 62%,
            rgba(0,0,0,.20) 100%
        );

}


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

.hero-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 70px;

    align-items: center;

    padding:
        92px
        0
        105px;

}


.hero-copy {

    max-width: 760px;

}


/* =========================================================
   HERO EYEBROW
========================================================= */

.eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color:
        var(--red);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        2.3px;

    text-transform:
        uppercase;

}


.eyebrow-dot {

    width: 8px;

    height: 8px;

    flex:
        0 0 8px;

    border-radius: 50%;

    background:
        var(--red);

}


/* =========================================================
   HERO H1
========================================================= */

.hero h1 {

    margin: 0;

    color:
        #111111;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            52px,
            6.6vw,
            92px
        );

    line-height:
        .98;

    letter-spacing:
        -3.5px;

}


.hero h1 span {

    display: block;

    color:
        var(--red);

}


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

.hero-text {

    max-width: 690px;

    margin:
        28px
        0
        0;

    color:
        #505050;

    font-size:
        18px;

    line-height:
        1.72;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top:
        32px;

}


.button {

    min-height:
        55px;

    padding:
        0
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    border-radius:
        9px;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        .22s
        var(--ease);

}


.button span {

    font-size:
        18px;

}


/* Roter Button */

.button-primary {

    color:
        #ffffff;

    background:
        var(--red);

    box-shadow:
        0 14px 32px
        rgba(
            201,
            0,
            0,
            .20
        );

}


.button-primary:hover {

    background:
        var(--red-dark);

    transform:
        translateY(-2px);

}


/* Weißer Button */

.button-secondary {

    color:
        #222222;

    background:
        #ffffff;

    border:
        1px solid #d8d8d8;

}


.button-secondary:hover {

    color:
        var(--red);

    border-color:
        var(--red);

    transform:
        translateY(-2px);

}


.button-large {

    padding-left:
        30px;

    padding-right:
        30px;

}


/* =========================================================
   HERO TRUST
========================================================= */

.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px 25px;

    margin-top:
        25px;

}


.trust-point {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        13px;

    font-weight:
        700;

}


.trust-point span {

    color:
        var(--red);

    font-weight:
        900;

}


/* =========================================================
   HERO CARD
========================================================= */

.hero-side-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        36px;

    color:
        #ffffff;

    background:
        #111111;

    border-radius:
        18px;

    box-shadow:
        0 25px 60px
        rgba(
            0,
            0,
            0,
            .22
        );

}


.hero-side-card::after {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -95px;

    bottom:
        -105px;

    border-radius:
        50%;

    background:
        rgba(
            201,
            0,
            0,
            .25
        );

}


.side-card-label {

    color:
        #ff3030;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.hero-side-card h2 {

    margin:
        14px 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        36px;

    line-height:
        1.05;

}


.hero-side-card p {

    margin:
        0;

    color:
        #bbbbbb;

    font-size:
        14px;

    line-height:
        1.7;

}


.side-card-line {

    height:
        1px;

    margin:
        25px 0;

    background:
        #333333;

}


.side-card-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    font-size:
        12px;

}


.side-card-row span {

    color:
        #888888;

}


.side-card-row strong {

    color:
        #ffffff;

}


/* =========================================================
   HERO SCROLL
========================================================= */

.hero-scroll {

    position:
        absolute;

    z-index:
        3;

    bottom:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #666666;

    font-size:
        10px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.hero-scroll span {

    width:
        34px;

    height:
        1px;

    background:
        #aaaaaa;

}

/* =========================================================
   QUICK INFO
========================================================= */

.quick-info {

    color:
        #ffffff;

    background:
        #111111;

}


.quick-grid {

    display:
        grid;

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

}


.quick-item {

    min-height:
        115px;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    border-right:
        1px solid #2b2b2b;

}


.quick-item:last-child {

    border-right:
        0;

}


.quick-item > b {

    color:
        #777777;

    font-size:
        11px;

}


.quick-item strong {

    display:
        block;

    font-size:
        15px;

}


.quick-item span {

    display:
        block;

    margin-top:
        5px;

    color:
        #888888;

    font-size:
        12px;

}


/* =========================================================
   ALLGEMEINE SECTIONS
========================================================= */

.section-light {

    background:
        #ffffff;

}


.about-section,
.services-section,
.vehicles-section,
.contact-section {

    padding:
        110px
        0;

}


/* =========================================================
   ÜBER UNS
========================================================= */

.about-grid {

    display:
        grid;

    grid-template-columns:
        220px
        minmax(
            0,
            760px
        );

    gap:
        70px;

}


.section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.section-label i {

    width:
        42px;

    height:
        1px;

    background:
        #dddddd;

}


.about-content h2,
.section-heading h2,
.vehicle-intro h2,
.sell-content h2,
.contact-section h2 {

    margin:
        0
        0
        23px;

    color:
        #111111;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            42px,
            5vw,
            66px
        );

    line-height:
        1.02;

    letter-spacing:
        -2px;

}


.about-content h2 span,
.section-heading h2 span,
.vehicle-intro h2 span,
.sell-content h2 span,
.contact-section h2 span {

    color:
        var(--red);

}


.large-text {

    color:
        #222222;

    font-size:
        22px;

    line-height:
        1.6;

}


.about-content > p:not(.large-text) {

    max-width:
        720px;

    color:
        #666666;

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   ÜBER UNS – PUNKTE
========================================================= */

.about-points {

    margin-top:
        38px;

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

}


.about-point {

    display:
        grid;

    grid-template-columns:
        50px
        1fr;

    gap:
        18px;

    padding:
        21px
        0;

    border-bottom:
        1px solid var(--line);

}


.about-point > b {

    color:
        var(--red);

    font-size:
        12px;

}


.about-point strong {

    font-size:
        15px;

}


.about-point p {

    margin:
        5px
        0
        0;

    color:
        #777777;

    font-size:
        13px;

}


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

.services-section {

    background:
        #f6f6f6;

}


.section-heading {

    max-width:
        720px;

}


.section-heading p {

    color:
        #777777;

    font-size:
        16px;

    line-height:
        1.7;

}


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

.service-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        50px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    padding:
        32px;

    background:
        #ffffff;

    border:
        1px solid #e7e7e7;

    border-radius:
        16px;

    transition:
        .25s
        var(--ease);

}


.service-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.service-top {

    display:
        flex;

    justify-content:
        space-between;

}


.service-top span {

    color:
        #999999;

    font-size:
        11px;

}


.service-top em {

    color:
        var(--red);

    font-size:
        10px;

    font-style:
        normal;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.service-card h3 {

    margin:
        48px
        0
        12px;

    font-size:
        22px;

}


.service-card p {

    min-height:
        68px;

    color:
        #777777;

    font-size:
        14px;

    line-height:
        1.7;

}


.service-card a {

    color:
        var(--red);

    font-size:
        13px;

    font-weight:
        800;

}


.service-card a:hover {

    color:
        var(--red-dark);

}


/* =========================================================
   FAHRZEUGE
========================================================= */

.vehicle-intro {

    display:
        grid;

    grid-template-columns:
        1fr
        380px;

    gap:
        60px;

    align-items:
        end;

}


.vehicle-intro p {

    margin:
        0
        0
        8px;

    color:
        #777777;

    line-height:
        1.7;

}


/* =========================================================
   FAHRZEUG PLATTFORMEN
========================================================= */

.vehicle-platforms {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        50px;

}


.platform-card {

    display:
        grid;

    grid-template-columns:
        45px
        minmax(
            0,
            1fr
        )
        25px;

    align-items:
        center;

    gap:
        16px;

    padding:
        27px;

    border:
        1px solid #e4e4e4;

    border-radius:
        15px;

    background:
        #ffffff;

    transition:
        .25s
        var(--ease);

}


.platform-card:hover {

    border-color:
        #111111;

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);

}


.platform-card > b {

    color:
        #999999;

    font-size:
        11px;

}


.platform-card small {

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.platform-card h3 {

    margin:
        6px
        0;

    font-size:
        23px;

}


.platform-card p {

    margin:
        0;

    color:
        #777777;

    font-size:
        13px;

}


.platform-card > span {

    font-size:
        22px;

    transition:
        transform .2s ease;

}


.platform-card:hover > span {

    transform:
        translate(
            3px,
            -3px
        );

}


/* =========================================================
   AUTO VERKAUFEN / CTA
========================================================= */

.sell-section {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #111111;

}


.sell-background {

    position:
        absolute;

    inset:
        0;

    background:
        url(
            "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=2200&q=85"
        )
        center
        / cover;

    opacity:
        .22;

    filter:
        grayscale(25%);

}


.sell-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94),
            rgba(0,0,0,.58)
        );

}


.sell-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

    padding:
        90px
        0;

}


.sell-content h2 {

    margin-top:
        15px;

    color:
        #ffffff;

}


.sell-content p {

    max-width:
        650px;

    margin-bottom:
        28px;

    color:
        #bbbbbb;

    font-size:
        17px;

    line-height:
        1.8;

}


/* =========================================================
   KONTAKT
========================================================= */

.contact-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        50px;

}


.contact-card {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    padding:
        30px;

    border:
        1px solid #e5e5e5;

    border-radius:
        15px;

    background:
        #ffffff;

    transition:
        .22s
        var(--ease);

}


.contact-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #cccccc;

    box-shadow:
        var(--shadow);

}


.contact-card small {

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.contact-card strong {

    font-size:
        18px;

}


.contact-card span {

    color:
        #777777;

    font-size:
        13px;

}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.social-section {

    padding:
        60px
        0;

    background:
        #f6f6f6;

}


.social-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.social-inner h2 {

    margin:
        10px
        0
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        44px;

}


.social-links {

    display:
        flex;

    gap:
        9px;

}


.social-links a {

    padding:
        13px
        17px;

    background:
        #ffffff;

    border:
        1px solid #dddddd;

    border-radius:
        8px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .2s ease;

}


.social-links a:hover {

    color:
        var(--red);

    border-color:
        var(--red);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    padding-top:
        60px;

    color:
        #ffffff;

    background:
        #111111;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1.2fr
        1fr;

    gap:
        40px;

    padding-bottom:
        50px;

}


/* =========================================================
   FOOTER LOGO
========================================================= */

.footer-brand img {

    width:
        180px;

    height:
        68px;

    margin-bottom:
        13px;

    object-fit:
        contain;

    object-position:
        left center;

    filter:
        grayscale(100%)
        brightness(3);

}


.footer-brand p {

    color:
        #888888;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   FOOTER SPALTEN
========================================================= */

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.footer-column h4 {

    margin:
        0
        0
        8px;

    font-size:
        12px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.footer-column a {

    color:
        #aaaaaa;

    font-size:
        13px;

    transition:
        color .2s ease;

}


.footer-column a:hover {

    color:
        #ffffff;

}


.footer-column span {

    color:
        #888888;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border-top:
        1px solid #292929;

    color:
        #777777;

    font-size:
        10px;

}


/* =========================================================
   FLOATING TELEFON
========================================================= */

.floating-contact {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        900;

    width:
        56px;

    height:
        56px;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

    background:
        var(--red);

    border-radius:
        50%;

    box-shadow:
        0 14px 32px
        rgba(
            201,
            0,
            0,
            .28
        );

    font-size:
        0;

    transition:
        .2s ease;

}


.floating-contact::before {

    content:
        "";

    width:
        17px;

    height:
        17px;

    border:
        2px solid #ffffff;

    border-radius:
        50%;

}


.floating-contact:hover {

    background:
        var(--red-dark);

    transform:
        translateY(-3px);

}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        none;

}


.delay-1 {

    transition-delay:
        .08s;

}


.delay-2 {

    transition-delay:
        .16s;

}


.delay-3 {

    transition-delay:
        .24s;

}

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

@media (max-width: 1100px) {


    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .page-width {

        width:
            min(
                var(--container),
                calc(100% - 40px)
            );

    }


    /* -----------------------------------------
       TOP BAR
    ----------------------------------------- */

    .top-bar-inner {

        gap:
            13px;

    }


    .top-socials {

        gap:
            10px;

    }


    /* -----------------------------------------
       NAVIGATION
    ----------------------------------------- */

    .nav-link {

        padding-left:
            10px;

        padding-right:
            10px;

    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero-content {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            310px;

        gap:
            35px;

    }


    /* -----------------------------------------
       ÜBER UNS
    ----------------------------------------- */

    .about-grid {

        grid-template-columns:
            170px
            minmax(
                0,
                1fr
            );

        gap:
            40px;

    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {

        grid-template-columns:
            1.4fr
            1fr
            1fr;

    }


    .footer-grid
    .footer-column:last-child {

        grid-column:
            2;

    }

}



/* =========================================================
   TABLET / KLEINERE BILDSCHIRME
========================================================= */

@media (max-width: 850px) {


    /* =====================================================
       TOP BAR AUSBLENDEN
    ===================================================== */

    .top-bar {

        display:
            none;

    }


    /* =====================================================
       HEADER
    ===================================================== */

    .nav-wrapper {

        min-height:
            76px;

        gap:
            15px;

    }


    /* =====================================================
       LOGO
    ===================================================== */

    .brand {

        width:
            175px;

        flex:
            0 0 175px;

    }


    .brand-logo {

        width:
            175px;

        height:
            58px;

    }


    /* =====================================================
       DESKTOP NAVIGATION AUS
    ===================================================== */

    .desktop-nav {

        display:
            none;

    }


    /* =====================================================
       HAMBURGER EIN
    ===================================================== */

    .mobile-menu-button {

        display:
            flex;

        margin-left:
            auto;

    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero {

        min-height:
            0;

    }


    .hero-gradient {

        background:
            linear-gradient(
                90deg,
                rgba(
                    255,
                    255,
                    255,
                    .97
                ),
                rgba(
                    255,
                    255,
                    255,
                    .82
                )
            );

    }


    .hero-content {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            70px
            0
            90px;

    }


    .hero-copy {

        max-width:
            700px;

    }


    .hero-side-card {

        max-width:
            520px;

    }


    /* =====================================================
       QUICK INFO
    ===================================================== */

    .quick-grid {

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

    }


    .quick-item:nth-child(2) {

        border-right:
            0;

    }


    .quick-item:nth-child(-n+2) {

        border-bottom:
            1px solid #2b2b2b;

    }


    /* =====================================================
       ÜBER UNS
    ===================================================== */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


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

    .service-grid {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       KONTAKT
    ===================================================== */

    .contact-grid {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       FAHRZEUGE
    ===================================================== */

    .vehicle-intro {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .vehicle-platforms {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {

        grid-template-columns:
            1fr
            1fr;

    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {


    /* =====================================================
       CONTAINER
    ===================================================== */

    .page-width {

        width:
            calc(
                100% - 28px
            );

    }


    /* =====================================================
       HEADER
    ===================================================== */

    .nav-wrapper {

        min-height:
            70px;

    }


    /* =====================================================
       LOGO
    ===================================================== */

    .brand {

        width:
            150px;

        flex:
            0 0 150px;

    }


    .brand-logo {

        width:
            150px;

        height:
            52px;

    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .mobile-menu-button {

        width:
            46px;

        height:
            46px;

    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-content {

        padding:
            55px
            0
            72px;

    }


    .hero-background {

        background-position:
            60%
            center;

        opacity:
            .22;

    }


    .hero-gradient {

        background:
            linear-gradient(
                90deg,
                rgba(
                    255,
                    255,
                    255,
                    .985
                ),
                rgba(
                    255,
                    255,
                    255,
                    .92
                )
            );

    }


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

    .hero h1 {

        font-size:
            clamp(
                44px,
                13vw,
                58px
            );

        letter-spacing:
            -2px;

        line-height:
            1;

    }


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

    .hero-text {

        margin-top:
            22px;

        font-size:
            16px;

        line-height:
            1.65;

    }


    /* =====================================================
       HERO BUTTONS
    ===================================================== */

    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .button {

        width:
            100%;

    }


    /* =====================================================
       HERO CARD
    ===================================================== */

    .hero-side-card {

        padding:
            27px;

    }


    .hero-side-card h2 {

        font-size:
            32px;

    }


    /* =====================================================
       SCROLL HINWEIS
    ===================================================== */

    .hero-scroll {

        display:
            none;

    }


    /* =====================================================
       QUICK INFO
    ===================================================== */

    .quick-grid {

        grid-template-columns:
            1fr;

    }


    .quick-item {

        min-height:
            90px;

        border-right:
            0 !important;

        border-bottom:
            1px solid #2b2b2b !important;

    }


    .quick-item:last-child {

        border-bottom:
            0 !important;

    }


    /* =====================================================
       SECTIONS
    ===================================================== */

    .about-section,
    .services-section,
    .vehicles-section,
    .contact-section {

        padding:
            75px
            0;

    }


    /* =====================================================
       SEKTIONS-ÜBERSCHRIFTEN
    ===================================================== */

    .about-content h2,
    .section-heading h2,
    .vehicle-intro h2,
    .sell-content h2,
    .contact-section h2 {

        font-size:
            42px;

        letter-spacing:
            -1.4px;

        line-height:
            1.05;

    }


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

    .large-text {

        font-size:
            18px;

    }


    /* =====================================================
       SERVICE CARDS
    ===================================================== */

    .service-card {

        padding:
            27px;

    }


    .service-card h3 {

        margin-top:
            35px;

    }


    .service-card p {

        min-height:
            auto;

    }


    /* =====================================================
       FAHRZEUGE
    ===================================================== */

    .platform-card {

        grid-template-columns:
            32px
            minmax(
                0,
                1fr
            )
            20px;

        padding:
            22px
            16px;

    }


    .platform-card h3 {

        font-size:
            20px;

    }


    /* =====================================================
       ANKAUF BEREICH
    ===================================================== */

    .sell-section {

        min-height:
            470px;

    }


    .sell-content {

        padding:
            75px
            0;

    }


    .sell-content p {

        font-size:
            16px;

    }


    /* =====================================================
       SOCIAL MEDIA
    ===================================================== */

    .social-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .social-inner h2 {

        font-size:
            38px;

    }


    .social-links {

        width:
            100%;

        flex-direction:
            column;

    }


    .social-links a {

        text-align:
            center;

    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid
    .footer-column:last-child {

        grid-column:
            auto;

    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            17px
            0;

    }


    /* =====================================================
       TELEFON BUTTON
    ===================================================== */

    .floating-contact {

        right:
            15px;

        bottom:
            15px;

    }

}



/* =========================================================
   SEHR KLEINE SMARTPHONES
   z.B. 320px / 360px
========================================================= */

@media (max-width: 380px) {


    .page-width {

        width:
            calc(
                100% - 22px
            );

    }


    .brand {

        width:
            135px;

        flex-basis:
            135px;

    }


    .brand-logo {

        width:
            135px;

        height:
            48px;

    }


    .mobile-menu-button {

        width:
            43px;

        height:
            43px;

    }


    .hero h1 {

        font-size:
            41px;

    }


    .hero-text {

        font-size:
            15px;

    }


    .about-content h2,
    .section-heading h2,
    .vehicle-intro h2,
    .sell-content h2,
    .contact-section h2 {

        font-size:
            37px;

    }


    .hero-side-card h2 {

        font-size:
            29px;

    }


    .about-point {

        grid-template-columns:
            38px
            1fr;

        gap:
            12px;

    }

}

/* =========================================================
   SICHERHEIT GEGEN HORIZONTALES ÜBERLAUFEN
========================================================= */

/*
   Verhindert, dass lange E-Mail-Adressen,
   Telefonnummern oder Links die mobile Seite
   nach rechts drücken.
*/

h1,
h2,
h3,
h4,
p,
a,
span,
strong,
small,
div {

    overflow-wrap:
        anywhere;

}


/* =========================================================
   LANGE ADRESSEN / LINKS
========================================================= */

a {

    max-width:
        100%;

}


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

img {

    max-width:
        100%;

}


/* =========================================================
   FORMULAR ELEMENTE
   Wichtig, falls Elemente später auf der
   Ankauf-Seite eingebunden werden.
========================================================= */

input,
textarea,
select {

    max-width:
        100%;

}


/* =========================================================
   MOBILE TOUCH VERHALTEN
========================================================= */

@media (max-width: 850px) {

    a,
    button {

        -webkit-tap-highlight-color:
            transparent;

    }


    .nav-link,
    .mobile-menu a,
    .button,
    .platform-card,
    .service-card,
    .contact-card,
    .social-links a {

        -webkit-tap-highlight-color:
            transparent;

    }

}


/* =========================================================
   FOCUS
   Bessere Bedienbarkeit mit Tastatur.
========================================================= */

a:focus-visible,
button:focus-visible {

    outline:
        3px solid
        rgba(
            201,
            0,
            0,
            .35
        );

    outline-offset:
        3px;

}


/* =========================================================
   MOBILE MENU – SICHERHEIT
========================================================= */

@media (max-width: 850px) {

    .mobile-menu {

        width:
            100%;

        max-width:
            100vw;

        overflow:
            hidden;

    }


    .mobile-menu a {

        width:
            100%;

        max-width:
            100%;

    }

}


/* =========================================================
   HERO MOBILE – KEIN ÜBERLAUFEN
========================================================= */

@media (max-width: 600px) {

    .hero {

        width:
            100%;

        max-width:
            100vw;

    }


    .hero-content {

        width:
            100%;

        max-width:
            100%;

    }


    .hero-copy {

        width:
            100%;

        max-width:
            100%;

    }


    .hero-side-card {

        width:
            100%;

        max-width:
            100%;

    }

}


/* =========================================================
   BUTTONS AUF KLEINEN HANDYS
========================================================= */

@media (max-width: 380px) {

    .button {

        padding-left:
            18px;

        padding-right:
            18px;

        font-size:
            13px;

    }


    .hero-actions {

        width:
            100%;

    }

}


/* =========================================================
   REDUCED MOTION
   Für Nutzer, die Animationen deaktiviert haben.
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }


    .reveal {

        opacity:
            1;

        transform:
            none;

    }

}


/* =========================================================
   ANKAUF / FAHRZEUG VERKAUFEN
========================================================= */

.ankauf-page {

    background:
        #f7f7f7;

    color:
        #111111;

}


/* ---------------------------------------------------------
   ANKAUF HERO
--------------------------------------------------------- */

.ankauf-hero {

    position:
        relative;

    padding:
        100px 0 85px;

    background:
        #111111;

    color:
        #ffffff;

    overflow:
        hidden;

}


.ankauf-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -180px;

    top:
        -180px;

    background:
        radial-gradient(
            circle,
            rgba(201,0,0,.35),
            transparent 68%
        );

    pointer-events:
        none;

}


.ankauf-hero-inner {

    position:
        relative;

    z-index:
        2;

}


.ankauf-kicker {

    margin-bottom:
        18px;

    color:
        #e00000;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.ankauf-hero h1 {

    max-width:
        850px;

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    line-height:
        1;

    letter-spacing:
        -2px;

}


.ankauf-hero h1 span {

    color:
        #e00000;

}


.ankauf-hero p {

    max-width:
        680px;

    margin:
        25px 0 0;

    color:
        #bcbcbc;

    font-size:
        18px;

    line-height:
        1.75;

}


/* ---------------------------------------------------------
   FORMULAR-BEREICH
--------------------------------------------------------- */

.ankauf-main {

    padding:
        80px 0 110px;

}


.ankauf-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        300px;

    gap:
        35px;

    align-items:
        start;

}


/* ---------------------------------------------------------
   FORMULAR CARD
--------------------------------------------------------- */

.ankauf-form-card {

    padding:
        clamp(
            25px,
            5vw,
            55px
        );

    background:
        #ffffff;

    border:
        1px solid #e5e5e5;

    border-radius:
        20px;

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

}


/* ---------------------------------------------------------
   FORMULAR ABSCHNITTE
--------------------------------------------------------- */

.ankauf-section {

    padding:
        45px 0;

    border-top:
        1px solid #e8e8e8;

}


.ankauf-section:first-child {

    padding-top:
        0;

    border-top:
        0;

}


.ankauf-section-header {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    margin-bottom:
        32px;

}


.ankauf-number {

    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

    background:
        #111111;

    border-radius:
        50%;

    font-size:
        12px;

    font-weight:
        800;

}


.ankauf-section-header h2 {

    margin:
        0;

    color:
        #111111;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:
        1.05;

}


.ankauf-section-header p {

    margin:
        7px 0 0;

    color:
        #888888;

    font-size:
        14px;

}


/* ---------------------------------------------------------
   FORM GRID
--------------------------------------------------------- */

.ankauf-form-grid {

    display:
        grid;

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

    gap:
        20px;

}


.ankauf-field {

    min-width:
        0;

}


.ankauf-field.full {

    grid-column:
        1 / -1;

}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.ankauf-field label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #333333;

    font-size:
        13px;

    font-weight:
        700;

}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.ankauf-field input,
.ankauf-field select,
.ankauf-field textarea {

    width:
        100%;

    min-height:
        52px;

    padding:
        14px 16px;

    color:
        #111111;

    background:
        #ffffff;

    border:
        1px solid #dcdcdc;

    border-radius:
        10px;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        15px;

    box-sizing:
        border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.ankauf-field textarea {

    min-height:
        140px;

    resize:
        vertical;

}


.ankauf-field input:focus,
.ankauf-field select:focus,
.ankauf-field textarea:focus {

    border-color:
        #111111;

    box-shadow:
        0 0 0 3px
        rgba(
            201,
            0,
            0,
            .09
        );

}


/* ---------------------------------------------------------
   SIDEBAR
--------------------------------------------------------- */

.ankauf-sidebar {

    position:
        sticky;

    top:
        100px;

}


.ankauf-info-card {

    padding:
        28px;

    background:
        #111111;

    color:
        #ffffff;

    border-radius:
        18px;

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

}


.ankauf-info-card small {

    color:
        #e00000;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.ankauf-info-card h3 {

    margin:
        12px 0 15px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        30px;

}


.ankauf-info-card p {

    color:
        #aaaaaa;

    font-size:
        14px;

    line-height:
        1.7;

}


.ankauf-benefit {

    display:
        flex;

    gap:
        12px;

    padding:
        15px 0;

    border-top:
        1px solid #292929;

}


.ankauf-benefit strong {

    font-size:
        13px;

}


.ankauf-benefit span {

    color:
        #999999;

    font-size:
        12px;

}


/* ---------------------------------------------------------
   FOTO UPLOAD
--------------------------------------------------------- */

.ankauf-upload {

    padding:
        25px;

    text-align:
        center;

    background:
        #fafafa;

    border:
        1px dashed #cccccc;

    border-radius:
        12px;

}


.ankauf-upload p {

    margin:
        8px 0 0;

    color:
        #888888;

    font-size:
        13px;

}


/* ---------------------------------------------------------
   ABSENDEN BUTTON
--------------------------------------------------------- */

.ankauf-submit {

    width:
        100%;

    min-height:
        58px;

    margin-top:
        25px;

    border:
        0;

    border-radius:
        10px;

    color:
        #ffffff;

    background:
        #c90000;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.ankauf-submit:hover {

    background:
        #a90000;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(
            201,
            0,
            0,
            .22
        );

}

/* ==========================================================
   1A CARWORLD – FINAL MOBILE FIX
   DIESEN BLOCK GANZ UNTEN IN style.css EINFÜGEN
========================================================== */


/* ---------- GRUNDLEGEND ---------- */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}


/* ---------- HEADER ---------- */

.site-header {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
    z-index: 9999 !important;
}

.header-inner {
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    padding: 12px 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    max-width: 210px !important;
}

.brand-logo {
    display: block !important;
    width: 175px !important;
    height: auto !important;
    max-width: 100% !important;
}


/* ---------- DESKTOP NAV ---------- */

.desktop-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
}

.desktop-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 15px !important;

    color: #111111 !important;
    background: transparent !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}


/* ---------- HAMBURGER ---------- */

.menu-toggle {
    display: none !important;

    width: 46px !important;
    height: 46px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: #c90000 !important;

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

    gap: 5px !important;

    cursor: pointer !important;
}

.menu-toggle span {
    display: block !important;

    width: 22px !important;
    height: 2px !important;

    margin: 0 !important;

    background: #ffffff !important;

    border-radius: 5px !important;
}


/* ---------- MOBILE MENU ---------- */

.mobile-nav {
    display: none !important;

    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;

    border-top: 1px solid #eeeeee !important;

    box-shadow: 0 15px 35px rgba(0,0,0,.12) !important;
}

.mobile-nav.open {
    display: block !important;
}

.mobile-nav a {
    display: flex !important;

    width: 100% !important;
    min-height: 55px !important;

    align-items: center !important;

    padding: 0 22px !important;

    color: #111111 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    border-bottom: 1px solid #eeeeee !important;
}


/* ==========================================================
   ANKAUFSEITE
========================================================== */

.ankauf-page {
    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;
}


/* ---------- HERO ---------- */

.ankauf-page .ankauf-hero {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 520px !important;

    position: relative !important;

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

    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.55) 100%
        ),
        url("https://i.ibb.co/zVhMcrxx/5c01b998-6f55-428c-837b-7f36002aef2f.jpg") center/cover no-repeat !important;
}

.ankauf-hero-content {
    width: 100% !important;
    max-width: 1440px !important;

    margin: 0 auto !important;

    padding: 90px 32px !important;
}

.ankauf-hero h1 {
    max-width: 850px !important;

    margin: 0 !important;

    color: #111111 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: clamp(42px, 6vw, 78px) !important;

    line-height: 1.02 !important;

    letter-spacing: -3px !important;
}

.ankauf-hero h1 span {
    display: block !important;
    color: #c90000 !important;
}

.ankauf-hero p {
    max-width: 680px !important;

    margin: 25px 0 0 !important;

    color: #555555 !important;

    font-size: 18px !important;
    line-height: 1.7 !important;
}

.hero-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 25px !important;

    margin-top: 25px !important;
}

.hero-points span {
    color: #222222 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ---------- CONTENT ---------- */

.ankauf-section {
    width: 100% !important;
    max-width: 100% !important;

    padding: 80px 0 100px !important;

    background: #f8f8f8 !important;
}

.ankauf-container {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;

    padding-left: 24px !important;
    padding-right: 24px !important;
}


/* ---------- INTRO ---------- */

.ankauf-intro {
    max-width: 760px !important;

    margin: 0 auto 45px !important;
}

.section-label {
    display: block !important;

    margin-bottom: 14px !important;

    color: #c90000 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: 3px !important;
}

.ankauf-intro h2 {
    margin: 0 0 18px !important;

    color: #111111 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: clamp(34px, 5vw, 58px) !important;

    line-height: 1.05 !important;
}

.ankauf-intro p {
    margin: 0 !important;

    color: #666666 !important;

    font-size: 17px !important;
    line-height: 1.7 !important;
}


/* ---------- FORM ---------- */

.ankauf-form {
    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;

    border: 1px solid #e2e2e2 !important;

    border-radius: 18px !important;

    box-shadow: 0 20px 60px rgba(0,0,0,.08) !important;

    overflow: hidden !important;
}

.form-section {
    width: 100% !important;

    padding: 45px !important;

    border-bottom: 1px solid #eeeeee !important;
}

.form-section-heading {
    display: flex !important;

    align-items: flex-start !important;

    gap: 16px !important;

    margin-bottom: 30px !important;
}

.form-number {
    flex: 0 0 46px !important;

    width: 46px !important;
    height: 46px !important;

    display: flex !important;

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

    background: #c90000 !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    font-weight: 800 !important;
}

.form-section-heading h3 {
    margin: 0 0 5px !important;

    color: #111111 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 25px !important;
    line-height: 1.2 !important;
}

.form-section-heading p {
    margin: 0 !important;

    color: #888888 !important;

    font-size: 14px !important;
}


/* ---------- FORM GRID ---------- */

.form-grid {
    width: 100% !important;

    display: grid !important;

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

    gap: 20px !important;
}

.form-group {
    width: 100% !important;
    min-width: 0 !important;
}

.form-group-full {
    grid-column: 1 / -1 !important;
}

.form-group label {
    display: block !important;

    margin-bottom: 8px !important;

    color: #222222 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

.form-group label span {
    color: #c90000 !important;
}


/* ---------- INPUTS ---------- */

.form-group input,
.form-group select,
.form-group textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding: 13px 15px !important;

    color: #111111 !important;
    background: #ffffff !important;

    border: 1px solid #d8d8d8 !important;

    border-radius: 10px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;

    outline: none !important;
}

.form-group textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #c90000 !important;

    box-shadow:
        0 0 0 3px rgba(201,0,0,.10) !important;
}


/* ---------- UPLOAD ---------- */

.upload-area {
    width: 100% !important;
    max-width: 100% !important;
}

.upload-label {
    width: 100% !important;

    min-height: 150px !important;

    display: flex !important;

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

    flex-direction: column !important;

    padding: 25px !important;

    background: #fafafa !important;

    border: 2px dashed #d5d5d5 !important;

    border-radius: 12px !important;

    cursor: pointer !important;

    text-align: center !important;
}

.upload-label strong {
    margin-top: 8px !important;

    color: #111111 !important;
}

.upload-label span {
    margin-top: 6px !important;

    color: #888888 !important;

    font-size: 13px !important;
}

.upload-icon {
    width: 44px !important;
    height: 44px !important;

    display: flex !important;

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

    background: #c90000 !important;

    color: #ffffff !important;

    border-radius: 50% !important;

    font-size: 25px !important;
}

#fotos {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
}


/* ---------- PRIVACY ---------- */

.privacy-box {
    width: 100% !important;

    padding: 25px 45px !important;

    background: #fafafa !important;
}

.checkbox-label {
    display: flex !important;

    align-items: flex-start !important;

    gap: 12px !important;

    cursor: pointer !important;
}

.checkbox-label input {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin-top: 3px !important;
}

.checkbox-text {
    color: #555555 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}

.checkbox-text a {
    color: #c90000 !important;
    text-decoration: underline !important;
}


/* ---------- SUBMIT ---------- */

.submit-area {
    width: 100% !important;

    padding: 30px 45px 40px !important;

    background: #ffffff !important;
}

.submit-button {
    width: 100% !important;

    min-height: 58px !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: #c90000 !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}

.submit-button:hover {
    background: #a80000 !important;
}

.submit-note {
    margin: 12px 0 0 !important;

    color: #888888 !important;

    text-align: center !important;

    font-size: 12px !important;
}


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

@media (max-width: 850px) {

    .desktop-nav {
        display: none !important;
    }

    .menu-toggle {
        display: flex !important;
    }

    .header-inner {
        min-height: 72px !important;

        padding:
            10px 18px !important;
    }

    .brand-logo {
        width: 145px !important;
        max-height: 55px !important;
    }

    .ankauf-hero {
        min-height: 500px !important;

        background:
            linear-gradient(
                rgba(255,255,255,.93),
                rgba(255,255,255,.93)
            ),
            url("https://i.ibb.co/zVhMcrxx/5c01b998-6f55-428c-837b-7f36002aef2f.jpg")
            center/cover no-repeat !important;
    }

    .ankauf-hero-content {
        padding:
            65px 24px !important;
    }

    .form-section {
        padding:
            35px 25px !important;
    }

    .privacy-box,
    .submit-area {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}


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

@media (max-width: 600px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }

    .header-inner {
        width: 100% !important;

        padding:
            9px 14px !important;
    }

    .brand-logo {
        width: 130px !important;
    }

    .menu-toggle {
        display: flex !important;

        width: 44px !important;
        height: 44px !important;

        flex-shrink: 0 !important;
    }

    .ankauf-hero {
        min-height: auto !important;
    }

    .ankauf-hero-content {
        padding:
            55px 18px 60px !important;
    }

    .ankauf-hero h1 {
        max-width: 100% !important;

        font-size: 42px !important;

        line-height: 1.04 !important;

        letter-spacing: -1.5px !important;
    }

    .ankauf-hero p {
        font-size: 16px !important;

        line-height: 1.65 !important;
    }

    .hero-points {
        display: block !important;
    }

    .hero-points span {
        display: block !important;

        margin-top: 9px !important;
    }

    .ankauf-section {
        padding:
            50px 0 65px !important;
    }

    .ankauf-container {
        padding:
            0 14px !important;
    }

    .ankauf-intro {
        margin-bottom:
            30px !important;
    }

    .ankauf-intro h2 {
        font-size: 34px !important;

        letter-spacing: -1px !important;
    }

    .ankauf-intro p {
        font-size: 16px !important;
    }

    .ankauf-form {
        border-radius: 13px !important;
    }

    .form-section {
        padding:
            28px 16px !important;
    }

    .form-section-heading {
        gap: 12px !important;

        margin-bottom: 25px !important;
    }

    .form-number {
        flex-basis: 40px !important;

        width: 40px !important;
        height: 40px !important;
    }

    .form-section-heading h3 {
        font-size: 22px !important;
    }

    .form-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 17px !important;
    }

    .form-group-full {
        grid-column: auto !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
    }

    .privacy-box {
        padding:
            20px 16px !important;
    }

    .submit-area {
        padding:
            22px 16px 28px !important;
    }

}


/* ==========================================================
   SEHR KLEINES HANDY
========================================================== */

@media (max-width: 380px) {

    .brand-logo {
        width: 118px !important;
    }

    .menu-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .ankauf-hero h1 {
        font-size: 36px !important;
    }

    .ankauf-container {
        padding:
            0 10px !important;
    }

}

/* =========================================================
   ENDE STYLE.CSS
========================================================= */