/* === 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;
        /* MOTION-KONZEPT (2026-09-02): Dauer allein reicht bei gestaffelten Sequenzen
           nicht (Hero-Einstieg/Scroll-Reveal-Stagger) -- ohne diese Zeile blieben
           spaetere Stufen noch fuer ihr volles animation-delay/transition-delay
           unsichtbar, bevor sie in ~0ms aufblitzen. Mit Null-Delay erscheint der
           Endzustand ueberall sofort, wie gefordert. */
        animation-delay: 0s !important;
        transition-delay: 0s !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 + /karte Ergebnis-Karten (Design-Elevation HWB-SUCHE-DESIGN-01, 2026-09-01;
   kompaktiert HWB-LISTEN-KOMPAKT-01, 2026-09-03 nach Betreiber-Screenshot-Befund: vorher
   drei Zeilen pro Eintrag -- Titel / eigene Badge-Zeile / Meta-Zeile -- macht > 110px hohe,
   halbleere Boxen; auf /karte fehlte die Stadt zusaetzlich ganz aus der gerenderten Zeile) ===
   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 genutzt (Search-before-
   Build-Pruefung 2026-09-01/09-03) -- 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); die `.search-result-card__meta .badge`-
   Regel weiter unten ist eine reine GROESSEN-Verfeinerung innerhalb dieser Karte
   (Descendant-Selektor, .badge selbst bleibt unangetastet).

   Struktur JETZT: EINE Titel-Zeile (fett, ellipsis, Rating rechts daneben) + EINE
   Meta-Zeile (Gewerk-Chip · Stadt · Badges · Status/Distanz), CTA (nur /suche) rechts
   in derselben Kartenzeile statt als eigener Block darunter. Ziel-Hoehe ~56-60px pro
   Eintrag (vorher > 110px). search.html UND listings-map.js#renderList() teilen exakt
   dieses Markup -- keine Divergenz (Betreiber-Auftragserweiterung 2026-09-03). */
.search-result-card {
    position: relative;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 9px 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);
}
/* Flache Elevation (Betreiber-Vorgabe "kein Kachel-Hopping" bei einer dichten Liste):
   1px statt vorher 2px Anhebung, reagiert automatisch auf prefers-reduced-motion (siehe
   globale Regel oben im File). */
.search-result-card:hover { transform: translateY(-1px); 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(-1px); }

/* "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. Gilt nur fuer /suche (dort ein <div>-Wrapper);
   auf /karte ist die ganze Karte selbst ein <a> (listings-map.js), diese Klasse bleibt
   dort ungenutzt. */
.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; display: flex; flex-direction: column; gap: 3px; }
.search-result-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); min-width: 0; }
.search-result-card__title {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 0.95rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-card__rating { flex: 0 0 auto; white-space: nowrap; font-size: 0.85rem; }
.search-result-card__rating-count { font-size: 0.72rem; color: var(--ink-muted); font-weight: 400; }

/* Die Meta-Zeile traegt jetzt ALLES (Gewerk-Chip, Stadt, Verifiziert-/Anzeige-Badge,
   Live-Status, Distanz) statt einer eigenen Badge-Zeile -- 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). overflow:hidden +
   flex-wrap:nowrap (ueberschreibt .result-meta's flex-wrap:wrap) haelt die Zeile auf
   Desktop einzeilig -- ueberzaehlige, am wenigsten wichtige Angaben (Distanz zuletzt)
   werden schlicht abgeschnitten statt die Karte zu strecken; Mobile hebt das unten wieder auf. */
.search-result-card__meta {
    position: relative; z-index: 2;
    margin-top: 0; font-size: 0.78rem; flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
}
.search-result-card__meta .badge { padding: 1px 8px; font-size: 0.68rem; vertical-align: middle; }
.search-result-card__meta .badge svg { width: 11px; height: 11px; }

.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. Kompakter als vorher (weniger Innenabstand), damit
   er in dieselbe schlanke Zeile passt statt einen eigenen Block zu brauchen. */
.search-result-card__cta {
    display: inline-flex; align-items: center; padding: 6px 14px;
    border-radius: var(--radius-btn); font-size: 0.8rem; 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: 8px; padding: 10px var(--space-4); }
    .search-result-card__actions { display: flex; justify-content: flex-end; }
    /* Auf Mobile ist die Karte ohnehin schon gestapelt (kein enges 56px-Ziel mehr) --
       hier darf die Meta-Zeile wieder umbrechen statt Angaben abzuschneiden. */
    .search-result-card__meta { flex-wrap: wrap; overflow: visible; white-space: normal; }
}

