/* ============================================================
   KUNDINNEN-OBERFLÄCHE — das gemeinsame Gerüst
   ============================================================

   Vier Seiten sehen die Kundinnen: die App, ihren Termin, ein
   Angebot mit Frist und die Buchungsstrecke. Bis hierher hatte
   jede ihren eigenen Kopf, ihre eigenen Karten und ihre eigenen
   Knöpfe — und keine sah aus wie die andere.

   Ab jetzt steht hier, was überall gilt: Kopf, Karte, Zeile,
   Knopf, Leiste. In den Seiten bleibt nur, was wirklich nur sie
   betrifft — das Monatsraster der Buchung etwa.

   Diese Datei wird von „Kundenleiste::kopf()" eingebunden und
   liegt damit hinter den Stilblöcken der Seiten. Was hier steht,
   gewinnt.

   Schriften: Cormorant für Titel und Daten, Cinzel ausschließlich
   in Leisten und auf Knöpfen, Jost zum Lesen.
   ============================================================ */

/* ── Die Schriften ───────────────────────────────────────────
   Sie gehören hierher, nicht in die einzelnen Seiten. Wer nur den
   500er-Schnitt von Cinzel lud, bekam ihn auch dort, wo 400 gemeint
   war — deshalb stand der Name des Hauses auf der Buchungsseite
   fetter als in der App. */
