/* ==========================================================================
   KEEPERsport Misura Guanti
   CI: BOKIS nur fuer grosse Headlines (uppercase), Inter fuer alles andere,
   Schwarz-Weiss-Basis mit ks-blue als einzigem Akzent, kein Gelb.
   Mobile first, weil das Foto am Handy entsteht.
   ========================================================================== */

@font-face {
  font-family: 'BOKIS';
  src: url('assets/bokis-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ks-navy: #0A0A14;
  --ks-black: #0A0A0A;
  --ks-dark: #141414;
  --ks-gray: #1C1C1C;
  --ks-bg: #F5F5F5;
  --ks-surface: #FFFFFF;
  --ks-text: #111111;
  --ks-muted: #555555;
  --ks-subtle: #999999;
  --ks-border: #E5E5E5;
  --ks-blue: #3060D0;
  --ks-green: #22C55E;
  --ks-orange: #F97316;
  --ks-red: #EF4444;

  --radius: 10px;
  --maxw: 720px;
}

* { box-sizing: border-box; }

/* Muss vor allen eigenen display-Regeln stehen und sie überstimmen.
   Das hidden-Attribut wirkt nur über display:none im Stylesheet des Browsers,
   und jede eigene Klassenregel mit display schlägt das aus. Ohne diese Zeile
   blieb der Block für Telefone auch am Rechner sichtbar, weil .filepick
   display:grid setzt. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 12px; }

.display {
  font-family: 'BOKIS', Anton, Impact, system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* CI-Regel aus dem KEEPERsport Design System (gelesen am 26.09.2026): BOKIS
   nie unter 40px, darunter laufen die Punzen zu und das Wort wird ein
   schwarzer Balken. Kleiner heißt display-small in Inter 800. Vorher standen
   die Überschriften der Schritte in BOKIS mit 22 bis 34px, auf dem Handy
   kaum lesbar. Deshalb: die Startüberschrift bleibt BOKIS, ab 40px, und
   bricht lieber um; alle anderen Überschriften sind Inter 800 in Versalien. */
h1.display { font-size: clamp(40px, 11vw, 56px); line-height: 1.0;
  /* Lange Wörter wie HANDSCHUHGRÖSSE passen bei 40px nicht in eine Zeile.
     Die CI sagt: umbrechen statt verkleinern. Die Trennstelle steht im Text
     (weiches Trennzeichen), hyphens fängt die übrigen Sprachen ab. */
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h2.display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.02em;
}

h3 { font-size: 17px; font-weight: 600; }

p { margin: 0 0 14px; }
a { color: var(--ks-blue); }

.label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ks-muted);
}

/* ---------- Kopf ---------- */

