/* AresGit – Designsystem im GitHub-Stil.
   Farben als Tokens; hell ist Standard, dunkel über data-theme="dark" oder data-theme="auto" + Systemeinstellung. */

:root {
    color-scheme: light;

    --bg: #ffffff;
    --bg-muted: #f6f8fa;
    --bg-inset: #f6f8fa;
    --bg-overlay: #ffffff;
    --bg-header: #f6f8fa;
    --bg-hover: #818b981a;

    --fg: #1f2328;
    --fg-muted: #59636e;

    --border: #d1d9e0;
    --border-muted: #d1d9e0b3;

    --accent: #0969da;
    --accent-muted: #ddf4ff;
    --accent-border: #54aeff66;
    --success: #1a7f37;
    --success-muted: #dafbe1;
    --success-border: #4ac26b66;
    --danger: #d1242f;
    --danger-muted: #ffebe9;
    --danger-border: #ff818266;
    --attention: #9a6700;
    --attention-muted: #fff8c5;
    --attention-border: #d4a72c66;
    --done: #8250df;
    --open-emphasis: #1f883d;
    --done-emphasis: #8250df;
    --closed-emphasis: #59636e;
    --danger-emphasis: #cf222e;

    --btn-bg: #f6f8fa;
    --btn-hover-bg: #eff2f5;
    --btn-border: #d1d9e0;
    --btn-primary-bg: #1f883d;
    --btn-primary-hover-bg: #1c8139;
    --btn-primary-border: #1f232826;
    --btn-danger-fg: #d1242f;
    --btn-danger-hover-bg: #a40e26;

    --input-bg: #ffffff;
    --focus: #0969da;
    --shadow-overlay: 0 1px 3px #1f23281f, 0 8px 24px #424a531f;

    --logo-bg: #c0362c;
    --logo-fg: #ffffff;

    --radius: 6px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1117;
    --bg-muted: #151b23;
    --bg-inset: #010409;
    --bg-overlay: #151b23;
    --bg-header: #010409;
    --bg-hover: #656c7633;

    --fg: #f0f6fc;
    --fg-muted: #9198a1;

    --border: #3d444d;
    --border-muted: #3d444db3;

    --accent: #4493f8;
    --accent-muted: #388bfd1a;
    --accent-border: #388bfd66;
    --success: #3fb950;
    --success-muted: #2ea04326;
    --success-border: #2ea04366;
    --danger: #f85149;
    --danger-muted: #f851491a;
    --danger-border: #f8514966;
    --attention: #d29922;
    --attention-muted: #bb800926;
    --attention-border: #bb800966;
    --done: #ab7df8;
    --open-emphasis: #238636;
    --done-emphasis: #8957e5;
    --closed-emphasis: #656c76;
    --danger-emphasis: #da3633;

    --btn-bg: #212830;
    --btn-hover-bg: #262c36;
    --btn-border: #3d444d;
    --btn-primary-bg: #238636;
    --btn-primary-hover-bg: #29903b;
    --btn-primary-border: #ffffff1a;
    --btn-danger-fg: #fa5e55;
    --btn-danger-hover-bg: #b62324;

    --input-bg: #0d1117;
    --focus: #1f6feb;
    --shadow-overlay: 0 0 0 1px #3d444d, 0 8px 24px #010409;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;

        --bg: #0d1117;
        --bg-muted: #151b23;
        --bg-inset: #010409;
        --bg-overlay: #151b23;
        --bg-header: #010409;
        --bg-hover: #656c7633;

        --fg: #f0f6fc;
        --fg-muted: #9198a1;

        --border: #3d444d;
        --border-muted: #3d444db3;

        --accent: #4493f8;
        --accent-muted: #388bfd1a;
        --accent-border: #388bfd66;
        --success: #3fb950;
        --success-muted: #2ea04326;
        --success-border: #2ea04366;
        --danger: #f85149;
        --danger-muted: #f851491a;
        --danger-border: #f8514966;
        --attention: #d29922;
        --attention-muted: #bb800926;
        --attention-border: #bb800966;
        --done: #ab7df8;
        --open-emphasis: #238636;
        --done-emphasis: #8957e5;
        --closed-emphasis: #656c76;
        --danger-emphasis: #da3633;

        --btn-bg: #212830;
        --btn-hover-bg: #262c36;
        --btn-border: #3d444d;
        --btn-primary-bg: #238636;
        --btn-primary-hover-bg: #29903b;
        --btn-primary-border: #ffffff1a;
        --btn-danger-fg: #fa5e55;
        --btn-danger-hover-bg: #b62324;

        --input-bg: #0d1117;
        --focus: #1f6feb;
        --shadow-overlay: 0 0 0 1px #3d444d, 0 8px 24px #010409;
    }
}

/* Syntax-Highlighting (Farben wie die „prettylights“ von GitHub) und Code-Browser. */

:root {
    --hl-comment: #59636e;
    --hl-constant: #0550ae;
    --hl-entity: #6639ba;
    --hl-tag: #116329;
    --hl-keyword: #cf222e;
    --hl-string: #0a3069;
    --hl-variable: #953800;
    --hl-heading: #0550ae;
    --hl-inserted: #116329;
    --hl-inserted-bg: #dafbe1;
    --hl-deleted: #82071e;
    --hl-deleted-bg: #ffebe9;
    --icon-directory: #54aeff;
    --line-target-bg: #fff8c5;
    --diff-added-bg: #e6ffec;
    --diff-added-num-bg: #ccffd8;
    --diff-deleted-bg: #ffebe9;
    --diff-deleted-num-bg: #ffd7d5;
    --diff-hunk-bg: #ddf4ff;
}

:root[data-theme="dark"] {
    --hl-comment: #9198a1;
    --hl-constant: #79c0ff;
    --hl-entity: #d2a8ff;
    --hl-tag: #7ee787;
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-variable: #ffa657;
    --hl-heading: #1f6feb;
    --hl-inserted: #aff5b4;
    --hl-inserted-bg: #033a16;
    --hl-deleted: #ffdcd7;
    --hl-deleted-bg: #67060c;
    --icon-directory: #54aeff;
    --line-target-bg: #bb800926;
    --diff-added-bg: #2ea04326;
    --diff-added-num-bg: #3fb9504d;
    --diff-deleted-bg: #f851491a;
    --diff-deleted-num-bg: #f851494d;
    --diff-hunk-bg: #388bfd1a;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --hl-comment: #9198a1;
        --hl-constant: #79c0ff;
        --hl-entity: #d2a8ff;
        --hl-tag: #7ee787;
        --hl-keyword: #ff7b72;
        --hl-string: #a5d6ff;
        --hl-variable: #ffa657;
        --hl-heading: #1f6feb;
        --hl-inserted: #aff5b4;
        --hl-inserted-bg: #033a16;
        --hl-deleted: #ffdcd7;
        --hl-deleted-bg: #67060c;
        --icon-directory: #54aeff;
        --line-target-bg: #bb800926;
        --diff-added-bg: #2ea04326;
        --diff-added-num-bg: #3fb9504d;
        --diff-deleted-bg: #f851491a;
        --diff-deleted-num-bg: #f851494d;
        --diff-hunk-bg: #388bfd1a;
    }
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0 0 8px;
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