/* 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: 9px var(--space-5);
}
.search-result-skeleton-card__lines { max-width: 320px; }
/* HWB-LISTEN-KOMPAKT-01 (2026-09-03): Skeleton-Platzhalter auf die neue, kompakte
   Kartenhoehe verkleinert (Descendant-Override, .skeleton-title/.skeleton-text selbst
   bleiben die sitezentralen Bausteine unangetastet) -- sonst waere der Skeleton hoeher
   als die tatsaechliche Karte und es gaebe beim Nachladen einen Layout-Shift. */
.search-result-skeleton-card .skeleton-title { height: 14px; width: 45%; margin-bottom: 6px; }
.search-result-skeleton-card .skeleton-text { height: 11px; margin-bottom: 0; }
.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; }
/* Gleiche Formel wie .hero-secondary-cta a -- ein Link auf dauerhaft dunklem Grund
   (unabhaengig vom Theme, wie .hero) braucht einen eigenen hellen Ton statt des globalen
   "a { color: var(--ink); }"-Standards (der hier fast unlesbar waere). */
.claim-cta__link { color: rgba(255,255,255,0.75); text-decoration: underline; }
.claim-cta__link:hover { color: #fff; }

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

/* === Profil-Design-Elevation (Betriebs-Profilseite, zweitwichtigste Verbraucher-Flaeche) ===
   Ergaenzt die .profile-*-Basisklassen oben (die bleiben unveraendert) um token-basierte
   Bausteine -- ersetzt v. a. die vormals rohen Hex-Gradienten der beiden Anfrage-CTA-Boxen
   (waren im Dark Mode blind: fixes Hellorange/Weiss auf dunklem Grund). Gleiches rgba-Token-
   Muster wie .form-notice-box/.reg-highlight-box (Betreiber-Anordnung 2026-08-28: Nur
   Tokens, nie ad-hoc-Hex im View-Code -- gilt portfolioweit auch fuer Thymeleaf). */
.profile-header__top {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: var(--space-4);
}
.profile-header__badges { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

.profile-trust-row {
    display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: 20px;
    padding: 16px 20px; background: var(--bg); border-radius: 10px;
}
.profile-trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--ink-light); }
.profile-trust-item .icon-box { width: 26px; height: 26px; }

.profile-info-item__value { display: flex; align-items: center; gap: var(--space-2); }
.profile-info-item__value .icon-box { width: 26px; height: 26px; }
.profile-info--single { grid-template-columns: 1fr; max-width: 340px; }

.profile-cta-box {
    background: rgba(255,140,66,0.08); border: 2px solid rgba(255,140,66,0.25);
    border-radius: var(--radius-card); padding: 28px; margin-bottom: var(--space-5);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-4);
}
.profile-cta-box--center { text-align: center; justify-content: center; flex-direction: column; padding: 40px; }
.profile-cta-box__title { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-1); }
.profile-cta-box__desc { color: var(--ink-muted); font-size: 0.9rem; margin: 0; }
.profile-cta-box__btn { white-space: nowrap; }
.profile-cta-box__heading { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-2); }
.profile-cta-box__lead {
    color: var(--ink-muted); font-size: 1rem; margin-bottom: var(--space-5);
    max-width: 500px; margin-left: auto; margin-right: auto;
}
.profile-cta-box__fineprint { font-size: 0.78rem; color: var(--ink-subtle); margin-top: var(--space-3); }
[data-theme="dark"] .profile-cta-box { background: rgba(255,157,92,0.1); border-color: rgba(255,157,92,0.3); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .profile-cta-box { background: rgba(255,157,92,0.1); border-color: rgba(255,157,92,0.3); }
}
.profile-final-cta { padding: 48px 0; }

