/* === Handwerksbörse Design System === */
:root {
    --primary: #FF8C42;
    --primary-hover: #E87A35;
    /* AA-Kontrast-Token (WCAG 2.2 / BFSG): --primary bleibt der Marken-Akzent (Flaechen/
       Buttons/Icons/Rahmen). Fuer TEXT auf hellem Grund reicht #FF8C42 nur 2,3:1 -- diese
       zwei Tokens loesen das ohne das Orange selbst zu verwaessern:
       --primary-text = abgedunkelter Orange-Ton fuer Orange-Text auf hellem Grund (>=4,5:1)
       --on-primary   = fixer dunkler Text-Ton auf orangen Flaechen (Buttons/Badges),
                         themenunabhaengig, weil Orange in beiden Themes hell genug bleibt. */
    --primary-text: #B85310;
    --on-primary: #0F172A;
    --ink: #0F172A;
    --ink-light: #475569;
    --ink-muted: #64748B;
    --ink-subtle: #94A3B8;
    --success: #10B981;
    --warning: #F59E0B;
    /* Text-Toene fuer Rating/Verifiziert: WCAG-AA (>=4,5:1) auf hellem Grund.
       --warning/--success sind als Flaechenfarben zu hell fuer Text auf Weiss. */
    --rating-text: #B45309;   /* Amber-700 auf Weiss ~4,7:1 */
    --verified-text: #047857; /* Green-700 auf #ECFDF5 ~5,2:1 */
    --error: #EF4444;
    --info: #38BDF8;
    --bg: #F8FAFC;
    --bg-card: #FFFFFF;
    --border: #E2E8F0;
    --border-subtle: #F1F5F9;
    --radius-card: 14px;
    --radius-btn: 10px;
    /* Elevation-System (HWB-D1): 3 Stufen, mehrschichtig statt ein harter Schatten --
       ein enger "contact"-Layer fuer Kanten-Schaerfe + ein weicher "ambient"-Layer fuer
       Tiefe. Selektoren/Namen bleiben unveraendert (rueckwaertskompatibel), nur die Werte
       wurden verfeinert. Dark-Mode-Werte unten ersetzen die weichen Schwarz-Schatten durch
       helle Border-Overlays (Schatten wirken auf dunklem Grund sonst schmutzig). */
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
    --shadow-md: 0 1px 2px rgba(15,23,42,0.04), 0 8px 16px -4px rgba(15,23,42,0.08);
    --shadow-hover: 0 2px 4px rgba(15,23,42,0.05), 0 16px 32px -8px rgba(15,23,42,0.12);
    --font-ui: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Dritte Flaechen-Stufe (ueber --bg-card): Overlays/Popovers/hervorgehobene
       Bereiche INNERHALB einer Karte (z.B. Tipp-Box im Empty-State). */
    --bg-elevated: #F1F5F9;
    /* HWB-D3-Fund: mehrere Dashboard-/Tender-Templates referenzierten dieses Token bereits
       (dashboard.html Profil-Vervollstaendigung, dashboard-quote-create.html Summenbox,
       tender-detail.html), es war aber nie definiert -- die Flaeche blieb transparent statt
       abgesetzt. Alias auf die bestehende dritte Flaechen-Stufe, kein neuer Farbwert. */
    --surface-secondary: var(--bg-elevated);

    /* === Typo-Skala (HWB-D1): konsistente clamp()-Stufen statt Ad-hoc-rem-Werte.
       Bestehende feste font-size-Deklarationen werden gezielt darauf umgestellt (siehe
       .hero h1 / section h2 / .path-card-title etc.), neue/ungestylte h1-h4 erben sie
       ueber die generische Basisregel weiter unten. === */
    --text-h1: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem);
    --text-h2: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
    --text-h3: clamp(1.02rem, 0.97rem + 0.2vw, 1.15rem);
    --text-h4: clamp(0.95rem, 0.92rem + 0.1vw, 1.05rem);
    --text-lead: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
    --text-small: 0.85rem;

    /* === Spacing-Rhythmus: 4/8er-Raster === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* === Motion-Tokens: Google-Material-3-Bereich (150-250ms), Standard-Easing fuer
       kombinierte Enter/Exit-Bewegung, dediziertes Ease-out fuer Hover-Feedback. === */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-hover: 180ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Respektiert die Systemeinstellung "Bewegung reduzieren" GLOBAL -- betrifft alle
   Transitions/Animationen im Stylesheet (Karten-Hover, Count-up, Fade-in, Pulse-CTA etc.),
   ohne dass jede Regel einzeln dupliziert werden muss. Elemente landen weiterhin im
   Endzustand (nur ohne wahrnehmbare Bewegung). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Typo-Skala: Basis fuer h1-h4 (HWB-D1) ===
   text-wrap: balance verhindert haessliche Ein-Wort-Zeilen bei umbrechenden Ueberschriften;
   dezent negatives letter-spacing auf grossen Graden wirkt praeziser/"teurer" (Apple-Musning).
   Bestehende spezifischere Selektoren (.hero h1, section h2, ...) ueberschreiben nur
   font-size gezielt und erben Weight/Balance/Letter-Spacing von hier weiter. */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--text-h3); letter-spacing: -0.005em; }
h4 { font-size: var(--text-h4); }

/* Zahlen (Preise, Zaehler, Stats, Distanzen) bekommen feste Ziffernbreite -- verhindert
   "Wackeln" bei Count-up-Animationen und sich aendernden Werten (Google-Material-Konvention). */
.hero-count-up, .count-up, .num-strong, .rating-num, .distance, .radius-row__value,
.stat-card-value, .pricing-card-price, .average-rating-number, .quote-card-price,
.lead-fee .amount, .tender-city-chip__count, .hb-map-count strong, .hb-citycard__count,
.hb-card__meta .distance, .trust-intro .num-strong {
    font-variant-numeric: tabular-nums;
}

/* Nur fuer Screenreader sichtbar (z.B. struktureller <h1> in mehrstufigen Formularen,
   wo visuell kein Platz/Bedarf fuer eine sichtbare Ueberschrift besteht). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }

a { color: var(--ink); text-decoration: none; }

/* === Navbar === */
/* Blur-Backdrop (Apple/Material-Praezision): halbtransparenter Grund + Weichzeichner
   statt eines flachen Vollfarb-Balkens -- wirkt "teurer", bleibt aber in beiden Themes
   ueber feste, ausreichend deckende Alpha-Werte lesbar (kein reines Glassmorphism-Risiko
   fuer Kontrast, da darunter liegender Seiteninhalt kaum je helle/dunkle Extreme direkt
   unter der Navbar hat -- die Deckkraft ist bewusst hoch (~0.88) gewaehlt). */
.navbar {
    background: rgba(255,255,255,0.88);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Betreiber-Befund 2026-08-26: Logo klebte ohne Abstand am ersten Nav-Link (der zentrierte
   nav-links-Block beginnt bei breiten Menues direkt am Logo-Ende) — Mindestabstand per gap. */
.navbar-inner { display: flex; align-items: center; justify-content: space-between; position: relative; gap: var(--space-7); }
.logo { font-size: 1.4rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; letter-spacing: -0.01em; }
.logo span { color: var(--primary-text); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-light); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
/* Dezente Hover-/Fokus-Unterstreichung fuer die Text-Links (Desktop) -- klareres
   Interaktionsfeedback ohne eine (falsche) "aktuelle Seite" zu behaupten, die ohne
   Request-URL-Kontext im wiederverwendeten Fragment nicht zuverlaessig ermittelbar ist. */
@media (min-width: 861px) {
    .nav-links a:not(.btn) { position: relative; padding-bottom: 2px; }
    .nav-links a:not(.btn)::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
        height: 2px; border-radius: 2px; background: var(--primary);
        transform: scaleX(0); transform-origin: left;
        transition: transform var(--dur-fast) var(--ease-out);
    }
    .nav-links a:not(.btn):hover::after,
    .nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }
}
/* E2E-Bugliste 2026-08-01 (Bug 5): ".nav-links a" (Klasse+Element, Spezifitaet 0-1-1) hat
   hoehere Spezifitaet als ".btn-primary"/".btn-outline" (je nur eine Klasse, 0-1-0) und
   gewann daher IMMER, unabhaengig von der Regel-Reihenfolge -- der "Anfrage stellen"-Button
   in der Navbar bekam dadurch --ink-light (#475569) als Textfarbe statt --on-primary
   (#0F172A), was auf dem orangen --primary-Hintergrund WCAG-AA (4,5:1) klar verfehlt
   (~3,3:1). Diese Regeln haben Spezifitaet 0-2-1 (zwei Klassen + Element) und gewinnen
   sowohl gegen ".nav-links a" als auch (per Position NACH ".nav-links a:hover") gegen
   ".nav-links a:hover". */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--on-primary); }
.nav-links a.btn-outline,
.nav-links a.btn-outline:hover { color: var(--ink); }
/* Theme-Toggle-Label ist auf Desktop unsichtbar (icon-only, HWB-A11Y-01) -- die
   @media(max-width:860px)-Regel weiter unten schaltet es im mobilen Menue wieder ein
   (dort ist Platz). Muss VOR dieser Media-Query im Stylesheet stehen, sonst gewinnt sie
   auf schmalen Viewports faelschlich ueber die Mobile-Regel (gleiche Spezifitaet, spaetere
   Regel gewinnt). */
.theme-toggle span { display: none; }

/* === Mobile Nav Toggle (Burger) === */
.nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-btn);
    color: var(--ink); cursor: pointer; flex-shrink: 0; z-index: 1201;
}
.nav-toggle-icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close { display: block; }
.nav-backdrop {
    display: none; position: fixed; inset: 0; top: var(--navbar-h, 65px);
    background: rgba(15,23,42,0.35); z-index: 999; opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-backdrop.open { display: block; opacity: 1; }

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .theme-toggle span { display: inline; margin-left: 10px; font-size: 0.92rem; font-weight: 500; color: var(--ink-light); }
    .nav-links {
        position: fixed;
        top: var(--navbar-h, 65px);
        left: 0; right: 0;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 16px 32px rgba(15,23,42,0.16);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 20px 22px;
        max-height: calc(100vh - var(--navbar-h, 65px));
        overflow-y: auto;
        z-index: 1000;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
    /* Best-in-class Mobile-Menue (HWB-NAV-MOBILE 2026-08-03): saubere, linksbuendige
       Link-Liste mit dezenten Hover-Flaechen statt schwerer Trennlinien; die
       Aktions-Buttons per order als gruppierter Bereich ganz unten (DOM bleibt fuer
       das horizontale Desktop-Menue unveraendert). */
    .nav-links a {
        order: 1;
        width: 100%; min-height: 46px;
        display: flex; align-items: center; justify-content: flex-start;
        padding: 11px 12px; border-radius: 10px; font-size: 1rem;
    }
    .nav-links a:not(.btn):hover,
    .nav-links a:not(.btn):focus-visible { background: var(--border-subtle); color: var(--ink); }
    /* Aktions-Buttons: zentriert, full-width, gruppiert unten */
    .nav-links a.btn {
        justify-content: center; width: 100%; margin: 0;
        border-radius: var(--radius-btn); font-size: 1rem;
    }
    .nav-links a.btn-outline { order: 2; margin-top: 16px; }
    .nav-links a.btn-primary { order: 3; margin-top: 10px; }
    /* Theme-Umschalter dezent ganz unten, mit feiner Trennlinie abgesetzt */
    .nav-links button.theme-toggle {
        order: 4; margin-top: 16px; padding: 14px 12px 4px;
        border-top: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: flex-start;
        min-height: 44px; color: var(--ink-muted); font-size: 0.92rem;
    }
}
body.nav-scroll-lock { overflow: hidden; }

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 24px; border-radius: var(--radius-btn);
    font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
    border: none; cursor: pointer;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), background var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Active/Press-Zustand (Material-State-Layer-Prinzip): kurzer 1px-Absenk statt des
   Hover-Lifts, minimale Verzoegerung fuer sofortiges taktiles Feedback beim Klick. */
.btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 60ms; }
.btn:disabled, .btn[disabled] {
    opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; filter: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
/* color: var(--bg) statt hartem white -- --ink/--bg flippen gegenlaeufig, so hat der
   Button in BEIDEN Themes lesbaren Kontrast (Light: dunkler Button/heller Text;
   Dark: heller Button/dunkler Text). Hartes white wurde im Dark Mode unsichtbar. */
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { filter: brightness(1.12); }
.btn-outline {
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--border);
}
/* Dezenter State-Layer (Material 3) statt einer reinen Rahmenfarb-Aenderung --
   fuehlt sich wie eine echte Flaechen-Reaktion an, bleibt aber sehr zurueckhaltend. */
