/* ==========================================================================
   Hairfree by Anna – Basis (Schriften, Farben, Typografie, Bausteine)
   Wird von der Website und vom Studio-Bereich gemeinsam genutzt.
   ========================================================================== */

/* Schriften lokal gehostet (keine Verbindung zu Google → DSGVO-freundlich) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-var-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;

  /* Flächen */
  --c-bg: #f6f1ea;
  --c-bg-alt: #eee5d8;
  --c-surface: #fffdf9;
  --c-surface-2: #fbf7f1;
  --c-line: #e3d8c9;
  --c-line-strong: #cfc0ab;

  /* Text */
  --c-ink: #2c2622;
  --c-ink-2: #5f544b;
  --c-muted: #6f6359;

  /* Gold / Bronze */
  --c-gold: #b08a54;        /* Linien, Ornamente */
  --c-gold-deep: #a0732f;   /* Akzente, Diagramme */
  --c-gold-text: #7e5d2d;   /* goldene Schrift auf hellem Grund (AA) */
  --c-gold-light: #e0c38e;  /* goldene Schrift auf dunklem Grund */
  --c-gold-wash: #f1e6d3;

  /* Dunkle Flächen */
  --c-dark: #3b332d;
  --c-dark-2: #2f2925;
  --c-on-dark: #f6f1ea;
  --c-on-dark-2: #d9cec1;

  /* Status */
  --c-success: #2f6b3f;
  --c-success-bg: #e4eee3;
  --c-warn: #855610;
  --c-warn-bg: #f7ead0;
  --c-danger: #9b3a2e;
  --c-danger-bg: #f6e2dc;

  --font-serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --font-sans: "Jost", Futura, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Formen: außen weich, innen eine Stufe enger (Radius innen = außen − Abstand) */
  --radius-xs: 8px;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 26px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgb(44 38 34 / 0.05), 0 4px 14px -6px rgb(44 38 34 / 0.08);
  --shadow-m: 0 2px 6px rgb(44 38 34 / 0.04), 0 22px 48px -22px rgb(44 38 34 / 0.24);
  --shadow-card: 0 1px 1px rgb(44 38 34 / 0.03), 0 12px 28px -22px rgb(44 38 34 / 0.3);

  /* Bewegung: ruhig auslaufend; „spring“ nur für kleine Elemente (Knöpfe, Schalter) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.75s;

  /* Einheitliche Größen für alles, was man antippt */
  --control: 48px;
  --control-sm: 40px;

  /* Schriftgrößen: auf kleinen Handys eine Stufe kleiner */
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.75rem;

  --container: 1180px;
  --gutter: clamp(22px, 6vw, 48px);
  --header-h: 64px;
}
@media (min-width: 700px) {
  :root { --fs-body: 1.0625rem; --header-h: 68px; --control: 50px; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
picture > img { width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 500; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--c-gold-wash); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.6vw + 1rem, 5rem); line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 3vw + 1.05rem, 3.35rem); }
h3 { font-size: clamp(1.3rem, 1.1vw + 1.05rem, 1.85rem); font-weight: 600; line-height: 1.18; }
h4 { font-size: 1.15rem; font-weight: 600; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--c-gold-text); font-weight: 500; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 0.2vw + 0.66rem, 0.78rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.lead { font-size: clamp(1rem, 0.5vw + 0.92rem, 1.25rem); color: var(--c-ink-2); line-height: 1.6; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); line-height: 1.55; }
.serif { font-family: var(--font-serif); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Icons ---------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Ladeanzeige ---------- */
.spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-gold-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Ornament (feine Linie mit Funkel-Stern) ---------- */
.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-gold);
  width: min(220px, 60%);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.ornament .icon { width: 14px; height: 14px; }
.ornament--center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--c-dark);
  --btn-fg: var(--c-on-dark);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: var(--control);
  padding: 0.7em 1.6em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.btn .icon { width: 1.3em; height: 1.3em; }
