/* Haarmonie – Webseite
   Maße, Farben und Schrift entsprechen der Webflow-Seite (docs/BESTANDSAUFNAHME.md).
   Mobile ist das maßgebliche Design; ab 768 px wird das Layout breiter statt nur zu zentrieren. */

@font-face {
  font-family: 'Abhaya Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/abhaya-libre-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Abhaya Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/abhaya-libre-700.woff2') format('woff2');
}

:root {
  --brand-bg: #777572;
  --special-bg: #545454;
  --rosa: #f8a8a7;
  --knopf-rosa: #ebb4b999;
  --box-grau: #54545499;
  --zeile-rosa: #b58d8b4d;
  --zeile-grau: #5454544d;
  --weiss: #fff;
  --schrift: 'Abhaya Libre', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--brand-bg);
  color: var(--weiss);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 20px;
  /* Mangel 1: kein seitliches Überlaufen mehr */
  overflow-x: clip;
}

main { flex: 1 0 auto; }

img, video { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

.akzent { color: var(--rosa); }

:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprunglink {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 8px 14px; background: var(--weiss); color: #000; border-radius: 6px;
}
.sprunglink:focus { top: 8px; }

/* Knopf wie „Preise“ (auf Webflow fiel er auf Arial zurück, jetzt in der Hausschrift) */
.knopf {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 20px;
  background: var(--knopf-rosa);
  color: var(--weiss);
  font-size: 20px;
  line-height: 1;
  transition: background-color .2s;
}
.knopf:hover { background: #ebb4b9cc; }

/* --- Marke: „Friseursalon  [Logo]  HAARMONIE“ in Kopf und Fuß --------------- */

.marke {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.marke__salon, .marke__name {
  flex: 0 1 35%;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}
.marke__logo { flex: none; width: 59px; height: 60px; padding: 0 10px; box-sizing: content-box; }

/* --- Kopf ------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 5px 12px;
  background: var(--special-bg);
  /* Mangel 7: Schatten trennt den mitlaufenden Kopf vom Inhalt */
  box-shadow: 0 2px 10px rgb(0 0 0 / .25);
}
.kopf__link { max-width: 80%; }

/* --- Startseite: Video ------------------------------------------------------- */

.hero { display: flex; justify-content: center; margin-bottom: 10px; }
.hero__rahmen {
  position: relative;
  width: 278px;
  aspect-ratio: 278 / 500;
  overflow: hidden;
  background: #3a3a3a;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__titel, .hero__untertitel, .hero__knopf {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: var(--weiss);
  line-height: 1;
  /* Mangel 6: auf hellen Videobildern besser lesbar */
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.hero__titel {
  top: 20%;
  padding: 2px 6px;
  border-radius: 10px;
  background: #545454b3;
  font-size: 32px;
}
.hero__untertitel {
  top: 53%;
  padding: 2px 6px;
  border-radius: 10px;
  background: #545454b3;
  font-size: 20px;
  word-spacing: 2px;
}
.hero__knopf {
  top: 75%;
  z-index: 2;
  padding: 6px;
  border-radius: 15px;
  background: var(--knopf-rosa);
  font-size: 25px;
  transition: background-color .2s;
}
.hero__knopf:hover { background: #ebb4b9cc; }

/* --- Startseite: Slogan und Über uns ----------------------------------------- */

.ueber-bereich { position: relative; isolation: isolate; }
.ueber-bereich__deko {
  position: absolute;
  z-index: -1;
  top: 230px;
  right: 0;
  width: 140px;
  height: auto;
  opacity: .42;
  pointer-events: none;
}

/* Mangel 1: Bilder bleiben innerhalb der Bildschirmbreite */
.slogan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  height: 300px;
  margin: 20px auto 40px;
  padding: 0 10px;
}
.slogan__bild { height: auto; min-width: 0; }
/* Bilder teilen sich den Platz neben dem Text und werden nie breiter als der Bildschirm */
.slogan__bild--bogen { flex: .8 1 0; max-width: 158px; border-radius: 999px 999px 0 0; }
.slogan__bild--rund { flex: 1 1 0; max-width: 200px; border-radius: 50%; }
.slogan__text {
  flex: none;
  /* schmal wie bei Webflow: jedes Akzentwort steht in einer eigenen Zeile */
  max-width: 80px;
  color: #000;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.slogan__text .akzent { white-space: nowrap; }

.ueber {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px 60px;
}
.ueber__titel { margin-bottom: 10px; font-size: 24px; line-height: 1; text-align: center; }
.ueber__text {
  width: 82%;
  margin: 10px 20px 0;
  font-size: 16px;
  line-height: 115%;
  text-align: center;
}
.ueber__stelle { margin-top: 2.3em; }

/* --- Startseite: Angebote ------------------------------------------------------ */

.angebote {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px 20px;
  background: var(--special-bg);
  overflow: hidden;
}
.angebote__hintergrund {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: fill;
}
.angebote__titel {
  margin-top: 20px;
  font-size: 24px;
  line-height: 41px;
  text-align: center;
}
.angebote__galerien {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 10px;
}
.angebote__verweis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 303px;
  margin-top: 20px;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}
.angebote__verweis .knopf { margin: -14px 0 15px; }

/* Karussell: natives Wischen mit Scroll-Snap, Pfeile und Punkte per JS */
.karussell {
  position: relative;
  width: 90%;
  margin: 20px 0 0;
  border-radius: 8px;
  overflow: hidden;
}
.karussell + .karussell { margin-top: 20px; }
.karussell__spur {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.karussell__spur::-webkit-scrollbar { display: none; }
.karussell__spur:focus-visible { outline-offset: -3px; }
.karussell__bild { flex: 0 0 100%; scroll-snap-align: start; }
.karussell__bild img { width: 100%; height: auto; aspect-ratio: 292 / 205; object-fit: cover; }
.karussell__pfeil {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.karussell__pfeil svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--weiss); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5));
}
.karussell__pfeil--zurueck { left: 4px; }
.karussell__pfeil--weiter { right: 4px; }
.karussell__punkte {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.karussell__punkt {
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.karussell__punkt::before {
  content: '';
  display: block;
  width: 9px; height: 9px;
  margin: auto;
  border-radius: 50%;
  background: rgb(255 255 255 / .4);
  transition: background-color .2s;
}
.karussell__punkt[aria-current='true']::before { background: var(--weiss); }

/* --- Preisseite ----------------------------------------------------------------- */

.preise-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.preise-kopf__intro { width: 60%; margin: 20px 0; padding: 30px 0; font-size: 20px; }
.preise-kopf__bild { width: calc(100% - 16px); max-width: 760px; height: auto; margin: 10px 8px; }
.preise-kopf__termin { width: 80%; padding: 10px 0; font-size: 26px; }
.preise-kopf__termin a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.preise-kopf__titel { width: 70%; padding: 25px 0 20px; font-size: 24px; line-height: 1; }

.kategorien { margin-bottom: 10px; }
.kategorie { margin: 10px 0; background: var(--rosa); }
.kategorie--grey { background: var(--special-bg); }
.kategorie__titel { font-size: 30px; line-height: 1; }
.kategorie__knopf {
  display: block;
  width: 100%;
  padding: 20px;
  border: 0;
  background: transparent;
  color: var(--weiss);
  font-size: 30px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
.kategorie__knopf:focus-visible { outline-color: var(--weiss); outline-offset: -6px; }
/* Mangel 16: aufklappbar per Tastatur, mit sanfter Animation */
.kategorie__inhalt {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility .3s;
}
.kategorie--offen .kategorie__inhalt { grid-template-rows: 1fr; visibility: visible; }
/* Webflow legte die Zeilen auf den hellgrauen Standardhintergrund seiner Dropdown-Listen */
.kategorie__liste { min-height: 0; overflow: hidden; background: #ddd; }
.leistung {
  display: flex;
  align-items: center;
  gap: 8px;
  outline: 2px solid var(--weiss);
  background: var(--zeile-rosa);
  color: #000;
  font-size: 16px;
}
.kategorie--grey .leistung { background: var(--zeile-grau); }
.leistung__name { flex: 1 1 80%; margin: 3px 0; padding-left: 10px; }
.leistung__preis { flex: 0 0 auto; max-width: 40%; padding-right: 10px; text-align: right; white-space: nowrap; }
.kategorie--grey .leistung { color: #000; }

/* --- Textseiten (Impressum, Datenschutz, 404) ----------------------------------- */

.text-seite {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  font-size: 16px;
  line-height: 1.45;
}
.text-seite h1 { margin-bottom: 20px; font-size: 30px; line-height: 1.1; }
.text-seite h2 { margin: 28px 0 6px; font-size: 20px; line-height: 1.2; color: var(--rosa); }
.text-seite p + p { margin-top: 10px; }
.text-seite a:not(.knopf):not(.login-knopf) { text-decoration: underline; text-underline-offset: 3px; }
.text-seite--mitte { text-align: center; }
.text-seite--mitte .knopf { margin: 16px 6px 0; }
.text-seite__login { margin-top: 48px; }
.login-knopf {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgb(255 255 255 / .45);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .7;
}
.login-knopf:hover { opacity: 1; }

/* --- Fuß -------------------------------------------------------------------------- */

.fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 20px 16px;
  background: var(--special-bg);
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.fuss__marke { max-width: 80%; }
.fuss__titel { font-size: 16px; line-height: 1; }
.fuss__zeiten { width: 80%; margin: 15px 0 5px; }
.fuss__liste li { margin-top: 1em; }
.fuss__kontakt { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80%; }
.fuss__adresse { margin-bottom: 5px; }
.fuss__adresse a { text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 3px; }
.fuss__social { display: flex; gap: 16px; }
.fuss__social img { width: 28px; height: 28px; }
.fuss__recht { display: flex; gap: 24px; margin-top: 18px; font-size: 14px; }
.fuss__recht a { opacity: .85; }
.fuss__recht a:hover { opacity: 1; text-decoration: underline; }

/* --- Ab Tablet ------------------------------------------------------------------- */

@media (min-width: 480px) {
  .kopf { position: static; height: 80px; padding: 2px 12px; }
  .kopf__link { max-width: 940px; }
  .kopf .marke__salon, .kopf .marke__name { font-size: 30px; }
  .fuss__marke .marke__salon, .fuss__marke .marke__name { font-size: 20px; }
}

@media (min-width: 768px) {
  .hero { padding-top: 24px; }
  .hero__rahmen { width: 320px; border-radius: 6px; }
  .hero__titel { font-size: 36px; }
  .hero__untertitel { font-size: 22px; }

  .slogan { max-width: 680px; height: auto; margin: 56px auto; gap: 32px; }
  .slogan__bild--bogen { flex: none; width: 220px; max-width: none; }
  .slogan__bild--rund { flex: none; width: 240px; max-width: none; }
  .slogan__text { font-size: 20px; max-width: 150px; }
  .ueber-bereich__deko { top: 260px; right: max(0px, calc(50% - 400px)); width: 180px; }

  .ueber { max-width: 600px; margin: 0 auto 72px; }
  .ueber__text { width: 100%; font-size: 18px; }
  .ueber__titel { font-size: 28px; }

  /* Webflow zog das hochkante Ornament auf volle Breite; auf breiten Bildschirmen wäre es
     stark verzerrt. Hier behält es sein Seitenverhältnis am rechten Rand. Der Abschnitt
     bekommt den dunklen Ton, den das halbtransparente Bild auf dem Handy erzeugt, und
     „screen“ blendet die schwarzen Flächen des Bildes aus, sodass keine Kante entsteht. */
  .angebote { padding: 16px 40px 40px; background: #363636; }
  .angebote__hintergrund {
    inset: 0 0 0 auto;
    width: auto;
    max-width: 50%;
    object-fit: contain;
    object-position: right center;
    mix-blend-mode: screen;
  }
  .angebote__titel { font-size: 28px; }
  .karussell { width: 520px; }

  .preise-kopf__intro { width: 420px; }
  .preise-kopf__termin { width: 560px; }
  .preise-kopf__titel { width: 480px; }
  .kategorien { max-width: 760px; margin: 0 auto 40px; }
  .kategorie { border-radius: 6px; overflow: hidden; }

  /* Mangel 4/5: Fuß als Raster statt überlappender Spalten */
  .fuss {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    align-items: start;
    column-gap: 64px;
    padding: 24px 40px 20px;
  }
  .fuss__marke { grid-column: 1 / -1; justify-self: center; max-width: 600px; margin-bottom: 8px; }
  .fuss__zeiten, .fuss__kontakt { width: auto; margin: 0; }
  .fuss__zeiten .fuss__liste li:first-child { margin-top: 1em; }
  .fuss__kontakt { padding-top: 2em; }
  .fuss__recht { grid-column: 1 / -1; justify-self: center; }
}

@media (min-width: 992px) {
  .hero__rahmen { width: 360px; }
  .angebote__galerien { flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }
  .karussell { width: 420px; }
  .karussell + .karussell { margin-top: 20px; }
  .angebote__verweis { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}