/* ==========================================================================
   Haarfein — Stylesheet

   Reihenfolge: Tokens · Grundlagen · Bausteine · Bereiche · Tablet · Phone ·
   Motion. Kein Hexwert außerhalb des Tokenblocks.

   Die Palette ist aus der Vorlage gemessen, nicht geschätzt: sie arbeitet mit
   genau drei Farben — einem tiefen warmen Braun, einem Cremeton und einem
   Rot. Mehr braucht sie nicht, und mehr kommt hier auch nicht dazu.

   Der Auftritt lebt von zwei Dingen: sehr großen Versalüberschriften, die
   fast die ganze Breite nehmen, und großzügigen Bildern. Dazwischen ist viel
   Ruhe — die Fläche ist Teil der Gestaltung und kein übrig gebliebener Rand.
   ========================================================================== */

:root {
  /* --- Farben, aus der Vorlage gemessen --------------------------------- */
  --tief: #48120e;          /* tiefes warmes Braun: Schrift und dunkle Bänder */
  --tief-weich: #5e211c;    /* erhobene Fläche auf Dunkel */
  --creme: #f6efe5;         /* der Grund */
  --creme-tief: #efe5d8;    /* abgesetzter Streifen */
  --erhoben: #ffffff;       /* Karten — und nur die */
  --rot: #b82020;           /* die einzige Signalfarbe */
  --rot-tief: #9a1a1a;

  /* --- Schrift ---------------------------------------------------------- */
  --text: #48120e;
  /* 0.78 und nicht 0.66. Die Vorlage arbeitet hier mit 0.6 — nachgerechnet
     sind das 3,8:1 auf dem abgesetzten Streifen und damit unter AA. Das ist
     eine Schwäche der Vorlage, keine Gestaltungsentscheidung, und wird nicht
     mitübernommen. Mit 0.78 sind es 5,4:1. */
  --text-leise: rgba(69, 48, 48, 0.78);
  --text-hell: #f6efe5;
  --text-hell-leise: rgba(246, 239, 229, 0.68);

  /* --- Linien ----------------------------------------------------------- */
  --linie: rgba(72, 18, 14, 0.14);
  --linie-stark: rgba(72, 18, 14, 0.3);
  --linie-hell: rgba(246, 239, 229, 0.2);

  /* --- Maße ------------------------------------------------------------- */
  --schale: 1280px;
  --rand: 24px;
  --radius: 16px;
  --radius-klein: 10px;

  /* --- Rhythmus --------------------------------------------------------- */
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 40px;
  --raum-5: 64px;
  --raum-6: 96px;
  /* Höhe der schwebenden Kopfleiste — der Hero zieht sich um genau diesen
     Betrag nach oben, damit das Bild bis an die Fensterkante läuft. */
  --kopf-hoehe: 76px;
  /* Knöpfe sind in der Vorlage leicht gerundete Rechtecke, keine Pillen —
     bis zum 27.08.2026 stand hier 999px. Der Betreiber hat es am „Termin
     buchen" gesehen. Die Karussellpunkte und die Schrittchips bleiben rund:
     das sind keine Knöpfe. */
  --rundung: 6px;
  --bereich: clamp(76px, 9vw, 130px);

  /* --- Schriftgrößen ---------------------------------------------------- */
  /* `--riesig` ist der Charakter der Seite. Unter 3rem wirkt sie beliebig. */
  --riesig: clamp(3.2rem, 11vw, 9.5rem);
  --t2: clamp(1.8rem, 3.2vw, 2.6rem);
  --t3: 1.22rem;
  --fliess: 1.0625rem;
  --klein: 0.9375rem;
  --winzig: 0.8125rem;

  /* --- Bewegung --------------------------------------------------------- */
  --weich: cubic-bezier(0.22, 0.61, 0.36, 1);
  --zeit: 0.55s;
}

/* ------------------------------------------------------------- Grundlagen */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fliess);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); letter-spacing: -0.015em; line-height: 1.3; }

/* Die Versalüberschriften. `text-wrap` bleibt hier aus — bei einem einzelnen
   Wort bringt es nichts und kostet nur Rechenzeit. */
