/* ---------------------------------------------------------------------------
   Surface: Match (/de/match/ und /en/match/, kurz ragnity.ai/match)

   Das Ziel des QR-Codes auf den Event-Visitenkarten. Wer hier landet, hat
   Stefanie vor zwei Minuten die Hand gegeben — die Seite ist die Fortsetzung
   dieser Begegnung und kein Verkaufsprospekt. Deshalb ist sie kurz, deshalb
   steht die persoenliche Ebene oben und das Angebot darunter.

   DIE DREI FLAECHEN SIND DIE VISITENKARTE, in ihrer Reihenfolge:
   Amber (die Begegnung) -> Ink (die Position) -> Papier (die Situationen und
   der naechste Schritt). Wer die Karte in der Hand haelt, sieht auf dem Schirm
   dieselbe Abfolge wieder.

   ZWEI ABWEICHUNGEN VON docs/design-system.md, beide bewusst, beide hier
   dokumentiert, damit sie nicht als Versehen weitergetragen werden:

   1. AMBER IST HIER EIN BAND. Das Design-System sagt ausdruecklich "es ist
      keine Bandfarbe" — mit der Begruendung, dass eine zweite Bandfarbe auf der
      Landingpage die Frage "welches Kapitel ist warm" neu aufmacht. Diese Seite
      hat keine Kapitel: sie hat drei Flaechen, und die Reihenfolge IST der
      Inhalt. Das Argument greift hier also nicht. Gemessen bleibt alles im
      Rahmen — Ink auf Amber 11,59:1, Amber gegen Papier 1,61:1 als Flaeche.
   2. AMBER UND INK BERUEHREN SICH. Die Regel "nie zwei verschiedene Bandfarben
      nebeneinander" existiert, damit Baender auf einer langen Seite Kapitel
      markieren statt zu dekorieren. Hier sind es drei Flaechen auf einer
      Bildschirmlaenge, die zusammen eine Bewegung ergeben. Auf der Landingpage
      gilt die Regel unveraendert weiter.

   DIE FALLE AUF AMBER, gemessen und nicht geschaetzt: --color-text-muted
   liegt auf Amber bei 3,97:1 und faellt damit unter AA. Genau wie .btn--ghost
   auf Papier ist das ein Element, das aussieht als funktioniere es. Auf dieser
   Flaeche ist deshalb JEDER Text Ink (11,59:1); die Hierarchie kommt aus
   Groesse und Gewicht, nicht aus Helligkeit. Wer hier .lead oder .label
   unveraendert einsetzt, baut den Fehler wieder ein.

   Mobile first: jede Regel unterhalb steht unbedingt, jede Verbreiterung ist
   ein min-width darueber. Laedt nach core.css und benutzt ausschliesslich
   deren Tokens.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1 — AMBER: die persoenliche Fortsetzung des Events
   =========================================================================== */

/* KEIN .section--tight (geaendert 2026-08-25, Stefanie). Die Amber-Flaeche
   lief mit 0,6 x --section-gap und stand damit sichtbar enger als der
   Ink-Abschnitt direkt darunter — auf dem Handy fiel der Unterschied an der
   gemeinsamen Kante auf. Beide Baender teilen sich jetzt denselben Rhythmus,
   auf jeder Breite; das ist ein Sonderfall weniger statt eines mehr.

   Der Grund fuer die enge Variante war der vCard-Knopf ueber der Falz. Der
   bleibt: nachgemessen endet er bei 390 px jetzt auf 497 statt 445 px Hoehe
   und liegt damit weiterhin klar ueber jeder Telefon-Falz. */
.mt-hero {
  background-color: var(--color-amber);
  color: var(--color-ink);
}

.mt-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

/* Ink statt --color-text-muted, siehe Kopfkommentar. */
.mt-hero__kicker {
  color: var(--color-ink);
}

.mt-hero__title {
  max-width: 18ch;
}

