/* Wissensseite „Elkos altern“ – baut auf fehlersuche.css und katalog.css auf. */
.ek-held{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center;background:var(--navy);color:#fff;border-radius:22px;padding:34px 38px;position:relative;overflow:hidden}
.ek-held::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px)}
.ek-held>*{position:relative;z-index:1}
.ek-held h1{margin:0 0 10px;font-size:clamp(28px,4.2vw,46px);font-weight:800;font-stretch:120%;letter-spacing:-.03em;line-height:1.05}
.ek-held .lead{color:#c3cbec;max-width:56ch;margin:0 0 18px}
.ek-bild{width:100%;max-width:220px;justify-self:end;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}
.ek-blase{animation:ekBlase 3.4s ease-in infinite;transform-box:fill-box}.ek-blase.zwei{animation-delay:-1.2s}.ek-blase.drei{animation-delay:-2.2s}
@keyframes ekBlase{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-70px);opacity:0}}
.ek-sicher{margin:18px 0;padding:14px 16px;border-radius:14px;background:var(--err-bg);color:var(--ink);border-left:5px solid var(--err);font-size:15px}
.ek-block{margin:34px 0}
.ek-block h2{margin:0 0 12px;font-size:clamp(22px,2.6vw,30px);font-weight:750;font-stretch:112%}
.ek-block p,.ek-liste{max-width:78ch}
.ek-zwei{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}.ek-zwei p{margin:0 0 10px}
.ek-kette{list-style:none;counter-reset:k;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ek-kette li{counter-increment:k;position:relative;background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:30px 12px 12px;display:grid;gap:3px;font-size:14px}
.ek-kette li::before{content:counter(k);position:absolute;left:12px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.ek-kette li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-right:3px solid var(--line-2);border-top:3px solid var(--line-2);transform:rotate(45deg)}
.ek-kette span{color:var(--muted);font-size:13px}
.ek-rechner{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--raised);box-shadow:0 12px 34px rgba(10,21,64,.07)}
.ek-eingabe{display:grid;gap:12px;align-content:start}
.ek-eingabe label{display:grid;gap:4px;font-size:13.5px;font-weight:650;color:var(--muted)}
.ek-eingabe input[type=number]{padding:9px 11px;border-radius:9px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font-size:16px}
.ek-alter input[type=range]{width:100%;accent-color:var(--blue)}
.ek-sim{width:100%;max-width:420px;background:var(--papier-karte,#fff);border:1px solid var(--line);border-radius:14px}
.ek-zahl{margin:12px 0 4px;font-size:16px}.ek-klein{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.ek-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:12px 0 16px}
.ek-karten div{background:var(--raised);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.ek-karten span{color:var(--muted);font-size:14px}
.ek-liste{padding-left:20px;display:grid;gap:8px}
.ek-hinweis{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ink);border-left:5px solid var(--ok)}
code{background:var(--paper);padding:2px 6px;border-radius:6px;font-size:.95em}
a.knopf.zweit{background:var(--raised);color:var(--blue);border:1.5px solid var(--blue);margin-left:8px}
@media (max-width:860px){.ek-held{grid-template-columns:1fr;padding:24px 20px}.ek-bild{max-width:130px;justify-self:start;order:-1}.ek-zwei{grid-template-columns:1fr}.ek-kette{grid-template-columns:1fr}.ek-kette li:not(:last-child)::after{display:none}.ek-rechner{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ek-blase{animation:none}}
:root[data-theme="dark"] .ek-sicher{color:var(--ink)}
