/* =========================================================
   DC by Waldera – Styles der Unterseiten
   Wird nach styles.css geladen und darf diese ueberschreiben.
   Nicht eingebunden auf der Startseite.
   ========================================================= */

/* --------------------------------------------------------
   Hero der Standortseiten
   -------------------------------------------------------- */

.section-two {
    display: flex;
    align-items: flex-end;
    /* wie auf der Startseite: dunkler nur unten, wo der Text steht */
    background-image:
        linear-gradient(to top, rgba(18, 17, 13, 0.80) 0%, rgba(18, 17, 13, 0.38) 45%, rgba(43, 37, 28, 0.18) 100%),
        url("/img/friseursalon-haarstyling-hero-image.jpg");
}

.sec-two {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.two-text {
    font-weight: 600;
    margin-bottom: 3vh;
}

@media (max-width: 500px) {
    .cinema-zero-prefix {
        display: none;
    }
}

/* --------------------------------------------------------
   Ueberschriften der Inhaltsabschnitte
   -------------------------------------------------------- */

h2 {
    margin-top: 0;
    font-weight: 400;
    line-height: 2rem;
}

h3 {
    margin-top: 0;
    margin-bottom: 1vh;
    font-weight: 400;
}

.sec-four h2,
.textbox-eight h2,
.textblock-seven h2,
.cards-head h2 {
    text-align: center;
}

/* --------------------------------------------------------
   Seitenkopf der Inhaltsseiten (Leistungen, Oeffnungszeiten)
   -------------------------------------------------------- */

.section-pagehead {
    background-color: #2b281d;
    color: #fffffb;
}

.sec-pagehead {
    flex-direction: column;
    text-align: center;
    padding-top: 9vh;
    padding-bottom: 9vh;
    max-width: 900px;
}

.sec-pagehead h1 {
    margin-top: 0;
    margin-bottom: 2vh;
}

.pagehead-sub {
    font-size: 1.05rem;
}

/* Section Three (Fotoreihe) steht in styles.css, weil sie auch
   auf der Startseite verwendet wird, die salon.css nicht laedt. */

/* --------------------------------------------------------
   Section Four – Ueber uns
   -------------------------------------------------------- */

.section-four {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-four {
    flex-direction: column;
    text-align: center;
    padding-top: 8vh;
    padding-bottom: 8vh;
}

.sec-four p + p {
    margin-top: 2vh;
}

/* --------------------------------------------------------
   Section Five – Bild-Text-Zeilen
   Zwei Zeilen im Wechsel (Bild links, Bild rechts). Das Bild
   sitzt in einem festen 4:3-Rahmen, damit beide Zeilen gleich
   hoch sind – unabhaengig vom Format der Aufnahme.
   -------------------------------------------------------- */

.section-five {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-five {
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5.5rem);
    padding-bottom: 8vh;
}

.feature-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.feature-media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f4f2ec;
}

.feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Bild nach rechts, Text nach links – die Reihenfolge im HTML
   bleibt Bild vor Text, damit sie mobil ueberall gleich ist. */

.feature-row-flip .feature-media {
    order: 2;
}

.feature-text {
    max-width: 34rem;
}

.feature-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6b6558;
}

.feature-eyebrow::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 1px;
    background-color: currentColor;
}

.feature-text h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.15;
    margin: 0.7rem 0 1rem;
}

.feature-text p + p {
    margin-top: 1rem;
}

.feature-cta {
    margin-top: 1.6rem;
}

.feature-cta .button {
    margin: 0;
}

@media (max-width: 950px) {
    .feature-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.4rem;
    }
    .feature-row-flip .feature-media {
        order: 0;
    }
    .feature-text {
        max-width: none;
    }
    .sec-five {
        gap: 3rem;
        padding-bottom: 6vh;
    }
}

/* --------------------------------------------------------
   Adresse, Oeffnungszeiten und Anfahrt
   -------------------------------------------------------- */

.section-anfahrt {
    background-color: #f4f2ec;
    color: #2b281d;
}

.sec-anfahrt {
    flex-direction: column;
    padding-top: 8vh;
    padding-bottom: 8vh;
}

.anfahrt-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.anfahrt-block {
    background-color: #fffffb;
    border: 1px solid #e3e0d7;
    padding: 2rem 1.8rem;
}

.anfahrt-block h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1.4rem;
}

