/* ===========================================================================
   STARTSEITE — helles, farbiges Design
   ---------------------------------------------------------------------------
   Aufbau und Anmutung nach Merts drittem Bild (Fitness-App): heller Grund,
   grosse duenne Zahl, drei Kennzahlen in einer Reihe, farbige Kacheln.
   Kachelraster, Radien und die Eyebrow-Pille kommen aus "Stats Bento"
   (@uilayout.contact, Sammlung "dashboards"): dort rounded-3xl (24px) bei
   grossen Kacheln, p-10 / p-8 / p-6 gestaffelt, und die Pille als
   px-3 py-1 rounded-full text-[10px] uppercase tracking-widest.

   ZWEI MODI. Der Bereich hat EIGENE Farbtoken, weil er heller ist als der
   Rest der App. Sie werden hier einmal fuer Hell und einmal fuer Dunkel
   gesetzt - nie eine Farbe nur in einem Modus definieren, sonst faellt sie
   im anderen auf den Standard zurueck.
   =========================================================================== */

#bildStart {
  /* Dunkel (Grundfall der App) */
  --st-grund:   #141013;
  --st-karte:   rgba(255,255,255,.045);
  --st-kante:   rgba(255,255,255,.10);
  --st-text:    #F3E9EC;
  --st-leise:   #A99AA0;
  --st-still:   #6E6167;
  --st-gold:    #E8C07A;
  --st-gruen:   #4ADE80;
  --st-akzent:  #E5142A;
  /* Farbige Kacheln: gedeckt, nicht knallig - 55-65 % Creme daruntergelegt */
  --st-k-gold:  #E8C07A;
  --st-k-gruen: #4ADE80;
  --st-k-tint:  rgba(255,255,255,.06);
}
html.hell #bildStart {
  --st-grund:   #FAF7F5;
  --st-karte:   #FFFFFF;
  --st-kante:   rgba(21,16,19,.09);
  --st-text:    #1B1418;
  --st-leise:   #6B5C63;
  --st-still:   #9B8C93;
  --st-gold:    #B98A2E;
  --st-gruen:   #2F9E5C;
  --st-akzent:  #C21226;
  --st-k-gold:  #F0C96B;
  --st-k-gruen: #8FD9AC;
  --st-k-tint:  rgba(21,16,19,.04);
}

#bildStart { color: var(--st-text); }

/* ─────────────────────────────────────────────────────────────────────
   KOPF — Anrede fett, Zusatz mit farbig hervorgehobenem Wort
   ───────────────────────────────────────────────────────────────────── */
/* Der Anfang folgt Merts Vorbild: grosse Anrede, viel Luft, rechts eine
   ruhige Zeichnung. Die Anrede traegt den Bildschirm, nicht die Leiste. */
.st__kopf {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  margin: 10px 0 4px; min-height: 96px;
}
.st__gruss { flex: 1; min-width: 0; position: relative; z-index: 1; padding-right: 6px; }
.st__gruss h1 {
  margin: 0; font-family: var(--anzeige); font-size: 38px; font-weight: 700;
  line-height: 1.06; letter-spacing: -.03em; color: var(--st-text);
}
.st__gruss p { margin: 9px 0 0; font-size: 15px; color: var(--st-leise); }

.st__gruss p b { color: var(--st-akzent); font-weight: 700; }

.st__glocke {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--st-karte); border: 1px solid var(--st-kante); color: var(--st-text);
  transition: transform .18s var(--kurve);
}
.st__glocke:active { transform: scale(.94); }
.st__glocke svg { width: 18px; height: 18px; }
.st__punkt {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--st-akzent);
  border: 2px solid var(--st-grund);
}

/* ─────────────────────────────────────────────────────────────────────
   BLÖCKE
   ───────────────────────────────────────────────────────────────────── */