/* Sticky-Mobile-CTA (verbessert statt dupliziert -- der Bar existierte bereits, nur als
   Inline-Style; env(safe-area-inset-bottom) haelt den Button auf Geraeten mit Home-Indikator
   (iPhone) aus der Gesten-Zone frei, statt am unteren Rand zu kleben). */
.profile-sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-card); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.profile-sticky-cta__btn { width: 100%; text-align: center; padding: 14px; font-size: 1rem; }
[data-theme="dark"] .profile-sticky-cta { box-shadow: 0 -4px 16px rgba(0,0,0,0.35); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .profile-sticky-cta { box-shadow: 0 -4px 16px rgba(0,0,0,0.35); }
}
/* Selbstkritik-Fund (Chrome-Rendering-Check): der sitewide A11y-Rundbutton (.a11y-widget,
   fixed bottom:20px/right:20px, z-index 9990) ueberlagerte auf Mobile den rechten Rand des
   neuen Sticky-CTA-Buttons -- die Profilseite ist die einzige Seite mit eigener Sticky-
   Bottom-Leiste. Neue, page-scoped Regel (ergaenzt .a11y-widget, aendert es nicht) statt
   Eingriff in fragments/layout.html/die sitewide Basis-Regel. */
@media (max-width: 768px) {
    body.profile-page .a11y-widget { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* === 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-muted); /* ink-subtle fiel im Axe-Scan durch */
    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); }
/* Betreiber-Befund 2026-09-02 Pkt. 3 "generische Top-Staedte-Kacheln": von grossen
   zweizeiligen Grid-Kacheln auf kompakte einzeilige Chips umgestellt -- Name und Zahl
   in EINER Zeile pro Stadt, flex-wrap statt Grid (nimmt nur so viel Breite wie noetig,
   deutlich weniger Vertikalflaeche als vorher). */
.hb-top-cities {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.hb-citycard {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 7px 12px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 999px;
    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.88rem; font-weight: 600; color: var(--ink); }
.hb-citycard__count { font-size: 0.78rem; color: var(--ink-muted); font-family: var(--font-mono); white-space: nowrap; }

/* 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). HWB-KARTE-POLITUR-02 (2026-09-03): vorher feste Hex-Werte mit
   der Begruendung "Leaflet-Popups sind immer hell" -- das stimmt nicht, ein Leaflet-Popup
   haengt normal im Dokument-DOM (leaflet-popup-pane liegt IM Karten-Container) und erbt
   CSS-Custom-Properties ganz normal von :root/[data-theme] wie jedes andere Element. Auf
   Tokens umgestellt, damit der Betreiber-Befund "Popups dark-tauglich" greift; auch die
   Inline-Styles in listings-map.js#popupHtml() wurden auf var(--token) umgestellt. */
.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: var(--ink); line-height: 1.3;
}
.leaflet-popup-content .hb-popup .hb-pop-addr {
    font-size: 0.82rem; color: var(--ink-muted); 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: rgba(255,140,66,0.15); color: var(--primary-text); }
.hb-pop-badge--verified { background: rgba(16,185,129,0.15); color: var(--success); }
.hb-pop-badge--trade { background: var(--border-subtle); color: var(--ink-light); }
/* Begehrlichkeits-Welle (Betreiber-Auftrag 2026-09-02): Claim-Hinweis im Karten-Popup fuer
   ungeclaimte Betriebe (listings-map.js#popupHtml). */
