:root{--bg:#f5f5f7;--surface:#ffffff;--surface-2:#f0f1f4;--fg1:#1d1d1f;--fg2:#555e6e;--fg3:#7a8595;--accent:#4b698c;--accent-2:#3a5a7c;--brand:#1a3a6a;--tts-word:#ffd60a;--warning:#f59e0b;--border:rgba(0,0,0,0.08);--border-strong:rgba(0,0,0,0.14);--shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 12px 40px rgba(0,0,0,0.12);--radius-md:16px;--radius-lg:22px;--radius-xl:28px;--radius-pill:980px;--duration:0.35s;--ease:cubic-bezier(0.25,1,0.5,1);--cat-spiele:#e85d5d;--cat-spiele-soft:#fdebe9;--cat-musik:#10b981;--cat-musik-soft:#e6f7f0;--cat-kunst:#8b5cf6;--cat-kunst-soft:#f0eafe;--cat-lernen:#0ea5e9;--cat-lernen-soft:#e3f4fc;--cat-entspannung:#f59e0b;--cat-entspannung-soft:#fdf2d9;--cat-sozial:#4b698c;--cat-sozial-soft:#e8eef4;--cat-color:var(--accent);--cat-soft:var(--surface-2);}*{box-sizing:border-box;margin:0;padding:0;}html{scroll-padding-top:120px;-webkit-font-smoothing:antialiased;}body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:17px;line-height:1.55;letter-spacing:-0.01em;background:var(--bg);color:var(--fg1);min-height:100vh;}img{max-width:100%;display:block;}button{font-family:inherit;cursor:pointer;}a{color:var(--accent);text-decoration:none;transition:color var(--duration) var(--ease);}a:hover{color:var(--accent-2);}.a11y-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 24px;padding-top:max(8px,env(safe-area-inset-top));background:rgba(255,255,255,0.88);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border-bottom:0.5px solid var(--border);}.a11y-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--fg2);font-size:0.95rem;font-weight:500;transition:all var(--duration) var(--ease);}.a11y-btn:hover{color:var(--fg1);background:var(--surface-2);border-color:var(--accent);}.a11y-btn:active{transform:scale(0.97);}.a11y-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}.a11y-btn svg{width:18px;height:18px;flex-shrink:0;}.a11y-bar .grow{flex:1;}.a11y-size-group{display:inline-flex;gap:4px;}.a11y-size-group .a11y-btn{padding:0 12px;min-width:44px;justify-content:center;}.a11y-size-group .a11y-btn:nth-child(1) span{font-size:0.85rem;}.a11y-size-group .a11y-btn:nth-child(2) span{font-size:1.05rem;font-weight:600;}.a11y-size-group .a11y-btn:nth-child(3) span{font-size:1.25rem;font-weight:700;}html[data-fontsize="large"] body{font-size:20px;}html[data-fontsize="xlarge"] body{font-size:23px;}.site-header{position:sticky;top:60px;z-index:40;display:flex;align-items:center;gap:16px;padding:16px 32px;background:rgba(255,255,255,0.78);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border-bottom:0.5px solid var(--border);}.site-header .logo{display:inline-flex;align-items:center;gap:12px;color:var(--fg1);}.site-header .logo img{height:26px;}.site-header .logo-divider{width:1px;height:22px;background:var(--border-strong);}.site-header .product{font-family:'Oswald',sans-serif;font-size:1rem;font-weight:600;letter-spacing:0.01em;}.site-header .product span{color:var(--fg3);font-weight:400;}.site-header .grow{flex:1;}.site-header .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:0.95rem;font-weight:500;}.page{max-width:1180px;margin:0 auto;padding:48px 32px 96px;}.page.narrow{max-width:860px;}.hero{margin-bottom:32px;}.hero .eyebrow{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg3);margin-bottom:8px;}.hero h1{font-family:'Merriweather',serif;font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-0.022em;max-width:22ch;margin-bottom:16px;color:var(--fg1);}.hero p{font-size:18px;color:var(--fg2);max-width:62ch;}.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--fg1);font-size:0.95rem;font-weight:500;transition:all var(--duration) var(--ease);}.chip:hover{background:var(--surface-2);border-color:var(--accent);}.chip.is-active{background:var(--cat-color,var(--accent));border-color:var(--cat-color,var(--accent));color:#fff;}.chip .count{font-size:0.8rem;opacity:0.7;}.chip.is-active .count{opacity:0.85;}.cat-heading{display:flex;align-items:baseline;gap:16px;margin:8px 0 20px;}.cat-heading h2{font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:0.005em;color:var(--fg1);}.cat-heading .count{font-size:0.9rem;color:var(--fg3);}.cat-heading hr{flex:1;border:none;height:1px;background:var(--border);}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:48px;}.game-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;position:relative;transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);color:var(--fg1);display:block;text-decoration:none;}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--fg1);}.game-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--cat-color,var(--accent));z-index:2;}.game-card__thumb{aspect-ratio:4 / 3;background:var(--surface-2);background-size:cover;background-position:center;position:relative;}.game-card__emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(135deg,var(--cat-soft),var(--surface));z-index:1;}.game-card__thumb.has-image .game-card__emoji{display:none;}.game-card__body{padding:14px 18px 18px;}.game-card__title{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:0.005em;margin-bottom:4px;}.game-card__meta{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--fg3);}.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--cat-soft,var(--surface-2));color:var(--cat-color,var(--accent));border-radius:var(--radius-pill);font-size:0.78rem;font-weight:600;}.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cat-color,var(--accent));}[data-cat="spiele"]{--cat-color:var(--cat-spiele);--cat-soft:var(--cat-spiele-soft);}[data-cat="musik"]{--cat-color:var(--cat-musik);--cat-soft:var(--cat-musik-soft);}[data-cat="kunst"]{--cat-color:var(--cat-kunst);--cat-soft:var(--cat-kunst-soft);}[data-cat="lernen"]{--cat-color:var(--cat-lernen);--cat-soft:var(--cat-lernen-soft);}[data-cat="entspannung"]{--cat-color:var(--cat-entspannung);--cat-soft:var(--cat-entspannung-soft);}[data-cat="sozial"]{--cat-color:var(--cat-sozial);--cat-soft:var(--cat-sozial-soft);}[data-cat="kartenspiele"]{--cat-color:var(--cat-spiele);--cat-soft:var(--cat-spiele-soft);}[data-cat="brettspiele"]{--cat-color:var(--cat-spiele);--cat-soft:var(--cat-spiele-soft);}.detail-hero{display:flex;gap:32px;align-items:flex-start;margin-bottom:36px;}.detail-hero__body{flex:1;min-width:0;}.detail-hero__pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}.detail-hero__pills .pill{background:var(--surface-2);color:var(--fg2);}.detail-hero__pills .pill::before{background:var(--fg3);}.detail-hero__pills .pill[data-cat]::before{background:var(--cat-color);}.detail-hero__pills .pill[data-cat]{background:var(--cat-soft);color:var(--cat-color);}.detail-hero h1{font-family:'Merriweather',serif;font-size:clamp(2.5rem,6vw,4rem);line-height:1;letter-spacing:-0.025em;margin-bottom:16px;color:var(--fg1);}.detail-hero__lead{font-size:1.15rem;color:var(--fg2);line-height:1.6;max-width:56ch;}.detail-hero__icon{width:180px;height:180px;flex-shrink:0;background:linear-gradient(135deg,var(--cat-soft),var(--surface));border:0.5px solid var(--border);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;font-size:96px;position:relative;overflow:hidden;}.detail-hero__icon::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--cat-color,var(--accent));}.idea{background:var(--cat-soft,var(--surface-2));border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:40px;display:flex;gap:16px;align-items:flex-start;}.idea__bulb{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--shadow-sm);}.idea__label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--cat-color,var(--accent));margin-bottom:4px;}.idea__text{font-size:1.05rem;color:var(--fg1);font-weight:500;line-height:1.55;}.section-title{font-family:'Oswald',sans-serif;font-size:1.7rem;font-weight:600;margin-bottom:8px;color:var(--fg1);letter-spacing:0.005em;}.section-sub{font-size:0.95rem;color:var(--fg3);margin-bottom:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}.steps-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:0 32px;margin-bottom:48px;}.step{display:flex;gap:22px;padding:22px 0;border-top:0.5px solid var(--border);transition:background var(--duration) var(--ease);}.step:first-child{border-top:0;}.step.is-tts-active{background:rgba(255,214,10,0.10);margin:0 -32px;padding-left:32px;padding-right:32px;}.step__num{width:56px;height:56px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Merriweather',serif;font-weight:700;font-size:1.4rem;color:var(--accent);}.step__body{flex:1;min-width:0;}.step__title{font-family:'Oswald',sans-serif;font-size:1.15rem;font-weight:600;margin-bottom:6px;color:var(--fg1);}.step__text{font-size:1rem;color:var(--fg2);line-height:1.65;max-width:56ch;}.step__text .tts-active{background:var(--tts-word);color:var(--fg1);padding:0 4px;border-radius:4px;box-shadow:0 0 0 2px var(--tts-word);}.step__tip{margin-top:10px;padding:10px 14px;background:#fff8e1;border-left:3px solid var(--warning);border-radius:10px;font-size:0.92rem;color:var(--fg2);display:flex;gap:10px;align-items:flex-start;}.step__img{margin-top:14px;border-radius:14px;border:0.5px solid var(--border);box-shadow:var(--shadow-sm);max-width:100%;}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}.control-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 26px;}.control-card h3{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:600;color:var(--fg1);margin-bottom:2px;}.control-card .hint{font-size:0.78rem;color:var(--fg3);margin-bottom:12px;}.control-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:0.5px solid var(--border);}.control-row:first-of-type{border-top:0;}.control-row .what{font-size:0.95rem;color:var(--fg2);text-align:right;}.keycap{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 10px;background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2.5px;border-radius:8px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.86rem;font-weight:600;color:var(--fg1);}.hash{display:inline-flex;align-items:center;padding:4px 12px;background:var(--surface-2);border-radius:var(--radius-pill);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.82rem;font-weight:600;color:var(--accent);}.touch-note{margin-top:8px;padding:18px 22px;background:var(--surface-2);border-radius:var(--radius-md);font-size:0.95rem;color:var(--fg2);display:flex;gap:14px;align-items:flex-start;line-height:1.55;}.touch-note__icon{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--surface);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;}.cta-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;margin-top:16px;border-top:0.5px solid var(--border);}.cta-row__btns{display:flex;gap:12px;flex-wrap:wrap;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:14px 28px;background:var(--accent);color:#fff;border:1.5px solid transparent;border-radius:var(--radius-pill);font-size:1rem;font-weight:600;box-shadow:0 2px 10px rgba(75,105,140,0.18);transition:transform var(--duration) var(--ease),background var(--duration) var(--ease),box-shadow var(--duration) var(--ease);text-decoration:none;}.btn:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(75,105,140,0.28);color:#fff;}.btn:active{transform:translateY(0);}.btn-lg{min-height:72px;font-size:1.1rem;padding:16px 36px;}.btn-ghost{background:var(--surface);color:var(--fg1);border-color:var(--border-strong);box-shadow:none;}.btn-ghost:hover{background:var(--surface-2);color:var(--fg1);}.qr{display:flex;gap:14px;align-items:center;}.qr__meta{text-align:right;}.qr__meta .label{font-size:0.75rem;color:var(--fg3);margin-bottom:4px;}.qr__meta .url{font-family:ui-monospace,Menlo,monospace;font-size:0.78rem;color:var(--fg3);}.qr__img{width:96px;height:96px;border-radius:12px;background:var(--surface);border:0.5px solid var(--border);padding:6px;}.qr__img img{width:100%;height:100%;}@media (max-width:720px){.page{padding:32px 20px 64px;}.a11y-bar{gap:6px;padding:6px 12px;flex-wrap:wrap;}.a11y-btn{font-size:0.85rem;padding:0 12px;}.a11y-bar .grow{display:none;}.site-header{padding:12px 20px;}.detail-hero{flex-direction:column;gap:20px;}.detail-hero__icon{width:120px;height:120px;font-size:64px;}.controls-grid{grid-template-columns:1fr;}.cta-row{flex-direction:column;align-items:stretch;}.qr{justify-content:flex-end;}.steps-card{padding:0 22px;}.step.is-tts-active{margin:0 -22px;padding-left:22px;padding-right:22px;}.step{flex-direction:column;gap:12px;}.step__num{width:44px;height:44px;font-size:1.1rem;}}@media print{body{background:#fff;}.a11y-bar,.site-header,.cta-row{display:none;}.step,.control-card,.idea{break-inside:avoid;box-shadow:none;border:1px solid #ddd;}.game-card{break-inside:avoid;box-shadow:none;}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;z-index:10;}