@import url("./tokens.css");

/* =========================================================================
   Mundwerk — die gemeinsame Skala (DESIGN.md)

   Warum diese Datei existiert: am 11. September 2026 wurde gemessen, dass die
   drei Richtungen drei verschiedene Skalen tragen — H1 76 / 42 / 48 px,
   Abschnittsabstand 112 / 64 / 64, Inhaltsbreite 1160 / 1088 / 1200, zwei
   Schriftfamilien und zwei Navy-Toene. Jede Entscheidung war fuer sich geprueft,
   keine gegen die anderen beiden.

   Diese Datei ist der Gegenzug: EINE Skala in drei Seitentyp-Stimmen. Bauteile,
   Farben und Flaechen bleiben in styles.css und theme-brochure.css; hier stehen
   ihre gemeinsamen Masse, Zustaende, Bewegung und Vertrage.

   Anwendung: <main class="mw">  ... kompakte Stimme (Informationsseiten)
              <main class="mw mw--editorial">  ... redaktionelle Stimme (eine Landing)

   Sie wird NACH styles.css und theme-brochure.css geladen und greift nur
   innerhalb von .mw — eine Seite ohne diese Klasse merkt nichts davon.
   ========================================================================= */

/* =========================================================================
   DER KANON — Marken aus DESIGN.md, gemessen am 12. September 2026
   -------------------------------------------------------------------------
   Nur Deklarationen. Keine Regel hier unten benutzt sie bereits, und keine
   Seite aendert sich davon. Jede Seite wird EINZELN an den Kanon gefuehrt
   (Reihenfolge in DESIGN.md, Abschnitt "Rollout"); wer eine Seite umbaut,
   ersetzt ihre eigenen Zahlen durch diese Marken und loescht die eigenen.

   Der Grund, warum die Marken hier stehen und nicht in der Seite: eine Regel
   im <style> einer Seite ist fuer die naechste Seite unsichtbar und wird
   dort anders neu erfunden. Genau so entstanden drei Sprechblasen, elf
   Figurenbreiten, vier Kurven und zehn Inhaltsbreiten.

   Die Begruendung zu jeder Zahl steht in DESIGN.md, nicht hier.
   ========================================================================= */

:root {
  /* ---- Schriftleiter: fuenf Stufen, Verhaeltnis nie unter 1,25 ----------
     1440 px  58 · 46 · 36 · 28 · 22      375 px  50 · 40 · 32 · 25 · 20     */
  --t5: var(--type-t5-size);   /* Startseite H1, eine Seite */
  --t4: var(--type-t4-size);   /* H1 einer Richtung */
  --t3: var(--type-t3-size);   /* H1 einer Unterseite */
  --t2: var(--type-t2-size);   /* jedes H2 */
  --t1: var(--type-t1-size);   /* jedes H3, und der Vorspann */

  /* Keine Leiterstufen: Lesetexte wachsen nicht mit. */
  --text-body:  var(--type-text-body-size);   /* 18 px / 1,6 */
  --text-small: var(--type-text-small-size);  /* 15 px / 1,5 */
  --text-micro: var(--type-text-micro-size);  /* 13 px / 1,6 */

  /* ---- Abstand: Modul 4 px, jede Rolle einmal benannt ------------------- */
  --sp-band:  var(--space-band);   /* 64…112 — Bahn zu Bahn */
  --sp-head:  var(--space-head);   /* 48 — Abschnittskopf zum ersten Block */
  --sp-title: var(--space-title);  /* 24 — Ueberschrift zu ihrem Text */
  --sp-card:  var(--space-card);   /* 24 — Innenmass einer Karte */
  --sp-gap:   var(--space-gap);    /* 24 — Raster- und Flex-Abstand */
  --sp-group: var(--space-group);  /* 32 — Hauptgruppe zur Erklaerzeile */
  --sp-para:  var(--space-para);   /* 20 — Absatz zu Absatz */
  --sp-tight: var(--space-tight);  /* 16 — Etikett zu Wert */
  --sp-hair:  var(--space-hair);   /* 8  — zwei Zeilen einer Sache */

  /* ---- Breite: drei, nicht zehn ----------------------------------------- */
  --w-read: 42rem;   /* 672 — Lesebreite */
  --w-band: 68rem;   /* 1088 — die Bahn */
  /* volle Breite ist 100 % und braucht keine Marke */

  /* ---- Radius ----------------------------------------------------------- */
  --r-control: var(--radius-control);  /* Knopf, Minitaste */
  --r-surface: var(--radius-surface);  /* Karte, Notiz, Tafel */
  --r-image:   var(--radius-image);    /* Bild */
  --r-speech:  var(--radius-speech);   /* Sprechblase */

  /* ---- Kante und Flaeche ------------------------------------------------ */
  --speech-line:  #6E7A87;             /* 4,38:1 auf Weiss — nur die Blasenkontur */
  --edge-light:   rgba(0, 0, 0, .1);   /* Bildkontur auf hellem Grund, reines Schwarz */
  --edge-dark:    oklch(1 0 0 / .1);   /* Bildkontur auf dunklem Grund, reines Weiss */

  /* ---- Bewegung: eine Kurve, drei Dauern --------------------------------
     Schleifen (Blinzeln, Winken, treibende Blaetter) laufen mit dem
     Schluesselwort ease-in-out, nicht mit --ease: eine Schleife muss an ihren
     Anfang zurueck, und eine starke Ausklangkurve macht die Naht sichtbar. */
  --ease:    var(--motion-ease);
  --t-press: var(--motion-press);
  --t-hover: var(--motion-hover);
  --t-enter: var(--motion-enter);

  /* ---- Figur: drei Rollen, je eine Breite -------------------------------- */
  --fig-hero:   17rem;    /* 272 — die Figur neben dem Seitenanfang, eine je Seite */
  --fig-beside: 11rem;    /* 176 — Bueste neben einem Block */
  --fig-inline: 7.5rem;   /* 120 — im Zeilenmass */
  --fig-hero-s:   min(15rem, 58vw);   /* < 560 px */
  --fig-beside-s: 7.5rem;
  --fig-inline-s: 5.5rem;
}

.mw {
  /* Der Anker aus dem Designsystem. #002244 bleibt Tinte auf Gold, nicht Titelfarbe. */
  --mw-navy:      #003366;
  --mw-ink:       #141A21;
  --mw-ink-2:     #4A5561;
  --mw-ink-3:     #626C79;   /* auf Weiss 5,23:1, auf #F0F3F7 4,79:1 — beides ueber AA */
  --mw-line:      #DCE2EA;
  --mw-paper:     #FFFFFF;
  --mw-sunken:    #F0F3F7;   /* ~10 % unter Weiss; #FAFBFC waren 3 % und unsichtbar */

  --mw-measure:   42rem;     /* 672 px — die gemessene Lesebreite */
  --mw-wide:      68rem;     /* 1088 px — eine Inhaltsbreite, nicht drei */
  --mw-gap:       clamp(3rem, 6vw, 5rem);
  --mw-ease:      cubic-bezier(.16, 1, .3, 1);

  color: var(--mw-ink-2);
  background: var(--mw-paper);
}

/* Die redaktionelle Stimme setzt eine Stufe hoeher und leichter. Sie ist fuer
   eine Landing, auf der die Illustration die Erklaerung traegt. */
.mw--editorial { --mw-gap: clamp(4rem, 7vw, 6rem); }

/* ---------- Raster ---------- */

.mw-wrap { width: 100%; max-width: var(--mw-wide); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 700px) { .mw-wrap { padding-inline: 2rem; } }

.mw-band { padding-block: var(--mw-gap); }
.mw-band--sunken { background: var(--mw-sunken); }
.mw-band--line   { border-top: 1px solid var(--mw-line); }
.mw-narrow { max-width: var(--mw-measure); }
/* .mw-wrap.mw-narrow auf EINEM Element wuerde die ganze Spalte zentrieren — der
   Abschnitt saehe dann mittig aus, waehrend der Hero links steht. Stattdessen
   bleibt die Bahn breit und nur ihr Inhalt wird auf die Lesebreite begrenzt. */
.mw-wrap.mw-narrow { max-width: var(--mw-wide); }
.mw-wrap.mw-narrow > * { max-width: var(--mw-measure); }

/* :where() haelt die Spezifitaet bei 0-1-0. Ohne das gewinnt diese Grundregel
   gegen jede Bauteilklasse, die selbst ein <p> ist — der Fehler, der am
   10. September 2026 drei Bauteile gleichzeitig verschoben hat. */