.h3 { font-size: 20px; }

p {
    margin: 0 0 16px;
}

code, kbd {
    font-family: var(--font-mono);
    font-size: 12px;
}

kbd {
    display: inline-block;
    padding: 3px 6px;
    line-height: 1.2;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: inset 0 -1px 0 var(--border-muted);
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

/* Überschriften bekommen den Fokus nach einer Navigation nur für Screenreader, ohne Rahmen. */
h1[tabindex="-1"]:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 1000;
    padding: 8px 16px;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 8px;
}

.icon {
    flex: none;
    vertical-align: text-bottom;
}

/* ---------- Seitenrahmen ---------- */

.app-main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px;
}

.container-md {
    max-width: 768px;
}

@media (min-width: 768px) {
    .container {
        padding: 32px 24px;
    }
}

.app-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

@media (min-width: 768px) {
    .header-inner {
        padding: 12px 24px;
    }
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-size: 16px;
    font-weight: 600;
}

.header-logo:hover {
    text-decoration: none;
}

.header-nav {
    display: flex;
    gap: 4px;
}

.header-nav a {
    padding: 4px 8px;
    color: var(--fg);
    font-weight: 500;
    border-radius: var(--radius);
}

.header-nav a:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.header-nav a.active {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--logo-bg);
    border-radius: 0;
}

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

/* Auf schmalen Bildschirmen reicht der Platz nicht; Übersicht (Logo) und Administration (Benutzermenü) bleiben erreichbar. */
@media (max-width: 543px) {
    .header-nav {
        display: none;
    }
}

.header-avatar {
    border-radius: 50%;
}

.app-footer {
    color: var(--fg-muted);
    font-size: 12px;
    border-top: 1px solid var(--border-muted);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px;
}

.footer-version {
    margin-left: auto;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg);
    font-weight: 600;
}

/* ---------- Dropdown (details/summary, ohne JavaScript bedienbar) ---------- */

.dropdown {
    position: relative;
}

.dropdown > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

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

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 100;
    width: 240px;
    padding: 8px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-overlay);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}

.dropdown-name {
    font-weight: 600;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    color: var(--fg);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.dropdown-item .icon {
    color: var(--fg-muted);
}

.dropdown-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.dropdown-divider {
    height: 1px;
    margin: 8px -8px;
    background: var(--border-muted);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--fg);
    white-space: nowrap;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 80ms ease;
}

.btn:hover {
    background: var(--btn-hover-bg);
    text-decoration: none;
}

.btn .icon {
    color: var(--fg-muted);
}

.btn-primary {
    color: #ffffff;
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
}

.btn-primary .icon {
    color: inherit;
}

.btn-danger {
    color: var(--btn-danger-fg);
}

.btn-danger:hover {
    color: #ffffff;
    background: var(--btn-danger-hover-bg);
    border-color: var(--btn-danger-hover-bg);
}

.btn-sm {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn + .btn {
    margin-left: 4px;
}

/* ---------- Formulare ---------- */

.form-group {
    margin: 0 0 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.label-link {
    font-size: 12px;
}

.form-control {
    display: block;
    width: 100%;
    max-width: 440px;
    min-height: 32px;
    padding: 5px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fg);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.form-control:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: inset 0 0 0 1px var(--focus);
}

.form-control[disabled] {
    color: var(--fg-muted);
    background: var(--bg-muted);
    cursor: not-allowed;
}

.form-control.invalid {
    border-color: var(--danger);
}

textarea.form-control {
    min-height: 72px;
    resize: vertical;
}

.form-control-code {
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
}

.input-mono {
    max-width: none;
    font-family: var(--font-mono);
    font-size: 12px;
}

.note {
    margin: 4px 0 0;
    color: var(--fg-muted);
    font-size: 12px;
    font-weight: 400;
}

.validation-message {
    margin-top: 4px;
    color: var(--danger);
    font-size: 12px;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    cursor: pointer;
}

.checkbox input {
    margin: 3px 0 0;
}

/* ---------- Meldungen ---------- */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--fg);
    background: var(--accent-muted);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
}

.flash > .icon {
    margin-top: 2px;
    color: var(--accent);
}

.flash-success {
    background: var(--success-muted);
    border-color: var(--success-border);
}

.flash-success > .icon {
    color: var(--success);
}

.flash-error {
    background: var(--danger-muted);
    border-color: var(--danger-border);
}

.flash-error > .icon {
    color: var(--danger);
}

.flash-warn {
    background: var(--attention-muted);
    border-color: var(--attention-border);
}

.flash-warn > .icon {
    color: var(--attention);
}

.flash-list {
    margin: 0;
    padding-left: 16px;
}

/* ---------- Boxen, Labels, Überschriften ---------- */

.box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}

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

.box-body {
    padding: 16px;
}

.box-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-muted);
}

.box-row:first-child,
.box-header + .box-row {
    border-top: 0;
}

.label {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--fg-muted);
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 2em;
}

.label-success {
    color: var(--success);
    border-color: var(--success-border);
}

.label-attention {
    color: var(--attention);
    border-color: var(--attention-border);
}

.label-accent {
    color: var(--accent);
    border-color: var(--accent-border);
}

.subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-muted);
}

.subhead-heading {
    flex: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

.subhead-spacious {
    margin-top: 40px;
}

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size, 20px);
    height: var(--avatar-size, 20px);
    font-size: calc(var(--avatar-size, 20px) * 0.45);
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: hsl(var(--avatar-hue, 210) 50% 45%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-muted);
    user-select: none;
}

/* ---------- Seiten mit Seitenleiste (Einstellungen, Administration) ---------- */

.context-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.context-title {
    font-size: 20px;
    font-weight: 600;
}

.context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--fg-muted);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
}

.layout-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .layout-sidebar {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (min-width: 1012px) {
    .layout-sidebar {
        grid-template-columns: 256px minmax(0, 1fr);
    }
}

.layout-main {
    min-width: 0;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: var(--fg);
    border-radius: var(--radius);
}

.side-nav a .icon {
    color: var(--fg-muted);
}

.side-nav a:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.side-nav a.active {
    font-weight: 600;
    background: var(--bg-hover);
}

.side-nav a.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: var(--accent);
    border-radius: var(--radius);
}

