/* ============================================================================
   ERIT landing - the index-only layer
   ============================================================================
   Loaded by index.html and nothing else. styles.css stays the shared system
   for all 25 pages; nothing here may leak into the Ratgeber, the viewer or the
   legal pages.

   Same rules as styles.css, applied to the page's own objects: no radius, no
   shadow, no gradient, no cards, one vermilion for the one live thing, and
   Geist Mono wherever the content is data. Concretely:

     the hero        headline left at display size, the sentence set beside it
                     in the narrower column, the two actions butted onto one
                     rule beneath both. Then the running application at full
                     container width inside a hard frame.
     the fact strip  four specifications on one rule. Mono label over value.
     die Fristen     a timeline: one rule, three marks, the passed one filled.
     der Belegweg    one document pinned through five real screens. The only
                     scroll-driven moment on the page, and it earns it: the
                     sequence IS the argument.
     die Pflichten   eight obligations as a ruled register. The strip at the
                     foot of each says who is answerable for that line.
     die Nachweise   claim over evidence, numbered in mono.
     der Download    the file panel beside the three steps that follow it.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Motion primitives

   The default state is VISIBLE. Hiding happens only once motion.js has proved
   both that it runs and that the visitor has not asked for less motion, so a
   no-JS reader and a reduced-motion reader both get the finished page with no
   flash and nothing stuck at opacity 0.

   The entrance is a fade and a short rise, nothing else: this system does not
   have things flying in from the side.
   --------------------------------------------------------------------------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(12px); will-change: opacity, transform; }
html.motion [data-reveal].shown {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out-expo), transform .6s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 50ms);
}
html.motion [data-reveal].settled { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html.motion [data-reveal], html.motion [data-reveal].shown { opacity: 1; transform: none; transition: none; }
}

/* Light/dark screenshots follow the page, resolved the same way styles.css
   resolves the theme: an explicit attribute wins, otherwise the system does. */
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark  { display: block; }
}

/* ===========================================================================
   1 - The hero
   =========================================================================== */
.hero { padding-top: clamp(44px, 5.5vw, 84px); }

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 60px;
  align-items: end;
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: .96;
  letter-spacing: -0.048em;
  font-weight: 700;
  max-width: 12ch;
}
.hero h1 .accent { color: var(--sig); }

.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-3);
  max-width: 34ch;
  padding-bottom: 6px;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

/* The two actions sit on one rule under both columns, butted, square. */
.hero-cta {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--rule);
}
.hero-cta .btn { border-top: 0; }
.hero-cta .btn + .btn { border-left: 0; }

@media (max-width: 900px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero h1 { max-width: none; }
  .hero-sub { max-width: 40ch; padding-bottom: 0; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* The application at full container width in a hard frame. Its top edge sits
   inside the first viewport on a laptop, so the product is seen before the
   reader decides whether to scroll. */
.hero-media { margin: clamp(30px, 3.5vw, 52px) 0 0; }
.hero-frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 1440 / 900;
}
.hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ===========================================================================
   2 - The fact strip: four specifications on one rule
   =========================================================================== */
.factstrip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(40px, 5vw, 72px); }
.factstrip .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-block: 0;
}
.fact { padding: 22px 30px 22px 0; font-size: var(--fs-md); color: var(--text-3); }
.fact + .fact { padding-left: 30px; border-left: 1px solid var(--rule-2); }
.fact strong {
  display: block; margin-bottom: 5px;
  font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text);
}
@media (max-width: 900px) {
  .factstrip .wrap { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--rule-2); }
}
@media (max-width: 560px) {
  .factstrip .wrap { grid-template-columns: 1fr; }
  .fact { padding: 16px 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule-2); }
  .fact:first-child { border-top: 0; }
}

/* ===========================================================================
   3 - Die Fristen, as a timeline

   One rule across the set with three marks on it. The rule is drawn on the
   CONTAINER: per-item rules break at every grid gap and read as a dashed line.
   The segment already behind us is vermilion, and so is its mark.
   =========================================================================== */
.milestones {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px; max-width: 64rem;
}
.milestones::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 6px;
  height: 1px; background: var(--rule-2);
}
/* ::after paints over ::before, so the passed segment goes second. It stops at
   the second mark, which is the honest reading: one deadline has gone. */
