/* =========================================================================
   Mundwerk — MyChance-Mühlenkreis 2.0
   Gestaltungsschicht der gefuehrten Seite (Guided landing / Coach-led page)

   Wird NACH styles.css und theme-brochure.css geladen und gilt nur innerhalb
   von .mc. Header, Footer, Demo-Leiste und Navigation bleiben unveraendert —
   die Seite ist weiterhin dieselbe Website, nur der Inhalt wird gefuehrt.

   HALTUNG
   Die Seite ist kein Katalog. Sie beantwortet in einer festen Reihenfolge
   die Fragen eines Menschen, der noch keinen Plan hat. Deshalb:

     · Eine Spalte, ein Gedanke. Text bricht bei 42 rem, nicht bei 68 ch.
     · Flaechen tragen nichts. Der Rhythmus entsteht aus Abstand und
       Haarlinie, nicht aus farbigen Baendern (Farbkanon, Regel 1–4).
     · Gold erscheint nur als Marke eines Schritts: Ziffernkreis,
       Zeitstrahl, Fortschrittslinie, Haupt-CTA. Zusammen unter 3 %.
     · Bewegung ist Ankunft, nicht Dekoration. Jedes Element bewegt sich
       genau einmal, beim ersten Erscheinen, 720 ms, und danach nie wieder.
     · prefers-reduced-motion schaltet jede Bewegung ab — die Seite bleibt
       dabei vollstaendig sichtbar, nichts haengt an einer Animation.

   DIE FIGUR
   Runa erscheint viermal. Jede Erscheinung hat eine psychologische Aufgabe
   und eine eigene Pose; sie wiederholt nie den Fliesstext daneben. Zwischen
   den vier Auftritten ist sie nicht da. Das ist die Regel, an der eine
   Maskottchen-Seite sonst scheitert.
   ========================================================================= */

.mc {
  --mc-ink:        #141A21;
  --mc-ink-2:      #4A5561;
  --mc-ink-3:      #626C79;   /* auf Weiss 5,23:1. #77828F sah ruhiger aus und
                                 erreichte nur 3,91:1 — unter der AA-Grenze,
                                 gemessen am 10. September 2026 */
  /* 11. September 2026, Operator: #FAFBFC war gegen Weiss praktisch unsichtbar —
     der Wechsel Weiss <-> Grau trug den Seitenrhythmus nicht mehr. #F0F3F7 liegt
     rund 10 % Leuchtdichte unter Weiss statt 3 % und bleibt fuer --mc-ink-3
     ueber der AA-Grenze (gemessen 4,79:1). Linien wandern mit, sonst verschwinden
     Kartenraender auf der dunkleren Flaeche. */
  --mc-line:       #DCE2EA;
  --mc-line-soft:  #E7ECF2;
  --mc-paper:      #FFFFFF;
  --mc-sunken:     #F0F3F7;
  /* Buehnenton hinter der Figur. Vom Operator vorgegeben als #111e28 bei 20 %
     auf Weiss (11. September 2026). Grund: helles Blondhaar und ein hellblaues
     Hemd verlieren sich auf Weiss, und die weisse Sprechkarte hebt sich davor
     nicht ab. Auf diesem Ton ist die Karte das hellste Element im Bild.
     Textfarben darauf: --mc-ink 13,4:1 · --mc-ink-2 5,01:1 · --mc-ink-3 3,45:1
     — deshalb steht auf der Buehne NUR die weisse Karte, nie Fliesstext. */
  --mc-stage:      #CFD2D4;
  --mc-stage-line: #BCC2C6;

  --mc-gold:       #F4B247;
  --mc-gold-ink:   #7A4A00;   /* Gold als Schrift waere 1,70:1 — verboten */
  --mc-gold-soft:  #FFF4DC;

  --mc-measure:    42rem;
  --mc-wide:       68rem;
  /* Stil E, Operatorentscheidung 11. September 2026 (Abend): Segoe UI, wie auf
     der Uebersetzungsseite unter D-62 — auf .mc begrenzt, kein globaler Wechsel.
     Beide Schrift-Tokens werden hier ueberschrieben, damit jedes Bauteil, das
     var(--font-head) liest, mitgeht. */
  --font-head:     'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:     'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mc-navy:       #003366;
  --mc-gap:        clamp(3rem, 6vw, 5rem);   /* vorher 4,5–8,5 rem: die Luft trug die Dramaturgie, jetzt traegt sie die Figur */
  --mc-ease:       cubic-bezier(.16, 1, .3, 1);

  background: var(--mc-paper);
  color: var(--mc-ink-2);
  font-family: var(--font-body);
}

/* ---------- 1. Raster ---------- */

.mc-wrap  { width: 100%; max-width: var(--mc-wide); margin-inline: auto; padding-inline: var(--s-6); }
@media (min-width: 1024px) { .mc-wrap { padding-inline: var(--s-8); } }

.mc-band  { padding-block: var(--mc-gap); }
.mc-band--sunken { background: var(--mc-sunken); }
.mc-band--line   { border-top: 1px solid var(--mc-line); }
.mc-narrow { max-width: var(--mc-measure); }

/* :where() haelt die Spezifitaet dieser Grundregel bei 0-1-0. Ohne das gewinnt
   `.mc p` gegen jede Bauteilklasse, die selbst ein <p> ist — und setzt deren
   margin-top und max-width still zurueck. Am 10. September 2026 hat genau das
   drei Bauteile gleichzeitig verschoben: mc-claim, mc-say und mc-helped. */