.btn-outline:hover { border-color: var(--ink); background: rgba(15,23,42,0.04); }
[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,0.06); }
.btn-lg { padding: 14px 32px; font-size: 1rem; }

/* === Hero === */
.hero {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: white; padding: var(--space-9) 0; text-align: center;
    position: relative; overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; top: -55%; right: -30%;
    width: 600px; height: 600px; pointer-events: none;
    background: radial-gradient(circle, rgba(255,140,66,0.10) 0%, transparent 65%);
    border-radius: 50%;
}
.hero h1 {
    font-size: var(--text-h1); font-weight: 800; margin-bottom: var(--space-3); position: relative; z-index: 1;
    text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.hero h1 span { color: var(--primary); }
/* Fixed light color independent of theme variables — hero background is always dark,
   regardless of light/dark mode, so contrast must not depend on --ink-subtle. */
.hero p { color: rgba(255,255,255,0.82); font-size: var(--text-lead); margin-bottom: var(--space-6); position: relative; z-index: 1; }

/* Secondary "Anfrage stellen" link below the search card — own z-index +
   generous clearance so the card's box-shadow never visually clips it.
   E2E-Bugliste 2026-08-01 (Bug 4, Verteidigung in der Tiefe): display:
   inline-block statt block, damit die Klickflaeche dem sichtbaren Link-Text
   entspricht (zentriert ueber das text-align:center von .hero) statt der
   vollen Zeilenbreite -- selbst wenn kuenftig wieder ein Stacking-Context-
   Konflikt entstuende, kann dieser Block dann nicht mehr die komplette Zeile
   fuer Klicks beanspruchen. */
.hero-secondary-cta { margin-top: 24px; position: relative; z-index: 2; display: inline-block; }
.hero-secondary-cta a { color: rgba(255,255,255,0.75); font-size: 0.9rem; text-decoration: underline; }
.hero-secondary-cta a:hover { color: #fff; }

/* === Search Bar === */
/* E2E-Bugliste 2026-08-01 (Bug 4): KEIN eigener z-index hier (mehr). Ein
   z-index auf .search-bar erzeugt einen eigenen Stacking-Context, in dem
   der hoehere z-index von .hero-suggestions (s.u., z-index: 50) gefangen
   bleibt -- er kann dann NIE ueber .hero-secondary-cta (z-index: 2) hinaus
   rendern, egal wie hoch sein eigener Wert ist ("Stacking-Context-Falle").
   Das machte die geoeffnete Gewerk-/Orts-Vorschlagsliste in der unteren
   Haelfte unklickbar, weil der volle .hero-secondary-cta-Link-Block dort
   alle Pointer-Events abfing. Ohne eigenen z-index hier steigt
   .hero-suggestions direkt in den Stacking-Context von .hero auf und
   gewinnt dort gegen .hero-secondary-cta (50 > 2) -- der Box-Shadow bleibt
   trotzdem unter der CTA (position:relative ohne z-index verhaelt sich wie
   z-index:0 gegenueber deren z-index:2), das urspruengliche Shadow-Clipping-
   Problem (siehe Kommentar bei .hero-secondary-cta) bleibt also ebenfalls
   behoben. */
.search-bar {
    display: flex; gap: 8px; max-width: 700px; margin: 0 auto;
    background: white; border-radius: 14px; padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); position: relative;
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
/* Klarer Fokus-Glow auf dem Haupt-Suchobjekt der Startseite (Apple-HIG: das wichtigste
   interaktive Element bekommt das deutlichste Feedback) -- zusaetzlich zum generischen
   Input-Fokusring, weil hier die GANZE Suchkarte das Ziel-Objekt ist, nicht nur ein Feld. */
.search-bar:focus-within { box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,140,66,0.35); }
[data-theme="dark"] .search-bar:focus-within { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,157,92,0.4); }
.search-bar input {
    flex: 1; border: none; padding: 14px 18px;
    font-family: var(--font-ui); font-size: 1rem;
    outline: none; background: transparent; min-width: 0;
}
.search-bar .btn { flex-shrink: 0; }

/* Hero "Was/Wo"-Felder (HWB-HERO-GEWERK-01 + HWB-HERO-ORT-01): eigener Wrapper pro
   Feld mit dezentem Label darueber (Apple-HIG-Klarheit: zwei eindeutige Felder statt
   Freitext-Wand), damit die Vorschlagsliste relativ dazu positioniert werden kann. */
.hero-search-field {
    position: relative; flex: 1; min-width: 0;
    display: flex; flex-direction: column; text-align: left;
}
.hero-search-field + .hero-search-field { border-left: 1px solid var(--border-subtle); }
.hero-field-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-muted); padding: 8px 16px 0; user-select: none;
}
.hero-search-field input { width: 100%; }
.search-bar .hero-search-field input { padding: 2px 16px 12px; }
/* Platz fuer den eingebetteten "In meiner Naehe"-Button im Ort-Feld. */
.hero-search-field--city input { padding-right: 46px; }
.hero-locate-btn {
    position: absolute; right: 4px; bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; border: none;
    background: transparent; color: var(--ink-muted);
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.hero-locate-btn svg { width: 19px; height: 19px; }
.hero-locate-btn:hover { background: var(--bg); color: var(--primary-text); }
.hero-locate-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hero-locate-btn[aria-busy="true"] { opacity: 0.6; cursor: wait; }
.hero-locate-status {
    max-width: 700px; margin: 10px auto 0; font-size: 0.82rem;
    color: rgba(255,255,255,0.8); text-align: center; position: relative; z-index: 1;
}
.hero-locate-status:empty { display: none; }
.hero-suggestions {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-btn);
    box-shadow: var(--shadow-md); z-index: 50; list-style: none; margin: 0; padding: 6px;
    max-height: 260px; overflow-y: auto; text-align: left;
}
.hero-suggestions li {
    padding: 10px 14px; border-radius: 8px; cursor: pointer;
    font-size: 0.92rem; color: var(--ink); line-height: 1.3;
}
.hero-suggestions li:hover, .hero-suggestions li.active { background: var(--bg); }
[data-theme="dark"] .hero-suggestions { background: #1E293B; }

/* === Drei-Wege-Weiche: "Was moechten Sie tun?" (HWB-A6) ===
   Startseiten-Segmentierung fuer die drei Zielgruppen (Verbraucher/Betriebe/
   Behoerden). Sitzt direkt unter dem Hero, verdraengt aber NICHT die Hero-Suche
   -- diese bleibt der vorausgewaehlte Default-Pfad (Karte "Handwerker finden"
   markiert das nur, statt eine zweite Suche zu duplizieren). */
.path-switch-section { padding: var(--space-6) 0 var(--space-7); }
.path-switch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5); margin-top: var(--space-5);
}
.path-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--space-5) var(--space-5);
    display: flex; flex-direction: column; align-items: flex-start;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.path-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* Betreiber-Befund 2026-08-26: CTAs der drei Karten auf eine Grundlinie bringen —
   der Button sitzt immer unten, egal wie lang der Kartentext ist. */
.path-card .path-card-cta, .path-card .btn { margin-top: auto; }
.path-card-desc { margin-bottom: var(--space-4); }
/* Verbraucher-Karte bleibt visuell der Hauptpfad -- fixer Markenrahmen statt
   eines Farbtons, der im Dark Mode kippen koennte (--primary ist in beiden
   Themes definiert, siehe :root/[data-theme="dark"]). */
.path-card--active { border: 2px solid var(--primary); box-shadow: var(--shadow-md); }
.path-card-badge {
    display: inline-block; background: var(--primary); color: var(--on-primary);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
}
.path-card-icon {
    width: 44px; height: 44px; border-radius: 12px; background: rgba(255,140,66,0.12);
    display: flex; align-items: center; justify-content: center; color: var(--primary-text);
    margin-bottom: 14px;
    transition: transform var(--dur-hover) var(--ease-out);
}
.path-card-icon svg { width: 22px; height: 22px; }
.path-card:hover .path-card-icon { transform: scale(1.08) rotate(-2deg); }
.path-card-title { font-size: var(--text-h3); margin-bottom: 6px; }
.path-card-desc { color: var(--ink-muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 18px; flex-grow: 1; }
.path-card-cta { align-self: flex-start; }
.path-card-sub { font-size: 0.8rem; color: var(--ink-muted); margin-top: 14px; }
.path-card-sub a { font-weight: 600; color: var(--primary-text); }
.path-card-sub a:hover { text-decoration: underline; }

/* === Trade Cards === */
.trades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; margin-top: 48px;
}
.trade-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 20px 16px;
    text-align: center; cursor: pointer;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.trade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.trade-card .trade-name { font-size: 0.85rem; font-weight: 600; margin-top: 8px; }

/* === Trust-Strip (Startseite, HWB-D1) ===
   Ersetzt den vorherigen Wall-of-inline-styles-Block durch benannte Klassen -- gleiche
   Icon-Groesse (20px-Box statt variabler SVG-Attribute), einheitlicher Abstand ueber
   Spacing-Tokens statt hartcodierter 32px/8px. */
.trust-section { padding: var(--space-6) 0; }
.trust-intro { color: var(--ink-muted); font-size: var(--text-small); margin-bottom: var(--space-4); }
.trust-row { display: flex; justify-content: center; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--ink-light); }
.trust-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }

/* Wiederverwendbare Inline-Zahl (ersetzt wiederholte font-family/font-weight-Inline-Styles
   an Live-Zaehlern wie totalListings/openTendersCount). tabular-nums kommt aus der
   gemeinsamen Regel weiter oben. */
.num-strong { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* === Search Results === */
.search-layout {
    /* minmax(0, 1fr) statt 1fr: verhindert, dass die Leaflet-Karte (min-content der
       Kachel-Ebene) die Grid-Spalte ins Unendliche aufblaeht -> vorher lief die
       Ergebnis-Spalte auf ~59000px, die Seite hatte massiven Horizontal-Overflow
       (HWB-SUCHE-LAYOUT 2026-08-03). */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px; margin-top: 24px;
    align-items: start;
}
.results-list { display: flex; flex-direction: column; gap: 12px; }
.result-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 14px 18px;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
    display: flex; align-items: center; gap: 16px;
}
.result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.result-card.premium { border-color: var(--primary); border-width: 1.5px; }
.result-card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 3px; }
/* Best-in-class Ergebniskarte: kompakt-horizontal -- Inhalt links (flexibel,
   min-width:0 gegen Overflow), Aktionen rechts, vertikal zentriert. */
.result-card-link { flex: 1 1 auto; min-width: 0; display: block; color: inherit; text-decoration: none; }
.result-card-actions {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: center; margin: 0;
}
.result-card-actions .btn { padding: 7px 16px; font-size: 0.85rem; white-space: nowrap; }
/* Mobile: Aktionen unter den Inhalt stapeln, volle Breite */
@media (max-width: 560px) {
    .result-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .result-card-actions .btn { flex: 1; }
}
.result-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--ink-muted); margin-top: 6px; }
.result-meta span + span::before { content: "·"; margin-right: 6px; color: var(--border); }
.result-meta span { display: flex; align-items: center; gap: 4px; }

/* === Stars === */
.stars { color: var(--rating-text); font-family: var(--font-mono); font-weight: 600; }
.rating-num { font-family: var(--font-mono); font-weight: 600; }
.distance { font-family: var(--font-mono); }