.st__block { margin-bottom: 26px; }
.st__bkopf { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.st__bkopf h2 {
  margin: 0; font-family: var(--anzeige); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; color: var(--st-text);
}
.st__zahl {
  min-width: 21px; height: 21px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-content: center;
  background: var(--st-k-tint); color: var(--st-leise);
  font-size: 11.5px; font-weight: 800;
}
.st__zahl--neu { background: rgba(229,20,42,.14); color: var(--st-akzent); }
.st__bunter { margin: 0 0 13px; font-size: 12.5px; line-height: 1.5; color: var(--st-still); }

/* ─────────────────────────────────────────────────────────────────────
   VORSCHLÄGE — waagerechte Reihe, antippbar
   ───────────────────────────────────────────────────────────────────── */
.st__reihe {
  display: flex; gap: 11px; overflow-x: auto; padding: 2px 0 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.st__reihe::-webkit-scrollbar { display: none; }
.st__vor {
  flex: none; width: 96px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; text-align: center;
  transition: transform .18s var(--kurve);
}
.st__vor:active { transform: scale(.95); }
.st__vbild {
  position: relative; width: 66px; height: 66px; border-radius: 22px;
  display: grid; place-content: center; margin-bottom: 7px;
  background: var(--st-karte); border: 1px solid var(--st-kante);
  /* KEIN overflow:hidden - sonst schneidet der Rahmen das Eckabzeichen ab.
     Das Bild wird stattdessen selbst gerundet. */
  transition: border-color .18s var(--kurve), box-shadow .18s;
}
.st__vbild img { width: 100%; height: 100%; object-fit: contain; padding: 9px; border-radius: 21px; }
.st__vbild svg { width: 24px; height: 24px; color: var(--st-still); }
/* Der Haken sitzt als Abzeichen in der Ecke, NICHT über dem ganzen Logo.
   Vorher deckte er die Marke vollständig zu — man sah den Zustand, aber
   nicht mehr, um welche Marke es überhaupt geht (Mert, 06.09.2026). */
.st__vhaken {
  position: absolute; right: -3px; bottom: -3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--st-gruen); color: #fff;
  border: 2px solid var(--st-grund);
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--kurve-feder);
}
.st__vhaken svg { width: 13px; height: 13px; color: #fff; }
.st__vor[aria-pressed="true"] .st__vbild {
  border-color: var(--st-gruen); box-shadow: 0 0 0 2px rgba(47,158,92,.25);
}
.st__vor[aria-pressed="true"] .st__vhaken { opacity: 1; transform: scale(1); }
.st__vname {
  font-size: 12px; font-weight: 700; color: var(--st-text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.st__vart { font-size: 10.5px; color: var(--st-still); line-height: 1.3; }
.st__vor--offen .st__vbild { border-style: dashed; }
.st__vor--offen .st__vname { color: var(--st-leise); }

.st__gewaehlt { margin: 9px 0 0; font-size: 12px; color: var(--st-leise); }
.st__link {
  background: none; color: var(--st-akzent); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   NEUE VERTRÄGE
   ───────────────────────────────────────────────────────────────────── */
.st__vertrag {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 14px; border-radius: 18px;
  background: var(--st-karte); border: 1px solid var(--st-kante);
  transition: transform .18s var(--kurve);
}
.st__vertrag:active { transform: scale(.985); }
.st__vtsym {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-content: center;
  background: rgba(229,20,42,.11); color: var(--st-akzent);
}
.st__vtsym svg { width: 19px; height: 19px; }
.st__vttext { flex: 1; min-width: 0; }
.st__vttext b { display: block; font-size: 14px; font-weight: 700; color: var(--st-text); }
.st__vttext i {
  display: block; font-style: normal; font-size: 11.5px; line-height: 1.45;
  color: var(--st-still); margin-top: 2px;
}
.st__vtneu {
  flex: none; padding: 4px 10px; border-radius: 999px;
  background: rgba(229,20,42,.13); color: var(--st-akzent);
  font-size: 11px; font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────
   LEERZUSTÄNDE — nie ein langes leeres Feld, immer mit Aussage
   ───────────────────────────────────────────────────────────────────── */
.st__leer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 20px 16px; border-radius: 18px;
  background: var(--st-k-tint); border: 1px dashed var(--st-kante);
}
.st__leer svg { width: 22px; height: 22px; color: var(--st-still); margin-bottom: 4px; }
.st__leer b { font-size: 13.5px; font-weight: 700; color: var(--st-text); }
.st__leer span { font-size: 12px; line-height: 1.55; color: var(--st-still); }
.st__leer--klein { padding: 15px 14px; }

/* ─────────────────────────────────────────────────────────────────────
   DIE GROSSE ZAHL — wie im Vorbild: kleines Label, riesige duenne Ziffer
   ───────────────────────────────────────────────────────────────────── */
/* Der Zahlenblock steht jetzt gleich unter der Anrede. Die Ziffer ist das
   praegende Element des Bildschirms - gross und duenn, wie im Vorbild. */
.st__zahlblock { margin: 22px 0 30px; }
.st__glabel { margin: 0; font-size: 13.5px; color: var(--st-still); }
.st__gross {
  margin: 6px 0 0; font-family: var(--anzeige);
  font-size: 86px; font-weight: 250; line-height: .98; letter-spacing: -.05em;
  color: var(--st-text); font-variant-numeric: tabular-nums;
}
.st__gnote { margin: 8px 0 22px; font-size: 12.5px; color: var(--st-still); }

/* Drei Kennzahlen nebeneinander */
.st__drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 0; }
.st__kz { min-width: 0; }
.st__kzl {
  display: block; font-size: 11.5px; color: var(--st-still); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st__kzw {
  display: block; font-family: var(--anzeige); font-size: 23px; font-weight: 600;
  color: var(--st-text); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.st__kzw i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--st-still); }

/* ─────────────────────────────────────────────────────────────────────
   FARBIGE KACHELN — Raster nach "Stats Bento"
   Eine grosse Kachel ueber zwei Zeilen, zwei kleinere daneben.
   ───────────────────────────────────────────────────────────────────── */
.st__bento {
  display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto;
  gap: 10px;
}
.st__k {
  position: relative; overflow: hidden; text-align: left;
  border-radius: 22px; padding: 16px 15px;
  border: 1px solid var(--st-kante); background: var(--st-karte);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .18s var(--kurve);
}
.st__k:active { transform: scale(.975); }
.st__k--gross { grid-row: span 2; justify-content: space-between; padding: 18px 16px; }

.st__kpille {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--st-k-tint); color: var(--st-leise);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.st__kwert {
  font-family: var(--anzeige); font-size: 38px; font-weight: 700; line-height: 1;
  color: var(--st-text); font-variant-numeric: tabular-nums; margin-top: 10px;
}
.st__kwert i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--st-still); }
.st__ktext { font-size: 11.5px; line-height: 1.45; color: var(--st-still); margin-top: 8px; }
.st__ksym {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-content: center; background: var(--st-k-tint); color: var(--st-leise);
}
.st__ksym svg { width: 16px; height: 16px; }
.st__k--gross .st__ksym { position: absolute; top: 16px; right: 15px; }
.st__klabel { font-size: 11.5px; font-weight: 700; color: var(--st-still); margin-top: 8px; }
.st__kwert2 {
  font-size: 15px; font-weight: 800; color: var(--st-text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die zwei kleinen Kacheln tragen Farbe - gedeckt, nicht knallig.
   Auf Farbe steht dunkler Text, damit er in beiden Modi lesbar bleibt. */
.st__k--gold  { background: var(--st-k-gold);  border-color: transparent; }
.st__k--gruen { background: var(--st-k-gruen); border-color: transparent; }
.st__k--gold .st__klabel, .st__k--gruen .st__klabel { color: rgba(27,20,24,.62); }
.st__k--gold .st__kwert2, .st__k--gruen .st__kwert2 { color: #1B1418; }
.st__k--gold .st__ksym, .st__k--gruen .st__ksym {
  background: rgba(27,20,24,.12); color: #1B1418;
}

/* ─────────────────────────────────────────────────────────────────────
   WEITERFÜHRENDE WEGE
   ───────────────────────────────────────────────────────────────────── */
.st__wege { display: flex; flex-direction: column; gap: 8px; }
.st__weg {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  min-height: 50px; padding: 0 14px; border-radius: 15px;
  background: var(--st-karte); border: 1px solid var(--st-kante);
  color: var(--st-text); font-size: 13.5px; font-weight: 600;
  transition: transform .18s var(--kurve);
}
.st__weg:active { transform: scale(.985); }
.st__weg svg { width: 17px; height: 17px; flex: none; color: var(--st-leise); }
.st__weg span { flex: 1; min-width: 0; }
.st__wpfeil { color: var(--st-still) !important; }

/* ─────────────────────────────────────────────────────────────────────
   SCHMALE RAHMEN — am App-Rahmen gemessen, nicht am Fenster
   ───────────────────────────────────────────────────────────────────── */
@container apprahmen (max-width: 340px) {
  .st__bento { grid-template-columns: 1fr; }
  .st__k--gross { grid-row: auto; }
  .st__gross { font-size: 62px; }
  .st__gruss h1 { font-size: 31px; }
    .st__drei { gap: 7px; }
  .st__kzw { font-size: 17px; }
}

/* Schon freigeschaltete Marken: ruhige Goldkante, damit man sie von den
   noch offenen Plaetzen unterscheidet, ohne dass es laut wird. */
.st__vor--schon .st__vbild { border-color: rgba(232,192,122,.5); }
.st__vor--schon .st__vart { color: var(--st-gold); font-weight: 700; }

/* ===========================================================================
   ANMELDEN — der erste Bildschirm
   Aufbau nach Merts drittem Bild ("Sign in"): viel Luft, Zeichen oben,
   zwei Felder, ein Knopf. Eigene Farbtoken wie die Startseite, damit Hell
   und Dunkel beide sitzen.
   =========================================================================== */
#bildAnmelden {
  --st-grund:  #141013; --st-karte: rgba(255,255,255,.045);
  --st-kante:  rgba(255,255,255,.10);
  --st-text:   #F3E9EC; --st-leise: #A99AA0; --st-still: #6E6167;
  --st-gruen:  #4ADE80; --st-akzent: #E5142A;
  color: var(--st-text);
}
html.hell #bildAnmelden {
  --st-grund:  #FAF7F5; --st-karte: #FFFFFF;
  --st-kante:  rgba(21,16,19,.09);
  --st-text:   #1B1418; --st-leise: #6B5C63; --st-still: #9B8C93;
  --st-gruen:  #2F9E5C; --st-akzent: #C21226;
}

.an { padding: 24px 0 10px; max-width: 380px; margin: 0 auto; }
.an__zeichen {
  width: 54px; height: 54px; border-radius: 17px; margin: 0 0 22px;
  display: grid; place-content: center;
  background: var(--st-karte); border: 1px solid var(--st-kante);
}
.an__zeichen img { width: 30px; height: auto; }
.an__titel {
  margin: 0; font-family: var(--anzeige); font-size: 27px; font-weight: 700;
  line-height: 1.15; letter-spacing: -.02em; color: var(--st-text);
}
.an__unter {
  margin: 9px 0 24px; font-size: 13.5px; line-height: 1.6; color: var(--st-leise);
}

.an__form { display: flex; flex-direction: column; gap: 14px; }
.an__feld { display: block; }
.an__was {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--st-still); margin-bottom: 7px;
}
.an__ein {
  width: 100%; min-width: 0; max-width: 100%;
  height: calc(1.5em + 30px); padding: 0 15px; border-radius: 14px;
  background: var(--st-karte); border: 1px solid var(--st-kante);
  color: var(--st-text); font: 600 15px/1.5 var(--schrift);
  transition: border-color .18s var(--kurve);
}
.an__ein::placeholder { color: var(--st-still); font-weight: 500; }
.an__ein:focus { outline: none; border-color: var(--st-akzent); }

.an__meldung { margin: 0; font-size: 12.5px; line-height: 1.5; min-height: 1px; }
.an__meldung[data-art="fehler"] { color: var(--st-akzent); }
.an__meldung[data-art="gut"]    { color: var(--st-gruen); }
.an__meldung[data-art="laeuft"] { color: var(--st-still); }

.an__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; border-radius: 999px; margin-top: 2px;
  background: var(--st-akzent); color: #fff;
  font-size: 15px; font-weight: 800;
  transition: transform .18s var(--kurve);
}
.an__knopf:active { transform: scale(.975); }
.an__knopf svg { width: 17px; height: 17px; }

