/* LernLabs-Portal – greift die Designwelt von ETHIK LAB auf (Systemschriften, Papierton, Tinte, Gold). */
:root{--paper:#f3ede0;--paper2:#ebe3d1;--card:#fffcf5;--ink:#17202e;--ink2:#3a4558;--muted:#566072;--gold:#f2b632;--gold2:#fbe7a8;--violet:#6d4bb8;--teal:#1d7a78;--coral:#e0624a;--sand:#fde9d4;
--sans:"Avenir Next","SF Pro Text",system-ui,-apple-system,"Segoe UI",sans-serif;--disp:"Avenir Next Condensed","Avenir Next","SF Pro Display",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}a{color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;margin:0;text-wrap:balance}
.wrap{max-width:1120px;margin:auto;padding:20px max(24px,env(safe-area-inset-left)) 60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;font:900 22px var(--disp);letter-spacing:.03em;text-decoration:none;min-height:44px}
.brand b{display:inline-grid;place-items:center;background:var(--ink);color:var(--gold);width:38px;height:38px;border-radius:10px}
.top small{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--muted)}
.crumbs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:18px 0 0;font-weight:700;color:var(--muted)}
.crumbs a{text-decoration:none;padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;background:var(--paper2);color:var(--ink2)}.crumbs a:hover{background:var(--gold2)}.crumbs [aria-current]{padding:10px 12px;color:var(--ink)}
.intro{margin:34px 0 26px}.intro h1{font-size:clamp(38px,6vw,68px);line-height:1;font-weight:900}
.intro h1 mark{background:linear-gradient(transparent 62%,var(--gold) 62%,var(--gold) 92%,transparent 92%);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro p{font:400 20px/1.55 Georgia,"Iowan Old Style",serif;color:var(--ink2);max-width:52ch;margin:14px 0 0}
.kids{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kid{display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:30px;border-radius:26px;border:2px solid var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:transform .2s var(--ease)}
.kid:hover{transform:translateY(-4px)}.kid:active{transform:scale(.99)}
.kid.lola{background:var(--ink);color:#fff;background-image:radial-gradient(rgba(255,255,255,.08) 1.3px,transparent 1.5px);background-size:14px 14px}
.kid.wilma{background:var(--teal);color:#fff;background-image:radial-gradient(rgba(255,255,255,.14) 1.3px,transparent 1.5px);background-size:14px 14px}
.kid .ini{position:absolute;right:-8px;top:-34px;font:900 230px/1 var(--disp);opacity:.16;pointer-events:none}.kid.lola .ini{color:var(--gold)}.kid.wilma .ini{color:#fff}
.pill{align-self:flex-start;border-radius:99px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.kid.lola .pill{background:var(--gold);color:var(--ink)}.kid.wilma .pill{background:var(--coral);color:#fff}
.kid h2{font-size:clamp(48px,7vw,84px);font-weight:900;line-height:.95;margin:30px 0 10px}
.kid p{margin:0;font-size:18px;max-width:30ch;opacity:.92}
.kid .go{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-weight:800;border-top:2px solid rgba(255,255,255,.35);padding-top:14px}
.note{margin-top:34px;padding:14px 18px;background:var(--paper2);border-radius:14px;color:var(--ink2);font-size:15px;max-width:70ch}
.child-head{display:flex;align-items:flex-end;gap:18px;margin:26px 0 24px;flex-wrap:wrap}.child-head h1{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1}
.child-head .pill{margin-bottom:10px}[data-child=lola] .child-head .pill{background:var(--gold)}[data-child=wilma] .child-head .pill{background:var(--coral);color:#fff}
.sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.tile{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .2s var(--ease)}
.tile:hover{transform:translateY(-4px)}.tile:active{transform:scale(.99)}
.tile .pv{aspect-ratio:16/9;background:var(--ink);display:grid;place-items:center;border-bottom:2px solid var(--ink);overflow:hidden}.tile .pv img{width:100%;height:100%;object-fit:cover;display:block}.tile .pv svg{width:72px;height:72px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile .tb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}.tile h3{font-size:28px;font-weight:900;display:flex;align-items:center;gap:10px}.tile h3 svg{width:28px;height:28px;stroke:var(--violet);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tile p{margin:0;color:var(--ink2);font-size:15.5px}.tile .st{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--muted)}.tile .st.has{color:#14472c}
.empty{display:flex;gap:28px;align-items:center;flex-wrap:wrap;background:var(--sand);border:2px dashed var(--ink);border-radius:24px;padding:34px}.empty svg{width:150px;height:auto;flex:none}.empty h2{font-size:34px;font-weight:900}.empty p{margin:8px 0 0;max-width:46ch;color:var(--ink2)}
.foot{margin-top:46px;font-size:12.5px;color:var(--muted);text-align:center}
@media(max-width:760px){.kids{grid-template-columns:1fr}.kid{min-height:260px}.wrap{padding:16px 16px 50px}.top small{display:none}.empty{padding:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}