/* Gästekarte im Appetit-Design (26.10.2026), Vorlage muster/cevapi/karte.html.
   Farben kommen als --k-* aus <basis>/farben.css (dunkel oder hell je Laden). Hier stehen nur Vorgaben.
   iPhone zuerst: kein backdrop-filter, keine festen Zierebenen. Maßeinheit --u = Kartenbreite / 36,9. */

@font-face { font-family: 'ArchivoK'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('/fonts/Archivo-var-normal-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: 'ArchivoK'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('/fonts/Archivo-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'ArchivoK'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('/fonts/Archivo-var-italic-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: 'ArchivoK'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('/fonts/Archivo-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'FrauncesK'; font-style: italic; font-weight: 600 700; font-display: swap;
  src: url('/fonts/Fraunces-var-italic-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: 'FrauncesK'; font-style: italic; font-weight: 600 700; font-display: swap;
  src: url('/fonts/Fraunces-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Vorgaben, falls ein Laden keine eigenen Farben hat (farben.css überschreibt sie) */
:root {
  --k-bg1: #2b2318; --k-bg2: #15120d; --k-bg3: #0e0c09; --k-nacht: #0a0908; --k-seite2: #2a2318; --k-seite3: #1b1712;
  --k-glut: #e09a3a; --k-glut-rgb: 224, 154, 58; --k-glut2: #e6c48a;
  --k-gold1: #f6e3b8; --k-gold2: #c9a96c; --k-gold3: #79653f; --k-gold-rgb: 246, 227, 184; --k-gold2-rgb: 201, 169, 108; --k-haken-hell: #fbf3e3;
  --k-creme: #f8f1e4; --k-leise: #b5a68c; --k-tief: #0b0a08; --k-feld: #17130e; --k-ink: #2a1c08;
  --k-gratis1: #f1dcae; --k-gratis2: #e09a3a; --k-gratis3: #b37f30;
  --k-schatten: rgba(0,0,0,.55);
  --k-block: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --k-vignette: rgba(0,0,0,.55);
  --k-schild-bg: rgba(0,0,0,.66);
  --k-titel-schatten: 0 3px 0 rgba(0,0,0,.35);
  --k-leer-bg: radial-gradient(circle, rgba(255,255,255,.045), rgba(0,0,0,.25));
  --k-spur: rgba(255,255,255,.08);
  --k-rand: rgba(var(--k-gold-rgb), .16);
}

body.kartenseite {
  background: radial-gradient(760px 560px at 50% -60px, var(--k-seite2) 0%, rgba(0,0,0,0) 72%) no-repeat, var(--k-nacht);
  overflow-x: hidden;
}
body.kartenseite .seite { padding: 14px 14px 56px; }
body.kartenseite .glas {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--k-block); border-color: var(--k-rand); border-radius: 24px;
  box-shadow: 0 16px 34px var(--k-schatten);
}
body.kartenseite h2 {
  font-family: 'ArchivoK', 'Montserrat', 'Inter', system-ui, sans-serif; font-weight: 900; font-stretch: 80%;
  text-transform: uppercase; letter-spacing: .01em; font-size: 27px; color: var(--k-gold1);
}
body.kartenseite .knopf { font-family: 'ArchivoK', 'Inter', system-ui, sans-serif; font-weight: 800; font-stretch: 92%; letter-spacing: .01em; }
body.kartenseite .knopf.zwei { font-weight: 600; }
/* Google Wallet: schlichter eigener Knopf. VOR DEM LIVEGANG muss hier der offizielle Google-Knopf
   ("Zu Google Wallet hinzufügen", Markenregeln von Google) hinein, den holt der Hauptchat nach. */
body.kartenseite #wallet-bereich { margin: 12px 0; }
body.kartenseite .knopf.wallet { width: 100%; }
/* Apple Wallet (10.11.2026): schlichter schwarzer Knopf. VOR DEM LIVEGANG das offizielle Abzeichen
   "Zu Apple Wallet hinzufügen" (Apple Wallet Badge, deutsche Fassung, Markenregeln von Apple) einsetzen. */
body.kartenseite #apple-bereich { margin: 12px 0; }
body.kartenseite .knopf.apple-wallet { width: 100%; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; font-weight: 600; }
/* Termin-Knopf (10.11.2026): groß und gut sichtbar, Farben der Karte */
body.kartenseite .termin-knopf { margin: 14px 0 4px; min-height: 64px; font-size: 21px; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
body.kartenseite .termin-knopf.versteckt { display: none; }
body.kartenseite .muster-hinweis { border-color: rgba(var(--k-gold2-rgb), .7); }

/* Die Karte */
.karte {
  --u: min(calc((100vw - 28px) / 36.9), 13px);
  position: relative; overflow: hidden;
  border-radius: calc(var(--u) * 2.15);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 1.85) calc(var(--u) * 1.55);
  background:
    radial-gradient(75% 24% at 50% 55%, rgba(var(--k-glut-rgb), .24) 0%, rgba(var(--k-glut-rgb), 0) 70%),
    linear-gradient(165deg, var(--k-bg1) 0%, var(--k-bg2) 50%, var(--k-bg3) 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--k-gold-rgb), .18) inset,
    0 calc(var(--u) * 2) calc(var(--u) * 4) var(--k-schatten),
    0 0 calc(var(--u) * 5) rgba(var(--k-glut-rgb), .16);
  color: var(--k-creme);
  font-family: 'ArchivoK', 'Inter', system-ui, sans-serif;
}

/* Kopf */
.k-kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .7); }
.k-marke { display: flex; align-items: center; gap: calc(var(--u) * .8); min-width: 0; flex: 1 1 auto; }
.k-zeichen {
  flex: none; width: calc(var(--u) * 3.85); height: calc(var(--u) * 3.85); border-radius: 50%;
  display: grid; place-items: center; color: var(--k-gold2); --ko: var(--k-tief);
  background: radial-gradient(circle at 50% 38%, var(--k-feld), var(--k-tief));
  box-shadow: 0 0 0 calc(var(--u) * .12) var(--k-gold2), 0 0 0 calc(var(--u) * .3) var(--k-tief), 0 0 0 calc(var(--u) * .36) rgba(var(--k-gold-rgb), .3);
}
.k-zeichen svg { width: 64%; height: 64%; }
.k-zeichen.mit-logo { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
.k-zeichen.mit-logo img { display: block; height: calc(var(--u) * 3.85); width: auto; max-width: calc(var(--u) * 8); object-fit: contain; }
/* Laden ohne Branche (heute nur SCOOP): Logo gross oben, kein Fotofeld, der Schriftzug steht schon im Logo */
.karte.logo-gross .k-zeichen.mit-logo img { height: calc(var(--u) * 17); max-width: calc(var(--u) * 20); }
.karte.logo-gross .k-namen, .karte.logo-gross .k-foto, .karte.logo-gross .k-gratis { display: none; }
.karte.logo-gross .k-kopf { align-items: flex-start; margin-bottom: calc(var(--u) * 1.2); }
.k-namen { min-width: 0; flex: 1 1 auto; }
.k-zier {
  display: block; font-family: 'FrauncesK', Georgia, serif; font-style: italic; font-weight: 700;
  font-size: max(15px, calc(var(--u) * 1.54)); line-height: 1.08; color: var(--k-gold2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-name {
  display: block; margin-top: 3px; font-weight: 900; font-stretch: 78%;
  font-size: calc(var(--u) * 2.3); line-height: .95; letter-spacing: .01em; text-transform: uppercase;
  color: var(--k-creme); width: 100%;
}
.k-hallo { flex: none; text-align: right; max-width: 42%; }
.k-hallo span {
  display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 500;
  font-size: max(13px, calc(var(--u) * 1)); color: var(--k-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-hallo strong {
  display: inline-block; margin-top: calc(var(--u) * .38); white-space: nowrap;
  font-weight: 800; font-stretch: 90%; font-size: max(14px, calc(var(--u) * 1.15));
  padding: calc(var(--u) * .3) calc(var(--u) * .72); border-radius: 999px;
  background: rgba(var(--k-gold-rgb), .1); color: var(--k-gold1);
  box-shadow: inset 0 0 0 1.5px rgba(var(--k-gold-rgb), .28);
}

/* Foto */
.k-foto {
  margin-top: calc(var(--u) * 1.4); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 1.4);
  position: relative; overflow: hidden; display: grid; place-items: center; color: rgba(var(--k-gold2-rgb), .5); --ko: var(--k-tief);
  background: radial-gradient(circle at 50% 45%, var(--k-bg1), var(--k-bg3));
  box-shadow: 0 0 0 1.5px rgba(var(--k-gold-rgb), .22), 0 calc(var(--u) * .9) calc(var(--u) * 1.9) var(--k-schatten);
}
.k-foto.mit-foto { background: var(--foto) var(--foto-pos, 50% 50%) / cover no-repeat; }
.k-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 55%, var(--k-vignette) 100%),
    radial-gradient(120% 100% at 60% 45%, rgba(0,0,0,0) 55%, var(--k-vignette) 100%);
}
.k-foto > svg { width: 34%; height: 60%; }
.k-schild {
  position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * .92); z-index: 1;
  max-width: calc(100% - var(--u) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 800; font-size: max(11px, calc(var(--u) * .85)); letter-spacing: .17em; text-transform: uppercase;
  padding: calc(var(--u) * .4) calc(var(--u) * .72); border-radius: 999px;
  background: var(--k-schild-bg); color: var(--k-gold1);
  box-shadow: inset 0 0 0 1.5px rgba(var(--k-gold-rgb), .35);
}

/* Mitte: was es gibt */
.k-mitte { margin-top: calc(var(--u) * 1.55); text-align: center; display: flex; flex-direction: column; align-items: center; }
.k-etikett {
  display: flex; align-items: center; gap: calc(var(--u) * .77); padding-left: .23em;
  font-weight: 800; font-size: max(12px, calc(var(--u) * 1.15)); letter-spacing: .23em; text-transform: uppercase; color: var(--k-glut2);
}
.k-etikett::before, .k-etikett::after {
  content: ''; width: calc(var(--u) * 2.7); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--k-glut-rgb), 0), var(--k-glut2));
}
.k-etikett::after { transform: scaleX(-1); }
.karte .k-titel {
  width: 100%; margin: calc(var(--u) * .55) 0 0;
  font-family: 'ArchivoK', 'Montserrat', sans-serif; font-weight: 900; font-stretch: 74%;
  font-size: calc(var(--u) * 4.54); line-height: .95; text-transform: uppercase; color: var(--k-creme);
  text-shadow: var(--k-titel-schatten), 0 0 calc(var(--u) * 1.9) rgba(var(--k-glut-rgb), .3);
}
.karte .k-titel:empty { display: none; }
.k-titel .gold { color: var(--k-gold1); }
.k-gratis {
  width: 100%; margin-top: calc(var(--u) * .15); padding: 0 calc(var(--u) * .55) calc(var(--u) * .23);
  font-style: italic; font-weight: 900; font-stretch: 88%;
  font-size: calc(var(--u) * 4); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--k-gratis1) 0%, var(--k-gratis2) 60%, var(--k-gratis3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--u) * .23) calc(var(--u) * .7) rgba(var(--k-glut-rgb), .45));
}
.k-gratis:empty { display: none; }

