/* ============================================================
   Laden-Loyalty · gemeinsames Design (Editorial Luxury)
   Farben kommen zur Laufzeit aus laden.json (siehe app.js).
   Die Werte hier sind nur Fallback.
   ============================================================ */

/* ---------------------------------------------------------------------------
   SCHRIFTEN — vom eigenen Server, NICHT von Google.

   Bis zum 28.07.2026 stand hier ein @import auf fonts.googleapis.com. Das sah
   harmlos aus und war es nicht: Bei JEDEM Aufruf JEDER Seite holte der Browser
   des Gastes die Schrift bei Google — und schickte dabei seine IP-Adresse, die
   Gerätekennung und die Herkunftsadresse an einen Empfänger in den USA. Auch
   beim Öffnen der Datenschutzseite, also noch bevor irgendjemand informiert war.

   Das widersprach gleich drei Zusagen im eigenen Vertragswerk: Anlage 2 Ziffer 4
   („Übermittlung an Dritte nur an die in Anlage 3 genannten Stellen"), Anlage 1
   Ziffer 7 („Rechenzentrum in Frankfurt, Ausnahmen ausschließlich nach Anlage 3")
   und § 1 Absatz 3 (Drittland nur, wenn in Anlage 3 genannt). Google steht dort
   nur für Google Wallet — und zwar für die irische Gesellschaft, nicht für die
   amerikanische, die die Schriften ausliefert.

   Beide Schriften stehen unter der SIL Open Font License; Selbsthosten ist
   ausdrücklich erlaubt. Es sind variable Schriften — nur so funktionieren die
   Zwischengewichte 550 und 580, die dieses Stylesheet benutzt.

   ⚠ Keine Schrift, kein Bild, kein Skript darf von einer fremden Adresse
   geladen werden. `tests/keine-fremden-adressen.test.js` prüft das bei jedem
   Ausrollen.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;          /* variabel: jeder Wert dazwischen ist erlaubt */
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;          /* variabel */
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bodoni Moda trägt nur die große Aussage der Gastseite. Sie kommt wie die
   beiden übrigen Schriften vom eigenen Server; Lizenz: SIL OFL 1.1, abgelegt
   neben der Datei unter /assets/fonts/bodoni-moda-OFL.txt. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-variable.ttf") format("truetype");
}

:root {
  /* ⭐ DER FARBTON DES LADENS, in Grad. Alles Farbige in dieser Datei hängt
     daran — als ABSTAND zu diesem Wert, nicht als fester Ton.

     Warum: Bis zum 07.08.2026 standen hier 132 Kaffeebrauntöne fest im
     Programm, weil diese Datei für Kiezbohne gezeichnet wurde. Ein Laden mit
     grüner oder roter Hausfarbe bekam trotzdem braune Stempelkarten, braune
     Bestätigungen, braunen Fließtext. Der Inhaber hat es an werkstatt gesehen.

     28.9 ist der Ton von Kiezbohnes Hausfarbe #2F2114 — der Nullpunkt, gegen
     den diese Gestaltung gezeichnet wurde. Er steht hier als RÜCKFALL. Im
     Betrieb überschreibt ihn `marke.css` mit dem Ton des jeweiligen Ladens;
     marke.css wird auf jeder Seite NACH dieser Datei eingebunden.

     ⚠ Wer diese Zeile löscht, macht JEDE farbige Regel darunter ungültig —
     `calc(var(--ton) + 12)` ohne `--ton` ist kein gültiger Wert, und der
     Browser wirft die ganze Angabe weg. Dann fehlen Hintergründe und
     Schriftfarben, nicht nur die Farbe. Bewacht von
     tests/hausfarbe-kommt-an.test.js. */
  --ton: 28.9;

  --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);
}
/* Der Ladenname in der Kopfzeile ist seit dem 01.08.2026 die Hauptüberschrift
   der Seite (h1) — vorher hatte keine Gästeseite eine. Damit sich dabei NICHTS
   verschiebt, werden die beiden Dinge zurückgesetzt, die eine h1 sonst
   mitbringt: der Abstand darunter und der Zeilenausgleich. Schriftart, Gewicht,
   Größe und Zeilenhöhe stehen ohnehin hier und schlagen die h1-Regel. */
.topbar .brand {
  font-family: var(--font-display);
  font-weight: 550; font-size: 1.5rem; letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: wrap;
}
/* Rückversicherung für ältere Browser, die <main> nicht von Haus aus als Block
   darstellen — sonst läge der ganze Hauptbereich in einer Zeile. */
