/* moijn studio: eigene Teile der Oberfläche, nur aus Tokens des moijn Design Systems (moijn/tokens.css, moijn/bundle.css).
   Aufbau: App-Shell mit Sidebar links (260 px), Assistent als Spalte daneben, Inhalt max. 1200 px, Formulare max. 560 px.
   Flächen von außen dunkel nach innen hell, keine Trennlinien. Aktive Zustände grau, Gelb nur als kleiner Punkt (Knopf aus dem Logo). */

/* ---------- Grundlage ---------- */
html, body { height: 100% }
body { margin: 0; background: var(--bg-canvas); color: var(--ink); font: 400 14px/20px var(--font-sans) }
#shell, #root { height: 100% }
.mo-app { height: 100%; min-height: 0 }
.mo-sidebar { height: 100% }
.mo-content { padding-block: var(--space-300); padding-inline: var(--space-300) }
a { color: inherit }
h1, h2, h3 { text-wrap: balance }
button { font: inherit }
[hidden] { display: none !important }

/* Logo: positive Variante auf hell, negative auf dunkel (System oder Umschalter) */
.mo-logo svg { height: 20px; width: auto; display: block }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mo-logo__pos { display: none !important }
  :root:not([data-theme="light"]) .mo-logo__neg { display: block !important }
}
[data-theme="light"] .mo-logo__neg { display: none !important }
[data-theme="light"] .mo-logo__pos { display: block !important }

/* Hilfsklassen */
.muted { color: var(--ink-muted) }
.small { font: 400 12px/16px var(--font-sans) }
.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums }
.mono { font-family: var(--font-mono) }
.row { display: flex; align-items: center; gap: var(--space-100); flex-wrap: wrap }
.spacer { flex: 1 }
.stack { display: grid; gap: var(--space-300); min-width: 0 }
.stack-sm { display: grid; gap: var(--space-150); min-width: 0 }
.chk { display: inline-flex; align-items: center; gap: var(--space-100); cursor: pointer; min-height: var(--tap-min) }
.ic-warn { color: var(--border-warning) }
.ic-info { color: var(--border-info) }
.ic-ok { color: var(--border-success) }
.ic-err { color: var(--border-danger) }
.ic-muted { color: var(--ink-muted) }

/* Flächen in Stufen: Sidebar (außen), Assistent, Inhalt, Karten (innen) */
#shell { --csend-outline: var(--on-brand); --s-side: var(--bg-muted); --s-assist: var(--bg-parchment); --s-main: var(--bg-canvas); --s-card: var(--bg-sheet);
  --bg-selected: var(--bg-neutral-pressed); --text-selected: var(--ink); --border-selected: var(--ink) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #shell { --csend-outline: none; --s-side: var(--bg-canvas); --s-assist: color-mix(in srgb, var(--bg-canvas) 45%, var(--bg-sheet)); --s-main: var(--bg-sheet); --s-card: var(--bg-muted) }
}
:root[data-theme="dark"] #shell { --csend-outline: none; --s-side: var(--bg-canvas); --s-assist: color-mix(in srgb, var(--bg-canvas) 45%, var(--bg-sheet)); --s-main: var(--bg-sheet); --s-card: var(--bg-muted) }
.mo-sidebar { background: var(--s-side); --bg-sheet: var(--s-side); transition: width var(--duration-base) var(--ease-out) }
.mo-main { background: var(--s-main); --bg-sheet: var(--s-card); --bg-canvas: var(--s-main); container-type: inline-size }
.mo-topbar, .mo-sidebar__foot { border: 0 }

/* ---------- Sidebar ---------- */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-100) }
.sb-mark { display: none }
.sb-mark svg { height: 18px; width: auto; display: block }
.sb-search { width: 100%; min-width: 0 }
.sb-av { position: relative; width: 28px; height: 28px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: visible;
  font: 600 11px/12px var(--font-sans); background: var(--bg-muted); color: var(--ink-muted) }
.sb-av img, .ch-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block }
.sb-av.img, .ch-img.img { background: var(--on-brand); color: var(--brand) }
.mo-sidebar .sb-av:not(.img) { background: var(--s-card) }
.sb-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--brand);
  box-shadow: 0 0 0 2px var(--bg-sheet), 0 0 0 3px var(--on-brand); display: none }
