@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-800.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%; max-width: 100%; min-height: 100%; min-height: 100dvh;
  overflow-x: clip; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background-color: var(--bg, #101420);
  background-image: var(--app-canvas);
}
html.route-laedt::before {
  content: ''; position: fixed; z-index: 10020; top: 0; left: 0; width: 36%; height: 3px;
  pointer-events: none; border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #1A759F, #34A0A4, #99D98C);
  box-shadow: 0 0 12px rgba(52, 160, 164, .72);
  animation: route-ladefortschritt .9s ease-in-out infinite;
}
@keyframes route-ladefortschritt {
  0% { transform: translateX(-110%); opacity: .55; }
  55% { opacity: 1; }
  100% { transform: translateX(285%); opacity: .7; }
}
html.module-start,
html.module-start body,
html.module-start #app {
  min-height: 100vh;
  min-height: 100lvh;
  overflow: hidden;
  background: #101420;
}
html.module-start.route-laedt::before { display: none; }
.app-startbild {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100vh;
  min-height: 100lvh;
  overflow: hidden;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(52, 160, 164, .30), transparent 43%),
    linear-gradient(155deg, #071627 0%, #0B2B43 58%, #0B6573 125%);
}
.app-startbild-inhalt {
  display: flex;
  width: min(86vw, 430px);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.app-start-bahn {
  position: relative;
  display: block;
  width: 100%;
  height: min(30vh, 176px);
  margin: 0 0 10px;
  --app-start-weg: min(26vw, 118px);
}
.app-start-laeufer {
  position: absolute;
  bottom: 14px;
  left: 50%;
  translate: -50% 0;
  animation: app-start-gang 5s ease-in-out infinite;
}
.app-startbild img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(27vw, 118px);
  max-height: 24vh;
  height: auto;
  object-fit: contain;
  animation: app-start-watscheln .6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(120, 200, 255, .34)) drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.app-start-schatten {
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 62px;
  height: 9px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  filter: blur(4px);
  animation: app-start-schatten .6s ease-in-out infinite;
}
@keyframes app-start-gang {
  0% { transform: translateX(calc(var(--app-start-weg) * -1)) scaleX(1); }
  46% { transform: translateX(var(--app-start-weg)) scaleX(1); }
  50% { transform: translateX(var(--app-start-weg)) scaleX(-1); }
  96% { transform: translateX(calc(var(--app-start-weg) * -1)) scaleX(-1); }
  100% { transform: translateX(calc(var(--app-start-weg) * -1)) scaleX(1); }
}
@keyframes app-start-watscheln {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}
@keyframes app-start-schatten {
  0%, 100% { opacity: .42; width: 62px; }
  50% { opacity: .2; width: 46px; }
}
.app-startbild strong {
  color: #fff;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}
.app-start-fortschritt {
  display: block;
  width: min(270px, 72vw);
  height: 8px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  background: rgba(3, 16, 30, .42);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}
.app-start-fortschritt > span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52B69A, #99D98C, #fff);
  box-shadow: 0 0 14px rgba(153, 217, 140, .58);
  animation: app-start-laden 1.2s ease-in-out infinite;
}
@keyframes app-start-laden {
  from { transform: translateX(-125%); }
  to { transform: translateX(340%); }
}
@media (max-height: 500px) {
  .app-start-bahn { height: min(26vh, 104px); margin-bottom: 14px; }
  .app-startbild img { width: min(20vw, 78px); max-height: 20vh; }
  .app-start-fortschritt { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-start-fortschritt > span { width: 100%; animation: none; }
  .app-start-laeufer, .app-startbild img, .app-start-schatten { animation: none; }
  .alma-assistent-avatar, .alma-assistent-avatar img,
  .pf-strahlen, .pf-pokal, .pf-funke { animation: none; }
  .pokalfeier, .pf-karte { animation-duration: .01s; }
}

:root {
  --neon-cyan: #33D6FF;
  --neon-blau: #3A86FF;
  --neon-violett: #8B5CFF;
  --neon-pink: #FF3C9E;
  --neon-mint: #22D3A6;
  --neon-bernstein: #FF9E2C;
  --bg: #101420;
  --app-canvas:
    radial-gradient(120% 90% at 90% -12%, #1b2a48 0%, rgba(16,20,32,0) 46%),
    radial-gradient(90% 70% at -10% 6%, #15233d 0%, rgba(16,20,32,0) 42%);
  --card: #1A2130;
  --ink: #E6EBF2;
  --ink-soft: #B8C6D9;
  --muted: var(--ink-soft);
  --primary: #3E8FCF;
  --primary-deep: #8FC4E8;
  --primary-soft: #213247;
  --success: #52B69A;
  --success-soft: #1D3A33;
  --lime: #B5E48C;
  --lime-soft: #2C3A22;
  --teal: #34A0A4;
  --danger: #EF5A6A;
  --danger-deep: #FF8A96;
  --danger-soft: #3B2129;
  --teal-soft: #163338;
  --sun: #F0A63C;
  --sun-soft: #3A3120;
  --line: #2A3648;
  --wand: #1B212C;
  --ampel-rot: #E8734A;
  --ampel-gelb: #E0A93B;
  --ampel-gruen: #35C08A;
  --ampel-rot-flaeche: rgba(232, 115, 74, .20);
  --ampel-gelb-flaeche: rgba(224, 169, 59, .17);
  --ampel-gruen-flaeche: rgba(53, 192, 138, .13);
  --primary-schein: rgba(51, 214, 255, .09);
  --brand-o1: #FF5400;  --brand-o2: #FF6D00;  --brand-o3: #FF8500;  --brand-o4: #FF9100;  --brand-o5: #FF9E00;
  --brand-b1: #00B4D8;  --brand-b2: #0096C7;  --brand-b3: #0077B6;  --brand-b4: #023E8A;  --brand-b5: #03045E;
  --radius: 18px;
  --radius-lg: 22px;
  --sidebar-w: 250px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 14px 32px rgba(0,0,0,.44);
  --shadow-lg: 0 30px 66px rgba(0,0,0,.55);
  --shadow-btn: 0 4px 14px rgba(0, 0, 0, .40);
  --sig-magenta: #FF006E;  --sig-pink: #EF476F;   --sig-red: #D00000;     --sig-darkred: #9D0208;
  --sig-orange: #FB5607;   --sig-burnt: #E36414;  --sig-gold: #FFBA08;     --sig-yellow: #FFEA00;
  --sig-lime: #8AC926;     --sig-green: #38B000;   --sig-teal: #06D6A0;    --sig-cyan: #00B4D8;
  --sig-blue: #3A86FF;     --sig-indigo: #4361EE;  --sig-violet: #7209B7;   --sig-purple: #C86BFA;
  --sig-coral: #FF686B;    --sig-slate: #2B2D42;
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: transparent;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior: none;
}
#app { min-height: 100vh; min-height: 100dvh; background: transparent; }
b, strong, h1, h2, h3 { font-weight: 800; }

.hidden { display: none !important; }
.ic { display: inline-flex; vertical-align: -3px; }
.app-ico { object-fit: contain; display: inline-block; vertical-align: -6px; flex-shrink: 0; }
.a-ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.dash-box h3 .app-ico, .chip-timer .app-ico { vertical-align: -7px; }
.mode-pill .app-ico { vertical-align: -5px; margin-right: 2px; }

.sidebar {
  position: fixed; top: 14px; bottom: 14px; left: 14px; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  padding: 0 12px 14px; overflow-y: auto; z-index: 60;
  border-radius: 22px;
}
.brand { border-radius: 15px; margin: 10px 4px 3px; padding: 10px 14px; cursor: pointer; }
.logo-crop { width: 100%; aspect-ratio: 1122 / 505; position: relative; }
.logo-crop img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}

.nav-sec {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 6px 10px 3px;
}
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 4px 9px; border-radius: 11px; border: none; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; text-align: left; margin-bottom: 1px;
  transition: background .15s ease, color .15s ease;
}
.nav-item .ico {
  width: 35px; height: 35px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; }
.nav-refresh { min-height: 44px; touch-action: manipulation; }
.nav-refresh:disabled { opacity: .68; cursor: wait; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--primary);
}
.fach-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

.ki-stat { background: color-mix(in srgb, var(--card) 94%, var(--primary-soft)); border: 1px solid color-mix(in srgb, var(--line) 84%, var(--primary)); border-radius: 12px; padding: 12px 13px; min-width: 0; }
.ki-stat-kopf { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 750; line-height: 1.35; }
.ki-stat .ki-stat-wert { display: block; color: var(--stat-farbe, var(--ink)); font-size: 19px; line-height: 1.25; font-variant-numeric: tabular-nums; margin-top: 5px; overflow-wrap: anywhere; }
.ki-stat-note { color: var(--ink-soft); font-size: 11px; margin-top: 4px; }
.kk-preis-card { background: color-mix(in srgb, var(--card) 91%, var(--primary-soft)); }
.kk-preis-card .kk-preis-zeile { display: block; color: var(--ink); font-size: 13px; line-height: 1.5; margin-top: 6px; }
:root[data-theme="dark"] .ki-stat { background: #17243A; border-color: #344761; }
:root[data-theme="dark"] .ki-stat-kopf, :root[data-theme="dark"] .ki-stat-note { color: #C4D2E5; }
:root[data-theme="dark"] .ki-stat .ki-stat-wert, :root[data-theme="dark"] .kk-preis-card .kk-preis-zeile { color: #F6F9FD; }

.admin-info-knopf { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--primary-soft) 80%, var(--card)); color: var(--primary-deep); font: 800 14px/1 inherit; cursor: pointer; padding: 0; vertical-align: middle; }
.admin-info-knopf:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.admin-info-knopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
.admin-labelzeile { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; }
.admin-ueberschrift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-info-dialog { width: min(540px, calc(100vw - 28px)); }
.admin-info-dialog p { color: var(--ink); font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.admin-info-dialog .admin-info-ok { width: 100%; min-height: 44px; margin-top: 5px; }

.kk-box .kk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; cursor: pointer; user-select: none; }
.kk-box .kk-head:hover { opacity: .92; }
.kk-chev { color: var(--ink-soft); display: inline-flex; transition: transform .2s ease; }
.kk-chev.auf { transform: rotate(180deg); }
.kk-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.kk-erklaergruppe { display: inline-flex; align-items: center; gap: 5px; }
.kk-chipgroup { display: inline-flex; gap: 4px; background: var(--bg-2, #f0f3f7); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.kk-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.kk-chipgroup .kk-chip { border-color: transparent; background: transparent; }
.kk-chip.aktiv { background: var(--primary); color: #fff; border-color: var(--primary); }
.kk-chip:hover:not(.aktiv) { border-color: var(--primary); color: var(--ink); }
.kk-custom { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 12px; }
.kk-custom label { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.kk-custom input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-family: inherit; }
.kk-warns { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.kk-warn { font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border-left: 4px solid; }
.kk-warn-hoch { background: var(--danger-soft, #fdecec); border-color: var(--danger); color: var(--danger-deep, #a11); }
.kk-warn-mittel { background: #fff4e0; border-color: #e0a400; color: #7a5600; }
.kk-warn-niedrig { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-deep); }
.kk-metrik { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.kk-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; background: var(--primary-soft); }
.kk-seg { height: 100%; transition: width .3s ease; min-width: 2px; }
.kk-seg:hover { filter: brightness(1.1); }
.kk-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.kk-leg-item { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; }
.kk-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: 0 0 auto; }
.kk-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 12px; border-bottom: 2px solid var(--line); }
.kk-tab-paar { display: inline-flex; align-items: center; gap: 1px; }
.kk-tab-paar .admin-info-knopf { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; }
.kk-tab { border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 13px; padding: 8px 12px; cursor: pointer; font-family: inherit; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.kk-tab.aktiv { color: var(--primary-deep); border-bottom-color: var(--primary); }
.kk-tab:hover:not(.aktiv) { color: var(--ink); }
.kk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kk-zwischenkopf { font-size: 12px; font-weight: 800; margin: 16px 0 8px; }
.kk-provider-status { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--ink-soft); font-size: 11px; margin-top: 12px; }
.kk-provider-status strong { color: var(--success-deep, #187346); }
.kk-tablewrap { overflow-x: auto; }
.kk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kk-table th, .kk-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kk-table th { color: var(--ink-soft); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.kk-table td { font-variant-numeric: tabular-nums; }
.kk-table tbody tr:hover { background: var(--bg-2, rgba(0,0,0,.02)); }
:root[data-theme="dark"] .kk-chipgroup { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .kk-warn-mittel { background: rgba(224,164,0,.14); color: #f0c04a; }
.kk-fam-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.kk-table .kk-fam-row { cursor: pointer; }
.kk-table .kk-fam-row:hover { background: var(--primary-soft); }
.kk-fam-detail > td { background: var(--bg-2, rgba(0,0,0,.03)); padding: 12px 14px; }
.kk-fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.kk-fd-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary-deep); margin-bottom: 5px; }
.kk-fd-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.kk-fd-item span { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-fd-item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-box { margin-bottom: 14px; padding: 18px; overflow: hidden; border-color: color-mix(in srgb, var(--success) 46%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 11%, var(--surface)) 0%, var(--surface) 48%, color-mix(in srgb, #2f9ae0 8%, var(--surface)) 100%); }
.pv-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pv-kopf h2 { margin: 3px 0 5px; font-size: 19px; color: var(--ink); }
.pv-kopf p { margin: 0; max-width: 780px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.pv-kicker { color: var(--success); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pv-stand { flex: 0 0 auto; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.pv-bestand, .pv-quellen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.pv-bestand > div, .pv-quellen > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); display: grid; gap: 4px; }
.pv-bestand span, .pv-quellen span { color: var(--ink-soft); font-size: 10.5px; font-weight: 800; line-height: 1.35; }
.pv-bestand b, .pv-quellen b { color: var(--ink); font-size: 22px; font-variant-numeric: tabular-nums; }
.pv-bestand small, .pv-quellen small { color: var(--ink-soft); font-size: 9.5px; line-height: 1.35; }
.pv-historie { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pv-historie > summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 850; }
.pv-historie .kk-tablewrap { margin-top: 10px; max-height: 460px; overflow: auto; }
.pv-historie table { min-width: 1350px; }
.pv-historie td { vertical-align: top; max-width: 310px; }
.pv-historie details summary { cursor: pointer; color: var(--ink); font-weight: 750; }
.pv-historie details p { margin: 7px 0 0; color: var(--ink-soft); line-height: 1.45; white-space: normal; }
.pv-entscheidung { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.pv-entscheidung.freigegeben { color: #d9fff2; background: color-mix(in srgb, var(--success) 42%, #10251e); }
.pv-entscheidung.abgelehnt { color: var(--ink-soft); background: var(--surface-2); }
.pv-entscheidung.konflikt { color: #ffe9b0; background: color-mix(in srgb, #ef9b16 30%, var(--surface-2)); }
.ks-box { margin-bottom: 14px; padding: 18px; overflow: hidden; border-color: color-mix(in srgb, #2f9ae0 52%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #2f9ae0 13%, var(--surface)) 0%, var(--surface) 50%, color-mix(in srgb, var(--success) 8%, var(--surface)) 100%); }
.ks-box h2 { margin: 3px 0 5px; font-size: 19px; color: var(--ink); }
.ks-box p { margin: 0; max-width: 840px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.ks-kicker { color: #58bdff; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ks-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.ks-zahlen > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); display: grid; gap: 4px; }
.ks-zahlen span { color: var(--ink-soft); font-size: 10.5px; font-weight: 800; line-height: 1.35; }
.ks-zahlen b { color: var(--ink); font-size: 22px; font-variant-numeric: tabular-nums; }
.ks-zahlen small { color: var(--ink-soft); font-size: 9.5px; line-height: 1.35; }
.ks-ausgang { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 10px; font-weight: 850; white-space: nowrap; }
.ks-ausgang.freigegeben { color: #d9fff2; background: color-mix(in srgb, var(--success) 42%, #10251e); }
.ks-ausgang.weiter_gesperrt, .ks-ausgang.technischer_stopp { color: #ffd9df; background: color-mix(in srgb, #f05c72 28%, var(--surface-2)); }
.ks-ausgang.offen, .ks-ausgang.technischer_neuversuch { color: #fff0bf; background: color-mix(in srgb, #ef9b16 26%, var(--surface-2)); }
.ps-layout { display: grid; gap: 14px; }
.produktion-direkt { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: var(--shadow-md); }
.produktion-direkt-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.produktion-direkt.auf .produktion-direkt-kopf { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.produktion-direkt-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--primary-deep); background: var(--primary-soft); }
.produktion-direkt-label { display: block; color: var(--primary); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px; }
.produktion-direkt-kopf h2 { margin: 0 0 3px; }
.produktion-direkt-kopf p { color: var(--ink-soft); font-size: 13px; line-height: 1.45; margin: 0; max-width: 820px; }
.produktion-direkt-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.produktion-status { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 999px; background: var(--sun-soft); color: #85590E; font-size: 12px; font-weight: 800; white-space: nowrap; }
.produktion-status.aktiv { background: var(--success-soft); color: var(--primary-deep); }
.produktion-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.produktion-toggle:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.produktion-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
.produktion-direkt .ps-panel { background: color-mix(in srgb, var(--card) 96%, var(--primary-soft)); }
.ps-panel { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--card); min-width: 0; }
.ps-panel h3, .ps-panel h4, .ps-panel p { margin-top: 0; }
.ps-status, .ps-budgettext, .ps-landkopf, .ps-modellkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-switch-zeile { display: inline-flex; align-items: center; gap: 5px; }
.ps-status > div { display: grid; gap: 3px; }
.ps-status > div span, .ps-modellkopf p, .ps-provider small { color: var(--ink-soft); font-size: 12px; }
.ps-status-kopf .ps-switch-zeile { margin-top: 10px; justify-self: start; }
.ps-kurzstatistik { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ps-kurzkarte { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); display: grid; gap: 4px; }
.ps-kurzkarte > span { color: var(--ink-soft); font-size: 10px; font-weight: 800; line-height: 1.25; }
.ps-kurzkarte strong { color: var(--ink); font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ps-kurzkarte label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ps-kurzkarte select { width: 100%; min-width: 0; min-height: 38px; margin: 2px 0 0; padding: 7px 28px 7px 8px; color: var(--ink); font-size: 10.5px; font-weight: 750; }
.ps-kurzstatistik > small { grid-column: 1 / -1; min-height: 0; color: var(--danger); font-size: 10px; }
.ps-live-status { display: none; min-width: 0; }
.ps-live-status > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.ps-live-status > div { min-width: 0; display: grid; gap: 3px; }
.ps-live-status b { color: var(--ink); font-size: 12px; line-height: 1.35; }
.ps-live-status span, .ps-live-status small { color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.ps-live-status small { justify-self: end; font-variant-numeric: tabular-nums; }
.ps-live-einheit { display: block; }
.ps-live-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--line); }
.ps-live-detail[hidden] { display: none; }
.ps-live-detail > div { display: grid; align-content: start; gap: 2px; padding: 7px 8px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 7%, transparent); }
.ps-live-detail b { color: var(--danger); font-size: 10px; }
.ps-live-detail span { color: var(--ink); font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
.ps-live-detail small { justify-self: start; color: var(--ink-soft); white-space: normal; }
.ps-live-detail > small { grid-column: 1 / -1; padding-inline: 2px; }
.ps-live-status[data-zustand="laeuft"] > i { background: var(--success, #52B69A); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success, #52B69A) 20%, transparent); animation: ps-live-puls 1.8s ease-in-out infinite; }
.ps-live-status[data-zustand="bereit"] > i { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.ps-live-status[data-zustand="wartet"] > i, .ps-live-status[data-zustand="budget"] > i, .ps-live-status[data-zustand="qualitaet"] > i, .ps-live-status[data-zustand="qualitaetspause"] > i { background: var(--warning, #e0a400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning, #e0a400) 18%, transparent); }
.ps-live-status[data-zustand="fehler"] > i { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
@keyframes ps-live-puls { 0%, 100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.15); opacity: 1; } }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .ps-status { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(360px, 1.75fr) minmax(330px, 1fr); align-items: start; }
  .ps-status-kopf { grid-column: 1; grid-row: 1; }
  .ps-live-status { display: grid; grid-column: 2; grid-row: 1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
  .ps-live-status > i { margin-top: 4px; }
  .ps-live-status[data-zustand="fehler"] { grid-column: 1 / -1; grid-row: 2; }
  .ps-kurzstatistik { grid-column: 3; grid-row: 1; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-live-status[data-zustand="laeuft"] > i { animation: none; }
}
.ps-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin: 0; }
.ps-switch input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.ps-switch span { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: .2s; }
.ps-switch span::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; left: 3px; top: 3px; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .2s; }
.ps-switch input:checked + span { background: var(--success, #52B69A); }
.ps-switch input:checked + span::after { transform: translateX(20px); }
.ps-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
.ps-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.ps-grid label, .ps-grid .ps-feld, .ps-provider label, .ps-preise label { min-width: 0; margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ps-grid input, .ps-provider input { width: 100%; margin-top: 5px; box-sizing: border-box; }
.ps-auftrag-aktion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ps-auftrag-aktion button { min-height: 44px; }
.ps-auftrag-aktion span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.np-lage { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; }
.np-lage-karte { flex: 1 1 150px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  background: var(--card); display: grid; gap: 3px; align-content: start; min-width: 0; }
.np-lage-karte span { color: var(--ink-soft); font-size: 11.5px; font-weight: 750; }
.np-lage-karte strong { font-size: 25px; font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; }
.np-lage-karte small { color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
.np-lage-karte[data-ton="rot"] strong { color: var(--ampel-rot); }
.np-lage-karte[data-ton="gruen"] strong { color: var(--ampel-gruen); }
.np-lage-karte[data-sicht] { cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s; }
.np-lage-karte[data-sicht]:hover { border-color: var(--primary-deep); }
.np-lage-karte[data-sicht]:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.np-lage-karte.gewaehlt { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(51, 214, 255, .28); background: var(--primary-schein); }

.ps-warnungen-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin: 14px 0; }
.ps-warnungen-box > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; }
.ps-warnungen-box > summary::-webkit-details-marker { display: none; }
.ps-warnungen-box > summary::before { content: '▸'; color: var(--ink-soft); font-size: 13px; transition: transform .14s; }
.ps-warnungen-box[open] > summary::before { transform: rotate(90deg); }
.ps-warnungen-box > summary b { font-size: 13.5px; }
.ps-warnungen-box > summary span { color: var(--ink-soft); font-size: 12px; }
.ps-warnungen-box > summary:hover b { color: var(--primary-deep); }
.ps-warnungen-box[data-ps-warnton="hoch"] { border-color: var(--danger); }
.ps-warnungen-box[data-ps-warnton="hoch"] > summary span { color: var(--danger-deep); font-weight: 800; }
.ps-warnungen-box[data-ps-warnton="mittel"] > summary span { color: var(--ampel-gelb); font-weight: 800; }
.ps-warnungen-box .kk-warns { margin: 0; padding: 0 12px 12px; }

.np-raster { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; overflow-x: auto; }
.np-raster table { border-collapse: separate; border-spacing: 5px; width: 100%; min-width: 620px; table-layout: fixed; }
.np-raster col.fach { width: 21%; }
.np-raster th { color: var(--ink-soft); font-size: 11.5px; font-weight: 800; text-align: center; padding: 2px; }
.np-raster th.fach { text-align: left; }
.np-zelle { border: 1px solid transparent; border-radius: 11px; padding: 9px 4px; text-align: center; transition: .14s; }
.np-zelle[data-fach] { cursor: pointer; }
.np-zelle[data-fach]:hover { border-color: var(--primary-deep); }
.np-zelle b { display: block; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.np-zelle small { display: block; font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
.np-zelle[data-ton="rot"] { background: var(--ampel-rot-flaeche); }
.np-zelle[data-ton="gelb"] { background: var(--ampel-gelb-flaeche); }
.np-zelle[data-ton="gruen"] { background: var(--ampel-gruen-flaeche); }
.np-zelle[data-ton="leer"] { background: rgba(127, 127, 127, .08); }
.np-zelle.gewaehlt { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(51, 214, 255, .28); }
.np-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-soft); font-size: 11.5px; }
.np-legende i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.np-legende i[data-ton="rot"] { background: var(--ampel-rot); }
.np-legende i[data-ton="gelb"] { background: var(--ampel-gelb); }
.np-legende i[data-ton="gruen"] { background: var(--ampel-gruen); }
.np-legende i[data-ton="leer"] { background: rgba(127, 127, 127, .3); }

.np-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; justify-content: space-between; margin: 16px 0 12px; }
.np-filter-gruppe { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.np-filter label { display: grid; gap: 5px; margin: 0; color: var(--ink-soft); font-size: 11.5px; font-weight: 750; }
.np-filter select { min-height: 40px; min-width: 145px; margin: 0; }
.np-schnellwahl { display: flex; gap: 7px; flex-wrap: wrap; }
.np-schnellwahl button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.np-schnellwahl button:hover { color: var(--ink); border-color: var(--primary-deep); }

.np-liste { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.np-zeile { display: grid; grid-template-columns: 42px 74px 1fr 190px 92px 124px; align-items: center;
  gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; margin: 0; }
.np-zeile:first-child { border-top: 0; }
.np-zeile.kopf { background: rgba(127, 127, 127, .06); color: var(--ink-soft);
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.np-zeile.gewaehlt { background: var(--primary-schein); }
.np-zeile input[type=checkbox] { width: 19px; height: 19px; margin: 0; cursor: pointer; }
.np-fach { font-weight: 750; }
.np-schulform { color: var(--ink-soft); font-size: 12px; }
.np-bestand { text-align: right; font-weight: 850; font-variant-numeric: tabular-nums; }
.np-bestand[data-ton="rot"] { color: var(--ampel-rot); }
.np-bestand[data-ton="gelb"] { color: var(--ampel-gelb); }
.np-bestand[data-ton="gruen"] { color: var(--ampel-gruen); }
.np-balken { height: 7px; border-radius: 99px; background: rgba(127, 127, 127, .18); overflow: hidden; }
.np-balken i { display: block; height: 100%; border-radius: 99px; }
.np-balken i[data-ton="rot"] { background: var(--ampel-rot); }
.np-balken i[data-ton="gelb"] { background: var(--ampel-gelb); }
.np-balken i[data-ton="gruen"] { background: var(--ampel-gruen); }
.np-leer { padding: 18px 14px; color: var(--ink-soft); font-size: 12.5px; text-align: center; border-top: 1px solid var(--line); }

.np-sammel { position: sticky; bottom: 12px; z-index: 20; margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--primary-deep); border-radius: 14px; padding: 12px 16px;
  background: var(--card); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.np-sammel-text b { font-size: 15px; }
.np-sammel-text span { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
.np-sammel-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-sammel-rechts label { display: flex; align-items: center; gap: 7px; margin: 0;
  color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.np-sammel-rechts input { width: 92px; min-height: 42px; margin: 0; }
.np-sammel-rechts button { min-height: 42px; }
@media (max-width: 720px) {
  .np-zeile { grid-template-columns: 34px 62px 1fr 82px; }
  .np-zeile .np-schulform, .np-zeile .np-balken, .np-zeile.kopf span:nth-child(4), .np-zeile.kopf span:nth-child(6) { display: none; }
}

.ps-auftraege-liste { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ps-auftraege-liste summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 850; }
.ps-auftraege-liste .kk-tablewrap { margin-top: 8px; }
.ps-fester-wert { min-height: 44px; margin-top: 5px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; }
.ps-fester-wert b { font-size: 14px; }
.ps-fester-wert span { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.ps-feld-hilfe { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 500; line-height: 1.4; }
.ps-empfehlung { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--primary-soft) 62%, var(--card)); display: grid; gap: 12px; }
.ps-empfehlung-kopf, .ps-bereich-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-empfehlung-kopf > div { display: grid; gap: 2px; }
.ps-empfehlung-kopf span { color: var(--primary-deep); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.ps-empfehlung-kopf b { color: var(--ink); font-size: 16px; }
.ps-empfehlung-kopf em { color: var(--ink-soft); font-size: 11px; font-style: normal; font-weight: 700; }
.ps-empfehlung-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-empfehlung-werte > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); display: grid; gap: 2px; }
.ps-empfehlung-werte span, .ps-empfehlung-werte small { color: var(--ink-soft); font-size: 10.5px; line-height: 1.35; }
.ps-empfehlung-werte b { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.ps-empfehlung p { margin: 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; }
.ps-empfehlung-uebernehmen { justify-self: start; min-height: 40px; }
.ps-logik { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); display: grid; gap: 7px; }
.ps-logik > b { color: var(--ink); font-size: 13px; }
.ps-logik > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-logik > div span { padding: 5px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 750; }
.ps-logik > div i { color: var(--ink-soft); font-style: normal; font-weight: 800; }
.ps-logik small { color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.ps-budgetbar { height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 16px; }
.ps-budgetbar span { display: block; height: 100%; background: var(--primary); }
.ps-budgettext { font-size: 12px; margin-top: 7px; }
.ps-forecast, .ps-modelhinweis { margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); display: grid; gap: 3px; font-size: 12px; }
.ps-range { margin-top: 14px; }
.ps-range label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 5px; }
.ps-range input { width: 100%; accent-color: var(--primary); }
.ps-bereich-kopf > div { display: grid; gap: 4px; }
.ps-bereich-kopf > div > span { color: var(--primary-deep); font-size: 12px; font-weight: 800; }
.ps-bereich-kopf button, .ps-landaktionen button { min-height: 40px; }
.ps-bereich-stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ps-bereich-stand > div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); display: grid; gap: 3px; min-width: 0; }
.ps-bereich-stand b { color: var(--ink); font-size: 12px; }
.ps-bereich-stand span { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.ps-landkopf { margin-top: 20px; }
.ps-landkopf h3 { margin-bottom: 2px; }
.ps-landkopf span { font-size: 12px; color: var(--danger); font-weight: 800; }
.ps-landkopf span.ok { color: var(--success-deep, #187346); }
.ps-landkopf small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.ps-landaktionen { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.ps-laender { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 8px 12px; margin-top: 12px; }
.ps-land { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.ps-land.prioritaet { border-color: color-mix(in srgb, var(--sun) 58%, var(--line)); background: color-mix(in srgb, var(--sun-soft) 52%, var(--surface-2)); }
.ps-land > span:first-child { display: grid; gap: 3px; min-width: 0; }
.ps-land > span:first-child b { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.ps-land > span:first-child small { color: var(--ink-soft); font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.ps-land > span:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex: 0 0 auto; flex-wrap: wrap; }
.ps-land > span:last-child em { padding: 5px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.ps-land input { width: 76px; padding: 7px 8px; margin: 0; }
.ps-land i { font-style: normal; color: var(--ink-soft); }
.ps-modelle { grid-column: 1 / -1; }
.ps-modellkopf > span { border-radius: 999px; background: var(--success-soft, #e4f6ed); color: var(--success-deep, #187346); padding: 6px 10px; font-size: 11px; font-weight: 800; }
.ps-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 12px; }
.ps-provider { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); min-width: 0; }
.ps-provider:has([data-ps-rolle]:checked) { border-color: color-mix(in srgb, var(--primary) 62%, var(--line)); }
.ps-provider h4 { color: var(--primary-deep); margin-bottom: 8px; }
.ps-provider small { display: block; margin-top: 5px; }
.ps-provider-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ps-provider-titel { display: grid; gap: 2px; min-width: 0; }
.ps-provider-titel b { color: var(--ink); font-size: 15px; }
.ps-provider-titel span { color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.ps-provider-meta, .ps-provider-status { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-soft); font-size: 11px; margin: 0 0 10px; }
.ps-provider-meta span { padding: 4px 7px; border-radius: 7px; background: var(--bg-2); }
.ps-provider-meta a { color: var(--primary-deep); font-weight: 800; padding: 4px 0; }
.ps-provider-status { margin: 7px 0 0; min-height: 18px; }
.ps-key-ok { color: var(--success-deep, #187346); font-weight: 800; }
.ps-key-fehlt { color: var(--danger); font-weight: 750; }
.ps-modellliste { display: grid; gap: 9px; }
.ps-modelltabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.ps-modelloption { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink-soft); padding: 8px 10px; text-align: center; font: 800 11px/1.2 inherit; cursor: pointer; touch-action: manipulation; transition: border-color .18s, background .18s, color .18s, box-shadow .18s; }
.ps-modelloption:hover { border-color: var(--primary); color: var(--primary-deep); }
.ps-modelloption:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; }
.ps-modelloption.aktiv { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); background: color-mix(in srgb, var(--primary-soft) 72%, var(--card)); }
.ps-modelldetails { min-width: 0; }
.ps-modelldetail { min-width: 0; border: 1px solid var(--primary); border-radius: 13px; overflow: hidden; background: var(--bg-2); padding: 11px; display: grid; gap: 5px; }
.ps-modelldetail[hidden] { display: none; }
.ps-modelloption-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ps-modelloption-kopf > b { color: var(--ink); font-size: 13px; }
.ps-verfuegbar { border-radius: 999px; padding: 3px 7px; font-size: 9.5px; line-height: 1.25; font-weight: 850; max-width: 100%; }
.ps-verfuegbar.ok { color: var(--success-deep, #187346); background: var(--success-soft, #e4f6ed); }
.ps-verfuegbar.fehlt { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--card)); }
.ps-verfuegbar.alt { color: var(--ink-soft); background: var(--line); }
.ps-modelldetail code { color: var(--ink-soft); font: 650 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ps-modellzweck, .ps-modelltechnik { color: var(--ink-soft); font-size: 10.5px; line-height: 1.4; }
.ps-modelltechnik { padding-top: 4px; border-top: 1px solid var(--line); }
.ps-modellpreise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 2px; }
.ps-modellpreise > span { min-width: 0; border-radius: 7px; background: var(--card); padding: 5px 6px; color: var(--ink-soft); font-size: 9.5px; display: grid; gap: 2px; }
.ps-modellpreise b { color: var(--ink); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-api-version { margin-top: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); overflow: hidden; }
.ps-api-version summary { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 10.5px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.ps-api-version summary::marker { color: var(--primary); }
.ps-api-version summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-api-version summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: -3px; }
.ps-api-version > div { padding: 0 10px 10px; display: grid; gap: 6px; }
.ps-api-version label { color: var(--ink); font-size: 11px; }
.ps-api-version input { min-height: 44px; margin: 0; }
.ps-api-version small { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.ps-api-version small code { color: var(--primary-deep); }
.ps-modellrollen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 5px -4px -4px; padding: 8px 4px 4px; border-top: 1px solid var(--line); }
.ps-modellrollen label { min-width: 0; min-height: 44px; margin: 0; cursor: pointer; }
.ps-modellrollen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ps-modellrollen span { min-height: 44px; height: 100%; display: grid; place-items: center; padding: 6px 5px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); text-align: center; font-size: 9.5px; line-height: 1.2; font-weight: 800; }
.ps-modellrollen input:checked + span { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ps-modellrollen input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
.ps-custom-rollen { margin-top: 9px; }
.ps-rollen-zusammenfassung { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 12px 0; }
.ps-rollen-zusammenfassung [hidden] { display: none; }
.ps-rollen-zusammenfassung > div { min-width: 0; display: grid; gap: 2px; min-height: 72px; align-content: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); }
.ps-rollen-zusammenfassung span { color: var(--primary-deep); font-size: 10px; font-weight: 850; }
.ps-rollen-zusammenfassung b { color: var(--ink); font-size: 12px; }
.ps-rollen-zusammenfassung small { color: var(--ink-soft); font: 650 9.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ps-rollen-zusammenfassung i { color: var(--ink-soft); font-style: normal; font-weight: 900; }
.ps-rollen-hinweis { margin: -4px 0 10px; padding: 8px 10px; border-radius: 9px; background: var(--success-soft, #e4f6ed); color: var(--success-deep, #187346); font-size: 11.5px; font-weight: 750; line-height: 1.4; }
.ps-rollen-hinweis.warnung { background: color-mix(in srgb, var(--warning, #e0a400) 13%, var(--card)); color: var(--ink); }
.ps-custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ps-custom-grid label:nth-child(n+3) { grid-column: 1 / -1; }
.ps-provider-loeschen { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 9px; background: transparent; color: var(--danger); padding: 6px 9px; font: 700 11px/1.2 inherit; cursor: pointer; }
.ps-erzeuger-hinweis { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; margin: 12px 0; }
.ps-ersatz-option { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); cursor: pointer; }
.ps-ersatz-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.ps-ersatz-option span { display: grid; gap: 2px; }
.ps-ersatz-option b { color: var(--ink); font-size: 12px; }
.ps-ersatz-option small { color: var(--ink-soft); font-size: 10.5px; line-height: 1.4; }
.ps-anbieter-add-zeile { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.ps-anbieter-add { min-height: 44px; border: 1px dashed var(--primary); border-radius: 11px; background: var(--primary-soft); color: var(--primary-deep); padding: 9px 14px; font: 800 12px/1.3 inherit; cursor: pointer; }
.ps-preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ps-preishinweis { margin-top: 9px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ps-modellkennung { display: block; margin-top: 11px; }
.ps-modellkennung input { width: 100%; }
.ps-modellkennung-hinweis { margin-top: 6px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ps-chatgrenze { display: block; margin: 0 0 12px; }
.ps-chatgrenze input { width: 120px; min-height: 44px; }
.ps-chatgrenze-hinweis { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ps-chatwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.ps-chatspalte { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.ps-chatspalte-kopf b { font-size: 13px; }
.ps-chatspalte label { display: block; min-width: 0; font-size: 11.5px; }
.ps-chatspalte select, .ps-chatspalte input[type="text"], .ps-chatspalte input[type="password"], .ps-chatspalte input[type="number"], .ps-chatspalte input:not([type]) { width: 100%; min-height: 40px; }
.ps-chatspalte-hinweis { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.ps-chatspalte-schalter { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 650; cursor: pointer; }
.ps-chatspalte-schalter input { width: 20px; height: 20px; flex: 0 0 auto; }
.ps-chatspalte-pruefen, .ps-chatspalte-loeschen, .ps-chatspalte-neu { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 11.5px; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.ps-chatspalte-pruefen:hover, .ps-chatspalte-neu:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.ps-chatspalte-loeschen:hover { border-color: color-mix(in srgb, var(--neon-bernstein) 55%, var(--line)); }
.ps-chatspalte-pruefen:focus-visible, .ps-chatspalte-loeschen:focus-visible, .ps-chatspalte-neu:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; }
.ps-chatspalte .ps-chatkosten { margin: 2px 0 0; font-size: 11px; }
.ps-chatspalte-neu { align-self: start; }
.ps-kette { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.ps-kette label { display: block; }
.ps-kette select { width: 100%; min-height: 44px; }
.ps-kette-schalter { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 12px; font-weight: 650; cursor: pointer; }
.ps-kette-schalter input { width: 20px; height: 20px; flex: 0 0 auto; }
.ps-kette-hinweis { color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ps-schluessel { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.ps-schluessel label { display: block; }
.ps-schluessel input { width: 100%; }
.ps-schluessel-hinweis { margin-top: 6px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ps-schluessel-loeschen { margin-top: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.ps-schluessel-loeschen:hover { border-color: color-mix(in srgb, var(--neon-bernstein) 55%, var(--line)); }
.ps-schluessel-loeschen:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; }
.ps-schluessel-loeschen[disabled] { opacity: 0.55; cursor: progress; }
.ps-preise-details { margin-top: 7px; border-top: 1px solid var(--line); }
.ps-preise-details summary { min-height: 44px; display: flex; align-items: center; gap: 4px; color: var(--primary-deep); font-size: 11px; font-weight: 750; cursor: pointer; touch-action: manipulation; }
.ps-preise-details summary::marker { color: var(--primary); }
.ps-preise-details summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; border-radius: 8px; }
.ps-preise-details[open] { padding-bottom: 5px; }
.ps-chatbox { margin: 0 0 14px; border: 1px solid color-mix(in srgb, var(--neon-violett) 45%, var(--line)); border-radius: 13px; background: var(--card); overflow: hidden; }
.ps-chatbox > summary { min-height: 56px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(120deg, #33D6FF 0%, #8B5CFF 52%, #FF3C9E 100%);
  box-shadow: 0 6px 20px rgba(139, 92, 255, .3); }
.ps-chatbox > summary::marker { color: rgba(255, 255, 255, .85); }
.ps-chatbox > summary > span { color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32); }
.ps-chatbox > summary > b { margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #2A1466; font-size: 11.5px; font-weight: 900; }
.ps-chatbox > summary:hover { filter: brightness(1.06); }
.ps-chatbox > summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }
.ps-chatbox[open] > summary { border-radius: 12px 12px 0 0; }
.ps-chatbox-koerper { padding: 0 13px 13px; border-top: 1px solid var(--line); }
.ps-leiste { border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; }
.ps-leiste > summary { min-height: 56px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: 12px; cursor: pointer; touch-action: manipulation; color: #fff; }
.ps-leiste > summary::marker { color: rgba(255, 255, 255, .85); }
.ps-leiste > summary:hover { filter: brightness(1.06); }
.ps-leiste > summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }
.ps-leiste[open] > summary { border-radius: 12px 12px 0 0; }
.ps-leiste-titel { display: inline-flex; flex-direction: column; gap: 1px; }
.ps-leiste-titel b { font-size: 14px; font-weight: 900; letter-spacing: .01em; }
.ps-leiste-titel small { font-size: 12px; font-weight: 700; opacity: .88; }
.ps-leiste-stand { margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.ps-leiste-lauf { border-color: color-mix(in srgb, var(--neon-mint) 45%, var(--line)); }
.ps-leiste-lauf > summary { background: linear-gradient(120deg, #22D3A6 0%, #33D6FF 100%); box-shadow: 0 6px 20px rgba(34, 211, 166, .28); }
.ps-leiste-budget { border-color: color-mix(in srgb, var(--neon-blau) 45%, var(--line)); }
.ps-leiste-budget > summary { background: linear-gradient(120deg, #33D6FF 0%, #3A86FF 100%); box-shadow: 0 6px 20px rgba(58, 134, 255, .28); }
.ps-leiste-luecken { border-color: color-mix(in srgb, var(--neon-bernstein) 45%, var(--line)); }
.ps-leiste-luecken > summary { background: linear-gradient(120deg, #FF9E2C 0%, #FF3C9E 100%); box-shadow: 0 6px 20px rgba(255, 158, 44, .28); }
.ps-leiste-modelle { border-color: color-mix(in srgb, var(--neon-violett) 45%, var(--line)); }
.ps-leiste-modelle > summary { background: linear-gradient(120deg, #8B5CFF 0%, #FF3C9E 100%); box-shadow: 0 6px 20px rgba(139, 92, 255, .3); }
.ps-leiste > .ps-panel { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.ps-leiste .ps-status { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ps-leiste .ps-status > .ps-lauf-zeile { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-leiste .ps-lauf-zeile > .ps-switch-zeile { flex: 0 0 auto; align-self: center; }
.ps-leiste .ps-lauf-zeile > .ps-live-status { flex: 1 1 320px; min-width: 0; }
.ps-leiste .ps-status > .ps-kurzstatistik { width: 100%; }
.ps-speicherleiste small { color: var(--ink-soft); font-size: 12.5px; font-weight: 700; margin-right: auto; }
.ps-kurz-detail { display: block; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.ps-leerlauf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--neon-bernstein) 55%, var(--line));
  background: color-mix(in srgb, var(--neon-bernstein) 14%, var(--card)); }
.ps-leerlauf[hidden] { display: none; }
.ps-leerlauf > div { display: grid; gap: 2px; flex: 1 1 320px; }
.ps-leerlauf b { font-size: 13.5px; font-weight: 900; }
.ps-leerlauf span { color: var(--ink-soft); font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.ps-leerlauf button { flex: 0 0 auto; min-height: 40px; }
.ps-artstand { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ps-artstand > div { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }
.ps-artstand b { font-size: 12px; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.ps-artstand span { font-size: 13px; font-weight: 800; }
.ps-chathinweis { margin: 10px 0 12px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; }
.ps-chatwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ps-chatanbieter { min-width: 0; margin: 0; padding: 9px 10px 10px; border: 1px solid var(--line); border-radius: 11px; display: flex; flex-direction: column; }
.ps-chatanbieter legend { padding: 0 5px; color: var(--ink-soft); font-size: 10.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.ps-chatmodell { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.ps-chatmodell:hover { background: var(--primary-soft); }
.ps-chatmodell.aktiv { border-color: var(--primary); background: var(--primary-soft); }
.ps-chatmodell span { min-width: 0; display: grid; gap: 1px; }
.ps-chatmodell b { color: var(--ink); font-size: 12.5px; font-weight: 800; }
.ps-chatmodell small { color: var(--ink-soft); font-size: 10.5px; font-weight: 700; }
.ps-chatmodell input:disabled ~ span { opacity: .45; }
.np-auswahlbox { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.np-auswahlbox > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; touch-action: manipulation; }
.np-auswahlbox > summary > span { color: var(--primary-deep); font-size: 12.5px; font-weight: 850; }
.np-auswahlbox > summary > b { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 11.5px; font-weight: 850; font-variant-numeric: tabular-nums; }
.np-auswahlbox > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent); outline-offset: 2px; border-radius: 11px; }
.np-auswahlbox[open] > summary { border-bottom: 1px solid var(--line); }
.np-auswahlbox .np-filter { margin-top: 0; padding: 12px 13px 0; }
.np-auswahlbox .np-liste { margin: 0; padding: 0 13px 13px; }
.geraete-liste { margin-top: 10px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.geraete-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.geraete-zeile:last-child { border-bottom: 0; }
.geraete-text { min-width: 0; display: grid; gap: 2px; }
.geraete-text b { color: var(--ink); font-size: 13.5px; font-weight: 800; }
.geraete-text small { color: var(--ink-soft); font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.geraete-zeile button { flex: 0 0 auto; min-height: 40px; }
.fam-kikosten { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fam-kikosten.leer { background: var(--surface-2); color: var(--ink-soft); }
.ps-chatkosten { margin: 9px 0 0; padding-top: 8px; margin-top: auto; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.ps-chatkosten b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-chatzeitraum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px; padding: 10px 12px; border-radius: 11px; background: var(--bg); }
.ps-chatzeitraum label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-soft); font-size: 11.5px; font-weight: 800; }
.ps-chatzeitraum input { min-height: 44px; }
.ps-chatkosten-summe { margin-left: auto; color: var(--ink); font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ps-chatkosten-summe.warnung { color: var(--danger-deep); font-weight: 800; }
.ps-chatersatz { display: block; margin-top: 12px; }
.ps-chatersatz select { width: 100%; min-height: 44px; }
.ps-chatpreise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-chatspeichern { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.ps-chatspeicher-text { color: var(--success); font-size: 12px; font-weight: 850; }
.ps-chatspeicher-text.offen { color: var(--neon-bernstein); }
.ps-chatprobe { margin-top: 14px; }
.ps-chatprobe-hilfe { margin: 8px 0 0; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.ps-chatprobe-ergebnis { min-width: 0; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.ps-chatprobe-ergebnis:not(:empty) { margin-top: 11px; }
.ps-chatprobe-ergebnis.warnung { color: var(--danger-deep); }
.ps-probe-frage, .ps-probe-antwort { padding: 10px 12px; border-radius: 11px; background: var(--bg); }
.ps-probe-antwort { margin-top: 7px; border-left: 3px solid var(--neon-cyan); }
.ps-probe-frage span, .ps-probe-antwort span { display: block; color: var(--ink-soft);
  font-size: 10.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.ps-probe-frage b, .ps-probe-antwort b { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.ps-provider input.ps-preis-fehlt { border-color: var(--warning, #e0a400); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning, #e0a400) 18%, transparent); }
.ps-vergleich { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: var(--bg-2); }
.ps-vergleich-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ps-vergleich-kopf > div { display: grid; gap: 3px; }
.ps-vergleich-kopf b { color: var(--ink); font-size: 13px; }
.ps-vergleich-kopf span, .ps-vergleich > p { color: var(--ink-soft); font-size: 10.5px; line-height: 1.4; }
.ps-vergleich-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ps-vergleich-zeile { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 9px; }
.ps-vergleich-zeile > div { min-width: 0; display: grid; gap: 2px; }
.ps-vergleich-zeile b, .ps-vergleich-zeile strong { color: var(--ink); font-size: 11.5px; }
.ps-vergleich-zeile span, .ps-vergleich-zeile em { color: var(--ink-soft); font-size: 9.5px; font-style: normal; }
.ps-vergleich-zeile strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-vergleich-zeile em { grid-column: 2 / -1; }
.ps-providerpunkt { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.ps-vergleich-zeile[data-provider="deepseek"] .ps-providerpunkt { background: #22a447; }
.ps-vergleich-zeile[data-provider="openai"] .ps-providerpunkt { background: #dc3545; }
.ps-vergleich-zeile[data-provider="anthropic"] .ps-providerpunkt { background: #e5b700; }
.ps-vergleich > p { margin: 9px 0 0; }
.ps-save { position: sticky; bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 8px 25px rgba(18,55,82,.13); z-index: 2; }
.ps-save button { min-height: 44px; }
.ps-save span { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.ps-warnung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-warnung-text { min-width: 0; overflow-wrap: anywhere; }
.ps-warnung-loeschen { flex: 0 0 auto; min-height: 44px; border: 1px solid currentColor; border-radius: 9px; background: color-mix(in srgb, var(--card) 88%, transparent); color: inherit; padding: 8px 12px; font: 800 11px/1.25 inherit; cursor: pointer; }
.ps-warnung-loeschen:hover { background: var(--card); }
.ps-warnung-loeschen:focus-visible { outline: 3px solid color-mix(in srgb, currentColor 35%, transparent); outline-offset: 2px; }
.ps-warnung-loeschen:disabled { opacity: .55; cursor: wait; }
.ps-warnungen-historie { margin: -4px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.ps-warnungen-historie summary { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; color: var(--ink-soft); font-size: 11.5px; font-weight: 800; cursor: pointer; }
.ps-warnungen-historie summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; border-radius: 9px; }
.ps-warnungen-historie > div { display: grid; gap: 7px; padding: 0 12px 12px; }
.ps-warnungen-historie > div > div { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.ps-warnungen-historie small { color: var(--muted); font-size: 10px; }

@media (max-width: 900px) {

  .pv-bestand, .pv-quellen, .ks-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ps-provider-grid { grid-template-columns: 1fr; }
  .ps-vergleich-grid { grid-template-columns: 1fr; }
  .ps-warnung-zeile { align-items: stretch; flex-direction: column; }
  .ps-warnung-loeschen { width: 100%; }
}
@media (max-width: 560px) {
  .ps-grid, .ps-laender, .ps-preise { grid-template-columns: 1fr; }
  .pv-kopf { display: grid; gap: 8px; }
  .pv-bestand, .pv-quellen, .ks-zahlen { grid-template-columns: 1fr; }
  .ps-empfehlung-werte, .ps-bereich-stand { grid-template-columns: 1fr; }
  .produktion-direkt-kopf { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .produktion-direkt-aktionen { grid-column: 1 / -1; justify-content: space-between; width: 100%; }
  .ps-panel { padding: 13px; }
  .ps-status, .ps-modellkopf { align-items: flex-start; }
  .ps-switch { width: 100%; min-height: 44px; }
  .ps-switch-zeile { width: 100%; justify-content: space-between; }
  .ps-kurzstatistik { width: 100%; }
  .ps-kurzkarte select { min-height: 44px; }
  .ps-custom-grid { grid-template-columns: 1fr; }
  .ps-custom-grid label:nth-child(n+3) { grid-column: auto; }
  .ps-rollen-zusammenfassung { grid-template-columns: 1fr; }
  .ps-rollen-zusammenfassung i { justify-self: center; transform: rotate(90deg); }
  .ps-modelltabs { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  .ps-land { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .ps-land > span:last-child { justify-content: space-between; }
  .ps-land input { width: 88px; margin-left: auto; }
  .ps-empfehlung-uebernehmen, .ps-bereich-kopf button, .ps-landaktionen, .ps-landaktionen button { width: 100%; }
  .ps-landaktionen button { justify-content: center; }
  .ps-auftrag-aktion, .ps-auftrag-aktion button { width: 100%; }
  .ps-save { position: static; box-shadow: none; padding: 10px 0 0; background: transparent; }
  .ps-leiste-stand { margin-left: 0; white-space: normal; }
  .ps-lauf-zeile { flex-direction: column; }
}

.lw-tag { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; background: var(--card); overflow: hidden; }
.lw-tag-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; cursor: pointer; user-select: none; }
.lw-tag-kopf:hover { background: var(--bg-2, rgba(0,0,0,.02)); }
.lw-tag-kopf b { color: var(--primary-deep); text-transform: capitalize; }
.lw-tag-body { padding: 0 16px 14px; }
.lw-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.lw-item-fach { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; flex: 0 0 auto; }
.lw-item-topic { flex: 1; min-width: 120px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lw-item-zeit { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lw-item-badge { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.lw-item-badge.ok { background: var(--success-soft, #e3f5ea); color: var(--success-deep, #1c7a45); }
.lw-item-badge.no { background: var(--bg-2, #eef1f5); color: var(--ink-soft); }

.geb-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.geb-form input, .geb-form select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 16px; }
.geb-form #geb-name { flex: 1 1 180px; min-width: 140px; }
.geb-form #geb-tag { width: 74px; }
.geb-form #geb-jahr { width: 130px; }
.geb-liste { display: flex; flex-direction: column; gap: 4px; }
.geb-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); }
.geb-row:first-child { border-top: none; }
.geb-tag { flex: 0 0 auto; font-weight: 800; color: var(--primary-deep); font-variant-numeric: tabular-nums; min-width: 62px; }
.geb-name { flex: 1; font-weight: 600; font-size: 13.5px; }
.geb-wann { font-size: 12px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.geb-del { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 8px; display: inline-flex; }
.geb-del:hover { background: var(--danger-soft, #fdecec); color: var(--danger); }

.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; }

.top-goal {
  background: #fff; border-radius: 15px; margin: 3px 4px 7px; padding: 9px 13px 10px;
  box-shadow: 0 5px 14px rgba(14, 52, 78, .12);
}
.top-goal .tg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.top-goal .tg-title { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--primary-deep); }
.top-goal .tg-title svg { color: var(--primary); }
.top-goal .tg-count { font-size: 13px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.top-goal .tg-count b { font-size: 16px; }
.top-goal .tg-bar { height: 9px; background: var(--primary-soft); border-radius: 999px; overflow: hidden; }
.top-goal .tg-bar div {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.top-goal .tg-note { margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.top-goal.done { box-shadow: 0 5px 16px rgba(82, 182, 154, .3); }
.top-goal.done .tg-bar div { background: var(--success); }
.top-goal.done .tg-note { color: var(--success); font-weight: 700; }
.top-goal.done .tg-count { color: var(--success); }

.lade-spinner {
  width: 38px; height: 38px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--primary-soft); border-top-color: var(--primary);
  animation: ladeDreh .8s linear infinite;
}
@keyframes ladeDreh { to { transform: rotate(360deg); } }
.lade-balken { height: 12px; background: var(--primary-soft); border-radius: 999px; overflow: hidden; margin: 0 auto; max-width: 340px; }
.lade-balken-fill {
  height: 100%; border-radius: 999px; min-width: 6%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width .5s ease;
}
.lade-balken-fill.unbestimmt { width: 40%; animation: ladeLauf 1.3s ease-in-out infinite; }
@keyframes ladeLauf { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .lade-spinner, .lade-balken-fill.unbestimmt { animation: none; }
}

.main { margin-left: calc(var(--sidebar-w) + 16px); min-height: 100vh; min-height: 100dvh; }
.main-inner { max-width: none; padding: 14px 56px 110px 12px; }

.main-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 20px; }
.main-head.leer { padding: 0; min-height: 0; }
.nav-drawer .main-head.leer { padding: 6px 0 10px; }
.main-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-deep); }
.main-head .sub { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin-top: 1px; }
.main-titel { min-width: 0; }
.main-aktionen { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.main-head .spacer { flex: 1; }
.burger {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; padding: 0; color: var(--ink);
}
.burger-txt { display: none; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer; border: 2px solid var(--primary); font-size: 16px;
  flex-shrink: 0;
}
.backdrop { display: none; position: fixed; inset: 0; background: rgba(43, 45, 66, .4); z-index: 55; }
.pull-refresh {
  --pull-offset: 0px; --pull-turn: 0deg;
  display: none; position: fixed; z-index: 320; left: 50%;
  top: calc(8px + env(safe-area-inset-top));
  transform: translate(-50%, calc(-140% + var(--pull-offset)));
  align-items: center; gap: 8px; min-height: 44px; max-width: calc(100vw - 24px);
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-md);
  font-size: 13px; font-weight: 750; opacity: 0; pointer-events: none;
  transition: transform .18s ease-out, opacity .15s ease, border-color .15s ease;
}
.nav-drawer .pull-refresh { display: inline-flex; }
.pull-refresh.sichtbar { opacity: 1; }
.pull-refresh.zieht { transition: none; }
.pull-refresh.bereit { border-color: var(--primary); color: var(--primary-deep); }
.pull-refresh-icon { display: inline-flex; align-items: center; justify-content: center; transform: rotate(var(--pull-turn)); }
.pull-refresh.laedt .pull-refresh-icon { animation: pullDrehen .75s linear infinite; }
@keyframes pullDrehen { to { transform: rotate(360deg); } }
html.nav-drawer, html.nav-drawer body { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh { transition: none; }
  .pull-refresh.laedt .pull-refresh-icon { animation: none; }
}

.card {
  background: var(--card); border-radius: 20px;
  padding: 20px 22px; margin-bottom: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.card h2 { font-size: 16px; margin-bottom: 12px; color: var(--primary-deep); }
.muted { color: var(--ink-soft); font-size: 13px; }
.form-niveau { margin: -2px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  background: var(--primary-soft, rgba(37, 99, 235, .08)); border-left: 3px solid var(--primary);
  padding: 7px 10px; border-radius: 8px; }
.form-niveau b { color: var(--primary); font-weight: 700; }
.pflicht-marke { display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px;
  font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--danger-deep);
  background: var(--danger-soft); vertical-align: middle; }
.feld-hinweis { margin: -2px 0 7px; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--ink-soft); }
.platz-hinweis { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink); border-radius: 14px;
  padding: 11px 14px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.platz-hinweis b { font-weight: 800; }
.platz-hinweis.leise { color: var(--ink-soft); background: none; border: 1px dashed var(--line); }
select:invalid, select[aria-required="true"]:not(:valid) { border-color: var(--danger); }

.hero { display: flex; align-items: center; gap: 20px; }
.ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring .val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.ring .val small { font-weight: 400; font-size: 10px; color: var(--ink-soft); }
.hero .greet { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lime-soft); color: var(--primary-deep);
  border: 1px solid var(--lime);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700;
  margin-top: 8px;
}

.dash-box {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px 13px; min-height: 144px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dash-box:nth-child(5n+1), .kpi:nth-child(5n+1), #view > .card:nth-of-type(5n+1) { background-image: linear-gradient(rgba(26,117,159,.05), rgba(26,117,159,.05)); }
.dash-box:nth-child(5n+2), .kpi:nth-child(5n+2), #view > .card:nth-of-type(5n+2) { background-image: linear-gradient(rgba(52,160,164,.06), rgba(52,160,164,.06)); }
.dash-box:nth-child(5n+3), .kpi:nth-child(5n+3), #view > .card:nth-of-type(5n+3) { background-image: linear-gradient(rgba(82,182,154,.07), rgba(82,182,154,.07)); }
.dash-box:nth-child(5n+4), .kpi:nth-child(5n+4), #view > .card:nth-of-type(5n+4) { background-image: linear-gradient(rgba(233,166,59,.07), rgba(233,166,59,.07)); }
.dash-box:nth-child(5n),   .kpi:nth-child(5n),   #view > .card:nth-of-type(5n)   { background-image: linear-gradient(rgba(181,228,140,.11), rgba(181,228,140,.11)); }
.hp-wrap { background-image: linear-gradient(rgba(52,160,164,.05), rgba(52,160,164,.05)); }
.dash-box::before,
.pl-karte::before,
.pl-neu::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .78;
  animation: alma-neon-kreisen 13s linear infinite;
}
.dash-box:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #CBD8E4; }
.dash-box > .sub:last-child { margin-top: auto; padding-top: 10px; }
.dash-box > .mode-pill:last-child { margin-top: auto; align-self: flex-start; }
.dash-box > svg, .dash-box .ax-chart { margin-top: auto; }
.dash-alles .dash-box.lern-fokus {
  border: 2px solid var(--primary);
  background-image: linear-gradient(180deg, rgba(26,117,159,.13), rgba(82,182,154,.09));
  box-shadow: 0 8px 26px rgba(26,117,159,.20);
}
.dash-box.lern-fokus::before { opacity: 1; padding: 3px; }
.dash-box.lern-fokus > h3 { font-size: 16.5px; color: var(--primary-deep); }
.dash-box.lern-fokus .heute-wert b { color: var(--primary-deep); }
:root[data-theme="dark"] .dash-alles .dash-box.lern-fokus { background-image: linear-gradient(180deg, rgba(26,117,159,.30), rgba(82,182,154,.12)); }
.admin-dash-box { border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); }
.admin-dash-box::before { opacity: 1; }
.admin-dash-kicker { align-self: flex-start; margin: -2px 32px 8px 24px; color: var(--primary-deep); font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.admin-dash-hauptwert { margin: 12px 0 8px; color: var(--primary-deep); font-size: clamp(25px, 3vw, 34px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.admin-dash-hauptwert small { font-size: 12px; color: var(--ink-soft); font-weight: 800; letter-spacing: 0; }
.admin-dash-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.admin-dash-werte > span { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink-soft); font-size: 11.5px; line-height: 1.3; }
.admin-dash-werte b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.admin-dash-werte .warn { border-color: color-mix(in srgb, var(--sun) 55%, var(--line)); background: var(--sun-soft); }
.admin-dash-status { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 10px 0; padding: 5px 9px; border-radius: 999px; background: var(--sun-soft); color: #8a5a08; font-size: 11.5px; font-weight: 900; }
.admin-dash-status > span { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); flex: none; }
.admin-dash-status.aktiv { background: var(--success-soft); color: var(--success); }
.admin-dash-status.aktiv > span { background: var(--success); }
.admin-dash-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11.5px; }
.admin-dash-zeile b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.admin-dash-modell { margin-top: 8px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.admin-dash-link { margin-top: auto !important; }
.admin-dash-fehler { margin: 12px 0; line-height: 1.5; }
:root[data-theme="dark"] .admin-dash-box { background-image: linear-gradient(180deg, rgba(41, 111, 164, .22), rgba(23, 36, 58, .3)); border-color: #3f6380; }
:root[data-theme="dark"] .admin-dash-kicker, :root[data-theme="dark"] .admin-dash-hauptwert { color: #8dcdf5; }
.heute-kinder { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; margin-bottom: 2px; }
.hk-zeile { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); font-size: 14px; }
.hk-zeile.ok { border-color: rgba(82,182,154,.55); background: var(--success-soft, rgba(82,182,154,.14)); }
.hk-zeile.off { border-color: rgba(233,166,59,.5); background: var(--sun-soft, rgba(233,166,59,.14)); }
.hk-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.hk-name { font-weight: 700; color: var(--ink); }
.hk-status { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-zeile.ok .hk-status { color: var(--success); }
.hk-zeile.off .hk-status { color: #B9791C; }
:root[data-theme="dark"] .hk-zeile.ok { background: rgba(82,182,154,.15); }
:root[data-theme="dark"] .hk-zeile.off { background: rgba(233,166,59,.15); }
:root[data-theme="dark"] .hk-zeile.off .hk-status { color: #F0C04A; }
@media (max-width: 699px) {
  .dash-alles > .kid-hero { order: -3; }
  .dash-alles > .kf-card { order: -2; }
  .dash-alles > .dash-box.lern-fokus { order: -1; }
}

.ax-chart { margin-top: 8px; }
.ax-main { position: relative; min-width: 0; }
.ax-lbl {
  position: absolute; left: 5px;
  font-size: 10px; font-weight: 700; color: var(--ink-soft);
  background: rgba(255, 255, 255, .78); padding: 0 4px; border-radius: 4px;
  line-height: 1.45; pointer-events: none;
}
.ax-x {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: var(--ink-soft); padding-top: 3px;
}
.kk-legende { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; }
.kk-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.kk-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.kind-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }

.kid-hero{position:relative;overflow:hidden;border-radius:24px;padding:18px 24px;color:#fff;grid-column:1/-1;min-height:150px;box-sizing:border-box;
  background:linear-gradient(120deg,var(--primary-deep),var(--primary) 55%,var(--teal));box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:center}
.kh-blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;pointer-events:none;z-index:0}
.kh-blob.b1{width:180px;height:180px;right:-30px;top:-54px;background:radial-gradient(circle,rgba(181,228,140,.55),transparent 70%)}
.kh-blob.b2{width:150px;height:150px;right:120px;bottom:-72px;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 70%)}
.kh-formeln{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;color:#fff;filter:blur(1.6px);opacity:0;transition:opacity .35s ease;
  -webkit-mask:radial-gradient(210px circle at var(--fx,50%) var(--fy,42%),#000 0%,rgba(0,0,0,.25) 52%,transparent 74%);
  mask:radial-gradient(210px circle at var(--fx,50%) var(--fy,42%),#000 0%,rgba(0,0,0,.25) 52%,transparent 74%)}
.kid-hero:hover .kh-formeln{opacity:.92}
.kh-sterne{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s}
:root[data-theme="dark"] .kh-sterne{opacity:1}
.kh-stern{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.45);animation:sternFunkeln 3.2s ease-in-out infinite}
@keyframes sternFunkeln{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}
.kh-milchstrasse{position:absolute;left:-20%;top:22%;width:150%;height:130px;transform:rotate(-16deg);filter:blur(9px);
  background:linear-gradient(90deg,transparent,rgba(190,205,255,.05) 24%,rgba(210,218,255,.10) 50%,rgba(190,205,255,.05) 76%,transparent)}
.kh-schnuppe{position:absolute;width:92px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6));animation:schnuppe 7s ease-in infinite}
.kh-schnuppe.s1{top:9%;left:5%}
.kh-schnuppe.s2{top:24%;left:40%;animation-delay:3.4s}
@keyframes schnuppe{
  0%{transform:translate(0,0) rotate(26deg);opacity:0}
  4%{opacity:0}
  7%{opacity:1}
  17%{transform:translate(680px,332px) rotate(26deg);opacity:1}
  20%,100%{transform:translate(680px,332px) rotate(26deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.kh-stern{animation:none;opacity:.5}.kh-schnuppe{display:none}}
:root[data-theme="dark"] .kid-hero{background:radial-gradient(130% 150% at 82% -25%, #22316E 0%, #131E44 42%, #0A1124 100%)}
:root[data-theme="dark"] .kh-blob.b1{opacity:.3}
:root[data-theme="dark"] .kh-blob.b2{opacity:.2}
:root[data-theme="dark"] .kh-go{color:#184E77}
.kh-formeln span{position:absolute;font-weight:800;white-space:nowrap;opacity:.9;letter-spacing:.01em;transform-origin:center}
.kh-in{position:relative;z-index:2;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.eltern-hero{padding-bottom:42px}
.kh-stand{position:absolute;z-index:2;right:max(22px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));font-size:11.5px;font-weight:800;line-height:1.25;color:rgba(255,255,255,.88);white-space:nowrap;font-variant-numeric:tabular-nums}
.kh-meta{font-size:12px;font-weight:800;letter-spacing:.02em;opacity:.85;margin-bottom:7px}
.kh-txt{flex:1;min-width:220px}
.kh-name{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.04;color:#fff;text-wrap:balance}
.kh-schule{font-size:13px;font-weight:700;opacity:.8;margin-top:6px}
.kh-txt h2{font-size:17px;font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin-top:10px}
.kh-txt p{opacity:.9;font-weight:700;margin-top:4px;font-size:13px;line-height:1.45;max-width:52ch}
.kh-cta{margin-top:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kh-go{font-family:inherit;font-weight:900;font-size:15px;letter-spacing:-.01em;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 22px;border-radius:14px;
  background:linear-gradient(135deg,#9BFFEE 0%,#24D6B4 55%,#10BFA0 100%);color:#05322C;
  box-shadow:0 8px 20px rgba(16,191,160,.48),0 0 30px rgba(127,255,228,.45);
  animation:knopfPuls 2.8s ease-in-out infinite;transition:transform .16s ease,box-shadow .22s ease}
.kh-go:hover{transform:translateY(-1px)}
.kh-go svg{width:17px;height:17px;fill:none;stroke:currentColor}
@keyframes knopfPuls{
  0%,100%{box-shadow:0 8px 20px rgba(16,191,160,.42),0 0 26px rgba(127,255,228,.38)}
  50%{box-shadow:0 8px 24px rgba(16,191,160,.6),0 0 48px rgba(127,255,228,.72)}}
@media (prefers-reduced-motion:reduce){.kh-go{animation:none}}
.kh-streak{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13.5px;min-height:44px;
  color:#FFDCA8;background:rgba(240,166,60,.15);padding:11px 16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(240,166,60,.45),0 0 20px rgba(240,166,60,.26)}
.kh-streak svg{width:16px;height:16px}
.kh-ring{position:relative;width:118px;height:118px;flex:0 0 auto}
.kh-ring .kh-val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.kh-ring .kh-val b{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;display:block}
.kh-ring .kh-val b small{font-size:15px;opacity:.85;font-weight:800}
.kh-ring .kh-val small{font-size:11px;opacity:.85;font-weight:800;letter-spacing:.04em}
.kh-face{display:flex;flex:0 0 auto;cursor:pointer;margin:-20px -12px -24px}
.mood-svg{width:168px;height:168px;display:block;overflow:visible}
.kh-face-b4 .dreher{animation:moodSpin 5.4s cubic-bezier(.65,0,.35,1) infinite}
.kh-face-b4 .stimmung{animation:moodJoy 1.1s ease-in-out infinite;transform-origin:50% 70%}
.kh-face-b3 .stimmung{animation:moodHappy 2.1s ease-in-out infinite;transform-origin:50% 76%}
.kh-face-b2 .stimmung{animation:moodSway 3.4s ease-in-out infinite;transform-origin:50% 80%}
.kh-face-b1 .stimmung{animation:moodSad 4s ease-in-out infinite;transform-origin:50% 32%}
.kh-face-b0 .stimmung{animation:moodSob .85s ease-in-out infinite;transform-origin:50% 55%}
@keyframes moodJoy{
  0%,100%{transform:translateY(0) scale(1,1) rotate(-9deg)}
  20%{transform:translateY(-12px) scale(1.07,.93) rotate(8deg)}
  40%{transform:translateY(0) scale(.95,1.06) rotate(-6deg)}
  60%{transform:translateY(-6px) scale(1.03,.98) rotate(7deg)}
  80%{transform:translateY(0) scale(1,1) rotate(-4deg)}}
@keyframes moodSpin{0%,68%{transform:rotate(0)}84%{transform:rotate(195deg)}100%{transform:rotate(360deg)}}
@keyframes moodHappy{
  0%,100%{transform:translateY(0) rotate(-7deg) scale(1)}
  30%{transform:translateY(-8px) rotate(7deg) scale(1.03)}
  55%{transform:translateY(-1px) rotate(4deg) scale(1)}
  80%{transform:translateY(-4px) rotate(-3deg) scale(1.01)}}
@keyframes moodSway{0%,100%{transform:rotate(-4.5deg) translateY(0)}50%{transform:rotate(4.5deg) translateY(-2px)}}
@keyframes moodSad{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(4px) rotate(3deg)}}
@keyframes moodSob{0%,100%{transform:translateX(0) translateY(0) rotate(0)}20%{transform:translateX(-1.7px) translateY(1px) rotate(-1.7deg)}60%{transform:translateX(1.7px) translateY(0) rotate(1.7deg)}}
.atem{transform-box:fill-box;transform-origin:50% 88%;animation:atmen 4.1s ease-in-out infinite}
@keyframes atmen{0%,100%{transform:scale(1,1)}45%{transform:scale(1.022,1.03)}}
.schwebe{transform-box:fill-box;animation:schweben 3.8s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-4.5px)}}
.lichtpool{transform-box:fill-box;transform-origin:50% 50%;animation:lichtPuls 3.8s ease-in-out infinite}
@keyframes lichtPuls{0%,100%{transform:scale(1,1);opacity:1}50%{transform:scale(.86,.8);opacity:.72}}
.kh-face-b4 .lichtpool,.kh-face-b4 .schwebe{animation-duration:1.1s}
.kh-face-b0 .lichtpool,.kh-face-b0 .schwebe{animation-duration:5.2s}
.auge-lid{transform-box:fill-box;transform-origin:center;animation:blinzeln 5.4s infinite}
.auge-rechts .auge-lid{animation-delay:.04s}
@keyframes blinzeln{0%,40%,46%,51%,100%{transform:scaleY(1)}43%,48.5%{transform:scaleY(.06)}}
.auge-blick{transition:transform .38s cubic-bezier(.22,.9,.3,1);
  transform:translate(calc(var(--bx,0) * 1px),calc(var(--by,0) * 1px))}
.zug{transition:opacity .16s ease}
.zug-kitzel{opacity:0}
.kh-face:hover .zug-normal,.kh-face.kitzel .zug-normal{opacity:0}
.kh-face:hover .zug-kitzel,.kh-face.kitzel .zug-kitzel{opacity:1}
.kh-face:hover .traenen,.kh-face.kitzel .traenen{opacity:0;transition:opacity .2s ease}
.kh-face:hover .mood-svg,.kh-face.kitzel .mood-svg{animation:kitzelWackeln .19s ease-in-out infinite}
@keyframes kitzelWackeln{
  0%,100%{transform:rotate(-5.5deg) translateY(0) scale(1.03)}
  50%{transform:rotate(5.5deg) translateY(-2.5px) scale(1.05)}}
.kitzel-lachfalte{opacity:0}
.kh-face:hover .kitzel-lachfalte,.kh-face.kitzel .kitzel-lachfalte{animation:lachfalten .5s ease-out infinite}
@keyframes lachfalten{0%{opacity:0;transform:scale(.6)}35%{opacity:.85}100%{opacity:0;transform:scale(1.35)}}
.traenen{transition:opacity .25s ease}
.traene{transform-box:fill-box;transform-origin:50% 0%}
.nass{opacity:0}
.kh-face-b0 .traene,.kh-face-b1 .traene{animation:traeneGewischt 6.4s cubic-bezier(.45,.05,.75,.6) infinite}
.kh-face-b0 .nass,.kh-face-b1 .nass{animation:nassGewischt 6.4s ease-in-out infinite}
@keyframes traeneGewischt{
  0%{transform:translateY(0) scale(.18,.18);opacity:0}
  5%{transform:translateY(1px) scale(.55,.5);opacity:.85}
  11%{transform:translateY(3px) scale(1,.95);opacity:1}
  15%{transform:translateY(4.5px) scale(.94,1.12);opacity:1}
  20%{transform:translateY(9px) scale(.86,1.3);opacity:1}
  40%{transform:translateY(17px) scale(.84,1.34);opacity:1}
  47%{transform:translateY(18px) scale(.86,1.2);opacity:1}
  51%{transform:translateY(18px) scale(.45,.4);opacity:0}
  100%{transform:translateY(18px) scale(.45,.4);opacity:0}}
@keyframes nassGewischt{0%,4%{opacity:0}14%{opacity:.5}44%{opacity:.38}51%,100%{opacity:0}}
.fluegel{transform-box:fill-box;transform-origin:50% 12%;animation:fluegelPendeln 3.6s ease-in-out infinite}
.fluegel-rechts{animation-delay:-1.8s}
@keyframes fluegelPendeln{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(0,-2px) rotate(3deg)}}
.kh-face-b3 .fluegel-links,.kh-face-b4 .fluegel-links{animation:fluegelTanzL 1.05s ease-in-out infinite}
.kh-face-b3 .fluegel-rechts,.kh-face-b4 .fluegel-rechts{animation:fluegelTanzR 1.05s ease-in-out infinite}
.kh-face-b3 .fluegel{animation-duration:1.6s}
@keyframes fluegelTanzL{
  0%,100%{transform:translate(0,0) rotate(-6deg)}
  25%{transform:translate(-4px,-14px) rotate(-40deg)}
  50%{transform:translate(-1px,-2px) rotate(-8deg)}
  75%{transform:translate(-6px,-18px) rotate(-52deg)}}
@keyframes fluegelTanzR{
  0%,100%{transform:translate(0,-16px) rotate(44deg)}
  25%{transform:translate(1px,-3px) rotate(7deg)}
  50%{transform:translate(4px,-17px) rotate(48deg)}
  75%{transform:translate(2px,-1px) rotate(5deg)}}
.kh-face-b0 .fluegel-links,.kh-face-b1 .fluegel-links{animation:fluegelWischtL 6.4s ease-in-out infinite}
.kh-face-b0 .fluegel-rechts{animation:fluegelWischtR 6.4s ease-in-out infinite}
@keyframes fluegelWischtL{
  0%,38%,100%{transform:translate(0,0) rotate(-3deg)}
  43%{transform:translate(9px,-8px) rotate(-16deg)}
  47%{transform:translate(19px,-14px) rotate(-26deg)}
  51%{transform:translate(21px,-22px) rotate(-36deg)}
  55%{transform:translate(17px,-13px) rotate(-22deg)}
  59%{transform:translate(21px,-21px) rotate(-33deg)}
  66%{transform:translate(8px,-5px) rotate(-12deg)}}
@keyframes fluegelWischtR{
  0%,38%,100%{transform:translate(0,0) rotate(3deg)}
  43%{transform:translate(-9px,-8px) rotate(16deg)}
  47%{transform:translate(-19px,-14px) rotate(26deg)}
  51%{transform:translate(-21px,-22px) rotate(36deg)}
  55%{transform:translate(-17px,-13px) rotate(22deg)}
  59%{transform:translate(-21px,-21px) rotate(33deg)}
  66%{transform:translate(-8px,-5px) rotate(12deg)}}
.kh-face:hover .fluegel-links,.kh-face.kitzel .fluegel-links{animation:fluegelZappelL .21s ease-in-out infinite}
.kh-face:hover .fluegel-rechts,.kh-face.kitzel .fluegel-rechts{animation:fluegelZappelR .21s ease-in-out infinite}
@keyframes fluegelZappelL{0%,100%{transform:translate(-3px,-26px) rotate(-56deg)}50%{transform:translate(-7px,-32px) rotate(-76deg)}}
@keyframes fluegelZappelR{0%,100%{transform:translate(3px,-26px) rotate(56deg)}50%{transform:translate(7px,-32px) rotate(76deg)}}
.funke{transform-box:fill-box;transform-origin:center;opacity:0;animation:funkeln 1.6s ease-out infinite}
.funke.f2{animation-delay:.32s}.funke.f3{animation-delay:.64s}
.funke.f4{animation-delay:.96s}.funke.f5{animation-delay:1.28s}
@keyframes funkeln{
  0%{opacity:0;transform:scale(.2) rotate(0deg)}
  25%{opacity:1;transform:scale(1.15) rotate(45deg)}
  60%{opacity:.8;transform:scale(.9) rotate(90deg)}
  100%{opacity:0;transform:scale(.35) rotate(140deg)}}
@media (prefers-reduced-motion:reduce){.kh-face,.kh-face *,.mood-svg{animation:none !important}}
@media (max-width:900px){
  .kh-cta{flex-wrap:nowrap;gap:9px}
  .kh-go{padding:13px 17px;font-size:14.5px}
  .kh-streak{padding:11px 13px;font-size:13px;white-space:nowrap}
  .kh-streak-lang{display:none}}
@media (max-width:620px){
  .kid-hero{padding:18px 18px 20px}
  .kh-in{flex-direction:column-reverse;align-items:flex-start;gap:16px}
  .kh-txt{width:100%}
  .kh-face{margin:-20px -16px -24px -26px}
  .kh-cta{width:100%;justify-content:space-between;gap:12px}
  .kh-name{font-size:28px}
  .kh-stand{right:max(16px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));font-size:11px}}
.range-tabs,.hp-tabs{display:inline-flex;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.range-tabs{margin:10px 0 6px}
.hp-tabs{margin-top:6px}
.range-tab,.hp-tab{font-family:inherit;font-weight:700;font-size:11.5px;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:5px 12px;border-radius:999px;transition:.14s;white-space:nowrap}
.range-tab:hover,.hp-tab:hover{color:var(--ink)}
.range-tab.an,.hp-tab.an{background:var(--card);color:var(--primary);box-shadow:var(--shadow-sm)}
.kurve-chart{min-height:84px}
.heute-wert{display:flex;flex-direction:column;justify-content:center;min-height:84px;padding:4px 2px}
.heute-wert b{font-size:46px;font-weight:800;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.heute-wert b small{font-size:20px;font-weight:800;opacity:.65;margin-left:2px}
.heute-wert span{font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:7px}
.hp-tagname{font-size:12px;font-weight:800;color:var(--ink-soft);margin:12px 0 7px}
.kind-kuerzel{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:11px;font-weight:800;flex-shrink:0;text-transform:uppercase;letter-spacing:.02em}
.ktag-liste{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.ktag-row{display:flex;align-items:center;gap:10px}
.ktag-name{font-weight:700;font-size:14px;color:var(--ink)}
.ktag-status{margin-left:auto;font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:999px}
.ktag-status.ok{background:var(--success-soft);color:#184E77}
.ktag-status.dabei{background:var(--sun-soft,rgba(233,166,59,.18));color:#9A6B12}
.ktag-status.offen{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}
.noten-hero{position:relative;overflow:hidden;border-top:4px solid var(--primary);padding-top:18px}
.noten-hero::before{content:'';position:absolute;inset:0 0 auto;height:92px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,transparent),transparent 65%);pointer-events:none}
.noten-hero>*{position:relative}
.noten-hero-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.noten-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:4px}
.noten-hero .noten-h2{font-size:clamp(20px,2vw,27px);font-weight:900;letter-spacing:-.025em;margin:0;color:var(--ink)}
.noten-ansicht{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:min(330px,46%);padding:4px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:var(--shadow-sm)}
.noten-ansicht-btn{min-height:44px;padding:8px 15px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:900;cursor:pointer;transition:background .16s,color .16s,border-color .16s,box-shadow .16s}
.noten-ansicht-btn:hover{color:var(--ink);background:var(--card)}
.noten-ansicht-btn.an{color:#fff;border-color:var(--primary);background:linear-gradient(180deg,var(--primary),var(--primary-deep));box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 28%,transparent)}
.noten-ansicht-btn:focus-visible,.noten-chip:focus-visible,.noten-punkt:focus-visible,.noten-farbe input:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 42%,transparent);outline-offset:2px}
.noten-quelle{display:flex;align-items:flex-start;gap:11px;margin:10px 0 18px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:14px;background:var(--bg)}
.noten-quelle.alma{border-left-color:var(--success)}
.noten-quelle b{white-space:nowrap;color:var(--ink);font-size:13px}
.noten-quelle span{color:var(--ink-soft);font-size:13px;line-height:1.45}
.noten-chart-wrap{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:300px 34px;column-gap:9px;margin-top:8px;padding:14px 10px 4px 0;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 76%,transparent),color-mix(in srgb,var(--card) 92%,transparent));border:1px solid var(--line)}
.noten-y-achse{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:0 2px;color:var(--ink-soft);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}
.noten-plot{grid-column:2;grid-row:1;position:relative;min-width:0;height:300px}
.noten-gitter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.noten-gitter i{display:block;width:100%;height:1px;border-top:1px dashed color-mix(in srgb,var(--line) 82%,transparent)}
.noten-gitter i:last-child{border-top-style:solid}
.noten-chart-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.noten-line{filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--primary) 20%,transparent))}
.noten-punkt{position:absolute;z-index:2;width:44px;height:44px;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer;touch-action:manipulation}
.noten-punkt::before{content:'';position:absolute;inset:10px;border-radius:50%;background:var(--card);border:3px solid var(--punkt-farbe);box-shadow:0 3px 9px color-mix(in srgb,var(--punkt-farbe) 38%,transparent)}
.noten-punkt span{position:absolute;inset:16px;border-radius:50%;background:var(--punkt-farbe)}
.noten-punkt.letzter::after{content:'';position:absolute;inset:5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--punkt-farbe) 34%,transparent)}
.noten-punkt:hover::before,.noten-punkt:focus-visible::before{transform:scale(1.14)}
.noten-x-achse{grid-column:2;grid-row:2;position:relative;min-width:0;color:var(--ink-soft);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.noten-x-achse span{position:absolute;top:10px;transform:translateX(-50%);white-space:nowrap}
.noten-x-achse span:first-child:not(:only-child){transform:none}
.noten-x-achse span:last-child:not(:only-child){transform:translateX(-100%)}
.noten-chart-leer,.noten-leerzustand{margin:16px 0 4px;padding:22px;border:1px dashed var(--line);border-radius:16px;background:var(--bg);color:var(--ink-soft);text-align:center}
.noten-leerzustand{display:flex;flex-direction:column;gap:5px}
.noten-leerzustand b{color:var(--ink);font-size:16px}
.noten-tip{position:fixed;z-index:10000;background:#182033;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:700;line-height:1.42;box-shadow:0 12px 28px rgba(0,0,0,.28);pointer-events:none;white-space:nowrap;display:flex;flex-direction:column}
.noten-tip b{font-size:13px}.noten-tip span{opacity:.84;font-weight:700}.noten-tip.hidden{display:none}
.noten-fachsteuerung{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.noten-fachsteuerung-item{display:flex;align-items:center;gap:5px;padding:3px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.noten-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid transparent;border-radius:11px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-sm)}
.noten-chip:hover{border-color:var(--primary)}
.noten-chip.aus{opacity:.52;background:transparent;box-shadow:none}.noten-chip.aus .kk-dot{filter:grayscale(1)}
.noten-farbe{display:block;width:44px;height:44px;border-radius:11px}
.noten-farbe input{width:44px;height:44px;padding:5px;border:0;border-radius:11px;background:transparent;cursor:pointer}
.noten-farbe input::-webkit-color-swatch-wrapper{padding:0}.noten-farbe input::-webkit-color-swatch{border:2px solid var(--card);border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.hilfe-karte{border-color:var(--sun)}
.hilfe-liste{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.hilfe-fach-box{border:1.5px solid var(--line);border-left-width:5px;border-radius:14px;padding:12px 14px;background:var(--card);box-shadow:var(--shadow-sm);min-width:148px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hfb-kopf{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14.5px;color:var(--ink)}
.hfb-schnitt{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.hfb-btn{padding:7px 15px;font-size:13px;margin-top:2px}
.stark-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.stark-chip{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:7px 13px;box-shadow:var(--shadow-sm)}
.stark-chip b{color:var(--success)}
.sn-warnung{display:flex;flex-direction:column;gap:4px;margin:12px 0 4px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--sun) 64%,var(--line));border-left:4px solid var(--sun);border-radius:14px;background:color-mix(in srgb,var(--sun-soft,rgba(233,166,59,.18)) 74%,var(--card));color:var(--ink)}
.sn-warnung b{font-size:14px}.sn-warnung span{font-size:13px;line-height:1.45;color:var(--ink-soft)}
.sn-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:14px;align-items:end}
.sn-feld{display:flex;flex-direction:column}
.sn-feld label{margin:0 0 5px}
.sn-form>.primary{grid-column:1/-1;justify-self:start}
@media (max-width:560px){.sn-form{grid-template-columns:1fr}}
.nr-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.nr-karte {
  --neon: var(--primary); --neon-tief: var(--primary-deep);
  border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  padding: 14px 14px 16px; text-align: center; box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease;
}
.nr-karte:hover { border-color: color-mix(in srgb, var(--neon) 55%, var(--line)); transform: translateY(-3px); }
.nr-karte.band-gut { --neon: #22F5A8; --neon-tief: #06D6A0; }
.nr-karte.band-mittel { --neon: #FFD152; --neon-tief: #E9A63B; }
.nr-karte.band-schwach { --neon: #FF6B8B; --neon-tief: #EF233C; }
.nr-ring { width: 132px; height: 132px; margin: -8px auto 6px; position: relative; display: block; }
.nr-ring svg { transform: rotate(-90deg); overflow: visible; }
.nr-bahn { stroke: color-mix(in srgb, var(--ink) 12%, var(--wand)); }
.nr-fuell {
  stroke: var(--neon); stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 9px var(--neon-tief));
}
.nr-wert { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.nr-zahl { font: 900 30px/1 inherit; color: var(--ink); }
.nr-klein { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; }
.nr-fach { font-size: 15px; font-weight: 900; color: var(--ink); }
.nr-zeile { display: flex; justify-content: center; gap: 10px; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: 6px; }
.nr-trend.hoch { color: #06D6A0; }
.nr-trend.runter { color: var(--danger); }
.nr-karte.wartet { border-style: dashed; }
.nr-karte.wartet .nr-fuell { stroke: color-mix(in srgb, var(--ink) 22%, var(--wand)); filter: none; }
.nr-karte.wartet .nr-zahl, .nr-karte.wartet .nr-fach { color: var(--ink-soft); }
.nr-karte.erklaert {
  --neon: #29DCFF; --neon-tief: #00A9E0;
  border-color: color-mix(in srgb, #29DCFF 45%, var(--line));
  background: color-mix(in srgb, #29DCFF 6%, var(--card));
}
.nr-karte.erklaert .nr-fuell { stroke-dasharray: 6 10; }
.nr-erklaer { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; }

.sn-fach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:12px}
.sn-kachel{border-radius:16px;padding:14px 16px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);border-left-width:5px}
.sn-kachel.band-gut,.sn-kachel.band-mittel,.sn-kachel.band-schwach{border-left-color:var(--fach-farbe)}
.sn-k-kopf{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;color:var(--ink)}
.sn-k-note{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sn-k-sub{font-size:12px;color:var(--ink-soft)}
.sn-liste{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.sn-eintrag{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:var(--bg)}
.sn-e-note{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;font-weight:800;font-size:15px;flex-shrink:0;font-variant-numeric:tabular-nums}
.sn-e-fach{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ink);min-width:120px}
.sn-e-titel{flex:1;display:flex;flex-direction:column;font-size:13px;color:var(--ink-soft)}
.sn-e-titel b{font-size:12px;color:var(--primary)}
.sn-e-datum{font-size:13px;color:var(--ink-soft);font-weight:600}
.sn-del{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--ink-soft);padding:4px;border-radius:8px;display:inline-flex}
.sn-del:hover{color:var(--danger);background:var(--danger-soft)}
.sn-freigaben{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.sn-freigabe{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px 14px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:15px;background:var(--bg)}
.sn-freigabe.abgelehnt{border-left-color:var(--danger);opacity:.78}
.sn-freigabe>div:first-child{display:flex;flex-direction:column;gap:2px}.sn-freigabe>div:first-child b{font-size:14px;color:var(--ink)}.sn-freigabe>div:first-child span{font-size:12.5px;color:var(--ink-soft)}
.sn-status{font-size:12px;font-weight:900;color:var(--sun);text-align:right}.sn-freigabe.abgelehnt .sn-status{color:var(--danger)}
.sn-freigabe-aktionen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.sn-freigabe-aktionen button{min-height:44px}
.sn-dash-meldung{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:5px solid var(--sun);background:color-mix(in srgb,var(--sun-soft,rgba(233,166,59,.18)) 60%,var(--card))}
.sn-dash-meldung>div{display:flex;flex-direction:column;gap:3px}.sn-dash-meldung>div b{font-size:16px;color:var(--ink)}.sn-dash-meldung>div span{font-size:13px;color:var(--ink-soft);line-height:1.45}.sn-dash-meldung>.primary{flex:0 0 auto;min-height:44px}
@media (max-width:760px){
  .noten-hero-kopf{flex-direction:column}.noten-ansicht{width:100%;min-width:0}
  .noten-chart-wrap{grid-template-rows:240px 34px}.noten-plot{height:240px}
  .noten-quelle{flex-direction:column;gap:4px}.noten-quelle b{white-space:normal}
  .sn-eintrag{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:6px 10px}.sn-e-note{grid-row:1/3}.sn-e-fach{min-width:0}.sn-e-titel{grid-column:2}.sn-e-datum{grid-column:3;grid-row:1}.sn-del{grid-column:3;grid-row:2;justify-self:end}
  .sn-freigabe{grid-template-columns:1fr}.sn-status{text-align:left}.sn-freigabe-aktionen{grid-column:1}.sn-dash-meldung{align-items:stretch;flex-direction:column}.sn-dash-meldung>.primary{width:100%}
}
@media (max-width:440px){
  .noten-chart-wrap{grid-template-columns:24px minmax(0,1fr);grid-template-rows:215px 32px;column-gap:6px;padding-right:6px}.noten-plot{height:215px}.noten-y-achse{font-size:11px}.noten-x-achse{font-size:10px}
  .noten-fachsteuerung-item{width:100%}.noten-chip{flex:1;justify-content:flex-start}.sn-form{grid-template-columns:1fr}.sn-freigabe-aktionen button{width:100%}
}
.dash-box h3 { font-size: 15.5px; margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; color: var(--ink); }
.dash-box-title { min-width: 0; flex: 1 1 150px; overflow-wrap: anywhere; }
.dash-box .sub { font-size: 12px; color: var(--ink-soft); }
.kind-faecher-liste { margin-top: 12px; min-width: 0; }
.kind-faecher-switch {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: 10px;
  padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.kind-faecher-kind {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 0 1 96px; min-width: 64px; max-width: 96px; min-height: 44px; padding: 7px 9px;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; touch-action: manipulation; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.kind-faecher-kind:hover { color: var(--ink); background: var(--card); }
.kind-faecher-kind:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
.kind-faecher-kind.an {
  border-color: var(--primary); background: var(--card); color: var(--primary-deep);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}
.kind-faecher-kind .kk-dot { flex: 0 0 auto; }
.noten-kind-switch {
  display: grid; grid-template-columns: repeat(var(--noten-kind-count), minmax(0, 1fr));
  gap: 7px; margin: 10px 0 11px;
}
.noten-kind-btn {
  min-width: 0; min-height: 44px; padding: 7px 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  overflow: hidden; touch-action: manipulation;
}
.noten-kind-btn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noten-kind-btn:hover { border-color: var(--primary); color: var(--ink); }
.noten-kind-btn.an { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 18%, transparent); }
.noten-kind-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
.noten-2col.noten-einzel { grid-template-columns: minmax(0, 1fr); }
.kind-faecher-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.kind-faecher-chips .kind-fach-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--fachfarbe) 72%, var(--line)); border-radius: 999px;
  background: var(--fachfarbe); color: var(--fachtext); font-size: 12px; font-weight: 800; line-height: 1.2;
}
.kinder-faecher-box .mode-pill { margin-top: 14px !important; }
.dash-box .status-pill {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; margin-left: auto;
}
.status-pill.gut { background: var(--success-soft); color: #184E77; }
.status-pill.schlecht { background: var(--danger-soft); color: #D90429; }
@media (max-width: 560px) {
  .dash-box h3 { gap: 6px; }
  .dash-box h3 .status-pill { flex-basis: auto; margin-left: 0; }
  .kind-faecher-switch { gap: 5px; }
  .kind-faecher-kind { flex-basis: 88px; max-width: 88px; padding-inline: 8px; }
  .kind-faecher-chips .kind-fach-pill { flex: 1 1 calc(50% - 4px); text-align: center; }
}
.facts-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.facts-list p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.termin-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 0; }
.termin-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.chip-timer {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700;
  flex-shrink: 0; color: var(--ink);
}
.chip-timer { box-shadow: var(--shadow-sm); }
.chip-timer.done { background: var(--success-soft); border-color: var(--success); color: var(--primary-deep); }

.subject-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 10px;
}
.fach-box {
  border: none; border-radius: 12px; min-height: 74px;
  padding: 10px 12px; font-family: inherit; font-weight: 700; font-size: 13.5px;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px;
  transition: transform .1s, filter .1s;
}
.fach-box:hover { transform: translateY(-2px); filter: brightness(1.05); }
.fach-box-ro { cursor: default; }
.fach-box-ro:hover { transform: none; filter: none; }

.g-faecher .subject-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.g-faecher .fach-box { min-height: 66px; padding: 9px 11px; }
.g-faecher .fach-box { min-width: 0; }
.g-faecher .fach-box span { overflow-wrap: anywhere; }

.dash-alles {
  display: grid; grid-template-columns: 1fr;
  gap: 12px; grid-auto-flow: dense; margin-bottom: 14px;
}
.dash-alles > * { margin-bottom: 0; min-width: 0; height: 100%; }
.dash-alles .hp-wrap { flex-direction: column; align-items: flex-start; }
.dash-alles .ferien-banner { margin-bottom: 0; }
@media (min-width: 700px) {
  .dash-alles { grid-template-columns: repeat(2, 1fr); }
  .g-faecher { grid-column: span 2; }
}
@media (min-width: 1150px) {
  .dash-alles { grid-template-columns: repeat(3, 1fr); }
  .g-faecher { grid-column: span 2; }
}
@media (min-width: 1500px) {
  .dash-alles { grid-template-columns: repeat(4, 1fr); }
  .g-faecher { grid-column: span 2; }
}

.nav-item .chev { margin-left: auto; color: var(--ink-soft); transition: transform .15s; display: flex; }
.nav-item .chev.auf { transform: rotate(180deg); }
.nav-unter { padding-left: 14px; }
.nav-unter .nav-item { padding: 3px 8px; font-size: 12.5px; gap: 8px; }
.nav-unter .nav-item .ico { width: 28px; height: 28px; }

.msg-aktionen { margin-top: 8px; }
.lw-save {
  border: 1px solid var(--line); background: var(--bg); border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}
.lw-save:hover { border-color: var(--primary); color: var(--primary-deep); }
.lw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

.rechnung {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 24px; font-weight: 700; display: inline-block;
  background: var(--bg); border-radius: 12px; padding: 12px 20px;
}
.r-zeile { display: flex; justify-content: space-between; gap: 18px; line-height: 1.5; }
.r-op { min-width: 1ch; color: var(--primary); }
.r-zahl { text-align: right; letter-spacing: 3px; }
.r-strich { border-bottom: 3.5px double var(--ink); margin: 5px 0; }
.r-ergebnis .r-zahl { color: var(--ink-soft); }

.rechnung-i {
  display: inline-block; background: var(--bg); border-radius: 14px;
  padding: 16px 22px; margin: 4px 0;
}
.r-grid-row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.r-op-cell {
  width: 30px; text-align: center; font-size: 30px; font-weight: 800; color: var(--primary);
  font-family: ui-monospace, Menlo, monospace; flex-shrink: 0;
}
.r-cell { width: 46px; display: flex; align-items: center; justify-content: center; }
.r-ziffer {
  font-size: 34px; font-weight: 800; color: var(--ink);
  font-family: ui-monospace, Menlo, monospace; line-height: 1.1;
}
.r-carry {
  width: 26px; height: 26px; padding: 0; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--danger-deep);
  border: 1px dashed var(--ink-soft); border-radius: 6px; background: transparent;
}
.r-carry-row { margin-bottom: 2px; }
.r-loesung {
  width: 44px; height: 52px; padding: 0; text-align: center;
  font-size: 30px; font-weight: 800; color: var(--primary-deep);
  font-family: ui-monospace, Menlo, monospace;
  border: 2px solid var(--border); border-radius: 8px; background: #fff;
}
.r-loesung:focus { border-color: var(--primary); outline: none; }
.r-loesung.ok { border-color: var(--success); background: var(--success-soft); }
.r-loesung.no { border-color: var(--danger); background: var(--danger-soft); }
.r-cell.r-komma-cell {
  width: 18px; align-items: flex-end;
  font-size: 34px; font-weight: 800; color: var(--ink);
  font-family: ui-monospace, Menlo, monospace; line-height: 0.7;
}
.rechnung-h {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px 20px; margin: 8px 0 14px;
}
.rh-num {
  font-size: 46px; font-weight: 800; color: var(--ink); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rh-op {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  font-size: 27px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  box-shadow: 0 7px 16px rgba(26,117,159,.30);
}
.rh-eq { font-size: 40px; font-weight: 800; color: var(--ink-soft); }
.rechnung-h input {
  height: 74px; padding: 0 8px; text-align: center;
  font-size: 33px; font-weight: 800; color: var(--primary-deep); font-variant-numeric: tabular-nums;
  border: 2.5px dashed rgba(26,117,159,.42); border-radius: 18px; background: var(--card);
  transition: border-color .15s ease, background .15s ease;
}
.rechnung-h input.rh-loesung { width: 132px; flex: 0 0 132px; }
.rechnung-h input:focus { border-style: solid; border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(26,117,159,.14); }
.rechnung-h input.ok { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--primary-deep); }
.rechnung-h input.no { border-style: solid; border-color: var(--danger); background: var(--danger-soft); }
.rh-rest-lbl { font-size: 20px; font-weight: 800; color: var(--ink-soft); }
.rechnung-h .rh-rest { width: 86px; flex: 0 0 86px; }
.rh-merk { margin: 14px 0 4px; }
.rh-merk-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); margin-bottom: 6px;
}
.rh-merk-lbl .ic { flex: 0 0 auto; opacity: .8; }
.rh-merk-feld {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 48px;
  padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--surface-2, rgba(0,0,0,.02));
  font-family: inherit; font-size: 17px; line-height: 1.5; color: var(--ink);
}
.rh-merk-feld::placeholder { color: var(--muted); opacity: .7; font-size: 14px; }
.rh-merk-feld:focus { outline: none; border-style: solid; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(26,117,159,.12); }
:root[data-theme="dark"] .rh-merk-feld { background: rgba(255,255,255,.04); }
.rw-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rw-info {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: 1px solid transparent; border-radius: 999px;
  padding: 7px 13px 7px 10px;
}
.rw-info:hover { border-color: var(--primary); }
.rw-info.offen { background: var(--primary); color: #fff; }
.rw-info .ic { flex-shrink: 0; }
.rechenweg {
  margin-top: 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.rw-titel { font-size: 13px; font-weight: 700; color: var(--primary-deep); margin-bottom: 8px; }
.rw-schritt {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink); padding: 3px 0;
}
.rw-schritt:first-child { color: var(--ink-soft); }
.rw-nr {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rw-einstieg { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 10px; }
.rw-start {
  min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1.5px solid var(--primary); border-radius:999px; background:var(--primary-soft);
  color:var(--primary-deep); font-weight:800; font-size:14px;
}
.rw-start:hover,.rw-start.offen { background:var(--primary); color:#fff; }
.rw-einstieg-text { color:var(--muted); font-size:12px; }
.rw-werkstatt {
  margin:10px 0 14px; padding:16px; border:1.5px solid color-mix(in srgb,var(--primary) 42%,var(--line));
  border-radius:16px; background:color-mix(in srgb,var(--primary-soft) 42%,var(--card));
}
.rw-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.rw-kopf > div { display:flex; flex-direction:column; gap:3px; }
.rw-einleitung { color:var(--ink-soft); font-size:12px; line-height:1.45; max-width:760px; }
.rw-fortschritt { flex:0 0 auto; color:var(--primary-deep); font-size:12px; font-weight:800; }
.rw-balken { height:7px; margin:11px 0 12px; overflow:hidden; border-radius:999px; background:var(--line); }
.rw-balken i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--success)); transition:width .25s ease; }
.rw-erledigt { display:grid; gap:5px; margin-bottom:8px; }
.rw-erledigt-zeile {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:6px 9px; border-radius:9px;
  background:var(--success-soft); color:var(--ink-soft); font-size:11.5px;
}
.rw-erledigt-zeile > span:first-child { display:grid; place-items:center; color:var(--success); }
.rw-schrittkarte { padding:15px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.rw-schritt-titel { color:var(--primary-deep); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.rw-frage { margin:6px 0 13px; color:var(--ink); font-size:16px; font-weight:700; line-height:1.45; }
.rw-felder { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }
.rw-feld { display:flex; flex-direction:column; gap:5px; color:var(--ink-soft); font-size:11px; font-weight:700; }
.rw-feld.breit { grid-column:span 2; }
.rw-felder.nummeriert { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.rw-felder.nummeriert .rw-feld {
  padding:10px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));
  border-radius:12px; background:color-mix(in srgb,var(--primary-soft) 24%,var(--card));
}
.rw-felder.nummeriert .rw-feld-kopf label { font-size:12px; line-height:1.35; }
.rw-feld.automatisch input {
  border-style:dashed; background:color-mix(in srgb,var(--primary-soft) 38%,var(--bg));
  color:var(--primary-deep); cursor:default; font-variant-numeric:tabular-nums;
}
.rw-auto-text { margin-top:1px; color:var(--primary-deep); font-size:10px; font-weight:800; }
.rw-feld-kopf { min-height:24px; display:flex; align-items:center; justify-content:space-between; gap:7px; }
.rw-feld-kopf label { min-width:0; flex:1; margin:0; color:inherit; font-size:inherit; font-weight:inherit; line-height:1.3; }
.rw-feld-nummer {
  width:21px; height:21px; flex:0 0 21px; display:grid; place-items:center; border-radius:7px;
  background:var(--primary); color:#fff; font-size:11px; font-weight:900;
  box-shadow:0 4px 10px color-mix(in srgb,var(--primary) 24%,transparent);
}
.rw-begriff-btn {
  width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; padding:0;
  border:1px solid color-mix(in srgb,var(--primary) 48%,var(--line)); border-radius:50%;
  background:var(--primary-soft); color:var(--primary-deep); box-shadow:none;
}
.rw-begriff-btn svg { width:13px; height:13px; stroke-width:2.2; }
.rw-begriff-btn:hover,.rw-begriff-btn[aria-expanded="true"] { background:var(--primary); color:#fff; border-color:var(--primary); }
.rw-feld input {
  width:100%; min-height:46px; box-sizing:border-box; padding:8px 10px; border:2px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink); font-size:20px; font-weight:800; text-align:center;
}
.rw-feld input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); }
.rw-feld input.no { border-color:var(--danger); background:var(--danger-soft); }
.rw-begriff-panel {
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:9px 12px; margin-top:11px;
  padding:11px 13px; border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line));
  border-left:4px solid var(--primary); border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 72%,var(--card)),var(--card));
  color:var(--ink); animation:rwBegriffEin .18s ease-out;
}
.rw-begriff-panel[hidden] { display:none; }
.rw-begriff-merker {
  grid-row:1 / span 2; padding:4px 7px; border-radius:999px; background:var(--primary); color:#fff;
  font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.rw-begriff-panel b { display:block; color:var(--primary-deep); font-size:12.5px; }
.rw-begriff-panel p { margin:2px 0 0; color:var(--ink-soft); font-size:12.5px; font-weight:600; line-height:1.45; }
@keyframes rwBegriffEin { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.rw-live-hinweis {
  margin-top:11px; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:11px; background:var(--bg); color:var(--ink-soft); font-size:12.5px; font-weight:700;
  line-height:1.45; animation:rwBegriffEin .18s ease-out;
}
.rw-live-hinweis[hidden] { display:none; }
.rw-live-hinweis.weiter { border-left-color:var(--primary); background:var(--primary-soft); color:var(--primary-deep); }
.rw-live-hinweis.achtung { border-left-color:var(--danger); background:var(--danger-soft); color:var(--danger-deep); }
.rw-live-hinweis.passend { border-left-color:var(--success); background:var(--success-soft); color:var(--success-deep); }
.rw-aktionen { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rw-aktionen button { min-height:42px; }
.rw-hilfe { padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--primary-deep); font-weight:800; }
.rw-schritt-fb { min-height:20px; margin-top:9px; color:var(--danger-deep); font-size:12.5px; font-weight:700; line-height:1.4; }
.rw-schritt-fb.ok { color:var(--success); }
.rw-fertig { display:flex; flex-direction:column; gap:5px; padding:8px 2px; color:var(--success); }
.rw-fertig span { color:var(--ink-soft); font-size:13px; }
.qw-rechenhilfe {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:13px 0 10px;
  padding:10px 12px; border:1px dashed color-mix(in srgb,var(--primary) 48%,var(--line));
  border-radius:13px; background:color-mix(in srgb,var(--primary-soft) 36%,var(--card));
}
.qw-rechenhilfe > span { color:var(--ink-soft); font-size:12px; }
.qw-oeffnen {
  min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:9px 14px;
  border:1.5px solid var(--primary); border-radius:999px; background:var(--primary-soft);
  color:var(--primary-deep); font-weight:800; font-size:13.5px;
}
.qw-oeffnen:hover,.qw-oeffnen.offen { background:var(--primary); color:#fff; }
.qw-rechenbox { flex:1 0 100%; padding-top:5px; border-top:1px solid var(--line); }
.qw-rechenbox[hidden] { display:none; }
.qw-rechenplan-kopf {
  display:flex; align-items:center; gap:11px; margin:8px 0 12px; padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line)); border-radius:13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 62%,var(--card)),var(--card));
}
.qw-plan-symbol {
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px;
  background:var(--primary); color:#fff; box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 24%,transparent);
}
.qw-rechenplan-kopf > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.qw-rechenplan-kopf b { color:var(--primary-deep); font-size:14px; }
.qw-rechenplan-kopf span:not(.qw-plan-symbol) { color:var(--ink-soft); font-size:12px; line-height:1.4; }
.qw-rechenschritte { display:grid; gap:12px; }
.qw-rechenschritt {
  position:relative; overflow:hidden; padding:13px; border:1px solid var(--line); border-radius:15px;
  background:color-mix(in srgb,var(--card) 92%,var(--primary-soft));
}
.qw-rechenschritt::before {
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--primary),var(--success));
}
.qw-rechenschritt-kopf { display:flex; align-items:center; gap:9px; margin:0 0 8px 2px; }
.qw-rechenschritt-kopf > span {
  width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:9px;
  background:var(--primary); color:#fff; font-size:12px; font-weight:900;
}
.qw-rechenschritt-kopf b { color:var(--ink); font-size:13px; line-height:1.4; }
.qw-rechenschritt-inhalt > .rechnung-h,
.qw-rechenschritt-inhalt > .rechnung { margin-top:0; }
.qw-rechenschritt-inhalt > .rechnung-i { display:block; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
@media (max-width:600px) {
  .rw-kopf { flex-direction:column; gap:7px; }
  .rw-fortschritt { align-self:flex-start; }
  .rw-feld.breit { grid-column:span 1; }
  .rw-felder.nummeriert { grid-template-columns:1fr; }
  .rw-werkstatt,.rw-schrittkarte { padding:12px; }
  .rw-begriff-panel { grid-template-columns:1fr; }
  .rw-begriff-merker { grid-row:auto; justify-self:start; }
  .qw-oeffnen { width:100%; justify-content:center; }
  .qw-rechenplan-kopf { align-items:flex-start; padding:11px; }
  .qw-rechenschritt { padding:11px 9px 11px 12px; }
  .qw-rechenschritt-kopf { align-items:flex-start; }
}
.r-linie-row { margin: 4px 0; }
.r-linie { height: 0; border-bottom: 3.5px double var(--ink); }
.r-hinweis { font-size: 12px; margin: 8px 0 4px; }
.r-pruefen { margin-top: 6px; }

.karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.karte {
  min-height: 92px; border: none; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary-deep);
  font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.35;
  cursor: pointer; padding: 12px 12px 22px; position: relative;
  transition: transform .12s;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.karte:hover { transform: translateY(-2px); }
.karte.hinten { background: var(--success-soft); }
.karte .k-fach {
  position: absolute; bottom: 6px; left: 10px;
  font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
}
.karte .mini-x { top: 4px; right: 8px; color: var(--ink-soft); }

.kw { display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
#view .kw { min-height: max(560px, calc(100dvh - 170px)); }
.kw-reiter { grid-row: 1 / 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.kw-kopf { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 6px 0; }
.kw-liste { display: grid; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; }
.kw-stapel {
  --sf: var(--primary); position: relative; display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  color: var(--ink); border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 12px 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kw-stapel b { font-size: 14px; font-weight: 900; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kw-stapel b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-stapel small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.kw-mini-balken { display: block; height: 5px; border-radius: 999px; background: #232C3D; overflow: hidden; margin-top: 3px; }
.kw-mini-balken i { display: block; height: 100%; border-radius: inherit; background: var(--sf); }
.kw-stapel:hover { border-color: color-mix(in srgb, var(--sf) 45%, var(--line)); }
.kw-stapel.an {
  background: linear-gradient(160deg, color-mix(in srgb, var(--sf) 22%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--sf) 60%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--sf) 22%, transparent);
}
.kw-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--sf, var(--kf)); box-shadow: 0 0 10px color-mix(in srgb, var(--sf, var(--kf)) 80%, transparent); }
.kw-leer { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); padding: 4px 6px; }
.kw-aufraeumen { display: grid; gap: 6px; }
.kw-aufraeumen .leise { justify-content: center; min-height: 40px; }
.kw-legen span { display: grid; line-height: 1.15; text-align: left; }
.kw-legen small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.leise.gefahr { color: var(--danger); }
.leise.gefahr:hover:not([disabled]) { color: var(--danger-deep); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.leise[disabled] { opacity: .45; cursor: not-allowed; }
.kw-buehne { --kf: var(--primary); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.kw-leiste { display: flex; align-items: center; gap: 12px; }
.kw-titel { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; }
.kw-leiste .lk-fortschritt { max-width: 260px; }
.kw-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kw-rechts .leise { min-height: 36px; padding: 6px 12px; }
.kw-heute { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.kw-heute b { color: var(--neon-mint); }
.kw-heute .lk-flamme svg { width: 13px; height: 13px; }
.kw-feld { position: relative; min-height: 0; padding: 4px 90px 18px; perspective: 1600px; }
.kw-rahmen { position: relative; height: 100%; }
.kw-rahmen::before, .kw-rahmen::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 100%; z-index: 0;
  border-radius: 20px; background: #141B29; border: 1px solid #263145;
}
.kw-rahmen::after { left: 28px; right: 28px; bottom: -16px; opacity: .7; }
.kw-rahmen .lk-karte { --kw: 100%; --kh: 100%; width: 100%; height: 100%; }
.kw .lk-seite {
  border-radius: 20px; background: linear-gradient(160deg, #1D2536, #141B29);
  border: 1.5px solid color-mix(in srgb, var(--kf) 55%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 34px color-mix(in srgb, var(--kf) 22%, transparent);
}
.kw .lk-seite::before { display: none; }
.kw .lk-seite.rueck { --kf: var(--neon-mint); }
.kw .lk-seite.leer { border-style: dashed; box-shadow: none; }
.kw .lk-kopf { justify-content: space-between; padding: 16px 20px 0; }
.kw .lk-kopf .lk-marke { margin-left: 0; }
.kw .lk-frage { font-size: clamp(22px, 2.5vw, 32px); }
.kw .lk-antwort { font-size: clamp(28px, 3.4vw, 44px); color: var(--neon-mint); }
.kw .lk-fuss { justify-content: space-between; padding: 0 20px 16px; font-size: 12px; }
.kw .lk-aktionen { margin-top: 0; }
.kw-werkbank { --kf: var(--primary); grid-column: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.kw-werkbank-titel { display: grid; align-content: center; gap: 3px; padding: 0 4px; }
.kw-werkbank-titel b { font-size: 13px; font-weight: 900; }
.kw-werkbank-titel small { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.kw-mini { border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--kf) 45%, transparent); background: #141A27; padding: 8px 12px 10px; display: grid; gap: 4px; margin: 0; }
.kw-mini span { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.kw-mini input { border: 0; background: transparent; padding: 0; height: 26px; font-size: 15px; font-weight: 800; width: 100%; outline: 0; color: var(--ink); margin: 0; box-shadow: none; border-radius: 0; }
.kw-mini input::placeholder { color: #6F7E96; font-weight: 600; }
.kw-mini.rueck { border-color: color-mix(in srgb, var(--neon-mint) 55%, transparent); }
.kw-mini:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kf) 30%, transparent); }
.kw-mini.rueck:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-mint) 30%, transparent); }
.kw-werkbank-rechts { display: grid; gap: 6px; align-content: center; }
.kw-werkbank-rechts select { height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #141A27; color: var(--ink); padding: 0 10px; font: 800 12.5px/1.2 inherit; font-family: inherit; margin: 0; width: 100%; min-width: 170px; }
.kw-werkbank-rechts .primary { min-height: 38px; padding: 0 16px; white-space: nowrap; border: 0; color: #fff; background: linear-gradient(135deg, var(--neon-blau), var(--neon-violett)); box-shadow: 0 8px 20px rgba(58, 134, 255, .35); }
.kw-werkbank .err { grid-column: 1 / -1; }
.lk-zaehler { font-size: 13px; font-weight: 900; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-fortschritt { flex: 1; min-width: 90px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.lk-fortschritt i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--teal), var(--lime)); box-shadow: 0 0 14px color-mix(in srgb, var(--teal) 60%, transparent); transition: width .35s ease; }

.lk-karte {
  position: relative; z-index: 2; display: block; width: var(--kw); height: var(--kh); margin: 0 auto;
  padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}
.lk-karte.um { transform: rotateY(180deg); }
.lk-seite {
  --kf: var(--primary); position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; border-radius: 24px;
  border: 1.5px solid color-mix(in srgb, var(--kf) 34%, var(--line)); background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kf) 14%, transparent), 0 22px 48px color-mix(in srgb, var(--kf) 26%, transparent);
  display: grid; grid-template-rows: auto 1fr auto; text-align: center;
}
.lk-seite.rueck { transform: rotateY(180deg); --kf: var(--success); }
.lk-seite::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--kf); box-shadow: 0 0 18px var(--kf); }
.lk-kopf { display: flex; align-items: center; gap: 9px; padding: 16px 20px 0; }
.lk-fach {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 900; letter-spacing: .04em;
  color: color-mix(in srgb, var(--kf) 76%, var(--ink)); background: color-mix(in srgb, var(--kf) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kf) 32%, transparent); border-radius: 999px; padding: 5px 12px;
}
.lk-fach i { width: 8px; height: 8px; border-radius: 50%; background: var(--kf); box-shadow: 0 0 8px var(--kf); }
.lk-marke { margin-left: auto; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.lk-mitte { display: grid; align-content: center; gap: 12px; padding: 6px 42px; overflow: hidden; }
.lk-frage { font-size: clamp(21px, 2.6vw, 31px); font-weight: 900; line-height: 1.25; letter-spacing: -.015em; }
.lk-antwort { font-size: clamp(20px, 2.4vw, 29px); font-weight: 900; line-height: 1.3; color: color-mix(in srgb, var(--success) 62%, var(--ink)); }
.lk-fuss { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px 17px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }

.lk-legen-stand { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.5; color: var(--ink-soft); }
.lk-legen-stand[hidden] { display: none; }
.lk-legen-stand.gut { color: var(--success); }
.lk-legen-stand.fehler { color: var(--danger); }

.lk-karte.leer { cursor: default; }
.lk-seite.leer {
  border-style: dashed; border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: var(--shadow-sm);
}
.lk-seite.leer::before { opacity: .35; }
.lk-seite.leer .lk-mitte { justify-items: center; gap: 14px; color: var(--ink-soft); }
.lk-seite.leer .a-ico { color: color-mix(in srgb, var(--primary) 60%, var(--ink-soft)); }
.lk-seite.leer .lk-frage { color: var(--ink-soft); font-size: clamp(18px, 2.1vw, 25px); }
.lk-leiste button[disabled] { opacity: .45; cursor: not-allowed; }
.lk-pfeil[disabled] { opacity: .45; cursor: not-allowed; }
.lk-pfeil[disabled]:hover { border-color: var(--line); color: inherit; }

.lk-aktionen { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.lk-knopf {
  --bf: var(--primary); display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit;
  border: 1.5px solid color-mix(in srgb, var(--bf) 45%, var(--line)); background: color-mix(in srgb, var(--bf) 12%, var(--card));
  color: color-mix(in srgb, var(--bf) 78%, var(--ink)); border-radius: 15px; padding: 13px 22px; min-height: 50px;
  font-size: 14.5px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lk-knopf:hover { transform: translateY(-2px); border-color: var(--bf); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf) 24%, transparent), 0 14px 28px color-mix(in srgb, var(--bf) 34%, transparent); }
.lk-knopf[disabled] { opacity: .6; transform: none; }
.lk-knopf.nochmal { --bf: var(--sig-orange); }
.lk-knopf.sitzt { --bf: var(--sig-teal); }
.lk-pfeil {
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  display: grid; place-items: center;
}
.lk-pfeil.dreh .ic { transform: scaleX(-1); }
.lk-pfeil:hover { border-color: var(--primary); color: var(--primary-deep); }

.note-kreis {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.note-kreis.note-schnitt { width: auto; min-width: 34px; padding: 0 10px; border-radius: 17px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.noten-reihe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.noten-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.3;
}
.hero-klein {
  padding: 20px 24px; gap: 20px;
  background: linear-gradient(120deg, var(--primary-soft) 0%, var(--teal-soft) 52%, var(--lime-soft) 100%);
  border: 1px solid transparent; box-shadow: var(--shadow-md);
}
.dash-alles > .hero-klein { grid-column: 1 / -1; }
.dash-alles > .g-elt-kopf { grid-column: 1 / -1; }
.g-elt-kopf { padding: 15px 18px; gap: 14px; }
.g-elt-kopf .greet { font-size: 15.5px; line-height: 1.35; }
.dash-alles > .kf-card { align-self: start; }
@media (min-width: 700px) { .dash-alles > .g-elt-kopf { grid-column: span 1; } }
@media (min-width: 1150px) { .dash-alles > .g-elt-kopf { grid-column: span 2; } }
.hero-klein .greet { font-size: 19px; color: var(--primary-deep); }
.hero-klein .val { font-size: 15px; }
.hero-klein .ring circle:first-of-type { stroke: color-mix(in srgb, var(--primary-deep) 22%, transparent); }

.hp-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp-titel { display: flex; align-items: center; gap: 10px; min-width: 225px; font-size: 14.5px; }
.hp-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; }
.hp-box {
  border: none; border-radius: 9px; padding: 6px 9px;
  font-family: inherit; font-weight: 800; font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: transform .08s, filter .1s;
}
.hp-box small { font-weight: 700; opacity: .8; font-size: 10px; }
.hp-box:hover { transform: translateY(-1px); filter: brightness(1.06); }

.ferien-banner {
  background: var(--lime-soft); border: 1px solid var(--lime);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 0;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
}
.ferien-banner .ico { color: var(--primary-deep); display: flex; }
.ferien-banner b { display: block; font-size: 15px; color: var(--primary-deep); }
.ferien-banner span { font-size: 13px; color: var(--ink-soft); }
.ferien-banner .go { margin-left: auto; font-size: 22px; color: var(--primary-deep); }

button, .btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: 10px 16px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease;
}
button:hover { border-color: var(--primary); }
button:active { transform: translateY(1px); }
button.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  border-color: var(--primary-deep); color: #fff; box-shadow: var(--shadow-btn);
}
button.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(26, 117, 159, .34); }
button.danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-deep); }
button.warn { background: var(--sun-soft, rgba(233,166,59,.18)); border-color: #E9A63B; color: #8A5B12; }
.link-btn { background: none; border: none; padding: 4px; margin: 12px auto 0; display: block; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--primary-deep); text-decoration: underline; }
.link-btn:hover { color: var(--primary); }
.pw-zeigen { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none; }
.pw-zeigen input { width: auto; min-width: 0; margin: 0; cursor: pointer; accent-color: var(--primary); }
:root[data-theme="dark"] button.warn { color: #F0C066; }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  font-family: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--neon-cyan); border-color: var(--primary); }
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 2px;
}
.alma-ki-chat .cmp-box:focus-within {
  box-shadow: 0 0 0 3px rgba(51, 214, 255, .45);
}
label { font-size: 14px; font-weight: 700; color: var(--ink-soft); display: block; margin: 14px 0 9px; line-height: 1.3; }

.login-stage {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100lvh; overflow: hidden;
  background: #14243A url('alma-login-hintergrund.jpg?v=20260720-195800') center / cover no-repeat;
}
.login-stage::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: rgba(9, 22, 39, .24);
}
.login-video {
  position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; filter: saturate(.94) contrast(1.03);
  opacity: 0; transition: opacity .55s ease;
}
.login-video.sichtbar { opacity: 1; }
.login-wrap {
  max-width: 400px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 28px 18px 44px;
}
.login-stage .login-wrap {
  max-width: none; width: 100%; align-items: center;
  padding: max(36px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.login-panel {
  width: min(100%, 1040px); padding: 0; border-radius: 30px; overflow: hidden;
  display: grid; grid-template-columns: 392px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch; gap: 0;
  background: rgba(250, 252, 254, .82); border: 1px solid rgba(255, 255, 255, .50);
  box-shadow: 0 34px 90px rgba(7, 20, 38, .42), 0 3px 12px rgba(7, 20, 38, .12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.login-brandbereich {
  position: relative; min-width: 0; min-height: 168px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 34px 32px 28px; color: #fff;
  background: linear-gradient(155deg, #0D3A5A 0%, #126F8E 62%, #168F9B 100%);
}
.login-brandbereich::after {
  content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  right: -140px; bottom: -160px; background: rgba(255, 255, 255, .09); pointer-events: none;
}
.login-anspruch { position: relative; margin-top: 22px; font-size: 19px; font-weight: 800; line-height: 1.32; }
.login-markentext { position: relative; margin-top: 10px; color: rgba(255, 255, 255, .86); font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.login-merkmale { position: relative; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; list-style: none; }
.login-merkmale li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.login-merkmale .ic { flex: none; color: #B7E4A8; }
.login-wrap .logo-crop { width: 300px; max-width: 88%; margin: 0 auto; }
.login-stage .login-wrap .logo-crop { width: 236px; max-width: 100%; margin: 0; }
.login-stage .login-brandbereich .logo-hell { display: none; }
.login-stage .login-brandbereich .logo-dunkel { display: block; }
.login-sub {
  color: var(--ink-soft); font-size: 14.5px; font-weight: 600;
  margin: 30px auto 0; max-width: 300px; line-height: 1.5;
}
.login-wrap .card {
  text-align: left; margin: 12px 0 0;
  padding: 26px 24px 24px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.login-stage .login-wrap .card {
  margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  position: relative; display: flex; flex-direction: column;
  padding: 34px 40px 26px; text-align: left;
}
.login-kopf h1 { color: #14293F; font-size: 28px; font-weight: 800; line-height: 1.15; }
.login-kopf p { margin-top: 7px; color: #5A6D82; font-size: 14px; font-weight: 600; line-height: 1.45; }
.login-felder { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.login-feld { min-width: 0; }
.login-stage .login-wrap .login-feld label { margin: 0 0 7px; font-size: 13px; font-weight: 800; }
.login-eingabe { position: relative; }
.login-symbol { position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-50%); display: block; color: #7C8CA0; pointer-events: none; }
.login-stage .login-wrap .login-eingabe input { width: 100%; padding-left: 44px; }
.login-unterzeile { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.login-trenner {
  margin: 22px 0 16px; display: flex; align-items: center; gap: 14px;
  color: #8194A8; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.login-trenner::before, .login-trenner::after { content: ''; flex: 1; height: 1px; background: rgba(24, 78, 119, .16); }
.login-dienste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.login-dienst {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 13px 16px; border: 1px solid rgba(23, 93, 145, .26); border-radius: 16px;
  background: #fff; color: #174F78; box-shadow: 0 6px 16px rgba(20, 66, 96, .10);
  font-family: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.login-dienst:hover { background: #F6FBFD; border-color: #1688B5; transform: translateY(-1px); }
.login-dienst:focus-visible { outline: 3px solid rgba(22, 136, 181, .28); outline-offset: 2px; }
.login-dienst-symbol {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(22, 136, 181, .12); color: #14688F;
}
.login-dienst-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.login-dienst b { font-size: 14px; font-weight: 800; line-height: 1.2; }
.login-dienst small { color: #5E7791; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.login-rechtszeile {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 13px 30px;
  border-top: 1px solid rgba(24, 78, 119, .14); background: rgba(238, 246, 250, .80); color: #4C6178;
}
.login-rechtsmarke { font-size: 12px; font-weight: 700; }
.login-rechtslinks { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.login-rechtslinks a { color: #17567F; font-size: 12px; font-weight: 800; text-decoration: none; }
.login-rechtslinks a:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-rechtslinks a:focus-visible { outline: 3px solid rgba(22, 136, 181, .28); outline-offset: 3px; border-radius: 4px; }
.login-aktionen { position: relative; min-width: 0; padding-top: 0; }
.login-aktionen .primary {
  min-width: 216px; min-height: 54px; margin: 0; padding: 12px 26px; white-space: nowrap;
  border-radius: 15px; background: linear-gradient(135deg, #1688B5, #175D91 72%);
  box-shadow: 0 12px 26px rgba(24, 94, 145, .30);
}
.login-aktionen .primary::after { content: '›'; font-size: 20px; line-height: 0; margin-left: 8px; vertical-align: -1px; }
.login-aktionen .primary.login-laedt { opacity: 1; cursor: wait; }
.login-aktionen .primary.login-laedt::after { display: none; }
.login-ladepunkte { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: 2px; }
.login-ladepunkt {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: login-ladepunkt 1s ease-in-out infinite;
}
.login-ladepunkt:nth-child(2) { animation-delay: .15s; }
.login-ladepunkt:nth-child(3) { animation-delay: .3s; }
@keyframes login-ladepunkt {
  0%, 70%, 100% { opacity: .35; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
.login-hilfsknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; margin: 0; padding: 12px 20px; white-space: nowrap;
  border: 1px solid rgba(24, 78, 119, .26); border-radius: 15px; background: rgba(255, 255, 255, .74);
  color: #184E77; font: 800 13.5px/1 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 66, 96, .07); text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.login-hilfsknopf:hover { background: #fff; border-color: #1688B5; transform: translateY(-1px); }
.login-hilfsknopf:focus-visible { outline: 3px solid rgba(22, 136, 181, .28); outline-offset: 2px; }
.login-hilfsknopf-symbol { display: block; flex: none; color: #14688F; }
.login-stage #li-pin-box { margin-top: 16px; text-align: left; }
.login-stage #li-err { min-height: 0; margin: 10px 0 0; text-align: left; }
.login-stage #li-err:empty { margin: 0; }
.login-stage .login-wrap label { color: #526176; }
.login-stage .login-wrap input {
  min-height: 47px; background: #FFFFFF; color: #25364A; border: 1.5px solid #CCD8E2; font-size: 17px;
  border-radius: 14px; box-shadow: inset 0 1px 2px rgba(30, 57, 78, .035);
}
.login-stage .login-wrap input:focus { border-color: #1688B5; outline: 3px solid rgba(22, 136, 181, .13); }
.login-passwort-eingabe { position: relative; }
.login-passwort-eingabe input { width: 100%; padding-right: 48px; }
.login-passwort-eingabe .pw-auge {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 7px; margin: 0; border: 0; border-radius: 10px;
  background: transparent; color: #526F84; box-shadow: none;
}
.login-passwort-eingabe .pw-auge:hover { border-color: transparent; background: rgba(22, 136, 181, .10); color: #176C99; }
.login-passwort-eingabe .pw-auge:focus-visible { outline: 3px solid rgba(22, 136, 181, .22); outline-offset: 1px; }
.login-passwort-eingabe .pw-auge svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-passwort-eingabe .pw-auge-strich { display: none; }
.login-passwort-eingabe .pw-auge[aria-pressed="true"] .pw-auge-strich { display: block; }
.login-stage .login-wrap .link-btn { color: #184E77; }
.login-wrap .card > label:first-child { margin-top: 0; }
.login-wrap input { padding: 12px 14px; }
.login-wrap .primary { padding: 13px 16px; font-size: 15px; }
.login-foot { color: var(--ink-soft); font-size: 12px; margin-top: 20px; }
.desktop-install-bereich { position: relative; margin-top: auto; padding-top: 22px; }
.desktop-install-knopf {
  min-height: 48px; width: 100%; margin: 0; padding: 9px 14px;
  display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none;
}
.desktop-install-knopf:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .46); }
.desktop-install-knopf:focus-visible { outline: 3px solid rgba(255, 255, 255, .45); outline-offset: 2px; }
.desktop-install-knopf img { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.desktop-install-knopf span { min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.desktop-install-knopf b { font-size: 12.5px; }
.desktop-install-knopf small { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 11px; }
.desktop-install-knopf svg { width: 20px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.desktop-install-hinweis { min-height: 0; margin: 7px 0 0; color: rgba(255, 255, 255, .86); font-size: 12px; line-height: 1.4; }
.desktop-install-hinweis:empty { display: none; }
.login-webapp { margin-top: 18px; }
.login-webapp-knopf { width: 100%; min-height: 52px; padding: 12px; white-space: normal; list-style: none; }
.login-webapp-knopf::-webkit-details-marker { display: none; }
.login-webapp-knopf::after { content: '+'; margin-left: auto; font-size: 20px; }
.login-webapp[open] .login-webapp-knopf::after { content: '−'; }
.login-webapp-symbole { display: inline-flex; gap: 7px; flex: none; }
.login-webapp-symbole svg { width: 23px; height: 23px; fill: currentColor; }
.login-webapp-anleitung { padding: 4px 2px 0; color: #4F6576; font-size: 13px; line-height: 1.55; }
.login-webapp-anleitung p { margin: 12px 0 0; }

.registrierung-dialog { padding: 8px; }
.registrierung-dialog .modal { width: min(700px, calc(100vw - 16px)); max-height: 100%; overflow: auto; padding: 16px 18px 0; }
.registrierung-dialog .modal-head { margin-bottom: 4px; }
.registrierung-dialog .reg-einstieg { margin: 0 0 7px; }
.reg-stammdaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.reg-feld { min-width: 0; }
.registrierung-dialog .reg-feld label { display: block; margin: 5px 0 4px; font-size: 13px; }
.registrierung-dialog .reg-feld input { width: 100%; min-height: 42px; }
.reg-tarife { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 10px 0 6px; }
.reg-tarife legend { grid-column: 1 / -1; font-weight: 800; margin-bottom: 0; font-size: 13px; }
.reg-tarif { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; margin: 0 !important; cursor: pointer; }
.reg-tarif input { width: auto; margin: 0; }
.reg-tarif span { display: grid; gap: 2px; }
.reg-tarif small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.reg-zustimmungen { display: grid; gap: 6px; margin-top: 8px; }
.registrierung-dialog .reg-zustimmung { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.35; }
.registrierung-dialog .reg-zustimmung input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; }
.registrierung-dialog .reg-zustimmung a { color: #075E85; font-weight: 800; text-underline-offset: 2px; }
:root[data-theme="dark"] .registrierung-dialog .reg-zustimmung a { color: #83D9FF; }
.reg-abschluss { position: sticky; z-index: 2; bottom: 0; margin: 4px -18px 0; padding: 0 18px 14px; background: var(--card); box-shadow: 0 -8px 14px color-mix(in srgb, var(--card) 92%, transparent); }
.reg-abschluss .err { min-height: 16px; margin-top: 0; padding-top: 3px; }
.reg-abschluss #reg-save { width: 100%; min-height: 48px; margin-top: 3px; font-weight: 800; }
@media (max-width: 560px) {
  .registrierung-dialog { padding: 4px; }
  .registrierung-dialog .modal { width: calc(100vw - 8px); max-height: 100%; padding: 12px 12px 0; border-radius: 14px; }
  .registrierung-dialog .modal-head .x { width: 40px; height: 40px; flex-basis: 40px; }
  .reg-stammdaten { grid-template-columns: 1fr; gap: 1px; }
  .reg-tarife { gap: 6px; margin-top: 8px; }
  .reg-tarif { align-items: flex-start; padding: 7px 8px; }
  .reg-tarif small { font-size: 11px; }
  .reg-abschluss { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-bottom: 10px; padding-left: 12px; }
}
.zahlung-tarife { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.zahlung-tarif { min-height: 86px; display: grid; place-content: center; gap: 5px; text-align: center; border: 1px solid var(--line); border-radius: 16px; }
.zahlung-tarif.empfohlen { border-color: #635BFF; box-shadow: 0 0 0 2px color-mix(in srgb, #635BFF 18%, transparent); }
.zahlung-tarif span { color: var(--muted); font-size: 13px; }
.zahlung-abmelden { min-height: 44px; }
@media (max-width: 720px) {
  .zahlung-tarife { grid-template-columns: 1fr; }
}
.err { color: var(--danger-deep); font-size: 13px; margin-top: 10px; min-height: 18px; }
.pin-reset-hinweis {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--primary-soft); color: var(--ink); font-size: 14px; line-height: 1.55;
}
.pw-vergessen .modal { width: min(460px, 100%); }
.pw-reset-einstieg { margin: 0 0 10px; }
.pw-reset-felder label { display: block; }
.pw-reset-felder input { width: 100%; min-height: 48px; }
.pw-reset-oder { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.pw-reset-oder::before, .pw-reset-oder::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.pw-vergessen #pv-hilfe { margin: 10px 0 0; }
.pw-vergessen #pv-send { min-height: 48px; }
.zugang-reset-card { width: min(100%, 440px); }
.zugang-reset-card > label { display: block; margin-top: 14px; }
.zugang-reset-card > label:first-of-type { margin-top: 0; }
.zugang-reset-card input { width: 100%; min-height: 48px; }
.zugang-reset-card #rs-btn { width: 100%; min-height: 48px; margin-top: 8px; }
.pin-reset-felder {
  min-width: 0; margin: 20px 0 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
}
.pin-reset-felder legend { padding: 0 6px; color: var(--primary-deep); font-weight: 800; }
.pin-reset-felder label { display: block; margin-top: 10px; }
.pin-reset-felder label:first-of-type { margin-top: 0; }
.pin-reset-felder input { width: 100%; }
.zugang-reset-erfolg { margin: 0; color: var(--success); font-weight: 800; line-height: 1.45; }
.pin-zugang-reset { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pin-zugang-reset .link-btn { min-height: 44px; padding: 10px 0; font-weight: 700; }
.pin-zugang-reset p { margin: 4px 0 0; line-height: 1.55; }
.pin-zugang-reset .feedback { display: block; margin-top: 8px; }

@media (max-width: 480px) {
  .zugang-reset-card { padding: 20px 16px; }
  .pin-reset-felder { padding: 14px 12px; }
}

@media (max-width: 980px) {
  .login-stage .login-wrap {
    align-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .login-stage { overflow-y: auto; }
  .login-panel {
    width: min(100%, 430px); padding: 0; border-radius: 24px;
    display: block;
  }
  .login-brandbereich {
    min-height: 0; padding: 24px 22px 20px; align-items: center; text-align: center;
    border: 0; border-bottom: 1px solid rgba(24, 78, 119, .14);
  }
  .login-stage .login-wrap .logo-crop { width: 230px; margin: 0 auto; }
  .login-anspruch, .login-markentext, .login-merkmale { display: none; }
  .login-stage .login-wrap .card { padding: 20px 22px 18px; }
  .login-kopf { text-align: center; }
  .login-kopf h1 { font-size: 23px; }
  .login-kopf p { font-size: 13.5px; }
  .login-felder { margin-top: 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .login-unterzeile { flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 16px; }
  .login-hilfsknopf { width: 100%; min-height: 50px; }
  .login-aktionen .primary { width: 100%; min-width: 0; min-height: 58px; font-size: 16.5px; border-radius: 16px; }
  .login-trenner { margin: 18px 0 13px; }
  .login-dienste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .login-rechtszeile { justify-content: center; gap: 8px 16px; padding: 12px 18px; text-align: center; }
  .login-rechtslinks { justify-content: center; gap: 16px; }
  .login-stage::after { background: rgba(9, 22, 39, .30); }
  .desktop-install-bereich { padding-top: 16px; }
}
@media (max-height: 680px) {
  .login-stage .login-wrap {
    justify-content: flex-start;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 980px) and (max-height: 680px) {
  .login-brandbereich { padding-top: 16px; padding-bottom: 14px; }
  .login-stage .login-wrap .logo-crop { width: 190px; }
}
@media (min-width: 981px) and (max-width: 1140px) {
  .login-panel { grid-template-columns: 340px minmax(0, 1fr); }
  .login-stage .login-wrap .card { padding: 30px 30px 24px; }
  .login-dienste { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .login-dienst { padding: 12px 14px; }
}
@media (min-width: 981px) and (max-height: 780px) and (orientation: landscape) {
  .login-stage .login-wrap { justify-content: center; }
  .login-panel { grid-template-columns: 330px minmax(0, 1fr); padding: 0; }
  .login-brandbereich { padding: 22px 26px 20px; }
  .login-stage .login-wrap .logo-crop { width: 196px; }
  .login-anspruch { margin-top: 14px; font-size: 17px; }
  .login-markentext { margin-top: 7px; }
  .login-merkmale { margin-top: 14px; gap: 7px; }
  .login-stage .login-wrap .card { padding: 22px 30px 18px; }
  .login-kopf h1 { font-size: 24px; }
  .login-felder { margin-top: 16px; }
  .login-trenner { margin: 16px 0 12px; }
  .login-dienst small { display: none; }
  .desktop-install-bereich { padding-top: 16px; }
}
@media (min-width: 981px) and (max-height: 620px) and (orientation: landscape) {
  .login-stage { overflow-y: auto; }
  .login-anspruch, .login-markentext, .login-merkmale { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-video { display: none; transition: none; }
  html.route-laedt::before { width: 100%; animation: none; }
  .login-ladepunkt { animation: none; opacity: .8; transform: none; }
}

.modes {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px;
  margin: 0 0 12px;
}
.mode-pill {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; color: var(--ink-soft); font-family: inherit;
}
.mode-pill.active { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary); }

#messages { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; min-height: 120px; }
.chat-spacer { flex: none; pointer-events: none; }
.chat-einstieg { align-self: flex-start; max-width: min(92%, 900px); }
.ce-kopf { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.ce-liste { display: flex; gap: 8px; flex-wrap: wrap; }
.ce-knopf {
  min-height: 44px; border-radius: 999px; padding: 9px 15px; cursor: pointer;
  font: 800 12.5px/1.3 inherit; text-align: left;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--card));
  color: var(--primary-deep);
}
.ce-knopf:hover { border-style: solid; }
.ce-knopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }

.main:has(#view.chat-ansicht) { height: 100dvh; min-height: 0; }
.main-inner:has(#view.chat-ansicht) {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  overflow: hidden; padding-bottom: 14px;
}
.main-inner:has(#view.chat-ansicht) > .main-head { flex: 0 0 auto; }
#view.chat-ansicht {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  width: min(100%, 1080px); margin-inline: auto;
}
#view.org-ansicht { width: min(100%, 1160px); margin-inline: auto; }
#view.chat-ansicht > .modes, #view.chat-ansicht > .chat-held, #view.chat-ansicht > .card, #view.chat-ansicht > .mode-pill { flex: 0 0 auto; }

.chat-held {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon text" "weg weg";
  align-items: start; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 22px;
  background:
    radial-gradient(560px 260px at 100% -45%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 72%),
    var(--card);
  margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.fh-icon {
  grid-area: icon; margin: 15px 0 15px 18px;
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--primary), var(--teal));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.fh-text { grid-area: text; margin: 15px 18px 15px 0; min-width: 0; }
.fh-kicker { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep); }
.fh-text h2 { margin: 3px 0 5px; font-size: clamp(18px, 1.7vw, 21px); font-weight: 900; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
.fh-text p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; max-width: 62ch; }
.fh-weg {
  grid-area: weg; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px 18px; padding: 10px 18px 11px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.fh-schritt { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fh-nummer {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  color: var(--primary-deep); font-size: 12.5px; font-weight: 900;
}
.fh-schritt-text { min-width: 0; }
.fh-schritt-text b { display: block; font-size: 13px; font-weight: 900; line-height: 1.25; }
.fh-schritt-text span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }

.chat-buehne {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 240px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow-md);
}
.chat-buehne-kopf, .chat-buehne-fuss { flex: 0 0 auto; }
.chat-buehne-kopf { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.fbk-zeichen {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--primary), var(--teal));
}
.fbk-text b { display: block; font-size: 14px; font-weight: 900; }
.fbk-text > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.fbk-modus {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--primary-soft); color: var(--primary-deep);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 900;
}
.chat-buehne-lauf { flex: 1; min-height: 0; overflow-y: auto; position: relative; padding: 20px 20px 8px; }
.chat-buehne-lauf::-webkit-scrollbar { width: 10px; }
.chat-buehne-lauf::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
.chat-buehne-fuss { border-top: 1px solid var(--line); }
.chat-buehne-fuss:empty { display: none; }

.chat-buehne-lauf #messages { padding-left: 44px; padding-right: 44px; }
.chat-buehne-lauf .msg.assistant, .chat-buehne-lauf .msg.user { position: relative; }
.chat-buehne-lauf .msg.assistant::before, .chat-buehne-lauf .msg.user::before {
  position: absolute; top: 0; width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff;
}
.chat-buehne-lauf .msg.assistant::before { content: 'A'; left: -44px; background: linear-gradient(140deg, var(--primary), var(--teal)); }
.chat-buehne-lauf .msg.user::before { content: var(--kind-ini, 'D'); right: -44px; background: linear-gradient(140deg, #8D99AE, #5D6B80); }
.chat-buehne-lauf .msg.assistant:has(.widget)::before,
.chat-buehne-lauf .msg.assistant.schritt-komp::before { display: none; }
@media (max-width: 720px) {
  .chat-buehne-lauf #messages { padding-left: 0; padding-right: 0; }
  .chat-buehne-lauf .msg.assistant::before, .chat-buehne-lauf .msg.user::before { display: none; }
  .chat-buehne-lauf { padding: 15px 14px 6px; }
}
@media (max-width: 767px) {
  .main-inner:has(#view.chat-ansicht) .main-head:not(.leer) { padding-bottom: 12px; }
  .nav-drawer .modes { gap: 7px; margin-bottom: 10px; }
  .nav-drawer .modes .mode-pill { column-gap: 8px; padding: 7px 10px; border-radius: 13px; min-height: 46px; }
  .nav-drawer .modes .mode-pill > .a-ico { width: 28px; height: 28px; padding: 5px; border-radius: 9px; }
  .nav-drawer .modes .mode-pill .mp-txt { font-size: 12px; }
  .nav-drawer .modes .mode-pill .mp-sub { display: none; }
  .nav-drawer .chat-held { display: none; }
  .nav-drawer .chat-buehne-kopf { padding: 9px 14px; }
  .nav-drawer .fbk-text > span, .nav-drawer .fbk-modus { display: none; }
  .nav-drawer .composer-hinweis { display: none; }
  .nav-drawer .main-inner:has(#view.chat-ansicht) .main-head h1 { font-size: 21px; }
  .nav-drawer .main-inner:has(#view.chat-ansicht) .main-head .sub { font-size: 12.5px; }
}
@media (max-height: 700px) { .fh-weg { display: none; } }
@media (max-height: 640px) {
  .modes .mode-pill .mp-sub, .chat-held p { display: none; }
  .modes .mode-pill { padding: 9px 12px; }
  .chat-held { padding: 12px 15px; }
  .fh-icon { width: 44px; height: 44px; border-radius: 15px; }
  .fh-text h2 { font-size: 19px; }
}
@media (max-height: 560px) { .chat-held, .fbk-text > span { display: none; } }
.msg { max-width: min(85%, 900px); border-radius: 16px; padding: 11px 15px; font-size: 15px; line-height: 1.55; }
.msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.chip {
  align-self: center; display: flex; align-items: center; gap: 7px;
  background: var(--success-soft); color: var(--primary-deep);
  font-size: 12.5px; padding: 4px 14px; border-radius: 999px; max-width: 95%;
}
.msg.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.msg.chip.wrong { background: var(--danger-soft); color: var(--danger-deep); }
.msg.chip.wrong .dot { background: var(--danger); }
.msg img.upload { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 6px; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 8px 20px; }
.msg strong { font-weight: 700; }
.msg .en-say {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-soft); color: var(--primary-deep);
  border-radius: 8px; padding: 1px 8px; cursor: pointer; font-weight: 600;
}
.msg .en-say:hover { background: #d3e5f0; }

.typing { align-self: flex-start; color: var(--ink-soft); font-size: 13px; padding: 4px 8px; }
.typing::after { content: '…'; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.widget {
  align-self: stretch;
  background:
    radial-gradient(340px 150px at 100% 0%, rgba(26,117,159,.06), transparent 70%),
    radial-gradient(300px 150px at 0% 100%, rgba(82,182,154,.07), transparent 70%),
    var(--card);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 20px 22px; margin: 10px 0; box-shadow: var(--shadow-md);
}
.widget.fertig {
  background: linear-gradient(135deg, var(--success-soft), var(--lime-soft));
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}
.widget .w-title {
  font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.widget .w-frage {
  font-weight: 800; font-size: 22px; line-height: 1.3; letter-spacing: -.01em;
  color: var(--primary-deep); margin-bottom: 16px; text-wrap: balance;
}
.widget .opts { display: flex; flex-direction: column; gap: 10px; }
.widget .opts.row { flex-direction: row; flex-wrap: wrap; }
.widget .opt {
  text-align: left; font-weight: 800; font-size: 17px;
  border: 2px solid var(--primary-soft); border-radius: 14px; padding: 15px 18px;
  background: var(--card); cursor: pointer; font-family: inherit; color: var(--ink);
  box-shadow: 0 2px 6px rgba(24,78,119,.06);
}
.widget .opt:hover { border-color: var(--primary); }
.widget .opt.ok { background: var(--success-soft); border-color: var(--success); color: var(--primary-deep); }
.widget .opt.no { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-deep); }
.widget .feedback { font-size: 14px; margin-top: 12px; color: var(--ink-soft); }
.widget .feedback.ok { color: var(--success); font-weight: 800; font-size: 17px; }
.widget .w-tipp {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer;
  color: var(--primary-deep); background: var(--primary-soft);
  border: 1px solid var(--primary); border-radius: 999px; padding: 8px 13px; min-height: 44px;
}
.widget .w-tipp:hover { filter: brightness(1.04); }
.widget .w-tipp:disabled { opacity: .5; cursor: default; }
.widget .w-tipp-text { display: none; margin-top: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.5;
  color: var(--ink); background: var(--lime-soft); border-left: 4px solid var(--lime); border-radius: 10px; padding: 10px 13px; }
.widget .w-tipp-text.an { display: block; }
:root[data-theme="dark"] .widget .w-tipp-text { color: var(--ink); }
.widget .w-tipp-text .wt-hint { color: var(--ink); }
.widget .w-tipp-text .wt-loesung { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--lime); color: var(--success); font-weight: 800; }
.widget .w-tipp-text .wt-check { flex: 0 0 auto; font-weight: 900; }
.wt-denkstopp { margin-top: 12px; padding: 14px; border: 1px solid var(--primary); border-radius: 14px;
  background: var(--card); color: var(--ink); box-shadow: 0 6px 18px rgba(24,78,119,.1); }
.wt-denkstopp-kopf { font-size: 15px; font-weight: 900; color: var(--primary-deep); }
.wt-denkstopp p { margin: 5px 0 12px; color: var(--ink-soft); font-weight: 600; }
.wt-denkstopp-zeile { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wt-denkstopp-zeile label { font-size: 20px; font-weight: 900; color: var(--ink); }
.wt-denkstopp-zeile input { width: 64px; min-height: 44px; padding: 8px 10px; border: 2px solid var(--primary);
  border-radius: 10px; background: var(--card); color: var(--ink); font: 900 19px/1.2 inherit; text-align: center; }
.wt-denkstopp-zeile button { min-height: 44px; padding: 9px 15px; border: 0; border-radius: 10px;
  background: var(--primary); color: #fff; font: 800 13px/1.2 inherit; cursor: pointer; }
.wt-denkstopp-zeile input:focus-visible, .wt-denkstopp-zeile button:focus-visible, .widget .w-tipp:focus-visible {
  outline: 3px solid var(--focus, #f4b942); outline-offset: 2px;
}
.wt-denkstopp-status { min-height: 21px; margin-top: 8px; color: var(--danger-deep); font-weight: 800; }
.wt-denkstopp small { display: block; margin-top: 4px; color: var(--ink-soft); font-weight: 600; }
.wt-denkstopp-laden { font-weight: 800; color: var(--primary-deep); }
.rw-denkstopp-host .wt-denkstopp { margin: 12px 0 0; }
@media (max-width: 440px) {
  .wt-denkstopp-zeile button { flex: 1 1 100%; }
}
.rc-countdown { margin-top: 14px; }
.rc-countdown .rc-cd-txt { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.rc-countdown .rc-cd-bahn { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rc-countdown .rc-cd-bahn i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--teal)); }
.rc-nav { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.widget .pairs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.widget .score { font-size: 12.5px; color: var(--ink-soft); float: right; }

.composer { padding: 10px 13px 11px; }
.composer .inner { max-width: none; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; max-height: 120px; border-radius: 16px; font-size: 16px; }
.composer-hinweis { margin: 8px 4px 0; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }

.pk-kopf {
  border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  box-shadow: var(--shadow-md); padding: 16px 20px; margin-bottom: 18px;
}
.pk-kopf-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pk-kopf-titel { font-size: 15.5px; font-weight: 900; color: var(--ink); }
.pk-kopf-fach { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.pk-fuell { flex: 1; }
.pk-abgeben {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--primary-deep); border-radius: 999px; padding: 12px 22px;
  background: linear-gradient(180deg, var(--primary), var(--primary-deep)); color: #fff;
  font: 900 14px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: var(--shadow-btn);
}
.pk-abgeben:hover:not([disabled]) { filter: brightness(1.06); }
.pk-abgeben[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.pk-perlen { display: flex; align-items: center; margin-top: 17px; }
.pk-perle-huelle { display: flex; align-items: center; flex: 1; }
.pk-perle-huelle:last-child { flex: 0 0 auto; }
.pk-perle {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; position: relative; z-index: 2;
  display: grid; place-items: center; font: 900 12px/1 inherit; letter-spacing: -.02em;
  border: 2px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pk-perle.fertig { border-color: var(--primary); background: var(--primary); color: #fff; }
.pk-faden {
  flex: 1; height: 7px; margin: 0 4px; border-radius: 999px; position: relative; overflow: visible;
  background: color-mix(in srgb, var(--ink) 12%, var(--wand));
}
.pk-faden-zeit {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(180deg, #DCFAFF, #29DCFF 45%, #00A9E0);
  box-shadow: 0 0 3px #FFFFFF, 0 0 9px #29DCFF, 0 0 20px #00C2F5, 0 0 38px rgba(0, 168, 224, .85);
  transition: width 1s linear;
}

.pk-ergebnis {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  padding: 17px 22px; box-shadow: var(--shadow-md);
}
.pk-ergebnis[hidden] { display: none; }
.pk-note {
  width: 58px; height: 58px; flex: 0 0 58px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--primary), var(--teal)); color: #fff; font: 900 24px/1 inherit;
}
.pk-ergebnis-text b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.pk-ergebnis-text span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 3px; }

.pk-blatt {
  width: min(100%, 760px); margin: 0 auto; background: #FFFFFF; color: #1A1D26;
  border-radius: 6px; box-shadow: 0 26px 60px rgba(0, 0, 0, .34); padding: 40px 46px 30px;
}
.pk-blatt-rand { text-align: right; font-size: 11px; font-style: italic; color: #5B6474; line-height: 1.5; }
.pk-blatt-anweisung { text-align: center; font-size: 12.5px; font-weight: 800; margin: 4px 0 22px; }
.pk-blatt-fach { text-align: center; font-size: 21px; font-weight: 900; letter-spacing: .12em; }
.pk-blatt-unter { text-align: center; font-size: 11px; color: #6B7382; margin-top: 5px; }
.pk-blatt-linie { border: none; border-top: 1.5px solid #1A1D26; margin: 13px 0 26px; }
.pk-blatt-fuss {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid #E1E5EC; margin-top: 30px; padding-top: 11px;
  font-size: 11px; letter-spacing: .06em; color: #5B6474;
}
.pk-frage { display: flex; gap: 14px; margin-bottom: 30px; }
.pk-nr { display: flex; flex: 0 0 auto; height: 22px; }
.pk-nr span {
  width: 21px; display: grid; place-items: center; border: 1px solid #1A1D26;
  font-size: 11px; font-weight: 900;
}
.pk-nr span:first-child { border-right: none; color: #5B6474; }
.pk-koerper { flex: 1; min-width: 0; }
.pk-frage-kopf { display: flex; gap: 16px; align-items: flex-start; }
.pk-frage-text { flex: 1; font-size: clamp(15px, 1.6vw, 17px); font-weight: 700; line-height: 1.55; }
.pk-punkte { flex: 0 0 auto; font-size: 11px; font-weight: 900; white-space: nowrap; }
.pk-hinweis { font-size: 12px; color: #6B7382; margin: 9px 0 4px; }
.pk-wahl { display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; }
.pk-wahl-text { flex: 1; font-size: 15px; line-height: 1.5; }
.pk-kasten {
  width: 21px; height: 21px; flex: 0 0 21px; border: 1.4px solid #1A1D26; border-radius: 2px;
  display: grid; place-items: center; color: #1A1D26;
}
.pk-kasten .ic { opacity: 0; }
.pk-wahl.an .pk-kasten .ic { opacity: 1; }
.pk-wahl.richtig .pk-kasten { border-color: #1E8E5A; background: #E4F5EC; color: #1E8E5A; }
.pk-wahl.falsch .pk-kasten { border-color: #C81E37; background: #FCE8EB; color: #C81E37; }
.pk-wahl.loesung .pk-wahl-text { font-weight: 900; color: #1E8E5A; }
.pk-schreib { margin-top: 10px; }
.pk-schreib textarea {
  width: 100%; border: none; border-bottom: 1px solid #C9CFD9; border-radius: 0;
  background: none; color: #1A1D26; font-size: 13px; padding: 4px 2px 7px;
  resize: none; min-height: 30px; font-family: inherit;
}
.pk-schreib textarea:focus { outline: none; border-bottom-color: #1A759F; }
.pk-schreib textarea::placeholder { color: #B6BDC9; font-style: italic; }
.pk-leerlinie { border-bottom: 1px solid #C9CFD9; height: 26px; }
.pk-urteil { margin-top: 11px; border-radius: 9px; padding: 11px 13px; font-size: 12px; line-height: 1.55; }
.pk-urteil[hidden] { display: none; }
.pk-urteil.gut { background: #E4F5EC; color: #14603D; }
.pk-urteil.teils { background: #FDF3DC; color: #7A5310; }
.pk-urteil.schlecht { background: #FCE8EB; color: #8E1226; }
.pk-urteil b { display: block; margin-bottom: 3px; }
.pk-loesung, .pk-weg { margin-top: 7px; }
@media (max-width: 720px) {
  .pk-blatt { padding: 26px 20px 20px; }
  .pk-perle { width: 32px; height: 32px; flex: 0 0 32px; font-size: 11px; }
  .pk-abgeben { width: 100%; justify-content: center; }
}

.antwort-vorschlaege { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 11px; }
.av-knopf {
  border: 1.5px solid color-mix(in srgb, var(--primary) 52%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--card));
  color: var(--primary-deep); border-radius: 999px; padding: 10px 16px;
  font: 800 13px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.av-knopf:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); }

.qa-leiste { display: flex; gap: 9px; flex-wrap: wrap; padding: 0 0 11px; }
.qa-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 9px 15px; font: 800 13px/1 inherit; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.qa-knopf:hover { border-color: var(--primary); background: var(--primary-soft); }
.qa-knopf .a-ico { color: var(--primary); }
.qa-fach { color: var(--primary-deep); font-weight: 900; }
.qa-themen { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 11px; }
.qa-themen[hidden] { display: none; }
.qa-thema {
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 60%, transparent); color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font: 800 12.5px/1 inherit; font-family: inherit; cursor: pointer;
}
.qa-thema::before { content: '+ '; }
.qa-thema:hover { border-style: solid; border-color: var(--primary); }
.qa-themen .qa-lade { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); padding: 8px 2px; }
.qa-themen .qa-thema-frei { border-style: solid; }

.pk-pause {
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 800 14px/1 inherit; font-family: inherit; cursor: pointer; margin-right: 8px;
}
.pk-pause:hover { border-color: var(--primary); background: var(--primary-soft); }

.qa-pillen {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 0 0 10px;
}
.qa-pille {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 8px 15px; font: 800 13px/1 inherit; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.qa-pille:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.qa-pille .a-ico { color: var(--primary); }
@media (max-width: 560px) {
  .qa-pillen { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .qa-pillen::-webkit-scrollbar { display: none; }
  .qa-pille { flex: 0 0 auto; }
}

.cmp-box {
  border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  padding: 12px 12px 10px; box-shadow: var(--shadow-sm);
}
.cmp-box textarea {
  border: none; background: none; padding: 4px 6px 10px; min-height: 62px;
  resize: none; max-height: 140px; font-size: 16px; width: 100%;
}
.cmp-box textarea:focus { outline: none; }
.cmp-werkzeuge { display: flex; align-items: center; gap: 8px; }
.cmp-fuell { flex: 1; }
.composer .wz {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 13px; cursor: pointer; padding: 0; font-family: inherit;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.composer .wz:hover { color: var(--primary-deep); border-color: var(--primary); background: var(--primary-soft); }
.composer .wz.nimmt-auf {
  color: #fff; background: var(--danger); border-color: var(--danger);
  animation: wz-puls 1.3s ease-in-out infinite;
}
@keyframes wz-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 0%, transparent); }
}
.cmp-werkzeuge { position: relative; }
.wz-menue {
  position: absolute; bottom: 52px; left: 0; z-index: 40; min-width: 226px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  box-shadow: var(--shadow-lg); padding: 7px;
}
.wz-menue button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: none; color: var(--ink); font: 800 13.5px/1.2 inherit; font-family: inherit;
  padding: 11px 12px; border-radius: 11px; cursor: pointer; text-align: left;
}
.wz-menue button:hover { background: var(--primary-soft); color: var(--primary-deep); }
.wz-menue .ic { color: var(--primary); flex: 0 0 auto; }
.wz-stand {
  margin: 0 0 9px; padding: 9px 13px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary-deep);
  font-size: 12.5px; font-weight: 800;
}
.wz-stand[hidden] { display: none; }
.werkzeug-vorgang {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  background: rgba(5, 8, 15, .2);
}
.werkzeug-vorgang[hidden] { display: none; }
.werkzeug-vorgang-karte {
  position: relative;
  pointer-events: auto;
  isolation: isolate;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  width: min(440px, calc(100vw - 40px));
  min-height: 112px;
  padding: 20px 21px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 94%, #101520);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(3, 8, 18, .38), 0 0 34px rgba(77, 185, 255, .2);
}
.werkzeug-vorgang-karte::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: alma-neon-kreisen 5s linear infinite;
}
.werkzeug-vorgang-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(51, 214, 255, .18), rgba(139, 92, 255, .18) 48%, rgba(255, 60, 158, .2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 22px rgba(51, 214, 255, .18);
}
.werkzeug-vorgang-symbol::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 3px solid rgba(139, 92, 255, .22);
  border-top-color: #33D6FF;
  border-right-color: #FF3C9E;
  border-radius: 50%;
  animation: werkzeug-vorgang-drehen 1.25s linear infinite;
}
.werkzeug-vorgang-symbol i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F7FAFF;
  box-shadow: 0 0 11px #33D6FF, 0 0 20px #8B5CFF;
  animation: werkzeug-vorgang-puls 1.25s ease-in-out infinite;
}
.werkzeug-vorgang-inhalt {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.werkzeug-vorgang-inhalt strong {
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.werkzeug-vorgang-inhalt > span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.38;
}
.werkzeug-vorgang-punkte {
  display: flex;
  align-self: end;
  gap: 4px;
  padding-bottom: 3px;
}
.werkzeug-vorgang-punkte i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #33D6FF;
  animation: werkzeug-vorgang-punkt 1.15s ease-in-out infinite;
}
.werkzeug-vorgang-punkte i:nth-child(2) { background: #8B5CFF; animation-delay: .15s; }
.werkzeug-vorgang-punkte i:nth-child(3) { background: #FF3C9E; animation-delay: .3s; }
@keyframes werkzeug-vorgang-drehen { to { transform: rotate(360deg); } }
@keyframes werkzeug-vorgang-puls { 50% { transform: scale(.7); opacity: .65; } }
@keyframes werkzeug-vorgang-punkt { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (max-width: 480px) {
  .werkzeug-vorgang { padding: 16px; }
  .werkzeug-vorgang-karte {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    width: min(100%, 390px);
    min-height: 104px;
    padding: 17px 18px;
    border-radius: 19px;
  }
  .werkzeug-vorgang-symbol { width: 48px; height: 48px; border-radius: 16px; }
  .werkzeug-vorgang-inhalt strong { font-size: 14.5px; }
  .werkzeug-vorgang-inhalt > span { font-size: 12px; }
  .werkzeug-vorgang-punkte { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .werkzeug-vorgang-karte::before,
  .werkzeug-vorgang-symbol::before,
  .werkzeug-vorgang-symbol i,
  .werkzeug-vorgang-punkte i { animation: none; }
}
.wz-tafel { position: fixed; inset: 0; z-index: 90; background: #0B0E14; display: flex; flex-direction: column; }
.wz-tafel-kopf {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid #232A38; color: #E6EBF2;
}
.wz-tafel-kopf b { font-size: 15px; font-weight: 900; }
.wz-fuell { flex: 1; }
.wz-tafel-knopf {
  border: 1px solid #333B4A; background: #171D28; color: #E6EBF2;
  border-radius: 12px; padding: 10px 16px; font: 800 13px/1 inherit; font-family: inherit; cursor: pointer;
}
.wz-tafel-knopf.haupt { background: linear-gradient(180deg, var(--primary), var(--primary-deep)); border-color: var(--primary-deep); }
.wz-tafel-flaeche { flex: 1; width: 100%; touch-action: none; cursor: crosshair; background: #0B0E14; }
.composer .icon-btn {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
  color: var(--ink);
}
.composer .send {
  position: relative;
  z-index: 0;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  box-shadow: 0 9px 22px rgba(0,0,0,.3), 0 0 20px rgba(126,190,255,.4);
  animation: alma-neon-kreisen 7s linear infinite;
}
.composer .send > svg { filter: drop-shadow(0 1px 2px rgba(6,12,24,.55)); }
.composer .send:hover { filter: brightness(1.1); }
.composer .send:disabled { opacity: .5; animation-play-state: paused; }
#photo-preview { margin: 0 0 8px; display: flex; }
#photo-preview .thumb { position: relative; display: inline-block; }
#photo-preview img { height: 64px; border-radius: 10px; border: 2px solid var(--primary); }
#photo-preview .rm {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--danger); color: #fff; border: none;
  font-size: 12px; padding: 0; line-height: 1;
}

.week { margin-bottom: 18px; }
.week h3 { font-size: 15px; margin-bottom: 8px; color: var(--primary-deep); }
.unit {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; width: 100%;
  font-size: 14px; text-align: left; font-family: inherit; color: var(--ink);
}
.unit:hover { border-color: var(--primary); }
.unit .st {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-deep);
}
.unit.done .st { background: var(--success-soft); color: var(--success); }
.unit.done { opacity: .75; }
.unit.locked { opacity: .55; cursor: not-allowed; }
.unit.locked:hover { border-color: var(--line); box-shadow: none; transform: none; }
.unit.locked .st { background: var(--line); color: var(--ink-soft); }
.unit b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.unit span { font-size: 12px; color: var(--ink-soft); }
.progressbar { height: 8px; background: var(--primary-soft); border-radius: 999px; overflow: hidden; margin: 6px 0 16px; }
.progressbar div { height: 100%; background: var(--success); border-radius: 999px; }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin-top: 10px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bars .bar { width: 100%; max-width: 26px; border-radius: 5px 5px 0 0; background: var(--primary); min-height: 3px; }
.bars .bar.zero { background: var(--danger-soft); border: 1px solid var(--danger); border-bottom: none; }
.bars .lbl { font-size: 10px; color: var(--ink-soft); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.tag.good { background: var(--success-soft); color: var(--primary-deep); }
.tag.weak { background: var(--danger-soft); color: var(--danger-deep); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(43, 45, 66, .45);
  display: flex; align-items: center; justify-content: center; z-index: 350;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.modal {
  background: var(--card); border-radius: 18px; padding: 20px 22px;
  width: 100%; max-width: 460px; max-height: min(85vh, 100%); overflow-x: hidden; overflow-y: auto;
}
.modal label {
  color: var(--primary-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin: 14px 0 9px;
}
.modal .muted {
  color: #526176;
  font-size: 13px !important;
  line-height: 1.45;
}
:root[data-theme="dark"] .modal .muted { color: #C6D2E4; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal-head b { font-size: 16px; color: var(--primary-deep); }
.modal-head .x { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: none; padding: 0; color: var(--ink-soft); }
.eltern-pin-setup .modal { width: min(440px, 100%); }
.eltern-pin-setup input { min-height: 48px; font-size: 18px; letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; }
.pin-setup-einstieg { margin: 0; color: var(--ink); line-height: 1.55; }
.pin-setup-hinweis { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--primary); border-radius: 12px; background: var(--primary-soft); color: var(--ink); font-size: 13px; line-height: 1.5; }
.pin-setup-hinweis b { color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.eltern-pin-setup .feedback { min-height: 21px; margin-top: 9px; color: var(--danger-deep); font-size: 13px; font-weight: 700; }
.eltern-pin-setup .feedback.ok { color: var(--success); }
.pin-setup-aktionen { display: grid; gap: 9px; margin-top: 10px; }
.pin-setup-aktionen button { min-height: 48px; width: 100%; white-space: normal; }
.pin-fehlt-hinweis { margin: 12px 0 0; }
.push-einrichtung .modal { width: min(480px, 100%); }
.push-einrichtung .modal-head { margin-bottom: 6px; }
.push-einrichtung-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px auto 12px; border-radius: 18px; background: var(--primary-soft); color: var(--primary-deep); }
.push-einrichtung p { color: var(--ink); line-height: 1.58; margin: 8px 0; }
.push-einrichtung .feedback { min-height: 21px; margin-top: 8px; color: var(--danger-deep); font-size: 13px; font-weight: 700; }
.push-einrichtung .feedback.ok { color: var(--success); }
.push-einrichtung-aktionen { display: grid; gap: 9px; margin-top: 14px; }
.push-einrichtung-aktionen button { min-height: 48px; width: 100%; white-space: normal; }
.verwaltung-modal input, .verwaltung-modal select, .verwaltung-modal textarea, .verwaltung-modal > button { min-height: 44px; max-width: 100%; }
.konto-anlegen-modal #nk-save { min-height: 48px; }
.konto-anlegen-modal .konto-form-hinweis { margin: 9px 0 13px; font-size: 13px !important; line-height: 1.55; }
.modal .termin-row { justify-content: space-between; border-bottom: 1px solid var(--line); padding: 8px 0; }
.modal .termin-row button { padding: 4px 10px; font-size: 12px; }
.tm-vonbis { margin-top: 4px; }
.tm-block + .tm-block { margin-top: 2px; }
.dt-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-reihe input[type="date"] { flex: 1 1 150px; min-width: 0; }
.dt-reihe input[type="time"] { flex: 0 1 118px; }
.tm-wdays { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wday { font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; transition: .12s; }
.wday:hover { color: var(--ink); }
.wday.an { background: var(--primary); border-color: var(--primary); color: #fff; }
.tm-plan { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 78%, var(--primary) 4%); }
.tm-plan[hidden] { display: none; }
.tm-plan input[type="time"] { max-width: 180px; }
.tm-tage { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.kind-anmelde-erinnerung .modal { width: min(430px, 100%); }
.startklar { position: relative; padding: 22px 18px 16px; border-radius: 24px; text-align: center;
  border: 1.6px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(140deg, #FFC46B, var(--neon-bernstein) 26%, var(--neon-pink) 50%, var(--neon-violett) 74%, var(--neon-cyan)) border-box;
  box-shadow: 0 0 24px rgba(255, 158, 44, .26), 0 0 66px rgba(139, 92, 255, .2), 0 26px 60px rgba(0, 0, 0, .55); }
.startklar.gepackt {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(140deg, #9BE3CD, var(--neon-mint) 30%, var(--neon-cyan) 62%, var(--neon-violett)) border-box;
  box-shadow: 0 0 24px rgba(34, 211, 166, .26), 0 0 66px rgba(51, 214, 255, .2), 0 26px 60px rgba(0, 0, 0, .55); }
.startklar > .x { position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--ink-soft); }
.startklar > .x:hover { background: rgba(255, 255, 255, .16); color: var(--ink); }
.sk-ring { position: relative; width: clamp(168px, 52vw, 200px); aspect-ratio: 1; margin: 4px auto 28px; }
.sk-perlen { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-perle { fill: rgba(255, 255, 255, .14); }
.sk-perle.voll { fill: var(--neon-bernstein); filter: drop-shadow(0 0 5px rgba(255, 158, 44, .9)); }
.sk-ring .sk-eule { position: absolute; inset: 12%; }
.sk-ring.ohne-perlen .sk-eule { inset: 4%; }
.sk-eule svg { width: 100%; height: 100%; display: block; }
.sk-stand { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255, 158, 44, .45);
  background: var(--surface-2); color: var(--neon-bernstein); white-space: nowrap;
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sk-stand.gepackt { border-color: rgba(82, 182, 154, .5); color: #9BE3CD; }
.startklar h2 { margin: 18px 0 5px; color: var(--ink); font-size: clamp(19px, 5.4vw, 22px); font-weight: 900; line-height: 1.2; }
.startklar > p { margin: 0 auto; max-width: 330px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.sk-faecher { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 15px; }
.sk-fach { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink); font-size: 13px; font-weight: 800; }
.sk-fach i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--skf); }
.sk-streifen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sk-karte { flex: 1 1 calc(50% - 4px); min-width: 128px; padding: 10px 8px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .05); color: inherit; cursor: pointer; text-align: center; }
.sk-karte:hover { background: rgba(255, 255, 255, .1); }
.sk-karte b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 900; }
.sk-karte small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-tasten { margin-top: 17px; }
.sk-haupt, .sk-still { display: block; width: 100%; border: 0; border-radius: 15px; cursor: pointer; font-weight: 900; }
.sk-haupt { min-height: 52px; color: #04121A; font-size: 16px;
  background: linear-gradient(135deg, #FFC46B, var(--neon-bernstein));
  box-shadow: 0 10px 26px rgba(255, 158, 44, .32); transition: transform .16s, filter .16s; }
.sk-haupt:hover { transform: translateY(-2px); filter: brightness(1.07); }
.sk-still { min-height: 46px; background: transparent; color: var(--ink-soft); font-size: 14.5px; }
.sk-still:hover { color: var(--ink); }
.kind-erinnerung-aktionen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.kind-erinnerung-aktionen button { min-height: 44px; }
@media (max-width: 520px) { .kind-erinnerung-aktionen button { width: 100%; } }

.hinweis-zeile {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px;
}
.hinweis-zeile:last-child { margin-bottom: 0; }
.hz-rot { background: var(--danger-soft); color: var(--danger-deep); }
.hz-gruen { background: var(--success-soft); color: #184E77; }
.hz-gelb { background: var(--sun-soft); color: #8a6200; }
.hinweis-karte { border-color: var(--primary); }
.hinweis-block { margin-bottom: 8px; }
.hinweis-block:last-child { margin-bottom: 0; }
.hinweis-block .hinweis-zeile { margin-bottom: 0; }
.lernzeiten { margin: 5px 0 0 34px; }
.lz-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--primary); background: none; border: none; padding: 3px 2px; user-select: none; }
.lz-chev { display: inline-flex; transition: transform .15s; }
.lernzeiten.offen .lz-chev { transform: rotate(180deg); }
.lz-liste { display: none; flex-wrap: wrap; gap: 6px; margin-top: 7px; max-height: 108px; overflow-y: auto; padding-right: 4px; }
.lernzeiten.offen .lz-liste { display: flex; }
@media (min-width: 861px) { .lernzeiten .lz-liste { display: flex; } .lernzeiten .lz-chev { display: none; } .lz-toggle { cursor: default; } }
.lz-fenster { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lz-bis { font-weight: 700; color: var(--ink-soft); }
.nav-logout { color: var(--ink-soft); }
.nav-logout:hover { color: var(--danger-deep); background: var(--danger-soft); }
.nav-kuendigung { text-decoration: none; }

.kf-pill {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  min-width: 0; min-height: 44px; border-radius: 13px; padding: 8px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.kf-pill.an { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary); }
.kf-title { width: 100%; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center; }
.kf-options {
  width: 100%; display: grid;
  grid-template-columns: repeat(var(--kf-count), minmax(0, 1fr)); gap: 8px;
}
.kf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-stand { justify-self: end; color: var(--ink-soft); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ziel-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ziel-zeile .ziel-select { width: auto; padding: 10px 12px; font-size: 13px; min-height: 44px; }
.tagesziel-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); font-weight: 800; }
.tagesziel-trigger:hover { border-color: var(--primary-deep); box-shadow: var(--shadow-sm); }
.tagesziel-form-trigger { width: 100%; min-height: 46px; margin-top: 0; }
.tagesziel-dialog-offen { overflow: hidden; }
.tagesziel-erklaerung { z-index: 350; }
.tagesziel-erklaerung .modal { width: min(640px, 100%); }
.tagesziel-erklaerung .modal-head .x { min-width: 44px; min-height: 44px; padding: 10px; flex: 0 0 auto; }
.tagesziel-einstieg { margin: 0; color: var(--ink); line-height: 1.55; }
.tagesziel-offiziell { margin-top: 14px; padding: 13px 14px; border: 1px solid var(--primary); border-radius: 13px; background: var(--primary-soft); }
.tagesziel-offiziell > b { display: block; color: var(--primary-deep); font-size: 13.5px; }
.tagesziel-offiziell p { margin: 5px 0 7px; color: var(--ink); font-size: 12.5px; line-height: 1.48; }
.tagesziel-quellen { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.tagesziel-offiziell a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-deep); font-size: 12.5px; font-weight: 800; }
.tagesziel-gruende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.tagesziel-gruende > div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tagesziel-gruende b, .tagesziel-gruende span { display: block; }
.tagesziel-gruende b { color: var(--primary-deep); font-size: 13px; margin-bottom: 4px; }
.tagesziel-gruende span { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.tagesziel-erklaerung h3 { margin: 16px 0 9px; font-size: 15px; color: var(--ink); }
.tagesziel-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tagesziel-option { min-height: 72px; padding: 12px; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.tagesziel-option b, .tagesziel-option span { display: block; }
.tagesziel-option b { color: var(--primary-deep); margin-bottom: 3px; }
.tagesziel-option span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.tagesziel-option.ausgewaehlt { border: 2px solid var(--primary); background: var(--primary-soft); padding: 11px; }
.tagesziel-hinweis { margin: 13px 0 0; }
.tagesziel-erklaerung .err { min-height: 18px; margin-top: 6px; }
.tagesziel-abbrechen { width: 100%; min-height: 44px; margin-top: 4px; }
@media (max-width: 560px) {
  .tagesziel-gruende, .tagesziel-optionen { grid-template-columns: 1fr; }
}
.reset-heute { padding: 6px 12px; font-size: 12.5px; }
.ziel-msg { font-size: 12.5px; font-weight: 700; }

.lw-save.gespeichert { background: var(--success-soft); color: #184E77; border-color: var(--success); }

.zettel-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.zettel-suche { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.zettel-suche .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.zettel-suche input { width: 100%; margin: 0; padding-left: 40px; border-radius: 999px; min-height: 44px; }
.zettel-filter { display: flex; align-items: center; gap: 6px; }
.zettel-filter > span { font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-right: 2px; }
.zettel-punkt {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s ease;
}
.zettel-punkt:hover { transform: scale(1.12); }
.zettel-punkt.an { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.zettel-punkt.alle {
  width: auto; height: 30px; padding: 0 13px; border-radius: 999px; background: var(--card); border-color: var(--line);
  font-family: inherit; font-size: 11px; font-weight: 900; color: var(--ink-soft);
}
.zettel-punkt.alle.an { border-color: var(--primary); color: var(--primary-deep); box-shadow: none; }
.zettel-zahl { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }

.pinnwand {
  position: relative; border-radius: 20px; padding: 22px 20px 26px; border: 1px solid var(--line);
  min-height: max(380px, calc(100dvh - 250px));
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.035) 0 2px, transparent 3px) 0 0 / 26px 26px,
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.03) 0 2px, transparent 3px) 9px 12px / 31px 31px,
    var(--wand);
  box-shadow: inset 0 2px 18px rgba(0,0,0,.07);
}
.zettel-wand { column-width: 320px; column-gap: 18px; }
.zettel {
  position: relative; width: 100%; break-inside: avoid; margin: 0 0 18px; display: block;
  border-radius: 3px 3px 12px 12px; padding: 24px 16px 30px; color: #2B2D42;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.10);
  transition: transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .2s ease;
}
.zettel::before {
  content: ''; display: block; width: 74px; height: 20px; margin: -32px auto 12px; transform: rotate(-2deg);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 4px rgba(0,0,0,.10);
}
.zettel:nth-child(4n+1) { transform: rotate(-1.5deg); }
.zettel:nth-child(4n+2) { transform: rotate(1.1deg); }
.zettel:nth-child(4n+3) { transform: rotate(-.6deg); }
.zettel:nth-child(4n+4) { transform: rotate(1.7deg); }
.zettel:hover { transform: rotate(0deg) translateY(-6px) scale(1.025); box-shadow: 0 22px 44px rgba(0,0,0,.26), 0 4px 8px rgba(0,0,0,.12); z-index: 5; }
.zettel-text { font-size: 15.5px; font-weight: 700; line-height: 1.62; word-break: break-word; }
.zettel-gross .zettel-text { font-size: 18px; font-weight: 800; line-height: 1.5; }
.zettel-fuss { display: flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 11px; font-weight: 800; color: rgba(43,45,66,.55); }
.zettel-x {
  position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(43,45,66,.10); color: rgba(43,45,66,.65); opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.zettel:hover .zettel-x, .zettel-x:focus-visible { opacity: 1; }
.zettel-x:hover { background: rgba(217,4,41,.16); color: #9D0208; }
.zettel-neu {
  width: 100%; break-inside: avoid; margin: 0 0 18px; min-height: 150px; cursor: pointer; font-family: inherit;
  border: 2px dashed color-mix(in srgb, var(--primary) 48%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 900; padding: 20px; transition: transform .18s ease, box-shadow .18s ease;
}
.zettel-neu:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.18); }
.zettel-leer { column-span: all; margin: 6px 2px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }

.rechner-ctrl { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.rechner-auswahl { min-width: 0; }
.seg { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-sm); }
.seg-btn {
  border: none; border-radius: 999px; background: none; color: var(--ink-soft);
  padding: 9px 17px; font-family: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: .16s;
}
.seg-btn.an { background: linear-gradient(180deg, var(--primary), var(--primary-deep)); color: #fff; box-shadow: 0 6px 14px rgba(26,117,159,.3); }
.seg-btn:hover:not(.an) { color: var(--ink); }

.tr-card { max-width: 560px; }
.tr-key.span2 { grid-column: span 2; }
.tr-grid-b { grid-template-columns: repeat(4, 1fr); }
.tr-display-b { min-height: 96px; justify-content: center; }

.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; line-height: 1.04; }
.frac-z { padding: 0 5px; }
.frac-n { padding: 1px 5px 0; border-top: 2px solid currentColor; }
.b-op { margin: 0 6px; font-weight: 800; }
.b-vz { margin-right: 1px; }
.tr-bruch-anzeige {
  color: #eaf1f8; font-size: 27px; font-weight: 800;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  min-height: 46px; justify-content: flex-end; width: 100%;
}

#bruch-weg-wrap { margin-top: 18px; }
#bruch-weg-wrap:empty { display: none; }
.bruch-weg h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ink); }
.weg-zeilen { display: flex; flex-direction: column; gap: 14px; }
.weg-zeile { font-size: 21px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 1px; color: var(--ink); }
.weg-erg {
  width: 100%; text-align: left; background: none; border: none;
  margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--line); border-radius: 0;
  font-size: 22px; font-weight: 800; color: var(--primary-deep); cursor: pointer;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
}
.weg-erg.ohne-weg { border-top: none; margin-top: 0; padding-top: 0; }
.weg-erg:hover { border-color: var(--line); }
.weg-erg > span:first-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weg-dez { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.weg-erkl-hint {
  font-size: 13px; font-weight: 700; color: var(--primary);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-soft); padding: 5px 12px; border-radius: 999px;
}

.bruch-erkl { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.bruch-erkl > b { font-size: 15.5px; color: var(--primary-deep); display: block; margin-bottom: 6px; }
.bruch-erkl p { font-size: 14.5px; line-height: 1.6; margin: 8px 0; }
.erkl-bsp { background: var(--lime-soft); border-radius: 10px; padding: 10px 13px; }
.erkl-dez { color: var(--ink-soft); font-size: 13.5px; }
.erkl-balken-wrap { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.erkl-balken { display: flex; gap: 4px; max-width: 340px; }
.erkl-balken span { flex: 1; height: 28px; border-radius: 6px; background: var(--primary-soft); border: 1px solid var(--line); }
.erkl-balken span.voll { background: var(--primary); border-color: var(--primary); }

.tr-zettel-x {
  position: absolute; top: 4px; right: 5px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(43, 45, 66, .14); color: #2B2D42;
  font-size: 15px; font-weight: 700; line-height: 1; opacity: .65;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.tr-zettel:hover .tr-zettel-x { opacity: 1; }
.tr-zettel-x:hover { background: var(--danger); color: #fff; opacity: 1; }

.tr-layout {
  display: flex; gap: 22px; align-items: stretch; flex-wrap: wrap;
  min-height: clamp(430px, calc(100dvh - 262px), 1180px);
}
.tr-layout .tr-card { flex: 0 0 auto; align-self: flex-start; }
.tr-verlauf {
  position: relative;
  flex: 1 1 300px; min-width: 250px;
  border-radius: 18px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-soft) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  touch-action: none;
}
.tr-verlauf-leer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 24px; text-align: center;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; pointer-events: none;
}
.tr-zettel {
  position: absolute; z-index: 1;
  border: none; border-radius: 13px; padding: 14px 16px;
  width: 176px; cursor: grab; font-family: inherit;
  display: flex; flex-direction: column; gap: 5px; text-align: left; color: #2B2D42;
  box-shadow: 0 9px 22px rgba(43, 45, 66, .24);
  touch-action: none;
  transition: box-shadow .2s ease;
}
.tr-zettel:hover { z-index: 3; box-shadow: 0 14px 30px rgba(43, 45, 66, .34); }
.tr-zettel.zieht { z-index: 5; cursor: grabbing; box-shadow: 0 20px 40px rgba(43, 45, 66, .4); }
.tz-aufgabe { font-size: 15px; font-weight: 800; word-break: break-word; line-height: 1.3; }
.tz-erg { font-size: 17px; font-weight: 900; color: #184E77; }
.tr-modus { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.tr-display {
  position: relative; z-index: 0;
  background: linear-gradient(165deg, #26344b, #141b28); border-radius: 20px; padding: 20px; margin-bottom: 16px;
  min-height: 124px; display: flex; flex-direction: column; justify-content: flex-end; text-align: right;
  font-family: ui-monospace, Menlo, monospace; overflow-x: auto;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.46), 0 1px 0 rgba(255,255,255,.05);
}
.tr-display::before {
  content: '';
  position: absolute; z-index: -1; inset: -2px; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: alma-neon-kreisen 8s linear infinite;
}
.tr-ausdruck { color: #BFE9FF; font-size: clamp(23px, 4.2vw, 31px); font-weight: 700; min-height: 34px; white-space: nowrap; }
.tr-ergebnis {
  color: #fff; font-size: clamp(34px, 6.2vw, 48px); font-weight: 900; min-height: 46px; letter-spacing: -.02em;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #7BE7FF, #B49BFF, #FF7CC0, #FFD07A, #7CF0C4, #7BE7FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: alma-neon-kreisen 11s linear infinite;
}
.tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.tr-wiss { grid-template-columns: repeat(5, 1fr); }
.tr-key {
  position: relative; z-index: 0;
  border: 0; border-radius: 18px; padding: 19px 0; font-family: inherit;
  font-size: 23px; font-weight: 900; cursor: pointer; background: var(--card); color: var(--ink);
  box-shadow: 0 6px 16px rgba(6, 14, 28, .16);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.tr-key::before {
  content: '';
  position: absolute; z-index: -1; inset: -2px; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: alma-neon-kreisen 9s linear infinite;
}
.tr-key:nth-child(4n+2)::before { animation-delay: -2.2s; }
.tr-key:nth-child(4n+3)::before { animation-delay: -4.4s; }
.tr-key:nth-child(4n)::before { animation-delay: -6.6s; }
.tr-key:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(6, 14, 28, .24); filter: brightness(1.06); }
.tr-key:active { transform: translateY(1px); box-shadow: none; }
.tr-key.op { background: linear-gradient(160deg, #3AD7FF, #8B5CFF); color: #FFFFFF; }
.tr-key.act { background: linear-gradient(160deg, #303B52, #465470); color: #EDF4FF; }
.tr-key.fn { background: linear-gradient(160deg, #35E5A1, #22A6C9); color: #06253A; font-size: 16px; padding: 14px 0; }
.tr-key.gleich {
  color: #FFFFFF;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  box-shadow: 0 10px 24px rgba(6, 14, 28, .3), 0 0 22px rgba(126, 190, 255, .42);
  animation: alma-neon-kreisen 7s linear infinite;
}
.tr-key.gleich::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tr-key::before,
  .tr-key.gleich,
  .tr-display::before,
  .tr-ergebnis { animation: none; }
}

.tr-modul-laden {
  min-height: min(620px, 64vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: center;
}
.tr-modul-laden h2 { margin: 0; color: var(--ink); }
.tr-modul-laden p { margin: 0; color: var(--ink-soft); font-weight: 700; }
.tr-modul-ladezeichen {
  width: 44px;
  height: 44px;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: tr-laden 1s linear infinite;
}
@keyframes tr-laden { to { transform: rotate(360deg); } }

.tr-bereiche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.tr-bereich-tab {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tr-bereich-tab:hover:not(.an) { background: var(--bg); color: var(--ink); }
.tr-bereich-tab.an { background: var(--primary); color: #fff; box-shadow: var(--shadow-btn); }

.tr-arbeitsbereich {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.tr-arbeitskopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.tr-arbeitskopf h2 { margin: 0; font-size: 21px; color: var(--ink); }
.tr-arbeitskopf p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; line-height: 1.45; }
.tr-netz-aktionen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tr-netz-aktionen .mode-pill { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; }

.tr-netz-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(94px, auto));
  gap: 18px;
  min-height: 650px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--bg) 74%, var(--card));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-soft) 28%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.tr-netz-linien {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tr-netz-node {
  position: relative;
  z-index: 2;
  grid-column: var(--netz-spalte) / span 4;
  grid-row: var(--netz-zeile);
  align-self: center;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 2px solid color-mix(in srgb, var(--netz-farbe) 78%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 94%, var(--netz-farbe));
  box-shadow: var(--shadow-md);
}
.tr-netz-node-kopf {
  display: flex;
  align-items: center;
  gap: clamp(3px, .3vw, 5px);
  margin-bottom: 10px;
}
.tr-netz-titel {
  width: 100%;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}
.tr-netz-titel:focus { outline: 2px solid var(--netz-farbe); outline-offset: 1px; }
.tr-netz-entfernen,
.tr-netz-loesen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
}
.tr-netz-loesen { width: 36px; height: 36px; }
.tr-netz-formel {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 52px minmax(70px, 1fr) 22px minmax(76px, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.tr-netz-zahl,
.tr-netz-resultat {
  width: 100%;
  min-height: 52px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--netz-farbe) 70%, var(--line));
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tr-netz-resultat {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--netz-farbe);
  background: color-mix(in srgb, var(--bg) 82%, var(--netz-farbe));
}
.tr-netz-eingang-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.tr-netz-verknuepft { color: var(--netz-farbe); }
.tr-netz-op {
  min-height: 52px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.tr-netz-gleich { color: var(--ink-soft); font-size: 22px; font-weight: 900; text-align: center; }
.tr-netz-port {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
  touch-action: none;
}
.tr-netz-port::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  border: 4px solid color-mix(in srgb, var(--netz-farbe) 32%, var(--card));
  border-radius: 50%;
  background: var(--netz-farbe);
  box-shadow: 0 0 0 2px var(--netz-farbe);
  content: "";
  transform: translate(-50%, -50%);
}
.tr-netz-port:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.tr-netz-port-ein { position: absolute; left: -45px; top: 50%; transform: translateY(-50%); }
.tr-netz-hilfe { margin: 14px 2px 0; color: var(--ink-soft); font-size: 13px; font-weight: 800; }

.tr-visual-layout {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(430px, 1.25fr);
  gap: 18px;
  align-items: stretch;
}
.tr-visual-layout > .card { margin: 0; min-width: 0; }
.tr-visual-eingabe h3,
.tr-visual-ausgabe h3 { margin: 0 0 7px; font-size: 19px; }
.tr-visual-werte {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}
.tr-visual-werte label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}
.tr-visual-werte label span { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.tr-visual-werte input:not([type="range"]) {
  width: 116px;
  min-height: 48px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}
.tr-visual-regler { width: 100%; min-height: 44px; accent-color: var(--teal); }
.tr-visual-formel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding: 22px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}
.tr-visual-bruch { display: inline-flex; flex-direction: column; min-width: 110px; color: var(--ink); text-align: center; }
.tr-visual-bruch b:first-child { padding-bottom: 5px; border-bottom: 2px solid var(--ink); color: #9A7BFF; }
.tr-visual-bruch b:last-child { padding-top: 5px; color: #42BFAF; }
.tr-visual-formel strong {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.tr-visual-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 420px);
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
}
.tr-visual-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.tr-visual-tabs button.an { background: var(--primary); color: #fff; }
.tr-visual-canvas {
  display: block;
  width: 100%;
  height: clamp(360px, 48vh, 560px);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 80%, var(--card));
}

.tr-mini-rechner { min-width: 0; }
.tr-mini-modi {
  display: grid;
  grid-template-columns: .8fr 1.45fr .8fr;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 82%, var(--card));
}
.tr-mini-modi button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.tr-mini-modi button.an { background: var(--primary); color: #fff; box-shadow: var(--shadow-btn); }
.tr-mini-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 122px;
  margin: 12px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 88%, var(--card));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tr-mini-display span { color: var(--ink-soft); font-size: 18px; }
.tr-mini-display strong { margin-top: 8px; color: var(--ink); font-size: 38px; line-height: 1; }
.tr-mini-wiss,
.tr-mini-tasten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.tr-mini-wiss { margin-bottom: 7px; }
.tr-mini-wiss button,
.tr-mini-tasten button {
  min-width: 0;
  min-height: 50px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 78%, var(--card));
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
}
.tr-mini-wiss button { min-height: 44px; color: var(--primary); font-size: 13px; }
.tr-mini-tasten button.op { background: color-mix(in srgb, var(--primary) 20%, var(--card)); color: var(--primary); }
.tr-mini-tasten button.gleich { background: var(--primary); color: #fff; }

.tr-netz-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.tr-netz-rechner {
  align-self: start;
  margin: 0;
  padding: 16px;
}
.tr-netz-rechner .tr-mini-modi {
  grid-template-columns: 1fr 1.75fr 1fr;
}
.tr-netz-rechner .tr-mini-modi button {
  padding-inline: 2px;
  font-size: 9px;
}
.tr-netz-flaeche { min-width: 0; }
.tr-netz-kopf {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 54px;
  margin-bottom: 10px;
}
.tr-netz-aktionen .tr-netz-zurueck svg { transform: rotate(0); }
.tr-netz-aktionen .tr-netz-vor svg { transform: rotate(180deg); }
.tr-netz-aktionen button:disabled { opacity: .38; cursor: default; }
.tr-netz-layout .tr-netz-board {
  grid-template-rows: repeat(8, minmax(72px, auto));
  min-height: 700px;
  padding: 22px 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tr-netz-layout .tr-netz-node {
  grid-column: var(--netz-spalte) / span 6;
  justify-self: start;
  width: min(100%, 310px);
  min-height: 92px;
  padding: 12px 22px;
  border-width: 2px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 86%, var(--card));
  box-shadow: 0 12px 34px rgba(4, 9, 20, .24);
}
.tr-netz-layout .tr-netz-entfernen {
  position: absolute;
  z-index: 4;
  top: -16px;
  right: -16px;
  opacity: 0;
}
.tr-netz-layout .tr-netz-node:hover .tr-netz-entfernen,
.tr-netz-layout .tr-netz-entfernen:focus-visible { opacity: 1; }
.tr-netz-layout .tr-netz-formel {
  grid-template-columns: minmax(44px, 1fr) 40px minmax(44px, 1fr) 20px minmax(52px, 1fr) 44px;
  gap: 4px;
}
.tr-netz-layout .tr-netz-zahl,
.tr-netz-layout .tr-netz-resultat,
.tr-netz-layout .tr-netz-op {
  min-height: 54px;
  padding: 4px;
  border: 0;
  background: transparent;
  font-size: clamp(22px, 2vw, 32px);
}
.tr-netz-layout .tr-netz-zahl { color: var(--ink); }
.tr-netz-layout .tr-netz-resultat,
.tr-netz-layout .tr-netz-verknuepft { color: var(--netz-farbe); }
:root[data-theme="dark"] .tr-netz-layout .tr-netz-zahl,
:root[data-theme="dark"] .tr-netz-layout .tr-netz-op {
  background: transparent;
}
.tr-netz-layout .tr-netz-op {
  appearance: none;
  text-align: center;
  text-align-last: center;
}
.tr-netz-layout .tr-netz-loesen {
  position: absolute;
  right: -2px;
  bottom: -26px;
  width: 32px;
  height: 32px;
  opacity: 0;
}
.tr-netz-layout .tr-netz-eingang-wrap:hover .tr-netz-loesen,
.tr-netz-layout .tr-netz-loesen:focus-visible { opacity: 1; }
.tr-netz-zughinweis {
  position: absolute;
  z-index: 3;
  top: 18%;
  left: 44%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #42D6C3;
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 88%, #42D6C3);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.tr-netz-layout .tr-netz-hilfe { text-align: center; }

.tr-visual-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 16px;
  align-items: stretch;
}
.tr-visual-shell > .card { min-width: 0; margin: 0; padding: 16px; }
.tr-visual-werkzeugzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.tr-visual-werkzeugzeile .tr-mini-modi { width: min(100%, 320px); }
.tr-visual-wechsel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
}
.tr-visual-wechsel button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.tr-visual-wechsel button.an { background: var(--primary); color: #fff; }
.tr-visual-thema { padding: 12px 12px 6px; }
.tr-visual-thema h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: 23px;
}
.tr-visual-fahrrad { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.tr-visual-thema p { margin: 7px 0 0; color: var(--ink-soft); font-weight: 700; }
.tr-visual-schritt {
  margin-top: 12px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg));
}
.tr-visual-schritt-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-visual-schritt-kopf > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}
.tr-visual-schritt + .tr-visual-schritt .tr-visual-schritt-kopf > span { background: #8B6BD8; }
.tr-visual-schritt-kopf h3 { margin: 0; color: var(--ink); font-size: 16px; }
.tr-visual-shell .tr-visual-werte {
  gap: 8px;
  margin-top: 8px;
  padding: 4px 12px 0 42px;
  border: 0;
  background: transparent;
}
.tr-visual-shell .tr-visual-werte label { font-size: 17px; }
.tr-visual-shell .tr-visual-werte label > span {
  display: grid;
  grid-template-columns: 22px 18px minmax(92px, 116px) 34px;
  align-items: center;
  gap: 5px;
}
.tr-visual-shell .tr-visual-werte label i,
.tr-visual-shell .tr-visual-werte label em { color: #9A7BFF; font-style: normal; font-weight: 900; }
.tr-visual-shell .tr-visual-werte label:nth-child(2) i,
.tr-visual-shell .tr-visual-werte label:nth-child(2) em { color: #42D6C3; }
.tr-visual-shell .tr-visual-werte input:not([type="range"]) {
  width: 100%;
  min-height: 42px;
  border: 1px solid currentColor;
  background: var(--bg);
  text-align: left;
}
.tr-visual-shell .tr-visual-regler { min-height: 30px; margin-top: 0; }
.tr-visual-skala {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}
.tr-visual-shell .tr-visual-formel {
  margin: 5px 0 0;
  padding: 4px 14px;
  border: 0;
  background: transparent;
}
.tr-visual-ergebnis {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin: 5px 38px 0;
  padding: 6px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
.tr-visual-ergebnis strong {
  min-width: 82px;
  padding: 7px 15px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 26px;
  text-align: center;
}
.tr-visual-aufgabe .tr-mini-kompakt { width: min(100%, 270px); margin-top: 10px; }
.tr-visual-aufgabe .tr-mini-kompakt .tr-mini-tasten button { min-height: 37px; }
.tr-visual-ausgabe .tr-visual-tabs { margin-bottom: 13px; }
.tr-visual-diagramm {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg) 84%, var(--card));
}
.tr-visual-diagramm.aktiv { border-color: color-mix(in srgb, var(--primary) 65%, var(--line)); }
.tr-visual-diagramm h3 { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; }
.tr-visual-shell .tr-visual-canvas { margin: 0; border: 0; border-radius: 10px; background: transparent; }
.tr-visual-shell .tr-visual-graph { height: 260px; }
.tr-visual-shell .tr-visual-bruchbild { height: 220px; }

@media (min-width: 1251px) {
  html.route-alma-rechner { --sidebar-w: 170px; }
  html.route-alma-rechner .sidebar { padding-inline: 7px; }
  html.route-alma-rechner .sidebar .brand { margin-inline: 1px; padding-inline: 3px; }
  html.route-alma-rechner .sidebar .nav-sec {
    padding-inline: 5px;
    font-size: 8.5px;
  }
  html.route-alma-rechner .sidebar .nav-item {
    gap: 4px;
    padding: 3px 5px;
    font-size: 10.5px;
  }
  html.route-alma-rechner .sidebar .nav-item .ico {
    width: 27px;
    height: 27px;
  }
  html.route-alma-rechner .sidebar .nav-item .ico .app-ico {
    width: 25px !important;
    height: 25px !important;
  }
  html.route-alma-rechner .sidebar .top-goal {
    padding: 7px 8px 8px;
  }
  html.route-alma-rechner .sidebar .top-goal .tg-title {
    gap: 3px;
    font-size: 9.5px;
    white-space: nowrap;
  }
  html.route-alma-rechner .sidebar .top-goal .tg-count { font-size: 10px; }
  html.route-alma-rechner .sidebar .top-goal .tg-count b { font-size: 12px; }
  html.route-alma-rechner .sidebar .top-goal .tg-note { font-size: 9px; }
  .tr-bereiche {
    width: 520px;
    margin: -83px auto 12px;
  }
  .tr-visual-shell {
    width: 116.28%;
    transform: scale(.86);
    transform-origin: top left;
    margin-bottom: -124px;
  }
}

@media (max-width: 1250px) {
  .tr-visual-shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .tr-netz-layout { grid-template-columns: minmax(0, 1fr); }
  .tr-netz-rechner { width: min(100%, 320px); }
  .tr-netz-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
    overflow: visible;
  }
  .tr-netz-node { grid-column: 1 / -1 !important; grid-row: auto !important; width: min(100%, 660px); }
  .tr-netz-node:nth-of-type(even) { justify-self: end; }
  .tr-visual-layout { grid-template-columns: minmax(0, 1fr); }
  .tr-visual-canvas { height: clamp(330px, 46vh, 500px); }
}

@media (max-width: 680px) {
  .tr-bereiche { gap: 3px; padding: 4px; margin-bottom: 12px; }
  .tr-bereich-tab { min-height: 48px; padding-inline: 6px; font-size: 12.5px; }
  .tr-arbeitsbereich { padding: 12px; border-radius: 18px; }
  .tr-arbeitskopf { align-items: stretch; flex-direction: column; margin-bottom: 12px; }
  .tr-netz-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .tr-netz-aktionen .mode-pill { justify-content: center; width: 100%; padding-inline: 8px; }
  .tr-netz-board { gap: 28px; padding: 12px 12px 18px 26px; border-radius: 16px; background-size: 20px 20px; }
  .tr-netz-node { padding: 12px; border-radius: 15px; }
  .tr-netz-formel { grid-template-columns: minmax(58px, 1fr) 44px minmax(58px, 1fr) 16px minmax(64px, 1fr) 44px; gap: 5px; }
  .tr-netz-zahl, .tr-netz-resultat { min-height: 48px; padding-inline: 5px; font-size: 18px; }
  .tr-netz-op { min-height: 48px; font-size: 18px; }
  .tr-netz-port-ein { left: -43px; }
  .tr-netz-hilfe { line-height: 1.45; }
  .tr-visual-werte { padding: 14px; }
  .tr-visual-werte label { align-items: flex-start; flex-direction: column; }
  .tr-visual-werte label span, .tr-visual-werte input:not([type="range"]) { width: 100%; }
  .tr-visual-formel { gap: 9px; font-size: 17px; }
  .tr-visual-formel strong { width: 100%; text-align: center; font-size: 21px; }
  .tr-visual-canvas { height: 330px; }
}

@media (max-width: 680px) {
  .tr-mini-modi button { padding-inline: 4px; font-size: 10.5px; }
  .tr-netz-rechner { width: 100%; padding: 12px; }
  .tr-netz-kopf { align-items: stretch; min-height: 0; }
  .tr-netz-layout .tr-netz-board { padding-inline: 38px 8px; overflow: visible; }
  .tr-netz-layout .tr-netz-node { width: 100%; min-height: 84px; padding-inline: 10px; }
  .tr-netz-layout .tr-netz-formel {
    grid-template-columns: minmax(46px, 1fr) 38px minmax(46px, 1fr) 16px minmax(52px, 1fr) 44px;
    gap: 2px;
  }
  .tr-netz-layout .tr-netz-zahl,
  .tr-netz-layout .tr-netz-resultat,
  .tr-netz-layout .tr-netz-op { font-size: 18px; }
  .tr-netz-zughinweis { display: none; }
  .tr-visual-shell > .card { padding: 12px; }
  .tr-visual-werkzeugzeile { align-items: stretch; flex-direction: column; }
  .tr-visual-werkzeugzeile .tr-mini-modi,
  .tr-visual-wechsel { width: 100%; min-width: 0; }
  .tr-visual-thema { padding-inline: 4px; }
  .tr-visual-thema h2 { font-size: 20px; }
  .tr-visual-schritt { padding: 13px 10px; }
  .tr-visual-shell .tr-visual-werte { padding: 8px 0 4px; }
  .tr-visual-shell .tr-visual-werte label > span {
    grid-template-columns: 20px 16px minmax(0, 1fr) 30px;
    width: 100%;
  }
  .tr-visual-ergebnis { justify-content: center; margin-inline: 0; }
  .tr-visual-aufgabe .tr-mini-kompakt { width: 100%; }
  .tr-visual-shell .tr-visual-graph { height: 280px; }
  .tr-visual-shell .tr-visual-bruchbild { height: 255px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-modul-ladezeichen { animation: none; border-color: var(--primary); }
}

.kurven-legende {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.kurven-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 9px; border: 3px solid transparent; padding: 0; }
.swatch.sel { border-color: var(--ink); }
.swatch:hover { border-color: var(--ink-soft); }
.picker-grid button { position: relative; }
.mini-x {
  position: absolute; top: 1px; right: 7px; font-size: 15px; opacity: .75; cursor: pointer;
}
.mini-x:hover { opacity: 1; }

.plan-wrap { overflow-x: auto; }
.plan-grid { display: grid; grid-template-columns: 46px 100px repeat(5, minmax(118px, 1fr)); gap: 8px; min-width: 820px; }
.plan-grid .ph { font-size: 13px; font-weight: 700; color: var(--primary-deep); text-align: center; padding: 6px 0; }
.plan-grid .ph-zeit { display: flex; align-items: center; justify-content: center; gap: 5px; }
.plan-grid .ph-zeit svg { flex: 0 0 auto; }
.plan-grid .pn { display: flex; align-items: stretch; }
.plan-cell {
  min-height: 62px; border: none; border-radius: 15px;
  font-family: inherit; font-weight: 800; font-size: 13.5px;
  cursor: pointer; padding: 9px 13px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, box-shadow .14s ease, filter .1s;
}
.plan-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.04); }
.plan-cell:active { transform: translateY(0); }
.plan-cell.leer {
  background: var(--card); border: 1.5px dashed var(--line); color: var(--ink-soft);
  font-weight: 700; align-items: center; justify-content: center; font-size: 18px; box-shadow: none;
}
.plan-cell.leer:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); }
.plan-grid .ph { font-size: 13.5px; font-weight: 800; color: var(--primary-deep); }
.plan-tage { display: none; }
.plan-tag { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.plan-tag h2 { margin: 0 0 12px; text-align: center; font-size: 17px; }
.plan-tag-zeile { display: grid; grid-template-columns: 44px 92px minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 8px; }
.plan-tag-zeile:first-of-type { margin-top: 0; }
.plan-tag .plan-cell { width: 100%; min-height: 56px; }
.plan-tag .pn-zeit { min-height: 56px; }

.pn-nr-knopf {
  width: 100%; min-height: 62px; height: 100%;
  border: 1.5px solid var(--fc); border-radius: 15px;
  background: #1e2b3f; color: var(--fc); cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 22%, transparent);
  font: 800 19px/1 Nunito, sans-serif; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: transform .1s ease, background .14s ease;
}
.pn-nr-knopf:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--fc) 22%, #1e2b3f); }
.pn-nr-knopf:focus-visible { outline: 2px solid var(--fc); outline-offset: 2px; }
.plan-grid .ph-nr { text-align: center; }
.pn-zeit {
  position: relative;
  width: 100%; min-height: 62px; height: 100%;
  border: 1.5px solid color-mix(in srgb, var(--fc) 52%, var(--line)); border-radius: 15px;
  padding: 6px 4px 6px 16px; cursor: pointer; background: #182234; color: #fff;
  font: 800 12.5px/1.25 Nunito, sans-serif; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .1s ease, box-shadow .14s ease, background .14s ease;
}
.pn-zeit::after {
  content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--fc);
}
.pn-zeit:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pn-zeit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pn-zeit-bis { position: relative; padding-top: 3px; opacity: .82; font-weight: 750; }
.pn-zeit-bis::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: .45;
}
.pn-zeit.leer {
  border-style: dashed; background: #16202f;
  color: color-mix(in srgb, var(--fc) 100%, #fff 42%);
  font-size: 11.5px; font-weight: 800;
}
.pn-zeit.leer:hover { background: color-mix(in srgb, var(--fc) 16%, #16202f); }
.pn-zeit-setzen { display: inline-flex; align-items: center; gap: 4px; }
.pn-zeit-setzen svg { flex: 0 0 auto; }

.zeit-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.zeit-felder label { display: grid; gap: 6px; margin: 0; color: var(--ink-soft); font-size: 12.5px; font-weight: 750; }
.zeit-felder input { width: 100%; min-height: 46px; margin: 0; box-sizing: border-box;
  font-size: 16px; font-weight: 700; text-align: center; }
.zeit-aktion { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
.zeit-aktion button { min-height: 44px; flex: 1 1 140px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.picker-grid button {
  border: none; border-radius: 10px; padding: 14px 12px;
  font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: left;
}
.picker-grid button.frei { background: #fff; border: 1.5px dashed var(--line); color: var(--ink-soft); }

.nutzer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.4fr) max-content minmax(0, auto);
  align-items: center; column-gap: 14px; row-gap: 8px;
  border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 14px;
}
.nr-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-mail a { color: var(--primary-deep); text-decoration: none; }
.nr-mail a:hover { text-decoration: underline; }
.nutzer-row > * { min-width: 0; }
.nr-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-user { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-actions { display: grid; grid-template-columns: repeat(5, 158px); gap: 8px; align-items: stretch; justify-content: end; }
.nr-actions > button { width: 100%; min-height: 44px; white-space: nowrap; }
.nr-actions > .nr-leer { visibility: hidden; }
@media (max-width: 1400px) { .nr-actions { grid-template-columns: repeat(3, 158px); } }
@media (max-width: 1080px) { .nr-actions { grid-template-columns: repeat(2, minmax(0, 158px)); } }
@media (max-width: 720px) {
  .nutzer-row { grid-template-columns: minmax(0, 1fr); }
  .nr-name, .nr-user, .nr-rolle { grid-column: 1; }
  .nr-name, .nr-user { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .nr-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; align-items: stretch; }
  .nr-actions button { width: 100%; min-height: 44px; padding: 8px; white-space: normal; line-height: 1.25; }
  .nr-actions .inaktiv { grid-column: 1 / -1; }
}
.nutzer-row .rolle {
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: var(--primary-soft); color: var(--primary-deep);
}
.nutzer-row .rolle.kind { background: var(--success-soft); }
.nutzer-row .rolle.admin { background: var(--primary); color: #fff; }
.nutzer-row .inaktiv { color: var(--danger-deep); font-weight: 700; font-size: 12px; }
.nutzer-row .spacer { flex: 1; }
.nutzer-row button { padding: 6px 12px; font-size: 12.5px; }
.verwaltung-seite, .verwaltung-seiteninhalt { min-width: 0; width: 100%; }
[data-ps-block][hidden] { display: none !important; }
.verwaltung-rail-layout { display: grid; grid-template-columns: 236px 1fr; gap: 18px; align-items: start; }
.verwaltung-rail-buehne { min-width: 0; }
.verwaltung-rail { position: sticky; top: 14px; display: grid; gap: 2px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.verwaltung-rail-titel { padding: 12px 10px 4px; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.verwaltung-rail-titel:first-child { padding-top: 4px; }
.verwaltung-rail-btn { --seg: var(--primary); display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; border: 0; border-left: 3px solid transparent; border-radius: 10px; padding: 9px 9px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; touch-action: manipulation; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.verwaltung-rail-btn:hover { background: var(--bg); color: var(--ink); }
.verwaltung-rail-btn.aktiv { background: color-mix(in srgb, var(--seg) 18%, var(--card)); color: var(--ink); border-left-color: var(--seg); }
.verwaltung-rail-btn.verwaltung-rail-unter { min-height: 36px; padding-left: 16px; font-size: 12.5px; }
.verwaltung-rail-punkt { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--seg); }
.verwaltung-rail-txt { flex: 1; min-width: 0; }
.verwaltung-rail-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
@media (max-width: 1020px) {
  .verwaltung-rail-layout { grid-template-columns: 1fr; }
  .verwaltung-rail { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .verwaltung-rail-titel { width: 100%; padding: 6px 4px 2px; }
  .verwaltung-rail-btn { width: auto; flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; }
  .verwaltung-rail-btn.aktiv { border-bottom-color: var(--seg); }
}
@media (prefers-reduced-motion: reduce) { .verwaltung-rail-btn { transition: none; } }
.verwaltung-reiter-badges { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.verwaltung-reiter-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.verwaltung-reiter-badge.neu { background: var(--success); }
.verwaltung-reiter-badge.hinweis { background: var(--sun); color: #2e2207; }
.verwaltung-reiter-badge.warnung { background: var(--danger); }
.verwaltung-meldungslegende { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 16px; margin: -7px 2px 14px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; }
.verwaltung-meldungslegende span { display: inline-flex; align-items: center; gap: 5px; }
.verwaltung-meldungslegende b { color: var(--ink); }
.verwaltung-meldungslegende i { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 9px; box-shadow: 0 0 0 2px var(--card); }
.verwaltung-meldungslegende i.neu { background: var(--success); }
.verwaltung-meldungslegende i.hinweis { background: var(--sun); }
.verwaltung-meldungslegende i.warnung { background: var(--danger); }
.fam-klappknopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
.verwaltung-lehrplanstand { display: grid; gap: 5px; margin-bottom: 14px; padding: 18px 20px; border: 1px solid var(--primary); border-radius: 16px; background: linear-gradient(135deg, var(--primary-soft), var(--card)); box-shadow: var(--shadow-sm); }
.verwaltung-lehrplanstand > span { color: var(--primary-deep); font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.verwaltung-lehrplanstand h2 { margin: 0; color: var(--ink); font-size: clamp(20px, 2.6vw, 28px); }
.verwaltung-lehrplanstand p { max-width: 920px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.verwaltung-seiten-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow-sm); }
.verwaltung-seiten-werkzeug > div { min-width: 0; display: grid; gap: 3px; }
.verwaltung-seiten-werkzeug b { color: var(--ink); font-size: 15px; }
.verwaltung-seiten-werkzeug span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.verwaltung-seiten-werkzeug button { min-height: 44px; flex: 0 0 auto; }
.verwaltung-leerstand { display: grid; gap: 5px; text-align: center; }
.verwaltung-leerstand span { color: var(--ink-soft); }
.kk-seite .kk-head, .verb-seite .verb-box-kopf { cursor: default; }
.fam-head { display: flex; align-items: center; gap: 10px; min-width: 0; user-select: none; margin-bottom: 8px; }
.fam-klappknopf { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-soft); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; touch-action: manipulation; }
.fam-klappknopf:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); }
.fam-ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fam-titel { display: flex; align-items: baseline; gap: 8px 12px; min-width: 0; flex-wrap: wrap; }
.fam-ident h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.fam-nummer { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.fam-nachname { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.35; }
.fam-nachname > span { color: var(--ink-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fam-nachname > b { overflow-wrap: anywhere; }
.fam-konten { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; }
.fam-aktionen { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.fam-kinder { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; font-size: 11px; background: var(--primary-soft); color: var(--primary-deep); text-align: center; }
.fam-limit { min-height: 36px; padding: 4px 10px; font-size: 11.5px; }
.fam-loeschen { min-height: 36px; padding: 5px 12px; font-size: 12.5px; }
.fam-head .chev { color: var(--ink-soft); display: flex; transition: transform .15s ease; flex-shrink: 0; }
.fam-head .chev.auf { transform: rotate(180deg); }
.fam-head:hover h2 { color: var(--primary-deep); }
.fam-body.hidden { display: none; }
.fam-offen-kopf { display: grid; grid-template-columns: minmax(150px, auto) minmax(130px, auto) minmax(190px, auto) minmax(170px, 1fr); align-items: center; gap: 12px 20px; margin: 4px 0 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.fam-angelegt { white-space: nowrap; }
.fam-herkunft { color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.fam-seit { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fam-offen-kopf > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fam-offen-kopf b { overflow-wrap: anywhere; color: var(--primary-deep); }
.fam-offen-label { color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fam-support-hinweis { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.fam-card:has(.fam-body.hidden) { padding-bottom: 14px; }
.fam-card[hidden] { display: none !important; }
@media (max-width: 720px) {
  .fam-card { min-width: 0; padding: 16px; }
  .fam-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 8px 10px; }
  .fam-klappknopf { grid-column: 1; grid-row: 1 / 3; }
  .fam-ident { grid-column: 2; width: 100%; justify-content: space-between; align-items: flex-start; }
  .fam-titel { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fam-aktionen { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; margin-left: 0; }
  .fam-aktionen > * { width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 6px; white-space: normal; line-height: 1.15; }
  .fam-aktionen .fam-kinder { border-radius: 12px; }
  .fam-offen-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam-support-hinweis { grid-column: 1 / -1; }
  .fam-eigen .fam-head { grid-template-columns: minmax(0, 1fr); }
  .fam-eigen .fam-ident, .fam-eigen .fam-aktionen { grid-column: 1; }
}

@media (max-width: 560px) {
  .modal-backdrop { align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .modal { max-width: 100%; max-height: 100%; padding: 18px 16px; border-radius: 16px; }
  .modal label, .modal .muted, .modal-head b { overflow-wrap: anywhere; }
}

.fam-suche-wrap { margin: 2px 0 14px; }
.fam-suche { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 12px 15px; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.fam-suche:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.fam-suche-ico { color: var(--ink-soft); display: flex; flex-shrink: 0; }
.fam-suche-ico svg { width: 19px; height: 19px; }
.fam-suche input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.fam-suche input::placeholder { color: var(--ink-soft); font-weight: 500; }
.fam-suche input::-webkit-search-cancel-button { display: none; }
.fam-suche-x { border: none; background: var(--bg); color: var(--ink-soft); cursor: pointer; width: 27px; height: 27px;
  border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; transition: background .15s ease, color .15s ease; }
.fam-suche-x:hover { background: var(--danger-soft); color: var(--danger); }
.fam-suche-x svg { width: 13px; height: 13px; }
.fam-suche-x[hidden] { display: none; }
.fam-suche-info { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; margin: 8px 4px 0; font-variant-numeric: tabular-nums; }
.fam-keine[hidden] { display: none; }
.fam-keine { margin-top: 10px; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; background: var(--card); text-align: center; }

@media (max-width: 720px) {
  .verwaltung-reiter-badges { margin-left: 0; }
  .verwaltung-seiten-werkzeug { align-items: stretch; flex-direction: column; }
  .verwaltung-seiten-werkzeug button { width: 100%; }
  .verwaltung-lehrplanstand { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fam-klappknopf, .fam-head .chev { transition: none; }
}

.familiennummer-profil { display: flex; align-items: center; gap: 22px; background: var(--primary-soft); border-color: var(--primary); }
.familiennummer-profil > div { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.familiennummer-profil-label { color: var(--primary-deep); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.familiennummer-profil strong { color: var(--primary-deep); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.familiennummer-profil p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.kk-fam-identitaet { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--ink); }

@media (max-width: 560px) {
  .familiennummer-profil { align-items: flex-start; flex-direction: column; gap: 12px; }
}

.org-kind-auswahl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.org-kind-auswahl label { margin: 0; }
.org-kind-auswahl select { width: min(320px, 100%); }
.org-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.org-tab { min-height: 54px; --ot: var(--primary); position: relative; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--ot) 22%, var(--line)); border-radius: 15px; background: var(--card); color: var(--ink-soft); font: 700 14px/1.25 inherit; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.org-tab .a-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.org-tab::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ot); opacity: .3; }
.org-tabs .org-tab:nth-child(1) { --ot: #3A86FF; }
.org-tabs .org-tab:nth-child(2) { --ot: #06D6A0; }
.org-tabs .org-tab:nth-child(3) { --ot: #FFBA08; }
.org-tab:hover { border-color: var(--ot); color: color-mix(in srgb, var(--ot) 72%, var(--ink)); transform: translateY(-2px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ot) 22%, transparent), 0 12px 26px color-mix(in srgb, var(--ot) 32%, transparent); }
.org-tab:hover::before { opacity: 1; box-shadow: 0 0 16px var(--ot); }
.org-tab.an { border-color: var(--ot); background: linear-gradient(160deg, color-mix(in srgb, var(--ot) 20%, var(--card)), var(--card) 70%); color: color-mix(in srgb, var(--ot) 78%, var(--ink)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ot) 28%, transparent), 0 12px 30px color-mix(in srgb, var(--ot) 34%, transparent); }
.org-tab.an::before { opacity: 1; box-shadow: 0 0 18px var(--ot); }
.org-tab.an .a-ico { color: var(--ot); }
.org-inhalt { animation: orgEinblenden .22s ease-out; }
@keyframes orgEinblenden { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.org-kicker { display: block; margin-bottom: 6px; color: var(--primary); font-size: 11px; line-height: 1.2; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.org-leer { text-align: center; padding: 34px; }
.org-leer h2 { margin-top: 12px; }
.org-leer .primary { margin-top: 10px; }
.org-leer-icon { width: 66px; height: 66px; border-radius: 20px; margin: 0 auto; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.org-fortschritt { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.org-fortschritt h2 { font-size: 22px; margin-bottom: 5px; }
.org-fortschritt p { margin: 0; }
.org-ranzen-erinnerung { display: flex; align-items: center; gap: 14px; }
.org-ranzen-erinnerung h2 { margin: 0 0 4px; font-size: 16px; }
.org-ranzen-erinnerung p { margin: 0; }
.org-ranzen-erinnerung .mode-pill { min-height: 44px; margin-left: auto; flex: 0 0 auto; }
.org-erinnerung-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); background: var(--primary-soft); }
.org-ring { width: 94px; height: 94px; flex: 0 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at center, var(--card) 58%, transparent 60%), conic-gradient(var(--success) var(--org-p), var(--line) 0); }
.org-ring b { font-size: 20px; color: var(--primary-deep); }
.org-ring span { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.org-ranzen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.org-fach { margin: 0; }
.org-fach h2 { margin-bottom: 12px; }
.org-fach { --ff: var(--primary); position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--ff) 34%, var(--line)); }
.org-fach::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ff); }
.org-fach::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(340px 150px at 100% 0%, color-mix(in srgb, var(--ff) 16%, transparent), transparent 72%);
}
.org-fach > * { position: relative; z-index: 1; }
.org-fach-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.org-fach-kopf h2 { margin: 0; font-size: 17px; color: color-mix(in srgb, var(--ff) 62%, var(--ink)); }
.org-fach-kopf h2::before {
  content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 5px; margin-right: 9px;
  background: var(--ff); box-shadow: 0 0 12px color-mix(in srgb, var(--ff) 65%, transparent);
}
.org-fach-zahl {
  margin-left: auto; font-size: 11.5px; font-weight: 900; border-radius: 999px; padding: 4px 11px;
  color: color-mix(in srgb, var(--ff) 72%, var(--ink));
  background: color-mix(in srgb, var(--ff) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ff) 34%, transparent);
}
.org-fach .org-material { border-color: color-mix(in srgb, var(--ff) 22%, var(--line)); }
.org-fach .org-material:hover { border-color: color-mix(in srgb, var(--ff) 52%, var(--line)); }
.org-fach .org-check-btn > span { border-color: color-mix(in srgb, var(--ff) 45%, var(--line)); }
.org-fach .org-check-btn:disabled { cursor: default; opacity: .75; }
.org-fach-immer { --ff: #5D6B80; }

.org-hinweis { display: flex; gap: 13px; align-items: flex-start; }
.org-hinweis-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); }
.org-hinweis b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.org-hinweis p { margin: 0; }

.org-wochenleiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 14px 0 4px; }
.org-tagknopf {
  --tf: var(--primary);
  display: grid; gap: 6px; justify-items: center; position: relative; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--tf) 26%, var(--line)); border-radius: 17px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--tf) 9%, var(--card)), var(--card) 65%);
  padding: 12px 8px 11px; min-height: 44px; font-family: inherit; color: var(--ink);
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease, background .17s ease;
}
.org-wochenleiste .org-tagknopf:nth-child(1) { --tf: #3A86FF; }
.org-wochenleiste .org-tagknopf:nth-child(2) { --tf: #06D6A0; }
.org-wochenleiste .org-tagknopf:nth-child(3) { --tf: #8AC926; }
.org-wochenleiste .org-tagknopf:nth-child(4) { --tf: #FB5607; }
.org-tagknopf:nth-child(5) { --tf: #C86BFA; }
.org-tagknopf::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tf); opacity: .35; }
.org-tagknopf:hover:not(:disabled) {
  transform: translateY(-3px); border-color: var(--tf);
  background: linear-gradient(170deg, color-mix(in srgb, var(--tf) 20%, var(--card)), var(--card) 62%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tf) 26%, transparent), 0 14px 30px color-mix(in srgb, var(--tf) 40%, transparent);
}
.org-tagknopf:hover:not(:disabled)::before { opacity: 1; box-shadow: 0 0 16px var(--tf); }
.org-tagknopf.an {
  border-color: var(--tf);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tf) 22%, var(--card)), var(--card) 68%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tf) 30%, transparent), 0 12px 30px color-mix(in srgb, var(--tf) 38%, transparent);
}
.org-tagknopf.an::before { opacity: 1; box-shadow: 0 0 18px var(--tf); }
.org-tagknopf:disabled { opacity: .62; cursor: default; }
.org-tagknopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--tf) 45%, transparent); outline-offset: 2px; }
.otk-kurz { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--tf) 55%, var(--ink-soft)); }
.org-tagknopf.an .otk-kurz { color: color-mix(in srgb, var(--tf) 78%, var(--ink)); }
.org-tagknopf.an .otk-datum { color: color-mix(in srgb, var(--tf) 62%, var(--ink)); }
.otk-datum { font-size: 16px; font-weight: 900; }
.otk-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--success) var(--org-p), color-mix(in srgb, var(--line) 70%, transparent) 0); }
.otk-ring i { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font: 900 10.5px/1 inherit; font-style: normal; color: var(--ink); }
.otk-ring.voll i { color: var(--success); }
.otk-ring.leer { background: color-mix(in srgb, var(--line) 55%, transparent); }
.otk-ring.leer i { color: var(--ink-soft); }
.otk-marke { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); text-align: center; }
.org-tagknopf.heute .otk-marke { color: var(--sun); }
.org-tagknopf.heute { border-color: color-mix(in srgb, var(--sun) 52%, var(--line)); }
.org-tagknopf.heute::before { background: var(--sun); opacity: 1; }
.org-tagkopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 2px 4px; }
.org-tagkopf h2 { margin: 0; font-size: 19px; color: var(--primary-deep); }

.org-planwoche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.org-planspalte {
  --tf: var(--primary); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; min-height: 210px; padding: 11px;
  border: 1.5px solid color-mix(in srgb, var(--tf) 24%, var(--line)); border-radius: 17px;
  background: linear-gradient(175deg, color-mix(in srgb, var(--tf) 8%, var(--card)), var(--card) 60%);
  transition: border-color .17s ease, box-shadow .17s ease;
}
.org-planspalte::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tf); opacity: .4; }
.org-planspalte:hover { border-color: color-mix(in srgb, var(--tf) 55%, var(--line)); box-shadow: 0 12px 28px color-mix(in srgb, var(--tf) 26%, transparent); }
.org-planspalte:hover::before { opacity: 1; box-shadow: 0 0 14px var(--tf); }
.org-planwoche .org-planspalte:nth-child(1) { --tf: #3A86FF; }
.org-planwoche .org-planspalte:nth-child(2) { --tf: #06D6A0; }
.org-planwoche .org-planspalte:nth-child(3) { --tf: #8AC926; }
.org-planwoche .org-planspalte:nth-child(4) { --tf: #FB5607; }
.org-planwoche .org-planspalte:nth-child(5) { --tf: #C86BFA; }
.org-planspalte.heute { border-color: var(--tf); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tf) 26%, transparent), 0 12px 30px color-mix(in srgb, var(--tf) 34%, transparent); }
.org-planspalte.heute::before { opacity: 1; box-shadow: 0 0 18px var(--tf); }
.org-planspalte.frei { opacity: .7; }
.org-plankopf { display: flex; align-items: baseline; gap: 7px; padding: 0 2px 5px; border-bottom: 1px dashed var(--line); }
.org-plankopf b { font-size: 13px; font-weight: 900; color: color-mix(in srgb, var(--tf) 55%, var(--ink)); }
.org-plankopf span { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.org-plankopf em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--tf) 72%, var(--ink)); }
.org-planliste { display: flex; flex-direction: column; gap: 7px; }
.org-plankarte { --ff: var(--primary); display: block; width: 100%; text-align: left; border: 1.5px solid color-mix(in srgb, var(--ff) 26%, var(--line)); border-left: 4px solid var(--ff); border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--ff) 12%, var(--card)), var(--card) 70%); padding: 9px 11px; font-family: inherit; color: var(--ink); cursor: pointer; }
.org-plankarte:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--ff) 26%, transparent); border-color: color-mix(in srgb, var(--ff) 52%, var(--line)); border-left-color: var(--ff); }
.opk-fach { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--ff) 74%, var(--ink)); }
.opk-titel { display: block; font-size: 13px; font-weight: 800; line-height: 1.35; margin: 3px 0 5px; }
.opk-fuss { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.org-planleer { margin: 0; padding: 14px 4px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.org-planplus { margin-top: auto; min-height: 44px; border: 1.5px dashed var(--line); background: none; color: var(--ink-soft); border-radius: 11px; padding: 9px; font: 800 12px/1.3 inherit; cursor: pointer; }
.org-planplus:hover { border-style: solid; border-color: var(--tf); color: color-mix(in srgb, var(--tf) 72%, var(--ink)); box-shadow: 0 0 14px color-mix(in srgb, var(--tf) 30%, transparent); }
.org-aufgaben-kopf.ueberfaellig h2 { color: var(--danger-deep); }

.org-wochenheld { display: flex; gap: 16px; align-items: flex-start; }
.org-wochenheld-icon { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--sun), #E36414); box-shadow: 0 10px 22px color-mix(in srgb, var(--sun) 32%, transparent); }
.org-wochenheld h2 { margin: 3px 0 5px; font-size: 21px; }
.org-wochenheld p { margin: 0; }
.org-fragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.org-frage {
  --fq: var(--primary); position: relative; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--fq) 34%, var(--line)); border-radius: 18px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--fq) 11%, var(--card)), var(--card) 62%);
  padding: 15px 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--fq) 14%, transparent);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.org-frage::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--fq); box-shadow: 0 0 14px var(--fq); }
.org-frage:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fq) 58%, var(--line)); box-shadow: 0 12px 28px color-mix(in srgb, var(--fq) 26%, transparent); }
.org-frage:focus-within {
  border-color: var(--fq);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fq) 26%, transparent), 0 14px 32px color-mix(in srgb, var(--fq) 30%, transparent);
}
.org-frage-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.org-frage-icon {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fq) 20%, var(--card)); color: var(--fq);
  border: 1px solid color-mix(in srgb, var(--fq) 45%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fq) 32%, transparent);
}
.org-frage-kopf b { font-size: 14px; font-weight: 900; color: color-mix(in srgb, var(--fq) 58%, var(--ink)); }
.org-frage textarea {
  width: 100%; min-height: 86px; resize: vertical; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--fq) 26%, var(--line)); border-radius: 13px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg)); padding: 11px 13px; font: 600 13.5px/1.5 inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.org-frage textarea::placeholder { color: var(--ink-soft); opacity: .85; }
.org-frage textarea:focus { outline: none; border-color: var(--fq); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fq) 45%, transparent); }
.org-frage-tipp { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.org-zielkarte {
  position: relative; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--success) 52%, var(--line));
  background:
    radial-gradient(420px 200px at 100% -30%, color-mix(in srgb, var(--lime) 22%, transparent), transparent 72%),
    linear-gradient(150deg, color-mix(in srgb, var(--success) 15%, var(--card)), var(--card) 68%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--success) 20%, transparent);
}
.org-zielkarte::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--success), var(--lime)); box-shadow: 0 0 16px var(--success); }
.org-zielkarte:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 26%, transparent), 0 14px 32px color-mix(in srgb, var(--success) 28%, transparent); }
.org-zielkarte h2 { margin: 0 0 4px; font-size: 16px; color: color-mix(in srgb, var(--success) 55%, var(--ink)); }
.org-zielkarte input {
  width: 100%; margin: 10px 0 12px; min-height: 48px; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--success) 45%, var(--line)); border-radius: 13px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg)); padding: 12px 14px; font: 800 14px/1.4 inherit;
}
.org-zielkarte input::placeholder { font-weight: 600; color: var(--ink-soft); opacity: .85; }
.org-zielkarte input:focus { outline: none; border-color: var(--success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 50%, transparent); }
.org-zielkarte .primary { box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 34%, transparent); }
.org-elternband { display: flex; gap: 12px; align-items: flex-start; border-color: color-mix(in srgb, var(--teal) 32%, var(--line)); background: color-mix(in srgb, var(--teal) 9%, var(--card)); }
.org-elternband b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.org-elternband p { margin: 0; }

.org-ab-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 24px 2px 4px; }
.org-ab-kopf h2 { margin: 0; font-size: 18px; color: var(--primary-deep); }
.org-ab-stand { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 6px 13px; background: var(--sun-soft); color: var(--sun); }
.org-ab-erklaerung { margin: 0 2px 12px; }
.org-ab-gruppe { display: flex; align-items: baseline; gap: 10px; margin: 16px 2px 8px; }
.org-ab-gruppe h3 { margin: 0; font-size: 14.5px; font-weight: 900; }
.org-ab-gruppe span { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.org-ab-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ab-kachel { --af: #3A86FF; position: relative; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--af) 24%, var(--line)); border-radius: 16px; background: var(--card); transition: transform .16s ease, box-shadow .16s ease; }
.ab-kachel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--af) 34%, transparent); }
.ab-fuellung { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ab-p, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--af) 24%, transparent), color-mix(in srgb, var(--af) 46%, transparent)); }
.ab-kachel.hat { border-color: var(--af); box-shadow: 0 0 18px color-mix(in srgb, var(--af) 26%, transparent); }
.ab-kachel.hat .ab-fuellung { background: linear-gradient(180deg, color-mix(in srgb, var(--af) 26%, transparent), color-mix(in srgb, var(--af) 52%, transparent)); }
.ab-inhalt { position: relative; display: grid; gap: 5px; justify-items: center; text-align: center; padding: 13px 9px 11px; }
.ab-scheibe { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--af) 16%, var(--card)); border: 2px solid color-mix(in srgb, var(--af) 45%, transparent); }
.ab-kachel.hat .ab-scheibe { border-color: var(--af); box-shadow: 0 0 16px color-mix(in srgb, var(--af) 55%, transparent); }
.ab-kachel.offen .ab-scheibe { filter: grayscale(1); opacity: .75; }
.ab-inhalt b { font-size: 11.5px; font-weight: 900; line-height: 1.25; color: var(--ink); }
.ab-inhalt small { font-size: 10px; font-weight: 700; color: var(--ink-soft); line-height: 1.3; }
.ab-stand { font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--af) 72%, var(--ink)); }
.ab-kachel.hat .ab-stand { color: color-mix(in srgb, var(--af) 82%, var(--ink)); }
.ab-rest { font-size: 9.5px; font-weight: 700; color: var(--ink-soft); }
.ab-kachel.neu { box-shadow: 0 0 0 3px color-mix(in srgb, var(--af) 45%, transparent), 0 12px 28px color-mix(in srgb, var(--af) 32%, transparent); }

.ab-jubel-box { text-align: center; max-width: 420px; }
.ab-jubel-kopf { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.ab-jubel-zeichen { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: linear-gradient(140deg, var(--sun-soft), var(--lime-soft)); border: 2px solid var(--sun); }
.ab-jubel-box h2 { font-size: 21px; margin: 4px 0 10px; color: var(--primary-deep); }
.ab-jubel-liste { display: grid; gap: 8px; margin-bottom: 12px; }
.ab-jubel-zeile { border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; background: var(--bg); }
.ab-jubel-zeile b { display: block; font-size: 14px; }
.ab-jubel-zeile span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.ab-jubel-text { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.55; margin: 0 0 14px; }
.ab-jubel-box .primary { width: 100%; min-height: 48px; }
.org-checkliste { display: flex; flex-direction: column; gap: 8px; }
.org-material { min-height: 50px; display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--bg); transition: border-color .18s ease, background .18s ease; }
.org-material.erledigt { border-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--card)); }
.org-check-btn { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); padding: 9px 10px; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; text-align: left; }
.org-check-btn > span, .org-task-check > span, .org-schritt button:first-child > span { width: 28px; height: 28px; border: 2px solid var(--line); border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.org-material.erledigt .org-check-btn > span, .org-aufgabe.erledigt .org-task-check > span, .org-schritt.erledigt button:first-child > span { border-color: var(--success); background: var(--success); }
.org-material.erledigt .org-check-btn b { color: var(--ink-soft); text-decoration: line-through; }
.org-mini-btn, .org-loeschen { width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.org-mini-btn:hover, .org-loeschen:hover { color: var(--danger); background: var(--danger-soft); }
.org-material-neu h2 { margin-bottom: 4px; }
.org-form-zeile { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.4fr) auto; gap: 12px; align-items: end; }
.org-form-zeile label, .org-task-form label { margin: 8px 0 0; }
.org-form-zeile .primary, .org-task-form > .primary { min-height: 44px; margin-bottom: 1px; }
.org-neue-aufgabe { border-top: 4px solid var(--primary); }
.org-task-form { display: grid; grid-template-columns: 150px minmax(160px, .8fr) minmax(220px, 1.6fr) 160px 150px 120px; gap: 11px; align-items: end; }
.org-task-form .org-task-titel { min-width: 0; }
.org-task-form input, .org-task-form select, .org-form-zeile input, .org-form-zeile select, .org-schritt-neu input, .org-reflexions-form textarea, .org-reflexions-form input { width: 100%; min-height: 44px; }
.org-aufgaben-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 2px 10px; }
.org-aufgaben-kopf h2 { margin: 0; color: var(--primary-deep); }
.org-aufgaben-liste { display: flex; flex-direction: column; gap: 11px; }
.org-aufgabe { margin: 0; padding: 16px; }
.org-aufgabe.erledigt { opacity: .76; }
.org-aufgabe-kopf { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 11px; align-items: start; }
.org-task-check { width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.org-aufgabe-kopf h2 { margin: 5px 0 3px; font-size: 17px; color: var(--ink); }
.org-aufgabe.erledigt .org-aufgabe-kopf h2 { color: var(--ink-soft); text-decoration: line-through; }
.org-aufgabe-kopf p { margin: 0; font-size: 12.5px; }
.org-task-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.org-task-meta span { padding: 3px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: 10.5px; font-weight: 800; }
.org-schritte { margin: 14px 0 0 55px; padding-top: 12px; border-top: 1px solid var(--line); }
.org-schritt-kopf { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-soft); font-size: 12px; margin-bottom: 7px; }
.org-schritt { display: grid; grid-template-columns: minmax(0, 1fr) 44px; min-height: 44px; align-items: stretch; border-bottom: 1px solid var(--line); }
.org-schritt button { min-height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 13px/1.35 inherit; text-align: left; }
.org-schritt button:first-child { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.org-schritt button:first-child > span { width: 23px; height: 23px; border-radius: 7px; }
.org-schritt button:last-child { display: grid; place-items: center; color: var(--ink-soft); }
.org-schritt small { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.org-schritt.erledigt button:first-child { color: var(--ink-soft); text-decoration: line-through; }
.org-schritt-neu { display: grid; grid-template-columns: minmax(170px, 1fr) 155px auto; gap: 8px; margin-top: 12px; }
.org-schritt-neu button { min-height: 44px; border: 1.5px solid var(--primary); border-radius: 11px; padding: 8px 13px; background: var(--primary-soft); color: var(--primary-deep); font: 800 12.5px/1.2 inherit; cursor: pointer; }
.org-fertig { margin-top: 14px; }
.org-fertig summary { cursor: pointer; font-weight: 800; color: var(--primary-deep); padding: 3px 0; }
.org-fertig[open] summary { margin-bottom: 13px; }
.org-leer-klein { color: var(--ink-soft); text-align: center; }
.org-routine { --ff: #FFBA08; position: relative; padding-left: 4px; }
.org-routine::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ff); }
.org-routine .org-check-btn { gap: 12px; flex-wrap: wrap; }
.org-routine .org-check-btn > span { border-color: color-mix(in srgb, var(--ff) 48%, var(--line)); }
.org-routine .org-check-btn b { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.org-routine .org-check-btn:disabled { cursor: default; opacity: .9; }
.org-routine.erledigt { border-color: var(--ff); background: color-mix(in srgb, var(--ff) 11%, var(--card)); }
.org-routine.erledigt .org-check-btn > span { border-color: var(--ff); background: var(--ff); }
.org-routine.erledigt .org-check-btn b { color: var(--ink-soft); text-decoration: line-through; }
.org-routine-serie { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; align-self: center; white-space: nowrap;
  height: max-content; width: max-content; font-size: 12px; font-weight: 800; color: #E36414;
  background: rgba(227,100,20,.12); border-radius: 999px; padding: 3px 9px; }
.org-routine-serie svg { width: 13px; height: 13px; }
.org-fach-immer .org-routine { opacity: .74; border-style: dashed; }
.org-fach-immer .org-routine::before { background: var(--ink-soft); }
.org-routine-fortschritt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 2px 14px; }
.org-routine-bar { flex: 1; min-width: 160px; height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.org-routine-bar > div { height: 100%; border-radius: 999px; transition: width .35s ease;
  background: linear-gradient(90deg, var(--primary), var(--success)); }
.org-routine-fortschritt > span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.org-routine-fortschritt > span.ok { color: var(--success); }
.org-routine-vorschlaege { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.org-routine-vor { display: inline-flex; align-items: center; gap: 5px; min-height: 40px;
  border: 1.5px dashed var(--line); background: var(--bg); color: var(--ink); border-radius: 999px;
  padding: 7px 13px; font: 600 12.8px/1.2 inherit; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, border-style .15s ease; }
.org-routine-vor:hover { border-color: var(--primary); color: var(--primary-deep); border-style: solid; }
.org-routine-form { grid-template-columns: minmax(200px, 1fr) auto; }
@media (max-width: 720px) {
  .org-routine-form { grid-template-columns: minmax(0, 1fr); }
  .org-routine .org-check-btn { gap: 9px; }
  .org-routine-serie { font-size: 11.5px; padding: 3px 7px; }
}
.org-wochenbild { max-width: 850px; margin-left: auto; margin-right: auto; }
.org-wochenbild > h2 { font-size: 22px; }
.org-reflexions-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.org-reflexions-form label { margin-top: 8px; }
.org-reflexions-form textarea { margin-top: 8px; min-height: 115px; resize: vertical; }
.org-reflexions-form .org-ziel { grid-column: 1 / -1; padding: 15px; border: 1.5px solid var(--primary); border-radius: 14px; background: var(--primary-soft); color: var(--primary-deep); }
.org-reflexions-form .primary, .org-reflexions-form .err { grid-column: 1 / -1; justify-self: start; }
.org-reflexions-form .primary { min-height: 44px; }
.org-reflexion { margin: 12px 0; padding: 14px 16px; border-left: 4px solid var(--primary); border-radius: 10px; background: var(--bg); }
.org-reflexion p { margin: 6px 0 0; line-height: 1.55; }

@media (max-width: 1050px) {
  .org-task-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .org-task-form .org-task-titel { grid-column: span 2; }
}
@media (max-width: 720px) {
  .org-tabs { grid-template-columns: 1fr; }
  .org-tab { justify-content: flex-start; }
  .org-ranzen-grid { grid-template-columns: 1fr; }
  .org-planwoche { grid-template-columns: 1fr; }
  .org-planspalte { min-height: 0; }
  .org-wochenleiste { gap: 6px; }
  .org-tagknopf { padding: 9px 4px 8px; }
  .otk-datum { font-size: 13.5px; }
  .otk-ring { width: 34px; height: 34px; }
  .otk-ring i { width: 27px; height: 27px; font-size: 9.5px; }
  .otk-marke { font-size: 9.5px; }
  .org-ab-raster { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .org-wochenheld { flex-wrap: wrap; }
  .org-fortschritt { align-items: flex-start; }
  .org-ranzen-erinnerung { align-items: flex-start; flex-wrap: wrap; }
  .org-ranzen-erinnerung .mode-pill { width: 100%; margin-left: 0; }
  .org-ring { width: 80px; height: 80px; }
  .org-form-zeile, .org-task-form, .org-schritt-neu, .org-reflexions-form { grid-template-columns: 1fr; }
  .org-task-form .org-task-titel, .org-reflexions-form .org-ziel, .org-reflexions-form .primary, .org-reflexions-form .err { grid-column: 1; }
  .org-schritte { margin-left: 0; }
  .org-schritt small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .org-inhalt { animation: none; }
  .org-tab { transition: none; }
}

.push-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mode-pill.ghost { background: none; border-color: var(--line); color: var(--ink-soft); }
.mode-pill.ghost:hover { border-color: var(--danger); color: var(--danger); }

.dash-routinen { grid-column: 1 / -1; }
.dr-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.dr-titel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.dr-titel svg { width: 18px; height: 18px; color: var(--primary); }
.dr-titel b { font-weight: 800; }
.dr-count { font-size: 12px; font-weight: 800; color: var(--primary-deep); background: var(--primary-soft); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.dr-alle { border: none; background: none; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.dr-alle:hover { color: var(--primary); background: var(--bg); }
.dr-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 6px 13px 6px 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.dr-pill:hover { border-color: var(--rc); }
.dr-pill:active { transform: scale(.97); }
.dr-pill.erledigt { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, var(--card)); }
.dr-dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; transition: background .15s ease, border-color .15s ease; }
.dr-pill.erledigt .dr-dot { background: var(--rc); border-color: var(--rc); }
.dr-pill.erledigt .dr-name { color: var(--ink-soft); text-decoration: line-through; }
.dr-leer { margin: 2px 0; font-size: 13px; }
.dr-anlegen { border: none; background: var(--primary-soft); color: var(--primary-deep); font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.dr-anlegen:hover { filter: brightness(.97); }

.dash-rstatus { min-height: 144px; }
.rst-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rst-card-head h3 { margin-bottom: 0; }
.rst-kind-auswahl {
  display: grid; grid-template-columns: repeat(var(--rst-count), minmax(0, 1fr));
  gap: 7px; margin: 11px 0 12px;
}
.rst-kind-btn {
  min-width: 0; min-height: 44px; padding: 7px 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink-soft);
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.rst-kind-btn:hover { border-color: var(--primary); color: var(--ink); }
.rst-kind-btn.an { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); }
.rst-kind-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rst-kind-panel[hidden] { display: none; }
.rst-keine-kinder { margin: 12px 0 0; }
.rst-kind { min-height: 96px; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; }
.rst-kind.gut { background: rgba(82,182,154,.06); border-color: rgba(82,182,154,.38); }
.rst-kind.warn { background: rgba(227,100,20,.07); border-color: rgba(227,100,20,.4); }
.rst-zaehler { min-height: 34px; display: flex; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.rst-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; align-content: flex-start; }
.rst-r { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 12.5px; font-weight: 800; line-height: 1.2; border: 1px solid color-mix(in srgb, var(--rc) 62%, var(--line)); border-radius: 999px; padding: 5px 11px 5px 9px; color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, var(--card)); }
.rst-r.ok { opacity: .72; text-decoration: line-through; }
.rst-r.ok svg { width: 12px; height: 12px; }
.rst-o { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; opacity: .85; }

.info-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.info-zeile:last-child { border-bottom: none; }
.info-zeile span { color: var(--ink-soft); }

.nav-drawer .sidebar { transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(43, 45, 66, .18); }
.nav-drawer .sidebar.open { transform: none; }
.nav-drawer .backdrop.show { display: block; }
.nav-drawer .main { margin-left: 0; }
.nav-drawer .main-inner { width: min(100%, 1180px); margin: 0 auto; padding: 16px 24px 184px; }
.nav-drawer .main-head:not(.leer) {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 12px 16px; padding: 14px 0 24px; text-align: center;
}
.nav-drawer .main-head:not(.leer) > .burger { grid-column: 1; }
.nav-drawer .main-head:not(.leer) > .main-titel { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 760px); }
.nav-drawer .main-head:not(.leer) > .spacer { display: none; }
.nav-drawer .main-head:not(.leer) > .main-aktionen {
  grid-column: 1 / -1; grid-row: 2; display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px; width: 100%; align-items: center;
}
.nav-drawer .main-head:not(.leer) .chip-timer { grid-column: 2; justify-self: center; max-width: 100%; }
.nav-drawer .main-head:not(.leer) .avatar { grid-column: 3; justify-self: end; width: 44px; height: 44px; }
.nav-drawer .main-head h1 { font-size: clamp(25px, 4vw, 32px); line-height: 1.16; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.nav-drawer .main-head .sub { max-width: 62ch; margin: 5px auto 0; font-size: 14px; line-height: 1.45; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.nav-drawer .burger {
  position: fixed; right: calc(22px + env(safe-area-inset-right));
  bottom: calc(134px + env(safe-area-inset-bottom)); z-index: 300;
  display: inline-flex; width: auto; min-width: 96px; height: auto; min-height: 46px;
  gap: 8px; padding: 12px 18px 12px 14px; border: none; border-radius: 999px;
  background: linear-gradient(160deg, var(--primary), var(--primary-deep)); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 12px 30px rgba(26,117,159,.45);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.nav-drawer .burger:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(26,117,159,.5); }
.nav-drawer .burger .burger-txt { display: inline; }
.nav-drawer .sidebar.open ~ .main .burger { opacity: 0; pointer-events: none; }
.nav-drawer .composer { padding: 10px 12px 12px; }
.nav-drawer .msg { max-width: 92%; }

.mode-pill { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.mode-pill:hover:not(.active) { border-color: var(--primary); color: var(--ink); }
.mode-pill.active { box-shadow: var(--shadow-sm); }

.msg.assistant { box-shadow: var(--shadow-sm); }
.msg.user {
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  box-shadow: 0 4px 12px rgba(26, 117, 159, .22);
}

.widget { box-shadow: var(--shadow-lg); }
.msg.assistant:has(.widget) { background: transparent; border: none; box-shadow: none; padding: 0; }
.msg.assistant:has(.widget) > div:not(.widget) { padding: 0 4px; }
.widget .opt { transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.widget .opt:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.widget .opt:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.widget .opt:active { transform: translateY(0); box-shadow: none; }

.composer .send:hover { filter: brightness(1.06); }

.unit { box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.unit:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }


.seg, .tr-modus {
  display: inline-flex; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px; gap: 3px; overflow: visible;
}
.seg-btn {
  border: none; border-right: none; border-radius: 9px; background: transparent;
  color: var(--ink-soft); padding: 7px 15px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg-btn.an { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.seg-btn:hover:not(.an) { background: var(--card); color: var(--ink); }

.tr-key { box-shadow: var(--shadow-sm); transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; }
.tr-key:hover { box-shadow: var(--shadow-md); }
.tr-key:active { transform: translateY(1px); box-shadow: none; }
.tr-key.gleich { background: linear-gradient(180deg, var(--primary), var(--primary-deep)); box-shadow: var(--shadow-btn); }
.tr-display { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); }

.karte { box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .2s ease; }
.karte:hover { box-shadow: var(--shadow-md); }

.kf-pill { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.kf-pill:hover:not(.an) { border-color: var(--primary); color: var(--ink); }

.bars .bar:not(.zero) { background: linear-gradient(180deg, var(--primary), var(--primary-deep)); }

.modal-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { box-shadow: var(--shadow-lg); }

:root[data-theme="dark"] .dash-box:hover { border-color: #46536A; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #2A3140; color: var(--ink); border-color: var(--line); color-scheme: dark; }
:root[data-theme="dark"] .r-loesung,
:root[data-theme="dark"] .rechnung-h input,
:root[data-theme="dark"] .widget .opt { background: #2A3140; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .widget .w-frage { color: var(--ink); }
:root[data-theme="dark"] .widget .opt { border-color: #3C4A66; }
:root[data-theme="dark"] .widget .opt.ok { background: var(--success-soft); border-color: var(--success); color: #fff; }
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .tr-key.gleich,
:root[data-theme="dark"] .seg-btn.an { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .msg.user { color: #fff; }
:root[data-theme="dark"] .tr-key.op,
:root[data-theme="dark"] .tr-key.fn { background: var(--primary-soft); color: var(--primary-deep); }
:root[data-theme="dark"] .karte { color: var(--primary-deep); }
:root[data-theme="dark"] .karte.hinten { color: var(--ink); }
:root[data-theme="dark"] .status-pill.gut,
:root[data-theme="dark"] .hz-gruen,
:root[data-theme="dark"] .lw-save.gespeichert,
:root[data-theme="dark"] .tag.good,
:root[data-theme="dark"] .msg.chip { color: #7FE0C4; }
:root[data-theme="dark"] .status-pill.schlecht,
:root[data-theme="dark"] .tag.weak,
:root[data-theme="dark"] .msg.chip.wrong { color: var(--danger-deep); }
:root[data-theme="dark"] .hz-gelb { color: #F0C877; }
:root[data-theme="dark"] .ax-lbl { background: rgba(33,39,52,.85); }
:root[data-theme="dark"] .r-ziffer,
:root[data-theme="dark"] .r-op-cell { color: var(--ink); }
:root[data-theme="dark"] .notiz { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
:root[data-theme="dark"] .tr-zettel { box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.logo-dunkel { display: none; }
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dunkel { display: block; }
:root[data-theme="dark"] .login-stage .login-brandbereich .logo-hell { display: none; }
:root[data-theme="dark"] .login-stage .login-brandbereich .logo-dunkel { display: block; }
:root[data-theme="dark"] .login-stage .login-wrap input {
  background: rgba(255, 255, 255, .88); color: #2B2D42; border-color: #CAD5DF; color-scheme: light;
}

.nav-item .ico {
  width: 27px; height: 27px; border-radius: 9px;
  background: var(--icb, var(--primary-soft)); color: var(--icf, var(--primary));
  transition: transform .15s ease;
}
.nav-item .ico svg { width: 16px; height: 16px; }
.nav-item:hover .ico { transform: scale(1.07); }
.nav-unter .nav-item .ico { width: 23px; height: 23px; border-radius: 7px; }
.nav-unter .nav-item .ico svg { width: 13px; height: 13px; }

.sidebar > .nav-item:nth-of-type(4n+1), .side-foot .nav-item:nth-of-type(4n+1), .nav-unter .nav-item:nth-of-type(4n+1) { --icb: var(--primary-soft); --icf: var(--primary); }
.sidebar > .nav-item:nth-of-type(4n+2), .side-foot .nav-item:nth-of-type(4n+2), .nav-unter .nav-item:nth-of-type(4n+2) { --icb: var(--teal-soft); --icf: var(--teal); }
.sidebar > .nav-item:nth-of-type(4n+3), .side-foot .nav-item:nth-of-type(4n+3), .nav-unter .nav-item:nth-of-type(4n+3) { --icb: var(--success-soft); --icf: var(--success); }
.sidebar > .nav-item:nth-of-type(4n), .side-foot .nav-item:nth-of-type(4n), .nav-unter .nav-item:nth-of-type(4n) { --icb: var(--lime-soft); --icf: var(--primary-deep); }
:root[data-theme="dark"] .sidebar > .nav-item:nth-of-type(4n),
:root[data-theme="dark"] .side-foot .nav-item:nth-of-type(4n),
:root[data-theme="dark"] .nav-unter .nav-item:nth-of-type(4n) { --icf: var(--lime); }
.nav-logout:hover .ico { --icb: var(--danger-soft); --icf: var(--danger); }

.dash-box h3 > .a-ico:first-child, .hinweis-karte h3 .a-ico, .bruch-weg h3 .a-ico,
.hp-titel .a-ico, .card > .a-ico {
  box-sizing: content-box; padding: 6px; border-radius: 10px;
  width: 19px; height: 19px; flex-shrink: 0;
  background: var(--icb, var(--primary-soft)); color: var(--icf, var(--primary));
}

.dash-alles > div:nth-of-type(4n+1) { --icb: var(--primary-soft); --icf: var(--primary); }
.dash-alles > div:nth-of-type(4n+2) { --icb: var(--teal-soft); --icf: var(--teal); }
.dash-alles > div:nth-of-type(4n+3) { --icb: var(--success-soft); --icf: var(--success); }
.dash-alles > div:nth-of-type(4n) { --icb: var(--lime-soft); --icf: var(--primary-deep); }
:root[data-theme="dark"] .dash-alles > div:nth-of-type(4n) { --icf: var(--lime); }
.dash-alles > div:nth-of-type(4n+2).dash-box::before { animation-delay: -3.2s; }
.dash-alles > div:nth-of-type(4n+3).dash-box::before { animation-delay: -6.4s; }
.dash-alles > div:nth-of-type(4n).dash-box::before { animation-delay: -9.6s; }

.fach-box .a-ico {
  box-sizing: content-box; padding: 5px; border-radius: 9px;
  width: 20px; height: 20px; background: rgba(255, 255, 255, .18);
}

.avatar {
  background: linear-gradient(150deg, var(--primary), var(--primary-deep));
  color: #fff; border: none; box-shadow: var(--shadow-btn);
}
.side-goal .mini div, .progressbar div { background: linear-gradient(90deg, var(--primary), var(--success)); }
.bars .bar { border-radius: 6px 6px 0 0; }
.dash-box .sub { line-height: 1.45; }

:root { --side-bg1: #16577D; --side-bg2: #0E344E; }

.sidebar {
  background: linear-gradient(180deg, var(--side-bg1), var(--side-bg2));
  border-right: none;
  box-shadow: var(--shadow-lg);
}
.sidebar .brand { background: transparent; box-shadow: none; padding: 10px 6px 7px; }
.sidebar .logo-hell { display: none; }
.sidebar .logo-dunkel { display: block; }
.sidebar .brand + .nav-sec { padding-top: 6px; }
.sidebar .side-foot { margin-bottom: 20px; }

.sidebar .nav-sec { color: rgba(255, 255, 255, .55); }
.sidebar .nav-item { color: rgba(255, 255, 255, .82); }
.sidebar .nav-item:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.sidebar .nav-item.active { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; }
.sidebar .nav-item.active::before { background: #fff; }
.sidebar .nav-item .chev { color: rgba(255, 255, 255, .6); }
.sidebar .nav-unter .muted { color: rgba(255, 255, 255, .6); }

.sidebar .nav-item .ico { background: var(--nc, rgba(255, 255, 255, .14)); color: var(--ncf, #fff); box-shadow: 0 2px 7px rgba(0,0,0,.16); }
.sidebar .nav-item:not([style]) .ico { box-shadow: none; }
.sidebar .nav-item.active .ico { background: var(--nc, rgba(255, 255, 255, .24)); color: var(--ncf, #fff); }
.sidebar .nav-logout:hover { background: rgba(217, 4, 41, .28); color: #fff; }
.sidebar .nav-logout:hover .ico { background: rgba(255, 255, 255, .16); color: #fff; }

.sidebar .side-foot { border-top-color: rgba(255, 255, 255, .18); }
.sidebar .side-goal { color: rgba(255, 255, 255, .78); }
.sidebar .side-goal .mini { background: rgba(255, 255, 255, .2); }
.sidebar .side-goal .mini div { background: linear-gradient(90deg, #fff, var(--lime)); }

.kpi-reihe {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px;
}
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 15px 11px; box-shadow: var(--shadow-sm); min-width: 0;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
  container-type: inline-size;
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-zeile { display: flex; align-items: center; gap: 11px; min-width: 0; }
.kpi-zeile .a-ico {
  box-sizing: content-box; padding: 7px; border-radius: 11px;
  width: 18px; height: 18px; flex-shrink: 0;
  background: var(--icb, var(--primary-soft)); color: var(--icf, var(--primary));
}
.kpi-reihe .kpi:nth-child(4n+1) { --icb: var(--primary-soft); --icf: var(--primary); }
.kpi-reihe .kpi:nth-child(4n+2) { --icb: var(--teal-soft); --icf: var(--teal); }
.kpi-reihe .kpi:nth-child(4n+3) { --icb: var(--success-soft); --icf: var(--success); }
.kpi-reihe .kpi:nth-child(4n) { --icb: var(--lime-soft); --icf: var(--primary-deep); }
:root[data-theme="dark"] .kpi-reihe .kpi:nth-child(4n) { --icf: var(--lime); }
.kpi-pill {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2.5px 9px;
  background: var(--primary-soft); color: var(--primary-deep); white-space: nowrap;
}
.kpi-pill.gut { background: var(--success-soft); color: var(--success); }
.kpi-zahl {
  font-size: 24px; font-weight: 800; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; flex-shrink: 0; white-space: nowrap;
}
.kpi-zahl small { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-left: 3px; }
.kpi-lbl {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.25;
}
.kpi-spark { width: 100%; height: 24px; display: block; margin-top: 7px; }
@container (max-width: 215px) {
  .kpi-zeile { flex-wrap: wrap; }
  .kpi-pill { order: 2; margin-left: auto; }
  .kpi-lbl { order: 3; flex-basis: 100%; margin-top: 3px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .kpi-zeile { flex-wrap: wrap; }
    .kpi-pill { order: 2; margin-left: auto; }
    .kpi-lbl { order: 3; flex-basis: 100%; margin-top: 3px; }
  }
}

.card.hp-wrap { position: relative; }
.card.kf-card {
  position: relative; padding: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.card.kf-leiste {
  grid-column: 1 / -1; align-self: stretch; min-height: 64px; padding: 10px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
}
.kf-leiste .kf-title { width: auto; text-align: left; white-space: nowrap; }
.kf-leiste .kf-options { min-width: 0; }
@media (max-width: 699px) {
  .card.kf-leiste { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .kf-leiste .kf-title { text-align: center; }
  .kf-leiste .kf-stand { justify-self: end; }
}
.box-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .8; z-index: 2; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.box-x:hover { background: var(--danger-soft); color: var(--danger-deep); opacity: 1; }
.dash-box:has(.box-x) h3 { padding-right: 24px; }

.box-grip {
  position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-soft); border-radius: 8px;
  opacity: .32; z-index: 3; cursor: grab; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.dash-box:hover .box-grip { opacity: .7; }
.box-grip:hover { opacity: 1; background: var(--bg); color: var(--primary); }
.box-grip:active { cursor: grabbing; }
.dash-box:has(.box-grip) h3 { padding-left: 24px; }
.wird-gezogen { opacity: .35; }
.drop-ziel { outline: 2px dashed var(--primary); outline-offset: 3px; border-radius: var(--radius); }
.nav-drawer .box-grip { display: none; }
.nav-drawer .dash-box:has(.box-grip) h3 { padding-left: 0; }

.plan-kinder { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.plan-kind {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 800;
  font-size: 12px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: .14s;
}
.plan-kind .kk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.plan-kind:hover { color: var(--ink); }
.plan-kind.an { background: var(--card); color: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.plan-box .plan-tage { margin-top: 8px; }
.dash-alles .plan-box .plan-tage {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.dash-alles .plan-box .plan-tage .hp-tag { min-height: 44px; padding: 6px 8px; }
.plan-box .hp-slot { margin-top: 4px; flex: 1 1 auto; display: flex; flex-direction: column; }
.plan-box .hp-slot > .hp-row { flex: 0 0 auto; }
.hp-zum { margin-top: auto; align-self: flex-start; }
.hp-tag { font-family: inherit; font-weight: 700; font-size: 11.5px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 5px 12px; border-radius: 999px; transition: .14s; white-space: nowrap; }
.hp-tag:hover { color: var(--ink); }
.hp-tag.an { background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); }

.lernueber { padding-top: 15px; }
.lu-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--ink);
}
.lu-titel { font-size: 15.5px; font-weight: 800; }
.lu-info { margin-left: auto; display: flex; flex-wrap: wrap; gap: 5px 14px; justify-content: flex-end; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.lu-mini { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lu-mini .kk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lu-mini b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.lu-chev { display: inline-flex; color: var(--ink-soft); transition: transform .18s ease; margin-left: 4px; }
.lernueber.offen .lu-chev { transform: rotate(180deg); }
.lu-body { display: none; margin-top: 13px; }
.lernueber.offen .lu-body { display: block; }
.lernueber:not(.offen) {
  background: linear-gradient(135deg, #238A64, #1F765B);
  border-color: #2AA879;
  box-shadow: 0 8px 24px rgba(31, 138, 100, .24);
}
.lernueber:not(.offen) .lu-kopf { color: #fff; }
.lernueber:not(.offen) .lu-titel { color: #fff; font-size: 17px; font-weight: 900; }
.lernueber:not(.offen) .lu-info { color: rgba(255,255,255,.9); }
.lernueber:not(.offen) .lu-mini b { color: #fff; }
.lernueber:not(.offen) .lu-mini .kk-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.lernueber:not(.offen) .lu-chev { color: #fff; }
.lu-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.lu-tab {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 800; font-size: 13px;
  color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; transition: .14s;
}
.lu-tab .kk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lu-tab .lu-ampel { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lu-ampel.gruen { background: var(--success); }
.lu-ampel.gelb { background: #E9A63B; }
.lu-ampel.rot { background: var(--danger); }
.lu-tab:hover { color: var(--ink); }
.lu-tab.an { background: var(--card); color: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.lu-panels { margin-top: 13px; }
.lu-panel { display: none; }
.lu-panel.an { display: block; animation: luFade .18s ease; }
@keyframes luFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.lu-zeiten { margin-top: 10px; }
.lu-zeiten-kopf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.lu-panel .lz-liste { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow-y: auto; }

.box-plus {
  border-style: dashed; background: transparent; box-shadow: none;
  justify-content: center; min-height: 170px; overflow: visible;
}
.box-plus::before { display: none; }
.dash-box.box-plus { background-image: none; }
.box-plus:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--primary); }
.plus-mitte {
  flex: 1; border: none; background: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-soft); font-weight: 700; font-size: 13px; padding: 10px;
}
.plus-mitte:hover { color: var(--primary); }

.pm-schleier {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(20, 32, 44, .45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.plus-menue {
  position: fixed; top: 50%; left: 50%; z-index: 96;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 40px)); max-height: min(500px, 80vh); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 10px;
  animation: pmAuf .18s ease;
}
@keyframes pmAuf {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pm-kopf {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); padding: 7px 10px 8px;
}
.pm-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: none; border-radius: 11px; padding: 8px 10px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left; transition: background .12s ease, color .12s ease;
  box-shadow: none;
}
.pm-item:hover { background: var(--primary-soft); color: var(--primary-deep); border-color: transparent; }
.pm-item .a-ico {
  box-sizing: content-box; padding: 6px; border-radius: 9px; flex-shrink: 0;
  width: 15px; height: 15px;
  background: var(--icb, var(--primary-soft)); color: var(--icf, var(--primary));
}
.plus-menue .pm-item:nth-of-type(4n+1) { --icb: var(--primary-soft); --icf: var(--primary); }
.plus-menue .pm-item:nth-of-type(4n+2) { --icb: var(--teal-soft); --icf: var(--teal); }
.plus-menue .pm-item:nth-of-type(4n+3) { --icb: var(--success-soft); --icf: var(--success); }
.plus-menue .pm-item:nth-of-type(4n) { --icb: var(--lime-soft); --icf: var(--primary-deep); }
:root[data-theme="dark"] .plus-menue .pm-item:nth-of-type(4n) { --icf: var(--lime); }
.pm-item span:nth-child(2) { flex: 1; min-width: 0; }
.pm-item .pm-plus { color: var(--ink-soft); display: flex; flex: none; }
.pm-item:hover .pm-plus { color: var(--primary-deep); }
.pm-admin { flex: none; border-radius: 999px; padding: 3px 7px; background: var(--primary-soft); color: var(--primary-deep); font-size: 9.5px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }

@media (max-width: 460px) {
  .admin-dash-kicker { margin-left: 0; }
  .admin-dash-werte { grid-template-columns: 1fr; }
  .pm-admin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .dash-box:hover, .fach-box:hover, .karte:hover, .hp-box:hover, button:active, .nav-item:hover .ico, .kpi:hover { transform: none !important; }
}

.modes .mode-pill {
  --mf: var(--primary);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico titel" "ico sub";
  column-gap: 10px; row-gap: 1px; align-items: center; text-align: left;
  border: 1.5px solid var(--line); border-radius: 17px; background: var(--card);
  color: var(--ink); padding: 12px 14px; min-height: 44px;
  position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.modes .mode-pill[data-mode="hausaufgaben"] { --mf: #1A759F; }
.modes .mode-pill[data-mode="erklaeren"] { --mf: #34A0A4; }
.modes .mode-pill[data-mode="ueben"] { --mf: #52B69A; }
.modes .mode-pill[data-mode="klassenarbeit"] { --mf: #C77E12; }
.modes #verlauf-btn { --mf: #6B7A91; }
.modes .mode-pill::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--mf); opacity: .32;
}
.modes .mode-pill > .a-ico {
  grid-area: ico; width: 38px; height: 38px; padding: 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--mf) 15%, var(--card)); color: var(--mf); box-sizing: border-box;
}
.modes .mode-pill .mp-txt { grid-area: titel; font-size: 13.5px; font-weight: 900; line-height: 1.25; }
.modes .mode-pill .mp-sub { grid-area: sub; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.modes .mode-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--mf) 50%, var(--line)); }
.modes .mode-pill.active {
  border-color: var(--mf);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mf) 26%, transparent);
}
.modes .mode-pill.active::before { opacity: 1; }
.modes .mode-pill.active .mp-txt { color: color-mix(in srgb, var(--mf) 72%, var(--ink)); }
.modes .mode-pill:focus-visible { outline: 3px solid color-mix(in srgb, var(--mf) 42%, transparent); outline-offset: 2px; }
:root[data-theme="dark"] .modes .mode-pill[data-mode="hausaufgaben"] { --mf: #57A2DC; }
:root[data-theme="dark"] .modes .mode-pill[data-mode="erklaeren"] { --mf: #46BCC0; }
:root[data-theme="dark"] .modes .mode-pill[data-mode="ueben"] { --mf: #63CBAD; }
:root[data-theme="dark"] .modes .mode-pill[data-mode="klassenarbeit"] { --mf: #F0A63C; }
:root[data-theme="dark"] .modes #verlauf-btn { --mf: #9AA9BF; }

.sidebar .nav-unter .nav-fach {
  background: var(--ff); color: var(--ft); font-weight: 700;
  padding: 5px 9px; border-radius: 10px; margin-bottom: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.sidebar .nav-unter .nav-fach:hover { background: var(--ff); color: var(--ft); filter: brightness(1.09); }
.sidebar .nav-unter .nav-fach .ico { background: rgba(255,255,255,.24); color: var(--ft); }
.sidebar .nav-unter .nav-fach.active { box-shadow: inset 0 0 0 2px #fff; }

.schritt-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: var(--lime-soft, #eef6e9); color: var(--primary-deep);
  border-radius: 10px; padding: 7px 12px; margin-bottom: 8px;
  font: inherit; font-size: .9em; font-weight: 700; cursor: pointer; text-align: left;
  transition: filter .12s;
}
.schritt-kopf:hover { filter: brightness(.97); }
.schritt-check { font-weight: 800; }
.schritt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritt-toggle { font-size: .82em; font-weight: 600; opacity: .65; white-space: nowrap; }
.msg.assistant.schritt-komp { background: transparent; box-shadow: none; border: none; padding: 2px 0; }
.msg.assistant.schritt-komp > *:not(.schritt-kopf) { display: none; }
.msg.assistant.schritt-komp .schritt-kopf { margin-bottom: 0; }

:root { --radius: 20px; --radius-lg: 26px; }

.main-inner { padding: 16px 40px 110px 16px; }
@media (min-width: 1500px) { .main-inner { padding: 18px 64px 110px 18px; } }
.nav-drawer .main-inner { padding: 16px 24px 184px; }

.sidebar { border-radius: 26px; }
.sidebar .nav-item.active { background: #fff; color: #123E63; }
.sidebar .nav-item.active .ico { background: rgba(18,62,99,.14); color: #123E63; }
.sidebar .nav-item.active::before { background: #fff; }

.kid-hero { border-radius: 28px; }
.kh-name { letter-spacing: -.03em; }
.kh-go { box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.kh-ring svg > circle:last-of-type { filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }

.kpi-zahl { font-size: 26px; }
.fach-box:hover { transform: translateY(-3px); filter: brightness(1.06); }

.range-tab.an, .hp-tab.an, .hp-tag.an, .lu-tab.an, .plan-kind.an {
  background: linear-gradient(160deg, var(--primary), var(--primary-deep));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(26,117,159,.30);
}
:root[data-theme="dark"] .range-tab.an,
:root[data-theme="dark"] .hp-tab.an,
:root[data-theme="dark"] .hp-tag.an,
:root[data-theme="dark"] .lu-tab.an,
:root[data-theme="dark"] .plan-kind.an {
  background: linear-gradient(160deg, var(--primary), #1E6091);
  color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

:root[data-theme="dark"] .dash-box.lern-fokus { box-shadow: 0 16px 44px rgba(62,143,207,.28); }

.mb-wrap { margin-top: 14px; }
.mb-kopf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.mb-bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--primary-soft); box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.mb-seg { height: 100%; min-width: 4px; transition: width .45s cubic-bezier(.16,1,.3,1); }
.mb-seg:hover { filter: brightness(1.08); }
.mb-leg-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 8px; margin-top: 11px; }
.mb-leg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--card) 84%, transparent); font-size: 13px; font-weight: 700; color: var(--ink); }
.mb-sw { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.mb-leg-text { min-width: 0; overflow-wrap: anywhere; }
.mb-leg b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-min { color: var(--ink-soft); font-weight: 700; font-size: 11.5px; }
.mb-range { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 14px 0 4px; }
.mb-rtab { font-family: inherit; font-weight: 700; font-size: 11.5px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 6px 13px; border-radius: 999px; transition: .14s; white-space: nowrap; }
.mb-rtab:hover { color: var(--ink); }
.mb-rtab.an { background: linear-gradient(160deg, var(--primary), var(--primary-deep)); color: #fff; box-shadow: 0 6px 16px rgba(26,117,159,.30); }
:root[data-theme="dark"] .mb-rtab.an { background: linear-gradient(160deg, var(--primary), #1E6091); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.dash-alles .range-tabs,
.dash-alles .hp-tabs,
.dash-alles .plan-kinder,
.dash-alles .lu-tabs,
.dash-alles .mb-range {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 7px; width: 100%;
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
.dash-alles .range-tab,
.dash-alles .hp-tab,
.dash-alles .hp-tag,
.dash-alles .plan-kind,
.dash-alles .lu-tab,
.dash-alles .mb-rtab {
  min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.15;
  white-space: normal; text-align: center; cursor: pointer; touch-action: manipulation;
}
.dash-alles .range-tab:hover,
.dash-alles .hp-tab:hover,
.dash-alles .hp-tag:hover,
.dash-alles .plan-kind:hover,
.dash-alles .lu-tab:hover,
.dash-alles .mb-rtab:hover { border-color: var(--primary); color: var(--ink); }
.dash-alles .range-tab.an,
.dash-alles .hp-tab.an,
.dash-alles .hp-tag.an,
.dash-alles .plan-kind.an,
.dash-alles .lu-tab.an,
.dash-alles .mb-rtab.an,
.dash-alles .rst-kind-btn.an,
.dash-alles .noten-kind-btn.an {
  background: var(--card); border-color: var(--primary); color: var(--primary-deep);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}
:root[data-theme="dark"] .dash-alles .range-tab.an,
:root[data-theme="dark"] .dash-alles .hp-tab.an,
:root[data-theme="dark"] .dash-alles .hp-tag.an,
:root[data-theme="dark"] .dash-alles .plan-kind.an,
:root[data-theme="dark"] .dash-alles .lu-tab.an,
:root[data-theme="dark"] .dash-alles .mb-rtab.an,
:root[data-theme="dark"] .dash-alles .rst-kind-btn.an,
:root[data-theme="dark"] .dash-alles .noten-kind-btn.an {
  background: var(--card); border-color: var(--primary); color: #66C7F0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent), 0 5px 14px color-mix(in srgb, var(--primary) 20%, transparent);
}
.mb-kopf { display: flex; }
.mb-total { margin-left: auto; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .mb-leg-reihe { grid-template-columns: 1fr; }
  .mb-leg { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
}
.lz-tage { display: flex; flex-direction: column; gap: 9px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.lz-tag { display: flex; flex-direction: column; gap: 5px; }
.lz-tag-label { font-size: 11.5px; font-weight: 800; color: var(--primary-deep); }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hbot-fab { position: fixed; right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 300; min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(160deg, var(--primary), var(--primary-deep)); color: #fff; border: none; cursor: pointer;
  padding: 12px 18px 12px 14px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(26,117,159,.45); transition: transform .18s ease, box-shadow .18s ease; }
.hbot-fab svg { width: 22px; height: 22px; }
.hbot-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(26,117,159,.5); }
.hbot-panel { position: fixed; right: 22px; bottom: 84px; z-index: 301; width: 420px; max-width: calc(100vw - 28px);
  height: min(680px, calc(100vh - 118px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); animation: hbotAuf .18s ease; }
.hbot-panel[hidden] { display: none; }
@keyframes hbotAuf { from { opacity: 0; transform: translateY(10px); } }
.hbot-kopf { min-height: 58px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; color: #fff;
  background: linear-gradient(160deg, var(--primary), var(--primary-deep)); }
.hbot-kopf > svg { width: 22px; height: 22px; flex:0 0 auto; }
.hbot-kopf-titel { font-weight: 900; font-size: 15px; flex: 1; }
.hbot-ohne-ki { padding:4px 8px; border:1px solid rgba(255,255,255,.32); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.hbot-close { background: rgba(255,255,255,.18); border: none; color: #fff; cursor: pointer; width: 44px; height: 44px; padding: 0; border-radius: 12px; display: grid; place-items: center; flex:0 0 auto; }
.hbot-close:hover { background: rgba(255,255,255,.3); }
.hbot-close svg { width: 17px; height: 17px; }
.hbot-body { flex:1; min-height:0; padding: 16px; overflow-y: auto; background:color-mix(in srgb,var(--bg) 58%,var(--card)); scrollbar-gutter:stable; }
.hbot-nachricht { width:fit-content; max-width:92%; padding:12px 14px; border-radius:16px; font-size:14px; line-height:1.55; }
.hbot-nachricht.assistent { margin-right:auto; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; box-shadow:var(--shadow-sm); color:var(--ink); }
.hbot-nachricht.nutzer { margin:0 0 14px auto; background:var(--primary); color:#fff; border-bottom-right-radius:5px; font-weight:700; }
.hbot-nachricht small { display:block; margin-top:7px; color:var(--ink-soft); font-size:11px; }
.hbot-greet { font-size:14px; font-weight:800; color:var(--ink); line-height:1.5; }
.hbot-kontext { margin-top:18px; }
.hbot-schnellwahl { display:grid; gap:8px; }
.hbot-kat-titel { font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.hbot-topic { display:block; width:100%; min-height:44px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; font-family:inherit; font-size:13px; line-height:1.35; font-weight:750; color:var(--ink); cursor:pointer; transition:border-color .15s ease, color .15s ease, transform .15s ease; }
.hbot-topic + .hbot-topic { margin-top:7px; }
.hbot-topic:hover { border-color:var(--primary); color:var(--primary-deep); transform:translateX(2px); }
.hbot-topic:active, .hbot-senden:active, .hbot-close:active, .hbot-vorschlag:active { opacity:.82; }
.hbot-topic:focus-visible, .hbot-senden:focus-visible, .hbot-close:focus-visible, .hbot-vorschlag:focus-visible, .hbot-suche:focus-visible, .hbot-kat summary:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset:2px; }
.hbot-alle { margin-top:20px; }
.hbot-kat { margin-bottom:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.hbot-kat summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; cursor:pointer; color:var(--ink); font-size:13px; font-weight:850; list-style:none; }
.hbot-kat summary::-webkit-details-marker { display:none; }
.hbot-kat summary::after { content:'+'; color:var(--primary); font-size:18px; line-height:1; }
.hbot-kat[open] summary::after { content:'−'; }
.hbot-kat summary span { margin-left:auto; padding:2px 7px; border-radius:999px; background:var(--bg); color:var(--ink-soft); font-size:10px; }
.hbot-kat > div { padding:0 8px 8px; }
.hbot-frage { font-size:16px; font-weight:900; color:var(--ink); line-height:1.35; margin-bottom:8px; }
.hbot-antwort { font-size:14px; line-height:1.62; color:var(--ink); }
.hbot-rel-titel { font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 8px; }
.hbot-rel { display:grid; gap:7px; }
.hbot-neustart { min-height:44px; margin-top:14px; padding:9px 12px; border:0; background:transparent; color:var(--primary-deep); font-family:inherit; font-weight:850; cursor:pointer; }
.hbot-eingabe { position:relative; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card); }
.hbot-suchzeile { min-height:48px; display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--line); border-radius:15px; padding:5px 5px 5px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
.hbot-suchzeile:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); }
.hbot-suchzeile > svg { width:18px; height:18px; color:var(--ink-soft); flex:0 0 auto; }
.hbot-suche { min-width:0; border:none; background:none; outline:none; font-family:inherit; font-size:14px; line-height:1.35; color:var(--ink); width:100%; }
.hbot-senden { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; padding:0; border:0; border-radius:11px; background:var(--primary); color:#fff; cursor:pointer; }
.hbot-senden svg { width:18px; height:18px; }
.hbot-privat { margin-top:5px; text-align:center; color:var(--ink-soft); font-size:10px; font-weight:700; }
.hbot-vorschlaege { position:absolute; left:12px; right:12px; bottom:74px; max-height:220px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-lg); }
.hbot-vorschlaege[hidden] { display:none; }
.hbot-vorschlag { width:100%; min-height:44px; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:750; line-height:1.35; text-align:left; cursor:pointer; }
.hbot-vorschlag:hover { background:var(--bg); color:var(--primary-deep); }
@media (max-width:560px) {
  .hbot-fab { right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); width:48px; padding:12px; justify-content:center; }
  .hbot-fab-txt { display:none; }
  .hbot-panel { right:8px; left:8px; bottom:76px; width:auto; max-width:none; height:min(680px,calc(100dvh - 92px)); border-radius:18px; }
  .hbot-body { padding:14px 12px; }
  .hbot-suche { font-size:16px; }
  .hbot-ohne-ki { display:none; }
}
@media (prefers-reduced-motion:reduce) { .hbot-panel { animation:none; } .hbot-fab,.hbot-topic { transition:none; } }

.verb-fab { position: fixed; right: calc(22px + env(safe-area-inset-right)); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 300; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(160deg, var(--sun), #C77F1A); color: #fff; border: none; cursor: pointer;
  padding: 12px 18px 12px 14px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(201,127,26,.42); transition: transform .15s ease, box-shadow .15s ease; }
.verb-fab svg { width: 22px; height: 22px; }
.verb-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(201,127,26,.5); }
@media (max-width: 560px) {
  .verb-fab { right: calc(14px + env(safe-area-inset-right)); bottom: calc(66px + env(safe-area-inset-bottom)); padding: 12px; }
  .verb-fab-txt { display: none; }
  .nav-drawer .burger { right: calc(14px + env(safe-area-inset-right)); bottom: calc(118px + env(safe-area-inset-bottom)); min-width: 92px; }
  html.route-alma-rechner.nav-drawer .burger {
    width: 48px;
    min-width: 48px;
    padding: 12px;
    justify-content: center;
  }
  html.route-alma-rechner.nav-drawer .burger .burger-txt { display: none; }
}
.verb-panel { position: fixed; right: 22px; bottom: 140px; z-index: 301; width: 360px; max-width: calc(100vw - 28px);
  max-height: calc(100vh - 160px); display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg); animation: hbotAuf .18s ease; }
.verb-panel[hidden] { display: none; }
@media (max-width: 560px) { .verb-panel { right: 8px; left: 8px; bottom: 120px; width: auto; } }
.verb-kopf { display: flex; align-items: center; gap: 9px; padding: 14px; color: #fff; background: linear-gradient(160deg, var(--sun), #C77F1A); }
.verb-kopf svg { width: 20px; height: 20px; }
.verb-kopf-titel { font-weight: 900; font-size: 15px; flex: 1; }
.verb-close { background: rgba(255,255,255,.2); border: none; color: #fff; cursor: pointer; width: 30px; height: 30px; padding: 0; border-radius: 9px; display: grid; place-items: center; }
.verb-close:hover { background: rgba(255,255,255,.32); }
.verb-close svg { width: 15px; height: 15px; }
.verb-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.verb-seite { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; line-height: 1.4; }
.verb-seite b { color: var(--ink); }
.verb-text { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--bg); resize: vertical; min-height: 96px; outline: none; }
.verb-text:focus { border-color: var(--sun); }
.verb-send { background: linear-gradient(160deg, var(--sun), #C77F1A); color: #fff; border: none; cursor: pointer;
  padding: 12px; border-radius: 12px; font-family: inherit; font-weight: 800; font-size: 14.5px; }
.verb-send:hover { filter: brightness(1.05); }

#app, .main, .main-inner, #view, .card, .dash-grid, .dash-box { min-width: 0; max-width: 100%; }
#view img, #view svg, #view canvas, #view video { max-width: 100%; }
#view input, #view select, #view textarea, #view button { min-width: 0; }
#view input, #view select, #view textarea { max-width: 100%; }
.chip-timer { white-space: nowrap; font-variant-numeric: tabular-nums; }
.main-head h1, .main-head .sub, .card, .dash-box { overflow-wrap: break-word; }

.rechner-auswahl { flex: 0 1 380px; width: min(100%, 380px); }
.rechner-auswahl .seg { display: grid; width: 100%; }
.rechner-auswahl-op .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rechner-auswahl-level .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rechner-auswahl .seg-btn { width: 100%; min-height: 44px; padding: 8px 6px; white-space: nowrap; }

.nav-drawer .tr-layout { justify-content: center; }
.nav-drawer .tr-layout .tr-card { width: min(100%, 460px); }

@media (min-width: 600px) and (max-width: 1024px) {
  .nav-drawer .plan-grid {
    grid-template-columns: 38px 76px repeat(5, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }
  .nav-drawer .plan-grid .ph { font-size: 12px; }
  .nav-drawer .plan-grid .ph-zeit { font-size: 11.5px; gap: 4px; }
  .nav-drawer .pn-zeit { min-height: 54px; font-size: 11.5px; padding: 5px 2px; }
  .nav-drawer .pn-zeit.leer { font-size: 10.5px; }
  .nav-drawer .plan-grid .plan-cell {
    min-height: 54px;
    padding: 8px 5px;
    font-size: clamp(11px, 1.65vw, 13px);
    line-height: 1.2;
  }
}

@media (max-width: 599px) {
  .nav-drawer .plan-wrap { display: none; }
  .nav-drawer .plan-tage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nav-drawer .plan-tag { width: min(100%, 760px); margin: 0 auto; }
}

@media (min-width: 768px) {
  .nav-drawer .modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav-drawer .modes .mode-pill { width: 100%; min-height: 46px; padding: 8px 10px; }
}

@media (max-width: 767px) {
  .nav-drawer .main-inner { padding: 12px 16px 184px; }
  .nav-drawer .main-head:not(.leer) { gap: 10px 12px; padding: 12px 0 22px; }
  .nav-drawer .main-head:not(.leer) > .main-titel { width: min(100%, 580px); }
  .nav-drawer .main-head h1 { font-size: clamp(25px, 6vw, 30px); }
  .nav-drawer .main-head .sub { font-size: 14px; }
  .nav-drawer .modes {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; padding: 8px 0 14px; margin: 0 0 16px; background: transparent;
  }
  .nav-drawer .modes .mode-pill { width: 100%; min-height: 48px; padding: 8px 10px; line-height: 1.25; }
  .nav-drawer .modes #verlauf-btn { grid-column: 1 / -1; }
  .rechner-ctrl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .rechner-auswahl { width: 100%; }
  .rechner-ctrl > .primary { width: 100%; min-height: 46px; }
  .nav-drawer .tr-verlauf { width: 100%; min-width: 0; justify-content: center; }
  .rc-mehr-hinweis { flex-wrap: wrap; }
  .rc-mehr-hinweis > div { min-width: 0; flex: 1 1 240px !important; }
  .rc-mehr-hinweis > button { width: 100%; min-height: 46px; }
  .termin-row { flex-wrap: wrap; align-items: flex-start; }
  .termin-row > span { min-width: 0; max-width: 100%; }
  .termin-row > button { min-height: 44px; margin-left: auto; }
  .info-zeile { flex-wrap: wrap; }
  .info-zeile > * { min-width: 0; }
}

@media (max-width: 560px) {
  .nav-drawer .main-inner { padding: 10px 12px 176px; }
  .nav-drawer .main-head:not(.leer) { grid-template-columns: 44px minmax(0, 1fr) 44px; padding-top: 10px; }
  .nav-drawer .main-head:not(.leer) > .main-aktionen { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .nav-drawer .main-head h1 { font-size: 26px; }
  .nav-drawer .main-head .sub { max-width: 34ch; line-height: 1.42; }
  .nav-drawer .main-head:not(.leer) .chip-timer { padding: 8px 13px; font-size: 13px; }
  .nav-drawer .main-head:not(.leer) .avatar { width: 44px; height: 44px; }
  .card { padding: 16px; border-radius: 18px; }
  .plan-tag { padding: 14px 12px; }
  .plan-tag-zeile { grid-template-columns: 40px 84px minmax(0, 1fr); gap: 7px; }
  .plan-tag .plan-cell { min-height: 54px; }
  .plan-tag .pn-zeit { min-height: 54px; font-size: 12px; }
  .rechner-auswahl .seg-btn { font-size: 12.5px; padding-inline: 3px; }
  .geb-form { display: grid; grid-template-columns: minmax(0, 1fr); }
  .geb-form #geb-name, .geb-form #geb-tag, .geb-form #geb-jahr, .geb-form select, .geb-form button { width: 100%; min-width: 0; min-height: 44px; }
  .geb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 6px 10px; }
  .geb-row .geb-tag { grid-column: 1 / -1; }
  .geb-row .geb-del { width: 44px; height: 44px; }
  .tr-card { width: 100%; padding: 14px; }
  .tr-modus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tr-modus button { min-width: 0; min-height: 44px; padding-inline: 6px; white-space: normal; }
  .tr-grid { gap: 8px; }
  .tr-key { min-height: 56px; padding: 13px 0; }
}

@media (max-width: 380px) {
  .nav-drawer .main-inner { padding-inline: 10px; }
  .nav-drawer .main-head h1 { font-size: 24px; }
  .nav-drawer .main-head:not(.leer) .chip-timer { font-size: 12px; padding-inline: 10px; }
  .rechner-auswahl .seg-btn { font-size: 11.5px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .nav-drawer .main-head:not(.leer) { padding-bottom: 14px; }
  .nav-drawer .main-head:not(.leer) > .main-titel { grid-column: 1 / 3; text-align: left; justify-self: start; }
  .nav-drawer .main-head:not(.leer) > .main-aktionen { grid-column: 2 / -1; grid-row: 1; }
}
.verb-send:disabled { opacity: .6; cursor: default; }
.verb-hinweis { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.verb-danke { padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-weight: 800; color: var(--ink); }
.verb-danke svg { width: 40px; height: 40px; color: var(--sun); }
.verb-badge { display: inline-block; background: var(--sun); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 10px; vertical-align: 2px; }
.verb-liste { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.verb-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--bg); }
.verb-item.erledigt { opacity: .55; }
.verb-item-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.verb-seite-tag { background: var(--sun-soft); color: #92600f; font-size: 12px; font-weight: 800; border-radius: 8px; padding: 3px 9px; }
.verb-fam { background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 800; border-radius: 8px; padding: 3px 10px; letter-spacing: .01em; }
.verb-datum { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.verb-item-text { font-size: 14px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.verb-item-detail { font-size: 12px; color: var(--ink-soft); margin-top: 5px; font-style: italic; }
.verb-item-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.verb-von { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.verb-route { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, monospace; opacity: .8; }
.verb-frage { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 2px 0 -2px; }
.verb-optionen { display: flex; flex-wrap: wrap; gap: 7px; }
.verb-opt-chip { border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px;
  padding: 7px 12px; font-family: inherit; font-size: 12.8px; font-weight: 700; line-height: 1.15; cursor: pointer; text-align: left;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease; }
.verb-opt-chip:hover { border-color: var(--sun); }
.verb-opt-chip.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
.verb-opt-chip:active { transform: scale(.97); }
@keyframes verbWackel { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.verb-wackel { animation: verbWackel .38s ease; }
@media (prefers-reduced-motion: reduce) { .verb-wackel { animation: none; } }
.verb-bereich-chip { font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 4px 12px; letter-spacing: .01em; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.verb-kat-chip { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 11px; }
.verb-seite-klein { font-size: 11px; color: var(--ink-soft); font-weight: 600; opacity: .85; }
.verb-box-kopf { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.verb-box-kopf .chev { color: var(--ink-soft); transition: transform .2s ease; }
.verb-box-kopf .chev.auf { transform: rotate(90deg); }

.nav-ticker { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.nav-tick { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800;
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.nav-tick.gruen { background: var(--success); }
.nav-tick.gelb { background: var(--sun); }
.nav-tick.rot { background: var(--danger); }

.nav-paar { display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 2px; }
:root.nav-drawer .nav-paar { display: grid; }
.nav-mini {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 62px; padding: 9px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .10);
  color: #fff; font: 800 11.5px/1.2 inherit; font-family: inherit; text-align: center;
}
.nav-mini svg { width: 21px; height: 21px; }
.nav-mini:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }
.nav-mini:focus-visible { outline: 3px solid rgba(255, 255, 255, .45); outline-offset: 2px; }
.nav-mini-verb { color: #FFD79A; border-color: rgba(255, 190, 90, .38); }
.nav-mini-verb:hover { background: rgba(255, 190, 90, .18); border-color: rgba(255, 190, 90, .6); }
.nav-mini-badge {
  position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--danger); color: #fff; font: 900 11px/1 inherit;
}
.nav-mini-badge[hidden] { display: none !important; }
.hbot-fab, .verb-fab { display: none !important; }

.verb-fab-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--card); }
.verb-fab-badge[hidden] { display: none !important; }
.verb-neu { padding: 12px 14px; background: var(--success-soft); border-bottom: 1px solid var(--line); }
.verb-neu-titel { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: #0b6b4f; margin-bottom: 8px; }
.verb-neu-titel svg { width: 17px; height: 17px; color: var(--success); }
.verb-neu-item { font-size: 13px; color: var(--ink); line-height: 1.5; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 7px; }
.verb-neu-seite { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.verb-neu-ok { width: 100%; background: var(--success); color: #fff; border: none; cursor: pointer; padding: 9px;
  border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 13.5px; margin-top: 2px; }
.verb-neu-ok:hover { filter: brightness(1.05); }

.chat-buehne-lauf #messages { max-width: none; margin: 0; }

.merkzettel { position: fixed; left: 860px; top: 128px; z-index: 40; width: 218px; max-height: calc(100vh - 240px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); padding: 12px 13px; }
.merkzettel-kopf { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.merk-item { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 11px; background: var(--bg); margin-bottom: 7px; }
.merk-nr { font-size: 10px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; flex: 0 0 auto; }
.merk-frage { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.merk-gleich { color: var(--ink-soft); font-weight: 700; }
.merk-erg { font-size: 15px; font-weight: 900; color: var(--primary-deep); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .merkzettel { display: none; } }

.noten-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 12px; }
.noten-spalte-titel { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.noten-2col .noten-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.noten-2col .noten-chip { display: inline-flex; min-height:0; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px 2px 2px; cursor:default; box-shadow:none; }
.nc-kreis { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nc-fach { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
.noten-leer { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; padding: 3px 0; }
@media (max-width: 400px) { .noten-2col { grid-template-columns: 1fr; } }

html.onboarding-offen, html.onboarding-offen body { overflow: hidden; }
.onboarding-ebene {
  position: fixed; inset: 0; z-index: 10000; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
.onboarding-start-ebene {
  overflow: auto; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 92%, #fff);
}
.onboarding-startkarte {
  width: min(570px, 100%); border: 1px solid color-mix(in srgb, var(--line) 78%, var(--primary));
  border-radius: 28px; padding: clamp(22px, 5vw, 42px); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-lg); text-align: center;
}
.onboarding-logo { position: relative; width: min(210px, 55%); aspect-ratio: 1122 / 505; margin: 0 auto 22px; }
.onboarding-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.onboarding-startkarte h1 { color: #03045E; font-size: clamp(30px, 7vw, 46px); line-height: 1.08; margin: 0 0 10px; }
.onboarding-startkarte > p { color: var(--ink-soft); font-size: clamp(16px, 3vw, 20px); line-height: 1.5; max-width: 460px; margin: 0 auto 24px; }
.onboarding-karte { list-style: none; display: grid; gap: 9px; text-align: left; margin: 0 auto 22px; max-width: 430px; }
.onboarding-karte li { min-height: 58px; display: grid; grid-template-columns: 44px 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.onboarding-nummer {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary-soft); color: #03045E; font-size: 22px; font-weight: 800;
}
.onboarding-karte li:first-child .onboarding-nummer { background: #08AD9F; color: #fff; box-shadow: 0 7px 17px rgba(8,173,159,.25); }
.onboarding-thema-icon {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-soft) 75%, #fff); color: var(--primary);
}
.onboarding-karte b { color: var(--ink); font-size: clamp(16px, 3vw, 20px); line-height: 1.25; }
.onboarding-karte li:first-child b { color: #08A99C; }
.onboarding-dauer { display: flex; justify-content: center; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 16px; margin: 8px 0 16px; }
.onboarding-dauer .ic { color: #08A99C; }
.onboarding-startaktionen { display: grid; gap: 7px; }
.onboarding-startaktionen button, .onboarding-touraktionen button, .onboarding-themenwahl button { min-height: 48px; font-family: inherit; }
.onboarding-startaktionen .onboarding-beginnen {
  min-height: 58px; border-color: #08A99C; border-radius: 18px; background: #08A99C; color: #fff;
  font-size: 19px; box-shadow: 0 10px 22px rgba(8,169,156,.23);
}
.onboarding-pfeil { display: inline-flex; transform: rotate(180deg); }
.onboarding-spaeter { border: 0; background: transparent; color: #315BD5; font-weight: 800; }
.onboarding-ausblenden { min-height: 44px !important; border: 0; background: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 5px; }
.onboarding-themenwahl { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; text-align: left; }
.onboarding-themenwahl > span { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.onboarding-themenwahl > div { display: flex; flex-wrap: wrap; gap: 7px; }
.onboarding-themenwahl button { flex: 1 1 180px; color: var(--primary-deep); background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.onboarding-fehler { min-height: 20px; margin-top: 8px; color: var(--danger-deep); font-weight: 700; font-size: 13px; }

.onboarding-tour-ebene { pointer-events: auto; }
.nav-drawer.onboarding-nav-ziel .sidebar { transform: none !important; }
.onboarding-spotlight {
  position: fixed; z-index: 0; border: 5px solid #25C9BA; border-radius: 22px;
  box-shadow: 0 0 0 9999px rgba(8, 14, 25, .66), 0 0 0 9px rgba(37, 201, 186, .18), 0 14px 36px rgba(0,0,0,.18);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
  pointer-events: none;
}
.onboarding-tourkarte {
  position: fixed; z-index: 2; width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 72%, var(--primary)); border-radius: 24px; padding: 24px;
  background: var(--card); color: var(--ink); box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
.onboarding-tourkarte::before { content: ''; position: absolute; width: 18px; height: 18px; left: 54px; top: -10px; transform: rotate(45deg); background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.onboarding-tourkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.onboarding-tourkopf img { width: 54px; height: 54px; object-fit: contain; }
.onboarding-fortschritt { color: #315BD5; font-size: 16px; font-weight: 800; }
.onboarding-tourkarte h2 { color: #03045E; font-size: clamp(25px, 5vw, 34px); line-height: 1.16; margin: 0 0 8px; }
.onboarding-tourkarte > p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; margin: 0 0 20px; }
.onboarding-touraktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.onboarding-touraktionen .onboarding-weiter { grid-column: 1 / -1; min-height: 54px; font-size: 17px; background: #315BD5; border-color: #315BD5; }
.onboarding-touraktionen .onboarding-zurueck { color: #315BD5; border-color: #315BD5; background: var(--card); }
.onboarding-touraktionen .onboarding-beenden { color: var(--ink-soft); background: transparent; border-color: transparent; }
.onboarding-touraktionen button:focus-visible, .onboarding-startaktionen button:focus-visible, .onboarding-themenwahl button:focus-visible {
  outline: 4px solid color-mix(in srgb, #315BD5 38%, transparent); outline-offset: 3px;
}
:root[data-theme="dark"] .onboarding-startkarte h1, :root[data-theme="dark"] .onboarding-tourkarte h2 { color: #F6F9FD; }
:root[data-theme="dark"] .onboarding-start-ebene { background: #101420; }
:root[data-theme="dark"] .onboarding-startkarte, :root[data-theme="dark"] .onboarding-tourkarte { border-color: #40536E; }

@media (prefers-reduced-motion: reduce) {
  .onboarding-spotlight { transition: none; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .onboarding-tourkarte {
    left: 50% !important; right: auto; top: auto !important; bottom: max(16px, env(safe-area-inset-bottom));
    width: min(500px, calc(100vw - 32px)); transform: translateX(-50%);
  }
  .onboarding-tourkarte::before { display: none; }
}
@media (max-width: 720px) {
  .onboarding-start-ebene { place-items: start center; padding-inline: 12px; }
  .onboarding-startkarte { border-radius: 22px; padding: 22px 18px; }
  .onboarding-logo { margin-bottom: 14px; }
  .onboarding-startkarte > p { margin-bottom: 14px; }
  .onboarding-karte { gap: 2px; margin-bottom: 14px; }
  .onboarding-karte li { min-height: 50px; grid-template-columns: 39px 43px minmax(0, 1fr); gap: 8px; }
  .onboarding-nummer { width: 38px; height: 38px; font-size: 19px; }
  .onboarding-thema-icon { width: 40px; height: 40px; }
  .onboarding-thema-icon .app-ico { width: 24px !important; height: 24px !important; }
  .onboarding-dauer { margin: 4px 0 10px; }
  .onboarding-tourkarte { left: 12px !important; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); top: auto !important; width: auto; max-height: min(54dvh, 470px); border-radius: 22px; padding: 19px; }
  .onboarding-tourkarte::before { display: none; }
  .onboarding-tourkopf img { width: 44px; height: 44px; }
  .onboarding-tourkarte > p { font-size: 15px; line-height: 1.48; margin-bottom: 14px; }
}
@media (max-width: 390px) {
  .onboarding-startkarte h1 { font-size: 29px; }
  .onboarding-startkarte > p { font-size: 15px; }
  .onboarding-karte b { font-size: 15px; }
  .onboarding-startaktionen .onboarding-beginnen { min-height: 52px; font-size: 17px; }
  .onboarding-touraktionen { grid-template-columns: 1fr; }
  .onboarding-touraktionen .onboarding-weiter { grid-column: 1; }
}

.box-hilfe { position: absolute; right: 10px; bottom: 10px; width: 23px; height: 23px; padding: 0; border-radius: 50%;
  border: none; background: linear-gradient(180deg, var(--side-bg1), var(--side-bg2)); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 900; line-height: 1; display: grid; place-items: center; cursor: pointer;
  opacity: .9; z-index: 4; box-shadow: 0 2px 7px rgba(14,52,78,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.dash-box:hover .box-hilfe { opacity: 1; }
.box-hilfe:hover, .box-hilfe.an { opacity: 1; transform: scale(1.12); box-shadow: 0 5px 14px rgba(14,52,78,.5); }

.box-hinweis-pop { position: fixed; z-index: 400; width: 300px; max-width: calc(100vw - 20px); max-height: 62vh; overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 14px 16px 15px; animation: bhPop .16s ease-out; }
.bhp-x { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; padding: 0; border-radius: 9px; border: none;
  background: var(--bg); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.bhp-x svg { width: 15px; height: 15px; }
.bhp-x:hover { background: var(--danger-soft); color: var(--danger-deep); }
.bhp-titel { font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.25; margin: 0 30px 8px 0; }
.bhp-text { font-size: 13px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.bhp-text b { font-weight: 800; color: var(--primary-deep); }
@keyframes bhPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .box-hinweis-pop { animation: none; } }

.widget{
  position:relative; overflow:hidden;
  background:
    radial-gradient(760px 380px at 82% -30%, rgba(58,134,255,.18), transparent 60%),
    linear-gradient(180deg,#0c1740,#0a1130) !important;
  border:1px solid rgba(140,170,255,.22) !important;
  border-radius:20px !important;
  color:#e9f0ff !important;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7), 0 0 50px -24px rgba(58,134,255,.35) !important;
}
.widget::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(150,180,255,.14) 1px, transparent 1.5px);
  background-size:24px 24px;
}
.widget > *{ position:relative; z-index:1; }
.widget .w-frage,.widget .w-title{ color:#f4f7ff !important; font-weight:800; }
.widget .w-frage{ font-size:clamp(18px,2.4vw,22px); line-height:1.3; }
.widget .muted,.widget .r-hinweis,.widget .rh-merk-lbl,.widget .score{ color:#9fb2df !important; }
.widget .feedback{ color:#b9c6ee !important; }
.widget .feedback.ok{ color:#3ce3aa !important; }
.widget .w-tipp-text{
  background:#102B36 !important; color:#F4F7FF !important;
  border-left-color:#22D3A6 !important;
}
.widget .w-tipp-text .wt-hint{ color:inherit !important; }

.widget .opt{
  background:rgba(255,255,255,.045) !important;
  border:2px solid rgba(150,175,255,.28) !important;
  color:#eaf0ff !important; border-radius:14px !important;
  font-weight:700; font-size:16px; padding:13px 16px !important;
}
.widget .opts.row .opt{ border-radius:999px !important; }
.widget .opt:hover:not(:disabled){
  border-color:#3A86FF !important; background:rgba(58,134,255,.15) !important;
  transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(58,134,255,.65) !important;
}
.widget .opts:not(.row) .opt:nth-of-type(5n+1){ border-left:6px solid #3A86FF !important; }
.widget .opts:not(.row) .opt:nth-of-type(5n+2){ border-left:6px solid #FF3D8B !important; }
.widget .opts:not(.row) .opt:nth-of-type(5n+3){ border-left:6px solid #22D3A6 !important; }
.widget .opts:not(.row) .opt:nth-of-type(5n+4){ border-left:6px solid #FF9E2C !important; }
.widget .opts:not(.row) .opt:nth-of-type(5n+5){ border-left:6px solid #9B6BFF !important; }
.widget .opt.ok{
  background:rgba(34,211,166,.18) !important; border-color:#22D3A6 !important; color:#d4ffef !important;
  box-shadow:0 0 28px -6px #22D3A6 !important; animation:wPop .45s cubic-bezier(.2,1.3,.4,1);
}
.widget .opt.no{ background:rgba(255,84,112,.15) !important; border-color:#FF5470 !important; color:#ffd7de !important; animation:wShake .4s; }

.widget .rechnung-i,.widget .rechnung-h{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(150,175,255,.16) !important; }
.widget .r-ziffer{ font-size:40px !important; font-weight:800 !important; line-height:1; text-shadow:none !important; }
.widget .r-ziffer[data-d="0"]{ color:#7FD1FF; }
.widget .r-ziffer[data-d="1"]{ color:#FF9E2C; }
.widget .r-ziffer[data-d="2"]{ color:#FF5470; }
.widget .r-ziffer[data-d="3"]{ color:#3A86FF; }
.widget .r-ziffer[data-d="4"]{ color:#9B6BFF; }
.widget .r-ziffer[data-d="5"]{ color:#22D3A6; }
.widget .r-ziffer[data-d="6"]{ color:#FFD23F; }
.widget .r-ziffer[data-d="7"]{ color:#FF7AD5; }
.widget .r-ziffer[data-d="8"]{ color:#4CC9F0; }
.widget .r-ziffer[data-d="9"]{ color:#A0E548; }
.widget .r-op-cell,.widget .r-komma-cell{ color:#aebbe6 !important; font-size:32px; font-weight:800; }
.widget .r-linie{ border:none !important; height:5px !important; border-radius:5px; background:linear-gradient(90deg,#3A86FF,#9B6BFF,#FF3D8B) !important; box-shadow:0 0 16px -2px rgba(58,134,255,.6); }

.widget .r-loesung,.widget .r-carry,.widget .rechnung-h input{
  background:rgba(9,16,42,.9) !important; color:#eaf0ff !important;
  border:2px solid rgba(150,175,255,.4) !important; border-radius:12px !important; font-weight:800 !important;
}
.widget .r-loesung{ font-size:34px !important; }
.widget .r-loesung:focus,.widget .r-carry:focus,.widget .rechnung-h input:focus{
  border-color:#FFD23F !important; box-shadow:0 0 0 4px rgba(255,210,63,.2) !important; outline:none !important;
}
.widget .r-loesung.ok,.widget .rechnung-h input.ok{
  border-color:#22D3A6 !important; background:rgba(34,211,166,.28) !important; color:#a8ffe8 !important; text-shadow:0 1px 6px rgba(0,40,28,.55) !important; box-shadow:0 0 22px -6px #22D3A6 !important;
}
.widget .r-loesung.no,.widget .rechnung-h input.no{ border-color:#FF5470 !important; background:rgba(255,84,112,.15) !important; animation:wShake .4s; }

.widget .rh-num{ font-size:clamp(30px,6vw,46px) !important; font-weight:800 !important; }
.widget .rh-num.rh-c0{ color:#3A86FF; } .widget .rh-num.rh-c1{ color:#FF3D8B; } .widget .rh-num.rh-c2{ color:#22D3A6; }
.widget .rh-num.rh-c3{ color:#FF9E2C; } .widget .rh-num.rh-c4{ color:#9B6BFF; }
.widget .rh-op,.widget .rh-eq,.widget .rh-rest-lbl{ color:#FFD23F !important; font-weight:800; }
.widget .rh-merk-feld{ background:rgba(9,16,42,.85) !important; color:#eaf0ff !important; border-color:rgba(150,175,255,.3) !important; }
.widget .rw-einstieg-text,.widget .rw-einleitung{ color:#9fb2df !important; }
.widget .rw-start{ background:rgba(58,134,255,.14); border-color:#3A86FF; color:#cfe0ff; }
.widget .rw-start:hover,.widget .rw-start.offen{ background:#3A86FF; color:#fff; }
.widget .rw-werkstatt{ background:rgba(8,15,40,.72); border-color:rgba(95,143,255,.42); }
.widget .rw-fortschritt,.widget .rw-schritt-titel{ color:#7fd1ff; }
.widget .rw-balken{ background:rgba(255,255,255,.1); }
.widget .rw-erledigt-zeile{ background:rgba(34,211,166,.12); color:#c6d3f2; }
.widget .rw-schrittkarte{ background:rgba(255,255,255,.035); border-color:rgba(150,175,255,.22); }
.widget .rw-frage{ color:#eef3ff; }
.widget .rw-feld{ color:#aebde2; }
.widget .rw-felder.nummeriert .rw-feld{ background:rgba(58,134,255,.055); border-color:rgba(127,209,255,.2); }
.widget .rw-feld-nummer{ background:linear-gradient(180deg,#4d9bff,#3A86FF); color:#fff; }
.widget .rw-begriff-btn{ background:rgba(58,134,255,.14); border-color:rgba(127,209,255,.5); color:#bfe5ff; }
.widget .rw-begriff-btn:hover,.widget .rw-begriff-btn[aria-expanded="true"]{ background:#3A86FF; border-color:#7FD1FF; color:#fff; }
.widget .rw-feld input,.widget .rw-hilfe{ background:rgba(9,16,42,.9); color:#eaf0ff; border-color:rgba(150,175,255,.35); }
.widget .rw-feld.automatisch input{ background:rgba(58,134,255,.12); color:#9ddbff; border-color:rgba(127,209,255,.48); }
.widget .rw-auto-text{ color:#8fcfff; }
.widget .rw-feld input:focus{ border-color:#FFD23F; box-shadow:0 0 0 4px rgba(255,210,63,.16); }
.widget .rw-feld input.no{ border-color:#FF5470; background:rgba(255,84,112,.15); }
.widget .rw-begriff-panel{ background:linear-gradient(135deg,rgba(58,134,255,.16),rgba(12,21,52,.96)); border-color:rgba(127,209,255,.35); border-left-color:#7FD1FF; }
.widget .rw-begriff-panel b{ color:#9ddbff; }
.widget .rw-begriff-panel p{ color:#c5d2f1; }
.widget .rw-live-hinweis{ background:rgba(9,16,42,.92); border-color:rgba(150,175,255,.25); color:#c5d2f1; }
.widget .rw-live-hinweis.weiter{ background:rgba(58,134,255,.13); border-left-color:#7FD1FF; color:#bfe5ff; }
.widget .rw-live-hinweis.achtung{ background:rgba(255,84,112,.12); border-left-color:#FF5470; color:#ffb4c1; }
.widget .rw-live-hinweis.passend{ background:rgba(34,211,166,.12); border-left-color:#22D3A6; color:#a8ffe8; }
.widget .rw-schritt-fb{ color:#ff9aaa; }
.widget .rw-schritt-fb.ok,.widget .rw-fertig{ color:#3ce3aa; }
.widget .rw-fertig span{ color:#b9c6ee; }
.widget .qw-rechenhilfe{ background:rgba(58,134,255,.07); border-color:rgba(95,143,255,.38); }
.widget .qw-rechenhilfe > span{ color:#9fb2df; }
.widget .qw-oeffnen{ background:rgba(58,134,255,.14); border-color:#3A86FF; color:#cfe0ff; }
.widget .qw-oeffnen:hover,.widget .qw-oeffnen.offen{ background:#3A86FF; color:#fff; }
.widget .qw-rechenbox{ border-top-color:rgba(150,175,255,.2); }
.widget .qw-rechenplan-kopf{ background:linear-gradient(135deg,rgba(58,134,255,.15),rgba(12,21,52,.93)); border-color:rgba(127,209,255,.28); }
.widget .qw-rechenplan-kopf b{ color:#9ddbff; }
.widget .qw-rechenplan-kopf span:not(.qw-plan-symbol){ color:#c5d2f1; }
.widget .qw-rechenschritt{ background:rgba(9,16,42,.68); border-color:rgba(150,175,255,.24); }
.widget .qw-rechenschritt-kopf b{ color:#eef3ff; }

.widget::after{
  content:""; position:absolute; top:11px; right:13px; width:30px; height:30px; pointer-events:none; z-index:0; opacity:.85;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238fa6e0" stroke-width="1.6" stroke-linejoin="round"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>');
  animation:wtwinkle 3.2s ease-in-out infinite;
}

@keyframes wPop{ from{ transform:scale(.9); } to{ transform:scale(1); } }
@keyframes wShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
@keyframes wtwinkle{ 0%,100%{ opacity:.3; transform:scale(.8) rotate(0); } 50%{ opacity:.95; transform:scale(1.1) rotate(18deg); } }
@media (prefers-reduced-motion: reduce){
  .widget .opt.ok,.widget .opt.no,.widget .r-loesung.no,.widget .rechnung-h input.no,.widget::after{ animation:none !important; }
}

@media (display-mode: standalone) {
  html:not(.login-vollbild) .sidebar {
    top: max(14px, env(safe-area-inset-top));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  html:not(.login-vollbild) .main-inner {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

.nav-drawer .main-inner.dashboard-kopf-voll {
  --dashboard-seite-links: 24px;
  --dashboard-seite-rechts: 24px;
  padding-top: 0 !important;
}
.nav-drawer .dashboard-kopf-voll .main-head.leer {
  height: 0; min-height: 0; padding: 0; margin: 0; overflow: visible;
}
.nav-drawer .dashboard-kopf-voll .dash-alles > .kid-hero,
.nav-drawer .dashboard-kopf-voll .kind-start > .kid-hero {
  margin-left: calc(-1 * var(--dashboard-seite-links));
  margin-right: calc(-1 * var(--dashboard-seite-rechts));
  border-radius: 0 0 28px 28px;
  box-shadow: none;
  padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 18px));
  padding-left: max(24px, calc(env(safe-area-inset-left, 0px) + 24px));
  padding-right: max(24px, calc(env(safe-area-inset-right, 0px) + 24px));
}
@media (max-width: 767px) {
  .nav-drawer .main-inner.dashboard-kopf-voll {
    --dashboard-seite-links: 16px;
    --dashboard-seite-rechts: 16px;
  }
}
@media (max-width: 560px) {
  .nav-drawer .main-inner.dashboard-kopf-voll {
    --dashboard-seite-links: 12px;
    --dashboard-seite-rechts: 12px;
  }
}
@media (max-width: 380px) {
  .nav-drawer .main-inner.dashboard-kopf-voll {
    --dashboard-seite-links: 10px;
    --dashboard-seite-rechts: 10px;
  }
}

.dash-box[data-boxfarbe] {
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, .88);
  --card: rgba(8, 24, 39, .42);
  --bg: rgba(8, 24, 39, .24);
  --line: rgba(255, 255, 255, .28);
  --primary: #fff;
  --primary-deep: #fff;
  --primary-soft: rgba(255, 255, 255, .16);
  --teal: #d8fff9;
  --teal-soft: rgba(216, 255, 249, .16);
  --success: #d7ffe9;
  --success-soft: rgba(215, 255, 233, .18);
  --lime: #efffc7;
  --lime-soft: rgba(239, 255, 199, .18);
  --sun: #ffe8a3;
  --sun-soft: rgba(255, 232, 163, .18);
  --danger: #ffd0d8;
  --danger-deep: #ffdce3;
  --danger-soft: rgba(255, 208, 216, .18);
  color: #fff;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(rgba(5, 17, 29, .22), rgba(5, 17, 29, .22)),
    linear-gradient(135deg, var(--dash-a), var(--dash-b));
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 13px 28px color-mix(in srgb, var(--dash-a) 30%, transparent);
  isolation: isolate;
}
.dash-box[data-boxfarbe]::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .1) 0, transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, .06) 0, transparent 42%);
  background-size: 150% 150%, 160% 160%;
  will-change: transform;
  animation: dashboardAurora 24s ease-in-out infinite alternate;
}
.dash-box[data-boxfarbe="01"] { --dash-a: #1261a0; --dash-b: #087f8c; }
.dash-box[data-boxfarbe="02"] { --dash-a: #24475b; --dash-b: #2d6a70; }
.dash-box[data-boxfarbe="03"] { --dash-a: #147d64; --dash-b: #25855a; }
.dash-box[data-boxfarbe="04"] { --dash-a: #673ab7; --dash-b: #923aa5; }
.dash-box[data-boxfarbe="05"] { --dash-a: #b93a4a; --dash-b: #c65027; }
.dash-box[data-boxfarbe="06"] { --dash-a: #9a5d09; --dash-b: #956007; }
.dash-box[data-boxfarbe="07"] { --dash-a: #9b2c6f; --dash-b: #b2345b; }
.dash-box[data-boxfarbe="08"] { --dash-a: #3849a5; --dash-b: #28668f; }
.dash-box[data-boxfarbe="09"] { --dash-a: #a9481f; --dash-b: #9f5813; }
.dash-box[data-boxfarbe="10"] { --dash-a: #6f367f; --dash-b: #a44369; }
.dash-box[data-boxfarbe="11"] { --dash-a: #29445c; --dash-b: #3b6575; }
.dash-box[data-boxfarbe="12"] { --dash-a: #176b65; --dash-b: #32805c; }
.dash-box[data-boxfarbe="13"] { --dash-a: #263b73; --dash-b: #2e527f; }
.dash-box[data-boxfarbe="14"] { --dash-a: #43346f; --dash-b: #62437a; }
.dash-box[data-boxfarbe="15"] { --dash-a: #214f5d; --dash-b: #2a6a68; }
.dash-box[data-boxfarbe="16"] { --dash-a: #32754c; --dash-b: #397642; }

.dash-alles .dash-box[data-boxfarbe]::before { opacity: .85; }
.dash-box[data-boxfarbe] > :not(.box-x):not(.box-grip):not(.box-hilfe):not(.pm-schleier):not(.plus-menue) {
  position: relative;
  z-index: 1;
}
.dash-alles .dash-box[data-boxfarbe]:hover {
  border-color: transparent;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--dash-a) 38%, transparent);
  transform: translateY(-3px);
}
.dash-alles .dash-box[data-boxfarbe].lern-fokus,
:root[data-theme="dark"] .dash-alles .dash-box[data-boxfarbe].lern-fokus,
:root[data-theme="dark"] .dash-box[data-boxfarbe].admin-dash-box {
  border: 0;
  background:
    linear-gradient(rgba(5, 17, 29, .22), rgba(5, 17, 29, .22)),
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .1) 0, transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, .06) 0, transparent 42%),
    linear-gradient(135deg, var(--dash-a), var(--dash-b));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--dash-a) 30%, transparent);
}
.dash-box[data-boxfarbe] h3,
.dash-box[data-boxfarbe].lern-fokus > h3,
.dash-box[data-boxfarbe].lern-fokus .heute-wert b,
.dash-box[data-boxfarbe] .admin-dash-kicker,
.dash-box[data-boxfarbe] .admin-dash-hauptwert,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .admin-dash-kicker,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .admin-dash-hauptwert {
  color: #fff;
}
.dash-box[data-boxfarbe] h3 {
  font-size: clamp(15.5px, 1.45vw, 17px);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.dash-box[data-boxfarbe] .sub,
.dash-box[data-boxfarbe] .muted,
.dash-box[data-boxfarbe] .admin-dash-hauptwert small,
.dash-box[data-boxfarbe] .admin-dash-werte > span,
.dash-box[data-boxfarbe] .admin-dash-zeile,
.dash-box[data-boxfarbe] .admin-dash-modell {
  color: rgba(255, 255, 255, .88);
}
.dash-box[data-boxfarbe] .ax-lbl,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .ax-lbl {
  color: #fff;
  background: rgba(8, 24, 39, .56);
}
.dash-box[data-boxfarbe] .ax-chart svg,
.dash-box[data-boxfarbe] .kk-chart svg {
  filter: brightness(1.24) saturate(1.08) drop-shadow(0 1px 2px rgba(255, 255, 255, .34));
}
.dash-box[data-boxfarbe] .status-pill.gut,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .status-pill.gut {
  background: rgba(215, 255, 233, .92);
  color: #12513d;
}
.dash-box[data-boxfarbe] .status-pill.schlecht,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .status-pill.schlecht {
  background: rgba(255, 222, 228, .94);
  color: #8a2235;
}
.dash-box[data-boxfarbe] button.primary {
  min-height: 44px;
  border: 0;
  background: rgba(255, 255, 255, .95);
  color: #12364a;
  box-shadow: 0 8px 20px rgba(8, 24, 39, .2);
}
.dash-box[data-boxfarbe] .mode-pill,
.dash-box[data-boxfarbe] .hp-box,
.dash-box[data-boxfarbe] .dr-alle {
  min-height: 44px;
}
.dash-box[data-boxfarbe] .mode-pill,
.dash-box[data-boxfarbe] .range-tab,
.dash-box[data-boxfarbe] .hp-tab,
.dash-box[data-boxfarbe] .hp-tag,
.dash-box[data-boxfarbe] .plan-kind,
.dash-box[data-boxfarbe] .lu-tab,
.dash-box[data-boxfarbe] .mb-rtab,
.dash-box[data-boxfarbe] .rst-kind-btn,
.dash-box[data-boxfarbe] .noten-kind-btn,
.dash-box[data-boxfarbe] .kind-faecher-kind {
  background: rgba(8, 24, 39, .4);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
}
.dash-box[data-boxfarbe] .range-tab.an,
.dash-box[data-boxfarbe] .hp-tab.an,
.dash-box[data-boxfarbe] .hp-tag.an,
.dash-box[data-boxfarbe] .plan-kind.an,
.dash-box[data-boxfarbe] .lu-tab.an,
.dash-box[data-boxfarbe] .mb-rtab.an,
.dash-box[data-boxfarbe] .rst-kind-btn.an,
.dash-box[data-boxfarbe] .noten-kind-btn.an,
.dash-box[data-boxfarbe] .kind-faecher-kind.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .range-tab.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .hp-tab.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .hp-tag.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .plan-kind.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .rst-kind-btn.an,
:root[data-theme="dark"] .dash-box[data-boxfarbe] .noten-kind-btn.an {
  background: rgba(255, 255, 255, .94);
  border-color: transparent;
  color: #12364a;
  box-shadow: 0 5px 14px rgba(8, 24, 39, .2);
}
.dash-box[data-boxfarbe] .box-x,
.dash-box[data-boxfarbe] .box-hilfe {
  width: 44px;
  height: 44px;
  border-color: transparent;
  background: radial-gradient(circle, rgba(8, 24, 39, .56) 0 14px, transparent 15px);
  color: #fff;
}
.dash-box[data-boxfarbe] .box-x:hover,
.dash-box[data-boxfarbe] .box-x:focus-visible,
.dash-box[data-boxfarbe] .box-hilfe:hover,
.dash-box[data-boxfarbe] .box-hilfe:focus-visible {
  background: radial-gradient(circle, rgba(8, 24, 39, .82) 0 15px, transparent 16px);
}
.dash-box[data-boxfarbe] .box-x { top: 4px; right: 4px; }
.dash-box[data-boxfarbe] .box-hilfe { right: 4px; bottom: 4px; }
.dash-box[data-boxfarbe]:has(.box-x) h3 { padding-right: 42px; }
.dash-box[data-boxfarbe] .box-grip { color: rgba(255, 255, 255, .84); }
.dash-box[data-boxfarbe] .box-grip:hover {
  background: rgba(8, 24, 39, .38);
  color: #fff;
}
.dash-box[data-boxfarbe] .admin-dash-werte > span,
.dash-box[data-boxfarbe] .admin-dash-zeile,
.dash-box[data-boxfarbe] .noten-2col .noten-chip {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(8, 24, 39, .28);
}
.dash-box[data-boxfarbe] .admin-dash-status {
  background: rgba(255, 232, 163, .92);
  color: #6e4700;
}
.dash-box[data-boxfarbe] .admin-dash-status.aktiv {
  background: rgba(215, 255, 233, .92);
  color: #12513d;
}
.dash-box[data-boxfarbe].box-plus {
  min-height: 170px;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(rgba(5, 17, 29, .22), rgba(5, 17, 29, .22)),
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .1) 0, transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, .06) 0, transparent 42%),
    linear-gradient(135deg, var(--dash-a), var(--dash-b));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--dash-a) 30%, transparent);
}
.dash-box[data-boxfarbe].box-plus::before { inset: 0; opacity: .9; }
.dash-box[data-boxfarbe].box-plus::after { display: none; }
.dash-box[data-boxfarbe] .plus-mitte { min-height: 124px; color: #fff; font-size: 14px; }
.dash-box[data-boxfarbe] :is(button, [tabindex]):focus-visible,
.dash-box[data-boxfarbe] .box-grip:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@keyframes dashboardAurora {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(5.5%, 4.5%, 0); }
}

@media (max-width: 699px) {
  .dash-alles { gap: 14px; }
  .dash-box[data-boxfarbe] {
    min-height: 154px;
    padding: 16px;
    border-radius: 17px;
  }
  .dash-box[data-boxfarbe] h3 { font-size: 16px; }
  .dash-box[data-boxfarbe] .heute-wert b { font-size: clamp(38px, 12vw, 46px); }
  .dash-box[data-boxfarbe] .admin-dash-hauptwert { font-size: clamp(27px, 9vw, 34px); }
}

@media (max-width: 420px) {
  .dash-box[data-boxfarbe] { padding: 15px 14px; }
  .dash-box[data-boxfarbe] .admin-dash-werte { gap: 7px; }
  .dash-box[data-boxfarbe] .admin-dash-werte > span { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-box[data-boxfarbe] { animation: none; }
  .dash-box[data-boxfarbe]::after { animation: none; }
  .dash-box::before,
  .pl-karte::before,
  .pl-neu::before { animation: none; }
}

html.alma-ruht *,
html.alma-ruht *::before,
html.alma-ruht *::after { animation-play-state: paused !important; }

html.alma-untaetig .dash-box[data-boxfarbe]::after,
html.alma-untaetig .dash-box::before,
html.alma-untaetig .pl-karte::before,
html.alma-untaetig .pl-neu::before,
html.alma-untaetig .kh-stern,
html.alma-untaetig .kh-schnuppe,
html.alma-untaetig .kh-face,
html.alma-untaetig .ks-kibox h2,
html.alma-untaetig .kh-face * { animation-play-state: paused; }

.dash-box.alma-ausserhalb[data-boxfarbe]::after,
.dash-box.alma-ausserhalb::before,
.pl-karte.alma-ausserhalb::before,
.pl-neu.alma-ausserhalb::before { animation-play-state: paused; }

.tr-frei { min-width: 0; display: flex; flex-direction: column; }
.tr-frei-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  height: clamp(420px, calc(100dvh - 272px), 1180px);
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--bg) 74%, var(--card));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-soft) 28%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  touch-action: none;
  cursor: crosshair;
}
.tr-frei-linien { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr-frei-leer {
  position: absolute; z-index: 1; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: var(--ink-soft); font-size: 15px; font-weight: 700; pointer-events: none;
}
.tr-frei-node {
  position: absolute; z-index: 2; min-width: 156px;
  background: var(--card); border: 0;
  border-radius: 15px; padding: 7px 11px 11px; box-shadow: 0 12px 28px rgba(6, 14, 28, .24);
  cursor: default;
}
.tr-frei-node::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), var(--f, #42D6C3), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, var(--f, #42D6C3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: alma-neon-kreisen 6s linear infinite;
}
.tr-frei-griff { height: 20px; margin: -2px -4px 6px; display: flex; align-items: center; justify-content: space-between; cursor: grab; touch-action: none; }
.tr-frei-griff:active { cursor: grabbing; }
.tr-frei-punkte { color: var(--ink-soft); letter-spacing: 2px; font-size: 12px; }
.tr-frei-x {
  width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.tr-frei-x:hover { background: var(--bg); color: var(--ink); }
.tr-frei-zeile { position: relative; display: flex; align-items: center; gap: 6px; }
.tr-frei-zahl, .tr-frei-chip {
  width: 62px; min-height: 44px; text-align: center; font-size: 17px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); padding: 4px 6px;
}
.tr-frei-chip { display: inline-flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--f, var(--primary)); color: var(--f, var(--primary)); font-weight: 800; }
.tr-frei-loesen { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.tr-frei-loesen:hover { background: var(--bg); color: var(--ink); }
.tr-frei-op { min-height: 44px; width: 48px; text-align: center; font-size: 17px; font-family: inherit; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); }
.tr-frei-eq { color: var(--ink-soft); font-size: 20px; font-weight: 900; }
.tr-frei-erg { min-width: 56px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; font-size: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-frei-port {
  width: 24px; height: 24px; flex: 0 0 auto; padding: 0; border-radius: 50%;
  border: 3px solid var(--card); background: var(--f, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f, var(--primary)) 28%, transparent); cursor: crosshair; touch-action: none;
}
.tr-frei-port.ein { position: absolute; left: -13px; top: 50%; transform: translateY(-50%); background: var(--gold, #F4A23C); box-shadow: 0 0 0 3px color-mix(in srgb, #F4A23C 28%, transparent); cursor: default; }
.tr-frei-port:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tr-frei-hilfe { margin: 14px 2px 0; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.tr-frei-hilfe b { color: var(--ink); font-weight: 800; }

.tr-viz-themen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 6px;
  margin-bottom: 16px;
}
.tr-viz-thema {
  width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; cursor: pointer;
  color: var(--ink); font-family: inherit; text-align: left;
}
.tr-viz-thema:hover:not(.an) { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.tr-viz-thema.an { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.tr-viz-emo { font-size: 22px; line-height: 1; }
.tr-viz-nm { font-weight: 800; font-size: 13px; }
.tr-viz-kl { color: var(--ink-soft); font-size: 11px; }
.tr-viz-layout {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: stretch;
  width: 100%; max-width: 100%; min-width: 0; overflow-x: clip;
  min-height: clamp(430px, calc(100dvh - 300px), 1180px);
}
.tr-viz-layout > .card { width: 100%; max-width: 100%; margin: 0; min-width: 0; overflow-x: clip; }
.tr-viz-steuerung { overflow-y: auto; }
.tr-viz-titel { margin: 0 0 4px; font-size: 18px; }
.tr-viz-story { margin: 0 0 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.tr-viz-feld { display: block; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 14px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.tr-viz-zeile { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.tr-viz-feld input[type="number"] { width: 88px; min-height: 44px; text-align: center; font-size: 16px; font-family: inherit; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); padding: 6px; }
.tr-viz-feld input[type="range"] { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin-top: 8px; accent-color: var(--teal, #42D6C3); }
.tr-viz-einheit { color: var(--ink-soft); font-size: 13px; }
.tr-viz-ergebnis { margin-top: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.tr-viz-gross { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-viz-formel { margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
.tr-viz-buehne { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; min-height: 0; }
.tr-viz-canvas {
  display: block; width: 100%; max-width: 100%; min-width: 0; flex: 1 1 auto; min-height: 360px;
  border-radius: 14px; background: color-mix(in srgb, var(--bg) 74%, var(--card));
  touch-action: none; cursor: grab;
}
.tr-viz-canvas:active { cursor: grabbing; }

.alma-spiele-bereich {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.alma-spiele-hinweis {
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, #8A5CFF 35%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, #8A5CFF 9%, var(--card));
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}
.alma-spiele-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: max(720px, calc(100dvh - 190px));
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0A0E18;
  box-shadow: var(--shadow);
}
@media (max-width: 1024px) {
  .alma-spiele-frame {
    height: max(700px, calc(100dvh - 205px));
    border-radius: 16px;
  }
}
.tr-viz-werkzeuge { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tr-viz-werkzeuge .mode-pill { min-height: 44px; display: inline-flex; align-items: center; }
.tr-viz-werkzeuge .mode-pill.an { background: var(--primary); color: #fff; }
.tr-viz-hint { margin: 10px 2px 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }

@media (max-width: 1300px) {
  .tr-viz-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tr-viz-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .tr-viz-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-frei-board { height: calc(100dvh - 246px); min-height: 460px; }
  .tr-viz-layout { min-height: calc(100dvh - 268px); }
  .tr-viz-canvas { min-height: 300px; }
}
@media (min-width: 901px) {
  .tr-layout { height: clamp(430px, calc(100dvh - 262px), 1180px); }
  .tr-card { max-height: 100%; overflow-y: auto; }
  .tr-viz-layout { height: clamp(430px, calc(100dvh - 300px), 1180px); }
  .tr-viz-canvas { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-viz-werkzeuge .mode-pill { display: none; }
  .tr-frei-node::before { animation: none; }
}
.r-kopf-row { margin-bottom: 1px; }
.r-cell.r-kopf-cell {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-soft); line-height: 1.1;
}
.widget .r-cell.r-kopf-cell { color: #A9BCE4 !important; }

.rechenstrich { margin: 16px 0 4px; }
.rs-titel {
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  margin-bottom: 4px;
}
.widget .rs-titel { color: #A9BCE4 !important; }
.rs-feld { padding: 46px 6px 68px; }
.rs-spur { position: relative; margin: 0 38px; height: 3px; }
.rs-linie { display: block; height: 3px; border-radius: 3px; background: var(--line); }
.widget .rs-linie { background: rgba(150, 175, 255, .34); }
.rs-pkt {
  position: absolute; top: -5px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--primary); transform: translateX(-50%);
  border: 2.5px solid var(--card);
}
.widget .rs-pkt { background: #7FD1FF; border-color: #0b1330; }
.rs-pkt.start { background: var(--ink-soft); }
.widget .rs-pkt.start { background: #A9BCE4; }
.rs-pkt.ziel { background: var(--success); }
.widget .rs-pkt.ziel { background: #22D3A6; }
.rs-wert {
  position: absolute; top: 15px; transform: translateX(-50%);
  font-size: 13px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.widget .rs-wert { color: #EAF0FF !important; }
.rs-eingabefeld {
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rs-wert-input {
  width: clamp(48px, 8vw, 88px);
  min-height: 38px;
  border: 2px solid color-mix(in srgb, var(--primary) 58%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 88%, #000);
  color: var(--ink);
  padding: 6px 8px;
  font: 900 13px/1 'Nunito', sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.16);
}
.widget .rs-wert-input { border-color: rgba(127,209,255,.65); background: #0B1330; color: #F7FAFF; }
.rs-wert-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset: 2px; }
.rs-wert-input.ok { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }
.rs-wert-input.no { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.rs-eingabefeld small { color: var(--ink-soft); font-size: 11px; font-weight: 900; }
.widget .rs-eingabefeld small { color: #A9BCE4; }
.rs-rueckmeldung { min-height: 20px; margin-top: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.rs-rueckmeldung.ok { color: var(--success); }
.rs-rueckmeldung.no { color: var(--danger); }
.rs-bogen {
  position: absolute; top: -30px; height: 30px; display: block;
  border: 2.5px solid var(--primary); border-bottom: none;
  border-radius: 60px 60px 0 0; opacity: .8;
}
.widget .rs-bogen { border-color: #7FD1FF; }
.rs-sprung {
  position: absolute; top: -44px; transform: translateX(-50%);
  font-size: 12px; font-weight: 800; white-space: nowrap;
  color: var(--primary-deep); background: var(--card);
  padding: 0 6px; border-radius: 6px;
}
.widget .rs-sprung { color: #7FD1FF !important; background: #0b1330; }

.rw-punktefeld {
  display: inline-grid; gap: 7px; margin: 10px 0 4px; padding: 12px 14px;
  border-radius: 13px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(150, 175, 255, .22);
}
.rw-punktefeld .rw-pf-reihe {
  display: grid; grid-auto-flow: column; gap: 7px;
  justify-content: start; align-items: center; opacity: .34;
}
.rw-punktefeld .rw-pf-reihe.an { opacity: 1; }
.rw-punktefeld i {
  width: 24px; height: 24px; border-radius: 50%; background: #7FD1FF;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.rw-punktefeld .rw-pf-reihe:nth-child(even) i { background: #FFD23F; }
.rw-punktefeld span {
  font-size: 11px; font-weight: 800; color: #A9BCE4;
  padding-left: 7px; white-space: nowrap;
}

.rw-stellenmarke {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 8px; padding: 0 5px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: rgba(127, 209, 255, .22); color: #BEE6FF;
}
.rw-divspur { margin: 4px 0 12px; }
.rw-divkopf {
  display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap;
  font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rw-divzahl span { padding: 0 2px; border-radius: 6px; color: #EAF0FF; }
.rw-divzahl span.jetzt { background: rgba(255, 210, 63, .32); box-shadow: 0 0 0 2px rgba(255, 210, 63, .58); }
.rw-divzahl span.fertig { opacity: .42; }
.rw-divkopf em { font-style: normal; font-size: 22px; color: #A9BCE4; margin: 0 6px; }
.rw-divq { display: flex; gap: 3px; }
.rw-divq b {
  width: 28px; height: 38px; display: grid; place-items: center; border-radius: 9px;
  border: 1.5px dashed rgba(150, 175, 255, .45); color: #A9BCE4; font-size: 23px;
}
.rw-divq b.gesetzt { border-style: solid; border-color: #22D3A6; background: rgba(34, 211, 166, .24); color: #A8FFE8; }
.rw-divstellen { display: flex; gap: 4px; align-items: baseline; }
.rw-divstellen > span:first-child { visibility: hidden; font-size: 27px; font-weight: 800; }
.rw-divstellen em { font-style: normal; visibility: hidden; font-size: 22px; margin: 0 6px; }
.rw-divstellen > span:last-child { display: flex; gap: 3px; }
.rw-divstellen u {
  width: 28px; text-decoration: none; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #A9BCE4;
}
.rw-holen {
  display: block; margin-top: 10px; padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.45; color: #FFE9B8;
  background: rgba(255, 210, 63, .12); border: 1px dashed rgba(255, 210, 63, .5);
}
.rw-holen b { color: #FFD23F; }

.rw-reihe {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(150, 175, 255, .2);
}
.rw-reihe-titel {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #A9BCE4; margin-bottom: 8px;
}
.rw-reihe ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 4px;
}
.rw-reihe li {
  display: flex; justify-content: space-between; gap: 6px; align-items: baseline;
  padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #D6E2F5;
  border: 1px solid transparent;
}
.rw-reihe li b { color: #EAF0FF; }
.rw-reihe li.an { background: rgba(127, 209, 255, .2); border-color: #7FD1FF; color: #DFF3FF; }
.rw-reihe li.an b { color: #BEE6FF; }
.rw-reihe li.zu-gross { opacity: .45; }

@media (max-width: 560px) {
  .rs-feld { padding: 42px 2px 32px; }
  .rs-spur { margin: 0 30px; }
  .rs-wert { font-size: 12px; }
  .rw-divkopf { font-size: 23px; }
  .rw-divkopf em { font-size: 19px; }
  .rw-divq b { width: 24px; height: 34px; font-size: 20px; }
  .rw-divstellen u { width: 24px; }
  .rw-punktefeld i { width: 20px; height: 20px; }
}

@media (max-width: 820px) {
  .kw { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .kw-reiter { grid-row: auto; grid-template-rows: auto auto auto; }
  .kw-liste { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
  .kw-stapel { min-width: 150px; }
  .kw-aufraeumen { grid-template-columns: 1fr 1fr; }
  .kw-feld { padding: 4px 8px 18px; }
  .kw-heute { display: none; }
  .kw-titel { font-size: 15px; }
  .lk-mitte { padding: 6px 24px; }
  .kw-werkbank { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .zettel-leiste { gap: 9px; }
  .zettel-suche { max-width: none; }
  .zettel-zahl { margin-left: 0; }
  .lk-aktionen { gap: 8px; }
  .lk-knopf { padding: 12px 14px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-karte, .kw-stapel, .zettel, .zettel-neu, .lk-knopf, .zettel-punkt { transition: none; }
  .zettel, .zettel:hover, .zettel-neu:hover, .lk-knopf:hover, .zettel-punkt:hover { transform: none !important; }
}

.wb-kopfband { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 24px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(130% 190% at 88% -40%, #2A5EA8 0%, #1A3E7A 46%, #12224A 100%); box-shadow: var(--shadow-md); }
.wb-kopfband::after { content: ''; position: absolute; width: 260px; height: 260px; right: -70px; top: -130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,191,160,.34), transparent 70%); pointer-events: none; }
.wb-kopfband-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wb-kopfband-txt { flex: 1; min-width: 220px; }
.wb-kopfband h2 { font-size: 25px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.wb-kopfband p { font-size: 13.5px; font-weight: 700; opacity: .9; margin: 5px 0 0; }
.wb-kopfband-werte { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-wert { border-radius: 15px; padding: 11px 15px; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); min-width: 106px; }
.wb-wert b { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb-wert span { display: block; font-size: 11.5px; font-weight: 800; opacity: .84; margin-top: 2px; }

.wb-karten { column-count: 2; column-gap: 16px; }
@media (max-width: 1180px) { .wb-karten { column-count: 1; } }
.wb-karten > .card, .wb-karten > .wb-karte { --akzent: var(--primary); position: relative; display: block; width: 100%;
  margin: 0 0 16px; break-inside: avoid; border-radius: 22px; overflow: hidden; padding: 0; }
.wb-karten > .voll { column-span: all; margin-top: 0; }
.wb-karten > .card::before, .wb-karten > .wb-karte::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 30%, transparent)); }
.wb-kopf { display: flex; align-items: center; gap: 13px; padding: 17px 20px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 8%, transparent), transparent); }
.wb-tafel { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, #0A1124));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--akzent) 34%, transparent); }
.wb-tafel svg { width: 20px; height: 20px; }
.wb-kopf h2 { font-size: 15.5px; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.wb-kopf .wb-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.wb-inhalt { padding: 4px 20px 18px; }
.wb-inhalt > label { display: block; margin-top: 12px; }
.wb-fuss { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; padding: 14px 20px;
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--line) 16%, transparent); }
.wb-fuss button { margin: 0 !important; }

.wb-schalter { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.wb-schalter > span { font-size: 12px; font-weight: 900; color: var(--ink-soft); white-space: nowrap; }
.wb-schalter button { position: relative; width: 58px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 999px; padding: 0;
  background: color-mix(in srgb, var(--line) 85%, transparent); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s ease, box-shadow .2s ease; cursor: pointer; }
.wb-schalter button::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); transition: transform .2s cubic-bezier(.3,.9,.4,1); }
.wb-schalter button[aria-checked="true"] { background: linear-gradient(140deg, var(--akzent), color-mix(in srgb, var(--akzent) 62%, #0A1124));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 60%, transparent), 0 4px 12px color-mix(in srgb, var(--akzent) 34%, transparent); }
.wb-schalter button[aria-checked="true"]::after { transform: translateX(26px); }
.wb-schalter button:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 40%, transparent); outline-offset: 2px; }
.wb-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.verwaltung-seiteninhalt.wb-karten { column-count: 1; }
.verwaltung-seiteninhalt.wb-karten > .card { padding: 16px 18px; }
.verwaltung-seiteninhalt.wb-karten > .fam-card { padding: 16px 18px; }

@media (max-width: 900px) {
  .wb-kopfband { padding: 16px 18px; border-radius: 18px; }
  .wb-kopfband h2 { font-size: 21px; }
  .wb-kopfband-in { gap: 14px; }
  .wb-kopfband-werte { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wb-wert { min-width: 0; padding: 10px 12px; }
  .wb-wert b { font-size: 17px; }
  .wb-kopf { padding: 15px 16px 12px; gap: 11px; }
  .wb-tafel { width: 36px; height: 36px; border-radius: 11px; }
  .wb-inhalt { padding: 4px 16px 16px; }
  .wb-fuss { padding: 12px 16px; }
  .wb-fuss button { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 620px) {
  .wb-kopfband-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-kopfband h2 { font-size: 19px; }
  .wb-schalter > span { display: none; }
  .wb-fuss { flex-direction: column; }
  .wb-fuss button { width: 100%; }
}

.pl-seite { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.pl-neu { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-radius: 20px; padding: 15px 20px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.pl-neu .pl-tafel { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #0A1124));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 34%, transparent); }
.pl-neu .pl-txt { flex: 1; min-width: 200px; }
.pl-neu .pl-txt b { display: block; font-size: 15px; font-weight: 900; }
.pl-neu .pl-txt span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.pl-neu-knoepfe { display: flex; gap: 9px; flex-wrap: wrap; }
.pl-neu-knoepfe button { border: 1.5px solid var(--line); background: var(--card); border-radius: 13px; padding: 11px 16px;
  min-height: 48px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--seg); border-color: color-mix(in srgb, var(--seg) 30%, transparent);
  background: color-mix(in srgb, var(--seg) 8%, var(--card)); }
:root[data-theme="dark"] .pl-neu-knoepfe button { color: color-mix(in srgb, var(--seg) 58%, #FFFFFF); }
:root[data-theme="dark"] .pl-neu-knoepfe button:hover { color: color-mix(in srgb, var(--seg) 40%, #FFFFFF); }
.pl-neu-knoepfe button:hover { border-color: var(--seg);
  background: color-mix(in srgb, var(--seg) 16%, var(--card)); box-shadow: 0 4px 12px color-mix(in srgb, var(--seg) 22%, transparent); }
.pl-ueberfaellig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 16px; padding: 12px 16px;
  background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); flex: 0 0 auto; }
.pl-ueberfaellig > svg { color: var(--danger-deep); flex: 0 0 auto; }
.pl-ueberfaellig b { font-size: 13.5px; font-weight: 900; }
.pl-ueberfaellig .pl-uf-text { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.pl-ueberfaellig button { margin-left: auto; min-height: 42px; padding: 9px 14px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--card);
  font-size: 12.5px; font-weight: 900; color: var(--danger-deep); }
.pl-ueberfaellig button:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--card)); }
.pl-bahnen { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: stretch;
  flex: 1 1 auto; min-height: 0; }
.pl-links { display: grid; grid-template-rows: minmax(0, 364px) minmax(178px, 1fr); gap: 16px; min-height: 0; }
.pl-rechts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }
.pl-karte { --akzent: var(--primary); position: relative; display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; }
.pl-rechts > .pl-karte:nth-of-type(2)::before { animation-delay: -4.4s; }
.pl-links > .pl-karte:nth-of-type(2)::before { animation-delay: -8.8s; }
.pl-neu::before { animation-delay: -2.2s; }
.pl-kopf { display: flex; align-items: center; gap: 13px; padding: 17px 20px 14px; flex: 0 0 auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 8%, transparent), transparent); }
.pl-kopf .pl-tafel { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, #0A1124)); }
.pl-kopf > div { min-width: 0; }
.pl-kopf h2 { font-size: 15.5px; font-weight: 900; letter-spacing: -.01em; }
.pl-kopf .pl-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.pl-kopf .pl-kopf-neu { --knopf-ton: color-mix(in srgb, var(--akzent) 62%, #FFFFFF);
  margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 7px 15px 7px 12px;
  border: 1.5px solid color-mix(in srgb, var(--knopf-ton) 62%, transparent); cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--akzent) 20%, transparent);
  color: var(--knopf-ton);
  transition: background .14s ease, border-color .14s ease, color .14s ease; }
.pl-kopf .pl-kopf-neu:hover { background: color-mix(in srgb, var(--akzent) 34%, transparent);
  border-color: var(--knopf-ton); color: #FFFFFF; }
.pl-kopf .pl-kopf-neu:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.pl-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--akzent) 45%, transparent) transparent; }
.pl-inhalt::-webkit-scrollbar { width: 9px; }
.pl-inhalt::-webkit-scrollbar-track { background: transparent; }
.pl-inhalt::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--akzent) 42%, transparent);
  border: 3px solid transparent; background-clip: content-box; }
.pl-fuss { padding: 10px 20px; border-top: 1px solid var(--line); background: var(--flaeche); flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.pl-tagblock { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.pl-tagblock:first-child { border-top: 0; padding-top: 0; }
.pl-tagkopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pl-tagkopf b { font-size: 14.5px; font-weight: 900; }
.pl-tagkopf span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pl-tagkopf .heute { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--primary); border-radius: 999px; padding: 3px 10px; }
.pl-tagkopf .spaet { color: #fff; background: var(--danger); }
.pl-eintrag { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.pl-eintrag:first-child { border-top: 0; }
.pl-strich { width: 4px; align-self: stretch; border-radius: 4px; background: var(--fc, var(--primary)); flex: 0 0 auto; }
.pl-zeit { width: 62px; flex: 0 0 auto; text-align: center; border-radius: 12px; padding: 7px 4px;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-deep); }
.pl-zeit b { display: block; font-size: 14px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-zeit span { font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.pl-zeit.sonne { background: var(--sun-soft); color: var(--sun); }
.pl-haken { width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px; margin-top: 3px; padding: 0; border-radius: 9px;
  border: 2px solid var(--line); background: none; display: grid; place-items: center; color: #fff; cursor: pointer; }
.pl-haken.an { background: var(--success); border-color: var(--success); }
.pl-text { flex: 1; min-width: 0; }
.pl-text b { display: block; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.pl-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.pl-eintrag.erledigt .pl-text b { text-decoration: line-through; color: var(--ink-soft); }
.pl-pille { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 9px;
  font-size: 11px; font-weight: 900; background: var(--primary-soft); color: var(--primary-deep); white-space: nowrap; }
.pl-pille.rot { background: var(--danger-soft); color: var(--danger-deep); }
.pl-pille.gruen { background: var(--success-soft); color: var(--success); }
.pl-pille.sonne { background: var(--sun-soft); color: var(--sun); }
.pl-hinweis { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }
.pl-schritt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pl-schritt i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line); display: inline-block; flex: 0 0 auto; }
.pl-schritt i.an { background: var(--success); border-color: var(--success); }
.pl-schritt-block { display: grid; gap: 5px; justify-items: start; margin-top: 8px; }
.pl-schritt-btn { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 900; color: var(--primary-deep); margin-top: 3px; }
.pl-schritt-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.pl-schritt-liste { display: flex; flex-direction: column; margin: 8px 0 4px; }
.pl-schritt-zeile { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.pl-schritt-zeile:first-child { border-top: 0; }
.pl-schritt-zeile > span { flex: 1; min-width: 0; }
.pl-schritt-zeile b { display: block; font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; }
.pl-schritt-zeile small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }
.pl-schritt-zeile.erledigt b { text-decoration: line-through; color: var(--ink-soft); }
.pl-leer { display: grid; place-items: center; text-align: center; gap: 7px; padding: 24px 14px; }
.pl-leer b { font-size: 13.5px; font-weight: 900; }
.pl-leer span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); max-width: 30ch; line-height: 1.5; }
.pl-links .pl-kopf { padding: 13px 18px 10px; }
.pl-links .pl-kopf .pl-tafel { width: 34px; height: 34px; border-radius: 11px; }
.pl-links .pl-kopf .pl-sub { display: none; }
.pl-links .pl-inhalt { padding: 4px 18px 14px; }
.pl-monat { display: grid; gap: 6px; }
.pl-monat-kopf { display: flex; align-items: center; gap: 10px; }
.pl-monat-kopf b { flex: 1; font-size: 15px; font-weight: 900; text-align: center; }
.pl-monat-kopf button { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); display: grid; place-items: center; color: var(--ink-soft); }
.pl-monat-kopf button:hover { border-color: var(--primary); color: var(--primary); }
.pl-monat-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pl-monat-tage .wt { text-align: center; font-size: 10.5px; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 2px; }
.pl-tag { position: relative; height: 30px; border-radius: 9px; border: 1px solid transparent; background: var(--flaeche);
  font-size: 12px; font-weight: 800; color: var(--ink); font-family: inherit; cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.pl-tag:hover { border-color: var(--primary); }
.pl-tag.fremd { opacity: .32; }
.pl-tag.heute { border-color: var(--primary); color: var(--primary-deep); box-shadow: inset 0 0 0 1px var(--primary); }
.pl-tag.ferien { background: color-mix(in srgb, var(--lime) 22%, var(--flaeche)); }
.pl-tag.feiertag { background: color-mix(in srgb, var(--teal) 22%, var(--flaeche)); }
.pl-tag .pl-punkte { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
.pl-tag .pl-punkte i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.pl-monat-legende { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pl-monat-legende span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.pl-monat-legende i { width: 9px; height: 9px; border-radius: 50%; }
.main:has(#view.plan-ansicht) { height: 100dvh; min-height: 0; }
.main-inner:has(#view.plan-ansicht) { display: flex; flex-direction: column; height: 100%; min-height: 0;
  overflow: hidden; padding-bottom: 14px; }
.main-inner:has(#view.plan-ansicht) > .main-head { flex: 0 0 auto; }
#view.plan-ansicht { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#view.plan-ansicht > .pl-seite { flex: 1 1 auto; min-height: 0; }
@media (max-width: 1180px) {
  .main:has(#view.plan-ansicht) { height: auto; min-height: 100dvh; }
  .main-inner:has(#view.plan-ansicht) { display: block; height: auto; overflow: visible; padding-bottom: 110px; }
  #view.plan-ansicht { display: block; }
  .pl-seite { display: block; }
  .pl-seite > * { margin-bottom: 14px; }
  .pl-bahnen { grid-template-columns: minmax(0, 1fr); }
  .pl-links { grid-template-rows: auto auto; }
  .pl-rechts { grid-template-columns: 1fr; }
  .pl-inhalt { overflow-y: visible; max-height: none; }
}
@media (max-width: 620px) {
  .pl-kopf { flex-wrap: wrap; row-gap: 8px; padding: 15px 16px 12px; }
  .pl-kopf > div { flex: 1 1 0; }
  .pl-kopf h2 { font-size: 14.5px; overflow-wrap: anywhere; }
  .pl-kopf .pl-kopf-neu { margin-left: auto; min-height: 44px; padding: 9px 17px 9px 14px; }
  .pl-inhalt, .pl-links .pl-inhalt { padding: 4px 16px 16px; }
  .pl-fuss { padding: 10px 16px; }
  .pl-neu { padding: 14px 16px; }
  .pl-neu-knoepfe { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .pl-neu-knoepfe button { width: 100%; }
  .pl-ueberfaellig button { margin-left: 0; width: 100%; }
  .pl-meta { row-gap: 6px; }
}

#view.tagesaufgaben-startansicht {
  width: 100%;
  min-height: calc(100dvh - 28px);
}
.tagesaufgaben-startbuehne {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - 28px);
  overflow: visible;
  background: #0B0D13;
}
.tagesaufgaben-startzentrum {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 72px 20px;
}
.tagesaufgaben-startzentrum:has(.alma-ki-fachschalter[aria-expanded="true"]) {
  place-items: start center;
  padding-top: min(16vh, 122px);
}
.tagesaufgaben-lernbuehne {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 230px);
}
.tagesaufgaben-fachkopf {
  position: relative;
  z-index: 30;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 4px 12px 0;
}
.tagesaufgaben-fachkopf .alma-ki-fachwahl { width: min(260px, 86vw); }
.tagesaufgaben-fachkopf .alma-ki-fachschalter { min-height: 50px; }
@media (max-width: 560px) {
  #view.tagesaufgaben-startansicht,
  .tagesaufgaben-startbuehne { min-height: calc(100dvh - 14px); }
  .tagesaufgaben-startzentrum { padding: 82px 13px 54px; }
  .tagesaufgaben-startzentrum:has(.alma-ki-fachschalter[aria-expanded="true"]) { padding-top: min(14vh, 104px); }
  .tagesaufgaben-lernbuehne { min-height: calc(100dvh - 205px); }
  .tagesaufgaben-fachkopf { padding-top: 0; }
}

.lp-buehne { display: flex; flex-direction: column; gap: 18px; }
.lp-kopf {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 4px 0 6px;
}
.lp-kopf-satz { margin: 0; color: var(--muted); font-size: 14.5px; font-weight: 700; }
.lp-kopf-fach .alma-ki-fachwahl { width: min(280px, 100%); }

.lp-plan, .lp-waehlen {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 20px 20px; box-shadow: var(--shadow-md);
}
.lp-plan-kopf, .lp-waehlen-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.lp-plan-kopf h3, .lp-waehlen-kopf h3 { font-size: 17px; font-weight: 900; }
.lp-plan-zahl, .lp-stufe { font-size: 13.5px; font-weight: 800; color: var(--muted); }

.lp-liste { display: grid; gap: 10px; }
.lp-zeile {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.lp-ring {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 900;
  border: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary-deep);
}
.lp-zeile.geuebt .lp-ring {
  border-color: var(--neon-mint); color: var(--neon-mint);
  box-shadow: 0 0 14px color-mix(in srgb, var(--neon-mint) 30%, transparent);
}
.lp-mitte { flex: 1; min-width: 0; }
.lp-mitte b { display: block; font-size: 15.5px; font-weight: 900; }
.lp-mitte span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lp-ueben {
  flex: 0 0 auto; border: 0; border-radius: 14px; padding: 11px 18px;
  background: linear-gradient(135deg, #9E6EFF, #6A2BEE);
  color: #fff; font-family: inherit; font-weight: 900; font-size: 14px; cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.lp-ueben:hover { filter: brightness(1.06); }
.lp-ueben[disabled] { opacity: .5; cursor: default; }
.lp-weg {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.lp-weg:hover { color: var(--danger-deep); border-color: var(--danger); }

.lp-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.lp-karte {
  position: relative; text-align: left;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--line); border-radius: 17px;
  padding: 13px 46px 13px 15px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  transition: transform .14s ease, border-color .16s ease, background .16s ease;
}
.lp-karte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #8B5CFF 60%, var(--line)); }
.lp-karte[disabled] { opacity: .45; cursor: default; transform: none; }
.lp-titel { display: block; font-size: 15px; font-weight: 900; }
.lp-unter { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.lp-marker {
  position: absolute; top: 50%; right: 13px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--muted);
  font-size: 16px; font-weight: 900; line-height: 1;
}

.lp-eigenes { display: flex; gap: 9px; margin-top: 14px; }
.lp-eigenes input {
  flex: 1; min-width: 0;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--line); border-radius: 15px; padding: 12px 15px;
  color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 700;
}
.lp-eigenes input:focus { outline: none; border-color: #8B5CFF; }
.lp-eigenes button {
  flex: 0 0 auto; border: 1px solid color-mix(in srgb, #8B5CFF 55%, var(--line));
  border-radius: 15px; background: color-mix(in srgb, #8B5CFF 18%, transparent);
  color: var(--ink); padding: 0 18px; font-family: inherit; font-weight: 900; font-size: 14.5px; cursor: pointer;
}
.lp-eigenes button:hover { background: color-mix(in srgb, #8B5CFF 30%, transparent); }
.lp-eigenes button[disabled], .lp-eigenes input[disabled] { opacity: .5; cursor: default; }
.lp-leer { margin: 12px 0 0; font-size: 14px; }
.lp-anfang h3 { font-size: 17px; font-weight: 900; margin-bottom: 8px; }

@media (max-width: 560px) {
  .lp-zeile { flex-wrap: wrap; }
  .lp-mitte { flex-basis: calc(100% - 100px); }
  .lp-ueben { width: 100%; order: 3; }
  .lp-weg { order: 2; margin-left: auto; }
}

.lp-plan-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-archiv-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  color: var(--ink); font-family: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.lp-archiv-knopf:hover { border-color: color-mix(in srgb, #8B5CFF 60%, var(--line)); }
.lp-archiv-knopf[aria-expanded="true"] {
  border-color: #8B5CFF; background: color-mix(in srgb, #8B5CFF 16%, transparent);
}
.lp-archiv-zahl {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, #8B5CFF 30%, transparent);
  font-size: 12.5px; font-weight: 900; text-align: center;
}
.lp-neu {
  border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px;
  background: none; color: var(--muted);
  font-family: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.lp-neu:hover { color: var(--ink); border-color: var(--primary); }

.lp-archiv {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .3s cubic-bezier(.2,.8,.3,1), opacity .25s ease, margin .3s ease;
}
.lp-archiv.offen { max-height: 2400px; opacity: 1; margin: 4px 0 16px; }
.lp-archiv-liste { display: grid; gap: 12px; }
.lp-archiv-plan {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--card) 45%, transparent);
}
.lp-archiv-plan header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-archiv-plan h4 { font-size: 15px; font-weight: 900; }
.lp-archiv-plan header span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lp-archiv-plan ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.lp-archiv-plan li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.lp-archiv-punkt {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.lp-archiv-punkt.geuebt { background: var(--neon-mint); box-shadow: 0 0 8px color-mix(in srgb, var(--neon-mint) 45%, transparent); }
.lp-archiv-titel { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; }
.lp-archiv-zahl-klein { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.lp-archiv-ueben {
  flex: 0 0 auto; border: 1px solid color-mix(in srgb, #8B5CFF 45%, var(--line));
  border-radius: 12px; padding: 7px 13px;
  background: color-mix(in srgb, #8B5CFF 14%, transparent);
  color: var(--ink); font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
}
.lp-archiv-ueben:hover { background: color-mix(in srgb, #8B5CFF 28%, transparent); }
.lp-archiv-ueben[disabled] { opacity: .5; cursor: default; }

.lp-uebersicht {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 20px 20px; box-shadow: var(--shadow-md);
}
.lp-fachliste { display: grid; gap: 10px; }
.lp-fachzeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.lp-fachpunkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.lp-fachzeile > .lp-archiv { flex-basis: 100%; }

.bestand-kennzahlen { margin-bottom: 18px; }
.bk-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bk-kachel {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; box-shadow: var(--shadow-md);
}
.bk-wert { font-size: clamp(24px, 3vw, 32px); font-weight: 900; line-height: 1.05; color: var(--primary-deep); }
.bk-titel { font-size: 14px; font-weight: 900; }
.bk-unter { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.bk-gut .bk-wert { color: var(--ampel-gruen); }
.bk-warn { border-color: color-mix(in srgb, var(--sun) 55%, var(--line)); }
.bk-warn .bk-wert { color: var(--sun); }
.bk-aktion { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.bk-aktion-text { display: flex; flex-direction: column; gap: 5px; min-width: min(100%, 320px); flex: 1; }
.bk-aktion-text span { font-size: 13px; line-height: 1.5; }
.bk-aktion-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .lp-plan-kopf { align-items: stretch; }
  .lp-plan-rechts { width: 100%; justify-content: space-between; }
  .lp-archiv-plan li { flex-wrap: wrap; }
  .lp-archiv-ueben { margin-left: auto; }
  .lp-fachzeile > .lp-ueben { width: auto; order: 0; }



#aufgabe-bereich.aufgabenbuehne {
  --ab-flaeche: linear-gradient(180deg, #141C3A, #101733);
  --ab-flaeche2: #101733;
  --ab-rand: rgba(150, 175, 255, .28);
  --ab-rand-stark: rgba(150, 175, 255, .42);
  --ab-text: #E9F0FF;
  --ab-text-leise: #9FB2DF;
  --ab-feld: rgba(255, 255, 255, .05);
  --ab-schatten: 0 24px 60px -30px rgba(0, 0, 0, .7);
  --ab-a1: #3A86FF;
  --ab-a2: #FF3D8B;
  --ab-a3: #22D3A6;
  --ab-a4: #FF9E2C;
  --ab-a5: #9B6BFF;
  --ab-auf-akzent: #0B1020;
  display: block;
  width: 100%;
}
.tagesaufgaben-lernbuehne #aufgabe-bereich.aufgabenbuehne {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  padding-top: clamp(18px, 4vh, 48px);
  padding-bottom: clamp(22px, 5vh, 60px);
}
html .main-inner:has(#aufgabe-bereich.aufgabenbuehne) {
  padding-inline: clamp(12px, 3vw, 40px);
}
html:not(.nav-drawer) #aufgabe-bereich.aufgabenbuehne {
  padding-top: clamp(16px, 6vh, 72px);
}

#aufgabe-bereich.aufgabenbuehne .widget {
  width: 100%;
  margin-inline: auto;
  align-self: center;
  background: var(--ab-flaeche) !important;
  border: 1px solid var(--ab-rand) !important;
  border-radius: 22px !important;
  color: var(--ab-text) !important;
  box-shadow: var(--ab-schatten) !important;
  padding: clamp(18px, 3vw, 26px);
}
#aufgabe-bereich.aufgabenbuehne .widget::before,
#aufgabe-bereich.aufgabenbuehne .widget::after { content: none !important; }
#aufgabe-bereich.aufgabenbuehne .widget.fertig {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ab-a3) 22%, var(--ab-flaeche2)), var(--ab-flaeche2)) !important;
  border-color: color-mix(in srgb, var(--ab-a3) 45%, var(--ab-rand)) !important;
  text-align: center;
}
#aufgabe-bereich.aufgabenbuehne .widget.fertig .w-title {
  color: var(--ab-a3) !important;
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: 0;
  text-transform: none;
}
#aufgabe-bereich.aufgabenbuehne .widget.fertig .feedback.ok { color: var(--ab-text) !important; }
#aufgabe-bereich.aufgabenbuehne .widget.wartet {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ab-a4) 20%, var(--ab-flaeche2)), var(--ab-flaeche2)) !important;
  border-color: color-mix(in srgb, var(--ab-a4) 45%, var(--ab-rand)) !important;
  text-align: center;
}
#aufgabe-bereich.aufgabenbuehne .widget.wartet .w-title {
  color: var(--ab-a4) !important;
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: 0;
  text-transform: none;
}
#aufgabe-bereich.aufgabenbuehne .widget.fach-ausgeschoepft {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ab-a3) 22%, var(--ab-flaeche2)), var(--ab-flaeche2)) !important;
  border-color: color-mix(in srgb, var(--ab-a3) 45%, var(--ab-rand)) !important;
  text-align: center;
}
#aufgabe-bereich.aufgabenbuehne .widget.fach-ausgeschoepft .w-title {
  color: var(--ab-a3) !important;
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: 0;
  text-transform: none;
}
#aufgabe-bereich.aufgabenbuehne.stufe-klein .widget { max-width: 820px; }
#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget { max-width: 780px; }
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget { max-width: 1120px; }

#aufgabe-bereich.aufgabenbuehne .widget .w-frage,
#aufgabe-bereich.aufgabenbuehne .widget .w-title {
  color: var(--ab-text) !important;
  text-wrap: balance;
  margin-bottom: 18px;
}
#aufgabe-bereich.aufgabenbuehne .widget .w-frage { line-height: 1.45; }
#aufgabe-bereich.aufgabenbuehne.stufe-klein .widget .w-frage { font-size: clamp(21px, 3.4vw, 27px); }
#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .w-frage { font-size: clamp(18px, 2.6vw, 22px); }
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget .w-frage { font-size: clamp(17px, 2.2vw, 21px); }
#aufgabe-bereich.aufgabenbuehne .widget .muted,
#aufgabe-bereich.aufgabenbuehne .widget .feedback { color: var(--ab-text-leise) !important; }

#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) { display: grid; gap: 12px; }
#aufgabe-bereich.aufgabenbuehne .widget .opt {
  background: var(--ab-feld) !important;
  border: 2px solid var(--ab-rand) !important;
  color: var(--ab-text) !important;
  border-radius: 16px !important;
}
#aufgabe-bereich.aufgabenbuehne .widget .opt:hover:not(:disabled) {
  border-color: var(--ab-a1) !important;
  background: color-mix(in srgb, var(--ab-a1) 12%, transparent) !important;
}

#aufgabe-bereich.aufgabenbuehne.stufe-klein .widget .opts:not(.row) {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
#aufgabe-bereich.aufgabenbuehne.stufe-klein .widget .opts:not(.row) .opt {
  text-align: center;
  font-size: clamp(24px, 4.4vw, 38px) !important;
  font-weight: 900;
  padding: clamp(18px, 3vw, 28px) 14px !important;
  border-width: 3px !important;
  border-radius: 22px !important;
  border-left-width: 3px !important;
}

#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .opts:not(.row) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget .opts:not(.row) {
  grid-template-columns: minmax(0, 1fr);
}

#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .opts:not(.row),
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget .opts:not(.row) { counter-reset: ab-antwort; }
#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .opts:not(.row) .opt:not(.icon-opt),
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget .opts:not(.row) .opt:not(.icon-opt) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px !important;
  font-size: 17px !important;
  border-left-width: 2px !important;
}
#aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .opts:not(.row) .opt:not(.icon-opt)::before,
#aufgabe-bereich.aufgabenbuehne.stufe-gross .widget .opts:not(.row) .opt:not(.icon-opt)::before {
  counter-increment: ab-antwort;
  content: counter(ab-antwort, upper-alpha);
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  background: var(--ab-kennfarbe, var(--ab-a1));
  color: var(--ab-auf-akzent);
}
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt:nth-of-type(5n+1) { --ab-kennfarbe: var(--ab-a1); }
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt:nth-of-type(5n+2) { --ab-kennfarbe: var(--ab-a2); }
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt:nth-of-type(5n+3) { --ab-kennfarbe: var(--ab-a3); }
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt:nth-of-type(5n+4) { --ab-kennfarbe: var(--ab-a4); }
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt:nth-of-type(5n+5) { --ab-kennfarbe: var(--ab-a5); }
#aufgabe-bereich.aufgabenbuehne .widget .opts:not(.row) .opt { border-left-color: var(--ab-kennfarbe) !important; }
#aufgabe-bereich.aufgabenbuehne .widget .opt:hover:not(:disabled) { border-color: var(--ab-kennfarbe) !important;
  background: color-mix(in srgb, var(--ab-kennfarbe) 12%, transparent) !important; }

#aufgabe-bereich.aufgabenbuehne .widget .w-tipp {
  background: transparent !important;
  border: 1.5px solid color-mix(in srgb, var(--ab-a1) 45%, transparent) !important;
  color: var(--ab-a1) !important;
  margin-top: 18px;
}
#aufgabe-bereich.aufgabenbuehne .widget .w-tipp:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ab-a1) 12%, transparent) !important;
}
#aufgabe-bereich.aufgabenbuehne .widget .w-tipp { font-size: 13.5px !important; padding: 11px 17px !important; }
#aufgabe-bereich.aufgabenbuehne.stufe-klein .widget .w-tipp { font-size: 15px !important; padding: 13px 20px !important; }
@media (min-width: 1000px) {
  #aufgabe-bereich.aufgabenbuehne.stufe-gross .widget {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: 30px;
    align-items: start;
  }
  #aufgabe-bereich.aufgabenbuehne.stufe-gross .widget > * { grid-column: 1; }
  #aufgabe-bereich.aufgabenbuehne.stufe-gross .widget > .w-tipp { justify-self: start; }
  #aufgabe-bereich.aufgabenbuehne.stufe-gross .widget > .opts {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
    margin: 0;
  }
}

}

@media (max-width: 560px) {
  #aufgabe-bereich.aufgabenbuehne.stufe-mittel .widget .opts:not(.row) { grid-template-columns: minmax(0, 1fr); }
  #aufgabe-bereich.aufgabenbuehne .widget { border-radius: 18px !important; }
}

.alma-ki-start { display: grid; gap: 20px; }
.alma-ki-kopfkarte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--card)), var(--card));
}
.alma-ki-kopfkarte h2 { margin: 3px 0 6px; }
.alma-ki-kopfkarte p { margin: 0; color: var(--muted); }
.alma-ki-kicker { color: var(--primary); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.alma-ki-faecher {
  display: grid; grid-template-columns: repeat(var(--fachanzahl, 1), minmax(0, 1fr));
  gap: clamp(4px, .55vw, 9px); width: 100%; overflow: visible;
  padding: 2px 2px 12px; margin-bottom: 2px;
}
.alma-ki-fach {
  min-height: 46px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid color-mix(in srgb, var(--fachfarbe) 72%, #fff);
  border-radius: 14px;
  background: var(--fachfarbe);
  color: var(--fachtext, #fff);
  padding: 9px clamp(4px, .4vw, 7px);
  font-size: clamp(9.5px, .72vw, 12.5px); font-weight: 900; line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 14px color-mix(in srgb, var(--fachfarbe) 25%, transparent);
  cursor: pointer;
}
.alma-ki-fach > svg, .alma-ki-fach > .app-ico, .alma-ki-fach > .a-ico { width: clamp(13px, .95vw, 16px); height: clamp(13px, .95vw, 16px); flex: 0 0 auto; }
.alma-ki-fach span {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.04;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .alma-ki-faecher.viele-faecher .alma-ki-fach { gap: 3px; padding-inline: 3px; font-size: 10.5px; }
  .alma-ki-faecher.viele-faecher .alma-ki-fach > svg,
  .alma-ki-faecher.viele-faecher .alma-ki-fach > .app-ico,
  .alma-ki-faecher.viele-faecher .alma-ki-fach > .a-ico { width: 13px; height: 13px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .alma-ki-faecher.viele-faecher .alma-ki-fach { gap: 2px; padding-inline: 2px; font-size: 9.25px; }
  .alma-ki-faecher.viele-faecher .alma-ki-fach > svg,
  .alma-ki-faecher.viele-faecher .alma-ki-fach > .app-ico,
  .alma-ki-faecher.viele-faecher .alma-ki-fach > .a-ico { width: 12px; height: 12px; }
}
.alma-ki-fach:hover { filter: brightness(1.08); transform: translateY(-1px); }
.alma-ki-fach.active { border-color: #fff; box-shadow: 0 0 0 2px var(--fachfarbe), 0 0 20px color-mix(in srgb, var(--fachfarbe) 65%, transparent); }
.alma-ki-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.alma-ki-weg {
  min-height: 126px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
}
.alma-ki-weg:hover { border-color: var(--primary); transform: translateY(-1px); }
.alma-ki-weg-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: color-mix(in srgb, var(--primary) 13%, var(--card)); color: var(--primary); }
.alma-ki-weg b, .alma-ki-weg small { display: block; }
.alma-ki-weg b { font-size: 17px; margin-bottom: 5px; }
.alma-ki-weg small, .alma-ki-zeitinfo { color: var(--muted); line-height: 1.5; }
.alma-ki-zeitinfo { margin: 0; font-size: 13px; }
.alma-ki-dashboard-faecher { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.alma-ki-dashboard-faecher span { display: inline-flex; align-items: center; gap: 6px; border-left: 4px solid var(--fachfarbe); border-radius: 10px; background: color-mix(in srgb, var(--fachfarbe) 10%, var(--card)); padding: 7px 10px; font-size: 13px; font-weight: 750; }
.fachauswahl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-height: min(52vh, 440px); overflow: auto; padding: 2px; }
.fachauswahl-option { min-height: 46px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-left: 4px solid var(--fachfarbe); border-radius: 12px; cursor: pointer; }
.fachauswahl-option input { width: 18px; height: 18px; margin: 0; }
.fachauswahl-option span { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; }

@media (max-width: 760px) {
  .alma-ki-kopfkarte { align-items: flex-start; flex-direction: column; padding: 19px; }
  .alma-ki-kopfkarte .secondary { width: 100%; }
  .alma-ki-wege { grid-template-columns: minmax(0, 1fr); }
  .alma-ki-weg { min-height: 96px; padding: 16px; }
  .alma-ki-faecher { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 10px; scrollbar-width: thin; }
  .alma-ki-fach { min-width: 116px; flex: 0 0 auto; font-size: 12px; }
  .alma-ki-fach span { white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 420px) {
  .fachauswahl-liste { grid-template-columns: minmax(0, 1fr); }
  .alma-ki-fach { min-height: 48px; }
}

.sidebar .nav-item[data-tour-nav="alma-ki"],
.sidebar .nav-item[data-tour-nav="alma-ki"].active {
  min-height: 48px; margin: 14px 0 4px; padding-top: 6px; padding-bottom: 6px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(135deg, #FF2D91, #C31873); color: #fff; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255,45,145,.24), 0 8px 24px rgba(195,24,115,.36);
}
.sidebar .nav-item[data-tour-nav="alma-ki"]:hover { background: linear-gradient(135deg, #FF4BA3, #D21D7F); color: #fff; }
.sidebar .nav-item[data-tour-nav="alma-ki"] .ico,
.sidebar .nav-item[data-tour-nav="alma-ki"].active .ico { background: rgba(255,255,255,.2); color: #fff; }
.sidebar .nav-item[data-tour-nav="alma-ki"].active::before { background: #fff; }

.route-alma-ki .main-titel h1 { line-height: 1; }
.route-alma-ki .main-titel h1 > span {
  display: inline-block; font-size: clamp(27px, 2.3vw, 38px); font-weight: 950; letter-spacing: -.035em;
  color: #FF4FA7; text-shadow: 0 0 10px rgba(255,79,167,.52), 0 0 24px rgba(78,190,255,.3);
}
.route-alma-ki .main-titel .sub { margin-top: 5px; }

#view.alma-ki-chat > .alma-ki-faecher { flex: 0 0 auto; }
#view.alma-ki-chat > .modes {
  flex: 0 0 auto; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px; margin: 0 0 12px;
}

#view.alma-ki-chat .chat-held {
  grid-template-columns: auto minmax(230px, .9fr) minmax(420px, 1.35fr);
  grid-template-areas: "icon text weg"; align-items: center;
}
#view.alma-ki-chat .fh-icon {
  width: 40px; height: 40px; margin: 13px 0 13px 16px; border-radius: 13px;
}
#view.alma-ki-chat .fh-icon .a-ico { width: 23px; height: 23px; }
#view.alma-ki-chat .fh-text { margin: 12px 14px 12px 0; }
#view.alma-ki-chat .fh-text h2 { font-size: clamp(16px, 1.35vw, 19px); margin: 2px 0 4px; }
#view.alma-ki-chat .fh-text p { font-size: 12px; line-height: 1.4; }
#view.alma-ki-chat .fh-weg {
  align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
  gap: 8px; padding: 10px 14px; border-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
}
#view.alma-ki-chat .fh-schritt { gap: 7px; }
#view.alma-ki-chat .fh-nummer { width: 23px; height: 23px; flex-basis: 23px; border-radius: 8px; font-size: 11px; }
#view.alma-ki-chat .fh-schritt-text b { font-size: 11.5px; }
#view.alma-ki-chat .fh-schritt-text span { font-size: 10px; }

.composer #wz-plus { --wz-farbe: #3A86FF; }
.composer #wz-stift { --wz-farbe: #FF2D91; }
.composer #wz-mikro { --wz-farbe: #06D6A0; }
.composer #wz-plus, .composer #wz-stift, .composer #wz-mikro {
  color: var(--wz-farbe); border-color: var(--wz-farbe);
  background: color-mix(in srgb, var(--wz-farbe) 12%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wz-farbe) 20%, transparent),
    0 0 14px color-mix(in srgb, var(--wz-farbe) 38%, transparent);
}
.composer #wz-plus:hover, .composer #wz-stift:hover, .composer #wz-mikro:hover {
  color: #fff; border-color: var(--wz-farbe); background: var(--wz-farbe);
  box-shadow: 0 0 20px color-mix(in srgb, var(--wz-farbe) 65%, transparent);
}

@media (max-width: 1180px) {
  #view.alma-ki-chat .chat-held {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon text" "weg weg";
  }
  #view.alma-ki-chat .fh-weg { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); }
}
@media (max-width: 767px) {
  #view.alma-ki-chat > .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-alma-ki .main-titel h1 > span { font-size: 24px; }
}
@media (max-width: 420px) {
  #view.alma-ki-chat > .modes { gap: 7px; }
  #view.alma-ki-chat > .modes .mode-pill { padding-inline: 8px; }
}

.route-alma-ki,
.route-alma-ki body,
.route-alma-ki #app,
.route-alma-ki .main,
.route-alma-ki .main-inner {
  background: #0B0D13;
}
.route-alma-ki .main-inner { color: #F5F7FB; }
.route-alma-ki .main-head.leer { position: relative; z-index: 50; }
.route-alma-ki .main-head.leer .burger { color: #F5F7FB; border-color: #343846; background: #171922; }

#view.alma-ki-startansicht {
  width: 100%;
  min-height: calc(100dvh - 28px);
}
.alma-ki-startbuehne {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100dvh - 28px);
  overflow: visible;
  background: #0B0D13;
}
.alma-ki-eigenkopf {
  position: relative;
  min-height: 142px;
  width: 100%;
  padding: 18px 20px 14px;
}
.alma-ki-eigenkopf h1 {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #FFFFFF;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  filter: drop-shadow(0 0 15px rgba(140, 195, 255, .34));
  animation: alma-neon-kreisen 16s linear infinite;
}
.alma-ki-topaktionen {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: 164px;
}
.alma-ki-neonknopf {
  position: relative;
  z-index: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #1A1C25;
  color: #F7F8FB;
  padding: 0 17px;
  font: 900 13px/1 'Nunito', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.alma-ki-neonknopf[hidden] { display: none; }
.alma-ki-klausurknopf .a-ico { color: var(--sun); }
.alma-ki-knopfzahl {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 4px;
  background: var(--sun);
  color: #12151E;
  font: 900 10.5px/1 'Nunito', sans-serif;
}
.alma-ki-knopfzahl:empty { display: none; }
.alma-ki-neonknopf::before,
.alma-ki-chat .cmp-box::before,
.alma-ki-thema::before,
#view.alma-ki-chat .msg.assistant .assistant-inhalt::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--alma-neon-winkel, 0deg), #33D6FF, #8B5CFF, #FF3C9E, #FFB340, #35E5A1, #33D6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: alma-neon-kreisen 5s linear infinite;
}
@property --alma-neon-winkel {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes alma-neon-kreisen { to { --alma-neon-winkel: 360deg; } }

.alma-ki-fachwahl { position: relative; z-index: 16; width: min(220px, 100%); }
.alma-ki-fachwahl:has(.alma-ki-fachmenue:not([hidden])) { z-index: 44; }
.alma-ki-fachschalter {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fachfarbe) 74%, #FFFFFF) 0%, var(--fachfarbe) 62%, color-mix(in srgb, var(--fachfarbe) 82%, #03071E) 100%);
  color: var(--fachtext, #fff);
  padding: 10px 16px;
  font: 900 17px/1 'Nunito', sans-serif;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -8px 16px rgba(3,7,30,.28),
    0 10px 26px rgba(0,0,0,.4),
    0 0 26px color-mix(in srgb, var(--fachfarbe) 35%, transparent);
}
.alma-ki-fachschalter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  animation: alma-ki-fachschimmer 4.2s ease-in-out infinite;
}
.alma-ki-fachschalter-leer { animation: alma-ki-fachpuls 3.6s ease-in-out infinite; }
@keyframes alma-ki-fachschimmer {
  0%, 62% { left: -70%; }
  88%, 100% { left: 130%; }
}
@keyframes alma-ki-fachpuls {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -8px 16px rgba(3,7,30,.28), 0 10px 26px rgba(0,0,0,.4), 0 0 20px color-mix(in srgb, var(--fachfarbe) 30%, transparent); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -8px 16px rgba(3,7,30,.28), 0 10px 26px rgba(0,0,0,.4), 0 0 40px color-mix(in srgb, var(--fachfarbe) 52%, transparent); }
}
.alma-ki-fachschalter .alma-ki-fachtext { min-width: 0; flex: 1; text-align: center; }
.alma-ki-fachtext small,
.alma-ki-fachtext strong { display: block; }
.alma-ki-fachtext small { margin-bottom: 6px; font-size: 15px; font-weight: 700; opacity: .82; }
.alma-ki-fachtext strong { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alma-ki-fachschalter > .ic:last-child { transition: transform .18s ease; }
.alma-ki-fachschalter[aria-expanded="true"] > .ic:last-child { transform: rotate(180deg); }
.alma-ki-startfach { width: min(300px, 84vw); }
.alma-ki-startfach .alma-ki-fachschalter {
  min-height: 63px;
  gap: 9px;
  border-radius: 18px;
  padding: 11px 15px;
  font-size: clamp(15px, 4.4vw, 22px);
}
.alma-ki-fachmenue {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: 0;
  height: 0;
  overflow: visible;
}
.alma-ki-fachmenue[hidden] { display: none; }
.alma-ki-fachmenue::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(4, 5, 9, .8);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity .24s ease;
}
.alma-ki-fachmenue.offen::before { opacity: 1; }
.fachrad-bahn {
  position: absolute;
  border: 1.5px dashed rgba(255,255,255,.08);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .5s ease .12s;
  pointer-events: none;
}
.alma-ki-fachmenue.offen .fachrad-bahn { opacity: 1; }
.fachrad-perle {
  position: absolute;
  left: 0;
  top: 0;
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font: 800 12px/1.2 'Nunito', sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  transition: transform .5s cubic-bezier(.3, 1.45, .45, 1), opacity .3s ease;
  transition-delay: var(--d, 0ms);
}
.alma-ki-fachmenue.offen .fachrad-perle {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--rad-x, 1)), calc(var(--ty) * var(--rad-y, 1))) scale(var(--rad-skala, 1));
}
.fachrad-kugel {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 20, 30, .92);
  border: 2px solid var(--fachfarbe);
  color: var(--fachfarbe);
  box-shadow: 0 0 18px color-mix(in srgb, var(--fachfarbe) 42%, transparent), inset 0 0 10px color-mix(in srgb, var(--fachfarbe) 24%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fachrad-name { white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.fachrad-perle:hover .fachrad-kugel,
.fachrad-perle:focus-visible .fachrad-kugel {
  transform: scale(1.12);
  box-shadow: 0 0 30px color-mix(in srgb, var(--fachfarbe) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--fachfarbe) 28%, transparent);
}
.fachrad-perle:focus-visible { outline: none; }
.fachrad-perle:focus-visible .fachrad-kugel { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.alma-ki-fachmenue.fachrad-eng .fachrad-perle { width: 56px; font-size: 11px; gap: 4px; }
.alma-ki-fachmenue.fachrad-eng .fachrad-kugel { width: 44px; height: 44px; }
.alma-ki-fachmenue.fachrad-eng .fachrad-kugel svg { width: 19px; height: 19px; }

.alma-ki-chatbuehne {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #0B0D13;
}
.alma-ki-chatkopf { position: relative; z-index: 40; }
.alma-ki-startbuehne .alma-ki-chatkopf { flex: 0 0 150px; }
.alma-ki-startbuehne .alma-ki-chataktionen {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 18;
  width: min(768px, calc(100vw - 36px));
  transform: translateX(-50%);
}
.alma-ki-startbuehne .alma-ki-chataktionen h1 {
  position: static;
  width: 100%;
  transform: none;
  text-align: center;
  font-size: clamp(21px, 2vw, 26px);
}
.alma-ki-startbuehne .alma-ki-chataktionen .alma-ki-topaktionen {
  top: -7px;
  right: 0;
  z-index: 19;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
}
.alma-ki-startbuehne .alma-ki-chataktionen .alma-ki-neonknopf {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: #1A1C25;
}
.alma-ki-chataktionen .alma-ki-neonknopf span:not(.alma-ki-knopfzahl) { display: none; }
.alma-ki-chataktionen .alma-ki-neonknopf:hover,
.alma-ki-chataktionen .alma-ki-neonknopf:focus-visible { background: #292B35; }
.alma-ki-chataktionen .alma-ki-neonknopf:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
}
.alma-ki-schriftwahl {
  position: relative;
  z-index: 19;
  display: flex;
  align-items: center;
  min-height: 44px;
}
#alma-schriftgroesse.alma-ki-neonknopf .alma-ki-schriftzeichen { display: inline; }
.alma-ki-schriftzeichen { font: 900 15px/1 'Nunito', sans-serif; letter-spacing: -.02em; }
.alma-ki-schriftmenue {
  position: absolute;
  top: 52px;
  left: 0;
  z-index: 30;
  width: 214px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid #33384A;
  border-radius: 18px;
  background: #16181F;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.alma-ki-schriftmenue[hidden] { display: none; }
.alma-ki-schrifttitel {
  padding: 3px 8px 7px;
  color: #8E95A6;
  font: 900 11.5px/1 'Nunito', sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.alma-ki-schriftmenue button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #F2F4F8;
  padding: 0 12px;
  font: 800 15px/1 'Nunito', sans-serif;
  text-align: left;
  cursor: pointer;
}
.alma-ki-schriftmenue button:hover { background: #242732; }
.alma-ki-schriftmenue button[aria-checked="true"] { background: #23404E; color: #8FE9FF; }
.alma-ki-schriftmenue button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.alma-ki-schriftprobe { width: 30px; font-weight: 900; text-align: center; }
.alma-ki-startbuehne .alma-ki-chatfach {
  position: absolute;
  top: 58px;
  right: 0;
  left: 0;
  z-index: 20;
  width: min(220px, 60vw);
  margin-inline: auto;
}
.alma-ki-chatfach .alma-ki-fachschalter {
  min-height: 44px;
  gap: 8px;
  border-radius: 13px;
  padding: 8px 13px;
  font-size: 14px;
}
#view.alma-ki-chat { width: 100%; max-width: none; --chat-schrift: 1; }
#view.alma-ki-chat .chat-buehne {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "lauf ablage" "fuss ablage";
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#view.alma-ki-chat .chat-buehne-lauf {
  grid-area: lauf;
  padding: 18px 22px 12px;
  border-right: 1px solid var(--wb-linie);
}
#view.alma-ki-chat .chat-buehne-lauf #messages {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 14px;
}
#view.alma-ki-chat .chat-buehne-fuss {
  grid-area: fuss;
  width: 100%;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--wb-linie);
  background: var(--wb-bg);
}
#view.alma-ki-chat .msg { color: var(--wb-ink); }
#view.alma-ki-chat .msg.assistant {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: calc(18px * var(--chat-schrift, 1));
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .002em;
  color: var(--wb-ink);
  box-shadow: none;
}
#view.alma-ki-chat .msg.assistant .assistant-inhalt {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  border-radius: 10px;
  background: var(--wb-karte);
  padding: 12px 16px;
}
#view.alma-ki-chat .msg.assistant:has(.widget) .assistant-inhalt { border-radius: 0; background: transparent; padding: 0; }
#view.alma-ki-chat .msg.assistant:has(.widget) .assistant-inhalt::before { display: none; }
#view.alma-ki-chat .msg.assistant .msg-aktionen { margin-top: 0; }
#view.alma-ki-chat .msg.assistant.schritt-komp,
#view.alma-ki-chat .msg.assistant.chat-fehler { display: block; }
#view.alma-ki-chat .msg.assistant p { margin: 0 0 14px; }
#view.alma-ki-chat .msg.assistant ul,
#view.alma-ki-chat .msg.assistant ol { margin: 3px 0 16px 1.35em; padding: 0; }
#view.alma-ki-chat .msg.assistant li { margin: 5px 0; padding-left: 3px; }
#view.alma-ki-chat .msg.assistant strong { font-weight: 800; color: #FFFFFF; }
#view.alma-ki-chat .msg.assistant em { font-style: normal; font-weight: 700; color: #E8ECF5; }
#view.alma-ki-chat .msg.user {
  max-width: min(60%, 640px);
  border: 1.5px solid var(--wb-akzent);
  border-radius: 8px;
  background: transparent;
  color: var(--wb-ink);
  padding: 9px 14px;
  font-size: calc(16.5px * var(--chat-schrift, 1));
  font-weight: 700;
  line-height: 1.5;
}
#view.alma-ki-chat .chat-buehne-lauf .msg.assistant::before,
#view.alma-ki-chat .chat-buehne-lauf .msg.user::before { display: none; }
.alma-assistent-avatar {
  position: static;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 0 18px rgba(54,204,255,.2);
}
.msg.assistant.alma-ki-gruss .assistant-inhalt > div > p:first-child {
  font-size: 1.08em; line-height: 1.6; }
#view.alma-ki-chat .msg.assistant.alma-ki-gruss strong,
.msg.assistant.alma-ki-gruss strong {
  color: var(--neon-cyan); font-weight: 900; font-size: 1.22em;
  letter-spacing: -.01em; text-shadow: 0 0 18px rgba(51, 214, 255, .38); }

.alma-assistent-avatar { animation: eulen-schein 3.4s ease-in-out infinite; }
.alma-assistent-avatar img {
  width: 30px; height: 30px; object-fit: contain;
  transform-origin: 50% 86%;
  animation: eulen-wippen 4.2s ease-in-out infinite;
}
@keyframes eulen-wippen {
  0%, 100% { transform: rotate(0deg) translateY(0) scale(1); }
  8% { transform: rotate(-13deg) translateY(-2px) scale(1.09); }
  17% { transform: rotate(11deg) translateY(-3px) scale(1.09); }
  25% { transform: rotate(-8deg) translateY(-1px) scale(1.05); }
  33% { transform: rotate(4deg) translateY(0) scale(1.02); }
  40% { transform: rotate(0deg) translateY(0) scale(1); }
  52% { transform: translateY(-5px) scale(1.12); }
  60% { transform: translateY(0) scale(.94); }
  67% { transform: translateY(-2px) scale(1.05); }
  74% { transform: translateY(0) scale(1); }
}
@keyframes eulen-schein {
  0%, 100% { box-shadow: 0 0 16px rgba(54,204,255,.22); transform: scale(1); }
  50% { box-shadow: 0 0 30px rgba(54,204,255,.62), 0 0 12px rgba(139,92,255,.35); transform: scale(1.05); }
}
#view.alma-ki-chat .typing { width: min(100%, 940px); margin-inline: auto; color: #C6CAD4; font-size: 15px; font-weight: 700; }

#view.alma-ki-chat .chat-ueberschrift {
  margin: 24px 0 9px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
}
#view.alma-ki-chat h2.chat-ueberschrift { font-size: clamp(21px, 2.2vw, 25px); }
#view.alma-ki-chat h3.chat-ueberschrift { font-size: clamp(18px, 1.8vw, 21px); }
#view.alma-ki-chat .chat-ueberschrift:first-child { margin-top: 1px; }
#view.alma-ki-chat .chat-ueberschrift.ton-0 { color: #66E5FF; text-shadow: 0 0 18px rgba(102,229,255,.18); }
#view.alma-ki-chat .chat-ueberschrift.ton-1 { color: #FF7AC8; text-shadow: 0 0 18px rgba(255,122,200,.17); }
#view.alma-ki-chat .chat-ueberschrift.ton-2 { color: #FFD166; text-shadow: 0 0 18px rgba(255,209,102,.16); }
#view.alma-ki-chat .chat-ueberschrift.ton-3 { color: #5EF0BA; text-shadow: 0 0 18px rgba(94,240,186,.16); }
#view.alma-ki-chat .chat-hinweis,
#view.alma-ki-chat .chat-merksatz {
  position: relative;
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.1);
  border-left: 4px solid #66E5FF;
  border-radius: 0 13px 13px 0;
  background: rgba(255,255,255,.055);
  color: #F4F6FA;
  padding: 12px 15px;
}
#view.alma-ki-chat .chat-merksatz { border-left-color: #FF7AC8; background: rgba(255,122,200,.075); }
#view.alma-ki-chat .chat-rueckmeldung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 18px;
  border: 1px solid rgba(255,180,67,.34);
  border-left: 4px solid #FFB443;
  border-radius: 0 14px 14px 0;
  background: rgba(255,180,67,.085);
  padding: 13px 16px;
}
#view.alma-ki-chat .chat-rueckmeldung:first-child { margin-top: 0; }
#view.alma-ki-chat .rueckmeldung-zahl {
  flex: 0 0 auto;
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255,180,67,.42);
  border-radius: 13px;
  background: rgba(255,180,67,.16);
  color: #FFB443;
  font-size: 19px;
  font-weight: 900;
}
#view.alma-ki-chat .rueckmeldung-text {
  min-width: 0;
  color: #FFEBD0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
}
#view.alma-ki-chat .rueckmeldung-dazu {
  display: block;
  margin-top: 3px;
  color: rgba(255,235,208,.72);
  font-size: 15px;
}
#view.alma-ki-chat .chat-tabelle {
  max-width: 100%;
  margin: 16px 0 18px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  -webkit-overflow-scrolling: touch;
}
#view.alma-ki-chat .chat-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
#view.alma-ki-chat .chat-tabelle th {
  border-bottom: 2px solid rgba(102,229,255,.34);
  background: rgba(102,229,255,.07);
  color: #66E5FF;
  padding: 11px 15px;
  font-weight: 900;
  text-align: left;
}
#view.alma-ki-chat .chat-tabelle td {
  border-top: 1px solid rgba(255,255,255,.075);
  padding: 11px 15px;
  color: #F4F6FA;
  vertical-align: top;
}
#view.alma-ki-chat .chat-tabelle tbody tr:nth-child(even) { background: rgba(255,255,255,.028); }
#view.alma-ki-chat .chat-tabelle td:first-child { font-weight: 800; color: #FFFFFF; }

#view.alma-ki-chat .msg.assistant ol {
  margin: 4px 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: alma-schritt;
}
#view.alma-ki-chat .msg.assistant ol > li {
  position: relative;
  counter-increment: alma-schritt;
  margin: 0;
  padding: 9px 0 9px 43px;
}
#view.alma-ki-chat .msg.assistant ol > li::before {
  content: counter(alma-schritt);
  position: absolute;
  left: 0;
  top: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #66E5FF;
  box-shadow: 0 0 16px rgba(102,229,255,.34);
  color: #0B0D13;
  font-size: 14.5px;
  font-weight: 900;
}
#view.alma-ki-chat .msg.assistant ol > li:nth-child(4n+2)::before { background: #FFD166; box-shadow: 0 0 16px rgba(255,209,102,.3); }
#view.alma-ki-chat .msg.assistant ol > li:nth-child(4n+3)::before { background: #5EF0BA; box-shadow: 0 0 16px rgba(94,240,186,.3); }
#view.alma-ki-chat .msg.assistant ol > li:nth-child(4n)::before { background: #FF7AC8; box-shadow: 0 0 16px rgba(255,122,200,.3); }
#view.alma-ki-chat .mathe-inline {
  display: inline-block;
  margin-inline: .12em;
  color: #FFD166;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: -.12em;
  text-shadow: 0 0 14px rgba(255,209,102,.28);
}
#view.alma-ki-chat .mathe-inline .katex { font-weight: 700; }
#view.alma-ki-chat .mathe-block {
  display: block;
  max-width: 100%;
  margin: 15px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px;
  color: #FFD166;
  font-size: 1.32em;
  font-weight: 700;
  text-shadow: 0 0 16px rgba(255,209,102,.26);
  -webkit-overflow-scrolling: touch;
}
#view.alma-ki-chat .mathe-block .katex { font-weight: 700; }
#view.alma-ki-chat .mathe-block .katex-display { margin: 0; }
#view.alma-ki-chat .mathe-ersatz { color: #FFFFFF; background: #252936; border-radius: 7px; padding: 2px 6px; white-space: pre-wrap; }
#view.alma-ki-chat .mathe-baut,
#view.alma-ki-chat .uebung-baut { color: #B7BDCA; font-size: 14px; font-weight: 700; }
#view.alma-ki-chat .msg.assistant.streaming .assistant-inhalt::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 4px;
  border-radius: 2px;
  background: #66E5FF;
  vertical-align: -.16em;
  animation: alma-schreibcursor .72s steps(1, end) infinite;
}
@keyframes alma-schreibcursor { 50% { opacity: .18; } }
#view.alma-ki-chat .msg.assistant.chat-fehler {
  width: min(100%, 720px);
  border: 1px solid rgba(255,112,133,.42);
  border-left: 4px solid #FF7085;
  border-radius: 14px;
  background: rgba(255,112,133,.09);
  padding: 14px 16px;
}
#view.alma-ki-chat .chat-fehlertext { color: #FFE5EA; }
#view.alma-ki-chat .chat-retry { min-height: 44px; margin-top: 12px; }

#view.alma-ki-chat .composer { padding: 12px 8px max(12px, env(safe-area-inset-bottom)); }
#view.alma-ki-chat .composer-hinweis { display: none; }
.alma-ki-chat .cmp-box {
  position: relative;
  z-index: 0;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  background: #22242D;
  color: #FFFFFF;
  padding: 14px 15px 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 22px rgba(61,208,255,.08);
}
.alma-ki-chat .cmp-box textarea {
  min-height: 68px;
  background: transparent;
  color: #FFFFFF;
  caret-color: #FFFFFF;
  font-size: max(16px, calc(16px * var(--chat-schrift, 1)));
}
.alma-ki-chat .cmp-box textarea::placeholder { color: #AEB2BE; opacity: 1; }
.alma-ki-chat .composer .wz,
.alma-ki-chat .composer .icon-btn:not(.send) {
  border-color: #454956;
  background: #292B35;
  color: #F7F8FB;
  box-shadow: none;
}
.alma-ki-chat .cmp-werkzeuge { flex-wrap: wrap; row-gap: 10px; }
.alma-ki-chat .composer #wz-plus,
.alma-ki-chat .composer #wz-anhang,
.alma-ki-chat .composer #wz-stift,
.alma-ki-chat .composer #wz-mikro { background: #292B35; box-shadow: none; }
.alma-ki-chat .wz-menue {
  bottom: 56px;
  border-color: #3B3E4A;
  background: #20222B;
  color: #FFFFFF;
}
.alma-ki-chat .wz-menue button { color: #F7F8FB; }
.alma-ki-chat .wz-menue button:hover { background: #30333E; color: #FFFFFF; }
.alma-ki-chat .chat-werkzeugmenue { min-width: 285px; }
.alma-ki-chat .chat-werkzeugmenue button:nth-child(1) { color: #FF66C4; }
.alma-ki-chat .chat-werkzeugmenue button:nth-child(2) { color: #68A4FF; }
.alma-ki-chat .chat-werkzeugmenue button:nth-child(3) { color: #39E1A8; }
.alma-ki-chat .chat-werkzeugmenue button:nth-child(4) { color: #FF8A5B; }
.alma-ki-chat .chat-werkzeugmenue button span { color: #F7F8FB; }
.pdf-anhang {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 2px 10px;
  border: 1px solid #454956;
  border-radius: 15px;
  background: #20222A;
  color: #F7F8FB;
  padding: 10px 12px;
}
.pdf-anhang > span { min-width: 0; flex: 1; }
.pdf-anhang b,
.pdf-anhang small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-anhang b { font-size: 13px; }
.pdf-anhang small { margin-top: 2px; color: #A8ADBA; font-size: 11px; }
.pdf-anhang button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #30333D; color: #FFFFFF; cursor: pointer; }
.pdf-nachricht {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  padding: 9px 11px;
}
.pdf-nachricht > span { min-width: 0; }
.pdf-nachricht b,
.pdf-nachricht small { display: block; }
.pdf-nachricht b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.pdf-nachricht small { color: rgba(255,255,255,.7); font-size: 10.5px; }

.sidebar .nav-item[data-tour-nav="alma-ki"] { font-size: 15.5px; font-weight: 900; }

.route-alma-ki:has(.alma-ki-werkbank),
.route-alma-ki:has(.alma-ki-werkbank) body,
.route-alma-ki:has(.alma-ki-werkbank) #app,
.route-alma-ki:has(.alma-ki-werkbank) .main,
.route-alma-ki:has(.alma-ki-werkbank) .main-inner { background: #10171B; }
.alma-ki-werkbank {
  --wb-bg: #10171B; --wb-karte: #172126; --wb-linie: #26343B; --wb-ink: #E4EDEF; --wb-muted: #8FA3A9;
  --wb-akzent: #F0A63C; --wb-akzent-ink: #1E1300; --wb-teal: #34A0A4;
  background: var(--wb-bg);
  color: var(--wb-ink);
}
.alma-ki-werkbank .alma-ki-chatkopf {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 12px 22px;
  border-bottom: 1px solid var(--wb-linie);
}
.alma-ki-werkbank .alma-ki-chataktionen { display: contents; }
.alma-ki-werkbank .alma-ki-chatkopf h1 {
  order: 0;
  position: static;
  transform: none;
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--wb-ink);
  filter: none;
  animation: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
.alma-ki-werkbank .alma-ki-chatfach {
  order: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 292px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 0;
  margin: 0;
  pointer-events: none;
}
.alma-ki-werkbank .alma-ki-chatfach > * { pointer-events: auto; }
.alma-ki-werkbank .alma-ki-kopfthema { max-width: 240px; }
.alma-ki-werkbank .alma-ki-chatkopf h1 { margin-right: auto; }
.alma-ki-werkbank .alma-ki-fachwahl { width: auto; }
.alma-ki-werkbank .alma-ki-chatfach .alma-ki-fachschalter { min-height: 44px; border-radius: 8px; }
.alma-ki-kopfthema { min-width: 0; overflow: hidden; color: var(--wb-muted); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.alma-ki-werkbank .alma-ki-schriftwahl { order: 2; }
.alma-ki-werkbank .alma-ki-topaktionen {
  order: 3;
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
}
.alma-ki-werkbank .alma-ki-neonknopf {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--wb-linie);
  border-radius: 8px;
  background: var(--wb-karte);
  box-shadow: none;
}
.alma-ki-werkbank .alma-ki-neonknopf::before { display: none; }
.alma-ki-werkbank .alma-ki-neonknopf span:not(.alma-ki-knopfzahl) { display: none; }
.alma-ki-werkbank .alma-ki-neonknopf:hover,
.alma-ki-werkbank .alma-ki-neonknopf:focus-visible { background: #1E2B32; }
.alma-ki-werkbank .alma-ki-neonknopf:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }
.alma-ki-werkbank .alma-assistent-avatar { animation: none; box-shadow: none; }
.alma-ki-ablage {
  grid-area: ablage;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.alma-ki-ablage h4 { margin: 0; color: #8FE9FF; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.alma-ki-thema {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 8px;
  background: var(--wb-karte);
  padding: 12px 14px;
  box-shadow: 0 0 22px rgba(51, 214, 255, .1);
}
.alma-ki-thema b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.alma-ki-thema span { color: var(--wb-muted); font-size: 13px; line-height: 1.35; }
.alma-ki-werkzeuge { display: grid; gap: 6px; }
.alma-ki-werkzeuge button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--wz-neon, var(--wb-teal)) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--wz-neon, var(--wb-teal)) 58%, #0F1620);
  color: #FFFFFF;
  padding: 9px 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.alma-ki-werkzeuge button:hover,
.alma-ki-werkzeuge button:focus-visible { border-color: var(--wb-teal); background: #1B2A30; }
.alma-ki-werkzeuge button:nth-child(1) { --wz-neon: #33D6FF; }
.alma-ki-werkzeuge button:nth-child(2) { --wz-neon: #8B5CFF; }
.alma-ki-werkzeuge button:nth-child(3) { --wz-neon: #FF3C9E; }
.alma-ki-werkzeuge button:nth-child(4) { --wz-neon: #FFB340; }
.alma-ki-werkzeuge button:nth-child(5) { --wz-neon: #35E5A1; }
.alma-ki-werkzeuge button:nth-child(6) { --wz-neon: #68A4FF; }
.alma-ki-werkzeuge button:nth-child(7) { --wz-neon: #FF7AD5; }
.alma-ki-werkzeuge button:hover,
.alma-ki-werkzeuge button:focus-visible {
  border-color: var(--wz-neon, var(--wb-teal));
  background: color-mix(in srgb, var(--wz-neon, var(--wb-teal)) 72%, #0F1620);
  box-shadow: 0 0 18px color-mix(in srgb, var(--wz-neon, var(--wb-teal)) 40%, transparent);
}
.alma-ki-werkzeuge .a-ico {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 7px;
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
}
.alma-ki-werkzeuge b { display: block; color: #FFFFFF; font-size: 13.5px; font-weight: 800; }
.alma-ki-werkzeuge small { display: block; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.25; }
#view.alma-ki-chat .composer { padding: 10px 22px max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 999px) {
  #view.alma-ki-chat .chat-buehne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "lauf" "ablage" "fuss";
  }
  .alma-ki-werkbank .alma-ki-chatfach { right: 0; }
  #view.alma-ki-chat .chat-buehne-lauf,
  #view.alma-ki-chat .chat-buehne-fuss { border-right: 0; padding-left: 12px; padding-right: 12px; }
  .alma-ki-werkbank .alma-ki-chatkopf { gap: 10px; padding: 10px 12px; }
  #view.alma-ki-chat .msg.assistant { gap: 4px; }
  #view.alma-ki-chat .alma-assistent-avatar { width: 28px; height: 28px; border-radius: 7px; }
  #view.alma-ki-chat .alma-assistent-avatar img { width: 22px; height: 22px; }
  .alma-ki-ablage {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow: auto hidden;
    padding: 6px 12px;
    border-top: 1px solid var(--wb-linie);
    scrollbar-width: none;
  }
  .alma-ki-ablage::-webkit-scrollbar { display: none; }
  .alma-ki-ablage h4, .alma-ki-thema span, .alma-ki-werkzeuge small { display: none; }
  .alma-ki-thema { flex: 0 0 auto; max-width: 200px; padding: 6px 10px; box-shadow: none; }
  .alma-ki-thema::before { display: none; }
  .alma-ki-thema b { font-size: 13px; color: #8FE9FF; }
  .alma-ki-werkzeuge { flex: 0 0 auto; grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; }
  .alma-ki-werkzeuge button {
    grid-template-columns: 22px max-content;
    gap: 7px;
    min-height: 40px;
    padding: 4px 10px;
    white-space: nowrap;
  }
  .alma-ki-werkzeuge button b { font-size: 12.5px; font-weight: 700; }
  .alma-ki-werkzeuge .a-ico { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  #view.alma-ki-chat .composer { padding: 6px 8px max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 767px) {
  html.nav-drawer:has(#view.alma-ki-startansicht) .burger,
  html.nav-drawer:has(#view.alma-ki-chat) .burger,
  html.nav-drawer:has(#rc-aufgabe) .burger {
    top: calc(14px + env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: calc(14px + env(safe-area-inset-left));
    width: 48px;
    min-width: 48px;
    justify-content: center;
    padding: 12px;
  }
  html.nav-drawer:has(#view.alma-ki-startansicht) .burger .burger-txt,
  html.nav-drawer:has(#view.alma-ki-chat) .burger .burger-txt,
  html.nav-drawer:has(#rc-aufgabe) .burger .burger-txt { display: none; }
  #view.alma-ki-startansicht { min-height: calc(100dvh - 14px); }
  .alma-ki-startbuehne { min-height: calc(100dvh - 14px); }
  .alma-ki-eigenkopf { min-height: 190px; padding-inline: 8px; }
  .alma-ki-eigenkopf h1 { top: 17px; font-size: 27px; }
  .alma-ki-topaktionen { top: 57px; right: 8px; width: 146px; gap: 7px; }
  .alma-ki-neonknopf { min-height: 42px; padding-inline: 13px; font-size: 12px; }
  .alma-ki-startfach { width: min(280px, 84vw); }
  .alma-ki-startfach .alma-ki-fachschalter { min-height: 51px; border-radius: 15px; padding: 9px 14px; font-size: clamp(14px, 4.6vw, 19px); }
  .alma-ki-startbuehne .alma-ki-chatkopf { flex-basis: 142px; }
  .alma-ki-startbuehne .alma-ki-chataktionen { top: 12px; left: 50%; width: calc(100vw - 32px); max-width: 540px; }
  .alma-ki-startbuehne .alma-ki-chataktionen h1 {
    padding-left: 70px;
    padding-right: 104px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    font-size: clamp(15px, 5.2vw, 21px);
  }
  .alma-ki-startbuehne .alma-ki-chataktionen:has(.alma-ki-klausurknopf:not([hidden])) h1 { padding-right: 152px; }
  .alma-ki-startbuehne .alma-ki-chatfach {
    top: 52px;
    width: min(200px, 64vw);
  }
  .alma-ki-chatfach .alma-ki-fachschalter { min-height: 44px; gap: 7px; padding-inline: 11px; font-size: 14px; }
  .alma-ki-werkbank .alma-ki-chatkopf { padding-left: calc(72px + env(safe-area-inset-left)); }
  .alma-ki-werkbank .alma-ki-chatkopf h1, .alma-ki-kopfthema { display: none; }
  .alma-ki-werkbank .alma-ki-chatfach .alma-ki-fachschalter { gap: 7px; padding-inline: 11px; }
  #view.alma-ki-chat .chat-buehne-lauf { padding: 12px 10px 8px; }
  #view.alma-ki-chat .msg.user { max-width: 88%; }
  #view.alma-ki-chat .msg.assistant { max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: calc(17px * var(--chat-schrift, 1)); line-height: 1.6; }
  #view.alma-ki-chat .msg.assistant.chat-fehler { padding: 13px 14px; }
  #view.alma-ki-chat .alma-assistent-avatar { width: 26px; height: 26px; border-radius: 6px; }
  #view.alma-ki-chat .alma-assistent-avatar img { width: 20px; height: 20px; }
  #view.alma-ki-chat .mathe-block { margin-block: 13px 16px; padding: 11px 10px; font-size: 1.22em; }
  #view.alma-ki-chat .mathe-inline { font-size: 1.22em; }
  #view.alma-ki-chat .composer { padding-inline: 6px; }
  .alma-ki-chat .cmp-box { border-radius: 22px; }
  .alma-ki-chat .cmp-box textarea { width: 100%; max-width: 100%; box-sizing: border-box; font-size: max(17px, calc(17px * var(--chat-schrift, 1))); }
  .alma-ki-chat .chat-werkzeugmenue { min-width: min(285px, calc(100vw - 38px)); }
}

@media (max-height: 480px) and (orientation: landscape) {
  .alma-ki-startbuehne .alma-ki-chatkopf { flex-basis: 94px; }
  .alma-ki-startbuehne .alma-ki-chataktionen { top: 4px; }
  .alma-ki-startbuehne .alma-ki-chataktionen h1 { font-size: 18px; }
  .alma-ki-startbuehne .alma-ki-chatfach { top: 37px; width: min(190px, 42vw); }
  .alma-ki-werkbank .alma-ki-chatkopf { padding-block: 6px; }
  .alma-ki-chatfach .alma-ki-fachschalter { min-height: 44px; }
  #view.alma-ki-chat .composer { padding-block: 4px max(4px, env(safe-area-inset-bottom)); }
  .alma-ki-chat .cmp-box { padding-block: 7px 6px; }
  .alma-ki-chat .cmp-box textarea { min-height: 44px; max-height: 72px; padding-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .alma-ki-eigenkopf h1,
  .composer .send,
  .alma-ki-neonknopf::before,
  .alma-ki-chat .cmp-box::before,
  .alma-ki-thema::before,
  #view.alma-ki-chat .msg.assistant .assistant-inhalt::before,
  .alma-ki-fachschalter::after,
  .alma-ki-fachschalter-leer,
  #view.alma-ki-chat .msg.assistant.streaming .assistant-inhalt::after { animation: none; }
  .alma-ki-fachschalter > .ic:last-child { transition: none; }
  .fachrad-perle, .fachrad-bahn, .alma-ki-fachmenue::before { transition: none; }
}

.kind-start { display: flex; flex-direction: column; gap: 12px; min-height: 0;
  --dock-luecken: 36px; --tasche-spalte: calc((100% - var(--dock-luecken)) * 25 / 72); }
.kind-start > .kid-hero { margin: 0; flex: 0 0 auto; min-height: 74px; padding: 0 20px 0 14px; }
.kind-start > .kid-hero .kh-in { flex-wrap: nowrap; align-items: center; gap: 16px; min-height: 74px; }
.kind-start > .kid-hero .kh-face { margin: 0; flex: 0 0 auto; }
.kind-start > .kid-hero .mood-svg { width: 62px; height: 62px; }
.kind-start > .kid-hero .kh-txt { flex: 1 1 auto; min-width: 0; }
.kind-start > .kid-hero .kh-name { font-size: 21px; }
.kh-zeile { margin: 3px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,.84);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-zeile b { font-weight: 800; color: #fff; }
.kind-start > .kid-hero .kh-cta { margin-top: 0; flex: 0 0 auto; }
.kind-start > .kid-hero .kh-go { font-size: 14px; padding: 9px 16px; }
.kind-start > .kid-hero .kh-streak { min-height: 38px; }
.kind-start > .kid-hero .kh-ring { width: 56px; height: 56px; }
.kind-start > .kid-hero .kh-ring .kh-val b { font-size: 15px; }
.kind-start > .kid-hero .kh-ring .kh-val b small { font-size: 10px; }
.kind-start > .kid-hero .kh-ring .kh-val small { font-size: 8.5px; letter-spacing: .02em; }
@media (max-width: 620px) {
  .kind-start > .kid-hero { padding: 12px 14px; }
  .kind-start > .kid-hero .kh-in { flex-direction: row; flex-wrap: wrap; gap: 10px 12px; min-height: 0; }
  .kind-start > .kid-hero .kh-txt { flex: 1 1 150px; width: auto; }
  .kind-start > .kid-hero .kh-name { font-size: 19px; }
  .kind-start > .kid-hero .mood-svg { width: 52px; height: 52px; }
  .kind-start > .kid-hero .kh-ring { order: 3; }
  .kind-start > .kid-hero .kh-cta { order: 4; width: 100%; }
  .kind-start > .kid-hero .kh-go { flex: 1 1 auto; justify-content: center; }
}
.ks-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) var(--tasche-spalte); gap: 12px; min-height: 0; }
.ks-dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr) var(--tasche-spalte); gap: 12px; min-height: 0; }
.ks-dock > .dash-routinen { grid-column: auto; }
.ks-bald-koerper > .dash-routinen { grid-column: auto; }

@media (min-width: 1000px) and (min-height: 620px) {
  html.route-kind-start .main-inner { padding-bottom: 12px; }
  .kind-start { height: calc(100dvh - 30px); }
  .ks-oben { flex: 0.86 1 0; }
  .ks-dock { flex: 1.14 1 0; }
}
@media (max-width: 999px) {
  .ks-oben, .ks-dock { grid-template-columns: 1fr; }
}

.ks-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 9px; min-height: 0; overflow: hidden;
}
.ks-karte > h3 {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0;
  color: var(--ink-soft); font-size: 11.5px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase;
}
.ks-karte > h3 .a-ico { color: var(--neon-bernstein); flex: 0 0 auto; }
.ks-karte > h3 small { margin-left: auto; letter-spacing: 0; text-transform: none;
  font-size: 12.5px; font-weight: 700; }
.ks-leer { color: var(--ink-soft); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.ks-mini { align-self: flex-start; margin-top: auto; padding: 7px 13px; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.04); color: var(--ink-soft);
  font: 700 12.5px/1 Nunito, sans-serif; }
.ks-mini:hover { background: rgba(255,255,255,.09); color: var(--ink); }


.ks-tasche { container-type: inline-size; gap: 10px; border-color: rgba(255,158,44,.4);
  background: linear-gradient(155deg, #48290B 0%, #2A1B13 52%, var(--card) 100%); }
.ks-tasche.fertig { border-color: rgba(82,182,154,.45);
  background: linear-gradient(155deg, #123A31 0%, #172A28 52%, var(--card) 100%); }
.ks-tasche-kopf { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ks-tasche-kopf h3 { margin: 0; min-width: 0; color: var(--ink);
  font: 900 17px/1.15 Nunito, sans-serif; letter-spacing: -.01em; }
.ks-tasche-kopf h3 span { color: var(--neon-bernstein); }
.ks-tasche.fertig .ks-tasche-kopf h3 span { color: #9BE3CD; }
.ks-tasche-stand { margin-left: auto; color: var(--ink-soft);
  font: 800 12px Nunito, sans-serif; white-space: nowrap; }
.ks-tasche.fertig .ks-tasche-stand { color: #9BE3CD; }
.ks-tasche-balken { flex: 0 0 auto; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.09); overflow: hidden; }
.ks-tasche-balken i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-bernstein), var(--success)); transition: width .25s; }
.ks-tasche-koerper { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(148px, .62fr) minmax(0, 1.55fr); gap: 10px; }
.ks-tasche-faecher, .ks-tasche-sachen { min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; }
.ks-tasche-fach { flex: 1 1 auto; max-height: 58px; display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; cursor: pointer; border: 1px solid transparent; border-radius: 10px;
  background: rgba(255,255,255,.05); color: var(--ink); font: 800 13.5px Nunito, sans-serif; text-align: left; }
.ks-tasche-fach .punkt { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--fachfarbe); }
.ks-tasche-fach .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-tasche-fach .zahl { flex: 0 0 auto; display: flex; align-items: center;
  color: var(--ink-soft); font-size: 11.5px; font-weight: 900; }
.ks-tasche-fach.fertig .zahl { color: var(--success); }
.ks-tasche-fach:hover { background: rgba(255,255,255,.1); }
.ks-tasche-fach[aria-selected="true"] { background: rgba(255,255,255,.13); border-color: var(--fachfarbe); }
.ks-tasche-sache { flex: 1 1 auto; max-height: 58px; display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; cursor: pointer; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); font: 700 15px Nunito, sans-serif; text-align: left; }
.ks-tasche-sache:hover { background: rgba(255,255,255,.06); }
.ks-tasche-sache .kasten { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.28); display: grid; place-items: center; color: #062018; }
.ks-tasche-sache[aria-checked="true"] .kasten { background: var(--success); border-color: var(--success); }
.ks-tasche-sache[aria-checked="true"] .t { color: var(--ink-soft); text-decoration: line-through; }
.ks-tasche .ks-leer { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; }
.ks-tasche-knopf { flex: 0 0 auto; margin-top: auto; padding: 11px 16px; border: 0; border-radius: 13px;
  cursor: pointer; background: var(--neon-bernstein); color: #2A1A00;
  font: 800 14.5px/1 Nunito, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 26px -12px var(--neon-bernstein); transition: .16s; }
.ks-tasche.fertig .ks-tasche-knopf { background: var(--success); color: #062018;
  box-shadow: 0 12px 26px -12px var(--success); }
.ks-tasche-knopf:hover { transform: translateY(-2px); }
@container (max-width: 292px) {
  .ks-tasche-koerper { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ks-tasche-faecher { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; overflow-y: auto; }
  .ks-tasche-faecher > .ks-tasche-fach { flex: 0 1 auto; }
}

.ks-kibox { display: grid; align-items: center; justify-items: center; }
.ks-kibox-text { container-type: inline-size; display: flex; flex-direction: column;
  justify-content: center; gap: 14px; min-width: 0; width: 100%; }
.ks-kibox h2 { margin: 0; color: var(--ink); font-weight: 900; line-height: 1.02;
  white-space: nowrap; font-size: min(112px, 22.5cqw); letter-spacing: -.025em;
  text-align: center; }
.ks-kibox-text p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5;
  text-align: center; }

.ks-faecher > .ks-fachgitter { flex: 1 1 auto; }
.ks-fachgitter { min-height: 0; display: flex; flex-wrap: wrap; align-content: stretch; gap: 10px; }
.ks-fachgitter > .ks-fachkachel { flex: 1 1 calc(50% - 5px); min-height: 78px; }
.ks-fachgitter-leer { flex-direction: column; align-content: center; justify-content: center; }
.ks-fachkachel { container-type: inline-size; display: flex; align-items: center; justify-content: center;
  padding: 6px; border: 0; border-radius: 16px; cursor: pointer; min-width: 0;
  background: var(--fachfarbe); transition: .16s; }
.ks-fachkachel span { min-width: 0; text-align: center; color: #fff;
  font-family: Nunito, sans-serif; font-weight: 900; line-height: 1.05;
  font-size: max(15px, min(40px, calc(150cqw / var(--wort, 10))));
  text-wrap: balance; overflow-wrap: normal; word-break: keep-all; hyphens: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
.ks-fachkachel:hover { transform: translateY(-2px); filter: brightness(1.08); }

.ks-morgen-kopf { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ks-morgen-kopf h3 { margin: 0; min-width: 0; color: var(--ink);
  font: 900 17px/1.15 Nunito, sans-serif; letter-spacing: -.01em; text-transform: none; }
.ks-morgen-kopf h3 span { color: var(--neon-cyan); }
.ks-morgen-summe { margin-left: auto; color: var(--ink-soft);
  font: 800 12px Nunito, sans-serif; white-space: nowrap; }
.ks-stunden { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px;
  align-content: start; overflow-y: auto; scrollbar-width: thin; }
.ks-stunde { flex: 1 1 auto; min-height: 44px; max-height: 52px; display: flex; align-items: center; gap: 11px;
  padding: 9px 13px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); transition: .14s; }
.ks-stunde:hover { background: rgba(255,255,255,.09); }
.ks-stunde-punkt { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--fachfarbe); }
.ks-stunde-fach { min-width: 0; flex: 1; color: var(--ink); font-size: 15.5px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-stunde-zeit { flex: 0 0 auto; margin-left: auto; padding-left: 8px; color: var(--ink-soft);
  font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ks-baldliste { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px;
  align-content: start; }
.ks-baldzeile { flex: 1 1 auto; max-height: 56px; display: flex; align-items: center;
  gap: 12px; min-width: 0; }
.ks-balddatum { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 13px; background: var(--fachfarbe); color: #fff; line-height: 1;
  font: 800 16.5px/1 Nunito, sans-serif; }
.ks-balddatum small { display: block; margin-top: 1px; font-size: 9.5px; opacity: .9; }
.ks-baldtext { min-width: 0; }
.ks-baldtext b { display: block; color: var(--ink); font-size: 15.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-baldtext span { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ks-routinenliste { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start; }
.ks-routinen .dr-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.03); color: var(--ink-soft);
  font: 700 14px/1 Nunito, sans-serif; transition: .14s; }
.ks-routinen .dr-pill .dr-dot { display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.22); flex: 0 0 auto; }
.ks-routinen .dr-pill.erledigt { background: var(--success-soft); border-color: var(--rc); color: var(--ink); }
.ks-routinen .dr-pill.erledigt .dr-dot { background: var(--rc); border-color: var(--rc); color: #0B1018; }
.ks-routinen .dr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ks-pokalkarte { padding: 15px 17px; }
.ks-pokale { container-type: size; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ks-bald-koerper { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
.ks-bald-spalte { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.ks-bald-spalte + .ks-bald-spalte { border-left: 1px solid var(--line); padding-left: 14px; }
.ks-bald-spalte > h3 { flex: 0 0 auto; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  color: var(--ink-soft); font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ks-bald-spalte > h3 .a-ico { flex: 0 0 auto; }
.ks-bald-spalte > h3 small { margin-left: auto; padding-left: 6px; letter-spacing: 0;
  text-transform: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ks-pokal-reihe { position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 3cqw; }
.ks-pokal-reihe::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(88cqh, 76cqw); aspect-ratio: 1; transform: translate(-50%, -46%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--pk-aura, rgba(240,180,41,.2)) 0%, transparent 68%); }
.ks-pokal { display: block; width: auto; filter: drop-shadow(0 6px 14px var(--pk-glanz)); }
.ks-pokal-neben { position: relative; z-index: 1; display: flex; opacity: .4; }
.ks-pokal-neben .ks-pokal { height: min(26cqh, 15cqw, 74px); }
.ks-pokal-mitte { position: relative; z-index: 1; display: flex; }
.ks-pokal-gross { height: min(82cqh, 62cqw, 330px); }
.ks-pokal-titel { flex: 0 0 auto; margin: 2px 0 0; color: var(--ink); text-align: center;
  font-family: Nunito, sans-serif; font-weight: 900; line-height: 1.15;
  font-size: clamp(15px, min(7.6cqh, 6cqw), 26px); }
.ks-pokal-unter { flex: 0 0 auto; margin: 1px 0 0; color: var(--ink-soft); text-align: center;
  font-family: Nunito, sans-serif; font-weight: 800;
  font-size: clamp(11px, min(4.8cqh, 3.8cqw), 15px); line-height: 1.35; }
.ks-pokal-naechst { flex: 0 0 auto; margin-top: 8px; width: 100%;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.ks-pokal-ziel { color: var(--ink-soft); text-align: center;
  font: 800 11.5px/1.3 Nunito, sans-serif; }
.ks-pokal-balken { flex: 1 1 auto; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.09); overflow: hidden; }
.ks-pokal-balken i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-bernstein), var(--success)); transition: width .25s; }
.ks-pokal-rest { flex: 0 0 auto; color: var(--ink-soft);
  font: 800 10.5px Nunito, sans-serif; white-space: nowrap; }
.ks-pokale-leer .ks-pokal-gross { opacity: .38; }
.ks-pokal-trenn { flex: 0 0 auto; height: 1px; background: var(--line); }

.pokalfeier { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center;
  background: rgba(4, 8, 16, .72); backdrop-filter: blur(6px); animation: pf-auf .32s ease both; }
.pokalfeier.zu { animation: pf-zu .3s ease both; }
@keyframes pf-auf { from { opacity: 0 } to { opacity: 1 } }
@keyframes pf-zu { to { opacity: 0 } }
.pf-karte { position: relative; overflow: hidden; width: min(330px, 84vw);
  padding: 24px 22px 20px; text-align: center;
  border-radius: 26px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, #241a06 0%, #16171f 62%, var(--card) 100%);
  box-shadow: 0 30px 80px -30px #000, 0 0 60px -20px var(--pk-aura);
  animation: pf-rein .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pf-rein { from { transform: scale(.72) translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
.pf-strahlen { position: absolute; inset: -40% -10%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,214,120,.16) 9deg 12deg, transparent 13deg 24deg);
  animation: pf-dreh 9s linear infinite; }
@keyframes pf-dreh { to { transform: rotate(360deg) } }
.pf-inhalt { position: relative; z-index: 1; }
.pf-pokal { display: flex; justify-content: center; animation: pf-schweben 2.6s ease-in-out infinite; }
.pf-pokal .ks-pokal { height: 128px; }
@keyframes pf-schweben { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.pf-kicker { margin: 4px 0 0; color: var(--neon-bernstein);
  font: 900 10.5px/1 Nunito, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; }
.pf-titel { margin: 7px 0 0; color: #fff; font: 900 22px/1.15 Nunito, sans-serif; }
.pf-text { margin: 7px 0 0; color: rgba(255,255,255,.72); font: 700 13px/1.5 Nunito, sans-serif; }
.pf-zeit { margin-top: 15px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pf-zeit i { display: block; height: 100%; background: var(--neon-bernstein); animation: pf-ablauf 6.5s linear both; }
@keyframes pf-ablauf { from { width: 100% } to { width: 0 } }
.pf-zu { margin-top: 12px; width: 100%; padding: 11px; border: 0; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font: 800 13.5px Nunito, sans-serif; }
.pf-zu:hover { background: rgba(255,255,255,.16); }
.pf-funke { position: absolute; left: 50%; top: 86px; width: 7px; height: 7px; border-radius: 50%; z-index: 2;
  background: var(--ff, #FFD166); animation: pf-flug var(--fd, 1.1s) ease-out both; }
@keyframes pf-flug { from { transform: translate(0,0) scale(1); opacity: 1 }
  to { transform: translate(var(--fx), var(--fy)) scale(.2); opacity: 0 } }

@media (min-width: 1000px) and (max-height: 899px) {
  .kind-start { gap: 10px; --dock-luecken: 30px; }
  .ks-oben, .ks-dock { gap: 10px; }
  .ks-karte { padding: 12px 14px; gap: 7px; border-radius: 18px; }
  .ks-kibox { gap: 12px; }
  .ks-kibox-text { gap: 10px; }
  .ks-kibox-text p { font-size: 13.5px; }
  .ks-fachgitter { gap: 7px; }
  .ks-fachgitter > .ks-fachkachel { flex-basis: calc(50% - 3.5px); }
  .ks-fachkachel { border-radius: 13px; padding: 5px; }
  .ks-stunde { padding: 3px 9px; }
  .ks-stunden .ks-stunde:nth-child(n+7) { display: none; }
  .ks-baldliste .ks-baldzeile:nth-child(n+4) { display: none; }
  .ks-balddatum { width: 34px; height: 34px; border-radius: 10px; font-size: 13.5px; }
  .ks-tasche { gap: 8px; }
  .ks-tasche-kopf h3 { font-size: 15.5px; }
  .ks-tasche-koerper { gap: 8px; }
  .ks-tasche-sache { padding: 5px 8px; }
  .ks-tasche-knopf { padding: 9px 14px; font-size: 13.5px; }
}
@media (min-width: 1000px) and (max-height: 759px) {
  .ks-kibox h2 { font-size: clamp(30px, 3.8vw, 46px); }
  .ks-kibox-text p { display: none; }
  .ks-stunden .ks-stunde:nth-child(n+6) { display: none; }
  .ks-baldliste .ks-baldzeile:nth-child(n+3) { display: none; }
}
@media (max-width: 999px) {
  .ks-oben > .ks-kibox { order: -1; }
  .ks-kibox-text { justify-content: flex-start; gap: 8px; }
  .ks-kibox h2 { font-size: min(92px, 17vw); text-align: center; }
  .ks-kibox-text > p { text-align: center; }
  .ks-kibox-text p { font-size: 14px; }
  .ks-fachgitter > .ks-fachkachel { min-height: 60px; }
  .ks-pokale { container-type: inline-size; min-height: 0; }
  .ks-pokalkarte { padding: 18px 18px 16px; }
  .ks-pokal-reihe { flex: 0 0 auto; height: min(48cqw, 230px); }
  .ks-pokal-gross { height: min(44cqw, 212px); }
  .ks-pokal-neben .ks-pokal { height: min(18cqw, 84px); }
  .ks-pokal-titel { font-size: clamp(15px, 5.6cqw, 23px); margin-top: 10px; }
  .ks-pokal-unter { font-size: clamp(11px, 3.8cqw, 15px); margin-top: 4px; }
  .ks-pokal-naechst { margin-top: 14px; }
  .ks-bald-koerper { grid-template-columns: 1fr; }
  .ks-bald-spalte + .ks-bald-spalte { border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 12px; }
  .ks-tasche-koerper { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ks-tasche-faecher, .ks-tasche-sachen { overflow-y: auto; }
  .ks-tasche-faecher { flex-direction: row; flex-wrap: wrap; }
  .ks-tasche-faecher > .ks-tasche-fach { flex: 1 1 calc(50% - 3px); padding: 7px 9px; font-size: 12.5px; }
  .ks-tasche-sache { padding: 9px; font-size: 13.5px; }
  .ks-tasche-sache .kasten { width: 21px; height: 21px; }
}
@media (max-width: 460px) {
  .ks-fachgitter { gap: 8px; }
  .ks-fachgitter > .ks-fachkachel { flex-basis: calc(50% - 4px); min-height: 56px; }
  .ks-fachkachel span { font-size: max(14px, min(30px, calc(148cqw / var(--wort, 10)))); }
}
@media (min-width: 1000px) and (min-height: 620px) {
  .ks-fachgitter > .ks-fachkachel { min-height: 22px; }
  .ks-fachkachel { container-type: size; }
  .ks-fachkachel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: max(15px, min(34px, 88cqh, calc(150cqw / var(--zeile, 12)))); }
}
.chat-fenster-karte { width: var(--lp-breite, 100%); max-width: none; max-height: min(84dvh, 880px);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(var(--lp-versatz-x, 0px)); }
.chat-fenster-inhalt { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-fenster-inhalt .lp-plan, .chat-fenster-inhalt .lp-katalog { box-shadow: none; }
.kk-fenster .chat-fenster-karte { height: min(84dvh, 880px); }
.kk-fenster .chat-fenster-inhalt { flex: 1 1 auto; min-height: 0; display: grid; overflow: hidden; }
.kk-fenster .chat-fenster-inhalt > .kw { min-height: 0; }
.ks-dock > .ks-karte, .ks-oben > .ks-karte:not(.ks-kibox) {
  border: 1.5px solid color-mix(in srgb, var(--bf, var(--neon-cyan)) 70%, transparent);
  background:
    radial-gradient(120% 90% at 50% -30%, color-mix(in srgb, var(--bf, var(--neon-cyan)) 20%, transparent), transparent 62%),
    #0D1220;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bf, var(--neon-cyan)) 18%, transparent),
    0 0 30px -6px color-mix(in srgb, var(--bf, var(--neon-cyan)) 55%, transparent),
    inset 0 0 34px -18px color-mix(in srgb, var(--bf, var(--neon-cyan)) 90%, transparent);
}
.ks-dock > .ks-karte > h3, .ks-oben > .ks-karte:not(.ks-kibox) > h3,
.ks-morgen-kopf h3, .ks-tasche-kopf h3 {
  color: var(--bf, var(--neon-cyan));
  text-shadow: 0 0 14px color-mix(in srgb, var(--bf, var(--neon-cyan)) 60%, transparent);
}
.ks-dock > .ks-karte > h3 .a-ico, .ks-oben > .ks-karte:not(.ks-kibox) > h3 .a-ico {
  color: var(--bf, var(--neon-cyan));
}
.ks-morgen { --bf: #3A86FF; }
.ks-bald { --bf: #C86BFA; }
.ks-routinen { --bf: #22D3A6; }
.ks-tasche { --bf: #FF9E2C; }
.ks-pokalkarte { --bf: #F0A63C; }
.ks-tasche.fertig { --bf: #22D3A6; }
.ks-morgen-kopf h3 span, .ks-tasche-kopf h3 span { color: #fff; }
.ks-kibox h2 {
  background-image: linear-gradient(100deg,
    #33D6FF 0%, #8B5CFF 22%, #FF3C9E 44%, #FF9E2C 60%, #22D3A6 78%, #33D6FF 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(139, 92, 255, .5)) drop-shadow(0 0 34px rgba(51, 214, 255, .28));
  animation: ks-ki-fluss 9s linear infinite;
}
@keyframes ks-ki-fluss { from { background-position: 0 0; } to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ks-kibox h2 { animation: none; background-position: 42% 0; }
}
.registrierung-dialog .verwaltung-modal {
  --creme: #FFFDF7;
  --creme-tief: #F6EFE1;
  --creme-linie: #E7DCC7;
  --creme-tinte: #2E2519;
  --creme-leise: #6B5F4E;
  --creme-akzent: #1A759F;
  position: relative; width: min(600px, 100%); padding: 0; border-radius: 26px; overflow: hidden auto;
  background: linear-gradient(180deg, var(--creme) 0%, var(--creme-tief) 100%);
  color: var(--creme-tinte);
  box-shadow: 0 34px 80px -30px rgba(46, 37, 25, .55);
}
.registrierung-dialog .modal-head { position: absolute; z-index: 3; top: 12px; right: 14px; margin: 0; }
.registrierung-dialog .modal-head b { display: none; }
.registrierung-dialog .modal-head .x { background: transparent; color: var(--creme-leise); }
.registrierung-dialog .modal-head .x:hover { color: var(--creme-tinte); }
.reg-willkommen { position: relative; display: flex; align-items: center;
  gap: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 22px) clamp(18px, 5vw, 26px); border-bottom: 1px solid var(--creme-linie);
  background:
    radial-gradient(78% 150% at 88% 50%, rgba(255, 196, 128, .40), transparent 62%),
    linear-gradient(112deg, #FFF7E8 0%, #FDEFD8 58%, #FBE6CC 100%); }
.reg-willkommen-text { flex: 1; min-width: 0; }
.reg-willkommen-text b { display: block; color: var(--creme-tinte);
  font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.reg-willkommen-text span { display: block; margin-top: 6px; color: var(--creme-leise);
  font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.reg-eule { flex: 0 0 auto; width: clamp(64px, 18vw, 92px); filter: drop-shadow(0 8px 20px rgba(150, 105, 40, .35)); }
.reg-eule svg { width: 100%; height: auto; display: block; }
.reg-koerper { padding: clamp(16px, 4.5vw, 20px) clamp(18px, 5vw, 26px) 0; }
.registrierung-dialog .reg-einstieg { display: none; }
.reg-stammdaten { grid-template-rows: auto auto auto auto; align-items: end; gap: 6px 13px; }
.reg-feld { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.reg-feld-breit { grid-column: 1 / -1; }
.registrierung-dialog .reg-feld label { align-self: end; margin: 0 0 6px;
  font-size: 13.5px; font-weight: 800; color: var(--creme-tinte); }
.registrierung-dialog .reg-feld input { min-height: 46px; border-radius: 12px;
  background: #fff; border: 2px solid var(--creme-linie); color: var(--creme-tinte); }
.registrierung-dialog .reg-feld input::placeholder { color: #A8998A; }
.registrierung-dialog .reg-feld input:focus { border-color: var(--creme-akzent);
  box-shadow: 0 0 0 4px rgba(26, 117, 159, .16); outline: none; }
.registrierung-dialog .login-passwort-eingabe button { color: var(--creme-leise); }
.registrierung-dialog .reg-hinweis { display: block; margin-top: 5px; color: var(--creme-leise);
  font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.registrierung-dialog .reg-feldfehler { display: block; margin-top: 5px; color: #B23A2E;
  font-size: 12px; font-weight: 800; line-height: 1.4; }
.registrierung-dialog .reg-feldfehler[hidden] { display: none; }
.registrierung-dialog .reg-feld input.fehlerhaft { border-color: #C9483A;
  box-shadow: 0 0 0 4px rgba(201, 72, 58, .14); }
.registrierung-dialog .reg-tarife { gap: 12px; margin: 18px 0 0; }
.registrierung-dialog .reg-tarife legend { color: var(--creme-leise); font-size: 11.5px;
  font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 9px; }
.registrierung-dialog .reg-tarif { position: relative; flex-direction: column;
  align-items: flex-start; gap: 4px; padding: 15px; border-radius: 16px;
  border: 2px solid var(--creme-linie); background: #fff; }
.registrierung-dialog .reg-tarif input { position: absolute; top: 15px; right: 15px; }
.registrierung-dialog .reg-tarif b { color: var(--creme-tinte); font-size: 16px; }
.registrierung-dialog .reg-tarif small { color: var(--creme-leise); }
.registrierung-dialog .reg-tarif:has(input:checked) { border-color: var(--creme-akzent);
  background: #EFF7FB; }
.registrierung-dialog .reg-zustimmungen { gap: 11px; margin-top: 18px; padding: 16px;
  border-radius: 16px; background: #FFFDF8; border: 1px solid var(--creme-linie); }
.registrierung-dialog .reg-zustimmung { font-size: 12.5px; line-height: 1.5; color: #3D3325; }
.registrierung-dialog .reg-zustimmung a { color: #12688F; }
.registrierung-dialog .reg-zustimmung input { accent-color: var(--creme-akzent); }
.registrierung-dialog .reg-abschluss { margin: 18px calc(-1 * clamp(18px, 5vw, 26px)) 0;
  padding: 0 clamp(18px, 5vw, 26px) clamp(18px, 4.5vw, 22px);
  background: linear-gradient(180deg, rgba(246, 239, 225, 0), var(--creme-tief) 34%); box-shadow: none; }
.registrierung-dialog .reg-abschluss .err { color: #B23A2E; }
.registrierung-dialog .reg-abschluss #reg-save { border: 0; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #2189B8, #146C93);
  box-shadow: 0 14px 28px -12px rgba(20, 108, 147, .7); }
.registrierung-dialog .reg-zustimmung input[type="checkbox"],
.registrierung-dialog .reg-tarif input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  width: 21px; height: 21px; min-width: 21px; min-height: 21px; max-height: 21px; padding: 0;
  cursor: pointer; border: 2px solid #C9BCA6; background: #fff;
  display: grid; place-items: center; transition: .14s;
}
.registrierung-dialog .reg-zustimmung input[type="checkbox"] { border-radius: 6px; }
.registrierung-dialog .reg-tarif input[type="radio"] { border-radius: 50%; }
.registrierung-dialog .reg-zustimmung input[type="checkbox"]:hover,
.registrierung-dialog .reg-tarif input[type="radio"]:hover { border-color: var(--creme-akzent); }
.registrierung-dialog .reg-zustimmung input[type="checkbox"]:checked,
.registrierung-dialog .reg-tarif input[type="radio"]:checked {
  background: var(--creme-akzent); border-color: var(--creme-akzent);
}
.registrierung-dialog .reg-zustimmung input[type="checkbox"]:checked::after {
  content: ''; width: 10px; height: 5.5px; margin-top: -3px;
  border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff; transform: rotate(-45deg);
}
.registrierung-dialog .reg-tarif input[type="radio"]:checked::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.registrierung-dialog .reg-zustimmung input[type="checkbox"]:focus-visible,
.registrierung-dialog .reg-tarif input[type="radio"]:focus-visible {
  outline: 3px solid rgba(26, 117, 159, .38); outline-offset: 2px;
}

.kk-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px; margin-top: 14px;
}
.kk-karte {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--wand);
  border: 1px solid var(--line); transition: border-color .18s, transform .18s, box-shadow .18s;
}
.kk-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--fc); }
.kk-karte.kk-aus { opacity: .62; }
.kk-haupt {
  display: block; width: 100%; text-align: left; padding: 0;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.kk-band {
  display: block; height: 60px; position: relative;
  background: linear-gradient(96deg, var(--fc) 0%, color-mix(in srgb, var(--fc) 52%, var(--wand)) 100%);
}
.kk-scheibe {
  position: absolute; left: 18px; bottom: -24px; width: 62px; height: 62px; border-radius: 50%;
  background: color-mix(in srgb, var(--fc) 74%, #0d1220); border: 4px solid var(--wand);
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff;
}
.kk-koerper { display: flex; flex-direction: column; padding: 32px 18px 16px; }
.kk-name { font-size: 21px; font-weight: 800; line-height: 1.25; }
.kk-unter { font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.kk-merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kk-merkmal {
  padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-soft);
}
.kk-merkmal b { color: var(--ink); font-weight: 800; }
.kk-fuss {
  margin-top: 14px; padding: 11px; border-radius: 12px; text-align: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--fc) 22%, var(--card));
  border: 1px solid color-mix(in srgb, var(--fc) 42%, var(--line));
}
.kk-neben {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 16px;
}
.kk-neben button { font-size: 12px; padding: 7px 12px; }
.kk-frei {
  align-items: center; justify-content: center; gap: 12px; padding: 24px;
  min-height: 232px; background: transparent; border: 2px dashed var(--line);
  color: var(--ink-soft); text-align: center; cursor: pointer; font: inherit;
}
.kk-frei:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-schein); }
.kk-plus {
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid currentColor;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
}
.kk-frei-text { font-size: 15px; font-weight: 800; }
.kk-frei-text small { display: block; font-size: 12px; font-weight: 400; opacity: .78; margin-top: 3px; }
.kk-hinweis { margin-top: 12px; }

.vorlese-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 11px; cursor: pointer;
  background: var(--primary-soft); border: 1px solid var(--primary);
  color: var(--primary-deep); font: 800 12.5px/1 Nunito, sans-serif;
}
.vorlese-knopf:hover { background: var(--primary); color: #fff; }
.vorlese-knopf.leise { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.vorlese-knopf.leise:hover { color: var(--ink); border-color: var(--primary); background: var(--primary-soft); }
.vorlese-knopf[disabled] { opacity: .6; cursor: default; }
.ps-chatschalter { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.ps-chatschalter input[type="checkbox"] {
  flex: 0 0 20px; width: 20px; min-width: 20px; max-width: 20px; height: 20px;
  margin: 2px 0 0; accent-color: var(--primary);
}
.ps-chatschalter > span { min-width: 0; flex: 1 1 auto; }
.ps-chatschalter b { color: var(--ink); }

.werkzeug-vorgang-fertig {
  grid-column: 1 / -1;
  margin-top: 10px;
  min-height: 56px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #22D3A6, #06B6D4);
  color: #05121B;
  font: 800 16.5px/1 Nunito, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 22px rgba(34, 211, 166, .32);
  animation: vorgangFertigPuls 2.2s ease-in-out infinite;
}
.werkzeug-vorgang-fertig svg { flex: none; }
.werkzeug-vorgang-fertig:hover { filter: brightness(1.06); }
.werkzeug-vorgang-fertig:active { transform: translateY(1px); }
@keyframes vorgangFertigPuls {
  0%, 100% { box-shadow: 0 8px 22px rgba(34, 211, 166, .32); }
  50% { box-shadow: 0 8px 30px rgba(34, 211, 166, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .werkzeug-vorgang-fertig { animation: none; }
}
.werkzeug-vorgang-fertig[hidden] { display: none; }

.vorlese-fehlt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; margin-top: 4px; padding: 10px 13px;
  border-radius: 12px; background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.45;
}
.vorlese-fehlt > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 220px; }
.vorlese-fehlt svg { flex: none; }
.vorlese-hilfe {
  flex: 0 0 auto; min-height: 38px; padding: 8px 15px; border-radius: 10px; cursor: pointer;
  background: var(--primary); border: 0; color: #fff; font: 800 13px/1 Nunito, sans-serif;
}
.vorlese-hilfe:hover { filter: brightness(1.08); }
.stimme-hilfe-karte { max-width: 480px; }
.stimme-hilfe-schritte { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 9px;
  color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.stimme-hilfe-schritte b { color: var(--ink); }
.stimme-hilfe-karte .muted { margin-top: 12px; font-size: 12.5px; }
.stimme-hilfe-zu { width: 100%; margin-top: 14px; }
.fam-gekuendigt {
  background: var(--danger-soft); color: var(--danger-deep);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); font-weight: 900;
}
.fam-kuend-zeit { color: var(--danger-deep) !important; }

.tr-uhr-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 16px; align-items: stretch; }
.tr-uhr-buehne { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.tr-uhr-blatt-wrap { width: 100%; display: grid; place-items: center; touch-action: none; }
.alma-uhr-blatt { width: min(100%, 62vh); height: auto; max-width: 520px; cursor: grab; user-select: none; }
.tr-uhr-blatt-wrap:active .alma-uhr-blatt { cursor: grabbing; }
.tr-uhr-zieh { margin: 0; max-width: 46ch; text-align: center; color: var(--ink-soft); font-size: 14px; font-weight: 700; line-height: 1.5; }
.uhr-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.uhr-legende li { display: flex; align-items: center; gap: 9px; }
.uhr-legende-probe { display: block; border-radius: 999px; flex: 0 0 auto; }
.uhr-legende-stunde { width: 22px; height: 8px; }
.uhr-legende-minute { width: 38px; height: 5px; }
.uhr-legende-text { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.chat-uhr + .uhr-legende { margin-top: 10px; gap: 6px 16px; }
.chat-uhr + .uhr-legende .uhr-legende-text { font-size: 13px; }
.tr-uhr-seite { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 20px; }
.tr-uhr-ablesung { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.tr-uhr-digital { font-size: clamp(38px, 6vw, 60px); font-weight: 900; color: var(--sun); font-variant-numeric: tabular-nums; line-height: 1; }
.tr-uhr-gesprochen { font-size: clamp(17px, 2.4vw, 23px); font-weight: 900; color: var(--success); line-height: 1.3; }
.tr-uhr-schritte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-uhr-hinweis { margin: 0; text-align: center; color: var(--ink-soft); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
@media (max-width: 900px) {
  .tr-uhr-layout { grid-template-columns: 1fr; }
  .alma-uhr-blatt { max-width: 420px; }
}

.chat-bildreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; background: #171226; border: 1px solid #372E58; border-radius: 14px; padding: 14px 12px; margin-top: 6px; }
.chat-bildreihe figure { margin: 0; display: grid; justify-items: center; gap: 6px; width: 104px; }
.chat-bildreihe img { width: 88px; height: 88px; object-fit: contain; display: block; }
.chat-bildreihe figcaption { font-size: 12.5px; line-height: 1.35; color: #B9A8FF; text-align: center; }
.chat-grafik { display: grid; place-items: center; background: #171226; border: 1px solid #372E58; border-radius: 14px; padding: 14px 10px; margin-top: 6px; overflow-x: auto; }
.chat-grafik .alma-grafik-blatt { width: min(340px, 100%); display: block; }
.chat-uhr { display: grid; place-items: center; padding: 4px 0 2px; }
.chat-uhr .alma-uhr-blatt { width: min(240px, 68vw); cursor: default; }
.chat-uhr-ablesung { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }
.chat-uhr-digital { font-size: 25px; font-weight: 900; color: var(--sun); font-variant-numeric: tabular-nums; }
.chat-uhr-gesprochen { font-size: 15px; font-weight: 900; color: var(--success); text-align: right; }
.composer .wz.gesperrt { position: relative; opacity: .6; }
.composer .wz.gesperrt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; border-radius: 2px; background: var(--danger-deep); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; }
.composer .wz.gesperrt:hover { color: var(--ink-soft); border-color: var(--line); background: var(--card); }

.widget.diktat { --dk-bern: var(--sun); --dk-bern-ink: #1E1300; }
.widget.diktat .dk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.widget.diktat .dk-kopf .w-title { margin-bottom: 2px; }
.widget.diktat .dk-titel { font-weight: 800; font-size: 19px; line-height: 1.2; }
.widget.diktat .dk-perlen { display: inline-flex; gap: 6px; align-items: center; padding-top: 4px; }
.widget.diktat .dk-perlen i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(150,175,255,.45); }
.widget.diktat .dk-perlen i.voll { background: var(--success); border-color: var(--success); }
.widget.diktat .dk-perlen i.fehl { background: var(--dk-bern); border-color: var(--dk-bern); }
.widget.diktat .dk-perlen i.jetzt { border-color: var(--dk-bern); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-bern) 30%, transparent); }
.widget.diktat .dk-tempo { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid rgba(150,175,255,.28); border-radius: 12px; margin-bottom: 12px; }
.widget.diktat .dk-tempo button { border: 0; background: transparent; color: #9fb2df; padding: 7px 13px; border-radius: 9px; font: 800 13px/1.2 inherit; cursor: pointer; min-height: 36px; }
.widget.diktat .dk-tempo button.an { background: var(--success); color: #06201A; }
.widget.diktat .dk-heft { --zh: 40px; --gutter: 26px; position: relative; border: 1px solid rgba(150,175,255,.22); border-radius: 12px; padding: 0 16px 0 12px; background-color: rgba(0,0,0,.28); background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--zh) - 1px), rgba(150,175,255,.28) calc(var(--zh) - 1px) var(--zh)); background-origin: content-box; background-clip: content-box; font-size: 17px; line-height: var(--zh); }
.widget.diktat .dk-heft::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(12px + var(--gutter) + 6px); width: 1.5px; background: color-mix(in srgb, var(--dk-bern) 45%, transparent); }
.widget.diktat .dk-zl { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); gap: 14px; align-items: start; min-height: var(--zh); line-height: var(--zh); margin: 0; }
.widget.diktat .dk-nr { text-align: right; color: #9fb2df; font-size: 12px; font-weight: 800; line-height: var(--zh); }
.widget.diktat .dk-eingabe { display: block; width: 100%; height: var(--zh); border: 0; border-radius: 0; background: transparent; color: #eaf0ff; font-family: inherit; font-size: 17px; font-weight: 600; line-height: var(--zh); padding: 0; margin: 0; outline: none; box-shadow: inset 0 -2px 0 var(--dk-bern); }
.widget.diktat .dk-eingabe:focus { outline: none; box-shadow: inset 0 -2px 0 var(--dk-bern), 0 6px 18px -8px color-mix(in srgb, var(--dk-bern) 70%, transparent); }
.widget.diktat .dk-eingabe::placeholder { color: #9fb2df; font-style: italic; font-weight: 400; }
.widget.diktat .dk-eingabe.leer { animation: wShake .4s; }
.widget.diktat .dk-saetze { display: grid; gap: 10px; }
.widget.diktat .dk-satz { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(150,175,255,.22); background: rgba(0,0,0,.22); font-size: 16px; line-height: 1.5; }
.widget.diktat .dk-satz { --satz: #3A86FF; }
.widget.diktat .dk-satz:nth-child(5n+2) { --satz: #FF3D8B; }
.widget.diktat .dk-satz:nth-child(5n+3) { --satz: #22D3A6; }
.widget.diktat .dk-satz:nth-child(5n+4) { --satz: #FF9E2C; }
.widget.diktat .dk-satz:nth-child(5n+5) { --satz: #9B6BFF; }
.widget.diktat .dk-satz .dk-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--satz); color: #0B1020; display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; text-align: center; margin-top: 1px; }
.widget.diktat .dk-satz .dk-etikett { color: var(--satz); }
.widget.diktat .dk-heft .dk-zl:nth-child(5n+1) .dk-nr { color: #3A86FF; }
.widget.diktat .dk-heft .dk-zl:nth-child(5n+2) .dk-nr { color: #FF3D8B; }
.widget.diktat .dk-heft .dk-zl:nth-child(5n+3) .dk-nr { color: #22D3A6; }
.widget.diktat .dk-heft .dk-zl:nth-child(5n+4) .dk-nr { color: #FF9E2C; }
.widget.diktat .dk-heft .dk-zl:nth-child(5n+5) .dk-nr { color: #9B6BFF; }
.widget.diktat .dk-heft .dk-nr { font-size: 14px; }
.widget.diktat .dk-etikett { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fb2df; margin-bottom: 2px; }
.widget.diktat .dk-richtig { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success) 16%, transparent); color: #d4ffef; font-weight: 700; }
.widget.diktat .dk-richtig .dk-etikett { color: var(--success); }
.widget.diktat .dk-richtig-zeichen { color: var(--success); font-size: 13px; white-space: nowrap; }
.widget.diktat .dk-warum { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.widget.diktat .dk-warum li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--sun-soft); color: #FFD98A; }
.widget.diktat .dk-warum li b { white-space: nowrap; color: var(--dk-bern); }
.widget.diktat .dk-fehl { text-decoration: none; border-bottom: 3px solid var(--dk-bern); background: color-mix(in srgb, var(--dk-bern) 22%, transparent); padding: 0 4px; border-radius: 4px 4px 0 0; font-weight: 800; font-size: 1.15em; color: #fff; }
.widget.diktat .dk-geschrieben { font-size: 17px; }
.widget.diktat .dk-fehl.fehlt { opacity: .6; text-decoration: line-through; }
.widget.diktat .dk-hoer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.widget.diktat .dk-hoer button, .widget.diktat .dk-abschluss button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 1.5px solid rgba(150,175,255,.35); border-radius: 10px; background: transparent; color: #eaf0ff; font: 800 14px/1.2 inherit; cursor: pointer; }
.widget.diktat .dk-hoer button.dk-haupt, .widget.diktat .dk-abschluss button.dk-haupt { background: var(--dk-bern); border-color: var(--dk-bern); color: var(--dk-bern-ink); }
.widget.diktat .dk-hoer button.dk-weiter { margin-left: auto; border-color: var(--success); color: var(--success); }
.widget.diktat .dk-stand { display: inline-flex; align-items: center; gap: 10px; }
.widget.diktat .dk-noch { font-size: 13px; font-weight: 800; color: var(--dk-bern); letter-spacing: .04em; white-space: nowrap; }
.widget.diktat button:disabled { opacity: .5; cursor: default; }
.widget.diktat .dk-hinweis { margin-top: 8px; font-size: 13px; color: #9fb2df; }
.widget.diktat .dk-stimme { margin-top: 8px; }
.widget.diktat .dk-zaehler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.widget.diktat .dk-zaehler div { border: 1px solid rgba(150,175,255,.22); border-radius: 12px; padding: 10px 12px; }
.widget.diktat .dk-zaehler b { display: block; font-size: 22px; line-height: 1.1; color: var(--dk-bern); }
.widget.diktat .dk-zaehler b.null { color: var(--success); }
.widget.diktat .dk-zaehler span { font-size: 12.5px; color: #9fb2df; font-weight: 700; }
.widget.diktat .dk-lob { margin: 0 0 10px; }
.widget.diktat .dk-lob b { color: var(--success); }
.widget.diktat .dk-abschluss { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 520px) {
  .widget.diktat .dk-heft { --gutter: 18px; padding: 0 10px 0 8px; font-size: 15px; }
  .widget.diktat .dk-heft::before { left: calc(8px + var(--gutter) + 5px); }
  .widget.diktat .dk-zl { gap: 10px; }
  .widget.diktat .dk-eingabe { font-size: 15px; }
  .widget.diktat .dk-satz { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 8px 10px; font-size: 15px; }
  .widget.diktat .dk-zaehler b { font-size: 18px; }
  .widget.diktat .dk-hoer button { padding: 8px 10px; font-size: 13px; }
  .widget.diktat .dk-hoer { flex-wrap: nowrap; gap: 6px; }
  .widget.diktat .dk-hoer button { padding: 8px 9px; font-size: 13px; }
  .widget.diktat .dk-hoer button[data-hoer] span { display: none; }
  .widget.diktat .dk-hoer button.dk-haupt { flex: 1 1 auto; justify-content: center; }
  .widget.diktat .dk-hoer button.dk-weiter { margin-left: auto; flex: 0 0 auto; }
}

.widget.diktat.diktat-korrektur { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 4px 0 0 !important; }
.widget.diktat.diktat-korrektur::before { display: none; }
.widget.diktat .dk-abgegeben { display: flex; align-items: center; gap: 10px; color: #b9c6ee; font-size: 14px; }
.widget.diktat .dk-abgegeben svg { color: var(--success); flex: 0 0 auto; }
.widget.diktat .dk-erklaerung { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 15px; line-height: 1.5; }
.widget.diktat .dk-erklaerung .dk-etikett { color: #9fb2df; }
.widget.diktat .dk-merksatz { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--sun-soft); color: #FFD98A; font-size: 14.5px; line-height: 1.5; }
.widget.diktat .dk-merksatz b { color: var(--dk-bern); }
.widget.diktat .dk-schluss { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5; }
.chat-buehne-lauf .msg.assistant:has(.widget.diktat-korrektur) .assistant-inhalt > div:empty { display: none; }

.widget.diktat.diktat-korrektur .dk-saetze { gap: 0; }
.widget.diktat.diktat-korrektur .dk-satz { border: 0; background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid rgba(150,175,255,.22); }
.widget.diktat.diktat-korrektur .dk-satz:last-child { border-bottom: 0; }
.widget.diktat.diktat-korrektur .dk-richtig { margin-top: 6px; padding: 0; background: none; border: 0; color: #7CF2C9; font-weight: 700; font-size: 17px; }
.widget.diktat.diktat-korrektur .dk-erklaerung { margin-top: 8px; padding: 0; background: none; color: #eaf0ff; }
.widget.diktat.diktat-korrektur .dk-merksatz { margin-top: 6px; padding: 0; background: none; color: #FFD98A; }
.widget.diktat.diktat-korrektur .dk-kopf { margin-bottom: 4px; }
.widget.diktat.diktat-korrektur .dk-zaehler { margin: 14px 0 10px; }
@media (max-width: 520px) {
  .widget.diktat.diktat-korrektur .dk-satz { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .widget.diktat.diktat-korrektur .dk-geschrieben, .widget.diktat.diktat-korrektur .dk-richtig { font-size: 16px; }
  .widget.diktat .dk-zaehler { gap: 6px; }
  .widget.diktat .dk-zaehler div { padding: 8px 8px; }
  .widget.diktat .dk-zaehler span { font-size: 11px; }
}

.sidebar {
  --sb-ground: #171A38; --sb-block: #272B58; --sb-block-hover: #2E3266; --sb-edge: #0F1130; --sb-edge2: #3A3F78;
  --sb-text: #F2F3FF; --sb-mute: #9DA3CC;
  background: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.4px) 0 0 / 14px 14px, var(--sb-ground);
}
.sidebar .nav-sec {
  display: inline-block; align-self: flex-start; margin: 8px 0 6px 2px; padding: 3px 11px 4px; border-radius: 999px;
  background: var(--sb-chip, #FFA05C); color: #12142E; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.sidebar .brand + .nav-sec { padding-top: 3px; }
.sidebar > .nav-sec:nth-child(2 of .nav-sec) { --sb-chip: #5EE0A0; }
.sidebar > .nav-sec:nth-child(3 of .nav-sec) { --sb-chip: #B9A0FF; }

.sidebar .nav-item {
  min-height: 44px; margin-bottom: 6px; padding: 4px 10px; gap: 10px; border-radius: 14px;
  background: var(--sb-block); color: var(--sb-text); font-size: 14.5px; font-weight: 700;
  box-shadow: 0 4px 0 var(--sb-edge), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sidebar .nav-item::before { display: none; }
.sidebar .nav-item:hover {
  background: var(--sb-block-hover); color: #fff; transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--sb-edge), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.sidebar .nav-item:active { transform: translateY(4px); box-shadow: 0 0 0 var(--sb-edge); }
.sidebar .nav-item.active {
  background: var(--nc, #3A86FF); color: var(--ncf, #fff); transform: translateY(4px);
  box-shadow: 0 0 0 var(--sb-edge), inset 0 3px 0 rgba(0, 0, 0, .2);
}
.sidebar .nav-item:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sidebar .nav-item .ico, .sidebar .nav-item:not([style]) .ico {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--nc, rgba(255, 255, 255, .14)); color: var(--ncf, #fff);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.sidebar .nav-item.active .ico { background: rgba(255, 255, 255, .28); color: var(--ncf, #fff); box-shadow: none; }

.sidebar .nav-item[data-tour-nav="alma-ki"], .sidebar .nav-item[data-tour-nav="alma-ki"].active {
  min-height: 54px; margin: 10px 0 6px; border: none; background: #E8468F; color: #fff;
  font-size: 16px; font-weight: 900; transform: none;
  box-shadow: 0 6px 0 #9E2359, inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sidebar .nav-item[data-tour-nav="alma-ki"]:hover {
  background: #F0559A; transform: translateY(-1px);
  box-shadow: 0 7px 0 #9E2359, inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sidebar .nav-item[data-tour-nav="alma-ki"]:active, .sidebar .nav-item[data-tour-nav="alma-ki"].active {
  transform: translateY(6px); box-shadow: 0 0 0 #9E2359, inset 0 3px 0 rgba(0, 0, 0, .2);
}
.sidebar .nav-item[data-tour-nav="alma-ki"] .ico, .sidebar .nav-item[data-tour-nav="alma-ki"].active .ico {
  border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; box-shadow: none;
}

.sidebar .top-goal, .sidebar .top-goal.done {
  margin: 10px 2px 6px; padding: 11px 13px 10px; border-radius: 16px; background: var(--sb-block);
  box-shadow: 0 4px 0 var(--sb-edge), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sidebar .top-goal .tg-title, .sidebar .top-goal .tg-title svg { color: var(--sb-mute); }
.sidebar .top-goal .tg-count { color: #fff; }
.sidebar .top-goal .tg-bar {
  position: relative; height: 16px; border-radius: 5px; background: var(--sb-edge2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.sidebar .top-goal .tg-bar div, .sidebar .top-goal.done .tg-bar div { border-radius: 0; background: #3DD68C; box-shadow: inset 0 -3px 0 #1F9A5E; }
.sidebar .top-goal .tg-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc((100% + 5px) / 6 - 5px), var(--sb-block) calc((100% + 5px) / 6 - 5px) calc((100% + 5px) / 6));
}
.sidebar .top-goal .tg-note { color: var(--sb-mute); font-size: 12px; }
.sidebar .top-goal.done .tg-note, .sidebar .top-goal.done .tg-count { color: #7CF2C9; }

.sidebar .side-foot { margin-bottom: 12px; padding-top: 8px; border-top: 2px solid var(--sb-edge2); }
.sidebar .side-foot .nav-item, .sidebar .side-foot .nav-item:hover, .sidebar .side-foot .nav-item.active {
  min-height: 38px; margin-bottom: 0; padding: 3px 8px; border-radius: 10px;
  background: none; color: var(--sb-mute); font-size: 13.5px; font-weight: 700; box-shadow: none; transform: none;
}
.sidebar .side-foot .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar .side-foot .nav-item.active { color: #fff; background: rgba(255, 255, 255, .12); }
.sidebar .side-foot .nav-logout:hover { color: #fff; background: rgba(217, 4, 41, .28); }
.sidebar .side-foot .nav-item .ico, .sidebar .side-foot .nav-item:not([style]) .ico {
  width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--sb-mute); box-shadow: none;
}
.sidebar .side-foot .nav-item:hover .ico { color: #fff; }
.sidebar .side-foot .nav-item.active .ico { background: var(--nc, rgba(255, 255, 255, .2)); color: var(--ncf, #fff); }

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item, .sidebar .nav-item:hover, .sidebar .nav-item[data-tour-nav="alma-ki"]:hover { transition: none; transform: none; }
}