/*
  Primitive und Muster, siehe Vellox-OS/07_ENGINEERING/03-komponentenarchitektur.md.
  Komponenten tragen eine Aufgabe per Attribut (intent, status), keine
  mehrdeutigen Modifier-Namen.
*/

/* ---------- Primitive ---------- */

.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.stack > * + * {
  margin-top: var(--space-3);
}

.stack--tight > * + * {
  margin-top: var(--space-1);
}

.stack--loose > * + * {
  margin-top: var(--space-5);
}

.surface {
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  /*
    Zwei Rhythmusfamilien in einem Button, siehe animation-plan.md:
    Farbwechsel bleiben kurz und direkt (--duration-state), damit der Button
    sofort auf den Hover antwortet, ohne träge zu wirken. Bewegung und
    Schatten laufen dagegen über --duration-spatial mit der weich
    auslaufenden --easing-emphasis, damit der Lift ruhig ausgleitet statt
    hart einzurasten. Dieselbe Kurve, die der Pfeil (.button__icon) bereits
    nutzt und die auch der große Hero-CTA seit Runde 14 trägt, jetzt einheitlich
    für alle Größen (siehe Runde 20).
  */
  transition: background-color var(--duration-state) var(--easing-standard),
    color var(--duration-state) var(--easing-standard),
    border-color var(--duration-state) var(--easing-standard),
    transform var(--duration-spatial) var(--easing-emphasis),
    box-shadow var(--duration-spatial) var(--easing-emphasis);
}

