/* NON-CRITICAL CSS: sections + form + footer */

/* =========================================================
   3 SCHRITTE – ABLAUF
========================================================= */

.av-steps {
    width: 100%;
    padding: 15px 24px 85px;
}

.av-steps-shell {
    width: 100%;
    max-width: 1720px;

    margin: 0 auto;
}


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

.av-steps-heading {
    max-width: 850px;

    margin-bottom: 40px;
}

.av-section-kicker {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    margin-bottom: 14px;

    padding: 0 12px;

    border-radius: 6px;

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

    line-height: 1;

    letter-spacing: 1px;

    color: var(--av-black);
    background: var(--av-yellow);
}

.av-steps-heading h2 {
    margin: 0;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;

    line-height: 1;

    color: var(--av-black);
}


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

.av-steps-grid {
    display: grid;

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

    align-items: stretch;

    gap: 0;
}


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

.av-step-card {
    position: relative;

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

    padding:
        38px 40px
        36px 46px;

    overflow: hidden;

    background: var(--av-white);

    clip-path: polygon(
        7% 0,
        100% 0,
        93% 100%,
        0 100%
    );

    filter:
        drop-shadow(
            0 12px 18px rgba(0, 0, 0, 0.07)
        );

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


/* Hover */

.av-step-card:hover {
    transform: translateY(-5px);

    filter:
        drop-shadow(
            0 17px 22px rgba(0, 0, 0, 0.11)
        );
}


/* =========================================================
   GELBER AKZENT OBEN
========================================================= */

.av-step-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 7%;

    width: 95px;
    height: 6px;

    background: var(--av-yellow);

    transform: skewX(-18deg);
}


/* =========================================================
   GROSSE DEZENTE NUMMER IM HINTERGRUND
========================================================= */

.av-step-card::after {
    content: "";

    position: absolute;

    right: 20px;
    bottom: -35px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        rgba(250, 187, 2, 0.07);

    pointer-events: none;
}


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

.av-step-number {
    position: relative;

    z-index: 2;

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

    width: 58px;
    height: 54px;

    margin-bottom: 27px;

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

    line-height: 1;

    color: var(--av-black);

    background: var(--av-yellow);

    clip-path: polygon(
        12% 0,
        100% 0,
        88% 100%,
        0 100%
    );
}


/* =========================================================
   SCHRITT TITEL
========================================================= */

.av-step-card h3 {
    position: relative;

    z-index: 2;

    margin: 0 0 14px;

    max-width: 330px;

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

    line-height: 1.05;

    color: var(--av-black);
}


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

.av-step-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    max-width: 390px;

    font-size: 16px;

    line-height: 1.55;

    color: #555555;
}


/* =========================================================
   PFEILE
========================================================= */

.av-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

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

    line-height: 1;

    color: var(--av-yellow);

    transform: skewX(-10deg);
}


/* =========================================================
   TABLET / KLEINER DESKTOP
========================================================= */

@media (max-width: 1100px) {

    .av-steps {
        padding:
            10px 16px
            70px;
    }

    .av-steps-heading {
        margin-bottom: 34px;
    }

    .av-steps-grid {
        grid-template-columns:
            minmax(0, 1fr)
            46px
            minmax(0, 1fr)
            46px
            minmax(0, 1fr);
    }

    .av-step-card {
        min-height: 275px;

        padding:
            34px 28px
            32px 35px;
    }

    .av-step-card h3 {
        font-size: 21px;
    }

    .av-step-card p {
        font-size: 15px;
    }

    .av-step-arrow {
        font-size: 34px;
    }

}


/* =========================================================
   TABLET HOCHKANT / MOBILE
========================================================= */

@media (max-width: 820px) {

    .av-steps {
        padding:
            5px 10px
            60px;
    }

    .av-steps-heading {
        margin-bottom: 28px;
    }

    .av-steps-heading h2 {
        font-size: 30px;
    }


    /* Schritte untereinander */

    .av-steps-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /* Karten */

    .av-step-card {
        min-height: auto;

        padding:
            32px 34px
            32px 40px;

        clip-path: polygon(
            5% 0,
            100% 0,
            95% 100%,
            0 100%
        );
    }


    /* Pfeil nach unten */

    .av-step-arrow {
        height: 60px;

        font-size: 36px;

        transform:
            rotate(90deg)
            skewX(-10deg);
    }

}


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

@media (max-width: 600px) {

    .av-steps-heading h2 {
        font-size: 29px;
    }

    .av-step-card {
        padding:
            30px 30px
            30px 36px;

        clip-path: polygon(
            4% 0,
            100% 0,
            96% 100%,
            0 100%
        );
    }

    .av-step-number {
        width: 54px;
        height: 50px;

        margin-bottom: 23px;

        font-size: 17px;
    }

    .av-step-card h3 {
        font-size: 22px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 480px) {

    .av-steps {
        padding:
            0 10px
            50px;
    }

    .av-section-kicker {
        font-size: 11px;
    }

    .av-steps-heading h2 {
        font-size: 27px;

        line-height: 1.02;
    }

    .av-step-card {
        padding:
            28px 26px
            28px 31px;

        clip-path: polygon(
            4% 0,
            100% 0,
            96% 100%,
            0 100%
        );
    }

    .av-step-card::before {
        left: 4%;

        width: 75px;
    }

    .av-step-number {
        width: 50px;
        height: 47px;

        margin-bottom: 21px;

        font-size: 16px;
    }

    .av-step-card h3 {
        margin-bottom: 12px;

        font-size: 21px;
    }

    .av-step-card p {
        font-size: 15px;

        line-height: 1.5;
    }

    .av-step-arrow {
        height: 52px;

        font-size: 31px;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 360px) {

    .av-steps-heading h2 {
        font-size: 25px;
    }

    .av-step-card {
        padding:
            26px 23px
            26px 28px;
    }

    .av-step-card h3 {
        font-size: 19px;
    }

    .av-step-card p {
        font-size: 14px;
    }

}
/* =========================================================
   SEO TEXTBEREICH AUTOVERWERTUNG
========================================================= */

.av-local-content {
    width: 100%;

    padding: 35px 24px 95px;
}

.av-local-content-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}

.av-local-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    align-items: start;

    gap: 90px;

    padding-top: 48px;

    border-top: 2px solid var(--av-black);
}


/* Überschrift */

.av-local-content-title h2 {
    margin: 0;

    max-width: 720px;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.8px;

    color: var(--av-black);
}


/* Textseite */

.av-local-content-text {
    max-width: 720px;
}

.av-local-content-text p {
    margin: 0 0 22px;

    font-size: 18px;

    line-height: 1.7;

    color: #454545;
}

.av-local-content-text p:last-child {
    margin-bottom: 0;
}


/* kleine gelbe Linie */

.av-local-content-text::before {
    content: "";

    display: block;

    width: 70px;
    height: 4px;

    margin-bottom: 26px;

    background: var(--av-yellow);
}


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

@media (max-width: 1000px) {

    .av-local-content {
        padding:
            30px 16px
            75px;
    }

    .av-local-content-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .av-local-content-title h2 {
        max-width: 850px;
    }

    .av-local-content-text {
        max-width: 760px;
    }

}


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

@media (max-width: 600px) {

    .av-local-content {
        padding:
            25px 14px
            60px;
    }

    .av-local-content-grid {
        padding-top: 32px;

        gap: 28px;
    }

    .av-local-content-title h2 {
        font-size: 28px;

        line-height: 1;
    }

    .av-local-content-text p {
        font-size: 16px;

        line-height: 1.6;

        margin-bottom: 18px;
    }

    .av-local-content-text::before {
        width: 55px;

        margin-bottom: 22px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-local-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-local-content-title h2 {
        font-size: 27px;
    }

    .av-local-content-text p {
        font-size: 15px;
    }

}/* =========================================================
   FAHRZEUGARTEN – PASSEND ZU DEINEM HTML
========================================================= */

.av-vehicle-types {
    width: 100%;
    padding: 45px 24px 90px;
}

.av-vehicle-types-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   KOPF
========================================================= */

.av-vehicle-types-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: end;
    gap: 70px;

    margin-bottom: 50px;
}

.av-vehicle-types-title h2 {
    margin: 0;

    max-width: 900px;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -1px;

    color: var(--av-black);
}

.av-vehicle-types-intro {
    max-width: 590px;
}

.av-vehicle-types-intro p {
    margin: 0;

    font-size: 18px;
    line-height: 1.6;

    color: #444444;
}


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

.av-vehicle-types-list {
    width: 100%;

    border-top: 2px solid var(--av-black);
}


/* =========================================================
   EINZELNE ZEILE
========================================================= */

.av-vehicle-type-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(220px, 0.8fr)
        minmax(320px, 1fr)
        60px;

    align-items: center;

    gap: 30px;

    min-height: 145px;

    padding: 28px 0;

    border-bottom: 1px solid #c7c7c7;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.av-vehicle-type-row:hover {
    transform: translateX(8px);
    border-color: #999999;
}


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

.av-vehicle-type-index {
    font-size: 22px;
    font-weight: 900;

    color: var(--av-yellow);
}


/* =========================================================
   TITEL
========================================================= */

.av-vehicle-type-name h3 {
    margin: 0;

    font-size: clamp(23px, 1.8vw, 30px);
    font-weight: 700;
    line-height: 1;

    color: var(--av-black);
}


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

.av-vehicle-type-text p {
    margin: 0;

    max-width: 620px;

    font-size: 17px;
    line-height: 1.55;

    color: #555555;
}


/* =========================================================
   PFEIL
========================================================= */

.av-vehicle-type-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-left: auto;

    border: 1px solid #bdbdbd;
    border-radius: 50%;

    font-size: 21px;
    line-height: 1;

    color: var(--av-black);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.av-vehicle-type-row:hover .av-vehicle-type-arrow {
    background: var(--av-yellow);
    border-color: var(--av-yellow);
    color: var(--av-black);

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


/* =========================================================
   UNTERE ZEILE
========================================================= */

.av-vehicle-types-bottom {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 28px;
}

.av-vehicle-types-bottom strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;

    color: var(--av-black);
}

.av-vehicle-types-bottom span {
    font-size: 15px;
    line-height: 1.55;

    color: #555555;
}


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

