/* Website-Feedback – Review-Seite. Served statically; the board CSP forbids inline styles. */

@font-face { font-family: "D-DIN"; font-weight: 400; font-display: swap; src: url("fonts/d-din.woff") format("woff"); }
@font-face { font-family: "D-DIN"; font-weight: 700; font-display: swap; src: url("fonts/d-din-bold.woff") format("woff"); }

/* Tokens from the app's tailwind.config.js (primary, secondary, intents) plus Tailwind's gray scale. */
:root {
    --primary: #d11136;
    --primary-hover: #b80e2e;
    --primary-focus: #a00d2a;
    --primary-10: rgba(209, 17, 54, 0.1);
    --primary-15: rgba(209, 17, 54, 0.15);
    --notice: #f28d52;
    --notice-soft: #fdeee6;
    --notice-solid: #af491d;
    --secondary: #e8a66b;
    --secondary-line: #c98a52;
    --success: #62ae6d;
    --success-solid: #15842b;
    --success-solid-hover: #116a22;
    --info: #6e675e;
    --danger-solid: #c52011;
    --ground: #f7f4ee;
    --surface: #ffffff;
    --line: #e7e3dc;
    --line-soft: #f1eee8;
    --line-input: #dad5cd;
    --gray-100: #f1eee8;
    --text: #1a1613;
    --text-2: #3d3730;
    --text-3: #5a5249;
    --muted: #6e675e;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --radius: 12px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "D-DIN", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--text-2);
    font: 14px/1.43 var(--sans);
}

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -40px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 8px; }