.mc :where(p) { max-width: var(--mc-measure); margin: 0 0 1.1em; }
.mc :where(p):last-child { margin-bottom: 0; }
/* Kurze bis mittlere Texte ohne Witwen (Krehel: pretty fuer Absaetze, balance nur fuer Titel). */
.mc :where(p, li, dd, summary, .mc-say) { text-wrap: pretty; }

/* Strichstaerke folgt dem Textgewicht daneben: 1,5 px neben 400, 2 px neben 600
   (Krehel). Die Icons stehen inline im HTML mit 1,75–2; CSS ueberschreibt das
   Praesentationsattribut, ohne die Markup-Dateien anzufassen. */
.mc :where(.mc-req, .mc-facts, .mc-lines, .mc-meta, .mc-reg) svg { stroke-width: 1.5; }
.mc :where(.mc-reg--needed) svg { stroke-width: 2; }

/* ---------- 2. Typografie ---------- */

.mc h1, .mc h2, .mc h3, .mc h4 { font-family: var(--font-head); color: var(--mc-navy); letter-spacing: -.015em; text-wrap: balance; }

/* Zu viele schwarze, zu grosse Titel — Operator, 11. September 2026. Navy, 700, kleiner. */
.mc h1 { font-size: clamp(2rem, 3.4vw, 2.625rem); line-height: 1.12; font-weight: 700; margin: 0 0 1rem; }
.mc h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.2;  font-weight: 700; margin: 0 0 .75rem; }
.mc h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; margin: 0 0 .35rem; letter-spacing: -.01em; }
/* Das eine handschriftliche Akzentwort im Titel — markierter Kanon-Ausreisser (Stil E). */
.mc-hand { font-family: Caveat, 'Segoe Script', cursive; font-style: normal; font-weight: 600; font-size: 1.25em; color: var(--mc-gold-ink); white-space: nowrap; }