@media (max-width: 1050px) {

    .av-vehicle-types {
        padding: 35px 16px 75px;
    }

    .av-vehicle-types-head {
        gap: 40px;
    }

    .av-vehicle-types-intro p {
        font-size: 17px;
    }

    .av-vehicle-type-row {
        grid-template-columns:
            55px
            minmax(190px, 0.75fr)
            minmax(260px, 1fr)
            50px;

        gap: 20px;
    }

    .av-vehicle-type-text p {
        font-size: 16px;
    }

}


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

@media (max-width: 850px) {

    .av-vehicle-types-head {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 40px;
    }

    .av-vehicle-types-intro {
        max-width: 720px;
    }

    .av-vehicle-type-row {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            48px;

        gap: 12px 18px;

        padding: 26px 0;
    }

    .av-vehicle-type-index {
        grid-column: 1;
        grid-row: 1;
    }

    .av-vehicle-type-name {
        grid-column: 2;
        grid-row: 1;
    }

    .av-vehicle-type-text {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .av-vehicle-type-arrow {
        grid-column: 3;
        grid-row: 1 / span 2;

        align-self: center;
    }

}


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

@media (max-width: 600px) {

    .av-vehicle-types {
        padding: 25px 14px 60px;
    }

    .av-vehicle-types-head {
        margin-bottom: 32px;
    }

    .av-vehicle-types-title h2 {
        font-size: 30px;
        line-height: 0.98;
    }

    .av-vehicle-types-intro p {
        font-size: 16px;
    }

    .av-vehicle-type-row {
        grid-template-columns:
            35px
            minmax(0, 1fr);

        gap: 9px 12px;

        min-height: auto;

        padding: 24px 0;
    }

    .av-vehicle-type-row:hover {
        transform: none;
    }

    .av-vehicle-type-index {
        grid-column: 1;
        grid-row: 1;

        font-size: 14px;
    }

    .av-vehicle-type-name {
        grid-column: 2;
        grid-row: 1;
    }

    .av-vehicle-type-name h3 {
        font-size: 25px;
    }

    .av-vehicle-type-text {
        grid-column: 1 / -1;
        grid-row: 2;

        padding-left: 47px;
    }

    .av-vehicle-type-text p {
        font-size: 15px;
        line-height: 1.5;
    }

    .av-vehicle-type-arrow {
        display: none;
    }

    .av-vehicle-types-bottom {
        margin-top: 22px;

        gap: 6px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-vehicle-types {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-vehicle-types-title h2 {
        font-size: 27px;
    }

    .av-vehicle-types-intro p {
        font-size: 15px;
    }

    .av-vehicle-type-name h3 {
        font-size: 22px;
    }

    .av-vehicle-type-text {
        padding-left: 0;
    }

    .av-vehicle-type-text p {
        font-size: 14px;
    }

    .av-vehicle-types-bottom strong,
    .av-vehicle-types-bottom span {
        width: 100%;
    }

}

/* =========================================================
   AUTOVERWERTUNG – BILD + FLIESSTEXT
========================================================= */

.av-about-recycling {
    width: 100%;

    padding: 45px 24px 105px;
}

.av-about-recycling-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}


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

.av-about-recycling-grid {
    display: grid;

    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(480px, 1.1fr);

    align-items: center;

    gap: clamp(60px, 7vw, 120px);
}


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

.av-about-recycling-image {
    position: relative;

    min-width: 0;
    height: 650px;

    overflow: hidden;
}


/* Bild */

.av-about-recycling-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;
}

.av-about-recycling-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   TEXT AUF DEM BILD
========================================================= */

.av-about-recycling-image-text {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    min-width: 240px;

    padding:
        20px 28px
        18px;

    background: var(--av-yellow);

    color: var(--av-black);
}

.av-about-recycling-image-text strong {
    font-size: 17px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.4px;
}

.av-about-recycling-image-text span {
    margin-top: 6px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;
}


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

.av-about-recycling-content {
    min-width: 0;

    max-width: 760px;
}


/* gelber Akzent */

.av-about-recycling-line {
    width: 75px;
    height: 5px;

    margin-bottom: 27px;

    background: var(--av-yellow);

    transform: skewX(-20deg);
}


/* =========================================================
   H2
========================================================= */

.av-about-recycling-content h2 {
    margin:
        0 0
        28px;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.7px;

    color: var(--av-black);
}


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

.av-about-recycling-content p {
    margin:
        0 0
        20px;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.7;

    color: #494949;
}

.av-about-recycling-content p strong {
    font-weight: 700;

    color: var(--av-black);
}


/* Erster Absatz etwas größer */

.av-about-recycling-content .av-about-recycling-lead {
    margin-bottom: 23px;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.55;

    color: #242424;
}


/* =========================================================
   LINK
========================================================= */

.av-about-recycling-link {
    display: inline-flex;
    align-items: center;

    margin-top: 13px;

    gap: 12px;

    padding-bottom: 6px;

    border-bottom:
        2px solid var(--av-yellow);

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

    letter-spacing: 0.3px;

    color: var(--av-black);

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}

.av-about-recycling-link span {
    font-size: 21px;

    line-height: 1;
}

.av-about-recycling-link:hover {
    gap: 18px;
}


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

@media (max-width: 1100px) {

    .av-about-recycling {
        padding:
            35px 16px
            85px;
    }

    .av-about-recycling-grid {
        grid-template-columns:
            minmax(330px, 0.85fr)
            minmax(400px, 1.15fr);

        gap: 50px;
    }

    .av-about-recycling-image {
        height: 590px;
    }

    .av-about-recycling-content p {
        font-size: 16px;
    }

    .av-about-recycling-content .av-about-recycling-lead {
        font-size: 18px;
    }

}


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

@media (max-width: 850px) {

    .av-about-recycling-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .av-about-recycling-image {
        width: 100%;
        height: 500px;
    }

    .av-about-recycling-content {
        max-width: 760px;
    }

}


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

@media (max-width: 600px) {

    .av-about-recycling {
        padding:
            25px 14px
            65px;
    }

    .av-about-recycling-grid {
        gap: 35px;
    }


    /* Bild */

    .av-about-recycling-image {
        height: 390px;
    }

    .av-about-recycling-image-text {
        min-width: 200px;

        padding:
            16px 20px
            15px;
    }

    .av-about-recycling-image-text strong {
        font-size: 15px;
    }

    .av-about-recycling-image-text span {
        font-size: 13px;
    }


    /* Inhalt */

    .av-about-recycling-line {
        width: 58px;
        height: 4px;

        margin-bottom: 22px;
    }

    .av-about-recycling-content h2 {
        margin-bottom: 22px;

        font-size: 29px;
    }

    .av-about-recycling-content .av-about-recycling-lead {
        font-size: 17px;

        line-height: 1.55;
    }

    .av-about-recycling-content p {
        margin-bottom: 17px;

        font-size: 15px;

        line-height: 1.65;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-about-recycling {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-about-recycling-image {
        height: 330px;
    }

    .av-about-recycling-content h2 {
        font-size: 27px;
    }

    .av-about-recycling-content .av-about-recycling-lead {
        font-size: 16px;
    }

}
	
/* =========================================================
   REGION SHOWCASE
========================================================= */

.av-region-showcase {
    width: 100%;
    padding: 55px 24px 110px;
}

.av-region-showcase-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}


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

.av-region-showcase-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(520px, 1.12fr);

    align-items: stretch;

    gap: 70px;
}


/* =========================================================
   LINKER TEXTBEREICH
========================================================= */

.av-region-showcase-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: 680px;

    padding:
        55px 0
        55px 10px;
}


/* kleine gelbe Linie */

.av-region-showcase-copy::before {
    content: "";

    display: block;

    width: 76px;
    height: 5px;

    margin-bottom: 28px;

    background: var(--av-yellow);

    transform: skewX(-18deg);
}


/* Titel */

.av-region-showcase-copy h2 {
    margin: 0 0 28px;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 700;

    line-height: 0.97;

    letter-spacing: -0.9px;

    color: var(--av-black);
}


/* Lead */

.av-region-showcase-lead {
    margin: 0 0 20px;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.55;

    color: #242424;
}


/* normaler Text */

.av-region-showcase-copy p:not(.av-region-showcase-lead) {
    margin: 0;

    font-size: 17px;

    line-height: 1.7;

    color: #4b4b4b;
}


/* Bundesland */

.av-region-showcase-state {
    display: inline-flex;

    width: fit-content;

    margin-top: 32px;

    padding-bottom: 6px;

    border-bottom: 2px solid var(--av-yellow);

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

    color: var(--av-black);
}


/* =========================================================
   RECHTES GELBES PANEL
========================================================= */

.av-region-showcase-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 560px;

    padding:
        46px 52px
        38px;

    overflow: hidden;

    background: var(--av-yellow);

    clip-path: polygon(
        8% 0,
        100% 0,
        100% 92%,
        92% 100%,
        0 100%,
        0 8%
    );
}


/* dezente schwarze Ecke */

.av-region-showcase-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 120px;
    height: 120px;

    background: rgba(0, 0, 0, 0.08);

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 0
    );
}


/* =========================================================
   GROSSER STADTNAME
========================================================= */

.av-region-showcase-city {
    position: relative;

    z-index: 2;

    margin-bottom: 52px;

    max-width: 100%;

    overflow-wrap: anywhere;

    font-size: clamp(54px, 6.5vw, 105px);
    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -2px;

    text-transform: uppercase;

    color: var(--av-black);
}


/* =========================================================
   DATENBLOCK
========================================================= */

.av-region-showcase-block {
    position: relative;

    z-index: 2;

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

    gap: 28px;

    padding:
        25px 0;

    border-top:
        1px solid rgba(0, 0, 0, 0.22);
}


/* Label */

.av-region-showcase-label {
    padding-top: 4px;

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

    line-height: 1;

    letter-spacing: 1.2px;

    color: rgba(0, 0, 0, 0.55);
}


/* =========================================================
   UMGEBUNG
========================================================= */

.av-region-showcase-list {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px 22px;
}

.av-region-showcase-list span {
    font-size: 17px;
    font-weight: 700;

    line-height: 1.4;

    color: var(--av-black);
}


/* =========================================================
   PLZ
========================================================= */