.mw :where(p) { max-width: var(--mw-measure); margin: 0 0 1.1em; }
.mw :where(p):last-child { margin-bottom: 0; }
.mw :where(p, li, dd) { text-wrap: pretty; }

/* ---------- Typografie ---------- */

.mw :where(h1, h2, h3, h4) {
  font-family: var(--font-head);
  color: var(--mw-navy);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.mw h1 { font-size: clamp(2rem, 3.4vw, 2.625rem);   line-height: 1.12; font-weight: 700; margin: 0 0 1rem; }
.mw h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem);  line-height: 1.2;  font-weight: 700; margin: 0 0 .75rem; }
.mw h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; margin: 0 0 .35rem; }

.mw--editorial h1 { font-size: clamp(2.75rem, 5vw, 3.75rem); line-height: 1.06; font-weight: 500; }
.mw--editorial h2 { font-size: clamp(2rem, 3vw, 2.5rem);     line-height: 1.14; font-weight: 500; }
.mw--editorial h3 { font-size: 1.375rem; font-weight: 600; }

.mw-eyebrow {
  display: block; font-family: var(--font-head); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-ink-3); margin: 0 0 1.25rem;
}
.mw-lead { font-size: clamp(1.125rem, 1.6vw, 1.1875rem); line-height: 1.5; color: var(--mw-ink); }
.mw--editorial .mw-lead { font-size: clamp(1.25rem, 2vw, 1.3125rem); }
.mw-quiet { color: var(--mw-ink-3); font-size: .9375rem; }
.mw-head { max-width: var(--mw-measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- Aktion ---------- */

.mw-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 1.75rem; }
.mw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.375rem; border: 1px solid transparent;
  border-radius: var(--mw-btn-radius, 6px);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-decoration: none;
}
.mw-btn svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.75; }
.mw-btn--primary { background: var(--mw-navy); color: #fff; border-color: var(--mw-navy); }
.mw-btn--primary:hover { background: #002a55; color: #fff; }
.mw-btn--ghost { background: none; color: var(--mw-navy); border-color: transparent; padding-inline: .25rem; }
.mw-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Flaechen ---------- */

.mw-card {
  background: var(--mw-paper); border: 1px solid var(--mw-line); border-radius: 12px;
  padding: 1.5rem 1.375rem;
}
.mw-cards { display: grid; gap: 1rem; }
@media (min-width: 700px)  { .mw-cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px)  { .mw-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.mw-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .mw-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

.mw-note { border-left: 3px solid var(--mw-navy); background: var(--mw-sunken); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; }
.mw-note + .mw-note { margin-top: 1rem; }

.mw-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mw-lines li { display: flex; gap: .625rem; align-items: center; font-size: 1rem; }
.mw-lines li.mw-line--multi { align-items: flex-start; }
.mw-lines svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--mw-ink-3); stroke-width: 1.5; }
.mw-lines li.mw-line--multi svg { margin-top: 3px; }
.mw-lines a { color: var(--mw-ink); text-decoration: none; border-bottom: 1px solid var(--mw-line); min-height: 44px; display: inline-flex; align-items: center; }
.mw-lines a:hover { border-color: var(--mw-ink); }

/* Bild mit ruhiger Kante — reines Schwarz bei 10 %, nie ein getoenter Grauton,
   der die Flaeche darunter aufnimmt und wie Schmutz an der Kante aussieht. */
.mw-figure { margin: 0; }
.mw-figure img { display: block; width: 100%; height: auto; border-radius: 14px; outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.mw-figure figcaption { margin-top: .625rem; font-size: .875rem; color: var(--mw-ink-3); }

.mw-after { margin-top: 1rem; }

/* =========================================================================
   Formular — 11. September 2026

   Warum hier und nicht in styles.css: ein Formular ist genau das, was
   zwischen zwei Richtungen auseinanderlaeuft, sobald es zweimal gebaut wird.
   Es gehoert deshalb in die gemeinsame Skala, neben Knopf und Karte.

   Drei Dinge sind nicht verhandelbar und stehen deshalb als Regel hier:
   1. Jedes Feld hat ein sichtbares <label>. Ein Platzhalter ist keine
      Beschriftung — er verschwindet beim Tippen.
   2. 48 px Mindesthoehe auf jedem Bedienelement, auch auf der Checkbox-Zeile.
   3. Der Rahmen eines Feldes traegt 3:1 gegen Weiss (#848F9E ~ 3,28:1).
      #DCE2EA waere huebscher und faellt durch.
   ========================================================================= */

.mw-form { display: grid; gap: 1.375rem; max-width: var(--mw-measure); }
.mw-form[hidden] { display: none; }
.mw-form fieldset { border: 0; margin: 0; padding: 0; }
.mw-form legend { padding: 0; }

.mw-field { display: grid; gap: .375rem; }
.mw-field > label,
.mw-form legend {
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600; color: var(--mw-ink);
}
.mw-opt { font-weight: 400; color: var(--mw-ink-3); }
.mw-hint { font-size: .875rem; color: var(--mw-ink-3); }

.mw-input, .mw-textarea, .mw-select {
  width: 100%; min-height: 48px; padding: .6875rem .875rem;
  font-family: inherit; font-size: 1rem; line-height: 1.45; color: var(--mw-ink);
  background: var(--mw-paper); border: 1px solid #848F9E; border-radius: 8px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.mw-textarea { min-height: 148px; resize: vertical; }
.mw-input::placeholder, .mw-textarea::placeholder { color: var(--mw-ink-3); }
.mw-input:hover, .mw-textarea:hover { border-color: var(--mw-ink-2); }
.mw-input:focus, .mw-textarea:focus, .mw-select:focus { border-color: var(--mw-navy); box-shadow: 0 0 0 3px rgba(0, 51, 102, .18); }
.mw-input:focus-visible, .mw-textarea:focus-visible, .mw-select:focus-visible { outline: 2px solid var(--mw-navy); outline-offset: 2px; }

/* Auswahl als Karten. Der echte Radiobutton bleibt sichtbar — er sagt dem
   Leser, dass genau eine Antwort moeglich ist, und traegt die Tastatur. */
.mw-choices { display: grid; gap: .625rem; }
@media (min-width: 620px) { .mw-choices { grid-template-columns: 1fr 1fr; } }

.mw-choice {
  display: flex; gap: .75rem; align-items: flex-start; min-height: 48px;
  padding: .875rem 1rem; border: 1px solid var(--mw-line); border-radius: 10px;
  background: var(--mw-paper); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.mw-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: .125rem 0 0; accent-color: var(--mw-navy); }
.mw-choice span { font-size: .9375rem; line-height: 1.35; color: var(--mw-ink); }
.mw-choice:hover { border-color: var(--mw-ink-3); }
.mw-choice:has(input:checked) { border-color: var(--mw-navy); background: var(--mw-sunken); box-shadow: inset 0 0 0 1px var(--mw-navy); }
.mw-choice:has(input:focus-visible) { outline: 2px solid var(--mw-navy); outline-offset: 2px; }

/* Die Zeile, die sich nach der Auswahl aendert. Sie sagt, ob das Formular
   ueberhaupt der schnellste Weg ist — manchmal ist es eine Seite. */
.mw-steer { margin: 0; font-size: .9375rem; color: var(--mw-ink-2); }
.mw-steer[hidden] { display: none; }

.mw-consent { display: flex; gap: .75rem; align-items: flex-start; min-height: 48px; padding: .25rem 0; }
.mw-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: .1875rem 0 0; accent-color: var(--mw-navy); }
.mw-consent label { font-size: .9375rem; line-height: 1.45; color: var(--mw-ink-2); }
.mw-consent a { color: var(--mw-navy); }
.mw-consent input:focus-visible { outline: 2px solid var(--mw-navy); outline-offset: 3px; }

/* Fehler. #B3261E traegt 6,0:1 auf Weiss — Farbe ist nie das einzige Signal,
   der Text steht daneben und aria-invalid steht am Feld. */
.mw-error { display: none; font-size: .875rem; color: #B3261E; }
.mw-field[data-invalid] .mw-error,
.mw-form fieldset[data-invalid] .mw-error,
.mw-consent-row[data-invalid] .mw-error { display: block; }
.mw-field[data-invalid] .mw-input,
.mw-field[data-invalid] .mw-textarea { border-color: #B3261E; }
.mw-field[data-invalid] .mw-input:focus,
.mw-field[data-invalid] .mw-textarea:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }

.mw-submit { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.mw-required-note { font-size: .875rem; color: var(--mw-ink-3); }

/* Bestaetigung. Sie ersetzt das Formular, statt darunter aufzutauchen —
   sonst liest ein Screenreader weiter im abgeschickten Formular. */
.mw-sent[hidden] { display: none; }
.mw-sent { border: 1px solid var(--mw-navy); border-radius: 12px; padding: 1.5rem; background: var(--mw-sunken); }
.mw-sent h3 { margin-top: 0; }
.mw-sent dl { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1rem; margin: 1rem 0 0; font-size: .9375rem; }
.mw-sent dt { color: var(--mw-ink-3); }
.mw-sent dd { margin: 0; color: var(--mw-ink); }

/* Warnung mit eigener Kante — dieselbe Form wie .mw-note, andere Farbe. */
.mw-warn { border-left: 3px solid #9A6700; background: #FFF8E6; border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; }
.mw-warn p { color: #4A3B00; }

/* Schrittfolge. Zahlen statt Aufzaehlungspunkten: die Reihenfolge ist die Aussage. */
.mw-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.mw-steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; }
.mw-steps li::before {
  content: counter(s); grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--mw-navy); color: #fff;
  font-family: var(--font-head); font-size: .875rem; font-weight: 700;
}
.mw-steps b { font-family: var(--font-head); color: var(--mw-navy); font-size: 1.0625rem; }
.mw-steps p { margin: .25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .mw-input, .mw-textarea, .mw-select, .mw-choice { transition: none; }
}

/* Zweispaltig mit Formular: die linke Spalte traegt, die rechte begleitet.
   align-items: start, weil .mw-split sonst eine kurze Nebenspalte gegen ein
   langes Formular zentriert und sie in der Mitte schweben laesst. */
.mw-split--top { align-items: start; }
@media (min-width: 900px) {
  .mw-split--form { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; }
  .mw-aside { position: sticky; top: 1.5rem; }
}
.mw-aside { display: grid; gap: 1rem; }
.mw-aside .mw-steps { gap: .875rem; }
.mw-aside .mw-steps li::before { width: 1.75rem; height: 1.75rem; font-size: .8125rem; }
.mw-aside .mw-steps { grid-template-columns: none; }
.mw-aside .mw-steps li { grid-template-columns: 1.75rem 1fr; }
.mw-aside .mw-steps b { font-size: 1rem; }
.mw-aside .mw-steps p { font-size: .9375rem; }

/* =========================================================================
   Kontaktkacheln, Kopieren, Aufklappen — 11. September 2026

   Eine Kontaktseite ist eine Werkzeugleiste, kein Aufsatz. Jede Kachel
   traegt genau eine Sache, die man mit ihr TUN kann: anrufen, schreiben,
   kopieren, hinfahren. Text, der nichts tut, gehoert nicht darauf.
   ========================================================================= */

.mw-tiles { display: grid; gap: 1rem; }
@media (min-width: 760px) { .mw-tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.mw-tile {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--mw-paper); border: 1px solid var(--mw-line); border-radius: 12px;
  padding: 1.25rem;
}
.mw-tile h3 {
  margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mw-ink-3);
}
.mw-big {
  font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
  color: var(--mw-navy); text-decoration: none; overflow-wrap: anywhere;
}
a.mw-big:hover { text-decoration: underline; text-underline-offset: 3px; }
.mw-addr { font-style: normal; font-size: 1rem; line-height: 1.5; color: var(--mw-ink); }
.mw-tile-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }

/* 44 px, auch auf dem kleinen Knopf. Ein Nebenknopf ist nicht weniger
   anzutippen als ein Hauptknopf — er ist nur weniger wichtig. */
.mw-mini {
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 44px; padding: 0 .875rem;
  border: 1px solid var(--mw-line); border-radius: 6px; background: var(--mw-paper);
  font-family: var(--font-head); font-size: .875rem; font-weight: 600; color: var(--mw-navy);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.mw-mini:hover { border-color: var(--mw-ink-3); background: var(--mw-sunken); }
.mw-mini:focus-visible { outline: 2px solid var(--mw-navy); outline-offset: 2px; }
.mw-mini svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.75; }
/* Bestaetigung am Knopf selbst. Der Text wechselt mit; Farbe allein sagt nichts. */
.mw-mini[data-copied] { border-color: var(--mw-navy); background: var(--mw-sunken); }

.mw-reveal[hidden] { display: none; }
/* Nur einblenden, nicht verschieben. Das translateY war die zweite Bewegung
   neben dem Rollen: der Inhalt kam von oben herein, waehrend die Seite nach
   unten lief. Zusammen ergab das den Eindruck, das Formular springe. */
@media (prefers-reduced-motion: no-preference) {
  .mw-reveal { animation: mw-unfold .2s ease both; }
  @keyframes mw-unfold { from { opacity: 0; } to { opacity: 1; } }
}

/* Nur fuer Screenreader — die Kopier-Bestaetigung wird angesagt, nicht nur gezeigt. */
.mw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   Der Ort zuerst — Entwurf D, vom Betreiber gewaehlt am 11. September 2026

   Das Prinzip: die Illustration ist nicht Schmuck am Ende der Seite, sondern
   ihr Boden. Die Kontaktdaten haengen als Schild an ihrer Unterkante, so wie
   ein Klingelschild am Haus haengt. Wer herkommen soll, sieht zuerst, wohin.

   Figur und Grund (Gestalt): das weisse Schild liegt sichtbar VOR dem Bild.
   Den Vordergrund macht der Schatten, nicht eine Linie — eine Linie wuerde
   das Schild in die Flaeche zuruecklegen.

   Wiederverwendbar: jede Seite mit einem Ort kann das tragen. Es steht
   deshalb hier und nicht in der Seite (D-70).
   ========================================================================= */

/* Die Brotkrumen bringen aus styles.css einen Abstand mit, der fuer einen
   Hero gedacht war. Ueber einem randlosen Bild sind daraus 112 px Weiss
   geworden — gemessen, nicht geschaetzt. */
.mw > .mw-wrap > .crumbs { margin: 0; }

.mw-place { position: relative; background: #0B2A4A; }
.mw-place img {
  width: 100%; height: clamp(240px, 34vw, 440px);
  object-fit: cover; object-position: 50% 58%;
}
/* Oben rechts, nicht unten: unten liegt das Schild darueber. */
.mw-place figcaption {
  position: absolute; top: .875rem; right: 1.25rem; margin: 0;
  color: #fff; font-size: .8125rem; background: rgba(4, 16, 32, .62);
  padding: .375rem .6875rem; border-radius: 4px;
}

.mw-plaque {
  position: relative; z-index: 2;
  width: min(var(--mw-wide), 100% - 2.5rem); margin-inline: auto; margin-top: -2rem;
  background: var(--mw-paper); border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(4, 20, 40, .42);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
@media (min-width: 760px) { .mw-plaque { width: min(var(--mw-wide), 100% - 3rem); margin-top: -4.5rem; } }
.mw-plaque > h1 { margin-bottom: .5rem; }

.mw-plaque-row {
  display: grid; gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.125rem);
  padding-top: clamp(1.25rem, 3vw, 1.875rem);
  border-top: 1px solid var(--mw-line);
}
@media (min-width: 800px) { .mw-plaque-row { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.mw-label {
  font-family: var(--font-head); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mw-ink-3);
  margin: 0 0 .5rem;
}
/* 44 px auch hier: ein grosser Textlink ist eine Antippflaeche wie jeder
   Knopf. Polsterung allein reicht nicht — auf 375 px schrumpft die Schrift
   mit, und die Flaeche faellt wieder unter das Mass. Gemessen, nicht geraten. */
a.mw-big { display: inline-flex; align-items: center; min-height: 44px; }

.mw-plaque-do {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2.125rem);
  padding-top: clamp(1.25rem, 3vw, 1.875rem);
  border-top: 1px solid var(--mw-line);
}
.mw-plaque-do .mw-btn { min-height: 52px; font-size: 1.0625rem; border-radius: 10px; }
.mw-btn--quiet {
  background: var(--mw-paper); color: var(--mw-navy); border-color: #C4CDD8;
}
.mw-btn--quiet:hover { background: var(--mw-sunken); border-color: var(--mw-navy); }

/* ---------- Startseite: farbiger Grund, davor das Schild ------------------
   Dieselbe Grammatik wie die Kontaktseite, anderer Grund: dort das Haus,
   hier Navy. Die Startseite beantwortet nicht "wo seid ihr", sondern
   "wobei koennt ihr mir helfen" — ein Foto der Adresse waere dort die
   falsche Antwort auf die erste Frage. */
.mw-ground {
  background: var(--mw-navy); color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem) calc(clamp(3rem, 7vw, 5rem) + 2.5rem);
}
.mw-ground .mw-eyebrow--on { color: #8FB3D9; margin-bottom: 1.25rem; }
.mw-ground .mw-h1-on { color: #fff; font-size: clamp(2.25rem, 4.4vw, 3.25rem); margin-bottom: .75rem; }
.mw-ground .mw-lead--on { color: #C7DBF0; max-width: 40rem; }

.mw-routes { display: grid; gap: 1rem; margin-top: clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width: 860px) { .mw-routes { grid-template-columns: repeat(3, 1fr); } }

/* Die ganze Kachel ist der Link, nicht nur die Zeile unten. Fitts: eine
   grosse Flaeche wird schneller getroffen als ein Wort. */
.mw-route {
  display: flex; flex-direction: column; gap: .375rem; min-height: 44px;
  padding: 1.25rem 1.25rem 1.125rem; text-decoration: none; color: var(--mw-ink-2);
  background: var(--mw-paper); border: 1px solid var(--mw-line); border-radius: 12px;
  border-top: 3px solid var(--mw-navy);
  transition: border-color .16s ease, background-color .16s ease, transform .16s var(--mw-ease);
}
.mw-route--gold { border-top-color: #B8860B; }
.mw-route--teal { border-top-color: #0F7B7B; }
.mw-route:hover { background: var(--mw-sunken); border-color: var(--mw-ink-3); }
@media (hover: hover) and (pointer: fine) { .mw-route:hover { transform: translateY(-2px); } }
.mw-route:focus-visible { outline: 2px solid var(--mw-navy); outline-offset: 3px; }
.mw-route-k { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; color: var(--mw-navy); line-height: 1.25; }
.mw-route-t { font-size: .9375rem; line-height: 1.5; }
.mw-route-a {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: .75rem;
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600; color: var(--mw-navy);
}
.mw-route-a svg { flex: 0 0 auto; }

/* Begriffe. Keine Karten: eine Erklaerliste ist eine Liste, kein Raster. */
.mw-terms { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--mw-line); }
.mw-terms > div { padding: 1.125rem 0; border-bottom: 1px solid var(--mw-line); }
@media (min-width: 760px) { .mw-terms > div { display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem; } }
.mw-terms dt { font-family: var(--font-head); font-weight: 700; color: var(--mw-navy); }
.mw-terms dd { margin: .25rem 0 0; }
@media (min-width: 760px) { .mw-terms dd { margin: 0; } }

/* ---------- Der Ort: zwei Fassungen zur Auswahl, 11. September 2026 -------
   Der Betreiber hat das angeschnittene Vollbild zurueckgewiesen. Beide
   Fassungen unten legen das Schild ueber das UNTERE DRITTEL des Hauses:
   die Oberkante der Karte sitzt bei rund 67 % der Bildhoehe. Oben bleiben
   Dach, Giebel und die Wandtafel stehen — daran erkennt man das Haus.

   Warum ueberhaupt angeschnitten wird: die Illustration ist 4:3, ein
   Kopfband ist 3:1 und flacher. Wer 4:3 in 3:1 mit `cover` legt, wirft
   zwangslaeufig Hoehe weg. Die Fassungen unterscheiden sich darin, WIE
   viel Band sie zulassen, nicht ob. */

/* K8 — das Bild in eigenem Rahmen, das Schild ueber seine untere linke Ecke */
.mw-place--frame { background: none; }
.mw-place--frame .mw-place-hull {
  display: block;                      /* ein <span> ist sonst inline und begrenzt nichts */
  width: min(var(--mw-wide), 100% - 2.5rem); margin-inline: auto;
  border-radius: 18px; overflow: hidden; background: #0B2A4A;
}
.mw-place--frame img { height: clamp(300px, 36vw, 470px); object-position: 50% 30%; }
.mw-place--frame figcaption { top: .875rem; right: calc(1.25rem + (100% - min(var(--mw-wide), 100% - 2.5rem)) / 2); }
.mw-plaque--frame {
  width: min(660px, calc(100% - 2.5rem)); margin-top: -104px;
}
@media (min-width: 900px) {
  .mw-plaque--frame {
    /* ein Drittel von clamp(300px, 36vw, 470px) — mitwachsend, nicht fest */
    margin-top: clamp(-157px, -12vw, -100px);
    margin-inline: 0;
    margin-left: max(1.25rem, calc(50vw - min(var(--mw-wide), 100vw - 2.5rem) / 2 + 2rem));
  }
}

/* K9 — Bild ueber die volle Breite, das Schild breit und mittig darunter */
.mw-place--wide img { height: clamp(320px, 42vw, 560px); object-position: 50% 28%; }
.mw-plaque--wide { margin-top: -115px; }
@media (min-width: 760px) { .mw-plaque--wide { margin-top: clamp(-190px, -14vw, -130px); } }

/* Der Ortsabschnitt beginnt buendig an der Kopfzeile — das Bild IST der
   Seitenanfang, nicht der erste Absatz darin. Die 64 px Innenabstand kamen
   aus einer allgemeinen Abschnittsregel und hinterliessen einen weissen
   Streifen; vorher hatte die Brotkrume ihn gefuellt, weshalb er erst nach
   ihrem Entfernen sichtbar wurde. */
section:has(> .mw-place) { padding-top: 0; }

/* =========================================================================
   Der Ort, dritte Runde — das ganze Haus auf einen Blick
   Betreiber, 11. September 2026: das Haus soll vollstaendig zu sehen sein,
   Anschrift und Route daneben.

   Der Rahmen bekommt `aspect-ratio: 4 / 3` — genau das Verhaeltnis der
   Illustration (1200 x 900). Ein `cover` in einen Rahmen gleichen
   Verhaeltnisses schneidet nichts ab, weil es nichts abzuschneiden gibt.
   Damit ist der Anschnitt kein Kompromiss mehr, sondern weg.
   ========================================================================= */

.mw-ort { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 900px) { .mw-ort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.75rem; } }

.mw-ort-bild { margin: 0; }
.mw-ort-bild img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px; outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px;
}
.mw-ort-bild figcaption { margin-top: .625rem; font-size: .875rem; color: var(--mw-ink-3); }

.mw-ort-trenner { height: 1px; background: var(--mw-line); margin: 1.25rem 0; }
.mw-ort-adresse { font-style: normal; font-family: var(--font-head); font-size: 1.125rem;
  font-weight: 500; line-height: 1.5; color: var(--mw-ink); }
.mw-ort-daten, .mw-ort-karte { container-type: inline-size; }
.mw-ort-zwei { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@container (min-width: 30rem) { .mw-ort-zwei { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
/* Rueckfall, wo Container-Abfragen fehlen: eine Spalte ist immer lesbar. */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) { .mw-ort-zwei { grid-template-columns: 1fr 1fr; } }
}
.mw-btn--klein { min-height: 44px; padding: 0 1.125rem; font-size: .9375rem; border-radius: 8px; }
.mw-btn--klein svg { width: 16px; height: 16px; }

/* M2 — beides liegt auf dem Richtungsgrund */
.mw-ort-grund { background: var(--mw-navy); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.mw-ort-grund .mw-ort-bild img { outline-color: rgba(255, 255, 255, .18); }
.mw-ort-karte { background: var(--mw-paper); border-radius: 16px; padding: clamp(1.375rem, 3vw, 2rem); }

/* M3 — ein Objekt, in zwei Haelften geteilt */
.mw-ort--objekt {
  gap: 0; align-items: stretch; background: var(--mw-paper); border: 1px solid var(--mw-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px -26px rgba(4, 20, 40, .35);
}
/* height:100% hat die Bildhaelfte auf die Hoehe der Datenhaelfte gezogen und
   damit 4:3 zerstoert — gemessen blieben 65 % des Hauses uebrig, also genau
   der Fehler, den diese Runde beseitigen soll. Das Bild behaelt sein
   Verhaeltnis; die Haelfte darunter bekommt den Navy-Grund, damit der Rest
   des Feldes wie Absicht aussieht und nicht wie eine Luecke. */
.mw-ort--objekt .mw-ort-bild { background: #0B2A4A; }
.mw-ort--objekt .mw-ort-bild img { border-radius: 0; outline: 0; height: auto; }
.mw-ort--objekt .mw-ort-daten { padding: clamp(1.5rem, 3vw, 2.25rem); }

/* =========================================================================
   Vergleichsstand — drei Strukturen fuer Haus und Daten.
   Nur dieser Block variiert; Kopf, Fuss und alles darunter sind identisch.

   Gemeinsam in allen drei, weil es die gemessenen Maengel von M1 behebt:
   - Skala 42 / 28 / 20 / 15 / 12 statt elf Groessen zwischen 11 und 20.
     Telefon und E-Mail stehen jetzt auf 28, nicht auf 19 wie der Fliesstext.
   - Kein gesperrter Grossbuchstaben-Vorspann und kein Mittelpunkt.
   - Eine Route-Schaltflaeche, nicht zwei.
   - srcset auf 720w korrigiert: die Datei ist 720 x 540, nicht 1200 x 900.
   ========================================================================= */

.kv h1 { font-size: clamp(2rem, 4.4vw, 2.625rem); line-height: 1.1; letter-spacing: -.02em;
  color: var(--mw-navy); margin: 0 0 .5rem; }
.kv .kv-lead { font-size: .9375rem; line-height: 1.6; color: var(--mw-ink-2); margin: 0 0 1.5rem; max-width: 34rem; }
.kv .kv-label { font-size: .75rem; font-weight: 600; color: var(--mw-ink-3); margin: 0 0 .375rem; letter-spacing: 0; }
.kv .kv-adresse { font-style: normal; font-family: var(--font-head); font-size: 1.25rem; font-weight: 500;
  line-height: 1.45; color: var(--mw-ink); margin: 0; }
.kv .kv-wert { display: inline-block; font-family: var(--font-head); font-size: 1.75rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em; color: var(--mw-navy); text-decoration: none;
  overflow-wrap: anywhere; min-height: 44px; }
.kv .kv-wert:hover { text-decoration: underline; text-underline-offset: 4px; }
.kv .kv-zeit { font-size: .9375rem; color: var(--mw-ink-3); margin: .25rem 0 0; }
.kv .kv-aktionen { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1rem; }
.kv .kv-zwei { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
.kv .kv-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.kv figcaption, .kv .kv-unterschrift { font-size: .875rem; color: var(--mw-ink-3); margin: .75rem 0 0; }

/* ---- Der Grund ---------------------------------------------------------
   Eine weisse Tafel auf weissem Blatt wird nur vom Schatten getragen. Auf
   dunklem Grund traegt sie der Helligkeitsunterschied selbst, und der ist
   staerker als jeder Schatten. #0B2A4A stand schon weiter oben als
   Bildgrund — kein neuer Farbwert.
   ----------------------------------------------------------------------- */
.kv-schild-band { background: #0B2A4A; }
.kv-schild-band figcaption { color: rgba(255, 255, 255, .78); }

/* ---- A — Schild: das Haus traegt, die Tafel haengt daran ---------------- */
.kv-schild .kv-bild { margin: 0; }
.kv-schild .kv-bild img { border-radius: 16px;
  outline: 1px solid oklch(1 0 0 / .1); outline-offset: -1px; }
.kv-schild .kv-tafel { background: var(--mw-paper); border-radius: 12px; padding: 1.5rem; margin-top: -1.5rem;
  position: relative;
  /* Drei Lagen statt einer: Kontakt, Mitte, Raum. Eine einzelne weiche
     Unschaerfe verschwindet dort, wo die Tafel ueber den rechten Bildrand
     hinaus auf das weisse Blatt ragt — und genau dort muss sie lesbar sein.
     Kein Rahmen dazu: Haarlinie plus weiter Schatten ist eine der gemeldeten
     Erzeugungs-Signaturen, und eine schwebende Tafel traegt ihre Kante
     ohnehin ueber die Hoehe, nicht ueber einen Strich.
     Neutrales Schwarz, kein eingefaerbtes Navy: ein farbiger Schatten auf
     dunklem Grund ist selbst eine der gemeldeten Signaturen. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .10),
    0 8px 16px -4px rgba(0, 0, 0, .16),
    0 28px 56px -20px rgba(0, 0, 0, .34); }
@media (min-width: 900px) {
  .kv-schild { position: relative; }
  /* Ueberlappung = Bild + Tafel - Bahn. Bei 72 % und 38 % sind das rund
     165 px: die Tafel sitzt auf der Hecke rechts, nicht auf dem Schriftzug.
     Sie traegt keinen Vorspann-Satz, sonst wuerde sie hoeher als das Bild. */
  .kv-schild .kv-bild { width: 80%; }
  /* 2,25rem liessen die Unterkante der Tafel auf 802 px enden, die des Bildes
     auf 803: eine zufaellige gemeinsame Linie. Auf 0,25rem haengt die Tafel
     31 px unter der Bildkante — ein Schild haengt am Haus, es endet nicht
     buendig mit ihm. */
  .kv-schild .kv-tafel { position: absolute; right: 0; bottom: .25rem; width: 36%; min-width: 21rem;
    margin-top: 0; padding: 1.75rem; }
  .kv-schild .kv-zwei { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---- Oberflaechen-Feinschliff ------------------------------------------ */
.kv .mw-btn svg, .kv .mw-mini svg { stroke-width: 2; }

/* ---- Ein einziger Auftritt ---------------------------------------------
   Warum ueberhaupt: die Kontaktseite wird selten und einmal gelesen. Das ist
   die Stufe, auf der ein Auftritt seinen Platz hat. Zweck ist nicht Schmuck,
   sondern Reihenfolge — das Haus steht zuerst da, die Tafel haengt sich
   danach daran. Wer zuerst kommt, ist wichtiger; die Bewegung sagt das.

   Genau ein Moment. Kein Einblenden je Abschnitt weiter unten: gestaffelte
   Auftritte auf jedem Block sind die Voreinstellung, an der man erzeugte
   Seiten erkennt.

   Drei Stufen zu 80 ms, je 260 ms, starke ease-out-Kurve. Nur transform und
   opacity — beide laufen auf der GPU, ohne Layout und Paint.

   Der ganze Block haengt in `no-preference`: wo die Abfrage nicht greift,
   steht der Inhalt einfach da. Ein Auftritt, der bei ausgefallenem CSS
   unsichtbaren Inhalt hinterlaesst, waere schlimmer als gar keiner.
   ------------------------------------------------------------------------ */
@keyframes kv-auftritt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .kv-schild .kv-bild,
  .kv-schild .kv-tafel,
  .kv-schild .kv-zwei {
    animation: kv-auftritt 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .kv-schild .kv-bild  { animation-delay: 0ms; }
  .kv-schild .kv-tafel { animation-delay: 80ms; }
  .kv-schild .kv-zwei  { animation-delay: 160ms; }
}

/* Weniger und sanfter, nicht nichts: die Reihenfolge bleibt lesbar, die
   Bewegung faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .kv-schild .kv-bild,
  .kv-schild .kv-tafel,
  .kv-schild .kv-zwei { animation: none; }
}

/* ---- Das vereinfachte Formular ----------------------------------------- */
.kv-form { max-width: 42rem; }
.kv-paar { display: grid; gap: 1rem; }
@media (min-width: 620px) { .kv-paar { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.kv-textarea { min-height: 6rem; }
.kv-schutz { margin-top: 1rem; }


/* ---- Das Bild liegt, statt zu haengen ---------------------------------
   Betreiber, 12. September 2026, gewaehlt aus drei Winkeln: -1,2 Grad.
   Rechte Kante hoch, linke runter — in CSS ist das eine negative Drehung.
   Gedreht wird das Bild, nicht die Tafel: ein Foto liegt schief auf dem
   Tisch, ein Schild haengt gerade an der Wand. Der Unterschied zwischen
   beiden ist genau das, was die Drehung erzaehlt.

   `rotate` als eigene Eigenschaft, nicht in `transform` — sonst loescht der
   Auftritt (der transform animiert) die Drehung im letzten Bild.
   ---------------------------------------------------------------------- */
.kv-schild .kv-bild img { rotate: -1.2deg; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); }

/* =========================================================================
   DER KANON — Bauteile.  DESIGN.md, 12. September 2026
   -------------------------------------------------------------------------
   Eine Seite tritt ein, indem sie die Marke traegt:

       <main id="main" class="mw mw--canon" data-rank="direction">

   `data-rank` bleibt: es waehlt die H1-Stufe (front -> T5, direction -> T4,
   sonst -> T3).  `--canon` ist voruebergehend.  Es steht hier, damit der
   Umbau EINER Seite nicht die fuenf Seiten verschiebt, die sich ihre
   Richtungsdatei teilen — und es ist absichtlich mit zwei Klassen
   geschrieben (.mw.mw--canon = 0-2-1), damit es die Richtungsregeln
   schlaegt, ohne !important.

   Geloescht wird es, wenn die letzte Zeile der Rollout-Tabelle in DESIGN.md
   fertig ist.  Die Pruefung darauf ist mechanisch:

       grep -rl "mw--canon" --include="*.html" .   -> darf nichts ausgeben

   Warum ueberhaupt eine Marke: eine Seite ohne Marke widerspricht dem Kanon
   nicht, sie hatte nur ihren Durchgang noch nicht.  Der Unterschied ist beim
   Lesen des Codes sofort sichtbar.
   ========================================================================= */

/* ---------- Schrift: die Leiter, sonst nichts ---------------------------- */

.mw.mw--canon { font-size: var(--text-body); line-height: 1.6; }

.mw.mw--canon :where(h1, h2, h3, h4) {
  font-family: var(--font-head); text-wrap: balance;
}

/* H1 traegt --navy: der Seitentitel ist die Firma, nicht die Richtung.
   Die Richtung sagen die Kante unter dem Kopf und die H2 darunter. */
.mw.mw--canon h1 {
  font-size: var(--t3); line-height: 1.14; font-weight: 600;
  letter-spacing: -.03em; color: var(--navy); margin: 0 0 var(--sp-title);
}
.mw.mw--canon[data-rank="direction"] h1,
.mw.mw--canon[data-rank="front"] h1 {
  line-height: 1.08; font-weight: 500; letter-spacing: -.04em;
}
.mw.mw--canon[data-rank="direction"] h1 { font-size: var(--t4); }
.mw.mw--canon[data-rank="front"]     h1 { font-size: var(--t5); }

.mw.mw--canon h2 {
  font-size: var(--t2); line-height: 1.2; font-weight: 600;
  letter-spacing: -.025em; color: var(--accent-title); margin: 0 0 var(--sp-title);
}
.mw.mw--canon h3 {
  font-size: var(--t1); line-height: 1.3; font-weight: 600;
  letter-spacing: -.015em; color: var(--navy); margin: 0 0 var(--sp-hair);
}

.mw.mw--canon :where(p, li, dd) { text-wrap: pretty; }
.mw.mw--canon :where(p) { max-width: var(--w-read); margin: 0 0 var(--sp-para); }
.mw.mw--canon :where(p):last-child { margin-bottom: 0; }

.mw.mw--canon .eyebrow, .mw.mw--canon .mw-eyebrow {
  display: block; font-family: var(--font-head); font-size: var(--text-micro);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--sp-tight);
}
.mw.mw--canon .lead, .mw.mw--canon .mw-lead {
  font-size: var(--t1); line-height: 1.5; font-weight: 400;
  color: var(--charcoal); max-width: var(--w-read);
}

/* ---------- Raster und Abstand ------------------------------------------ */

.mw.mw--canon .container, .mw.mw--canon .mw-wrap {
  width: 100%; max-width: var(--w-band); margin-inline: auto; padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .mw.mw--canon .container, .mw.mw--canon .mw-wrap { padding-inline: 2rem; }
}

.mw.mw--canon > section, .mw.mw--canon > .mw-band { padding-block: var(--sp-band); }
.mw.mw--canon .section-head, .mw.mw--canon .mw-head {
  max-width: var(--w-read); margin-bottom: var(--sp-head);
}
.mw.mw--canon .section-head > :last-child,
.mw.mw--canon .mw-head > :last-child { margin-bottom: 0; }

/* ---------- Service-Landing: approved display voice --------------------- */

/* The translation landing sells one service and its measured display scale
   is approved. It shares the site fonts, measures and rhythm, but it does not
   borrow the quieter heading sizes of an informational direction page. */
#main.mw.mw--canon[data-page-voice="service"] { font-size: var(--text-body); }
#main.mw.mw--canon[data-page-voice="service"] .container {
  width: 100%; max-width: var(--w-band); padding-inline: 1.5rem;
}
#main.mw.mw--canon[data-page-voice="service"] .emil-hero .container {
  width: calc(100% - 80px); max-width: 1160px; padding-inline: 0;
}
@media (min-width: 1024px) {
  #main.mw.mw--canon[data-page-voice="service"] .container { padding-inline: 2rem; }
}
#main.mw.mw--canon[data-page-voice="service"] > section:not(.emil-hero) {
  padding-block: var(--sp-band);
}
#main.mw.mw--canon[data-page-voice="service"] #hero-title {
  color: var(--navy);
}
#main.mw.mw--canon[data-page-voice="service"] .btn {
  min-height: 56px; padding: 14px 22px; font-size: 14px; font-weight: 500; gap: 20px;
}
@media (max-width: 600px) {
  #main.mw.mw--canon[data-page-voice="service"] .container {
    padding-inline: 20px;
  }
  #main.mw.mw--canon[data-page-voice="service"] .emil-hero .container {
    width: calc(100% - 40px); padding-inline: 0;
  }
  #main.mw.mw--canon[data-page-voice="service"] > section:not(.emil-hero) {
    padding-block: var(--sp-band);
  }
  #main.mw.mw--canon[data-page-voice="service"] .btn {
    min-height: 54px; padding-inline: 16px; font-size: 12px; gap: 12px;
  }
}

/* ---------- Knopfgeometrie; Bewegung liegt global in styles.css ---------- */

.mw.mw--canon .btn, .mw.mw--canon .mw-btn, .mw.mw--canon .mw-mini {
  min-height: 48px; padding: 0 1.375rem; border-radius: var(--r-control);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
}

/* ---------- Sprechblase: ein Vertrag statt drei -------------------------- */

.mw.mw--canon .mw-say {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--speech-line);
  /* 1 px, nicht 1,5: Chromium rundet border-width auf ganze CSS-Pixel, bei
     DPR 1 wie bei DPR 2 — gemessen am 12. September 2026. Sichtbar macht die
     Linie die Farbe, nicht die Breite. */
  border-radius: var(--r-speech); padding: .8rem 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-body);
  line-height: 1.45; color: var(--charcoal); max-width: 26rem;
  /* Der eine dokumentierte Verstoss gegen "Rahmen ODER Schatten": die Blase
     liegt auf einer Zeichnung, und eine Zeichnung ist keine ebene Flaeche. */
  box-shadow: 0 4px 16px rgba(20, 26, 33, .07);
}
/* Der Zipfel ist ein gedrehtes Quadrat, kein CSS-Dreieck: ein Dreieck kann
   die Kontur der Blase nicht mittragen, die Linie hoerte am Zipfel auf. */
.mw.mw--canon .mw-say::before {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--surface); border: solid var(--speech-line);
  transform: rotate(45deg);
}
.mw.mw--canon .mw-say--down::before { bottom: -7px; left: 2.25rem; border-width: 0 1px 1px 0; }
.mw.mw--canon .mw-say--up::before   { top: -7px;    left: 2.25rem; border-width: 1px 0 0 1px; }
.mw.mw--canon .mw-say--left::before { left: -7px;   top: 1.1rem;   border-width: 0 0 1px 1px; }
.mw.mw--canon .mw-say--down { margin: 0 0 .75rem; }
.mw.mw--canon .mw-say--up,
.mw.mw--canon .mw-say--left { margin: .75rem 0 0; }