.mo-navitem .navic { position: relative; display: inline-flex }
.mo-navitem .mo-badge { margin-left: auto }
.mo-navitem[aria-current="page"] { background: var(--bg-neutral-pressed); color: var(--ink); font-weight: 500 }
.mo-navitem:hover { box-shadow: none }
.mo-app[data-sb="mini"] .mo-sidebar { width: 68px }
.mo-app[data-sb="mini"] .mo-navitem__label, .mo-app[data-sb="mini"] .mo-sidebar__heading, .mo-app[data-sb="mini"] .mo-navitem .mo-badge,
.mo-app[data-sb="mini"] .mo-sidebar__app, .mo-app[data-sb="mini"] .sb-search span, .mo-app[data-sb="mini"] .sb-search kbd, .mo-app[data-sb="mini"] .mo-logo { display: none }
.mo-app[data-sb="mini"] .sb-mark { display: inline-flex }
.mo-app[data-sb="mini"] .sb-head { flex-direction: column; gap: var(--space-150) }
.mo-app[data-sb="mini"] .sb-dot { display: block }
.mo-app[data-sb="mini"] .mo-navitem { justify-content: center; padding: 0; min-height: 40px }
.mo-app[data-sb="mini"] .sb-search { justify-content: center; padding: 0 }
.mo-app[data-sb="mini"] .mo-sidebar__heading { display: block; height: 1px; margin: 0 var(--space-100); background: var(--line-soft); overflow: hidden; color: transparent }
.mo-app[data-sb="mini"] .mo-sidebar__head { padding: 0 }
.mo-app[data-sb="mini"] .set-nav .mo-navitem__label { display: block }
.mo-app[data-sb="mini"] .set-nav .mo-navitem { justify-content: flex-start; padding: 0 var(--space-100); min-height: var(--control-height-compact) }
.topbar-menu { display: none }
.sb-blanket { display: none }

/* Profil unten links */
.profile { display: flex; align-items: center; gap: var(--space-100); width: 100%; min-height: 44px; padding: var(--space-050) var(--space-100); border: 0; border-radius: var(--radius-input);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer }
.profile:hover, .profile[aria-expanded="true"], .profile[data-cur] { background: var(--bg-neutral-hovered) }
.pf-av { width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--on-brand); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font: 600 11px/12px var(--font-sans) }
.pf-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-075) }
.pf-name { font: 500 14px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-plan { font: 400 13px/20px var(--font-sans); color: var(--ink-muted) }
.pf-plan::before { content: "· " }
.profile > .mo-icon { width: 16px; height: 16px; color: var(--ink-muted) }
.mo-app[data-sb="mini"] .profile { justify-content: center; padding: 0 }
.mo-app[data-sb="mini"] .pf-txt, .mo-app[data-sb="mini"] .profile > .mo-icon { display: none }

/* moijn AI: das Logo als Schalter unten links. Gleiche Höhe und gleicher Maßstab wie das Logo oben. */
.mai { display: flex; align-items: center; width: 100%; padding: var(--space-150) var(--space-100); border: 0; border-radius: var(--radius-card); background: var(--s-main); cursor: pointer; color: var(--ink) }
.mai:hover { background: var(--bg-neutral-hovered) }
.mai:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.mai svg { display: block }
.mai .mai-full { height: 20px; width: auto }
.mai-top, .mai-head { width: auto; background: transparent; padding: var(--space-100) var(--space-100) }
.mai-top { display: none }
.mai-top .mai-full, .mai-head .mai-full { height: 17px }
.mai .mai-mini { display: none; width: 36px; height: auto }
.mai .word { fill: var(--ink) }
.mai .pill { stroke: var(--ink) }
.mai .kn { fill: var(--ink-muted); transform: translateX(-25.4px); transition: transform var(--duration-base) var(--ease-out), fill var(--duration-base) var(--ease-out) }
.mai .aibg { fill: none; stroke: var(--ink-muted); stroke-width: 5; transition: fill var(--duration-base) var(--ease-out), stroke var(--duration-base) var(--ease-out) }
.mai .aibt { font: 600 46px/1 var(--font-sans); fill: var(--ink-muted); transition: fill var(--duration-base) var(--ease-out) }
.mai[aria-checked="true"] .kn { transform: none; fill: var(--brand) }
.mai[aria-checked="true"] .aibg { fill: var(--brand); stroke: var(--brand) }
.mai[aria-checked="true"] .aibt { fill: var(--on-brand) }
.mo-app[data-sb="mini"] .mo-sidebar .mai { justify-content: center; padding: var(--space-150) 0 }
.mo-app[data-sb="mini"] .mo-sidebar .mai .mai-full { display: none }
.mo-app[data-sb="mini"] .mo-sidebar .mai .mai-mini { display: block }
@media (prefers-reduced-motion: reduce) { .mai * { transition: none !important } }

/* ---------- Kopfzeile und Seitenkopf ---------- */
.mo-breadcrumb { flex-wrap: nowrap; overflow: hidden }
.mo-breadcrumb a { text-decoration: none }
.mo-breadcrumb a:hover { color: var(--ink); text-decoration: underline }
.mo-topbar__left { flex: 1; min-width: 0 }
.mo-page { gap: var(--space-300) }
.mo-page > * { min-width: 0 }
.ph-title { display: flex; align-items: center; gap: var(--space-150); min-width: 0; flex: 1 1 320px }
.ph-title .mo-page__title { min-width: 0; overflow-wrap: anywhere }
.ph-actions { display: flex; flex-wrap: wrap; gap: var(--space-100); align-items: center }
.ph-meta { display: flex; flex-wrap: wrap; gap: var(--space-050) var(--space-150); align-items: center; margin-top: var(--space-050); color: var(--ink-muted) }
.ph-meta > span + span::before { content: "·"; margin-right: var(--space-150); color: var(--stone) }
.extlink { display: inline-flex; align-items: center; gap: var(--space-050); text-decoration: none; color: var(--ink-muted) }
.extlink:hover { color: var(--ink); text-decoration: underline }
.textlink { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
.textlink:hover { color: var(--ink) }
.quiet { display: inline-flex; align-items: center; gap: var(--space-050); color: var(--ink-muted); font: 400 13px/18px var(--font-sans) }
.knob { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--brand); box-shadow: 0 0 0 1.5px var(--on-brand) }

/* Reiter (das Kit hat keine Reiter-Klasse: aus Tokens gebaut), aktiv = grau */
.tabs { display: flex; gap: var(--space-300); border-bottom: var(--border-width) solid var(--line-soft); overflow-x: auto; scrollbar-width: none; max-width: 100% }
.tab { text-decoration: none; appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-100) 0 var(--space-150);
  font: 500 14px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; white-space: nowrap; display: inline-flex; gap: var(--space-075); align-items: center }