.mc-eyebrow {
  display: block; font-family: var(--font-head); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mc-ink-3); margin: 0 0 1.25rem;
}
.mc-lead { font-size: clamp(1.125rem, 1.6vw, 1.1875rem); line-height: 1.5; color: #424242; letter-spacing: 0; }
.mc-sub  { color: var(--mc-ink-2); }
.mc-quiet{ color: var(--mc-ink-3); font-size: .9375rem; }

/* Ein Satz, der fuer sich steht. Kein Kasten, kein Gold — nur Groesse und Luft. */
.mc-claim {
  font-family: var(--font-head); font-weight: 700; color: var(--mc-navy);
  font-size: clamp(1.125rem, 2vw, 1.375rem); letter-spacing: -.01em; line-height: 1.35;
  margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
}

.mc-head { max-width: var(--mc-measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.mc-head p { color: var(--mc-ink-2); font-size: 1.0625rem; }

/* ---------- 3. Hero ---------- */

.mc-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.mc-hero .crumbs { margin-bottom: 2rem; }
.mc-hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .mc-hero-grid { grid-template-columns: 1.1fr 1fr; } }

/* Der Kopf-CTA dieser Seite ist laenger als "Kurs finden". Unter 1400 px
   sprengte er die Navigationszeile und erzeugte 87 px Seitenscroll —
   gemessen am 10. September 2026, nicht geschaetzt. */
@media (max-width: 1399px) { .nav-list .header-cta { display: none; } }

.mc-hero p.mc-lead { margin-bottom: 1rem; }

.mc-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 1.75rem; }

/* Die Szene (Stil E): ein weicher goldheller Blob hinter der Figur — Gold als kleine
   Flaeche, nicht als Bahn — und daneben ein kurzes Gespraech als Chat. */
.mc-scene { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .75rem; padding-top: 1.5rem; }
.mc-blob {
  position: absolute; inset: 0 auto 0 0; width: 62%; z-index: 0;
  background: var(--mc-gold-soft); border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
}
.mc-scene .mc-figure { position: relative; z-index: 1; }
.mc-scene--small { grid-template-columns: 1fr; padding-top: 0; max-width: 16rem; }
.mc-scene--small .mc-blob { width: 100%; inset: 10% 0 0 0; }
.mc-chat { position: relative; z-index: 1; display: grid; gap: .5rem; align-self: center; }
/* Weiss auf Weiss mit heller Kante war nicht zu sehen (Operator, 11. September 2026).
   Die Nachricht bekommt eine eigene Flaeche und eine sichtbare Kante. */
.mc-msg {
  margin: 0; padding: .625rem .875rem; border-radius: 16px 16px 16px 4px;
  background: #E8EEF6; color: var(--mc-ink); border: 1px solid #C9D5E3;
  font-size: .9375rem; line-height: 1.4; font-weight: 600;
}
.mc-msg--you { background: var(--mc-navy); color: #fff; border-color: var(--mc-navy); border-radius: 16px 16px 4px 16px; justify-self: end; font-weight: 400; }
/* Auf einer grauen Bahn wuerde die Fuellung mit dem Grund verschmelzen — dort Weiss. */
.mc-band--sunken .mc-msg { background: var(--mc-paper); }
.mc-msg--coach { display: inline-block; margin: 1.25rem 0 1rem; font-size: 1.0625rem; max-width: 34rem; }
@media (max-width: 599px) {
  .mc-scene { grid-template-columns: 1fr; }
  .mc-scene .mc-figure { width: 62%; }
  .mc-blob { width: 80%; }
}

.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.375rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; text-decoration: none;
}
.mc-btn--primary { background: var(--mc-gold); color: #002244; border-color: #E3A233; }
.mc-btn--primary:hover { background: #E8A430; color: #002244; }
/* Zweitaktion als Textlink (Fluent), nicht als zweiter Rahmenknopf. */
.mc-btn--ghost { background: none; color: var(--mc-navy); border-color: transparent; padding-inline: .25rem; font-weight: 600; }
.mc-btn--ghost:hover { color: #001a33; text-decoration: underline; text-underline-offset: 4px; }
.mc-btn--plain { min-height: 44px; padding: 0; color: var(--mc-ink); text-decoration: none; border: 0; }
.mc-btn--plain span { border-bottom: 1px solid var(--mc-line); padding-bottom: 2px; transition: border-color .18s ease; }
.mc-btn--plain:hover span { border-color: var(--mc-ink); }
.mc-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- 4. Die Figur ---------- */

.mc-runa { width: 100%; height: auto; display: block; }
.mc-runa .guide-eyes { transform-origin: 134px 121px; animation: mc-blink 5.4s infinite; }
@keyframes mc-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(.1); } }

/* Die Hand winkt einmal, wenn die Figur ankommt — nicht in Dauerschleife.
   Eine dauerhaft winkende Figur ist nach zehn Sekunden ein Fehler im Bild. */
.mc-figure.is-visible .guide-hand { animation: mc-wave 1.9s .55s var(--mc-ease) 2; transform-origin: 214px 236px; }
@keyframes mc-wave {
  0%, 62%, 100% { transform: rotate(0); }
  16% { transform: rotate(5deg); }
  30%, 48% { transform: rotate(-13deg); }
  39% { transform: rotate(6deg); }
}

/* Auftritt eins steht im Hero neben dem Text. */
/* Die Spalte bleibt breit, damit die Sprechzeile nicht mitschrumpft; nur die
   Figur selbst wird begrenzt. Vorher hing die Zeile an der Figurenbreite und
   war bei 375 px 240 px schmal.
   KEINE Buehnenflaeche im Hero: eine graue Platte unter der Figur wurde am
   11. September 2026 vom Operator verworfen — sie macht den ersten Bildschirm
   schmutzig. Der Hero bleibt weiss; die Sprechkarte traegt den Kontrast
   stattdessen ueber eine deutlich dunklere Kontur. */
.mc-hero-figure { position: relative; width: 100%; }
.mc-hero-figure .mc-figure { width: min(16rem, 58vw); margin-inline: auto; }
@media (min-width: 900px) { .mc-hero-figure .mc-figure { width: 100%; margin-inline: 0; } }
.mc-hero-figure .mc-say {
  border: 1.5px solid #6E7A87; box-shadow: 0 4px 16px rgba(20, 26, 33, .07);
}
.mc-hero-figure .mc-say::before { border-color: #6E7A87; border-width: 0 1.5px 1.5px 0; }

/* Sprechzeile. Kein Comic-Ballon: eine Linie, ein Satz, eine feine Spitze. */
.mc-say {
  position: relative; background: var(--mc-paper); border: 1px solid var(--mc-line);
  border-radius: 14px; padding: 1rem 1.125rem; box-shadow: 0 1px 2px rgba(20, 26, 33, .04);
  font-family: var(--font-head); font-weight: 500; color: var(--mc-ink);
  font-size: 1.0625rem; line-height: 1.45; letter-spacing: -.01em; max-width: 26rem;
}
.mc-say::after, .mc-say::before {
  content: ""; position: absolute; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--mc-paper); border: 1px solid var(--mc-line);
}
.mc-say::before { border-width: 0 1px 1px 0; }
.mc-say::after  { display: none; }

/* Hero: die Zeile sitzt ueber der Figur, Spitze nach unten. */
.mc-hero-figure .mc-say { margin-bottom: .75rem; }
.mc-hero-figure .mc-say::before { bottom: -7px; left: 2.25rem; }

/* ---------- 5. Coach-Auftritt (drei Mal im Seitenverlauf) ---------- */

/* Der Coach-Auftritt steht auf der Buehnenflaeche — sonst verliert sich die
   helle Figur, und die weisse Sprechkarte hat nichts, wovon sie sich abhebt. */
.mc-coach { padding-block: clamp(3rem, 6vw, 5rem); background: var(--mc-stage); }
.mc-coach-inner {
  display: grid; gap: 1rem 2rem; align-items: center;
  grid-template-columns: 10rem minmax(0, 1fr); max-width: 54rem;
}
@media (min-width: 700px) { .mc-coach-inner { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.25rem 2.5rem; } }

/* Das Brustbild wird hart geschnitten. Eine Ausblendung nach unten wurde am
   11. September 2026 verworfen: in diesem flachen Zeichenstil ist ein sauberer
   Schnitt normal, und ein Farbverlauf sieht aus, als wollte man das Fehlen der
   Beine verstecken. Weder Rahmen noch Blende — nur der kuerzere viewBox. */

/* Auf der Buehne braucht die Karte etwas mehr Gewicht als eine Haarlinie. */
.mc-coach .mc-say { border-color: var(--mc-stage-line); box-shadow: 0 6px 18px rgba(17, 30, 40, .10); }
.mc-coach .mc-say::before { border-color: var(--mc-stage-line); }

.mc-coach .mc-say { font-size: clamp(1.0625rem, 2vw, 1.3125rem); max-width: 30rem; padding: 1.125rem 1.25rem; }
/* Spitze zeigt nach links auf die Figur. */
.mc-coach .mc-say::before { left: -7px; top: 1.75rem; border-width: 0 0 1px 1px; }

/* Unter 600 px ist eine Figurenspalte plus Sprechzeile nebeneinander nicht
   mehr lesbar: die Zeile bricht auf sieben Zeilen à drei Woertern. Gemessen
   am 10. September 2026 bei 375 px. Also gestapelt, Spitze nach oben. */
@media (max-width: 599px) {
  .mc-coach-inner { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mc-coach-inner .mc-figure { width: 9.5rem; }
  .mc-coach .mc-say { max-width: none; }
  .mc-coach .mc-say::before { left: 2.5rem; top: -7px; border-width: 1px 0 0 1px; }
}

/* ---------- 6. Voraussetzungen ---------- */

.mc-req { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .mc-req { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mc-req { grid-template-columns: repeat(4, 1fr); } }
.mc-req li {
  display: flex; align-items: center; gap: .625rem; min-height: 60px;
  padding: .875rem 1rem; border: 1px solid var(--mc-line); border-radius: 12px;
  background: var(--mc-paper); font-family: var(--font-head); font-weight: 600;
  color: var(--mc-ink); font-size: 1rem; letter-spacing: -.01em;
}
.mc-req svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mc-gold-ink); }

/* ---------- 7. Pillen und Haken (Stil E / D) ---------- */

.mc-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mc-pills li {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9375rem;
  border-radius: 999px; background: var(--mc-paper); border: 1px solid var(--mc-line);
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--mc-ink);
}
.mc-band--sunken .mc-pills li { border-color: #CBD5E1; }

.mc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; max-width: var(--mc-measure); }
.mc-checks li { display: flex; gap: .625rem; align-items: baseline; font-size: 1.0625rem; line-height: 1.45; color: var(--mc-ink-2); }
.mc-checks li b { color: var(--mc-ink); font-weight: 600; }
.mc-checks svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--mc-gold-ink); transform: translateY(3px); }