.milestones::after {
  content: ""; position: absolute; top: 5px; left: 0; right: calc(66.666% + 10px);
  height: 1px; background: var(--sig);
}
.milestone { position: relative; padding-top: 30px; padding-right: 24px; }
.milestone-node {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 11px; height: 11px;
  background: var(--bg-2); border: 1px solid var(--text-4);
}
.milestone.is-now .milestone-node { background: var(--sig); border-color: var(--sig); }
.milestone-date {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.milestone.is-now .milestone-date { color: var(--sig); font-weight: 500; }
.milestone-tag {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-4);
}
.milestone.is-now .milestone-tag { color: var(--sig); }
.milestone h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.milestone p { font-size: var(--fs-md); color: var(--text-3); max-width: 32ch; }

@media (max-width: 760px) {
  .milestones { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .milestones::before, .milestones::after { display: none; }
  .milestone { padding: 0 0 28px 26px; }
  .milestone::before {
    content: ""; position: absolute; left: 5px; top: 4px; bottom: -4px;
    width: 1px; background: var(--rule-2);
  }
  .milestone.is-now::before { background: var(--sig); }
  .milestone:last-child::before { display: none; }
  .milestone-node { left: 0; top: 2px; }
}

.press-note { margin-top: 32px; font-size: var(--fs-sm); color: var(--text-3); max-width: 70ch; }
.press-note strong { color: var(--text-2); font-weight: 600; }

/* ===========================================================================
   4 - Der Belegweg

   One number, used twice: the stage is exactly this tall, and the spacers are
   pulled up by exactly this much so they sit UNDER the pinned stage rather
   than after it. Declared once so the two cannot drift apart.
   =========================================================================== */
.weg { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  --stage-h: calc(100dvh - var(--header-h) - 48px); }
.weg-head { padding-top: clamp(52px, 6.5vw, 100px); max-width: 46rem; }
.weg-head h2 { margin-bottom: 14px; }
.weg-head p { font-size: var(--fs-lead); color: var(--text-3); line-height: 1.45; }

.weg-track { position: relative; padding: clamp(30px, 3.5vw, 48px) 0 clamp(52px, 6.5vw, 90px); }
.weg-stage {
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 48px; align-items: center; align-content: center;
  min-height: var(--stage-h);
  position: sticky; top: calc(var(--header-h) + 24px); z-index: 1;
}

/* The register. A real sequence, so the numbers carry information. */
.weg-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.weg-rail li { border-bottom: 1px solid var(--rule-2); }
.weg-rail button {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
  text-align: left; padding: 14px 0; color: var(--text-3);
  transition: color .18s var(--ease);
}
.weg-rail button:hover { color: var(--text-2); }
.weg-rail .weg-n {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-4); padding-top: 2px;
}
.weg-rail .weg-l { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--text-2); letter-spacing: -0.024em; }
.weg-rail .weg-d {
  display: block; font-size: var(--fs-md); line-height: 1.5; color: var(--text-3);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s var(--ease), opacity .24s var(--ease), margin-top .3s var(--ease);
}
.weg-rail li[aria-current="step"] .weg-n { color: var(--sig); }
.weg-rail li[aria-current="step"] .weg-l { color: var(--text); }
.weg-rail li[aria-current="step"] .weg-d { max-height: 10em; opacity: 1; margin-top: 7px; }

.weg-screens { position: relative; }
.weg-frame { position: relative; border: 1px solid var(--rule); background: var(--surface); overflow: hidden; aspect-ratio: 1440 / 900; }
.weg-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  opacity: 0; transition: opacity .34s var(--ease-out-expo);
}
.weg-frame img.on { opacity: 1; }

.weg-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: var(--fs-cap);
  letter-spacing: .06em; color: var(--text-3);
}
.weg-cap .weg-screen { color: var(--text); font-weight: 500; }

/* The spacers hold no content and are hidden from assistive tech; the rail
   buttons are the accessible route. pointer-events:none keeps them from
   swallowing clicks on the rail, since they are painted after it. */
.weg-steps { position: relative; margin-top: calc(-1 * var(--stage-h)); pointer-events: none; }
.weg-step { height: 64vh; }
.weg-step:first-child { height: 32vh; }

.weg-mobile { display: none; }
.weg-mobile figure { margin: 0 0 32px; }
.weg-mobile .weg-h { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.weg-mobile .weg-n { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--sig); padding-top: 4px; }
.weg-mobile .weg-l { display: block; font-size: var(--fs-lead); font-weight: 600; color: var(--text); letter-spacing: -0.026em; }
.weg-mobile .weg-d { margin-top: 6px; font-size: var(--fs-md); color: var(--text-3); }
.weg-mobile .weg-frame { aspect-ratio: 1440 / 900; }
.weg-mobile .weg-frame img { opacity: 1; }