.riesig {
  font-size: var(--riesig);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.riesig--hell { color: var(--text-hell); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.sprite { position: absolute; }

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

.sprung {
  position: absolute; left: var(--rand); top: -60px; z-index: 100;
  background: var(--rot); color: var(--text-hell);
  padding: 10px 18px; border-radius: var(--radius-klein);
  transition: top 0.2s var(--weich);
}
.sprung:focus-visible { top: 12px; }

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

.schale {
  width: 100%;
  max-width: var(--schale);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sym { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------- Bausteine */

/* Die eckigen Klammern sind ein Zitat der Vorlage — sie markiert damit jede
   Bereichsüberschrift. Sie stehen im Text und nicht als ::before, damit sie
   sich beim Übersetzen mitändern lassen. */
.bereich-marke {
  font-size: var(--winzig);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--raum-3);
}
.bereich-marke--hell { color: var(--text-hell-leise); }

/* Überschrift links, Erklärung rechts — das Muster der Vorlage. */
.bereich-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--raum-4);
  align-items: end;
  margin-bottom: var(--raum-5);
}
.bereich-kopf > div { display: grid; gap: var(--raum-3); justify-items: start; min-width: 0; }

/* Eigene Groesse fuer die Ueberschrift **in** der zweispaltigen Kopfzeile.
   `--riesig` ist auf die volle Breite gerechnet; in einer 58-Prozent-Spalte
   laeuft ein langes Wort wie „Leistungen" darueber hinaus und schiebt sich
   ueber den Text daneben. Das war im ersten Durchgang genau so passiert. */
.bereich-kopf .riesig {
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  min-width: 0;
}

.bereich-lead { color: var(--text-leise); max-width: 46ch; }
.bereich-lead--hell { color: var(--text-hell-leise); }

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--klein);
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--rundung);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--weich), color 0.2s var(--weich),
              border-color 0.2s var(--weich), transform 0.2s var(--weich);
}
/* Der Pfeil rückt beim Überfahren nach, statt sich zu vergrößern — dieselbe
   Geste wie in der Vorlage. */
.knopf__pfeil { transition: transform 0.2s var(--weich); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }

.knopf--gross { padding: 16px 30px; font-size: 1rem; }
.knopf--breit { width: 100%; padding: 16px 30px; font-size: 1rem; }

.knopf--voll { background: var(--rot); color: #fff; }
.knopf--voll:hover { background: var(--rot-tief); transform: translateY(-1px); }

.knopf--hell { background: var(--creme); color: var(--tief); }
.knopf--hell:hover { background: #fff; transform: translateY(-1px); }

.knopf--rand { border-color: var(--linie-hell); color: var(--text-hell); }
.knopf--rand:hover { background: rgba(246, 239, 229, 0.12); border-color: rgba(246, 239, 229, 0.45); }

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

/* Die Leiste schwebt über dem Hero, sie steht nicht davor. In der Vorlage
   läuft das Bild randlos bis an die Fensterkante — hier lag bis zum
   27.08.2026 ein cremefarbener Balken darüber, der den Hero nach unten
   drückte. Aufgefallen ist das dem Betreiber, nicht der Abnahme; seither
   prüft `abnahme-pruefer` genau diese Stelle.

   `sticky` und nicht `fixed`: Die Abnahme setzt sticky-Elemente für die
   Ganzseitenaufnahme auf `relative` und vermeidet damit die Leiste, die sonst
   mitten im Bild klebt. `fixed` liesse sie ausdrücklich stehen. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--text-hell);
  transition: background 0.25s var(--weich), border-color 0.25s var(--weich);
}
/* Erst wenn der Hero durchgescrollt ist, bekommt die Leiste eine Fläche —
   über dem hellen Grund darunter wäre helle Schrift sonst unlesbar. */
.kopf--fest {
  background: rgba(72, 18, 14, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linie-hell);
}
/* Der Hero liegt unter der Leiste, nicht darunter im Fluss. */
.kopf + main .hero { margin-top: calc(-1 * var(--kopf-hoehe)); }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: var(--kopf-hoehe);
}

/* Logo und Navigation stehen auf der schwebenden Leiste über dem dunklen
   Hero — sie erben deren helle Farbe, statt sie selbst zu setzen. */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.logo__mark { width: 28px; height: 28px; color: currentColor; flex: none; }
.logo__wort {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.34rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.logo__r { font-size: 0.7rem; align-self: flex-start; margin-top: 4px; color: var(--rot); }

.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block;
  text-decoration: none;
  font-size: var(--klein);
  color: var(--text-hell-leise);
  padding: 9px 14px;
  border-radius: var(--rundung);
  transition: color 0.2s var(--weich), background 0.2s var(--weich);
}
.nav a:hover { color: var(--text-hell); background: rgba(246, 239, 229, 0.1); }
.nav a[aria-current='true'] { color: var(--text-hell); font-weight: 600; background: rgba(246, 239, 229, 0.14); }

.kopf__aktion { display: flex; align-items: center; gap: var(--raum-2); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--rundung);
  background: none;
  position: relative;
  cursor: pointer;
  color: inherit;
}
.burger__balken,
.burger__balken::before,
.burger__balken::after {
  position: absolute;
  left: 50%; width: 17px; height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.3s var(--weich), opacity 0.2s var(--weich);
}
.burger__balken { top: 50%; margin-top: -1px; }
.burger__balken::before { content: ''; top: -6px; left: 0; transform: none; }
.burger__balken::after { content: ''; top: 6px; left: 0; transform: none; }
.burger[aria-expanded='true'] .burger__balken { background: transparent; }
.burger[aria-expanded='true'] .burger__balken::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__balken::after { transform: translateY(-6px) rotate(-45deg); }

