/*
 * DILEK Typografie-Masterregel
 * Diese Datei ist die verbindliche Basis für bestehende und künftige
 * Leistungsseiten. Elementor-HTML-Inhalte nutzen dieselbe Regel, sofern
 * der äußere Bereich die Klasse .dilek-home enthält.
 */

html body .dilek-home{
  --dilek-body-font:"Open Sans",Arial,sans-serif;
  --dilek-display-font:"Prosto One",Georgia,serif;
  font-family:var(--dilek-body-font)!important;
}

html body .dilek-home h1,
html body .dilek-home h2,
html body .dilek-home h3{
  font-family:var(--dilek-display-font)!important;
}

html body .dilek-home p,
html body .dilek-home li,
html body .dilek-home .dilek-extension-method-showcase__copy h4,
html body .dilek-home .dilek-fine-hair__planning-grid article > span,
html body .dilek-home .dilek-balayage__guidance-grid article > span,
html body .dilek-home .dilek-balayage__look-grid > article > span,
html body .dilek-home .dilek-balayage__comparison-grid article > span{
  font-family:var(--dilek-body-font)!important;
}

/* Mobil: großzügig, aber mit ruhigem Umbruch statt unnötig vieler Zeilen. */
@media (max-width:700px){
  html body .dilek-home h2{
    font-size:clamp(1.7rem,7vw,2rem)!important;
    line-height:1.12!important;
    letter-spacing:-.035em!important;
  }

  html body .dilek-price h2{
    font-size:clamp(1.7rem,7vw,2rem)!important;
    line-height:1.12!important;
    letter-spacing:-.035em!important;
  }
}

/* Mobil: Überschriften erhalten auf farbigen Flächen denselben ruhigen Innenabstand.
   Diese Klasse ist der Standard für künftige DILEK-Abschnittsüberschriften. */
@media (max-width:700px){
  html body .dilek-home .dilek-section-head{
    padding-inline:24px;
  }

  html body .dilek-home .dilek-contact .dilek-shell > div:first-child{
    padding-inline:24px;
  }
}


/* Einheitliche DILEK-Eyebrow: gleicher Roséton, Größe und Abstand vor jeder Überschrift. */
html body .dilek-home .dilek-eyebrow{
  margin:0 0 14px!important;
  color:#965e61!important;
  font-family:var(--dilek-body-font)!important;
  font-size:.7rem!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
  line-height:1.4!important;
  text-transform:uppercase!important;
}

html body .dilek-home .dilek-eyebrow + h1,
html body .dilek-home .dilek-eyebrow + h2,
html body .dilek-home .dilek-eyebrow + h3{
  margin-top:14px!important;
}

/* Kontrastvarianten für dunkle Flächen. */
html body .dilek-home .dilek-extension-process .dilek-eyebrow{
  color:#fff!important;
}
html body .dilek-home .dilek-contact .dilek-eyebrow,
html body .dilek-home .dilek-fine-hair__natural .dilek-eyebrow,
html body .dilek-home .dilek-balayage__comparison .dilek-eyebrow{
  color:#dfa6a8!important;
}


/* Extensions-Seite: verbindliche Hierarchie für Abschnittsüberschriften, Karten und Lesetexte. */
html body .dilek-extensions-page .dilek-extension-trust h3{
  margin:10px 0 9px!important;
  font-size:1.16rem!important;
  line-height:1.28!important;
  letter-spacing:-.02em!important;
}

html body .dilek-extensions-page .dilek-extension-method-showcase__copy h3{
  margin:0 0 12px!important;
  font-size:clamp(1.38rem,1.7vw,1.7rem)!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}

html body .dilek-extensions-page .dilek-extension-method-showcase__copy h4{
  margin:0 0 13px!important;
  color:#965e61!important;
  font-size:1rem!important;
  font-weight:800!important;
  line-height:1.4!important;
}