.side-nav-heading {
    margin-top: 8px;
    padding: 12px 8px 4px;
    color: var(--fg-muted);
    font-size: 12px;
    font-weight: 600;
    border-top: 1px solid var(--border-muted);
}

/* ---------- Anmeldung, Einladung, Einrichtung ---------- */

.auth-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 48px;
}

.auth-logo {
    margin: 8px 0 24px;
}

.auth-title {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-align: center;
}

.auth-column {
    width: 100%;
    max-width: 340px;
}

.auth-column-wide {
    max-width: 440px;
}

.auth-lead {
    color: var(--fg-muted);
    text-align: center;
}

.auth-box {
    padding: 16px;
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
}

.auth-box .form-control {
    max-width: none;
}

.auth-icon {
    margin-bottom: 8px;
    color: var(--fg-muted);
    text-align: center;
}

.auth-callout {
    margin-top: 16px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.auth-footer {
    padding: 24px 16px;
    color: var(--fg-muted);
    font-size: 12px;
    text-align: center;
}

.divider-text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    color: var(--fg-muted);
    font-size: 12px;
}

.divider-text::before,
.divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---------- Übersicht ---------- */

.dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .dashboard {
        grid-template-columns: 296px minmax(0, 1fr);
    }
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sidebar-heading h2 {
    margin: 0;
    font-size: 14px;
}

.dashboard-greeting {
    margin-bottom: 16px;
    font-size: 20px;
}

.blankslate {
    padding: 32px 24px;
    text-align: center;
}

.blankslate > .icon {
    margin-bottom: 8px;
    color: var(--fg-muted);
}

.blankslate h3,
.blankslate .h3 {
    margin-bottom: 4px;
}

.blankslate p {
    max-width: 480px;
    margin: 0 auto 16px;
    color: var(--fg-muted);
}

.not-found-code {
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 600;
    color: var(--fg-muted);
}

/* ---------- Darstellung ---------- */

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.theme-option {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.theme-option:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.theme-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 88px;
    padding: 12px;
}

.theme-preview-light { background: #ffffff; --p-bar: #f6f8fa; --p-line: #d1d9e0; }
.theme-preview-dark { background: #0d1117; --p-bar: #151b23; --p-line: #3d444d; }
.theme-preview-auto { background: linear-gradient(135deg, #ffffff 50%, #0d1117 50%); --p-bar: #8b949e55; --p-line: #8b949e88; }

.theme-preview-bar {
    height: 16px;
    background: var(--p-bar);
    border: 1px solid var(--p-line);
    border-radius: 4px;
}

.theme-preview-line {
    width: 70%;
    height: 8px;
    background: var(--p-line);
    border-radius: 4px;
}

.theme-preview-line.short {
    width: 40%;
}

.theme-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    background: var(--bg-muted);
    border-top: 1px solid var(--border);
}

/* ---------- Zwei-Faktor ---------- */

.steps {
    margin: 0;
    padding-left: 20px;
}

.steps > li {
    margin-bottom: 24px;
}

.steps > li > p {
    margin: 2px 0 12px;
}

.qr-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.qr-code {
    padding: 8px;
    line-height: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.qr-code svg {
    width: 176px;
    height: 176px;
}

.secret-key {
    font-size: 14px;
    letter-spacing: 0.05em;
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 8px 32px;
    padding: 16px 24px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.recovery-codes code {
    font-size: 14px;
}

/* ---------- Repositories ---------- */

.repo-header {
    border-bottom: 1px solid var(--border);
}

.repo-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 16px 0;
}

@media (min-width: 768px) {
    .repo-header-inner {
        padding: 16px 24px 0;
    }
}

.repo-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.repo-title strong a {
    font-weight: 600;
}

.underline-nav {
    display: flex;
    gap: 8px;
    margin-bottom: -1px;
    overflow-x: auto;
}

.underline-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 10px;
    color: var(--fg);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.underline-nav a .icon {
    color: var(--fg-muted);
}

.underline-nav a:hover {
    text-decoration: none;
    border-bottom-color: var(--border);
}

.underline-nav a.active {
    font-weight: 600;
    border-bottom-color: var(--logo-bg);
}

.repo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 1012px) {
    .repo-layout {
        grid-template-columns: minmax(0, 1fr) 296px;
    }
}

.repo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.repo-toolbar-end {
    margin-left: auto;
}

.repo-sidebar p {
    overflow-wrap: anywhere;
}

.repo-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.repo-facts li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--fg-muted);
}

.repo-list-row {
    align-items: flex-start;
}

.repo-list-row > .icon {
    margin-top: 3px;
}

.repo-list-name {
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.repo-list-description {
    margin: 4px 0;
    color: var(--fg-muted);
}

.sidebar-repos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-repos li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
}

.sidebar-repos a {
    color: var(--fg);
    font-weight: 600;
}

.code-block-wrap {
    position: relative;
}

.code-block {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.code-block-copy {
    position: absolute;
    top: 8px;
    right: 8px;
}

.dropdown-menu-wide {
    width: 400px;
    max-width: calc(100vw - 32px);
    padding: 16px;
}

.dropdown-title {
    margin-bottom: 8px;
    font-weight: 600;
}

/* ---------- Code-Browser ---------- */

.dropdown-menu-start {
    left: 0;
    right: auto;
}

.ref-selector > summary {
    max-width: 240px;
}

.ref-selector-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-selector-menu {
    width: 300px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
}

.ref-selector-menu .note {
    margin: 4px 8px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    min-width: 0;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.breadcrumbs-separator {
    color: var(--fg-muted);
}

.commit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    width: 100%;
    min-width: 0;
}

.commit-bar-subject {
    flex: 1 1 160px;
    min-width: 0;
    color: var(--fg-muted);
}

.commit-bar-subject:hover {
    color: var(--accent);
}

.commit-bar-meta a {
    color: inherit;
}

.commit-bar-meta,
.commit-bar-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fg-muted);
    white-space: nowrap;
}

.commit-bar-count strong {
    color: var(--fg);
}

a.commit-bar-count:hover,
a.commit-bar-count:hover strong {
    color: var(--accent);
    text-decoration: none;
}

.commit-box {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-muted);
}

.files-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    gap: 16px;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--border-muted);
}

.files-row:first-child {
    border-top: 0;
}

.files-row:hover {
    background: var(--bg-muted);
}

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

.files-name a {
    color: var(--fg);
}

.files-name a:hover {
    color: var(--accent);
}

.files-age {
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .files-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .files-message {
        display: none;
    }
}

.icon-directory {
    color: var(--icon-directory);
}

.readme .box-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.readme .box-body {
    padding: 24px 32px;
}

@media (max-width: 767px) {
    .readme .box-body {
        padding: 16px;
    }
}