.hb-pop-claim-hint {
    font-size: 0.76rem; line-height: 1.5; color: var(--ink-muted);
    background: rgba(255,140,66,0.1); border-radius: 6px; padding: 6px 8px; margin: 6px 0 8px;
}
.hb-pop-claim-hint a { color: var(--primary-text); font-weight: 600; text-decoration: underline; }
.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: var(--ink); color: var(--bg); }
.hb-pop-btn--primary { background: var(--primary); color: var(--on-primary); }

/* Meta-Zeile der Ergebnis-Karten (siehe /suche+/karte-Ergebnis-Karten-Abschnitt oben):
   .hb-status ist eine Karten-eigene Klasse, hier auf die kompaktere Meta-Schriftgroesse
   herunterskaliert, damit sie nicht groesser wirkt als Gewerk-Chip/Stadt/Distanz daneben. */
.search-result-card__meta .hb-status { font-size: 0.78rem; }

/* Map-Layout: Karte rechts klebrig, volle Resthoehe des Viewports auf Desktop
   (Betreiber-Befund 2026-09-02 Pkt. 2 -- vorher feste 600px, wirkte neben der
   dichteren Ergebnisliste zu klein). 100vh minus Sticky-Offset (top:80px) minus
   etwas Luft unten (32px), damit die Karte nicht an der Fensterkante klebt. */
.hb-map-layout #hb-map {
    height: calc(100vh - 112px); 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; }

/* ===================================================
   DARK MODE FUER LEAFLET (HWB-KARTE-POLITUR-02, 2026-09-03)
   Betreiber-Screenshot (Dark Mode) zeigte helle OSM-Kacheln als Stilbruch auf /karte
   (#hb-map) -- derselbe Bruch besteht auf der Mini-Karte von /suche (search.html gibt
   ihrem #map-Container zusaetzlich die Klasse .suche-map, EIGENS dafuer vergeben, weil
   die blanke ID #map auch auf seo-landing.html verwendet wird und dort ausserhalb dieses
   Auftrags liegt -- eine ID-Regel haette diese Seite ungewollt mitgetroffen).

   Nur die Kachel-EBENE (.leaflet-tile-pane) bekommt den Filter, nicht der ganze Karten-
   Container -- Marker-/Popup-/Overlay-Pane liegen in eigenen Geschwister-Panes und bleiben
   dadurch automatisch unangetastet (kein Marker/Popup wird invertiert). invert+hue-rotate
   ist das etablierte Leaflet-Dark-Muster (verhindert einen neuen Tile-Provider/eine neue
   Lizenzabhaengigkeit). Folgt derselben data-theme/prefers-color-scheme-Schaltung wie der
   Rest der Seite (siehe Kommentar bei [data-theme="dark"] weiter oben im File). */
/* Betreiber-Entscheid 2026-09-03: KEIN Dark-Filter auf den Kacheln — die invertierte
   Karte war kaum lesbar. Die Landkarte bleibt in BEIDEN Themes hell (Lesbarkeit schlaegt
   Theme-Konsistenz); ein dezenter Token-Rahmen fasst die helle Flaeche im dunklen UI. */
#hb-map, .suche-map {
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    overflow: hidden;
}

/* Popups + Controls (Zoom, Attribution) dark-tauglich. hb-pop-* selbst nutzt seit
   HWB-KARTE-POLITUR-02 bereits Tokens (siehe oben) -- hier nur die von Leaflet selbst
   gestellte Popup-Chrome (weisse Sprechblasen-Huelle) und die Steuerelemente. */
#hb-map .leaflet-popup-content-wrapper,
.suche-map .leaflet-popup-content-wrapper,
#hb-map .leaflet-popup-tip,
.suche-map .leaflet-popup-tip {
    background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-md);
}
#hb-map .leaflet-popup-close-button,
.suche-map .leaflet-popup-close-button { color: var(--ink-muted) !important; }
#hb-map .leaflet-control-zoom a,
.suche-map .leaflet-control-zoom a {
    background: var(--bg-card); color: var(--ink); border-color: var(--border) !important;
}
#hb-map .leaflet-control-zoom a:hover,
.suche-map .leaflet-control-zoom a:hover { background: var(--border-subtle); }
/* Tokens statt rgba-Literalen: var(--bg-card) loest sich automatisch ins jeweilige
   Theme auf (weiss im Hellen, dunkles Navy im Dunkeln) -- kein manuelles Gating noetig,
   anders als bei den Popup-/Kachel-Regeln oben, die feste Farbwerte gebraucht haetten. */
