/* ===========================================================================
   Stadt-Varianten — Holz Metall Riedel
   Pro Stadt: eigenes Hero-Bild + farbige Stadtleiste (Eyebrow) im Hero.
   Hauptmarke und Layout bleiben identisch, der visuelle Anker
   pro Stadt entsteht über Hintergrund + Akzentfarbe.
   =========================================================================== */

/* ----- Stadtleiste / Eyebrow im Hero ----- */
.city-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    margin-bottom: 24px;
    background: var(--city-accent, var(--primary-color, #eb7013));
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.city-eyebrow::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Akzent unter der H1 als feiner Strich in Stadtfarbe */
.tischlerei-hero[class*="--"] h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.tischlerei-hero[class*="--"] h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    background: var(--city-accent, var(--primary-color, #eb7013));
    border-radius: 2px;
}

/* CTA-Button in Stadtfarbe (sehr dezent) */
.tischlerei-hero[class*="--"] .btn {
    border: 2px solid var(--city-accent, var(--primary-color, #eb7013));
}

.tischlerei-hero[class*="--"] .btn:hover {
    background: var(--city-accent, var(--primary-color, #eb7013));
    border-color: var(--city-accent, var(--primary-color, #eb7013));
}


/* ============================================================
   Variante: Horka — Werkstatt-Standort
   Anker: Hannes Riedel im Werkstattfoto, klassisches Marken-Orange
   ============================================================ */
.tischlerei-hero--horka {
    --city-accent: #c45a0e; /* primary-dark, gleiches Orange wie Marke, etwas tiefer */
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
                url('/assets/img/Bild_20250301_003.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* ============================================================
   Variante: Niesky — Holzhausstadt
   Anker: Holzfassade. Akzent: warmes Holzbraun
   ============================================================ */
.tischlerei-hero--niesky {
    --city-accent: #7c5538;
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.35)),
                url('/assets/img/Bild_20250301_001.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* ============================================================
   Variante: Görlitz — Europastadt mit Denkmalschutz
   Anker: Holzfenster nach Maß. Akzent: gedecktes Stadt-Blau
   ============================================================ */
.tischlerei-hero--goerlitz {
    --city-accent: #4a6a78;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
                url('/assets/img/Bild_20250301_019.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* ============================================================
   Variante: Löbau — Sechsstädtebund, Umgebindehaus
   Anker: Esstisch mit Holzwandverkleidung. Akzent: warmer Sandstein
   ============================================================ */
.tischlerei-hero--loebau {
    --city-accent: #a07b3e;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
                url('/assets/img/Bild_20250301_013.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* ----- Mobile Optimierung ----- */
@media (max-width: 768px) {
    /* background-attachment: fixed funktioniert auf iOS oft nicht performant */
    .tischlerei-hero--horka,
    .tischlerei-hero--niesky,
    .tischlerei-hero--goerlitz,
    .tischlerei-hero--loebau {
        background-attachment: scroll;
    }

    .city-eyebrow {
        font-size: 0.75rem;
        padding: 6px 14px;
        margin-bottom: 16px;
    }
}