/* =============================================================================
 | anlegen.css — die Seite „Anzeige anlegen" (Konto und Anzeige in einem Durchgang)
 |
 | Eigene Datei, weil der Tailwind-Build eingefroren ist (kein Node auf dem
 | Server): Neue Utility-Klassen gäbe es im ausgelieferten Stylesheet nicht.
 | Alles, was die Seite an Gestaltung braucht und nicht schon als Klasse
 | existiert, steht hier — mit dem Präfix al-.
 |
 | Farben laufen über dieselben Variablen wie überall (--c-gold, --c-sand …),
 | damit die Seite mit der Palette mitgeht. Geladen nur auf dieser Seite
 | (per @push('head') aus der Vorlage), seit 13.09.2026.
 ============================================================================= */

/* ---- Raster: Formular links, Vorschau rechts (ab 1024 px) ---------------- */
.al-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1024px) {
    .al-raster { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
    .al-seite { position: sticky; top: 132px; }
}
.al-seite { display: grid; gap: 14px; }

/* ---- Abschnitte -------------------------------------------------------- */
.al-block { scroll-margin-top: 110px; }
.al-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.al-nr {
    width: 28px; height: 28px; border-radius: 9999px; flex: none;
    border: 1px solid rgb(var(--c-gold)); color: rgb(var(--c-gold));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; transition: background-color .2s, color .2s;
}
.al-nr.ist-fertig { background: rgb(var(--c-gold)); color: rgb(var(--c-noir)); }
.al-nr.ist-fertig::before { content: "✓"; }
.al-nr.ist-fertig > span { display: none; }
.al-titel { font-family: var(--font-serif), Georgia, serif; font-size: 24px; line-height: 1.1; color: rgb(var(--c-sand)); }
.al-hinweis { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-sand-200)); }
@media (max-width: 639px) { .al-hinweis { display: none; } }

/* ---- Ort aus der PLZ --------------------------------------------------- */
.al-ort { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: rgb(var(--c-sand)); min-height: 20px; }
.al-ort svg { width: 14px; height: 14px; color: rgb(var(--c-gold)); flex: none; }
.al-ort em { font-style: normal; color: rgb(var(--c-sand-200)); }
.al-ort.ist-unbekannt { color: rgb(var(--c-burgund-50)); }

/* ---- Kästchen (Kategorien, Vorlieben) ---------------------------------- */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip {
    position: relative; cursor: pointer; user-select: none;
    border: 1px solid rgb(var(--c-gold) / .35); color: rgb(var(--c-sand-100));
    padding: 8px 13px; font-size: 12px; letter-spacing: .08em; line-height: 1.2;
    transition: border-color .15s, color .15s, background-color .15s;
    min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
}
.al-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.al-chip:hover { border-color: rgb(var(--c-gold)); color: rgb(var(--c-gold)); }
.al-chip.ist-an,
.al-chip:has(input:checked) { background: rgb(var(--c-gold) / .12); border-color: rgb(var(--c-gold)); color: rgb(var(--c-gold)); }
.al-chip.ist-an::before,
.al-chip:has(input:checked)::before { content: "✓"; font-size: 11px; }
.al-chip:has(input:focus-visible) { outline: 2px solid rgb(var(--c-gold)); outline-offset: 2px; }