.mc-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px)  { .mc-quotes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mc-quotes { grid-template-columns: repeat(3, 1fr); } }
.mc-quotes li {
  padding: 1rem 1.125rem; border-radius: 16px 16px 16px 4px;
  background: var(--mc-sunken); border: 1px solid var(--mc-line);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--mc-ink);
}

/* Zwei Spalten: Text links, Figur rechts (Stil D: die Figur ist gross, der Text kurz). */
.mc-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .mc-split { grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; } }
.mc-figure--side { width: 12rem; justify-self: center; }
@media (min-width: 860px) { .mc-figure--side { width: 100%; } }

/* Die eine dunkle Bahn der Seite: navy Sprechblase fuer die Beruhigungszeile. */
.mc-callout-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .mc-callout-grid { grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.5rem; } }
.mc-callout { position: relative; background: var(--mc-navy); color: #fff; border-radius: 24px; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem); }
.mc-callout p { margin: 0; max-width: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.3; letter-spacing: -.01em; color: #fff; }
@media (min-width: 760px) {
  .mc-callout::after { content: ""; position: absolute; right: -12px; top: 50%; width: 24px; height: 24px; background: var(--mc-navy); transform: translateY(-50%) rotate(45deg); border-radius: 4px; }
}

.mc-conv-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .mc-conv-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; } }
/* Projektseite und Kalender bekommen genau EINEN Auftritt, am Schluss, klein —
   Operatorentscheidung 11. September 2026. Kein Chat, keine Buehne: dort ist sie
   ein Gruss, kein Gespraechsfuehrer. */
.mc-sign { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 700px) { .mc-sign { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; } }
.mc-sign .mc-figure { width: 9rem; justify-self: center; }
@media (min-width: 700px) { .mc-sign .mc-figure { width: 100%; } }

/* Rundes Portraet neben dem Namen. Die Figur ist nach der Verantwortlichen des
   Bereichs gezeichnet (Operator, 11. September 2026) — deshalb steht sie hier
   ueberhaupt neben einem echten Namen. Der Kreis schneidet die Locken an; das ist
   bei einem Portraet normal und haelt das Gesicht gross. */
.mc-portrait {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--mc-gold-soft);
}
.mc-runa--head { width: 100%; height: 100%; display: block; }
.mc-person--portrait { display: flex; align-items: center; gap: 1rem; }
.mc-person--portrait > span { display: block; }

/* Ein Auftritt neben einem Textblock, ohne Buehne und ohne Chat. */
.mc-aside { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 760px) { .mc-aside { grid-template-columns: minmax(0, 1fr) 12rem; gap: 2.5rem; } }
.mc-aside .mc-figure { width: 9rem; justify-self: center; }
@media (min-width: 760px) { .mc-aside .mc-figure { width: 100%; } }
.mc-aside--left { }
@media (min-width: 760px) { .mc-aside--left { grid-template-columns: 12rem minmax(0, 1fr); } }

/* ---------- 8. Ablauf — Zeitstrahl ---------- */

