@import url("../fonts/fonts.css");
@import url("farben.css");

/* ═══════════════════════════════════════════════════════════════════════════
   Fußpflege Kifel — Stempelkarte
   Schriften wie auf der Hauptseite (fusspflege-kifel-film), Farben aus
   farben.css. Welche Fassung gilt, entscheidet data-farbe am <html>.

   Bewusst FEST hell: die Karte ist ein Dokument, kein Fensterrahmen. Alle
   Farben stehen ausdrücklich, damit der Dunkelmodus des Handys nichts
   umfärbt, was dann keiner mehr lesen kann.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --serif:  "Boska", "Iowan Old Style", Georgia, serif;
  --grotesk:"Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:   "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gruen:  #4E7A52;
  --rot:    #A44A3F;

  --rand: clamp(1.1rem, 5vw, 2.5rem);
  --auf:  cubic-bezier(.22, 1, .36, 1);
  --weich:cubic-bezier(.4, 0, .2, 1);
  --feder:cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

/* Das hidden-Attribut MUSS gewinnen. Ohne diese Zeile schlägt jede eigene
   display-Regel (z. B. .knopf-reihe{display:grid}) das hidden des Browsers —
   und ein Knopf, der versteckt sein sollte, steht sichtbar da. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: var(--rand);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background .5s var(--weich), color .5s var(--weich);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.wortmarke {
  display: block; text-align: center; text-decoration: none;
  color: var(--tinte); margin-bottom: 1.6rem;
}
.wortmarke span {
  display: block; font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tinte-leise);
}
.wortmarke b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.9rem; letter-spacing: .16em; margin-top: .1rem;
}

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.15;
  margin: 0 0 .6rem; text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.25rem; margin: 0 0 .5rem;
}
p { margin: 0 0 1rem; }
.lead { color: var(--tinte-leise); text-wrap: pretty; }
.klein { font-size: .82rem; color: var(--tinte-leise); }
.mitte { text-align: center; }

/* ── Bogen (die helle Fläche um Formulare und Texte) ───────────────────── */

.bogen {
  width: 100%; max-width: 30rem;
  background: var(--karte-1);
  border: 1px solid var(--linie);
  border-radius: 1.5rem;
  padding: clamp(1.3rem, 5vw, 2.1rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 34px -18px rgba(0,0,0,.22);
}
.bogen + .bogen { margin-top: 1rem; }

/* ═══ DIE STEMPELKARTE ═══════════════════════════════════════════════════
   Drei Ebenen für die Drehung (Bauteil 09 aus dem Mikro-Interaktions-
   Baukasten): außen die Perspektive, in der Mitte die Neigung, innen die
   Drehung. Steckt beides im selben Element, kämpfen die transform-Werte
   gegeneinander und die Karte zappelt.
   ═══════════════════════════════════════════════════════════════════════ */

.karten-buehne { perspective: 1400px; width: 100%; max-width: 24rem; }

.karte-neigung { transition: transform .35s var(--weich); transform-style: preserve-3d; }

.karte {
  position: relative;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform .78s var(--auf);
}
.karte[data-hinten] { transform: rotateY(180deg); }

.karte-seite {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1.4rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, var(--karte-1) 0%, var(--karte-2) 58%, var(--karte-3) 100%);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 26px 50px -26px rgba(0,0,0,.4);
}
.karte-seite.hinten { transform: rotateY(180deg); }

/* Kopfzeile der Karte */
.karte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .8rem; padding: 1.1rem 1.2rem .7rem;
  border-bottom: 1px solid var(--linie);
}
.karte-marke span {
  display: block; font-size: .53rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinte-leise);
}
.karte-marke b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.15rem; letter-spacing: .14em;
}
.karte-zaehler { text-align: right; flex: none; }
.karte-zaehler span {
  display: block; font-size: .53rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinte-leise);
}
.karte-zaehler b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums;
}

.karte-name {
  padding: .7rem 1.2rem .2rem;
  font-size: .95rem; font-weight: 500;
}

/* ── Das Stempelraster ──────────────────────────────────────────────────
   Die Kreise liegen in einem Gitter mit fester Spaltenzahl. Jeder Kreis
   trägt sein eigenes `data-`, damit CSS allein über das Aussehen entscheidet
   und JS nur den Zustand setzt.                                          */

.raster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
  padding: .9rem 1.2rem .2rem;
  align-content: start;
}
.raster[data-spalten="4"] { grid-template-columns: repeat(4, 1fr); }
.raster[data-spalten="3"] { grid-template-columns: repeat(3, 1fr); }

.feld {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--linie-stark);
  background: color-mix(in srgb, var(--karte-3) 55%, transparent);
  display: grid; place-items: center;
}