.av-region-showcase-postcodes {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px 18px;
}

.av-region-showcase-postcodes span {
    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    color: var(--av-black);
}


/* =========================================================
   PANEL UNTEN
========================================================= */

.av-region-showcase-footer {
    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 28px;

    border-top:
        1px solid rgba(0, 0, 0, 0.22);
}

.av-region-showcase-footer span {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.4px;

    color: rgba(0, 0, 0, 0.7);
}


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

@media (max-width: 1100px) {

    .av-region-showcase {
        padding:
            45px 16px
            90px;
    }

    .av-region-showcase-grid {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(430px, 1.2fr);

        gap: 45px;
    }

    .av-region-showcase-copy {
        padding-left: 0;
    }

    .av-region-showcase-panel {
        min-height: 520px;

        padding:
            40px 40px
            34px;
    }

    .av-region-showcase-block {
        grid-template-columns:
            120px
            minmax(0, 1fr);

        gap: 20px;
    }

}


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

@media (max-width: 850px) {

    .av-region-showcase-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .av-region-showcase-copy {
        max-width: 760px;

        padding:
            20px 0
            15px;
    }

    .av-region-showcase-panel {
        min-height: 500px;
    }

}


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

@media (max-width: 600px) {

    .av-region-showcase {
        padding:
            35px 14px
            70px;
    }

    .av-region-showcase-copy::before {
        width: 58px;
        height: 4px;

        margin-bottom: 22px;
    }

    .av-region-showcase-copy h2 {
        font-size: 30px;

        margin-bottom: 22px;
    }

    .av-region-showcase-lead {
        font-size: 17px;
    }

    .av-region-showcase-copy p:not(.av-region-showcase-lead) {
        font-size: 15px;

        line-height: 1.6;
    }


    /* Panel */

    .av-region-showcase-panel {
        min-height: auto;

        padding:
            32px 25px
            28px;

        clip-path: polygon(
            7% 0,
            100% 0,
            100% 94%,
            93% 100%,
            0 100%,
            0 6%
        );
    }

    .av-region-showcase-city {
        margin-bottom: 35px;

        font-size: clamp(48px, 16vw, 76px);
    }

    .av-region-showcase-block {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            20px 0;
    }

    .av-region-showcase-label {
        padding-top: 0;
    }

    .av-region-showcase-list {
        gap:
            7px 16px;
    }

    .av-region-showcase-list span {
        font-size: 15px;
    }

    .av-region-showcase-postcodes span {
        font-size: 14px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-region-showcase {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-region-showcase-copy h2 {
        font-size: 27px;
    }

    .av-region-showcase-panel {
        padding:
            28px 20px
            25px;
    }

    .av-region-showcase-city {
        font-size: 50px;
    }

}
/* =========================================================
   SEO SERVICES
   AUTOVERWERTUNG / FAHRZEUGANKAUF
========================================================= */

.av-seo-services {
    width: 100%;

    padding: 55px 24px 105px;
}

.av-seo-services-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}


/* =========================================================
   HAUPT-GRID
========================================================= */

.av-seo-services-grid {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.72fr)
        minmax(520px, 1.28fr);

    align-items: start;

    gap: clamp(70px, 8vw, 140px);
}


/* =========================================================
   LINKE SEITE
========================================================= */

.av-seo-services-left {
    position: sticky;

    top: 110px;

    min-width: 0;

    padding-top: 5px;
}


/* gelbe Linie */

.av-seo-services-left::before {
    content: "";

    display: block;

    width: 82px;
    height: 5px;

    margin-bottom: 28px;

    background: var(--av-yellow);

    transform: skewX(-18deg);
}


/* Titel */

.av-seo-services-left h2 {
    margin: 0 0 27px;

    max-width: 620px;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;

    line-height: 0.97;

    letter-spacing: -0.8px;

    color: var(--av-black);
}


/* Lead */

.av-seo-services-lead {
    max-width: 500px;

    margin: 0;

    font-size: 19px;
    font-weight: 500;

    line-height: 1.55;

    color: #454545;
}


/* CTA */

.av-seo-services-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding-bottom: 7px;

    border-bottom: 2px solid var(--av-yellow);

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

    letter-spacing: 0.3px;

    color: var(--av-black);

    transition:
        gap 0.2s ease;
}

.av-seo-services-link span {
    font-size: 21px;

    line-height: 1;
}

.av-seo-services-link:hover {
    gap: 18px;
}


/* =========================================================
   RECHTE SEITE
========================================================= */

.av-seo-services-content {
    width: 100%;

    border-top: 2px solid var(--av-black);
}


/* =========================================================
   EINZELNER INHALTSBLOCK
========================================================= */

.av-seo-services-row {
    display: grid;

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

    align-items: start;

    gap: 25px;

    padding:
        34px 0
        36px;

    border-bottom: 1px solid #c9c9c9;
}


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

.av-seo-services-number {
    padding-top: 5px;

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

    line-height: 1;

    color: var(--av-yellow);
}


/* =========================================================
   TITEL
========================================================= */

.av-seo-services-copy h3 {
    margin:
        0 0
        15px;

    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 700;

    line-height: 1.05;

    color: var(--av-black);
}


/* =========================================================
   FLIESSTEXT
========================================================= */

.av-seo-services-copy p {
    margin: 0;

    max-width: 810px;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.68;

    color: #4b4b4b;
}

.av-seo-services-copy p strong {
    font-weight: 700;

    color: var(--av-black);
}


/* =========================================================
   KEYWORDS UNTEN
========================================================= */

.av-seo-services-keywords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        10px 24px;

    margin-top: 42px;

    padding:
        28px 0
        0;

    border-top: 1px solid #c9c9c9;
}


/* einzelne Begriffe */

.av-seo-services-keywords span {
    position: relative;

    padding-left: 13px;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    color: #666666;
}


/* gelber Strich */

.av-seo-services-keywords span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 2px;

    transform: translateY(-50%);

    background: var(--av-yellow);
}


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

@media (max-width: 1050px) {

    .av-seo-services {
        padding:
            45px 16px
            85px;
    }

    .av-seo-services-grid {
        grid-template-columns:
            minmax(300px, 0.7fr)
            minmax(430px, 1.3fr);

        gap: 55px;
    }

    .av-seo-services-left {
        top: 95px;
    }

    .av-seo-services-lead {
        font-size: 17px;
    }

    .av-seo-services-copy p {
        font-size: 16px;
    }

}


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

@media (max-width: 850px) {

    .av-seo-services-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Sticky entfernen */

    .av-seo-services-left {
        position: static;

        max-width: 760px;
    }

    .av-seo-services-left h2 {
        max-width: 800px;
    }

    .av-seo-services-lead {
        max-width: 650px;
    }

}


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