.mc-steps { list-style: none; margin: 0; padding: 0; position: relative; max-width: 46rem; }
.mc-steps::before {
  content: ""; position: absolute; left: 17px; top: 34px; bottom: 34px;
  width: 2px; background: var(--mc-line);
}
/* Der gefuellte Teil waechst mit dem Scrollen; --p wird von mychance.js gesetzt. */
.mc-steps::after {
  content: ""; position: absolute; left: 17px; top: 34px; bottom: 34px; width: 2px;
  background: var(--mc-gold);
  /* scaleY statt height: transform laeuft auf dem Compositor, height loest Layout aus. */
  transform: scaleY(var(--p, 0)); transform-origin: 0 0;
  transition: transform .28s linear;
}
.mc-step { position: relative; padding: 0 0 2.5rem 3.75rem; }
.mc-step:last-child { padding-bottom: 0; }
.mc-step-no {
  /* z-index, weil `.mc-steps::after` als Pseudoelement des Elternteils NACH allen
     Kindern gemalt wird: die goldene Fortschrittslinie lag sonst ueber den Ziffern
     und sah aus wie ein Durchstreichen. Am 11. September 2026 im Screenshot gesehen. */
  position: absolute; left: 0; top: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mc-paper);
  border: 2px solid var(--mc-line); color: var(--mc-ink-3);
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
  transition: background-color .22s var(--mc-ease), border-color .22s var(--mc-ease), color .22s var(--mc-ease);
}
.mc-step.is-visible .mc-step-no { background: var(--mc-gold); border-color: var(--mc-gold); color: #002244; }
.mc-step h3 { margin-bottom: .5rem; padding-top: .3rem; font-size: 1.25rem; }
.mc-step p { color: var(--mc-ink-2); }

/* ---------- 9. Bausteine des Plans ---------- */

.mc-tiles { display: grid; gap: 1px; background: var(--mc-line); border: 1px solid var(--mc-line); border-radius: 14px; overflow: hidden; }
@media (min-width: 700px)  { .mc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mc-tiles { grid-template-columns: repeat(3, 1fr); } }
.mc-tile { background: var(--mc-paper); padding: 1.5rem 1.375rem; }
/* Kein Hover: die Kachel ist kein Link. Ein Hover-Zustand auf einer Flaeche ohne
   Ziel ist ein falsches Versprechen (Krehel: Bewegung nur mit Funktion). */
.mc-tile h3 { font-size: 1.0625rem; }
.mc-tile p { font-size: .9688rem; color: var(--mc-ink-2); line-height: 1.5; }

/* Grenze dessen, was die Seite verspricht. Bewusst nuechtern, kein Warnton. */
.mc-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.375rem 1.5rem;
  border: 1px solid var(--mc-line); border-left: 3px solid var(--mc-ink-3);
  border-radius: 12px; background: var(--mc-sunken); max-width: 44rem;
}
.mc-note p { font-size: 1rem; color: var(--mc-ink-2); }
.mc-note strong { color: var(--mc-ink); font-weight: 600; }

/* ---------- 11. Echte Wege ---------- */

.mc-ways { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .mc-ways { grid-template-columns: repeat(3, 1fr); } }
.mc-way {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem 1.5rem; border: 1px solid var(--mc-line); border-radius: 14px;
  background: var(--mc-paper);
}
/* Kein Hover-Lift: das Beispiel ist kein Link (siehe .mc-tile). */
.mc-age {
  align-self: flex-start; padding: .25rem .625rem; border-radius: 999px;
  background: var(--mc-gold-soft); color: var(--mc-gold-ink);
  font-family: var(--font-head); font-weight: 600; font-size: .8125rem; letter-spacing: .01em;
}
.mc-way h3 { font-size: 1.125rem; margin: 0; }
.mc-way p { font-size: .9688rem; line-height: 1.5; }

/* ---------- 12. Flexible Teilnahme ---------- */

.mc-flex-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) { .mc-flex-grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.mc-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-line); }
.mc-facts li {
  display: flex; gap: .75rem; align-items: baseline; padding: .9375rem 0;
  border-bottom: 1px solid var(--mc-line); font-size: 1rem; color: var(--mc-ink);
}
.mc-facts svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--mc-gold-ink); transform: translateY(2px); }

/* ---------- 13. Veranstaltungen ---------- */

.mc-events { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .mc-events { grid-template-columns: repeat(3, 1fr); } }
.mc-event {
  display: flex; flex-direction: column; gap: .625rem; height: 100%;
  padding: 1.5rem; border: 1px solid var(--mc-line); border-radius: 14px; background: var(--mc-paper);
}
/* Kein Hover-Lift: die Terminkarte ist kein Link (siehe .mc-tile). */
.mc-date {
  font-family: var(--font-head); font-weight: 600; font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mc-gold-ink);
}
.mc-date span { color: var(--mc-ink-3); font-weight: 400; letter-spacing: .02em; }
.mc-event h3 { font-size: 1.1875rem; margin: 0; }
.mc-event p { font-size: .9688rem; line-height: 1.5; margin: 0; }
.mc-reg {
  margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--mc-line-soft);
  display: inline-flex; align-items: center; gap: .4375rem; font-size: .875rem; color: var(--mc-ink-2);
}
.mc-reg svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mc-reg--needed { color: var(--mc-gold-ink); font-weight: 600; }
.mc-note + .mc-note { margin-top: 1rem; }

/* ---------- 15. Kontakt ---------- */

.mc-contact-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) { .mc-contact-grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.mc-card {
  padding: 1.75rem 1.625rem; border: 1px solid var(--mc-line); border-radius: 16px; background: var(--mc-paper);
  box-shadow: 0 1px 2px rgba(20, 26, 33, .04);
}
/* Kein gezeichnetes Portraet neben einem echten Namen: die Karte nennt eine
   bestaetigte Person, die Begleitfigur ist eine Illustration. Deshalb steht
   hier ein reiner Textblock und kein Avatar. */
.mc-person { display: block; margin-bottom: 1.25rem; }
.mc-person b { display: block; font-family: var(--font-head); font-weight: 600; color: var(--mc-ink); font-size: 1.0625rem; }
.mc-person span { font-size: .9375rem; color: var(--mc-ink-3); }
.mc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mc-lines li { display: flex; gap: .625rem; align-items: center; font-size: 1rem; }
/* Die Anschrift hat drei Zeilen — das Symbol steht dann oben, nicht in der Mitte. */
.mc-lines li.mc-line--multi { align-items: flex-start; }
.mc-lines li.mc-line--multi svg { margin-top: 3px; }
.mc-lines svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--mc-ink-3); }
.mc-lines a { color: var(--mc-ink); text-decoration: none; border-bottom: 1px solid var(--mc-line); min-height: 44px; display: inline-flex; align-items: center; }
.mc-lines a:hover { border-color: var(--mc-ink); }

