/* =====================================================================
   Cutaleya — Gestaltung · Richtung A „Vitrine"

   Wird NACH styles.css und website.css geladen.

   Dies ist KEIN Anstrich, sondern die Umsetzung einer Layout-Richtung
   aus dem Design-System (design/layout/a-vitrine.html):

     · Der Kopf schwebt über der Bühne statt in einem eigenen Balken
     · Die Bühne ist randlos und hoch, der Schriftzug steht unten links
       statt mittig — man liest ihn wie eine Schlagzeile, nicht wie eine
       Grußkarte
     · Der Buchungsbalken klebt unten und bleibt beim Scrollen sichtbar.
       Bei zwei Standorten trägt er beide Adressen; damit ist die
       häufigste Frage („wo seid ihr?") ohne Klick beantwortet
     · Abschnitte stapeln sich randlos, mit viel Luft dazwischen
     · Preise stehen als redaktionelle Liste, nicht in Karten

   Farben: Bernstein #F09020 auf warmem Schwarz, aus dem Logo
   ausgezählt. Regel: Bernstein ist teuer, weil es selten ist — genau
   eine Handlung je Bildschirm leuchtet damit, das ist die Buchung.
   ===================================================================== */

/* =====================================================================
   1 · Werte
   ===================================================================== */

:root {
  /* Die Markenfarbe, EINMAL. Vorher stand Prestiges Türkis #0E5C61 an
     47 Stellen als roher Hex-Wert in styles.css, website.css und vier
     PHP-Seiten — an jedem Token vorbei. Kein Umfärben der Tokens konnte
     das erreichen; der Aktions-Code im Buchungsassistenten leuchtete
     deshalb türkis, während alles daneben schon bernstein war.

     Wer eine Markenfarbe braucht, nimmt diese vier. --marke-rgb ist
     dieselbe Farbe als Zahlentripel, für rgba(...) mit Deckkraft.
     PHP-Seiten mit eigenem <style> holen sie über marke_css(). */
  --marke:      #F09020;
  --marke-rgb:  240, 144, 32;
  --marke-tief: #C46F10;
  --marke-zart: #FBF1E4;
  --marke-rand: #E8C79A;
  --marke-grund: #100D0B;
  --marke-flaeche: #17120E;
  --marke-text: #F6F0E6;
  --marke-leise: #ADA08E;
  --marke-linie: rgba(240, 144, 32, 0.16);

  --bg:          #100D0B;
  --bg-warm:     #17120E;

  --panel:       rgba(255, 226, 186, 0.038);
  --panel-2:     rgba(255, 226, 186, 0.062);
  --border:      rgba(240, 144, 32, 0.15);
  --border-soft: rgba(240, 144, 32, 0.08);

  --text:        #F6F0E6;
  --text-dim:    #ADA08E;
  /* War #6E6558 — auf warmem Schwarz nur 2.7:1 und damit nicht mehr
     zu lesen. Gefunden von `npm run hell`. Der Abstand zu --text-dim
     bleibt deutlich, die Stufe ist also weiterhin die leiseste. */
  --text-faint:  #8E8474;

  /* --gold heißt in styles.css jede Hervorhebung. Hier ist es Messing —
     zurückgenommen, damit Fließtext und Knöpfe nicht schreien. Das reine
     Bernstein bleibt dem Logo und der Buchung vorbehalten. */
  --gold:        #E9A249;
  --gold-deep:   #F09020;
  --gold-2:      #C87E22;
  --logo:        #F09020;

  --bernstein:   #F09020;
  --messing:     #C8933A;
  --glut:        #C05000;

  /* Enger als bei der Vorlage. Weiche Ecken wirken freundlich,
     scharfe wirken teuer. */
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 28px 70px rgba(0, 0, 0, 0.72);
  --ease:        cubic-bezier(.22,.61,.36,1);

  --balken-hoehe: 78px;
}

/* =====================================================================
   1b · Die Werte der öffentlichen Seite

   WICHTIG, und beim ersten Anlauf übersehen: website.css führt einen
   EIGENEN Variablensatz auf `body.ph` und benutzt die Werte aus
   styles.css dort gar nicht. Und `--ph-bg` stand auf #ffffff — die
   öffentliche Seite war ein HELLES Design. Dunkel wirkte nur die Bühne,
   weil das Foto dunkel ist.

   Wer hier nur die :root-Werte überschreibt, ändert am sichtbaren
   Ergebnis fast nichts und wundert sich. Deshalb ist DIES die Stelle,
   an der Cutaleyas Gestaltung wirklich greift.

   Die Vorlage nennt ihre Akzentfarbe „cream" (ein helles Champagner).
   Bei Cutaleya ist der Akzent Bernstein — der Name der Variablen bleibt,
   ihr Wert nicht. Umbenennen hieße, jede Regel in website.css anzufassen.
   ===================================================================== */

body.ph {
  --ph-cream:    #F09020;   /* Akzent: Knöpfe, Hervorhebungen */
  --ph-cream-lt: #F5A63F;
  --ph-cream-dp: #C87E22;

  --ph-dark:     #100D0B;   /* Schrift AUF dem Akzent */
  --ph-dark-2:   #17120E;

  --ph-ink:      #F6F0E6;   /* Überschriften */
  --ph-body:     #ADA08E;   /* Fließtext */
  --ph-muted:    #8E8474;   /* mit --text-faint aufgehellt, siehe dort */
  --ph-line:     rgba(240, 144, 32, .12);

  --ph-bg:       #100D0B;   /* war #ffffff */
  --ph-bg-alt:   #17120E;   /* war #f7f7f7 */
  --ph-book-bg:  #0C0A08;

  /* Die Zierschrift („Caveat") entfällt. Sie zieht in Richtung
     Grußkarte; Cutaleya soll nach Werkstatt klingen. */
  --ph-script:   "Poppins", Inter, -apple-system, "Segoe UI", sans-serif;

  --ph-shadow:    0 2px 18px rgba(0, 0, 0, .45);
  --ph-shadow-lg: 0 24px 60px rgba(0, 0, 0, .62);
}

/* website.css schaltet body::before/::after ab (display:none!important).
   Der warme Lichtschein muss deshalb auf body.ph selbst liegen. */
body.ph {
  background:
    radial-gradient(1000px 560px at 82% -6%, rgba(240, 144, 32, .11), transparent 62%),
    radial-gradient(760px 620px at  4%  8%,  rgba(192,  80,  0, .07),  transparent 58%),
    #100D0B;
  background-attachment: fixed;
  color: var(--ph-body);
}

/* Platz für den klebenden Balken, sonst verdeckt er den Seitenfuß. */
body { padding-bottom: var(--balken-hoehe); }

::selection { background: rgba(240, 144, 32, .26); color: #FFF6E9; }
:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 3px; border-radius: 4px; }


/* =====================================================================
   2 · Kopf — schwebt, kein eigener Balken
   ===================================================================== */

/* Die Vorlage macht die Kopfzeile beim Scrollen zu MILCHGLAS IN WEISS mit
   dunkler Schrift. Auf warmem Schwarz ist das ein Bruch: Die Seite wird
   plötzlich hell, und die Marke verschwindet. Deshalb hier vollständig
   ersetzt — dunkles Glas, das die Bühne fortsetzt statt sie zu stören.

   Geschrieben mit body.ph, weil die Vorlage dieselbe Spezifität nutzt. */
body.ph #header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
body.ph #header:not(.scrolled)::after {
  /* Ein weicher Verlauf statt einer Kante — er trägt die helle Schrift
     auch über hellen Fotos, ohne dass ein Balken sichtbar wird. */
  background: linear-gradient(180deg, rgba(10, 8, 7, .68) 0%, transparent 100%);
}
body.ph #header.scrolled {
  background: rgba(12, 10, 8, .90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border-soft);
  box-shadow: none;
}

/* Die Schrift bleibt hell — auch nach dem Scrollen. */
body.ph #header .nav-links a,
body.ph #header.scrolled .nav-links a {
  color: var(--text);
  font-size: .76rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}