/* Deutliche einzelne Termin-CTA nach dem Ablauf. */
html body .dilek-extensions-page .dilek-extension-process__action{
  display:flex;
  justify-content:center;
  margin-top:30px!important;
}
html body .dilek-extensions-page .dilek-extension-process__action .dilek-button{
  width:min(100%,360px);
  min-height:54px;
  justify-content:center;
  color:#fff!important;
  background:#b97578!important;
  border:1px solid #b97578!important;
}
html body .dilek-extensions-page .dilek-extension-process__action .dilek-button:hover,
html body .dilek-extensions-page .dilek-extension-process__action .dilek-button:focus-visible{
  color:#fff!important;
  background:#965e61!important;
  border-color:#965e61!important;
}

@media (max-width:700px){
  /* Einheitliche Textkante für jede mobile H2 sowie die FAQ-Fragen. */
  html body .dilek-extensions-page .dilek-intro,
  html body .dilek-extensions-page .dilek-answers > .dilek-shell,
  html body .dilek-extensions-page .dilek-faq > .dilek-shell{
    padding-inline:24px!important;
  }

  html body .dilek-extensions-page .dilek-faq details{
    padding:19px 24px!important;
  }

  /* Oben kompakter, ohne den bewusst großzügigen Grundrhythmus der Seite zu verlieren. */
  html body .dilek-extensions-page .dilek-intro{
    padding-top:46px!important;
  }
  html body .dilek-extensions-page .dilek-extension-methods,
  html body .dilek-extensions-page .dilek-extension-process,
  html body .dilek-extensions-page .dilek-extension-links{
    padding-top:48px!important;
    padding-bottom:52px!important;
  }

  html body .dilek-extensions-page .dilek-extension-process__action .dilek-button{
    width:100%;
  }
}


@media (max-width:700px){
  html body .dilek-extensions-page .dilek-answers,
  html body .dilek-extensions-page .dilek-extension-result,
  html body .dilek-extensions-page .dilek-faq{
    padding-top:48px!important;
    padding-bottom:52px!important;
  }
}

/* Finale mobile Innenränder: Abschnittsüberschriften und Kontaktinformationen bleiben klar von der Kante entfernt. */
@media (max-width:700px){
  html body .dilek-home h2{
    font-size:clamp(1.85rem,7.8vw,2.05rem)!important;
  }

  html body .dilek-extensions-page .dilek-section-head,
  html body .dilek-extensions-page .dilek-intro,
  html body .dilek-extensions-page .dilek-answers > .dilek-shell,
  html body .dilek-extensions-page .dilek-faq > .dilek-shell,
  html body .dilek-extensions-page .dilek-contact .dilek-shell > div:first-child{
    padding-inline:32px!important;
  }

  html body .dilek-extensions-page .dilek-faq details{
    padding-inline:32px!important;
  }

  html body .dilek-extensions-page .dilek-contact address{
    padding-inline:32px!important;
  }

  html body .dilek-extensions-page .dilek-extension-links{
    padding-top:32px!important;
  }
}


/* FAQ bewusst kompakter als große Abschnittsüberschriften: Fragen dürfen nicht unnötig in vier Zeilen umbrechen. */
@media (max-width:700px){
  html body .dilek-extensions-page .dilek-faq details{
    padding:17px 20px!important;
  }
  html body .dilek-extensions-page .dilek-faq details summary{
    font-size:.95rem!important;
    line-height:1.35!important;
    letter-spacing:-.01em!important;
  }
  html body .dilek-extensions-page .dilek-faq details p{
    margin-top:12px!important;
  }
}


/* Die Inhaltskarten behalten ihre ursprüngliche Typografie und enden mobil direkt nach ihrem Inhalt. */
@media (max-width:700px){
  html body .dilek-extensions-page .dilek-answer-grid{
    align-items:start!important;
  }
  html body .dilek-extensions-page .dilek-answer-grid article{
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
  }
}


/* Verbindliche Copy-Referenz: entspricht exakt der Hero-Copy (16px / 27,2px / Gewicht 400).
   Karten, FAQ-Antworten und Metadaten sind absichtlich ausgenommen. */