/* === Badges === */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600;
}
.badge-trade { background: var(--border-subtle); color: var(--ink-light); }
.badge-verified { background: #ECFDF5; color: var(--verified-text); }
.badge-premium { background: #FFF7ED; color: var(--primary-text); }

/* === /suche Ergebnis-Karten (Design-Elevation HWB-SUCHE-DESIGN-01, 2026-09-01) ===
   Eigene Klassen (.search-result-card*) statt einer Ueberarbeitung von .result-card:
   .result-card/.result-meta/.results-count/.search-layout/.results-list werden auch von
   profile.html, seo-city.html, seo-landing.html, seo-trade.html und listings-map.html
   genutzt (Search-before-Build-Pruefung 2026-09-01) -- die liegen ausserhalb dieses
   Auftrags und duerfen nicht mitveraendert werden. .badge/.badge-trade/.badge-verified/
   .badge-premium/.result-meta/.stars/.rating-num/.distance bleiben unveraendert und
   werden hier nur wiederverwendet (Konsistenz statt Neuerfindung). */
.search-result-card {
    position: relative;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
    display: flex; align-items: center; gap: var(--space-4);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.search-result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.search-result-card--premium { border-color: var(--primary); border-width: 1.5px; }
/* Pin<->Karte-Sync (siehe search.html-Script): dezenter Ring statt Farbwechsel, damit
   er sich nicht mit dem "Anzeige"-Rahmen (--premium) beisst. */
.search-result-card--pin-active { box-shadow: 0 0 0 2px var(--primary), var(--shadow-hover); transform: translateY(-2px); }

/* "Stretched Link": die ganze Karte fuehrt zum Profil (Von-Restorff -- ein klares
   primaeres Ziel), ohne verschachtelte <a>-Tags. Der sichtbare Sekundaer-CTA
   (.search-result-card__cta) sitzt mit hoeherem z-index darueber und bleibt
   unabhaengig fokussierbar/klickbar. */
.search-result-card__stretched-link {
    position: absolute; inset: 0; z-index: 1; border-radius: inherit; outline: none;
}
.search-result-card__stretched-link:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

.search-result-card__body { flex: 1 1 auto; min-width: 0; }
.search-result-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.search-result-card__main { min-width: 0; }
.search-result-card__title { font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; }
/* position:relative + z-index:2 (wie .search-result-card__actions): ohne das faengt der
   darunterliegende Stretched-Link (z-index:1) den Mauszeiger ab, bevor er die Badges
   erreicht -- deren title-Tooltip ("Der Betrieb hat seine Inhaberschaft bestaetigt." /
   "Bezahlte Top-Platzierung...") waere sonst per Hover nie erreichbar (Selbstkritik-Fund
   HWB-SUCHE-DESIGN-01, per Chrome-DevTools elementFromPoint() verifiziert). Die sichtbare
   Kennzeichnung bleibt in JEDEM Fall Text, nicht nur Tooltip (§ 5b UWG-Pflicht bleibt
   erfuellt) -- ein Klick exakt auf einen Badge navigiert dafuer nicht mehr zum Profil,
   das ist der bewusste, minimale Trade-off. */
.search-result-card__badges { position: relative; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.search-result-card__badges .badge-verified svg { width: 13px; height: 13px; }
.search-result-card__rating { flex-shrink: 0; white-space: nowrap; }
.search-result-card__rating-count { font-size: 0.75rem; color: var(--ink-muted); font-weight: 400; }
.search-result-card__meta { margin-top: 6px; }

.search-result-card__actions { position: relative; z-index: 2; flex: 0 0 auto; }
/* Ruhiger Sekundaer-Stil (Betreiber-Vorgabe): der CTA faellt normal NICHT auf --
   er hebt sich erst orange hervor, wenn die ganze Karte Aufmerksamkeit bekommt
   (Hover ODER Tastatur-Fokus irgendwo in der Karte), sonst konkurriert er mit dem
   primaeren Kartenklick zum Profil. */
.search-result-card__cta {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border-radius: var(--radius-btn); font-size: 0.85rem; font-weight: 600;
    color: var(--ink-light); background: transparent; border: 1.5px solid var(--border);
    white-space: nowrap;
    transition: color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.search-result-card:hover .search-result-card__cta,
.search-result-card:focus-within .search-result-card__cta {
    color: var(--on-primary); background: var(--primary); border-color: var(--primary);
}
.search-result-card__cta:hover,
.search-result-card__cta:focus-visible {
    background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary);
    outline: none;
}
.search-result-card__cta:focus-visible { box-shadow: 0 0 0 3px rgba(255,140,66,0.3); }

/* Touch-Geraete kennen kein Hover -- der CTA muss von Anfang an lesbar sein, bleibt
   aber ein kompakter Text-Button statt einer grossen Flaeche (Betreiber-Vorgabe). */
@media (hover: none) {
    .search-result-card__cta {
        padding: 6px 2px; border: none; background: transparent; color: var(--primary-text);
        text-decoration: underline; text-underline-offset: 2px;
    }
}

@media (max-width: 560px) {
    .search-result-card { flex-direction: column; align-items: stretch; gap: 10px; padding: var(--space-4); }
    .search-result-card__actions { display: flex; justify-content: flex-end; }
}

/* Kartenpin-Hervorhebung bei Karten-Hover/-Fokus bzw. umgekehrt (siehe search.html-
   Script) -- Transform statt Farb-/Box-Shadow-Ueberschreibung, damit die per Inline-
   Style gesetzte Marker-Optik unangetastet bleibt und der globale prefers-reduced-
   motion-Block (siehe Zeile 88) automatisch greift. */
.custom-marker.marker-highlighted > div {
    transform: scale(1.5);
    transition: transform var(--dur-hover) var(--ease-out);
}

/* === Suchergebnis-Skeletons (waehrend Formular-Submit, siehe search.html-Script) ===
   Rein optisch -- die Suche bleibt eine normale serverseitige Formular-Navigation. */
.search-results-skeleton { display: none; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.search-result-skeleton-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
}
.search-result-skeleton-card__lines { max-width: 320px; }
.results-list.is-loading { position: relative; }
.results-list.is-loading .search-results-skeleton { display: flex; }
.results-list.is-loading > .search-result-card,
.results-list.is-loading > .empty-state,
.results-list.is-loading > .pagination,
.results-list.is-loading > p {
    display: none;
}

/* === Ergebnis-Zaehler prominenter (Vertrauens-Signal, Betreiber-Vorgabe) === */
.results-count--prominent strong { font-size: 1.05rem; font-weight: 700; }

/* === Leerzustand: konstruktive Aktionen (Nielsen #9 -- nie nur "0 Treffer") ===
   Wiederverwendet .empty-state-Basis + .btn-outline, keine neuen Farb-/Radius-Werte. */
.empty-state-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* === Ausschreibungs-Radar-Uebersicht (/ausschreibungen, HWB-TENDER-UEBERSICHT-01) === */
.tender-index-search { margin-bottom: 20px; }
.tender-index-search input {
    width: 100%; max-width: 440px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-btn);
    background: var(--bg-card); color: var(--ink);
    font-family: var(--font-ui); font-size: 0.95rem;
}
.tender-index-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* HWB-TENDER-HERO-01: Gewerk-Uebersicht als scanbare Karten-Grid statt flacher Liste --
   Icon + grosse tabular-nums-Zahl pro Karte (Refactoring-UI: Hierarchie durch Groesse/
   Gewicht statt Linien). Das bestehende <details>/<summary>-Aufklapp-Verhalten bleibt
   unveraendert, nur der Kopf jeder Karte ist jetzt ein echtes Kaertchen. */
.tender-index-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
    align-items: start;
}
.tender-index-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    transition: transform 0.15s, box-shadow 0.15s;
}
.tender-index-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tender-index-card summary {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 1rem; color: var(--ink);
}
.tender-index-card summary::-webkit-details-marker { display: none; }
.tender-index-card summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-btn); }
.tender-index-card__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tender-index-card__trade { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.tender-index-card__count-line {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 0.78rem; font-weight: 500; color: var(--ink-muted);
}
.tender-index-card__count-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.tender-index-card summary::after {
    content: '+'; color: var(--ink-muted); font-weight: 400; font-size: 1.15rem; line-height: 1; margin-left: auto;
}
.tender-index-card[open] summary::after { content: '\2212'; }
.tender-index-card__cities {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 2px 20px 18px;
}
.tender-city-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; color: var(--ink-light); font-size: 0.85rem;
    text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.tender-city-chip:hover, .tender-city-chip:focus-visible {
    transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--ink);
}
.tender-city-chip__count {
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted);
    background: var(--bg-card); border-radius: 999px; padding: 1px 7px;
}

@media (max-width: 640px) {
    .tender-index-card summary { padding: 14px 16px; }
    .tender-index-card__cities { padding: 2px 16px 16px; }
    .tender-index-search input { max-width: 100%; }
}

/* === Ausschreibungs-Radar-Hero (/ausschreibungen, HWB-TENDER-HERO-01) ===
   Erweitert die bestehende .hero-Basis (dunkler Verlauf + radialer Orange-Glow, siehe
   home.html) um eine Zwei-Spalten-Anordnung mit echten Ausschreibungs-Karten als Produkt-
   Visual (WOW-Landingpage-Playbook: "das Produkt sichtbar machen"). .hero ist immer dunkel,
   unabhaengig vom Light-/Dark-Mode-Toggle -- deshalb feste (nicht theme-wechselnde) Farben
   fuer alles, was IN der Hero-Karte sitzt, exakt wie beim bestehenden .search-bar-Muster
   (immer weiss, egal welches Theme aktiv ist). */
.tender-hero { text-align: left; padding: var(--space-8) 0 var(--space-7); }
.tender-hero .container {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center;
}
.tender-hero__count {
    display: block; font-family: var(--font-mono);
    font-size: clamp(2.6rem, 1.9rem + 5.2vw, 5rem); font-weight: 800; color: var(--primary);
    line-height: 1; text-shadow: 0 2px 26px rgba(255,140,66,0.3);
}
/* .tender-hero .tender-hero__headline (statt nur .tender-hero__headline): braucht mehr
   Spezifitaet als das bestehende ".hero h1" (Klasse+Element = 0-1-1), sonst gewinnt dessen
   font-size/margin-bottom -- zwei Klassen (0-2-0) schlagen das zuverlaessig, unabhaengig
   von der Reihenfolge im Stylesheet. Gleiches gilt fuer .tender-hero__lead ggue. ".hero p". */
