:root {
  --surface-page: #fcf6f2; --surface-card: #fff; --surface-subtle: #f5ece6;
  --brand-plum: #3d2c5e; --brand-plum-dark: #2e1f4a;
  --action-coral: #c4766a; --action-coral-dark: #b05f54;
  --text-secondary: #5a4a58; --border-default: #e8d8d0;
  --status-success: #6ea090; --status-success-subtle: #e5f0ec; --status-warning-subtle: #fff4d7;
  --shadow-card: 0 2px 8px rgba(61,44,94,.07);
  --shadow-floating: 0 8px 24px rgba(61,44,94,.12);
}
* { box-sizing: border-box; }
html { background: var(--surface-page); color: var(--brand-plum-dark); font-family: "DM Sans", sans-serif; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--surface-page); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--action-coral) 55%, transparent); outline-offset: 2px; }
.topbar { min-height: 84px; padding: 18px clamp(16px,4vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border-default); background: var(--surface-card); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--brand-plum); color: var(--surface-card); font-size: 1.25rem; font-weight: 700; box-shadow: var(--shadow-card); }
.eyebrow, .section-label { margin: 0; color: var(--action-coral-dark); font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 2px 0 0; color: var(--brand-plum); font-size: 1.25rem; line-height: 1.75rem; }
.viewer { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: .875rem; }
.viewer form { margin: 0; }
main { padding: 28px clamp(16px,4vw,48px) 48px; }
.release-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 20px; padding: 22px 24px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.release-overview h2 { margin: 4px 0 0; color: var(--brand-plum); font-size: 1.35rem; line-height: 1.8rem; }
.release-targets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.target { min-width: 160px; padding: 10px 12px; border-radius: 12px; background: var(--surface-subtle); }
.target strong, .target span { display: block; }
.target strong { font-size: .875rem; line-height: 1.25rem; text-transform: capitalize; }
.target span { margin-top: 2px; color: var(--text-secondary); font-size: .75rem; line-height: 1rem; }
.target.warning { background: var(--status-warning-subtle); }
/* Nacharbeit nach dem Rollout je Kita (kibly#2018). */
.nacharbeit-strip { margin-bottom: 20px; padding: 22px 24px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.nacharbeit-kitas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 14px; }
.nacharbeit-kita { min-width: 0; padding: 14px; border-radius: 14px; background: var(--surface-subtle); }
.nacharbeit-kita.has-open { background: var(--status-warning-subtle); }
.nacharbeit-kita header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.nacharbeit-kita header strong { color: var(--brand-plum-dark); font-size: .95rem; text-transform: capitalize; }
.nacharbeit-kita header span { color: var(--text-secondary); font-size: .75rem; }
.nacharbeit-kita header .count { margin-left: auto; background: var(--surface-card); }
.nacharbeit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nacharbeit-task { min-width: 0; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); overflow-wrap: anywhere; }
.nacharbeit-task-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.nacharbeit-task-head strong { color: var(--brand-plum-dark); font-size: .9rem; }
.nacharbeit-copy, .nacharbeit-workflow, .nacharbeit-lauf { margin: 6px 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.25rem; }
.nacharbeit-inputs { margin: 4px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: .8rem; line-height: 1.25rem; }
.nacharbeit-strip code { padding: 1px 4px; border-radius: 4px; background: var(--surface-subtle); color: var(--brand-plum-dark); font-size: .78rem; }
.nacharbeit-strip a { color: var(--action-coral-dark); font-weight: 650; }
.nacharbeit-none { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.nacharbeit-warning { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--status-warning-subtle); color: var(--brand-plum-dark); font-size: .8rem; line-height: 1.25rem; }
.nacharbeit-kitas > .nacharbeit-warning { grid-column: 1 / -1; }
.nacharbeit-erledigt { margin-top: 10px; color: var(--text-secondary); font-size: .8rem; }
.nacharbeit-erledigt summary { min-height: 32px; padding: 6px 0; color: var(--action-coral-dark); cursor: pointer; font-weight: 650; }
.nacharbeit-erledigt ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.nacharbeit-erledigt li span { display: block; }
.nacharbeit-skeleton { height: 96px; }
.controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.search-field { position: relative; flex: 1 1 280px; min-width: 200px; }
.search-field svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; fill: none; stroke: var(--text-secondary); stroke-width: 2; }
.search-field input { width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--brand-plum-dark); }
.filter-group { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border-radius: 14px; background: var(--surface-subtle); }
.filter, .quiet-button, .secondary-button { min-height: 44px; border: 0; border-radius: 10px; color: var(--brand-plum); cursor: pointer; font-weight: 650; }
.filter { padding: 8px 13px; background: transparent; white-space: nowrap; }
.filter.active { background: var(--action-coral); color: var(--surface-card); }
.author-field, .sort-field { display: grid; gap: 2px; min-width: 160px; color: var(--text-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.author-field select, .sort-field select { min-height: 44px; padding: 8px 34px 8px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--brand-plum-dark); text-transform: none; cursor: pointer; }
.sort-field { min-width: 170px; }
.quiet-button { padding: 8px 12px; background: transparent; color: var(--action-coral-dark); }
.secondary-button { padding: 8px 14px; border: 1px solid var(--border-default); background: var(--surface-card); }
.summary { min-height: 24px; margin-bottom: 12px; color: var(--text-secondary); font-size: .875rem; }
.board { display: grid; grid-template-columns: repeat(5,minmax(180px,1fr)); gap: 14px; overflow-x: auto; padding: 2px 2px 20px; scroll-snap-type: x proximity; }
.column { min-width: 180px; min-height: 360px; padding: 14px; border: 1px solid var(--border-default); border-radius: 18px; background: color-mix(in srgb,var(--surface-subtle) 68%,var(--surface-card)); scroll-snap-align: start; }
.column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 10px; }
.column-header h2 { margin: 0; color: var(--brand-plum); font-size: .95rem; line-height: 1.3rem; }
.count { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: var(--surface-card); color: var(--text-secondary); font-size: .75rem; text-align: center; }
.cards { display: grid; gap: 10px; }
.issue-card { display: block; width: 100%; padding: 14px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-card); color: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-card); }
.issue-card:hover { border-color: var(--action-coral); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.issue-number { color: var(--text-secondary); font-size: .8rem; font-weight: 650; }
.category { padding: 4px 8px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-size: .72rem; font-weight: 700; }
.category.bug { background: color-mix(in srgb,var(--action-coral) 18%,var(--surface-card)); color: var(--action-coral-dark); }
.category.enhancement { background: color-mix(in srgb,var(--brand-plum) 11%,var(--surface-card)); color: var(--brand-plum); }
.issue-card h3 { margin: 0; overflow-wrap: anywhere; color: var(--brand-plum-dark); font-size: .95rem; line-height: 1.35rem; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; color: var(--text-secondary); font-size: .75rem; line-height: 1rem; }
.testable { color: var(--status-success); font-weight: 700; }
.reviewed { color: var(--status-success); font-weight: 700; }
.open-hint { padding: 4px 8px; border-radius: 999px; background: var(--status-warning-subtle); color: var(--brand-plum-dark); font-weight: 700; }
.detail-section.open-hint-section { background: var(--status-warning-subtle); }
.mobile-badge { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb,var(--brand-plum) 11%,var(--surface-card)); color: var(--brand-plum); font-weight: 700; }
.skeleton { height: 118px; border-radius: 14px; background: linear-gradient(90deg,var(--surface-card),var(--surface-subtle),var(--surface-card)); background-size: 220% 100%; animation: pulse 1.4s ease-in-out infinite; }
.empty-state, .error-state { max-width: 560px; margin: 36px auto; padding: 28px; border-radius: 18px; background: var(--surface-card); text-align: center; box-shadow: var(--shadow-card); }
.empty-state h2, .error-state h2 { margin: 0 0 6px; color: var(--brand-plum); font-size: 1.1rem; }
.empty-state p, .error-state p { margin: 0; color: var(--text-secondary); }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-card { width: min(100%,430px); padding: 32px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-floating); }
.login-card h1 { margin-top: 10px; font-size: 1.5rem; }
.login-copy { color: var(--text-secondary); line-height: 1.55; }
.primary-button { display: flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 22px; border-radius: 12px; background: var(--action-coral); color: var(--surface-card); font-weight: 700; text-decoration: none; }
.primary-button:hover { background: var(--action-coral-dark); }
.privacy-note { margin: 18px 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.35rem; }
.issue-dialog { width: min(760px,calc(100% - 32px)); max-height: min(88vh,900px); padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); color: var(--brand-plum-dark); box-shadow: 0 20px 48px rgba(46,31,74,.18); }
.issue-dialog::backdrop { background: rgba(46,31,74,.42); }
.dialog-shell { max-height: min(88vh,900px); overflow-y: auto; }
.dialog-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-card); }
.dialog-header h2 { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--brand-plum); font-size: 1.25rem; line-height: 1.7rem; }
.dialog-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--surface-subtle); color: var(--brand-plum); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.dialog-body { padding: 20px 24px 24px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 18px; color: var(--text-secondary); font-size: .8rem; line-height: 1.1rem; }
.status-badge { padding: 5px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--brand-plum); font-weight: 700; }
.status-badge.reviewed { background: var(--status-success-subtle); color: var(--status-success); }
.review-button { min-height: 44px; margin-bottom: 4px; padding: 10px 14px; border: 1px solid var(--status-success); border-radius: 12px; background: var(--surface-card); color: var(--status-success); cursor: pointer; font-weight: 700; }
.review-button.is-reviewed { background: var(--status-success-subtle); }
.review-button:disabled { cursor: wait; opacity: .65; }
.review-message { min-height: 20px; margin: 4px 0 14px; color: var(--text-secondary); font-size: .8rem; }
.mobile-delivery .detail-copy { margin: 0 0 14px; }
.mobile-choice { display: grid; gap: 6px; margin-top: 12px; }
.mobile-choice > span { color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
.choice-group { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-subtle); }
.choice-button { min-height: 44px; flex: 1 1 120px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--brand-plum); cursor: pointer; font-weight: 700; }
.choice-button.active { background: var(--action-coral); color: var(--surface-card); }
.choice-button:disabled { cursor: wait; opacity: .65; }
.detail-section { margin-top: 14px; padding: 16px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-page); }
.detail-section h3 { margin: 0 0 8px; color: var(--brand-plum); font-size: .95rem; line-height: 1.35rem; }
.detail-copy { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); font-size: .9rem; line-height: 1.5rem; }
.review-steps { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: var(--text-secondary); font-size: .9rem; line-height: 1.5rem; }
.review-source { margin: 12px 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: .72rem; line-height: 1.1rem; }
.detail-loading { display: grid; gap: 12px; }
.detail-loading .skeleton { height: 140px; }
.detail-error p { margin: 0; color: var(--text-secondary); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.secondary-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--brand-plum); font-weight: 700; text-decoration: none; }
.nutzung-controls { flex-wrap: wrap; justify-content: flex-end; margin-bottom: 0; }
.nutzung-scroll { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.nutzung-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.nutzung-table th, .nutzung-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: top; }
.nutzung-table thead th { position: sticky; top: 0; background: var(--surface-card); color: var(--brand-plum); }
.nutzung-table tbody tr:last-child > * { border-bottom: 0; }
.nutzung-table tbody th[scope="row"] { min-width: 200px; }
.nutzung-group th { padding-top: 16px; background: var(--surface-subtle); color: var(--action-coral-dark); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nutzung-kita, .nutzung-funktion { display: block; font-weight: 700; }
.nutzung-operator, .nutzung-vorgang { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.nutzung-monatlich { color: var(--brand-plum); font-weight: 700; }
.nutzung-cell { min-width: 150px; }
.nutzung-cell strong { display: block; color: var(--brand-plum-dark); font-size: 1.05rem; }
.nutzung-cell span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .75rem; }
.nutzung-cell .status-badge { display: inline-block; margin-top: 6px; }
.nutzung-zero strong { color: var(--action-coral-dark); }
.nutzung-none { color: var(--text-secondary); }
.nutzung-note { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes pulse { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@media (max-width: 760px) {
  .topbar { align-items: flex-start; padding: 14px 16px; }
  .viewer { align-items: flex-end; flex-direction: column; gap: 2px; }
  main { padding: 18px 16px 36px; }
  .release-strip { align-items: stretch; flex-direction: column; padding: 18px; }
  .nacharbeit-strip { padding: 18px; }
  .release-targets { justify-content: flex-start; }
  .target { min-width: min(100%,170px); flex: 1 1 140px; }
  .controls { align-items: stretch; flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .filter-group { flex: 1 1 auto; flex-wrap: wrap; overflow-x: visible; }
  .author-field, .sort-field { flex: 1 1 180px; }
  .secondary-button { flex: 0 0 auto; }
  .board { margin-right: -16px; grid-template-columns: repeat(5,minmax(calc(100vw - 48px),1fr)); }
  .issue-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .dialog-shell { max-height: calc(100dvh - 24px); }
  .dialog-header { padding: 18px 16px 14px; }
  .dialog-body { padding: 16px; }
}
@media (max-width: 360px) {
  .brand-mark { width: 40px; height: 40px; }
  .viewer #viewer-name { display: none; }
  .filter { padding-inline: 11px; }
}
/* Plattformanalyse: Kontenaktivität (ADR-0080). Ordinale Pflaumen-Rampe für
   Nutzungstage, geprüft mit dem Paletten-Validator (--ordinal, hellste Stufe
   2,55:1 gegen die Kartenfläche). */
.konten-section { --tage-1: #a99cc4; --tage-2: #7b69a3; --tage-3: #5a4682; --tage-4: #3d2c5e; --meter-track: #ece7f3; --verlauf-linie: #a99cc4; margin-bottom: 24px; }
.konten-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; }
.konten-head h2, .nutzung-heading { margin: 4px 0 0; color: var(--brand-plum); font-size: 1.1rem; line-height: 1.5rem; }
.nutzung-heading { margin: 0 0 12px; }
.konten-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: .75rem; }
.konten-legend li { display: flex; align-items: center; gap: 6px; }
.tage-swatch { width: 12px; height: 12px; border-radius: 3px; }
.tage-1 { background: var(--tage-1); } .tage-2 { background: var(--tage-2); } .tage-3 { background: var(--tage-3); } .tage-4 { background: var(--tage-4); }
.konten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.konten-karte { min-width: 0; padding: 18px 18px 12px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.konten-karte header h3 { margin: 0; color: var(--brand-plum-dark); font-size: 1rem; line-height: 1.4rem; }
.konten-karte header p { margin: 2px 0 10px; color: var(--text-secondary); font-size: .75rem; }
.konten-scroll { overflow-x: auto; }
.konten-tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; }
.konten-tabelle th, .konten-tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: top; }
.konten-tabelle thead th { color: var(--text-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.konten-tabelle tbody tr:last-child > * { border-bottom: 0; }
.konten-tabelle tbody th { color: var(--brand-plum); font-weight: 700; }
.konten-cell { min-width: 120px; }
.konten-cell strong { display: block; color: var(--brand-plum-dark); font-size: 1.05rem; }
.konten-cell > span, .konten-aktiv span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .75rem; }
.konten-leer strong { color: var(--text-secondary); }
.konten-meter { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--meter-track); }
.konten-meter > span { display: block; height: 100%; margin: 0; border-radius: 3px; background: var(--tage-3); }
.konten-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.konten-verlauf { flex: 0 0 auto; overflow: visible; }
.konten-verlauf polyline { fill: none; stroke: var(--verlauf-linie); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.konten-verlauf .verlauf-einzel { fill: var(--verlauf-linie); }
.konten-verlauf .verlauf-ende { fill: var(--tage-4); stroke: var(--surface-card); stroke-width: 2; }
.tip-ziel { fill: transparent; cursor: default; outline: none; }
.tip-ziel.tip-aktiv, .tip-ziel:focus-visible { fill: color-mix(in srgb, var(--brand-plum) 8%, transparent); }
.tage-balken { display: flex; gap: 2px; height: 12px; margin-top: 6px; }
.tage-segment { min-width: 4px; height: 100%; }
.tage-segment:first-child { border-radius: 4px 0 0 4px; } .tage-segment:last-child { border-radius: 0 4px 4px 0; } .tage-segment:only-child { border-radius: 4px; }
.tage-segment.tip-aktiv, .tage-segment:focus-visible { outline: 2px solid var(--brand-plum-dark); outline-offset: 1px; }
.konten-details { margin-top: 8px; color: var(--text-secondary); font-size: .8rem; }
.konten-details summary { min-height: 32px; padding: 6px 0; color: var(--action-coral-dark); cursor: pointer; font-weight: 650; }
.konten-werte { width: 100%; margin-bottom: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.konten-werte caption { padding: 4px 0; color: var(--brand-plum); font-weight: 700; text-align: left; }
.konten-werte th, .konten-werte td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border-default); text-align: left; white-space: nowrap; }
.viz-tooltip { position: absolute; z-index: 20; display: grid; gap: 2px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); box-shadow: var(--shadow-floating); pointer-events: none; font-size: .75rem; }
.viz-tooltip strong { color: var(--brand-plum-dark); font-size: .9rem; }
.viz-tooltip span { color: var(--text-secondary); }
.viz-tooltip[hidden] { display: none; }
/* Plattformanalyse: Verbreitung, Tiefe, vernachlässigte Funktionen und Trend
   (ADR-0080, Phase 5). Eine Reihe je Diagramm, deshalb keine Kategorienfarben:
   Linie in der dunkelsten Pflaumenstufe, Release-Wechsel als Annotation in
   Koralle, Untergrenzen als neutrale Fläche. */
.auswertung-stand { margin: 0; color: var(--text-secondary); font-size: .8rem; }
.trend-section .auswertung-stand { margin-bottom: 8px; }
.rangliste-karte { margin-bottom: 14px; }
.rangliste-karte header p { max-width: 760px; }
.rangliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: rang; }
.rangliste > li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 8px 44px; border: 1px solid var(--border-default); border-radius: 14px; counter-increment: rang; }
.rangliste > li::before { content: counter(rang); position: absolute; top: 12px; left: 12px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--brand-plum); font-size: .75rem; font-weight: 700; }
.rangliste > li.rangliste-leer { padding: 12px; color: var(--text-secondary); font-size: .875rem; }
.rangliste > li.rangliste-leer::before { content: none; }
.rangliste-gruende { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.grund-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--action-coral) 14%, var(--surface-card)); color: var(--action-coral-dark); font-size: .72rem; font-weight: 650; }
.rangliste-ungenutzt { margin: 0; color: var(--text-secondary); font-size: .75rem; }
.rangliste-trend { align-self: flex-start; min-height: 32px; margin-left: -12px; font-size: .8rem; }
.auswertung-table tbody th[scope="row"] { min-width: 220px; }
.auswertung-table td:last-child { width: 1%; white-space: nowrap; }
.trend-cell strong { font-variant-numeric: tabular-nums; }
.trend-fallend strong { color: var(--action-coral-dark); }
.trend-auswahl { flex: 0 1 360px; }
.trend-auswahl select { width: 100%; }
.trend-legend { margin-bottom: 10px; }
.trend-swatch { width: 14px; height: 12px; border-radius: 2px; }
.trend-swatch-linie { height: 3px; background: var(--tage-4); }
.trend-swatch-release { width: 0; height: 14px; border-left: 2px dashed var(--action-coral-dark); border-radius: 0; }
.trend-swatch-untergrenze { background: var(--surface-subtle); border: 1px solid var(--border-default); }
.trend-chart { min-height: 172px; }
.trend-svg { display: block; overflow: visible; }
.trend-grid { stroke: var(--border-default); stroke-width: 1; }
.trend-achse { fill: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.trend-untergrenze { fill: var(--surface-subtle); }
.trend-linie { fill: none; stroke: var(--tage-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trend-einzel { fill: var(--tage-4); }
.trend-ende { fill: var(--tage-4); stroke: var(--surface-card); stroke-width: 2; }
.trend-release { stroke: var(--action-coral-dark); stroke-width: 1.5; stroke-dasharray: 4 3; }
.trend-release-flagge { fill: var(--action-coral-dark); stroke: var(--surface-card); stroke-width: 1.5; }
.trend-release-text { fill: var(--brand-plum-dark); font-size: 11px; font-weight: 650; }
.trend-vergleich { margin: 6px 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.25rem; }
.trend-vergleich strong { color: var(--brand-plum-dark); }
.trend-leer { margin: 0; color: var(--text-secondary); }
/* Priorisierung: Umsetzungsreihenfolge links bzw. oben, Backlog daneben. */
.prio-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; gap: 20px; }
.prio-reihenfolge, .prio-offen { min-width: 0; padding: 22px 24px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.prio-reihenfolge { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.prio-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.prio-kopf h2 { margin: 4px 0 0; color: var(--brand-plum); font-size: 1.2rem; line-height: 1.6rem; }
.prio-status { min-height: 20px; margin: 4px 0 0; color: var(--text-secondary); font-size: .8rem; font-weight: 650; }
.prio-status.ok { color: var(--status-success); }
.prio-status.fehler { color: var(--action-coral-dark); }
.prio-hinweis { margin: 0 0 14px; color: var(--text-secondary); font-size: .8rem; line-height: 1.25rem; }
.prio-hinweis a { color: var(--action-coral-dark); font-weight: 650; }
.prio-hinweis code, .prio-warnung code { padding: 1px 4px; border-radius: 4px; background: var(--surface-subtle); color: var(--brand-plum-dark); font-size: .75rem; }
.prio-warnung { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--status-warning-subtle); color: var(--brand-plum-dark); font-size: .8rem; line-height: 1.25rem; }
.prio-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prio-drop { min-height: 72px; padding: 6px; border: 2px dashed transparent; border-radius: 14px; }
.prio-drop.ziel { border-color: var(--action-coral); background: var(--surface-subtle); }
.prio-leer { margin: -66px 0 0; padding: 18px 12px; color: var(--text-secondary); font-size: .85rem; text-align: center; pointer-events: none; }
.prio-eintrag { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 10px 10px 8px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); }
.prio-eintrag[draggable="true"] { cursor: grab; }
.prio-eintrag.zieht { opacity: .45; }
.prio-eintrag.ziel-vor::before, .prio-eintrag.ziel-nach::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--action-coral); }
.prio-eintrag.ziel-vor::before { top: -6px; }
.prio-eintrag.ziel-nach::after { bottom: -6px; }
.prio-eintrag.platziert { background: var(--surface-subtle); }
.prio-eintrag.erledigt { opacity: .7; }
.prio-platz { flex: 0 0 auto; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--brand-plum); color: var(--surface-card); font-size: .75rem; font-weight: 700; }
.prio-griff { flex: 0 0 auto; padding-top: 4px; color: var(--border-default); font-size: .9rem; letter-spacing: -2px; user-select: none; }
.prio-inhalt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.prio-titel { color: var(--brand-plum-dark); font-size: .875rem; font-weight: 600; line-height: 1.25rem; text-decoration: none; }
a.prio-titel:hover { text-decoration: underline; }
.prio-inhalt .meta { margin-top: 6px; }
.prio-badge { padding: 2px 8px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-weight: 650; white-space: nowrap; }
.prio-badge.kritisch { background: var(--action-coral); color: var(--surface-card); }
.prio-badge.epic { background: var(--brand-plum); color: var(--surface-card); }
.prio-badge.arbeit { background: var(--status-success-subtle); color: var(--brand-plum-dark); }
.prio-badge.mensch { background: var(--status-warning-subtle); color: var(--brand-plum-dark); }
.prio-badge.modul { background: transparent; border: 1px solid var(--border-default); }
.prio-aktionen { display: flex; flex: 0 0 auto; gap: 2px; }
.prio-knopf { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--brand-plum); cursor: pointer; font-size: 1rem; font-weight: 700; }
.prio-knopf:hover:not(:disabled) { background: var(--surface-subtle); }
.prio-knopf:disabled { color: var(--border-default); cursor: default; }
.prio-knopf.hinzu { border: 1px solid var(--border-default); color: var(--action-coral-dark); font-size: 1.25rem; }
.prio-platziert { align-self: center; padding: 0 6px; color: var(--text-secondary); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.prio-controls { flex-wrap: wrap; }
.prio-check { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand-plum-dark); font-size: .85rem; font-weight: 600; cursor: pointer; }
.prio-check input { width: 20px; height: 20px; accent-color: var(--action-coral); }
.prio-gruppen { display: grid; gap: 18px; }
.prio-art h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--brand-plum); font-size: 1rem; }
.prio-art h3 .count, .prio-modul summary .count { background: var(--surface-subtle); }
.prio-modul { margin-bottom: 8px; }
.prio-modul summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 2px; color: var(--brand-plum-dark); cursor: pointer; font-size: .9rem; font-weight: 650; }
.prio-modul .prio-liste { margin: 4px 0 6px; }
@media (max-width: 1000px) {
  .prio-main { grid-template-columns: minmax(0, 1fr); }
  .prio-reihenfolge { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .prio-reihenfolge, .prio-offen { padding: 16px; }
  .prio-eintrag { gap: 6px; padding: 8px 6px; }
  .prio-griff { display: none; }
  .prio-aktionen { flex-direction: column; }
  .prio-reihenfolge .prio-eintrag { flex-wrap: wrap; }
  .prio-reihenfolge .prio-inhalt { flex-basis: calc(100% - 40px); }
  .prio-reihenfolge .prio-aktionen { flex-direction: row; justify-content: flex-end; width: 100%; margin-top: -4px; }
}
/* Epics in der Priorisierung: Fortschritt, nächstes Sub-Issue, Wellen. */
.prio-epic { margin-top: 8px; }
.prio-fortschritt { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: .75rem; font-weight: 650; }
.prio-balken { flex: 1 1 auto; max-width: 180px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.prio-balken span { display: block; height: 100%; border-radius: inherit; background: var(--status-success); }
.prio-naechstes { margin: 6px 0 0; color: var(--brand-plum-dark); font-size: .8rem; line-height: 1.2rem; }
.prio-naechstes a { color: var(--action-coral-dark); font-weight: 650; }
.prio-subs summary { min-height: 36px; padding: 8px 0 4px; color: var(--action-coral-dark); cursor: pointer; font-size: .8rem; font-weight: 650; }
.prio-subliste { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.prio-welle { display: grid; gap: 4px; }
.prio-welle + .prio-welle { margin-top: 6px; }
.prio-welle-name { color: var(--text-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prio-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 6px; border-radius: 8px; background: var(--surface-subtle); font-size: .78rem; line-height: 1.15rem; }
.prio-sub[draggable="true"] { cursor: grab; }
.prio-sub.erledigt { opacity: .6; }
.prio-sub-status { flex: 0 0 104px; color: var(--text-secondary); font-weight: 650; white-space: nowrap; }
.prio-sub.bereit .prio-sub-status { color: var(--status-success); }
.prio-sub.blockiert .prio-sub-status { color: var(--action-coral-dark); }
.prio-sub-titel { flex: 1 1 180px; min-width: 0; color: var(--brand-plum-dark); text-decoration: none; overflow-wrap: anywhere; }
a.prio-sub-titel:hover { text-decoration: underline; }
.prio-knopf.klein { min-width: 44px; min-height: 44px; margin: -8px -4px -8px 0; color: var(--action-coral-dark); font-size: 1.1rem; }
.prio-eintrag.platziert .prio-sub { background: var(--surface-card); }
@media (max-width: 760px) {
  .prio-sub-status { flex-basis: 100%; }
}
/* Kibly Cockpit: gemeinsame Seitenleiste aller Module und Übersicht. */
:root { --portal-nav-width: 256px; }
.has-portal-nav { padding-left: var(--portal-nav-width); }
.has-portal-nav .topbar .brand-mark { display: none; }
.portal-nav { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; width: var(--portal-nav-width); padding: 18px 14px 14px; overflow-y: auto; background: var(--brand-plum); color: var(--surface-card); }
.portal-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 2px 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.portal-brand-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
.portal-mobile-brand .portal-brand-logo { width: 28px; height: 28px; margin-right: 10px; border-radius: 8px; }
.login-logo { display: block; width: 56px; height: 56px; border-radius: 16px; box-shadow: var(--shadow-card); }
.portal-brand strong { display: block; font-size: 1rem; line-height: 1.3rem; }
.portal-brand small { display: block; color: rgb(255 255 255 / .65); font-size: .75rem; line-height: 1rem; }
.portal-nav-body { display: grid; gap: 20px; margin-top: 22px; }
.portal-bereiche { display: grid; gap: 20px; }
.portal-group { display: grid; gap: 2px; }
.portal-group-label { margin: 0 0 4px; padding: 0 12px; color: rgb(255 255 255 / .6); font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: rgb(255 255 255 / .8); font-size: .9rem; font-weight: 650; text-decoration: none; }
.portal-link:hover { background: var(--brand-plum-dark); color: var(--surface-card); }
.portal-link[aria-current="page"] { background: var(--action-coral-dark); color: var(--surface-card); }
.portal-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.portal-nav-hinweis { margin: 0; padding: 0 12px; color: rgb(255 255 255 / .7); font-size: .8rem; }
.portal-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 12px 4px 0 12px; border-top: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .75); font-size: .85rem; overflow-wrap: anywhere; }
.portal-nav-foot form { margin: 0; }
.portal-nav-foot button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--surface-card); cursor: pointer; font-weight: 650; }
.portal-nav-foot button:hover { background: var(--brand-plum-dark); }
.portal-nav :focus-visible { outline-color: var(--surface-card); }
.portal-mobilebar, .portal-close, .portal-scrim { display: none; }
@media (max-width: 1023px) {
  .has-portal-nav { padding-left: 0; }
  .portal-mobilebar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 16px 6px 6px; background: var(--brand-plum); color: var(--surface-card); }
  .portal-menu-button, .portal-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
  .portal-menu-button .portal-icon, .portal-close .portal-icon { width: 22px; height: 22px; }
  .portal-mobilebar :focus-visible { outline-color: var(--surface-card); }
  .portal-mobile-brand { min-height: 44px; display: flex; align-items: center; padding: 0 6px; color: inherit; font-weight: 700; text-decoration: none; }
  .portal-nav { width: min(86vw, 300px); box-shadow: 0 20px 48px rgba(46,31,74,.18); transform: translateX(-105%); transition: transform .2s ease; }
  .portal-nav.open { transform: none; }
  .portal-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 35; display: block; background: rgb(46 31 74 / .4); }
}
@media (prefers-reduced-motion: reduce) { .portal-nav { transition: none; } }
.portal-stand { margin: 0; color: var(--text-secondary); font-size: .875rem; }
.portal-kopf-rechts { display: flex; align-items: center; gap: 16px; }
.portal-kennzahlen { display: grid; gap: 28px; }
.portal-kpi-gruppe .section-label { margin-bottom: 12px; }
.portal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.portal-kpi { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 124px; padding: 16px 18px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface-card); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); }
a.portal-kpi:hover { border-color: var(--action-coral); }
.portal-kpi.achtung { background: var(--status-warning-subtle); }
.portal-kpi-label { color: var(--text-secondary); font-size: .8rem; line-height: 1.1rem; font-weight: 650; }
.portal-kpi-value { color: var(--brand-plum); font-size: 1.75rem; line-height: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.portal-kpi-value.klein { font-size: 1.35rem; }
.portal-kpi-meta { color: var(--text-secondary); font-size: .8rem; line-height: 1.15rem; overflow-wrap: anywhere; }
.portal-kpi-skeleton { height: 54px; }
@media (max-width: 760px) {
  .has-portal-nav .topbar { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .portal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .portal-kpi { min-height: 0; padding: 14px; border-radius: 14px; }
  .portal-kpi-value { font-size: 1.4rem; line-height: 1.8rem; }
  .portal-kpi-value.klein { font-size: 1.2rem; line-height: 1.8rem; overflow-wrap: normal; }
  .portal-kpi:has(.portal-kpi-value.klein) { grid-column: 1 / -1; }
  .portal-kopf-rechts .portal-stand { display: none; }
}
/* Aufgaben-Kanban (Team). */
.auf-neu { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 12px; background: var(--action-coral-dark); color: var(--surface-card); cursor: pointer; font-weight: 700; white-space: nowrap; }
.auf-neu:hover { background: var(--brand-plum); }
.auf-neu:disabled { cursor: wait; opacity: .65; }
.auf-neu svg, .auf-spalte-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.auf-controls { flex-wrap: wrap; }
.auf-controls .search-field { flex: 1 1 220px; max-width: 360px; }
.auf-kopf-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.auf-status { min-height: 20px; margin: 0 0 10px; color: var(--text-secondary); font-size: .8rem; font-weight: 650; }
.auf-status.ok { color: var(--text-secondary); }
.auf-status.fehler { color: var(--action-coral-dark); }
.auf-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); align-items: start; gap: 14px; overflow-x: auto; padding: 2px 2px 20px; }
.auf-skeleton { height: 280px; border-radius: 18px; }
.auf-spalte { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 220px; padding: 12px; border: 1px solid var(--border-default); border-radius: 18px; background: color-mix(in srgb, var(--surface-subtle) 68%, var(--surface-card)); }
.auf-spalte.erledigt { background: color-mix(in srgb, var(--status-success-subtle) 60%, var(--surface-card)); }
.auf-spalte.ziel { border-color: var(--action-coral); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action-coral) 25%, transparent); }
.auf-spalte-kopf { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-left: 4px; }
.auf-spalte-kopf h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--brand-plum); font-size: .95rem; line-height: 1.3rem; }
.auf-spalte-plus { display: grid; width: 44px; height: 44px; margin: -4px -4px -4px auto; place-items: center; flex: 0 0 auto; border: 0; border-radius: 12px; background: transparent; color: var(--brand-plum); cursor: pointer; }
.auf-spalte-plus:hover { background: var(--surface-card); }
.auf-spalte-hinweis { margin: -6px 0 0; padding-left: 4px; color: var(--text-secondary); font-size: .75rem; line-height: 1rem; }
.auf-karten { display: grid; gap: 8px; min-height: 12px; margin: 0; padding: 0; list-style: none; }
.auf-karte { min-width: 0; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-card); cursor: grab; }
.auf-karte:hover { border-color: var(--action-coral); }
.auf-karte.gezogen { opacity: .4; }
.auf-karte-oeffnen { display: grid; gap: 4px; width: 100%; padding: 12px 14px 4px; border: 0; border-radius: 14px 14px 0 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.auf-karte-titel { overflow-wrap: anywhere; color: var(--brand-plum-dark); font-size: .92rem; line-height: 1.3rem; font-weight: 650; }
.auf-karte-notiz { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; white-space: pre-line; color: var(--text-secondary); font-size: .8rem; line-height: 1.15rem; }
.auf-karte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px 12px; color: var(--text-secondary); font-size: .75rem; line-height: 1rem; }
.auf-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.auf-person.offen { font-weight: 500; font-style: italic; }
.auf-avatar { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--brand-plum); color: var(--surface-card); font-size: .68rem; font-weight: 700; }
.auf-faellig { font-weight: 650; }
.auf-faellig.heute { color: var(--brand-plum); }
.auf-faellig.ueberfaellig { padding: 3px 8px; border-radius: 999px; background: var(--status-warning-subtle); color: var(--brand-plum-dark); }
.auf-archiv-hinweis { margin-left: auto; }
.auf-einfuege { height: 3px; margin: -2px 0; border-radius: 3px; background: var(--action-coral); }
.auf-leer { margin: 0; padding: 14px 8px; border: 1px dashed var(--border-default); border-radius: 14px; color: var(--text-secondary); font-size: .8rem; text-align: center; }
.auf-erneut { margin-top: 16px; }
.auf-dialog { width: min(620px, calc(100% - 32px)); }
.auf-form { display: grid; gap: 14px; }
.auf-feld { display: grid; gap: 4px; min-width: 0; color: var(--text-secondary); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.auf-feld input, .auf-feld textarea, .auf-feld select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--brand-plum-dark); font: inherit; font-size: .9rem; font-weight: 400; letter-spacing: 0; }
.auf-feld textarea { min-height: 112px; resize: vertical; line-height: 1.4rem; }
.auf-feld input[aria-invalid="true"] { border-color: var(--action-coral-dark); }
textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--action-coral) 55%, transparent); outline-offset: 2px; }
.auf-feldreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auf-meta { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.25rem; }
.auf-meta:empty { display: none; }
.auf-feldfehler { margin: -8px 0 0; color: var(--action-coral-dark); font-size: .8rem; font-weight: 650; }
.auf-dialog-actions { margin-top: 4px; }
.auf-loeschen { margin-left: auto; }
.auf-spaltenliste { display: grid; gap: 10px; margin: 16px 0 8px; padding: 0; list-style: none; }
.auf-spaltenzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
.auf-spaltenknoepfe { display: flex; gap: 4px; }
.auf-icon-button { width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--brand-plum); cursor: pointer; font-size: 1.05rem; font-weight: 700; }
.auf-icon-button:disabled { cursor: not-allowed; opacity: .4; }
.auf-spaltengrund { grid-column: 1 / -1; color: var(--text-secondary); font-size: .75rem; }
.auf-spaltengrund:empty { display: none; }
.auf-archiv-suche { display: block; margin: 14px 0; max-width: none; }
.auf-archivliste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.auf-archiveintrag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-page); }
.auf-archiveintrag div { display: grid; gap: 2px; min-width: 0; }
.auf-archiveintrag strong { overflow-wrap: anywhere; color: var(--brand-plum-dark); font-size: .9rem; }
.auf-archiveintrag span { color: var(--text-secondary); font-size: .78rem; }
@media (max-width: 760px) {
  .auf-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .auf-spalte { min-height: 0; }
  .auf-controls .search-field { max-width: none; flex-basis: 100%; }
  .auf-controls .filter-group { flex-wrap: nowrap; }
  .auf-controls .filter { padding: 8px 11px; }
  .has-portal-nav .topbar:has(.auf-kopf-aktionen) { flex-wrap: wrap; }
  .auf-kopf-aktionen { width: 100%; justify-content: stretch; }
  .auf-kopf-aktionen > * { flex: 1 1 auto; }
  .auf-kopf-aktionen .auf-neu { flex-basis: 100%; order: -1; }
  .auf-feldreihe { grid-template-columns: minmax(0, 1fr); }
  .auf-archiveintrag { flex-wrap: wrap; }
}
.auf-controls .filter.active { background: var(--action-coral-dark); border-color: var(--action-coral-dark); color: var(--surface-card); }