.mobilnav { overflow: hidden; background: var(--creme); border-top: 1px solid var(--linie); }
.mobilnav ul { padding: var(--raum-2) var(--rand) var(--raum-3); }
.mobilnav a {
  display: block; padding: 13px 0; text-decoration: none;
  font-weight: 500; border-bottom: 1px solid var(--linie);
}
.mobilnav li:last-child a { border-bottom: 0; }

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  /* Nicht nur `vh`: die Bildpipeline nimmt Kacheln in einem 750 bzw. 800 px
     hohen Fenster auf, und ein reines `88vh` liesse den Hero dabei
     zusammenschrumpfen — die Kachel zeigte dann einen Streifen des nächsten
     Bereichs. Die Untergrenze haelt ihn unabhaengig von der Fensterhoehe. */
  min-height: max(820px, min(88vh, 900px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--tief);
  color: var(--text-hell);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--raum-6);
  /* Genug Luft, damit die Karte darunter vollstaendig ins Bild passt: der Hero
     kappt mit `overflow: hidden`, ein Ueberstand waere abgeschnitten. */
  padding-bottom: clamp(170px, 15vw, 220px);
}

/* Die Bühne hält alle Bilder übereinander. Gewechselt wird über `opacity`,
   nicht über `display` — sonst gäbe es keinen Übergang, sondern den harten
   Schnitt der Vorlage. */
.hero__buehne { position: absolute; inset: 0; z-index: -2; }
.hero__buehne img {
  /* `inset: 0` wuerde eine Breite unter 100 % wieder aufziehen — deshalb nur
     oben und rechts verankert. Ein Bild mit `breite` in `inhalte.js` steht
     damit rechts, links bleibt der Herogrund; ohne das Feld deckt es wie
     bisher die ganze Flaeche. */
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Der Ausschnitt steht als Eigenschaft und nicht als Inline-Regel: Nur so
     kann die Telefonabfrage weiter unten ihn ueberschreiben. Ein
     Inline-`object-position` schluege jede Regel ohne `!important` — und
     `!important` waere hier die Ausrede fuer genau diesen Fehler. */
  object-position: var(--ausschnitt, 50% 50%);
  /* Leicht heruntergenommen, damit der Schleier nicht die ganze Arbeit
     machen muss und das Motiv seine Zeichnung behaelt. */
  filter: brightness(0.78) saturate(0.92);
  opacity: 0;
  /* --spiegel setzt `main.js` je Bild aus `inhalte.js`. Es steckt in der
     Zoombewegung statt in einem eigenen transform, weil zwei transform-Regeln
     auf demselben Element einander ersetzen und die Spiegelung sonst beim
     ersten Bildwechsel verschwindet. */
  --spiegel: 1;
  /* Die leichte Vergrößerung läuft über die ganze Standzeit und macht aus dem
     Wechsel eine Bewegung statt eines Sprungs. */
  transform: scale(calc(1.06 * var(--spiegel)), 1.06);
  transition: opacity var(--hero-blende, 0.9s) ease-in-out,
              transform calc(var(--hero-standzeit, 5s) + var(--hero-blende, 0.9s)) linear;
}
.hero__buehne img[data-aktiv] { opacity: 1; transform: scale(var(--spiegel), 1); }

/* Ein Bild, das nur einen Teil der Breite einnimmt, braucht eine weiche
   linke Kante — sonst steht mitten im Hero eine senkrechte Naht zwischen
   Foto und Grund. Die Maske laeuft ueber die ersten 16 % des Bildes und
   loest sie auf; weil der Herogrund und der Bildgrund beide dunkelbraun
   sind, sieht man danach keinen Uebergang mehr.

   `main.js` setzt die Klasse, sobald in `inhalte.js` ein `breite` steht. */