.topbar {
  background: var(--ks-navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar > svg { height: 28px; width: auto; display: block; }
.topbar .name {
  color: #fff;
  /* Inter statt BOKIS: 15px liegen weit unter der BOKIS-Untergrenze. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  margin-left: 2px;
}

/* ---------- Sprachwahl ----------
   Simon am 29.08.2026: beim Oeffnen der Seite zuerst die Sprache, als runde
   Flaggen mit dem Namen darunter. Der Name steht in der jeweiligen Sprache,
   deshalb braucht die Auswahl selbst keine Uebersetzung. */

.langpick {
  padding: 40px 0 24px;
  text-align: center;
}
.langhint {
  color: var(--ks-muted);
  font-size: 14px;
  margin: 0 0 26px;
  line-height: 1.8;
}
.langgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 380px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .langgrid { grid-template-columns: repeat(4, 1fr); max-width: 640px; }
}
.langchoice {
  appearance: none;
  background: var(--ks-surface);
  border: 1px solid var(--ks-border);
  border-radius: var(--radius);
  padding: 20px 8px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--ks-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: border-color 0.12s, transform 0.12s;
}
.langchoice:hover { border-color: var(--ks-subtle); }
.langchoice:active { transform: scale(0.97); }
.langchoice:focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 2px; }
.langchoice svg {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50%;
  /* Der Rand macht Weiss und helles Gelb gegen die weisse Kachel sichtbar. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.10);
}
.langchoice .n { font-weight: 600; font-size: 15px; }

/* Umschalter oben rechts, sobald eine Sprache gewaehlt ist. */
.langbtn {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}
.langbtn svg {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.langbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Frageblock ----------
   Simon am 01.09.2026: nach dem Einzeichnen soll eindeutig dastehen, dass die
   Genauigkeit der Punkte die Sicherheit der Groesse bestimmt. Deshalb ein
   eigener Block in ks-blue, kein Warnrot: es ist keine Absage, sondern eine
   Aufforderung, noch einmal hinzuschauen. Seit dem 02.09.2026 traegt dieser
   Block die Frage im Rueckblick von den gesetzten Punkten. */

.confirm {
  border: 1px solid var(--ks-blue);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(48, 96, 208, 0.06);
  padding: 14px 16px;
  margin: 14px 0;
}
.confirm strong { display: block; margin-bottom: 4px; }
.confirm p { margin: 0 0 12px; font-size: 15px; }
.confirm .btnrow { margin: 0; }

/* ---------- Rueckblick von den gesetzten Punkten (02.09.2026) ----------
   Ein quadratischer Ausschnitt aus dem rohen Foto, gross genug, um den Punkt
   im Zusammenhang zu beurteilen. Beim Ziehen braucht man den staerksten Zoom
   und die Lupe, beim Beurteilen mehr Umgebung: an der Fingerspitze sieht man
   sonst nicht, ob es wirklich die Spitze ist, an den Knoecheln nicht, wo die
   Handkante wieder flach wird. Deshalb ein weiteres Fenster als in der Lupe,
   in Millimetern gerechnet und damit unabhaengig von der Bildgroesse. */

.reviewnr {
  text-align: center;
  color: var(--ks-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reviewshot {
  width: min(320px, 76vw);
  aspect-ratio: 1 / 1;
  margin: 12px auto 0;
  border-radius: var(--radius);
  border: 1px solid var(--ks-border);
  background: var(--ks-gray);
  overflow: hidden;
}
.reviewshot canvas { display: block; width: 100%; height: 100%; }

/* ---------- Knoechel-Hinweis vor Foto 2 (12.09.2026) ----------
   Ein Bild, das aufgeht, wenn die Knoechel eingezeichnet werden sollen. Es
   liegt ueber dem Bildschirm statt darin: der Kunde soll es einmal ansehen und
   wegtippen, nicht daran vorbeiscrollen. */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 10, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.overlay-box {
  background: var(--ks-surface);
  border-radius: var(--radius);
  padding: 16px;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.overlay-box strong { display: block; margin: 14px 0 4px; font-size: 17px; }
.overlay-box p { margin: 0 0 14px; font-size: 15px; }
.overlay-box .btn { width: 100%; }

.kh-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--ks-gray);
}

/* Knoechelbild: die Zeichnung laeuft einmal an, die vier Knoechel nacheinander,
   dann die Messlinie darunter. Der Ablauf erzaehlt genau den Satz, der darunter
   steht. `backwards` haelt die Teile vor ihrem Einsatz unsichtbar, `.lauf`
   setzt app.js bei jedem Oeffnen neu, sonst liefe die Animation nur beim
   allerersten Mal. */
#knuckle-hint .kh-figure.lauf .kh-knuckle {
  transform-box: fill-box;
  transform-origin: center;
  animation: kh-pop 0.45s ease-out backwards;
}
#knuckle-hint .kh-figure.lauf .kh-k1 { animation-delay: 0.15s; }
#knuckle-hint .kh-figure.lauf .kh-k2 { animation-delay: 0.30s; }
#knuckle-hint .kh-figure.lauf .kh-k3 { animation-delay: 0.45s; }
#knuckle-hint .kh-figure.lauf .kh-k4 { animation-delay: 0.60s; }
#knuckle-hint .kh-figure.lauf .kh-line { animation: kh-auf 0.45s ease-out 0.95s backwards; }

/* Faltenbild: hier laeuft es in der SCHLEIFE, Simon am 12.09.2026: "lass die
   rote und blaue linie immer wieder so 2-3 sekunden drauf, dann gehen sie weg,
   kurz keine linie dass man die hand genau sieht bzw den puls, dann kommt erst
   die rote linie, dann die blaue wieder erneut, usw."

   Ein Durchgang dauert sieben Sekunden. Die rote Falte steht laenger allein,
   Simon am 12.09.2026: "mach die rote linie ein bisschen laenger alleine sein,
   also wart bevor die blaue linie erscheint ein wenig laenger."
     0,3 s  die Falte kommt und bleibt rund 1,8 Sekunden ALLEIN stehen
     2,4 s  die Linie legt sich darauf, beide bleiben rund 2,6 Sekunden
     5,3 s  beide gehen weg
     5,3 bis 7,0 s  nur das Foto, man sieht den Puls
   Prozentwerte statt Sekunden, weil CSS Keyframes nur Anteile kennen. */
#crease-hint .kh-figure.lauf .kh-kline { animation: kh-falte-rot 7s linear infinite; }
#crease-hint .kh-figure.lauf .kh-line { animation: kh-falte-blau 7s linear infinite; }

@keyframes kh-falte-rot {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  71%  { opacity: 1; }
  76%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes kh-falte-blau {
  0%   { opacity: 0; }
  29%  { opacity: 0; }
  34%  { opacity: 1; }
  71%  { opacity: 1; }
  76%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes kh-auf { from { opacity: 0; } }
@keyframes kh-pop {
  from { opacity: 0; transform: scale(0.45); }
  60%  { opacity: 1; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}

/* Wer Bewegung reduziert hat, sieht alles ruhig und dauerhaft. */
@media (prefers-reduced-motion: reduce) {
  .kh-figure.lauf .kh-kline,
  .kh-figure.lauf .kh-knuckle,
  .kh-figure.lauf .kh-line { animation: none; opacity: 1; }
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px 64px;
}

.card {
  background: var(--ks-surface);
  border: 1px solid var(--ks-border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
}

.screen { display: none; }
.screen.active { display: block; }

/* ---------- Fortschritt ---------- */

.progress {
  display: flex;
  gap: 6px;
  margin: 18px 0 4px;
}
.progress i {
  flex: 1;
  height: 3px;
  background: var(--ks-border);
  border-radius: 2px;
  transition: background 0.2s;
}
.progress i.done { background: var(--ks-blue); }

/* ---------- Hero ---------- */

.hero { padding: 28px 0 8px; }
.hero .kicker { color: var(--ks-blue); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.hero p.lead { font-size: 18px; color: var(--ks-muted); }

.facts { display: grid; gap: 10px; margin: 20px 0; }
.fact { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.fact b { display: block; }
.fact .n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--ks-navy); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border: 1px solid var(--ks-navy);
  background: var(--ks-navy);
  color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.blue { background: var(--ks-blue); border-color: var(--ks-blue); }
.btn.ghost { background: transparent; color: var(--ks-text); border-color: var(--ks-border); }
.btn.small { padding: 10px 14px; font-size: 14px; width: auto; }

.btnrow { display: flex; gap: 10px; margin-top: 16px; }
.btnrow .btn { flex: 1; }

/* ---------- Auswahl ---------- */

.q { margin: 0 0 26px; }
.q > .label { display: block; margin-bottom: 4px; }
.q > h3 { margin-bottom: 12px; }

.choices { display: grid; gap: 8px; }
.choices.cols2 { grid-template-columns: 1fr 1fr; }
.choices.cols3 { grid-template-columns: repeat(3, 1fr); }

.choice {
  border: 1px solid var(--ks-border);
  background: var(--ks-surface);
  border-radius: var(--radius);
  padding: 13px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.choice:hover { border-color: var(--ks-subtle); }
.choice[aria-pressed="true"] {
  border-color: var(--ks-blue);
  background: rgba(48, 96, 208, 0.06);
  box-shadow: inset 0 0 0 1px var(--ks-blue);
}
.choice b { display: block; font-weight: 600; }
.choice small { display: block; color: var(--ks-muted); font-size: 13px; margin-top: 2px; }

select, input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--ks-surface);
  color: var(--ks-text);
}

.sub { margin-top: 12px; display: none; }
.sub.show { display: block; }
.sub .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Anleitung Foto ---------- */

.howto { display: grid; gap: 14px; margin: 4px 0 20px; }
.howto .step { display: flex; gap: 12px; }
.howto .step .n {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: var(--ks-blue); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.howto .step p { margin: 0; font-size: 15px; }

.diagram { width: 100%; height: auto; display: block; margin: 6px 0 0; border-radius: var(--radius); }

/* ---------- Animation der Anleitung ----------
   Ablauf einer Runde über 9 Sekunden:
   1. Die Längenlinie wächst vom Handgelenk nach oben zur Fingerspitze.
   2. Die Breitenlinie wächst von links nach rechts über die Knöchel.
   3. Zwei Pfeile zeigen von außen auf die Engstelle am Handgelenk, weil das die
      Stelle ist, die man beim Messen von Hand immer verschieden setzt.
   Danach kurze Pause, dann von vorn. */

.diagram .anim-len {
  stroke-dasharray: 178;          /* Länge der Strecke Handgelenk -> Fingerspitze */
  stroke-dashoffset: 178;
  animation: grow-len 9s ease-in-out infinite;
}
.diagram .anim-wid {
  stroke-dasharray: 71;           /* Länge der Strecke über die Knöchel */
  stroke-dashoffset: 71;
  animation: grow-wid 9s ease-in-out infinite;
}

/* Die Längenlinie startet unten: das Ende der Strecke liegt bei der Spitze,
   deshalb läuft sie mit negativem Offset von unten nach oben zu. */
@keyframes grow-len {
  0%, 4%   { stroke-dashoffset: 178; }
  30%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 178; }
}
@keyframes grow-wid {
  0%, 34%  { stroke-dashoffset: 71; }
  52%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 71; }
}

.diagram .dot { opacity: 0; animation: pop 9s ease-in-out infinite; }
.diagram .dot-wrist { animation-delay: 0.2s; }
.diagram .dot-tip   { animation-delay: 2.5s; }
.diagram .dot-w1    { animation-delay: 3.1s; }
.diagram .dot-w2    { animation-delay: 4.6s; }

@keyframes pop {
  0%, 2%    { opacity: 0; transform: scale(0.4); }
  6%        { opacity: 1; transform: scale(1.25); }
  9%, 88%   { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.4); }
}

.diagram .anim-label { opacity: 0; animation: fade 9s ease-in-out infinite; }
.diagram .lbl-tip    { animation-delay: 2.6s; }
.diagram .lbl-wid    { animation-delay: 6.0s; }
.diagram .lbl-wrist  { animation-delay: 6.0s; }
.diagram .lbl-wrist2 { animation-delay: 6.2s; }

@keyframes fade {
  0%, 3%    { opacity: 0; }
  8%, 88%   { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.diagram .anim-wristmark {
  opacity: 0;
  animation: pulse-wrist 9s ease-in-out infinite;
  animation-delay: 6s;
}
@keyframes pulse-wrist {
  0%, 3%    { opacity: 0; }
  8%        { opacity: 1; }
  14%       { opacity: 0.35; }
  20%       { opacity: 1; }
  26%       { opacity: 0.35; }
  32%, 88%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* ---------- Animation Foto 1: die Handgelenksfalte ----------
   Ablauf ueber 9 Sekunden, in der Reihenfolge, in der es der Kunde gleich
   selbst macht:
   1. Die Falte wird als LINIE gezogen, von links nach rechts.
   2. Die Laenge waechst senkrecht von der Falte zur Fingerspitze.
   3. Zwei Pfeile zeigen von aussen auf die Falte.
   Die Falte ist bewusst eine Linie und kein Punkt: gemessen wird der
   senkrechte Abstand der Fingerspitze darauf. Wo genau auf der Falte die
   Griffe sitzen, aendert das Ergebnis dann fast nicht. */

.diagram .anim-fold {
  stroke-dasharray: 53.5;         /* Laenge der eingezeichneten Falte */
  stroke-dashoffset: 53.5;
  animation: grow-fold 9s ease-in-out infinite;
}
.diagram .anim-len-palm {
  stroke-dasharray: 166.9;        /* Falte -> Mittelfingerspitze */
  stroke-dashoffset: 166.9;
  animation: grow-len-palm 9s ease-in-out infinite;
}

@keyframes grow-fold {
  0%, 4%    { stroke-dashoffset: 53.5; }
  22%       { stroke-dashoffset: 0; }
  88%       { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 53.5; }
}
@keyframes grow-len-palm {
  0%, 26%   { stroke-dashoffset: 166.9; }
  48%       { stroke-dashoffset: 0; }
  88%       { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 166.9; }
}

.diagram .dot-f1       { animation-delay: 0.2s; }
.diagram .dot-f2       { animation-delay: 1.7s; }
.diagram .dot-tip-palm { animation-delay: 4.3s; }
.diagram .lbl-tip-palm { animation-delay: 4.4s; }
.diagram .lbl-fold     { animation-delay: 6.0s; }
.diagram .lbl-fold2    { animation-delay: 6.2s; }

.diagram .anim-foldmark {
  opacity: 0;
  animation: pulse-wrist 9s ease-in-out infinite;
  animation-delay: 6s;
}

/* ---------- Animation Foto 2: nur noch die Breite ----------
   Die Laengenlinie ist hier raus, sie gehoert zum ersten Foto. Deshalb startet
   die Breite frueher als vorher. */
.diagram.dorso .anim-wid {
  stroke-dasharray: 79.1;          /* Strecke 24 mm unter der Knöchellinie */
  stroke-dashoffset: 79.1;
  animation: grow-wid-only 9s ease-in-out infinite;
}
@keyframes grow-wid-only {
  0%, 6%    { stroke-dashoffset: 79.1; }
  28%       { stroke-dashoffset: 0; }
  88%       { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 79.1; }
}
.diagram.dorso .dot-w1 { animation-delay: 0.4s; }
.diagram.dorso .dot-w2 { animation-delay: 2.3s; }
.diagram .lbl-wid2     { animation-delay: 6.2s; }

.diagram .anim-widmark {
  opacity: 0;
  animation: pulse-wrist 9s ease-in-out infinite;
  animation-delay: 6s;
}

/* Der geteilte Foto-Auswahlblock wird in den aktiven Schritt gehaengt. */
.pickslot { display: grid; gap: 10px; margin-top: 14px; }

/* Wer Bewegung reduziert haben will, sieht das fertige Bild ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .diagram .anim-len, .diagram .anim-wid,
  .diagram .anim-fold, .diagram .anim-len-palm { stroke-dashoffset: 0; animation: none; }
  .diagram .dot, .diagram .anim-label, .diagram .anim-wristmark,
  .diagram .anim-foldmark, .diagram .anim-widmark {
    opacity: 1; animation: none;
  }
}

.filepick { display: grid; gap: 10px; }
input[type="file"] { display: none; }

/* Übergabe an das Handy: der Rechner zeigt einen QR mit den bisherigen
   Antworten, damit am Telefon nichts neu beantwortet werden muss. */
.handoff {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--ks-blue);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 4px;
  background: rgba(48, 96, 208, 0.04);
}
.handoff h3 { margin: 4px 0 6px; }
.handoff p { font-size: 14px; margin-bottom: 8px; }
.handoff .url {
  font-size: 13px;
  font-weight: 600;
  color: var(--ks-blue);
  word-break: break-all;
  margin: 0;
}
.handoff-qr { width: 148px; height: 148px; }
.handoff-qr svg { width: 100%; height: 100%; display: block; border-radius: 4px; }

@media (max-width: 559px) {
  .handoff { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .handoff .handoff-text { order: 2; }
  .handoff-qr { order: 1; }
}

/* ---------- Canvas / Marker ---------- */

.stage {
  position: relative;
  background: var(--ks-gray);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage canvas { display: block; width: 100%; height: auto; }

.marker {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(48, 96, 208, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
}
.marker::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: #fff;
  border-radius: 50%;
}
.marker.corner { background: rgba(255, 255, 255, 0.35); }
.marker.active { background: rgba(48, 96, 208, 0.85); }

/* Größere Trefferfläche als der sichtbare Kreis: ein Daumen trifft 34 Pixel
   schlecht, 48 gut. Der Ring bleibt klein, damit er die Hand nicht verdeckt. */
.marker::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

/* Noch nicht gesetzt (26.09.2026): grau und pulsierend, damit niemand einen
   Vorschlag für die Antwort hält. Die Farbe wechselt, sobald man ihn anfasst. */
.marker.offen {
  background: rgba(120, 120, 128, 0.55);
  border-style: dashed;
  animation: mk-offen 1.6s ease-in-out infinite;
}
@keyframes mk-offen {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08); }
}
/* Von der Seite gefunden: ein kleiner Haken statt der Punktmitte. */
.marker.auto { background: rgba(31, 140, 80, 0.55); }
@media (prefers-reduced-motion: reduce) { .marker.offen { animation: none; } }

/* Punkt, auf den wir den Kunden gerade hinweisen: er pulsiert, damit er ihn
   findet, ohne dass wir seine Lage im Text beschreiben müssen. */
.marker.attention { animation: mk-pulse 1.4s ease-in-out infinite; }
@keyframes mk-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(48, 96, 208, 0.35); }
  50%      { box-shadow: 0 0 0 11px rgba(48, 96, 208, 0.10); }
}
@media (prefers-reduced-motion: reduce) { .marker.attention { animation: none; box-shadow: 0 0 0 4px rgba(48, 96, 208, 0.35); } }
.marker span {
  position: absolute;
  left: 50%; top: -24px;
  transform: translateX(-50%);
  background: var(--ks-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* Lupe: ohne sie ist die Genauigkeit am Handy nicht erreichbar.
   Gemessen im Pruefstand: 10 px Klickfehler ergeben 100 % richtige Groesse,
   25 px nur noch 86 %. Ein Fingertipp ohne Zoom liegt bei 25 bis 40 px. */
.loupe {
  position: absolute;
  top: 10px; right: 10px;
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: none;
  z-index: 20;
  background: var(--ks-dark);
}
.loupe.show { display: block; }
.loupe.left { right: auto; left: 10px; }
.loupe canvas { width: 100%; height: 100%; }
.loupe .cross, .loupe .cross2 {
  position: absolute; background: var(--ks-blue); pointer-events: none;
}
.loupe .cross { left: 0; right: 0; top: 50%; height: 1px; }
.loupe .cross2 { top: 0; bottom: 0; left: 50%; width: 1px; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ks-blue);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.hint {
  font-size: 14px;
  color: var(--ks-muted);
  margin: 12px 0 0;
}
.hint b { color: var(--ks-text); }

/* ---------- Meldungen ---------- */

.msg {
  border-left: 3px solid var(--ks-border);
  background: var(--ks-bg);
  padding: 11px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  margin: 10px 0;
}
.msg.error { border-color: var(--ks-red); background: rgba(239, 68, 68, 0.06); }
.msg.warn { border-color: var(--ks-orange); background: rgba(249, 115, 22, 0.07); }
.msg.ok { border-color: var(--ks-green); background: rgba(34, 197, 94, 0.07); }
.msg strong { display: block; margin-bottom: 2px; }

/* ---------- Ergebnis ---------- */

.result-main {
  background: var(--ks-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.result-main .label { color: rgba(255, 255, 255, 0.6); }
.result-main .brand {
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  margin: 6px 0 2px;
}
.result-main .size {
  /* Inter 800 statt BOKIS (26.09.2026). Simon: die große Ziffer war in BOKIS
     schwer lesbar, und die CI setzt Zahlen in Fakten-Blöcken in Inter 800.
     Das Komma einer Halbgröße geht in BOKIS fast verloren. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 20vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.result-main .alt { color: rgba(255, 255, 255, 0.75); font-size: 14px; }

.measured {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ks-border);
  border: 1px solid var(--ks-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 0;
}
.measured div { background: var(--ks-surface); padding: 12px 10px; text-align: center; }
.measured .v { font-size: 20px; font-weight: 700; }
.measured .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ks-muted); }
.measured .est { color: var(--ks-orange); }
/* Beim Einzeichnen steht je Foto nur EIN Wert, also eine Spalte. */
#palm-measured, #back-measured { grid-template-columns: 1fr; }

table.brands {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 8px 0 4px;
}
table.brands th, table.brands td {
  text-align: left;
  padding: 11px 8px;
  border-bottom: 1px solid var(--ks-border);
}
table.brands th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ks-muted); font-weight: 500;
}
table.brands td.size { font-weight: 700; font-size: 18px; white-space: nowrap; }
table.brands td.size small { font-weight: 400; font-size: 13px; color: var(--ks-muted); }
table.brands tr.highlight td { background: rgba(48, 96, 208, 0.05); }
table.brands td a { font-weight: 600; text-decoration: none; white-space: nowrap; }
table.brands .flag {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ks-orange); border: 1px solid currentColor;
  border-radius: 3px; padding: 0 4px; margin-left: 6px;
  vertical-align: 1px;
}

/* ---------- Schnitte ---------- */

.cuts { display: grid; gap: 12px; }
.cut {
  border: 1px solid var(--ks-border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--ks-surface);
}
.cut h3 { margin-bottom: 4px; }
.cut .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ks-blue); font-weight: 600; margin-bottom: 6px; }
.cut p { font-size: 14px; margin-bottom: 8px; }
.cut .who { font-size: 14px; color: var(--ks-muted); }
.cut svg { display: block; margin: 4px 0 10px; }

/* ---------- Fuss ---------- */

footer {
  background: var(--ks-navy);
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  padding: 22px 18px 28px;
  text-align: center;
}
footer a { color: #fff; text-decoration: none; font-weight: 600; }
footer .tag {
  /* Inter statt BOKIS: 14px liegen unter der BOKIS-Untergrenze. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; font-size: 13px; margin-bottom: 8px;
}

/* ---------- ab Tablet ---------- */

@media (min-width: 640px) {
  .wrap { padding: 0 24px 72px; }
  .card { padding: 26px; }
  .btn { width: auto; }
  .btnrow .btn { flex: 0 1 auto; }
  .facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .loupe { width: 156px; height: 156px; }
}

/* ---------- KEEPERsport-Handschuhe im Ergebnis (26.09.2026) ----------
   Höchstens drei, live aus dem Shop. Eine Karte ist ein einziger Link, damit
   die ganze Fläche tippbar ist und nicht nur ein kleiner Knopf. */
#result-produkte { margin: 18px 0 8px; }
#result-produkte h2 { margin-bottom: 10px; }
.produkte { display: grid; gap: 10px; }
.produkt {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--ks-surface);
  border: 1px solid var(--ks-border, #e5e5e5);
  border-radius: var(--radius);
  color: var(--ks-text);
  text-decoration: none;
}
.produkt:active { transform: scale(0.99); }
.produkt:focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 2px; }
.produkt img, .produkt .ohne-bild {
  width: 96px; height: 96px; object-fit: contain;
  background: #f5f5f5; border-radius: calc(var(--radius) - 2px);
}
.produkt .p-text { display: grid; gap: 2px; min-width: 0; }
.produkt b { font-size: 15px; line-height: 1.25; }
.produkt small { font-size: 12px; color: var(--ks-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.produkt .p-preis { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.produkt .p-groesse { font-size: 13px; color: #16843c; font-weight: 600; }
.produkt .p-halb { font-size: 12px; color: var(--ks-muted); }
.produkt .p-cta { font-size: 14px; color: var(--ks-blue); font-weight: 700; margin-top: 2px; }

/* ---------- Startbild (26.09.2026) ----------
   Ablauf in Sekunden:
     0,00 bis 0,50  der Adler erscheint
     0,35 bis 1,35  die Hand baut sich vom Handgelenk zu den Fingern auf
     1,25 bis 1,85  das Maßband läuft von links quer über die Hand
     1,70 bis 2,20  FIND YOUR SIZE, dann by KEEPERsport
     2,80 bis 3,20  alles blendet in die Seite über (app.js)
   BOKIS nur für den Namen und ab 40px, wie es die CI verlangt. */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.splash.weg { opacity: 0; pointer-events: none; }
.sp-inhalt { display: flex; flex-direction: column; align-items: center; width: min(360px, 100%); }
.sp-adler { width: 64px; height: auto; opacity: 0; animation: sp-auf 0.5s ease-out 0s forwards; }
.sp-hand { position: relative; width: min(270px, 70vw); aspect-ratio: 540 / 623; margin: 28px 0 22px; }
.sp-hand img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-h { clip-path: inset(100% 0 0 0); animation: sp-hand 1s cubic-bezier(.45,.05,.3,1) 0.35s forwards; }
.sp-b { clip-path: inset(0 100% 0 0); animation: sp-band 0.6s cubic-bezier(.2,.7,.2,1) 1.25s forwards; }
.sp-name {
  font-family: 'BOKIS', Anton, Impact, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; font-size: clamp(40px, 12vw, 56px); line-height: 1; text-align: center;
  width: 100%; overflow-wrap: break-word;
  opacity: 0; animation: sp-auf 0.5s ease-out 1.7s forwards;
}
.sp-by {
  margin-top: 10px; color: #c9c9d2;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: 0.08em;
  opacity: 0; animation: sp-auf 0.5s ease-out 1.95s forwards;
}
@keyframes sp-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-hand { to { clip-path: inset(0 0 0 0); } }
@keyframes sp-band { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .sp-adler, .sp-h, .sp-b, .sp-name, .sp-by { animation: none; opacity: 1; clip-path: none; transform: none; }
}

#result-produkte .prod-fremd { margin-top: 22px; }

/* Bild mit allen Größen (26.09.2026) */
.bild-knopf { width: 100%; margin: 14px 0 4px; }
.bild-box { text-align: center; }
.bild-box img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 2px); margin-bottom: 10px; }
.bild-box p { font-size: 14px; color: var(--ks-muted); }
.bild-box .btn { display: block; width: 100%; text-decoration: none; }

/* ===================================================== Size Guide DEV
   Knopf zurück auf die Produktseite und der Fragebogen (29.09.2026). */
.pdp-knopf { display: flex; width: 100%; margin: 16px 0 8px; justify-content: center; text-align: center; }
.fb { margin-top: 24px; }
.fb .fb-q { margin-top: 20px; }
.fb .fb-sub { font-size: 14px; color: var(--ks-muted); margin: 4px 0 8px; }
.fb select, .fb input[type="text"], .fb textarea {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--ks-border); background: var(--ks-surface, #fff); color: inherit; box-sizing: border-box;
}
.fb textarea { min-height: 88px; margin-top: 10px; resize: vertical; }
.fb #fb-modell { margin-top: 10px; }
.fb .fb-folge { margin-top: 12px; }
.fb .fb-chips { margin-top: 8px; }
.fb .fb-marken { display: flex; flex-direction: column; gap: 8px; }
.fb .fb-marke { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.fb .fb-marke-name { font-size: 15px; }
.fb .fb-cm { display: flex; align-items: center; gap: 10px; max-width: 200px; }
.fb .fb-skala-text { display: flex; justify-content: space-between; font-size: 13px; color: var(--ks-muted); margin-top: 6px; }
.fb .fb-skala .fb-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fb #fb-senden { width: 100%; margin-top: 20px; }
@media (max-width: 420px) {
  .fb .fb-marke { grid-template-columns: 1fr 1fr; }
  .fb .fb-marke-name { grid-column: 1 / -1; }
}
/* Im Ergebnis steht nur noch die Länge, also eine Spalte. */
#result-measured .measured { grid-template-columns: 1fr; }