/**
 * clevercarsale Kundenformular
 *
 * Datei : assets/formular.css
 *
 * DIE BREITE ENTSCHEIDET, NICHT DAS FENSTER
 *
 * Das Formular sitzt im Slider in einem Kasten, der je nach
 * Fenster zwischen 253 und 1073 Pixel breit ist - und bei
 * Fenster 1280 ist er nur 410 breit, obwohl man am Rechner
 * sitzt. Eine Medienabfrage auf die Fensterbreite läge dort um
 * Hunderte Pixel daneben. Deshalb `@container`.
 *
 * KEINE EIGENE KARTE
 *
 * Den weißen Kasten stellt das Theme-Widget (.slide-form). Wer
 * das Formular woanders einbaut, nimmt [cc_leadformular
 * karte="ja"].
 *
 * Stand: 11.10.2026
 */

.cc-lf {
    container-type: inline-size;
    --cc-lf-blau: #00a8d0;
    --cc-lf-blau-dunkel: #0b7fa0;
    --cc-lf-blau-hell: #eaf8fc;
    --cc-lf-text: #16232b;
    --cc-lf-leise: #5b6b75;
    --cc-lf-rand: #dfe4e8;
    /* Nur fuer die Haken. NICHT fuer die Schrittanzeige - die ist
       grau und schwarz, siehe den Kommentar bei .cc-lf-wegpunkt. */
    --cc-lf-gruen: #16803c;
    --cc-lf-rot: #b3261e;
    color: var(--cc-lf-text);
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
}

/*
 * DAS POLSTER BRINGT DAS FORMULAR MIT.
 *
 * Der Kasten im Slider (.slide-form) hat `padding: 0` - das
 * Polster kam bisher aus FormCrafts eigenem Blatt. Ohne es
 * kleben Beschriftungen und Knöpfe direkt am weißen Rand, und
 * „Schritt 1 von 2" sitzt bündig an der Kante.
 *
 * Deshalb hier, nicht in `--karte`: Es wird immer gebraucht,
 * egal wer den Rahmen stellt.
 *
 * Als Medienabfrage, nicht als Container-Abfrage: Das Polster
 * ändert die Breite des Containers, an dem gemessen wird - das
 * misst sich im Kreis.
 */
.cc-lf { padding: 20px 22px; }

@media (max-width: 480px) {
    .cc-lf { padding: 16px; }
}

.cc-lf--karte {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(8, 25, 38, .18);
}

.cc-lf *,
.cc-lf *::before,
.cc-lf *::after { box-sizing: border-box; }

.cc-lf p { margin: 0; }

/*
 * [hidden] MUSS GEWINNEN.
 *
 * Das Attribut bringt nur `display:none` aus dem Browser-Blatt
 * mit - also die schwaechste Stufe. Jede eigene Regel mit
 * `display:flex` oder `display:grid` schlaegt es, und das Feld
 * steht sichtbar da, obwohl es versteckt sein soll.
 *
 * Genau das ist hier beim ersten Versuch passiert: Schritt 2
 * stand unter Schritt 1, weil `.cc-lf-schritt{display:flex}`
 * staerker war. Mit !important ist die Frage ein fuer alle Mal
 * beantwortet - auch fuer die Blaetter des Themes, die wir
 * nicht kennen.
 */
.cc-lf [hidden] { display: none !important; }


/* ---------- Fahrzeugart ---------- */

.cc-lf-arten {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 13px;
}

.cc-lf-art {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border: 1px solid var(--cc-lf-rand);
    border-radius: 999px;
    background: #fbfcfd;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

/*
 * DIE ANDEREN ARTEN TRETEN ZURUECK.
 *
 * Vier gleich kraeftige Pillen lesen sich wie vier Schalter, von
 * denen einer an ist. Es sind aber Wegweiser zu anderen Seiten -
 * wer hier steht, will meistens ein Auto verkaufen. Also bleibt
 * nur "Auto" in Farbe, der Rest wird blass.
 *
 * Der Mouseover ist einfarbig: nur der Grundton wird eine Spur
 * dunkler, Rahmen und Flaeche im selben Wert. Kein Farbwechsel,
 * keine zweite Kante - sonst springt beim Darueberfahren wieder
 * etwas ins Auge, das gar nicht wichtig ist.
 */
.cc-lf-art {
    text-decoration: none;
    border-color: #edf1f3;
    background: #f7f9fa;
    color: #a6b1b9;
}

.cc-lf-art svg { flex: none; width: 18px; height: 18px; color: #bcc6cd; }

.cc-lf-art:hover,
.cc-lf-art:hover svg { color: #8b979f; }

.cc-lf-art:hover {
    border-color: #e4e9ec;
    background: #eef2f4;
}

/* Die aktuelle Seite - markiert, aber kein Schalter. */
.cc-lf-art.ist-hier {
    border-color: var(--cc-lf-blau);
    background: var(--cc-lf-blau-hell);
    color: var(--cc-lf-blau-dunkel);
    box-shadow: inset 0 0 0 1px var(--cc-lf-blau);
}

.cc-lf-art.ist-hier svg { color: var(--cc-lf-blau); }

.cc-lf-art:focus-visible { outline: 2px solid var(--cc-lf-blau); outline-offset: 2px; }


/* ---------- Kopf ---------- */

.cc-lf-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cc-lf-rand);
    margin-bottom: 14px;
}

.cc-lf-titel b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
}