.btn:hover { --btn-bg: var(--c-dark-2); }
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--c-line-strong); }
.btn--ghost:hover { --btn-bg: var(--c-surface); --btn-border: var(--c-ink-2); }
.btn--gold { --btn-bg: var(--c-gold-light); --btn-fg: var(--c-dark-2); }
.btn--gold:hover { --btn-bg: #ead2a6; }
.btn--light { --btn-bg: var(--c-surface); --btn-fg: var(--c-ink); --btn-border: var(--c-line); }
.btn--light:hover { --btn-bg: #fff; --btn-border: var(--c-line-strong); }
.btn--on-dark { --btn-bg: transparent; --btn-fg: var(--c-on-dark); --btn-border: rgb(246 241 234 / 0.4); }
.btn--on-dark:hover { --btn-bg: rgb(246 241 234 / 0.08); --btn-border: var(--c-on-dark); }
.btn--danger { --btn-bg: var(--c-danger); --btn-fg: #fff; }
.btn--danger:hover { --btn-bg: #842f25; }
.btn--success { --btn-bg: var(--c-success); --btn-fg: #fff; }
.btn--success:hover { --btn-bg: #255734; }
.btn--sm { min-height: var(--control-sm); padding: 0.55em 1.15em; font-size: 0.72rem; letter-spacing: 0.11em; }
.btn--block { display: flex; width: 100%; }
/* sehr schmale Handys: lange Beschriftungen dürfen umbrechen statt aus dem Bild zu laufen */
@media (max-width: 379px) { .btn { white-space: normal; text-align: center; } }
.btn--icon { padding: 0; width: var(--control); min-height: var(--control); letter-spacing: 0; }
.btn--icon.btn--sm { width: var(--control-sm); min-height: var(--control-sm); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  padding-block: 0.35em;
  border-bottom: 1px solid var(--c-gold);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), gap 0.25s var(--ease);
}
.link:hover { color: var(--c-gold-text); gap: 0.7em; }
.link .icon { width: 1.2em; height: 1.2em; }

/* ---------- Formulare ---------- */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: 16px; }
.label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-ink-2);
}
.label .opt { font-weight: 400; color: var(--c-muted); letter-spacing: 0; }
.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control);
  padding: 0.65em 0.95em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  font-size: 1rem; /* ≥16px verhindert Zoom auf iOS */
  line-height: 1.4;
  color: var(--c-ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.textarea { min-height: 110px; resize: vertical; }
.select {
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f544b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 18px;
}
.input::placeholder, .textarea::placeholder { color: #9a8e83; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-gold-deep);
  box-shadow: 0 0 0 3px rgb(160 115 47 / 0.18);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--c-danger); }
.field-error { font-size: var(--fs-sm); color: var(--c-danger); }
.hint { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
input[type="time"].input, input[type="date"].input { min-width: 0; }
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--c-line-strong);
  border-radius: 6px;
  background: var(--c-surface) center / 14px no-repeat;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
  cursor: pointer;
}
.check input:checked {
  background-color: var(--c-dark);
  border-color: var(--c-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f1ea' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; }

/* Schalter (Toggle) */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
}
.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 99px;
  background: #d9cdbd;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  transition: transform var(--dur) var(--ease-spring), width var(--dur-fast) var(--ease);
}
.switch input:active::after { width: 26px; }
.switch input:checked:active::after { transform: translateX(14px); }
.switch input:checked { background: var(--c-success); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; }

/* Segment-Auswahl (Tabs / Umschalter) */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-alt);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button,
.segmented a {
  flex: none;
  min-height: calc(var(--control-sm) - 4px);
  padding: 0.45em 1.05em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.segmented button:active, .segmented a:active { transform: scale(0.96); }
.segmented button:hover, .segmented a:hover { color: var(--c-ink); }
.segmented [aria-selected="true"],
.segmented [aria-pressed="true"],
.segmented [aria-current="true"] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-s);
}

/* ---------- Karten, Chips, Badges ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--c-ink-2);
}
.chip .icon { width: 1.1em; height: 1.1em; color: var(--c-gold-deep); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.22em 0.7em;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  background: var(--c-bg-alt);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--pending { background: var(--c-warn-bg); color: var(--c-warn); }
.badge--confirmed { background: var(--c-success-bg); color: var(--c-success); }
.badge--declined, .badge--cancelled, .badge--noshow { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--done { background: var(--c-bg-alt); color: var(--c-ink-2); }
.badge--blocked { background: #ece6f0; color: #5b4a6b; }

/* ---------- Dialog ---------- */
.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 30px 80px -20px rgb(44 38 34 / 0.45);
  overflow: hidden;
}
.dialog::backdrop { background: rgb(47 41 37 / 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: backdrop-in var(--dur) var(--ease); }
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in 0.36s var(--ease); }
.dialog.is-closing { animation: dialog-out 0.2s var(--ease-in-out) forwards; }
.dialog.is-closing::backdrop { animation: backdrop-out 0.2s var(--ease-in-out) forwards; }
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--c-line);
}
.dialog__head h2, .dialog__head h3 { font-size: clamp(1.35rem, 1vw + 1.1rem, 1.6rem); }
.dialog__body { padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
.dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
@media (max-width: 599px) {
  .dialog {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    max-height: 92dvh;
  }
  /* Griff oben am Blatt – zeigt: lässt sich wie eine App-Karte von unten öffnen */
  .dialog::before { content: ""; align-self: center; flex: none; width: 38px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--c-line-strong); }
  .dialog__head { padding-top: 10px; }
  .dialog[open] { animation: sheet-in 0.42s var(--ease); }
  .dialog.is-closing { animation: sheet-out 0.24s var(--ease-in-out) forwards; }
  .dialog__foot .btn { flex: 1; }
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }

/* ---------- Toast ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--c-dark-2);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-m);
  animation: toast-in 0.45s var(--ease-spring);
  pointer-events: auto;
}
.toast .icon { color: var(--c-gold-light); }
.toast--error .icon { color: #f0a597; }
.toast.is-leaving { animation: toast-out 0.25s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--c-dark);
  color: var(--c-on-dark);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}