/*
  Primärfarbe Waldgrün statt Terrakotta, siehe design-direction.md, Runde 8.
  Gilt für jeden data-intent="primary"-Button im System, einschließlich des
  Formular-Absende-Buttons. Ausnahme: Auf einem bereits waldgrünen
  Forest-Band würde derselbe Ton unsichtbar verschmelzen, siehe die
  section--band-forest-Override weiter unten.
*/
.button[data-intent="primary"] {
  background-color: var(--color-surface-forest);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

.button[data-intent="primary"]:hover {
  background-color: var(--color-accent-text-hover);
  color: var(--color-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.button[data-intent="secondary"] {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.button[data-intent="secondary"]:hover {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  border-color: var(--color-surface-inverse);
  transform: translateY(-2px);
}

.button[data-intent="tertiary"] {
  background-color: transparent;
  color: var(--color-accent-text);
  padding-inline: 0;
  border: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button[data-intent="tertiary"]:hover {
  color: var(--color-accent-text-hover);
  text-decoration-thickness: 2px;
}

.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/*
  Größenvariante für alleinstehende Handlungsflächen, aktuell nur der
  Hero-CTA. Größer, mit eigenem, weicherem Radius und einem sehr weichen,
  breit gestreuten Ruhe-Shadow, der die Fläche trägt statt sie leuchten zu
  lassen. Systementscheidung, siehe design-direction.md, Runde 6.
*/
.button[data-size="lg"] {
  position: relative;
  isolation: isolate;
  font-size: var(--text-body-lg);
  padding: 1.15em 2.3em;
  gap: var(--space-2);
  border-radius: var(--radius-button-lg);
  box-shadow: 0 10px 30px -8px rgba(30, 38, 23, 0.34);
  /*
    Eigene, langsamere Rhythmusfamilie für Lift und Fläche dieser
    Größenvariante: Der allgemeine Button-Hover ist bewusst kurz und direkt
    (--duration-state, siehe animation-plan.md), was bei einer so großen,
    alleinstehenden Fläche wie dem Hero-CTA aber hektisch statt hochwertig
    wirkt. transform läuft deshalb über --duration-spatial mit der weich
    auslaufenden --easing-emphasis, derselben Kurve, die der Pfeil
    (.button__icon) beim Hover schon nutzt, damit Fläche und Pfeil sich als
    eine einzige, zusammenhängende Bewegung lesen statt als zwei
    unterschiedlich schnelle.
  */
  transition: background-color var(--duration-state) var(--easing-standard),
    color var(--duration-state) var(--easing-standard),
    border-color var(--duration-state) var(--easing-standard),
    transform var(--duration-spatial) var(--easing-emphasis);
}

/*
  Der Hover-Schatten wird bewusst nicht über box-shadow selbst animiert:
  box-shadow läuft nicht über den Compositor, jede Zwischenstufe braucht ein
  neues Repaint, was auf schwächeren Geräten genau das stockende Ruckeln
  erzeugt, das der Auftraggeber zurückgemeldet hat. Stattdessen trägt ein
  eigenes ::after-Element bereits den fertigen, größeren Hover-Schatten und
  blendet nur seine Deckkraft ein, opacity und transform sind die einzigen
  Eigenschaften, die jeder Browser direkt auf der GPU animiert.
*/
.button[data-size="lg"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 22px 46px -10px rgba(30, 38, 23, 0.42);
  opacity: 0;
  transition: opacity var(--duration-spatial) var(--easing-emphasis);
}

.button[data-size="lg"][data-intent="primary"]:hover {
  transform: translateY(-4px);
  /*
    Setzt exakt den Ruhe-Wert erneut, um die weiter oben stehende, für
    kleine Buttons gedachte Regel `.button[data-intent="primary"]:hover`
    zu neutralisieren, die sonst hier ihren viel engeren
    --shadow-button-hover einsetzen und den Ruhe-Schatten dieser
    Größenvariante hart wechseln würde, gleichzeitig zur weichen
    ::after-Überblendung darunter. Der spürbare Zuwachs kommt allein aus
    dem ::after, die eigentliche box-shadow bleibt hier unverändert.
  */
  box-shadow: 0 10px 30px -8px rgba(30, 38, 23, 0.34);
}

.button[data-size="lg"][data-intent="primary"]:hover::after {
  opacity: 1;
}

.button__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  transition: transform var(--duration-spatial) var(--easing-emphasis);
}

.button:hover .button__icon {
  transform: translateX(4px);
}

/*
  Sektionen mit dunklem Waldgrün-Band brauchen zwei Anpassungen. Der
  sekundäre Rahmen-Button braucht helle statt dunkle Ränder. Der primäre
  Button ist seit Runde 8 selbst waldgrün und würde auf gleichfarbigem Grund
  unsichtbar verschmelzen; er kehrt sich hier deshalb um: helle Fläche,
  dunkler Waldgrün-Text, dasselbe Prinzip wie beim Rahmen-Button.
*/
.section--band-forest .button[data-intent="secondary"] {
  color: var(--color-text-on-inverse);
  border-color: var(--color-text-on-inverse);
}

.section--band-forest .button[data-intent="secondary"]:hover {
  background-color: var(--color-text-on-inverse);
  color: var(--color-surface-forest);
  border-color: var(--color-text-on-inverse);
}

.section--band-forest .button[data-intent="primary"] {
  background-color: var(--color-text-on-inverse);
  color: var(--color-surface-forest);
}

.section--band-forest .button[data-intent="primary"]:hover {
  background-color: var(--color-surface-elevated);
  color: var(--color-surface-forest);
}

.field {
  display: block;
  margin-bottom: var(--space-3);
  max-width: var(--text-max-width);
}

/*
  Honeypot-Feld gegen einfache Formular-Bots, siehe api/contact.js. Für
  Menschen unsichtbar und über die Tab-Reihenfolge nicht erreichbar
  (tabindex="-1"), aber absichtlich nicht display:none, weil manche Bots
  genau danach filtern. Wird ausschließlich per Position aus dem
  sichtbaren Bereich verschoben, bleibt für Screenreader per aria-hidden
  auf dem Feld selbst ausgeblendet.
*/
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  margin: 0;
}

.field label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  margin-bottom: 0.4em;
}

.field .hint {
  display: block;
  font-size: var(--text-meta);
  color: var(--color-text-muted);
  margin-top: 0.3em;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field[data-status="error"] input,
.field[data-status="error"] textarea {
  border-color: var(--color-error);
}

.field-error {
  display: none;
  color: var(--color-error);
  font-size: var(--text-meta);
  margin-top: 0.35em;
}

.field[data-status="error"] .field-error {
  display: block;
}

/* ---------- Muster ---------- */

/*
  Sticky-Header ohne dauerhaften Border: die Trennkante erscheint erst, wenn
  der Nutzer gescrollt hat und der Header tatsächlich über Inhalt liegt.
  data-scrolled setzt assets/js/main.js, siehe initHeaderScroll(). Ohne
  JavaScript bleibt der Header voll bedienbar, nur ohne Blur-Zustand — die
  volle Grundfläche greift dann als Fallback, damit Text darüber nicht
  transparent auf Bild fällt.
*/
.site-header {
  background-color: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-state) var(--easing-standard),
    border-color var(--duration-state) var(--easing-standard),
    backdrop-filter var(--duration-state) var(--easing-standard);
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .site-header[data-scrolled="true"] {
    background-color: rgba(231, 227, 220, 0.82);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: rgba(36, 23, 16, 0.08);
  }
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .site-header[data-scrolled="true"] {
    background-color: var(--color-surface);
    border-bottom-color: rgba(36, 23, 16, 0.08);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.8em;
  font-size: var(--text-label);
  cursor: pointer;
}

.site-nav__list {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: 600;
  padding-bottom: 0.3em;
}

/*
  Ein Unterstrich, der beim Hover aus der Fläche wächst, statt sofort zu
  erscheinen. Dieselbe Bewegungsaufgabe wie der wachsende Akzent-Unterstrich
  unter Abschnittsüberschriften (siehe .section__heading::after), hier auf
  die Navigation übertragen, damit ein Muster das System trägt statt zwei
  unabhängiger Hover-Ideen.
*/
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-state) var(--easing-standard);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-accent-text);
}