.cc-lf-anruf {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--cc-lf-leise);
    font-size: 11.5px;
}

.cc-lf-anruf svg { flex: none; width: 13px; height: 13px; color: var(--cc-lf-blau); }

.cc-lf-anruf a {
    color: var(--cc-lf-text);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cc-lf-punkte {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding-top: 5px;
}

.cc-lf-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8e1e7;
    transition: width .15s, background .15s;
}

/* Auch hier kein Gruen - der erledigte Punkt bleibt im Blau der
   Leiste, sonst sind es wieder drei Farben fuer eine Strecke. */
.cc-lf-punkt.ist-fertig { background: var(--cc-lf-blau); }
.cc-lf-punkt.ist-da { width: 24px; border-radius: 999px; background: var(--cc-lf-blau); }

.cc-lf-zaehler {
    margin-left: 4px;
    color: var(--cc-lf-leise);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------- Felder ---------- */

.cc-lf-schritt { display: flex; flex-direction: column; gap: 12px; }

.cc-lf-reihe { display: grid; grid-template-columns: 1fr; gap: 11px 13px; }

.cc-lf-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cc-lf-feld label,
.cc-lf-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.cc-lf-leise { font-weight: 400; color: var(--cc-lf-leise); }

.cc-lf input[type="text"],
.cc-lf input[type="email"],
.cc-lf input[type="tel"],
.cc-lf select,
.cc-lf textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #c9d6de;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    color: var(--cc-lf-text);
    -webkit-appearance: none;
    appearance: none;
}

/* Das Auswahlfeld braucht seinen Pfeil zurück. */
.cc-lf select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6b75'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
}

.cc-lf textarea { resize: vertical; min-height: 62px; }

/*
 * EIN RAHMEN, NICHT ZWEI.
 *
 * Hier stand `outline: 2px` mit `outline-offset: 1px` UND ein
 * blauer Rahmen. Das ergibt drei Schichten: duenne Linie, ein
 * Pixel Weiss, dicker Ring. Nikolay am 12.10.2026: "ein aktives
 * feld hat einen doppelrahmen, einmal duenn, einmal dick, das
 * ist ein fehler". Stimmt.
 *
 * Jetzt dieselbe Sprache wie der Monatswaehler, der es von
 * Anfang an richtig gemacht hat: der Rahmen faerbt sich blau,
 * dahinter ein weicher Hauch. Eine Kante, kein Spalt.
 *
 * `outline: 0` ist hier vertretbar, weil der Ersatz deutlich
 * sichtbar ist - Rahmenfarbe UND Hauch, fuer Maus wie Tastatur.
 */
.cc-lf input:focus,
.cc-lf select:focus,
.cc-lf textarea:focus {
    outline: 0;
    border-color: var(--cc-lf-blau);
    box-shadow: 0 0 0 3px rgba(0, 168, 208, .16);
}

/* Chrome färbt ausgefüllte Felder sonst hellblau ein. */
.cc-lf input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px #fff inset;
    -webkit-text-fill-color: var(--cc-lf-text);
}

/*
 * DIE ROTE KANTE MUSS GEWINNEN.
 *
 * `.cc-lf .ist-falsch` sind zwei Klassen; `.cc-lf
 * input[type="text"]` ist eine Klasse, ein Typ und ein
 * Attribut - und damit staerker. Die Auswahlfelder wurden
 * rot, die Textfelder nicht: Die Meldung sagte "7 Angaben
 * fehlen", rot waren drei.
 *
 * Mit dem Typ im Selektor steht es wieder richtig herum.
 */
.cc-lf input.ist-falsch,
.cc-lf select.ist-falsch,
.cc-lf textarea.ist-falsch,
.cc-lf input.ist-falsch:focus,
.cc-lf select.ist-falsch:focus,
.cc-lf textarea.ist-falsch:focus {
    border-color: var(--cc-lf-rot);
    /* Auch der Hauch rot - sonst blauer Schein um eine rote Kante. */
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* Beim Monatswaehler liegen die beiden Listen versteckt -
   markiert wird deshalb der Knopf, den man sieht. */
.cc-lf .cc-monatswahl.ist-falsch .cc-mw-feld { border-color: var(--cc-lf-rot); }

.cc-lf-monat { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7px; }


/* ---------- Nutzen ---------- */

.cc-lf-nutzen {
    margin: 0;
    padding: 11px 0 0;
    list-style: none;
    border-top: 1px solid #edf1f4;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-lf-nutzen li {
    position: relative;
    padding-left: 25px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cc-lf-leise);
}