/* ---------- 15b. Terminanfrage ----------
   Die Seite hat genau eine Handlung. Sie steht hier als Formular, nicht als
   Link auf eine andere Seite: wer bis hierher gelesen hat, soll den Termin im
   selben Bildschirm anfragen koennen. Alle Ziele sind mindestens 44 px hoch. */

.mc-form {
  padding: 1.75rem 1.625rem; border: 1px solid var(--mc-line); border-radius: 16px;
  background: var(--mc-paper); box-shadow: 0 1px 2px rgba(20, 26, 33, .04);
}
.mc-form-title { font-size: 1.1875rem; margin-bottom: 1.25rem; }

.mc-fields { display: grid; gap: .875rem; margin-bottom: 1.5rem; }
@media (min-width: 520px) { .mc-fields { grid-template-columns: 1fr 1fr; } }
.mc-field { display: grid; gap: .375rem; }
.mc-field > span { font-family: var(--font-head); font-size: .8125rem; font-weight: 600; color: var(--mc-ink); letter-spacing: .01em; }
.mc-field input {
  min-height: 48px; padding: 0 .875rem; font: inherit; font-size: 1rem; color: var(--mc-ink);
  background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 10px;
  transition: border-color .18s ease;
}
.mc-field input::placeholder { color: var(--mc-ink-3); }
.mc-field input:hover { border-color: var(--mc-ink-3); }
.mc-field input:focus-visible { border-color: var(--mc-ink); }

.mc-choice { border: 0; margin: 0 0 1.5rem; padding: 0; }
.mc-choice legend {
  padding: 0; margin-bottom: .625rem;
  font-family: var(--font-head); font-size: .8125rem; font-weight: 600; color: var(--mc-ink); letter-spacing: .01em;
}
.mc-choice .mc-quiet { margin-top: .75rem; }
.mc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mc-chip { position: relative; }
.mc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mc-chip span {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.25rem; min-height: 44px; padding: 0 .875rem;
  border: 1px solid var(--mc-line); border-radius: 10px; background: var(--mc-paper);
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--mc-ink);
  transition: border-color .18s ease, background-color .18s ease, transform .16s var(--mc-ease);
}
.mc-chip:hover span { border-color: var(--mc-ink-3); }
.mc-chip:active span { transform: scale(.96); }
.mc-chip input:checked + span { background: var(--mc-gold); border-color: #E3A233; color: #002244; }
.mc-chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Freitag endet um 14:00 — die zwei spaeten Zeiten werden dann echt deaktiviert,
   nicht nur ausgegraut, damit sie auch per Tastatur nicht wählbar sind. */
.mc-chip input:disabled + span { opacity: .38; cursor: not-allowed; }
/* Die fuenf Wochentage gehoeren in eine Zeile — bei 375 px brach der Freitag
   sonst allein in die zweite und sah aus wie eine andere Kategorie. */
@media (max-width: 460px) {
  .mc-chips[data-day] { gap: .375rem; }
  .mc-chips[data-day] .mc-chip { flex: 1 1 0; }
  .mc-chips[data-day] .mc-chip span { min-width: 2.5rem; padding-inline: .25rem; }
}

.mc-btn--wide { width: 100%; }
.mc-form-note { margin: .875rem 0 0; font-size: .9375rem; color: var(--mc-ink-2); }
.mc-form-note.is-done { color: var(--mc-gold-ink); font-weight: 600; }
.mc-form .mc-quiet { margin-top: .75rem; }
.mc-card-foot {
  margin: 0; padding-top: .875rem; border-top: 1px solid var(--mc-line-soft);
  font-size: .875rem; color: var(--mc-ink-2); line-height: 1.5;
}
.mc-card-foot b { color: var(--mc-ink); font-weight: 600; }

/* ---------- 16. FAQ ---------- */

.mc-faq { max-width: 46rem; border-top: 1px solid var(--mc-line); }
.mc-q { border-bottom: 1px solid var(--mc-line); }
.mc-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px; padding: 1.125rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
  color: var(--mc-ink); transition: color .18s ease;
}
.mc-q summary::-webkit-details-marker { display: none; }
.mc-q summary:hover { color: var(--mc-gold-ink); }
.mc-q summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mc-ink-3); transition: transform .2s var(--mc-ease); }
.mc-q[open] summary svg { transform: rotate(45deg); }
.mc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--mc-ease); }
.mc-q[open] .mc-a { grid-template-rows: 1fr; }
.mc-a > div { overflow: hidden; }
.mc-a p { padding-bottom: 1.25rem; font-size: 1rem; color: var(--mc-ink-2); max-width: 40rem; }
@media (prefers-reduced-motion: reduce) { .mc-a, .mc-q summary svg { transition: none; } }

/* ---------- 17. Foerderung ---------- */

.mc-funding { padding-block: clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--mc-line); background: var(--mc-sunken); }
.mc-funding h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.mc-funding p { font-size: .9688rem; line-height: 1.6; max-width: 52rem; }
.mc-funding .mc-quiet { margin-top: 1rem; }

