/* FeedLoop · Erklärer-Design-System (gemeinsame Stil-/Template-Datei) Pro Seite: setzen. */ :root{ --ink:#0F172A; --muted:#64748b; --green:#1D9E75; --green-d:#0F7A56; --green-l:#E7F8F1; --violet:#534AB7; --violet-d:#43399A; --violet-l:#EDEAFB; --amber:#F0A53D; --amber-l:#FEF3C7; --card:#fff; --line:#E8ECF2; --paper:#F5F7FB; --sh:0 22px 48px -16px rgba(15,23,42,.25), 0 6px 16px -8px rgba(15,23,42,.12); --font:'Plus Jakarta Sans',system-ui,sans-serif; --accent:#1D9E75; --accent-d:#0F7A56; --accent-l:#E7F8F1; --T:14s; } *{box-sizing:border-box} html,body{margin:0} body{font-family:var(--font);color:var(--ink);min-height:100vh; background: radial-gradient(55% 50% at 10% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(50% 50% at 94% 96%, rgba(83,74,183,.13), transparent 60%), linear-gradient(180deg,#FBFCFE,#F3F5FA);} .wrap{max-width:980px;margin:0 auto;padding:2.6rem 1.25rem 3.5rem} .kick{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-d);background:var(--accent-l); border:1px solid color-mix(in srgb, var(--accent) 35%, #fff);border-radius:999px;padding:.3rem .7rem} h1{font-size:1.7rem;font-weight:800;letter-spacing:-.015em;margin:.7rem 0 .2rem} .lead{color:var(--muted);font-size:1rem;margin:0 0 1.6rem;max-width:64ch;line-height:1.5} .grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:2rem;align-items:start} @media(max-width:760px){.grid{grid-template-columns:1fr;gap:1.4rem}} /* Gerät */ .device{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh);overflow:hidden} .bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:#fff} .bar i{width:11px;height:11px;border-radius:50%;background:#E2E8F0} .bar i:nth-child(1){background:#FF6058}.bar i:nth-child(2){background:#FFBE2E}.bar i:nth-child(3){background:#2ACA44} .bar .u{margin-left:.6rem;flex:1;height:20px;border-radius:6px;background:var(--paper);display:flex;align-items:center;padding:0 .55rem;font-size:.66rem;color:#94a3b8;font-weight:700} .screenbox{position:relative;height:344px;background:linear-gradient(180deg,#fff,#FCFDFF)} .screen{position:absolute;inset:0;padding:1.25rem 1.35rem;display:flex;flex-direction:column;justify-content:center; opacity:0;animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite} .s1{animation-name:s1}.s2{animation-name:s2}.s3{animation-name:s3}.s4{animation-name:s4} .head-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem} .ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.95rem} .ava.v{background:linear-gradient(135deg,#675ED6,#534AB7)} .ava.g{background:linear-gradient(135deg,#27C18C,#1D9E75)} .ava.a{background:linear-gradient(135deg,#F6BE5C,#F0A53D)} .head-row b{font-size:.95rem;display:block}.head-row span{font-size:.76rem;color:var(--muted)} .ttl{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .q{font-size:.95rem;font-weight:700;line-height:1.4;margin:.2rem 0 .65rem} .q.v{color:var(--violet-d)} .q.g{color:var(--green-d)} .scale{display:flex;align-items:center;gap:.5rem;justify-content:space-between} .scale .anc{font-size:.7rem;color:#94a3b8;font-weight:700;white-space:nowrap} .dots{display:flex;gap:.5rem} .sdot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.82rem;font-weight:800;color:#94a3b8;background:#fff} .sdot.v{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 9px 18px -6px rgba(83,74,183,.65)} .sdot.g{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 9px 18px -6px rgba(29,158,117,.65)} .btn{margin-top:1rem;height:44px;border-radius:13px;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.92rem;background:var(--accent);box-shadow:0 12px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent)} /* Auswahl-Liste */ .list{display:flex;flex-direction:column;gap:.45rem} .li{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:12px;padding:.5rem .6rem;font-size:.88rem;font-weight:700;background:#fff} .li .mini{width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--muted);display:grid;place-items:center;font-weight:800;font-size:.76rem;flex:0 0 auto} .li .tick{margin-left:auto;color:var(--accent);font-weight:900} .li.sel{border-color:var(--accent);background:var(--accent-l);box-shadow:0 8px 16px -10px color-mix(in srgb,var(--accent) 55%,transparent)} .li.sel .mini{background:var(--accent);color:#fff} .li .sub{font-weight:600;color:var(--muted);font-size:.74rem} /* Notiz-Feld */ .note{margin-top:.8rem;border:2px solid var(--line);border-radius:12px;padding:.55rem .7rem;font-size:.84rem;color:#334155;background:#fff;min-height:52px;line-height:1.45} .note .ph{color:#94a3b8} /* Diagramme */ .bars{display:flex;align-items:flex-end;gap:.5rem;height:78px} .bar2{width:18px;border-radius:6px 6px 3px 3px} .bar2.v{background:linear-gradient(180deg,#6A60D8,#534AB7)} .bar2.g{background:linear-gradient(180deg,#27C18C,#1D9E75)} .bar2.a{background:linear-gradient(180deg,#F6BE5C,#F0A53D)} .stat{display:flex;gap:1.2rem;margin-top:.7rem} .stat .b{font-weight:800;font-size:1.5rem;line-height:1} .stat small{display:block;color:var(--muted);font-weight:700;font-size:.72rem;margin-top:.2rem} .spark{width:100%;height:70px} .spark path.l{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .spark circle{fill:var(--green)} /* Vergleich + Versand */ .cmp{display:flex;flex-direction:column;gap:.5rem} .crow{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.45rem .6rem;box-shadow:0 6px 14px -10px rgba(15,23,42,.2)} .crow .who{flex:1;font-size:.84rem;font-weight:700} .crow .who small{display:block;font-weight:600;color:var(--muted);font-size:.72rem} .crow .ava{width:32px;height:32px;font-size:.82rem} .val{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.88rem;flex:0 0 auto} .val.v{background:var(--violet)} .val.g{background:var(--green)} .insight{margin-top:.7rem;font-size:.8rem;color:var(--accent-d);background:var(--accent-l);border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:12px;padding:.55rem .7rem;line-height:1.4;font-weight:600} .send{margin-top:.7rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:#F6F8FC;border:1px solid var(--line);border-radius:12px;padding:.55rem .65rem} .send .env{width:30px;height:30px;border-radius:9px;background:#EEF2FF;display:grid;place-items:center;flex:0 0 auto} .send b{font-size:.74rem;color:var(--muted);font-weight:800} .chip{font-size:.73rem;font-weight:700;color:#334155;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.18rem .55rem} .chip.opt{color:var(--muted)} /* Bibliothek */ .libcard{border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;background:#fff} .libcard .lt{font-weight:800;font-size:.95rem} .libcard .meta{font-size:.74rem;color:var(--muted);margin-top:.1rem} .sci{margin-top:.5rem;font-size:.78rem;color:var(--violet-d);background:var(--violet-l);border:1px solid #E1DCF7;border-radius:10px;padding:.45rem .6rem;line-height:1.4} .src{margin:.45rem 0 0;font-size:.74rem;color:var(--muted)} .updbadge{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:800;color:#92400e;background:var(--amber-l);border:1px solid #FDE68A;border-radius:999px;padding:.2rem .55rem} .havebadge{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:800;color:var(--green-d);background:var(--green-l);border:1px solid #BCEBDB;border-radius:999px;padding:.2rem .55rem} /* Stepper */ .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .step{position:relative;display:flex;gap:.85rem;padding:.85rem .95rem;border-radius:16px} .step .hl{position:absolute;inset:0;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);opacity:0;animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite} .step.s1 .hl{animation-name:s1}.step.s2 .hl{animation-name:s2}.step.s3 .hl{animation-name:s3}.step.s4 .hl{animation-name:s4} .step .n{position:relative;z-index:1;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--paper);color:var(--muted);font-weight:800;display:grid;place-items:center;font-size:.9rem;border:1px solid var(--line)} .step .n .glow{position:absolute;inset:-1px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;opacity:0;animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite} .step.s1 .n .glow{animation-name:s1}.step.s2 .n .glow{animation-name:s2}.step.s3 .n .glow{animation-name:s3}.step.s4 .n .glow{animation-name:s4} .step .tx{position:relative;z-index:1} .step .tx b{font-size:.96rem}.step .tx p{margin:.15rem 0 0;color:var(--muted);font-size:.82rem;line-height:1.45} .progress{height:6px;border-radius:999px;background:#E9EDF4;overflow:hidden;margin-top:1.1rem} .progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--violet));transform-origin:left;transform:scaleX(0);animation:prog var(--T) linear infinite} @keyframes prog{to{transform:scaleX(1)}} @keyframes s1{0%{opacity:1;transform:translateY(0) scale(1)}24%{opacity:1}29%{opacity:0;transform:translateY(-8px) scale(.99)}92%{opacity:0;transform:translateY(8px) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes s2{0%,21%{opacity:0;transform:translateY(8px) scale(.99)}26%{opacity:1;transform:translateY(0) scale(1)}49%{opacity:1}54%{opacity:0;transform:translateY(-8px) scale(.99)}100%{opacity:0}} @keyframes s3{0%,46%{opacity:0;transform:translateY(8px) scale(.99)}51%{opacity:1;transform:translateY(0) scale(1)}74%{opacity:1}79%{opacity:0;transform:translateY(-8px) scale(.99)}100%{opacity:0}} @keyframes s4{0%,71%{opacity:0;transform:translateY(8px) scale(.99)}76%{opacity:1;transform:translateY(0) scale(1)}98%{opacity:1}100%{opacity:0;transform:translateY(-8px) scale(.99)}} /* Embed-Anpassung */ body{background:transparent!important} .wrap{padding:.5rem .4rem!important;max-width:none!important}