/* ==========================================================================
   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;
}

h1.display { font-size: clamp(30px, 8vw, 52px); }
h2.display { font-size: clamp(22px, 5.5vw, 34px); }

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;
  font-family: 'BOKIS', Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  margin-left: 2px;
}

/* ---------- 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: 162;          /* Länge der Strecke von 250 bis 88 */
  stroke-dashoffset: 162;
  animation: grow-len 9s ease-in-out infinite;
}
.diagram .anim-wid {
  stroke-dasharray: 82;           /* Länge der Strecke von 109 bis 191 */
  stroke-dashoffset: 82;
  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: 162; }
  30%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 162; }
}
@keyframes grow-wid {
  0%, 34%  { stroke-dashoffset: 82; }
  52%      { stroke-dashoffset: 0; }
  88%      { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 82; }
}

.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: 5.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; }
}

/* Wer Bewegung reduziert haben will, sieht das fertige Bild ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .diagram .anim-len, .diagram .anim-wid { stroke-dashoffset: 0; animation: none; }
  .diagram .dot, .diagram .anim-label, .diagram .anim-wristmark {
    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); }
.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 {
  font-family: 'BOKIS', Anton, Impact, sans-serif;
  font-size: clamp(64px, 22vw, 110px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  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); }

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 {
  font-family: 'BOKIS', Anton, Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; font-size: 14px; 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; }
}