/* DIE WINKENDE HAND. Sie steht in einem eigenen span, und zwar aus zwei
   Gruenden, die beide nichts mit Gestaltung zu tun haben.

   aria-hidden: der zugaengliche Name der Ueberschrift ist damit "Hello again"
   und nicht "Hello again winkende Hand". Die Hand verstaerkt den Gruss, sie
   ergaenzt ihn nicht — vorgelesen wuerde sie nur stoeren.

   letter-spacing zurueck auf 0: h1 laeuft mit --tracking-display, also -0,045em
   negativer Laufweite. Auf einem Emoji zieht das die Hand an das "n" davor
   heran, weil sie fast so breit ist wie ihr Kaestchen. Der Wert wird deshalb
   nur fuer dieses eine Zeichen aufgehoben.

   KEINE GROESSENANGABE. Das Emoji kommt nicht aus Geist — die Schrift hat es
   nicht — sondern von der Farb-Emoji-Schrift des Systems, und deren Metriken
   unterscheiden sich je nach Plattform. Ein fester Wert wuerde auf genau einem
   Geraet stimmen. Es laeuft mit der Zeile mit. */
.mt-hero__wave {
  letter-spacing: var(--tracking-normal);
}

/* Der Lead traegt hier die Hero-Groesse, nicht die Abschnittsgroesse: er ist
   die zweite Aussage der Seite und keine Bildunterschrift. Farbe bleibt Ink,
   der Abstand macht die Hierarchie. */
.mt-hero__lead {
  max-width: 44ch;
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
}

/* DER VCARD-KNOPF STEHT JETZT IN core.css, als .btn--on-accent.

   Bis 2026-08-26 war er hier ein .mt-btn: Ink-Flaeche, Papier-Schrift, beim
   Hover getauscht. Am selben Tag ist der Ink-Rahmen im Hover gefallen und der
   Knopf ist zur stehenden Antwort fuer Amber-Flaechen geworden — damit ist er
   keine Eigenheit dieser Seite mehr und gehoert nach core.css, so wie es die
   Regel in CLAUDE.md vorsieht. Die Begruendung steht dort am Block.

   (Zwischenstand am 2026-08-25 war Amber-Schrift auf Ink, 11,59:1, als Zitat
   der gedruckten Karte. Stefanie hat auf Papier zurueckgestellt: auf einer
   Amber-Flaeche stand ein zweites Amber im Knopf, und der Knopf war damit
   weniger Signal als die Flaeche um ihn herum. Der Befund bleibt richtig, auch
   wenn die Regel jetzt woanders wohnt.) */

.mt-hero__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

/* Die Kontaktzeilen. <address> ist hier semantisch richtig: es sind die
   Kontaktdaten der Person, um die es auf der Seite geht. */
.mt-hero__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-style: normal;
}

/* Name und Rolle tragen DASSELBE Gewicht (Stefanie, 2026-08-25). Der Name
   stand auf --weight-semibold und damit eine Stufe ueber der Rolle; die zwei
   Zeilen sind aber ein Block und keine Ueberschrift mit Unterzeile. */
