/* ==========================================================================
   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;
  /* „Kiesel“: ein ganz leicht unregelmäßiger Kreis – wirkt natürlicher als ein exakter Kreis */
  --pebble: 56% 44% 52% 48% / 47% 55% 45% 53%;
  /* Fotos der Website (.foto): quadratischer Kiesel mit weich und leicht ungleich gerundeten Ecken – zwei
     Spielarten, die sich abwechseln (auch die Vorschau im Studio nutzt sie) */
  --foto-shape: 34% 42% 38% 44% / 40% 34% 44% 38%;
  --foto-shape-2: 42% 34% 44% 36% / 36% 42% 36% 44%;

  --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),
     „pop“ federt etwas deutlicher nach – für Häkchen und gerade Ausgewähltes */
  --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);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.75s;
  --stagger: 60ms; /* Abstand, mit dem Listen nacheinander erscheinen */

  /* Einheitliche Größen für alles, was man antippt (Handy: 46 px – bequem, aber nicht wuchtig) */
  --control: 46px;
  --control-sm: 38px;

  /* Schriftgrößen – Handy zuerst: Fließtext 15 px, Nebentext 14/13/12 px.
     Ab Tablet und Desktop wächst nur der Fließtext eine Stufe mit. */
  --fs-body: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.75rem;

  --container: 1180px;
  --gutter: clamp(18px, 5vw, 48px);
  --header-h: 60px;
}
@media (min-width: 700px) {
  :root { --fs-body: 1rem; --header-h: 68px; --control: 50px; --control-sm: 40px; }
}
@media (min-width: 1100px) {
  :root { --fs-body: 1.0625rem; }
}

/* ---------- 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);
  /* Platz der Scrollleiste bleibt reserviert: Menü oder Dialog sperren die Seite, ohne dass sie seitlich rückt */
  scrollbar-gutter: stable;
  -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.6;
  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;
}
/* Überschriften: am Handy deutlich ruhiger (h1 32 px, h2 26 px, h3 19 px), am Desktop wie gewohnt groß */
h1 { font-size: clamp(2rem, 1.1rem + 3.7vw, 5rem); line-height: 1.04; }
h2 { font-size: clamp(1.625rem, 0.75rem + 3.2vw, 3.35rem); line-height: 1.1; }
h3 { font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.85rem); font-weight: 600; line-height: 1.2; }
h4 { font-size: 1.1rem; 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.6875rem, 0.62rem + 0.2vw, 0.78rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.lead { font-size: clamp(0.97rem, 0.88rem + 0.4vw, 1.25rem); color: var(--c-ink-2); line-height: 1.58; }
.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); } }

/* ---------- Geschwungene Linien (Masken, Farbe kommt jeweils von currentColor) ---------- */
:root {
  /* waagerechte Welle zum Kacheln (40 × 8) – lange, ruhige Schwünge */
  --wave-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4C6.7.8 13.3.8 20 4s13.3 3.2 20 0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  /* senkrechte Welle zum Kacheln (8 × 30) */
  --wave-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 30'%3E%3Cpath d='M4 0C7 3.75 7 11.25 4 15S1 26.25 4 30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  /* kleiner Schwung vor Dachzeilen (26 × 8) */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 5.2C4.2 1.6 7.4 1.6 10.2 4.4s6.6 3.2 9.6.6c1.6-1.4 3.4-1.9 5.2-1.3' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Ornament (feine Wellenlinien mit Funkel-Stern) ---------- */
.ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-gold);
  width: min(220px, 60%);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 8px;
  background: currentColor;
  opacity: 0.65;
  -webkit-mask: var(--wave-x) left center / 40px 8px repeat-x;
  mask: var(--wave-x) left center / 40px 8px repeat-x;
}
.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.5em;
  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.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
  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); }
/* feiner Lichtschimmer, der beim Darüberfahren über den Knopf gleitet (nur mit Maus) */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.18) 46%, transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn::after { transition: transform 0.9s var(--ease); }
  .btn:hover::after { transform: translateX(110%); }
}
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Wird gesendet: kleiner Kreisel statt der Symbole – der Knopf wirkt beschäftigt, nicht abgeschaltet */
.btn.is-busy { opacity: 0.8; cursor: progress; }
.btn.is-busy::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-busy > .icon { display: none; }
/* Pfeil am Ende eines Knopfs („Weiter →“) rückt beim Darüberfahren ein Stück vor */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn > .icon:last-child:not(:first-child) { transition: transform var(--dur) var(--ease); }
  .btn:hover:not([disabled]) > .icon:last-child:not(:first-child) { transform: translateX(3px); }
}

