/*
 * clevercarsale - Der Monatswaehler
 *
 * Gehoert zu assets/js/monatswahl.js und
 * cc_lead_monat_waehler() in lead-fields.php (Kapitel 42).
 *
 * EINE DATEI FUER ZWEI BILDSCHIRME
 *
 * Der Waehler steht im Backend-Formular UND auf der
 * Vervollstaendigungsseite. Zwei Fassungen waeren zwei Stellen,
 * an denen spaeter Verschiedenes steht - und der Waehler ist
 * genau darum entstanden, dass dasselbe ueberall gleich
 * aussieht.
 *
 * Die Farben stehen als Zahl und nicht als Variable: Im Backend
 * heissen die Haustoene --cc-*, auf der Leadseite heissen sie
 * anders, und die Seite des Kunden bringt ihre eigenen mit. Eine
 * Variable, die an einem der drei Orte nicht gesetzt ist, faellt
 * lautlos auf Schwarz zurueck.
 */


/* =========================================================
 * KEINE VERSALIEN MIT SPERRUNG (09.10.2026)
 *
 * Aus dieser Datei ist eine Regel um zwei Eigenschaften
 * erleichtert worden: text-transform: uppercase und das
 * letter-spacing daneben. Beide gehoeren nicht zum
 * Hausstil - in shop.css stand die Begruendung schon
 * einmal, fuer eine einzelne Zeile; jetzt gilt sie
 * ueberall.
 *
 * Die Texte selbst stehen im PHP normal geschrieben
 * ("Verfuegbare Leads", nicht "VERFUEGBARE LEADS"), der
 * Grossbuchstabensatz kam allein aus dem Blatt. Es faellt
 * also nichts weg, es kommt nur die Schreibweise zurueck,
 * die ohnehin im Quelltext steht.
 * ======================================================= */

.cc-monatswahl {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 8px;
}

.cc-monatswahl select {
    width: 100%;
    min-width: 0;
}

/* =========================================================
 * DIE ZEIT ZWISCHEN HTML UND SKRIPT
 *
 * monatswahl.js laeuft im Fuss und wartet auf DOMContentLoaded.
 * Bis dahin stehen die beiden Listen sichtbar da - und wurden
 * danach gegen den Waehler getauscht. Nikolay am 26.09.2026:
 * „zunächst zwei dropdownfelder … und danach überlagert das
 * kalender feld."
 *
 * Die Klasse `cc-mw-js` setzt lead-fields.php mit einem
 * Inline-Skript, waehrend die Seite noch geparst wird - also vor
 * dem ersten Zeichnen. Ist sie da, bleiben die Listen von Anfang
 * an verborgen, und an ihrer Stelle steht ein leerer Kasten in
 * derselben Groesse wie der fertige Waehler. Danach wird er
 * gefuellt, nicht ersetzt: nichts springt.
 *
 * OHNE JAVASCRIPT FEHLT DIE KLASSE - dann bleiben die Listen
 * sichtbar und das Feld bedienbar. Genau dafuer sind sie da.
 * ======================================================= */

html.cc-mw-js .cc-monatswahl:not(.ist-erweitert) {
    display: block;
}

html.cc-mw-js .cc-monatswahl:not(.ist-erweitert) select {
    display: none;
}

/*
 * Der Platzhalter hat dieselben Masse wie .cc-mw-feld weiter
 * unten. Waere er kleiner, rueckte beim Erscheinen des Waehlers
 * alles darunter nach - und genau das Springen soll ja weg.
 */
html.cc-mw-js .cc-monatswahl:not(.ist-erweitert)::before {
    content: "";
    display: block;
    width: 100%;
    min-height: 40px;

    /*
     * box-sizing ausdruecklich: Ohne die Zeile zaehlen die beiden
     * Raender OBEN DRAUF, der Platzhalter wird 42 statt 40 Pixel
     * hoch - und genau die zwei Pixel springen dann beim
     * Erscheinen des Waehlers. Gemessen, nicht vermutet.
     *
     * .cc-mw-feld selbst bekommt sein border-box von der Umgebung;
     * ein Pseudoelement erbt das nicht zuverlaessig.
     */
    box-sizing: border-box;
    border: 1px solid #dce7ed;
    border-radius: 9px;
    background: #fff;
}