#hb-map .leaflet-control-attribution,
.suche-map .leaflet-control-attribution {
    background: var(--bg-card); color: var(--ink-muted);
}
#hb-map .leaflet-control-attribution a,
.suche-map .leaflet-control-attribution a { color: var(--ink-light); }

/* Cluster-Kreise (MarkerClusterGroup, nur /karte -- /suche clustert nicht) in unserer
   Orange-Familie statt Leaflet.markercluster's Standard-Ampel (gruen/gelb/rot). ID-
   Selektor (#hb-map) statt eine hoehere Ladereihenfolge vorauszusetzen: MarkerCluster.
   Default.css wird in listings-map.html NACH style.css eingebunden, gewinnt also bei
   gleicher Spezifitaet -- die ID hebt uns zuverlaessig darueber, unabhaengig von der
   Link-Reihenfolge im Head/Body. Groessenstufen (30/40/50px) bleiben Leaflet.markercluster's
   eigene -- nur Farben/Ring/Zahl-Typografie sind unsere. */
#hb-map .marker-cluster-small,
#hb-map .marker-cluster-medium,
#hb-map .marker-cluster-large {
    background: rgba(255,140,66,0.22);
}
#hb-map .marker-cluster-small div,
#hb-map .marker-cluster-medium div,
#hb-map .marker-cluster-large div {
    background: var(--primary);
    border: 2px solid var(--bg-card);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#hb-map .marker-cluster span {
    color: var(--on-primary);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ===================================================
   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); }
}

/* ===================================================
   PWA INSTALL-/PUSH-BANNER (PWA-Fertigstellung, 2026-09-02)
   Dezenter, unten fixierter Hinweis -- ueberlagert statt schiebt den Seiteninhalt (kein
   Layout-Shift). Sichtbarkeits-/Frequenzsteuerung (Besuchszaehler, 14-Tage-Snooze nach
   "Später", iOS-Erkennung, Dashboard-Push-Opt-in): static/js/pwa.js. Respektiert
   "Bewegung reduzieren" automatisch ueber die globale @media-Regel ganz oben in dieser
   Datei (keine eigene Ausnahme noetig).
   =================================================== */
.pwa-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9995;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-standard);
}
.pwa-banner--visible { transform: translateY(0); }
.pwa-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.pwa-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.pwa-banner-text strong { font-size: 0.92rem; color: var(--ink); font-weight: 700; }
.pwa-banner-text span { font-size: 0.82rem; color: var(--ink-light); line-height: 1.4; }
.pwa-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.pwa-banner-later {
    background: transparent; border: 1px solid var(--border); color: var(--ink-light);
    padding: 9px 16px; border-radius: var(--radius-btn);
    font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: color var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard);
}
.pwa-banner-later:hover { color: var(--ink); border-color: var(--ink-muted); }
.pwa-banner-cta {
    background: var(--primary); color: var(--on-primary); border: none;
    padding: 9px 18px; border-radius: var(--radius-btn);
    font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; cursor: pointer;
    transition: background var(--dur-hover) var(--ease-standard);
}
.pwa-banner-cta:hover { background: var(--primary-hover); }
.pwa-banner-later:focus-visible, .pwa-banner-cta:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

/* Verhindert Ueberlappung mit dem A11y-Rundbutton unten rechts, solange ein PWA-Banner
   sichtbar ist (pwa.js setzt/entfernt die Klasse auf body) -- gleiches Muster wie die
   body.profile-page-Regel weiter oben im A11y-Abschnitt. */
body.pwa-banner-active .a11y-widget { bottom: calc(78px + env(safe-area-inset-bottom)); }