.tab:hover { color: var(--ink) }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink) }
.tab .mo-badge { height: 18px; min-width: 18px }
.tab .knob { margin-right: 2px }

/* Playlist-Ansicht über den Reitern */
.scope { display: flex; flex-wrap: wrap; gap: var(--space-075); align-items: center }
.scope .lbl { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; margin-right: var(--space-050) }
.pill { display: inline-flex; align-items: center; gap: var(--space-075); height: 32px; padding: 0 var(--space-150); border-radius: var(--radius-pill); border: var(--border-width) solid var(--line-soft);
  background: var(--bg-sheet); color: var(--ink); font: 500 14px/20px var(--font-sans); cursor: pointer }
.pill:hover { border-color: var(--ink-muted) }
.pill[aria-pressed="true"] { background: var(--bg-neutral-pressed); border-color: transparent; color: var(--ink) }
.pill .n { color: inherit; opacity: .7; font-feature-settings: "tnum" }

/* ---------- Panels, Raster ---------- */
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-150); margin: 0 0 var(--space-200); flex-wrap: wrap }
.panel-h h2 { margin: 0; font: 600 16px/20px var(--font-sans); display: flex; align-items: center; gap: var(--space-100) }
.panel-h .tools { display: flex; align-items: center; gap: var(--space-100); flex-wrap: wrap }
.mo-panel { min-width: 0 }
.mo-panel.flush { padding: 0; overflow: hidden }
.mo-panel.flush > .panel-h { padding: var(--space-300) var(--space-300) 0 }
.sec-h { display: flex; align-items: center; gap: var(--space-100); margin: 0 }
.sec-h h2 { margin: 0; font: 600 16px/20px var(--font-sans) }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--space-300); align-items: start }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-200) }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-100); align-items: center }
.toolbar .mo-select, .toolbar .mo-select select { width: auto }
.cta-row { display: flex; justify-content: flex-start; padding: var(--space-150) var(--space-300) var(--space-200); border-top: var(--border-width) solid var(--line-soft) }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-050) }
.money { background: var(--on-brand); color: var(--brand) }
.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: var(--space-100) var(--space-200); margin: 0 }
.kv dt { color: var(--ink-muted) }
.kv dd { margin: 0; overflow-wrap: anywhere }
details > summary { cursor: pointer; color: var(--ink-muted); list-style: none; display: inline-flex; align-items: center; gap: var(--space-050) }
details > summary::-webkit-details-marker { display: none }
details > summary:hover { color: var(--ink) }
details[open] > summary .mo-icon { transform: rotate(90deg) }
.hoverable { transition: box-shadow var(--duration-fast) var(--ease-out) }

/* ---------- Dashboard ---------- */
.todo { display: flex; flex-direction: column }
.todo a { display: flex; align-items: center; gap: var(--space-150); min-height: 56px; padding: var(--space-100) var(--space-300); text-decoration: none; border-top: var(--border-width) solid var(--line-soft) }
.todo a:first-child { border-top: 0 }
.todo a:hover { background: var(--bg-neutral-hovered) }
.todo .t-text { flex: 1; min-width: 0 }
.todo .t-sub { display: block; color: var(--ink-muted); font: 400 12px/16px var(--font-sans) }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-200) }
.chcard { display: flex; flex-direction: column; gap: var(--space-250); text-decoration: none; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out) }
.chcard:hover { box-shadow: 0 0 0 1.5px var(--ink-muted) }
.chcard .head { display: flex; align-items: center; gap: var(--space-150) }
.chcard h3 { margin: 0; font: 600 16px/20px var(--font-sans) }
.ch-img { position: relative; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--s-main); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center;
  font: 600 16px/20px var(--font-sans); flex: none }
