/* =====================================================================
   Designs (Einstellungen → Design). „Klassisch“ = styles.css ohne Zusatz.
   Jedes Design: 1) Farben & Schriften für alle Seiten  2) Startseite  3) Lernkarte
   ===================================================================== */

/* ---------- gemeinsame Bausteine ---------- */
.sk-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border: 0; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700;
  min-height: 54px; padding: 12px 18px; background: var(--accent); color: var(--accent-ink); border-radius: 14px;
}
.sk-done { text-align: center; color: var(--muted); margin: 6px 0 10px; }
.sk-level { margin-top: 16px; }

/* =====================================================================
   1 · BORDKARTE – Abflugtafel, Flugroute, Tickets
   ===================================================================== */
html:root[data-style="bordkarte"] {
  --bg: #E6E9EE; --surface: #ffffff; --surface-2: #eef1f6; --ink: #0E2240; --muted: #5c6b82; --line: #d3d9e3;
  --accent: #0E2240; --accent-ink: #FFC72C; --accent-soft: #fff1c4; --marker: #FFC72C; --marker-soft: #fff3cc;
  --ok: #1d8a5a; --bad: #d64545; --a1: #e0a100; --a2: #d07b00; --b1: #1d8a5a; --b2: #2f5f9f; --c1: #6b3fa0;
  --radius: 10px; --shadow: 0 1px 0 rgba(14, 34, 64, .06), 0 8px 20px -14px rgba(14, 34, 64, .4);
  --serif: "Barlow Condensed", "TeX Gyre Heros Cn", "Arial Narrow", sans-serif; --sans: "Inter", system-ui, sans-serif; color-scheme: light;
}
[data-style="bordkarte"] h1, [data-style="bordkarte"] h2, [data-style="bordkarte"] h3 { font-weight: 700; letter-spacing: 0; }
[data-style="bordkarte"] h2 { font-size: 1.35rem; }
[data-style="bordkarte"] .btn { border-radius: 8px; }
[data-style="bordkarte"] .btn.primary { background: #FFC72C; color: #0E2240; font-family: var(--serif); font-size: 1.15rem; }
[data-style="bordkarte"] .nav { background: #0E2240; border-top: 0; }
[data-style="bordkarte"] .nav a { color: #9fb0c8; }
[data-style="bordkarte"] .nav a.active { color: #FFC72C; background: rgba(255, 199, 44, .12); }
[data-style="bordkarte"] .card { border-left: 4px solid #FFC72C; }
[data-style="bordkarte"] .story-text { font-family: var(--sans); font-weight: 400; }
/* Start */
.sk-bordkarte { margin: calc(-12px - env(safe-area-inset-top)) -16px 0; }
.bk-top { background: #0E2240; color: #fff; padding: calc(env(safe-area-inset-top) + 18px) 22px 18px; }
.bk-bar { display: flex; justify-content: space-between; align-items: center; }
.bk-bar p { margin: 0; color: #9fb0c8; font-size: .9rem; }
.bk-bar .icon-btn { color: #9fb0c8; }
.bk-top h1 { font-size: 2.6rem; line-height: 1; color: #fff; }
.bk-route { position: relative; height: 64px; margin: 18px 12px 4px; }
.bk-line { position: absolute; left: 0; right: 0; top: 18px; border-top: 2px dashed #3d5478; }
.bk-done { position: absolute; left: 0; top: 17px; border-top: 4px solid #FFC72C; }
.bk-stop { position: absolute; top: 9px; transform: translateX(-50%); text-align: center; }
.bk-stop i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #0E2240; border: 3px solid #3d5478; margin: 0 auto; }
.bk-stop.on i { background: #FFC72C; border-color: #FFC72C; }
.bk-stop b { display: block; font-family: var(--serif); font-size: 1rem; margin-top: 6px; color: #fff; }
.bk-plane { position: absolute; top: 2px; transform: translateX(-50%) rotate(90deg); color: #FFC72C; font-size: 1.5rem; }
.bk-board { background: #0b1a33; margin: 14px 16px 0; border-radius: 10px; padding: 10px 12px 4px; color: #FFC72C; font-family: var(--serif); }
.bk-hd, .bk-row { display: grid; grid-template-columns: 1fr 64px 86px; gap: 6px; align-items: center; }
.bk-hd { font-size: .85rem; color: #7f93b3; padding: 0 4px 6px; border-bottom: 1px solid #22385c; }
.bk-row { font-size: 1.25rem; padding: 9px 4px; border-bottom: 1px solid #22385c; text-decoration: none; color: #FFC72C !important; }
.bk-row:last-child { border-bottom: 0; }
.bk-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-row > span:nth-child(2) { color: #fff; }
.bk-st { font-size: .95rem; color: #6fe39b; }
.bk-st.late { color: #ff8a7a; }
.bk-st.dim { color: #7f93b3; }
.bk-actions { margin: 14px 16px 0; }
.bk-go { justify-content: space-between; background: #FFC72C; color: #0E2240; border-radius: 12px; font-family: var(--serif); font-size: 1.6rem; }
.bk-go.alt { justify-content: center; font-size: 1.3rem; }
.bk-topic { display: block; margin: 6px auto 0; color: var(--muted); }
.bk-stamps { display: flex; gap: 10px; margin: 14px 16px 0; }
.bk-stamps > * { flex: 1; background: #fff; border-radius: 10px; padding: 12px; font-size: .78rem; color: #5c6b82; text-decoration: none; }
.bk-stamps b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: #0E2240; }
/* Lernkarte */
[data-style="bordkarte"] body[data-view="learn"], [data-style="bordkarte"] body[data-view="learn"] .app { background: #0E2240; }
[data-style="bordkarte"] body[data-view="learn"] .session-top { color: #9fb0c8; }
[data-style="bordkarte"] body[data-view="learn"] .session-top .icon-btn { color: #9fb0c8; background: transparent; border-color: transparent; }
[data-style="bordkarte"] body[data-view="learn"] .meter { background: #22385c; }
[data-style="bordkarte"] body[data-view="learn"] .meter > div { background: #FFC72C; }
[data-style="bordkarte"] body[data-view="learn"] .muted { color: #9fb0c8; }
.bk-pass { background: #fff; border-radius: 18px; overflow: hidden; color: #0E2240; }
.bk-ph { background: #FFC72C; padding: 12px 18px; display: flex; justify-content: space-between; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.bk-route2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 18px 18px 6px; }
.bk-city { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.bk-city.to { text-align: right; }
.bk-city small { display: block; font-family: var(--sans); font-weight: 400; font-size: .75rem; color: #7a879b; margin-bottom: 4px; }
.bk-arrow { font-size: 1.5rem; color: #c3cbd8; padding-bottom: 6px; }
.bk-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 18px 14px; font-size: .72rem; color: #7a879b; }
.bk-meta b { display: block; color: #0E2240; font-size: 1.05rem; font-family: var(--serif); }
.bk-perf { position: relative; border-top: 2px dashed #d5dbe5; }
.bk-perf::before, .bk-perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: #0E2240; }
.bk-perf::before { left: -12px; } .bk-perf::after { right: -12px; }
.bk-sent { padding: 12px 18px 4px; }
.bk-sent .ex { font-size: 1.1rem; margin: 4px 0; }
.bk-sent .ex-de { color: #7a879b; }
.bk-bc { height: 40px; margin: 8px 18px 18px; background: repeating-linear-gradient(90deg, #0E2240 0 2px, #fff 2px 4px, #0E2240 4px 7px, #fff 7px 9px, #0E2240 9px 10px, #fff 10px 13px); }
.bk-stamps-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.grade.bk-stamp { aspect-ratio: 1; border-radius: 50%; background: transparent !important; border: 3px solid; font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; padding: 8px; transform: rotate(-8deg); }
.grade.bk-stamp.g1 { color: #ff8a7a !important; }
.grade.bk-stamp.g2 { color: #FFC72C !important; transform: rotate(4deg); }
.grade.bk-stamp.g3 { color: #6fe39b !important; transform: rotate(-3deg); }
.grade.bk-stamp small { color: inherit; }
[data-style="bordkarte"] .sk-bordkarte .known-btn, [data-style="bordkarte"] .sk-learn .known-btn { background: transparent; color: #9fb0c8; }
[data-style="bordkarte"] .sk-learn .btn.ghost { background: #22385c; color: #fff; }

/* =====================================================================
   4 · VOKABELHEFT – Linien, Handschrift, Textmarker
   ===================================================================== */
html:root[data-style="heft"] {
  --bg: #FDFDFB; --surface: rgba(255,255,255,.55); --surface-2: #f2f0e6; --ink: #23408E; --muted: #6f7fae; --line: #C9D8F0;
  --accent: #23408E; --accent-ink: #ffffff; --accent-soft: #e3eaf8; --marker: #FFF27A; --marker-soft: #fff9c4;
  --ok: #2b6b3a; --bad: #c2413b; --a1: #c98a00; --a2: #c26a1b; --b1: #2b6b3a; --b2: #23408E; --c1: #8a3b8f;
  --radius: 4px; --shadow: none;
  --serif: "Caveat", "TeX Gyre Chorus", cursive; --sans: "Lora", Georgia, serif; color-scheme: light;
}
[data-style="heft"] body {
  background-color: #FDFDFB;
  background-image: linear-gradient(90deg, transparent 38px, #E8A0A0 38px 40px, transparent 40px), linear-gradient(#C9D8F0 1px, transparent 1px);
  background-size: 100% 100%, 100% 34px; background-attachment: local; color: #23408E;
}
[data-style="heft"] .app { padding-left: 52px; }
[data-style="heft"] h1, [data-style="heft"] h2, [data-style="heft"] h3 { font-weight: 700; letter-spacing: 0; }
[data-style="heft"] h1 { font-size: 2.6rem; }
[data-style="heft"] h2 { font-size: 1.7rem; }
[data-style="heft"] .card { border: 0; border-top: 2px dashed #C9D8F0; border-radius: 0; background: transparent; padding: 12px 0; }
[data-style="heft"] .btn { border: 2px solid #23408E; border-radius: 4px; background: #FDFDFB; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; transform: rotate(-.6deg); }
[data-style="heft"] .btn.primary { background: #23408E; color: #fff; }
[data-style="heft"] .btn.ghost { background: #FDFDFB; }
[data-style="heft"] .hl, [data-style="heft"] .tw { background: linear-gradient(transparent 30%, #FFF27A 30% 85%, transparent 85%); }
[data-style="heft"] .nav { background: #f2ede0; border-top: 2px solid #23408E; }
[data-style="heft"] .nav a { font-family: var(--serif); font-size: 1rem; }
[data-style="heft"] .nav a.active { background: #FFF27A; color: #23408E; }
[data-style="heft"] .story-text { font-family: var(--sans); font-size: 1.1rem; line-height: 34px; }
.sk-heft { position: relative; padding-right: 30px; }
.hf-tabs { position: absolute; right: -16px; top: 90px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.hf-tabs a { writing-mode: vertical-rl; background: #FFB3D1; color: #5a1f3a; padding: 10px 6px; border-radius: 8px 0 0 8px; font: 600 .72rem Inter, sans-serif; text-decoration: none; }
.hf-tabs a:nth-child(2) { background: #B7E4C7; color: #1f4d33; } .hf-tabs a:nth-child(3) { background: #B8D4FF; color: #1f3a6b; } .hf-tabs a:nth-child(4) { background: #FFE2A8; color: #5a3d00; }
.hf-head { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.hf-head h1 { font-size: 3.2rem; line-height: 68px; }
.hf-hand { font-family: var(--serif); font-size: 1.9rem; line-height: 34px; margin: 14px 0 0; }
.hf-todo { list-style: none; padding: 0; margin: 0; }
.hf-todo li { font-family: var(--serif); font-size: 1.7rem; line-height: 34px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hf-todo li::before { content: ""; width: 16px; height: 16px; border: 2px solid #23408E; border-radius: 3px; flex: none; }
.hf-todo li.x { text-decoration: line-through; color: #7d8fbf; }
.hf-todo li.x::before { background: linear-gradient(45deg, transparent 42%, #23408E 42% 58%, transparent 58%); }
.hf-todo a { text-decoration: none; }
.hf-todo mark, .hf-page mark { background: linear-gradient(transparent 30%, #FFF27A 30% 85%, transparent 85%); color: inherit; }
.hf-todo mark.pink { background: linear-gradient(transparent 30%, #FFB3D1 30% 85%, transparent 85%); }
.hf-link { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline wavy #E8A0A0; cursor: pointer; }
.hf-lvl { display: flex; gap: 10px; align-items: baseline; font-family: var(--serif); font-size: 1.5rem; line-height: 34px; }
.hf-bar { letter-spacing: 1px; font-size: 1.1rem; }
.hf-lvl small { font-size: 1.1rem; color: #6f7fae; }
.hf-bottom { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.hf-postit { position: relative; flex: none; width: 112px; background: #FFF27A; padding: 12px; transform: rotate(4deg); box-shadow: 0 10px 18px -10px #7a6a00; color: #3b3a10; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.hf-postit b { display: block; font-family: var(--sans); font-size: 2rem; }
.hf-cta { flex: 1; min-width: 0; }
.hf-btn { background: #FDFDFB; color: #23408E; border: 2px solid #23408E; border-radius: 4px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; transform: rotate(-1deg); }
/* Heft-Seite */
.hf-page { position: relative; overflow: hidden; }
.hf-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hf-table td { height: 68px; font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; vertical-align: middle; padding-right: 8px; width: 50%; }
.hf-table tr.done td { color: #7d8fbf; }
.hf-table tr.next td { color: #c2cbe6; }
.hf-table tr.cur td.hf-de { font-weight: 700; }
.hf-table td.hf-en { color: #2b6b3a; }
.hf-tw { position: relative; }
.hf-flap { position: absolute; right: -6px; top: -4px; bottom: -4px; width: 50%; background: #E7D7B8; box-shadow: -8px 0 14px -8px rgba(0,0,0,.35); border-radius: 6px 0 0 6px; transform: rotate(-1.2deg); display: flex; align-items: center; justify-content: center; color: #8a6d3e; font-family: var(--serif); font-size: 1.4rem; }
.hf-flap::before { content: ""; position: absolute; left: -12px; top: 46%; width: 26px; height: 26px; border-radius: 50%; background: #d1bf9b; }
.hf-sent { position: relative; margin-top: 6px; }
.hf-sent .ex { font-family: var(--sans); font-size: 1.05rem; line-height: 34px; margin: 0; }
.hf-sent .ex-de { font-family: var(--sans); font-style: italic; line-height: 34px; color: #6f7fae; margin: 0; }
.hf-marks { display: flex; justify-content: space-between; gap: 6px; }
.grade.hf-mark { flex: 1; background: transparent !important; border-radius: 0; border-bottom: 3px solid; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; min-height: 0; padding: 6px 2px; }
.grade.hf-mark.g1 { color: #c2413b !important; } .grade.hf-mark.g2 { color: #b98a00 !important; } .grade.hf-mark.g3 { color: #2b6b3a !important; }
.grade.hf-mark small { font-family: var(--sans); font-size: .7rem; }
[data-style="heft"] .known-btn { border: 0; font-size: 1.1rem; color: #6f7fae; transform: none; }

/* =====================================================================
   5 · iOS-GLAS – Karte, Glasblatt, gruppierte Listen
   ===================================================================== */
html:root[data-style="glas"] {
  --bg: #F2F2F7; --surface: #ffffff; --surface-2: #E9E9EE; --ink: #111111; --muted: #8a8a8f; --line: #e3e3e8;
  --accent: #2F7CF6; --accent-ink: #ffffff; --accent-soft: #e5efff; --marker: #FFD60A; --marker-soft: #fff5c2;
  --ok: #34C759; --bad: #FF3B30; --a1: #FF9500; --a2: #FF6B00; --b1: #34C759; --b2: #2F7CF6; --c1: #AF52DE;
  --radius: 22px; --shadow: none;
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:root[data-style="glas"]:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --ink: #f5f5f7; --muted: #98989f; --line: #38383a; --accent-soft: #10284d; --marker-soft: #3a3214; color-scheme: dark;
  }
}
[data-style="glas"] h1, [data-style="glas"] h2, [data-style="glas"] h3 { font-weight: 700; letter-spacing: -.02em; }
[data-style="glas"] h1 { font-size: 2.1rem; }
[data-style="glas"] .card { border: 0; }
[data-style="glas"] .btn { border-radius: 14px; border: 0; }
[data-style="glas"] .btn.ghost { background: var(--surface-2); color: var(--accent); }
[data-style="glas"] .story-text { font-family: var(--sans); font-weight: 400; }
[data-style="glas"] .nav {
  left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 10px); max-width: 528px; margin: 0 auto; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px;
}
[data-style="glas"] .nav a { border-radius: 999px; color: var(--ink); }
[data-style="glas"] .nav a.active { background: var(--surface-2); color: var(--accent); }
.sk-glas { margin: calc(-12px - env(safe-area-inset-top)) -16px 0; }
.gl-map {
  position: relative; height: calc(env(safe-area-inset-top) + 300px); overflow: hidden;
  background: radial-gradient(circle at 20% 20%, #bfe6d0 0, transparent 42%), radial-gradient(circle at 85% 35%, #cfe0ff 0, transparent 45%), linear-gradient(#e9efe6, #dfe7f1);
}
.gl-map::before { content: ""; position: absolute; inset: 0; opacity: .6; background: repeating-linear-gradient(28deg, transparent 0 46px, #fff 46px 52px), repeating-linear-gradient(-62deg, transparent 0 70px, #fff 70px 76px); }
.gl-path { position: absolute; inset: calc(env(safe-area-inset-top) + 20px) 0 20px; width: 100%; height: calc(100% - env(safe-area-inset-top) - 40px); }
.gl-path path { fill: none; stroke: #2F7CF6; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 5px; }
.gl-pin { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem; background: #8E8E93; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.2); margin-top: calc(env(safe-area-inset-top) / 2); }
.gl-pin.on { background: #2F7CF6; }
.gl-pill, .gl-gear { position: absolute; top: calc(env(safe-area-inset-top) + 14px); background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; font-weight: 700; font-size: .95rem; color: #111; }
.gl-pill { left: 16px; padding: 8px 12px; }
.gl-gear { right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.gl-sheet {
  position: relative; margin: -34px 10px 0; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 34px; padding: 10px 18px 18px; box-shadow: 0 -6px 30px rgba(0,0,0,.08);
}
.gl-grab { width: 40px; height: 5px; background: #c7c9cd; border-radius: 3px; margin: 0 auto 12px; }
.gl-search { display: flex; gap: 8px; align-items: center; background: rgba(118,118,128,.12); border-radius: 14px; padding: 11px 14px; color: var(--muted) !important; text-decoration: none; font-size: 1.05rem; }
.gl-search svg { width: 18px; height: 18px; }
.gl-h { font-size: 1.35rem !important; margin: 18px 0 10px; }
.gl-h a { text-decoration: none; }
.gl-h::after { content: " ›"; color: var(--muted); }
.gl-orte { display: flex; gap: 12px; overflow-x: auto; }
.gl-ort { display: flex; flex-direction: column; align-items: center; border: 0; background: none; cursor: pointer; font-size: .8rem; width: 74px; flex: none; padding: 0; }
.gl-ort b { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-c { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; margin-bottom: 6px; font-weight: 700; }
.gl-c.add { background: rgba(118,118,128,.14); color: #2F7CF6; }
.gl-ort small { color: var(--muted); }
.gl-row { display: flex; gap: 12px; align-items: center; width: 100%; background: rgba(118,118,128,.1); border: 0; border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; text-align: left; cursor: pointer; }
.gl-row > span:last-child { display: flex; flex-direction: column; }
.gl-row small { color: var(--muted); font-size: .82rem; }
.gl-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; flex: none; font-weight: 700; }
/* Lernkarte */
[data-style="glas"] body[data-view="learn"] .session-top .icon-btn { background: var(--surface); border: 0; }
.gl-grp { background: var(--surface); border-radius: 26px; overflow: hidden; margin-bottom: 14px; }
.gl-hero { padding: 24px 18px; text-align: center; }
.gl-w { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.gl-d { color: var(--muted); font-size: 1.05rem; margin-top: 4px; }
.gl-lv { display: inline-block; margin-top: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 10px; font-size: .8rem; font-weight: 600; }
.gl-li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); border-radius: 0; min-height: 0; flex-direction: row; justify-content: flex-start; }
.gl-grp .gl-li:first-child { border-top: 0; }
.gl-li .gl-ic { width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; }
.gl-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gl-t b { font-weight: 500; }
.gl-t small { color: var(--muted); font-size: .88rem; }
.gl-li::after { content: "›"; color: #c4c4c8; font-size: 1.4rem; }
div.gl-li::after { content: ""; }
.gl-grades .grade { background: none !important; color: var(--ink) !important; font-weight: 400; }
.gl-grades .grade small { opacity: 1; }
[data-style="glas"] .sk-learn .btn.primary.big { border-radius: 16px; }
[data-style="glas"] .sk-learn .known-btn { background: transparent; color: var(--accent); }

/* Kleinere Bildschirme */
@media (max-width: 360px) {
  .bk-top h1 { font-size: 2.1rem; }
  .bk-row { font-size: 1.05rem; grid-template-columns: 1fr 50px 76px; }
}

/* Sprachflagge am Einstellungen-Knopf, Lautschrift */
.sk-home a[href="#/settings"]:not(.gl-gear) { position: relative; }
.sk-flag { position: absolute; left: -6px; bottom: -4px; font-size: 15px; line-height: 1; }

/* =====================================================================
   0 · EINFACH – große Knöpfe, klare Schritte, gut lesbar für Kinder und Senioren
   ===================================================================== */
html:root[data-style="einfach"] {
  --bg: #FFFFFF; --surface: #F2F5FA; --surface-2: #E8EDF5; --ink: #14213D; --muted: #4A5670; --line: #D5DCE8;
  --accent: #1F5BD8; --accent-ink: #FFFFFF; --accent-soft: #E3ECFC; --marker: #FFE066; --marker-soft: #FFF3B8;
  --ok: #1E9E50; --bad: #D93636; --radius: 18px; --shadow: none;
  --serif: "Atkinson Hyperlegible", system-ui, sans-serif; --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light; font-size: 19px;
}
[data-style="einfach"] body { font-family: var(--sans); line-height: 1.5; }
[data-style="einfach"] h1, [data-style="einfach"] h2, [data-style="einfach"] h3 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
[data-style="einfach"] .card { border: 2px solid var(--line); box-shadow: none; }
[data-style="einfach"] .btn { min-height: 56px; border-radius: 14px; font-size: 1rem; }
[data-style="einfach"] .nav a { font-size: .8rem; font-weight: 700; }
[data-style="einfach"] .nav a.active { color: var(--accent); background: var(--accent-soft); }
[data-style="einfach"] :focus-visible { outline: 3px solid #F2B705; outline-offset: 2px; }
/* Start */
.ef-top { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ef-top p { margin: 0; font-size: 1.1rem; color: var(--muted); }
.ef-set { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; position: relative; }
.ef-h1 { font-size: 1.7rem; margin: 6px 0 16px; }
.ef-go { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px; border: 0; border-radius: 22px; background: var(--accent); color: #fff; text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.ef-go.alt { background: var(--ok); }
.ef-go b { display: block; font-size: 1.45rem; line-height: 1.2; }
.ef-go small { display: block; font-size: 1rem; opacity: .92; }
.ef-play { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--accent); font-size: 1.6rem; }
.ef-go.alt .ef-play { color: var(--ok); }
.ef-how { margin: 14px 0 0; padding: 14px 18px; border-radius: 18px; background: var(--surface); }
.ef-how ol { margin: 6px 0 0; padding-left: 1.3em; }
.ef-how li { margin: 4px 0; }
.ef-done { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 12px; border-radius: 18px; background: #E5F6EC; font-size: 1.1rem; }
.ef-done span { font-size: 2rem; }
.ef-streak { margin: 14px 0 0; padding: 12px 16px; border-radius: 16px; background: #FFF3B8; }
.ef-h2 { font-size: 1.2rem; margin: 26px 0 10px; }
.ef-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ef-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; padding: 16px; border: 2px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.ef-tile:active, .ef-go:active, .ef-btn:active { transform: scale(.98); }
.ef-tic { font-size: 1.9rem; line-height: 1; }
.ef-tile b { font-size: 1.05rem; }
.ef-tile small { color: var(--muted); font-size: .85rem; }
/* Lernen */
.ef-step { display: flex; justify-content: space-between; margin: 4px 2px 8px; font-weight: 700; color: var(--muted); font-size: .95rem; }
.ef-step span:first-child { color: var(--accent); }
.ef-card { padding: 22px 20px; border-radius: 22px; background: var(--surface); text-align: center; }
.ef-q { margin: 0 0 6px; font-size: 1.05rem; color: var(--muted); }
.ef-de { font-size: 2.1rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ef-en { margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 3px solid var(--ok); font-size: 2.1rem; font-weight: 700; color: var(--ok); overflow-wrap: anywhere; }
.ef-ex { margin-top: 16px; text-align: left; font-size: 1.05rem; }
.ef-ex p { margin: 2px 0; }
.ef-ex .ex-de { color: var(--muted); }
.ef-card .answer { width: 100%; min-height: 56px; margin-top: 14px; font-size: 1.2rem; border: 2px solid var(--line); border-radius: 14px; padding: 0 14px; }
.ef-card .hint { font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; }
.ef-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ef-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 62px; padding: 10px 16px; border: 0; border-radius: 18px; font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.ef-btn small { font-size: .85rem; font-weight: 400; opacity: .9; }
.ef-pri { background: var(--accent); color: #fff; min-height: 72px; font-size: 1.35rem; }
.ef-sec { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.ef-listen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ef-listen .ef-btn { font-size: 1rem; }
.ef-label, .ef-ask { margin: 6px 0 -4px; font-weight: 700; }
.ef-ask { font-size: 1.3rem; margin-top: 10px; }
.ef-actions .speed { max-width: none; margin: 0; }
.ef-actions .speed button { min-height: 48px; font-size: 1rem; }
.ef-grades { display: flex; flex-direction: column; gap: 10px; }
.ef-yes { background: var(--ok); color: #fff; }
.ef-mid { background: #F2B705; color: #14213D; }
.ef-no { background: var(--bad); color: #fff; }
[data-style="einfach"] .known-btn { font-size: .95rem; }
.ef-grades .grade.ef-yes { background: var(--ok); color: #fff; }
.ef-grades .grade.ef-mid { background: #F2B705; color: #14213D; }
.ef-grades .grade.ef-no { background: var(--bad); color: #fff; }
.ef-grades .grade small { opacity: .95; font-size: .85rem; }
.ef-set .sk-flag { position: static; font-size: 20px; }
.ef-tile:last-child:nth-child(odd) { grid-column: span 2; min-height: 0; }

/* =====================================================================
   AWARD – Sticker, satte Farben, taktile Knöpfe (inspiriert von CapWords,
   Duolingo, Speak). Eine Freude-Bewegung: die Karte dreht sich beim Aufdecken.
   ===================================================================== */
html:root[data-style="award"] {
  --bg: #F4F1FB; --surface: #FFFFFF; --surface-2: #ECE7F8; --ink: #1B1530; --muted: #5E5675; --line: #DCD4F0;
  --accent: #6C4BF4; --accent-ink: #FFFFFF; --accent-soft: #E7E0FE; --marker: #FFD84D; --marker-soft: #FFF1B8;
  --ok: #10A884; --bad: #F0524A; --radius: 22px; --shadow: 0 2px 0 rgba(27, 21, 48, .06);
  --grape: #6C4BF4; --grape-d: #4B2FC9; --mint: #18C29C; --mint-d: #0E9273; --sun: #FFC83D; --sun-d: #D99A00;
  --coral: #FF6B5B; --coral-d: #D6463A; --sky: #3FA9F5; --sky-d: #1F7FC4;
  --serif: "Bricolage Grotesque", system-ui, sans-serif; --sans: "Bricolage Grotesque", system-ui, sans-serif;
  color-scheme: light; font-size: 18px;
}
@media (prefers-color-scheme: dark) {
  html:root[data-style="award"]:not([data-theme="light"]) {
    --bg: #141024; --surface: #221B3A; --surface-2: #2C2448; --ink: #F3F0FF; --muted: #B5ACD3; --line: #3A3060;
    --accent-soft: #33295A; --marker-soft: #4A3F12; color-scheme: dark;
  }
}
html:root[data-style="award"][data-theme="dark"] {
  --bg: #141024; --surface: #221B3A; --surface-2: #2C2448; --ink: #F3F0FF; --muted: #B5ACD3; --line: #3A3060;
  --accent-soft: #33295A; --marker-soft: #4A3F12; color-scheme: dark;
}
[data-style="award"] body { font-family: var(--sans); }
[data-style="award"] h1, [data-style="award"] h2, [data-style="award"] h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
[data-style="award"] .card { border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-radius: 22px; }
[data-style="award"] .btn.primary { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); border-radius: 16px; font-weight: 800; }
[data-style="award"] .btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--grape-d); }
[data-style="award"] .nav a.active { color: var(--grape); background: var(--accent-soft); }
[data-style="award"] :focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
/* taktile Knöpfe */
.aw-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 64px; border: 0; border-radius: 18px; color: #fff; font: inherit; font-weight: 800; font-size: 1.2rem; cursor: pointer; transition: transform .06s, box-shadow .06s; }
.aw-btn small { font-weight: 500; font-size: .78rem; opacity: .95; }
.aw-btn.big { min-height: 72px; font-size: 1.35rem; }
.aw-btn.grape { background: var(--grape); box-shadow: 0 6px 0 var(--grape-d); }
.aw-btn.mint { background: var(--mint); box-shadow: 0 6px 0 var(--mint-d); }
.aw-btn.sun { background: var(--sun); box-shadow: 0 6px 0 var(--sun-d); color: #3A2A00; }
.aw-btn.coral { background: var(--coral); box-shadow: 0 6px 0 var(--coral-d); }
.aw-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.aw-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.aw-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.aw-chip.wide { width: 100%; }
/* Start */
.aw-top { display: flex; justify-content: space-between; align-items: center; }
.aw-hi { margin: 0; color: var(--muted); font-weight: 500; }
.aw-h1 { margin: 0; font-size: 2rem; line-height: 1.1; }
.aw-set { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.aw-set svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.aw-hero { display: flex; align-items: center; gap: 18px; margin: 18px 0; padding: 18px; border-radius: 26px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.aw-ring { position: relative; flex: none; width: 112px; height: 112px; }
.aw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aw-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.aw-ring-bg { stroke: var(--surface-2); }
.aw-ring-fg { stroke: var(--mint); transition: stroke-dashoffset .8s ease; }
.aw-ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.aw-ring-in b { font-size: 1.6rem; line-height: 1; }
.aw-ring-in small { color: var(--muted); font-size: .72rem; }
.aw-stats { display: grid; gap: 10px; flex: 1; }
.aw-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.aw-stat span { grid-row: span 2; font-size: 1.6rem; }
.aw-stat b { font-size: 1.4rem; line-height: 1; }
.aw-stat small { color: var(--muted); font-size: .8rem; }
.aw-cta { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: var(--grape); color: #fff; text-decoration: none; font: inherit; box-shadow: 0 7px 0 var(--grape-d); cursor: pointer; transition: transform .06s, box-shadow .06s; }
.aw-cta:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--grape-d); }
.aw-cta.alt { background: var(--mint); box-shadow: 0 7px 0 var(--mint-d); }
.aw-cta-t { font-size: 1.6rem; font-weight: 800; }
.aw-cta-s { font-size: .9rem; opacity: .92; }
.aw-done { text-align: center; font-weight: 800; font-size: 1.2rem; margin: 6px 0 12px; }
.aw-stickers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 8px; }
.aw-sticker { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 22px; color: #fff; text-decoration: none; border: 4px solid #fff; box-shadow: 0 6px 14px -6px rgba(27, 21, 48, .35); transform: rotate(var(--r)); transition: transform .15s; }
.aw-sticker:hover, .aw-sticker:active { transform: rotate(0) scale(1.03); }
.aw-sticker b { font-size: 1.1rem; }
.aw-sticker small { opacity: .92; font-size: .78rem; }
.aw-st-ic { font-size: 1.8rem; line-height: 1; }
.aw-sticker.grape { background: var(--grape); } .aw-sticker.mint { background: var(--mint); } .aw-sticker.sky { background: var(--sky); }
.aw-sticker.coral { background: var(--coral); } .aw-sticker.sun { background: var(--sun); color: #3A2A00; }
.aw-stickers .aw-sticker:last-child:nth-child(odd) { grid-column: span 2; }
.aw-path { margin-top: 22px; }
.aw-path h2 { font-size: 1.3rem; margin: 0 0 10px; }
.aw-badges { display: flex; gap: 8px; }
.aw-badge { flex: 1; display: grid; place-items: center; padding: 10px 0; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.aw-badge b { font-size: 1.1rem; }
.aw-badge small { font-size: .7rem; color: var(--muted); }
.aw-badge.done { background: var(--mint); border-color: var(--mint-d); color: #fff; box-shadow: 0 3px 0 var(--mint-d); }
.aw-badge.done small { color: #fff; }
.aw-badge.cur { border-color: var(--grape); box-shadow: 0 3px 0 var(--grape); }
.aw-topic { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; min-height: 52px; padding: 0 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; box-shadow: 0 3px 0 var(--line); cursor: pointer; }
.aw-topic span { margin-left: auto; font-size: 1.3rem; }
/* Lernkarte */
.aw-card { position: relative; margin: 8px 4px 0; padding: 24px 20px 22px; border-radius: 28px; background: var(--surface); border: 5px solid #fff; outline: 2px solid var(--line); box-shadow: 0 12px 24px -12px rgba(27, 21, 48, .35); text-align: center; transform: rotate(-1deg); }
[data-style="award"] .aw-card { border-color: var(--surface); }
.aw-card.flip { animation: awFlip .5s cubic-bezier(.2, .8, .2, 1.2); transform: rotate(.6deg); }
@keyframes awFlip { 0% { transform: rotateY(90deg) rotate(0); } 100% { transform: rotateY(0) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .aw-card.flip { animation: none; } .aw-sticker { transform: none; } }
.aw-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--grape); font-size: .8rem; font-weight: 700; }
.aw-q { margin-top: 12px; color: var(--muted); }
.aw-de { font-size: 2.1rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.aw-en { display: inline-block; margin-top: 12px; padding: 6px 18px; border-radius: 16px; background: var(--mint); color: #fff; font-size: 2rem; font-weight: 800; box-shadow: 0 4px 0 var(--mint-d); transform: rotate(-1.5deg); overflow-wrap: anywhere; }
.aw-ex { margin-top: 16px; text-align: left; }
.aw-ex p { margin: 2px 0; }
.aw-ex .ex-de { color: var(--muted); }
.aw-card .answer { width: 100%; min-height: 56px; margin-top: 14px; padding: 0 14px; border: 2px solid var(--line); border-radius: 16px; font: inherit; font-size: 1.15rem; background: var(--bg); color: var(--ink); }
.aw-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.aw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aw-ask { margin: 8px 0 -2px; font-size: 1.3rem; font-weight: 800; }
.aw-grades { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.aw-actions .grade.aw-btn { min-height: 76px; }
.aw-actions .speed { max-width: none; margin: 0; }
.aw-grades .grade.g1 { background: var(--coral); color: #fff; }
.aw-grades .grade.g2 { background: var(--sun); color: #3A2A00; }
.aw-grades .grade.g3 { background: var(--mint); color: #fff; }
.aw-set svg path { fill: none; }
html[data-style="award"] .aw-grades .grade.aw-btn.g1 { background: var(--coral); color: #fff; }
html[data-style="award"] .aw-grades .grade.aw-btn.g2 { background: var(--sun); color: #3A2A00; }
html[data-style="award"] .aw-grades .grade.aw-btn.g3 { background: var(--mint); color: #fff; }
/* Award: kompakte Lernkarte – alles auf einen Bildschirm */
[data-style="award"] .sk-learn .session-top { margin-bottom: 4px; }
.aw-card { margin-top: 4px; padding: 14px 16px 14px; border-width: 4px; border-radius: 24px; }
.aw-tag { padding: 3px 10px; font-size: .72rem; }
.aw-q { margin-top: 6px; font-size: .85rem; }
.aw-de { font-size: 1.6rem; }
.aw-en { margin-top: 6px; padding: 3px 14px; font-size: 1.5rem; border-radius: 14px; box-shadow: 0 3px 0 var(--mint-d); }
.aw-ex { margin-top: 10px; font-size: .92rem; line-height: 1.4; }
.aw-card .typed { margin: 6px 0 0; font-size: .9rem; }
.aw-card .note { margin: 8px 0 0; font-size: .85rem; }
.aw-actions { gap: 8px; margin-top: 12px; }
.aw-row.three { grid-template-columns: 1fr 1fr 1.25fr; }
.aw-row .mic-block { display: contents; }
.aw-row .mic-btn { min-height: 44px; padding: 0 10px; justify-content: center; border-width: 2px; border-radius: 16px; font-size: .92rem; box-shadow: 0 4px 0 var(--accent-soft); }
.aw-row .mic-res { grid-column: 1 / -1; margin: 0; }
.aw-row .mic-res:empty { display: none; }
.aw-chip { min-height: 44px; padding: 0 10px; font-size: .92rem; }
.aw-actions .speed button { min-height: 36px; font-size: .88rem; }
.aw-ask { margin: 4px 0 0; font-size: 1.05rem; }
.aw-actions .grade.aw-btn { min-height: 58px; font-size: 1.1rem; border-radius: 16px; }
.aw-actions .grade.aw-btn small { font-size: .72rem; }
.aw-actions .known-btn { min-height: 40px; padding: 6px 12px; font-size: .85rem; }
.aw-btn.big { min-height: 60px; font-size: 1.2rem; }
/* sehr niedrige Bildschirme (kleine Handys, Safari mit Leisten) */
@media (max-height: 760px) {
  .aw-card { padding: 10px 14px; }
  .aw-de { font-size: 1.4rem; }
  .aw-en { font-size: 1.3rem; }
  .aw-ex { margin-top: 6px; font-size: .86rem; }
  .aw-actions { gap: 6px; margin-top: 8px; }
  .aw-actions .grade.aw-btn { min-height: 52px; }
}
.aw-row.three { grid-template-columns: .8fr .8fr 1.4fr; gap: 6px; }
.aw-row .aw-chip, .aw-row .mic-btn { white-space: nowrap; font-size: .86rem; gap: 4px; }
/* Award: luftigere, aufgeräumte Lösungsseite */
.aw-card { padding: 20px 18px 18px; border-width: 5px; border-radius: 28px; }
.aw-tag { padding: 4px 12px; font-size: .75rem; }
.aw-q { margin-top: 10px; font-size: .9rem; }
.aw-de { margin-top: 8px; font-size: 1.75rem; }
.aw-en { margin-top: 10px; padding: 4px 18px; font-size: 1.65rem; box-shadow: 0 4px 0 var(--mint-d); }
.aw-ex { margin-top: 14px; font-size: .95rem; line-height: 1.45; }
.aw-ex .ex-de { margin-top: 2px; }
.aw-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); text-align: left; }
.aw-actions { gap: 14px; margin-top: 18px; }
.aw-tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.aw-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.aw-tool i { font-style: normal; font-size: 1.35rem; line-height: 1; }
.aw-tool span { font-size: .78rem; font-weight: 700; }
.aw-tool:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.aw-tool.mic-btn { border-color: var(--line); color: var(--ink); min-height: 62px; padding: 6px 4px; border-radius: 18px; }
.aw-tool.mic-btn.rec { background: var(--coral); border-color: var(--coral-d); color: #fff; }
.aw-tools .mic-res { grid-row: 2; grid-column: 1 / -1; margin: 0; text-align: center; }
.aw-tools .mic-res:empty { display: none; }
.aw-grades { gap: 12px; }
.aw-actions .grade.aw-btn { min-height: 66px; font-size: 1.2rem; border-radius: 18px; }
.aw-actions .grade.aw-btn small { font-size: .74rem; }
.aw-known { align-self: center; border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 4px; }
@media (max-height: 760px) {
  .aw-card { padding: 14px 16px; }
  .aw-de { font-size: 1.5rem; }
  .aw-en { font-size: 1.4rem; margin-top: 6px; }
  .aw-ex { margin-top: 8px; font-size: .9rem; }
  .aw-actions { gap: 10px; margin-top: 12px; }
  .aw-tool { min-height: 54px; }
  .aw-actions .grade.aw-btn { min-height: 58px; }
}
.aw-actions .aw-ask { margin: 6px 0 -4px; font-size: 1.05rem; text-align: center; }