/* Gliederung des Empfehlerportals (Oliver 10.10.2026): Piktogramme je Themenbereich, Sprungleiste, eingeklappte Bereiche,
   Software, Kontostand und Knoepfe des Report Generators. Eigene Datei: der Stilblock in index.html, in dem das zuerst stand,
   wird vom Modul-Einbau (scripts/module-einbauen.py) neu erzeugt und hat es am 10.10.2026 ueberschrieben. */
/* Piktogramme je Themenbereich und Gliederung (Oliver 10.10.2026) */
.pikto{display:inline-flex;flex:none;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:#f4ecd6}
.pikto::before{content:'';width:22px;height:22px;background:#7a5a17;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.pikto.dunkel{background:#ffffff1a}.pikto.dunkel::before{background:#efd78e}.pikto.klein{width:28px;height:28px;border-radius:9px}.pikto.klein::before{width:16px;height:16px}
.pikto-kunde{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6M22 11h-6'/></svg>")}
.pikto-rechner{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>")}
.pikto-report{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 18v-3M12 18v-6M16 18v-2'/></svg>")}
.pikto-leads{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><path d='M8 13h8'/></svg>")}
.pikto-team{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>")}
.pikto-daten{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='11' r='2.5'/><path d='M5.5 17c.6-1.7 2-2.5 3.5-2.5s2.9.8 3.5 2.5M15 10h3M15 14h3'/></svg>")}
.pikto-sicher{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9 12l2 2 4-4'/></svg>")}
.pikto-software{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><path d='M8 21h8M12 17v4'/></svg>")}
.pikto-liste{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M9 12h11M9 18h11'/><path d='M4 6h.01M4 12h.01M4 18h.01'/></svg>")}
.titel-zeile{display:flex;align-items:center;gap:12px;margin-bottom:6px}.titel-zeile .card-title,.titel-zeile h2{margin:0}
.bereiche{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:6px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.bereiche::-webkit-scrollbar{display:none}
.bereiche a{display:inline-flex;align-items:center;gap:8px;flex:none;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;color:inherit;text-decoration:none;font-size:.88rem;font-weight:600;min-height:40px;box-sizing:border-box}
.bereiche a:focus-visible{outline:2px solid #2f4a2f;outline-offset:2px}.bereiche a[hidden]{display:none}
.klapp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px}.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary::after{content:'';margin-left:auto;flex:none;width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.klapp[open]>summary::after{transform:rotate(-135deg)}.klapp>summary .card-title{margin:0}.klapp-teaser{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.klapp[open]>summary{margin-bottom:12px}@media (prefers-reduced-motion:reduce){.klapp>summary::after{transition:none}}
.so-gehts{margin-top:10px}.so-gehts>summary{cursor:pointer;font-weight:600;font-size:.9rem;min-height:40px;display:flex;align-items:center}
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sw-teil{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}.sw-teil h3{margin:0 0 4px;font-size:1rem}
.sw-laden{display:grid;gap:8px;margin-top:10px}.sw-laden a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;font-weight:600;min-height:44px;box-sizing:border-box}.sw-laden a small{font-weight:400;color:var(--muted)}
@media(max-width:560px){.sw-grid{grid-template-columns:1fr}}
.dc-konto{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.dc-konto span{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-size:.84rem;background:#f4f1e9;border:1px solid var(--line)}.dc-konto b{font-weight:700}
.dc-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.dc-knoepfe button.b{width:auto;margin:0;padding:0 26px}
.dc-hinweis{margin-top:12px;padding:12px 14px;border-radius:14px;background:#f4f1e9;border:1px solid var(--line);font-size:.9rem}.dc-hinweis[hidden]{display:none}.dc-hinweis button.b{width:auto;margin:10px 0 0;min-height:44px;padding:0 20px}
@media(max-width:560px){.dc-knoepfe button.b{width:100%}}

.klapp-h2{margin:0;font:400 1.6rem Georgia,serif}@media(max-width:560px){.klapp-h2{font-size:1.3rem}}
button.b[disabled][data-bis]{opacity:.85;cursor:not-allowed;filter:grayscale(.6)}