/* =========================================================
   clubseite.ch – Anleitungen pro Rolle /anleitungen/ (hell), Welle 31
   Wird NACH start.css und funktionen.css geladen; nur deren Tokens.
   ========================================================= */
.a-hero .wrap{padding-bottom:36px}
.a-wer{color:var(--cs-muted);max-width:720px}
.a-hero button.btn{font:inherit;cursor:pointer}

/* Erste Schritte: drei grosse Nummern */
.a-drei{list-style:none;counter-reset:a;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.a-drei li{counter-increment:a;background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;padding:20px 20px 20px 72px;position:relative;color:var(--cs-ink-2);min-height:88px}
.a-drei li::before{content:counter(a);position:absolute;left:20px;top:18px;width:36px;height:36px;border-radius:50%;background:var(--cs-green);color:var(--cs-on-green);font-weight:700;display:flex;align-items:center;justify-content:center}

.a-toc{margin-bottom:24px}

/* Aufgaben */
.a-liste{display:flex;flex-direction:column;gap:20px}
.a-aufgabe{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;scroll-margin-top:90px}
.a-nr{font-size:14px;font-weight:600;color:var(--cs-green-dark);text-transform:uppercase;letter-spacing:.04em;margin:0}
.a-aufgabe h3{font-family:var(--cs-body);text-transform:none;font-size:22px;font-weight:700;line-height:1.25;margin:4px 0 12px}
.a-schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.a-schritte li{counter-increment:s;position:relative;padding-left:40px;color:var(--cs-ink-2);min-height:28px}
.a-schritte li::before{content:counter(s);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--cs-green-soft);color:var(--cs-green-dark);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.a-bild{margin:0}
.a-bild img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--cs-line);box-shadow:0 6px 18px rgba(13,18,16,.08);background:var(--cs-bg)}
.a-bild figcaption{font-size:13px;color:var(--cs-muted);margin-top:6px}

@media (max-width:900px){
  .a-drei{grid-template-columns:1fr}
  .a-aufgabe{grid-template-columns:1fr;padding:20px}
  .a-bild{max-width:340px}
}
@media (max-width:420px){
  .a-aufgabe{padding:16px}
  .a-bild{max-width:none}
}

/* Druck / PDF (A4) */
@page{size:A4;margin:14mm 14mm 16mm}
@media print{
  .skip,.top,.crumb,.foot,.a-noprint,.f-toc{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec,.f-hero .wrap{padding-top:0!important;padding-bottom:10px!important}
  .f-hero{border:0}
  .f-hero h1{font-size:28pt}
  .a-drei{grid-template-columns:repeat(3,1fr);gap:8px}
  .a-drei li{padding:10px 10px 10px 48px;min-height:0}
  .a-drei li::before{left:10px;top:10px;width:28px;height:28px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .a-aufgabe{grid-template-columns:1fr 52mm;gap:10px;padding:10px 12px;border-radius:8px;break-inside:avoid;page-break-inside:avoid}
  .a-aufgabe h3{font-size:13pt;margin:2px 0 6px}
  .a-schritte li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .a-bild img{box-shadow:none;max-height:85mm;object-fit:cover;object-position:top}
  .a-bild figcaption{display:none}
  a{color:#000;text-decoration:none}
}