/* Der gestempelte Kreis: ein sehr helles Feld, auf dem die Blume liegt.
   FRÜHER war der Kreis golden gefüllt — dann schluckt er jede Blütenfarbe und
   alles sieht gleich aus. Die Farbe gehört der Blume, der Kreis hält sie nur. */
.feld[data-voll] {
  border-color: color-mix(in srgb, var(--linie-stark) 70%, transparent);
  background:
    radial-gradient(circle at 32% 26%, #fff 0%, color-mix(in srgb, #fff 82%, var(--karte-2)) 62%,
                    color-mix(in srgb, var(--karte-2) 88%, var(--linie)) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 -2px 5px -2px rgba(0,0,0,.10),
    0 2px 6px -2px rgba(0,0,0,.20);
}

/* Die Blüten bringen ihre eigenen Farben mit (siehe karte.js). Hier wird nur
   noch gesteuert, wie kräftig sie erscheinen. */
/* Die Blüte ist ein freigestelltes Bild. `object-fit: contain` hält sie im
   Feld, auch wenn eine Blume breiter gewachsen ist als die andere. */
.bluete {
  width: 82%; height: 82%; display: block;
  object-fit: contain; -webkit-user-drag: none; user-select: none;
}
.feld[data-voll] .bluete {
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
}
/* Die noch offenen Blüten treten zurück, bleiben aber ERKENNBAR: man soll
   sehen, welche Blume dort wartet. Über die Farbe zurücknehmen statt über die
   Deckkraft — ein gemaltes Bild auf 30 % Deckkraft ist nur noch ein Fleck,
   während es entsättigt seine Form behält. */
.feld:not([data-voll]) .bluete { opacity: .52; filter: grayscale(.72) contrast(.9); }
.feld[data-naechste]:not([data-voll]) .bluete { opacity: .68; filter: grayscale(.45); }

/* Das nächste Feld — kräftiger Ring, wie im Vorbild. */
.feld[data-naechste] {
  border-color: var(--dunkel); border-width: 2px;
  background: var(--karte-1);
}
.feld[data-naechste]::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--dunkel) 22%, transparent);
  animation: puls 2.6s var(--weich) infinite;
}
@keyframes puls {
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: .25; transform: scale(1.11); }
}

/* ── Belohnungsfelder ───────────────────────────────────────────────────
   Auf einer Karte liegen mehrere: beim 5. Stempel der halbe Preis, beim 10.
   die geschenkte Behandlung. Beide tragen einen Kranz, damit man beim
   Hinsehen weiß, wo etwas passiert. Das höchste Feld ist das Ziel der Karte
   und bekommt die große Blüte.                                            */

.feld[data-lohn] { border-color: var(--akzent); }
/* Ist das Belohnungsfeld gerade das nächste dran, führt der dunkle Ring.
   Ohne diese Zeile gewinnt der Kranz, weil er im Stylesheet später steht —
   und dann sieht man nicht mehr, wo der nächste Stempel hinkommt. */
.feld[data-lohn][data-naechste] { border-color: var(--dunkel); border-width: 2px; }
.feld[data-lohn]::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  pointer-events: none;
}
/* Ist das Belohnungsfeld gleichzeitig das nächste dran, gewinnt der Ring des
   nächsten Feldes — sonst lägen zwei Ringe ineinander und keiner führt. */
.feld[data-lohn][data-naechste]::before { display: none; }
.feld[data-stern] .bluete { width: 90%; height: 90%; }

