/* =================================================================================================
   A4L Project Portal – Designsystem (Feinspec §17)

   Eigene Anmutung, bewusst nicht die Kopie von CRM Intelligence: das Portal soll sich für den
   Kunden nicht wie ein freigeschalteter Teil eines internen Systems anfühlen. Übernommen ist nur
   die Mechanik – Variablen in :root, Umschaltung über data-theme, kein UI-Framework.

   Anders als die internen Anwendungen ist die Grundeinstellung HELL: ein Kundenportal wird am
   Tag und oft auf dem Telefon geöffnet.
   ================================================================================================= */

:root {
    /* Themeneutral */
    --radius: 14px;
    --radius-sm: 9px;
    --topbar-h: 62px;
    --maxw: 1180px;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;

    --brand: #1f6feb;
    --brand-deep: #1a4fb4;
    --brand-soft: rgba(31, 111, 235, .12);

    --ok: #1a7f5a;
    --warn: #b8770d;
    --err: #c0392b;
    --idle: #7a8598;

    /* Bewegung: eine einzige Stelle, an der Tempo definiert wird (§17: nie die Bedienung bremsen) */
    --t-fast: 120ms;
    --t-base: 180ms;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #eef1f7;
    --surface-hover: #e7ebf3;
    --border: #d9dfea;
    --border-soft: #e8ecf4;
    --text: #161c26;
    --text-dim: #4a5468;
    --text-muted: #78839a;
    --shadow: 0 10px 30px rgba(21, 30, 48, .10);
    --shadow-sm: 0 2px 8px rgba(21, 30, 48, .07);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f131a;
    --surface: #161c26;
    --surface-2: #1c2431;
    --surface-hover: #222c3b;
    --border: #2a3546;
    --border-soft: #222c3b;
    --text: #e8ecf4;
    --text-dim: #a8b3c6;
    --text-muted: #7b8698;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --brand: #4d8dff;
    --brand-soft: rgba(77, 141, 255, .16);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .88em;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: .08em .35em;
}

/* ---------- Grundgerüst ---------- */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--brand), var(--brand-deep));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}

.brand-name { font-weight: 640; letter-spacing: .1px; }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.who { display: flex; flex-direction: column; line-height: 1.2; margin-right: 6px; text-align: right; }
.who-name { font-size: 13.5px; font-weight: 600; }
.who-kind { font-size: 11.5px; color: var(--text-muted); }

a.btn-ghost { text-decoration: none; display: inline-block; }

.content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 30px 22px 56px;
}

.footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

/* ---------- Text ---------- */

h1 { font-size: 27px; font-weight: 660; letter-spacing: -.3px; margin: 0 0 6px; }
h2 { font-size: 16px; font-weight: 640; margin: 0 0 10px; }

.lead { color: var(--text-dim); margin: 0 0 26px; }
.hint { color: var(--text-muted); font-size: 13.5px; margin: 8px 0 0; }

/* ---------- Karten ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    animation: cardIn var(--t-base) var(--ease) both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Zustände ---------- */

.state { font-weight: 600; margin: 0; }
.state-ok   { color: var(--ok); }
.state-err  { color: var(--err); }
.state-idle { color: var(--idle); }

.switch-list { list-style: none; margin: 0; padding: 0; }
.switch-list li { display: flex; align-items: center; gap: 9px; padding: 3px 0; color: var(--text-dim); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-on  { background: var(--ok); box-shadow: 0 0 0 3px rgba(26, 127, 90, .16); }
.dot-off { background: var(--idle); opacity: .45; }

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pill-warn { background: rgba(184, 119, 13, .14); color: var(--warn); }

.pill:not(.pill-warn) { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-soft); }

/* Fortschritt: animiert beim Erscheinen genau einmal, danach ruhig (§17). */
.bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-deep));
            animation: barGrow 620ms var(--ease) both; }

@keyframes barGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

.list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
        box-shadow: var(--shadow-sm); overflow: hidden; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            padding: 13px 18px; border-bottom: 1px solid var(--border-soft); }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface-hover); }
.list-title { font-weight: 600; }
.list-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.portal-note { color: var(--text-muted); font-size: 13px; font-style: italic; }

/* ---------- Navigation ---------- */

.nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; margin-left: 22px; }

.nav-item {
    display: inline-block;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 550;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }

@media (max-width: 760px) {
    .nav { margin-left: 10px; gap: 0; }
    .nav-item { padding: 7px 9px; font-size: 13.5px; }
    .who { display: none; }
}

/* ---------- Band beim Rollenwechsel (§2.3) ---------- */

/* Bewusst kräftig und dauerhaft: wer die Sicht eines Kunden einnimmt, soll das keine Sekunde
   vergessen. Eigene Farbe statt der Markenfarbe, damit es nicht wie Teil der Oberfläche wirkt. */
