/* ============================================================
   Café-Loyalty · gemeinsames Design (Editorial Luxury)
   Farben kommen zur Laufzeit aus cafe.config.json (siehe app.js).
   Die Werte hier sind nur Fallback.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,50&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --textur: none;
  --textur-lage: center / cover no-repeat;   /* Rückfall: Foto-Lage */
  --primary: #6f4e37;
  --primary-dark: #4a3325;
  --accent: #e0a458;
  --bg: #fbf7f2;
  --card: #ffffff;
  --text: #2a211c;
  --muted: #8a7d72;
  --line: #ece3d8;
  --ok: #2e9e6b;
  --err: #d05a4b;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-lg: 26px;
  --radius: 18px;
  --radius-sm: 13px;

  /* Federnde Kurve für alle Bewegungen (keine Standard-Easings) */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Schatten: weich, diffus, im Braunton der Marke */
  --shadow: 0 24px 60px -18px rgba(74, 51, 37, 0.22), 0 4px 14px rgba(74, 51, 37, 0.05);
  --shadow-sm: 0 6px 22px -8px rgba(74, 51, 37, 0.14);
  --shadow-lift: 0 32px 70px -20px rgba(74, 51, 37, 0.32), 0 6px 18px rgba(74, 51, 37, 0.06);

  /* Doppelrand: heller "Tray"-Ring + Haarlinie außen herum */
  --bezel:
    0 0 0 5px color-mix(in srgb, #fff 55%, transparent),
    0 0 0 6px color-mix(in srgb, var(--primary-dark) 10%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Marken-Hintergrund unter einem Schleier aus der Hausfarbe, damit Text
   lesbar bleibt.

   Die Textur kommt aus --textur und wird je Café gesetzt. Vorher stand hier
   fest das Papierbild des ERSTEN Cafés — damit trug jeder weitere Laden dessen
   Wasserzeichen ("Kaffeerösterei") quer über der Seite, auch wenn ihm die
   Rösterei nicht gehörte. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(
      color-mix(in srgb, var(--bg) 76%, transparent),
      color-mix(in srgb, var(--bg) 70%, transparent)
    ),
    radial-gradient(52% 38% at 88% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--textur) var(--textur-lage),
    var(--bg);
}
/* Auf breiten Schirmen wird das Bild stark hochskaliert — dort mehr Schleier,
   damit das Siegel Textur bleibt und nicht mit dem Inhalt konkurriert. */
@media (min-width: 760px) {
  body::before {
    background:
      linear-gradient(
        color-mix(in srgb, var(--bg) 86%, transparent),
        color-mix(in srgb, var(--bg) 82%, transparent)
      ),
      radial-gradient(52% 38% at 88% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      var(--textur) var(--textur-lage),
      var(--bg);
  }
}

/* Feines Papierkorn (fix, klickdurchlässig) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.2 0 0 0 0 0.14 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 470px; margin: 0 auto; padding: 20px 20px 72px; }
.wrap-wide { max-width: 940px; }

/* ---- Mikro-Label (Eyebrow) ---- */
.eyebrow {
  display: inline-block;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 12px;
}
.loyalty .eyebrow { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.22); }

/* ---- Kopf ---- */
.topbar {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 4px 26px;
}
.topbar .logo {
  width: 46px; height: 46px; border-radius: 15px; object-fit: cover;
  box-shadow: var(--bezel), var(--shadow-sm);
}
.topbar .brand {
  font-family: var(--font-display);
  font-weight: 550; font-size: 1.5rem; letter-spacing: -0.01em;
  line-height: 1.15;
}
.topbar .spacer { flex: 1; }

/* Sehr schmale Handys: Kopfzeile und Geldkacheln zusammenstauchen */
@media (max-width: 420px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 10px; }
  .topbar .logo { width: 40px; height: 40px; border-radius: 13px; }
  .topbar .brand { font-size: 1.25rem; }
  .stat .num { font-size: 1.75rem; }
}

/* ---- Karten (Doppelrand: liegen wie Glas im Tablett) ---- */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    var(--bezel),
    var(--shadow);
  padding: 26px;
  margin: 6px 6px 26px;
}
.card.tight { padding: 18px; }