/* Schmal: die Blase steht UEBER der Figur und zeigt nach unten auf sie.
   Neben der Figur ist sie bei 375 px 240 px breit und liest sich als Spalte. */
@media (max-width: 559px) {
  .mw.mw--canon .mw-say { max-width: none; margin: .75rem 0 0; }
  .mw.mw--canon .mw-say::before {
    top: -7px; bottom: auto; left: 2.25rem; right: auto;
    border-width: 1px 0 0 1px;
  }
}

/* ---------- Figur: drei Rollen, je eine Breite --------------------------- */

.mw.mw--canon .mw-fig { width: 100%; }
.mw.mw--canon .mw-fig img { width: 100%; height: auto; display: block; }
.mw.mw--canon .mw-fig--hero   { max-width: var(--fig-hero); }
.mw.mw--canon .mw-fig--beside { max-width: var(--fig-beside); }
.mw.mw--canon .mw-fig--inline { max-width: var(--fig-inline); }
@media (max-width: 559px) {
  .mw.mw--canon .mw-fig--hero   { max-width: var(--fig-hero-s); }
  .mw.mw--canon .mw-fig--beside { max-width: var(--fig-beside-s); }
  .mw.mw--canon .mw-fig--inline { max-width: var(--fig-inline-s); }
}

/* ---------- Flaechen: Rahmen ODER Schatten, nie beides ------------------- */

