/* Anmeldung aus services/verkaufs-tracker/modern.css.
   Gemeinsame Farben, Typografie und Animationen des Verkaufstracker-Templates. */

:root {
  color-scheme: dark;
  --night: #131017;
  --glass: rgba(35, 29, 42, .62);
  --glass-strong: rgba(42, 35, 50, .82);
  --surface: #1e1924;
  --ink: #f4eee6;
  --ink-soft: #d9d1c7;
  --muted: #a39aab;
  --faint: #7a7185;
  --line: rgba(244, 238, 230, .08);
  --line-strong: rgba(244, 238, 230, .16);
  --amber: #e9ba7b;
  --amber-hi: #f6d3a2;
  --amber-deep: #b97c3f;
  --amber-soft: rgba(233, 186, 123, .12);
  --iris: #b3a4ea;
  --iris-soft: rgba(179, 164, 234, .12);
  --success: #9fd6b3;
  --success-soft: rgba(159, 214, 179, .12);
  --warn-c: #ebcb86;
  --danger: #f1a69c;
  --button-ink: #24170b;
  --paper: var(--night);
  --accent: var(--amber);
  --accent-hover: var(--amber-hi);
  --accent-soft: var(--amber-soft);
  --hover: rgba(244, 238, 230, .035);

  --r-panel: 28px;
  --r-card: 20px;
  --r-field: 14px;
  --r-pill: 999px;
  --radius: var(--r-field);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .7), 0 10px 20px -12px rgba(0, 0, 0, .5);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --display: "Didot", "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --serif: var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Basis ------------------------------------------------------------------ */
* { box-sizing: border-box; letter-spacing: 0; }
html { min-width: 320px; background: var(--night); scroll-behavior: smooth; scrollbar-color: #3a3142 var(--night); scroll-padding-top: 96px; }
body { position: relative; min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; background: transparent; color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, dl { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; }
a, button, input, select, summary { touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .6; }
[hidden] { display: none !important; }
::selection { background: rgba(233, 186, 123, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3142; border-radius: 10px; border: 3px solid var(--night); }
::-webkit-scrollbar-thumb:hover { background: #4d4257; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.ui-icon { display: block; width: 19px; height: 19px; flex: 0 0 auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 200; padding: 12px 18px; border-radius: var(--r-pill); background: var(--amber); color: var(--button-ink); font-weight: 600; transform: translateY(-200%); opacity: 0; transition: transform 300ms var(--ease), opacity 200ms ease; }
.skip-link:focus { transform: none; opacity: 1; }

/* Atmosphäre: Licht, das durch ein Glasflakon fällt */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 78% 8%, rgba(233, 186, 123, .16), transparent 70%),
    radial-gradient(34vmax 30vmax at 12% 30%, rgba(179, 164, 234, .10), transparent 70%),
    radial-gradient(40vmax 34vmax at 60% 95%, rgba(185, 124, 63, .08), transparent 70%);
  animation: aura-drift 38s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(19, 16, 23, .5) 75%, rgba(19, 16, 23, .85) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 120px);
}


.auth-brand span { margin-left: 8px; color: var(--amber); display: inline-block; transition: transform 500ms var(--ease-spring); }

.notebook-heading h1 span, .auth-heading h1 span {
  display: inline-block; margin-left: .02em; color: var(--amber);
  text-shadow: 0 0 36px rgba(233, 186, 123, .55);
  animation: drop-fall 900ms 900ms var(--ease-spring) both, drop-glow 4.5s 2s ease-in-out infinite;
}

label { display: grid; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
input, select {
  width: 100%; min-width: 0; height: 50px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-field);
  background-color: rgba(15, 12, 19, .55); color: var(--ink); font-size: 16px;
  transition: border-color 200ms ease, box-shadow 300ms var(--ease), background-color 200ms ease;
}

input::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover { border-color: rgba(244, 238, 230, .28); background-color: rgba(15, 12, 19, .7); }
input:focus, select:focus { outline: none; border-color: var(--amber); background-color: rgba(15, 12, 19, .8); box-shadow: 0 0 0 4px rgba(233, 186, 123, .14), 0 8px 24px -10px rgba(233, 186, 123, .35); }

/* Primäre Buttons */
.stock-form button, .vinted-form button, .auth-submit {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 52px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--amber-hi) 0%, var(--amber) 45%, var(--amber-deep) 100%);
  color: var(--button-ink); font-size: 14.5px; font-weight: 650;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 24px -10px rgba(233, 186, 123, .6);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.stock-form button::after, .vinted-form button::after, .auth-submit::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%);
  transform: translateX(-120%); transition: transform 900ms var(--ease);
}
.stock-form button:hover, .vinted-form button:hover, .auth-submit:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 36px -12px rgba(233, 186, 123, .7); }
.stock-form button:hover::after, .vinted-form button:hover::after, .auth-submit:hover::after { transform: translateX(120%); }
button:active { transform: scale(.97) !important; }
.stock-form button .ui-icon { transition: transform 500ms var(--ease-spring); }
.stock-form button:hover .ui-icon { transform: rotate(90deg) scale(1.1); }