h1, h2 { font-family: var(--font-display); font-weight: 580; text-wrap: balance; }
h1 { font-size: 1.9rem; margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 1.35rem; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 0.86rem; }

/* ---- Sanftes Erscheinen beim Laden (nur transform/opacity) ---- */
@media (prefers-reduced-motion: no-preference) {
  .card, .hero, .stat, .plan-card {
    animation: rise .8s var(--ease) backwards;
  }
  .card:nth-child(2), .stat:nth-child(2) { animation-delay: .07s; }
  .card:nth-child(3), .stat:nth-child(3) { animation-delay: .14s; }
  .card:nth-child(4), .stat:nth-child(4) { animation-delay: .21s; }
  .card:nth-child(5), .stat:nth-child(5) { animation-delay: .28s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---- Hero ---- */
.hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--bezel), var(--shadow-lift);
  margin: 6px 6px 28px;
  position: relative;
}
.hero img {
  width: 100%; display: block;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: center top;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 11, 5, .72) 0%, rgba(18, 11, 5, .2) 46%, transparent 68%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  border-radius: inherit;
}
.hero .hero-text {
  position: absolute; left: 24px; bottom: 20px; right: 24px; color: #fff; z-index: 1;
}
.hero .hero-text h1 {
  color: #fff; margin: 0; font-size: 2.3rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero .hero-text p { margin: 5px 0 0; opacity: .9; font-weight: 500; letter-spacing: .01em; }

/* ---- Buttons (Pillen mit Masse) ---- */
button, .btn {
  font: inherit; font-weight: 700; font-size: .96rem;
  border: 0; border-radius: 999px;
  padding: 15px 22px;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  color: #fff;
  cursor: pointer; width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 10px 26px -8px color-mix(in srgb, var(--primary-dark) 55%, transparent);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 16px 34px -8px color-mix(in srgb, var(--primary-dark) 60%, transparent);
}
button:active, .btn:active { transform: translateY(0) scale(.98); }
button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

/* Haupt-CTA: Pfeil sitzt in eigenem eingelassenen Kreis (Button-im-Button) */
button.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left; padding: 9px 9px 9px 24px;
}
button.cta::after {
  content: "→";
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 500;
  transition: transform .5s var(--ease), background .3s var(--ease);
}
button.cta:hover::after { transform: translateX(3px); background: rgba(255, 255, 255, .24); }
button.cta.accent::after { background: rgba(0, 0, 0, .1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); }

button.secondary {
  background: transparent; color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
button.secondary:hover { box-shadow: inset 0 0 0 1.5px var(--accent); transform: none; }
button.accent {
  background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 78%, var(--primary)));
  color: #3a2a17;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 10px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
button.ghost { background: transparent; color: var(--muted); box-shadow: none; }
button.ghost:hover { color: var(--primary); transform: none; box-shadow: none; }
button:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row button { width: auto; flex: 1; }

/* ---- Formulare ---- */
label { display: block; font-weight: 600; font-size: .88rem; margin: 16px 0 7px; }
input[type=text], input[type=tel], input[type=password], input[type=number], textarea, select {
  width: 100%; font: inherit;
  padding: 14px 17px;
  border: 1.5px solid var(--line); border-radius: 15px;
  background: color-mix(in srgb, var(--bg) 40%, #fff);
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(74, 51, 37, .05);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: inset 0 1px 3px rgba(74, 51, 37, .04), 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
textarea { min-height: 90px; resize: vertical; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.checkbox span { font-size: .88rem; color: var(--muted); }
.hint { font-size: .84rem; color: var(--muted); margin-top: 8px; }
.devcode {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: #fff7ec; border: 1px dashed var(--accent); color: #7a5a1f;
  font-size: .9rem;
}
.devcode b { font-size: 1.15rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

/* ---- Stempelkarte (dunkler Pass mit Prägung) ---- */
.card.loyalty {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 52%),
    linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 74%);
  color: #fff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    var(--bezel),
    var(--shadow-lift);
}
.card.loyalty::before {
  content: "";
  position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: radial-gradient(circle at 30% 30%, #fff 1.3px, transparent 1.6px);
  background-size: 26px 26px;
}
.card.loyalty h2, .card.loyalty .muted { color: #fff; }
.card.loyalty .muted { opacity: .68; }
.card.loyalty h2 { font-size: 1.5rem; }

.stamp-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px;
  margin: 22px 0 16px;
}
.stamp {
  aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  border: 2px dashed var(--line); color: var(--line);
  background: #fff;
}
.loyalty .stamp {
  border: 1px dashed rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .14);
  color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22);
}
.stamp.filled {
  border: 2px solid var(--primary);
  background: var(--primary); color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Gefüllter Stempel = Siegel-Abdruck (Bild-Asset, füllt die Kachel) */
.loyalty .stamp.filled {
  border: 0; background: none; padding: 0;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .38));
  animation: stamp-pop .55s var(--ease);
}
.stamp-seal { width: 100%; height: 100%; display: block; object-fit: contain; }
/* leichte Drehung je Position — wirkt von Hand gestempelt
   (auf dem Bild, damit die Pop-Animation der Kachel nicht kollidiert) */
