/*
 * intoCommerce Design – Fundament (F1).
 * Werte wörtlich aus docs/design/Ticketsystem.dc.html, docs/design/tokens/*.css und
 * docs/design/components/core/*.jsx. Siehe docs/design/inventar.md für die Zuordnung.
 * Kein Framework. Jede ic-Klasse bildet genau einen Baustein aus dem Inventar ab.
 */

/* --- Tokens (tokens/colors.css, typography.css, spacing.css) ------------------------------- */
:root {
    --purple: #6B39A3; --purple-80: #B57BF2; --purple-60: #DABDF7;
    --lime: #ACF53A; --mint: #D1F0EA; --mint-light: #E0F7F2;
    --white: #FFFFFF; --neutral-lightest: #F0F1F5; --neutral-lighter: #D2D6E1; --neutral-light: #A4ADC4; --neutral: #68779C; --neutral-dark: #4C5A7C; --neutral-darker: #313E5C; --neutral-darkest: #16213C;
    --warning: #FFD140; --success: #55EB3A; --info: #54D4FF; --error: #FF6B47;
    --text-primary: var(--neutral-darkest); --text-secondary: var(--neutral-dark); --text-muted: var(--neutral); --text-inverse: var(--white);
    --surface-page: var(--white); --surface-subtle: var(--neutral-lightest); --surface-mint: var(--mint-light); --surface-inverse: var(--neutral-darkest);
    --border-default: var(--neutral-darkest); --border-subtle: var(--neutral-lighter);
    --accent-primary: var(--purple); --accent-highlight: var(--lime);
    /* A1: Hintergrundton der hervorgehobenen @-Erwähnung (Markenfarbe, hell). */
    --ic-mention: var(--purple-60);

    /* U1 (Entscheidung Matthias 2026-10-04): Texte und Bedienelemente in der Systemschrift,
       Poppins nur für Überschriften und die Marke. --font-heading/--font-body bleiben als
       bestehende Namen erhalten und zeigen auf die neuen Werte. */
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Poppins', system-ui, sans-serif;
    --font-heading: var(--font-display); --font-body: var(--font-ui);
    --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
    --h1: 3.5rem; --h2: 3rem; --h3: 2.5rem; --h4: 2rem; --h5: 1.5rem; --h6: 1.25rem; --tagline: 1rem;
    --h1-m: 2.5rem; --h2-m: 2.25rem; --h3-m: 2rem; --h4-m: 1.5rem; --h5-m: 1.25rem; --h6-m: 1.125rem;
    --lh-h1: 1.2; --lh-h2: 1.2; --lh-h3: 1.2; --lh-h4: 1.3; --lh-h5: 1.4; --lh-h6: 1.4; --lh-text: 1.5;
    --text-large: 1.25rem; --text-medium: 1.125rem; --text-regular: 1rem; --text-small: 0.875rem; --text-tiny: 0.75rem;

    --radius-small: 6px; --radius-medium: 8px; --radius-large: 12px; --radius-panel: 24px;
    --border-width: 1px;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --shadow-page: 0 8px 24px rgba(22, 33, 60, .08);
}

/* --- Design-Tokens Ticket-Detail (T1, Briefing Abschnitt 0) ------------------------------- */
/* Verbindlich für die Pakete T1–T5. Präfix --ic-detail-*; --border/--hover sind neutral grau
   (kein Gelb). Alle Werte folgen dem 4-px-Raster; Zahlen in Stunden/Beträgen nutzen tabular-nums. */
:root {
    --border: var(--neutral-lighter);
    --hover: var(--neutral-lightest);
    --ic-detail-focus: var(--accent-primary);
    --ic-detail-text: var(--text-primary);
    --ic-detail-muted: var(--text-muted);

    --ic-detail-fs-title: 24px; --ic-detail-lh-title: 1.3; --ic-detail-fw-title: 600;
    --ic-detail-fs-heading: 14px; --ic-detail-lh-heading: 1.4; --ic-detail-fw-heading: 600;
    --ic-detail-fs-body: 14px; --ic-detail-lh-body: 1.55;
    --ic-detail-fs-label: 13px; --ic-detail-lh-label: 1.4; --ic-detail-fw-label: 500;
    --ic-detail-fs-control: 13px; --ic-detail-fw-control: 600;
    --ic-detail-fs-meta: 12px; --ic-detail-lh-meta: 1.4; --ic-detail-fw-meta: 500;

    --ic-detail-head-h: 56px;
    --ic-detail-control-h: 32px;
    --ic-detail-radius-control: 6px;
    --ic-detail-radius-card: 8px;
    --ic-detail-radius-pill: 999px;
    --ic-detail-pad-y: 24px;
    --ic-detail-pad-x: 32px;
    --ic-detail-gap-section: 32px;
    --ic-detail-gap-heading: 12px;
    --ic-detail-gap-cols: 40px;
}

/* --- Global (Skript-Block des Entwurfs, auf .ic-app gescoped für Vorrang vor app.css) ------ */
html,
body {
    margin: 0;
    padding: 0;
    background: #F0F1F5;
}

/* U1: Der Grundtext der Seite ist die Systemschrift (Poppins nur für Überschriften, s. u.). */
body {
    font-family: var(--font-ui);
}

.ic-app,
.ic-app * {
    box-sizing: border-box;
}

.ic-app {
    display: flex;
    height: 100vh;
    font-family: var(--font-ui);
    color: #16213C;
    background: #F0F1F5;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

/* U1: Überschriften und Marke behalten Poppins (--font-display), alles andere nutzt die
   Systemschrift. Die Regel greift nur für h1–h3; Board-Spaltenköpfe sind keine Überschriften
   und bleiben deshalb in der Systemschrift. */
.ic-app h1,
.ic-app h2,
.ic-app h3,
.ic-page-title,
.ic-block__title,
.ic-detail__title,
.ic-topbar__name,
.ic-login__hero,
.ic-login__eyebrow {
    font-family: var(--font-display);
}

/* Allgemeine Linkfarbe aus dem Entwurf. :where() hält die Spezifität bei 0,0,1, damit Komponenten
   (Navigation, Buttons, Benutzerblock, Pillen) ihre eigene Textfarbe behalten. */
:where(.ic-app) a {
    color: #6B39A3;
}

:where(.ic-app) a:hover {
    color: #16213C;
}

/* Grundschrift/-farbe der Formularelemente aus dem Entwurf. :where() hält die Spezifität niedrig,
   damit Komponenten (Buttons, Demo-Karten, Navigation) ihre eigene Textfarbe behalten. */
:where(.ic-app) input,
:where(.ic-app) select,
:where(.ic-app) textarea,
:where(.ic-app) button {
    font: inherit;
    color: #16213C;
}

.ic-app ::placeholder {
    color: #68779C;
}

/* --- Seitenleiste ------------------------------------------------------------------------- */
.ic-sidebar {
    width: 248px;
    flex: none;
    background: #16213C;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    gap: 24px;
    overflow: auto;
}

.ic-sidebar__logo {
    padding: 0 8px;
}

.ic-sidebar__logo img {
    height: 26px;
    display: block;
}

.ic-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-sidebar__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #A4ADC4;
    padding: 0 8px 6px;
}

/* Projektbutton (aktiv/inaktiv) – <a> statt <button>, gleiche Optik. */
.ic-nav-project {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.ic-nav-project:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ic-nav-project--active {
    font-weight: 600;
    background: #313E5C;
}

.ic-nav-project--active:hover {
    background: #313E5C;
}

.ic-nav-project__badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: #DABDF7;
    color: #16213C;
    flex: none;
}

.ic-nav-project--active .ic-nav-project__badge {
    background: #ACF53A;
}

.ic-nav-project__name {
    flex: 1;
    text-align: left;
}

/* Projektlogo (P1): ersetzt das Kürzel-Badge, quadratisch wie dieses. */
.ic-project-badge {
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    flex: none;
}

/* Abschnitt "Projektlogo" in den Projekt-Einstellungen (P1). */
.ic-logo-settings {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ic-logo-settings__upload {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-logo-settings__preview {
    display: flex;
    align-items: center;
}

/* Navigationseintrag (aktiv/inaktiv). */
.ic-nav-item {
    display: block;
    text-align: left;
    border: none;
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}

.ic-nav-item:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ic-nav-item--active {
    color: #16213C;
    background: #ACF53A;
    font-weight: 600;
}

.ic-nav-item--active:hover {
    color: #16213C;
    background: #ACF53A;
}

/* Ansichten des aktiven Projekts (Q1), eingerückt unter dem Projektbutton: dünne senkrechte Linie
   links, kleinere Schrift. Aktiver Eintrag wie die übrigen Navigationseinträge markiert. */
.ic-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 20px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.ic-nav-subitem {
    display: block;
    text-align: left;
    border-radius: 6px;
    padding: 5px 10px;
    color: #fff;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

.ic-nav-subitem:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ic-nav-subitem--active {
    color: #16213C;
    background: #ACF53A;
    font-weight: 600;
}

.ic-nav-subitem--active:hover {
    color: #16213C;
    background: #ACF53A;
}

/* Benutzerblock unten. */
.ic-user {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #313E5C;
    border-radius: 12px;
    padding: 14px;
}

.ic-user__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #A4ADC4;
}

.ic-user__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ic-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ACF53A;
    color: #16213C;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ic-user__meta {
    line-height: 1.3;
}

.ic-user__name {
    font-weight: 500;
}

.ic-user__role {
    font-size: 12px;
    color: #D2D6E1;
}

.ic-user__logout,
.ic-user__link {
    display: block;
    text-align: left;
    border: none;
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}

.ic-user__logout:hover,
.ic-user__link:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Aktiver Eintrag im Benutzerblock (API-Tokens), wie die aktiven Navigationseinträge. */
.ic-user__link--active {
    background: #ACF53A;
    color: #16213C;
    font-weight: 600;
}

/* --- Hauptfläche -------------------------------------------------------------------------- */
.ic-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Seitenkopf. */
.ic-topbar {
    height: 64px;
    flex: none;
    background: #fff;
    border-bottom: 1px solid #D2D6E1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
}

.ic-topbar__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ic-topbar__name {
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
}

.ic-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ic-search {
    flex: 1;
    max-width: 420px;
    margin-left: auto;
}

.ic-search input {
    width: 100%;
    height: 40px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    background: #F0F1F5;
    outline: none;
}

.ic-search input:focus {
    border-color: #6B39A3;
    background: #fff;
}

/* Inhaltsfläche. */
.ic-page {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Kinder dürfen nicht schrumpfen, sonst werden Karten mit overflow:hidden abgeschnitten
   und die Seite lässt sich nicht scrollen. */
.ic-page > * {
    flex-shrink: 0;
}

.ic-page--bare {
    align-items: center;
    /* "safe": zu hoher Inhalt beginnt oben und bleibt scrollbar, statt oben abgeschnitten zu werden. */
    justify-content: safe center;
}

/* Seitenkopf im Inhalt. */
.ic-page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ic-page-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.ic-page-sub {
    color: #4C5A7C;
    font-size: 13px;
}

/* --- Button (components/core/Button.jsx) -------------------------------------------------- */
.ic-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius-small);
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
}

.ic-btn--primary {
    background: #6B39A3;
    color: #fff;
    border: 1px solid #6B39A3;
}

.ic-btn--secondary {
    background: transparent;
    color: #16213C;
    border: 1px solid #16213C;
}

.ic-btn--highlight {
    background: #ACF53A;
    color: #16213C;
    border: 1px solid #ACF53A;
}

.ic-btn--ghost {
    background: transparent;
    color: #6B39A3;
    border: 1px solid transparent;
}

.ic-btn--sm {
    padding: 6px 14px;
    font-size: 14px;
}

.ic-btn--md {
    padding: 10px 20px;
    font-size: 16px;
}

.ic-btn--lg {
    padding: 14px 28px;
    font-size: 18px;
}

.ic-btn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* --- Badge (components/core/Badge.jsx) ---------------------------------------------------- */
.ic-badge {
    display: inline-block;
    background: #F0F1F5;
    color: #16213C;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 10px;
    border-radius: 6px;
}

