/* ==========================================================================
   FAHRSCHULE ZEBRA — App Components
   Mobile-first. Setzt tokens.css voraus (Variablen).
   Konvention: .zb-* = Zebra-Komponente. Alle Werte über Tokens.
   Hit-Targets ≥ 44px. UPPERCASE-Orbitron auf Buttons/Labels/Zahlen.
   ========================================================================== */

/* ==========================================================================
   1 · LAYOUT — App-Spalte, Sektionen, fixes Logo
   ========================================================================== */
.zb-app {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
/* Fokussierte Mobile-Spalte (eine Frage / ein Schritt nach dem anderen) */
.zb-shell {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.zb-section { padding-block: var(--sp-12); }
.zb-section--soft { background: var(--paper-soft); }
.zb-section--ink  { background: var(--ink); color: var(--paper); }
.zb-section--ink .zb-h1,
.zb-section--ink .zb-h2,
.zb-section--ink .zb-h3 { color: var(--paper); }

/* Fixes Logo top-center (Paper-Quadrat, 2px ink, 8px radius) */
.zb-logo {
  position: fixed; top: var(--logo-top); left: 50%; transform: translateX(-50%);
  z-index: 60;
  width: var(--logo-size); height: var(--logo-size);
  background: var(--paper);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
}
.zb-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Top-Bar (ink) — Statuszeile, kein klassisches Menü (Bot ersetzt Nav) */
.zb-topbar {
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--tr-upper); text-transform: uppercase; font-weight: var(--fw-med);
}
.zb-topbar .sep { color: var(--copper); }

/* ==========================================================================
   2 · EYEBROW / NUMMERIERUNG  —  01. statt Emoji
   ========================================================================== */
.zb-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: var(--fs-xs); letter-spacing: var(--tr-upper);
  text-transform: uppercase; color: var(--copper); margin-bottom: var(--sp-3);
}
.zb-kicker::before { content: ""; width: 32px; height: 2px; background: var(--copper); }

/* Nummerierte Section-Marke: 01. DEINE ANGABEN */
.zb-num-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.zb-num {
  font-family: var(--font-display); font-weight: var(--fw-blk);
  font-variant-numeric: tabular-nums; color: var(--copper);
  font-size: var(--fs-xl); letter-spacing: var(--tr-display);
}

/* ==========================================================================
   3 · BUTTONS  —  Primary (ink + Kupfer-Stempel), Ghost, Copper
   Hover: Stempel wächst + translate(-2,-2). Press: „sitzt sich hin".
   ========================================================================== */
.zb-btn {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: var(--fs-sm); letter-spacing: var(--tr-upper); text-transform: uppercase;
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  border: var(--bw-thin) solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  box-shadow: var(--shadow-copper-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.zb-btn:hover:not(:disabled) {
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-copper);
  background: var(--copper); border-color: var(--copper);
}
.zb-btn:active:not(:disabled) {
  transform: translate(2px,2px);
  box-shadow: var(--shadow-press);
}
.zb-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.zb-btn .arr { font-size: 18px; line-height: 1; }
.zb-btn--block { width: 100%; }

/* Ghost / sekundär — 2px ink Border, paper Fill */
.zb-btn--ghost {
  background: var(--paper); color: var(--ink); box-shadow: none;
}
.zb-btn--ghost:hover:not(:disabled) {
  background: var(--ink); color: var(--paper);
  transform: translate(-2px,-2px); box-shadow: var(--shadow-copper-sm);
}

/* Copper-Fill (z.B. Bestpreis-CTA) */
.zb-btn--copper {
  background: var(--copper); border-color: var(--copper); color: var(--paper);
  box-shadow: var(--shadow-ink-sm);
}
.zb-btn--copper:hover:not(:disabled) {
  background: var(--copper-deep); border-color: var(--copper-deep);
  transform: translate(-2px,-2px); box-shadow: var(--shadow-ink);
}

/* Klein / inline */
.zb-btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }

/* Sticky Bottom-CTA (mobile) */
.zb-cta-bar {
  position: sticky; bottom: 0; z-index: 40;
  padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--paper) 28%);
}

/* ==========================================================================
   4 · LINKS
   ========================================================================== */
.zb-link {
  color: var(--ink); font-weight: var(--fw-sbd);
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.zb-link:hover { text-decoration-thickness: 3px; }

/* ==========================================================================
   5 · FORM CONTROLS  —  Input-Höhe großzügig (mobile ≥ 56px)
   ========================================================================== */
.zb-field { display: block; margin-bottom: var(--sp-5); }
.zb-field-label {
  display: block; font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: 11px; letter-spacing: var(--tr-upper); text-transform: uppercase;
  color: var(--ink); margin-bottom: var(--sp-2);
}
.zb-input, .zb-textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--ink); background: var(--paper-soft);
  border: 1.5px solid var(--ink-20); border-radius: var(--r-md);
  outline: none; transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.zb-input { min-height: 56px; padding: var(--sp-4); }