.mw.mw--canon .mw-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-surface); padding: var(--sp-card); box-shadow: none;
}
.mw.mw--canon .mw-card--edge { border-top: 3px solid var(--accent); }

.mw.mw--canon .mw-img {
  border-radius: var(--r-image);
  outline: 1px solid var(--edge-light); outline-offset: -1px;
}
.mw.mw--canon .mw-on-dark .mw-img { outline-color: var(--edge-dark); }

.mw.mw--canon .mw-tag {
  display: inline-block; border-radius: 999px;
  background: var(--accent-surface); color: var(--accent-ink);
  font-size: var(--text-micro); font-weight: 600; padding: .25rem .75rem;
}

/* ---------- Tabelle ------------------------------------------------------ */

.mw.mw--canon .mw-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-surface);
  overflow: hidden; box-shadow: none; font-variant-numeric: tabular-nums;
}
.mw.mw--canon .mw-table :where(th, td) { padding: .75rem .875rem; }
.mw.mw--canon .mw-table thead th {
  background: var(--navy); color: #fff; font-family: var(--font-head);
  font-weight: 600; font-size: 1rem;
}
.mw.mw--canon .mw-table tr + tr :where(th, td) { border-top: 1px solid var(--border); }
/* Auf 375 px rollt die Tabelle im eigenen Rahmen, nie die Seite. */
.mw.mw--canon .mw-table-wrap { overflow-x: auto; }
.mw.mw--canon .mw-table-wrap .mw-table { min-width: 19rem; }