html body .dilek-extensions-page{
  --dilek-copy-size:1rem;
  --dilek-copy-line:1.7;
  --dilek-copy-weight:400;
}
html body .dilek-extensions-page .dilek-service-hero__card > p:not(.dilek-eyebrow):not(.dilek-service-hero__address),
html body .dilek-extensions-page .dilek-intro > p:not(.dilek-eyebrow),
html body .dilek-extensions-page .dilek-section-head > p,
html body .dilek-extensions-page .dilek-extension-method-showcase__copy > p,
html body .dilek-extensions-page .dilek-extension-result__grid > div > p:not(.dilek-eyebrow),
html body .dilek-extensions-page .dilek-link-grid > article > p,
html body .dilek-extensions-page .dilek-contact p:not(.dilek-eyebrow){
  font-size:var(--dilek-copy-size)!important;
  line-height:var(--dilek-copy-line)!important;
  font-weight:var(--dilek-copy-weight)!important;
}


/* Nur Ablauf 01–05: keine gestreckten Rasterkarten auf Mobil, kompakter Innenraum. */
@media (max-width:700px){
  html body .dilek-extensions-page .dilek-extension-process .dilek-step-grid{
    align-items:start!important;
  }
  html body .dilek-extensions-page .dilek-extension-process .dilek-step-grid article{
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    padding:20px 18px!important;
  }
}


/* Feines Haar: dieselbe verbindliche Copy-Referenz wie auf der Extensions-Hubseite.
   Karten, FAQ-Mechanik und kleine Metadaten bleiben bewusst ausgenommen. */
html body .dilek-fine-hair{
  --dilek-copy-size:1rem;
  --dilek-copy-line:1.7;
  --dilek-copy-weight:400;
}
html body .dilek-fine-hair .dilek-service-hero__card > p:not(.dilek-eyebrow):not(.dilek-service-hero__address),
html body .dilek-fine-hair .dilek-fine-hair__copy > p,
html body .dilek-fine-hair .dilek-fine-hair__section-head > p,
html body .dilek-fine-hair .dilek-fine-hair__consultation-grid > div:last-child > p:not(.dilek-eyebrow),
html body .dilek-fine-hair .dilek-fine-hair__natural-grid > div:first-child > p:not(.dilek-eyebrow),
html body .dilek-fine-hair .dilek-fine-hair__faq-grid > div:first-child > p:not(.dilek-eyebrow),
html body .dilek-fine-hair .dilek-fine-hair__hub p:not(.dilek-eyebrow),
html body .dilek-fine-hair .dilek-fine-hair__cta p:not(.dilek-eyebrow){
  font-size:var(--dilek-copy-size)!important;
  line-height:var(--dilek-copy-line)!important;
  font-weight:var(--dilek-copy-weight)!important;
}

/* Feines Haar: mobile Ränder, H2-Skala und FAQ-Dichte entsprechen dem freigegebenen DILEK-Master. */
@media (max-width:760px){
  html body .dilek-fine-hair .dilek-shell{
    width:min(100% - 64px,560px)!important;
  }
  html body .dilek-fine-hair h2{
    font-size:clamp(1.85rem,7.8vw,2.05rem)!important;
    line-height:1.12!important;
    letter-spacing:-.035em!important;
  }
  html body .dilek-fine-hair .dilek-fine-hair__answer,
  html body .dilek-fine-hair .dilek-fine-hair__planning,
  html body .dilek-fine-hair .dilek-fine-hair__consultation,
  html body .dilek-fine-hair .dilek-fine-hair__natural,
  html body .dilek-fine-hair .dilek-fine-hair__practical,
  html body .dilek-fine-hair .dilek-fine-hair__faq{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }
  html body .dilek-fine-hair .dilek-fine-hair__accordion summary{
    padding:17px 20px!important;
    font-size:.95rem!important;
    line-height:1.35!important;
    letter-spacing:-.01em!important;
  }
  html body .dilek-fine-hair .dilek-fine-hair__accordion summary:after{
    right:20px!important;
    top:15px!important;
  }
  html body .dilek-fine-hair .dilek-fine-hair__accordion details p{
    padding:0 20px 17px!important;
    max-width:100%!important;
  }
  html body .dilek-fine-hair .dilek-fine-hair__planning-grid article,
  html body .dilek-fine-hair .dilek-fine-hair__practical-grid article{
    min-height:0!important;
  }
}