@media (max-width: 1080px) { .weg-stage { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 30px; } }
@media (max-width: 900px) {
  .weg-stage { position: static; display: block; min-height: 0; }
  .weg-steps, .weg-rail, .weg-screens { display: none; }
  .weg-mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .weg-stage { position: static; display: block; min-height: 0; }
  .weg-steps, .weg-rail, .weg-screens { display: none; }
  .weg-mobile { display: block; }
  .weg-rail .weg-d, .weg-rail button, .weg-frame img { transition: none; }
}
@media print {
  .weg-stage { position: static; display: block; min-height: 0; }
  .weg-steps, .weg-rail, .weg-screens { display: none; }
  .weg-mobile { display: block; }
}

/* ===========================================================================
   5 - Die Pflichten, as a ruled register

   Eight obligations. The one already in force opens the section across the
   full measure and the one that arrives in 2027 closes it; the six between
   run as pairs. Each entry ends with a strip naming who is answerable for
   that line, which is the whole point of the section.
   =========================================================================== */
.duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--rule); }
.duty {
  display: flex; flex-direction: column;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-2);
}
.duty-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; margin-bottom: 10px; align-items: start; }
.duty-n { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--text-4); padding-top: 4px; }
.duty-top h3 { font-size: var(--fs-lead); line-height: 1.28; }
.duty-body { font-size: var(--fs-md); color: var(--text-3); padding-left: 58px; }
.duty-cite {
  display: block; margin-top: 12px; padding-left: 58px;
  font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-4);
}

/* The answer strip: a vermilion rule and a mono source label. This is the one
   place the signal appears in the register, because it marks the single thing
   on the row that ERIT itself is answerable for. */
.duty-answer {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  margin: 20px 0 0 58px; padding-left: 18px;
  border-left: 2px solid var(--sig);
  margin-top: auto; padding-top: 4px;
}
.duty-src {
  font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--sig); padding-top: 3px;
}
.duty-answer p { font-size: var(--fs-md); color: var(--text-2); }
.duty-cta { grid-column: 2; justify-self: start; margin-top: 14px; }

.duty--lead, .duty--next { grid-column: 1 / -1; }
.duty--lead { border-bottom-color: var(--rule); }
.duty--lead .duty-n { color: var(--sig); }
.duty--lead .duty-top h3 { font-size: var(--fs-h3); }
.duty--lead .duty-body, .duty--next .duty-body { font-size: var(--fs-base); max-width: 70ch; }
.duty--next { border-bottom: 1px solid var(--rule); }

@media (max-width: 820px) {
  .duties { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .duty-body, .duty-cite { padding-left: 0; }
  .duty-answer { margin-left: 0; }
}

/* ===========================================================================
   6 - Die Nachweise, as claim over evidence

   Numbered in mono rather than ticked: a green check circle beside every line
   is decoration, and the number is also a reference the reader can cite back.
   The one still-open item leaves the list and becomes a bordered advisory,
   because it is the exception.
   =========================================================================== */
.proofs { list-style: none; margin: 0; padding: 0; max-width: 62rem; border-top: 1px solid var(--rule); counter-reset: proof; }
.proof {
  counter-increment: proof;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px;
  padding: 24px 0; border-bottom: 1px solid var(--rule-2);
}
.proof::before {
  content: counter(proof, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-4); padding-top: 4px;
}
.proof-ico { display: none; }
.proof-claim { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.026em; margin-bottom: 7px; }
.proof-evidence { font-size: var(--fs-md); color: var(--text-3); max-width: 74ch; }
.proof-evidence a { color: var(--sig); border-bottom: 1px solid var(--sig); }
.proof-evidence a:hover { background: var(--sig); color: var(--sig-ink); }

.proof-open {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px;
  max-width: 62rem; margin-top: 28px; padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--rule-2));
  border-left: 2px solid var(--warn);
  background: var(--warn-wash);
}
.proof-open .proof-ico { display: grid; place-items: center; color: var(--warn); }
.proof-open .proof-ico svg { width: 20px; height: 20px; }
.proof-open .proof-evidence { color: var(--text-2); }
@media (max-width: 620px) {
  .proof { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .proof::before { padding-top: 0; }
  .proof-open { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
}

/* ===========================================================================
   7 - Der Download, as a split
   =========================================================================== */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 880px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
.dl-side { display: grid; gap: 24px; align-content: start; }
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.dl-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule-2); align-items: start; }
.dl-step-n { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--text-4); padding-top: 3px; }
.dl-steps h3 { font-size: var(--fs-lead); margin-bottom: 5px; }
.dl-steps p { font-size: var(--fs-md); color: var(--text-3); }