.cc-lf-nutzen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    /*
     * Tabler `circle-check`, Strichfassung - ZWEI getrennte Pfade.
     * Deshalb diese und nicht die gefuellte: Dort sind Scheibe und
     * Haken EIN Pfad mit ausgestanztem Loch, man kann sie nicht
     * verschieden einfaerben. Hier schon - Kreis hell gefuellt,
     * Haken dunkel darueber. Beide Pfade unveraendert uebernommen.
     *
     * ENG BESCHNITTEN: Der Kreis hat Radius 9 um (12|12), liegt
     * also zwischen 3 und 21. Das Raster 0..24 schenkt ringsum
     * drei Einheiten Luft her - ein Viertel, das man nicht sieht.
     * `viewBox='3 3 18 18'` schneidet sie weg, der Kreis fuellt
     * das Feld ganz aus.
     *
     * 18px auf 18 Rastereinheiten heisst: eine Einheit ist genau
     * ein Pixel. Der Haken mit Strichstaerke 2 wird damit exakt
     * 2px breit und liegt auf dem Pixelraster - siehe den
     * Kommentar weiter unten zur Strichstaerke.
     *
     * Der helle Kreis hat noch einen Nebeneffekt: Eine Rundung
     * wird an der Kante immer weichgezeichnet, das laesst sich
     * nicht vermeiden. Je kleiner der Unterschied zum Weiss
     * dahinter, desto weniger faellt das auf.
     */
    background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' fill='%23d6efdf'/%3E%3Cpath d='M9 12l2 2l4 -4' fill='none' stroke='%23157a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



/* ---------- Ja / Nein ---------- */

.cc-lf-janein { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.cc-lf-schalter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--cc-lf-rand);
    border-radius: 10px;
    background: #fbfcfd;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.cc-lf-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }

.cc-lf-schalter::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #b4c3cd;
    border-radius: 50%;
    background: #fff;
}

.cc-lf-schalter.ist-gewaehlt {
    border-color: var(--cc-lf-blau);
    background: var(--cc-lf-blau-hell);
    color: var(--cc-lf-blau-dunkel);
    box-shadow: inset 0 0 0 1px var(--cc-lf-blau);
}

.cc-lf-schalter.ist-gewaehlt::before { border: 5px solid var(--cc-lf-blau); }


/* ---------- Hochladen ---------- */

.cc-lf-bilder { display: flex; flex-direction: column; gap: 0; }

.cc-lf-upload { display: flex; align-items: stretch; gap: 10px; }

.cc-lf-ziehen {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1.5px dashed #b4ccd9;
    border-radius: 12px;
    background: var(--cc-lf-blau-hell);
}

.cc-lf-ziehen svg { flex: none; width: 23px; height: 23px; color: var(--cc-lf-blau); }
.cc-lf-ziehen b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cc-lf-ziehen small { display: block; color: var(--cc-lf-leise); font-size: 11px; line-height: 1.3; }

.cc-lf-ziehen.ist-drueber {
    border-color: var(--cc-lf-blau);
    border-style: solid;
    background: #ddf2f9;
}

.cc-lf-waehlen {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border: 1px solid #bcd3de;
    border-radius: 12px;
    background: #fff;
    color: var(--cc-lf-blau-dunkel);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.cc-lf-waehlen svg { flex: none; width: 16px; height: 16px; }

.cc-lf-nur-finger { display: none; }

/* Ohne Zeigegerät gibt es nichts zu ziehen - dann nur der Knopf. */
@media (hover: none), (pointer: coarse) {
    .cc-lf-ziehen { display: none; }
    .cc-lf-waehlen { flex: 1 1 auto; padding: 13px 16px; }
    .cc-lf-nur-maus { display: none; }
    .cc-lf-nur-finger { display: inline; }
}

.cc-lf-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cc-lf-galerie:empty { display: none; }

.cc-lf-bild {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    border-radius: 9px;
    border: 1px solid var(--cc-lf-rand);
    background: #dde6ec center/cover no-repeat;
    overflow: visible;
}

.cc-lf-bild.ist-fehler { border-color: var(--cc-lf-rot); background-color: #fbeceb; }

.cc-lf-bild-weg {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 26, 38, .82);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.cc-lf-balken {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    overflow: hidden;
}

.cc-lf-balken i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cc-lf-blau);
    transition: width .2s;
}

.cc-lf-galerie-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: var(--cc-lf-leise);
    font-size: 11.5px;
}

.cc-lf-alle-weg {
    border: 0;
    background: none;
    padding: 0;
    color: var(--cc-lf-blau-dunkel);
    font-family: inherit;
    font-size: 11.5px;
    text-decoration: underline;
    cursor: pointer;
}