.ic-badge--neutral { background: #F0F1F5; }
.ic-badge--purple { background: #DABDF7; }
.ic-badge--mint { background: #D1F0EA; }
.ic-badge--warning { background: #FFD140; }
.ic-badge--success { background: #55EB3A; }
.ic-badge--info { background: #54D4FF; }
.ic-badge--error { background: #FF6B47; }

/* Tag-Chip. */
.ic-tag {
    background: #F0F1F5;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
}

/* Status-Chip. */
.ic-status {
    background: #F0F1F5;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    height: 22px;
}

.ic-status--first { background: #F0F1F5; }
.ic-status--mid { background: #DABDF7; }
.ic-status--question { background: #FFE9A8; }
.ic-status--last { background: #D1F0EA; }

/* Intern-Kennzeichnung. */
.ic-intern {
    background: #FFD140;
    color: #16213C;
    border-radius: 999px;
    padding: 0 8px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

/* @-Erwähnung im Kommentar (A1): Pille im Marken-Ton, klickbar ohne Wirkung. */
.ic-mention {
    background: var(--ic-mention);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* Versteckte mentions[]-Felder je Kommentarformular (A1). */
.ic-mention-fields {
    display: none;
}

/* Vorschlagsliste des @-Erwähnens (A1): unter dem Cursor positioniert, max. 8 Zeilen sichtbar. */
.ic-mention-popup {
    position: fixed;
    z-index: 40;
    min-width: 220px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-page);
}

.ic-mention-popup__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.ic-mention-popup__option--active {
    background: var(--surface-subtle);
}

.ic-mention-popup__name {
    font-weight: 500;
}

.ic-mention-popup__role {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
}

.ic-mention-popup__empty {
    padding: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Typ-Punkt. */
.ic-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
    background: #A4ADC4;
}

.ic-dot--bug { background: #FF6B47; }
.ic-dot--story { background: #6B39A3; }
.ic-dot--task { background: #54D4FF; }

/* Avatar (klein). */
.ic-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F0F1F5;
    color: #16213C;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* --- Eingabefeld (components/core/Input.jsx) ---------------------------------------------- */
.ic-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #16213C;
}

.ic-input {
    font-family: inherit;
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid #D2D6E1;
    border-radius: 6px;
    color: #16213C;
    outline-color: #54D4FF;
}

.ic-input--error {
    border: 1px solid #FF6B47;
}

.ic-field__error {
    color: #FF6B47;
    font-size: 12px;
}

/* Auswahl. */
.ic-select {
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
}

/* Mehrfachauswahl (Filter Status/Tags): zeigt mehrere Zeilen und scrollt, statt auf die Höhe eines
   Einfach-Selects (eine Zeile) begrenzt zu sein. */
.ic-select[multiple] {
    height: auto;
    min-height: 132px;
    padding: 6px 10px;
}

/* --- Karte (components/core/Card.jsx) ----------------------------------------------------- */
.ic-card {
    background: var(--white);
    color: #16213C;
    border: 1px solid #16213C;
    border-radius: var(--radius-large);
    padding: 24px;
    font-family: var(--font-body);
}

.ic-card--subtle { background: #F0F1F5; border: none; }
.ic-card--mint { background: #E0F7F2; border: none; }
.ic-card--inverse { background: #16213C; color: #fff; border: none; }
.ic-card--small { border-radius: 6px; }
.ic-card--medium { border-radius: 8px; }

/* --- Tabelle (Ticketliste) ---------------------------------------------------------------- */
.ic-table {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    overflow: hidden;
}

.ic-table__head {
    display: grid;
    gap: 12px;
    padding: 10px 16px;
    background: #F0F1F5;
    font-size: 12px;
    font-weight: 600;
    color: #4C5A7C;
    letter-spacing: .04em;
}

.ic-table__row {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #F0F1F5;
    cursor: pointer;
}

.ic-table__row:hover {
    background: #F7F8FB;
}

/* --- Abschnitt (Backlog) ------------------------------------------------------------------ */
.ic-section {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    overflow: hidden;
}

.ic-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #F0F1F5;
    flex-wrap: wrap;
}

/* --- Board -------------------------------------------------------------------------------- */
.ic-board-column {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: #E6E8F0;
    min-height: 200px;
}

.ic-board-card {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.ic-board-card:hover {
    border-color: #16213C;
}

/* Die Karte ist ein Link auf die Ticketseite; die Linkfarbe der App wird zurückgenommen,
   damit die Karte wie im Entwurf aussieht. */
.ic-app a.ic-board-card,
.ic-app a.ic-board-card:hover {
    color: #16213C;
    text-decoration: none;
}

.ic-board {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

.ic-board-column__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 4px;
}

.ic-board-column__name {
    font-weight: 600;
    font-size: 14px;
}

.ic-board-column__count {
    background: #fff;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
}

/* "Gesperrt"-Pille des Entwurfs. */
.ic-board-column__locked {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: #FFD140;
    border-radius: 999px;
    padding: 1px 10px;
}

.ic-board-column__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 40px;
}

/* B1: Bündel eines Übergeordneten (Jira-Stil). Leicht abgesetzter Block in der Spalte, davor die
   Kopfzeile mit Schlüssel und Titel des Übergeordneten. */
.ic-board-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
    border-radius: 12px;
    background: #F0F1F5;
}

.ic-board-group__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 4px;
    min-width: 0;
    font-size: 12px;
    color: #4C5A7C;
    text-decoration: none;
}

/* Die Kopfzeile ist ein Link auf das Übergeordnete; die Linkfarbe der App wird zurückgenommen. */
.ic-app a.ic-board-group__head,
.ic-app a.ic-board-group__head:hover {
    color: #4C5A7C;
    text-decoration: none;
}

.ic-app a.ic-board-group__head:hover .ic-board-group__title {
    text-decoration: underline;
}

.ic-board-group__key {
    font-weight: 600;
    color: #16213C;
    white-space: nowrap;
}

.ic-board-group__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-board-group__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

/* Zieh-Zustände aus dem Entwurf: gesperrte Spalte schraffiert, erlaubtes Ziel grün. */
.ic-board-column--locked {
    background: repeating-linear-gradient(135deg, #F0F1F5, #F0F1F5 8px, #E4E6EE 8px, #E4E6EE 16px);
    opacity: .65;
}

.ic-board-column--target {
    background: #E0F7F2;
}

.ic-board-card__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

/* Z2: Tags und Alter-Badge in einer Zeile. Das Badge darf nicht schrumpfen oder umbrechen
   (.ic-chip--age, flex: 0 0 auto), die Zeile bricht bei Platzmangel um; lange Tags werden
   abgeschnitten statt über den Kartenrand zu laufen. */
.ic-board-card__tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.ic-board-card__tags .ic-tag {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-board-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4C5A7C;
}

.ic-board-card__key {
    font-weight: 500;
    color: #16213C;
}

.ic-board-card__assignee {
    margin-left: auto;
}

/* Projektname klein auf der Karte des projektübergreifenden Boards (G4). */
.ic-board-card__project {
    color: #7A86A6;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Dichter Modus ab mehr als 6 Spalten (Jira-ähnlich): 10 Spalten passen ohne Querscrollen;
   siehe docs/design/abweichungen.md. */
.ic-board--dense {
    gap: 8px;
    overflow-x: auto;
}

.ic-board--dense .ic-board-column {
    flex: 1 1 0;
    min-width: 128px;
    padding: 6px;
    gap: 6px;
}

.ic-board--dense .ic-board-column__name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ic-board--dense .ic-board-column__count {
    font-size: 10.5px;
}

.ic-board--dense .ic-board-column__cards {
    gap: 6px;
}

.ic-board--dense .ic-board-group {
    gap: 4px;
    padding: 4px;
}

.ic-board--dense .ic-board-group__head {
    font-size: 10.5px;
    gap: 4px;
}

.ic-board--dense .ic-board-group__cards {
    gap: 6px;
}

.ic-board--dense .ic-board-card {
    padding: 8px;
    gap: 6px;
}

.ic-board--dense .ic-board-card__title {
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ic-board--dense .ic-board-card__tags {
    gap: 4px;
}

.ic-board--dense .ic-tag {
    font-size: 10.5px;
    padding: 0 6px;
}

.ic-board--dense .ic-board-card__foot {
    font-size: 10.5px;
    gap: 6px;
}

/* Z2: kleineres Badge in der dichten Tag-Zeile; flex: 0 0 auto bleibt, damit es nicht schrumpft. */
.ic-board--dense .ic-chip--age {
    font-size: 10.5px;
    height: 18px;
    padding: 0 6px;
}

.ic-board--dense .ic-board-card__assignee.ic-avatar {
    width: 18px;
    height: 18px;
    font-size: 8px;
}

/* Schmalerer Seitenrand nur auf Seiten mit dichtem Board. */
.ic-page:has(.ic-board--dense) {
    padding: 12px;
}

/* Filterzusammenfassung eines eigenen Boards (G4): kleine Chips im Kopf. */
.ic-chip {
    display: inline-flex;
    align-items: center;
    background: #F0F1F5;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    color: #4C5A7C;
}

/* Board-Kopf: nur noch der Umschalter Sprint/Alle offenen (Mitarbeiter). Das Filtern übernimmt
   seit F2 die gemeinsame Filterleiste (.ic-filter) unter dem Kopf. */
.ic-page-head__titles {
    display: flex;
    flex-direction: column;
}

.ic-board-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Der Umschalter ist im Board ein Link (ohne JS); die Linkfarbe der App wird zurückgenommen. */
.ic-app a.ic-seg,
.ic-app a.ic-seg:hover {
    color: #16213C;
}

.ic-app a.ic-seg--active,
.ic-app a.ic-seg--active:hover {
    color: #fff;
}

.ic-board-filter__sep {
    width: 1px;
    height: 24px;
    background: #D2D6E1;
}

/* B1: kleine Beschriftung vor dem Gruppierungs-Umschalter. */
.ic-board-filter__label {
    font-size: 12px;
    color: #4C5A7C;
}

/* F3: Hinweis statt aktiver Markierung am Umschalter, wenn ein Sprintfilter gesetzt ist. */
.ic-board-filter__hint {
    font-size: 12px;
    font-weight: 600;
    color: #4C5A7C;
    background: #F0F1F5;
    border-radius: 6px;
    padding: 2px 10px;
}

.ic-board-filter__form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ic-board-filter__form .ic-input--sm {
    width: 90px;
}

.ic-board-filter__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F0F1F5;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
}

/* Punkt im Toast (Entwurf). */
.ic-toast__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: #ACF53A;
}

.ic-toast__dot--error {
    background: #FF6B47;
}

/* --- Modal / Drawer / Toast --------------------------------------------------------------- */
.ic-modal {
    position: absolute;
    inset: 0;
    background: rgba(22, 33, 60, .45);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ic-modal__dialog {
    background: #fff;
    border-radius: 16px;
    width: min(520px, 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ic-modal__title {
    font-size: 20px;
    font-weight: 600;
}

.ic-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(640px, 100%);
    background: #fff;
    z-index: 21;
    box-shadow: -8px 0 32px rgba(22, 33, 60, .2);
    display: flex;
    flex-direction: column;
}

.ic-toast {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 50;
    background: #16213C;
    color: #fff;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(560px, 90%);
    box-shadow: 0 8px 24px rgba(22, 33, 60, .3);
}

/* --- Kommentarblase ----------------------------------------------------------------------- */
.ic-comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F0F1F5;
    border: 1px solid transparent;
}

.ic-comment--internal {
    background: #FFF8DD;
    border: 1px solid #FFD140;
}

.ic-comment__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* --- Leerzustand -------------------------------------------------------------------------- */
.ic-empty {
    padding: 32px;
    text-align: center;
    color: #68779C;
}

.ic-empty--small {
    padding: 20px 16px;
    font-size: 13px;
    border-top: 1px solid #F0F1F5;
    text-align: left;
}

/* --- Flash-Meldungen (nicht im Entwurf; Farben exakt aus den Tokens) ----------------------- */
/* P4c: als deutlicher Kasten – der Einladungslink muss gut sichtbar sein (Radius 12 wie die
   Karten des Entwurfs). */
.ic-flash {
    padding: 14px 16px;
    border-radius: 12px;
    background: #F0F1F5;
    color: #16213C;
    font-size: 14px;
    font-weight: 500;
}

.ic-flash--success { background: var(--success); }
.ic-flash--error { background: var(--error); }
.ic-flash--warning { background: var(--warning); }

/* --- Kommentar-Thread (P1db) -------------------------------------------------------------- */
/* Werte wörtlich aus dem Entwurf (Kommentarblase, Antwortformular); Einrückung je Ebene 36px,
   Ebene 3 ohne weitere Einrückung. */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-list--nested {
    margin-left: 36px;
}

.comment-list--nested .comment-list--nested {
    margin-left: 0;
}

.comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F0F1F5;
    border: 1px solid transparent;
}

.comment-internal {
    background: #FFF8DD;
    border: 1px solid #FFD140;
}

.comment__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Marker am Kommentar: Innenabstand der Entwurfsmarke (0 10px). */
.comment .ic-intern {
    padding: 0 10px;
}

.comment__author {
    font-weight: 600;
}

.comment__time,
.comment__edited {
    color: #4C5A7C;
}

.comment__body {
    white-space: pre-wrap;
}

.comment__lock {
    margin-left: auto;
    display: flex;
}

.comment__lock-btn {
    border: none;
    background: none;
    padding: 0;
    color: #6B39A3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.comment__lock-btn:hover {
    color: #16213C;
}

/* Stift (F10): wie das Schloss, aber in --neutral; schiebt sich ohne Schloss nach rechts. */
.comment__edit-btn {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
    color: var(--neutral);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.comment__edit-btn:hover {
    color: #6B39A3;
}

/* Steht der Stift neben dem Schloss (das sich per margin-left:auto nach rechts schiebt), bleibt er direkt daneben. */
.comment__lock ~ .comment__edit-btn {
    margin-left: 0;
}

.comment__actions {
    display: flex;
}

.comment__reply-toggle {
    border: none;
    background: none;
    padding: 0;
    color: #6B39A3;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.comment__reply-toggle:hover {
    text-decoration: underline;
}

.comment__reply-slot:empty {
    display: none;
}

.comment__reply-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 36px;
}

.comment__reply-input {
    border: 1px solid #6B39A3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    outline: none;
}

.comment__reply-visibility {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
    font-size: 13px;
    align-self: flex-start;
}

.comment__reply-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.comment__reply-cancel {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #D2D6E1;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.comment__reply-send {
    height: 32px;
    padding: 0 16px;
    border: none;
    background: #6B39A3;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.comment__reply-send:hover {
    background: #16213C;
}

/* Bearbeiten-Formular (F10): Abstand wie das Antwortformular, Buttons im Stil von Speichern/Abbrechen. */
.comment-edit {
    margin-left: 36px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-edit__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* --- Rich-Text-Editor und -Darstellung (P7, F6: CKEditor 5) -------------------------------- */
/* CKEditor wird über seine CSS-Variablen an die Tokens angepasst: Rand --border-subtle
   (#D2D6E1), Radius 8px (--radius-medium), Fokusrand --info (#54D4FF), Schrift Poppins,
   Editierfläche mind. 120px hoch. Werkzeugleiste flach und ruhig (weißer Grund, feine Trennlinie,
   kein Schatten); die alten Tiptap-Klassen (ic-editor__*) werden nicht mehr gebraucht. */
.ic-editor {
    --ck-border-radius: var(--radius-medium);
    --ck-color-base-border: var(--border-subtle);
    --ck-color-base-background: #fff;
    --ck-color-focus-border: var(--info);
    --ck-font-face: var(--font-body);
    --ck-color-toolbar-background: #fff;
    --ck-color-toolbar-border: var(--border-subtle);
    --ck-color-button-default-hover-background: var(--neutral-lightest);
    --ck-color-button-on-background: var(--accent-primary);
    --ck-color-button-on-color: #fff;
    --ck-icon-size: 16px;
}

/* V1: Die Werkzeugleiste gilt für alle Editoren, steht im normalen Fluss (kein schwebendes
   Sticky-Panel) und bricht bei zu wenig Platz in eine zweite Zeile um, statt Elemente ins
   Überlaufmenü (⋮) zu schieben. Je Zeile 36 px, Icons 16 px, Klickfläche 32 px. */
.ic-editor .ck.ck-editor__top .ck.ck-toolbar {
    box-shadow: none;
    min-height: 36px;
    padding: 2px;
}

.ic-editor .ck.ck-editor__top .ck.ck-button {
    min-height: 32px;
    min-width: 32px;
}

.ic-editor .ck.ck-editor__main > .ck-editor__editable {
    min-height: 120px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #16213C;
}

.ic-editor .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    box-shadow: none;
    outline: none;
}

/* Das Antwortfeld des Entwurfs hat einen lila Rahmen (#6B39A3). */
.comment__reply-form .ic-editor {
    --ck-color-base-border: #6B39A3;
}

/* Darstellung gespeicherter Formatierungen (Kommentarblase, Ticketbeschreibung). */
/* U1: Absätze mit 12 px Luft nach unten, Listen mit 24 px Einzug und 4 px zwischen den Punkten. */
.ic-richtext p {
    margin: 0 0 12px;
}

.ic-richtext p + p {
    margin-top: 0;
}

/* Listen (F6): Einzug und engere Abstände, ohne die Aufzählungszeichen zu verlieren. */
.ic-richtext ul,
.ic-richtext ol {
    margin: 0;
    padding-left: 24px;
}

.ic-richtext li + li {
    margin-top: 4px;
}

/* U1: Fließtext (Beschreibung, Kommentare) 14 px mit Zeilenhöhe 1,6. */
.ic-desc,
.ic-richtext,
.comment__body {
    font-size: 14px;
    line-height: 1.6;
}

.ic-richtext img {
    max-width: 100%;
    height: auto;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    vertical-align: top;
}

.ic-richtext code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--neutral-lightest);
    border-radius: 4px;
    padding: 1px 4px;
}

/* HTML-Inhalte dürfen keine Leerzeilen aus dem Quelltext übernehmen. */
.comment__body.ic-richtext,
.ticket-description.ic-richtext {
    white-space: normal;
}

/* --- Barrierefreiheit (Utility) ------------------------------------------------------------ */
/* Nur für assistive Technik sichtbar. Wird von den Ticketformularen für die Beschriftung von
   Feldern genutzt, deren sichtbarer Text aus dem Entwurf (Platzhalter) kommt. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Ticketansicht (F2) -------------------------------------------------------------------- */
/* Werte wörtlich aus dem Entwurf (Detail-Drawer und Neu-anlegen-Fenster). Die Ticketseite ist
   eine eigene Seite statt eines Overlays, daher ist die Fläche eine Karte mit Rand/Radius; alle
   Innenmaße (Kopf, Raster, Blöcke) sind unverändert übernommen. */
.ic-detail {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    /* T1: Breite des Briefings. Die Seite ist keine Overlay-Fläche; der Inhalt scrollt im
       .ic-page, die Kopfzeile bleibt per position:sticky stehen. */
    width: min(1180px, 96vw);
    margin-inline: auto;
    /* overflow:visible statt hidden: die rechte Spalte klebt beim Scrollen (position:sticky),
       ein overflow:hidden auf der Karte würde sie einsperren. Die Kartenfläche bleibt durch den
       border-radius gerundet, der Kopf trägt den Radius selbst. */
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* U1: Texte der Ticketseite ohne zusätzliche Laufweite (Sperrungen bleiben den Marken-Labels
   vorbehalten) und Zahlen/Stunden mit fester Ziffernbreite. */
.ic-detail {
    letter-spacing: normal;
}

.ic-detail .ic-booking {
    font-variant-numeric: tabular-nums;
}

/* Kopfzeile: 56 px, sticky, 1 px Linie darunter. Links Key + Typ (+ gekürzter Titel beim
   Scrollen), rechts die Aktionen (Status, Zuweisen, Link kopieren, Mehr, Schließen). */
/* Hotfix: Der Scroller (.ic-page) hatte 24 px Innenabstand oben; der Kopfbalken klebt erst darunter,
   durch die 24 px lief beim Scrollen der Inhalt sichtbar durch. Auf der Ticketseite entfällt der
   Innenabstand oben, der Abstand sitzt als Rand an der Karte (scrollt mit weg). */
.ic-page:has(.ic-detail) {
    padding-top: 0;
    /* Sprungmarken landen nicht unter dem klebenden Kopf. */
    scroll-padding-top: calc(var(--ic-detail-head-h) + 8px);
}

.ic-detail {
    margin-top: 24px;
}

/* Sprungziele innerhalb der Ticketseite halten Abstand zum klebenden Kopf. */
.ic-detail [id] {
    scroll-margin-top: calc(var(--ic-detail-head-h) + 8px);
}

.ic-detail__head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ic-detail-head-h);
    padding: 0 var(--ic-detail-pad-x);
    background: #fff;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border);
}

.ic-detail__key {
    font-size: var(--ic-detail-fs-control);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ic-detail__type {
    color: var(--ic-detail-muted);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

/* Gekürzter Titel beim Scrollen (vom ticket-header-Controller eingeblendet). */
.ic-detail__head-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ic-detail-text);
    max-width: 40%;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-detail__head-title[hidden] {
    display: none;
}

.ic-detail__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Textaktion der Kopfzeile (z. B. "Zuweisen"). */
.ic-detail__action {
    display: inline-flex;
    align-items: center;
    height: var(--ic-detail-control-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    background: #fff;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.ic-detail__action:hover {
    background: var(--hover);
}

/* Icon-Aktion der Kopfzeile (Link kopieren, Mehr). */
.ic-detail__icon {
    width: var(--ic-detail-control-h);
    height: var(--ic-detail-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--ic-detail-radius-card);
    background: var(--hover);
    color: var(--ic-detail-text);
    cursor: pointer;
}

.ic-detail__icon:hover {
    background: var(--neutral-lighter);
}

.ic-detail__close {
    width: var(--ic-detail-control-h);
    height: var(--ic-detail-control-h);
    flex: none;
    border: none;
    background: var(--hover);
    border-radius: var(--ic-detail-radius-card);
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ic-detail-text);
    text-decoration: none;
}

.ic-detail__close:hover {
    background: var(--neutral-lighter);
    color: var(--ic-detail-text);
}

.ic-detail__action:focus-visible,
.ic-detail__icon:focus-visible,
.ic-detail__close:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-detail__body {
    padding: var(--ic-detail-pad-y) var(--ic-detail-pad-x);
    display: flex;
    flex-direction: column;
    gap: var(--ic-detail-pad-y);
}

.ic-detail__title {
    font-size: var(--ic-detail-fs-title);
    font-weight: var(--ic-detail-fw-title);
    line-height: var(--ic-detail-lh-title);
    margin: 0;
}

/* Zwei Spalten unter dem Kopf: links Hauptteil, rechts das 340-px-Details-Panel. Die rechte
   Spalte klebt beim Scrollen unter der Kopfzeile (position:sticky; align-self:start). */
.ic-detail__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--ic-detail-gap-cols);
    align-items: start;
}

.ic-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--ic-detail-gap-section);
    min-width: 0;
    /* Bezugsrahmen für das Drag-Overlay der Anhänge (T5). */
    position: relative;
}

/* Details-Panel (T2): eine Karte (Rand/Radius/Padding 0) in der rechten Spalte, auf Desktop
   unter der Kopfzeile klebend, intern scrollbar. Die Gruppen sind ein Accordion. */
.ic-detail__aside {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-card);
    min-width: 0;
    position: sticky;
    top: calc(var(--ic-detail-head-h) + 16px);
    align-self: start;
    max-height: calc(100vh - 88px);
    overflow: auto;
}

/* Unter 900px eine Spalte: das Details-Panel steht oberhalb der Aktivität. */
@media (max-width: 900px) {
    .ic-detail__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .ic-detail__aside {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
    }
}

/* Eigenschaftszeilen des Details-Panels (T2): Grid 112px/1fr, Zeilenhöhe mind. 40 px. */
.ic-props {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.ic-props__row {
    display: grid;
    /* W1: Wertspalte flexibel (minmax(0, 1fr)), damit sie bei 340 px Panelbreite die volle Breite
       nutzt und der Inline-Edit-Wert nicht mehr auf Inhaltsbreite zusammenschrumpft. */
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 40px;
    padding: 8px 16px;
}

.ic-props__label {
    color: var(--ic-detail-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding-top: 3px;
}

.ic-props__value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
}

.ic-props__value--tags {
    gap: 6px;
}

.ic-props__value--assignee {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* W1: Der Inline-Edit-Wert nutzt die volle Wertspalte. Als Flex-Kind zog er sich sonst auf die
   Inhaltsbreite zusammen (Priorität "Showstopper" und "Sprint hinzufügen" brachen um). */
.ic-props__value > .ic-inline {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.ic-props__text {
    font-size: 14px;
    line-height: 1.5;
    min-width: 0;
}

.ic-props__text--empty {
    color: var(--ic-detail-muted);
}

.ic-props__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-props__input {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: #16213C;
    background: #fff;
    outline: none;
}

/* Block (Überschrift + Inhalt), z. B. Beschreibung, Verknüpfungen, Kommentare. */
.ic-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-block--tight {
    gap: 6px;
}

.ic-block__title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.ic-block__empty {
    color: #68779C;
    font-size: 13px;
}

/* Aufwandskasten (nur für Mitarbeiter). U1: keine gelbe Fläche mehr – der Inhalt liegt auf der
   normalen Panel-Fläche, die interne Kennzeichnung sitzt als Badge an der Gruppenüberschrift. */
.ic-effort {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ic-effort__row {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.ic-effort__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: #4C5A7C;
    min-width: 0;
}

.ic-effort__spent {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #16213C;
    font-variant-numeric: tabular-nums;
}

/* Schätzung: Eingabe 110px, ohne sichtbare Speichern-Schaltfläche (der Rückfall liegt im noscript). */
.ic-effort__estimate {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ic-effort__estimate input {
    width: 110px;
    min-width: 0;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

.ic-bar {
    flex: 1 1 100%;
    min-width: 0;
    height: 8px;
    background: #E3E6EE;
    border-radius: 999px;
    overflow: hidden;
}

.ic-bar__fill {
    height: 100%;
    background: #6B39A3;
}

/* Ampel des Aufwandsbalkens (M6): grün < 80 %, gelb 80–100 %, rot > 100 %. */
.ic-bar__fill--ok { background: #55EB3A; }
.ic-bar__fill--warn { background: #FFD140; }
.ic-bar__fill--over { background: #FF6B47; }

/* Buchungszeile (W1): erste Zeile "Datum · Name" links, Stunden rechts bündig in einer Zeile ohne
   Umbruch; darunter (falls vorhanden) die Notiz, 12 px gedämpft, höchstens zwei Zeilen mit Ellipsis
   (der volle Text steht im title). Das Herkunfts-Badge ist entfallen (die Daten `source` bleiben im
   Modell). Zeilenabstand über Padding 8 px 0, dazwischen eine 1-px-Trennlinie. */
.ic-booking {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.4;
}

.ic-booking + .ic-booking {
    border-top: 1px solid var(--border);
}

.ic-booking__main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.ic-booking__meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.ic-booking__date {
    color: var(--ic-detail-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ic-booking__sep {
    color: var(--ic-detail-muted);
}

.ic-booking__hours {
    margin-left: auto;
    flex: none;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ic-booking__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ic-detail-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ic-booking__user {
    color: var(--ic-detail-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Negativer Rest (M6): über der Schätzung gebucht. */
.ic-effort__rest--negative { color: #FF6B47; font-variant-numeric: tabular-nums; }

/* Buchungsformular (U1): Datum + Stunden in einer Zeile, Notiz darunter, "Buchen" über die volle
   Breite. Alle Felder mindestens 36 px hoch und umbruchfähig, damit rechts nichts abgeschnitten wird. */
.ic-effort__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ic-effort__form-row {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.ic-effort__form-row > input {
    height: 36px;
    min-width: 0;
    box-sizing: border-box;
}

.ic-effort__form-row > input[type=date] {
    flex: 1 1 140px;
}

.ic-effort__form-row > input[type=number] {
    flex: 0 0 96px;
}

.ic-effort__form > input[type=text] {
    width: 100%;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
}

.ic-effort__form > button {
    width: 100%;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #16213C;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.ic-effort__form > button:hover {
    background: #6B39A3;
}

/* Buchungsliste (U1/W1): höchstens drei Einträge, der Rest hinter "Alle anzeigen". Die Zeilen
   tragen ihren Abstand selbst (Padding 8 px 0), daher kein zusätzlicher gap. */
.ic-effort__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.ic-effort__more {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ic-effort__more > summary {
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    line-height: 1.4;
    color: #6B39A3;
}

.ic-effort__more > summary::-webkit-details-marker {
    display: none;
}

/* Moco-Hinweis im Aufwand-Block (U1): eine Zeile, mit Link zu den Moco-Einstellungen des Projekts. */
.ic-effort__moco-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #4C5A7C;
}

/* U1: dezenter Speicherhinweis (12 px, verschwindet nach 1,5 s) und Ladezustand beim Auto-Speichern. */
.ic-saved {
    font-size: 12px;
    line-height: 1.4;
    color: #2E7D32;
}

.ic-saved[hidden] {
    display: none;
}

.ic-saving {
    opacity: .6;
    pointer-events: none;
}

/* Kleine Eingabe/Auswahl im Detail (height 36/32 aus dem Entwurf). */
.ic-input--sm {
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: #16213C;
    outline: none;
}

.ic-select--sm {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: #16213C;
}

/* Statuswechsel im Eigenschaftsraster (F2/P2c): Pille, dann Select und Absenden-Button.
   Der Entwurf schaltet per JS um; der Button ist der Weg ohne JS. */
.ic-status-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sektion "Verknüpfungen" (T5): Kopf mit "+", Leerzustand ohne Formular, Einträge als Zeilen. */
.ic-links__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-links__add {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ic-detail-radius-control);
    background: none;
    color: var(--ic-detail-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ic-links__add:hover {
    background: var(--hover);
}

.ic-links__add:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-links__empty {
    margin: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--ic-detail-muted);
}

.ic-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Verknüpfungszeile (40 px): Typ-Label 12 px gedämpft, Key 13 px/600, Titel 14 px, Status-Badge. */
.ic-link-row {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
    padding: 0 10px;
    background: #F0F1F5;
    border-radius: 8px;
}

.ic-link-row__label {
    color: var(--ic-detail-muted);
    font-size: 12px;
    width: 140px;
    flex: none;
}

.ic-link-row__key {
    font-weight: 600;
    flex: none;
}

.ic-link-row__title {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-link-row__status {
    flex: none;
}

.ic-link-row__remove {
    flex: none;
    margin-left: 4px;
}

.ic-link-row__remove button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--ic-detail-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}

.ic-link-row:hover .ic-link-row__remove button,
.ic-link-row__remove button:focus-visible {
    opacity: 1;
}

.ic-link-row__remove button:hover {
    color: var(--error);
}

/* Inline-Zeile "Ticket verknüpfen": Typ (140 px), Suche (flex, min. 200 px), Knopf. */
.ic-link-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ic-link-add__type {
    width: 140px;
    height: 36px;
}

.ic-link-add__search {
    flex: 1;
    min-width: 200px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    padding: 0 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ic-detail-text);
    outline: none;
}

.ic-link-add__search:focus {
    border-color: var(--ic-detail-focus);
    outline: 2px solid var(--ic-detail-focus);
}

.ic-link-add__submit {
    height: 32px;
    padding: 0 16px;
}

/* Verlaufszeile. */
.ic-history {
    display: flex;
    flex-direction: column;
}

.ic-history__row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #F0F1F5;
    align-items: baseline;
}

.ic-history__time {
    color: #4C5A7C;
    width: 90px;
    flex: none;
}

.ic-history__text {
    flex: 1;
}

.ic-history__user {
    font-weight: 600;
}

/* Tag-Zeile (Chip mit Entfernen) und Hinzufügen-Feld. */
.ic-tag {
    display: inline-flex;
    align-items: center;
}

.ic-tag__remove {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 0 0 4px;
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

.ic-tag-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ic-tag-add input {
    height: 26px;
    width: 90px;
    border: 1px dashed #A4ADC4;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    font-family: inherit;
    color: #16213C;
    background: #fff;
    outline: none;
}

.ic-tag-add button {
    border: none;
    background: none;
    padding: 0;
    color: #6B39A3;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ic-tag-add button:hover {
    color: #16213C;
}

/* Segment-/Umschaltbutton (seg() im Entwurf), auch als Link nutzbar. */
.ic-seg {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #D2D6E1;
    background: #fff;
    color: #16213C;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ic-seg--active {
    border-color: #16213C;
    background: #16213C;
    color: #fff;
}

.ic-seg--active:hover {
    color: #fff;
}

/* Kommentarbereich: Composer-Zeile und Senden-Button. */
.ic-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-composer__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ic-composer__hint {
    font-size: 12px;
    color: #4C5A7C;
}

.ic-composer__send {
    margin-left: auto;
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #6B39A3;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.ic-composer__send:hover {
    background: #16213C;
}

/* --- Aktivität: Tabs und schlankes Kommentarfeld (T4, Briefing Schritt 2) ------------------ */
/* Eine Sektion mit den Tabs Alle · Kommentare · Verlauf · Zeitbuchungen. Alle Zeilen stehen genau
   einmal in der Liste; die Tabs sind ein Filter darauf (Stimulus setzt `data-activity-filter`, die
   Regeln unten blenden aus). Die vertikalen Abstände sind bewusst knapp: so bleibt der Bereich
   eines Tickets ohne Kommentare bei ≈ 159 px (Abnahme ≤ 160 px statt ≈ 330 px). */
.ic-activity {
    gap: 4px;
}

.ic-activity__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ic-activity__head .ic-block__title {
    flex: 1;
    min-width: 0;
    line-height: var(--ic-detail-lh-heading);
}

/* Umschalter "Neueste zuerst / Älteste zuerst" oben rechts (13 px). */
.ic-activity__order {
    border: none;
    background: none;
    padding: 0;
    min-height: 24px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #4C5A7C;
    cursor: pointer;
}

.ic-activity__order:hover {
    color: #16213C;
    text-decoration: underline;
}

.ic-activity__order:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Tab-Leiste: 36 px hoch, 14 px/500, Abstand 24 px; aktiver Tab 2 px Primär-Unterstrich auf einer
   1 px durchgehenden Linie. Der negative Rand zieht die Linie unter den Unterstrich. */
.ic-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.ic-tabs::-webkit-scrollbar {
    display: none;
}

.ic-tab {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    height: 36px;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #4C5A7C;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.ic-tab:hover {
    color: #16213C;
}

.ic-tab[aria-selected="true"] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.ic-tab:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Zähler-Badge (12 px), nur bei Anzahl > 0. */
.ic-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ic-detail-radius-pill);
    background: var(--neutral-lightest);
    color: #4C5A7C;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ic-tab[aria-selected="true"] .ic-tab__count {
    background: var(--accent-primary);
    color: #fff;
}

/* Schlankes Kommentarfeld: eine Zeile, 40 px, Radius 8, Padding 0 12 px. */
.ic-activity .ic-composer {
    gap: 4px;
}

.ic-composer__field {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #16213C;
    resize: vertical;
}

/* Eingeklappt (Normalfall mit JavaScript): genau eine Zeile, 40 px hoch. Ohne JavaScript bleibt das
   Textarea normal bedienbar und in der Höhe ziehbar. */
.ic-composer--collapsed .ic-composer__field {
    height: 40px;
    min-height: 40px;
    resize: none;
}

/* Aufgeklappt: Editorfläche mindestens 120 px – auch als Rückfallebene, wenn CKEditor nicht startet. */
.ic-composer--expanded .ic-composer__field {
    height: auto;
    min-height: 120px;
}

.ic-composer__field::placeholder {
    color: var(--text-muted);
}

.ic-composer__field:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Chip (Pille): Die Schnellantwort-Chips der Aktivität entfallen (V1, keine Chip-Zeile mehr); die
   Klasse bleibt für die Filter-Chips eigener Boards erhalten (G4, custom_show.html.twig). */
.ic-chip {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-pill);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #4C5A7C;
    cursor: pointer;
}

.ic-chip:hover {
    background: var(--hover);
    color: #16213C;
}

.ic-chip:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Aufgeklappter Zustand: Editor (min-height 120 px, Toolbar 36 px, Icons 16 px, Klickfläche 32 px),
   Sichtbarkeit links neben "Senden" (32 px), "Abbrechen" als Textbutton. Die Werkzeugleisten-Maße
   gelten für alle Editoren und stehen zentral im .ic-editor-Abschnitt. */
.ic-composer--expanded {
    gap: 8px;
    padding-top: 4px;
}

/* V1: Nach dem Entfernen der Chip-Zeile folgt direkt unter dem Kommentarfeld die Liste, mit 12 px
   Abstand (4 px Blockabstand + 8 px). */
.ic-activity .ic-composer + .ic-activity__panel {
    margin-top: 8px;
}

.ic-activity .ic-composer__send {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
}

.ic-composer__cancel {
    border: none;
    background: none;
    padding: 0 4px;
    min-height: 32px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #4C5A7C;
    cursor: pointer;
}

.ic-composer__cancel:hover {
    color: #16213C;
    text-decoration: underline;
}

.ic-composer__cancel:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Sichtbarkeit "Kunde": blauer 2-px-Rand am Editor, damit ein Fehlversand auffällt. */
.ic-composer--public .ic-composer__field,
.ic-composer--public .ic-editor .ck.ck-editor__main > .ck-editor__editable {
    border: 2px solid var(--info);
}

/* --- Aktivität: Liste, Filter, Reihenfolge und Verlaufszeilen ------------------------------ */
.ic-activity__panel:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Einträge 16 px auseinander (T4); Antworten innerhalb eines Threads bleiben enger. */
.ic-activity__list {
    gap: 16px;
}

.ic-activity__empty {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Verlaufszeile im Aktivitäts-Strom: Avatar 24 px, Name 13 px/600, Text 13 px, Zeit 12 px gedämpft
   rechts (relative Zeit, Tooltip = absolutes Datum). */
.ic-activity__list .ic-history__row {
    border-bottom: none;
    padding: 0;
    align-items: center;
    gap: 12px;
}

.ic-activity__list .ic-history__text {
    font-size: 13px;
}

.ic-activity__list .ic-history__time {
    width: auto;
    flex: none;
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* Filter: der aktive Tab blendet alle anderen Zeilenarten aus. */
.ic-activity[data-activity-filter="comments"] .ic-activity__list > [data-activity-kind]:not([data-activity-kind="comment"]),
.ic-activity[data-activity-filter="history"] .ic-activity__list > [data-activity-kind]:not([data-activity-kind="history"]),
.ic-activity[data-activity-filter="time"] .ic-activity__list > [data-activity-kind]:not([data-activity-kind="time"]) {
    display: none;
}

/* Im Tab "Alle" steht der Kommentar schon als Blase: die Verlaufszeile "Kommentar hinzugefügt"
   bleibt nur im Verlauf. */
.ic-activity[data-activity-filter="all"] .ic-activity__list > [data-activity-comment] {
    display: none;
}

/* Leerzustand je Tab (13 px gedämpft); ohne JavaScript bleiben alle Zeilen stehen. */
.ic-activity[data-activity-filter="comments"] [data-activity-empty]:not([data-activity-empty="comments"]),
.ic-activity[data-activity-filter="history"] [data-activity-empty]:not([data-activity-empty="history"]),
.ic-activity[data-activity-filter="time"] [data-activity-empty]:not([data-activity-empty="time"]),
.ic-activity[data-activity-filter="all"] [data-activity-empty]:not([data-activity-empty="all"]) {
    display: none;
}

/* Kommentarfeld gehört nicht in die Tabs Verlauf und Zeitbuchungen. */
.ic-activity[data-activity-filter="history"] .ic-composer,
.ic-activity[data-activity-filter="time"] .ic-composer {
    display: none;
}

/* Reihenfolge: serverseitig neueste zuerst; der Umschalter dreht die Liste. */
.ic-activity[data-activity-order="oldest"] .ic-activity__list {
    flex-direction: column-reverse;
}

/* Ticket anlegen/bearbeiten: Optik des Neu-anlegen-Fensters (Karte statt Overlay). */
.ic-form-page {
    background: #fff;
    border-radius: 16px;
    width: min(520px, 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
}

.ic-form-page__title {
    font-size: 20px;
    font-weight: 600;
}

/* Unterzeile mit Projekt/Ticket – im Entwurf nicht vorgesehen, damit klar bleibt, wo das
   Formular hingehoert. */
.ic-form-page__sub {
    margin: -8px 0 0;
    color: #4C5A7C;
    font-size: 13px;
}

.ic-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ic-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.ic-form__row {
    display: flex;
    gap: 12px;
}

.ic-form__row > * {
    flex: 1;
    min-width: 0;
}

.ic-form input:not([type=hidden]):not([type=file]):not([type=checkbox]),
.ic-form select,
.ic-form textarea {
    width: 100%;
    height: 44px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #16213C;
    background: #fff;
    outline: none;
}

.ic-form select {
    height: 40px;
    padding: 0 10px;
}

.ic-form textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
}

.ic-form__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Abbrechen-Schaltfläche des Neu-anlegen-Fensters (Entwurf). */
.ic-form__cancel {
    height: 40px;
    padding: 0 18px;
    border: 1px solid #D2D6E1;
    background: #fff;
    border-radius: 8px;
    color: #16213C;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ic-form__cancel:hover {
    border-color: #16213C;
    color: #16213C;
}

/* Projektauswahl am Anfang des Erstellen-Formulars (C1): Auswahl und "Weiter" in einer Zeile. */
.ic-form__project-switch {
    padding-bottom: 16px;
    border-bottom: 1px solid #D2D6E1;
}

.ic-form__project-row {
    display: flex;
    gap: 8px;
}

.ic-form__project-row select {
    flex: 1;
    min-width: 0;
}

.ic-form__errors {
    margin: 0;
    color: #FF6B47;
    font-size: 12px;
}

/* Symfony rendert Fehler als Liste ohne eigene Klasse. */
.ic-form__errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Primärbutton im Seitenkopf (Neues Ticket). */
.ic-topbar-btn {
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #6B39A3;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ic-topbar-btn:hover {
    background: #16213C;
    color: #fff;
}

/* --- Feldverwaltung (F2) ------------------------------------------------------------------- */
.ic-field-admin {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ic-field-admin__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-field-admin__title {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.ic-field-admin__hint {
    color: #4C5A7C;
    font-size: 13px;
}

.ic-field-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #F0F1F5;
    border-radius: 8px;
    flex-wrap: wrap;
}

.ic-field-row__main {
    flex: 1;
    min-width: 160px;
}

.ic-field-row__label {
    font-weight: 500;
}

.ic-field-row__meta {
    font-size: 12px;
    color: #4C5A7C;
}

.ic-field-row__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Zustandsanzeige "Öffentlich": im Entwurf nur über die Schaltflächen sichtbar, hier als Chip
   auf der grauen Zeile. */
.ic-field-row__vis {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
}

/* --- Projekt-Einstellungen: Workflow und Board-Spalten (M8, A2, A3) ------------------------ */
.ic-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Karte des Entwurfs: weiß, 1px #D2D6E1, Radius 12, Padding 20. */
.ic-settings__card {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ic-settings__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-settings__title {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.ic-settings__hint {
    color: #4C5A7C;
    font-size: 13px;
}

.ic-settings__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ic-settings__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    background: #F0F1F5;
    border-radius: 8px;
}

.ic-settings__spacer {
    flex: 1;
}

/* Status-Chip (chip() des Entwurfs). */
.ic-settings__chip {
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ic-settings__chip--wide {
    width: 140px;
}

.ic-settings__initial {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
}

/* "Nicht zugeordnet"-Hinweis (Entwurf: gelber Balken). */
.ic-settings__warn {
    background: #FFD140;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 500;
    font-size: 13px;
}

/* Sichtbare Beschriftung vor dem Jira-Feld (P9e/P9f): trennt es klar vom Umbenennen-Feld. */
.ic-settings__sublabel {
    font-size: 12px;
    font-weight: 500;
    color: #4C5A7C;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #D2D6E1;
    white-space: nowrap;
}

.ic-settings__name {
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 12px;
    font-weight: 500;
    width: 200px;
    font-family: inherit;
    font-size: 14px;
    color: #16213C;
    background: #fff;
}

.ic-settings__new {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: #16213C;
    background: #fff;
}

.ic-settings__icon-btn {
    height: 32px;
    min-width: 32px;
    border: 1px solid #D2D6E1;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 0 6px;
}

.ic-settings__x {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 0 0 4px;
}

.ic-settings__transition {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ic-settings__assign {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ic-settings__assign-select {
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #16213C;
}

.ic-settings__add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Ticketliste und Suche (F3) ----------------------------------------------------------- */
/* Status-Chips der Listenkopfzeile (seg() des Entwurfs, hier als Links auf den bestehenden
   status[]-Filter). */
.ic-chips {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Filterleiste (F1b): eine kompakte Zeile über der Liste statt des großen Formulars; der Filter
   liegt in einem Pop-over (Vorbild Jira). Aus Entwurfsbausteinen gebaut (Karte, Feld, Button);
   das Pop-over ist ein <details> und bleibt ohne JavaScript aufklappbar. */
.ic-filter {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    padding: 10px 12px;
}

/* Die Zeile und die Chips stehen im GET-Formular; die POST-Formulare der gespeicherten Filter
   liegen daneben im selben Kasten (verschachtelte Formulare sind ungültiges HTML) und fallen
   als leere Elemente nicht auf. */
.ic-filter__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ic-filter__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ic-filter__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    max-width: 320px;
}

.ic-filter__search svg {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: #7A86A6;
    pointer-events: none;
}

.ic-filter__search input {
    width: 100%;
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 12px 0 32px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.ic-filter__search input:focus {
    outline: none;
    border-color: var(--info);
}

.ic-filter__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ic-filter__clear {
    color: #4C5A7C;
    font-size: 13px;
    text-decoration: none;
}

.ic-filter__clear:hover {
    color: #16213C;
    text-decoration: underline;
}

/* --- Filter-Pop-over (F1b) ---------------------------------------------------------------- */
/* Knopf „Filtern“ mit Zähler; das Panel ist ein <details>-Inhalt und liegt als Karte (weiß,
   1px #D2D6E1, Radius 12, Schatten wie .ic-menu) unter dem Knopf. Zwei Spalten: Feldliste links,
   Auswahl rechts. Auf schmalen Bildschirmen füllt es die Breite und die Feldliste steht oben. */
.ic-fpop {
    position: relative;
}

.ic-fpop > summary {
    list-style: none;
    cursor: pointer;
}

.ic-fpop > summary::-webkit-details-marker {
    display: none;
}

.ic-fpop__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 640px;
    max-width: calc(100vw - 24px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    box-shadow: var(--shadow-page);
    overflow: hidden;
}

/* Ohne JavaScript stehen alle Panels untereinander (das <details> bleibt bedienbar); die
   Feldliste entfällt, weil sie sich ohne JavaScript nicht umschalten lässt. */
.ic-fpop__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 260px;
    max-height: 420px;
}

/* Mit JavaScript (filter_popover_controller): zwei Spalten, Feldliste links, ein Panel rechts. */
.ic-fpop--enhanced .ic-fpop__body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
}

.ic-fpop:not(.ic-fpop--enhanced) .ic-fpop__nav,
.ic-fpop:not(.ic-fpop--enhanced) .ic-fpop__search {
    display: none;
}

.ic-fpop__nav {
    border-right: 1px solid #F0F1F5;
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-fpop__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #16213C;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.ic-fpop__field:hover {
    background: #F7F8FB;
}

.ic-fpop__field--active {
    background: #F0F1F5;
    font-weight: 600;
}

.ic-fpop__field-count {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #6B39A3;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.ic-fpop__field-count[hidden] {
    display: none;
}

.ic-fpop__field-body {
    padding: 12px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-fpop__panel-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Nur mit JavaScript wird umgeschaltet: dann ist genau ein Panel sichtbar. */
.ic-fpop--enhanced .ic-fpop__panel-field {
    display: none;
}

.ic-fpop--enhanced .ic-fpop__panel-field--active {
    display: flex;
}

.ic-fpop__search {
    width: 100%;
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
}

.ic-fpop__search:focus {
    outline: none;
    border-color: var(--info);
}

.ic-fpop__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ic-fpop__option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.ic-fpop__option:hover {
    background: #F7F8FB;
}

.ic-fpop__option[hidden] {
    display: none;
}

.ic-fpop__option input {
    margin: 0;
}

.ic-fpop__option-name {
    flex: 1;
}

/* F3: Status-Pille und Zeitraum eines Sprints in der Auswahlliste (nur Farben aus den Tokens). */
.ic-fpop__option-status {
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 0 8px;
    background: #F0F1F5;
    color: #16213C;
    white-space: nowrap;
}

.ic-fpop__option-status--active { background: #D1F0EA; }
.ic-fpop__option-status--planned { background: #DABDF7; }
.ic-fpop__option-status--completed { background: #F0F1F5; }

.ic-fpop__option-dates {
    font-size: 11px;
    color: #4C5A7C;
    white-space: nowrap;
}

.ic-fpop__dates,
.ic-fpop__texts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ic-fpop__dates label,
.ic-fpop__texts label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #4C5A7C;
}

.ic-fpop__dates input,
.ic-fpop__texts input {
    height: 36px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font: inherit;
    font-size: 14px;
}

.ic-fpop__dates input:focus,
.ic-fpop__texts input:focus {
    outline: none;
    border-color: var(--info);
}

.ic-fpop__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #F0F1F5;
}

.ic-fpop__foot-count {
    margin-left: auto;
    color: #4C5A7C;
    font-size: 13px;
}

/* Filter-Chips der aktiven Filter (F1b), Stil von .ic-tag/.ic-seg. */
.ic-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 4px 0 10px;
    border-radius: 6px;
    background: #F0F1F5;
    font-size: 12px;
}

.ic-fchip__label {
    color: #4C5A7C;
}

.ic-fchip__values {
    color: #16213C;
    font-weight: 500;
}

.ic-fchip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: #4C5A7C;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

.ic-fchip__x:hover {
    background: #D2D6E1;
    color: #16213C;
}

/* Schmale Bildschirme (< 700 px): das Filterfenster füllt die Breite, die Feldliste steht oben. */
@media (max-width: 700px) {
    .ic-fpop__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
    }

    .ic-fpop__body {
        max-height: 70vh;
    }

    .ic-fpop--enhanced .ic-fpop__body {
        grid-template-columns: 1fr;
    }

    .ic-fpop--enhanced .ic-fpop__nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #F0F1F5;
    }
}

/* Gespeicherte Filter (K1/F1b): Menü unter dem Knopf, aus Entwurfsbausteinen gebaut
   (Karte, Feld, Auswahl, Buttons). Das Menü ist ein <details> und damit auch ohne JavaScript
   bedienbar; der Stimulus-Controller schließt es bei Klick außerhalb. */
.ic-saved-filters {
    position: relative;
}

.ic-saved-filters > summary {
    list-style: none;
    cursor: pointer;
}

.ic-saved-filters > summary::-webkit-details-marker {
    display: none;
}

.ic-saved-filters__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 280px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    box-shadow: var(--shadow-page);
}

.ic-saved-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-saved-filters__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-saved-filters__apply {
    flex: 1;
    color: #16213C;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
}

.ic-saved-filters__apply:hover {
    background: #F7F8FB;
}

.ic-saved-filters__apply--active {
    background: #DABDF7;
    font-weight: 600;
}

.ic-saved-filters__empty {
    color: #68779C;
    font-size: 13px;
}

.ic-saved-filters__save-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #F0F1F5;
}

.ic-saved-filters__save-form .ic-field {
    font-size: 13px;
}

/* Listenzeile: im Entwurf löst ein onClick auf der Zeile das Öffnen aus, hier ist die ganze
   Zeile ein Link. Spalten wie im Entwurf (ohne die nur für Mitarbeiter gedachte Aufwandsspalte,
   siehe docs/design/abweichungen.md), F7 ergänzt Autor/Erstellt/Geändert. Unter 1100px scrollt
   die Tabelle seitlich (F7). */
.ic-table-scroll {
    overflow-x: auto;
}

.ic-table--list {
    min-width: 980px;
}

.ic-table--list .ic-table__head,
.ic-table--list .ic-table__row {
    grid-template-columns: 90px 1fr 130px 170px 170px 100px 130px;
}

/* Prioritätsspalte der Ticketliste (F8): schmal und zentriert, nur das Symbol. Die Suche
   (/search) nutzt die Grundspalten und zeigt das Symbol neben dem Schlüssel. */
.ic-table--list.ic-table--priority .ic-table__head,
.ic-table--list.ic-table--priority .ic-table__row {
    grid-template-columns: 90px 1fr 44px 130px 170px 170px 100px 130px;
}

.ic-table__priority {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aufwandsspalten der Ticketliste (L1): nur für Mitarbeiter. Schätzung und Ist-Aufwand sitzen
   zwischen Priorität und Status, ca. 90px, Zahlen rechtsbündig mit tabular-nums. Im
   Präsentationsmodus sind beide Zellen über ic-internal ausgeblendet, deshalb fällt ihre
   Spaltenbreite dort wieder weg (die Zeilen bleiben ausgerichtet). */
.ic-table--list.ic-table--priority.ic-table--effort .ic-table__head,
.ic-table--list.ic-table--priority.ic-table--effort .ic-table__row {
    grid-template-columns: 90px 1fr 44px 90px 90px 130px 170px 170px 100px 130px;
}

.ic-table--list.ic-table--effort {
    min-width: 1160px;
}

html[data-presentation="on"] .ic-table--list.ic-table--priority.ic-table--effort .ic-table__head,
html[data-presentation="on"] .ic-table--list.ic-table--priority.ic-table--effort .ic-table__row {
    grid-template-columns: 90px 1fr 44px 130px 170px 170px 100px 130px;
}

html[data-presentation="on"] .ic-table--list.ic-table--effort {
    min-width: 980px;
}

.ic-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sortierbare Spaltenköpfe (F7): die Überschrift ist ein Link, der zwischen auf- und absteigend
   wechselt; die aktive Spalte trägt den Pfeil (aria-sort am Kopf). */
.ic-table__sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.ic-table__sort:hover {
    color: #16213C;
}

.ic-table__person {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ic-table__date {
    font-size: 13px;
    white-space: nowrap;
}

/* Kopfzeile im Entwurf wörtlich in Versalien. */
.ic-table__head {
    text-transform: uppercase;
}

.ic-table .ic-table__row {
    color: inherit;
    text-decoration: none;
}

.ic-table .ic-table__row:hover {
    color: #16213C;
}

.ic-table__key {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.ic-table__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ic-table__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ic-table__assignee {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-table__assignee-name {
    font-size: 13px;
}

/* Seitennavigation im Stil des Entwurfs-Buttons. */
.ic-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-pagination__info {
    color: #4C5A7C;
    font-size: 13px;
}

/* Suchformular der projektübergreifenden Suche (nicht im Entwurf; Entwurfsbausteine). */
.ic-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ic-search-form .ic-input {
    flex: 1;
}

/* --- Backlog & Sprints (P5c) --------------------------------------------------------------- */
/* Abschnittskopf: Name, Status-Pille, Zeitraum/Anzahl, Aktionen. Der Entwurf dimmt
   abgeschlossene Sprints auf .6. */
.ic-sprints {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ic-sprint--done {
    opacity: .6;
}

.ic-sprint__name {
    font-weight: 600;
    font-size: 16px;
}

.ic-sprint__status {
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

.ic-sprint__meta {
    color: #4C5A7C;
    font-size: 13px;
}

.ic-sprint__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ic-sprint__actions form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

/* "Sprint starten" (heller Button) und "Sprint abschließen" (dunkler Button) des Entwurfs. */
.ic-sprint__start,
.ic-sprint__finish {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
}

.ic-sprint__start {
    border: 1px solid #16213C;
    background: #fff;
    color: #16213C;
}

.ic-sprint__start:hover {
    background: #ACF53A;
}

.ic-sprint__finish {
    border: none;
    background: #16213C;
    color: #fff;
}

.ic-sprint__finish:hover {
    background: #6B39A3;
}

/* Ziel des Abschlusses: ohne JavaScript steht das Select direkt neben dem Button (P5c), mit
   JavaScript übernimmt der Dialog. */
.ic-sprint__target {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4C5A7C;
    font-size: 13px;
}

.ic-sprint__target select {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: #16213C;
    background: #fff;
}

/* Hinweis statt "Sprint starten", wenn bereits ein Sprint läuft (Text aus dem Entwurf). */
.ic-sprint__hint {
    color: #4C5A7C;
    font-size: 13px;
}

/* Stift und Bearbeiten-Formular in der Kopfzeile (F11). Der Entwurf kennt kein Bearbeiten;
   Farben sind Tokens (Meta-Schrift #4C5A7C, Hover violett #6B39A3), Maße wie ic-input--sm (32px). */
.ic-sprint__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: #4C5A7C;
    cursor: pointer;
}

.ic-sprint__edit:hover {
    color: #6B39A3;
}

/* display:inline-flex überstimmt sonst das hidden-Attribut. */
.ic-sprint__edit[hidden] {
    display: none;
}

.ic-sprint__edit-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.ic-sprint__edit-form[hidden] {
    display: none;
}

.ic-sprint__edit-name {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #16213C;
    outline: none;
}

.ic-sprint__edit-date {
    width: 140px;
    flex: none;
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #16213C;
    outline: none;
}

/* Ticketzeile des Entwurfs (draggable). Die ganze Zeile ist ein Link auf die Ticketseite –
   ohne JavaScript bleibt das Zuordnen so über die Ticketseite möglich. */
.ic-backlog-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #F0F1F5;
}

.ic-app a.ic-backlog-row,
.ic-app a.ic-backlog-row:hover {
    color: #16213C;
    text-decoration: none;
}

.ic-backlog-row:hover {
    background: #F7F8FB;
}

.ic-backlog-row__grip {
    color: #A4ADC4;
    cursor: grab;
    letter-spacing: -2px;
}

.ic-backlog-row__key {
    font-weight: 500;
    width: 56px;
    flex: none;
}

.ic-backlog-row__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-backlog-row__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ic-backlog-row__hours {
    background: #FFF3C4;
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
}

/* "Hierher ziehen, um Tickets zuzuordnen." – im Entwurf nur bei leerem Abschnitt. Ohne JavaScript
   entscheidet die Anwesenheit einer Ticketzeile; mit JavaScript setzt der Controller zusätzlich
   das hidden-Attribut. */
.ic-sprint__drop-hint {
    padding: 20px 16px;
    color: #68779C;
    font-size: 13px;
    border-top: 1px solid #F0F1F5;
}

.ic-sprint:has(.ic-backlog-row) .ic-sprint__drop-hint {
    display: none;
}

/* Rückmeldung während des Ziehens (nicht im Entwurf; Entwurfsfarben). */
.ic-sprint--target {
    border-color: #6B39A3;
}

.ic-backlog-row--dragging {
    opacity: .5;
}

/* Abschluss-Dialog: der Entwurf zeigt die Zielauswahl als gestapelte Schaltflächen. */
.ic-sprint-finish__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-sprint-finish__option {
    height: 44px;
    text-align: left;
    padding: 0 16px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #D2D6E1;
    background: #fff;
    color: #16213C;
}

.ic-sprint-finish__option--active {
    border-color: #6B39A3;
    background: #DABDF7;
}

.ic-sprint-finish__text {
    color: #4C5A7C;
}

/* Das Modal des Entwurfs ist display:flex und überstimmt [hidden] sonst. */
.ic-modal[hidden] {
    display: none;
}

/* Sprint-Zeile der Ticketansicht (Entwurf: Label und Wert der Eigenschaftsliste). */
.ic-sprint-set {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ic-sprint-set select {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-size: 13px;
}

/* Priorität der Ticketansicht (F8): Jira-Symbol und Zeile in der Eigenschaftsliste, gleicher
   Stil wie die Sprint-Zeile. Farbe über Tokens: 1–3 --error, 4 --warning, 5–6 --info. */
.ic-prio {
    display: inline-flex;
    align-items: center;
    flex: none;
    vertical-align: middle;
}

.ic-prio--1,
.ic-prio--2,
.ic-prio--3 { color: var(--error); }

.ic-prio--4 { color: var(--warning); }

.ic-prio--5,
.ic-prio--6 { color: var(--info); }

.ic-prio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ic-priority-set {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ic-priority-set select {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-size: 13px;
}

/* "Sprint anlegen": im Entwurf nur der Neu-anlegen-Dialog, hier in dessen Bausteinen
   (Karte, Feld, Button). */
.ic-sprint-create {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
}

.ic-sprint-create .ic-field {
    flex: 1 1 180px;
    min-width: 140px;
}

/* --- Projektübersicht (P4c, Y1) ------------------------------------------------------------ */
/* Die Seite ist im Entwurf nicht vorhanden; die Bausteine (Karte weiß, 1px #D2D6E1, Radius 12,
   Padding 20) kommen aus dem Entwurf. Y1: statt eines Kachelrasters eine Pipeline aus verlinkten
   Statussegmenten und darunter „Was ist jetzt zu tun?" mit den am längsten unveränderten Tickets. */
.ic-overview__total {
    margin: 0 0 16px;
    color: #4C5A7C;
    font-size: 13px;
}

/* Y2: gleichmäßiges Raster statt Flex-Wrap mit hängendem Pfeil. Alle Segmente sind gleich breit,
   laufen links→rechts und brechen sauber in die nächste Zeile um; ein Trenner am Zeilenende entfällt. */
.ic-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.ic-pipeline__segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.ic-pipeline__segment:hover {
    border-color: #6B39A3;
}

.ic-pipeline__count {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.ic-pipeline__name {
    color: #4C5A7C;
    font-size: 13px;
    text-align: center;
}

/* Erledigte Status stehen rechts und sind optisch ruhig. */
.ic-pipeline__segment--done {
    background: #F0F1F5;
}

.ic-pipeline__segment--done .ic-pipeline__count {
    color: #4C5A7C;
}

/* Status ohne Tickets bleiben sichtbar, aber ausgegraut. */
.ic-pipeline__segment--zero .ic-pipeline__count,
.ic-pipeline__segment--zero .ic-pipeline__name {
    color: #A4ADC4;
}

.ic-todo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.ic-todo__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ic-todo__card {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    padding: 20px;
}

.ic-todo__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.ic-todo__status {
    font-weight: 600;
}

.ic-todo__count {
    color: #4C5A7C;
    font-size: 13px;
}

.ic-todo__all {
    margin-left: auto;
    color: #6B39A3;
    font-size: 13px;
}

.ic-todo__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ic-todo__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid #F0F1F5;
}

.ic-todo__key {
    color: #4C5A7C;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.ic-todo__ticket-title {
    color: #16213C;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-todo__age {
    color: #4C5A7C;
    font-size: 12px;
    white-space: nowrap;
}

/* Schnellzugriffe: Reihe aus den Buttons des Entwurfs, ohne den automatischen Abstand der
   Status-Chips. Auf der Übersicht nur noch der Anfrage-Button für Kunden (Y1). */
.ic-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* --- Verwaltung (P4c) --------------------------------------------------------------------- */
/* Tabellen der Verwaltung: gleiche Karte/Kopfzeile/Zeile wie die Ticketliste, nur andere Spalten.
   Die Zeilen sind hier nicht anklickbar. */
.ic-table--admin .ic-table__head,
.ic-table--admin .ic-table__row {
    grid-template-columns: 90px 1fr auto;
}

.ic-table--members .ic-table__head,
.ic-table--members .ic-table__row {
    grid-template-columns: 1fr 1fr 200px auto;
}

.ic-table--users .ic-table__head,
.ic-table--users .ic-table__row {
    /* Name, E-Mail, Organisation, Rolle (G2b), Status, Aktionen. */
    grid-template-columns: 1fr 1fr 1fr 150px 110px auto;
}

.ic-table--invitations .ic-table__head,
.ic-table--invitations .ic-table__row {
    grid-template-columns: 1fr 160px 130px;
}

.ic-table--admin .ic-table__row,
.ic-table--members .ic-table__row,
.ic-table--users .ic-table__row,
.ic-table--invitations .ic-table__row {
    cursor: default;
}

/* Nutzerzeile inline bearbeiten (N1): Die Bearbeiten-Zeile trägt dieselben fünf Spalten wie die
   Anzeigezeile. Das Formular löst sich per display:contents in die Rasterzellen auf, damit die
   Spaltenbreiten unverändert bleiben. */
.ic-user-edit {
    display: contents;
}

.ic-user-edit__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ic-user-edit__field .ic-input--sm,
.ic-user-edit__field .ic-select--sm {
    width: 100%;
}

/* Hinweise an einer Tabellenzelle bzw. unter einem Feld (G2b): globale Rolle, "letzter Administrator". */
.ic-hint,
.ic-user-edit__hint,
.ic-form__hint {
    color: #4C5A7C;
    font-size: 11px;
    line-height: 1.3;
}

.ic-form__hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* Spaltenkatalog (G2): Position, Name, Anzahl Projekte, Aktionen. Zeilen wie in der Verwaltung
   nicht anklickbar. */
.ic-table--columns .ic-table__head,
.ic-table--columns .ic-table__row {
    grid-template-columns: 70px 1fr 120px auto;
}

.ic-table--columns .ic-table__row {
    cursor: default;
}

/* Aktionszelle: echte Formulare mit den Feldnamen aus P4b. */
.ic-admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.ic-admin-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

/* Umbenennen-Formular rechts in der Kopfzeile der Organisationskarte. */
.ic-page-head .ic-admin-form {
    margin-left: auto;
}

/* Kontrollkästchen: die Feldregel des Formulars setzt 44px/100%, hier zurückgenommen. */
.ic-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.ic-form input[type=checkbox] {
    width: auto;
    height: auto;
}

/* --- API-Tokens (P6c) --------------------------------------------------------------------- */
/* Die Seiten /me/tokens und /admin/tokens sind im Entwurf nicht vorhanden. Sie sind aus den
   Bausteinen Seitenkopf, Karte (weiß, 1px #D2D6E1, Radius 12, Padding 20), Tabelle (Karte,
   Kopfzeile #F0F1F5, Zeile mit border-top 1px #F0F1F5), Eingabefeld, Select, Button und Pille
   (Badge.jsx) zusammengesetzt. Die Tabellen nutzen die Karte/Kopfzeile/Zeile der Ticketliste (F3)
   mit eigenen Spalten; die Zeilen sind wie in der Verwaltung nicht anklickbar. */
/* Hülle der Token-Seiten: gleiche Inhaltsfläche wie .ic-page (flex-spalte, 20px Abstand). */
.ic-token-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ic-table--tokens .ic-table__head,
.ic-table--tokens .ic-table__row {
    grid-template-columns: 1fr 140px 150px 150px 110px auto;
}

.ic-table--tokens-admin .ic-table__head,
.ic-table--tokens-admin .ic-table__row {
    grid-template-columns: 1fr 1fr 140px 150px 150px 110px auto;
}

.ic-table--tokens .ic-table__row,
.ic-table--tokens-admin .ic-table__row {
    cursor: default;
}

/* Hinweisbox (nicht im Entwurf): Werte des Flash-Kastens (Radius 12, Padding 14px 16px). */
.ic-token-hint {
    background: #F0F1F5;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-token-hint__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.ic-token-hint__note {
    color: #4C5A7C;
    font-size: 13px;
    font-weight: 400;
}

/* Der Klartext-Token steht einmalig im Flash. base.html.twig rendert die Flashes vor dem
   Inhaltsblock, deshalb wird der Kasten über :has an die Token-Seite gebunden und in Monospace
   gesetzt (Wert nicht im Entwurf, siehe docs/design/abweichungen.md P6c-4). */
.ic-page:has(.ic-token-page) .ic-flash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* --- Login-Seite mit drei Spalten (F4) ----------------------------------------------------- */
/* Der Entwurf enthält keine Login-Seite. Aufbau und Werte stammen aus den Tokens und Bausteinen
   (Karte, Pille, Eingabefeld). Die weiße Logo-Grafik liegt auf der dunklen Fläche
   --surface-inverse; Spalte 2 nutzt --surface-subtle, Spalte 3 --surface-mint. Abweichungen
   siehe docs/design/abweichungen.md (F4). base.html.twig gibt der Seite ic-page--bare mit
   Innenabstand und Zentrierung; die Login-Seite füllt die Fläche daher über :has selbst aus. */
.ic-page--bare:has(.ic-login) {
    padding: 0;
    align-items: stretch;
    /* Oben ausrichten statt zentrieren: Ist die Login-Seite höher als das Fenster (Demo-Zugänge,
       lange rechte Spalten), würde die Zentrierung den Anfang (das Formular) über den oberen Rand
       schieben, wo er nicht erreichbar ist. */
    justify-content: flex-start;
}

.ic-login {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    min-height: 100vh;
    width: 100%;
}

.ic-login__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    min-width: 0;
}

.ic-login__col--auth {
    background: var(--surface-inverse);
    color: #fff;
}

.ic-login__col--product {
    background: var(--surface-subtle);
}

.ic-login__col--open {
    background: var(--surface-mint);
}

/* Anmelde-Spalte: Überschrift und Formularbausteine auf dunklem Grund lesbar halten. */
.ic-login__col--auth h1 {
    margin: 0;
    font-size: var(--h5);
    font-weight: 600;
}

.ic-login__col--auth .ic-field {
    color: #fff;
}

.ic-login__col--auth .ic-input {
    background: #fff;
    color: #16213C;
}

.ic-login__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Demo-Zugänge: die Zeile ist ein Knopf und füllt über den Stimulus-Controller das Formular.
   Ohne JavaScript bleiben die Daten lesbar. */
.ic-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-demo__title {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #A4ADC4;
}

.ic-demo__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ic-demo__row:hover {
    background: rgba(255, 255, 255, .1);
}

.ic-demo__row:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}

/* Kopfzeile der Karte: Name links, Rollen-Pille rechts. Bei zu wenig Platz rutscht die
   Pille unter den Namen und bleibt linksbündig (ein Element je Zeile richtet sich am Start aus). */
.ic-demo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.ic-demo__name {
    font-weight: 600;
}

.ic-demo__cred {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.35;
    color: #D2D6E1;
    overflow-wrap: anywhere;
}

/* Produkt-Spalte (Angebot). */
.ic-login__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #6B39A3;
    text-transform: uppercase;
}

.ic-login__hero {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.ic-login__sub {
    margin: 0;
    color: #4C5A7C;
    font-size: 14px;
}

.ic-login__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ic-login__feature {
    background: #fff;
    border: 1px solid #D2D6E1;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-login__feature svg {
    width: 20px;
    height: 20px;
    color: #6B39A3;
}

.ic-login__feature-title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

.ic-login__feature-text {
    margin: 0;
    color: #4C5A7C;
    font-size: 13px;
}

.ic-login__feature .ic-badge {
    align-self: flex-start;
}

.ic-login__band {
    margin-top: auto;
}

/* Offene Punkte (Spalte 3). */
.ic-login__open-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ic-login__open {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(22, 33, 60, .12);
}

.ic-login__open-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ic-login__open-title {
    margin: 0;
    font-weight: 500;
}

.ic-login__open-text {
    color: #4C5A7C;
    font-size: 13px;
}

/* Spalte 3 ist schmal (20 %): Pille unter den Text statt daneben. */
.ic-login__open {
    flex-direction: column;
    gap: 6px;
}

.ic-login__open .ic-badge {
    flex: none;
    white-space: nowrap;
}

.ic-login__note {
    margin-top: auto;
    color: #4C5A7C;
    font-size: 12px;
}

/* Schmalere Fenster: Feature-Kacheln zweispaltig, auf dem Handy einspaltig. */
@media (max-width: 1400px) {
    .ic-login__features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ic-login__features {
        grid-template-columns: 1fr;
    }
}

/* Unter 1100px stapeln sich die Spalten in der Reihenfolge Login, Angebot, Offenes. */
@media (max-width: 1100px) {
    .ic-login {
        grid-template-columns: 1fr;
    }
}

/* W1: Interne Freitextfelder (z. B. "Interner Hinweis") stehen als normale Zeile des Panels im
   Look der anderen Felder. Der Aufwand-Block hat bereits 16 px Seitenrand (.ic-acc__body >
   .ic-effort), daher tragen diese Zeilen kein eigenes horizontales Padding – so fluchten Label und
   Wert mit den Zeilen der anderen Gruppen. */
.ic-effort .ic-props__row {
    padding-left: 0;
    padding-right: 0;
}

/* Zuständigen-Auswahl der Ticketansicht (F9b). Der Trigger wirkt wie Text; das Popup ist eine
   Karte mit den Overlay-Werten des Entwurfs (weiß, radius-large, --shadow-page). Das Suchfeld
   nutzt den Eingabefeld-Wert und den Fokus-Token --info. Die aktuelle Auswahl trägt den linken
   Akzentstrich (--accent-primary). Ohne JavaScript bleibt das native Select sichtbar. */
.ic-assignee {
    position: relative;
    margin: 0;
}

.ic-assignee__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #16213C;
    cursor: pointer;
}

.ic-assignee__trigger:hover {
    background: var(--neutral-lightest);
}

.ic-assignee__popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: min(280px, 80vw);
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-page);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-assignee__popup[hidden] {
    display: none;
}

.ic-assignee__search {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: #16213C;
    outline: none;
}

.ic-assignee__search:focus {
    border-color: var(--info);
}

.ic-assignee__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.ic-assignee__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #16213C;
    cursor: pointer;
}

.ic-assignee__option:hover {
    background: var(--neutral-lightest);
}

.ic-assignee__option--active {
    background: var(--neutral-lightest);
}

.ic-assignee__option--selected {
    border-left-color: var(--accent-primary);
    font-weight: 600;
}

.ic-assignee__option[hidden] {
    display: none;
}

.ic-assignee__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-assignee__empty {
    padding: 6px 8px;
    font-size: 13px;
    color: #4C5A7C;
}

.ic-assignee__empty[hidden] {
    display: none;
}

/* --- Eigene Boards (G3) --------------------------------------------------------------------- */
/* Der Entwurf kennt keine Mehrfachauswahl. Die Filterfelder des Board-Formulars behalten die
   Eingabefeld-Regel des Entwurfs (1px #D2D6E1, Radius 8); ein Mehrfach-Select wächst aber mit der
   Zeilenzahl, statt auf die 40px eines Einfach-Selects begrenzt zu bleiben. */
.ic-form select[multiple] {
    height: auto;
    min-height: 120px;
    padding: 6px 10px;
}

/* --- Dateianhänge (D2, T5: Raster statt Liste) ---------------------------------------------- */
/* Der Entwurf kennt keinen Anhang-Abschnitt. T5 ersetzt Liste und große Dropzone durch ein Raster
   112-px-Kacheln (Bild als Vorschau, sonst Typ-Symbol/Endung), Dateiname + Datum darunter und ein
   Kontextmenü je Datei. Das Drag-Overlay liegt über der Hauptspalte (show.html.twig). Ohne
   JavaScript bleibt das Datei-Feld des Upload-Formulars sichtbar (file_upload versteckt es). */
.ic-files {
    position: relative;
}

.ic-files__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-files__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ic-detail-radius-pill);
    background: var(--hover);
    color: var(--ic-detail-muted);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ic-files__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ic-files__tool {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ic-detail-radius-control);
    background: none;
    color: var(--ic-detail-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ic-files__tool:hover {
    background: var(--hover);
}

.ic-files__tool:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-files__tool--add {
    font-weight: 600;
}

.ic-files__empty {
    margin: 0;
    font-size: 13px;
    color: var(--ic-detail-muted);
}

.ic-files__empty-add {
    color: var(--accent-primary);
    font-weight: 600;
    cursor: pointer;
}

.ic-files__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 112px);
    gap: 12px;
}

.ic-files__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ic-files__thumb {
    position: relative;
    width: 112px;
    height: 84px;
}

.ic-files__thumb-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--hover);
    color: var(--ic-detail-muted);
    text-decoration: none;
}

.ic-files__thumb-link:hover {
    border-color: var(--accent-primary);
}

.ic-files__thumb-link:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-files__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ic-files__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral);
}

.ic-files__icon--pdf { color: var(--error); }
.ic-files__icon--image { color: var(--info); }
.ic-files__icon--table { color: var(--success); }
.ic-files__icon--archive { color: var(--warning); }
.ic-files__icon--document { color: var(--neutral); }

.ic-files__ext {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
}

.ic-files__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--ic-detail-radius-pill);
    background: var(--warning);
    color: var(--neutral-darkest);
    font-size: 12px;
    font-weight: 600;
}

.ic-files__menu {
    position: absolute;
    top: 4px;
    right: 4px;
}

.ic-files__menu-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ic-detail-radius-control);
    background: rgba(255, 255, 255, .9);
    color: var(--ic-detail-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}

.ic-files__item:hover .ic-files__menu-btn,
.ic-files__menu-btn:focus-visible {
    opacity: 1;
}

.ic-files__menu-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-card);
    box-shadow: var(--shadow-page);
    z-index: 30;
}

.ic-files__menu-popup[hidden] {
    display: none;
}

.ic-files__menu-form {
    margin: 0;
}

.ic-files__filename {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-files__filedate {
    font-size: 12px;
    color: var(--ic-detail-muted);
}

/* Ansicht "Liste": dieselben Kacheln als flache Zeilen (Zustand je Nutzer). */
.ic-files--list .ic-files__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-files--list .ic-files__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.ic-files--list .ic-files__thumb {
    width: 40px;
    height: 32px;
}

.ic-files--list .ic-files__thumb-link {
    border: none;
    background: none;
}

.ic-files--list .ic-files__image {
    border-radius: 4px;
}

/* Upload-Formular: echtes POST; mit JavaScript wird das Datei-Feld versteckt und "+" gezeigt. */
.ic-files__upload {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ic-files__upload--js .ic-files__input {
    display: none;
}

.ic-files__input {
    max-width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--ic-detail-muted);
}

/* Drag-Overlay über der Hauptspalte: erscheint beim Drag-over, "pointer-events:none" lässt den
   Drop am Container ankommen (der Controller blendet es ein/aus). */
.ic-files__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent-primary);
    border-radius: var(--ic-detail-radius-card);
    background: rgba(107, 57, 163, .06);
    pointer-events: none;
}

.ic-files__overlay[hidden] {
    display: none;
}

.ic-files__overlay-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-primary);
}

.ic-files__progress {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ic-files__progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 160px;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #4C5A7C;
}

.ic-files__progress-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-files__progress-bar {
    height: 6px;
    background: #D2D6E1;
    border-radius: 999px;
    overflow: hidden;
}

.ic-files__progress-fill {
    display: block;
    height: 100%;
    width: 30%;
    background: #6B39A3;
    border-radius: 999px;
    animation: ic-files-progress 1s ease-in-out infinite;
}

.ic-files__progress-row--done .ic-files__progress-fill {
    width: 100%;
    margin: 0;
    background: var(--success);
    animation: none;
}

.ic-files__progress-row--error .ic-files__progress-fill {
    width: 100%;
    margin: 0;
    background: var(--error);
    animation: none;
}

@keyframes ic-files-progress {
    0% { margin-left: -30%; }
    100% { margin-left: 100%; }
}

.ic-files__error {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    color: var(--error);
}

/* --- Datei-Vorschau (Overlay, D2) ----------------------------------------------------------- */
/* Solange das Overlay offen ist, darf die Seite nicht scrollen. Der Scrollbehälter ist .ic-page
   (base.html.twig), nicht <body>; die Klasse setzt der Stimulus-Controller auf <html>. */
.ic-preview-open,
.ic-preview-open .ic-page {
    overflow: hidden;
}

.ic-preview {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(22, 33, 60, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ic-preview__dialog {
    background: #fff;
    border-radius: 16px;
    width: min(900px, 100%);
    height: min(80vh, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(22, 33, 60, .3);
}

.ic-preview__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #D2D6E1;
}

.ic-preview__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-preview__close {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    background: #F0F1F5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16213C;
}

.ic-preview__close:hover {
    background: #D2D6E1;
}

.ic-preview__body {
    flex: 1;
    min-height: 0;
    display: flex;
    background: #F0F1F5;
}

.ic-preview__frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.ic-preview__image {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Lightbox der Bild-Anhänge (T5): Zähler, Download und Blätter-Pfeile im vorhandenen Overlay. */
.ic-preview__position {
    flex: none;
    font-size: 12px;
    color: var(--ic-detail-muted);
    font-variant-numeric: tabular-nums;
}

.ic-preview__download {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #F0F1F5;
    color: #16213C;
    font-size: 16px;
    text-decoration: none;
}

.ic-preview__download:hover {
    background: #D2D6E1;
}

.ic-preview__nav {
    flex: none;
    width: 44px;
    height: 100%;
    border: none;
    background: none;
    color: #16213C;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.ic-preview__nav:hover {
    background: rgba(22, 33, 60, .06);
}

.ic-preview__nav:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: -2px;
}

.ic-preview--lightbox .ic-preview__body {
    align-items: center;
}

/* Das hidden-Attribut muss immer gewinnen: Klassen mit display:flex (z. B. .comment-edit,
   .comment__actions) überschrieben es sonst, und versteckte Formulare blieben sichtbar (F10). */
[hidden] {
    display: none !important;
}

/* --- Präsentationsmodus (P12) -------------------------------------------------------------- */
/* Reine Darstellungshilfe im Browser: markierte interne Inhalte werden ausgeblendet, damit der
   PM beim Screen-Sharing nichts Internes zeigt. Kein Sicherheitsmerkmal – die Daten bleiben im
   HTML, der serverseitige Kundenschutz bleibt unverändert. Das Attribut setzt der Stimulus-
   Controller `presentation` bzw. das Inline-Skript im <head> (base.html.twig). */
html[data-presentation="on"] .ic-internal {
    display: none !important;
}

/* Schalter im Seitenkopf (Auge durchgestrichen). Aus: gedämpft/ausgegraut, An: dunkel mit
   leichter Hintergrundmarkierung – die Markierung sitzt nur im Schalter, kein Banner. */
.ic-topbar-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #7A86A6;
    opacity: .55;
    cursor: pointer;
}

.ic-topbar-icon:hover {
    opacity: .8;
}

.ic-topbar-icon:focus-visible {
    outline: 2px solid #6B39A3;
    outline-offset: 2px;
}

.ic-topbar-icon[aria-pressed="true"] {
    color: #16213C;
    opacity: 1;
    background: #F0F1F5;
}

/* --- Status-Button der Kopfzeile, Menü und Toast (T1) ------------------------------------- */
/* Statusfarbe als getönter Hintergrund, Text dunkel (Kontrast ≥ 4.5:1). "done" = grün getönt,
   sonst neutral/blau getönt; die Farbe kommt aus dem Status-Kennzeichen (isDone), nicht aus
   einem neuen Datenfeld. */
.ic-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ic-detail-control-h);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ic-detail-radius-control);
    background: #E7ECF6;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: var(--ic-detail-fs-control);
    font-weight: var(--ic-detail-fw-control);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ic-status-btn--open { background: #E7ECF6; }
.ic-status-btn--done { background: #D1F0EA; }

.ic-status-btn--readonly {
    cursor: default;
}

.ic-status-btn:hover:not(.ic-status-btn--readonly) {
    filter: brightness(.96);
}

.ic-status-btn:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-status-btn__chevron {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Menü (Status-Übergänge, "Mehr"): Karte mit 36-px-Einträgen, per Pfeiltasten bedienbar. */
.ic-menu {
    position: relative;
}

/* Rückfall-Auswahl des Status ohne JavaScript: Select + Knopf, bis der Controller übernimmt. */
.ic-status-menu__form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ic-status-menu__form[hidden] {
    display: none;
}

.ic-menu__popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-card);
    box-shadow: var(--shadow-page);
    z-index: 30;
}

.ic-menu__popup[hidden] {
    display: none;
}

.ic-menu__form {
    margin: 0;
}

.ic-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: var(--ic-detail-radius-control);
    background: none;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ic-menu__item:hover {
    background: var(--hover);
}

.ic-menu__item:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: -2px;
}

.ic-menu__item--current {
    color: var(--ic-detail-muted);
    cursor: default;
}

.ic-menu__item--current:hover {
    background: none;
}

.ic-menu__check {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Toast: unten mittig, role=status, verschwindet nach 4 s. Undo-Link optional. */
.ic-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(560px, 90%);
    padding: 12px 18px;
    background: #16213C;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(22, 33, 60, .3);
    font-size: 14px;
}

.ic-toast[hidden] {
    display: none;
}

.ic-toast__dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--lime);
}

.ic-toast--error .ic-toast__dot {
    background: var(--error);
}

.ic-toast__undo {
    padding: 0;
    border: none;
    background: none;
    color: var(--lime);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.ic-toast__undo:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Details-Panel (T2, Briefing Schritt 5) ------------------------------------------------ */
/* Karte in der rechten Spalte (siehe .ic-detail__aside). Gruppen als Accordion, Zeilen mit
   Inline-Edit. Alle Farben über die Tokens aus Abschnitt 0. */

.ic-panel {
    display: flex;
    flex-direction: column;
}

/* Accordion-Gruppe: Kopf 44 px, Chevron 16 px links, 1 px Trennlinie. */
.ic-acc {
    border-top: 1px solid var(--border);
}

.ic-acc:first-child {
    border-top: none;
}

.ic-acc__head {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ic-detail-text);
    text-align: left;
    cursor: pointer;
}

.ic-acc__head:hover {
    background: var(--hover);
}

.ic-acc__head:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: -2px;
}

.ic-acc__chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--ic-detail-muted);
    transition: transform .15s ease;
}

.ic-acc__head[aria-expanded="true"] .ic-acc__chevron {
    transform: rotate(90deg);
}

.ic-acc__body {
    padding: 4px 0 8px;
}

.ic-acc__body[hidden] {
    display: none;
}

/* Der Aufwandskasten im Panel behält seine Innenabstände, bekommt aber Luft zur Zeile. */
.ic-acc__body > .ic-effort {
    margin: 0 16px;
}

/* Panel-Fußzeile (außerhalb der Gruppen): Erstellt/Aktualisiert. */
.ic-panel__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ic-detail-muted);
}

.ic-panel__sep {
    padding: 0 4px;
}

/* Inline-Edit: der Wert sieht wie Text aus; Hover dunkelt die Fläche, ohne dass der Text springt. */
.ic-inline {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
}

.ic-inline__display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    /* W1: Der Anzeigebutton füllt die Wertspalte; der Text bleibt einzeilig (nowrap) und wird erst
       bei zu langem Inhalt mit Ellipsis gekürzt (siehe .ic-inline__text). */
    width: 100%;
    white-space: nowrap;
    margin: -4px -8px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ic-detail-text);
    text-align: left;
    cursor: pointer;
    max-width: 100%;
}

