/* ==============================================
   PAGE LAYOUT COMPONENT
   Zentrale Abstände für alle Listen-Seiten
   (Projekte, Marktplatz, Tipps, Kieztalk)
   ============================================== */

/* --- HERO TEASER SECTION (New Standard) --- */
.hero-teaser {
    background-color: var(--bg-card);
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px 0 var(--border-color);
    padding: 3rem 2rem;
    margin-top: 2.5rem;
    /* Harmonized with margin-bottom */
    /* User Request: Space between header and hero */
    margin-bottom: 2.5rem;
    text-align: center;
    border-radius: 0;
    /* Hard edges for Brutalism */
    position: relative;
    /* overflow: hidden; Removed to allow potential badges/overlays if needed later, but standard is clean */
}

.hero-teaser h1 {
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -1px;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    /* Consistent size */
}

.hero-teaser .lead {
    font-size: 1.25rem;
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero-teaser .header-actions-row {
    margin-top: 2rem;
    justify-content: center;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}

/* Hero-Action Buttons: farbig im Light Mode, kontrastsicher im Dark Mode via Tokens */
.hero-teaser .header-actions-row .btn-secondary,
.hero-teaser .header-actions-row .btn-action {
    background: var(--hero-action-secondary-bg);
    color: var(--hero-action-secondary-text);
    border-color: var(--hero-action-secondary-border);
}

.hero-teaser .header-actions-row .btn-primary {
    background: var(--hero-action-primary-bg);
    color: var(--hero-action-primary-text);
    border-color: var(--hero-action-primary-border);
}

.hero-teaser .header-actions-row .btn-primary:hover,
.hero-teaser .header-actions-row .btn-primary:active,
.hero-teaser .header-actions-row .btn-secondary:hover,
.hero-teaser .header-actions-row .btn-secondary:active,
.hero-teaser .header-actions-row .btn-action:hover,
.hero-teaser .header-actions-row .btn-action:active {
    background: var(--hero-action-hover-bg);
    color: var(--hero-action-hover-text);
    border-color: var(--hero-action-hover-border);
}

/* --- SMALL HERO VARIANT (50% reduced) --- */
.hero-teaser.hero-small {
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    /* Harmonized */
}

.hero-teaser.hero-small h1 {
    font-size: 1.5rem;
    /* 2.5rem -> 1.5rem */
    margin-bottom: 0.5rem;
}

.hero-teaser.hero-small .lead {
    font-size: 1rem;
    /* 1.25rem -> 1rem */
    margin-bottom: 1rem;
}

.hero-teaser.hero-small .header-actions-row {
    margin-top: 1rem;
    gap: 0.5rem;
}

.hero-teaser.hero-small .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* --- Seiten-Header mit Überschrift (Legacy / Fallback) --- */
.page-header {
    padding: 2rem 0 1.5rem 0;
}

.page-header h1 {
    margin-bottom: 0.5rem;
}

.page-header .lead {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

/* --- Button-Zeile (Filter + Erstellen) --- */
.header-actions-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Einklappbarer Filter-Bereich --- */
.filter-wrapper,
#filter-wrapper,
#market-filters,
#places-filter-wrapper,
#kieztalk-filters,
#expert-filters,
#cpt-filters {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* Status- und Kategorie-Filter-Bars */
.filter-bar-status,
.filter-bar-tags,
.filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Letzter Filter-Bar braucht keinen unteren Margin */
.filter-bar-tags:last-child,
.filter-bar:last-child {
    margin-bottom: 0;
}

/* Marktplatz-spezifische Filter-Zeilen */
.market-filter-tabs,
.market-category-scroll {
    margin-bottom: 0.75rem;
}

.market-category-scroll:last-child {
    margin-bottom: 0;
}

/* --- Cards Grid Abstand --- */
.clean-card-grid {
    margin-top: 0;
}

/* --- Kieztalk Feed Abstand --- */
.feed-container {
    margin-top: 0;
}