.zb-textarea { min-height: 110px; padding: var(--sp-4); line-height: var(--lh-norm); resize: vertical; }
.zb-input::placeholder, .zb-textarea::placeholder { color: var(--ink-40); }
.zb-input:focus, .zb-textarea:focus {
  border-color: var(--copper); background: var(--paper);
  box-shadow: 0 0 0 3px var(--copper-soft);
}
.zb-input--err, .zb-textarea--err { border-color: var(--danger); }
.zb-field-err { display: block; color: var(--danger); font-size: var(--fs-xs); font-weight: var(--fw-med); margin-top: var(--sp-2); }
.zb-field-hint { display: block; color: var(--ink-60); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* OTP / Code-Input */
.zb-code-input {
  font-family: var(--font-display) !important; font-weight: var(--fw-blk) !important;
  font-size: 26px !important; letter-spacing: 0.4em !important; text-align: center;
}

/* Checkbox (AGB-Style-Zeile) */
.zb-check {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-sm); line-height: var(--lh-norm); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); background: var(--paper-soft);
  border: var(--bw-hair) solid var(--border-hair); border-radius: var(--r-md);
}
.zb-check input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; accent-color: var(--copper); flex-shrink: 0;
}
.zb-check a { color: var(--copper); text-decoration: underline; }

/* Quantity-Stepper (− value +) */
.zb-qty {
  display: inline-flex; align-items: stretch;
  border: var(--bw-thin) solid var(--ink); border-radius: var(--r-md); overflow: hidden;
  font-family: var(--font-display); font-weight: var(--fw-bld);
}
.zb-qty button {
  background: var(--paper); border: none; width: var(--tap); min-height: var(--tap);
  font: inherit; font-size: 18px; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.zb-qty button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.zb-qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.zb-qty-val {
  min-width: 48px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; background: var(--paper-soft);
  border-inline: var(--bw-thin) solid var(--ink); padding-inline: var(--sp-3);
}

/* ==========================================================================
   6 · CARDS  —  paper Fill, 2px ink, Kupfer-Stempel
   ========================================================================== */
.zb-card {
  background: var(--paper-soft);
  border: var(--bw-thin) solid var(--ink); border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* Stempel-Card (interaktiv) */
.zb-card--stamp { box-shadow: var(--shadow-copper); }
.zb-card--stamp:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-copper-lg); }
/* Form-Card (kräftiger Stempel) */
.zb-card--form { background: var(--paper); box-shadow: var(--shadow-copper-lg); padding: var(--sp-8) var(--sp-6); }
/* Featured / dunkel */
.zb-card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.zb-card--ink .zb-body-sm { color: rgba(244,239,230,0.72); }
/* Matched / Bestpreis */
.zb-card--matched { border-color: var(--copper); box-shadow: var(--shadow-copper); }

/* Info-/Hinweis-Card: Copper-Border-Left statt Stempel */
.zb-note {
  background: var(--copper-wash);
  border: var(--bw-hair) solid var(--copper-dim);
  border-left: 4px solid var(--copper);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex; gap: var(--sp-4); align-items: flex-start;
}
.zb-note-label {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: 10px; letter-spacing: var(--tr-upper); text-transform: uppercase;
  color: var(--copper); flex-shrink: 0; white-space: nowrap; padding-top: 2px;
}
.zb-note-msg { font-size: var(--fs-sm); line-height: var(--lh-norm); color: var(--ink); }

/* Card-Ribbon top-right (Copper-Chip) */
.zb-ribbon {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  background: var(--copper); color: var(--paper);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: 9px; letter-spacing: var(--tr-wide); text-transform: uppercase;
}
.zb-ribbon--success { background: var(--success); left: var(--sp-4); right: auto; }

/* Feature-Liste mit Pfeil-Bullets */
.zb-feats { list-style: none; padding: 0; margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.zb-feats li {
  padding: var(--sp-2) 0; display: flex; gap: var(--sp-3); align-items: flex-start;
  border-bottom: var(--bw-hair) solid var(--border-hair);
}
.zb-feats li:last-child { border-bottom: none; }
.zb-feats li::before { content: "→"; color: var(--copper); font-weight: var(--fw-bld); }

/* ==========================================================================
   7 · PREIS-DISPLAY  —  Orbitron 900, € in Copper, tabular-nums
   ========================================================================== */
.zb-price {
  font-family: var(--font-display); font-weight: var(--fw-blk);
  font-variant-numeric: tabular-nums; line-height: var(--lh-tight);
  font-size: clamp(40px, 12vw, 56px); color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-1);
}
.zb-price .eu { font-size: 0.5em; color: var(--copper); }
.zb-price .strike {
  font-size: 0.38em; color: var(--ink-60); text-decoration: line-through;
  font-weight: var(--fw-sbd); margin-left: var(--sp-3); align-self: center;
}
/* Totals-Zeile */
.zb-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--sp-4); border-top: var(--bw-thin) solid var(--ink);
}
.zb-total-label {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: var(--fs-xs); letter-spacing: var(--tr-upper); text-transform: uppercase; color: var(--ink-60);
}
.zb-total-val {
  font-family: var(--font-display); font-weight: var(--fw-blk);
  font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); color: var(--ink);
}
.zb-total-val .eu { color: var(--copper); margin-right: var(--sp-1); font-size: 0.7em; }