/* Stempelfeld: jede Zahl von 5 bis 20, die Prämie ist immer das letzte Feld */
.karte .kreise {
  --sp: 5; --lk: calc(var(--u) * .92);
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .85) var(--lk);
  margin: calc(var(--u) * 1.35) 0 0; padding: calc(var(--u) * .42);
}
.karte .kreis {
  flex: 0 0 calc((100% - (var(--sp) - 1) * var(--lk)) / var(--sp));
  width: auto; max-width: none; aspect-ratio: 1; border-radius: 50%; position: relative; display: grid; place-items: center;
  border: max(2px, calc(var(--u) * .115)) dashed rgba(var(--k-gold2-rgb), .42);
  background: var(--k-leer-bg); color: rgba(var(--k-gold2-rgb), .58); --ko: var(--k-tief);
  font-weight: 800; font-stretch: 92%; font-size: calc(var(--u) * 1.75); line-height: 1;
}
.karte .kreis svg { width: 54%; height: 54%; }
.karte .kreis svg.sy { width: 70%; height: 70%; }
.karte .kreis.voll {
  border: 0; color: var(--k-ink); --ko: var(--st-ko);
  background: radial-gradient(circle at 34% 28%, var(--st1) 0, var(--st2) 38%, var(--akzent) 70%, var(--st3) 100%);
  box-shadow:
    0 0 0 calc(var(--u) * .19) var(--k-gold2),
    0 0 0 calc(var(--u) * .35) rgba(0,0,0,.4),
    0 0 0 calc(var(--u) * .41) rgba(var(--k-gold-rgb), .3),
    0 calc(var(--u) * .54) calc(var(--u) * .92) rgba(0,0,0,.5);
}
.karte.mit-foto .kreis.voll:not(.praemie) { background: var(--foto) var(--fp, 50% 50%) / var(--fg, 340%) auto no-repeat; }
.karte.mit-foto .kreis.voll:not(.praemie) svg { display: none; }
.karte .kreis.voll::after {
  content: ''; position: absolute; inset: auto calc(var(--u) * -.2) calc(var(--u) * -.2) auto;
  width: max(17px, 30%); height: max(17px, 30%); border: 0; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23331a08' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat,
    radial-gradient(circle at 35% 30%, var(--k-haken-hell), var(--k-gold2) 60%, var(--k-gold3));
  box-shadow: 0 0 0 max(2px, calc(var(--u) * .115)) var(--k-tief), 0 calc(var(--u) * .15) calc(var(--u) * .4) rgba(0,0,0,.5);
}
.karte .kreis.praemie {
  border: 0; color: var(--k-glut2);
  background: radial-gradient(circle at 50% 40%, var(--k-feld) 0%, var(--k-tief) 75%);
  box-shadow:
    0 0 0 calc(var(--u) * .15) var(--k-glut),
    0 0 0 calc(var(--u) * .38) rgba(var(--k-glut-rgb), .18),
    0 0 calc(var(--u) * 1.75) rgba(var(--k-glut-rgb), .7),
    inset 0 0 calc(var(--u) * 1) rgba(var(--k-glut-rgb), .35);
}
.karte .kreis.praemie svg.k-geschenk, .karte .kreis.praemie img { width: 54%; height: 54%; margin-top: -20%; object-fit: contain; opacity: 1; filter: none; }
.karte .kreis.praemie em {
  position: absolute; left: 0; right: 0; bottom: 14%; text-align: center;
  font-style: normal; font-weight: 900; font-stretch: 85%; font-size: max(8.5px, calc(var(--u) * .9)); letter-spacing: .08em; color: var(--k-glut2);
}
.karte .kreis.praemie.voll {
  color: var(--k-tief);
  background: radial-gradient(circle at 40% 30%, var(--k-gratis1) 0%, var(--k-glut) 62%, var(--k-gratis3) 100%);
  animation: k-puls 2.4s ease-in-out infinite;
}
.karte .kreis.praemie.voll em { color: var(--k-tief); }
.karte .kreis.praemie.voll::after { display: none; }
.karte .kreis.praemie.voll.neu { animation: stempel .9s cubic-bezier(.2,1.4,.4,1), k-puls 2.4s ease-in-out 1s infinite; }
@keyframes k-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Stand und Fuß */
.k-stand { margin-top: calc(var(--u) * 1.55); display: flex; align-items: center; gap: calc(var(--u) * .85); }
.k-balken {
  flex: 1; height: max(7px, calc(var(--u) * .62)); border-radius: 99px; overflow: hidden;
  background: var(--k-spur); box-shadow: inset 0 0 0 1.5px rgba(var(--k-gold-rgb), .12);
}
.k-balken i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--k-gold2), var(--k-glut));
  box-shadow: 0 0 calc(var(--u) * .7) rgba(var(--k-glut-rgb), .7);
  transition: width .6s ease;
}
.k-stand b { font-weight: 800; font-stretch: 90%; font-size: max(15px, calc(var(--u) * 1.3)); white-space: nowrap; color: var(--k-creme); }
.k-stand b span { color: var(--k-leise); font-weight: 600; }
.karte .k-banner {
  margin-top: calc(var(--u) * 1.1); border-color: rgba(var(--k-glut-rgb), .75); background: rgba(var(--k-glut-rgb), .14);
  color: var(--k-creme); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.4;
}
.k-fuss {
  margin-top: calc(var(--u) * 1.4); padding-top: calc(var(--u) * .95);
  border-top: 1.5px solid rgba(var(--k-gold-rgb), .12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  font-family: 'Inter', system-ui, sans-serif; font-size: max(12px, calc(var(--u) * .85)); color: var(--k-leise); line-height: 1.35;
}
.k-von { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.k-von img { width: max(20px, calc(var(--u) * 1.3)); height: max(20px, calc(var(--u) * 1.3)); border-radius: 5px; }
.k-von strong { color: var(--k-creme); font-weight: 600; }
@media (max-width: 479px) { .k-fuss { justify-content: center; text-align: center; } }

/* Code zum Zeigen, direkt unter der Karte */
body.kartenseite .k-code { text-align: center; margin-top: 16px; }
.k-code h2 { margin-bottom: .3em; }
.k-code .qr-kachel { max-width: 264px; margin-top: 16px; box-shadow: 0 0 0 3px rgba(var(--k-gold2-rgb), .55), 0 0 0 7px rgba(var(--k-gold2-rgb), .12), 0 14px 30px var(--k-schatten); }
.k-code-titel {
  margin: 18px 0 2px; font-family: 'ArchivoK', 'Inter', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--k-glut2);
}
/* Inhaber-Logo unter dem Code (11.11.2026), rund, ohne eigenen Rahmen: der Ring steckt im Bild */
body.kartenseite .inhaber-box { text-align: center; padding-top: 22px; padding-bottom: 18px; }
.inhaber-box img { display: block; width: min(180px, 56vw); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; }
.inhaber-adresse { margin: 12px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--k-leise); }
.inhaber-adresse:empty { display: none; }
.k-code .code-zeile {
  font-family: 'ArchivoK', 'Inter', sans-serif; font-weight: 800; font-stretch: 92%;
  font-size: 32px; letter-spacing: .16em; color: var(--k-gold1); padding-left: .16em;
}