.readme-text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.file-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.file-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.file-actions > .btn + .btn {
    margin-left: 0;
}

.segmented {
    display: inline-flex;
}

.segmented > .btn {
    border-radius: 0;
}

.segmented > .btn + .btn {
    margin-left: -1px;
}

.segmented > .btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.segmented > .btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.segmented > .btn.selected {
    position: relative;
    font-weight: 600;
    background: var(--bg);
}

.file-image {
    padding: 16px;
    text-align: center;
}

.file-image img {
    max-width: 100%;
    background: repeating-conic-gradient(var(--bg-muted) 0% 25%, var(--bg) 0% 50%) 50% / 16px 16px;
}

.file-markdown {
    padding: 32px;
}

@media (max-width: 767px) {
    .file-markdown {
        padding: 16px;
    }
}

.file-message {
    padding: 32px 16px;
    text-align: center;
}

.code-view {
    overflow-x: auto;
}

.code-table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
}

.code-num {
    width: 1%;
    min-width: 50px;
    padding: 0 8px 0 16px;
    text-align: right;
    vertical-align: top;
    user-select: none;
}

.code-num a {
    display: block;
    color: var(--fg-muted);
}

.code-num a::before {
    content: attr(data-line);
}

.code-num a:hover {
    color: var(--fg);
    text-decoration: none;
}

.code-line {
    padding: 0 16px 0 8px;
    white-space: pre;
    vertical-align: top;
    tab-size: 4;
}

.code-table tr:has(a:target) {
    background: var(--line-target-bg);
}

.hl-c { color: var(--hl-comment); }
.hl-c1 { color: var(--hl-constant); }
.hl-s { color: var(--hl-string); }
.hl-sr { color: var(--hl-tag); }
.hl-k { color: var(--hl-keyword); }
.hl-en { color: var(--hl-entity); }
.hl-ent { color: var(--hl-tag); }
.hl-v { color: var(--hl-variable); }
.hl-mh { color: var(--hl-heading); font-weight: 600; }
.hl-mb { font-weight: 600; }
.hl-mi { font-style: italic; }
.hl-mi1 { color: var(--hl-inserted); background: var(--hl-inserted-bg); }
.hl-md { color: var(--hl-deleted); background: var(--hl-deleted-bg); }
.hl-ii { color: var(--danger); }

/* ---------- Verlauf, Commits und Diffs ---------- */

.repo-toolbar-title {
    margin: 0;
    font-size: 16px;
}

.btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.btn-invisible {
    background: none;
    border-color: transparent;
}

.commit-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--fg-muted);
}

.commit-group-title:first-of-type {
    margin-top: 0;
}

.commit-row {
    flex-wrap: wrap;
}

.commit-row-main {
    flex: 1 1 240px;
    min-width: 0;
}

.commit-row-title {
    font-weight: 600;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.commit-row-title:hover {
    color: var(--accent);
}

.commit-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--fg-muted);
}

.commit-row-meta strong {
    color: var(--fg);
}

.commit-row-actions {
    display: flex;
    flex: none;
    gap: 4px;
}

.commit-row-actions > .btn + .btn {
    margin-left: 0;
}

.commit-sha code {
    font-size: 12px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.pagination > .btn + .btn {
    margin-left: 0;
}

.commit-header {
    margin-bottom: 16px;
}

.commit-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px;
}

.commit-header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.commit-header-body {
    margin: 0;
    padding: 0 16px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.commit-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--fg-muted);
    background: var(--bg-muted);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.commit-header-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.commit-header-people strong {
    color: var(--fg);
}

.commit-header-ids {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-left: auto;
}

/* Als Flex-Elemente bekommen Text und Links Abstand, auch wo Razor den Leerraum dazwischen entfernt. */
.commit-header-ids > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.commit-header-ids code {
    color: var(--fg);
}

.diff-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.diff-count-added {
    color: var(--success);
}

.diff-count-deleted {
    color: var(--danger);
}

.diff-counts {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.diffstat {
    display: inline-flex;
    gap: 1px;
}

.diffstat-block {
    width: 8px;
    height: 8px;
    background: var(--border);
    border-radius: 1px;
}

.diffstat-added {
    background: var(--success);
}

.diffstat-deleted {
    background: var(--danger);
}

.diff-summary {
    margin-bottom: 16px;
}

.diff-summary-list {
    max-height: 320px;
    margin: 0;
    padding: 8px 16px;
    overflow-y: auto;
    list-style: none;
}

.diff-summary-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 12px;
}

.diff-summary-list a {
    color: var(--fg);
}

.diff-summary-list .diff-counts {
    margin-left: auto;
}

.diff-file {
    margin-bottom: 16px;
}

.diff-file > summary {
    list-style: none;
}

.diff-file > summary::-webkit-details-marker {
    display: none;
}

/* Bleibt beim Scrollen durch lange Dateien oben stehen. */
.diff-file-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
}

.diff-file:not([open]) > .diff-file-header {
    border-bottom: 0;
    border-radius: var(--radius);
}

.diff-file-chevron {
    color: var(--fg-muted);
    transition: transform 80ms ease;
}

.diff-file:not([open]) .diff-file-chevron {
    transform: rotate(-90deg);
}

.diff-file-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.diff-file-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.diff-message {
    padding: 24px 16px;
    color: var(--fg-muted);
    text-align: center;
}

.diff-view {
    overflow-x: auto;
}

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
}

.diff-view-split .diff-table {
    table-layout: fixed;
}

.diff-num-col {
    width: 56px;
}

.diff-num {
    width: 1%;
    min-width: 50px;
    padding: 0 8px;
    color: var(--fg-muted);
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
    user-select: none;
}

.diff-num::before {
    content: attr(data-line);
}

.diff-code {
    position: relative;
    padding: 0 16px 0 22px;
    white-space: pre;
    vertical-align: top;
    tab-size: 4;
}

.diff-view-split .diff-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Die Markierung kommt per CSS, damit sie beim Kopieren nicht mitkommt. */
.diff-code.diff-added::before,
.diff-code.diff-deleted::before {
    position: absolute;
    left: 8px;
    user-select: none;
}

.diff-code.diff-added::before {
    content: "+";
}

.diff-code.diff-deleted::before {
    content: "-";
}

.diff-view-split td:nth-child(3) {
    border-left: 1px solid var(--border-muted);
}

td.diff-added {
    background: var(--diff-added-bg);
}

td.diff-num.diff-added {
    color: var(--fg);
    background: var(--diff-added-num-bg);
}

td.diff-deleted {
    background: var(--diff-deleted-bg);
}

td.diff-num.diff-deleted {
    color: var(--fg);
    background: var(--diff-deleted-num-bg);
}

