/* ── Passwort anzeigen/verbergen (ab 15.4) ─────────────────────────────────
       Vorher gab es keinen eigenen Schalter — sichtbar war nur der NATIVE Knopf von Edge,
       und der verschwindet nach einem Fehlversuch (und fehlt auf iOS/Safari komplett).
       Jetzt ein eigener Schalter, der überall gleich funktioniert; den nativen blenden wir
       aus, sonst stünden zwei Augen nebeneinander. */
    input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
    .pw-wrap { position: relative; }
    /* Zwei Klassen/Attribute, damit die Regel gegen die allgemeine Feld-Regel gewinnt, die
       weiter unten steht (gleiche Spezifitaet -> spaeter gewinnt). type wechselt beim Umschalten. */
    .pw-wrap input[type="password"], .pw-wrap input[type="text"] { padding-right: 50px; }
    .pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-s); touch-action: manipulation; }
    .pw-eye:hover { color: var(--gold-d); background: var(--gold-pale); }
    .pw-eye.on { color: var(--gold-d); }
    .pw-eye svg { width: 21px; height: 21px; display: block; }
    label {
      display: block;
      font-size: 10px; font-weight: 800;
      letter-spacing: .2em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 7px;
    }
    /* ACHTUNG: Diese Liste ist die einzige Stelle, an der Eingabefelder ihr Aussehen bekommen.
       Ein Feldtyp, der hier fehlt, wird vom Browser im nackten System-Look gezeichnet — genau so
       sind nacheinander password, time/date und email aufgefallen. Bei einem NEUEN Feldtyp also
       zuerst hier nachsehen. `input:not([type])` deckt zusätzlich Felder ohne type-Attribut ab. */
    .input, input:not([type]), input[type="text"], input[type="tel"], input[type="number"], input[type="password"],
    input[type="email"], input[type="url"], input[type="search"],
    input[type="time"], input[type="date"], input[type="datetime-local"], select, textarea {
      width: 100%;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-s);
      padding: 12px 14px;
      font-size: 16px;
      font-family: var(--font-ui);
      color: var(--ink);
      outline: none;
      transition: border-color .18s, box-shadow .18s;
      -webkit-appearance: none;
      appearance: none;
    }
    select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2387826e' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 13px center;
      padding-right: 36px;
      cursor: pointer;
    }

    /* ── Zeit- und Datumsfelder (ab 15.4) ──────────────────────────────────────
       Diese Typen fehlten in der Feld-Selektorliste, deshalb zeichnete der Desktop-Browser
       sie im nackten System-Look („Windows 95"). Am Handy fällt es nicht auf, weil iOS/Android
       ihr eigenes Rad-/Kalender-Bedienfeld darüberlegen — die Innereien unten sind reine
       Desktop-Kosmetik (WebKit/Blink; Firefox ignoriert sie und nutzt nur die Grundgestaltung). */
    input[type="time"], input[type="date"], input[type="datetime-local"] {
      -webkit-appearance: none; appearance: none;   /* sonst bleibt der graue System-Rahmen */
      font-variant-numeric: tabular-nums;
    }
    input[type="time"]::-webkit-datetime-edit,
    input[type="date"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit { color: var(--ink); padding: 0; }
    input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
    input::-webkit-datetime-edit-text { color: var(--muted); padding: 0 2px; }
    input::-webkit-datetime-edit-ampm-field,
    input::-webkit-datetime-edit-hour-field,
    input::-webkit-datetime-edit-minute-field,
    input::-webkit-datetime-edit-day-field,
    input::-webkit-datetime-edit-month-field,
    input::-webkit-datetime-edit-year-field { padding: 1px 3px; border-radius: 4px; }
    input::-webkit-datetime-edit-ampm-field:focus,
    input::-webkit-datetime-edit-hour-field:focus,
    input::-webkit-datetime-edit-minute-field:focus,
    input::-webkit-datetime-edit-day-field:focus,
    input::-webkit-datetime-edit-month-field:focus,
    input::-webkit-datetime-edit-year-field:focus {
      background: var(--gold-pale); color: var(--ink); outline: none;
    }
    /* System-Symbol durch ein eigenes in Gold ersetzen (wie beim select-Pfeil) */
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      width: 18px; height: 18px; padding: 0; margin: 0 0 0 6px;
      cursor: pointer; opacity: .7; background-repeat: no-repeat; background-position: center;
      transition: opacity .15s;
    }
    input[type="time"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2397793a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.2V12l3 1.9'/></svg>"); }
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2397793a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3.2' y='5.2' width='17.6' height='15.6' rx='2.4'/><path d='M8 3.2v4M16 3.2v4M3.2 10.4h17.6'/></svg>"); }
    input[type="time"]::-webkit-calendar-picker-indicator:hover,
    input[type="date"]::-webkit-calendar-picker-indicator:hover,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
    /* Spinner in Zahlenfeldern nebenan ebenfalls ruhigstellen */
    input[type="number"] { -moz-appearance: textfield; }
    .input:focus, input:focus, select:focus, textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(179,146,77,.18);
      background: #fffdf6;
    }
    textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

    .btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      padding: 15px 20px;
      border: none;
      border-radius: 3px;
      font-size: 12px; font-weight: 800;
      letter-spacing: .2em; text-transform: uppercase;
      cursor: pointer;
      transition: transform .14s, box-shadow .2s, background .2s;
      touch-action: manipulation;
      min-height: 48px;
    }
    .btn:active { transform: scale(.985); }
    .btn-primary {
      background: linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 100%);
      color: var(--pine);
      box-shadow: 0 5px 14px -4px rgba(151,121,58,.55), inset 0 1px 0 rgba(255,255,255,.4);
    }
    .btn-primary:hover { box-shadow: 0 7px 18px -4px rgba(151,121,58,.7), inset 0 1px 0 rgba(255,255,255,.4); }
    .btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    .btn-dark {
      background: linear-gradient(180deg, var(--pine-3), var(--pine));
      color: var(--ivory);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .btn-ghost { background: none; border: 1px solid var(--line); color: var(--ink-soft); }
    .btn-ghost:hover { border-color: var(--ink-soft); }
    .btn-danger { background: none; border: 1px solid rgba(162,58,46,.4); color: var(--red); }
    .btn-danger:hover { background: var(--wine-l); }
    .refresh-btn {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 9px 16px;
      font-size: 10px; font-weight: 800;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--ink-soft);
      cursor: pointer;
      transition: all .18s;
      touch-action: manipulation;
    }
    .refresh-btn:hover { border-color: var(--gold); color: var(--gold-d); }
    .refresh-btn:disabled { opacity: .5; cursor: wait; }

    /* ══════════════════════════════════════════════════════════
       BESTÄTIGUNG & MEINE BESTELLUNGEN
    ══════════════════════════════════════════════════════════ */
    .success-frame {
      max-width: 520px;
      margin: 6px auto 24px;
      padding: 36px 26px 30px;
      text-align: center;
      background: var(--card);
      border: 1px solid var(--moss);
      outline: 1px solid var(--moss);
      outline-offset: 4px;
      border-radius: 4px;
      animation: pop .4s cubic-bezier(.34,1.4,.6,1) both;
    }
    .success-seal {
      width: 64px; height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      border: 1.5px solid var(--moss);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      color: var(--moss);
    }
    .success-seal::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(63,107,80,.4); border-radius: 50%; }
    .success-seal svg { width: 26px; height: 26px; }
    .success-frame h2 {
      font-family: var(--font-display);
      font-size: 1.7rem; font-weight: 600;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }
    .success-frame p { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-soft); }

    .my-orders {
      max-width: 640px;
      margin: 0 auto 26px;
      background: var(--card);
      border: 1px solid var(--line);
      border-left: 3px solid var(--moss);
      border-radius: 4px;
      padding: 16px 18px;
      box-shadow: var(--sh-sm);
    }
    .my-orders-title {
      font-size: 10px; font-weight: 800;
      letter-spacing: .24em; text-transform: uppercase;
      color: var(--moss);
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 12px;
    }
    .my-orders-title::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
    .my-order { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
    .my-order:last-child { border-bottom: none; padding-bottom: 2px; }
    .my-order-name { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
    .my-order-line { font-family: var(--font-display); font-size: 15px; line-height: 1.5; }
    .my-order-line .qty-num { font-weight: 700; color: var(--gold-d); }
    .my-order-line .var { font-style: italic; color: var(--ink-soft); }
    .my-order-line .comment { display: block; font-style: italic; font-size: 13px; color: var(--ink-soft); padding-left: 12px; border-left: 2px solid var(--gold-l); margin-top: 2px; }
    .my-order-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
    .my-order-total { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
    .storno-cd { font-variant-numeric: tabular-nums; opacity: .8; }
    .cancel-btn.expired { opacity: .6; }
    .cl-grip { flex: 0 0 auto; width: 16px; min-height: 24px; align-self: stretch; cursor: grab; border-radius: 4px; margin-right: 2px; background-image: radial-gradient(var(--muted) 1.2px, transparent 1.4px); background-size: 5px 5px; background-position: center; opacity: .45; }
    .cl-grip:hover { opacity: .8; }
    .cl-grip:active { cursor: grabbing; }
    .cl-row.drag-over { box-shadow: inset 0 2.5px 0 var(--gold); }
    .card-list-hint { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 0 0 8px; }
    .entry-headrow { display: flex; align-items: stretch; }
    .entry-headrow .entry-head { flex: 1; min-width: 0; }
    .entry-del { background: none; border: none; border-left: 1px solid var(--line-soft); padding: 0 13px; cursor: pointer; color: var(--muted); font-size: 14px; touch-action: manipulation; }
    .entry-del:hover { color: var(--red); background: var(--wine-l); }
    .ka-actions .btn + .btn { margin-top: 8px; }
    .ka-actions .ka-eod { margin-top: 10px; border: 1px solid var(--gold); }

    /* Kasino-Hybrid: Zähler „in Bearbeitung/fertig" + Sonderwünsche (ab 11.0 / Etappe 2) */