/* Die fünf Sicherheitsregeln – animierte Karten (Komponente für Fehlersuche, Startseite, Formelsammlung).
   Farben über Variablen der Seite mit Rückfall; Strom rot, Warn gelb, erledigt grün; Hell/Dunkel über data-theme. */
.r5{--r5-ink:var(--ink,#0a1540);--r5-mut:var(--muted,#4f5a7d);--r5-bg:var(--raised,#fff);--r5-line:var(--line,#dbe1ee);--r5-blau:var(--blue,#2f4de6);
  --r5-ok:#2f7a45;--r5-ok-bg:#e7f6ec;--r5-warn:#e0a21c;--r5-strom:#d1453b;--r5-papier:#f3f5fa;--r5-dunkel:#1b2740;font-family:inherit;color:var(--r5-ink)}
:root[data-theme="dark"] .r5{--r5-ok:#6fd08a;--r5-ok-bg:rgba(111,208,138,.12);--r5-papier:#16224f;--r5-dunkel:#0a1540;--r5-line:#2b3a78;--r5-strom:#ef7a72}
.r5-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 14px}
.r5-steuer{display:flex;gap:8px;flex-wrap:wrap}
.r5-knopf{border:1.5px solid var(--r5-line);background:var(--r5-bg);color:var(--r5-ink);padding:8px 14px;border-radius:99px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.r5-knopf:hover{border-color:var(--r5-blau)}.r5-knopf.haupt{background:var(--r5-blau);border-color:var(--r5-blau);color:#fff}
.r5-knopf svg{width:15px;height:15px;fill:currentColor}
.r5-fortschritt{height:6px;border-radius:99px;background:var(--r5-line);overflow:hidden;margin:0 0 16px}.r5-fortschritt i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--r5-blau),var(--r5-ok));transition:width .5s ease}
.r5-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0;counter-reset:r5}
.r5-karte{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;gap:6px;background:var(--r5-bg);border:2px solid var(--r5-line);border-radius:20px;padding:14px 12px 14px;overflow:hidden;cursor:pointer;
  transition:border-color .4s,box-shadow .4s,transform .25s,background .4s;text-align:center;-webkit-tap-highlight-color:transparent}