.mt-hero__id-name,
.mt-hero__id-role {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Die Adresse bleibt klein geschrieben — --text-meta ist genau dafuer da.
   Eine grossgeschriebene E-Mail-Adresse liest sich als Schrei und laesst sich
   schlechter abtippen. */
.mt-hero__id-mail {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  /* Fingerkuppe statt Mauszeiger: 13px Text ist sonst ein 13px hohes Ziel,
     also die Haelfte des WCAG-Minimums. Das Polster bleibt AUF JEDER BREITE
     stehen — docs/design-system.md nimmt es bei 48rem wieder weg, weil dort
     ein Mauszeiger zielt, aber 48rem ist auch ein Tablet im Hochformat, und
     auf einer Seite mit vier Links kostet das Polster am Desktop nichts. */
  padding-block: var(--space-1);
}

@media (min-width: 48rem) {
  .mt-hero__inner {
    gap: var(--space-6);
  }

  /* Erst hier nebeneinander. Schmaler waere die Adresszeile neben dem Knopf
     zu eng, und der Knopf soll auf dem Handy allein stehen. */
  .mt-hero__action {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
  }
}

/* ===========================================================================
   2 — INK: die Position, wie die Rueckseite der Karte
   =========================================================================== */

.mt-pos {
  position: relative;
  overflow: hidden;
}

.mt-pos__inner {
  position: relative;
  z-index: 1;
}

/* Amber als Schrift, und das ist die eine Stelle, an der das erlaubt ist:
   auf Ink misst sie 11,59:1. Auf Papier waere dieselbe Zeile 1,61:1. */
.mt-pos__kicker {
  color: var(--color-amber);
}

.mt-pos__title {
  margin-top: var(--space-4);
  max-width: 16ch;
}

/* DER SCHLUSSPUNKT IST AMBER, UND ER WIRD ERZEUGT — im Markup steht keiner.
   Das ist genau das Verfahren, das docs/voice.md unter "Headline full stops"
   beschreibt und landing.css in Lavendel benutzt: der Punkt traegt eine eigene
   Farbe, und Markup kann das nicht, ohne Satzzeichen in ein span zu wickeln.
   Wer die Ueberschrift aendert, tippt also weiterhin KEINEN Punkt.
   Amber auf Ink misst 11,59:1. */
.mt-pos__title::after {
  content: ".";
  color: var(--color-amber);
}

.mt-pos__lead {
  margin-top: var(--space-6);
  max-width: 46ch;
}

/* Der gedrehte Schriftzug. Erst ab 64rem sichtbar: schmaler nimmt er dem Satz
   die Luft, die dieser Abschnitt braucht, und ein angeschnittenes Wort neben
   drei Zeilen Text liest sich als Fehler statt als Absicht.

   Absolut positioniert, damit er die Hoehe des Abschnitts nicht mitbestimmt —
   der Anschnitt oben und unten entsteht durch overflow: hidden am Abschnitt,
   der Anschnitt rechts durch das Verschieben ueber die Kante hinaus.

   writing-mode statt rotate(): der Text laeuft damit von selbst von oben nach
   unten, ohne dass ein Transform-Ursprung nachgerechnet werden muss.

   Die Farbe ist dieselbe Idee wie der grosse Schriftzug im Footer — eine
   Flaechenfarbe als Schrift, bewusst an der Schwelle (1,12:1 auf Ink, der
   Footer liegt bei 1,11:1 auf Papier). Rein dekorativ, deshalb aria-hidden
   und nicht auswaehlbar. */
.mt-pos__mark {
  display: none;
}

@media (min-width: 64rem) {
  .mt-pos__inner {
    /* Der Satz endet, bevor der Schriftzug anfaengt. */
    padding-right: clamp(6rem, 12vw, 12rem);
  }

  .mt-pos__mark {
    display: block;
    position: absolute;
    top: 50%;
    /* GANZ IM BILD, NICHT ANGESCHNITTEN (Stefanie, 2026-08-25). Vorher stand
       hier translate(20%, ...), das Wort lief also ueber die rechte Kante
       hinaus und wurde von overflow: hidden gekappt. Jetzt sitzt es mit dem
       Abstand der Seitenspalte innen — es steht damit auf derselben Linie wie
       alles andere auf der Seite, statt an der Fensterkante zu kleben.

       180 Grad gedreht: das Wort laeuft von unten nach oben. rotate und nicht
       scale — gedreht bleibt Schrift lesbar, gespiegelt waere sie es nicht.

       Die -50% bleiben die vertikale Zentrierung zu top: 50%. Weil translate
       aussen steht, rechnet es im Koordinatensystem des Elternelements; die
       Drehung innen dreht nur um den eigenen Mittelpunkt und verschiebt
       nichts. */
    right: var(--gutter);
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    /* DIE GROESSE IST GEGEN DIE ABSCHNITTSHOEHE GEWAEHLT, nicht gegen die
       Breite, und daran ist die erste Fassung gescheitert: mit
       clamp(9rem, 15vw, 14rem) war das Wort bei 1024 px rund 660 px hoch in
       einem 380 px hohen Abschnitt, sichtbar blieb "Ragn". Sieben Zeichen
       ergeben etwa 4,3em Hoehe.

       NACHGEMESSEN mit diesen Werten, 1024 bis 1920: der Schriftzug liegt auf
       jeder Breite vollstaendig innerhalb des Abschnitts — oben und unten
       bleiben 124 bis 156 px Luft, rechts die 41 bis 48 px des
       Spaltenabstands. overflow: hidden am Abschnitt bleibt trotzdem stehen,
       als Netz und nicht als Werkzeug. */
    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.06em;
    line-height: 0.78;
    color: var(--color-ink-lift);
    user-select: none;
    pointer-events: none;
  }
}

/* ===========================================================================
   3 — PAPIER: die wiedererkennbaren Situationen
   =========================================================================== */

/* DER PUNKT KOMMT AUS DEM CSS, nicht aus dem HTML — dasselbe Muster wie
   .mt-pos__title::after oben und wie die Abschnittsueberschriften der
   Landingpage. docs/voice.md sagt es als Regel fuer Autoren: den Punkt nicht
   tippen, sonst stehen zwei da und der zweite hat die falsche Farbe.

   LAVENDEL AUF PAPIER IST DER FALL, DEN docs/design-system.md AUSDRUECKLICH
   VERBIETET — "Never put lavender, amber or linen text on paper", gemessen mit
   1,95:1. Hier ist es trotzdem richtig, und der Unterschied ist der Grund fuer
   die Regel: verboten ist LESBARER TEXT in einer Flaechenfarbe. Dieser Punkt
   traegt keine Bedeutung. Er faellt weg, ohne dass ein Wort fehlt, und der Satz
   ist ohne ihn vollstaendig — genau wie die Haarlinien, von denen das
   Design-System sagt, man duerfe sich nie auf sie verlassen.

   ZUM VERGLEICH: der Amber-Punkt auf Ink oben steht bei 11,59:1, also sechsmal
   so deutlich. Dieser hier ist Absicht und leise (Stefanie, 26.08.2026). WER
   IHN NACHBAUT: nur fuer Satzzeichen, nie fuer ein Wort. */
/* WENIGER LUFT NACH UNTEN (26.08.2026, Stefanie). Der Abstand zwischen den
   vier Punkten und dem Lavendelkasten war der volle --section-gap, also bis zu
   10rem, und las sich wie ein Kapitelwechsel zwischen zwei Dingen, die
   zusammengehoeren: die vier Ausgangslagen stellen die Frage, der Kasten
   darunter ist die Antwort.

   0,6 x --section-gap ist KEIN neuer Wert, sondern genau das Verhaeltnis, das
   core.css unter .section--tight bereits als "enger als normal" fuehrt. Nur als
   eigene Regel statt als Klasse, weil .section--tight padding-block setzt und
   hier ausschliesslich der untere Abstand gemeint ist — oben trennt die Zeile
   weiterhin sauber vom Ink-Band.

   HIER UNBEDENKLICH, ANDERS ALS BEIM HERO: der Kopfkommentar dieser Datei
   beschreibt, warum .section--tight aus .mt-hero wieder entfernt wurde — dort
   trafen zwei verschieden gefaerbte Baender aufeinander und der Unterschied
   war an der gemeinsamen Kante sichtbar. Hier sind beide Flaechen Papier, es
   gibt keine Kante, und der Rhythmus der Baender bleibt unberuehrt.

   .mt-cta traegt bereits padding-top: 0, der ganze Abstand kommt also aus
   dieser einen Zeile. */
.mt-cases {
  padding-bottom: calc(var(--section-gap) * 0.6);
}

.mt-cases__title {
  max-width: 16ch;
}

.mt-cases__title::after {
  content: ".";
  color: var(--color-lavender);
}

/* Zeilen, keine Kaesten. Vier gerahmte Boxen waeren vier Features; hier sollen
   es vier Saetze sein, die jemand ueberfliegt. Die Haarlinie oben an jeder
   Zeile macht daraus eine Liste statt einer Sammlung. */
.mt-cases__list {
  margin-top: var(--space-7);
  list-style: none;
  display: grid;
  gap: 0;
}

.mt-case {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--space-5);
}

