@layer pages {
/* ============================================================
   JENNIQUE BEAUTY – pages/locations.css
   Primaer pages/standort.php (lokale SEO-Landingpages): Reasons-Balken,
   Standort-Landingpage-Facts/-Services. Die .content-text-section-Regeln
   werden zusaetzlich von pages/landing.php (vorbereitete SEO-Landingpages,
   s. content-schema.php) mitgenutzt, da beide Seiten dieselbe Komponente
   (components/content-text-section.php) einbinden. Die mit der Startseite
   GETEILTEN Anfahrt/Karte-Regeln liegen in components.css.
   Wird zusätzlich zu base.css + layout.css + components.css geladen.
   ============================================================ */

/* ============================================================
   CONTENT-TEXT-SECTION – generischer, rein redaktioneller Textabschnitt
   (Akzenttext + Ueberschrift + Fliesstext + optionale Highlight-Saetze),
   s. components/content-text-section.php. Aktuell fuer die drei optionalen
   SEO-Textabschnitte auf dieser Seite (ueber "Dein Stil"/zwischen "Dein
   Stil" und "FAQ"/unter "FAQ"),
   Markup/PHP-Komponente selbst ist seitenunabhaengig. Bewusst ruhig/
   randlos (kein eigener Hintergrund - traegt den Cream-Hintergrund von
   body weiter) und auf eine angenehme Lesebreite begrenzt, damit laengere
   SEO-Texte nicht ueber die volle Seitenbreite laufen und die Seite nicht
   optisch erschlagen (dieselbe 780px-Lesebreite wie .faq-list). Liegt
   bewusst hier (@layer pages) statt in components.css (@layer components):
   die sitewide generische "section { padding: 5rem 0; }" (layout.css,
   @layer layout) liegt in einer SPAETEREN Layer und wuerde eine
   abweichende Padding-Regel aus components.css sonst unabhaengig von der
   Spezifitaet ueberschreiben.
   ============================================================ */
.content-text-section {
    padding: 3.5rem 0;
}
.content-text-section-inner {
    /* Auf Wunsch linksbuendig statt zentriert (Akzenttext/Ueberschrift/
       Fliesstext/Highlight-Saetze) - .content-text-section-body/-highlight
       waren bereits explizit linksbuendig, damit gilt es jetzt einheitlich
       fuer den gesamten Abschnitt. margin:0 statt 0 auto: sonst wird der
       ganze 780px-Block selbst weiterhin horizontal zentriert und beginnt
       optisch eingerueckt statt (wie die anderen Abschnitte der Seite) am
       linken Container-Rand. */
    max-width: 780px;
    margin: 0;
    text-align: left;
}
.content-text-section-title {
    margin-bottom: 0.75rem;
}
.content-text-section-body {
    /* Eigenstaendiger Block statt .section-description (dort bewusst
       max-width:none/zentriert fuer kurze Blurbs) - ein laengerer Fliesstext
       bleibt hier linksbuendig innerhalb der 780px-Spalte lesbarer als
       zentriert. */
    max-width: none;
    width: 100%;
    margin: 0 0 1.5rem;
    text-align: left;
}
.content-text-section-body:last-child { margin-bottom: 0; }
.content-text-section-body p {
    color: var(--color-text-light);
    font-size: 0.98rem;
    line-height: 1.75;
    margin: 0 0 1.1rem;
    text-wrap: pretty;
}
.content-text-section-body p:last-child { margin-bottom: 0; }
/* Highlight-/Akzentsatz: erscheint auf Wunsch VERSCHRAENKT zwischen den
   normalen Absaetzen (je ein Highlight direkt unter einem Absatz, s.
   components/content-text-section.php), daher als dezenter, farblich
   abgesetzter Einzelsatz statt einer eigenen Liste/Box - wirkt so wie ein
   ruhiges Zwischen-Zitat statt eines zusaetzlichen Kastens. Selektor mit
   .content-text-section-body-Vorfahre, damit die Akzentfarben zuverlaessig
   die allgemeine Absatzfarbe direkt darueber (.content-text-section-body p)
   ueberschreiben. */
.content-text-section-body p.content-text-section-highlight {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.6;
    padding-left: 1.1rem;
    border-left: 3px solid var(--color-secondary);
    margin: 1.25rem 0;
}
@media (max-width: 640px) {
    .content-text-section { padding: 2.5rem 0; }
}

/* ============================================================
   FAKTENLEISTE – ruhiger, kartenfreier 3-Spalten-Streifen direkt unter dem
   Hero (Entfernung/Fahrzeit/Parken). Grosse Kennzahl + kurze Zusatzzeile,
   Typografie bewusst identisch zu .highlight (components.css, "Jahre
   Erfahrung" auf pages/ueber-mich.php) statt einer neuen Zahl-Darstellung.
   Dezente Trennlinien statt Kartenrahmen/Schatten (dieselbe --color-border
   wie ueberall im Projekt).
   ============================================================ */
.facts-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 2.5rem 0;
}
.facts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.facts-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0 1.75rem;
}
.facts-item + .facts-item {
    border-left: 1px solid var(--color-border);
}
.facts-icon {
    color: var(--color-secondary);
    margin-bottom: 0.15rem;
}
.facts-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.15;
}
.facts-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.4;
    max-width: 22ch;
}
@media (max-width: 768px) {
    .facts-bar { padding: 0; }
    .facts-grid { grid-template-columns: 1fr; }
    .facts-item {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        gap: 0.85rem;
        padding: 1.15rem 1.5rem;
    }
    .facts-item + .facts-item {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    .facts-icon { margin-bottom: 0; flex-shrink: 0; }
    .facts-value { font-size: 1.2rem; }
    .facts-label { max-width: none; }
}

/* ============================================================
   REASONS – 3 GRÜNDE (dunkler Balken) – nur standort.php, trotz des
   generischen Klassennamens (s. .ai/css-inventory.md §4)
   ============================================================ */
.reasons-section {
    background: var(--color-text-dark);
    color: var(--color-background);
    padding: 3.5rem 0;
}
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.reason-item { text-align: center; }
.reason-icon {
    display: block;
    font-size: 1rem;
    color: var(--color-secondary);
    margin-bottom: 0.65rem;
}
.reason-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-background);
    margin-bottom: 0.4rem;
    /* Titel kommt aus LOCATIONS (config.php, je Ort individuell) - kein
       Heading-Tag, daher kein automatisches overflow-wrap aus base.css. */
    overflow-wrap: break-word;
}
.reason-item p {
    font-size: 0.86rem;
    color: rgba(253,246,243,0.6);
    line-height: 1.6;
}


