/* ============================================
   Standorte - Local Service-Area Landing Pages
   (/huepfburg-mieten-kaltenkirchen, /huepfburg-mieten-norderstedt, ...)
   Layout basics (.article-page, .article-grid, .article-card,
   .related-articles, .page-header, .page-title, .page-subtitle) come from
   RatgeberDesign.css / ArtikelDesign.css / layoutDesign.css — this file only
   adds classes specific to the Standorte pages. Product previews reuse
   .kategorie-produkte-grid / .kategorie-produkt-card / .kategorie-produkt-name
   from KategorienDesign.css unchanged.
   ============================================ */

.standort-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-2xl);
}

.standort-page h2 {
    margin: var(--spacing-xl) 0 var(--spacing-md);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
}

.standort-page section + section {
    margin-top: var(--spacing-xl);
}

/* Kopfbereich (H1/Untertitel) und jede direkte Sektion (Intro, Kontext,
   Kategorie-Links, Lieferung, Produkte, FAQ, weiterfuehrende Ratgeber, CTA)
   sitzen sonst direkt auf dem rotierenden Foto-Hintergrund des Layouts —
   deckendes Panel nach dem Muster von .Eventify-Jobs-card (JobsDesign.css)
   fuer Lesbarkeit. Ueber ">" auf direkte Kind-Sektionen begrenzt, damit
   nichts aus anderen Seiten (z.B. Kategorien) mitgetroffen wird. */
.standort-page .page-header,
.standort-page > section {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Zeilenlaenge der Fliesstext-Absaetze auf eine gut lesbare Masse begrenzen
   (~70-75 Zeichen), ohne die volle Panel-Breite fuer Grids (Kategorie-Links,
   Produkte, weiterfuehrende Ratgeber) einzuschraenken. */
.standort-page > section p {
    max-width: 72ch;
}

@media (max-width: 600px) {
    .standort-page {
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
    }

    .standort-page .page-header,
    .standort-page > section {
        padding: var(--spacing-lg);
    }
}

/* "Einsatzgebiete" / "Wir liefern in Ihrer Region" — Links zu den
   Standort-Landingpages, verwendet auf Kategorien/Huepfburgen.razor und
   UeberUns.razor. Beide Seiten haben dort denselben Lesbarkeits-Bug (Text
   direkt auf dem Foto-Hintergrund), daher hier an der Basis-Klasse fest —
   nicht auf .standort-page beschraenkt, sonst bleibt der Fix auf den beiden
   tatsaechlichen Einsatzorten (kategorie-page / ueberuns-page) wirkungslos. */
.standort-links {
    background: rgba(30, 30, 30, 0.95);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.standort-links p {
    color: var(--color-text-muted);
}

.standort-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .standort-links-list a {
        display: inline-block;
        padding: var(--spacing-xs, 4px) var(--spacing-md);
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        color: var(--color-text);
        font-size: var(--font-size-sm);
        text-decoration: none;
    }

        .standort-links-list a:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

@media (max-width: 600px) {
    .standort-links {
        padding: var(--spacing-lg);
    }
}