.tender-hero .tender-hero__headline {
    font-size: var(--text-h2); font-weight: 700; color: white; margin: 6px 0 var(--space-4);
    line-height: 1.3; position: relative; z-index: 1; text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.tender-hero .tender-hero__lead {
    color: rgba(255,255,255,0.82); font-size: var(--text-lead); max-width: 46ch;
    margin-bottom: 0; position: relative; z-index: 1;
}
.tender-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-5) 0; position: relative; z-index: 1; }
.tender-hero-stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.88); font-size: 0.82rem;
}
.tender-hero-stat strong { color: white; font-weight: 700; }
.tender-hero-stat--trust svg { width: 14px; height: 14px; flex-shrink: 0; }
.tender-hero-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; position: relative; z-index: 1; }
.tender-hero-ghost {
    color: rgba(255,255,255,0.78); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.tender-hero-ghost:hover { color: white; border-color: rgba(255,255,255,0.6); }

/* Produkt-Visual: gestapelte, leicht versetzte Karten -- reine CSS-Transforms, kein JS. */
.tender-hero-visual { position: relative; z-index: 1; }
.tender-hero-card {
    background: #FFFFFF; border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-card); padding: 16px 18px;
    box-shadow: 0 20px 44px -14px rgba(0,0,0,0.5);
    margin-bottom: 14px; transform: rotate(var(--tilt, 0deg));
}
.tender-hero-card:nth-child(2) { --tilt: 0.9deg; margin-left: 22px; }
.tender-hero-card:nth-child(3) { --tilt: -0.7deg; margin-left: 44px; }
.tender-hero-card:last-child { margin-bottom: 0; }
/* Selektor bewusst .tender-hero-Vorsatz: ".hero p" (Weiss + grosser Margin fuer den dunklen
   Hero) ist spezifischer als eine nackte Klasse und machte den Titel sonst unsichtbar
   (weiss auf weisser Karte — Live-Befund 2026-09-01). */
.tender-hero .tender-hero-card__title {
    font-size: 0.92rem; font-weight: 700; color: #0F172A; margin: 0 0 8px; line-height: 1.4;
}
.tender-hero-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tender-hero-card__city { font-size: 0.78rem; color: #64748B; }
/* Fixe Chip-Farben statt der theme-wechselnden .badge-trade-Tokens -- die Karte selbst ist
   immer hell (siehe Kommentar oben), var(--border-subtle)/var(--ink-light) wuerden im
   Dark-Mode auf Weiss unlesbar. */
.tender-hero-card .badge-trade { background: #F1F5F9; color: #475569; }
@media (prefers-reduced-motion: no-preference) {
    .tender-hero-card { transition: transform 0.2s var(--ease-out); }
    .tender-hero-card:hover { transform: rotate(0deg) translateY(-3px); }
}
@media (max-width: 900px) {
    .tender-hero .container { grid-template-columns: 1fr; }
    .tender-hero-visual { margin-top: var(--space-2); }
    .tender-hero-card:nth-child(2) { margin-left: 10px; }
    .tender-hero-card:nth-child(3) { margin-left: 20px; }
}
@media (max-width: 640px) {
    .tender-hero { padding: var(--space-7) 0 var(--space-6); }
    .tender-hero__count { font-size: clamp(2.2rem, 1.8rem + 8vw, 3.2rem); }
}

/* Risk-Reducer-Zeile ueber dem Funnel-Strip (Verkaufspsychologie-Playbook B1: Risk-Reversal
   kurz vor dem CTA). Gruener Haken statt Fliesstext-Warnhinweis. */
.tender-index-risk-reducer {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem; color: var(--ink-light); margin: 0 0 var(--space-3);
}

/* === Ausschreibungs-Karten + Kopf (HWB-A5.4 Design-Pass, Betreiber-Befund
   "visuell ist das ein Witz"): /ausschreibungen/{gewerk}/{stadt}. Content first --
   die Liste ist der Star, ein kompakter Kopf statt H1 + separatem Absatz. === */
.tender-page-head { padding: 32px 0 4px; }
.tender-page-head h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.tender-page-meta { color: var(--ink-muted); font-size: 0.9rem; margin: 0; }
.tender-page-meta .dot { margin: 0 6px; color: var(--border); }

/* Einmaliger Anmelde-Hinweis ueber der Liste statt in jeder einzelnen Karte
   wiederholt (vorher: "Melden Sie sich an ..." auf jeder Karte). Per JS ausgeblendet,
   sobald ein Token vorliegt (siehe Skript unten) -- bleibt fuer echte Anonyme stehen. */
.tender-auth-hint {
    display: block; padding: 10px 14px; margin: 18px 0 4px;
    background: var(--border-subtle); border-radius: var(--radius-btn);
    color: var(--ink-muted); font-size: 0.85rem;
}
.tender-auth-hint a { color: var(--primary-text); font-weight: 600; text-decoration: none; }
.tender-auth-hint a:hover { text-decoration: underline; }

.tender-list { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 32px; }

.tender-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 18px 20px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tender-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tender-card__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 3px; color: var(--ink); line-height: 1.35; }
.tender-card__buyer { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 12px; }
.tender-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tender-card__cpv { color: var(--ink-subtle); font-size: 0.78rem; }
.tender-card__actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.tender-card__bookmarks { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 560px) {
    .tender-card__bookmarks { margin-left: 0; width: 100%; }
    .tender-card__bookmarks .btn { flex: 1; }
}

/* Frist-Pill: gruen >14 Tage, amber <=14 Tage, rot <=3 Tage (TenderMatchService#fristPillTone).
   Bewusst fixe, in sich stimmige Hintergrund/Text-Paare statt theme-wechselnder Tokens fuer
   den Text -- dieselbe Konvention wie .badge-verified/.badge-premium oben: der Chip bleibt in
   JEDEM Theme hell, der Text ist fest dunkel genug fuer >=4,5:1 (kein Dark-Mode-Kontrast-Bug). */
.tender-frist-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.tender-frist-pill--green   { background: #ECFDF5; color: #047857; }
.tender-frist-pill--amber   { background: #FFF7ED; color: #B45309; }
.tender-frist-pill--red     { background: #FEF2F2; color: #B91C1C; }
.tender-frist-pill--neutral { background: var(--border-subtle); color: var(--ink-muted); }

/* === Funnel-CTA (claim-lookup-cta / radar-alert-cta Fragmente, HWB-A5.4 Design-Pass) ===
   Vorher zwei fette graue Bloecke mitten im Content. Jetzt: auf der Detailseite ("Content
   first") verdichtet und hinter die ersten 3 Karten (bzw. ans Ende bei kuerzeren Listen)
   verschoben statt vor die Liste -- die Ausschreibungen bleiben der erste Blickfang, der
   Registrier-Funnel bleibt trotzdem sichtbar praesent. Auf der Index-Seite (/ausschreibungen,
   dort SIND die Module der Zweck) bleiben sie an ihrem Platz oben, aber ueber dieselbe
   .funnel-cta-Klasse kompakter als vorher. */
.funnel-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
@media (max-width: 760px) {
    .funnel-strip { grid-template-columns: 1fr; }
}
.funnel-cta {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 24px 24px 20px;
    display: flex; align-items: flex-start; gap: 14px;
}
.funnel-cta__icon {
    width: 44px; height: 44px; border-radius: var(--radius-btn); flex-shrink: 0;
    background: rgba(255,140,66,0.12); color: var(--primary-text);
    display: flex; align-items: center; justify-content: center;
}
.funnel-cta__icon svg { width: 22px; height: 22px; }
.funnel-cta__body { flex: 1; min-width: 0; }
.funnel-cta__title { margin: 0 0 6px; font-size: 1.08rem; }
.funnel-cta__desc { margin: 0 0 16px; color: var(--ink-muted); font-size: 0.88rem; }
.funnel-cta__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.funnel-cta__field { display: flex; flex-direction: column; gap: 6px; }
.funnel-cta__field label { font-size: 0.8rem; font-weight: 500; }
.funnel-cta__input {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn);
    background: var(--bg-card); color: var(--ink);
    font-family: var(--font-ui); font-size: 0.88rem; min-width: 180px;
}
.funnel-cta__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.funnel-cta__hint { margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-muted); }
.funnel-cta__msg { margin: 12px 0 0; font-size: 0.85rem; font-weight: 500; }
.funnel-cta__results { margin-top: 14px; }
@media (max-width: 560px) {
    .funnel-cta { flex-direction: column; }
}

/* Kompakt-Modifier: weniger Padding/Text, gleiche Funktion -- fuer die Detailseite UND
   die (dort weiterhin prominenteren, aber ebenfalls verdichteten) Index-Module. */
.funnel-cta--compact { padding: 16px 18px; gap: 12px; }
.funnel-cta--compact .funnel-cta__icon { width: 34px; height: 34px; }
.funnel-cta--compact .funnel-cta__icon svg { width: 18px; height: 18px; }
.funnel-cta--compact .funnel-cta__title { font-size: 0.95rem; margin-bottom: 3px; }
.funnel-cta--compact .funnel-cta__desc { font-size: 0.82rem; margin-bottom: 12px; }
.funnel-cta--compact .funnel-cta__input { min-width: 140px; padding: 7px 10px; font-size: 0.85rem; }

/* === Icon-System (HWB-D2): Container fuer fragments/icons.html-SVGs ===
   Ersetzt die bisherigen Emoji-Icons durch ein einheitliches, token-basiertes
   Container-System. currentColor im SVG erbt die hier gesetzte Textfarbe. Nutzung:
   <span class="icon-box icon-box--md"><svg th:replace="~{fragments/icons :: icon('search')}"></svg></span> */
.icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: var(--radius-btn);
    background: rgba(255,140,66,0.12); color: var(--primary-text);
}
.icon-box svg { width: 55%; height: 55%; }
.icon-box--sm { width: 32px; height: 32px; }
.icon-box--md { width: 40px; height: 40px; }
.icon-box--lg { width: 48px; height: 48px; }
.icon-box--neutral { background: var(--bg-elevated); color: var(--ink-light); }
.icon-box--danger  { background: rgba(239,68,68,0.1); color: #DC2626; }
.icon-box--success { background: rgba(16,185,129,0.12); color: var(--verified-text); }
.icon-box--onbrand { background: rgba(255,255,255,0.1); color: var(--primary); }
[data-theme="dark"] .icon-box--danger { color: #F87171; }
[data-theme="dark"] .icon-box--success { color: #34D399; }

/* === Generische Karte (HWB-D2): fuer freistehende Content-Boxen ohne eigene
   spezifischere Klasse (claim.html/registrieren.html Formular-Karten, tender-seo
   Behoerden-Hinweis). Spezifischere Klassen/Inline-Overrides gewinnen wie ueblich. */
.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

/* === Behoerden-Landing: Problem-/Feature-Karten (HWB-D2 Design-Welle 2) ===
   Nuechtern-institutionelle Anmutung -- weniger Hover-Verspieltheit als die
   Consumer-Weiche, aber gleiches Token-/Elevation-System. */
.problem-card, .feature-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--space-5);
    text-align: left; display: flex; flex-direction: column; gap: var(--space-3);
    transition: box-shadow var(--dur-hover) var(--ease-out);
}
.problem-card:hover, .feature-card:hover { box-shadow: var(--shadow-hover); }
.problem-card h3, .feature-card h3 { font-size: var(--text-h4); margin: 0; }
.problem-card p, .feature-card p { font-size: var(--text-small); color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* === Formular-Furniture (HWB-D2): registrieren.html/claim.html -- einheitliche
   Feldhoehen/Label-Typo/Fokus-Zustaende statt Ad-hoc-Inline-Styles je Feld. */
.form-field { margin-bottom: var(--space-4); }
.form-field > label {
    display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: var(--space-2);
    color: var(--ink-light);
}
.form-field input, .form-field select, .form-field textarea, .form-input {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-btn); background: var(--bg-card); color: var(--ink);
    font-family: var(--font-ui); font-size: 0.95rem;
    transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible,
.form-input:focus-visible {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,140,66,0.15);
}
.form-hint { font-size: 0.78rem; color: var(--ink-muted); margin-top: var(--space-1); }

/* Drop-Zone-Optik fuers Nachweis-Datei-Feld -- rein visuell, keine JS-Aenderung: der
   native <input type=file> bleibt technisch unveraendert (gleiche id, kein Drag&Drop-
   Handler), sitzt aber in einer gestrichelten Zone statt nackt im Flow. */
.upload-dropzone {
    border: 2px dashed var(--border); border-radius: var(--radius-card);
    padding: var(--space-5); text-align: center; background: var(--bg-elevated);
    transition: border-color var(--dur-hover) var(--ease-out);
}
.upload-dropzone:focus-within, .upload-dropzone:hover { border-color: var(--primary); }
.upload-dropzone input[type="file"] { width: 100%; font-size: 0.85rem; }
.upload-dropzone__icon { margin: 0 auto var(--space-2); }
.upload-dropzone__hint { font-size: 0.78rem; color: var(--ink-muted); margin-top: var(--space-2); }

/* === Betriebs-Registrierung Wert-Layout (HWB-REG-DESIGN-01, Design-Pass 2026-09) ===
   /registrieren ist die zentrale Conversion-Stelle des Claim-Funnels (Betreiber-Auftrag,
   WOW-Landingpage-Playbook + Verkaufspsychologie-Playbook). Zwei-Spalten: links das
   Formular als Karte (.reg-form-card, erbt .card), rechts eine Wert-Spalte (.reg-value-col)
   mit Nutzen-Punkten + der veredelten "Kostenlos & ohne Risiko"-Box. Mobil (<900px)
   stapelt die Grid-Reihenfolge automatisch Formular zuerst, weil .reg-form-card im DOM
   vor .reg-value-col steht -- kein order:-Hack noetig. #step-start traegt selbst die
   Grid-Klasse, damit das bestehende Step-Umschaltscript (style.display = 'none') Formular
   UND Wert-Spalte gemeinsam ausblendet, ohne dass das Script angefasst werden muss. */
.reg-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: start; }
.reg-form-card { padding: var(--space-7); }
@media (max-width: 900px) {
    .reg-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Feld-Gruppen (Miller-Chunking statt einer langen Formularwand): dezente Eyebrow-
   Legende + Trennlinie zwischen Gruppen, natives Fieldset-Rahmen/Padding zurueckgesetzt. */
.reg-fieldset { border: none; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.reg-fieldset + .reg-fieldset { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.reg-fieldset__legend {
    display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-muted); padding: 0; margin-bottom: var(--space-3);
}

/* Feld-Icons (wo sinnvoll): eigener Wrapper NUR um das Eingabefeld (nicht ums Label),
   damit die vertikale Zentrierung robust bleibt statt auf ein geschaetztes Label-Offset
   angewiesen zu sein. Wiederverwendet auf /registrieren + den Auth-Karten unten. */
.input-icon-field { position: relative; }
.input-icon-field input, .input-icon-field select { padding-left: 44px; }
.input-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--ink-subtle); pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--dur-hover) var(--ease-out);
}
.input-icon-field:focus-within .input-icon { color: var(--primary-text); }

/* Checkbox-Zeilen (u. a. § 14 BGB / AGB-Zustimmung) -- Text bleibt unveraendert (rechtlich
   abgestimmt), nur Abstands-/Ausrichtungs-Politur statt Ad-hoc-Inline-Style je Zeile. */
.reg-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; cursor: pointer; }
.reg-checkbox + .reg-checkbox { margin-top: var(--space-3); }
.reg-checkbox input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }

/* Theme-bewusste Hinweis-/Fehlerboxen -- ersetzen die bisher fest-hellen Inline-Hex-Styles
   (#FFF7ED/#FEF2F2) auf dieser + den Auth-Seiten durch Farbtoken, damit Dark Mode nicht auf
   einer hell gebliebenen Flaeche landet (Leitplanke: jede neue Flaeche dark-mode-tauglich). */
.form-notice-box {
    display: none; margin-bottom: var(--space-5); padding: 14px 16px;
    background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.32);
    border-radius: var(--radius-btn); font-size: 0.88rem; color: var(--ink-light);
}
.form-error-box {
    display: none; margin-top: 16px; padding: 12px;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.28);
    border-radius: var(--radius-btn); color: var(--error); font-size: 0.88rem;
}

/* Wert-Spalte: Nutzen-Punkte + veredelte "Kostenlos & ohne Risiko"-Box (Inhalt/Wortlaut
   der Box unveraendert aus der bisherigen Version uebernommen -- nur Ort/Gestaltung neu). */
