/* Anleitungsseite zum Excel-Scanner.
   Ergänzt app.css und verwendet dessen Farb- und Schriftvariablen. Geladen
   wird diese Datei nur hier — die Startseite soll nicht dafür bezahlen. */

.scan-seite{max-width:860px;margin:0 auto;padding:8px 0 24px}
.scan-seite h2{font-family:var(--f-display);font-size:clamp(1.3rem,3vw,1.7rem);
  margin:0 0 10px;line-height:1.15}
.scan-seite section{margin:0 0 48px}
.scan-seite p{margin:0 0 12px}
.scan-seite code{font-family:var(--f-mono);font-size:.86em;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;word-break:break-word}

/* ---------------------------------------------------------------- Kopf */

.scan-hero h1{font-family:var(--f-display);font-size:clamp(2rem,6vw,3.2rem);
  line-height:1.05;margin:4px 0 14px;text-wrap:balance}
.scan-lead{font-size:1.08rem;max-width:62ch}

.scan-zusagen{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.scan-zusagen li{background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:.92rem;box-shadow:var(--shadow)}
.scan-zusagen b{font-family:var(--f-display);display:block;margin-bottom:2px}

/* ------------------------------------------------------------ Ergebnis */

kbd{font-family:var(--f-mono);font-size:.82em;background:var(--surface-2);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:1px 6px;white-space:nowrap}

.scan-konsole{background:#0F2232;color:#E9EEF3;border-radius:10px;padding:16px 18px;
  overflow-x:auto;font-family:var(--f-mono);font-size:.82rem;line-height:1.6;margin:0 0 10px}
.scan-konsole code{background:none;padding:0;color:inherit;white-space:pre}

/* -------------------------------------------------------------- Schritte */

.schritte{list-style:none;counter-reset:schritt;padding:0;margin:0;
  display:grid;gap:28px}

.schritt{display:grid;gap:18px;grid-template-columns:150px 1fr;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;box-shadow:var(--shadow);position:relative;
  /* Ausgangslage der Einblendung; ohne JavaScript bleibt alles sichtbar,
     weil .sichtbar dann nie gesetzt wird — deshalb greift der Effekt erst,
     wenn das Modul ihn anschaltet (Klasse .bewegt am Vorfahren). */
  }
.bewegt .schritt{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bewegt .schritt.sichtbar{opacity:1;transform:none}

.schritt-nr{display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--brand);color:var(--brand-ink);
  font-family:var(--f-display);font-weight:800;font-size:.95rem;margin-bottom:8px}
.schritt-text h3{font-family:var(--f-display);font-size:1.2rem;margin:0 0 8px}
.schritt-text p{margin:0 0 10px}

.schritt-bild{display:grid;place-items:center;background:var(--surface-2);
  border-radius:10px;padding:10px;aspect-ratio:16/11}
.schritt-bild svg{width:100%;height:auto;display:block}
.s-flaeche{fill:var(--surface);stroke:var(--line);stroke-width:2}
.s-menue{fill:var(--surface);stroke:var(--brand);stroke-width:2}
.s-karte{fill:var(--surface);stroke:var(--line);stroke-width:2}
.s-strich{stroke:var(--muted);stroke-width:2.5;stroke-linecap:round;fill:none}
.s-pfeil{stroke:var(--brand);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;fill:none}
.s-markiert{fill:color-mix(in srgb,var(--brand) 16%,transparent)}
.s-punkt.rot{fill:var(--rot)}
.s-punkt.gelb{fill:var(--gelb)}
.s-punkt.gruen{fill:var(--gruen)}
.s-punkt.offen{fill:var(--line)}

/* Der Pfeil im ersten Bild zeigt nach unten und darf das auch tun. */
.bewegt .schritt.sichtbar #schritt-1 .s-pfeil,
.bewegt #schritt-1.sichtbar .s-pfeil{animation:scan-sinken 1.6s var(--ease) .3s 2}
@keyframes scan-sinken{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* ----------------------------------------------------- Aufklappbares */

.scan-detail,.scan-frage{border:1px solid var(--line);border-radius:10px;
  background:var(--surface);margin:0 0 10px;overflow:hidden}
.scan-detail>summary,.scan-frage>summary{cursor:pointer;padding:12px 14px;
  font-family:var(--f-display);font-size:.98rem;list-style:none;
  display:flex;align-items:center;gap:10px}
.scan-detail>summary::-webkit-details-marker,
.scan-frage>summary::-webkit-details-marker{display:none}
.scan-detail>summary::before,.scan-frage>summary::before{content:"+";
  font-family:var(--f-mono);color:var(--brand);font-size:1.1rem;
  transition:transform .25s var(--ease);display:inline-block;width:1ch}
.scan-detail[open]>summary::before,.scan-frage[open]>summary::before{content:"\2013";
  transform:none}
.scan-detail>summary:focus-visible,.scan-frage>summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px}
.scan-detail>p,.scan-detail>pre,.scan-frage>p{margin:0 14px 12px}
.scan-detail>p:first-of-type,.scan-frage>p:first-of-type{margin-top:4px}

.scan-befehl{background:#0F2232;color:#E9EEF3;border-radius:8px;padding:10px 12px;
  overflow-x:auto;font-family:var(--f-mono);font-size:.78rem;margin:0 14px 12px}
.scan-befehl code{background:none;padding:0;color:inherit;white-space:pre}

/* ------------------------------------------------------------ Herunterladen */

.scan-laden{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.scan-gesperrt{background:var(--surface-2);border:1px dashed var(--line);
  border-radius:8px;padding:12px 14px;font-size:.92rem;color:var(--muted);margin:0}
.scan-gesperrt a{color:var(--brand)}

/* --------------------------------------------------------------- Quelltext */

.scan-code{background:#0F2232;color:#E9EEF3;border-radius:10px;padding:16px;
  max-height:520px;overflow:auto;font-family:var(--f-mono);font-size:.74rem;
  line-height:1.55;margin:12px 0 0;tab-size:4}
.scan-code code{background:none;padding:0;color:inherit;white-space:pre}
.scan-code:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ----------------------------------------------------------------- Kontakt */

.scan-kontakt{border-top:1px solid var(--line);padding-top:20px}
.scan-kontakt p{color:var(--muted);font-size:.94rem}

/* ------------------------------------------------------------------ Mobil */

@media (max-width:640px){
  .schritt{grid-template-columns:1fr;gap:14px}
  .schritt-bild{max-width:200px}
}

/* Wer Bewegung abbestellt hat, bekommt keine. Inhalte verstecken wir dabei
   nie — die Einblendung ist Zierde, nicht Aufbau. */
@media (prefers-reduced-motion:reduce){
  .bewegt .schritt{opacity:1;transform:none;transition:none}
  .bewegt .schritt.sichtbar .s-pfeil{animation:none}
}