.an__fuss { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--st-still); }
.an__link {
  background: none; color: var(--st-akzent); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ===========================================================================
   AB DER ZAHL — Aufbau nach Merts Uber-Eats-Vorbild (06.09.2026)
   ---------------------------------------------------------------------------
   Dort: Pillen-Umschalter, darunter eine Reihe runder Bilder mit Beschriftung,
   darunter Filterpillen, eine Hinweiszeile mit Link und eine grosse
   Pastell-Bannerkarte mit weissem Pillenknopf.

   Übernommen sind Aufbau und Verhältnisse, nicht die Farben: Statt Uber-Grün
   und -Orange die Hausfarben Gold und Grün, gedeckt. Statt Emoji die
   App-eigenen Zeichen — Emoji sehen auf jedem Gerät anders aus.
   =========================================================================== */

.uw { margin: 0 0 18px; }

/* Der Pillen-Umschalter ("Alle / Fahrten" im Vorbild) */
.uw__pillen {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  scrollbar-width: none;
}
.uw__pillen::-webkit-scrollbar { display: none; }
.uw__p {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--st-kante); background: var(--st-karte);
  color: var(--st-leise); font-size: 13.5px; font-weight: 700;
  transition: transform .18s var(--kurve), background .18s, color .18s, border-color .18s;
}
.uw__p:active { transform: scale(.96); }
.uw__p[aria-pressed="true"] {
  background: var(--st-text); color: var(--st-grund); border-color: var(--st-text);
}
.uw__ppunkt {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  background: var(--st-gruen);
}