.ic-inline__display:hover {
    background: var(--hover);
}

.ic-inline__display:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-inline__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-inline__text--empty {
    width: 100%;
    color: var(--ic-detail-muted);
}

/* U1: Das Prioritätssymbol steckt in einem eigenen Ziel, damit JavaScript es beim Speichern
   austauschen kann; inline-flex hält es auf derselben Höhe wie zuvor. */
.ic-inline__display [data-inline-edit-target="icon"] {
    display: inline-flex;
    align-items: center;
}

/* U1: Priorität steht immer mit vollem Namen – kein Abschneiden mit Auslassungspunkten. */
.ic-inline__text--full {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ic-inline__form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ic-inline__form[hidden] {
    display: none;
}

.ic-inline__form select,
.ic-inline__form input:not([type=hidden]):not(.ic-props__input) {
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    padding: 0 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--ic-detail-text);
    outline: none;
    max-width: 100%;
}

.ic-inline__form select:focus-visible,
.ic-inline__form input:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 1px;
}

/* Das Popup der Zuständigen-Auswahl sitzt im schmalen Detail-Panel am rechten Rand: es wird rechtsbündig
   zum Trigger geöffnet (wächst nach links), damit es nicht über den Panelrand hinausragt und die
   Seite nicht seitlich verschiebt. */