/* Ein frisch gesetzter Stempel fällt auf die Karte. */
.feld[data-frisch] { animation: einstempeln .62s var(--feder) both; }
@keyframes einstempeln {
  0%   { transform: scale(2.1) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(.92) rotate(3deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* Die Zeile unter dem Raster füllt den Rest der Karte — und sagt genau das,
   wonach jede Kundin als Erstes schaut: wie weit ist es noch? */
.karte-noch {
  flex: 1;
  display: grid; place-content: center;
  text-align: center; padding: .5rem 1.2rem;
}
.karte-noch b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.15rem; line-height: 1.25; color: var(--akzent-tief);
  text-wrap: balance;
}
.karte-noch span {
  display: block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-leise); margin-top: .25rem;
}

/* ── Fußzeile der Karte ─────────────────────────────────────────────────── */

.karte-fuss {
  border-top: 1px solid var(--linie);
  padding: .75rem 1.2rem .95rem;
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem;
  margin: 0;
}
.karte-fuss dt {
  font-size: .53rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: .1rem;
}
.karte-fuss dd { margin: 0; font-size: .78rem; line-height: 1.35; }
.karte-fuss .rechts { text-align: right; }

/* ── Rückseite: der QR-Code ─────────────────────────────────────────────── */

.karte-seite.hinten { padding: 1.4rem 1.2rem; align-items: center; justify-content: center; gap: .85rem; }
.qr-rahmen {
  background: #fff; padding: .7rem; border-radius: .8rem;
  border: 1px solid var(--linie);
  width: min(84%, 15rem);
}
.qr-rahmen img, .qr-rahmen svg { display: block; width: 100%; height: auto; }
.karte-code {
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: .22em;
  padding-left: .22em;
}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 3.1rem; padding: .8rem 1.3rem;
  border: 1px solid var(--dunkel); border-radius: 999px;
  background: var(--dunkel); color: var(--karte-1);
  font: inherit; font-weight: 500; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: transform .18s var(--feder), background .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover  { background: var(--dunkel-tief); }
.knopf:active { transform: scale(.975); }
.knopf[disabled] { opacity: .42; cursor: default; transform: none; }

.knopf.leise { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf.leise:hover { background: var(--karte-2); }

/* Der Akzentknopf: helle Fassungen bekommen dunkle Schrift, dunkle Fassungen
   helle. Ein fester Wert würde in der Hälfte der Fassungen durchfallen. */
.knopf.gold { background: var(--akzent); border-color: var(--akzent); color: var(--stempel-tinte); }
.knopf.gold:hover { background: var(--akzent-hell); color: var(--akzent-tief); }

.knopf-reihe { display: grid; gap: .55rem; margin-top: 1rem; }
@media (min-width: 30rem) { .knopf-reihe.zwei { grid-template-columns: 1fr 1fr; } }

/* Vierter Zustand nicht vergessen: der Fehlerfall (Bauteil 12). */
.knopf[data-stand="laeuft"] { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff; }
.knopf[data-stand="fertig"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf[data-stand="fehler"] { background: var(--rot); border-color: var(--rot); color: #fff; }

/* ── Formular ──────────────────────────────────────────────────────────── */

label { display: block; margin-bottom: .9rem; }
label > span {
  display: block; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-leise); margin-bottom: .35rem;
}
input[type=text], input[type=email], input[type=tel] {
  width: 100%; padding: .82rem .95rem;
  border: 1px solid var(--linie-stark); border-radius: .7rem;
  background: var(--karte-1); color: var(--tinte);
  font: inherit; font-size: 1rem;
  transition: border-color .18s, box-shadow .18s;
}
input:focus-visible {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 30%, transparent);
}
input[aria-invalid="true"] { border-color: var(--rot); }
.feldfehler { color: var(--rot); font-size: .82rem; margin-top: .3rem; min-height: 1.2em;
              font-style: normal; display: block; }

/* PIN-Eingabe: EIN unsichtbares Feld über den Kästchen (Bauteil 01) —
   nicht vier echte Felder. Nur so klappt Einfügen und die Vorschlagsleiste. */
.pin-feld { position: relative; }
.pin-feld input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; font-size: 16px; letter-spacing: 2em; padding-left: 1em;
  border: 0; background: transparent; color: transparent; caret-color: transparent;
}
.pin-kaestchen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.pin-kaestchen b {
  aspect-ratio: 3/4; display: grid; place-items: center;
  border: 1.5px solid var(--linie-stark); border-radius: .7rem;
  background: var(--karte-1); font-family: var(--mono); font-size: 1.5rem; font-weight: 400;
  transition: border-color .18s, box-shadow .18s;
}
.pin-kaestchen b[data-dran] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 28%, transparent);
}

/* ── Meldungen ─────────────────────────────────────────────────────────── */

.meldung {
  border-radius: .8rem; padding: .85rem 1rem; font-size: .9rem;
  border: 1px solid var(--linie-stark); background: var(--karte-2);
  margin: 0 0 1rem;
}
.meldung[data-art="gut"]   { border-color: color-mix(in srgb, var(--gruen) 45%, transparent);
                             background: color-mix(in srgb, var(--gruen) 9%, var(--karte-1)); }
.meldung[data-art="warn"]  { border-color: color-mix(in srgb, var(--akzent) 60%, transparent);
                             background: color-mix(in srgb, var(--akzent) 12%, var(--karte-1)); }
.meldung[data-art="fehler"]{ border-color: color-mix(in srgb, var(--rot) 45%, transparent);
                             background: color-mix(in srgb, var(--rot) 8%, var(--karte-1)); }
.meldung b { display: block; margin-bottom: .15rem; }

/* ── Fortschrittsleiste (Bauteil 15) ───────────────────────────────────── */