.reg-value-col { display: flex; flex-direction: column; gap: var(--space-5); }
.reg-value-eyebrow {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: var(--space-2);
}
.reg-value-title { font-size: var(--text-h3); font-weight: 700; margin: 0; }
.reg-value-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.reg-value-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.reg-value-item__body strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.reg-value-item__body p { font-size: 0.85rem; color: var(--ink-muted); margin: 0; line-height: 1.55; }

.reg-highlight-box {
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.22);
    border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
}
.reg-highlight-box__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.reg-highlight-box__title { font-weight: 700; font-size: 0.95rem; color: #047857; }
/* Selbstkritik (statische Markup-Pruefung nach dem Umzug in die groessere Wert-Spalte):
   die 3 Punkte liefen ohne Marker/Abstand zu einem Fliesstext-Block zusammen und waren
   dadurch schlechter scanbar als die Nutzen-Liste direkt darueber. Punkt-Marker + Abstand
   je Zeile macht daraus eine echte Liste (Miller-Chunking, wie beim Rest der Seite). */
.reg-highlight-box__list { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink); }
.reg-highlight-box__list li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.reg-highlight-box__list li:last-child { margin-bottom: 0; }
.reg-highlight-box__list li::before {
    content: ''; position: absolute; left: 2px; top: 0.6em;
    width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5;
}
/* --verified-text bleibt bewusst fix-dunkel (Badge-Chip-Konvention, siehe :root-Kommentar
   oben) -- fuer diese groessere, theme-wechselnde Flaeche daher eigene helle Dark-Werte
   statt der Variable, exakt im bestehenden Zwei-Block-Dark-Mode-Muster (expliziter Toggle
   + System-Praeferenz) wie bei .hero/.search-bar. */
[data-theme="dark"] .reg-highlight-box { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .reg-highlight-box__title { color: #6EE7B7; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .reg-highlight-box { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
    :root:not([data-theme="light"]) .reg-highlight-box__title { color: #6EE7B7; }
}

/* Kompakter dunkler Funnel-Kopf (WOW-Playbook-Sprache, aber dezent -- keine grosse
   Marketing-Hero fuer eine Formularseite, siehe Betreiber-Vorgabe). Erbt .hero (dunkler
   Verlauf + Orange-Glow via .hero::after), skaliert nur Groesse/Ausrichtung/Abstand. */
.hero--compact { padding: var(--space-7) 0 var(--space-6); text-align: left; }
.hero--compact h1 { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.hero--compact p { font-size: 0.92rem; margin-bottom: 0; display: inline-flex; align-items: center; gap: 8px; }
.hero--compact p svg { width: 16px; height: 16px; flex-shrink: 0; color: #34D399; }
@media (max-width: 640px) {
    .hero--compact { padding: var(--space-6) 0 var(--space-5); }
}

/* === Auth-Karten (login/consumer-login/authority-login/passwort-vergessen) ===
   Gemeinsame Bausteine statt vier Inline-Style-Kopien derselben Karte (HWB-REG-DESIGN-01
   Folge-Pass -- "gleiche Feld-/Karten-Gestaltung wiederverwenden, kein Copy-Paste je Seite"). */
.auth-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 40px;
}
.auth-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; text-align: center; }
.auth-card__sub { color: var(--ink-muted); text-align: center; margin-bottom: 24px; font-size: 0.92rem; }
.auth-card__footer { text-align: center; margin-top: 20px; font-size: 0.85rem; color: var(--ink-muted); }
.auth-card__footer + .auth-card__footer { margin-top: 8px; }
.auth-card__footer a { color: var(--primary-text); font-weight: 500; }

/* === Map === */
#map {
    height: 100%; min-height: 500px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    position: sticky; top: 80px;
}

/* === Profile Page === */
.profile-header {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 32px; margin-bottom: 24px;
}
.profile-header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; }
.profile-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.profile-info-item { font-size: 0.92rem; }
.profile-info-item .label { color: var(--ink-muted); font-size: 0.82rem; margin-bottom: 2px; }
.profile-map { height: 300px; border-radius: var(--radius-card); border: 1px solid var(--border); margin-bottom: 24px; }

.claim-cta {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    color: white; border-radius: var(--radius-card);
    padding: 32px; text-align: center; margin-bottom: 24px;
}
.claim-cta h3 { font-size: 1.2rem; margin-bottom: 8px; }
.claim-cta p { color: var(--ink-subtle); margin-bottom: 16px; font-size: 0.92rem; }

/* === Similar === */
.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

/* === Search Filter Bar === */
/* Kohaerente Toolbar (HWB-D1) statt einer freischwebenden Regelzeile: eigene Karte mit
   Elevation-Stufe 1, einheitliche Kontrollhoehe (44px = A11y-Touch-Ziel, jetzt nicht mehr
   nur mobil) fuer Input/Select/Button/Checkbox-Label in derselben Reihe. */
.filter-bar {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5); margin-top: var(--space-4);
}
.filter-bar select, .filter-bar input {
    padding: 8px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-btn); font-family: var(--font-ui);
    font-size: 0.88rem; background: var(--bg-card); color: var(--ink);
    min-height: 44px; box-sizing: border-box;
}
.filter-bar .btn, .filter-bar .locate-btn { min-height: 44px; }

/* Dark-Mode-Sicherheitsnetz (HWB-DARKMODE-KONTRAST 2026-08-03): Formular-Controls
   erben sonst die System-Default-Textfarbe (schwarz). Auf dem theme-bewussten
   --bg-card-Hintergrund ist das im Dark Mode dunkel-auf-dunkel = unsichtbar. Ein
   globaler theme-bewusster color/placeholder-Default verhindert das seitenweit,
   auch fuer Felder, die keine explizite Farbe setzen. */
/* Theme-bewusster Standard fuer ALLE Formular-Controls: color + background, damit
   nicht einzelne Felder (z. B. Radar-Box) ohne explizite Farbe auf Browser-Default
   (weiss / nativ dunkel) zurueckfallen und im Dark Mode inkonsistent aussehen.
   Spezifischere Regeln (.search-bar input transparent etc.) gewinnen weiterhin. */
input, select, textarea {
    color: var(--ink);
    background-color: var(--bg-card);
    box-sizing: border-box;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
/* Native Select-Options im Dark Mode: Popup-Liste lesbar halten. */
select option { background: var(--bg-card); color: var(--ink); }
.results-count { font-size: 0.88rem; color: var(--ink-muted); margin-left: auto; }
.results-count strong { font-family: var(--font-mono); color: var(--ink); }

/* === Umkreis-Regler (Endkunden-Suche /suche, HWB-SUCHE-UX-01) === */
.locate-btn { padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; gap: 6px; }
/* Jedes Icon in diesem System braucht eine eigene, scope-gebundene Groessen-Regel (siehe
   .hero-locate-btn svg/.path-card-icon svg/.icon-box svg oben) -- ohne sie rendert ein
   nacktes <svg> ohne width/height/viewBox-Fallback bei 0x0 (Selbstkritik-Fund
   HWB-SUCHE-DESIGN-01, live mit Chrome DevTools verifiziert: der Pin im "In meiner
   Naehe"-Button war unsichtbar). */
.locate-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.verified-toggle {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    font-size: 0.85rem; color: var(--ink-light); cursor: pointer; white-space: nowrap;
}
.verified-toggle input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.radius-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    flex-basis: 100%; width: 100%;
    padding: 10px 0 2px; margin-top: 4px; border-top: 1px dashed var(--border-subtle);
    transition: opacity 0.2s ease;
}
/* 0.85 statt vormals 0.55 -- volle Dimmung druecke Label/Wert unter 4,5:1 Kontrast (WCAG 2.2 AA) */
.radius-row--inactive { opacity: 0.85; }
.radius-row__label { font-size: 0.85rem; font-weight: 600; color: var(--ink-light); white-space: nowrap; }
.radius-row__slider-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 180px; }
.radius-row input[type="range"] { flex: 1; accent-color: var(--primary); cursor: pointer; }
.radius-row__value { font-family: var(--font-mono); font-weight: 700; color: var(--ink); min-width: 52px; text-align: right; }
/* E2E-Bugliste 2026-08-01 (Bug 5): --ink-muted (#64748B) liegt auf --bg nur
   knapp ueber 4,5:1 -- die .radius-row--inactive-Opacity (0.85) im
   unbestaetigten Ausgangszustand druecke den effektiven Kontrast darunter.
   --ink-light hat genug Reserve, um auch nach dem Abdunkeln durch die
   Opacity WCAG-AA (>=4,5:1) sicher zu halten. */
.radius-row__hint { font-size: 0.78rem; color: var(--ink-light); flex-basis: 100%; margin: 0; }

/* === Pagination === */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.pagination a, .pagination span {
    padding: 8px 14px; border-radius: var(--radius-btn);
    font-size: 0.88rem; font-weight: 500;
    border: 1px solid var(--border); background: var(--bg-card);
}
.pagination .active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination-ellipsis { padding: 0 6px; color: var(--ink-muted); align-self: center; user-select: none; }

/* === Footer === */
/* Bleibt unabhaengig vom Theme immer dunkel (feste Marken-Flaeche, siehe Projekt-Konvention
   in CLAUDE.md) -- die rgba(255,255,255,X)-Werte unten sind daher in BEIDEN Themes sicher. */
.footer { background: var(--ink); color: white; padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
/* Eyebrow-Label-Stil (gleiche Sprache wie .hero-field-label/.a11y-group-label) statt
   einer einfachen fetten Ueberschrift -- ordnet die vier Spalten klarer als Kategorien. */
.footer h4 {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.6); margin-bottom: var(--space-4);
}
.footer a {
    display: block; color: var(--ink-subtle); font-size: 0.88rem; line-height: 1.9;
    margin-bottom: 2px; transition: color var(--dur-fast) var(--ease-standard);
}
.footer a:hover { color: white; }
.footer-text { color: var(--ink-subtle); font-size: 0.85rem; line-height: 1.7; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-6); padding-top: var(--space-4); }
.footer-bottom p { color: var(--ink-subtle); font-size: 0.8rem; text-align: center; }

/* === Section === */
section { padding: var(--space-7) 0; }
section h2 { font-size: var(--text-h2); font-weight: 700; margin-bottom: var(--space-5); }

/* === Responsive === */
@media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    /* Blob deutlich verkleinert + in die Ecke verschoben, damit er auf schmalen
       Viewports nicht mehr direkt hinter der Headline/dem orangen Wort liegt. */
    .hero::after { width: 260px; height: 260px; top: -15%; right: -25%; }
    .search-bar { flex-direction: column; }
    /* Gestapelte "Was/Wo"-Felder: Trennlinie oben statt links, volle Touch-Ziele. */
    .hero-search-field + .hero-search-field { border-left: none; border-top: 1px solid var(--border-subtle); }
    .search-bar .hero-search-field input { padding: 10px 16px 14px; min-height: 24px; }
    /* Mehr Abstand auf Mobile, da die gestapelte Suchkarte hoeher ist. */
    .hero-secondary-cta { margin-top: 32px; }
    .search-layout { grid-template-columns: 1fr; }
    #map { min-height: 300px; position: static; }
    .profile-info { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .trades-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    /* Touch-Ziele >= 44px fuer Suchfilter-Controls (/suche) */
    .filter-bar select, .filter-bar input, .filter-bar .btn {
        padding: 12px 14px; min-height: 44px; box-sizing: border-box;
    }
    .filter-bar { gap: 10px; }
    .results-count { margin-left: 0; width: 100%; }
    .radius-row { padding-top: 14px; }
    .radius-row input[type="range"] { min-height: 32px; }
    .verified-toggle { min-height: 44px; }
    .locate-btn { min-height: 44px; }
}

/* ===================================================
   DASHBOARD STYLES
   =================================================== */

/* === Dashboard Layout === */
.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
}

/* === Dashboard Tabs === */
.dashboard-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dashboard-tabs a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
    transition: all 0.15s;
    text-decoration: none;
}
.dashboard-tabs a:hover {
    color: var(--ink);
    background: var(--bg);
}
.dashboard-tabs a.tab-active {
    color: var(--ink);
    background: var(--bg);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.dashboard-tabs .tab-icon {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
}
.dashboard-tabs .tab-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

/* === Notification Bell (dashboard-nav) === */
.dash-notif-bell {
    position: relative; cursor: pointer;
    width: 34px; height: 34px; border-radius: var(--radius-btn);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); color: var(--ink-light);
}
.dash-notif-bell svg { width: 18px; height: 18px; }
.dash-notif-badge {
    display: none; position: absolute; top: -4px; right: -6px;
    background: var(--primary); color: #fff; font-size: 0.65rem; font-weight: 700;
    border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center;
}

/* === Dashboard Header === */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.dashboard-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}
.dashboard-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.plan-badge-free {
    background: var(--border-subtle);
    color: var(--ink-muted);
}
.plan-badge-premium {
    background: #FFF7ED;
    color: var(--primary-text);
}
.plan-badge-premium-plus {
    background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
    color: var(--primary-text);
    border: 1px solid rgba(255, 140, 66, 0.2);
}

/* === Stat Cards === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.stat-card-label {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.stat-card-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}
.stat-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.stat-card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.trend-up { color: var(--success); }
.trend-down { color: var(--error); }
.trend-neutral { color: var(--ink-subtle); }

/* === Sparkline (CSS-only mini bar chart) === */
.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
}
.sparkline-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: height 0.3s;
}
.sparkline-bar.active {
    background: var(--primary);
}

/* === Inquiry Card === */
.inquiry-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 24px;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.inquiry-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.inquiry-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.inquiry-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.inquiry-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 8px;
}
.inquiry-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.inquiry-card-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: none;
}
.inquiry-card-details.expanded {
    display: block;
}
.inquiry-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.inquiry-detail-item .label {
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-bottom: 2px;
}
.inquiry-detail-item .value {
    font-size: 0.92rem;
    font-weight: 500;
}

/* === Quote Card === */
.quote-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 24px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.quote-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.quote-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.quote-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.quote-card-price {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
}
.quote-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 8px;
}
.lead-fee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    background: var(--border-subtle);
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 8px;
}
.lead-fee .amount {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
}

/* === Review Card === */
.review-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 24px;
}
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.review-card-author {
    font-weight: 600;
    font-size: 0.95rem;
}
.review-card-date {
    font-size: 0.82rem;
    color: var(--ink-muted);
}
.review-card-text {
    font-size: 0.92rem;
    color: var(--ink-light);
    line-height: 1.6;
    margin-bottom: 12px;
}
.review-reply-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.review-reply-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 8px;
}
.review-reply-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* === Star Rating === */
.star-rating {
    display: inline-flex;
    gap: 2px;
}
.star-rating .star {
    font-size: 1.1rem;
    color: var(--border);
}
.star-rating .star.filled {
    color: var(--rating-text);
}
.average-rating {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    margin-bottom: 16px;
}
.average-rating-number {
    font-family: var(--font-mono);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
}
.average-rating-info {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* === Status Badges === */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.status-open { background: #DBEAFE; color: #2563EB; }
.status-sent { background: #DBEAFE; color: #2563EB; }
.status-awarded { background: #DCFCE7; color: #16A34A; }
.status-rejected { background: #FEE2E2; color: #DC2626; }
.status-cancelled { background: #FEE2E2; color: #DC2626; }
.status-pending { background: #FEF3C7; color: #D97706; }
.status-draft { background: var(--border-subtle); color: var(--ink-muted); }
/* HWB-A1 (2026-08-25): Auto-Angebot angenommen, Betriebs-Bestaetigung ausstehend. */
.status-accepted_pending_confirmation { background: #FEF3C7; color: #D97706; }

/* === Modal === */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-overlay.active {
    display: flex;
}
.modal {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 32px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.modal-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ink-muted);
    padding: 4px;
    line-height: 1;
}
.modal-close:hover { color: var(--ink); }

/* === Blurred Overlay (Feature Gating) === */
.blurred-content {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}
.blurred-overlay {
    position: relative;
}
.blurred-overlay-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: var(--radius-card);
    padding: 32px 40px;
    box-shadow: var(--shadow-hover);
}
.blurred-overlay-cta h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}
.blurred-overlay-cta p {
    color: var(--ink-muted);
    font-size: 0.92rem;
    margin-bottom: 16px;
}

/* === Form Styles (Dashboard) === */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    background: var(--bg-card);
    color: var(--ink);
    transition: border-color 0.15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}
.form-group input[readonly] {
    background: var(--border-subtle);
    color: var(--ink-muted);
    cursor: not-allowed;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-hint {
    font-size: 0.78rem;
    color: var(--ink-subtle);
    margin-top: 4px;
}

/* === Photo Upload Grid === */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-btn);
    overflow: hidden;
    border: 1px solid var(--border);
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-item-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-add {
    aspect-ratio: 1;
    border: 2px dashed var(--border);
    border-radius: var(--radius-btn);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 0.82rem;
    transition: border-color 0.15s, color 0.15s;
}
.photo-add:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}
.photo-add-icon {
    font-size: 1.5rem;
}

/* === Analytics === */
.period-selector {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 4px;
    width: fit-content;
}
.period-selector button {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--ink-muted);
    transition: all 0.15s;
}
.period-selector button.active {
    background: var(--ink);
    color: var(--bg);
}
.chart-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding-top: 16px;
}
.chart-bar {
    flex: 1;
    background: var(--border);
    border-radius: 3px 3px 0 0;
    min-width: 6px;
    transition: height 0.3s, background 0.15s;
    position: relative;
}
.chart-bar:hover {
    background: var(--primary);
}
.chart-bar-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    white-space: nowrap;
    margin-bottom: 4px;
}
.chart-bar:hover .chart-bar-tooltip { display: block; }

/* === Competitor Table === */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 16px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-subtle);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .highlight {
    background: #FFF7ED;
    font-weight: 600;
}
.data-table .mono {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* === Premium Pricing === */
.pricing-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.pricing-card.featured {
    border-color: var(--primary);
    border-width: 2px;
    position: relative;
}
.pricing-card.featured::before {
    content: 'Beliebt';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 2px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.pricing-card.current {
    background: var(--border-subtle);
}
.pricing-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.pricing-card-price {
    font-family: var(--font-mono);
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.pricing-card-period {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 24px;
}
.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: 24px;
}
.pricing-features li {
    padding: 6px 0;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pricing-features .check { color: var(--success); }
.pricing-features .cross { color: var(--ink-subtle); }

/* === Profile Preview === */
.profile-preview {
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.profile-preview-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* === Premium Upgrade Banner === */
.premium-banner {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    color: white;
    border-radius: var(--radius-card);
    padding: 32px;
    text-align: center;
}
.premium-banner h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}
.premium-banner p {
    color: var(--ink-subtle);
    font-size: 0.92rem;
    margin-bottom: 16px;
}

/* === Opening Hours === */
.hours-grid {
    display: grid;
    gap: 8px;
}
.hours-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 8px;
    align-items: center;
}
.hours-row label {
    font-size: 0.85rem;
    font-weight: 500;
}
.hours-row input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

/* === FAQ === */
.faq-list { margin-top: 24px; }
.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}
.faq-question {
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-answer {
    font-size: 0.88rem;
    color: var(--ink-light);
    margin-top: 8px;
    display: none;
    line-height: 1.6;
}
.faq-item.open .faq-answer { display: block; }
.faq-toggle { font-size: 1.2rem; color: var(--ink-muted); }

/* === Dashboard Cards Section === */
.dashboard-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dashboard-section-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
}
.dashboard-section-header a {
    font-size: 0.85rem;
    color: var(--primary-text);
    font-weight: 500;
}

/* === Cards List === */
.cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--ink-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}
.empty-state-icon svg { width: 2.2rem; height: 2.2rem; color: var(--ink-subtle); }
.empty-state h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink);
}
.empty-state p {
    font-size: 0.88rem;
}
/* Empty-State mit naechster Handlung (statt reinem "keine Treffer"-Text): wiederverwendet
   die bestehende .empty-state-Basis (Search-before-Build) statt eines eigenen ad-hoc
   Inline-Style-Blocks. */
.empty-state--search {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: var(--space-7) var(--space-5);
}
.empty-state-tips {
    background: var(--bg-elevated); border-radius: var(--radius-btn); padding: var(--space-4);
    text-align: left; max-width: 400px; margin: var(--space-4) auto 0;
}
.empty-state-tips__title { font-weight: 600; font-size: 0.88rem; margin-bottom: var(--space-2); color: var(--ink); }
.empty-state-tips ul { font-size: 0.85rem; line-height: 2; padding-left: 20px; color: var(--ink-light); }
.empty-state-cta { margin-top: var(--space-4); }
.empty-state-footnote { margin-top: var(--space-3); font-size: 0.85rem; }
.empty-state-footnote a { color: var(--primary-text); font-weight: 500; }

/* === Dashboard Responsive === */
@media (max-width: 768px) {
    .dashboard-tabs {
        gap: 2px;
        padding: 4px;
    }
    .dashboard-tabs a {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
    .dashboard-tabs .tab-icon {
        display: none;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-table {
        grid-template-columns: 1fr;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .inquiry-detail-grid {
        grid-template-columns: 1fr;
    }
    .hours-row {
        grid-template-columns: 80px 1fr 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .blurred-overlay-cta {
        width: 90%;
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   PREMIUM UX ENHANCEMENTS
   =================================================== */

/* === Fade-in Animations (scroll-triggered) === */
.fade-in-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-card {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeInCard 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeInCard {
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-card:nth-child(1) { animation-delay: 0.05s; }
.fade-in-card:nth-child(2) { animation-delay: 0.1s; }
.fade-in-card:nth-child(3) { animation-delay: 0.15s; }
.fade-in-card:nth-child(4) { animation-delay: 0.2s; }
.fade-in-card:nth-child(5) { animation-delay: 0.25s; }

/* === CTA Pulse Animation === */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255, 140, 66, 0); }
}
.btn-primary.btn-lg {
    animation: ctaPulse 2.5s ease-in-out infinite;
}
.btn-primary.btn-lg:hover {
    animation: none;
}

/* === Skeleton Loading Placeholders === */
.skeleton {
    background: linear-gradient(90deg, var(--border-subtle) 25%, #e8edf2 50%, var(--border-subtle) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-btn);
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}
.skeleton-text.short { width: 50%; }
.skeleton-text.full { width: 100%; }
.skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}
.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 24px;
}

/* === Toast Notifications === */
@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: all;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 420px;
    font-size: 0.88rem;
    animation: toastSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.removing {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--error); }
.toast-info { border-left: 4px solid var(--info); }
.toast-warning { border-left: 4px solid var(--warning); }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    flex-shrink: 0;
}

/* === Smooth Transitions on Interactive Elements === */
a, button, input, select, textarea {
    transition: all 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.12);
}

/* === Focus Styles for Accessibility === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* === Search Chips === */
.search-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-light);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.search-chip:hover {
    border-color: var(--primary);
    color: var(--primary-text);
    background: #FFF7ED;
    transform: translateY(-1px);
}

/* === Testimonial Cards === */
.testimonial-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 28px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* === Print Styles === */
@media print {
    .navbar, .footer, .btn, .search-bar, .filter-bar,
    .nav-links, .claim-cta, .accept-section, .btn-accept,
    .btn-reject, .pagination, #map, .profile-map,
    #stickyMobileCta, .toast-container, #onboardingOverlay,
    .search-chip, .faq-toggle, .ob-overlay, .ob-spotlight, .ob-tooltip {
        display: none !important;
    }
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    .container {
        max-width: 100%;
        padding: 0;
    }
    .quote-card, .profile-header, .result-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    a { color: black; text-decoration: none; }
    .positions-table { font-size: 10pt; }
    .hero { background: white; color: black; padding: 24px 0; }
    .hero h1 span { color: black; }
}

