/* Bausteine der Ressourcen-Seiten: Ergebnis-Folge-Box, Ergebnis per Mail, Inline-Brücke, kleine Tools.
   Farben: Schwarz, Weiß, Grau, Akzent #31CF96. */

/* ---------- Ergebnis-Folge-Box (Modul A) ---------- */
.km-follow{margin-top:18px;border-top:1px solid #ECEDEC;padding-top:16px;opacity:0;transition:opacity .2s ease}
.km-follow.da{opacity:1}
.km-follow-txt{margin:0;font-size:15px;line-height:1.55;color:#2a2a2a}
.km-follow-txt b{color:#111}
.km-follow-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;min-height:46px;padding:12px 16px;background:#31CF96;color:#111!important;font-weight:800;font-size:15px;border-radius:10px;text-decoration:none!important;text-align:center;line-height:1.3}
.km-follow-btn:hover{background:#28b882}
.km-follow-btn:focus-visible,.km-mail-toggle:focus-visible,.km-bridge-btn:focus-visible{outline:3px solid #191919;outline-offset:2px}
.km-mail-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0;background:none;border:0;color:#1a9e6f;font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Ergebnis per Mail (Modul D) ---------- */
.km-mail{margin-top:8px;background:#F4F5F4;border-radius:12px;padding:14px}
.km-mail[hidden]{display:none}
.km-mail label{display:block;font-size:13px;font-weight:700;color:#333;margin:0 0 10px}
.km-mail label span{font-weight:500;color:#777}
.km-mail input[type=email],.km-mail input[type=text]{display:block;width:100%;box-sizing:border-box;margin-top:5px;min-height:44px;padding:10px 12px;border:1px solid #D4D6D4;border-radius:9px;background:#fff;color:#111;font:inherit;font-size:16px}
.km-mail input:focus{outline:none;border-color:#31CF96;box-shadow:0 0 0 3px rgba(49,207,150,.2)}
.km-mail .km-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.km-mail-send{width:100%;min-height:46px;border:0;border-radius:10px;background:#191919;color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.km-mail-send:hover{background:#000}
.km-mail-send[disabled]{opacity:.6;cursor:wait}
.km-mail-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#666}
.km-mail-note a{color:#1a9e6f}
.km-mail-msg{margin:10px 0 0;font-size:14px;font-weight:700}
.km-mail-msg.ok{color:#1a9e6f}
.km-mail-msg.err{color:#b42318}

/* ---------- Inline-Brücke (Modul B) ---------- */
.km-bridge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin:28px 0;padding:16px 18px;background:#F7F7F5;border:1px solid #E5E5E3;border-radius:12px}
.km-bridge p{margin:0!important;flex:1 1 280px;font-size:15.5px;line-height:1.55;color:#2a2a2a}
.km-bridge p strong{color:#111}
.km-bridge-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;background:#31CF96;color:#111!important;font-weight:800;font-size:14.5px;border-radius:9px;text-decoration:none!important;white-space:nowrap}
.km-bridge-btn:hover{background:#28b882}
@media (max-width:480px){.km-bridge-btn{white-space:normal;width:100%;justify-content:center}}

/* ---------- Kleine Tools im Artikel (Sterne-Rechner, Checkliste, Muster) ---------- */
.km-tool{margin:30px 0;background:#191919;color:#fff;border-radius:18px;padding:24px}
.km-tool h3{color:#fff;margin:0 0 4px;font-size:21px}
.km-tool .km-tool-sub{color:#bdbdbd;font-size:14.5px;margin:0 0 14px}
.km-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.km-tool label{display:block;font-size:13px;font-weight:700;color:#eee}
.km-tool input,.km-tool select{display:block;width:100%;box-sizing:border-box;margin-top:6px;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid #444;background:#262626;color:#fff;font:inherit;font-size:16px;font-weight:600}
.km-tool input:focus,.km-tool select:focus{outline:none;border-color:#31CF96;box-shadow:0 0 0 3px rgba(49,207,150,.18)}
.km-tool-out{margin-top:16px;background:#fff;color:#1A1A1A;border-radius:14px;padding:18px}
.km-tool-big{font-size:34px;font-weight:800;line-height:1.15}
.km-tool-line{margin:6px 0 0;font-size:15px;color:#333}
.km-tool-hint{margin:8px 0 0;font-size:13px;color:#777}
@media (max-width:640px){.km-tool-grid{grid-template-columns:1fr}.km-tool{padding:18px}}

.km-check-q{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-top:1px solid #333}
.km-check-q:first-of-type{border-top:0}
.km-check-q span{flex:1 1 260px;font-size:15px;color:#eee}
.km-yn{display:inline-flex;background:#262626;border:1px solid #444;border-radius:999px;padding:3px}
.km-yn button{min-width:64px;min-height:40px;border:0;border-radius:999px;background:transparent;color:#ddd;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.km-yn button[aria-pressed="true"]{background:#31CF96;color:#111}

.km-muster{position:relative;margin:18px 0;background:#F4F5F4;border:1px solid #E2E4E2;border-radius:12px;padding:18px 18px 64px;font-size:15px;line-height:1.6;white-space:pre-wrap;color:#222}
.km-copy{position:absolute;right:14px;bottom:14px;min-height:42px;padding:9px 16px;border:0;border-radius:9px;background:#191919;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}

/* ---------- Inhaltsverzeichnis mobil einklappbar ---------- */
.toc .toc-label[role=button]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:-10px 0 -10px;cursor:pointer}
.toc .toc-label[role=button]::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.toc .toc-label[aria-expanded="true"]{margin-bottom:6px}
.toc .toc-label[aria-expanded="true"]::after{transform:rotate(-135deg)}
.toc.km-zu ol{display:none}