{"StartWeb1920":"<!DOCTYPE html>\n<html>\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\" lang=\"de\" style=\"position:relative;width:1920px;background:var(--background);overflow:hidden\"><div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;right:0;height:900px\"></div><div class=\"bayati-muster\"></div><div style=\"position:relative;display:flex;justify-content:center\"><dc-import name=\"StartWeb1280Neu\" theme=\"{{ theme }}\" vollbreit=\"{{ true }}\" hint-size=\"1280px,4000px\"></dc-import></div></div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&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() { return { theme: this.props.theme ?? 'light' }; }\n}\n</script>\n</body>\n</html>\n","StartWeb1280Neu":"<!DOCTYPE html>\n<html>\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><style>@keyframes hz0{0%,100%{opacity:1}}@keyframes hn0{0%{opacity:0;transform:translateY(6px)}0.682%,1.818%{opacity:1;transform:none}2.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz1{0%,2.500%{opacity:0}3.182%,100%{opacity:1}}@keyframes hn1{0%,2.500%{opacity:0;transform:translateY(6px)}3.182%,4.318%{opacity:1;transform:none}5.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz2{0%,5.000%{opacity:0}5.682%,100%{opacity:1}}@keyframes hn2{0%,5.000%{opacity:0;transform:translateY(6px)}5.682%,6.818%{opacity:1;transform:none}7.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz3{0%,7.500%{opacity:0}8.182%,100%{opacity:1}}@keyframes hn3{0%,7.500%{opacity:0;transform:translateY(6px)}8.182%,9.318%{opacity:1;transform:none}10.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz4{0%,10.000%{opacity:0}10.682%,100%{opacity:1}}@keyframes hn4{0%,10.000%{opacity:0;transform:translateY(6px)}10.682%,11.818%{opacity:1;transform:none}12.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz5{0%,12.500%{opacity:0}13.182%,100%{opacity:1}}@keyframes hn5{0%,12.500%{opacity:0;transform:translateY(6px)}13.182%,14.318%{opacity:1;transform:none}15.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz6{0%,15.000%{opacity:0}15.682%,100%{opacity:1}}@keyframes hn6{0%,15.000%{opacity:0;transform:translateY(6px)}15.682%,16.818%{opacity:1;transform:none}17.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz7{0%,17.500%{opacity:0}18.182%,100%{opacity:1}}@keyframes hn7{0%,17.500%{opacity:0;transform:translateY(6px)}18.182%,19.318%{opacity:1;transform:none}20.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz8{0%,20.000%{opacity:0}20.682%,100%{opacity:1}}@keyframes hn8{0%,20.000%{opacity:0;transform:translateY(6px)}20.682%,21.818%{opacity:1;transform:none}22.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz9{0%,22.500%{opacity:0}23.182%,100%{opacity:1}}@keyframes hn9{0%,22.500%{opacity:0;transform:translateY(6px)}23.182%,24.318%{opacity:1;transform:none}25.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz10{0%,25.000%{opacity:0}25.682%,100%{opacity:1}}@keyframes hn10{0%,25.000%{opacity:0;transform:translateY(6px)}25.682%,26.818%{opacity:1;transform:none}27.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz11{0%,27.500%{opacity:0}28.182%,100%{opacity:1}}@keyframes hn11{0%,27.500%{opacity:0;transform:translateY(6px)}28.182%,29.318%{opacity:1;transform:none}30.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz12{0%,30.000%{opacity:0}30.682%,100%{opacity:1}}@keyframes hn12{0%,30.000%{opacity:0;transform:translateY(6px)}30.682%,31.818%{opacity:1;transform:none}32.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz13{0%,32.500%{opacity:0}33.182%,100%{opacity:1}}@keyframes hn13{0%,32.500%{opacity:0;transform:translateY(6px)}33.182%,34.318%{opacity:1;transform:none}35.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz14{0%,35.000%{opacity:0}35.682%,100%{opacity:1}}@keyframes hn14{0%,35.000%{opacity:0;transform:translateY(6px)}35.682%,36.818%{opacity:1;transform:none}37.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz15{0%,37.500%{opacity:0}38.182%,100%{opacity:1}}@keyframes hn15{0%,37.500%{opacity:0;transform:translateY(6px)}38.182%,39.318%{opacity:1;transform:none}40.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz16{0%,40.000%{opacity:0}40.682%,100%{opacity:1}}@keyframes hn16{0%,40.000%{opacity:0;transform:translateY(6px)}40.682%,41.818%{opacity:1;transform:none}42.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz17{0%,42.500%{opacity:0}43.182%,100%{opacity:1}}@keyframes hn17{0%,42.500%{opacity:0;transform:translateY(6px)}43.182%,44.318%{opacity:1;transform:none}45.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz18{0%,45.000%{opacity:0}45.682%,100%{opacity:1}}@keyframes hn18{0%,45.000%{opacity:0;transform:translateY(6px)}45.682%,46.818%{opacity:1;transform:none}47.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz19{0%,47.500%{opacity:0}48.182%,100%{opacity:1}}@keyframes hn19{0%,47.500%{opacity:0;transform:translateY(6px)}48.182%,49.318%{opacity:1;transform:none}50.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz20{0%,50.000%{opacity:0}50.682%,100%{opacity:1}}@keyframes hn20{0%,50.000%{opacity:0;transform:translateY(6px)}50.682%,51.818%{opacity:1;transform:none}52.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz21{0%,52.500%{opacity:0}53.182%,100%{opacity:1}}@keyframes hn21{0%,52.500%{opacity:0;transform:translateY(6px)}53.182%,54.318%{opacity:1;transform:none}55.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz22{0%,55.000%{opacity:0}55.682%,100%{opacity:1}}@keyframes hn22{0%,55.000%{opacity:0;transform:translateY(6px)}55.682%,56.818%{opacity:1;transform:none}57.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz23{0%,57.500%{opacity:0}58.182%,100%{opacity:1}}@keyframes hn23{0%,57.500%{opacity:0;transform:translateY(6px)}58.182%,59.318%{opacity:1;transform:none}60.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz24{0%,60.000%{opacity:0}60.682%,100%{opacity:1}}@keyframes hn24{0%,60.000%{opacity:0;transform:translateY(6px)}60.682%,61.818%{opacity:1;transform:none}62.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz25{0%,62.500%{opacity:0}63.182%,100%{opacity:1}}@keyframes hn25{0%,62.500%{opacity:0;transform:translateY(6px)}63.182%,64.318%{opacity:1;transform:none}65.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz26{0%,65.000%{opacity:0}65.682%,100%{opacity:1}}@keyframes hn26{0%,65.000%{opacity:0;transform:translateY(6px)}65.682%,66.818%{opacity:1;transform:none}67.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz27{0%,67.500%{opacity:0}68.182%,100%{opacity:1}}@keyframes hn27{0%,67.500%{opacity:0;transform:translateY(6px)}68.182%,69.318%{opacity:1;transform:none}70.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz28{0%,70.000%{opacity:0}70.682%,100%{opacity:1}}@keyframes hn28{0%,70.000%{opacity:0;transform:translateY(6px)}70.682%,71.818%{opacity:1;transform:none}72.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz29{0%,72.500%{opacity:0}73.182%,100%{opacity:1}}@keyframes hn29{0%,72.500%{opacity:0;transform:translateY(6px)}73.182%,74.318%{opacity:1;transform:none}75.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz30{0%,75.000%{opacity:0}75.682%,100%{opacity:1}}@keyframes hn30{0%,75.000%{opacity:0;transform:translateY(6px)}75.682%,76.818%{opacity:1;transform:none}77.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz31{0%,77.500%{opacity:0}78.182%,100%{opacity:1}}@keyframes hn31{0%,77.500%{opacity:0;transform:translateY(6px)}78.182%,79.318%{opacity:1;transform:none}80.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz32{0%,80.000%{opacity:0}80.682%,100%{opacity:1}}@keyframes hn32{0%,80.000%{opacity:0;transform:translateY(6px)}80.682%,81.818%{opacity:1;transform:none}82.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz33{0%,82.500%{opacity:0}83.182%,100%{opacity:1}}@keyframes hn33{0%,82.500%{opacity:0;transform:translateY(6px)}83.182%,84.318%{opacity:1;transform:none}85.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz34{0%,85.000%{opacity:0}85.682%,100%{opacity:1}}@keyframes hn34{0%,85.000%{opacity:0;transform:translateY(6px)}85.682%,86.818%{opacity:1;transform:none}87.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz35{0%,87.500%{opacity:0}88.182%,100%{opacity:1}}@keyframes hn35{0%,87.500%{opacity:0;transform:translateY(6px)}88.182%,89.318%{opacity:1;transform:none}90.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz36{0%,90.000%{opacity:0}90.682%,100%{opacity:1}}@keyframes hn36{0%,90.000%{opacity:0;transform:translateY(6px)}90.682%,91.818%{opacity:1;transform:none}92.500%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hz37{0%,92.500%{opacity:0}93.182%,100%{opacity:1}}@keyframes hn37{0%,92.500%{opacity:0;transform:translateY(6px)}93.182%,94.318%{opacity:1;transform:none}95.000%,100%{opacity:0;transform:translateY(-6px)}}@keyframes hnEnde{0%,95.000%{opacity:0;transform:translateY(6px)}95.682%,99.318%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}@keyframes heftFuellen{0%{visibility:hidden}6%,60%{visibility:visible}66%,100%{visibility:hidden}}</style></helmet>\n<div data-theme=\"{{ theme }}\" data-stil=\"bayati\" data-welt=\"violett\" lang=\"de\" style=\"position:relative;width:1280px;background:{{ hintergrund }};color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"position:absolute;inset:0;overflow:hidden\"><div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;right:0;height:900px\"></div><div class=\"bayati-muster\"></div></div></sc-if>\n<div style=\"position:relative\">\n<header style=\"position:sticky;top:0;z-index:5;height:72px;box-sizing:border-box;margin:0 {{ kopfRand }};padding:0 {{ kopfInnen }};display:flex;align-items:center;gap:40px;background:var(--background);border-bottom:1px solid var(--divider)\"><a href=\"#\" class=\"t-titel\" style=\"text-decoration:none;color:var(--textPrimary);letter-spacing:-0.01em\">Bayati</a><nav style=\"display:flex;gap:28px\"><a href=\"#themen\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">Themen</a><a href=\"#\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">Formeln</a><a href=\"#eltern\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;text-decoration:none;color:var(--textPrimary)\">Für Eltern</a></nav><div style=\"flex:1\"></div><div role=\"radiogroup\" aria-label=\"Sprache / Language\" style=\"display:flex;gap:2px\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Deutsch\" class=\"t-klein-betont bayati-akzent\" style=\"height:32px;min-width:38px;box-sizing:border-box;padding:0 8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textPrimary)\">DE</span><span role=\"radio\" aria-checked=\"false\" aria-label=\"English\" class=\"t-klein-betont\" style=\"height:32px;min-width:38px;box-sizing:border-box;padding:0 8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textSecondary)\">EN</span></div><div role=\"radiogroup\" aria-label=\"Hell / Dunkel\" style=\"display:flex;gap:2px\"><sc-if value=\"{{ hell }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" aria-label=\"Hell\" class=\"bayati-akzent\" style=\"width:36px;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--textPrimary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"></path></svg></span><span role=\"radio\" aria-checked=\"false\" aria-label=\"Dunkel\" style=\"width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></sc-if><sc-if value=\"{{ dunkel }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" aria-label=\"Hell\" style=\"width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--textSecondary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"></path></svg></span><span role=\"radio\" aria-checked=\"true\" aria-label=\"Dunkel\" class=\"bayati-akzent\" style=\"width:36px;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--textPrimary)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg></span></sc-if></div><a href=\"#\" class=\"t-klein-betont\" style=\"height:48px;display:flex;align-items:center;font-weight:600;text-decoration:none;color:var(--accentText)\">Anmelden</a><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:44px;box-sizing:border-box;padding:0 20px;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;color:var(--textPrimary);font-weight:600\">Kostenlos starten</a></header>\n\n<div style=\"box-sizing:border-box;width:1120px;margin:0 auto;display:flex;flex-direction:column\">\n\n<section data-screen-label=\"Einstieg\" style=\"padding-top:104px;display:flex;flex-direction:column;gap:56px\"><h1 class=\"t-anzeige\" style=\"margin:0;font-size:120px;line-height:0.92;letter-spacing:-0.035em;text-wrap:balance\">Mathe, die<br>hängen bleibt.</h1><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:96px;align-items:start\"><div style=\"height:734px;box-sizing:border-box;padding:12px 0 24px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0\">\n<dc-import name=\"Tafel\" theme=\"{{ theme }}\" tempo=\"{{ tempo }}\" hint-size=\"100%,420px\"></dc-import>\n<div style=\"display:flex;flex-direction:column;gap:40px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:520px;font-size:22px;line-height:34px;color:var(--textSecondary);text-wrap:pretty\">Kurze Lektionen, Aufgaben, die sich jedes Mal neu würfeln, und ein Lernweg, der dir zeigt, was du vorher brauchst. Klasse 7 bis 10.</p><div style=\"display:flex;align-items:center;gap:24px\"><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:60px;box-sizing:border-box;padding:0 40px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:18px;font-weight:600;color:var(--textPrimary)\">Kostenlos starten</a><span class=\"t-klein\" style=\"color:var(--textSecondary);max-width:200px;text-wrap:pretty\">Ohne Anmeldung. Konto später, wenn du willst.</span></div></div></div><div style=\"width:348px;height:734px;flex:none;box-sizing:border-box;padding:8px;border-radius:46px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:332px;height:718px;overflow:hidden;border-radius:38px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.851\"><dc-import name=\"LernenStart\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></div></div></div></div></section>\n\n<section data-screen-label=\"Was ist Bayati\" style=\"position:relative;margin:160px {{ wasRand }} 0;padding:48px {{ wasInnen }} 64px;box-sizing:border-box;width:{{ wasBreite }}\"><div style=\"position:relative;display:flex;flex-direction:column\"><h2 class=\"t-anzeige\" style=\"margin:0 0 48px;font-size:60px;line-height:1;letter-spacing:-0.03em\">Was ist Bayati?</h2><div style=\"position:relative;display:grid;grid-template-columns:{{ wasSpalten }};grid-auto-rows:{{ wasZeilen }};column-gap:120px\"><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div aria-hidden=\"true\" style=\"position:absolute;left:50%;top:48px;bottom:48px;width:1px;background:var(--divider)\"></div><div aria-hidden=\"true\" style=\"position:absolute;top:50%;left:0;right:0;height:1px;background:var(--divider)\"></div></sc-if><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Für wen ist Bayati?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">Für die ganze <strong style=\"font-weight:600;color:var(--textPrimary)\">Mittelstufe</strong>. <strong style=\"font-weight:600;color:var(--textPrimary)\">38 Kapitel</strong> mit <strong style=\"font-weight:600;color:var(--textPrimary)\">353 Unterkapiteln</strong>, der Reihe nach von den rationalen Zahlen bis zu den Vektoren, jedes baut auf dem davor auf. Dazu rund <strong style=\"font-weight:600;color:var(--textPrimary)\">14.000 Aufgabenstellungen</strong>. Jede würfelt beim Üben neue Zahlen, so entstehen daraus <strong style=\"font-weight:600;color:var(--textPrimary)\">Milliarden einzigartige Aufgaben</strong>.</p><div style=\"display:flex;flex-direction:column;gap:16px\"><div style=\"position:relative;height:48px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn0 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Rationale Zahlen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 1 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn1 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Terme und Variablen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 2 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn2 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Gleichungen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 3 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn3 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Zuordnungen und Proportionalität</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 4 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn4 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Prozent- und Zinsrechnung</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 5 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn5 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Winkel und Symmetrie</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 6 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn6 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Kongruenz und Dreiecke</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 7 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn7 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Daten und Zufall</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7 · Kapitel 8 von 8</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn8 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Terme und binomische Formeln</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 1 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn9 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Gleichungen vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 2 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn10 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Lineare Funktionen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 3 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn11 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Lineare Gleichungssysteme</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 4 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn12 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Potenzen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 5 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn13 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wurzeln</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 6 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn14 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Flächen, Kreis und Körper</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 7 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn15 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Satz des Pythagoras</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 8 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn16 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Ähnlichkeit und zentrische Streckung</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 9 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn17 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wahrscheinlichkeit vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 10 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn18 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Prozent- und Zinsrechnung vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8 · Kapitel 11 von 11</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn19 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Reelle Zahlen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 1 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn20 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Potenzen und Wurzeln vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 2 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn21 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Quadratische Funktionen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 3 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn22 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Quadratische Gleichungen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 4 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn23 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Potenz- und Wurzelfunktionen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 5 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn24 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Trigonometrie</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 6 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn25 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Ähnlichkeit vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 7 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn26 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Raumgeometrie vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 8 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn27 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Exponentielles Wachstum</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 9 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn28 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wahrscheinlichkeit und Kombinatorik</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9 · Kapitel 10 von 10</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn29 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Exponentialfunktionen und Logarithmen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 1 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn30 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Ganzrationale Funktionen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 2 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn31 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Trigonometrische Funktionen</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 3 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn32 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Kreisgeometrie</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 4 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn33 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Differentialrechnung</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 5 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn34 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Kurvenuntersuchung</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 6 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn35 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Wachstumsmodelle</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 7 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn36 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Stochastik vertieft</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 8 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hn37 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary);white-space:nowrap\">Vektoren</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10 · Kapitel 9 von 9</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;animation:hnEnde 44s linear infinite\"><span style=\"font-size:19px;line-height:32px;color:var(--textPrimary)\">38 Kapitel, 353 Unterkapitel</span><span style=\"font-size:12px;line-height:16px;color:var(--textTertiary)\">Mittelstufe, Klasse 7 bis 10</span></div></div><div style=\"display:flex;flex-direction:column\"><div style=\"display:flex\"><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz0 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz1 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz2 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz3 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz4 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz5 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz6 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz7 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz8 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz9 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz10 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz11 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz12 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz13 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz14 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz15 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz16 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz17 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz18 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz19 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz20 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz21 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz22 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz23 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz24 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz25 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz26 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz27 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz28 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz29 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz30 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz31 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz32 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz33 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz34 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz35 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz36 44s linear infinite\"></div></div><div style=\"width:16px;height:16px;flex:none;box-sizing:border-box\"><div style=\"width:100%;height:100%;background:var(--accent);box-shadow:inset 0 0 0 1px var(--background);animation:hz37 44s linear infinite\"></div></div></div><div style=\"display:flex\"><span style=\"width:128px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 7</span><span style=\"width:176px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 8</span><span style=\"width:160px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 9</span><span style=\"width:144px;flex:none;font-size:12px;line-height:16px;color:var(--textTertiary)\">Klasse 10</span></div></div></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Was, wenn ich etwas nicht mehr kann?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">Der <strong style=\"font-weight:600;color:var(--textPrimary)\">Lernweg</strong> zeigt dir, <strong style=\"font-weight:600;color:var(--textPrimary)\">was du vorher brauchst</strong>. Fehlt etwas, führt er dich erst dorthin und dann <strong style=\"font-weight:600;color:var(--textPrimary)\">zurück zu deinem Thema</strong>.</p><div style=\"height:392px\"><dc-import name=\"Lernweg\" theme=\"{{ theme }}\" hint-size=\"100%,392px\"></dc-import></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Wo läuft Bayati?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">Auf dem <strong style=\"font-weight:600;color:var(--textPrimary)\">Handy</strong>, dem <strong style=\"font-weight:600;color:var(--textPrimary)\">Tablet</strong> und im <strong style=\"font-weight:600;color:var(--textPrimary)\">Browser</strong>. Mit einem Konto machst du auf jedem Gerät <strong style=\"font-weight:600;color:var(--textPrimary)\">weiter, wo du aufgehört hast</strong>.</p><div style=\"height:104px\"><dc-import name=\"Geraete\" theme=\"{{ theme }}\" hint-size=\"100%,104px\"></dc-import></div></div></div><div style=\"display:grid;grid-template-columns:{{ zeileSpalten }};gap:{{ zeileGap }};align-items:start;padding:48px 0;min-width:0\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:28px;line-height:32px;letter-spacing:-0.02em;text-wrap:balance\">Was kostet Bayati?</h2><div style=\"display:flex;flex-direction:column;gap:32px\"><p class=\"t-fliesstext\" style=\"margin:0;max-width:592px;font-size:19px;line-height:32px;color:var(--textSecondary);text-wrap:pretty\">Als Gast <strong style=\"font-weight:600;color:var(--textPrimary)\">kostenlos</strong>, mit Grenzen. Mit Konto ebenfalls kostenlos, mit etwas weiteren Grenzen. <strong style=\"font-weight:600;color:var(--textPrimary)\">Premium</strong> kostet <strong style=\"font-weight:600;color:var(--textPrimary)\">44,99 € im Jahr</strong>, das sind <strong style=\"font-weight:600;color:var(--textPrimary)\">3,75 € im Monat</strong>.</p><div style=\"height:176px\"><dc-import name=\"Preise\" theme=\"{{ theme }}\" hint-size=\"100%,176px\"></dc-import></div></div></div></div></section>\n\n<section data-screen-label=\"Probieren\" style=\"margin:200px {{ probRand }} 0;display:flex;flex-direction:column;gap:72px\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Eine echte Aufgabe</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Probier’s direkt.</h2></div><p class=\"t-fliesstext\" style=\"margin:0 0 6px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">So fühlt sich Bayati an. Antwort tippen, prüfen, hinschauen. Kein Konto nötig.</p></div><dc-import name=\"ProbierAufgabe\" theme=\"{{ theme }}\" nebeneinander=\"{{ true }}\" liste=\"{{ vollbreit }}\" hint-size=\"100%,720px\"></dc-import></section>\n\n<section ref=\"{{ bereichRef }}\" data-screen-label=\"Bereiche\" style=\"margin:200px {{ brRand }} 0;padding:0 {{ brPadX }};box-sizing:border-box;display:grid;grid-template-columns:{{ brSpalte }} minmax(0,1fr);gap:{{ brGap }};align-items:center;overflow:hidden\"><div style=\"position:relative;width:{{ brSpalte }};height:674px\"><div aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;z-index:1;width:606px;height:426px;box-sizing:border-box;padding:8px;border-radius:28px;background:#000;border:1px solid light-dark(#000,var(--glassBorder));pointer-events:none;transform-origin:0 0;opacity:{{ brTabOp }};transform:{{ brTabT }}\"><div style=\"width:590px;height:410px;overflow:hidden;border-radius:20px\"><div style=\"width:1180px;height:820px;overflow:hidden;transform:scale(0.5);transform-origin:0 0\"><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><dc-import name=\"TabletTheorieQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TTestErgebnisQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TDuellFrageQuer\" theme=\"{{ theme }}\" hint-size=\"1180px,820px\"></dc-import></sc-if></div></div></div><div style=\"position:absolute;right:0;top:0;z-index:2;transform:scale({{ brHandyS }});transform-origin:100% 100%;width:320px;height:674px;flex:none;box-sizing:border-box;padding:8px;border-radius:45px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:304px;height:658px;overflow:hidden;border-radius:37px\"><div style=\"width:390px;height:844px;overflow:hidden;transform:scale(0.78);transform-origin:0 0\"><sc-if value=\"{{ ba_0 }}\" hint-placeholder-val=\"{{ true }}\"><dc-import name=\"TheorieSchritt\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"390px,844px\"></dc-import></sc-if><sc-if value=\"{{ ba_1 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"TestErgebnis\" theme=\"{{ theme }}\" hint-size=\"390px,844px\"></dc-import></sc-if><sc-if value=\"{{ ba_2 }}\" hint-placeholder-val=\"{{ false }}\"><dc-import name=\"DuellFrage\" theme=\"{{ theme }}\" hint-size=\"390px,844px\"></dc-import></sc-if></div></div></div></div><div style=\"justify-self:end;width:100%;max-width:680px;display:flex;flex-direction:column;gap:40px;min-width:0\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Drei Bereiche</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Verstehen, üben, gegeneinander antreten.</h2></div><div role=\"tablist\" aria-label=\"Bereiche\" style=\"display:flex;flex-direction:column\"><sc-for list=\"{{ bereiche }}\" as=\"b\" hint-placeholder-count=\"3\"><sc-if value=\"{{ b.an }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"tab\" aria-selected=\"true\" class=\"bayati-akzent\" style=\"box-sizing:border-box;padding:24px 28px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline\"><span class=\"t-anzeige\" style=\"font-size:36px;line-height:40px;color:var(--accentText)\">{{ b.nr }}</span><span style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px\">{{ b.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ b.text }}</span></span></div></sc-if><sc-if value=\"{{ b.aus }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"tab\" aria-selected=\"false\" onClick=\"{{ b.klick }}\" style=\"box-sizing:border-box;padding:24px 28px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline;cursor:pointer;border-bottom:1px solid var(--divider)\"><span class=\"t-anzeige\" style=\"font-size:36px;line-height:40px;color:var(--textTertiary)\">{{ b.nr }}</span><span style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px\">{{ b.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ b.text }}</span></span></div></sc-if></sc-for></div></div></section>\n\n<section data-screen-label=\"Lernweg\" style=\"margin-top:200px;display:flex;flex-direction:column;gap:72px\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Lernweg</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Du willst quadratische Gleichungen können? Bayati zeigt dir den Weg dahin.</h2></div><p class=\"t-fliesstext\" style=\"margin:0 0 6px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">Bayati kennt für jedes Thema die Themen davor. Du lernst nur, was dir wirklich fehlt, und siehst immer, wo du gerade stehst.</p></div><div role=\"list\" aria-label=\"Lernweg\" style=\"margin:0 {{ lwRand }};display:grid;grid-template-columns:{{ lwSpalten }};column-gap:16px;align-items:start\"><div aria-hidden=\"true\" style=\"height:72px;display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:linear-gradient(90deg,transparent,var(--accent))\"></span></div><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--accent)\"></span><span style=\"width:72px;height:72px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--success);color:var(--success);display:flex;align-items:center;justify-content:center\"><svg width=\"34\" height=\"34\" 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 style=\"flex:1;height:5px;background:var(--accent)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance;color:var(--textSecondary)\">Terme und Variablen</span><span class=\"t-klein\" style=\"color:var(--successText)\">Klasse 7 · geschafft</span></div></div></sc-if><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:{{ lwLinie }}\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"34\" height=\"34\" 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 style=\"flex:1;height:5px;background:var(--accent)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Binomische Formeln</span><span class=\"t-klein\" style=\"color:var(--successText)\">Klasse 8 · geschafft</span></div></div><div role=\"listitem\" aria-current=\"step\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--accent)\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center\"><span style=\"width:24px;height:24px;border-radius:var(--radius-full);background:var(--background)\"></span></span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div class=\"bayati-akzent\" style=\"box-sizing:border-box;padding:16px 12px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Gleichungen umformen</span><span class=\"t-klein\" style=\"color:var(--accentText)\">jetzt · ca. 5 Min.</span></div></div><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span class=\"t-anzeige\" style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);display:flex;align-items:center;justify-content:center;font-size:28px\">3</span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Quadratwurzeln</span><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Klasse 9</span></div></div><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span style=\"width:72px;height:72px;flex:none;box-sizing:border-box;border-radius:var(--radius-full);border:2px solid var(--accentBorder);color:var(--accent);display:flex;align-items:center;justify-content:center\"><svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.3 2 1.7 0 2.7-.4 3.7-1v10.2c-1 .6-2 1-3.7 1-2.3 0-4.3-2-7.3-2a6 6 0 0 0-4 1.3\"></path></svg></span><span style=\"flex:1;height:5px;background:{{ lwLinieR }}\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance\">Quadratische Gleichungen</span><span class=\"t-klein\" style=\"color:var(--accentText)\">Dein Ziel</span></div></div><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"listitem\" style=\"display:flex;flex-direction:column;gap:20px\"><div style=\"display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span><span style=\"width:72px;height:72px;flex:none;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);display:flex;align-items:center;justify-content:center\"><svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg></span><span style=\"flex:1;height:5px;background:var(--surfaceLight)\"></span></div><div style=\"display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:0 12px\"><span style=\"font-size:22px;line-height:30px;font-weight:600;text-wrap:balance;color:var(--textSecondary)\">Quadratische Funktionen</span><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Klasse 9 · danach</span></div></div></sc-if><div aria-hidden=\"true\" style=\"height:72px;display:flex;align-items:center\"><span style=\"flex:1;height:5px;background:linear-gradient(90deg,var(--surfaceLight),transparent)\"></span></div></div></section>\n\n<section id=\"themen\" data-screen-label=\"Themen\" style=\"margin:200px {{ thRand }} 0;padding:0 {{ thPad }};display:flex;flex-direction:column;gap:48px\"><div style=\"display:flex;align-items:end;justify-content:space-between;gap:40px\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Klasse 7 bis 10</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em\">38 Kapitel, 353 Unterkapitel.</h2></div><sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;align-items:flex-end;gap:8px\"><div role=\"radiogroup\" aria-label=\"Klasse\" style=\"display:flex;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 bayati-akzent\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;font-weight:600;white-space:nowrap;color:var(--textPrimary)\">{{ k.name }}</span></sc-if><sc-if value=\"{{ k.aus }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"false\" tabIndex=\"0\" onClick=\"{{ k.klick }}\" onKeyDown=\"{{ k.taste }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;white-space:nowrap;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\" style-focus=\"outline:2px solid var(--accent);outline-offset:2px\">{{ k.name }}</span></sc-if></sc-for></div><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary);padding-right:20px\">{{ klasseMeta }}</span></div></sc-if></div><sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;align-items:start\"><div role=\"list\" style=\"display:flex;flex-direction:column;min-width:0\"><div aria-hidden=\"true\" style=\"height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span class=\"t-beschriftung\" style=\"color:var(--textTertiary)\">Kapitel</span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Unterkapitel</span></div><sc-for list=\"{{ themenL }}\" as=\"t\" hint-placeholder-count=\"4\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</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\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div><div role=\"list\" style=\"display:flex;flex-direction:column;min-width:0\"><div aria-hidden=\"true\" style=\"height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span class=\"t-beschriftung\" style=\"color:var(--textTertiary)\">Kapitel</span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Unterkapitel</span></div><sc-for list=\"{{ themenR }}\" as=\"t\" hint-placeholder-count=\"4\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</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\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div></div></sc-if><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;align-items:start\"><sc-for list=\"{{ klassenAlle }}\" as=\"k\" hint-placeholder-count=\"4\"><div role=\"list\" aria-label=\"{{ k.name }}\" style=\"display:flex;flex-direction:column;min-width:0\"><div style=\"height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--textTertiary)\"><span style=\"display:flex;flex-direction:column;gap:2px\"><span class=\"t-titel\" style=\"font-size:22px;line-height:28px\">{{ k.name }}</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">{{ k.meta }}</span></span><span class=\"t-beschriftung\" style=\"color:var(--textTertiary);padding-right:32px\">Unterkapitel</span></div><sc-for list=\"{{ k.kap }}\" as=\"t\" hint-placeholder-count=\"8\"><a role=\"listitem\" href=\"#\" aria-label=\"{{ t.aria }}\" style=\"min-height:64px;box-sizing:border-box;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr) 32px 20px;column-gap:12px;align-items:center;text-decoration:none;color:var(--textPrimary);border-bottom:1px solid var(--divider)\" style-hover=\"color:var(--accentText)\"><span style=\"font-size:17px;line-height:24px;font-weight:600;text-wrap:pretty\">{{ t.titel }}</span><span class=\"t-klein t-ziffern\" style=\"text-align:right;color:var(--textSecondary)\">{{ t.n }}</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\"><path d=\"m9 18 6-6-6-6\"></path></svg></span></a></sc-for></div></sc-for></div></sc-if></section>\n\n<section data-screen-label=\"Dein Bayati\" style=\"margin:200px {{ dbRand }} 0;padding:0 {{ dbPad }};display:grid;grid-template-columns:minmax(0,1fr) {{ dbSpalte }};gap:{{ dbGap }};align-items:center\"><div style=\"display:flex;flex-direction:column;gap:40px\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Dein Bayati</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Sieht aus, wie du willst.</h2><p class=\"t-fliesstext\" style=\"margin:0;max-width:520px;font-size:19px;line-height:30px;color:var(--textSecondary);text-wrap:pretty\">Bayati, Organic, Rosé oder Robotik. <sc-if value=\"{{ eigenerHintergrund }}\" hint-placeholder-val=\"{{ true }}\"><span>Jede Wahl wirkt sofort auf das Handy rechts.</span></sc-if><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><span>Jede Wahl wirkt sofort auf Tablet und Handy rechts.</span></sc-if></p></div><div style=\"display:flex;flex-direction:column;gap:28px\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Stil</span><div role=\"radiogroup\" aria-label=\"Stil\" style=\"display:flex;flex-wrap:wrap;gap:4px\"><sc-for list=\"{{ stile }}\" as=\"s\" hint-placeholder-count=\"4\"><sc-if value=\"{{ s.an }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont bayati-akzent\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--textPrimary)\"><span data-stil=\"{{ s.key }}\" style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--accent)\"></span>{{ s.name }}</span></sc-if><sc-if value=\"{{ s.aus }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ s.klick }}\" class=\"t-klein-betont\" style=\"height:48px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--textSecondary);border:1px solid transparent\"><span data-stil=\"{{ s.key }}\" style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--accent)\"></span>{{ s.name }}</span></sc-if></sc-for></div></div><sc-if value=\"{{ zweiModi }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Modus</span><div role=\"radiogroup\" aria-label=\"Modus\" style=\"display:flex;gap:4px\"><sc-for list=\"{{ modi }}\" as=\"m\" hint-placeholder-count=\"2\"><sc-if value=\"{{ m.an }}\" hint-placeholder-val=\"{{ true }}\"><span role=\"radio\" aria-checked=\"true\" class=\"t-klein-betont bayati-akzent\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;font-weight:600;color:var(--textPrimary)\">{{ m.name }}</span></sc-if><sc-if value=\"{{ m.aus }}\" hint-placeholder-val=\"{{ false }}\"><span role=\"radio\" aria-checked=\"false\" onClick=\"{{ m.klick }}\" class=\"t-klein-betont\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;cursor:pointer;border:1px solid transparent;color:var(--textSecondary)\">{{ m.name }}</span></sc-if></sc-for></div></div></sc-if><sc-if value=\"{{ nurHell }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Organic gibt es nur hell.</span></sc-if><sc-if value=\"{{ nurDunkel }}\" hint-placeholder-val=\"{{ false }}\"><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Robotik gibt es nur dunkel.</span></sc-if><sc-if value=\"{{ istBayati }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:10px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Akzentfarbe</span><div role=\"radiogroup\" aria-label=\"Akzentfarbe\" style=\"display:flex;flex-wrap:wrap;gap:8px\"><sc-for list=\"{{ welten }}\" as=\"w\" hint-placeholder-count=\"5\"><div role=\"radio\" aria-checked=\"{{ w.an }}\" aria-label=\"{{ w.name }}\" onClick=\"{{ w.klick }}\" style=\"width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding-top:4px\"><sc-if value=\"{{ w.an }}\" hint-placeholder-val=\"{{ true }}\"><span data-welt=\"{{ w.key }}\" style=\"width:32px;height:32px;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\">{{ w.name }}</span></sc-if><sc-if value=\"{{ w.aus }}\" hint-placeholder-val=\"{{ false }}\"><span data-welt=\"{{ w.key }}\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent)\"></span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">{{ w.name }}</span></sc-if></div></sc-for></div></div></sc-if></div></div><div style=\"position:relative;width:{{ dbSpalte }};height:674px\"><sc-if value=\"{{ vollbreit }}\" hint-placeholder-val=\"{{ false }}\"><div aria-hidden=\"true\" style=\"position:absolute;left:0;top:0;z-index:1;width:606px;height:426px;box-sizing:border-box;padding:8px;border-radius:28px;background:#000;border:1px solid light-dark(#000,var(--glassBorder));pointer-events:none;transform:scale(1.4);transform-origin:0 0\"><div style=\"width:590px;height:410px;overflow:hidden;border-radius:20px\"><div style=\"width:1180px;height:820px;overflow:hidden;transform:scale(0.5);transform-origin:0 0\"><dc-import name=\"TabletLernenQuer\" theme=\"{{ phoneTheme }}\" stil=\"{{ stil }}\" welt=\"{{ welt }}\" hint-size=\"1180px,820px\"></dc-import></div></div></div></sc-if><div style=\"position:absolute;right:0;top:0;z-index:2;transform:scale({{ dbHandyS }});transform-origin:100% 100%;width:320px;height:674px;box-sizing:border-box;padding:8px;border-radius:45px;background:#000;border:1px solid light-dark(#000,var(--glassBorder))\"><div style=\"width:304px;height:658px;overflow:hidden;border-radius:37px\"><div style=\"width:390px;height:844px;overflow:hidden;zoom:0.78\"><dc-import name=\"LernenStart\" theme=\"{{ phoneTheme }}\" stil=\"{{ stil }}\" welt=\"{{ welt }}\" hint-size=\"390px,844px\"></dc-import></div></div></div></div></section>\n\n<section id=\"eltern\" data-screen-label=\"Für Eltern\" style=\"margin:200px {{ vbRand }} 0;padding:0 {{ vbPad }};display:grid;grid-template-columns:{{ elSpalten }} minmax(0,1fr);gap:96px;align-items:start\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Für Eltern</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Sicher für Kinder.</h2><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;height:48px;display:flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">Mehr für Eltern<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></div><div role=\"list\" style=\"display:grid;grid-template-columns:{{ elListe }};column-gap:48px;border-top:{{ elListeRand }}\"><sc-for list=\"{{ eltern }}\" as=\"e\" hint-placeholder-count=\"3\"><div role=\"listitem\" style=\"display:grid;grid-template-columns:{{ elItem }};gap:{{ elItemGap }};align-content:start;padding:28px 0;border-top:{{ elItemRand }};border-bottom:1px solid var(--divider)\"><span class=\"t-titel\" style=\"font-size:26px;line-height:32px;letter-spacing:-0.01em;text-wrap:balance\">{{ e.titel }}</span><span class=\"t-fliesstext\" style=\"font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ e.text }}</span></div></sc-for></div></section>\n\n<section data-screen-label=\"Fragen\" style=\"margin:200px {{ vbRand }} 0;padding:0 {{ vbPad }};display:grid;grid-template-columns:{{ elSpalten }} minmax(0,1fr);gap:96px;align-items:start\"><div style=\"display:flex;flex-direction:column;gap:20px\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">Fragen</span><h2 class=\"t-anzeige\" style=\"margin:0;font-size:60px;line-height:1;letter-spacing:-0.03em;text-wrap:balance\">Was du wissen willst.</h2></div><div style=\"display:grid;grid-template-columns:{{ fgSpalten }};gap:48px 64px;align-items:start\"><sc-for list=\"{{ fragenGruppen }}\" as=\"g\" hint-placeholder-count=\"2\"><div style=\"display:flex;flex-direction:column\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary);padding-bottom:8px\">{{ g.titel }}</span><sc-for list=\"{{ g.fragen }}\" as=\"f\" hint-placeholder-count=\"3\"><div style=\"border-top:1px solid var(--divider)\"><sc-if value=\"{{ f.offen }}\" hint-placeholder-val=\"{{ false }}\"><div role=\"button\" aria-expanded=\"true\" style=\"min-height:64px;box-sizing:border-box;padding:16px 0;display:flex;align-items:center;gap:16px\"><span style=\"flex:1;font-size:20px;line-height:28px;font-weight:600\">{{ f.frage }}</span><span style=\"display:flex;color:var(--accent)\"><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=\"m18 15-6-6-6 6\"></path></svg></span></div><p class=\"t-fliesstext\" style=\"margin:0;padding:0 48px 24px 0;font-size:17px;line-height:26px;color:var(--textSecondary);text-wrap:pretty\">{{ f.antwort }}</p><sc-if value=\"{{ f.link }}\" hint-placeholder-val=\"{{ false }}\"><a href=\"#\" class=\"t-klein-betont\" style=\"align-self:flex-start;margin:-12px 0 20px;height:40px;display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--accentText)\">{{ f.link }}<svg width=\"16\" height=\"16\" 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></sc-if><sc-if value=\"{{ f.zu }}\" hint-placeholder-val=\"{{ true }}\"><div role=\"button\" aria-expanded=\"false\" style=\"min-height:64px;box-sizing:border-box;padding:16px 0;display:flex;align-items:center;gap:16px;cursor:pointer\"><span style=\"flex:1;font-size:20px;line-height:28px;font-weight:600\">{{ f.frage }}</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\"><path d=\"m6 9 6 6 6-6\"></path></svg></span></div></sc-if></div></sc-for></div></sc-for></div></section>\n\n<div style=\"height:200px\"></div>\n</div>\n\n<div style=\"position:relative;overflow:hidden;margin:0 {{ kopfRand }}\"><div class=\"bayati-kopf\" style=\"position:absolute;inset:0;transform:scaleY(-1)\"></div><section data-screen-label=\"Schluss\" style=\"position:relative;box-sizing:border-box;padding:160px 80px 120px\"><div style=\"position:relative;width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:96px;align-items:end\"><h2 class=\"t-anzeige\" style=\"margin:0;font-size:76px;line-height:0.95;letter-spacing:-0.035em;text-wrap:balance\">Bereit? Die erste Lektion dauert fünf Minuten.</h2><div style=\"display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:8px\"><a href=\"#\" class=\"t-knopf bayati-akzent\" style=\"height:64px;width:100%;box-sizing:border-box;padding:0 40px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-size:20px;font-weight:600;color:var(--textPrimary)\">Kostenlos starten</a><span class=\"t-klein\" style=\"color:var(--textSecondary)\">Ohne Anmeldung. Konto später, wenn du willst.</span></div></div></section>\n\n<footer style=\"position:relative\"><div style=\"box-sizing:border-box;width:1120px;margin:0 auto;padding:0 0 56px;display:flex;align-items:center;justify-content:space-between;gap:40px\"><nav aria-label=\"Fußzeile\" style=\"display:flex;gap:32px\"><a href=\"#eltern\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Für Eltern</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Impressum</a><a href=\"#\" class=\"t-klein\" style=\"min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--textSecondary)\" style-hover=\"color:var(--textPrimary)\">Datenschutz</a></nav><div style=\"display:flex;align-items:center;gap:16px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Sprache</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>\n</div>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&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;vollbreit&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;tempo&quot;:{&quot;editor&quot;:&quot;int&quot;,&quot;default&quot;:1000,&quot;min&quot;:500,&quot;max&quot;:2500,&quot;step&quot;:100,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;}}\">\nclass Component extends DCLogic {\n  state = { stil: 'bayati', bereich: 0, tk: 7 };\n  bereichRef = React.createRef();\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, md = this.state.modus ?? t, wl = this.state.welt ?? 'violett', b = this.state.bereich;\n    const vb = !!this.props.vollbreit;\n    const v = { theme: t, vollbreit: vb, hell: t === 'light', dunkel: t === 'dark', eigenerHintergrund: !vb, hintergrund: vb ? 'transparent' : 'var(--background)', kopfRand: vb ? '-320px' : '0', kopfInnen: vb ? '48px' : '80px', wasRand: vb ? '-400px' : '-80px', wasInnen: vb ? '120px' : '80px', wasBreite: vb ? '1920px' : '1280px', probRand: vb ? '-280px' : '0', wasSpalten: vb ? 'minmax(0,1fr) minmax(0,1fr)' : 'minmax(0,1fr)', wasZeilen: vb ? '1fr' : 'auto', zeileSpalten: vb ? 'minmax(0,1fr)' : '400px minmax(0,1fr)', zeileGap: vb ? '24px' : '96px', stil: s, welt: wl, phoneTheme: s === 'organic' ? 'light' : s === 'robotik' ? 'dark' : md };\n    v.zweiModi = s === 'bayati' || s === 'rose'; v.nurHell = s === 'organic'; v.nurDunkel = s === 'robotik'; v.istBayati = s === 'bayati';\n    const sel = (key, cur, set) => ({ key, an: cur === key, aus: cur !== key, klick: () => this.setState(set(key)) });\n    v.stile = [['bayati', 'Bayati'], ['organic', 'Organic'], ['rose', 'Rosé'], ['robotik', 'Robotik']].map(([k, name]) => ({ name, ...sel(k, s, k => ({ stil: k })) }));\n    v.modi = [['light', 'Hell'], ['dark', 'Dunkel']].map(([k, name]) => ({ name, ...sel(k, md, k => ({ modus: k })) }));\n    v.welten = [['violett', 'Violett'], ['indigo', 'Indigo'], ['himmel', 'Himmel'], ['pink', 'Pink'], ['tuerkis', 'Türkis']].map(([k, name]) => ({ name, ...sel(k, wl, k => ({ welt: k })) }));\n    v.bereiche = [['Verstehen', 'Lektionen in fünf Minuten, Schritt für Schritt.'], ['Üben', 'Aufgaben, die nie gleich sind, und Tests wie in der Klassenarbeit.'], ['Duell', 'Gegen Freunde: Wer hat mehr richtig?']].map(([titel, text], i) => ({ nr: '0' + (i + 1), titel, text, an: b === i, aus: b !== i, klick: () => this.setState({ bereich: i }) }));\n    for (let i = 0; i < 3; i++) v['ba_' + i] = b === i;\n    v.eltern = [['Keine Werbung und kein Tracking', 'Bayati zeigt keine Anzeigen und gibt keine Daten an Werbefirmen weiter.'], ['Kein Chat, keine fremden Kontakte', 'Im Duell gibt es keinen Chat, keine freien Namen und keine Profilbilder. Gegner sieht man nur als Spitzname.'], ['Inhalte nach dem Rahmenlehrplan', 'Die Kapitel folgen dem, was in Klasse 7 bis 10 im Unterricht dran ist.']].map(([titel, text]) => ({ titel, text }));\n    const F = (frage, antwort, link) => ({ frage, antwort, link: link ?? false, offen: !!antwort, zu: !antwort });\n    v.fragenGruppen = [\n      { titel: 'Zu Bayati', fragen: [F('Kostet Bayati etwas?'), F('Brauche ich ein Konto?', 'Nein. Du startest als Gast und lernst das erste Kapitel. Mit einem Konto lernst du alle Kapitel und machst auf jedem Gerät weiter.'), F('Für welche Klassen?'), F('Geht das auf dem Handy und im Browser?')] },\n      { titel: 'Zu Mathe', fragen: [F('Wie löse ich Gleichungen?', 'Du formst beide Seiten gleich um, bis x allein steht. Was du links machst, machst du auch rechts.', 'Zur Erklärung'), F('Was ist der Betrag einer Zahl?'), F('Wie rechne ich mit Prozenten?')] }\n    ];\n    v.tempo = this.props.tempo ?? 1000;\n    v.vbRand = vb ? '-400px' : '0'; v.vbPad = vb ? '48px' : '0'; v.elSpalten = vb ? '520px' : '400px'; v.elListe = vb ? 'repeat(3,minmax(0,1fr))' : 'minmax(0,1fr)'; v.elListeRand = vb ? 'none' : '1px solid var(--divider)'; v.elItem = vb ? 'minmax(0,1fr)' : 'minmax(0,1fr) minmax(0,1fr)'; v.elItemGap = vb ? '16px' : '32px'; v.elItemRand = vb ? '1px solid var(--divider)' : 'none'; v.fgSpalten = vb ? 'repeat(2,minmax(0,1fr))' : 'minmax(0,1fr)';\n    v.dbRand = vb ? '-400px' : '0'; v.dbPad = vb ? '48px' : '0'; v.dbSpalte = vb ? '1037px' : '320px'; v.dbGap = '120px'; v.dbHandyS = vb ? '0.84' : '1';\n    const KAP = { 7: [['Rationale Zahlen', 15], ['Terme und Variablen', 13], ['Gleichungen', 12], ['Zuordnungen und Proportionalität', 14], ['Prozent- und Zinsrechnung', 14], ['Winkel und Symmetrie', 15], ['Kongruenz und Dreiecke', 10], ['Daten und Zufall', 9]], 8: [['Terme und binomische Formeln', 10], ['Gleichungen vertieft', 9], ['Lineare Funktionen', 8], ['Lineare Gleichungssysteme', 9], ['Potenzen', 7], ['Wurzeln', 6], ['Flächen, Kreis und Körper', 11], ['Satz des Pythagoras', 6], ['Ähnlichkeit und zentrische Streckung', 8], ['Wahrscheinlichkeit vertieft', 7], ['Prozent- und Zinsrechnung vertieft', 6]], 9: [['Reelle Zahlen', 7], ['Potenzen und Wurzeln vertieft', 9], ['Quadratische Funktionen', 10], ['Quadratische Gleichungen', 9], ['Potenz- und Wurzelfunktionen', 8], ['Trigonometrie', 9], ['Ähnlichkeit vertieft', 6], ['Raumgeometrie vertieft', 8], ['Exponentielles Wachstum', 7], ['Wahrscheinlichkeit und Kombinatorik', 9]], 10: [['Exponentialfunktionen und Logarithmen', 10], ['Ganzrationale Funktionen', 9], ['Trigonometrische Funktionen', 9], ['Kreisgeometrie', 7], ['Differentialrechnung', 11], ['Kurvenuntersuchung', 10], ['Wachstumsmodelle', 7], ['Stochastik vertieft', 8], ['Vektoren', 9]] };\n    const tk = this.state.tk, kl = KAP[tk];\n    const mkK = (k) => KAP[k].map(([titel, n], i) => ({ nr: k + '.' + String(i + 1).padStart(2, '0'), titel, n, aria: titel + ', ' + n + ' Unterkapitel' }));\n    const th = mkK(tk), hh = Math.ceil(th.length / 2); v.themenL = th.slice(0, hh); v.themenR = th.slice(hh);\n    v.klassenAlle = [7, 8, 9, 10].map(k => ({ name: 'Klasse ' + k, meta: KAP[k].length + ' Kapitel · ' + KAP[k].reduce((s, x) => s + x[1], 0) + ' Unterkapitel', kap: mkK(k) }));\n    v.thRand = vb ? '-400px' : '0'; v.thPad = vb ? '48px' : '0';\n    v.klasseMeta = kl.length + ' Kapitel · ' + kl.reduce((s, x) => s + x[1], 0) + ' Unterkapitel';\n    v.klassen = [7, 8, 9, 10].map(k => { const klick = () => this.setState({ tk: k }); return { name: 'Klasse ' + k, an: tk === k, aus: tk !== k, klick, taste: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); klick(); } } }; });\n    v.lwRand = vb ? '-400px' : '-80px'; v.lwSpalten = vb ? 'minmax(0,1fr) repeat(6,268px) minmax(0,1fr)' : 'minmax(0,1fr) repeat(4,268px) minmax(0,1fr)'; v.lwLinie = 'var(--accent)'; v.lwLinieR = 'var(--surfaceLight)';\n    const R = vb ? 400 : 80, e = vb ? 0 : 1, tq = vb ? 1 : 0;\n    v.bereichRef = this.bereichRef; v.brRand = (-R * (1 - e)).toFixed(1) + 'px'; v.brPadX = (48 * (1 - e)).toFixed(1) + 'px';\n    const tf = vb ? 1.3 : 0.9, hs = vb ? 0.22 : 0.48, ov = vb ? 80 : 120; v.brHandyS = (1 - hs * tq).toFixed(3); v.brSpalte = (320 + (606 * tf - ov + 320 * (1 - hs) - 320) * tq).toFixed(1) + 'px'; v.brGap = (120 - 72 * tq).toFixed(1) + 'px'; v.brTabOp = tq.toFixed(3); v.brTabT = 'translateX(' + (-48 * (1 - tq)).toFixed(1) + 'px) scale(' + (tf * (0.9 + 0.1 * tq)).toFixed(3) + ')';\n    return v;\n  }\n}\n</script>\n</body>\n</html>\n","LernenStart":"<!DOCTYPE html>\n<html>\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\">Guten Abend, 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)\">Klasse 7 · heute 12 Min. gelernt</span></div><div role=\"button\" aria-label=\"Level 3, So sammelst du 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 bis 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)\">Weiter, wo du warst</span><span class=\"t-kartentitel\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.03 Ordnen und Vergleichen</span></div>\n<div style=\"padding:9px 80px 0 16px\"><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Schritt 3 von 9 · ca. 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=\"Bereiche\" 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=\"Formeln\" 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)\">Formeln</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=\"Duell\" 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)\">Duell</span></div></div>\n<div role=\"link\" aria-label=\"Streak: 3 Tage am Stück, öffnet Fortschritt\" 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> Tage am Stück</span>\n<div aria-label=\"Gelernt Mo, Di, Mi. Heute Mi.\" 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)\">Di</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)\">Mi</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)\">Do</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)\">So</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\">Kapitel</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6 Kapitel</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\">Rationale Zahlen</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\">Terme und Variablen</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\">Gleichungen</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\">Zuordnungen und Proportionalität</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\">Prozent- und Zinsrechnung</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\">Winkel und Symmetrie</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=\"Hauptnavigation\" 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=\"Lernen\" 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=\"Fortschritt\" 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=\"Profil\" 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","TabletLernenQuer":"<!DOCTYPE html>\n<html>\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:1180px;height:820px;overflow:hidden;background:var(--background);color:var(--textPrimary);font-family:var(--font-sans)\">\n<div class=\"bayati-kopf\" style=\"position:absolute;left:0;top:0;width:1180px;height:300px\"></div><div class=\"bayati-muster\"></div>\n\n<div style=\"position:absolute;left:40px;top:96px;right:0;bottom:0;display:flex;gap:40px;padding-right:40px\">\n<div aria-label=\"Linke Spalte, scrollt einzeln\" style=\"width:380px;flex:none;height:724px;overflow:hidden;box-sizing:border-box;padding:20px 0 24px\"><div style=\"display:flex;flex-direction:column;gap:8px\">\n<div style=\"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\">Guten Abend, 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)\">Klasse 7 · heute 12 Min. gelernt</span></div><div role=\"button\" aria-label=\"Level 3, So sammelst du 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 bis 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 role=\"group\" aria-label=\"Bereiche\" style=\"margin:8px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px\"><div role=\"link\" aria-label=\"Formeln\" 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)\">Formeln</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=\"Duell\" 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)\">Duell</span></div></div>\n<div role=\"link\" aria-label=\"Streak: 3 Tage am Stück, öffnet Fortschritt\" style=\"width:380px;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> Tage am Stück</span>\n<div aria-label=\"Gelernt Mo, Di, Mi. Heute Mi.\" 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)\">Di</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)\">Mi</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)\">Do</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)\">So</span></div>\n</div>\n</div>\n<div style=\"position:relative;width:380px;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)\">Weiter, wo du warst</span><span class=\"t-kartentitel\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">7.01.03 Ordnen und Vergleichen</span></div>\n<div style=\"padding:9px 80px 0 16px\"><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Schritt 3 von 9 · ca. 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 style=\"margin-top:16px;display:flex;align-items:baseline;justify-content:space-between\"><span class=\"t-abschnitt\">Kapitel</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">6 Kapitel</span></div>\n\n<div style=\"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\">Rationale Zahlen</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\">Terme und Variablen</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\">Gleichungen</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\">Zuordnungen und Proportionalität</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\">Prozent- und Zinsrechnung</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\">Winkel und Symmetrie</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</div></div>\n<div aria-label=\"Rechte Spalte, scrollt einzeln\" style=\"position:relative;flex:1;min-width:0;height:724px;overflow:hidden;box-sizing:border-box;padding:20px 0 24px;border-left:1px solid var(--divider);padding-left:40px\"><section aria-label=\"Pfad 7.01\" style=\"flex:1;min-width:0;display:flex;flex-direction:column;gap:24px\">\n<div style=\"display:flex;flex-direction:column;gap:2px\"><span class=\"t-meta\" style=\"color:var(--accentText)\">7.01</span><h2 class=\"t-titel\" style=\"margin:0\">Rationale Zahlen</h2></div>\n<div style=\"display:flex;flex-direction:column;gap:12px;padding:4px 0\"><div class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">4 von 15 geschafft</div><div style=\"height:6px;border-radius:var(--radius-full);background:var(--surfaceLight);overflow:hidden\"><div style=\"width:27%;height:100%;border-radius:var(--radius-full);background:var(--accent)\"></div></div></div>\n<div role=\"list\" style=\"display:flex;flex-direction:column\">\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Zahlen verstehen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">2 von 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--accent)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Negative Zahlen im Alltag</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.01 · <span style=\"color:var(--successText)\">geschafft</span></span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--accent)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--accent)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Die Zahlengerade</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.02 · <span style=\"color:var(--successText)\">geschafft</span></span></div></div>\n<div role=\"listitem\" aria-current=\"step\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px;background:var(--accentTint);border:1px solid var(--accentBorder);border-radius:var(--radius-card)\"><span style=\"position:absolute;left:28.5px;top:-1px;height:calc(50% + 1px);width:3px;background:var(--accent)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:-1px;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:36px;height:36px;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center\"><span style=\"width:12px;height:12px;border-radius:var(--radius-full);background:var(--background)\"></span></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Ordnen und Vergleichen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--accentText)\">jetzt · Schritt 3 von 9 · ca. 4 Min.</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">4</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Betrag und Gegenzahl</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.04</span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Plus und Minus</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">2 von 3</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">5</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Addition ganzer Zahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.05</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Subtraktion rationaler Zahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.06 · <span style=\"color:var(--successText)\">geschafft</span></span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--success);color:var(--background);display:flex;align-items:center;justify-content:center\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\">Addition und Subtraktion gemischt</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textSecondary)\">7.01.07 · <span style=\"color:var(--successText)\">geschafft</span></span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Mal und Geteilt</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0 von 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">8</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Multiplikation ganzer Zahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.08</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">9</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Division ganzer Zahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.09</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">10</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Vorzeichenregeln (Zusammenfassung)</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.10</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">11</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Punkt vor Strich, Klammern</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.11</span></div></div>\n<div style=\"position:relative;min-height:48px;box-sizing:border-box;padding:16px 12px 8px 60px;display:flex;align-items:flex-end;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span class=\"t-beschriftung\" style=\"flex:1;min-width:0;color:var(--textSecondary)\">Anwenden</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">0 von 4</span></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">12</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Rationale Zahlen: Brüche</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.12</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">13</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Rationale Zahlen: Dezimalzahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.13</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">14</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Koordinatensystem (alle vier Quadranten)</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.14</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:64px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:absolute;left:28.5px;top:50%;bottom:0;width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span class=\"t-meta t-ziffern\" style=\"width:32px;height:32px;border-radius:var(--radius-full);background:var(--surfaceLight);color:var(--textSecondary);font-weight:600;display:flex;align-items:center;justify-content:center\">15</span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Textaufgaben mit rationalen Zahlen</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01.15</span></div></div>\n<div role=\"listitem\" style=\"position:relative;min-height:72px;box-sizing:border-box;padding:10px 12px;display:flex;align-items:center;gap:12px\"><span style=\"position:absolute;left:28.5px;top:0;height:calc(50% + 0px);width:3px;background:var(--surfaceLight)\"></span><span style=\"position:relative;width:36px;flex:none;display:flex;justify-content:center\"><span style=\"width:36px;height:36px;box-sizing:border-box;border-radius:var(--radius-full);border:3px solid var(--surfaceLight);background:var(--background);display:flex;align-items:center;justify-content:center\"><span style=\"width:14px;height:14px;border-radius:var(--radius-full);background:var(--surfaceLight)\"></span></span></span><div style=\"flex:1;min-width:0;display:flex;flex-direction:column\"><span class=\"t-kartentitel\" style=\"color:var(--textSecondary)\">Kapitel geschafft</span><span class=\"t-meta t-ziffern\" style=\"color:var(--textTertiary)\">7.01 · noch 11 offen</span></div></div>\n</div>\n\n</section></div>\n</div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:5;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" 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<nav aria-label=\"Hauptnavigation\" style=\"position:absolute;left:50%;top:38px;transform:translateX(-50%);z-index:4;display:flex;gap:8px\"><div role=\"link\" aria-current=\"page\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border-radius:var(--radius-full);background:var(--accentTint);border:1px solid var(--accentBorder);color:var(--textPrimary)\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><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.5\"></path><path d=\"M9 18h6\"></path><path d=\"M10 22h4\"></path></svg><span class=\"t-klein-betont\" style=\"font-weight:600\">Lernen</span></div><div role=\"link\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid transparent;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=\"M18 20V10\"></path><path d=\"M12 20V4\"></path><path d=\"M6 20v-6\"></path></svg><span class=\"t-klein-betont\">Fortschritt</span></div><div role=\"link\" style=\"height:44px;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid transparent;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\"><circle cx=\"12\" cy=\"8\" r=\"5\"></circle><path d=\"M20 21a8 8 0 0 0-16 0\"></path></svg><span class=\"t-klein-betont\">Profil</span></div></nav>\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', stil: this.props.stil ?? 'bayati', welt: this.props.welt ?? 'violett' };\n  }\n}\n</script>\n</body>\n</html>\n","DuellFrage":"<!DOCTYPE html>\n<html>\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=\"Schließen\" 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\">Duell · 7.01 Rationale Zahlen</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=\"Zeit 1 Minute 12 Sekunden\" 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=\"Rennbahn\" 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)\">Du</span><div role=\"img\" aria-label=\"Du: 2 von 5 richtig\" 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)\">Fuchs</span><div role=\"img\" aria-label=\"Fuchs: 3 von 5 richtig\" 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)\">Fuchs hat Aufgabe 3 gelöst</span></div>\n\n<div aria-label=\"Aufgaben-Hülle\" 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\">Betrag und Gegenzahl</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-fliesstext\">Wie groß ist der Betrag?</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)\">Prüfen</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>\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=\"Schließen\" 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 Rationale Zahlen</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 von 10 richtig</h1><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Zeit 8:24 · 2 mehr als beim letzten Mal</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\">Aufgaben</span><div role=\"list\" style=\"display:flex;justify-content:space-between\"><div role=\"button\" aria-label=\"Aufgabe 1, richtig\" 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=\"Aufgabe 2, richtig\" 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=\"Aufgabe 3, richtig\" 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=\"Aufgabe 4, falsch\" 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=\"Aufgabe 5, richtig\" 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=\"Aufgabe 6, richtig\" 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=\"Aufgabe 7, richtig\" 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=\"Aufgabe 8, falsch\" 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=\"Aufgabe 9, falsch\" 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=\"Aufgabe 10, richtig\" 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\">Das war falsch</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)\">Aufgabe 4 · Betrag und Gegenzahl</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Wie groß ist der Betrag?</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Der Betrag ist der Abstand zur Null und nie negativ.</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)\">Lernweg</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)\">Aufgabe 8 · Multiplikation ganzer Zahlen</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Berechne:</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div></div>\n<span class=\"t-klein\">Verschiedene Vorzeichen ergeben 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)\">Lernweg</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)\">Aufgabe 9 · Multiplikation ganzer Zahlen</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Berechne:</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Gleiche Vorzeichen ergeben 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)\">Lernweg</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)\">Fehler nochmal üben</div><div class=\"t-knopf\" style=\"height:48px;display:flex;align-items:center;justify-content:center;color:var(--accentText)\">Fertig</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>\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 Betrag und Gegenzahl</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\">Abstand zur Null</h1><p class=\"t-fliesstext\" style=\"margin:0\">Der Betrag einer Zahl ist ihr Abstand zur Null auf der Zahlengeraden. Er wird mit zwei senkrechten Strichen geschrieben.</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)\">Der Abstand von −5 zur Null ist 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\">Zahl auf der Zahlengeraden finden</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\">Schritte bis zur Null zählen</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\">Betrag aufschreiben</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)\">Merke dir</span><span class=\"t-klein-betont\">Ein Betrag ist nie negativ.</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)\">Achtung</span><span class=\"t-klein-betont\">\\(-\\lvert -5 \\rvert\\) ist \\(-5\\), nicht \\(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\">Wie groß ist \\(|-12|\\)?</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">Tippe, um die Antwort zu sehen</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\">Wie groß ist \\(|-12|\\)?</span><span style=\"font-size:22px;line-height:28px\">\\(|-12| = 12\\)</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Von −12 bis zur Null sind es 12 Schritte.</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\">Zeichnung: Zahlengerade von −6 bis 6, Abstand von −5 zur Null markiert</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)\">Weiter</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","TDuellFrageQuer":"<!DOCTYPE html>\n<html>\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:1180px;height:820px;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:230px;top:0px;width:720px;height:820px\"><dc-import name=\"DuellFrageV820\" theme=\"{{ theme }}\"  hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:7;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" 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>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const p = Object.assign({}, this.props); delete p.theme;\n    return { theme: this.props.theme ?? 'dark', p };\n  }\n}\n</script>\n</body>\n</html>\n","DuellFrageV820":"<!DOCTYPE html>\n<html>\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:720px;height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n\n\n\n<header style=\"position:absolute;left:0;top:47px;width:720px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Schließen\" 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\">Duell · 7.01 Rationale Zahlen</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=\"Zeit 1 Minute 12 Sekunden\" style=\"color:var(--textSecondary)\">1:12</span></span></header>\n<div style=\"position:absolute;left:20px;top:107px;width:680px;display:flex;flex-direction:column;gap:16px\">\n<div aria-label=\"Rennbahn\" 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)\">Du</span><div role=\"img\" aria-label=\"Du: 2 von 5 richtig\" 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)\">Fuchs</span><div role=\"img\" aria-label=\"Fuchs: 3 von 5 richtig\" 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)\">Fuchs hat Aufgabe 3 gelöst</span></div>\n\n<div aria-label=\"Aufgaben-Hülle\" 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\">Betrag und Gegenzahl</span></div>\n<div style=\"display:flex;flex-direction:column;gap:4px\"><span class=\"t-fliesstext\">Wie groß ist der Betrag?</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:720px;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)\">Prüfen</div><div style=\"position:absolute;left:293px;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","TTestErgebnisQuer":"<!DOCTYPE html>\n<html>\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:1180px;height:820px;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:230px;top:0px;width:720px;height:820px\"><dc-import name=\"TestErgebnisV820\" theme=\"{{ theme }}\"  hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:7;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" 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>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script>\nclass Component extends DCLogic {\n  renderVals() {\n    const p = Object.assign({}, this.props); delete p.theme;\n    return { theme: this.props.theme ?? 'dark', p };\n  }\n}\n</script>\n</body>\n</html>\n","TestErgebnisV820":"<!DOCTYPE html>\n<html>\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:720px;min-height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n\n\n<header style=\"position:absolute;left:0;top:47px;width:720px;height:56px;box-sizing:border-box;padding:0 20px 0 8px;display:flex;align-items:center\"><div aria-label=\"Schließen\" 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 Rationale Zahlen</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 von 10 richtig</h1><span class=\"t-klein t-ziffern\" style=\"color:var(--textSecondary)\">Zeit 8:24 · 2 mehr als beim letzten Mal</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\">Aufgaben</span><div role=\"list\" style=\"display:flex;justify-content:space-between\"><div role=\"button\" aria-label=\"Aufgabe 1, richtig\" 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=\"Aufgabe 2, richtig\" 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=\"Aufgabe 3, richtig\" 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=\"Aufgabe 4, falsch\" 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=\"Aufgabe 5, richtig\" 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=\"Aufgabe 6, richtig\" 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=\"Aufgabe 7, richtig\" 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=\"Aufgabe 8, falsch\" 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=\"Aufgabe 9, falsch\" 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=\"Aufgabe 10, richtig\" 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\">Das war falsch</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)\">Aufgabe 4 · Betrag und Gegenzahl</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Wie groß ist der Betrag?</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Der Betrag ist der Abstand zur Null und nie negativ.</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)\">Lernweg</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)\">Aufgabe 8 · Multiplikation ganzer Zahlen</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Berechne:</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">−12</b></div></div>\n<span class=\"t-klein\">Verschiedene Vorzeichen ergeben 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)\">Lernweg</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)\">Aufgabe 9 · Multiplikation ganzer Zahlen</span>\n<div style=\"display:flex;align-items:baseline;gap:8px;flex-wrap:wrap\"><span class=\"t-klein\">Berechne:</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)\">Deine Antwort</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)\">Richtig</span><b class=\"t-klein-betont t-ziffern\" style=\"font-weight:600;color:var(--textPrimary)\">12</b></div></div>\n<span class=\"t-klein\">Gleiche Vorzeichen ergeben 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)\">Lernweg</span>\n</div></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:720px;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)\">Fehler nochmal üben</div><div class=\"t-knopf\" style=\"height:48px;display:flex;align-items:center;justify-content:center;color:var(--accentText)\">Fertig</div><div style=\"position:absolute;left:293px;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","TabletTheorieQuer":"<!DOCTYPE html>\n<html>\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:1180px;height:820px;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:230px;top:0;width:720px;height:820px\"><dc-import name=\"TheorieSpalte\" theme=\"{{ theme }}\" stil=\"bayati\" welt=\"violett\" hint-size=\"720px,820px\"></dc-import></div>\n<div style=\"position:absolute;left:0;top:0;width:1180px;height:24px;z-index:5;box-sizing:border-box;padding:0 24px;display:flex;align-items:center;justify-content:space-between\"><span class=\"t-meta\" 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>\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","TheorieSpalte":"<!DOCTYPE html>\n<html>\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:720px;height:820px;overflow:hidden;color:var(--textPrimary);font-family:var(--font-sans)\">\n<sc-if value=\"{{ mitMuster }}\" hint-placeholder-val=\"{{ true }}\"></sc-if>\n\n<header style=\"position:absolute;left:0;top:24px;width:720px;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 Betrag und Gegenzahl</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:100px 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\">Abstand zur Null</h1><p class=\"t-fliesstext\" style=\"margin:0\">Der Betrag einer Zahl ist ihr Abstand zur Null auf der Zahlengeraden. Er wird mit zwei senkrechten Strichen geschrieben.</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)\">Der Abstand von −5 zur Null ist 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\">Zahl auf der Zahlengeraden finden</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\">Schritte bis zur Null zählen</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\">Betrag aufschreiben</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)\">Merke dir</span><span class=\"t-klein-betont\">Ein Betrag ist nie negativ.</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)\">Achtung</span><span class=\"t-klein-betont\">\\(-\\lvert -5 \\rvert\\) ist \\(-5\\), nicht \\(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\">Wie groß ist \\(|-12|\\)?</span><span class=\"t-meta\" style=\"color:var(--textTertiary)\">Tippe, um die Antwort zu sehen</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\">Wie groß ist \\(|-12|\\)?</span><span style=\"font-size:22px;line-height:28px\">\\(|-12| = 12\\)</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">Von −12 bis zur Null sind es 12 Schritte.</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\">Zeichnung: Zahlengerade von −6 bis 6, Abstand von −5 zur Null markiert</span></div>\n</div>\n<div style=\"position:absolute;left:0;bottom:0;width:720px;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)\">Weiter</div>\n<div style=\"position:absolute;left:293px;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>\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\">Für welche Klasse lernst du?</span><div role=\"radiogroup\" aria-label=\"Klasse\" 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\">Kl. {{ 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)\">Kl. {{ 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=\"Aufgaben\" 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)\">Klasse {{ klasse }} · {{ anzahl }} Aufgaben</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=\"richtig\"><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=\"falsch\"><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=\"richtig\"><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=\"falsch\"><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)\">Aufgabe {{ nr }} von {{ anzahl }}</span><span role=\"button\" aria-label=\"Vorige Aufgabe\" 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=\"Nächste Aufgabe\" 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\">Das waren 5 von über 1.000 Aufgaben.</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)\">Weiter in der 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)\">Fünf neue Aufgaben</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)\">Weiter in der 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: 'Prozentrechnung', v: 'pz', pool: [\n      { id: '1.1', frage: 'Ein Hoodie kostet 60 €. Er ist um 25 % reduziert. Was zahlst du?', optionen: ['45 €', '15 €', '35 €', '50 €'], d: { preis: 60, prozent: 25 } },\n      { id: '1.2', frage: 'Ein Spiel kostet 40 €. Du bekommst 50 % Rabatt. Wie viel sparst du?', optionen: ['20 €', '10 €', '50 €', '30 €'], d: { preis: 40, prozent: 50, sparen: true } },\n      { id: '1.3', frage: 'Sneaker kosten 120 €. 10 % Rabatt. Was zahlst du?', optionen: ['108 €', '12 €', '110 €', '100 €'], d: { preis: 120, prozent: 10 } } ] },\n    { thema: 'Negative Zahlen', v: 'th', pool: [\n      { id: '2.1', frage: 'Morgens sind es −3 °C. Bis mittags steigt die Temperatur um 8 °C. Wie warm ist es mittags?', optionen: ['5 °C', '11 °C', '−11 °C', '−5 °C'], d: { start: -3, schritt: 8 } },\n      { id: '2.2', frage: 'Abends sind es 4 °C. Nachts fällt die Temperatur um 9 °C. Wie kalt ist es nachts?', optionen: ['−5 °C', '5 °C', '−13 °C', '13 °C'], d: { start: 4, schritt: -9 } },\n      { id: '2.3', frage: 'In Berlin sind es 6 °C, in Oslo −4 °C. Wie viel wärmer ist es in Berlin?', optionen: ['10 °C', '2 °C', '−10 °C', '4 °C'], d: { a: 6, b: -4, namen: ['Berlin', 'Oslo'] } } ] },\n    { thema: 'Proportionale Zuordnung', v: 'ds', pool: [\n      { id: '3.1', frage: '4 Brötchen kosten 1,60 €. Was kosten 10 Brötchen?', optionen: ['4,00 €', '6,40 €', '16,00 €', '3,20 €'], d: { kopf: ['Brötchen', 'Euro'], z1: ['4', '1,60 €'], teiler: '÷ 4', z2: ['1', '0,40 €'], faktor: '× 10', z3: ['10', '4,00 €'] } },\n      { id: '3.2', frage: '3 Kinokarten kosten 24 €. Was kosten 5 Karten?', optionen: ['40 €', '32 €', '45 €', '26 €'], d: { kopf: ['Karten', 'Euro'], z1: ['3', '24 €'], teiler: '÷ 3', z2: ['1', '8 €'], faktor: '× 5', z3: ['5', '40 €'] } },\n      { id: '3.3', frage: 'Ein Auto fährt in 2 Stunden 150 km. Wie weit kommt es in 5 Stunden?', optionen: ['375 km', '300 km', '450 km', '225 km'], d: { kopf: ['Stunden', 'km'], z1: ['2', '150 km'], teiler: '÷ 2', z2: ['1', '75 km'], faktor: '× 5', z3: ['5', '375 km'] } } ] },\n    { thema: 'Winkelsumme im Dreieck', v: 'wi', pool: [\n      { id: '4.1', frage: 'In einem Dreieck sind zwei Winkel 50° und 70° groß. Wie groß ist der dritte?', optionen: ['60°', '120°', '240°', '50°'], d: { w: [50, 70, 60], frag: [2] } },\n      { id: '4.2', frage: 'Ein Dreieck hat einen rechten Winkel und einen Winkel von 35°. Wie groß ist der dritte?', optionen: ['55°', '145°', '35°', '65°'], d: { w: [90, 35, 55], frag: [2], recht: 0 } },\n      { id: '4.3', frage: 'In einem Dreieck sind zwei Winkel gleich groß, der dritte hat 100°. Wie groß ist jeder der beiden?', optionen: ['40°', '80°', '100°', '130°'], d: { w: [40, 40, 100], frag: [0, 1] } } ] },\n    { thema: 'Wahrscheinlichkeit', v: 'ku', pool: [\n      { id: '5.1', frage: 'In einem Beutel sind 3 rote und 5 blaue Kugeln. Wie groß ist die Wahrscheinlichkeit, eine rote zu ziehen?', optionen: ['3/8', '3/5', '5/8', '1/3'], d: { kugeln: [['rot', 3], ['blau', 5]], gesucht: ['rot'] } },\n      { id: '5.2', frage: 'Ein Glücksrad hat 6 gleich große Felder, 2 davon sind grün. Wie groß ist die Wahrscheinlichkeit für grün?', optionen: ['1/3', '2/4', '1/2', '2/3'], d: { rad: true, kugeln: [['grün', 2], ['grau', 4]], gesucht: ['grün'], extra: '= 1/3' } },\n      { id: '5.3', frage: 'In einer Schale liegen 4 rote, 2 gelbe und 4 grüne Gummibärchen. Wie groß ist die Wahrscheinlichkeit, kein rotes zu ziehen?', optionen: ['6/10', '4/10', '2/10', '4/6'], d: { kugeln: [['rot', 4], ['gelb', 2], ['grün', 4]], gesucht: ['gelb', 'grün'] } } ] }\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': 'Prozentrechnung', 'Thermometer': 'Negative Zahlen', 'Dreisatz Graph': 'Proportionale Zuordnung', 'Winkel': 'Winkelsumme im Dreieck', 'Kugeln': 'Wahrscheinlichkeit', 'Zinsen': 'Zinsrechnung', 'Umstellen': 'Formeln umstellen', 'Taxi': 'Lineare Funktionen', 'Gluecksrad': 'Wahrscheinlichkeit', 'Pythagoras': 'Satz des Pythagoras', 'Parabel': 'Quadratische Funktionen', 'Faktorisieren': 'Quadratische Gleichungen', 'Potenzen': 'Potenzgesetze', 'Dreieck Seiten': 'Trigonometrie', 'Exponential': 'Exponentialfunktionen', 'Polynomdivision': 'Polynomdivision', 'Sinus': 'Sinusfunktionen', 'Kurvendiskussion': 'Kurvendiskussion', w10: 'Würfelnetz', zy10: 'Zylinder', si10: 'Sinus', bd10: 'Baumdiagramm' };\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: 'Die Katheten sind a = 3 cm und b = 4 cm lang. Wie lang ist die 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: 'Wo schneidet die Gerade y = 2x + 1 die y-Achse?', optionen: ['(1 | 0)', '(0 | 2)', '(0 | 1)', '(0 | −1)'], richtig: 2, weg: ['Auf der y-Achse ist x = 0.', 'y = 2 · 0 + 1 = 1.', 'Der Schnittpunkt ist (0 | 1).'] },\n      { id: 'k8', v: 'k', pool: [1, 2], frage: 'Ein Kreis hat den Radius r = 4 cm. Wie groß ist seine Fläche?', optionen: ['≈ 25,1 cm²', '≈ 12,6 cm²', '≈ 50,3 cm²', '≈ 100,5 cm²'], richtig: 2, weg: ['Die Kreisstücke umgelegt ergeben fast ein Rechteck: π · r breit, r hoch.', 'A = π · r² = π · 4 · 4.', 'π · 16 ≈ 50,3 cm².'] },\n      { id: 'ur8', v: 'ur', pool: [1, 2], frage: 'In der Urne liegen 3 blaue und 5 rote Kugeln. Du ziehst eine. Wie groß ist P(blau)?', optionen: ['3/5', '5/8', '3/8', '1/3'], richtig: 2, weg: ['Günstig: 3 blaue Kugeln.', 'Möglich: 3 + 5 = 8 Kugeln.', 'P(blau) = 3/8 = 37,5 %.'] }\n    ],\n    9: [\n      { id: 'pr9', v: 'pr', pool: [1, 2], frage: 'Eine Pyramide hat eine quadratische Grundfläche mit a = 6 cm und die Höhe h = 9 cm. Wie groß ist ihr Volumen?', optionen: ['324 cm³', '54 cm³', '162 cm³', '108 cm³'], richtig: 3, weg: ['Grundfläche G = 6 · 6 = 36 cm².', 'Der Quader mit gleicher Grundfläche und Höhe fasst 36 · 9 = 324 cm³.', 'Die Pyramide füllt davon ein Drittel: 324 : 3 = 108 cm³.'] },\n      { id: 'g9', v: 'g', pool: [0, 2], frage: 'Welche Nullstellen hat die Parabel y = x² − 4?', optionen: ['x = 0 und x = 4', 'x = −2 und x = 2', 'x = −4 und x = 4', 'nur x = 0'], richtig: 1, weg: ['Nullstellen heißt y = 0, also x² − 4 = 0.', 'x² = 4.', 'x = −2 oder x = 2.'] },\n      { id: 'st9', v: 'st', pool: [1, 2], frage: 'Du bist 1,80 m groß und wirfst einen 3 m langen Schatten. Der Schatten des Baums ist 10 m lang. Wie hoch ist der Baum?', optionen: ['5 m', '6 m', '7,5 m', '12 m'], richtig: 1, weg: ['Gleiche Sonne, gleicher Winkel: Beide Dreiecke haben dieselbe Form.', 'Der Baumschatten ist 10 : 3 ≈ 3,3-mal so lang wie deiner.', 'Also ist der Baum 1,8 · 10 : 3 = 6 m hoch.'] },\n      { id: 'sp9', v: 'sp', pool: [1, 2], frage: 'Wo liegt der Scheitelpunkt der Parabel y = (x − 2)² + 1?', optionen: ['S(−2 | 1)', 'S(2 | 1)', 'S(2 | −1)', 'S(1 | 2)'], richtig: 1, weg: ['Start ist die Normalparabel y = x² mit Scheitel (0 | 0).', '(x − 2)² schiebt sie 2 nach rechts.', '+ 1 schiebt sie 1 nach oben: S(2 | 1).'] }\n    ],\n    10: [\n      { id: 'w10', v: 'w', pool: [0], frage: 'Das Netz wird zu einem Würfel gefaltet. Welche Zahl liegt dann gegenüber der 2?', optionen: ['1', '4', '5', '6'], richtig: 1, weg: ['Rot ist der Boden, die 5 klappt oben drauf.', '1 und 6 werden Rück- und Vorderseite.', '2 und 4 klappen links und rechts hoch: gegenüber der 2 liegt die 4.'] },\n      { id: 'zy10', v: 'zy', pool: [1, 2], frage: 'Ein Zylinder hat den Radius r = 3 cm und die Höhe h = 5 cm. Wie groß ist seine Oberfläche?', optionen: ['≈ 94,2 cm²', '≈ 150,8 cm²', '≈ 75,4 cm²', '≈ 141,4 cm²'], richtig: 1, weg: ['Deckel und Boden: 2 · π · 3² ≈ 56,5 cm².', 'Der Mantel abgerollt ist ein Rechteck: 2π · 3 · 5 ≈ 94,2 cm².', 'Zusammen ≈ 150,8 cm².'] },\n      { id: 'si10', v: 'si', pool: [1, 2], frage: 'Wie groß ist sin 150°?', optionen: ['0,5', '0,87', '−0,5', '1'], richtig: 0, weg: ['150° liegt 30° vor der 180°-Marke.', 'Der Punkt bei 150° ist das Spiegelbild von 30° an der y-Achse: gleiche Höhe.', 'sin 150° = sin 30° = 0,5.'] },\n      { id: 'bd10', v: 'bd', pool: [1, 2], frage: 'Du wirfst eine Münze zweimal. Wie groß ist die Wahrscheinlichkeit für zweimal Kopf?', optionen: ['½', '¼', '⅓', '⅛'], richtig: 1, weg: ['Erster Wurf: P(Kopf) = ½.', 'Zweiter Wurf: wieder ½, unabhängig vom ersten.', 'Entlang des Pfades malnehmen: ½ · ½ = ¼.'] }\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>\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)\">Klasse 7 · Winkelsumme im Dreieck</span>\n<span class=\"t-abschnitt\" style=\"text-wrap:pretty\">In einem Dreieck sind zwei Winkel 50° und 70° groß. Wie groß ist der dritte Winkel γ?</span>\n<sc-if value=\"{{ offen }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-fliesstext\" style=\"color:var(--textSecondary);text-wrap:pretty\">Öffne den Bogen auf dem Winkelmesser so weit, wie γ groß ist. Dann prüfen.</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\">Richtig!</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\">Falsch!</span></div><span class=\"t-klein-betont t-ziffern\" style=\"font-weight:600\">Du hattest {{ wertText }}, richtig sind 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\">Prüfen</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\">Prüfen</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\">Nochmal lösen</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=\"Winkel γ auf dem Winkelmesser\" 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 ? 'fehlen ' + (-d) + '°' : d + '° zu viel', 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 ? 'Dritter Winkel · deine Antwort' : 'Dritter Winkel') : ende ? 'Dritter Winkel' : fehl ? 'Summe mit deinem Winkel' : 'Winkelsumme',\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 ? 'Drei Winkel ergeben einen Halbkreis' : d < 0 ? 'Zum Halbkreis fehlen ' + (-d) + '°' : 'Das sind ' + d + '° mehr als ein Halbkreis', 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>\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 im Jahr, auf den Monat gerechnet</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)\">im Monat</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\">Monatsabo, aufs Jahr gerechnet</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>\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 im Bus', 'Handy'], ['13:10 in der Schule', 'Tablet'], ['19:00 am Schreibtisch', '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 ? 'Gleichungen · geschafft' : `Gleichungen · ${n} von 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>\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)\">Daran erinnere ich mich nicht mehr:</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: 'Quadratische Gleichungen', kl: 9, z1: 'x^2 + 6x + 9 = 0', l: '(x + 3)^2 = 0', z3: 'x = -3', fehlt: 2,\n      kette: [['Terme und Variablen', 7], ['Gleichungen', 7], ['Binomische Formeln', 8], ['Quadratische Gleichungen', 9]] },\n    { ziel: 'Trigonometrie', 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: [['Winkel und Symmetrie', 7], ['Kongruenz und Dreiecke', 7], ['Satz des Pythagoras', 8], ['Trigonometrie', 9]] },\n    { ziel: 'Differentialrechnung', kl: 10, z1: \"f'(x) = 3x^2 - 3 = 0\", l: 'x^2 = 1', z3: 'x = -1 \\\\;\\\\text{oder}\\\\; x = 1', fehlt: 1,\n      kette: [['Gleichungen', 7], ['Quadratische Gleichungen', 9], ['Differentialrechnung', 10]] },\n    { ziel: 'Wahrscheinlichkeit und Kombinatorik', 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: [['Rationale Zahlen', 7], ['Daten und Zufall', 7], ['Wahrscheinlichkeit vertieft', 8], ['Wahrscheinlichkeit und Kombinatorik', 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: [['Prozent- und Zinsrechnung', 7], ['Potenzen', 8], ['Exponentielles Wachstum', 9]] },\n    { ziel: 'Kreisgeometrie', 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: [['Winkel und Symmetrie', 7], ['Flächen, Kreis und Körper', 8], ['Kreisgeometrie', 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 ? 'Der Lernweg sucht zurück, was du vorher brauchst.' : p < fuellStart ? 'In der richtigen Reihenfolge.' : p < fuellStart + n ? 'Dann geht es der Reihe nach vorwärts.' : 'Zurück bei deinem Thema.';\n    const hinweisWas = s.kette[s.fehlt][0];\n    return { theme: this.props.theme ?? 'light', opazitaet: this.state.opazitaet, zielText: `Dein Thema: ${s.ziel} · Klasse ${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","Tafel":"<!DOCTYPE html>\n<html>\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>@keyframes tafelEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}</style></helmet>\n<div data-theme=\"{{ theme }}\" style=\"color:var(--textPrimary);font-family:var(--font-sans);display:flex;flex-direction:column;gap:20px;opacity:{{ opazitaet }};transition:opacity .4s ease\">\n<sc-if value=\"{{ zeigeFeld }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"width:515px;height:441px\"><div style=\"width:448px;transform:scale(1.15);transform-origin:0 0\"><dc-import name=\"AufgabenFeld\" variante=\"{{ feldV }}\" on-done=\"{{ feldFertig }}\" hint-size=\"448px,384px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{ zeigeTafel }}\" hint-placeholder-val=\"{{ true }}\"><div style=\"display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--divider)\"><div style=\"display:flex;align-items:center;gap:16px;flex-wrap:wrap\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ thema }}</span><div ref=\"{{ formelRef }}\" style=\"font-size:17px;line-height:1;text-align:left;color:var(--textSecondary)\"></div></div><p class=\"t-klein\" style=\"margin:0;max-width:520px;color:var(--textSecondary);text-wrap:pretty\">{{ erklaerung }}</p></div>\n<div style=\"display:flex;flex-direction:column;gap:6px\">\n<sc-for list=\"{{ zeilen }}\" as=\"z\" hint-placeholder-count=\"3\"><div style=\"display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center;min-height:56px;animation:tafelEin .35s ease-out both\"><div ref=\"{{ z.ref }}\" style=\"font-size:30px;line-height:1;text-align:left;color:{{ z.farbe }}\"></div><span class=\"t-klein\" style=\"color:var(--textSecondary);text-wrap:pretty\">{{ z.note }}</span></div></sc-for>\n</div></sc-if>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:676,&quot;height&quot;:420},&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;:500,&quot;max&quot;:2500,&quot;step&quot;:100,&quot;unit&quot;:&quot;ms&quot;,&quot;tsType&quot;:&quot;number&quot;},&quot;herleitungen&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}\">\nclass Component extends DCLogic {\n  state = { zeilen: [], opazitaet: 1, thema: '', formel: '', erklaerung: '', modus: 'tafel', feldV: 'ta' };\n  els = []; timer = []; letzter = -1; formelEl = null; letztesFeld = '';\n  POOL = ['ta', 'tc', 'td', 'k', 'p2', 'zy'];\n  feld() {\n    let v; do { v = this.POOL[Math.floor(Math.random() * this.POOL.length)]; } while (v === this.letztesFeld); this.letztesFeld = v;\n    this.setState({ modus: 'feld', feldV: v, opazitaet: 1 });\n  }\n  feldFertig() { if (this.state.modus !== 'feld') return; this.setState({ opazitaet: 0 }); this.nach(450, () => { this.setState({ modus: 'tafel' }); this.lauf(); }); }\n  componentDidMount() { this.lauf(); }\n  componentWillUnmount() { this.timer.forEach(clearTimeout); }\n  componentDidUpdate() { this.setzen(); }\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    this.tex(this.formelEl, this.state.formel);\n    this.state.zeilen.forEach((z, i) => this.tex(this.els[i], z.tex));\n  }\n  lauf() {\n    const a = this.gen(), aufg = a.zeilen, tempo = this.props.tempo ?? 1000;\n    this.els = [];\n    this.setState({ thema: a.thema, formel: a.formel, erklaerung: a.erklaerung, zeilen: [this.zeile(aufg[0], 0, false)], opazitaet: 1 });\n    aufg.slice(1).forEach((s, k) => this.nach(tempo * (k + 1), () => this.setState(st => ({ zeilen: [...st.zeilen, this.zeile(s, k + 1, k + 2 === aufg.length)] }))));\n    this.nach(tempo * aufg.length + 2600, () => this.setState({ opazitaet: 0 }));\n    this.nach(tempo * aufg.length + 3050, () => { if (this.props.herleitungen ?? true) this.feld(); else this.lauf(); });\n  }\n  zeile([tex, note], i, final) { return { tex, note: note || '', farbe: final ? 'var(--accentText)' : 'var(--textPrimary)', ref: el => { this.els[i] = el; } }; }\n  gen() {\n    const r = (a, b) => a + Math.floor(Math.random() * (b - a + 1)), p = a => a[r(0, a.length - 1)], ggt = (a, b) => b ? ggt(b, a % b) : a;\n    const vz = n => n < 0 ? ' - ' + (-n) : ' + ' + n;\n    const typen = [\n      () => { const a = r(2, 9), x = r(2, 12), b = r(1, 20), c = a * x + b; return { thema: 'Gleichungen', formel: 'a\\\\,x + b = c', erklaerung: 'Was du links machst, machst du auch rechts. So bleibt die Gleichung wahr, bis x allein steht.',\n        zeilen: [[`${a}x + ${b} = ${c}`, `− ${b} auf beiden Seiten`], [`${a}x = ${c - b}`, `beide Seiten durch ${a}`], [`x = ${x}`, 'x steht allein']] }; },\n      () => { const a = r(2, 6), b = r(1, 9), x = r(1, 9), c = a * (x + b); return { thema: 'Terme und Variablen', formel: 'a\\\\,(x + b) = a\\\\,x + a\\\\,b', erklaerung: 'Die Zahl vor der Klammer wird mit jedem Glied in der Klammer malgenommen. Danach löst du wie gewohnt.',\n        zeilen: [[`${a}\\\\,(x + ${b}) = ${c}`, `${a} mal x und ${a} mal ${b}`], [`${a}x + ${a * b} = ${c}`, `− ${a * b} auf beiden Seiten`], [`${a}x = ${c - a * b}`, `beide Seiten durch ${a}`], [`x = ${x}`, 'x steht allein']] }; },\n      () => { const ns = [2, 3, 4, 5, 6, 8]; let b = p(ns), d = p(ns); while (d === b) d = p(ns); const a = r(1, b - 1), c = r(1, d - 1), L = b * d / ggt(b, d), n = a * L / b + c * L / d, g = ggt(n, L);\n        const z = [[`\\\\frac{${a}}{${b}} + \\\\frac{${c}}{${d}}`, `Hauptnenner ist ${L}`], [`\\\\frac{${a * L / b}}{${L}} + \\\\frac{${c * L / d}}{${L}}`, 'Zähler addieren, Nenner bleibt']];\n        if (g > 1) { z.push([`\\\\frac{${n}}{${L}}`, `Zähler und Nenner durch ${g}`]); z.push([L / g === 1 ? `${n / g}` : `\\\\frac{${n / g}}{${L / g}}`, 'fertig gekürzt']); } else z.push([`\\\\frac{${n}}{${L}}`, 'lässt sich nicht kürzen']);\n        return { thema: 'Rationale Zahlen', formel: '\\\\frac{a}{b} + \\\\frac{c}{d} = \\\\frac{a d + c b}{b d}', erklaerung: 'Brüche addierst du nur mit gleichem Nenner. Erst erweitern, dann die Zähler zusammenzählen, zum Schluss kürzen.', zeilen: z }; },\n      () => { let q, G; do { q = p([5, 10, 12, 15, 20, 25, 30, 40, 50, 75]); G = p([80, 120, 150, 200, 240, 250, 300, 400, 500, 600]); } while (q * G % 100); return { thema: 'Prozentrechnung', formel: 'W = \\\\frac{p}{100} \\\\cdot G', erklaerung: 'Prozent heißt „von Hundert“. Der Prozentsatz ist ein Bruch mit Nenner 100, den du mit dem Grundwert malnimmst.',\n        zeilen: [[`${q}\\\\,\\\\% \\\\text{ von } ${G}`, `${q} % als Bruch schreiben`], [`\\\\frac{${q}}{100} \\\\cdot ${G}`, 'Bruch mal Grundwert'], [`${q * G / 100}`, 'der Prozentwert']] }; },\n      () => { const a = r(2, 9), b = r(1, 12), c = r(2, 9), d = r(1, 12), k = b - d; return { thema: 'Terme und Variablen', formel: 'a\\\\,x + c\\\\,x = (a + c)\\\\,x', erklaerung: 'Nur Gleiches darf zusammen: x-Glieder zu x-Gliedern, Zahlen zu Zahlen. Das Vorzeichen gehört immer zur Zahl dahinter.',\n        zeilen: [[`${a}x + ${b} + ${c}x - ${d}`, 'x-Glieder nach vorn'], [`${a}x + ${c}x + ${b} - ${d}`, `${a} + ${c} und ${b} − ${d}`], [`${a + c}x${k ? vz(k) : ''}`, 'kürzer geht nicht']] }; },\n      () => { const [a, b, c] = p([[3, 4, 5], [6, 8, 10], [5, 12, 13], [8, 15, 17], [9, 12, 15], [7, 24, 25], [12, 16, 20]]); return { thema: 'Satz des Pythagoras', formel: 'a^2 + b^2 = c^2', erklaerung: 'Im rechtwinkligen Dreieck sind die Quadrate der Katheten zusammen so groß wie das Quadrat der Hypotenuse.',\n        zeilen: [[`c^2 = ${a}^2 + ${b}^2`, 'Katheten quadrieren'], [`c^2 = ${a * a} + ${b * b}`, 'Quadrate addieren'], [`c^2 = ${c * c}`, 'Wurzel ziehen'], [`c = ${c}`, 'die Hypotenuse']] }; }\n,\n      () => { const a = r(2, 9); return { thema: 'Binomische Formeln', formel: '(a + b)^2 = a^2 + 2ab + b^2', erklaerung: 'Die Klammer wird mit sich selbst malgenommen. Das mittlere Glied ist doppelt, weil es zweimal entsteht.',\n        zeilen: [[`(x + ${a})^2`, 'erste binomische Formel'], [`x^2 + 2 \\\\cdot ${a} \\\\cdot x + ${a}^2`, 'einsetzen'], [`x^2 + ${2 * a}x + ${a * a}`, 'ausgerechnet']] }; },\n      () => { let x1 = r(-6, 8), x2 = r(-6, 8); if ((x1 + x2) % 2) x2++; if (x1 === x2) x2 += 2; const pp = -(x1 + x2), q = x1 * x2, h = -pp / 2, D = h * h - q, sq = Math.sqrt(D), [lo, hi] = [Math.min(x1, x2), Math.max(x1, x2)];\n        return { thema: 'Quadratische Gleichungen', formel: 'x_{1,2} = -\\\\frac{p}{2} \\\\pm \\\\sqrt{\\\\left(\\\\frac{p}{2}\\\\right)^2 - q}', erklaerung: 'In der Normalform x² + px + q = 0 liest du p und q ab und setzt sie in die pq-Formel ein.',\n        zeilen: [[`x^2${pp ? vz(pp) + 'x' : ''}${vz(q)} = 0`, `p = ${pp}, q = ${q}`], [`x_{1,2} = ${h} \\\\pm \\\\sqrt{${h * h}${vz(-q)}}`, 'in die pq-Formel'], [`x_{1,2} = ${h} \\\\pm ${sq}`, `Wurzel aus ${D}`], [`x_1 = ${lo}, \\\\quad x_2 = ${hi}`, 'zwei Lösungen']] }; },\n      () => { const a = p([2, 3, 5, 10]), m = r(2, 4), n = r(2, 4); return { thema: 'Potenzen', formel: 'a^m \\\\cdot a^n = a^{m+n}', erklaerung: 'Gleiche Basis: Beim Malnehmen zählst du die Hochzahlen zusammen.',\n        zeilen: [[`${a}^${m} \\\\cdot ${a}^${n}`, 'gleiche Basis'], [`${a}^{${m} + ${n}}`, 'Hochzahlen addieren'], [`${a}^{${m + n}} = ${Math.pow(a, m + n)}`, 'ausgerechnet']] }; },\n      () => { const x1 = r(-4, 3), x2 = x1 + r(1, 4), m = p([-3, -2, -1, 1, 2, 3]), b = r(-6, 6), y1 = m * x1 + b, y2 = m * x2 + b; return { thema: 'Lineare Funktionen', formel: 'm = \\\\frac{y_2 - y_1}{x_2 - x_1}', erklaerung: 'Zwei Punkte legen eine Gerade fest. Die Steigung ist Höhenunterschied geteilt durch Abstand, dann folgt der y-Achsenabschnitt.',\n        zeilen: [[`P(${x1}\\\\,|\\\\,${y1}), \\\\quad Q(${x2}\\\\,|\\\\,${y2})`, 'zwei Punkte'], [`m = \\\\frac{${y2} - (${y1})}{${x2} - (${x1})} = ${m}`, 'Steigung'], [`b = ${y1} - ${m} \\\\cdot (${x1}) = ${b}`, 'P einsetzen'], [`f(x) = ${m}x${vz(b)}`, 'die Gerade']] }; },\n      () => { const [a, , c] = p([[3, 4, 5], [6, 8, 10], [5, 12, 13], [8, 15, 17], [7, 24, 25]]), w = (Math.asin(a / c) * 180 / Math.PI).toFixed(2).replace('.', '{,}'); return { thema: 'Trigonometrie', formel: '\\\\sin\\\\alpha = \\\\frac{\\\\text{Gegenkathete}}{\\\\text{Hypotenuse}}', erklaerung: 'Im rechtwinkligen Dreieck legt das Seitenverhältnis den Winkel fest. Der Taschenrechner kehrt den Sinus um.',\n        zeilen: [[`\\\\sin\\\\alpha = \\\\frac{${a}}{${c}}`, 'Verhältnis bilden'], [`\\\\sin\\\\alpha = ${(a / c).toFixed(2).replace('.', '{,}')}`, 'als Dezimalzahl'], [`\\\\alpha = \\\\sin^{-1}(${(a / c).toFixed(2).replace('.', '{,}')})`, 'Sinus umkehren'], [`\\\\alpha \\\\approx ${w}^\\\\circ`, 'der Winkel']] }; },\n      () => { const a = r(2, 5), n = r(3, 5), b = r(2, 9), c = r(1, 9); return { thema: 'Abitur · Ableitung', formel: 'f(x) = x^n \\\\;\\\\Rightarrow\\\\; f\\'(x) = n \\\\, x^{n-1}', erklaerung: 'Potenzregel: Hochzahl nach vorn, dann um eins verringern. Ein Faktor bleibt stehen, eine Zahl allein fällt weg.',\n        zeilen: [[`f(x) = ${a}x^${n} + ${b}x + ${c}`, 'Glied für Glied'], [`f'(x) = ${a} \\\\cdot ${n} \\\\, x^{${n} - 1} + ${b}`, 'Potenzregel'], [`f'(x) = ${a * n}x^${n - 1} + ${b}`, 'die Ableitung']] }; },\n      () => { const h = r(-4, 5), k = r(-5, 9); return { thema: 'Abitur · Extremstellen', formel: 'f\\'(x_0) = 0', erklaerung: 'Am Hoch- oder Tiefpunkt ist die Steigung null. Ableiten, gleich null setzen, nach x auflösen.',\n        zeilen: [[`f(x) = x^2${vz(-2 * h)}x${vz(k)}`, 'die Funktion'], [`f'(x) = 2x${vz(-2 * h)}`, 'ableiten'], [`0 = 2x${vz(-2 * h)}`, 'gleich null setzen'], [`x_0 = ${h}`, 'die Extremstelle']] }; },\n      () => { const a = p([3, 6, 9]), b = r(1, 4); return { thema: 'Abitur · Integral', formel: '\\\\int_a^b f(x)\\\\,dx = F(b) - F(a)', erklaerung: 'Das Integral ist die Fläche unter dem Graphen. Stammfunktion bilden, obere minus untere Grenze.',\n        zeilen: [[`\\\\int_0^{${b}} ${a}x^2 \\\\, dx`, 'Fläche von 0 bis ' + b], [`\\\\left[ ${a / 3}x^3 \\\\right]_0^{${b}}`, 'Stammfunktion'], [`${a / 3} \\\\cdot ${b}^3 - 0`, 'Grenzen einsetzen'], [`${a / 3 * b * b * b}`, 'Flächeneinheiten']] }; },\n      () => { const a = p([2, 3, 5, 10]), k = r(2, 5), v = Math.pow(a, k); return { thema: 'Abitur · Exponentialgleichungen', formel: 'a^x = b \\\\;\\\\Rightarrow\\\\; x = \\\\frac{\\\\ln b}{\\\\ln a}', erklaerung: 'Steht x im Exponenten, holt der Logarithmus es herunter. Beide Seiten logarithmieren, dann teilen.',\n        zeilen: [[`${a}^x = ${v}`, 'x im Exponenten'], [`x \\\\cdot \\\\ln ${a} = \\\\ln ${v}`, 'beide Seiten ln'], [`x = \\\\frac{\\\\ln ${v}}{\\\\ln ${a}}`, 'durch ln ' + a], [`x = ${k}`, `denn ${a}^${k} = ${v}`]] }; },\n      () => { const v = () => [r(-3, 5), r(-3, 5), r(-3, 5)], A = v(), B = v(), s = A[0] * B[0] + A[1] * B[1] + A[2] * B[2], pm = x => `\\\\begin{pmatrix} ${x[0]} \\\\\\\\ ${x[1]} \\\\\\\\ ${x[2]} \\\\end{pmatrix}`;\n        return { thema: 'Abitur · Vektoren', formel: '\\\\vec a \\\\cdot \\\\vec b = a_1 b_1 + a_2 b_2 + a_3 b_3', erklaerung: 'Das Skalarprodukt ist eine Zahl. Ist sie null, stehen die Vektoren senkrecht aufeinander.',\n        zeilen: [[`${pm(A)} \\\\cdot ${pm(B)}`, 'Skalarprodukt'], [`${A[0]} \\\\cdot (${B[0]}) + ${A[1]} \\\\cdot (${B[1]}) + ${A[2]} \\\\cdot (${B[2]})`, 'zeilenweise malnehmen'], [`${s}`, s === 0 ? 'null: senkrecht' : 'nicht senkrecht']] }; },\n      () => { const n = r(4, 8), k = r(2, n - 2), f = x => x ? x * f(x - 1) : 1, C = f(n) / (f(k) * f(n - k)); return { thema: 'Abitur · Stochastik', formel: '\\\\binom{n}{k} = \\\\frac{n!}{k!\\\\,(n-k)!}', erklaerung: 'Der Binomialkoeffizient zählt, wie viele Auswahlen von k aus n es gibt, ohne auf die Reihenfolge zu achten.',\n        zeilen: [[`\\\\binom{${n}}{${k}}`, `${k} aus ${n}`], [`\\\\frac{${n}!}{${k}! \\\\cdot ${n - k}!}`, 'Formel'], [`\\\\frac{${f(n)}}{${f(k)} \\\\cdot ${f(n - k)}}`, 'Fakultäten'], [`${C}`, 'Möglichkeiten']] }; },\n      () => { const rr = r(2, 9), A = (Math.PI * rr * rr).toFixed(2).replace('.', '{,}'); return { thema: 'Kreis', formel: 'A = \\\\pi \\\\cdot r^2', erklaerung: 'Die Kreisfläche wächst mit dem Quadrat des Radius. Doppelter Radius heißt vierfache Fläche.',\n        zeilen: [[`A = \\\\pi \\\\cdot ${rr}^2`, `Radius ${rr} cm`], [`A = \\\\pi \\\\cdot ${rr * rr}`, 'quadrieren'], [`A \\\\approx ${A}\\\\,\\\\text{cm}^2`, 'mit π ≈ 3,14159']] }; }\n    ];\n    let t; do { t = r(0, typen.length - 1); } while (t === this.letzter); this.letzter = t;\n    return typen[t]();\n  }\n  renderVals() { const s = this.state; return { zeilen: s.zeilen, opazitaet: s.opazitaet, thema: s.thema, erklaerung: s.erklaerung, formelRef: el => { this.formelEl = el; }, theme: this.props.theme ?? 'light', zeigeTafel: s.modus === 'tafel', zeigeFeld: s.modus === 'feld', feldV: s.feldV, feldFertig: () => this.feldFertig() }; }\n}\n</script>\n</body>\n</html>\n","AufgabenFeld":"<!DOCTYPE html>\n<html>\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-feld=\"{{ uid }}\" style=\"width:448px;display:flex;flex-direction:column;gap:24px;color:var(--textPrimary);font-family:var(--font-sans)\">\n<div style=\"height:24px;display:flex;align-items:center\"><span class=\"t-beschriftung\" style=\"color:var(--accentText)\">{{ tag }}</span></div>\n<sc-if value=\"{{ is_g }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 144H442M224 288V6\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"M436 139l7 5-7 5M219 12l5-7 5 7\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"{{ g.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ g.d }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ g.off }};opacity:{{ g.op }};transition:{{ g.tr }}\"></path></svg>\n<sc-for list=\"{{ g.tl }}\" as=\"t\" hint-placeholder-count=\"10\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:{{ t.y }}px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span class=\"t-meta\" style=\"position:absolute;left:430px;top:150px;font-style:italic;color:var(--textSecondary)\">x</span><span class=\"t-meta\" style=\"position:absolute;left:234px;top:-2px;font-style:italic;color:var(--textSecondary)\">y</span>\n<sc-for list=\"{{ g.pts }}\" as=\"p\" hint-placeholder-count=\"3\"><span style=\"position:absolute;left:{{ p.x }}px;top:{{ p.y }}px;width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accent);opacity:{{ p.op }};transform:scale({{ p.sc }});transition:{{ p.tr }}\"></span><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ p.lx }}px;top:{{ p.ly }}px;padding:2px 8px;font-weight:600;white-space:nowrap;color:var(--accentText);opacity:{{ p.op }};transition:{{ p.tr }}\">{{ p.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ g.op }};transition:opacity .4s\">{{ g.eq }}</span><span class=\"t-klein\" style=\"color:var(--textSecondary);opacity:{{ g.hop }};transition:opacity .4s\">{{ g.hint }}</span></div></sc-if>\n<sc-if value=\"{{ is_z }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><span class=\"t-fliesstext\" style=\"position:absolute;left:0;top:0;max-width:448px;color:var(--textSecondary);opacity:{{ z.op }};transition:opacity .4s\">{{ z.frage }}</span><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 224H448\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></path><path d=\"{{ z.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ z.d }}\" pathLength=\"1\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"stroke-dasharray:1;stroke-dashoffset:{{ z.off }};opacity:{{ z.op }};transition:{{ z.tr }}\"></path></svg>\n<sc-for list=\"{{ z.tl }}\" as=\"t\" hint-placeholder-count=\"5\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:240px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span style=\"position:absolute;left:{{ z.x1 }}px;top:224px;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--accent);opacity:{{ z.op }};transition:opacity .4s\"></span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ z.xm }}px;top:{{ z.ly }}px;transform:translate(-50%,0);font-weight:600;color:var(--accentText);opacity:{{ z.lop }};transition:{{ z.ltr }}\">{{ z.sprung }}</span>\n<span style=\"position:absolute;left:{{ z.x2 }}px;top:224px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:var(--radius-full);background:var(--success);opacity:{{ z.eop }};transform:scale({{ z.esc }});transition:{{ z.etr }}\"></span>\n<span class=\"t-titel t-ziffern\" style=\"position:absolute;left:{{ z.x2 }}px;top:176px;transform:translate(-50%,0);color:var(--successText);opacity:{{ z.eop }};transition:{{ z.etr }}\">{{ z.ziel }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:14px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ z.op }};transition:opacity .4s\">{{ z.eq }}</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ z.eop }};transition:{{ z.etr }}\">= {{ z.ziel }}</span></div></sc-if>\n<sc-if value=\"{{ is_py }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ py.op }};transition:opacity .4s\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><polygon points=\"{{ py.sa }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catGeometry);fill-opacity:{{ py.fa }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.sb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catAnalysis);fill-opacity:{{ py.fb }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.sc }}\" stroke=\"var(--catAlgebra)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:var(--catAlgebra);fill-opacity:{{ py.fc }};transition:{{ py.tr }}\"></polygon><polygon points=\"{{ py.tri }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linejoin=\"round\"></polygon><path d=\"{{ py.ra }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\"></path></svg>\n<sc-for list=\"{{ py.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;opacity:{{ l.op }};transition:{{ py.tr }}\"><span class=\"t-ziffern\" style=\"font-size:{{ l.fs }}px;line-height:1.1;font-weight:600;color:var(--textPrimary)\">{{ l.s }}</span><span class=\"t-meta\" style=\"color:var(--textSecondary)\">{{ l.n }}</span></span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ py.op }};transition:opacity .4s\">{{ py.eq }}</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;color:var(--accentText);opacity:{{ py.eop }};transition:{{ py.tr }}\">{{ py.rech }}</span></div></sc-if>\n<sc-if value=\"{{ is_w }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;perspective:1000px;opacity:{{ w.op }};transition:{{ w.otr }}\"><div style=\"position:absolute;left:128px;top:96px;width:96px;height:96px;transform-style:preserve-3d;transform-origin:48px 48px -48px;transform:{{ w.scene }};transition:{{ w.str }}\">\n<div style=\"position:absolute;inset:0;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:var(--error);transform-style:preserve-3d;display:flex;align-items:center;justify-content:center\"><span style=\"display:flex;color:#ffffff\"><svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z\"></path></svg></span>\n<div style=\"position:absolute;left:-2px;top:-98px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--pairIndigo) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:50% 100%;transform:{{ w.f1 }};transition:{{ w.t1 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">1</span></div>\n<div style=\"position:absolute;left:-2px;top:94px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--catGeometry) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:50% 0%;transform:{{ w.f6 }};transition:{{ w.t1 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">6</span></div>\n<div style=\"position:absolute;left:-98px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--pairTeal) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:100% 50%;transform:{{ w.f2 }};transition:{{ w.t0 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">2</span></div>\n<div style=\"position:absolute;left:94px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--warning) 82%, var(--surface));transform-style:preserve-3d;display:flex;align-items:center;justify-content:center;transform-origin:0% 50%;transform:{{ w.f4 }};transition:{{ w.t0 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">4</span>\n<div style=\"position:absolute;left:94px;top:-2px;width:96px;height:96px;box-sizing:border-box;border:2px solid color-mix(in srgb, var(--textPrimary) 30%, transparent);border-radius:6px;background:color-mix(in srgb, var(--catAlgebra) 82%, var(--surface));display:flex;align-items:center;justify-content:center;transform-origin:0% 50%;transform:{{ w.f5 }};transition:{{ w.t2 }}\"><span class=\"t-ziffern\" style=\"font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;color:#ffffff\">5</span><span style=\"position:absolute;inset:-2px;box-sizing:border-box;border:5px solid var(--success);border-radius:6px;opacity:{{ w.ring }};transition:opacity .35s\"></span></div></div>\n</div></div></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span style=\"font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.01em\">Was liegt gegenüber von Rot?</span><span class=\"t-titel t-ziffern\" style=\"display:flex;align-items:center;gap:6px;color:var(--successText);opacity:{{ w.ring }};transition:opacity .35s\"><svg width=\"22\" height=\"22\" 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>5</span></div></sc-if>\n<sc-if value=\"{{ is_q }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ q.op }};transition:{{ q.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ q.outline }}\" as=\"o\" hint-placeholder-count=\"3\"><polygon points=\"{{ o }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\" stroke-linejoin=\"round\"></polygon></sc-for><sc-for list=\"{{ q.cubes }}\" as=\"c\" hint-placeholder-count=\"24\"><g style=\"opacity:{{ c.op }};transform:{{ c.tf }};transition:{{ c.tr }}\"><polygon points=\"{{ c.top }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 45%, var(--surface))\"></polygon><polygon points=\"{{ c.left }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 78%, var(--surface))\"></polygon><polygon points=\"{{ c.right }}\" stroke=\"color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:var(--catGeometry)\"></polygon></g></sc-for></svg>\n<sc-for list=\"{{ q.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\">{{ l.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ q.op }};transition:{{ q.otr }}\">{{ q.eq }}</span><span style=\"display:grid\"><span class=\"t-titel t-ziffern\" style=\"grid-area:1/1;justify-self:end;color:var(--textSecondary);opacity:{{ q.cop }};transition:opacity .3s\">{{ q.count }}</span><span class=\"t-ziffern\" style=\"grid-area:1/1;justify-self:end;font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ q.rop }};transition:opacity .35s\">= {{ q.res }}</span></span></div></sc-if>\n<sc-if value=\"{{ is_k }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ k.op }};transition:{{ k.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ k.sectors }}\" as=\"s\" hint-placeholder-count=\"12\"><path d=\"{{ s.d }}\" stroke=\"{{ s.st }}\" stroke-width=\"1.5\" stroke-linejoin=\"round\" style=\"fill:{{ s.fill }};transform:{{ s.tf }};transition:{{ s.tr }}\"></path></sc-for><path d=\"M224 144H334\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linecap=\"round\" style=\"opacity:{{ k.rop }};transition:opacity .3s\"></path><circle cx=\"224\" cy=\"144\" r=\"4\" fill=\"var(--textPrimary)\" style=\"opacity:{{ k.rop }};transition:opacity .3s\"></circle><path d=\"{{ k.brace }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" style=\"opacity:{{ k.lop }};transition:opacity .35s\"></path></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:279px;top:118px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--textPrimary);opacity:{{ k.rop }};transition:opacity .3s\">r = {{ k.r }} cm</span>\n<span class=\"t-klein-betont\" style=\"position:absolute;left:224px;top:{{ k.by }}px;transform:translate(-50%,0);font-weight:600;white-space:nowrap;color:var(--textSecondary);opacity:{{ k.lop }};transition:opacity .35s\">π · r</span>\n<span class=\"t-klein-betont\" style=\"position:absolute;left:{{ k.rx }}px;top:{{ k.ry }}px;transform:translate(-100%,-50%);font-weight:600;color:var(--textSecondary);opacity:{{ k.lop }};transition:opacity .35s\">r</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ k.op }};transition:{{ k.otr }}\">A = π · r²</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;color:var(--successText);opacity:{{ k.lop }};transition:opacity .35s\">≈ {{ k.area }} cm²</span></div></sc-if>\n<sc-if value=\"{{ is_ta }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\">\n<path d=\"M4 144H156M80 64V224M176 144H444M176 64V224\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M242 140v8M308 140v8M374 140v8M440 140v8\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path>\n<circle cx=\"80\" cy=\"144\" r=\"68\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle>\n<g data-trig=\"a-grp\"><path data-trig=\"a-tcos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-opacity=\"0.55\"></path><path data-trig=\"a-tsin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"a-proj\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"a-arc\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path data-trig=\"a-ray\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path data-trig=\"a-cos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><path data-trig=\"a-sin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle data-trig=\"a-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle><circle data-trig=\"a-gdot\" r=\"6\" fill=\"var(--accent)\"></circle></g></svg>\n<span class=\"t-meta\" style=\"position:absolute;left:242px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">½π</span><span class=\"t-meta\" style=\"position:absolute;left:308px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">π</span><span class=\"t-meta\" style=\"position:absolute;left:374px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">1½π</span><span class=\"t-meta\" style=\"position:absolute;left:432px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">2π</span>\n<span class=\"t-klein-betont t-ziffern\" data-trig=\"a-vphi\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--textSecondary)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:28px\"><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--accent)\"></span><span class=\"t-ziffern\" data-trig=\"a-vsin\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--catGeometry)\"></span><span class=\"t-ziffern\" data-trig=\"a-vcos\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span></div></sc-if>\n<sc-if value=\"{{ is_te }}\" hint-placeholder-val=\"{{ false }}\"><div data-trig=\"e-all\" style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path data-trig=\"e-grid\" fill=\"none\" stroke=\"var(--divider)\" stroke-width=\"1.5\" stroke-linejoin=\"round\"></path><path data-trig=\"e-sin\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"3\" stroke-opacity=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-cos\" fill=\"none\" stroke=\"var(--catGeometry)\" stroke-width=\"3\" stroke-opacity=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-back\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-axes\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path data-trig=\"e-front\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"e-drop\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"e-vec\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><circle data-trig=\"e-ds\" r=\"5\" fill=\"var(--accent)\"></circle><circle data-trig=\"e-dc\" r=\"5\" fill=\"var(--catGeometry)\"></circle><circle data-trig=\"e-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle></svg><span class=\"t-klein-betont\" data-trig=\"e-lre\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">Re</span><span class=\"t-klein-betont\" data-trig=\"e-lim\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">Im</span><span class=\"t-klein-betont\" data-trig=\"e-lphi\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:600;color:var(--textSecondary)\">φ</span><span class=\"t-klein-betont\" data-trig=\"e-view\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--accentText)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:12px\"><span style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">e<sup style=\"font-size:18px\">iφ</sup> = <span style=\"color:var(--catGeometry)\">cos φ</span> + i · <span style=\"color:var(--accent)\">sin φ</span></span></div></sc-if>\n<sc-if value=\"{{ is_tc }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\">\n<path d=\"M4 144H156M80 64V224M180 144H444M180 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M136 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><path d=\"M245 8V280M375 8V280\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"3 5\"></path>\n<circle cx=\"80\" cy=\"144\" r=\"56\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle>\n<g data-trig=\"c-grp\"><path data-trig=\"c-trace\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"c-proj\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"></path><path data-trig=\"c-ext\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\"></path><path data-trig=\"c-ray\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path data-trig=\"c-tan\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle data-trig=\"c-dot\" r=\"6\" fill=\"var(--textPrimary)\"></circle><circle data-trig=\"c-idot\" fill=\"var(--catAnalysis)\"></circle><circle data-trig=\"c-gdot\" fill=\"var(--catAnalysis)\"></circle></g></svg>\n<span class=\"t-meta\" style=\"position:absolute;left:245px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">½π</span><span class=\"t-meta\" style=\"position:absolute;left:310px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">π</span><span class=\"t-meta\" style=\"position:absolute;left:375px;top:150px;transform:translate(-50%,0);color:var(--textTertiary)\">1½π</span><span class=\"t-meta\" style=\"position:absolute;left:142px;top:268px;color:var(--textTertiary)\">x = 1</span>\n<span class=\"t-klein-betont t-ziffern\" data-trig=\"c-vphi\" style=\"position:absolute;left:0;top:0;font-weight:600;color:var(--textSecondary)\"></span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span style=\"display:flex;align-items:center;gap:10px\"><span style=\"width:18px;height:5px;border-radius:3px;background:var(--catAnalysis)\"></span><span class=\"t-ziffern\" data-trig=\"c-vtan\" style=\"font-size:24px;line-height:32px;font-weight:600\"></span></span><span class=\"t-klein-betont\" style=\"font-weight:600;color:var(--textSecondary)\">tan φ = sin φ : cos φ</span></div></sc-if>\n<sc-if value=\"{{ is_td }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden;opacity:{{ ed.op }};transition:opacity .4s\"><div style=\"position:absolute;left:224px;top:144px;width:0;height:0;transform-style:preserve-3d;transform:{{ ed.scene }};transition:{{ ed.tr }}\">\n<sc-for list=\"{{ ed.axis }}\" as=\"pt\" hint-placeholder-count=\"40\"><span style=\"position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:var(--radius-full);background:var(--textTertiary);transform:{{ pt.tf }};transition:{{ ed.tr }}\"></span></sc-for>\n<sc-for list=\"{{ ed.dots }}\" as=\"pt\" hint-placeholder-count=\"120\"><span style=\"position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:var(--radius-full);background:{{ pt.c }};transform:{{ pt.tf }};transition:{{ ed.tr }}\"></span></sc-for>\n<sc-for list=\"{{ ed.labels }}\" as=\"l\" hint-placeholder-count=\"3\"><span class=\"t-klein-betont\" style=\"position:absolute;left:0;top:0;width:40px;height:20px;margin:-10px 0 0 -20px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--textSecondary);transform:{{ l.tf }};transition:{{ ed.tr }}\">{{ l.s }}</span></sc-for>\n</div><sc-for list=\"{{ ed.views }}\" as=\"vw\" hint-placeholder-count=\"5\"><span class=\"t-klein-betont\" style=\"position:absolute;right:0;bottom:0;font-weight:600;color:var(--accentText);opacity:{{ vw.op }};transition:{{ vw.tr }}\">{{ vw.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;gap:12px\"><span style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">e<sup style=\"font-size:18px\">iφ</sup> = <span style=\"color:var(--catGeometry)\">cos φ</span> + i · <span style=\"color:var(--accent)\">sin φ</span></span></div></sc-if>\n<sc-if value=\"{{ is_p2 }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ p2.op }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><rect x=\"8\" y=\"18\" width=\"252\" height=\"252\" style=\"fill:color-mix(in srgb, var(--accent) 30%, var(--surface));opacity:{{ p2.obg }}\"></rect><polygon points=\"{{ p2.ha }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 34%, var(--surface));opacity:{{ p2.oab }}\"></polygon><polygon points=\"{{ p2.hb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 34%, var(--surface));opacity:{{ p2.oab }}\"></polygon><polygon points=\"{{ p2.sqa }}\" stroke=\"var(--catGeometry)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catGeometry) 34%, var(--surface));opacity:{{ p2.osq }}\"></polygon><polygon points=\"{{ p2.sqb }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 34%, var(--surface));opacity:{{ p2.osq }}\"></polygon><polygon points=\"{{ p2.sqc }}\" stroke=\"var(--accent)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--accent) 30%, var(--surface));opacity:{{ p2.osqc }}\"></polygon><sc-for list=\"{{ p2.tris }}\" as=\"t\" hint-placeholder-count=\"4\"><polygon points=\"{{ t.pts }}\" stroke=\"var(--catLinearAlgebra)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catLinearAlgebra) 40%, var(--surface));opacity:{{ t.op }}\"></polygon></sc-for><path d=\"{{ p2.ra }}\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\"></path><rect x=\"8\" y=\"18\" width=\"252\" height=\"252\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" style=\"opacity:{{ p2.obg }}\"></rect></svg>\n<sc-for list=\"{{ p2.labels }}\" as=\"l\" hint-placeholder-count=\"9\"><span style=\"position:absolute;left:{{ l.x }}px;top:{{ l.y }}px;transform:translate(-50%,-50%);font-family:{{ l.ff }};font-size:{{ l.fs }}px;line-height:1;font-weight:{{ l.fw }};font-style:{{ l.st }};white-space:nowrap;color:var(--textPrimary);opacity:{{ l.op }}\">{{ l.s }}</span></sc-for>\n<div style=\"position:absolute;left:308px;top:18px;width:140px;height:252px\"><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;opacity:{{ p2.ot1 }}\"><span class=\"t-fliesstext\" style=\"text-wrap:pretty\">Ein rechtwinkliges Dreieck mit den Seiten a, b und c.</span><span class=\"t-fliesstext\" style=\"color:var(--textSecondary);text-wrap:pretty;opacity:{{ p2.ot1b }}\">Über jeder Seite ein Quadrat.</span></div><div style=\"position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:{{ p2.ot2 }}\"><span class=\"t-fliesstext\" style=\"text-wrap:pretty\">Vier solche Dreiecke im Quadrat, zweimal gelegt.</span><div style=\"display:flex;flex-direction:column;gap:6px\"><span class=\"t-beschriftung\" style=\"color:var(--textSecondary)\">Frei bleibt</span><span style=\"display:grid\"><span class=\"t-anzeige\" style=\"grid-area:1/1;font-size:40px;line-height:44px;white-space:nowrap;opacity:{{ p2.sc }}\">c²</span><span class=\"t-anzeige\" style=\"grid-area:1/1;font-size:40px;line-height:44px;white-space:nowrap;opacity:{{ p2.sab }}\">a² + b²</span></span></div></div></div></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ p2.op }}\">a² + b² = c²</span><span class=\"t-ziffern\" style=\"font-size:22px;line-height:28px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ p2.ores }}\">{{ p2.rech }}</span></div></sc-if>\n<sc-if value=\"{{ is_zy }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><g data-trig=\"zy-all\"><ellipse data-trig=\"zy-bot\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" style=\"fill:color-mix(in srgb, var(--accent) 50%, var(--surface))\"></ellipse><sc-for list=\"{{ zyStrips }}\" as=\"i\" hint-placeholder-count=\"60\"><path data-trig=\"zy-s\" stroke-width=\"0.8\"></path></sc-for><path data-trig=\"zy-ebk\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-dasharray=\"5 4\"></path><path data-trig=\"zy-edge\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linejoin=\"round\"></path><ellipse data-trig=\"zy-top\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" style=\"fill:color-mix(in srgb, var(--accent) 50%, var(--surface))\"></ellipse><path data-trig=\"zy-rad\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2\" stroke-linecap=\"round\"></path><circle data-trig=\"zy-c\" r=\"3.5\" fill=\"var(--textPrimary)\"></circle><path data-trig=\"zy-dim\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg><span class=\"t-klein-betont t-ziffern\" data-trig=\"zy-lr\" style=\"position:absolute;left:0;top:0;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\"></span><span class=\"t-klein-betont t-ziffern\" data-trig=\"zy-lh\" style=\"position:absolute;left:0;top:0;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\"></span><span class=\"t-klein-betont\" data-trig=\"zy-lu\" style=\"position:absolute;left:0;top:0;transform:translate(-50%,-100%);font-weight:600;white-space:nowrap;color:var(--textPrimary)\">2π · r</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"display:flex;align-items:baseline;gap:8px;font-size:26px;line-height:36px;font-weight:600;white-space:nowrap\">O =<span style=\"border-bottom:4px solid var(--accent)\">2 · πr²</span>+<span style=\"border-bottom:4px solid var(--catAnalysis)\">2πr · h</span></span><span class=\"t-ziffern\" data-trig=\"zy-res\" style=\"font-size:22px;line-height:28px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:0;transition:opacity .35s\"></span></div></sc-if>\n<sc-if value=\"{{ is_pz }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ pz.op }};transition:{{ pz.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M224 28V260\" stroke=\"var(--divider)\" stroke-width=\"2\"></path><sc-for list=\"{{ pz.arcs }}\" as=\"ar\" hint-placeholder-count=\"4\"><path d=\"{{ ar.d }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:{{ ar.op }};transition:opacity .4s\"></path></sc-for></svg>\n<div class=\"t-beschriftung\" style=\"position:absolute;left:96px;top:8px;width:108px;text-align:right;color:var(--textSecondary)\">Prozent</div><div class=\"t-beschriftung\" style=\"position:absolute;left:244px;top:8px;color:var(--textSecondary)\">Euro</div>\n<sc-for list=\"{{ pz.rows }}\" as=\"rw\" hint-placeholder-count=\"3\"><div style=\"position:absolute;left:96px;right:96px;top:{{ rw.y }}px;height:48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;opacity:{{ rw.op }};transform:translateY({{ rw.ty }}px);transition:opacity .45s, transform .45s\"><span class=\"t-ziffern\" style=\"font-size:26px;line-height:32px;font-weight:600;text-align:right;padding-right:20px;white-space:nowrap;color:{{ rw.c }}\">{{ rw.l }}</span><span class=\"t-ziffern\" style=\"font-size:26px;line-height:32px;font-weight:600;padding-left:20px;white-space:nowrap;color:{{ rw.c }}\">{{ rw.r }}</span></div></sc-for>\n<sc-for list=\"{{ pz.ops }}\" as=\"o2\" hint-placeholder-count=\"4\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ o2.x }}px;top:{{ o2.y }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--accentText);opacity:{{ o2.op }};transition:opacity .4s\">{{ o2.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ pz.op }};transition:{{ pz.otr }}\">{{ pz.eq }}</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ pz.rop }};transition:opacity .35s\">{{ pz.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_wa }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ wa.op }};transition:{{ wa.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path d=\"M44 124H404\" stroke=\"var(--textPrimary)\" stroke-width=\"3\" stroke-linecap=\"round\"></path><path d=\"M224 124l-20 44h40z\" fill=\"var(--textSecondary)\"></path><path d=\"M44 170H404\" stroke=\"var(--divider)\" stroke-width=\"1.5\"></path></svg>\n<sc-for list=\"{{ wa.left }}\" as=\"it\" hint-placeholder-count=\"5\"><sc-if value=\"{{ it.box }}\" hint-placeholder-val=\"{{ true }}\"><span class=\"t-klein-betont\" style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:30px;height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-style:italic;font-weight:600;border-radius:6px;background:{{ it.bg }};color:#ffffff;transition:{{ wa.tr }}\">x</span></sc-if><sc-if value=\"{{ it.circ }}\" hint-placeholder-val=\"{{ false }}\"><span style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--textSecondary);opacity:{{ it.op }};transform:{{ it.tf }};transition:{{ wa.tr }}\"></span></sc-if></sc-for>\n<sc-for list=\"{{ wa.right }}\" as=\"it\" hint-placeholder-count=\"11\"><span style=\"position:absolute;left:{{ it.x }}px;top:{{ it.y }}px;width:14px;height:14px;border-radius:var(--radius-full);background:{{ it.bg }};opacity:{{ it.op }};transform:{{ it.tf }};transition:{{ wa.tr }}\"></span></sc-for>\n<span class=\"t-klein\" style=\"position:absolute;left:0;right:0;top:200px;text-align:center;color:var(--textSecondary);opacity:{{ wa.nop }};transition:opacity .3s\">{{ wa.note }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;color:{{ wa.eqc }};opacity:{{ wa.op }};transition:{{ wa.otr }}\">{{ wa.eq }}</span></div></sc-if>\n<sc-if value=\"{{ is_ur }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ ur.op }};transition:{{ ur.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0\" aria-hidden=\"true\"><path d=\"M124 40h200v180a24 24 0 0 1-24 24H148a24 24 0 0 1-24-24z\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\" style=\"opacity:{{ ur.jop }};transition:opacity .4s\"></path></svg>\n<sc-for list=\"{{ ur.balls }}\" as=\"b\" hint-placeholder-count=\"8\"><span style=\"position:absolute;left:{{ b.x }}px;top:{{ b.y }}px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:var(--radius-full);background:{{ b.c }};opacity:{{ b.dim }};transition:{{ ur.tr }}\"></span></sc-for>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:0;right:0;top:200px;text-align:center;font-weight:600;color:var(--successText);opacity:{{ ur.bop }};transition:opacity .35s\">{{ ur.nb }} von {{ ur.N }} Kugeln sind blau</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ ur.op }};transition:{{ ur.otr }}\">P(blau)</span><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ ur.bop }};transition:opacity .35s\">{{ ur.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_st }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ st.op }};transition:{{ st.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M20 240H428\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></path><path d=\"{{ st.s2 }}\" stroke=\"var(--textTertiary)\" stroke-width=\"6\" stroke-linecap=\"round\"></path><path d=\"{{ st.s1 }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"6\" stroke-linecap=\"round\"></path><path d=\"{{ st.ray }}\" stroke=\"var(--warning)\" stroke-width=\"1.5\" stroke-dasharray=\"5 5\"></path><path d=\"{{ st.small }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"2\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 30%, transparent);transform-box:view-box;transform-origin:{{ st.gx }}px {{ st.gy }}px;transform:scale({{ st.sc }});transition:{{ st.str }};opacity:{{ st.sop }}\"></path><path d=\"{{ st.tree }}\" stroke=\"var(--accent)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-dasharray=\"{{ st.dash }}\" style=\"opacity:{{ st.top }};transition:opacity .4s\"></path><circle cx=\"{{ st.px }}\" cy=\"{{ st.hy }}\" r=\"7\" fill=\"var(--textPrimary)\"></circle><path d=\"{{ st.body }}\" stroke=\"var(--textPrimary)\" stroke-width=\"3\" stroke-linecap=\"round\"></path></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ st.tlx }}px;top:{{ st.tly }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:{{ st.hc }}\">{{ st.hlab }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ st.plx }}px;top:{{ st.ply }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--textSecondary)\">{{ st.l1 }}</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ st.m1 }}px;top:248px;transform:translateX(-50%);white-space:nowrap;color:var(--catAnalysis)\">{{ st.ls1 }}</span>\n<span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ st.m2 }}px;top:266px;transform:translateX(-50%);white-space:nowrap;color:var(--textTertiary)\">Schatten {{ st.ls2 }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;opacity:{{ st.op }};transition:{{ st.otr }}\">{{ st.eq }}</span><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;color:var(--successText);opacity:{{ st.rop }};transition:opacity .35s\">{{ st.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_sp }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ sp.op }};transition:{{ sp.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M0 144H442M224 288V6\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"M436 139l7 5-7 5M219 12l5-7 5 7\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"{{ sp.ticks }}\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\"></path><path d=\"{{ sp.path }}\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"2.5\" stroke-dasharray=\"5 5\" stroke-linecap=\"round\" style=\"opacity:{{ sp.gop }};transition:opacity .6s\"></path><path d=\"{{ sp.path }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"4\" stroke-linecap=\"round\" style=\"transform:{{ sp.tf }};transition:{{ sp.str }}\"></path></svg>\n<sc-for list=\"{{ sp.tl }}\" as=\"t\" hint-placeholder-count=\"10\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ t.x }}px;top:{{ t.y }}px;transform:translate(-50%,0);color:var(--textTertiary)\">{{ t.s }}</span></sc-for>\n<span style=\"position:absolute;left:{{ sp.vx }}px;top:{{ sp.vy }}px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--radius-full);background:var(--success);opacity:{{ sp.vop }};transition:opacity .35s\"></span><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ sp.lx }}px;top:{{ sp.ly }}px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ sp.vop }};transition:opacity .35s\">{{ sp.vs }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ sp.op }};transition:{{ sp.otr }}\">{{ sp.eq }}</span><span class=\"t-klein\" style=\"text-align:right;color:var(--textSecondary);opacity:{{ sp.hop }};transition:opacity .4s\">{{ sp.hint }}</span></div></sc-if>\n<sc-if value=\"{{ is_si }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ si.op }};transition:{{ si.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><path d=\"M104 160H344M224 40V280\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\"></path><circle cx=\"224\" cy=\"160\" r=\"100\" fill=\"none\" stroke=\"var(--textSecondary)\" stroke-width=\"2\"></circle><path d=\"{{ si.arcA }}\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"></path><path d=\"M224 160L{{ si.ax }} {{ si.ay }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path d=\"{{ si.hA }}\" stroke=\"var(--accent)\" stroke-width=\"5\" stroke-linecap=\"round\" style=\"opacity:{{ si.hAop }};transition:opacity .4s\"></path><path d=\"{{ si.hA }}\" stroke=\"var(--textTertiary)\" stroke-width=\"2\" stroke-dasharray=\"4 4\" style=\"opacity:{{ si.qop }};transition:opacity .4s\"></path><g style=\"opacity:{{ si.bop }};transition:opacity .4s\"><path d=\"{{ si.arcB }}\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"2.5\"></path><path d=\"M224 160L{{ si.bx }} {{ si.by }}\" stroke=\"var(--textPrimary)\" stroke-width=\"2\"></path><path d=\"{{ si.hB }}\" stroke=\"var(--catAnalysis)\" stroke-width=\"5\" stroke-linecap=\"round\"></path><circle cx=\"{{ si.bx }}\" cy=\"{{ si.by }}\" r=\"6\" fill=\"var(--textPrimary)\"></circle></g><path d=\"{{ si.mirror }}\" stroke=\"var(--textSecondary)\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\" style=\"opacity:{{ si.mop }};transition:opacity .4s\"></path><circle cx=\"{{ si.ax }}\" cy=\"{{ si.ay }}\" r=\"6\" fill=\"var(--textPrimary)\"></circle></svg>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.lax }}px;top:{{ si.lay }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--accentText)\">{{ si.labA }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.lbx }}px;top:{{ si.lby }}px;transform:translate(-50%,-50%);font-weight:600;white-space:nowrap;color:var(--catAnalysis);opacity:{{ si.bop }};transition:opacity .4s\">{{ si.labB }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vbx }}px;top:{{ si.vby }}px;transform:translate(0,-50%);font-weight:600;white-space:nowrap;color:var(--catAnalysis);opacity:{{ si.bop }};transition:opacity .4s\">{{ si.sv }}</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vax }}px;top:{{ si.vby }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--textPrimary);opacity:{{ si.qop }};transition:opacity .4s\">?</span>\n<span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ si.vax }}px;top:{{ si.vby }}px;transform:translate(-100%,-50%);font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ si.hAop }};transition:opacity .4s\">{{ si.sv }}</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ si.op }};transition:{{ si.otr }}\">{{ si.eq }}</span><span class=\"t-ziffern\" style=\"font-size:26px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ si.hAop }};transition:opacity .35s\">{{ si.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_bd }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;opacity:{{ bd.op }};transition:{{ bd.otr }}\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><sc-for list=\"{{ bd.edges }}\" as=\"e\" hint-placeholder-count=\"6\"><path d=\"{{ e.d }}\" fill=\"none\" stroke=\"{{ e.c }}\" stroke-width=\"{{ e.w }}\" stroke-linecap=\"round\" style=\"opacity:{{ e.op }};transition:opacity .4s, stroke .4s\"></path></sc-for></svg>\n<sc-for list=\"{{ bd.edges }}\" as=\"e\" hint-placeholder-count=\"6\"><span class=\"t-klein-betont t-ziffern\" style=\"position:absolute;left:{{ e.lx }}px;top:{{ e.ly }}px;transform:translate(-50%,-50%);padding:0 4px;font-weight:600;color:{{ e.lc }};opacity:{{ e.op }};transition:opacity .4s\">½</span></sc-for>\n<sc-for list=\"{{ bd.nodes }}\" as=\"n\" hint-placeholder-count=\"7\"><span class=\"t-kartentitel\" style=\"position:absolute;left:{{ n.x }}px;top:{{ n.y }}px;width:40px;height:40px;margin:-20px 0 0 -20px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:600;border-radius:var(--radius-full);background:{{ n.bg }};border:2px solid {{ n.bc }};color:var(--textPrimary);opacity:{{ n.op }};transition:opacity .4s, background .4s, border-color .4s\">{{ n.s }}</span></sc-for>\n<sc-for list=\"{{ bd.ends }}\" as=\"n\" hint-placeholder-count=\"4\"><span class=\"t-meta t-ziffern\" style=\"position:absolute;left:{{ n.x }}px;top:{{ n.y }}px;transform:translate(0,-50%);white-space:nowrap;color:{{ n.c }};opacity:{{ n.op }};transition:opacity .4s\">{{ n.s }}</span></sc-for></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;opacity:{{ bd.op }};transition:{{ bd.otr }}\">{{ bd.eq }}</span><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:{{ bd.rop }};transition:opacity .35s\">{{ bd.res }}</span></div></sc-if>\n<sc-if value=\"{{ is_pr }}\" hint-placeholder-val=\"{{ false }}\"><div style=\"position:relative;width:448px;height:288px;overflow:hidden\"><svg width=\"448\" height=\"288\" viewBox=\"0 0 448 288\" style=\"position:absolute;inset:0;overflow:visible\" aria-hidden=\"true\"><g data-trig=\"pr-all\"><path data-trig=\"pr-hid\" fill=\"none\" stroke=\"var(--textTertiary)\" stroke-width=\"1.5\" stroke-dasharray=\"5 4\"></path><path data-trig=\"pr-l\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 78%, var(--surface))\"></path><path data-trig=\"pr-r\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:var(--catAnalysis)\"></path><path data-trig=\"pr-t\" stroke=\"none\" stroke-linejoin=\"round\" style=\"fill:color-mix(in srgb, var(--catAnalysis) 45%, var(--surface))\"></path><path data-trig=\"pr-vis\" fill=\"none\" stroke=\"var(--textPrimary)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path data-trig=\"pr-arr\" d=\"M150 58Q224 -6 298 50M298 50l-13 -1M298 50l-6 -11\" fill=\"none\" stroke=\"var(--catAnalysis)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:0\"></path></g></svg><span class=\"t-klein-betont t-ziffern\" data-trig=\"pr-lab\" style=\"position:absolute;left:0;top:0;white-space:nowrap;font-weight:600;color:var(--textSecondary)\"></span><span class=\"t-meta\" style=\"position:absolute;left:124px;top:270px;transform:translate(-50%,0);color:var(--textTertiary)\">Pyramide</span><span class=\"t-meta\" style=\"position:absolute;left:324px;top:270px;transform:translate(-50%,0);color:var(--textTertiary)\">Quader</span></div>\n<div style=\"height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px\"><span class=\"t-ziffern\" style=\"font-size:30px;line-height:40px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap\">V = ⅓ · G · h</span><span style=\"display:grid\"><span class=\"t-titel t-ziffern\" data-trig=\"pr-cnt\" style=\"grid-area:1/1;justify-self:end;white-space:nowrap;color:var(--textSecondary);opacity:0;transition:opacity .3s\"></span><span class=\"t-ziffern\" data-trig=\"pr-res\" style=\"grid-area:1/1;justify-self:end;font-size:30px;line-height:40px;font-weight:600;white-space:nowrap;color:var(--successText);opacity:0;transition:opacity .35s\"></span></span></div></sc-if>\n</div>\n</x-dc>\n<script type=\"text/x-dc\" data-dc-script data-props=\"{&quot;$preview&quot;:{&quot;width&quot;:448,&quot;height&quot;:408},&quot;variante&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;string&quot;},&quot;onDone&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;() => void&quot;},&quot;index&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;halt&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;ende&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number&quot;},&quot;loese&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;boolean&quot;},&quot;pool&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;number[]&quot;}}\">\nclass Component extends DCLogic {\n  uid = 'f' + Math.random().toString(36).slice(2, 9);\n  timers = {};\n  SPEC = { g: { d: [60, 1500, 2600, 500], n: 4 }, z: { d: [60, 1000, 2600, 500], n: 5 }, py: { d: [60, 700, 700, 800, 2600, 500], n: 3 }, w: { d: [60, 1400, 1500, 1900, 2800, 500], n: 1 }, q: { d: [60, 800, 2000, 2600, 500], n: 3 }, k: { d: [60, 1500, 1800, 2800, 500], n: 3 }, td: { d: [60, 2800, 2800, 2800, 2800, 2400, 500], n: 1 }, ta: { loop: 8000 }, tc: { loop: 8000 }, te: { loop: 16000 }, zy: { loop: 9000 }, pr: { loop: 9600 }, p2: { loop: 13900 }, pz: { d: [60, 1400, 1600, 2600, 500], n: 3 }, wa: { d: [60, 1500, 1800, 1800, 2600, 500], n: 3 }, ur: { d: [60, 1400, 1600, 2600, 500], n: 3 }, st: { d: [60, 1400, 1500, 1800, 2600, 500], n: 3 }, sp: { d: [60, 1400, 1600, 2600, 500], n: 3 }, si: { d: [60, 1500, 1700, 2600, 500], n: 3 }, bd: { d: [60, 1500, 1800, 2600, 500], n: 3 } };\n  ZS = Array.from({ length: 60 }, (_, i) => i);\n  ZO = Array.from({ length: 60 }, (_, i) => i).sort((a, b) => Math.cos(-Math.PI + 2 * Math.PI * (a + 0.5) / 60) - Math.cos(-Math.PI + 2 * Math.PI * (b + 0.5) / 60));\n  TAGS = {\"z\":\"Klasse 7 · Rationale Zahlen\",\"py\":\"Klasse 8 · Satz des Pythagoras\",\"w\":\"Körper · Würfelnetz\",\"q\":\"Körper · Volumen des Quaders\",\"k\":\"Klasse 8 · Kreis\",\"ta\":\"Klasse 10 · Sinus und Kosinus\",\"te\":\"Ausblick · Eulersche Formel\",\"tc\":\"Klasse 10 · Tangens\",\"td\":\"Ausblick · Eulersche Formel\",\"zy\":\"Körper · Zylinder\",\"pr\":\"Körper · Pyramide\",\"p2\":\"Klasse 8 · Satz des Pythagoras\",\"g\":\"Klasse 8 · Lineare Funktionen\",\"pz\":\"Klasse 7 · Prozentrechnung\",\"wa\":\"Klasse 7 · Gleichungen\",\"ur\":\"Klasse 8 · Wahrscheinlichkeit\",\"st\":\"Klasse 9 · Strahlensätze\",\"sp\":\"Klasse 9 · Quadratische Funktionen\",\"si\":\"Klasse 10 · Trigonometrie\",\"bd\":\"Klasse 10 · Zufallsversuche\"};\n  state = { v: null, i: 0, p: 0, t: 0 };\n  cur() { return this.props.variante || this.state.auto || 'g'; }\n  componentDidMount() {\n    this.sichtbar = true;\n    const el = document.querySelector('[data-feld=\"' + this.uid + '\"]');\n    if (el && 'IntersectionObserver' in window) { this.io = new IntersectionObserver(es => { this.sichtbar = es.some(e => e.isIntersecting); }, { rootMargin: '200px' }); this.io.observe(el); }\n    this.start();\n  }\n  componentDidUpdate(pp) { if (pp.variante !== this.props.variante || pp.loese !== this.props.loese || pp.halt !== this.props.halt || pp.index !== this.props.index || JSON.stringify(pp.pool) !== JSON.stringify(this.props.pool)) this.start(); }\n  task() { return this.props.halt != null; }\n  componentWillUnmount() { this.dead = true; this.stop(); if (this.io) this.io.disconnect(); }\n  stop() { clearTimeout(this.timers.s); clearInterval(this.timers.q); cancelAnimationFrame(this.raf); }\n  done() {\n    if (this.dead) return;\n    if (this.props.onDone) { this.props.onDone(); return; }\n    const ks = Object.keys(this.SPEC).filter(k => k !== this.cur());\n    this.setState({ auto: ks[Math.floor(Math.random() * ks.length)] }, () => this.start());\n  }\n  start() {\n    this.stop();\n    if (!this.SPEC[this.cur()].loop) this.lastV = this.cur();\n    const v = this.cur(), sp = this.SPEC[v], task = this.task(), loese = !!this.props.loese, ix = +(this.props.index ?? 0), pool = Array.isArray(this.props.pool) && this.props.pool.length ? this.props.pool : null, pick = () => pool[Math.floor(Math.random() * pool.length)];\n    this.t0 = performance.now();\n    if (sp.loop) {\n      const rnd = a => a[Math.floor(Math.random() * a.length)], ZY = [[3, 5], [2, 6], [4, 4]], PR = [[6, 9], [3, 4], [6, 5]], P2 = [[3, 4, 5], [6, 8, 10], [9, 12, 15]];\n      this.zyN = task ? ZY[ix % 3] : pool ? ZY[pick() % 3] : rnd(ZY); this.prN = task ? PR[ix % 3] : pool ? PR[pick() % 3] : rnd(PR); this.p2N = task ? P2[ix % 3] : pool ? P2[pick() % 3] : rnd(P2);\n      this.setState({ v, i: 0, p: 0 });\n      if (!task && v === 'p2' && this.lastV === 'p2') this.t0 -= 3400;\n      this.lastV = v;\n      const halt = +this.props.halt || 0, ende = this.props.ende != null ? +this.props.ende : sp.loop;\n      if (task) this.t0 -= halt;\n      const loop = now => {\n        let t = now;\n        if (task) { if (!loese) t = this.t0 + halt; else if (now - this.t0 >= ende) { this.t0 = now - ende; } }\n        else if (now - this.t0 >= sp.loop) { this.done(); return; }\n        if (this.sichtbar !== false) { try { this.trig(v, t); } catch (e) {} }\n        this.raf = requestAnimationFrame(loop); };\n      this.raf = requestAnimationFrame(loop);\n      return;\n    }\n    if (task) {\n      const ende = this.props.ende != null ? +this.props.ende : sp.d.length - 2;\n      let p = +this.props.halt || 0;\n      const step = () => { this.setState({ v, i: ix % sp.n, p, t: Date.now() }); if (!loese || p >= ende) return; const d = sp.d[p]; p++; this.timers.s = setTimeout(step, d); };\n      step();\n      if (v === 'q') this.timers.q = setInterval(() => { if (this.state.p === 2 && this.sichtbar !== false) this.forceUpdate(); }, 60);\n      return;\n    }\n    let i = pool ? pick() % sp.n : Math.floor(Math.random() * sp.n), p = 0, rounds = 0;\n    const R = sp.n > 1 && !pool ? 2 : 1;\n    const step = () => { if (rounds >= R) { this.done(); return; } this.setState({ v, i, p, t: Date.now() }); const d = sp.d[p]; p++; if (p >= sp.d.length) { p = 0; i = (i + 1) % sp.n; rounds++; } this.timers.s = setTimeout(step, d); };\n    step();\n    if (v === 'q') this.timers.q = setInterval(() => { if (this.state.p === 2 && this.sichtbar !== false) this.forceUpdate(); }, 60);\n  }\n  trig(v, now) {\n    const T = 8000, el = (now - this.t0) % T, prog = Math.min(1, el / 6400), ph = prog * 2 * Math.PI, fade = el > 7500 ? Math.max(0, (T - el) / 500) : el < 250 ? el / 250 : 1;\n    const rt = document.querySelector('[data-feld=\"' + this.uid + '\"]'), all = s => rt ? rt.querySelectorAll('[data-trig=\"' + s + '\"]') : [];\n    const set = (s, a, val) => all(s).forEach(n => n.setAttribute(a, val));\n    const txt = (s, val) => all(s).forEach(n => { if (n.textContent !== val) n.textContent = val; });\n    const f2 = x => (x < -0.005 ? '−' : '') + Math.abs(x).toFixed(2).replace('.', ',');\n    const r1 = x => Math.round(x * 10) / 10, deg = Math.round(ph * 180 / Math.PI);\n    if (v === 'p2') { this.forceUpdate(); return; }\n    if (v === 'ta') {\n    // 3a\n    const cx = 80, cy = 144, R = 68, gx0 = 176, gw = 264, px = cx + R * Math.cos(ph), py = cy - R * Math.sin(ph), gx = gx0 + prog * gw;\n    let ds = '', dc = '';\n    for (let a = 0; a <= ph + 1e-6; a += 0.04) { const x = r1(gx0 + a / (2 * Math.PI) * gw); ds += (ds ? 'L' : 'M') + x + ' ' + r1(cy - R * Math.sin(a)); dc += (dc ? 'L' : 'M') + x + ' ' + r1(cy - R * Math.cos(a)); }\n    ds += `L${r1(gx)} ${r1(py)}`; dc += `L${r1(gx)} ${r1(cy - R * Math.cos(ph))}`;\n    all('a-grp').forEach(n => n.style.opacity = fade);\n    set('a-tsin', 'd', ds); set('a-tcos', 'd', dc);\n    set('a-ray', 'd', `M${cx} ${cy}L${r1(px)} ${r1(py)}`);\n    set('a-sin', 'd', `M${r1(px)} ${cy}L${r1(px)} ${r1(py)}`);\n    set('a-cos', 'd', `M${cx} ${cy}L${r1(px)} ${cy}`);\n    set('a-proj', 'd', `M${r1(px)} ${r1(py)}L${r1(gx)} ${r1(py)}`);\n    const ar = 20; set('a-arc', 'd', ph < 0.02 ? '' : `M${cx + ar} ${cy}A${ar} ${ar} 0 ${ph > Math.PI ? 1 : 0} 0 ${r1(cx + ar * Math.cos(ph))} ${r1(cy - ar * Math.sin(ph))}`);\n    set('a-dot', 'cx', r1(px)); set('a-dot', 'cy', r1(py)); set('a-gdot', 'cx', r1(gx)); set('a-gdot', 'cy', r1(py));\n    txt('a-vsin', 'sin φ = ' + f2(Math.sin(ph))); txt('a-vcos', 'cos φ = ' + f2(Math.cos(ph))); txt('a-vphi', 'φ = ' + deg + '°');\n    \n    }\n    if (v === 'tc') {\n    const cx = 80, cy = 144;\n    // 3c\n    const R2 = 56, X1 = cx + R2, g0 = 180, gw2 = 260, top = 8, bot = 280, clamp = y => Math.max(top, Math.min(bot, y));\n    const qx = cx + R2 * Math.cos(ph), qy = cy - R2 * Math.sin(ph), t = Math.tan(ph), iy = cy - R2 * t, inb = iy >= top && iy <= bot && Math.abs(Math.cos(ph)) > 0.01;\n    let dt = '', pen = false, last = null;\n    for (let a = 0; a <= ph + 1e-6; a += 0.012) { const y = cy - R2 * Math.tan(a), ok = y >= top - 40 && y <= bot + 40 && Math.abs(Math.cos(a)) > 0.02; if (ok && last !== null && Math.abs(y - last) > 200) pen = false; if (ok) { dt += (pen ? 'L' : 'M') + r1(g0 + a / (2 * Math.PI) * gw2) + ' ' + r1(y); pen = true; last = y; } else { pen = false; last = null; } }\n    all('c-grp').forEach(n => n.style.opacity = fade);\n    set('c-trace', 'd', dt);\n    set('c-ray', 'd', `M${cx} ${cy}L${r1(qx)} ${r1(qy)}`);\n    const ey = clamp(iy), ex = Math.abs(t) < 1e-9 ? X1 : cx + (cy - ey) / (t || 1e-9);\n    set('c-ext', 'd', Math.abs(Math.cos(ph)) < 0.01 ? `M${cx} ${cy}L${cx} ${Math.sin(ph) > 0 ? top : bot}` : `M${cx} ${cy}L${r1(inb ? X1 : ex)} ${r1(ey)}`);\n    set('c-tan', 'd', `M${X1} ${cy}L${X1} ${r1(ey)}`);\n    set('c-dot', 'cx', r1(qx)); set('c-dot', 'cy', r1(qy));\n    set('c-idot', 'cx', X1); set('c-idot', 'cy', r1(ey)); set('c-idot', 'r', inb ? 6 : 0);\n    const gq = g0 + prog * gw2; set('c-gdot', 'cx', r1(gq)); set('c-gdot', 'cy', r1(ey)); set('c-gdot', 'r', inb ? 6 : 0);\n    set('c-proj', 'd', inb ? `M${X1} ${r1(iy)}L${r1(gq)} ${r1(iy)}` : '');\n    txt('c-vtan', Math.abs(Math.cos(ph)) < 0.02 ? 'tan φ = nicht definiert' : 'tan φ = ' + f2(t)); txt('c-vphi', 'φ = ' + deg + '°');\n    \n    }\n    if (v === 'te') {\n    // 3b Euler\n    const EL = 150, EA = 72, W = 104, ET = 16000, seg = 3200, et = (now - this.t0) % ET, si = Math.floor(et / seg), stt = et % seg;\n    const PO = [[90, 0, 'Von vorne: ein Kreis'], [36, -22, 'Schräg: eine Schraube'], [0, 0, 'Von der Seite: sin φ'], [0, -90, 'Von oben: cos φ'], [-36, -22, 'Schräg: eine Schraube']];\n    const ez = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2, kk = stt < 1800 ? 0 : ez((stt - 1800) / 1400), A = PO[si], B = PO[(si + 1) % PO.length];\n    const yb = (A[0] + (B[0] - A[0]) * kk) * Math.PI / 180, pa = (A[1] + (B[1] - A[1]) * kk) * Math.PI / 180, cb = Math.cos(yb), sb = Math.sin(yb), ca = Math.cos(pa), sa = Math.sin(pa);\n    const pr = (x, y, zz) => { const x1 = x * cb + zz * sb, z1 = -x * sb + zz * cb, y2 = y * ca + z1 * sa, z2 = -y * sa + z1 * ca, f = 1800 / (1800 - z2); return [224 + x1 * f, 144 - y2 * f, z2]; };\n    const M = p => r1(p[0]) + ' ' + r1(p[1]), poly = pts => 'M' + pts.map(M).join('L');\n    const H = u => [-EL + u * 2 * EL, EA * Math.sin(u * 4 * Math.PI), EA * Math.cos(u * 4 * Math.PI)];\n    let dsn = '', dcs = '', dbk = '', dfr = '', prev = null, pz = null;\n    const N = 200;\n    for (let n = 0; n <= N; n++) { const u = n / N, [x, y, zz] = H(u), p = pr(x, y, zz);\n      dsn += (n ? 'L' : 'M') + M(pr(x, y, -W)); dcs += (n ? 'L' : 'M') + M(pr(x, -W, zz));\n      if (prev) { const front = (p[2] + pz) / 2 >= -10; const seg2 = 'M' + M(prev) + 'L' + M(p); if (front) dfr += seg2; else dbk += seg2; }\n      prev = p; pz = p[2]; }\n    set('e-sin', 'd', dsn); set('e-cos', 'd', dcs); set('e-back', 'd', dbk); set('e-front', 'd', dfr);\n    set('e-grid', 'd', poly([pr(-EL, -W, -W), pr(EL, -W, -W), pr(EL, W, -W), pr(-EL, W, -W)]) + 'Z' + poly([pr(-EL, -W, -W), pr(-EL, -W, W), pr(EL, -W, W), pr(EL, -W, -W)]));\n    set('e-axes', 'd', poly([pr(-EL - 20, 0, 0), pr(EL + 20, 0, 0)]) + poly([pr(-EL, 0, -W), pr(-EL, 0, W)]) + poly([pr(-EL, -W, 0), pr(-EL, W, 0)]));\n    const uu = ((now - this.t0) % 8000) / 8000, [hx, hy, hz] = H(uu), hp = pr(hx, hy, hz), ps = pr(hx, hy, -W), pc = pr(hx, -W, hz);\n    set('e-vec', 'd', 'M' + M(pr(hx, 0, 0)) + 'L' + M(hp)); set('e-drop', 'd', 'M' + M(hp) + 'L' + M(ps) + 'M' + M(hp) + 'L' + M(pc));\n    set('e-dot', 'cx', r1(hp[0])); set('e-dot', 'cy', r1(hp[1])); set('e-ds', 'cx', r1(ps[0])); set('e-ds', 'cy', r1(ps[1])); set('e-dc', 'cx', r1(pc[0])); set('e-dc', 'cy', r1(pc[1]));\n    const pos = (s2, p) => all(s2).forEach(n => { n.style.left = r1(p[0]) + 'px'; n.style.top = Math.max(40, r1(p[1])) + 'px'; });\n    pos('e-lre', pr(-EL, 0, W + 22)); pos('e-lim', pr(-EL, W + 18, 0)); pos('e-lphi', pr(EL + 36, 0, 0));\n    txt('e-view', kk < 0.5 ? A[2] : B[2]); all('e-view').forEach(n => n.style.opacity = stt < 1800 ? 1 : Math.abs(kk - 0.5) * 2);\n    all('e-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, (now - this.t0) / 400, (ET - (now - this.t0)) / 400)));\n\n    }\n    if (v === 'zy') {\n      const L = 9000, e = now - this.t0, E = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2, PI = Math.PI;\n      const t = e < 1500 ? 0 : e < 3300 ? E((e - 1500) / 1800) : e < 6200 ? 1 : e < 7800 ? 1 - E((e - 6200) / 1600) : 0;\n      all('zy-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, e / 300, (L - e) / 400)));\n      const [rn, hn] = this.zyN || [3, 5], R1 = 40, Rr = R1 * (1.7 - 0.7 * t), Hh = 100 * (1.7 - 0.7 * t), ry = 0.32 * Rr, cx = 224, yT = 144 - Hh / 2;\n      const X = th => cx + (1 - t) * Rr * Math.sin(th) + t * Rr * th, OY = th => (1 - t) * ry * Math.cos(th);\n      all('zy-s').forEach((nd, k) => { const i = this.ZO[k], a0 = -PI + 2 * PI * i / 60, a1 = a0 + 2 * PI / 60, x0 = r1(X(a0)), x1 = r1(X(a1));\n        nd.setAttribute('d', 'M' + x0 + ' ' + r1(yT + OY(a0)) + 'L' + x1 + ' ' + r1(yT + OY(a1)) + 'L' + x1 + ' ' + r1(yT + Hh + OY(a1)) + 'L' + x0 + ' ' + r1(yT + Hh + OY(a0)) + 'Z');\n        const pc = Math.round(72 + (1 - t) * 24 * Math.sin((a0 + a1) / 2 + 0.5)), c = 'color-mix(in srgb, var(--catAnalysis) ' + pc + '%, var(--surface))';\n        if (nd._c !== c) { nd.style.fill = c; nd.style.stroke = c; nd._c = c; } });\n      const edge = (a, b, yy, st) => { let d = ''; for (let k = 0; k <= st; k++) { const th = a + (b - a) * k / st; d += (k ? 'L' : 'M') + r1(X(th)) + ' ' + r1(yy + OY(th)); } return d; };\n      let dE = edge(-PI, PI, yT, 90) + edge(-PI / 2, PI / 2, yT + Hh, 40), dB = '';\n      if (t > 0.02) dE += edge(-PI, -PI / 2, yT + Hh, 20) + edge(PI / 2, PI, yT + Hh, 20) + 'M' + r1(X(-PI)) + ' ' + r1(yT + OY(-PI)) + 'V' + r1(yT + Hh + OY(-PI)) + 'M' + r1(X(PI)) + ' ' + r1(yT + OY(PI)) + 'V' + r1(yT + Hh + OY(PI));\n      else { dB = edge(PI / 2, 1.5 * PI, yT + Hh, 40); dE += 'M' + r1(cx - Rr) + ' ' + r1(yT) + 'V' + r1(yT + Hh) + 'M' + r1(cx + Rr) + ' ' + r1(yT) + 'V' + r1(yT + Hh); }\n      set('zy-edge', 'd', dE); set('zy-ebk', 'd', dB);\n      const dry = ry + (Rr - ry) * t, tcy = yT - t * Rr, bcy = yT + Hh + t * Rr;\n      for (const [k, cyy] of [['zy-top', tcy], ['zy-bot', bcy]]) { set(k, 'cx', cx); set(k, 'cy', r1(cyy)); set(k, 'rx', r1(Rr)); set(k, 'ry', r1(dry)); }\n      set('zy-rad', 'd', 'M' + cx + ' ' + r1(tcy) + 'H' + r1(cx + Rr)); set('zy-c', 'cx', cx); set('zy-c', 'cy', r1(tcy));\n      const du = Math.max(0, Math.min(1, (t - 0.85) / 0.15)), w2 = PI * Rr - 10, ym = r1(yT + Hh / 2);\n      set('zy-dim', 'd', 'M' + r1(cx - w2) + ' ' + ym + 'H' + r1(cx + w2) + 'M' + r1(cx - w2 + 8) + ' ' + (ym - 6) + 'L' + r1(cx - w2) + ' ' + ym + 'L' + r1(cx - w2 + 8) + ' ' + (ym + 6) + 'M' + r1(cx + w2 - 8) + ' ' + (ym - 6) + 'L' + r1(cx + w2) + ' ' + ym + 'L' + r1(cx + w2 - 8) + ' ' + (ym + 6));\n      all('zy-dim').forEach(n => n.style.opacity = du);\n      const pos = (k, x, y, o) => all(k).forEach(n => { n.style.left = r1(x) + 'px'; n.style.top = r1(y) + 'px'; if (o !== undefined) n.style.opacity = o; });\n      pos('zy-lr', cx + Rr + 10, tcy); pos('zy-lh', cx + (1 - t) * Rr + t * PI * Rr + 12, yT + Hh / 2); pos('zy-lu', cx, ym - 8, du);\n      txt('zy-lr', 'r = ' + rn + ' cm'); txt('zy-lh', 'h = ' + hn + ' cm');\n      txt('zy-res', '≈ ' + (Math.round(2 * PI * rn * (rn + hn) * 10) / 10).toString().replace('.', ',') + ' cm²');\n      all('zy-res').forEach(n => n.style.opacity = e > 3300 && e < 6200 ? 1 : 0);\n    }\n    if (v === 'pr') {\n      const L = 9600, e = now - this.t0, E = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;\n      all('pr-all').forEach(n => n.style.opacity = Math.max(0, Math.min(1, e / 300, (L - e) / 400)));\n      const [an, hn] = this.prN || [6, 9], u = 104, C = 0.866, hm = 1.3, oy = 144 - (u - hm * u) / 2;\n      const A = (x, y, z) => [124 + (x - y) * C * u, oy + (x + y) * 0.5 * u - z * u], B = (x, y, z) => [324 + (x - y) * C * u, oy + (x + y) * 0.5 * u - z * u];\n      const cyc = e < 800 ? -1 : Math.floor((e - 800) / 2000), ce = (e - 800) % 2000;\n      let Lp = 0, Lq = 0, pour = 0;\n      if (e >= 800 && e < 6800) { Lq = cyc / 3; if (ce < 900) Lp = E(ce / 900); else if (ce < 1900) { const f = E((ce - 900) / 1000); Lp = 1 - f; Lq = (cyc + f) / 3; pour = Math.sin(Math.PI * Math.min(1, (ce - 900) / 1000)); } else Lq = (cyc + 1) / 3; }\n      else if (e >= 6800) Lq = 1;\n      const pg = pts => 'M' + pts.map(p => r1(p[0]) + ' ' + r1(p[1])).join('L') + 'Z', ln = (a, b) => 'M' + r1(a[0]) + ' ' + r1(a[1]) + 'L' + r1(b[0]) + ' ' + r1(b[1]);\n      let dl = '', dr = '', dt = '';\n      if (Lp > 0.005) { const z = Lp * hm, q = 0.5 * Lp; dr += pg([A(1, 0, 0), A(1, 1, 0), A(1 - q, 1 - q, z), A(1 - q, q, z)]); dl += pg([A(0, 1, 0), A(1, 1, 0), A(1 - q, 1 - q, z), A(q, 1 - q, z)]); dt += pg([A(q, q, z), A(1 - q, q, z), A(1 - q, 1 - q, z), A(q, 1 - q, z)]); }\n      if (Lq > 0.005) { const z = Lq * hm; dr += pg([B(1, 0, 0), B(1, 1, 0), B(1, 1, z), B(1, 0, z)]); dl += pg([B(0, 1, 0), B(1, 1, 0), B(1, 1, z), B(0, 1, z)]); dt += pg([B(0, 0, z), B(1, 0, z), B(1, 1, z), B(0, 1, z)]); }\n      set('pr-l', 'd', dl); set('pr-r', 'd', dr); set('pr-t', 'd', dt);\n      const ap = A(0.5, 0.5, hm);\n      set('pr-hid', 'd', ln(A(0, 0, 0), A(1, 0, 0)) + ln(A(0, 0, 0), A(0, 1, 0)) + ln(A(0, 0, 0), ap) + ln(B(0, 0, 0), B(1, 0, 0)) + ln(B(0, 0, 0), B(0, 1, 0)) + ln(B(0, 0, 0), B(0, 0, hm)));\n      set('pr-vis', 'd', ln(A(0, 1, 0), A(1, 1, 0)) + ln(A(1, 0, 0), A(1, 1, 0)) + ln(A(0, 1, 0), ap) + ln(A(1, 1, 0), ap) + ln(A(1, 0, 0), ap) + ln(B(0, 1, 0), B(1, 1, 0)) + ln(B(1, 0, 0), B(1, 1, 0)) + ln(B(0, 1, 0), B(0, 1, hm)) + ln(B(1, 1, 0), B(1, 1, hm)) + ln(B(1, 0, 0), B(1, 0, hm)) + pg([B(0, 0, hm), B(1, 0, hm), B(1, 1, hm), B(0, 1, hm)]));\n      all('pr-arr').forEach(n => n.style.opacity = pour);\n      txt('pr-lab', 'a = ' + an + ' cm · h = ' + hn + ' cm');\n      txt('pr-cnt', 'Füllung ' + Math.max(1, Math.min(3, cyc + 1)) + ' von 3'); txt('pr-res', '= ' + (an * an * hn / 3) + ' cm³');\n      all('pr-cnt').forEach(n => n.style.opacity = e >= 800 && e < 6800 ? 1 : 0); all('pr-res').forEach(n => n.style.opacity = e >= 6800 && e < 9200 ? 1 : 0);\n    }\n  }\n  renderVals() {\n    const fmt = n => (n < 0 ? '−' : '') + String(Math.abs(n)).replace('.', ',');\n    const r = n => Math.round(n * 10) / 10;\n    const ease = 'cubic-bezier(.3,.7,.2,1)', fold = 'cubic-bezier(.55,0,.2,1)';\n    const v = this.cur(), S = this.state.v === v ? this.state : { i: 0, p: 0, t: 0 };\n    const o = { uid: this.uid, tag: this.TAGS[v], zyStrips: this.ZS };\n    for (const k of Object.keys(this.SPEC)) o['is_' + k] = k === v;\n    if (v === 'g') {\n    // 1a Graph\n    const G = [\n      { eq: 'y = 2x + 1', tag: 'Klasse 8 · Lineare Funktionen', f: x => 2 * x + 1, pts: [[0, 1], [-0.5, 0]], hint: 'Steigung 2' },\n      { eq: 'y = x² − 4', tag: 'Klasse 9 · Parabeln', f: x => x * x - 4, pts: [[-2, 0], [2, 0], [0, -4]], hint: 'Scheitel (0 | −4)' },\n      { eq: 'y = −½x + 2', tag: 'Klasse 8 · Lineare Funktionen', f: x => -0.5 * x + 2, pts: [[0, 2], [4, 0]], hint: 'Nullstelle x = 4' },\n      { eq: 'y = 2ˣ', tag: 'Klasse 10 · Exponentialfunktionen', f: x => 2 ** x, pts: [[0, 1], [1, 2], [2, 4]], hint: 'verdoppelt sich' }\n    ];\n    const gs = S, gd = G[gs.i % 4], U = 32, X = x => 224 + U * x, Y = y => 144 - U * y;\n    let d = '', pen = false;\n    for (let x = -7; x <= 7.0001; x += 0.05) { const y = gd.f(x); if (Math.abs(y) <= 4.4) { d += (pen ? 'L' : 'M') + r(X(x)) + ' ' + r(Y(y)); pen = true; } else pen = false; }\n    let ticks = '', tl = [];\n    for (const v of [-6, -4, -2, 2, 4, 6]) { ticks += `M${X(v)} 139V149`; tl.push({ x: X(v), y: 152, s: fmt(v) }); }\n    for (const v of [-4, -2, 2, 4]) { ticks += `M219 ${Y(v)}H229`; tl.push({ x: 210, y: Y(v) - 9, s: fmt(v) }); }\n    const g = { tag: gd.tag, eq: gd.eq, hint: gd.hint, d, ticks, tl, off: gs.p === 0 ? 1 : 0, op: gs.p === 3 ? 0 : 1, hop: gs.p === 2 ? 1 : 0, tr: gs.p === 0 ? 'none' : `stroke-dashoffset 1.4s ${ease}, opacity .4s` };\n    g.pts = gd.pts.map(([x, y], k) => { const px = X(x), py = Y(y), on = gs.p === 2; return { x: px, y: py, s: `(${fmt(x)} | ${fmt(y)})`, lx: px + (px > 330 ? -96 : 12), ly: py < 40 ? py + 10 : py - 34, op: on ? 1 : 0, sc: on ? 1 : 0.3, tr: on ? `opacity .35s ${k * 0.18}s, transform .45s cubic-bezier(.3,1.6,.5,1) ${k * 0.18}s` : 'opacity .3s, transform .3s' }; });\n    \n    o.g = g; o.tag = gd.tag;\n    }\n    if (v === 'z') {\n    // 1b Zahlenstrahl\n    const N = [[-9, 13], [6, -11], [-3, -8], [-12, 19], [11, -7]];\n    const zs = S, [a, b] = N[zs.i % 5], Z = v => 224 + 16 * v, x1 = Z(a), x2 = Z(a + b), h = Math.min(130, 20 + Math.abs(b) * 6);\n    let zt = ''; const ztl = [];\n    for (let v = -14; v <= 14; v++) { const big = v % 5 === 0; zt += `M${Z(v)} ${big ? 216 : 220}V${big ? 232 : 228}`; if (big) ztl.push({ x: Z(v), s: fmt(v) }); }\n    const zOn = zs.p === 2;\n    const z = { ticks: zt, tl: ztl, x1, x2, xm: (x1 + x2) / 2, ly: 224 - h - 40, d: `M${x1} 224Q${(x1 + x2) / 2} ${224 - 2 * h} ${x2} 224`,\n      frage: this.task() ? '' : `Konto: ${fmt(a)} €. ${b > 0 ? 'Du bekommst ' + b + ' €.' : 'Du gibst ' + Math.abs(b) + ' € aus.'}`,\n      eq: `${fmt(a)} ${b < 0 ? '−' : '+'} ${Math.abs(b)}`, ziel: fmt(a + b), sprung: (b > 0 ? '+' : '−') + Math.abs(b),\n      off: zs.p === 0 ? 1 : 0, op: zs.p === 3 ? 0 : 1, tr: zs.p === 0 ? 'none' : `stroke-dashoffset .9s ${ease}, opacity .4s`,\n      lop: zs.p === 1 || zOn ? 1 : 0, ltr: zs.p === 0 ? 'none' : 'opacity .3s .3s',\n      eop: zOn ? 1 : 0, esc: zOn ? 1 : 0.2, etr: zOn ? 'opacity .3s, transform .5s cubic-bezier(.3,1.7,.5,1)' : 'opacity .3s, transform .3s' };\n    \n    o.z = z;\n    }\n    if (v === 'py') {\n    // 1c Pythagoras\n    const P = [[3, 4, 5], [5, 12, 13], [8, 6, 10]];\n    const ps = S, [pa, pb, pc] = P[ps.i % 3];\n    const w = 2 * pa + pb, hh = pa + 2 * pb, s = Math.min(420 / w, 272 / hh), ox = (448 - w * s) / 2 + pa * s, oy = (288 - hh * s) / 2 + (pa + pb) * s;\n    const pt = (x, y) => [r(ox + x * s), r(oy + y * s)], pl = arr => arr.map(([x, y]) => pt(x, y).join(',')).join(' ');\n    const k = ps.p, q = Math.min(1, 10 / pa) * s;\n    const [cx, cy] = pt(0, 0), m = Math.min(14, s * 0.8);\n    const py = { sa: pl([[0, 0], [-pa, 0], [-pa, -pa], [0, -pa]]), sb: pl([[0, 0], [pb, 0], [pb, pb], [0, pb]]), sc: pl([[0, -pa], [pb, 0], [pb + pa, -pb], [pa, -pa - pb]]), tri: pl([[0, 0], [pb, 0], [0, -pa]]),\n      ra: `M${cx + m} ${cy}V${cy - m}H${cx}`,\n      fa: k >= 1 && k <= 4 ? 0.28 : 0, fb: k >= 2 && k <= 4 ? 0.28 : 0, fc: k >= 3 && k <= 4 ? 0.28 : 0,\n      op: k === 5 ? 0 : 1, tr: k === 0 ? 'none' : 'fill-opacity .5s, opacity .4s',\n      eq: this.task() && k < 3 ? 'a² + b² = c²' : `${pa}² + ${pb}² = ${pc}²`, rech: `${pa * pa} + ${pb * pb} = ${pc * pc}`, eop: k === 4 ? 1 : 0 };\n    const fs = side => Math.max(16, Math.min(34, side * s * 0.32));\n    py.labels = [[-pa / 2, -pa / 2, pa * pa, 'a²', 1, pa], [pb / 2, pb / 2, pb * pb, 'b²', 2, pb], [(pa + pb) / 2, -(pa + pb) / 2, pc * pc, 'c²', 3, pc]].map(([x, y, v, n, st, side]) => { const [lx, ly] = pt(x, y); return { x: lx, y: ly, s: String(v), n, fs: Math.round(fs(side)), op: k >= st && k <= 4 ? 1 : 0 }; });\n    \n    o.py = py;\n    }\n    if (v === 'w') {\n    // 2a Würfelnetz\n    const wp = S.p, fo = wp >= 3 && wp <= 4;\n    const wv = { op: wp === 0 || wp === 5 ? 0 : 1, otr: wp === 0 ? 'none' : 'opacity .4s',\n      scene: fo ? `translateX(48px) rotateX(26deg) rotateY(${wp === 4 ? -216 : -36}deg) scale(1.55)` : 'translateX(0px) rotateX(0deg) rotateY(0deg) scale(1)',\n      str: wp === 0 ? 'none' : `transform 1.5s ${fold}`,\n      f1: fo ? 'rotateX(-90deg)' : 'rotateX(0deg)', f6: fo ? 'rotateX(90deg)' : 'rotateX(0deg)', f2: fo ? 'rotateY(90deg)' : 'rotateY(0deg)', f4: fo ? 'rotateY(-90deg)' : 'rotateY(0deg)', f5: fo ? 'rotateY(-90deg)' : 'rotateY(0deg)',\n      t0: wp === 0 ? 'none' : `transform 1.1s ${fold}`, t1: wp === 0 ? 'none' : `transform 1.1s ${fold} .15s`, t2: wp === 0 ? 'none' : `transform 1.1s ${fold} .4s`,\n      ring: wp >= 2 && wp <= 4 ? 1 : 0 };\n    \n    o.w = wv;\n    }\n    if (v === 'q') {\n    // 2b Quader\n    const qs = S, qp = qs.p, [qa, qb, qc] = [[4, 3, 2], [3, 3, 3], [5, 2, 3]][qs.i % 3], NQ = qa * qb * qc, C = 0.866;\n    const u = Math.min(40, 340 / ((qa + qb) * C), 200 / ((qa + qb) * 0.5 + qc));\n    const qox = 224 - (qa - qb) * C * u / 2, qoy = 144 - ((qa + qb) * 0.5 * u - qc * u) / 2;\n    const P3 = (x, y, zz) => [r(qox + (x - y) * C * u), r(qoy + (x + y) * 0.5 * u - zz * u)], pp = a => a.map(v => P3(...v).join(',')).join(' ');\n    const shown = qp >= 2 && qp <= 3, D = 1.5 / NQ, cubes = [];\n    let idx = 0;\n    for (let zz = 0; zz < qc; zz++) for (let x = 0; x < qa; x++) for (let y = 0; y < qb; y++) {\n      cubes.push({ top: pp([[x, y, zz + 1], [x + 1, y, zz + 1], [x + 1, y + 1, zz + 1], [x, y + 1, zz + 1]]), left: pp([[x, y + 1, zz], [x + 1, y + 1, zz], [x + 1, y + 1, zz + 1], [x, y + 1, zz + 1]]), right: pp([[x + 1, y, zz], [x + 1, y + 1, zz], [x + 1, y + 1, zz + 1], [x + 1, y, zz + 1]]),\n        op: shown ? 1 : 0, tf: shown ? 'translateY(0px)' : 'translateY(-18px)', tr: qp === 2 ? `opacity .2s ${r(idx * D * 100) / 100}s, transform .4s cubic-bezier(.3,1.5,.5,1) ${r(idx * D * 100) / 100}s` : 'none' });\n      idx++;\n    }\n    const mid = (a, b2) => [(a[0] + b2[0]) / 2, (a[1] + b2[1]) / 2];\n    const la = mid(P3(0, qb, 0), P3(qa, qb, 0)), lb = mid(P3(qa, 0, 0), P3(qa, qb, 0)), lc = mid(P3(qa, 0, 0), P3(qa, 0, qc));\n    const qn = qp === 2 ? Math.min(NQ, Math.max(0, Math.floor((Date.now() - (qs.t || 0)) / (D * 1000)) + 1)) : NQ;\n    const qv = { op: qp === 0 || qp === 4 ? 0 : 1, otr: qp === 0 ? 'none' : 'opacity .4s', cubes,\n      outline: [pp([[0, 0, qc], [qa, 0, qc], [qa, qb, qc], [0, qb, qc]]), pp([[0, qb, 0], [qa, qb, 0], [qa, qb, qc], [0, qb, qc]]), pp([[qa, 0, 0], [qa, qb, 0], [qa, qb, qc], [qa, 0, qc]])],\n      labels: [{ x: la[0] - 14, y: la[1] + 22, s: qa + ' cm' }, { x: lb[0] + 14, y: lb[1] + 22, s: qb + ' cm' }, { x: lc[0] + 34, y: lc[1], s: qc + ' cm' }],\n      eq: `V = ${qa} · ${qb} · ${qc}`, count: qn + (qn === 1 ? ' Würfel' : ' Würfel'), res: NQ + ' cm³', cop: qp === 2 ? 1 : 0, rop: qp === 3 ? 1 : 0 };\n    \n    o.q = qv;\n    }\n    if (v === 'k') {\n    // 2c Kreis\n    const kp = S.p, kr = [4, 3, 5][S.i % 3], R = 110, sn = Math.sin(Math.PI / 12), cs = Math.cos(Math.PI / 12), ww = 2 * R * sn, kx0 = (448 - 6 * ww) / 2, base = 144 + R * cs / 2, lay = kp >= 2 && kp <= 3;\n    const kv = { op: kp === 0 || kp === 4 ? 0 : 1, otr: kp === 0 ? 'none' : 'opacity .4s', r: kr, area: fmt(r(Math.PI * kr * kr)),\n      wedge: `M0 0L${r(-R * sn)} ${r(-R * cs)}A${R} ${R} 0 0 1 ${r(R * sn)} ${r(-R * cs)}Z`,\n      rop: kp === 1 ? 1 : 0, lop: kp === 3 ? 1 : 0,\n      brace: `M${r(kx0)} ${r(base + 14)}v6H${r(kx0 + 6 * ww)}v-6M${r(kx0 - 14)} ${r(base)}h-6V${r(base - R * cs)}h6`,\n      by: r(base + 26), rx: r(kx0 - 26), ry: r(base - R * cs / 2) };\n    const wf = kv.wedge, wl = `M0 0L${r(-R * sn)} ${r(-R * cs)}A${R} ${R} 0 0 1 0 ${-R}Z`, wr = `M0 0L0 ${-R}A${R} ${R} 0 0 1 ${r(R * sn)} ${r(-R * cs)}Z`, ktop = r(base - R * cs);\n    const ktr = j => kp === 0 ? 'none' : `transform 1.3s ${fold} ${(j * 0.07).toFixed(2)}s`, circ = i => `translate(224px, 144px) rotate(${i * 30 + 15}deg)`;\n    kv.sectors = Array.from({ length: 11 }, (_, i) => { const A = i < 6, j = A ? i : i - 6;\n      return { d: wf, fill: A ? 'var(--accent)' : 'var(--catGeometry)', st: A ? 'color-mix(in srgb, var(--accent) 55%, var(--textPrimary))' : 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))',\n        tf: lay ? (A ? `translate(${r(kx0 + j * ww + ww / 2)}px, ${r(base)}px) rotate(0deg)` : `translate(${r(kx0 + (j + 1) * ww)}px, ${ktop}px) rotate(180deg)`) : circ(i),\n        tr: ktr(j) }; });\n    kv.sectors.push({ d: wl, fill: 'var(--catGeometry)', st: 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))', tf: lay ? `translate(${r(kx0)}px, ${ktop}px) rotate(180deg)` : circ(11), tr: ktr(0) });\n    kv.sectors.push({ d: wr, fill: 'var(--catGeometry)', st: 'color-mix(in srgb, var(--catGeometry) 55%, var(--textPrimary))', tf: lay ? `translate(${r(kx0 + 6 * ww)}px, ${ktop}px) rotate(180deg)` : circ(11), tr: ktr(5) });\n    \n    o.k = kv;\n    }\n    if (v === 'td') {\n      const pi = S.p === 0 ? 0 : Math.min(4, S.p - 1), poses = [[0, -90, 'Von vorne: ein Kreis'], [-20, -38, 'Schräg: eine Schraube'], [0, 0, 'Von der Seite: sin φ'], [-90, 0, 'Von oben: cos φ'], [-20, -38, 'Schräg: eine Schraube']];\n      const [ea, eb] = poses[pi], bb = 'rotateY(' + (-eb) + 'deg) rotateX(' + (-ea) + 'deg)', EA = 84, EL = 168;\n      const at = (x, y, zz) => 'translate3d(' + r(x) + 'px, ' + r(y) + 'px, ' + r(zz) + 'px) ' + bb;\n      const dots = [];\n      for (let n = 0; n <= 120; n++) { const f = n / 120 * 4 * Math.PI; dots.push({ tf: at(-EL + n / 120 * 2 * EL, -EA * Math.sin(f), -EA * Math.cos(f)), c: 'color-mix(in srgb, var(--accent) ' + Math.round(100 - n / 120 * 70) + '%, var(--catAnalysis))' }); }\n      const axis = [];\n      for (let x = -EL - 16; x <= EL + 16; x += 12) axis.push({ tf: at(x, 0, 0) });\n      for (let y = -100; y <= 100; y += 12) { axis.push({ tf: at(-EL, y, 0) }); axis.push({ tf: at(-EL, 0, y) }); }\n      o.ed = { op: S.p === 0 || S.p === 6 ? 0 : 1, scene: 'rotateX(' + ea + 'deg) rotateY(' + eb + 'deg)', tr: S.p === 0 ? 'none' : 'transform 1.6s cubic-bezier(.6,0,.2,1)', dots, axis,\n        labels: [{ s: 'Re', tf: at(-EL, 0, -120) }, { s: 'Im', tf: at(-EL, -106, 0) }, { s: 'φ', tf: at(EL + 34, 0, 0) }],\n        views: poses.map((p, i) => ({ s: p[2], op: i === pi ? 1 : 0, tr: i === pi ? 'opacity .3s .25s' : 'opacity .2s' })) };\n    }\n    if (v === 'p2') {\n      const e = this.t0 ? performance.now() - this.t0 : 0, L = 13900, [pa, pb, pc] = this.p2N || [3, 4, 5], a = 3, b = 4, SS = 7, u = 36, x0 = 8, y0 = 18;\n      const cl = x => Math.max(0, Math.min(1, x)), E = x => { x = cl(x); return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; }, seg = (t0, d) => E((e - t0) / d), lp = (p, q, k) => p + (q - p) * k;\n      const tri = (Rx, Ry, rot, k) => { const c = Math.cos(rot * Math.PI / 180), sn = Math.sin(rot * Math.PI / 180); return [[0, 0], [b, 0], [0, a]].map(([x, y]) => [Rx + (x * c - y * sn) * k, Ry + (x * sn + y * c) * k]); };\n      const ps = pts => pts.map(([x, y]) => r(x) + ',' + r(y)).join(' '), G = (x, y) => [x0 + x * u, y0 + y * u];\n      const A1 = [[0, 0, 0], [SS, 0, 90], [SS, SS, 180], [0, SS, 270]], A2 = [[a, 0, 0], [a, a, 90], [SS, a, 180], [0, SS, 270]];\n      const RA = [112, 200], kA = 26, outA = seg(11800, 500), mv = seg(12300, 1300), cm = seg(4600, 1000) - mv, others = Math.min(seg(5000, 600), 1 - outA), st = [0, 900, 1800, 0];\n      const tris = A1.map(([x1, y1, rot], i) => { const [x2, y2] = A2[i], k = i === 3 ? 0 : seg(6800 + st[i], 900), bx = x0 + lp(x1, x2, k) * u, by = y0 + lp(y1, y2, k) * u;\n        if (i === 3) return { pts: ps(tri(lp(RA[0], bx, cm), lp(RA[1], by, cm), 270, lp(kA, u, cm))), op: 1 };\n        return { pts: ps(tri(bx, by, rot, u)), op: others }; });\n      const R = [lp(RA[0], x0, cm), lp(RA[1], y0 + SS * u, cm)], m = 10;\n      const Pa = [RA[0] + a * kA, RA[1]], Pb = [RA[0], RA[1] - b * kA];\n      const sq = (p1, p2, g, op) => { const dx = p2[0] - p1[0], dy = p2[1] - p1[1]; let nx = -dy, ny = dx; const mx = (p1[0] + p2[0]) / 2 - op[0], my = (p1[1] + p2[1]) / 2 - op[1]; if (nx * mx + ny * my < 0) { nx = -nx; ny = -ny; } return [p1, p2, [p2[0] + nx * g, p2[1] + ny * g], [p1[0] + nx * g, p1[1] + ny * g]]; };\n      const gBack = seg(13300, 600), ga = seg(1800, 600), gb = seg(2300, 600), gc = e > 13000 ? gBack : seg(2800, 600), fsq = 1 - seg(4500, 500);\n      const cen = q => [(q[0][0] + q[2][0]) / 2, (q[0][1] + q[2][1]) / 2], mix = (P, Q, k) => P.map((p, i) => [lp(p[0], Q[i][0], k), lp(p[1], Q[i][1], k)]);\n      const qa = sq(RA, Pa, ga, Pb), qb = sq(RA, Pb, gb, Pa), qc = sq(Pa, Pb, gc, RA), fa = sq(RA, Pa, 1, Pb), fb = sq(RA, Pb, 1, Pa), ca = cen(fa), cb = cen(fb), cc = cen(sq(Pa, Pb, 1, RA));\n      const gR = [lp(x0, RA[0], mv), lp(y0 + SS * u, RA[1], mv)], gk = lp(u, kA, mv), L2 = (x, y) => [gR[0] + x * gk, gR[1] + y * gk], la0 = lp(-SS, 0, seg(12300, 1000)), lb0 = lp(a, -b, seg(12500, 1100));\n      const ha = [L2(0, la0), L2(a, la0), L2(a, la0 + a), L2(0, la0 + a)], hb = [L2(lb0, -b), L2(lb0 + b, -b), L2(lb0 + b, 0), L2(lb0, 0)];\n      const inB = cl((e - 5600) / 400) - outA, it = 'italic', ff = 'var(--font-sans)', fd = 'var(--font-display)';\n      const sab = seg(9800, 500), endFade = this.props.onDone || !this.props.variante ? cl((L - e) / 400) : 1, fade = Math.min(cl(e / 300), endFade);\n      const back = seg(12800, 500);\n      o.p2 = { op: fade, obg: seg(4800, 800) - outA, oab: sab, osq: fsq, osqc: Math.max(fsq, gBack), sqa: ps(qa), sqb: ps(qb), sqc: ps(qc), tris, ha: ps(ha), hb: ps(hb),\n        ra: 'M' + r(R[0] + m) + ' ' + r(R[1]) + 'V' + r(R[1] - m) + 'H' + r(R[0]),\n        ot1: Math.max(Math.min(cl((e - 300) / 400), 1 - seg(4500, 400)), back), ot1b: Math.max(seg(1800, 500) * (1 - seg(4500, 400)), back), ot2: seg(5200, 500) - seg(11800, 400),\n        sc: Math.min(seg(5600, 400), 1 - seg(6700, 300)), sab: sab - seg(11800, 400), ores: e > 9800 && e < 11800 ? sab : 0, rech: (pa * pa) + ' + ' + (pb * pb) + ' = ' + (pc * pc),\n        labels: [\n          { s: 'a', x: RA[0] + a * kA / 2, y: RA[1] + 14, op: Math.min(cl((e - 600) / 400), 1 - ga), fs: 17, fw: 600, st: it, ff },\n          { s: 'b', x: RA[0] - 14, y: RA[1] - b * kA / 2, op: Math.min(cl((e - 600) / 400), 1 - gb), fs: 17, fw: 600, st: it, ff },\n          { s: 'c', x: (Pa[0] + Pb[0]) / 2 + 12, y: (Pa[1] + Pb[1]) / 2 - 8, op: Math.min(cl((e - 600) / 400), 1 - seg(2800, 600)), fs: 17, fw: 600, st: it, ff },\n          { s: 'a²', x: ca[0], y: ca[1], op: Math.min(ga, fsq), fs: 26, fw: 700, st: 'normal', ff: fd },\n          { s: 'b²', x: cb[0], y: cb[1], op: Math.min(gb, fsq), fs: 30, fw: 700, st: 'normal', ff: fd },\n          { s: 'c²', x: cc[0], y: cc[1], op: Math.max(Math.min(seg(2800, 600), fsq), gBack), fs: 34, fw: 700, st: 'normal', ff: fd },\n          { s: 'c²', x: x0 + SS / 2 * u, y: y0 + SS / 2 * u, op: Math.min(seg(5400, 400), 1 - seg(6700, 300)), fs: 40, fw: 700, st: 'normal', ff: fd },\n          { s: 'a²', x: cen(ha)[0], y: cen(ha)[1], op: sab, fs: lp(30, 26, mv), fw: 700, st: 'normal', ff: fd },\n          { s: 'b²', x: cen(hb)[0], y: cen(hb)[1], op: sab, fs: lp(36, 30, mv), fw: 700, st: 'normal', ff: fd },\n          { s: 'b', x: 21, y: 198, op: inB, fs: 15, fw: 600, st: it, ff }, { s: 'a', x: 62, y: 259, op: inB, fs: 15, fw: 600, st: it, ff }, { s: 'c', x: 45, y: 212, op: inB, fs: 15, fw: 600, st: it, ff }\n        ].map(l => ({ ...l, x: r(l.x), y: r(l.y), fs: r(l.fs), op: r(Math.max(0, l.op) * 100) / 100 })) };\n    }\n    if (v === 'pz') {\n      const [pp, G] = [[25, 80], [50, 120], [10, 250]][S.i % 3], p = S.p, dz = n => String(Math.round(n * 100) / 100).replace('.', ','), W = pp * G / 100, Y = [68, 148, 228];\n      const row = (l, rr, st, res) => ({ y: Y[st] - 24, l, r: rr, op: p >= st + 1 ? 1 : 0, ty: p >= st + 1 ? 0 : 8, c: res && p >= 3 ? 'var(--successText)' : 'var(--textPrimary)' });\n      const arc = (x, out, y1, y2, st) => ({ d: `M${x} ${y1 + 26}Q${out} ${(y1 + y2) / 2} ${x} ${y2 - 26}M${x - 6} ${y2 - 34}L${x} ${y2 - 26}L${x + 6} ${y2 - 34}`, op: p >= st ? 1 : 0 });\n      const lbl = (x, y, s, st) => ({ x, y, s, op: p >= st ? 1 : 0 });\n      o.pz = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s',\n        rows: [row('100 %', dz(G) + ' €', 0), row('1 %', dz(G / 100) + ' €', 1), row(pp + ' %', dz(W) + ' €', 2, true)],\n        arcs: [arc(80, 46, Y[0], Y[1], 2), arc(368, 402, Y[0], Y[1], 2), arc(80, 46, Y[1], Y[2], 3), arc(368, 402, Y[1], Y[2], 3)],\n        ops: [lbl(34, (Y[0] + Y[1]) / 2, ': 100', 2), lbl(414, (Y[0] + Y[1]) / 2, ': 100', 2), lbl(34, (Y[1] + Y[2]) / 2, '· ' + pp, 3), lbl(414, (Y[1] + Y[2]) / 2, '· ' + pp, 3)],\n        eq: `${pp} % von ${dz(G)} €`, res: '= ' + dz(W) + ' €', rop: p >= 3 ? 1 : 0 };\n    }\n    if (v === 'wa') {\n      const [a, b, c] = [[3, 2, 11], [2, 5, 13], [4, 3, 19]][S.i % 3], x = (c - b) / a, p = S.p, BX = 30, CR = 14, g = 6;\n      const lw = a * BX + (a - 1) * g + (p >= 2 ? 0 : b * (CR + g)), lx0 = 120 - lw / 2, left = [];\n      for (let k = 0; k < a; k++) left.push({ box: true, circ: false, x: r(lx0 + k * (BX + g)), y: 110 - BX, bg: p === 3 && k === 0 ? 'var(--success)' : 'var(--accent)' });\n      for (let k = 0; k < b; k++) { const gone = p >= 2; left.push({ box: false, circ: true, x: r(lx0 + a * (BX + g) + k * (CR + g)), y: 110 - CR, op: gone ? 0 : 1, tf: gone ? 'translateY(-18px)' : 'none' }); }\n      const n = p >= 2 ? c - b : c, rw = n * CR + (n - 1) * 4 + (p >= 3 ? (a - 1) * 12 : 0), rx0 = 328 - rw / 2, right = [];\n      for (let k = 0; k < c; k++) { const gone = p >= 2 && k >= c - b, gi = Math.floor(k / x); right.push({ x: r(rx0 + k * (CR + 4) + (p >= 3 ? gi * 12 : 0)), y: 110 - CR, op: gone ? 0 : 1, tf: gone ? 'translateY(-18px)' : 'none', bg: p === 3 && gi === 0 && !gone ? 'var(--success)' : 'var(--textSecondary)' }); }\n      o.wa = { op: p === 0 || p === 5 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', left, right, tr: p === 0 ? 'none' : `left .9s ${fold}, opacity .5s, transform .5s, background .4s`,\n        eq: p < 2 ? `${a}x + ${b} = ${c}` : p < 3 ? `${a}x = ${c - b}` : `x = ${x}`, eqc: p >= 3 ? 'var(--successText)' : 'var(--textPrimary)',\n        note: p === 1 ? 'Beide Seiten sind gleich schwer.' : p === 2 ? `${b} auf beiden Seiten wegnehmen` : p === 3 ? `${a} gleiche Kisten, ${c - b} Gewichte: durch ${a} teilen` : '', nop: p >= 1 && p <= 3 ? 1 : 0 };\n    }\n    if (v === 'ur') {\n      const [nb, nr] = [[3, 5], [2, 4], [4, 6]][S.i % 3], N = nb + nr, p = S.p, JAR = [[165, 190], [205, 200], [245, 195], [285, 190], [185, 150], [225, 160], [265, 150], [175, 110], [215, 115], [255, 108]];\n      const row0 = 224 - (N * 44 - 8) / 2, balls = [];\n      for (let k = 0; k < N; k++) { const blue = k < nb, [jx, jy] = JAR[k], ln = p >= 2; balls.push({ x: ln ? row0 + k * 44 + 18 : jx, y: ln ? 150 : jy, c: blue ? 'var(--pairIndigo)' : 'var(--error)', dim: p >= 3 && !blue ? 0.3 : 1 }); }\n      o.ur = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', balls, tr: p === 0 ? 'none' : `left 1s ${fold}, top 1s ${fold}, opacity .5s`, jop: p < 2 ? 1 : 0, bop: p >= 3 ? 1 : 0, nb, N, res: `= ${nb}/${N}` };\n    }\n    if (v === 'st') {\n      const [h1, s1, s2] = [[1.8, 3, 10], [1.5, 2, 8], [2, 4, 12]][S.i % 3], H = h1 * s2 / s1, p = S.p, u = Math.min(30, 300 / s2, 180 / H), gx = 388, gy = 240, dz = n => String(Math.round(n * 100) / 100).replace('.', ',');\n      const tx = r(gx - s2 * u), px = r(gx - s1 * u), th = H * u, ph = h1 * u;\n      o.st = { op: p === 0 || p === 5 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', gx, gy, px, hy: r(gy - ph + 7),\n        s2: `M${tx} ${gy}H${gx}`, s1: `M${px} ${gy}H${gx}`, ray: `M${tx} ${r(gy - th)}L${gx} ${gy}`, small: `M${px} ${gy}V${r(gy - ph)}L${gx} ${gy}Z`, tree: `M${tx} ${gy}V${r(gy - th)}`, body: `M${px} ${r(gy - ph + 14)}V${gy}`,\n        sc: p >= 3 ? Math.round(s2 / s1 * 1000) / 1000 : 1, str: p === 0 ? 'none' : `transform 1.4s ${fold}, opacity .4s`, sop: p >= 2 ? 1 : 0, top: p >= 4 ? 1 : 0.6, dash: p >= 4 ? 'none' : '7 6',\n        hlab: p >= 4 ? dz(H) + ' m' : '?', hc: p >= 4 ? 'var(--successText)' : 'var(--textSecondary)', tlx: tx - 10, tly: r(gy - th / 2), plx: px - 12, ply: r(gy - ph / 2), l1: dz(h1) + ' m', ls1: s1 + ' m', ls2: s2 + ' m', m1: r((px + gx) / 2), m2: r((tx + gx) / 2),\n        eq: `h : ${s2} = ${dz(h1)} : ${s1}`, res: 'h = ' + dz(H) + ' m', rop: p >= 4 ? 1 : 0 };\n    }\n    if (v === 'sp') {\n      const [d, e] = [[2, 1], [-1, 2], [3, -2]][S.i % 3], p = S.p, U = 32, X = x => 224 + U * x, Y = y => 144 - U * y;\n      let path = ''; for (let x = -2.1; x <= 2.1001; x += 0.1) path += (path ? 'L' : 'M') + r(X(x)) + ' ' + r(Y(x * x));\n      let ticks = ''; const tl = [];\n      for (const t of [-6, -4, -2, 2, 4, 6]) { ticks += `M${X(t)} 139V149`; tl.push({ x: X(t), y: 152, s: fmt(t) }); }\n      for (const t of [-4, -2, 2, 4]) { ticks += `M219 ${Y(t)}H229`; tl.push({ x: 210, y: Y(t) - 9, s: fmt(t) }); }\n      o.sp = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', path, ticks, tl, tf: p >= 2 ? `translate(${d * U}px, ${-e * U}px)` : 'translate(0px, 0px)', str: p === 0 ? 'none' : `transform 1.3s ${fold}`, gop: p >= 2 ? 0.5 : 0,\n        vx: X(d), vy: Y(e), lx: X(d) + 12, ly: Y(e) + 6, vop: p >= 3 ? 1 : 0, vs: `S(${fmt(d)} | ${fmt(e)})`,\n        eq: `y = (x ${d < 0 ? '+' : '−'} ${Math.abs(d)})² ${e < 0 ? '−' : '+'} ${Math.abs(e)}`, hint: `${Math.abs(d)} nach ${d < 0 ? 'links' : 'rechts'}, ${Math.abs(e)} nach ${e < 0 ? 'unten' : 'oben'}`, hop: p >= 2 ? 1 : 0 };\n    }\n    if (v === 'si') {\n      const [A, B] = [[150, 30], [120, 60], [135, 45]][S.i % 3], p = S.p, cx = 224, cy = 160, R = 100, rad = a => a * Math.PI / 180;\n      const P = (a, rr) => [r(cx + rr * Math.cos(rad(a))), r(cy - rr * Math.sin(rad(a)))], [ax, ay] = P(A, R), [bx, by] = P(B, R), sv = Math.sin(rad(B)).toFixed(2).replace('.', ',').replace(/0$/, '');\n      const arc = a => { const [ex, ey] = P(a, 36); return `M${cx + 36} ${cy}A36 36 0 0 0 ${ex} ${ey}`; }, [lax, lay] = P(A / 2, 54), [lbx, lby] = P(B / 2, 54);\n      o.si = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', arcA: arc(A), arcB: arc(B), ax, ay, bx, by, hA: `M${ax} ${cy}V${ay}`, hB: `M${bx} ${cy}V${by}`, mirror: `M${ax} ${ay}H${bx}`,\n        bop: p >= 2 ? 1 : 0, mop: p >= 3 ? 1 : 0, hAop: p >= 3 ? 1 : 0, qop: p < 3 ? 1 : 0, labA: A + '°', labB: B + '°', sv, lax, lay, lbx, lby, vbx: bx + 10, vby: r((cy + by) / 2), vax: ax - 10,\n        eq: `sin ${A}°`, res: `= sin ${B}° = ${sv}` };\n    }\n    if (v === 'bd') {\n      const want = [['K', 'K'], ['Z', 'Z'], ['K', 'Z']][S.i % 3], p = S.p, hi = p >= 2, L1 = [['K', 72], ['Z', 216]], L2 = [[40, 104], [184, 248]];\n      const edges = [], nodes = [{ x: 60, y: 144, s: 'Start', on: true }], ends = [];\n      const edge = (x1, y1, x2, y2, on) => { const mx = (x1 + x2) / 2, my = (y1 + y2) / 2; edges.push({ d: `M${x1} ${y1}L${x2} ${y2}`, c: hi && on ? 'var(--accent)' : 'var(--textSecondary)', w: hi && on ? 4 : 2, op: hi && !on ? 0.25 : 1, lx: mx, ly: my - 10, lc: hi && on ? 'var(--accentText)' : 'var(--textSecondary)' }); };\n      L1.forEach(([s1, y1], i) => { const on1 = s1 === want[0]; edge(60, 144, 200, y1, on1); nodes.push({ x: 200, y: y1, s: s1, on: on1 });\n        ['K', 'Z'].forEach((s2, j) => { const y2 = L2[i][j], on2 = on1 && s2 === want[1]; edge(200, y1, 360, y2, on2); nodes.push({ x: 360, y: y2, s: s2, on: on2 }); ends.push({ x: 392, y: y2, s: s1 + s2 + (on2 ? '  ½ · ½ = ¼' : ''), c: on2 && hi ? 'var(--accentText)' : 'var(--textTertiary)', op: hi && !on2 ? 0.3 : 1 }); }); });\n      o.bd = { op: p === 0 || p === 4 ? 0 : 1, otr: p === 0 ? 'none' : 'opacity .4s', edges, ends,\n        nodes: nodes.map(n => ({ ...n, bg: hi && n.on ? 'var(--accentTint)' : 'var(--surface)', bc: hi && n.on ? 'var(--accent)' : 'var(--textSecondary)', op: hi && !n.on ? 0.3 : 1 })),\n        eq: `P(${want.join(', ')})`, res: '= ½ · ½ = ¼', rop: p >= 3 ? 1 : 0 };\n    }\n    return o;\n  }\n}\n</script>\n</body>\n</html>\n"}