.hero__buehne img.hero__bild--schmal {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
  mask-image: linear-gradient(to right, transparent 0%, #000 16%);
}

/* Auf dem Telefon wieder ueber die volle Breite: eine halbe Breite liesse
   dort nur eine schmale Saeule uebrig.

   **Hier stand, das Motiv passe hochkant ohne Zuschnitt hinein. Das war
   falsch, und zwar nachgemessen** (10.09.2026, Betreiber: „fixe den
   Smartphone-Hero von Haarfein, da war irgendwie nicht optimiert").

   Gemessen bei 390 x 844: Der Hero ist 776px hoch, das Bild 2336 x 3500.
   `cover` skaliert auf die Hoehe, das Motiv steht also **vollstaendig** im
   Rahmen — und damit sitzt das Gesicht dort, wo es im Bild sitzt: die Augen
   bei 22 %, Nase und Mund bei 32 %, das Kinn bei 40 %. Der Text beginnt bei
   30 % (Wortmarke), laeuft bis 55 % (Knoepfe). **Text und Gesicht teilen
   sich denselben Streifen**, und weil der Schleier dort seine hellste
   Stelle hat, stand „HAARFEIN" auf einer Wange.

   Nichts davon laesst sich ueber den Ausschnitt beheben: Es gibt keinen
   vertikalen Ueberhang, den man verschieben koennte. Deshalb greift die
   Regel eine Ebene tiefer, am Schleier — siehe dort. */
@media (max-width: 640px) {
  .hero__buehne img.hero__bild--schmal {
    width: 100% !important;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* **Jedes Bild darf auf dem Telefon einen eigenen Ausschnitt haben.**

     Ein Querformat in einem hochkanten Rahmen zeigt nur rund ein Drittel
     seiner Breite, und ohne Angabe nimmt der Browser die Mitte. Bei beiden
     Salonaufnahmen ist die Mitte die leere Wand neben der Person — auf dem
     Telefon stand dort ein brauner Streifen ohne Motiv.

     Der Wert steht je Bild in `inhalte.js` als `ausschnittSchmal`, dort
     auch die Rechnung dahinter. Ohne Angabe bleibt es beim Ausschnitt fürs
     breite Fenster; deshalb der Rückfall auf die eigene Eigenschaft und
     nicht auf einen festen Wert. */
  .hero__buehne img {
    object-position: var(--ausschnitt-schmal, var(--ausschnitt, 50% 50%));
  }
}

/* Der Schleier **dunkelt ab**, er faerbt nicht ein. Der erste Versuch legte
   das Markenbraun flaechig darueber — das Ergebnis sah aus wie ein
   Sepiafilter und nahm dem Foto jede Tiefe. Deshalb ein sehr dunkles,
   fast schwarzes Braun, und nur dort dicht, wo Schrift liegt: unten links.
   Rechts bleibt das Motiv weitgehend offen. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(26, 7, 5, 0.9) 0%,
      rgba(26, 7, 5, 0.66) 40%,
      rgba(26, 7, 5, 0.24) 74%,
      rgba(26, 7, 5, 0.14) 100%),
    linear-gradient(to bottom,
      rgba(26, 7, 5, 0.5) 0%,
      rgba(26, 7, 5, 0.06) 30%,
      rgba(26, 7, 5, 0.5) 76%,
      rgba(26, 7, 5, 0.8) 100%);
}

/* **Auf dem Telefon steht der Schleier senkrecht, nicht diagonal.**

   Der diagonale Verlauf oben ist fuer die zweispaltige Anordnung gebaut:
   links Text auf dichtem Grund, rechts das Motiv offen. Auf dem Telefon
   gibt es diese beiden Spalten nicht — der Text laeuft ueber die volle
   Breite, und ein Verlauf, der nach rechts aufklart, laesst genau die
   Zeilenenden auf der hellsten Stelle stehen.

   Die zweite Lage klarte zudem bei 30 % auf 0,06 auf — dort beginnt die
   Wortmarke. Sie stand damit auf der hellsten Stelle des ganzen Heros.

   Die Zahlen kommen aus der Messung darueber: Der Kopf sitzt zwischen 8 und
   26 %, der Text beginnt bei 30 % und laeuft bis 55 %, die Karte liegt ab
   78 %. Der Verlauf haelt deshalb oben zurueck — das Motiv soll zu sehen
   sein — und wird ab 28 % dicht, wo der Text anfaengt.

   0,86 und nicht 1: Die Vorlage laesst unter ihrem Text das Motiv noch
   erahnen, sie loescht es nicht. Ein voll deckender Grund waere eine
   schwarze Flaeche mit Text darauf, und dafuer braeuchte es kein Bild. */
@media (max-width: 640px) {
  .hero__schleier {
    background: linear-gradient(
      to bottom,
      rgba(26, 7, 5, 0.52) 0%,
      rgba(26, 7, 5, 0.2) 12%,
      rgba(26, 7, 5, 0.28) 22%,
      rgba(26, 7, 5, 0.74) 34%,
      rgba(26, 7, 5, 0.86) 52%,
      rgba(26, 7, 5, 0.88) 100%
    );
  }
}

/* Die Vorlage fasst Nummer und Branche in einen umrandeten Kasten, die Nummer
   noch einmal in ein eigenes helles Feld darin. Bis zum 27.08.2026 stand hier
   nur eine rote Zahl neben Text — die Ausrichtung stimmte, die Form nicht. */
.hero__zeile {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Der Kasten ist so breit wie sein Inhalt — als Flex-Item im Hero wuerde
     `inline-flex` blockifiziert und die Box liefe ueber die ganze Spalte. */
  width: fit-content;
  align-self: flex-start;
  border: 1px solid var(--linie-hell);
  border-radius: var(--rundung);
  overflow: hidden;
}
.hero__nummer {
  background: var(--creme);
  color: var(--tief);
  font-weight: 600;
  font-size: var(--winzig);
  letter-spacing: 0.06em;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
}
.hero__art {
  font-size: var(--winzig);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-hell-leise);
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
}

.hero__wortmarke {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--riesig);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-top: var(--raum-3);
}