.ph-title .ch-img { background: var(--bg-muted) }
.ph-title .ch-img.img { background: var(--on-brand) }
.ch-img .imgbtn { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-overlay); box-shadow: var(--shadow-overlay); color: var(--ink);
  border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out) }
.chcard:hover .imgbtn, .ch-img .imgbtn:focus-visible, .ch-img .imgbtn[aria-expanded="true"] { opacity: 1 }
.ch-img .imgbtn .mo-icon { width: 14px; height: 14px }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-150) }
.stat3 b { display: block; font: 500 20px/24px var(--font-sans); font-feature-settings: "tnum" }
.stat3 span { display: flex; align-items: center; gap: var(--space-050); color: var(--ink-muted); font: 400 12px/16px var(--font-sans) }
.live { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--bg-success-bold); display: inline-block }
.lastvid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-150); padding-top: var(--space-200); border-top: var(--border-width) solid var(--line-soft); text-decoration: none }
.lastvid .thumb { width: 120px; height: 68px }
.lastvid .lv-t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mini-stats { display: flex; flex-wrap: wrap; gap: var(--space-025) var(--space-150); color: var(--ink-muted); font: 400 12px/16px var(--font-sans) }
.mini-stats b { color: var(--ink); font-weight: 500 }

/* ---------- Tabellen und Listen ---------- */
.mo-table td.title-cell { min-width: 200px }
.mo-table .mo-num { white-space: nowrap }
.mo-table tbody tr { cursor: pointer }
.mo-table tbody tr.nolink { cursor: default }
.mo-table tbody tr[data-href]:hover td { background: var(--bg-neutral-hovered) }
.mo-table .t-main { display: flex; align-items: center; gap: var(--space-075); font-weight: 500 }
.mo-table .t-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-muted); font: 400 12px/16px var(--font-sans); margin-top: 2px }
.mo-table-wrap { position: relative }
.mo-table td.rowmenu, .mo-table th.rowmenu { width: 48px; padding-left: 0; padding-right: var(--space-100); text-align: right }
.mo-table td.rowmenu .mo-dropdown { position: relative }
.rowlink { color: inherit; text-decoration: none }
.rowlink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-small) }
.thumb { width: 64px; height: 36px; border-radius: var(--radius-input); background: var(--bg-muted); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.thumb.has { background: var(--clay); color: var(--ink) }
.thumb .mo-icon { width: 16px; height: 16px }
.col-num { width: 56px }
.pin-h { display: flex; align-items: center; gap: var(--space-075); margin: 0 0 var(--space-100); font: 500 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted) }
.selbar { position: fixed; left: 50%; bottom: var(--space-300); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: var(--space-100);
  padding: var(--space-100) var(--space-100) var(--space-100) var(--space-200); background: var(--surface-overlay); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); max-width: calc(100% - var(--space-400)) }
.selbar b { font-weight: 500; white-space: nowrap }

/* Backlog */
.bl-row { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto auto 40px; align-items: center; gap: var(--space-150); min-height: 64px; padding: var(--space-100) var(--space-200);
  border-top: var(--border-width) solid var(--line-soft); cursor: pointer }
.bl-row:first-child { border-top: 0 }
.bl-row:hover { background: var(--bg-neutral-hovered) }
.bl-pos { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-align: right; font-feature-settings: "tnum" }
.bl-move { display: flex; flex-direction: column }
.bl-move .mo-iconbtn { width: 24px; height: 20px }
.bl-move .mo-icon { width: 14px; height: 14px }
.meter-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; width: 160px; max-width: 100% }
.meter-bar i { display: block; height: 100%; background: var(--brand) }

/* ---------- Album, Track ---------- */
.ytline { display: flex; align-items: center; gap: var(--space-100); flex-wrap: wrap }
.ytline a { color: var(--ink); text-underline-offset: 2px }
.copytext { white-space: pre-wrap; font: 400 13px/20px var(--font-mono); margin: 0; overflow-wrap: anywhere }
.copytext.lyr { max-height: 520px; overflow: auto }
.counter { font: 400 12px/16px var(--font-sans); color: var(--ink-muted) }
.counter.over { color: var(--text-danger) }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-100); aspect-ratio: 16/9; max-width: 100%; border: var(--border-width) dashed var(--border-input);
  border-radius: var(--radius-card); color: var(--ink-muted); text-align: center; padding: var(--space-200); cursor: pointer; background: transparent; width: 100% }