td.diff-empty {
    background: var(--bg-muted);
}

.diff-hunk-row td {
    color: var(--fg-muted);
    background: var(--diff-hunk-bg);
}

.diff-hunk {
    padding: 4px 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-eof {
    margin-left: 4px;
    color: var(--danger);
    user-select: none;
}

/* ---------- Branches und Tags ---------- */

.branch-group-title {
    margin: 24px 0 8px;
    font-size: 14px;
}

.branch-group-title:first-of-type {
    margin-top: 0;
}

.branch-row,
.tag-row {
    flex-wrap: wrap;
}

.branch-row-main,
.tag-row-main {
    flex: 1 1 240px;
    min-width: 0;
}

.branch-name,
.tag-name {
    font-weight: 600;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.tag-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.tag-name .icon {
    color: var(--fg-muted);
}

.branch-row-meta,
.tag-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    margin-top: 4px;
    font-size: 12px;
    color: var(--fg-muted);
}

.branch-row-meta strong {
    color: var(--fg);
}

.tag-row-meta a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-muted);
}

.tag-row-meta a:hover {
    color: var(--accent);
}

.tag-row-message {
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.branch-compare {
    display: inline-flex;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-muted);
    white-space: nowrap;
}

.branch-row-actions {
    display: flex;
    gap: 4px;
}

.branch-row-actions > .btn + .btn {
    margin-left: 0;
}

/* ---------- Markdown ---------- */

.markdown-body {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.markdown-body > :first-child {
    margin-top: 0 !important;
}

.markdown-body > :last-child {
    margin-bottom: 0 !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 24px 0 16px;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.5em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; color: var(--fg-muted); }

.markdown-body h1,
.markdown-body h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border-muted);
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body details,
.markdown-body .markdown-alert {
    margin: 0 0 16px;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 2em;
}

.markdown-body li + li {
    margin-top: 0.25em;
}

.markdown-body li > ul,
.markdown-body li > ol {
    margin-bottom: 0;
}

.markdown-body .contains-task-list {
    padding-left: 0;
    list-style: none;
}

.markdown-body .task-list-item input {
    margin: 0 0.35em 0.25em 0;
    vertical-align: middle;
}

.markdown-body blockquote {
    padding: 0 1em;
    color: var(--fg-muted);
    border-left: 0.25em solid var(--border);
}

.markdown-body hr {
    height: 0.25em;
    margin: 24px 0;
    padding: 0;
    background: var(--border);
    border: 0;
}

.markdown-body img {
    max-width: 100%;
    box-sizing: content-box;
}

.markdown-body code,
.markdown-body tt {
    padding: 0.2em 0.4em;
    font-size: 85%;
    white-space: break-spaces;
    background: var(--bg-hover);
    border-radius: var(--radius);
}

.markdown-body pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.markdown-body pre code {
    padding: 0;
    font-size: 100%;
    white-space: pre;
    background: transparent;
}

.markdown-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    padding: 6px 13px;
    border: 1px solid var(--border);
}

.markdown-body th {
    font-weight: 600;
}

.markdown-body tr:nth-child(2n) {
    background: var(--bg-muted);
}

.markdown-body kbd {
    font-size: 11px;
}

.markdown-body .footnotes {
    font-size: 12px;
    color: var(--fg-muted);
}

.markdown-body .markdown-alert {
    padding: 8px 16px;
    border-left: 0.25em solid var(--border);
}

.markdown-body .markdown-alert > :last-child {
    margin-bottom: 0;
}

.markdown-body .markdown-alert-title {
    margin-bottom: 4px;
    font-weight: 500;
}

.markdown-body .markdown-alert-note { border-left-color: var(--accent); }
.markdown-body .markdown-alert-note .markdown-alert-title { color: var(--accent); }
.markdown-body .markdown-alert-tip { border-left-color: var(--success); }
.markdown-body .markdown-alert-tip .markdown-alert-title { color: var(--success); }
.markdown-body .markdown-alert-important { border-left-color: var(--hl-entity); }
.markdown-body .markdown-alert-important .markdown-alert-title { color: var(--hl-entity); }
.markdown-body .markdown-alert-warning { border-left-color: var(--attention); }
.markdown-body .markdown-alert-warning .markdown-alert-title { color: var(--attention); }
.markdown-body .markdown-alert-caution { border-left-color: var(--danger); }
.markdown-body .markdown-alert-caution .markdown-alert-title { color: var(--danger); }

/* ---------- Issues ---------- */

.state-open { color: var(--success); }
.state-done { color: var(--done); }
.state-not-planned { color: var(--fg-muted); }
.state-closed { color: var(--danger); }

.issue-states {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.issue-states a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-muted);
}

.issue-states a:hover {
    color: var(--fg);
    text-decoration: none;
}

.issue-states a.selected {
    font-weight: 600;
    color: var(--fg);
}

.issue-row {
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
}

.issue-row:hover {
    background: var(--bg-muted);
}

.issue-state-icon {
    display: inline-flex;
    flex: none;
    margin-top: 3px;
}

.issue-row-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.issue-row-title:hover {
    color: var(--accent);
}

.issue-row-meta,
.collaborator-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
}

.issue-row-meta {
    margin-top: 2px;
    color: var(--fg-muted);
    font-size: 12px;
}

.issue-row-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: var(--fg-muted);
    font-size: 12px;
    white-space: nowrap;
}

.issue-row-comments:hover {
    color: var(--accent);
    text-decoration: none;
}

.issue-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-muted);
}

.issue-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.issue-title {
    flex: 1;
    min-width: min(100%, 320px);
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.issue-title-actions {
    display: flex;
    gap: 8px;
}

.issue-title-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.issue-title-form .form-control {
    flex: 1;
    min-width: min(100%, 240px);
    font-size: 16px;
}

.issue-title-actions .btn + .btn,
.issue-title-form .btn + .btn,
.comment-form-actions .btn + .btn {
    margin-left: 0;
}

.issue-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.state-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    border-radius: 2em;
}

.state-badge.state-open,
.timeline-badge.state-open {
    color: #ffffff;
    background: var(--open-emphasis);
}

.state-badge.state-done,
.timeline-badge.state-done {
    color: #ffffff;
    background: var(--done-emphasis);
}

.state-badge.state-not-planned,
.timeline-badge.state-not-planned {
    color: #ffffff;
    background: var(--closed-emphasis);
}

.state-badge.state-closed,
.timeline-badge.state-closed {
    color: #ffffff;
    background: var(--danger-emphasis);
}

/* Timeline: Beiträge mit Avatar links, dazwischen Ereignisse auf einer senkrechten Linie. */
.timeline,
.timeline-new-comment {
    --timeline-indent: 0px;
}