@font-face{font-family:Cinzel;font-weight:400;font-display:swap;
  src:url(/assets/fonts/cinzel-400-normal-latin.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:500;font-display:swap;
  src:url(/assets/fonts/cinzel-500-normal-latin.woff2) format("woff2")}
/* Der 600er trägt den Namen des Hauses — derselbe Schnitt wie im Kopf
   der Website. */
@font-face{font-family:Cinzel;font-weight:600;font-display:swap;
  src:url(/assets/fonts/cinzel-600-normal-latin.woff2) format("woff2")}
@font-face{font-family:Cormorant;font-weight:400;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-400-normal-latin.woff2) format("woff2")}
@font-face{font-family:Cormorant;font-weight:500;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-500-normal-latin.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-display:swap;
  src:url(/assets/fonts/jost-400-normal-latin.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-display:swap;
  src:url(/assets/fonts/jost-500-normal-latin.woff2) format("woff2")}

:root{
  --salbei:#5C6A51;
  --salbei-hell:#9CAF94;
  --messing:#B08D5A;
  --taubenblau:rgba(70,88,106,.86);
  --tinte:#2A2620;
  --grau:#6B7266;
  --linie:#EFEAE0;
  --porzellan:#FFFDF8;
  --sand:#F5F1E8;
}

/* ── Grundfläche ─────────────────────────────────────────── */
body{
  margin:0;
  background:var(--sand);
  color:var(--tinte);
  font:16px/1.55 Jost,system-ui,sans-serif;
  padding:0 0 calc(96px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
body .r,body .h{max-width:520px;margin:0 auto;padding:0 16px}

/* ── Der Kopf ────────────────────────────────────────────────
   Bleibt beim Blättern oben und lässt den Inhalt durchscheinen —
   dieselbe Mattglas-Leiste wie in der Verwaltung, nur in Sand. */
body .haus{
  position:sticky;top:0;z-index:30;
  margin:0 -16px 22px;
  padding:calc(env(safe-area-inset-top) + 13px) 16px 13px;
  background:var(--kopf-grund,rgba(245,241,232,.78));
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--kopf-linie,var(--messing-linie-hell,rgba(176,141,90,.22)));
  text-align:center;
}
/* Der Name des Hauses steht hier genau so wie im Kopf der Website:
   Cinzel 600, weit gesperrt, in Versalien — und mit demselben Goldlauf
   als Füllung. Die App ist kein anderes Haus. */
body .haus b{
  display:flex;align-items:baseline;justify-content:center;gap:.55em;
  font-family:Cinzel,Cormorant,serif;
  font-weight:600;font-size:17px;
  letter-spacing:.28em;
  text-transform:uppercase;
  background:var(--kopf-verlauf,linear-gradient(112deg,#9A7433 0%,var(--kopf-farbe,#6E5026) 46%,#8A6531 100%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--kopf-farbe,var(--kopf-farbe,#6E5026));
  /* Keine künstliche Verfettung, falls ein Schnitt einmal fehlt. */
  -webkit-text-stroke:0;font-synthesis-weight:none;
}
/* Der Zusatz — auf der Website „Beauty" — steht kleiner, weiter
   gesperrt und in Salbei daneben. Der Goldlauf des Namens vererbt sich
   auf ihn, deshalb wird die Füllung hier ausdrücklich zurückgeholt. */
body .haus b small{
  font-size:.5em;letter-spacing:.5em;font-weight:500;
  background:none;-webkit-text-fill-color:var(--salbei);color:var(--salbei);
  transform:translateY(-.15em);
}
/* Ein Zeichen der Marke neben dem Namen (marke.php → kopf.zeichen) */
body .haus b .hauszeichen{align-self:center;width:auto;margin-left:.1em;-webkit-text-fill-color:initial}

/* ── Karten ──────────────────────────────────────────────── */
body .k{
  background:var(--porzellan);
  border:1px solid var(--linie);
  border-radius:10px;
  padding:22px 20px 20px;
  margin:0 0 14px;
  box-shadow:0 1px 3px rgba(60,60,40,.045);
}
/* Keine Sonderform. Jede Karte sieht aus wie jede andere. */
body .k.gut{background:#F2F6EE;border-color:#DCE6D4}
body .k.grau{background:#F4F2EC;border-color:#E6E1D5}

/* ── Überschriften ───────────────────────────────────────────
   Der Goldstrich davor ist die Geste des Hauses. Er steht vor
   jeder Überschrift und sonst nirgends. */
body .k h2{
  display:flex;align-items:center;gap:12px;
  margin:0 0 12px;
  font:500 23px Cormorant,serif;
  letter-spacing:0;text-transform:none;color:var(--tinte);
}
body .k h2::before{
  content:"";flex:0 0 26px;height:1px;
  background:var(--messing-linie,rgba(176,141,90,.55));
}
/* Wie viele es sind, sagt die Ueberschrift — nicht erst das Abzaehlen. */
body .k h2 .anzahl{
  font:500 12.5px Jost,system-ui,sans-serif;letter-spacing:.1em;
  color:var(--messing,#B08D5A);
}
body .k h3,body .k .titel{
  margin:0 0 4px;
  font:500 22px Cormorant,serif;
  letter-spacing:0;text-transform:none;
}
body .kl{margin:0;font-size:13.5px;color:var(--grau)}
/* Leerzustände sagen, was als Nächstes geht — nicht nur, dass nichts da ist. */
body .leer{margin:6px 0 0;font-size:14px;color:var(--grau);line-height:1.55}

/* ── Zeilen ──────────────────────────────────────────────────
   Termine, Angebote, Behandlungen: dieselbe Zeile überall.
   Das Datum ist die Zeile — kein Medaillon, kein Kreis. */
body .z,body .w{
  display:flex;gap:14px;align-items:center;
  padding:14px 2px;
  border-bottom:1px solid var(--linie);
  color:inherit;text-decoration:none;
}
body .z:last-of-type,body .w:last-of-type{border-bottom:0}
body .z>div,body .w>div{flex:1;min-width:0}
/* Datum, Uhrzeit und Zustand stehen in EINER Zeile, die Behandlung
   darunter. „display:block" für jedes span hat die Uhrzeit und die
   Pille auf eigene Zeilen geworfen — die Liste zerfiel dadurch in
   drei Zeilen statt zwei, und keine Karte sah aus wie die andere. */
body .z .tag,body .w .tag{
  display:inline;
  font:500 21px/1.35 Cormorant,serif;
  letter-spacing:.005em;color:var(--tinte);
}
body .z .tag .uhr{display:inline;font-size:19px;color:#7C8472}
body .z b,body .w b{display:block;font-weight:500;font-size:15.5px}
/* Nur die Unterzeile bricht um — nicht jedes span in der Zeile. */
body .z>div>span,body .w>div>span{
  display:block;font-size:13px;color:var(--grau);margin-top:3px;
}
/* Der von Hand gesetzte Pfeil tritt ab — die Zeile bekommt ihn unten aus
   dem Geruest. Die Auszeichnung darf ihn behalten, sie zeigt ihn nur
   nicht mehr doppelt. */
body .z .pf,body .w .pf{display:none}
/* Ob etwas sich antippen laesst, sagt die Zeile selbst — nie ein Satz
   darueber. Wer ein Ziel hat, ist ein a: eigene Flaeche, Kontur, Chevron.
   Wer nur berichtet, bleibt ein div und damit eine Zeile mit Strich.
   Darum steht die Form hier und nicht in der Auszeichnung — eine
   vergessene Zeile gibt es so nicht. */
body a.z,body a.w{
  background:var(--porzellan);
  border:1px solid #E7E1D4;border-radius:10px;
  padding:13px 12px;margin:8px 0 0;
  transition:background .12s;
}
/* Die Grundzeile nimmt der letzten den Strich — eine Flaeche braucht
   ihre vierte Kante aber. */
body a.z:last-of-type,body a.w:last-of-type{border-bottom:1px solid #E7E1D4}
/* Der Chevron ist gezeichnet, nicht gesetzt: zwei Striche im Salbei des
   Hauses. Die Glyphe stand zu blass zwischen den Zeilen. */
body a.z::after,body a.w::after{
  content:"";flex:0 0 auto;
  width:9px;height:9px;margin-left:2px;
  border-right:2px solid var(--salbei);border-top:2px solid var(--salbei);
  transform:rotate(45deg);
}
body a.z:active,body a.w:active{background:#F7F3EA}
body .z .punkt{flex:0 0 6px;width:6px;height:6px;border-radius:999px;background:#C9CEC0}

/* Das Band ueber einer Liste — dieselbe Geste wie die Tageszeile im
   Jahresarchiv: links, was es ist und wie viele, rechts die Summe. Es
   gibt der Liste Anfang und Ende, ohne dass jede Zeile einen Rahmen
   braucht. */
body .band{
  display:flex;align-items:baseline;gap:8px;
  margin:6px 0 0;padding:7px 10px;
  background:var(--sand);border-radius:5px;
  font:500 13.5px Jost,system-ui,sans-serif;color:var(--tinte);
}
body .band .kl{margin:0;font-size:12.5px}
body .band .summe{margin-left:auto;font-weight:500;
  font-variant-numeric:tabular-nums}

/* Die letzte Zeile einer Liste schliesst mit Strich ab, damit der Block
   unten ein Ende hat.
   Die Liste selbst braucht keinen Rahmen. */
body div.z.gutschein:last-of-type{border-bottom:1px solid var(--linie)}
/* Der Restwert ist die Zahl, die zaehlt; der volle Wert steht daneben
   und tritt zurueck. */
body .z .vonwert{display:inline;font-size:14px;color:var(--grau)}

/* Zustand als Kapitälchen-Pille: ein Etikett, kein Nebensatz. */
/* Der Zustand ist Text in der zweiten Zeile wie alles andere dort —
   keine Pille, keine Sonderfarbe, keine zweite Schrift. */
body .z em{font-style:normal;color:inherit;font-size:inherit}

/* ── Knöpfe ──────────────────────────────────────────────────
   Eine Form. Der Knopf, der gemeint ist, hat Fläche; alles
   Weitere trägt nur eine Kontur. Kein blanker Textlink als
   dritte Art daneben. */
body .knopf,body .kn,body button.ja,body button.nein,body a.kn{
  /* Volle Breite heißt: so breit wie die Karte, nicht so breit wie die
     Karte plus Polster. Ohne das ragten die Knöpfe links und rechts
     über den Rand hinaus. */
  box-sizing:border-box;
  display:block;width:100%;
  margin:12px 0 0;padding:16px;
  border:0;border-radius:999px;
  background:var(--salbei);color:var(--porzellan);
  font:500 13px Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 16px var(--salbei-linie,rgba(92,106,81,.22));
}
body .knopf.leise,body .kn.leise,body button.nein,body a.kn.leise{
  background:transparent;color:var(--tinte);
  box-shadow:inset 0 0 0 1px #DED6C5;
}
body .knopf:disabled,body .kn:disabled,body button:disabled{opacity:.45;box-shadow:none}
body .hinweis{margin:12px 0 0;font-size:13.5px;color:var(--grau);min-height:1.4em}
body .hinweis.gut{color:var(--salbei)}
body .hinweis.rot{color:#9C3B2E}

/* ── Eingaben ────────────────────────────────────────────── */
body input[type=text],body input[type=search],body input[type=email],
body input[type=tel],body textarea{
  box-sizing:border-box;
  width:100%;padding:14px 16px;
  border:1px solid #E4DCCB;border-radius:10px;
  background:#fff;color:var(--tinte);
  font:16px Jost,sans-serif;
}
body input:focus,body textarea:focus{outline:0;border-color:var(--messing)}

/* ── Schrittzahlen ───────────────────────────────────────── */
body .schritt{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:14px}
body .schritt b{
  flex:0 0 22px;height:22px;border-radius:999px;
  background:var(--sand);color:var(--salbei-tief,#3F4C36);
  font:500 11px Cinzel,serif;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── Fußleiste ───────────────────────────────────────────────
   Dieselbe Bauweise wie in der Verwaltung: schwebende Pille in
   Taubenblau mit Mattglas, Zeichen über Kapitälchen, der aktive
   Ort in Salbei. */
body .fuss{
  position:fixed;z-index:40;
  left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-around;align-items:stretch;
  max-width:496px;margin:0 auto;padding:6px;
  border-radius:999px;
  background:var(--taubenblau);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 26px rgba(40,50,60,.24);
}
body .fuss a{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 8px;border-radius:999px;
  color:var(--leiste-text,#DCE3EA);text-decoration:none;
  font:500 8.5px Cinzel,serif;letter-spacing:.1em;text-transform:uppercase;
}
body .fuss a.an{background:var(--salbei-hell);color:var(--tinte)}
body .fuss svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
body .fuss .zahl{
  position:absolute;top:4px;right:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--messing);color:var(--tinte);
  font:600 10px Jost,sans-serif;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
}
body .fuss a.an .zahl{background:var(--salbei-tief,#3F4C36);color:#F2F5EE}

/* ── Ein Auftritt beim Öffnen ────────────────────────────────
   Die Karten steigen nacheinander auf. Wer Bewegung abgestellt
   hat, bekommt sie sofort und still. */
@media (prefers-reduced-motion:no-preference){
  body .r>.k,body .h>.k{animation:kundinAuf .55s cubic-bezier(.22,.7,.3,1) backwards}
  body .r>.k:nth-of-type(2),body .h>.k:nth-of-type(2){animation-delay:.07s}
  body .r>.k:nth-of-type(3),body .h>.k:nth-of-type(3){animation-delay:.14s}
  body .r>.k:nth-of-type(4),body .h>.k:nth-of-type(4){animation-delay:.21s}
}
@keyframes kundinAuf{from{opacity:0;transform:translateY(9px)}}

body a:focus-visible,body button:focus-visible{
  outline:2px solid var(--messing);outline-offset:3px;
}

/* Impressum · Datenschutz: klein, ruhig, unter dem Inhalt — mit Luft
   für die schwebende Leiste der Kunden-App. */
.rechtliches{margin:36px 0 96px;text-align:center;font-size:12px;letter-spacing:.02em;opacity:.55}
.rechtliches a{color:inherit;text-decoration:none}
.rechtliches a:hover{text-decoration:underline}