/* =========================================================================
   Hairstyle My Cuts — Stylesheet
   -------------------------------------------------------------------------
   WICHTIG FÜR DEN ELEMENTOR-NACHBAU:
   Das gesamte Layout basiert ausschliesslich auf Flexbox (display:flex).
   Es wird KEIN CSS Grid verwendet. Jede Reihe entspricht einem Elementor-
   Flex-Container, jede Spalte einem inneren Flex-Container mit Breiten-
   Angabe in Prozent. Dadurch laesst sich jede Section 1:1 mit nativen
   Elementor-Widgets nachbauen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design-Tokens
   ---------------------------------------------------------------------- */
:root {
  /* Markenfarben */
  --anthrazit:        #1A1A1A;
  --anthrazit-hell:   #262626;
  --anthrazit-linie:  #333130;
  --kupfer:           #B87333;
  --kupfer-hell:      #D19A5E;
  --creme:            #F5F1EA;
  --creme-dunkel:     #E8E1D6;
  --weiss:            #FFFFFF;

  /* Textfarben */
  --text-dunkel:      #1A1A1A;
  --text-gedimmt:     #5A554F;
  --text-auf-dunkel:  #F5F1EA;
  --text-auf-dunkel-gedimmt: rgba(245, 241, 234, 0.62);

  /* Schriften */
  --font-headline: "Oswald", "Arial Narrow", sans-serif;
  --font-text:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Abstaende */
  --section-y:      clamp(64px, 8vw, 112px);
  --container-max:  1180px;
  --container-pad:  24px;
}

/* -------------------------------------------------------------------------
   2. Reset / Basis
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Verhindert, dass Browser/Betriebssystem die helle Farbwelt automatisch
     invertieren ("dunkles Design erzwingen") und Kontraste zerstoeren. */
  color-scheme: light only;
}

body {
  margin: 0;
  background-color: var(--creme);
  color: var(--text-dunkel);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

/* Sichtbarer Fokus fuer Tastaturbedienung (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid var(--kupfer);
  outline-offset: 3px;
}

::selection {
  background-color: var(--kupfer);
  color: var(--creme);
}

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. Typografie
   ---------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.05rem; letter-spacing: 0.06em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-gedimmt);
}
.section--dunkel .lead { color: var(--text-auf-dunkel); }

/* Kleines Label ueber Ueberschriften, z. B. "— 01 / Leistungen" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-headline);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kupfer);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background-color: var(--kupfer);
  flex: 0 0 auto;
}
.eyebrow--hell { color: var(--kupfer-hell); }
.eyebrow--hell::before { background-color: var(--kupfer-hell); }
.eyebrow--zentriert { justify-content: center; }

/* -------------------------------------------------------------------------
   4. Layout — ausschliesslich Flexbox
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }
.section--dunkel { background-color: var(--anthrazit); color: var(--text-auf-dunkel); }
.section--creme-dunkel { background-color: var(--creme-dunkel); }
.section--foto {
  background-image: url('../img/hintergrund.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-kopf { max-width: 640px; margin-bottom: 52px; }
.section-kopf--zentriert { margin-inline: auto; text-align: center; }

/* Flex-Reihe: entspricht einem Elementor-Flex-Container */
.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.reihe--eng    { gap: 18px; }
.reihe--weit   { gap: 48px; }
.reihe--mitte  { align-items: center; }
.reihe--zentriert { justify-content: center; }

/* Spaltenbreiten (Flex-Basis)
   Die Basis liegt bewusst unter dem rechnerischen Anteil (z. B. 45 % statt
   50 %), damit die Spalten auch bei groesseren Abstaenden (.reihe--weit,
   gap 48px) sicher nebeneinander passen. Durch flex-grow: 1 fuellen sie die
   Reihe anschliessend vollstaendig aus. Mit exakt 50 % wuerden zwei Spalten
   plus Abstand ueber 100 % ergeben und umbrechen. */
.spalte      { flex: 1 1 0; min-width: 0; }
.spalte--1-2 { flex: 1 1 45%; min-width: 0; }
.spalte--1-3 { flex: 1 1 28%; min-width: 0; }
.spalte--1-4 { flex: 1 1 21%; min-width: 0; }
.spalte--auto{ flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--kupfer {
  background-color: var(--kupfer);
  color: var(--creme);
  border-color: var(--kupfer);
}
.btn--kupfer:hover { background-color: var(--kupfer-hell); border-color: var(--kupfer-hell); }

.btn--outline-hell {
  background-color: transparent;
  color: var(--creme);
  border-color: rgba(245, 241, 234, 0.35);
}
.btn--outline-hell:hover { border-color: var(--creme); background-color: rgba(245, 241, 234, 0.08); }

.btn--outline-dunkel {
  background-color: transparent;
  color: var(--anthrazit);
  border-color: rgba(26, 26, 26, 0.25);
}
.btn--outline-dunkel:hover { border-color: var(--anthrazit); background-color: rgba(26, 26, 26, 0.05); }

.btn-gruppe { display: flex; flex-wrap: wrap; gap: 14px; }

/* -------------------------------------------------------------------------
   6. Header + Navigation
   ---------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--anthrazit);
  border-bottom: 1px solid var(--anthrazit-linie);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}
.header__logo img { height: 42px; width: auto; }
.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.header__logo-name {
  font-family: var(--font-headline);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creme);
  white-space: nowrap;
}
.header__logo-sub {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kupfer-hell);
  white-space: nowrap;
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; }
.nav__link {
  position: relative;
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-auf-dunkel);
  text-decoration: none;
  padding-block: 6px;
  transition: color .22s ease;
  /* Als Flex-Kind darf ein Menuepunkt sonst innerhalb des eigenen Labels
     umbrechen ("Salon & Team" -> "Salon" / "Team" auf zwei Zeilen), was
     die Kopfzeile aufreisst. Verhindert das zuverlaessig. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background-color: var(--kupfer);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.nav__link:hover { color: var(--kupfer-hell); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--aktiv { color: var(--kupfer-hell); }
.nav__link--aktiv::after { transform: scaleX(1); }

.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 2px solid var(--kupfer);
  color: var(--creme);
  font-family: var(--font-headline);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
  flex: 0 0 auto;
}
.header__tel:hover { background-color: var(--kupfer); }
.header__tel svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Hamburger — nur mobil sichtbar */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--anthrazit-linie);
  cursor: pointer;
  flex: 0 0 auto;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  margin-inline: auto;
  background-color: var(--creme);
  transition: transform .3s ease, opacity .2s ease;
}

