/* FAINO · ui/about.css — Panel «Was ist FAINO?» (ui/about.js), aus FAINO-demo_61 übernommen, ui 0.19.0 */
.f-ab{position:fixed;inset:0;z-index:33;background:#F4F2EE center top/cover no-repeat;font:13px/1.45 var(--f-font,Inter,system-ui,sans-serif);color:#1E252D;overflow:hidden}
body.f-abon .f-lt,body.f-abon .f-map-z{display:none!important}
.f-ab .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,242,238,.35),rgba(244,242,238,.05) 30%,rgba(244,242,238,.15))}
.f-ab .pq,.f-ab .ad,.f-ab .ig,.f-ab .tg,.f-ab .rc,.f-ab .tb .ch,.f-ab .bk,.f-ab .pp .ch{background:linear-gradient(140deg,rgba(255,255,255,.8),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 36px rgba(20,30,50,.14);border-radius:16px}
.f-ab .tb{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:center;pointer-events:none;z-index:3}
.f-ab .tb .ch{pointer-events:auto;display:flex;align-items:center;padding:4px;border-radius:999px}
.f-ab .tb button{font:600 12.5px var(--f-font,Inter,system-ui,sans-serif);border:none;cursor:pointer;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%);margin-left:-7px;padding:8px 20px 8px 25px;background:rgba(30,37,45,.07);color:#4A5560}
.f-ab .tb button[data-fs="0"]{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);margin-left:0;border-radius:999px 0 0 999px;padding-left:16px}
.f-ab .tb button[data-fs="3"]{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,13px 50%);border-radius:0 999px 999px 0;padding-right:16px}
.f-ab .tb button.done{background:rgba(31,138,112,.16);color:#1E252D}
.f-ab .tb button.on{background:#2B333C;color:#fff}.f-ab .tb button.pv{background:rgba(226,69,42,.16);color:#1E252D}
.f-ab .tb button em{font-style:normal;font-weight:500;opacity:.75;margin-left:5px}
.f-ab .tb button.solo{clip-path:none;border-radius:999px;margin-left:14px;padding:8px 16px}.f-ab .tb button.solo.g1{margin:0 14px 0 0}
.f-ab .bk{position:absolute;left:20px;top:10px;z-index:3;font:600 12.5px var(--f-font,Inter,system-ui,sans-serif);color:#1E252D;cursor:pointer;padding:8px 14px;border-radius:999px}
.f-ab .pq{padding:14px 16px}
.f-ab .lc{position:absolute;left:20px;top:70px;bottom:210px;width:290px;display:flex;flex-direction:column;gap:10px;z-index:2;overflow:auto;scrollbar-width:none}
.f-ab .tt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6A7480;margin:0 0 6px}
.f-ab h3{margin:0;font-size:24px;letter-spacing:-.01em;line-height:1.1}
.f-ab .sub{color:#4A5560;margin:6px 0 10px;font-size:12.5px}
.f-ab .bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin:5px 0 3px}.f-ab .bar u{display:block;background:#2C6F94}.f-ab .bar s{display:block;flex:1;background:#1F8A70}
.f-ab .bl{display:flex;justify-content:space-between;font-size:11.5px;color:#4A5560}.f-ab .bl b{color:#2C6F94}.f-ab .bl b.h{color:#1F8A70}
.f-ab .who{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.f-ab .who i{font-style:normal;font-size:11px;font-weight:600;padding:3px 8px 3px 6px;border-radius:999px;background:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(30,37,45,.08)}
.f-ab .who i::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.f-ab .who i.nw{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.f-ab ul{margin:0;padding:0;list-style:none}.f-ab ul li{padding:3px 0 3px 15px;position:relative;font-size:12.5px}.f-ab ul li::before{content:'';position:absolute;left:1px;top:10px;width:6px;height:6px;border-radius:50%;background:#2C6F94}
.f-ab .gt{font-size:12px;color:#4A5560;border-left:3px solid #E2452A;padding:2px 0 2px 10px}
.f-ab .rcol{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:310px;z-index:2;display:flex;flex-direction:column;gap:10px}
.f-ab .ad,.f-ab .ig{padding:12px}
.f-ab .ad .ai{display:flex;flex-direction:column;gap:8px}
.f-ab .ad .ai>div{padding:10px 12px 11px;border-radius:12px;background:rgba(31,138,112,.08)}
.f-ab .ad b{display:flex;align-items:center;gap:8px;font-size:13px;color:#1F6E5A;margin-bottom:3px}
.f-ab .ad b i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#1F8A70;color:#fff;font-size:11px;display:grid;place-items:center;flex:none}
.f-ab .ad span{font-size:12px;color:#4A5560;display:block}
.f-ab .igc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px}.f-ab .igc span{display:flex;flex-direction:column;align-items:center;gap:3px}
.f-ab .igc b{width:34px;height:34px;border-radius:9px;background:#2C6F94;color:#fff;font-size:11px;display:grid;place-items:center}.f-ab .igc em{font-style:normal;font-size:9.5px;color:#4A5560;text-align:center;line-height:1.15}
.f-ab .tg{position:absolute;left:50%;transform:translateX(-50%);top:66px;padding:7px 14px;z-index:2;font-size:12px;font-weight:600;color:#7A5A12;border-radius:999px}
.f-ab .tg .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#E2452A;margin-right:4px}
.f-ab .ofc{position:absolute;z-index:2;width:440px;padding:12px 14px;background:rgba(255,255,255,.96);border-radius:16px;box-shadow:0 14px 36px rgba(20,30,50,.14);border:1px solid rgba(30,37,45,.06)}
.f-ab .oh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:9px}
.f-ab .tgx{font-size:11px;font-weight:700;color:#1F8A70;background:rgba(31,138,112,.13);border-radius:999px;padding:3px 9px}.f-ab .tgx.tgs{color:#8A6510;background:rgba(201,150,43,.16)}
.f-ab .ob{position:relative;border:2px solid #1F8A70;border-radius:12px;padding:14px 12px 10px}
.f-ab .mt{position:absolute;top:-10px;left:10px;background:#1F8A70;color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.f-ab .op{display:flex;align-items:center;gap:10px}.f-ab .op>div{flex:1}.f-ab .op b{display:block;font-size:14px}.f-ab .op small{color:#6A7480;font-size:11.5px}.f-ab .op em{font-style:normal;color:#1F8A70;font-weight:600}
.f-ab .op i{width:40px;height:40px;border-radius:50%;background:center/cover;flex:none}
.f-ab .op i.lg{border-radius:10px;background:#fff;border:1.5px solid #2C6F94;color:#2C6F94;font-style:normal;font-weight:800;font-size:9.5px;display:grid;place-items:center}
.f-ab .rt{color:#C9962B;font-weight:700;font-size:12.5px}.f-ab .rt small{color:#9AA3AD;font-weight:500}
.f-ab .ch3{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}.f-ab .ch3 span{font-size:11px;font-weight:600;color:#1F8A70;background:rgba(31,138,112,.09);padding:3px 8px;border-radius:999px}
.f-ab .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:12px}.f-ab .kv span{color:#6A7480}
.f-ab .blr{filter:blur(4px)}
.f-ab .ms{display:flex;justify-content:space-between;margin:10px 4px 8px}.f-ab .ms span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:#6A7480}.f-ab .ms i{font-style:normal;width:18px;height:18px;border-radius:50%;background:rgba(31,138,112,.13);color:#1F8A70;font-size:10px;font-weight:700;display:grid;place-items:center}
.f-ab .ob2{display:flex;gap:8px;margin:10px 0 6px}.f-ab .ob2 button{font:600 12.5px var(--f-font,Inter,system-ui,sans-serif);border:1px solid rgba(30,37,45,.12);background:#fff;border-radius:999px;padding:8px 14px;cursor:default}.f-ab .ob2 button.pri{background:#1F8A70;color:#fff;border-color:#1F8A70}
.f-ab .nt{font-size:10.5px;color:#8A939C;letter-spacing:.05em;text-transform:uppercase;margin-top:6px}
/* Rollen */
.f-ab.rl{background-color:#F4F2EE;background-position:center 46%}
.f-ab .rs{position:absolute;inset:60px 20px 0 20px;z-index:2}
.f-ab .rs svg.ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.f-ab .rw{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:12px}.f-ab .rw.rt0{top:34px}.f-ab .rw.rb0{top:380px}
.f-ab .rc{width:190px;padding:11px 13px 30px;position:relative}
.f-ab .rc .cn{position:absolute;left:13px;bottom:9px;font-size:10.5px;font-weight:700;color:var(--c);background:rgba(255,255,255,.7);border:1px solid var(--c);border-radius:999px;padding:1px 8px}
.f-ab .rh{position:absolute;left:0;right:0;top:4px;text-align:center;font-size:12.5px;color:#4A5560}.f-ab .rh b{color:#E2452A}.f-ab .rh span{margin-left:10px;font-size:11px;color:#9AA3AD}
.f-ab .rc h6{margin:0 0 3px;font-size:12.5px;display:flex;align-items:center;gap:7px}.f-ab .rc h6::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.f-ab .rc p{margin:0;font-size:11.5px;color:#4A5560;line-height:1.35}
.f-ab .pp{position:absolute;left:0;right:0;top:220px;display:flex;justify-content:center}
.f-ab .pp .ch{display:flex;padding:4px;border-radius:999px}
.f-ab .pp .st{position:relative;font:600 13px var(--f-font,Inter,system-ui,sans-serif);padding:10px 24px 10px 30px;margin-left:-7px;background:rgba(30,37,45,.07);color:#1E252D;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);display:flex;align-items:center;gap:8px;white-space:nowrap}
.f-ab .pp .st:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);border-radius:999px 0 0 999px;padding-left:18px}
.f-ab .pp .st:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,15px 50%);border-radius:0 999px 999px 0;padding-right:20px;background:#2B333C;color:#fff}
.f-ab .pp .st i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--c)}
.f-ab .pps{position:absolute;left:0;right:0;top:272px}.f-ab .pps span{position:absolute;padding:0 10px;box-sizing:border-box;font-size:11px;color:#6A7480;text-align:center;line-height:1.3}
@media (max-width:1180px){.f-ab .rcol{width:260px}.f-ab .ofc{display:none}}
@media (max-width:900px){.f-ab{overflow:auto;background-size:auto 40vh;background-position:center 96px}.f-ab .vl,.f-ab .rt{display:none}
 .f-ab .lc,.f-ab .rcol,.f-ab .tg,.f-ab .ofc{position:static!important;width:auto!important;margin:10px 12px;transform:none!important;overflow:visible}
 .f-ab .lc{margin-top:calc(40vh + 104px)}.f-ab .sc{padding-bottom:240px}.f-ab .ofc{display:block}
 .f-ab .tb{justify-content:flex-start;overflow-x:auto;top:52px;padding:0 12px;scrollbar-width:none}.f-ab .tb button em{display:none}
 .f-ab .rs{position:static;padding:100px 0 240px}.f-ab .rs svg.ln,.f-ab .pps{display:none}.f-ab .rw,.f-ab .pp{position:static;flex-wrap:wrap;margin:10px 12px}.f-ab .rc{width:100%}.f-ab .pp .ch{flex-wrap:wrap;border-radius:16px}}
/* Wissensgraph der Plattform (#O-0020 Schritt 2) */
.f-ab.gr{background:radial-gradient(ellipse at 50% 46%,#FFFFFF 0%,#F7F5F1 55%,#EFECE6 100%)}
.f-ab .gcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.f-ab .gcap{position:absolute;left:20px;top:70px;width:300px;z-index:2;padding:14px 16px}
.f-ab .gcap p{margin:0;font-size:13px;line-height:1.45;color:#1E252D}
.f-ab .gdots{display:flex;gap:6px;margin-top:10px}.f-ab .gdots button{width:22px;height:6px;border-radius:3px;border:0;padding:0;background:rgba(30,37,45,.14);cursor:pointer}.f-ab .gdots button.done{background:rgba(31,138,112,.45)}.f-ab .gdots button.on{background:#E2452A}
.f-ab .gcap{background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.7));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 36px rgba(20,30,50,.12);border-radius:16px}
@media (max-width:900px){.f-ab.gr{overflow:hidden}.f-ab .gcap{left:12px;right:12px;top:auto;bottom:240px;width:auto;padding:10px 14px}.f-ab .gcap p,.f-ab .gcap .nt{display:none}.f-ab .gcap .gdots{margin-top:6px}}
/* Wie FAINO bezahlt wird (#O-0020 Schritt 3) */
.f-ab.mn{background:radial-gradient(ellipse at 50% 30%,#FFFFFF 0%,#F7F5F1 55%,#EFECE6 100%)}
.f-ab .mo{position:absolute;left:20px;right:20px;top:66px;bottom:var(--f-ab-b,200px);display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1180px;margin:0 auto;z-index:2;align-items:start}
.f-ab .mside{min-height:0;max-height:100%;box-sizing:border-box;overflow:auto;scrollbar-width:thin;padding:14px 16px;background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,255,255,.7));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 36px rgba(20,30,50,.12);border-radius:16px}
.f-ab .mside h3{font-size:20px}
.f-ab .mcal{display:flex;flex-direction:column;gap:8px}
.f-ab label.rg{display:grid;grid-template-columns:96px 1fr 56px;align-items:center;gap:8px;font-size:12px;color:#4A5560}
.f-ab label.rg input{width:100%;accent-color:#1F8A70;margin:0}.f-ab label.rg em{font-style:normal;font-weight:700;text-align:right;color:#1E252D}
.f-ab .mq>span{display:block;font-size:12px;color:#4A5560;margin-bottom:4px}
.f-ab .mq>div{display:flex;flex-wrap:wrap;gap:5px}
.f-ab .mq button{font:600 11.5px var(--f-font,Inter,system-ui,sans-serif);border:1px solid rgba(30,37,45,.12);background:#fff;color:#1E252D;border-radius:999px;padding:5px 10px;cursor:pointer}
.f-ab .mq button.on{background:#1F8A70;border-color:#1F8A70;color:#fff}
.f-ab .ln{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid rgba(30,37,45,.07);font-size:12.5px}
.f-ab .ln b{white-space:nowrap}.f-ab .ln small{display:block;color:#8A939C;font-size:11px}
.f-ab .ln.tot{font-weight:700;border-bottom:0;border-top:2px solid #1E252D;margin-top:2px}.f-ab .ln.tot b{color:#1F6E5A;font-size:14px}
.f-ab .ln.inc b{color:#1F8A70;font-weight:600}
.f-ab .pay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 6px}
.f-ab .pay span{background:rgba(31,138,112,.08);border-radius:10px;padding:8px 10px;font-size:11.5px;color:#4A5560}.f-ab .pay b{display:block;color:#1E252D;font-size:13px;margin-top:2px}
.f-ab .mres{margin-top:6px}.f-ab .mres[data-ores]{position:sticky;bottom:-14px;background:#FAF9F7;margin-left:-16px;margin-right:-16px;padding:2px 16px 10px;box-shadow:0 -10px 16px -12px rgba(20,30,50,.25)}
@media (max-width:1600px) and (min-width:901px){.f-ab .tb button:not(.on) em{display:none}}
.f-ab .f-abq{display:inline-block;margin-top:8px;font-weight:700;color:#fff;background:#1F8A70;border-radius:999px;padding:8px 16px;text-decoration:none}
@media (max-width:900px){.f-ab.mn{overflow:auto}.f-ab .mo{position:static;display:block;margin:104px 12px 240px}.f-ab .mside{overflow:visible;max-height:none;margin-bottom:12px}.f-ab .mres{position:static;box-shadow:none;background:none}
 .f-ab label.rg{grid-template-columns:84px 1fr 52px}.f-ab .pay{grid-template-columns:1fr}}