@media (min-width: 768px) {
    .timeline,
    .timeline-new-comment {
        --timeline-indent: 56px;
    }
}

.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--timeline-indent) + 15px);
    width: 2px;
    background: var(--border-muted);
}

.timeline-comment {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.timeline-avatar {
    display: none;
}

@media (min-width: 768px) {
    .timeline-avatar {
        display: inline-flex;
    }
}

.comment {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 8px 4px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.comment-header-text {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0 4px;
    min-width: 0;
}

.comment-body {
    padding: 16px;
}

.comment-body.markdown-body {
    font-size: 14px;
}

.comment-form-body {
    padding: 8px;
}

.comment-textarea {
    min-height: 100px;
    font-size: 14px;
    line-height: 1.5;
}

.comment-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.comment-menu {
    width: 200px;
}

.dropdown-item-danger,
.dropdown-item-danger .icon {
    color: var(--danger);
}

.dropdown-item-danger:hover,
.dropdown-item-danger:hover .icon {
    color: #ffffff;
    background: var(--btn-danger-hover-bg);
}

.timeline-event {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px var(--timeline-indent);
}

.timeline-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--fg-muted);
    background: var(--bg-muted);
    border: 2px solid var(--bg);
    border-radius: 50%;
}

.timeline-event-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--fg-muted);
    overflow-wrap: anywhere;
}

.timeline-new-comment {
    padding-top: 16px;
    border-top: 2px solid var(--border-muted);
}

.sidebar-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-muted);
}

.sidebar-heading {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-muted);
}

.participants {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-link-danger {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
}

.btn-link-danger:hover {
    color: var(--danger);
}

/* Labels: Pille in der Farbe des Labels, Schrift je nach Helligkeit (LabelBadge). */
.issue-label {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    background: var(--label-color);
    border-radius: 2em;
}

.issue-label-light-text {
    color: #ffffff;
}

.issue-label-dark-text {
    color: #1f2328;
    box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.15);
}

a.issue-label:hover {
    text-decoration: none;
    filter: brightness(0.92);
}

/* Sonst gewinnt „.btn + .btn“, wenn vor dem Knopf am Ende ein anderer steht (z. B. „Filter zurücksetzen“). */
.repo-toolbar > .repo-toolbar-end {
    margin-left: auto;
}

.issue-meta .label {
    gap: 4px;
}

.issue-row-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.issue-row-side {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    margin-top: 3px;
}

.issue-row-milestone,
.issue-row-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-muted);
}

.issue-row-milestone:hover {
    color: var(--accent);
    text-decoration: none;
}

.avatar-stack {
    display: inline-flex;
}

.avatar-stack > a + a {
    margin-left: -6px;
}

.avatar-stack .avatar {
    box-shadow: 0 0 0 2px var(--bg);
}

.issue-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.issue-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.filter-menu {
    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
}

.filter-menu .dropdown-item {
    min-width: 0;
}

/* Einträge, mit denen die Suche zu lang würde: ohne Link. */
.filter-menu .dropdown-item[aria-disabled="true"],
.issue-states a[aria-disabled="true"] {
    color: var(--fg-muted);
    cursor: not-allowed;
}

.filter-menu .dropdown-item[aria-disabled="true"]:hover {
    background: none;
}

/*
 * Bis zur breiten Ansicht brechen die Filter um, und rechtsbündige Menüs am linken Rand ragten aus dem Bildschirm.
 * Dort hängen sie deshalb links unter der Kopfzeile der Liste.
 */
@media (max-width: 1011px) {
    .issue-list-header {
        position: relative;
    }

    .issue-filters .dropdown {
        position: static;
    }

    .issue-filters .filter-menu {
        top: calc(100% + 4px);
        left: 8px;
        right: auto;
        max-width: calc(100% - 16px);
    }
}

/* Suche über der Issue-Liste: nimmt den freien Platz der Leiste, auf schmalen Bildschirmen eine eigene Zeile. */
.issue-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.issue-search .form-control {
    max-width: none;
    padding-left: 32px;
    padding-right: 40px;
}

.issue-search-help {
    position: absolute;
    top: 2px;
    right: 2px;
}

.issue-search-help > summary {
    height: 28px;
    padding: 0 6px;
}

.issue-search-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    color: var(--fg-muted);
    pointer-events: none;
}

.search-help-list {
    margin: 8px 0 0;
}

.search-help-list dt {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.search-help-list dd {
    margin: 2px 0 0;
    color: var(--fg-muted);
    font-size: 12px;
}

.search-help-list code,
.search-ignored {
    padding: 0.2em 0.4em;
    background: var(--bg-hover);
    border-radius: var(--radius);
}

.search-ignored {
    margin-left: 4px;
    overflow-wrap: anywhere;
}

.issue-query-reset {
    margin: 0 0 16px;
    font-weight: 600;
}

.issue-query-reset a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pinned-issues {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.pinned-issue {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
}

/* Reaktionen unter Beiträgen. */
.reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 16px 16px;
}

.reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 2em;
}

button.reaction,
summary.reaction {
    cursor: pointer;
}

button.reaction:hover,
summary.reaction:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

.reaction-mine {
    color: var(--accent);
    background: var(--accent-muted);
    border-color: var(--accent-border);
}

.reaction-emoji {
    font-size: 14px;
    line-height: 1;
}

.dropdown > summary.reaction-add {
    justify-content: center;
    width: 26px;
    padding: 0;
}

.reaction-menu {
    display: flex;
    gap: 2px;
    width: auto;
    padding: 4px;
}

.reaction-option {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.reaction-option:hover {
    background: var(--bg-hover);
}

.reaction-option.reaction-mine {
    background: var(--accent-muted);
}

/* Seitenleiste eines Issues: Kopfzeilen öffnen die Auswahl (ab Triage). */
.sidebar-menu {
    margin-bottom: 8px;
}

.dropdown > summary.sidebar-menu-summary {
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-muted);
}

.dropdown > summary.sidebar-menu-summary:hover {
    color: var(--accent);
}

.sidebar-dropdown {
    width: 300px;
    max-width: calc(100vw - 32px);
}

.sidebar-options {
    max-height: 320px;
    margin-bottom: 8px;
    overflow-y: auto;
}

.label-option {
    align-items: flex-start;
}

.label-option > input,
.sidebar-options input[type="checkbox"] {
    flex: none;
    margin-top: 3px;
}

.sidebar-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    color: var(--fg-muted);
}

.sidebar-empty .btn-link {
    font-size: 12px;
}

.sidebar-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sidebar-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sidebar-actions {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.sidebar-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
}

.sidebar-action:hover {
    color: var(--accent);
}

.locked-notice {
    margin-bottom: 0;
}

/* Fortschritt eines Meilensteins. */
.progress {
    height: 8px;
    overflow: hidden;
    background: var(--bg-hover);
    border-radius: 2em;
}

.progress-done {
    display: block;
    height: 100%;
    background: var(--success);
}

/* ---------- Pull Requests ---------- */

.pull-meta {
    margin-bottom: 16px;
}

/* Bei Pull Requests trennt die Linie der Reiter den Kopf vom Inhalt. */
.issue-header:has(> .pull-tabs) {
    padding-bottom: 0;
    border-bottom: 0;
}

.pull-meta-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    min-width: 0;
}

.pull-branch {
    display: inline-block;
    max-width: 100%;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
    color: var(--accent);
    vertical-align: middle;
    background: var(--accent-muted);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.pull-branch-deleted {
    color: var(--fg-muted);
    text-decoration: line-through;
    background: var(--bg-muted);
}

.pull-tabs {
    align-items: center;
    border-bottom: 1px solid var(--border-muted);
}

.pull-tabs-stat {
    margin-left: auto;
    padding-left: 8px;
    font-size: 12px;
    white-space: nowrap;
}

.compare-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--bg-muted);
}

.compare-bar .ref-selector-name {
    max-width: min(40vw, 240px);
}

.compare-existing {
    align-items: center;
    flex-wrap: wrap;
}

.compare-existing > span {
    flex: 1 1 200px;
}

.compare-existing .btn {
    margin-left: auto;
}

.compare-form {
    margin-bottom: 24px;
}

.compare-heading {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.draft-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px;
    margin-bottom: 16px;
    margin-left: var(--timeline-indent);
}

.draft-notice .note {
    margin: 4px 0 0;
}

/* ---------- Labels und Meilensteine ---------- */

.label-list-row {
    gap: 8px 16px;
    padding: 12px 16px;
}

.label-list-name {
    flex: 0 0 220px;
    max-width: 100%;
    min-width: 0;
}

.label-list-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.label-list-count:hover {
    color: var(--accent);
}

.label-list-actions {
    display: flex;
    gap: 8px;
}

.label-edit {
    padding: 16px;
}

.label-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
}

@media (min-width: 768px) {
    .label-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    }
}

.label-color-input {
    width: 64px;
    padding: 2px;
}

.milestone-row {
    align-items: flex-start;
    gap: 16px 24px;
    padding: 16px;
}

.milestone-main {
    flex: 1 1 320px;
}

.milestone-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.milestone-title a {
    color: var(--fg);
}

.milestone-title a:hover {
    color: var(--accent);
}

.milestone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    color: var(--fg-muted);
}

.milestone-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.milestone-description {
    max-height: 7.5em;
    margin-top: 8px;
    overflow: hidden;
    font-size: 14px;
}

.milestone-side {
    display: grid;
    flex: 0 1 320px;
    gap: 6px;
    min-width: min(100%, 240px);
}

.milestone-stats,
.milestone-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.milestone-actions .btn-link {
    font-size: inherit;
}

.milestone-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-muted);
}

.milestone-header-progress {
    display: grid;
    grid-template-columns: minmax(0, 360px) auto;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.template-row {
    gap: 8px 16px;
    padding: 16px;
}

.fg-danger {
    color: var(--danger);
}

/* ---------- Zugriff ---------- */

.role-menu {
    width: 340px;
    max-width: calc(100vw - 32px);
}

.role-option {
    align-items: flex-start;
}

.role-option > .icon {
    margin-top: 3px;
}

.role-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 0;
    color: var(--fg-muted);
}

.role-list dt {
    font-weight: 600;
    color: var(--fg);
}

.role-list dd {
    margin: 0;
}

@media (max-width: 543px) {
    .role-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .role-list dd {
        margin-bottom: 8px;
    }
}

/* ---------- Profil ---------- */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .profile-layout {
        grid-template-columns: 256px minmax(0, 1fr);
    }
}

.profile-card .avatar {
    margin-bottom: 16px;
}

.profile-name {
    margin-bottom: 16px;
    font-size: 24px;
    overflow-wrap: anywhere;
}

.profile-username {
    display: block;
    font-size: 20px;
    font-weight: 300;
    color: var(--fg-muted);
}

.counter {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    background: var(--bg-hover);
    border-radius: 2em;
}

/* ---------- Formulare und Boxen, Ergänzungen ---------- */

.h4 { font-size: 16px; }
.h5 { font-size: 14px; }

.btn-icon {
    width: 32px;
    padding: 0;
}

.btn-sm.btn-icon {
    width: 28px;
}

.input-group {
    display: flex;
    gap: 4px;
}

.input-group .form-control {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.form-control-wide {
    max-width: none;
}

fieldset.form-group {
    min-width: 0;
    padding: 0;
    border: 0;
}

legend.form-label {
    padding: 0;
}

.form-row-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.form-row-inline .form-group {
    margin-bottom: 0;
}

.form-row-inline .form-control {
    width: auto;
}

.form-row-inline .flex-1 .form-control {
    width: 100%;
}

.form-slash {
    padding-bottom: 4px;
    font-size: 20px;
    color: var(--fg-muted);
}

.owner-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    font-weight: 500;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}

.radio-option input {
    margin: 4px 0 0;
}

.form-divider {
    height: 0;
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--border-muted);
}

.box-row-block {
    display: block;
}

.box-row-wrap {
    flex-wrap: wrap;
}

.box-danger {
    border-color: var(--danger-border);
}

.danger-confirm .form-control {
    min-width: 200px;
}

.label-danger {
    color: var(--danger);
    border-color: var(--danger-border);
}

.copy-done {
    display: none;
}

[data-copied] .copy-idle {
    display: none;
}

[data-copied] .copy-done {
    display: inline-block;
    color: var(--success);
}

/* ---------- Blazor ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 48px 12px 16px;
    color: var(--fg);
    background: var(--attention-muted);
    border-top: 1px solid var(--attention-border);
    box-shadow: var(--shadow-overlay);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 16px;
    top: 12px;
    cursor: pointer;
}

/* ---------- Benachrichtigungen ---------- */

.header-notifications {
    position: relative;
}

/* Punkt an der Glocke: Es gibt Ungelesenes. */
.notification-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border: 2px solid var(--bg-header);
    border-radius: 50%;
}

.repo-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.repo-header-top .repo-title {
    margin-bottom: 0;
}

/* Auch umgebrochen rechts, damit das rechtsbündige Menü nicht links aus dem Bildschirm ragt. */
.repo-watch {
    margin-left: auto;
}

.watch-menu {
    width: 320px;
    max-width: calc(100vw - 32px);
}

.watch-option {
    align-items: flex-start;
}

.watch-option .icon {
    flex: none;
    margin-top: 2px;
}

