/* ============================================================
   Sophiesticated Beauty – Stylesheet

   Farben:  Pflaume #743563 | Rosé #FFF6F7 (Seitenhintergrund)
            Gold #d5b06b (feine Akzente)
   Schrift: Cormorant Garamond (Überschriften)
            Great Vibes (Schreibschrift, sparsam eingesetzt)
            Mulish (Fließtext und Bedienelemente)

   Überschriften-Muster wie im Original: erster Teil dunkel,
   Akzentwort in Pflaume.
   ============================================================ */

:root {
  --plum: #743563;
  --plum-dark: #5d2a4f;
  --cream: #FFF6F7;   /* Seitenhintergrund */
  --rose: #F7E6EC;    /* getönte Abschnitte und Footer */
  --blush: #F2DCE4;   /* Urlaubsbanner, noch eine Spur tiefer */
  --ink: #2A1F26;     /* Fließtext: warmes Dunkel statt hartem Schwarz */
  --muted: #6B5460;   /* Nebentexte, Hinweise, Zeitangaben */
  --white: #ffffff;
  --gold: #d5b06b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Mulish', 'Avenir', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
}

/* ---------- Tastaturbedienung sichtbar machen ----------
   :focus-visible greift nur bei Tastatur, nicht beim Klicken -
   Mausnutzer sehen also nichts, Tastaturnutzer finden sich
   zurecht. */
:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf dunklem Grund braucht es einen hellen Rahmen */
header :focus-visible,
.hero :focus-visible,
footer .btn:focus-visible {
  outline-color: var(--cream);
}

/* height: auto ist wichtig! Die Bilder haben im HTML feste
   Breiten- und Hoehenangaben (damit beim Laden nichts springt).
   Ohne height:auto wuerden sie dadurch verzerrt dargestellt. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Cormorant Garamond läuft optisch kleiner als eine Grotesk -
   die Schriftgrade sind deshalb durchgehend etwas höher
   angesetzt als üblich. */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
}

.accent { color: var(--plum); }

.script { font-family: 'Great Vibes', cursive; font-weight: 400; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- Urlaubsbanner (hell, passend zur Startseite) ---------- */
.announcement {
  background: var(--blush);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(116, 53, 99, 0.15);
  text-align: center;
}

.announcement .urlaub-script {
  font-family: 'Great Vibes', cursive;
  font-size: 27px;
  line-height: 1;
}

.announcement .urlaub-text {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding-top: 3px;
}

.announcement .urlaub-stern {
  color: var(--gold);
  font-size: 13px;
}

/* Haelt "von ..." und "bis ..." jeweils zusammen - auf schmalen
   Handys bricht der Zeitraum dann zwischen den beiden um. */
.zeitraum-teil { display: inline-block; white-space: nowrap; }

/* ---------- Urlaubs-Popup ---------- */
.urlaub-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(60, 30, 45, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.urlaub-overlay.sichtbar { opacity: 1; }

.urlaub-overlay.zu { opacity: 0; }

body.popup-offen { overflow: hidden; }

.urlaub-popup {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--cream);
  border-radius: 6px;
  padding: 44px 34px 38px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(60, 30, 45, 0.35);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s ease;
}

.urlaub-overlay.sichtbar .urlaub-popup { transform: translateY(0) scale(1); }

.urlaub-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 6px 6px 0 0;
  background: var(--plum);
}

.urlaub-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--plum);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}

.urlaub-close:hover { background: var(--blush); }

.urlaub-logo { height: 54px; width: auto; margin: 0 auto 6px; }

.urlaub-popup-stern {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 8px;
  margin-bottom: 2px;
}

.urlaub-popup-script {
  font-family: 'Great Vibes', cursive;
  color: var(--plum);
  font-size: 54px;
  line-height: 1.1;
}

.urlaub-popup-zeitraum {
  font-family: 'Mulish', sans-serif;
  color: var(--plum);
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.urlaub-popup-text {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 26px;
}

@media (max-width: 480px) {
  .urlaub-popup { padding: 38px 24px 32px; }
  .urlaub-popup-script { font-size: 44px; }
}

/* ---------- Header (Pflaume, goldenes Logo) ---------- */
header {
  background: var(--plum);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.35s ease;
}

/* Auf der Startseite liegt die Kopfleiste zunächst durchsichtig
   über dem Bild und färbt sich beim Scrollen ein. Der leichte
   Verlauf sorgt dafür, dass die goldene Wortmarke auch über
   hellen Bildstellen lesbar bleibt. */
header.ueber-bild {
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    rgba(50, 22, 42, 0.55) 0%,
    rgba(50, 22, 42, 0.25) 60%,
    rgba(50, 22, 42, 0) 100%);
}

