@layer pages {
/* ============================================================
   JENNIQUE BEAUTY – pages/services.css
   Ausschließlich pages/service.php (Leistungs-Detailseite): Detail-Hero,
   Detail-Grid/-Text, Service-Galerie (5 Bilder), "Weitere Leistungen".
   Die mit pages/leistungen.php GETEILTE Preistabelle (.menu-*) liegt in
   components.css, nicht hier (s. .ai/css-architecture.md).
   Wird zusätzlich zu base.css + layout.css + components.css geladen.
   ============================================================ */

/* ============================================================
   SERVICE DETAIL PAGE
   ============================================================ */
.service-detail-hero {
    /* Auf Nutzerwunsch (2026-07-12) zurueckgesetzt auf die urspruengliche feste
       Hoehe (identisch mobil/Desktop, kein aspect-ratio-Split mehr, s. D-132/D-133
       in .ai/context/decisions.md) - die Bildmasse werden stattdessen passend zu
       dieser festen Hoehe empfohlen. */
    min-height: 260px;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 3.5rem 0 2rem;
}
.service-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(44,26,34,0.3) 0%, rgba(44,26,34,0.75) 100%);
}
.service-detail-hero-content { position: relative; z-index: 1; }

.service-detail-section { padding: 5rem 0; }
.service-detail-grid {
    display: grid;
    /* minmax() statt fixem 420px: die Spalte bleibt bis 1024px (danach
       ohnehin volle Umschaltung auf 1fr, s. Media Query unten) auf 420px,
       kann bei knapperem Platz aber bis 280px mitschrumpfen statt die
       Preistabelle gegen die Fliesstext-Spalte zu quetschen. */
    grid-template-columns: 1fr minmax(280px, 420px);
    gap: 4rem;
    align-items: start;
}
.service-detail-heading {
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--color-text-dark);
    margin: 0 0 1rem;
}
.service-detail-text > h2.service-detail-heading,
.service-detail-section-title {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    line-height: 1.2;
}
.service-detail-text .service-detail-heading {
    margin-top: 1.5rem;
}
.service-detail-text > .service-detail-heading:first-child {
    margin-top: 0;
}
.service-detail-text p  { color: var(--color-text-light); line-height: 1.75; margin-bottom: 1rem; }
.service-detail-richtext {
    color: var(--color-text-light);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.service-detail-richtext p { margin-bottom: 1rem; }
.service-detail-richtext a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.service-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.service-detail-faq-btn {
    color: var(--color-primary);
    border-color: var(--color-border);
    box-shadow: 0 4px 14px rgba(44,26,34,0.08);
}
.service-detail-faq-btn:hover {
    background: var(--color-rose-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}
.service-detail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.service-detail-list li {
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.92rem;
    color: var(--color-text-light);
    line-height: 1.6;
}
.service-detail-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-size: 0.65rem;
    top: 0.3rem;
}

.service-detail-pricing { position: sticky; top: 6rem; }
.service-detail-note {
    background: var(--color-rose-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.1rem 1.4rem;
    margin-top: 1rem;
}
.service-detail-note-title {
    margin-bottom: 0.75rem;
}
.service-detail-note ul {
    list-style: disc;
    margin: 0;
    padding-left: 1.1rem;
}
.service-detail-note li {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin-bottom: 0.25rem;
}
.service-detail-note li:last-child { margin-bottom: 0; }


/* ============================================================
   SERVICE-GALERIE (max. 10 Bilder: Desktop 2x5, Mobil 5x2)
   ============================================================ */
.svc-gallery-section {
    padding: 4rem 0 3rem;
    background: var(--color-rose-light);
}
.service-detail-section-title {
    margin-bottom: 1.5rem;
}
.svc-gallery-hint {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin: -0.8rem 0 1.5rem;
    font-style: italic;
}
.svc-gallery-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.svc-gallery-thumb {
    position: relative;
    /* Hochformat 3:4 -> 4:5 umgestellt (2026-07-12, auf Wunsch, D-129) */
    aspect-ratio: 4 / 5;
    border: none;
    padding: 0;
    background: var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
}
.svc-gallery-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(44,26,34,0.18);
}
.svc-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.svc-gallery-thumb:hover img {
    transform: scale(1.06);
}
.svc-gallery-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44,26,34,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    /* Rein dekorativ (Hover-Verdunklung + Icon) - darf Klicks NICHT abfangen,
       damit sie wie bei .gallery-item (galerie.php/vorher-nachher.php) beim
       darunterliegenden <img> ankommen (assets/js/main.js haengt den
       Lightbox-Klick-Listener direkt am <img>, nicht am Button). */
    pointer-events: none;
}
.svc-gallery-thumb:hover .svc-gallery-thumb-overlay {
    opacity: 1;
}
.svc-gallery-thumb.placeholder {
    background: var(--color-border);
}

@media (max-width: 640px) {
    .svc-gallery-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Weitere Leistungen */
.other-services-section { background: var(--color-surface); padding: 4rem 0; }
.other-services-title-block {
    max-width: none;
    margin-bottom: 1rem;
    text-align: left;
}
.other-services-title-block .label {
    margin-bottom: 0.45rem;
}
.other-services-title-block .service-detail-section-title {
    margin-bottom: 0.75rem;
}
.other-services-subtitle,
.other-services-description p {
    color: var(--color-text-light);
    font-size: 0.96rem;
    line-height: 1.75;
}
.other-services-subtitle {
    margin-bottom: 0;
}
.other-services-description {
    max-width: none;
    margin: 0 0 2rem;
    text-align: left;
}
.other-services-description .section-description-title {
    font-size: 1rem;
    margin: 0 0 0.55rem;
    color: var(--color-text-dark);
}
.other-services-description p {
    margin-bottom: 0.85rem;
}
.other-services-description p:last-child {
    margin-bottom: 0;
}
.other-services-title-block + .other-services-grid {
    margin-top: 1rem;
}
.other-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.other-svc-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.other-svc-card:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(196,123,138,0.12);
}
.other-svc-all { color: var(--color-text-light); }
.other-svc-icon { font-size: 1.25rem; flex-shrink: 0; }
/* min-width:0 hebt die implizite Flex-Item-Mindestbreite auf - ohne das
   wuerde ein laengerer Leistungsname die 3-spaltige Karte (fixe Grid-
   Spalten) seitlich aufblaehen statt innerhalb der Karte umzubrechen.
   overflow-wrap als zusaetzliches Sicherheitsnetz fuer einzelne lange Woerter. */
.other-svc-name { flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: 500; }

/* ============================================================
   RESPONSIVE (verschoben aus der ehemals zentralen RESPONSIVE-Sektion in
   style.css, zusammengefuehrt mit der jeweiligen Basisregel in dieser Datei)
   ============================================================ */
@media (max-width: 1024px) {
    .service-detail-grid   { grid-template-columns: 1fr; }
    .service-detail-pricing { position: static; }
    .other-services-grid   { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
    .other-services-grid  { grid-template-columns: 1fr; }
    .service-detail-text .btn { display: block; text-align: center; }
    .service-detail-actions { display: grid; }
}

@media (max-width: 480px) {
    .svc-gallery-strip { grid-template-columns: repeat(2,1fr); }
    .svc-gallery-strip .svc-gallery-thumb:nth-child(5) { display: none; }
}
} /* Ende @layer pages */