/* =====================================================================
   Hoffmann Kursplattform
   Corporate Design Werbeagentur Hoffmann · Light Mode
   Blau #0C4C93 · Schwarz #0B0C0F · Jost (Headlines) · Montserrat (Text)
   ===================================================================== */

@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url('../fonts/jost-v14-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('../fonts/jost-v14-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url('../fonts/jost-v14-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-display: swap; src: url('../fonts/jost-v14-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --blue: #0C4C93;
  --blue-700: #093a71;
  --blue-500: #2E86E0;
  --blue-200: #bcd4ef;
  --blue-100: #dce8f6;
  --blue-50: #eef4fb;
  --ink: #0B0C0F;
  --text: #39404d;
  --muted: #6b7280;
  --line: #e2e7ee;
  --line-strong: #cfd7e2;
  --bg: #f4f6f9;
  --white: #fff;
  --ok: #1d7a46;
  --ok-bg: #e7f5ec;
  --err: #b42318;
  --err-bg: #fdecea;
  --warn-bg: #fff6e0;
  --warn: #8a5a00;

  --t1-bg: #eaf2fb; --t1-fg: #1f5fa8;
  --t2-bg: #d3e4f7; --t2-fg: #0C4C93;
  --t3-bg: #9fc3ec; --t3-fg: #073566;
  --t4-bg: #2E86E0; --t4-fg: #fff;
  --t5-bg: #0C4C93; --t5-fg: #fff;

  --f-head: 'Jost', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
  --f-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 12, 15, .04), 0 4px 16px rgba(11, 12, 15, .05);
  --shadow-lg: 0 2px 4px rgba(11, 12, 15, .05), 0 16px 40px rgba(12, 76, 147, .10);
  --ease: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 15px/1.6 var(--f-body); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--f-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.005em; }
h1, .h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
h5, .h5 { font-size: .95rem; margin-top: 1.25rem; }
p { margin: 0 0 1em; }
code, pre, .mono { font-family: var(--f-mono); font-size: .9em; }
code { background: var(--blue-50); color: var(--blue-700); padding: .1em .4em; border-radius: 5px; }
strong, b { color: var(--ink); }
.muted { color: var(--muted); }
.small, small { font-size: .85rem; }
.lead { font-size: 1.08rem; color: var(--text); max-width: 62ch; }
.mt { margin-top: 1.75rem; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }
.w-50 { width: 50%; }
.inline { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico--xl { width: 44px; height: 44px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.main { flex: 1; padding: 32px 0 64px; }
.section { margin-top: 44px; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section__head h2 { margin: 0; }
.section__head p { margin: 0; }

/* ---------- Topbar ---------- */
.topbar { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--ink) 0 22%, var(--blue) 22% 100%); }
.topbar__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 70px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand img { height: 38px; width: auto; }
.brand__app { font-family: var(--f-head); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); padding-left: 14px; border-left: 1px solid var(--line-strong); line-height: 1.1; }
.brand__app em { font-style: normal; color: var(--ink); }
.mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mainnav > a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--r-sm); font-family: var(--f-head); font-weight: 500; color: var(--text); text-decoration: none; }
.mainnav > a:hover { background: var(--blue-50); color: var(--blue); }
.mainnav > a.is-active { color: var(--blue); background: var(--blue-50); }
.mainnav__switch { border: 1px dashed var(--line-strong); }
.mainnav > a.mainnav__switch span { display: none; }
@media (max-width: 1360px) { .usermenu__name { display: none; } }
.is-admin .usermenu__name { display: none; }
.usermenu { display: flex; align-items: center; gap: 10px; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--line); }
.usermenu__name { font-size: .85rem; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); color: var(--text); cursor: pointer; font-size: 1rem; transition: all var(--ease); }
.iconbtn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.iconbtn:disabled { opacity: .35; cursor: default; }
.iconbtn--danger:hover { border-color: var(--err) !important; color: var(--err) !important; }
.navtoggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-sm); cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.navtoggle span:not(.sr-only) { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- Footer ---------- */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: 22px 0; font-size: .85rem; color: var(--muted); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.footer strong { font-family: var(--f-head); font-weight: 600; color: var(--ink); font-size: .95rem; }
.footer__since { margin-left: 8px; color: var(--blue); font-family: var(--f-head); font-weight: 500; }
.footer__help { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.footer__help a, .footer__legal a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.footer__legal { display: flex; gap: 16px; }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font: 600 .95rem/1.2 var(--f-head); letter-spacing: .01em; cursor: pointer;
  text-decoration: none !important; transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(12, 76, 147, .22); }
.btn--primary:hover { background: var(--blue-700); color: var(--white); }
.btn--ghost { background: var(--white); color: var(--blue); border-color: var(--blue-200); }
.btn--ghost:hover { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.btn--text { background: none; color: var(--blue); padding-left: 8px; padding-right: 8px; }
.btn--text:hover { background: var(--blue-50); }
.btn--danger { color: var(--err) !important; }
.btn--danger:hover { background: var(--err-bg) !important; }
.btn--sm { padding: 7px 12px; font-size: .85rem; }
.btn--block { width: 100%; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Cards & Layout ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card--pad { --pad: 26px; padding: var(--pad); }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.cardhead h2 { margin: 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
.split--editor { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
.stack { display: grid; gap: 10px; }
.pagehead { margin-bottom: 26px; }
.pagehead h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: .3em; }
.pagehead--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .78rem/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-current] { color: var(--ink); }

/* ---------- Alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: .92rem; border: 1px solid; }
.alert--success { background: var(--ok-bg); border-color: #bfe3cc; color: var(--ok); }
.alert--error { background: var(--err-bg); border-color: #f5c6c1; color: var(--err); }
.alert--info { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 4px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font: 500 .85rem/1.3 var(--f-head); color: var(--ink); letter-spacing: .01em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; color: var(--ink); background: var(--white); transition: border-color var(--ease), box-shadow var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(12, 76, 147, .12); }
input:disabled { background: var(--bg); color: var(--muted); }
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
textarea.mono { font-size: .85rem; }
input[type=file] { font-size: .85rem; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--bg); width: 100%; }
.field--code input { font: 600 1.25rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 15px; border-color: var(--blue-200); background: var(--blue-50); }
.field--code input::placeholder { color: #9fb4cf; letter-spacing: .12em; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 4px 0 14px; cursor: pointer; }
.check > span { flex: 1; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex: none; }
.check--field { margin-bottom: 22px; }
.hint { font-size: .8rem; color: var(--muted); margin: -4px 0 12px; }
.form__row { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font: 500 .85rem/1.3 var(--f-head); color: var(--ink); margin-bottom: 8px; }
.form--upload { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Stufenauswahl */
.tierpick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tierpick legend { grid-column: 1 / -1; }
.tierpick__opt { position: relative; cursor: pointer; background: none !important; }
.tierpick__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tierpick__opt > span { display: grid; gap: 2px; text-align: center; padding: 12px 6px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--white); transition: all var(--ease); }
.tierpick__opt strong { font-family: var(--f-head); font-weight: 600; }
.tierpick__opt small { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.tierpick__opt:hover > span { border-color: var(--blue-200); }
.tierpick__opt input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 6px 16px rgba(12, 76, 147, .25); }
.tierpick__opt input:checked + span strong, .tierpick__opt input:checked + span small { color: var(--white); }
.tierpick__opt input:focus-visible + span { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* ---------- Tier-Badges ---------- */
.tier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 .74rem/1.2 var(--f-head); letter-spacing: .04em; white-space: nowrap; }
.tier--0 { background: #eef0f3; color: var(--muted); }
.tier--1 { background: var(--t1-bg); color: var(--t1-fg); }
.tier--2 { background: var(--t2-bg); color: var(--t2-fg); }
.tier--3 { background: var(--t3-bg); color: var(--t3-fg); }
.tier--4 { background: var(--t4-bg); color: var(--t4-fg); }
.tier--5 { background: var(--t5-bg); color: var(--t5-fg); }
.tier--admin { background: var(--ink); color: var(--white); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font: 600 .72rem/1.3 var(--f-head); letter-spacing: .03em; }
.tag .ico { width: 13px; height: 13px; }
.tag--done { background: var(--ok-bg); color: var(--ok); }
.tag--draft { background: var(--warn-bg); color: var(--warn); }
.tag--danger { background: var(--err-bg); color: var(--err); }
.tag--open { background: var(--blue-50); color: var(--blue); }

/* Stufenleiter */
.ladder { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; }
.ladder__step { display: grid; gap: 6px; text-align: center; }
.ladder__num { display: grid; place-items: center; border-radius: 6px 6px 3px 3px; background: var(--blue-50); color: var(--blue-200); font: 700 .9rem/1 var(--f-head); border: 1px solid var(--blue-100); transition: all .3s ease; }
.ladder__step:nth-child(1) .ladder__num { height: 26px; }
.ladder__step:nth-child(2) .ladder__num { height: 34px; }
.ladder__step:nth-child(3) .ladder__num { height: 42px; }
.ladder__step:nth-child(4) .ladder__num { height: 50px; }
.ladder__step:nth-child(5) .ladder__num { height: 58px; }
.ladder__step.is-on .ladder__num { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ladder__step.is-current .ladder__num { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue-500); }
.ladder__label { font-size: .68rem; color: var(--muted); line-height: 1.2; font-family: var(--f-head); }
.ladder__step.is-on .ladder__label { color: var(--ink); }

/* Fortschrittsbalken (Breite per JS aus data-progress, wegen CSP ohne Inline-Styles) */
.bar { display: block; height: 10px; border-radius: 999px; background: var(--blue-50); overflow: hidden; border: 1px solid var(--blue-100); }
.bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--blue-500)); border-radius: inherit; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.bar--sm { height: 6px; border: 0; }

/* ---------- Dashboard ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 28px; align-items: stretch; }
.hero__text { padding: 36px 36px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero__text h1 { max-width: 20ch; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; position: relative; z-index: 1; }
.hero__panel { background: var(--blue); color: var(--white); border-radius: var(--r); padding: 28px; display: grid; gap: 20px; align-content: start; box-shadow: var(--shadow-lg); }
.hero__panel .stat__label { color: rgba(255, 255, 255, .72); }
.hero__panel .stat__value { color: var(--white); }
.hero__panel .ladder__num { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .5); }
.hero__panel .ladder__step.is-on .ladder__num { background: var(--white); border-color: var(--white); color: var(--blue); }
.hero__panel .ladder__step.is-current .ladder__num { box-shadow: 0 0 0 3px var(--blue), 0 0 0 5px rgba(255, 255, 255, .7); }
.hero__panel .ladder__label { color: rgba(255, 255, 255, .6); }
.hero__panel .ladder__step.is-on .ladder__label { color: var(--white); }
.hero__panel .bar { background: rgba(255, 255, 255, .15); border-color: transparent; }
.hero__panel .bar > span { background: var(--white); }
.stat { display: grid; gap: 4px; }
.stat__label { font: 500 .75rem/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat__value { font: 600 1.7rem/1.1 var(--f-head); color: var(--ink); }
.stat--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.stat--row > div { display: grid; gap: 4px; }
.stat--row .stat__value { font-size: 1.35rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.course { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.course::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tc, var(--blue)); }
.course--t1 { --tc: var(--t3-bg); } .course--t2 { --tc: #6fa5e3; } .course--t3 { --tc: var(--blue-500); } .course--t4 { --tc: #1c66b8; } .course--t5 { --tc: var(--blue); }
.course:not(.is-locked):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.course__top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.course__title { font-size: 1.2rem; margin: 4px 0 0; }
.course__sub { color: var(--muted); font-size: .9rem; margin: 0; }
.course__meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); margin: 6px 0 4px; flex-wrap: wrap; }
.course__meta .ico { width: 15px; height: 15px; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); margin: 0 4px; }
.course__cta { margin-top: auto; align-self: flex-start; }
.course .bar { margin: 6px 0 10px; }
.course.is-locked { background: #fafbfc; }
.course.is-locked .course__title, .course.is-locked .course__sub { color: #8b93a1; }
.course.is-locked .course__top .tier { filter: grayscale(.4); }
.course__lock { display: flex; align-items: center; gap: 8px; font: 500 .85rem/1.2 var(--f-head); color: var(--ink); background: var(--white); border: 1px dashed var(--line-strong); padding: 10px 12px; border-radius: var(--r-sm); margin: 8px 0 12px; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .ico { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--blue-200); }

/* Willkommensvideo */
.welcome { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; padding: 28px; }
.welcome__text h2 { margin-bottom: .4em; }
.welcome__text p:last-child { margin: 0; }
.welcome__player { box-shadow: var(--shadow); }
.welcome__player video::cue { font-family: var(--f-body); background: rgba(11, 12, 15, .75); }
@media (max-width: 960px) { .welcome { grid-template-columns: 1fr; padding: 20px; } }

/* ---------- Kursseite ---------- */
.coursehead { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.coursehead__box { padding: 24px; display: grid; gap: 10px; position: sticky; top: 96px; }
.coursehead__box .stat__value { font-size: 2rem; }
.lockbox { text-align: center; display: grid; gap: 10px; justify-items: center; }
.lockbox .ico { color: var(--blue); }
.lockbox h3 { margin: 0; font-size: 1.1rem; }
.prose { color: var(--text); line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--blue); }
.prose blockquote, .prose .tipp, .prose .hinweis, .prose .warnung, .prose .aufgabe { margin: 1.4em 0; padding: 16px 20px; border-left: 4px solid var(--blue); background: var(--blue-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }
.prose .warnung { border-color: #d39b00; background: var(--warn-bg); }
.prose .aufgabe { border-color: var(--ink); background: #f2f3f5; }
.prose img { border-radius: var(--r-sm); margin: 1.2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose th { background: var(--bg); font-family: var(--f-head); }
.prose pre { background: var(--ink); color: #e8ecf2; padding: 16px; border-radius: var(--r-sm); overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }

.lessonlist { list-style: none; padding: 0; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.lessonlist__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.lessonlist__item:last-child { border-bottom: 0; }
.lessonlist__num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font: 600 .9rem/1 var(--f-head); }
.lessonlist__item.is-done .lessonlist__num { background: var(--blue); color: var(--white); }
.lessonlist__item.is-done .lessonlist__num .ico { width: 18px; height: 18px; }
.lessonlist__title { font: 600 1rem/1.3 var(--f-head); color: var(--ink); }
a.lessonlist__title:hover { color: var(--blue); }
.lessonlist__body p { margin: 2px 0 0; }
.lessonlist__meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); white-space: nowrap; padding-top: 9px; }
.lessonlist__meta .ico { width: 15px; height: 15px; }
.lessonlist.is-locked .lessonlist__item { opacity: .65; }

/* ---------- Lektion ---------- */
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.lesson__main { display: grid; gap: 22px; min-width: 0; }
.lesson__head h1 { margin-bottom: .25em; }
.lesson__head .lead { margin: 0; }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.downloads a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.downloads a:hover { border-color: var(--blue); background: var(--blue-50); }
.downloads a span { flex: 1; font-family: var(--f-head); font-weight: 500; }
.downloads a small { color: var(--muted); }
.downloads .ico { color: var(--blue); }
.lesson__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 0 0; border-top: 1px solid var(--line); }
.sticky { position: sticky; top: 96px; }
.sidelist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.sidelist a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.sidelist a:hover { background: var(--bg); color: var(--ink); }
.sidelist__num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font: 600 .72rem/1 var(--f-head); }
.sidelist__num .ico { width: 13px; height: 13px; }
.sidelist .is-done .sidelist__num { background: var(--blue); color: var(--white); }
.sidelist .is-current a { background: var(--blue-50); color: var(--blue); font-weight: 600; }

/* ---------- Code einlösen ---------- */
.tierinfo { list-style: none; padding: 0; margin: 18px 0 12px; display: grid; gap: 6px; }
.tierinfo li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: .9rem; }
.tierinfo li.is-on { background: var(--blue-50); }
.tierinfo small { color: var(--muted); }
.plainlist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }

/* ---------- Admin ---------- */
.is-admin .topbar::before { background: linear-gradient(90deg, var(--blue) 0 22%, var(--ink) 22% 100%); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 22px 0; }
.kpi { padding: 20px 22px; display: grid; gap: 4px; align-content: start; }
.kpi__label { font: 500 .75rem/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font: 600 2.1rem/1.1 var(--f-head); color: var(--blue); }
.kpi__sub { font-size: .8rem; color: var(--muted); }
.quickcode { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 20px; align-items: center; }
.quickcode p { margin: 0; }
.quickcode__btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tierbtn { display: grid; gap: 2px; padding: 14px 8px; border-radius: var(--r-sm); border: 0; cursor: pointer; font-family: var(--f-head); text-align: center; transition: transform var(--ease), box-shadow var(--ease); }
.tierbtn strong { font-weight: 600; font-size: 1.05rem; color: inherit; }
.tierbtn small { font-size: .72rem; opacity: .85; }
.tierbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12, 76, 147, .2); }
.tierbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tierbars li { display: grid; grid-template-columns: 70px 1fr 32px; gap: 12px; align-items: center; font-size: .85rem; }
.tierbars__track { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.tierbars__fill { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .8s ease; }
.tierbars__fill.tier--1 { background: var(--t3-bg); }
.tierbars__n { text-align: right; font-family: var(--f-head); font-weight: 600; color: var(--ink); }
.feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.feed li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.feed li > div { display: grid; line-height: 1.35; min-width: 0; }
.feed a { font-weight: 600; font-family: var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed small { color: var(--muted); }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); padding: 4px; border-radius: 10px; }
.tabs a { padding: 7px 13px; border-radius: 7px; font: 500 .85rem/1.2 var(--f-head); color: var(--text); text-decoration: none; }
.tabs a:hover { background: var(--bg); }
.tabs a.is-active { background: var(--blue); color: var(--white); }
.search { display: flex; gap: 8px; }
.search input { width: 260px; padding: 8px 12px; }

