/* dashboard.css — HWB-DASH-INNENLEBEN-01 (Design-Welle Handwerker-Dashboard + Anfrage-Strecke)
   Ergaenzt style.css (bewusst NICHT veraendert -- Arbeitsteilung mit dem parallelen
   Design-Agenten, der style.css sowie profile.html/SEO-Seiten besitzt) um Feinschliff fuer
   das Handwerker-Dashboard (templates/dashboard*.html) und die Verbraucher-Anfrage-Strecke
   (inquiry-form.html): konsistente Seiten-Koepfe, Fokus-Zustaende, Karten-Elevation im
   Ruhezustand, Prioritaets-Hierarchie "Heute wichtig" sowie das Schritt-Erlebnis der
   Anfrage-Strecke. Nutzt ausschliesslich bestehende Tokens aus style.css (:root /
   [data-theme="dark"]) -- keine neuen Farbwerte, kein neues Skeleton-/Empty-State-System
   (wiederverwendet .skeleton-card/.skeleton-title/.skeleton-text/.empty-state, siehe
   SEARCH_BEFORE_BUILD). Bewegungsreduktion ist bereits global in style.css geregelt
   (prefers-reduced-motion, Zeile ~88) -- neue Transitionen hier erben das automatisch.
   Eingebunden per eigenem <link>-Tag NACH fragments/layout::head (gleiches Muster wie
   listings-map.html mit der Leaflet-MarkerCluster-CSS), damit style.css unangetastet bleibt. */

/* === Seiten-Kopf: konsistente Kopfzeile fuer die Dashboard-Unterseiten, die bisher
   keinen oder einen abweichenden Titel-Block hatten (Anfragen/Angebote/Bewertungen/
   Statistiken/Premium). Seiten mit bereits gutem eigenen Kopf (Ausschreibungen/Radar-
   Alarme/Profil) behalten ihre bestehende .dashboard-section-header-Struktur. */
.dash-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.dash-page-head-text h2 {
    font-size: var(--text-h2);
    margin: 0 0 4px;
}
.dash-page-head-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
    max-width: 56ch;
}
.dash-page-head-action { flex-shrink: 0; }

/* === Eyebrow-Label fuer Prioritaets-/Abschnitts-Hierarchie ("Heute wichtig" oben,
   "Auf einen Blick" fuer die Kennzahlen darunter) -- macht die Reihenfolge auf einen
   Blick lesbar statt sie nur durch DOM-Position zu implizieren. */
.dash-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.dash-eyebrow--accent { color: var(--primary-text); }
.dash-eyebrow .dash-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.dash-priority-zone { margin-bottom: var(--space-6); }
.dash-secondary-zone { margin-bottom: var(--space-5); }

/* === Karten-Elevation: dezenter Ruhezustand statt komplett flach bis zum Hover,
   gleiche Schatten-Tokens wie ueberall im Projekt (--shadow-sm/--shadow-hover). === */
.stat-card, .inquiry-card, .quote-card, .review-card {
    box-shadow: var(--shadow-sm);
}

/* === Fokus-Zustaende: Tastatur-Bedienbarkeit fuer klickbare Karten/Tabs, die bislang
   nur eine Hover-, aber keine sichtbare Fokus-Kontur hatten. */
.inquiry-card:focus-visible,
.quote-card:focus-visible,
.review-card:focus-visible,
.stat-card:focus-visible,
.dash-notif-bell:focus-visible,
.dashboard-tabs a:focus-visible,
.bookmark-tab:focus-visible,
.trade-card:focus-visible,
.target-card:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-btn);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* === Leerzustaende: konstruktive Handlungszeile (ergaenzt .empty-state aus style.css
   um einen konsistenten CTA-Abstand, wiederverwendet .empty-state-cta). === */
.empty-state .dash-empty-cta { margin-top: var(--space-4); }

/* === Anfrage-Strecke (inquiry-form.html): Schritt-Erlebnis === */
.step-progress-label {
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-muted); /* ink-subtle fiel im Axe-Scan durch (Kontrast < 4,5:1) */
    margin: -30px 0 26px;
}
.doi-hint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    font-size: 0.85rem;
    color: var(--ink-muted);
    line-height: 1.55;
    margin-top: 24px;
}
.doi-hint strong { color: var(--ink); }
.doi-hint svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--primary-text); }

/* Formular-Schritt: dezenter Fade/Slide beim Wechsel statt hartem Umschalten. Respektiert
   automatisch prefers-reduced-motion (globale Regel in style.css setzt transition-duration
   auf 0.01ms). */
.form-step {
    animation: dashStepIn 0.28s var(--ease-out, ease-out);
}
@keyframes dashStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .dash-page-head { align-items: flex-start; }
}