/* © 2026 Martin Scherer · Fachwerte (https://www.fachwerte.de) · Alle Rechte vorbehalten.
   Steckdosenplaner — Original: https://www.fachwerte.de/tools/steckdosenplaner/
   Anleitung mit Themenmenü, aufklappbaren Themen und mitlaufender Leiste
   (25.09.2026). Kennung FWSP-2026-09-01 */

/* ─── Themenmenü am Anfang der Anleitung ─────────────────────────────── */
.ep-anl-menue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: .9rem 1.4rem;
    margin: 1.2rem 0 1.8rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--fw-border);
    border-radius: .8rem;
    background: var(--fw-surface, #fff);
    scroll-margin-top: 90px;
}
.ep-anl-menue-titel {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fw-muted);
}
.ep-anl-menue ul { list-style: none; margin: 0; padding: 0; }
.ep-anl-menue li { margin: 0; padding: 0; }
.ep-anl-menue a {
    display: block;
    padding: .28rem 0;
    color: var(--fw-text);
    text-decoration: none;
    line-height: 1.35;
    font-size: .95rem;
}
.ep-anl-menue a:hover, .ep-anl-menue a:focus-visible { color: #0057b8; text-decoration: underline; }

/* ─── Mitlaufende Leiste: nur innerhalb der Anleitung ────────────────── */
.ep-anl-rahmen { position: relative; }
.ep-anl-leiste {
    position: sticky;
    top: 64px;                 /* unter der Seitenkopfleiste */
    z-index: 5;
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    padding: .45rem 0;
    background: var(--fw-bg, #fff);
    border-bottom: 1px solid var(--fw-border);
    scrollbar-width: none;
}
.ep-anl-leiste::-webkit-scrollbar { display: none; }
.ep-anl-leiste a {
    flex: none;
    padding: .3rem .7rem;
    border: 1px solid var(--fw-border);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--fw-text);
    text-decoration: none;
    white-space: nowrap;
    background: var(--fw-surface, #fff);
}
.ep-anl-leiste a:hover { border-color: #0057b8; color: #0057b8; }
.ep-anl-leiste a.ist-aktiv { background: #0057b8; border-color: #0057b8; color: #fff; }
.ep-anl-leiste .ep-anl-leiste-menue { margin-left: auto; border-style: dashed; }

/* ─── Gruppen und Themen ─────────────────────────────────────────────── */
.ep-anl-gruppe { margin: 0 0 1.6rem; scroll-margin-top: 120px; }
.ep-anl-gruppe-titel {
    margin: 1.4rem 0 .4rem;
    font-size: 1.15rem;
}
details.ep-anl { scroll-margin-top: 120px; }
details.ep-anl > summary { flex-wrap: wrap; row-gap: .1rem; }
details.ep-anl > summary .ep-anl-titel {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.02rem;
    font-weight: 650;
}
details.ep-anl > summary:hover .ep-anl-titel { color: #0057b8; }
details.ep-anl > summary .ep-anl-kurz {
    order: 3;
    flex-basis: 100%;
    font-size: .84rem;
    color: var(--fw-muted);
}
details.ep-anl > summary .fw-klapp-plus { order: 2; }
details.ep-anl[open] > summary .ep-anl-kurz { display: none; }
details.ep-anl .fw-klapp-inhalt { padding-bottom: .6rem; }
details.ep-anl.ist-blitz > summary { animation: ep-anl-blitz 1.4s ease-out; }
@keyframes ep-anl-blitz {
    0% { background: rgba(0, 87, 184, .14); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    details.ep-anl.ist-blitz > summary { animation: none; }
}
.ep-anl-hilfe { margin-top: .2rem; }

/* Beleuchtung: Übersichtsbild der sechs Muster und die Musterliste */
.ep-anl-muster { list-style: none; padding: 0; margin: .6rem 0 1rem; }
.ep-anl-muster li { margin: 0 0 .45rem; padding-left: 2.1rem; position: relative; }
.ep-anl-muster li b.ep-anl-nr {
    position: absolute; left: 0; top: .05rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0057b8; color: #fff; font-size: .8rem;
}
.ep-anl-tabelle { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .92rem; }
.ep-anl-tabelle th, .ep-anl-tabelle td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--fw-border); vertical-align: top; }
.ep-anl-tabelle th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fw-muted); }
.ep-anl-tabelle kbd { font-size: .82rem; }

/* ─── Aufklappmenü oben auf der Seite (Studio-Kopf, „So funktioniert’s“) ─ */
.ep-anl-pop {
    position: absolute;
    z-index: 60;
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(70vh, 34rem);
    overflow: auto;
    padding: .9rem 1rem;
    background: var(--fw-surface, #fff);
    color: var(--fw-text);
    border: 1px solid var(--fw-border);
    border-radius: .8rem;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .22);
    text-align: left;
}
.ep-anl-pop[hidden] { display: none; }
.ep-anl-pop .ep-anl-menue { margin: 0; padding: 0; border: 0; background: none; }
.ep-anl-pop-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .5rem; font-weight: 650; }
.ep-anl-pop-kopf a { font-size: .85rem; font-weight: 500; }
.ep-anl-knopf { cursor: pointer; }
.ep-anl-knopf[aria-expanded="true"] { text-decoration: underline; }

/* Die allgemeinen Textstile (.fw-prose h3/ul/li) sind stärker — hier gezielt
   zurücknehmen, damit das Menü kompakt bleibt. */
.fw-prose .ep-anl-menue { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.fw-prose .ep-anl-menue-titel, .ep-anl-pop .ep-anl-menue-titel { margin: 0 0 .35rem; line-height: 1.3; }
.fw-prose .ep-anl-menue ul, .fw-prose .ep-anl-menue li { margin: 0; padding: 0; }
.fw-prose .ep-anl-menue li::before, .fw-prose .ep-anl-menue li::marker { content: none; }
.fw-prose .ep-anl-menue a { font-size: .92rem; padding: .22rem 0; }
.fw-prose .ep-anl-gruppe-titel { margin: 1.6rem 0 .5rem; }
.fw-prose details.ep-anl > summary .ep-anl-titel { margin: 0; line-height: 1.35; }

/* ─── Größe (Martin, 25.09.2026): am PC groß, am Handy schmal ───────────
   Der Fließtext der Seite steht in einer Spalte von 72 Zeichen – darin
   schrumpften die 1100 px breiten Animationen auf gut 600 px. Menü und
   Themen dürfen deshalb auf breiten Bildschirmen aus der Spalte heraus bis
   1100 px wachsen (die echte Auflösung der Animationen); der Text bleibt in
   angenehmer Zeilenlänge, aber in normaler Lesegröße. */
@media (min-width: 900px) {
    .fw-prose .ep-anl-breit {
        width: min(1100px, calc(100vw - 3rem));
        margin-left: calc(50% - min(550px, 50vw - 1.5rem));
        margin-right: 0;
    }
}
.fw-prose details.ep-anl .fw-klapp-inhalt p,
.fw-prose details.ep-anl .fw-klapp-inhalt li,
.fw-prose details.ep-anl .fw-klapp-inhalt td {
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 80ch;
}
.fw-prose details.ep-anl > summary .ep-anl-titel { font-size: 1.12rem; }
.fw-prose details.ep-anl > summary .ep-anl-kurz { font-size: .9rem; }
.fw-prose .ep-anl-gruppe-titel { font-size: 1.3rem; }
.fw-prose .ep-anl-menue a { font-size: 1rem; }
.fw-prose .ep-anl-leiste a { font-size: .9rem; }
.fw-prose details.ep-anl .ep-anleitung-bild { margin: 1.2rem 0 1.6rem; }
.fw-prose details.ep-anl .ep-anleitung-bild figcaption { font-size: .92rem; max-width: 80ch; }
.ep-anleitung-bild img { cursor: zoom-in; }

/* Großansicht: Klick auf eine Animation zeigt sie fensterfüllend. */
.ep-anl-gross {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1rem 1rem;
    background: rgba(10, 18, 30, .86);
    cursor: zoom-out;
}
.ep-anl-gross[hidden] { display: none; }
.ep-anl-gross img {
    max-width: min(96vw, 1650px);
    max-height: 90vh;
    width: auto; height: auto;
    border-radius: .5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    background: #fff;
}
.ep-anl-gross-zu {
    position: absolute; top: .7rem; right: .9rem;
    font: inherit; font-size: 1.6rem; line-height: 1;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
}
.ep-anl-gross-zu:hover { background: rgba(255, 255, 255, .28); }

/* Beim Zuklappen eines Themas hält js/65 die angeklickte Überschrift selbst
   an ihrer Stelle; Chromes eigener Scroll-Anker käme sonst obendrauf. */
.ep-anl-rahmen { overflow-anchor: none; }