.anfahrt-block a {
    color: #2b281d;
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table th,
.hours-table td {
    text-align: left;
    padding: 0.45rem 0;
    font-weight: 400;
    vertical-align: top;
    border-bottom: 1px solid #eeece4;
}

.hours-table td {
    text-align: right;
}

.hours-note {
    margin-top: 1.5vh;
    font-size: 0.9rem;
    color: #6b6558;
}

/* --------------------------------------------------------
   Section Six – Bildband
   -------------------------------------------------------- */

.section-six {
    background-color: #12110d;
    color: #fffffb;
}

.sec-six {
    flex-direction: column;
}

.text-six {
    width: 100%;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 2%;
}

.img-six {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    padding-bottom: 3vh;
}

/* --------------------------------------------------------
   Leistungsseite
   -------------------------------------------------------- */

.section-services {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-services {
    flex-direction: column;
    align-items: stretch;
    padding-top: 8vh;
    padding-bottom: 8vh;
    max-width: 900px;
}

.service-block {
    padding-bottom: 5vh;
    margin-bottom: 5vh;
    border-bottom: 1px solid #e3e0d7;
}

.service-block:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.service-block h2 {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 1.5vh;
}

.service-list {
    margin: 2vh 0 0 0;
    padding-left: 1.2rem;
}

.service-list li {
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------
   Oeffnungszeiten-Seite (je Salon)
   Links die Wochentabelle, rechts Kontakt und Anfahrt.
   Die Zeile des heutigen Tages markiert script.js.
   -------------------------------------------------------- */

.section-hours {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-hours {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem 4rem;
    align-items: start;
    padding-top: 8vh;
    padding-bottom: 8vh;
}

.hours-main h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 2vh;
}

.hours-week {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #2b281d;
}

.hours-week th,
.hours-week td {
    text-align: left;
    font-weight: 400;
    vertical-align: top;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eeece4;
}

.hours-week td {
    text-align: right;
    padding-left: 1rem;
    white-space: nowrap;
}

/* Zusatz unter einer Zeit, z. B. welche Samstage gemeint sind */
.hours-sub {
    display: block;
    font-size: 0.85rem;
    color: #6b6558;
    white-space: normal;
}

.hours-week .is-closed td {
    color: #6b6558;
}

.hours-week .is-today th,
.hours-week .is-today td {
    font-weight: 600;
}

.hours-today-tag {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fffffb;
    background-color: #2b281d;
    border-radius: 999px;
    vertical-align: middle;
}

.hours-main .hours-note {
    margin-top: 2vh;
    font-size: 0.95rem;
}

.hours-side {
    display: grid;
    gap: 1.5rem;
}

/* Kontaktkarten auf hellem Grund: beige statt weiss */
.hours-side .anfahrt-block {
    background-color: #f4f2ec;
    border-color: #ece9e0;
}

.hours-cta {
    grid-column: 1 / -1;
    margin-top: 0;
}

@media (max-width: 900px) {
    .sec-hours {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* --------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------- */

.section-legal {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-legal {
    flex-direction: column;
    align-items: stretch;
    padding-top: 6vh;
    padding-bottom: 8vh;
    max-width: 820px;
}

.sec-legal h1 {
    margin-top: 0;
    margin-bottom: 4vh;
}

.sec-legal h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 4vh;
    margin-bottom: 1.5vh;
}

.sec-legal p + p {
    margin-top: 1.5vh;
}

.sec-legal ul {
    margin: 1.5vh 0 0 0;
    padding-left: 1.2rem;
}

.sec-legal li {
    margin-bottom: 0.4rem;
}

.sec-legal a {
    color: #2b281d;
    text-decoration: underline;
}

.legal-hint {
    font-size: 0.9rem;
    color: #6b6558;
}

/* --------------------------------------------------------
   Section Eight – Galerie
   -------------------------------------------------------- */

.section-eight {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-eight {
    flex-direction: column;
    padding-bottom: 8vh;
}

.textbox-eight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 3vh;
}

/* Salonaufnahmen im Zweier-Raster (Salon Luft) */

.salon-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.salon-shot {
    margin: 0;
}

.salon-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 592;
    object-fit: cover;
}

.salon-shot figcaption {
    padding-top: 0.7rem;
    font-size: 0.9rem;
    color: #6b6558;
}

/* Bildmosaik (Salon im Kino)
   Sechs Aufnahmen in einem festen Raster: vier Hochformate oben,
   darunter die zwei Querformate (Eventfoto und Farbservice) ueber
   je zwei Spalten. Die Zeilenhoehen ergeben sich allein aus den
   Seitenverhaeltnissen der Kacheln. Die Bilder liegen absolut in
   ihrer Kachel, damit sie die Zeilenhoehe nicht mitbestimmen. */

.salon-mosaic {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "styling fixieren    arbeit      straehnen"
        "styling fixieren    arbeit      straehnen"
        "event   event       farbservice farbservice"
        "event   event       farbservice farbservice";
    gap: 0.75rem;
}

.mosaic-tile {
    position: relative;
    margin: 0;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    justify-self: stretch;
    overflow: hidden;
    background-color: #f4f2ec;
}

.mosaic-tile img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mosaic-tile:hover img {
    transform: scale(1.04);
}

.mosaic-styling     { grid-area: styling;     aspect-ratio: 539 / 625; }
.mosaic-fixieren    { grid-area: fixieren;    aspect-ratio: 539 / 625; }
.mosaic-straehnen   { grid-area: straehnen;   aspect-ratio: 539 / 625; }
.mosaic-event       { grid-area: event;       aspect-ratio: 1119 / 625; }
.mosaic-arbeit      { grid-area: arbeit;      aspect-ratio: 539 / 625; }
.mosaic-farbservice { grid-area: farbservice; aspect-ratio: 1119 / 625; }

@media (max-width: 900px) {
    .salon-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "styling     fixieren"
            "event       event"
            "straehnen   arbeit"
            "farbservice farbservice";
        gap: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mosaic-tile img {
        transition: none;
    }
    .mosaic-tile:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------
   Karriereseite
   Zwei Stellenanzeigen als eigene Abschnitte. Die Inhalte
   jeder Stelle stehen in Karten im Zweierraster, darunter
   ein zentrierter Bewerbungsaufruf.
   -------------------------------------------------------- */

/* Anker-Buttons im dunklen Seitenkopf */

.pagehead-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 3.5vh;
}

.button-light {
    background-color: transparent;
    color: #fffffb;
    border-color: #fffffb;
    margin: 0;
}

.button-light:hover {
    background-color: #fffffb;
    border-color: #fffffb;
    color: #2b281d;
}

/* Vorstellung des Teams ("Das sind wir") */

.section-karriere-intro {
    background-color: #fffffb;
    color: #2b281d;
}

.sec-karriere-intro {
    flex-direction: column;
    padding-top: 8vh;
    padding-bottom: 8vh;
}

/* Stellenabschnitte: erste Stelle auf beigem Grund mit weissen
   Karten, zweite Stelle gespiegelt – weiss mit beigen Karten. */

.section-job {
    background-color: #f4f2ec;
    color: #2b281d;
    /* Anker springen sonst unter den klebrigen Seitenrand */
    scroll-margin-top: 2vh;
}

.section-job-alt {
    background-color: #fffffb;
}

.sec-job {
    flex-direction: column;
    align-items: stretch;
    padding-top: 9vh;
    padding-bottom: 9vh;
    max-width: 1100px;
}

.job-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 5vh;
}

/* Kapitaelchen-Zeile mit Strich links und rechts */

.job-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6b6558;
}

.job-eyebrow::before,
.job-eyebrow::after {
    content: "";
    flex: none;
    width: 2rem;
    height: 1px;
    background-color: currentColor;
}

.job-head h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: 1.1;
    margin: 1.2rem 0 0.5rem;
}

.job-claim {
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6b6558;
    margin-bottom: 1.6rem;
}

.job-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.job-block {
    box-sizing: border-box;
    background-color: #fffffb;
    border: 1px solid #e3e0d7;
    border-top: 3px solid #2b281d;
    padding: 1.9rem 1.7rem;
}

.section-job-alt .job-block {
    background-color: #f4f2ec;
    border-color: #ece9e0;
    border-top-color: #2b281d;
}

.job-block h3 {
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
}

.job-list {
    margin: 0;
    padding-left: 1.1rem;
}

.job-list li {
    margin-bottom: 0.55rem;
}

.job-list li:last-child {
    margin-bottom: 0;
}

.job-list li::marker {
    color: #6b6558;
}

/* Hervorgehobener Absatz ("Was uns wichtig ist") */

.job-note {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    border-left: 3px solid #2b281d;
    padding: 0.4rem 0 0.4rem 1.5rem;
}

.job-note h3 {
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
}

/* Bewerbungsaufruf unter jeder Stelle */

.job-cta {
    text-align: center;
    max-width: 40rem;
    margin: 6vh auto 0;
}

.job-cta-title {
    font-size: 1.45rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.job-cta .button {
    margin: 1.5rem 0 0;
}

.job-cta-mail {
    margin-top: 0.9rem;
    font-size: 0.95rem;
}

.job-cta-mail a {
    color: #2b281d;
}

.job-cta-signoff {
    margin-top: 1.5rem;
    color: #6b6558;
}

@media (max-width: 760px) {
    .job-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
    .sec-job {
        padding-top: 7vh;
        padding-bottom: 7vh;
    }
}