/* ---------- Aufklappung -------------------------------------------------- */

.mw.mw--canon .mw-disc { border-top: 1px solid var(--border); }
.mw.mw--canon .mw-disc details { border-bottom: 1px solid var(--border); background: none; }
.mw.mw--canon .mw-disc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: .75rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--t1);
  line-height: 1.3; color: var(--navy);
}
.mw.mw--canon .mw-disc summary::-webkit-details-marker { display: none; }
.mw.mw--canon .mw-disc summary::after {
  content: "+"; color: var(--accent-line); font-weight: 700; font-size: 1.25rem;
}
.mw.mw--canon .mw-disc details[open] > summary::after { content: "\2212"; }
.mw.mw--canon .mw-disc summary { transition: color var(--t-hover) var(--ease), padding-left var(--t-hover) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mw.mw--canon .mw-disc summary:hover { color: var(--accent-ink); padding-left: .25rem; }
}
.mw.mw--canon .mw-disc .disc-body { padding-bottom: 1rem; max-width: var(--w-read); }
.mw.mw--canon .mw-disc .disc-body > :last-child { margin-bottom: 0; }
.mw.mw--canon .mw-disclosure-figure { align-self: start; }

/* ---------- Coach-Seite: kanonische Anwendung ---------------------------
   Die Seitentyp-Stimme aendert nur Dramaturgie und Akzent; Mass, Schrift,
   Flaechen, Tasten, Figurenrollen und Bewegung bleiben dieselben Bauteile. */

