/* Neue Oberfläche (Spec Teil II, Phase 9). Wird nach app.css geladen und gilt nur mit body.ui2. Werte aus tokens.css. */
body.ui2 { background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-base); line-height: var(--lh-text); }
body.ui2 :focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 4px; }
body.ui2 .skip { position: absolute; left: var(--s4); top: -4rem; z-index: 50; background: var(--primary); color: var(--on-primary); padding: 0 var(--s4); min-height: var(--tap); display: inline-flex; align-items: center; border-radius: var(--r-control); font-family: var(--font-ui); }
body.ui2 .skip:focus { top: var(--s2); }

/* Kopfzeile, Navigation, Fußzeile */
.ui-top { display: flex; align-items: center; justify-content: space-between; max-width: 60rem; margin: 0 auto; padding: var(--s2) var(--s4); min-height: 3rem; }
.ui-brand { font-family: var(--font-ui); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.ui-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.ui-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ui-nav li { flex: 1 1 0; }
.ui-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.5rem; padding: var(--s1) var(--s1); color: var(--ink-soft); text-decoration: none; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.2; }
.ui-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.ui-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: var(--primary); border-radius: 0 0 3px 3px; }
.ui-foot { max-width: 60rem; margin: 0 auto; padding: var(--s3) var(--s4) calc(4.5rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 0 var(--s5); font-family: var(--font-ui); font-size: var(--fs-small); }
.ui-foot a { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--ink-soft); }
body.ui2 main { padding-bottom: var(--s5); }
body.ui2.ui-wide main { max-width: 60rem; }

