/* ==========================================================================
   YELS – Basis: Schriften, Reset, Typografie, Buttons, Formulare
   ========================================================================== */

/* --- Schriften lokal einbinden (DSGVO: kein Google-Server im Spiel) ------ */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* die Seite selbst scrollt nie horizontal */
  position: relative;

  /* Reissleine fuer lange deutsche Woerter. Ein Wort wie
     "Gesichtsbehandlungen" passt in einer schmalen Spalte nicht in eine
     Zeile und wuerde sonst ueber den Rand hinauslaufen. Greift nur, wenn
     ein Wort wirklich nicht passt – normaler Text bleibt unberuehrt. */
  overflow-wrap: break-word;
}

/* --- Grundstimmung ------------------------------------------------------
   Zwei weiche Farbwolken liegen fest hinter der Seite. Radial statt schräg
   verlaufend, damit es nicht nach Standard-Verlauf aussieht, und so blass,
   dass man sie eher spürt als sieht.
------------------------------------------------------------------------ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%,   var(--glow-b), transparent 70%),
    radial-gradient(50% 40% at 92% 22%,  var(--glow-a), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, var(--glow-b), transparent 75%);
}

/* Feines Korn gegen die digitale Flachheit. Als Grafik direkt im CSS, damit
   keine zusätzliche Datei geladen werden muss. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-korn);
  pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
/* muss nach allen display-Regeln greifen: versteckt bleibt versteckt */
[hidden] { display: none !important; }

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;

  /* Deutsche Komposita sind lang: "Gesichtsbehandlungen" braucht in grosser
     Schrift mehr Platz, als ein 320-px-Handy hergibt, und ein einzelnes Wort
     bricht von sich aus nicht um – es schob die ganze Seite auf.
     Die Seite ist als lang="de" ausgezeichnet, deshalb trennt der Browser
     an den richtigen Stellen. break-word ist nur die Reissleine, falls er
     kein Trennmuster findet. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.15; }
h4 { font-size: var(--fs-h4); letter-spacing: -.01em; line-height: 1.3; }
p  { margin: 0; }

.hero-title { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.045em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.eyebrow.no-rule::before { display: none; }

.lead  { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 42ch; line-height: 1.6; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-small); }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-left: auto; margin-right: auto; }

/* Text-Akzent: Wort mit Akzent-Unterlegung */
.mark { background: linear-gradient(transparent 62%, var(--accent-mid) 62%); padding: 0 .06em; }

/* --- Layout-Helfer ------------------------------------------------------ */
/* Browser geben <figure> und <figcaption> von Haus aus 16px/40px Rand mit.
   Das schob hier jedes Bild nach innen – auch die Laufband-Kacheln.        */
figure, figcaption { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section-soft { background: var(--paper-soft); }

/* Dunkler Abschnitt in heller Seite: nicht auf Schwarz springen, sondern die
   dunkelste Stufe derselben Palette nehmen – mit einem weichen Lichtschein,
   damit die Fläche nicht tot wirkt. */
.section-ink {
  position: relative; color: var(--paper); overflow: hidden;
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(138,96,118,.55), transparent 60%),
    radial-gradient(70% 100% at 100% 100%, rgba(223,201,214,.18), transparent 65%),
    var(--deep);
}
.section-ink > * { position: relative; z-index: 1; }
.section-ink .lead, .section-ink .muted { color: rgba(255,255,255,.76); }
.section-ink .eyebrow { color: rgba(255,255,255,.62); }
.section-ink .eyebrow::before { background: var(--accent-mid); }
.section-head { display: flex; flex-wrap: wrap; gap: var(--gap-m); align-items: flex-end;
                justify-content: space-between; margin-bottom: var(--gap-l); }
.section-head > div { max-width: 48ch; }
.stack-s  > * + * { margin-top: var(--gap-s); }
.stack-m  > * + * { margin-top: var(--gap-m); }
.stack-l  > * + * { margin-top: var(--gap-l); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-s); align-items: center; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6em; padding: 1.05em 1.9em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring), background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.btn > span { position: relative; z-index: 1; }
.btn::after {                                  /* Füll-Effekt von unten */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover::after { transform: translateY(0); }
/* Die Füllung ist dunkel, also bleibt die Schrift hell – sonst verschwindet
   sie beim Darüberfahren im Pflaumenton. */
.btn:hover  { color: var(--paper); border-color: var(--accent-deep);
              transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-accent  { --btn-bg: var(--accent-mid); --btn-fg: var(--ink); --btn-bd: var(--accent-mid); }
.btn-light   { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(255,255,255,.4); }
.btn-s { padding: .75em 1.3em; font-size: var(--fs-micro); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .35; pointer-events: none; }

/* Textlink mit wachsender Unterlinie */
.link {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; font-size: var(--fs-small);
  letter-spacing: .04em; text-transform: uppercase;
  padding-bottom: 3px; background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t-mid) var(--ease-out);
}
.link:hover { background-size: 100% 1px; }
.link .arw { transition: transform var(--t-mid) var(--ease-out); }
.link:hover .arw { transform: translateX(4px); }

/* --- Formularelemente --------------------------------------------------- */
.field { display: block; }
.field .label {
  display: block; margin-bottom: .45em;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.input, .textarea, .select {
  width: 100%; padding: .95em 1.1em;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-m);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #A697A8; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field.has-error .input, .field.has-error .textarea { border-color: var(--warn); }
.field-error { display: none; margin-top: .4em; font-size: var(--fs-small); color: var(--warn); }
.field.has-error .field-error { display: block; }

.checkbox { display: flex; gap: .7em; align-items: flex-start; font-size: var(--fs-small);
            color: var(--ink-soft); cursor: pointer; }
.checkbox input { margin-top: .3em; accent-color: var(--ink); width: 17px; height: 17px; }

/* --- Barrierefreiheit --------------------------------------------------- */
.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;
}
/* Nur für Screenreader: sichtbar nirgends, vorgelesen überall. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--pad-x); z-index: 999;
  background: var(--ink); color: var(--paper); padding: .8em 1.2em;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
}
.skip-link:focus { top: 0; }

/* --- Bewegung: global abschaltbar --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}