.mw.mw--canon[data-page-voice="coach"] {
  --font-head: var(--type-head-family);
  --font-body: var(--type-body-family);
  --mc-wide: var(--w-band);
  --mc-measure: var(--w-read);
  --mc-gap: var(--sp-band);
  --mc-ease: var(--ease);
  --mc-line: var(--color-line);
  --mc-paper: var(--color-paper);
  --mc-sunken: var(--color-sunken);
  font-family: var(--font-body);
}

.mw.mw--canon[data-page-voice="coach"] .mc-wrap {
  max-width: var(--w-band);
  padding-inline: 1.5rem;
}
@media (min-width: 700px) {
  .mw.mw--canon[data-page-voice="coach"] .mc-wrap { padding-inline: 2rem; }
}
.mw.mw--canon[data-page-voice="coach"] :where(.mc-band, .mc-hero) { padding-block: var(--sp-band); }
.mw.mw--canon[data-page-voice="coach"] .mc-head { margin-bottom: var(--sp-head); }
.mw.mw--canon[data-page-voice="coach"] .mc-eyebrow {
  font-family: var(--font-head); font-size: var(--text-micro); line-height: 1.6;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.mw.mw--canon[data-page-voice="coach"] .mc-lead {
  max-width: var(--w-read); font-size: var(--t1); line-height: 1.5; color: var(--color-ink-2);
}
.mw.mw--canon[data-page-voice="coach"] .mc-actions { gap: var(--sp-hair) var(--sp-tight); margin-top: var(--sp-title); }

/* Button contract: one shape, one hover curve, one tactile inner surface. */
.mw.mw--canon[data-page-voice="coach"] .mc-btn {
  min-height: 48px; border-radius: var(--r-control); font-family: var(--font-head);
}
.mw.mw--canon[data-page-voice="coach"] .mc-btn--primary,
.mw.mw--canon[data-page-voice="coach"] .mc-btn--primary:hover {
  background: var(--mc-gold); color: var(--accent-on); border-color: #E3A233;
}
.mw.mw--canon[data-page-voice="coach"] .mc-btn--primary .mw-tactile { color: var(--accent-on); }
.mw.mw--canon[data-page-voice="coach"] .mc-btn .mw-tactile {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.mw.mw--canon[data-page-voice="coach"] .mc-btn--plain > .mw-tactile {
  border: 0; padding: 0;
}
.mw.mw--canon[data-page-voice="coach"] .mc-btn--plain > .mw-tactile > span {
  border-bottom: 1px solid var(--color-line); padding-bottom: 2px;
  transition: border-color var(--t-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .mw.mw--canon[data-page-voice="coach"] .mc-btn--plain:hover > .mw-tactile > span { border-color: currentColor; }
}
.mw.mw--canon[data-page-voice="coach"] .mc-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-navy) 28%, transparent); outline-offset: 3px;
}