body.ph #header .nav-links a:hover,
body.ph #header.scrolled .nav-links a:hover,
body.ph #header.scrolled .nav-links a.active { color: var(--bernstein); }
body.ph #header.scrolled .nav-links a.active::after { background: var(--bernstein); }
body.ph #header.scrolled .menu-btn span { background: var(--text); }

/* Der Knopf im Kopf ist NICHT der Hauptknopf — der klebt unten.
   Zwei leuchtende Knöpfe gleichzeitig heben sich gegenseitig auf. */
body.ph #header .nav-right .btn-gold,
body.ph #header.scrolled .nav-right .btn-gold {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
body.ph #header .nav-right .btn-gold:hover,
body.ph #header.scrolled .nav-right .btn-gold:hover {
  background: transparent;
  border-color: var(--bernstein);
  color: var(--bernstein);
}

/* Sprachumschalter: bewusst leiser als der Buchen-Knopf daneben — er
   ist Orientierung, kein Handlungsaufruf. Auf jeder Seite genau einer,
   er zeigt immer auf die Schwesterseite derselben Art. */
body.ph .nav-right .lang-wechsel {
  display: inline-block;
  margin-right: .65rem;
  padding: .34rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .16s, border-color .16s;
}
body.ph .nav-right .lang-wechsel:hover {
  color: var(--bernstein);
  border-color: var(--bernstein);
}

/* Das Logo ist ein Rasterbild mit festem Seitenverhältnis (502 × 160).
   Es steht in einem Flex-Kasten, und der darf seine Kinder schmaler
   machen als sie sein wollen: Am Handy wurde die Wortmarke dadurch um
   bis zu 30 % zusammengedrückt — auf jeder Unterseite anders stark,
   weil dort andere Dinge daneben stehen. Auffallen konnte das kaum,
   weil ein leicht schmaleres Logo einfach nur „so aussieht".

   Also: nie schrumpfen, und die Höhe je Bildschirm so wählen, dass die
   volle Breite auch hinpasst. Die Angaben aus website.css sind wirkungs-
   los, sobald hier eine steht — deshalb stehen sie vollständig hier. */
body.ph .brand .logo-img {
  height: 52px;
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
}
@media (max-width: 900px) { body.ph .brand .logo-img { height: 46px; } }
@media (max-width: 620px) { body.ph .brand .logo-img { height: 40px; } }


/* =====================================================================
   3 · Die Bühne — randlos, hoch, Schlagzeile unten links
   ===================================================================== */

body.ph .ph-hero { min-height: 88vh; }

/* Die Vorlage stellt den Inhalt mittig (align-items + justify-content
   center). Vitrine stellt ihn nach UNTEN LINKS. Beide Achsen müssen
   umgestellt werden — nur align-items zu ändern genügt nicht, dann sitzt
   der Text zwar links, aber weiterhin in der Mitte der Höhe.

   Geschrieben mit body.ph, um dieselbe Spezifität wie die Vorlage zu
   erreichen. Ein Stapel von !important würde hier zwar auch wirken, aber
   die nächste Änderung unmöglich machen. */
body.ph .ph-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 9vh, 7rem);
}

/* Der Schriftzug ist das Bild, nicht die Bildunterschrift. Die
   Zierschrift („Caveat") der Vorlage entfällt — sie zieht in Richtung
   Grußkarte, und Cutaleya soll nach Werkstatt klingen. */
body.ph .ph-hero .ph-script,
body.ph #heroTitle {
  font-family: Poppins, Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(2.6rem, 7.5vw, 5.8rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--text);
  text-align: left;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}

/* Ein hervorgehobenes Wort. Kommt aus dem Backoffice als *Wort* und wird
   von website.js zu .ph-akzent — kein HTML in einer Einstellung. */
body.ph #heroTitle .ph-akzent,
body.ph #heroTitle em { font-style: normal; color: var(--bernstein); }

body.ph .ph-hero-sub {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.5vw, 1.19rem);
  max-width: 44ch;
  margin-top: 1.35rem;
  text-align: left;
}

body.ph .ph-hero-cta { justify-content: flex-start; margin-top: 2.1rem; }

/* Die Pfeile des Bilderwechslers rutschen nach unten rechts, damit sie
   dem Schriftzug links nicht ins Bild ragen. */
body.ph .ph-hero-nav {
  top: auto;
  bottom: clamp(4rem, 9vh, 7rem);
  transform: none;
}
body.ph .ph-hero-nav.prev { left: auto; right: clamp(5rem, 9vw, 7.5rem); }
body.ph .ph-hero-nav.next { right: clamp(1.25rem, 4vw, 3rem); }
/* Die Punkte lagen am unteren Bühnenrand — und damit hinter der
   Buchungsleiste, die dort seit den zwei Standorten steht. Sie waren auf
   keinem Bildschirm zu sehen. Jetzt stehen sie in der Lücke zwischen
   Standortschild und Knöpfen, links bündig darunter. */
body.ph .ph-hero-dots {
  bottom: 9.6rem;
  justify-content: flex-start;
  padding-left: clamp(1.25rem, 4vw, 3rem);
}

/* Die Punktleiste ist ein Streifen über die ganze Breite (`left:0;right:0`)
   und liegt auf derselben Ebene wie die Pfeile. Sie fing deren Klicks ab:
   Der Pfeil war zu sehen, reagierte aber nicht. Also ist der Streifen
   durchlässig, nur die Punkte selbst sind es nicht. */
body.ph .ph-hero-dots { pointer-events: none; }
body.ph .ph-hero-dots button { pointer-events: auto; }

/* Das Bild wird nach unten hin dunkler, damit der Text immer trägt —
   unabhängig davon, welches Foto der Salon später hochlädt. */
.ph-hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,7,.30) 0%, rgba(10,8,7,.10) 42%, rgba(10,8,7,.88) 100%);
}

.ph-scrolldown { display: none; }   /* der Balken unten übernimmt diese Rolle */


/* =====================================================================
   4 · Der klebende Buchungsbalken — das tragende Element dieser Richtung
   ===================================================================== */

