:root{font-family:system-ui,sans-serif;color:#172b50;background:#f3f7ff}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:clamp(16px,4vw,36px)}h1{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:8px}header{background:#133c82;color:white;padding:20px;border-radius:22px}header p{max-width:75ch}a{color:#18478d}header a{color:#ffe36c}.controls{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.controls label{flex:1;min-width:230px;font-weight:700}.controls input,.controls select{display:block;width:100%;padding:13px;border:2px solid #7893bc;border-radius:10px;font:inherit;margin-top:7px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}.card{background:white;border-radius:16px;padding:20px;box-shadow:0 4px 16px #142e5218;border:1px solid #d9e3f2}.card h2{font-size:1.18rem;margin:8px 0}.card p{line-height:1.5}.tag{font-size:.83rem;font-weight:700;color:#154b80}.card a{display:inline-block;padding:10px 14px;background:#ffe36c;color:#162b50;border-radius:9px;font-weight:700;text-decoration:none}.notice{border-left:5px solid #e4a71b;background:#fff2cc;padding:16px;margin:20px 0}a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e7a500;outline-offset:3px}#count{font-weight:700}button{padding:12px 16px;align-self:end;border:0;border-radius:10px;background:#ffe36c;color:#172b50;font:inherit;font-weight:700;cursor:pointer}button:focus-visible{outline:3px solid #e7a500;outline-offset:3px}footer{margin-top:24px;font-size:.9rem}
/* Ausdruck: nur die gefilterten Rechner, ohne Bedienfelder. */
@media print{ :root{background:white;color:black}body{background:white}.controls,#share-status,.notice,header p,footer,.skip-link{display:none!important}main{max-width:none;padding:0}header{background:white;color:black;padding:0;border-radius:0}.grid{display:block}.card{break-inside:avoid;page-break-inside:avoid;box-shadow:none;border:1px solid #aaa;margin:0 0 12px;padding:12px}.card a{background:none;color:black;padding:0}.card a::after{content:" (" attr(href) ")";font-size:.8em}#count{margin:12px 0}}
.skip-link{position:absolute;left:-9999px;top:0;background:#ffe36c;color:#172b50;padding:12px;z-index:100}.skip-link:focus{left:12px;top:12px}
/* Mobile: keine überbreiten Eingaben und große, gut erreichbare Bedienelemente. */
.controls>*{min-width:0}.controls label{min-width:min(100%,230px)}
.controls input,.controls select,.controls button{min-height:44px}
.card{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){main{padding:12px}header{padding:18px;border-radius:14px}.controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.controls label{width:100%}.controls button{width:100%;min-height:48px}.grid{grid-template-columns:minmax(0,1fr)}.card{padding:18px}.card a{min-height:44px;display:inline-flex;align-items:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Version 117 – Rechnerwelt im Stil der Buch-Startseite */
@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(../fonts/lato-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Lato;font-weight:700;font-display:swap;src:url(../fonts/lato-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Lato;font-weight:900;font-display:swap;src:url(../fonts/lato-latin-900-normal.woff2) format('woff2')}
:root{font-family:Lato,system-ui,sans-serif;color:#14213d;background:#eef3ff}
body{background:linear-gradient(180deg,#f0f5ff,#fff 75%);line-height:1.55}
.site-nav{background:#12308ff5;color:#fff;position:sticky;top:0;z-index:30;box-shadow:0 3px 15px #081a4b30}
.nav-wrap{max-width:1100px;margin:auto;padding:0 20px;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.site-logo{font-size:19px;font-weight:900;letter-spacing:.4px;color:#ffd23f;text-decoration:none;white-space:nowrap}.site-logo span{color:#9fd0ff}
.site-links{display:flex;flex-wrap:wrap;gap:clamp(9px,1.3vw,19px);align-items:center;justify-content:flex-end}
.site-links a{color:#fff;font-size:clamp(11px,1vw,14px);font-weight:700;text-decoration:none;white-space:nowrap}.site-links a:hover,.site-links a[aria-current]{color:#ffd23f}
main{max-width:1100px;padding:clamp(18px,3vw,36px)}
main>header{background:radial-gradient(ellipse at 78% 35%,#3979f5 0%,#1d4fd8 44%,#12308f 100%);padding:clamp(24px,4vw,48px);border-radius:22px;color:#fff;box-shadow:0 15px 35px #14367e25}
header .back-link{color:#ffe17b;font-size:14px;font-weight:700}
header .eyebrow{display:inline-block;background:#ffd23f;color:#14213d;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:900;letter-spacing:.5px;margin:26px 0 12px;transform:rotate(-1deg)}
header h1{font-size:clamp(29px,4.3vw,51px);font-weight:900;line-height:1.14;margin:8px 0 14px;overflow-wrap:break-word}
header .title-light{color:#a8d7ff}header p:last-child{font-size:clamp(15px,1.7vw,18px);margin-bottom:0;max-width:67ch}
.uppy-dot,.downy-dot{display:inline-block;width:.72em;height:.72em;border-radius:50%;vertical-align:baseline;box-shadow:inset 0 3px 5px #ffffff77,0 2px 3px #081d5366}.uppy-dot{background:#39c72e}.downy-dot{background:#e43b37}
.notice{background:#fff8e3;border-left-color:#ffd23f;border-radius:0 12px 12px 0;color:#263c61}
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin:24px 0 10px}
.controls label{min-width:0;width:100%;font-weight:900;color:#12308f;display:flex;flex-direction:column;justify-content:flex-end;min-height:77px}
.controls label small{font-size:11px;font-weight:400;display:block;color:#48638e}
.controls input,.controls select{width:100%;height:50px;min-height:50px;margin-top:auto;border:2px solid #b5c8ec;border-radius:12px;background:#fff;color:#14213d;padding:10px 14px;font:inherit}
.controls button{align-self:stretch;min-height:48px;margin:0;border-radius:12px;background:#ffd23f;box-shadow:0 3px 0 #e2b319;color:#14213d;font-weight:900;transition:transform .15s ease,background .15s ease}
.controls button:hover,.card a:hover{background:#ffe27a;transform:translateY(-2px)}
#count{color:#12308f;font-weight:900;font-size:17px;margin:24px 0 18px}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr));gap:20px}
.card{background:linear-gradient(145deg,#173e9c,#0c1f5c);color:#fff;border:1px solid #4e75c4;border-radius:18px;padding:24px;box-shadow:0 12px 25px #0c1f5c25;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.card h2{font-size:clamp(20px,2vw,24px);line-height:1.2;font-weight:900;margin:12px 0}
.card p{color:#e6eeff;margin:0 0 20px;flex:1}.tag{color:#ffd23f;font-size:13px;letter-spacing:.3px}
.card a{background:#ffd23f;color:#14213d;border-radius:999px;font-weight:900;padding:12px 20px;margin-top:auto;transition:transform .15s ease,background .15s ease}
footer{color:#48638e;padding-bottom:24px}#share-status{color:#12308f}
a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #e6ad00;outline-offset:3px}
@media(max-width:950px){.nav-wrap{align-items:flex-start;flex-direction:column;padding:12px 20px;gap:8px}.site-links{justify-content:flex-start;gap:10px 16px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.site-nav{position:static}.site-links{gap:8px 14px}.site-links a{font-size:12px}main{padding:14px}main>header{padding:22px 18px;border-radius:16px}header .eyebrow{margin-top:20px;font-size:10px}header h1{font-size:clamp(27px,7.5vw,38px)}.controls{grid-template-columns:minmax(0,1fr);gap:12px}.controls label{min-height:72px}.controls button{min-height:48px}.grid{grid-template-columns:minmax(0,1fr)}.card{padding:22px}}
@media print{.site-nav{display:none!important}:root,body{background:#fff}main>header{background:#fff;color:#000;box-shadow:none}.card{background:#fff;color:#000;box-shadow:none}.card p,.tag{color:#000}.card a{background:none;color:#000}}

/* Version 118 – einheitliche dunkle Rechnerwelt mit den ORIGINAL-Figuren */
:root{background:#06122f;color:#fff}body{background:radial-gradient(ellipse at 50% 0%,#0b388d 0%,#071b4c 40%,#06112b 100%);color:#f3f7ff;min-height:100vh}
.site-nav{background:#080f2d;color:white;border-bottom:1px solid #3a58a2}
main{max-width:1250px}main>header.hero-world{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 15%,#126ce2 0%,#1047a8 48%,#061949 100%);padding:20px 22px 0;border:1px solid #3486e6;box-shadow:0 20px 50px #01081780}
.hero-world::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#6fd8ff13 52%,transparent 75%);pointer-events:none}
.hero-world .back-link{position:relative;z-index:3;display:inline-block;margin:0 0 8px;font-size:13px}
.hero-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:4px;align-items:end;position:relative;z-index:2}
.hero-copy{align-self:center;text-align:center;padding:10px 0 28px;min-width:0}
.hero-copy .eyebrow{font-size:clamp(9px,.9vw,12px);margin:0 0 16px;transform:none}
.hero-copy h1{font-size:clamp(30px,3.6vw,54px);line-height:1.1;margin:8px 0 18px;text-wrap:balance}
.hero-copy p:last-child{margin:0 auto;max-width:54ch;font-size:clamp(13px,1.3vw,17px);line-height:1.55;color:#f4f8ff}
.hero-green{color:#5be87b}.hero-red{color:#ff6971}.hero-copy .title-light{color:#fff}
.hero-mascot{position:relative;align-self:end;display:flex;justify-content:center;align-items:end;min-width:0}
.hero-mascot img{display:block;width:100%;max-width:270px;height:auto;object-fit:contain;filter:drop-shadow(0 9px 16px #00133b80)}
.hero-mascot .speech{position:absolute;top:0;left:0;max-width:160px;padding:8px 12px;border-radius:20px 20px 20px 4px;background:#fff;color:#0d245a;font-size:clamp(10px,1vw,14px);font-weight:900;line-height:1.2;transform:rotate(-6deg);box-shadow:0 4px 12px #03113350}
.hero-mascot-right .speech{left:auto;right:0;transform:rotate(5deg);border-radius:20px 20px 4px 20px}
.hero-spark{position:absolute;right:24px;top:15px;color:#ffd23f;letter-spacing:16px;opacity:.8}
.hero-coins{text-align:center;background:linear-gradient(90deg,transparent,#19b9f77a,transparent);color:#ffd23f;letter-spacing:1em;font-size:15px;height:22px}
.notice{background:#0e285a;color:#dceaff;border:1px solid #3867a4;border-left:5px solid #ffd23f;border-radius:12px}
.controls{background:linear-gradient(140deg,#102e72,#071d52);padding:22px;border:1px solid #3176ca;border-radius:20px;box-shadow:0 14px 30px #020b2890}
.controls label{color:#fff}.controls label small{color:#a9dbff}.controls input,.controls select{background:#0a2259;color:#fff;border-color:#5894d9}.controls input::placeholder{color:#c1d5ef}.controls option{background:#10285c;color:#fff}
.controls button{background:#ffd23f;color:#071b45}#count{color:#83d8ff}#share-status{color:#a7eaff}
.card{background:linear-gradient(150deg,#103b91,#081e52);border-color:#287cdd;box-shadow:0 14px 28px #000b2c90}.card:hover{border-color:#65d6ff;box-shadow:0 14px 34px #1269dd66}
.card .tag{color:#ffe066}.card p{color:#dceaff}.card a{background:#ffd23f;color:#081b45}
footer{color:#b2c8ed}.skip-link:focus{z-index:99}
@media(max-width:850px){.hero-mascot .speech{display:none}.hero-copy h1{font-size:clamp(26px,4.4vw,38px)}.hero-copy .eyebrow{font-size:9px}}
@media(max-width:620px){main>header.hero-world{padding:14px 12px 0}.hero-content{grid-template-columns:1fr 1fr;gap:0}.hero-copy{grid-column:1/-1;grid-row:1;padding:10px 2px 8px}.hero-copy h1{font-size:clamp(30px,8vw,42px)}.hero-copy p:last-child{font-size:14px}.hero-mascot{grid-row:2;max-height:180px}.hero-mascot img{max-width:170px;max-height:180px;object-fit:contain}.hero-mascot-left{grid-column:1}.hero-mascot-right{grid-column:2}.hero-mascot .speech{display:none}.hero-coins{font-size:12px}.controls{padding:16px}.site-links{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:5px}.site-links a{flex-shrink:0}}
@media print{body{background:#fff;color:#000}.hero-mascot,.hero-coins,.hero-spark{display:none!important}.hero-content{display:block}.hero-copy{text-align:left}.hero-copy h1,.hero-copy p:last-child{color:#000}.controls{display:none!important}}

/* Version 119 – finaler visueller Entwurf: kräftige blaue Rechnerwelt */
:root{background:#041338}body{background:radial-gradient(ellipse at 49% 35%,#104aa3 0%,#082966 40%,#041335 88%);color:#fff}
.site-nav{background:#051333;box-shadow:0 5px 18px #010a25a8}.nav-wrap{max-width:1370px;min-height:70px}.site-logo{font-size:clamp(19px,2vw,29px)}.site-links a[aria-current]{border-bottom:2px solid #ffd23f;padding-bottom:6px}
main{max-width:1410px;padding:0 clamp(12px,2.2vw,32px) 30px}
main>header.hero-world{border:0;border-radius:0;box-shadow:none;margin:0 calc(-1*clamp(12px,2.2vw,32px));padding:10px clamp(14px,2vw,34px) 0;background:radial-gradient(ellipse at 50% 35%,#0d2b72 0%,#061944 49%,transparent 75%),linear-gradient(100deg,#087ce2 0%,#0a46a5 24%,#0b2868 55%,#07275e 77%,#082056 100%);min-height:375px}
.hero-world::before{background:linear-gradient(90deg,#06bfff35,transparent 26%,transparent 74%,#ff324a25),repeating-linear-gradient(145deg,transparent 0 74px,#ffffff06 75px 76px);opacity:.8}
.hero-world .back-link{position:absolute;top:8px;left:24px;opacity:.75;font-size:11px}.hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr);align-items:end;min-height:345px}
.hero-copy{padding:26px 0 38px}.hero-copy .eyebrow{background:linear-gradient(180deg,#ffe95c,#ffd02d);padding:8px 20px;color:#081535;box-shadow:0 4px 12px #0005;font-size:clamp(10px,1.05vw,15px)}.hero-copy h1{font-size:clamp(34px,4.6vw,69px);letter-spacing:-.035em;line-height:1.03;text-shadow:0 5px 14px #020a2980;margin:8px 0 20px}.hero-copy p:last-child{font-size:clamp(14px,1.25vw,19px);line-height:1.5}.hero-green{color:#45e7a2}.hero-red{color:#ff5067}
.hero-mascot img{max-width:355px;width:100%;filter:drop-shadow(0 13px 14px #020c3280)}.hero-mascot .speech{top:8px;max-width:175px;padding:12px 15px;font-size:clamp(11px,1.2vw,17px);border:3px solid #09295d;text-align:center;z-index:2}.hero-mascot-left .speech{left:0}.hero-mascot-right .speech{right:0}
.hero-decoration{position:absolute;z-index:1;font-size:clamp(60px,9vw,140px);font-weight:900;color:#28e0ff55;top:80px;left:4%;transform:rotate(-12deg)}.hero-decoration span{font-size:.5em;color:#ffe13b;display:block}.decor-right{left:auto;right:5%;color:#ff426466;transform:rotate(15deg)}.hero-coins{height:16px;background:linear-gradient(90deg,transparent,#19d9ff,transparent);font-size:15px;letter-spacing:.5em;line-height:16px}
.notice{margin:16px 0;background:#102d63;color:#d7e7ff;border-color:#2869ae;border-left-color:#ffd23f;padding:11px 15px;font-size:13px}
.calculator-panel{background:linear-gradient(140deg,#0c3078,#071e51);border:1px solid #1d8bf6;border-radius:24px;box-shadow:0 14px 34px #010b2b80;padding:18px 22px 12px;margin-top:18px}.controls{background:none;border:0;box-shadow:none;padding:0;margin:0;grid-template-columns:1.6fr 1fr 1fr auto;gap:14px}.controls label{font-size:16px}.controls label small{font-size:12px;color:#5fe6ff}.controls input,.controls select{background:#0c397e;border:1px solid #7bbcf3;border-radius:12px;min-height:52px}.controls button{align-self:end;min-height:52px;white-space:nowrap}.controls #share,.controls #print{background:transparent;color:#ffdc43;border:2px solid #ffdc43;box-shadow:none;min-height:43px}.controls #share:hover,.controls #print:hover{background:#ffdc4325}.calculator-panel #count{text-align:right;color:#53e1ff;margin:0 0 0 auto;font-size:16px}.calculator-panel #share-status{margin:4px 0}
.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}.catalog-heading h2{font-size:clamp(22px,2.5vw,30px);margin:0}.catalog-heading a{color:#56e0ff;text-decoration:none;font-weight:900}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{position:relative;background:linear-gradient(155deg,#10489b,#08245f);border:1px solid #188bf0;border-radius:20px;padding:22px 16px 16px;min-height:260px;align-items:stretch}.card-icon{display:block;font-size:46px;line-height:1.1;margin-bottom:8px;filter:drop-shadow(0 6px 8px #00173b80)}.card .tag{font-size:11px;color:#75e2ff;text-transform:uppercase}.card h2{font-size:clamp(18px,1.6vw,24px);margin:8px 0}.card p{font-size:14px;line-height:1.45;margin-bottom:16px}.card a{display:block;text-align:center;border-radius:14px;padding:11px 8px;margin-top:auto;background:linear-gradient(#ffe65c,#ffcc27)}
@media(min-width:1100px){.hero-mascot img{max-width:370px}}
@media(max-width:1100px){.controls{grid-template-columns:repeat(3,minmax(0,1fr))}.controls #reset{grid-column:1}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.hero-mascot .speech{display:none}.hero-content{grid-template-columns:1fr 1.5fr 1fr;min-height:260px}.hero-copy h1{font-size:clamp(27px,4.5vw,43px)}.hero-copy .eyebrow{font-size:9px;padding:7px}.hero-copy p:last-child{font-size:12px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){main>header.hero-world{min-height:0}.hero-content{grid-template-columns:1fr 1fr;min-height:0}.hero-copy{grid-column:1/-1;grid-row:1;padding:30px 5px 12px}.hero-copy h1{font-size:clamp(31px,8vw,46px)}.hero-copy p:last-child{font-size:14px}.hero-mascot{grid-row:2;max-height:175px}.hero-mascot img{max-height:175px;max-width:175px}.hero-decoration{top:180px;font-size:55px}.calculator-panel{padding:14px}.controls{grid-template-columns:1fr}.controls #reset{grid-column:auto}.controls button{width:100%}.calculator-panel #count{text-align:center;margin:12px 0 0}.grid{grid-template-columns:1fr}.catalog-heading h2{font-size:21px}.catalog-heading a{font-size:12px}.card{min-height:230px}.site-logo{font-size:20px}}
@media print{.hero-decoration,.catalog-heading,.card-icon{display:none!important}.calculator-panel{display:none!important}.grid{display:block}.card{min-height:0}}

/* V120 – durchgängige hochwertige Kartenwelt für sämtliche 55 Rechner */
.grid{gap:16px;align-items:stretch}
.card{display:grid;grid-template-columns:38% minmax(0,1fr);grid-template-rows:minmax(152px,1fr) auto;gap:0 12px;padding:18px 15px 16px;min-height:248px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 12% 8%,#1769c7 0%,transparent 54%),linear-gradient(145deg,#0b3d8e 0%,#07245c 68%,#061a47 100%);border:1px solid #2a8ef2;box-shadow:inset 0 1px #7acaff33,0 12px 24px #000b2b80;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff0c,transparent 42%);pointer-events:none;z-index:-1}
.card:hover{transform:translateY(-4px);border-color:#7ee3ff;box-shadow:0 16px 34px #0078f044,inset 0 1px #a8eaff44}
.card-visual{position:relative;grid-column:1;grid-row:1;display:grid;place-items:center;align-self:center;min-width:0;min-height:120px}
.card-visual::before{content:"";position:absolute;width:min(100%,145px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffffff6b,#8be9ff2a 38%,#2070df22 65%,transparent 75%);filter:blur(1px)}
.card-visual::after{content:"";position:absolute;width:90%;height:19px;bottom:2px;background:#000e3d80;filter:blur(10px);border-radius:50%}
.card-icon{position:relative;z-index:1;font-size:clamp(65px,6.8vw,105px);line-height:1.15;margin:0;filter:drop-shadow(0 10px 8px #0012399c);transform:rotate(-7deg);transition:transform .2s ease}
.card:hover .card-icon{transform:rotate(0) scale(1.06)}
.card[data-tone="rose"] .card-visual::before{background:radial-gradient(circle,#ffacd355,transparent 72%)}
.card[data-tone="lime"] .card-visual::before,.card[data-tone="mint"] .card-visual::before{background:radial-gradient(circle,#8dffa84d,transparent 72%)}
.card[data-tone="gold"] .card-visual::before{background:radial-gradient(circle,#ffe17755,transparent 72%)}
.card[data-tone="coral"] .card-visual::before{background:radial-gradient(circle,#ff99744a,transparent 72%)}
.card-content{grid-column:2;grid-row:1;min-width:0;align-self:center}
.card .tag{display:inline-block;font-size:10px;letter-spacing:.07em;font-weight:900;color:#7ce7ff;text-transform:uppercase;margin-bottom:6px}
.card h2{font-size:clamp(17px,1.5vw,23px);line-height:1.18;margin:4px 0 10px;font-weight:900;color:#fff;hyphens:auto}
.card p{font-size:clamp(12px,1vw,14px);line-height:1.4;color:#d4f0ff;margin:0;overflow-wrap:anywhere}
.card a{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:15px;border-radius:13px;background:linear-gradient(180deg,#ffeb68,#ffd02d);color:#081a40;font-size:15px;font-weight:900;text-decoration:none;box-shadow:inset 0 1px #fff6a5,0 5px 12px #001a4d55}
.card a:hover{background:linear-gradient(180deg,#fff3a0,#ffdc45)}
@media(min-width:1100px){.card{grid-template-columns:40% minmax(0,1fr);gap:0 10px}.card-icon{font-size:clamp(60px,6vw,95px)}}
@media(min-width:621px) and (max-width:1099px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-icon{font-size:clamp(75px,9vw,110px)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}.card{grid-template-columns:36% minmax(0,1fr);min-height:210px;padding:16px}.card-visual{min-height:112px}.card-icon{font-size:clamp(72px,17vw,104px)}.card h2{font-size:19px}.card a{width:100%;min-height:48px}}
@media(max-width:360px){.card{grid-template-columns:30% minmax(0,1fr);gap:0 8px}.card-icon{font-size:60px}.card h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.card,.card-icon{transition:none}.card:hover,.card:hover .card-icon{transform:none}}
@media print{.card{display:block;min-height:0;background:white!important;color:#000!important;box-shadow:none}.card-visual{display:none}.card-content{display:block}.card h2,.card p,.card .tag{color:#000}.card a{background:none;box-shadow:none;color:#000}}

/* V121: handpicked glossy 3D illustrations sourced from approved visual concept. */
.card{grid-template-columns:39% minmax(0,1fr);background:radial-gradient(ellipse at 16% 9%,#1158b2 0%,#0b357b 48%,#071d53 100%);border-color:#148dff;box-shadow:inset 0 1px 0 #a2ddff35,0 12px 26px #00113675;min-height:242px}
.card-visual{min-height:125px;display:flex;align-items:center;justify-content:center;overflow:visible}
.card-visual::before,.card-visual::after{display:none}
.card-art{display:block;position:relative;z-index:1;width:100%;max-width:155px;height:auto;object-fit:contain;filter:drop-shadow(0 7px 9px #00113d70);transition:transform .2s ease}
.card:hover .card-art{transform:translateY(-3px) scale(1.045)}
.card-content{align-self:center}
.card h2{font-size:clamp(16px,1.55vw,23px)}
.card a{min-height:47px}
@media(max-width:620px){.card{grid-template-columns:37% minmax(0,1fr)}.card-art{max-width:155px}}
@media(prefers-reduced-motion:reduce){.card-art{transition:none}.card:hover .card-art{transform:none}}
@media print{.card-art{display:none}}

/* V122: featured list and expandable category directory */
.section-intro{color:#bfe8ff;margin:6px 0 20px;font-size:1.05rem}.directory{margin-top:54px}.directory-group{margin:14px 0;border:1px solid #288df5;border-radius:18px;background:linear-gradient(120deg,#071a4a,#10377b);overflow:hidden}.directory-group summary{cursor:pointer;padding:22px 25px;font-size:clamp(19px,2vw,26px);font-weight:850;color:#fff;list-style-position:inside}.directory-group summary:hover,.directory-group[open] summary{background:#1763b94d;color:#ffda4c}.directory-group>.grid{padding:18px}.directory-group .card{min-width:0}.top-grid{margin-bottom:24px}#directory{scroll-margin-top:110px}@media(max-width:620px){.directory-group summary{padding:16px}.directory-group>.grid{padding:10px}}