/* Mobiles Menue — dunkles Panel, hoher Kontrast, immer im Vordergrund */
.mobilmenu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobilmenu-overlay.ist-offen { opacity: 1; pointer-events: auto; }

.mobilmenu {
  position: fixed;
  top: 0; right: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 86%;
  height: 100%;
  padding: 26px 28px 32px;
  background-color: var(--anthrazit);
  border-left: 3px solid var(--kupfer);
  transform: translateX(100%);
  transition: transform .32s ease;
  overflow-y: auto;
}
.mobilmenu.ist-offen { transform: translateX(0); }

.mobilmenu__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--anthrazit-linie);
}
.mobilmenu__titel {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kupfer-hell);
}
.mobilmenu__schliessen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--anthrazit-linie);
  color: var(--creme);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.mobilmenu__schliessen:hover { border-color: var(--kupfer); color: var(--kupfer-hell); }

.mobilmenu__nav { display: flex; flex-direction: column; }
.mobilmenu__link {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid var(--anthrazit-linie);
  font-family: var(--font-headline);
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--creme);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.mobilmenu__link:hover,
.mobilmenu__link--aktiv { color: var(--kupfer-hell); padding-left: 8px; }

.mobilmenu__fuss { margin-top: auto; padding-top: 26px; }
.mobilmenu__fuss .btn { width: 100%; }
.mobilmenu__info {
  margin-top: 16px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-auf-dunkel-gedimmt);
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--anthrazit);
  color: var(--text-auf-dunkel);
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}
/* Dezenter Kupferschimmer im Hintergrund */
.hero::after {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,115,51,0.16) 0%, rgba(184,115,51,0) 68%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Textblock laeuft ueber die volle Breite, ist aber fuer die Lesbarkeit
   begrenzt. Foto und Merkmale stehen darunter in einer eigenen Reihe. */
.hero__text { max-width: 720px; }
.hero__titel { margin-bottom: 22px; }
.hero__titel .kupfer { color: var(--kupfer-hell); display: block; }
.hero__sub {
  max-width: 470px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.65;
  color: var(--text-auf-dunkel-gedimmt);
  margin-bottom: 30px;
}