.ic-props__value--assignee .ic-assignee__popup {
    left: auto;
    right: 0;
    width: min(280px, calc(100vw - 48px));
    box-sizing: border-box;
}

/* Zuständigen-Auswahl der Ticketansicht: der Trigger steht allein in der Zeile (W1: der Textlink
   "Mir zuweisen" ist entfallen); die Auswahl öffnet sich per Klick auf den Trigger. */
.ic-assignee--enhanced {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Tag-Zeile: Pills 24 px hoch, "+"-Knopf 24 px. */
.ic-props__value--tags .ic-tag {
    height: 24px;
    border-radius: var(--ic-detail-radius-pill);
    padding: 0 10px;
}

.ic-tag-editor {
    display: inline-flex;
    align-items: center;
}

.ic-tag__add-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-pill);
    background: #fff;
    color: var(--ic-detail-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.ic-tag__add-btn:hover {
    background: var(--hover);
}

.ic-tag__add-btn:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-tag-editor .ic-tag-add[hidden] {
    display: none;
}

/* Tag-Auswahl der Ticketansicht (T7): Popup unter der Tag-Zeile, rechtsbündig zum Panelrand
   (wächst nach links, damit es nicht über den Panelrand ragt und die Seite nicht verschiebt).
   Optik und Tastatur wie die Zuständigen-Auswahl (F9b); ohne JavaScript bleibt das Formular sichtbar. */
.ic-props__value--tags {
    position: relative;
}

.ic-tag-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ic-tag-picker {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 20;
    width: min(280px, calc(100vw - 48px));
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-page);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.ic-tag-picker[hidden] {
    display: none;
}

.ic-tag-picker__search {
    height: 32px;
    border: 1px solid #D2D6E1;
    border-radius: 8px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: #16213C;
    outline: none;
}

.ic-tag-picker__search:focus {
    border-color: var(--info);
}

.ic-tag-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.ic-tag-picker__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #16213C;
    cursor: pointer;
}