.cut-balken {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(12, 10, 8, .94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}

.cut-balken-orte { display: flex; gap: 2rem; min-width: 0; }
.cut-balken-orte a {
  display: block;
  min-width: 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease) 180ms;
}
.cut-balken-orte a:hover { border-bottom-color: var(--border); }
.cut-balken-orte b {
  display: block;
  font-size: .84rem;
  color: var(--text);
  letter-spacing: .04em;
}
.cut-balken-orte span {
  display: block;
  font-size: .74rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der eine Leuchtpunkt der ganzen Seite. */
.cut-balken-knopf {
  flex: none;
  background: linear-gradient(135deg, #F5A63F 0%, #E07E14 100%);
  color: #1A1206;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .8rem 1.75rem;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(240, 144, 32, .22);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cut-balken-knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(240, 144, 32, .34);
}

@media (max-width: 720px) {
  /* Der zweite Standort war hier ausgeblendet, weil Anschrift und
     Öffnungszeiten nebeneinander nicht passten. Damit stand am Handy
     überall „Innere Stadt" allein — der Salon hat aber zwei Häuser, und
     genau das soll der Kunde erfahren.

     Also beide, untereinander, nur die Namen: Sie sagen den Bezirk
     bereits. Anschrift und Zeiten stehen im Fuß und im Assistenten. */
  .cut-balken-orte { flex-direction: column; gap: .2rem; }
  .cut-balken-orte a { display: block; border-bottom: 0; padding: 0; }
  .cut-balken-orte span { display: none; }
  .cut-balken-orte b { font-size: .82rem; }
  .cut-balken-knopf { padding: .8rem 1.2rem; font-size: .88rem; }
}

/* ---------------------------------------------------------------------
   Der Cookie-Hinweis klebt ebenfalls unten (z-index 200) und lag damit
   genau über dem Buchungsbalken. Auf dem Handy verdeckte er zusätzlich
   die halbe Bühne.

   Lösung: Solange der Hinweis steht, weicht der Balken. Zwei Leisten
   übereinander sind auf keinem Gerät zu verantworten, und der Hinweis
   ist ohnehin nach einem Klick erledigt. Dass der Balken danach
   erscheint, macht ihn eher sichtbarer.

   :has() prüft das ohne eine Zeile JavaScript. Browser ohne :has()
   zeigen beide — dann liegt der Hinweis oben und bleibt bedienbar. */
body:has(#cmRoot .cm-banner.on) .cut-balken { display: none; }

/* Der Hinweis selbst in den Farben der Marke. */
#cmRoot .cm-banner {
  background: rgba(12, 10, 8, .97);
  border-top-color: var(--border);
}
.cm-b-txt b {
  /* Die Vorlage nimmt hier die Anzeigeschrift — bei Cutaleya wäre das
     eine Zierschrift für einen Rechtshinweis. */
  font-family: Poppins, Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}
.cm-b-txt a { color: var(--bernstein); }


/* =====================================================================
   4b · Weiße Kartenflächen der Vorlage

   Ein paar Regeln in website.css setzen `background:#fff` fest, nicht
   über eine Variable. Auf hellem Grund fiel das nicht auf; auf warmem
   Schwarz wären es leuchtend weiße Kacheln.
   ===================================================================== */

body.ph .ph-spec,
body.ph .ph-sec-alt .ph-spec,
body.ph .ph-card,
body.ph .ph-member,
body.ph .ph-modal-box {
  background: var(--panel);
  border-color: var(--border-soft);
  box-shadow: none;
}
body.ph .ph-card-head { background: rgba(240, 144, 32, .10); }
body.ph .ph-card-head h3 { color: var(--bernstein); }

/* Die Preistabelle. Kopfzeile, Zebrastreifen und Fußzeile standen fest
   auf hellen Werten (#fcfcfa, #fbf7e6, #fbfaf5). Auf dunklem Grund waren
   das weiße Streifen mit grauer Schrift darauf — unlesbar. */
body.ph .ph-tbl thead th,
body.ph .ph-tbl .ph-th {
  background: rgba(255, 226, 186, .05);
  color: var(--text-faint);
  border-bottom-color: var(--border-soft);
}
body.ph .ph-tbl tbody td { border-bottom-color: var(--border-soft); color: var(--text); }
body.ph .ph-tbl tbody td:first-child { color: var(--text); }
body.ph .ph-tbl tbody tr:nth-child(even) { background: rgba(255, 226, 186, .028); }
body.ph .ph-tbl tbody tr:hover { background: rgba(240, 144, 32, .09); }
body.ph .ph-card-foot {
  background: rgba(255, 226, 186, .04);
  border-top-color: var(--border-soft);
  color: var(--text-faint);
}
body.ph .ph-price-list tr.ph-fav { background: rgba(240, 144, 32, .07); }

/* Der Preis führt die Zeile rechts. */
body.ph .ph-tbl tbody td:last-child {
  color: var(--bernstein);
  font-weight: 600;
  font-size: 1.06rem;
}

/* ---------------------------------------------------------------------
   Team — runde Bildzeichen statt großer Hochformat-Karten.

   Das ist keine Geschmacksfrage, sondern eine Anpassung an das, was es
   wirklich gibt: Die Fotos von Treatwell sind 68 × 68 px. In einer
   Karte mit 320 px Breite wären sie ein Matschbild. Bei 96 px im Kreis
   sehen sie sauber aus.

   Die Vorlage zeigte ohne Foto einen Buchstaben auf hellgrauem Verlauf
   im Seitenverhältnis 2:3 — bei einer einzigen Person ein
   siebenhundert Pixel hoher weißer Block.

   Kommen später größere Fotos, kann daraus wieder eine Karte werden;
   solange nicht, ist klein und scharf besser als groß und verwaschen. */
body.ph .ph-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-4, 2rem) 2.5rem;
  max-width: 920px;
  margin-inline: auto;
}
body.ph .ph-member {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 150px;
  text-align: center;
}
body.ph .ph-member:hover { background: transparent; border: none; }

body.ph .ph-member-img {
  width: 96px;
  height: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
body.ph .ph-member-img img { width: 100%; height: 100%; object-fit: cover; }
body.ph .ph-member-img .ph-initial {
  background: linear-gradient(160deg, rgba(240, 144, 32, .12), rgba(192, 80, 0, .06));
  color: var(--messing);
  font-size: 2.1rem;
}
body.ph .ph-member-info { padding: .9rem .2rem 0; text-align: center; }
body.ph .ph-member-info h4 { font-size: 1rem; color: var(--text); }
body.ph .ph-member-info .role {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--messing);
  margin-top: .2rem;
}
body.ph .ph-member-info p { font-size: .82rem; color: var(--text-faint); margin-top: .4rem; }

/* Das Preisraster steht auf zwei Spalten. Gibt es nur eine Kategorie,
   klebte die Tabelle in der linken Hälfte. Die Vorlage kennt dafür eine
   Klasse `.single`, die aber nie gesetzt wird — mit :has() braucht es
   sie gar nicht, das Blatt sieht selbst nach, wie viele Karten da sind. */
body.ph .ph-price-grid:has(> :only-child) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}

/* =====================================================================
   Handwerk — eine Tafel statt sechs Karten

   Der Salon liefert die sechs Leistungen als ein fertiges Bild. Darüber
   liegen sechs unsichtbare Schaltflächen; sie öffnen die Erklärung.

   Der Preis dafür ist bekannt: Ein Bild bricht nicht um. Am Handy wäre
   die eingebrannte Beschriftung vier Pixel hoch und damit unlesbar —
   deshalb bleibt die Tafel dort in lesbarer Breite stehen und wird
   seitlich geschoben, statt zusammengequetscht zu werden.
   ===================================================================== */

body.ph #services .hw-tafel { margin-top: .5rem; }

body.ph #services .hw-rolle {
  position: relative;
  line-height: 0;
  border: 1px solid rgba(240, 144, 32, .12);
  border-radius: 4px;
  overflow: hidden;
}
body.ph #services .hw-rolle img {
  width: 100%;
  height: auto;
  display: block;
}

/* Die Schaltflächen liegen im selben Raster wie die Karten im Bild —
   drei Spalten, zwei Reihen. Keine Koordinaten von Hand: Verschiebt
   sich das Bild einmal um ein paar Pixel, stimmt das Raster trotzdem. */
body.ph #services .hw-felder {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
body.ph #services .hw-feld {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 260ms var(--ease), box-shadow 260ms var(--ease);
}
body.ph #services .hw-feld:hover,
body.ph #services .hw-feld:focus-visible {
  outline: none;
  /* Ein Hauch Bernstein zeigt, welches Feld gemeint ist — mehr geht
     nicht, das Bild darunter lässt sich nicht verändern. */
  background: rgba(240, 144, 32, .10);
  box-shadow: inset 0 0 0 1px rgba(240, 144, 32, .45);
}

/* Nur für Vorleseprogramme: Der Name steht im Bild, nicht im Text. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Am Handy: dieselbe Tafel, aber in ihre sechs Karten zerlegt und
   untereinander.

   Ein erster Versuch liess die ganze Tafel stehen und schob sie
   seitlich. Gemessen waren davon 354 von 780 Pixeln zu sehen — vier der
   sechs Leistungen lagen hinter einem Schub, den niemand bemerkt. Ein
   Angebot, das man wegschieben muss, hat man nicht gezeigt (Regel 11). */
body.ph #services .hw-einzeln { display: none; }

@media (max-width: 860px) {
  body.ph #services .hw-rolle { display: none; }
  body.ph #services .hw-einzeln {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  body.ph #services .hw-karte {
    padding: 0;
    border: 1px solid rgba(240, 144, 32, .12);
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    transition: border-color 220ms var(--ease);
  }
  body.ph #services .hw-karte:hover,
  body.ph #services .hw-karte:focus-visible {
    outline: none;
    border-color: rgba(240, 144, 32, .45);
  }
  body.ph #services .hw-karte img { width: 100%; height: auto; display: block; }
}

/* Ab zwei Spalten passt die volle Tafel wieder ins Bild. */
@media (min-width: 620px) and (max-width: 860px) {
  body.ph #services .hw-einzeln { grid-template-columns: 1fr 1fr; }
}