.leiste { margin: 1.1rem 0 .3rem; }
.leiste-schiene {
  height: 6px; border-radius: 999px; background: var(--karte-3);
  overflow: hidden;
}
.leiste-fuellung {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-hell), var(--akzent));
  width: 0; transition: width .7s var(--auf);
}
.leiste-text {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .78rem; color: var(--tinte-leise); margin-top: .45rem;
}

/* ── Blütenblätter-Regen ─────────────────────────────────────────────────────
   Fällt über den Bildschirm, wenn ein Stempel dazukommt.

   EINE Animation für alle Blätter — der Zufall steckt in den Zahlen, die
   jedes Blatt als eigene Variablen mitbekommt (siehe blaetterRegen() in
   karte.js). Das ist der Unterschied zwischen drei Zeilen CSS und einer
   Schleife, die je Einzelbild rechnet.

   Die Bühne liegt über allem und lässt jeden Klick durch: `pointer-events:
   none` ist hier keine Feinheit, sondern Pflicht — sonst wären für drei
   Sekunden alle Knöpfe tot.                                                 */

.blaetterregen {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
}
.blaetterregen .blatt {
  position: absolute;
  top: -8vh; left: var(--x);
  width: var(--gr); height: calc(var(--gr) * 1.35);
  background: var(--ton);
  border: .5px solid var(--saum);
  /* Ein Blütenblatt: unten rund, oben spitz — dieselbe Silhouette wie in den
     gezeichneten Blüten. */
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  opacity: 0;
  animation: blattfall var(--zeit) cubic-bezier(.35,.05,.55,.95) var(--warten) both;
  will-change: transform, opacity;
}
@keyframes blattfall {
  0%   { opacity: 0;  transform: translate3d(0, 0, 0) rotate(0) rotateX(var(--kipp)); }
  8%   { opacity: .95; }
  85%  { opacity: .95; }
  100% { opacity: 0;
         transform: translate3d(var(--drift), 112vh, 0) rotate(var(--dreh)) rotateX(calc(var(--kipp) + 540deg)); }
}

/* ── Partikel-Haken (Bauteil 06): Bestätigung nach dem Stempeln ────────── */

.tafel { position: relative; width: 116px; height: 116px; margin: 0 auto 1rem; }
.tafel svg { position: relative; z-index: 2; width: 100%; height: 100%; }
.tafel .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--gruen) 12%, var(--karte-1));
  border: 2px solid var(--gruen);
  opacity: 0; transform: scale(.6);
}
.tafel[data-an] .ring { animation: ringauf .5s var(--feder) both; }
@keyframes ringauf { to { opacity: 1; transform: scale(1); } }

.tafel .funke {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--gr); height: var(--gr); margin: calc(var(--gr) / -2);
  border-radius: var(--eck); background: var(--akzent);
  opacity: 0;
}
.tafel[data-an] .funke {
  animation: funkenflug var(--zeit) var(--auf) var(--warten) both;
}
@keyframes funkenflug {
  0%   { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dreh)) scale(.3); }
}
.tafel .strich { stroke: var(--gruen); stroke-width: 7; fill: none;
                 stroke-linecap: round; stroke-linejoin: round;
                 transition: stroke-dashoffset .55s var(--weich) .16s; }

/* ── Farbwähler ────────────────────────────────────────────────────────── */

.farbwahl { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.farbwahl button {
  display: grid; place-items: center; gap: .3rem;
  width: 3.4rem; padding: .45rem .2rem .5rem;
  border: 1.5px solid var(--linie-stark); border-radius: .8rem;
  background: var(--karte-1); color: var(--tinte-leise);
  font: inherit; font-size: .6rem; letter-spacing: .04em; cursor: pointer;
  transition: border-color .18s, transform .18s var(--feder);
}
.farbwahl button:hover { transform: translateY(-2px); }
.farbwahl button[aria-pressed="true"] { border-color: var(--tinte); color: var(--tinte); }
.farbwahl i {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
}

/* ── Kleinteile ────────────────────────────────────────────────────────── */

.zurueck {
  display: inline-block; margin-top: 1.4rem; font-size: .85rem;
  color: var(--tinte-leise); text-decoration: none; border-bottom: 1px solid var(--linie-stark);
}
.zurueck:hover { color: var(--tinte); }

.trenner { height: 1px; background: var(--linie); border: 0; margin: 1.3rem 0; }

.stapel { width: 100%; max-width: 30rem; display: flex; flex-direction: column;
          align-items: center; gap: 1.1rem; }

table.liste { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.liste th {
  text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-leise); font-weight: 500; padding: .4rem .5rem; border-bottom: 1px solid var(--linie);
}
table.liste td { padding: .55rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste td.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.liste code { font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; }
.rollbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }