/* =========================================================
   Friseursalon Swen Bruhn
   Marke: Rot aus dem Original-Logo (#BF0707 / #9E0605 / #7C0405),
   dazu Weiss und Nahezu-Schwarz. Ein Akzent, keine Zweitfarbe.
   Radius-System: durchgaengig 0. Keine Ausnahmen.
   Icons: Tabler Icons (MIT), inline eingebunden.
   ========================================================= */

/* ---------- Schrift ---------- */
/* Archivo liegt lokal, nicht bei Google. Zwei Gruende: die
   Content-Security-Policy der Domain erlaubt nur eigene Quellen
   (style-src / font-src 'self'), und ohne Google-Aufruf gibt es kein
   DSGVO-Thema. Variable Schrift mit Breiten- und Gewichtsachse. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Bewusst nur Hellmodus: die Seite soll immer weiss und freundlich wirken,
     auch wenn das Betriebssystem auf Dunkelmodus steht. */
  color-scheme: light;

  /* Markenrot, direkt aus dem Logoverlauf abgetastet */
  --red:        #9E0605;
  --red-bright: #BF0707;
  --red-deep:   #7C0405;
  --red-ink:    #4A0203;

  /* Semantische Flaechen */
  --bg:      #FFFFFF;
  --bg-2:    #F6F6F7;
  --bg-3:    #ECECEE;

  --fg:      #131316;
  --fg-2:    #55565C;
  --fg-3:    #6B6C73;   /* 5.2:1 auf Weiss, WCAG AA auch bei Kleintext */

  --line:     rgba(19, 19, 22, .14);
  --line-2:   rgba(19, 19, 22, .30);
  --line-inv: rgba(255, 255, 255, .16);

  --accent:      var(--red);
  --accent-hi:   var(--red-bright);
  --accent-text: #FFFFFF;

  --ok:    #1F7A3D;
  --ok-bg: rgba(31, 122, 61, .14);

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --sec:  clamp(4rem, 8vw, 7.5rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* Mit Hinweisband klebt mehr als der Kopf. Nachgemessen wird in
     main.js, das hier gilt, wenn das Skript ausfaellt. */
  overflow-x: clip; /* clip statt hidden: kein neuer Scroll-Container, sticky bleibt heil */
}
html.mit-band { scroll-padding-top: 140px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* height:auto ist hier kein Beiwerk: Die Bilder tragen width- und
   height-Attribute, und die wirken wie CSS-Angaben. Ohne diese Zeile
   behaelt ein Bild seine 1080 Punkte Hoehe, waehrend die Breite auf
   die Spalte schrumpft · und ein aspect-ratio weiter unten kommt gar
   nicht erst zum Zug, weil es nur greift, wenn eine der beiden
   Angaben 'auto' ist. Wo eine Hoehe gebraucht wird (Kopfbild), setzt
   die Regel dort sie selbst. */
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.h-xl { font-size: clamp(2.15rem, 1.35rem + 3.1vw, 3.4rem); font-weight: 800; letter-spacing: -.032em; }
.h-lg { font-size: clamp(1.85rem, 1.3rem + 2.5vw, 3rem); letter-spacing: -.026em; }
.h-md { font-size: clamp(1.45rem, 1.2rem + 1.15vw, 2rem); }
.h-sm { font-size: clamp(1.1rem, 1.03rem + .34vw, 1.3rem); letter-spacing: -.012em; }

.lead { font-size: clamp(1.05rem, .99rem + .38vw, 1.22rem); line-height: 1.5; color: var(--fg-2); max-width: 48ch; }
.muted { color: var(--fg-2); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.bg-2 { background: var(--bg-2); }

.hero__grid > *, .duo > *, .about > *, .contact > *,
.price-cols > *, .footer__grid > *, .factbar__grid > * { min-width: 0; }

.sec-head { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head p { margin-top: 1rem; }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- Buttons (Radius 0, wie alles) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.5rem;
  border: 2px solid transparent;
  font-size: .96rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.btn--ghost { border-color: var(--line-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--accent); background: var(--bg-2); color: var(--accent); }

.btn--inv { background: #fff; color: var(--red-ink); border-color: #fff; }
.btn--inv:hover { background: transparent; color: #fff; }

.btn--ghost-inv { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost-inv:hover { border-color: #fff; background: #fff; color: var(--red-ink); }

.btn--sm { padding: .6rem 1.05rem; font-size: .88rem; border-width: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Kopf und Hinweisband kleben gemeinsam ---------- */
/* Nicht der Kopf klebt, sondern der Rahmen um Kopf und Hinweisband.
   Zwei getrennte klebende Elemente muessten sich ihre Hoehen
   gegenseitig ausrechnen — der Kopf ist je nach Fenster und
   Schriftgroesse unterschiedlich hoch, das Band unter
   prefers-reduced-motion sogar deutlich. Ein Rahmen darum kostet
   keine Rechnung: klebt er, kleben beide, und in der richtigen
   Reihenfolge. */
.klebe {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.klebe.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(0,0,0,.06); }

/* ---------- Header ---------- */
/* position: static, damit das aufgeklappte Menue mit top:100% unter
   dem GANZEN Klebeblock aufgeht und nicht ueber dem Hinweisband —
   sonst deckt es genau den Hinweis zu, den es sichtbar machen soll. */
.header { background: var(--bg); }

.header__inner { display: flex; align-items: stretch; gap: 1.25rem; min-height: 74px; }

/* Original-Wortmarke auf dem Original-Rotverlauf */
.brand {
  display: flex; align-items: center;
  margin-right: auto;
  padding: .85rem 1.4rem;
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 52%, var(--red-deep) 100%);
  text-decoration: none;
  align-self: center;
}
.brand img { width: clamp(148px, 17vw, 196px); height: auto; }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .5rem .78rem;
  font-size: .945rem; font-weight: 500; white-space: nowrap;
  text-decoration: none; color: var(--fg-2);
  transition: color .18s var(--ease), box-shadow .18s var(--ease);
}
.nav a:hover { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

.header__cta { display: flex; align-items: center; gap: .55rem; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--line-2); background: transparent; cursor: pointer;
  place-items: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--fg); margin: 3.5px auto; transition: transform .25s var(--ease), opacity .18s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1010px) {
  .nav { display: none; }
  .header__cta .is-long { display: none; }
  .burger { display: grid; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .4rem var(--gut) 1rem;
    box-shadow: 0 14px 30px rgba(0,0,0,.1);
  }
  .nav.is-open a { padding: .9rem .2rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav.is-open a:last-child { border-bottom: 0; }
}

/* ---------- Hinweis-Laufband ---------- */
/* Bewegung ist hier motiviert: das Band zeigt, dass die Angaben gepflegt sind,
   und macht mehrere Hinweise sichtbar, ohne Platz zu kosten. */
.ticker {
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.ticker__label {
  flex: none; display: flex; align-items: center; gap: .55rem;
  padding: .92rem clamp(1rem, 3vw, 1.55rem);
  background: rgba(0, 0, 0, .24);
  font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker__label svg { width: 18px; height: 18px; flex: none; }

/* Beim Weiterlesen schrumpft das Band, gemessen von 51 auf 35 Punkte.
   Oben soll es auffallen, weiter unten nur noch da sein · geklebt
   bleibt es in beiden Zuständen. Die Schwellen setzt main.js.

   Der Übergang ist kein Schmuck. Ein klebendes Element steht
   trotzdem oben im Textfluss: Wird es 16 Punkte flacher, rutscht
   alles darunter um 16 Punkte hoch. Ohne Übergang ist das ein Ruck,
   mit ihm geht er im Bildlauf unter, der ohnehin läuft.

   Deshalb steht das Ganze hinter no-preference. Wer keine Bewegung
   will, bekäme den Sprung hart · und untereinander stehende Hinweise
   würden von 'padding-block' sogar höher statt flacher, weil die
   Regel hier die aus dem reduced-motion-Block überstimmt. Für diese
   Einstellung bleibt das Band einfach, wie es ist. */
@media (prefers-reduced-motion: no-preference) {
  .ticker__label,
  .ticker__item {
    transition: padding-block .22s var(--ease), font-size .22s var(--ease);
  }
  .klebe.is-schmal .ticker__label { padding-block: .48rem; font-size: .78rem; }
  .klebe.is-schmal .ticker__label svg { width: 15px; height: 15px; }
  .klebe.is-schmal .ticker__item { padding-block: .48rem; font-size: clamp(.9rem, .95vw, .97rem); }
  .klebe.is-schmal .ticker__item::after { height: 14px; }
}

/* Das Zeichen blinzelt alle paar Sekunden.
   Der laufende Text sagt "hier steht etwas", das Blinzeln sagt
   "und es ist wichtig". Selten genug, um nicht zu flackern. */
@media (prefers-reduced-motion: no-preference) {
  .ticker__label svg { animation: ticker-blinzeln 5s var(--ease) infinite; }
}
@keyframes ticker-blinzeln {
  0%, 84%, 100% { opacity: 1; transform: scale(1); }
  90%           { opacity: .5; transform: scale(1.22); }
}
.ticker__viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.ticker__track {
  display: flex; flex: none; align-items: center;
  animation: ticker-run 46s linear infinite;
}
/* Ein Durchlauf. Steht zweimal im Markup, die Kopie erzeugt den nahtlosen
   Umlauf. Als Klasse, nicht als style-Attribut: die Content-Security-Policy
   der Domain erlaubt kein 'unsafe-inline' fuer Styles. */
.ticker__set { display: flex; flex: none; align-items: center; }
/* Pause zum Lesen nur auf Geraeten mit echtem Zeiger. Auf Touchscreens
   bleibt :hover nach einer Beruehrung haengen und wuerde das Band
   dauerhaft anhalten. */
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: center;
  padding-block: .92rem;
  font-size: clamp(.99rem, 1.1vw, 1.09rem); font-weight: 500;
  line-height: 1.3; white-space: nowrap;
}
.ticker__item::after {
  content: ""; flex: none;
  width: 1px; height: 17px;
  background: rgba(255, 255, 255, .45);
  margin-inline: clamp(1.3rem, 3vw, 2.4rem);
}
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Schmale Displays: nur das Symbol, der Text kostet ein Drittel der Breite.
   Der zugaengliche Name steckt im aria-label der Sektion. */
@media (max-width: 560px) {
  .ticker__label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ticker__label { padding-inline: .85rem; }
  .ticker__item { font-size: .96rem; }
}

/* Bis zum 21.08.2026 stand ein einzelner Hinweis still ('ticker--ruhig'):
   Ein Umlauf braucht einen Durchlauf, der breiter ist als das Fenster, und
   ein Satz ist das nicht. Jetzt wiederholt main.js den Satz so oft, bis er
   reicht — die Fensterbreite kennt nur der Browser. Ein Hinweis laeuft
   damit wie fuenf, und das Band bewegt sich immer. */

/* Ohne Bewegung laeuft nichts durch. Dann werden alle Hinweise
   untereinander gezeigt, statt nur den ersten sichtbar zu lassen und den
   Rest abzuschneiden. Die Kopie fuer den Umlauf entfaellt. */
@media (prefers-reduced-motion: reduce) {
  /* flex:none aufheben, sonst bleibt die Spur auf Maximalbreite und der
     Text kann trotz white-space:normal nicht umbrechen. */
  .ticker__track { animation: none; display: block; flex: 1 1 auto; min-width: 0; }
  .ticker__track > [aria-hidden="true"] { display: none; }
  .ticker__set { display: block; }
  .ticker__viewport { overflow: visible; padding-block: .5rem; }
  .ticker__item { display: block; white-space: normal; padding-block: .22rem; }
  .ticker__item::after { display: none; }
  .ticker__item + .ticker__item {
    margin-top: .45rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(255, 255, 255, .3);
  }
}

/* ---------- Hero: asymmetrischer Split ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 5rem) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero__text { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { margin-bottom: 1.3rem; }
.hero h1 b { font-weight: 800; color: var(--accent); }
.hero .btn-row { margin-top: 2.1rem; }

/* Bild laeuft rechts aus dem Raster heraus bis an den Rand */
.hero__media { position: relative; align-self: stretch; }
.hero__media img {
  width: 100%; height: 100%;
  min-height: clamp(300px, 46vw, 560px);
  object-fit: cover; object-position: 42% 42%;
}
@media (min-width: 981px) {
  /* Bild bis an den rechten Viewportrand ziehen, ohne Ueberlauf zu erzeugen */
  /* 24px Ueberstand gleicht die Scrollbarbreite aus, overflow-x:clip schneidet ab */
  .hero__media { margin-right: calc(-24px - max(var(--gut), (100vw - var(--wrap)) / 2)); }
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__media { margin-inline: calc(50% - 50vw); width: 100vw; }
  .hero__media img { min-height: 300px; max-height: 62vh; }
}

/* ---------- Faktenleiste ---------- */
.factbar { background: var(--bg); border-block: 1px solid var(--line); }
.factbar__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
}
.factbar__item {
  background: var(--bg);
  padding: clamp(1.35rem, 2.6vw, 1.85rem) clamp(1.1rem, 2vw, 1.6rem);
  display: flex; gap: .8rem; align-items: flex-start;
}
.factbar__ico { width: 19px; height: 19px; flex: none; margin-top: .3rem; color: var(--fg-3); }
/* Kein h3: die Leiste ist keine Gliederungsebene, und ein h3 direkt
   nach der h1 bricht die Überschriftenfolge. */
.factbar__item .factbar__titel { font-size: .97rem; font-weight: 700; letter-spacing: -.005em; color: var(--fg); margin: 0; }
.factbar__item p { font-size: .89rem; line-height: 1.45; color: var(--fg-2); margin-top: .12rem; }

/* Statuspunkt: echter Zustand (offen / geschlossen), keine Deko */
.dot { width: 9px; height: 9px; flex: none; margin-top: .52rem; background: var(--fg-3); }
.dot.is-open   { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot.is-closed { background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(191,7,7,.22); }

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

/* ============================================================
   Die beiden Salons — drei Fassungen zur Auswahl
   ============================================================

   Bis zum 09.08.2026 stand hier ein Splitscreen mit je einem Foto
   als Hintergrund. Swen wollte die Unterscheidung nicht mehr ueber
   Bilder loesen. Geblieben ist die Aufgabe: Zwei Salons zeigen, die
   fast alles teilen und sich in wenigen Punkten unterscheiden.

   Welche Fassung laeuft, entscheidet ?salon=1|2|3 in index.php.
   Nach der Entscheidung bleiben eine Fassung hier und eine dort.
   ============================================================ */

/* ---------- Fassung 1 · Gegenstueck ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem, 2.2vw, 1.8rem); }
.duo__karte {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
/* Der Herrensalon traegt die Farbe, der Damensalon den Rahmen. Kein
   Bild, keine Kachelgrafik: Der Unterschied ist Flaeche gegen
   Kontur, und weil beide Karten sonst Zeile fuer Zeile gleich
   gebaut sind, sieht man das Gemeinsame zuerst. */
.duo__karte.ist-herren {
  background: linear-gradient(160deg, var(--red-bright) 0%, var(--red) 52%, var(--red-deep) 100%);
  color: #fff;
}
.duo__karte.ist-damen { background: var(--bg); border: 2px solid var(--accent); }

.duo__karte h3 { margin-bottom: .8rem; }
.duo__karte > p { font-size: .98rem; line-height: 1.6; max-width: 40ch; }
.duo__karte.ist-herren > p { color: rgba(255,255,255,.84); }
.duo__karte.ist-damen  > p { color: var(--fg-2); }

.duo__zeilen {
  margin: 1.6rem 0 0; padding-top: 1.2rem;
  display: grid; gap: .55rem; font-size: .93rem;
  border-top: 1px solid var(--line);
}
.duo__karte.ist-herren .duo__zeilen { border-top-color: rgba(255,255,255,.26); }
.duo__zeilen > div { display: flex; justify-content: space-between; gap: 1.25rem; }
.duo__zeilen dt { color: var(--fg-3); }
.duo__karte.ist-herren .duo__zeilen dt { color: rgba(255,255,255,.72); }
.duo__zeilen dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Der Knopf sitzt unten, auch wenn die eine Karte kuerzer ist als
   die andere: margin-top:auto in der Flex-Spalte. */
.duo__karte .btn-row { margin-top: auto; padding-top: 1.7rem; }

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

/* ---------- Preise ---------- */
.tabs { display: inline-flex; border: 2px solid var(--accent); background: var(--bg); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.tab {
  border: 0; background: transparent;
  padding: .72rem 1.5rem;
  font-size: .95rem; font-weight: 600; color: var(--fg-2); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tab + .tab { border-left: 2px solid var(--accent); }
.tab:hover { color: var(--accent); }
.tab[aria-selected="true"] { background: var(--accent); color: #fff; }

.panel[hidden] { display: none; }

.price-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 760px) { .price-cols { grid-template-columns: 1fr; } }

.price-group__title {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.012em;
  padding-bottom: .7rem; margin-bottom: .2rem;
  border-bottom: 2px solid var(--accent);
}
.price { display: flex; align-items: baseline; gap: .5rem; padding-block: .68rem; }
.price + .price { border-top: 1px solid var(--line); }
.price__name { min-width: 0; font-size: .975rem; }
.price__name small { display: block; font-size: .8rem; color: var(--fg-3); line-height: 1.3; margin-top: .08rem; }
.price__dots { flex: 1 1 auto; min-width: 1.25rem; border-bottom: 1px dotted var(--line-2); transform: translateY(-.3em); }
.price__val { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .975rem; }
.price__val i { font-style: normal; font-weight: 500; font-size: .82rem; color: var(--fg-3); margin-right: .16em; }

.price-hint { font-size: .9rem; margin-top: .85rem; color: var(--fg-2); }
.legal__back { margin-top: 2.25rem; }

.price-note {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 1.1rem 1.3rem;
  background: var(--bg-2); border-left: 4px solid var(--accent);
  font-size: .93rem; color: var(--fg-2); max-width: 70ch;
}
.price-note strong { color: var(--fg); font-weight: 700; }

/* ---------- Der Salon: versetzte Editorial-Komposition ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Ohne '>' : Die Absätze stehen seit dem 09.08.2026 in einem
   Behaelter, weil der die Pflegemarke traegt. Mit dem Kindzeichen
   griff die Regel nicht mehr, und zwei Absaetze klebten aneinander. */
.about__text p + p { margin-top: 1.05rem; }
.about__text p { color: var(--fg-2); line-height: 1.62; }
.about h2 { margin-bottom: 1.25rem; }

.quote { margin-top: 2rem; padding-left: 1.25rem; border-left: 4px solid var(--accent); }
.quote p { font-size: clamp(1.1rem, 1.02rem + .45vw, 1.32rem); font-weight: 600; line-height: 1.38; letter-spacing: -.015em; color: var(--fg); }
.quote footer { margin-top: .65rem; font-size: .88rem; color: var(--fg-3); }

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

/* ---------- Band zur Unterseite "Team und Einblicke" ----------
   Hier standen bis zum 09.08.2026 zwei volle Abschnitte. Was
   uebrigbleibt, darf keine dritte "Ueberschrift ueber Raster"-Form
   sein · sonst ist die Startseite zwar kuerzer, aber immer noch
   viermal gleich gebaut. Deshalb eine Zeile statt eines Blocks:
   Gesichter, Satz, Knopf. Die rote Linie darueber ist dieselbe wie
   ueber der Fusszeile. */
.mehr {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.1rem, 2.5vw, 2.25rem);
  border-top: 3px solid var(--accent);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Die Koepfe liegen uebereinander wie ein Stapel Karten. Der weisse
   Saum ist ein Schatten und kein Rahmen: ein Rahmen zaehlte zur
   Breite und liesse die Reihe bei jedem Kopf um zwei Punkte wachsen. */
.mehr__gesichter { display: flex; }
.mehr__kopf {
  width: clamp(48px, 8vw, 60px); height: clamp(48px, 8vw, 60px);
  flex: none; object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg);
}
.mehr__kopf + .mehr__kopf { margin-left: -.7rem; }

/* Der erste liegt obenauf, nicht der letzte.
   Ohne Zutun malt der Browser in Quelltextreihenfolge, der letzte
   Kopf deckt also alle davor zu — und der Stapel liest sich von
   rechts nach links, genau andersherum als die Liste auf team.php.
   Umgedrehte Stapelhoehe dreht ihn zurueck: der Erste liegt vorn,
   jeder weitere schiebt sich dahinter.
   z-index braucht ein positioniertes Element, darum relative. */
.mehr__kopf { position: relative; }
.mehr__kopf:nth-child(1) { z-index: 6; }
.mehr__kopf:nth-child(2) { z-index: 5; }
.mehr__kopf:nth-child(3) { z-index: 4; }
.mehr__kopf:nth-child(4) { z-index: 3; }
.mehr__kopf:nth-child(5) { z-index: 2; }
.mehr__kopf--leer {
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--accent);
  font-size: 1.35rem; font-weight: 800; font-stretch: 108%;
  line-height: 1;
}

.mehr__text h2 { letter-spacing: -.018em; }
.mehr__text p { margin-top: .35rem; color: var(--fg-2); font-size: .96rem; line-height: 1.55; max-width: 46ch; }
.mehr__tat { justify-self: end; }

/* Unter 760 Punkte reicht die Zeile nicht mehr: Der Knopf traegt
   drei Woerter, und links davor stehen fuenf Koepfe. */
@media (max-width: 760px) {
  .mehr { grid-template-columns: 1fr; gap: 1.1rem; }
  .mehr__tat { justify-self: stretch; }
  .mehr__tat .btn { width: 100%; justify-content: center; }
}

/* ---------- Schluss der Unterseite ---------- */
.weiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.weiter__wort { color: var(--fg-3); font-size: .95rem; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

.panel-box { background: var(--bg); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.25rem); }
.panel-box h3 { margin-bottom: 1.25rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hours-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hours-table th, .hours-table td { padding: .74rem .45rem; text-align: left; vertical-align: top; }
.hours-table thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3); border-bottom: 2px solid var(--fg); padding-bottom: .55rem;
}
.hours-table thead th:not(:first-child), .hours-table td:not(:first-child) { text-align: right; }
.hours-table tbody tr + tr { border-top: 1px solid var(--line); }
.hours-table td:first-child { font-weight: 600; white-space: nowrap; }
.hours-table td { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.hours-table td b { display: block; font-weight: 500; color: var(--fg); }
.hours-table tr.is-today { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--accent); }
/* Heutiger Tag: Markierung uebernimmt der rote Balken links, die Schrift
   bleibt auf voller Lesbarkeit statt in Akzentrot (Kontrast im Dunkelmodus). */
.hours-table tr.is-today td:first-child { color: var(--fg); font-weight: 700; }
.hours-table .closed { color: var(--fg-3); }

@media (max-width: 560px) {
  .panel-box { padding: 1.3rem 1.1rem; }
  .hours-table { font-size: .82rem; }
  .hours-table th, .hours-table td { padding: .64rem .28rem; }
}
@media (max-width: 400px) {
  .panel-box { padding: 1.2rem .9rem; }
  .hours-table { font-size: .78rem; }
  .hours-table th, .hours-table td { padding: .6rem .18rem; }
}

.notice { margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--bg-2); border-left: 4px solid var(--fg-3); }
.notice h4 { font-size: .8rem; font-weight: 700; margin-bottom: .5rem; }
.notice ul { margin: 0; padding-left: 1.05rem; font-size: .91rem; color: var(--fg-2); }
.notice li + li { margin-top: .25rem; }

/* ul statt dl: das Icon neben der dt/dd-Gruppe braucht eine zweite
   div-Ebene, und mehr als eine ist in einer dl nicht erlaubt. */
.contact-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.contact-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-item svg { width: 21px; height: 21px; flex: none; margin-top: .28rem; color: var(--accent); }
.contact-item .contact-key { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .15rem; }
.contact-item .contact-val { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.contact-item .contact-val a { font-weight: 700; text-decoration: none; }
.contact-item .contact-val a:hover { text-decoration: underline; }

.contact__photo { margin-top: 1.5rem; }
.contact__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.contact__photo figcaption { margin-top: .6rem; font-size: .85rem; color: var(--fg-3); }
.contact .btn-row { margin-top: 1.4rem; }

/* ---------- CTA-Band ---------- */
.cta {
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff; text-align: center;
}
.cta h2 { margin-bottom: 1rem; }
.cta p { color: rgba(255,255,255,.84); max-width: 46ch; margin-inline: auto; }
.cta__phone {
  display: inline-block; margin-top: 1.75rem;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  font-weight: 800; font-stretch: 108%; letter-spacing: -.03em;
  text-decoration: none; color: #fff;
  border-bottom: 4px solid rgba(255,255,255,.42);
  transition: border-color .2s var(--ease);
}
.cta__phone:hover { border-bottom-color: #fff; }
.cta .btn-row { justify-content: center; margin-top: 2rem; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); color: var(--fg-2); font-size: .93rem; border-top: 3px solid var(--accent); }
.footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(2.75rem, 5vw, 4rem); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer .brand { margin-right: 0; align-self: flex-start; display: inline-flex; }
.footer__about { margin-top: 1.15rem; max-width: 36ch; line-height: 1.55; }
.footer .footer__titel { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); margin: 0 0 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; transition: color .18s var(--ease); }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer address { font-style: normal; line-height: 1.65; }
.footer__bottom {
  border-top: 1px solid var(--line); padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--fg-3);
}
.footer__bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* Der Weg in den Pflegebereich. Er steht bewusst da, wo Impressum
   und Datenschutz stehen · dort sucht man Dinge, die zur Seite
   gehoeren, aber nicht zum Salon. Etwas leiser als seine Nachbarn,
   damit er den Besucher nicht anspricht. */
.footer__pflege { color: var(--fg-3); }
.footer__pflege::before { content: "· "; color: var(--line-2); }

/* ---------- Anrufleiste mobil ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: .55rem;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.09);
  transform: translateY(115%);
  transition: transform .28s var(--ease);
}
.callbar .btn { flex: 1; }
.callbar.is-visible { transform: translateY(0); }
@media (max-width: 700px) {
  .callbar { display: flex; }
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 78px; }
  html.mit-band { scroll-padding-top: 132px; }
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 70ch; }
.legal h2 { margin-top: 2.5rem; margin-bottom: .8rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal p, .legal li { color: var(--fg-2); }
.legal p + p { margin-top: .95rem; }
.legal ul, .legal ol { margin: .95rem 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.legal address { font-style: normal; line-height: 1.7; margin-top: .5rem; }
.legal a { font-weight: 600; }
.page-head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid var(--line); }

/* ---------- Team ---------- */
.team {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.team__karte { background: var(--bg); border: 1px solid var(--line); }

/* Breite bestimmt die Hoehe, nicht umgekehrt: ein height:100% in
   einer Rasterspalte liesse aspect-ratio die BREITE ausrechnen und
   sprengte die Spalte. */
.team__bild { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Wer noch kein Foto hat, bekommt kein leeres Kaestchen, sondern
   sein Initial. Damit steht das Raster schon vor dem Fototermin. */
.team__bild--leer {
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--accent);
  font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; font-stretch: 108%;
}
.team__text { padding: 1.1rem 1.2rem 1.3rem; }
.team__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.012em; }
.team__rolle { margin-top: .15rem; font-size: .85rem; color: var(--accent); font-weight: 600; }
.team__satz { margin-top: .7rem; font-size: .92rem; line-height: 1.55; color: var(--fg-2); }

/* Auf dem Telefon zwei Karten nebeneinander.
   Eine Spalte waere hier keine Gestaltung, sondern eine Folge der
   Rasterangabe oben: 15rem passen nur einmal in 350 Punkte. Vier
   Personen im Hochformat untereinander sind gut 2800 Punkte
   Bildlauf fuer vier Namen · gemessen am 09.08.2026 bei 390 Punkten
   Breite. Nebeneinander sind es 700.
   Die Grenze liegt bei 560 und nicht bei 480: Dazwischen ist die
   einzelne Karte schon 250 Punkte breit, und breiter muss sie
   nicht werden. */
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .team__text { padding: .85rem .9rem 1rem; }
  .team__name { font-size: .98rem; }
}

/* ---------- Einblicke ---------- */
.galerie {
  list-style: none; margin: 0; padding: 0;
  /* auto-FIT und nicht auto-fill: Die Bilder sollen die Zeile
     ausfuellen. Beim Team ist es umgekehrt · dort wuerde eine
     einzelne Person sonst auf die ganze Breite wachsen. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
}
.galerie__feld { align-self: start; }
/* Quadratisch gerechnet werden die Bilder schon beim Hochladen. Das
   aspect-ratio hier faengt nur die mitgelieferten Anfangsbilder ab,
   die noch andere Masse haben. */
.galerie__feld img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.galerie__text { display: block; margin-top: .5rem; font-size: .84rem; color: var(--fg-3); }

/* Zwei Bilder nebeneinander auf dem Telefon, aus demselben Grund
   wie beim Team. Der Unterschied: Die Galerie WAECHST · Swen legt
   dazu, er tauscht nicht. Bei einer Spalte kostet jedes neue Bild
   eine volle Bildschirmhoehe Bildlauf, bei zwei Spalten eine halbe,
   und ab dem zwoelften Bild ist das der Unterschied zwischen
   Ansehen und Weglegen. */
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie__text { font-size: .8rem; }
}

/* ---------- Nur fuer Vorleseprogramme ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Scroll-Reveal (MOTION 4: nur Eintritt, nichts Dauerhaftes) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Druck ---------- */
@media print {
  .header, .callbar, .cta, .btn, .hero__media, .galerie { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .panel[hidden] { display: block !important; }
}