.site-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (max-width: 43.75rem) {
  .nav-toggle {
    display: inline-block;
  }

  /*
    Orientierende Bewegung, siehe animation-plan.md: die Höhe erklärt, dass
    das Menü aus der Navigationsleiste heraus erscheint, nicht dass es
    plötzlich da ist. Position absolute statt normaler Flex-Fluss, weil das
    Nav-Element sonst als drittes Flex-Kind neben Marke und Menü-Button
    Breite beansprucht (auch mit `grid-template-rows: 0fr` bleibt die
    Spaltenbreite erhalten) und `justify-content: space-between` den
    Menü-Button dadurch in die Mitte statt an den rechten Rand schiebt.
  */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-inline: var(--space-3);
    background-color: var(--color-surface);
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    /*
      visibility: hidden nimmt die eingeklappten Links aus der Tab-Reihenfolge,
      damit eine Tastaturnutzerin nicht in ein optisch verborgenes Menü tabbt.
      Die Umschaltung ist verzögert (0s nach der Ausklapp-Dauer), damit die
      Schließ-Animation noch sichtbar abläuft, bevor das Menü fokusfrei wird.
    */
    visibility: hidden;
    transition: grid-template-rows var(--duration-spatial) var(--easing-standard),
      opacity var(--duration-spatial) var(--easing-standard),
      visibility 0s linear var(--duration-spatial);
  }

  .site-nav > * {
    min-height: 0;
  }

  .site-nav[data-open="true"] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    border-top: 1px solid rgba(36, 23, 16, 0.08);
    transition: grid-template-rows var(--duration-spatial) var(--easing-standard),
      opacity var(--duration-spatial) var(--easing-standard),
      visibility 0s linear 0s;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-2);
  }
}

.hero {
  padding-block: var(--space-5) var(--space-6);
}

.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: 3fr 2fr;
  }

  .hero__portrait {
    max-height: 26rem;
  }
}

.hero__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/*
  Page-Hero: einheitlicher Auftakt für alle Sub-Seiten (Über mich, Ablauf,
  Häufige Fragen, Kontakt), eingeführt in Runde 9. Ersetzt die bisherigen,
  visuell schwachen reinen Text-Heros durch dieselbe Editorial-Signatur wie
  der Startseiten-Hero: kleine, ruhige Uppercase-Eyebrow, große Serifen-
  Headline, ergänzender Lead. Optional mit Portrait auf Über mich. Kein
  90vh-Bühnen-Zwang wie auf der Startseite; die Sub-Seiten sind Kapitel,
  keine Bühnen, und dürfen sofort in ihren Inhalt übergehen.
*/
.page-hero {
  padding-block: var(--space-6) var(--space-5);
}

.page-hero__inner {
  max-width: 42rem;
}

.page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-3);
}

.page-hero h1 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.page-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin: 0;
}

@media (min-width: 56rem) {
  .page-hero {
    padding-block: var(--space-7) var(--space-6);
  }

  .page-hero--with-portrait {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    column-gap: var(--space-6);
    align-items: center;
  }
}

.page-hero__portrait {
  display: block;
  margin: var(--space-4) 0 0;
  max-width: 22rem;
}

.page-hero__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-portrait);
  box-shadow: 0 24px 48px -28px rgba(36, 23, 16, 0.28);
}

@media (min-width: 56rem) {
  .page-hero__portrait {
    margin: 0;
    justify-self: end;
  }
}

