/*
Theme Name: Hair Chic & Beauty Essen
Description: Individuelles WordPress-Theme für Hair Chic & Beauty in Essen-Rüttenscheid.
Version: 1.6.1
Text Domain: hair-chic-essen
Requires at least: 6.3
Requires PHP: 7.4
*/
:root {
  --paper: #f9f5ed;
  --ink: #251b18;
  --wine: #36231e;
  --gold: #eec58c;
  --muted: #6e5950;
  --rule: #ded1c2;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #b97446; outline-offset: 5px; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure, h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; }
h1, h2 { letter-spacing: -.055em; }
em { font-weight: 400; }
.wrap { width: min(1180px, 100% - 96px); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 3; padding: .7rem; background: white; }
.skip:focus { position: fixed; z-index: 4; top: 1rem; }
.mobile-actions { display: none; }
.header { position: sticky; top: 0; z-index: 3; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.header-inner, .footer-inner { min-height: 87px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-grid; line-height: 1; text-align: center; }
.brand strong { font: 400 26px/1.1 var(--serif); letter-spacing: .025em; }
.brand small { font-size: 9px; letter-spacing: .32em; margin-top: 6px; }
nav, .footer-inner > div { display: flex; align-items: center; gap: 30px; font-size: 14px; }
nav a:hover, footer a:hover, .info-inner a:hover { text-decoration: underline; text-underline-offset: 4px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 19px; min-height: 46px; font-size: 14px; font-weight: 700; border: 1px solid transparent; line-height: 1.25; }
.button.outline { border-color: #b9a18d; }
.button.outline:hover { background: #efe1d0; }
.button.gold { background: var(--gold); color: var(--ink); }
.button.gold:hover { background: #ffdaa7; }
.hero { min-height: 545px; display: grid; grid-template-columns: 1fr 1fr; background: var(--wine); color: #fff6eb; }
.hero-copy { padding: clamp(62px, 8vw, 128px) 38px clamp(65px, 8vw, 120px) max(48px, calc((100vw - 1180px) / 2)); align-self: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #785142; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.eyebrow > span { width: 21px; height: 1px; background: currentColor; flex: none; }
.hero .eyebrow { color: var(--gold); }
h1 { margin: 23px 0 21px; font-size: clamp(54px, 7vw, 103px); line-height: .96; }
.hero h1 { font-size: clamp(36px, 4.7vw, 72px); line-height: 1.04; overflow-wrap: anywhere; }
h1 em { color: var(--gold); }
.intro { max-width: 380px; color: #f0dbcd; font-size: clamp(16px, 1.5vw, 19px); }
.intro a { color: var(--gold); text-decoration: underline; text-underline-offset: .18em; }
.hero-actions, .visit-links { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 28px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; }
.text-link:hover { opacity: .75; }
.hero-image { position: relative; background: #765346; min-height: 360px; overflow: hidden; }
.hero-image img { position: absolute; object-position: center 45%; }
.hero-image figcaption { position: absolute; right: 18px; bottom: 18px; padding: 9px 12px; background: var(--wine); color: #fff6eb; font-size: 10px; letter-spacing: .12em; }
.hero-image figcaption span { color: var(--gold); margin-right: 6px; }
.reviews { background: var(--paper); border-bottom: 1px solid var(--rule); }
.reviews-inner { display: flex; align-items: center; gap: 15px 22px; flex-wrap: wrap; padding-block: 19px; }
.reviews-rating { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 18px; }
.reviews-rating svg { color: #895524; }
.reviews h2 { font: 400 15px/1.5 Arial, sans-serif; letter-spacing: normal; }
.reviews-link { margin-inline-start: auto; min-height: 44px; }
.reviews-copy p { margin-top: 2px; font-size: 14px; font-weight: 700; }
.instagram-section { background: #f3e9dd; border-block: 1px solid var(--rule); }
.instagram-inner { padding-block: clamp(42px, 6vw, 78px); }
.instagram-intro-link { text-decoration: underline; text-underline-offset: .18em; }
.instagram-inner h2 { font-size: clamp(36px, 5vw, 66px); }
.instagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, 1.4vw, 15px); max-width: 750px; padding: 0; margin: 0; list-style: none; }
.instagram-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #dbbca9; }
.instagram-play { position: absolute; background: var(--wine); color: var(--paper); }
.instagram-play { top: 6px; right: 6px; padding: 2px 6px; font-size: 12px; }
.instagram-profile { margin-top: 16px; min-height: 44px; }
.review-snippets { padding-top: 24px; }
.review-snippets h2 { margin-bottom: 16px; font: 400 clamp(24px, 4vw, 38px)/1.15 var(--serif); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 24px; }
.review-card { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 16px; border: 1px solid var(--rule); }
.review-stars { color: #895524; letter-spacing: .09em; }
.review-card blockquote { margin: 0; font: 17px/1.5 var(--serif); }
.review-card figcaption { color: var(--muted); font-size: 13px; }
.review-card { position: relative; }
.review-source { display: block; width: fit-content; margin-top: 5px; color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.review-source svg { vertical-align: -2px; }
.review-source::after { content: ""; position: absolute; inset: 0; }
.review-card:focus-within { outline: 2px solid #b97446; outline-offset: 3px; }
.review-card:hover { border-color: #b97446; }
.info-bar { background: #efe4d5; border-bottom: 1px solid var(--rule); }
.info-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 17px 0; font-size: 13px; }
.info-inner a svg { margin-left: 4px; vertical-align: -2px; }
.section { padding-block: clamp(60px, 8vw, 112px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 13px 0 31px; }
h2 { font-size: clamp(45px, 6vw, 78px); }
h2 em { color: #835748; }
.section-heading > p, .split p:not(.eyebrow), .salon p:not(.eyebrow) { max-width: 355px; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-image { display: block; aspect-ratio: 1.29; overflow: hidden; background: #dbbca9; }
.service-image img { transition: transform .3s ease; }
.service-image:hover img { transform: scale(1.04); }
.service-grid article { border-bottom: 1px solid var(--rule); padding-bottom: 23px; }
.index { color: #785142; font-size: 11px; letter-spacing: .15em; margin: 14px 0 7px; }
h3 { font-size: clamp(26px, 3vw, 37px); letter-spacing: -.035em; }
.service-grid h3 + p { color: var(--muted); margin: 10px 0 15px; }
.price-section { background: #efe4d5; }
.split, .salon { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(35px, 8vw, 108px); }
.split h2, .salon h2 { margin: 15px 0; }
.split p + a, .salon p + a { margin-top: 17px; }
.price-list { border-top: 1px solid #c5ab95; }
.price-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid #c5ab95; padding: 17px 0; }
.price-list dd { flex-shrink: 0; font-weight: 700; }
.visit { border: 1px solid var(--rule); padding: clamp(25px, 5vw, 48px); }
.visit address { margin: 15px 0 12px; font-style: normal; }
.visit p + p { margin-top: 12px; }
.visit p a:hover { text-decoration: underline; }
footer { background: var(--wine); color: var(--paper); }
footer .footer-inner { min-height: 110px; }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .hero-copy { padding-left: 24px; }
  nav { gap: 17px; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 36px); }
  html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  .header-inner { min-height: 70px; gap: 12px; }
  .header-inner .brand strong { font-size: clamp(16px, 5vw, 20px); white-space: nowrap; }
  .header-inner .brand small { font-size: 8px; margin-top: 4px; }
  .header-inner > .button { display: none; }
  nav { justify-content: flex-end; gap: clamp(9px, 3vw, 20px); font-size: 13px; }
  nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 10px;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 18px #36231e18;
  }
  .mobile-actions .button { min-height: 48px; padding-inline: 8px; }
  .hero, .service-grid, .split, .salon { grid-template-columns: 1fr; }
  .hero-copy { padding: 32px 18px; }
  .hero .eyebrow { letter-spacing: .12em; }
  .hero h1 { font-size: clamp(32px, 8.4vw, 51px); margin: 16px 0; }
  .hero-actions { margin-top: 18px; gap: 10px 16px; }
  .hero-image { min-height: 0; aspect-ratio: 1.52; }
  .hero-image figcaption { right: 10px; bottom: 10px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 12px; }
  .reviews-inner { display: grid; gap: 3px; }
  .review-grid { grid-template-columns: 1fr; }
  .reviews-link { margin-inline-start: 0; justify-self: start; }
  .info-inner { flex-direction: column; gap: 5px; }
  .footer-inner { flex-wrap: wrap; padding: 20px 0; }
  .footer-inner > div { flex-wrap: wrap; gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-image img { transition: none; }
}

.subpage-hero { background: var(--wine); color: var(--paper); padding-block: clamp(28px, 7vw, 86px); }
.subpage-hero nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px 10px; color: var(--gold); padding: 0; }
.subpage-hero nav a { min-height: auto; }
.subpage-hero .price-category-nav { gap: 10px; margin-top: 20px; }
.price-category-nav a.button { min-height: 48px; min-width: 110px; }
.price-category-nav a:focus-visible { outline-color: var(--gold); }
.salon-content :is(#DAMEN, #HERREN) { scroll-margin-top: 20px; }

.subpage-hero h1 { font-size: clamp(42px, 7vw, 86px); line-height: 1.03; overflow-wrap: anywhere; max-width: 1000px; }
.subpage-hero p { color: #f0dbcd; max-width: 680px; font-size: 18px; }
.subpage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.subpage-body { padding-block: clamp(32px, 7vw, 80px); }
.salon-content { max-width: 880px; overflow-wrap: anywhere; }
.salon-content h2, .salon-content h3, .salon-content h4, .salon-visit-grid h2 { font: 400 clamp(23px, 4vw, 38px)/1.16 var(--serif); letter-spacing: -.025em; margin: 28px 0 12px; }
.salon-content p, .salon-content ul, .salon-content ol, .salon-visit-grid p { margin-block: 0 14px; }
.salon-content a, .salon-visit-grid p a { text-decoration: underline; text-underline-offset: .16em; }
.salon-content hr { border: 0; border-top: 1px solid var(--rule); margin-block: 25px; }
.salon-content figure { margin-block: 18px; }
.salon-content img { width: auto; max-width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.salon-content table { width: 100%; border-collapse: collapse; }
.salon-content th, .salon-content td { padding: 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.salon-price-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.salon-price-row .salon-price-row { padding: 0; border: 0; }
.salon-price-row p { margin: 0; }
.subpage-links, .salon-news-grid, .salon-visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.subpage-links { margin-block: 20px; }
.subpage-links a, .salon-visit-grid > div, .salon-news-grid article { border: 1px solid var(--rule); padding: clamp(16px, 3vw, 30px); }
.subpage-links a:hover { background: #efe4d5; }
.subpage-links h2 { font-size: clamp(25px, 4vw, 38px); }
.subpage-links p { margin-top: 10px; color: var(--muted); }
.salon-visit-grid h2 { margin-top: 0; }
.salon-visit-grid address { font-style: normal; margin-bottom: 14px; }
.salon-news-image { display: block; aspect-ratio: 1.6; overflow: hidden; }
.salon-news-grid h3 { margin-block: 14px; font-size: clamp(24px, 3vw, 36px); }
.salon-news-featured h3 { font-size: clamp(23px, 2.4vw, 30px); }
.salon-news-featured .salon-news-image[href="/1st-platz-bester-friseur-essen/"] img { object-fit: contain; background: #efe4d5; }
.news-all-link { margin-top: 24px; }
.news-archive-group + .news-archive-group { margin-top: clamp(32px, 6vw, 64px); }
.news-archive-group > h2 { margin-bottom: 20px; font-size: clamp(32px, 4vw, 48px); }
@media (min-width: 901px) {
  .salon-news-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .subpage-links, .salon-news-grid, .salon-visit-grid { grid-template-columns: 1fr; }
  .salon-price-row { font-size: 13px; }
}

.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 651px) {
  .beauty-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.beauty-service-grid article { padding: clamp(16px, 2.5vw, 28px); border: 1px solid var(--rule); }
.beauty-service-grid h3 { overflow-wrap: anywhere; }
.beauty-landing h2 { font-size: clamp(36px, 6vw, 78px); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  html { scroll-padding-top: 116px; }
  .header-inner { flex-wrap: wrap; justify-content: center; gap: 0 16px; padding-top: 12px; }
  .header-inner .site-nav { order: 1; flex: 0 0 100%; flex-wrap: wrap; justify-content: center; gap: 0 clamp(8px, 2.3vw, 18px); }
  .site-nav a { min-height: 44px; }
}

.subpage-hero-inner:has(.subpage-photo) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(22px, 5vw, 74px);
}
.subpage-hero-inner:has(.subpage-photo) h1 { font-size: clamp(36px, 5.4vw, 76px); }
.subpage-photo { aspect-ratio: 1.35; overflow: hidden; background: #f3e9dd; }
.subpage-photo img { object-position: center; }
.subpage-photo.award-photo img { object-fit: contain; padding: 14px; }

@media (max-width: 650px) {
  .subpage-hero-inner:has(.subpage-photo) { grid-template-columns: 1fr; }
  .subpage-photo { aspect-ratio: 1.6; }
}

.article-content { max-width: 1060px; margin-inline: auto; }
.article-content :is(h2, h3, h4, p, ul, ol, blockquote) { max-width: 740px; margin-inline: auto; }
.article-content :is(h2, h3, h4) { margin-top: 32px; }
.article-content figure { max-width: 760px; margin-inline: auto; }
.article-content figure img { margin-inline: auto; border-radius: 4px; }
.article-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(22px, 5vw, 64px);
  align-items: start;
  margin-block: clamp(28px, 5vw, 60px);
  padding-top: clamp(22px, 4vw, 42px);
  border-top: 1px solid var(--rule);
}
.article-feature-reverse { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); }
.article-feature-reverse .article-feature-photo { grid-column: 1; grid-row: 1; }
.article-feature-copy :is(h2, h3, h4):first-child { margin-top: 0; }
.article-feature-photo figure { margin: 0; }
.article-feature-photo img { width: 100%; max-height: 440px; background: #f3e9dd; }

@media (max-width: 700px) {
  .article-feature, .article-feature-reverse { grid-template-columns: minmax(0, 1fr); }
  .article-feature-reverse .article-feature-photo { grid-column: auto; grid-row: auto; }
}

.hair-salon-hero-image img { object-position: center 52%; }
.hair-salon-treatments .service-image { aspect-ratio: 1.75; }
.hair-salon-treatments { gap: 34px 24px; }
.hair-salon-price-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px 0;
  border-top: 1px solid #c5ab95;
}
.hair-salon-price-links a:last-child { border-bottom: 1px solid #c5ab95; }
.hair-salon-price-links a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.hair-salon-price-links strong { font: 400 clamp(27px, 4vw, 37px)/1.1 var(--serif); }
.hair-salon-price-links span:first-of-type { grid-row: 2; color: var(--muted); }
.hair-salon-price-links span[aria-hidden] { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; }
.hair-salon-team figure { aspect-ratio: 1.5; overflow: hidden; background: #efe4d5; }
.hair-salon-team h2 { font-size: clamp(40px, 5vw, 69px); }
.hair-salon-visit { background: #f3e9dd; border-top: 1px solid var(--rule); }
.hair-salon-visit .visit { background: var(--paper); }
.hair-salon-visit p .text-link { display: inline; }
@media (min-width: 651px) {
  .hair-salon-treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.treatment-booking {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  max-width: 1060px;
  margin: clamp(30px, 5vw, 60px) auto 0;
  padding: clamp(20px, 5vw, 40px);
  background: #efe4d5;
}
.treatment-booking h2 { margin-top: 8px; font-size: clamp(30px, 4vw, 50px); }
.treatment-booking .subpage-actions { margin-top: 0; }

.treatment-jumps { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 28px; }
.treatment-jumps a { padding: 6px 12px; border: 1px solid var(--rule); text-decoration: none; }
.treatment-jumps a:hover { background: #efe4d5; }
.treatment-faq { max-width: 740px; margin-inline: auto; }
.treatment-faq details { border-top: 1px solid var(--rule); padding: 12px 0; }
.treatment-faq details:last-child { border-bottom: 1px solid var(--rule); }
.treatment-faq summary { cursor: pointer; font-weight: 700; }
.treatment-faq details p { margin: 8px 0 0; }

.spontaneous-visit { max-width: none; margin: 0 0 clamp(36px, 6vw, 76px); }
.spontaneous-visit p:not(.eyebrow) { margin-top: 8px; color: var(--muted); }