{"StartWeb390":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" lang=\"de\" style=\"position:relative;width:390px;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;right:0;height:1000px\"></div><div class=\"bayati-muster\"></div>\n<div style=\"position:relative\"><header style=\"position:sticky;top:0;z-index:5;height:64px;box-sizing:border-box;padding:0 8px 0 20px;display:flex;align-items:center;gap:8px;background:var(--background);border-bottom:1px solid var(--divider)\"><a href=\"#\" class=\"t-titel\" style=\"flex:1;text-decoration:none;color:var(--textPrimary)\">Bayati</a><a href=\"#\" class=\"t-knopf\" style=\"height:40px;box-sizing:border-box;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Start for free</a><span role=\"button\" aria-label=\"Menu\" style=\"width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--textPrimary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M4 6h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 18h16\"></path></svg></span></header>\n<div style=\"box-sizing:border-box;padding:40px 20px 0;display:flex;flex-direction:column;gap:96px\">\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:24px\"><h1 class=\"t-anzeige\" style=\"margin:0;font-size:40px;line-height:48px;text-wrap:pretty\">Maths that sticks.</h1><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty;\">Short lessons, questions that reshuffle every time, and a learning path that shows you what you need first. Grades 7 to 10.</p><div style=\"display:flex;flex-direction:column;gap:10px;align-items:stretch\"><a href=\"#\" class=\"t-knopf\" style=\"height:56px;box-sizing:border-box;padding:0 36px;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:18px;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Start for free</a><span class=\"t-meta\" style=\"color:var(--textSecondary)\">No sign-up. Create an account later if you like.</span></div></div><div style=\"position:relative;display:flex;justify-content:center;padding:32px 0 24px\"><div style=\"width:297px;height:624px;flex:none;box-sizing:border-box;padding:8px;border-radius:43px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:281px;height:608px;overflow:hidden;border-radius:35px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.72\"><dc-import name=\"LernenStart\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></div></div></div><div aria-hidden=\"true\" style=\"position:absolute;left:-8px;top:0;z-index:2;box-sizing:border-box;padding:12px 16px;display:flex;align-items:center;gap:10px;background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);border-radius:var(--radius-card);transform:rotate(-2deg);white-space:nowrap\"><div style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Formula</span><span class=\"bayati-karo t-ziffern\" style=\"display:block;padding:10px 14px;background-color:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-md);font-size:17px;line-height:24px\">(a + b)² = a² + 2ab + b²</span></div></div><div aria-hidden=\"true\" style=\"position:absolute;right:-8px;bottom:0;z-index:2;box-sizing:border-box;padding:12px 16px;display:flex;align-items:center;gap:10px;background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);border-radius:var(--radius-card);transform:rotate(1.5deg);white-space:nowrap\"><span class=\"t-ziffern\" style=\"width:36px;height:36px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);background:var(--background);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700\">M</span><span class=\"t-klein-betont\" style=\"font-weight:600\">Brave Fox challenges you</span></div></div></section>\n<section style=\"display:flex;flex-direction:column\"><h2 class=\"t-anzeige\" style=\"margin:0 0 24px;font-size:30px;line-height:38px;text-wrap:pretty\">What is Bayati?</h2><div style=\"display:flex;flex-direction:column;gap:16px;padding:32px 0;border-top:1px solid var(--divider)\"><h3 class=\"t-titel\" style=\"margin:0;text-wrap:balance\">Who is Bayati for?</h3><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty\">For all of <strong style=\"font-weight:600;color:var(--textPrimary)\">secondary school</strong>. <strong style=\"font-weight:600;color:var(--textPrimary)\">38 chapters</strong> with <strong style=\"font-weight:600;color:var(--textPrimary)\">353 topics</strong>, in order from rational numbers to vectors. Plus around <strong style=\"font-weight:600;color:var(--textPrimary)\">14,000 question templates</strong> that roll new numbers every time you practise.</p></div><div style=\"display:flex;flex-direction:column;gap:16px;padding:32px 0;border-top:1px solid var(--divider)\"><h3 class=\"t-titel\" style=\"margin:0;text-wrap:balance\">What if I can’t remember something?</h3><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty\">The <strong style=\"font-weight:600;color:var(--textPrimary)\">Learning path</strong> shows you <strong style=\"font-weight:600;color:var(--textPrimary)\">what you need first</strong>. If something is missing, it takes you there first and then <strong style=\"font-weight:600;color:var(--textPrimary)\">back to your topic</strong>.</p><div style=\"height:392px\"><dc-import name=\"Lernweg\" theme=\"{{ theme }}\" hint-size=\"100%,392px\"></dc-import></div></div><div style=\"display:flex;flex-direction:column;gap:16px;padding:32px 0;border-top:1px solid var(--divider)\"><h3 class=\"t-titel\" style=\"margin:0;text-wrap:balance\">Where does Bayati run?</h3><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty\">On your <strong style=\"font-weight:600;color:var(--textPrimary)\">phone</strong>, your <strong style=\"font-weight:600;color:var(--textPrimary)\">tablet</strong> and in the <strong style=\"font-weight:600;color:var(--textPrimary)\">browser</strong>. With an account you <strong style=\"font-weight:600;color:var(--textPrimary)\">pick up where you left off on any device</strong>.</p><div><dc-import name=\"Geraete\" theme=\"{{ theme }}\" schmal=\"{{ true }}\" hint-size=\"100%,140px\"></dc-import></div></div><div style=\"display:flex;flex-direction:column;gap:16px;padding:32px 0;border-top:1px solid var(--divider)\"><h3 class=\"t-titel\" style=\"margin:0;text-wrap:balance\">What does Bayati cost?</h3><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty\">As a guest it’s <strong style=\"font-weight:600;color:var(--textPrimary)\">free</strong>, with limits. With an account it’s free as well, with fewer limits. <strong style=\"font-weight:600;color:var(--textPrimary)\">Premium</strong> costs <strong style=\"font-weight:600;color:var(--textPrimary)\">€44.99 a year</strong>, that’s <strong style=\"font-weight:600;color:var(--textPrimary)\">€3.75 a month</strong>.</p><div><dc-import name=\"Preise\" theme=\"{{ theme }}\" schmal=\"{{ true }}\" hint-size=\"100%,260px\"></dc-import></div></div></section>\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:16px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;\">Try it now</h2><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty;\">A real question from chapter 7.01. Tap an answer.</p><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;text-decoration:none;color:var(--accentText)\">More questions in the app</a></div><div style=\"display:flex;flex-direction:column;gap:12px;\"><dc-import name=\"ProbierAufgabe\" bild-breite=\"{{ 350 }}\" theme=\"{{ theme }}\" hint-size=\"100%,720px\"></dc-import></div></section>\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;flex-direction:column;gap:16px;padding-bottom:16px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px\">Understand, practise, compete</h2></div><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-pressed=\"true\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-titel\">Understand</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Five-minute lessons, step by step.</span></div></sc-if><sc-if value=\"{{ bn_0 }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" aria-pressed=\"false\" onClick=\"{{ b_0 }}\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-bottom:1px solid var(--divider)\"><span class=\"t-titel\">Understand</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Five-minute lessons, step by step.</span></div></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" aria-pressed=\"true\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-titel\">Practise</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Questions that are never the same, and tests like in class.</span></div></sc-if><sc-if value=\"{{ bn_1 }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-pressed=\"false\" onClick=\"{{ b_1 }}\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-bottom:1px solid var(--divider)\"><span class=\"t-titel\">Practise</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Questions that are never the same, and tests like in class.</span></div></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" aria-pressed=\"true\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-titel\">Duel</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Against friends: who gets more right?</span></div></sc-if><sc-if value=\"{{ bn_2 }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-pressed=\"false\" onClick=\"{{ b_2 }}\" style=\"box-sizing:border-box;padding:20px 24px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-bottom:1px solid var(--divider)\"><span class=\"t-titel\">Duel</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Against friends: who gets more right?</span></div></sc-if></div><div style=\"display:flex;justify-content:center\"><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"width:297px;height:624px;flex:none;box-sizing:border-box;padding:8px;border-radius:43px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:281px;height:608px;overflow:hidden;border-radius:35px\"><div style=\"width:390px;height:844px;overflow:hidden;transform:scale(0.72);transform-origin:0 0\"><dc-import name=\"TheorieSchritt\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></div></div></div></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"width:297px;height:624px;flex:none;box-sizing:border-box;padding:8px;border-radius:43px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:281px;height:608px;overflow:hidden;border-radius:35px\"><div style=\"width:390px;height:844px;overflow:hidden;transform:scale(0.72);transform-origin:0 0\"><dc-import name=\"TestErgebnis\" theme=\"{{ theme }}\"  hint-size=\"390px,844px\"></dc-import></div></div></div></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"width:297px;height:624px;flex:none;box-sizing:border-box;padding:8px;border-radius:43px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:281px;height:608px;overflow:hidden;border-radius:35px\"><div style=\"width:390px;height:844px;overflow:hidden;transform:scale(0.72);transform-origin:0 0\"><dc-import name=\"DuellFrage\" theme=\"{{ theme }}\"  hint-size=\"390px,844px\"></dc-import></div></div></div></sc-if></div></section>\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:16px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;\">Want to master quadratic equations? Bayati shows you the way.</h2><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty;\">Bayati knows which topics come before every topic. You only learn what you’re really missing.</p></div><div role=\"list\" aria-label=\"Learning path\" style=\"display:flex;flex-direction:column\"><div role=\"listitem\" style=\"position:relative;min-height:90px;box-sizing:border-box;padding:14px 17px;display:flex;align-items:center;gap:17px;border:1px solid transparent;\"><span style=\"position:absolute;left:40.5px;top:50%;bottom:0;width:5px;background:var(--accent)\"></span><span style=\"position:relative;width:50px;flex:none;display:flex;justify-content:center\"><span style=\"width:50px;height:50px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"25\" height=\"25\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;stroke-width:3\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><span style=\"font-size:19px;line-height:26px;font-weight:600;\">Binomische Formeln</span><span class=\"t-meta\" style=\"font-size:15px;line-height:1.4;color:var(--textSecondary)\">Grade 8 · done</span></div></div><div role=\"listitem\" style=\"position:relative;min-height:90px;box-sizing:border-box;padding:14px 17px;display:flex;align-items:center;gap:17px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card);\"><span style=\"position:absolute;left:40.5px;top:0;height:50%;width:5px;background:var(--accent)\"></span><span style=\"position:absolute;left:40.5px;top:50%;bottom:0;width:5px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:50px;flex:none;display:flex;justify-content:center\"><span style=\"width:50px;height:50px;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center\"><span style=\"width:17px;height:17px;border-radius:var(--radius-full);background:var(--background)\"></span></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><span style=\"font-size:19px;line-height:26px;font-weight:600;\">Rearranging equations</span><span class=\"t-meta\" style=\"font-size:15px;line-height:1.4;color:var(--accentText)\">now · approx. 5 min</span></div></div><div role=\"listitem\" style=\"position:relative;min-height:90px;box-sizing:border-box;padding:14px 17px;display:flex;align-items:center;gap:17px;border:1px solid transparent;\"><span style=\"position:absolute;left:40.5px;top:0;height:50%;width:5px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:40.5px;top:50%;bottom:0;width:5px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:50px;flex:none;display:flex;justify-content:center\"><span class=\"t-ziffern\" style=\"width:50px;height:50px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center\">3</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><span style=\"font-size:19px;line-height:26px;font-weight:600;color:var(--textSecondary)\">Square roots</span><span class=\"t-meta\" style=\"font-size:15px;line-height:1.4;color:var(--textSecondary)\">Grade 9</span></div></div><div role=\"listitem\" style=\"position:relative;min-height:90px;box-sizing:border-box;padding:14px 17px;display:flex;align-items:center;gap:17px;border:1px solid transparent;\"><span style=\"position:absolute;left:40.5px;top:0;height:50%;width:5px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:50px;flex:none;display:flex;justify-content:center\"><span style=\"width:50px;height:50px;box-sizing:border-box;border-radius:var(--radius-full);border:3px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center\"><svg width=\"25\" height=\"25\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><path d=\"M4 22v-7\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><span style=\"font-size:19px;line-height:26px;font-weight:600;\">Quadratic equations</span><span class=\"t-meta\" style=\"font-size:15px;line-height:1.4;color:var(--accentText)\">Your goal</span></div></div></div></section>\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:16px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;\">38 chapters, 353 topics.</h2><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding-top:8px\">Grade 7</span><div style=\"display:flex;flex-direction:column\"><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Rational numbers</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01 · 15 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M8 21s-4-3-4-9 4-9 4-9\"></path><path d=\"M16 3s4 3 4 9-4 9-4 9\"></path><path d=\"M15 9l-6 6\"></path><path d=\"M9 9l6 6\"></path></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Terms and variables</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.02 · 13 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M5 9h14\"></path><path d=\"M5 15h14\"></path></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Equations</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.03 · 12 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m16 3 4 4-4 4\"></path><path d=\"M20 7H4\"></path><path d=\"m8 21-4-4 4-4\"></path><path d=\"M4 17h16\"></path></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Relations and proportionality</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.04 · 14 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M19 5 5 19\"></path><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"></circle><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"></circle></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Percentages and interest</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.05 · 14 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M4 20h16L4 4z\"></path><path d=\"M4 14a6 6 0 0 1 6 6\"></path></svg></span><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Angles and symmetry</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.06 · 15 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></div></div><div style=\"display:flex;flex-direction:column;gap:16px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding-top:8px\">More grades</span><div style=\"display:flex;flex-direction:column\"><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Grade 8</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">11 chapters · 87 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Grade 9</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">10 chapters · 82 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a><a href=\"#\" style=\"min-height:64px;box-sizing:border-box;padding:8px 4px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\"><span style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Grade 10</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">9 chapters · 80 topics</span></span><span style=\"display:flex;color:var(--textTertiary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></div></div></section>\n<section style=\"display:flex;flex-direction:column;gap:32px\"><div style=\"display:flex;flex-direction:column;gap:16px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;\">Your Bayati</h2><p class=\"t-fliesstext\" style=\"margin:0;color:var(--textSecondary);text-wrap:pretty;\">Bayati, Organic, Rosé or Robotics – choose how your app looks.</p><div role=\"radiogroup\" aria-label=\"Style\" style=\"display:flex;flex-wrap:wrap;gap:4px;padding-top:8px\"><sc-if value=\"{{ st_bayati }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span data-stil=\"bayati\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Bayati</span></sc-if><sc-if value=\"{{ nst_bayati }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ w_bayati }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"bayati\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Bayati</span></sc-if><sc-if value=\"{{ st_organic }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span data-stil=\"organic\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Organic</span></sc-if><sc-if value=\"{{ nst_organic }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ w_organic }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"organic\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Organic</span></sc-if><sc-if value=\"{{ st_rose }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span data-stil=\"rose\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Rosé</span></sc-if><sc-if value=\"{{ nst_rose }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ w_rose }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"rose\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Rosé</span></sc-if><sc-if value=\"{{ st_robotik }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span data-stil=\"robotik\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Robotics</span></sc-if><sc-if value=\"{{ nst_robotik }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ w_robotik }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"robotik\" style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span>Robotics</span></sc-if></div><div style=\"display:flex;flex-direction:column;gap:20px;padding-top:8px\">\n<sc-if value=\"{{ zweiModi }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Mode</span><div role=\"radiogroup\" aria-label=\"Mode\" style=\"display:flex;gap:4px\"><sc-if value=\"{{ m_hell_an }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\">Light</span></sc-if><sc-if value=\"{{ m_hell_aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ m_hell_klick }}\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;cursor:pointer;border:1px solid transparent;color:var(--textSecondary)\">Light</span></sc-if><sc-if value=\"{{ m_dunkel_an }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;font-weight:600;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\">Dark</span></sc-if><sc-if value=\"{{ m_dunkel_aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ m_dunkel_klick }}\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;cursor:pointer;border:1px solid transparent;color:var(--textSecondary)\">Dark</span></sc-if></div></div></sc-if>\n<sc-if value=\"{{ nurHell }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Organic only comes in light.</span></sc-if>\n<sc-if value=\"{{ nurDunkel }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Robotics only comes in dark.</span></sc-if>\n<sc-if value=\"{{ istBayati }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Accent colour</span><div role=\"radiogroup\" aria-label=\"Accent colour\" style=\"display:flex;flex-wrap:wrap;gap:4px\"><div role=\"radio\" aria-label=\"Violet\" onClick=\"{{ w_violett_klick }}\" style=\"width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer\"><sc-if value=\"{{ w_violett_an }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"violett\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">Violet</span></sc-if><sc-if value=\"{{ w_violett_aus }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"violett\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Violet</span></sc-if></div><div role=\"radio\" aria-label=\"Indigo\" onClick=\"{{ w_indigo_klick }}\" style=\"width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer\"><sc-if value=\"{{ w_indigo_an }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"indigo\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">Indigo</span></sc-if><sc-if value=\"{{ w_indigo_aus }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"indigo\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Indigo</span></sc-if></div><div role=\"radio\" aria-label=\"Sky\" onClick=\"{{ w_himmel_klick }}\" style=\"width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer\"><sc-if value=\"{{ w_himmel_an }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"himmel\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">Sky</span></sc-if><sc-if value=\"{{ w_himmel_aus }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"himmel\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Sky</span></sc-if></div><div role=\"radio\" aria-label=\"Pink\" onClick=\"{{ w_pink_klick }}\" style=\"width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer\"><sc-if value=\"{{ w_pink_an }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"pink\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">Pink</span></sc-if><sc-if value=\"{{ w_pink_aus }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"pink\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Pink</span></sc-if></div><div role=\"radio\" aria-label=\"Teal\" onClick=\"{{ w_tuerkis_klick }}\" style=\"width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer\"><sc-if value=\"{{ w_tuerkis_an }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"tuerkis\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:3px;color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta\" style=\"font-weight:600\">Teal</span></sc-if><sc-if value=\"{{ w_tuerkis_aus }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"tuerkis\" style=\"width:32px;height:32px;margin-top:4px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Teal</span></sc-if></div></div></div></sc-if>\n</div><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Every choice changes the phone below right away.</span></div><div style=\"display:flex;justify-content:center\"><div style=\"width:273px;height:573px;flex:none;box-sizing:border-box;padding:8px;border-radius:40px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:257px;height:557px;overflow:hidden;border-radius:32px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.66\"><dc-import name=\"LernenStart\" theme=\"{{ phoneTheme }}\" stil=\"{{ stil }}\" welt=\"{{ welt }}\" hint-size=\"390px,844px\"></dc-import></div></div></div></div></section>\n<section id=\"eltern\" style=\"display:flex;flex-direction:column;gap:24px;align-items:center\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;text-align:center\">Safe for kids.</h2><div style=\"width:100%;display:flex;flex-direction:column;gap:28px\"><div style=\"display:flex;flex-direction:column;gap:12px\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"></path><path d=\"m9 12 2 2 4-4\"></path></svg></span><span class=\"t-titel\" style=\"text-wrap:pretty\">No ads and no tracking</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Bayati shows no ads and passes no data to advertising companies.</span></div><div style=\"display:flex;flex-direction:column;gap:12px\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M20.5 14.9A9 9 0 0 0 9.1 3.5\"></path><path d=\"m2 2 20 20\"></path><path d=\"M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7\"></path></svg></span><span class=\"t-titel\" style=\"text-wrap:pretty\">No chat, no contact with strangers</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">Duels have no chat, no free-text names and no profile pictures. Opponents only appear by nickname.</span></div><div style=\"display:flex;flex-direction:column;gap:12px\"><span style=\"display:flex;color:var(--accent)\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"M12 7v14\"></path><path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"></path></svg></span><span class=\"t-titel\" style=\"text-wrap:pretty\">Content based on the curriculum</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary)\">The chapters follow what grades 7 to 10 cover in class.</span></div></div><a href=\"#\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;font-weight:600;text-decoration:none;color:var(--accentText)\">More for parents</a></section>\n<section style=\"width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:24px\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;text-align:center\">What you want to know.</h2><div style=\"display:flex;flex-direction:column\"><div style=\"border-bottom:1px solid var(--divider)\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">Does Bayati cost anything?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></div><div style=\"border-bottom:1px solid var(--divider)\"><div role=\"button\" aria-expanded=\"true\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">Do I need an account?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m18 15-6-6-6 6\"></path></svg></span></div><p class=\"t-fliesstext\" style=\"margin:0;padding:0 40px 20px 4px;color:var(--textSecondary)\">No. You start as a guest and learn the first chapter. With an account you learn all chapters and continue on any device.</p></div><div style=\"border-bottom:1px solid var(--divider)\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">Which grades?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></div><div style=\"\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">Does it work on phones and in the browser?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></div></div><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:24px 4px 4px\">Questions about maths</span><div style=\"display:flex;flex-direction:column\"><div style=\"border-bottom:1px solid var(--divider)\"><div role=\"button\" aria-expanded=\"true\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">How do I solve equations?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m18 15-6-6-6 6\"></path></svg></span></div><div style=\"padding:0 40px 16px 4px;display:flex;flex-direction:column;gap:4px\"><p class=\"t-fliesstext t-ziffern\" style=\"margin:0;color:var(--textSecondary)\">You change both sides in the same way until x stands alone. Whatever you do on the left, you also do on the right.</p><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;text-decoration:none;color:var(--accentText)\">Read the explanation</a></div></div><div style=\"border-bottom:1px solid var(--divider)\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">What is the absolute value of a number?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></div><div style=\"\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:12px 4px;display:flex;align-items:center;gap:12px\"><span class=\"t-abschnitt\" style=\"flex:1\">How do I calculate percentages?</span><span style=\"display:flex;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none;\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></div></div></section>\n</div>\n<div style=\"height:96px\"></div>\n<div style=\"position:relative;overflow:hidden\"><div class=\"bayati-kopf\" style=\"position:absolute;inset:0;transform:scaleY(-1)\"></div><section style=\"position:relative;box-sizing:border-box;padding:72px 20px;display:flex;flex-direction:column;align-items:center\"><div style=\"position:relative;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:30px;line-height:38px;text-wrap:pretty;text-align:center\">Ready? The first lesson takes five minutes.</h2><a href=\"#\" class=\"t-knopf\" style=\"height:56px;box-sizing:border-box;padding:0 36px;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:18px;width:100%;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Start for free</a><span class=\"t-meta\" style=\"color:var(--textSecondary)\">No sign-up. Create an account later if you like.</span></div></section>\n<footer style=\"position:relative\"><div style=\"box-sizing:border-box;padding:32px 20px 48px;display:flex;flex-direction:column;gap:24px\"><div style=\"display:flex;flex-direction:column\"><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\">For parents</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\">Imprint</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\">Privacy</a></div><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Language</span><div role=\"radiogroup\" aria-label=\"Sprache / Language\" style=\"display:flex;gap:16px\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Deutsch\" class=\"t-klein-betont\" style=\"height:44px;min-width:36px;box-sizing:border-box;padding:2px 4px 0;display:flex;align-items:center;justify-content:center;font-weight:600;border-bottom:2px solid var(--accent);color:var(--textPrimary);cursor:pointer\">DE</span><span role=\"radio\" aria-checked=\"false\" aria-label=\"English\" class=\"t-klein-betont\" style=\"height:44px;min-width:36px;box-sizing:border-box;padding:2px 4px 0;display:flex;align-items:center;justify-content:center;font-weight:600;border-bottom:2px solid transparent;color:var(--textSecondary);cursor:pointer\">EN</span></div></div></div></footer></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  state = { stil: 'bayati' };\n  componentDidMount() {\n    let n = 0;\n    const go = () => { const mj = window.MathJax; if (mj && mj.typesetPromise) setTimeout(() => mj.typesetPromise().catch(() => {}), 400); else if (n++ < 60) setTimeout(go, 200); };\n    go();\n  }\n  renderVals() {\n    const t = this.props.theme ?? 'light', s = this.state.stil;\n    const v = { theme: t, hell: t === 'light', dunkel: t === 'dark', stil: s, phoneTheme: s === 'organic' ? 'light' : s === 'robotik' ? 'dark' : (this.state.modus ?? t) };\n    const md = this.state.modus ?? t, wl = this.state.welt ?? 'violett'; v.welt = wl; v.zweiModi = s === 'bayati' || s === 'rose'; v.nurHell = s === 'organic'; v.nurDunkel = s === 'robotik'; v.istBayati = s === 'bayati';\n    for (const [id, val] of [['m_hell', 'light'], ['m_dunkel', 'dark']]) { v[id + '_an'] = md === val; v[id + '_aus'] = md !== val; v[id + '_klick'] = () => this.setState({ modus: val }); }\n    for (const k of ['violett', 'indigo', 'himmel', 'pink', 'tuerkis']) { v['w_' + k + '_an'] = wl === k; v['w_' + k + '_aus'] = wl !== k; v['w_' + k + '_klick'] = () => this.setState({ welt: k }); }\n    const b = this.state.bereich ?? 0;\n    for (let i = 0; i < 3; i++) { v['ba_' + i] = b === i; v['bn_' + i] = b !== i; v['b_' + i] = () => this.setState({ bereich: i }); }\n    for (const k of ['bayati', 'organic', 'rose', 'robotik']) { v['st_' + k] = s === k; v['nst_' + k] = s !== k; v['w_' + k] = () => this.setState({ stil: k }); }\n    return v;\n  }\n}\n</script>\n</body>\n</html>\n","LernenStart":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:390px;height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;width:390px;height:280px\"></div><div class=\"bayati-muster\"></div></sc-if>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<div style=\"position:absolute;left:20px;top:55px;width:350px;display:flex;flex-direction:column;gap:10px\">\n<div style=\"display:flex;align-items:center;gap:12px\"><div style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:2px\"><div style=\"display:flex;align-items:center;gap:8px\"><h1 class=\"t-titel\" style=\"margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Good evening, Luise</h1><span style=\"display:flex;color:var(--accentText)\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Grade 7 · 12 min learned today</span></div><div role=\"button\" aria-label=\"Level 3, how you earn XP\" style=\"position:relative;width:56px;height:56px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:2px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;\"><span style=\"font-family:var(--font-display);font-size:20px;line-height:22px;font-weight:700\">3</span><span style=\"font-size:9px;line-height:11px;font-weight:600;letter-spacing:.5px;color:var(--accentText)\">LEVEL</span></div></div>\n<div style=\"display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between;gap:12px\"><span class=\"t-meta\" style=\"color:var(--textSecondary)\">XP to level 4</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">120 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:60%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div style=\"position:absolute;left:20px;top:333px;width:350px;height:112px;overflow:hidden;box-sizing:border-box;background:var(--surface);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\">\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;height:64px;padding:12px 80px 0 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--divider)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Pick up where you left off</span><span class=\"t-kartentitel\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.03 Ordering and comparing</span></div>\n<div style=\"padding:9px 80px 0 16px\"><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Step 3 of 9 · approx. 4 min</span></div>\n<div style=\"position:absolute;right:16px;top:31px;width:48px;height:48px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accentTint);border:1px solid var(--accentBorder);color:var(--textPrimary);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 4l13 8-13 8z\"></path></svg></div>\n<div style=\"position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--glassLight)\"><div style=\"width:33%;height:100%;background:var(--accent);border-radius:0 var(--radius-full) var(--radius-full) 0\"></div></div>\n</div>\n<div role=\"group\" aria-label=\"Areas\" style=\"position:absolute;left:20px;top:167px;width:350px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px\"><div role=\"link\" aria-label=\"Formulas\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 689.61 800\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-712.355 -198.943)\"><ellipse cx=\"144.539\" cy=\"17.612\" rx=\"144.539\" ry=\"17.612\" transform=\"translate(799.232 947.281)\" fill=\"#e6e6e6\" opacity=\"0.501\"></ellipse><ellipse cx=\"136.644\" cy=\"145.753\" rx=\"136.644\" ry=\"145.753\" transform=\"translate(806.52 686.14)\" fill=\"#e6e6e6\"></ellipse><path d=\"M4.858,0H80.164a4.858,4.858,0,0,1,4.858,4.858V72.877a4.858,4.858,0,0,1-4.858,4.858H4.858A4.858,4.858,0,0,1,0,72.877V4.858A4.858,4.858,0,0,1,4.858,0Z\" transform=\"translate(901.259 918.13)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M14.535,128.751S-4.9,80.164,1.177,78.949c3.621-.725,5.947-10.958,7.236-19.1a37.652,37.652,0,1,1,39.712,14.3c.07,11.615,7.71,21.8,7.71,21.8l10.926,26.722-23.074,6.076Z\" transform=\"translate(928.626 385.523)\" fill=\"#ed9da0\"></path><path d=\"M524.78,648.2l-6.073,21.863s-4.858,35.224,1.215,43.726c4.77,6.678,13.287,14.855,29.083,16.291a19.52,19.52,0,0,0,20.379-13.5A6.084,6.084,0,0,0,569.72,715c0-2.429-3.644-31.58-3.644-31.58L560,653.059l-1.215-8.5Z\" transform=\"translate(395.306 204.948)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M491.213,480.415s-31.58,60.73-6.073,72.877,31.58,10.931,31.58,14.575-4.858,2.429-2.429,8.5,6.014,105.671,13.3,109.315,42.57,6.073,46.214,0-3.644-103.242-1.215-106.886,9.717-23.078,9.717-23.078l13.361-1.215,31.58,6.073s35.224,38.867,74.091,51.014c0,0,20.648,17,18.219,20.648s-15.932,155.706-12.288,158.135,48.908,3.392,49.335-7.815S782.719,605.52,777.861,595.8,756,542.36,664.9,514.424c0,0-25.507-4.858-25.507-8.5s-2.429-26.721-7.288-27.936-32.794-2.429-32.794-2.429L564.09,486.488l-48.584-8.5Z\" transform=\"translate(386.361 168.679)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M671.108,735.543s-6.073-6.073-7.288,0-6.073,31.58,2.429,32.794,98.383,8.5,98.383,8.5,6.753.662,10.4-3.285,8.989-10.7,4.179-12.5c-9.717-3.644-37.653-14.575-37.653-14.575s-21.18-19.505-23.609-20.72-10.4.071-16.473,4.93S671.108,735.543,671.108,735.543Z\" transform=\"translate(426.311 222.062)\" style=\"fill:var(--textSecondary,#090814)\"></path><path d=\"M575.978,371.348c-8.806,2.733-23.053-15.921-23.053-15.921s-9.459-33.51-11.889-27.437-56.155,23.924-56.155,23.924,10.932,102.027,6.073,111.744-13.361,48.584-6.073,52.228,41.3,0,52.228,4.858,42.511,4.858,51.014-1.215,10.932-10.931,19.434-7.288c7.238,3.1,24.16-102.952,29.031-134.556a14.386,14.386,0,0,0-5.961-13.98c-10.9-7.645-30.527-20.818-34-19.081C591.768,347.055,584.784,368.615,575.978,371.348Z\" transform=\"translate(387.833 136.852)\" fill=\"#e6e6e6\"></path><path d=\"M605.712,359.557h0a14.4,14.4,0,0,1,10.823,12.384l9.825,88.429s-24.292,52.228-36.438,17S605.712,359.557,605.712,359.557Z\" transform=\"translate(410.328 143.784)\" fill=\"#e6e6e6\"></path><path d=\"M603.831,450.844l26.721-7.288s4.858,34.009,9.717,34.009-17,19.434-27.936,17-26.721-10.931-27.936-17,10.931-31.58,10.931-31.58Z\" transform=\"translate(409.78 161.811)\" fill=\"#e6e6e6\"></path><path d=\"M564.382,379.844l3.644-7.288s53.443,15.79,64.374,30.365c0,0,26.721-17,41.3-14.575l14.575,2.429-44.941,40.082L586.245,426Z\" transform=\"translate(405.503 146.574)\" fill=\"#f2f2f2\"></path><path d=\"M571.181,372.557l-49.8,69.233,71.662,35.224s6.7,3.644,11.852,0L652.56,455.15,697.5,390.776,652.56,413.853S647.7,404.137,637.984,409Z\" transform=\"translate(396.275 146.574)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M626.455,485.747l9.717-25.507s21.863-27.936,9.717-41.3-25.507,38.867-25.507,38.867Z\" transform=\"translate(417.521 156.06)\" fill=\"#ed9da0\"></path><path d=\"M533.079,479.512l21.2-17.189s32.928-13.2,29.125-30.848S541.842,452.3,541.842,452.3Z\" transform=\"translate(398.785 158.224)\" fill=\"#ed9da0\"></path><path d=\"M494.263,349.986l-4.858-2.429s-19.434,3.644-23.078,34.009-15.79,131.178,15.79,134.822,74.091-4.858,74.091-4.858,8.5-46.155,0-46.155-52.228,6.073-51.014,0S528.272,358.488,494.263,349.986Z\" transform=\"translate(383.311 141.209)\" fill=\"#e6e6e6\"></path><path d=\"M338,356.741l13.394-20.528,8.469,33.889L338,379.819Z\" transform=\"translate(688.364 271.098)\" fill=\"#e6e6e6\"></path><circle cx=\"32.794\" cy=\"32.794\" r=\"32.794\" transform=\"translate(718.429 269.528)\" fill=\"#f2f2f2\"></circle><rect width=\"77.735\" height=\"77.735\" transform=\"translate(712.355 546.459)\" fill=\"#f2f2f2\"></rect><path d=\"M378.953,0l19.675,34.078L418.3,68.157H339.6l19.674-34.078Z\" transform=\"translate(688.708 198.943)\" fill=\"#f2f2f2\"></path><path d=\"M953.592,290.656q-.706,21.809-10.622,34.961t-23.565,13.155q-11.116,0-19.485-12.873t-8.371-39.6q0-5.909.281-11.255t.7-10.129l4.924-46.286h-32.5q-8.441,87.789-13.858,104.461t-18.36,16.672a15.523,15.523,0,0,1-10.411-4.361,14.653,14.653,0,0,1-4.924-11.537q0-6.469,10.2-18.078t11.325-21.173l8.441-65.983H833.726a24.183,24.183,0,0,0-11.044,2.743,20.837,20.837,0,0,0-7.949,6.4l-6.05,9h-4.924q6.892-21.383,16.953-32.147t23.143-10.763H951.341v24.761h-36.3q-1.689,16.883-2.6,33.765t-.914,33.906q0,11.538,5.346,18.712t13.365,7.175q4.923,0,10.341-4.01a14.54,14.54,0,0,0,6.12-10.481q.422-3.093.633-4.854t.211-2.181Z\" transform=\"translate(448.373 108.46)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M25.339,76.155a41.463,41.463,0,0,1-21.12-19.5c-6.575-13.34-7.3-36.064,11.372-41.583,0,0-3.275-14.853,6.436-12.509,0,0,2.327-4.2,13.821-1.718,0,0,42.471-4.947,50.009,9.037,0,0,22.794,4.671,10.656,22.011,0,0-.628,3.374-4.959,3.311l2.164-2.83-6.6,2.83s-9.173-14.61-17.83-6.532c0,0-16.557-.7-24.477-2.147,0,0,1.59,21.269-13.61,25.411S25.339,76.155,25.339,76.155Z\" transform=\"translate(920.777 367.131) rotate(8)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Formulas</span></div><div role=\"link\" aria-label=\"Tests\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 960 696.493\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><g transform=\"translate(-455.43 -224.387)\"><path d=\"M85.665,167.974a84.229,84.229,0,0,1-17.713-1.491,83.192,83.192,0,0,1-53.559-35.244A84.164,84.164,0,0,1,99.92,1.492,83.18,83.18,0,0,1,153.543,36.7a84.174,84.174,0,0,1,.531,93.462A85.311,85.311,0,0,1,148.9,137.2l20.636,43.759-74.481,19.8Z\" transform=\"translate(927.301 335.338)\" fill=\"#ed9da0\"></path><path d=\"M826.1,478.572l-4.23,249.907-341.667-8.434,54.564-103.621c-.392-3.325,23.949-26.664,23.809-30.122-.42-10.133,8.375-19.519,9.8-30.122,1.926-14.455-22.953-18.357-28.49-49.789-2.767-15.707,9.712-66.3,12.319-72.083,3.275-7.619,17.565-14.562,22.614-21.426,4.37-5.687,8.851-9.519,36.973-50.69l87.91-22.4,9.719-2.482L732.1,356.347l16.036,13.471,15.083,2.253c2.255.337,4.44.735,6.54,1.193A71.189,71.189,0,0,1,797.294,385C823.623,404.242,826.69,440.437,826.1,478.572Z\" transform=\"translate(393.112 159.095)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M1078.812,660.4q-14.453,18.129-30.629,34.76l-36.945.028-198.689.224-35.769.042L753,695.485l-35.377.028-27.212.028-50.264.056-29.649.042-62.434.056-29.8.042-82.588.084-51.875.056-13.921.014q-4.643-4.748-9.145-9.635-11.218-12.164-21.582-25.083l28.822-.028,19.635-.014,45.46-.056,87.727-.084,29.649-.028,11.988-.014h.042l9.411-.014,4.215-.014,10.8-.014h4.566l32.016-.028,69.059-.084,30.391-.028,29.1-.028,27.282-.028,39.144-.042,209.067-.21Z\" transform=\"translate(336.619 224.989)\" fill=\"#e6e6e6\"></path><path d=\"M665.13,691.256a11.288,11.288,0,0,1-4.837-1.093l-269.625,6.879a11.316,11.316,0,0,1,1.611-21.07l176.4-52.6a11.316,11.316,0,0,1,5.624-.215l272.854,33.257a11.315,11.315,0,0,1,1.3,21.757l-179.627,12.46a11.326,11.326,0,0,1-3.695.623Z\" transform=\"translate(354.659 209.971)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><path d=\"M656.524,664.943a7.12,7.12,0,0,1-3.478-.9l-218.974,10.23a7.1,7.1,0,0,1,1.8-13.089l79.274-19.241a7.118,7.118,0,0,1,3.75.11l203.568-.245a7.1,7.1,0,0,1,.048,13.561l-63.866,9.255A7.084,7.084,0,0,1,656.524,664.943Z\" transform=\"translate(373.181 217.514)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M579.528,666.329A30.847,30.847,0,0,0,624.7,652.305l231.777,18.207L843.837,621.35,606.211,610.813a31.014,31.014,0,0,0-26.684,55.516Z\" transform=\"translate(427.129 204.456)\" fill=\"#ed9da0\"></path><path d=\"M676.836,383.935s35.013-23.52,77.028,18.816C782.2,431.3,836.856,603.9,841.388,675.422c.579,9.149-3.41,18.087-11.008,24.662s-18.117,10.193-29.025,9.983l-123.54-1.805L664,643.052l97.536.97Z\" transform=\"translate(466.722 175.16)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M657.2,751.085a31.848,31.848,0,0,1-12.339-2.5l-249.909,5.7a31.757,31.757,0,0,1-19.118-34.428L366.55,500.387a31.71,31.71,0,0,1,33.521-26.713L632.083,483.3a31.846,31.846,0,0,1,29.3,37.174L688.568,724.62A31.9,31.9,0,0,1,657.2,751.085Z\" transform=\"translate(347.592 150.173)\" style=\"fill:var(--textSecondary,#3f3d56)\"></path><g transform=\"translate(455.43 224.387)\"><g transform=\"translate(0 66.449)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(25.262 36.661)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 30.281) rotate(-9)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(14.324 40.931) rotate(-9)\" fill=\"#fff\"></path></g><g transform=\"translate(53.845 30.281) rotate(-9)\"><path d=\"M177.379.453,16.856,0A16.255,16.255,0,0,0,.582,16.188L0,228.746A16.218,16.218,0,0,0,16.166,245l89.045.259,71.5.194a16.223,16.223,0,0,0,16.253-16.188l.043-12.567.56-199.969A16.242,16.242,0,0,0,177.379.453Z\" transform=\"translate(0 0)\" fill=\"#e6e6e6\"></path><path d=\"M153.582.388,15.628,0A15.221,15.221,0,0,0,.388,15.153L0,151.814a67.777,67.777,0,0,0,67.511,67.878l26.211.065,59.256.172a15.206,15.206,0,0,0,15.24-15.153l.043-13.752.474-175.4A15.207,15.207,0,0,0,153.582.388Z\" transform=\"translate(12.482 12.76)\" fill=\"#fff\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 106.527)\" fill=\"#e6e6e6\"></path><path d=\"M30.1,0H6.456a6.456,6.456,0,0,0,0,12.912H30.1A6.456,6.456,0,1,0,30.1,0Z\" transform=\"translate(36.549 71.133)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M114.017,0H6.456a6.456,6.456,0,0,0,0,12.912H114.017a6.456,6.456,0,1,0,0-12.912Z\" transform=\"translate(36.549 163.282)\" fill=\"#e6e6e6\"></path><path d=\"M114.006,0H6.445a6.445,6.445,0,0,0,0,12.89H114.006a6.445,6.445,0,0,0,0-12.89Z\" transform=\"translate(36.558 134.915)\" fill=\"#e6e6e6\"></path><path d=\"M38.188,76.377A38.188,38.188,0,1,1,76.377,38.188,38.188,38.188,0,0,1,38.188,76.377Zm0-73.723A35.535,35.535,0,1,0,73.723,38.188,35.535,35.535,0,0,0,38.188,2.654Z\" transform=\"translate(91.476 17.583)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M32.651,38.827A98.174,98.174,0,0,0,16.532.962a2.016,2.016,0,0,0-3.437,0A104.861,104.861,0,0,0,.017,40.486C-.292,43.023,3.691,43,4,40.486a98.1,98.1,0,0,1,2.61-13.364,2.28,2.28,0,0,0,.445-.136,29.012,29.012,0,0,1,17.136-2.791c.051.008.1,0,.151,0a95.447,95.447,0,0,1,4.473,15.689C29.3,42.4,33.136,41.334,32.651,38.827ZM8.04,22.24A100.757,100.757,0,0,1,14.991,5.818,95.407,95.407,0,0,1,22.678,20.07,33.576,33.576,0,0,0,8.04,22.24Z\" transform=\"translate(113.052 31.736)\" style=\"fill:var(--accent,#6c63ff)\"></path></g></g><path d=\"M209.528,220.6s-1.135,29.573-36.706,33.83l-61.231-16.6s47.323-154.5,23.731-135.4C120.954,114.054,88.051,94.847,64.307,77.9,49.408,67.263,38.16,57.471,38.16,57.471L21.823,96.415S-27.034,83.692,21.457,36.9c0,0,58.009-54.129,127.051-31.278s61.019,214.961,61.019,214.961Z\" transform=\"matrix(0.921, -0.391, 0.391, 0.921, 875.152, 359.603)\" style=\"fill:var(--textSecondary,#090814)\"></path></g></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Tests</span></div><div role=\"link\" aria-label=\"Duel\" style=\"min-height:48px;display:flex;flex-direction:column;align-items:center;gap:6px\"><div style=\"height:64px;width:100%;display:flex;align-items:center;justify-content:center\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 921 647.73602\" role=\"img\" aria-hidden=\"true\" style=\"height:64px;width:auto;max-width:100%;display:block\"><title>playing cards</title><path d=\"M867.30078,771.82324a50.16694,50.16694,0,0,1-13.54492-1.87109L670.73145,720.96289l.5371-1.92578,183.02637,48.98926a48.16143,48.16143,0,0,0,13.00586,1.79687c21.53906,0,40.64258-12.48047,46.45606-33.21386L1044.043,271.99072h-.001l.28418-1.01123a48.28977,48.28977,0,0,0-33.42969-59.4126L716.7041,129.07129a48.29038,48.29038,0,0,0-59.46094,33.4165l-10.22168,36.46-1.92578-.54,10.22168-36.46a50.29063,50.29063,0,0,1,61.92676-34.80224l294.19238,82.4956a50.29149,50.29149,0,0,1,35.0625,60.96143l.00879.00244-.26953.96289L915.68262,737.14941C909.62793,758.74219,889.73242,771.82324,867.30078,771.82324Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"518.96 84.066 522.31 85.006 532.62 87.896 533.7 84.036 529.84 82.956 533.23 70.866 541.38 63.786 543.55 86.806 537.55 85.116 536.47 88.976 551.87 93.296 552.95 89.436 549.68 88.526 546.54 59.306 562.54 45.396 567.03 46.656 568.11 42.796 552.7 38.476 551.62 42.336 556.7 43.756 536.35 59.746 541.99 39.636 545.85 40.716 546.93 36.856 531.52 32.536 530.44 36.396 536.22 38.016 524.07 81.336 518.29 79.716 518.14 80.236 517.52 82.476 518.96 84.066\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M683.25,245.83A116.74372,116.74372,0,0,0,672,251.44c-.67.38-1.34.77-2,1.16V240.23a46.801,46.801,0,0,0-1.87-13.15c.58-.36,1.17-.75,1.75-1.14.53-.35,1.07-.71,1.6-1.07A134.73634,134.73634,0,0,0,683.25,245.83Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"727.027 611.842 722.542 610.584 721.462 614.435 736.868 618.755 737.948 614.904 732.874 613.481 753.218 597.485 747.576 617.604 743.725 616.524 742.645 620.375 758.051 624.695 759.131 620.844 753.353 619.224 765.503 575.895 771.281 577.515 772.361 573.664 756.955 569.344 755.875 573.195 759.726 574.275 756.335 586.369 748.189 593.449 746.024 570.433 752.023 572.115 753.103 568.264 737.698 563.944 736.618 567.795 739.891 568.713 743.033 597.93 727.027 611.842\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M885.31538,661.93431A110.09112,110.09112,0,0,0,905.775,650.43613a169.04888,169.04888,0,0,0,11.77863,20.95862A125.77733,125.77733,0,0,0,897.094,682.89294,135.22416,135.22416,0,0,0,885.31538,661.93431Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M750.397,453.726s-5.05855,32.85439-6.56141,34.51011,10.50007,40.333,10.50007,40.333l38.48867-22.44154s7.48855-41.52013,9.95427-42.90585S750.397,453.726,750.397,453.726Z\" transform=\"translate(-139.5 -125.26398)\" opacity=\"0.1\"></path><circle cx=\"640.67419\" cy=\"322.27193\" r=\"38\" fill=\"#ffb8b8\"></circle><path d=\"M763.7042,506.27039l-3.31144-3.00572-14.8847-21.18423s-1.70823-1.12439-3.32823,4.65277l-1.62,5.77716-13.98432,5.42575-30.94282,132.569,82.806,23.22,34.1014-132.72187-16.01721-16.95432-1.77345-8.1795-24.72806,10.09525Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M670,644.09l2,.56,128.96,36.16,43.12-142.65s-10.2-8.06-18.18-9.26c0,0-13.4-15.18-19.17-16.8-5.78-1.62-12.17-15.87-12.17-15.87s-6.75,24.07-18.35,39.51-31.8,68.98-31.8,68.98l-5.7-98.19,6.4-24.69a45.464,45.464,0,0,0-10.06,8.09c-4.51,4.96-16.02,9-16.02,9s-30.32,8.12-35.68,8.7c-5.35.57-7.82,1.96-7.82,1.96L672,533.88l-2,13.76Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M687.6,588.79c-1.2,7.97-13.54,40.86-13.54,40.86L672,631.72l-2,2.01V511.92a5.61755,5.61755,0,0,1,2-1.39,13.71966,13.71966,0,0,1,3.53-.94l3.86,1.08S688.8,580.81,687.6,588.79Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M775.44293,631.07505s18.92574-34.1587,33.25151-25.98726-8.64,30.81153-8.64,30.81153Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M716.86131,617.76364s-36.31869-11.22286-37.12869-8.33428-10.7543,19.83293-7.86572,20.64293,25.30437,6.05714,25.03437,7.02,10.74432,6.12858,10.74432,6.12858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><polygon points=\"648.165 384.489 625.05 385.398 620.236 384.048 600.963 371.253 594.58 390.355 618.886 388.862 623.7 390.212 643.686 404.125 648.165 384.489\" style=\"fill:var(--accent,#6c63ff)\"></polygon><polygon points=\"586.05 528.176 582.5 535.736 531.5 521.736 530.5 518.826 530.5 502.796 532.5 503.576 534.56 504.386 586.05 528.176\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M727.45278,620.73364s-11.97719-5.43572-12.24719-4.47286-16.34288,28.65153-12.49144,29.73153,17.48435,8.01858,17.48435,8.01858Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M837.34017,536.26612l6.74,1.89s3.85144,1.08,4.15716,7.39716,5.53292,35.82439,3.06719,37.21011-3.15858.15287-1.77286,2.61859,2.61859,1.77286,1.11573,3.42858S845.696,643.505,834.51886,661.14222s-14.57,26.033-18.42146,24.953L716.267,658.10129s4.44578-39.25765,8.56722-39.14051S796.473,633.85646,796.473,633.85646,822.62726,533.179,837.34017,536.26612Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M757.78487,405.88642l-6.2345-4.47128s18.58634-10.44541,38.42854-3.51981l-4.08748-7.273S801.192,389.46685,810.09806,406.26c4.68172,8.82778,10.06253,19.17007,12.26158,29.73748l7.43484,2.08484-4.84329,5.33591,9.12032,9.25151-10.83473-4.24064a32.524,32.524,0,0,1-5.56145,15.77732l-4.47115,6.23443s-4.43484-23.02763-3.72693-25.55215l-1.76976,6.31126s-5.34963-7.62685-4.28778-11.41359l-5.02557,3.356.05338-7.47333-25.2984.39427,5.37951-4.61825-15.0468-2.17709,7.627-5.34958s-18.70994,3.60324-21.28794,10.36864c-2.57778,6.76535-13.26,13.30046-13.26,13.30046l-2.017-7.37311S736.82762,410.22094,757.78487,405.88642Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M744.72085,419.55721l.29721-1.295c2.88968-12.58007-19.33835-35.97544-19.563-36.21036l-.39466-.41189.15412-.5496c.4398-1.56841,2.20365-2.96129,17.65926.38888,6.01774,1.30459,12.01884,2.89458,14.53112,3.57624-.28052-7.18284-9.18474-16.6997-9.27973-16.80038l-1.12008-1.18683,1.566-.45948c10.26547-3.009,22.28032,6.97086,26.12019,10.50459l6.41856-22.88956,12.70134,18.76039c7.79712-11.67253,19.07562-11.19961,19.56853-11.17245l1.58331.08646L814.2025,363.29c-5.34317,9.77538-6.30593,16.19629-6.36142,19.36186,14.21594-16.889,27.027-15.41792,27.58441-15.34426l1.94137.25634-1.34612,1.42228c-18.61059,19.665-20.802,45.60606-20.82209,45.86566l-.06714.8742ZM727.67,381.4914c3.93,4.25933,20.92405,23.481,19.51633,35.92848l66.10992-3.5964c.54512-4.62771,3.89789-26.64821,19.70494-44.50036-4.30785.38486-14.4698,2.84024-25.17507,16.52141l-1.22716,1.56771-.525-1.92009c-.08251-.30256-1.87214-7.33553,5.55265-21.62269-3.40377.32194-11.32864,2.10388-16.92936,11.45408l-.80644,1.34592-12.01971-17.7533-6.16913,22L774.49206,379.69c-.13508-.13677-13.03108-13.04892-23.75367-11.5094,2.75251,3.205,9.33808,11.6462,8.6167,18.28236l-.12732,1.17377-1.13681-.31878C745.46282,383.77681,731.03938,380.75512,727.67,381.4914Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M840.40847,362.03937a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,840.40847,362.03937Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,841.8054,357.0577Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M815.49963,355.05458a3.58692,3.58692,0,1,1,4.42216-2.48524A3.59074,3.59074,0,0,1,815.49963,355.05458Zm1.39693-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58875,1.58875,0,0,0,816.89656,350.0729Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M777.63572,351.15424a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59072,3.59072,0,0,1,777.63572,351.15424Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,779.03265,346.17257Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M717.1894,379.87858a3.58691,3.58691,0,1,1,4.42216-2.48523A3.59071,3.59071,0,0,1,717.1894,379.87858Zm1.39693-4.98167a1.58691,1.58691,0,1,0,1.09951,1.95644A1.58875,1.58875,0,0,0,718.58633,374.89691Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M740.56282,363.5954a3.58692,3.58692,0,1,1,4.42217-2.48523A3.59115,3.59115,0,0,1,740.56282,363.5954Zm1.39694-4.98168a1.58692,1.58692,0,1,0,1.09951,1.95645A1.58886,1.58886,0,0,0,741.95976,358.61372Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><polygon points=\"720.272 575.155 719.31 574.885 530.809 522.027 531.348 520.101 718.887 572.69 837.418 149.994 573.112 75.88 532.799 219.645 530.873 219.105 571.728 73.414 572.689 73.684 839.883 148.609 839.613 149.571 720.272 575.155\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M181.134,739.11671c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S168.70559,716.06766,181.134,739.11671Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M189.67653,731.53374c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S139.5,722.96083,139.5,722.96083,167.23811,718.034,189.67653,731.53374Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M669.88,225.94a49.004,49.004,0,0,0-8.07-15.67,49.78347,49.78347,0,0,0-4.17-4.77A49.1065,49.1065,0,0,0,622.77,191H317.23A49.28,49.28,0,0,0,268,240.23V723.77A49.28,49.28,0,0,0,317.23,773H622.77A49.28,49.28,0,0,0,672,723.77V240.23A48.87057,48.87057,0,0,0,669.88,225.94ZM670,723.77A47.287,47.287,0,0,1,622.77,771H317.23A47.287,47.287,0,0,1,270,723.77V240.23A47.287,47.287,0,0,1,317.23,193H622.77a47.1127,47.1127,0,0,1,34.25,14.74q.735.78,1.44,1.59A47.12039,47.12039,0,0,1,670,240.23Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M316.74192,268.70949c-.05549-.13036-.12411-.24888-.18511-.37428a30.29407,30.29407,0,0,0,3.31465-14.268c0-15.50156-9.68724-26.32821-23.55682-26.32821s-23.55683,10.82665-23.55683,26.32821,9.68724,26.32822,23.55683,26.32822a22.22629,22.22629,0,0,0,17.29565-7.72327c4.441,7.1861,13.026,8.13425,13.4215,8.17389l.46821-4.59553C327.177,276.21579,319.55571,275.324,316.74192,268.70949Zm-20.42728,7.06695c-11.15052,0-18.93784-8.92718-18.93784-21.70923s7.78732-21.70922,18.93784-21.70922,18.93783,8.92718,18.93783,21.70922a26.09216,26.09216,0,0,1-2.11,10.6067c-6.8942-4.18866-19.72068-1.68577-21.46035-1.31911l.95,4.5202c4.7114-.98649,14.08441-1.77779,18.16441.78194A17.66814,17.66814,0,0,1,296.31464,275.77644Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M298,291.382a8.01388,8.01388,0,0,0-11.33333,11.33334L298,314.04863l11.33333-11.33333A8.01388,8.01388,0,0,0,298,291.382Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M623.25808,698.38777c.05549.13036.12411.24888.18511.37428a30.294,30.294,0,0,0-3.31465,14.268c0,15.50157,9.68724,26.32822,23.55682,26.32822s23.55683-10.82665,23.55683-26.32822-9.68724-26.32821-23.55683-26.32821a22.22629,22.22629,0,0,0-17.29565,7.72327c-4.441-7.1861-13.026-8.13425-13.4215-8.17389L612.5,690.84674C612.823,690.88147,620.44429,691.77324,623.25808,698.38777Zm20.42728-7.067c11.15052,0,18.93784,8.92719,18.93784,21.70923s-7.78732,21.70923-18.93784,21.70923-18.93783-8.92718-18.93783-21.70923a26.09214,26.09214,0,0,1,2.11-10.60669c6.8942,4.18866,19.72068,1.68577,21.46035,1.31911l-.95-4.5202c-4.7114.98649-14.08441,1.77779-18.16441-.78194A17.66812,17.66812,0,0,1,643.68536,691.32081Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M642,675.71529A8.01387,8.01387,0,0,0,653.33333,664.382L642,653.04863,630.66667,664.382A8.01387,8.01387,0,0,0,642,675.71529Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M494.64587,465.71115c-13.61413-23.00368-40.54861-24.07575-40.54861-24.07575s-26.24611-3.35633-43.08283,31.67855c-15.69316,32.65539-37.35172,64.18483-3.48685,71.82921l6.117-19.03877,3.78821,20.45619a132.50656,132.50656,0,0,0,14.48952.24764c36.26655-1.1709,70.805.34257,69.69287-12.67139C500.13683,516.83661,507.7454,487.84528,494.64587,465.71115Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M444.42215,544.08708c.06586,2.58925.04615,5.32-1.2405,7.56794-2.55068,4.45626-8.77746,5.12336-12.52288,8.63562-3.93886,3.69364-4.38469,9.68822-4.57241,15.08473-.19626,5.642-.36277,11.469,1.6963,16.7255A40.65962,40.65962,0,0,0,432.533,600.262q3.43009,4.94445,6.92363,9.84448a42.50313,42.50313,0,0,0,4.14572,5.20265c4.17109,4.24877,9.89244,6.60062,15.60508,8.27864,3.6909,1.08416,7.67613,1.92868,11.3382.7508a21.70662,21.70662,0,0,0,6.59342-4.05429c2.72367-2.163,5.48919-4.37013,7.46327-7.23368,3.07515-4.46076,3.9263-10.045,4.56372-15.42537a332.8629,332.8629,0,0,0,2.19408-47.95141,11.75257,11.75257,0,0,0-.91547-5.09484c-1.89659-3.70333-6.97627-4.49394-9.65283-7.6795-2.28838-2.72357-2.38171-6.61049-2.36218-10.16775l.0497-9.056a3.79376,3.79376,0,0,0-.44011-2.20632,3.73782,3.73782,0,0,0-2.59772-1.212,87.5709,87.5709,0,0,0-17.03739-1.13982c-4.62344.14128-13.49452-.24571-17.49227,2.3294-3.62874,2.33741.91468,8.79312,1.75522,12.4194A80.91135,80.91135,0,0,1,444.42215,544.08708Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#a0616a\"></path><circle cx=\"315.53427\" cy=\"366.66826\" r=\"36.60356\" fill=\"#a0616a\"></circle><path d=\"M439.9618,582.5968a53.54739,53.54739,0,0,1-5.70845-11.0871c-1.309-3.956-1.65238-8.37707-.09939-12.24377-3.95536-2.29515-9.32568-.43652-12.20618,3.11528s-3.76206,8.31289-4.016,12.87886.01525,9.19913-.9784,13.6629c-2.19838,9.87576-10.35606,17.99484-10.9627,28.09413-.59681,9.93558,6.21635,18.59093,9.56811,27.9631a46.63021,46.63021,0,0,1,2.49807,18.20141c-.1086,1.99268-.23372,4.2638,1.17235,5.68a6.47817,6.47817,0,0,0,2.53351,1.365c16.17372,5.69027,33.6437,6.18254,50.78371,6.61669l28.30959.71707a9.02291,9.02291,0,0,0,4.99916-.83715c2.53981-1.55726,2.87974-5.04794,2.92292-8.02684.37188-25.65639-.71942-51.30895-1.81047-76.94483-.39546-9.29189-.79763-18.63767-2.768-27.72684-.50174-2.31446-1.32449-4.88824-3.46107-5.90975-1.8085-.86464-3.95412-.30484-5.83455.38962a46.4571,46.4571,0,0,0-21.758,16.749c-5.80877,8.26728-8.66611,18.18454-14.351,26.51457-4.12547,6.045-6.51143.77665-9.26012-3.675Q444.7501,590.34382,439.9618,582.5968Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#fff\"></path><path d=\"M435.58,559.8986c-.72.51-1.43,1.05-2.11005,1.62a40.84911,40.84911,0,0,0-6.8,7.16,56.72208,56.72208,0,0,0-7.7,14.53c-3.32,9.1-4.76,18.76-6.13995,28.34a68.39774,68.39774,0,0,0-.97,10.68c.21,13.16,7.99,25.35,8,38.52,0,.5-.01.99-.04,1.49a43.26068,43.26068,0,0,1-.76,6.42c-.57,3.09-1.39,6.14-2.2,9.18-2.04,7.62-4.24,15.52-8.22,22.21-.4.68-.83,1.35-1.27,2h-28c.22-.67.45-1.33.67-2q7.155-21.195,14.30005-42.38c1.46-4.32,2.92-8.66,3.95-13.1a124.07457,124.07457,0,0,0,2.41-16.63q1.65-17.385,2.17-34.84c.13-4.18.22-8.45,1.57-12.41a40.59828,40.59828,0,0,1,4.98-9.08q4.335-6.52506,8.67005-13.05c1.61-2.42,3.3-4.91,5.78-6.42,2.07-1.27,4.53-1.73,6.71-2.8a34.31183,34.31183,0,0,0,3.94-2.61c3.26-2.31,7.09-4.74,9.9-2.38a5.51383,5.51383,0,0,1,1.16,1.33,6.69111,6.69111,0,0,1,.43.77C448.71,552.28862,439.21,557.3286,435.58,559.8986Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M527.82,702.04863H398.14c.7-.64,1.39-1.31,2.06-2,.1-.1.19-.2.29-.3,4.96-5.15,6.09-11.48,8.58-18.18005q2.805-7.575,5.61-15.14a7.83143,7.83143,0,0,1,1.43-2.69,4.43654,4.43654,0,0,1,1.97-1.18,7.642,7.642,0,0,1,1.74-.32,19.40735,19.40735,0,0,1,2.53,0q34.905,1.8,69.76,4.39,4.5.34506,9,.69c2.45,1.82,4.87,3.75,7.18,5.79,7.51,6.6,14.02,14.37,17.75,23.55.45,1.11.86,2.24,1.2,3.39C527.46,700.7086,527.65,701.37859,527.82,702.04863Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"349.127 338.23 322.517 324.291 285.77 329.993 278.167 363.573 297.093 362.845 302.38 350.508 302.38 362.641 311.113 362.305 316.181 342.665 319.349 363.573 350.394 362.939 349.127 338.23\" style=\"fill:var(--textSecondary,#2f2e41)\"></polygon><path d=\"M527.82,702.04863H498.54c-.21-.66-.41-1.33-.6-2a157.25975,157.25975,0,0,1-4.54-22.68c-.31-2.19-.58-4.39-.83-6.58-.16-1.39-.31-2.77-.46-4.16-1.68-15.44-2.97-31.03-7.69-45.81-.57-1.79-1.19-3.57-1.79-5.35a63.09619,63.09619,0,0,1-2.6-9.41c-1.28-7.32-.32-14.9-1.64-22.21-.74-4.08-2.21-7.67-3.1-11.41a23.10828,23.10828,0,0,1-.66-6.91,14.88177,14.88177,0,0,1,7.79-3.86c1.01-.17,2.15-.3,2.76-1.11a3.464,3.464,0,0,0,.46-2.04,97.95682,97.95682,0,0,0-.81-14.11c-.2-1.64-.45-3.28-.75-4.91-.01-.08-.03-.15-.04-.23,2.44-1.06,5.19-1.07,7.84-1.06,2.89.01,5.77.01,8.65.02q7.995.03,15.99.05c4.96.01,10.09.06,14.6,2.11,4.66,2.13,8.2,6.24,10.54,10.8s3.61,9.58,4.76,14.57a19.51973,19.51973,0,0,1,.5,4.21c.22,11.26-8.18,22.6-9.02,34.11-.27,3.73.04,7.49-.3,11.22-.34,3.74-1.34,7.4-1.52,11.14-.01.19-.02.39-.02.58-.11,4.87,1.31,9.64,2.95,14.23,2.54,7.13,5.63,14.04,8.82,20.91,3.08,6.65,6.24,13.27,9.08,20.01a34.26306,34.26306,0,0,1,2.95,9.89,13.72406,13.72406,0,0,1-1.51,7.99,9.3757,9.3757,0,0,1-1.19,1.69l-.02.02c-.09.1-.18.2-.27.29H527.82Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M555.71,691.78862a11.082,11.082,0,0,1-1.07,3.83c-.05.12-.1.23-.15.35-.58,1.37-1.17,2.72-1.78,4.08-.3.66-.6,1.33-.91,2H535.24a18.53555,18.53555,0,0,0,1.66-2c2.54-3.53,4.01-7.82,6.6-11.63a8.9538,8.9538,0,0,1,1.21-1.44C548.86,682.9586,555.97,683.77861,555.71,691.78862Z\" transform=\"translate(-139.5 -125.26398)\" fill=\"#ffb8b8\"></path><path d=\"M566.49,702.04863a19.61817,19.61817,0,0,0,.53-2c.12-.53.22-1.05.3-1.58.53-3.49.52-7.06,1.35-10.49,1.17-4.91,4.68-10.72,1.79-14.85a15.69052,15.69052,0,0,0,6.21-2.78c1.72-1.5,2.72-4.1,1.68-6.14-1.03-2.01-3.82-3.34-3.44-5.57a5.313,5.313,0,0,1,.98-1.94,14.52982,14.52982,0,0,0-.25-15.94c-.91-1.3-2.03-2.44-2.86-3.8a22.66345,22.66345,0,0,1-2.07-5.27,98.1662,98.1662,0,0,0-12.63-26.18,17.37178,17.37178,0,0,1-2.79-5.16,21.30405,21.30405,0,0,1-.22-6.13c.2-8.08-2.82-15.97-7.17-22.77-.32-.5-.65-.99-.98-1.48-4.2-6.19-9.41-11.62-14.6-17.01-2.14,1-4.03,1.65-5.14,3.73a11.086,11.086,0,0,0-.99,3.72c-1.42,9.9-2.65,19.86-3.61,29.81-.48,5.03-.97,10.1-.4,15.12s2.28,10.05,5.68,13.78c2.13,2.34,4.83,4.08,7.14,6.24q.555.525,1.08,1.08a35.40951,35.40951,0,0,1,4.41,5.79,49.92056,49.92056,0,0,1,7.34,29.93,48.64077,48.64077,0,0,1-.75,5.64,23.32684,23.32684,0,0,1-2.66,7.6c-1.05,1.73-2.43,3.24-3.38,5.03s-1.4,4.02-.46,5.81a11.83106,11.83106,0,0,1,4.13.74,17.52948,17.52948,0,0,1,7.8,5.95,25.93811,25.93811,0,0,1,1.98,3.04,37.44769,37.44769,0,0,1,1.98,4.08c.24.55.47,1.12.69,1.69a1.65873,1.65873,0,0,1,.12.31Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><polygon points=\"345.231 402.805 324.027 412.053 319.051 412.545 296.446 407.631 297.443 427.746 319.543 417.521 324.519 417.029 348.195 422.725 345.231 402.805\" style=\"fill:var(--accent,#6c63ff)\"></polygon><path d=\"M527.24,700.04863c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Zm-195.99-439v441h276.5v-441Zm274.5,439H333.25v-437h272.5Zm-78.51,0c.22.66.41,1.33.58,2h7.42a18.53555,18.53555,0,0,0,1.66-2Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--textSecondary,#2f2e41)\"></path><path d=\"M422.10107,453.98173l.17139-.85986c.05078-.25537,4.94483-25.82471-7.665-49.78418l-.91211-1.73291,1.93848.27735c.55664.07959,13.28906,2.12207,22.417,22.22216.80127-3.063,1.60791-9.50537-.89746-20.36035l-.35644-1.54541,1.54785.34424c.48193.10693,11.46923,2.69678,15.82519,16.041l17.29492-14.63428V427.722c4.65137-2.36572,18.91455-8.731,27.98633-3.062l1.38379.86523-1.39892.84033c-.11866.07129-11.26172,6.83057-13.4712,13.6709,2.603.022,8.81055.11133,14.957.48,15.78613.94727,17.10839,2.76465,17.10839,4.39356v.5708l-.49121.29c-.27978.16552-27.999,16.69043-28.61328,29.58349l-.06348,1.32715Zm62.59229-11.95214H483.5127l.19433-1.16455c1.09717-6.58448,9.71729-12.93409,13.23291-15.27686-9.90869-4.37744-25.812,4.57324-25.979,4.66846l-1.4961.854V408.262l-16.3667,13.84863-.41308-1.51367c-2.86817-10.51514-10.01758-14.37061-13.208-15.59961,3.2915,15.76123-.33057,22.0498-.4917,22.31885l-1.02392,1.707-.7583-1.84082c-6.61377-16.06348-15.73536-21.17139-19.7793-22.70508,10.3999,21.457,7.68262,43.56494,6.958,48.168l62.68359,21.3125c2.00537-12.36524,23.55811-26.28467,28.49219-29.32471C512.51221,443.01445,497.80859,442.02959,484.69336,442.02959Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M408.67139,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,408.67139,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,410.67139,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M434.541,391.87724a3.58691,3.58691,0,1,1,3.58691,3.58692A3.59072,3.59072,0,0,1,434.541,391.87724Zm2,0a1.58691,1.58691,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,436.541,391.87724Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M472.05176,398.345a3.58692,3.58692,0,1,1,3.58691,3.58691A3.59072,3.59072,0,0,1,472.05176,398.345Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58692A1.58874,1.58874,0,0,0,474.05176,398.345Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M522.49756,442.323a3.58692,3.58692,0,1,1,3.58691,3.58692A3.59073,3.59073,0,0,1,522.49756,442.323Zm2,0a1.58692,1.58692,0,1,0,1.58691-1.58691A1.58875,1.58875,0,0,0,524.49756,442.323Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><path d=\"M504.38867,420.33379a3.58716,3.58716,0,1,1,3.58692,3.58691A3.59073,3.59073,0,0,1,504.38867,420.33379Zm2,0a1.58716,1.58716,0,1,0,1.58692-1.58692A1.58875,1.58875,0,0,0,506.38867,420.33379Z\" transform=\"translate(-139.5 -125.26398)\" style=\"fill:var(--accent,#6c63ff)\"></path><rect x=\"12\" y=\"645.28465\" width=\"909\" height=\"2\" style=\"fill:var(--textSecondary,#3f3d56)\"></rect></svg></div><span class=\"t-klein\" style=\"font-weight:600;color:var(--textPrimary)\">Duel</span></div></div>\n<div role=\"link\" aria-label=\"Streak: 3 days in a row, opens progress\" style=\"position:absolute;left:20px;top:273px;width:350px;height:44px;box-sizing:border-box;padding:0;display:flex;align-items:center;gap:8px\">\n<span style=\"width:24px;height:36px;flex:none;color:var(--warning);display:flex;align-items:center;justify-content:center\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"></path></svg></span>\n<span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap\"><span class=\"t-ziffern\" style=\"color:var(--warningText)\">3</span> days in a row</span>\n<div aria-label=\"Learned Mon, Tue, Wed. Today Wed.\" style=\"display:flex;gap:0\">\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Mo</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Tu</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent);outline:2px solid var(--accent);outline-offset:2px\"></span><span class=\"t-meta\" style=\"font-weight:600;color:var(--textPrimary)\">We</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Th</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Fr</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Sa</span></div>\n<div style=\"width:20px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:10px;height:10px;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--inputBorder)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Su</span></div>\n</div>\n</div>\n<div style=\"position:absolute;left:20px;top:469px;width:350px;display:flex;align-items:baseline;justify-content:space-between\"><span class=\"t-abschnitt\">Chapters</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6 chapters</span></div>\n<div style=\"position:absolute;left:20px;top:501px;width:350px;display:flex;flex-direction:column;gap:8px\">\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:10px 16px 14px;display:flex;align-items:center;gap:12px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span style=\"display:flex;flex:none;color:var(--accent)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Rational numbers</span><span class=\"t-meta\" style=\"color:var(--accentText)\">7.01</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg><div style=\"position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--glassLight)\"><div style=\"width:27%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 21s-4-3-4-9 4-9 4-9\"></path><path d=\"M16 3s4 3 4 9-4 9-4 9\"></path><path d=\"M15 9l-6 6\"></path><path d=\"M9 9l6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Terms and variables</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.02</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">1/13</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:8%;height:100%;background:var(--accent)\"></div></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 9h14\"></path><path d=\"M5 15h14\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Equations</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.03</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/12</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 3 4 4-4 4\"></path><path d=\"M20 7H4\"></path><path d=\"m8 21-4-4 4-4\"></path><path d=\"M4 17h16\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Relations and proportionality</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.04</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 5 5 19\"></path><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"></circle><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"></circle></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Percentages and interest</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.05</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/14</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n<div style=\"box-sizing:border-box;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px\"><div style=\"display:flex;align-items:center;gap:12px\"><span style=\"display:flex;flex:none;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h16L4 4z\"></path><path d=\"M4 14a6 6 0 0 1 6 6\"></path></svg></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-abschnitt\">Angles and symmetry</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">7.06</span></div><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0/15</span><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></div><div style=\"margin:0 -16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div></div>\n</div>\n<nav aria-label=\"Main navigation\" style=\"position:absolute;left:0;bottom:0;width:390px;height:80px\"><div class=\"tab-glas\" aria-hidden=\"true\" style=\"position:absolute;inset:0\"></div><svg width=\"390\" height=\"80\" viewBox=\"0 0 390 80\" aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;overflow:visible\"><path d=\"M0 0.5H19C32 0.5 41 31.5 65 31.5C89 31.5 98 0.5 111 0.5H390\" fill=\"none\" style=\"stroke:var(--tab-kante)\" stroke-width=\"1\"></path><path d=\"M0 1.5H19C32 1.5 41 32.5 65 32.5C89 32.5 98 1.5 111 1.5H390\" fill=\"none\" style=\"stroke:var(--tab-licht)\" stroke-width=\"1\"></path></svg><div role=\"link\" aria-label=\"Learn\" aria-current=\"page\" style=\"position:absolute;left:0;top:0;width:130px;height:52px\"><span style=\"position:absolute;left:42px;top:-21px;width:46px;height:46px;box-sizing:border-box;border-radius:var(--radius-full);background:linear-gradient(145deg,color-mix(in oklab,var(--accent) 92%,white),var(--accent));border:1px solid color-mix(in oklab,white 20%,transparent);box-shadow:0 3px 8px -4px color-mix(in oklab,var(--accent) 60%,transparent),inset 0 1px 0 color-mix(in oklab,white 25%,transparent);color:#fff;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5z\" style=\"fill:currentColor\"></path><path d=\"M9 18h6\"></path><path d=\"M10 22h4\"></path></svg></span></div><div role=\"link\" aria-label=\"Progress\" style=\"position:absolute;left:130px;top:0;width:130px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 20V10\"></path><path d=\"M12 20V4\"></path><path d=\"M6 20v-6\"></path></svg></div><div role=\"link\" aria-label=\"Profile\" style=\"position:absolute;left:260px;top:0;width:130px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"5\"></circle><path d=\"M20 21a8 8 0 0 0-16 0\"></path></svg></div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></nav>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const stil = this.props.stil ?? 'bayati';\n    return { theme: this.props.theme ?? 'dark', stil, welt: stil === 'bayati' ? (this.props.welt ?? 'violett') : '', mitHintergrund: true };\n  }\n}\n</script>\n</body>\n</html>\n","DuellFrage":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:390px;height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">Duel · 7.01 Rational numbers</div><span class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;display:flex;gap:12px;color:var(--textTertiary)\"><span>3 / 5</span><span aria-label=\"Time 1 minute 12 seconds\" style=\"color:var(--textSecondary)\">1:12</span></span></header>\n<div style=\"position:absolute;left:20px;top:107px;width:350px;display:flex;flex-direction:column;gap:16px\">\n<div aria-label=\"Race track\" style=\"position:relative;display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;font-weight:600;color:var(--textPrimary)\">You</span><div role=\"img\" aria-label=\"You: 2 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:92px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--accent)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:92px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">S</span></span></div></div><div style=\"display:flex;align-items:center;gap:8px\"><span class=\"t-meta\" style=\"width:56px;flex:none;color:var(--textSecondary)\">Fox</span><div role=\"img\" aria-label=\"Fox: 3 of 5 correct\" style=\"position:relative;width:262px;height:36px\"><div style=\"position:absolute;left:16px;right:16px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--glassLight)\"></div><div style=\"position:absolute;left:16px;width:138px;top:16px;height:4px;border-radius:var(--radius-full);background:var(--textTertiary)\"></div><span style=\"position:absolute;left:60px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:106px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:152px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:198px;top:16px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--background)\"></span><span style=\"position:absolute;left:138px;top:2px\"><span aria-hidden=\"true\" class=\"t-ziffern\" style=\"width:32px;height:32px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:1.5px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700\">M</span></span></div></div><span aria-hidden=\"true\" style=\"position:absolute;right:-6px;top:-2px;color:var(--textSecondary)\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><path d=\"M4 22v-7\"></path></svg></span><span role=\"status\" aria-live=\"polite\" class=\"t-meta t-ziffern\" style=\"padding-left:64px;color:var(--textSecondary)\">Fox solved question 3</span></div>\n\n<div aria-label=\"Question\" style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-card)\">\n<div style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:32px;height:32px;flex:none;border-radius:var(--radius-sm);background:var(--surfaceLight);color:var(--catAlgebra);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v14\"></path><path d=\"M5 10h14\"></path><path d=\"M5 21h14\"></path></svg></span><span class=\"t-meta\" style=\"flex:1;min-width:0;font-weight:600\">Absolute value and opposite number</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-fliesstext\">What is the absolute value?</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600\">|−12|</span></div>\n<div role=\"radiogroup\" style=\"display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px\"><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">12</div><div role=\"radio\" aria-checked=\"true\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--accentTint);border:2px solid var(--accent)\">−12</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">0</div><div role=\"radio\" aria-checked=\"false\" class=\"t-abschnitt t-ziffern\" style=\"height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--inputBorder)\">24</div></div>\n</div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Check</div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TestErgebnis":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"position:relative;width:390px;min-height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-muster\"></div>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Close\" style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div><div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600\">Test · 7.01 Rational numbers</div></header>\n<div style=\"position:relative;box-sizing:border-box;padding:119px 20px 162px;display:flex;flex-direction:column;gap:28px\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center\">\n<div style=\"position:relative;width:112px;height:112px\"><svg width=\"112\" height=\"112\" viewBox=\"0 0 112 112\" fill=\"none\" aria-hidden=\"true\" style=\"transform:rotate(-90deg)\"><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--surfaceLight);stroke-width:8\"></circle><circle cx=\"56\" cy=\"56\" r=\"52\" style=\"stroke:var(--success);stroke-width:8;stroke-linecap:round;stroke-dasharray:229 327\"></circle></svg><span class=\"t-anzeige\" style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center\">7/10</span></div>\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:2px\"><h1 class=\"t-titel\" style=\"margin:0\">7 of 10 correct</h1><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Time 8:24 · 2 more than last time</span></div>\n\n<div style=\"width:240px;display:flex;flex-direction:column;gap:6px\"><div style=\"display:flex;justify-content:space-between\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--accentText)\">+60 XP</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Level 3 · 180 / 200</span></div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--glassLight);overflow:hidden\"><div style=\"width:90%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n</div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Questions</span><div role=\"list\" style=\"display:flex;justify-content:space-between\"><div role=\"button\" aria-label=\"Question 1, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">1</span></div><div role=\"button\" aria-label=\"Question 2, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">2</span></div><div role=\"button\" aria-label=\"Question 3, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">3</span></div><div role=\"button\" aria-label=\"Question 4, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">4</span></div><div role=\"button\" aria-label=\"Question 5, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">5</span></div><div role=\"button\" aria-label=\"Question 6, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6</span></div><div role=\"button\" aria-label=\"Question 7, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7</span></div><div role=\"button\" aria-label=\"Question 8, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">8</span></div><div role=\"button\" aria-label=\"Question 9, wrong\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--error);color:var(--errorText);display:flex;align-items:center;justify-content:center\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">9</span></div><div role=\"button\" aria-label=\"Question 10, correct\" style=\"width:28px;display:flex;flex-direction:column;align-items:center;gap:4px\"><span style=\"width:28px;height:28px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">10</span></div></div></div>\n<div style=\"display:flex;flex-direction:column;gap:8px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding:0 4px\">Got wrong</span><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 4 · Absolute value and opposite</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">What is the absolute value?</span><span class=\"t-abschnitt t-ziffern\">|−12|</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">The absolute value is the distance from zero and never negative.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 8 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−3) · 4</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div></div>\n<span class=\"t-klein\">Different signs give minus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div><div style=\"box-sizing:border-box;padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--divider)\">\n<span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">Question 9 · Multiplying integers</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Calculate:</span><span class=\"t-abschnitt t-ziffern\">(−6) · (−2)</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><div style=\"display:flex;align-items:center;gap:8px;color:var(--errorText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Your answer</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div><div style=\"display:flex;align-items:center;gap:8px;color:var(--successText)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Correct</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Same signs give plus.</span>\n<span role=\"link\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;font-weight:600;color:var(--accentText)\">Learning path</span>\n</div></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;box-sizing:border-box;padding:12px 20px 34px;display:flex;flex-direction:column;gap:4px;background:var(--background)\"><div class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Practise mistakes again</div><div class=\"t-knopf\" style=\"height:48px;display:flex;align-items:center;justify-content:center;color:var(--accentText)\">Done</div><div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div></div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    return { theme: this.props.theme ?? 'dark' };\n  }\n}\n</script>\n</body>\n</html>\n","TheorieSchritt":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<div data-theme=\"{{ theme }}\" data-stil=\"{{ stil }}\" data-welt=\"{{ welt }}\" style=\"position:relative;width:390px;min-height:844px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitMuster }}\" hint-placeholder-val=\"{{ true }}\"><div class=\"bayati-muster\"></div></sc-if>\n<div style=\"position:absolute;left:0;top:0;width:390px;height:47px;box-sizing:border-box;padding:6px 26px 0 34px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-klein-betont\" style=\"font-weight:600\">9:41</span><span style=\"width:25px;height:12px;box-sizing:border-box;border:1px solid var(--textSecondary);border-radius:4px;padding:1px;display:flex\"><span style=\"width:72%;background:var(--textPrimary);border-radius:2px\"></span></span></div>\n<header style=\"position:absolute;left:0;top:47px;width:390px;height:60px\">\n<div style=\"height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\">\n<div style=\"width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></div>\n<div class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.04 Absolute value and opposite</div>\n<div class=\"t-meta t-ziffern\" style=\"flex:none;margin-left:12px;color:var(--textTertiary)\">2 / 9</div>\n</div>\n<div style=\"margin:0 20px;height:4px;border-radius:var(--radius-full);background:var(--surfaceLight);overflow:hidden\"><div style=\"width:22%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div>\n</header>\n<div style=\"position:relative;box-sizing:border-box;padding:123px 20px 118px;display:flex;flex-direction:column;gap:24px\">\n<div style=\"display:flex;flex-direction:column;gap:12px\"><h1 class=\"t-titel\" style=\"margin:0\">Distance from zero</h1><p class=\"t-fliesstext\" style=\"margin:0\">The absolute value of a number is its distance from zero on the number line. It is written with two vertical bars.</p></div>\n<div class=\"bayati-karo\" style=\"box-sizing:border-box;padding:24px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background-color:var(--surface);border:1px solid light-dark(var(--glassBorder),transparent);border-radius:var(--radius-md)\"><span style=\"font-size:22px;line-height:28px\">\\(|-5| = 5\\)</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">The distance from −5 to zero is 5.</span></div>\n<ol style=\"margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px\">\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">1</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Find the number on the number line</span><span style=\"font-size:17px;line-height:24px\">\\(-5\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">2</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Count the steps to zero</span><span style=\"font-size:17px;line-height:24px\">\\(-5 \\to 0\\)</span></div></li>\n<li style=\"display:flex;gap:12px\"><span class=\"t-meta t-ziffern\" style=\"width:24px;height:24px;flex:none;border-radius:var(--radius-full);background:var(--accentTint);color:var(--accentText);font-weight:600;display:flex;align-items:center;justify-content:center\">3</span><div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-klein-betont\" style=\"font-weight:600\">Write down the absolute value</span><span style=\"font-size:17px;line-height:24px\">\\(|-5| = 5\\)</span></div></li>\n</ol>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Remember</span><span class=\"t-klein-betont\">An absolute value is never negative.</span></div>\n<div style=\"position:relative;overflow:hidden;box-sizing:border-box;padding:14px 16px 14px 20px;display:flex;flex-direction:column;gap:4px;background:var(--warningFill);border-radius:var(--radius-md)\"><span style=\"position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warning)\"></span><span class=\"t-beschriftung\" style=\"color:var(--warningText)\">Watch out</span><span class=\"t-klein-betont\">\\(-\\lvert -5 \\rvert\\) is \\(-5\\), not \\(5\\).</span></div>\n<sc-if value=\"{{ verdeckt }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:4px;border:1px dashed var(--accentBorder);border-radius:var(--radius-card)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">Tap to see the answer</span></div></sc-if>\n<sc-if value=\"{{ aufgedeckt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--accentBorder);border-radius:var(--radius-md)\"><span class=\"t-klein-betont\" style=\"font-weight:600\">What is \\(|-12|\\)?</span><span style=\"font-size:22px;line-height:28px\">\\(|-12| = 12\\)</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">From −12 to zero it is 12 steps.</span></div></sc-if>\n<div style=\"height:160px;box-sizing:border-box;padding:16px;border-radius:var(--radius-md);background:var(--surfaceLight);display:flex;align-items:center;justify-content:center\"><span class=\"t-meta\" style=\"color:var(--textSecondary);text-align:center;max-width:240px\">Drawing: number line from −6 to 6, distance from −5 to zero marked</span></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:390px;height:94px;box-sizing:border-box;padding:12px 20px 34px;display:flex;gap:12px;background:var(--background)\">\n<div style=\"width:56px;height:48px;flex:none;box-sizing:border-box;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--accentText);display:flex;align-items:center;justify-content:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 19-7-7 7-7\"></path><path d=\"M19 12H5\"></path></svg></div>\n<div class=\"t-knopf\" style=\"flex:1;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder);color:var(--textPrimary)\">Next</div>\n<div style=\"position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:var(--radius-full);background:var(--textPrimary)\"></div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  componentDidMount() {\n    let n = 0;\n    const go = () => {\n      const mj = window.MathJax;\n      if (mj && mj.typesetPromise) mj.typesetPromise().catch(() => {});\n      else if (n++ < 60) setTimeout(go, 200);\n    };\n    go();\n  }\n  renderVals() {\n    const stil = this.props.stil ?? 'bayati';\n    const auf = !!this.props.aufgedeckt;\n    return { theme: this.props.theme ?? 'dark', stil, welt: stil === 'bayati' ? (this.props.welt ?? 'violett') : '', mitMuster: true, aufgedeckt: auf, verdeckt: !auf };\n  }\n}\n</script>\n</body>\n</html>\n","ProbierAufgabe":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div ref=\"{{ wurzel }}\" data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"max-width:{{ breite }};display:flex;flex-direction:column;gap:40px;color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;padding-bottom:20px;border-bottom:1px solid var(--divider)\"><span class=\"t-abschnitt\">Which grade are you in?</span><div role=\"radiogroup\" aria-label=\"Grade\" style=\"display:flex;flex-wrap:wrap;gap:4px\"><sc-for list=\"{{ klassen }}\" as=\"k\" hint-placeholder-count=\"4\"><sc-if value=\"{{ k.an }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont t-ziffern\" style=\"height:44px;min-width:64px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textPrimary);border-bottom:2px solid var(--accent);padding-top:2px\">Gr. {{ k.g }}</span></sc-if><sc-if value=\"{{ k.aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ k.klick }}\" class=\"t-klein-betont t-ziffern\" style=\"height:44px;min-width:64px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom:2px solid transparent;padding-top:2px;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Gr. {{ k.g }}</span></sc-if></sc-for></div></div>\n<div style=\"display:flex;gap:64px;align-items:flex-start\">\n<sc-if value=\"{{ mitListe }}\" hint-placeholder-val=\"{{ false }}\"><nav aria-label=\"Questions\" style=\"width:248px;flex:none;display:flex;flex-direction:column;gap:4px\"><span class=\"t-beschriftung t-ziffern\" style=\"padding:0 16px 12px;color:var(--textSecondary)\">Grade {{ klasse }} · {{ anzahl }} questions</span><sc-for list=\"{{ eintraege }}\" as=\"e\" hint-placeholder-count=\"3\"><sc-if value=\"{{ e.an }}\" hint-placeholder-val=\"{{ false }}\"><div aria-current=\"step\" style=\"min-height:56px;box-sizing:border-box;padding:8px 16px;display:flex;align-items:center;gap:12px;border-radius:var(--radius-card);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);border:1px solid var(--accentBorder)\"><span style=\"width:24px;flex:none;display:flex;justify-content:center\"><sc-if value=\"{{ e.r }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--successText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"correct\"><path d=\"M20 6 9 17l-5-5\"></path></svg></sc-if><sc-if value=\"{{ e.f }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--errorText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"wrong\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></sc-if><sc-if value=\"{{ e.offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--accentText)\">{{ e.nr }}</span></sc-if></span><span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;text-wrap:pretty\">{{ e.thema }}</span></div></sc-if><sc-if value=\"{{ e.aus }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" tabIndex=\"0\" onClick=\"{{ e.klick }}\" style=\"min-height:56px;box-sizing:border-box;padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:var(--radius-card);border:1px solid transparent;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\"><span style=\"width:24px;flex:none;display:flex;justify-content:center\"><sc-if value=\"{{ e.r }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--successText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"correct\"><path d=\"M20 6 9 17l-5-5\"></path></svg></sc-if><sc-if value=\"{{ e.f }}\" hint-placeholder-val=\"{{ false }}\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--errorText)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-label=\"wrong\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></sc-if><sc-if value=\"{{ e.offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textTertiary)\">{{ e.nr }}</span></sc-if></span><span class=\"t-klein-betont\" style=\"flex:1;min-width:0;font-weight:600;text-wrap:pretty\">{{ e.thema }}</span></div></sc-if></sc-for></nav></sc-if>\n<div style=\"flex:1;min-width:0;display:grid;grid-template-columns:{{ spalten }};column-gap:48px;row-gap:24px;align-items:start\">\n<sc-if value=\"{{ ohneListe }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"grid-column:1;display:flex;align-items:center;gap:8px\"><span class=\"t-meta t-ziffern\" style=\"flex:1;color:var(--textSecondary)\">Question {{ nr }} of {{ anzahl }}</span><span role=\"button\" aria-label=\"Previous question\" onClick=\"{{ zurueck }}\" style=\"width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 18-6-6 6-6\"></path></svg></span><div aria-hidden=\"true\" style=\"display:flex;align-items:center;gap:6px\"><sc-for list=\"{{ punkte }}\" as=\"d\" hint-placeholder-count=\"2\"><sc-if value=\"{{ d.an }}\" hint-placeholder-val=\"{{ true }}\"><span style=\"width:24px;height:8px;border-radius:var(--radius-full);background:var(--accent)\"></span></sc-if><sc-if value=\"{{ d.aus }}\" hint-placeholder-val=\"{{ false }}\"><span style=\"width:8px;height:8px;border-radius:var(--radius-full);background:var(--surfaceLight)\"></span></sc-if></sc-for></div><span role=\"button\" aria-label=\"Next question\" onClick=\"{{ vor }}\" style=\"width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--textSecondary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></div></sc-if>\n<sc-if value=\"{{ z.rabatt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Rabatt\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.thermometer }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Thermometer\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.dreisatzgraph }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Dreisatz Graph\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.winkel }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Winkel\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.kugeln }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Kugeln\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.zinsen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Zinsen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.umstellen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Umstellen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.taxi }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Taxi\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.gluecksrad }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Gluecksrad\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.pythagoras }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Pythagoras\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.parabel }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Parabel\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.faktorisieren }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Faktorisieren\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.potenzen }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Potenzen\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.dreieckseiten }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Dreieck Seiten\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.exponential }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Exponential\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.polynomdivision }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Polynomdivision\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.sinus }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Sinus\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ z.kurvendiskussion }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"Aufgabe Kurvendiskussion\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" eingebettet=\"{{ true }}\" on-ergebnis=\"{{ ergebnis }}\" bild-breite=\"{{ bildBreite }}\" hint-size=\"100%,480px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ istAlt }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;min-width:0\"><dc-import name=\"ProbierModell\" theme=\"{{ theme }}\" nebeneinander=\"{{ nebeneinander }}\" aufgabe=\"{{ aufgabe }}\" on-next=\"{{ naechste }}\" hint-size=\"100%,560px\"></dc-import></div></sc-if>\n<sc-if value=\"{{ fertig }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"grid-column:1 / -1;display:flex;flex-direction:column;gap:20px;padding:24px 0\"><span class=\"t-titel t-ziffern\" style=\"text-wrap:pretty\">That was 5 of more than 1,000 questions.</span><div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px\"><a href=\"#\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;gap:8px;text-decoration:none;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background)\">Continue in the app<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"></path><path d=\"m12 5 7 7-7 7\"></path></svg></a><span role=\"button\" onClick=\"{{ nochmal5 }}\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer;color:var(--accentText)\">Five new questions</span></div></div></sc-if>\n<sc-if value=\"{{ linkUnten }}\" hint-placeholder-val=\"{{ true }}\"><a href=\"#\" class=\"t-klein-betont\" style=\"grid-column:1;justify-self:start;height:48px;display:flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">Continue in the app<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></a></sc-if>\n</div>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:1120,&quot;height&quot;:760},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;nebeneinander&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  // Klasse 7: fünf Themen, je drei Aufgaben; Option 0 ist jeweils die richtige, gemischt wird beim Ziehen.\n  T7 = [\n    { thema: 'Percentages', v: 'pz', pool: [\n      { id: '1.1', frage: 'A hoodie costs €60. It is 25% off. How much do you pay?', optionen: ['€45', '€15', '€35', '€50'], d: { preis: 60, prozent: 25 } },\n      { id: '1.2', frage: 'A game costs €40. You get 50% off. How much do you save?', optionen: ['€20', '€10', '€50', '€30'], d: { preis: 40, prozent: 50, sparen: true } },\n      { id: '1.3', frage: 'Sneakers cost €120. 10% off. How much do you pay?', optionen: ['€108', '€12', '€110', '€100'], d: { preis: 120, prozent: 10 } } ] },\n    { thema: 'Negative numbers', v: 'th', pool: [\n      { id: '2.1', frage: 'In the morning it is −3 °C. By noon the temperature rises by 8 °C. How warm is it at noon?', optionen: ['5 °C', '11 °C', '−11 °C', '−5 °C'], d: { start: -3, schritt: 8 } },\n      { id: '2.2', frage: 'In the evening it is 4 °C. At night the temperature drops by 9 °C. How cold is it at night?', optionen: ['−5 °C', '5 °C', '−13 °C', '13 °C'], d: { start: 4, schritt: -9 } },\n      { id: '2.3', frage: 'It is 6 °C in Berlin and −4 °C in Oslo. How much warmer is it in Berlin?', optionen: ['10 °C', '2 °C', '−10 °C', '4 °C'], d: { a: 6, b: -4, namen: ['Berlin', 'Oslo'] } } ] },\n    { thema: 'Proportional relationships', v: 'ds', pool: [\n      { id: '3.1', frage: '4 bread rolls cost €1.60. How much do 10 rolls cost?', optionen: ['€4.00', '€6.40', '€16.00', '€3.20'], d: { kopf: ['Rolls', 'Euro'], z1: ['4', '€1.60'], teiler: '÷ 4', z2: ['1', '€0.40'], faktor: '× 10', z3: ['10', '€4.00'] } },\n      { id: '3.2', frage: '3 cinema tickets cost €24. How much do 5 tickets cost?', optionen: ['€40', '€32', '€45', '€26'], d: { kopf: ['Tickets', 'Euro'], z1: ['3', '€24'], teiler: '÷ 3', z2: ['1', '€8'], faktor: '× 5', z3: ['5', '€40'] } },\n      { id: '3.3', frage: 'A car drives 150 km in 2 hours. How far does it get in 5 hours?', optionen: ['375 km', '300 km', '450 km', '225 km'], d: { kopf: ['Hours', 'km'], z1: ['2', '150 km'], teiler: '÷ 2', z2: ['1', '75 km'], faktor: '× 5', z3: ['5', '375 km'] } } ] },\n    { thema: 'Angle sum in a triangle', v: 'wi', pool: [\n      { id: '4.1', frage: 'Two angles of a triangle are 50° and 70°. How big is the third?', optionen: ['60°', '120°', '240°', '50°'], d: { w: [50, 70, 60], frag: [2] } },\n      { id: '4.2', frage: 'A triangle has a right angle and an angle of 35°. How big is the third?', optionen: ['55°', '145°', '35°', '65°'], d: { w: [90, 35, 55], frag: [2], recht: 0 } },\n      { id: '4.3', frage: 'Two angles of a triangle are equal, the third is 100°. How big is each of the two?', optionen: ['40°', '80°', '100°', '130°'], d: { w: [40, 40, 100], frag: [0, 1] } } ] },\n    { thema: 'Probability', v: 'ku', pool: [\n      { id: '5.1', frage: 'A bag holds 3 red and 5 blue balls. What is the probability of drawing a red one?', optionen: ['3/8', '3/5', '5/8', '1/3'], d: { kugeln: [['red', 3], ['blue', 5]], gesucht: ['red'] } },\n      { id: '5.2', frage: 'A wheel of fortune has 6 equal sections, 2 of them green. What is the probability of green?', optionen: ['1/3', '2/4', '1/2', '2/3'], d: { rad: true, kugeln: [['green', 2], ['grey', 4]], gesucht: ['green'], extra: '= 1/3' } },\n      { id: '5.3', frage: 'A bowl holds 4 red, 2 yellow and 4 green gummy bears. What is the probability of not drawing a red one?', optionen: ['6/10', '4/10', '2/10', '4/6'], d: { kugeln: [['red', 4], ['yellow', 2], ['green', 4]], gesucht: ['yellow', 'green'] } } ] }\n  ];\n  N = {\"7\":[\"Winkel\",\"Dreisatz Graph\",\"Thermometer\",\"Kugeln\"],\"8\":[\"Zinsen\",\"Umstellen\",\"Taxi\",\"Gluecksrad\",\"Pythagoras\"],\"9\":[\"Parabel\",\"Faktorisieren\",\"Potenzen\",\"Dreieck Seiten\"],\"10\":[\"Exponential\",\"Polynomdivision\",\"Sinus\",\"Kurvendiskussion\"]};\n  TH = { 'Rabatt': 'Percentages', 'Thermometer': 'Negative numbers', 'Dreisatz Graph': 'Proportional relationships', 'Winkel': 'Angle sum in a triangle', 'Kugeln': 'Probability', 'Zinsen': 'Interest', 'Umstellen': 'Rearranging formulas', 'Taxi': 'Linear functions', 'Gluecksrad': 'Probability', 'Pythagoras': 'Pythagoras’ theorem', 'Parabel': 'Quadratic functions', 'Faktorisieren': 'Quadratic equations', 'Potenzen': 'Laws of exponents', 'Dreieck Seiten': 'Trigonometry', 'Exponential': 'Exponential functions', 'Polynomdivision': 'Polynomial division', 'Sinus': 'Sine functions', 'Kurvendiskussion': 'Curve sketching', w10: 'Cube net', zy10: 'Cylinder', si10: 'Sine', bd10: 'Tree diagram' };\n  state = { klasse: 7, idx: 0, fertig: false, runde: this.ziehe(), erg: {} };\n  ziehe() {\n    return this.T7.map((t) => { const a = t.pool[Math.floor(Math.random() * t.pool.length)]; const ord = [0, 1, 2, 3].sort(() => Math.random() - .5);\n      return Object.assign({}, a, { thema: t.thema, v: t.v, optionen: ord.map((i) => a.optionen[i]), richtig: ord.indexOf(0), id: a.id + '-' + ord.join('') }); });\n  }\n  A = {\n    8: [\n      { id: 'py8', v: 'py', pool: [1, 2], frage: 'The legs are a = 3 cm and b = 4 cm. How long is the hypotenuse c?', optionen: ['7 cm', '5 cm', '25 cm', '6 cm'], richtig: 1, weg: ['c² = 3² + 4² = 9 + 16.', 'c² = 25.', 'c = √25 = 5 cm.'] },\n      { id: 'g8', v: 'g', pool: [2], frage: 'Where does the line y = 2x + 1 cross the y-axis?', optionen: ['(1 | 0)', '(0 | 2)', '(0 | 1)', '(0 | −1)'], richtig: 2, weg: ['On the y-axis, x = 0.', 'y = 2 · 0 + 1 = 1.', 'The intersection is (0 | 1).'] },\n      { id: 'k8', v: 'k', pool: [1, 2], frage: 'A circle has radius r = 4 cm. What is its area?', optionen: ['≈ 25.1 cm²', '≈ 12.6 cm²', '≈ 50.3 cm²', '≈ 100.5 cm²'], richtig: 2, weg: ['Rearranged, the circle’s slices almost form a rectangle: π · r wide, r high.', 'A = π · r² = π · 4 · 4.', 'π · 16 ≈ 50.3 cm².'] },\n      { id: 'ur8', v: 'ur', pool: [1, 2], frage: 'An urn holds 3 blue and 5 red balls. You draw one. What is P(blue)?', optionen: ['3/5', '5/8', '3/8', '1/3'], richtig: 2, weg: ['Favourable: 3 blue balls.', 'Possible: 3 + 5 = 8 balls.', 'P(blue) = 3/8 = 37.5%.'] }\n    ],\n    9: [\n      { id: 'pr9', v: 'pr', pool: [1, 2], frage: 'A pyramid has a square base with a = 6 cm and height h = 9 cm. What is its volume?', optionen: ['324 cm³', '54 cm³', '162 cm³', '108 cm³'], richtig: 3, weg: ['Base area G = 6 · 6 = 36 cm².', 'A cuboid with the same base and height holds 36 · 9 = 324 cm³.', 'The pyramid fills a third of it: 324 : 3 = 108 cm³.'] },\n      { id: 'g9', v: 'g', pool: [0, 2], frage: 'What are the zeros of the parabola y = x² − 4?', optionen: ['x = 0 and x = 4', 'x = −2 and x = 2', 'x = −4 and x = 4', 'only x = 0'], richtig: 1, weg: ['Zeros means y = 0, so x² − 4 = 0.', 'x² = 4.', 'x = −2 or x = 2.'] },\n      { id: 'st9', v: 'st', pool: [1, 2], frage: 'You are 1.80 m tall and cast a 3 m shadow. The tree’s shadow is 10 m long. How tall is the tree?', optionen: ['5 m', '6 m', '7.5 m', '12 m'], richtig: 1, weg: ['Same sun, same angle: both triangles have the same shape.', 'The tree’s shadow is 10 : 3 ≈ 3.3 times as long as yours.', 'So the tree is 1.8 · 10 : 3 = 6 m tall.'] },\n      { id: 'sp9', v: 'sp', pool: [1, 2], frage: 'Where is the vertex of the parabola y = (x − 2)² + 1?', optionen: ['S(−2 | 1)', 'S(2 | 1)', 'S(2 | −1)', 'S(1 | 2)'], richtig: 1, weg: ['Start with the standard parabola y = x² with vertex (0 | 0).', '(x − 2)² shifts it 2 to the right.', '+ 1 shifts it 1 up: S(2 | 1).'] }\n    ],\n    10: [\n      { id: 'w10', v: 'w', pool: [0], frage: 'The net is folded into a cube. Which number is then opposite the 2?', optionen: ['1', '4', '5', '6'], richtig: 1, weg: ['Red is the bottom, the 5 folds on top.', '1 and 6 become the back and the front.', '2 and 4 fold up on the left and right: the 4 is opposite the 2.'] },\n      { id: 'zy10', v: 'zy', pool: [1, 2], frage: 'A cylinder has radius r = 3 cm and height h = 5 cm. What is its surface area?', optionen: ['≈ 94.2 cm²', '≈ 150.8 cm²', '≈ 75.4 cm²', '≈ 141.4 cm²'], richtig: 1, weg: ['Top and bottom: 2 · π · 3² ≈ 56.5 cm².', 'The unrolled side is a rectangle: 2π · 3 · 5 ≈ 94.2 cm².', 'Together ≈ 150.8 cm².'] },\n      { id: 'si10', v: 'si', pool: [1, 2], frage: 'What is sin 150°?', optionen: ['0.5', '0.87', '−0.5', '1'], richtig: 0, weg: ['150° is 30° short of the 180° mark.', 'The point at 150° mirrors 30° across the y-axis: same height.', 'sin 150° = sin 30° = 0.5.'] },\n      { id: 'bd10', v: 'bd', pool: [1, 2], frage: 'You toss a coin twice. What is the probability of two heads?', optionen: ['½', '¼', '⅓', '⅛'], richtig: 1, weg: ['First toss: P(heads) = ½.', 'Second toss: ½ again, independent of the first.', 'Multiply along the path: ½ · ½ = ¼.'] }\n    ]\n  };\n  wurzel = (el) => { this.el = el; };\n  componentDidMount() { if (!this.el || !window.ResizeObserver) return; this.ro = new ResizeObserver(() => { const w = this.el.clientWidth; if (w !== this.state.w) this.setState({ w }); }); this.ro.observe(this.el); }\n  componentWillUnmount() { this.ro && this.ro.disconnect(); }\n  renderVals() {\n    const k = this.state.klasse, alt = this.A[k] || [], L = (this.N[k] || alt).map(x => typeof x === 'string' ? (alt.find(a => a.id === x) || x) : x), n = L.length, i = this.state.idx % n, nb = !!this.props.nebeneinander, cur = L[i], neu = typeof cur === 'string';\n    const z = {}; Object.values(this.N).forEach(l => l.forEach(f => { z[f.toLowerCase().replace(/ /g, '')] = false; }));\n    if (neu) z[cur.toLowerCase().replace(/ /g, '')] = true;\n    const erg = this.state.erg, mitListe = nb && this.props.liste !== false;\n    return { theme: this.props.theme ?? 'light', wurzel: this.wurzel, bildBreite: nb ? 0 : (this.props.bildBreite || this.state.w || 0), nebeneinander: nb, breite: nb ? 'none' : '640px', spalten: nb && !mitListe ? 'minmax(0,1fr) 448px' : 'minmax(0,1fr)',\n      mitListe, ohneListe: !mitListe, klasse: k,\n      eintraege: L.map((a, d) => { const r = erg[k + '-' + d]; return { nr: d + 1, thema: this.TH[typeof a === 'string' ? a : a.id] || '', an: d === i, aus: d !== i, r: r === 'r', f: r === 'f', offen: !r, klick: () => this.setState({ idx: d }) }; }),\n      ergebnis: (e) => { if (!e) return; const key = k + '-' + i; if (this.state.erg[key] === e) return; this.setState(s => ({ erg: Object.assign({}, s.erg, { [key]: e }) })); }, nr: i + 1, anzahl: n, aufgabe: neu ? null : L[i],\n      z, istAlt: !neu, fertig: false, linkUnten: true,\n      klassen: [7, 8, 9, 10].map(g => ({ g, an: g === k, aus: g !== k, klick: () => this.setState({ klasse: g, idx: 0 }) })),\n      punkte: L.map((_, d) => ({ an: d === i, aus: d !== i })),\n      naechste: () => this.setState({ idx: (i + 1) % n }), nochmal5: () => this.setState({ idx: 0 }),\n      vor: () => this.setState({ idx: (i + 1) % n }), zurueck: () => this.setState({ idx: (i + n - 1) % n }) };\n  }\n}\n</script>\n</body>\n</html>\n","Aufgabe Winkel":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script><style>body{margin:0}</style></helmet>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" style=\"display:grid;grid-template-columns:{{ spalten }};gap:{{ luecke }};align-items:center;padding:{{ rand }};background:{{ grund }};color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:20px\">\n<span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Grade 7 · Angle sum in a triangle</span>\n<span class=\"t-abschnitt\" style=\"text-wrap:pretty\">Two angles of a triangle are 50° and 70°. How big is the third angle γ?</span>\n<sc-if value=\"{{ offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-fliesstext\" style=\"color:var(--textSecondary);text-wrap:pretty\">Open the arc on the protractor as wide as γ. Then check.</span></sc-if>\n<sc-if value=\"{{ richtig }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"status\" style=\"display:flex;flex-direction:column;gap:6px;color:var(--successText)\"><div style=\"display:flex;gap:10px;align-items:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M20 6 9 17l-5-5\"></path></svg><span class=\"t-titel\" style=\"font-family:var(--font-display);font-weight:700\">Correct!</span></div><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">180° − 50° − 70° = 60°.</span></div></sc-if>\n<sc-if value=\"{{ falsch }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"status\" style=\"display:flex;flex-direction:column;gap:6px;color:var(--errorText)\"><div style=\"display:flex;gap:10px;align-items:center\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"flex:none\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg><span class=\"t-titel\" style=\"font-family:var(--font-display);font-weight:700\">Wrong!</span></div><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">You had {{ wertText }}, the answer is 60°.</span></div></sc-if>\n<sc-if value=\"{{ kann }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" onClick=\"{{ pruefen }}\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);cursor:pointer\">Check</div></sc-if>\n<sc-if value=\"{{ gesperrt }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-disabled=\"true\" class=\"t-knopf\" style=\"height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);opacity:.45\">Check</div></sc-if>\n<sc-if value=\"{{ geprueft }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px\"><div role=\"button\" onClick=\"{{ reset }}\" class=\"t-knopf\" style=\"height:48px;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--radius-card);border:1px solid var(--accentBorder);color:var(--textPrimary);background:linear-gradient(var(--accentTint),var(--accentTint)),var(--background);cursor:pointer\">Solve again</div></div></sc-if>\n</div>\n<div style=\"zoom:{{ bildZoom }};grid-column:{{ mcol }};grid-row:{{ mrow }};justify-self:{{ mself }};position:relative;width:560px;height:360px;touch-action:none;user-select:none\">\n<svg width=\"560\" height=\"360\" viewBox=\"0 0 560 360\" aria-hidden=\"true\" style=\"position:absolute;inset:0;overflow:visible\">\n<line x1=\"{{ ax }}\" y1=\"{{ ay }}\" x2=\"{{ bx }}\" y2=\"{{ by }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\"></line>\n<path d=\"{{ seiteA }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ seitenOff }};transition:{{ trSeiten }}\"></path>\n<path d=\"{{ seiteB }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ seitenOff }};transition:{{ trSeiten }}\"></path>\n<path d=\"{{ halbkreis }}\" fill=\"none\" stroke=\"var(--divider)\" stroke-width=\"1.5\"></path>\n<path d=\"{{ dialTicks }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" style=\"opacity:{{ opOffen }};transition:opacity .3s\"></path>\n<path d=\"{{ wA }}\" fill=\"var(--pairIndigo)\" style=\"opacity:.18;transform:{{ tA0 }}\"></path>\n<path d=\"{{ wB }}\" fill=\"var(--pairAmber)\" style=\"opacity:.18;transform:{{ tB0 }}\"></path>\n<path d=\"{{ wCZiel }}\" fill=\"var(--pairTeal)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"opacity:{{ opGeistC }};transform:{{ tC0 }};transition:opacity .3s\"></path>\n<path d=\"{{ wA }}\" fill=\"var(--pairIndigo)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tA }};transition:{{ trWeg }}\"></path>\n<path d=\"{{ wB }}\" fill=\"var(--pairAmber)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tB }};transition:{{ trWegB }}\"></path>\n<path d=\"{{ wC }}\" fill=\"var(--pairTeal)\" stroke=\"var(--background)\" stroke-width=\"1\" stroke-linejoin=\"round\" style=\"transform:{{ tC }};transition:{{ trWegC }}\"></path>\n<path d=\"{{ diffPfad }}\" fill=\"var(--errorFill)\" stroke=\"var(--error)\" stroke-width=\"2\" stroke-dasharray=\"5 4\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\" style=\"opacity:{{ opDiff }};transform:{{ diffT }};transition:opacity .4s\"></path>\n<line x1=\"{{ basisX1 }}\" y1=\"{{ basisY }}\" x2=\"{{ basisX2 }}\" y2=\"{{ basisY }}\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-linecap=\"round\"></line>\n</svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lA.x }}px;top:{{ lA.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary)\">50°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lB.x }}px;top:{{ lB.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary)\">70°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ lC.x }}px;top:{{ lC.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textPrimary);transition:opacity .4s\">{{ gammaText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hA.x }}px;top:{{ hA.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">50°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hB.x }}px;top:{{ hB.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">70°</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ hC.x }}px;top:{{ hC.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--textSecondary);opacity:{{ opLab }};transition:opacity .4s\">{{ hCText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ dL.x }}px;top:{{ dL.y }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--errorText);opacity:{{ opDiff }};transition:opacity .4s\">{{ diffText }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ mX }}px;top:{{ summeY }}px;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;color:var(--accentText);opacity:{{ opWeg }};transition:opacity .4s .8s\">180°</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ d0x }}px;top:{{ dTy }}px;transform:translate(-50%,0);white-space:nowrap;color:var(--textTertiary);opacity:{{ opOffen }};transition:opacity .3s\">0°</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ d180x }}px;top:{{ dTy }}px;transform:translate(-50%,0);white-space:nowrap;color:var(--textTertiary);opacity:{{ opOffen }};transition:opacity .3s\">180°</span>\n<div style=\"position:absolute;left:336px;top:24px;display:flex;flex-direction:column;gap:6px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ anzeigeLabel }}</span><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:72px;line-height:76px;font-weight:600;letter-spacing:-0.03em;white-space:nowrap;color:{{ anzeigeFarbe }};transition:color .3s\">{{ anzeige }}</span><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary);min-height:20px;opacity:{{ unterOp }};transition:opacity .3s\">{{ unter }}</span></div>\n<sc-if value=\"{{ offen }}\" hint-placeholder-val=\"{{ true }}\"><div onPointerDown=\"{{ down }}\" onPointerMove=\"{{ move }}\" onPointerUp=\"{{ up }}\" onPointerCancel=\"{{ up }}\" style=\"position:absolute;left:356px;top:246px;width:170px;height:100px;cursor:{{ cursor }}\"></div>\n<span role=\"slider\" tabIndex=\"0\" aria-label=\"Angle γ on the protractor\" aria-valuemin=\"1\" aria-valuemax=\"179\" aria-valuenow=\"{{ wert }}\" onKeyDown=\"{{ taste }}\" onPointerDown=\"{{ down }}\" onPointerMove=\"{{ move }}\" onPointerUp=\"{{ up }}\" onPointerCancel=\"{{ up }}\" style=\"position:absolute;left:{{ gx }}px;top:{{ gy }}px;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--background);border:2.5px solid var(--pairTeal);cursor:{{ cursor }};outline-offset:2px;touch-action:none\"></span></sc-if>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:1120,&quot;height&quot;:460},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;nebeneinander&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  WA = 50; WB = 70; WC = 60; R = 36; RH = 64; MX = 440; MY = 330;\n  A = { x: 40, y: 272 }; B = { x: 300, y: 272 }; C = { x: 0, y: 0 };\n  state = { wert: 1, bewegt: false, geprueft: false, phase: 0, sofort: false, drag: false };\n  constructor(p) {\n    super(p);\n    const L = this.B.x - this.A.x, ta = Math.tan(this.WA * Math.PI / 180), tb = Math.tan(this.WB * Math.PI / 180), cx = L * tb / (ta + tb);\n    this.C = { x: this.A.x + cx, y: this.A.y - ta * cx };\n  }\n  rad(d) { return d * Math.PI / 180; }\n  keil(th) { const a = this.rad(th); return 'M0 0L' + this.R + ' 0A' + this.R + ' ' + this.R + ' 0 ' + (th > 180 ? 1 : 0) + ' 0 ' + (this.R * Math.cos(a)).toFixed(2) + ' ' + (-this.R * Math.sin(a)).toFixed(2) + 'Z'; }\n  tf(p, rot, sc) { return 'translate(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px) rotate(' + rot + 'deg) scale(' + sc + ')'; }\n  polar(p, winkel, r) { const a = this.rad(winkel); return { x: p.x + r * Math.cos(a), y: p.y - r * Math.sin(a) }; }\n  setzAus(e) {\n    const r = e.currentTarget.parentElement.getBoundingClientRect(), px = e.clientX - r.left, py = e.clientY - r.top;\n    let phi = Math.atan2(-(py - this.MY), px - this.MX) * 180 / Math.PI; if (phi < 0) phi = px < this.MX ? 180 : 0;\n    this.setState({ wert: Math.max(1, Math.min(179, Math.round(180 - phi))), bewegt: true });\n  }\n  spiele() {\n    this.stopp();\n    this.setState({ phase: 0, sofort: true }, () => { this.t1 = setTimeout(() => this.setState({ phase: 1, sofort: false }), 60); this.t2 = setTimeout(() => this.setState({ phase: 2 }), 1900); this.t3 = setTimeout(() => this.setState({ phase: 3 }), 4600); });\n  }\n  stopp() { clearTimeout(this.t1); clearTimeout(this.t2); clearTimeout(this.t3); }\n  componentWillUnmount() { this.stopp(); }\n  renderVals() { const v = this.renderVals0(); const e = v.richtig ? 'r' : v.falsch ? 'f' : null; if (e !== this._erg) { this._erg = e; const cb = this.props.onErgebnis; if (cb) setTimeout(() => cb(e), 0); } return v; }\n  renderVals0() {\n    const s = this.state, g = s.geprueft, ok = g && s.wert === this.WC, nb = this.props.nebeneinander ?? true, weg = g && s.phase >= 1, ende = g && s.phase >= (ok ? 2 : 3), fehl = g && !ok, zeigF = fehl && s.phase >= 2 && !ende, d = s.wert - this.WC, cw = ende || !g ? (g ? this.WC : s.wert) : s.wert, summe = this.WA + this.WB + s.wert;\n    const T = (x) => s.sofort ? 'none' : x, ease = 'cubic-bezier(.3,.7,.2,1)', M = { x: this.MX, y: this.MY }, sc = (this.RH / this.R).toFixed(3);\n    const tA0 = this.tf(this.A, 0, 1), tB0 = this.tf(this.B, -(180 - this.WB), 1), tC0 = this.tf(this.C, -(180 + this.WA), 1);\n    const gw = this.polar(M, 180 - s.wert, this.RH), teilw = 0.42;\n    return { theme: this.props.theme ?? 'light', bildZoom: this.props.bildBreite ? Math.min(1, this.props.bildBreite / 560) : 1, rand: this.props.eingebettet ? '0px' : '32px', grund: this.props.eingebettet ? 'transparent' : 'var(--background)', spalten: nb ? 'minmax(0,1fr) 560px' : 'minmax(0,1fr)', luecke: nb ? '48px' : '24px', mcol: nb ? 2 : 1, mrow: nb ? 1 : 2, mself: nb ? 'end' : 'start',\n      ax: this.A.x, ay: this.A.y, bx: this.B.x, by: this.B.y, seiteA: 'M' + this.A.x + ' ' + this.A.y + 'L' + this.C.x.toFixed(1) + ' ' + this.C.y.toFixed(1), seiteB: 'M' + this.B.x + ' ' + this.B.y + 'L' + this.C.x.toFixed(1) + ' ' + this.C.y.toFixed(1), seitenOff: 0, trSeiten: T('stroke-dashoffset .8s ' + ease),\n      dialTicks: 'M' + (this.MX - this.RH) + ' ' + this.MY + 'v6M' + (this.MX + this.RH) + ' ' + this.MY + 'v6M' + this.MX + ' ' + (this.MY - this.RH) + 'v-6', d0x: this.MX + this.RH, d180x: this.MX - this.RH, dTy: this.MY + 8, opOffen: g ? 0 : 1,\n      basisX1: this.MX - this.RH - 12, basisX2: this.MX + this.RH + 12, basisY: this.MY, halbkreis: 'M' + (this.MX - this.RH) + ' ' + this.MY + 'A' + this.RH + ' ' + this.RH + ' 0 0 1 ' + (this.MX + this.RH) + ' ' + this.MY,\n      wA: this.keil(this.WA), wB: this.keil(this.WB), wC: this.keil(cw), diffPfad: this.keil(Math.max(1, Math.abs(d))), diffT: this.tf(M, -(this.WA + this.WB + Math.min(s.wert, this.WC)), sc), opDiff: zeigF ? 1 : 0,\n      dL: this.polar(M, this.WA + this.WB + Math.min(s.wert, this.WC) + Math.abs(d) / 2, this.RH + 22), diffText: d < 0 ? 'missing ' + (-d) + '°' : d + '° too much', hCText: cw + '°', opLab: g && s.phase >= 2 ? 1 : 0,\n      tA0, tB0, tC0, opGeistC: g ? .18 : 1, wCZiel: this.keil(this.WC),\n      tA: weg ? this.tf(M, 0, sc) : tA0, tB: weg ? this.tf(M, -this.WA, sc) : tB0, tC: !g ? this.tf(M, -(180 - s.wert), sc) : weg ? this.tf(M, -(this.WA + this.WB), sc) : tC0,\n      trWeg: T('transform 1.1s ' + ease), trWegB: T('transform 1.1s ' + ease + ' .2s'), trWegC: !g ? 'none' : T('transform 1.1s ' + ease + ' .4s'),\n      lA: this.polar(this.A, this.WA / 2, 60), lB: this.polar(this.B, 180 - this.WB / 2, 60), lC: this.polar(this.C, 230 + this.WC / 2, 60), gammaText: ende ? this.WC + '°' : '?',\n      hA: this.polar(M, this.WA / 2, this.RH + 18), hB: this.polar(M, this.WA + this.WB / 2, this.RH + 18), hC: this.polar(M, this.WA + this.WB + Math.min(cw, this.WC) / 2, this.RH + 18),\n      mX: this.MX, summeY: this.MY - this.RH - 46, opWeg: weg ? 1 : 0, opEnde: ende ? 1 : 0,\n      anzeigeLabel: !g ? (s.bewegt ? 'Third angle · your answer' : 'Third angle') : ende ? 'Third angle' : fehl ? 'Sum with your angle' : 'Angle sum',\n      anzeige: !g ? (s.bewegt ? s.wert + '°' : '?') : ende ? this.WC + '°' : fehl ? summe + '°' : '180°', anzeigeFarbe: fehl && !ende ? 'var(--errorText)' : 'var(--textPrimary)',\n      unter: !g ? '' : ende ? '180° − 50° − 70° = 60°' : !fehl ? 'Three angles make a half circle' : d < 0 ? 'Missing to a half circle: ' + (-d) + '°' : 'That is ' + d + '° more than a half circle', unterOp: g && (!fehl || s.phase >= 2) ? 1 : 0,\n      offen: !g, wert: s.wert, wertText: s.wert + '°', gx: gw.x, gy: gw.y, cursor: s.drag ? 'grabbing' : 'grab',\n      geprueft: g, richtig: ok, falsch: g && !ok, kann: !g && s.bewegt, gesperrt: !g && !s.bewegt,\n      down: (e) => { e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); this.setState({ drag: true }); this.setzAus(e); },\n      move: (e) => { if (this.state.drag) this.setzAus(e); }, up: () => this.setState({ drag: false }),\n      taste: (e) => { const d = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : 0; if (d) { e.preventDefault(); this.setState({ wert: Math.max(1, Math.min(179, this.state.wert + d)), bewegt: true }); } },\n      pruefen: () => { if (!this.state.bewegt) return; this.setState({ geprueft: true }); this.spiele(); },\n      nochmal: () => { if (this.state.geprueft) this.spiele(); },\n      reset: () => { this.stopp(); this.setState({ wert: 1, bewegt: false, geprueft: false, phase: 0, sofort: false }); } };\n  }\n}\n</script>\n</body>\n</html>\n","Preise":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:grid;grid-template-columns:{{ spalten }};column-gap:32px;row-gap:{{ zeilenAbstand }};align-items:baseline\">\n<span class=\"t-ziffern\" style=\"font-size:28px;line-height:40px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap\">€44.99 : 12</span><span class=\"t-klein\" style=\"color:var(--textTertiary);white-space:nowrap\">Premium per year, per month</span>\n<span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:64px;line-height:72px;font-weight:600;letter-spacing:-0.03em;white-space:nowrap;color:var(--accentText)\">= €3.75</span><span class=\"t-klein\" style=\"color:var(--textTertiary)\">a month</span>\n<span class=\"t-ziffern\" style=\"font-size:28px;line-height:40px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;color:var(--textSecondary)\">€4.99 · 12 = €59.88</span><span class=\"t-klein\" style=\"color:var(--textTertiary);white-space:nowrap\">monthly plan, per year</span>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:176},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;}}\">\nclass Component extends DCLogic {\n  renderVals() { const s = !!this.props.schmal; return { theme: this.props.theme ?? 'light', spalten: s ? 'minmax(0,1fr)' : '320px minmax(0,1fr)', zeilenAbstand: s ? '2px' : '12px' }; }\n}\n</script>\n</body>\n</html>\n","Geraete":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:{{ luecke }};opacity:{{ op }};transition:opacity .4s ease\">\n<sc-for list=\"{{ momente }}\" as=\"m\" hint-placeholder-count=\"3\"><div style=\"display:flex;flex-direction:column;gap:6px;opacity:{{ m.o }};transition:opacity .5s ease\"><span class=\"t-kartentitel\" style=\"color:var(--textPrimary)\">{{ m.zeit }}</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">{{ m.geraet }}</span><div style=\"height:12px\"></div><span class=\"t-klein\" style=\"color:{{ m.textFarbe }};transition:color .4s ease;white-space:{{ umbruch }};min-height:20px;text-wrap:pretty\">{{ m.lektion }}</span><div style=\"height:4px;border-radius:2px;background:var(--glassLight);overflow:hidden\"><div style=\"height:100%;border-radius:2px;background:{{ m.farbe }};width:{{ m.breite }};transition:width .6s cubic-bezier(.4,0,.2,1), background .4s ease\"></div></div></div></sc-for>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:120},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:400,&quot;max&quot;:2000,&quot;step&quot;:50,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { sichtbar: 0, schritt: [3, 5, 7], op: 0 };\n  timer = [];\n  orte = [['7:40 on the bus', 'Phone'], ['13:10 at school', 'Tablet'], ['19:00 at your desk', 'Browser']];\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  nach(ms, fn) { this.timer.push(setTimeout(fn, ms)); }\n  lauf() {\n    this.setState({ sichtbar: 0, schritt: [3, 5, 7], op: 0 });\n    const t = this.props.tempo ?? 1000, setS = (i, v) => this.setState(st => { const s = st.schritt.slice(); s[i] = v; return { schritt: s }; });\n    let z = 500;\n    this.nach(z, () => this.setState({ op: 1, sichtbar: 1 })); z += 1400;\n    [[0, 4], [0, 5]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    z += 400; this.nach(z, () => this.setState({ sichtbar: 2 })); z += 1400;\n    [[1, 6], [1, 7]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    z += 400; this.nach(z, () => this.setState({ sichtbar: 3 })); z += 1400;\n    [[2, 8], [2, 9]].forEach(([i, v]) => { this.nach(z, () => setS(i, v)); z += t; });\n    this.nach(z + 2600, () => this.setState({ op: 0 }));\n    this.nach(z + 3200, () => this.lauf());\n  }\n  renderVals() {\n    const { sichtbar, schritt, op } = this.state;\n    const momente = this.orte.map(([zeit, geraet], i) => { const n = schritt[i], fertig = n >= 9; return { luecke: this.props.schmal ? '16px' : '32px', umbruch: this.props.schmal ? 'normal' : 'nowrap', zeit, geraet, o: i < sichtbar ? 1 : 0, lektion: fertig ? 'Equations · done' : `Equations · ${n} of 9`, breite: (n / 9 * 100).toFixed(1) + '%', farbe: fertig ? 'var(--success)' : 'var(--accent)', textFarbe: fertig ? 'var(--successText)' : 'var(--textSecondary)' }; });\n    return { theme: this.props.theme ?? 'light', op, momente };\n  }\n}\n</script>\n</body>\n</html>\n","Lernweg":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script src=\"./support.js\"></script>\n</head>\n<body>\n<x-dc>\n<helmet><script src=\"/entwurf/ds-base.js\"></script></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:flex;flex-direction:column;gap:32px;opacity:{{ opazitaet }};transition:opacity .4s ease\">\n<div style=\"display:flex;flex-direction:column;gap:8px\">\n<span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">{{ zielText }}</span>\n<div style=\"display:flex;flex-direction:column;gap:12px\">\n<div style=\"height:56px;display:flex;align-items:center\"><div ref=\"{{ r1 }}\" style=\"font-size:26px;line-height:1;text-align:left\"></div></div>\n<div style=\"position:relative;height:56px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;opacity:{{ oHinweis }};transition:opacity .3s ease\"><span class=\"t-abschnitt\" style=\"font-weight:600;color:var(--textPrimary)\">I don’t remember this any more:</span><span class=\"t-abschnitt\" style=\"color:var(--textPrimary)\">{{ hinweisWas }}</span></div><div style=\"position:absolute;inset:0;display:flex;align-items:center;opacity:{{ o2 }};transition:opacity .4s ease .35s\"><div ref=\"{{ r2 }}\" style=\"font-size:26px;line-height:1;text-align:left\"></div></div></div>\n<div ref=\"{{ r3 }}\" style=\"font-size:26px;line-height:1;height:56px;display:flex;align-items:center;text-align:left;color:var(--accentText);opacity:{{ o3 }};transition:opacity .35s ease\"></div>\n</div>\n</div>\n<div style=\"display:flex;flex-direction:column;gap:12px\">\n<div style=\"position:relative;height:112px;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:baseline;column-gap:14px;row-gap:8px\">\n<sc-for list=\"{{ knoten }}\" as=\"k\" hint-placeholder-count=\"4\"><div ref=\"{{ k.ref }}\" style=\"display:flex;align-items:baseline;gap:14px;opacity:{{ k.o }};transform:{{ k.tf }};transition:{{ k.tr }}\"><span style=\"display:flex;align-items:baseline;gap:6px;white-space:nowrap\"><span class=\"t-klein-betont\" style=\"font-weight:600;color:{{ k.farbe }};transition:color .3s ease\">{{ k.name }}</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">{{ k.kl }}</span></span><span style=\"font-size:15px;line-height:20px;color:var(--textTertiary);opacity:{{ k.linie }}\">→</span></div></sc-for>\n</div>\n<span style=\"font-size:12px;line-height:16px;color:var(--textTertiary);height:16px\">{{ status }}</span>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:624,&quot;height&quot;:392},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light' | 'dark'&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:400,&quot;max&quot;:2000,&quot;step&quot;:50,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { sz: 0, p: 0, opazitaet: 0 };\n  timer = []; refs = {};\n  szenen = [\n    { ziel: 'Quadratic equations', kl: 9, z1: 'x^2 + 6x + 9 = 0', l: '(x + 3)^2 = 0', z3: 'x = -3', fehlt: 2,\n      kette: [['Terms and variables', 7], ['Equations', 7], ['Binomial formulas', 8], ['Quadratic equations', 9]] },\n    { ziel: 'Trigonometry', kl: 9, z1: 'a = 3,\\\\; b = 4, \\\\quad \\\\sin\\\\alpha = \\\\frac{a}{c}', l: 'c = \\\\sqrt{3^2 + 4^2} = 5', z3: '\\\\sin\\\\alpha = \\\\frac{3}{5}', fehlt: 2,\n      kette: [['Angles and symmetry', 7], ['Congruence and triangles', 7], ['Pythagorean theorem', 8], ['Trigonometry', 9]] },\n    { ziel: 'Differentialrechnung', kl: 10, z1: \"f'(x) = 3x^2 - 3 = 0\", l: 'x^2 = 1', z3: 'x = -1 \\\\;\\\\text{or}\\\\; x = 1', fehlt: 1,\n      kette: [['Equations', 7], ['Quadratic equations', 9], ['Differentialrechnung', 10]] },\n    { ziel: 'Probability and combinatorics', kl: 9, z1: 'P(\\\\text{zwei Sechsen}) = \\\\frac{1}{6} \\\\cdot \\\\frac{1}{6}', l: '= \\\\frac{1 \\\\cdot 1}{6 \\\\cdot 6}', z3: '= \\\\frac{1}{36}', fehlt: 0,\n      kette: [['Rational numbers', 7], ['Data and chance', 7], ['Probability in depth', 8], ['Probability and combinatorics', 9]] },\n    { ziel: 'Exponentielles Wachstum', kl: 9, z1: 'K_2 = 500 \\\\cdot 1.03^2', l: '1.03^2 = 1.0609', z3: 'K_2 = 530.45', fehlt: 1,\n      kette: [['Percentages and interest', 7], ['Powers', 8], ['Exponentielles Wachstum', 9]] },\n    { ziel: 'Circle geometry', kl: 10, z1: 'b = \\\\frac{90^\\\\circ}{360^\\\\circ} \\\\cdot U, \\\\quad r = 4', l: 'U = 2\\\\pi \\\\cdot 4 \\\\approx 25.13', z3: 'b \\\\approx 6.28', fehlt: 1,\n      kette: [['Angles and symmetry', 7], ['Areas, circles and solids', 8], ['Circle geometry', 10]] }\n  ];\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  componentDidUpdate() { this.setzen(); this.messen(); }\n  messen() {\n    const els = this.knotenEls || [], n = this.szenen[this.state.sz].kette.length;\n    if (els.filter(Boolean).length < n) return;\n    const pos = els.slice(0, n).map(el => [el.offsetLeft, el.offsetTop]);\n    const alt = this.pos && this.pos.sz === this.state.sz ? this.pos.v : null;\n    if (alt && alt.every((q, i) => q[0] === pos[i][0] && q[1] === pos[i][1])) return;\n    this.pos = { sz: this.state.sz, v: pos }; this.forceUpdate();\n  }\n  nach(ms, fn) { this.timer.push(setTimeout(fn, ms)); }\n  tex(el, tex) {\n    const mj = window.MathJax; if (!el || el.dataset.tex === tex) return;\n    el.dataset.tex = tex; el.innerHTML = ''; const m = mj.tex2svg(tex, { display: false }); m.style.cssText = 'display:inline-block;text-align:left;margin:0'; el.appendChild(m);\n  }\n  setzen() {\n    const mj = window.MathJax;\n    if (!mj || !mj.tex2svg) { if (!this._w) { this._w = true; this.nach(300, () => { this._w = false; this.setzen(); }); } return; }\n    const s = this.szenen[this.state.sz];\n    this.tex(this.refs.r1, s.z1); this.tex(this.refs.r2, s.l); this.tex(this.refs.r3, s.z3);\n  }\n  lauf() {\n    const s = this.szenen[this.state.sz], n = s.kette.length, t = this.props.tempo ?? 900;\n    this.setState({ p: 0 }); this.nach(900, () => this.setState({ opazitaet: 1 }));\n    let z = 1800; const schritte = 2 + 2 * n;\n    for (let p = 1; p <= schritte; p++) { const pp = p; this.nach(z, () => this.setState({ p: pp })); z += p === 1 || p === 1 + n ? 1100 : p === 2 + n ? 1900 : p === 3 + n + s.fehlt ? t + 900 : t; }\n    this.nach(z + 2200, () => this.setState({ opazitaet: 0 }));\n    this.nach(z + 2650, () => { this.setState({ sz: (this.state.sz + 1) % this.szenen.length }, () => this.lauf()); });\n  }\n  renderVals() {\n    const s = this.szenen[this.state.sz], n = s.kette.length, p = this.state.p;\n    const fuellStart = 3 + n, vertikal = p < 2 + n;\n    const gelernt = i => p >= fuellStart + i;\n    const sichtbar = i => p >= 2 + (n - 1 - i);\n    const lueckeZu = gelernt(s.fehlt);\n    const pos = this.pos && this.pos.sz === this.state.sz ? this.pos.v : [];\n    this.knotenEls = this.knotenEls || [];\n    const knoten = s.kette.map(([name, kl], i) => { const [l, t] = pos[i] || [0, 0]; return { name, kl, o: sichtbar(i) ? 1 : 0, linie: vertikal || i === n - 1 ? 0 : 1, tf: vertikal ? `translate(${-l}px, ${(n - 1 - i) * 28 - t}px)` : 'none', tr: vertikal ? 'opacity .35s ease' : `opacity .35s ease, transform 1.2s cubic-bezier(.65,0,.35,1) ${i * 90}ms`, ref: el => { this.knotenEls[i] = el; }, farbe: gelernt(i) ? (i === n - 1 ? 'var(--accentText)' : 'var(--textPrimary)') : 'var(--textTertiary)' }; });\n    const status = p < 2 ? '' : p < 2 + n ? 'The learning path looks back for what you need first.' : p < fuellStart ? 'In the right order.' : p < fuellStart + n ? 'Then it moves forward step by step.' : 'Back at your topic.';\n    const hinweisWas = s.kette[s.fehlt][0];\n    return { theme: this.props.theme ?? 'light', opazitaet: this.state.opazitaet, zielText: `Your topic: ${s.ziel} · grade ${s.kl}`,\n      r1: el => { this.refs.r1 = el; }, r2: el => { this.refs.r2 = el; }, r3: el => { this.refs.r3 = el; },\n      o2: lueckeZu ? 1 : 0, oHinweis: p >= 1 && !lueckeZu ? 1 : 0, hinweisWas, o3: p >= fuellStart + n - 1 ? 1 : 0, knoten, status };\n  }\n}\n</script>\n</body>\n</html>\n"}