/*
  Premium-Hero der Startseite, siehe 00_PLANUNG/design-direction.md, Runde 5.
  .hero/.hero__grid/.hero__portrait weiter oben bleiben für die anderen Seiten
  bestehen. Der Block trägt allein den ersten Bildschirm: Bühne (mindestens
  90vh ab dem 2-Spalten-Breakpoint), zwei ruhige Spalten mit deutlichem
  Abstand, ein einziger dominanter CTA. Farbige Grundfläche und Typo-Familien
  stammen unverändert aus den bestehenden Tokens; neu sind ausschließlich die
  benannten Rollen --text-hero, --radius-portrait, --radius-button-lg.

  Der Hintergrund kombiniert die Grundfläche mit drei sehr schwachen Ebenen,
  siehe design-direction.md, Runde 6: ein warmer radialer Schimmer oben links,
  ein hellerer Glow rechts hinter dem Portrait und ein kaum wahrnehmbarer
  vertikaler Verlauf, der die Fläche nach unten minimal absenkt. Alle liegen
  bei etwa 3 bis 5 % Wirkung und sind reine Atmosphäre; die Struktur der Seite
  muss ohne sie tragen (Graustufen-Test). Ziel ist Tiefe, die man eher fühlt
  als sieht.
*/
.hero-editorial {
  position: relative;
  padding-block: var(--space-5) var(--space-6);
  overflow-x: clip;
  background:
    radial-gradient(58rem 44rem at 10% 4%, rgba(154, 95, 60, 0.055), transparent 58%),
    radial-gradient(52rem 46rem at 90% 46%, rgba(255, 250, 242, 0.9), transparent 62%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.5) 0%, transparent 34%, rgba(36, 28, 20, 0.02) 100%);
}

.hero-editorial__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.hero-editorial__content {
  display: grid;
  gap: 0;
  justify-items: start;
  max-width: 32.5rem;
}

/*
  Kleine, leise Haltungszeile über der Headline. Sie ist bewusst zurückhaltend
  gesetzt, damit die Headline unangefochten dominiert. Der Punkt am Ende ist
  keine Übernahme aus einer Vorlage, sondern folgt der Wiederholung derselben
  Zeile im Abschnitt "Wer ich bin" (Systemkonsistenz).
*/
.hero-editorial__voice {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0;
}

.hero-editorial__title {
  font-size: var(--text-hero);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  margin: 0;
  margin-top: var(--space-3);
  max-width: 32.5rem;
}

.hero-editorial__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  max-width: 32.5rem;
  margin: 0;
  margin-top: var(--space-4);
}

.hero-editorial__cta {
  margin-top: var(--space-4);
}

/*
  Trust-Liste: gleichrangige Belege für dieselbe Frage („warum vertraue ich
  dieser Person?"), deshalb ausnahmsweise ein Dreier-Muster, siehe
  design-direction.md, Runde 5. Als leichte Textzeile mit Haken gestaltet,
  ausdrücklich NICHT als Card-Trio, damit sie das im Anti-Template-Standard
  benannte Muster „drei gleichartige Vorteilskarten" nicht bedient.
*/
.hero-editorial__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

.hero-editorial__trust li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/*
  Bewusst ein anderer Grünton als der Waldgrün-Button, siehe design-direction.md,
  Runde 8: das bereits vorhandene Marken-Olivgrün --color-accent-hover, damit
  die Haken nicht mit dem Button verschmelzen und trotzdem in derselben
  Grünfamilie bleiben, keine neue Farbe.
*/
.hero-editorial__trust svg {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  color: var(--color-accent-hover);
}

/*
  Portrait: weicher Radius, engerer Ausschnitt für mehr Präsenz, ein sehr
  weicher Glow als ::before dahinter. Das Bild bleibt ohne Karten-Schatten,
  der Glow übernimmt die Aufgabe „Tiefe" wesentlich leiser.
*/
.hero-editorial__figure {
  position: relative;
  isolation: isolate;
  margin: 0;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 37.5rem;
}

/*
  Sehr weicher, großzügig ausgedehnter Glow hinter dem Portrait, siehe
  Runde 6. isolation:isolate oben begrenzt den Stacking-Context, damit
  z-index:-1 den Glow nicht hinter das Section-Background schiebt (dort
  würde er von overflow-x:clip verschluckt). Der Glow reicht weiter über
  die Kanten hinaus und läuft früher aus, damit er als Atmosphäre wirkt,
  nicht als sichtbarer Ring.
*/
.hero-editorial__figure::before {
  content: "";
  position: absolute;
  inset: -16% -14% -12% -14%;
  background: radial-gradient(closest-side, rgba(255, 248, 236, 0.85), transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/*
  Weicher, gerichteter Trag-Schatten statt eines Karten-Schattens: hohe
  Unschärfe, negativer Spread, tiefer Versatz nach unten. Er erdet das
  Portrait und gibt ihm Präsenz, ohne als Kante sichtbar zu werden.
*/
.hero-editorial__figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-portrait);
  display: block;
  box-shadow: 0 34px 64px -34px rgba(36, 23, 16, 0.34);
}

