/* Darstellung der Handlungsanleitungen.
   Eigene Datei, damit style.css unangetastet bleibt. */

.anleitung-liste{ display:grid; gap:12px; margin-top:16px; }

.anleitung-karte{
  display:block; padding:14px 16px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
.anleitung-karte:hover{ border-color:var(--thw-blue); }
.anleitung-karte h2{ margin:0 0 4px; font-size:17px; color:var(--ueberschrift, var(--navy)); }
.anleitung-karte p{ margin:0; color:var(--ink-soft); font-size:14px; }

.anleitung-text{ max-width:70ch; line-height:1.55; }
.anleitung-text h2{ margin-top:28px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.anleitung-text h3{ margin-top:20px; }
.anleitung-text table{ border-collapse:collapse; width:100%; margin:12px 0; }
.anleitung-text th, .anleitung-text td{
  border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top;
}
.anleitung-text th{ background:var(--flaeche-weich, #EFF3F5); }
.anleitung-text code{
  background:var(--flaeche-weich, #EFF3F5); padding:1px 5px; border-radius:4px; font-size:90%;
}
.anleitung-text hr{ border:0; border-top:1px solid var(--line); margin:24px 0; }
.anleitung-roh{ white-space:pre-wrap; font-family:inherit; }

/* Auf schmalen Bildschirmen duerfen breite Tabellen seitlich scrollen */
@media (max-width:780px){
  .anleitung-text table{ display:block; overflow-x:auto; }
}

/* ---------- Paket 83: nach Rolle, Suche, "In 30 Sekunden", aufklappbare Abschnitte ---------- */
.anleitung-suche{ display:flex; flex-direction:column; gap:4px; max-width:420px; margin-top:14px; font-weight:600; }
.anleitung-suche input{ font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.anleitung-leer{ color:var(--ink-soft); }
.anleitung-gruppe{ margin-top:20px; }
.anleitung-gruppe > summary{ cursor:pointer; list-style:none; }
.anleitung-gruppe > summary::-webkit-details-marker{ display:none; }
.anleitung-gruppe > summary h2{ display:inline; font-size:19px; color:var(--ueberschrift, var(--navy)); }
.anleitung-gruppe > summary h2::before{ content:"▸ "; color:var(--ink-soft); }
.anleitung-gruppe[open] > summary h2::before{ content:"▾ "; }
.anleitung-gruppe > summary small{ font-weight:400; color:var(--ink-soft); font-size:14px; }
.anleitung-gruppe .anleitung-liste{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.anleitung-karte h3{ margin:0 0 4px; font-size:17px; color:var(--ueberschrift, var(--navy)); }
.anleitung-gruppe-fuehrung .anleitung-karte{ border-left:4px solid var(--thw-blue, #0e6ba8); }
.anleitung-gruppe-betrieb .anleitung-karte{ border-left:4px solid var(--ink-soft, #5b6670); }

.anleitung-kurz{
  margin:12px 0 18px; padding:10px 16px 6px; border-radius:10px;
  background:var(--flaeche-weich, #EFF3F5); border-left:4px solid var(--thw-blue, #0e6ba8);
}
.anleitung-text .anleitung-kurz h2{ margin-top:4px; border:0; font-size:18px; }
.anleitung-kurz ol{ padding-left:22px; }
.anleitung-kurz li{ margin:4px 0; }
.anleitung-teil{ border-top:1px solid var(--line); }
.anleitung-teil > summary{ cursor:pointer; list-style:none; padding:10px 0; }
.anleitung-teil > summary::-webkit-details-marker{ display:none; }
.anleitung-text .anleitung-teil > summary h2{ display:inline; margin:0; border:0; padding:0; font-size:17px; }
.anleitung-teil > summary h2::before{ content:"▸ "; color:var(--ink-soft); }
.anleitung-teil[open] > summary h2::before{ content:"▾ "; }
.anleitung-teil-inhalt{ padding-bottom:12px; }
.anleitung-knoepfe{ margin-top:16px; }
@media print{
  .anleitung-teil > summary h2::before, .anleitung-knoepfe, .hint{ display:none; }
}
.anleitung-karte[hidden], .anleitung-gruppe[hidden]{ display:none; }