/* ==========================================================================
   8 · BADGES & CHIPS
   ========================================================================== */
.zb-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: 10px; letter-spacing: var(--tr-upper); text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
}
.zb-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }
.zb-badge--copper { background: var(--copper); color: var(--paper); }
.zb-badge--copper .dot { background: var(--paper); }
.zb-badge--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.zb-badge--success { background: var(--success); color: var(--paper); }
.zb-badge--success .dot { background: var(--paper); }
/* Rose-Eyebrow-Badge NUR auf ink-Flächen */
.zb-badge--rose { background: transparent; color: var(--rose); border: 1.5px solid var(--rose); }

/* Chips — Klick-Navigation (Bot-Chips, Klassen-Wechsel). Pills, ≥44px tap. */
.zb-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.zb-chip {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: var(--fs-xs); letter-spacing: var(--tr-upper); text-transform: uppercase;
  min-height: var(--tap);
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.zb-chip:hover { background: var(--ink); color: var(--paper); transform: translate(-2px,-2px); box-shadow: var(--shadow-copper-sm); }
.zb-chip--on { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   9 · STEPPER  —  Funnel-Fortschritt (Standort → Führerschein → Preis)
   ========================================================================== */
.zb-stepper { display: flex; align-items: center; gap: var(--sp-2); width: 100%; }
.zb-step { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.zb-step-dot {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--fw-blk); font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: var(--bw-thin) solid var(--ink); background: var(--paper); color: var(--ink);
}
.zb-step-label {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: 10px; letter-spacing: var(--tr-upper); text-transform: uppercase;
  color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zb-step-line { height: 2px; flex: 1; background: var(--ink-20); min-width: 12px; }
/* aktiv */
.zb-step--active .zb-step-dot { background: var(--ink); color: var(--paper); }
.zb-step--active .zb-step-label { color: var(--ink); }
/* erledigt */
.zb-step--done .zb-step-dot { background: var(--copper); border-color: var(--copper); color: var(--paper); }
.zb-step--done .zb-step-label { color: var(--ink-60); }
.zb-step--done + .zb-step .zb-step-line,
.zb-step--done .zb-step-line { background: var(--copper); }

/* ==========================================================================
   10 · STREIFEN-BANNER  —  Signatur-Statement (ink + copper, lesbar via scrim)
   ========================================================================== */
.zb-banner {
  position: relative; overflow: hidden;
  background-color: var(--ink); color: var(--paper);
  padding: var(--sp-8) var(--gutter);
  border-block: var(--bw-thin) solid var(--ink);
}
.zb-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(110deg, var(--ink) 0 14px, var(--copper) 14px 24px);
}
.zb-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,18,0.55), rgba(20,20,18,0.92));
}
.zb-banner > * { position: relative; z-index: 2; }

/* Dünne Streifen-Linie als Divider */
.zb-rule {
  height: 12px;
  background-image: repeating-linear-gradient(110deg, var(--ink) 0 14px, var(--paper) 14px 24px);
  border-block: var(--bw-thin) solid var(--ink);
}

/* Runde Streifen-Badge (Danke-Screen) */
.zb-stamp-round {
  width: 120px; height: 120px; border-radius: 50%;
  border: var(--bw-bold) solid var(--ink); overflow: hidden;
  display: grid; place-items: center; position: relative;
  background-image: repeating-linear-gradient(110deg, var(--ink) 0 8px, var(--paper) 8px 14px);
}

/* ==========================================================================
   11 · SUCCESS / ACTION-CODE  (Bestpreis-Code, Gratis-Theorie-Zugang)
   ========================================================================== */
.zb-success-check {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--success); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--fw-blk); font-size: 28px;
}
.zb-action-code {
  font-family: var(--font-display); font-weight: var(--fw-blk);
  font-variant-numeric: tabular-nums; font-size: 32px; letter-spacing: 0.12em;
  background: var(--ink); color: var(--copper);
  padding: var(--sp-5); border-radius: var(--r-md);
  border: 2px dashed var(--copper); text-align: center;
}

/* ==========================================================================
   12 · LOADING
   ========================================================================== */
.zb-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--ink-20); border-top-color: var(--copper);
  animation: zb-spin 720ms linear infinite;
}
@keyframes zb-spin { to { transform: rotate(360deg); } }
/* Copper-Ladebalken (über aktivem Schritt) */
.zb-loadbar { height: 3px; background: var(--ink-10); overflow: hidden; }
.zb-loadbar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--copper); animation: zb-slide 1.1s var(--ease-inout) infinite;
}
@keyframes zb-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ==========================================================================
   13 · DIVIDER / SMALL BITS
   ========================================================================== */
.zb-hr { height: var(--bw-hair); background: var(--border-hair); border: none; margin-block: var(--sp-6); }
.zb-hr--ink { height: var(--bw-thin); background: var(--ink); }

/* Reduced-motion: alle Bewegungen aus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}