/* Ist das Menue aufgeklappt, wird die Leiste immer voll
   eingefaerbt - auch ganz oben ueber dem Hero-Bild. Sonst
   scheint der Hero-Text durch die durchsichtige Leiste. */
header.menu-open {
  background-color: var(--plum);
  background-image: none;
}

.hero-pin { margin-top: calc(-1 * var(--header-h, 0px)); }

.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }

.logo .logo-s { height: 64px; width: auto; }

.logo .logo-word { height: 32px; width: auto; }

@media (max-width: 1024px) {
  .logo .logo-s { height: 52px; }
  .logo .logo-word { height: 26px; }
}

nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Das Menü bleibt bewusst in der Grotesk: eine feine
   Serifenschrift wäre bei 15px auf Pflaume schlecht lesbar. */
nav a {
  color: var(--cream);
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
}

nav a:not(.btn):hover, nav a.active:not(.btn) { text-decoration: underline; text-underline-offset: 5px; }

nav .social-icon { fill: var(--cream); }

/* ---------- Hamburger-Menü (Tablet & Handy) ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 8px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  margin: 6px 0;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1024px) {
  .header-inner { flex-wrap: nowrap; }

  .nav-toggle { display: block; order: -1; }

  /* Platzhalter rechts, damit das Logo mittig sitzt */
  .header-inner::after { content: ''; width: 42px; flex: none; }

  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--plum);
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 20px 30px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  }

  header.menu-open nav { display: flex; }

  header nav a { font-size: 17px; }
}

.btn {
  display: inline-block;
  background: var(--plum);
  color: var(--white);
  text-decoration: none;
  padding: 12px 30px;
  border-radius: 999px;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.5px;
  border: 1px solid var(--plum);
  transition: background 0.2s;
}

.btn:hover { background: var(--plum-dark); border-color: var(--plum-dark); }

header .btn { background: transparent; border: 1.5px solid var(--cream); color: var(--cream); }

header .btn:hover,
header .btn.active { background: var(--cream); color: var(--plum); }

/* ---------- Hero: Bild über die volle Breite, Text darüber ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* Dunkler Verlauf von links, damit der Text immer lesbar bleibt –
   unabhängig davon, was auf dem Bild zu sehen ist. */
.hero-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(50, 22, 42, 0.78) 0%,
      rgba(50, 22, 42, 0.55) 34%,
      rgba(50, 22, 42, 0.12) 62%,
      rgba(50, 22, 42, 0.05) 100%),
    linear-gradient(to bottom,
      rgba(50, 22, 42, 0.35) 0%,
      rgba(50, 22, 42, 0) 22%);
}

.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 6% 110px clamp(24px, 7%, 150px);
}

.hero-text > * { max-width: 580px; }

/* Kleine Zeile mit Goldstrich darüber */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 20px;
}

.hero-eyebrow::before {
  content: '';
  width: 46px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.hero-text h1 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 4px;
  text-shadow: 0 2px 24px rgba(40, 16, 34, 0.45);
}

.hero-text h1 .script {
  display: block;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  color: var(--white);
  font-size: clamp(56px, 7.4vw, 104px);
  line-height: 1.05;
  margin-top: 2px;
}

.hero-sub {
  color: var(--cream);
  font-size: 17px;
  max-width: 430px;
  margin: 20px 0 34px;
  text-shadow: 0 1px 16px rgba(40, 16, 34, 0.5);
}

.hero-text .btn { align-self: flex-start; }

/* Heller Button auf dunklem Bild */
.btn-hell {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--plum);
}

.btn-hell:hover { background: var(--white); border-color: var(--white); color: var(--plum); }

.hero-media {
  position: absolute;
  inset: 0;
  background: url('assets/hero-still.jpg') center 45% / cover no-repeat;
}

/* Bildsequenz, die beim Scrollen weitergeschaltet wird.
   Liegt über dem Standbild und wird nur eingeblendet,
   wenn die Animation wirklich läuft. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-canvas.bereit { opacity: 1; }

/* Nur aktiv, wenn die Animation läuft: Der Bereich ist doppelt
   so hoch wie der Bildschirm, der Hero bleibt beim Scrollen stehen
   und die Bildsequenz läuft in dieser Strecke durch. */