main { display: block; }
.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, hsl(calc(var(--ton) - 1.2) 56.5% 4.5% / .72) 0%, hsl(calc(var(--ton) - 1.2) 56.5% 4.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,
.hero .hero-text .hero-title {
  color: #fff; margin: 0; font-family: var(--font-display); font-weight: 580;
  font-size: 2.3rem; letter-spacing: -0.02em; line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero .hero-text p:not(.hero-title) { margin: 5px 0 0; opacity: .9; font-weight: 500; letter-spacing: .01em; }

/* ---- Gast-Startseite · Entwurf 2 ------------------------------------------
   Nur die Gastansicht bekommt die dunkle Bühne. Karte, Personal und Boss
   behalten das gemeinsame helle System. Das erste große Bedienelement öffnet
   lediglich das Formular: Eine Karte oder Nachrichtenwahl wird erst nach dem
   sichtbaren zweiten Schritt abgeschickt. */
.guest-landing {
  --guest-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: hsl(calc(var(--ton) - 3.2) 36.8% 3.7%);
}
.guest-landing::before {
  background: hsl(calc(var(--ton) - 3.2) 36.8% 3.7%);
}
.guest-landing .wrap {
  position: relative;
  max-width: 470px;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: hsl(calc(var(--ton) - 3.2) 36.8% 3.7%);
  box-shadow: 0 0 70px rgba(0, 0, 0, .42);
}
.guest-landing .topbar {
  position: absolute;
  z-index: 8;
  top: 0; left: 0; right: 0;
  padding: calc(18px + env(safe-area-inset-top)) 22px 18px;
  color: hsl(calc(var(--ton) + 7.8) 52.9% 93.3%);
  justify-content: flex-start;
}
.guest-landing .topbar .logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px hsl(calc(var(--ton) + 7.8) 52.9% 93.3% / .38), 0 10px 28px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .26);
}
.guest-landing .topbar [data-cafe-signet] > * {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .26), 0 8px 26px rgba(0, 0, 0, .28);
}
.guest-landing .topbar .brand {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.guest-landing .topbar .spacer { display: none; }
.guest-home .guest-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: calc(112px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  overflow: hidden;
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9%);
}
.guest-home .guest-stage::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, hsl(calc(var(--ton) - 4.9) 55.6% 1.8% / .35) 0%, hsl(calc(var(--ton) - 4.9) 55.6% 1.8% / .03) 23%, hsl(calc(var(--ton) - 4.9) 55.6% 1.8% / .08) 50%, hsl(calc(var(--ton) - 4.9) 55.6% 1.8% / .84) 100%),
    linear-gradient(90deg, hsl(calc(var(--ton) - 4.9) 55.6% 1.8% / .35), transparent 72%);
  pointer-events: none;
}
.guest-home .guest-stage-media,
.guest-home .guest-stage-media .hero,
.guest-home .guest-stage-fallback {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
}
.guest-home .guest-stage-media .hero {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.guest-home .guest-stage-media .hero::after {
  display: none;
}
.guest-home .guest-stage-media .hero img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 58% center;
  transform: translateY(-18%) scale(1.28);
  transform-origin: 64% center;
}
/* ---- Kopfbilder, die schon in Handyform gebaut sind -----------------------
   ⚠ Der Zuschnitt darüber ist auf EIN Foto abgestimmt (Kiezbohne, 03.08.2026):
   Er zoomt 28 % hinein und schiebt 18 % nach oben, damit die Kaffeetasse über
   dem Kartenkasten sitzt.

   Bei einem Bild, das oben und unten schon richtig sitzt, nimmt derselbe
   Zuschnitt beides weg — bei Akmans fiel die halbe Markise heraus und die
   Auslage rutschte aus dem Bild. Das ist keine Geschmacksfrage: Das Bild trägt
   dort den Ladennamen.

   Deshalb sagt der LADEN, ob sein Bild nachgeschnitten werden soll, nicht die
   Stilvorlage. Ohne Angabe ändert sich nichts — Kiezbohne merkt von dieser
   Regel nichts. */
.guest-home.bild-ohne-zuschnitt .guest-stage-media .hero img {
  object-position: center center;
  transform: none;
}
.guest-home .guest-stage-fallback .mk-schild {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%; height: 100%;
  margin: 0;
  padding: 126px 34px 250px;
  border-radius: 0;
  box-shadow: none;
}
/* Ohne Foto liefert das Schild weiterhin Material und Hausfarben für die
   Fläche. Sein Name stünde hier aber direkt unter dem echten Seitentitel und
   der Nutzenüberschrift. Beides steht bereits sichtbar in der Kopfzeile; nur
   diese doppelte Schild-Beschriftung wird deshalb ausgeblendet. */
.guest-home .guest-stage-fallback .mk-schild > * {
  visibility: hidden;
}
.guest-home .guest-stage-copy {
  max-width: 17rem;
}
.guest-home .guest-display {
  margin: 0;
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9%);
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-size: clamp(3.05rem, 14.2vw, 3.8rem);
  font-optical-sizing: auto;
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: .88;
  text-shadow: 0 3px 22px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .38);
}
.guest-home .guest-display span {
  display: block;
  white-space: nowrap;
}
.guest-home .guest-promise {
  max-width: 13rem;
  margin: 17px 0 0;
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9% / .76);
  font-family: var(--guest-font);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .012em;
  line-height: 1.5;
}
.guest-home .guest-promise b {
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9%);
}
/* ---- Dunkler Titel für helle Kopfbilder -----------------------------------
   ⚠ Titel und Unterzeile sind hell, weil die Fläche dahinter dunkel ist — bei
   einem Foto mit dunklem oberen Drittel stimmt das. Ist das Kopfbild dort
   HELL, steht weiße Schrift auf Creme und ist praktisch unsichtbar. Genau das
   war bei Akmans der Fall: Der Laden hat ein gezeichnetes Bild mit heller
   Fläche im oberen Drittel.

   Der Titel nimmt dann die Hausfarbe des Ladens; der Schein darunter dreht
   sich mit, sonst verschwände die Schrift in der Zeichnung. Unten ändert sich
   NICHTS — Knopf und Fußzeile liegen im dunklen Verlauf und bleiben hell.

   Sagt der Laden nichts, bleibt alles wie vorher. */
