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

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