/* 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; }

/* =================== v3: Straße mit Auto (Startgrafik) =================== */
.learn-road{ --s:1; position:relative; width:calc(440px * var(--s)); height:calc(330px * var(--s)); justify-self:center; }
.learn-road__stage{ position:absolute; left:0; top:calc(30px * var(--s)); width:440px; height:300px; transform:scale(var(--s)); transform-origin:0 0; }
@media(max-width:959px){ .learn-road{ --s:.74; margin:4px auto -6px; } }
@media(max-width:380px){ .learn-road{ --s:.66; } }
.learn-road__svg{ position:absolute; inset:0; overflow:visible; }
.learn-road__asphalt{ fill:none; stroke:#cfd8e1; stroke-width:30; stroke-linecap:round; }
.learn-road__lane{ fill:none; stroke:#fff; stroke-width:3; stroke-dasharray:12 12; stroke-linecap:round; animation:road-lane 1.1s linear infinite; }
@keyframes road-lane{ to{ stroke-dashoffset:-24; } }
.road-node{ position:absolute; left:var(--x); top:var(--y); width:48px; height:44px; margin:-26px 0 0 -24px; border-radius:50%;
  background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; animation:var(--anim) 8s ease-in-out infinite; }
.road-node--1{ background:var(--green); box-shadow:0 6px 0 #2f6326; --anim:none; }
.road-node--2{ --anim:road-n2; } .road-node--3{ --anim:road-n3; } .road-node--4{ --anim:road-n4; }
.road-node--4 i{ position:absolute; left:50%; bottom:28px; width:3px; height:30px; background:#0d2235; border-radius:2px; }
.road-node--4 i::after{ content:""; position:absolute; left:3px; top:0; width:22px; height:15px;
  background:conic-gradient(#0d2235 25%, #fff 0 50%, #0d2235 0 75%, #fff 0) 0 0/10px 7.5px; border-radius:0 3px 3px 0;
  transform-origin:0 50%; animation:road-flag 1.2s ease-in-out infinite alternate; }
@keyframes road-flag{ to{ transform:skewY(-8deg) scaleX(.9); } }
@keyframes road-n2{ 0%, 21%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; transform:none; } 23%{ transform:scale(1.18); } 26%, 94%{ background:#f2c94c; box-shadow:0 6px 0 #c99a1e; transform:none; } 100%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; } }
@keyframes road-n3{ 0%, 45%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; transform:none; } 47%{ transform:scale(1.18); } 50%, 94%{ background:#f2c94c; box-shadow:0 6px 0 #c99a1e; transform:none; } 100%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; } }
@keyframes road-n4{ 0%, 69%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; transform:none; } 71%{ transform:scale(1.22); } 74%, 94%{ background:var(--green); box-shadow:0 6px 0 #2f6326; transform:none; } 100%{ background:#cfd8e1; box-shadow:0 6px 0 #aebbc7; } }

.road-car{ position:absolute; left:0; top:0; width:44px; height:26px; z-index:3;
  offset-path:path('M 26 268 C 150 276, 110 168, 220 160 S 318 52, 414 36'); offset-rotate:auto; offset-anchor:50% 50%;
  filter:drop-shadow(0 4px 3px rgb(13 34 53 / .3)); animation:road-car 8s cubic-bezier(.45,0,.35,1) infinite; }
@keyframes road-car{
  0%{ offset-distance:6%; opacity:0; } 4%{ opacity:1; }
  6%{ offset-distance:6%; } 22%{ offset-distance:38%; } 30%{ offset-distance:38%; }
  46%{ offset-distance:66%; } 54%{ offset-distance:66%; } 70%{ offset-distance:96%; }
  92%{ offset-distance:96%; opacity:1; } 98%, 100%{ offset-distance:96%; opacity:0; } }

.road-xp{ position:absolute; left:var(--x); top:var(--y); z-index:4; margin:-62px 0 0 -30px; padding:4px 10px; border-radius:10px;
  background:#fff; border:2px solid var(--line); color:var(--green-deep); font-family:var(--display); font-weight:800; font-size:.95rem;
  white-space:nowrap; opacity:0; animation:var(--anim) 8s ease-out infinite; }
.road-xp--2{ --anim:road-x2; } .road-xp--3{ --anim:road-x3; } .road-xp--4{ --anim:road-x4; background:#f2c94c; border-color:#c99a1e; color:#4a3500; }
@keyframes road-x2{ 0%, 21%{ opacity:0; transform:translateY(10px) scale(.6); } 25%{ opacity:1; transform:translateY(0) scale(1.08); } 28%, 40%{ opacity:1; transform:none; } 48%, 100%{ opacity:0; transform:translateY(-16px); } }
@keyframes road-x3{ 0%, 45%{ opacity:0; transform:translateY(10px) scale(.6); } 49%{ opacity:1; transform:translateY(0) scale(1.08); } 52%, 64%{ opacity:1; transform:none; } 72%, 100%{ opacity:0; transform:translateY(-16px); } }
@keyframes road-x4{ 0%, 69%{ opacity:0; transform:translateY(10px) scale(.6); } 73%{ opacity:1; transform:translateY(0) scale(1.12); } 76%, 90%{ opacity:1; transform:none; } 96%, 100%{ opacity:0; transform:translateY(-16px); } }

.road-stamp{ position:absolute; left:10px; top:40px; z-index:5; padding:4px 14px; color:#2f8f3e; border:4px double currentColor; border-radius:8px;
  background:rgb(255 255 255 / .9); font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:.04em;
  opacity:0; animation:road-stamp 8s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes road-stamp{ 0%, 75%{ opacity:0; transform:rotate(-12deg) scale(2.4); } 79%, 92%{ opacity:1; transform:rotate(-12deg) scale(1); } 98%, 100%{ opacity:0; transform:rotate(-12deg) scale(1); } }

.road-spark{ position:absolute; left:var(--x); top:var(--y); z-index:2; width:8px; height:8px; margin:-30px 0 0 -4px; border-radius:2px; opacity:0;
  animation:road-spark 8s ease-out infinite; }
.road-spark--a{ background:#f2c94c; --dx:-44px; --dy:-46px; } .road-spark--b{ background:#4c903e; --dx:40px; --dy:-52px; } .road-spark--c{ background:#2f78c4; --dx:6px; --dy:-70px; }
@keyframes road-spark{ 0%, 70%{ opacity:0; transform:translate(0,0) rotate(0); } 72%{ opacity:1; } 86%{ opacity:0; transform:translate(var(--dx), var(--dy)) rotate(200deg); } 100%{ opacity:0; } }

.learn-road.is-paused *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .learn-road *{ animation:none !important; }
  .road-car{ offset-distance:66%; } .road-node--2, .road-node--3{ background:#f2c94c; box-shadow:0 6px 0 #c99a1e; }
}

/* =================== v3: Themenkarten mit Farbe, Auftritt und Hover =================== */
.learn-topic{ --ac:#3d7a31; --at:#e7f3e3; position:relative; overflow:hidden; transition:transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, border-color .2s; }
.learn-topic--alkohol{ --ac:#c98a12; --at:#fdf1dc; } .learn-topic--cannabis{ --ac:#3d7a31; --at:#e7f3e3; }
.learn-topic--drogen{ --ac:#8a4fc4; --at:#f1e8fb; } .learn-topic--punkte{ --ac:#2f78c4; --at:#e5f0fb; }
.learn-topic::before{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; background:var(--at); transition:transform .4s cubic-bezier(.3,1.4,.5,1); z-index:0; }
.learn-topic > *{ position:relative; z-index:1; }
.learn-topic__icon{ background-color:#fff !important; box-shadow:0 4px 0 color-mix(in srgb, var(--ac) 25%, transparent); transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.learn-topic__bar i{ background:var(--ac); transition:width 1s cubic-bezier(.22,1,.36,1); }
.learn-topic:hover{ transform:translateY(-4px); border-color:var(--ac); box-shadow:0 14px 30px color-mix(in srgb, var(--ac) 22%, transparent); }
.learn-topic:hover::before{ transform:scale(1.6); }
.learn-topic:hover .learn-topic__icon{ transform:translateY(-3px) rotate(-8deg) scale(1.08); }
.learn-topic{ animation:topic-in .6s cubic-bezier(.3,1.4,.5,1) both; }
.learn-topic:nth-child(2){ animation-delay:.08s; } .learn-topic:nth-child(3){ animation-delay:.16s; } .learn-topic:nth-child(4){ animation-delay:.24s; }
@keyframes topic-in{ from{ opacity:0; transform:translateY(18px) scale(.96); } }
@media (prefers-reduced-motion: reduce){ .learn-topic, .learn-topic__icon{ animation:none !important; transition:none; } }

/* =================== v3: Richtig-Effekte in der Lektion =================== */
.burst{ position:fixed; z-index:9999; width:0; height:0; pointer-events:none; }
.burst i{ position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:3px; background:var(--c); animation:burst .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes burst{ from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--dx), var(--dy)) rotate(260deg) scale(.4); opacity:0; } }
.xp-fly{ position:fixed; z-index:9999; pointer-events:none; padding:4px 12px; border-radius:12px; background:#f2c94c; color:#4a3500;
  font-family:var(--display); font-weight:800; box-shadow:0 6px 16px rgb(201 154 30 / .35);
  transition:transform .75s cubic-bezier(.5,-0.3,.4,1), opacity .75s ease-in; }
.lesson__xp.is-bump{ animation:xp-bump .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes xp-bump{ 40%{ transform:scale(1.45); color:#c99a1e; } }
.combo{ position:fixed; left:50%; top:84px; z-index:9999; transform:translateX(-50%); pointer-events:none; padding:8px 18px; border-radius:999px;
  background:linear-gradient(135deg, #ff9a3c, #e8551d); color:#fff; font-family:var(--display); font-weight:800; font-size:1.15rem;
  box-shadow:0 10px 26px rgb(232 85 29 / .35); animation:combo 1.6s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes combo{ 0%{ opacity:0; transform:translate(-50%, 14px) scale(.6); } 18%{ opacity:1; transform:translate(-50%, 0) scale(1.08); } 30%, 78%{ transform:translate(-50%, 0) scale(1); opacity:1; } 100%{ opacity:0; transform:translate(-50%, -16px) scale(.96); } }
.lesson.is-ok .ex__opt.is-right[aria-checked="true"], .lesson.is-ok .ex__chip.is-right, .lesson.is-ok .tf.is-right{ animation:right-pop .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes right-pop{ 40%{ transform:scale(1.04); box-shadow:0 0 0 8px rgb(76 144 62 / .18); } }
@media (prefers-reduced-motion: reduce){ .lesson.is-ok .ex__opt.is-right{ animation:none; } }
/* Abbrechen-Fenster: beide Knöpfe volle Breite, mittig (Lektions-Knopf ist am PC sonst rechtsbündig) */
.learn-modal__btns .lesson__btn, .learn-modal__btns .learn-modal__quit{ width:100%; max-width:none; min-width:0; margin:0; align-self:stretch; justify-content:center; text-align:center; }

/* ===================================================================== Redesign 10/2026 */
/* ---------- Hero mit Foto ---------- */
.learn{ padding-top:0; }
.learn-hero{ background:linear-gradient(180deg, #fff 0%, var(--concrete) 100%); padding:34px 0 40px; border-bottom:1px solid var(--line); }
@media(min-width:960px){ .learn-hero{ padding:56px 0 64px; } }
.learn-hero__grid{ display:grid; gap:28px; align-items:center; }
@media(min-width:960px){ .learn-hero__grid{ grid-template-columns:1fr minmax(0, 560px); gap:56px; } }
.learn-hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 7vw, 4rem); line-height:1; text-wrap:balance; }
.learn-hero__nums{ list-style:none; padding:0; margin:24px 0 26px; display:flex; gap:10px; flex-wrap:wrap; }
.learn-hero__nums li{ background:#fff; border:2px solid var(--line); border-radius:16px; padding:10px 16px; display:flex; flex-direction:column; min-width:96px; }
.learn-hero__nums b{ font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--green-deep); }
.learn-hero__nums span{ font-size:.85rem; font-weight:600; color:var(--ink-2); }
.learn-hero__go{ box-shadow:0 5px 0 #2f6326; }
.learn-hero__photo{ position:relative; margin:0; border-radius:28px; aspect-ratio:9/5; box-shadow:0 30px 60px -30px rgba(10,43,71,.45); }
.learn-hero__photo img{ width:100%; height:100%; object-fit:cover; border-radius:28px; }
.learn-hero__badge{ position:absolute; font-weight:800; border-radius:14px; padding:8px 14px; background:#fff; box-shadow:0 10px 24px -10px rgba(10,43,71,.45); font-size:.95rem; white-space:nowrap; }
.learn-hero__badge--xp{ left:-14px; top:18%; color:var(--green-deep); }
.learn-hero__badge--streak{ right:-10px; top:-14px; color:#d9731a; }
.learn-hero__badge--ok{ right:18px; bottom:-16px; font-family:var(--display); letter-spacing:.08em; color:var(--ok); border:4px double var(--ok); transform:rotate(-8deg); }
@media(max-width:959px){ .learn-hero__badge--xp{ left:10px; } .learn-hero__badge--streak{ right:10px; } }
@media(prefers-reduced-motion:no-preference){
  .learn-hero__badge{ animation:badge-in .6s var(--ease) both; }
  .learn-hero__badge--streak{ animation-delay:.25s; } .learn-hero__badge--ok{ animation-delay:.5s; }
  .learn-hero__badge--xp{ animation:badge-in .6s var(--ease) both, bob 2.4s ease-in-out .8s infinite; }
}
@keyframes badge-in{ from{ opacity:0; transform:translateY(12px) scale(.9); } }

/* ---------- Themenkarten mit Bild ---------- */
.learn-start__ask{ margin:40px 0 16px; scroll-margin-top:100px; }
.learn-topics{ max-width:none; gap:16px; }
@media(min-width:760px){ .learn-topics{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media(min-width:1100px){ .learn-topics{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.learn-topic{ padding:0; min-height:0; gap:0; overflow:hidden; border-radius:22px; border-bottom-width:6px; background:#fff; }
.learn-topic:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(10,43,71,.5); }
.learn-topic__img{ display:block; width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; }
.learn-topic__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.learn-topic:hover .learn-topic__img img{ transform:scale(1.05); }
.learn-topic__img::after{ content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(transparent, rgba(10,43,71,.35)); }
.learn-topic__body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; width:100%; }
.learn-topic__name{ margin-top:0; font-size:1.7rem; }
.learn-topic__go{ align-self:flex-start; margin-top:8px; font-weight:800; font-size:.95rem; color:#fff; background:var(--green-deep); border-radius:12px; padding:8px 16px; box-shadow:0 4px 0 #2f6326; }
.learn-topic__go::after{ content:" →"; }
.learn-topic__bar{ margin-top:4px; }

/* ---------- Drei Schritte ---------- */
.learn-steps{ list-style:none; counter-reset:st; padding:0; margin:22px 0 0; display:grid; gap:12px; }
@media(min-width:860px){ .learn-steps{ grid-template-columns:repeat(3, 1fr); } }
.learn-steps li{ counter-increment:st; position:relative; background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px 16px 16px 66px; display:flex; flex-direction:column; gap:2px; font-size:.95rem; line-height:1.35; }
.learn-steps li::before{ content:counter(st); position:absolute; left:16px; top:14px; width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1.3rem; color:#fff; background:var(--green); box-shadow:0 3px 0 #2f6326; }
.learn-steps li:nth-child(2)::before{ background:var(--navy); box-shadow:0 3px 0 #061b2e; }
.learn-steps li:nth-child(3)::before{ background:#f2c94c; color:var(--navy); box-shadow:0 3px 0 #c99a1e; }
.learn-steps b{ font-size:1.02rem; } .learn-steps span{ color:var(--ink-2); }

/* ---------- Kapitel mit Bild + Nummer ---------- */
.learn-chapters{ max-width:720px; }
.learn-ch{ border-radius:26px; box-shadow:0 18px 40px -32px rgba(10,43,71,.45); }
.learn-ch__head{ position:relative; display:flex; gap:16px; align-items:flex-start; padding:22px 22px 26px; min-height:150px;
  background:var(--green-deep) var(--bild, none) center/cover no-repeat; isolation:isolate; }
.learn-ch__head::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(47,99,38,.96) 0%, rgba(47,99,38,.82) 55%, rgba(47,99,38,.45) 100%); }
.learn-ch--2 .learn-ch__head::before{ background:linear-gradient(100deg, rgba(10,43,71,.96) 0%, rgba(10,43,71,.82) 55%, rgba(10,43,71,.45) 100%); }
.learn-ch--3 .learn-ch__head::before{ background:linear-gradient(100deg, rgba(92,52,150,.95) 0%, rgba(92,52,150,.8) 55%, rgba(92,52,150,.42) 100%); }
.learn-ch:nth-child(2) .learn-ch__head{ background-color:var(--navy); }
.learn-ch__num{ flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:#fff; color:var(--navy);
  font-family:var(--display); font-weight:800; font-size:1.8rem; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.learn-ch.is-done .learn-ch__num{ background:#f2c94c; }
.learn-ch__txt{ min-width:0; }
.learn-ch__head h2{ font-size:1.75rem; text-shadow:0 1px 12px rgba(0,0,0,.2); }
.learn-ch__bar{ position:absolute; left:22px; right:22px; bottom:12px; height:6px; border-radius:6px; background:rgba(255,255,255,.25); overflow:hidden; }
.learn-ch__bar i{ display:block; height:100%; background:#f2c94c; border-radius:6px; transition:width .6s var(--ease); }
.learn-ch.is-gated .learn-ch__head{ filter:saturate(.7); }
.learn-ch.is-locked{ border-radius:22px; }

/* Straße zwischen den Knoten */
.learn-nodes{ position:relative; }
.learn-nodes li{ z-index:1; }
.learn-nodes__road{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:visible; }
.learn-nodes__asphalt{ fill:none; stroke:var(--asphalt); stroke-width:22; stroke-linecap:round; }
.learn-nodes__driven{ fill:none; stroke:#cfe8c8; stroke-width:22; stroke-linecap:round; }
.learn-nodes__lane{ fill:none; stroke:#fff; stroke-width:3; stroke-dasharray:10 12; stroke-linecap:round; }
.learn-node__label{ background:rgba(255,255,255,.92); border-radius:10px; padding:2px 8px; }

/* Gate-Karte deutlicher */
.learn-gatecard{ background:linear-gradient(135deg, #f1ebfa, #eef5ec); border:2px dashed #b9a6dd; }

/* ---------- Lernkarte mit Foto ---------- */
.tcard__art--foto{ padding:0; overflow:hidden; position:relative; height:auto; aspect-ratio:12/5; background:none; }
.tcard__art--foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.tcard__art--foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(10,43,71,.35)); }
.tcard__ic{ position:absolute; left:16px; bottom:-0px; z-index:1; width:64px; height:64px; border-radius:18px; background:#fff; display:grid; place-items:center;
  transform:translateY(-14px); box-shadow:0 8px 18px -8px rgba(10,43,71,.5); }
.tcard__ic svg{ width:34px !important; height:34px !important; }
.tcard .tcard__art--foto{ height:auto !important; display:block; }
.tcard__ic .ic{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; color:var(--tc); }
.learn-ch:nth-child(2) .learn-ch__head{ background:var(--navy) var(--bild, none) center/cover no-repeat; }
.learn-ch.is-locked .learn-ch__head{ display:block; min-height:0; background:transparent; padding:18px 20px 18px 58px; }
.learn-ch.is-locked .learn-ch__head h2{ text-shadow:none; }
.learn-ch--4 .learn-ch__head::before{ background:linear-gradient(100deg, rgba(166,82,18,.95) 0%, rgba(166,82,18,.8) 55%, rgba(166,82,18,.42) 100%); }
/* iOS: Seite hinter der Lektion fest verankern (Safari ignoriert overflow:hidden am html) */
html.is-lesson body{ position:fixed; top:0; left:0; right:0; width:100%; }
.lesson{ top:0; bottom:0; height:auto; min-height:100%; }

/* Kartenwechsel: Farbwisch + neue Karte kommt von rechts */
.wipe{ position:absolute; left:0; right:0; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, var(--wa) 0 14%, var(--wt) 14% 100%); }
.ex.is-in{ animation:ex-in-neu .46s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes ex-in-neu{ from{ opacity:0; transform:translateX(42px) scale(.97); } to{ opacity:1; transform:none; } }
.ex.is-in > *{ animation:ex-stagger .5s cubic-bezier(.2,.9,.25,1) both; }
.ex.is-in > :nth-child(2){ animation-delay:.05s; } .ex.is-in > :nth-child(3){ animation-delay:.1s; } .ex.is-in > :nth-child(n+4){ animation-delay:.15s; }
@keyframes ex-stagger{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion: reduce){ .wipe{ display:none; } .ex.is-in, .ex.is-in > *{ animation:none; } }

/* Kartenwechsel: geschwungene Farbwelle mit Streifen */
.wipe{ background:none; overflow:hidden; }
.wipe__band{ position:absolute; top:0; bottom:0; left:0; will-change:transform; }