@font-face { font-family: "Lexend"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/lexend-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #2c3036; --panel: #1e2126; --panel-2: #16181c; --field: #14161a; --line: #343941; --line-2: #2d3239;
  --ink: #e8e8e8; --muted: #9aa1aa; --muted-2: #868d97; --accent: #7fc4e8; --accent-2: #2f7fb0;
  --ok: #5fbf77; --bad: #e0707c; --yellow: #8fd3f5; --red: #f2a65a;   /* SHIFT-/ALPHA-Beschriftung (eigene Farben) */
  --page-a: #474d56; --page-b: #2c3036; --calc-a: #23262b; --calc-b: #16181c; --calc-c: #1d2025;
  --lcd-a: #cdd8c2; --lcd-b: #bfcab4; --radius: 16px;
  --surface: #2a2e35; --surface-2: #22262c; --surface-hover: #343941; --ink-2: #cfd4da; --sunken: #161a20; --edge: #0e0f12;
  --bar: rgba(24, 27, 32, .94); --schatten: 0 14px 40px rgba(0,0,0,.45);
}
html { -webkit-text-size-adjust: 100%; }
:root { color-scheme: dark; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: var(--page-b); background-image: radial-gradient(circle at 30% 20%, var(--page-a), var(--page-b) 70%);
  background-attachment: fixed;
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--ink);
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.workspace { display: flex; gap: 26px; align-items: flex-start; justify-content: center; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; }


.calc {
  width: 400px; max-width: 100%;
  background: linear-gradient(170deg, var(--calc-a), var(--calc-b) 60%, var(--calc-c));
  border-radius: 24px; padding: 16px 18px 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  border: 1px solid #0c0d10; flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
}

.lcd {
  background: var(--lcd-b); background-image: linear-gradient(180deg, var(--lcd-a), var(--lcd-b));
  border-radius: 6px; border: 3px solid #0d0f12; box-shadow: inset 0 3px 10px rgba(0,0,0,.35);
  padding: 4px 10px 8px; margin-bottom: 14px;
}
.lcd-status { display: flex; gap: 10px; font-size: 10px; font-weight: 700; color: #3c4536; min-height: 13px; }
.st.hidden { visibility: hidden; display: inline !important; }
.st.clickable { cursor: pointer; }
.lcd-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 21px; color: #222b1d; padding: 2px 0;
  caret-color: #222b1d; user-select: text; -webkit-user-select: text;
}
.lcd-result {
  text-align: right; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 26px; font-weight: 600; color: #1c2416;
  min-height: 32px; overflow-x: auto; white-space: nowrap; user-select: text; -webkit-user-select: text;
}
.lcd-result.error { font-size: 17px; color: #7a2f23; }

.top-cluster { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cluster-left, .cluster-right { display: flex; flex-direction: column; gap: 7px; width: 27%; }
.cluster-right { align-items: flex-end; }
.smallrow { display: flex; gap: 7px; }
.dpad {
  position: relative; width: 108px; height: 108px; border-radius: 26px;
  background: linear-gradient(160deg, #353a41, #1b1e22 80%); border: 2px solid #0b0c0e;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.12);
}
.dp { position: absolute; border: none; background: transparent; color: #cfd4da; font-size: 13px; cursor: pointer; padding: 9px; }
.dp:active, .dp.pressed { color: var(--accent); }
.dp-up { top: 0; left: 50%; transform: translateX(-50%); }
.dp-down { bottom: 0; left: 50%; transform: translateX(-50%); }
.dp-left { left: 2px; top: 50%; transform: translateY(-50%); }
.dp-right { right: 2px; top: 50%; transform: translateY(-50%); }
.dp-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 3px; transform: translate(-50%,-50%) rotate(45deg); background: var(--accent); opacity: .5; pointer-events: none; }

.key {
  position: relative; border: none; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 2px 6px; transition: transform .04s, filter .08s;
}
.key:active, .key.pressed { transform: translateY(1px); filter: brightness(1.3); }
.k-dark { background: linear-gradient(180deg, #34383f, #22252a); color: #e6e9ec; border: 1px solid #101215; box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.k-light { background: linear-gradient(180deg, #e9ecef, #c9ced4); color: #17191c; border: 1px solid #8d939b; box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7); font-size: 17px; }
.k-del { background: linear-gradient(180deg, #4a3134, #342023); color: #f1b8ae; border: 1px solid #1c1113; box-shadow: 0 2px 4px rgba(0,0,0,.45); font-size: 13px; }
.k-eq { font-weight: 800; }
.k-shift .y { color: var(--yellow); font-size: 11px; font-weight: 800; }
.k-alpha .r { color: var(--red); font-size: 11px; font-weight: 800; }
.k-on { width: 48px; font-size: 11px; color: #fff; }
.k-sm { font-size: 10px; padding: 6px 8px; }
.k-sm:has(.above-y) { padding-top: 13px; }
.k-shift, .k-alpha { width: 100%; padding: 8px 2px; }
.key.shift-active { outline: 2px solid var(--yellow); }
.key.alpha-active { outline: 2px solid var(--red); }
.key em { position: absolute; top: 1px; font-size: 8px; font-style: normal; font-weight: 700; pointer-events: none; }
.key em.y { left: 4px; color: var(--yellow); }
.key em.r { right: 4px; color: var(--red); }
.key .above-y { position: absolute; top: 1px; left: 4px; font-size: 7px; color: var(--yellow); font-weight: 700; }
.key sup { font-size: .7em; }
.fkeys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 7px; margin-bottom: 13px; }
.fkeys .key { min-height: 40px; font-size: 13px; }
.numkeys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px 8px; }
.numkeys .key { min-height: 46px; }


.panel {
  width: 680px; max-width: 100%; min-width: 0; flex: 1 1 520px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); overflow: hidden;
}
.view { padding: 18px 20px 22px; min-width: 0; }
.view.hidden, .hidden { display: none !important; }

.lbl { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 5px; }
.field {
  width: 100%; padding: 10px 12px; background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: "SF Mono", Menlo, Consolas, monospace; outline: none;
  -webkit-appearance: none; appearance: none;
}
select.field { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; font-family: inherit; }
textarea.field { resize: vertical; }
.field:focus { border-color: var(--accent); }
.field-sm { width: 120px; font-size: 15px; }
.solver-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 4px; }
.btn-primary { padding: 10px 22px; background: var(--accent-2); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { padding: 8px 14px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 7px; font-size: 13px; cursor: pointer; }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-secondary.armed { background: #6b2a24; border-color: #a2463c; color: #fff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; align-items: center; }
.file-btn { display: inline-block; }
.muted { color: var(--muted-2); font-size: 13px; line-height: 1.5; margin: 6px 0; }
.small { font-size: 11.5px; }
.h3 { font-size: 15px; margin: 6px 0 8px; color: var(--ink-2); }
.h4 { font-size: 13.5px; margin: 18px 0 8px; color: var(--ink-2); }

.eq-output { margin-top: 18px; min-height: 120px; }
.eq-output .hint { font-size: 13px; color: var(--muted-2); line-height: 1.9; }
.eq-output code { background: var(--field); padding: 2px 7px; border-radius: 5px; color: var(--accent); font-size: 12.5px; }
.sol-line { background: var(--field); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 7px; padding: 11px 14px; margin-bottom: 9px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 17px; overflow-x: auto; }
.sol-line small { color: var(--muted-2); font-size: 12px; margin-left: 12px; }
.sol-err { color: var(--bad); font-size: 14px; padding: 8px 2px; min-height: 1em; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; line-height: 1.25; }
.frac .num { padding: 0 6px; border-bottom: 1.5px solid currentColor; }
.frac .den { padding: 0 6px; }
.sq .sq-arg { border-top: 1.5px solid var(--ink-2); padding: 0 2px; margin-left: 1px; }


.fn-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fn-row { display: flex; align-items: center; gap: 9px; }
.fn-dot { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; flex-shrink: 0; border: 2px solid transparent; }
.fn-dot.off { background: transparent !important; border-color: var(--line); }
.fn-prefix { font-family: "SF Mono", Menlo, monospace; color: var(--muted); font-size: 14px; white-space: nowrap; }
.fn-row .field { flex: 1; padding: 7px 10px; font-size: 15px; min-width: 0; }
.fn-row .field.bad { border-color: #b0564e; }
.fn-del { background: none; border: none; color: var(--muted-2); font-size: 17px; cursor: pointer; padding: 2px 6px; }
.fn-del:hover { color: var(--bad); }
.fn-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.hint-inline { font-size: 11.5px; color: var(--muted-2); margin-left: auto; }
.hint-inline.block { display: block; margin: 4px 0 8px; }
#graph { width: 100%; height: 480px; background: #fdfdfd; border-radius: 10px; border: 1px solid var(--edge); cursor: grab; display: block; touch-action: none; }


.grid-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.grid-form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#view-units .grid-form { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.table-out { margin-top: 14px; max-height: 420px; overflow: auto; border-radius: 8px; }
.vt { width: 100%; border-collapse: collapse; font-family: "SF Mono", Menlo, monospace; font-size: 14px; }
.vt th, .vt td { padding: 6px 12px; border-bottom: 1px solid var(--line-2); text-align: right; }
.vt th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); }
.kv-out { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; background: var(--field); border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 12px; font-size: 13.5px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; text-align: right; font-family: "SF Mono", Menlo, monospace; font-size: 13.5px; }
.big-out { font-size: 20px; margin: 16px 0 6px; font-family: "SF Mono", Menlo, monospace; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; flex-wrap: wrap; }
.seg button { padding: 8px 14px; background: var(--surface); color: var(--muted); border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button.active { background: var(--accent-2); color: #fff; }
.seg-sm { margin-bottom: 0; }
.seg-sm button { padding: 6px 10px; font-size: 12px; }
.lgs-grid { display: grid; gap: 8px; margin-bottom: 12px; }
.lgs-cell { display: flex; align-items: center; gap: 4px; font-family: "SF Mono", Menlo, monospace; color: var(--muted); font-size: 13px; flex-direction: row-reverse; }
.lgs-cell .field { padding: 8px; text-align: right; }
.chk { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; margin: 6px 0; }
.mat { display: inline-table; border-left: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); border-radius: 4px; margin: 0 6px; vertical-align: middle; border-spacing: 8px 2px; font-family: "SF Mono", Menlo, monospace; }
.mat td { text-align: right; }


.nh-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.nh-head label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.nh-fach { margin-bottom: 6px; }
.nh-themen { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.chip { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; font-size: 13px; cursor: pointer; }
.chip small { color: var(--muted-2); margin-left: 4px; }
.chip.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.chip.active small { color: #d8ecf7; }
.task { background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px; }
.task-meta { font-size: 11.5px; color: var(--muted-2); margin-bottom: 10px; }
.task-q { font-size: 17px; line-height: 1.6; margin-bottom: 14px; overflow-x: auto; }
.task-q small { color: var(--muted-2); font-size: 12px; }
.task-row { display: flex; gap: 10px; }
.task-row .field { flex: 1; min-width: 0; }
.task-fb { min-height: 24px; margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.task-fb.ok { color: var(--ok); }
.task-fb.bad { color: var(--bad); }
.task-weg { margin-top: 12px; background: var(--sunken); border-radius: 8px; padding: 12px 14px 12px 32px; font-size: 14px; line-height: 1.7; }
.task-sol { margin: 8px 0 0 -18px; color: var(--accent); }


.dlg { margin: auto; border: 1px solid var(--edge); border-radius: 14px; background: var(--panel); color: var(--ink); padding: 20px; width: min(340px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dlg::backdrop { background: rgba(0,0,0,.55); }
.dlg h3 { margin-bottom: 12px; font-size: 16px; }


.hseg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scrollbar-width: thin; }
.hseg button { flex: 0 0 auto; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 99px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.hseg button.active { background: #8c2f27; border-color: #8c2f27; color: #fff; }
.hchart { width: 100%; height: 330px; display: block; border-radius: 10px; border: 1px solid var(--edge); background: #fdfdfd; touch-action: pan-y; }
.hchart.tall { height: 400px; cursor: crosshair; }
.formula { font-family: "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--accent); background: var(--field); border-radius: 7px; padding: 8px 11px; margin: 10px 0; line-height: 1.6; }
.formula.big { font-size: 16px; }
.hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.hf { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.hf-in { display: flex; align-items: center; gap: 6px; }
.hf-in .field { padding: 8px 9px; font-size: 15px; min-width: 0; }
.hf-in em { font-style: normal; font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.field.solved, .htable input.solved { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--field)); }
.field.solved::placeholder, .htable input.solved::placeholder { color: var(--accent); opacity: 1; font-weight: 700; }
.tbl-wrap { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.htable { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 560px; }
.htable th { color: var(--muted); font-weight: 600; padding: 4px 4px; text-align: center; white-space: nowrap; }
.htable tbody th { text-align: left; font-size: 11.5px; }
.htable td { padding: 2px; text-align: center; }
.htable input { width: 100%; min-width: 38px; padding: 6px 3px; background: var(--field); border: 1px solid var(--line); border-radius: 5px; color: var(--ink); text-align: center; font-family: "SF Mono", Menlo, monospace; font-size: 13px; outline: none; }
.htable input:focus { border-color: var(--accent); }
.htable tr.r th { color: #e8968c; }
.htable tr.l th { color: #8fc0e6; }
.amp { font-weight: 700; font-family: -apple-system, sans-serif; }
.amp.y { color: var(--ok); } .amp.x { color: var(--bad); } .amp.n { color: var(--muted); }
.hfoot { margin-top: 18px; font-size: 11px; color: var(--muted-2); }
.audio-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ear-switch { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ear-btn { padding: 7px 12px; border: none; cursor: pointer; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; }
.ear-btn.ear-right.active { background: #8c2f27; color: #fff; }
.ear-btn.ear-left.active { background: #27568c; color: #fff; }
.tool-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tool-row label { font-size: 12.5px; color: var(--muted); width: 62px; }
.tool-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.unit { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }


@media (max-width: 760px) {
  .tu-msg { max-width: 94%; }
  .tu-chat { max-height: 62vh; }
  body { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .workspace { gap: 14px; }
  .calc { width: 100%; padding: 12px 12px 18px; border-radius: 18px 18px 26px 26px; }
  .fkeys { gap: 7px 6px; }
  .fkeys .key { min-height: 44px; font-size: 13.5px; }
  .numkeys { gap: 8px 7px; }
  .numkeys .key { min-height: 52px; font-size: 19px; }
  .k-del { font-size: 14px !important; }
  .dpad { width: 100px; height: 100px; }
  .panel { flex-basis: 100%; border-radius: 14px; }
  .view { padding: 14px 12px 18px; }
  #graph { height: 360px; }
  .grid-form, #view-units .grid-form { grid-template-columns: 1fr 1fr; }
  .grid-form label:first-child { grid-column: 1 / -1; }
  .hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hchart { height: 270px; }
  .hchart.tall { height: 330px; }
  .task-q { font-size: 16px; }
}
@media (max-width: 380px) {
  .key em { font-size: 7px; }
  .fkeys .key { font-size: 12.5px; }
  .hgrid { grid-template-columns: 1fr; }
}
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .calc, .tabs, .hseg, .btn-row, .hf, .hgrid, .tbl-wrap { display: none !important; }
  .panel { box-shadow: none; border: none; background: #fff; width: 100%; }
  .kv { background: #fff; border-color: #ccc; color: #000; }
}


.pf-art { margin-bottom: 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pf-grid label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.auswahl { max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-top: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.auswahl-kopf { position: sticky; top: 0; background: var(--panel); padding: 7px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.auswahl-op { padding: 11px 12px; font-size: 15px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line-2); }
.auswahl-op:last-child { border-bottom: 0; }
.auswahl-op:hover, .auswahl-op.aktiv { background: var(--field); }
.auswahl-op.gewaehlt { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.pf-sum { margin-top: 14px; background: var(--field); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; }
.card { background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.card h4 { margin: 0 0 6px; font-size: 14px; }
.ls-bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; margin-top: 5px; }
.ls-bar i { display: block; height: 100%; background: var(--accent-2); }
.ls-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.ls-row small { color: var(--muted-2); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.tu-start { display: grid; gap: 12px; }
.tu-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tu-modus { text-align: left; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.3; }
.tu-modus small { display: block; font-weight: 400; color: var(--muted-2); font-size: 12px; margin-top: 3px; }
.tu-modus:hover { border-color: var(--accent); }
.tu-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.tu-head b { color: var(--ink); }
.tu-head .sp { flex: 1; }
.tu-chat { display: flex; flex-direction: column; gap: 10px; max-height: min(58vh, 560px); min-height: 220px; overflow-y: auto; padding: 4px 2px 8px; overscroll-behavior: contain; }
.tu-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.tu-msg p { margin: 0 0 7px; } .tu-msg p:last-child { margin: 0; }
.tu-msg ul, .tu-msg ol { margin: 4px 0 6px; padding-left: 20px; }
.tu-msg code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; font-size: 13.5px; }
.tu-ki { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.tu-ich { align-self: flex-end; background: var(--accent-2); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.tu-ich img { display: block; max-width: 180px; border-radius: 8px; margin-bottom: 6px; }
.tu-sys { align-self: center; font-size: 12px; color: var(--muted-2); text-align: center; max-width: 95%; }
.tu-err { align-self: center; color: var(--bad); font-size: 13px; text-align: center; }
.tu-typing::after { content: "▍"; animation: tu-blink 1s steps(2) infinite; color: var(--accent); }
@keyframes tu-blink { 50% { opacity: 0; } }
.tu-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tu-quick button { padding: 6px 11px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 12.5px; cursor: pointer; }
.tu-quick button:hover { color: var(--ink); border-color: var(--accent); }
.tu-input { display: flex; gap: 8px; align-items: flex-end; }
.tu-input textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; font-family: inherit; font-size: 16px; line-height: 1.4; }
.tu-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 18px; cursor: pointer; }
.tu-send { height: 44px; padding: 0 16px; }
.tu-bild { font-size: 12px; color: var(--accent); margin: 4px 0; display: flex; gap: 8px; align-items: center; }
.tu-bild button { background: none; border: none; color: var(--muted); cursor: pointer; }

.pw { text-align: center; padding: 10px 6px; }
.pw-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #121418; background: linear-gradient(90deg, #7fc4e8, #b9a2f0); padding: 4px 10px; border-radius: 20px; }
.pw h3 { font-size: 21px; margin: 12px 0 4px; }
.pw-preis { font-size: 30px; font-weight: 800; margin: 10px 0 2px; }
.pw-preis small { font-size: 14px; color: var(--muted); font-weight: 600; }
.pw ul { text-align: left; max-width: 420px; margin: 14px auto; padding: 0; list-style: none; }
.pw li { padding: 7px 0 7px 26px; position: relative; font-size: 14px; line-height: 1.45; border-bottom: 1px solid var(--line-2); }
.pw li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }
.pw .btn-primary { width: min(360px, 100%); padding: 13px; font-size: 16px; margin: 6px 0; }
.pw .btn-secondary { width: min(360px, 100%); margin: 4px 0; }
.pw-fine { font-size: 11.5px; color: var(--muted-2); margin-top: 10px; line-height: 1.5; }
.key-box { font-family: "SF Mono", Menlo, monospace; font-size: 12px; word-break: break-all; background: var(--sunken); border: 1px dashed var(--line); padding: 10px; border-radius: 8px; user-select: all; }

.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 16px auto 4px; }
.pw-plan { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 13px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 14px; }
.pw-plan small { color: var(--muted-2); font-size: 11.5px; line-height: 1.35; }
.pw-plan .pw-p { font-size: 21px; font-weight: 800; }
.pw-plan .pw-p small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pw-plan.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--field)); }
.pw-tag { position: absolute; top: -10px; right: 10px; font-size: 10px; font-weight: 800; background: #e3b860; color: #121418; padding: 2px 8px; border-radius: 10px; }
.pw-fine a { color: var(--accent); }
.tu-melden { display: block; margin: 6px 0 -2px auto; background: none; border: none; color: var(--muted-2); font-size: 11px; cursor: pointer; padding: 2px 0; }
.tu-melden:hover { color: var(--bad); }
@media (max-width: 420px) { .pw-plans { grid-template-columns: 1fr; } }



html[data-look="kids"] { --page-a: #3b4a7a; --page-b: #26304f; --calc-a: #2b3560; --calc-b: #1d2444; --calc-c: #253058;
  --panel: #1f2747; --panel-2: #18203b; --field: #151b33; --line: #34406b; --line-2: #2c365c;
  --accent: #ffd166; --accent-2: #f3722c; --lcd-a: #fff3c4; --lcd-b: #f6e3a1; --radius: 22px; }
html[data-look="kids"] .btn-primary, html[data-look="kids"] .chip, html[data-look="kids"] .tu-modus { border-radius: 14px; }
html[data-look="kids"] .task-q { font-size: 20px; }


html[data-look="abi"] { --page-a: #3f3a56; --page-b: #262333; --calc-a: #26232f; --calc-b: #17151d; --calc-c: #201d28;
  --panel: #1f1d27; --panel-2: #17151e; --accent: #b9a2f0; --accent-2: #6d4fc2; --lcd-a: #d9d5e8; --lcd-b: #c8c2dc; }

html[data-look="studium"] { --page-a: #2f4741; --page-b: #1d2b28; --calc-a: #1f2826; --calc-b: #141a19; --calc-c: #1b2321;
  --panel: #1a2220; --panel-2: #131917; --line: #2c3a36; --line-2: #26312e; --accent: #6ee7b7; --accent-2: #0f8a63; --lcd-a: #cfe3da; --lcd-b: #bcd4c9; --radius: 12px; }

html[data-look="azubi"] { --page-a: #4d4236; --page-b: #2c2620; --calc-a: #29241f; --calc-b: #1a1714; --calc-c: #221e1a;
  --panel: #221e1a; --panel-2: #1a1714; --line: #3d352d; --line-2: #332c26; --accent: #fbbf24; --accent-2: #c2660a; --lcd-a: #e6dcc6; --lcd-b: #d8ccb2; }

html[data-look="hoer"] { --page-a: #2c4a4d; --page-b: #1b2d30; --calc-a: #1e2a2c; --calc-b: #131b1c; --calc-c: #1a2426;
  --panel: #182224; --panel-2: #121a1b; --line: #2a3b3e; --line-2: #243336; --accent: #5eead4; --accent-2: #0f766e; --lcd-a: #cde6e2; --lcd-b: #b8d8d3; }

html[data-look="meister"] { --page-a: #4a4330; --page-b: #2a261c; --calc-a: #27241c; --calc-b: #181610; --calc-c: #211e17;
  --panel: #201d16; --panel-2: #181611; --line: #3b3526; --line-2: #322d21; --accent: #e3c06a; --accent-2: #9a7b2f; --lcd-a: #e8e0c6; --lcd-b: #dad0b0; }


:root { --c-rechnen: #5aa9e6; --c-rechnen-2: #2b78b8; --c-lernen: #46c48a; --c-lernen-2: #1d8a59;
  --c-hoer: #a78bfa; --c-hoer-2: #6d4fc2; --c-beruf: #f2a65a; --c-beruf-2: #b8641f; --c-master: #e3b860; --c-master-2: #9a7b2f; --c-setup: #9fb0c2; --c-setup-2: #4d5d6e; }
.menu-btn:focus-visible, .tab:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .chip:focus-visible, .key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


.view { padding: 20px 22px 26px; }
.h3 { font-size: 19px; font-weight: 650; letter-spacing: -.2px; color: var(--ink); margin: 4px 0 10px; }
.h4 { font-size: 15px; font-weight: 600; color: var(--ink); }
.muted { font-size: 14px; color: var(--muted); }
.lbl, .grid-form label, .nh-head label, .pf-grid label, .hf { font-size: 12.5px; font-weight: 500; }
.field { border-radius: 10px; font-family: "Lexend", -apple-system, sans-serif; }
#eq-input, .eq-in, #lcd-input, .fn-row .field, #tb-f, .lgs-grid .field, .htable input { font-family: "SF Mono", Menlo, Consolas, monospace; }
.btn-primary { border-radius: 12px; padding: 11px 22px; font-weight: 650; background: var(--accent-2); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .45; cursor: default; filter: none; }
.btn-secondary { border-radius: 10px; padding: 9px 15px; font-size: 13.5px; font-weight: 500; }
.seg { border-radius: 12px; overflow: hidden; }
.seg button { font-weight: 600; padding: 9px 15px; }
.chip { border-radius: 999px; }
.card { border-radius: 16px; padding: 16px 18px; }
.task { border-radius: 16px; }
.task-q { font-size: 18px; line-height: 1.5; }
.kv { border-radius: 10px; }
.tu-modus { border-radius: 14px; font-weight: 600; padding: 14px; }
.tu-modus:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.tu-msg { font-size: 15.5px; }
.pw h3 { font-weight: 700; letter-spacing: -.3px; }
.pw-badge { background: var(--accent); color: #10141a; letter-spacing: .02em; }
.pw li::before { color: var(--accent); }
.key { font-family: "Lexend", -apple-system, sans-serif; }
.k-light { font-weight: 500; }
@media (max-width: 760px) {
  .view { padding: 18px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.tu-input .tu-icon { display: flex; align-items: center; justify-content: center; }
.tu-bild { flex-wrap: wrap; }
.tu-anh { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--ink); font-size: 12.5px; }
.tu-anh button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 4px; }
@media (max-width: 420px) { .tu-input .tu-icon { width: 40px; flex-basis: 40px; } }
.tu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-chips .chip { font-size: 13px; padding: 7px 12px; }
.pf-stile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pf-stil { text-align: left; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pf-stil small { color: var(--muted-2); font-size: 12px; }
.pf-stil.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.tu-qbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.tu-qbtns button { padding: 10px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.tu-qbtns button:not(:disabled):hover { border-color: var(--accent); }
.tu-qbtns button.gewaehlt { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.tu-qbtns button:disabled:not(.gewaehlt) { opacity: .45; }
.ls-kopf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.ls-kachel { background: var(--field); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.ls-kachel b { font-size: 17px; } .ls-kachel small { color: var(--muted-2); font-size: 12px; }
.ls-kachel .btn-sm { margin-top: 6px; align-self: flex-start; }
.kk-heute { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kk-heute b { font-size: 20px; }
.kk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kk-karte { width: 100%; min-height: 220px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface-2), var(--field)); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; cursor: pointer; font-family: inherit; text-align: center; }
.kk-karte.umgedreht { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--field)); border-color: var(--accent); cursor: default; }
.kk-text { font-size: 20px; line-height: 1.45; white-space: pre-wrap; }
.kk-seite { font-size: 12px; color: var(--accent); font-weight: 600; }
.kk-antwort { justify-content: center; margin-top: 14px; }
.kk-antwort button { flex: 1; max-width: 220px; padding: 13px; }
.kk-ende { text-align: center; }
details.card summary { cursor: pointer; }
@media (max-width: 520px) { .ls-kopf { grid-template-columns: 1fr 1fr; } }
.wi-liste { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.wi-liste .ls-row { font-size: 13px; }


.sb-dlg { width: min(980px, 100vw); height: min(720px, 100dvh); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); display: none; flex-direction: column; overflow: hidden; }
.sb-dlg[open] { display: flex; }
.sb-dlg::backdrop { background: rgba(0,0,0,.6); }
.sb-kopf, .sb-fuss { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.sb-kopf .sp, .sb-fuss .sp { flex: 1; }
.sb-werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-werkzeuge button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; }
.sb-werkzeuge button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.sb-farbe::after { content: ""; display: block; width: 18px; height: 18px; margin: auto; border-radius: 50%; background: var(--f); }
.sb-flaeche { flex: 1; min-height: 0; margin: 0 12px; border-radius: 12px; overflow: hidden; background: #fbfbf7; }
.sb-flaeche canvas { display: block; cursor: crosshair; }
@media (max-width: 600px) { .sb-dlg { border-radius: 0; height: 100dvh; } .sb-fuss .muted { display: none; } }


.dg-box { margin: 8px 0; background: var(--sunken); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; }
.dg { width: 100%; height: auto; display: block; }
.dg .dg-t { fill: var(--muted); font-size: 11px; font-family: "Lexend", sans-serif; }
.dg .dg-titel { fill: var(--ink); font-size: 13.5px; font-weight: 600; font-family: "Lexend", sans-serif; }
.dg .dg-achsentitel { fill: var(--muted); font-size: 11.5px; }
.dg .dg-lab { fill: var(--ink); }
.dg .dg-gitter { stroke: var(--line-2); stroke-width: 1; }
.dg .dg-achse { stroke: var(--muted-2); stroke-width: 1.3; }
.dg .dg-rahmen { fill: none; stroke: var(--line); }
.dg-laden { color: var(--muted); font-size: 13px; padding: 14px; text-align: center; }
.tu-msg .dg-box { margin-left: -4px; margin-right: -4px; }


.k-frac .kf { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; margin-top: 5px; }
.k-frac .kf i { display: block; width: 8px; height: 6px; border: 1.5px solid currentColor; border-radius: 2px; }
.k-frac .kf b { display: block; width: 15px; border-top: 1.6px solid currentColor; }
.k-frac em.y sup, .k-frac em.y sub { font-size: 6px; }
.lcd-pretty { min-height: 0; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 17px; color: #2b3624; padding: 0 0 2px; overflow-x: auto; white-space: nowrap; }
.lcd-pretty:empty { display: none; }
.lcd-pretty .frac, .lcd-result .frac { margin: 0 2px; }
.lcd-pretty .frac .num, .lcd-result .frac .num { border-bottom-color: currentColor; padding: 0 3px; }
.lcd-pretty .frac .den, .lcd-result .frac .den { padding: 0 3px; }
.lcd-result .frac { font-size: 22px; line-height: 1.1; }
.lcd-result .gemischt { display: inline-flex; align-items: center; gap: 1px; }
.lcd-pretty .sq-arg, .lcd-result .sq-arg { border-top-color: currentColor; }

.eq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.eq-row { display: flex; gap: 6px; align-items: center; }
.eq-row .field { flex: 1; min-width: 0; }
.eq-row .eq-del { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.eq-vars { display: flex; gap: 6px; flex-wrap: wrap; }
.eq-vars button { min-width: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: "SF Mono", Menlo, monospace; font-size: 15px; cursor: pointer; }
.eq-vars button.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.sol-set { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }


html[data-look="kids"] .top-cluster, html[data-look="kids"] .lcd-status, html[data-look="kids"] .key em { display: none !important; }
html[data-look="kids"] .fkeys { grid-template-columns: repeat(4, 1fr); }
html[data-look="kids"] .fkeys .key:not([data-action="frac"]):not([data-ins="("]):not([data-ins=")"]):not([data-action="sd"]) { display: none; }
html[data-look="kids"] .fkeys .key { min-height: 48px; font-size: 18px; }
html[data-look="kids"] .numkeys { gap: 11px 10px; }
html[data-look="kids"] .numkeys .key { min-height: 60px; font-size: 24px; border-radius: 14px; }
html[data-look="kids"] .numkeys [data-ins="×10^("], html[data-look="kids"] .numkeys [data-ins="Ans"] { display: none; }
html[data-look="kids"] .numkeys [data-ins="0"] { grid-column: span 2; }
html[data-look="kids"] .numkeys .k-eq { grid-column: span 2; }
html[data-look="kids"] .k-del { font-size: 17px; }
html[data-look="kids"] .lcd-input { font-size: 26px; }
html[data-look="kids"] .lcd-result { font-size: 34px; min-height: 42px; }
html[data-look="kids"] .muted { font-size: 15px; }
html[data-look="kids"] .chip { font-size: 16px; padding: 10px 16px; }
html[data-look="kids"] .btn-primary { font-size: 17px; padding: 13px 24px; }
html[data-look="kids"] .tu-modus { font-size: 16px; }
html[data-look="kids"] .tu-msg { font-size: 17px; }


.tour { position: fixed; inset: 0; z-index: 1000; display: none; }
.tour.an { display: block; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(8, 10, 14, .72); outline: 2px solid var(--accent); transition: all .25s ease; pointer-events: none; }
.tour-karte { position: fixed; width: min(380px, calc(100vw - 16px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.tour-karte h4 { font-size: 17px; margin: 2px 0 6px; }
.tour-karte p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.tour-karte .btn-row { display: flex; gap: 8px; align-items: center; }
.tour-karte .sp { flex: 1; }
.tour-zaehler { font-size: 12px; color: var(--accent); font-weight: 600; }
body.tour-offen { overflow: hidden; }
.anleitung details p { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }


.pr-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.pr-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pr-kopf .sp, .pr-knoepfe .sp { flex: 1; }
.pr-uhr { font-family: "SF Mono", Menlo, monospace; font-size: 15px; padding: 4px 10px; border-radius: 8px; background: var(--field); border: 1px solid var(--line); }
.pr-uhr.knapp { color: var(--bad); border-color: var(--bad); }
.pr-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pr-nav button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; font-weight: 600; }
.pr-nav button.fertig { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); color: var(--ink); }
.pr-nav button.aktiv { border-color: var(--accent); outline: 2px solid var(--accent); }
.pr-knoepfe { display: flex; gap: 8px; margin-top: 12px; }
.pr-mc { display: grid; gap: 8px; margin-top: 10px; }
.pr-opt { text-align: left; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 15px; cursor: pointer; display: flex; gap: 10px; }
.pr-opt b { color: var(--accent); }
.pr-opt.gewaehlt { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.pr-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; counter-reset: pr; }
.pr-zieh { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); counter-increment: pr; }
.pr-zieh::before { content: counter(pr) "."; color: var(--accent); font-weight: 700; width: 20px; text-align: right; }
.pr-zieh .griff { cursor: grab; font-size: 20px; color: var(--muted); padding: 0 4px; }
.pr-zieh .txt { flex: 1; } .pr-zieh.zieht { opacity: .6; border-color: var(--accent); }
.pr-pfeile { display: flex; gap: 4px; } .pr-pfeile button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pr-zuordnen { display: grid; gap: 8px; margin-top: 10px; }
.pr-ziel { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--field); }
.pr-ziel .slot { min-height: 40px; border: 2px dashed var(--line); border-radius: 10px; display: flex; align-items: center; padding: 4px 8px; color: var(--muted-2); font-size: 13px; }
.pr-ablage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--sunken); min-height: 54px; }
.pr-chip { display: inline-block; padding: 9px 13px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--ink); border: 1px solid var(--accent); cursor: grab; font-size: 14px; user-select: none; -webkit-user-select: none; }
.pr-chip.gewaehlt { background: var(--accent-2); } .pr-chip.zieht { opacity: .4; }
.pr-geist { position: fixed; z-index: 1001; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.pr-bild { max-width: 100%; border-radius: 10px; margin-top: 10px; background: #fff; }
.pr-ergebnis { text-align: center; } .pr-note { font-size: 34px; font-weight: 800; color: var(--accent); }
.pr-rueck.ok summary { color: var(--ok); } .pr-rueck.teil summary { color: var(--yellow); } .pr-rueck.bad summary { color: var(--bad); }
.pr-rueck .task-q { margin-top: 8px; font-size: 15px; }
@media (max-width: 520px) { .pr-ziel { grid-template-columns: 1fr; } }
.bg-eintrag { margin-bottom: 6px; } .bg-eintrag span { color: var(--ink); line-height: 1.5; } .bg-eintrag b { color: var(--accent); }


.tu-chat { max-height: none !important; min-height: 120px; overflow: visible; }
.tu-input { position: sticky; bottom: 0; z-index: 5; background: var(--panel); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); margin-top: 4px; }
.tu-quick { position: relative; }
@media (max-width: 480px) { .tu-input { gap: 6px; } .tu-input .tu-icon { width: 38px; height: 44px; flex-basis: 38px; font-size: 17px; } .tu-send { padding: 0 12px; } }


.wer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.wer-b { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 14px; }
.wer-b span { font-size: 17px; } .wer-b.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.wer-neu { color: var(--muted); border-style: dashed; }
.wer-emojis { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.wer-emojis button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 20px; cursor: pointer; }
.wer-emojis button.active { border-color: var(--accent); }


html.start-offen, html.start-offen body { overflow: hidden; }
.start-ov { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.start-box { width: 100%; max-width: 560px; margin: auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.start-kopf { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; margin-bottom: 6px; }
.start-zur { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.start-skip { justify-self: end; background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 8px 0; }
.start-punkte { display: flex; gap: 6px; justify-content: center; }
.start-punkte i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s; }
.start-punkte i.ok { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.start-punkte i.an { width: 22px; background: var(--accent); }
.start-box h2 { font-size: 22px; line-height: 1.25; margin: 10px 0 8px; color: var(--ink); }
.start-inhalt { display: flex; flex-direction: column; gap: 10px; }
.start-feld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); min-width: 0; }
.start-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.start-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.start-fuss .btn-primary { flex: 1 1 200px; }
.start-plaene { display: grid; gap: 10px; }
.start-plan { position: relative; text-align: left; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; font: inherit; }
.start-plan.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.start-plan b { font-size: 16px; } .start-plan .pw-p { font-size: 20px; font-weight: 700; } .start-plan .pw-p small { font-size: 12px; font-weight: 400; color: var(--muted); }
.start-plan ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.start-plan .pw-tag { position: absolute; top: 12px; right: 12px; }
.start-ok { border-left: 3px solid var(--ok); }
@media (min-width: 720px) { .start-plaene { grid-template-columns: repeat(3, 1fr); } .start-plan .pw-tag { position: static; justify-self: start; margin-bottom: 4px; } }


.abz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 42%), 1fr)); gap: 10px; margin-top: 8px; }
.abz-karte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 12px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); }
.abz-karte b { font-size: 13.5px; color: var(--ink); } .abz-karte small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.abz-karte .ls-bar { width: 100%; margin-top: 4px; } .abz-karte .abz-next { font-size: 11px; }
.abz-svg { width: 64px; height: 72px; } .abz-svg.zu { filter: grayscale(1); opacity: .38; }
.abz-karte.zu b { color: var(--muted); }
.ll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 10px; }
.ll-karte { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 2px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.ll-karte.zu { color: var(--muted); border-style: dashed; }
.ll-svg.zu { opacity: .55; }
.abz-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 1100; display: flex; gap: 12px; align-items: center; max-width: min(420px, calc(100vw - 32px));
  padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 12px 36px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); cursor: pointer; }
.abz-toast.an { transform: translate(-50%, 0); }
.abz-toast small { color: var(--muted); }
.abz-toast-bild svg { width: 46px; height: 52px; display: block; }
@media (prefers-reduced-motion: reduce) { .abz-toast { transition: none; } }
.tu-hinweis { align-self: center; text-align: center; max-width: 90%; padding: 6px 12px; border-radius: 999px; background: var(--field); border: 1px dashed var(--line); }
.fr-karte summary { cursor: pointer; } .fr-form { display: grid; gap: 10px; margin-top: 10px; }
.fr-ok { align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); } .fr-ok input { margin-top: 3px; flex: none; }
.mf-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.mf-kacheln span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--line-2); }
.mf-kacheln b { font-size: 17px; color: var(--ink); } .mf-kacheln small { color: var(--muted); font-size: 12px; }
.mf-karte summary { cursor: pointer; } .mf-codes code { font-size: 15px; letter-spacing: .04em; }

.app-fuss { display: flex; justify-content: center; padding: 18px 16px calc(80px + env(safe-area-inset-bottom)); }
.fb-knopf { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 14px; cursor: pointer; }
.app-fuss { flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.recht-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; width: 100%; font-size: 13px; }
.recht-fuss a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.recht-fuss a:hover { color: var(--ink); }
.fb-knopf:hover { color: var(--ink); border-color: var(--accent); }
.fb-text { width: 100%; min-height: 110px; resize: vertical; font-family: inherit; margin-top: 10px; }
.fb-arten { margin-top: 6px; }
.fb-meine div { margin-top: 4px; } .fb-antwort { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 6px; }
.mk-tab { overflow-x: auto; margin: 10px 0; } .mk-tab .vt { min-width: 520px; width: 100%; }
.mb-karte p { margin: 8px 0; white-space: pre-wrap; }
.lp-form { display: grid; gap: 10px; margin-top: 10px; } .lp-datei { display: inline-flex; justify-content: center; cursor: pointer; }
.lp-karte summary { cursor: pointer; }
.pr-lade { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: pr-dreh .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
.pr-mehr { display: inline-flex; align-items: center; padding: 0 6px; }
@keyframes pr-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-lade { animation: none; } }


:root { --unten: calc(64px + env(safe-area-inset-bottom)); --seite: 16px;
  --c-start: var(--accent); --c-start-2: var(--accent-2); --c-tutor: #a78bfa; --c-tutor-2: #6d4fc2; }
body { padding: 0 0 var(--unten); background: var(--page-b); background-image: radial-gradient(120% 60% at 20% 0%, var(--page-a), var(--page-b) 70%); background-attachment: fixed; }


.kopf { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(var(--seite), env(safe-area-inset-right)) 8px max(var(--seite), env(safe-area-inset-left));
  background: var(--bar); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-2); }
.brand { display: flex; align-items: center; gap: 9px; cursor: default; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; min-width: 0; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-logo { font-weight: 700; font-size: 17px; letter-spacing: -.3px; color: var(--ink); }
.edition { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-knopf { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.kopf-knopf svg { width: 21px; height: 21px; }
.kopf-knopf[aria-expanded="true"] { background: var(--c-rechnen-2); border-color: var(--c-rechnen-2); color: #fff; }
body[data-view="view-rechner"] .kopf-knopf { visibility: hidden; }


.workspace { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 1180px; margin: 0 auto; padding: 0 max(var(--seite), env(safe-area-inset-right)) 0 max(var(--seite), env(safe-area-inset-left)); }
.panel { width: 100%; max-width: 760px; margin: 0 auto; flex: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.bereich-titel { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.6px; color: var(--ink); margin: 18px 0 12px; }
.view { padding: 4px 0 24px; }


.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; background: none; border: 0; overflow: visible; }
.tab { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab:hover { border-color: var(--accent); }
.tab.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }


.panel { --area: var(--c-start); --area-2: var(--c-start-2); }
.panel[data-area="ueben"] { --area: var(--c-lernen); --area-2: var(--c-lernen-2); }
.panel[data-area="tutor"] { --area: var(--c-tutor); --area-2: var(--c-tutor-2); }
.panel[data-area="rechner"] { --area: var(--c-rechnen); --area-2: var(--c-rechnen-2); }
.panel[data-area="ich"] { --area: var(--c-setup); --area-2: var(--c-setup-2); }
.panel[data-area="master"] { --area: var(--c-master); --area-2: var(--c-master-2); }
.panel .view, .panel .tabs { --accent: var(--area); --accent-2: var(--area-2); }


.menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: var(--bar); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line-2); }
.menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 2px 0; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; min-width: 0; }
.menu-btn[data-g="start"] { --c: var(--c-start); } .menu-btn[data-g="ueben"] { --c: var(--c-lernen); } .menu-btn[data-g="tutor"] { --c: var(--c-tutor); }
.menu-btn[data-g="rechner"] { --c: var(--c-rechnen); } .menu-btn[data-g="ich"] { --c: var(--c-setup); }
.menu-ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background .15s; }
.menu-ico svg { width: 24px; height: 24px; }
.menu-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-btn:hover { color: var(--ink); }
.menu-btn.active { color: var(--ink); }
.menu-btn.active .menu-ico { background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.menu-btn:focus-visible, .tab:focus-visible, .kopf-knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }


.calc { display: none; width: 100%; max-width: 420px; margin: 0 auto 18px; }
.calc-griff { display: none; }
body[data-view="view-rechner"] .calc { display: block; order: 2; }
body[data-view="view-rechner"] #view-rechner { display: none !important; }
html.rechner-offen .calc { display: block; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0 auto; max-height: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px 24px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 50px rgba(0,0,0,.45); animation: rechner-auf .22s ease-out; }
html.rechner-offen .calc-griff { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; }
.calc-griff-titel { font-weight: 700; color: #e8e8e8; font-size: 15px; }
.calc-zu { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--c-rechnen-2); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@keyframes rechner-auf { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }


.app-fuss { padding: 8px 16px 28px; }
.tu-input { bottom: var(--unten); }
.abz-toast { bottom: calc(var(--unten) + 12px); }

@media (min-width: 1000px) {
  :root { --unten: 0px; }
  body { padding: 0 0 0 96px; }
  .menu { top: 0; bottom: 0; right: auto; width: 96px; grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: start; padding: 84px 8px 16px;
    border-top: 0; border-right: 1px solid var(--line-2); }
  .menu-btn { font-size: 12.5px; }
  .kopf { padding-left: 24px; padding-right: 24px; }
  .workspace { padding: 0 32px; }

  body[data-area="rechner"] .workspace { flex-direction: row; align-items: flex-start; gap: 28px; justify-content: center; }
  body[data-area="rechner"] .calc { display: block; order: 0; margin: 18px 0 24px; position: sticky; top: 84px; flex: none; width: 400px; }
  body[data-area="rechner"] .panel { margin: 0; flex: 1 1 520px; }
  body[data-area="rechner"] .kopf-knopf { visibility: hidden; }
  html.rechner-offen .calc { left: auto; right: 24px; bottom: 24px; width: 400px; border-radius: 24px; padding-bottom: 18px; }
  .tu-input { bottom: 0; }
}
@media (max-width: 380px) { .menu-txt { font-size: 11px; } .menu-ico { width: 48px; } .bereich-titel { font-size: 27px; } }
@media print { .menu, .kopf, .app-fuss { display: none !important; } body { padding: 0; } }


html[data-theme="light"], html[data-theme="light"][data-look] {
  color-scheme: light;
  --bg: #f3f5f8; --page-a: #f8fafc; --page-b: #eef1f5; --panel: #ffffff; --panel-2: #f1f3f6; --field: #ffffff; --line: #cfd5dd; --line-2: #e2e6eb;
  --ink: #15181c; --ink-2: #2b3037; --muted: #515a65; --muted-2: #5d6671;
  --surface: #eceff3; --surface-2: #ffffff; --surface-hover: #e2e6eb; --sunken: #f1f3f6; --edge: #d5dae1;
  --bar: rgba(255, 255, 255, .94); --schatten: 0 10px 30px rgba(20, 30, 50, .10);
  --ok: #17803d; --bad: #c42b3a;
  --c-rechnen: #1f6fb2; --c-rechnen-2: #1b62a0; --c-lernen: #157a4c; --c-lernen-2: #11683f; --c-tutor: #6a4bc4; --c-tutor-2: #5a3ea8;
  --c-hoer: #6a4bc4; --c-hoer-2: #5a3ea8; --c-beruf: #a85a1a; --c-beruf-2: #8f4c15; --c-master: #876616; --c-master-2: #6f5412; --c-setup: #4d5d6e; --c-setup-2: #3e4c5b;
}
html[data-theme="light"] { --accent: #1f6fb2; --accent-2: #1b62a0; }
html[data-theme="light"][data-look="abi"] { --accent: #6a4bc4; --accent-2: #5a3ea8; }
html[data-theme="light"][data-look="studium"] { --accent: #0f7a5a; --accent-2: #0c6a4e; --page-a: #f6faf8; --page-b: #edf3f0; }
html[data-theme="light"][data-look="azubi"] { --accent: #a85a1a; --accent-2: #8f4c15; --page-a: #fbf8f4; --page-b: #f3eee7; }
html[data-theme="light"][data-look="hoer"] { --accent: #0f766e; --accent-2: #0c625b; --page-a: #f4f9f9; --page-b: #eaf2f2; }
html[data-theme="light"][data-look="meister"] { --accent: #876616; --accent-2: #6f5412; --page-a: #fbf9f3; --page-b: #f3efe3; }
html[data-theme="light"] .card, html[data-theme="light"] .task, html[data-theme="light"] .ls-kachel, html[data-theme="light"] .tu-modus,
html[data-theme="light"] .pr-opt, html[data-theme="light"] .start-plan, html[data-theme="light"] .pw-plan { box-shadow: 0 1px 2px rgba(20, 30, 50, .06); }
html[data-theme="light"] .tu-ki { background: var(--panel); }
html[data-theme="light"] .tu-msg code, html[data-theme="light"] .eq-output code { background: var(--surface); }
html[data-theme="light"] .key-box { background: var(--sunken); }
html[data-theme="light"] .dg-box { background: var(--panel); }
html[data-theme="light"] .htable tr.r th { color: #b4232f; } html[data-theme="light"] .htable tr.l th { color: #1f5f9e; }
html[data-theme="light"] .btn-secondary.armed { color: #fff; }
html[data-theme="light"] .pw-badge { color: #fff; }
html[data-theme="light"] .chip.active small { color: #e9f3fb; }
html[data-theme="light"] .tu-quick button { color: var(--ink-2); }


html[data-look="kids"] { --page-a: #f2f8ff; --page-b: #e8f1fc; --radius: 22px; --seite: 18px;
  --c-start: #e2560f; --c-start-2: #c84a0b; --c-lernen: #13804f; --c-lernen-2: #0f6c42; --c-tutor: #7a46d8; --c-tutor-2: #6536bd; --c-rechnen: #1769c2; --c-rechnen-2: #135aa8; --c-setup: #b5367a; --c-setup-2: #9a2c67;
  --accent: #e2560f; --accent-2: #c84a0b; }
html[data-look="kids"] body { font-size: 16.5px; }
html[data-look="kids"] .bereich-titel { font-size: 32px; }
html[data-look="kids"] .menu-btn { font-size: 13px; color: var(--ink-2); }
html[data-look="kids"] .menu-btn .menu-ico { color: var(--c); }                     /* Symbole immer bunt: Wiedererkennen ohne Lesen */
html[data-look="kids"] .menu-ico svg { width: 27px; height: 27px; }
html[data-look="kids"] .tab { font-size: 16px; min-height: 48px; padding: 0 18px; }
html[data-look="kids"] .card, html[data-look="kids"] .task { border-radius: 20px; }
html[data-look="kids"] .btn-primary { border-radius: 16px; min-height: 52px; }
html[data-look="kids"] .btn-secondary { min-height: 46px; font-size: 15px; border-radius: 14px; }
html[data-look="kids"] .calc { --calc-a: #2b3560; --calc-b: #1d2444; --calc-c: #253058; }


html[data-look="azubi"] .bereich-titel, html[data-look="studium"] .bereich-titel, html[data-look="meister"] .bereich-titel, html[data-look="hoer"] .bereich-titel { font-size: 26px; margin-top: 14px; }
html[data-look="studium"] .card, html[data-look="meister"] .card, html[data-look="azubi"] .card, html[data-look="hoer"] .card { border-radius: 12px; }
html[data-look="studium"] .tab, html[data-look="meister"] .tab, html[data-look="azubi"] .tab, html[data-look="hoer"] .tab { font-size: 14px; min-height: 40px; padding: 0 14px; }


.hs-gruss { font-size: 17px; color: var(--muted); margin: -4px 0 14px; }
.hs-weiter { --c: var(--c-start); --c2: var(--c-start-2); display: grid; gap: 4px; width: 100%; text-align: left; padding: 20px 20px 18px; margin-bottom: 14px; border-radius: 22px; border: 0; cursor: pointer;
  font: inherit; color: #fff; background: linear-gradient(140deg, var(--c2), color-mix(in srgb, var(--c2) 70%, #000)); box-shadow: 0 10px 28px color-mix(in srgb, var(--c2) 35%, transparent); }
.hs-pruefung { --c2: var(--c-lernen-2); }
.hs-was { font-size: 14px; font-weight: 600; opacity: .9; }
.hs-titel { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.hs-unter { font-size: 14.5px; opacity: .92; }
.hs-los { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 12px; padding: 12px 20px; min-height: 48px; border-radius: 999px; background: #fff; color: var(--c2); font-weight: 700; font-size: 16px; }
.hs-los svg { width: 20px; height: 20px; }
.hs-weiter:hover .hs-los { box-shadow: 0 0 0 4px rgba(255,255,255,.3); }
.hs-weiter:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hs-wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.hs-weg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 108px; padding: 14px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hs-weg:hover { border-color: var(--c); }
.hs-weg b { font-size: 15px; margin-top: auto; } .hs-weg small { font-size: 13px; color: var(--muted); }
.hs-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); margin-bottom: 8px; }
.hs-ico svg { width: 23px; height: 23px; }
.hs-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: 100%; padding: 14px 16px; min-height: 52px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); font: inherit; font-size: 14.5px; cursor: pointer; text-align: left; }
.hs-stand b { color: var(--ink); }
.hs-serie { display: inline-flex; align-items: center; gap: 5px; } .hs-serie svg { width: 19px; height: 19px; color: #e8590c; }
.hs-mehr { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; } .hs-mehr svg { width: 17px; height: 17px; }
@media (max-width: 420px) { .hs-wege { gap: 8px; } .hs-weg { padding: 12px 10px; min-height: 100px; } .hs-weg b { font-size: 14px; } .hs-titel { font-size: 22px; } }
html[data-look="kids"] .hs-titel { font-size: 27px; } html[data-look="kids"] .hs-weg b { font-size: 16px; }


.nh-zwischen { font-size: 17px; font-weight: 650; margin: 16px 0 2px; color: var(--ink); }
.nh-profil a, .nh-profil a:visited { color: var(--accent); font-weight: 600; }
.chip { min-height: 40px; }
.chip-tipp { border-color: var(--accent); }
.chip .tipp { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent-2); color: #fff; margin-right: 2px; }
.chip.active .tipp { background: #fff; color: var(--accent-2); }
.nh-frueher { margin: 4px 0 14px; } .nh-frueher summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tu-input { background: var(--page-b); }
.seg { flex-wrap: wrap; }
.seg button { min-height: 40px; }


body[data-area="start"] .bereich-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-gruss { font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); margin: 18px 0 14px; line-height: 1.2; }
html[data-look="kids"] .hs-gruss { font-size: 30px; }
.seg.pf-art { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 999px) {

  body[data-area="rechner"] .bereich-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body[data-area="rechner"] .tabs { gap: 6px; margin-top: 12px; }
  body[data-area="rechner"] .tab { min-height: 38px; padding: 0 12px; font-size: 14px; }
  body[data-view="view-rechner"] .calc { margin-top: 2px; padding: 12px 12px 16px; }

  html.rechner-offen .calc { max-height: 64dvh; padding-top: 12px; }
  html.rechner-offen .calc .top-cluster, html.rechner-offen .calc .lcd-status { display: none; }
  html.rechner-offen .calc .numkeys .key { min-height: 46px; }
  html.rechner-offen .calc .fkeys .key { min-height: 38px; }
  html.rechner-offen body { padding-bottom: 66dvh; }
}


.st-wahl { display: grid; gap: 10px; margin-top: 4px; }
.st-einladung { display: grid; gap: 4px; margin: 4px 0 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, var(--field)); border: 1.5px solid color-mix(in srgb, var(--ok) 40%, var(--line)); }
.st-einladung span { color: var(--muted, inherit); font-size: .92em; }
.an-freund { margin: 8px 0 0; }
.st-gross { display: grid; gap: 2px; text-align: left; width: 100%; min-height: 72px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.st-gross b { font-size: 17px; } .st-gross span { font-size: 14px; color: var(--muted); }
.st-gross:hover { border-color: var(--accent); }
.st-primaer { background: var(--accent-2); border-color: var(--accent-2); color: #fff; } .st-primaer span { color: rgba(255,255,255,.9); }
.st-ohne { margin: 6px auto 0; }
.an-link { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.an-form { display: grid; gap: 14px; }
.an-feld { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.an-feld .field { font-family: inherit; font-size: 17px; min-height: 50px; }
.an-pw { position: relative; display: block; }
.an-pw .field { padding-right: 52px; }
.an-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; font-size: 19px; cursor: pointer; border-radius: 10px; opacity: .7; }
.an-auge[aria-pressed="true"] { opacity: 1; }
.an-hinweis { font-weight: 400; font-size: 13px; color: var(--muted); min-height: 1.2em; }
.an-hinweis.gut { color: var(--ok); } .an-hinweis.schlecht { color: var(--bad); }
.an-fehler { color: var(--bad); font-size: 14.5px; font-weight: 600; min-height: 0; }
.an-fehler:empty { display: none; }
.an-los { min-height: 52px; font-size: 16.5px; }
.an-code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px; border-radius: 14px; border: 2px dashed var(--accent); background: var(--sunken); }
.an-code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 20px; font-weight: 700; letter-spacing: .06em; user-select: all; -webkit-user-select: all; }
.an-ok { font-size: 15px; color: var(--ink); min-height: 44px; }
.an-ok input { width: 22px; height: 22px; }
.an-wer { display: flex; align-items: center; gap: 12px; }
.an-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); font-size: 24px; flex: none; }
.an-warn { border-color: var(--bad); }
.an-karte h4 { font-size: 16px; }


:root { --farbe-standard: var(--c-start-2); --farbe-ozean: #0e7490; --farbe-wald: #2f7d32; --farbe-sonne: #c2410c; --farbe-beere: #a21caf; --farbe-galaxie: #4338ca; }
html[data-farbe="ozean"] { --c-start: #0e7490; --c-start-2: #0b6078; } html[data-farbe="wald"] { --c-start: #2f7d32; --c-start-2: #276a2a; }
html[data-farbe="sonne"] { --c-start: #c2410c; --c-start-2: #a8380a; } html[data-farbe="beere"] { --c-start: #a21caf; --c-start-2: #881796; }
html[data-farbe="galaxie"] { --c-start: #4338ca; --c-start-2: #3730a3; }
.bel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bel-kopf h4 { margin: 0; }
.bel-ziel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.bel-ziel .field { width: auto; min-width: 60px; padding: 6px 26px 6px 10px; font-size: 14px; }
.bel-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 6px; }
.bel-tag { display: grid; place-items: center; aspect-ratio: 1; max-width: 46px; width: 100%; justify-self: center; border-radius: 50%; border: 2px solid var(--line); color: var(--muted); font-weight: 700; font-size: 13px; }
.bel-tag.an { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.bel-tag.heute { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.bel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.bel-chips span { padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: 13.5px; color: var(--ink-2); }
.bel-zeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: 10px; font-size: 14px; }
.bel-zeile b { font-size: 13.5px; text-align: right; }
.bel-farbliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.bel-farbe { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; min-height: 76px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bel-farbe i { width: 26px; height: 26px; border-radius: 50%; background: var(--f); }
.bel-farbe small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.bel-farbe:disabled { opacity: .5; cursor: default; } .bel-farbe:disabled i { filter: grayscale(1); }
.bel-farbe.an { border-color: var(--f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 25%, transparent); }
.bel-gm h4 { margin-bottom: 4px; }
.bel-toast { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0; z-index: 1200; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--panel); font-weight: 650; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: all .25s ease; pointer-events: none; }
.bel-toast.an { opacity: 1; transform: translate(-50%, 0); }

.urkunde-dlg { width: min(560px, 94vw); }
.urkunde { position: relative; text-align: center; padding: 34px 22px 26px; border-radius: 18px; background: #fffdf5; color: #2b2a26; border: 6px double #d9a520; font-family: "Lexend", sans-serif; }
.uk-stern { width: 70px; height: 70px; margin: -6px auto 4px; display: block; }
.uk-titel { font-size: 38px; font-weight: 800; letter-spacing: .02em; color: #9a6b00; margin: 0; }
.uk-fuer { margin: 8px 0 0; color: #6b6656; } .uk-name { font-size: 28px; font-weight: 700; margin: 2px 0 12px; }
.uk-text { font-size: 17px; line-height: 1.5; margin: 0 auto 10px; max-width: 34ch; } .uk-lob { font-size: 18px; font-weight: 700; color: #b0450a; }
.uk-fuss { margin-top: 18px; font-size: 12px; color: #8a8576; }
@media print {
  body.urkunde-druck > *:not(.urkunde-dlg) { display: none !important; }
  body.urkunde-druck .urkunde-dlg { position: static; border: 0; box-shadow: none; width: 100%; max-width: none; padding: 0; }
  body.urkunde-druck .urkunde-dlg .btn-row { display: none; }
  body.urkunde-druck .urkunde { border-width: 10px; padding: 60px 40px; }
}


html[data-eltern="zu"] .tab.eltern-zu { display: none !important; }
.el-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.el-tor { text-align: center; max-width: 380px; margin: 10px auto; }
.el-punkte { display: flex; justify-content: center; gap: 14px; margin: 16px 0 6px; }
.el-punkte i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); }
.el-punkte i.an { background: var(--ink); border-color: var(--ink); }
.el-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 12px auto; }
.el-pad button { min-height: 58px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 24px; font-weight: 600; cursor: pointer; }
.el-pad button:active { background: var(--surface-hover); }
.el-wort { font-size: 21px; font-weight: 700; margin: 6px 0 12px; word-break: break-word; }
.el-msg { min-height: 1.3em; }
.el-balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 110px; margin: 10px 0; }
.el-balken span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.el-balken i { display: block; width: 100%; max-width: 30px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent-2); }
.el-balken small { font-size: 12px; color: var(--muted); }
.pr-mehr-opt { margin: 12px 0; } .pr-mehr-opt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; flex-wrap: wrap; }
.pr-mehr-opt .pf-grid { margin-top: 8px; }
.pr-start { display: grid; gap: 4px; justify-items: start; margin: 12px 0; }
.pr-los { min-height: 52px; font-size: 16.5px; padding: 0 28px; }

.fb-gross { display: grid; gap: 8px; margin: 6px 0 10px; }
.fb-gross .st-gross { min-height: 56px; padding: 12px 16px; }
.fb-gross .st-gross.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fb-rollen { margin-bottom: 8px; }


.m-seg { margin-bottom: 12px; }
.m-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 12px 0; }
.m-kachel { display: grid; gap: 4px; text-align: left; padding: 16px; min-height: 84px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.m-kachel b { font-size: 16px; } .m-kachel small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.m-kachel:hover { border-color: var(--accent); }
.m-todo .ls-row { gap: 12px; } .m-todo h4 { margin-bottom: 4px; }
.m-update-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-status { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.m-status.an { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }


.hs-haus { --c2: var(--c-tutor-2, var(--c-lernen-2)); }
.ul-klasse > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.ul-klasse > summary::-webkit-details-marker { display: none; }
.ul-klasse[open] > summary { margin-bottom: 10px; }
.ul-ampeln { display: inline-flex; gap: 3px; margin-left: auto; flex-wrap: wrap; max-width: 50%; }
.ul-a { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.ul-a.gruen { background: var(--ok); } .ul-a.gelb { background: #e0a400; } .ul-a.rot { background: var(--bad); }
.ul-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--field); margin-bottom: 6px; }
.ul-code b { font-size: 18px; letter-spacing: .12em; }
.ul-schueler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left; padding: 10px 12px; margin: 4px 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface, var(--field)); color: var(--ink); cursor: pointer; font: inherit; }
.ul-schueler:hover { background: var(--surface-hover, var(--field)); }
.ul-schueler small { flex-basis: 100%; color: var(--muted); padding-left: 20px; }
.ul-aufgabe { padding: 8px 10px; margin: 6px 0; border-radius: 8px; border-left: 4px solid var(--line-2); background: var(--field); line-height: 1.5; }
.ul-aufgabe.ok { border-left-color: var(--ok); } .ul-aufgabe.teil { border-left-color: #e0a400; } .ul-aufgabe.bad { border-left-color: var(--bad); }
.ul-detail h4, .ul-klasse h4 { margin-top: 16px; }
.ul-upload { margin-top: 6px; }
.small { font-size: 12px; }


.eq-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.eq-quellen .sp { flex: 1; }
.eq-foto { cursor: pointer; }
.eq-foto.aus, #eq-hand:disabled { opacity: .5; pointer-events: none; }
.eq-erkannt { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--line-2); }
.eq-erkannt code { font-size: 15px; }
.eq-hinweis p { margin: 6px 0 10px; }



.card { padding: 18px 20px; margin: 14px 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h4 { margin: 0 0 10px; line-height: 1.3; }
.card h4:not(:first-child) { margin-top: 20px; }
.card .ls-row:last-child { border-bottom: 0; }
.ls-row { padding: 11px 0; gap: 6px 14px; }

.card ul:not(.pw ul), .card ol, .tu-msg ul, .tu-msg ol, .hint ul, .hint ol { padding-left: 1.6em; margin: 8px 0 10px; }
.card li, .tu-msg li, .hint li { margin: 5px 0; padding-left: 4px; line-height: 1.5; }
.card li::marker, .tu-msg li::marker { color: var(--muted); }

.tu-msg { padding: 14px 18px; line-height: 1.55; }
.tu-msg p { margin: 0 0 10px; }

details.card > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 28px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; transition: transform .15s ease; }
details.card[open] > summary::before { transform: rotate(45deg); }
details.card[open] > summary { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { details.card > summary::before { transition: none; } }

.view .h3 { margin: 30px 0 12px; }
.view > .h3:first-child, .view > :first-child .h3:first-child, .card .h3 { margin-top: 6px; }

.chk { gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 6px 0; margin: 8px 0; }
.chk input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-2); }

.btn-row { gap: 10px; flex-wrap: wrap; }
.card .btn-row { margin-top: 14px; }
.task-row { gap: 10px; }
.muted + .btn-row, .muted + .task-row { margin-top: 12px; }

.view > .chk, .view > div:not(.card):not(.an-form) > .chk:only-child { background: var(--field); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 18px; }
.h3 + .chk, .h3 + p + .chk { background: var(--field); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 18px; }

.abz-toast { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s; }
.abz-toast.an { opacity: 1; visibility: visible; pointer-events: auto; transition: transform .3s ease, opacity .3s ease; }


.neu-dlg { max-width: min(460px, calc(100vw - 32px)); padding: 24px 24px 20px; }
.neu-titel { margin: 0 0 14px; font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.neu-liste { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 14px; }
.neu-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.neu-ic { font-size: 22px; line-height: 1.2; text-align: center; }
.neu-alt { margin: 16px 0 8px; }
.neu-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--unten, 0px) + 14px); z-index: 1150; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--ink); color: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 24px); font-size: 14px; }
.neu-leiste .neu-zu { background: none; border: 0; color: inherit; opacity: .7; font-size: 16px; cursor: pointer; padding: 6px; }


.view.gesperrt > :not(.sperre) { display: none !important; }
html[data-zugang="keins"] .calc, html[data-zugang="keins"].rechner-offen .calc { display: none !important; }
html[data-zugang="keins"] body[data-area="rechner"] .calc { display: none !important; }
.sperre-karte { text-align: center; padding: 28px 24px; margin-top: 8px; }
.sperre-karte h4 { font-size: 18px; margin: 6px 0 8px; }
.sperre-karte .btn-row { justify-content: center; }
.sperre-ic { font-size: 34px; line-height: 1; }
#kopf-rechner.zu { opacity: .55; }


.fam-kopf { display: flex; align-items: center; gap: 14px; }
.fam-emoji { font-size: 34px; line-height: 1; }
.fam-stand { margin: 12px 0 0; }
.fam-woche { display: flex; gap: 6px; margin: 6px 0; }
.fam-woche span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line-2); color: var(--muted); }
.fam-woche span.an { background: var(--ok); border-color: var(--ok); color: #fff; }
.fam-qr-box { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--field); border: 1px solid var(--line-2); }
.fam-qr-bild { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 6px; flex: none; }
.fam-qr-bild svg { width: 100%; height: 100%; display: block; }
.fam-qr-box ol { padding-left: 1.4em; margin: 6px 0; }
.fam-code { font-size: 30px; font-weight: 800; letter-spacing: .12em; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.fam-gm { margin-top: 6px; }
.ab-plaene { display: grid; gap: 10px; margin: 14px 0 6px; }
.ab-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; }
.ab-plan p { margin: 4px 0 0; }
.ab-plan .pw-p { font-weight: 700; }


.gm-gross h4 { font-size: 18px; }
.gm-ziel { font-size: 16px; line-height: 1.5; margin: 4px 0 8px; }
.gm-zahlen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 8px; font-size: 14px; }
.gm-ok { color: var(--ok); }
.gm-bar { height: 10px; }
.gm-kal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin: 12px 0 8px; max-width: 420px; }
.gm-kal i { aspect-ratio: 1; border-radius: 4px; background: var(--sunken, var(--line-2)); border: 1px solid var(--line-2); }
.gm-kal i.an { background: var(--ok); border-color: var(--ok); }
.gm-kal i.heute { outline: 2px solid var(--ink); outline-offset: 1px; }
.gm-kal i.zukunft { opacity: .55; }
.hs-gm { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 12px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface, var(--field)); color: var(--ink); font: inherit; cursor: pointer; }
.hs-gm > span:first-child { font-size: 24px; }
.hs-gm > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hs-gm small { color: var(--muted); }
.hs-gm svg { width: 18px; height: 18px; opacity: .6; }


.wz-faecher { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -2px 10px; padding: 2px; -webkit-overflow-scrolling: touch; }
.wz-faecher::-webkit-scrollbar { display: none; }
.wz-faecher button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.wz-faecher button.active { background: var(--area, var(--accent-2)); border-color: transparent; color: #fff; }
.wz-faecher button:focus-visible, .wz-el:focus-visible, .wz-land:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body[data-area="rechner"][data-wz]:not([data-wz=""]):not([data-wz="mathe"]) .calc { display: none !important; }
body[data-area="rechner"][data-wz]:not([data-wz=""]):not([data-wz="mathe"]) .kopf-knopf { visibility: visible; }
.wz-kurz { margin: 2px 0 10px; }
.wz-inhalt { min-width: 0; }
.wz-intro { margin-bottom: 10px; }
.wz-suche { display: flex; gap: 8px; margin: 4px 0 12px; }
.wz-suche .field { flex: 1; min-width: 0; margin: 0; }
.wz-suche button { flex: none; }
.wz-filter { margin: 8px 0; width: 100%; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.wz-unter { font-size: 14px; margin: 16px 0 8px; color: var(--muted); font-weight: 600; }
.wz-marke { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); vertical-align: 2px; }
.wz-kopfzeile { font-size: 20px; margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.wz-stammformen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; color: var(--ink-2); }
.wz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wz-karte { background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.wz-karte h4 { font-size: 14px; margin-bottom: 6px; color: var(--area, var(--accent)); }
.wz-konj { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.wz-konj td { padding: 3px 0; vertical-align: top; }
.wz-konj td.muted { width: 6.5em; padding-right: 10px; font-size: 13px; }
.wz-hinweise { margin: 12px 0 0 18px; color: var(--ink-2); font-size: 14px; display: grid; gap: 4px; }
.wz-klapp { background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; margin: 0 0 10px; padding: 0 14px; }
.wz-klapp > summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style-position: outside; }
.wz-klapp[open] > summary { border-bottom: 1px solid var(--line-2); margin-bottom: 10px; }
.wz-klapp > :last-child { margin-bottom: 14px; }
.wz-tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; }
.wz-tabelle { border-collapse: collapse; width: 100%; font-size: 14px; }
.wz-tabelle th, .wz-tabelle td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.wz-tabelle thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.wz-tabelle tbody th { font-weight: 600; }
.wz-regeln { list-style: none; display: grid; gap: 10px; }
.wz-regeln li { display: grid; gap: 2px; }
.wz-bsp { color: var(--muted); font-size: 13.5px; font-style: italic; }
.wz-unreg td, .wz-unreg th { white-space: nowrap; }

.wz-wb-wort { font-size: 24px; margin-bottom: 4px; }
.wz-wb-teil + .wz-wb-teil { border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 12px; }
.wz-wb-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; color: var(--ink-2); }
.wz-wb-zeile { margin: 4px 0; } .wz-wb-zeile .muted { margin-right: 4px; }
.wz-wb-ueb { font-size: 17px; font-weight: 600; margin: 6px 0; }
.wz-wb-bed { margin: 6px 0 6px 20px; display: grid; gap: 3px; }
.wz-wb-bsp { margin: 6px 0 6px 18px; color: var(--ink-2); font-style: italic; display: grid; gap: 3px; }
.wz-wb-quelle { margin-top: 10px; }

.wz-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wz-leg { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wz-leg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.wz-leg[aria-pressed="true"] { border-color: var(--k); box-shadow: inset 0 0 0 1px var(--k); }
[data-kat="alk"] { --k: #e06c5a; } [data-kat="erd"] { --k: #e89b4c; } [data-kat="ueb"] { --k: #c9a94a; } [data-kat="met"] { --k: #7fa6c9; } [data-kat="hal"] { --k: #5fb59a; }
[data-kat="nme"] { --k: #7cc46a; } [data-kat="hlg"] { --k: #4fb8c8; } [data-kat="edg"] { --k: #a98be0; } [data-kat="lan"] { --k: #d77fb3; } [data-kat="act"] { --k: #b5857a; }
html[data-theme="light"] [data-kat="alk"] { --k: #c2412f; } html[data-theme="light"] [data-kat="erd"] { --k: #c76d12; } html[data-theme="light"] [data-kat="ueb"] { --k: #9a7a12; }
html[data-theme="light"] [data-kat="met"] { --k: #3f6f99; } html[data-theme="light"] [data-kat="hal"] { --k: #23866a; } html[data-theme="light"] [data-kat="nme"] { --k: #3d8a2c; }
html[data-theme="light"] [data-kat="hlg"] { --k: #1c8597; } html[data-theme="light"] [data-kat="edg"] { --k: #6c4bc0; } html[data-theme="light"] [data-kat="lan"] { --k: #b03f83; } html[data-theme="light"] [data-kat="act"] { --k: #8c5a4e; }
.wz-pse-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; padding-bottom: 4px; }
.wz-pse { display: grid; grid-template-columns: repeat(18, minmax(34px, 1fr)); grid-template-rows: repeat(7, auto) 10px repeat(2, auto); gap: 3px; min-width: 640px; }
.wz-el, .wz-el-platz { aspect-ratio: 1 / 1.08; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 22%, var(--field));
  color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; cursor: pointer; font: inherit; line-height: 1.05; min-width: 0; }
.wz-el b { font-size: 15px; }
.wz-el .wz-el-z, .wz-el-platz { font-size: 9.5px; color: var(--ink-2); }
.wz-el-platz { cursor: default; border-style: dashed; }
.wz-el.aktiv { background: var(--k); color: #111; border-color: var(--k); }
.wz-el.aktiv .wz-el-z { color: #111; }
.wz-pse[data-hervor]:not([data-hervor=""]) .wz-el { opacity: .28; }
.wz-pse[data-hervor="alk"] .wz-el[data-kat="alk"], .wz-pse[data-hervor="erd"] .wz-el[data-kat="erd"], .wz-pse[data-hervor="ueb"] .wz-el[data-kat="ueb"], .wz-pse[data-hervor="met"] .wz-el[data-kat="met"],
.wz-pse[data-hervor="hal"] .wz-el[data-kat="hal"], .wz-pse[data-hervor="nme"] .wz-el[data-kat="nme"], .wz-pse[data-hervor="hlg"] .wz-el[data-kat="hlg"], .wz-pse[data-hervor="edg"] .wz-el[data-kat="edg"],
.wz-pse[data-hervor="lan"] .wz-el[data-kat="lan"], .wz-pse[data-hervor="act"] .wz-el[data-kat="act"] { opacity: 1; }
.wz-el-detail { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; border-left: 4px solid var(--k); }
.wz-el-gross { width: 76px; height: 82px; border-radius: 10px; background: color-mix(in srgb, var(--k) 30%, var(--field)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wz-el-gross .wz-el-sym { font-size: 32px; font-weight: 700; } .wz-el-gross .wz-el-z { font-size: 13px; color: var(--ink-2); }
.wz-el-detail h3 { font-size: 20px; }
.wz-el-werte { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 12px; font-size: 14px; }
.wz-el-werte dt { color: var(--muted); } .wz-el-werte dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .wz-el-detail { grid-template-columns: 1fr; } .wz-el-werte { grid-template-columns: 1fr; gap: 0; } .wz-el-werte dd { margin-bottom: 6px; } }
.wz-mol-M { font-size: 19px; margin-bottom: 10px; }
.wz-n-rechner { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.wz-n-rechner label { display: inline-flex; gap: 8px; align-items: center; }
.wz-n-rechner .field { width: 110px; margin: 0; }
.wz-gl-erg { font-size: 20px; margin-bottom: 8px; line-height: 1.6; }
.wz-koeff { color: var(--area, var(--accent)); }
.wz-formeln { list-style: none; display: grid; gap: 12px; }
.wz-formeln li { display: grid; gap: 2px; }
.wz-f-name { font-size: 13px; color: var(--muted); }
.wz-f-formel { font-size: 16.5px; font-weight: 600; }
.wz-f-erkl { font-size: 13px; }

.wz-karte-rahmen { background: var(--sunken); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; margin: 0 0 10px; touch-action: manipulation; }
.wz-karte-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.wz-karte-svg.de { max-height: 72vh; }
.wz-land { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--sunken); stroke-width: .5; cursor: pointer; transition: fill .15s; }
.wz-karte-svg.de .wz-land { stroke-width: 1.2; }
.wz-land:hover { fill: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.wz-land.aus { fill: var(--surface); opacity: .55; cursor: default; }
.wz-land.umstritten { stroke: var(--muted-2); }
.wz-schr-bg { fill: var(--surface); } .wz-schr-l { stroke: var(--muted-2); stroke-width: 1.4; }
.wz-land.gewaehlt { fill: var(--accent); stroke: var(--ink); stroke-width: .8; }
.wz-land.richtig { fill: var(--ok); } .wz-land.falsch { fill: var(--bad); }
.wz-geo-modus { margin-bottom: 8px; }
.wz-quiz { margin-top: 0; }
.wz-quiz-frage { font-size: 17px; margin: 2px 0 10px; }
.wz-quiz-opt { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.wz-quiz-opt .btn-secondary { text-align: left; min-height: 44px; white-space: normal; }
.wz-quiz-opt .richtig { background: var(--ok); color: #fff; border-color: var(--ok); } .wz-quiz-opt .falsch { background: var(--bad); color: #fff; border-color: var(--bad); }
.wz-zeit-opt { grid-template-columns: 1fr; }
.wz-quiz .ok { color: var(--ok); font-weight: 600; margin-bottom: 8px; }
.wz-zeit { list-style: none; margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--line); }
.wz-zeit-epoche { margin: 18px 0 8px -14px; padding-left: 14px; font-weight: 700; color: var(--area, var(--accent)); position: relative; }
.wz-zeit-epoche:first-child { margin-top: 4px; }
.wz-zeit-punkt { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 7px 0; position: relative; }
.wz-zeit-punkt::before { content: ""; position: absolute; left: -20px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--area, var(--accent)); }
.wz-zeit-jahr { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .wz-zeit-punkt { grid-template-columns: 1fr; gap: 0; } }
.wz-zeit-loesung { margin: 4px 0 10px 20px; display: grid; gap: 4px; }
.wz-k-tab .field { width: 52px; min-width: 52px; padding: 6px 4px; text-align: center; margin: 0; }
.wz-k-tab td, .wz-k-tab th { padding: 4px 3px; }
.wz-klima-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 6px 0; }
.wz-k-gitter { stroke: var(--line-2); stroke-width: 1; }
.wz-k-t { fill: #e0707c; font-size: 11px; } .wz-k-n { fill: #6fa8dc; font-size: 11px; } .wz-k-m { fill: var(--muted); font-size: 11px; }
.wz-k-bar { fill: #6fa8dc; opacity: .85; } .wz-k-linie { fill: none; stroke: #e0707c; stroke-width: 2.5; stroke-linejoin: round; }
.wz-k-arid { fill: #e3b860; opacity: .18; }
html[data-theme="light"] .wz-k-t { fill: #c42b3a; } html[data-theme="light"] .wz-k-linie { stroke: #c42b3a; } html[data-theme="light"] .wz-k-bar { fill: #2f6fb0; } html[data-theme="light"] .wz-k-n { fill: #2f6fb0; }
.wz-k-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin: 4px 0 10px; }
.wz-k-legende span::before { content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.wz-k-lt::before { background: #e0707c; } .wz-k-ln::before { background: #6fa8dc; height: 10px !important; } .wz-k-la::before { background: rgba(227, 184, 96, .45); height: 10px !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wz-land { transition: none; } }
.wz-merk { list-style: none; display: grid; gap: 12px; }
.wz-merk li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--area, var(--accent)); }
.wz-merk-satz { font-weight: 600; font-size: 15.5px; }
html[data-look="kids"] .wz-merk-satz { font-size: 17px; }
@media (min-width: 700px) { .wz-faecher { flex-wrap: wrap; overflow: visible; } }
.quellen-liste { margin: 10px 0 14px 18px; display: grid; gap: 10px; font-size: 14px; }


#druck-bereich { display: none; }
@media print {
  @page { size: A4; margin: 15mm 15mm 17mm; }
  html.druck-an body { background: #fff !important; background-image: none !important; color: #000; padding: 0 !important; font-size: 11pt; line-height: 1.4; }
  html.druck-an body > *:not(#druck-bereich) { display: none !important; }
  html.druck-an #druck-bereich { display: block; color: #000; font-family: "Lexend", Helvetica, Arial, sans-serif; }
  #druck-bereich * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .dr-kopf { display: grid; grid-template-columns: 1fr auto; gap: 8mm; align-items: start; border-bottom: 1.5pt solid #000; padding-bottom: 4mm; margin-bottom: 6mm; break-inside: avoid; }
  .dr-kopf h1 { font-size: 17pt; margin: 0 0 1mm; } .dr-kopf p { margin: 0; font-size: 10pt; }
  .dr-felder { border-collapse: collapse; font-size: 9.5pt; }
  .dr-felder td { border: 0.6pt solid #000; padding: 1.6mm 2.4mm; min-width: 14mm; height: 7mm; }
  .dr-felder td:nth-child(odd) { font-weight: 600; min-width: 12mm; }
  .dr-felder td:nth-child(2) { min-width: 42mm; }
  .dr-aufgabe { break-inside: avoid; page-break-inside: avoid; margin: 0 0 6mm; padding-bottom: 4mm; border-bottom: 0.4pt solid #999; }
  .dr-aufgabe h3 { display: flex; justify-content: space-between; font-size: 11.5pt; margin: 0 0 2mm; }
  .dr-p { font-weight: 400; font-size: 9.5pt; border: 0.6pt solid #000; border-radius: 2mm; padding: 0.4mm 2.2mm; }
  .dr-frage { margin-bottom: 2mm; } .dr-frage svg, .dr-frage img { max-width: 100%; }
  .dr-hinweis { font-size: 9pt; font-style: italic; margin: 0 0 2mm; }
  .dr-mc { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6mm; }
  .dr-mc li { display: flex; gap: 2.5mm; align-items: baseline; }
  .dr-kasten { display: inline-block; flex: none; width: 3.6mm; height: 3.6mm; border: 0.8pt solid #000; transform: translateY(0.5mm); }
  .dr-zuordnen { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .dr-zuordnen ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2mm; }
  .dr-zuordnen b { display: inline-block; width: 5mm; }
  .dr-luecke { white-space: nowrap; margin-left: 1mm; }
  .dr-reihe { list-style: none; padding: 0; margin: 0; display: grid; gap: 2mm; }
  .dr-nr { display: inline-block; width: 7mm; height: 6mm; border: 0.8pt solid #000; margin-right: 3mm; vertical-align: middle; }
  .dr-linien div { height: 8mm; border-bottom: 0.5pt solid #777; }
  .dr-ergebnis { margin: 3mm 0 0; font-weight: 600; } .dr-ergebnis span { display: inline-block; width: 55mm; border-bottom: 0.8pt solid #000; }
  .dr-raster { border: 0.8pt solid #000; background-image: linear-gradient(#bbb 0.3pt, transparent 0.3pt), linear-gradient(90deg, #bbb 0.3pt, transparent 0.3pt) !important;
    background-size: 5mm 5mm !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dr-fuss { font-size: 8pt; margin-top: 4mm; }
  .dr-loesungen { break-before: page; page-break-before: always; }
  .dr-loesungen h2 { font-size: 14pt; margin: 0 0 4mm; border-bottom: 1.5pt solid #000; padding-bottom: 2mm; }
  .dr-loesungen ol { list-style: none; padding: 0; margin: 0; }
  .dr-l { break-inside: avoid; margin-bottom: 3mm; }
  .dr-klein { font-size: 9pt; }
}


.ma-intro { margin-bottom: 10px; }
.ma-faecher button small { opacity: .7; margin-left: 2px; }
.ma-hoch { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.ma-hoch p, .ma-hoch #ma-fortschritt { flex-basis: 100%; margin: 0; }
.ma-datei-knopf { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ma-datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ma-datei-knopf:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ma-datei-knopf.deaktiviert { opacity: .45; pointer-events: none; }
.ma-liste { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.ma-eintrag { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; }
.ma-name { display: flex; gap: 10px; align-items: flex-start; background: none; border: 0; color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-width: 0; flex: 1; padding: 0; }
.ma-name b { overflow-wrap: anywhere; }
.ma-ic { font-size: 22px; line-height: 1; }
.ma-akt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .ma-eintrag { flex-direction: column; align-items: stretch; } .ma-akt { justify-content: flex-start; } }
.ma-leer { margin: 14px 0; }
.ma-speicher { margin-top: 14px; }
.wz-lehrkraft { border-left: 3px solid var(--area, var(--accent)); }
.wz-eigen-form { display: grid; gap: 8px; margin-top: 10px; }
.wz-eigen-form .seg label { padding: 6px 12px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.ul-kf { display: inline-flex; gap: 6px; align-items: center; }
.ul-mf { margin: 10px 0 4px; }
.ul-mneu { margin-top: 10px; display: grid; gap: 8px; }
.seg.ma-faecher { display: flex; flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; border-radius: 0; }
.seg.ma-faecher button { border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; }

.m-alarm { border-left: 4px solid var(--bad); }
.m-aus-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.m-aus-zeile .ls-bar, .m-aus-zeile small { grid-column: 1 / -1; }

.ki-marke { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; padding: 3px 6px; border-radius: 6px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); margin: 0 6px 4px 0; vertical-align: 1px; }
.tu-ki > .ki-marke { float: left; margin-top: 2px; }
.ki-hinweis { margin-top: 6px; }
.start-recht { margin-top: 10px; }

.code-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.code-zeile > span:first-child { font-size: 22px; }
.code-zeile small { display: block; margin-top: 2px; }
.code-zeile > span:last-child { font-size: 22px; color: var(--muted); }
.code-dlg { width: min(420px, 92vw); }
.code-dlg p { margin: 0 0 10px; }
.code-feld { width: 100%; font-size: 20px; letter-spacing: .06em; text-align: center; }
.code-art { min-height: 1.4em; margin: 6px 0; }
.code-dlg .btn-row { margin-top: 12px; }

.pf-kurs-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-kurs { padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.pf-kurs.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); font-weight: 700; }
.nh-kurs-hinweis { margin: 6px 0 0; }


.hs-plan { --c: var(--c-tutor); --c2: var(--c-tutor-2, var(--c-lernen-2)); }
.pp-plan { margin: 0; }
.pp-plan summary { cursor: pointer; line-height: 1.45; }
.pp-plan summary > span { display: inline-block; vertical-align: top; max-width: calc(100% - 28px); }
.pp-tage { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 2px; }
.pp-tage li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; border-left: 3px solid transparent; }
.pp-tage label { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; line-height: 1.4; }
.pp-tage input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pp-tage .pp-heute { background: var(--surface-2); border-left-color: var(--accent); }
.pp-tage .pp-offen { border-left-color: #e3b860; }
.pp-tage .pp-ok span { opacity: .55; text-decoration: line-through; }
.pp-tage .pp-ok small { text-decoration: none; }
.pp-neu { border-left: 3px solid var(--accent); margin: 12px 0 0; }
.pp-tipp:empty { display: none; }


.wt-host { display: block !important; flex-basis: 100%; width: 100%; margin-top: 10px; }
.wt-box { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--accent); background: var(--surface-2); color: var(--ink); font-size: 14px; line-height: 1.4; text-align: left; }
.wt-kopf { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.wt-kopf b { flex: 1; }
.wt-zeit { font-variant-numeric: tabular-nums; color: var(--muted); }
.wt-kreisel { width: 20px; height: 20px; flex: none; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: pr-dreh .8s linear infinite; }
.wt-balken { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.wt-balken i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .5s linear; }
.wt-schritt { font-weight: 600; }
.wt-info { color: var(--muted); font-size: 13px; }
.tu-denkt { display: flex; align-items: center; gap: 8px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wt-kreisel { animation: none; } .wt-balken i { transition: none; } }


.ab-kacheln { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .ab-kacheln b { font-size: 20px; }
.ab-legende { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin: 4px 0 10px; } .ab-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ab-legende i.ein, .ab-balken i.ein { background: #2a78d6; } .ab-legende i.kos, .ab-balken i.kos { background: #d9652b; }
.ab-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.ab-monat { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; } .ab-monat small { color: var(--muted); font-size: 11px; padding: 4px 0; }
.ab-balken { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; } .ab-balken i { display: block; width: 42%; max-width: 16px; min-height: 2px; border-radius: 4px 4px 0 0; }
.ab-tab { width: 100%; border-collapse: collapse; font-size: 14px; } .ab-tab th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ab-tab td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .ab-tab .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-tab td:nth-child(2) { white-space: nowrap; } .ab-tab td, .ab-tab th { padding-left: 8px; padding-right: 8px; }
.ab-akt { width: 104px; min-width: 104px; } .ab-tab td:first-child { overflow-wrap: anywhere; } .ab-akt .btn-sm { display: block; width: 100%; margin: 3px 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.ab-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--field); }
.ab-pill.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .ab-pill.weg { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; } .ab-pill.gratis { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }


.nt-tab tr[style*="--nh"] { --nf: hsl(var(--nh) var(--ns) 33%); }
.nt-tab tr.nt-kopf > th { background: var(--nf); color: #fff; font-size: 14px; font-weight: 800; padding: 6px 12px; }
.nt-tab tr.nt-zeile > td { color: var(--nf); background: color-mix(in srgb, var(--nf) 5%, transparent); } .nt-tab tr.nt-zeile > td:first-child { border-left: 4px solid var(--nf); }
.ab-pill.aus { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.nt-tab .ab-akt { width: 150px; min-width: 150px; }

.nt-rolle { min-width: 104px; padding: 6px 8px; font-size: 13px; }