@media (min-width: 56rem) {
  .hero-editorial {
    min-height: 90vh;
    min-height: 90svh;
    display: grid;
    align-content: center;
    padding-block: var(--space-6);
  }

  .hero-editorial__grid {
    grid-template-columns: minmax(0, 30rem) minmax(0, 32rem);
    column-gap: var(--space-7);
    row-gap: 0;
    align-items: center;
    justify-content: center;
  }

  /*
    Minimale editoriale Verschiebung aus der perfekten Symmetrie, siehe
    Runde 6: das Portrait sitzt einen kleinen Schritt tiefer als die
    optische Mitte des Textblocks. Bewusst subtil, damit die Komposition
    ruhig bleibt und nur der technisch-sterile Eindruck verschwindet.
  */
  .hero-editorial__figure {
    transform: translateY(1.5rem);
  }

  .hero-editorial__figure img {
    max-height: 62vh;
  }
}

@media (min-width: 78rem) {
  .hero-editorial__grid {
    grid-template-columns: minmax(0, 31rem) minmax(0, 37.5rem);
    column-gap: var(--space-8);
  }
}

@media (max-width: 55.9375rem) {
  /*
    Mobile-Reihenfolge: Eyebrow → Headline → Portrait → Lead → CTA → Trust.
    Auf Mobile hebt display:contents den Content-Wrapper visuell auf, damit
    Grid-Kinder direkt geordnet werden können; die Figure rutscht per order
    zwischen H1 und Lead. Semantik und Screenreader-Reihenfolge bleiben
    unverändert (DOM: Eyebrow, H1, Lead, CTA, Trust, Figure).
  */
  .hero-editorial__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hero-editorial__content {
    display: contents;
  }

  .hero-editorial__voice { order: 1; }
  .hero-editorial__title { order: 2; }
  .hero-editorial__figure { order: 3; }
  .hero-editorial__lead { order: 4; }
  .hero-editorial__cta { order: 5; }
  .hero-editorial__trust { order: 6; }

  .hero-editorial__figure {
    max-width: 22rem;
    align-self: center;
    margin-block: var(--space-4);
  }

  .hero-editorial__title {
    margin-top: var(--space-2);
  }

  .hero-editorial__lead {
    margin-top: var(--space-3);
  }
}

@media (max-width: 43.75rem) {
  .hero-editorial__cta.button[data-size="lg"] {
    width: 100%;
    justify-content: center;
  }
}

.section {
  padding-block: var(--space-6);
  position: relative;
}

.section--muted {
  background-color: var(--color-surface-elevated);
}

.section--boundary {
  padding-block: var(--space-7);
  background-color: var(--color-surface-elevated);
  border-top: 1px solid rgba(36, 23, 16, 0.12);
  border-bottom: 1px solid rgba(36, 23, 16, 0.12);
}

/*
  Farbige Sektions-Bänder aus der Broschüren-Palette, siehe design-direction.md.
  Jedes Band trägt eine eigene, per Custom Property umgeschaltete Text- und
  Linkfarbe, damit bestehende Komponenten (p, a, .meta, .proof-list) ohne
  Zusatzregeln lesbar bleiben.
*/
.section--band-sage {
  background-color: var(--color-surface-sage-tint);
}

.section--band-forest {
  background-color: var(--color-surface-forest);
  color: var(--color-text-on-inverse);
}

.section--band-forest .meta {
  color: #aeb6a0; /* 5.2:1 auf Waldgrün */
}

.section--band-forest .proof-list li::before {
  background-color: var(--color-surface-sage-tint);
}

/*
  Organische Trennkante zwischen zwei Bändern, siehe design-direction.md:
  eine ruhige Schrägkante statt eines harten Farbschnitts, mit der einzigen
  Aufgabe, den Wechsel der Fläche anzukündigen. Reine Dekoration, deshalb
  aria-hidden über :not([aria-hidden]) nicht nötig, das Element trägt keinen
  Inhalt.
*/
.section--band-sage::before,
.section--band-forest::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background-color: inherit;
  clip-path: polygon(0 100%, 100% 40%, 100% 100%, 0 100%);
  transform: translateY(-99%);
  pointer-events: none;
}