.guest-home.titel-dunkel .guest-display {
  color: var(--primary, #2F2114);
  text-shadow: 0 3px 14px hsl(calc(var(--ton) + 11.1) 100% 97.1% / .9);
}
/* ⚠ Der helle Rand um die Schrift. Ein helles Kopfbild ist meistens auch ein
   UNRUHIGES — bei Akmans läuft der Titel quer über Emblem, Becher und
   Bonbons. Farbe allein reicht dort nicht; die Schrift braucht eine eigene
   Kante.

   Warum in einer eigenen Klammer: Ohne `paint-order` malt der Browser den Rand
   ÜBER die Schrift statt darunter — die Zeile wäre dann hell und hohl, also
   schlimmer als vorher. Alte Browser bekommen deshalb nur den Schein oben,
   nie einen halben Effekt.

   Die Randfarbe kommt aus den Hausfarben, nicht aus einem festen Weiß —
   sonst säße hier wieder der Ton eines einzelnen Ladens. */
@supports (paint-order: stroke) {
  .guest-home.titel-dunkel .guest-display {
    -webkit-text-stroke: 6px var(--card, #fffaf1);
    paint-order: stroke fill;
  }
}
.guest-home.titel-dunkel .guest-promise {
  color: hsl(calc(var(--ton) - 6.4) 28.6% 11% / .88);
  text-shadow: 0 1px 6px var(--card, #fffaf1), 0 0 10px var(--card, #fffaf1);
}
/* ---- Das Kopfbild spricht allein -----------------------------------------
   Manche Kopfbilder tragen die ganze Aussage selbst — bei Akmans ist ein
   Emblem mit Name und Sortiment eingezeichnet. Schrift daneben kämpft dann
   gegen das Bild, statt ihm zu helfen; keine Farbe und keine Kontur ändert
   daran etwas. Entscheidung des Inhabers, 03.08.2026.

   ⚠ NICHT `display: none`. Die große Zeile ist über `aria-labelledby` der
   NAME dieses Abschnitts, und das Kopfbild ist ausdrücklich „nicht vorlesen".
   Wer sie hart entfernt, hinterlässt einem blinden Gast eine namenlose
   Fläche. Beides wird deshalb nur fürs Auge weggenommen und weiter vorgelesen.

   ⚠ WAS DAS KOSTET, damit es niemand aus Versehen tut: Die kleine Zeile war
   die letzte Stelle, an der ein sehender Gast VOR dem Holen erfährt, was er
   bekommt. Im Holen-Dialog steht es seit dem Umbau nicht mehr, und auf der
   fertigen Karte steht nur „0 / 10 Stempel", nicht die Belohnung. Wer diesen
   Schalter setzt, verlässt sich darauf, dass der Wirt es am Tresen sagt. */
.guest-home.bild-spricht-allein .guest-display,
.guest-home.bild-spricht-allein .guest-promise {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.guest-home.titel-dunkel .guest-promise b {
  color: var(--primary, #2F2114);
}
.guest-home .guest-ref-hint {
  position: relative;
  margin: auto 0 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: hsl(calc(var(--ton) - 2.6) 38.1% 8.2% / .76);
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9%);
  box-shadow: none;
  font-size: .78rem;
}
.guest-home .guest-start-card {
  margin-top: auto;
  margin-bottom: 44px;
  padding: 1px;
  border: 1px solid hsl(calc(var(--ton) + 7.8) 52.9% 93.3% / .11);
  border-radius: 26px;
  /* ⚠ Der Vorgabewert ist der frühere feste Wert (03.08.2026). Er greift nur
     für einen Laden ohne Hausfarbe; sonst kommt die Farbe aus app.js. */
  background: var(--knopf-rahmen, rgba(72, 57, 47, .7));
  box-shadow: 0 20px 42px -22px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .46);
}
.guest-home button.guest-start-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  padding: 18px 18px 18px 20px;
  border: 0;
  border-radius: 24px;
  /* Kommt aus der Hausfarbe des Ladens (app.js, knopfFarbeSetzen). Der Wert
     hier ist nur der Rückfall für einen Laden ohne Hausfarbe — vorher stand er
     fest und galt für alle: Akmans ist rot und hatte einen braunen Knopf. */
  background: var(--knopf, rgba(48, 39, 33, .94));
  color: hsl(calc(var(--ton) + 6.4) 43.6% 92.4%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 1px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .08);
  text-align: left;
}
.guest-home button.guest-start-button:hover {
  transform: translateY(-2px);
  background: var(--knopf-hover, rgba(59, 48, 40, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 22px 42px -22px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .42);
}
.guest-home .guest-start-copy {
  display: grid;
  gap: 3px;
}
.guest-home .guest-start-copy strong {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-size: 1.05rem;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  white-space: nowrap;
}
.guest-home .guest-start-copy small {
  color: hsl(calc(var(--ton) + 6.4) 43.6% 92.4% / .63);
  font-family: var(--guest-font);
  font-size: .7rem;
  font-weight: 610;
  letter-spacing: .01em;
}
.guest-home .guest-start-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: hsl(calc(var(--ton) + 7.8) 39.1% 91%);
  color: hsl(calc(var(--ton) - 4.2) 25.4% 13.1%);
  font-size: 1.15rem;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 20px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .16);
  transition: transform .7s var(--ease), background .7s var(--ease);
}
.guest-home button.guest-start-button:hover .guest-start-arrow {
  transform: translateX(3px) scale(1.04);
  background: hsl(calc(var(--ton) + 8) 100% 97.5%);
}
.guest-home .guest-existing {
  position: absolute;
  z-index: 9;
  top: calc(18px + env(safe-area-inset-top));
  right: 22px;
  margin: 0;
  padding: 0;
}
.guest-home button.guest-return-button {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid hsl(calc(var(--ton) + 7.8) 52.9% 93.3% / .32);
  border-radius: 50%;
  background: hsl(calc(var(--ton) - 5.8) 21.3% 12% / .56);
  color: hsl(calc(var(--ton) + 5) 45.1% 90%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .22);
}
.guest-home button.guest-return-button:hover {
  transform: translateY(-1px) scale(1.03);
  background: hsl(calc(var(--ton) - 3.6) 21.8% 17.1% / .72);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 30px hsl(calc(var(--ton) - 5.8) 56.5% 4.5% / .26);
}
.guest-home button.guest-return-button svg {
  width: 21px; height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guest-home .guest-return-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.guest-home .guest-claim-card,
.guest-home #login-card {
  scroll-margin-top: 14px;
  padding: 24px 22px 22px;
  margin: 18px 18px 20px;
  background: hsl(calc(var(--ton) + 8.6) 66.7% 95.3%);
  color: hsl(calc(var(--ton) - 5.4) 39% 11.6%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
}
.guest-home .guest-claim-card h2,
.guest-home #login-card h2 {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.025em;
}
.guest-home .guest-panel-close {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 36px;
  margin: -5px 0 14px -6px;
  padding: 5px 7px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: .75rem;
}
.guest-home .guest-panel-close:hover {
  transform: none;
  color: var(--primary-dark);
  box-shadow: none;
}
.guest-home .guest-claim-card .eyebrow {
  margin-bottom: 8px;
}
.guest-home .guest-claim-card h2 {
  margin-bottom: 7px;
}
.guest-home .guest-name-label {
  margin: 12px 0 6px;
}
.guest-home .guest-voluntary {
  font-weight: 400;
}
.guest-home #claim-name {
  min-height: 48px;
  padding: 12px 15px;
}
.guest-home .guest-consent {
  margin: 10px 0 14px;
}
.guest-home .guest-consent span {
  line-height: 1.45;
}
.guest-home .guest-privacy {
  margin: 12px 2px 0;
  line-height: 1.45;
}
.guest-home .guest-privacy-link {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.guest-home .guest-stage > .foot-links {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 22px;
  margin: 0;
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9% / .4);
}
.guest-home .guest-stage > .foot-links a {
  color: hsl(calc(var(--ton) + 6.4) 54.8% 93.9% / .68);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 360px) {
  .guest-landing .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }
  .guest-home .guest-existing { right: 18px; }
  .guest-home .guest-stage {
    padding-left: 18px;
    padding-right: 18px;
  }
  .guest-home .guest-stage > .foot-links {
    right: 18px;
    left: 18px;
  }
  .guest-home .guest-stage-copy {
    transform: translateY(-8px);
  }
  .guest-home button.guest-start-button {
    min-height: 92px;
  }
  .guest-home .guest-claim-card,
  .guest-home #login-card {
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .guest-home .guest-stage-copy,
  .guest-home .guest-start-card,
  .guest-home .guest-existing {
    animation: guest-reveal .9s var(--ease) backwards;
  }
  .guest-home .guest-start-card { animation-delay: .12s; }
  .guest-home .guest-existing { animation-delay: .2s; }
}
@keyframes guest-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 700px) {
  .guest-landing .wrap {
    margin-top: 22px;
    margin-bottom: 22px;
    min-height: calc(100dvh - 44px);
    border-radius: 36px;
  }
  .guest-home .guest-stage {
    min-height: calc(100svh - 44px);
    border-radius: 36px;
  }
}

