/* Prüfprotokoll DIN VDE 0100-600 – Anleitung (Welle 2, 27.09.2026)
   Themenmenü, aufklappbare Themen, Animationen in Aufnahmebreite (1100 px),
   Großansicht, Aufklappmenü „Anleitung“ oben auf der Seite.
   Vorbild: tools/steckdosenplaner/anleitung.css (.ep-anl-breit).
   Achtung: die Seite setzt html { font-size: 9pt } – deshalb px statt rem. */

/* ─── Karte: zugeklappt so breit wie das Blatt, aufgeklappt bis 1100 px Inhalt ─── */
.anleitung[open] { width: min(1152px, calc(100vw - 32px)); max-width: none; }
.anleitung > summary .anl-title { font-size: 16px; }
.anleitung > summary .anl-sub { font-size: 13px; }
.anleitung .anl-body { padding: 10px 24px 28px; font-size: 16px; line-height: 1.65; color: #1f2937; }
.anleitung .anl-body p, .anleitung .anl-body li { font-size: 16px; line-height: 1.65; color: #1f2937; max-width: 80ch; }
.anleitung .anl-body p + p { margin-top: 10px; }
.anleitung .anl-body ul, .anleitung .anl-body ol { padding-left: 24px; margin: 8px 0 12px; }
.anleitung .anl-body li { margin: 5px 0; }
.anleitung .anl-body li::marker { color: #64748b; }
.anleitung .anl-body a { color: #1e40af; }
.anleitung .anl-body code { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }
.anleitung .anl-body pre { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 14px; margin: 10px 0 14px; overflow-x: auto; max-width: 80ch; white-space: pre; }
.anleitung .anl-body sub, .anl-pop sub, .anl-schnell sub { font-size: 72%; line-height: 0; vertical-align: -0.28em; }
.anleitung .anl-body kbd { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fff; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; color: #111827; white-space: nowrap; }
.anleitung .anl-lead { font-size: 17px; max-width: 80ch; margin-top: 6px; }
.anleitung .anl-body h5 { font-size: 16.5px; font-weight: 700; color: #1e3a8a; margin: 22px 0 6px; scroll-margin-top: 150px; }
.anleitung .anl-body h5:first-child { margin-top: 8px; }
.anleitung .anl-note { font-size: 15px; color: #374151; background: #f8fafc; border-left: 3px solid #93c5fd; padding: 9px 14px; margin: 12px 0; max-width: 80ch; border-radius: 0 6px 6px 0; }
.anleitung .anl-warn { font-size: 15px; color: #7c2d12; background: #fff7ed; border-left: 3px solid #f97316; padding: 9px 14px; margin: 12px 0; max-width: 80ch; border-radius: 0 6px 6px 0; }
.anleitung .anl-gut { font-size: 15px; color: #14532d; background: #f0fdf4; border-left: 3px solid #22c55e; padding: 9px 14px; margin: 12px 0; max-width: 80ch; border-radius: 0 6px 6px 0; }

/* ─── Themenmenü am Anfang der Anleitung ─── */
.anl-menue {
  display: block; columns: 230px 4; column-gap: 28px;
  margin: 18px 0 26px; padding: 16px 20px 6px; border: 1px solid #dbe3ee; border-radius: 12px; background: #f8fafc;
  scroll-margin-top: 150px;
}
.anl-menue > div { break-inside: avoid; margin: 0 0 14px; }
.anleitung .anl-menue-titel, .anl-pop .anl-menue-titel { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; line-height: 1.3; }
.anleitung .anl-menue ul, .anl-pop .anl-menue ul { list-style: none; margin: 0; padding: 0; }
.anleitung .anl-menue li, .anl-pop .anl-menue li { margin: 0; padding: 0; max-width: none; }
.anleitung .anl-menue a, .anl-pop .anl-menue a { display: block; padding: 4px 0; color: #111827; text-decoration: none; font-size: 15.5px; line-height: 1.35; }
.anleitung .anl-menue a:hover, .anleitung .anl-menue a:focus-visible, .anl-pop .anl-menue a:hover, .anl-pop .anl-menue a:focus-visible { color: #1e40af; text-decoration: underline; }
.anl-menue-anim { font-size: 11px; color: #1e40af; margin-left: 3px; vertical-align: 1px; }
.anleitung .anl-body .anl-menue-legende, .anl-pop .anl-menue-legende { column-span: all; font-size: 12.5px; color: #64748b; margin: 0 0 10px; max-width: none; }

/* ─── Gruppen und Themen (eine Linie je Thema, Plus-Knopf wie im Steckdosenplaner) ─── */
.anl-gruppe { margin: 0 0 26px; scroll-margin-top: 150px; }
.anleitung .anl-gruppe-titel { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin: 26px 0 4px; }
details.anl-thema { border-bottom: 1px solid #e5e7eb; scroll-margin-top: 150px; overflow-anchor: none; }
.anl-gruppe-titel + details.anl-thema { border-top: 1px solid #e5e7eb; }
details.anl-thema > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 13px 0; cursor: pointer; list-style: none; border-radius: 6px; }
details.anl-thema > summary::-webkit-details-marker { display: none; }
details.anl-thema > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.anleitung .anl-thema-titel { grid-column: 1; grid-row: 1; margin: 0; font-size: 18px; font-weight: 650; color: #111827; line-height: 1.35; }
details.anl-thema > summary:hover .anl-thema-titel { color: #1e40af; }
.anl-thema-kurz { grid-column: 1; grid-row: 2; font-size: 14.5px; color: #6b7280; line-height: 1.4; }
details.anl-thema[open] > summary .anl-thema-kurz { display: none; }
.anl-plus { grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 50%; position: relative; color: #64748b; }
.anl-plus::before, .anl-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.anl-plus::before { width: 12px; height: 2px; }
.anl-plus::after { width: 2px; height: 12px; transition: transform .15s ease; }
details.anl-thema[open] > summary .anl-plus::after { transform: translate(-50%, -50%) scaleY(0); }
details.anl-thema[open] > summary .anl-plus, details.anl-thema > summary:hover .anl-plus { color: #1e40af; border-color: #1e40af; }
details.anl-thema[open] > summary .anl-thema-titel { color: #1e3a8a; }
.anl-thema-inhalt { padding: 2px 0 24px; }
.anl-thema-anim { display: inline-block; font-size: 12px; font-weight: 600; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
details.anl-thema.ist-blitz > summary { animation: anl-blitz 1.4s ease-out; }
@keyframes anl-blitz { 0% { background: rgba(30, 64, 175, .14); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { details.anl-thema.ist-blitz > summary { animation: none; } }

/* ─── Tabellen ─── */
.anleitung .anl-tabelle { overflow-x: auto; margin: 10px 0 16px; max-width: 880px; }
.anleitung .anl-tabelle.anl-breit { max-width: none; }
.anleitung .anl-tabelle table { border-collapse: collapse; width: auto; max-width: 100%; min-width: min(100%, 460px); font-size: 15px; }
.anleitung .anl-tabelle.anl-breit table { width: 100%; }
.anleitung .anl-tabelle th, .anleitung .anl-tabelle td { border: 1px solid #e5e7eb; padding: 7px 10px; text-align: left; vertical-align: top; line-height: 1.45; }
.anleitung .anl-tabelle th { background: #f1f5f9; font-weight: 650; color: #1f2937; }
.anleitung .anl-tabelle td.z, .anleitung .anl-tabelle th.z { text-align: right; font-variant-numeric: tabular-nums; }
.anleitung .anl-tabelle td.z { white-space: nowrap; }
.anleitung .anl-tabelle caption { caption-side: top; text-align: left; font-size: 14px; color: #64748b; padding: 0 0 6px; }
.anl-k { display: inline-block; min-width: 22px; text-align: center; font-weight: 700; font-size: 13px; border-radius: 4px; padding: 1px 5px; }
.anl-k.s { background: #fee2e2; color: #991b1b; } .anl-k.m { background: #fef3c7; color: #92400e; }
.anl-k.e { background: #e0f2fe; color: #075985; } .anl-k.b { background: #dcfce7; color: #166534; }
.anl-st { display: inline-block; min-width: 24px; text-align: center; font-weight: 700; border-radius: 4px; padding: 0 5px; }
.anl-st.io { background: #dcfce7; color: #166534; } .anl-st.nio { background: #fee2e2; color: #991b1b; }
.anl-st.warn { background: #fef9c3; color: #854d0e; } .anl-st.offen { background: #f1f5f9; color: #64748b; }

/* ─── Kurzüberblick-Schritte ─── */
.anl-schritte { list-style: none !important; padding: 0 !important; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 14px; max-width: none !important; margin: 14px 0 18px !important; }
.anleitung .anl-schritte li { counter-increment: s; position: relative; margin: 0; padding: 12px 14px 12px 50px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 15.5px; max-width: none; }
.anl-schritte li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: #1e40af; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.anl-schritte li strong { display: block; color: #111827; }

/* ─── Animationen: Aufnahmebreite 1100 px, Klick = Großansicht ─── */
.anleitung figure.anl-bild { margin: 22px 0 26px; max-width: 1100px; }
.anleitung figure.anl-bild picture { display: block; }
.anleitung figure.anl-bild img { display: block; width: 100%; max-width: 1100px; height: auto; aspect-ratio: 1100 / 688; border: 1px solid #d1d5db; border-radius: 8px; background: #f3f4f6; cursor: zoom-in; box-shadow: 0 4px 16px rgba(15, 23, 42, .08); }
.anleitung figure.anl-bild figcaption { font-size: 15px; color: #4b5563; margin-top: 9px; max-width: 80ch; line-height: 1.5; }
.anleitung figure.anl-bild figcaption .anl-gross-tipp { color: #64748b; font-size: 13.5px; white-space: nowrap; }

/* ─── Kleine Rechner ─── */
.anleitung .anl-rechner { background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; padding: 14px 16px; margin: 14px 0 18px; max-width: 880px; scroll-margin-top: 150px; }
.anleitung .anl-rechner .vr-head { font-size: 16px; margin-bottom: 10px; }
.anleitung .anl-rechner .vr-row { font-size: 15px; gap: 10px 18px; }
.anleitung .anl-rechner .vr-row input, .anleitung .anl-rechner .vr-row select { font-size: 15px; padding: 6px 8px; min-height: 36px; }
.anleitung .anl-rechner .vr-row input.zs-schutz { width: 110px; }
.anleitung .anl-rechner .vr-out { font-size: 16px; }
.anleitung .anl-rechner .vr-klasse { font-size: 14px !important; line-height: 1.5; margin-top: 8px; max-width: none; }
.anleitung .anl-rechner .vr-out.io { color: #166534; } .anleitung .anl-rechner .vr-out.nio { color: #b91c1c; }

/* ─── Beispiel ─── */
.anleitung .anl-beispiel { max-width: 880px; padding: 14px 18px; margin: 14px 0; }
.anleitung .anl-beispiel table { font-size: 15px; }
.anleitung .anl-beispiel td { padding: 6px 8px; line-height: 1.5; }
.anleitung .anl-beispiel .erg { font-size: 15px; padding: 9px 12px; margin-top: 10px; }

/* ─── FAQ ─── */
.anleitung .anl-faqs { max-width: 880px; }
.anleitung .anl-faqs details { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; padding: 0; background: #fff; scroll-margin-top: 150px; }
.anleitung .anl-faqs summary { font-size: 16px; font-weight: 600; color: #111827; cursor: pointer; padding: 11px 14px; list-style-position: inside; }
.anleitung .anl-faqs summary:hover { color: #1e40af; }
.anleitung .anl-faqs details[open] summary { border-bottom: 1px solid #f1f5f9; }
.anleitung .anl-faqs p { font-size: 15.5px; margin: 0; padding: 10px 14px 12px; }
.anleitung .anl-quellen li { font-size: 14.5px; color: #374151; }
.anleitung .anl-stand { font-size: 14px; color: #64748b; margin-top: 18px; }

/* ─── Seitenkopf: Themen-Schnellzugriff unter der H1 ─── */
.anl-schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; margin-top: 10px; font-size: 13px; color: #4b5563; }
.anl-schnell-titel { font-weight: 700; color: #374151; margin-right: 2px; white-space: nowrap; }
.seitenkopf .anl-schnell a, .anl-schnell button {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: #fff; color: #1f2937; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.seitenkopf .anl-schnell a:hover, .seitenkopf .anl-schnell a:focus-visible, .anl-schnell button:hover, .anl-schnell button:focus-visible { border-color: #1e40af; color: #1e40af; text-decoration: none; }
.anl-schnell button.anl-schnell-alle { border-style: dashed; color: #1e40af; font-weight: 600; }

/* ─── Aufklappmenü oben (📖-Knopf, Seitenkopf) ─── */
.anl-pop {
  position: absolute; z-index: 1200; width: min(1000px, calc(100vw - 24px)); max-height: min(72vh, 620px); overflow: auto;
  padding: 14px 16px; background: #fff; color: #111827; border: 1px solid #d1d5db; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .22); font-size: 15px; text-align: left;
}
.anl-pop[hidden] { display: none; }
.anl-pop .anl-menue { margin: 0; padding: 0; border: 0; background: none; columns: 210px 4; }
.anl-pop-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.anl-pop-kopf a { font-size: 13.5px; font-weight: 500; color: #1e40af; }
.anl-knopf[aria-expanded="true"] { box-shadow: 0 0 0 2px #93c5fd; }

/* ─── Großansicht ─── */
.anl-gross { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 44px 12px 12px; background: rgba(10, 18, 30, .88); cursor: zoom-out; }
.anl-gross[hidden] { display: none; }
.anl-gross img { max-width: none; max-height: none; height: auto; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #fff; }
.anl-gross-zu { position: absolute; top: 10px; right: 14px; font: inherit; font-size: 26px; line-height: 1; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.anl-gross-zu:hover, .anl-gross-zu:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.anl-gross-text { position: absolute; left: 16px; top: 16px; right: 70px; color: #e2e8f0; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Schmale Bildschirme ─── */
@media (max-width: 800px) {
  .anleitung[open] { width: auto; }
  .anleitung .anl-body { padding: 8px 14px 22px; }
  .anl-menue { columns: 2; padding: 12px 14px 2px; column-gap: 18px; }
  .anleitung .anl-tabelle table { font-size: 14px; }
}
@media (max-width: 600px) {
  .anleitung .anl-body, .anleitung .anl-body p, .anleitung .anl-body li { font-size: 15.5px; }
  .anleitung .anl-lead { font-size: 16px; }
  .anl-menue { columns: 1; }
  .anleitung .anl-thema-titel { font-size: 17px; }
  .anl-schritte { grid-template-columns: 1fr; }
  .anleitung .anl-tabelle th, .anleitung .anl-tabelle td { padding: 6px 7px; }
  .anl-schnell { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .anl-schnell::-webkit-scrollbar { display: none; }
  .anleitung .anl-rechner .vr-row { flex-direction: column; align-items: flex-start; }
  .anl-gross { padding: 52px 6px 6px; }
}

@media print {
  .anl-pop, .anl-gross, .anl-schnell { display: none !important; }
}