.mt-case__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

.mt-case__text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 42ch;
}

/* 48rem. Die Begruendung war urspruenglich "weil die Saetze hier kurz sind";
   seit der Neufassung der vier Punkte am 26.08.2026 sind sie es nicht mehr —
   aus je einem Halbsatz sind ein bis zwei Zeilen mehr geworden. Der Wert bleibt
   trotzdem: .mt-case__text laeuft gegen max-width 42ch, die Spalte ist bei
   48rem etwa so breit, und die Zeilenlaenge stimmt damit weiter. WENN DIE
   PUNKTE NOCH EINMAL LAENGER WERDEN, ist das hier die Stelle zum Nachmessen —
   nicht die Schriftgroesse. */
@media (min-width: 48rem) {
  .mt-cases__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .mt-case {
    padding-block: var(--space-6);
  }
}

/* ===========================================================================
   4 — PAPIER: der eigentliche naechste Schritt
   =========================================================================== */

/* EIN LAVENDELKASTEN, KEIN VIERTES BAND (Stefanie, 2026-08-25). Lavendel ist
   die Signalfarbe der Marke, und die Einladung ist das Signal der Seite — aber
   als Vollbreiten-Band waere es die vierte Flaeche auf einer Seite, deren
   ganze Idee die Dreiteilung Amber/Ink/Papier der Visitenkarte ist. Als
   gerundeter Kasten auf Papier bleibt die Abfolge oben unberuehrt, und es ist
   ausserdem das Muster, das die Landingpage fuer ihren Abschluss schon
   benutzt: "CTA — paper, one ink box". Hier eben in Lavendel.

   DRITTES MAL DIESELBE FALLE, und deshalb steht sie hier noch einmal:
   --color-text-muted liegt auf Lavendel bei 3,26:1 (auf Amber waren es
   3,97:1). Im Kasten ist deshalb JEDER Text Ink — 9,52:1 — und die Hierarchie
   kommt aus Groesse und Gewicht. Das gilt auch fuer die Mono-Zeile unter dem
   Knopf, die als .label sonst Muted traegt.

   DER KNOPF DARF HIER NICHT .btn--primary SEIN. Der ist selbst eine
   Lavendelflaeche und misst gegen diesen Grund 1,00:1 — die Pille loest sich
   auf, genau wie im Hover-Befund in core.css. .btn--ink steht mit 9,52:1
   gegen den Grund und traegt Papierschrift mit 18,61:1.

   AUCH DER FOKUSRING BRAUCHT HIER EINE ENTSCHEIDUNG. --color-focus misst auf
   Lavendel 3,01:1 und nimmt die 3:1 fuer Fokusindikatoren nur um 0,01 — zu
   knapp, um sich darauf zu verlassen. Im Kasten ist der Ring deshalb Ink
   (9,52:1). Das ist derselbe Gedanke wie .ink-surface in core.css, nur fuer
   eine helle Akzentflaeche; einen eigenen Haken dafuer gibt es noch nicht,
   weil es bisher diese eine Stelle ist. */