/* === Enhanced Responsive for New Elements === */
@media (max-width: 768px) {
    .toast-container {
        right: 10px;
        left: 10px;
    }
    .toast {
        min-width: auto;
        max-width: 100%;
    }
    .testimonial-card {
        padding: 20px;
    }
    #stickyMobileCta {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* === Dark Mode === */
[data-theme="dark"] {
    --primary: #FF9D5C;
    --primary-hover: #FFB077;
    /* Dark-Mode-Orange ist bereits hell genug fuer >=4,5:1 auf dunklem Grund --
       kein zusaetzliches Abdunkeln noetig (anders als --primary-text im Light-Mode). */
    --primary-text: var(--primary);
    --ink: #F1F5F9;
    --ink-light: #CBD5E1;
    --ink-muted: #94A3B8;
    --ink-subtle: #64748B;
    --success: #34D399;
    --warning: #FBBF24;
    /* Dunkler Grund: helles Amber fuer Rating-Text (dunkles Amber wuerde auf
       dunkler Karte untergehen). --verified-text bleibt dunkel (Badge-Chip ist hell). */
    --rating-text: #FBBF24;
    --error: #F87171;
    --info: #60A5FA;
    --bg: #0F172A;
    --bg-card: #1E293B;
    --bg-elevated: #243247;
    --border: #334155;
    --border-subtle: #1E293B;
    /* Dark-Mode-Elevation (HWB-D1): reine schwarze Schlagschatten wirken auf dunklem
       Grund schmutzig/verwaschen statt "erhaben" -- ein heller, sehr duenner Border-Ring
       (rgba weiss) uebernimmt hier die Trennungs-Funktion des Schattens, ein zusaetzlicher
       dezenter Schwarz-Layer sorgt weiterhin fuer Tiefe. */
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 16px -4px rgba(0,0,0,0.4);
    --shadow-hover: 0 0 0 1px rgba(255,255,255,0.09), 0 14px 32px -8px rgba(0,0,0,0.5);
}
[data-theme="dark"] .navbar { background: rgba(30,41,59,0.88); border-color: #334155; }
[data-theme="dark"] .hero { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }
[data-theme="dark"] .search-bar { background: #1E293B; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
[data-theme="dark"] .search-bar input { background: transparent; color: var(--ink); }
[data-theme="dark"] .footer { background: #0B1120; }
[data-theme="dark"] .result-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .inquiry-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] img { opacity: 0.9; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #FF9D5C; --primary-hover: #FFB077; --primary-text: #FF9D5C;
        --ink: #F1F5F9; --ink-light: #CBD5E1; --ink-muted: #94A3B8; --ink-subtle: #64748B;
        --bg: #0F172A; --bg-card: #1E293B; --bg-elevated: #243247;
        --border: #334155; --border-subtle: #1E293B;
        --rating-text: #FBBF24;
        --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.3);
        --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 16px -4px rgba(0,0,0,0.4);
        --shadow-hover: 0 0 0 1px rgba(255,255,255,0.09), 0 14px 32px -8px rgba(0,0,0,0.5);
    }
    :root:not([data-theme="light"]) .navbar { background: rgba(30,41,59,0.88); border-color: #334155; }
    :root:not([data-theme="light"]) .search-bar { background: #1E293B; }
    :root:not([data-theme="light"]) .search-bar input { background: transparent; color: var(--ink); }
    :root:not([data-theme="light"]) .hero-suggestions { background: #1E293B; }
    :root:not([data-theme="light"]) .footer { background: #0B1120; }
    :root:not([data-theme="light"]) .btn-outline:hover { background: rgba(255,255,255,0.06); }
    :root:not([data-theme="light"]) .search-bar:focus-within { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,157,92,0.4); }
}

/* === Glassmorphism === */
.glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.3);
}
[data-theme="dark"] .glass {
    background: rgba(30,41,59,0.7);
    border-color: rgba(255,255,255,0.08);
}

/* === Skeleton Loading === */
.skeleton {
    background: linear-gradient(90deg, var(--border-subtle) 25%, var(--border) 50%, var(--border-subtle) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-card { height: 120px; border-radius: var(--radius-card); }

/* === Page Transitions === */
/* Dezente Seiten-Einstiegs-Animation (HWB-D1: fade + 4px rise, einmalig) -- respektiert
   prefers-reduced-motion automatisch ueber die globale Media-Query oben (Endzustand
   bleibt identisch, nur ohne wahrnehmbare Bewegung). */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.container { animation: fadeSlideIn var(--dur-base) var(--ease-out) both; }

/* === Micro-Interactions === */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.btn:active::after { width: 300px; height: 300px; }

/* HWB-D1: vereinheitlichte Karten-Hover-Physik -- 180ms ease-out, translateY(-2px)
   (vorher elastisches cubic-bezier(0.34,1.56,...) + scale(1.02): wirkte verspielt/billig
   statt praezise. Stufe hoch (Elevation) statt Bounce, wie im Rest des Systems. */
.stat-card, .inquiry-card, .result-card, .trade-card {
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.stat-card:hover, .trade-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Dedupliziert mit der Fokus-Regel unter "Smooth Transitions" oben (dieselbe Glow-Absicht,
   leicht abweichender Alpha-Wert 0.15 vs. 0.12) -- eine Quelle der Wahrheit statt zweier
   konkurrierender Deklarationen fuer denselben Zustand. */
.form-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(255,140,66,0.12);
}

.status-badge[class*="new"], .badge-new {
    animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,66,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255,140,66,0); }
}

/* === Hero Particles === */
.hero-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background: var(--primary);
    pointer-events: none;
    animation: float-particle 20s infinite;
}
@keyframes float-particle {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(50px, -30px) rotate(90deg); }
    50% { transform: translate(-20px, -60px) rotate(180deg); }
    75% { transform: translate(30px, -20px) rotate(270deg); }
}

/* === Command Palette === */
.cmd-palette-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
    z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 20vh;
}
.cmd-palette-overlay.active { display: flex; }
.cmd-palette {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    width: 100%; max-width: 560px; box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    overflow: hidden; animation: cmdPaletteIn 0.15s ease-out;
}
@keyframes cmdPaletteIn { from { opacity: 0; transform: scale(0.96) translateY(-8px); } to { opacity: 1; transform: none; } }
.cmd-palette-input {
    width: 100%; border: none; padding: 16px 20px; font-size: 1rem; font-family: var(--font-ui);
    background: transparent; color: var(--ink); outline: none; border-bottom: 1px solid var(--border);
}
.cmd-palette-results { max-height: 320px; overflow-y: auto; }
.cmd-palette-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
    cursor: pointer; font-size: 0.92rem; color: var(--ink-light); transition: background 0.1s;
}
.cmd-palette-item:hover, .cmd-palette-item.active { background: rgba(255,140,66,0.08); color: var(--ink); }
.cmd-palette-item kbd {
    margin-left: auto; font-size: 0.72rem; padding: 2px 6px; border-radius: 4px;
    background: var(--border-subtle); color: var(--ink-muted); font-family: var(--font-mono);
}

/* === Theme Toggle === */
.theme-toggle {
    background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px;
    color: var(--ink-light); transition: background 0.15s; display: flex; align-items: center;
}
.theme-toggle:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); }
/* Icon-Swap Mond/Sonne (HWB-A11Y-01): Mond zeigt im Light-Mode ("zu Dark wechseln"),
   Sonne im Dark-Mode ("zu Light wechseln") -- rein CSS-getrieben ueber data-theme, kein JS
   noetig. Default (kein data-theme gesetzt) folgt derselben Systempraeferenz-Logik wie der
   Rest des Dark-Mode-Systems (siehe @media (prefers-color-scheme: dark) unten). Text-Label
   ist auf Desktop unsichtbar (icon-only) und erscheint nur im mobilen Menue (siehe
   @media 860px oben), wo per aria-label weiterhin ein zugaenglicher Name existiert. */
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun { display: block; }
}

/* === Keyboard Shortcuts Help === */
.shortcuts-modal {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
    z-index: 10001; display: none; align-items: center; justify-content: center;
}
.shortcuts-modal.active { display: flex; }
.shortcuts-modal-content {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 32px; max-width: 480px; width: 90%;
}
.shortcut-row {
    display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
    font-size: 0.88rem;
}
.shortcut-row kbd {
    font-family: var(--font-mono); font-size: 0.78rem; padding: 2px 8px; border-radius: 4px;
    background: var(--border-subtle); color: var(--ink-muted); border: 1px solid var(--border);
}

/* ===================================================
   LISTINGS-MAP (/karte) — KaufBio-Style portiert
   =================================================== */

.hb-map-page { padding-top: 24px; padding-bottom: 48px; }

.hb-map-filters {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    padding: var(--space-4); margin-bottom: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.hb-map-filters__row {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
/* Einheitliche Kontrollhoehe (HWB-D1) fuer Text-Input/Select/Button in derselben Reihe --
   vorher nur im Mobile-Breakpoint erzwungen, jetzt durchgaengige Toolbar-Praezision. */
.hb-map-filters__row input[type="text"],
.hb-map-filters__row select,
.hb-map-filters__row .btn {
    min-height: 44px; box-sizing: border-box;
}
.hb-map-filters__row input[type="text"],
.hb-map-filters__row select {
    padding: 9px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-btn); font-family: var(--font-ui);
    font-size: 0.9rem; background: var(--bg-card); color: var(--ink);
}
.hb-map-filters__row input[type="text"] { flex: 1 1 240px; min-width: 200px; }
.hb-map-filters__row--toggles { font-size: 0.88rem; color: var(--ink-light); }
.hb-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hb-toggle input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.hb-map-count { margin-left: auto; font-size: 0.88rem; color: var(--ink-muted); }
.hb-map-count strong { color: var(--ink); }
.hb-map-status { font-size: 0.82rem; color: var(--ink-muted); min-height: 1.2em; }

/* Top-Stadt-Cards */
.hb-top-cities-wrap { margin-bottom: 24px; }
.hb-top-cities-wrap h2 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: var(--ink-light); }
.hb-top-cities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.hb-citycard {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 12px 14px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-card);
    cursor: pointer; transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
    font-family: var(--font-ui); text-align: left;
}
.hb-citycard:hover {
    transform: translateY(-2px); border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
.hb-citycard__name { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.hb-citycard__count { font-size: 0.78rem; color: var(--ink-muted); margin-top: 2px; font-family: var(--font-mono); }

/* Result-Cards (Liste): HWB-KARTE-DESIGN-01 (2026-09-02) -- ersetzt durch die
   .search-result-card*-Klassen von /suche (Design-Elevation, siehe listings-map.js
   renderList()) fuer dieselbe Formensprache. .hb-card* war dadurch verwaist und wurde
   entfernt (Search-before-Build-Gegenprobe: ausschliesslich in diesem File + JS + HTML
   referenziert, siehe Grep-Beleg im Auftrags-Bericht) -- .hb-status* bleibt, wird von der
   neuen Kartenmarkup weiterhin genutzt.

   Live-Status-Indicator */
.hb-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.82rem; font-weight: 500;
}
.hb-status__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-muted);
}
.hb-status--open { color: var(--success); }
.hb-status--open .hb-status__dot { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.hb-status--closed { color: var(--error); }
.hb-status--closed .hb-status__dot { background: var(--error); }

/* Karten-Legende: Radius/Schatten an die Filter-Card direkt darueber angeglichen
   (HWB-KARTE-DESIGN-01 Pkt. 3 "Legende gestalterisch angleichen") -- vorher
   --radius-btn ohne Schatten, wirkte wie eine andere Flaechen-Stufe als der Rest
   der Toolbar. */
.hb-map-legend {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
    font-size: 0.82rem; color: var(--ink-light);
}
.hb-map-legend__dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 6px; vertical-align: middle;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15,23,42,0.1);
}
/* Token statt Inline-Hex fuer die zwei Dots, die exakt einem bestehenden Token
   entsprechen (Premium-Gold hat keinen eigenen Token -- bleibt Inline-Hex, siehe
   HTML-Kommentar). */
.hb-map-legend__dot--standard { background: var(--primary); }
.hb-map-legend__dot--verified { background: var(--success); }

