/* ========================================================= Kinderleicht Gesund – main.css ========================================================= */ @font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap} :root{ --bg:#FFF6EA; --bg2:#FFEEDB; --card:#FFFFFF; --ink:#1E1633; --ink2:#3A3155; --muted:#665E80; --line:rgba(30,22,51,.10); --night:#160F2B; --night2:#251A47; --tomato:#FF5A36; --mango:#FFB627; --leaf:#22B573; --berry:#7B5CFF; --sky:#2EB8E6; --tomato-s:#FFE3DA; --mango-s:#FFF0CC; --leaf-s:#D8F5E6; --berry-s:#E9E3FF; --sky-s:#D7F2FB; --ac:var(--leaf); --ac-s:var(--leaf-s); --ac-d:#0F7A4A; --r:28px; --r-sm:16px; --shadow:0 1px 2px rgba(30,22,51,.06),0 12px 32px -12px rgba(30,22,51,.18); --shadow-lg:0 30px 60px -20px rgba(30,22,51,.35); --f-display:"Bricolage",ui-sans-serif,system-ui,sans-serif; --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --wrap:1240px; --gut:clamp(16px,4vw,40px); --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); } [data-accent=tomato]{--ac:var(--tomato);--ac-s:var(--tomato-s);--ac-d:#C7361A} [data-accent=mango]{--ac:var(--mango);--ac-s:var(--mango-s);--ac-d:#A86E00} [data-accent=leaf]{--ac:var(--leaf);--ac-s:var(--leaf-s);--ac-d:#0F7A4A} [data-accent=berry]{--ac:var(--berry);--ac-s:var(--berry-s);--ac-d:#5134D6} [data-accent=sky]{--ac:var(--sky);--ac-s:var(--sky-s);--ac-d:#137FA3} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:clip} body.kl{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(16px,1.05vw,18px)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip} body.kl img,body.kl svg{max-width:100%} :where(body.kl) a{color:inherit} body.kl :focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:8px} body.kl ::selection{background:var(--mango);color:var(--ink)} .kl-skip{position:absolute;left:-9999px;top:8px;z-index:9999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px} .kl-skip:focus{left:8px} .kl-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .kl-narrow{max-width:820px} .kl-center{text-align:center;justify-content:center;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .kl-main{position:relative} body.kl h1,body.kl h2,body.kl h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--ink);margin:0} .kl-h2{font-size:clamp(34px,5vw,64px)} .kl-h2 em,.kl-phero__title em,.kl-hero__title em{font-style:normal;background:linear-gradient(100deg,var(--tomato),var(--mango) 45%,var(--leaf) 75%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:kl-hue 8s ease-in-out infinite alternate} @keyframes kl-hue{to{background-position:100% 0}} .kl-kicker{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-d,var(--muted));margin:0 0 14px} .kl-kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--ac,var(--tomato))} .kl-ico{width:56px;height:56px;display:block} .kl-ico--xs{width:18px;height:18px;display:inline-block;vertical-align:-3px} .kl-ico--sm{width:32px;height:32px} .kl-ui{width:20px;height:20px;flex:none} /* ---------- Buttons ---------- */ .kl-btn{--b:var(--ink);display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font:700 16px/1 var(--f-body);text-decoration:none;border:2px solid var(--b);cursor:pointer;transition:transform .35s var(--spring),background .25s,color .25s,box-shadow .25s;background:transparent;color:var(--ink);will-change:transform} .kl-btn--primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -10px rgba(30,22,51,.6)} .kl-btn--primary:hover{background:var(--tomato);border-color:var(--tomato);color:#fff} .kl-btn--ghost{background:rgba(255,255,255,.6);backdrop-filter:blur(8px)} .kl-btn--ghost:hover{background:var(--ink);color:#fff} .kl-btn--small{padding:10px 16px;font-size:14px} .kl-btn .kl-ui{transition:transform .3s var(--spring)} .kl-btn:hover .kl-ui{transform:translateX(4px)} .kl-textlink{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--ac)} .kl-iconbtn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;transition:transform .3s var(--spring),background .2s} .kl-iconbtn:hover{transform:scale(1.08) rotate(-6deg);background:var(--tomato)} .kl-chip{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--ac-s);color:var(--ac-d);font:800 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase} /* ---------- Progress + Nav ---------- */ .kl-progress{position:fixed;inset:0 0 auto;height:4px;z-index:200;pointer-events:none} .kl-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--tomato),var(--mango),var(--leaf),var(--sky),var(--berry))} .kl-nav{position:fixed;top:14px;left:0;right:0;z-index:150;pointer-events:none;transition:transform .45s var(--ease)} .admin-bar .kl-nav{top:46px} @media (min-width:783px){.admin-bar .kl-nav{top:46px}} .kl-nav.is-hidden{transform:translateY(-140%)} .kl-nav__inner{pointer-events:auto;max-width:var(--wrap);margin:0 auto;width:calc(100% - 2*var(--gut));display:flex;align-items:center;gap:16px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(255,250,243,.72);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 40px -16px rgba(30,22,51,.35)} .kl-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 20px/1 var(--f-display);letter-spacing:-.03em;color:var(--ink)} .kl-logo__text b{color:var(--tomato);font-weight:800} .kl-logo__mark{position:relative;width:34px;height:34px;flex:none} .kl-logo__mark i{position:absolute;border-radius:50%;animation:kl-orbit 6s linear infinite} .kl-logo__mark i:nth-child(1){inset:4px;background:var(--tomato)} .kl-logo__mark i:nth-child(2){width:14px;height:14px;background:var(--leaf);top:-2px;right:-2px;border-radius:2px 14px;animation:kl-wiggle 3s ease-in-out infinite} .kl-logo__mark i:nth-child(3){width:9px;height:9px;background:var(--mango);bottom:0;left:-1px;animation:kl-bob 2.4s ease-in-out infinite} @keyframes kl-wiggle{50%{transform:rotate(18deg)}} @keyframes kl-bob{50%{transform:translateY(-4px)}} @keyframes kl-orbit{to{filter:hue-rotate(0)}} .kl-nav__links{display:flex;gap:4px;margin-left:auto} .kl-nav__links a{position:relative;padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15.5px;transition:background .2s,color .2s} .kl-nav__links a:hover{background:var(--ink);color:#fff} .kl-nav__play{background:var(--mango-s)} .kl-nav__play::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--tomato);animation:kl-ping 1.6s infinite} @keyframes kl-ping{0%{box-shadow:0 0 0 0 rgba(255,90,54,.6)}100%{box-shadow:0 0 0 10px rgba(255,90,54,0)}} .kl-nav__actions{display:flex;gap:8px} .kl-nav__burger{display:none} @media (max-width:1180px){.kl-nav__links{display:none}.kl-nav__burger{display:inline-grid}.kl-nav__actions{margin-left:auto}} /* Mobile-Menü & Suche */ .kl-menu,.kl-search{position:fixed;inset:0;z-index:300;background:var(--night);color:#fff;display:grid;place-items:center;clip-path:circle(0 at calc(100% - 50px) 40px);transition:clip-path .7s var(--ease)} .kl-menu.is-open,.kl-search.is-open{clip-path:circle(150% at calc(100% - 50px) 40px)} .kl-menu[hidden],.kl-search[hidden]{display:grid!important;visibility:hidden} .kl-menu.is-open,.kl-search.is-open{visibility:visible} .kl-menu nav{display:flex;flex-direction:column;gap:2px;padding:0 24px} .kl-menu nav a{font:800 clamp(36px,9vw,72px)/1.1 var(--f-display);letter-spacing:-.03em;color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--spring),color .2s} .kl-menu nav a span{font:700 14px/1 var(--f-body);color:var(--mango)} .kl-menu nav a:hover{color:var(--mango)} .kl-menu.is-open nav a{opacity:1;transform:none} .kl-menu.is-open nav a:nth-child(2){transition-delay:.05s}.kl-menu.is-open nav a:nth-child(3){transition-delay:.1s}.kl-menu.is-open nav a:nth-child(4){transition-delay:.15s}.kl-menu.is-open nav a:nth-child(5){transition-delay:.2s}.kl-menu.is-open nav a:nth-child(6){transition-delay:.25s}.kl-menu.is-open nav a:nth-child(7){transition-delay:.3s} .kl-menu__close,.kl-search__close{position:absolute;top:24px;right:24px;background:#fff;color:var(--ink)} .kl-menu__mascots{position:absolute;bottom:0;right:4%;display:flex;align-items:flex-end;opacity:.9} .kl-menu__mascots .kl-mascot{width:min(26vw,170px);height:auto} .kl-menu__mascots .kl-mascot--noah{width:min(20vw,130px)} .kl-search form{width:min(860px,90vw)} .kl-search__label{display:block;font:700 14px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mango);margin-bottom:18px} .kl-search input{width:100%;background:transparent;border:0;border-bottom:3px solid rgba(255,255,255,.3);color:#fff;font:800 clamp(32px,6vw,64px)/1.2 var(--f-display);padding:8px 0;outline:none} .kl-search input:focus{border-color:var(--mango)} .kl-search__hints{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .kl-search__hints a{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);text-decoration:none;font-weight:700} .kl-search__hints a:hover{background:var(--mango);color:var(--ink)} /* ========================================================= HERO (Startseite) ========================================================= */ .kl-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(1200px 700px at 80% 20%,#3B2475 0,transparent 60%),radial-gradient(900px 600px at 10% 90%,#4A1F3C 0,transparent 60%),var(--night);color:#fff;isolation:isolate} .kl-hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} .kl-hero__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.25;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")} .kl-hero__fallback{position:absolute;inset:0;z-index:0} .kl-hero.has-webgl .kl-hero__fallback{display:none} .kl-hero__fallback .kl-sticker{position:absolute;width:clamp(70px,10vw,140px);animation:kl-float 7s ease-in-out infinite;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))} .kl-sticker--h0{top:18%;right:12%}.kl-sticker--h1{top:58%;right:30%;animation-delay:-2s!important}.kl-sticker--h2{top:28%;right:38%;animation-delay:-4s!important}.kl-sticker--h3{bottom:12%;right:8%;animation-delay:-1s!important}.kl-sticker--h4{top:8%;right:52%;animation-delay:-3s!important}.kl-sticker--h5{bottom:20%;right:52%;animation-delay:-5s!important} @keyframes kl-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-24px) rotate(8deg)}} .kl-hero__content{position:relative;z-index:2;padding-top:140px;padding-bottom:120px;pointer-events:none} .kl-hero__content a,.kl-hero__content button{pointer-events:auto} .kl-hero__badge{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);font-weight:700;font-size:14px;margin:0 0 26px} .kl-pulse{width:9px;height:9px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(34,181,115,.7);animation:kl-ping 1.6s infinite} .kl-hero__title{color:#fff!important;font-size:clamp(52px,9.4vw,148px)!important;line-height:.92!important;letter-spacing:-.045em!important;max-width:11ch;text-shadow:0 10px 50px rgba(0,0,0,.35)} .kl-line{display:block;overflow:hidden;padding-bottom:.06em} .kl-line>span{display:inline-block;transform:translateY(110%);animation:kl-rise 1.1s var(--ease) forwards} .kl-line:nth-child(2)>span{animation-delay:.12s}.kl-line:nth-child(3)>span{animation-delay:.24s} @keyframes kl-rise{to{transform:none}} .kl-line--swap em{display:inline-block;transition:transform .5s var(--ease),opacity .4s} .kl-line--swap em.is-out{transform:translateY(-40%) rotateX(70deg);opacity:0} .kl-line--swap em.is-in{animation:kl-swapin .6s var(--spring)} @keyframes kl-swapin{from{transform:translateY(60%) rotateX(-70deg);opacity:0}} .kl-hero__lead{max-width:540px;font-size:clamp(17px,1.4vw,21px);color:rgba(255,255,255,.82);margin:28px 0 34px;opacity:0;animation:kl-fade 1s .5s forwards} @keyframes kl-fade{to{opacity:1}} .kl-hero__cta{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:kl-fade 1s .7s forwards} .kl-hero .kl-btn--primary{background:var(--mango);border-color:var(--mango);color:var(--ink)} .kl-hero .kl-btn--primary:hover{background:#fff;border-color:#fff} .kl-hero .kl-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)} .kl-hero .kl-btn--ghost:hover{background:#fff;color:var(--ink)} .kl-hero__proof{display:flex;gap:clamp(20px,4vw,48px);list-style:none;padding:0;margin:48px 0 0;opacity:0;animation:kl-fade 1s .9s forwards} .kl-hero__proof li{display:flex;flex-direction:column} .kl-hero__proof b{font:800 clamp(28px,3vw,40px)/1 var(--f-display);letter-spacing:-.03em} .kl-hero__proof span{font-size:14px;color:rgba(255,255,255,.65);margin-top:6px} .kl-hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)} .kl-hero__scroll span{width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative} .kl-hero__scroll span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:kl-scroll 1.8s infinite} @keyframes kl-scroll{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}} .kl-hero__duo{position:absolute;z-index:3;right:max(3vw,calc((100vw - var(--wrap))/2 + 10px));bottom:0;display:flex;align-items:flex-end;pointer-events:none} .kl-hero__jonas{width:clamp(130px,15vw,230px);height:auto;margin-right:-30px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))} .kl-hero__noah{width:clamp(100px,11vw,170px);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))} .kl-hero__bubble{position:absolute;bottom:100%;right:30%;width:max-content;max-width:260px;background:#fff;color:var(--ink);font:700 15px/1.35 var(--f-body);padding:14px 18px;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-lg);transform-origin:100% 100%;animation:kl-pop .6s 1.4s var(--spring) both;margin-bottom:-6px} .kl-hero__bubble{pointer-events:auto;cursor:pointer;user-select:none} .kl-hero__bubble:hover{transform:scale(1.04) rotate(-1deg)} .kl-hero__bubble.is-swap{animation:kl-pop .5s var(--spring)} @keyframes kl-pop{from{transform:scale(.4);opacity:0}} @media (max-width:860px){.kl-hero__duo{right:8px;opacity:.95}.kl-hero__jonas{width:110px}.kl-hero__noah{width:84px}.kl-hero__bubble{max-width:180px;font-size:13px;right:20%}.kl-hero__content{padding-bottom:230px}.kl-hero__scroll{display:none}} /* Maskottchen-Animation */ .kl-mascot{overflow:visible} .kl-mascot--jonas .m-body,.kl-mascot--jonas .m-head{animation:kl-jbounce 1.6s ease-in-out infinite;transform-origin:100px 260px} .kl-mascot--jonas .m-head{animation-name:kl-jhead} .kl-mascot--jonas .m-arm-r{transform-origin:132px 120px;animation:kl-jwave 1.6s ease-in-out infinite} .kl-mascot--noah .m-body{animation:kl-nbreath 3.6s ease-in-out infinite;transform-origin:100px 260px} .kl-mascot--noah .m-head{animation:kl-nhead 5s ease-in-out infinite;transform-origin:100px 170px} .kl-mascot .m-eyes{transform-box:fill-box;transform-origin:center;animation:kl-blink 5s infinite} .kl-mascot--jonas .m-eyes{animation-duration:3.7s} @keyframes kl-jbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes kl-jhead{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-3deg)}} @keyframes kl-jwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}} @keyframes kl-nbreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.985)}} @keyframes kl-nhead{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}} @keyframes kl-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}} /* Sprechblase */ .kl-says{display:flex;align-items:flex-end;gap:12px;max-width:520px} .kl-says.kl-center{margin:24px auto} .kl-says__fig{width:96px;flex:none} .kl-says--noah .kl-says__fig{width:78px} .kl-says__fig .kl-mascot{width:100%;height:auto} .kl-says__bubble{position:relative;background:#fff;border-radius:22px 22px 22px 6px;padding:14px 18px;box-shadow:var(--shadow);margin-bottom:56px;text-align:left} .kl-says__bubble b{display:block;font:800 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--tomato);margin-bottom:6px} .kl-says--noah .kl-says__bubble b{color:var(--berry)} .kl-says__bubble p{margin:0;font-weight:600;line-height:1.4} /* ---------- Marquee ---------- */ .kl-marquee{background:var(--mango);color:var(--ink);overflow:hidden;padding:18px 0;transform:rotate(-1.4deg) scale(1.04);margin:-26px 0 0;position:relative;z-index:4;box-shadow:0 20px 40px -20px rgba(30,22,51,.4)} .kl-marquee__track{display:flex;gap:44px;width:max-content;animation:kl-marq 40s linear infinite} .kl-marquee span{display:inline-flex;align-items:center;gap:12px;font:800 clamp(18px,1.8vw,24px)/1 var(--f-display);white-space:nowrap;letter-spacing:-.01em} .kl-marquee:hover .kl-marquee__track{animation-play-state:paused} @keyframes kl-marq{to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ .kl-section{padding:clamp(80px,11vw,150px) 0;position:relative} .kl-section--tight{padding:clamp(40px,6vw,70px) 0} .kl-sechead{max-width:760px;margin-bottom:clamp(36px,5vw,60px)} .kl-sechead p:not(.kl-kicker){font-size:clamp(17px,1.3vw,20px);color:var(--muted);margin:18px 0 0} .kl-sechead--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .kl-reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .kl-reveal.is-in{opacity:1;transform:none} /* ---------- Altersrad (3D-Ring) ---------- */ .kl-ages{overflow:hidden;background:linear-gradient(180deg,var(--bg),var(--bg2))} .kl-ring{position:relative} .kl-ring__stage{perspective:1400px;height:clamp(500px,46vw,560px);display:grid;place-items:center;overflow:hidden;touch-action:pan-y} .kl-ring__spin{position:relative;width:clamp(270px,26vw,340px);height:clamp(440px,40vw,490px);transform-style:preserve-3d;cursor:grab} .kl-ring__spin.is-drag{cursor:grabbing} .kl-ring__spin.is-drag .kl-ring__card{transition:none} .kl-ring__card{position:absolute;inset:0;padding:28px;border-radius:var(--r);background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border:2px solid var(--ac-s);overflow:hidden;transition:transform .8s var(--ease),opacity .6s,filter .6s;will-change:transform} .kl-ring__card::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;background:var(--ac-s);z-index:0} .kl-ring__card>*{position:relative;z-index:1} .kl-ring__card:not(.is-front){filter:saturate(.75) brightness(.97);box-shadow:0 20px 40px -24px rgba(30,22,51,.35)} .kl-ring__card:not(.is-front) *{pointer-events:none} .kl-ring__card:not(.is-front){cursor:pointer} .kl-ring__range{font:800 64px/1 var(--f-display);letter-spacing:-.05em;color:var(--ac)} .kl-ring__range small{font:700 14px/1 var(--f-body);letter-spacing:0;color:var(--muted);margin-left:6px} .kl-ring__icon{position:absolute!important;right:22px;top:22px} .kl-ring__icon .kl-ico{width:84px;height:84px;animation:kl-float 6s ease-in-out infinite} .kl-ring__card h3{font-size:30px;margin-top:auto} .kl-ring__tag{font-weight:800;color:var(--ac-d);margin:6px 0 8px} .kl-ring__card p{margin:0 0 6px;color:var(--ink2)} .kl-ring__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px} .kl-ring__links .kl-btn{background:var(--ac);border-color:var(--ac);color:#fff} .kl-ring__ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px} .kl-ring__ctrl [data-ring-prev] .kl-ui{transform:rotate(180deg)} .kl-ring__dots{display:flex;gap:8px} .kl-ring__dots button{width:12px;height:12px;border-radius:999px;border:0;background:rgba(30,22,51,.2);cursor:pointer;transition:width .4s var(--spring),background .3s;padding:0} .kl-ring__dots button.is-on{width:36px;background:var(--ink)} /* ---------- Karten ---------- */ .kl-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .4s;will-change:transform} .kl-card:hover{box-shadow:var(--shadow-lg)} .kl-card__art{position:relative;display:grid;place-items:center;height:190px;background:var(--ac-s);overflow:hidden;transform:translateZ(20px)} .kl-card__blob{position:absolute;width:180px;height:180px;background:var(--ac);opacity:.22;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:kl-blob 12s ease-in-out infinite} @keyframes kl-blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:rotate(0)}50%{border-radius:61% 39% 35% 65%/56% 61% 39% 44%;transform:rotate(180deg)}} .kl-card__float{position:relative;transform:translateZ(60px);transition:transform .6s var(--spring)} .kl-ico--card{width:104px;height:104px;filter:drop-shadow(0 18px 18px rgba(30,22,51,.22))} .kl-card:hover .kl-card__float{transform:translateZ(60px) scale(1.12) rotate(-8deg)} .kl-card__shine{position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none} .kl-card:hover .kl-card__shine{opacity:1} .kl-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 22px;flex:1} .kl-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);font-weight:600} .kl-card__title{font:800 clamp(21px,1.7vw,25px)/1.12 var(--f-display);letter-spacing:-.02em} .kl-card__excerpt{color:var(--muted);font-size:15.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .kl-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--ac-d)} .kl-card__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .4s var(--spring),background .3s} .kl-card:hover .kl-card__go{transform:rotate(-45deg) scale(1.1);background:var(--ac)} .kl-card--page{min-height:140px} .kl-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .kl-bento .kl-card--xl{grid-column:span 2;grid-row:span 2} .kl-bento .kl-card--xl .kl-card__art{height:auto;flex:1;min-height:300px} .kl-bento .kl-card--xl .kl-ico--card{width:190px;height:190px} .kl-bento .kl-card--xl .kl-card__blob{width:340px;height:340px} .kl-bento .kl-card--xl .kl-card__title{font-size:clamp(28px,2.6vw,40px)} .kl-bento .kl-card--wide{grid-column:span 2} .kl-bento .kl-card--wide{flex-direction:row} .kl-bento .kl-card--wide .kl-card__art{width:44%;height:auto} @media (max-width:1100px){.kl-bento{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.kl-bento{grid-template-columns:1fr}.kl-bento .kl-card--xl,.kl-bento .kl-card--wide{grid-column:auto;grid-row:auto}.kl-bento .kl-card--wide{flex-direction:column}.kl-bento .kl-card--wide .kl-card__art{width:auto;height:190px}.kl-bento .kl-card--xl .kl-card__art{min-height:220px}} .kl-grid,.kl-cards3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px} .kl-cards3{grid-template-columns:repeat(3,1fr);margin-top:40px} @media (max-width:980px){.kl-cards3{grid-template-columns:1fr 1fr}} @media (max-width:640px){.kl-cards3{grid-template-columns:1fr}} .kl-card.is-hidden{display:none} .kl-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:18px} /* Rezept-Rail */ .kl-recipes{background:var(--night);color:#fff;overflow:hidden} .kl-recipes .kl-h2{color:#fff} .kl-recipes .kl-kicker{color:var(--mango)} .kl-recipes .kl-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .kl-recipes .kl-btn--ghost:hover{background:#fff;color:var(--ink)} .kl-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:20px 0 40px;cursor:grab} .kl-rail::-webkit-scrollbar{display:none} .kl-rail.is-drag{cursor:grabbing;scroll-snap-type:none} .kl-rail__track{display:flex;gap:22px;padding:0 max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));width:max-content} .kl-card--rail{width:clamp(270px,26vw,340px);scroll-snap-align:start} .kl-card--rail .kl-card__art{height:230px} /* Nährstoff-Universum */ .kl-universe{background:radial-gradient(800px 500px at 70% 50%,var(--berry-s),transparent 70%)} .kl-universe__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center} @media (max-width:900px){.kl-universe__grid{grid-template-columns:1fr}} .kl-universe__text p{color:var(--muted);font-size:18px} .kl-universe__info{margin-top:26px;padding:22px 24px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow);border-left:6px solid var(--ac,var(--berry));min-height:120px;transition:border-color .3s} .kl-universe__info b{font:800 22px/1.1 var(--f-display);display:block;margin-bottom:6px} .kl-universe__info p{margin:0 0 8px;color:var(--ink2)!important;font-size:16px!important} .kl-universe__sphere{position:relative;aspect-ratio:1;width:min(100%,560px);margin:0 auto;perspective:1000px;touch-action:pan-y;cursor:grab} .kl-universe__core{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--mango) 30%,var(--tomato) 70%,#B02A10);box-shadow:0 30px 80px -10px rgba(255,90,54,.55),inset -20px -30px 60px rgba(120,20,0,.35);animation:kl-corepulse 5s ease-in-out infinite} @keyframes kl-corepulse{50%{transform:scale(1.05)}} .kl-orb{position:absolute;left:50%;top:50%;padding:12px 18px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:800 16px/1 var(--f-display);white-space:nowrap;cursor:pointer;box-shadow:0 10px 30px -8px rgba(30,22,51,.35),inset 0 -3px 0 var(--ac);transform:translate(-50%,-50%);transition:background .2s,color .2s;will-change:transform} .kl-orb:hover,.kl-orb.is-on{background:var(--ac);color:#fff} /* Spiele-Teaser */ .kl-playteaser{background:linear-gradient(180deg,var(--bg2),var(--bg))} .kl-playteaser__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center} @media (max-width:900px){.kl-playteaser__grid{grid-template-columns:1fr}} .kl-playteaser__duo{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:360px} .kl-playteaser__duo .kl-mascot--jonas{width:min(48%,260px);height:auto;position:relative;z-index:2;margin-right:-20px} .kl-playteaser__duo .kl-mascot--noah{width:min(36%,190px);height:auto;position:relative;z-index:2} .kl-playteaser__ring{position:absolute;width:min(400px,86vw);aspect-ratio:1;left:calc(50% - min(200px,43vw));bottom:-10px;border-radius:50%;background:conic-gradient(from 0deg,var(--tomato),var(--mango),var(--leaf),var(--sky),var(--berry),var(--tomato));animation:kl-spin 18s linear infinite;opacity:.9;filter:blur(1px)} .kl-playteaser__ring::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--bg2)} @keyframes kl-spin{to{transform:rotate(360deg)}} .kl-playteaser p:not(.kl-kicker){font-size:18px;color:var(--muted)} .kl-gamechips{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 30px} .kl-gamechip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;box-shadow:var(--shadow);text-decoration:none;font-weight:800;border:2px solid var(--ac-s);transition:transform .4s var(--spring),border-color .3s} .kl-gamechip:hover{border-color:var(--ac)} /* Mythos-Flipkarten */ .kl-flips{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:980px){.kl-flips{grid-template-columns:1fr 1fr}} @media (max-width:640px){.kl-flips{grid-template-columns:1fr}} .kl-flip{border:0;padding:0;background:none;perspective:1200px;cursor:pointer;min-height:280px;text-align:left;font:inherit;color:inherit} .kl-flip__inner{position:relative;display:block;height:100%;min-height:280px;transform-style:preserve-3d;transition:transform .9s var(--spring)} .kl-flip[aria-pressed=true] .kl-flip__inner{transform:rotateY(180deg)} .kl-flip:hover .kl-flip__inner{transform:rotateY(8deg) rotateX(4deg)} .kl-flip[aria-pressed=true]:hover .kl-flip__inner{transform:rotateY(172deg) rotateX(4deg)} .kl-flip__face{position:absolute;inset:0;padding:28px;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)} .kl-flip__face small{font:800 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase} .kl-flip__front{background:#fff;border:2px dashed var(--ac)} .kl-flip__front>span{font:800 clamp(22px,2vw,28px)/1.15 var(--f-display);letter-spacing:-.02em} .kl-flip__front small{color:var(--tomato)} .kl-flip__front small::before{content:"✗ "} .kl-flip__front i{margin-top:auto;font-style:normal;font-weight:800;color:var(--ac-d)} .kl-flip__back{background:var(--ac);color:#fff;transform:rotateY(180deg)} .kl-flip__back small::before{content:"✓ "} .kl-flip__back>span{font-size:16.5px;line-height:1.5;font-weight:600} [data-accent=mango] .kl-flip__back,.kl-flip[data-accent=mango] .kl-flip__back{color:var(--ink)} /* Eltern-Stats */ .kl-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media (max-width:1000px){.kl-statgrid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.kl-statgrid{grid-template-columns:1fr}} .kl-bigstat{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:var(--r);background:var(--ac);color:#fff;text-decoration:none;overflow:hidden;min-height:280px;box-shadow:var(--shadow);transition:transform .5s var(--ease)} .kl-bigstat[data-accent=mango]{color:var(--ink)} .kl-bigstat .kl-ico{position:absolute;right:-18px;bottom:-18px;width:132px;height:132px;padding:22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 20px 40px -10px rgba(0,0,0,.25);transform:rotate(-12deg);transition:transform .6s var(--spring)} .kl-bigstat:hover .kl-ico{transform:rotate(6deg) scale(1.1)} .kl-bigstat b{font:800 clamp(44px,4.4vw,64px)/1 var(--f-display);letter-spacing:-.04em} .kl-bigstat>span{font-weight:600;max-width:20ch;position:relative;z-index:1} .kl-bigstat small{margin-top:auto;font-weight:700;opacity:.75;font-size:12px;letter-spacing:.06em;text-transform:uppercase} /* Versprechen */ .kl-promise__card{position:relative;max-width:980px;margin:0 auto;padding:clamp(36px,6vw,80px);border-radius:40px;background:var(--night);color:#fff;overflow:hidden;text-align:center} .kl-promise__card::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 90deg,transparent,rgba(123,92,255,.35),transparent 30%,rgba(34,181,115,.3),transparent 60%,rgba(255,182,39,.3),transparent);animation:kl-spin 20s linear infinite} .kl-promise__card>*{position:relative} .kl-promise__card .kl-h2{color:#fff} .kl-promise__card .kl-kicker{color:var(--mango);justify-content:center} .kl-promise__card p{color:rgba(255,255,255,.8);font-size:18px;max-width:640px;margin:20px auto} .kl-promise__orb{width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);animation:kl-float 6s ease-in-out infinite} .kl-promise__list{list-style:none;padding:0;margin:26px auto 34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .kl-promise__list li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:700;font-size:15px} .kl-promise__list .kl-ui{color:var(--leaf)} .kl-promise .kl-btn--primary{background:var(--mango);color:var(--ink);border-color:var(--mango)} /* ========================================================= Seitenkopf (Hubs/Archive) ========================================================= */ .kl-phero{position:relative;padding:clamp(150px,18vw,220px) 0 clamp(60px,8vw,100px);overflow:hidden;background:var(--ac-s)} .kl-phero__bg span{position:absolute;border-radius:50%;filter:blur(40px);opacity:.6} .kl-phero__bg span:nth-child(1){width:520px;height:520px;background:var(--ac);right:-120px;top:-160px;opacity:.35;animation:kl-drift 16s ease-in-out infinite} .kl-phero__bg span:nth-child(2){width:380px;height:380px;background:var(--mango);left:-120px;bottom:-200px;opacity:.3;animation:kl-drift 20s ease-in-out infinite reverse} .kl-phero__bg span:nth-child(3){width:240px;height:240px;background:#fff;left:40%;top:20%;opacity:.7} @keyframes kl-drift{50%{transform:translate(-60px,40px) scale(1.1)}} .kl-phero__inner{position:relative;z-index:2} .kl-phero__title{font-size:clamp(46px,8vw,120px)!important;letter-spacing:-.045em!important;line-height:.95!important;max-width:14ch} .kl-phero__lead{font-size:clamp(17px,1.5vw,22px);max-width:620px;color:var(--ink2);margin:26px 0 0} .kl-phero__stickers{position:absolute;inset:0;z-index:1;pointer-events:none} .kl-sticker{display:block} .kl-phero .kl-sticker{position:absolute;width:clamp(70px,9vw,130px);filter:drop-shadow(0 18px 24px rgba(30,22,51,.25));transition:transform .2s linear} .kl-phero .kl-sticker .kl-ico{width:100%;height:auto;animation:kl-float 7s ease-in-out infinite} .kl-phero .kl-sticker--0{right:8%;top:30%} .kl-phero .kl-sticker--1{right:22%;bottom:12%}.kl-phero .kl-sticker--1 .kl-ico{animation-delay:-2.5s} .kl-phero .kl-sticker--2{right:30%;top:22%;width:clamp(48px,5vw,70px)}.kl-phero .kl-sticker--2 .kl-ico{animation-delay:-4s} @media (max-width:760px){.kl-phero .kl-sticker{opacity:.35}} /* Filter */ .kl-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px} .kl-filter--tags{margin-bottom:34px} .kl-filter button{display:inline-flex;align-items:baseline;gap:6px;padding:12px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font:700 15px/1 var(--f-body);color:var(--ink);cursor:pointer;transition:all .25s var(--spring)} .kl-filter button small{font-weight:700;color:var(--muted)} .kl-filter button:hover{transform:translateY(-2px);border-color:var(--ink)} .kl-filter button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)} .kl-filter button.is-on small{color:rgba(255,255,255,.7)} .kl-filter--tags button{padding:9px 14px;font-size:14px;background:transparent} /* Altersstufen-Seite */ .kl-agesec{padding:clamp(60px,8vw,110px) 0} .kl-agesec:nth-of-type(even){background:var(--ac-s)} .kl-agesec__head{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,48px);align-items:center} .kl-agesec__head p:not(.kl-kicker){color:var(--ink2);font-size:18px;max-width:620px;margin:12px 0 0} .kl-agesec__num{font:800 clamp(64px,10vw,150px)/.9 var(--f-display);letter-spacing:-.06em;color:var(--ac);-webkit-text-stroke:0} .kl-agesec__icon .kl-ico{width:clamp(80px,9vw,130px);height:auto;animation:kl-float 7s ease-in-out infinite} @media (max-width:760px){.kl-agesec__head{grid-template-columns:1fr}.kl-agesec__icon{display:none}} /* ========================================================= ARTIKEL ========================================================= */ .kl-ahero{position:relative;padding:clamp(140px,15vw,190px) 0 clamp(50px,6vw,80px);background:var(--ac-s);overflow:hidden} .kl-ahero__bg span{position:absolute;border-radius:50%;filter:blur(50px)} .kl-ahero__bg span:nth-child(1){width:560px;height:560px;background:var(--ac);opacity:.28;right:-140px;top:-120px;animation:kl-drift 18s ease-in-out infinite} .kl-ahero__bg span:nth-child(2){width:300px;height:300px;background:#fff;opacity:.8;left:10%;bottom:-160px} .kl-ahero__bg span:nth-child(3){width:220px;height:220px;background:var(--mango);opacity:.25;left:46%;top:10%;animation:kl-drift 14s ease-in-out infinite reverse} .kl-ahero__grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center} @media (max-width:860px){.kl-ahero__grid{grid-template-columns:1fr}.kl-ahero__art{order:-1;height:180px!important}} .kl-crumbs{display:flex;gap:10px;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:22px} .kl-crumbs a{text-decoration:none}.kl-crumbs a:hover{color:var(--ac-d)} .kl-ahero__title{font-size:clamp(38px,5.6vw,80px)!important;letter-spacing:-.04em!important;line-height:1!important} .kl-ahero__lead{font-size:clamp(18px,1.5vw,22px);color:var(--ink2);margin:22px 0 26px;max-width:640px} .kl-ahero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:700;font-size:15px;color:var(--ink2)} .kl-ahero__meta span{display:inline-flex;align-items:center;gap:7px} .kl-ahero__meta .kl-ui{color:var(--ac-d)} .kl-ahero__date{color:var(--muted);font-weight:600!important} .kl-agechips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .kl-agechip{padding:8px 14px;border-radius:999px;background:#fff;border:2px solid var(--ac);text-decoration:none;font-weight:800;font-size:13.5px;color:var(--ac-d);transition:background .2s,color .2s} .kl-agechip:hover{background:var(--ac);color:#fff} .kl-ahero__art{position:relative;height:360px;display:grid;place-items:center} .kl-ahero__disc{position:absolute;width:min(320px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--ac) 80%);box-shadow:0 40px 80px -30px var(--ac),inset 0 -20px 40px rgba(0,0,0,.08)} .kl-ahero__icon{position:relative;animation:kl-float 6s ease-in-out infinite} .kl-ico--hero{width:clamp(130px,16vw,220px);height:auto;filter:drop-shadow(0 30px 30px rgba(30,22,51,.3))} .kl-ahero__orbit{position:absolute;width:min(420px,100%);aspect-ratio:1;border:2px dashed rgba(30,22,51,.15);border-radius:50%;animation:kl-spin 24s linear infinite} .kl-ahero__orbit i{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--tomato);top:-9px;left:50%} .kl-ahero__orbit i:nth-child(2){background:var(--leaf);top:auto;bottom:10%;left:4%} .kl-ahero__orbit i:nth-child(3){background:var(--mango);top:30%;left:auto;right:-9px;width:12px;height:12px} .kl-article__grid{display:grid;grid-template-columns:240px minmax(0,760px);gap:clamp(30px,5vw,80px);justify-content:center;padding-top:clamp(40px,6vw,70px);padding-bottom:40px} @media (max-width:1060px){.kl-article__grid{grid-template-columns:minmax(0,760px)}.kl-toc{display:none!important}} .kl-article__grid:has(>.kl-toc[hidden]){grid-template-columns:minmax(0,820px)} .kl-toc[hidden]{display:none!important} .kl-toc{position:sticky;top:120px;align-self:start;padding:20px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow)} .kl-toc p{margin:0 0 10px;font:800 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .kl-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:t} .kl-toc a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink2);border-left:3px solid transparent;transition:all .2s} .kl-toc a:hover{background:var(--ac-s)} .kl-toc a.is-on{border-color:var(--ac);background:var(--ac-s);color:var(--ink);font-weight:800} .kl-keypoints{position:relative;padding:28px 30px;border-radius:var(--r);background:var(--ink);color:#fff;margin-bottom:42px;overflow:hidden} .kl-keypoints::after{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;background:var(--ac);opacity:.35} .kl-keypoints h2{color:#fff!important;font-size:22px!important;display:flex;align-items:center;gap:10px;margin-bottom:14px!important} .kl-keypoints ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;position:relative;z-index:1} .kl-keypoints li{position:relative;padding-left:32px;font-weight:600;line-height:1.45} .kl-keypoints li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat} /* Fließtext */ .kl-prose{font-size:clamp(17px,1.15vw,19px);line-height:1.72;color:var(--ink2)} .kl-prose>*:first-child{margin-top:0} .kl-prose p{margin:0 0 1.15em} .kl-prose .kl-lead,.kl-prose>p:first-child{font-size:1.18em;color:var(--ink);font-weight:500} .kl-prose h2{font-size:clamp(28px,2.6vw,38px)!important;margin:1.8em 0 .6em!important;scroll-margin-top:120px} .kl-prose h3{font-size:clamp(21px,1.8vw,25px)!important;margin:1.5em 0 .5em!important} .kl-prose a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--ac);text-decoration-thickness:3px;text-underline-offset:3px} .kl-prose a:hover{background:var(--ac-s)} .kl-prose ul,.kl-prose ol{padding-left:1.3em;margin:0 0 1.3em} .kl-prose li{margin-bottom:.45em} .kl-prose ul li::marker{color:var(--ac);font-size:1.2em} .kl-prose ol li::marker{color:var(--ac-d);font-weight:800} .kl-prose strong{color:var(--ink)} .kl-prose table{width:100%;border-collapse:separate;border-spacing:0;margin:1.6em 0;font-size:15.5px;background:#fff;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow);display:block;overflow-x:auto} .kl-prose thead th{background:var(--ink);color:#fff;text-align:left;font-weight:800;padding:14px 16px;white-space:nowrap} .kl-prose td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;line-height:1.45} .kl-prose tbody tr:nth-child(even) td{background:#FFFBF5} .kl-prose td:first-child{font-weight:800;color:var(--ink)} .kl-callout{position:relative;padding:22px 24px 20px 70px;border-radius:var(--r-sm);margin:1.8em 0;background:var(--leaf-s);color:var(--ink)} .kl-callout::before{content:"";position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.4 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/19px no-repeat} .kl-callout>strong{display:block;font:800 19px/1.2 var(--f-display);margin-bottom:6px} .kl-callout p{margin:0!important} .kl-callout p+p{margin-top:.6em!important} .kl-callout--info{background:var(--sky-s)} .kl-callout--info::before{background-color:var(--sky);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E")} .kl-callout--warn{background:var(--tomato-s)} .kl-callout--warn::before{background-color:var(--tomato);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E")} .kl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.8em 0} .kl-stat{padding:20px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow);border-top:5px solid var(--ac);display:flex;flex-direction:column;gap:6px} .kl-stat b{font:800 clamp(26px,2.4vw,34px)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink)} .kl-stat span{font-size:14.5px;line-height:1.35;color:var(--muted);font-weight:600} .kl-faq{margin-top:50px} .kl-faq h2,.kl-sources h2{font-size:clamp(26px,2.4vw,34px)!important;margin-bottom:18px!important;display:flex;align-items:center;gap:10px} .kl-faq details{background:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden} .kl-faq summary{list-style:none;cursor:pointer;padding:20px 22px;font:800 18px/1.3 var(--f-display);display:flex;justify-content:space-between;gap:16px;align-items:center} .kl-faq summary::-webkit-details-marker{display:none} .kl-faq summary span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ac-s);color:var(--ac-d);font-size:22px;transition:transform .4s var(--spring)} .kl-faq details[open] summary span{transform:rotate(45deg);background:var(--ac);color:#fff} .kl-faq details p{margin:0;padding:0 22px 22px;color:var(--ink2)} .kl-sources{margin-top:50px;padding:28px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)} .kl-sources ol{margin:0;padding-left:1.4em;display:grid;gap:12px} .kl-sources li::marker{font-weight:800;color:var(--ac-d)} .kl-sources a{font-weight:700;text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:3px;word-break:break-word} .kl-sources li span{display:block;font-size:13px;color:var(--muted)} .kl-disclaimer{display:flex;gap:16px;align-items:flex-start;margin-top:30px;padding:20px 22px;border-radius:var(--r-sm);background:var(--bg2);font-size:15px;color:var(--ink2)} .kl-disclaimer p{margin:0} .kl-disclaimer .kl-ico{flex:none} .kl-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;font-weight:700} .kl-tag{padding:7px 12px;border-radius:999px;background:var(--ac-s);color:var(--ac-d);text-decoration:none;font-size:14px;font-weight:800} .kl-tag:hover{background:var(--ac);color:#fff} .kl-related{background:var(--bg2)} /* Rezept */ .kl-recipe{display:grid;grid-template-columns:380px 1fr;gap:clamp(30px,4vw,60px);padding-top:clamp(40px,5vw,60px)} @media (max-width:960px){.kl-recipe{grid-template-columns:1fr}} .kl-recipe__ingcard{position:sticky;top:110px;padding:28px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-lg);border-top:8px solid var(--ac)} .kl-recipe__inghead{display:flex;justify-content:space-between;align-items:center;gap:12px} .kl-recipe__inghead h2{font-size:28px} .kl-stepper{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--ac-s)} .kl-stepper button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;font:800 20px/1 var(--f-body);cursor:pointer;color:var(--ink);transition:transform .3s var(--spring)} .kl-stepper button:hover{transform:scale(1.12);background:var(--ink);color:#fff} .kl-stepper output{min-width:30px;text-align:center;font:800 18px/1 var(--f-display)} .kl-recipe__agefrom{font-size:14px;font-weight:700;color:var(--ac-d);margin:12px 0 16px} .kl-ing{list-style:none;padding:0;margin:0 0 18px} .kl-ing li{border-bottom:1px dashed var(--line)} .kl-ing label{display:flex;gap:12px;align-items:baseline;padding:11px 0;cursor:pointer;line-height:1.35} .kl-ing input{appearance:none;flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--ac);transform:translateY(4px);cursor:pointer;transition:background .2s} .kl-ing input:checked{background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat} .kl-ing input:checked~span{text-decoration:line-through;opacity:.5} .kl-ing__amt{font-weight:800;color:var(--ink);min-width:72px} .kl-ing__amt.is-bump{animation:kl-bump .4s var(--spring)} @keyframes kl-bump{50%{transform:scale(1.25);color:var(--ac-d)}} .kl-recipe__allergens{font-size:14px;color:var(--muted)} .kl-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .kl-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--ac-s);font-weight:800;font-size:14px;color:var(--ac-d)} .kl-recipe__h{font-size:clamp(30px,3vw,42px)!important;margin-bottom:24px!important} .kl-steps{list-style:none;padding:0;margin:0 0 40px;display:grid;gap:14px;counter-reset:s} .kl-steps li{display:flex;gap:18px;align-items:flex-start;padding:20px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow);transition:opacity .3s,transform .3s} .kl-steps p{margin:0;font-size:17px;line-height:1.6;color:var(--ink2)} .kl-steps__num{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ac);color:#fff;font:800 19px/1 var(--f-display);cursor:pointer;transition:transform .3s var(--spring)} .kl-steps__num:hover{transform:scale(1.1) rotate(-8deg)} .kl-steps li.is-done{opacity:.45} .kl-steps li.is-done .kl-steps__num{background:var(--ink)} .kl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:640px){.kl-tiles{grid-template-columns:1fr}} .kl-tile{position:relative;padding:24px;border-radius:var(--r);background:var(--ac-s);overflow:hidden} .kl-tile .kl-ico{width:48px;height:48px;margin-bottom:10px} .kl-tile h3{font-size:20px;margin-bottom:8px} .kl-tile p{margin:0;color:var(--ink2);font-size:15.5px} .kl-tile--mascot{padding-right:110px;min-height:190px} .kl-tile__mascot{position:absolute;right:-6px;bottom:-14px;width:110px;height:auto} .kl-tile--mascot[data-accent=berry] .kl-tile__mascot{width:92px} /* Generische Seiten / Elementor-Inhalte */ .kl-elementor{max-width:1100px} .kl-inlinesearch{display:flex;gap:10px;margin-bottom:34px;max-width:640px} .kl-inlinesearch input{flex:1;padding:16px 20px;border-radius:999px;border:2px solid var(--line);font:600 17px var(--f-body);background:#fff} .kl-pager .nav-links{display:flex;gap:8px;justify-content:center;margin-top:40px} .kl-pager .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;border-radius:999px;background:#fff;text-decoration:none;font-weight:800;box-shadow:var(--shadow)} .kl-pager .current{background:var(--ink);color:#fff} /* 404 */ .kl-notfound{padding:180px 0 120px;text-align:center} .kl-notfound__num{display:flex;justify-content:center;align-items:center;font:800 clamp(120px,22vw,280px)/1 var(--f-display);letter-spacing:-.06em;color:var(--ink)} .kl-notfound__apple .kl-ico{width:clamp(100px,18vw,230px);height:auto;animation:kl-float 4s ease-in-out infinite} .kl-notfound p{font-size:19px;color:var(--muted)} /* ========================================================= SPIELECKE ========================================================= */ .kl-bios{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:860px){.kl-bios{grid-template-columns:1fr}} .kl-bio{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:end;padding:26px 26px 0;border-radius:var(--r);background:var(--ac-s);overflow:hidden} .kl-bio__fig .kl-mascot{width:100%;height:auto;display:block} .kl-bio>div:last-child{padding-bottom:26px} .kl-bio h2{font-size:clamp(34px,3.6vw,48px)} .kl-bio h2 small{font:700 16px/1 var(--f-body);color:var(--ac-d);letter-spacing:0;margin-left:6px} .kl-bio p:not(.kl-kicker){color:var(--ink2);margin:10px 0 0} .kl-gamenav{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .kl-gamenav a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;box-shadow:var(--shadow);text-decoration:none;font-weight:800;border:2px solid var(--ac-s);transition:transform .3s var(--spring)} .kl-gamenav a:hover{transform:translateY(-3px);border-color:var(--ac)} .kl-game{padding:clamp(50px,7vw,90px) 0;scroll-margin-top:80px} .kl-game:nth-of-type(even){background:var(--ac-s)} .kl-game__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px} .kl-game__head .kl-says{max-width:440px} .kl-game__head .kl-says__bubble{margin-bottom:40px} .kl-game__stage{position:relative;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-lg);padding:clamp(20px,4vw,44px);min-height:340px;overflow:hidden} /* Quiz */ .kl-quiz__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;font-weight:800;color:var(--muted)} .kl-quiz__bar{flex:1;height:10px;border-radius:999px;background:var(--bg2);overflow:hidden} .kl-quiz__bar span{display:block;height:100%;background:var(--ac);border-radius:999px;transition:width .5s var(--ease)} .kl-quiz__q{font:800 clamp(24px,2.8vw,38px)/1.15 var(--f-display);letter-spacing:-.02em;margin:0 0 24px;display:flex;align-items:center;gap:16px} .kl-quiz__q .kl-ico{width:72px;height:72px;flex:none;animation:kl-float 5s ease-in-out infinite} .kl-quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.kl-quiz__opts{grid-template-columns:1fr}} .kl-quiz__opt{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;font:700 18px/1.3 var(--f-body);color:var(--ink);text-align:left;cursor:pointer;transition:transform .3s var(--spring),border-color .2s,background .2s} .kl-quiz__opt b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg2);font-weight:800} .kl-quiz__opt:hover:not(:disabled){transform:translateY(-3px);border-color:var(--ac)} .kl-quiz__opt.is-right{background:var(--leaf-s);border-color:var(--leaf);animation:kl-bump .5s var(--spring)} .kl-quiz__opt.is-right b{background:var(--leaf);color:#fff} .kl-quiz__opt.is-wrong{background:var(--tomato-s);border-color:var(--tomato);animation:kl-shake .4s} @keyframes kl-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .kl-quiz__opt:disabled{cursor:default} .kl-quiz__explain{margin-top:20px;padding:18px 20px;border-radius:var(--r-sm);background:var(--bg2);font-size:16.5px;animation:kl-pop .4s var(--spring)} .kl-quiz__explain a{font-weight:800;color:var(--ac-d)} .kl-quiz__next{margin-top:18px} .kl-quiz__end{text-align:center;padding:20px 0} .kl-quiz__end b{display:block;font:800 clamp(64px,10vw,120px)/1 var(--f-display);letter-spacing:-.05em;color:var(--ac)} .kl-quiz__end .kl-mascot{width:140px;height:auto;margin:0 auto} .kl-quiz__end p{font-size:20px;font-weight:700;max-width:520px;margin:10px auto 20px} /* Teller */ .kl-plate{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center} @media (max-width:760px){.kl-plate{grid-template-columns:1fr}} .kl-plate__dish{position:relative;aspect-ratio:1;width:min(100%,400px);margin:0 auto;border-radius:50%;background:radial-gradient(circle,#fff 55%,#F3EDE4 56%,#fff 64%,#EDE5DA 100%);box-shadow:0 30px 60px -20px rgba(30,22,51,.35),inset 0 -8px 20px rgba(0,0,0,.05)} .kl-plate__dish .kl-ico{position:absolute;width:22%;height:22%;transform:translate(-50%,-50%);animation:kl-drop .6s var(--spring)} @keyframes kl-drop{from{transform:translate(-50%,-160%) scale(.4);opacity:0}} .kl-plate__colors{display:flex;gap:8px;justify-content:center;margin-top:18px} .kl-plate__colors span{width:34px;height:34px;border-radius:50%;border:3px dashed currentColor;opacity:.4;transition:all .4s var(--spring)} .kl-plate__colors span.is-on{opacity:1;border-style:solid;background:currentColor;transform:scale(1.15)} .kl-plate__foods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .kl-plate__food{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;cursor:pointer;font:700 13.5px/1.2 var(--f-body);color:var(--ink);transition:transform .3s var(--spring),border-color .2s} .kl-plate__food .kl-ico{width:48px;height:48px} .kl-plate__food:hover{transform:translateY(-4px) rotate(-3deg);border-color:var(--ac)} .kl-plate__food.is-used{opacity:.35;transform:none} .kl-plate__msg{font:800 20px/1.3 var(--f-display);margin:18px 0 0;text-align:center;min-height:2.6em} /* Memory */ .kl-memory{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.5vw,16px);max-width:620px;margin:0 auto} .kl-memory__card{aspect-ratio:1;border:0;padding:0;background:none;perspective:800px;cursor:pointer} .kl-memory__in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s var(--spring)} .kl-memory__card.is-open .kl-memory__in,.kl-memory__card.is-match .kl-memory__in{transform:rotateY(180deg)} .kl-memory__f,.kl-memory__b{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center} .kl-memory__f{background:repeating-linear-gradient(45deg,var(--leaf) 0 12px,#2FCB83 12px 24px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12)} .kl-memory__f::after{content:"?";font:800 clamp(26px,4vw,40px)/1 var(--f-display);color:#fff} .kl-memory__b{background:#fff;border:3px solid var(--leaf-s);transform:rotateY(180deg)} .kl-memory__b .kl-ico{width:70%;height:70%} .kl-memory__card.is-match .kl-memory__b{border-color:var(--leaf);animation:kl-bump .5s var(--spring)} .kl-memory__stats{display:flex;justify-content:center;gap:24px;margin:20px 0 0;font-weight:800;color:var(--muted)} /* Ernte */ .kl-ernte{position:relative} .kl-ernte canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:520px;border-radius:var(--r-sm);background:linear-gradient(180deg,#BDEBFA,#E8F8FF 60%,#BFE7A8 60%,#9BD86B);touch-action:none;cursor:none} .kl-ernte__hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;font:800 20px/1 var(--f-display);pointer-events:none} .kl-ernte__hud span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85)} .kl-ernte__overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(22,15,43,.55);border-radius:var(--r-sm);color:#fff;padding:20px} .kl-ernte__overlay[hidden]{display:none} .kl-ernte__overlay h3{color:#fff!important;font-size:clamp(28px,4vw,44px)!important;margin-bottom:8px!important} .kl-ernte__overlay p{margin:0 0 18px;font-weight:600} .kl-ernte__overlay .kl-btn{background:var(--mango);color:var(--ink);border-color:var(--mango)} .kl-confetti{position:fixed;inset:0;pointer-events:none;z-index:400} /* ========================================================= FOOTER ========================================================= */ .kl-footer{position:relative;background:var(--night);color:rgba(255,255,255,.92);padding:110px 0 0;overflow:hidden;margin-top:0} .kl-footer__wave{position:absolute;top:-1px;left:0;right:0;height:70px;background:var(--bg);clip-path:ellipse(60% 100% at 50% 0)} .kl-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;position:relative;z-index:1} @media (max-width:900px){.kl-footer__grid{grid-template-columns:1fr 1fr}.kl-footer__brand{grid-column:1/-1}} .kl-footer h2{color:var(--mango)!important;font:800 14px/1 var(--f-body)!important;letter-spacing:.14em!important;text-transform:uppercase;margin-bottom:18px!important} .kl-footer__grid>div:not(.kl-footer__brand){display:flex;flex-direction:column;gap:10px} .kl-footer__grid a{color:#fff;text-decoration:none;font-weight:600;transition:color .2s} .kl-footer__grid a:hover{color:var(--mango)} .kl-logo--light{color:#fff} .kl-footer__brand p{max-width:420px;margin:18px 0 0} .kl-footer__note{font-size:14px;color:rgba(255,255,255,.82)} .kl-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:30px;margin-top:40px;padding-bottom:20px;font-size:14px;color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.15);position:relative;z-index:1} .kl-footer__veg{display:inline-flex;align-items:center;gap:8px} .kl-footer__giant{font:800 clamp(80px,19vw,300px)/.8 var(--f-display);letter-spacing:-.06em;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);margin-top:10px;white-space:nowrap;user-select:none;transform:translateY(12%)} /* ---------- Druck ---------- */ @media print{.kl-nav,.kl-footer,.kl-progress,.kl-related,.kl-share,.kl-toc,.kl-ahero__art,.kl-stepper,.kl-tiles .kl-mascot,[data-print]{display:none!important}.kl-ahero{padding:20px 0;background:none}.kl-recipe__ingcard{position:static;box-shadow:none}.kl-steps li{box-shadow:none;border:1px solid #ddd}body.kl{background:#fff}} /* ---------- Bewegung reduzieren ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .kl-reveal{opacity:1;transform:none} .kl-line>span{transform:none} .kl-marquee__track{animation:none} } /* ---------- Feinschliff Mobil ---------- */ @media (max-width:700px){ .kl-hero__canvas{opacity:.6} .kl-logo{font-size:17px} .kl-logo__mark{width:28px;height:28px} .kl-nav__inner{padding:6px 6px 6px 14px} .kl-iconbtn{width:42px;height:42px} .kl-ring__range{font-size:48px} .kl-ring__icon .kl-ico{width:56px;height:56px} .kl-ring__card{padding:22px} .kl-ring__card h3{font-size:26px} .kl-hero__proof{gap:18px} .kl-section{padding:70px 0} .kl-says__fig{width:72px} .kl-says--noah .kl-says__fig{width:60px} .kl-quiz__q .kl-ico{width:52px;height:52px} .kl-plate__foods{grid-template-columns:repeat(3,1fr)} .kl-memory__f::after{font-size:24px} .kl-bio{grid-template-columns:100px 1fr;padding:20px 20px 0} } .kl-ernte{max-width:880px;margin:0 auto} .kl-ernte canvas{max-height:none} /* ---------- Kontakt ---------- */ .kl-contact{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5vw,70px);align-items:start} @media (max-width:900px){.kl-contact{grid-template-columns:1fr}} .kl-contact__list{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px;font-weight:700} .kl-contact__list li{display:flex;gap:10px;align-items:center} .kl-contact__list .kl-ui{color:var(--leaf)} .kl-contact__note{font-size:14.5px;color:var(--muted)} .kl-contact__card{padding:clamp(24px,4vw,40px);border-radius:var(--r);background:#fff;box-shadow:var(--shadow-lg);border-top:8px solid var(--sky)} .kl-form{display:grid;gap:18px} .kl-form label{display:grid;gap:8px;font-weight:700;font-size:15px} .kl-form input[type=text],.kl-form input[type=email],.kl-form select,.kl-form textarea{width:100%;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);font:500 16px/1.4 var(--f-body);color:var(--ink);transition:border-color .2s,background .2s} .kl-form input:focus,.kl-form select:focus,.kl-form textarea:focus{outline:none;border-color:var(--sky);background:#fff} .kl-form__check{display:flex!important;grid-template-columns:none;gap:12px!important;align-items:flex-start;font-weight:500!important;color:var(--ink2)} .kl-form__check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--leaf)} .kl-form .kl-btn{justify-self:start} .kl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .kl-card__new{position:absolute;top:14px;left:14px;z-index:3;padding:6px 11px;border-radius:999px;background:var(--tomato);color:#fff;font:800 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 16px -6px rgba(255,90,54,.7);transform:translateZ(70px) rotate(-4deg)} .kl-recipe__inghead h2{display:flex;align-items:baseline;gap:8px} .kl-recipe__unit{font:700 13px/1 var(--f-body);color:var(--muted);letter-spacing:0} /* ---------- Neue Spiele ---------- */ /* Garten */ .kl-garden{position:relative;text-align:center} .kl-garden__sun{position:absolute;top:-10px;right:10px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#FFE27A,#FFB627);box-shadow:0 0 0 12px rgba(255,182,39,.18),0 0 0 26px rgba(255,182,39,.08);animation:kl-corepulse 4s ease-in-out infinite} .kl-garden__beds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,3vw,30px);max-width:760px;margin:30px auto 0} .kl-bed{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:clamp(190px,26vw,250px);border:0;background:linear-gradient(180deg,#E8F8FF,#DFF5D8);border-radius:var(--r-sm);cursor:pointer;padding:0 0 46px;overflow:hidden;transition:transform .3s var(--spring)} .kl-bed:hover{transform:translateY(-4px)} .kl-bed__soil{position:absolute;left:0;right:0;bottom:0;height:56px;background:repeating-linear-gradient(90deg,#8A5A3B 0 20px,#7A4A2A 20px 40px);border-radius:40% 40% 0 0/30% 30% 0 0} .kl-bed__plant{position:relative;z-index:1;width:70%;max-width:150px;margin-bottom:-10px;transform-origin:50% 100%} .kl-bed__plant svg{width:100%;height:auto;display:block;animation:kl-grow .6s var(--spring)} @keyframes kl-grow{from{transform:scale(.3);opacity:0}} .kl-bed__hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;padding:6px 14px;border-radius:999px;background:#fff;font:800 14px/1 var(--f-body);color:var(--ink);box-shadow:var(--shadow);white-space:nowrap} .kl-bed[data-stage="4"] .kl-bed__hint{background:var(--tomato);color:#fff!important;animation:kl-bump 1s ease-in-out infinite} .kl-bed.is-water::before{content:"💧 💧 💧";position:absolute;top:10px;left:0;right:0;font-size:22px;animation:kl-rain 1s linear} @keyframes kl-rain{from{transform:translateY(-20px);opacity:0}50%{opacity:1}to{transform:translateY(80px);opacity:0}} .kl-bed.is-pick .kl-bed__plant{transition:transform .5s var(--ease),opacity .5s;transform:translateY(-120px) scale(.4);opacity:0} .kl-garden__basket{font:800 20px/1 var(--f-display);margin:22px 0 0} /* Smoothie */ .kl-mix{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start} @media (max-width:760px){.kl-mix{grid-template-columns:1fr}} .kl-mix__shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} @media (max-width:520px){.kl-mix__shelf{grid-template-columns:repeat(3,1fr)}} .kl-mix__shelf .kl-plate__food.is-used{opacity:1;border-color:var(--ac);background:var(--ac-s)} .kl-mix__machine{display:flex;flex-direction:column;align-items:center} .kl-mix__jar{position:relative;width:170px;height:220px;border:6px solid rgba(30,22,51,.15);border-top:0;border-radius:0 0 34px 34px;background:rgba(255,255,255,.6);overflow:hidden} .kl-mix__lid{position:absolute;top:0;left:-6px;right:-6px;height:14px;background:var(--ink);border-radius:8px} .kl-mix__fill{position:absolute;left:0;right:0;bottom:0;top:30px;display:flex;flex-direction:column-reverse;transition:background .8s} .kl-mix__fill i{flex:1;max-height:48px;transition:all .4s var(--spring)} .kl-mix__jar.is-shaking{animation:kl-shake .12s linear infinite} .kl-mix__jar.is-mixed .kl-mix__fill{box-shadow:inset 0 10px 0 rgba(255,255,255,.35)} .kl-mix__base{width:200px;height:56px;background:var(--berry);border-radius:14px 14px 22px 22px;display:grid;place-items:center;margin-top:-4px} .kl-mix__base span{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)} .kl-mix__btns{display:flex;gap:10px;align-items:center;margin-top:18px} .kl-mix__btns .kl-btn:disabled{opacity:.4;cursor:not-allowed} .kl-mix__info{grid-column:1/-1;margin:0!important} /* Wo wächst das */ .kl-grow__tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:90px;padding:14px;border-radius:var(--r-sm);background:var(--bg2);margin-bottom:20px} .kl-grow__item{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;padding:10px 6px;border-radius:14px;border:2px solid var(--line);background:#fff;cursor:grab;font:700 13px/1.2 var(--f-body);color:var(--ink);transition:transform .3s var(--spring),border-color .2s} .kl-grow__item .kl-ico{width:44px;height:44px} .kl-grow__item:hover{transform:translateY(-3px) rotate(-3deg)} .kl-grow__item.is-sel{border-color:var(--ac);background:var(--ac-s);transform:scale(1.08)} .kl-grow__item:disabled{cursor:default;transform:none;width:76px;padding:6px 4px;font-size:11.5px} .kl-grow__item:disabled .kl-ico{width:34px;height:34px} .kl-grow__zones{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media (max-width:760px){.kl-grow__zones{grid-template-columns:1fr 1fr}} .kl-grow__zone{min-height:150px;padding:12px;border-radius:var(--r-sm);border:3px dashed var(--line);background:#fff;cursor:pointer;transition:border-color .2s,background .2s} .kl-grow__zone[data-zone=erde]{background:linear-gradient(180deg,#fff 30%,#F3E3D3)} .kl-grow__zone[data-zone=baum]{background:linear-gradient(180deg,#fff 30%,#DFF5D8)} .kl-grow__zone[data-zone=strauch]{background:linear-gradient(180deg,#fff 30%,#E9E3FF)} .kl-grow__zone[data-zone=beet]{background:linear-gradient(180deg,#fff 30%,#FFF0CC)} .kl-grow__zone b{display:block;font:800 15px/1.2 var(--f-display);margin-bottom:8px} .kl-grow__zone.is-over{border-color:var(--ac);border-style:solid} .kl-grow__zone.is-wrong{animation:kl-shake .4s;border-color:var(--tomato)} .kl-grow__in{display:flex;flex-wrap:wrap;gap:6px} /* Detektiv */ .kl-det{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center} @media (max-width:640px){.kl-det{grid-template-columns:1fr}.kl-det__vs{text-align:center}} .kl-det__vs{font:800 26px/1 var(--f-display);color:var(--muted)} .kl-label{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:transform .3s var(--spring),border-color .2s} .kl-label:hover:not(:disabled){transform:translateY(-4px) rotate(-1deg);border-color:var(--ac)} .kl-label__name{font:800 21px/1.2 var(--f-display)} .kl-label__table{display:flex;flex-direction:column;gap:6px;padding:12px;border:2px solid var(--ink);border-radius:8px;font-size:14px} .kl-label__table>span:first-child{font-weight:800;border-bottom:2px solid var(--ink);padding-bottom:6px} .kl-label__table>span:last-child{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .kl-label__table i{font-style:normal;color:var(--muted);font-size:13px} .kl-label__table b{font:800 22px/1 var(--f-display)} .kl-label.is-max{border-color:var(--ac);background:var(--ac-s)} .kl-label.is-min{opacity:.75} .kl-label:disabled{cursor:default} /* Runner */ .kl-runner canvas{aspect-ratio:960/420;background:#E8F8FF;cursor:pointer} /* Teller-Baumeister */ .kl-plan{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start} @media (max-width:860px){.kl-plan{grid-template-columns:1fr}} .kl-plan__group{margin-bottom:18px} .kl-plan__group h4{font:800 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px} .kl-plan__chips{display:flex;flex-wrap:wrap;gap:8px} .kl-plan__chip{padding:10px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font:700 14.5px/1.2 var(--f-body);color:var(--ink);cursor:pointer;transition:all .25s var(--spring)} .kl-plan__chip:hover{border-color:var(--leaf)} .kl-plan__chip.is-on{background:var(--leaf);border-color:var(--leaf);color:#fff} .kl-plan__chip.is-on::before{content:"✓ "} .kl-plan__lights{position:sticky;top:110px;padding:22px;border-radius:var(--r);background:var(--night);color:#fff} .kl-plan__lights h4{font:800 20px/1 var(--f-display);margin:0 0 14px;color:#fff} .kl-plan__lights ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px} .kl-plan__lights li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center} .kl-plan__lights li a{color:#fff;font-weight:800;text-decoration:none} .kl-plan__lights li a:hover{text-decoration:underline} .kl-plan__lights li small{grid-column:2;color:rgba(255,255,255,.75);font-size:13px;line-height:1.3} .kl-light{grid-row:span 2;width:18px;height:18px;border-radius:50%;background:#E8354B;box-shadow:0 0 0 4px rgba(232,53,75,.2);transition:all .3s} li[data-lvl="1"] .kl-light{background:#FFB627;box-shadow:0 0 0 4px rgba(255,182,39,.25)} li[data-lvl="2"] .kl-light{background:#22B573;box-shadow:0 0 0 4px rgba(34,181,115,.25)} .kl-plan__combo{font-weight:700;color:var(--mango);font-size:14.5px;min-height:1.4em} .kl-plan__note{font-size:13px;color:rgba(255,255,255,.75);line-height:1.45} .kl-plan__lights .kl-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} /* Hover-Farben absichern */ body.kl a.kl-card,body.kl a.kl-card:hover{color:var(--ink)} body.kl a.kl-card:hover .kl-card__title{color:var(--ink)} /* ========================================================= ERNÄHRUNGSSTILE ========================================================= */ .kl-nav__links a{padding:12px 13px} @media (max-width:1320px){.kl-nav__links a{padding:10px 9px;font-size:14.5px}} .kl-card__chips{display:inline-flex;flex-wrap:wrap;gap:6px} .kl-dchip{display:inline-block;padding:5px 9px;border-radius:999px;font:800 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor} .kl-dchip--vegan{color:#0F7A4A;background:#fff} .kl-dchip--vegetarisch{color:#A86E00;background:#fff} .kl-dchip--pescetarisch{color:#137FA3;background:#fff} .kl-dchip--mischkost{color:#C7361A;background:#fff} .kl-ahero__meta .kl-dchip{font-size:12px;padding:6px 11px} .kl-filter--diets{margin-bottom:16px} .kl-filter--diets button{align-items:center} .kl-filter--diets .kl-ico--xs{vertical-align:middle} /* Tipp-Box */ .kl-stylebox{margin:40px 0;padding:26px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);border:2px solid var(--berry-s)} .kl-recipe__main .kl-stylebox{margin:0 0 30px} .kl-stylebox__head h2{font-size:clamp(22px,2vw,28px)!important;display:flex;align-items:center;gap:10px;margin:0 0 6px!important} .kl-stylebox__head p{margin:0 0 16px;color:var(--muted);font-size:15.5px} .kl-stylebox__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .kl-stylebox__tabs button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font:800 14px/1 var(--f-body);color:var(--ink);cursor:pointer;transition:all .25s var(--spring)} .kl-stylebox__tabs button:hover{border-color:var(--ac)} .kl-stylebox__tabs button[aria-selected=true]{background:var(--ac);border-color:var(--ac);color:#fff} .kl-stylebox__tabs button[aria-selected=true][data-accent=mango]{color:var(--ink)} .kl-stylebox__panel{padding:16px 18px;border-radius:var(--r-sm);background:var(--ac-s);animation:kl-pop .35s var(--spring)} .kl-stylebox__panel p{margin:0!important;font-size:16.5px;line-height:1.55;color:var(--ink)} /* Startseite: Wie esst ihr? */ .kl-dietsec{background:linear-gradient(180deg,var(--bg2),var(--bg))} .kl-dietrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} @media (max-width:980px){.kl-dietrow{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.kl-dietrow{grid-template-columns:1fr 1fr}} .kl-dietpill{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 12px 18px;border-radius:var(--r);border:3px solid transparent;background:#fff;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink);transition:transform .4s var(--spring),border-color .25s} .kl-dietpill__icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--ac-s);margin-bottom:8px;transition:transform .5s var(--spring)} .kl-dietpill__icon .kl-ico{width:52px;height:52px} .kl-dietpill:hover .kl-dietpill__icon{transform:rotate(-10deg) scale(1.08)} .kl-dietpill b{font:800 19px/1.1 var(--f-display)} .kl-dietpill small{color:var(--muted);font-weight:700;font-size:13px} .kl-dietpill[aria-pressed=true]{border-color:var(--ac);background:var(--ac-s)} .kl-dietpill[aria-pressed=true]::after{content:"✓";position:absolute;top:10px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px} .kl-dietrow__msg{text-align:center;font-weight:700;margin:18px 0 0;min-height:1.5em} .kl-dietrow__msg a{color:var(--ac-d,var(--tomato));font-weight:800} /* Hub-Seite */ .kl-diets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px} .kl-diet{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);border:3px solid var(--ac-s);scroll-margin-top:110px;transition:border-color .25s} .kl-diet.is-picked{border-color:var(--ac)} .kl-diet__icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--ac-s)} .kl-diet__icon .kl-ico{width:48px;height:48px} .kl-diet h3{font-size:26px} .kl-diet h3 small{font:700 14px/1 var(--f-body);color:var(--ac-d);margin-left:6px;letter-spacing:0} .kl-diet p{margin:0;color:var(--ink2)} .kl-diet__links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:auto;padding-top:10px} .kl-diet__links .kl-btn{background:var(--ac);border-color:var(--ac);color:#fff} .kl-diet[data-accent=mango] .kl-diet__links .kl-btn{color:var(--ink)} .kl-diet__pick{position:absolute;top:22px;right:22px;padding:8px 12px;border-radius:999px;border:2px solid var(--ac);background:#fff;font:800 13px/1 var(--f-body);color:var(--ac-d);cursor:pointer} .kl-diet.is-picked .kl-diet__pick{background:var(--ac);color:#fff} .kl-diet.is-picked .kl-diet__pick span::before{content:"✓ "} /* Teller-Baumeister Stile */ .kl-plan__styles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .kl-plan__styles button{padding:11px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font:800 15px/1 var(--f-body);color:var(--ink);cursor:pointer} .kl-plan__styles button.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .kl-plan__chip[hidden]{display:none} /* ===== Allergien (1.4.0) ===== */ .kl-card.is-al-hidden{display:none} .kl-card__alg{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;margin-right:10px} .kl-card__alg--none{font-size:11.5px;color:var(--muted);font-weight:700} .kl-al{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font:800 11px/1 var(--f-body);text-decoration:none;cursor:help} .kl-al--may{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--ink2);border:0;opacity:.8} .kl-afilter{margin:6px 0 26px;padding:18px 20px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow);border:2px solid var(--sky-s)} .kl-afilter__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-bottom:12px} .kl-afilter__title{margin:0;display:flex;align-items:center;gap:8px;font-size:16px} .kl-afilter__title b{font:800 18px/1 var(--f-display)} .kl-afilter__may{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink2);cursor:pointer} .kl-afilter__may input{width:18px;height:18px;accent-color:var(--tomato)} .kl-afilter__chips{display:flex;flex-wrap:wrap;gap:8px} .kl-achip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 7px;border-radius:999px;border:2px solid var(--line);background:#fff;font:700 14px/1 var(--f-body);color:var(--ink);cursor:pointer;transition:all .2s var(--spring)} .kl-achip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg2);font:800 12px/1 var(--f-body);font-style:normal;color:var(--ink)} .kl-achip:hover{border-color:var(--ink);transform:translateY(-1px)} .kl-achip[aria-pressed=true]{background:var(--tomato-s);border-color:var(--tomato);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--tomato)} .kl-achip[aria-pressed=true] i{background:var(--tomato);color:#fff} .kl-achip--more{display:none} .kl-afilter.is-more .kl-achip--more{display:inline-flex} .kl-achip--toggle{padding:7px 14px;border-style:dashed;color:var(--muted)} .kl-afilter__status{margin:12px 0 0;font-size:15px;min-height:0} .kl-afilter__status:empty{display:none} .kl-afilter__status button{border:0;background:none;padding:0;margin-left:6px;font:inherit;font-weight:800;color:var(--tomato);text-decoration:underline;cursor:pointer} .kl-afilter__note{margin:10px 0 0;font-size:13px;color:var(--muted)} .kl-afilter__note a{color:var(--ink2);font-weight:700} /* Rezept */ .kl-ralg{margin:16px 0 14px;padding:14px 16px;border-radius:var(--r-sm);background:var(--bg)} .kl-ralg__h{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:15px} .kl-ralg__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:13.5px} .kl-ralg__row>span:first-child{flex:0 0 100%;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .kl-ralg__none{font-weight:700;color:var(--leaf);color:#0F7A4A} .kl-alchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 4px;border-radius:999px;background:#fff;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line)} .kl-alchip i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font:800 11px/1 var(--f-body);font-style:normal} .kl-alchip--may{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink2);border-style:dashed} .kl-alchip--may i{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .kl-alchip.is-mine{background:var(--tomato-s);box-shadow:inset 0 0 0 2px var(--tomato)} .kl-alchip.is-mine i{background:var(--tomato);color:#fff;box-shadow:none} .kl-ralg__check{margin:10px 0 6px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:800;line-height:1.35} .kl-ralg__check[data-state=ok]{background:var(--leaf-s);color:#0B5C38} .kl-ralg__check[data-state=swap]{background:var(--mango-s);color:#6B4700} .kl-ralg__check[data-state=no]{background:var(--tomato-s);color:#9A2A10} .kl-ralg__note{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4} .kl-ralg__note a{color:var(--ink2);font-weight:700} .kl-swaps{margin:0 0 30px;padding:26px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);border:2px solid var(--sky-s)} .kl-swaps__head h2{font-size:clamp(22px,2vw,28px)!important;display:flex;align-items:center;gap:10px;margin:0 0 6px!important} .kl-swaps__head p{margin:0 0 16px;color:var(--muted);font-size:15.5px} .kl-swaps__list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .kl-swaps__list li{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--r-sm);background:var(--sky-s)} .kl-swaps__list li p{margin:0!important;font-size:15.5px;line-height:1.5;color:var(--ink)} .kl-swaps__tag{display:inline-flex;align-items:center;gap:7px;font:800 15px/1.2 var(--f-display)} .kl-swaps__tag i{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:800 12px/1 var(--f-body);font-style:normal} .kl-swaps__list li.is-nogo{background:var(--bg2)} .kl-swaps__list li.is-nogo p{color:var(--ink2)} .kl-swaps__list li.is-mine{box-shadow:inset 0 0 0 2px var(--tomato);background:var(--tomato-s)} .kl-swaps__list li.is-mine .kl-swaps__tag i{background:var(--tomato)} @media (max-width:640px){.kl-swaps{padding:20px 16px}.kl-swaps__list li{grid-template-columns:1fr;gap:6px}} /* Hub */ .kl-alpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .kl-alpick__item{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px 16px;border-radius:var(--r-sm);border:2px solid transparent;background:#fff;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink);transition:transform .35s var(--spring),border-color .2s,background .2s} .kl-alpick__item:hover{transform:translateY(-3px)} .kl-alpick__letter{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sky-s);font:800 22px/1 var(--f-display);color:var(--ink)} .kl-alpick__name{font:800 16.5px/1.15 var(--f-display)} .kl-alpick__hint{font-size:12.5px;color:var(--muted);line-height:1.3;margin-top:2px} .kl-alpick__item[aria-pressed=true]{border-color:var(--tomato);background:var(--tomato-s)} .kl-alpick__item[aria-pressed=true] .kl-alpick__letter{background:var(--tomato);color:#fff} .kl-alpick__item[aria-pressed=true]::after{content:"ohne";position:absolute;top:-10px;right:12px;padding:3px 8px;border-radius:999px;background:var(--tomato);color:#fff;font:800 11px/1 var(--f-body);text-transform:uppercase;letter-spacing:.06em} .kl-alpick__msg{text-align:center;font-weight:700;margin:20px 0 14px;min-height:1.5em} .kl-alpick__legal{max-width:760px;margin:22px auto 0;text-align:center;font-size:13.5px;color:var(--muted)} .kl-soon{margin-top:28px;padding:20px 24px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow)} .kl-soon ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px} .kl-soon b{display:inline-block;min-width:56px;color:var(--sky);color:#137FA3} @media print{.kl-swaps__list li{break-inside:avoid}} .kl-albanner{display:flex;align-items:center;gap:20px;margin-top:30px;padding:20px 24px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);border:2px solid var(--sky-s);color:var(--ink);text-decoration:none;transition:transform .4s var(--spring),border-color .25s} .kl-albanner:hover{transform:translateY(-3px);border-color:var(--sky)} .kl-albanner__icon{flex:0 0 64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--sky-s)} .kl-albanner__icon .kl-ico{width:40px;height:40px} .kl-albanner__text{flex:1;font-size:16px;line-height:1.45} .kl-albanner__text b{display:block;font:800 21px/1.15 var(--f-display);margin-bottom:3px} .kl-albanner__letters{display:flex;gap:6px} .kl-albanner__letters i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font:800 16px/1 var(--f-display);font-style:normal;transform:rotate(-6deg)} .kl-albanner__letters i:nth-child(2n){transform:rotate(5deg);background:var(--tomato)} .kl-albanner:hover .kl-card__go{transform:rotate(-45deg) scale(1.1);background:var(--sky)} @media (max-width:760px){.kl-albanner{flex-wrap:wrap;gap:14px}.kl-albanner__letters{display:none}.kl-albanner__icon{flex-basis:52px;height:52px}} /* ===== Erwachsene (1.5.0) ===== */ .kl-filter__sep{flex-basis:100%;height:0} .kl-stagepick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:28px} .kl-stagepick__item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:22px 12px 18px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);text-align:center;border:3px solid transparent;transition:transform .4s var(--spring),border-color .25s} .kl-stagepick__item:hover{border-color:var(--ac)} .kl-stagepick__icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ac-s);margin-bottom:8px;transition:transform .5s var(--spring)} .kl-stagepick__icon .kl-ico{width:44px;height:44px} .kl-stagepick__item:hover .kl-stagepick__icon{transform:rotate(-10deg) scale(1.08)} .kl-stagepick__item b{font:800 clamp(24px,2.4vw,32px)/1 var(--f-display);letter-spacing:-.03em;color:var(--ac-d)} .kl-stagepick__item>span:last-child{font-weight:700;font-size:14px;color:var(--muted)} .kl-agesec__num--word{display:grid;place-items:center} .kl-agesec__num--word .kl-ico{width:clamp(80px,10vw,140px);height:auto} @media (max-width:900px){.kl-stagepick{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.kl-stagepick{grid-template-columns:1fr 1fr}.kl-stagepick__item:first-child{grid-column:1/-1}} /* ===== Rezept-Fotos & Byline (1.6.0) ===== */ .kl-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)} .kl-card:hover .kl-card__photo{transform:scale(1.05)} .kl-card__art:has(.kl-card__photo) .kl-card__blob{display:none} .kl-card__by{display:block;margin-top:-2px;font-size:13.5px;font-weight:700;color:var(--ac-d)} .kl-ahero__photo{position:absolute;inset:6%;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-lg);border:8px solid #fff} .kl-ahero__photo img{width:100%;height:100%;object-fit:cover;display:block} .kl-byline{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:var(--shadow);font-size:14px} .kl-byline b{font-weight:800}