.hero__lead {
  margin-top: var(--raum-3);
  max-width: 44ch;
  color: rgba(246, 239, 229, 0.86);
  font-size: 1.1rem;
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-4); }

/* Liegt auf dem Bild, mit Abstand zur unteren Kante — wie in der Vorlage. Ein
   Ueberstand in den naechsten Bereich hinein geht nicht: der Hero kappt. */
.hero__karte {
  position: absolute;
  left: max(var(--rand), calc(50vw - var(--schale) / 2 + var(--rand)));
  bottom: var(--raum-4);
  z-index: 3;
  background: var(--erhoben);
  color: var(--tief);
  border-radius: var(--radius);
  padding: var(--raum-3);
  display: grid;
  gap: 4px;
  min-width: 260px;
  box-shadow: 0 22px 50px rgba(40, 10, 8, 0.3);
}
.hero__karte-zusatz {
  font-size: var(--winzig);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
}
.hero__karte-name {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.hero__karte-preis { color: var(--text-leise); font-size: var(--klein); }

.hero__punkte {
  position: absolute;
  right: max(var(--rand), calc(50vw - var(--schale) / 2 + var(--rand)));
  bottom: var(--raum-4);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero__punkt {
  width: 34px; height: 4px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(246, 239, 229, 0.32);
  cursor: pointer;
  transition: background 0.3s var(--weich), width 0.3s var(--weich);
}
.hero__punkt[aria-selected='true'] { background: var(--creme); width: 52px; }

/* --------------------------------------------------- Aussage und Reihe */

.handschrift { padding-top: var(--raum-6); }
.handschrift .schale { text-align: center; }

.zusagen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px var(--raum-3);
  font-size: var(--winzig);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.zusagen li { display: flex; align-items: center; gap: var(--raum-3); }
/* Trennpunkt zwischen den Zusagen, nicht hinter der letzten. */
.zusagen li:not(:last-child)::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rot);
}

.aussage {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin: var(--raum-4) auto 0;
  text-wrap: balance;
}
.handschrift__knopf { margin-top: var(--raum-4); }

.reihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: var(--raum-6);
}
.reihe li { position: relative; overflow: hidden; }
.reihe img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.7s var(--weich);
}
.reihe li:hover img { transform: scale(1.05); }
.reihe span {
  position: absolute;
  left: var(--raum-3); bottom: var(--raum-3);
  color: var(--text-hell);
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(40, 10, 8, 0.75);
}
/* Verlauf, damit die Beschriftung auch auf hellen Motiven trägt. */
.reihe li::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(40, 10, 8, 0.68), transparent);
  pointer-events: none;
}

/* -------------------------------------------------------------- Anliegen */