/* Surfaces use an edge OR a shadow. Ordinary cards use the edge. */
.mw.mw--canon[data-page-voice="coach"] :where(.mc-card, .mc-form, .mc-way, .mc-event) {
  border: 1px solid var(--color-line); border-radius: var(--r-surface);
  background: var(--color-paper); box-shadow: none; padding: var(--sp-card);
}
.mw.mw--canon[data-page-voice="coach"] .mc-note {
  max-width: var(--w-read); margin-top: var(--sp-group); padding: var(--sp-para) var(--sp-card);
  border: 0; border-left: 3px solid var(--color-ink-3); border-radius: 0 var(--r-surface) var(--r-surface) 0;
  background: var(--color-sunken); box-shadow: none;
}
.mw.mw--canon[data-page-voice="coach"] .mc-note--strong { border-left-color: var(--mc-gold); }

/* Dialogue is page UI; speech is the figure's callout. They never impersonate each other. */
.mw.mw--canon[data-page-voice="coach"] .mw-dialogue {
  display: grid; justify-items: start; gap: var(--sp-hair); width: 100%; max-width: 22rem;
}
.mw.mw--canon[data-page-voice="coach"] .mw-dialogue-message {
  justify-self: start; width: fit-content;
  margin: 0; padding: .625rem .875rem; border: 1px solid var(--color-speech-soft-line);
  border-radius: 16px 16px 16px 4px; background: var(--color-speech-soft); color: var(--color-ink);
  box-shadow: none; font: 600 .9375rem/1.4 var(--font-body);
}
.mw.mw--canon[data-page-voice="coach"] .mw-dialogue-message:first-child { max-width: 12.5rem; }
.mw.mw--canon[data-page-voice="coach"] .mw-dialogue-message:last-child { max-width: 10.75rem; }
.mw.mw--canon[data-page-voice="coach"] .mw-dialogue-message.mc-msg--you {
  justify-self: start; width: max-content; max-width: none; margin-left: 2.5rem; white-space: nowrap;
  border-color: var(--color-navy); background: var(--color-navy);
  color: var(--color-paper); border-radius: 16px 16px 4px 16px; font-weight: 400;
}
.mw.mw--canon[data-page-voice="coach"] :where(.mc-msg.mw-say, .mc-callout.mw-say) {
  position: relative; display: block; max-width: 30rem; margin-block: var(--sp-title);
  padding: var(--sp-tight) var(--sp-para); border: 1px solid var(--color-speech-line);
  border-radius: var(--r-speech); background: var(--color-speech-soft); color: var(--color-ink);
  box-shadow: var(--elevation-speech); font: 600 1.0625rem/1.5 var(--font-body);
}
.mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say::after { display: none; }
.mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say p {
  margin: 0; max-width: none; color: inherit; font: inherit;
}
.mw.mw--canon[data-page-voice="coach"] .mw-say--right::before {
  right: -7px; top: 1.25rem; bottom: auto; left: auto;
  border-width: 1px 1px 0 0; border-color: var(--color-speech-line); background: var(--color-speech-soft);
}
.mw.mw--canon[data-page-voice="coach"] .mw-say--soft::before {
  border-color: var(--color-speech-line); background: var(--color-speech-soft);
}
.mw.mw--canon[data-page-voice="coach"] :where(.mc-band--sunken, .mw-band--sunken, .mw-on-dark) .mw-say:not(.mw-say--key) {
  background: var(--color-paper);
}
.mw.mw--canon[data-page-voice="coach"] :where(.mc-band--sunken, .mw-band--sunken, .mw-on-dark) .mw-say:not(.mw-say--key)::before {
  background: var(--color-paper);
}
.mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say--key {
  max-width: none; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem);
  border: 0; border-radius: 24px; background: var(--color-navy); color: var(--color-paper);
  box-shadow: none;
}
.mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say--key p {
  color: inherit; font: 700 clamp(1.25rem, 2.2vw, 1.625rem)/1.3 var(--font-head);
  letter-spacing: -.01em;
}
.mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say--key::before {
  right: -12px; top: 50%; width: 24px; height: 24px;
  border: 0; border-radius: 4px; background: var(--color-navy);
  transform: translateY(-50%) rotate(45deg);
}