/* Anmeldung -------------------------------------------------------------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px 0; }
.auth-shell {
  position: relative; width: min(460px, calc(100% - 32px)); margin: 0 auto;
  padding: 40px 38px calc(34px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: var(--shadow-panel);
  animation: panel-in 900ms var(--ease) both;
}
.auth-shell::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 211, 162, .7), transparent); }
.auth-brand { padding-bottom: 22px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 20px; font-weight: 400; }
.auth-heading { padding: 30px 0 28px; }
.auth-heading > span { display: inline-flex; align-items: center; gap: 9px; color: var(--amber); font-size: 12.5px; }
.auth-heading > span::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.auth-heading h1 { margin: 12px 0 14px; font-family: var(--display); font-size: clamp(40px, 9vw, 54px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; animation: title-reveal 1100ms 150ms var(--ease) both; }
.auth-heading p { color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.auth-form label:not(:first-child) { margin-top: 12px; }
.auth-submit { margin-top: 20px; }
.auth-meta { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.auth-error { margin-bottom: 22px; padding: 14px 16px; border-radius: var(--r-field); background: rgba(241, 166, 156, .1); border: 1px solid rgba(241, 166, 156, .3); color: var(--danger); font-size: 14px; animation: shake 500ms var(--ease) both; }

/* Speichern-Zustand */
.is-saving { opacity: .8; }
.is-saving::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }


/* Keyframes -------------------------------------------------------------- */
@keyframes aura-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-3vmax, 2vmax, 0) rotate(4deg); } 100% { transform: translate3d(2vmax, -2vmax, 0) rotate(-3deg); } }
@keyframes title-reveal { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(.2em); } to { opacity: 1; clip-path: inset(-10% -10% -20% -10%); transform: none; } }
@keyframes drop-fall { 0% { opacity: 0; transform: translateY(-1.1em) scale(.5, 1.35); } 55% { opacity: 1; transform: translateY(0) scale(1.3, .72); } 78% { transform: translateY(-.06em) scale(.92, 1.08); } 100% { opacity: 1; transform: none; } }
@keyframes drop-glow { 0%, 100% { text-shadow: 0 0 22px rgba(233, 186, 123, .3); } 50% { text-shadow: 0 0 46px rgba(233, 186, 123, .9); } }
@keyframes pulse-dot { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ledger-enter { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes live-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes toast-enter { from { opacity: 0; translate: 0 24px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes toast-leave { to { opacity: 0; translate: 0 16px; scale: .96; } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }


/* Der mobile Innenabstand entspricht dem Verkaufstracker. */
@media (max-width: 520px) {
  .auth-shell { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Dynamische Safari-Leisten und Bildschirmränder berücksichtigen. */
.auth-body { min-height: 100dvh; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.auth-form-region { min-width: 0; }
.auth-heading h1 { overflow-wrap: anywhere; }
.auth-meta { min-height: 38px; }
.auth-submit:disabled:hover { transform: none; }