/* ---------- Zustimmung ---------- */

.cc-lf-zustimmung {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding-top: 13px;
    border-top: 1px solid #edf1f4;
    font-size: 12.5px;
    line-height: 1.45;
}

.cc-lf-zustimmung input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--cc-lf-blau);
}

.cc-lf-zustimmung a { color: var(--cc-lf-blau-dunkel); }

.cc-lf-zustimmung.ist-falsch { color: var(--cc-lf-rot); }


/* ---------- Honigtopf ---------- */

.cc-lf-honig {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------- Meldung ---------- */

.cc-lf-meldung {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 10px;
    background: #fbeceb;
    border: 1px solid #f0c4c0;
    color: var(--cc-lf-rot);
    font-size: 12.5px;
    line-height: 1.45;
}


/* ---------- Fuß ---------- */

/* Der Abstand ueber dem Knopf wird kleiner, der darunter
   groesser - zusammen bleibt es fast gleich hoch, und der
   Satz klebt nicht mehr am Knopf. */
.cc-lf-fuss { display: flex; gap: 9px; margin-top: 12px; }

.cc-lf-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--cc-lf-blau);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.cc-lf-weiter,
.cc-lf-senden { flex: 1 1 auto; }

.cc-lf-zurueck {
    flex: none;
    background: #fff;
    border: 1px solid var(--cc-lf-rand);
    color: var(--cc-lf-leise);
    font-weight: 600;
}

.cc-lf-knopf[disabled] { opacity: .6; cursor: default; }

.cc-lf p.cc-lf-satz {
    margin-top: 12px;
    text-align: center;
    color: var(--cc-lf-leise);
    font-size: 11px;
    line-height: 1.45;
}

/*
 * Hier stand `.cc-lf-satz b { color: gruen }` - ein Rest vom alten
 * Satz "keine Zahlungsdaten", der laengst weg ist. Die Wegpunkte
 * stehen auch in <b> und wurden davon gruen eingefaerbt; dagegen
 * half nur eine Gegenregel weiter unten. Beides ist jetzt
 * ueberfluessig - die Regel ist raus.
 */


/* ---------- Danke ---------- */

.cc-lf-danke { padding: 26px 4px 12px; text-align: center; }

.cc-lf-danke:focus { outline: none; }

.cc-lf-haken {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e6f5ec;
}

.cc-lf-haken svg { width: 28px; height: 28px; color: var(--cc-lf-gruen); }

.cc-lf-danke h3 {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--cc-lf-text);
}

/*
 * Die Textbreite ist begrenzt, nicht die Karte. Über die volle
 * Breite von 572 px wären die Zeilen zu lang zum Lesen.
 */
/*
 * p.cc-lf-danke-lead, nicht nur die Klasse.
 *
 * `.cc-lf p { margin: 0 }` weiter oben ist eine Klasse
 UND ein Typ und damit staerker als eine Klasse allein.
 * Das `auto` kam nie an, der Text stand links statt
 * mittig: 26 px Abstand links, 126 px rechts - in einer
 * sonst durchgehend zentrierten Karte.
 *
 * Heute der dritte Fall derselben Art. Faustregel fuer
 * dieses Blatt: Wer eine Grundregel mit Typselektor
 * ueberschreibt, nimmt den Typ mit in den Selektor.
 */
.cc-lf p.cc-lf-danke-lead {
    margin: 0 auto 20px;
    max-width: 420px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--cc-lf-leise);
}

.cc-lf-danke-lead strong { color: var(--cc-lf-text); font-weight: 700; }

/* Der Kasten mit den drei Antworten - linksbündig, weil Listen
   sich so lesen, auch wenn ringsum zentriert wird. */
.cc-lf-danke-kasten {
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--cc-lf-blau-hell);
    text-align: left;
}

.cc-lf-danke-unter {
    display: block;
    margin-bottom: 12px;
    color: var(--cc-lf-blau-dunkel);
    font-size: 14px;
    font-weight: 700;
}

.cc-lf-danke-kasten ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cc-lf-danke-kasten li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--cc-lf-text);
}

.cc-lf-danke-kasten li svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--cc-lf-blau);
}

.cc-lf-danke-fuss {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #edf1f4;
}

.cc-lf-danke-fuss small { color: var(--cc-lf-leise); font-size: 13px; }

.cc-lf-danke-kontakt {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
}

.cc-lf-danke-kontakt li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
}

.cc-lf-danke-kontakt svg { flex: none; width: 18px; height: 18px; color: var(--cc-lf-blau); }

.cc-lf-danke-kontakt a { color: var(--cc-lf-text); text-decoration: none; }
.cc-lf-danke-kontakt a:hover { text-decoration: underline; }

@container (max-width: 419px) {
    .cc-lf-danke h3 { font-size: 21px; }
    .cc-lf-danke-kontakt { flex-direction: column; gap: 9px; align-items: center; }
}