/* Etwas mehr Luft als der Grundwert — der Bereich muss eine 3/2-Kachel der
   Bildpipeline vollstaendig fassen. */
.anliegen { padding-block: clamp(80px, 10.5vw, 140px); }

.anliegen__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
}
.anliegen__liste li {
  background: var(--erhoben);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
  display: grid;
  gap: var(--raum-3);
}
.anliegen__nummer {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--rot);
}
.anliegen__liste h3 { margin-bottom: 6px; }
.anliegen__liste p { color: var(--text-leise); font-size: var(--klein); }
.anliegen__loesung {
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-3);
}
.anliegen__loesung h3 { color: var(--rot); }

/* ------------------------------------------------------------- Leistungen */

.leistungen {
  padding-block: var(--bereich);
  background: var(--creme-tief);
}

.leistungen__liste { display: grid; gap: var(--raum-2); }

.leistung {
  background: var(--erhoben);
  border-radius: var(--radius);
  overflow: hidden;
}
.leistung__kopf {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--raum-3);
  background: none;
  border: 0;
  padding: var(--raum-3);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.leistung__nummer {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  color: var(--text-leise);
}
.leistung__name {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.leistung__schritte { display: flex; gap: 8px; flex-wrap: wrap; }
.leistung__schritt {
  font-size: var(--winzig);
  color: var(--text-leise);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 4px 12px;
}
.leistung__zeichen {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--creme);
  flex: none;
  transition: background 0.25s var(--weich);
}
.leistung__zeichen::before,
.leistung__zeichen::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.6px;
  background: var(--tief);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--weich), background 0.25s var(--weich);
}
.leistung__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.leistung[data-offen] .leistung__zeichen { background: var(--rot); }
.leistung[data-offen] .leistung__zeichen::before,
.leistung[data-offen] .leistung__zeichen::after { background: #fff; }
.leistung[data-offen] .leistung__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }

.leistung__rumpf { height: 0; overflow: hidden; transition: height 0.35s var(--weich); }
.leistung__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--raum-4);
  padding: 0 var(--raum-3) var(--raum-3);
  align-items: center;
}
.leistung__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-klein);
}
.leistung__art {
  font-size: var(--winzig);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--raum-2);
}
.leistung__text { color: var(--text-leise); margin-bottom: var(--raum-3); }
.leistung__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-5);
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-3);
  margin-bottom: var(--raum-3);
}
.leistung__fakten dt {
  font-size: var(--winzig);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.leistung__fakten dd {
  margin: 2px 0 0;
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
}

/* ----------------------------------------------------------------- Salon */

.salon { padding-block: var(--bereich); }

.salon__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    'bild punkte produkte'
    'bild zahlen produkte';
  gap: var(--raum-3);
  margin-top: var(--raum-5);
  align-items: stretch;
}
.salon__bild { grid-area: bild; border-radius: var(--radius); overflow: hidden; }
.salon__bild img { width: 100%; height: 100%; object-fit: cover; }

.salon__punkte {
  grid-area: punkte;
  background: var(--tief);
  color: var(--text-hell);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-3);
  display: grid;
  gap: var(--raum-3);
  align-content: center;
}
.salon__punkte li { display: grid; grid-template-columns: 22px 1fr; gap: var(--raum-2); font-size: var(--klein); }
.salon__punkte .sym { color: var(--rot); width: 18px; height: 18px; margin-top: 3px; }

.salon__zahlen { grid-area: zahlen; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--raum-3); }
.salon__zahlen li {
  background: var(--erhoben);
  border-radius: var(--radius);
  padding: var(--raum-3);
}
.salon__zahl {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.salon__einheit {
  font-size: var(--winzig);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
  display: block;
  margin: 6px 0 8px;
}
.salon__zahlen p:last-child { font-size: var(--klein); color: var(--text-leise); }

.salon__produkte { grid-area: produkte; border-radius: var(--radius); overflow: hidden; position: relative; }
.salon__produkte img { width: 100%; height: 100%; object-fit: cover; }
.salon__produkte p {
  position: absolute; inset: auto 0 0 0;
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
  background: linear-gradient(to top, rgba(40, 10, 8, 0.85), transparent);
  color: var(--text-hell);
  font-size: var(--klein);
}

/* -------------------------------------------------------------- Vollbild */

.vollbild { background: var(--tief); }
.vollbild img { width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; }

/* --------------------------------------------------------------- Stimmen */

.stimmen { padding-block: var(--bereich); background: var(--creme-tief); }
.stimmen__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}
.stimmen__liste li {
  background: var(--erhoben);
  border-radius: var(--radius);
  padding: var(--raum-3);
  display: grid;
  gap: var(--raum-3);
  align-content: start;
}
.stimmen__liste .sym { color: var(--rot); }
.stimmen__text { font-size: var(--klein); }
.stimmen__wer { font-weight: 600; font-size: var(--klein); }
.stimmen__ort { color: var(--text-leise); font-size: var(--winzig); }