/* Karten heben sich beim Überfahren durch Licht, nicht durch Schatten —
   auf dunklem Grund ist ein Schlagschatten unsichtbar. */
body.ph .ph-spec:hover,
body.ph .ph-member:hover,
body.ph .ph-card:hover {
  background: var(--panel-2);
  border-color: var(--border);
}


/* =====================================================================
   5 · Abschnitte — randlos gestapelt, viel Luft
   ===================================================================== */

.ph-sec { padding: clamp(4.5rem, 11vh, 8.5rem) 0; }
.ph-sec-alt { background: var(--bg-warm); }

.eyebrow, .ph-title .eyebrow {
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--messing);
}

.ph-title h2 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: .5rem;
}

/* Bildbänder ruhiger: bei Vitrine trägt die Bühne, die Bänder sind Pausen. */
/* Die Bildbänder.

   Vorher standen dort die Innenaufnahmen des Salons — 720 × 480 Pixel,
   über die volle Breite gezogen also fast dreifach vergrößert. Das war
   die Unschärfe: nicht die Gestaltung, die Vorlage.

   Jetzt eigene Zuschnitte in 2400 × 600 aus den großen Fotos. Das Band
   ist zugleich schmaler — bei 4:1 muss das Bild waagrecht kaum noch
   gestreckt werden, und es steht weniger im Weg. */
body.ph .ph-band {
  min-height: 0;
  padding-block: clamp(2.6rem, 5.5vw, 3.8rem);
  background-size: cover;
  background-position: center 42%;
}
body.ph .ph-band::after { background: rgba(10, 8, 7, .58) !important; }


/* =====================================================================
   6 · Preise — redaktionelle Liste statt Karten
   ===================================================================== */

.ph-price-list table { width: 100%; border-collapse: collapse; }

.ph-price-list td {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: baseline;
  background: transparent;
}

.ph-price-list .ph-n .n {
  font-size: 1.12rem;
  color: var(--text);
  letter-spacing: -.005em;
}
.ph-price-list .ph-n .d {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: .3rem;
}

/* Der Preis führt die Zeile rechts. Anzeigeschrift, damit er als Zahl
   gelesen wird und nicht als Fließtext. */
.ph-price-list .ph-one,
.ph-price-list td:last-child {
  text-align: right;
  font-family: Poppins, Inter, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bernstein);
  white-space: nowrap;
}

.ph-price-list .ph-fav td { background: rgba(240, 144, 32, .045); }
.ph-price-list .ph-top {
  display: inline-block;
  margin-left: .6rem;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --glut ist ein dunkles Orange. Es steht auf einer bernstein
     hinterlegten Zeile und war dort nur 2.5:1 — die Marke selbst ist
     heller und trennt sich deutlich. */
  color: var(--marke);
  vertical-align: middle;
}

.ph-price-intro, .ph-price-note { color: var(--text-dim); }


/* =====================================================================
   7 · Knöpfe
   ===================================================================== */