/* =========================================================
 * BREITEN
 *
 * Gemessen am Kasten, nicht am Fenster. Die Zahlen stammen aus
 * der Messung am 11.10.2026: Der Kasten ist 1073 breit bei
 * Fenster 1200, aber nur 410 bei Fenster 1280.
 * ======================================================= */

/*
 * Zweispaltig schon ab 340. Bei Fenster 1280 ist der Kasten
 * nur 410 breit - innen also rund 366. Mit der alten Grenze
 * von 420 stand dort alles untereinander, und in einem Feld
 * ueber die volle Breite steht dann "Audi" mit 90 Prozent
 * Leerraum daneben.
 */
@container (min-width: 340px) {
    .cc-lf-zwei { grid-template-columns: repeat(2, 1fr); }
    .cc-lf-sechs { grid-template-columns: repeat(2, 1fr); }
    .cc-lf-drei { grid-template-columns: repeat(2, 1fr); }
    .cc-lf-drei > :nth-child(3) { grid-column: 1 / -1; }
}

@container (min-width: 500px) {
    .cc-lf-schritt { gap: 15px; }
    .cc-lf-reihe { gap: 13px 14px; }
    .cc-lf-drei { grid-template-columns: repeat(3, 1fr); }
    .cc-lf-drei > :nth-child(3) { grid-column: auto; }
    .cc-lf-sechs { grid-template-columns: repeat(3, 1fr); }
    .cc-lf-feld label,
    .cc-lf-label { font-size: 12.5px; }
    .cc-lf input[type="text"],
    .cc-lf input[type="email"],
    .cc-lf input[type="tel"],
    .cc-lf select { padding: 12px 13px; }
    .cc-lf-nutzen { gap: 10px; padding-top: 13px; }
    .cc-lf-nutzen li { font-size: 13px; padding-left: 26px; }
    .cc-lf-titel b { font-size: 20px; }
    .cc-lf-galerie { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 9px; }
}

@container (max-width: 339px) {
    .cc-lf-upload { flex-direction: column; }
    .cc-lf-waehlen { padding: 11px 16px; }
    .cc-lf-kopf { flex-direction: column; gap: 8px; }
    .cc-lf-punkte { padding-top: 0; }
    .cc-lf-anruf-text { display: none; }
}


/* =========================================================
 * DER MONATSWÄHLER IM FORMULAR
 *
 * Die Dateien stammen aus dem Marktplatz und sind dort auf das
 * Backend abgestimmt. Hier muss der Knopf genauso hoch sein wie
 * die Felder daneben - sonst steht die Reihe schief.
 * ======================================================= */

.cc-lf .cc-monatswahl { display: block; width: 100%; }

.cc-lf .cc-monatswahl .cc-mw-feld {
    width: 100%;
    /*
     * `min-height: 0` hebelt die 40px des Bausteins aus - die
     * Hoehe soll hier allein aus Polster und Textzeile kommen,
     * damit der Knopf genau so hoch wird wie die Felder daneben.
     * Fuer die leere Zeile sorgt das ::before weiter unten.
     */
    min-height: 0;
    padding: 11px 12px;
    border: 1px solid #c9d6de;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    color: var(--cc-lf-text);
}

/*
 * DER LEERE KNOPF BRAUCHT TROTZDEM EINE ZEILE.
 *
 * Die Felder daneben sind echte Eingabefelder - die haben auch
 * ohne Inhalt eine Textzeile und damit ihre Hoehe. Der
 * Monatswaehler ist ein Knopf: Steht nichts darin, gibt es
 * keine Zeile, und er faellt auf Polster plus Rahmen zusammen.
 *
 * Gemessen am 12.10.2026, nachdem der Platzhalter "Monat und
 * Jahr" entfernt wurde: 26px statt 45px. Die ganze Reihe stand
 * schief, und das Kalendersymbol hing halb heraus. Solange der
 * Platzhalter drinstand, ist es nie aufgefallen.
 *
 * Ein leeres Flex-Kind mit der Hoehe einer Zeile haelt den Knopf
 * offen. `1.35em` ist dieselbe Zeilenhoehe wie oben und wie in
 * den Feldern - aendert sich die Schriftgroesse, geht es mit.
 * Eine feste Pixelhoehe muesste man an zwei Stellen nachziehen,
 * weil das Polster bei breitem Kasten groesser ist.
 */
.cc-lf .cc-monatswahl .cc-mw-feld::before {
    content: "";
    flex: none;
    width: 0;
    height: 1.35em;
}

/*
 * Hier stand derselbe Doppelrahmen - und zwar ZUSAETZLICH zu dem
 * sauberen Fokus, den `monatswahl.css` schon mitbringt (blauer
 * Rahmen plus Hauch). Das Feld bekam also beides uebereinander.
 * Die Regel ist raus; die des Bausteins genuegt.
 */