/* ---- 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: hsl(calc(var(--ton) + 3.7) 43.2% 15.9%);
  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; }

/* Der Weg ohne Angebote — kleiner als das Ja und mit Abstand darunter.
   Anweisung des Inhabers am 04.08.2026, nachdem er den Bildschirm am Handy
   gesehen hatte: Die zwei Knöpfe klebten aneinander.

   ⚠ `min-height` ist keine Kosmetik und darf nicht wegoptimiert werden: Sie
   hält die Berührungsfläche auf 44 px. WCAG 2.2 AA verlangt 24 px, 44 px sind
   die Empfehlung — und dieser Knopf ist die Ablehnung einer Werbe-Einwilligung.
   Wird er zu klein oder zu leise, ist es genau der Gestaltungstrick, den wir
   beim Wettbewerber beschrieben haben (WETTBEWERB.md, 04.08.2026): ein Ausweg,
   der nicht mehr wie einer aussieht. Kleiner ja — unscheinbar nein. */
#btn-angebote-nein {
  display: block;
  width: auto;
  margin: 22px auto 0;
  min-height: 44px;
  padding: 11px 24px;
  font-size: .9rem;
}
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 hsl(calc(var(--ton) - 6.2) 33.3% 21.8% / .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 hsl(calc(var(--ton) - 6.2) 33.3% 21.8% / .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: hsl(calc(var(--ton) + 5.8) 100% 96.3%); border: 1px dashed var(--accent); color: hsl(calc(var(--ton) + 10) 59.5% 30%);
  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), hsl(calc(var(--ton) + 6.1) 82.2% 71.4%));
  color: hsl(calc(var(--ton) + 6.9) 62.6% 17.8%); 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);
}