.dropzone:hover, .dropzone.is-over { border-color: var(--ink); color: var(--ink) }
.dropzone.wide { aspect-ratio: auto; min-height: 140px }
.thumbimg { aspect-ratio: 16/9; max-width: 100%; width: 100%; border-radius: var(--radius-card); background: var(--clay); color: var(--ink); overflow: hidden; display: block }
.thumbimg img { width: 100%; height: 100%; object-fit: cover; display: block }
.plan h1, .plan h2, .plan h3 { font: 600 16px/20px var(--font-sans); margin: var(--space-300) 0 var(--space-100) }
.plan h1 { font-size: 20px; line-height: 24px; margin-top: 0 }
.plan p, .plan li { max-width: var(--measure) }
.plan .mo-table-wrap { margin: var(--space-100) 0 }
.finding { display: grid; gap: var(--space-050); padding: var(--space-150) 0; border-top: var(--border-width) solid var(--line-soft) }
.finding:first-of-type { border-top: 0 }
.finding > .mo-lozenge { justify-self: start }
/* Bewertung auf der Track-Seite: Hörnote und Metriken */
.rate { display: flex; align-items: center; gap: var(--space-150); flex-wrap: wrap }
.metrics { list-style: none; margin: 0; padding: 0 }
.metric { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-100); padding: var(--space-100) 0; border-top: var(--border-width) solid var(--line-soft) }
.metric:first-child { border-top: 0 }
.metric > .mo-icon { margin-top: 3px }
.metric > .mo-icon:not(.ic-ok):not(.ic-err) { color: var(--ink-muted) }
.metric p { margin: var(--space-050) 0 0 }
.metric.open > div > span:first-child { color: var(--ink-muted) }
.statusbtn .mo-icon { width: 16px; height: 16px }
.chipsedit { display: flex; flex-wrap: wrap; gap: var(--space-075); align-items: center; width: 100%; min-height: 40px; padding: var(--space-050) var(--space-100); border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-input); background: var(--bg-input) }
.chipsedit input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; height: 28px }
.chipsedit .mo-lozenge button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex }
.linkbox { display: flex; gap: var(--space-100); flex-wrap: wrap; width: 100% }
.editor { width: 100%; min-height: 520px; font: 400 13px/20px var(--font-mono) !important }

/* Video-Karte oben */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-400); align-items: start }
.hero-media { display: grid; gap: var(--space-150); min-width: 0; max-width: 640px }
.hero-info { display: grid; gap: var(--space-300); min-width: 0 }
.hero-head { display: grid; gap: var(--space-050) }
.hero-head h2 { margin: 0; font: 600 16px/22px var(--font-sans); text-wrap: balance }
.hero-head .sub { display: flex; flex-wrap: wrap; gap: var(--space-025) var(--space-150); color: var(--ink-muted); font: 400 13px/18px var(--font-sans) }
.hero-head .sub span + span::before { content: "·"; margin-right: var(--space-150); color: var(--stone) }
.kgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-width) solid var(--line-soft) }
.kgrid div { padding: var(--space-150) var(--space-150) var(--space-150) 0; border-bottom: var(--border-width) solid var(--line-soft); display: grid; gap: var(--space-050); min-width: 0 }
.kgrid span { font: 500 11px/14px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kgrid b { font: 500 22px/26px var(--font-sans); letter-spacing: -.01em; font-feature-settings: "tnum" }
.facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-100) var(--space-200); margin: 0; font: 400 14px/20px var(--font-sans) }
.facts dt { color: var(--ink-muted) }
.facts dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-075); align-items: center }
.caption { display: grid; gap: var(--space-075); padding: var(--space-150) var(--space-200); background: var(--bg-canvas); border-radius: var(--radius-input) }
.caption .lbl { display: flex; align-items: center; gap: var(--space-075); font: 500 11px/14px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted) }
.caption p { margin: 0; font: 400 13px/19px var(--font-sans) }
.caption .by { font: 400 12px/16px var(--font-sans); color: var(--ink-muted) }
.alt-d > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-100); list-style: none; cursor: pointer; color: inherit }
.alt-d > summary .lbl .mo-icon { transition: transform var(--duration-fast) var(--ease-out) }
.alt-d[open] > summary .lbl .mo-icon { transform: rotate(90deg) }
.alt-d[open] { gap: var(--space-150) }
.alt-d:not([open]) { gap: 0 }
.alt-d .mo-btn { margin-left: calc(-1 * var(--space-150)) }

/* Verlauf */
.vers { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-300); align-items: start }
.verlist { display: flex; flex-direction: column }
.verlist button { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-150); text-align: left; padding: var(--space-150) var(--space-200); border: 0; border-top: var(--border-width) solid var(--line-soft);
  background: transparent; color: var(--ink); cursor: pointer }
.verlist button:first-child { border-top: 0 }
.verlist button:hover { background: var(--bg-neutral-hovered) }
.verlist button[aria-current="true"] { background: var(--bg-selected) }
.verlist .v { font: 500 14px/20px var(--font-mono) }
.verlist .d { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); grid-column: 2 }
.diff { font: 400 13px/20px var(--font-mono); overflow: auto; max-height: 560px }
.diff div { display: grid; grid-template-columns: 20px minmax(0, 1fr); white-space: pre-wrap; padding: 0 var(--space-100) }
.diff .add { background: var(--bg-success) }
.diff .del { background: var(--bg-danger) }
.diff i { font-style: normal; color: var(--ink-muted) }

/* Kommentare */
.cmt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-150); padding: var(--space-200) var(--space-300); border-top: var(--border-width) solid var(--line-soft) }
.cmt:first-child { border-top: 0 }
.cmt .who { display: flex; gap: var(--space-100); align-items: center; flex-wrap: wrap }
.cmt p { margin: var(--space-050) 0 0; max-width: var(--measure) }
.opts { display: grid; gap: var(--space-075) }
.opt { display: flex; gap: var(--space-100); align-items: flex-start; padding: var(--space-100) var(--space-150); border: var(--border-width) solid var(--line-soft); border-radius: var(--radius-input); background: transparent;
  color: var(--ink); text-align: left; font: 400 14px/20px var(--font-sans); cursor: pointer }
.opt:hover { border-color: var(--ink-muted) }
.opt[aria-checked="true"] { border-color: var(--ink) }
.opt .dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-input) }
.opt[aria-checked="true"] .dot { border: 4px solid var(--ink) }
.sent { display: grid; gap: var(--space-050); padding: var(--space-100) var(--space-150); border-radius: var(--radius-input); background: var(--bg-canvas) }

/* Prüfen */
.grp-h { margin: 0 0 var(--space-100); font: 500 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted) }
.prow { display: flex; align-items: center; gap: var(--space-150); min-height: 56px; padding: var(--space-100) var(--space-200); border-top: var(--border-width) solid var(--line-soft) }
.prow:first-child { border-top: 0 }
.prow .p-main { flex: 1; min-width: 0 }
.prow a { text-decoration: none; font-weight: 500 }
.prow a:hover { text-decoration: underline }

/* Einstellungen: links Bereiche, rechts genau einer */
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-400); align-items: start }
.set-nav { position: static; display: flex; flex-direction: column; gap: var(--space-025) }
.prov { display: grid; gap: var(--space-150); padding: var(--space-200) 0; border-top: var(--border-width) solid var(--line-soft) }
.prov:first-of-type { border-top: 0; padding-top: 0 }
.app-ol { margin: 0; padding-left: var(--space-250); display: grid; gap: var(--space-075); max-width: var(--measure) }
.codebox { display: flex; gap: var(--space-100); align-items: flex-start; padding: var(--space-150); background: var(--bg-canvas); border-radius: var(--radius-input) }
.codebox span { flex: 1; min-width: 0 }
.matrix td, .matrix th { text-align: center }
.matrix td:first-child, .matrix th:first-child { text-align: left }
.matrix .mo-select { min-width: 128px }
.kb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-150); align-items: center; padding: var(--space-150) 0; border-top: var(--border-width) solid var(--line-soft) }
.kb-row:first-of-type { border-top: 0 }
.kb-row .t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-075); font-weight: 500 }
.kb-row p { margin: 2px 0 0; color: var(--ink-muted); font: 400 12px/16px var(--font-sans) }

/* Album hinzufügen */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-150) }
.way { display: flex; flex-direction: column; gap: var(--space-075); padding: var(--space-250); border: var(--border-width) solid transparent; border-radius: var(--radius-card); background: var(--bg-sheet);
  text-align: left; color: var(--ink); cursor: pointer }
.way:hover { box-shadow: 0 0 0 1.5px var(--ink-muted) }
.way[aria-checked="true"] { border-color: var(--ink) }
.way b { font: 600 16px/20px var(--font-sans) }
.way span { color: var(--ink-muted) }
.way .mo-icon { color: var(--ink-muted); margin-bottom: var(--space-050) }
.vid-top { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-300); align-items: start }

/* Diagramme */
.chart svg { display: block; width: 100%; height: auto }
.chart text { font: 400 11px/1 var(--font-sans); fill: var(--chart-axis) }
.legend { display: flex; gap: var(--space-200); flex-wrap: wrap; color: var(--ink-muted); font: 400 12px/16px var(--font-sans) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-050); vertical-align: -1px }
.bars { display: grid; gap: var(--space-100) }
.bar-row { display: grid; grid-template-columns: minmax(80px, 200px) minmax(0, 1fr) auto; gap: var(--space-150); align-items: center }
.bar-row .bar { height: 14px; border-radius: var(--radius-small); background: var(--bg-muted); overflow: hidden }
.bar-row .bar i { display: block; height: 100%; background: var(--chart-1) }
.bar-row .bar i.c2 { background: var(--chart-2) }
.bar-row .bar i.c3 { background: var(--chart-3) }
.bar-row .bar i.quota { background: var(--brand) }
.bar-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* Info-Symbole (nur an größeren Funktionen mit Erklärungsbedarf) */
.info { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; margin-left: var(--space-075); padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; box-shadow: inset 0 0 0 1px var(--stone); color: var(--ink-muted); font: 500 10px/1 var(--font-sans); font-style: normal; letter-spacing: 0; text-transform: none; vertical-align: middle; cursor: help;
  transition: color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out) }
.info::before { content: "i" }
.info:hover, .info.is-open { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.tip { position: fixed; z-index: 200; max-width: 300px; padding: var(--space-100) var(--space-150); background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-input); font: 400 13px/18px var(--font-sans);
  letter-spacing: 0; text-transform: none; pointer-events: none; box-shadow: var(--shadow-overlay) }