@media (prefers-reduced-motion: reduce) {
  .karte .kreis.praemie.voll, .karte .kreis.praemie.voll.neu { animation: none; }
  .k-balken i { transition: none; }
}

/* Logo-Fassung für Friseure und Barber (shops.karte_nur_logo, Ramon 04.11.2026): oben nur das große Logo, kein Foto, flache Kreise, kein Glühen.
   Greift nur bei Läden mit dem Wert 1, alle anderen bleiben unverändert. */
@font-face { font-family: 'PlayfairK'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-display-latin.woff2') format('woff2'); }
.karte.nur-logo { --k-glut: var(--k-gold2); --k-glut-rgb: var(--k-gold2-rgb); --k-glut2: var(--k-gold2); }
.karte.nur-logo .k-kopf { flex-wrap: wrap; justify-content: center; row-gap: calc(var(--u) * 1.2); margin-bottom: 0; }
.karte.nur-logo .k-zeichen.mit-logo { flex: 0 0 100%; display: flex; justify-content: center; }
.karte.nur-logo .k-zeichen.mit-logo img { height: calc(var(--u) * 15); max-width: 100%; }
.karte.nur-logo .k-hallo { flex: 0 0 100%; max-width: none; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.karte.nur-logo .k-hallo span { font-size: max(15px, calc(var(--u) * 1.15)); color: var(--k-creme); }
.karte.nur-logo .k-hallo strong { margin-top: 0; background: none; color: var(--k-creme); font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-stretch: normal; box-shadow: inset 0 0 0 1.5px rgba(var(--k-gold2-rgb), .55); }
.karte.nur-logo .k-titel, .karte.nur-logo .k-gratis {
  font-family: 'PlayfairK', Georgia, serif; font-style: normal; font-weight: 500; font-stretch: normal; text-transform: none; letter-spacing: -.005em;
  font-size: calc(var(--u) * 3.7); line-height: 1.14; text-shadow: none;
}
.karte.nur-logo .k-titel { color: var(--k-creme); }
.karte.nur-logo .k-titel .gold { color: inherit; text-transform: capitalize; }
.karte.nur-logo .k-gratis {
  display: block; padding: 0; margin-top: 0; filter: none; color: var(--k-gold2);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.karte.nur-logo .k-gratis:empty { display: none; }
.karte.nur-logo .kreis {
  border: max(1.5px, calc(var(--u) * .08)) solid rgba(var(--k-creme-rgb, 243, 241, 244), .45); background: none; color: var(--k-creme);
  font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-stretch: normal; font-size: calc(var(--u) * 1.5);
}
.karte.nur-logo .kreis.voll { border: 0; background: var(--k-gold2); color: var(--k-tief); --ko: var(--k-gold2); box-shadow: none; }
.karte.nur-logo .kreis.voll:not(.praemie) svg.sy { transform: none !important; }
.karte.nur-logo .kreis.voll img.k-logostempel { display: block; width: 76%; height: 76%; object-fit: contain; }
.karte.nur-logo .kreis.voll::after { display: none; }
.karte.nur-logo .kreis.praemie {
  border: max(1.5px, calc(var(--u) * .1)) solid var(--k-gold2); background: none; color: var(--k-gold2);
  box-shadow: inset 0 0 0 calc(var(--u) * .24) var(--k-tief), inset 0 0 0 calc(var(--u) * .3) var(--k-gold2);
}
.karte.nur-logo .kreis.praemie svg.k-geschenk { width: 56%; height: 56%; margin-top: 0; }
.karte.nur-logo .kreis.praemie em { display: none; }
.karte.nur-logo .kreis.praemie.voll { background: var(--k-gold2); color: var(--k-tief); }
.karte.nur-logo .k-balken { height: max(4px, calc(var(--u) * .24)); box-shadow: none; }
.karte.nur-logo .k-balken i { background: var(--k-gold2); box-shadow: none; }
.karte.nur-logo { background: var(--k-nacht); box-shadow: inset 0 0 0 1.5px rgba(var(--k-gold-rgb), .18); }
.karte.nur-logo .k-stand b { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-stretch: normal; }
body.kartenseite.nur-logo { background: var(--k-nacht); }
body.kartenseite.nur-logo .k-code h2, body.kartenseite.nur-logo h2 { font-family: 'PlayfairK', Georgia, serif; font-weight: 500; font-stretch: normal; text-transform: none; letter-spacing: 0; }

/* Geschenk zwischendurch (11.11.2026, Helan: Haarwachs beim 6. Stempel). Das Feld zeigt das Foto des Geschenks:
   blass mit Goldring, solange es noch fehlt, in voller Farbe ab dem Stempel, pulsiert, bis es an der Kasse übergeben ist. */
.karte .kreis.zwischen, .karte.nur-logo .kreis.zwischen {
  border: 0; background: var(--k-tief); overflow: visible;
  box-shadow: 0 0 0 max(1.5px, calc(var(--u) * .12)) rgba(var(--k-gold2-rgb), .8);
}
.karte .kreis.zwischen img.k-zwbild {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 50%;
  object-fit: cover; opacity: .5; filter: saturate(.5);
}
.karte .kreis.zwischen svg.k-geschenk { width: 54%; height: 54%; }
.karte .kreis.zwischen em {
  position: absolute; left: -10%; right: -10%; bottom: -2%; text-align: center; font-style: normal; font-weight: 900;
  font-family: 'Inter', system-ui, sans-serif; font-stretch: normal; font-size: max(8px, calc(var(--u) * .78)); letter-spacing: .08em;
  color: var(--k-tief); background: var(--k-gold2); border-radius: 99px; padding: .2em .3em; line-height: 1;
}
.karte .kreis.zwischen.voll, .karte.nur-logo .kreis.zwischen.voll, .karte.mit-foto .kreis.zwischen.voll {
  background: var(--k-tief);
  box-shadow: 0 0 0 max(2px, calc(var(--u) * .19)) var(--k-gold2), 0 0 calc(var(--u) * 1.2) rgba(var(--k-gold2-rgb), .45);
}
.karte .kreis.zwischen.voll img.k-zwbild { opacity: 1; filter: none; }
.karte .kreis.zwischen.bereit { animation: k-puls 2.4s ease-in-out infinite; }
.karte .kreis.zwischen.bereit::after, .karte.nur-logo .kreis.zwischen.bereit::after { display: none; }
.karte .kreis.zwischen.abgeholt::after, .karte.nur-logo .kreis.zwischen.abgeholt::after { display: block; }
.karte .k-zwzeile {
  margin: calc(var(--u) * .9) 0 0; text-align: center; color: var(--k-creme);
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.4; opacity: .9;
}
@media (prefers-reduced-motion: reduce) { .karte .kreis.zwischen.bereit { animation: none; } }