.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font: 600 .74rem/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 13px 16px; background: #fafbfc; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th.ta-r { text-align: right; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfcfe; }
.table tr.is-muted td { opacity: .55; }
.table small { color: var(--muted); }

.newcodes { margin-bottom: 26px; border: 2px solid var(--blue); box-shadow: var(--shadow-lg); }
.newcodes__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.newcodes__head h2 { margin: 0 0 4px; }
.newcodes__head p { margin: 0; }
.codelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.codelist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--blue-50); border-radius: var(--r-sm); }
.codelist__code { font: 700 1.15rem/1.2 var(--f-mono); letter-spacing: .08em; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 6px; border: 1px solid var(--blue-100); margin-right: auto; user-select: all; }
.secretbox { background: var(--ink); color: #e9eef5; padding: 18px; border-radius: var(--r-sm); font: .9rem/1.6 var(--f-mono); white-space: pre-wrap; margin: 0; user-select: all; }
.disclosure summary { cursor: pointer; font: 600 1rem/1.2 var(--f-head); color: var(--blue); display: flex; align-items: center; gap: 8px; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure[open] summary { margin-bottom: 18px; }
.tiergroup { margin-bottom: 26px; }
.tiergroup__head { display: flex; align-items: center; gap: 12px; font-size: 1rem; margin-bottom: 10px; }
.tiergroup__empty { padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); margin: 0; }
.adminlessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.adminlessons li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.adminlessons li.is-draft { background: #fffcf3; border-style: dashed; }
.adminlessons__num { font: 600 .85rem/1 var(--f-head); color: var(--blue); text-align: center; }
.adminlessons__body { display: grid; min-width: 0; }
.adminlessons__body a { color: var(--ink); }
.adminlessons__tools .iconbtn { width: 30px; height: 30px; }
.filelist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.filelist li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.filelist li > div { display: grid; min-width: 0; }
.filelist small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.filelist .ico { color: var(--blue); }
.progresslist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.progresslist li { display: grid; grid-template-columns: 1fr 90px 40px; gap: 10px; align-items: center; font-size: .85rem; }
.progresslist li.is-locked { opacity: .5; }
.progresslist small { text-align: right; color: var(--muted); }
.checklist { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 6px; }
.checklist li { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.checklist .is-ok .ico { color: var(--ok); }
.checklist .is-fail { color: var(--err); }

/* ---------- Login / Registrierung ---------- */
.is-auth { background: var(--white); }
.auth { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth__brand { position: relative; overflow: hidden; background: var(--blue-50); padding: 48px clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--blue-100); }
.auth__brandinner { position: relative; z-index: 1; max-width: 480px; }
.auth__logo { height: 54px; width: auto; margin-bottom: 56px; }
.auth__logo--sm { height: 40px; margin-bottom: 26px; }
.auth__claim { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; margin: 0 0 18px; font-weight: 600; }
.auth__claim span { color: var(--blue); }
.auth__text { font-size: 1rem; max-width: 42ch; color: var(--text); }
.auth__brand .ladder { max-width: 360px; margin-top: 30px; }
.auth__brand .ladder__num { background: var(--white); }
.auth__since { position: relative; z-index: 1; font: 500 .8rem/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 40px 0 0; }
.auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; }
.auth__card { width: 100%; max-width: 440px; }
.auth__card--wide { max-width: 560px; }
.auth__card h2 { font-size: 1.85rem; margin-bottom: .3em; }
.auth__card > .muted { margin-bottom: 26px; }
.auth__switch { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.auth__switch p { font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.auth__help, .auth__legal { font-size: .8rem; color: var(--muted); margin: 28px 0 0; text-align: center; }
.auth__legal { margin-top: 8px; }
.auth__legal a, .auth__help a { color: var(--muted); }
.auth--install { grid-template-columns: 1fr; background: var(--blue-50); }
.auth--install .auth__card { background: var(--white); padding: 36px; border-radius: var(--r); box-shadow: var(--shadow-lg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mainnav > a span { display: none; }
  .mainnav > a { padding: 10px; }
  .usermenu__name { display: none; }
}
@media (max-width: 960px) {
  .hero, .coursehead, .lesson, .split--editor, .quickcode { grid-template-columns: 1fr; }
  .coursehead__box, .sticky { position: static; }
  .auth { grid-template-columns: 1fr; }
  .auth__brand { padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--blue-100); }
  .auth__logo { height: 42px; margin-bottom: 24px; }
  .auth__claim { font-size: 1.8rem; }
  .auth__brand .ladder, .auth__since, .auth__text { display: none; }
}
@media (max-width: 820px) {
  .navtoggle { display: flex; }
  .brand__app { display: none; }
  .mainnav { display: none; position: absolute; left: 0; right: 0; top: 73px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; gap: 2px; }
  .mainnav.is-open { display: flex; }
  .mainnav > a span { display: inline; }
  .mainnav > a { padding: 12px; }
  .usermenu { margin: 8px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .usermenu__name { display: inline; flex: 1; }
}
@media (max-width: 640px) {
  .container, .topbar__inner { padding: 0 16px; }
  .main { padding-top: 22px; }
  .hero__text { padding: 24px 20px; }
  .hero__panel { padding: 20px; }
  .card--pad { --pad: 20px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .tierpick, .quickcode__btns { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tierpick__opt small, .tierbtn small { display: none; }
  .lessonlist__item { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; padding: 16px; }
  .lessonlist__meta { grid-column: 2; padding-top: 0; }
  .search, .search input { width: 100%; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .w-50 { width: auto; }
  .stat--row .stat__value { font-size: 1.15rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Ein-Kurs-Modus, geschützter Player, Geräte (Umbau 10/2026)
   ========================================================================== */
.stat__value--xl { font-size: 2.6rem; }
.hero__panel > .bar { margin-top: -8px; }

/* Kurs direkt auf der Übersicht */
.coursefeature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0; overflow: hidden; margin-bottom: 22px; }
.coursefeature__text { padding: 32px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--line); }
.coursefeature__text h2 { font-size: 1.9rem; margin: 0; }
.coursefeature__text .lead { margin: 0; }
.coursefeature__text .eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coursefeature__text .btn { justify-self: start; margin-top: 6px; }
.coursefeature .bar { max-width: 360px; }
.small-prose { font-size: .92rem; line-height: 1.65; }
.lessonlist--flat { border: 0; border-radius: 0; box-shadow: none; align-self: start; }

/* Anmeldeseite: Vorteile statt Stufenleiter */
.authpoints { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.authpoints li { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); color: var(--ink); }
.authpoints .ico { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--blue-50); color: var(--blue); flex: none; }
.hint .ico { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.devicetable td:first-child { white-space: nowrap; }

/* Geschützter Player */
.player--protected { user-select: none; -webkit-user-select: none; }
.player__wm { position: absolute; z-index: 3; pointer-events: none; font: 600 clamp(.7rem, 1.4vw, .95rem)/1.2 var(--f-body); color: rgba(255, 255, 255, .34); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap; transform: rotate(-8deg); transition: left 2.5s ease, top 2.5s ease; }
.player__lic { position: absolute; z-index: 3; left: 12px; top: 10px; pointer-events: none; font: 500 .68rem/1.2 var(--f-body); color: rgba(255, 255, 255, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__fs { position: absolute; z-index: 4; right: 12px; top: 10px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(11, 12, 15, .55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity var(--ease), background var(--ease); }
.player__fs:hover, .player__fs:focus-visible { opacity: 1; background: var(--blue); }
.player__fs .ico { width: 20px; height: 20px; }
.player:fullscreen, .player.is-fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.player:-webkit-full-screen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.player:fullscreen .player__wm { font-size: 1.2rem; }
.player__note { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .96); color: var(--ink); padding: 14px 18px; border-radius: var(--r-sm); font-size: .9rem; text-align: center; }

/* Geräte */
.devicelist { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.devicelist li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.devicelist li.is-current { border-color: var(--blue-200); background: var(--blue-50); }
.devicelist li > .ico { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 1px; }
.devicelist div { display: grid; gap: 2px; font-size: .9rem; }
.devicelist small { color: var(--muted); }

/* Admin */
.kpi--warn .kpi__value { color: var(--err); }
.quickcode--single { grid-template-columns: minmax(0, 1fr) auto; }
.quickcode--single .quickcode__btns { display: flex; }
.feed--wide li { grid-template-columns: auto 1fr; }
.narrow { max-width: 560px; margin: 0 auto; }

@media (max-width: 960px) {
  .coursefeature { grid-template-columns: 1fr; }
  .coursefeature__text { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px; }
  .quickcode--single { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .player__lic { max-width: 60%; }
}
@media (max-width: 960px) {
  .lesson, .coursehead, .hero, .coursefeature { grid-template-columns: minmax(0, 1fr); }
}
.lesson__main { grid-template-columns: minmax(0, 1fr); }
.lesson__actions .inline { flex-wrap: wrap; }

/* ==========================================================================
   Feinschliff Abstände (10/2026)
   ========================================================================== */
/* Kartenüberschriften: einheitlicher Abstand zum Inhalt, Icons in der Zeile */
.card .h4 { margin-bottom: 14px; }
.card .h4.mt { margin-top: 28px; }
.card .h4 + p { margin-top: -4px; }
.h5 { display: flex; align-items: center; gap: .5rem; margin-bottom: 10px; }
.h5 .ico { color: var(--blue); }
.cardhead .h4 { margin: 0; }
.card--pad > p:last-child, .card--pad > .small:last-child { margin-bottom: 0; }

/* Übersicht: Fortschritt oben, Kennzahlen unten im blauen Feld */
.hero__panel { grid-template-rows: auto auto 1fr; }
.hero__panel .stat--row { align-self: end; }
.hero__panel > .bar { margin-top: -4px; }

/* Lektionslisten: Nummer und Titel auf einer Linie */
.lessonlist__body { padding-top: 7px; }
.lessonlist__body p { margin-top: 4px; }
.lessonlist--flat { padding: 12px 0; }
.lessonlist--flat .lessonlist__item { padding: 18px 28px; }
.coursefeature__text .bar { margin: 2px 0 6px; }

/* Lektion: Seitenleiste */
.lesson__side .h4 { margin-bottom: 12px; }
.lesson__side .bar { margin-bottom: 8px; }
.lesson__side .small { margin: 0; }
.lesson__side .sidelist { margin-top: 16px; }
.sidelist a { align-items: flex-start; padding: 9px 10px; }
.sidelist__num { margin-top: -1px; }
.lesson__actions { margin-top: 4px; padding-top: 22px; }
.prose td:first-child { white-space: nowrap; }

/* Tabellen in Karten: bündig mit dem Kartenrand, Aktionen bündig mit der Kopfzeile */
.card--pad > .tablewrap { margin: 14px calc(var(--pad) * -1) calc(var(--pad) * -1); }
.card--pad > .tablewrap .table th:first-child, .card--pad > .tablewrap .table td:first-child { padding-left: var(--pad); }
.card--pad > .tablewrap .table th:last-child, .card--pad > .tablewrap .table td:last-child { padding-right: var(--pad); }
.card--pad > .tablewrap .table tr:last-child td { border-bottom: 0; }
.table td.ta-r .btn--text, .table td.ta-r .inline .btn--text, .cardhead .btn--text { margin-right: -8px; }
.devicetable td { white-space: nowrap; }
.userstable td:first-child { white-space: nowrap; }

/* Protokoll- und Feed-Listen: Text immer auf derselben Kante */
.feed--wide li { grid-template-columns: 7.75rem minmax(0, 1fr); }
.feed--wide li > .tag { justify-self: start; }
.feed li > .tag { justify-self: start; }

/* Geräte im Kundenkonto */
.devicelist div { gap: 3px; min-width: 0; }
.devicelist__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.devicelist__name .tag { font-size: .68rem; padding: 2px 7px; }
.devicelist + .small { margin-top: 14px; }

/* Anmeldeseite */
.auth__help { line-height: 1.7; }
.auth__help a { white-space: nowrap; }

/* Übersicht: nächste Lektion im blauen Feld */
.hero__next { position: relative; display: grid; gap: 6px; padding: 16px 56px 16px 18px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--white); text-decoration: none !important; align-self: center; transition: background var(--ease), border-color var(--ease); }
.hero__next:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: var(--white); }
.hero__next strong { color: var(--white); font: 600 1.05rem/1.3 var(--f-head); }
.hero__nextgo { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--white); color: var(--blue); display: grid; place-items: center; }
.hero__nextgo .ico { width: 14px; height: 14px; }
.hero__next--done { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; }
.hero__panel:has(.hero__next) { grid-template-rows: auto auto 1fr auto; }

@media (max-width: 960px) {
  .lesson__side .sticky { position: static; }
}
@media (max-width: 640px) {
  .crumbs span[aria-current], .crumbs span:has(+ span[aria-current]) { display: none; }
  .lessonlist--flat { padding: 4px 0; }
  .lessonlist--flat .lessonlist__item { padding: 16px 20px; }
  .lessonlist__body { padding-top: 6px; }
  .feed--wide li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cardhead { flex-wrap: wrap; }
  .cardhead .btn--text { margin-left: -8px; }
  .lesson__actions .inline { width: 100%; justify-content: flex-end; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tabs a { white-space: nowrap; }
  .table td { white-space: nowrap; }
  .table td.w-50 { min-width: 200px; white-space: normal; }
  .table th, .table td { padding: 12px 14px; }

  /* Tabellen in Lektionen: auf dem Handy als Karten statt abgeschnittener Spalten */
  .prose table.has-labels { display: block; overflow: visible; border: 0; }
  .prose table.has-labels thead { display: none; }
  .prose table.has-labels tbody, .prose table.has-labels tr { display: block; }
  .prose table.has-labels tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 10px; }
  .prose table.has-labels td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; border: 0; padding: 4px 0; white-space: normal; }
  .prose table.has-labels td::before { content: attr(data-label); font: 600 .78rem/1.6 var(--f-head); color: var(--muted); }
  .prose table.has-labels td:first-child { font-family: var(--f-head); font-weight: 600; color: var(--ink); }
}

/* ==========================================================================
   Kapitel, Untertitel, Arbeitsblätter (10/2026)
   ========================================================================== */
.lessonlist__num { width: auto; min-width: 36px; padding: 0 8px; border-radius: 999px; font-size: .8rem; letter-spacing: .01em; white-space: nowrap; }
.lessonlist__item { grid-template-columns: 48px minmax(0, 1fr) auto; }
.lessonlist__chapter { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px; padding: 16px 22px 12px; background: #fafbfc; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.lessonlist__chapter:first-child { border-top: 0; }
.lessonlist__chno { font: 600 .74rem/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.lessonlist__chapter strong { font: 600 1rem/1.3 var(--f-head); }
.lessonlist__chapter small { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.lessonlist--flat { padding: 0; }
.lessonlist--flat .lessonlist__chapter { padding: 16px 28px 12px; }
.lessonlist--flat .lessonlist__chapter:first-child { border-top-right-radius: var(--r); }

.sidelist__chapter { font: 600 .7rem/1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 4px; }
.sidelist__chapter:first-child { padding-top: 0; }
.sidelist__num { width: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; font-size: .66rem; }

.adminlessons li { grid-template-columns: 44px 1fr auto; }
.adminlessons__num { font-size: .8rem; }
.adminlessons__chapter { display: block !important; border: 0 !important; padding: 12px 2px 2px !important; font: 600 .74rem/1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.adminlessons__chapter:first-child { padding-top: 0 !important; }

.worksheets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.worksheets a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--blue-100); border-radius: var(--r-sm); background: var(--blue-50); color: var(--ink); text-decoration: none !important; transition: border-color var(--ease), background var(--ease), transform var(--ease); }
.worksheets a:hover { border-color: var(--blue); background: var(--white); color: var(--ink); }
.worksheets a > span:nth-child(2) { flex: 1; font: 600 1rem/1.3 var(--f-head); }
.worksheets a small { display: inline-flex; align-items: center; gap: 6px; font: 600 .85rem/1 var(--f-head); color: var(--blue); white-space: nowrap; }
.worksheets__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--blue); color: var(--white); display: grid; place-items: center; flex: none; }
.worksheets__ico .ico { width: 18px; height: 18px; }
.player video::cue { font-family: var(--f-body); font-size: .9em; background: rgba(11, 12, 15, .78); color: #fff; }

@media (max-width: 640px) {
  .lessonlist__item { grid-template-columns: 48px minmax(0, 1fr); }
  .lessonlist__chapter { grid-template-columns: 1fr; padding: 14px 16px 10px; gap: 2px; }
  .lessonlist--flat .lessonlist__chapter { padding: 14px 20px 10px; }
  .worksheets a { padding: 12px; gap: 12px; }
  .worksheets a small { font-size: 0; gap: 0; }
  .worksheets a small .ico { width: 18px; height: 18px; }
}

/* Seitenleiste der Lektion: bei vielen Lektionen innerhalb des Fensters scrollen */
@media (min-width: 961px) {
  .lesson__side .sticky { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Verkauf: Bestellseite und Danke-Seite ---------- */
.pricebox { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 20px; margin: 0 0 24px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-sm); }
.pricebox__product { font: 600 1.05rem/1.3 var(--f-head); color: var(--ink); margin: 0 0 4px; }
.pricebox .small { margin: 0; }
.pricebox__price { text-align: right; flex: none; }
.pricebox__price strong { display: block; font: 700 1.6rem/1.1 var(--f-head); color: var(--blue); }
.pricebox__price small { font-size: .75rem; color: var(--muted); }
.grid2--zip { grid-template-columns: 9rem minmax(0, 1fr); }
.hint--center { text-align: center; margin: 12px 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.orderstatus p { margin-bottom: 14px; }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kia-spin .8s linear infinite; }
@keyframes kia-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (max-width: 560px) {
  .pricebox { flex-direction: column; }
  .pricebox__price { text-align: left; }
}

/* ---------- Nur lokale Demo: Vorschau-Werkzeuge ---------- */
.vorschau { margin-top: 26px; padding: 16px 18px; border: 2px dashed var(--warn); border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: .9rem; }
.vorschau h3 { font: 600 .95rem/1.3 var(--f-head); margin: 0 0 6px; color: var(--warn); }
.vorschau .btnrow { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.fakepay { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 18px; }
.fakepay__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.fakepay__row:last-child { border-bottom: 0; font-weight: 600; }
.fakepay .stack { display: grid; gap: 10px; }
.mailpreview { white-space: pre-wrap; word-break: break-word; font: .85rem/1.55 var(--f-mono); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin: 8px 0 22px; color: var(--text); }
.mailhead { font-size: .85rem; color: var(--muted); }
.mailhead strong { color: var(--ink); }

/* Kursauswahl: freigeschaltete und kommende Kurse als Kacheln */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.ccard { display: flex; flex-direction: column; overflow: hidden; position: relative; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.ccard__visual { height: 132px; display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--line); }
.ccard__icon { width: 52px; height: 52px; stroke-width: 1.5; position: relative; z-index: 1; }
.ccard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ccard__tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.ccard__title { font-size: 1.25rem; margin: 4px 0 0; }
.ccard__text { margin: 0; color: var(--text); font-size: .93rem; line-height: 1.55; }
.ccard__body .course__meta { margin: 2px 0 0; }
.ccard__progress { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font: 600 .8rem/1 var(--f-head); color: var(--blue); }
.ccard__progress .bar { flex: 1; margin: 0; }
.ccard__cta { align-self: flex-start; margin-top: 8px; }
.ccard__note { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); font: 500 .84rem/1.3 var(--f-head); color: var(--muted); }
.ccard__note .ico { width: 15px; height: 15px; }

.ccard--open .ccard__visual { background: linear-gradient(140deg, var(--blue) 0%, #1c66b8 100%); color: #fff; border-bottom: 0; }
.ccard--open .ccard__visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 55%); }
.ccard--open:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.ccard__link { color: inherit; text-decoration: none; }
.ccard__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.ccard__link:focus-visible { outline: none; }
.ccard--open:has(.ccard__link:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 3px; }

.ccard--soon { background: #fbfcfe; }
.ccard--soon .ccard__visual { background: linear-gradient(150deg, var(--blue-50) 0%, var(--blue-100) 100%); color: var(--blue); }
.ccard--soon .ccard__visual::after { content: ''; position: absolute; inset: 14px; border: 1.5px dashed var(--blue-200); border-radius: var(--r-sm); }
.ccard--soon .ccard__title { color: #4a5262; }
.tag--soon { background: #fff4d6; color: #8a5a00; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1100px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cgrid { grid-template-columns: 1fr; } .ccard__visual { height: 104px; } }

/* Admin-Menü: mit Rechnungen sechs Punkte, auf mittelbreiten Bildschirmen ohne Symbole */
.is-admin .mainnav > a { padding: 9px 11px; }
@media (min-width: 1321px) and (max-width: 1560px) { .is-admin .mainnav > a:not(.mainnav__switch) .ico { display: none; } }
@media (min-width: 961px) and (max-width: 1320px) { .is-admin .mainnav > a span { display: none; } .is-admin .mainnav > a { padding: 10px; } }

/* Testzugang im Admin (Übersicht, Betrieb) */
.testsignup { border-top: 1px solid var(--line); padding-top: 14px; }
.testsignup__form { display: grid; gap: 4px; }
.testsignup__form .check { margin-bottom: 6px; }
.testsignup__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.testsignup__form .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 520px) { .testsignup__row { grid-template-columns: 1fr; } }

/* ---------- Lektion: Weg zur nächsten Lektion ---------- */
.btn--lg { padding: 14px 24px; font-size: 1.02rem; }

.lessonnav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.lessonnav__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-sm); font: 600 .9rem/1 var(--f-head); color: var(--blue); background: var(--blue-50); text-decoration: none; white-space: nowrap; }
.lessonnav__btn:hover { background: var(--blue-100); color: var(--blue-700); }
.lessonnav__btn--next { background: var(--blue); color: var(--white); }
.lessonnav__btn--next:hover { background: var(--blue-700); color: var(--white); }
.lessonnav__btn.is-disabled { opacity: .35; background: var(--bg); color: var(--muted); }
.lessonnav__btn .ico { width: 16px; height: 16px; }
.lessonnav__pos { display: grid; gap: 6px; justify-items: center; font-size: .85rem; color: var(--muted); }
.lessonnav__pos strong { color: var(--ink); }
.lessonnav__pos .bar { width: 100%; max-width: 260px; margin: 0; }

.nextstep { padding: 0; overflow: hidden; border-color: var(--blue-100); }
.nextstep__main { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: linear-gradient(135deg, var(--blue-50), #fff 70%); }
.nextstep__text { min-width: 0; }
.nextstep__text .eyebrow { margin-bottom: 6px; }
.nextstep__title { margin: 0 0 4px; font: 600 1.2rem/1.3 var(--f-head); color: var(--ink); }
.nextstep__text .small { margin: 0; }
.nextstep__main .btn { flex: none; }
.nextstep__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 24px 14px; border-top: 1px solid var(--line); }
.nextstep__foot .small { margin: 0; flex: 1 1 280px; }
.nextstep__foot .small .ico { width: 14px; height: 14px; color: var(--ok); vertical-align: -2px; }
.nextstep__links { display: flex; gap: 4px; flex-wrap: wrap; }
.worksheets .h4 .tag { margin-left: 6px; vertical-align: 2px; }

/* Feste Leiste am Handy */
.lessonbar { display: none; }
@media (max-width: 820px) {
  .lessonbar { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(11, 12, 15, .08); }
  .lessonbar__prev { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--blue-50); color: var(--blue); }
  .lessonbar__prev.is-disabled { opacity: .35; }
  .lessonbar__prev .ico { width: 20px; height: 20px; }
  .lessonbar__pos { display: grid; gap: 5px; font: 600 .85rem/1 var(--f-head); color: var(--ink); text-decoration: none; text-align: center; }
  .lessonbar__pos .bar { margin: 0; }
  .lessonbar__next { padding: 13px 20px; white-space: nowrap; }
  body:has(.lessonbar) .footer { padding-bottom: 96px; }
  body:has(.lessonbar) .main { padding-bottom: 80px; }
  .lessonnav__btn span { display: none; }
  .lessonnav__btn { padding: 10px; }
  .nextstep__main { flex-direction: column; align-items: stretch; padding: 18px; }
  .nextstep__main .btn { justify-content: center; }
  .nextstep__foot { padding: 12px 18px 14px; }
}

/* Admin: Lernstand je Lektion */
.lessonstate { border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 12px; overflow: hidden; }
.lessonstate > summary { cursor: pointer; padding: 12px 14px; background: var(--bg); list-style-position: inside; }
.lessonstate[open] > summary { border-bottom: 1px solid var(--line); }
.lessonstate .tablewrap { margin: 0; border: 0; box-shadow: none; border-radius: 0; }
.table--compact th, .table--compact td { padding: 8px 12px; font-size: .88rem; vertical-align: middle; }
.table tr.is-current td { background: var(--blue-50); }
.nextstep__foot .small .ico { display: inline-block; margin-right: 4px; }

/* Zahlung einrichten */
.paysetup { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.paysetup > li > .h4 { display: flex; align-items: center; gap: 12px; }
.paysetup__no { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-50); color: var(--blue); font: 600 .95rem/1 var(--f-head); }
.paysetup__no.is-ok { background: var(--ok-bg); color: var(--ok); }
.payform { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-top: 14px; }
.payform .field { flex: 1 1 320px; margin: 0; }
.payform input { font-family: var(--f-mono); }
.paysetup .alert { display: flex; gap: 10px; align-items: flex-start; }
.paysetup .alert .ico { flex: none; margin-top: 2px; }
.paysetup td { white-space: nowrap; }
.paysetup td .ico { display: inline-block; vertical-align: -3px; color: var(--ok); }
.btn[disabled], .btn[disabled]:hover { opacity: .45; cursor: not-allowed; box-shadow: none; }
.paysetup__scroll { overflow-x: auto; }

/* Passwort anzeigen */
.pwfield { position: relative; display: block; }
.pwfield input { padding-right: 118px; }
.pwfield input::-ms-reveal, .pwfield input::-ms-clear { display: none; }
.pwtoggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--blue-50); color: var(--blue); font: 500 .8rem/1 var(--f-head); cursor: pointer; }
.pwtoggle:hover { background: var(--blue-100, #dbe8f6); }
.pwtoggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 380px) { .pwtoggle span { display: none; } .pwfield input { padding-right: 52px; } }

/* ---------- Rechtstexte, Widerrufsfunktion ---------- */
.footer__legal { flex-wrap: wrap; row-gap: 6px; }
.auth__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.revokelink { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.revokelink .ico { width: 14px; height: 14px; flex: none; }
.legal__card > .alert { display: flex; align-items: center; gap: 10px; }
.legal__card > .alert .ico { flex: none; }
.footer__legal .revokelink, .auth__legal .revokelink { color: var(--blue); }
.legalhead { background: var(--white); border-bottom: 1px solid var(--line); }
.legalhead__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.legalhead__logo { height: 38px; width: auto; display: block; }
.legalhead__app { font-family: var(--f-head); font-weight: 600; color: var(--ink); }
.legal { padding-top: 32px; padding-bottom: 48px; max-width: 860px; }
.legal__card h1 { margin-bottom: 6px; }
.legal__text { line-height: 1.65; }
.legal__text h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal__text h3 { font-size: 1rem; margin: 20px 0 6px; }
.legal__text p, .legal__text ul { margin: 0 0 12px; }
.legal__text ul { padding-left: 1.3em; }
.legal__text a { word-break: break-word; }
.legal__cta { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0 16px; }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.withdrawal { margin-bottom: 16px; }
.withdrawal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
@media (max-width: 600px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}

/* ---------- Rabattcode ---------- */
.pricebox__old { display: block; color: var(--muted); font-size: .95rem; }
.promolink { word-break: break-all; }

/* ---------- Startsperre ---------- */
.sitelock { padding: 12px 14px; border-radius: 10px; background: var(--bg, #f5f7fa); margin-bottom: 14px; }
.sitelock--on { background: #fff4e5; }
.sitelock .btn { margin-top: 6px; }