.tip.is-pinned { pointer-events: auto }
.tip b { font-weight: 600 }

/* ---------- Assistent (moijn AI): eigene Spalte links neben der Navigation ---------- */
.assist { flex: none; width: 400px; display: flex; flex-direction: column; background: var(--s-assist); border: 0; --bg-sheet: var(--s-assist); min-height: 0 }
.assist-h { display: flex; align-items: center; gap: var(--space-100); padding: 0 var(--space-200); height: var(--topbar-height) }
.assist-h b { flex: 1 }
.assist-msgs { flex: 1; min-height: 0; overflow: auto; padding: var(--space-200); display: flex; flex-direction: column; gap: var(--space-150) }
.msg { max-width: 92%; padding: var(--space-100) var(--space-150); border-radius: var(--radius-card); white-space: pre-wrap; overflow-wrap: anywhere }
.msg.me { align-self: flex-end; background: var(--bg-inverse); color: var(--text-inverse) }
.msg.ai { align-self: flex-start; background: var(--s-card) }
.ctxbar { display: flex; flex-wrap: wrap; gap: var(--space-075); align-items: center; padding: var(--space-100) var(--space-200); position: relative }
.chip { display: inline-flex; align-items: center; gap: var(--space-050); height: 26px; max-width: 100%; padding: 0 var(--space-100); border-radius: var(--radius-pill); background: var(--bg-canvas);
  font: 500 12px/16px var(--font-sans); color: var(--ink); border: 0 }
.chip .mo-icon { width: 14px; height: 14px }
.chip button { display: inline-flex; border: 0; background: none; padding: 0; color: var(--ink-muted); cursor: pointer }
.chip.add { background: transparent; border: var(--border-width) dashed var(--line-soft); cursor: pointer; color: var(--ink-muted) }
.chip.add:hover { border-color: var(--ink-muted); color: var(--ink) }
.ctxpop { position: absolute; left: var(--space-200); right: var(--space-200); top: calc(100% + 4px); z-index: 30; max-height: 60vh; overflow: auto; padding: var(--space-150); background: var(--surface-overlay);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); display: grid; gap: var(--space-150) }
.ctxpop h4 { margin: 0 0 var(--space-050); font: 500 11px/14px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted) }
.ctxpop label { display: flex; gap: var(--space-100); align-items: center; padding: var(--space-050) 0; cursor: pointer }
.assist-foot { padding: var(--space-100) var(--space-200) var(--space-200); display: grid; gap: var(--space-100) }
.assist-tools { display: flex; align-items: center; gap: var(--space-100) }
.attach { display: flex; flex-wrap: wrap; gap: var(--space-075) }
/* Eingabe wie in einem Chat: großes Feld (dreimal so hoch wie zuvor), Senden als gelbes Enter-Symbol im Feld */
.composer { display: grid; gap: var(--space-100); padding: var(--space-150); border-radius: 16px; background: var(--s-card); box-shadow: 0 0 0 1px var(--line-soft) }
.composer:focus-within { box-shadow: 0 0 0 1.5px var(--ink-muted) }
.cbox { display: flex; align-items: flex-end; gap: var(--space-100) }
.cbox textarea { flex: 1; min-width: 0; min-height: 288px; max-height: max(288px, 50vh); resize: none; border: 0; background: transparent; color: var(--ink); font: 400 15px/22px var(--font-sans); padding: var(--space-050); outline: none }
.cbox textarea::placeholder { color: var(--ink-muted) }
.cbox textarea:focus-visible { outline: none }
.csend { flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out) }
.csend:hover, .csend:focus-visible { background: var(--on-brand) }
.csend .mo-icon { width: 22px; height: 22px }
.csend .mo-icon path { stroke: var(--csend-outline, none); stroke-width: 10px; paint-order: stroke; stroke-linejoin: round }
.csend:hover .mo-icon path, .csend:focus-visible .mo-icon path { stroke: none }
.modelbtn { display: inline-flex; align-items: center; gap: var(--space-050); height: 28px; padding: 0 var(--space-100); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--ink);
  font: 500 13px/16px var(--font-sans); cursor: pointer }
.modelbtn:hover { background: var(--bg-neutral-hovered) }
.balwrap { position: relative; display: inline-flex }
.balbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer }
.balbtn:hover { background: var(--bg-neutral-hovered) }
.balpop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; width: 260px; display: grid; gap: var(--space-150); padding: var(--space-200); background: var(--surface-overlay); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay) }