/* ---------------------------------------------------------------- Ablauf */

.ablauf {
  position: relative;
  background: var(--tief);
  color: var(--text-hell);
  /* Wie bei .anliegen: Luft genug fuer eine vollstaendige Kachel. */
  padding-block: clamp(84px, 11vw, 150px);
  overflow: hidden;
  isolation: isolate;
}
.ablauf__bild { position: absolute; inset: 0; z-index: -2; }
.ablauf__bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.ablauf::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, var(--tief) 20%, rgba(72, 18, 14, 0.72) 100%);
}
.ablauf .bereich-lead { margin-top: var(--raum-3); }

.ablauf__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-5);
}
.ablauf__liste li {
  background: rgba(94, 33, 28, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
}
.ablauf__nummer {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--rot);
  margin-bottom: var(--raum-2);
}
.ablauf__liste h3 { margin-bottom: 8px; }
.ablauf__liste li p:last-child { color: var(--text-hell-leise); font-size: var(--klein); }

/* -------------------------------------------------------------------- FAQ */

.faq-bereich { padding-block: var(--bereich); }
.faq__eintrag { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  background: none;
  border: 0;
  padding: var(--raum-3) 0;
  font: inherit;
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.faq__zeichen {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--creme-tief);
  transition: background 0.25s var(--weich);
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.6px;
  background: var(--tief);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--weich), background 0.25s var(--weich);
}
.faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__eintrag[data-offen] .faq__zeichen { background: var(--rot); }
.faq__eintrag[data-offen] .faq__zeichen::before,
.faq__eintrag[data-offen] .faq__zeichen::after { background: #fff; }
.faq__eintrag[data-offen] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__antwort { height: 0; overflow: hidden; transition: height 0.3s var(--weich); }
.faq__antwort p { padding-bottom: var(--raum-3); color: var(--text-leise); max-width: 70ch; }

/* ---------------------------------------------------------------- Termin */

.termin { padding-block: var(--bereich); background: var(--creme-tief); }
.termin__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--raum-5);
  align-items: start;
}
.termin .bereich-lead { margin-block: var(--raum-3) var(--raum-4); }

.termin__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

.termin__daten { margin-top: var(--raum-4); display: grid; gap: var(--raum-3); }
.termin__daten li { display: grid; grid-template-columns: 22px 1fr; gap: var(--raum-2); }
.termin__daten .sym { color: var(--rot); margin-top: 3px; }
.termin__daten a { text-decoration: none; }
.termin__daten a:hover { color: var(--rot); }
.termin__daten dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--raum-2); }
.termin__daten dt { color: var(--text-leise); font-size: var(--klein); }
.termin__daten dd { margin: 0; font-size: var(--klein); }

/* --- Formular ----------------------------------------------------------- */