.r5-karte:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,21,64,.12)}
.r5-karte.fertig{border-color:var(--r5-ok);background:linear-gradient(180deg,var(--r5-ok-bg),var(--r5-bg) 62%)}
.r5-karte.aktiv{border-color:var(--r5-blau);box-shadow:0 0 0 4px rgba(47,77,230,.18)}
.r5-nr{width:34px;height:34px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--r5-dunkel);color:#fff;font-weight:800;font-size:17px;transition:background .4s,transform .4s}
.r5-karte.fertig .r5-nr{background:var(--r5-ok);transform:scale(1.08)}
.r5-bild{width:100%;height:auto;display:block;max-width:190px;margin:0 auto}
.r5-titel{margin:0;font-size:16px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.r5-text{margin:0;font-size:13.5px;line-height:1.45;color:var(--r5-mut)}
.r5-haken{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--r5-ok);display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1) .25s}
.r5-karte.fertig .r5-haken{transform:scale(1)}.r5-haken svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r5-hinweis{margin:14px 0 0;font-size:13.5px;color:var(--r5-mut)}
/* ---- gemeinsame Bildteile ---- */
.r5-bild .korper{fill:var(--r5-papier);stroke:var(--r5-ink);stroke-width:2.4}
.r5-bild .dunkel{fill:var(--r5-dunkel)}.r5-bild text{font-family:inherit;fill:var(--r5-ink);font-weight:800}
.r5-bild .draht{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke .4s}
/* 1 freischalten */
.r5-hebel{transform:translateY(-18px);transition:transform .45s cubic-bezier(.5,0,.2,1.4)}.fertig .r5-hebel{transform:translateY(16px)}
.r5-led{fill:#2fbd5f;transition:fill .3s}.fertig .r5-led{fill:#8b94a8}
.r5-draht-1{stroke:var(--r5-strom);stroke-dasharray:3 11;animation:r5fluss 1s linear infinite;transition:stroke .4s}.fertig .r5-draht-1{stroke:#8b94a8;animation:none;stroke-dasharray:none}
@keyframes r5fluss{to{stroke-dashoffset:-14}}
.r5-funke{fill:#ffc83d;opacity:0}.r5-karte:not(.fertig) .r5-funke{animation:r5funke 2.4s steps(1) infinite}@keyframes r5funke{0%,92%{opacity:0}94%,98%{opacity:1}}
/* 2 sichern */
.r5-buegel{transform:translateY(-15px);transition:transform .45s cubic-bezier(.3,1.5,.5,1) .15s}.fertig .r5-buegel{transform:translateY(0)}
.r5-schild{transform-origin:100px 58px;transform:rotate(0) scale(0);transition:transform .45s ease .3s}.fertig .r5-schild{transform:rotate(0) scale(1);animation:r5pendel 2.6s ease-in-out .9s infinite}
@keyframes r5pendel{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* 3 feststellen */
.r5-pol{fill:transparent;stroke:#8b94a8;stroke-width:2;transition:fill .25s,stroke .25s}.fertig .r5-pol{fill:var(--r5-ok);stroke:var(--r5-ok)}
.fertig .r5-pol:nth-of-type(1){transition-delay:.15s}.fertig .r5-pol:nth-of-type(2){transition-delay:.3s}.fertig .r5-pol:nth-of-type(3){transition-delay:.45s}.fertig .r5-pol:nth-of-type(4){transition-delay:.6s}.fertig .r5-pol:nth-of-type(5){transition-delay:.75s}
.r5-anz{fill:var(--r5-strom);transition:fill .3s .8s}.fertig .r5-anz{fill:var(--r5-ok)}.r5-v1,.r5-v0{transition:opacity .2s .8s}.r5-v0{opacity:0}.fertig .r5-v1{opacity:0}.fertig .r5-v0{opacity:1}
/* 4 erden */
.r5-leiter{stroke:var(--r5-ink);stroke-width:3;transition:stroke .4s .5s}.fertig .r5-leiter{stroke:var(--r5-ok)}
.r5-seil{fill:none;stroke:#2f7a45;stroke-width:4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .8s ease .1s}.fertig .r5-seil{stroke-dashoffset:0}
.r5-klemme{fill:#ffc83d;stroke:var(--r5-ink);stroke-width:1.6;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.7,.5,1)}.fertig .r5-klemme{transform:scale(1)}
.fertig .r5-klemme:nth-of-type(1){transition-delay:.55s}.fertig .r5-klemme:nth-of-type(2){transition-delay:.7s}.fertig .r5-klemme:nth-of-type(3){transition-delay:.85s}
/* 5 abdecken */
.r5-platte{transform:translateX(-62px);transition:transform .6s cubic-bezier(.3,0,.2,1) .1s}.fertig .r5-platte{transform:translateX(0)}
.r5-band{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .7s ease .5s}.fertig .r5-band{stroke-dashoffset:0}
.r5-dreieck{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1) .9s}.fertig .r5-dreieck{transform:scale(1);animation:r5puls 1.8s ease-in-out 1.3s infinite}
@keyframes r5puls{50%{transform:scale(1.12)}}
@media (max-width:980px){.r5-raster{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 12px;-webkit-overflow-scrolling:touch}.r5-karte{flex:0 0 min(72vw,260px);scroll-snap-align:center}}
@media (prefers-reduced-motion:reduce){.r5 *{animation:none!important;transition:none!important}.r5-hebel{transform:translateY(16px)}}
.r5-raster>li{display:flex}.r5-karte{flex:1}

/* Kopf des Abschnitts in der Formelsammlung (eigene Klasse, damit die Kapitelzählung unverändert bleibt) */
.kap-regeln{margin-bottom:36px}.kap-regeln>header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kap-regeln>header>div{flex:1;min-width:0}.kap-regeln h2{margin:0;font-size:22px;font-stretch:112%;letter-spacing:-.01em}.kap-regeln header p{margin:0;color:var(--text2,var(--r5-mut,#4f5a7d));font-size:14px}
.kap-regeln .kap-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--r5-blau,#2f4de6);color:#fff;flex:none}.kap-regeln .kap-icon svg{width:24px;height:24px}