.ic-tag-picker__option:hover,
.ic-tag-picker__option--active {
    background: var(--neutral-lightest);
}

.ic-tag-picker__option--selected {
    border-left-color: var(--accent-primary);
    font-weight: 600;
}

.ic-tag-picker__option--create {
    color: var(--accent-primary);
    font-weight: 600;
}

/* T8: gedämpfter Abschnitt für Tags aus anderen Projekten (kleine Überschrift + Kürzel rechts). */
.ic-tag-picker__group {
    padding: 8px 8px 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ic-detail-muted);
}

.ic-tag-picker__option--foreign .ic-tag-picker__name {
    color: #4C5A7C;
}

.ic-tag-picker__projects {
    margin-left: auto;
    color: var(--ic-detail-muted);
    font-size: 11px;
    white-space: nowrap;
}

.ic-tag-picker__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.ic-tag-picker__plus {
    flex: none;
    width: 14px;
    text-align: center;
    font-weight: 700;
}

.ic-tag-picker__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-tag-picker__count {
    margin-left: auto;
    color: var(--ic-detail-muted);
    font-variant-numeric: tabular-nums;
}

.ic-tag-picker__check {
    flex: none;
    width: 14px;
    text-align: right;
    color: var(--accent-primary);
}

.ic-tag-picker__empty {
    padding: 6px 8px;
    font-size: 13px;
    color: #4C5A7C;
}