@media (max-width: 40rem) {
  .section--band-sage::before,
  .section--band-forest::before {
    height: 1.75rem;
  }
}

.section__heading {
  max-width: var(--text-max-width);
  margin-bottom: var(--space-4);
}

/*
  Schritt-Liste für den Ablauf, überarbeitet in Runde 9 zu einer editorialen,
  Apple-nahen Form: statt kleiner farbiger Nummernkreise trägt jeder Schritt
  jetzt eine große, dünn geschriebene Serifen-Ziffer im Format 01–04, links
  neben dem Text, in derselben Serifen-Familie wie die Headline. Die Ziffer
  ist Beweis genug, dass die Reihenfolge zählt, ohne dass ein farbig gefüllter
  Kreis wie ein Icon wirkt. Farblich stimmt sie jetzt mit dem seit Runde 8
  auf Waldgrün umgestellten System zusammen, nicht mehr mit dem alten
  Terrakotta.

  Der Text kommt in zwei Ebenen: Schritt-Titel (fett) und ergänzende
  Beschreibung darunter. Auf kompakten Listen ohne Titel (Startseite) ist der
  Titel einfach der ganze Satz.
*/
.step-list {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-5);
}

.step-list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  max-width: none;
}

.step-list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--color-surface-forest);
  letter-spacing: -0.02em;
  align-self: start;
  padding-top: 0.1em;
  min-width: 2.4em;
}

@media (min-width: 56rem) {
  .step-list {
    gap: var(--space-6);
    max-width: 52rem;
  }
}

.step-list__body {
  padding-top: 0.2em;
}

.step-list__body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-subheading);
  line-height: var(--line-height-heading);
  margin-bottom: 0.4em;
}

.step-list__body p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 34rem;
}

@media (max-width: 43.75rem) {
  .step-list li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-1);
  }

  .step-list li::before {
    min-width: 0;
  }
}

/*
  Abschluss-CTA-Sektion, siehe Runde 9. Ersetzt am Ende der Unterseiten die
  isoliert stehenden „Titel + Button"-Blöcke durch einen mittig gesetzten,
  ruhigen Abschluss: großzügiges Padding, zentrierte Überschrift, ein kurzer
  Kontext-Satz, dann der Button in seiner Premium-Größe. Damit bekommt der
  wichtigste Schritt am Ende einer Seite ein Bühnengefühl, ohne dass ein
  zweites Formular oder Feature nötig wird.
*/
.section--cta {
  padding-block: var(--space-7);
  text-align: center;
}

.section-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 40rem;
  margin-inline: auto;
}

.section-cta h2 {
  margin: 0;
  letter-spacing: -0.015em;
}

.section-cta p {
  margin: 0;
  color: #c8cfba; /* 6:1 auf Waldgrün, ruhiger Muted-Ton für invertierten Grund */
  max-width: 34rem;
}

.section-cta .button {
  margin-top: var(--space-2);
}

.card-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.proof-list li {
  padding-left: 1.6em;
  position: relative;
}

.proof-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/*
  FAQ-Gruppen, siehe Runde 9: die neun Fragen der FAQ-Seite werden in drei
  thematische Blöcke sortiert (Beratung, Vitalstoff-Messung, LR/Datenschutz).
  Der Gruppentitel steht als eigenständige, kleine Zwischenüberschrift über
  jedem Block, damit die Liste scan-bar wird, statt als endlose Reihe zu
  wirken. Der Titel nutzt die kleine Meta-Rolle, keine H2-Größe, damit die
  Fragen selbst weiter die visuelle Führung übernehmen.
*/
.faq-group {
  display: block;
}

.faq-group__heading {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-3);
}

.section--band-sage .faq-group__heading,
.section--band-forest .faq-group__heading {
  color: var(--color-accent-text);
}

.section--band-forest .faq-group__heading {
  color: var(--color-link-on-inverse);
}

.faq-item {
  border-bottom: 1px solid rgba(36, 23, 16, 0.12);
  padding-block: var(--space-2);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-subheading);
  font-family: var(--font-display);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  transition: color var(--duration-state) var(--easing-standard);
}

