/* MPU Plus — Lernen. Mobile zuerst: große Tippflächen, Prüfen-Knopf immer unten im Daumenbereich. */
.page-learn main, .page-learn{ background:var(--concrete); }
.learn{ --ok:#2f8f3e; --ok-tint:#e3f3e2; --bad:#c8372d; --bad-tint:#fbe7e5; --info:#16436b; --info-tint:#e6eef6;
  padding:28px 0 80px; min-height:70vh; }
.learn [hidden]{ display:none !important; }
.learn-kicker{ font-weight:700; color:var(--green-deep); font-size:.95rem; margin-bottom:8px; }
.learn-note{ background:#fff7e0; border:1px solid #ecd9a0; padding:12px 16px; border-radius:var(--r-md); margin-top:16px; font-size:1rem; }

/* ---------- Start: Themenwahl ---------- */
.learn-start__head{ max-width:640px; }
.learn-start h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem, 7vw, 3.6rem); line-height:1.02; text-wrap:balance; }
.learn-start__lead{ margin-top:14px; color:var(--ink-2); max-width:56ch; }
.learn-start__ask{ font-family:var(--display); font-weight:800; font-size:1.6rem; margin:34px 0 14px; }
.learn-topics{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; max-width:760px; }
@media(min-width:760px){ .learn-topics{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.learn-topic{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:18px 16px 16px; min-height:150px; text-align:left;
  background:#fff; border:2px solid var(--line); border-bottom-width:5px; border-radius:18px; cursor:pointer; font:inherit; color:var(--navy);
  transition:transform .15s var(--ease), border-color .15s; }
.learn-topic:hover{ border-color:var(--green); }
.learn-topic:active{ transform:translateY(3px); border-bottom-width:2px; margin-bottom:3px; }
.learn-topic:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.learn-topic__icon{ width:46px; height:46px; border-radius:14px; margin-bottom:auto; background:var(--green-tint) center/30px no-repeat; }
.learn-topic--alkohol .learn-topic__icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l-1 7a3 3 0 0 1-6 0z'/%3E%3Cpath d='M12 13v7M8 21h8'/%3E%3C/svg%3E"); }
.learn-topic--cannabis .learn-topic__icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-6M12 15c0-5 0-8 0-12 0 4 0 7 0 12zM12 15c-3-1-6-4-7-8 3 1 6 4 7 8zM12 15c3-1 6-4 7-8-3 1-6 4-7 8zM12 15c-2 1-5 1-8 0 2-2 5-2 8 0zM12 15c2 1 5 1 8 0-2-2-5-2-8 0z'/%3E%3C/svg%3E"); }
.learn-topic--drogen .learn-topic__icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='19' height='7' rx='3.5' transform='rotate(-35 12 12)'/%3E%3Cpath d='M9.5 8.5l5 7'/%3E%3C/svg%3E"); }
.learn-topic--punkte .learn-topic__icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='3'/%3E%3Ccircle cx='12' cy='7' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='17' r='1.6'/%3E%3C/svg%3E"); }
.learn-topic__name{ font-family:var(--display); font-weight:800; font-size:1.55rem; line-height:1.05; margin-top:12px; }
.learn-topic__meta{ font-size:.88rem; color:var(--ink-2); line-height:1.3; }
.learn-topic__bar{ width:100%; height:6px; border-radius:6px; background:var(--asphalt); margin-top:8px; overflow:hidden; }
.learn-topic__bar i{ display:block; height:100%; background:var(--green); border-radius:6px; }
.learn-privacy{ margin-top:22px; font-size:.92rem; color:var(--ink-2); max-width:62ch; }

/* ---------- Lernpfad ---------- */
.learn-bar{ position:sticky; top:74px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; background:var(--concrete); }
@media(min-width:760px){ .learn-bar{ top:86px; } }
.learn-bar__topic{ white-space:nowrap; font:inherit; font-weight:700; font-size:.95rem; color:var(--navy); background:#fff; border:2px solid var(--line);
  border-radius:999px; padding:8px 14px; cursor:pointer; }
.learn-stats{ display:flex; align-items:center; gap:6px; }
.learn-stat{ display:flex; align-items:baseline; gap:3px; background:#fff; border:2px solid var(--line); border-radius:999px; padding:6px 11px; }
.learn-stat b{ font-family:var(--display); font-weight:800; font-size:1.2rem; line-height:1; }
.learn-stat small{ font-size:.75rem; color:var(--ink-2); font-weight:600; }
.learn-stat--streak b{ color:#d9731a; } .learn-stat--xp b{ color:var(--green-deep); }
@media(max-width:420px){ .learn-stat small{ display:none; } .learn-stat--streak b::after{ content:" 🔥"; font-size:.9rem; } .learn-stat--xp b::after{ content:" XP"; font-size:.75rem; } .learn-stat--level b::before{ content:"Lv "; font-size:.75rem; } }
.learn-sound{ width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:#fff center/20px no-repeat; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2b47' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E"); }
.learn-sound[aria-pressed="false"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5569' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M17 10l4 4M21 10l-4 4'/%3E%3C/svg%3E"); }
.learn-levelbar{ height:8px; border-radius:8px; background:var(--asphalt); overflow:hidden; }
.learn-levelbar i{ display:block; height:100%; background:linear-gradient(90deg, var(--green), #7cc06c); border-radius:8px; transition:width .6s var(--ease); }
.learn-path__title{ font-family:var(--display); font-weight:800; font-size:2.2rem; margin:22px 0 6px; }
.learn-loading{ padding:40px 0; color:var(--ink-2); }

.learn-chapters{ display:flex; flex-direction:column; gap:22px; max-width:680px; }
.learn-ch{ background:#fff; border-radius:22px; border:2px solid var(--line); overflow:hidden; }
.learn-ch__head{ background:var(--green-deep); color:#fff; padding:18px 20px; }
.learn-ch__head h2{ font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1.1; }
.learn-ch__count{ font-size:.85rem; font-weight:700; opacity:.85; }
.learn-ch__goal{ margin-top:4px; font-size:.98rem; opacity:.92; line-height:1.4; }
.learn-ch:nth-child(2) .learn-ch__head{ background:var(--navy); }
.learn-ch.is-gated .learn-nodes{ opacity:.55; }
.learn-ch.is-locked{ background:transparent; border-style:dashed; }
.learn-ch.is-locked .learn-ch__head{ background:transparent; color:var(--ink-2); padding-left:58px; position:relative; }
.learn-ch.is-locked .learn-ch__head::before{ content:""; position:absolute; left:18px; top:20px; width:26px; height:26px; background:center/22px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5569' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* Knoten im Zickzack wie eine kurvige Straße */
.learn-nodes{ list-style:none; padding:58px 0 30px; margin:0; display:flex; flex-direction:column; align-items:center; gap:22px; }
.learn-nodes li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:translateX(calc(sin(var(--i) * 1.4rad) * 70px)); }
@supports not (transform:translateX(calc(sin(1rad) * 1px))){ .learn-nodes li:nth-child(4n+2){ transform:translateX(60px); } .learn-nodes li:nth-child(4n){ transform:translateX(-60px); } }
.learn-node{ width:78px; height:72px; border-radius:50%; border:0; cursor:pointer; position:relative; padding:0;
  background:var(--green); box-shadow:0 7px 0 #2f6326; transition:transform .12s, box-shadow .12s; }
.learn-node:active{ transform:translateY(5px); box-shadow:0 2px 0 #2f6326; }
.learn-node:focus-visible{ outline:4px solid #9fd38f; outline-offset:4px; }
.learn-node__dot{ position:absolute; inset:0; background:center/34px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17l-6.1 3.4 1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E"); }
.learn-node--done{ background:#f2c94c; box-shadow:0 7px 0 #c99a1e; }
.learn-node--done .learn-node__dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.learn-node--locked{ background:#cfd8e1; box-shadow:0 7px 0 #aebbc7; cursor:not-allowed; }
.learn-node--locked .learn-node__dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); background-size:28px; }
.learn-node--current{ animation:node-pulse 2s infinite; }
@keyframes node-pulse{ 0%,100%{ box-shadow:0 7px 0 #2f6326, 0 0 0 0 rgba(76,144,62,.45); } 50%{ box-shadow:0 7px 0 #2f6326, 0 0 0 14px rgba(76,144,62,0); } }
.learn-node__start{ position:absolute; top:-40px; background:#fff; border:2px solid var(--line); border-radius:12px; padding:3px 12px; font-weight:800;
  color:var(--green-deep); font-size:.9rem; animation:bob 1.6s ease-in-out infinite; white-space:nowrap; }
.learn-node__start::after{ content:""; position:absolute; left:50%; bottom:-7px; width:10px; height:10px; background:#fff; border:2px solid var(--line);
  border-top:0; border-left:0; transform:translateX(-50%) rotate(45deg); }
@keyframes bob{ 50%{ transform:translateY(-4px); } }
.learn-node__label{ font-weight:700; font-size:.92rem; text-align:center; max-width:190px; line-height:1.25; }
.learn-gatecard{ margin:0 18px 20px; background:var(--green-tint); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.learn-cta{ background:#fff; border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; border:2px solid var(--line); }

/* ---------- Lektion (Vollbild) ---------- */
html.is-lesson, html.is-lesson body{ overflow:hidden; }
.lesson{ position:fixed; inset:0; z-index:50; background:#fff; display:flex; flex-direction:column; height:100dvh; }
.lesson__top{ display:flex; align-items:center; gap:14px; padding:14px 18px; padding-top:max(14px, env(safe-area-inset-top)); max-width:760px; width:100%; margin:0 auto; }
.lesson__close{ width:40px; height:40px; flex:none; border:0; background:center/22px no-repeat transparent; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5569' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.lesson__progress{ flex:1; height:16px; background:var(--asphalt); border-radius:16px; overflow:hidden; }
.lesson__progress i{ display:block; height:100%; width:0; background:var(--green); border-radius:16px; transition:width .45s var(--ease);
  background-image:linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)); background-size:100% 5px; background-repeat:no-repeat; background-position:0 3px; background-color:var(--green); }
.lesson__xp{ font-weight:800; color:var(--green-deep); font-size:.95rem; min-width:52px; text-align:right; }
.lesson__body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 20px 30px; max-width:760px; width:100%; margin:0 auto; }
.lesson__foot{ border-top:2px solid var(--line); padding:14px 20px; padding-bottom:max(14px, env(safe-area-inset-bottom)); background:#fff; transition:background .2s; }
.lesson__foot > *{ max-width:720px; margin-inline:auto; }
.lesson__fb{ margin-bottom:12px; }
.lesson__fb-title{ font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1.1; }
.lesson__fb-text{ font-size:1rem; line-height:1.45; margin-top:4px; max-height:30vh; overflow:auto; }
.lesson.is-ok .lesson__foot{ background:var(--ok-tint); border-color:transparent; } .lesson.is-ok .lesson__fb-title{ color:var(--ok); }
.lesson.is-bad .lesson__foot{ background:var(--bad-tint); border-color:transparent; } .lesson.is-bad .lesson__fb-title{ color:var(--bad); }
.lesson.is-info .lesson__foot{ background:var(--info-tint); border-color:transparent; } .lesson.is-info .lesson__fb-title{ color:var(--info); }
.lesson .lesson__fb:not([hidden]){ animation:fb-in .28s var(--ease); }
@keyframes fb-in{ from{ transform:translateY(16px); opacity:0; } }
.lesson__btn{ display:block; width:100%; min-height:56px; border:0; border-radius:16px; font:inherit; font-weight:800; font-size:1.1rem; letter-spacing:.02em;
  color:#fff; background:var(--green-deep); box-shadow:0 5px 0 #2f6326; cursor:pointer; text-transform:uppercase; }
.lesson__btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #2f6326; }
.lesson__btn:disabled{ background:#cfd8e1; box-shadow:0 5px 0 #b6c2cd; color:#fff; cursor:default; transform:none; }
.lesson.is-bad .lesson__btn{ background:var(--bad); box-shadow:0 5px 0 #92261f; }
.lesson.is-info .lesson__btn{ background:var(--info); box-shadow:0 5px 0 #0a2b47; }

/* Übungen */
.ex{ padding-top:10px; }
.ex.is-in{ animation:ex-in .35s var(--ease); }
@keyframes ex-in{ from{ opacity:0; transform:translateX(24px); } }
.ex__kicker{ font-weight:800; color:var(--green-deep); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.ex__q{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem, 5.4vw, 2.1rem); line-height:1.1; margin-bottom:22px; text-wrap:balance; }
.ex__teach{ font-size:1.25rem; line-height:1.55; background:var(--green-tint); border-radius:18px; padding:22px; }
.ex__opts{ display:flex; flex-direction:column; gap:12px; }
.ex__opt, .ex__chip{ font:inherit; color:var(--navy); background:#fff; border:2px solid var(--line); border-bottom-width:4px; border-radius:16px;
  cursor:pointer; text-align:left; transition:background .12s, border-color .12s, transform .1s; -webkit-tap-highlight-color:transparent; }
.ex__opt{ min-height:60px; padding:14px 18px; font-size:1.08rem; font-weight:600; line-height:1.3; }
.ex__opt:active, .ex__chip:active{ transform:translateY(2px); }
.ex__opt[aria-checked="true"], .ex__chip.is-sel{ border-color:#84b9e8; background:#e8f2fc; }
.ex__opt.is-right, .ex__chip.is-right{ border-color:var(--ok); background:var(--ok-tint); color:#1f5f29; }
.ex__opt.is-wrong, .ex__chip.is-wrong{ border-color:var(--bad); background:var(--bad-tint); color:#8a2219; animation:shake .35s; }
.is-locked .ex__opt, .is-locked .ex__chip{ cursor:default; }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.ex__opts--tf{ flex-direction:row; } .ex__opts--tf .ex__opt{ flex:1; text-align:center; font-family:var(--display); font-weight:800; font-size:1.4rem; min-height:70px; }
.ex__statement{ position:relative; font-family:var(--display); font-weight:800; font-size:clamp(1.6rem, 5.4vw, 2.1rem); line-height:1.12;
  background:var(--concrete); border-radius:18px; padding:24px 20px; margin-bottom:22px; text-wrap:balance; }
.stamp{ position:absolute; right:12px; bottom:-14px; font-family:var(--display); font-weight:800; font-size:2.1rem; letter-spacing:.06em; padding:2px 14px;
  border:5px double currentColor; border-radius:10px; transform:rotate(-12deg); background:rgba(255,255,255,.75);
  animation:stamp .32s cubic-bezier(.3,1.6,.5,1) both; mix-blend-mode:multiply; }
.stamp--falsch{ color:var(--bad); } .stamp--richtig{ color:var(--ok); }
@keyframes stamp{ from{ transform:rotate(-12deg) scale(2.4); opacity:0; } 60%{ opacity:1; } to{ transform:rotate(-12deg) scale(1); } }
.ex__gap{ font-size:1.35rem; line-height:1.7; font-weight:600; margin-bottom:24px; }
.ex__slot{ display:inline-block; min-width:110px; border-bottom:3px solid var(--navy); text-align:center; padding:0 8px; margin:0 4px; color:var(--green-deep); }
.ex__slot.is-filled{ border-bottom-color:#84b9e8; background:#e8f2fc; border-radius:8px 8px 0 0; }
.ex__slot.is-right{ background:var(--ok-tint); border-bottom-color:var(--ok); } .ex__slot.is-wrong{ background:var(--bad-tint); border-bottom-color:var(--bad); color:var(--bad); }
.ex__opts--chips{ flex-direction:row; flex-wrap:wrap; } .ex__opts--chips .ex__opt{ min-height:52px; padding:10px 16px; }
.ex__chip{ padding:11px 15px; font-size:1rem; font-weight:600; line-height:1.25; }
.ex__line{ list-style:none; padding:10px; margin:0 0 18px; min-height:130px; border:2px dashed var(--line); border-radius:16px; display:flex; flex-direction:column; gap:8px; counter-reset:o; }
.ex__line li{ display:flex; align-items:center; gap:10px; counter-increment:o; }
.ex__line li::before{ content:counter(o); font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--ink-2); width:18px; flex:none; }
.ex__line .ex__chip{ flex:1; }
.ex__bank{ display:flex; flex-wrap:wrap; gap:10px; }
.ex__match{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ex__col{ display:flex; flex-direction:column; gap:10px; }
.ex__chip--m{ min-height:64px; font-size:.98rem; }
.ex__chip--m.is-right{ opacity:.55; }
.ex__text{ width:100%; font:inherit; font-size:1.08rem; line-height:1.5; padding:14px 16px; border:2px solid var(--line); border-radius:16px; resize:vertical; color:var(--navy); }
.ex__text:focus{ outline:none; border-color:#84b9e8; }
.ex__hint{ font-size:.88rem; color:var(--ink-2); margin-top:8px; }
.ex__reflect{ margin-top:18px; background:var(--info-tint); border-radius:16px; padding:18px 20px; }
.ex__reflect ul{ padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.ex__reflect blockquote{ margin:14px 0 0; padding:12px 16px; background:#fff; border-radius:12px; font-style:italic; line-height:1.5; }

/* Abschluss */
.ex--done{ text-align:center; padding-top:50px; position:relative; }
.ex--done .ex__kicker{ font-size:1.1rem; }
.done-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px; }
.done-stats div{ position:relative; z-index:1; background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px 6px; animation:pop .45s cubic-bezier(.3,1.6,.5,1) both; }
.done-stats div:nth-child(2){ animation-delay:.12s; } .done-stats div:nth-child(3){ animation-delay:.24s; }
.done-stats b{ display:block; font-family:var(--display); font-weight:800; font-size:2rem; color:var(--green-deep); }
.done-stats small{ font-weight:700; color:var(--ink-2); }
.done-level{ margin-top:18px; font-weight:800; color:#c99a1e; font-size:1.2rem; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } }
.confetti{ position:absolute; inset:0 0 auto; height:0; pointer-events:none; }
.confetti i{ position:absolute; left:var(--x); top:-10px; width:9px; height:14px; border-radius:2px; transform:rotate(var(--r));
  animation:fall 1.6s var(--d) ease-in both; background:var(--green); }
.confetti i[style*="--c:1"]{ background:#f2c94c; } .confetti i[style*="--c:2"]{ background:#84b9e8; } .confetti i[style*="--c:3"]{ background:#e86a8a; } .confetti i[style*="--c:4"]{ background:var(--navy); }
@keyframes fall{ from{ transform:translateY(0) rotate(var(--r)); opacity:1; } to{ transform:translateY(70vh) rotate(calc(var(--r) + 540deg)); opacity:0; } }

/* Freischalten */
.learn-gate{ border:0; border-radius:22px; padding:26px 22px 22px; width:min(560px, calc(100% - 24px)); max-height:calc(100dvh - 24px); color:var(--navy); }
.learn-gate::backdrop{ background:rgba(10,43,71,.55); }
.learn-gate h2{ font-family:var(--display); font-weight:800; font-size:2rem; line-height:1.05; margin-bottom:10px; }
.learn-gate > p{ color:var(--ink-2); margin-bottom:16px; font-size:1rem; }
.learn-gate__x{ position:absolute; right:10px; top:10px; width:40px; height:40px; border:0; cursor:pointer; background:center/20px no-repeat transparent
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5569' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.learn-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:var(--navy); color:#fff; font-weight:700;
  padding:14px 20px; border-radius:14px; box-shadow:0 12px 30px -10px rgba(10,43,71,.5); max-width:calc(100% - 32px); }

@media(prefers-reduced-motion:reduce){
  .learn-node--current, .learn-node__start, .stamp, .done-stats div, .lesson__fb{ animation:none !important; }
  .ex.is-in{ animation:none; }
}

/* =================== v2: Start-Grafik, „So geht's“, PC-Layout, Lernkarten, Feedback-Icons =================== */
.learn-start__grid{ display:grid; gap:24px; align-items:center; }
@media(min-width:960px){ .learn-start__grid{ grid-template-columns:1.2fr .8fr; gap:48px; } }
.learn-start__art{ position:relative; height:200px; display:none; }
@media(min-width:960px){ .learn-start__art{ display:block; height:260px; } }
.learn-start__art::before{ content:""; position:absolute; left:50%; top:10px; bottom:10px; width:14px; margin-left:-7px; border-radius:14px;
  background:repeating-linear-gradient(to bottom, var(--asphalt) 0 22px, transparent 22px 34px); }
.art-node{ position:absolute; left:50%; width:64px; height:58px; margin-left:-32px; border-radius:50%; background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; }
.art-node:nth-child(1){ top:0; transform:translateX(-56px); } .art-node:nth-child(2){ top:66px; transform:translateX(40px); }
.art-node:nth-child(3){ top:132px; transform:translateX(-30px); } .art-node:nth-child(4){ top:198px; transform:translateX(50px); }
.art-node--done{ background:#f2c94c; box-shadow:0 6px 0 #c99a1e; } .art-node--now{ background:var(--green); box-shadow:0 6px 0 #2f6326; animation:node-pulse 2s infinite; }
.art-badge{ position:absolute; font-family:var(--display); font-weight:800; padding:6px 14px; border-radius:12px; }
.art-badge--xp{ right:4%; top:30px; background:#fff; color:var(--green-deep); border:2px solid var(--line); animation:bob 2.2s ease-in-out infinite; }
.art-badge--stamp{ left:2%; top:150px; color:#2f8f3e; border:4px double currentColor; transform:rotate(-12deg); background:rgba(255,255,255,.8); font-size:1.3rem; }

.learn-how{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; max-width:760px; }
@media(min-width:760px){ .learn-how{ grid-template-columns:repeat(3, 1fr); } }
.learn-how__item{ display:flex; flex-direction:column; gap:2px; padding:16px 16px 16px 64px; position:relative; background:#fff; border-radius:16px; border:2px solid var(--line); font-size:.95rem; line-height:1.35; }
.learn-how__item b{ font-size:1.02rem; }
.learn-how__item span{ color:var(--ink-2); }
.learn-how__item::before{ content:""; position:absolute; left:14px; top:16px; width:38px; height:38px; border-radius:12px; background:var(--green-tint) center/22px no-repeat; }
.learn-how__item--a::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
.learn-how__item--b::before{ background-color:#fdf3d4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c99a1e'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17l-6.1 3.4 1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E"); }
.learn-how__item--c::before{ background-color:#e6eef6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316436b' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E"); }

/* Lernpfad am PC: Pfad mittig, rechts Fortschritt + Hinweis */
.learn-path__grid{ display:grid; gap:24px; }
.learn-side{ display:none; }
@media(min-width:1000px){
  .learn-path__grid{ grid-template-columns:minmax(0, 1fr) 320px; gap:40px; align-items:start; }
  .learn-chapters{ max-width:none; }
  .learn-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:170px; margin-top:68px; }
  .learn-nodes li{ transform:translateX(calc(sin(var(--i) * 1.4rad) * 110px)); }
}
.learn-side__card{ background:#fff; border:2px solid var(--line); border-radius:22px; padding:20px; }
.learn-side__label{ font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; color:var(--green-deep); }
.learn-ring{ --p:0; width:140px; height:140px; margin:14px auto 10px; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--green) calc(var(--p) * 360deg), var(--asphalt) 0); transition:background .6s; }
.learn-ring b{ font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1; }
.learn-ring small{ font-weight:700; color:var(--ink-2); }
.learn-side__nums{ display:grid; gap:8px; margin:6px 0 0; }
.learn-side__nums div{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px; }
.learn-side__nums dt{ color:var(--ink-2); font-weight:600; } .learn-side__nums dd{ margin:0; font-weight:800; }
.learn-side__card--cta{ background:var(--navy); color:#fff; border-color:var(--navy); display:flex; flex-direction:column; gap:14px; }
.learn-side__card--cta .btn{ background:#fff; color:var(--navy); }

/* Lernkarte: Illustration, Zähler, hervorgehobene Zahlen */
.tcard{ --tc:var(--green); --tt:#e7f3e3; }
.tcard--c1{ --tc:#2f78c4; --tt:#e5f0fb; } .tcard--c2{ --tc:#d98a12; --tt:#fdf1dc; } .tcard--c3{ --tc:#b8487a; --tt:#fbe8f0; }
.tcard__art{ position:relative; height:150px; border-radius:24px; background:var(--tt); margin-bottom:18px; overflow:hidden; display:grid; place-items:center; }
.tcard__art .ic{ width:96px; height:96px; border-radius:30px; background:#fff; color:var(--tc); display:grid; place-items:center;
  box-shadow:0 10px 0 color-mix(in srgb, var(--tc) 30%, transparent); animation:pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.tcard__art .ic svg{ width:56px; height:56px; }
.tcard__dot{ position:absolute; border-radius:50%; background:var(--tc); opacity:.18; }
.tcard__dot--a{ width:120px; height:120px; left:-30px; top:-40px; } .tcard__dot--b{ width:60px; height:60px; right:14%; bottom:-18px; }
.tcard__dot--c{ width:22px; height:22px; right:22%; top:22px; opacity:.4; animation:bob 2.4s ease-in-out infinite; }
.tcard__count{ font-weight:800; color:var(--tc); font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.tcard__text{ font-size:1.3rem; line-height:1.55; }
.tcard__text mark{ background:var(--tt); color:var(--tc); font-weight:800; padding:0 4px; border-radius:6px; }
@media(min-width:760px){ .tcard__art{ height:190px; } .tcard__text{ font-size:1.45rem; } }

/* Feedback mit Icon; am PC: Feedback links, Knopf rechts */
.lesson__footin{ max-width:720px; margin:0 auto; }
.lesson__fb{ display:flex; gap:14px; align-items:flex-start; }
.lesson__fb-icon{ flex:none; width:52px; height:52px; border-radius:50%; background:#fff center/28px no-repeat; }
.lesson.is-ok .lesson__fb-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f3e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); animation:pop .4s cubic-bezier(.3,1.6,.5,1); }
.lesson.is-bad .lesson__fb-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8372d' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); animation:shake .35s; }
.lesson.is-info .lesson__fb-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316436b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V17h5v-1.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.lesson__foot > *{ max-width:none; }
@media(min-width:900px){
  .lesson__footin{ display:flex; align-items:center; gap:24px; max-width:1000px; min-height:96px; }
  .lesson__fb{ flex:1; margin-bottom:0; }
  .lesson__btn{ width:220px; flex:none; margin-left:auto; }
  .lesson__body{ max-width:820px; padding-top:30px; }
  .ex__opts--tf .ex__opt{ min-height:90px; font-size:1.7rem; }
  .ex__opt{ font-size:1.15rem; }
}
@media(prefers-reduced-motion:reduce){ .tcard__art .ic, .tcard__dot--c, .art-node--now, .art-badge--xp{ animation:none !important; } }
@media(min-width:960px){
  .learn-topics, .learn-how{ max-width:none; }
  .learn-topic{ min-height:190px; padding:22px 20px 18px; }
  .learn-topic__icon{ width:56px; height:56px; background-size:34px; }
  .learn-topic__name{ font-size:1.9rem; }
  .learn-start__head{ max-width:none; }
}

/* Eigenes Modal statt Browser-Dialog */
.learn-modal{ border:0; border-radius:24px; padding:28px 24px 22px; width:min(420px, calc(100% - 32px)); text-align:center; color:var(--navy); }
.learn-modal::backdrop{ background:rgba(10,43,71,.55); }
.learn-modal[open]{ animation:modal-in .28s cubic-bezier(.3,1.4,.5,1); }
@keyframes modal-in{ from{ transform:translateY(20px) scale(.96); opacity:0; } }
.learn-modal__icon{ display:block; width:72px; height:72px; margin:0 auto 12px; border-radius:50%; background:#fdf1dc center/38px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d98a12' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l9.5 17h-19z'/%3E%3Cpath d='M12 10v4M12 17.5v.5'/%3E%3C/svg%3E"); }
.learn-modal h2{ font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:1.1; }
.learn-modal p{ color:var(--ink-2); margin:8px 0 20px; }
.learn-modal__btns{ display:flex; flex-direction:column; gap:10px; }
.learn-modal__quit{ font:inherit; font-weight:800; text-transform:uppercase; letter-spacing:.02em; min-height:52px; border-radius:16px; cursor:pointer;
  color:var(--bad); background:#fff; border:2px solid var(--line); }
.learn-modal__quit:hover{ border-color:var(--bad); }
.learn-modal, .learn-gate{ margin:auto; }