/* Oben 0, unten 0,6 x --section-gap (26.08.2026, Stefanie) — dieselbe
   Verengung wie bei .mt-cases darueber, damit der untere Teil der Seite EINEN
   Rhythmus hat und nicht zwei. Kasten und Weitergabe-Zeile ruecken zusammen:
   die Zeile ist der Nachsatz zur Einladung, nicht das naechste Kapitel.

   Der sichtbare Abstand endet an der Haarlinie von .mt-share__inner; die
   space-6 darunter gehoeren schon zur Zeile und bleiben, wo sie sind. */
.mt-cta {
  padding-top: 0;
  padding-bottom: calc(var(--section-gap) * 0.6);
}

/* GANZE INHALTSBREITE UND MITTIG (26.08.2026, Stefanie).

   Bis dahin lief die Box auf --container-text (46rem) und stand linksbuendig
   im Container, wie jeder andere Textblock der Seite. Jetzt fuellt sie die
   volle Breite von .container und alles darin ist zentriert.

   DAS IST DER EINZIGE ZENTRIERTE BLOCK DER SEITE, und das ist Absicht: der
   Bruch im Satzspiegel ist genau das Signal. Alles davor ist linksbuendig
   gelesen worden — Hero, Position, die vier Faelle — und dieser eine Block
   stellt sich quer dazu. Wer bis hierher scrollt, sieht an der Form, dass die
   Seite etwas von ihm will.

   ACHTUNG BEI DER ZEILENLAENGE: die Box ist jetzt bis zu 82,5rem breit, aber
   zentrierter Flattersatz wird ab etwa 50 Zeichen schwer zu lesen, weil das
   Auge den Zeilenanfang jedes Mal neu suchen muss. Deshalb behaelt .mt-cta__text
   sein max-width und bekommt margin-inline: auto — die BOX ist breit, der SATZ
   ist es nicht. Wer hier einen zweiten Absatz einbaut, gibt ihm dasselbe. */
