/* ===== STANDORTE-SECTION (Home) =====
 * Verwendet ausschließlich die auf der Home-Seite (landing-new.css) definierten
 * CSS-Variablen: --black, --white, --cream, --gold, --gold-light, --grey,
 * --serif (Cormorant Garamond), --sans (Montserrat).
 *
 * Body-Text-Konvention auf Home: Montserrat 13px / weight 300 (siehe landing-new.css .location-detail).
 * Buttons: .btn-primary-Stil (Gold-Hintergrund, schwarzer Text).
 *
 * Diese Datei wird NUR auf der Home eingebunden — die Lippen-Landingpage
 * holt sich ihre Locations-Styles weiterhin aus lippen-landing.css.
 */

/* Section-Wrapper */
.locations {
    padding: 80px 48px;
    background: var(--cream);
}
.locations-inner {
    max-width: 1560px;
    margin: 0 auto;
}

/* Eyebrow + Title + Lede — werte 1:1 von .section-label / .section-title (landing-new.css)
 * damit die Home-Sektion typografisch konsistent zu „Über uns", „Unser Team",
 * „Unsere Behandlungen" rendert.
 */
.locations-head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: end; margin-bottom: 56px;
}
.locations-head .eyebrow {
    font-family: var(--sans);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 20px;
}
.locations-head h2 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(38px, 5vw, 62px); line-height: 1.1;
    color: var(--black);
    margin: 0;
}
.locations-head h2 em {
    font-style: italic; color: var(--gold); font-weight: 400;
}
.locations-head .lede {
    font-family: var(--sans);
    font-size: 14px; font-weight: 300; line-height: 1.6;
    color: var(--black);
    margin: 0;
}

/* Card-Grid */
.locations-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}

/* Einzelne Location-Card */
.location {
    border-top: 1px solid rgba(10, 10, 10, 0.15);
    padding: 28px 0;
}
.location-city {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px, 3.4vw, 48px); line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--black);
    margin: 0 0 16px;
}

/* Map — flacher (16/9 → "Bildschirm-Format" statt fast quadratisch) */
.location-map {
    aspect-ratio: 16 / 9;
    background: var(--white);
    margin: 0 0 22px;
    border: 1px solid rgba(10, 10, 10, 0.08);
    overflow: hidden;
    position: relative;
}
.location-map iframe {
    width: 100%; height: 100%; border: 0; display: block;
    filter: grayscale(0.25) contrast(1.02);
}

/* Adress-/Kontaktdaten als Definitions-Liste */
.location-data {
    display: grid; grid-template-columns: 84px 1fr;
    gap: 12px 22px;
    margin: 0 0 22px;
}
.location-data dt {
    font-family: var(--sans);
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--grey);
    padding-top: 4px;
}
.location-data dd {
    font-family: var(--sans);
    font-size: 13px; font-weight: 300; line-height: 1.5;
    color: var(--black);
    margin: 0;
}

/* Optionaler Note-Text unter den Daten */
.location-note {
    font-family: var(--sans);
    font-size: 13px; font-weight: 300; line-height: 1.6;
    color: var(--grey);
    margin: 0 0 24px;
}

/* Termin-Button (matcht .btn-primary aus landing-new.css) */
.location-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    padding: 14px 24px;
    border: 0;
    white-space: nowrap;
    transition: background 0.3s, transform 0.2s;
}
.location-link:hover {
    background: var(--gold-light);
    color: var(--black);
    transform: translateY(-1px);
}
/* Pfeil-Span auf der Home weglassen — Buttons wirken so ruhiger und passen */
.location-link span { display: none; }

/* Tablet (≤ 980px) — Header darf einspaltig werden, Cards bleiben 2-spaltig */
@media (max-width: 980px) {
    .locations-head { grid-template-columns: 1fr; gap: 16px; }
    .locations-head .lede { max-width: none !important; }
}

/* Mobile (≤ 720px) — Cards bleiben 2-spaltig; Adresse/Telefon stacken vertikal */
@media (max-width: 720px) {
    .locations { padding: 56px 18px; }
    .locations-head { margin-bottom: 32px; gap: 12px; }
    .locations-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .location { padding: 18px 0; }
    .location-city { font-size: clamp(22px, 6vw, 32px); margin-bottom: 12px; }
    .location-map { aspect-ratio: 1/1; margin-bottom: 14px; }

    /* Label oben, Wert darunter — statt zweispaltig */
    .location-data {
        display: grid; grid-template-columns: 1fr;
        gap: 0; margin-bottom: 16px;
    }
    .location-data dt {
        font-size: 9px; letter-spacing: 0.18em;
        padding-top: 10px; padding-bottom: 4px;
    }
    .location-data dt:first-child { padding-top: 0; }
    .location-data dd {
        font-size: 12px;
        margin: 0;
    }

    .location-note { font-size: 12px; margin-bottom: 16px; }
    .location-link {
        font-size: 9px; letter-spacing: 0.14em;
        padding: 11px 14px;
        white-space: normal; /* darf auf engen Karten umbrechen, sonst Overflow */
        line-height: 1.3;
        text-align: center;
    }
    .locations-head h2 { font-size: clamp(26px, 6.8vw, 38px); }
}