@media (max-width: 600px) {

    .av-seo-services {
        padding:
            35px 14px
            70px;
    }

    .av-seo-services-grid {
        gap: 35px;
    }


    /* Linke Seite */

    .av-seo-services-left::before {
        width: 60px;
        height: 4px;

        margin-bottom: 22px;
    }

    .av-seo-services-left h2 {
        margin-bottom: 20px;

        font-size: 29px;
    }

    .av-seo-services-lead {
        font-size: 16px;
    }

    .av-seo-services-link {
        margin-top: 24px;
    }


    /* Inhaltsbereiche */

    .av-seo-services-row {
        grid-template-columns:
            35px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            27px 0
            29px;
    }

    .av-seo-services-number {
        font-size: 12px;
    }

    .av-seo-services-copy h3 {
        margin-bottom: 12px;

        font-size: 23px;
    }

    .av-seo-services-copy p {
        font-size: 15px;

        line-height: 1.6;
    }


    /* Keywords */

    .av-seo-services-keywords {
        gap:
            8px 16px;

        margin-top: 30px;

        padding-top: 22px;
    }

    .av-seo-services-keywords span {
        font-size: 12px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-seo-services {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-seo-services-left h2 {
        font-size: 27px;
    }

    .av-seo-services-row {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .av-seo-services-number {
        padding-top: 0;
    }

    .av-seo-services-copy h3 {
        font-size: 21px;
    }

    .av-seo-services-copy p {
        font-size: 14px;
    }

}
/* =========================================================
   NACHHALTIGKEIT
========================================================= */

.av-sustainability {
    width: 100%;
    padding: 30px 24px 100px;
}

.av-sustainability-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}


/* =========================================================
   BESONDERE BOX
========================================================= */

.av-sustainability-box {
    position: relative;

    display: grid;
    grid-template-columns:
        90px
        minmax(320px, 0.95fr)
        minmax(420px, 1.05fr);

    align-items: center;

    gap: 50px;

    padding: 52px 60px;

    overflow: hidden;

    background: #f8f8f8;

    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}


/* gelber Streifen links */

.av-sustainability-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 7px;
    height: 100%;

    background: var(--av-yellow);
}


/* dezente gelbe Fläche rechts */

.av-sustainability-box::after {
    content: "";

    position: absolute;

    top: -90px;
    right: -120px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: rgba(250, 187, 2, 0.08);

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.av-sustainability-icon {
    position: relative;

    z-index: 2;

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

    width: 72px;
    height: 72px;

    border: 2px solid var(--av-yellow);
    border-radius: 50%;

    font-size: 34px;

    color: var(--av-black);

    background: var(--av-white);
}


/* =========================================================
   TITEL
========================================================= */

.av-sustainability-title {
    position: relative;

    z-index: 2;
}

.av-sustainability-title h2 {
    margin: 0;

    max-width: 600px;

    font-size: clamp(29px, 2.8vw, 42px);
    font-weight: 700;

    line-height: 0.98;

    color: var(--av-black);
}


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

.av-sustainability-text {
    position: relative;

    z-index: 2;

    max-width: 680px;
}

.av-sustainability-text p {
    margin: 0 0 16px;

    font-size: 17px;

    line-height: 1.65;

    color: #484848;
}

.av-sustainability-text p:last-child {
    margin-bottom: 0;
}


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

@media (max-width: 1050px) {

    .av-sustainability {
        padding:
            25px 16px
            80px;
    }

    .av-sustainability-box {
        grid-template-columns:
            70px
            minmax(280px, 0.9fr)
            minmax(350px, 1.1fr);

        gap: 35px;

        padding:
            45px 40px;
    }

    .av-sustainability-icon {
        width: 60px;
        height: 60px;

        font-size: 28px;
    }

    .av-sustainability-text p {
        font-size: 16px;
    }

}


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

@media (max-width: 820px) {

    .av-sustainability-box {
        grid-template-columns:
            70px
            1fr;

        align-items: start;

        gap:
            24px 30px;
    }

    .av-sustainability-title {
        align-self: center;
    }

    .av-sustainability-text {
        grid-column:
            2 / -1;
    }

}


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

@media (max-width: 600px) {

    .av-sustainability {
        padding:
            20px 14px
            65px;
    }

    .av-sustainability-box {
        grid-template-columns: 1fr;

        gap: 22px;

        padding:
            32px 25px
            32px 30px;
    }

    .av-sustainability-icon {
        width: 56px;
        height: 56px;

        font-size: 26px;
    }

    .av-sustainability-title h2 {
        font-size: 28px;
    }

    .av-sustainability-text {
        grid-column: auto;
    }

    .av-sustainability-text p {
        font-size: 15px;

        line-height: 1.6;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-sustainability {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-sustainability-box {
        padding:
            28px 20px
            28px 25px;
    }

    .av-sustainability-title h2 {
        font-size: 26px;
    }

}
/* =========================================================
   AUTOMARKEN – KOMPAKTES GRID
========================================================= */

.av-brands {
    width: 100%;
    padding: 55px 24px 100px;
}

.av-brands-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   KOPF
========================================================= */

.av-brands-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.7fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;
}

.av-brands-head h2 {
    margin: 0;

    max-width: 850px;

    font-size: clamp(30px, 3vw, 44px);
    line-height: 0.98;

    color: var(--av-black);
}

.av-brands-head p {
    margin: 0;

    max-width: 580px;

    font-size: 17px;
    line-height: 1.6;

    color: #505050;
}


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

.av-brands-grid {
    display: grid;

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

    border-top: 2px solid var(--av-black);
}


/* =========================================================
   MARKE BUTTON
========================================================= */

.av-brand-button {
    position: relative;

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

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

    padding: 0 20px;

    border: 0;
    border-right: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;

    background: transparent;

    color: var(--av-black);

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

    text-align: left;

    cursor: pointer;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease,
        background 0.2s ease;
}

.av-brand-button::after {
    content: "";
    display: inline-block;

    width: 17px;
    height: 17px;

    background-color: #999999;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7H17V15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7H17V15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.av-brand-button:hover {
    padding-left: 27px;

    background: rgba(255, 255, 255, 0.35);
}

.av-brand-button:hover::after {
    color: var(--av-yellow);

    transform:
        translate(2px, -2px);
}


/* aktive Marke */

.av-brand-button.is-active {
    color: var(--av-black);

    background: var(--av-yellow);
}

.av-brand-button.is-active::after {
    color: var(--av-black);
}


/* =========================================================
   VERSTECKTE MARKEN
========================================================= */

.av-brands-more {
    display: none;

    grid-column: 1 / -1;

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

.av-brands-more.is-open {
    display: grid;
}


/* =========================================================
   MEHR BUTTON
========================================================= */

.av-brands-more-action {
    display: flex;
    justify-content: center;

    margin-top: 28px;
}

.av-brands-more-button {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 0;

    border: 0;
    border-bottom: 2px solid var(--av-yellow);

    background: transparent;

    color: var(--av-black);

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

    line-height: 34px;

    cursor: pointer;
}

.av-brands-more-button span {
    font-size: 22px;
    font-weight: 400;

    transition: transform 0.2s ease;
}

.av-brands-more-button.is-open span {
    transform: rotate(45deg);
}


/* =========================================================
   MODELLBEREICH
========================================================= */

.av-brand-result {
    margin-top: 45px;

    padding:
        35px 0
        10px;

    border-top: 2px solid var(--av-black);
}

.av-brand-result[hidden] {
    display: none;
}


/* =========================================================
   MODELL KOPF
========================================================= */

.av-brand-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}

.av-brand-result-title {
    margin: 0;

    font-size: 35px;
    line-height: 1;

    color: var(--av-black);
}

.av-brand-result-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid #bdbdbd;
    border-radius: 50%;

    background: transparent;

    color: var(--av-black);

    font-size: 27px;
    font-weight: 300;

    cursor: pointer;
}


/* =========================================================
   MODELLE
========================================================= */

.av-brand-result-models {
    display: flex;
    flex-wrap: wrap;

    gap:
        10px 28px;
}

.av-brand-result-models span {
    position: relative;

    padding-left: 15px;

    font-size: 16px;
    line-height: 1.5;

    color: #505050;
}

.av-brand-result-models span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--av-yellow);
}


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

