/* ============================================================
     H5M – Fitnesstagebuch · Visual Refresh
     Brand: STARKE IT-LÖSUNGEN  ·  high5manufaktur GmbH
     Funktion bleibt unangetastet — nur das Outfit.
     ============================================================ */

  :root {
    /* ---- H5M brand ---- */
    --h5m-blue: #2f31f5;
    --h5m-blue-deep: #2528d4;
    --h5m-blue-soft: #ecedfe;
    --h5m-lemon: #dbf059;
    --h5m-lemon-deep: #c4d949;
    --h5m-black: #131314;
    --h5m-white: #ffffff;
    --h5m-platinum: #ebebe9;
    --h5m-platinum-soft: #f4f4f2;
    --h5m-platinum-dark: #797979;

    /* Frame-Color: switcht im Dark-Mode auf hell — wird für Borders/Brutalist-Shadows benutzt */
    --frame: #131314;

    /* ---- Legacy variable names – remappt aufs H5M-Vokabular ---- */
    --bg: #f4f4f2;
    --bg-elevated: #ffffff;
    --text: #131314;
    --text-muted: #797979;
    --text-light: #b0b0ad;
    --border: #ebebe9;
    --border-strong: #d4d4d2;
    --accent: #2f31f5;
    --accent-hover: #2528d4;
    --accent-soft: #ecedfe;
    --success: #16a34a;
    --success-soft: #f3faf5;
    --warn: #ea580c;
    --error: #dc2626;
    --error-soft: #fdf3f3;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
  }
  body { display: flex; flex-direction: column; min-height: 100vh; }
  [x-cloak] { display: none !important; }
  button { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
  input, textarea, select {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; }

  /* ============================================================
     Layout
     ============================================================ */
  .app {
    display: flex; flex-direction: column;
    min-height: 100vh;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: var(--safe-bottom);
    background: var(--bg);
    position: relative;
  }
  /* Dünner Brand-Streifen über der iOS-Statusbar */
  .app::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--safe-top);
    background: var(--h5m-black);
    z-index: 100;
    pointer-events: none;
  }

  /* ---- Topbar ---- */
  .topbar {
    display: flex; align-items: center; gap: 10px;
    padding: calc(14px + var(--safe-top)) 16px 14px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
    min-height: 64px;
  }
  .topbar.transparent {
    background: transparent;
    border-bottom: none;
  }
  .topbar .back {
    background: var(--h5m-platinum-soft);
    border: 1.5px solid var(--border);
    padding: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: var(--text);
    font-size: 22px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    margin-left: 0;
    transition: transform 100ms var(--ease-out), background 150ms;
  }
  .topbar .back:active { transform: scale(0.92); background: var(--h5m-platinum); }
  .topbar.transparent .back {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .topbar .title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
    text-align: center;
    color: var(--text);
  }
  .topbar .right { min-width: 42px; display: flex; justify-content: flex-end; gap: 6px; }
  .topbar .timer {
    background: var(--h5m-lemon);
    color: var(--h5m-black);
    font-weight: 900;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--frame);
    letter-spacing: -0.01em;
    box-shadow: 2px 2px 0 var(--frame);
  }
  /* QR-Icon-Button rechts oben in select-geraet */
  .qr-topbar-action {
    width: 42px; height: 42px;
    background: var(--h5m-blue);
    color: var(--h5m-white);
    border: 1.5px solid var(--frame);
    border-radius: 12px;
    font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 0 var(--frame);
    transition: transform 80ms var(--ease-out);
  }
  .qr-topbar-action:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--frame);
  }

  /* ---- Content ---- */
  .content { flex: 1; padding: 18px; padding-bottom: 28px; }
  .content.with-footer { padding-bottom: 130px; }

  .footer-action {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 14px 16px calc(14px + var(--safe-bottom));
    background: linear-gradient(180deg, rgba(244,244,242,0) 0%, var(--bg) 35%, var(--bg) 100%);
    z-index: 5;
    max-width: 520px;
    margin: 0 auto;
  }
  .footer-action > button + button { margin-top: 8px; }

  /* ============================================================
     Typografie – plakativ
     ============================================================ */
  h1 {
    font-size: 34px;
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
  }
  h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-transform: uppercase;
  }
  h3 {
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--h5m-blue);
  }
  .muted {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .small { font-size: 12px; font-weight: 600; }

  /* ============================================================
     Card
     ============================================================ */
  .card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    transition: transform 150ms var(--ease-out), border-color 150ms;
  }
  .card:active { transform: scale(0.995); }

  /* ============================================================
     Buttons – Brutalist mit Versatz-Schatten
     ============================================================ */
  .btn-primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--h5m-lemon);
    color: var(--h5m-black);
    border: 2px solid var(--frame);
    padding: 16px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 62px;
    box-shadow: 4px 4px 0 var(--frame);
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), background 150ms;
    position: relative;
  }
  .btn-primary:hover:not(:disabled) { background: var(--h5m-lemon-deep); }
  .btn-primary:active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--frame);
  }
  .btn-primary:disabled {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: 2px 2px 0 var(--frame);
  }

  .btn-secondary {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1.5px solid var(--frame);
    padding: 13px 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-height: 52px;
    transition: background 150ms, transform 90ms var(--ease-out);
  }
  .btn-secondary:active { background: var(--h5m-platinum-soft); transform: scale(0.99); }

  .btn-danger {
    background: transparent;
    color: var(--error);
    border-color: var(--error);
  }
  .btn-danger:active { background: var(--error-soft); }

  .btn-text {
    background: transparent;
    color: var(--h5m-blue);
    border: 0;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Settings-Gear oben rechts – etwas eigene Liebe */
  .topbar.transparent .btn-text {
    width: 42px; height: 42px;
    padding: 0 !important;
    background: var(--h5m-black);
    color: var(--h5m-lemon);
    border-radius: 12px;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
  }

  /* ============================================================
     Tap-Liste (Studios, Geräte, Nutzer …)
     ============================================================ */
  .tap-list { display: flex; flex-direction: column; gap: 10px; }
  .tap-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: left;
    color: var(--text);
    min-height: 72px;
    position: relative;
    transition: transform 100ms var(--ease-out), background 150ms, border-color 150ms;
  }
  .tap-item:active {
    transform: scale(0.985);
    background: var(--h5m-platinum-soft);
    border-color: var(--frame);
  }
  .tap-item .name {
    font-size: 16px;
    font-weight: 800;
    flex: 1;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .tap-item .meta {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .tap-item .chevron {
    color: var(--h5m-black);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.4;
  }
  .tap-item:active .chevron { opacity: 1; color: var(--h5m-blue); }
  .tap-item .badge {
    background: var(--h5m-lemon);
    color: var(--h5m-black);
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1.5px solid var(--frame);
  }

  /* ============================================================
     Section Label – Eyebrow im H5M-Stil
     ============================================================ */
  .section-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--h5m-blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 24px 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-label::before {
    content: '';
    display: inline-block;
    width: 14px; height: 2px;
    background: var(--h5m-blue);
  }
  .section-label:first-of-type { margin-top: 4px; }

  /* ============================================================
     Number Input – fettiger Stepper
     ============================================================ */
  .num-input {
    display: grid;
    grid-template-columns: 68px 1fr 68px;
    gap: 0;
    background: var(--bg-elevated);
    border: 2px solid var(--frame);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--frame);
  }
  .num-input button {
    background: var(--h5m-platinum-soft);
    color: var(--h5m-black);
    border: 0;
    font-size: 26px;
    font-weight: 900;
    min-height: 72px;
    transition: background 100ms;
  }
  .num-input button:active { background: var(--h5m-platinum); }
  .num-input button.minus { border-right: 2px solid var(--frame); }
  .num-input button.plus {
    border-left: 2px solid var(--frame);
    background: var(--h5m-lemon);
  }
  .num-input button.plus:active { background: var(--h5m-lemon-deep); }
  .num-input input {
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    color: var(--h5m-black);
    padding: 0;
    min-height: 72px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-family: 'Montserrat', sans-serif;
  }
  .num-input input:focus { outline: none; background: rgba(219,240,89,0.18); }
  .num-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 2px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ============================================================
     Last-Time-Pille
     ============================================================ */
  .last-time {
    background: var(--bg-elevated);
    border: 2px solid var(--frame);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    position: relative;
  }
  .last-time .label {
    font-size: 11px;
    color: var(--h5m-blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 900;
    margin-bottom: 6px;
  }
  .last-time .sets {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .last-time .empty {
    font-size: 13px;
    color: var(--text-muted);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ============================================================
     Exercise Card (im laufenden Workout)
     ============================================================ */
  .exercise-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .exercise-card .name {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .exercise-card .sets {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  /* ============================================================
     Loader & States
     ============================================================ */
  .loader {
    display: inline-block;
    width: 22px; height: 22px;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .center-loader {
    display: flex; justify-content: center; align-items: center;
    padding: 50px;
    color: var(--h5m-blue);
  }

  /* ============================================================
     Toast
     ============================================================ */
  .toast {
    position: fixed; left: 16px; right: 16px;
    bottom: calc(20px + var(--safe-bottom));
    background: var(--h5m-black); color: var(--h5m-lemon);
    padding: 14px 18px; border-radius: 14px;
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.02em;
    z-index: 100;
    max-width: 488px; margin: 0 auto;
    border: 2px solid var(--frame);
    box-shadow: 4px 4px 0 var(--h5m-lemon);
    animation: toast-in 0.3s var(--ease-spring);
  }
  .toast.error {
    background: var(--error);
    color: var(--h5m-white);
    box-shadow: 4px 4px 0 var(--frame);
  }
  @keyframes toast-in {
    from { transform: translateY(20px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
  }

  /* ============================================================
     Empty State
     ============================================================ */
  .empty-state {
    text-align: center;
    padding: 50px 24px;
    color: var(--text-muted);
    font-weight: 600;
  }
  .empty-state .icon {
    font-size: 52px;
    margin-bottom: 14px;
    display: inline-block;
    animation: pop-in 0.4s var(--ease-spring);
  }
  @keyframes pop-in {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
  }

  /* ============================================================
     Setup-Overlay (API-Key)
     ============================================================ */
  .setup-overlay {
    position: fixed; inset: 0;
    background: rgba(19,19,20,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .setup-overlay .modal {
    background: var(--h5m-white);
    border: 2px solid var(--frame);
    border-radius: 18px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 6px 6px 0 var(--h5m-lemon);
  }
  .setup-overlay h2 {
    color: var(--text);
  }
  .setup-overlay label {
    display: block;
    font-size: 11px;
    color: var(--h5m-blue);
    margin: 14px 0 6px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .setup-overlay input {
    width: 100%; padding: 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    font-size: 14px;
    font-family: ui-monospace, Menlo, monospace;
    background: var(--h5m-platinum-soft);
    color: var(--text);
    font-weight: 600;
  }
  .setup-overlay input:focus {
    outline: none;
    border-color: var(--h5m-blue);
    background: var(--h5m-white);
    box-shadow: 0 0 0 3px rgba(47,49,245,0.2);
  }

  /* ============================================================
     Summary (Finish-Screen)
     ============================================================ */
  .summary-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; margin-bottom: 18px;
  }
  .stat-card {
    background: var(--bg-elevated);
    border: 1.5px solid var(--frame);
    border-radius: 14px;
    padding: 16px 16px;
    position: relative;
    overflow: hidden;
  }
  .stat-card .value {
    font-size: 30px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
  }
  .stat-card .label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    margin-top: 8px;
  }
  /* Letzte Kachel (4.) bekommt Lemon-Highlight */
  .stat-card:nth-child(4) {
    background: var(--h5m-lemon);
    box-shadow: 3px 3px 0 var(--frame);
  }

  /* ============================================================
     QR-Scanner
     ============================================================ */
  .qr-stage {
    position: relative;
    background: #000;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    overflow: hidden;
  }
  #qr-reader {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #000;
  }
  #qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #qr-reader__dashboard,
  #qr-reader__header_message,
  #qr-reader__status_span,
  #qr-reader__scan_region img[alt="Info icon"] { display: none !important; }
  #qr-reader__scan_region {
    background: transparent !important;
    min-height: 0 !important;
  }
  .qr-frame-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
  }
  .qr-frame {
    width: 65%;
    aspect-ratio: 1 / 1;
    position: relative;
    max-width: 280px;
  }
  .qr-frame::before,
  .qr-frame::after,
  .qr-frame > span::before,
  .qr-frame > span::after {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border: 4px solid var(--h5m-lemon);
    border-radius: 0;
    filter: drop-shadow(0 0 8px rgba(219,240,89,0.5));
  }
  .qr-frame::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
  .qr-frame::after  { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
  .qr-frame > span::before { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
  .qr-frame > span::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
  /* Animierte Scan-Linie */
  .qr-frame::before { animation: none; }
  .qr-frame > span {
    position: absolute; inset: 8px;
    pointer-events: none;
  }
  .qr-frame > span > i {
    /* unused */
  }
  .qr-hint {
    text-align: center;
    padding: 18px 18px 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ============================================================
     Form-Inputs (für Neues Gerät via QR)
     ============================================================ */
  .text-input,
  .textarea-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--frame);
    border-radius: 12px;
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .text-input:focus,
  .textarea-input:focus {
    outline: none;
    border-color: var(--h5m-blue);
    background: var(--h5m-white);
    box-shadow: 0 0 0 3px rgba(47,49,245,0.18);
  }
  .textarea-input {
    min-height: 90px;
    resize: vertical;
  }
  .qr-id-display {
    background: var(--h5m-black);
    border: 1.5px solid var(--frame);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--h5m-lemon);
    word-break: break-all;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* ============================================================
     Chips (Gerätetyp / Muskelgruppe)
     ============================================================ */
  .chip-list {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .chip {
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-strong);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex; align-items: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 80ms, background 150ms;
  }
  .chip.active {
    background: var(--h5m-lemon);
    border-color: var(--frame);
    border-width: 2px;
    color: var(--h5m-black);
    font-weight: 900;
  }
  .chip:active { transform: scale(0.95); }

  /* ============================================================
     H5M Hero (Home) — Beton-Background, plakatives Plakat
     ============================================================ */
  .h5m-hero {
    position: relative;
    overflow: hidden;
    padding: calc(20px + var(--safe-top)) 22px 30px;
    background: var(--h5m-black);
    color: var(--h5m-white);
    isolation: isolate;
  }
  .h5m-hero__bg {
    position: absolute; inset: -8%;
    background-image: url('assets/beton.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    filter: contrast(1.1) saturate(0.6);
    z-index: -2;
    animation: h5m-beton-drift 22s ease-in-out infinite alternate;
  }
  .h5m-hero::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(47,49,245,0.35) 0%, transparent 50%),
      linear-gradient(180deg, rgba(19,19,20,0.55) 0%, rgba(19,19,20,0.85) 100%);
    z-index: -1;
    pointer-events: none;
  }
  @keyframes h5m-beton-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1.04); }
    100% { transform: translate3d(-2%, -3%, 0) scale(1.08); }
  }

  /* sweat drops (fetzig touch — dezent oben rechts) */
  .h5m-hero__sweat {
    position: absolute; top: 0; right: 16%;
    width: 80px; height: 60px;
    pointer-events: none;
    z-index: 0;
  }
  .h5m-hero__sweat span {
    position: absolute; top: 0;
    width: 9px; height: 12px;
    background: #61c8ff;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform-origin: 50% 0;
    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.15), inset 2px 2px 2px rgba(255,255,255,0.4);
    opacity: 0;
    animation: h5m-sweat 2.4s ease-in infinite;
  }
  .h5m-hero__sweat span:nth-child(1) { left: 10%; animation-delay: 0s;   }
  .h5m-hero__sweat span:nth-child(2) { left: 50%; animation-delay: 0.7s; width: 7px; height: 10px; }
  .h5m-hero__sweat span:nth-child(3) { left: 80%; animation-delay: 1.4s; width: 6px; height: 9px;  }
  @keyframes h5m-sweat {
    0%   { transform: translateY(-6px); opacity: 0; }
    15%  { opacity: 0.95; }
    100% { transform: translateY(48px); opacity: 0; }
  }

  /* top row: logo + chip / settings */
  .h5m-hero__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
    position: relative; z-index: 1;
  }
  .h5m-hero__brand {
    display: flex; align-items: center; gap: 10px;
  }
  .h5m-hero__logo {
    height: 24px;
    width: auto;
    display: block;
  }
  .h5m-hero__chip {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--h5m-lemon);
    padding: 4px 8px;
    border: 1.5px solid var(--h5m-lemon);
    border-radius: 6px;
    line-height: 1;
  }
  .h5m-hero__settings {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--h5m-white);
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, transform 90ms var(--ease-out);
  }
  .h5m-hero__settings:active { background: rgba(255,255,255,0.18); transform: scale(0.94); }

  /* eyebrow above the username */
  .h5m-hero__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--h5m-lemon);
    margin-bottom: 8px;
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .h5m-hero__dot { opacity: 0.5; }

  /* the plakatives Name */
  .h5m-hero__name {
    font-size: clamp(48px, 16vw, 64px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.9;
    margin: 0 0 18px;
    color: var(--h5m-white);
    text-shadow: 0 4px 16px rgba(0,0,0,0.4);
    position: relative; z-index: 1;
    word-break: break-word;
  }

  /* claim below */
  .h5m-hero__claim {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255,255,255,0.75);
    position: relative; z-index: 1;
    max-width: 280px;
  }
  .h5m-hero__claim-em {
    color: var(--h5m-lemon);
    font-weight: 800;
  }

  /* ============================================================
     Lemon-Ticker
     ============================================================ */
  .h5m-ticker {
    background: var(--h5m-lemon);
    color: var(--h5m-black);
    border-top: 2px solid var(--frame);
    border-bottom: 2px solid var(--frame);
    padding: 9px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .h5m-ticker__track {
    display: inline-flex; align-items: center; gap: 16px;
    animation: h5m-ticker-roll 18s linear infinite;
    will-change: transform;
  }
  .h5m-ticker__item {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .h5m-ticker__sep {
    font-size: 11px;
    color: var(--h5m-black);
    opacity: 0.55;
  }
  @keyframes h5m-ticker-roll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* On the home view we render the hero as the page header,
     so move the content's start up tightly under the ticker. */
  .h5m-hero + .h5m-ticker + .content { padding-top: 14px; }

  @media (prefers-reduced-motion: reduce) {
    .h5m-hero__bg, .h5m-hero__sweat span, .h5m-ticker__track { animation: none; }
  }


  /* ============================================================
     Dark Mode — schaltet über <html data-theme="dark">
     ============================================================ */
  :root[data-theme="dark"] {
    --bg: #0c0c0e;
    --bg-elevated: #1a1a1e;
    --text: #f4f4f2;
    --text-muted: #9a9a98;
    --text-light: #6a6a6c;
    --border: #26262a;
    --border-strong: #3a3a3f;
    --h5m-platinum: #26262a;
    --h5m-platinum-soft: #1a1a1e;
    --h5m-platinum-dark: #9a9a98;
    --frame: #f4f4f2;
    --accent-soft: rgba(47,49,245,0.22);
    --success-soft: rgba(22,163,74,0.18);
    --error-soft: rgba(220,38,38,0.18);

    color-scheme: dark;
  }
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .app {
    background: var(--bg);
    color: var(--text);
  }
  /* H5M-Streifen über der Statusbar wird im Dark Mode lemon — sonst unsichtbar */
  :root[data-theme="dark"] .app::before {
    background: var(--h5m-lemon);
  }

  /* Topbar */
  :root[data-theme="dark"] .topbar {
    background: var(--bg-elevated);
    border-bottom-color: var(--border);
  }
  :root[data-theme="dark"] .topbar .back {
    background: var(--h5m-platinum);
    color: var(--text);
    border-color: var(--border-strong);
  }
  :root[data-theme="dark"] .topbar.transparent .back {
    background: rgba(255,255,255,0.08);
    color: var(--h5m-white);
    border-color: rgba(255,255,255,0.18);
  }
  :root[data-theme="dark"] .topbar.transparent .btn-text {
    background: rgba(255,255,255,0.08);
    color: var(--h5m-lemon);
    border: 1px solid rgba(255,255,255,0.18);
  }

  /* Cards & list items */
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .tap-item,
  :root[data-theme="dark"] .exercise-card {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text);
  }
  :root[data-theme="dark"] .tap-item:active {
    background: var(--h5m-platinum);
    border-color: var(--frame);
  }
  :root[data-theme="dark"] .tap-item .chevron { color: var(--text); }

  /* Brutalist buttons */
  :root[data-theme="dark"] .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
  }
  :root[data-theme="dark"] .btn-secondary:active { background: var(--h5m-platinum); }

  /* Footer-Action Gradient anpassen */
  :root[data-theme="dark"] .footer-action {
    background: linear-gradient(180deg, rgba(12,12,14,0) 0%, var(--bg) 35%, var(--bg) 100%);
  }

  /* Numbers / inputs */
  :root[data-theme="dark"] .num-input,
  :root[data-theme="dark"] .last-time,
  :root[data-theme="dark"] .text-input,
  :root[data-theme="dark"] .textarea-input,
  :root[data-theme="dark"] .stat-card {
    background: var(--bg-elevated);
    color: var(--text);
  }
  :root[data-theme="dark"] .num-input button {
    background: var(--h5m-platinum);
    color: var(--text);
  }
  :root[data-theme="dark"] .num-input button.plus {
    background: var(--h5m-lemon);
    color: var(--h5m-black);
  }
  :root[data-theme="dark"] .num-input input { color: var(--text); }
  :root[data-theme="dark"] .num-input input:focus { background: rgba(219,240,89,0.10); }

  :root[data-theme="dark"] .text-input:focus,
  :root[data-theme="dark"] .textarea-input:focus {
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(47,49,245,0.32);
  }

  /* Toast — bleibt fast gleich, kleiner Lemon-Glow */
  :root[data-theme="dark"] .toast {
    background: #0c0c0e;
    border-color: var(--h5m-lemon);
  }

  /* Setup-Overlay (API-Keys) */
  :root[data-theme="dark"] .setup-overlay .modal {
    background: var(--bg-elevated);
    color: var(--text);
  }
  :root[data-theme="dark"] .setup-overlay h2 { color: var(--text); }
  :root[data-theme="dark"] .setup-overlay input {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border-strong);
  }
  :root[data-theme="dark"] .setup-overlay input:focus {
    background: var(--bg-elevated);
  }

  /* Chip default state */
  :root[data-theme="dark"] .chip {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border-strong);
  }

  /* Section labels bleiben Blau (gut sichtbar auf hell und dunkel) */

  /* Empty-state Icon dezenter */
  :root[data-theme="dark"] .empty-state { color: var(--text-muted); }

  /* ============================================================
     Theme-Switch (Segmented Control) im Settings-Screen
     CSS-only active state via [data-theme] auf <html>
     ============================================================ */
  .theme-switch {
    display: flex;
    background: var(--h5m-platinum-soft);
    border: 1.5px solid var(--frame);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-top: 6px;
  }
  .theme-switch__btn {
    flex: 1;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 200ms, color 200ms;
    cursor: pointer;
  }
  .theme-switch__btn svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Active state — driven by document.documentElement[data-theme] */
  :root[data-theme="light"] .theme-switch__btn[data-theme-value="light"],
  :root[data-theme="dark"]  .theme-switch__btn[data-theme-value="dark"] {
    background: var(--h5m-lemon);
    color: var(--h5m-black);
    font-weight: 900;
    box-shadow: 1px 1px 0 var(--frame);
  }