.formular {
  background: var(--erhoben);
  border-radius: var(--radius);
  padding: var(--raum-4);
  display: grid;
  gap: var(--raum-3);
}
.feld { display: grid; gap: 7px; }
.feld--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
.feld--paar > div { display: grid; gap: 7px; }
.feld label { font-size: var(--klein); font-weight: 600; }
.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: var(--klein);
  color: var(--text);
  background: var(--creme);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s var(--weich), background 0.2s var(--weich);
}
.feld textarea { resize: vertical; min-height: 104px; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus { background: #fff; border-color: var(--rot); outline: none; }
.feld input[aria-invalid='true'] { border-color: var(--rot); background: #fff; }

.formular__hinweis { font-size: var(--winzig); color: var(--text-leise); }
.formular__meldung { font-size: var(--klein); font-weight: 600; color: var(--rot); }
.formular__meldung:empty { display: none; }

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

.fuss { background: var(--tief); color: var(--text-hell-leise); padding-top: var(--raum-6); }
.fuss__oben {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-4);
  padding-bottom: var(--raum-5);
}
.fuss__titel {
  font-size: var(--winzig);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-hell);
  margin-bottom: var(--raum-3);
}
.fuss__liste { display: grid; gap: 11px; font-size: var(--klein); }
.fuss__liste li { display: flex; gap: 10px; align-items: flex-start; }
.fuss__liste .sym { width: 17px; height: 17px; color: var(--rot); margin-top: 3px; }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { color: var(--text-hell); }
.fuss__zeit strong { display: block; color: var(--text-hell); font-weight: 600; }

/* Die Wortmarke schließt die Seite. `overflow: hidden` am Body faengt ab,
   dass sie bei sehr schmalen Fenstern seitlich hinausragt. */
.fuss__marke {
  font-family: 'Rethink Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 17vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--text-hell);
  border-top: 1px solid var(--linie-hell);
  padding-top: var(--raum-4);
  text-wrap: nowrap;
}
.fuss__recht { padding-block: var(--raum-3) var(--raum-4); font-size: var(--winzig); }

/* =============================================================== Tablet === */

@media (max-width: 1080px) {
  .anliegen__liste { grid-template-columns: minmax(0, 1fr); }
  .stimmen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salon__gitter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'bild punkte'
      'produkte zahlen';
  }
  .salon__bild img { aspect-ratio: 3 / 4; }
  .salon__produkte img { aspect-ratio: 4 / 3; }
  .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }

  .bereich-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); align-items: start; }
  .leistung__inhalt { grid-template-columns: minmax(0, 1fr); }
  .termin__innen { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .ablauf__liste { grid-template-columns: minmax(0, 1fr); }
  .reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ Phone === */

@media (max-width: 640px) {
  :root { --rand: 18px; }

  .kopf__innen { min-height: 64px; }
  .kopf__aktion .knopf--voll { display: none; }

  /* Auf dem Telefon darf der Hero kuerzer sein — 820px waeren dort fast der
     ganze Bildschirm, und die Karte am unteren Rand faende keinen Platz. */
  .hero { min-height: max(620px, min(92vh, 780px)); padding-bottom: clamp(210px, 46vw, 260px); }
  .hero__lead { font-size: 1rem; }
  .hero__knoepfe .knopf { flex: 1 1 100%; }
  /* Karte und Punkte teilen sich sonst dieselbe Zeile und überlagern sich —
     die Punkte stehen deshalb über der Karte, nicht neben ihr. */
  .hero__karte { left: var(--rand); right: var(--rand); bottom: var(--raum-3); min-width: 0; }
  .hero__punkte { right: auto; left: var(--rand); bottom: calc(var(--raum-3) + 148px); }

  .salon__gitter { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'bild' 'punkte' 'zahlen' 'produkte'; }
  .stimmen__liste { grid-template-columns: minmax(0, 1fr); }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }

  .leistung__kopf { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: var(--raum-2); }
  .leistung__schritte { display: none; }

  .feld--paar { grid-template-columns: minmax(0, 1fr); }
  .formular { padding: var(--raum-3); }
}

/* =============================================================== Motion === */

.anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--zeit) var(--weich), transform var(--zeit) var(--weich);
}
.anim.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  .hero__buehne img { transition: none; transform: scale(var(--spiegel), 1); }
  .reihe li:hover img { transform: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============================================================ Rechtstexte ===

   Impressum und Datenschutz sind Pflichtseiten, keine Gestaltung. Sie erben
   Kopf und Fuß der Startseite und bekommen darunter nur eine schmale
   Textspalte — bewusst ohne eigene Bildsprache. */

.seitenkopf {
  background: var(--tief);
  color: var(--text-hell);
  padding-block: clamp(52px, 6vw, 84px);
}
.seitenkopf p { color: var(--text-hell-leise); margin-top: var(--raum-2); }

.rechtstext { padding-block: var(--bereich); }
.rechtstext .schale { max-width: 46rem; }
.rechtstext h2 {
  font-size: 1.4rem;
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext p, .rechtstext ul { margin-top: var(--raum-2); color: var(--text-leise); }
.rechtstext ul { list-style: disc; padding-left: 1.2em; }
.rechtstext li { margin-top: 6px; }
.rechtstext a { color: var(--rot); }
.rechtstext strong { color: var(--text); }
.rechtstext code {
  font-size: 0.9em;
  background: var(--creme-tief);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Der Hinweis, dass hier Platzhalter stehen. Er gehört sichtbar auf die Seite
   und nicht in eine Liesmich-Datei — sonst geht er beim Kundenprojekt unter. */
.rechtstext__hinweis {
  background: var(--erhoben);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius-klein);
  padding: var(--raum-3);
  margin-bottom: var(--raum-5);
  font-size: var(--klein);
}
.rechtstext__hinweis strong { color: var(--rot); }