.ic-tag-picker__empty[hidden] {
    display: none;
}

/* Moco-Verknüpfung in eigener Gruppe (T2): gleicher Innenabstand wie die Zeilen. */
.ic-acc__body > .ic-moco {
    padding: 0 16px 4px;
}

/* ---------------------------------------------------------------------------------------------
   Hierarchie in der Oberfläche (X2)
   --------------------------------------------------------------------------------------------- */

/* Pfad in der Kopfzeile der Ticketseite: "PARENT / KEY", bei Sub-Tasks "EPIC / PARENT / KEY".
   Die Zwischenstationen sind 13 px und gedämpft, der eigene Key bleibt fett (T1). */
.ic-detail__path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ic-detail__crumb {
    color: var(--ic-detail-muted);
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.ic-detail__crumb:hover {
    color: var(--ic-detail-text);
    text-decoration: underline;
}

.ic-detail__crumb:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.ic-detail__sep {
    color: var(--ic-detail-muted);
    font-size: 13px;
}

/* Zeile "Übergeordnet"/"Epic" des Details-Panels: Wert = Key (13 px/600) + Titel als Link. */
.ic-parent__display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.ic-parent__value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.ic-parent__value[hidden] {
    display: none;
}

.ic-parent__link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    color: var(--ic-detail-text);
    font-size: 14px;
    text-decoration: none;
}