/* Info-Leiste unter dem Hero-Text */
.hero__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--anthrazit-linie);
}
.hero__fakt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--text-auf-dunkel);
  text-decoration: none;
}
.hero__fakt svg { width: 17px; height: 17px; color: var(--kupfer-hell); flex: 0 0 auto; }
a.hero__fakt:hover { color: var(--kupfer-hell); }

/* Untere Hero-Reihe: Salonfoto links, die beiden Merkmale rechts daneben.
   Eigene Spaltenbreite (250px statt der globalen Prozentwerte), damit Foto
   und beide Kaesten auch auf mittleren Breiten in einer Zeile bleiben. */
.hero__unten { margin-top: 48px; }
.hero__unten .spalte--1-3 { flex: 1 1 250px; }

/* Bildkachel: bewusst begrenzte Breite, da die Vorlage klein ist */
.hero__bild { flex: 0 0 auto; display: flex; justify-content: flex-start; }

/* Bildrahmen schrumpft auf die native Bildbreite (width: fit-content).
   Damit werden die kleinen Vorlagen NIE hochskaliert und bleiben scharf.
   Sobald hochaufloesende Fotos vorliegen, kann hier auf eine feste Breite
   umgestellt werden — siehe README, Abschnitt "Bildaufloesung". */
.bildrahmen {
  position: relative;
  width: fit-content;
  padding: 12px;
  background-color: var(--anthrazit-hell);
  border: 1px solid var(--anthrazit-linie);
  max-width: 100%;
}
/* Kupfer-Eckwinkel: liegen direkt auf den Rahmenecken und fassen das Bild ein */
.bildrahmen::before {
  content: "";
  position: absolute;
  inset: -4px -4px auto auto;
  width: 56px; height: 56px;
  border-top: 3px solid var(--kupfer);
  border-right: 3px solid var(--kupfer);
  pointer-events: none;
}
.bildrahmen::after {
  content: "";
  position: absolute;
  inset: auto auto -4px -4px;
  width: 56px; height: 56px;
  border-bottom: 3px solid var(--kupfer);
  border-left: 3px solid var(--kupfer);
  pointer-events: none;
}
/* width:auto -> Bild rendert in nativer Groesse, max-width verkleinert es
   auf schmalen Bildschirmen. Hochskaliert wird dadurch nie. */
.bildrahmen img { width: auto; max-width: 100%; }
.bildrahmen--hell { background-color: var(--weiss); border-color: var(--creme-dunkel); }

/* -------------------------------------------------------------------------
   8. Vertrauens-Leiste (Icon-Boxen)
   ---------------------------------------------------------------------- */
.merkmal {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 24px;
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  border-left: 3px solid var(--kupfer);
  transition: transform .25s ease, box-shadow .25s ease;
}
.merkmal:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(26, 26, 26, 0.09);
}
.merkmal__icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  color: var(--kupfer);
}
.merkmal__icon svg { width: 100%; height: 100%; }
.merkmal__titel {
  font-family: var(--font-headline);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 5px;
}
.merkmal__text { font-size: 0.92rem; line-height: 1.55; color: var(--text-gedimmt); margin: 0; }

/* Dunkle Variante fuer den Einsatz auf anthrazitfarbenem Grund (Hero).
   Statt Weiss eine leicht aufgehellte Flaeche — das setzt die Karte vom
   Hintergrund ab, ohne einen harten Helligkeitssprung zu erzeugen. */
.merkmal--dunkel {
  background-color: rgba(245, 241, 234, 0.045);
  border-color: var(--anthrazit-linie);
  border-left-color: var(--kupfer);
}
.merkmal--dunkel .merkmal__titel { color: var(--creme); }
.merkmal--dunkel .merkmal__text  { color: var(--text-auf-dunkel-gedimmt); }
.merkmal--dunkel .merkmal__icon  { color: var(--kupfer-hell); }
.merkmal--dunkel:hover {
  background-color: rgba(245, 241, 234, 0.075);
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   9. Leistungs-Karten (Uebersicht Startseite)
   ---------------------------------------------------------------------- */
.leistungskarte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  text-decoration: none;
  color: var(--text-dunkel);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.leistungskarte:hover {
  transform: translateY(-5px);
  border-color: var(--kupfer);
  box-shadow: 0 16px 34px rgba(26, 26, 26, 0.1);
}
.leistungskarte__nr {
  font-family: var(--font-headline);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--kupfer);
  margin-bottom: 14px;
}
.leistungskarte__titel {
  font-family: var(--font-headline);
  font-size: 1.28rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.leistungskarte__text {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-gedimmt);
  margin: 0 0 20px;
}
.leistungskarte__preis {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--creme-dunkel);
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--kupfer);
}