.hero-pin.aktiv { height: 200vh; }

.hero-pin.aktiv .hero {
  position: sticky;
  top: 0;
  height: 100vh;
}

@media (max-width: 900px) {
  .hero { height: 78vh; min-height: 480px; }

  /* Hochformatiger Bildausschnitt fürs Handy */
  .hero-media { background-image: url('assets/hero-still-hoch.jpg'); }

  .hero-schleier {
    background: linear-gradient(to top,
      rgba(50, 22, 42, 0.80) 0%,
      rgba(50, 22, 42, 0.45) 42%,
      rgba(50, 22, 42, 0.20) 70%,
      rgba(50, 22, 42, 0.30) 100%);
  }

  .hero-text {
    justify-content: flex-end;
    padding: 30px 24px 78px;
    text-align: center;
  }

  .hero-eyebrow { justify-content: center; }

  .hero-sub { margin-left: auto; margin-right: auto; }

  .hero-text .btn { align-self: center; }
}

/* ---------- Abschnitte ---------- */
section { padding: 70px 0; position: relative; }

.section-title {
  text-align: center;
  font-size: clamp(34px, 5vw, 58px);
  margin-bottom: 40px;
}

/* Feiner Goldstrich unter jedem Abschnittstitel - greift das
   Motiv aus dem Kopfbereich des grossen Fotos wieder auf. */
.section-title::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  margin: 18px auto 0;
  background: var(--gold);
}

.section-sub {
  text-align: center;
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
}

/* ---------- Drei Kurzargumente unter dem grossen Foto ---------- */
.argumente-band { padding: 46px 0; background: var(--rose); }

.argumente {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  text-align: center;
}

.argument h3 {
  font-size: 22px;
  color: var(--plum);
  margin-bottom: 8px;
}

.argument p { font-size: 15px; margin: 0; }

/* Trennstriche zwischen den drei Spalten. Der gleiche
   Innenabstand liegt auf allen dreien, damit die Spalten
   trotz Strich gleich breit bleiben. */
@media (min-width: 760px) {
  .argument { padding: 0 15px; }

  .argument + .argument { border-left: 1px solid rgba(116, 53, 99, 0.2); }
}



/* ---------- Behandlungs-Karten ----------
   Weisse Karten im Stil der Preisbloecke: Foto oben im
   Querformat, Titel in der Serifenschrift, Preis darunter.
   Die ganze Karte ist anklickbar und hebt sich beim
   Darueberfahren leicht an. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 960px;
  margin: 0 auto 44px;
}

.card {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(116, 53, 99, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover, .card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(116, 53, 99, 0.18);
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card h3 {
  margin: 20px 18px 2px;
  font-size: 25px;
  color: var(--plum);
}

.card-preis {
  margin: 0 18px 22px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}
.center { text-align: center; }

/* ---------- Zweispaltiges Layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.split img { border-radius: 4px; }

.split h1, .split h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; }

.split p { margin-bottom: 14px; font-size: 16px; }

/* Einleitungszeile direkt unter einer Überschrift */
.split .lead {
  font-size: 18px;
  color: var(--plum);
  margin-top: -6px;
  margin-bottom: 18px;
}

.split .btn { margin-top: 10px; }

/* Knopf und Instagram-Zeichen nebeneinander */
.willkommen-aktionen {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
}

.willkommen-aktionen .btn { margin-top: 0; }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- Mein Studio (zwei Fotos nebeneinander) ---------- */
.studio-band { background: var(--rose); }

.studio-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.studio-bilder img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(116, 53, 99, 0.14);
}

/* Am Handy liegen die beiden Fotos nebeneinander in einem
   Wischstreifen statt untereinander - das spart Scrollweg.
   Vom zweiten Bild schaut ein Rand herein, damit man sieht,
   dass es weitergeht. */
@media (max-width: 700px) {
  .studio-bilder {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .studio-bilder::-webkit-scrollbar { display: none; }

  .studio-bilder img {
    width: 80%;
    flex: 0 0 80%;
    scroll-snap-align: center;
  }
}

/* ---------- Galerie als Karussell ----------
   Drei Bilder nebeneinander, das mittlere ist das Fokusbild.
   Breite und Abstand der Bilder setzt seite.js je nach
   Bildschirmbreite als CSS-Variablen auf die Spur.            */
.galerie-reihe {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.galerie-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Platz für den Schatten des Fokusbildes */
  padding: 10px 0 14px;
}

.galerie-track {
  display: flex;
  gap: var(--gal-abstand, 22px);
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1);
}