.ic-parent__link:hover .ic-parent__title {
    text-decoration: underline;
}

.ic-parent__link:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.ic-parent__key {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ic-detail-muted);
    white-space: nowrap;
}

.ic-parent__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menü-Knopf der Zeile (Ändern/Entfernen): Klickfläche 32 px wie die übrigen Icon-Knöpfe. */
.ic-inline__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: none;
    border-radius: var(--ic-detail-radius-control);
    background: none;
    color: var(--ic-detail-muted);
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.ic-inline__menu:hover {
    background: var(--hover);
    color: var(--ic-detail-text);
}

.ic-inline__menu:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Leerzustand der Zeile: "Epic hinzufügen" sieht wie der gedämpfte Wert der Inline-Zeilen aus. */
.ic-inline__display--empty {
    color: var(--ic-detail-muted);
}

/* Sektion "Untergeordnete Vorgänge" der Hauptspalte: Überschrift 14 px/600, Fortschritt 12 px,
   Balken 4 px hoch mit Radius 2, rechts der "+"-Knopf (28 px). */
.ic-children {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ic-children__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
}

.ic-children__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ic-detail-text);
}

.ic-children__progress {
    font-size: 12px;
    color: var(--ic-detail-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ic-children__bar {
    flex: 1 1 auto;
    min-width: 40px;
    max-width: 160px;
    height: 4px;
    border-radius: 2px;
    background: #F0F1F5;
    overflow: hidden;
}

.ic-children__bar-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #6B39A3;
}

.ic-children__add {
    position: relative;
    margin-left: auto;
}

.ic-children__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    background: #fff;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.ic-children__plus::-webkit-details-marker {
    display: none;
}