.stamp.filled:nth-child(3n) .stamp-seal   { transform: rotate(-5deg); }
.stamp.filled:nth-child(3n+1) .stamp-seal { transform: rotate(3.5deg); }
.stamp.filled:nth-child(3n+2) .stamp-seal { transform: rotate(-1.5deg); }
@keyframes stamp-pop {
  0% { transform: scale(.5); }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.progress-text {
  text-align: center; font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.progress-track {
  height: 5px; border-radius: 99px; margin: 14px 0 10px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #fff 24%));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: width .9s var(--ease);
}
.reward-banner {
  margin: 18px 0 4px; padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(140deg, var(--accent), #f2c07a);
  color: #4a3311; font-weight: 700; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- Kunden-QR ---- */
.qr-box { text-align: center; }
.qr-box img {
  width: 172px; height: 172px; image-rendering: pixelated;
  border-radius: var(--radius-sm);
  padding: 12px; background: #fff;
  box-shadow:
    0 0 0 1px var(--line),
    0 0 0 7px color-mix(in srgb, var(--bg) 70%, #fff),
    0 0 0 8px var(--line);
  margin: 6px 0 4px;
}
.qr-code-text {
  margin-top: 16px; font-family: ui-monospace, "Consolas", monospace;
  font-size: 1.25rem; letter-spacing: .3em; font-weight: 700; color: var(--primary-dark);
}

/* ---- Nachrichten ---- */
.msg {
  padding: 15px 17px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--bg) 45%, #fff);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.msg .date { font-size: .78rem; color: var(--muted); margin-top: 5px; }

/* ---- Personal-Scanner ---- */
.scanner { position: relative; border-radius: var(--radius); overflow: hidden; background: #14100c; aspect-ratio: 3/4; box-shadow: var(--bezel); }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .frame {
  position: absolute; inset: 18% 15%; border: 2.5px solid rgba(255,255,255,.85);
  border-radius: 18px; box-shadow: 0 0 0 2000px rgba(0,0,0,.32);
}
.result-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 580; }

/* ---- Boss: Statistik ---- */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat {
  background: var(--card); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.stat .num {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; color: var(--primary-dark);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;  /* Betrag und €-Zeichen nie trennen */
}
.stat .lbl { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }

/* ---- Boss: Tabelle ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
}
.pill.ready { background: #eafaf1; color: var(--ok); }
.pill.no { background: #f4efe8; color: var(--muted); }

/* ---- Tabs (Boss) ---- */
.tabs {
  display: flex; gap: 4px; margin-bottom: 22px;
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
  padding: 5px; border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(74, 51, 37, .07);
  /* Passen nicht alle Reiter nebeneinander, wird die Leiste selbst
     seitlich schiebbar — die Seite bleibt dadurch schmal. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.tabs::-webkit-scrollbar { display: none; }
/* Verlauf am Rand zeigt an, dass noch Reiter kommen (Klasse aus app.js) */
.tabs.has-more { mask-image: linear-gradient(to right, #000 84%, transparent 100%); }
.tabs.has-prev { mask-image: linear-gradient(to right, transparent 0%, #000 16%); }
.tabs.has-more.has-prev {
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.tabs button {
  background: transparent; color: var(--muted); box-shadow: none;
  padding: 11px 16px; border-radius: 999px; font-size: .92rem;
  /* width kommt aus dem Basis-Button-Stil (100%) — hier auf Inhaltsbreite zurück */
  width: auto; flex: 0 0 auto; white-space: nowrap;
}
.tabs button:hover { transform: none; color: var(--primary); }
.tabs button.active {
  background: #fff; color: var(--primary-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-sm);
}

/* ---- Nav-Links unten ---- */
.foot-links { text-align: center; margin-top: 34px; font-size: .84rem; }
.foot-links a { color: var(--muted); text-decoration: none; margin: 0 8px; transition: color .3s var(--ease); }
.foot-links a:hover { color: var(--primary); }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(24px) scale(.97);
  background: #221810; color: #fff; padding: 14px 24px; border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-lift);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease); z-index: 55;
  max-width: 90vw; font-weight: 600; font-size: .93rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast-err { background: var(--err); }
.toast-ok { background: #221810; }

.mockup-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: #fff2d9; color: #8a6412; padding: 3px 10px; border-radius: 999px; margin-left: 8px;
  vertical-align: 3px;
}

/* ===========================================================================
   DAS ERZEUGTE SCHILD

   Der Ladenname WIRD das Logo. Kein Bild, sondern eine Tafel — wie bei echten
   Kiosken, Bäckereien und Metzgereien.

   Alle Werte kommen aus /marke.css, die der Server je Café aus Name und Farben
   rechnet. Hier steht nur die Form, nie eine Farbe. Wer hier eine Farbe fest
   einträgt, hat wieder das Problem, das das Ganze lösen soll: Café Nr. 10 sähe
   aus wie Café Nr. 1.
   =========================================================================== */
.mk-schild {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 38px 24px 32px;
  text-align: center;
  margin: 6px 0 28px;
  background: var(--mk-verlauf, var(--mk-feld));
  box-shadow: var(--shadow-lift);
  outline: var(--mk-kante, 0);
  outline-offset: -1px;
}
.mk-ueber {
  font: 700 .62rem/1 var(--font-body);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mk-zier-text);
  margin-bottom: 14px;
}
.mk-ueber::after {
  content: ""; display: block;
  width: 42px; height: 1px; margin: 11px auto 0;
  background: var(--mk-zier); opacity: .75;
}
.mk-name {
  font-family: var(--font-display);
  font-weight: var(--mk-gewicht, 600);
  font-variation-settings: "opsz" var(--mk-opsz, 96);
  color: var(--mk-schrift);
  font-size: var(--mk-size);
  letter-spacing: var(--mk-track);
  /* Ä, Ö und Ü brauchen die Luft — sonst schneiden die Punkte an. */
  line-height: 1.12;
  text-wrap: balance;
}
.mk-name .mk-zeile { display: block; }
.mk-amp {
  display: block; font-style: italic; font-weight: 500;
  font-size: .7em; line-height: 1; color: var(--mk-zier); margin: 1px 0;
}
.mk-tagline {
  margin-top: 12px; font-size: .92rem; font-weight: 500;
  color: color-mix(in srgb, var(--mk-schrift) 74%, transparent);
}
.mk-lang .mk-name { line-height: 1.2; }

/* Die Kante macht den Unterschied zwischen Blech und Brett.
   Emailleschild und Terrazzo bekommen die typische umlaufende Linie,
   Papier eine feine Haarlinie, Holz gar keine. */
.mk-emaille::before, .mk-terrazzo::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: calc(var(--radius-lg) - 6px);
  border: 2px solid var(--mk-zier); opacity: .85; pointer-events: none;
}
.mk-papier::before {
  content: ""; position: absolute; inset: 11px;
  border-radius: calc(var(--radius-lg) - 8px);
  border: 1px solid var(--mk-zier); opacity: .55; pointer-events: none;
}

/* Das Siegel im gefüllten Stempel. Die Farbe kommt aus /marke.css und ist so
   gewählt, dass sie sich von der Stempelkarte abhebt — ein rotes Siegel auf
   roter Karte verschwindet. */
.stamp.filled { background: var(--siegel-feld, var(--primary)); border-color: var(--siegel-feld, var(--primary)); }