.faq-item summary:hover {
  color: var(--color-accent-text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: inline-block;
  transition: transform var(--duration-spatial) var(--easing-emphasis),
    color var(--duration-state) var(--easing-standard);
}

.faq-item summary:hover::after {
  color: var(--color-accent-text);
}

.faq-item[open] summary::after {
  content: "+";
  transform: rotate(135deg);
}

.faq-item p {
  animation: faq-open var(--duration-spatial) var(--easing-emphasis);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.faq-item p {
  margin-top: var(--space-2);
}

.status-message {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body);
  margin-top: var(--space-3);
  display: none;
}

.status-message[data-status="success"] {
  background-color: rgba(75, 107, 78, 0.12);
  color: var(--color-success);
  display: block;
}

.status-message[data-status="error"] {
  background-color: rgba(166, 67, 46, 0.12);
  color: var(--color-error);
  display: block;
}

.contact-methods {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.contact-methods a {
  font-weight: 600;
}

.contact-methods__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.contact-methods__list a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-state) var(--easing-standard);
}

.contact-methods__list a:hover {
  border-bottom-color: currentColor;
}

/*
  Footer, überarbeitet in Runde 9. Ersetzt das frühere gleichgewichtete
  Drei-Spalten-Grid durch eine editorialere Aufteilung mit einem größeren
  Markenblock links (Serifen-Name, kurze Positionierungszeile, Adresse) und
  zwei schlanken Spalten rechts, die durch stille Überschriften (Kontakt,
  Rechtliches) sortiert sind. Eine dünne Trennlinie oberhalb des Copyright-
  Bereichs schließt die Seite optisch ab, kein zusätzliches Grafikelement.
*/
.site-footer {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  padding-block: var(--space-6) var(--space-4);
}

.site-footer a {
  color: var(--color-link-on-inverse);
}

.site-footer a:hover {
  color: var(--color-link-on-inverse-hover);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--color-text-on-inverse);
  display: block;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.site-footer__tagline {
  color: #c8cfba;
  margin: 0 0 var(--space-3);
  max-width: 22rem;
}

.site-footer__address {
  font-size: var(--text-meta);
  color: #c8cfba;
  margin: 0;
  line-height: 1.6;
  font-style: normal;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8cfba;
  margin: 0 0 var(--space-2);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.site-footer__list a {
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__baseline {
  border-top: 1px solid rgba(231, 227, 220, 0.14);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-meta);
  /* Solides gedämpftes Salbei statt 70%-Alpha: die Alpha-Variante mischte
     sich Richtung Grund und lag beim Kontrast im Grenzbereich. #c8cfba ist
     der bereits an anderer Stelle genutzte, geprüfte Muted-Ton auf Waldgrün. */
  color: #c8cfba;
}

.site-footer__baseline p {
  margin: 0;
}

/* ------------------------------------------------------------------ *
   Fit-Finder: interaktiver Selbsttest "Passt ein Erstgespräch zu dir?"
   Siehe animation-plan.md (Aufgaben "Orientieren" und "Bestätigen") und
   index.html #fuer-wen. Nur mit JS sichtbar (Klasse js-fitcheck-ready am
   Wurzelelement blendet die statische .proof-list aus und den Test ein).
 * ------------------------------------------------------------------ */
.js-fitcheck-ready [data-fitcheck-fallback] {
  display: none;
}

.fitcheck {
  max-width: 46rem;
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* Jeder Schritt (Intro, Frage, Ergebnis) läuft als eigenes Panel ein. Die
   Bewegung nutzt die räumliche Rhythmusfamilie und wird unter
   prefers-reduced-motion über das Token auf 1ms neutralisiert. */
.fitcheck__panel {
  animation: fitcheck-in var(--duration-spatial) var(--easing-emphasis);
}

@keyframes fitcheck-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

.fitcheck__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fitcheck__lead {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  max-width: 34rem;
}

.fitcheck__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.fitcheck__dots {
  display: flex;
  gap: 0.4rem;
}

.fitcheck__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: rgba(51, 64, 44, 0.18);
  transition: background-color var(--duration-state) var(--easing-standard);
}

.fitcheck__dot[data-on="true"] {
  background-color: var(--color-surface-forest);
}

.fitcheck__progress-label {
  font-size: var(--text-meta);
  color: var(--color-text-muted);
}

.fitcheck__question,
.fitcheck__result-title {
  font-family: var(--font-display);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.fitcheck__question {
  font-size: var(--text-subheading);
}

.fitcheck__result-title {
  font-size: var(--text-heading);
  margin-bottom: var(--space-2);
}

.fitcheck__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fitcheck__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid rgba(36, 23, 16, 0.14);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--duration-state) var(--easing-standard),
    background-color var(--duration-state) var(--easing-standard),
    transform var(--duration-spatial) var(--easing-emphasis);
}