/* Popup-Stile (auf Karte) */
.leaflet-popup-content .hb-popup { font-family: var(--font-ui); min-width: 220px; }
.leaflet-popup-content .hb-popup h3 {
    font-size: 0.98rem; font-weight: 700; margin: 0 0 4px;
    color: #0F172A; line-height: 1.3;
}
.leaflet-popup-content .hb-popup .hb-pop-addr {
    font-size: 0.82rem; color: #475569; margin: 0 0 8px;
}
.leaflet-popup-content .hb-popup .hb-pop-badges {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
.hb-pop-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 99px;
    font-size: 0.68rem; font-weight: 600;
}
.hb-pop-badge--premium { background: #FFF7ED; color: #FF8C42; }
.hb-pop-badge--verified { background: #ECFDF5; color: #10B981; }
.hb-pop-badge--trade { background: #F1F5F9; color: #475569; }
.hb-pop-cta { display: flex; gap: 6px; margin-top: 10px; }
.hb-pop-btn {
    flex: 1; text-align: center; padding: 7px 12px;
    border-radius: 8px; font-size: 0.82rem; font-weight: 600;
    text-decoration: none;
}
.hb-pop-btn--ink { background: #0F172A; color: #fff; }
.hb-pop-btn--primary { background: #FF8C42; color: #fff; }

/* Map-Layout: Karte rechts klebrig wie /suche, gleiche Hoehe */
.hb-map-layout #hb-map {
    height: 600px; min-height: 500px;
    border-radius: var(--radius-card); border: 1px solid var(--border);
    position: sticky; top: 80px;
}

/* HWB-KARTE-DESIGN-01 (2026-09-02): Kartenpin-Hervorhebung bei Ergebniskarten-Hover/
   -Fokus und umgekehrt -- gleiches Prinzip wie .custom-marker.marker-highlighted auf
   /suche, aber der Pin hier traegt schon ein Inline-transform:rotate(-45deg) (siehe
   makeIcon() in listings-map.js) -- eine eigene .hb-pin-Klasse liefert nur die
   Transition, den tatsaechlichen scale() setzt das JS direkt am Inline-Style (sonst
   wuerde eine CSS-transform-Regel dieselbe Spezifitaet gegen das Inline-rotate()
   verlieren). Reagiert automatisch auf prefers-reduced-motion (globale Regel oben). */
.hb-pin { transition: transform var(--dur-hover) var(--ease-out); }

/* Lade-Skeleton beim serverseitigen Nachladen (siehe HTML-Kommentar bei
   #hb-results-skeleton + loadListings() in listings-map.js): eigene Sichtbarkeits-
   Kopplung, weil die Karte einen #hb-results-list-Wrapper zwischen .results-list und
   den Karten hat (/suche hat die Karten als direkte .results-list-Kinder). */
.results-list.is-loading #hb-results-list,
.results-list.is-loading #hb-load-more { display: none; }
.results-list.is-loading .search-results-skeleton { display: flex; }

/* ===================================================
   BARRIEREFREIHEITS-WIDGET (HWB-A11Y-01)
   Floating-Button unten rechts, site-weit ueber fragments/layout.html.
   =================================================== */
.a11y-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
}
.a11y-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary);
    border: none; cursor: pointer;
    box-shadow: var(--shadow-hover);
    transition: transform 0.15s ease, background 0.15s ease;
}
.a11y-toggle:hover { background: var(--primary-hover); transform: translateY(-2px); }
.a11y-panel {
    position: absolute; right: 0; bottom: 64px;
    width: 260px; max-width: calc(100vw - 40px);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: 0 24px 48px rgba(0,0,0,0.24);
    padding: 18px;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-title { font-size: 1rem; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.a11y-option {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-btn);
    border: 1.5px solid var(--border); background: transparent; color: var(--ink);
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; cursor: pointer;
    text-align: left;
}
.a11y-option[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.a11y-group-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 8px;
}
.a11y-font-buttons { display: flex; gap: 8px; margin-bottom: 14px; }
.a11y-font-btn {
    flex: 1; padding: 10px 0; border-radius: var(--radius-btn);
    border: 1.5px solid var(--border); background: transparent; color: var(--ink);
    font-family: var(--font-ui); font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.a11y-font-btn[data-a11y-size="large"] { font-size: 1.02rem; }
.a11y-font-btn[data-a11y-size="xl"] { font-size: 1.12rem; }
.a11y-font-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.a11y-reset {
    width: 100%; padding: 9px 0; border-radius: var(--radius-btn);
    border: none; background: var(--border-subtle); color: var(--ink-light);
    font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.a11y-reset:hover { background: var(--border); color: var(--ink); }
.a11y-toggle:focus-visible, .a11y-option:focus-visible, .a11y-font-btn:focus-visible, .a11y-reset:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

@media (max-width: 480px) {
    .a11y-widget { right: 14px; bottom: 14px; }
    .a11y-panel { right: -6px; width: calc(100vw - 28px); }
}

/* ===================================================
   HOCHKONTRAST-MODUS (HWB-A11Y-01)
   Ueberschreibt die Theme-Tokens auf sehr hohen Kontrast (WCAG-AAA-nah, ~ >=7:1) --
   theme-bewusst in 3 Varianten, damit alle drei Dark-Mode-Pfade des bestehenden
   Systems abgedeckt sind: (1) explizites data-theme="dark", (2) explizites
   data-theme="light" (bleibt hell), (3) kein Attribut + Systempraeferenz dunkel.
   Reihenfolge/Spezifitaet ist bewusst so gewaehlt, dass die jeweils passende Variante
   IMMER gewinnt, unabhaengig von der Position im Stylesheet (siehe Kommentare unten).
   =================================================== */

/* (1) Basis/Light: html.high-contrast (Spezifitaet 0-1-1) */
html.high-contrast {
    --ink: #000000;
    --ink-light: #000000;
    --ink-muted: #1A1A1A;
    --ink-subtle: #1A1A1A;
    --border: #000000;
    --border-subtle: #333333;
    --bg: #FFFFFF;
    --bg-card: #FFFFFF;
    --primary-text: #6B2400;
    --rating-text: #6B2400;
    --verified-text: #0B3D24;
}
/* (2) Explizit dunkel: [data-theme="dark"].high-contrast (Spezifitaet 0-2-0, schlaegt (1)) */
[data-theme="dark"].high-contrast {
    --ink: #FFFFFF;
    --ink-light: #FFFFFF;
    --ink-muted: #E5E5E5;
    --ink-subtle: #E5E5E5;
    --border: #FFFFFF;
    --border-subtle: #CCCCCC;
    --bg: #000000;
    --bg-card: #000000;
    --primary-text: #FFD8B0;
    --rating-text: #FFD8B0;
    --verified-text: #A8F0C6;
}
/* (3) Kein Attribut + Systempraeferenz dunkel: nur wenn NICHT explizit auf hell gestellt
   (gleiches :not([data-theme="light"])-Muster wie der bestehende Dark-Mode-Fallback oben). */
@media (prefers-color-scheme: dark) {
    html.high-contrast:not([data-theme="light"]) {
        --ink: #FFFFFF;
        --ink-light: #FFFFFF;
        --ink-muted: #E5E5E5;
        --ink-subtle: #E5E5E5;
        --border: #FFFFFF;
        --border-subtle: #CCCCCC;
        --bg: #000000;
        --bg-card: #000000;
        --primary-text: #FFD8B0;
        --rating-text: #FFD8B0;
        --verified-text: #A8F0C6;
    }
}

/* Nicht-farbbasierte Unterscheidungshilfen (WCAG 1.4.1) + kraeftigerer Fokus-Ring. */
html.high-contrast a:not(.btn) { text-decoration: underline; }
html.high-contrast .btn-outline { border-width: 2px; }
html.high-contrast .result-card,
html.high-contrast .stat-card,
html.high-contrast .trade-card,
html.high-contrast .quote-card { border-width: 2px; }
html.high-contrast a:focus-visible,
html.high-contrast button:focus-visible,
html.high-contrast input:focus-visible,
html.high-contrast select:focus-visible,
html.high-contrast textarea:focus-visible {
    outline: 3px solid var(--primary); outline-offset: 2px;
}

/* ===================================================
   SCHRIFTGROESSE-STUFEN (HWB-A11Y-01)
   Skaliert die Root-Fontsize -- alle rem-basierten Text-/Abstandswerte im Design-System
   wachsen proportional mit, ohne dass jede Komponente einzeln angefasst werden muss.
   =================================================== */
html.a11y-font-large { font-size: 112%; }
html.a11y-font-xl { font-size: 125%; }
@media (max-width: 768px) {
    .hb-map-layout { grid-template-columns: 1fr; }
    .hb-map-layout #hb-map { position: static; height: 380px; min-height: 380px; }
    /* "Karte oben fixiert" (HWB-KARTE-DESIGN-01 Pkt. 5) -- einfachste saubere Loesung:
       reines CSS-Reordering statt eines Liste/Karte-Toggles, der ein Leaflet-
       invalidateSize() beim Sichtbarwerden noetig gemacht haette. Beide Spalten bleiben
       gerendert, nur die visuelle Reihenfolge dreht sich um. */
    .hb-map-layout .hb-map-col { order: -1; }
    .hb-top-cities { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    /* Touch-Ziele >= 44px fuer Filter-Controls */
    .hb-map-filters__row input[type="text"],
    .hb-map-filters__row select,
    .hb-map-filters__row .btn { padding: 12px 14px; min-height: 44px; box-sizing: border-box; }
    .hb-toggle { padding: 8px 0; min-height: 44px; }
    .hb-map-filters__row--toggles { row-gap: 4px; }
}

/* ===================================================
   HWB-D4 (Design-Welle 4): Admin-/Betriebs-Cockpit -- geteilte Klassen
   Loest die bisher je Admin-Template kopierten .admin-kpi/.admin-card/.admin-table-
   Regeln (identisch in admin-ops/admin-users/admin-marketplace/admin-analytics/
   admin-revenue) durch eine zentrale Definition ab. Einzelne Templates duerfen
   weiterhin lokale Ergaenzungen behalten (hoehere Spezifitaet gewinnt wie ueblich),
   aber die Basis kommt von hier -- Material-3-Denke: Dichte + Scanbarkeit, keine
   Dekoration. Nur fuer /admin/**-Templates, keine kundensichtbare Flaeche.
   =================================================== */

/* Rueck-Link "&larr; Zurueck zum Admin-Panel" -- vorher auf jeder Seite als
   identisches Inline-style dupliziert. */
.admin-back-link {
    display: inline-block; font-size: 0.88rem; color: var(--primary-text); font-weight: 500;
}

/* Kopfzeile: Titel/Beschreibung links, Aktion (Button/Zaehler/Filter) rechts --
   vorher auf fast jeder Seite als identisches Inline-style-Flex dupliziert. */
.admin-page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3);
}

/* KPI-Kachel: Label + grosse Zahl, tabular-nums fest eingebaut (Kennzahlen duerfen beim
   Aktualisieren nicht "hüpfen"). */
.admin-kpi {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: var(--space-5); text-align: center;
}
.admin-kpi-label {
    font-size: 0.78rem; color: var(--ink-muted); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: var(--space-1);
}
.admin-kpi-value {
    font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Generische Karte fuer Charts/Listen-Container. */
.admin-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: var(--space-6);
}
.admin-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-2); }

/* Generische Datentabelle: Zeilen-Hover fuers schnelle Scannen, optionaler sticky-Header
   fuer lange Listen (Klasse .admin-table--sticky auf denselben <table>-Tag). */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th {
    text-align: left; color: var(--ink-muted); font-weight: 600; padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
}
.admin-table td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.admin-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--border-subtle); }
.admin-table--sticky thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }

/* Status-Pills: erweitert die bestehende .badge-Basis (siehe .badge-trade/.badge-verified/
   .badge-premium oben) um die drei Admin-Statuszustaende gruen/amber/rot -- konsistent mit
   .tender-frist-pill/.au-badge (gleiche Farb-Token, bewusst theme-fixe helle Chips mit
   dunkel genug kontrastierendem Text statt theme-wechselnden Tokens, siehe Kommentar bei
   .tender-frist-pill). Halbsemantik: gruen = ok/erledigt, amber = wartet, rot = Problem. */
.badge-status-ok     { background: #ECFDF5; color: var(--verified-text); }
.badge-status-warn   { background: #FFF7ED; color: #B45309; }
.badge-status-danger { background: #FEF2F2; color: #B91C1C; }

/* Empty-State-Icon-Variante fuer "alles erledigt"-Zustaende (Review-Queues leer) --
   erweitert .empty-state-icon um einen gefuellten gruenen Kreis statt des neutralen
   grauen Outline-Icons (siehe .empty-state-icon svg oben), dieselbe Fixfarben-Konvention
   wie .icon-box--success. */
.empty-state-icon--success {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--space-4);
    background: rgba(16,185,129,0.12);
    display: flex; align-items: center; justify-content: center;
}
.empty-state-icon--success svg { width: 1.6rem; height: 1.6rem; color: var(--verified-text); }

/* Wiederkehrendes "Review-Queue"-Karten-Muster -- vorher als .ar-card/.cr-card/.or-card/
   .review-card (Behoerden-Freigaben/Claim-Antraege/Registrierungs-Antraege/Bewertungs-
   Moderation) viermal fast identisch dupliziert (gleiches Padding/Radius/Meta-Typo/
   Actions-Leiste). Reason-/Message-Box (.cr-reason/.or-reason/.review-text) ebenfalls
   identisch -- ein Name: .admin-queue-message. */
.admin-queue-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: var(--space-6); transition: opacity var(--dur-hover) var(--ease-out);
}
.admin-queue-meta { font-size: 0.82rem; color: var(--ink-muted); }
.admin-queue-message {
    font-size: 0.92rem; color: var(--ink-light); line-height: 1.6; margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4); background: var(--border-subtle); border-radius: var(--radius-btn);
    white-space: pre-wrap;
}
.admin-queue-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.admin-queue-documents { margin: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.admin-queue-doc-btn {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg-card);
    font-size: 0.82rem; color: var(--ink-light); cursor: pointer; width: fit-content;
}
.admin-queue-doc-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Konto-Badge "Test" (Seed-Testkonten in der Nutzerverwaltung, /admin/users) -- einziger
   Ort im Admin-Bereich, ergaenzt die .badge-Basis um eine eigene Info-Farbe statt gruen/
   amber/rot (kein Status, reine Kennzeichnung). Gleiche theme-fixe helle Chip-Konvention
   wie .badge-trade/.badge-verified/.badge-premium oben (kein Dark-Mode-Override). */
.badge-account-test { background: #EFF6FF; color: #2563EB; margin-left: 6px; }