.viewas-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    background: #7a2233;
    color: #fdeef1;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--topbar-h);
    z-index: 19;
}
.viewas-bar strong { color: #fff; }
.viewas-text { flex: 1 1 auto; }
.viewas-btn { border-color: rgba(255, 255, 255, .38); color: #fdeef1; background: transparent; }
.viewas-btn:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Detailseiten ---------- */

.crumb { font-size: 13.5px; color: var(--text-muted); margin: 0 0 6px; display: flex; gap: 7px; align-items: center; }
.crumb a { color: var(--text-dim); text-decoration: none; }
.crumb a:hover { color: var(--brand); text-decoration: underline; }

.detail-head { margin-top: 10px; }
.bar-lg { height: 10px; }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 20px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* Fließtext aus Odoo. Der Inhalt ist bereinigt (§8); hier wird nur gesetzt, wie er aussieht. */
.prose { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         padding: 20px 22px; box-shadow: var(--shadow-sm); max-width: 74ch; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-size: 16px; margin: 18px 0 8px; }
.prose a { color: var(--brand); }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 12px; }
.prose td, .prose th { border: 1px solid var(--border); padding: 6px 9px; text-align: left; }
.prose blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--border);
                    color: var(--text-dim); }

/* Karten und Zeilen, die zu einer Seite führen */
a.card-link { display: block; text-decoration: none; color: inherit;
              transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
a.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

a.list-row-link { text-decoration: none; color: inherit; }

.check-row { cursor: pointer; gap: 12px; justify-content: flex-start; }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; }
.check-done { color: var(--text-muted); text-decoration: line-through; }

/* Ungelesene Benachrichtigung: dezenter Streifen statt Fettung – die Liste bleibt ruhig lesbar. */
.row-unread { box-shadow: inset 3px 0 0 var(--brand); }

/* ---------- Zeitleiste (§12) ---------- */

.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px;
                    width: 2px; background: var(--border); border-radius: 2px; }

.tl-item { display: flex; gap: 16px; padding: 9px 0; position: relative; }
.tl-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; flex: 0 0 auto;
          background: var(--brand); box-shadow: 0 0 0 3px var(--bg); position: relative; z-index: 1; }
.tl-when { font-size: 12.5px; color: var(--text-muted); }

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

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

select, input[type=date], textarea {
    font: inherit; width: 100%; padding: 10px 12px;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
select:focus, input[type=date]:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- Kommentare ---------- */

.thread { display: flex; flex-direction: column; gap: 12px; }

.bubble { max-width: 70ch; padding: 12px 16px; border-radius: var(--radius);
          border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
          animation: cardIn var(--t-base) var(--ease) both; }
.bubble-me  { align-self: flex-end; background: var(--brand-soft); border-color: transparent; }
.bubble-a4l { align-self: flex-start; }
.bubble-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.bubble-author { font-weight: 600; font-size: 13.5px; }
.bubble-head .hint { margin: 0; }
.bubble-body { white-space: pre-wrap; }

.composer { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 74ch; }
.composer textarea {
    font: inherit; width: 100%; padding: 11px 13px; resize: vertical;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.composer textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.composer .hint { margin: 0; }

.upload { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
          padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius);
          background: var(--surface-2); }
.upload .hint { margin: 0; }

/* ---------- Tabellen ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 16px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
              background: var(--surface); box-shadow: var(--shadow-sm); }

.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
          color: var(--text-muted); font-weight: 600; padding: 11px 16px;
          border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Reiter ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }

.tab {
    font: inherit; font-size: 14px; font-weight: 550;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    background: var(--surface); color: var(--text-dim);
    border: 1px solid var(--border);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.tab:hover { background: var(--surface-hover); color: var(--text); }
.tab-active { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.tab-count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; }

.pill-ok { background: rgba(26, 127, 90, .14); color: var(--ok); }

.switch-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.switch-label input { width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; }
.switch-label .hint { margin: 0; white-space: nowrap; }

/* ---------- Bedienelemente ---------- */

.btn, .btn-ghost {
    font: inherit;
    border-radius: var(--radius-sm);
    padding: 8px 15px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.btn {
    background: var(--brand);
    color: #fff;
    border: 1px solid transparent;
    font-weight: 600;
}
.btn:hover { background: var(--brand-deep); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-hover); }

label { display: block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 5px; }

input[type=text], input[type=email] {
    font: inherit;
    width: 100%;
    padding: 10px 12px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input[type=text]:focus, input[type=email]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- Anmeldung ---------- */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 21px; margin-bottom: 4px; }
.auth-msg { margin: 14px 0 0; font-size: 14px; color: var(--text-dim); }
.auth-msg-err { color: var(--err); }

/* Einmalcode direkt auf der Seite - ausschliesslich Entwicklung ohne Postfach.
   Bewusst als Warnfarbe: es soll aussehen wie etwas, das hier nicht hingehoert. */
.dev-code { margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
            background: rgba(184, 119, 13, .12); border: 1px dashed rgba(184, 119, 13, .45);
            display: flex; flex-direction: column; gap: 4px; }
.dev-code-label { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); }
.dev-code-value { font-family: "Cascadia Mono", Consolas, monospace; font-size: 24px;
                  font-weight: 700; letter-spacing: .18em; color: var(--text); }
.dev-code-none { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--err); }

/* ---------- Ticketweg (§23) ---------- */