@media (max-width: 560px) {
    .pwa-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .pwa-banner-actions { justify-content: center; }
}

/* ===================================================
   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; }
    /* 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; }

/* ===================================================
   DESIGN-REST (2026-09-02): tender-detail.html + hilfe.html auf die
   Plattform-Formensprache gehoben. Nur NEUE Klassen -- bestehende Regeln
   oben bleiben unveraendert. Beide Templates nutzen ausserdem etliche
   bereits vorhandene globale Klassen unveraendert weiter (.card,
   .icon-box, .badge-trade, .tender-frist-pill, .claim-cta, .form-field,
   .form-hint, .reg-checkbox, .skeleton*, .empty-state*, .faq-*). === */

/* Ruecklink oberhalb der Ausschreibungs-Detailseite -- gleiche Formel wie
   .admin-back-link, aber fuer den oeffentlichen Bereich (Primary-Text-Ton
   statt admin-neutral) und mit sichtbarem Hover-/Fokus-Zustand statt der
   bisherigen reinen Farbflaeche ohne jede Interaktions-Rueckmeldung. */
.tender-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.88rem; color: var(--primary-text); font-weight: 500;
    text-decoration: none; margin-bottom: var(--space-4);
    transition: gap var(--dur-hover) var(--ease-out);
}
.tender-detail-back:hover { gap: 9px; text-decoration: underline; }

/* Kopfzeile: Titel + Badge-Reihe (Gewerk/Frist) -- ersetzt die bisherigen
   Ad-hoc-Inline-Styles (1.5rem-Titel, Flex-Reihe direkt am Element). */
.tender-detail-header { margin-bottom: var(--space-5); }
.tender-detail-title { font-size: var(--text-h2); font-weight: 800; margin: 0; }
.tender-detail-badges { display: flex; gap: 10px; align-items: center; margin-top: var(--space-3); flex-wrap: wrap; }

/* Kerndaten-Grid innerhalb der .card (Ort/Frist/Wert/Vergabeart) -- ein
   Feld = Icon + Label + Wert statt reiner Text-Staple, fuer bessere
   Scanbarkeit (Aufgabe: "klare Hierarchie"). */
.tender-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-5);
}
.tender-detail-field { display: flex; gap: 10px; align-items: flex-start; }
.tender-detail-field__body { min-width: 0; }
.tender-detail-label { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 2px; }
.tender-detail-value { font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.tender-detail-divider { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.tender-detail-desc-label { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: var(--space-1); }
.tender-detail-desc {
    font-size: 0.92rem; color: var(--ink-light); line-height: 1.65; white-space: pre-line; margin: 0;
}

/* Panel-Reihe fuer die zwei erklaerenden Hinweise (Vergabeunterlagen +
   Abgrenzung intern/extern) -- ein gemeinsames Icon+Text-Layout statt
   zweier optisch unterschiedlicher Bloecke. */
.tender-detail-panel { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.tender-detail-panel__body { font-size: 0.85rem; line-height: 1.6; color: var(--ink-muted); }
.tender-detail-panel__body strong { color: var(--ink); }

/* Theme-bewusste Info-Box (blau) -- ersetzt das bisherige harte Hex-Blau
   (#EFF6FF/#BFDBFE/#1E3A8A) der "Direkt hier bieten"-Erklaerung, gleiches
   rgba-Token-Muster wie .form-notice-box (Betreiber-Anordnung 2026-08-28:
   keine Ad-hoc-Hexwerte im View-Code). */
.info-notice-box {
    padding: 14px 16px; background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.32);
    border-radius: var(--radius-btn); font-size: 0.85rem; color: var(--ink-light); line-height: 1.6;
}
.info-notice-box strong { color: var(--ink); }

/* Theme-bewusste Erfolgs-Box -- ersetzt das bisherige harte Hex-Gruen
   (#ECFDF5/#A7F3D0) der Gebot-Erfolgsmeldung, gleiches Muster. */
.success-notice-box {
    padding: var(--space-4); background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.28);
    border-radius: var(--radius-btn); font-size: 0.9rem; color: var(--ink-light);
}
.success-notice-box strong { color: var(--verified-text); }
[data-theme="dark"] .success-notice-box strong { color: #34D399; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .success-notice-box strong { color: #34D399; }
}

/* Lade-Skeleton fuer die Detailseite (ersetzt den reinen "wird geladen"-Text) --
   wiederverwendet die bestehenden globalen .skeleton/.skeleton-title/.skeleton-text/
   .skeleton-card-Bausteine, nur das Layout drumherum ist neu. */
.tender-detail-skeleton { padding: var(--space-3) 0; }
.tender-detail-skeleton .skeleton-title { height: 30px; width: 70%; margin-bottom: var(--space-4); }
.tender-detail-skeleton .skeleton-badges { display: flex; gap: 10px; margin-bottom: var(--space-6); }
.tender-detail-skeleton .skeleton-badge { height: 24px; width: 96px; border-radius: 20px; }
.tender-detail-skeleton .skeleton-card { height: 160px; margin-bottom: var(--space-4); }
.tender-detail-skeleton .skeleton-card + .skeleton-card { height: 90px; }

/* ===================================================
   hilfe.html -- Themen-Karten statt Textwueste
   =================================================== */
.help-topic-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4); margin-bottom: var(--space-8);
}
.help-topic-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); text-decoration: none; color: var(--ink);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.help-topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.help-topic-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.help-topic-card__title { font-size: 0.98rem; font-weight: 700; margin: 0; }
.help-topic-card__desc { font-size: 0.85rem; color: var(--ink-muted); margin: 0; line-height: 1.5; }