/* ---------- 18. Fortschritt und Dock ---------- */

/* Duenne Leselinie ganz oben. Sie sagt: die Seite hat eine Reihenfolge. */
.mc-progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; z-index: 200;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--mc-gold); pointer-events: none;
}

.mc-dock {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 95;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem .5rem .5rem 1.25rem; border-radius: 999px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px);
  border: 1px solid var(--mc-line);
  /* Drei Lagen statt einer breiten: Ring, Anhebung, Umgebungstiefe (Krehel). */
  box-shadow: 0 0 0 1px rgba(20, 26, 33, .04), 0 2px 6px -2px rgba(20, 26, 33, .10), 0 12px 32px rgba(20, 26, 33, .10);
  transform: translate(-50%, 130%); opacity: 0;
  /* Austritt (dieser Zustand) kuerzer als Eintritt: 220 ms gegen 420 ms. */
  transition: transform .22s var(--mc-ease), opacity .18s ease;
}
.mc-dock.is-on { transform: translate(-50%, 0); opacity: 1; transition: transform .42s var(--mc-ease), opacity .3s ease; }
.mc-dock span { font-size: .9375rem; color: var(--mc-ink-2); white-space: nowrap; }
/* Pille in Pille: bei 999 px aussen muss innen ebenfalls 999 px stehen (konzentrisch). */
.mc-dock .mc-btn { min-height: 44px; padding-inline: 1.125rem; font-size: .9375rem; border-radius: 999px; }
@media (max-width: 640px) {
  .mc-dock { left: .75rem; right: .75rem; bottom: .75rem; transform: translateY(130%); padding-left: 1rem; }
  .mc-dock.is-on { transform: translateY(0); }
  .mc-dock span { display: none; }
  .mc-dock .mc-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .mc-dock { transition: opacity .2s linear; } }

/* ---------- 19. Ankunft ---------- */

/* Grundzustand nur, wenn JS laeuft. Ohne JS ist alles sofort sichtbar —
   eine Seite darf nicht an einer Animation haengen. */
.js .mc [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .72s var(--mc-ease), transform .72s var(--mc-ease);
  transition-delay: var(--d, 0ms);
}
.js .mc [data-reveal].is-visible { opacity: 1; transform: none; }

.js .mc-figure { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .8s var(--mc-ease), transform .8s var(--mc-ease); }
.js .mc-figure.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .mc [data-reveal], .js .mc-figure { opacity: 1; transform: none; transition: none; }
  .mc-figure.is-visible .guide-hand, .mc-runa .guide-eyes { animation: none; }
  .mc-steps::after { transition: none; }
}

/* =========================================================================
   20. Bauteile der Architektur vom 11. September 2026

   Der Bereich hat jetzt drei Seiten mit drei Aufgaben. Was hier steht, gehoert
   zu den beiden neuen: der sachlichen Projektseite (`.mc--doc`) und dem
   Veranstaltungskalender. Die Begleitfigur kommt in diesem Abschnitt nicht
   vor — sie ist ausschliesslich das Mittel der Landing.
   ========================================================================= */

/* Informationsseiten atmen enger als die Landing: dort traegt die Luft die
   Dramaturgie, hier waere sie nur Scrollweg zwischen Fakten. */
.mc--doc .mc-band { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.mc--doc .mc-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.mc-after { margin-top: 2rem; }

/* ---------- 20a. Sprungmarken der Projektseite ----------
   Die Abnahmebedingung der Detailseite lautet: jede Frage in hoechstens einem
   Scroll oder einer Suche. Ohne Inhaltsverzeichnis ist das bei 13 Abschnitten
   nicht einzuhalten. */
.mc-toc {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--mc-line); border-radius: 14px; background: var(--mc-sunken);
}
.mc-toc h2 {
  font-family: var(--font-head); font-size: .75rem; font-weight: 600; margin: 0 0 .875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mc-ink-3);
}
.mc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
@media (min-width: 640px)  { .mc-toc ul { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
@media (min-width: 1024px) { .mc-toc ul { grid-template-columns: repeat(3, 1fr); } }
.mc-toc a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--mc-ink-2); text-decoration: none; font-size: .9375rem;
  border-bottom: 1px solid transparent;
}
.mc-toc a:hover { color: var(--mc-ink); border-color: var(--mc-line); }

/* ---------- 20b. Faktentabelle ----------
   Eine Definitionsliste, keine <table>: es sind Paare, keine Matrix. */
.mc-table { margin: 0; border-top: 1px solid var(--mc-line); }
.mc-table > div {
  display: grid; gap: .125rem; padding: .875rem 0; border-bottom: 1px solid var(--mc-line);
}
@media (min-width: 640px) { .mc-table > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; } }
.mc-table dt { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--mc-ink-3); }
.mc-table dd { margin: 0; font-size: 1.0625rem; color: var(--mc-ink); }

/* ---------- 20c. Unterstuetzungsbereiche ---------- */
.mc-areas { margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .mc-areas { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; } }
.mc-areas > div { padding-top: 1.125rem; border-top: 2px solid var(--mc-line); }
.mc-areas dt { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; color: var(--mc-ink); margin-bottom: .25rem; letter-spacing: -.015em; }
.mc-areas dd { margin: 0; font-size: .9688rem; line-height: 1.55; color: var(--mc-ink-2); }

/* ---------- 20d. Einfache Aufzaehlung ---------- */
.mc-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
@media (min-width: 700px) { .mc-plain { grid-template-columns: 1fr 1fr; gap: .625rem 2rem; } }
.mc-plain li { position: relative; padding-left: 1.375rem; font-size: 1rem; color: var(--mc-ink); }
.mc-plain li::before {
  content: ""; position: absolute; left: 0; top: .5625rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mc-gold);
}