/* -------------------------------------------------------------------------
   10. Preisliste (Leistungsseite) — Menuekarten-Optik
   ---------------------------------------------------------------------- */
.preisblock {
  padding: 34px 30px;
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  height: 100%;
}
.preisblock__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--anthrazit);
}
.preisblock__icon { width: 26px; height: 26px; color: var(--kupfer); flex: 0 0 auto; }
.preisblock__titel {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.preisliste { list-style: none; margin: 0; padding: 0; }
.preisliste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 13px;
  border-bottom: 1px dashed var(--creme-dunkel);
}
.preisliste li:last-child { border-bottom: none; }
.preisliste__name { flex: 0 1 auto; font-size: 0.98rem; }
/* Punktlinie zwischen Leistung und Preis — klassische Menuekarten-Optik */
.preisliste__fueller {
  flex: 1 1 auto;
  height: 1px;
  min-width: 14px;
  margin-bottom: 5px;
  border-bottom: 1px dotted rgba(26, 26, 26, 0.28);
}
.preisliste__preis {
  flex: 0 0 auto;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--kupfer);
  white-space: nowrap;
}

.hinweisbox {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 26px;
  background-color: var(--creme-dunkel);
  border-left: 3px solid var(--kupfer);
}
.hinweisbox svg { width: 22px; height: 22px; color: var(--kupfer); flex: 0 0 auto; margin-top: 2px; }
.hinweisbox p { font-size: 0.94rem; line-height: 1.6; color: var(--text-gedimmt); }

/* -------------------------------------------------------------------------
   11. Ergebnis-Galerie
   ---------------------------------------------------------------------- */
.galerie-wrapper { width: 100%; }
.galerie {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie__item {
  flex: 0 0 calc((100% - 2 * 22px) / 3);
  scroll-snap-align: start;
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  padding: 12px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.galerie__item:hover {
  transform: translateY(-6px);
  border-color: var(--kupfer);
  box-shadow: 0 16px 32px rgba(26, 26, 26, 0.12);
}
.galerie__bildbox { overflow: hidden; background-color: var(--creme-dunkel); }
.galerie__item img { width: 100%; transition: transform .45s ease; }
.galerie__item:hover img { transform: scale(1.06); }
.galerie__label {
  display: block;
  padding-top: 12px;
  font-family: var(--font-headline);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gedimmt);
  text-align: center;
}
.galerie--dunkel .galerie__item { background-color: var(--anthrazit-hell); border-color: var(--anthrazit-linie); }
.galerie--dunkel .galerie__label { color: var(--text-auf-dunkel-gedimmt); }

/* Pfeil-Navigation fuers Karussell */
.galerie__nav { display: flex; justify-content: center; gap: 14px; margin-top: 26px; }
.galerie__pfeil {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--creme-dunkel);
  color: var(--text-dunkel);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.galerie__pfeil svg { width: 20px; height: 20px; }
.galerie__pfeil:hover { border-color: var(--kupfer); color: var(--kupfer); }
.galerie__pfeil:disabled { opacity: .3; cursor: default; pointer-events: none; }
.galerie-wrapper--dunkel .galerie__pfeil { border-color: var(--anthrazit-linie); color: var(--text-auf-dunkel-gedimmt); }
.galerie-wrapper--dunkel .galerie__pfeil:hover { border-color: var(--kupfer-hell); color: var(--kupfer-hell); }

/* -------------------------------------------------------------------------
   12. Bewertungen
   ---------------------------------------------------------------------- */
.bewertung {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  background-color: var(--anthrazit-hell);
  border: 1px solid var(--anthrazit-linie);
  transition: transform .25s ease, border-color .25s ease;
}
.bewertung:hover { transform: translateY(-4px); border-color: var(--kupfer); }
.bewertung__sterne { display: flex; gap: 4px; margin-bottom: 16px; }
.bewertung__sterne svg { width: 18px; height: 18px; color: var(--kupfer-hell); }
.bewertung__text {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-auf-dunkel);
  margin: 0 0 22px;
}
.bewertung__autor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--anthrazit-linie);
}
.bewertung__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  background-color: var(--kupfer);
  color: var(--creme);
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 500;
}
.bewertung__name {
  font-family: var(--font-headline);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-auf-dunkel);
}