.ph-btn-solid, .btn-gold, .bk-card .btn-gold {
  background: linear-gradient(135deg, #F5A63F 0%, #E07E14 100%);
  color: #1A1206;
  border: none;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 26px rgba(240, 144, 32, .22);
}
.ph-btn, .btn-ghost {
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: transparent;
}
.ph-btn:hover, .btn-ghost:hover { border-color: var(--bernstein); color: var(--text); }


/* =====================================================================
   8 · Buchungsassistent — Markup unangetastet, nur Einbettung
   ===================================================================== */

.bk-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.stepper .s.active { color: var(--bernstein); }
.stepper .s.active .b {
  background: var(--bernstein);
  color: #1A1206;
  border-color: var(--bernstein);
}


/* =====================================================================
   9 · Rücksicht
   ===================================================================== */

@media (color-gamut: p3) {
  :root {
    --gold-deep: color(display-p3 0.91 0.55 0.13);
    --bernstein: color(display-p3 0.91 0.55 0.13);
    --logo:      color(display-p3 0.91 0.55 0.13);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cut-balken-knopf, .cut-balken-orte a { transition: none; }
  .cut-balken-knopf:hover { transform: none; }
}


/* ---------------------------------------------------------------------
   Standortwahl im Buchungsassistenten

   Erster Schritt bei mehreren Salons. Bewusst zwei große Flächen statt
   einer Auswahlliste: Bei zwei Häusern ist eine Liste umständlicher als
   das, was sie ersetzt — und die Entscheidung fällt über Adresse und
   Anfahrt, nicht über den Namen.
   --------------------------------------------------------------------- */
body.ph .ort-wahl { display: grid; gap: .9rem; margin-top: 1.2rem; }

body.ph .ort-karte {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: 1.15rem 1.25rem; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ort, var(--messing));
  border-radius: var(--radius); color: var(--text);
  font: inherit;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
body.ph .ort-karte:hover { background: var(--panel-2); border-color: var(--border); }
body.ph .ort-karte.sel {
  background: rgba(240, 144, 32, .09);
  border-color: var(--bernstein);
  border-left-color: var(--ort, var(--bernstein));
}

body.ph .ort-kennung {
  flex: none; min-width: 3.4rem;
  font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: .08em; color: var(--ort, var(--messing));
}
body.ph .ort-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
body.ph .ort-text b { font-size: 1.02rem; }
body.ph .ort-text span { font-size: .86rem; color: var(--text-dim); }
body.ph .ort-weg { font-size: .78rem !important; color: var(--text-faint) !important; }
body.ph .ort-pfeil { margin-left: auto; color: var(--messing); font-size: 1.1rem; flex: none; }
body.ph .ort-karte.sel .ort-pfeil { color: var(--bernstein); }

@media (prefers-reduced-motion: reduce) { body.ph .ort-karte { transition: none; } }


/* =====================================================================
   Buchungsbereich

   Er führt einen EIGENEN Farbsatz (--f-karte, --a-tat, --t-1 …), bewusst
   hell aufgebaut. Beim Umbau auf Cutaleya wurde er übersehen: Die Seite
   war dunkel, der Buchungsassistent — das Wichtigste überhaupt — blieb
   weiß mit türkisen Knöpfen aus dem Vorgängerprojekt.

   Die Rollen bleiben, nur ihre Werte wechseln. Das ist derselbe Griff
   wie bei --ph-cream weiter oben: Der Name passt dann nicht mehr genau,
   aber jede Regel, die ihn benutzt, stimmt weiterhin.
   ===================================================================== */

body.ph .ph-book {
  /* Flächen */
  --f-seite: #0C0A08;
  --f-karte: #17120E;
  --f-zart:  #1A1613;
  --f-still: #131010;
  /* Rahmen */
  --r-fein: rgba(240, 144, 32, .11);
  --r-klar: rgba(240, 144, 32, .22);
  /* Text in drei Stufen */
  --t-1: #F6F0E6;
  --t-2: #ADA08E;
  --t-3: #8E8474;
  /* Handlung und Auswahl bleiben getrennt — die Handlung leuchtet,
     das Gewählte wird nur hinterlegt. Sonst konkurrieren beide. */
  --a-tat:       #F09020;
  --a-wahl:      rgba(240, 144, 32, .12);
  --a-wahl-rand: #F09020;
  /* Status */
  --s-frei:  #7FBF8F;
  --s-knapp: #E9A249;
  --s-voll:  #E59A9A;
}

/* Auf Bernstein gehört dunkle Schrift, nicht weiße. Die Vorlage setzte
   an einer Stelle #fff — auf hellem Türkis richtig, auf Bernstein nicht. */
body.ph .ph-book .btn-gold,
body.ph .ph-book .wz-next {
  background: linear-gradient(135deg, #F5A63F, #E07E14);
  color: #14100D;
  border: none;
  font-weight: 700;
}
body.ph .ph-book .wz-next.final { background: linear-gradient(135deg, #F5A63F, #E07E14); }
body.ph .ph-book .wz-next:disabled {
  background: var(--f-still);
  color: var(--t-3);
  cursor: default;
}
body.ph .ph-book .wz-back {
  background: transparent;
  border: 1px solid var(--r-fein);
  color: var(--t-2);
}

/* Die Zusammenfassung rechts stand auf background:#fff mit einem Kopf in
   voller Akzentfarbe. Auf Bernstein wäre das eine leuchtende Fläche, die
   mit dem Buchen-Knopf um Aufmerksamkeit streitet — und weiße Schrift
   darauf ist schlecht lesbar.

   Deshalb: Der Kopf wird nur hinterlegt, nicht geflutet. Die einzige
   flächig leuchtende Stelle im Assistenten bleibt „Weiter". */
body.ph .ph-book .summary,
body.ph .ph-book .bk-card { background: var(--f-karte); border-color: var(--r-fein); box-shadow: none; }
body.ph .ph-book .summary .cap {
  background: rgba(240, 144, 32, .10);
  color: var(--t-1);
  border-bottom: 1px solid var(--r-fein);
}
body.ph .ph-book .summary .total .amount { color: var(--a-tat); }

/* Die Standortkarten sind Schaltflächen — der Browser gibt ihnen sonst
   seine eigene helle Grundfarbe, und die schlägt eine geerbte durch. */
body.ph .ph-book .ort-karte { background: var(--f-zart); color: var(--t-1); }
body.ph .ph-book .ort-karte:hover { background: var(--f-still); }
body.ph .ph-book .ort-karte.sel { background: var(--a-wahl); border-color: var(--a-wahl-rand); }
body.ph .ph-book .ort-text span { color: var(--t-2); }
body.ph .ph-book .ort-weg { color: var(--t-3) !important; }

/* Der Buchungsbereich fuehrt nicht nur einen eigenen Farbsatz (--f-karte,
   --a-tat, --t-1 …), sondern ueberschreibt ZUSAETZLICH die Grundtokens
   aus styles.css auf helle Werte:

       .ph-book { --bg:#f7f7f7; --panel:#fff; --text:#151515; --gold:#151515 }

   Damit war jede Regel aus styles.css, die diese Tokens benutzt, im
   Assistenten wieder hell — die Werte in der Zusammenfassung standen als
   fast schwarze Schrift auf dunklem Grund und waren nicht zu lesen.

   Vier Schichten also: :root · body.ph · body.ph .ph-book (eigener Satz)
   · body.ph .ph-book (Grundtokens). Diese hier ist die vierte. */
body.ph .ph-book {
  --bg:          var(--f-seite);
  --bg-warm:     var(--f-karte);
  --panel:       var(--f-karte);
  --panel-2:     var(--f-still);
  --border:      var(--r-fein);
  --border-soft: var(--r-fein);
  --text:        var(--t-1);
  --text-dim:    var(--t-2);
  --text-faint:  var(--t-3);
  --gold:        var(--a-tat);
  --gold-2:      var(--messing);

  /* --a-tat-hell stand auf #127078 — Prestiges Tuerkis, eine Nuance
     heller. Kein Suchlauf nach #0E5C61 hat das gefunden. */
  --a-tat-hell:  var(--marke-tief);
  --ph-cream-lt: var(--f-still);
  --shadow:      0 14px 40px rgba(0, 0, 0, .45);
}

/* Die Kalendertage trugen background:#fff fest im Stylesheet — an jedem
   Token vorbei, derselbe Fehlertyp wie Fundort 13. */
body.ph .ph-book .cal-day { background: var(--f-zart); border-color: var(--r-fein); color: var(--t-1); }
body.ph .ph-book .cal-day:disabled,
body.ph .ph-book .cal-day.empty { background: transparent; color: var(--t-3); }
body.ph .ph-book .cal-day.sel   { background: var(--a-tat); border-color: var(--a-tat); color: #1A1208; }
body.ph .ph-book .cal-day.today { border-color: var(--a-tat); }
body.ph .ph-book .cal-day.today .dd { color: var(--t-1); }
body.ph .ph-book .cal-day .td   { background: var(--a-tat); }

/* Die Navigationsleiste stand auf rgba(255,255,255,.94) — als heller
   Balken quer unter dem dunklen Assistenten. Sie liegt sticky ueber dem
   Inhalt und braucht deshalb Deckkraft, aber in der Farbe der Karte. */
body.ph .ph-book .wz-bar {
  background: rgba(23, 18, 14, .94);
  border-color: var(--r-fein);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .35);
}
body.ph .ph-book .wz-sum  { color: var(--t-1); }
body.ph .ph-book .wz-hint { color: var(--t-2); }
body.ph .ph-book .wz-back { border-color: var(--r-fein); color: var(--t-2); }
body.ph .ph-book .wz-back:hover { color: var(--t-1); border-color: var(--a-tat); }

/* Der Abschnitt selbst — die Vorlage legt einen hellen Grund darunter. */
body.ph .ph-book { background: var(--f-seite); }
body.ph .ph-book::before { opacity: .35; }
body.ph .ph-book .ph-title h2 { color: var(--t-1); }
body.ph .ph-book .ph-lead,
body.ph .ph-book .ph-title .eyebrow { color: var(--t-2); }

/* Nebenzeit-Rabatt.

   Er steht am Termin und in der Zusammenfassung. Ohne die Begründung
   in der Zusammenfassung sähe ein durchgestrichener Preis nach einem
   Fehler aus — der Kunde soll wissen, WARUM es billiger ist. */
body.ph .ph-book .time-btn.hat-rabatt { border-color: var(--a-tat); }
body.ph .ph-book .time-btn .tb-rab {
  display: block; margin-top: .12rem;
  font-size: .66rem; font-style: normal; font-weight: 700;
  letter-spacing: .02em; color: var(--a-tat);
}
body.ph .ph-book .time-btn.sel .tb-rab { color: inherit; }
body.ph .ph-book .sum-rab {
  display: block; margin-top: .18rem;
  font-size: .74rem; font-style: normal; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--a-tat);
}

/* ====================================================================
   Vier Stellen, die außerhalb der Farbschichten stehen

   Sie haben ihre Farben fest im Stylesheet und lassen sich deshalb
   nicht über Tokens erreichen. Zwei davon sieht der Kunde erst NACH
   dem Buchen — dort schaut beim Bauen niemand hin.
   ==================================================================== */

/* 1 · Kategoriekarten in der Leistungswahl standen auf background:#fff.
       Zwei weiße Kacheln neben einer bernsteinfarbenen sahen aus, als
       wären sie abgeschaltet. */
body.ph .ph-book .sp-cat {
  background: var(--f-zart);
  border-color: var(--r-fein);
  color: var(--t-1);
}
body.ph .ph-book .sp-cat:hover { background: var(--f-still); border-color: var(--a-tat); }
body.ph .ph-book .sp-cat.on,
body.ph .ph-book .sp-cat[aria-expanded="true"] { background: var(--a-wahl); border-color: var(--a-wahl-rand); }

/* 2 · Der Live-Hinweis. Er meldet, wenn der Salon während der Buchung
       etwas ändert — und stand als heller Balken quer über der Seite.
       Rot und Grün bleiben als Bedeutung erhalten, aber gedämpft auf
       dunklem Grund statt als leuchtende Fläche. */
body.ph .ph-book .bk-live {
  background: rgba(179, 69, 61, .14);
  border-color: #B3453D;
  color: #F0A9A2;
  box-shadow: none;
}
body.ph .ph-book .bk-live button { color: #F0A9A2; }
body.ph .ph-book .bk-live.ok {
  background: rgba(46, 160, 96, .14);
  border-color: #2EA060;
  color: #93D9B0;
  box-shadow: none;
}
body.ph .ph-book .bk-live.ok button { color: #93D9B0; }

/* 3 · Das Bestätigungsfenster. Es hängt an <body>, nicht im
       Buchungsbereich — deshalb greift dort keine der vier
       Farbschichten, und es blieb weiß.

       Der Haken bleibt grün: Das ist eine Bedeutung, keine Marke. Der
       Hauptknopf wird bernstein — ein sattgrüner Knopf ist auf warmem
       Schwarz ein Fremdkörper. */
body.ph .bk-done { background: rgba(10, 8, 6, .72); }
body.ph .bk-done .bd-karte {
  background: #17120E;
  border: 1px solid rgba(240, 144, 32, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
body.ph .bk-done h3 { color: #F6F0E6; }
body.ph .bk-done .bd-sub,
body.ph .bk-done .bd-mail,
body.ph .bk-done .bd-ref,
body.ph .bk-done .bd-liste dt { color: #ADA08E; }
body.ph .bk-done .bd-liste dd,
body.ph .bk-done .bd-mail b { color: #F6F0E6; }
body.ph .bk-done .bd-liste,
body.ph .bk-done .bd-liste > div { border-color: rgba(240, 144, 32, .14); }
body.ph .bk-done .bd-x {
  background: transparent; border-color: rgba(240, 144, 32, .22); color: #ADA08E;
}
body.ph .bk-done .bd-x:hover { background: rgba(240, 144, 32, .12); color: #F6F0E6; }
body.ph .bk-done .bd-neu { background: #F09020; color: #1A1208; }
body.ph .bk-done .bd-neu:hover { background: #FFA83C; }
body.ph .bk-done .bd-storno { border-color: rgba(240, 144, 32, .22); color: #ADA08E; }
body.ph .bk-done .bd-storno:hover { border-color: #F09020; color: #F6F0E6; }
body.ph .bk-done .bd-demo { color: #E0B24E; }

/* 4 · Das Auswahlkästchen an jeder Leistung stand auf background:#fff.
       Zwei leuchtende Quadrate auf dunklen Karten — sie zogen mehr
       Aufmerksamkeit als der Leistungsname daneben. */
body.ph .ph-book .svc-opt .o-mark {
  background: rgba(0, 0, 0, .35);
  border-color: var(--r-klar);
}
body.ph .ph-book .svc-opt:hover .o-mark { border-color: var(--a-tat); }
body.ph .ph-book .svc-opt.on .o-mark::after { border-color: #1A1208; }

/* ====================================================================
   Was `npm run hell` gefunden hat

   Dreizehn Stellen tragen ihre Farbe fest im Stylesheet und sind über
   kein Token zu erreichen. Sie stehen hier zusammen, nicht verstreut:
   Beim nächsten Salon wird dieser Block angesehen, nicht die ganze
   website.css durchsucht.
   ==================================================================== */

/* Die Kopfzeile kippt beim Scrollen auf Weiß mit dunkler Schrift. Auf
   den Unterseiten (Impressum, Storno, Bewertung) ist sie von Anfang an
   gescrollt — dort stand also durchgehend ein weißer Balken über einer
   dunklen Seite. */
body.ph #header.scrolled {
  background: rgba(16, 13, 11, .88);
  border-bottom-color: rgba(240, 144, 32, .14);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .45);
}
body.ph #header.scrolled .nav-links a { color: var(--text-dim); }
body.ph #header.scrolled .nav-links a:hover,
body.ph #header.scrolled .nav-links a.active { color: var(--text); }
body.ph #header.scrolled .nav-links a.active::after { background: var(--marke); }
body.ph #header.scrolled .nav-right .btn-gold { border-color: var(--marke); color: var(--marke); }
body.ph #header.scrolled .nav-right .btn-gold:hover { background: var(--marke); color: #1A1208; }
body.ph #header.scrolled .menu-btn span { background: var(--text); }

/* Der Platzhalter der Karte, solange der Besucher nicht zugestimmt hat.
   Ein hellgrauer Kasten quer über dem Kontaktbereich. */
body.ph .embed-ph { background: var(--panel); color: var(--text-dim); }

/* Kontaktbereich: Angaben links, Formular rechts. Beide standen auf
   background:#fff — zwei große weiße Blöcke unter einer dunklen Seite. */
body.ph .ph-info-card,
body.ph .ph-form-card {
  background: var(--bg-warm);
  border-color: rgba(240, 144, 32, .14);
  box-shadow: none;
  color: var(--text);
}

/* Bildkarussell: #eee ist der Grund, der VOR dem Bild steht. Beim Laden
   blitzt er kurz auf, und wo ein Bild fehlt, bleibt er stehen. */
body.ph .ph-car-slide,
body.ph .car-slide { background: var(--panel-2); border-color: rgba(240, 144, 32, .12); }

/* Die Fragen unter dem Buchungsassistenten („Welche Leistung soll ich
   wählen?"). --panel greift hier nicht, weil styles.css es setzt, bevor
   marke.css es umdefiniert — der Wert wird zur Laufzeit aufgelöst, aber
   auf body.ph ist --panel bereits hell. */
body.ph details { background: var(--bg-warm); border-color: rgba(240, 144, 32, .14); }
body.ph details summary { color: var(--text); }
body.ph details[open] { background: var(--panel); }

/* Der Bewertungskasten mit den Sternen. */
body.ph .ph-rating .rt-box {
  background: var(--bg-warm);
  border-color: rgba(240, 144, 32, .14);
  box-shadow: none;
  color: var(--text);
}

/* Die Karte auf der Bewertungsseite — sie zeigt auch die Meldung
   „Diese Einladung ist nicht gültig". */
body.ph .ph-book .rv-karte {
  background: var(--f-karte);
  border-color: var(--r-fein);
  box-shadow: none;
  color: var(--t-1);
}

/* Der Storno-Knopf. Er war weiß gefüllt statt umrandet — auf dunklem
   Grund die auffälligste Fläche der ganzen Seite, obwohl Stornieren
   nicht die Haupthandlung ist. */
body.ph #cancelBtn,
body.ph .ph-book .btn-ghost {
  background: transparent;
  border: 1px solid var(--r-klar);
  color: var(--t-1);
}
body.ph #cancelBtn:hover,
body.ph .ph-book .btn-ghost:hover { border-color: var(--a-tat); color: var(--t-1); }

/* Die Ziffern in der Schrittleiste des Assistenten: weiße Kreise. */
body.ph .ph-book .stepper .s .b {
  background: rgba(0, 0, 0, .35);
  border-color: var(--r-klar);
  color: var(--t-2);
}
body.ph .ph-book .stepper .s.active .b { color: #1A1208; }

/* Nachtrag: Diese fünf haben je eine genauere Regel, die die obige
   überstimmt. Die Wahl muss deshalb hier genauso genau sein. */

/* Unterseiten ohne Hero-Bild bekamen die Kopfzeile von Anfang an hell —
   „sonst steht helle Schrift auf hellem Grund". Bei dunkler Gestaltung
   gilt das umgekehrt. */
body.ph:not(.has-hero) #header {
  background: rgba(16, 13, 11, .88);
  border-bottom-color: rgba(240, 144, 32, .14);
}
body.ph:not(.has-hero) #header .nav-links a { color: var(--text-dim); }
body.ph:not(.has-hero) #header .nav-links a:hover,
body.ph:not(.has-hero) #header .nav-links a.active { color: var(--text); }
body.ph:not(.has-hero) #header .nav-right .btn-gold { border-color: var(--marke); color: var(--marke); }
body.ph:not(.has-hero) #header .menu-btn span { background: var(--text); }

/* Die Fragen unter dem Assistenten. */
body.ph .ph-book .faq details { background: var(--f-karte); border-color: var(--r-fein); }
body.ph .ph-book .faq details summary { color: var(--t-1); }

/* Die Galerie. #eee ist der Grund vor dem Bild — er blitzt beim Laden
   auf und bleibt stehen, wo ein Bild fehlt. */
body.ph #galerie .car-slide { background: var(--panel-2); border-color: rgba(240, 144, 32, .12); box-shadow: none; }

/* Die Felder des Kontaktformulars. */
body.ph .ph-fld input,
body.ph .ph-fld textarea {
  background: rgba(0, 0, 0, .28);
  border-color: rgba(240, 144, 32, .16);
  color: var(--text);
}
body.ph .ph-fld input::placeholder,
body.ph .ph-fld textarea::placeholder { color: var(--text-faint); }
body.ph .ph-fld input:focus,
body.ph .ph-fld textarea:focus { border-color: var(--marke); background: rgba(0, 0, 0, .4); }

/* Die Pfeilknöpfe am Bildkarussell. */
body.ph .ph-car-nav {
  background: rgba(16, 13, 11, .82);
  border-color: rgba(240, 144, 32, .2);
  color: var(--text);
  box-shadow: none;
}
body.ph .ph-car-nav:hover { background: var(--marke); color: #1A1208; }

/* Die Pfeilknöpfe des zweiten Karussells. Dieselbe Rolle wie
   `.ph-car-nav`, aber eine eigene Regel — und in der Galerie noch eine
   dritte (`body.ph #galerie .car-nav`), die beide überstimmt. */
body.ph #galerie .car-nav,
body.ph .car-nav {
  background: rgba(16, 13, 11, .82);
  border-color: rgba(240, 144, 32, .2);
  color: var(--text);
  box-shadow: none;
}
body.ph #galerie .car-nav:hover,
body.ph .car-nav:hover { background: var(--marke); color: #1A1208; }

/* Ein ausgebuchter Tag im Kalender war blassrosa hinterlegt — auf hellem
   Grund eine dezente Warnung, auf dunklem ein heller Fleck. */
body.ph .ph-book .cal-day.full {
  background: rgba(179, 69, 61, .14);
  border-color: rgba(179, 69, 61, .38);
}
body.ph .ph-book .cal-day.full .dd { color: var(--t-2); }

/* Der Kartenbereich im Kontaktabschnitt. #eee steht dort, bevor die
   Karte geladen ist — und bleibt stehen, solange der Besucher der
   Einbindung nicht zugestimmt hat. Das ist der Normalfall. */
body.ph .ph-map { background: var(--panel-2); }
body.ph .embed-ph p { color: var(--text-dim); }

/* Das Lichtfenster der Handwerk-Karten war durchscheinend — der Text
   der Seite dahinter schlug durch und machte beides unleserlich. */
body.ph .ph-modal { background: rgba(8, 6, 5, .82); }
body.ph .ph-modal-box {
  background: #17120E;
  border: 1px solid rgba(240, 144, 32, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
body.ph .ph-modal-box h4 { color: var(--text); }
body.ph .ph-modal-box p  { color: var(--text-dim); }

/* Ton-Schalter am Video im Feed-Streifen.

   Alle Filme laufen stumm — anders liesse der Browser sie nicht von
   selbst starten. Ein Klick auf die Kachel schaltet den Ton an, ein
   zweiter wieder aus; das Bild läuft in beiden Fällen weiter. */
body.ph .ph-car-slide.hat-ton { cursor: pointer; }
body.ph .ph-car-ton {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
body.ph .ph-car-ton svg { width: 16px; height: 16px; }
body.ph .ph-car-slide.hat-ton:hover .ph-car-ton { background: rgba(0, 0, 0, .75); }
body.ph .ph-car-ton.an {
  background: var(--marke); border-color: var(--marke); color: #1A1208;
}
/* Am Handy ist der Schalter etwas grösser — dort ist er zugleich der
   Hinweis, dass es überhaupt etwas zu hören gibt. */
@media (max-width: 640px) {
  body.ph .ph-car-ton { width: 40px; height: 40px; }
  body.ph .ph-car-ton svg { width: 19px; height: 19px; }
}

/* Bildunterschrift im Hero.

   Sie sagt, welcher der beiden Salons gerade zu sehen ist — vorher sah
   man zwei Innenaufnahmen und wusste nicht, welche zu welchem Haus
   gehört.

   Sie steht IM Inhalt zwischen Untertitel und Knöpfen, nicht frei über
   dem Bild. Frei stehend war sie am Handy eingequetscht: Untertitel und
   Knöpfe wandern mit der Fensterhöhe, eine feste Höhe traf deshalb
   irgendwann mitten hinein. Im Fluss kann das nicht passieren. */
body.ph .ph-hero-cap {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  margin: 1.1rem 0 .2rem;
  padding: .46rem .95rem;
  border-radius: 999px;
  background: rgba(10, 8, 6, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 144, 32, .22);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
/* Ein Punkt in Bernstein davor — dasselbe Zeichen wie im Umschalter des
   Backoffice, damit „Standort" überall gleich aussieht. */
body.ph .ph-hero-cap::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--marke);
  flex: none;
}
body.ph .ph-hero-cap[hidden] { display: none; }

@media (max-width: 640px) {
  body.ph .ph-hero-cap {
    font-size: .66rem;
    padding: .4rem .8rem;
    margin: .9rem 0 .1rem;
    letter-spacing: .07em;
    /* Bei sehr langen Anschriften lieber umbrechen als überstehen. */
    white-space: normal;
  }
}

/* Der Knopf der unteren Leiste, solange er den Assistenten spiegelt.
   Fehlt noch eine Angabe, ist er gedämpft statt verschwunden — ein
   Knopf, der plötzlich weg ist, verunsichert mehr als einer, der
   sichtbar noch nicht kann. */
body.ph .cut-balken-knopf.aus {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: auto;
}

/* ====================================================================
   Handwerk: Fotos statt Zeichnung, wo eines da ist

   Drei der sechs Leistungen haben ein echtes Foto. Die übrigen behalten
   ihre Zeichnung — bis Bilder da sind. Beide Fassungen sitzen im selben
   Kartenraster und sind gleich hoch, damit die Reihe ruhig bleibt.
   ==================================================================== */
body.ph #services .hw-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
body.ph #services .hw-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Zurückgenommen, damit Ziffer, Titel und Zeichnung darüber lesbar
     bleiben — das Foto ist Grund, nicht Hauptsache. */
  opacity: .42;
  filter: saturate(.85) contrast(1.05);
  transform: scale(1.04);
  transition: opacity 520ms var(--ease), transform 900ms var(--ease);
}
body.ph #services .ph-spec:hover .hw-bild img,
body.ph #services .ph-spec:focus-visible .hw-bild img {
  opacity: .62;
  transform: scale(1);
}
/* Von links nach rechts abdunkeln: links stehen Zeichnung und Titel. */
body.ph #services .hw-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #100D0B 6%, rgba(16, 13, 11, .82) 42%, rgba(16, 13, 11, .35) 100%);
}
/* Karten mit Foto brauchen den Lichtschein nicht — er läge auf dem Bild. */
body.ph #services .ph-spec:has(.hw-bild)::before { display: none; }

@media (max-width: 900px) {
  /* Am Handy steht der Text über der ganzen Breite, das Bild muss
     deshalb stärker zurücktreten. */
  body.ph #services .hw-bild img { opacity: .3; }
  body.ph #services .hw-bild::after {
    background: linear-gradient(180deg, rgba(16, 13, 11, .5) 0%, #100D0B 78%);
  }
}

/* Das Foto im Lichtfenster — breit, angeschnitten, mit weichem Auslauf
   nach unten, damit die Überschrift darunter nicht dagegen stößt. */
body.ph .ph-modal-box .ph-modal-foto {
  width: calc(100% + 4rem);
  margin: -2rem -2rem 1.2rem;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
}


/* ====================================================================
   Drei Nachbesserungen für das Handy
   ==================================================================== */

/* 1 · Das Logo wurde beim Scrollen schwarz.

   `filter: brightness(0)` stammt aus der hellen Vorlage: Dort kippte die
   Kopfzeile beim Scrollen auf Weiß, und das Logo musste dunkel werden.
   Unsere Kopfzeile bleibt dunkel — der Filter machte das bernsteinfarbene
   Zeichen unsichtbar. */
body.ph #header.scrolled .brand .logo-img,
body.ph:not(.has-hero) #header .brand .logo-img { filter: none; }

/* 2 · Am Handy fehlte jeder Hinweis, dass die Bühne zwei Bilder zeigt.

   Gewischt werden konnte immer, aber die Pfeile waren ausgeblendet und
   die Punkte lagen hinter der Buchungsleiste. Wer nicht zufällig wischt,
   erfährt nie, dass es zwei Standorte gibt. */
@media (max-width: 860px) {
  /* Die Pfeile an die Bildränder, auf halbe Höhe des freien oberen
     Drittels. Unten war kein Platz: Dort stehen Schriftzug, Standort,
     zwei Knöpfe und die Buchungsleiste dicht übereinander — die Pfeile
     lagen auf „Termin buchen". Am Bildrand ist es zudem das Muster,
     das jeder kennt. */
  body.ph .ph-hero-nav {
    display: grid;
    width: 42px;
    height: 42px;
    top: 34%;
    bottom: auto;
    transform: none;
    background: rgba(10, 8, 6, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(240, 144, 32, .32);
    color: var(--text);
  }
  body.ph .ph-hero-nav.prev { left: .9rem; right: auto; }
  body.ph .ph-hero-nav.next { right: .9rem; left: auto; }

  /* Die Punkte in die Lücke zwischen Standortschild und Knöpfen —
     ganz unten lagen sie hinter der Buchungsleiste und waren nie zu
     sehen. Links bündig zum Schild darüber. */
  body.ph .ph-hero-dots {
    bottom: 13.6rem;
    justify-content: flex-start;
    padding-left: 1.35rem;
  }
  body.ph .ph-hero-dots button { width: 22px; height: 4px; border-radius: 2px; }
  body.ph .ph-hero-dots button.on { width: 34px; background: var(--marke); }
}

/* =====================================================================
   Wenn eine Buchung nicht durchgeht

   Der häufigste Fall ist unspektakulär und trotzdem der teuerste: Zwei
   Kunden wählen denselben Platz, der zweite bekommt „gerade vergeben".
   Sieht er die Zeile nicht, drückt er noch einmal und geht dann.

   Deshalb steht sie über der Leiste mit dem Knopf, in Rot auf gedämpftem
   Grund — die einzige Stelle im ganzen Auftritt, an der Rot vorkommt.
   ===================================================================== */
body.ph .ph-book #bookErr {
  margin: 0 0 .8rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(224, 108, 92, .45);
  border-left: 3px solid #E06C5C;
  border-radius: 10px;
  background: rgba(224, 108, 92, .10);
  color: #F0B4AA;
  font-size: .95rem;
  line-height: 1.5;
}

/* =====================================================================
   Hinweis: Dieser Termin liegt schon innerhalb der Storno-Frist

   Der Vorlauf steht auf 0 Minuten, die Frist auf 24 Stunden — wer den
   frühesten freien Termin nimmt, bucht einen, den er online nie mehr
   ändern kann. Die Regel bleibt; der Kunde soll es nur vorher wissen.

   Bernstein, nicht rot: Es ist kein Fehler, sondern eine Bedingung.
   ===================================================================== */
body.ph .ph-book .bk-frist {
  margin: 0 0 .9rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(240, 144, 32, .38);
  border-left: 3px solid var(--marke);
  border-radius: 10px;
  background: rgba(240, 144, 32, .09);
  color: var(--t-1);
  font-size: .86rem;
  line-height: 1.55;
}
body.ph .ph-book .bk-frist strong { color: var(--marke); }

/* =====================================================================
   Rückfrage vor dem Stornieren

   Stand als nackter confirm() des Browsers da: graue Systemschrift mit
   der Adresse der Seite darüber, mitten in einem Auftritt, der sonst
   durchgestaltet ist. Ausgerechnet an der Stelle, an der ein Kunde
   einen Termin absagt — der schlechteste denkbare Eindruck.
   ===================================================================== */
body.ph .ph-book .cx-frage {
  margin-top: 1.1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(224, 108, 92, .4);
  border-radius: 14px;
  background: rgba(224, 108, 92, .08);
}
body.ph .ph-book .cx-text {
  margin: 0 0 .95rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--t-1);
}
body.ph .ph-book .cx-knoepfe {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
/* Das Absagen ist die schwerere Handlung — sie steht rechts und trägt
   die Warnfarbe, nicht die Marke. Bernstein gehört dem Buchen. */
body.ph .ph-book .btn-weg {
  background: #B3453D;
  border: 1px solid #B3453D;
  color: #FFF2EF;
  font-weight: 700;
}
body.ph .ph-book .btn-weg:hover { background: #C4544B; border-color: #C4544B; }
@media (max-width: 460px) {
  body.ph .ph-book .cx-knoepfe .btn { flex: 1 1 100%; text-align: center; }
}

/* =====================================================================
   Der grüne Schein um den Buchungsknopf

   `website.css` legt dem wichtigsten Knopf der Seite einen Schatten in
   Prestiges Grün unter — `rgba(30,122,70,.28)`, dazu ein dunkelgrünes
   `:hover`. Die Fläche selbst ist längst bernstein, der Schein blieb.

   Auf Bildschirmfotos sah der Knopf dadurch grün aus, und ich habe ihn
   zweimal für kaputt gehalten, bevor ich nachgemessen habe. Es ist
   dieselbe Falle wie bei Fundort 13: eine rohe Farbe des Vorgängers,
   an der jedes Token vorbeigeht.

   Grün bleibt erlaubt, wo es eine BEDEUTUNG hat — der Haken nach der
   Buchung, „bezahlt" im Backoffice. Als Marke hat es hier nichts zu
   suchen.
   ===================================================================== */
body.ph .ph-book .wz-next:not(:disabled) {
  box-shadow: 0 6px 18px rgba(240, 144, 32, .24);
}
body.ph .ph-book .wz-next:not(:disabled):hover {
  box-shadow: 0 8px 22px rgba(240, 144, 32, .32);
  background: linear-gradient(135deg, #FFB65A, #F09020);
}
body.ph .ph-book .btn-gold:not(:disabled):hover {
  background: linear-gradient(135deg, #FFB65A, #F09020);
}

/* =====================================================================
   Zwei Karten nebeneinander

   Bis 19.08.2026 stand unter dem Kontaktformular EINE Karte, und die
   zeigte die Innere Stadt. Der zweite Salon kam auf der ganzen
   Startseite genau einmal vor — in der Buchungsleiste, ohne
   Postleitzahl. Wer den Laden in der Landstraße suchte, fand ihn nicht.

   Beide nebeneinander, jede mit ihrer Anschrift darüber: Erst dann ist
   auf einen Blick zu sehen, dass es zwei Häuser gibt.

   Die Adresse in der Karten-Adresse ist die Anschrift selbst, kein
   `pb=`-Klumpen mit Koordinaten. Der lässt sich nur von Hand in Google
   Maps erzeugen und beim nächsten Salon nicht wiederverwenden — die
   Anschrift dagegen steht ohnehin schon in der Datenbank.
   ===================================================================== */
body.ph .ph-karten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
body.ph .ph-karte-block { margin: 0; }
body.ph .ph-karte-block figcaption {
  margin: 0 0 .55rem;
  font-size: .88rem;
  color: var(--t-2);
  letter-spacing: .01em;
}
body.ph .ph-karte-block figcaption strong { color: var(--marke); font-weight: 700; }
body.ph .ph-karten .ph-map { margin-top: 0; height: 300px; }

/* Untereinander, sobald zwei Karten zu schmal würden — bei 300 Pixeln
   Höhe und halber Breite wäre von der Umgebung nichts mehr zu erkennen. */
@media (max-width: 760px) {
  body.ph .ph-karten { grid-template-columns: 1fr; gap: 1.4rem; }
  body.ph .ph-karten .ph-map { height: 260px; }
}

/* Beide Häuser nebeneinander in der Fußzeile.

   Dort stand bis 19.08.2026 nur die Innere Stadt — mit Anschrift, aber
   ohne Hinweis, dass es ein zweites Haus gibt. Wer unten nachsieht, wo
   der Salon ist, bekam die halbe Antwort. */
body.ph .foot-ort-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.4rem;
  margin-bottom: 1rem;
}
body.ph .foot-ort strong {
  display: block;
  color: var(--marke);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
body.ph .foot-ort p { margin: 0 0 .25rem; }
body.ph .foot-ort .foot-zeit { color: var(--t-3); font-size: .84rem; }

/* Unter 520 Pixeln stünden zwei Anschriften je zwei Wörter breit —
   dann lieber untereinander. */
@media (max-width: 520px) {
  body.ph .foot-ort-paar { grid-template-columns: 1fr; gap: .9rem; }
}