/* One width per semantic figure role, independent of the page's grid. */
.mw.mw--canon[data-page-voice="coach"] .mw-fig--hero { width: var(--fig-hero); max-width: var(--fig-hero); }
.mw.mw--canon[data-page-voice="coach"] .mw-fig--beside { width: var(--fig-beside); max-width: var(--fig-beside); }
.mw.mw--canon[data-page-voice="coach"] .mw-fig--inline { width: var(--fig-inline); max-width: var(--fig-inline); }
.mw.mw--canon[data-page-voice="coach"] [data-figure-scale="emphasis"] .mw-fig--beside {
  width: 14rem; max-width: 14rem;
}
.mw.mw--canon[data-page-voice="coach"] [data-figure-scale="scene"] .mw-fig--beside {
  width: 17rem; max-width: 17rem;
}
.mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mc-split {
  grid-template-columns: minmax(0, 1fr) 17rem; gap: 0;
}
.mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mw-say {
  margin-left: auto;
}
.mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mw-fig {
  margin-left: -.75rem;
}
@media (min-width: 760px) {
  .mw.mw--canon[data-page-voice="coach"] [data-figure-scale="emphasis"] .mc-callout-grid {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}
.mw.mw--canon[data-page-voice="coach"] .mc-hero-figure .mw-fig--hero { margin-inline: auto; }

/* The numbered journey carries the direction colour even without reveal animation. */
.mw.mw--canon[data-page-voice="coach"] .mc-step-no {
  background: var(--mc-gold); border-color: var(--mc-gold); color: var(--color-navy-deep);
}

/* One load entrance on this page; ongoing character motion is visibility-scoped per instance. */
.js .mw.mw--canon[data-page-voice="coach"] .mc-figure {
  opacity: 1; transform: none; transition: none;
}
.js .mw.mw--canon[data-page-voice="coach"] .mw-fig--hero {
  animation: mw-coach-enter var(--t-enter) var(--ease) both;
}
@keyframes mw-coach-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.mw.mw--canon[data-page-voice="coach"] .mc-runa .guide-eyes,
.mw.mw--canon[data-page-voice="coach"] .mc-figure.is-visible .guide-hand { animation: none; }
.mw.mw--canon[data-page-voice="coach"] .mw-fig.is-motion-visible .guide-eyes {
  transform-origin: 134px 121px; animation: mw-coach-blink 6.8s ease-in-out infinite;
}
.mw.mw--canon[data-page-voice="coach"] .mw-fig--hero[data-character-motion="greeting"].is-motion-visible .guide-hand {
  transform-origin: 206px 226px; animation: mw-coach-wave 8s ease-in-out infinite;
}
@keyframes mw-coach-blink {
  0%, 42%, 46%, 100% { transform: scaleY(1); }
  44% { transform: scaleY(.1); }
}
@keyframes mw-coach-wave {
  0%, 2%, 18%, 100% { transform: rotate(0); }
  5% { transform: rotate(6deg); }
  9% { transform: rotate(-12deg); }
  13% { transform: rotate(7deg); }
  16% { transform: rotate(-5deg); }
}

/* A sticky action is a conditional long-page component, not decoration. */
.mw.mw--canon[data-page-voice="coach"] .mw-sticky-cta {
  border: 0; border-radius: var(--r-surface); box-shadow: var(--elevation-floating);
  transition: transform var(--t-enter) var(--ease), opacity var(--t-enter) var(--ease);
}
.mw.mw--canon[data-page-voice="coach"] .mw-sticky-cta .mc-btn { border-radius: var(--r-control); }

@media (max-width: 559px) {
  .mw.mw--canon[data-page-voice="coach"] .mw-fig--hero { width: var(--fig-hero-s); max-width: var(--fig-hero-s); }
  .mw.mw--canon[data-page-voice="coach"] .mw-fig--beside { width: var(--fig-beside-s); max-width: var(--fig-beside-s); }
  .mw.mw--canon[data-page-voice="coach"] .mw-fig--inline { width: var(--fig-inline-s); max-width: var(--fig-inline-s); }
  .mw.mw--canon[data-page-voice="coach"] .mc-scene .mw-fig { width: var(--fig-hero-s); }
  .mw.mw--canon[data-page-voice="coach"] [data-figure-scale="emphasis"] .mw-fig--beside {
    width: 10rem; max-width: 10rem;
  }
  .mw.mw--canon[data-page-voice="coach"] [data-figure-scale="scene"] .mw-fig--beside {
    width: 11rem; max-width: 11rem;
  }
  .mw.mw--canon[data-page-voice="coach"] :where(.mc-msg.mw-say, .mc-callout.mw-say) {
    width: 100%; max-width: none;
  }
  .mw.mw--canon[data-page-voice="coach"] .mw-say--mobile-down::before {
    top: auto; right: auto; bottom: -7px; left: 2rem; border-width: 0 1px 1px 0;
  }
  .mw.mw--canon[data-page-voice="coach"] .mw-say--mobile-up::before {
    top: -7px; right: auto; bottom: auto; left: 2rem; border-width: 1px 0 0 1px;
  }
  .mw.mw--canon[data-page-voice="coach"] .mc-callout.mw-say--key::before {
    top: auto; right: auto; bottom: -9px; left: 2rem; width: 18px; height: 18px;
    border: 0; background: var(--color-navy); transform: rotate(45deg);
  }
}

@media (max-width: 859px) {
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mc-split {
    grid-template-columns: minmax(0, 1fr); gap: .75rem;
  }
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mc-split > div:first-child {
    display: contents;
  }
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mc-checks { grid-row: 1; }
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mw-say {
    grid-row: 2; width: 100%; margin: var(--sp-title) 0 0;
  }
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mw-fig {
    grid-row: 3; justify-self: start; margin-left: 0;
  }
  .mw.mw--canon[data-page-voice="coach"] [data-character-layout="speaker-close"] .mc-note {
    grid-row: 4; margin-top: var(--sp-title);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .mw.mw--canon[data-page-voice="coach"] .mw-fig--hero,
  .mw.mw--canon[data-page-voice="coach"] .mw-fig .guide-eyes,
  .mw.mw--canon[data-page-voice="coach"] .mw-fig .guide-hand { animation: none !important; }
  .mw.mw--canon[data-page-voice="coach"] .mc-btn,
  .mw.mw--canon[data-page-voice="coach"] .mc-btn .mw-tactile,
  .mw.mw--canon[data-page-voice="coach"] .mw-sticky-cta { transition: none; }
  .mw.mw--canon[data-page-voice="coach"] .mc-btn:hover,
  .mw.mw--canon[data-page-voice="coach"] .mc-btn:active { transform: none; }
}