/* -------------------------------------------------------------------------
   13. Oeffnungszeiten
   ---------------------------------------------------------------------- */
.zeitenbox {
  padding: 34px 32px;
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  border-top: 3px solid var(--kupfer);
  color: var(--text-dunkel);
}
.zeitenbox--dunkel {
  background-color: var(--anthrazit-hell);
  border-color: var(--anthrazit-linie);
  border-top-color: var(--kupfer);
  color: var(--text-auf-dunkel);
}
.zeitenliste { list-style: none; margin: 0; padding: 0; }
.zeitenliste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--creme-dunkel);
  font-size: 0.99rem;
}
.zeitenbox--dunkel .zeitenliste li { border-bottom-color: var(--anthrazit-linie); }
.zeitenliste li:last-child { border-bottom: none; }
.zeitenliste__tag { font-weight: 500; }
.zeitenliste__zeit { color: var(--text-gedimmt); white-space: nowrap; }
.zeitenbox--dunkel .zeitenliste__zeit { color: var(--text-auf-dunkel-gedimmt); }
.zeitenliste li.ist-heute .zeitenliste__tag,
.zeitenliste li.ist-heute .zeitenliste__zeit { color: var(--kupfer); font-weight: 600; }
.zeitenbox--dunkel .zeitenliste li.ist-heute .zeitenliste__tag,
.zeitenbox--dunkel .zeitenliste li.ist-heute .zeitenliste__zeit { color: var(--kupfer-hell); }
.zeitenliste__geschlossen { color: #9B3B2F; }
.zeitenbox--dunkel .zeitenliste__geschlossen { color: #D98B7E; }

/* Status-Pille "Jetzt geoeffnet" / "Aktuell geschlossen" */
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  margin-bottom: 20px;
  border: 1px solid currentColor;
  font-family: var(--font-headline);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.status__punkt { width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; flex: 0 0 auto; }
.status--offen { color: #3F8F5B; }
.status--zu    { color: #A8503F; }
.section--dunkel .status--offen, .hero .status--offen { color: #7FC79A; }
.section--dunkel .status--zu,    .hero .status--zu    { color: #E09A8C; }

/* -------------------------------------------------------------------------
   14. Karte
   ---------------------------------------------------------------------- */
.kartenbox {
  position: relative;
  min-height: 340px;
  background-color: var(--creme-dunkel);
  border: 1px solid var(--creme-dunkel);
  overflow: hidden;
}
.kartenbox iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}
.kartenbox--hoch iframe, .kartenbox--hoch { min-height: 440px; }

.kartenbox__link { display: block; width: 100%; height: 100%; }
.kartenbox img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  transition: transform .4s ease;
}
.kartenbox--hoch img { min-height: 440px; }
.kartenbox__link:hover img { transform: scale(1.03); }

/* -------------------------------------------------------------------------
   15. Kontaktdaten-Liste
   ---------------------------------------------------------------------- */
.kontaktliste { list-style: none; margin: 0 0 28px; padding: 0; }
.kontaktliste li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--creme-dunkel);
}
.kontaktliste li:last-child { border-bottom: none; }
.kontaktliste__icon { width: 22px; height: 22px; color: var(--kupfer); flex: 0 0 auto; margin-top: 4px; }
.kontaktliste li > span:not(.kontaktliste__icon) { min-width: 0; }
.kontaktliste__label {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-gedimmt);
  margin-bottom: 2px;
}
.kontaktliste__wert { font-size: 1.05rem; text-decoration: none; color: var(--text-dunkel); overflow-wrap: anywhere; }
a.kontaktliste__wert:hover { color: var(--kupfer); }

.section--dunkel .kontaktliste li { border-bottom-color: var(--anthrazit-linie); }
.section--dunkel .kontaktliste__label { color: var(--text-auf-dunkel-gedimmt); }
.section--dunkel .kontaktliste__wert { color: var(--text-auf-dunkel); }
.section--dunkel a.kontaktliste__wert:hover { color: var(--kupfer-hell); }

/* Kompakte Hinweiszeilen (z. B. Bahn/Auto unter einer Karte) */
.anfahrt-hinweise { list-style: none; margin: 14px 0 0; padding: 0; }
.anfahrt-hinweise li { display: flex; align-items: flex-start; gap: 10px; padding-block: 8px; }
.anfahrt-hinweise li + li { border-top: 1px solid var(--anthrazit-linie); }
.anfahrt-hinweise svg { width: 17px; height: 17px; color: var(--kupfer-hell); flex: 0 0 auto; margin-top: 2px; }
.anfahrt-hinweise span { font-size: 0.88rem; line-height: 1.5; color: var(--text-auf-dunkel-gedimmt); }
.anfahrt-hinweise strong { color: var(--text-auf-dunkel); font-weight: 600; }

/* -------------------------------------------------------------------------
   16. FAQ-Akkordeon
   ---------------------------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq__item {
  background-color: var(--weiss);
  border: 1px solid var(--creme-dunkel);
  margin-bottom: 12px;
}
.faq__item[open] { border-color: var(--kupfer); }
.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dunkel);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover { color: var(--kupfer); }
.faq__zeichen {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  position: relative;
  color: var(--kupfer);
}
.faq__zeichen::before, .faq__zeichen::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .28s ease, opacity .28s ease;
}
.faq__zeichen::before { width: 15px; height: 2px; }
.faq__zeichen::after  { width: 2px; height: 15px; }
.faq__item[open] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__antwort { padding: 0 24px 22px; font-size: 0.97rem; line-height: 1.68; color: var(--text-gedimmt); }
.faq__antwort p { margin-bottom: 0.8em; }

/* -------------------------------------------------------------------------
   17. Seitenkopf (Unterseiten)
   ---------------------------------------------------------------------- */
.seitenkopf {
  background-color: var(--anthrazit);
  color: var(--text-auf-dunkel);
  padding-block: clamp(48px, 6vw, 78px);
  border-bottom: 3px solid var(--kupfer);
}
.seitenkopf__text { max-width: 680px; }
.seitenkopf p { color: var(--text-auf-dunkel-gedimmt); margin-top: 16px; }
.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.84rem;
  color: var(--text-auf-dunkel-gedimmt);
}
.brotkrumen a { color: var(--text-auf-dunkel-gedimmt); text-decoration: none; }
.brotkrumen a:hover { color: var(--kupfer-hell); }
.brotkrumen span { color: var(--kupfer-hell); }