.galerie-slide {
  flex: 0 0 var(--gal-breite, 300px);
  margin: 0;
  cursor: pointer;
  opacity: 0.45;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.galerie-slide.aktiv { opacity: 1; transform: scale(1); cursor: default; }

.galerie-slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--rose);
}

.galerie-slide.aktiv img { box-shadow: 0 14px 34px rgba(116, 53, 99, 0.22); }

.galerie-slide figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.galerie-slide.aktiv figcaption { color: var(--plum); font-weight: 700; }

.galerie-zaehler {
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--plum);
}

/* Ohne JavaScript: einfach drei Bilder untereinander */
.galerie-noscript { display: grid; gap: 22px; }

.galerie-noscript img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }

.galerie-noscript figcaption { margin-top: 10px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .galerie-track, .galerie-slide { transition: none; }
}

/* ---------- Instagram-Icon (schwarz im Inhalt) ---------- */
.social-icon { width: 30px; height: 30px; fill: var(--ink); }

/* ---------- Preislisten ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.price-block {
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(116, 53, 99, 0.10);
  padding: 34px 30px;
}

.price-grid.schmal { max-width: 560px; margin: 0 auto; }

.price-block h3 { font-size: 26px; margin-bottom: 12px; text-align: center; color: var(--plum); }

/* Einzelpreis (Liftings), gross unter dem Namen */
.price-einzel {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 36px;
  color: var(--plum);
  line-height: 1.1;
}

/* Dauer und Zusatz, kleine Zeile darunter */
.price-dauer {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Beschreibungstext im Preisblock */
.price-text {
  font-size: 15px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(116, 53, 99, 0.2);
}

.price-block .price-text:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 16px;
  border-bottom: 1px dashed rgba(116, 53, 99, 0.2);
}

.price-row:last-child { border-bottom: none; }

.price-row .price { white-space: nowrap; font-weight: 700; }

.notice {
  background: var(--white);
  border: 2px solid var(--plum);
  border-radius: 6px;
  padding: 30px;
  margin-top: 40px;
}

.notice h3 { text-align: center; margin-bottom: 14px; font-size: 28px; color: var(--plum); }

.notice p { margin-bottom: 10px; }

.notice p:last-child { margin-bottom: 0; }

/* ---------- Sprungmarken oben auf der Behandlungen-Seite ---------- */
.seiten-kopf { padding-bottom: 0; }

.sprungmarken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.sprungmarken a {
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--plum);
  border: 1px solid rgba(116, 53, 99, 0.35);
  border-radius: 999px;
  padding: 7px 18px;
  transition: background 0.2s, color 0.2s;
}

.sprungmarken a:hover { background: var(--plum); color: var(--cream); }

/* Beim Springen nicht unter der Kopfleiste landen */
section[id] { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }

/* ---------- Häufige Fragen (Klappbereich) ---------- */
.faq-band { background: var(--rose); }

.faq { max-width: 780px; margin: 0 auto; }

.faq-item {
  background: var(--white);
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(116, 53, 99, 0.08);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
}

/* Das voreingestellte Dreieck der Browser ausblenden */
.faq-item summary::-webkit-details-marker { display: none; }

/* Eigenes Pluszeichen, das sich beim Aufklappen dreht */
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
  color: var(--plum);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item summary:hover { color: var(--plum); }

.faq-item p { padding: 0 22px 20px; font-size: 16px; }

/* ---------- Kontaktwege (Seite "Termin anfragen") ---------- */
.kontaktwege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
  margin: 48px 0 40px;
  text-align: center;
}

.kontaktwege h3 { font-size: 24px; margin-bottom: 10px; color: var(--plum); }

.kontaktwege .hours { margin: 0 auto; }

.kontaktwege .klein { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- Bewertungen auf der Startseite ---------- */
.bewertungen-band { background: var(--rose); }

/* ---------- Kundinnen-Bewertungen (Karussell) ---------- */
/* Bewertungen in der Serifenschrift statt in kursiver Grotesk:
   Von Mulish gibt es keinen echten Kursivschnitt, der Browser
   müsste ihn selbst schrägstellen - das sieht unsauber aus. */
.quote {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.5;
}

/* Sternereihe über der Bewertung */
.bew-sterne {
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}

.bew-sterne svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  fill: var(--gold);
}