.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.6875rem; letter-spacing: 0.11em; }
@media (min-width: 700px) {
  .btn { font-size: 0.78rem; letter-spacing: 0.13em; padding-inline: 1.6em; }
  .btn--sm { font-size: 0.72rem; letter-spacing: 0.11em; padding-inline: 1.15em; }
}
.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: clamp(0.72rem, 0.68rem + 0.15vw, 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 ---------- */
/* align-content: Steht ein Feld neben einem höheren (mit Hinweis oder Fehlermeldung darunter), wird es auf
   dessen Höhe gezogen – Beschriftung und Eingabefeld bleiben trotzdem oben, auf einer Linie mit dem Nachbarn,
   statt dass das Eingabefeld tiefer rutscht und höher wird. */
.field { display: grid; gap: 6px; align-content: start; }
.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 / 0 no-repeat;
  /* Häkchen „ploppt“ beim Anklicken mit leichtem Nachfedern auf (nur bei echter Änderung, nie beim Laden) */
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), background-size 0.34s var(--ease-pop);
  cursor: pointer;
}
.check input:checked {
  background-color: var(--c-dark);
  border-color: var(--c-dark);
  background-size: 14px;
  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);
  justify-self: start; /* in einem Grid (z. B. Formularfeld) nur so breit wie die Knöpfe, nicht über die ganze Zeile */
  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);
}
/* Mit JavaScript übernimmt eine gleitende Fläche die Markierung (motion.js): sie federt beim Umschalten
   zum gewählten Knopf hinüber, statt zu springen. Ohne JavaScript bleibt alles wie oben. */
.segmented { position: relative; isolation: isolate; }
.segmented__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: -1;
  width: var(--pill-w, 0);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-s);
  transform: translateX(var(--pill-x, 0));
  pointer-events: none;
}
.segmented__pill.is-ready { transition: transform 0.46s var(--ease-spring), width 0.4s var(--ease), opacity 0.2s var(--ease); }
.segmented__pill.is-off { opacity: 0; }
.segmented.has-pill > :is([aria-selected="true"], [aria-pressed="true"], [aria-current="true"]) { background: transparent; box-shadow: none; }

/* ---------- 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 {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  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.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: backdrop-in var(--dur) var(--ease); }
.dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; 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;
    top: auto;
    bottom: 0;
    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] { top: auto; bottom: 0; margin: auto 0 0; 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); } }
/* Erfolgsmeldung: das Häkchen zeichnet sich, während die Meldung hereinfedert */
@media (prefers-reduced-motion: no-preference) {
  .toast:not(.toast--error) > .icon:first-child { stroke-dasharray: 22; stroke-dashoffset: 22; animation: check-draw 0.45s var(--ease) 0.16s forwards; }
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* ---------- 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; }

/* ---------- Bewegung (gemeinsam für Website und Studio) ----------
   Leitlinie: Bewegung bestätigt, führt und belohnt – sie hält nie auf. Rückmeldungen 0,15–0,35 s,
   Auftritte 0,4–0,9 s, bewegt werden nur Deckkraft, Position, Größe und Ausschnitt (flüssig auch auf
   älteren Handys). Alles läuft einmal, beim stillen Nachladen nichts. Bei „Bewegung reduzieren“ in den
   Systemeinstellungen bleibt alles ruhig (siehe ganz unten). */

/* Fokusrahmen (Tastatur) zieht sich beim Erscheinen sanft um das Element zusammen.
   :where() hält die Regel so schwach, dass eigene Animationen eines Elements immer Vorrang haben. */
@media (prefers-reduced-motion: no-preference) {
  :where(:focus-visible) { animation: focus-snap 0.3s var(--ease); }
}
@keyframes focus-snap { from { outline-offset: 8px; outline-color: rgb(160 115 47 / 0); } }

/* Hinweise und Fehlermeldungen gleiten beim Erscheinen kurz herein */
.field-error:not([hidden]), .form-error { animation: msg-in 0.32s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } }

/* Falsche Eingabe: das Feld schüttelt kurz den Kopf (setzt JavaScript beim Absenden) */
.is-shake { animation: shake 0.42s var(--ease-in-out); }
@keyframes shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Sanft zusammenfalten (motion.js → collapse): erst kurz ausblenden, dann schließt sich die Lücke */
.is-collapsing {
  box-sizing: border-box;
  height: var(--h);
  overflow: hidden;
  transition: height 0.42s var(--ease) 0.08s, padding 0.42s var(--ease) 0.08s, margin 0.42s var(--ease) 0.08s, border-color 0.3s var(--ease), opacity 0.28s var(--ease), transform 0.42s var(--ease);
}
.is-collapsing.is-collapsed { height: 0; padding-block: 0; margin-block: 0; border-color: transparent; opacity: 0; }

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