/* -------------------------------------------------------------------------
   18. Kontakt-Band (CTA)
   ---------------------------------------------------------------------- */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 44px 44px;
  background-color: var(--anthrazit);
  color: var(--text-auf-dunkel);
  border-left: 4px solid var(--kupfer);
}
.band__text { flex: 1 1 340px; }
.band__titel { margin-bottom: 8px; }
.band__sub { color: var(--text-auf-dunkel-gedimmt); font-size: 1rem; margin: 0; }

/* -------------------------------------------------------------------------
   19. Fliesstext (Rechtsseiten)
   ---------------------------------------------------------------------- */
.rechtstext { max-width: 780px; }
.rechtstext h2 {
  font-size: 1.35rem;
  margin-top: 42px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--creme-dunkel);
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p, .rechtstext li { font-size: 0.99rem; line-height: 1.72; color: var(--text-gedimmt); }
.rechtstext ul { padding-left: 20px; }
.section--dunkel .rechtstext h2 { border-bottom-color: var(--anthrazit-linie); }
.section--dunkel .rechtstext p, .section--dunkel .rechtstext li { color: var(--text-auf-dunkel-gedimmt); }
.section--dunkel .rechtstext .platzhalter-hinweis p { color: var(--text-dunkel); }
.platzhalter-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  margin-bottom: 38px;
  background-color: #FBF3E4;
  border-left: 3px solid var(--kupfer);
}
.platzhalter-hinweis svg { width: 22px; height: 22px; color: var(--kupfer); flex: 0 0 auto; margin-top: 2px; }
.platzhalter-hinweis p { font-size: 0.93rem; color: var(--text-dunkel); margin: 0; }