.notifications {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .notifications {
        grid-template-columns: 256px minmax(0, 1fr);
    }
}

.notifications-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notifications-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
}

.notifications-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

/* „Alle auswählen“ braucht JavaScript (app.js). */
@media (scripting: none) {
    .notifications-check-all {
        display: none;
    }
}

.notification-row {
    /* Checkbox, Punkt und Zustand vor dem Titel, samt Abständen. */
    --notification-indent: 61px;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
}

.notification-row:hover {
    background: var(--bg-muted);
}

/* Ohne die Ränder des Browsers, damit die Einrückung oben stimmt und die Checkboxen unter „Alle auswählen“ stehen. */
.notification-row > input[type="checkbox"] {
    flex: none;
    margin: 4px 0 0;
}

.notifications-check-all {
    margin: 0;
}

.notification-unread {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
}

.notification-row.unread .notification-unread {
    background: var(--accent);
}

.notification-repo {
    color: var(--fg-muted);
    font-size: 12px;
}

.notification-title {
    color: var(--fg);
    overflow-wrap: anywhere;
}

.notification-row.unread .notification-title {
    font-weight: 600;
}

.notification-title:hover {
    color: var(--accent);
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    margin-top: 2px;
    color: var(--fg-muted);
    font-size: 12px;
}

.notification-meta strong {
    color: var(--fg);
}

.notification-side {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 12px;
    color: var(--fg-muted);
    font-size: 12px;
}

.notification-row-actions {
    display: inline-flex;
    gap: 2px;
}

/* Bis zur breiten Ansicht stehen Grund, Zeit und Knöpfe unter dem Titel, bündig mit ihm. */
@media (max-width: 1011px) {
    .notification-row {
        flex-wrap: wrap;
    }

    .notification-side {
        width: 100%;
        justify-content: flex-start;
        padding-left: var(--notification-indent);
    }
}

/* Hinweis auf Neues im Issue (app.js): bleibt beim Scrollen oben im Bild, deckend über der Timeline. */
.live-banner {
    position: sticky;
    top: 8px;
    z-index: 50;
    background: linear-gradient(var(--accent-muted), var(--accent-muted)), var(--bg);
    box-shadow: var(--shadow-overlay);
}

.notification-setting {
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-muted);
}

.notification-setting:first-child {
    border-top: 0;
}

/* Wird es enger, rutschen die Kästchen unter die Beschreibung, statt sie zusammenzudrücken. */
.notification-setting > div {
    flex: 1 1 240px;
}

.notification-settings {
    margin-bottom: 16px;
}

.notification-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---------- Markdown-Editor (MarkdownEditor.razor, app.js) ---------- */

.markdown-editor {
    position: relative;
}

/* Wird es eng, bricht die Werkzeugleiste über die Reiter um, damit diese an der Linie bleiben. */
.markdown-editor-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.markdown-editor-tabs {
    display: flex;
    margin-bottom: -1px;
}

.markdown-editor-tab {
    padding: 8px 16px;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
}

.markdown-editor-tab:hover {
    color: var(--fg);
}

.markdown-editor-tab[aria-selected="true"] {
    color: var(--fg);
    background: var(--bg);
    border-color: var(--border);
    border-bottom-color: var(--bg);
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding-bottom: 4px;
}

.markdown-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--fg-muted);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.markdown-toolbar-button:hover,
.markdown-toolbar-button[aria-expanded="true"] {
    color: var(--accent);
    background: var(--bg-hover);
}

.markdown-toolbar-divider {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: var(--border);
}

.markdown-editor .comment-textarea {
    resize: vertical;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.markdown-editor.is-dragover .comment-textarea {
    border-color: var(--accent);
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
}

.markdown-editor-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--fg-muted);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-top-style: dashed;
    border-top-width: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.markdown-editor-footer .note {
    margin: 0;
}

.markdown-editor-attach {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
}

.markdown-editor-attach input[type="file"] {
    max-width: 100%;
    font: inherit;
    color: var(--fg-muted);
}

/* Mit JavaScript genügt der Text als Knopf; das Feld bleibt für die Tastatur erreichbar. */
.markdown-editor.is-enhanced .markdown-editor-attach input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}

.markdown-editor.is-enhanced .markdown-editor-attach:hover .markdown-editor-attach-text,
.markdown-editor.is-enhanced .markdown-editor-attach:focus-within .markdown-editor-attach-text {
    color: var(--accent);
    text-decoration: underline;
}

.markdown-editor-markdown-hint {
    margin-left: auto;
}

.markdown-editor-error {
    margin: 8px 0 0;
}

.markdown-editor-preview {
    min-height: 120px;
    padding: 8px 4px 16px;
}

/* Vorschläge beim Tippen von @, # und : */
.suggester {
    position: absolute;
    z-index: 110;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
    max-height: 264px;
    padding: 4px;
    margin: 0;
    overflow-y: auto;
    list-style: none;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-overlay);
}

.suggester-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: var(--radius);
    cursor: pointer;
}

.suggester-item[aria-selected="true"] {
    background: var(--bg-hover);
}

.suggester-emoji {
    font-size: 18px;
    line-height: 1;
}

.suggester-detail {
    overflow: hidden;
    color: var(--fg-muted);
    text-overflow: ellipsis;
}

.emoji-picker {
    position: absolute;
    z-index: 110;
    right: 0;
    width: min(312px, calc(100vw - 32px));
    padding: 8px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-overlay);
}

.emoji-picker .form-control {
    max-width: none;
    margin-bottom: 8px;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 2px;
    max-height: 216px;
    overflow-y: auto;
}

.emoji-picker-grid button {
    height: 32px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.emoji-picker-grid button:hover,
.emoji-picker-grid button:focus-visible {
    background: var(--bg-hover);
}

/* Verweise im Text (ReferenceResolver) */
.markdown-body .user-mention {
    font-weight: 600;
    color: var(--fg);
}

.markdown-body .commit-link code {
    color: var(--accent);
}

/* Ereignis „erwähnt“: darunter das verweisende Issue */
.timeline-event-reference {
    align-items: flex-start;
}

.timeline-reference {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-weight: 600;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.timeline-reference:hover {
    text-decoration: none;
}

.timeline-reference:hover .timeline-reference-title {
    color: var(--accent);
    text-decoration: underline;
}

.timeline-reference .fg-muted {
    font-weight: 400;
}

/* ---------- Hilfsklassen ---------- */

[hidden] {
    display: none !important;
}

.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;
}

.fg-muted { color: var(--fg-muted); }
.small { font-size: 12px; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.d-flex { display: flex; }
.d-block { display: block; }
.wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.gap-2 { gap: 8px; }
.nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; }
.fg-default { color: var(--fg); }
.mt-3 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; }
.invisible { visibility: hidden; }