/* Verbindliche Feinhaar-Überschriftenskala: exakt dieselben Stufen wie auf der Extensions-Seite Offenbach.
   Diese hohe Spezifität schützt den Elementor-HTML-Inhalt vor Theme-Kit-Regeln. */
html body .dilek-fine-hair .dilek-service-hero h1{
  font-size:clamp(2.25rem,2.7vw,2.75rem)!important;
  line-height:1.1!important;
  letter-spacing:-.045em!important;
}
html body .dilek-fine-hair h2{
  font-size:clamp(1.9rem,3.1vw,3.15rem)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
html body .dilek-fine-hair .dilek-fine-hair__planning-grid h3,
html body .dilek-fine-hair .dilek-fine-hair__steps h3,
html body .dilek-fine-hair .dilek-fine-hair__practical-grid h3{
  margin:9px 0 10px!important;
  font-size:1.35rem!important;
  line-height:1.23!important;
  letter-spacing:-.025em!important;
}

/* Die Feinhaar-Akkordeons sind der freigegebene FAQ-Standard für weitere Leistungsseiten.
   Ihre kompakte Größe, Ränder und Lesbarkeit bleiben unverändert. */

/* Mobil übernimmt Feines Haar exakt die Hero-H1-Skala der Extensions-Referenz und bleibt innerhalb der Textspalte. */
@media (max-width:760px){
  html body .dilek-fine-hair .dilek-service-hero h1{
    font-size:clamp(2rem,8vw,2.32rem)!important;
    line-height:1.1!important;
  }
}


/* Feines Haar: sichtbare, lesbare H2-Stufe für inhaltliche Abschnitte.
   Diese Regel ersetzt nur die zu groß gerenderte Abschnitts-H2; die FAQ bleibt bewusst unverändert. */
html body .dilek-fine-hair .dilek-fine-hair__answer h2,
html body .dilek-fine-hair .dilek-fine-hair__planning h2,
html body .dilek-fine-hair .dilek-fine-hair__consultation h2,
html body .dilek-fine-hair .dilek-fine-hair__natural h2,
html body .dilek-fine-hair .dilek-fine-hair__practical h2,
html body .dilek-fine-hair .dilek-fine-hair__hub h2,
html body .dilek-fine-hair .dilek-fine-hair__cta h2{
  font-size:clamp(1.75rem,2.5vw,2.25rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
}
@media (max-width:760px){
  html body .dilek-fine-hair .dilek-fine-hair__answer h2,
  html body .dilek-fine-hair .dilek-fine-hair__planning h2,
  html body .dilek-fine-hair .dilek-fine-hair__consultation h2,
  html body .dilek-fine-hair .dilek-fine-hair__natural h2,
  html body .dilek-fine-hair .dilek-fine-hair__practical h2,
  html body .dilek-fine-hair .dilek-fine-hair__hub h2,
  html body .dilek-fine-hair .dilek-fine-hair__cta h2{
    font-size:clamp(1.7rem,7vw,1.9rem)!important;
  }
}


/* Feines Haar: Titel, Nummer und Copy der vier Planungskarten teilen exakt dieselbe linke Textachse. */
html body .dilek-fine-hair .dilek-fine-hair__planning-grid h3{
  margin:22px 21px 12px!important;
}
html body .dilek-fine-hair .dilek-fine-hair__steps h3{
  margin:0 0 4px!important;
}
html body .dilek-fine-hair .dilek-fine-hair__practical-grid h3{
  margin:0 0 13px!important;
}

/*
 * DILEK Überschriften-Master 0.1.143
 * Verbindliche Hierarchie für alle bereits neu gestalteten DILEK-Seiten.
 *
 * Desktop: H1 bis 44 px, H2 bis 34,4 px, H3 bis 21,6 px.
 * Mobil:   H1 mindestens 32 px, H2 maximal 30,4 px, H3 maximal 20 px.
 *
 * Die Doppelung der jeweiligen Seiten-ID bzw. des Klassenpaars ist bewusst:
 * Elementor-HTML-Widgets enthalten eigene, spätere Style-Blöcke. Diese Regel
 * muss sie über die CSS-Spezifität zuverlässig überstimmen, ohne Inhalte,
 * Bilder, Abstände, Copy oder CTA-Styling zu verändern.
 */

/* Alle eindeutigen DILEK-Seitencontainer, mit einer Spezifität oberhalb der Widget-CSS. */
html body #dilek-home-content#dilek-home-content,
html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page,
html body #dilek-fine-hair-content#dilek-fine-hair-content,
html body #dilek-price-content#dilek-price-content,
html body #dilek-balayage-elementor#dilek-balayage-elementor,
html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor,
html body #dilek-bob-elementor#dilek-bob-elementor,
html body #dilek-service-page#dilek-service-page{
  --dilek-heading-h1-desktop:clamp(2.4rem,3.05vw,2.75rem);
  --dilek-heading-h2-desktop:clamp(1.8rem,2.2vw,2.15rem);
  --dilek-heading-h3-desktop:clamp(1.1rem,1.45vw,1.35rem);
  --dilek-heading-h1-mobile:clamp(2rem,8vw,2.32rem);
  --dilek-heading-h2-mobile:clamp(1.7rem,7vw,1.9rem);
  --dilek-heading-h3-mobile:clamp(1.08rem,5.3vw,1.25rem);
}

@media (min-width:701px){
  html body #dilek-home-content#dilek-home-content h1,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h1,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h1,
  html body #dilek-price-content#dilek-price-content h1,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h1,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h1,
  html body #dilek-bob-elementor#dilek-bob-elementor h1,
  html body #dilek-service-page#dilek-service-page h1{
    font-size:var(--dilek-heading-h1-desktop)!important;
    line-height:1.1!important;
  }

  html body #dilek-home-content#dilek-home-content h2,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h2,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h2,
  html body #dilek-price-content#dilek-price-content h2,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h2,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h2,
  html body #dilek-bob-elementor#dilek-bob-elementor h2,
  html body #dilek-service-page#dilek-service-page h2{
    font-size:var(--dilek-heading-h2-desktop)!important;
    line-height:1.12!important;
  }

  html body #dilek-home-content#dilek-home-content h3,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h3,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h3,
  html body #dilek-price-content#dilek-price-content h3,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h3,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h3,
  html body #dilek-bob-elementor#dilek-bob-elementor h3,
  html body #dilek-service-page#dilek-service-page h3{
    font-size:var(--dilek-heading-h3-desktop)!important;
    line-height:1.25!important;
  }
}