/* Lokale Standort-Landingpages (M4). .standort-lp-facts/.standort-lp-fact
   WIEDERHERGESTELLT (2026-07-13): faelschlich als tot entfernt - die Klassen
   werden von components/anfahrt.php gesetzt (per include in standort.php),
   ein Grep nur gegen pages/standort.php selbst uebersieht das eingebundene
   Partial. Lehre: bei "wird X irgendwo verwendet" IMMER auch components/*.php
   pruefen, nicht nur die Seite direkt. S. .ai/css-known-issues.md. */
.standort-lp { padding: 3.5rem 0; }
.standort-lp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.standort-lp-fact { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem; }
.standort-lp-fact strong { display: block; color: var(--color-primary); font-size: 0.9rem; margin-bottom: 0.35rem; }
.standort-lp-fact span { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.5; }
.standort-lp-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 0.5rem; }
.standort-lp-service { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; padding: 1.5rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; text-decoration: none; color: var(--color-text-dark); transition: box-shadow .2s ease, transform .2s ease; }
.standort-lp-service:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-2px); }
.standort-lp-service .icon { font-size: 1.6rem; }
.standort-lp-service .name { font-weight: 700; overflow-wrap: break-word; }
.standort-lp-service .ziel { font-size: 0.78rem; color: var(--color-text-light); }
@media (max-width: 720px) {
    .standort-lp-facts, .standort-lp-services { grid-template-columns: 1fr; }
}


/* ============================================================
   ALTERNIERENDE ABSCHNITTS-HINTERGRUENDE (Standort-Landingpages) – die
   Abschnittsklassen sind mit index.php geteilt (.services-lp,
   .faq-preview-section, .standort-section); home.css alterniert sie bereits
   passend fuer die REIHENFOLGE der Startseite (s. dortiger Kommentar). Die
   Standort-Landingpages (pages/standort.php) haben nach dem Entfernen von
   Vorher/Nachher, Bewertungen, Ueber mich und Ablauf (auf Wunsch, 2026-07-21)
   nur noch Faktenleiste -> Leistungen -> FAQ -> Standort. Leistungen ist von
   der Startseite geerbt Cream, muesste hier aber (als erster Abschnitt nach
   der neutral-weissen Faktenleiste) Rosa sein, damit FAQ/Standort weiterhin
   alternieren - daher NUR fuer .standort-page ueberschrieben, die Startseite
   bleibt unberuehrt. */
.standort-page .services-lp {
    background: #F8EBF0;
}

/* ============================================================
   RESPONSIVE (verschoben aus der ehemals zentralen RESPONSIVE-Sektion in
   style.css, zusammengefuehrt mit der jeweiligen Basisregel in dieser Datei)
   ============================================================ */
@media (max-width: 768px) {
    .reasons-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
} /* Ende @layer pages */