@media (max-width: 1000px) {

    .av-brands {
        padding:
            45px 16px
            80px;
    }

    .av-brands-head {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .av-brands-grid,
    .av-brands-more {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 650px) {

    .av-brands {
        padding:
            35px 14px
            65px;
    }

    .av-brands-head {
        margin-bottom: 30px;
    }

    .av-brands-head h2 {
        font-size: 29px;
    }

    .av-brands-head p {
        font-size: 16px;
    }

    .av-brands-grid,
    .av-brands-more {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .av-brand-button {
        min-height: 62px;

        padding: 0 13px;

        font-size: 17px;
    }

    .av-brand-button:hover {
        padding-left: 13px;
    }

    .av-brand-result {
        margin-top: 35px;
    }

    .av-brand-result-title {
        font-size: 29px;
    }

    .av-brand-result-models {
        gap:
            8px 18px;
    }

    .av-brand-result-models span {
        font-size: 14px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 400px) {

    .av-brands-grid,
    .av-brands-more {
        grid-template-columns: 1fr;
    }

    .av-brands-head h2 {
        font-size: 27px;
    }

    .av-brand-button {
        min-height: 58px;
    }

}
	/* =========================================================
   FAQ
========================================================= */

.av-faq {
    width: 100%;
    padding: 55px 24px 105px;
}

.av-faq-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   KOPFBEREICH
========================================================= */

.av-faq-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.7fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;
}

.av-faq-title h2 {
    margin: 0;
    max-width: 850px;
}

.av-faq-intro {
    max-width: 580px;
}

.av-faq-intro p {
    margin: 0;

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

    color: #505050;
}


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

.av-faq-list {
    width: 100%;

    border-top: 2px solid var(--av-black);
}


/* =========================================================
   FAQ EINTRAG
========================================================= */

.av-faq-item {
    border-bottom: 1px solid #c7c7c7;
}


/* Browser-Marker entfernen */

.av-faq-item summary {
    list-style: none;
}

.av-faq-item summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   FRAGE
========================================================= */

.av-faq-item summary {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        40px;

    align-items: center;

    min-height: 82px;

    gap: 30px;

    padding: 18px 4px;

    cursor: pointer;

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

    line-height: 1.25;

    color: var(--av-black);
}


/* =========================================================
   PLUS
========================================================= */

.av-faq-plus {
    position: relative;

    display: block;

    width: 24px;
    height: 24px;

    margin-left: auto;
}

.av-faq-plus::before,
.av-faq-plus::after {
    content: "";

    position: absolute;

    background: var(--av-black);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Horizontal */

.av-faq-plus::before {
    top: 11px;
    left: 0;

    width: 24px;
    height: 2px;
}


/* Vertikal */

.av-faq-plus::after {
    top: 0;
    left: 11px;

    width: 2px;
    height: 24px;

    background: var(--av-yellow);
}


/* geöffnet */

.av-faq-item[open] .av-faq-plus::after {
    opacity: 0;

    transform: rotate(90deg);
}


/* =========================================================
   ANTWORT
========================================================= */

.av-faq-answer {
    max-width: 900px;

    padding:
        0 70px
        28px 4px;
}

.av-faq-answer p {
    margin: 0;

    font-size: 16px;

    line-height: 1.65;

    color: #515151;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .av-faq-item summary {
        transition:
            padding-left 0.2s ease,
            color 0.2s ease;
    }

    .av-faq-item summary:hover {
        padding-left: 12px;
    }

}


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

@media (max-width: 1000px) {

    .av-faq {
        padding:
            45px 16px
            85px;
    }

    .av-faq-head {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .av-faq-intro {
        max-width: 720px;
    }

}


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

@media (max-width: 600px) {

    .av-faq {
        padding:
            35px 14px
            70px;
    }

    .av-faq-head {
        margin-bottom: 32px;
    }

    .av-faq-intro p {
        font-size: 15px;
    }

    .av-faq-item summary {
        grid-template-columns:
            minmax(0, 1fr)
            30px;

        min-height: 70px;

        gap: 15px;

        padding:
            17px 2px;

        font-size: 17px;
    }

    .av-faq-answer {
        padding:
            0 40px
            23px 2px;
    }

    .av-faq-answer p {
        font-size: 15px;
    }

    .av-faq-plus {
        width: 20px;
        height: 20px;
    }

    .av-faq-plus::before {
        top: 9px;

        width: 20px;
    }

    .av-faq-plus::after {
        left: 9px;

        height: 20px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-faq {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-faq-item summary {
        font-size: 16px;
    }

    .av-faq-answer {
        padding-right: 10px;
    }

    .av-faq-answer p {
        font-size: 14px;
    }

}
/* =========================================================
   WARUM FAHRZEUG ÜBER UNS ANBIETEN
========================================================= */

.av-why-us {
    width: 100%;
    padding: 45px 24px 105px;
}

.av-why-us-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   HAUPTBEREICH
========================================================= */

.av-why-us-layout {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(360px, 0.85fr)
        minmax(520px, 1.15fr);

    gap: clamp(70px, 8vw, 135px);

    padding:
        70px 75px
        72px;

    overflow: hidden;

    background: #20201d;

    color: var(--av-white);
}


/* dezente gelbe Hintergrundform */

.av-why-us-layout::after {
    content: "";

    position: absolute;

    top: -190px;
    right: -170px;

    width: 480px;
    height: 480px;

    border: 75px solid rgba(250, 187, 2, 0.07);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   LINKE SEITE
========================================================= */

.av-why-us-heading {
    position: relative;

    z-index: 2;

    align-self: start;

    padding-top: 5px;
}


/* kleine Zeile */

.av-why-us-small {
    display: block;

    margin-bottom: 22px;

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

    line-height: 1;

    letter-spacing: 1.4px;

    color: var(--av-yellow);
}


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

.av-why-us-heading h2 {
    margin:
        0 0
        27px;

    max-width: 570px;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 700;

    line-height: 0.94;

    letter-spacing: -1px;

    color: var(--av-white);
}


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

.av-why-us-heading p {
    max-width: 480px;

    margin: 0;

    font-size: 17px;

    line-height: 1.65;

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


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

.av-why-us-cta {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    margin-top: 34px;

    padding:
        16px 21px;

    background: var(--av-yellow);

    color: var(--av-black);

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

    line-height: 1;

    transition:
        transform 0.2s ease,
        gap 0.2s ease,
        background 0.2s ease;
}

.av-why-us-cta span {
    font-size: 20px;
    line-height: 1;
}

.av-why-us-cta:hover {
    gap: 21px;

    transform: translateY(-2px);

    background: #ffc71c;
}


/* =========================================================
   RECHTE SEITE
========================================================= */

.av-why-us-points {
    position: relative;

    z-index: 2;

    width: 100%;

    border-top:
        1px solid rgba(250, 187, 2, 0.35);
}


/* =========================================================
   EINZELNER VORTEIL
========================================================= */

.av-why-us-item {
    display: grid;

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

    gap: 20px;

    padding:
        25px 0
        27px;

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

    transition:
        padding-left 0.2s ease,
        background 0.2s ease;
}


/* =========================================================
   CHECK ICON
========================================================= */

.av-why-us-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    margin-top: 1px;

    border: 1px solid var(--av-yellow);
    border-radius: 50%;

    color: var(--av-yellow);

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   TITEL RECHTS
========================================================= */

.av-why-us-item h3 {
    margin:
        0 0
        8px;

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

    line-height: 1.1;

    color: var(--av-white);
}


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

.av-why-us-item p {
    max-width: 680px;

    margin: 0;

    font-size: 15px;

    line-height: 1.55;

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


/* =========================================================
   HOVER NUR AUF DESKTOP
========================================================= */

@media (hover: hover) {

    .av-why-us-item:hover {
        padding-left: 10px;
    }

}


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

@media (max-width: 1050px) {

    .av-why-us {
        padding:
            40px 16px
            85px;
    }

    .av-why-us-layout {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(420px, 1.2fr);

        gap: 50px;

        padding:
            55px 45px
            58px;
    }

    .av-why-us-heading p {
        font-size: 16px;
    }

    .av-why-us-layout::after {
        top: -170px;
        right: -190px;

        width: 430px;
        height: 430px;

        border-width: 65px;
    }

}


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

@media (max-width: 820px) {

    .av-why-us-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .av-why-us-heading {
        max-width: 700px;
    }

    .av-why-us-heading h2 {
        max-width: 700px;
    }

    .av-why-us-heading p {
        max-width: 620px;
    }

}


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

@media (max-width: 600px) {

    .av-why-us {
        padding:
            30px 14px
            65px;
    }

    .av-why-us-layout {
        gap: 42px;

        padding:
            38px 25px
            40px;
    }


    /* Hintergrundform */

    .av-why-us-layout::after {
        top: -100px;
        right: -150px;

        width: 330px;
        height: 330px;

        border-width: 50px;
    }


    /* kleine Zeile */

    .av-why-us-small {
        margin-bottom: 17px;

        font-size: 10px;
    }


    /* Überschrift */

    .av-why-us-heading h2 {
        margin-bottom: 20px;

        font-size: 30px;
    }


    /* Beschreibung */

    .av-why-us-heading p {
        font-size: 15px;

        line-height: 1.6;
    }


    /* CTA */

    .av-why-us-cta {
        margin-top: 27px;

        padding:
            15px 17px;

        font-size: 12px;
    }


    /* Vorteile */

    .av-why-us-item {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            21px 0
            23px;
    }


    /* Icon */

    .av-why-us-icon {
        width: 27px;
        height: 27px;

        font-size: 13px;
    }


    /* Titel */

    .av-why-us-item h3 {
        font-size: 18px;
    }


    /* Text */

    .av-why-us-item p {
        font-size: 14px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-why-us {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-why-us-layout {
        padding:
            32px 19px
            35px;
    }

    .av-why-us-heading h2 {
        font-size: 27px;
    }

    .av-why-us-item {
        grid-template-columns:
            30px
            minmax(0, 1fr);

        gap: 11px;
    }

    .av-why-us-icon {
        width: 25px;
        height: 25px;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 350px) {

    .av-why-us-layout {
        padding:
            28px 16px
            32px;
    }

    .av-why-us-heading h2 {
        font-size: 25px;
    }

    .av-why-us-item h3 {
        font-size: 17px;
    }

    .av-why-us-item p {
        font-size: 13px;
    }

}
/* =========================================================
   ONLINE ÖFFNUNGSZEITEN
========================================================= */

.av-hours {
    width: 100%;
    padding: 45px 24px 100px;
}

.av-hours-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   HAUPTBOX
========================================================= */

.av-hours-box {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    align-items: center;

    gap: 70px;

    min-height: 390px;

    padding:
        65px 75px
        62px;

    overflow: visible;

    background: #eeeeea;

    border: 1px solid #ddddD7;
}


/* gelbe Linie links */

.av-hours-box::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 7px;

    background: var(--av-yellow);
}


/* =========================================================
   SCHILD OBEN RECHTS
========================================================= */

.av-hours-badge {
    position: absolute;

    top: -18px;
    right: 35px;

    z-index: 3;

    padding:
        12px 22px
        11px;

    background: var(--av-yellow);

    color: var(--av-black);

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

    line-height: 1;

    letter-spacing: 1px;

    transform: rotate(2deg);

    box-shadow:
        5px 6px 0 var(--av-black);
}


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

.av-hours-content {
    max-width: 720px;
}

.av-hours-content h2 {
    max-width: 700px;

    margin:
        0 0
        23px;
}


/* Text */

.av-hours-content p {
    max-width: 650px;

    margin: 0;

    font-size: 17px;

    line-height: 1.65;

    color: #4d4d4d;
}


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

.av-hours-button {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    margin-top: 30px;

    padding:
        16px 21px;

    background: var(--av-black);

    color: var(--av-white);

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

    line-height: 1;

    transition:
        gap 0.2s ease,
        transform 0.2s ease;
}

.av-hours-button span {
    color: var(--av-yellow);

    font-size: 20px;
}

.av-hours-button:hover {
    gap: 20px;

    transform: translateY(-2px);
}


/* =========================================================
   RECHTE SEITE
========================================================= */

.av-hours-time {
    position: relative;

    padding-left: 55px;

    border-left:
        1px solid rgba(0, 0, 0, 0.15);
}


/* =========================================================
   GROSSE 24/7
========================================================= */

.av-hours-big {
    margin-bottom: 18px;

    font-size: clamp(80px, 8vw, 125px);
    font-weight: 700;
    font-style: italic;

    line-height: 0.8;

    letter-spacing: -5px;

    color: var(--av-black);
}

.av-hours-big span {
    color: var(--av-yellow);
}


/* =========================================================
   STATUS
========================================================= */

.av-hours-status {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 25px;

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

    letter-spacing: 0.8px;

    color: var(--av-black);
}


/* grüner Statuspunkt */

.av-hours-dot {
    display: block;

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #35a853;

    box-shadow:
        0 0 0 4px rgba(53, 168, 83, 0.12);
}


/* Öffnungszeit */

.av-hours-time p {
    margin:
        16px 0
        0;

    font-size: 15px;

    line-height: 1.5;

    color: #5c5c5c;
}

.av-hours-time p strong {
    display: block;

    margin-top: 2px;

    font-size: 17px;

    color: var(--av-black);
}


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

@media (max-width: 1000px) {

    .av-hours {
        padding:
            40px 16px
            85px;
    }

    .av-hours-box {
        gap: 45px;

        padding:
            55px 45px
            52px;
    }

    .av-hours-time {
        padding-left: 40px;
    }

}


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

@media (max-width: 800px) {

    .av-hours-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .av-hours-time {
        padding:
            35px 0
            0;

        border-left: 0;

        border-top:
            1px solid rgba(0, 0, 0, 0.15);
    }

    .av-hours-big {
        font-size: 90px;
    }

}


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

@media (max-width: 600px) {

    .av-hours {
        padding:
            35px 14px
            70px;
    }

    .av-hours-box {
        min-height: 0;

        gap: 35px;

        padding:
            50px 25px
            35px;
    }


    /* Schild */

    .av-hours-badge {
        top: -14px;
        right: 18px;

        padding:
            10px 15px;

        font-size: 10px;

        box-shadow:
            4px 4px 0 var(--av-black);
    }


    /* Text */

    .av-hours-content p {
        font-size: 15px;

        line-height: 1.6;
    }


    /* Button */

    .av-hours-button {
        margin-top: 25px;

        padding:
            15px 17px;

        font-size: 12px;
    }


    /* 24/7 */

    .av-hours-big {
        font-size: 76px;

        letter-spacing: -4px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-hours {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-hours-box {
        padding:
            47px 20px
            30px;
    }

    .av-hours-big {
        font-size: 66px;
    }

    .av-hours-status {
        font-size: 10px;
    }

}
	/* =========================================================
   DATENSCHUTZ LISTEN
========================================================= */

.av-legal-list {
    margin:
        18px 0
        22px;

    padding-left: 22px;
}

.av-legal-list li {
    margin-bottom: 7px;

    color: #555555;

    font-size: 15px;
    line-height: 1.6;
}

.av-legal-list li::marker {
    color: var(--av-yellow);
}
/* =========================================================
   IMPRESSUM / LEGAL
========================================================= */

.av-legal {
    width: 100%;

    padding: 90px 24px 120px;

    background: transparent;
}

.av-legal-shell {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   KOPF
========================================================= */

.av-legal-head {
    margin-bottom: 55px;

    padding-bottom: 30px;

    border-bottom: 4px solid var(--av-yellow);
}

.av-legal-head h1 {
    margin: 0 0 10px;
}

.av-legal-head p {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;

    color: #666666;
}


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

.av-legal-content {
    width: 100%;
    max-width: 900px;
}


/* =========================================================
   EINZELNER ABSCHNITT
========================================================= */

.av-legal-section {
    margin-bottom: 38px;

    padding-bottom: 38px;

    border-bottom: 1px solid #dddddd;
}

.av-legal-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}


/* =========================================================
   TITEL
========================================================= */

.av-legal-section h2 {
    margin: 0 0 22px;

    font-size: 22px;
    line-height: 1.1;
}


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

.av-legal-section p {
    max-width: 800px;

    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.75;

    color: #555555;
}

.av-legal-section p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ADRESSE
========================================================= */

.av-legal-address {
    display: flex;
    flex-direction: column;

    gap: 5px;

    font-size: 16px;
    line-height: 1.6;

    color: #333333;
}

.av-legal-address strong {
    display: block;

    margin-bottom: 5px;

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

    color: var(--av-black);
}


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

.av-legal-row {
    display: grid;

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

    align-items: start;

    gap: 25px;

    padding: 15px 0;

    border-bottom: 1px solid #eeeeee;
}

.av-legal-row:last-child {
    border-bottom: 0;
}

.av-legal-row > span {
    font-size: 14px;
    line-height: 1.5;

    color: #777777;
}

.av-legal-row > strong,
.av-legal-row > a {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;

    color: var(--av-black);

    text-decoration: none;

    overflow-wrap: anywhere;
}


/* E-Mail Hover */

.av-legal-row > a:hover {
    text-decoration: underline;

    text-decoration-color: var(--av-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


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

@media (max-width: 900px) {

    .av-legal {
        padding:
            75px 20px
            95px;
    }

    .av-legal-head {
        margin-bottom: 45px;
    }

}


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

@media (max-width: 650px) {

    .av-legal {
        padding:
            55px 14px
            75px;
    }

    .av-legal-head {
        margin-bottom: 38px;

        padding-bottom: 24px;
    }

    .av-legal-head p {
        font-size: 14px;
    }

    .av-legal-section {
        margin-bottom: 30px;

        padding-bottom: 30px;
    }

    .av-legal-section h2 {
        margin-bottom: 18px;

        font-size: 19px;
    }

    .av-legal-section p {
        font-size: 14px;

        line-height: 1.7;
    }

    .av-legal-address {
        font-size: 15px;
    }

    .av-legal-address strong {
        font-size: 17px;
    }


    /* Daten untereinander */

    .av-legal-row {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 13px 0;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-legal {
        padding-left: 12px;
        padding-right: 12px;
    }

}/* =========================================================
   FAHRZEUGABHOLUNG
========================================================= */

.av-pickup {
    width: 100%;

    padding: 105px 24px;
}

.av-pickup-shell {
    width: 100%;
    max-width: 1580px;

    margin: 0 auto;
}


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

.av-pickup-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    align-items: stretch;

    gap: clamp(55px, 6vw, 105px);
}


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

.av-pickup-media {
    position: relative;

    min-height: 610px;

    overflow: hidden;

    background: #dddddd;
}

.av-pickup-media img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;
}


/* Kleine Beschriftung direkt auf Bild */

.av-pickup-media-label {
    position: absolute;

    left: 0;
    bottom: 0;

    padding: 14px 22px;

    background: var(--av-yellow);

    color: var(--av-black);

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

    letter-spacing: 0.8px;
}


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

.av-pickup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 0;
}

.av-pickup-content h2 {
    max-width: 720px;

    margin: 0 0 28px;
}


/* Erster Absatz */

.av-pickup-lead {
    position: relative;

    max-width: 690px;

    margin: 0 0 24px;

    padding-left: 22px;

    border-left: 4px solid var(--av-yellow);

    color: #222222;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.65;
}


/* Normale Texte */

.av-pickup-content > p:not(.av-pickup-lead) {
    max-width: 700px;

    margin: 0 0 19px;

    color: #555550;

    font-size: 16px;

    line-height: 1.75;
}

.av-pickup-content p strong {
    color: var(--av-black);

    font-weight: 700;
}


/* =========================================================
   INFOZEILE
========================================================= */

.av-pickup-info {
    display: grid;

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

    margin-top: 18px;

    border-top: 1px solid #cecec7;
    border-bottom: 1px solid #cecec7;
}

.av-pickup-info-item {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 22px 22px 22px 0;
}


/* Trennung zwischen beiden */

.av-pickup-info-item + .av-pickup-info-item {
    padding-left: 25px;

    border-left: 1px solid #cecec7;
}


/* Nummer */

.av-pickup-info-item > span {
    flex: 0 0 auto;

    padding-top: 1px;

    color: var(--av-yellow);

    font-size: 13px;
    font-weight: 800;
}


/* Text */

.av-pickup-info-item div {
    min-width: 0;
}

.av-pickup-info-item strong {
    display: block;

    margin-bottom: 6px;

    color: var(--av-black);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.3px;
}

.av-pickup-info-item small {
    display: block;

    color: #696964;

    font-size: 13px;

    line-height: 1.5;
}


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

.av-pickup-actions {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-top: 34px;
}


/* Button */

.av-pickup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    min-height: 58px;

    padding: 0 23px;

    background: var(--av-black);

    color: var(--av-white);

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

    letter-spacing: 0.4px;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.av-pickup-button span {
    color: var(--av-yellow);

    font-size: 20px;

    transition: transform 0.2s ease;
}

.av-pickup-button:hover {
    background: var(--av-yellow);

    color: var(--av-black);

    transform: translateY(-2px);
}

.av-pickup-button:hover span {
    color: var(--av-black);

    transform: translateX(4px);
}


/* Telefon */

.av-pickup-phone {
    display: flex;
    flex-direction: column;

    gap: 3px;

    color: var(--av-black);

    text-decoration: none;
}

.av-pickup-phone small {
    color: #777772;

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

    letter-spacing: 0.7px;
}

.av-pickup-phone strong {
    font-size: 17px;
    font-weight: 800;

    transition: color 0.2s ease;
}

.av-pickup-phone:hover strong {
    color: #b38600;
}


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

@media (max-width: 1050px) {

    .av-pickup {
        padding: 85px 20px;
    }

    .av-pickup-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        gap: 45px;
    }

    .av-pickup-media {
        min-height: 570px;
    }

    .av-pickup-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;
    }

}


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

@media (max-width: 760px) {

    .av-pickup {
        padding: 65px 16px;
    }

    .av-pickup-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    /* Bild oben */

    .av-pickup-media {
        min-height: 0;

        aspect-ratio: 16 / 11;
    }


    /* Inhalt */

    .av-pickup-content {
        padding: 0;
    }

    .av-pickup-content h2 {
        margin-bottom: 22px;
    }

    .av-pickup-lead {
        padding-left: 17px;

        font-size: 16px;
    }

    .av-pickup-content > p:not(.av-pickup-lead) {
        font-size: 15px;

        line-height: 1.7;
    }


    /* Info */

    .av-pickup-info {
        grid-template-columns: 1fr;
    }

    .av-pickup-info-item {
        padding: 19px 0;
    }

    .av-pickup-info-item + .av-pickup-info-item {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid #cecec7;
    }


    /* Aktionen */

    .av-pickup-actions {
        margin-top: 28px;
    }

    .av-pickup-button {
        width: 100%;

        justify-content: space-between;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-pickup {
        padding-left: 13px;
        padding-right: 13px;
    }

    .av-pickup-media-label {
        padding: 11px 15px;

        font-size: 10px;
    }

}

/* =========================================================
   FAHRZEUG ANFRAGE
========================================================= */

.av-inquiry {
    width: 100%;
    padding: 55px 24px 110px;
}

.av-inquiry-shell {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}


/* =========================================================
   KOPF
========================================================= */

.av-inquiry-head {
    max-width: 900px;
    margin-bottom: 42px;
}

.av-inquiry-head h2 {
    margin-bottom: 18px;
}

.av-inquiry-head p {
    max-width: 700px;
    margin: 0;

    font-size: 17px;
    line-height: 1.6;

    color: #505050;
}


/* =========================================================
   FORMULAR
========================================================= */

.av-inquiry-form {
    position: relative;

    padding: 48px 50px 42px;

    background: var(--av-white);

    border-top: 5px solid var(--av-yellow);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   HONEYPOT
========================================================= */

.av-inquiry-hp {
    position: absolute !important;

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

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    left: -9999px !important;
}


/* =========================================================
   PROGRESS
========================================================= */

.av-inquiry-progress {
    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-bottom: 52px;
}

.av-inquiry-progress-item {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #999999;
}

.av-inquiry-progress-item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid #c9c9c9;
    border-radius: 50%;

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

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

.av-inquiry-progress-item strong {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


/* Aktiv */

.av-inquiry-progress-item.is-active {
    color: var(--av-black);
}

.av-inquiry-progress-item.is-active span {
    border-color: var(--av-yellow);

    background: var(--av-yellow);

    color: var(--av-black);
}


/* Erledigt */

.av-inquiry-progress-item.is-complete span {
    border-color: var(--av-black);

    background: var(--av-black);

    color: var(--av-yellow);
}


/* Linie */

.av-inquiry-progress-line {
    width: 100%;
    height: 1px;

    background: #d5d5d5;
}


/* =========================================================
   SCHRITTE
========================================================= */

.av-inquiry-step {
    display: none;
}

.av-inquiry-step.is-active {
    display: block;
}


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

.av-inquiry-step-head {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 30px;
}

.av-inquiry-step-head > span {
    font-size: 13px;
    font-weight: 700;

    color: var(--av-yellow);
}

.av-inquiry-step-head h3 {
    margin: 0;
}


/* =========================================================
   4 SPALTEN DESKTOP
========================================================= */

.av-inquiry-grid {
    display: grid;

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

    gap: 24px;
}


/* =========================================================
   FELD
========================================================= */

.av-form-field {
    min-width: 0;
}

.av-form-field label,
.av-form-field legend {
    display: block;

    margin: 0 0 9px;

    padding: 0;

    border: 0;

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

    line-height: 1.3;

    color: #242424;
}

.av-form-field b,
.av-form-privacy b {
    color: #c50000;
}


/* =========================================================
   NORMALE INPUT-FELDER
========================================================= */

.av-form-field input[type="text"],
.av-form-field input[type="number"],
.av-form-field input[type="email"],
.av-form-field input[type="tel"],
.av-form-field select {
    display: block;

    width: 100%;
    height: 58px;

    padding: 0 17px;

    border: 1px solid #deded8;
    border-radius: 8px;

    outline: none;

    background: #ffffff;

    color: var(--av-black);

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.025);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* Placeholder */

.av-form-field input[type="text"]::placeholder,
.av-form-field input[type="number"]::placeholder,
.av-form-field input[type="email"]::placeholder,
.av-form-field input[type="tel"]::placeholder {
    color: #9b9b96;

    font-weight: 400;
}


/* Hover */

@media (hover: hover) {

    .av-form-field input[type="text"]:hover,
    .av-form-field input[type="number"]:hover,
    .av-form-field input[type="email"]:hover,
    .av-form-field input[type="tel"]:hover,
    .av-form-field select:hover {
        border-color: #bcbcb5;
    }

}


/* Focus */

.av-form-field input[type="text"]:focus,
.av-form-field input[type="number"]:focus,
.av-form-field input[type="email"]:focus,
.av-form-field input[type="tel"]:focus,
.av-form-field select:focus {
    border-color: var(--av-yellow);

    background: #fffef9;

    box-shadow:
        0 0 0 3px rgba(250, 187, 2, 0.13);
}


/* =========================================================
   SELECT
========================================================= */

.av-form-field select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 48px;

    cursor: pointer;

    background-image:
        linear-gradient(45deg, transparent 50%, #222222 50%),
        linear-gradient(135deg, #222222 50%, transparent 50%);

    background-position:
        calc(100% - 21px) 26px,
        calc(100% - 15px) 26px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}


/* =========================================================
   DATEI-UPLOAD
========================================================= */

.av-form-field input[type="file"] {
    display: block;

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

    padding: 8px;

    border: 1px dashed #c9c9c3;
    border-radius: 8px;

    background: #fafafa;

    color: #555555;

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;

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

.av-form-field input[type="file"]:hover {
    border-color: var(--av-yellow);

    background: #fffef8;
}

.av-form-field input[type="file"]::file-selector-button {
    height: 40px;

    margin-right: 12px;

    padding: 0 16px;

    border: 0;
    border-radius: 6px;

    background: var(--av-black);

    color: var(--av-white);

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

    cursor: pointer;
}


/* =========================================================
   JA / NEIN
   DEIN BISHERIGES DESIGN BLEIBT
========================================================= */

.av-form-choice {
    margin: 0;

    padding: 0;

    border: 0;
}

.av-form-choice-options {
    display: grid;

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

    gap: 8px;
}

.av-form-choice-options label {
    margin: 0;

    cursor: pointer;
}

.av-form-choice-options input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.av-form-choice-options span {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 54px;

    border: 1px solid #d0d0d0;

    background: #f8f8f8;

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

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

.av-form-choice-options input:checked + span {
    border-color: var(--av-yellow);

    background: var(--av-yellow);

    color: var(--av-black);
}


/* =========================================================
   DATENSCHUTZ + CAPTCHA
========================================================= */

.av-inquiry-final {
    display: grid;

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

    align-items: center;

    gap: 40px;

    margin-top: 38px;

    padding-top: 30px;

    border-top: 1px solid #dddddd;
}


/* Datenschutz */

.av-form-privacy {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    cursor: pointer;
}

.av-form-privacy input {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    accent-color: var(--av-yellow);

    flex-shrink: 0;
}

.av-form-privacy span {
    font-size: 14px;

    line-height: 1.5;

    color: #4f4f4f;
}

.av-form-privacy a {
    font-weight: 700;

    color: var(--av-black);

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


/* =========================================================
   CAPTCHA
========================================================= */

.av-form-captcha {
    display: grid;

    grid-template-columns:
        1fr 90px;

    align-items: center;

    gap: 12px;
}

.av-form-captcha label {
    font-size: 13px;

    line-height: 1.4;
}

.av-form-captcha label strong {
    font-size: 17px;

    color: var(--av-black);
}

.av-form-captcha input {
    width: 100%;
    height: 48px;

    padding: 0 10px;

    border: 1px solid #deded8;
    border-radius: 7px;

    outline: none;

    background: #ffffff;

    text-align: center;

    color: var(--av-black);

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

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

.av-form-captcha input:focus {
    border-color: var(--av-yellow);

    box-shadow:
        0 0 0 3px rgba(250, 187, 2, 0.13);
}


/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.av-inquiry-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin-top: 35px;
}

.av-inquiry-back,
.av-inquiry-next,
.av-inquiry-submit {
    min-height: 52px;

    padding: 0 22px;

    border: 0;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


/* Zurück */

.av-inquiry-back {
    margin-right: auto;

    background: transparent;

    color: #555555;
}


/* Weiter */

.av-inquiry-next {
    background: var(--av-black);

    color: var(--av-white);
}


/* Senden */

.av-inquiry-submit {
    background: var(--av-yellow);

    color: var(--av-black);
}

.av-inquiry-next:hover,
.av-inquiry-submit:hover {
    transform: translateY(-2px);
}


/* =========================================================
   MELDUNG
========================================================= */

.av-inquiry-message {
    display: none;

    margin-top: 25px;

    padding: 15px 18px;

    font-size: 14px;

    line-height: 1.5;
}

.av-inquiry-message.is-success {
    display: block;

    background: #edf7ef;

    color: #155d27;
}

.av-inquiry-message.is-error {
    display: block;

    background: #fff0f0;

    color: #8c1c1c;
}


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

@media (max-width: 1000px) {

    .av-inquiry {
        padding:
            45px 16px
            90px;
    }

    .av-inquiry-form {
        padding:
            42px 35px
            36px;
    }

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

}


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

@media (max-width: 650px) {

    .av-inquiry {
        padding:
            35px 14px
            70px;
    }

    .av-inquiry-head {
        margin-bottom: 30px;
    }

    .av-inquiry-head p {
        font-size: 15px;
    }


    /* Formular */

    .av-inquiry-form {
        padding:
            32px 20px
            28px;
    }


    /* Progress */

    .av-inquiry-progress {
        gap: 7px;

        margin-bottom: 38px;
    }

    .av-inquiry-progress-item {
        gap: 0;
    }

    .av-inquiry-progress-item strong {
        display: none;
    }

    .av-inquiry-progress-item span {
        width: 32px;
        height: 32px;
    }


    /* Eine Spalte */

    .av-inquiry-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* Normale Felder */

    .av-form-field input[type="text"],
    .av-form-field input[type="number"],
    .av-form-field input[type="email"],
    .av-form-field input[type="tel"],
    .av-form-field select {
        height: 55px;

        font-size: 14px;
    }


    /* Final */

    .av-inquiry-final {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .av-form-captcha {
        max-width: 300px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .av-inquiry {
        padding-left: 12px;
        padding-right: 12px;
    }

    .av-inquiry-form {
        padding:
            28px 16px
            25px;
    }

    .av-inquiry-navigation {
        flex-wrap: wrap;
    }

    .av-inquiry-next,
    .av-inquiry-submit {
        flex: 1;
    }

}
	.av-inquiry-note-price {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 18px;
    align-items: end;
}

@media (max-width: 700px) {
    .av-inquiry-note-price {
        grid-template-columns: 1fr;
    }
}
.av-form-field-full {
    grid-column: 1 / -1;
}

.av-form-field textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}
/* =========================================================
   FOOTER – FULL WIDTH / BLACK / YELLOW
========================================================= */

.av-footer {
    position: relative;

    width: 100%;
    margin-top: 80px;

    background: #0d0d0d;

    border-top: 4px solid var(--av-yellow);

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.av-footer-inner {
    position: relative;

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

    margin: 0 auto;

    padding:
        78px 45px
        0;
}


.av-footer-card {
    position: relative;

    width: 100%;
}


/* =========================================================
   GELBER CTA OBEN
========================================================= */

.av-footer-cta-strip {
    position: absolute;

    top: -108px;
    right: 0;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 28px;

    min-height: 64px;

    padding:
        0 26px
        0 34px;
}


/* Nur Hintergrund wird schräg */

.av-footer-cta-strip::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background: var(--av-yellow);

    transform: skewX(-7deg);
}


/* Fahrzeug in Stadt anbieten */

.av-footer-cta-strip > span {
    color: #0d0d0d;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.25px;

    text-transform: uppercase;
}


/* Jetzt anfragen */

.av-footer-cta-strip a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    min-height: 38px;

    padding-left: 24px;

    border-left:
        1px solid rgba(0, 0, 0, 0.25);

    color: #0d0d0d;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.2px;

    text-decoration: none;

    text-transform: uppercase;
}


.av-footer-cta-strip a strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    line-height: 1;

    transition: transform 0.2s ease;
}


.av-footer-cta-strip a:hover strong {
    transform: translateX(5px);
}


/* =========================================================
   HAUPTINHALT
========================================================= */

.av-footer-content {
    display: grid;

    grid-template-columns:
        minmax(380px, 1.25fr)
        minmax(300px, 0.95fr)
        minmax(280px, 0.85fr)
        minmax(180px, 0.55fr);

    align-items: start;

    gap: 60px;

    padding:
        28px 0
        58px;
}


/* =========================================================
   LOGO + STADT
========================================================= */

.av-footer-brand-area {
    display: flex;
    align-items: center;

    gap: 30px;

    min-width: 0;
}


/* Logo */

.av-footer-logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;
}


.av-footer-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 205px;
    max-height: 68px;

    object-fit: contain;
}


/* =========================================================
   STADT NEBEN LOGO
========================================================= */

.av-footer-location {
    display: flex;
    align-items: center;

    gap: 20px;

    min-width: 0;
}


/* Gelber Strich */

.av-footer-location-line {
    display: block;

    width: 4px;
    height: 68px;

    flex-shrink: 0;

    background: var(--av-yellow);
}


.av-footer-location-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 8px;
}


/* AUTOVERWERTUNG */

.av-footer-location-copy small {
    color: #ffffff;

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

    line-height: 1;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* STADT */

.av-footer-location-copy strong {
    display: block;

    max-width: 210px;

    color: var(--av-yellow);

    font-size: 27px;
    font-weight: 800;

    line-height: 1.05;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


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

.av-footer-description {
    max-width: 390px;
}


.av-footer-description p {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   KONTAKT + INFORMATIONEN TITEL
========================================================= */

.av-footer-contact > small,
.av-footer-menu > small {
    display: block;

    margin-bottom: 15px;

    color: var(--av-yellow);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

.av-footer-contact {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* E-Mail */

.av-footer-mail {
    display: inline-block;

    max-width: 100%;

    color: #ffffff;

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

    line-height: 1.45;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition: color 0.2s ease;
}


.av-footer-mail:hover {
    color: var(--av-yellow);
}


/* Online-Anfrage starten */

.av-footer-online-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 9px;

    margin-top: 15px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}


.av-footer-online-link span {
    color: var(--av-yellow);

    font-size: 17px;

    transition: transform 0.2s ease;
}


.av-footer-online-link:hover {
    color: var(--av-yellow);
}


.av-footer-online-link:hover span {
    transform: translateX(4px);
}


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

.av-footer-menu {
    min-width: 0;
}


.av-footer-nav {
    display: flex;
    flex-direction: column;

    gap: 13px;
}


.av-footer-nav a {
    position: relative;

    width: fit-content;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}


/* kleiner gelber Strich bei Hover */

.av-footer-nav a::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 0;
    height: 2px;

    transform: translateY(-50%);

    background: var(--av-yellow);

    transition: width 0.2s ease;
}


.av-footer-nav a:hover {
    padding-left: 15px;

    color: var(--av-yellow);
}


.av-footer-nav a:hover::before {
    width: 9px;
}


/* =========================================================
   UNTERER BEREICH
========================================================= */

.av-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        21px 0
        23px;

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

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

    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;
}


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

@media (max-width: 1150px) {

    .av-footer-inner {
        padding-left: 32px;
        padding-right: 32px;
    }


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

        gap:
            45px
            60px;
    }


    .av-footer-brand-area {
        grid-column: 1 / -1;
    }


    .av-footer-description {
        max-width: 500px;
    }

}


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

@media (max-width: 700px) {

    .av-footer {
        margin-top: 75px;
    }


    .av-footer-inner {
        padding:
            65px 20px
            0;
    }


    /* CTA */

    .av-footer-cta-strip {
        top: -96px;

        right: 0;
        left: 0;

        justify-content: space-between;

        gap: 10px;

        min-height: 58px;

        padding:
            0 15px
            0 18px;
    }


    .av-footer-cta-strip::before {
        transform: skewX(-3deg);
    }


    .av-footer-cta-strip > span {
        font-size: 11px;
    }


    .av-footer-cta-strip a {
        gap: 7px;

        padding-left: 12px;

        font-size: 11px;
    }


    .av-footer-cta-strip a strong {
        font-size: 18px;
    }


    /* Inhalt */

    .av-footer-content {
        grid-template-columns: 1fr;

        gap: 36px;

        padding:
            22px 0
            42px;
    }


    /* Logo + Stadt */

    .av-footer-brand-area {
        grid-column: auto;

        gap: 20px;
    }


    .av-footer-logo img {
        max-width: 160px;
        max-height: 55px;
    }


    .av-footer-location {
        gap: 14px;
    }


    .av-footer-location-line {
        width: 3px;
        height: 55px;
    }


    .av-footer-location-copy small {
        font-size: 10px;
    }


    .av-footer-location-copy strong {
        max-width: 150px;

        font-size: 21px;
    }


    /* Text */

    .av-footer-description {
        max-width: 100%;
    }


    .av-footer-description p {
        font-size: 15px;

        line-height: 1.7;
    }


    /* Titel */

    .av-footer-contact > small,
    .av-footer-menu > small {
        margin-bottom: 12px;

        font-size: 12px;
    }


    /* Mail */

    .av-footer-mail {
        font-size: 16px;
    }


    .av-footer-online-link {
        font-size: 14px;
    }


    /* Navigation */

    .av-footer-nav a {
        font-size: 15px;
    }


    /* Bottom */

    .av-footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;

        font-size: 12px;
    }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 430px) {

    .av-footer-inner {
        padding-left: 16px;
        padding-right: 16px;
    }


    .av-footer-brand-area {
        gap: 14px;
    }


    .av-footer-logo img {
        max-width: 135px;
    }


    .av-footer-location-copy strong {
        max-width: 115px;

        font-size: 18px;
    }


    .av-footer-description p {
        font-size: 14px;
    }

}

/* =========================================================
   ZUGÄNGLICHKEIT / FOKUS
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--av-yellow);
    outline-offset: 3px;
}

/* Animationen respektieren, wenn Nutzer sie reduziert haben */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   FINALE RESPONSIVE TYPOGRAFIE
   Verhindert, dass ältere komponentenspezifische Regeln
   die Hauptüberschriften wieder zu groß darstellen.
========================================================= */

.av-hero h1 {
    font-size: clamp(36px, 3.2vw, 48px);
    line-height: 1.02;
}

.av-steps-heading h2,
.av-local-content-title h2,
.av-vehicle-types-title h2,
.av-about-recycling-content h2,
.av-region-showcase-copy h2,
.av-seo-services-left h2,
.av-sustainability-title h2,
.av-brands-head h2,
.av-why-us-heading h2 {
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.03;
}

@media (max-width: 1024px) {
    .av-hero h1 {
        font-size: 38px;
    }

    .av-steps-heading h2,
    .av-local-content-title h2,
    .av-vehicle-types-title h2,
    .av-about-recycling-content h2,
    .av-region-showcase-copy h2,
    .av-seo-services-left h2,
    .av-sustainability-title h2,
    .av-brands-head h2,
    .av-why-us-heading h2 {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .av-hero h1 {
        font-size: 29px;
        line-height: 1.05;
    }

    .av-steps-heading h2,
    .av-local-content-title h2,
    .av-vehicle-types-title h2,
    .av-about-recycling-content h2,
    .av-region-showcase-copy h2,
    .av-seo-services-left h2,
    .av-sustainability-title h2,
    .av-brands-head h2,
    .av-why-us-heading h2 {
        font-size: 27px;
        line-height: 1.07;
    }
}

@media (max-width: 400px) {
    .av-hero h1 {
        font-size: 27px;
    }

    .av-steps-heading h2,
    .av-local-content-title h2,
    .av-vehicle-types-title h2,
    .av-about-recycling-content h2,
    .av-region-showcase-copy h2,
    .av-seo-services-left h2,
    .av-sustainability-title h2,
    .av-brands-head h2,
    .av-why-us-heading h2 {
        font-size: 25px;
    }
}
.av-call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 0 22px;

    border-radius: 8px;

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

    color: #000;
    background: #fabb02;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.av-call-button:hover {
    background: #ffc72b;
    transform: translateY(-2px);
}

.av-call-button strong {
    font-weight: 700;
}
/* =========================================================
   START AUSWAHL
========================================================= */

.av-entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);
    background: rgba(0, 0, 0, 0.72);
}

.av-entry-overlay.is-hidden {
    display: none;
}

.av-entry-modal {
    position: relative;

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

    padding: 42px;

    background: #fff;

    border-radius: 14px;
}


/* CLOSE */

.av-entry-close {
    position: absolute;
    top: 15px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #f3f3f3;
    color: #000;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;
}


/* HEADER */

.av-entry-top {
    margin-bottom: 30px;
}

.av-entry-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #000;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.av-entry-label::before {
    content: "";

    display: inline-block;

    width: 25px;
    height: 4px;

    margin-right: 8px;

    vertical-align: middle;

    background: #fabb02;
}

.av-entry-top h2 {
    margin: 0 0 8px;

    font-size: 36px;
    line-height: 1;

    color: #000;
}

.av-entry-top p {
    margin: 0;

    color: #666;

    font-size: 15px;
}


/* AUSWAHL */

.av-entry-options {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.av-entry-option {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 115px;

    padding: 20px;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;
    color: #000;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.av-entry-option:hover {
    border-color: #000;
    transform: translateY(-2px);
}


/* AUTO VERKAUFEN */

.av-entry-option-primary {
    border-color: #fabb02;
    background: #fabb02;
}

.av-entry-option-primary:hover {
    border-color: #000;
}


/* NUMMER */

.av-entry-number {
    margin-right: 15px;

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

    opacity: .55;
}


/* TEXT */

.av-entry-option-content {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.av-entry-option-content strong {
    font-size: 18px;
    font-weight: 800;
}

.av-entry-option-content small {
    color: #666;

    font-size: 12px;
    line-height: 1.4;
}

.av-entry-option-primary small {
    color: #292929;
}


/* PFEIL */

.av-entry-arrow {
    margin-left: auto;

    padding-left: 12px;

    font-size: 23px;
}


/* =========================================================
   AUTOTEILE HINWEIS
========================================================= */

.av-entry-parts-message {
    padding: 25px;

    border-left: 5px solid #fabb02;

    background: #f5f5f5;
}

.av-entry-parts-message strong {
    display: block;

    margin-bottom: 8px;

    font-size: 19px;
    color: #000;
}

.av-entry-parts-message p {
    margin: 0 0 18px;

    color: #555;

    line-height: 1.6;
}

.av-entry-parts-message button {
    padding: 11px 17px;

    border: 0;
    border-radius: 6px;

    background: #000;
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}


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

@media (max-width: 600px) {

    .av-entry-overlay {
        padding: 14px;
    }

    .av-entry-modal {
        padding: 32px 20px 22px;
    }

    .av-entry-top h2 {
        font-size: 27px;
    }

    .av-entry-options {
        grid-template-columns: 1fr;
    }

    .av-entry-option {
        min-height: 92px;
    }
}


/* =========================================================
   HERO BUTTONS – MOBILE
========================================================= */

@media (max-width: 600px) {

    .av-hero-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;

        width: 100%;
        margin-top: 22px;
    }

    .av-hero-actions .av-hero-button,
    .av-hero-actions .av-call-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 12px 16px;

        box-sizing: border-box;

        border-radius: 8px;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;

        text-align: center;
    }

    .av-call-button {
        gap: 8px;
    }

    .av-call-button span,
    .av-call-button strong {
        font-size: 14px;
        white-space: nowrap;
    }
}