.ic-children__plus:hover {
    background: var(--hover);
}

.ic-children__plus:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-children__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ic-children__row {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) 24px auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border-top: 1px solid var(--border);
}

.ic-children__row:first-child {
    border-top: none;
}

/* Erledigte Kinder (Status zählt als "done"): gedämpft. */
.ic-children__row--done {
    opacity: .6;
}

.ic-children__type {
    font-size: 12px;
    color: var(--ic-detail-muted);
    white-space: nowrap;
}

.ic-children__key {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ic-detail-text);
    text-decoration: none;
    white-space: nowrap;
}

.ic-children__key:hover {
    text-decoration: underline;
}

.ic-children__child-title {
    font-size: 14px;
    color: var(--ic-detail-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ic-children__empty {
    margin: 0;
    font-size: 13px;
    color: var(--ic-detail-muted);
}

/* Avatar in der Kinder-Zeile: 24 px (kleiner als der der Liste). */
.ic-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

/* Hinweis unter dem Formularfeld "Übergeordnet" (nur bei Sub-Tasks sichtbar). */
.ic-form__hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ic-detail-muted);
}

.ic-form__hint[hidden] {
    display: none;
}

/* Epic-Chip auf Board-Karten, Backlog-Zeilen und in Listen: 12 px, 20 px hoch, neutral getönt,
   Titel auf ~16 Zeichen gekürzt (der volle Titel steht im Tooltip). */
.ic-chip--parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 16ch;
    height: 20px;
    padding: 0 8px;
    border: none;
    border-radius: var(--ic-detail-radius-pill);
    background: #F0F1F5;
    color: #4C5A7C;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-chip--parent .ic-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kleiner Fortschritt "2/5" eines Epics (Board, Backlog, Liste). */
.ic-chip--progress {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--ic-detail-radius-pill);
    background: #F0F1F5;
    color: #4C5A7C;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Alter-Badge "12 T" einer Board-Karte (Z1/Z2): steht in der Tag-Zeile (nach den Tags), neutral, ab
   der Gelb-Schwelle gelb, ab der Rot-Schwelle rot – dieselben Flächen wie .ic-badge--warning/--error,
   kein neuer Farbwert. Nur für Mitarbeiter; im Präsentationsmodus blendet ic-internal es aus, außer
   auf den Karten der Spalte „QA Client". flex: 0 0 auto hält das Badge in der umbrechenden Zeile
   zusammen (es schrumpft nicht und läuft nicht über den Kartenrand). */
.ic-chip--age {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--ic-detail-radius-pill);
    background: #F0F1F5;
    color: #4C5A7C;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.ic-chip--age--warn {
    background: #FFD140;
    color: #16213C;
}

.ic-chip--age--critical {
    background: #FF6B47;
    color: #16213C;
}

/* Spalte "Übergeordnet" der Ticketliste. */
.ic-table__parent {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--ic-detail-muted);
}

.ic-table__parent-key {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* KI-Zusammenfassung der Ticketseite (K2). Das Panel steht direkt unter der Kopfzeile über der
   Hauptspalte; der Text behält seine Zeilenumbrüche (white-space: pre-wrap), die offenen Punkte
   sind reine Orientierungs-Checkboxen. Im Präsentationsmodus wird alles über `ic-internal` verborgen. */
.ic-ai-summary {
    margin: 0 var(--ic-detail-pad-x) var(--ic-detail-pad-y);
    padding: 16px 20px;
    border: 1px solid rgb(196, 160, 236);
    border-radius: var(--ic-detail-radius-card);
    background:
        radial-gradient(120% 140% at 0% 0%, rgb(218, 189, 247) 0%, rgba(218, 189, 247, 0) 60%),
        radial-gradient(110% 130% at 100% 0%, rgb(190, 212, 252) 0%, rgba(190, 212, 252, 0) 55%),
        radial-gradient(120% 140% at 100% 100%, rgb(248, 196, 230) 0%, rgba(248, 196, 230, 0) 60%),
        rgb(218, 189, 247);
}

.ic-ai-summary__title-icon {
    flex: none;
    color: rgb(98, 52, 160);
}

.ic-ai-summary[hidden],
.ic-ai-summary__meta[hidden],
.ic-ai-summary__regenerate[hidden],
.ic-ai-summary__content[hidden],
.ic-ai-summary__items[hidden],
.ic-ai-summary__no-items[hidden],
.ic-ai-summary__degraded[hidden],
.ic-ai-summary__loading[hidden],
.ic-ai-summary__error[hidden] {
    display: none;
}

.ic-ai-summary__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ic-ai-summary__title {
    margin: 0;
    font-size: var(--ic-detail-fs-heading);
    font-weight: var(--ic-detail-fw-heading);
    color: var(--ic-detail-text);
}

.ic-ai-summary__meta {
    font-size: 12px;
    color: var(--ic-detail-muted);
}

.ic-ai-summary__regenerate,
.ic-ai-summary__retry {
    height: var(--ic-detail-control-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    background: #fff;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.ic-ai-summary__regenerate {
    margin-left: auto;
}

.ic-ai-summary__regenerate:hover,
.ic-ai-summary__retry:hover {
    background: var(--hover);
}

.ic-ai-summary__close {
    width: var(--ic-detail-control-h);
    height: var(--ic-detail-control-h);
    flex: none;
    border: none;
    background: var(--hover);
    border-radius: var(--ic-detail-radius-card);
    color: var(--ic-detail-text);
    font-size: 15px;
    cursor: pointer;
}

.ic-ai-summary__close:hover {
    background: var(--neutral-lighter);
}

.ic-ai-summary__text {
    white-space: pre-wrap;
    font-size: var(--ic-detail-fs-body);
    line-height: var(--ic-detail-lh-body);
    color: var(--ic-detail-text);
}

.ic-ai-summary__degraded {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ic-detail-muted);
}

.ic-ai-summary__items {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.ic-ai-summary__items-title {
    margin: 0 0 8px;
    font-size: var(--ic-detail-fs-heading);
    font-weight: var(--ic-detail-fw-heading);
}

.ic-ai-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ic-ai-summary__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--ic-detail-fs-body);
    line-height: var(--ic-detail-lh-body);
    cursor: pointer;
}

.ic-ai-summary__check input {
    margin-top: 3px;
}

.ic-ai-summary__hint,
.ic-ai-summary__no-items {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ic-detail-muted);
}

.ic-ai-summary__loading,
.ic-ai-summary__error-text {
    font-size: var(--ic-detail-fs-body);
    color: var(--ic-detail-muted);
}

/* Drei animierte Ladepunkte vor dem Text, solange die KI zusammenfasst. */
.ic-ai-summary__loading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ic-ai-dots {
    display: inline-flex;
    gap: 5px;
}

.ic-ai-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(98, 52, 160);
    opacity: 0.25;
    animation: ic-ai-dot 1.2s infinite ease-in-out;
}

.ic-ai-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ic-ai-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ic-ai-dot {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic-ai-dots span {
        animation: none;
        opacity: 0.6;
    }
}

.ic-ai-summary__error-text {
    margin: 0 0 12px;
    color: var(--ic-detail-text);
}

.ic-ai-summary__button {
    gap: 6px;
}

.ic-ai-summary__button:disabled,
.ic-ai-summary__button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ic-ai-summary__setup {
    font-size: 12px;
    color: var(--ic-detail-muted);
}

.ic-ai-summary__regenerate:focus-visible,
.ic-ai-summary__retry:focus-visible,
.ic-ai-summary__close:focus-visible,
.ic-ai-summary__setup:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* --- Integrationen (I1) ------------------------------------------------------------------- */
/* Die Seite /admin/integrations ist im Entwurf nicht vorhanden. Sie setzt sich aus den Bausteinen
   Seitenkopf, Karte (weiß, 1px #16213C, Radius 16), Formularfeld, Hinweis und Button zusammen. */
.ic-integrations {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(720px, 100%);
    margin: 0 auto;
}

.ic-integrations__card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0 0;
}

.ic-integrations__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ic-integrations__actions form {
    margin: 0;
}

/* I2: Tab-Leiste oben rechts neben der Seitenüberschrift. Nutzt die bestehende .ic-tabs/.ic-tab-Optik
   (wie die Aktivitätstabs), nur nach rechts geschoben und ohne eigene Unterstreichung der Leiste. */
.ic-page-head .ic-tabs {
    margin-left: auto;
    border-bottom: none;
}

.ic-page-head .ic-tab {
    margin-bottom: 0;
}

/* I2: Abschnitte "Zugang" und "Verbindung prüfen" in einer Karte klar absetzen. */
.ic-integrations__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ic-integrations__section + .ic-integrations__section {
    border-top: 1px solid #E7E9F0;
    padding-top: 16px;
}

.ic-integrations__section-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

/* I2: Geheimnis-Feldzeile – Eingabe links, "Entfernen"-Knopf in derselben Zeile. */
.ic-secret-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-secret-row input {
    flex: 1;
    min-width: 0;
}

/* I2: Ergebnis der Verbindungsprüfung direkt im Abschnitt. */
.ic-integrations__test {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.ic-integrations__test .ic-flash {
    margin: 0;
}

/* --- Inline-Bearbeitung von Titel und Beschreibung (E1) ------------------------------------ */
/* Stift-Icon an der Überschrift und am Blocktitel: dezent, sichtbar bei Hover und Tastatur-Fokus.
   Im Präsentationsmodus (P12) blendet die Klasse `ic-internal` es aus. */
.ic-block__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ic-block__head .ic-block__title {
    margin: 0;
}

.ic-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--ic-detail-muted);
    cursor: pointer;
    opacity: .45;
    transition: opacity .12s ease, background .12s ease;
}

.ic-block:hover .ic-edit-icon,
.ic-detail__title:hover .ic-edit-icon,
.ic-edit-icon:focus-visible {
    opacity: 1;
}

.ic-edit-icon:hover {
    background: var(--hover);
    color: var(--ic-detail-text);
}

.ic-edit-icon:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

/* Leerzustand: klickbarer Platzhalter "Beschreibung hinzufügen". */
.ic-desc__add {
    align-self: flex-start;
    min-height: 32px;
    padding: 4px 8px;
    margin: -4px -8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--ic-detail-muted);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.ic-desc__add:hover {
    background: var(--hover);
    color: var(--ic-detail-text);
}

.ic-desc__add:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 2px;
}

.ic-desc__add[hidden],
.ic-desc__form[hidden] {
    display: none;
}

.ic-desc__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Titel-Inline-Bearbeitung: der Stift sitzt neben dem Titel, das Textfeld sieht aus wie der
   Titel (24 px/600), bleibt aber ein normales Eingabefeld. */
.ic-detail__title-text {
    cursor: text;
}

.ic-detail__title .ic-edit-icon {
    vertical-align: middle;
}

.ic-detail__title-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--ic-detail-radius-control);
    background: #fff;
    color: var(--ic-detail-text);
    font-family: inherit;
    font-size: var(--ic-detail-fs-title);
    font-weight: var(--ic-detail-fw-title);
    line-height: var(--ic-detail-lh-title);
}

.ic-detail__title-input:focus-visible {
    outline: 2px solid var(--ic-detail-focus);
    outline-offset: 1px;
}

.ic-detail__title-input[hidden] {
    display: none;
}

.ic-field-error {
    display: block;
    margin-top: 4px;
    color: #C62828;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.ic-field-error[hidden] {
    display: none;
}

/* Sprint-Abschnitte im Backlog ein-/ausklappen: großer Pfeil, dreht sich um 90 Grad (offen = unten, zu = rechts). */
.ic-sprint__toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #16213C;
    cursor: pointer;
}

.ic-sprint__toggle:hover {
    background: rgba(22, 33, 60, 0.08);
}

.ic-sprint__toggle svg {
    transition: transform 0.15s ease;
}

.ic-sprint__toggle[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .ic-sprint__toggle svg {
        transition: none;
    }
}