/* ==========================================================================
   MIATSystem — Design Tokens
   ==========================================================================
   Basis: mikuni.dev. Die Marken-Palette ist 1:1 übernommen.

   ABER: mikuni.dev ist eine dunkle Seite. Die Werkstatt ist hell — ein
   dunkles Tablet an einem hellen Arbeitsplatz verliert bei Tageslicht
   jeden Kontrast. Deshalb ist HELL der Standard.

   Das heißt nicht "andere Marke". Die Markenfarben bleiben exakt, sie
   werden nur unterschiedlich eingesetzt:
     - Für Verläufe und Dekor: die Originaltöne (--brand-*).
     - Für Text, Zahlen und Status: abgedunkelte Varianten derselben
       Farbtöne, weil #5ce1ff auf Weiß nicht lesbar ist.
   Gleicher Farbton, andere Helligkeit. Gleiche Marke, lesbar.
   ========================================================================== */

:root{
  /* ---- Marken-Palette, unverändert von mikuni.dev --------------------- */
  --brand-pink:#ff4fa3;
  --brand-pink-soft:#ff7ebd;
  --brand-violet:#a070ff;
  --brand-cyan:#5ce1ff;
  --brand-cyan-soft:#8ee9ff;

  --grad-magic:linear-gradient(135deg,#ff4fa3 0%,#a070ff 50%,#5ce1ff 100%);

  /* Fuer Verlaufs-TEXT auf hellem Grund. --grad-magic endet in #5ce1ff
     und waere auf Weiss nicht lesbar — das letzte Wort verschwindet.
     Gleicher Farbverlauf, aber in Helligkeiten, die auf Hell tragen. */
  --grad-text:linear-gradient(135deg,#cf0f70 0%,#7a3fe0 55%,#0a6f95 100%);

  /* Fuer Flaechen mit WEISSER Schrift. --grad-magic laeuft rechts in
     #5ce1ff aus — weiss darauf hat rund 1.8:1 und ist unlesbar.
     Gleiche Farbreise, aber durchgehend dunkel genug fuer Weiss. */
  --grad-btn:linear-gradient(135deg,#e01b7d 0%,#8b3fd6 55%,#2f6fa8 100%);

  --radius:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.4,0,.2,1);

  --font-body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;

  --num:tabular-nums;

  /* ==== HELL — der Standard ==========================================
     Die Flächen sind nicht neutralgrau, sondern minimal violett getönt.
     Dadurch bleibt die Seite als deine erkennbar, ohne dunkel zu sein.
     -------------------------------------------------------------------- */
  --bg-0:#f6f3fc;
  --bg-1:#efeaf9;
  --bg-2:#e6def4;
  --surface:#ffffff;
  --surface-2:#faf7fe;
  --border:#ddd2ee;
  --border-hi:#bca8e0;

  --text:#1b1033;          /* auf --bg-0: 15.8:1 */
  --text-dim:#54467a;      /* auf --bg-0:  7.4:1 */
  --text-mute:#7d6fa3;     /* auf --bg-0:  4.6:1 */

  /* Akzente, abgedunkelt für hellen Grund. Gleicher Farbton wie oben. */
  --pink:#cf0f70;
  --pink-soft:#ab0b5c;
  --violet:#6d32d6;
  --cyan:#06769b;
  --cyan-soft:#045a77;

  /* ---- Status --------------------------------------------------------
     Die beiden Extreme sind deine Markenfarben. Nur "knapp" braucht
     einen eigenen Ton, weil Violett als Warnung nicht gelesen wird.
     Alle drei sind auf --surface über 4.5:1 und damit auch bei
     Sonnenlicht auf dem Tablet lesbar.
     -------------------------------------------------------------------- */
  --ok:#06769b;
  --ok-soft:#045a77;
  --ok-bg:rgba(6,118,155,.10);
  --warn:#9a5a00;
  --warn-soft:#7a4700;
  --warn-bg:rgba(154,90,0,.10);
  --over:#cf0f70;
  --over-soft:#ab0b5c;
  --over-bg:rgba(207,15,112,.10);

  --parked:#7d6fa3;
  --parked-bg:rgba(125,111,163,.10);

  --shadow-soft:0 6px 22px rgba(46,26,88,.10);
  --shadow-glow:0 4px 18px rgba(207,15,112,.22);

  /* Dekorative Schleier im Hintergrund. Auf Hell sehr zurückhaltend,
     sonst wirkt die Fläche schmutzig statt farbig. */
  --veil-pink:rgba(255,79,163,.10);
  --veil-cyan:rgba(92,225,255,.12);
  --veil-violet:rgba(160,112,255,.10);

  color-scheme:light;
}

/* ==== DUNKEL — nur auf ausdrückliche Wahl ==============================
   Bewusst NICHT an prefers-color-scheme gekoppelt. Ein Tablet, das
   systemweit auf Dunkel steht, würde sonst in der hellen Werkstatt
   umkippen — genau der Fall, der vermieden werden soll.
   Umschalten passiert über <html data-theme="dark">.
   ====================================================================== */
:root[data-theme="dark"]{
  --bg-0:#0a0612;
  --bg-1:#110a1f;
  --bg-2:#1a0f2e;
  --surface:#1e1334;
  --surface-2:#261942;
  --border:#3a2660;
  --border-hi:#553a8a;

  --text:#e8e0ff;
  --text-dim:#a89ccc;
  --text-mute:#6e6190;

  --pink:#ff4fa3;
  --pink-soft:#ff7ebd;
  --violet:#a070ff;
  --cyan:#5ce1ff;
  --cyan-soft:#8ee9ff;

  --ok:#5ce1ff;      --ok-soft:#8ee9ff;   --ok-bg:rgba(92,225,255,.12);
  --warn:#ffb94f;    --warn-soft:#ffd08a; --warn-bg:rgba(255,185,79,.12);
  --over:#ff4fa3;    --over-soft:#ff7ebd; --over-bg:rgba(255,79,163,.14);

  --parked:#6e6190;
  --parked-bg:rgba(110,97,144,.14);

  --shadow-soft:0 8px 30px rgba(0,0,0,.35);
  --shadow-glow:0 0 24px rgba(255,79,163,.35),0 0 60px rgba(160,112,255,.2);
  --grad-text:var(--grad-magic);
  --grad-btn:var(--grad-magic);

  --veil-pink:rgba(255,79,163,.13);
  --veil-cyan:rgba(92,225,255,.10);
  --veil-violet:rgba(160,112,255,.12);

  color-scheme:dark;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{background:var(--bg-0)}
body{
  background:var(--bg-0);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;font-family:inherit}
::selection{background:var(--brand-pink);color:#fff}

.num,.big,[data-num]{font-variant-numeric:var(--num)}

/* ==========================================================================
   Basis-Komponenten — Formen von mikuni.dev
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:var(--radius);
  font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease);
}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow-glow)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(207,15,112,.34)}
  .btn-ghost:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
}
.btn:active{transform:translateY(0) scale(.98)}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

.eyebrow{
  color:var(--pink);font-size:.8rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;
}

input[type=text],input[type=search],input[type=number],input:not([type]){
  width:100%;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-family:inherit;font-size:.95rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
input::placeholder{color:var(--text-mute)}
input:focus{
  outline:none;border-color:var(--pink);background:var(--surface);
  box-shadow:0 0 0 4px rgba(207,15,112,.14);
}

/* ==========================================================================
   Bewegung
   In der Werkstatt wird die Oberfläche hunderte Male am Tag angefasst.
   Alles über ~200ms fühlt sich zäh an, egal wie schön es ist.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}