/* ---- Bilder ------------------------------------------------------------ */
.al-drop {
    display: block; border: 1px dashed rgb(var(--c-gold) / .35); padding: 26px 20px;
    text-align: center; background: rgb(var(--c-noir-50) / .4); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.al-drop:hover, .al-drop.ist-drop { border-color: rgb(var(--c-gold)); background: rgb(var(--c-gold) / .08); }
.al-drop svg { width: 30px; height: 30px; color: rgb(var(--c-gold) / .7); margin: 0 auto 8px; display: block; }
.al-drop u { color: rgb(var(--c-gold)); text-underline-offset: 3px; }
.al-drop small { display: block; color: rgb(var(--c-sand-200)); font-size: 12px; margin-top: 6px; }
.al-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .al-bilder { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.al-bild { position: relative; aspect-ratio: 3 / 4; border: 1px solid rgb(var(--c-gold) / .15); background: rgb(var(--c-noir-100)); overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: rgb(var(--c-sand-200)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.al-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-bild--titel::after { content: "Titelbild"; position: absolute; left: 8px; bottom: 8px; background: rgb(var(--c-gold)); color: rgb(var(--c-noir)); font-size: 9px; letter-spacing: .2em; padding: 3px 6px; font-weight: 600; text-transform: uppercase; }
.al-bild__weg {
    position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: rgb(var(--c-burgund)); color: rgb(var(--c-sand)); border: 2px solid rgb(var(--c-sand)); cursor: pointer; z-index: 2;
}
.al-bild__weg svg { width: 14px; height: 14px; }

/* ---- Vorschau-Seite rechts --------------------------------------------- */
.al-seitentitel { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgb(var(--c-gold)); margin-bottom: 10px; }
.al-box { background: rgb(var(--c-coal)); border: 1px solid rgb(var(--c-gold) / .15); padding: 16px 18px; }
.al-balken { height: 3px; background: rgb(var(--c-noir-50)); margin: 4px 0 12px; }
.al-balken i { display: block; height: 100%; background: rgb(var(--c-gold)); transition: width .4s; }
.al-schritte { display: grid; gap: 8px; }
.al-schritt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(var(--c-sand-200)); }
.al-schritt b { width: 18px; height: 18px; border-radius: 9999px; border: 1px solid rgb(var(--c-gold) / .35); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: none; color: rgb(var(--c-sand-200)); font-weight: 400; }
.al-schritt.ist-fertig { color: rgb(var(--c-sand)); }
.al-schritt.ist-fertig b { background: rgb(var(--c-gold)); border-color: rgb(var(--c-gold)); color: rgb(var(--c-noir)); }
.al-schritt.ist-fertig b::before { content: "✓"; }
.al-danach { display: grid; gap: 9px; font-size: 13px; color: rgb(var(--c-sand-100)); }
.al-danach div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.al-danach span { color: rgb(var(--c-gold)); font-family: var(--font-serif), Georgia, serif; font-size: 17px; line-height: 1; }
.al-danach small { display: block; color: rgb(var(--c-sand-200)); font-size: 12px; }

/* Vorschaukarte: Bild als Fläche, wenn noch keins da ist */
.al-karte-leer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif), Georgia, serif; font-size: 64px; color: rgb(var(--c-gold) / .3); }
.al-karte-neu { position: absolute; top: 12px; left: 12px; z-index: 10; background: #047857; color: #fff; font-size: 9px; letter-spacing: .2em; padding: 4px 8px; font-weight: 700; text-transform: uppercase; }

/* ---- Stand auf dem Handy (klebt unter der Kopfleiste) ------------------ */
.al-stand {
    position: sticky; top: 64px; z-index: 30; margin: 0 -1rem 16px;
    background: rgb(var(--c-noir) / .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgb(var(--c-gold) / .15); padding: 8px 16px 9px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-sand-200));
    display: flex; justify-content: space-between; gap: 12px;
}
.al-stand b { color: rgb(var(--c-gold)); font-weight: 500; }
.al-stand i { position: absolute; left: 0; bottom: -1px; height: 2px; background: rgb(var(--c-gold)); transition: width .4s; }
@media (min-width: 1024px) { .al-stand { display: none; } }

/* ---- Passwort, Absenden, Fehler ---------------------------------------- */
.al-zeigen { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgb(var(--c-gold)); border: 1px solid rgb(var(--c-gold) / .4); padding: 6px 8px; background: transparent; cursor: pointer; white-space: nowrap; min-height: 32px; }
.al-absenden p { text-align: center; color: rgb(var(--c-sand-200)); font-size: 13px; margin: 12px auto 0; max-width: 46ch; }
.al-absenden p b { color: rgb(var(--c-sand)); font-weight: 500; }
.al-fehler { color: rgb(var(--c-burgund-50)); font-size: 12px; margin-top: 6px; }
.al-ok { color: #6fbf8a; }
.al-fehlerkasten { background: rgb(var(--c-burgund) / .3); border: 1px solid rgb(var(--c-burgund)); color: rgb(var(--c-sand)); font-size: 14px; padding: 14px 16px; margin-bottom: 16px; }
.al-fehlerkasten ul { margin: 6px 0 0; padding-left: 18px; }

/* Zuschnitt-Dialog: dieselbe Fläche wie im Editor */
.al-cropper { height: min(92vh, 1000px); }

/* ---- Zeitleiste auf „Geschafft" und „Bestätigt" ------------------------ */
.al-zeitleiste { display: grid; }
.al-zeit { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 0 0 16px; position: relative; }
.al-zeit::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: -2px; width: 1px; background: rgb(var(--c-gold) / .35); }
.al-zeit:last-child::before { display: none; }
.al-zeit b { width: 24px; height: 24px; border-radius: 9999px; border: 1px solid rgb(var(--c-gold) / .35); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 400; color: rgb(var(--c-sand-200)); background: rgb(var(--c-noir)); z-index: 1; }
.al-zeit.ist-fertig b { background: rgb(var(--c-gold)); border-color: rgb(var(--c-gold)); color: rgb(var(--c-noir)); }
.al-zeit.ist-fertig b::before { content: "✓"; }
.al-zeit.ist-jetzt b { border-color: rgb(var(--c-gold)); color: rgb(var(--c-gold)); box-shadow: 0 0 0 4px rgb(var(--c-gold) / .12); }
.al-zeit span { font-size: 14px; color: rgb(var(--c-sand-200)); padding-top: 2px; }
.al-zeit.ist-fertig span, .al-zeit.ist-jetzt span { color: rgb(var(--c-sand)); }
.al-zeit small { display: block; color: rgb(var(--c-sand-200)); font-size: 12px; }
.al-zeit.ist-jetzt small { color: rgb(var(--c-gold)); }