/* Top bar */
.topbar {
    height: 56px; background: var(--primary); color: #fff;
    display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.topbar :focus-visible { outline-color: #fff; }
.brand { display: flex; align-items: center; color: #fff; text-decoration: none; border-radius: 6px; }
.brand:hover { color: #fff; }
.brand__logo { display: block; height: 26px; width: auto; }
.topbar__sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }
.topbar__title { font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; }
.topbar__grow { flex-grow: 1; }
.topbar__host { font-size: 12px; color: rgba(255, 255, 255, 0.8); }

/* Page shells */
.shell { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
    width: 300px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
    padding: 20px 16px; display: flex; flex-direction: column; gap: 12px;
    position: sticky; top: 0; align-self: flex-start; min-height: calc(100vh - 56px); max-height: 100vh; overflow-y: auto;
}
.main { flex-grow: 1; min-width: 0; padding: 24px 32px; display: flex; flex-direction: column; gap: 24px; }
.main--narrow { max-width: 1100px; margin: 0 auto; width: 100%; }
.main--detail { padding-top: 24px; gap: 16px; }

.eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
section > .eyebrow { margin-bottom: 8px; }

/* Search */
.search {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-input); border-radius: 6px;
    height: 38px; padding: 0 12px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.search:focus-within { border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(66, 106, 143, 0.3); }
.search input { border: 0; outline: none; font: 14px var(--sans); color: var(--text); flex-grow: 1; background: transparent; min-width: 0; }
.search button { border: 0; background: transparent; color: var(--primary); font: 700 12px var(--sans); cursor: pointer; padding: 0 2px; }
.search .icon, .combo .icon { color: var(--muted); }
.icon { flex-shrink: 0; }

/* PR list: same grammar as the app's sidebar nav items. */
.prlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pritem {
    position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
    text-decoration: none; color: inherit; transition: background-color 150ms;
}
.pritem:hover { background: var(--primary-10); color: inherit; }
.pritem[aria-current="page"] { background: var(--primary-15); box-shadow: var(--shadow-sm); }
.pritem[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 20px; margin-top: -10px;
    background: var(--primary); border-radius: 0 999px 999px 0;
}
.pritem[aria-current="page"] .pritem__num { color: var(--primary); }
.pritem__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pritem__num { font-size: 14px; font-weight: 700; color: var(--text); }
.pritem__ref { font: 12px var(--mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pritem__meta { font-size: 12px; color: var(--muted); }
.pritem--archived .pritem__num { color: var(--muted); }
.pritem--archived .pritem__ref { color: var(--muted); }
.badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 8px; background: var(--gray-100); color: var(--text-3); white-space: nowrap; }
.badge--hot { background: var(--notice-soft); color: var(--notice-solid); }
.prgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.prgrid .pritem { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 12px 16px; }
.prgrid .pritem:hover { border-color: var(--line-input); background: var(--surface); box-shadow: var(--shadow-md); }
.empty { color: var(--muted); font-size: 14px; padding: 12px 0; margin: 0; }
.empty--card { background: var(--surface); border: 1px dashed var(--line-input); border-radius: var(--radius); padding: 32px; text-align: center; }


/* PR header */
.pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kicker { font-size: 14px; font-weight: 700; color: var(--primary); }
.pagehead h1 { margin: 2px 0 0; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.context { margin-top: 4px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons: header size px-3 py-1.5 text-xs, rounded-lg, as in the app. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1px solid var(--line-input); background: var(--surface); border-radius: 8px;
    font: 500 12px var(--sans); color: var(--text-2); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color 150ms, color 150ms;
}
.btn:hover { color: var(--text); background: var(--ground); }
.btn--secondary { border-color: var(--primary); color: var(--primary); }
.btn--secondary:hover { background: var(--gray-100); color: var(--primary); }
.btn--primary { background: var(--primary); border-color: transparent; color: #fff; }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }
.btn--primary:active { background: var(--primary-focus); }
.btn--lg { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; height: 40px; font-size: 14px; }
.btn--success { background: var(--success-solid); border-color: transparent; color: #fff; }
.btn--success:hover { background: var(--success-solid-hover); color: #fff; }
.btn--icon { width: 34px; padding: 0; }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.notice {
    border-radius: 8px; padding: 10px 16px; font-size: 14px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.notice--warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.errors { margin: 0; padding: 0; list-style: none; color: var(--danger-solid); font-size: 13px; }

/* Kennzahlen: bg-{c}-50, border-{c}-200, text-{c}-700 */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { border-radius: var(--radius); padding: 12px 16px; border: 1px solid; text-decoration: none; transition: border-color 150ms, box-shadow 150ms; }
.tile__n { font-size: 24px; font-weight: 700; line-height: 1.25; }
.tile__label { font-size: 14px; }
.tile--open { background: #fbeef0; border-color: #f2c4cd; color: #b80e2e; }
.tile--done { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.tile--est { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
a.tile:hover { box-shadow: var(--shadow-md); }
a.tile--open:hover { color: #b80e2e; border-color: #f0a0ae; }
a.tile--done:hover { color: #15803d; border-color: #86efac; }

/* Stände */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stands { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.stands__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.stands__title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.stands__hint { font-size: 12px; color: var(--muted); }
.timeline {
    list-style: none; margin: 0 -8px; padding: 8px 8px 4px; display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; position: relative;
}
.timeline li { position: relative; }
.timeline li::before {
    content: ""; position: absolute; left: 20px; right: 0; top: 9px; height: 2px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.stand {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-decoration: none; color: inherit; padding: 0 12px 4px 0; border-radius: 6px;
}
.stand:hover { color: inherit; }
.stand:hover .stand__sha { color: var(--primary); }
.stand:focus-visible { outline-offset: 4px; }
.stand__dot {
    width: 20px; height: 20px; border-radius: 10px; margin-bottom: 4px;
    background: var(--surface); border: 3px solid var(--line-input); position: relative;
}
.stand--current .stand__dot { background: var(--primary); border-color: var(--primary); }
.stand[aria-current="true"] .stand__dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.stand[aria-current="true"] .stand__sha { color: var(--primary); }
.stand__sha { font: 700 13px var(--mono); color: var(--text); }
.stand__when { font-size: 12px; color: var(--muted); }
.stand__count { font-size: 12px; color: var(--text-2); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tabs { display: flex; gap: 4px; background: var(--gray-100); border-radius: 8px; padding: 3px; }
.tab {
    display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 6px;
    font: 500 14px var(--sans); color: var(--text-3); text-decoration: none;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }
.filterform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.combo {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-input); background: var(--surface);
    border-radius: 6px; height: 38px; padding: 0 12px; min-width: 190px; box-shadow: var(--shadow-sm);
}
.combo:focus-within { border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(66, 106, 143, 0.3); }
.combo input { border: 0; outline: none; background: transparent; font: 14px var(--sans); color: var(--text); flex-grow: 1; min-width: 0; }
.filters__grow { flex-grow: 1; }
.filters__count { font-size: 14px; color: var(--muted); }
.reset { font-size: 14px; font-weight: 700; }

/* Comment cards */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.ccard-wrap { display: flex; min-width: 0; }
.ccard-wrap > .ccard { flex-grow: 1; min-width: 0; }
.ccard {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 150ms, box-shadow 150ms;
}
.ccard:hover { color: inherit; border-color: var(--line-input); box-shadow: var(--shadow-md); }
.thumb { height: 176px; background: var(--gray-100); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* The frame keeps the image's own aspect ratio so percentage pins stay exact; the thumb just crops it. */
.thumb .shot__frame { position: relative; }
.thumb img { width: 100%; height: auto; display: block; }
.thumb__none { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.ccard__body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ccard__text { font-size: 14px; line-height: 1.45; color: var(--text); min-height: 40px; overflow-wrap: anywhere; }
.ccard__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.ccard__who strong { font-weight: 700; color: var(--text); }
.ccard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.chip { font-family: var(--mono); background: var(--gray-100); color: var(--text-2); border-radius: 6px; padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* Status pills: the app's <x-table.status-pill> (tonal pill + dot). */
.pill {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 8px;
    font-weight: 700; font-size: 11px; white-space: nowrap; background: var(--gray-100); color: var(--text-3);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex-shrink: 0; }
.pill--lg { padding: 2px 10px; font-size: 12px; }
.pill--open { background: #f8dde2; color: #b80e2e; }
.pill--open::before { background: #d11136; }
.pill--resolved { background: #dcfce7; color: #15803d; }
.pill--resolved::before { background: #22c55e; }
.pill--estimated { background: #ffedd5; color: #c2410c; }
.pill--estimated::before { background: #f97316; }
.pill--count { background: #fee2e2; color: #b91c1c; font-size: 12px; }
.pill--count::before { display: none; }

/* Pins: positioned by whole-percent classes (at-x-N / at-y-N) further below. */
.pin {
    position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -2px; border-radius: 11px 11px 11px 2px;
    background: var(--secondary); color: var(--text); font: 700 11px/22px var(--sans); text-align: center;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(17, 24, 39, 0.2);
}
.pin--est { background: #fff; border: 2px dashed var(--secondary-line); line-height: 18px; }
.pin--lg { width: 30px; height: 30px; margin-top: -30px; border-radius: 15px 15px 15px 3px; font-size: 13px; line-height: 30px; }
.pin--lg.pin--est { line-height: 26px; }
.pinmark {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 15px 15px 15px 4px; background: var(--secondary);
    font-size: 13px; font-weight: 700; color: var(--text);
}
.pinmark--est { background: #fff; border: 2px dashed var(--secondary-line); }

/* Detail */
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; align-self: flex-start; }
.back:hover { color: var(--primary); }
.dhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dhead > div:first-child { flex: 1 1 320px; min-width: 0; }
.dhead__title { display: flex; align-items: center; gap: 12px; }
.dhead__title .pill { flex-shrink: 0; }
.dhead h1 { margin: 0; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.dhead__meta { margin-top: 6px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.nav { display: flex; gap: 8px; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols__main { grid-column: span 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cols__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.shotcard { overflow: hidden; }
.shotbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--text-2);
}
.shotbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.shotbar input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }
.shotbar a { font-size: 14px; font-weight: 700; }
.shot { background: var(--ground); position: relative; }
.shot img { display: block; width: 100%; height: auto; }
.shot__frame { position: relative; }
.shot__none { padding: 48px 20px; text-align: center; color: var(--muted); }
/* CSS-only toggle: no script needed to hide the overlay. */
.shotcard:has(.marks-toggle:not(:checked)) .pin { display: none; }

.panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel__title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.msg { display: flex; gap: 12px; }
.avatar {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 15px; color: #fff;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.av-0 { background: #6e675e; } .av-1 { background: var(--primary); } .av-2 { background: #a00d2a; }
.av-3 { background: #af491d; } .av-4 { background: var(--success-solid); } .av-5 { background: var(--text-3); }
.msg__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg__head { font-size: 14px; }
.msg__head strong { color: var(--text); }
.msg__text { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

.form { display: flex; flex-direction: column; gap: 8px; }
.form__row { display: flex; gap: 8px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
.field label, .field__label { font-weight: 500; }
.input, textarea.input {
    border: 1px solid var(--line-input); border-radius: 6px; padding: 8px 12px; font: 14px/1.45 var(--sans);
    color: var(--text); background: var(--surface); width: 100%; box-shadow: var(--shadow-sm);
}
.input:focus { outline: none; border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(66, 106, 143, 0.3); }
textarea.input { resize: vertical; min-height: 44px; }
.asname { font-size: 12px; color: var(--muted); }
.asname details { display: inline; }
.asname summary { display: inline; cursor: pointer; color: var(--primary); font-weight: 700; }
.asname summary::-webkit-details-marker { display: none; }
.asname .input { margin-top: 6px; }

.step { font-size: 14px; color: var(--text-2); line-height: 1.45; margin: 0; }
.center { text-align: center; font-size: 14px; font-weight: 700; }

.details { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 8px; column-gap: 12px; font-size: 14px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.details dd.mono { font-size: 12px; word-break: break-all; }

.console { padding: 12px 16px; }
.console summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.console summary::-webkit-details-marker { display: none; }
.console pre {
    margin: 10px 0 0; background: #1a1613; color: #fca5a5; border-radius: 8px; padding: 10px 12px;
    font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}

.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.event { display: flex; gap: 12px; }
.event__dot { width: 10px; height: 10px; margin-top: 4px; flex-shrink: 0; border-radius: 5px; background: var(--line-input); }
.event__dot--created { background: var(--notice); }
.event__dot--replied { background: var(--primary); }
.event__dot--resolved { background: var(--success); }
.event__dot--reopened { background: var(--info); }
.event__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.event__text span:first-child { color: var(--text); }
.event__text span + span { color: var(--muted); font-size: 12px; }

/* Export */
.backdrop { background: rgba(107, 114, 128, 0.75); min-height: calc(100vh - 56px); padding: 40px 24px; }
.dialog {
    max-width: 1060px; margin: 0 auto; background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
}
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 24px 12px; border-bottom: 1px solid var(--line); }
.dialog__head h1 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.dialog__head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.close {
    color: var(--muted); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.close:hover { background: var(--gray-100); color: var(--text); }
.dialog__body { display: flex; min-height: 0; }
.options { width: 300px; flex-shrink: 0; padding: 16px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }
.options fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.options legend { padding: 0; margin-bottom: 8px; }
.opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.opt input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; flex-shrink: 0; }
.opt span { color: var(--muted); }
.hint { background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 0; }
.preview { flex-grow: 1; display: flex; flex-direction: column; padding: 16px 24px; gap: 8px; min-width: 0; }
.preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.preview__title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.preview__stats { font-size: 12px; color: var(--muted); }
.md {
    margin: 0; background: #1a1613; color: #e7e3dc; border-radius: 8px; padding: 16px;
    font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto;
    max-height: 62vh; min-height: 320px;
}
.dialog__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--ground); }
.copied { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--success-solid); min-height: 20px; }
.copied:empty { display: none; }
.js-only { display: none; }
.has-js .js-only { display: inline-flex; }
.has-js .no-js { display: none; }

/* Error pages */
.errorpage { max-width: 560px; margin: 64px auto; padding: 32px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.errorpage h1 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.errorpage p { color: var(--muted); margin: 0 0 20px; }

@media (max-width: 1100px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols { grid-template-columns: minmax(0, 1fr); }
    .cols__main { grid-column: auto; }
}

@media (max-width: 800px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; border-right: 0; border-bottom: 1px solid var(--line); position: static; min-height: 0; max-height: none; align-self: stretch; }
    .sidebar .prlist { max-height: 240px; overflow-y: auto; }
    .main { padding: 20px 16px; }
    .tiles { gap: 8px; }
    .tile { padding: 10px 12px; }
    .tile__n { font-size: 20px; }
    .tile__label { font-size: 12px; }
    .grid { grid-template-columns: minmax(0, 1fr); }
    .combo { min-width: 0; flex: 1 1 100%; }
    .filterform { width: 100%; }
    .topbar { padding: 0 16px; }
    .topbar__host { display: none; }
    .backdrop { padding: 16px; }
    .dialog__body { flex-direction: column; }
    .options { width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .details { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
    .details dd { margin-bottom: 8px; }
    .errorpage { margin: 24px 16px; }
}

/* Generated pin grid (0-100 %). */
.at-x-0{left:0%} .at-x-1{left:1%} .at-x-2{left:2%} .at-x-3{left:3%} .at-x-4{left:4%} .at-x-5{left:5%} .at-x-6{left:6%} .at-x-7{left:7%} .at-x-8{left:8%} .at-x-9{left:9%} .at-x-10{left:10%} .at-x-11{left:11%} .at-x-12{left:12%} .at-x-13{left:13%} .at-x-14{left:14%} .at-x-15{left:15%} .at-x-16{left:16%} .at-x-17{left:17%} .at-x-18{left:18%} .at-x-19{left:19%} .at-x-20{left:20%} .at-x-21{left:21%} .at-x-22{left:22%} .at-x-23{left:23%} .at-x-24{left:24%} .at-x-25{left:25%} .at-x-26{left:26%} .at-x-27{left:27%} .at-x-28{left:28%} .at-x-29{left:29%} .at-x-30{left:30%} .at-x-31{left:31%} .at-x-32{left:32%} .at-x-33{left:33%} .at-x-34{left:34%} .at-x-35{left:35%} .at-x-36{left:36%} .at-x-37{left:37%} .at-x-38{left:38%} .at-x-39{left:39%} .at-x-40{left:40%} .at-x-41{left:41%} .at-x-42{left:42%} .at-x-43{left:43%} .at-x-44{left:44%} .at-x-45{left:45%} .at-x-46{left:46%} .at-x-47{left:47%} .at-x-48{left:48%} .at-x-49{left:49%} .at-x-50{left:50%} .at-x-51{left:51%} .at-x-52{left:52%} .at-x-53{left:53%} .at-x-54{left:54%} .at-x-55{left:55%} .at-x-56{left:56%} .at-x-57{left:57%} .at-x-58{left:58%} .at-x-59{left:59%} .at-x-60{left:60%} .at-x-61{left:61%} .at-x-62{left:62%} .at-x-63{left:63%} .at-x-64{left:64%} .at-x-65{left:65%} .at-x-66{left:66%} .at-x-67{left:67%} .at-x-68{left:68%} .at-x-69{left:69%} .at-x-70{left:70%} .at-x-71{left:71%} .at-x-72{left:72%} .at-x-73{left:73%} .at-x-74{left:74%} .at-x-75{left:75%} .at-x-76{left:76%} .at-x-77{left:77%} .at-x-78{left:78%} .at-x-79{left:79%} .at-x-80{left:80%} .at-x-81{left:81%} .at-x-82{left:82%} .at-x-83{left:83%} .at-x-84{left:84%} .at-x-85{left:85%} .at-x-86{left:86%} .at-x-87{left:87%} .at-x-88{left:88%} .at-x-89{left:89%} .at-x-90{left:90%} .at-x-91{left:91%} .at-x-92{left:92%} .at-x-93{left:93%} .at-x-94{left:94%} .at-x-95{left:95%} .at-x-96{left:96%} .at-x-97{left:97%} .at-x-98{left:98%} .at-x-99{left:99%} .at-x-100{left:100%}
.at-y-0{top:0%} .at-y-1{top:1%} .at-y-2{top:2%} .at-y-3{top:3%} .at-y-4{top:4%} .at-y-5{top:5%} .at-y-6{top:6%} .at-y-7{top:7%} .at-y-8{top:8%} .at-y-9{top:9%} .at-y-10{top:10%} .at-y-11{top:11%} .at-y-12{top:12%} .at-y-13{top:13%} .at-y-14{top:14%} .at-y-15{top:15%} .at-y-16{top:16%} .at-y-17{top:17%} .at-y-18{top:18%} .at-y-19{top:19%} .at-y-20{top:20%} .at-y-21{top:21%} .at-y-22{top:22%} .at-y-23{top:23%} .at-y-24{top:24%} .at-y-25{top:25%} .at-y-26{top:26%} .at-y-27{top:27%} .at-y-28{top:28%} .at-y-29{top:29%} .at-y-30{top:30%} .at-y-31{top:31%} .at-y-32{top:32%} .at-y-33{top:33%} .at-y-34{top:34%} .at-y-35{top:35%} .at-y-36{top:36%} .at-y-37{top:37%} .at-y-38{top:38%} .at-y-39{top:39%} .at-y-40{top:40%} .at-y-41{top:41%} .at-y-42{top:42%} .at-y-43{top:43%} .at-y-44{top:44%} .at-y-45{top:45%} .at-y-46{top:46%} .at-y-47{top:47%} .at-y-48{top:48%} .at-y-49{top:49%} .at-y-50{top:50%} .at-y-51{top:51%} .at-y-52{top:52%} .at-y-53{top:53%} .at-y-54{top:54%} .at-y-55{top:55%} .at-y-56{top:56%} .at-y-57{top:57%} .at-y-58{top:58%} .at-y-59{top:59%} .at-y-60{top:60%} .at-y-61{top:61%} .at-y-62{top:62%} .at-y-63{top:63%} .at-y-64{top:64%} .at-y-65{top:65%} .at-y-66{top:66%} .at-y-67{top:67%} .at-y-68{top:68%} .at-y-69{top:69%} .at-y-70{top:70%} .at-y-71{top:71%} .at-y-72{top:72%} .at-y-73{top:73%} .at-y-74{top:74%} .at-y-75{top:75%} .at-y-76{top:76%} .at-y-77{top:77%} .at-y-78{top:78%} .at-y-79{top:79%} .at-y-80{top:80%} .at-y-81{top:81%} .at-y-82{top:82%} .at-y-83{top:83%} .at-y-84{top:84%} .at-y-85{top:85%} .at-y-86{top:86%} .at-y-87{top:87%} .at-y-88{top:88%} .at-y-89{top:89%} .at-y-90{top:90%} .at-y-91{top:91%} .at-y-92{top:92%} .at-y-93{top:93%} .at-y-94{top:94%} .at-y-95{top:95%} .at-y-96{top:96%} .at-y-97{top:97%} .at-y-98{top:98%} .at-y-99{top:99%} .at-y-100{top:100%}

/* Links ohne Unterstreichung */
a { text-decoration: none; }
a:hover { text-decoration: none; }

.topbar { background: #141210; }
/* Dateien */
.dateien { display: grid; gap: 16px; }
.dateien__form { padding: 16px; display: grid; gap: 12px; }
.dateien__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.datei { padding: 12px 16px; display: grid; gap: 4px; font-size: 14px; }
.datei__kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.datei__name { font-weight: 700; overflow-wrap: anywhere; color: var(--text); }
.datei__meta { color: var(--muted); font-size: 12px; }
.datei__notiz { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.datei__aktion { display: flex; gap: 8px; }
progress { width: 100%; accent-color: var(--primary); }
.topbar__nav { color: #fff; font-size: 14px; }
.topbar { gap: 16px; flex-wrap: wrap; height: auto; min-height: 56px; }
.topbar__abmelden { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.anmelden { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); min-height: 100vh; background: var(--surface); }
.anmelden__bild { background: #141210 url("/bilder/ideenundparty-buehne-gala-1600.jpg") center / cover no-repeat; }
.anmelden__spalte { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 40px clamp(24px, 6vw, 72px); }
.anmelden__form { display: grid; gap: 16px; width: 100%; max-width: 380px; margin: 0 auto; }
.anmelden__logo { height: 44px; width: auto; justify-self: start; margin-bottom: 12px; }
.anmelden h1 { font-size: 30px; margin: 0 0 6px; color: var(--text); }
.anmelden__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-3); }
.anmelden .input { height: 44px; font-size: 16px; }
.anmelden__merken { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); min-height: 24px; }
.anmelden__merken input { width: 18px; height: 18px; accent-color: var(--primary); }
.anmelden .btn--lg { height: 46px; font-size: 15px; justify-content: center; }
.anmelden__hilfe { margin: 0; font-size: 13px; color: var(--muted); }
.anmelden__recht { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; font-size: 13px; }
.anmelden__recht a { color: var(--text-3); min-height: 24px; display: inline-block; padding: 3px 0; }
@media (max-width: 800px) { .anmelden { grid-template-columns: 1fr; grid-template-rows: 160px 1fr; } }