/* Kompakter, freundlicher Seitenkopf (kein voller Marketing-.hero -- die
   Hilfe-Seite ist ein Nachschlage-Werkzeug, kein Funnel-Schritt). */
.help-intro { max-width: 62ch; }

/* FAQ-Frage als echtes interaktives Element (button-Verhalten): die
   bestehende .faq-question-Optik bleibt unveraendert, hier kommen nur
   Fokus-/Cursor-Zustaende hinzu, damit Tastatur-Fokus sichtbar ist. */
.faq-question[role="button"] { cursor: pointer; }
.faq-question[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Kontakt-/Wege-Karten am Seitenende -- Icon-Box statt freistehendem SVG,
   konsistente Kartenoptik mit dem Rest der Seite. */
.help-contact-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.help-contact-card .icon-box { margin-bottom: var(--space-1); }
.help-contact-card h3 { font-size: 0.95rem; font-weight: 600; margin: 0; }
.help-contact-card a { color: var(--primary-text); font-size: 0.88rem; font-weight: 500; }
.help-contact-card p { color: var(--ink-muted); font-size: 0.88rem; margin: 0; }

/* ===================================================
   MOTION-KONZEPT (2026-09-02) -- orchestrierter Seiten-Einstieg + Scroll-Reveals
   ===================================================
   Baut ausschliesslich auf den bestehenden Tokens (--dur-*, --ease-*) auf -- keine
   neuen Kurven, nur davon abgeleitete Werte (siehe UX_UI_CONTENT_GUIDELINES.md +
   WOW-LANDINGPAGE-PLAYBOOK.md im js-it-playbook: Hero-Einstieg 300-450ms gestaffelt
   60-80ms, dezent -- opacity + 8-12px translateY, nie mehr).

   1) SEITEN-EINSTIEG -- reiner CSS-Keyframe, KEIN JS noetig/beteiligt. LCP-sicher:
      es gibt ausserhalb der Animation keine dauerhafte opacity:0-Basisregel, die auf
      JS zum Entfernen angewiesen waere. Browser ohne Animations-Support zeigen den
      Endzustand (voll sichtbar) sofort. animation-fill-mode:both haelt Start-/End-
      zustand waehrend Delay/nach Ablauf, respektiert automatisch die globale
      prefers-reduced-motion-Regel oben (Dauer + Delay dort auf 0 gesetzt).
      .hero-enter am Hero-Container staffelt seine direkten Kinder in Dokument-
      reihenfolge (Eyebrow/Headline/Lead/Pills/CTAs/Visual); .hero-enter darf
      verschachtelt werden (z.B. Copy-Spalte staffelt zusaetzlich ihre eigenen Kinder).
      .hero-enter-1..4 sind die gleichen Schritte als Einzel-Klassen fuer Seiten ohne
      einheitlichen Hero-Container (Hilfe-Kopf) oder dynamisch nachgeladenen Inhalt
      (Ausschreibungs-Detail: Klasse sitzt auf dem Container, der Endzustand ist,
      der Keyframe startet automatisch neu sobald bestehende Lade-Logik ihn von
      display:none auf sichtbar schaltet -- keine Aenderung an dieser Logik noetig). */
@keyframes heroEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-enter > *,
.hero-enter-1, .hero-enter-2, .hero-enter-3, .hero-enter-4 {
    animation: heroEnter calc(var(--dur-base) * 1.5) var(--ease-out) both;
}
.hero-enter > *:nth-child(1), .hero-enter-1 { animation-delay: 0ms; }
.hero-enter > *:nth-child(2), .hero-enter-2 { animation-delay: 70ms; }
.hero-enter > *:nth-child(3), .hero-enter-3 { animation-delay: 140ms; }
.hero-enter > *:nth-child(4), .hero-enter-4 { animation-delay: 210ms; }
.hero-enter > *:nth-child(5) { animation-delay: 280ms; }
.hero-enter > *:nth-child(n+6) { animation-delay: 350ms; }

/* 2) SCROLL-REVEALS -- getragen von static/js/motion.js (IntersectionObserver,
      fuegt .is-revealed einmalig hinzu). .reveal ist NUR dann initial unsichtbar,
      wenn motion.js sich selbst als aktiv meldet (html.js, ganz oben im <script>
      gesetzt) -- ohne JS/bei Fehlschlag bleibt der Inhalt reveal-frei sofort
      sichtbar (kein dauerhaft leerer Bildschirm). .reveal-stagger staffelt seine
      .reveal-Kinder ueber nth-child, gedeckelt auf 6 Stufen (mehr Karten teilen sich
      die letzte Stufe -- kein unendliches Nacheinander bei langen Listen). */
html.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
html.js .reveal.is-revealed { opacity: 1; transform: translateY(0); }
html.js .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
html.js .reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
html.js .reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
html.js .reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
html.js .reveal-stagger > .reveal:nth-child(n+6) { transition-delay: 300ms; }

/* 3) MIKROINTERAKTIONEN -- nur CSS, ergaenzt bestehende globale Klassen (spaeter in
      der Kaskade, ueberschreibt gezielt nur die transform-Deklaration, der Rest der
      jeweiligen Basis-Regel bleibt unveraendert). Button-Press einheitlich auf
      scale(0.98) statt der bisherigen reinen translateY(1px) (Motion-Tokens-Standard
      aus UX_UI_CONTENT_GUIDELINES.md: "Button-Press-Feedback: scale(0.97), ~100ms").
      Karten-Hover ist bereits sitesweit vereinheitlicht (translateY(-2px) +
      --shadow-hover, siehe .path-card/.trade-card/.result-card/.search-result-card/
      .help-topic-card/.testimonial-card); .problem-card/.feature-card auf
      behoerden-landing.html weichen ABSICHTLICH ab (siehe Kommentar dort: nuechterne
      Behoerden-Anmutung, keine Hover-Verspieltheit) und werden hier bewusst NICHT
      angeglichen. Chip-Press ergaenzt die vorhandenen Hover-Zustaende von
      .search-chip/.tender-city-chip um ein Druck-Feedback. */
.btn:active { transform: scale(0.98); }
.search-chip:active, .tender-city-chip:active { transform: scale(0.97); }
.help-topic-card:active { transform: translateY(-1px) scale(0.99); }