.mt-cta__box {
  background-color: var(--color-lavender);
  color: var(--color-ink);
  border-radius: var(--radius-box);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

/* DER PUNKT KOMMT AUS DEM CSS, gleiches Muster wie bei .mt-cases__title und
   .mt-pos__title. Papier auf Lavendel, 1,95:1 — leise und Absicht (Stefanie,
   26.08.2026).

   Bis kurz zuvor stand hier ein Fragezeichen, und das war der heiklere Fall:
   die Zeile war ein Aussagesatz, das Fragezeichen also das einzige, was sie
   ueberhaupt zur Frage machte — Bedeutung bei 1,95:1. Mit "Schauen wir, was
   möglich ist" ist die Zeile aus sich heraus vollstaendig und der Punkt wieder
   reine Dekoration. Er faellt weg, ohne dass ein Wort fehlt, und damit gilt
   dieselbe Begruendung wie fuer den Lavendel-Punkt weiter oben.

   NUR FUER SATZZEICHEN, nie fuer ein Wort. */
.mt-cta__title::after {
  content: ".";
  color: var(--color-paper);
}

.mt-cta__box :focus-visible {
  outline-color: var(--color-ink);
}

/* margin-inline: auto, sonst klebt der 40ch-Satz am linken Rand einer jetzt
   viel breiteren Box und die Zentrierung der Ueberschrift geht ins Leere. */
.mt-cta__text {
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  max-width: 40ch;
  margin-inline: auto;
}

/* align-items: center statt flex-start — der Knopf und die Mono-Zeile darunter
   sitzen mittig unter dem Satz. Die Spalte bleibt eine Spalte: der Knopf soll
   auch auf 390px nicht neben seiner Fussnote stehen. */
.mt-cta__action {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* DER VERSUCH MIT AMBER IM HOVER IST ZURUECKGENOMMEN (26.08.2026, Stefanie).

   Fuer ein paar Stunden fuellte sich dieser Knopf im Hover mit Amber statt mit
   Papier. Gemessen war das der schwaechere Stand: die Pille stand mit 1,22:1
   gegen die Lavendel-Box, Papier steht mit 1,95:1 dort. Der Unterschied trug
   sich nur ueber den Farbton.

   ZURUECK AUF .btn--on-accent, ohne eigene Regel. Der Knopf hat hier keine
   Sonderbehandlung mehr, und das ist der Punkt: Knopf-Hover auf Lavendel ist
   IMMER Papier. Die Regel steht in core.css am Block und in
   docs/design-system.md; hier steht nur, dass die Ausnahme geprueft und
   verworfen wurde, damit sie niemand ein zweites Mal erfindet. */

/* Die Mono-Zeile unter dem Knopf. .label faerbt sich Muted, was hier 3,26:1
   waere; auf dieser Flaeche traegt sie Ink wie alles andere. */
.mt-cta__note {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .mt-cta__box {
    padding: var(--space-8) var(--space-8);
  }
}

/* ===========================================================================
   5 — PAPIER: die leise Weitergabe
   =========================================================================== */

/* Zweitrangig im Satz, nicht mehr in der Farbe (26.08.2026, Stefanie).
   Kleiner Satz, keine Ueberschrift — aber seit heute ein gefuellter Amber-Knopf
   statt des Umriss-Knopfs. Wer selbst gemeint ist, hat oben schon abgebogen;
   dieser Abschnitt richtet sich an alle anderen, und der Knopf darf dafuer
   sichtbar sein. */
.mt-share {
  padding-top: 0;
}

.mt-share__inner {
  max-width: var(--container-text);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.mt-share__text {
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-width: 46ch;
}

@media (min-width: 48rem) {
  .mt-share__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

/* ===========================================================================
   FUSS
   =========================================================================== */

/* Nicht .site-footer: der grosse Footer traegt vier Spalten und einen
   Riesen-Schriftzug und waere laenger als die Seite, die er abschliesst. */
.mt-foot {
  border-top: 1px solid var(--color-hairline);
}

.mt-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
  font-size: var(--text-meta);
  font-family: var(--font-mono);
}

.mt-foot__link {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease);
  /* Wieder die Fingerkuppe, und wieder auf jeder Breite. */
  padding-block: var(--space-2);
}

.mt-foot__link:hover {
  color: var(--color-ink);
}

.mt-foot__legal {
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  /* Erst hier ans rechte Ende. Auf dem Handy bricht die Zeile ohnehin um, und
     ein nach rechts geschobenes Copyright allein in Zeile zwei sieht aus, als
     waere etwas verrutscht. */
  .mt-foot__legal {
    margin-left: auto;
  }
}

/* DER WEITERGEBEN-KNOPF: Amber gefuellt, im Hover Ink mit Papier-Schrift.

   ANDERE RICHTUNG ALS .btn--on-accent, und der Grund ist der Untergrund. Die
   Accent-Klasse sitzt AUF Amber oder Lavendel, ist dort Ink und wird hell.
   Dieser Knopf sitzt auf PAPIER, ist dort Amber und wird dunkel. Beide Male
   geht der Knopf im Hover den groesstmoeglichen Schritt weg von seiner eigenen
   Flaeche — die Bewegung ist dieselbe, die Farben sind es nicht.

   KEIN RAHMEN, gemessen: die Amber-Pille steht mit 1,61:1 gegen das Papier.
   Das ist derselbe Wert, der auf der Amber-Flaeche oben gegen die Papier-Pille
   steht, und dort traegt er auch ohne Kante. Die Schrift ist davon unberuehrt:
   Ink auf Amber misst 11,59:1, im Hover Papier auf Ink 18,61:1.

   NICHT .btn--outline, das hier vorher stand. Der Umriss-Knopf ist die leise
   Variante auf Papier und bleibt es fuer alle anderen Flaechen — er ist hier
   nur nicht mehr gewollt.

   NICHT IN core.css: eine Flaeche, ein Knopf. Sobald ein zweiter Amber-Knopf
   auf Papier gebraucht wird, wandert die Regel nach core.css, so wie es
   .btn--on-accent vorgemacht hat. */
.mt-share__btn {
  background-color: var(--color-amber);
  color: var(--color-ink);
}

.mt-share__btn:hover {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
}