/* -------------------------------------------------------------------------
   20. Footer
   ---------------------------------------------------------------------- */
.footer { background-color: var(--anthrazit); color: var(--text-auf-dunkel-gedimmt); }
.footer__oben { padding-block: 62px 46px; }
.footer__spalte { flex: 1 1 240px; }
.footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; text-decoration: none; }
.footer__logo img { height: 40px; width: auto; }
.footer__beschreibung { font-size: 0.93rem; line-height: 1.68; max-width: 260px; margin: 0; }
.footer__titel {
  font-family: var(--font-headline);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kupfer-hell);
  margin: 0 0 18px;
}
.footer__liste { list-style: none; margin: 0; padding: 0; }
.footer__liste li { margin-bottom: 11px; }
.footer__liste a { font-size: 0.94rem; text-decoration: none; transition: color .2s ease; }
.footer__liste a:hover { color: var(--kupfer-hell); }
.footer__zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  margin-bottom: 10px;
}
.footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--anthrazit-linie);
  font-size: 0.86rem;
}
.footer__rechtlinks { display: flex; gap: 22px; }
.footer__rechtlinks a { text-decoration: none; }
.footer__rechtlinks a:hover { color: var(--kupfer-hell); }

/* Mobile Telefon-Leiste, fest am unteren Rand */
.telbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 14px;
  background-color: var(--anthrazit);
  border-top: 1px solid var(--anthrazit-linie);
}
.telbar .btn { width: 100%; }

/* -------------------------------------------------------------------------
   21. Einblend-Animation beim Scrollen
   ---------------------------------------------------------------------- */
.einblenden {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.einblenden.sichtbar { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   22. Responsive
   ---------------------------------------------------------------------- */
/* Umschaltpunkt fuer den Header: Nav bleibt sichtbar, solange genug Platz
   da ist (Laptop/Desktop). Erst wenn es eng wird (Handy), springt der
   Burger ein. Mit 5 Menuepunkten (white-space:nowrap) braucht die
   Kopfzeile bei natuerlicher Breite ca. 1026px (Logo 224 + Nav 565 +
   Telefon-Button 141 + 2x Abstand 24 + 2x Container-Padding 24). 1180px
   laesst reichlich Luft, bevor auf das Burger-Menue umgeschaltet wird.

   WICHTIG bei weiteren Menuepunkten: Diesen Wert per preview_eval neu
   vermessen (nicht schaetzen!) — z. B. so:
     document.querySelector('.nav').getBoundingClientRect().width
   bei einer sehr breiten Fensterbreite (>1600px), dann:
     Logo + Nav-Breite + Telefon + 2x Abstand(24) + 2x Container-Padding(24)
   und darauf nochmal ca. 120px Sicherheitsmarge aufschlagen.

   .header__inner und .nav behalten flex-wrap: wrap als Sicherheitsnetz,
   falls doch mal mehr Menuepunkte dazukommen, als in eine Zeile passen. */
@media (max-width: 1180px) {
  .nav, .header__tel { display: none; }
  .burger { display: flex; }
}

@media (max-width: 1024px) {
  .spalte--1-4 { flex: 1 1 45%; }
  .spalte--1-3 { flex: 1 1 45%; }
}

@media (max-width: 860px) {
  .reihe--weit { gap: 34px; }
  .hero__bild { flex: 1 1 100%; justify-content: flex-start; }
  .band { padding: 34px 28px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .spalte--1-2, .spalte--1-3, .spalte--1-4 { flex: 1 1 100%; }
  /* Muss die erhoehte Spezifitaet von .hero__unten .spalte--1-3 ueberschreiben */
  .hero__unten .spalte--1-3 { flex: 1 1 100%; }
  .header__logo-sub { display: none; }
  .header__inner { min-height: 68px; }
  .header__logo img { height: 36px; }

  /* Platz fuer die feste Telefon-Leiste schaffen */
  .telbar { display: block; }
  body { padding-bottom: 74px; }
  .footer__unten { flex-direction: column; align-items: flex-start; }

  .preisblock { padding: 26px 22px; }
  .zeitenbox { padding: 26px 22px; }
  .galerie__item { flex: 1 0 100%; }
  .band { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-gruppe { width: 100%; }
}

@media (max-width: 400px) {
  .header__logo-name { font-size: 0.98rem; }
}