@media (max-width:700px){
  html body #dilek-home-content#dilek-home-content h1,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h1,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h1,
  html body #dilek-price-content#dilek-price-content h1,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h1,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h1,
  html body #dilek-bob-elementor#dilek-bob-elementor h1,
  html body #dilek-service-page#dilek-service-page h1{
    font-size:var(--dilek-heading-h1-mobile)!important;
    line-height:1.1!important;
  }

  html body #dilek-home-content#dilek-home-content h2,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h2,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h2,
  html body #dilek-price-content#dilek-price-content h2,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h2,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h2,
  html body #dilek-bob-elementor#dilek-bob-elementor h2,
  html body #dilek-service-page#dilek-service-page h2{
    font-size:var(--dilek-heading-h2-mobile)!important;
    line-height:1.12!important;
  }

  html body #dilek-home-content#dilek-home-content h3,
  html body .dilek-home.dilek-extensions-page.dilek-home.dilek-extensions-page h3,
  html body #dilek-fine-hair-content#dilek-fine-hair-content h3,
  html body #dilek-price-content#dilek-price-content h3,
  html body #dilek-balayage-elementor#dilek-balayage-elementor h3,
  html body #dilek-kurzhaar-elementor#dilek-kurzhaar-elementor h3,
  html body #dilek-bob-elementor#dilek-bob-elementor h3,
  html body #dilek-service-page#dilek-service-page h3{
    font-size:var(--dilek-heading-h3-mobile)!important;
    line-height:1.25!important;
  }
}