.quote .author {
  display: block;
  margin-top: 18px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--plum);
}

.bew-reihe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 940px;
  margin: 0 auto;
}

/* Alle Bewertungen liegen übereinander: die Höhe richtet sich
   nach der längsten, dadurch springt beim Wechsel nichts. */
.bew-buehne {
  display: grid;
  flex: 1;
  min-width: 0;
}

.bew-buehne .quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.bew-buehne .quote.aktiv { opacity: 1; visibility: visible; }

.bew-pfeil, .gal-pfeil {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--plum);
  border-radius: 50%;
  background: transparent;
  color: var(--plum);
  font-size: 28px;
  line-height: 1;
  padding: 0 0 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.bew-pfeil:hover, .gal-pfeil:hover { background: var(--plum); color: var(--white); }

/* Die Pfeile der Galerie sitzen auf Höhe der Bildmitte, nicht der Beschriftung.
   10px = oberer Innenabstand des Sichtfensters, 22px = halbe Pfeilhöhe. */
.gal-pfeil { margin-top: calc(var(--gal-breite, 300px) * 0.625 - 12px); }

.bew-punkte {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.bew-punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--plum);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.bew-punkt.aktiv { background: var(--plum); }

@media (max-width: 600px) {
  .bew-reihe { gap: 4px; }
  .bew-pfeil, .gal-pfeil { width: 36px; height: 36px; font-size: 22px; }
  .quote { font-size: 17px; }

  /* Am Handy liegen die Pfeile über den Bildrändern statt daneben -
     so bleibt die volle Breite für das Foto. Gewischt wird ohnehin. */
  .galerie-reihe { position: relative; gap: 0; }

  .gal-pfeil {
    position: absolute;
    top: calc(var(--gal-breite, 300px) * 0.625 - 8px);
    margin-top: 0;
    z-index: 2;
    background: rgba(255, 246, 247, 0.85);
  }

  .gal-prev { left: 0; }
  .gal-next { right: 0; }
}

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
  margin-bottom: 36px;
}

.contact-grid h3 { font-size: 27px; margin-bottom: 12px; }

.hours { width: 100%; max-width: 280px; border-collapse: collapse; }

.hours td { padding: 4px 0; font-size: 16px; vertical-align: top; }

.hours td:last-child { text-align: right; white-space: nowrap; }

/* ---------- Karte (wird erst nach Klick geladen) ---------- */
.karte { margin-top: 50px; }

.karte-platzhalter {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
  background: var(--rose);
  border: 1px solid rgba(116, 53, 99, 0.2);
  border-radius: 6px;
}

.karte-platzhalter h3 { font-size: 28px; }

.karte-adresse { font-size: 17px; }

.karte-hinweis {
  max-width: 480px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.karte-platzhalter .btn { margin-top: 4px; }

/* Die nachgeladene Karte selbst */
.map {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 800px; margin: 0 auto; }

.legal h1 { font-size: clamp(34px, 4.5vw, 48px); margin-bottom: 30px; text-align: center; }

/* Nur die Zwischenüberschriften im Fließtext, nicht die
   Abschnittstitel: die bringen eine eigene Klasse mit und
   sollen ihre volle Größe behalten. */
.legal h2:not([class]) { font-size: 24px; margin: 30px 0 8px; }

.legal p { margin-bottom: 12px; font-size: 16px; }

/* ---------- Footer (tieferes Rosé, Schreibschrift-Logo) ---------- */
footer {
  background: var(--rose);
  border-top: 1px solid rgba(116, 53, 99, 0.18);
  color: var(--ink);
  padding: 60px 0 30px;
}

.footer-brand {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  text-align: center;
  font-size: clamp(48px, 8vw, 86px);
  line-height: 1.1;
  margin-bottom: 30px;
}

.footer-brand .accent { color: var(--plum); }

.footer-rule {
  border: none;
  border-top: 1.5px solid var(--plum);
  max-width: 1100px;
  margin: 0 auto 40px;
}

.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}

.footer-grid h3 { font-size: 25px; margin-bottom: 12px; }

.footer-grid p, .footer-grid li { font-size: 15px; }

.footer-grid ul { list-style: none; }

.footer-grid li { margin-bottom: 8px; }

.copyright {
  text-align: center;
  margin-top: 44px;
  font-size: 14px;
  color: var(--muted);
}