/* ---------- Felder, Schalter ---------- */
.mo-toggle[aria-checked="true"] .mo-toggle__track { background: var(--ink) }
.mo-toggle[aria-checked="true"] .mo-toggle__track::after { background: var(--brand) }
.mo-toggle[aria-checked="true"]:hover .mo-toggle__track { background: var(--ink-strong) }
.mo-btn--default:hover { border-color: var(--ink); box-shadow: none }
/* Felder im Inhalt mit Füllfarbe, damit man sieht, wo Text steht */
.mo-main { --bg-input: var(--s-main) }
.mo-main .mo-input, .mo-main .chipsedit { border-color: transparent; background: var(--s-main) }
.mo-main .mo-input:hover { border-color: var(--ink-muted) }
.mo-main .mo-input:focus { border-color: var(--ink) }
.mo-main .mo-input[readonly] { background: var(--s-main); border-color: transparent; color: var(--ink) }
.mo-main .mo-input[aria-invalid="true"] { border-color: var(--border-danger) }
.mo-modal .mo-input { background: var(--bg-canvas) }

/* ---------- Anmeldeseite ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding-block: var(--space-400); padding-inline: var(--space-200); background: var(--bg-canvas) }
.login .mo-panel { width: 100%; max-width: 400px; display: grid; gap: var(--space-300) }
.login .mo-logo svg { height: 28px }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1100px) {
  .assist { position: fixed; left: 0; top: 0; bottom: 0; z-index: 46; box-shadow: var(--shadow-overlay); width: min(400px, 100%) }
}
@media (max-width: 960px) {
  .two-col, .hero { grid-template-columns: minmax(0, 1fr) }
  .set-layout { grid-template-columns: minmax(0, 1fr) }
  .set-nav { flex-direction: row; overflow-x: auto; gap: var(--space-050) }
  .set-nav .mo-navitem { width: auto; white-space: nowrap }
}
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .vers, .vid-top, .ways { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 720px) {
  .mai-top { display: flex }
  .mo-topbar__right { display: flex; align-items: center; gap: var(--space-050) }
  .sb-search span { display: block }                                  /* Das Kit blendet den Suchtext schmal aus, in der Navigation soll er stehen */
  .sb-search kbd { display: none }
  .mo-sidebar { transform: translateX(-105%); transition: transform var(--duration-base) var(--ease-out) }
  .mo-app[data-nav="open"] .mo-sidebar { transform: none }
  .mo-app[data-nav="open"] .sb-blanket { display: block; position: fixed; inset: 0; z-index: 44; background: var(--blanket) }
  .topbar-menu { display: inline-flex }
  .sb-collapse { display: none }
  .mo-app[data-sb="mini"] .mo-sidebar { width: var(--sidebar-width) }
  .mo-content { padding-inline: var(--space-200) }
  .mo-topbar { padding: 0 var(--space-200) }
  .hide-sm { display: none }
  .mo-table td.title-cell { min-width: 0 }
  .mo-breadcrumb li:not(:last-child) { display: none }
  .mo-breadcrumb li:last-child::before { display: none }
  .bl-row { grid-template-columns: auto 28px minmax(0, 1fr) auto 40px }
  .bl-row .hide-sm { display: none }
  .bar-row { grid-template-columns: minmax(60px, 120px) minmax(0, 1fr) auto }
}
/* moijn AI als Bottom Sheet (Handy): Kopf mit Schalter und X, Verlauf scrollt, Eingabe bleibt unten */
.ai-sheet bottom-sheet { --sheet-background: var(--s-assist); --sheet-border-radius: 20px; --sheet-max-height: calc(100dvh - 8px) }
.ai-sheet { --bg-sheet: var(--s-assist) }
.ai-sheet .assist-h { height: 52px; padding-inline: var(--space-150) var(--space-100) }
.ai-sheet .spacer { flex: 1 }
.ai-sheet .assist-msgs { overflow: visible; flex: none; padding-bottom: var(--space-100) }
.ai-sheet .ctxbar { padding-inline: var(--space-200) }
.ai-sheet .assist-foot { padding: var(--space-100) var(--space-150) calc(var(--space-150) + env(safe-area-inset-bottom)) }
.ai-sheet .cbox textarea { min-height: 44px; max-height: 140px; overflow-y: auto }
.ai-sheet .mo-iconbtn { width: 44px; height: 44px }
@container (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 560px) { .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .facts { grid-template-columns: 88px minmax(0, 1fr) } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important } }

/* Konto (Etappe 3 B): Passwortregeln direkt unter dem Feld, QR-Code für den zweiten Faktor */
.pw-rules { list-style: none; margin: var(--space-050) 0 0; padding: 0; display: grid; gap: var(--space-050); color: var(--text-danger) }
.pw-rules:empty { display: none }
.pw-rules li { display: flex; gap: var(--space-075); align-items: center }
.pw-rules li.ok { color: var(--text-success) }
.qr { flex: none; border-radius: var(--radius-input); overflow: hidden; line-height: 0 }
.qr svg { width: 180px; height: 180px }

/* Freigabe für eine Chat-App (OAuth) */
.consent { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-075) var(--space-200); margin: 0; width: 100% }
.consent dt { color: var(--ink-muted) }
.consent dd { margin: 0; min-width: 0; overflow-wrap: anywhere }