.fitcheck__option:hover {
  border-color: var(--color-accent);
  background-color: #fff;
  transform: translateX(3px);
}

.fitcheck__option-arrow {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--color-accent-text);
  transition: transform var(--duration-spatial) var(--easing-emphasis);
}

.fitcheck__option:hover .fitcheck__option-arrow {
  transform: translateX(3px);
}

.fitcheck__result-body {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  max-width: var(--text-max-width);
}

/* Farbiger Akzentstrich am Ergebnis, je nach Ausgang: grün = passt,
   gedämpft für die beiden ehrlichen "eher nicht"-Ausgänge. */
.fitcheck__result {
  border-left: 3px solid var(--color-surface-forest);
  padding-left: var(--space-3);
}

.fitcheck__result[data-tone="medizin"] {
  border-left-color: var(--color-warning);
}

.fitcheck__result[data-tone="produkt"] {
  border-left-color: var(--color-accent);
}

.fitcheck__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.fitcheck__back,
.fitcheck__restart {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fitcheck__back {
  margin-top: var(--space-3);
}

.fitcheck__back:hover,
.fitcheck__restart:hover {
  color: var(--color-text);
}

/* ------------------------------------------------------------------ *
   Intro-Split: editoriale Zwei-Spalten-Fassung der "Wer ich bin"-Sektion.
   Persönlicher Text links, scannbare Fakten-Karte rechts. Ersetzt die
   frühere einspaltige Textwand, siehe design-direction.md, Runde 17.
 * ------------------------------------------------------------------ */
.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-1);
}

.intro-split {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 56rem) {
  .intro-split {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-6);
  }
}

.intro-split__facts {
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.intro-split__facts-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.facts {
  margin: 0;
}

.facts__row {
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(36, 23, 16, 0.1);
}

.facts__row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.facts__row:last-of-type {
  padding-bottom: 0;
}

.facts dt {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}

.facts dd {
  margin: 0;
  color: var(--color-text);
  line-height: 1.45;
}

/* Inline-Textlink mit Pfeil, der beim Hover ruhig nach rechts wandert.
   Dieselbe Bewegungsaufgabe wie der Pfeil im Button (.button__icon). */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.text-link svg {
  width: 1em;
  height: 1em;
  transition: transform var(--duration-spatial) var(--easing-emphasis);
}

.text-link:hover {
  color: var(--color-accent-text-hover);
}

.text-link:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ *
   Boundary-Split: das "Das ist sie / Das ist sie nicht"-Gegenüber im
   Grenzabschnitt. Bewusst ruhig gehalten (kein Bandton, kein rotes X),
   weil dieser Abschnitt laut animation-plan.md der ruhigste Punkt der
   Seite bleibt. Die Gegenüberstellung schafft Klarheit, keine Show.
 * ------------------------------------------------------------------ */
.boundary-split {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .boundary-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

.boundary-col {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.boundary-col__title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-3);
}

.boundary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.boundary-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.45;
}

.boundary-list svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
}

.boundary-list--is svg {
  color: var(--color-success);
}

.boundary-list--isnt svg {
  color: var(--color-text-muted);
}

.boundary-note {
  max-width: var(--text-max-width);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ *
   Skalen-Legende, siehe ablauf-und-vitalstoff-analyse.html #ampel.
   Zeigt die vier Bereiche, in denen das Messgerät jeden Wert einordnet
   (Normal, leicht, gemäßigt, stark abweichend). Bewusst als ruhige
   Textliste mit kleinen farbigen Punkten, nicht als plakative Ampel-
   Grafik, damit die Bedeutung, nicht die Signalfarbe im Vordergrund
   steht. Farbwerte des Berichts wurden auf gedämpfte Marken-Töne
   übersetzt, siehe design-direction.md, Runde 21.
 * ------------------------------------------------------------------ */
.scale-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
}

@media (min-width: 48rem) {
  .scale-legend {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
  }
}

.scale-legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.45;
}

.scale-legend strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.scale-legend p {
  margin: 0;
  font-size: var(--text-body);
}

.section--band-forest .scale-legend p {
  color: #c8cfba;
}

.scale-legend__dot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.scale-legend__dot[data-tone="normal"]   { background-color: #7fa17f; }
.scale-legend__dot[data-tone="leicht"]   { background-color: #6a9ab3; }
.scale-legend__dot[data-tone="mittel"]   { background-color: #d9c26b; }
.scale-legend__dot[data-tone="stark"]    { background-color: #c47a63; }