/* Die Reihe runder Zeichen mit Beschriftung darunter */
.uw__reihe {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 4px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.uw__reihe::-webkit-scrollbar { display: none; }
.uw__w {
  flex: none; width: 68px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; transition: transform .18s var(--kurve);
}
.uw__w:active { transform: scale(.94); }
.uw__ws {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--st-k-tint); color: var(--st-leise);
}
.uw__ws svg { width: 24px; height: 24px; }
/* Farbe nach Gruppe — man sieht mit einem Blick, wohin ein Weg gehört. */
.uw__ws--auftrag { background: rgba(232,192,122,.16); color: var(--st-gold); }
.uw__ws--geld    { background: rgba(74,222,128,.14);  color: var(--st-gruen); }
.uw__ws--lernen  { background: rgba(229,20,42,.10);   color: var(--st-akzent); }
.uw__wt {
  font-size: 11.5px; font-weight: 600; color: var(--st-text); line-height: 1.25;
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Hinweiszeile mit Link */
.uw__hinweis {
  margin: 0 0 16px; padding: 14px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--st-still); border-top: 1px solid var(--st-kante);
}
.uw__mehr {
  background: none; color: var(--st-text); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Die grosse Bannerkarte */
.uban {
  position: relative; overflow: hidden; display: flex; align-items: center;
  gap: 10px; padding: 20px 18px; border-radius: 20px; margin: 0 0 24px;
}
.uban--gold  { background: rgba(232,192,122,.20); }
.uban--gruen { background: rgba(74,222,128,.16); }
html.hell .uban--gold  { background: #FBEBCB; }
html.hell .uban--gruen { background: #D8F2E2; }
.uban__text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.uban__text h3 {
  margin: 0; font-family: var(--anzeige); font-size: 19px; font-weight: 700;
  line-height: 1.2; letter-spacing: -.015em; color: var(--st-text);
}
html.hell .uban__text h3 { color: #1B1418; }
.uban__text p {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--st-leise);
  max-width: 30ch;
}
html.hell .uban__text p { color: rgba(27,20,24,.72); }
/* Der weisse Pillenknopf wie im Vorbild */
.uban__k {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: 999px; margin-top: 14px;
  background: var(--st-text); color: var(--st-grund);
  font-size: 13.5px; font-weight: 800;
  transition: transform .18s var(--kurve);
}
.uban__k:active { transform: scale(.96); }
html.hell .uban__k { background: #1B1418; color: #FFFFFF; }
html.hell 
/* Schmale Rahmen */
@container apprahmen (max-width: 340px) {
  .uw__w  { width: 62px; }
  .uw__ws { width: 52px; height: 52px; }
  .uban   { flex-direction: column; align-items: flex-start; }
  }

/* ===========================================================================
   MARKENKARTE — was hinter einer Marke steckt
   ---------------------------------------------------------------------------
   Öffnet sich im Blatt. Zeigt Angebot, Erwartungen, Fristen und den eigenen
   Stand. Kein Betrag: Die Vergütung wird je Kooperation vereinbart, eine Zahl
   hier wäre ein Versprechen, das die App nicht halten kann.
   =========================================================================== */
.mk__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mk__bild {
  width: 52px; height: 52px; border-radius: 16px; flex: none; overflow: hidden;
  display: grid; place-content: center;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.mk__bild img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.mk__text { flex: 1; min-width: 0; }
.mk__text b { display: block; font-family: var(--anzeige); font-size: 16px; font-weight: 700; }
.mk__text i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text-still); margin-top: 2px;
}
.mk__frei {
  flex: none; padding: 4px 10px; border-radius: 999px;
  background: rgba(74,222,128,.13); color: var(--gruen);
  font-size: 11px; font-weight: 800;
}
.mk__art {
  margin: 0 0 18px; padding: 9px 13px; border-radius: 10px;
  background: rgba(232,192,122,.11); border: 1px solid rgba(232,192,122,.26);
  color: var(--gold); font-size: 12.5px; font-weight: 700;
}

.mk__block { margin-bottom: 18px; }
.mk__block h4 {
  margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still);
}
.mk__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk__liste li {
  display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
  font-size: 13px; line-height: 1.5; color: var(--text-leise);
}
.mk__liste li::before {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-content: center;
  font-size: 10px; font-weight: 900; line-height: 1;
}
.mk__liste--ja li::before    { content: '✓'; background: rgba(74,222,128,.14); color: var(--gruen); }
.mk__liste--pfeil li::before { content: '→'; background: var(--flaeche-2); color: var(--text-leise); }

/* Die drei Fristen nebeneinander */
.mk__fristen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk__f {
  padding: 12px 10px; border-radius: 12px; min-width: 0;
  background: var(--glas-tief); border: 1px solid var(--glas-kante);
}
.mk__f b {
  font-family: var(--anzeige); font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.mk__f span { font-size: 11px; color: var(--text-still); margin-left: 3px; }
.mk__f i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--text); margin-top: 6px; line-height: 1.3;
}
.mk__f i em {
  display: block; font-style: normal; font-weight: 500; font-size: 10.5px;
  color: var(--text-still); margin-top: 1px;
}

.mk__klein { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-still); }
.mk__klein--stark {
  margin: 4px 0 18px; padding: 11px 13px; border-radius: 11px;
  background: var(--flaeche-2); color: var(--text-leise); font-size: 12px;
}

/* Merken — der eine Knopf, der wirklich etwas tut */
.mk__merk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; border-radius: 999px;
  background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text);
  font-size: 14px; font-weight: 800;
  transition: transform .18s var(--kurve), background .18s, border-color .18s;
}
.mk__merk:active { transform: scale(.98); }
.mk__merk svg { width: 17px; height: 17px; }
.mk__merk[aria-pressed="true"] {
  background: rgba(74,222,128,.13); border-color: rgba(74,222,128,.42); color: var(--gruen);
}

@container apprahmen (max-width: 340px) {
  .mk__fristen { grid-template-columns: 1fr; }
  .mk__f { display: flex; align-items: baseline; gap: 8px; }
  .mk__f i { margin-top: 0; }
}