/*
 * Sobald das Skript den Waehler gebaut hat, treten die beiden
 * Listen zurueck. Sie bleiben im Formular stehen - sie tragen
 * die Namen, mit denen abgeschickt wird.
 */
.cc-monatswahl.ist-erweitert {
    position: relative;
    display: block;
}

.cc-monatswahl.ist-erweitert select {
    display: none;
}


/* ---------- Das Feld ---------- */

.cc-mw-feld {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 9px 40px 9px 12px;
    border: 1px solid #dce7ed;
    border-radius: 9px;
    background: #fff;
    color: #172027;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.cc-mw-feld:hover {
    border-color: #b9d3de;
}

.cc-monatswahl.ist-offen .cc-mw-feld,
.cc-mw-feld:focus {
    border-color: #00a8d0;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 168, 208, .16);
}

.cc-mw-feld.ist-leer {
    color: #93a5af;
}

/*
 * Das Kalenderblatt als Hintergrundbild und nicht als Zeichen im
 * Text: Die Symbolschrift laedt nicht auf jeder Seite, auf der
 * dieses Feld stehen kann - im Backend gar nicht.
 */
.cc-mw-feld::after {
    content: '';
    position: absolute;
    right: 11px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7fa0' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
}


/* ---------- Das Fenster ---------- */

.cc-mw-fenster {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    left: 0;
    width: 306px;
    max-width: 100vw;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 32, 41, .18), 0 0 0 1px rgba(18, 32, 41, .06);
    display: none;
}

.cc-monatswahl.ist-offen .cc-mw-fenster {
    display: block;
}

/*
 * Gekippt: ueber dem Feld statt darunter. Gesetzt wird die
 * Klasse von `platzieren()` im Javascript, und zwar nur wenn
 * unten kein Platz ist.
 */
.cc-monatswahl.ist-oben .cc-mw-fenster {
    top: auto;
    bottom: calc(100% + 6px);
}

.cc-mw-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cc-mw-zurueck {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #dce7ed;
    border-radius: 9px;
    background: #fff;
    color: #0b7fa0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.cc-mw-zurueck:hover {
    border-color: #00a8d0;
    background: #eaf8fc;
}

.cc-mw-titel {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #172027;
}

.cc-mw-titel small {
    display: block;
    color: #5c6e7a;
    font-size: 11px;
    font-weight: 600;
}


/* ---------- Die beiden Flaechen ---------- */

.cc-mw-jahre,
.cc-mw-monate {
    display: grid;
    gap: 6px;
}

/*
 * Vier Spalten fuer die Jahre, drei fuer die Monate: "September"
 * braucht mehr Platz als "2019" - aber die Monate stehen kurz
 * ("Sep"), also ist es die Zahl der Eintraege, die entscheidet.
 * Sechzehn Jahre auf einen Blick, zwoelf Monate in vier Zeilen.
 */
.cc-mw-jahre {
    grid-template-columns: repeat(4, 1fr);
    max-height: 236px;
    overflow-y: auto;
}

.cc-mw-monate {
    grid-template-columns: repeat(3, 1fr);
}

.cc-mw-jahre button,
.cc-mw-monate button {
    padding: 11px 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #eef3f6;
    color: #172027;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.cc-mw-jahre button:hover,
.cc-mw-monate button:hover {
    background: #eaf8fc;
    border-color: #b9e6f2;
}

/*
 * Das dunklere Blau und nicht #00a8d0: Weisse Schrift darauf
 * ergaebe 2,8:1. Auf #0b7fa0 sind es 4,6:1.
 */
.cc-mw-jahre button.ist-wahl,
.cc-mw-monate button.ist-wahl {
    background: #0b7fa0;
    border-color: #0b7fa0;
    color: #fff;
    font-weight: 700;
}

.cc-mw-fuss {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.cc-mw-leeren {
    padding: 0;
    border: 0;
    background: none;
    color: #5c6e7a;
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.cc-mw-leeren:hover {
    color: #172027;
}


/* ---------- Auf dem Telefon ---------- */

@media (max-width: 480px) {

    /*
     * Volle Breite statt 306 Pixel: Ein Fenster, das breiter ist
     * als der Bildschirm, wird sonst am rechten Rand
     * abgeschnitten - und dort stehen die Dezember-Spalte und
     * die letzte Jahresspalte.
     */
    .cc-mw-fenster {
        width: 100%;
    }
}