/* ---------- 20f. Kachel-Zusatz ---------- */
.mc-tile-kicker {
  display: block; font-family: var(--font-head); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mc-ink-3); margin-bottom: .5rem;
}

/* ---------- 20g. Hervorgehobener Hinweis ----------
   Nur fuer die eine freigegebene Jobcenter-Aussage. Gold als schmale Kante und
   sehr helle Flaeche — die Farbkanon-Grenze fuer Gold liegt bei kleinen Flaechen,
   und #FFF4DC traegt dunklen Text ohne Kontrastverlust. */
.mc-note--strong { border-left: 3px solid var(--mc-gold); background: var(--mc-gold-soft); }

/* ---------- 20h. Naechster Termin ---------- */
.mc-next {
  display: grid; gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--mc-line); border-radius: 16px;
  background: var(--mc-paper); box-shadow: 0 1px 2px rgba(20, 26, 33, .04);
}
@media (min-width: 700px) { .mc-next { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; } }
.mc-next-when { margin: 0; }
.mc-next-when b {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 1.375rem; line-height: 1.2; color: var(--mc-ink); letter-spacing: -.02em;
}
.mc-next-when span { display: block; margin-top: .25rem; font-size: 1rem; color: var(--mc-gold-ink); font-weight: 600; }
.mc-next h3 { font-size: 1.375rem; }
.mc-next-type { color: var(--mc-ink-3); font-size: .9375rem; margin-bottom: 1rem; }
.mc-next p b { color: var(--mc-ink); font-weight: 600; }


/* ---------- 20i. Kalender — Monatsblock (K5, Operatorwahl 11. September 2026) ----------
   Zwei Vergleichsrunden mit sieben Darstellungen; K5 gewann, weil drei Dinge auf
   einen Blick da sind: der Monat als eigene Flaeche mit Zaehler, der Wochentag
   ausgeschrieben, das Ereignis gross. Eine Spalte, jede Zeile gleich gebaut. */
.mc-mblock { background: var(--mc-sunken); border-radius: 16px; padding: 1.375rem 1.5rem .5rem; margin-bottom: 1.125rem; }
.mc-mblock-head { display: flex; align-items: baseline; gap: .875rem; margin-bottom: .75rem; }
.mc-mblock-head h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 700; color: var(--mc-navy); letter-spacing: -.01em; }
.mc-mblock-head span { font-family: var(--font-head); font-size: .875rem; font-weight: 600; color: var(--mc-ink-3); }
.mc-mrows { list-style: none; margin: 0; padding: 0; }
.mc-mrow {
  display: grid; gap: .375rem 1.25rem; align-items: center;
  background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 12px;
  padding: .875rem 1.125rem; margin-bottom: .625rem;
}
@media (min-width: 600px) { .mc-mrow { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.mc-mdate { margin: 0; }
.mc-mdate i { display: block; font-style: normal; font-family: var(--font-head); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-gold-ink); }
.mc-mdate b { display: block; font-family: var(--font-head); font-size: 2.75rem; line-height: 1; font-weight: 700; color: var(--mc-navy); letter-spacing: -.02em; }
.mc-mrow[data-mode=needed] .mc-mdate i { color: var(--mc-navy); }
@media (max-width: 599px) { .mc-mdate b { display: inline; font-size: 2rem; margin-left: .5rem; } }
.mc-mrow h4 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--mc-navy); margin: 0 0 .125rem; letter-spacing: -.01em; }
.mc-slot-type { color: var(--mc-ink-3); font-size: .875rem; margin-bottom: .5rem; }
.mc-mrow > div > p:not(.mc-slot-type) { font-size: .9688rem; line-height: 1.55; color: var(--mc-ink-2); }
.mc-pill-time {
  padding: .1875rem .625rem; border-radius: 999px; background: var(--mc-gold-soft); border: 1px solid #E7CFA0;
  color: var(--mc-gold-ink); font-family: var(--font-head); font-weight: 600; font-size: .8125rem;
}

.mc-meta { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.mc-meta li { display: inline-flex; align-items: center; gap: .4375rem; font-size: .875rem; color: var(--mc-ink-3); }
.mc-meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Der Anmeldemodus ist die Frage, wegen der jemand die Karte liest. Er bekommt
   eine eigene Form, damit er nicht wie eine weitere graue Zeile aussieht. */
.mc-mode {
  padding: .1875rem .5rem; border: 1px solid var(--mc-line); border-radius: 999px;
  color: var(--mc-ink-2); font-size: .8125rem;
}
.mc-mode--needed { border-color: #E7CFA0; background: var(--mc-gold-soft); color: var(--mc-gold-ink); font-weight: 600; }

/* ---------- 20j. Leerzustand ----------
   Ein Rueckblick ohne Daten ist ein Leerzustand, keine erfundene Karte. */
.mc-empty {
  padding: clamp(1.5rem, 3vw, 2rem); border: 1px dashed var(--mc-line);
  border-radius: 14px; background: var(--mc-sunken); color: var(--mc-ink-2);
}
.mc-empty b { color: var(--mc-ink); }

/* Der Weiterfuehrungslink der Kontaktkarte steht auf einer eigenen Zeile: im
   Fliesstext eingebettet las er sich als Teil des Satzes ("... kommen. Alle Wege"). */
.mc-card-foot .mc-btn--plain { display: flex; margin-top: .75rem; }