/*
 * »Code vergessen?« (11.11., resources/views/shop/code-vergessen.blade.php): dieselbe schmale Spalte wie die Hauptseite (css/shop.css), dazu das
 * Feld für die Adresse und der eigene Datumswähler (toolbox/date-picker/datepicker.css und css/datum.css – beide sprechen in den Namen der
 * Verwaltung; hier zeigen diese Namen auf die Farben der Kundenseite, der gewählte Tag in der Akzentfarbe). Kein style-Attribut (CSP).
 */
:root {
    --handlung: var(--akzent);
    --handlung-dunkel: var(--akzent-dunkel);
    --handlung-hell: var(--akzent-hell);
    --handlung-ton: 15, 74, 126;
    --auf-handlung: #FFFFFF;
    --grund: var(--papier);
    --ton: 22, 23, 26;
    --schatten-ton: 22, 23, 26;
    --flaeche-ton: 255, 255, 255;
    --platzhalter: #6F727A;
    --linie-hover: #B9B9B3;
    --radius: 10px;
    --radius-gross: 14px;
}

.vergessen .start-satz { max-width: 30ch; }
.vergessen-form { gap: 18px; }
.vergessen-feldgruppe { display: flex; flex-direction: column; gap: 8px; }

/* Die Adresse: so groß wie das Code-Feld der Hauptseite, aber normale Schrift (keine Großbuchstaben, kein Sperrsatz). */
.vergessen-feld {
    width: 100%; height: 58px; padding: 0 18px;
    border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--flaeche); color: var(--tinte);
    font-family: inherit; font-size: 18px; font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(22, 23, 26, 0.04);
    transition: border-color 140ms, box-shadow 140ms;
    -webkit-appearance: none; appearance: none;
}
.vergessen-feld:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }
.vergessen-feld[aria-invalid='true'] { border-color: var(--gefahr); }

/* Der Auslöser des Datumswählers sieht aus wie das Feld darüber. */
.vergessen .datepicker__trigger {
    min-height: 58px; padding: 0 18px; border-radius: 14px; font-size: 18px; font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(22, 23, 26, 0.04);
}
.vergessen .datepicker__trigger:focus-visible,
.vergessen .datepicker__trigger.is-open { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }
.vergessen .datepicker__icon svg { width: 20px; height: 20px; }
.vergessen .datepicker__icon { color: var(--akzent); }
/* Ohne Skript bleibt das Feld des Browsers – wenigstens in derselben Form. */
.vergessen .datum input[type='date']:not([data-datepicker-enhanced]) {
    width: 100%; height: 58px; padding: 0 18px; border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--flaeche);
    color: var(--tinte); font: inherit; font-size: 18px;
}

.vergessen-form .knopf-haupt { margin-top: 2px; }
.vergessen-form .code-hilfe { font-size: 14px; line-height: 1.45; }

/* Der Honigtopf: für Menschen unsichtbar und nicht ansteuerbar. */
.vergessen-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Die Antwort: kommt weich herein (nichts erscheint schlagartig). */
.vergessen-fertig { animation: vergessen-ein 320ms var(--kurve) both; }
@keyframes vergessen-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vergessen-fertig { animation: none; } }
.vergessen-satz { max-width: 30ch; overflow-wrap: anywhere; }
.vergessen-adresse { color: var(--tinte); font-weight: 600; }
.vergessen-still { margin-top: 18px; max-width: 440px; font-size: 15px; line-height: 1.5; color: var(--neben); overflow-wrap: anywhere; }
.vergessen-still a { color: var(--akzent); }
.vergessen-zurueck { display: flex; align-items: center; justify-content: center; max-width: 440px; margin-top: 28px; text-decoration: none; font-weight: 600; }
.vergessen-ohne-skript { margin-top: 18px; }
/* Der Pfeil am Monatstitel ist in css/datum.css eine data:-Grafik – die CSP der Kundenseiten lässt nur Bilder vom eigenen Server zu. Hier aus Strichen. */
button.datepicker__title::after {
    background: none; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px;
    border-right: 2px solid var(--neben); border-bottom: 2px solid var(--neben); transform: rotate(45deg);
}