@media (min-width: 840px) {
  .ui-nav { top: 0; bottom: 0; right: auto; width: 6rem; border-top: 0; border-right: 1px solid var(--line); padding: var(--s4) 0; }
  .ui-nav ul { flex-direction: column; gap: var(--s2); }
  .ui-nav a { min-height: 4.5rem; }
  .ui-nav a[aria-current="page"]::before { top: 18%; bottom: 18%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .ui-top, .ui-foot { margin-left: 6rem; max-width: none; padding-left: var(--s6); }
  body.ui2.ui-wide main { max-width: 60rem; margin-left: 6rem; margin-right: 0; padding-left: var(--s6); padding-right: var(--s6); }
  body.ui2.ui-wide main > * { max-width: 56rem; }
  body.ui2:not(.ui-wide) main { margin-left: max(6rem, calc((100vw - 26rem) / 2 + 3rem)); margin-right: auto; }
  .ui-foot { padding-bottom: var(--s5); }
}

/* Seiten mit eigener Anordnung */
.ui-page h1 { font-size: var(--fs-h1); text-align: left; margin: var(--s2) 0 var(--s3); font-weight: 500; letter-spacing: -.02em; }
.ui-page h2 { font-size: var(--fs-h2); text-align: left; margin: var(--s5) 0 var(--s2); }
.ui-page p { max-width: 42rem; }
.ui-soft { color: var(--ink-soft); }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--s5); background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 1.0625rem; text-decoration: none; }
.ui-btn:hover { background: #17392b; }
.ui-next { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
.ui-next .ui-kicker { margin: 0; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-soft); }
.ui-next h2 { margin: 0; font-size: 1.25rem; text-align: left; }
.ui-next p { margin: 0; }
.ui-next .why-next { color: var(--ink-soft); font-size: 1rem; text-align: left; }
.ui-next .ui-btn { justify-self: start; margin-top: var(--s2); }
.ui-tabs { display: flex; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.ui-tabs li { flex: 1 1 0; min-width: 0; }
.ui-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.25rem; padding: var(--s1); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: .9375rem; line-height: 1.25; text-align: center; }
.ui-tabs small { font-size: .8125rem; color: var(--ink-soft); }
.ui-tabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ui-tabs a[aria-current="page"] small { color: var(--on-primary); }
.ui-learn { display: block; }
.ui-stepper { display: flex; align-items: stretch; gap: var(--s2); margin: 0 0 var(--s3); font-family: var(--font-ui); }
.ui-stepper a, .ui-stepper span.is-off { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); color: var(--ink); text-decoration: none; font-size: 1.25rem; }
.ui-stepper span.is-off { color: var(--ink-soft); background: transparent; }
.ui-stepper button { flex: 1 1 auto; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; padding: var(--s1) var(--s3); text-align: center; cursor: pointer; }
.ui-sections { list-style: none; margin: 0 0 var(--s4); padding: 0; display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.ui-sections.is-open { display: block; }
.ui-sections li { border-bottom: 1px solid var(--line); }
.ui-sections li:last-child { border-bottom: 0; }
.ui-sections a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); min-height: var(--tap); padding: var(--s2) var(--s3); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: 1rem; }
.ui-sections a[aria-current="page"] { background: #e7f0ea; font-weight: 600; }
.ui-sections .ui-count { color: var(--ink-soft); font-size: var(--fs-small); white-space: nowrap; }
.ui-continue { margin: var(--s5) 0 0; display: grid; gap: var(--s2); justify-items: start; }
.ui-continue p { margin: 0; color: var(--ink-soft); }
.ui-groups h2 { margin-top: var(--s5); }
.ui-cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.ui-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); display: grid; gap: var(--s1); align-content: start; }
.ui-card h3 { margin: 0; font-size: 1.125rem; text-align: left; font-weight: 600; }
.ui-card h3 a { color: var(--ink); text-decoration: none; }
.ui-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.ui-card h3 a:focus-visible { outline: none; }
.ui-card:focus-within { outline: var(--focus); outline-offset: 2px; }
.ui-card p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.ui-card.is-locked { background: var(--line); }
.ui-card.is-locked h3, .ui-card.is-locked p { color: var(--ink-locked); }
.ui-rows { list-style: none; margin: var(--s3) 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.ui-rows li { border-bottom: 1px solid var(--line); }
.ui-rows li:last-child { border-bottom: 0; }
.ui-rows a { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 3.25rem; padding: var(--s2) var(--s4); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: 1.0625rem; }
.ui-rows a::after { content: "›"; color: var(--ink-soft); font-size: 1.5rem; }
.ui-progress { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.ui-progress li { display: grid; gap: var(--s1); font-family: var(--font-ui); }
.ui-progress .ui-row { display: flex; justify-content: space-between; font-size: 1rem; }
.ui-bar { height: .625rem; background: var(--st-offen-fill); border: 1px solid var(--edge); border-radius: var(--r-pill); overflow: hidden; }
.ui-bar span { display: block; height: 100%; background: var(--primary); }
@media (min-width: 840px) {
  .ui-learn { display: grid; grid-template-columns: 15rem 26rem; gap: var(--s6); align-items: start; }
  .ui-learn > :not(.ui-sections) { grid-column: 2; }
  .ui-learn > .ui-sections { grid-column: 1; display: block; position: sticky; top: var(--s4); margin: 0; grid-row: 1 / span 3; }
  .ui-stepper button { display: none; }
  .ui-stepper { justify-content: space-between; }
  .ui-stepper .ui-step-title { flex: 1 1 auto; text-align: center; align-self: center; }
}
@media (min-width: 840px) { .ui-stepper .ui-step-title { display: block; } }
.ui-step-title { display: none; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { body.ui2 * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Profil und Erfolge (Spec Teil II §10, §11) */
.ui-ich-head { display: flex; align-items: center; gap: var(--s4); margin: var(--s2) 0 var(--s3); }
.ui-ich-head h1 { margin: 0; }
.ui-avatar { display: inline-grid; place-items: center; border-radius: 50%; font-family: var(--font-text); line-height: 1; flex: none; }
.ui-badge { flex: none; display: block; }
.ui-tiles { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.ui-tile { display: flex; gap: var(--s3); align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.ui-tile h3 { margin: 0 0 var(--s1); font-size: 1.0625rem; text-align: left; }
.ui-tile p { margin: 0 0 var(--s1); font-size: 1rem; }
.ui-tile .ui-bar { margin-top: var(--s2); }
.ui-minis { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.ui-mini { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-ui); font-size: 1rem; max-width: none; }
.ui-mini svg { width: 32px; height: 41px; }
.ui-mini small { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
.ui-mini.is-open { color: var(--ink-soft); }
.ui-notice { position: relative; display: flex; gap: var(--s3); align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r-card); padding: var(--s3) var(--s5) var(--s3) var(--s4); margin: 0 0 var(--s4); }
.ui-notice p { margin: 0 0 var(--s1); }
.ui-close { position: absolute; top: var(--s1); right: var(--s1); width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--ink-soft); font-size: 1.5rem; cursor: pointer; border-radius: var(--r-control); }
.ui-form fieldset { border: 1px solid var(--line); border-radius: var(--r-card); margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--card); }
.ui-form legend { font-family: var(--font-ui); padding: 0 var(--s2); }
.ui-form input[type="text"] { box-sizing: border-box; width: 100%; max-width: 22rem; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--card); font: inherit; color: var(--ink); }
.ui-choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ui-choice { display: inline-flex; }
.ui-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-choice span { display: inline-flex; align-items: center; gap: var(--s2); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--card); font-family: var(--font-ui); cursor: pointer; justify-content: center; }
.ui-choice input:checked + span { border: 2px solid var(--primary); background: #e7f0ea; font-weight: 600; }
.ui-choice input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.ui-choice i { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--ink-soft); display: inline-block; }
.ui-check { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); font-family: var(--font-ui); }
.ui-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.ui-saved { background: #e7f0ea; border: 1px solid var(--primary); border-radius: var(--r-control); padding: var(--s2) var(--s3); font-family: var(--font-ui); }

/* Lückeneintrag im Verstehen-Teil (Spec Teil II §9.2) */
.ui-kern { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r-card); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.ui-kern h3 { margin: 0 0 var(--s2); font-size: 1.0625rem; text-align: left; }
.ui-kern p { margin: 0 0 var(--s2); max-width: none; text-align: left; }
.ui-kern-zeile { font-size: 1.125rem; }
.ui-kern-zeile input { font: inherit; min-height: var(--tap); padding: 0 var(--s2); margin: 0 var(--s1); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--card); color: var(--ink); box-sizing: border-box; max-width: 100%; }
.ui-kern-zeile input::placeholder { color: var(--ink-soft); font-style: italic; opacity: 1; }
.ui-kern-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.ui-linkbtn { background: none; border: 0; padding: 0 var(--s2); min-height: var(--tap); color: var(--primary); text-decoration: underline; font: inherit; font-family: var(--font-ui); font-size: 1rem; cursor: pointer; }

/* Spickzettel (Spec Teil II §9) */
.ui-notes { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); }
.ui-note { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); max-width: none; }
.ui-note p { margin: 0 0 var(--s1); }
.ui-note textarea, .ui-newnote textarea { width: 100%; box-sizing: border-box; font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--card); color: var(--ink); resize: vertical; }
.ui-sheetpage .slips { padding-left: 0; list-style: none; display: grid; gap: var(--s3); }
.ui-sheetpage .slip { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
@media print {
  .ui-nav, .ui-top, .ui-foot, .skip, .ui-noprint { display: none !important; }
  body.ui2, body.ui2 main { background: #fff; margin: 0; max-width: none; padding: 0; }
  .ui-sheetpage textarea { border: 0; resize: none; padding: 0; }
  .ui-sheetpage { columns: 2; column-gap: 2rem; }
  .ui-note, .ui-sheetpage .slip { break-inside: avoid; }
}

/* Wissenskarte 2.0 (Spec Teil II §8) */
.ui-state { flex: none; }
.ui-legend { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-soft); }
.ui-legend li { display: inline-flex; align-items: center; gap: var(--s1); max-width: none; }
.ui-switch { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.ui-switch a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: 1rem; }
.ui-switch a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ui-crumbs { margin: 0; font-family: var(--font-ui); font-size: var(--fs-small); }
.ui-search label { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-soft); }
.ui-search input { box-sizing: border-box; width: 100%; max-width: 22rem; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--card); font: inherit; color: var(--ink); }
.ui-st-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: var(--s1) 0; color: var(--ink); text-decoration: none; font-family: var(--font-ui); }
.ui-st-link:hover .ui-st-title { text-decoration: underline; }
.ui-st-link > span { display: flex; flex-direction: column; }
.ui-st-title { font-size: 1.0625rem; line-height: 1.3; }
.ui-st-link small, .ui-bandlist small, .ui-flat small { font-size: var(--fs-small); color: var(--ink-soft); }
.ui-tree, .ui-flat, .ui-portlist { list-style: none; margin: 0; padding: 0; }
.ui-tree-node { position: relative; max-width: none; }
.ui-tree-branch { margin-left: 1.1rem; padding-left: var(--s3); border-left: 2px solid var(--edge); }
.ui-tree-branch > .ui-tree-node::before { content: ""; position: absolute; left: calc(-1 * var(--s3) - 2px); top: 1.4rem; width: var(--s3); border-top: 2px solid var(--edge); }
.ui-tree:not(.ui-tree-branch) > .ui-tree-node { padding-top: 0; }
.ui-tree:not(.ui-tree-branch) .ui-tree:not(.ui-tree-branch) { margin-left: 0; }
.ui-port { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.ui-port a, .ui-portlist a { color: var(--primary); }
.ui-portlist li { max-width: none; }
.ui-portlist a { display: inline-flex; align-items: center; min-height: var(--tap); }
.ui-flat li { max-width: none; border-bottom: 1px solid var(--line); }
.ui-mapwrap { overflow-x: auto; }
.ui-map { width: 100%; min-width: 52rem; height: auto; display: block; }
.ui-map a:focus-visible rect { stroke-width: 4; }
.ui-map-only { display: none; }
.ui-bands-only .ui-band h2 { margin: var(--s4) 0 var(--s2); }
.ui-bandlist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.ui-bandlist li { border-bottom: 1px solid var(--line); max-width: none; }
.ui-bandlist li:last-child { border-bottom: 0; }
.ui-bandlist a { display: flex; align-items: flex-start; gap: var(--s3); min-height: 3.25rem; padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; font-family: var(--font-ui); }
.ui-bandlist a > span { display: flex; flex-direction: column; }
@media (min-width: 840px) {
  .ui-map-only { display: block; }
  .ui-bands-only { display: none; }
}

.ui-tree-node > .ui-port { display: block; margin: 0 0 var(--s2) calc(20px + var(--s2)); }
.ui-map { min-width: 48rem; }

/* Brotkrumen und Stand auf der Fertigkeitsseite (Spec Teil II §6.3) */
nav.ui-crumbs ol { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s2); font-family: var(--font-ui); font-size: var(--fs-small); }
nav.ui-crumbs li { max-width: none; display: inline-flex; align-items: center; color: var(--ink-soft); }
nav.ui-crumbs li + li::before { content: "›"; margin-right: var(--s2); }
nav.ui-crumbs a { color: var(--primary); min-height: var(--tap); display: inline-flex; align-items: center; }
nav.ui-crumbs li[aria-current="page"] { color: var(--ink); }
.ui-skillstate { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-soft); }