/* Status als Form: gelb = Sie sind dran, blau = A4L arbeitet, grün = erledigt. */
.pill-you { background: rgba(184, 119, 13, .15); color: var(--warn); }
.pill-a4l { background: var(--brand-soft); color: var(--brand); }
.pill-off { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-soft); }
.tab-you .tab-count { opacity: 1; color: var(--warn); font-weight: 700; }

.head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.head-row .lead { margin-bottom: 18px; }

.list-row.needs { box-shadow: inset 3px 0 0 var(--warn); }
.list-row.pending { opacity: .8; }
.list-row > div:first-child { min-width: 0; }

.mini { display: inline-flex; gap: 3px; }
.mini i { width: 14px; height: 5px; border-radius: 3px; background: var(--border); display: block; }
.mini i.d { background: var(--ok); }
.mini i.c { background: var(--brand); }
.mini i.y { background: var(--warn); }
.mini i.x { background: var(--err); }

.step-wrap { overflow-x: auto; margin: 4px 0 24px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 620px; }
.st { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 0 4px; }
.st::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.st:first-child::before { display: none; }
.st.done::before, .st.now::before, .st.stop::before { background: var(--ok); }
.st-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
          font-size: 13px; font-weight: 700; background: var(--surface); border: 2px solid var(--border); color: var(--text-muted); }
.st.done .st-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.st.now .st-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.st.now.you .st-dot { border-color: var(--warn); color: var(--warn); box-shadow: 0 0 0 4px rgba(184, 119, 13, .15); }
.st.stop .st-dot { background: var(--err); border-color: var(--err); color: #fff; }
.st-lbl { font-size: 13.5px; font-weight: 600; }
.st.todo .st-lbl { color: var(--text-muted); font-weight: 550; }
.st-sub { font-size: 12px; color: var(--text-muted); }
.st.now .st-sub { color: var(--brand); font-weight: 600; }
.st.now.you .st-sub { color: var(--warn); }
.st.stop .st-sub { color: var(--err); font-weight: 600; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.detail-main { display: grid; gap: 22px; min-width: 0; }
.card.action { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(184, 119, 13, .15); }
.card.action-ok { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(26, 127, 90, .14); }
.card.action-off { background: var(--surface-2); }
.card-kicker { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin: 0 0 4px; }
.action .card-kicker { color: var(--warn); }
.action-ok .card-kicker { color: var(--ok); }
.card > p { color: var(--text-dim); max-width: 72ch; }

.panel { margin-top: 14px; padding: 16px; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: 10px; }
.panel p { margin: 0; }
.panel textarea, .panel input[type=text] { background: var(--surface); }

.btn-danger { font: inherit; border-radius: var(--radius-sm); padding: 8px 15px; cursor: pointer; font-weight: 600;
              background: transparent; color: var(--err); border: 1px solid var(--err);
              transition: background var(--t-fast) var(--ease); }
.btn-danger:hover { background: rgba(192, 57, 43, .10); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.btn-danger.solid { background: var(--err); color: #fff; }

/* Kundenfassung des Angebots: bereinigtes HTML aus CRM-I, gesetzt wie Fließtext (§23.4). */
.offer-body { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 16px 18px; margin: 12px 0; overflow-x: auto; }
.offer-body > :first-child { margin-top: 0; }
.offer-body p { margin: 0 0 10px; }
.offer-body table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 14px; }
.offer-body td, .offer-body th { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
.offer-body h1, .offer-body h2, .offer-body h3, .offer-body h4 { font-size: 15px; margin: 16px 0 6px; }
.offer-figures { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 4px 0 14px; }
.offer-figures b { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.offer-figures span { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fp { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--text-dim);
      background: var(--surface-2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }

.facts { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.facts h2 { font-size: 14.5px; margin: 0 0 8px; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font-size: 13.5px; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.desc { display: grid; gap: 10px; }
.desc b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.desc p { margin: 2px 0 0; white-space: pre-wrap; }

.tl-item.spc .tl-dot { background: var(--warn); }
.tl-msg { display: block; margin-top: 4px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
          color: var(--text-dim); white-space: pre-wrap; }

.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-2 .wide { grid-column: 1 / -1; }
.field-err { color: var(--err); font-size: 13px; margin-top: 4px; }
.req { color: var(--err); }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; }
.check-line input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--brand); flex: 0 0 auto; }
.aside-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
              font-size: 14px; color: var(--text-dim); display: grid; gap: 8px; }
.aside-note h2 { margin: 0; font-size: 14.5px; color: var(--text); }
.aside-note ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.notice-ok { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(26, 127, 90, .12); color: var(--ok); font-weight: 600; margin: 0 0 16px; }
.notice-err { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(192, 57, 43, .10); color: var(--err); font-weight: 600; margin: 0 0 16px; }

@media (max-width: 900px) {
    .detail-grid, .form-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .ticket-list .list-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .facts dd { text-align: left; }
}

a.btn { text-decoration: none; display: inline-block; }

/* ---------- Rücksicht ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 640px) {
    .content { padding: 22px 15px 44px; }
    h1 { font-size: 23px; }
}