/* ---- Gast mit Karte · Kiezbohne-Mitgliedsansicht -------------------------
   Die Seite bleibt funktional hell, bekommt aber dieselbe ruhige Espresso-
   Welt wie der Einstieg. Stempel und QR-Code stehen vor Angeboten und Profil;
   kein Datenweg und keine Elementkennung hängt an dieser Gestaltung. */
.member-app {
  --member-espresso: #21160f;
  --member-cream: #f2e8da;
  --member-paper: #fffaf3;
  background: var(--member-cream);
}
.member-app::before {
  background:
    linear-gradient(hsl(calc(var(--ton) + 7.6) 56.1% 92% / .7), hsl(calc(var(--ton) + 6.1) 48% 90.2% / .82)),
    radial-gradient(70% 44% at 88% -8%, hsl(calc(var(--ton) + 1.1) 43.7% 46.7% / .16), transparent 72%),
    var(--textur) var(--textur-lage),
    var(--member-cream);
}
.member-app .wrap {
  padding: 12px 16px 88px;
}
.member-app .topbar {
  padding: calc(16px + env(safe-area-inset-top)) 4px 22px;
  gap: 12px;
}
.member-app .topbar .logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px hsl(calc(var(--ton) - 4.9) 42.9% 20.6% / .12), 0 10px 30px -14px hsl(calc(var(--ton) - 5.5) 45.1% 17.8% / .38);
}
.member-app .topbar .brand {
  color: var(--member-espresso);
  font-family: "Bodoni Moda", var(--font-display);
  font-size: 1.55rem;
  font-weight: 520;
  letter-spacing: -.035em;
}
.member-app #btn-logout-top {
  width: auto !important;
  padding: 8px 12px !important;
  border: 1px solid hsl(calc(var(--ton) - 4.9) 39.3% 17.5% / .12);
  border-radius: 999px;
  background: hsl(calc(var(--ton) + 6.1) 100% 97.6% / .52);
  color: hsl(calc(var(--ton) - 5.4) 36.5% 12.4% / .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  font-size: .72rem !important;
  font-weight: 600;
}
.member-app #app {
  padding-bottom: 112px;
}
.member-app .tabpane {
  animation: member-pane .62s var(--ease) both;
}
@keyframes member-pane {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.member-app .card {
  margin: 0 4px 18px;
  padding: 23px;
  border-radius: 29px;
  background: hsl(calc(var(--ton) + 6.1) 100% 97.6% / .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 5px rgba(255, 255, 255, .32),
    0 0 0 6px hsl(calc(var(--ton) - 5.7) 43.1% 20% / .07),
    0 22px 54px -28px hsl(calc(var(--ton) - 6) 46.7% 17.6% / .34);
}
.member-app .card.loyalty {
  padding: 22px 20px 20px;
  border-radius: 31px;
  background:
    radial-gradient(82% 78% at 92% -8%, hsl(calc(var(--ton) + 0.9) 46.9% 52% / .2), transparent 66%),
    linear-gradient(155deg, hsl(calc(var(--ton) - 7.1) 37.9% 11.4%) 0%, hsl(calc(var(--ton) - 7.1) 31.4% 6.9%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 0 0 5px hsl(calc(var(--ton) + 6.1) 100% 97.6% / .52),
    0 0 0 6px hsl(calc(var(--ton) - 5.7) 43.1% 20% / .1),
    0 28px 58px -28px hsl(calc(var(--ton) - 6.4) 50% 12.5% / .56);
}
.member-app .card.loyalty::before {
  opacity: .055;
  background-size: 30px 30px;
}
.member-app .loyalty-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.member-app .loyalty-identity {
  min-width: 0;
}
.member-app .loyalty .eyebrow {
  margin-bottom: 9px;
  padding: 3px 9px;
  border-color: rgba(255, 255, 255, .16);
  color: hsl(calc(var(--ton) + 6.4) 100% 96.7% / .66);
  font-size: .57rem;
  letter-spacing: .2em;
}
.member-app .loyalty h2 {
  margin: 0;
  color: hsl(calc(var(--ton) + 7.1) 100% 97.1%);
  font-family: "Bodoni Moda", var(--font-display);
  font-size: clamp(1.7rem, 7.7vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
  overflow-wrap: anywhere;
}
.member-app #c-visits {
  flex: none;
  margin-top: 2px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: hsl(calc(var(--ton) + 6.4) 100% 96.7% / .7);
  font-size: .66rem;
  font-weight: 600;
  white-space: nowrap;
}
.member-app .stamp-grid {
  position: relative;
  z-index: 1;
  gap: 8px;
  margin: 17px 0 15px;
}
.member-app .loyalty .stamp {
  border-color: hsl(calc(var(--ton) + 6.4) 100% 96.7% / .2);
  background: rgba(0, 0, 0, .12);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .28);
}
.member-app .loyalty-progress {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.member-app .loyalty-progress .progress-track {
  flex: 1;
  margin: 0;
  background: rgba(255, 255, 255, .1);
}
.member-app .loyalty-progress .progress-text {
  flex: none;
  color: hsl(calc(var(--ton) + 6.4) 100% 96.7% / .76);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
}
.member-app .loyalty .reward-banner {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: hsl(calc(var(--ton) + 4.4) 60% 61.8% / .16);
  color: hsl(calc(var(--ton) + 6.7) 100% 93.7%);
  box-shadow: none;
  font-size: .75rem;
}
.member-app .qr-box {
  padding: 19px;
  text-align: left;
}
.member-app .qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 146px;
  align-items: center;
  gap: 18px;
}
.member-app .qr-copy {
  min-width: 0;
}
.member-app .qr-copy .eyebrow {
  margin-bottom: 10px;
  padding: 3px 8px;
  font-size: .54rem;
}
.member-app .qr-copy h2 {
  margin: 0 0 8px;
  color: var(--member-espresso);
  font-family: "Bodoni Moda", var(--font-display);
  font-size: 1.75rem;
  font-weight: 520;
  letter-spacing: -.04em;
  line-height: 1;
}
.member-app .qr-copy p {
  max-width: 16ch;
  margin: 0;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .62);
  font-size: .76rem;
  line-height: 1.48;
}
.member-app .qr-presenter {
  padding: 8px 8px 10px;
  border: 1px solid hsl(calc(var(--ton) - 4.9) 40.2% 17.1% / .1);
  border-radius: 23px;
  background: hsl(calc(var(--ton) + 11.1) 100% 98.8%);
  box-shadow: inset 0 1px 0 #fff, 0 13px 28px -20px hsl(calc(var(--ton) - 5.6) 43.9% 16.1% / .38);
  text-align: center;
}
.member-app .qr-box img {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.member-app .qr-code-text {
  margin-top: 7px;
  color: hsl(calc(var(--ton) - 5.4) 37.7% 12% / .7);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.member-app .wallet-actions:empty {
  display: none;
}
.member-app .wallet-actions .wallet-btn {
  margin-top: 16px;
}
.member-app .offers-card,
.member-app .profile-card,
.member-app #pane-news .card,
.member-app #pane-abo .card {
  padding: 22px;
}
.member-app .member-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.member-app .member-section-heading h2 {
  margin: 3px 0 0;
  color: var(--member-espresso);
  font-family: "Bodoni Moda", var(--font-display);
  font-size: 1.78rem;
  font-weight: 520;
  letter-spacing: -.04em;
  line-height: 1.03;
}
.member-app .member-section-mark {
  flex: none;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid hsl(calc(var(--ton) - 5.6) 40% 17.6% / .1);
  border-radius: 16px;
  background: hsl(calc(var(--ton) + 6.1) 100% 97.6% / .62);
  color: hsl(calc(var(--ton) - 5.6) 40% 17.6% / .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.member-app .member-section-mark svg {
  width: 21px;
  height: 21px;
}
.member-app .offers-card {
  overflow: hidden;
  background:
    radial-gradient(75% 110% at 100% 0%, hsl(calc(var(--ton) + 1.1) 47.2% 50.2% / .2), transparent 68%),
    hsl(calc(var(--ton) + 6.1) 100% 97.6% / .93);
}
.member-app .offers-card #coupons {
  margin-top: 18px;
}
.member-app .offers-card .empty-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 13px;
  padding: 15px 0 1px;
  border-top: 1px solid hsl(calc(var(--ton) - 6.2) 40.7% 17.8% / .1);
  text-align: left;
}
.member-app .offers-card .es-icon {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  margin: 1px 0 0;
  border-radius: 13px;
  box-shadow: none;
}
.member-app .offers-card .es-title {
  margin: 0 0 3px;
  color: var(--member-espresso);
  font-size: .88rem;
  font-weight: 650;
}
.member-app .offers-card .es-text {
  max-width: 26ch;
  margin: 0;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .58);
  font-size: .76rem;
  line-height: 1.5;
}
.member-app .offers-card .coupon {
  margin-bottom: 10px;
  border: 1px solid hsl(calc(var(--ton) - 4.9) 45.5% 21.6% / .12);
  border-left: 3px solid hsl(calc(var(--ton) + 0.6) 48.4% 47.8%);
  border-radius: 14px;
  background: hsl(calc(var(--ton) + 11.1) 100% 98.8% / .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.member-app .offers-card .coupon::before,
.member-app .offers-card .coupon::after {
  display: none;
}
.member-app .offers-card .cp-title {
  color: var(--member-espresso);
  font-size: .86rem;
  font-weight: 650;
}
.member-app .offers-card .cp-count {
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .55);
  font-size: .7rem;
  letter-spacing: .02em;
}
.member-app .profile-card {
  background: hsl(calc(var(--ton) + 6.1) 100% 97.6% / .88);
}
.member-app .profile-mark {
  border-radius: 50%;
}
.member-app .profile-note {
  position: relative;
  margin: 18px 0;
  padding: 13px 14px 13px 30px;
  border-radius: 15px;
  background: hsl(calc(var(--ton) + 3.8) 41.5% 79.2% / .26);
}
.member-app .profile-note::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(calc(var(--ton) - 1.7) 45.3% 45.9%);
  box-shadow: 0 0 0 5px hsl(calc(var(--ton) - 1.7) 45.3% 45.9% / .12);
}
.member-app .profile-note p {
  margin: 0;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .63);
  font-size: .76rem;
  line-height: 1.52;
}
.member-app .profile-editor label {
  margin-bottom: 8px;
  color: hsl(calc(var(--ton) - 6.4) 37.5% 12.5% / .72);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.member-app .profile-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}
.member-app .profile-card input {
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid hsl(calc(var(--ton) - 5.9) 40.5% 16.5% / .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  color: var(--member-espresso);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-size: .84rem;
}
.member-app .profile-card input:focus {
  border-color: hsl(calc(var(--ton) - 2.5) 48.8% 32.9% / .45);
  box-shadow: 0 0 0 3px hsl(calc(var(--ton) - 1) 44.9% 44.1% / .13);
}
.member-app .profile-card #btn-profil {
  width: auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--member-espresso);
  color: hsl(calc(var(--ton) + 7.1) 100% 97.1%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 22px -16px hsl(calc(var(--ton) - 5.8) 44.8% 11.4% / .8);
  font-size: .76rem;
  font-weight: 650;
}
.member-app .profile-card #btn-profil:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 15px 26px -16px hsl(calc(var(--ton) - 5.8) 44.8% 11.4% / .82);
}
.member-app .profile-card #btn-profil:active {
  transform: translateY(1px);
}
.member-app .news-card {
  overflow: hidden;
  background:
    radial-gradient(88% 72% at 110% -8%, hsl(calc(var(--ton) + 0.3) 46.2% 48.8% / .17), transparent 70%),
    hsl(calc(var(--ton) + 6.1) 100% 97.6% / .92);
}
.member-app .news-heading h2 {
  max-width: 9ch;
  text-wrap: balance;
}
.member-app .news-mark {
  border-radius: 50%;
  background: var(--member-espresso);
  color: hsl(calc(var(--ton) + 7.1) 100% 96.1%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -16px hsl(calc(var(--ton) - 5.8) 43.3% 11.8% / .8);
}
.member-app .news-intro {
  max-width: 31ch;
  margin: 16px 0 0;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .59);
  font-size: .78rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.member-app .news-feed {
  display: grid;
  gap: 11px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid hsl(calc(var(--ton) - 6.2) 40.7% 17.8% / .1);
}
.member-app .news-feed .empty-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 13px;
  padding: 0 0 2px;
  text-align: left;
}
.member-app .news-feed .es-icon {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  margin: 1px 0 0;
  border-radius: 13px;
  box-shadow: none;
}
.member-app .news-feed .es-title {
  margin: 0 0 3px;
  color: var(--member-espresso);
  font-size: .88rem;
  font-weight: 650;
}
.member-app .news-feed .es-text {
  max-width: 27ch;
  margin: 0;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .58);
  font-size: .76rem;
  line-height: 1.5;
}
.member-app .news-feed .msg {
  position: relative;
  margin: 0;
  padding: 16px 16px 14px 42px;
  border: 1px solid hsl(calc(var(--ton) - 5.7) 43.1% 20% / .09);
  border-radius: 18px;
  background: hsl(calc(var(--ton) + 11.1) 100% 98.8% / .72);
  color: hsl(calc(var(--ton) - 7.1) 36.7% 11.8% / .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  font-size: .84rem;
  line-height: 1.5;
}
.member-app .news-feed .msg::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(calc(var(--ton) - 0.1) 49% 48.4%);
  box-shadow: 0 0 0 5px hsl(calc(var(--ton) - 0.1) 49% 48.4% / .12);
}
.member-app .news-feed .msg-offer {
  display: block;
  margin: 12px 0 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--member-espresso);
  color: hsl(calc(var(--ton) + 5.8) 100% 96.3%);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.4;
}
.member-app .news-feed .msg .date {
  margin-top: 11px;
  color: hsl(calc(var(--ton) - 5.8) 31% 16.5% / .45);
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.member-app .foot-links {
  margin: 28px 0 8px;
  color: hsl(calc(var(--ton) - 5.3) 38.8% 16.7% / .38);
}
.member-app .foot-links a {
  color: hsl(calc(var(--ton) - 5.3) 38.8% 16.7% / .56);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.member-app .bottomnav {
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(406px, calc(100% - 24px));
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background: hsl(calc(var(--ton) - 4.9) 31.9% 9.2% / .94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 22px 48px -22px hsl(calc(var(--ton) - 6) 48.8% 8.4% / .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.member-app .navbtn {
  padding: 9px 4px 8px;
  border-radius: 22px;
  color: hsl(calc(var(--ton) + 6.4) 100% 96.7% / .56);
  font-size: .62rem;
}
.member-app .navbtn:hover {
  color: hsl(calc(var(--ton) + 6.4) 100% 96.7%);
}
.member-app .navbtn.active {
  background: var(--member-cream);
  color: var(--member-espresso);
}
.member-app .navbtn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 360px) {
  .member-app .wrap {
    padding-right: 13px;
    padding-left: 13px;
  }
  .member-app .topbar .brand {
    font-size: 1.35rem;
  }
  .member-app .card {
    margin-right: 3px;
    margin-left: 3px;
  }
  .member-app .qr-layout {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 12px;
  }
  .member-app .qr-copy h2 {
    font-size: 1.48rem;
  }
  .member-app .qr-copy p {
    font-size: .7rem;
  }
  .member-app .qr-box img {
    width: 102px;
    height: 102px;
  }
  .member-app .qr-code-text {
    font-size: .64rem;
    letter-spacing: .13em;
  }
  .member-app .profile-input-row {
    grid-template-columns: 1fr;
  }
  .member-app .profile-card #btn-profil {
    width: 100%;
  }
}

/* ---- 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: hsl(calc(var(--ton) + 1.1) 25% 6.3%); 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 ---- */
/* Breite Tabellen dürfen seitlich geschoben werden, damit die Seite selbst
   schmal bleibt. Ohne Hinweis am Rand sieht das auf dem Handy aber nach
   „abgeschnitten" aus statt nach „hier geht es weiter" — deshalb derselbe
   Verlauf wie bei der Reiterleiste. Die Klassen setzt app.js. */
.table-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.table-scroll::-webkit-scrollbar { display: none; }
.table-scroll.has-more { mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.table-scroll.has-prev { mask-image: linear-gradient(to right, transparent 0%, #000 12%); }
.table-scroll.has-more.has-prev {
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ---- Kundenliste: am Rechner Tabelle, am Handy zum Aufklappen ----
   Sieben Spalten passen auf kein Handy. Statt sie dort ersatzlos zu streichen
   (dann wüsste der Wirt nie, dass es sie gibt), verschwinden die vier hinteren
   und wandern in eine Zeile, die sich durch Antippen öffnet.
   Die Unterscheidung steckt bewusst NUR hier im CSS: Dreht jemand sein Handy
   quer, stimmt es sofort — ohne dass die Liste neu gezeichnet werden muss. */
.k-pfeil { display: none; }
.k-detail { display: none; }

@media (max-width: 560px) {
  .k-weit { display: none; }
  .k-zeile { cursor: pointer; }
  .k-zeile td:first-child { display: flex; align-items: center; gap: 7px; }
  .k-pfeil {
    display: inline-block; flex: none; color: var(--muted);
    transition: transform .15s ease;
  }
  .k-zeile.offen .k-pfeil { transform: rotate(90deg); }
  .k-detail.offen { display: table-row; }
  .k-detail td {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    padding: 10px 12px 12px;
  }
  .k-paar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 5px 0; white-space: normal;
  }
  .k-paar span { color: var(--muted); font-size: .84rem; }
}

/* Suchen-und-Sortieren-Zeile. Sie hatte bis zum 29.07.2026 kein Umbruch-
   verhalten: Das Sortierfeld erzwang 180 px, das Suchfeld daneben wollte den
   Rest — auf einem Handy ragte die Auswahl damit sichtbar aus der Karte
   heraus. Auf schmalen Geräten stehen beide jetzt untereinander. */
.such-zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.such-zeile input[type=search] { flex: 1 1 160px; min-width: 0; }
.such-zeile select { flex: 0 1 180px; min-width: 0; }
@media (max-width: 520px) {
  .such-zeile input[type=search], .such-zeile select { flex: 1 1 100%; }
}
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: hsl(calc(var(--ton) + 117.4) 61.5% 94.9%); color: var(--ok); }
.pill.no { background: hsl(calc(var(--ton) + 6.1) 35.3% 93.3%); 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 hsl(calc(var(--ton) - 6.2) 33.3% 21.8% / .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: hsl(calc(var(--ton) - 2.2) 36% 9.8%); 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: hsl(calc(var(--ton) - 2.2) 36% 9.8%); }

.mockup-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: hsl(calc(var(--ton) + 10.6) 100% 92.5%); color: hsl(calc(var(--ton) + 12.1) 76.9% 30.6%); 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)); }