@container (min-width: 500px) {
    .cc-lf .cc-monatswahl .cc-mw-feld { padding: 12px 13px; }
}


/* =========================================================
 * SOLANGE NICHTS GEWÄHLT IST, STEHT ES GRAU DA
 *
 * Ein Textfeld zeigt seinen Platzhalter grau, ein Auswahlfeld
 * zeigte „Bitte wählen" schwarz - also genauso wie eine echte
 * Antwort. Nebeneinander sah das aus, als wäre die Marke schon
 * ausgefüllt und nur das Modell noch offen.
 *
 * Dieselbe Farbe wie der Platzhalter: #757575, gemessen am
 * Feld „Modell".
 *
 * :has() statt einer Klasse per Javascript - so stimmt es auch
 * dann, wenn das Skript nicht lädt. Die Liste selbst bleibt
 * schwarz, sonst wären auch die Einträge im aufgeklappten
 * Menü grau.
 */
.cc-lf select:has(option[value=""]:checked) { color: #757575; }
.cc-lf select option { color: var(--cc-lf-text); }

/* Der Monatswähler, solange er noch kein Datum trägt. */
.cc-lf .cc-monatswahl .cc-mw-feld:not(.ist-gefuellt) { color: #757575; }


/* =========================================================
 * HELLERES GRAU FÜR ALLES, WAS NOCH LEER IST
 *
 * Nikolay am 11.10.2026: „dadurch dass alle felder werte
 * enthalten beim erstaufruf wirkt es sehr unruhig und die
 * einfachheit vom vorherigen formular geht total verloren."
 *
 * Er hat recht: Neun Felder, die alle etwas anzeigen, sehen
 * aus wie neun ausgefüllte Felder. Je heller die Vorgaben,
 * desto deutlicher ist, dass dort noch nichts steht.
 *
 * #9ca8b0 statt #757575. Das sind 2,43:1 auf Weiß und damit
 * unter der üblichen Grenze von 3:1 - auf ausdrücklichen
 * Wunsch, zweimal bestätigt.
 *
 * Vertretbar ist es, weil über jedem Feld die Beschriftung
 * steht: „Marke", „Kraftstoff", „Getriebe" - in voller
 * Schwärze. Was zu tun ist, steht also lesbar da; das graue
 * „Bitte wählen" im Feld wiederholt es nur. Wäre es die
 * einzige Beschriftung, ginge das nicht.
 */
.cc-lf ::placeholder { color: #9ca8b0; opacity: 1; }
.cc-lf select:has(option[value=""]:checked) { color: #9ca8b0; }
.cc-lf .cc-monatswahl .cc-mw-feld:not(.ist-gefuellt) { color: #9ca8b0; }


/* =========================================================
 * AM TELEFON DUNKLER
 *
 * Das helle Grau lebt davon, dass man ruhig auf einen Schirm
 * schaut. Draußen am Telefon, mit Sonne auf dem Glas, ist bei
 * 2,4:1 nichts mehr zu erkennen.
 *
 * Deshalb dort #82909a - 3,28:1 und damit über der Grenze.
 * Am Rechner bleibt es hell, wie gewünscht.
 *
 * Am Zeigegerät festgemacht, nicht an der Breite: Ein schmales
 * Fenster am Rechner steht trotzdem im Zimmer.
 */
@media (hover: none), (pointer: coarse) {
    .cc-lf ::placeholder { color: #82909a; }
    .cc-lf select:has(option[value=""]:checked) { color: #82909a; }
    .cc-lf .cc-monatswahl .cc-mw-feld:not(.ist-gefuellt) { color: #82909a; }
}


/* =========================================================
 * DIE WEGPUNKTE UNTER DEM KNOPF
 *
 * Beide Schritte stehen da, der aktuelle hervorgehoben. Das
 * macht nachvollziehbar, wo man ist und dass danach Schluss
 * ist - ohne eine Zeile mehr zu kosten als der Satz vorher.
 * ======================================================= */

.cc-lf-wegpunkt { color: #9ca8b0; }

.cc-lf-wegpunkt.ist-da { color: var(--cc-lf-text); font-weight: 700; }

/*
 * KEIN GRUEN IN DER SCHRITTANZEIGE.
 *
 * Erledigt war gruen, aktiv schwarz, offen grau - drei Farben in
 * einer elf Pixel hohen Zeile. Nikolay am 12.10.2026: "das ist
 * chaos pur". Also zwei Zustaende statt drei: grau, und schwarz
 * wenn man dort ist. Was erledigt ist, sagt schon die Stellung
 * in der Reihe.
 */
.cc-lf-wegpunkt.ist-fertig { color: #9ca8b0; }

.cc-lf-wegtrenner { margin: 0 6px; color: #c3ccd3; }

@media (hover: none), (pointer: coarse) {
    .cc-lf-wegpunkt { color: #82909a; }
}

/*
 * Bei schmalem Kasten die Kurzform: "Fahrzeug → Kontakt →
 * Absenden" statt der vollen Namen. Sonst bricht die Zeile am
 * Telefon um und die Karte wird 16 px höher.
 *
 * Die Nummern fallen dort ebenfalls weg - die Reihenfolge
 * steht ohnehin durch die Pfeile fest, und oben zählt der
 * Schrittzähler mit.
 */
/* Die Namen stehen in <b>, sollen aber nicht fetter sein als die
   Zeile selbst - die Hervorhebung macht `.ist-da`. */
.cc-lf-wegpunkt i { font-style: normal; }
.cc-lf-wegpunkt b { font-weight: inherit; color: inherit; }

/* Der Papierflieger sitzt auf der Schriftlinie. */
.cc-lf-wegsymbol {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 2px;
}
.cc-lf-weglang { display: none; }

@container (min-width: 340px) {
    .cc-lf-weglang { display: inline; }
    .cc-lf-wegkurz { display: none; }
}

@container (max-width: 339px) {
    .cc-lf-wegpunkt i { display: none; }
    .cc-lf-wegtrenner { margin: 0 4px; }
}


/* =========================================================
 * DIE WEGPUNKTZEILE ALS FLEX
 *
 * Vorher inline: Der Leerraum zwischen Symbol und Text brach
 * um, der dritte Punkt rutschte auf eine eigene Zeile und nahm
 * dort die volle Breite ein - 44 px hoch statt 16.
 *
 * Als Flex mit nowrap je Punkt kann das nicht mehr passieren:
 * Umgebrochen wird nur ZWISCHEN den Punkten, nie mittendrin.
 * ======================================================= */

.cc-lf p.cc-lf-satz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 0;
}

.cc-lf-wegpunkt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ---------- Die Karte soll sich an ihren Inhalt halten ----------
 *
 * Die Karte `.slide-form` liegt in einer Flex-Zeile
 * (`.slider-hero-wrap`) NEBEN dem Bildslider. Flex streckt seine
 * Kinder standardmaessig auf dieselbe Hoehe - also wird die Karte
 * so hoch wie der Slider, ganz gleich wie viel darin steht. Der
 * Rest ist weisse Flaeche unter der Wegpunktzeile.
 *
 * Gemessen am 12.10.2026, Fenster 1920: Slider 544px, Inhalt
 * 509px, macht 35px Leerlauf - plus 20px Polster sind das 55px
 * weisses Nichts. Unter 1440 faellt es nicht auf, weil das
 * Formular dort hoeher ist als der Slider und die Hoehe selbst
 * setzt. Das alte FormCraft-Formular war laenger und hatte das
 * Problem deshalb nie.
 *
 * `align-self: flex-start` nimmt die Karte aus der Streckung. Sie
 * bleibt oben buendig mit dem Slider und endet dort, wo ihr
 * Inhalt endet.
 *
 * `:has(> .cc-lf)` haelt das auf unserer Karte fest. Dieselbe
 * Klasse steckt in jedem Slider des Themes, auch in denen mit
 * FormCraft - die duerfen nicht mitkippen. Kennt ein Browser
 * `:has()` nicht, bleibt alles wie vorher.
 */
.slide-form:has(> .cc-lf) {
    align-self: flex-start;

    /*
     * DIE KARTE MUSS UEBER DEM SLIDER LIEGEN.
     *
     * Der Slider-Titel malte sich ueber den aufgeklappten
     * Monatswaehler. Grund: `.slide-form` hat vom Theme ein
     * `z-index: 1` mitbekommen, steht aber auf `position:
     * static` - und dort wirkt z-index ueberhaupt nicht. Die
     * Karte bildete also gar keine eigene Ebene.
     *
     * Der Slider daneben (`.hero-slider-wrapper`) hat ebenfalls
     * `z-index: 1`, aber `position: relative` - also wirkt
     * seine. Damit lag er oben, samt seiner Ueberschrift.
     *
     * Mit `position: relative` wird aus der 1 der Karte eine
     * echte Ebene; die 2 hebt sie ueber den Slider. Mehr als 2
     * braucht es nicht - hoehere Werte wuerden nur das naechste
     * Wettruesten anfangen.
     */
    position: relative;
    z-index: 2;

    /*
     * DER MONATSWAEHLER MUSS AUS DER KARTE HERAUSRAGEN.
     *
     * Die Karte hat `overflow: hidden` vom Theme. Der Waehler ist
     * 341px hoch und steht unter einem Feld in der zweiten Reihe -
     * er ragt also 118px ueber die Karte hinaus und wurde dort
     * glatt abgeschnitten. Mitten im Jahresraster.
     *
     * Gemessen am 12.10.2026 bei 1920: Karte endet bei 789,
     * Waehler bei 907.
     *
     * Die beiden Vorfahren darueber schneiden auch, enden aber
     * erst bei 922 - sie stoeren nicht. Deshalb genuegt es hier,
     * und nur hier, die Schere wegzunehmen.
     *
     * Die runden Ecken bleiben: Sie kommen von `border-radius` und
     * dem weissen Hintergrund der Karte selbst, nicht vom
     * Beschnitt. Im Formular malt nichts bis an den Rand.
     */
    overflow: visible;
}

/* =========================================================
 * DAS FORMULAR IM INHALTSBEREICH
 *
 * Im Slider bekommt das Formular die weisse Karte vom Theme
 * geschenkt (`.slide-form`). Mitten im Fliesstext steht es nackt
 * auf Weiss - kein Grund, kein Rahmen, kein Schatten. Nikolay am
 * 12.10.2026 ueber die alte Fassung: "sehr unscheinbar und wenig
 * einladend". Fuer meine galt dasselbe.
 *
 * Also eine eigene Karte. Weiss mit Kontur und Schatten, kein
 * farbiger Grund - die Textabschnitte dieser Seiten sind bereits
 * hellblau (rgb(243,251,253)), ein blaues Formular daneben waere
 * nur ein weiterer blauer Block.
 *
 * DAS THEME SCHREIBT MIT !important HINEIN
 *
 * `.form-service` ist die Huelle, die das Theme um solche
 * Widgets legt. In `main.css` steht dazu:
 *
 *   .form-service input, .form-service textarea, .form-service select {
 *       padding: 16px !important;
 *       border: 1px solid #ededed !important;
 *       border-radius: 14px !important;
 *       background-color: transparent !important;
 *       color: #696665 !important;
 *   }
 *
 * Gegen `!important` hilft keine Spezifitaet - nur `!important`
 * mit hoeherer Spezifitaet. Deshalb stehen die Werte hier noch
 * einmal, und nur hier: Ausserhalb von `.form-service` gilt
 * weiter die normale Regel ohne !important.
 *
 * Gemessen vorher: Eingabefelder 53px, Monatswaehler 45px - in
 * derselben Reihe. Den Waehler trifft die Themeregel naemlich
 * nicht, er ist ein <button>. Nachher sind beide 45px.
 * ======================================================= */

.form-service .cc-lf {
    padding: 26px 28px;
    border: 1px solid #e1e8ec;
    border-radius: 18px;
    background: #fff;
    /*
     * DER SCHATTEN MUSS IN 15 PIXEL PASSEN.
     *
     * Der Elementor-Behaelter darueber
     * (`.elementor-element-b836abf`) hat `overflow: hidden` und
     * laesst links und rechts nur 15px Luft. Ein Schatten mit
     * 44px Weichzeichnung reicht rund 22px zur Seite - er wurde
     * also sauber abgeschnitten, und man sah eine Kante statt
     * eines Schattens.
     *
     * Statt dem Theme `overflow: visible` aufzuzwingen (der
     * Behaelter umschliesst halbe Seiten, wer weiss was dort
     * sonst noch herausfiele) rechnet der Schatten mit dem
     * vorhandenen Platz:
     *
     *   seitliche Reichweite = Weichzeichnung / 2 + Streuung
     *                        = 30 / 2 - 10 = 5px
     *
     * Nach unten bleibt er sichtbar: 14 + 15 - 10 = 19px, und
     * dort sind 102px frei. Die negative Streuung zieht ihn
     * zusammen, die kraeftigere Deckung gleicht das aus.
     */
    box-shadow: 0 14px 30px -10px rgba(18, 32, 41, .22);
}

/* Die Werte aus der Grundregel, hier nur durchgesetzt. */
.form-service .cc-lf input[type="text"],
.form-service .cc-lf input[type="email"],
.form-service .cc-lf input[type="tel"],
.form-service .cc-lf select,
.form-service .cc-lf textarea {
    padding: 11px 12px !important;
    border: 1px solid #c9d6de !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: var(--cc-lf-text) !important;
}

@container (min-width: 500px) {
    .form-service .cc-lf input[type="text"],
    .form-service .cc-lf input[type="email"],
    .form-service .cc-lf input[type="tel"],
    .form-service .cc-lf select,
    .form-service .cc-lf textarea { padding: 12px 13px !important; }
}

/*
 * Fokus und Fehler brauchen ihr eigenes !important - sonst
 * gewinnt die Grundregel von oben gegen sie, und die Kante
 * bliebe grau, egal was passiert.
 */
.form-service .cc-lf input:focus,
.form-service .cc-lf select:focus,
.form-service .cc-lf textarea:focus { border-color: var(--cc-lf-blau) !important; }

.form-service .cc-lf input.ist-falsch,
.form-service .cc-lf select.ist-falsch,
.form-service .cc-lf textarea.ist-falsch { border-color: var(--cc-lf-rot) !important; }