/* Buchkodex Studio, Strang A: Einstieg (/start), Anmeldung (/login) und Hinweisseiten.
   Mobil zuerst. Nutzt nur Variablen und Bausteine aus app.css. */

/* ---------- Schmale Karten für Anmelden, Link gesendet, Link abgelaufen ---------- */
.auth { max-width: 520px; padding-top: var(--space-2); }
.auth__card { padding: var(--space-5) 22px; }
.auth__title { font-size: clamp(1.5rem, 5.4vw, 1.95rem); margin-bottom: var(--space-3); }
.auth__lead { color: var(--ink-3); margin-bottom: var(--space-5); }
.auth__form { display: grid; gap: var(--space-4); }
.auth__alt { margin: var(--space-5) 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; }
.auth-notice { margin-bottom: var(--space-4); line-height: 1.5; }
.auth__card--sent .auth-notice { margin: var(--space-5) 0 0; }

.auth__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bk-red-soft); color: var(--bk-red-dark); margin-bottom: var(--space-4);
}
.auth__icon svg { width: 28px; height: 28px; }
.auth__icon--muted { background: var(--paper); color: var(--ink-3); }
.auth__nowrap { white-space: nowrap; }

.auth__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
/* Normaler Textfluss (kein Flex), damit Teile mit white-space: nowrap sauber umbrechen */
.auth__steps li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; color: var(--ink-2); }
.auth__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 0.85rem/1 var(--font); background: var(--ink); color: var(--white);
}

@media (min-width: 760px) {
  .auth { padding-top: var(--space-6); }
  .auth__card { padding: var(--space-6) 36px; }
}

/* ---------- Einstiegsseite /start ---------- */
.auth-page--start .main { padding-top: var(--space-4); }
.start__hero { display: grid; gap: var(--space-6); align-items: center; }
.start__kicker {
  margin: 0 0 var(--space-3); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bk-red-dark);
}
.start__title { font-size: clamp(2.05rem, 8.2vw, 3.5rem); line-height: 1.07; letter-spacing: -0.025em; margin-bottom: var(--space-4); }
.start__line { display: block; }
.start__lead { font-size: 1.08rem; color: var(--ink-3); max-width: 38ch; margin-bottom: var(--space-5); }

.start-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 18px; margin-bottom: var(--space-6);
}
.start-form .label { display: block; margin-bottom: 8px; }
.start-form__row { display: grid; gap: 10px; }
.start-form__input { min-height: 56px; font-size: 1.05rem; }
.start-form__button { width: 100%; }
.start-form .form-error { margin: 8px 0 0; }
.start-form__consent { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.start-form__consent a { color: var(--muted); }
.start-form .auth-notice { margin-bottom: var(--space-3); }

.start__benefits { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.start__benefits li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-3); line-height: 1.55; }
.start__benefits strong { color: var(--ink); }
.start__icon {
  flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); color: var(--bk-red);
}
.start__icon svg { width: 20px; height: 20px; }
.start__login { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Typografisches 3D-Buch, rein mit CSS (kein Bild, keine Ladezeit) */
.start__visual { display: flex; justify-content: center; padding: var(--space-2) 0 0; margin-bottom: calc(-1 * var(--space-5)); }
.cssbook { perspective: 1400px; }
.cssbook__cover {
  position: relative; width: 168px; aspect-ratio: 148 / 210; display: flex; flex-direction: column;
  padding: 22px 18px 18px 26px; border-radius: 3px 8px 8px 3px; color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 7px, rgba(255, 255, 255, 0.08) 7px 9px, transparent 9px),
    radial-gradient(120% 80% at 85% 0%, rgba(225, 25, 40, 0.55), transparent 60%),
    linear-gradient(160deg, #2b2e35 0%, var(--ink) 70%);
  box-shadow: 18px 24px 40px rgba(23, 25, 29, 0.28), 2px 2px 0 rgba(23, 25, 29, 0.25);
  transform: rotateY(-20deg) rotateX(4deg); transform-style: preserve-3d;
}
.cssbook__cover::after {
  content: ""; position: absolute; top: 2.5%; right: -12px; width: 12px; height: 95%;
  background: repeating-linear-gradient(0deg, #f6f2ea 0 2px, #e3dccf 2px 3px);
  transform: rotateY(90deg) translateZ(-6px); transform-origin: left; border-radius: 0 2px 2px 0;
}
.cssbook__author { font: 600 0.62rem/1.2 var(--font); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.cssbook__title { font: 700 1.55rem/1.05 var(--font-head); margin-top: auto; letter-spacing: -0.01em; }
.cssbook__sub { font-size: 0.66rem; line-height: 1.35; opacity: 0.78; margin-top: 8px; }
.cssbook__mark {
  margin-top: 18px; padding-top: 10px; border-top: 2px solid var(--bk-red); align-self: flex-start;
  font: 700 0.56rem/1 var(--font-head); letter-spacing: 0.22em; text-transform: uppercase;
}

@media (min-width: 560px) {
  .start-form { padding: 22px; }
  .start-form__row { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .start-form__button { width: auto; }
}

@media (min-width: 900px) {
  .auth-page--start .main { padding-top: var(--space-7); }
  .start__hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--space-7); }
  .start__lead { font-size: 1.2rem; }
  .start__visual { padding: 0; margin-bottom: 0; }
  .cssbook__cover { width: 248px; padding: 32px 26px 26px 36px; }
  .cssbook__title { font-size: 2.3rem; }
  .cssbook__author { font-size: 0.72rem; }
  .cssbook__sub { font-size: 0.82rem; }
  .cssbook__mark { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .cssbook__cover { transition: transform 0.5s ease; }
  .cssbook:hover .cssbook__cover { transform: rotateY(-10deg) rotateX(2deg); }
}